/* Aesthetic direction — chosen, not defaulted.
 * Internal ML-engineering tool: precise / calm / dense.
 * - Type: IBM Plex Sans (UI) + IBM Plex Mono (ids, code). Loaded from Google Fonts with a system
 *   fallback so the tool still works offline; Plex reads technical without the Inter/Roboto default look.
 * - Color: cool-neutral. Neutrals are one OKLCH hue (250°) at low chroma so greys feel like one family;
 *   brand blue oklch(50% .16 258); semantic green/amber/red at matched lightness. Toned white/black
 *   (#fbfcfe / #141b24), never pure. Every text/background pair below was computed ≥ 4.5:1.
 * - Density: tight-normal. 4 px spacing scale; 14 px body; tables at 13 px.
 * - Radius: 6 px (controls), 8 px (surfaces). Depth from borders and background steps, not shadows;
 *   the only shadow is the floating tooltip.
 * - Components: one filled primary per panel; everything else outlined or ghost. Status is colour + text.
 * - Motion: quiet — 180 ms ease on state changes only; honours prefers-reduced-motion.
 * - Charts keep the validated dataviz palette (series #2a78d6) with chrome drawn from these tokens.
 * Light theme only, by decision.
 */

:root {
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gray-50: #f8fafd; --gray-100: #f0f4f7; --gray-200: #e4e8ed; --gray-300: #cfd5db; --gray-400: #9ea5ad;
  --gray-500: #737b85; --gray-600: #555f69; --gray-700: #404952; --gray-800: #262f38; --gray-900: #141b24;

  --bg: var(--gray-100);
  --surface: #fbfcfe;
  --surface-2: var(--gray-50);
  --line: var(--gray-200);
  --line-strong: var(--gray-300);
  --text: var(--gray-900);
  --text-2: var(--gray-700);
  --text-muted: var(--gray-600);
  --text-faint: var(--gray-500);

  --primary: #1d60bc; --primary-hover: #034da8; --primary-active: #003f93;
  --primary-soft: #e2f0ff; --primary-ink: #06489c;
  --success: #0a7e3a; --success-soft: #dcf7e1; --success-ink: #005a1c;
  --warning: #bb7400; --warning-soft: #ffecc9; --warning-ink: #7a3800;
  --danger:  #ba2b2e; --danger-soft:  #ffe7e4; --danger-ink:  #940015;
  --mark: #ffe9a8;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --text-xs: 11px; --text-sm: 12px; --text-md: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-hero: 44px;
  --radius-sm: 4px; --radius: 6px; --radius-lg: 8px;
  --ease: 180ms ease;
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
  --topbar-h: 52px;
}

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body { margin: 0; font: var(--text-base)/1.5 var(--font-sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
p { margin: 0 0 var(--space-3); text-wrap: pretty; }
a { color: var(--link); text-decoration: none; transition: color var(--ease); }
a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
.skip { position: absolute; left: var(--space-3); top: -48px; padding: var(--space-2) var(--space-3); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); z-index: 10; }
.skip:focus { top: var(--space-2); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* ---- type scale ---- */
h1 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1.3; margin: var(--space-6) 0 var(--space-3); }
h3 { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-3); }
.muted { color: var(--text-muted); }
.small { font-size: var(--text-sm); }
.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.kbd { font-family: var(--font-mono); font-size: var(--text-xs); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-sm); padding: 0 5px; color: var(--text-2); background: var(--surface); }
.empty { padding: var(--space-6); text-align: center; color: var(--text-muted); }

