/* Shared design system for all report pages (work/, school/, report-*.html).
   Extracted 2026-08-13 from the identical per-page inline styles (issue #21).
   Tokens live in :root + the series family block at the bottom. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --acc:#2a78d6; --acct:#1c5cab; --soft:#eaf2fd;
  --bg:#fbfbf9; --surface:#ffffff; --ink:#14140f; --ink2:#4a4a44; --muted:#6e6d65;
  --rule:#e4e3dc; --rule2:#efeee8; --grid:#e8e7e0;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --maxw:790px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
 :root:where(:not([data-theme=light])){
  --acc:#3987e5; --acct:#3987e5; --soft:#12233a;
  --bg:#101010; --surface:#17171a; --ink:#f4f3ee; --ink2:#c3c2b7; --muted:#98978e;
  --rule:#2b2b28; --rule2:#232320; --grid:#2c2c2a;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
 }
}
:root[data-theme=dark]{
  --acc:#3987e5; --acct:#3987e5; --soft:#12233a;
  --bg:#101010; --surface:#17171a; --ink:#f4f3ee; --ink2:#c3c2b7; --muted:#98978e;
  --rule:#2b2b28; --rule2:#232320; --grid:#2c2c2a;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 18.5px/1.68 var(--serif);font-kerning:normal}
a{color:var(--acct);text-underline-offset:2px;text-decoration-thickness:.06em}
a:hover{text-decoration-thickness:.13em}
code{font:500 .87em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--rule2);padding:.1em .38em;border-radius:4px;color:var(--ink2)}

/* ---------- masthead ---------- */
.top{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rule)}
/* Brand and crumb are baseline-aligned; .mark stays inline-block (not flex)
   so its baseline comes from the text, with the dot vertically centered. */
.topin{max-width:1220px;margin:0 auto;padding:11px 26px;display:flex;align-items:baseline;gap:16px}
.mark{display:inline-block;font:600 15px/1 var(--sans);
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;flex:none}
.mark .dot{display:inline-block;width:9px;height:9px;border-radius:50%;
  background:var(--acc);margin-right:9px;vertical-align:middle;position:relative;top:-1px}
