/* =============================================================================
   eval-report.css — shared shell for the "model-evals" shareable-artifact
   family (src/artifacts/model-evals/**, served at /a/<id> — see AGENTS.md
   "Shareable artifacts"). A report's data.ts renders to plain HTML at build
   time (src/lib/eval-report.ts); this stylesheet plus a tiny theme-toggle
   script (eval-report-theme.js) are the only shared runtime assets.

   Color/status/type/radius variables below are named to MATCH src/styles/
   tokens.css exactly (--color-*, --status-*, --font-*, --radius-*, --ls-*,
   --dur, --ease) so this really is the site's design system, not a lookalike
   dialect. They're re-declared here rather than imported because artifacts
   under /a/<id> are served standalone, without the rest of BaseLayout's
   asset pipeline — keep the two in sync by hand when tokens.css changes.

   The spacing scale, rule thickness, and chart colors below are NOT in
   tokens.css — they're this component family's own extensions, scoped to
   this file.

   GOTCHA: never let an asterisk immediately followed by a slash appear
   anywhere in this or any other block comment (e.g. writing out a glob path
   or a pair of variable names back-to-back) — it silently closes the
   comment early, and everything after becomes invalid CSS with no
   build-time error. This exact mistake used to be four lines below this
   one; see AGENTS.md "Shareable artifacts".
   ========================================================================= */