/* ---- shell ---- */
.topbar { display: flex; align-items: center; gap: var(--space-5); height: var(--topbar-h); padding: 0 var(--space-5); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--text); }
.brand:hover { text-decoration: none; color: var(--text); }
.brand-mark { width: 18px; height: 18px; border-radius: 4px; background: var(--primary); position: relative; flex: none; }
.brand-mark::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 3px; background: var(--surface); border-radius: 2px; }
#nav { display: flex; gap: var(--space-1); height: 100%; }
#nav a { display: inline-flex; align-items: center; padding: 0 var(--space-3); height: 100%; color: var(--text-muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ease), border-color var(--ease); }
#nav a:hover { color: var(--text); text-decoration: none; }
#nav a.active { color: var(--primary-ink); border-bottom-color: var(--primary); }
.auth { margin-left: auto; font-size: var(--text-md); display: flex; align-items: center; gap: var(--space-2); }
.toast { padding: var(--space-1) var(--space-3); border-radius: var(--radius); background: var(--primary-soft); color: var(--primary-ink); font-size: var(--text-md); border: 1px solid transparent; }
.toast.error { background: var(--danger-soft); color: var(--danger-ink); }
.view { max-width: 1280px; margin: 0 auto; padding: var(--space-5) var(--space-5) var(--space-7); }

/* ---- layout ---- */
.row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grid { display: grid; gap: var(--space-4); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); }
.grid.two > * { min-width: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.panel > h3:first-child { margin-top: 0; }
form.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---- controls ---- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  min-height: 32px; padding: 0 var(--space-3); font: 500 var(--text-base)/1 var(--font-sans);
  color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease);
}
button:hover, .btn:hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--text); text-decoration: none; }
button:active, .btn:active { transform: translateY(1px); background: var(--gray-100); }
button.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
button.primary:active { background: var(--primary-active); border-color: var(--primary-active); }
button.danger { color: var(--danger-ink); }
button.danger:hover { background: var(--danger-soft); border-color: var(--danger); }
button.small, .btn.small { min-height: 26px; padding: 0 var(--space-2); font-size: var(--text-sm); }
button:disabled, button[aria-busy="true"] { opacity: .55; cursor: not-allowed; transform: none; }
button:disabled:hover { background: var(--surface); border-color: var(--line-strong); }
button.primary:disabled:hover { background: var(--primary); border-color: var(--primary); }
button.is-loading { position: relative; color: transparent !important; }
button.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-color: var(--gray-400) transparent var(--gray-400) transparent; border-radius: 50%; animation: spin .8s linear infinite; }
button.primary.is-loading::after { border-color: #fff transparent #fff transparent; }
@keyframes spin { to { transform: rotate(360deg); } }

input, select, textarea {
  font: var(--text-base)/1.4 var(--font-sans); color: var(--text); min-height: 32px; padding: var(--space-1) var(--space-2);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--ease), box-shadow var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--gray-400); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); border-radius: var(--radius); }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input[type=text], input[type=url], input[type=number], input[type=password], select, textarea { min-width: 0; }
input[type=checkbox] { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--primary); }
input[type=file] { border: 0; padding: 0; background: none; min-height: 0; }
textarea { width: 100%; resize: vertical; line-height: 1.5; }
select { padding-right: var(--space-5); }
label { display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
label > input, label > select, label > textarea { font-weight: 400; }
label.inline { flex-direction: row; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: 400; color: var(--text); }
details > summary { cursor: pointer; }
details > summary.small { color: var(--text-muted); }

/* ---- tables ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: var(--text-md); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--surface-2); font-weight: 600; font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; }
th:hover { color: var(--text); }
thead th:first-child { border-top-left-radius: var(--radius-lg); }
thead th:last-child { border-top-right-radius: var(--radius-lg); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--ease); }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td .row { gap: var(--space-2); }

/* ---- status: colour plus text, never colour alone ---- */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--space-2); border-radius: 999px; font-size: var(--text-sm); font-weight: 500; line-height: 1.5; background: var(--gray-200); color: var(--text-2); white-space: nowrap; }
.pill.ok { background: var(--success-soft); color: var(--success-ink); }
.pill.bad { background: var(--danger-soft); color: var(--danger-ink); }
.pill.warn { background: var(--warning-soft); color: var(--warning-ink); }
.pill.accent { background: var(--primary-soft); color: var(--primary-ink); }
a.pill:hover { text-decoration: none; filter: brightness(.97); }
.progress { height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; }
.progress > div { height: 100%; background: var(--primary); border-radius: 3px; transition: width .3s ease; }
.corr-good { color: var(--success-ink); font-weight: 600; }
.corr-bad { color: var(--danger-ink); }

