/* ============================================================
   NWS TERMINAL — design system
   Pro dashboard: app shell, disciplined type scale, AA contrast.
   Legacy token names are ALIASED (not removed) so the ~770 inline
   styles in markup + JS template strings adopt the new palette.
   ============================================================ */

:root {
  /* ---- Surfaces (flat, no gradient) ---- */
  --bg-base:     #0B0E14;
  --bg-sidebar:  #080A0F;
  --bg-surface:  #12151C;
  --bg-raised:   #171B24;
  --bg-overlay:  #1C212C;

  /* ---- Borders ---- */
  --border-subtle:  #1E2531;
  --border-default: #2A3140;
  --border-strong:  #3A4356;

  /* ---- Text (all pass WCAG AA on every surface above) ---- */
  --text-1: #E6EAF2;   /* 14.9:1  headings, KPI values */
  --text-2: #A9B2C3;   /*  8.4:1  body, table cells    */
  --text-3: #7C8798;   /*  4.9:1  metadata, labels     */
  --text-4: #6B7686;   /*  3.6:1  large/UI text only   */

  /* ---- Accent ---- */
  --ac:        #2DD4BF;
  --ac-hi:     #5EEAD4;
  --ac-bg:     rgba(45,212,191,0.10);
  --ac-border: rgba(45,212,191,0.35);

  /* ---- Semantic (data-viz safe, all >=6:1) ---- */
  --pos:    #4ADE80;  --pos-bg:  rgba(74,222,128,0.10);
  --warn-c: #FBBF24;  --warn-bg: rgba(251,191,36,0.10);
  --neg:    #F87171;  --neg-bg:  rgba(248,113,113,0.10);
  --info:   #60A5FA;  --info-bg: rgba(96,165,250,0.10);
  --violet: #A78BFA;  --orange:  #FB923C;

  /* ---- Type ---- */
  --font-ui:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-micro:   11px;
  --fs-sm:      12px;
  --fs-base:    14px;
  --fs-md:      16px;
  --fs-lg:      20px;
  --fs-xl:      28px;
  --fs-display: 40px;

  /* ---- Spacing (4px base) ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* ---- Radius (two, plus pill) ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-full: 999px;

  /* ---- Elevation ---- */
  --sh1: 0 1px 2px rgba(0,0,0,.4);
  --sh2: 0 4px 12px rgba(0,0,0,.5);
  --sh3: 0 12px 32px rgba(0,0,0,.6);

  --sidebar-w: 232px;
  --topbar-h: 60px;

  /* ============================================================
     LEGACY ALIASES — every name the old markup/JS references.
     Redefining these re-themes ~770 inline styles for free.
     --text-soft and --font were referenced but NEVER DEFINED
     in the original (15 + 1 broken uses). Now they resolve.
     ============================================================ */
  --bg:            var(--bg-base);
  --surface:       var(--bg-surface);      /* was 97.5% transparent -> broke sticky headers */
  --border:        var(--border-default);
  --border-bright: var(--ac-border);
  --accent:        var(--ac);
  --accent-dim:    var(--ac-bg);
  --accent-glow:   rgba(45,212,191,0.06);
  --text:          var(--text-2);
  --text-bright:   var(--text-1);
  --text-dim:      var(--text-3);
  --text-muted:    var(--text-4);          /* was #4a5568 @ 2.51:1 — failed AA */
  --text-soft:     var(--text-2);          /* WAS UNDEFINED */
  --font:          var(--font-mono);       /* WAS UNDEFINED */
  --warn:          var(--warn-c);
  --err:           var(--neg);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background: var(--bg-base);          /* flat — was a 5-stop gradient */
  font-family: var(--font-ui);         /* was mono for EVERYTHING */
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-2);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* NOTE: `zoom: 1.22` deleted. Sizes are correct at source now. */
}

/* Mono is a DATA typeface: numbers, codes, timestamps, tables, raw API text. */
table, .metric-value, .gs-metric-value, .station-temp, .period-temp,
.climate-value, .normals-value, .aqi-value, .astro-time-value,
.afd-text, .spc-discuss-text, .radar-time, .station-id, .mono,
input, code, pre, .hourly-table, .obs-history-table, .model-raw-table {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { font-weight: 600; color: var(--text-1); line-height: 1.25; }
a { color: var(--ac); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

::selection { background: var(--ac-bg); color: var(--text-1); }

/* Focus: was `outline:none` on 3 inputs + accidental UA rings elsewhere */
:focus-visible {
  outline: 2px solid var(--ac-hi);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Scrollbars — one treatment, not 6 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 3px solid var(--bg-base); }
::-webkit-scrollbar-thumb:hover { background: #4A5568; }
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   APP SHELL
   ============================================================ */
.app { display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 60;
}

.brand {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s4) var(--s4) var(--s3);
  border-bottom: 1px solid var(--border-subtle);
}
.brand-mark {
  width: 28px; height: 28px; flex: none; border-radius: var(--r-sm);
  background: var(--ac-bg); border: 1px solid var(--ac-border);
  display: grid; place-items: center; color: var(--ac);
}
.brand-mark svg { width: 16px; height: 16px; }
.brand-text { min-width: 0; }
.brand-name {
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-1);
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.2;
}
.brand-sub {
  font-size: 12px; color: var(--text-3); font-family: var(--font-mono);
  letter-spacing: 0.04em; line-height: 1.4; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}

.nav { flex: 1; overflow-y: auto; padding: var(--s3) var(--s2) var(--s4); }
.nav-group { margin-bottom: var(--s4); }
.nav-group-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-4);
  padding: 0 var(--s2) var(--s2);
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px var(--s2); margin-bottom: 1px;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--text-3); font-size: 15px; font-weight: 500;
  text-align: left; cursor: pointer; position: relative;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--bg-raised); color: var(--text-1); }
.nav-item .ni { width: 16px; height: 16px; flex: none; opacity: .8; }
.nav-item .nl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item.active {
  background: var(--ac-bg); color: var(--ac); font-weight: 600;
}
/* active state is never conveyed by colour alone */
.nav-item.active::before {
  content: ''; position: absolute; left: -var(--s2); left: 0;
  top: 50%; transform: translateY(-50%);
  width: 2px; height: 18px; border-radius: 0 2px 2px 0; background: var(--ac);
}
.nav-item.active .ni { opacity: 1; }

.nav-badge {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-full); background: var(--warn-c); color: #000;
  font-size: 12px; font-weight: 700; font-family: var(--font-mono);
  display: grid; place-items: center; line-height: 1;
}

.sidebar-foot {
  border-top: 1px solid var(--border-subtle);
  padding: var(--s3) var(--s3) var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
}
.conn-dots { display: flex; gap: var(--s3); flex-wrap: wrap; }
.conn {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; font-family: var(--font-mono); letter-spacing: .06em;
  color: var(--text-4); text-transform: uppercase;
}
.conn i {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--border-strong); display: block;
}
.conn.on i { background: var(--pos); box-shadow: 0 0 6px rgba(74,222,128,.6); }
.conn.on { color: var(--text-3); }
.conn.err i { background: var(--neg); }

.settings-btn {
  display: flex; align-items: center; gap: var(--s2);
  width: 100%; padding: 7px var(--s2);
  background: transparent; border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm); color: var(--text-3);
  font-size: 14px; font-weight: 500; cursor: pointer;
  transition: all .12s ease;
}
.settings-btn:hover { background: var(--bg-raised); color: var(--text-1); border-color: var(--border-default); }
.settings-btn svg { width: 14px; height: 14px; }

/* ---- Main column ---- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--topbar-h);
  background: rgba(11,14,20,.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5);
  flex-wrap: wrap;
}

.search {
  flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center; gap: var(--s2);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  padding: 0 var(--s2) 0 var(--s3);
  height: 38px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.search:focus-within { border-color: var(--ac-border); box-shadow: 0 0 0 3px var(--ac-bg); }
.search svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.search input {
  flex: 1; min-width: 0;                 /* <- the fix for mobile overflow */
  background: transparent; border: 0; outline: none;
  color: var(--text-1); font-size: var(--fs-base);
  font-family: var(--font-mono);
}
.search input::placeholder { color: var(--text-4); font-family: var(--font-ui); }

.topbar-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }

.clock {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-3); white-space: nowrap;
  padding-left: var(--s3); border-left: 1px solid var(--border-subtle);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 var(--s4);
  background: var(--ac); border: 1px solid var(--ac);
  border-radius: var(--r-sm); color: #04211E;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 700;
  letter-spacing: .04em; cursor: pointer; white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:hover { background: var(--ac-hi); border-color: var(--ac-hi); }
.btn:disabled { opacity: .4; cursor: wait; }
.btn svg { width: 14px; height: 14px; }

.btn-ghost {
  background: transparent; border: 1px solid var(--border-default);
  color: var(--text-2); font-weight: 600;
}
.btn-ghost:hover { background: var(--bg-raised); border-color: var(--border-strong); color: var(--text-1); }

.btn-icon {
  width: 38px; height: 38px; padding: 0; flex: none;
  background: transparent; border: 1px solid var(--border-default);
  border-radius: var(--r-sm); color: var(--text-3);
  display: grid; place-items: center; cursor: pointer;
  transition: all .12s ease;
}
.btn-icon:hover { background: var(--bg-raised); color: var(--text-1); border-color: var(--border-strong); }
.btn-icon svg { width: 16px; height: 16px; }
.btn-icon.is-fav { color: var(--warn-c); border-color: rgba(251,191,36,.4); background: var(--warn-bg); }
.btn-fav { /* legacy alias */ }

/* ---- Content region ---- */
.content { flex: 1; padding: var(--s5); max-width: 1680px; width: 100%; }

/* ---- Location header ---- */
.loc-head {
  display: flex; align-items: flex-start; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: var(--s5);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--border-subtle);
}
.loc-title { flex: 1; min-width: 220px; }
.loc-name {
  font-size: var(--fs-lg); font-weight: 650; color: var(--text-1);
  letter-spacing: -0.01em; line-height: 1.2;
}
.loc-office {
  font-size: var(--fs-sm); color: var(--text-3);
  font-family: var(--font-mono); margin-top: 3px;
}
.loc-actions { display: flex; align-items: center; gap: var(--s2); flex: none; }