:root {
  /* ---- mirrored from tokens.css (light) ---- */
  --color-bg: #FAFAF9;
  --color-surface: #FFFFFF;
  --color-surface-sunken: #F5F5F4;
  --color-line: #E7E5E4;
  --color-line-strong: #A8A29E;
  --color-heading: #1C1917;
  --color-text: #44403C;
  --color-text-muted: #57534E;
  --color-text-faint: #78716C;
  --color-accent: #A435CE;
  --color-accent-text: #7902AA;
  --color-accent-soft: color-mix(in srgb, #A435CE 8%, transparent);
  --color-accent-ring: #D596EF;
  --color-on-accent: #FFFFFF;
  --color-highlight: #FFD800;
  --color-highlight-text: #A16207;
  --color-on-highlight: #1C1917;

  --status-success-fill: #DCFCE7; --status-success-line: #BBF7D0; --status-success-text: #15803D;
  --status-active-fill:  #F2DDFB; --status-active-line:  #E9C9F6; --status-active-text:  #7902AA;
  --status-pending-fill: #FEF9C3; --status-pending-line: #FDE68A; --status-pending-text: #854D0E;
  --status-neutral-fill: #F5F5F4; --status-neutral-line: #E7E5E4; --status-neutral-text: #78716C;
  --status-danger-fill:  #FEE2E2; --status-danger-line:  #FECACA; --status-danger-text:  #B91C1C;
  --status-info-fill:    #CFFAFE; --status-info-line:    #A5F3FC; --status-info-text:    #0E7490;

  --font-ui: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-code: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ls-kicker: 0.14em;
  --ls-tight: -0.02em;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(28,25,23,0.08);
  --shadow-md: 0 4px 16px rgba(28,25,23,0.10);
  --ease: cubic-bezier(0.2,0,0,1);
  --dur: 200ms;

  /* ---- eval-report extensions (not in tokens.css) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px;
  --rule: 3px;
  --grid: color-mix(in srgb, #44403C 12%, transparent);
  --chart-axis: #A8A29E;
  --chart-neutral: #A8A29E;
  --chart-ghost: color-mix(in srgb, #44403C 16%, transparent);
  --series-a: #A435CE;
  --series-b: #0891B2;
  --series-c: #854D0E;
}

:root[data-theme="dark"] {
  --color-bg: #0D0D0F;
  --color-surface: #16161A;
  --color-surface-sunken: #0D0D0F;
  --color-line: #2A2A2F;
  --color-line-strong: #3A3A40;
  --color-heading: #FFFFFF;
  --color-text: #E4E4E7;
  --color-text-muted: #A1A1AA;
  --color-text-faint: #71717A;
  --color-accent: #C06AE6;
  --color-accent-text: #C06AE6;
  --color-accent-soft: color-mix(in srgb, #C06AE6 14%, transparent);
  --color-accent-ring: #7902AA;
  --color-on-accent: #0D0D0F;
  --color-highlight: #FFD800;
  --color-highlight-text: #FFD800;

  --status-success-fill: rgba(74,222,128,.12);  --status-success-line: rgba(74,222,128,.28);  --status-success-text: #4ADE80;
  --status-active-fill:  rgba(164,53,206,.16);  --status-active-line:  rgba(164,53,206,.32);  --status-active-text:  #D596EF;
  --status-pending-fill: rgba(255,216,0,.10);   --status-pending-line: rgba(255,216,0,.28);   --status-pending-text: #FFE566;
  --status-neutral-fill: rgba(255,255,255,.05); --status-neutral-line: rgba(255,255,255,.12); --status-neutral-text: #A1A1AA;
  --status-danger-fill:  rgba(248,113,113,.10); --status-danger-line:  rgba(248,113,113,.30); --status-danger-text:  #FCA5A5;
  --status-info-fill:    rgba(34,211,238,.10);  --status-info-line:    rgba(34,211,238,.28);  --status-info-text:    #67E8F9;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);

  --grid: color-mix(in srgb, #FFFFFF 10%, transparent);
  --chart-axis: #71717A;
  --chart-neutral: #57534E;
  --chart-ghost: color-mix(in srgb, #FFFFFF 14%, transparent);
  --series-a: #C06AE6;
  --series-b: #22D3EE;
  --series-c: #FFE566;
}

/* Dark is the default across abn.is regardless of OS preference — see
   BaseLayout's FOUC-prevention script. eval-report.js sets data-theme from
   the same shared `void-theme` localStorage key before paint, so this media
   query only matters if that inline script is somehow skipped. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0D0D0F;
    --color-surface: #16161A;
    --color-surface-sunken: #0D0D0F;
    --color-line: #2A2A2F;
    --color-line-strong: #3A3A40;
    --color-heading: #FFFFFF;
    --color-text: #E4E4E7;
    --color-text-muted: #A1A1AA;
    --color-text-faint: #71717A;
    --color-accent: #C06AE6;
    --color-accent-text: #C06AE6;
    --color-accent-soft: color-mix(in srgb, #C06AE6 14%, transparent);
    --color-accent-ring: #7902AA;
    --color-on-accent: #0D0D0F;
    --color-highlight: #FFD800;
    --color-highlight-text: #FFD800;
    --status-success-fill: rgba(74,222,128,.12);  --status-success-line: rgba(74,222,128,.28);  --status-success-text: #4ADE80;
    --status-active-fill:  rgba(164,53,206,.16);  --status-active-line:  rgba(164,53,206,.32);  --status-active-text:  #D596EF;
    --status-pending-fill: rgba(255,216,0,.10);   --status-pending-line: rgba(255,216,0,.28);   --status-pending-text: #FFE566;
    --status-neutral-fill: rgba(255,255,255,.05); --status-neutral-line: rgba(255,255,255,.12); --status-neutral-text: #A1A1AA;
    --status-danger-fill:  rgba(248,113,113,.10); --status-danger-line:  rgba(248,113,113,.30); --status-danger-text:  #FCA5A5;
    --status-info-fill:    rgba(34,211,238,.10);  --status-info-line:    rgba(34,211,238,.28);  --status-info-text:    #67E8F9;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
    --grid: color-mix(in srgb, #FFFFFF 10%, transparent);
    --chart-axis: #71717A;
    --chart-neutral: #57534E;
    --chart-ghost: color-mix(in srgb, #FFFFFF 14%, transparent);
    --series-a: #C06AE6;
    --series-b: #22D3EE;
    --series-c: #FFE566;
  }
}

/* =========================================================================
   BASE
   ========================================================================= */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-ui); font-size:15px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { color:var(--color-heading); font-weight:700; letter-spacing:var(--ls-tight); line-height:1.15; text-wrap:balance; margin:0; }
a { color:var(--color-accent-text); text-underline-offset:2px; text-decoration-thickness:1px; }
code,pre { font-family:var(--font-code); }
::selection { background:var(--color-highlight); color:var(--color-on-highlight); }
:focus-visible { outline:none; box-shadow:0 0 0 3px var(--color-accent-ring); border-radius:var(--radius-md); }
table { font-variant-numeric:tabular-nums; }

.skip-link {
  position:absolute; left:16px; top:-120%; z-index:50;
  padding:8px 16px; background:var(--color-accent); color:var(--color-on-accent);
  font-size:13px; font-weight:600; border-radius:0 0 var(--radius-md) var(--radius-md);
  text-decoration:none; transition:top var(--dur) var(--ease);
}
.skip-link:focus { top:0; }

/* ---- theme toggle ---- */
.theme-toggle {
  position:fixed; top:14px; right:14px; z-index:40;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border:1px solid var(--color-line-strong); border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--color-surface) 80%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--color-text-muted); font-family:inherit; font-size:11px; font-weight:600;
  letter-spacing:var(--ls-kicker); text-transform:uppercase; cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-toggle:hover { color:var(--color-accent-text); border-color:var(--color-accent); }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.wrap { max-width:1080px; margin:0 auto; padding:0 var(--s6) var(--s16); }
