/* ============================================================================
   REPORT CARD — Mayor's Management Report
   Its own system. Cold municipal statistics: a printed bureau yearbook, not a
   dashboard. Newsreader for display, IBM Plex Sans for interface, IBM Plex
   Mono for every figure, so columns of numbers line up on the decimal.

   Rules that keep it itself:
   - No rounded corners, no shadows, no gradients, no glass, no pills.
   - No stat cards. Figures sit in ruled rows and columns.
   - Colour is signal only: better, worse, flat, flagged. Never decoration.
   - Rules do the structural work: 2px above a section, 1px between blocks,
     hairline between rows. Nothing floats.
   ========================================================================= */

:root{
  --paper:#fbfaf8;
  --paper2:#f2f1ed;
  --paper3:#e8e7e2;
  --ink:#15171a;
  --ink2:#5f646b;
  --ink3:#898f97;
  --rule:#15171a;
  --hair:#cfd0cc;
  --hair2:#e2e2de;

  --good:#1f6f5c;      /* moved the way the city says it should */
  --bad:#b0342a;       /* moved against it */
  --flat:#8a8f96;      /* no material change */
  --accent:#1b3a6b;    /* active state, primary series */
  --flag:#a9761a;      /* published figure we could not take at face value */

  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --disp:'Newsreader',Georgia,'Times New Roman',serif;

  --t-micro:10px;
  --t-small:11.5px;
  --t-body:15px;
  --t-lead:17px;
  --t-h1:clamp(2.1rem,5vw,3.5rem);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15171a; --paper2:#1c1f23; --paper3:#24282d;
    --ink:#eceae6; --ink2:#a2a8b0; --ink3:#7a8089;
    --rule:#eceae6; --hair:#3a3f46; --hair2:#292d33;
    --good:#4fae90; --bad:#e0685a; --flat:#8a8f96;
    --accent:#7fa3dd; --flag:#d6a447;
  }
}
:root[data-theme="dark"]{
  --paper:#15171a; --paper2:#1c1f23; --paper3:#24282d;
  --ink:#eceae6; --ink2:#a2a8b0; --ink3:#7a8089;
  --rule:#eceae6; --hair:#3a3f46; --hair2:#292d33;
  --good:#4fae90; --bad:#e0685a; --flat:#8a8f96;
  --accent:#7fa3dd; --flag:#d6a447;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--t-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
button{font-family:inherit;color:inherit}
.sheet{max-width:1460px;margin:0 auto;border-left:1px solid var(--hair);border-right:1px solid var(--hair);min-height:100vh}
@media(max-width:1500px){.sheet{border-left:0;border-right:0}}

/* ---------- masthead ---------- */
.strip{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:baseline;
  padding:9px 30px;border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink2);
}
.strip b{color:var(--ink);font-weight:500}
.strip button.theme{background:none;border:1px solid var(--hair);padding:3px 8px;cursor:pointer;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.strip button.theme:hover{border-color:var(--rule);color:var(--ink)}

.head{padding:34px 30px 26px;border-bottom:2px solid var(--rule);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:30px;align-items:end}
@media(max-width:1000px){.head{grid-template-columns:1fr;gap:22px;padding-top:26px}}
h1{
  font-family:var(--disp);font-weight:400;font-size:var(--t-h1);line-height:.94;
  letter-spacing:-.025em;margin:0 0 14px;
}
h1 em{font-style:italic;color:var(--ink2)}
.sub{margin:0;max-width:62ch;font-size:var(--t-lead);line-height:1.52;color:var(--ink2)}
.sub b{color:var(--ink);font-weight:600}
.src{margin:16px 0 0;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3)}
.src a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--hair)}
.src a:hover{color:var(--ink);border-bottom-color:var(--rule)}

/* a ten-year strip of the citywide verdict: the only ornament, and it is data */
.mast{border:1px solid var(--hair);padding:12px 14px 10px}
.mast h4{margin:0 0 9px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2);font-weight:400}
.mast svg{width:100%;height:auto;display:block}