/* freshness chip — the original had ONE timestamp in 10px 2.5:1 grey */
.fresh {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px var(--s2); border-radius: var(--r-full);
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--text-3); letter-spacing: .03em; white-space: nowrap;
}
.fresh i { width: 5px; height: 5px; border-radius: 50%; background: var(--pos); flex: none; }
.fresh.stale i { background: var(--warn-c); }
.fresh.old i { background: var(--neg); }

/* ============================================================
   FAVORITES
   ============================================================ */
.favorites-bar { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.favorites-bar:empty { display: none; }
.fav-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-4); flex: none;
}
.fav-scroll {
  display: flex; gap: 6px; overflow-x: auto; min-width: 0;
  scrollbar-width: none; padding-bottom: 2px;
}
.fav-scroll::-webkit-scrollbar { display: none; }
.fav-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 28px; padding: 0 var(--s2) 0 10px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-full); color: var(--text-2);
  font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
  transition: all .12s ease;
}
.fav-btn:hover { background: var(--bg-raised); color: var(--text-1); border-color: var(--border-strong); }
/* was opacity:0 until :hover — invisible but TAPPABLE on touch = silent deletion */
.fav-btn .fav-remove {
  display: grid; place-items: center;
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  color: var(--text-4); font-size: 15px; line-height: 1;
  transition: all .12s ease;
}
.fav-btn .fav-remove:hover { background: var(--neg-bg); color: var(--neg); }
@media (hover: hover) {
  .fav-btn .fav-remove { opacity: .45; }
  .fav-btn:hover .fav-remove { opacity: 1; }
}

/* ============================================================
   SETTINGS DRAWER  (was 4 stacked API-key bars above the fold)
   ============================================================ */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 9400;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; z-index: 9401;
  width: min(440px, 100vw); height: 100vh; height: 100dvh;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-default);
  box-shadow: var(--sh3);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1);
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border-subtle);
}
.drawer-head h2 { font-size: var(--fs-md); }
.drawer-body { flex: 1; overflow-y: auto; padding: var(--s5); }
.drawer-note {
  font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6;
  margin-bottom: var(--s5); padding: var(--s3);
  background: var(--warn-bg); border: 1px solid rgba(251,191,36,.25);
  border-left: 2px solid var(--warn-c); border-radius: var(--r-sm);
}
.drawer-note b { color: var(--warn-c); font-weight: 600; }

.field { margin-bottom: var(--s5); }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: 6px; }
.field label {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-1);
  letter-spacing: .02em;
}
.field-hint { font-size: var(--fs-sm); color: var(--text-3); margin-bottom: var(--s2); line-height: 1.5; }
.field-hint a { color: var(--ac); }
.field-row { display: flex; gap: 6px; flex-wrap: wrap; }
.field input {
  flex: 1 1 200px; min-width: 0;
  height: 36px; padding: 0 10px;
  background: var(--bg-base); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); color: var(--text-1);
  font-family: var(--font-mono); font-size: var(--fs-sm); outline: none;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field input:focus { border-color: var(--ac-border); box-shadow: 0 0 0 3px var(--ac-bg); }
.field input::placeholder { color: var(--text-4); font-family: var(--font-ui); }
.field .btn, .field .btn-ghost { height: 36px; padding: 0 var(--s3); font-size: var(--fs-sm); }

/* legacy .gs-token-bar bits kept for JS status writes */
.gs-status {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; padding: 3px var(--s2);
  border-radius: var(--r-full); white-space: nowrap;
}
.gs-status.ok  { background: var(--pos-bg);  color: var(--pos);    border: 1px solid rgba(74,222,128,.3); }
.gs-status.err { background: var(--neg-bg);  color: var(--neg);    border: 1px solid rgba(248,113,113,.3); }
.gs-status.off { background: var(--bg-raised); color: var(--text-4); border: 1px solid var(--border-default); }

/* ============================================================
   SECTIONS / CARDS
   ============================================================ */
.section-panel { animation: none; }
.section-panel.entering { animation: fadeSlideIn .22s ease-out; }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

.section { margin-bottom: var(--s5); }
.section-label {
  display: flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: var(--s3); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--border-subtle);
}

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--s4);
  color: var(--text-2);
  font-size: var(--fs-base); line-height: 1.65;
}
/* no hover glow — elevation is for overlays only */

/* prose inside cards gets a real measure instead of 84–98 chars of mono */
.card p, .period-detail, .period-short { max-width: 72ch; }

/* ============================================================
   FORECAST PERIOD TABS
   ============================================================ */
.tab-row {
  display: flex; gap: 2px; overflow-x: auto;
  padding-bottom: 2px; margin-bottom: -1px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 32px), transparent 100%);
}
.tab-row::-webkit-scrollbar { display: none; }
.tab {
  flex: none; padding: 8px var(--s3);
  background: transparent; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  color: var(--text-3); font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap; cursor: pointer; transition: all .12s ease;
}
.tab:hover { background: var(--bg-raised); color: var(--text-1); }
.tab.active {
  background: var(--bg-surface); border-color: var(--border-default);
  color: var(--ac); font-weight: 600;
}
.tab-panel {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  padding: var(--s5); margin-bottom: var(--s5);
}

.period-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s3); }
.period-name { font-size: var(--fs-md); font-weight: 650; color: var(--text-1); }
.period-temp { font-size: var(--fs-xl); font-weight: 700; color: var(--text-1); letter-spacing: -0.02em; }
.period-short { font-size: var(--fs-base); color: var(--text-1); font-weight: 500; margin-bottom: var(--s2); }
.period-detail { font-size: var(--fs-base); color: var(--text-2); line-height: 1.7; }
.period-meta {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3);
  border-top: 1px solid var(--border-subtle); margin-top: var(--s4); padding-top: var(--s3);
}

/* ============================================================
   TABLES — one treatment for all of them
   ============================================================ */
table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
  text-align: left; padding: var(--s2) 10px;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}
td {
  font-size: var(--fs-sm); color: var(--text-2);
  padding: 7px 10px; border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--bg-raised); }

.hourly-scroll {
  overflow: auto; max-height: 560px;
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
  /* was `margin: 0 -22px` fighting an overridden card padding -> 22px overhang */
}
.hourly-table { min-width: 720px; }
.hourly-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-surface);   /* opaque — was rgba(...,0.025) so rows showed through */
}
.hourly-table .temp-cell { color: var(--text-1); font-weight: 600; }

.obs-history-wrap {
  max-height: 300px; overflow-y: auto;
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
}
.obs-history-table th { position: sticky; top: 0; z-index: 2; background: var(--bg-surface); }
.obs-history-table td { color: var(--text-2); font-size: var(--fs-sm); }

.model-raw-table th { position: sticky; top: 0; z-index: 2; background: var(--bg-surface); }
.model-raw-nav { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: var(--s2); }
.model-raw-nav button {
  padding: 5px 10px; background: transparent;
  border: 1px solid var(--border-default); border-radius: var(--r-sm);
  color: var(--text-3); font-size: var(--fs-sm); cursor: pointer;
}
.model-raw-nav button.active { background: var(--ac-bg); border-color: var(--ac-border); color: var(--ac); }

/* ============================================================
   METRIC TILES
   ============================================================ */
.gs-grid, .climate-grid, .normals-grid, .aqi-grid, .station-expand-grid, .hsm-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.gs-metric, .climate-item, .normals-item, .aqi-stat, .station-expand-item, .hsm-item {
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  padding: var(--s3);
  min-width: 0;
}
.gs-metric-label, .climate-label, .normals-label, .aqi-stat-label,
.station-expand-label, .hsm-item-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3);
  margin-bottom: 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.gs-metric-value, .climate-value, .normals-value, .aqi-stat-value,
.station-expand-value, .hsm-item-value {
  display: block;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-md); font-weight: 600; color: var(--text-1);
  letter-spacing: -0.01em; line-height: 1.25;
}
.gs-metric-sub, .climate-sub, .normals-sub, .aqi-stat-unit,
.station-expand-sub, .normals-departure {
  display: block; font-size: var(--fs-sm); color: var(--text-3); margin-top: 3px;
}
.normals-box {
  background: var(--bg-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm); padding: var(--s3); margin-top: var(--s4);
}
.normals-title, .climate-section-title {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3);
}
.normals-source, .source, .source-line, .afd-meta {
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3);
  margin-top: var(--s3);
}
.climate-section { margin-bottom: var(--s5); }
.climate-section:last-of-type { margin-bottom: 0; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert-box {
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  margin-bottom: var(--s3); background: var(--neg-bg);
  border: 1px solid rgba(248,113,113,.3); border-left: 3px solid var(--neg);
}
.alert-event { font-weight: 650; color: var(--neg); font-size: var(--fs-base); }

.alert-full {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); margin-bottom: var(--s2); overflow: hidden;
}
.alert-full-header {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); cursor: pointer;
  transition: background .12s ease;
}
.alert-full-header:hover { background: var(--bg-raised); }
.alert-full-title { flex: 1; font-weight: 600; color: var(--text-1); font-size: var(--fs-base); min-width: 0; }
.alert-full-header .sev-tag {
  flex: none; font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px var(--s2); border-radius: var(--r-full);
}
.sev-extreme  { background: rgba(251,113,133,.15); color: #FB7185; border: 1px solid rgba(251,113,133,.35); }
.sev-severe   { background: var(--neg-bg);         color: var(--neg);  border: 1px solid rgba(248,113,113,.35); }
.sev-moderate { background: var(--warn-bg);        color: var(--warn-c); border: 1px solid rgba(251,191,36,.35); }
.sev-minor    { background: var(--ac-bg);          color: var(--ac);   border: 1px solid var(--ac-border); }
.sev-unknown  { background: var(--bg-raised);      color: var(--text-3); border: 1px solid var(--border-default); }

.alert-chevron { flex: none; color: var(--text-3); transition: transform .18s ease; font-size: var(--fs-sm); }
.alert-chevron.open { transform: rotate(90deg); }
.alert-full-body { display: none; padding: 0 var(--s4) var(--s4); }
.alert-full-body.open { display: block; }
.alert-full-meta {
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3);
  padding: var(--s2) 0; border-top: 1px solid var(--border-subtle); margin-bottom: var(--s3);
}
.alert-full-desc {
  font-size: var(--fs-base); color: var(--text-2); line-height: 1.7;
  white-space: pre-wrap; max-width: 76ch;
}

