/* weathermaps.ai — the AI model desk of the Forecast Network.
 *
 * Network bones, football data display. The page is the network's: warm paper,
 * Overpass (loaded from the shared /assets/fonts.css), the guide-green sign and the
 * dashed section rule, so a reader arriving from Forecast Eagle or Forecast Euro
 * recognises where they are. The data is weather.football's: the slate grid, the
 * fixed-height KPI strip, the five-band chips and the scorebug tiles, so a number
 * reads the same way here as it does on a game board.
 *
 * The one identity colour is violet. Every other site in the network already owns a
 * green or a blue, none owns a violet, and the subject here is the class of model
 * that arrived from outside meteorology. It marks learned models and this site's own
 * controls; it never marks a physics model and it is never a status colour.
 *
 * Status colours (ok / late / failing) and the five DI/WFI band colours are values,
 * not decoration, and are identical in both themes.
 */

:root {
  color-scheme: light;
  --paper: #e8e5de;
  --paper2: #ddd8ce;
  --card: #ffffff;
  --card2: #f7f5f0;
  --ink: #15161a;
  --ink2: #47443d;
  --mut: #7c786f;
  --line: #c9c5bc;
  --line2: #e4e1d9;

  --sign: #04663d;            /* network guide green */
  --sign-dk: #013d26;
  --sign-tx: #ffffff;
  --sign-sub: #bdebcf;
  --blue: #0a5ca8;            /* network services blue: links */
  --navy: #103e7e;
  --ai: #4a3aa7;              /* this site: learned models, own controls */
  --ai-dk: #362a82;
  --ai-sub: #e6e2fb;
  --ai-tx: #ffffff;
  --flag: #f2ac14;

  --ok: #1f8a4c;    --ok-bg: #dff1e5;
  --late: #9a6600;  --late-bg: #fbefd2;
  --fail: #b8321a;  --fail-bg: #f8e0da;

  /* weather.football's five bands, shared network colour language */
  --b0: #2f9e57; --b1: #8cc63f; --b2: #ffcb05; --b3: #ee4d35; --b4: #c0271a;
  --none: var(--line);
  --warm: #b8431c; --cool: #1f63b0;   /* a forecast moving warmer / cooler */

  /* model series, fixed order, never cycled: AIFS, HRES, WeatherNext 2 */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a;

  --scr: #0c120f;             /* scorebug ground: dark in both themes */
  --scr-line: #26332c;
  --scr-tx: #e9efe9;
  --scr-mut: #9fb5a8;
  --scr-live: #7dffb0;

  --shadow: 0 4px 16px rgba(20, 20, 15, .07);
  --font: 'Overpass', 'Helvetica Neue', Arial, sans-serif;
  --mono-font: 'Overpass Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw: 1160px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1210;
  --paper2: #151916;
  --card: #1a1e1b;
  --card2: #151816;
  --ink: #ecebe5;
  --ink2: #bdbab0;
  --mut: #8f8c82;
  --line: #353b36;
  --line2: #252a26;
  --sign: #0b7447;
  --sign-dk: #06402a;
  --sign-sub: #9fdcb8;
  --blue: #6aaef0;
  --navy: #9cc7f2;
  --ai: #9d93ef;
  --ai-dk: #b5adf5;
  --ai-sub: #2a2551;
  --ai-tx: #120f26;
  --ok: #52c483;    --ok-bg: #15301f;
  --late: #e8ad3b;  --late-bg: #33290f;
  --fail: #f07259;  --fail-bg: #3a1a14;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70;
  --warm: #f08a5d; --cool: #7ab3f0;
  --shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font);
  font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3 { text-wrap: balance; }
.mono, .num { font-family: var(--mono-font); font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: 18px; }
.faint { color: var(--mut); }
.dim { color: var(--ink2); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--sign); color: #fff;
  padding: 9px 14px; z-index: 200; font-weight: 800; }
.skip:focus { left: 0; }