/* ---------- count band ---------- */
.capline{
  padding:8px 30px;border-bottom:1px solid var(--hair);background:var(--paper2);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);
}
.capline b{color:var(--ink);font-weight:500}
.counts{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));border-bottom:2px solid var(--rule)}
.counts div{padding:14px 20px 15px;border-right:1px solid var(--hair2)}
.counts div:last-child{border-right:0}
.counts b{display:block;font-family:var(--mono);font-weight:400;font-size:1.9rem;line-height:1;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.counts b.g{color:var(--good)} .counts b.b{color:var(--bad)}
.counts span{display:block;margin-top:7px;font-size:var(--t-micro);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink2);line-height:1.4;max-width:22ch}

/* ---------- tabs ----------
   These are the site's navigation and have to look pressable, not like a row
   of headings. So: a recessed strip, each view a raised key with a rule all
   the way round it, and the one you are on inverted to solid ink. */
.tabs{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;
  padding:9px 30px 0;border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:40;background:var(--paper2)}
.tabs::before{
  content:"View";align-self:center;margin:0 14px 9px 0;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink3);
}
.tabs button{
  font-family:var(--mono);font-size:var(--t-small);letter-spacing:.12em;text-transform:uppercase;
  background:var(--paper);color:var(--ink2);
  border:1px solid var(--hair);border-bottom:0;
  margin:0 4px 0 0;padding:11px 18px 12px;cursor:pointer;position:relative;top:0;
  transition:background .08s linear,color .08s linear,top .08s linear;
}
.tabs button:hover{background:var(--paper);color:var(--ink);border-color:var(--ink3);top:-2px}
.tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.tabs button.on{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
  top:0;padding-bottom:13px;margin-bottom:-1px;
}
.tabs button.on:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);top:0}
@media(max-width:820px){
  .tabs{padding:8px 20px 0}
  .tabs::before{width:100%;margin:0 0 6px}
  .tabs button{padding:10px 13px 11px;margin-bottom:4px;border-bottom:1px solid var(--hair)}
  .tabs button.on{border-color:var(--ink);margin-bottom:4px}
}