/* ============================================================
   AFD / DISCUSSION TEXT
   ============================================================ */
.afd-text, .spc-discuss-text {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-2); line-height: 1.7; white-space: pre-wrap;
  max-height: 620px; overflow-y: auto;
  background: var(--bg-base); border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm); padding: var(--s4);
}

/* ============================================================
   SUB-NAVS  (CPC / SPC / satellite / models)
   ============================================================ */
.cpc-nav, .gs-sub-nav, .radar-controls {
  display: flex; gap: 2px; flex-wrap: wrap;
  margin-bottom: var(--s4);
  padding: var(--s1); background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
}
.cpc-nav-btn, .gs-sub-btn, .radar-controls button {
  padding: 6px var(--s3); min-height: 30px;
  background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--text-3); font-family: var(--font-ui);
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap; transition: all .12s ease;
}
.cpc-nav-btn:hover, .gs-sub-btn:hover, .radar-controls button:hover {
  background: var(--bg-raised); color: var(--text-1);
}
.cpc-nav-btn.active, .gs-sub-btn.active, .radar-controls button.active {
  background: var(--ac-bg); color: var(--ac); font-weight: 650;
  box-shadow: inset 0 0 0 1px var(--ac-border);
}
@media (pointer: coarse) {
  .cpc-nav-btn, .gs-sub-btn, .radar-controls button, .tab, .nav-item { min-height: 40px; }
}

.gs-refresh-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; background: transparent;
  border: 1px solid var(--border-default); border-radius: var(--r-sm);
  color: var(--text-3); font-size: var(--fs-sm); cursor: pointer;
  transition: all .12s ease;
}
.gs-refresh-btn:hover { background: var(--bg-raised); color: var(--ac); border-color: var(--ac-border); }

.spc-sub-label, .cpc-map-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 6px;
}

/* ============================================================
   IMAGE PANELS (CPC / SPC / satellite)
   ============================================================ */
.cpc-row {
  display: grid; gap: var(--s4); margin-bottom: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.cpc-map-wrap {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); padding: var(--s3); min-width: 0;
}
.cpc-map {
  width: 100%; height: auto; display: block;
  border-radius: var(--r-sm); background: var(--bg-base);
  cursor: zoom-in;                       /* was NO affordance at all */
  aspect-ratio: 22 / 17;                 /* reserves the box -> kills CLS */
  object-fit: contain;
  transition: opacity .12s ease;
}
.cpc-map:hover { opacity: .88; }
img[src*="nesdis"].cpc-map, #satStaticImg, #satLoopImg { aspect-ratio: 1 / 1; }
.cpc-err {
  display: grid; place-items: center; min-height: 140px;
  color: var(--text-4); font-size: var(--fs-sm);
  background: var(--bg-raised); border-radius: var(--r-sm);
}

.spc-discuss-toggle {
  display: flex; align-items: center; gap: var(--s2);
  padding: 10px var(--s3); cursor: pointer; user-select: none;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); margin-top: var(--s3);
  transition: background .12s ease;
}
.spc-discuss-toggle:hover { background: var(--bg-raised); }
.spc-discuss-toggle .spc-dt-label {
  font-size: var(--fs-sm); font-weight: 650; color: var(--text-2);
  letter-spacing: .04em; text-transform: uppercase;
}
.spc-discuss-toggle .spc-dt-chevron { color: var(--text-3); transition: transform .18s ease; }
.spc-discuss-toggle .spc-dt-chevron.open { transform: rotate(90deg); }
.spc-discuss-toggle .spc-dt-meta { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3); }
.spc-discuss-toggle.has-body { border-color: var(--ac-border); }
.spc-discuss-body { display: none; margin-top: var(--s2); }
.spc-discuss-body.open { display: block; }

/* Lightbox */
#spcLightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: none; place-items: center;
  background: rgba(0,0,0,.9); padding: var(--s5); cursor: zoom-out;
}
#spcLightbox.open { display: grid; }
#spcLightbox img { max-width: 96vw; max-height: 92vh; border-radius: var(--r-sm); }
#spcLightbox .lb-close {
  position: absolute; top: var(--s4); right: var(--s5);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  color: var(--text-2); font-size: var(--fs-lg); cursor: pointer;
  display: grid; place-items: center;
}
#spcLightbox .lb-close:hover { background: var(--bg-raised); color: var(--text-1); }

/* ============================================================
   RADAR / MAP
   ============================================================ */
#radarMap {
  height: clamp(360px, 55vh, 640px);
  border-radius: var(--r-md); border: 1px solid var(--border-default);
  background: var(--bg-surface); z-index: 1;
}
.radar-controls { margin-top: var(--s3); align-items: center; }
.radar-time {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text-2); margin-left: auto; padding-right: var(--s2);
}
.radar-legend { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: var(--fs-sm); color: var(--text-3); }
.radar-legend-bar { flex: 1; height: 6px; border-radius: var(--r-full); }

/* ============================================================
   REGIONAL STATIONS
   ============================================================ */
#regionalContainer { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.station-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); padding: var(--s4); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
  min-width: 0;
}
.station-card:hover { border-color: var(--border-strong); background: var(--bg-raised); }
.station-card.expanded { border-color: var(--ac-border); grid-column: 1 / -1; }
.station-name { font-size: var(--fs-base); font-weight: 600; color: var(--text-1); }
.station-id { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3); }
.station-temp {
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700;
  color: var(--text-1); letter-spacing: -0.02em;
}
.station-details { display: flex; gap: var(--s3); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s2); }
.station-dist { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3); }
.station-expand { display: none; margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-subtle); }
.station-card.expanded .station-expand { display: block; }
.station-click-hint { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s2); }
.station-trend, .trend-up, .trend-down, .trend-flat { font-family: var(--font-mono); font-size: var(--fs-sm); }
.trend-up { color: var(--neg); } .trend-down { color: var(--info); } .trend-flat { color: var(--text-3); }
.station-sparkline { margin-top: var(--s3); }
.station-sparkline canvas { width: 100%; height: 44px; display: block; }
.station-trend-row { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s2); }

/* ============================================================
   CHARTS
   ============================================================ */
.hourly-charts { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.chart-wrap {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); padding: var(--s4); min-width: 0;
}
.chart-label {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3);
}
.chart-canvas { width: 100% !important; height: 200px !important; }

/* ============================================================
   AQI / ASTRO
   ============================================================ */
.aqi-gauge { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s4); }
.aqi-value {
  font-family: var(--font-mono); font-size: var(--fs-display);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1;
}
.aqi-info { min-width: 0; }
.aqi-label-text { font-size: var(--fs-md); font-weight: 650; color: var(--text-1); }
.aqi-desc { font-size: var(--fs-base); color: var(--text-2); max-width: 60ch; }
.aqi-bar, .daylight-bar { height: 8px; border-radius: var(--r-full); position: relative; margin: var(--s4) 0; }
.aqi-marker, .daylight-now-marker {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-1); border: 2px solid var(--bg-base);
  box-shadow: var(--sh1);
}
.daylight-label { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3); }

.astro-grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.astro-card {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-md); padding: var(--s4); min-width: 0;
}
.astro-icon { font-size: var(--fs-lg); }
.astro-title { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3); }
.astro-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.astro-row:last-child { border-bottom: 0; }
.astro-time-label { font-size: var(--fs-sm); color: var(--text-3); }
.astro-time-value { font-family: var(--font-mono); font-size: var(--fs-base); font-weight: 600; color: var(--text-1); }
.moon-phase-name { font-size: var(--fs-md); font-weight: 650; color: var(--text-1); }
.moon-illumination { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3); }

/* ============================================================
   MODELS
   ============================================================ */
.gs-severe-window {
  background: var(--warn-bg); border: 1px solid rgba(251,191,36,.25);
  border-left: 2px solid var(--warn-c); border-radius: var(--r-sm);
  padding: var(--s2) var(--s3); margin-bottom: 6px;
}
.gs-severe-window .gs-sw-time { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--warn-c); font-weight: 600; }
.gs-severe-window .gs-sw-vals { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2); }
.gs-rtma-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px var(--s2); border-radius: var(--r-full);
  background: var(--ac-bg); border: 1px solid var(--ac-border);
  color: var(--ac); font-family: var(--font-mono);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
}

/* Sounding modal */
#hourSoundingModal {
  position: fixed; inset: 0; z-index: 9500;
  display: none; place-items: center;
  background: rgba(0,0,0,.75); padding: var(--s4);
  backdrop-filter: blur(3px);
}
#hourSoundingModal.open { display: grid; }
#hourSoundingModal .hsm-content {
  width: min(680px, 100%); max-height: min(86vh, 900px); overflow-y: auto;
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  border-radius: var(--r-md); box-shadow: var(--sh3); padding: var(--s5);
  position: relative;
}
#hourSoundingModal .hsm-close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--border-default);
  color: var(--text-3); cursor: pointer; display: grid; place-items: center;
}
#hourSoundingModal .hsm-close:hover { background: var(--bg-raised); color: var(--text-1); }

/* ============================================================
   STATES
   ============================================================ */
