/* muni.llc — one sheet, two editions.
   Paper is the default and the moon is html[data-dark]. The edition is the
   reader's explicit choice, so it is never routed on prefers-color-scheme —
   that would take the choice away from them. */

:root{
  /* page */
  --bg:#f6f5f1; --bg2:#fcfcfb; --ink:#0b0b0b; --ink2:#52514e; --ink3:#6a6862;
  --line:#e0ded6; --line2:#eeece5;
  --acc:#1c5cab; --acc2:#184f95; --accbg:#e6eefa;
  --up:#a8341c; --dn:#1b6b4a;
  /* categorical series — the validated reference palette, documented slot
     order, unaltered. Four is the ceiling for line charts; at four, direct
     labels are mandatory, so every series is labelled at its own end. */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --grid:#e6e4dc;
  --disp:"Newsreader",Iowan Old Style,Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
html[data-dark]{
  --bg:#131311; --bg2:#1a1a19; --ink:#ffffff; --ink2:#c3c2b7; --ink3:#9c9a90;
  --line:#2c2c28; --line2:#232320;
  --acc:#6da7ec; --acc2:#86b6ef; --accbg:#14243a;
  --up:#e08a72; --dn:#68c79c;
  /* the same eight hues stepped for the dark surface, not an automatic flip */
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --grid:#26261f;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--sans);
  min-height:100dvh;display:flex;flex-direction:column}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:var(--acc);color:#fff;padding:8px 12px;border-radius:6px;z-index:99}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:3px}
.sep{color:var(--ink3)}

/* masthead */
.mast{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;
  padding:13px clamp(16px,4vw,44px);border-bottom:1px solid var(--line);background:var(--bg2);
  position:sticky;top:0;z-index:20}
.wordmark{display:flex;align-items:center;gap:9px;color:var(--ink);font:600 21px/1 var(--disp)}
.wordmark i{font-style:normal;color:var(--acc)}
.wordmark .mk{width:24px;height:24px;stroke:var(--acc);fill:var(--acc)}
.mastnav{display:flex;flex-wrap:wrap;gap:2px 17px;font:600 12px/1 var(--sans);
  letter-spacing:.08em;text-transform:uppercase}
.mastnav a{color:var(--ink2)}.mastnav a:hover{color:var(--acc);text-decoration:none}
.pill.edition{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--bg);padding:2px;gap:2px}
.pill.edition button{width:28px;height:24px;border:0;background:transparent;border-radius:999px;
  cursor:pointer;color:var(--ink3);font-size:13px;line-height:1}
.pill.edition button[aria-pressed="true"]{background:var(--accbg);color:var(--acc);box-shadow:inset 0 0 0 1.5px var(--acc)}

/* shell */
.app{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:0 clamp(16px,4vw,44px) 60px}
.view{padding-top:26px}
h1{font:600 clamp(30px,5vw,46px)/1.08 var(--disp);letter-spacing:-.012em;margin:.1em 0 .35em;text-wrap:balance}
h2{font:600 clamp(20px,2.4vw,27px)/1.2 var(--disp);margin:2.3em 0 .5em;padding-bottom:.3em;border-bottom:1px solid var(--line)}
.lede{font-size:clamp(16.5px,1.5vw,19px);line-height:1.55;color:var(--ink2);max-width:64ch;margin:0 0 1.2em}
.lede b{color:var(--ink);font-variant-numeric:tabular-nums}
.pnote{font-size:14px;line-height:1.6;color:var(--ink3);max-width:70ch;margin:.3em 0 1.2em}
.pnote b{color:var(--ink2)}
.prose p{max-width:70ch;line-height:1.68;color:var(--ink2)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--line2);padding:1px 5px;border-radius:4px}
.bullets{max-width:70ch;line-height:1.68;color:var(--ink2);padding-left:1.15em}
.bullets li{margin:.5em 0}
.hero{padding:8px 0 2px;border-bottom:1px solid var(--line);margin-bottom:22px}