/* ---------- generic section head ---------- */
h3.sec{
  margin:0;padding:11px 30px 9px;border-top:2px solid var(--rule);border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:var(--ink2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
h3.sec b{color:var(--ink);font-weight:500}
h3.sec .no{color:var(--ink3)}

/* ---------- controls ---------- */
.bar2{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:12px 30px;
  border-bottom:1px solid var(--hair);background:var(--paper2)}
.bar2 label{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.bar2 .spacer{flex:1 1 auto}
.bar2 .count{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
input[type=search],input[type=text]{
  flex:1 1 300px;min-width:190px;font-family:var(--sans);font-size:15px;
  padding:9px 12px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:0;outline:none;
}
input[type=search]::placeholder{color:var(--ink3)}
input[type=search]:focus,input[type=text]:focus{box-shadow:inset 0 -3px 0 var(--accent)}
select{
  font-family:var(--mono);font-size:var(--t-small);letter-spacing:.06em;
  padding:8px 9px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);border-radius:0;cursor:pointer;
  max-width:100%;
}
select:hover{border-color:var(--rule)}
@media(max-width:820px){
  .bar2{padding:11px 20px;gap:8px}
  .bar2 select{flex:1 1 150px;min-width:0}
  .bar2 .chip{flex:1 1 150px}
  .capline,.counts div,.pad,h3.sec,.goalhead,.foot,.loading,.empty{padding-left:20px;padding-right:20px}
  .head{padding:24px 20px 20px}
  .strip{padding:9px 20px}
}
.chip{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--hair);background:transparent;color:var(--ink2);cursor:pointer;border-radius:0;
}
.chip:hover{border-color:var(--rule);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- scoreboard ---------- */
.board{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
@media(max-width:940px){.board{grid-template-columns:1fr}}
.board>section{min-width:0;border-right:1px solid var(--hair)}
.board>section:last-child{border-right:0}
.pad{padding:18px 30px 26px}
.verdictbar{display:flex;height:30px;border:1px solid var(--rule);margin:4px 0 10px}
.verdictbar i{display:block}
.verdictbar i.g{background:var(--good)} .verdictbar i.b{background:var(--bad)} .verdictbar i.f{background:var(--flat)}
.key{display:flex;flex-wrap:wrap;gap:5px 18px;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink2)}
.key b{display:inline-flex;align-items:center;gap:7px;font-weight:400;color:var(--ink)}
.key b i{width:11px;height:11px;display:inline-block}
.note{font-size:13.5px;line-height:1.55;color:var(--ink2);margin:14px 0 0;max-width:64ch}
.note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.note a:hover{border-bottom-color:var(--rule)}
.note code{font-family:var(--mono);font-size:12px;background:var(--paper2);padding:1px 4px}

/* ---------- tables ---------- */
table.league{width:100%;border-collapse:collapse;font-size:13.5px}
table.league th{
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;font-weight:400;
  color:var(--ink2);text-align:left;padding:7px 10px 7px 0;border-bottom:1px solid var(--rule);
  cursor:pointer;white-space:nowrap;user-select:none;
}
table.league th:hover{color:var(--ink)}
table.league th.n{text-align:right}
table.league th[aria-sort]{color:var(--ink)}
table.league th[aria-sort]::after{content:" \25BC"}
table.league th[aria-sort=ascending]::after{content:" \25B2"}
table.league td{padding:5px 10px 5px 0;border-bottom:1px solid var(--hair2);vertical-align:middle}
table.league td.n{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.league tbody tr{cursor:pointer}
table.league tbody tr:hover td{background:var(--paper2)}
table.league .ab{width:31%;min-width:86px;padding-right:0}
table.league td:first-child{padding-right:14px}
table.league .nm{display:block;line-height:1.25}
table.league .nm{font-weight:500}
table.league .code{display:inline-block;margin-top:2px}
table.league .code{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.09em;color:var(--ink3)}
.minibar{display:flex;height:12px;width:100%;background:var(--hair2)}
.minibar i{display:block}
.minibar i.g{background:var(--good)} .minibar i.b{background:var(--bad)} .minibar i.f{background:var(--flat)}

/* ---------- indicator rows ---------- */
.rows{border-top:1px solid var(--hair)}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) 112px 108px 112px;gap:0 16px;align-items:center;
  padding:10px 30px;border:0;border-bottom:1px solid var(--hair2);width:100%;text-align:left;
  background:none;font:inherit;color:inherit;cursor:pointer;
}
.row:hover{background:var(--paper2)}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.row .t{min-width:0}
.row .t b{font-family:var(--disp);font-weight:500;font-size:16.5px;line-height:1.26;letter-spacing:-.006em;display:block}
.row .t .m{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);display:block;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t .m em{font-style:normal;color:var(--ink2)}
.row .sp{justify-self:end}
.row .val{text-align:right;font-family:var(--mono);font-size:16px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.row .val small,.row .chg small{display:block;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
.row .chg{text-align:right;font-family:var(--mono);font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.row .chg.g{color:var(--good)} .row .chg.b{color:var(--bad)} .row .chg.f{color:var(--flat)}
@media(max-width:820px){
  .row{grid-template-columns:minmax(0,1fr) 104px;gap:7px 12px;padding:11px 20px}
  .row .sp{grid-column:2;grid-row:1}
  .row .val{grid-column:1;grid-row:2;text-align:left}
  .row .chg{grid-column:2;grid-row:2}
  .row .val small,.row .chg small{display:block;margin-top:2px}
  .row .chg{white-space:nowrap}
}
.flagdot{display:inline-block;width:8px;height:8px;background:var(--flag);margin-right:6px;vertical-align:0}

/* ---------- charts ---------- */
svg.spark{display:block;overflow:visible}
svg.spark .ln{fill:none;stroke:var(--ink2);stroke-width:1.5}
svg.spark .ln.g{stroke:var(--good)} svg.spark .ln.b{stroke:var(--bad)} svg.spark .ln.f{stroke:var(--flat)}
svg.spark .dot{fill:currentColor}
.chart{width:100%;height:auto;display:block;overflow:visible;touch-action:pan-y}
.chart .axis{stroke:var(--hair2);stroke-width:1}
.chart .base{stroke:var(--hair);stroke-width:1}
.chart .tick{font-family:var(--mono);font-size:10px;letter-spacing:.06em;fill:var(--ink3)}
.chart .tick.on{fill:var(--ink)}
.chart .vlabel{font-family:var(--mono);font-size:11px;fill:var(--ink);font-variant-numeric:tabular-nums}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linejoin:round}
.chart .line.dim{stroke:var(--hair);stroke-width:1.4}
.chart .pt{fill:var(--paper);stroke:var(--accent);stroke-width:2}
.chart .pt.last{fill:var(--accent)}
.chart .pt.flag{stroke:var(--flag);fill:var(--flag)}
.chart .bar.g{fill:var(--good)} .chart .bar.b{fill:var(--bad)} .chart .bar.f{fill:var(--flat)}
.chart .bar.n{fill:var(--accent)}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .cursor{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3}
.chart .lbl{font-family:var(--mono);font-size:10.5px;fill:var(--ink2)}
.chartcap{font-size:12.5px;line-height:1.5;color:var(--ink2);margin:8px 0 0;max-width:72ch}
.chartcap b{color:var(--ink);font-weight:500}

/* ---------- agency pane ---------- */
.apane{display:grid;grid-template-columns:288px minmax(0,1fr)}
@media(max-width:900px){.apane{grid-template-columns:1fr}}
.alist{border-right:1px solid var(--hair);max-height:78vh;overflow:auto}
@media(max-width:900px){.alist{max-height:230px;border-right:0;border-bottom:2px solid var(--rule)}}
.alist button{display:grid;grid-template-columns:1fr 52px;gap:10px;align-items:center;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--hair2);padding:9px 16px;cursor:pointer;font:inherit;color:inherit}
.alist button:hover{background:var(--paper2)}
.alist button.on{background:var(--ink);color:var(--paper)}
.alist button.on .sub2{color:var(--paper3)}
.alist .nm{font-weight:500;font-size:13.5px;line-height:1.24}
.sub2{display:block;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink3);margin-top:3px}
.abody{min-width:0;padding-bottom:40px}
.goalhead{padding:13px 30px 10px;border-top:1px solid var(--hair);background:var(--paper2)}
.goalhead .svc{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.goalhead .gl{font-family:var(--disp);font-weight:500;font-size:17px;line-height:1.3;margin-top:4px}

/* ---------- drawer ---------- */
.drawer{position:fixed;inset:0;z-index:900;display:none}
.drawer.open{display:block}
.drawer .scrim{position:absolute;inset:0;background:rgba(10,11,13,.55)}
.drawer .panel{position:absolute;top:0;right:0;height:100%;width:min(780px,100%);
  background:var(--paper);border-left:1px solid var(--rule);overflow:auto}
.dhead{position:sticky;top:0;background:var(--paper);border-bottom:2px solid var(--rule);
  padding:15px 26px;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;z-index:2}
.dhead .lbl{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.dhead h2{margin:5px 0 0;font-family:var(--disp);font-size:1.6rem;line-height:1.16;font-weight:500;letter-spacing:-.015em}
.xbtn{font-size:20px;line-height:1;background:none;border:1px solid var(--hair);width:34px;height:34px;
  cursor:pointer;color:var(--ink2);flex:none}
.xbtn:hover{border-color:var(--rule);color:var(--ink)}
.dbody{padding:20px 26px 70px}
.dbody h4{margin:26px 0 8px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.15em;
  text-transform:uppercase;font-weight:400;color:var(--ink2);padding-bottom:6px;border-bottom:1px solid var(--hair)}
.dbody h4:first-child{margin-top:0}
.dbody p{margin:0 0 10px;font-size:14.5px;line-height:1.6}
dl.f{margin:0;border-top:1px solid var(--hair2)}
dl.f>div{display:grid;grid-template-columns:150px 1fr;gap:14px;padding:7px 0;border-bottom:1px solid var(--hair2);font-size:13.5px}
dl.f dt{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);padding-top:2px}
dl.f dd{margin:0}
@media(max-width:560px){dl.f>div{grid-template-columns:1fr;gap:1px}}
.links{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 0}
.links a{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--hair);padding:9px 12px;text-decoration:none;color:var(--ink2)}
.links a:hover{border-color:var(--rule);color:var(--ink);background:var(--paper2)}
.warn{border-left:3px solid var(--flag);background:var(--paper2);padding:10px 13px;margin:14px 0;font-size:13.5px;line-height:1.55}
.warn b{color:var(--flag);font-weight:600}
.vtable{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
.vtable th{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
  font-weight:400;color:var(--ink3);text-align:right;padding:5px 8px 5px 0;border-bottom:1px solid var(--rule)}
.vtable th:first-child{text-align:left}
.vtable td{padding:5px 8px 5px 0;border-bottom:1px solid var(--hair2);text-align:right;
  font-family:var(--mono);font-variant-numeric:tabular-nums}
.vtable td:first-child{text-align:left;font-family:var(--sans);font-weight:500}
.vtable td.flagged{color:var(--flag)}

/* ---------- footer ---------- */
.foot{padding:20px 30px 60px;border-top:2px solid var(--rule);font-size:13px;color:var(--ink2);line-height:1.6}
.foot a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.foot a:hover{border-bottom-color:var(--rule)}
.caution{border:1px solid var(--hair);padding:12px 14px;margin:0 0 16px;max-width:96ch;font-size:13px;line-height:1.6}
.caution b{color:var(--ink);font-weight:600}
.loading,.empty{padding:40px 30px;color:var(--ink2);font-size:14px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the comparison window, pinned under the tabs ---------- */
.yearbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 30px;
  border-bottom:2px solid var(--rule);background:var(--paper3)}
.yearbar .lbl{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2)}
.yearbar select{background:var(--paper);font-size:var(--t-small)}
.yearbar .spacer{flex:1 1 auto}
@media(max-width:820px){
  .yearbar{padding:10px 20px}
  .yearbar select{flex:1 1 150px}
  .yearbar .spacer{display:none}
}
/* a figure read out of the printed report, not the open data table */
.chart .pt.pdf{fill:var(--paper);stroke:var(--accent);stroke-width:2;stroke-dasharray:2 1.6}
.chart .tgt{stroke:var(--flag);stroke-width:2}
.chart .tgtlbl{font-family:var(--mono);font-size:10px;fill:var(--flag)}
.prov{font-size:12.5px;line-height:1.5;color:var(--ink3);margin:7px 0 0;max-width:72ch}
.prov b{font-family:var(--mono);color:var(--ink2);font-weight:400}
.prov a{color:var(--ink2);border-bottom:1px solid var(--hair)}

/* ---------- ratios ---------- */
.ratio{border-bottom:1px solid var(--hair)}
.ratio .rhead{padding:16px 30px 0;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.ratio .rag{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper);background:var(--ink);padding:3px 7px}
.ratio h3{font-family:var(--disp);font-weight:500;font-size:1.35rem;line-height:1.24;
  letter-spacing:-.015em;margin:0;flex:1 1 300px}
.ratio .rq{font-size:14.5px;line-height:1.6;color:var(--ink2);max-width:74ch;margin:0 0 14px}
.ratio .rlead{font-family:var(--mono);font-size:13px;color:var(--ink2);margin:0 0 12px}
.ratio .rlead b{font-size:1.9rem;color:var(--ink);font-weight:400;letter-spacing:-.03em;
  vertical-align:-2px;margin-right:6px}
.ratio .rlead span{letter-spacing:.1em;text-transform:uppercase;font-size:var(--t-micro);margin-right:8px}
.ratio .vtable td:first-child{max-width:260px;font-weight:400;color:var(--ink2);font-size:12.5px}
@media(max-width:820px){.ratio .rhead{padding:16px 20px 0}}
@media(max-width:820px){
  /* eleven fiscal years will not fit on a phone; let the table scroll */
  .vtable{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .ratio .vtable td:first-child{max-width:none;white-space:normal;min-width:180px}
}

/* ---------- how this was made ---------- */
.made{border-top:2px solid var(--rule)}
.made h3.sec{border-top:0}
.made h3.sec a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--hair)}
.made h3.sec a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.madegrid{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:940px){.madegrid{grid-template-columns:1fr}}
.madegrid>div{padding:18px 30px 26px;min-width:0}
.madegrid>div:first-child{border-right:1px solid var(--hair)}
@media(max-width:940px){.madegrid>div:first-child{border-right:0;border-bottom:1px solid var(--hair)}}
.made h4{margin:20px 0 7px;font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.15em;
  text-transform:uppercase;font-weight:400;color:var(--ink2);padding-bottom:6px;border-bottom:1px solid var(--hair)}
.made h4:first-child{margin-top:0}
.made p{margin:0 0 12px;font-size:14px;line-height:1.62;color:var(--ink2);max-width:68ch}
.made p a,.made li a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair)}
.made p a:hover,.made li a:hover{border-bottom-color:var(--rule)}
.made b{color:var(--ink);font-weight:600}
ul.checks{margin:0 0 12px;padding-left:18px}
ul.checks li{font-size:14px;line-height:1.6;color:var(--ink2);margin:0 0 8px}
.madefoot{font-size:13px;color:var(--ink3)}
@media(max-width:820px){.madegrid>div{padding:18px 20px 24px}}

/* ---------- AI caution: present, quiet, never a banner ---------- */
.aic{margin:14px 0 0;max-width:86ch}
.aic summary{display:inline-block;cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.11em;text-transform:uppercase;
  color:#fff;background:#6d1f24;padding:6px 11px;border:1px solid #6d1f24}
.aic summary::-webkit-details-marker{display:none}
.aic summary:hover{background:#87272d;border-color:#87272d}
.aic[open] summary{background:#87272d;border-color:#87272d}
.aicbody{margin-top:8px;background:#151d31;color:#dfe4ee;border:1px solid #151d31;padding:14px 16px}
.aicbody p{margin:0 0 10px;font-size:13px;line-height:1.62;color:#dfe4ee}
.aicbody p:last-child{margin-bottom:0}
.aicbody a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);text-decoration:none}
.aicbody a:hover{border-bottom-color:#fff}
/* Ratio charts sit beside their own arithmetic, so they are read at a glance
   rather than studied: half the height and a bounded width. */
.ratio .chart{max-width:560px}
.ratio .pad{padding-top:14px;padding-bottom:20px}
.ratio .rbasis{margin:6px 30px 0;font-family:var(--mono);font-size:var(--t-micro);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
@media(max-width:820px){.ratio .rbasis{margin-left:20px;margin-right:20px}}

/* ---------- description tooltip ---------- */
.tip{position:fixed;top:0;left:0;z-index:1200;max-width:430px;pointer-events:none;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);
  padding:11px 13px;opacity:0;visibility:hidden;transition:opacity .09s linear}
.tip.on{opacity:1;visibility:visible}
.tip b{display:block;font-family:var(--disp);font-weight:500;font-size:15px;line-height:1.28;
  letter-spacing:-.008em;margin-bottom:6px}
.tip p{margin:0 0 8px;font-size:13px;line-height:1.52;color:var(--paper2)}
.tip span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);padding-top:7px;border-top:1px solid rgba(255,255,255,.18)}
@media(pointer:coarse){.tip{display:none}}

/* Keep the agency links native keyboard controls without changing table layout. */
.agency-link{font:inherit;color:inherit;text-align:left;background:none;border:0;padding:0;cursor:pointer}
.agency-link:focus-visible,table.league th:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Ratios have independently reviewed five-year histories. */
.yearbar[hidden] { display: none; }

/* Question-led navigation: the same ruled, editorial layout as the report. */
body[data-view="topics"] #mast,body[data-view="topics"] #counts{display:none}
.topic-grid,.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.topic-card,.comparison-card{min-width:0;padding:26px 30px;border-top:1px solid var(--rule);border-right:1px solid var(--hair)}
.topic-card h3,.comparison-card h3{font:500 26px/1.2 var(--disp);margin:0 0 10px}
.topic-question{border-top:1px solid var(--hair);padding:16px 0;margin-top:16px}
.topic-question h4{font:500 20px/1.25 var(--disp);margin:0 0 8px}
.guide-button{background:var(--paper2);border:1px solid var(--hair);padding:9px 12px;cursor:pointer;font:500 12px var(--sans);margin:4px 6px 4px 0}
.guide-button:hover,.guide-button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.text-button{border:0;background:none;text-align:left;color:var(--accent);font:inherit;text-decoration:underline;text-underline-offset:3px;padding:3px 0;cursor:pointer}
.guide-button:focus-visible,.text-button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.guide-links{padding-left:19px;margin:10px 0 14px;font-size:14px}.guide-links li{margin:7px 0}
.guide-search{display:flex;gap:10px;max-width:740px;margin-top:18px}.guide-search input{flex:1;min-width:0;padding:10px;border:1px solid var(--hair);background:var(--paper);color:var(--ink);font:inherit}
.compare-tray{display:flex;align-items:center;gap:10px;padding:8px 30px;border-bottom:1px solid var(--hair);flex-wrap:wrap;background:var(--paper2)}
.compare-tray[hidden]{display:none}.compare-tray span,.eyebrow{font:11px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.compare-status{font-size:13px;padding:0 30px;margin:0}.compare-status:empty{display:none}
.reading-box{padding:16px 0;border-top:1px solid var(--hair);margin-top:18px}.reading-box p,.source-context p{font-size:14px;line-height:1.6}
.reading-box h4,.related h4,.source-context h4{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
.reading-facts{display:grid;grid-template-columns:140px 1fr;font-size:13px;margin:16px 0}.reading-facts dt,.reading-facts dd{border-top:1px solid var(--hair);padding:9px 0}.reading-facts dt{font-weight:600}.reading-facts dd{margin:0;padding-left:12px}
.related,.source-context{border-top:1px solid var(--hair);padding:18px 0;margin-top:18px}.source-context h5{font:600 15px var(--sans);margin:12px 0 6px}.source-context a{font-size:13px}.guide-source{display:block;margin:12px 0}
.related-row{padding:10px 0;border-top:1px solid var(--hair);display:flex;align-items:center;gap:14px}.related-row .text-button{flex:1;font-size:14px}.related-row .guide-button{flex-shrink:0}
.share-label{display:block;font-size:12px;margin-top:12px}.share-label input{display:block;width:100%;max-width:800px;color:var(--ink);background:var(--paper);border:1px solid var(--hair);padding:9px;font:12px var(--mono)}
.definition-break{stroke:var(--flag);stroke-dasharray:4 4;stroke-width:1.5}.comparison-card .chart{margin-top:16px}.comparison-card caption{text-align:left;font-size:12px;color:var(--ink2)}
@media(max-width:820px){.topic-grid,.comparison-grid{grid-template-columns:1fr}.topic-card,.comparison-card{padding:22px 20px;border-right:0}.related-row{display:block}.guide-search{flex-wrap:wrap}.guide-search input{flex-basis:100%}.reading-facts{grid-template-columns:110px 1fr}.compare-tray{padding:10px 20px}}