/* ---- figures ---- */
.stats-row { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 110px; }
.stat b { font-size: var(--text-2xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.stat > .muted { font-size: var(--text-sm); }
.stats-row.panel .stat span.small { color: var(--text-muted); }
.scorebig { min-width: 160px; }
.scorebig b { font-size: var(--text-hero); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.hist { display: flex; align-items: flex-end; gap: var(--space-2); height: 80px; }
.hist > div { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
.hist > div span { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: var(--text-xs); color: var(--text-muted); }
.hist-labels { display: flex; gap: var(--space-2); }
.hist-labels > div { flex: 1; text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
pre.log { background: var(--gray-900); color: var(--log-ink); padding: var(--space-3); border-radius: var(--radius); max-height: 260px; overflow: auto; font: var(--text-sm)/1.5 var(--font-mono); margin: var(--space-3) 0 0; }

/* ---- uploads & media ---- */
audio { width: 100%; }
audio.mini { width: 220px; height: 32px; }
.dropzone { border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-5); text-align: center; color: var(--text-muted); background: var(--surface-2); transition: border-color var(--ease), background var(--ease); }
.dropzone.over { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); }
.check-list { display: grid; gap: var(--space-2); }
.check-list label { flex-direction: row; align-items: flex-start; gap: var(--space-2); font-size: var(--text-base); font-weight: 400; color: var(--text); }
.check-list label input { margin-top: 3px; }
.check-list label span.desc { color: var(--text-muted); font-size: var(--text-sm); display: block; }

/* ---- rating page: the one screen non-engineers see; calmer and larger ---- */
.rate { max-width: 760px; margin: 0 auto; }
.rate .text { font-size: var(--text-xl); line-height: 1.5; margin: var(--space-4) 0; }
.rate mark { background: var(--mark); color: inherit; padding: 0 3px; border-radius: 3px; }
.choices { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.choices button { min-width: 56px; min-height: 44px; padding: var(--space-2) var(--space-4); font-size: var(--text-lg); }
.choices button.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.choices button.selected.yes { background: var(--success); border-color: var(--success); }
.choices button.selected.no { background: var(--danger); border-color: var(--danger); }
.choices button.mos { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 88px; }
.choices button.mos small { font-size: var(--text-xs); font-weight: 400; opacity: .85; }
.question { margin: var(--space-4) 0; }
.question .q { font-weight: 600; margin-bottom: var(--space-2); }
.question .hint { color: var(--text-muted); font-weight: 400; cursor: help; }
details.rubric { margin: var(--space-3) 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); }
details.rubric summary { font-weight: 600; padding: var(--space-1) 0; }
details.rubric ol { padding-left: var(--space-5); }
details.rubric .instructions { margin: var(--space-2) 0; background: var(--warning-soft); border-color: transparent; color: var(--warning-ink); }
details.rubric table.anchors { margin: var(--space-2) 0; border: 0; background: transparent; }
details.rubric table.anchors td { padding: var(--space-1) var(--space-2); font-size: var(--text-md); border-bottom: 1px solid var(--line); }
details.rubric dl { margin: var(--space-2) 0; }
details.rubric dt { font-weight: 600; margin-top: var(--space-2); }
details.rubric dd { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: var(--text-md); }
/* metrics5: five metrics, each a vertical list of six answers with their meaning; the active one takes number keys */
.rate5-player { position: sticky; top: var(--topbar-h); z-index: 4; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.rate5-player audio { display: block; margin-top: var(--space-2); }
fieldset.metric5 { margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; transition: border-color var(--ease), background var(--ease); }
fieldset.metric5.active { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: var(--surface-2); }
.metric5-name { padding: 0 var(--space-1); font-weight: 600; font-size: var(--text-lg); }
fieldset.metric5:not(.answered) .metric5-name::after { content: " *"; color: var(--danger-ink); }
.metric5-desc { margin: 0 0 var(--space-1); color: var(--text-2); }
.metric5-example { margin: 0 0 var(--space-2); font-size: var(--text-md); color: var(--text-muted); }
.metric5-example span { font-style: italic; }
.opts5 { display: flex; flex-direction: column; gap: 2px; }
label.opt5 { display: grid; grid-template-columns: auto 1.6em 1fr; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius); font-size: var(--text-base); font-weight: 400; color: var(--text); cursor: pointer; transition: background var(--ease), border-color var(--ease); }
label.opt5:hover { background: var(--gray-100); }
label.opt5.selected { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); color: var(--primary-ink); }
label.opt5 input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }
label.opt5:has(input:focus-visible) { box-shadow: var(--focus); }
.opt5-num { font-variant-numeric: tabular-nums; text-align: center; }
.lang-switch { gap: var(--space-2); }
/* eval sets: filters over the editable table of texts */
.es-filters { margin-bottom: var(--space-3); align-items: flex-end; }
.es-text { max-width: 640px; line-height: 1.45; }
.es-actions { flex-wrap: nowrap; gap: var(--space-1); }
table.es-format td, table.es-example td { font-size: var(--text-md); vertical-align: top; }
table.es-format td:first-child { white-space: nowrap; }
table.es-example td { white-space: nowrap; }
details.es-server summary { color: var(--text-muted); cursor: pointer; }
.hc-controls { align-items: flex-end; }
.human-compare .viz-card { max-width: 900px; }
/* session form: run picker preview; status is colour plus text */
.callout { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius); font-size: var(--text-md); }
.callout.warn { background: var(--warning-soft); color: var(--warning-ink); }
.callout.bad { background: var(--danger-soft); color: var(--danger-ink); }
.callout.warn::before { content: "Warning: "; font-weight: 600; }
.callout.bad::before { content: "Cannot create: "; font-weight: 600; }
.session-preview { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface-2); }
.run-picks { max-height: 260px; overflow: auto; padding: var(--space-1); }
.best-val { font-weight: 600; color: var(--text); }