.crumb{font:500 14px/1.35 var(--sans);color:var(--muted);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.crumb{text-decoration:none}
a.crumb:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tools{display:flex;gap:6px;flex:none;align-self:center}
.btn{font:500 13.5px/1 var(--sans);color:var(--ink2);background:transparent;
  border:1px solid var(--rule);border-radius:7px;padding:7px 10px;cursor:pointer}
.btn:hover{border-color:var(--muted);color:var(--ink)}
/* Theme toggle: icon shows the mode a click switches TO (moon in light, sun in dark) */
#tt{padding:6px;display:flex;align-items:center}
#tt svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
#tt .sun{display:none}
@media (prefers-color-scheme:dark){
 :root:where(:not([data-theme=light])) #tt .sun{display:block}
 :root:where(:not([data-theme=light])) #tt .moon{display:none}
}
:root[data-theme=dark] #tt .sun{display:block}
:root[data-theme=dark] #tt .moon{display:none}
.prog{height:2px;background:var(--acc);width:0;transition:width .1s linear}

/* ---------- layout ---------- */
.wrap{max-width:1220px;margin:0 auto;padding:0 26px;display:grid;
  grid-template-columns:236px minmax(0,1fr);gap:52px;align-items:start}
.side{position:sticky;top:84px;padding:46px 0 60px;max-height:calc(100vh - 92px);
  overflow-y:auto;font:400 14px/1.45 var(--sans);scrollbar-width:thin}
.side h4{font:600 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.side a{display:block;color:var(--ink2);text-decoration:none;padding:5px 0 5px 12px;
  border-left:2px solid var(--rule2);margin-left:-2px}
.side a:hover{color:var(--ink);border-left-color:var(--muted)}
.side a.on{color:var(--acct);border-left-color:var(--acc);font-weight:600}
main{max-width:var(--maxw);padding:46px 0 96px;min-width:0}

/* ---------- title block ---------- */
.hero{border-bottom:1px solid var(--rule);padding-bottom:30px;margin-bottom:34px}
h1{font:650 clamp(31px,4.4vw,45px)/1.11 var(--sans);letter-spacing:-.023em;
  margin:0 0 18px;color:var(--ink);text-wrap:balance}
.dek{font:400 20px/1.5 var(--serif);color:var(--ink2);margin:0 0 22px;text-wrap:pretty}
.srcline{font:400 14.5px/1.6 var(--sans);color:var(--muted);margin:0;
  padding:14px 16px;background:var(--surface);border:1px solid var(--rule);border-radius:9px}
.srcline a{color:var(--acct)}
.pos{font:400 14px/1.55 var(--sans);color:var(--muted);margin:14px 0 0;font-style:italic}
.internal{background:#fff4f4;border:1px solid #f0c9c9;color:#8c2b2b;border-radius:9px;
  padding:12px 15px;font:600 14px/1.5 var(--sans);margin:0 0 22px}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme=light])) .internal{
  background:#2a1616;border-color:#5b2b2b;color:#f0a9a9}}
:root[data-theme=dark] .internal{background:#2a1616;border-color:#5b2b2b;color:#f0a9a9}

/* ---------- prose ---------- */
h2{font:640 27px/1.24 var(--sans);letter-spacing:-.018em;margin:58px 0 6px;
  color:var(--ink);text-wrap:balance;padding-top:6px}
h2::before{content:"";display:block;width:34px;height:3px;border-radius:2px;
  background:var(--acc);margin-bottom:15px}
h3{font:640 19.5px/1.3 var(--sans);letter-spacing:-.012em;margin:38px 0 4px;color:var(--ink)}
h4{font:600 17px/1.35 var(--sans);margin:28px 0 4px;color:var(--ink2)}
p{margin:0 0 17px;text-wrap:pretty}
p.lede{font:400 19.5px/1.55 var(--sans);color:var(--acct);margin:20px 0 20px;
  padding-left:16px;border-left:3px solid var(--acc);text-wrap:pretty}
p.lede strong{color:var(--acct);font-weight:640}
ul,ol{margin:0 0 20px;padding-left:1.25em}
li{margin:0 0 9px}
li::marker{color:var(--muted)}
hr{border:0;border-top:1px solid var(--rule);margin:44px 0}
strong{font-weight:640;color:var(--ink)}
em{font-style:italic}

blockquote{margin:26px 0;padding:18px 22px;background:var(--soft);
  border-left:3px solid var(--acc);border-radius:0 10px 10px 0;
  font:400 17px/1.6 var(--sans);color:var(--ink2)}
blockquote strong{color:var(--acct)}

/* key takeaways */
.kt{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:8px 26px 20px;margin:26px 0 40px}
.kt ul{list-style:none;padding:0;margin:0}
.kt li{position:relative;padding-left:24px;margin:16px 0;font:400 17.5px/1.6 var(--sans);
  color:var(--ink2)}
.kt li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;
  border-radius:50%;background:var(--acc)}
.kt li strong{color:var(--ink);font-weight:650}

/* ---------- figures & charts ---------- */
figure{margin:30px 0 34px}
figure.chart{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:20px 20px 14px}
figure.asset{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:18px;overflow-x:auto}
figure.asset svg,figure.asset img{max-width:100%;height:auto;display:block;margin:0 auto}
figcaption{font:400 14.2px/1.6 var(--sans);color:var(--muted);margin-top:14px;
  padding-top:12px;border-top:1px solid var(--rule2)}
figcaption b,figcaption strong{color:var(--ink2);font-weight:640}
figure.tbl{background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:6px 8px 14px}
figure.tbl figcaption{padding:0 12px;margin-top:8px}
.tnote{font:400 14.6px/1.65 var(--sans);color:var(--ink2);margin:22px 0 26px;
  padding-left:16px;border-left:2px solid var(--rule)}
.figspec{font:400 14.2px/1.6 var(--sans);color:var(--muted);margin:26px 0 30px;
  padding:13px 16px;border:1px dashed var(--rule);border-radius:10px;background:var(--surface)}
figcaption .drawn{display:block;margin-top:6px;font-size:13px;color:var(--muted);
  font-style:italic}
svg.cv.tilemap .tl{font-size:14px;font-weight:700;text-anchor:middle}
svg.cv.tilemap .tv{font-size:13.5px;text-anchor:middle;font-variant-numeric:tabular-nums}
svg.cv.tilemap .tempty{fill:var(--rule2)}

svg.cv{display:block;overflow:visible;font-family:var(--sans)}
svg.cv .cg{stroke:var(--grid);stroke-width:1}
svg.cv .cref{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
svg.cv .ct{font-size:13px;fill:var(--ink2)}
svg.cv .ctick{fill:var(--muted);font-size:12.5px;text-anchor:middle}
svg.cv .clab{text-anchor:end;fill:var(--ink2);font-size:13.5px}
svg.cv .cgrp{font-weight:700;font-size:12.5px;fill:var(--ink);letter-spacing:.04em;
  text-transform:uppercase}
svg.cv .cval{font-size:13px;font-weight:600;fill:var(--ink);font-variant-numeric:tabular-nums}
svg.cv .cgap{font-size:13px;fill:var(--muted);font-style:italic}
svg.cv .clg{font-size:13px;fill:var(--ink2)}
svg.cv .cs1{fill:var(--s1)} svg.cv .cs2{fill:var(--s2)} svg.cv .cs3{fill:var(--s3)}
svg.cv .cb{transition:opacity .12s} svg.cv .cb:hover{opacity:.72;cursor:default}

details.datatbl{margin-top:14px;border-top:1px solid var(--rule2);padding-top:10px}
details.datatbl summary{font:500 14px/1 var(--sans);color:var(--muted);cursor:pointer;
  list-style:none;padding:4px 0}
details.datatbl summary::-webkit-details-marker{display:none}
details.datatbl summary::before{content:"▸ ";color:var(--acc)}
details.datatbl[open] summary::before{content:"▾ "}
details.datatbl summary:hover{color:var(--ink)}

/* ---------- tables ---------- */
.tw{overflow-x:auto;margin:14px 0 8px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font:400 14.6px/1.5 var(--sans);
  font-variant-numeric:tabular-nums}
th{text-align:left;font-weight:640;color:var(--ink);padding:9px 12px;
  border-bottom:1.5px solid var(--rule);white-space:nowrap;font-size:13.5px;
  letter-spacing:.01em;position:sticky;top:0;background:var(--surface)}
td{padding:8px 12px;border-bottom:1px solid var(--rule2);color:var(--ink2);vertical-align:top}
td:not(:first-child){white-space:nowrap}
tr:last-child td{border-bottom:0}
tr.grp td{font-weight:700;color:var(--ink);background:var(--rule2);font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;padding:7px 12px}
main>.tw{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:4px 6px}

/* ---------- footnotes ---------- */
sup.fnref a{text-decoration:none;font-weight:700;font-size:.78em;color:var(--acct);
  padding:0 1px}
.fnotes{margin-top:56px;padding-top:22px;border-top:1px solid var(--rule)}
.fnotes h2{font-size:16px;margin:0 0 14px}
.fnotes h2::before{display:none}
.fnotes ol{font:400 14.4px/1.62 var(--sans);color:var(--muted);padding-left:1.4em}
.fnotes li{margin:0 0 11px}
.fnotes a{color:var(--acct);word-break:break-word}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);margin-top:60px;padding:26px 0 0;
  font:400 13.8px/1.65 var(--sans);color:var(--muted)}