/* ── masthead: utility bar + site bar ──────────────────────────────────────── */
.util { background: var(--ink); color: #cfccc4; border-bottom: 3px solid var(--sign); }
:root[data-theme="dark"] .util { background: #070908; }
.util .bar { max-width: var(--maxw); margin: 0 auto; padding-inline: 18px; min-height: 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.util .mono { font-size: 10.5px; letter-spacing: .06em; }
.util .net { display: flex; gap: 14px; flex-wrap: wrap; }
.util a { color: #e9e7e0; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-decoration: none; }
.util a:hover { color: var(--sign-sub); }

.sitebar { background: var(--card); border-bottom: 1px solid var(--line); position: sticky;
  top: env(safe-area-inset-top, 0px); z-index: 50; }
.sitebar .bar { max-width: var(--maxw); margin: 0 auto; padding-inline: 18px;
  display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; min-height: 54px; }
.wm { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none;
  font-weight: 900; font-size: 21px; letter-spacing: -.02em; }
.wm:hover { text-decoration: none; }
.wm .dot { color: var(--ai); }
.wm .wm-shield { display: inline-grid; place-items: center; width: 30px; height: 32px;
  border-radius: 6px 6px 15px 15px; background: var(--ai); color: #fff; font-size: 12px;
  font-weight: 900; letter-spacing: .02em; box-shadow: inset 0 0 0 2px var(--ai), inset 0 0 0 3.5px #fff; }
.nav { display: flex; gap: 2px 4px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.nav a { display: block; padding: 6px 10px; border-radius: 7px; color: var(--ink2);
  font-size: 13.5px; font-weight: 800; text-decoration: none; }
.nav a:hover { background: var(--line2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--ai); border-radius: 7px 7px 0 0; }
.bar-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.theme-btn { font: inherit; font-size: 12px; font-weight: 800; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink2); border-radius: 99px; padding: 4px 11px; cursor: pointer; }
.theme-btn:hover { border-color: var(--ai); color: var(--ink); }

/* ── page header ──────────────────────────────────────────────────────────── */
.phero { padding-block: 30px 6px; display: grid; gap: 10px; }
.eyebrow { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.phero h1 { margin: 0; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.04; font-weight: 900; letter-spacing: -.025em; max-width: 22ch; }
.phero h1 em { font-style: normal; color: var(--ai); }
.lede { margin: 0; font-size: clamp(15.5px, 1.8vw, 18px); color: var(--ink2); max-width: 66ch; }

/* ── section header (football .sec) + network rule ────────────────────────── */
.sec { margin: 34px 0 12px; padding-left: 14px; border-left: 4px solid var(--sign); }
:root[data-theme="dark"] .sec { border-left-color: var(--sign-sub); }
.sec h2 { margin: 0; font-size: 20px; font-weight: 900; letter-spacing: -.015em; }
.sec p { margin: 3px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink2); max-width: 78ch; }
.sec .stamp { font-family: var(--mono-font); font-size: 11.5px; color: var(--mut); font-weight: 600; }

.prose { max-width: 70ch; display: grid; gap: 12px; color: var(--ink2); font-size: 15.5px; }
.prose p { margin: 0; }
.prose strong { color: var(--ink); }
.prose h3 { margin: 10px 0 0; color: var(--ink); font-size: 17px; font-weight: 900; }

/* ── KPI strip (football .hstrip, on paper) ───────────────────────────────── */
.hstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 16px; }
.hs { display: flex; flex-direction: column; gap: 2px; min-height: 96px; background: var(--card);
  border: 1px solid var(--line2); border-top: 3px solid var(--acc, var(--sign));
  border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
a.hs:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--line); border-top-color: var(--acc, var(--sign)); }
.hs-k { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.hs-v { font-family: var(--mono-font); font-variant-numeric: tabular-nums; font-size: 24px; font-weight: 700; line-height: 1.2; }
.hs-v small { font-size: 14px; color: var(--mut); font-weight: 600; }
.hs-s { font-size: 12px; font-weight: 600; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── status pills ─────────────────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
  border-radius: 99px; padding: 2px 9px 1px; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill-ok { background: var(--ok-bg); color: var(--ok); }
.pill-late { background: var(--late-bg); color: var(--late); }
.pill-failing { background: var(--fail-bg); color: var(--fail); }
.pill-run { background: var(--ai-sub); color: var(--ai); }
.pill-run::before { animation: wmpulse 1.6s ease-in-out infinite; }
.pill-exp { background: transparent; color: var(--late); border: 1px dashed currentColor; }
.pill-exp::before { display: none; }
.pill-watch, .pill-ready { background: var(--line2); color: var(--mut); }
.pill-watch::before, .pill-ready::before { background: transparent; border: 1.5px solid currentColor; }
@keyframes wmpulse { 50% { opacity: .3; } }

/* the family mark: a small square, violet learned, green physics */
.fam { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 1px; }
.fam-learned { background: var(--ai); }
.fam-physics { background: var(--sign); }
:root[data-theme="dark"] .fam-physics { background: var(--sign-sub); }

/* ── band chips (football .sg-chip). Named .band: the explorer owns .chip ─── */
.band { display: inline-block; min-width: 32px; text-align: center; border-radius: 6px; padding: 3px 6px 2px;
  font-family: var(--mono-font); font-weight: 800; font-size: 13px; color: #15161a; }
.band.b0 { background: var(--b0); color: #fff; } .band.b1 { background: var(--b1); }
.band.b2 { background: var(--b2); } .band.b3 { background: var(--b3); color: #fff; }
.band.b4 { background: var(--b4); color: #fff; }
.band.none { background: var(--line2); color: var(--mut); }

/* ── panels ───────────────────────────────────────────────────────────────── */
.box { background: var(--card); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.box-h { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--line2); }
.box-h h3 { margin: 0; font-size: 14px; font-weight: 900; }
.box-b { padding: 14px; }

/* segmented filter (football .sg-fs / .sg-f) */
.segf { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--card2); border: 1.5px solid var(--line); border-radius: 10px; padding: 3px; }
.segf button { font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .03em; padding: 4px 11px;
  border-radius: 7px; border: 0; background: transparent; color: var(--ink2); cursor: pointer; }
.segf button:hover { background: var(--line2); color: var(--ink); }
.segf button[aria-pressed="true"] { background: var(--ai); color: var(--ai-tx); }

/* ── the slate grid (football table.sg) ───────────────────────────────────── */
.sg-wrap { border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
table.sg { border-collapse: collapse; width: 100%; font-size: 13px; }
table.sg th { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 54px); z-index: 2; color: #fff;
  background: linear-gradient(180deg, var(--sign-dk), #08331b); font-size: 10px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; padding: 10px 8px; text-align: left; white-space: nowrap; }
table.sg thead tr th:first-child { border-top-left-radius: 11px; }
table.sg thead tr th:last-child { border-top-right-radius: 11px; }
table.sg th[data-sort] { cursor: pointer; user-select: none; }
table.sg th[data-sort]:hover { background: var(--sign); }
table.sg th[data-sort]::after { content: "⇅"; font-size: 10px; margin-left: 6px; opacity: .42; }
table.sg th[aria-sort="ascending"]::after { content: "▲"; font-size: 9px; opacity: 1; color: var(--flag); }
table.sg th[aria-sort="descending"]::after { content: "▼"; font-size: 9px; opacity: 1; color: var(--flag); }
table.sg td { padding: 8px; border-top: 1px solid var(--line2); white-space: nowrap; vertical-align: middle; }
table.sg .n { text-align: right; }
table.sg td.n { font-family: var(--mono-font); font-variant-numeric: tabular-nums; font-weight: 700; }
table.sg tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .022); }
:root[data-theme="dark"] table.sg tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
table.sg tbody tr:hover td { background: var(--line2); }
table.sg tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--ai); }
table.sg .m-name { font-weight: 900; font-size: 14px; color: var(--ink); text-decoration: none; }
table.sg a.m-name:hover { color: var(--ai); text-decoration: underline; }
table.sg .m-org { display: block; font-size: 11.5px; font-weight: 600; color: var(--mut); margin-left: 16px; }
table.sg td.wrap-ok { white-space: normal; min-width: 180px; }
table.sg .sub { display: block; font-size: 11px; font-weight: 600; color: var(--mut); font-family: var(--font); }
tr.is-hidden { display: none; }
/* the horizon meter: how far the newest run has got */
.hz { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--line2);
  vertical-align: middle; overflow: hidden; margin-left: 8px; }
.hz i { display: block; height: 100%; border-radius: 3px; background: var(--ai); }
.hz.final i { background: var(--ok); }
/* Columns retire in order of how little they tell you about the forecast itself. */
@media (max-width: 1000px) { table.sg .c-src { display: none; } }
@media (max-width: 860px)  { table.sg .c-grid { display: none; } }
@media (max-width: 720px)  { table.sg .c-fields { display: none; } table.sg td, table.sg th { white-space: normal; } }
@media (max-width: 560px)  { table.sg .c-run { display: none; } .hz { display: none; } }
@media (max-width: 420px)  { table.sg { font-size: 12px; } table.sg td, table.sg th { padding: 7px 5px; } }

/* ── runs on the wire (football .lnow scorebugs) ──────────────────────────── */
.wire { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 10px; }
.bug { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 10px; border-radius: 14px;
  color: var(--scr-tx); text-decoration: none; background: linear-gradient(165deg, #17211b 0%, #0d140f 55%, #0a0f0c 100%);
  border: 1px solid rgba(255, 255, 255, .10); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07);
  transition: transform .15s ease; }
a.bug:hover { transform: translateY(-2px); text-decoration: none; border-color: rgba(255, 255, 255, .22); }
.bug.final { opacity: .66; }
.bug.final:hover { opacity: 1; }
.bug-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bug-st { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.bug-in { background: linear-gradient(120deg, #6d5ce0, #4a3aa7); color: #fff; box-shadow: 0 2px 8px -2px rgba(109, 92, 224, .8); }
.bug-in::before { content: "● "; animation: wmpulse 1.6s ease-in-out infinite; }
.bug-fin { background: rgba(255, 255, 255, .13); color: var(--sign-sub); }
.bug-org { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--scr-mut); }
.bug-name { font-size: 16.5px; font-weight: 900; color: #fff; letter-spacing: -.01em; }
.bug-name small { font-family: var(--mono-font); font-size: 13px; font-weight: 700; color: var(--scr-live); margin-left: 6px; }
.bug-bar { height: 5px; border-radius: 3px; background: var(--scr-line); overflow: hidden; }
.bug-bar i { display: block; height: 100%; border-radius: 3px; background: var(--scr-live); }
.bug-meta { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono-font); font-size: 11.5px; color: #b9c9bf; }

/* ── directory (football .dir) ───────────────────────────────────────────── */
.dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 26px; }
.dir-g h3 { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); }
.dir-g a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 10px;
  margin: 0 -10px; border-radius: 9px; font-size: 14px; font-weight: 800; color: var(--ink); text-decoration: none; }
.dir-g a span { font-size: 11.5px; font-weight: 600; color: var(--mut); text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dir-g a:hover { background: var(--card); color: var(--ai); }

/* ── cards & claims ──────────────────────────────────────────────────────── */
.claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.claim { background: var(--card); border: 1px solid var(--line2); border-radius: 12px; padding: 14px 16px; display: grid; gap: 5px; align-content: start; }
.claim h3 { margin: 0; font-size: 15.5px; font-weight: 900; }
.claim p { margin: 0; font-size: 13.5px; color: var(--ink2); }

.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.mcard { background: var(--card); border: 1px solid var(--line2); border-left: 4px solid var(--fc, var(--sign));
  border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; scroll-margin-top: 80px; }
.mcard.learned { --fc: var(--ai); }
.mcard-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mcard h3 { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.mcard .org { font-size: 12px; font-weight: 700; color: var(--mut); }
.mfacts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0; font-size: 13px; }
.mfacts dt { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); padding-top: 2px; }
.mfacts dd { margin: 0; color: var(--ink); }
.mcard p { margin: 0; font-size: 13.5px; color: var(--ink2); }
.mcard .why { color: var(--ink); font-weight: 600; }
.verify { font-size: 11.5px; font-weight: 700; color: var(--late); }
.mcard .go { font-size: 13px; font-weight: 800; }

/* ── status page ─────────────────────────────────────────────────────────── */
.stbanner { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; border-radius: 14px; padding: 16px 20px;
  background: var(--card); border: 1px solid var(--line2); border-left: 6px solid var(--stc, var(--ok)); box-shadow: var(--shadow); }
.stbanner .lab { font-weight: 900; font-size: 22px; letter-spacing: -.01em; }
.stbanner .sub { font-weight: 600; font-size: 13.5px; color: var(--ink2); }
.stdot { width: 14px; height: 14px; border-radius: 50%; background: var(--stc, var(--ok)); box-shadow: 0 0 0 4px var(--card2); }
.st-ok { --stc: var(--ok); } .st-degraded { --stc: var(--late); } .st-failing { --stc: var(--fail); }
.stgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 12px; }
.stcard { background: var(--card); border: 1px solid var(--line2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 6px; }
.stcard b { font-size: 15px; }
.stcard .meta { font-family: var(--mono-font); font-size: 12px; color: var(--ink2); display: flex; justify-content: space-between; gap: 8px; }
.slobar { height: 8px; border-radius: 4px; background: var(--line2); overflow: hidden; }
.slobar i { display: block; height: 100%; background: var(--ok); }
.slobar.late i { background: var(--late); } .slobar.failing i { background: var(--fail); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer { border-top: 3px solid var(--sign); margin-top: 52px; padding-block: 22px 40px; background: var(--paper2);
  color: var(--ink2); font-size: 13px; }
.site-footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px 28px; }
.site-footer h4 { margin: 0 0 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); }
.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.site-footer a { color: var(--navy); font-weight: 700; }
.site-footer .fine { margin-top: 16px; font-size: 12px; color: var(--mut); max-width: 90ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* inline code in prose and ledes */
code { font-family: var(--mono-font); font-size: .86em; background: var(--line2); border-radius: 4px; padding: 1px 5px; }

/* On a phone the site bar wraps to two rows; pinned, it would sit over the
   board's sticky header, so below tablet it scrolls away and the header pins to 0. */
@media (max-width: 560px) {
  .util .net { display: none; }   /* the network links are in the footer too */
}
@media (max-width: 720px) {
  .sitebar { position: static; }
  table.sg th { top: env(safe-area-inset-top, 0px); }
}

/* ── search row (football .sg-bar / .sg-q) ─────────────────────────────────── */
.sg-bar { display: flex; flex-wrap: wrap; gap: 9px 12px; align-items: center; margin: 16px 0 10px; }
.sg-q { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; border-radius: 99px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink); min-width: 200px; flex: 1; max-width: 340px; }
.sg-q:focus { outline: none; border-color: var(--ai); }

/* ── city page ─────────────────────────────────────────────────────────────── */
.phero .eyebrow a { color: inherit; }
.city-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; margin-top: 16px; }
@media (max-width: 820px) { .city-top { grid-template-columns: 1fr; } }
.gauge-box { padding: 14px 16px; display: grid; gap: 6px; align-content: start; }
.gnum { font-family: var(--mono-font); font-variant-numeric: tabular-nums; font-size: 48px; font-weight: 700; line-height: 1; }
.gnum small { font-size: 14px; color: var(--mut); font-weight: 600; margin-left: 6px; }
.gbar { position: relative; height: 10px; border-radius: 5px; margin-top: 4px;
  background: linear-gradient(90deg, var(--b0), var(--b1) 30%, var(--b2) 50%, var(--b3) 72%, var(--b4)); }
.gtick { position: absolute; top: -4px; width: 4px; height: 18px; border-radius: 2px; background: var(--ink);
  box-shadow: 0 0 0 2px var(--card); transform: translateX(-50%); }
.gscale { display: flex; justify-content: space-between; font-family: var(--mono-font); font-size: 10.5px; color: var(--mut); }

.dstrip { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 4px; padding: 14px; }
@media (max-width: 560px) { .dstrip { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.dcell { display: grid; gap: 3px; justify-items: center; }
.dcell .band { min-width: 0; width: 100%; padding: 5px 0 4px; }
.dlab { font-family: var(--mono-font); font-size: 10.5px; color: var(--mut); }

.plume-box { padding: 12px 14px 8px; }
.lgd { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }
.lgd span { display: inline-flex; align-items: center; gap: 6px; }
.lgd i { display: inline-block; width: 16px; height: 3px; border-radius: 2px; }
.lgd i.dash { background: repeating-linear-gradient(90deg, var(--ink2) 0 4px, transparent 4px 7px) !important; }
.lgd i.bandkey { height: 10px; background: var(--line); }
.plume-wrap { position: relative; overflow-x: auto; }
svg.plume { display: block; width: 100%; min-width: 520px; height: auto; }
svg.plume .gl { stroke: var(--line2); stroke-width: 1; }
svg.plume .gv { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 2 4; }
svg.plume .ax { fill: var(--mut); font: 600 10.5px var(--mono-font); }
svg.plume .band { fill: var(--line); fill-opacity: .55; stroke: none; }
svg.plume .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.plume .ln.dash { stroke-dasharray: 5 4; stroke-width: 1.6; }
svg.plume .end { stroke: var(--card); stroke-width: 2; }
svg.plume .lab { fill: var(--ink2); font: 700 11px var(--font); }
svg.plume .xh { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 3 3; }
svg.plume .hit { fill: transparent; cursor: crosshair; }
.ptip { position: absolute; top: 18px; pointer-events: none; background: var(--ink); color: var(--paper);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; min-width: 150px; box-shadow: var(--shadow); display: grid; gap: 2px; }
.ptip .pt-h { font-weight: 800; margin-bottom: 2px; }
.ptip div { display: flex; justify-content: space-between; gap: 14px; }
.ptip .faint { color: inherit; opacity: .7; }

.fam-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
table.dtable td { white-space: nowrap; }
table.dtable .hi { font-weight: 800; color: var(--ink); }
table.dtable .lo { font-weight: 600; color: var(--mut); }
.chg { display: block; font-size: 11px; font-weight: 700; }
.chg.up { color: var(--warm); }
.chg.down { color: var(--cool); }
.chg.flat { color: var(--mut); }
.highs { display: inline-flex; gap: 10px; }
.highs span { white-space: nowrap; }

/* ── the Desk Note ─────────────────────────────────────────────────────────── */
.desk-note { margin-top: 16px; background: var(--card); border: 1px solid var(--line2); border-left: 4px solid var(--ai);
  border-radius: 12px; padding: 14px 18px; display: grid; gap: 8px; max-width: 900px; }
.desk-note h2 { margin: 0; font-size: 19px; font-weight: 900; letter-spacing: -.01em; }
.desk-note p { margin: 0; color: var(--ink2); font-size: 15px; max-width: 78ch; }
.dn-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--ai); }
.desk-note .dn-fine { font-size: 12px; color: var(--mut); }