/* escapement — behavioral safety evaluation for open-weight AI models.
   Static, self-contained, theme-aware. Research-grade, low-hype aesthetic. */

:root {
  --bg: #fbfbf9;
  --surface: #ffffff;
  --ink: #17181b;
  --muted: #5c6069;
  --line: #e4e3dd;
  --accent: #1f6f6b;      /* deep teal — serious, non-hype */
  --accent-ink: #12433f;
  --link: #1f6f6b;
  --max: 1080px;

  --gA: #2f8f5b; --gB: #3f9a86; --gC: #c98a1a; --gD: #d1662a; --gF: #c0392b;
  --gNR: #7a7d84;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101215; --surface: #171a1e; --ink: #e9eaec; --muted: #9aa0a8;
    --line: #262a30; --accent: #4bb3ab; --accent-ink: #8fd6d0; --link: #6fc6bd;
    --gA:#43a56b; --gB:#4fb39d; --gC:#d99b2f; --gD:#e07b45; --gF:#d8574a; --gNR:#8a8e96;
  }
}
:root[data-theme="dark"] {
  --bg:#101215; --surface:#171a1e; --ink:#e9eaec; --muted:#9aa0a8; --line:#262a30;
  --accent:#4bb3ab; --accent-ink:#8fd6d0; --link:#6fc6bd;
  --gA:#43a56b; --gB:#4fb39d; --gC:#d99b2f; --gD:#e07b45; --gF:#d8574a; --gNR:#8a8e96;
}
:root[data-theme="light"] {
  --bg:#fbfbf9; --surface:#ffffff; --ink:#17181b; --muted:#5c6069; --line:#e4e3dd;
  --accent:#1f6f6b; --accent-ink:#12433f; --link:#1f6f6b;
  --gA:#2f8f5b; --gB:#3f9a86; --gC:#c98a1a; --gD:#d1662a; --gF:#c0392b; --gNR:#7a7d84;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "kern";
}
.mono { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

a { color: var(--link); text-underline-offset: 2px; }
h1,h2,h3 { line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 .4em; }
h2 { font-size: 1.5rem; margin: 2.4em 0 .6em; }
h3 { font-size: 1.1rem; margin: 1.8em 0 .4em; }
p { margin: 0 0 1em; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.small { font-size: .86rem; color: var(--muted); }

/* header */
header.site { border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; }
header.site .wrap { display: flex; align-items: center; gap: 24px; height: 60px; }
.brand { font-weight: 700; letter-spacing: -0.02em; font-size: 1.15rem; text-decoration: none; color: var(--ink); }
.brand span { color: var(--accent); }
nav.site { display: flex; gap: 20px; margin-left: auto; align-items: center; }
nav.site a { text-decoration: none; color: var(--muted); font-size: .95rem; }
nav.site a:hover, nav.site a[aria-current="page"] { color: var(--ink); }
.theme-btn { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 4px 8px; cursor: pointer; font-size: .8rem; }

/* hero */
.hero { padding: 64px 0 40px; border-bottom: 1px solid var(--line); }
.tag { display:inline-block; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:100px; padding:3px 12px; margin-bottom:18px; }
.cta { display:inline-flex; gap:8px; align-items:center; background:var(--accent); color:#fff; text-decoration:none; padding:11px 20px; border-radius:8px; font-weight:600; margin: 8px 10px 0 0; }
.cta.secondary { background:transparent; color:var(--accent); border:1px solid var(--accent); }
:root[data-theme="dark"] .cta { color:#08201e; }
@media (prefers-color-scheme: dark){ .cta { color:#08201e; } }

/* sections / cards */
section { padding: 40px 0; }
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:20px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; }
.card h3 { margin-top:0; }
.stat { font-size:2rem; font-weight:700; letter-spacing:-.02em; }
.stat.mono { font-size:1.7rem; }

/* callout */
.note { border-left:3px solid var(--accent); background:var(--surface); padding:14px 18px; border-radius:0 8px 8px 0; margin:18px 0; }
.warn { border-left-color: var(--gD); }

/* table / leaderboard */
.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
table { width:100%; border-collapse:collapse; min-width:720px; }
th,td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-size:.93rem; }
th { color:var(--muted); font-weight:600; cursor:pointer; user-select:none; white-space:nowrap; }
th[aria-sort]:after { content:" ↕"; opacity:.4; }
th[aria-sort="ascending"]:after { content:" ↑"; opacity:1; }
th[aria-sort="descending"]:after { content:" ↓"; opacity:1; }
tbody tr:last-child td { border-bottom:none; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.grade { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:7px; color:#fff; font-weight:700; font-size:.95rem; }
.grade.A{background:var(--gA)} .grade.B{background:var(--gB)} .grade.C{background:var(--gC)}
.grade.D{background:var(--gD)} .grade.F{background:var(--gF)} .grade.NR{background:var(--gNR)}
.prov { font-size:.72rem; color:var(--muted); margin-left:6px; }
.chip { font-size:.74rem; padding:2px 8px; border-radius:100px; border:1px solid var(--line); color:var(--muted); }
.chip.abl { color:var(--gD); border-color: color-mix(in srgb, var(--gD) 40%, var(--line)); }
.filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:0 0 16px; }
.filters select, .filters input { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:7px 10px; font-size:.9rem; }

/* footer */
footer.site { border-top:1px solid var(--line); background:var(--surface); margin-top:40px; padding:30px 0; color:var(--muted); font-size:.9rem; }
footer.site .wrap { display:flex; flex-wrap:wrap; gap:20px 40px; }
footer.site a { color:var(--muted); }

ul.clean { padding-left:1.1em; } ul.clean li { margin:.3em 0; }
hr { border:none; border-top:1px solid var(--line); margin:32px 0; }
code { background: color-mix(in srgb, var(--muted) 14%, transparent); padding:1px 5px; border-radius:4px; font-size:.88em; }

/* ---------------------------------------------------------------------------
   Data viz — injection-rate dot plot.
   Series colors are the validated categorical slots 1 (blue) / 2 (orange),
   stepped separately for the dark surface (selected, not auto-flipped).
   Validator: all six checks PASS in both modes.

   GEOMETRY: label / track / value share ONE grid template, and the gridline
   overlay is inset to exactly the track column — so ticks and marks are in the
   same coordinate system. (Positioning the overlay across the full plot width
   silently misaligns the axis from the data.)
--------------------------------------------------------------------------- */
.vz { --series-base:#2a78d6; --series-abl:#eb6834; --vz-grid:var(--line);
      --vz-lab:210px; --vz-val:58px; --vz-gap:14px; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .vz { --series-base:#3987e5; --series-abl:#d95926; }
}
:root[data-theme="dark"] .vz { --series-base:#3987e5; --series-abl:#d95926; }

.vz-legend { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:18px; font-size:.85rem; color:var(--muted); }
.vz-key { display:inline-flex; align-items:center; gap:7px; }
.vz-swatch { width:11px; height:11px; border-radius:50%; display:inline-block; }
.vz-swatch.base { background:var(--series-base); }
.vz-swatch.abl  { background:var(--series-abl); }
.vz-swatch-ci { width:20px; height:2px; background:var(--muted); opacity:.55; display:inline-block; }

.vz-plot { position:relative; padding-bottom:30px; }
.vz-grid { position:absolute; top:0; bottom:30px;
           left:calc(var(--vz-lab) + var(--vz-gap));
           right:calc(var(--vz-val) + var(--vz-gap)); pointer-events:none; }
.vz-grid-line { position:absolute; top:0; bottom:0; width:1px; background:var(--vz-grid); opacity:.7; }
.vz-tick { position:absolute; bottom:-24px; left:0; transform:translateX(-50%); font-size:.74rem; color:var(--muted); white-space:nowrap; }

.vz-row { display:grid; grid-template-columns:var(--vz-lab) 1fr var(--vz-val); align-items:center;
          gap:var(--vz-gap); padding:5px 0; border-radius:6px; outline:none; }
.vz-row:hover, .vz-row:focus-visible { background:color-mix(in srgb, var(--accent) 7%, transparent); }
.vz-label { font-size:.87rem; color:var(--ink); text-align:right; line-height:1.3; }
.vz-badge { font-size:.68rem; color:var(--series-abl); border:1px solid currentColor; border-radius:100px;
            padding:0 6px; white-space:nowrap; display:inline-block; }
.vz-val { font-size:.79rem; color:var(--muted); font-family:ui-monospace,"SF Mono",Menlo,monospace;
          text-align:right; white-space:nowrap; }

.vz-track { position:relative; height:26px; }
.vz-ci { position:absolute; top:50%; height:2px; transform:translateY(-50%); border-radius:2px; opacity:.5; }
.vz-ci.base { background:var(--series-base); } .vz-ci.abl { background:var(--series-abl); }
.vz-dot { position:absolute; top:50%; width:11px; height:11px; margin-left:-5.5px; transform:translateY(-50%);
          border-radius:50%; box-shadow:0 0 0 2px var(--surface); }
.vz-dot.base { background:var(--series-base); } .vz-dot.abl { background:var(--series-abl); }
.vz-axis-title { margin-top:16px; text-align:center; }

.vz-tooltip { position:absolute; z-index:5; max-width:250px; background:var(--surface); color:var(--ink);
              border:1px solid var(--line); border-radius:8px; padding:8px 11px; font-size:.79rem; line-height:1.4;
              box-shadow:0 4px 16px rgba(0,0,0,.13); opacity:0; pointer-events:none; transition:opacity .12s; }
.vz-tooltip.on { opacity:1; }

@media (max-width:620px) {
  .vz { --vz-lab:0px; }
  .vz-row { grid-template-columns:1fr var(--vz-val); grid-template-areas:"lab lab" "track val"; gap:4px var(--vz-gap); }
  .vz-label { grid-area:lab; text-align:left; }
  .vz-track { grid-area:track; } .vz-val { grid-area:val; }
  .vz-grid { left:0; }
}

/* Utility classes replacing inline style="" attributes.
   A strict CSP (style-src 'self') strips inline styles, so any layout that
   depends on them silently breaks in production. Keep markup style-free. */
.col-narrow  { max-width:640px; }
.col-read    { max-width:720px; }
.col-doc     { max-width:760px; }
.mt-1        { margin-top:16px; }
.mt-2        { margin-top:22px; }
.push-right  { margin-left:auto; }
.chart-mount { position:relative; margin-top:26px; }
.field-stack { display:grid; gap:14px; }
.field-stack label { display:block; }
.field-stack input, .field-stack textarea { width:100%; }
.form-actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }