/* The Terminator Index — terminator.fyi
   SINGLE LIGHT THEME, deliberately. BP's call, 2026-08-29: a light ground
   is funnier than a dark one. There is no prefers-color-scheme block and no
   dark toggle — a viewer whose OS is dark still gets this page as designed,
   which is why every colour below is painted explicitly rather than inherited.
   Light ground. Colour encodes STATUS ONLY; category is encoded by grouping,
   never by hue, so the grid can be read for state at a glance.
   Structure follows Shneiderman: overview (the grid) → filter (the pills) →
   details on demand (the row detail). */

:root{
  /* ground */
  --paper:#F6F7F6;
  --card:#FFFFFF;
  --sunk:#EFF1EF;
  --ink:#111413;
  --head:#000000;   /* section headers: true black, BP 2026-08-29 */
  --ink-2:#565E5C;
  --ink-3:#878F8D;
  --rule:#DDE2E0;
  --rule-soft:#E9EDEB;

  /* the three bands — the primary encoding */
  --b1:#2F7D4F;  --b1-soft:#2F7D4F1A;   /* on track        */
  --b2:#B57614;  --b2-soft:#B576141A;   /* more effort needed */
  --b3:#B0463A;  --b3-soft:#B0463A14;   /* not on track    */

  /* direction, semantic and separate from the bands */
  --up:#2F7D4F; --down:#B0463A; --flat:#878F8D;

  --focus:#1B4DE4;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --read:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.55;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1240px; margin:0 auto; padding:0 28px}
a{color:inherit}
h1,h2,h3{margin:0; text-wrap:balance; font-weight:600; letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.mono{font-family:var(--mono)}
.label{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ── masthead ─────────────────────────────────────────────── */
.mast{background:var(--card); border-bottom:1px solid var(--rule)}
.mast-inner{display:flex; align-items:baseline; justify-content:space-between; gap:24px; padding:20px 0; flex-wrap:wrap}
.mast h1{font-family:var(--display); font-size:23px; letter-spacing:-.03em}
.mast .dateline{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.06em}

/* ── the reading ──────────────────────────────────────────── */
.reading{background:var(--card); border-bottom:1px solid var(--rule); padding:38px 0 34px}
.reading-grid{display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:52px; align-items:start}
.ti-block{display:flex; flex-direction:column; gap:4px}
.ti-val{
  font-family:var(--display); font-size:clamp(60px,9vw,92px); font-weight:600;
  line-height:.9; letter-spacing:-.045em;
}
.ti-meta{display:flex; align-items:center; gap:14px; margin-top:10px; font-size:13px}
.ti-chg{font-family:var(--mono); font-size:14px}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--flat)}
.scale-note{font-size:12.5px; color:var(--ink-2); max-width:34ch; margin-top:14px; line-height:1.6}
.scale-note b{color:var(--ink); font-weight:600}

/* distribution — the overview, before any detail */
.dist{display:flex; flex-direction:column; gap:12px}
.dist-bar{display:flex; height:38px; border-radius:2px; overflow:hidden; border:1px solid var(--rule)}
.dist-bar span{display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; color:#fff; min-width:0}
.dist-bar .s1{background:var(--b1)} .dist-bar .s2{background:var(--b2)} .dist-bar .s3{background:var(--b3)}
.dist-key{display:flex; gap:26px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-2)}
.dist-key i{width:9px; height:9px; display:inline-block; margin-right:7px; border-radius:1px}
.dist-key .k1 i{background:var(--b1)} .dist-key .k2 i{background:var(--b2)} .dist-key .k3 i{background:var(--b3)}
.dist-key b{color:var(--ink); font-weight:600; font-family:var(--mono)}
.spark{width:100%; height:52px; display:block}

/* ── sections ─────────────────────────────────────────────── */
section{padding:40px 0; border-bottom:1px solid var(--rule)}
.sec-head{display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-bottom:26px; flex-wrap:wrap}
/* Section headers are the body face, set large and black — the size and weight
   carry the hierarchy, not a second typeface. */
.sec-head h2{
  font-family:var(--body); font-size:clamp(30px,4vw,42px); font-weight:700;
  color:var(--head); letter-spacing:-.035em; line-height:1.02;
}
.sec-head .hint{font-size:12.5px; color:var(--ink-3)}

/* ── the status grid — overview step ──────────────────────── */
.grid-cats{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:20px}
.cat{background:var(--card); border:1px solid var(--rule-soft); padding:15px 16px 14px}
.cat-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:11px}
.cat-name{font-size:13.5px; font-weight:600; letter-spacing:-.01em}
.cat-score{font-family:var(--mono); font-size:12px; color:var(--ink-3)}
.cells{display:flex; flex-wrap:wrap; gap:5px}
.cell{
  width:100%; max-width:34px; flex:1 1 26px; aspect-ratio:1/1;
  border:0; padding:0; cursor:pointer; border-radius:2px;
  position:relative; transition:transform .1s ease;
  font-family:var(--mono); font-size:9.5px; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.cell:hover{transform:scale(1.14); z-index:2}
.cell.s1{background:var(--b1)} .cell.s2{background:var(--b2)} .cell.s3{background:var(--b3)}

/* ── filter pills ─────────────────────────────────────────── */
.pills{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px}
.pill{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--card); color:var(--ink-2); border:1px solid var(--rule);
  padding:6px 12px; border-radius:100px; cursor:pointer; transition:.12s;
}
.pill:hover{border-color:var(--ink-3); color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.pill.b1[aria-pressed="true"]{background:var(--b1); border-color:var(--b1)}
.pill.b2[aria-pressed="true"]{background:var(--b2); border-color:var(--b2)}
.pill.b3[aria-pressed="true"]{background:var(--b3); border-color:var(--b3)}

/* ── the table — density done properly ────────────────────── */
.table-scroll{overflow-x:auto; background:var(--card); border:1px solid var(--rule-soft)}
table{width:100%; border-collapse:collapse; min-width:760px}
thead th{
  position:sticky; top:63px; z-index:3; background:var(--card);
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; text-align:left; white-space:nowrap;
  padding:12px 14px; border-bottom:1px solid var(--rule); cursor:pointer; user-select:none;
}
thead th:hover{color:var(--ink)}
thead th[aria-sort]{color:var(--ink)}
thead th .caret{opacity:.45; margin-left:4px}
th.r,td.r{text-align:right}
tbody td{padding:11px 14px; border-bottom:1px solid var(--rule-soft); font-size:13.5px; vertical-align:middle}
tbody tr.comp{cursor:pointer}
tbody tr.comp:hover{background:var(--sunk)}
.nm{font-weight:500}
.nm small{display:block; color:var(--ink-3); font-size:11px; font-weight:400; margin-top:1px}
.band{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:100px; white-space:nowrap;
}
.band.s1{background:var(--b1-soft); color:var(--b1)}
.band.s2{background:var(--b2-soft); color:var(--b2)}
.band.s3{background:var(--b3-soft); color:var(--b3)}
.meter{display:flex; align-items:center; gap:9px; min-width:150px}
.meter .track{flex:1; height:6px; background:var(--sunk); border-radius:100px; overflow:hidden; min-width:70px}
.meter .fill{height:100%; border-radius:100px}
.meter .fill.s1{background:var(--b1)} .meter .fill.s2{background:var(--b2)} .meter .fill.s3{background:var(--b3)}
.meter .pv{font-family:var(--mono); font-size:11.5px; color:var(--ink-2); min-width:44px; text-align:right}
abbr{text-decoration:none; border-bottom:1px dotted var(--ink-3); cursor:help}

/* ── detail row — details on demand ───────────────────────── */
tr.detail>td{padding:0; background:var(--sunk); border-bottom:1px solid var(--rule)}
.detail-in{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:36px; padding:24px 16px 28px}
.detail-in h4{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin:0 0 7px; font-weight:400}
.blk{margin-bottom:19px}
.blk p{margin:0; font-size:13.5px; color:var(--ink-2); line-height:1.65}
.commentary{font-family:var(--read); font-size:16px; line-height:1.6; color:var(--ink); max-width:62ch}
.canonq{
  font-family:var(--read); font-style:italic; font-size:15px; line-height:1.5;
  border-left:2px solid var(--ink-3); padding-left:14px; color:var(--ink);
}
.canonq cite{display:block; font-family:var(--mono); font-style:normal; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:7px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:12.5px}
.kv dt{color:var(--ink-3); font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding-top:3px}
.kv dd{margin:0; color:var(--ink)}
ul.ev{list-style:none; margin:0; padding:0}
ul.ev li{padding:9px 0; border-bottom:1px solid var(--rule-soft); font-size:12.5px; line-height:1.55; color:var(--ink-2)}
ul.ev .d{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.06em}
ul.ev a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule)}
ul.ev a:hover{border-color:var(--focus); color:var(--focus)}
.movers span{display:inline-block; border:1px solid var(--rule); background:var(--card); padding:3px 9px; margin:0 5px 5px 0; font-size:11px; border-radius:100px; color:var(--ink-2)}
.srcline{font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:10px}

