/* ============================================================
   Godalming Weather — shared design system (mockup)
   Fraunces (display) + Public Sans (UI) · River-Wey green identity
   Light + dark themes via html[data-theme]
   ============================================================ */
:root{
  --ink:#16261f; --ink-soft:#42554c; --ink-faint:#7d8c84;
  --paper:#f4f1e9; --paper-2:#fbfaf5; --line:#e2ddd0; --line-soft:#ece7da;
  --river:#1f3d34; --river-bright:#2f6f5e; --gold:#e8b04b; --sky:#5d97c0;
  --safe:#2f8f63; --safe-bg:#e3f1e8; --warn:#c77b2c; --warn-bg:#f8ecda;
  --alert:#bd3b39; --alert-bg:#f7e0df;
  --card:#fbfaf5; --tile:#f4f1e9;
  --shadow:0 1px 0 rgba(22,38,31,.04), 0 18px 40px -24px rgba(22,38,31,.45);
  --radius:18px;
}
html[data-theme="dark"]{
  --ink:#eaf0ec; --ink-soft:#aebdb4; --ink-faint:#788a80;
  --paper:#0d1512; --paper-2:#13201b; --line:#26332c; --line-soft:#1d2823;
  --river:#5fc2a4; --river-bright:#7fd6bc; --gold:#f0c468; --sky:#7fb5d6;
  --safe:#56c08c; --safe-bg:#16302440; --warn:#e0a04c; --warn-bg:#3a2c1640;
  --alert:#e87470; --alert-bg:#3a1f1e60;
  --card:#13201b; --tile:#0f1a16;
  --shadow:0 1px 0 rgba(0,0,0,.2), 0 20px 44px -26px rgba(0,0,0,.8);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:"Public Sans",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.5;
  padding-bottom:70px;transition:background .4s,color .4s;
  background-image:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb,var(--sky) 18%, transparent), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.02'/%3E%3C/svg%3E");
}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:inherit}

/* ---- nav ---- */
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 0 16px;gap:16px;
  position:sticky;top:0;z-index:50;background:transparent;
  transition:padding .2s,background .2s,box-shadow .2s,border-color .2s;border-bottom:1px solid transparent}
nav.scrolled{background:color-mix(in srgb,var(--paper) 88%, transparent);backdrop-filter:blur(8px);
  padding-top:11px;padding-bottom:11px;border-bottom-color:var(--line);box-shadow:0 6px 20px -16px rgba(0,0,0,.45)}
.nav-burger{display:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);
  cursor:pointer;place-items:center;color:var(--ink-soft);flex:none;transition:.2s}
.nav-burger:hover{color:var(--river-bright);border-color:var(--river-bright)}
.nav-burger svg{width:20px;height:20px}
.brand{display:flex;align-items:baseline;gap:10px;font-family:"Fraunces",serif;text-decoration:none}
.brand b{font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.brand span{font-size:13px;color:var(--ink-faint);font-family:"Public Sans";letter-spacing:.04em;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-links{display:flex;gap:22px;font-size:14px;color:var(--ink-soft);font-weight:500}
.nav-links a{color:inherit;text-decoration:none;position:relative;padding-bottom:3px}
.nav-links a:hover{color:var(--river-bright)}
.nav-links a.active{color:var(--river-bright)}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);border-radius:2px}
.theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;
  display:grid;place-items:center;color:var(--ink-soft);transition:.2s;flex:none}