/* ---- admin ---- */
.setting { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: end; }
.setting label > span { display: flex; gap: var(--space-2); align-items: center; }
.setting input { width: 100%; }

/* ---- dashboard charts: quiet chrome, bars are the only loud thing ---- */
.filters { position: sticky; top: var(--topbar-h); z-index: 3; }
.viz-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); }
.facet { margin-bottom: var(--space-2); }
.facet > h3 { margin-top: var(--space-4); }
.viz-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4) var(--space-2); position: relative; }
.viz-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-1); }
.viz-title { font-weight: 600; font-size: var(--text-base); color: var(--text); }
.viz-sub { font-size: var(--text-sm); color: var(--text-muted); }
.viz-toggle { font-size: var(--text-sm); min-height: 26px; padding: 0 var(--space-2); }
.viz-plot { position: relative; width: 100%; }
.viz-plot svg { display: block; font-family: var(--font-sans); }
.viz-row { cursor: default; }
.viz-row:focus { outline: none; }
.viz-row:focus rect:first-child { fill: var(--gray-100); }
.viz-tip { position: absolute; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); box-shadow: 0 4px 12px rgba(20,27,36,.10); pointer-events: none; z-index: 4; max-width: 320px; line-height: 1.45; }
.viz-table { margin-top: var(--space-2); font-size: var(--text-sm); }
.viz-empty { padding: var(--space-5); text-align: center; color: var(--text-muted); font-size: var(--text-md); }

/* ---- confirmation dialog (ui.js confirmAction) ---- */
.modal-backdrop { position: fixed; inset: 0; z-index: 19; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; background: var(--backdrop); }
.modal { width: min(640px, 92vw); display: flex; flex-direction: column; gap: var(--space-2); box-shadow: 0 12px 32px rgba(20,27,36,.18); }
.modal p { margin: 0; }
.modal .row { justify-content: flex-end; }