.stack > * + * { margin-top:var(--s10); }

/* top pride hairline — the abn signature rule */
.toprule { height:3px; width:100%;
  background:linear-gradient(90deg,#E40303,#FF8C00,#FFD800,#1CA94C,#0066FF,#A435CE); }

/* ---- header ---- */
.head { padding-top:var(--s12); }
.kicker { font-size:11px; letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--color-text-faint); font-weight:600; }
.wordmark { color:var(--color-accent-text); }
.head-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2) var(--s4); }
.head h1 { font-size:clamp(28px,5vw,44px); margin-top:var(--s4); }
.head .tagline { color:var(--color-text-muted); font-size:clamp(15px,2.2vw,18px); margin-top:var(--s4); max-width:60ch; line-height:1.5; }
.head-meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-top:var(--s6); }

/* dates — top of report, quiet kicker line */
.head-dates { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); margin-top:var(--s5); }
.head-dates .hd { font-size:11px; letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--color-text-faint); font-weight:600; }
.head-dates .hd b { color:var(--color-text-muted); font-weight:600; }
/* verdict — a quiet callout near the top (no loud badge/chip) */
.verdict-callout { margin-top:var(--s6); padding:var(--s4) var(--s5);
  border-left:var(--rule) solid var(--color-accent); background:var(--color-accent-soft);
  border-radius:0 var(--radius-md) var(--radius-md) 0; max-width:72ch; }
.verdict-callout .v-lead { font-size:10.5px; letter-spacing:var(--ls-kicker); text-transform:uppercase;
  font-weight:700; color:var(--color-accent-text); }
.verdict-callout p { margin:var(--s2) 0 0; color:var(--color-text); font-size:13.5px; line-height:1.55; }

/* ---- section ---- */
section { scroll-margin-top:20px; }
.sec-head { display:flex; align-items:baseline; gap:var(--s3); padding-left:var(--s4);
  border-left:var(--rule) solid var(--color-accent); margin-bottom:var(--s6); }
.sec-head h2 { font-size:20px; }
.sec-head .sec-sub { color:var(--color-text-faint); font-size:12px; letter-spacing:0.02em; }

.card { background:var(--color-surface); border:1px solid var(--color-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); }
.card.pad { padding:var(--s6); }

/* ---- spec grid (model card / config) ---- */
.specs { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1px;
  background:var(--color-line); border:1px solid var(--color-line); border-radius:var(--radius-lg); overflow:hidden; }
.spec { background:var(--color-surface); padding:var(--s4) var(--s5); }
.spec dt { font-size:10.5px; letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--color-text-faint); font-weight:600; margin:0; }
.spec dd { margin:var(--s2) 0 0; font-size:14px; color:var(--color-heading); font-weight:500; line-height:1.4; word-break:break-word; }
.spec dd.mono { font-family:var(--font-code); font-size:12.5px; }
.spec dd a { font-weight:600; }

/* ---- hardware strip ---- */
.hw { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s5);
  padding:var(--s6); background:var(--color-surface-sunken); border:1px solid var(--color-line); border-radius:var(--radius-lg); }
.hw .hw-item dt { font-size:10.5px; letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--color-text-faint); font-weight:600; margin:0; }
.hw .hw-item dd { margin:var(--s2) 0 0; font-family:var(--font-code); font-size:12.5px; color:var(--color-heading); line-height:1.45; }

/* ---- results blocks ---- */
.block + .block { margin-top:var(--s8); }
.block-head { margin-bottom:var(--s4); }
.block-head h3 { font-size:15px; color:var(--color-heading); }
.block-head .note { color:var(--color-text-muted); font-size:12.5px; margin-top:var(--s2); line-height:1.5; max-width:70ch; }

/* stat tiles */
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s4); }
.tile { padding:var(--s5); border:1px solid var(--color-line); border-radius:var(--radius-lg); background:var(--color-surface);
  box-shadow:inset 3px 0 0 var(--tile-edge, var(--color-accent)); }
.tile .t-val { font-size:26px; font-weight:700; color:var(--color-heading); letter-spacing:var(--ls-tight); line-height:1; font-variant-numeric:tabular-nums; }
.tile .t-val .t-unit { font-size:13px; color:var(--color-text-muted); font-weight:500; margin-left:3px; }
.tile .t-label { font-size:11px; letter-spacing:0.04em; text-transform:uppercase; color:var(--color-text-faint); font-weight:600; margin-top:var(--s3); }
.tile .t-sub { font-size:11.5px; color:var(--color-text-muted); margin-top:var(--s2); line-height:1.4; }

/* tables */
.table-scroll { overflow-x:auto; border:1px solid var(--color-line); border-radius:var(--radius-lg); }
table.data { width:100%; border-collapse:collapse; font-size:13px; }
table.data th, table.data td { padding:var(--s3) var(--s4); text-align:left; white-space:nowrap; }
table.data thead th { background:var(--color-surface-sunken); color:var(--color-text-faint); font-size:10.5px; letter-spacing:0.06em;
  text-transform:uppercase; font-weight:600; border-bottom:1px solid var(--color-line); position:sticky; top:0; }
table.data td { border-bottom:1px solid var(--color-line); color:var(--color-text); }
table.data tbody tr:last-child td { border-bottom:none; }
table.data td.num, table.data th.num { text-align:right; font-family:var(--font-code); font-variant-numeric:tabular-nums; }
table.data td:first-child { color:var(--color-heading); font-weight:500; }
table.data tr.hl td { background:var(--status-active-fill); }
table.data tr.hl td:first-child { box-shadow:inset 3px 0 0 var(--color-accent); }

/* charts */
.chart-wrap { overflow-x:auto; }
/* An SVG's font-size is in viewBox user units, so a chart that shrinks to fit a
   phone takes its axis and series labels down with it — at 360px the 720-unit
   viewBox scaled to 0.46 and put 10-unit ticks at ~5px. Floor the width instead
   and let .chart-wrap scroll, the same bargain the wide data tables already
   make. 640px keeps labels legible on a phone while still fitting a ~700px
   content column without a gratuitous scrollbar. */
svg.chart { display:block; width:100%; height:auto; min-width:640px; }

/* horizontal bars — HTML, not SVG, so the text never scales with the viewport
   (see buildHBars in src/lib/eval-report.ts). Label sits above the bar on a
   phone and beside it from 560px up. */
.hbars { display:flex; flex-direction:column; gap:var(--s4); }
.hb { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); }
.hb-label { flex:1 1 100%; font-size:12.5px; font-weight:500; color:var(--color-heading); line-height:1.35; }
.hb-track { flex:1 1 55%; height:16px; border-radius:3px; background:var(--grid); overflow:hidden; }
.hb-fill { display:block; height:100%; border-radius:3px; }
.hb-val { flex:none; font-family:var(--font-code); font-size:12px; font-weight:600;
  color:var(--color-heading); font-variant-numeric:tabular-nums; }
.hb-unit { color:var(--color-text-muted); font-weight:400; margin-left:4px; }
.hb-note { flex:1 1 100%; font-size:11px; color:var(--color-text-faint); line-height:1.4; }
@media (min-width:560px){
  .hb-label { flex:0 0 30%; }
  .hb-note { margin-left:calc(30% + var(--s4)); }
}
.legend { display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s3); }
.legend .lg { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--color-text-muted); }
.legend .sw { width:11px; height:11px; border-radius:2px; }

/* note block */
.note-block { padding:var(--s5); border:1px solid var(--color-line); border-left:var(--rule) solid var(--color-accent);
  border-radius:var(--radius-md); background:var(--color-accent-soft); }
.note-block h3 { font-size:13px; margin-bottom:var(--s2); }
.note-block p { margin:0; font-size:13px; color:var(--color-text); line-height:1.55; }

/* ---- experiment block ---- */
.exp { border:1px solid var(--status-active-line); border-radius:var(--radius-lg); overflow:hidden; }
.exp-eyebrow { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s5);
  background:var(--status-pending-fill); border-bottom:1px solid var(--color-line);
  font-size:11px; letter-spacing:var(--ls-kicker); text-transform:uppercase; font-weight:700; color:var(--status-pending-text); }
.exp-eyebrow::before { content:""; width:8px; height:8px; border-radius:var(--radius-pill); background:var(--color-highlight); flex:none; }
.exp-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--color-line); }
@media (min-width:640px){ .exp-grid { grid-template-columns:1fr 1fr; } }
.exp-cell { background:var(--color-surface); padding:var(--s5); }
.exp-cell h4 { margin:0 0 var(--s3); font-size:11px; letter-spacing:var(--ls-kicker); text-transform:uppercase; color:var(--color-accent-text); font-weight:700; }
.exp-cell p { margin:0; font-size:13.5px; line-height:1.6; color:var(--color-text); }
.exp-cell ul { margin:0; padding-left:var(--s5); }
.exp-cell li { font-size:13px; line-height:1.55; margin-top:var(--s2); color:var(--color-text); }
.exp-cell li:first-child { margin-top:0; }

/* ---- provenance ---- */
.prov { display:grid; grid-template-columns:1fr; gap:var(--s6); }
@media (min-width:720px){ .prov { grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); } }
.legend-tags { display:flex; flex-direction:column; gap:var(--s3); }
.legend-tags .lt { display:flex; gap:var(--s3); align-items:baseline; font-size:12.5px; }
.caveats { margin:0; padding:0; list-style:none; }
.caveats li { position:relative; padding-left:var(--s5); font-size:12.5px; line-height:1.55; color:var(--color-text-muted); margin-top:var(--s3); }
.caveats li:first-child { margin-top:0; }
.caveats li::before { content:"—"; position:absolute; left:0; color:var(--color-accent); }
.prov-count { font-family:var(--font-code); font-size:12px; color:var(--color-text-faint); margin-top:var(--s4); }

/* chips / tags */
.tag { display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:var(--radius-pill);
  font-family:var(--font-code); font-size:11px; font-weight:500; white-space:nowrap;
  border:1px solid var(--st-line); background:var(--st-fill); color:var(--st-text); }
.tag.t-success{--st-fill:var(--status-success-fill);--st-line:var(--status-success-line);--st-text:var(--status-success-text);}
.tag.t-active {--st-fill:var(--status-active-fill); --st-line:var(--status-active-line); --st-text:var(--status-active-text);}
.tag.t-pending{--st-fill:var(--status-pending-fill);--st-line:var(--status-pending-line);--st-text:var(--status-pending-text);}
.tag.t-neutral{--st-fill:var(--status-neutral-fill);--st-line:var(--status-neutral-line);--st-text:var(--status-neutral-text);}
.tag.t-danger {--st-fill:var(--status-danger-fill); --st-line:var(--status-danger-line); --st-text:var(--status-danger-text);}
.tag.t-info   {--st-fill:var(--status-info-fill);   --st-line:var(--status-info-line);   --st-text:var(--status-info-text);}

/* stamp */
.stamp { display:inline-flex; align-items:center; gap:var(--s2); font-size:11px; font-weight:600;
  letter-spacing:0.03em; text-transform:uppercase; color:var(--color-highlight-text); }
.stamp::before { content:""; width:9px; height:9px; border-radius:2px; background:var(--color-highlight); flex:none; }

/* footer */
footer.foot { border-top:1px solid var(--color-line); padding-top:var(--s6); margin-top:var(--s16);
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between; align-items:flex-end; }
footer.foot .f-method { color:var(--color-text-muted); font-size:12px; line-height:1.55; max-width:64ch; }
footer.foot .f-right { text-align:right; }
footer.foot .f-date { font-family:var(--font-code); font-size:11.5px; color:var(--color-text-faint); margin-top:var(--s2); }

@media (max-width:560px){
  .wrap { padding-left:var(--s4); padding-right:var(--s4); }
  .theme-toggle { top:auto; bottom:14px; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { transition-duration:0.001ms !important; animation-duration:0.001ms !important; }
}