.theme-toggle:hover{color:var(--river-bright);border-color:var(--river-bright)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
html[data-theme="dark"] .theme-toggle .sun{display:none}
html[data-theme="dark"] .theme-toggle .moon{display:block}
@media(max-width:680px){
  .nav-links{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;gap:2px;
    background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:var(--shadow);z-index:60}
  nav.open .nav-links{display:flex}
  .nav-links a{padding:12px;border-radius:9px;font-size:15px;color:var(--ink)}
  .nav-links a:hover{background:var(--tile)}
  .nav-links a.active{background:var(--tile);color:var(--river-bright)}
  .nav-links a.active::after{display:none}
  .nav-burger{display:grid}
}

/* ---- live connection / staleness pill ---- */
.live-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.2s;white-space:nowrap;user-select:none}
.live-pill:hover{border-color:var(--river-bright)}
.live-pill b{font-weight:700}
.live-pill small{color:var(--ink-faint);font-weight:500}
.lp-label{display:inline-flex;align-items:baseline;gap:6px}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:none;position:relative}
.live-pill.live{border-color:color-mix(in srgb,var(--safe) 45%,var(--line))}
.live-pill.live b{color:var(--safe)} .live-pill.live .lp-dot{background:var(--safe)}
/* ping ring on each new MQTT packet */
@keyframes lp-ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.9);opacity:0}}
.lp-dot.ping::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--safe);animation:lp-ping .7s ease-out;pointer-events:none}
.live-pill.connecting b{color:var(--warn)} .live-pill.connecting .lp-dot{background:var(--warn);animation:blink 1s infinite}
.live-pill.stale{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.live-pill.stale b{color:var(--warn)} .live-pill.stale .lp-dot{background:var(--warn)}
.live-pill.offline{border-color:color-mix(in srgb,var(--alert) 45%,var(--line))}
.live-pill.offline b{color:var(--alert)} .live-pill.offline .lp-dot{background:var(--alert)}
@keyframes blink{50%{opacity:.25}}
@media(max-width:560px){.live-pill small{display:none}}

/* ---- pressure trend sub-line ---- */
.ptile .ptrend{font-size:11px;font-weight:700;margin-top:4px;color:var(--river-bright);letter-spacing:.01em}

/* ---- AQI + lightning compact sensor cards ---- */
.aqi-val{display:flex;align-items:baseline;gap:10px;margin:14px 0 2px}
.aqi-val .n{font-family:"Fraunces",serif;font-size:48px;font-weight:300;line-height:.9}
.aqi-cat{font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px;color:#fff;align-self:center}
.aqi-track{height:8px;border-radius:6px;margin:16px 0 8px;
  background:linear-gradient(90deg,#2f8f63 0 20%,#c9a227 20% 40%,#c77b2c 40% 60%,#bd3b39 60% 80%,#7d3a9e 80% 100%)}
.aqi-track .mk{position:relative;top:-3px;width:14px;height:14px;border-radius:50%;background:var(--card);border:3px solid var(--ink);transition:left .6s}
.aqi-sub{display:flex;gap:24px;margin-top:14px}
.aqi-sub .l{font-size:11px;color:var(--ink-faint);font-weight:600}
.aqi-sub .v{font-size:18px;font-weight:700;color:var(--ink-soft);margin-top:2px}
.bolt-wrap{display:flex;align-items:center;gap:16px;margin:14px 0 6px}
.bolt{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--tile);border:1px solid var(--line);color:var(--ink-faint)}
.bolt.active{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.bolt svg{width:26px;height:26px}
.bolt-txt .s{font-family:"Fraunces",serif;font-size:22px;color:var(--ink);font-weight:400}
.bolt-txt .d{font-size:13px;color:var(--ink-faint);margin-top:2px}

/* ---- cards ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:24px 24px 22px;position:relative;overflow:hidden;transition:background .4s,border-color .4s}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:12px}
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.card h3{font-family:"Fraunces",serif;font-weight:500;font-size:23px;letter-spacing:-.01em;margin-top:3px;color:var(--ink)}
.trend{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--safe);
  background:var(--safe-bg);padding:4px 11px;border-radius:999px;white-space:nowrap}
.trend.flat{color:var(--river-bright);background:color-mix(in srgb,var(--river-bright) 12%, transparent)}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid .span2{grid-column:1 / -1}
@media(max-width:760px){.grid{grid-template-columns:1fr}.grid .span2{grid-column:auto}}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;border-radius:26px;color:#fff;padding:38px 40px 34px;margin-bottom:26px;
  background:
    radial-gradient(140% 120% at 82% -10%, rgba(255,235,190,.95), rgba(232,176,75,.32) 22%, transparent 46%),
    linear-gradient(160deg,#bcdcec 0%, #8fc0db 34%, #5d97c0 70%, #3f6f93 100%);
  box-shadow:0 30px 60px -30px rgba(40,80,110,.6)}
/* weather-driven skies (override the base gradient) */
.hero[data-sky="clear-day"]{background:
  radial-gradient(150% 130% at 84% -16%, rgba(255,243,200,1), rgba(255,206,110,.55) 16%, transparent 42%),
  linear-gradient(165deg,#82bee6 0%, #6aa9da 42%, #5896c8 100%)}
.hero[data-sky="cloud-day"]{background:
  radial-gradient(150% 130% at 84% -14%, rgba(255,238,195,.8), rgba(232,176,75,.26) 20%, transparent 48%),
  linear-gradient(160deg,#bcdcec 0%, #9bbfd4 38%, #7ea7c2 72%, #6f93ab 100%)}
.hero[data-sky="overcast"]{background:linear-gradient(165deg,#9aa6ad 0%, #828f97 52%, #6f7d85 100%)}
.hero[data-sky="rain-day"]{background:linear-gradient(165deg,#71828f 0%, #566976 50%, #44535f 100%)}
.hero[data-sky="clear-night"]{background:
  radial-gradient(120% 100% at 78% 8%, rgba(170,195,255,.22), transparent 40%),
  linear-gradient(170deg,#1c2c52 0%, #15203c 46%, #0d1326 100%)}
.hero[data-sky="cloud-night"]{background:linear-gradient(170deg,#2a3441 0%, #1d2630 56%, #151b23 100%)}
.hero[data-sky="rain-night"]{background:linear-gradient(170deg,#222b34 0%, #182027 55%, #10151a 100%)}

/* sky effects layer */
.sky-fx{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;border-radius:inherit}
.sky-fx .s-sun{position:absolute;top:-26px;right:9%;width:96px;height:96px;border-radius:50%;
  background:radial-gradient(circle,#fff 30%,rgba(255,241,200,.85) 52%,transparent 72%);filter:blur(.5px)}
.sky-fx .s-moon{position:absolute;top:18px;right:12%;width:46px;height:46px;border-radius:50%;
  background:radial-gradient(circle at 62% 38%,#fbf6e9 60%,#cdd6e0 100%);box-shadow:0 0 26px 6px rgba(220,230,255,.25)}
.sky-fx .s-cloud{position:absolute;background:rgba(255,255,255,.6);border-radius:60px;filter:blur(7px);animation:drift linear infinite}
.sky-fx .s-cloud.dark{background:rgba(60,72,82,.5)}
.sky-fx .s-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:twinkle ease-in-out infinite}
.sky-fx .s-rain{position:absolute;inset:-25% -10%;
  background:repeating-linear-gradient(104deg, transparent 0 6px, rgba(255,255,255,.20) 6px 7px);
  animation:rainfall .55s linear infinite}
@keyframes drift{from{transform:translateX(-30%)}to{transform:translateX(130%)}}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
@keyframes rainfall{to{transform:translateY(26%)}}
@media(prefers-reduced-motion:reduce){.sky-fx .s-cloud,.sky-fx .s-star,.sky-fx .s-rain{animation:none}}

.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;
  background:
    radial-gradient(60% 120% at 20% 130%, var(--river) 60%, transparent 61%),
    radial-gradient(70% 130% at 62% 140%, #28503f 60%, transparent 61%),
    radial-gradient(60% 120% at 100% 135%, #1c3a2d 60%, transparent 61%);opacity:.92}
html[data-theme="dark"] .hero::after{
  background:
    radial-gradient(60% 120% at 20% 130%, #0c1f17 60%, transparent 61%),
    radial-gradient(70% 130% at 62% 140%, #0a1b13 60%, transparent 61%),
    radial-gradient(60% 120% at 100% 135%, #08160f 60%, transparent 61%)}
.hero>*{position:relative;z-index:2}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:14px}
.place{font-size:13px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;font-weight:600}
.summary{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(22px,3.4vw,33px);line-height:1.18;
  letter-spacing:-.015em;max-width:16ch;margin-top:6px;text-shadow:0 2px 18px rgba(20,40,60,.3)}
.summary em{font-style:italic;color:#fff8e8}
.hero-temp{display:flex;align-items:baseline;gap:6px;justify-content:flex-end}
.hero-temp .big{font-family:"Fraunces",serif;font-size:clamp(54px,9vw,86px);font-weight:300;line-height:.9;letter-spacing:-.03em}
.hero-temp .deg{font-size:30px;font-weight:300;opacity:.8;font-family:"Fraunces",serif}
.hero-hl{display:flex;gap:16px;justify-content:flex-end;margin-top:6px;font-size:14px;font-weight:600}
.hero-hl span{display:inline-flex;align-items:center;gap:5px}
.hero-hl .hl-h{color:#fff5e0}.hero-hl .hl-l{color:#dcefff}
.hero-hl small{opacity:.7;font-weight:500;font-size:11px}
.feels{font-size:13px;opacity:.85;text-align:right;margin-top:6px}
/* tile hi/lo (temp & wind) */
.phl{display:flex;gap:14px;margin-top:5px;font-size:11.5px;font-weight:700}
.phl span{display:inline-flex;align-items:center;gap:3px}
.phl .hi{color:var(--warn)}.phl .lo{color:var(--sky)}
.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.chip{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);padding:9px 14px;border-radius:999px;font-size:13.5px;font-weight:600;text-decoration:none;color:#fff}
.chip small{font-weight:500;opacity:.82}
.dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.18)}
.dot.g{background:#7ff0b0}.dot.a{background:#ffce7a}.dot.r{background:#ff9b8c}
/* Met Office severe-weather warning chip (hero) */
.warn-chip{border:0;font-weight:800;gap:8px;max-width:min(78vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.warn-chip .warn-ic{font-size:14px;flex:none}
.warn-chip.yellow{background:#f2c200;color:#231a00}
.warn-chip.amber{background:#e8821e;color:#fff}
.warn-chip.red{background:#d4351c;color:#fff;animation:pulse 1.8s infinite}
.warn-chip.warn{background:#e8b04b;color:#231a00}

/* Weather Warnings card */
.warnings-card{border-color:color-mix(in srgb,var(--warn) 38%,var(--line));margin-bottom:22px}
.warn-row{display:flex;align-items:stretch;width:100%;text-align:left;font:inherit;padding:0;cursor:pointer;background:var(--tile);border:1px solid var(--line);border-radius:13px;overflow:hidden;text-decoration:none;color:inherit;margin-top:10px;transition:border-color .15s}
.warn-row:first-of-type{margin-top:6px}
.warn-row:hover{border-color:var(--ink-faint)}
.warn-bar{width:6px;flex:none}
.warn-row.yellow .warn-bar{background:#f2c200}
.warn-row.amber .warn-bar{background:#e8821e}
.warn-row.red .warn-bar{background:#d4351c}
.warn-row.warn .warn-bar{background:#e8b04b}
.warn-main{flex:1;padding:12px 14px;min-width:0}
.warn-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.warn-head b{font-weight:700;color:var(--ink);font-size:14.5px}
.warn-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:6px;color:#231a00;flex:none}
.warn-badge.yellow{background:#f2c200}
.warn-badge.amber{background:#e8821e;color:#fff}
.warn-badge.red{background:#d4351c;color:#fff}
.warn-badge.warn{background:#e8b04b}
.warn-meta{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:6px;font-size:12px;color:var(--ink-faint);font-weight:600}
.warn-status{color:var(--alert);font-weight:700}
.warn-status.issued{color:var(--warn)}
.warn-go{display:grid;place-items:center;padding:0 14px;color:var(--ink-faint);flex:none;font-size:20px}

/* warning detail modal */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(8,14,11,.55);backdrop-filter:blur(3px);display:grid;place-items:center;padding:18px}
.modal-overlay[hidden]{display:none}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:22px;position:relative}
.modal-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--tile);color:var(--ink-soft);cursor:pointer;font-size:13px}
.modal-close:hover{color:var(--river-bright);border-color:var(--river-bright)}
.wm-head{display:flex;align-items:center;gap:10px;margin:0 40px 14px 0;flex-wrap:wrap}
.wm-head h3{font-family:"Fraunces",serif;font-weight:500;font-size:21px;color:var(--ink);line-height:1.2}
.wm-map{aspect-ratio:16/10;min-height:200px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--tile);position:relative;z-index:0}
.wm-mapna{display:grid;place-items:center;height:100%;color:var(--ink-faint);font-size:13px;font-weight:600}
.wm-when{font-size:13px;font-weight:600;color:var(--ink-soft);margin:14px 0 0}
.wm-status{color:var(--alert);font-weight:700}
.wm-status.issued{color:var(--warn)}
.wm-summary{font-size:14.5px;color:var(--ink);font-weight:600;margin:8px 0 2px;line-height:1.45}
.wm-sec{margin-top:15px}
.wm-sec h5{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:7px}
.wm-sec ul{margin:0;padding-left:18px}
.wm-sec li{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:5px}
.wm-sec p{font-size:13.5px;color:var(--ink-soft);line-height:1.55}

/* ---- current observations ---- */
.obs{margin-bottom:22px}
.obs-layout{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:center}
@media(max-width:760px){.obs-layout{grid-template-columns:1fr;gap:22px}}
.wind-col{display:flex;flex-direction:column;align-items:center;gap:12px}
.compass{position:relative;width:184px;height:184px;margin:0 auto;filter:drop-shadow(0 8px 18px rgba(22,38,31,.1))}
.compass svg{width:100%;height:100%}
.cc-val{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.cc-val b{font-family:"Fraunces",serif;font-size:30px;font-weight:400;color:var(--river-bright);line-height:1;letter-spacing:.02em}
.cc-val u{font-size:11px;color:var(--ink-faint);text-decoration:none;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-top:5px}
.cc-val em{font-style:normal;font-size:13.5px;color:var(--ink-soft);font-weight:600;margin-top:5px}
.obs-primary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
@media(max-width:560px){.obs-primary{grid-template-columns:repeat(2,1fr)}}
.ptile{background:var(--tile);border:1px solid var(--line);border-radius:13px;padding:13px 14px 10px;transition:border-color .2s,transform .2s;overflow:hidden}
.ptile:hover{border-color:color-mix(in srgb,var(--river-bright) 32%,var(--line));transform:translateY(-1px)}
.ptile .pl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.ptile .pn{font-family:"Fraunces",serif;font-size:27px;font-weight:300;color:var(--ink);line-height:1.1;margin-top:5px}
.ptile .pn small{font-size:14px;color:var(--ink-faint)}
.pspark{width:100%;height:26px;margin-top:8px;display:block;opacity:.9}

.obs-secondary{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;border-top:1px solid var(--line);padding-top:16px}
@media(max-width:460px){.obs-secondary{grid-template-columns:repeat(2,1fr)}}
.stile{display:flex;align-items:flex-start;gap:9px;padding:9px 8px;border-radius:10px;transition:background .2s}
.stile:hover{background:var(--tile)}
.stile .si{width:16px;height:16px;color:var(--ink-faint);flex:none;margin-top:2px}
.stile .sl{font-size:11px;color:var(--ink-faint);font-weight:600;line-height:1.2}
.stile .sv{font-size:16px;font-weight:600;color:var(--ink-soft);margin-top:2px;display:flex;align-items:center;flex-wrap:wrap}
.stile .sv b{color:var(--river-bright);font-weight:700}
.uvchip{display:inline-block;font-size:9.5px;font-weight:800;color:#fff;padding:1px 6px;border-radius:6px;margin-left:6px;letter-spacing:.02em;text-transform:uppercase}

.cond-chip{display:inline-flex;align-items:center;gap:8px;background:var(--tile);border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 8px;font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.cond-chip .fi{width:24px;height:24px}

/* ---- river card ---- */
.river-reading{display:flex;align-items:baseline;gap:10px;margin:14px 0 2px}
.river-reading .m{font-family:"Fraunces",serif;font-size:52px;font-weight:300;letter-spacing:-.02em;color:var(--river-bright)}
.river-reading .u{font-size:15px;color:var(--ink-faint);font-weight:500}
.state-band{display:flex;height:8px;border-radius:6px;overflow:hidden;margin:18px 0 8px;gap:3px}
.state-band span{flex:1;border-radius:3px;opacity:.3}
.state-band span.on{opacity:1}
.sb-normal{background:var(--safe)}.sb-high{background:var(--warn)}.sb-flood{background:var(--alert)}
.state-labels{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-faint);font-weight:600}
.spark{width:100%;height:64px;display:block}
.meta{font-size:12px;color:var(--ink-faint);margin-top:14px;display:flex;justify-content:space-between;gap:10px}

/* ---- storm overflow card ---- */
.so-status{display:flex;align-items:center;gap:14px;margin:16px 0 6px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:14px;font-weight:700;font-size:16px;letter-spacing:-.01em}
.pill.safe{background:var(--safe-bg);color:var(--safe)}
.pill.alert{background:var(--alert-bg);color:var(--alert)}
.pulse{width:11px;height:11px;border-radius:50%;background:currentColor;position:relative}
.pill.alert .pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(189,59,57,.5)}70%{box-shadow:0 0 0 10px rgba(189,59,57,0)}100%{box-shadow:0 0 0 0 rgba(189,59,57,0)}}
.so-sub{font-size:13px;color:var(--ink-soft)}
.timeline{margin:20px 0 6px}
.tl-head{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-bottom:7px}
.bars{display:flex;align-items:flex-end;gap:2px;height:46px}
.bars i{flex:1;background:var(--line);border-radius:2px;min-height:5px;transition:transform .15s;transform-origin:bottom}
.bars i.d{background:var(--warn)}.bars i.d.long{background:var(--alert)}
.bars i:hover{transform:scaleY(1.14)}
.so-stats{display:flex;gap:26px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);flex-wrap:wrap}
.stat .n{font-family:"Fraunces",serif;font-size:26px;font-weight:400;color:var(--river-bright);line-height:1}
.stat .l{font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-top:4px}
.link{margin-top:16px;font-size:13px;font-weight:600;color:var(--river-bright);text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.link:hover{color:var(--river)}
html[data-theme="dark"] .link:hover{color:#fff}

/* ---- forecast ---- */
.fc-tabs,.range{display:flex;gap:5px;background:var(--tile);border:1px solid var(--line);border-radius:11px;padding:4px}
.fc-tabs button,.range button{border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-faint);padding:7px 15px;border-radius:8px;cursor:pointer;transition:.15s}
.fc-tabs button.on{background:var(--card);color:var(--river-bright);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.range button.on{background:var(--river);color:#fff}
html[data-theme="dark"] .range button.on{color:#0d1512}
.fc-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:18px}
@media(max-width:760px){.fc-strip{grid-auto-flow:column;grid-auto-columns:90px;grid-template-columns:none;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}}
.fc-tile{text-align:center;padding:14px 8px;border-radius:13px;background:var(--tile);border:1px solid var(--line);scroll-snap-align:start}
.fc-tile.now{background:linear-gradient(165deg,color-mix(in srgb,var(--river-bright) 12%,var(--card)),var(--card));border-color:color-mix(in srgb,var(--river-bright) 30%,var(--line))}
.fc-tile .fd{font-size:12px;font-weight:700;color:var(--ink-soft)}
.fc-tile .fi{width:34px;height:34px;margin:8px auto 6px;display:block}
.fc-tile .ft{font-family:"Fraunces",serif;font-size:18px;color:var(--ink)}
.fc-tile .ft small{color:var(--ink-faint);font-size:14px}
.fc-tile .fr{font-size:11px;color:var(--sky);font-weight:700;margin-top:5px}
.attr{font-size:11.5px;color:var(--ink-faint);margin-top:14px}

/* ---- radar / forecast video media card ---- */
.media-frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--tile);margin-top:18px}
.media-frame iframe{display:block;width:100%;height:100%;border:0;position:absolute;inset:0}
.radar-frame{aspect-ratio:65/36}
.video-frame{aspect-ratio:16/9;max-width:760px;margin-left:auto;margin-right:auto}
.media-frame .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-faint);font-size:13px;font-weight:600;gap:8px;text-align:center;padding:20px}
.map-head-right{display:flex;align-items:center;gap:10px}
.map-cog{position:relative;flex:none}
.cog-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--tile);color:var(--ink-soft);cursor:pointer;display:grid;place-items:center;transition:.2s}
.cog-btn:hover,.cog-btn.open{color:var(--river-bright);border-color:var(--river-bright)}
.cog-btn svg{width:18px;height:18px}
.map-settings{position:absolute;right:0;top:46px;z-index:30;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:188px;max-height:min(72vh,470px);overflow:auto}
.nav-cog{position:relative;flex:none}
.theme-toggle.open{color:var(--river-bright);border-color:var(--river-bright)}
.grid.solo{grid-template-columns:1fr}
.settings-panel{min-width:230px}
.ms-sep{height:1px;background:var(--line);margin:8px}
.ms-install{display:block;width:calc(100% - 16px);margin:6px 8px 4px;padding:10px 12px;border-radius:9px;border:1px solid var(--river-bright);background:var(--river-bright);color:#fff;font-family:inherit;font-weight:700;font-size:13px;cursor:pointer;transition:.15s}
html[data-theme=dark] .ms-install{color:#0d1512}
.ms-install:hover{filter:brightness(1.06)}
.ms-install:disabled{opacity:.55;cursor:default;background:var(--tile);color:var(--ink-faint);border-color:var(--line);filter:none}
.ms-note{font-size:11.5px;color:var(--ink-faint);padding:2px 8px 8px;line-height:1.45}
.map-settings[hidden]{display:none}
.ms-title{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;padding:6px 8px 7px}
.ms-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer}
.ms-row:hover{background:var(--tile)}
.switch{position:relative;width:38px;height:22px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .slider{position:absolute;inset:0;background:var(--line);border-radius:999px;transition:.2s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch input:checked + .slider{background:var(--river-bright)}
.switch input:checked + .slider::before{transform:translateX(16px)}
.map-settings input[type=radio]{accent-color:var(--river-bright);width:16px;height:16px;cursor:pointer;margin:0;flex:none}

/* Gardening card */
.garden-head{display:flex;align-items:center;gap:14px;margin:14px 0 4px;flex-wrap:wrap}
.garden-note{font-size:13.5px;color:var(--ink-soft);font-weight:600}
.garden-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
@media(max-width:620px){.garden-grid{grid-template-columns:repeat(2,1fr)}}
.gtile{background:var(--tile);border:1px solid var(--line);border-radius:13px;padding:13px 14px}
.gtile .gl{font-size:10.5px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.gtile .gv{font-family:"Fraunces",serif;font-size:24px;font-weight:400;color:var(--ink);margin-top:4px;line-height:1}
.gtile .gn{font-size:11.5px;color:var(--ink-faint);margin-top:6px}
.moist-bar{height:7px;border-radius:5px;background:linear-gradient(90deg,#c77b2c,#c9a227 28%,#2f8f63 58%,#3a7bd5);margin:9px 0 2px;position:relative}
.moist-bar .mk{position:absolute;top:-3px;width:13px;height:13px;border-radius:50%;background:var(--card);border:3px solid var(--ink);transform:translateX(-50%)}
.sow{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.sow .sl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.sow-scale{height:10px;border-radius:6px;background:linear-gradient(90deg,#6aa9da,#2f8f63 40%,#e8b04b 72%,#c77b2c);margin:12px 0 6px;position:relative}
.sow-scale .mk{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--card);border:3px solid var(--ink);transform:translateX(-50%)}
.sow-ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink-faint);font-weight:600}
.sow-txt{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:8px}
.sow-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.crop{font-size:12px;font-weight:600;background:var(--card);border:1px solid var(--line);color:var(--ink-soft);padding:4px 10px;border-radius:999px}

/* Flight Conditions card */
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.flight-verdict{display:flex;align-items:center;gap:14px;margin:14px 0 4px;flex-wrap:wrap}
.flight-reason{font-size:13.5px;color:var(--ink-soft);font-weight:600}
.flight-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
@media(max-width:620px){.flight-checks{grid-template-columns:repeat(2,1fr)}}
@media(max-width:380px){.flight-checks{grid-template-columns:1fr}}
.fcheck{display:flex;gap:10px;align-items:flex-start;background:var(--tile);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.fcheck .fdot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none}
.fcheck .fdot.ok{background:var(--safe)}.fcheck .fdot.warn{background:var(--warn)}.fcheck .fdot.bad{background:var(--alert)}
.fcheck .fl{font-size:10.5px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.fcheck .fv{font-size:16px;font-weight:700;color:var(--ink);margin-top:2px;font-family:"Fraunces",serif;font-weight:500}
.fcheck .fn{font-size:11.5px;color:var(--ink-faint);margin-top:1px}

/* Aurora / Northern Lights strip (Sky Tonight) */
.aurora-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--tile);border:1px solid var(--line);border-radius:12px;padding:11px 14px;margin:2px 0 18px;font-size:13px}
.aurora-strip .au-dot{width:10px;height:10px;border-radius:50%;flex:none}
.aurora-strip b{font-weight:700;color:var(--ink)}
.aurora-strip .au-kp{font-weight:700;color:var(--ink-soft)}
.aurora-strip .au-chance{font-weight:700}
.aurora-strip .au-note{color:var(--ink-faint);font-weight:500}

/* Aircraft Overhead card */
.aircraft-frame{height:380px}
.aircraft-map{position:absolute;inset:0;width:100%;height:100%;background:#e6ebe3}
.aircraft-map .leaflet-container{background:#e6ebe3;font-family:inherit}
html[data-theme="dark"] .aircraft-map,
html[data-theme="dark"] .aircraft-map .leaflet-container{background:#0c1a14}
.ac-icon{background:none;border:0}
.ac-mk{width:22px;height:22px;transition:transform .8s ease;will-change:transform;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.ac-onground .ac-mk{opacity:.6}
.ac-home-dot{display:block;width:14px;height:14px;border-radius:50%;background:#e0413f;border:2px solid #fff;box-shadow:0 0 0 4px rgba(224,65,63,.25),0 1px 3px rgba(0,0,0,.5)}
.ac-tip{background:#16261f;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:7px;font-size:11.5px;line-height:1.4;padding:5px 8px;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.ac-tip::before{display:none}
.ac-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:11px;color:var(--ink-faint);font-weight:600}
.ac-legend span{display:inline-flex;align-items:center;gap:5px}
.ac-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.ac-dot.ac-hi{background:#3ea7ff}.ac-dot.ac-mid{background:#4cc38a}
.ac-dot.ac-lo{background:#e0726b}.ac-dot.ac-grd{background:#7c8a99}
.leaflet-container .leaflet-control-zoom a{background:#16261f;color:#fff;border-color:rgba(255,255,255,.12)}
.leaflet-container .leaflet-control-zoom a:hover{background:#1e3329}
/* selected-aircraft info panel (lower-left of the map) */
.ac-info{position:absolute;left:10px;bottom:10px;z-index:600;width:208px;max-width:calc(100% - 20px);
  background:rgba(13,26,20,.94);color:#fff;border:1px solid rgba(244,197,66,.45);border-radius:11px;
  padding:11px 13px 10px;box-shadow:0 8px 24px rgba(0,0,0,.5);backdrop-filter:blur(3px);font-family:inherit}
.ac-info .ac-x{position:absolute;top:6px;right:8px;background:none;border:0;color:rgba(255,255,255,.55);
  font-size:18px;line-height:1;cursor:pointer;padding:2px}
.ac-info .ac-x:hover{color:#fff}
.ac-cs{font-family:var(--font-display,inherit);font-size:18px;font-weight:700;letter-spacing:.01em;color:#f4c542}
.ac-co{font-size:11.5px;color:rgba(255,255,255,.7);margin-top:1px;text-transform:capitalize}
.ac-photo{display:block;position:relative;margin:9px 0 2px;border-radius:8px;overflow:hidden;line-height:0;background:rgba(255,255,255,.05)}
.ac-photo img{width:100%;height:116px;object-fit:cover;display:block}
.ac-photo-none{height:46px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);font-size:11px;line-height:1.4}
.ac-credit{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:9px;letter-spacing:.01em;padding:10px 7px 3px;line-height:1;text-align:right}
.ac-dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin:9px 0 7px}
.ac-dl div{min-width:0}
.ac-dl dt{font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5);font-weight:700}
.ac-dl dd{margin:1px 0 0;font-size:13px;font-weight:600}
.ac-id{font-size:9.5px;color:rgba(255,255,255,.4);letter-spacing:.02em;border-top:1px solid rgba(255,255,255,.1);padding-top:6px}

/* Sky Tonight card */
.sky-feat{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 20px}
@media(max-width:560px){.sky-feat{grid-template-columns:1fr}}
.sky-box{background:var(--tile);border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.sky-box.iss{background:linear-gradient(155deg, color-mix(in srgb,var(--sky) 16%, var(--card)), var(--card));border-color:color-mix(in srgb,var(--sky) 32%,var(--line))}
.sky-box .bl{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;display:flex;align-items:center;gap:7px}
.sky-box .bl svg{width:15px;height:15px;color:var(--gold)}
.sky-box.iss .bl svg{color:var(--sky)}
.sky-box .bv{font-family:"Fraunces",serif;font-size:23px;font-weight:400;color:var(--ink);margin-top:9px;line-height:1.15}
.sky-box .bv small{font-size:13px;color:var(--ink-faint);font-family:"Public Sans"}
.sky-box .bd{font-size:12.5px;color:var(--ink-soft);font-weight:600;margin-top:8px;display:flex;flex-wrap:wrap;gap:4px 14px}
.sky-cd{color:var(--river-bright);font-weight:700}
.planets{display:flex;flex-direction:column}
.planet-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line-soft)}
.planet-row:last-child{border-bottom:0}
.planet-dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--ink-faint)}
.planet-dot.up{background:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
.planet-name{font-family:"Fraunces",serif;font-size:17px;font-weight:500;color:var(--ink);width:84px;flex:none}
.planet-vis{font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-soft)}
.planet-times{margin-left:auto;font-size:12.5px;color:var(--ink-faint);font-weight:600;text-align:right;white-space:nowrap}
.planet-mag{font-size:11.5px;color:var(--ink-faint);width:52px;text-align:right;flex:none}
@media(max-width:480px){.planet-mag{display:none}.planet-vis{display:none}}

/* forecast footer: attribution + freshness */
.fc-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.fc-foot .attr{margin-top:0}
.fc-updated{font-size:11.5px;color:var(--ink-faint);font-weight:600;white-space:nowrap}

/* grouped forecast tabs */
.fc-groups{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fc-tabs .play{font-size:9px;color:var(--river-bright);vertical-align:middle;margin-right:1px}
.fc-tabs button.on .play{color:#fff}
html[data-theme=dark] .fc-tabs button.on .play{color:#0d1512}

/* Met Office surface pressure charts */
.fc-pressure{margin-top:18px}
.press-frame{background:var(--tile);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;justify-content:center;min-height:200px;align-items:center}
.press-frame img{width:100%;max-width:620px;height:auto;border-radius:8px;display:block;background:#fff}
.press-frame .ph{color:var(--ink-faint);font-size:13px;font-weight:600;text-align:center;padding:20px}
.press-steps{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:14px}
.press-steps button{border:1px solid var(--line);background:var(--card);color:var(--ink-soft);font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:9px;cursor:pointer;transition:.15s}
.press-steps button:hover{border-color:var(--river-bright);color:var(--river-bright)}
.press-steps button.on{background:var(--river);color:#fff;border-color:var(--river)}
html[data-theme=dark] .press-steps button.on{color:#0d1512}
@media(max-width:680px){
  /* stack tab controls beneath the card title at full width, wrapping so every tab is visible */
  .card-head{flex-wrap:wrap;gap:10px}
  .map-head-right{flex:1 1 100%;min-width:0;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
  .map-head-right > .fc-tabs,.map-head-right > .fc-groups{flex:1;min-width:0;flex-wrap:wrap}
  .map-cog{flex:none}
  .fc-tabs button,.range button{white-space:nowrap}
}

/* ---- almanac ---- */
.alm-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:6px}
@media(max-width:560px){.alm-grid{grid-template-columns:1fr}}
.alm-col h4{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:14px}
.moon-vis{width:50px;height:50px;border-radius:50%;background:#1b2a3a;position:relative;overflow:hidden;margin:0 auto 10px;box-shadow:inset -16px -2px 0 -2px #0a1118, 0 0 0 1px var(--line)}
.sun-arc{height:54px;margin:2px 0 12px}
.sun-arc svg{width:100%;height:100%;overflow:visible}
.alm-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.alm-row:last-child{border-bottom:0}
.alm-row span:first-child{color:var(--ink-faint);font-weight:500}
.alm-row span:last-child{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---- records ---- */
.rec-tabs{display:flex;gap:18px;border-bottom:1px solid var(--line);margin-bottom:2px;flex-wrap:wrap}
.rec-tabs button{border:0;background:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-faint);padding:0 0 10px;cursor:pointer;position:relative}
.rec-tabs button.on{color:var(--river-bright)}
.rec-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gold)}
.rec-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
@media(max-width:460px){.rec-grid{grid-template-columns:1fr}}
.rec-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.rec-row .rl{font-size:13px;color:var(--ink-soft);font-weight:500}
.rec-row .rv{font-family:"Fraunces",serif;font-size:20px;font-weight:400;color:var(--river-bright);text-align:right}
.rec-row .rt{font-size:11px;color:var(--ink-faint);display:block;font-family:"Public Sans"}

/* ---- footer ---- */
.site-footer{margin-top:36px;border-top:1px solid var(--line);padding-top:28px;color:var(--ink-soft)}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media(max-width:680px){.ft-top{grid-template-columns:1fr}}
.ft-brand b{font-family:"Fraunces",serif;font-size:19px;font-weight:600;color:var(--ink)}
.ft-brand p{font-size:13px;margin-top:8px;max-width:34ch;color:var(--ink-faint)}
.ft-col h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;margin-bottom:12px}
.ft-col a{display:block;color:var(--ink-soft);text-decoration:none;font-size:13.5px;padding:4px 0;font-weight:500}
.ft-col a:hover{color:var(--river-bright)}
.ft-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.ft-meta span{font-size:11.5px;background:var(--tile);border:1px solid var(--line);padding:4px 10px;border-radius:999px;color:var(--ink-faint);font-weight:600}
.ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-faint)}
.ft-bottom a{color:var(--river-bright);text-decoration:none;font-weight:600}

/* ---- page header (sub pages) ---- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:6px 0 24px}
.page-head h1{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(28px,4vw,36px);letter-spacing:-.02em;color:var(--ink)}
.page-head p{color:var(--ink-faint);font-size:14px;margin-top:2px}

/* ---- data freshness banner ---- */
.live-banner{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--ink-faint);
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 15px;width:fit-content;margin:0 auto 22px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--safe);animation:pulse 2s infinite}

/* ---- load animation ---- */
.reveal{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.22s}.d4{animation-delay:.3s}.d5{animation-delay:.38s}
@keyframes rise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1;transform:none}.pulse,.live-dot{animation:none}.lp-dot.ping::after{display:none}}

/* ---- polish pass: a11y focus, sticky records column, small-screen hero ---- */
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--river-bright);outline-offset:2px;border-radius:6px}
table.matrix td.metric,table.matrix thead th:first-child{position:sticky;left:0;background:var(--card);z-index:2}
table.matrix thead th:first-child{z-index:3}
@media(max-width:480px){
  .hero-top{flex-direction:column}
  .hero-temp,.hero-hl,.feels{justify-content:flex-start;text-align:left}
}
/* nav fits on phones: drop SURREY, tighten, smaller controls, live pill -> dot only */
@media(max-width:560px){
  .wrap{padding:0 14px}
  .nav-right{gap:8px}
  .brand span{display:none}
  .brand b{font-size:17px}
  .theme-toggle,.nav-burger{width:34px;height:34px}
  .live-pill{padding:8px;gap:0;position:relative}
  .live-pill .lp-dot{width:9px;height:9px}
  .live-pill .lp-label{display:none}
  .live-pill.expanded .lp-label{display:flex;position:absolute;top:44px;left:0;
    background:var(--card);border:1px solid var(--line);border-radius:10px;padding:7px 12px;
    box-shadow:var(--shadow);white-space:nowrap;z-index:70}
  .live-pill.expanded .lp-label small{display:inline}
}