.loading { display: flex; align-items: center; gap: var(--s3); padding: var(--s7) var(--s4); }
.spinner {
  width: 18px; height: 18px; flex: none;
  border: 2px solid var(--border-default); border-top-color: var(--ac);
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { font-size: var(--fs-base); font-weight: 600; color: var(--text-1); }
.loading-sub { font-size: var(--fs-sm); color: var(--text-3); }

.error {
  display: flex; align-items: flex-start; gap: var(--s3);
  background: var(--neg-bg); border: 1px solid rgba(248,113,113,.3);
  border-left: 3px solid var(--neg); border-radius: var(--r-md);
  padding: var(--s4); color: var(--text-1); font-size: var(--fs-base);
  margin-bottom: var(--s4);
}
.error b { color: var(--neg); }

.empty { text-align: center; padding: var(--s8) var(--s4); max-width: 560px; margin: 0 auto; }
.empty-icon { color: var(--text-4); margin-bottom: var(--s4); }
.empty-icon svg { width: 44px; height: 44px; }
.empty-title { font-size: var(--fs-lg); font-weight: 650; color: var(--text-1); margin-bottom: var(--s2); }
.empty-sub { font-size: var(--fs-base); color: var(--text-3); line-height: 1.7; }  /* was #2d3748 @ 1.58:1 */

.skeleton {
  background: linear-gradient(90deg, var(--bg-raised) 25%, #1D222C 37%, var(--bg-raised) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================================================
   CHAT
   ============================================================ */
#chatFab {
  position: fixed; z-index: 9000;
  right: var(--s5); bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  width: 48px; height: 48px; border-radius: var(--r-full);
  background: var(--violet); border: 0; color: #17123B;
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--sh2); transition: transform .12s ease;
}
#chatFab:hover { transform: translateY(-2px); }
#chatFab svg { width: 20px; height: 20px; }

#chatPanel {
  position: fixed; z-index: 9001;
  right: var(--s5); bottom: calc(var(--s5) + 60px + env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - var(--s6)));
  height: min(560px, calc(100vh - 140px)); height: min(560px, calc(100dvh - 140px));
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  border-radius: var(--r-md); box-shadow: var(--sh3);
  display: flex; flex-direction: column; overflow: hidden;
}
#chatPanel.hidden { display: none !important; }
#chatHeader {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm); font-weight: 650; color: var(--text-1);
}
#chatMessages { flex: 1; overflow-y: auto; padding: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.chat-msg { font-size: var(--fs-sm); line-height: 1.65; padding: var(--s2) var(--s3); border-radius: var(--r-sm); max-width: 92%; }
.chat-user { align-self: flex-end; background: var(--ac-bg); border: 1px solid var(--ac-border); color: var(--text-1); }
.chat-ai { align-self: flex-start; background: var(--bg-raised); border: 1px solid var(--border-subtle); color: var(--text-2); }
.chat-ai b { color: var(--text-1); font-weight: 600; }
.chat-thinking { color: var(--text-3); font-style: italic; }
#chatInputRow { display: flex; gap: 6px; padding: var(--s3); border-top: 1px solid var(--border-subtle); }
#chatInput {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px;
  background: var(--bg-base); border: 1px solid var(--border-default);
  border-radius: var(--r-sm); color: var(--text-1); font-size: var(--fs-sm); outline: none;
}
#chatInput:focus { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(167,139,250,.12); }
#chatSendBtn {
  flex: none; height: 34px; padding: 0 var(--s3);
  background: var(--violet); border: 0; border-radius: var(--r-sm);
  color: #17123B; font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
#chatSendBtn:disabled { opacity: .4; cursor: default; }

#kalshiLiveDot { width: 8px; height: 8px; border-radius: 50%; background: var(--pos); display: inline-block; animation: livePulse 2s ease infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ============================================================
   MOBILE  (was 5 media queries at 3 inconsistent breakpoints)
   ============================================================ */
.mobile-nav-toggle { display: none; }

@media (max-width: 1100px) {
  :root { --sidebar-w: 64px; }
  .brand-text, .nav-group-label, .nav-item .nl, .settings-btn span, .conn span { display: none; }
  .brand { justify-content: center; padding: var(--s3) 0; }
  .nav { padding: var(--s2) 6px; }
  .nav-item { justify-content: center; padding: 10px 0; }
  .nav-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; font-size: 12px; }
  .sidebar-foot { padding: var(--s2) 6px var(--s3); align-items: center; }
  .conn-dots { justify-content: center; gap: 6px; }
  .settings-btn { justify-content: center; }
  .content { padding: var(--s4); }
}

@media (max-width: 720px) {
  :root { --sidebar-w: 0px; }
  .app { flex-direction: column; }
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh; width: 250px;
    flex-basis: 250px; transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1); z-index: 9300;
  }
  .sidebar.open { transform: none; box-shadow: var(--sh3); }
  .brand-text, .nav-group-label, .nav-item .nl, .settings-btn span, .conn span { display: revert; }
  .brand { justify-content: flex-start; padding: var(--s4) var(--s4) var(--s3); }
  .nav-item { justify-content: flex-start; padding: 9px var(--s2); }
  .nav-badge { position: static; }
  .sidebar-foot { padding: var(--s3) var(--s3) var(--s4); align-items: stretch; }
  .conn-dots { justify-content: flex-start; }
  .mobile-nav-toggle { display: grid; }

  .topbar { padding: var(--s2) var(--s3); gap: var(--s2); }
  .search { flex: 1 1 100%; order: 3; }
  .clock { display: none; }
  .content { padding: var(--s3); }

  .loc-head { margin-bottom: var(--s4); }
  .tab-panel { padding: var(--s4); }
  .cpc-row, .astro-grid, .hourly-charts, #regionalContainer { grid-template-columns: 1fr; }
  .gs-grid, .climate-grid, .normals-grid, .aqi-grid, .station-expand-grid, .hsm-grid {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--s2);
  }
  .aqi-value { font-size: var(--fs-xl); }
  .drawer { width: 100vw; }
  #chatPanel { right: var(--s3); left: var(--s3); width: auto; }
  #chatFab { right: var(--s3); }
}

/* Inline weather glyphs (replaced the emoji set) */
.wx { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -0.16em; flex: none; opacity: .9; }
.tab .wx { width: 14px; height: 14px; margin-right: 5px; opacity: .75; }
.tab.active .wx { opacity: 1; }
.period-name .wx { width: 20px; height: 20px; margin-right: 7px; color: var(--ac); }
.hourly-table .wx { width: 13px; height: 13px; margin-right: 4px; color: var(--text-3); }


/* ============================================================
   v2.1 additions
   ============================================================ */

/* iOS Safari zooms the page when a focused input is under 16px. */
@media (pointer: coarse) {
  input, select, textarea, #chatInput, .search input, .field input { font-size: 16px !important; }
}

/* Notch / home-indicator insets (viewport-fit=cover was set, only bottom used). */
.app { padding-right: env(safe-area-inset-right); }
.sidebar { padding-left: env(safe-area-inset-left); }
.topbar { padding-top: calc(var(--s3) + env(safe-area-inset-top)); }
.content { padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom)); }
.drawer { padding-top: env(safe-area-inset-top); }
@media (max-width: 720px) { .topbar { padding-top: calc(var(--s2) + env(safe-area-inset-top)); } }

/* Closed off-canvas panels leave the tab order / accessibility tree. */
.drawer { visibility: hidden; transition: transform .22s cubic-bezier(.4,0,.2,1), visibility 0s linear .22s; }
.drawer.open { visibility: visible; transition: transform .22s cubic-bezier(.4,0,.2,1), visibility 0s; }
@media (max-width: 720px) {
  .sidebar { visibility: hidden; transition: transform .22s cubic-bezier(.4,0,.2,1), visibility 0s linear .22s; }
  .sidebar.open { visibility: visible; transition: transform .22s cubic-bezier(.4,0,.2,1), visibility 0s; }
}

/* Visible keyboard focus everywhere. */
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

/* Favorite star: filled when saved (the SVG used to be replaced by a text ☆). */
.btn-icon.is-fav svg { fill: currentColor; }
#geoBtn.busy svg { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Favorites: chip with two sibling buttons (no nested interactive content). */
.fav-chip {
  display: inline-flex; align-items: center; flex: none; height: 28px;
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--r-full); overflow: hidden;
}
.fav-chip:hover { border-color: var(--border-strong); }
.fav-chip .fav-btn { border: 0; background: none; height: 100%; padding: 0 6px 0 10px; border-radius: 0; }
.fav-chip .fav-remove {
  display: grid; place-items: center; width: 26px; height: 100%;
  background: none; border: 0; color: var(--text-4); font-size: 16px; cursor: pointer;
}
.fav-chip .fav-remove:hover, .fav-chip .fav-remove:focus-visible { background: var(--neg-bg); color: var(--neg); }