/* ---- shared small controls ---- */
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--gray-100); border: 1px solid var(--line); border-radius: 999px; flex-wrap: wrap; }
.seg button { min-height: 28px; padding: 0 var(--space-3); border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font-size: var(--text-md); font-weight: 500; }
.seg button:hover { background: var(--raised); color: var(--text); }
.seg button.on { background: var(--raised); color: var(--text); box-shadow: 0 1px 2px rgba(20,27,36,.12), 0 0 0 1px var(--line); }
button.play { width: 28px; min-height: 28px; padding: 0; border-radius: 50%; color: var(--primary); }
button.play.playing { background: var(--primary); border-color: var(--primary); color: #fff; }
button.linklike { min-height: 0; padding: 0; border: 0; background: none; color: var(--primary); font-weight: 400; }
button.linklike:hover { background: none; text-decoration: underline; }
.chip { display: inline-flex; align-items: baseline; gap: var(--space-1); padding: 1px var(--space-2); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: var(--text-sm); }
.chips { gap: var(--space-2); }

/* ---- run page ---- */
.crumbs { margin-bottom: var(--space-2); }
.run-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.run-head h1 { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.run-score { display: flex; align-items: baseline; gap: var(--space-1); }
.run-score b { font-size: var(--text-hero); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.metric-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin: var(--space-5) 0 var(--space-4); }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.tile-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.tile-value { margin-top: var(--space-1); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.tile-sub { margin-top: 2px; font-size: var(--text-sm); color: var(--text-muted); }
.tile-count { font-size: var(--text-md); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.metric-tiles { align-items: start; }
.tile-legend { margin: var(--space-4) 0 0; }
.tile-legend + .metric-tiles { margin-top: var(--space-2); }
.better { color: var(--text-faint); font-weight: 600; }
.tile-about { margin-top: var(--space-2); font-size: var(--text-sm); line-height: 1.4; color: var(--text-2); }
details.tile-reading { margin-top: var(--space-1); font-size: var(--text-sm); }
details.tile-reading summary { color: var(--link); cursor: pointer; }
details.tile-reading p { margin: var(--space-1) 0 0; line-height: 1.45; color: var(--text-muted); }
details.collapsible > summary { font-weight: 500; color: var(--text-2); }
details.collapsible[open] > summary { margin-bottom: var(--space-3); }
.job-list { display: flex; flex-direction: column; margin-top: var(--space-3); }
.job-line { display: grid; grid-template-columns: 56px 90px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius); color: var(--text); }
.job-line:hover { background: var(--surface-2); text-decoration: none; color: var(--text); }
.items-bar { margin-top: var(--space-6); }
.items-bar h2 { margin: 0; }
table.items td.text-cell { max-width: 540px; }
tr.detail-row td { background: var(--surface-2); }
.detail-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); word-break: break-word; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-3); }