/* ── methodology + footer ─────────────────────────────────── */
.method{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:28px}
.method h4{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin:0 0 9px; font-weight:400}
.method p{margin:0 0 10px; font-size:13px; color:var(--ink-2); line-height:1.65}
.method code{font-family:var(--mono); background:var(--sunk); padding:2px 6px; font-size:11.5px; color:var(--ink)}
footer{padding:26px 0 64px; font-family:var(--mono); font-size:11px; color:var(--ink-3); line-height:1.9}
.badge{display:inline-block; border:1px solid var(--rule); padding:4px 10px; margin-top:12px; border-radius:100px}

.empty{padding:52px 0; text-align:center; color:var(--ink-3)}
.empty .big{font-family:var(--display); font-size:22px; color:var(--ink-2); margin-bottom:8px; font-weight:500}

@media(max-width:900px){
  .reading-grid{grid-template-columns:1fr; gap:30px}
  .detail-in{grid-template-columns:1fr; gap:18px}
  .wrap{padding:0 18px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .cell:hover{transform:none}
}

/* ── sticky masthead ──────────────────────────────────────── */
.mast{position:sticky; top:0; z-index:20}
.mast-ti{
  font-family:var(--mono); font-size:14px; color:var(--ink);
  opacity:0; transform:translateY(-3px); transition:opacity .18s ease, transform .18s ease;
  margin-right:auto;
}
.mast-ti.on{opacity:1; transform:none}
footer a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--focus); border-color:var(--focus)}