/* Independent shell. Reuses the established AMD surface, type, and chart tokens. */
:root {
  color-scheme: light; --plane:#f7f7f7; --surface:#fff; --surface-raised:#fff;
  --surface-sunken:#fafafa; --surface-hover:#f4f4f4; --surface-active:#ededed;
  --ink:#0a0a0a; --ink-secondary:#525252; --ink-muted:#737373; --ink-inverse:#fff;
  --border:#e5e5e5; --border-strong:#d4d4d4; --grid:#ededed; --axis:#d4d4d4;
  --series-1:#2a78d6; --series-2:#eb6834; --series-3:#1baf7a; --series-4:#eda100;
  --series-5:#e87ba4; --series-6:#008300; --series-7:#4a3aa7; --series-8:#e34948;
  --success:#0ca30c; --success-ink:#006300; --success-wash:#eaf6ea;
  --critical:#d03b3b; --critical-ink:#a01f1f; --critical-wash:#fbeceb;
  --focus:#0a0a0a; --radius-sm:6px; --radius:10px; --radius-lg:14px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace; --space-6:32px; --space-7:48px; --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}
:root[data-theme="dark"] {
  color-scheme:dark; --plane:#101010; --surface:#191919; --surface-raised:#202020;
  --surface-sunken:#141414; --surface-hover:#262626; --surface-active:#303030;
  --ink:#f5f5f5; --ink-secondary:#c0c0c0; --ink-muted:#a3a3a3; --ink-inverse:#101010;
  --border:#333; --border-strong:#525252; --grid:#303030; --axis:#525252; --focus:#f5f5f5;
  --success-ink:#8add8a; --success-wash:#172b1b; --critical-ink:#ffa8a8; --critical-wash:#351b1b;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-padding-top:84px; }
body { margin:0; background:var(--plane); color:var(--ink); font:14px/1.5 var(--font); }
button,input,select { font:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:not-allowed; opacity:.48; }
button,input,select,a,summary { -webkit-tap-highlight-color:transparent; }
:where(a,button,input,select,summary,[tabindex]):focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { text-wrap:balance; }
h1 { font-size:32px; line-height:1.2; letter-spacing:-1px; font-weight:650; }
h2 { font-size:16px; font-weight:650; letter-spacing:-.2px; }
h3 { font-size:14px; }
h2[title] { cursor:help; }
a { color:inherit; }
.muted,.hint { color:var(--ink-secondary); }
.hint { font-size:13px; }
.eyebrow { color:var(--ink-secondary); font-size:11px; font-weight:650; letter-spacing:.11em; text-transform:uppercase; }
.tabular { font-variant-numeric:tabular-nums; }
.topbar { height:72px; padding:0 max(24px,calc((100vw - 1320px)/2)); border-bottom:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; gap:10px; align-items:center; text-decoration:none; font-weight:700; font-size:17px; letter-spacing:-.4px; white-space:nowrap; }
.brand-mark { width:30px; height:30px; display:grid; place-items:center; background:var(--ink); color:var(--ink-inverse); border-radius:8px; font-size:17px; }
.brand-sub { font-size:12px; font-weight:500; color:var(--ink-muted); margin-left:5px; }
.topbar-actions,.actions,.toolbar-group { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.shell { max-width:1368px; padding:36px 24px 64px; margin:auto; }
.stack { display:grid; gap:24px; min-width:0; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:4px 0 8px; }
.page-heading h1 { margin:8px 0; }
.engine-labels { display:flex; gap:8px; flex-wrap:wrap; }
.engine-labels span,.badge { border:1px solid var(--border-strong); border-radius:99px; padding:5px 10px; background:var(--surface); font-size:12px; white-space:nowrap; }
.btn { min-height:40px; padding:9px 14px; background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--radius-sm); font-weight:550; line-height:1.3; }
.btn:hover:not(:disabled) { background:var(--surface-hover); border-color:var(--ink-muted); }
.btn--primary { color:var(--ink-inverse); background:var(--ink); border-color:var(--ink); }
.btn--primary:hover:not(:disabled) { color:var(--ink-inverse); background:var(--ink-secondary); }
.btn--quiet { border-color:transparent; background:transparent; }
.btn--danger { color:var(--critical-ink); }
.field { display:grid; gap:7px; font-size:13px; }
.field > span,.field > label { font-weight:550; }
input:not([type="file"]),select { width:100%; border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); padding:10px 12px; min-height:42px; }
input[type="file"] { max-width:100%; min-width:0; }
input::file-selector-button { padding:8px 12px; background:var(--surface-hover); color:var(--ink); border:1px solid var(--border-strong); border-radius:6px; margin-right:10px; cursor:pointer; }
.toolbar { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.toolbar-group .hint { max-width:230px; }
.field--inline { min-width:220px; }
.tabs { display:flex; border-bottom:1px solid var(--border-strong); gap:24px; overflow-x:auto; }
.tab { border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; padding:12px 2px; color:var(--ink-secondary); font-weight:600; }
.tab[aria-selected="true"] { border-color:var(--ink); color:var(--ink); }
.tab-count { font-size:11px; padding:2px 6px; background:var(--surface-active); border-radius:4px; margin-left:5px; }
.card { min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:20px; }
.card-head .hint { margin-top:4px; }
.connection { color:var(--ink-secondary); font-size:12px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.connection:before { content:""; width:6px; height:6px; border-radius:100%; background:var(--ink-muted); }
.connection[data-state="connected"]:before { background:var(--success); }
.batch-progress { display:flex; align-items:center; gap:20px; margin:20px 0; }
progress { width:100%; height:6px; border:0; border-radius:9px; overflow:hidden; accent-color:var(--ink); }
progress::-webkit-progress-bar { background:var(--surface-active); }
progress::-webkit-progress-value { background:var(--ink); }
.batch-progress > span { white-space:nowrap; font-size:13px; }
.batch-footer { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.score-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.score-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.score-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.score-value { font-size:36px; font-weight:600; letter-spacing:-1.2px; font-variant-numeric:tabular-nums; margin:12px 0 4px; }
.score-provenance { margin-top:16px; }
.score-counts { display:flex; gap:18px; flex-wrap:wrap; font-size:13px; }
.correct { color:var(--success-ink); } .wrong { color:var(--critical-ink); }
.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.monitor { display:grid; grid-template-columns:1fr minmax(250px,400px); gap:12px 24px; align-items:center; }
.monitor > .hint { grid-column:1/-1; }
audio { display:block; width:100%; min-width:0; height:40px; }
#livePanel { overflow-anchor:none; }
.card--flush { padding:0; overflow:hidden; }
.card--flush > .card-head { padding:24px; margin:0; }
.corpus-scroll { --row-height:48px; height:calc(var(--row-height)*10 + 41px); overflow:auto; overscroll-behavior:contain; border-top:1px solid var(--border); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th[title] { cursor:help; }
th[title] .sort-button { cursor:pointer; }
th { text-align:left; color:var(--ink-secondary); font-weight:550; background:var(--surface-sunken); }
th,td { padding:12px 16px; border-bottom:1px solid var(--border); }
.corpus-table { table-layout:fixed; min-width:640px; }
.corpus-table th { position:sticky; top:0; z-index:1; height:41px; }
.corpus-table th:first-child { width:42%; }
.corpus-table tbody tr[data-id] { height:var(--row-height); }
.corpus-table tbody tr[data-id] td { padding:0 16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.corpus-table tr[aria-current="true"] { background:var(--surface-active); }
.recording-button { border:0; background:transparent; color:var(--ink); padding:6px 0; text-align:left; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-height:32px; }
.recording-button:hover { text-decoration:underline; text-underline-offset:3px; }
.table-foot { padding:16px 24px; border-top:1px solid var(--border); }
.spacer td { padding:0; border:0; }
.upload-form { display:grid; grid-template-columns:1.5fr 1fr auto; gap:20px; align-items:end; }
.upload-form + .hint { margin-top:16px; }
.notice { padding:12px 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
.notice > p { margin-top:4px; }
.notice > .btn { margin-top:12px; }
.notice--error { background:var(--critical-wash); color:var(--critical-ink); border-color:var(--critical); }
.tournament-stack { display:grid; gap:24px; min-width:0; }
.tournament-stack > *,.subsection { min-width:0; }
.experiment-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.lineup-fieldset { min-width:0; margin:0; padding:0; border:0; }
.lineup-fieldset legend { padding:0; font-weight:650; }
.lineup-fieldset > .hint { margin:4px 0 12px; }
.candidate-lineup { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.candidate-option { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; min-width:0; padding:14px 16px; background:var(--surface); border-bottom:1px solid var(--border); }
.candidate-option:nth-child(odd) { border-right:1px solid var(--border); }
.candidate-option > input { margin:3px 0 0; }
.candidate-option > span { display:grid; min-width:0; }
.candidate-name { font-weight:600; overflow-wrap:anywhere; }
.candidate-meta,.candidate-reason { color:var(--ink-secondary); font-size:12px; overflow-wrap:anywhere; }
.candidate-reason { color:var(--critical-ink); margin-top:3px; }
.subsection { border-top:1px solid var(--border); padding-top:24px; }
.leader-strip { display:grid; grid-template-columns:minmax(150px,.55fr) 1fr; gap:16px; padding:16px; margin-bottom:20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-sunken); }
.table-scroll { min-width:0; margin-top:20px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius); }
.table-scroll table { min-width:680px; }
.table-scroll tr:last-child td { border-bottom:0; }
.evidence-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.metric-panel { min-width:0; padding:20px; background:var(--surface); border-right:1px solid var(--border); }
.metric-panel:last-child { border-right:0; }
.metric-panel h3 { margin:4px 0 12px; }
.metric-value { display:block; font-size:20px; line-height:1.3; overflow-wrap:anywhere; }
.metric-panel .hint { margin-top:5px; }
.composition-members { font-weight:600; margin-bottom:6px; overflow-wrap:anywhere; }
.deadline-chart svg { display:block; width:100%; height:auto; min-width:0; }
.deadline-chart .legend { margin-bottom:12px; }
.leaderboard-table { min-width:1120px !important; }
.sort-button { display:inline-flex; min-height:32px; align-items:center; padding:4px 0; border:0; background:transparent; color:inherit; font-weight:inherit; text-align:left; }
.sort-button[aria-pressed="true"]:after { content:" ↕"; margin-left:4px; }
.evidence-notes { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.evidence-notes > div:first-child { grid-column:1/-1; }
.evidence-notes ul { margin:12px 0 0; padding-left:20px; }
.metadata-list { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 16px; margin:0; padding:16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-sunken); }
.metadata-list dt { color:var(--ink-secondary); }
.metadata-list dd { margin:0; font-family:var(--mono); overflow-wrap:anywhere; }
.uncertainty-metrics { grid-template-columns:minmax(0,1fr) minmax(0,2fr); }
.uncertainty-metrics dd { font-family:inherit; }
@media (max-width:600px) { .uncertainty-metrics { grid-template-columns:minmax(0,1fr); } }
.identity-hash { display:block; margin-top:6px; font:inherit; overflow-wrap:anywhere; }
.signin { min-height:calc(100dvh - 190px); display:grid; place-items:center; }
.signin-card { width:min(100%,430px); display:grid; gap:22px; padding:36px; border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:var(--surface); }
.signin h1 { font-size:28px; }
.review-dialog { width:min(720px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); padding:0; border:1px solid var(--border-strong); border-radius:var(--radius-lg); background:var(--surface); color:var(--ink); overflow:hidden; }
.review-dialog[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.review-dialog::backdrop { background:rgb(0 0 0 / .48); }
.dialog-head,.dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; background:var(--surface); }
.dialog-head { border-bottom:1px solid var(--border); align-items:flex-start; }
.dialog-head h2 { max-width:520px; overflow-wrap:anywhere; margin:5px 0; }
.dialog-body { padding:24px; overflow:auto; overscroll-behavior:contain; display:grid; gap:16px; min-height:0; align-content:start; }
.dialog-footer { border-top:1px solid var(--border); }
.judgment-row { display:flex; gap:12px; align-items:end; } .judgment-row .field { flex:1; }
.transcript-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:8px; }
.transcript-list { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.transcript-row { display:grid; grid-template-columns:70px 1fr; align-items:start; gap:14px; padding:10px; border-radius:6px; border-left:2px solid transparent; }
.transcript-row[aria-current="true"] { background:var(--surface-active); border-left-color:var(--ink); }
.timestamp { font-size:12px; font-variant-numeric:tabular-nums; border:0; background:transparent; color:var(--ink-secondary); padding:3px; text-align:left; }
.timestamp:hover { text-decoration:underline; }
.transcript-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.skip-link { position:absolute; top:-100px; left:16px; z-index:20; padding:12px; background:var(--surface); }
.skip-link:focus { top:12px; }
@media (max-width:900px) { .chart-grid { grid-template-columns:1fr; } .upload-form { grid-template-columns:1fr 1fr; } .upload-form .btn { justify-self:start; } .experiment-fields { grid-template-columns:1fr 1fr; } .evidence-grid { grid-template-columns:1fr; } .metric-panel { border-right:0; border-bottom:1px solid var(--border); } .metric-panel:last-child { border-bottom:0; } .evidence-notes { grid-template-columns:1fr; } .evidence-notes > div:first-child { grid-column:auto; } }
@media (max-width:600px) {
  .topbar { padding:0 16px; height:auto; min-height:64px; flex-wrap:wrap; gap:8px; padding-block:10px; }
  .topbar-actions { gap:4px; } .topbar .btn { padding:8px; }
  .shell { padding:24px 16px 48px; } h1 { font-size:28px; }
  .page-heading { flex-direction:column; align-items:flex-start; gap:12px; }
  .stack { gap:20px; } .card,.score-card { padding:18px; }
  .toolbar,.toolbar-group { width:100%; } .toolbar-group .hint { max-width:none; }
  .toolbar-group .field { flex:1; min-width:180px; }
  .card-head,.batch-footer { flex-wrap:wrap; } .batch-footer .actions { width:100%; }
  .score-grid { gap:12px; } .score-value { font-size:30px; } .score-head { flex-direction:column; gap:4px; }
  .score-counts { gap:6px; flex-direction:column; } .monitor { grid-template-columns:1fr; }
  .upload-form { grid-template-columns:1fr; } .card--flush { padding:0; }
  .experiment-fields,.candidate-lineup { grid-template-columns:1fr; }
  .leader-strip { grid-template-columns:1fr; }
  .candidate-option:nth-child(odd) { border-right:0; }
  .card--flush > .card-head { padding:18px; } .table-foot { padding:16px 18px; }
  .signin { align-items:start; padding-top:24px; } .signin-card { padding:24px; }
  .dialog-head,.dialog-footer,.dialog-body { padding:16px; }
  .dialog-footer { flex-wrap:wrap; } .dialog-footer .actions { width:100%; justify-content:space-between; }
  input:not([type="file"]),select { font-size:16px; }
}
/* At high browser zoom, header/footer can exhaust the available height.
   Scroll the complete review so every control remains reachable. */
@media (max-height:400px) {
  .review-dialog[open] { display:block; overflow-y:auto; overscroll-behavior:contain; }
  .dialog-body { overflow:visible; }
}
@media (pointer:coarse) { .btn,.tab,.recording-button,.timestamp,.sort-button { min-height:44px; } .corpus-scroll { --row-height:56px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }

/* --- charts -------------------------------------------------------------- */

.chart {
  position: relative;
  min-width: 0;
}

.chart__plot {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  /* SVG widths follow the card, so Overview never introduces a horizontal
     scrollbar. The table view remains available for dense values. */
  overflow-x: hidden;
}

.chart__plot svg {
  display: block;
  overflow: visible;
}

.chart.is-stale .chart__plot {
  opacity: 0.45;
}

.chart__empty {
  display: grid;
  place-items: center;
  min-height: 140px;
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
  padding: var(--space-5);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--ink-secondary);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: none;
}

.legend__swatch--line {
  height: 2px;
  width: 14px;
  border-radius: 2px;
}

.tooltip {
  position: absolute;
  z-index: 5;
  min-width: 132px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 12px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.12);
  pointer-events: none;
  opacity: 0;
  transition: opacity 90ms ease;
}

.tooltip[data-visible="true"] {
  opacity: 1;
}

.tooltip__title {
  font-weight: 600;
  margin-bottom: 4px;
}

.tooltip__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
  color: var(--ink-secondary);
}

.tooltip__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tooltip__value {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.chart__tableview {
  margin-top: var(--space-3);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.chart__tableview > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-muted);
  list-style: none;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}

.chart__tableview > summary::-webkit-details-marker {
  display: none;
}

.chart__tableview > summary:hover { color:var(--ink); }