/* Empty state */
.empty-actions { margin-top: var(--s5); display: flex; justify-content: center; }
.empty-actions .btn { display: inline-flex; align-items: center; gap: 8px; }
.empty-actions svg { width: 16px; height: 16px; }
.empty-recents { margin-top: var(--s5); display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.empty-recents-label { width: 100%; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); margin-bottom: 2px; }
.chip {
  height: 32px; padding: 0 14px; border-radius: var(--r-full);
  background: var(--bg-surface); border: 1px solid var(--border-default);
  color: var(--text-2); font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.chip:hover { background: var(--bg-raised); color: var(--text-1); border-color: var(--border-strong); }

/* Freshness chip while a soft refresh runs */
.fresh.refreshing i { background: var(--ac); animation: livePulse .9s ease infinite; }

/* Alerts: banner is a button that opens the full text */
.alert-box-btn {
  display: block; width: 100%; text-align: left; font: inherit; color: var(--text-2);
  cursor: pointer; line-height: 1.5;
}
.alert-box-btn:hover { filter: brightness(1.15); }
.alert-box.sevb-moderate { background: var(--warn-bg); border-color: rgba(251,191,36,.3); border-left-color: var(--warn-c); }
.alert-box.sevb-moderate .alert-event { color: var(--warn-c); }
.alert-box.sevb-minor, .alert-box.sevb-unknown { background: var(--ac-bg); border-color: var(--ac-border); border-left-color: var(--ac); }
.alert-box.sevb-minor .alert-event, .alert-box.sevb-unknown .alert-event { color: var(--ac); }
.alert-exp { color: var(--text-3); font-size: var(--fs-sm); }
button.alert-full-header {
  width: 100%; background: none; border: 0; font: inherit; color: inherit; text-align: left;
  justify-content: space-between;
}
.nav-badge.sev-hot { background: var(--neg); color: #fff; }

.expand-toggle, .btn-link {
  background: none; border: 0; font: inherit; cursor: pointer; color: var(--text-3);
}
.expand-toggle { display: block; margin: 6px auto 0; font-size: 13px; letter-spacing: 1px; padding: 6px 10px; }
.expand-toggle:hover { color: var(--text-1); }
.btn-link { color: var(--ac); padding: 0; text-decoration: underline; text-underline-offset: 2px; }

/* 7-day strip */
.week-strip { padding: 6px var(--s3); display: flex; flex-direction: column; }
.wk-day {
  display: grid; grid-template-columns: 64px 26px 40px 40px minmax(60px, 1fr) 40px;
  align-items: center; gap: 10px; width: 100%;
  padding: 9px 4px; background: none; border: 0; border-bottom: 1px solid var(--border-subtle);
  color: var(--text-2); font: inherit; font-size: var(--fs-base); text-align: left; cursor: pointer;
}
.wk-day:last-child { border-bottom: 0; }
.wk-day:hover { background: var(--bg-raised); }
.wk-name { font-weight: 600; color: var(--text-1); }
.wk-icon .wx { width: 20px; height: 20px; color: var(--ac); }
.wk-pop { font-family: var(--font-mono); font-size: 13px; color: var(--info); }
.wk-lo, .wk-hi { font-family: var(--font-mono); text-align: right; }
.wk-lo { color: var(--text-3); }
.wk-hi { color: var(--text-1); font-weight: 600; text-align: left; }
.wk-bar { position: relative; height: 5px; border-radius: 3px; background: var(--bg-raised); }
.wk-bar i {
  position: absolute; top: 0; bottom: 0; border-radius: 3px;
  background: linear-gradient(90deg, var(--info), var(--ac), var(--warn-c), var(--neg));
  background-size: 400% 100%; background-position: 50% 0;
}
@media (max-width: 480px) {
  .wk-day { grid-template-columns: 48px 22px 34px 34px minmax(40px, 1fr) 34px; gap: 6px; font-size: var(--fs-sm); }
}

/* Leaflet attribution: present (Esri/IEM terms) but quiet */
.leaflet-control-attribution {
  background: rgba(11,14,20,.7) !important; color: var(--text-4) !important;
  font-size: 12px !important; padding: 0 6px !important;
}
.leaflet-control-attribution a { color: var(--text-3) !important; }

/* Lightbox image was never in the markup */
#spcLightbox img { background: #fff; }

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

/* ============================================================
   v3 — HEADINGS, DATA AGE, STATES
   Section and card headings are sentence-case text; the small
   upper-case style is kept for data field labels only.
   ============================================================ */
:root {
  --sun: #F2B33D;            /* sun curve and daylight */
  --sun-fill: rgba(242,179,61,.16);
  --sky: 124,166,232;        /* one hue, stepped by opacity for light phases */
  --moon-lit: #D9DEE8;
  --moon-dark: #1D2330;
  /* US AQI categories, tuned for a dark surface; always paired with a label */
  --aq-good: #3DCB6C; --aq-mod: #F2C94C; --aq-usg: #F2994A;
  --aq-unh: #EB5757;  --aq-very: #A569BD; --aq-haz: #A3324B;
}

.section-label {
  font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.005em;
  text-transform: none; color: var(--text-1);
  gap: var(--s3); flex-wrap: wrap; align-items: baseline;
  padding-bottom: var(--s3);
}
.section-label .sec-age, .sec-age {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro);
  font-weight: 400; letter-spacing: .02em; color: var(--text-3); white-space: nowrap;
}
.sec-age:empty { display: none; }
.sec-age.is-stale { color: var(--warn-c); }
.sec-age.is-stale::before { content: 'Stale \00B7 '; }
.section-label .gs-refresh-btn { margin-left: var(--s2); }

.card-title, .viz-head h3 { font-size: var(--fs-base); font-weight: 600; color: var(--text-1); letter-spacing: 0; }
.card-title { margin-bottom: var(--s3); }

.cpc-map-label, .chart-label, .spc-sub-label {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
}

.state-err { color: var(--neg); border-color: rgba(248,113,113,.35); background: var(--neg-bg); }
.state-load { color: var(--text-3); text-align: center; padding: var(--s6) var(--s4); }
.is-loading { opacity: .5; transition: opacity .15s ease; }
.source-note { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s3); line-height: 1.6; max-width: 90ch; }

.btn-sm { height: 30px; padding: 0 var(--s3); font-size: var(--fs-sm); }
.chip-sm { height: 28px; padding: 0 var(--s3); }

/* ---- location header + conditions strip ---- */
.now-strip {
  display: flex; align-items: center; gap: var(--s2) var(--s5); flex-wrap: wrap;
  margin: calc(var(--s3) * -1) 0 var(--s5); padding: var(--s2) var(--s4);
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--text-2); min-height: 40px;
}
.now-strip:empty { display: none; }
#resultsEl[data-sec="forecast"] .now-strip { display: none; }
.ns-main { display: inline-flex; align-items: center; gap: var(--s2); color: var(--text-2); }
.ns-main b { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 700; color: var(--text-1); }
.ns-main .wx { width: 18px; height: 18px; color: var(--text-3); }
.ns-item { font-family: var(--font-mono); color: var(--text-1); white-space: nowrap; }
.ns-item i { font-style: normal; font-family: var(--font-ui); color: var(--text-3); margin-right: 6px; }
.ns-alert {
  margin-left: auto; height: 26px; padding: 0 var(--s3); border-radius: var(--r-full);
  background: transparent; border: 1px solid var(--border-default); color: var(--text-3);
  font: inherit; font-size: var(--fs-sm); cursor: pointer; white-space: nowrap;
}
.ns-alert:hover { border-color: var(--border-strong); color: var(--text-1); }
.ns-alert.has { background: var(--warn-bg); border-color: rgba(251,191,36,.4); color: var(--warn-c); font-weight: 600; }
.ns-alert.hot { background: var(--neg-bg); border-color: rgba(248,113,113,.45); color: var(--neg); }

.offline-bar {
  background: var(--neg-bg); border-bottom: 1px solid rgba(248,113,113,.35); color: var(--neg);
  font-size: var(--fs-sm); font-weight: 600; padding: var(--s2) var(--s5); text-align: center;
}

/* ---- current conditions ---- */
.obs-hero { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: var(--s5); align-items: center; }
.obs-temp { display: flex; align-items: center; gap: var(--s3); }
.obs-temp .wx { width: 44px; height: 44px; color: var(--text-3); flex: none; }
.obs-temp-val { font-family: var(--font-mono); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--text-1); }
.obs-temp-val sup { font-size: 22px; font-weight: 600; color: var(--text-3); margin-left: 2px; letter-spacing: 0; vertical-align: top; position: relative; top: 6px; }
.obs-desc { font-size: var(--fs-md); font-weight: 600; color: var(--text-1); margin-top: var(--s2); }
.obs-feels { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; }
.obs-meta { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--border-subtle); line-height: 1.6; }
.obs-meta b { color: var(--text-2); font-weight: 600; }
@media (max-width: 760px) { .obs-hero { grid-template-columns: 1fr; gap: var(--s4); } .obs-temp-val { font-size: 48px; } }

/* ---- stat tiles ---- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.obs-hero .stat-row { margin-bottom: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .obs-hero .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-md);
  padding: var(--s3) var(--s4); min-width: 0;
}
.obs-hero .stat { background: var(--bg-raised); border-color: var(--border-subtle); padding: var(--s3); }
.stat-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-lg); font-weight: 700; color: var(--text-1); margin-top: 2px; white-space: nowrap; }
.stat-unit { font-size: var(--fs-sm); font-weight: 500; color: var(--text-3); }
.stat-sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; line-height: 1.4; }

/* ---- charts drawn as SVG ---- */
.viz-card { padding: var(--s4); margin-bottom: var(--s4); }
.viz-head { display: flex; align-items: baseline; gap: var(--s2) var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); }
.viz-legend { display: flex; gap: var(--s2) var(--s4); flex-wrap: wrap; margin-left: auto; font-size: var(--fs-sm); color: var(--text-3); }
.viz-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.lp-sw, .aq-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border-strong); flex: none; }
.aq-sw { border: 0; border-radius: 50%; width: 10px; height: 10px; }
.viz { position: relative; }
.viz svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.viz-grid { stroke: var(--border-subtle); stroke-width: 1; }
.viz-zero { stroke: var(--border-strong); stroke-width: 1; }
.viz-tick { fill: var(--text-3); font-family: var(--font-mono); font-size: 13px; }
.viz-label { fill: var(--text-1); font-family: var(--font-ui); font-size: 14px; font-weight: 600; paint-order: stroke; stroke: var(--bg-surface); stroke-width: 4px; stroke-linejoin: round; }
.viz-now { stroke: var(--text-1); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.viz-cross { stroke: var(--text-2); stroke-width: 1; pointer-events: none; }
.viz-tip {
  display: none; position: absolute; top: 6px; z-index: 5; pointer-events: none;
  background: var(--bg-overlay); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  box-shadow: var(--sh2); padding: 6px 10px; font-size: var(--fs-sm); color: var(--text-2); white-space: nowrap;
}
.viz-tip b { display: block; color: var(--text-1); font-family: var(--font-mono); }
.viz-tip span { display: block; }

.lp-night { fill: rgba(var(--sky), 0);    background: var(--bg-base); }
.lp-astro { fill: rgba(var(--sky), .06);  background: rgba(var(--sky), .06); }
.lp-naut  { fill: rgba(var(--sky), .12);  background: rgba(var(--sky), .12); }
.lp-civil { fill: rgba(var(--sky), .20);  background: rgba(var(--sky), .20); }
.lp-day   { fill: rgba(var(--sky), .30);  background: rgba(var(--sky), .30); }
.yr-civil { fill: rgba(var(--sky), .16);  background: rgba(var(--sky), .16); }
.yr-day   { fill: rgba(var(--sky), .34);  background: rgba(var(--sky), .34); }
.sun-line { fill: none; stroke: var(--sun); stroke-width: 2; stroke-linejoin: round; }
.sun-area { fill: var(--sun-fill); }
.sun-ev   { fill: var(--bg-surface); stroke: var(--sun); stroke-width: 2; }
.sun-now  { fill: var(--sun); stroke: var(--bg-surface); stroke-width: 2.5; }

/* ---- sun & moon ---- */
.astro-cols, .aq-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s4); margin-bottom: var(--s4); align-items: start; }
.kv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.kv-table th, .kv-table td { padding: 9px 0; border-bottom: 1px solid var(--border-subtle); text-align: left; }
.kv-table thead th { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-top: 0; }
.kv-table thead th:not(:first-child), .kv-table td { text-align: right; width: 6.5em; }
.kv-table tbody th { font-family: var(--font-ui); font-weight: 500; color: var(--text-2); }
.kv-table td { color: var(--text-1); font-weight: 600; white-space: nowrap; }
.kv-table tbody tr:last-child th, .kv-table tbody tr:last-child td { border-bottom: 0; }
.kv-note { display: block; font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); }
.kv-table .kv-note { display: inline; margin-left: 6px; }
.kv-foot { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s3); line-height: 1.55; max-width: 80ch; }
.kv-list { display: grid; }
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-base); }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--text-2); }
.kv b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-1); text-align: right; }
.kv b em { font-style: normal; font-family: var(--font-ui); font-weight: 500; color: var(--text-2); margin-left: 4px; }
.kv b .aq-sw { margin-left: 6px; }
.unit { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 400; color: var(--text-3); }

.moon-hero { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s3); }
.moon-disc { flex: none; }
.moon-dark { fill: var(--moon-dark); }
.moon-lit { fill: var(--moon-lit); }
.moon-rim { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.moon-name { font-size: var(--fs-lg); font-weight: 600; color: var(--text-1); line-height: 1.2; }
.moon-illum { font-size: var(--fs-sm); color: var(--text-3); margin-top: 4px; }
.phase-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border-subtle); }
.phase-next { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.phase-next-name { font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); }
.phase-next-when { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }

/* ---- air quality ---- */
.aq-good { fill: var(--aq-good); background: var(--aq-good); }
.aq-mod  { fill: var(--aq-mod);  background: var(--aq-mod); }
.aq-usg  { fill: var(--aq-usg);  background: var(--aq-usg); }
.aq-unh  { fill: var(--aq-unh);  background: var(--aq-unh); }
.aq-very { fill: var(--aq-very); background: var(--aq-very); }
.aq-haz  { fill: var(--aq-haz);  background: var(--aq-haz); }
.viz rect.is-past { opacity: .45; }
.aqi-hero { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); gap: var(--s5); align-items: center; margin-bottom: var(--s4); }
@media (max-width: 760px) { .aqi-hero { grid-template-columns: 1fr; } }
.aqi-now { display: flex; align-items: center; gap: var(--s4); }
.aqi-num { font-family: var(--font-mono); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--text-1); }
.aqi-cat { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-md); font-weight: 600; color: var(--text-1); }
.aqi-advice { font-size: var(--fs-sm); color: var(--text-2); margin-top: 4px; max-width: 46ch; line-height: 1.5; }
.aqi-driver { font-size: var(--fs-sm); color: var(--text-3); margin-top: 4px; }
.aqi-scale-bar { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; height: 10px; }
.aqi-scale-bar i { border-radius: 2px; opacity: .85; }
.aqi-scale-bar i:first-child { border-radius: 5px 2px 2px 5px; } .aqi-scale-bar i:nth-child(6) { border-radius: 2px 5px 5px 2px; }
.aqi-pin { position: absolute; top: -5px; width: 4px; height: 20px; margin-left: -2px; border-radius: 2px; background: var(--text-1); box-shadow: 0 0 0 2px var(--bg-surface); }
.aqi-scale-ticks { position: relative; height: 16px; margin-top: 6px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }
.aqi-scale-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.aqi-scale-ticks span:first-child { transform: none; }
.aqi-scale-ticks span:last-child { transform: translateX(-100%); }
.pol-table { width: 100%; border-collapse: collapse; }
.pol-table th, .pol-table td { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); text-align: left; vertical-align: middle; }
.pol-table thead th { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding-top: 0; }
.pol-table tbody th { font-family: var(--font-ui); font-weight: 600; color: var(--text-1); }
.pol-table tbody tr:last-child th, .pol-table tbody tr:last-child td { border-bottom: 0; }
.pol-table .num, .data-table .num { text-align: right; white-space: nowrap; }
.pol-table td.num { color: var(--text-1); font-weight: 600; padding-left: var(--s3); }
.pol-bar-cell { width: 34%; padding-left: var(--s3) !important; }
.pol-bar { height: 6px; border-radius: 3px; background: var(--bg-raised); overflow: hidden; }
.pol-bar i { display: block; height: 100%; border-radius: 3px; }

/* ---- forecast discussion ---- */
.afd-bar { display: flex; align-items: center; gap: var(--s2) var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.afd-bar .afd-meta { margin: 0; flex: 1 1 260px; font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--text-3); }
.afd-tools { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.afd-tools select {
  height: 30px; padding: 0 var(--s2); max-width: 230px; border-radius: var(--r-sm);
  background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-2);
  font-family: var(--font-ui); font-size: var(--fs-sm);
}
.afd-tools a { font-size: var(--fs-sm); color: var(--ac); white-space: nowrap; }
.afd-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--s3); }
.afd-nav:empty { display: none; }
.afd-card { padding: var(--s2) var(--s5) var(--s5); }
.afd-sec { padding-top: var(--s5); scroll-margin-top: calc(var(--topbar-h) + var(--s4)); }
.afd-sec + .afd-sec { border-top: 1px solid var(--border-subtle); margin-top: var(--s5); }
.afd-sec h3 { font-size: var(--fs-md); font-weight: 600; color: var(--text-1); margin-bottom: var(--s3); }
.afd-sec p, .afd-sec li { font-size: 16px; line-height: 1.7; color: var(--text-2); max-width: 74ch; }
.afd-sec p + p, .afd-sec ul + p, .afd-sec p + ul { margin-top: var(--s3); }
.afd-sec ul { padding-left: 1.2em; }
.afd-sec li + li { margin-top: var(--s2); }
.afd-issued { font-family: var(--font-mono); font-size: var(--fs-sm) !important; color: var(--text-3) !important; }
.afd-key { background: var(--ac-bg); border: 1px solid var(--ac-border); border-radius: var(--r-md); padding: var(--s4); margin-top: var(--s4); }
.afd-key + .afd-sec { border-top: 0; }
.afd-key p, .afd-key li { color: var(--text-1); }
.afd-pre { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); white-space: pre; overflow-x: auto; margin: var(--s3) 0; }
.afd-sig { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--border-subtle); white-space: pre-wrap; }
pre.afd-text { margin: 0; max-height: none; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-md); padding: var(--s4); }

/* ---- tables ---- */
.table-card { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.data-table th, .data-table td { padding: 9px var(--s3); border-bottom: 1px solid var(--border-subtle); text-align: left; white-space: nowrap; }
.data-table thead th { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); background: var(--bg-raised); }
.data-table tbody th { font-family: var(--font-ui); font-weight: 600; color: var(--text-1); white-space: normal; min-width: 180px; }
.data-table td { color: var(--text-1); }
.data-table td.dim { color: var(--text-4); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover th, .data-table tbody tr:hover td { background: var(--bg-raised); }
.station-table-card { grid-column: 1 / -1; }

/* regional cards: name left, reading right */
.station-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); align-items: start; }
.station-card > .station-details, .station-card > .station-trend-row, .station-card > .station-click-hint, .station-card > .station-expand { grid-column: 1 / -1; }

/* ---- transport controls ---- */
.radar-controls button, .sat-controls button {
  display: inline-flex; align-items: center; gap: 6px;
}
.radar-controls button svg, .sat-controls button svg { width: 14px; height: 14px; flex: none; }
.sat-controls { display: flex; align-items: center; gap: 2px; padding: var(--s1) var(--s2); border-top: 1px solid var(--border-subtle); }
.sat-controls button {
  padding: 6px var(--s3); min-height: 30px; background: transparent; border: 0; border-radius: var(--r-sm);
  color: var(--text-3); font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
}
.sat-controls button:hover { background: var(--bg-raised); color: var(--text-1); }
.sat-controls button.active { color: var(--ac); }
.sat-controls .sat-info { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }
.panel-head { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border-subtle); }
.panel-head h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); }
.panel-head span { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); }
.sat-stage { text-align: center; background: var(--bg-base); min-height: 200px; display: flex; align-items: center; justify-content: center; position: relative; }

/* ---- sidebar health + status drawer ---- */
.health-btn {
  display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 34px; padding: 0 var(--s3);
  background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--r-sm);
  color: var(--text-3); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left;
}
.health-btn:hover { background: var(--bg-raised); color: var(--text-1); border-color: var(--border-default); }
.health-btn i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none; }
.health-btn.h-ok i { background: var(--pos); }
.health-btn.h-warn i { background: var(--warn-c); }
.health-btn.h-down i { background: var(--neg); }
.health-btn.h-warn, .health-btn.h-down { color: var(--text-1); }
.health-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-version { font-family: var(--font-mono); font-size: 12px; color: var(--text-4); text-align: center; }
@media (min-width: 721px) and (max-width: 1100px) { .health-text, .app-version { display: none; } .health-btn { justify-content: center; padding: 0; } }