/* ---- dashboard ---- */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.dash-head h1 { font-size: var(--text-3xl); margin-bottom: var(--space-1); letter-spacing: -0.02em; }
.dash-head p { margin: 0; }
.dash-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.facet { margin-bottom: var(--space-7); }
.facet-title { font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-3); }
.hero { display: grid; grid-template-columns: minmax(300px, 5fr) 7fr; gap: var(--space-3); }
@media (max-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero-lead { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.hero .tile-value { font-size: var(--text-3xl); }
.hero-name { margin-top: var(--space-2); font-size: var(--text-xl); font-weight: 600; }
.hero-sub { font-size: var(--text-sm); color: var(--text-muted); }
.hero-score { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); }
.hero-score .big { font-size: 56px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.hero-score .of { color: var(--text-muted); }
.hero-delta { margin-top: var(--space-2); font-size: var(--text-md); color: var(--text-2); }
.hero-delta b { color: var(--success-ink); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-6) 0 var(--space-3); }
.section-title h2 { margin: 0; }
.lb { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.lb-row { display: grid; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); cursor: pointer; transition: background var(--ease); }
.lb-row:last-child { border-bottom: 0; }
.lb-row:hover { background: var(--surface-2); }
.lb-row.pinned { background: var(--primary-soft); }
.lb-row.lb-head { cursor: default; background: var(--surface-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.lb-rank { font-size: var(--text-xl); font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.lb-rank.top { color: var(--text); }
.lb-name { display: flex; flex-direction: column; min-width: 0; }
.lb-name .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-base); font-weight: 500; color: var(--text); }
.lb-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--text-muted); }
.lb-score { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: var(--space-2); }
.lb-score b { text-align: right; font-variant-numeric: tabular-nums; }
.sbar { position: relative; height: 8px; background: var(--gray-100); border-radius: 4px; overflow: hidden; }
.sbar-fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--viz-series); border-radius: 4px; }
.lb-row.pinned .sbar { background: var(--surface); }
.lb-delta { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lb-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.lb-members { display: flex; flex-direction: column; padding: var(--space-2) var(--space-4) var(--space-3) calc(40px + var(--space-6)); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.lb-member { display: flex; align-items: center; gap: var(--space-3); padding: 2px 0; color: var(--text); font-size: var(--text-md); }
.lb-member:hover { color: var(--primary-ink); text-decoration: none; }
.lb-member b { min-width: 40px; font-variant-numeric: tabular-nums; }
button.pin { width: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-faint); }
button.pin:hover { background: var(--gray-100); color: var(--text-2); }
button.pin[aria-pressed="true"] { color: var(--primary); }
.heat-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); }
.heat-wrap .table-wrap { overflow-x: auto; }
table.heat { width: 100%; border: 0; border-collapse: separate; border-spacing: 2px; background: transparent; font-size: var(--text-sm); }
table.heat th { position: static; padding: var(--space-1) var(--space-1) var(--space-2); background: transparent; border: 0; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; text-transform: none; white-space: normal; vertical-align: bottom; text-align: center; cursor: default; }
table.heat td { padding: 0; border: 0; }
table.heat tbody tr:hover { background: transparent; }
table.heat td.heat-label { position: sticky; left: 0; z-index: 1; width: 1%; padding-right: var(--space-4); vertical-align: middle; background: var(--surface); white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-sm); }
.heat-sub { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-muted); }
table.heat tr.pinned td.heat-label { color: var(--primary-ink); font-weight: 600; }
.heat .cell { display: flex; align-items: center; justify-content: center; min-width: 68px; height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.heat .cell.none { color: var(--text-faint); background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.heat-legend { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.heat-legend .sw { display: inline-block; width: 20px; height: 10px; border-radius: 2px; }
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { min-height: 36px; margin-bottom: -1px; padding: 0 var(--space-3); border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--text-muted); }
.tabs button:hover { background: transparent; color: var(--text); }
.tabs button.on { color: var(--primary-ink); border-bottom-color: var(--primary); }

/* ================================================================ theme
 * Light is the base palette above. Dark is the same roles re-stepped for a dark surface (not an inversion):
 * cool-neutral 250° greys, a brighter link blue, the dataviz palette's dark series step, and a heat ramp that
 * climbs in lightness toward "better". Declared under both the OS preference and the explicit toggle so the
 * toggle wins either way. */
:root {
  --link: var(--primary); --link-hover: var(--primary-hover); --log-ink: #e4e8ed; --raised: var(--surface); --backdrop: rgba(20,27,36,.28);
  --viz-series: #2a78d6; --viz-dim: #cfd5db; --viz-grid: #e4e8ed; --viz-axis: #cfd5db; --viz-surface: var(--surface);
  --viz-ink: var(--text); --viz-ink2: var(--text-2); --viz-ink3: var(--text-muted); --viz-hover: var(--gray-100);
  --heat-0: #cde2fb; --heat-1: #b7d3f6; --heat-2: #9ec5f4; --heat-3: #86b6ef; --heat-4: #6da7ec; --heat-5: #5598e7;
  --heat-6: #3987e5; --heat-7: #2a78d6; --heat-8: #256abf; --heat-9: #1c5cab; --heat-10: #184f95;
  --pulse: #0a7e3a;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --gray-50: #1a2029; --gray-100: #1f2630; --gray-200: #28303b; --gray-300: #353e4b; --gray-400: #4f5a69;
  --gray-500: #76818f; --gray-600: #9aa4b0; --gray-700: #c0c8d2; --gray-800: #dce2e9; --gray-900: #0b0e13;
  --bg: #0d1016; --surface: #141920; --surface-2: #19202a; --line: #242c37; --line-strong: #313a47;
  --text: #e7ecf2; --text-2: #c3cbd5; --text-muted: #98a2ae; --text-faint: #6c7785;
  --primary: #2f6fd0; --primary-hover: #3a7be0; --primary-active: #2a64bd; --primary-soft: #16263d; --primary-ink: #9cc4f8;
  --success: #1f9d55; --success-soft: #10271a; --success-ink: #73d69c;
  --warning: #c78a1c; --warning-soft: #2c220f; --warning-ink: #f0c36a;
  --danger: #d0453f; --danger-soft: #31161a; --danger-ink: #ff938d;
  --mark: #4a3d12; --link: #8ab8f7; --link-hover: #b3d0fb; --log-ink: #c9d1db; --raised: #262e3a; --backdrop: rgba(3,5,8,.62);
  --viz-series: #3987e5; --viz-dim: #3a4451; --viz-grid: #252d38; --viz-axis: #38414d;
  --heat-0: #1e3858; --heat-1: #224268; --heat-2: #274c79; --heat-3: #2c578b; --heat-4: #33639e; --heat-5: #3b70b1;
  --heat-6: #467ec2; --heat-7: #568ed2; --heat-8: #6ba0e0; --heat-9: #80b1ec; --heat-10: #96c2f5;
  --pulse: #34c77b; --focus: 0 0 0 2px var(--bg), 0 0 0 4px #5b9cf0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --gray-50: #1a2029; --gray-100: #1f2630; --gray-200: #28303b; --gray-300: #353e4b; --gray-400: #4f5a69;
    --gray-500: #76818f; --gray-600: #9aa4b0; --gray-700: #c0c8d2; --gray-800: #dce2e9; --gray-900: #0b0e13;
    --bg: #0d1016; --surface: #141920; --surface-2: #19202a; --line: #242c37; --line-strong: #313a47;
    --text: #e7ecf2; --text-2: #c3cbd5; --text-muted: #98a2ae; --text-faint: #6c7785;
    --primary: #2f6fd0; --primary-hover: #3a7be0; --primary-active: #2a64bd; --primary-soft: #16263d; --primary-ink: #9cc4f8;
    --success: #1f9d55; --success-soft: #10271a; --success-ink: #73d69c;
    --warning: #c78a1c; --warning-soft: #2c220f; --warning-ink: #f0c36a;
    --danger: #d0453f; --danger-soft: #31161a; --danger-ink: #ff938d;
    --mark: #4a3d12; --link: #8ab8f7; --link-hover: #b3d0fb; --log-ink: #c9d1db; --raised: #262e3a; --backdrop: rgba(3,5,8,.62);
    --viz-series: #3987e5; --viz-dim: #3a4451; --viz-grid: #252d38; --viz-axis: #38414d;
    --heat-0: #1e3858; --heat-1: #224268; --heat-2: #274c79; --heat-3: #2c578b; --heat-4: #33639e; --heat-5: #3b70b1;
    --heat-6: #467ec2; --heat-7: #568ed2; --heat-8: #6ba0e0; --heat-9: #80b1ec; --heat-10: #96c2f5;
    --pulse: #34c77b; --focus: 0 0 0 2px var(--bg), 0 0 0 4px #5b9cf0;
  }
}
.theme-toggle { width: 32px; min-height: 32px; padding: 0; margin-left: var(--space-2); border-radius: 50%; color: var(--text-muted); }
.theme-toggle:hover { color: var(--text); }

/* ================================================================ motion
 * Quiet and purposeful: things arrive (rise, bars grow from their baseline, numbers count up) and respond (hover
 * cross-highlighting). Nothing loops except the live-job pulse. All of it collapses to instant under
 * prefers-reduced-motion via the global rule at the top of this file. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes growx { from { transform: scaleX(0); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
/* fill-mode backwards: hold the first frame through the stagger delay, then hand back to the cascade, so the
 * brushing opacity below still applies to rows that animated in. */
.reveal { animation: rise .55s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 34ms); }
.hero-stats .reveal:nth-child(1) { --i: 1; } .hero-stats .reveal:nth-child(2) { --i: 2; } .hero-stats .reveal:nth-child(3) { --i: 3; } .hero-stats .reveal:nth-child(4) { --i: 4; }
.viz-plot path.grow { animation: growx .75s cubic-bezier(.2, .7, .2, 1) backwards; }
.sbar-fill { transform-origin: left center; animation: growx .9s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 34ms + 120ms); }
.heat .cell { animation: fadein .5s ease backwards; animation-delay: calc(var(--i, 0) * 24ms + 100ms); }
.viz-card.enter { animation: rise .5s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
.no-anim .reveal, .no-anim .sbar-fill, .no-anim .heat .cell { animation: none; }
[data-label] { transition: opacity .18s ease; }
.brushing [data-label]:not(.brushed) { opacity: .28; }
.brushing .lb-row.brushed, .brushing tr.brushed td.heat-label { color: var(--primary-ink); }
.lb-row:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); border-radius: 0; }
.live { display: inline-flex; align-items: center; gap: var(--space-2); padding: 3px var(--space-3); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: var(--text-sm); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pulse); animation: pulse 1.8s ease-out infinite; }
button.sort-btn { min-height: 0; padding: 0; gap: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
button.sort-btn:hover, button.sort-btn:active { background: none; color: var(--text); transform: none; }
button.sort-btn.on { color: var(--text); }
.human-empty { margin-top: var(--space-3); }

/* ---- job state: pause / stop / resume ---- */
.job-banner { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); font-size: var(--text-md); }
.job-progress { flex: 1 1 160px; min-width: 120px; }
.job-ctl { gap: var(--space-2); }

