/* Upload workspace and charts; uses the Metadata visual tokens in site.css. */
.metadata-panel { border: 1px solid var(--border-color); background: var(--bg-card); }
.panel-header { padding: 17px 30px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-kicker { color: var(--primary); }.panel-status { color: var(--text-muted); display: flex; gap: 10px; align-items: center; }
.panel-content { padding: 38px 40px 42px; }
.panel-intro h3 { font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -.055em; margin-bottom: 5px; }
.panel-intro p, .metadata-hint { color: var(--text-muted); }
.panel-intro p { margin: 0 0 26px; }.metadata-hint { font-size: .85rem; line-height: 1.7; }
.metadata-picker { display: flex; align-items: center; gap: 18px; width: 100%; max-width: 480px; padding: 18px; border: 1px dashed #76ae78; background: var(--primary-light); cursor: pointer; transition: border-color .2s, background .2s; font-weight: 700; }
.metadata-picker:hover { border-color: var(--primary); background: #ddefd8; }
.picker-symbol { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--primary); color: var(--primary); font: 1.5rem "IBM Plex Mono", monospace; }
.picker-arrow { margin-left: auto; color: var(--primary); font-size: 1.3rem; }
#metadata-folder { position: absolute; width: 1px; height: 1px; opacity: 0; }
#metadata-folder:focus-visible + .metadata-hint { outline: 2px solid var(--primary); outline-offset: 4px; }
.metadata-hint { max-width: 720px; margin: 16px 0 24px; }
.metadata-privacy { display: flex; align-items: flex-start; gap: 14px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 18px 0; max-width: 720px; color: var(--text-muted); font-size: .87rem; line-height: 1.7; }
.privacy-icon { color: var(--primary); font-size: 1.35rem; line-height: 1; }
.metadata-selection { margin-top: 28px; overflow-wrap: anywhere; }
.metadata-selection h3 { font-size: 1.16rem; margin-bottom: 2px; }
.metadata-selection p { color: var(--text-muted); margin: 0; }
.metadata-selection ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 14px 0 0; }
.metadata-selection li { background: var(--bg-slate); border: 1px solid var(--border-color); padding: 5px 10px; font: .72rem "IBM Plex Mono", monospace; }
.workspace-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.action-button, .demo-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 14px 20px; min-height: 52px; font-weight: 700; transition: background .2s, transform .2s; }
.action-button { background: var(--primary); color: #fff; border: 1px solid var(--primary); min-width: 220px; }
.action-button:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-2px); }
.action-button:disabled { background: #e8ede7; color: #677768; border-color: var(--border-color); cursor: not-allowed; }
.demo-button { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.demo-button:hover:not(:disabled) { background: var(--primary-light); transform: translateY(-2px); }
.demo-button:disabled { opacity: .6; cursor: wait; }
#metadata-status { min-height: 22px; color: var(--primary); font: .78rem "IBM Plex Mono", monospace; margin: 15px 0 0; }
.metadata-error, .metadata-warnings { padding: 16px 20px; border: 1px solid #e0aa9e; color: #8b2d24; background: #fff1ee; overflow-wrap: anywhere; }
.metadata-warnings { margin: 20px 0; }.metadata-warnings h3 { margin-bottom: 8px; }.metadata-warnings ul { list-style: disc; padding-left: 23px; margin: 0; }
.metadata-result-heading { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 60px 0 25px; }
.metadata-result-heading h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.06em; margin: 0; }
.metadata-result-heading p, .metadata-stat span { color: var(--text-muted); }
.metadata-result-heading p { margin: 0; font-size: .85rem; }
.metadata-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--border-color); border: 1px solid var(--border-color); }
.metadata-stat { background: var(--bg-card); padding: 23px; display: flex; flex-direction: column; }
.metadata-stat strong { font: 600 2rem "Space Grotesk", sans-serif; color: var(--primary); }
.metadata-stat span { font-size: .83rem; }
.metadata-section { background: var(--bg-card); border: 1px solid var(--border-color); margin: 25px 0; padding: 28px; }
.metadata-section > h2 { font-size: 1.5rem; letter-spacing: -.04em; margin: 0 0 16px; }
.metadata-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)); gap: 16px; }
.metadata-chart { background: var(--surface-raised); border: 1px solid var(--border-color); padding: 18px; min-width: 0; margin-top: 16px; }
.metadata-chart h3 { font: 500 1rem "Space Grotesk", sans-serif; margin: 0 0 18px; }
.metadata-chart-scroll { overflow-x: auto; padding-bottom: 8px; }
.metadata-plot { display: flex; align-items: flex-end; gap: 8px; min-height: 194px; width: max-content; min-width: 100%; border-bottom: 1px solid var(--border-color); }
.metadata-column { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 40px; flex: 1; }
.metadata-bar { width: 24px; background: linear-gradient(var(--primary), #7fbb6d); border-radius: 2px 2px 0 0; }
.metadata-pair { display: flex; gap: 3px; align-items: flex-end; }.metadata-pair .metadata-bar { width: 17px; }
.metadata-reactions { background: #72bea7; }
.metadata-legend { display: flex; gap: 16px; font-size: .78rem; }
.metadata-legend-comments { color: var(--primary); }.metadata-legend-reactions { color: var(--accent-blue); }
.metadata-bar-value, .metadata-bar-label { font: .68rem "IBM Plex Mono", monospace; color: var(--text-muted); }
.metadata-bar-label { white-space: nowrap; padding: 6px 0; }
.metadata-words { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; color: var(--primary); }
.metadata-history { margin-top: 18px; }.metadata-history summary { cursor: pointer; font-weight: 700; }
.metadata-history ul { list-style: disc; padding: 12px 24px; max-height: 300px; overflow: auto; }
@media (max-width: 600px) {
  .panel-header { padding: 15px 20px; }.panel-status { font-size: .56rem; }
  .panel-content, .metadata-section { padding: 20px; }
  .workspace-actions { flex-direction: column; align-items: stretch; }
}