.foot a{color:var(--acct)}
.nav{display:flex;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.nav a{font:600 14.5px/1.4 var(--sans);text-decoration:none;border:1px solid var(--rule);
  border-radius:9px;padding:11px 15px;color:var(--ink2);max-width:47%}
.nav a:hover{border-color:var(--acc);color:var(--acct)}
.nav span{display:block;font:500 12.5px/1 var(--sans);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}

/* Contents toggle (.tocbtn, injected by report.js): on wide screens a chevron
   in a sticky rail left of the report — collapsing tucks the TOC away, the
   prose recenters at its readable measure, and figures/tables break out toward
   the 948px width the charts are actually drawn at. On narrow screens it is
   the "Contents" disclosure row itself, collapsed by default. */
.tocbtn{display:flex;align-items:center;cursor:pointer;color:var(--muted);
  background:transparent}
.tocbtn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round;transition:transform .15s}
.tocbtn:hover{color:var(--ink)}
@media(min-width:1001px){
  .tocbtn{width:26px;height:26px;justify-content:center;padding:0;margin:0 0 18px;
    border:1px solid var(--rule);border-radius:7px}
  .tocbtn:hover{border-color:var(--muted)}
  .tocbtn svg{width:15px;height:15px}
  .tocbtn span{display:none}
  .side.collapsed h4,.side.collapsed nav{display:none}
  .side.collapsed .tocbtn svg{transform:rotate(180deg)}
  .wrap:has(.side.collapsed){grid-template-columns:26px minmax(0,1fr)}
  .wrap:has(.side.collapsed) main{margin:0 auto}
  .wrap:has(.side.collapsed) :is(figure.chart,figure.asset,figure.tbl,main>.tw){
    width:min(988px,100vw - 146px);
    margin-inline:calc((var(--maxw) - min(988px,100vw - 146px))/2)}
}
@media(max-width:1000px){
  .wrap{grid-template-columns:1fr;gap:0}
  .side{position:static;max-height:none;padding:16px 0 0;border-bottom:1px solid var(--rule)}
  .side h4{display:none}
  .tocbtn{width:100%;gap:8px;padding:6px 0 16px;border:0;
    font:600 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink2)}
  .tocbtn svg{width:14px;height:14px;transform:rotate(-90deg)}
  .side.collapsed .tocbtn svg{transform:rotate(180deg)}
  .side.collapsed nav{display:none}
  .side nav{padding-bottom:14px}
  main{padding-top:30px}
}
@media(max-width:560px){
  body{font-size:17.5px}
  .topin,.wrap{padding-left:16px;padding-right:16px}
  figure.chart{padding:12px 10px 10px}
}
@media print{
  .top,.side,.tools,details.datatbl summary{display:none}
  details.datatbl{display:block}details.datatbl[open],details.datatbl:not([open]){display:block}
  .wrap{display:block;max-width:none;padding:0}
  main{max-width:none;padding:0}
  body{font-size:10.5pt;background:#fff}
  h2{page-break-after:avoid}figure,table{page-break-inside:avoid}
  a{text-decoration:none;color:#000}
}
.cards{display:grid;gap:14px;margin:30px 0 10px}
.card{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--rule);
  border-radius:14px;padding:19px 22px;transition:border-color .13s,transform .13s}
.card:hover{border-color:var(--acc);transform:translateY(-1px)}
.card h3{margin:0 0 7px;font:640 19px/1.3 var(--sans);color:var(--ink);letter-spacing:-.012em}
.card p{margin:0;font:400 15.5px/1.55 var(--sans);color:var(--ink2)}
.lead{font:400 19px/1.6 var(--serif);color:var(--ink2);margin:0 0 8px}

/* ---------- series accent families ----------
   The :root accents above are the work-blue defaults. Each report family sets
   its triplet on <body class="series-*">; a rebrand (issue #6) or new family
   is a token edit here only. */
body.series-work{--acc:#2a78d6;--acct:#1c5cab;--soft:#eaf2fd}
body.series-school{--acc:#f5a500;--acct:#7a5200;--soft:#fff5de}
body.series-standalone{--acc:#2DC4B6;--acct:#0e7d74;--soft:#e4f7f5}
@media (prefers-color-scheme:dark){
 :root:where(:not([data-theme=light])) body.series-work{--acc:#3987e5;--acct:#3987e5;--soft:#12233a}
 :root:where(:not([data-theme=light])) body.series-school{--acc:#f5b731;--acct:#f5b731;--soft:#2e2408}
 :root:where(:not([data-theme=light])) body.series-standalone{--acc:#3fd4c6;--acct:#3fd4c6;--soft:#0f2b28}
}
:root[data-theme=dark] body.series-work{--acc:#3987e5;--acct:#3987e5;--soft:#12233a}
:root[data-theme=dark] body.series-school{--acc:#f5b731;--acct:#f5b731;--soft:#2e2408}
:root[data-theme=dark] body.series-standalone{--acc:#3fd4c6;--acct:#3fd4c6;--soft:#0f2b28}