/* Shared styles for the index, monthly and quarterly pages. Light and dark are both selected, not flipped. */
:root {
  color-scheme: light;
  --page:#f9f9f7; --surface-1:#fcfcfb; --text-primary:#0b0b0b; --text-secondary:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,.10); --series-1:#2a78d6; --deemph:#c3c2b7;
  --orange:#d9622b; --hero-bg:#1f2a44; --hero-ink:#ffffff; --hero-sub:#dfe3ec; --ok:#1f7a4d; --okbg:#e3f3ea; --amber:#8a5a00; --amberbg:#fff1cc;
  /* One hue, five steps, light to dark: the map's "how many" scale. Ink flips where the step gets dark. */
  --seq-1:#cde2fb; --seq-2:#86b6ef; --seq-3:#3987e5; --seq-4:#1c5cab; --seq-5:#0d366b;
  --seq-ink-1:#0b0b0b; --seq-ink-2:#0b0b0b; --seq-ink-3:#0b0b0b; --seq-ink-4:#ffffff; --seq-ink-5:#ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page:#0d0d0d; --surface-1:#1a1a19; --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10); --series-1:#3987e5; --deemph:#52514e;
    --hero-bg:#141b2e; --ok:#4cc38a; --okbg:#12301f; --amber:#e2b340; --amberbg:#3a2c07;
    /* On a dark surface the scale runs the other way: few recedes into the page, many is the brightest step. */
    --seq-1:#104281; --seq-2:#1c5cab; --seq-3:#3987e5; --seq-4:#86b6ef; --seq-5:#cde2fb;
    --seq-ink-1:#ffffff; --seq-ink-2:#ffffff; --seq-ink-3:#0b0b0b; --seq-ink-4:#0b0b0b; --seq-ink-5:#0b0b0b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page:#0d0d0d; --surface-1:#1a1a19; --text-primary:#ffffff; --text-secondary:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10); --series-1:#3987e5; --deemph:#52514e;
  --hero-bg:#141b2e; --ok:#4cc38a; --okbg:#12301f; --amber:#e2b340; --amberbg:#3a2c07;
  --seq-1:#104281; --seq-2:#1c5cab; --seq-3:#3987e5; --seq-4:#86b6ef; --seq-5:#cde2fb;
  --seq-ink-1:#ffffff; --seq-ink-2:#ffffff; --seq-ink-3:#0b0b0b; --seq-ink-4:#0b0b0b; --seq-ink-5:#0b0b0b;
}
/* Type: Libre Franklin for structure, Newsreader for reading. Self-hosted (SIL Open Font License), so visitors never call a font server. */
@font-face { font-family:"Libre Franklin"; src:url("fonts/LibreFranklin.woff2") format("woff2"); font-weight:300 900; font-style:normal; font-display:swap; }
@font-face { font-family:"Libre Franklin"; src:url("fonts/LibreFranklin-Italic.woff2") format("woff2"); font-weight:300 900; font-style:italic; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("fonts/Newsreader.woff2") format("woff2"); font-weight:200 800; font-style:normal; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("fonts/Newsreader-Italic.woff2") format("woff2"); font-weight:200 800; font-style:italic; font-display:swap; }
:root { --sans:"Libre Franklin", "Segoe UI", system-ui, sans-serif; --serif:"Newsreader", Georgia, serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--text-primary); font:16px/1.55 var(--sans); }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
/* The top bar every page shares: wordmark left, the four places a reader goes on the right. */
.topbar { background:var(--page); border-bottom:1px solid var(--grid); }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:54px; flex-wrap:wrap; padding-top:8px; padding-bottom:8px; }
.topbar .brand { display:inline-flex; align-items:center; gap:10px; font:800 14px/1 var(--sans); letter-spacing:.08em; color:var(--text-primary); text-decoration:none; } .topbar .brand span { color:var(--orange); }
.topbar .brand img { width:30px; height:30px; display:block; border-radius:50%; }
@media (prefers-color-scheme: dark) { .topbar .brand img { background:#f6f3ee; padding:2px; } }   /* the mark's navy waves need a light disc on a dark page */
.topbar .links { display:flex; flex-wrap:wrap; gap:4px 18px; font-size:14px; } .topbar .links a { color:var(--text-primary); text-decoration:none; }
.topbar .links a:hover { text-decoration:underline; } .topbar .links a.sub { font-weight:650; color:var(--orange); }
header.hero { background:var(--hero-bg); color:var(--hero-ink); padding:40px 0 36px; }
.mark { font:800 14px/1 var(--sans); letter-spacing:.08em; margin:0 0 26px; }
.mark a { color:inherit; text-decoration:none; } .mark span { color:var(--orange); }
.edition { text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; color:var(--hero-sub); margin:0 0 10px; }
h1 { font:800 clamp(28px, 5vw, 42px)/1.12 var(--sans); letter-spacing:-.015em; margin:0 0 12px; max-width:24ch; }
.lede { color:var(--hero-sub); max-width:66ch; margin:0; font:400 18px/1.5 var(--serif); }
.note { margin:22px 0 0; padding:12px 16px; border-left:4px solid var(--orange); background:var(--surface-1); color:var(--text-secondary); font-size:14px; }
h2.section { font:800 24px/1.25 var(--sans); letter-spacing:-.01em; margin:44px 0 6px; padding-left:14px; border-left:5px solid var(--orange); }
p.sectionSub { color:var(--text-secondary); margin:0 0 16px; max-width:70ch; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin:26px 0 8px; }
.tile { background:var(--surface-1); border:1px solid var(--border); border-radius:6px; padding:16px 18px; }
.tile .label { color:var(--text-secondary); font-size:13.5px; }
.tile .value { font-size:30px; font-weight:650; line-height:1.15; margin-top:4px; }
.tile.heroTile .value { font-size:52px; }
.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; margin:16px 0 8px; }
.card { background:var(--surface-1); border:1px solid var(--border); border-radius:6px; padding:20px 20px 14px; min-width:0; }
.card.wide { grid-column:1 / -1; }
.card h3 { font:700 17px/1.3 var(--sans); margin:0 0 4px; }
.card h3 .fig { display:block; font:700 11px/1.2 system-ui, "Segoe UI", sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); margin-bottom:4px; }
.card .sub { color:var(--text-secondary); font-size:13.5px; margin:0 0 16px; }
.card .src { font-size:12px; color:var(--muted); margin:12px 0 0; line-height:1.4; }
.card h4.subhead { margin:16px 0 6px; font:600 12px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.card.text p, .card.text li { color:var(--text-secondary); margin:0 0 8px; font-family:var(--serif); font-size:17px; }
.finding { background:var(--surface-1); border:1px solid var(--border); border-top:3px solid var(--hero-bg); border-radius:6px; padding:18px 20px; }
.finding b { display:block; font:700 17px/1.3 var(--sans); margin-bottom:6px; } .finding p { margin:0; color:var(--text-secondary); font-family:var(--serif); font-size:17px; }
.finding.act { border-top-color:var(--orange); }
.score { list-style:none; margin:0; padding:0; } .score li { display:grid; grid-template-columns:64px 1fr; gap:12px; padding:10px 0; border-bottom:1px solid var(--grid); }
.score .mark { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding-top:3px; } .score .held { color:var(--ok); } .score .missed { color:var(--orange); } .score .open { color:var(--muted); }
.score small { display:block; color:var(--text-secondary); margin-top:3px; }
/* A signal, as the designer laid it out: who, stage and source on the left, the headline and the labeled paragraphs on the right. */
.signals { border-top:1px solid var(--grid); }
.sig { display:grid; grid-template-columns:minmax(180px, 26%) 1fr; gap:20px 44px; padding:28px 0 32px; border-bottom:1px solid var(--grid); }
.sig .who b { display:block; font:700 18px/1.3 var(--sans); }
.sig .place { display:block; font:400 15.5px/1.5 var(--serif); color:var(--text-secondary); margin:6px 0 16px; }
.stage { display:grid; grid-template-columns:repeat(3, 1fr); gap:0 6px; }
.stage i { display:block; height:5px; background:var(--grid); border-radius:2px; } .stage i.on { background:var(--ok); }
.stage span { font:600 11.5px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:7px; white-space:nowrap; } .stage span.on { color:var(--ok); }
.sig .src { display:inline-block; margin-top:18px; color:var(--orange); font:500 15.5px/1.4 var(--sans); text-decoration:none; }
.sig h3 { font:600 23px/1.25 var(--sans); letter-spacing:-.012em; margin:0 0 12px; }
.sig .label { font:600 12.5px/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.sig .label.why { color:var(--orange); margin-top:14px; }
.sig .what p:not(.label) { margin:0; font:400 17.5px/1.55 var(--serif); color:var(--text-secondary); }
@media (max-width:640px) { .sig { grid-template-columns:1fr; gap:14px; padding:22px 0 26px; } .sig .src { margin-top:12px; } }
.signal { background:var(--surface-1); border:1px solid var(--border); border-left:5px solid var(--orange); border-radius:0 6px 6px 0; padding:16px 20px; margin:0 0 12px; }
.signal h3 { margin:0 0 6px; font-size:17px; font-weight:400; } .signal h3 b { font-weight:700; }
.signal h3 .rank { color:var(--muted); font-variant-numeric:tabular-nums; margin-right:8px; }
.signal p { margin:0 0 6px; font-family:var(--serif); font-size:17px; } .signal .why b { color:var(--orange); font-family:var(--sans); font-size:15px; }
.signal p.meta { font-family:var(--sans); font-size:13.5px; }
.signal .meta { font-size:13.5px; color:var(--text-secondary); } .signal .meta a { color:inherit; }
.pill { font-size:11px; font-weight:700; letter-spacing:.06em; padding:2px 7px; border-radius:3px; margin-right:8px; }
.pill.open { color:var(--ok); background:var(--okbg); } .pill.active { color:var(--amber); background:var(--amberbg); }
ul.teasers { margin:0; padding-left:20px; } ul.teasers li { margin:0 0 8px; max-width:74ch; }
.row { display:grid; grid-template-columns:minmax(120px, 38%) 1fr; align-items:center; gap:10px; padding:5px 4px; border-radius:6px; outline:none; }
.row:hover, .row:focus-visible { background:color-mix(in srgb, var(--series-1) 9%, transparent); }
.row .lbl { font-size:13.5px; overflow-wrap:anywhere; }
.row .track { min-width:0; }
/* The box leaves room for the value label past a full-width bar, so every bar's width is a true share of one scale. */
.row .barbox { display:flex; align-items:center; gap:8px; width:calc(100% - 56px); }
.row .bar { height:16px; min-width:2px; border-radius:0 4px 4px 0; background:var(--series-1); flex:0 0 auto; }
.row .bar.muted { background:var(--deemph); }
.row .val { font-size:13px; color:var(--text-secondary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.legend { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--text-secondary); margin:0 0 10px; }
.legend i { display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:-1px; margin-right:6px; }
.legend i.empty { background:transparent; border:1px solid var(--axis); }
.legend i.hatch, .tile-st[data-bin="x"] { background:repeating-linear-gradient(45deg, transparent 0 4px, var(--axis) 4px 5.5px); }
/* US tile map: one equal square per state, so small states are as visible as large ones. Filters sit in one row above. */
.seg { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.seg button { font:inherit; font-size:13px; padding:6px 13px; border-radius:999px; border:1px solid var(--axis); background:transparent; color:var(--text-secondary); cursor:pointer; }
.seg button[aria-pressed="true"] { background:var(--text-primary); border-color:var(--text-primary); color:var(--page); }
.seg button:focus-visible { outline:2px solid var(--series-1); outline-offset:2px; }
.maplayout { display:grid; grid-template-columns:minmax(0, 620px) minmax(190px, 1fr); gap:32px; align-items:start; }
.tilemap { display:grid; grid-template-columns:repeat(11, minmax(0, 1fr)); gap:3px; }
.tile-st { aspect-ratio:1; min-width:0; border-radius:4px; border:1px solid var(--grid); color:var(--muted); display:flex; flex-direction:column;
           align-items:center; justify-content:center; font-size:clamp(9px, 1.35vw, 12.5px); line-height:1.2; outline:none; cursor:default; }
.tile-st b { font-weight:650; } .tile-st span { font-variant-numeric:tabular-nums; min-height:1.2em; }
.tile-st[data-bin="1"] { background:var(--seq-1); color:var(--seq-ink-1); border-color:transparent; }
.tile-st[data-bin="2"] { background:var(--seq-2); color:var(--seq-ink-2); border-color:transparent; }
.tile-st[data-bin="3"] { background:var(--seq-3); color:var(--seq-ink-3); border-color:transparent; }
.tile-st[data-bin="4"] { background:var(--seq-4); color:var(--seq-ink-4); border-color:transparent; }
.tile-st[data-bin="5"] { background:var(--seq-5); color:var(--seq-ink-5); border-color:transparent; }
.tile-st:hover, .tile-st:focus-visible { box-shadow:0 0 0 2px var(--page), 0 0 0 4px var(--text-primary); position:relative; z-index:1; }
.maplegend { margin:14px 0 0; }
.mapside h4 { margin:0 0 6px; font-size:12px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.mapside ol { list-style:none; margin:0 0 18px; padding:0; font-size:13.5px; }
.mapside li { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-bottom:1px solid var(--grid); }
.mapside li span:last-child { color:var(--text-secondary); font-variant-numeric:tabular-nums; }
@media (max-width:760px) { .maplayout { grid-template-columns:1fr; gap:18px; } }
@media (max-width:520px) { .tile-st span { display:none; } }
svg { display:block; width:100%; height:auto; overflow:visible; outline:none; }
svg text { font:12px system-ui, "Segoe UI", sans-serif; fill:var(--muted); font-variant-numeric:tabular-nums; }
svg text.direct { fill:var(--text-secondary); }
/* the support clock: a timeline from today to each end-of-support date, colored by year, with a month axis */
.clock .body { position:relative; padding:18px 0 4px; }
.clock .grid { position:absolute; left:150px; right:0; top:0; bottom:24px; }
.clock .tick { position:absolute; top:0; bottom:0; } .clock .tick i { position:absolute; top:18px; bottom:0; left:0; border-left:1px solid var(--grid); }
.clock .tick.year i { border-left:1.5px solid var(--axis); }
.clock .tick b { position:absolute; top:0; left:0; transform:translateX(-50%); font:400 11.5px/1 var(--sans); color:var(--muted); white-space:nowrap; }
.clock .tick.year b { font-weight:700; color:var(--text-primary); }
.clock .row { display:grid; grid-template-columns:150px 1fr; align-items:center; min-height:30px; position:relative; }
.clock .name { font:600 13.5px/1.3 var(--sans); padding:3px 12px 3px 0; }
.clock .track { position:relative; display:flex; align-items:center; align-self:stretch; border-left:2px solid var(--text-primary); }
.clock .bar { display:block; height:14px; border-radius:0 4px 4px 0; position:relative; }
.clock .bar .in { position:absolute; right:8px; top:0; line-height:14px; color:#fff; font-size:12px; white-space:nowrap; } .clock .bar .in b { color:#fff; }
.clock .v { margin-left:8px; font-size:12.5px; color:var(--text-secondary); white-space:nowrap; } .clock .v b { color:var(--text-primary); }
.clock .today { margin-left:150px; padding-top:6px; font:600 12px/1.2 var(--sans); }
.card.wide .clock .row { grid-template-columns:200px 1fr; } .card.wide .clock .grid { left:200px; } .card.wide .clock .today { margin-left:200px; }
.card .twin { display:grid; grid-template-columns:1fr 1fr; gap:8px 32px; } .card .twin .subhead { margin-top:4px; }
@media (max-width:700px) { .card .twin { grid-template-columns:1fr; } }
@media (max-width:520px) { .clock .row { grid-template-columns:104px 1fr; } .clock .grid { left:104px; } .clock .today { margin-left:104px; } .clock .name { font-size:12px; } }
details.table { margin-top:12px; font-size:13px; color:var(--text-secondary); }
details.table summary { cursor:pointer; } .tablewrap { overflow-x:auto; }
table { border-collapse:collapse; margin-top:8px; width:100%; font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:5px 8px; border-bottom:1px solid var(--grid); font-weight:400; white-space:nowrap; }
th { color:var(--muted); font-size:12.5px; } td.num, th.num { text-align:right; }
#tip { position:fixed; pointer-events:none; z-index:10; background:var(--surface-1); color:var(--text-primary); border:1px solid var(--border);
       box-shadow:0 6px 24px rgba(0,0,0,.16); border-radius:6px; padding:8px 11px; font-size:13px; display:none; max-width:260px; }
#tip b { display:block; font-size:16px; font-weight:650; } #tip span { color:var(--text-secondary); }
section.cta { background:var(--hero-bg); color:var(--hero-ink); padding:40px 0; margin-top:48px; }
section.cta h2 { font:800 26px/1.2 var(--sans); letter-spacing:-.01em; margin:0 0 10px; } section.cta p { color:var(--hero-sub); max-width:62ch; margin:0 0 20px; font-family:var(--serif); font-size:17px; }
.btn { display:inline-block; background:var(--orange); color:#fff; text-decoration:none; font-weight:650; padding:12px 22px; border-radius:6px; }
footer { padding:22px 0 40px; color:var(--muted); font-size:13.5px; border-top:1px solid var(--grid); margin-top:8px; }
@media print { header.hero, section.cta { -webkit-print-color-adjust:exact; print-color-adjust:exact; } details.table { display:none; } .card, .signal, .finding { break-inside:avoid; } }