/* KPI row — a handful of headline numbers is a stat row, never a bar chart */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:11px;margin:1.4em 0}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.kpi span{display:block;font:600 11px/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.kpi b{display:block;margin-top:6px;font:600 30px/1 var(--disp);font-variant-numeric:tabular-nums}
.kpi i{display:block;margin-top:5px;font-style:normal;font-size:12px;color:var(--ink3)}

/* charts */
.chart{display:block;width:100%;height:auto;margin:.8em 0 1em;overflow:visible}
.chart .grid{stroke:var(--grid);stroke-width:1}
.chart .axis{fill:var(--ink3);font:11.5px/1 var(--sans);font-variant-numeric:tabular-nums}
.chart .ln{stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dlab{font:600 12px/1 var(--sans);dominant-baseline:middle}
.chart .lead{stroke-width:1;opacity:.55}
.chart .s1{stroke:var(--s1)} .chart circle.s1{fill:var(--s1);stroke:none} .chart text.s1{fill:var(--s1)}
.chart .s2{stroke:var(--s2)} .chart circle.s2{fill:var(--s2);stroke:none} .chart text.s2{fill:var(--s2)}
.chart .s3{stroke:var(--s3)} .chart circle.s3{fill:var(--s3);stroke:none} .chart text.s3{fill:var(--s3)}
.chart .s4{stroke:var(--s4)} .chart circle.s4{fill:var(--s4);stroke:none} .chart text.s4{fill:var(--s4)}
/* the hover layer app.js adds; it never redraws the chart itself */
.chart .cross{stroke:var(--ink3);stroke-width:1;stroke-dasharray:3 3}
.tip{position:absolute;z-index:30;background:var(--bg2);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;font-size:13px;box-shadow:0 10px 26px -16px rgba(0,0,0,.5);pointer-events:none;min-width:130px}
.tip b{font-variant-numeric:tabular-nums}
.tip .r{display:flex;align-items:center;gap:7px;margin-top:3px}
.tip .sw{width:9px;height:9px;border-radius:2px;flex:none}
.chartwrap{position:relative}

/* tables — every figure is followed by its own numbers */
.tbl{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:14.5px;
  font-variant-numeric:tabular-nums;display:block;overflow-x:auto}
.tbl caption{text-align:left;font-size:13px;color:var(--ink3);padding-bottom:.5em}
.tbl th,.tbl td{padding:8px 12px;border-bottom:1px solid var(--line2);text-align:right;white-space:nowrap}
.tbl thead th{font:600 11.5px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);border-bottom:1px solid var(--line)}
.tbl tbody th{text-align:left;font-weight:600}
.tbl td.up{color:var(--up)} .tbl td.dn{color:var(--dn)}

/* prediction-market bars — magnitude low->high, so one hue, not categorical */
.probs{list-style:none;margin:1em 0;padding:0;display:grid;gap:7px}
.probs li{display:grid;grid-template-columns:minmax(120px,1.1fr) 3fr auto;gap:12px;align-items:center;
  font-size:14px}
.probs .pl{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.probs .bar{background:var(--line2);border-radius:4px;height:14px;overflow:hidden}
.probs .bar i{display:block;height:100%;background:var(--s1);border-radius:0 4px 4px 0}
.probs b{font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}

.crumbs{margin:0 0 1em;font-size:13px;color:var(--ink3)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--ink3)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:1.4em 0}
.actions a{padding:10px 17px;border:1px solid var(--line);border-radius:9px;background:var(--bg2);font-size:14.5px}
.actions a:hover{border-color:var(--acc);text-decoration:none}
.actions a.pri{background:var(--acc);border-color:var(--acc);color:#fff}
html[data-dark] .actions a.pri{color:#0b1220}
.empty{padding:34px 0;max-width:60ch}
.foot{border-top:1px solid var(--line);background:var(--bg2);padding:24px clamp(16px,4vw,44px) 38px;
  font-size:13px;line-height:1.6;color:var(--ink3)}
.foot p{max-width:84ch;margin:0 0 .7em}
.fine{margin-top:1em;padding-top:.9em;border-top:1px solid var(--line2)}
.fine a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}

@media (max-width:640px){
  .mast{grid-template-columns:auto auto}
  .mastnav{grid-column:1/-1;order:3}
  .probs li{grid-template-columns:1fr auto;grid-template-areas:"l v" "b b"}
  .probs .pl{grid-area:l}.probs b{grid-area:v}.probs .bar{grid-area:b}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}