.drawer h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); margin: var(--s5) 0 var(--s2); }
.drawer h3:first-child { margin-top: 0; }
.src-list, .log-list { list-style: none; }
.src-row { display: flex; align-items: flex-start; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.src-row:last-child { border-bottom: 0; }
.src-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--border-strong); flex: none; }
.s-ok .src-dot { background: var(--pos); } .s-warn .src-dot { background: var(--warn-c); } .s-down .src-dot { background: var(--neg); }
.src-main { flex: 1; min-width: 0; }
.src-name { font-size: var(--fs-base); font-weight: 600; color: var(--text-1); }
.src-what { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.4; }
.src-state { text-align: right; flex: none; max-width: 48%; }
.src-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }
.s-idle .src-label { color: var(--text-4); font-weight: 400; }
.s-warn .src-label { color: var(--warn-c); } .s-down .src-label { color: var(--neg); }
.src-detail { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); line-height: 1.5; overflow-wrap: anywhere; }
.log-list li { font-size: var(--fs-sm); color: var(--text-2); padding: 6px 0; border-bottom: 1px solid var(--border-subtle); overflow-wrap: anywhere; line-height: 1.45; }
.log-list time { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); margin-right: var(--s2); }
.log-list .log-empty { color: var(--text-3); border-bottom: 0; }

/* page footer */
.source { font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--text-3); line-height: 1.6; }
.source a { color: var(--text-2); }

@media print {
  .sidebar, .topbar, .loc-actions, #chatFab, #chatPanel, .now-strip, .cpc-nav, .afd-tools, .afd-nav { display: none !important; }
  body, .card, .stat { background: #fff !important; color: #000 !important; }
}

/* Row headers in the new tables are names, not field labels. */
.kv-table tbody th, .pol-table tbody th, .data-table tbody th { text-transform: none; letter-spacing: 0; font-size: var(--fs-base); }
.data-table tbody th { font-size: var(--fs-sm); }
.sun-area { fill: rgba(242,179,61,.22); }
.kv-table th + th, .kv-table td { padding-left: var(--s4); width: 1%; }
.viz svg { touch-action: pan-x pan-y; }
@media (max-width: 640px) {
  .viz { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .viz svg { min-width: 640px; }
  .kv-table .kv-note { display: block; margin-left: 0; }
  .afd-card { padding: var(--s1) var(--s4) var(--s4); }
}
.kv-table tbody th { white-space: normal; }
.kv-table .kv-note { display: block; margin-left: 0; }

button.cpc-retry { display: block; width: 100%; border: 0; background: transparent; cursor: pointer; font-family: var(--font-ui); font-size: var(--fs-sm); color: var(--text-3); }
button.cpc-retry:hover { color: var(--text-1); }

.panel-title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); letter-spacing: 0; margin-bottom: var(--s2); }
span.panel-title { margin-bottom: 0; }
.cpc-nav-btn, .gs-sub-btn { text-transform: none; }
.spc-discuss-toggle .spc-dt-label { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }

/* ════════════════════════════════════════════════════════════════════════
   v3.1 readability pass. Sizes of 15px and under are written as tokens so
   the build's type-scale step never touches this file twice.
   ════════════════════════════════════════════════════════════════════════ */
:root {
  --fs-micro:   13px;   /* was 11: labels, axis text, metadata */
  --fs-sm:      15px;   /* was 12: tables, secondary text      */
  --fs-base:    16px;   /* was 14: body                        */
  --fs-md:      19px;   /* was 16: section headings            */
  --fs-lg:      23px;   /* was 20                              */
  --fs-xl:      31px;   /* was 28                              */
  --fs-display: 46px;   /* was 40                              */
  --text-2: #C2CAD8;    /* 11.0:1 on the card surface (was 8.4) */
  --text-3: #9DA8BA;    /*  7.4:1 (was 4.9)                     */
  --text-4: #8893A6;    /*  5.8:1 (was 3.6)                     */
}
@media (min-width: 1101px) { :root { --sidebar-w: 260px; } }   /* the icon rail and phone drawer keep their own widths */
@media (max-width: 640px) {
  :root { --fs-micro: 12px; --fs-sm: 14px; --fs-base: 15px; --fs-md: 18px; --fs-lg: 21px; --fs-xl: 27px; --fs-display: 40px; }
}
body { line-height: 1.5; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* html already hides sideways overflow. Hiding it on body as well turned body into a
   scroll container of its own, which silently disabled every sticky element: the top
   bar and the sidebar scrolled away with the page. */
body { overflow-x: visible; }

/* tables: more air, labels no longer whisper */
th { padding: 11px var(--s3); letter-spacing: .05em; color: var(--text-3); }
td { padding: 10px var(--s3); }
.data-table th, .data-table td { padding: 11px var(--s3); }

.empty-key { text-align: center; padding: var(--s5); color: var(--text-2); font-size: var(--fs-base); }
.empty-key .btn-link { font-size: inherit; }

/* sidebar and top bar */
.nav-item { padding: 9px var(--s3); gap: var(--s3); color: var(--text-2); }
.nav-item .ni { width: 18px; height: 18px; }
.section-label { margin-bottom: var(--s4); }
.source-note, .source { line-height: 1.6; }

/* ── assistant ─────────────────────────────────────────────────────────── */
#chatFab { width: 56px; height: 56px; }
#chatFab svg { width: 24px; height: 24px; }
#chatPanel {
  width: min(520px, calc(100vw - var(--s6)));
  height: min(760px, calc(100vh - 132px)); height: min(760px, calc(100dvh - 132px));
  bottom: calc(var(--s5) + 68px + env(safe-area-inset-bottom));
}
#chatHeader { font-size: 17px; padding: var(--s4); gap: var(--s3); }
#chatHeader > svg { width: 20px; height: 20px; }
#chatHeader .btn-icon { width: 36px !important; height: 36px !important; }
#chatHeader .btn-icon svg { width: 18px; height: 18px; }
#chatMessages { padding: var(--s4); gap: var(--s4); }
.chat-msg { font-size: 17px; line-height: 1.6; padding: var(--s3) var(--s4); border-radius: var(--r-md); max-width: 94%; overflow-wrap: anywhere; }
.chat-ai { color: var(--text-1); }
.chat-msg p { margin: 0 0 .7em; max-width: none; }
.chat-msg ul, .chat-msg ol { margin: 0 0 .7em; padding-left: 1.35em; }
.chat-msg li { margin: .25em 0; }
.chat-msg > :last-child { margin-bottom: 0; }
.chat-msg code { font-family: var(--font-mono); background: rgba(255, 255, 255, .07); padding: 1px 5px; border-radius: 4px; }
#chatInput, #chatSendBtn { font-family: var(--font-ui); }
.chat-ai b { font-weight: 650; }
.chat-msg code, .chat-msg pre { font-size: 16px; }
.chat-thinking { color: var(--text-2); }
#chatInputRow { gap: var(--s2); padding: var(--s3) var(--s4) var(--s4); }
#chatInput { height: 48px; padding: 0 var(--s4); font-size: 17px; border-radius: var(--r-md); }
#chatInput::placeholder { color: var(--text-3); }
#chatSendBtn { height: 48px; padding: 0 var(--s5); font-size: 17px; border-radius: var(--r-md); }
@media (max-width: 640px) {
  #chatPanel { height: min(680px, calc(100dvh - 120px)); }
  .chat-msg, #chatInput, #chatSendBtn, #chatHeader { font-size: 16px; }
}

/* ── hourly: controls ──────────────────────────────────────────────────── */
.mg-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.mg-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-md); }
.mg-seg:empty { display: none; }
.mg-seg button {
  height: 40px; padding: 0 var(--s4); border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); white-space: nowrap;
}
.mg-seg button:hover { color: var(--text-1); }
.mg-seg button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text-1); box-shadow: inset 0 0 0 1px var(--border-default); }
.mg-seg button:focus-visible { outline: 2px solid var(--ac); outline-offset: 1px; }
.mg-hint { font-size: var(--fs-sm); color: var(--text-3); }