/* ---- signed-out viewers: everything is readable; controls that change data are admin-only ---- */
body.viewer .admin-only { display: none !important; }
body:not(.viewer) .viewer-only { display: none !important; }

/* ---- dashboard: voice filter for the By metric charts ---- */
.voice-filter { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-4); }
.voice-filter-label { margin-right: var(--space-1); font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
button.voice-chip, button.pick-chip { min-height: 28px; padding: 0 var(--space-3); gap: var(--space-2); border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; transition: background var(--ease), color var(--ease), border-color var(--ease); }
button.voice-chip:hover, button.pick-chip:hover { background: var(--surface-2); color: var(--text); }
button.voice-chip.on, button.pick-chip.on { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); background: var(--primary-soft); color: var(--primary-ink); }
button.voice-chip:not(.on):not(.reset) .voice-label { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.voice-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
button.voice-chip.on .voice-dot, button.pick-chip.on .voice-dot { background: currentColor; }
button.pick-chip.on:hover { background: var(--primary-soft); color: var(--primary-ink); }
.voice-n { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-faint); }
button.voice-chip.reset { border-style: dashed; }
.lb-actions { display: flex; justify-content: flex-end; gap: 2px; }
.lb-hidden { margin: var(--space-3) 0 0; }

/* ---- monitoring: latency sparkline per target (2px line, failed probes as status marks, hover readout) ---- */
.spark { position: relative; display: inline-block; line-height: 0; }
.spark svg { display: block; overflow: visible; cursor: crosshair; }
.spark-line { fill: none; stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-fail { fill: var(--danger); }
.spark-dot { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.spark-tip { display: none; position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 5; padding: 2px var(--space-2); white-space: nowrap; font-size: var(--text-xs); line-height: 1.6; color: var(--text); background: var(--raised); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(20,27,36,.12); }
.tile-value.warn-ink { color: var(--warning-ink); }
.tile-value.bad-ink { color: var(--danger-ink); }
.nav-badge { margin-left: 6px; min-width: 18px; padding: 0 5px; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; line-height: 18px; text-align: center; color: var(--danger-ink); background: var(--danger-soft); }
/* Narrow screens: the tabs scroll sideways inside the top bar instead of widening the page. */
@media (max-width: 900px) {
  .topbar { gap: var(--space-3); padding: 0 var(--space-4); }
  #nav { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  #nav a { flex: none; white-space: nowrap; }
  .brand { flex: none; }
}

/* ---- audit log ---- */
.audit-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); }
.audit-filters input[type=search] { flex: 1 1 220px; min-width: 0; }
ol.audit { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
ol.audit li { display: grid; grid-template-columns: 170px 170px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); font-size: var(--text-md); }
ol.audit li:last-child { border-bottom: 0; }
ol.audit .when { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-sm); }
ol.audit .who .small { margin-top: 2px; color: var(--text-2); }
ol.audit .what { overflow-wrap: anywhere; }
@media (max-width: 720px) { ol.audit li { grid-template-columns: 1fr; gap: 2px; } }