/* ── hourly: reading for the selected hour ─────────────────────────────── */
.mg-card { padding: var(--s5) var(--s5) var(--s4); margin-bottom: var(--s4); }
.mg-readout {
  display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: var(--s4) var(--s5); align-items: start;
  padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--border-subtle);
}
.mg-readout:empty { display: none; }
.mg-none { grid-column: 1 / -1; color: var(--text-2); font-size: var(--fs-base); }
.mg-when-day { font-size: var(--fs-sm); color: var(--text-3); }
.mg-when-time { font-size: 34px; font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; color: var(--text-1); font-variant-numeric: tabular-nums; }
.mg-sky { display: flex; align-items: center; gap: var(--s2); margin-top: 6px; font-size: var(--fs-base); color: var(--text-1); }
.mg-sky .mg-ico { width: 22px; height: 22px; flex: none; color: var(--text-2); }
.mg-notes { margin-top: 4px; min-height: 3em; font-size: var(--fs-micro); line-height: 1.5; color: var(--text-3); }
.mg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin: 0; }
.mg-stat dt { display: flex; align-items: center; gap: 7px; font-size: var(--fs-micro); color: var(--text-3); white-space: nowrap; }
.mg-stat dd {
  margin: 3px 0 0; display: flex; align-items: baseline; white-space: nowrap;
  font-family: var(--font-mono); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--text-1); font-variant-numeric: tabular-nums;
}
.mg-stat dd small { font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 500; color: var(--text-3); margin-left: 2px; }
.mg-stat dt .mg-arrow { width: 15px; height: 15px; margin-left: -2px; }
.mg-stat dt b { font-weight: 600; color: var(--text-1); }
.mg-key { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.mg-key-feels { background: none; height: 0; width: 12px; border-radius: 0; border-top: 2px dashed var(--text-2); }
.mg-arrow { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--text-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── hourly: chart ─────────────────────────────────────────────────────── */
.mg-chart { position: relative; min-height: 120px; }
.mg-svg { display: block; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; outline: none; }
.mg-svg:focus-visible { outline: 2px solid var(--ac); outline-offset: 4px; border-radius: 4px; }
.mg-svg text { font-family: var(--font-ui); font-size: var(--fs-micro); fill: var(--text-3); }
.mg-svg .mg-title, .mg-svg .mg-daylab { font-size: var(--fs-sm); font-weight: 600; fill: var(--text-1); }
.mg-svg .mg-unit { font-weight: 400; fill: var(--text-3); }
.mg-svg .mg-hour { fill: var(--text-2); font-variant-numeric: tabular-nums; }
.mg-svg .mg-tick { font-variant-numeric: tabular-nums; }
.mg-svg .mg-legend text { fill: var(--text-2); }
.mg-svg .mg-val, .mg-svg .mg-now-text, .mg-svg .mg-note {
  paint-order: stroke; stroke: var(--bg-surface); stroke-width: 4px; stroke-linejoin: round;
}
.mg-svg .mg-val { fill: var(--text-1); font-size: var(--fs-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.mg-svg .mg-now-text { fill: var(--text-1); font-weight: 600; }
.mg-svg .mg-empty { fill: var(--text-3); font-size: var(--fs-sm); }
.mg-svg .mg-amt-text { fill: var(--text-1); font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-ico { color: var(--text-2); overflow: visible; }
.mg-daylight { fill: rgba(255, 255, 255, .04); }
.mg-grid { stroke: var(--border-subtle); stroke-width: 1; }
.mg-vgrid { stroke: var(--border-subtle); stroke-width: 1; opacity: .55; }
.mg-base { stroke: var(--border-default); stroke-width: 1; }
.mg-sep { stroke: var(--text-4); stroke-width: 1; stroke-dasharray: 2 5; opacity: .6; }
.mg-freeze { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 6 5; }
.mg-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mg-temp { stroke-width: 2.5; }
.mg-feels { stroke: var(--text-2); stroke-dasharray: 2 5; }
.mg-gust { stroke-dasharray: 6 5; opacity: .85; }
.mg-area { opacity: .16; stroke: none; }
.mg-dot { stroke: var(--bg-surface); stroke-width: 2; }
.mg-popbar { opacity: .92; }
.mg-amt-liquid { fill: rgba(57, 135, 229, .30); }
.mg-amt-snow { fill: rgba(197, 206, 221, .26); }
.mg-amt-ice { fill: rgba(213, 81, 129, .30); }
.mg-arr { fill: none; stroke: var(--text-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mg-calm { fill: none; stroke: var(--text-3); stroke-width: 1.4; }
.mg-sky-bg { fill: rgba(255, 255, 255, .03); }
.mg-sky { fill: #C5CEDD; }
.mg-now { stroke: var(--text-1); stroke-width: 1; opacity: .5; }
.mg-cursor { pointer-events: none; }
.mg-cur-band { fill: rgba(255, 255, 255, .07); }
.mg-cur-line { stroke: var(--text-1); stroke-width: 1.25; }
.mg-cur-dot { stroke: var(--bg-surface); stroke-width: 2.5; }
.mg-cur-feels { fill: var(--text-2); }
.mg-cur-gust { fill: var(--bg-surface); stroke-width: 2; }
.mg-foot { margin-top: var(--s3); font-size: var(--fs-micro); line-height: 1.55; color: var(--text-3); max-width: 110ch; }
.mg-foot .btn-link { font-size: inherit; }
.mg-warn { color: var(--warn-c, #F2B33D); }

/* ── hourly: day summaries ─────────────────────────────────────────────── */
.mg-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.mg-days:empty { display: none; }
.mg-daycard { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--r-md); padding: var(--s4); min-width: 0; }
.mg-daycard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s2); }
.mg-daycard-head .mg-ico { width: 26px; height: 26px; flex: none; color: var(--text-2); }
.mg-daycard-name { font-size: var(--fs-base); font-weight: 650; color: var(--text-1); }
.mg-daycard-sub { font-size: var(--fs-micro); color: var(--text-3); }
.mg-hilo { display: flex; gap: var(--s5); margin: var(--s3) 0; }
.mg-hilo > div { display: grid; }
.mg-hilo-lab, .mg-hilo-at { font-size: var(--fs-micro); color: var(--text-3); }
.mg-hilo b { font-family: var(--font-mono); font-size: 28px; font-weight: 600; line-height: 1.15; color: var(--text-1); font-variant-numeric: tabular-nums; }
.mg-daycard-line { font-size: var(--fs-micro); line-height: 1.5; color: var(--text-2); }

/* ── hourly: table ─────────────────────────────────────────────────────── */
.mg-table-card { padding: 0; overflow: hidden; }
.mg-table-card .hourly-scroll { max-height: none; border: 0; border-radius: 0; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; }
.mg-table { min-width: 0; font-family: var(--font-ui); }
.mg-table th, .mg-table td { padding: 11px var(--s4); font-size: var(--fs-sm); }
.mg-table thead th { position: static; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .04em; color: var(--text-3); background: var(--bg-raised); }
.mg-table .n { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.mg-table thead .n { font-family: var(--font-ui); }
.mg-table td { color: var(--text-1); }
.mg-table td.dim, .mg-table td.dim .mg-pv { color: var(--text-4); }
.mg-table .temp-cell { font-size: var(--fs-base); font-weight: 650; }
.mg-table .mg-t { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-2); width: 1%; }
.mg-table .mg-dayrow th {
  text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: 650; color: var(--text-1);
  background: var(--bg-base); padding: var(--s3) var(--s4); border-top: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
}
.mg-table tbody tr:first-child.mg-dayrow th { border-top: 0; }
.mg-cond, .mg-w { white-space: nowrap; }
.mg-cond .mg-ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: var(--s2); color: var(--text-2); }
.mg-cond span { color: var(--text-2); }
.mg-w .mg-arrow { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.mg-p { white-space: nowrap; }
.mg-pbar { display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .07); vertical-align: 1px; margin-right: var(--s3); overflow: hidden; }
.mg-pbar i { display: block; height: 100%; background: #3987e5; border-radius: 4px; }
.mg-pv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* The reading stays in view while the lower panels are scrubbed. */
@media (min-width: 1001px) and (min-height: 700px) {
  .mg-readout {
    position: sticky; top: var(--mg-top, 62px); z-index: 5; background: var(--bg-surface);
    margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4); padding: var(--s5) var(--s5) var(--s4);
    border-radius: var(--r-md) var(--r-md) 0 0;
  }
}
.mg-table .h-s { display: none; }
.mg-table i.h-l { font-style: normal; }
@media (max-width: 1000px) {
  .mg-readout { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 640px) {
  .mg-card { padding: var(--s4) var(--s3) var(--s3); }
  .mg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
  .mg-stat dd { font-size: 21px; }
  .mg-when-time { font-size: 30px; }
  .mg-hint { display: none; }
  .mg-seg { width: 100%; }
  .mg-seg button { flex: 1; padding: 0 var(--s2); }
  .mg-table .c-opt { display: none; }
  .mg-pbar, .mg-cond span, .mg-cond-h span { display: none; }
  .mg-table .h-l { display: none; }
  .mg-table .h-s { display: inline; }
  .mg-table th, .mg-table td { padding: 10px var(--s2); }
  .mg-table thead th { letter-spacing: 0; }
  .mg-table td:first-child, .mg-table th:first-child { padding-left: var(--s3); }
  .mg-cond .mg-ico { margin-right: 0; }
  .mg-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   WINDY (v3.2.0): model maps and webcams
   ============================================================ */
.maps-opts, .cams-bar { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.maps-opts .cpc-nav, .cams-bar .cpc-nav, #mapsLayerNav { margin-bottom: 0; }
#mapsLayerNav { margin-bottom: var(--s2); }
.cpc-nav-btn:disabled { opacity: .38; cursor: not-allowed; }
.cpc-nav-btn:disabled:hover { background: transparent; color: var(--text-3); }

.maps-stage {
  position: relative; height: clamp(420px, 68vh, 860px);
  background: var(--bg-base); display: grid; place-items: center;
}
.maps-stage .maps-wait { position: absolute; inset: 0; display: grid; place-items: center; }
.maps-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
#mapsNote:not(:empty)::after { content: ' '; }
#mapsNote { color: var(--text-2); }

.cams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); }
.cam-card {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column;
}
.cam-shot {
  display: grid; place-items: center; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: var(--bg-base); aspect-ratio: 11 / 7; overflow: hidden;   /* Windy previews are 352x224 */
}
/* Windy's terms: never larger than the size served. max-width comes from the API per image. */
.cam-shot img { display: block; width: 100%; height: auto; max-width: 400px; }
.cam-shot:hover img { opacity: .88; }
.cam-shot:focus-visible { outline: 2px solid var(--ac); outline-offset: -2px; }
.cam-noimg { color: var(--text-4); font-size: var(--fs-sm); }
.cam-meta { padding: var(--s2) var(--s3) var(--s3); min-width: 0; }
.cam-title {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-1); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cam-sub { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-3); margin-top: 3px; }
.cam-sub.is-old { color: var(--warn-c); }
.cam-sub.is-old::before { content: 'Old \00B7 '; }

#camModal {
  position: fixed; inset: 0; z-index: 9500; display: none; place-items: center;
  background: rgba(0,0,0,.78); padding: var(--s4); backdrop-filter: blur(3px);
}
#camModal.open { display: grid; }
.cam-modal-content {
  width: min(920px, 100%); max-height: 94vh; overflow-y: auto;
  background: var(--bg-overlay); border: 1px solid var(--border-default);
  border-radius: var(--r-md); box-shadow: var(--sh3); padding: var(--s4);
}
.cam-modal-head { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.cam-modal-head h3 { flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: 600; color: var(--text-1); line-height: 1.4; }
#camModal .hsm-close {
  position: static; flex: none; width: 32px; height: 32px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid var(--border-default);
  color: var(--text-3); cursor: pointer; display: grid; place-items: center;
}
#camModal .hsm-close:hover { background: var(--bg-raised); color: var(--text-1); }
#camModalTabs { margin-bottom: var(--s3); }
.cam-player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--r-sm); overflow: hidden; }
.cam-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cam-modal-foot { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--text-3); }
.cam-modal-foot a, #section-maps .source-note a, #section-cams .source-note a { color: var(--ac); }

@media (pointer: coarse) { #camModal .hsm-close { width: 40px; height: 40px; } }
@media (max-width: 640px) {
  .maps-stage { height: clamp(380px, 62vh, 640px); }
  .cams-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s2); }
  .cam-modal-content { padding: var(--s3); }
}
@media print { .maps-stage, #camModal { display: none !important; } }