/* TYPE AND SPACE SCALES: the only text sizes and padding steps on the site. Each size has one job.
   note = explanations and fine print; small = labels and captions; text2 = secondary text; body = reading text;
   lead = key figures; title = card headings; big = large figures; huge = the largest figures. Weights: 400 text, 600 emphasis, 700 headings. */
:root {
  --fs-note: .72rem;
  --fs-small: .82rem;
  --fs-text2: .92rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-title: 1.25rem;
  --fs-big: 1.5rem;
  --fs-huge: 2rem;
  --sp-1: .125rem;
  --sp-2: .25rem;
  --sp-3: .5rem;
  --sp-4: .75rem;
  --sp-5: 1rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  color-scheme: light;
  --bg: #f1ece0;
  --card: #faf6ec;
  --card-2: #ece5d6;          /* inset tiles inside a card */
  --text: #1f1d18;
  --text-2: #46423a;
  --muted: #655f53;           /* 4.5:1+ on both white cards and the tinted inner boxes */
  --line: #d6cdba;
  --accent: #2a78d6;
  --accent-soft: #e0e9f5;
  --warm: #eb6834;            /* chart: highs / temperature */
  --cool: #2a78d6;            /* chart: lows / rain */
  --extreme: #d03b3b;
  --severe: #e0492f;
  --moderate: #ec835a;
  --minor: #e0a800;
  --good: #0ca30c;
  --mid: #f0efec;             /* neutral midpoint for blue↔red (diverging) colors */
  /* Text-safe status colors: darker versions of the status fills so words stay readable (4.5:1+) */
  --t-good: #1b7a3d;
  --t-warn: #8a6400;
  --t-serious: #b04a14;
  --t-critical: #c0302f;
  --t-cool: #1d5fae;
  --radius: 18px;
  --shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #070f1d;
    --card: #0e1a2e;
    --card-2: #162540;
    --text: #e8edf5;
    --text-2: #c2ccda;
    --muted: #8fa0b8;
    --line: #22344f;
    --accent: #3987e5;
    --accent-soft: #15294a;
    --warm: #d95926;
    --cool: #3987e5;
    --mid: #383835;
    --t-good: #4fcf73;
    --t-warn: #f0c040;
    --t-serious: #f59a6b;
    --t-critical: #ff7b7b;
    --t-cool: #6aa8f0;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
a { color: var(--link); }
h2 { font-size: var(--fs-title); font-weight: 700; line-height: 1.25; margin: 0 0 .8rem; letter-spacing: -.015em; }
button, input { font: inherit; }
button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
}
button:hover { border-color: var(--accent); }
input {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
}
.muted { color: var(--muted); }
.small { font-size: var(--fs-text2); }

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: var(--sp-4) var(--sp-5);
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 10;
}
.brand { font-weight: 700; font-size: var(--fs-lead); white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; letter-spacing: -.01em; }
.brand-icon { width: 30px; height: 30px; border-radius: 8px; }
.search { position: relative; display: flex; gap: 0.5rem; flex: 1; max-width: 600px; min-width: 0; }
.search input { flex: 1; width: 0; min-width: 11rem; }
@media (max-width: 1180px) { .search .search-word { display: none; } }   /* the button words go before the search box gets too narrow to read */
.search-results {
  position: absolute; top: 110%; left: 0; right: 0;
  list-style: none; margin: 0; padding: var(--sp-2);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
}
.search-results li { padding: var(--sp-3) var(--sp-3); border-radius: 8px; cursor: pointer; }
.search-results li:hover { background: var(--accent-soft); }
.unit-btn { margin-left: auto; font-weight: 600; }

/* Severe banner */
.severe-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--extreme); color: #fff;
  padding: var(--sp-4) var(--sp-5);
  animation: pulse 2s ease-in-out infinite;
}
.severe-banner button { background: #fff; color: var(--extreme); border: none; font-weight: 700; }
@keyframes pulse { 50% { background: #9e1c1c; } }

/* Layout */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem;
  padding: var(--sp-5) var(--sp-5); max-width: 1300px; margin: 0 auto;
}
.col-main, .col-side, .col-wide { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.col-wide { grid-column: 1 / -1; }   /* a row that runs under both columns: the maps */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--sp-5) var(--sp-5);
  box-shadow: var(--shadow);
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }

/* Hero: current conditions over a sky that matches the weather */
.hero {
  border-radius: 22px; padding: var(--sp-6) var(--sp-6) var(--sp-5); color: #fff;
  background: linear-gradient(145deg, #1f6fd1, #3b9be6); box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.hero::after {  /* soft glow for depth */
  content: ''; position: absolute; width: 320px; height: 320px; right: -80px; top: -120px;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%); pointer-events: none;
}
/* Every gradient keeps white text at 4.5:1 or better, even at its lightest end */
.sky-clear  { background: linear-gradient(145deg, #155bb4, #1f6fc5); }
.sky-partly { background: linear-gradient(145deg, #2a5c99, #3d6fa8); }
.sky-cloudy { background: linear-gradient(145deg, #444f5e, #5b6878); }
.sky-rain   { background: linear-gradient(145deg, #2f4257, #4a5e74); }
.sky-storm  { background: linear-gradient(145deg, #231f3a, #4a3f6b); }
.sky-snow   { background: linear-gradient(145deg, #3f5a7c, #4f6d91); }
.sky-fog    { background: linear-gradient(145deg, #4b545e, #5d6772); }
.sky-night  { background: linear-gradient(145deg, #0c1633, #28386b); }
.hero { text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.hero-error { position: relative; z-index: 1; font-weight: 600; line-height: 1.5; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; position: relative; z-index: 1; }
.hero-place { margin: 0 0 .2rem; font-weight: 600; opacity: .92; }
.hero-temp { font-size: 4.6rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.hero-temp span { font-size: 1.6rem; font-weight: 600; vertical-align: top; margin-left: .15rem; letter-spacing: 0; }
.hero-desc { font-size: 1.25rem; font-weight: 600; margin-top: .2rem; }
.hero-sub { opacity: .9; font-size: .95rem; }
.hero-obs { font-size: .86rem; opacity: .95; margin-top: .25rem; }
.hero-updated { position: relative; font-size: .82rem; opacity: .85; margin-top: .5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hero-refresh { font-size: .82rem; padding: .15rem .6rem; border-radius: 3px; color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .35); }
.hero-refresh:hover { background: rgba(255, 255, 255, .28); }
.hero .info { color: rgba(255,255,255,.85); }
.hero-icon { font-size: 5.2rem; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.hero-summary { position: relative; z-index: 1; line-height: 1.5; }
.hero .tips { position: relative; z-index: 1; }
.hero .tip { background: rgba(255,255,255,.16); color: #fff; }

/* Gauges */
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 0.75rem; }
.gauge {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  padding: var(--sp-4) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem;
}
.gauge-head { width: 100%; display: flex; justify-content: space-between; font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.gauge-svg { width: 100%; max-width: 110px; height: auto; }
.dial { width: 100%; max-width: 130px; height: auto; margin-top: .2rem; }
/* Every gauge's picture gets the same space, so the readings below line up across a row */
.gauge-pic { width: 100%; height: 88px; display: flex; align-items: center; justify-content: center; margin: .25rem 0 .15rem; }
.gauge-pic svg { height: 100%; width: auto; max-width: 100%; margin: 0; }
.gauge-key { font-size: var(--fs-note); color: var(--muted); line-height: 1.35; margin-top: .15rem; }
.gauge-big { font-size: var(--fs-title); font-weight: 700; line-height: 1.1; }
.gauge-big small { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.gauge-sub { font-size: var(--fs-small); color: var(--text-2); line-height: 1.35; }

.summary { background: var(--accent-soft); border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin: .6rem 0; }
.tips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: .4rem; }
.tip { background: var(--card-2); border-radius: 3px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-text2); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 0.5rem; margin-top: .6rem; }
/* Today's six numbers: one row on a wide screen, two even rows of three on a medium one */
.stats-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1100px) { .stats-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.stat { background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); }
.stat .label { font-size: var(--fs-small); color: var(--muted); display: flex; justify-content: space-between; }
.stat .value { font-weight: 600; font-size: var(--fs-body); }
.info {
  border: none; background: none; padding: 0 var(--sp-2); color: var(--link);
  font-size: var(--fs-text2); cursor: help;
}

/* Alerts */
.alert { border-left: 6px solid var(--minor); background: var(--card-2); border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin-bottom: .6rem; }
.alert.Extreme { border-color: var(--extreme); }
.alert.Severe { border-color: var(--severe); }
.alert.Moderate { border-color: var(--moderate); }
.alert summary { cursor: pointer; font-weight: 600; }
.alert .meta { font-size: var(--fs-text2); color: var(--muted); }
.badge { display: inline-block; font-size: var(--fs-small); font-weight: 700; padding: var(--sp-1) var(--sp-3); border-radius: 3px; color: #fff; background: var(--minor); margin-right: .4rem; vertical-align: middle; }
.badge.Extreme { background: var(--extreme); }
.badge.Moderate { background: var(--moderate); }
.all-clear { display: flex; align-items: center; gap: 0.5rem; }
/* When nothing is active, the alerts card shrinks to a slim green bar */
.alerts-card.clear { padding: var(--sp-4) var(--sp-5); border-left: 5px solid var(--good); }
.alerts-card.clear h2 { margin: 0; font-size: var(--fs-text2); }
.alerts-card.clear .card-head { margin-bottom: .3rem; }
/* The Weather page's one line about warnings, between the sky and the forecast (the full list is on Hazards) */
.alerts-line { margin: .7rem 1rem 0; padding: var(--sp-3) var(--sp-4); border-radius: 10px; font-size: var(--fs-text2); background: var(--card-2); border-left: 4px solid var(--good); }
.alerts-line.on { border-left-color: var(--moderate); }
.alerts-line.urgent { border-left-color: var(--extreme); }
.alerts-line .linklike { margin-left: .2rem; font-weight: 600; }
.coming-up { margin: .5rem 1rem 0; padding: var(--sp-3) var(--sp-4); border-radius: 10px; font-size: var(--fs-text2); background: var(--card-2); border-left: 4px solid var(--moderate); }
.coming-up.high { border-left-color: var(--extreme); }
.coming-up p { margin: .4rem 0 0; }
.cu-list { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.cu-list li { display: flex; gap: 0.5rem; }
.cu-icon { flex: none; }
/* Live coverage and the sky cams, folded to one line */
.card.folded > :not(.card-head) { display: none; }
.card.folded > .card-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.card-head .fold-btn { margin-left: auto; border: 1px solid var(--line); background: var(--card-2); color: var(--text); border-radius: 3px; padding: var(--sp-2) var(--sp-4); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.card-head { flex-wrap: wrap; row-gap: .2rem; }
.card-head .fold-note { order: 3; flex-basis: 100%; }
.card:not(.folded) .fold-note { display: none; }
/* Advice for another season, folded until it's needed */
.season-fold { margin-top: .6rem; }
.season-fold > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-text2); color: var(--link); }
.season-fold[open] > summary { margin-bottom: .5rem; }
/* A solar day with no reading */
.solar-days-chart .gap { border: 1px dashed var(--muted); border-radius: 3px; height: 100%; opacity: .6; }
.slot-gap { display: inline-block; width: 10px; height: 10px; border: 1px dashed var(--muted); border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
/* Phones: at-a-glance tiles two across, and the 7-day certainty strip in two rows */
@media (max-width: 640px) {
  .glance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sure-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Settings */
.settings-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: .4rem 0 .6rem; }
.settings-links { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.settings-links .linklike { font-weight: 600; text-align: left; }

/* Storm tracker */
.tracker { border: 2px solid var(--severe); }
.storm {
  display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: center;
  background: var(--card-2); border-radius: 12px; padding: var(--sp-4); margin-bottom: .6rem;
  border-left: 6px solid var(--moderate);
}
.storm.Severe { border-left-color: var(--severe); }
.storm.Extreme { border-left-color: var(--extreme); }
.storm.incoming { box-shadow: 0 0 0 2px var(--extreme) inset; }
.storm.ended { border-left-color: var(--muted); opacity: .75; }
.storm.ended .storm-count .num { font-size: var(--fs-big); color: var(--muted); }
.storm-count { text-align: center; }
.storm-count .num { font-size: var(--fs-big); font-weight: 700; line-height: 1.15; }
.storm.incoming .storm-count .num { color: var(--t-critical); }
.storm-count .lbl { font-size: var(--fs-small); color: var(--muted); }
.storm-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.storm-where { font-weight: 600; }
.threats { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.threat { font-size: var(--fs-small); font-weight: 600; padding: var(--sp-1) var(--sp-3); border-radius: 3px; background: var(--minor); color: #1b2533; }
.threat.severe { background: var(--severe); color: #fff; }
.threat.extreme { background: var(--extreme); color: #fff; }
.small-btn { font-size: var(--fs-text2); padding: var(--sp-2) var(--sp-3); align-self: flex-start; }
.tracker-note { margin: .2rem 0 0; }
.eta-label { font-size: var(--fs-small); padding: 1px 4px; }

/* Allergies */
.allergy-tile { background: var(--card-2); border-radius: 12px; padding: var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 0.25rem; }
.allergy-tile .label { font-size: var(--fs-small); color: var(--muted); display: flex; justify-content: space-between; }
.lvl-big { font-size: var(--fs-title); font-weight: 700; }
.lvl-text { font-weight: 700; font-size: var(--fs-text2); }
.meter { height: 7px; background: var(--line); border-radius: 3px; overflow: hidden; }
.meter-fill { height: 100%; border-radius: 3px; }
.lvl-none { color: var(--muted); }
.lvl-low { color: var(--t-good); }
.lvl-moderate { color: var(--t-warn); }
.lvl-high { color: var(--t-serious); }
.lvl-veryhigh { color: var(--t-critical); }
.lvl-bg-none { background: var(--muted); }
.lvl-bg-low { background: #2e9e5b; }
.lvl-bg-moderate { background: #e3b008; }
.lvl-bg-high { background: var(--moderate); }
.lvl-bg-veryhigh { background: var(--extreme); }
.pill { font-weight: 700; font-size: var(--fs-small); }

/* History */
.history-lead { margin: 0 0 .5rem; }
.warmer { color: var(--t-serious); }
.cooler { color: var(--t-cool); }
.subhead { font-size: var(--fs-body); margin: 1.1rem 0 .45rem; color: var(--text); font-weight: 700; letter-spacing: -.01em; }
.ago-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 0.5rem; }
.ago { background: var(--card-2); border-radius: 10px; padding: var(--sp-3) var(--sp-4); }
/* On this date as thermometers (agoChart in app.js) */
.ago-chart { max-width: 600px; margin: var(--sp-2) 0 var(--sp-4); }
.ago-plot { position: relative; height: 200px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 39px, color-mix(in srgb, var(--line) 50%, transparent) 39px 40px); }
.ago-band { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--good) 14%, transparent); border-top: 1px dashed color-mix(in srgb, var(--good) 60%, transparent); border-bottom: 1px dashed color-mix(in srgb, var(--good) 60%, transparent); }
.ago-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: var(--sp-2) 0 0; }
.ago-key span { display: inline-flex; align-items: center; gap: 0.25rem; }
.ago-key-band { width: 14px; height: 10px; background: color-mix(in srgb, var(--good) 14%, transparent); border: 1px dashed color-mix(in srgb, var(--good) 60%, transparent); }
.ago-col { position: relative; }
.ago-bar { position: absolute; left: 50%; width: 22px; margin-left: -11px; border-radius: 11px; transform-origin: 50% 100%; animation: ago-rise .6s cubic-bezier(.2, .8, .3, 1.15) both; animation-delay: calc(var(--i) * 90ms); }
.ago-col.now .ago-bar { outline: 2px solid var(--accent); outline-offset: 3px; }
.ago-hi, .ago-lo { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--fs-small); white-space: nowrap; }
.ago-hi { bottom: 100%; margin-bottom: 4px; }
.ago-lo { top: 100%; margin-top: 4px; font-weight: 600; color: var(--text-2); }
.ago-off { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--fs-note); font-weight: 600; color: var(--muted); white-space: nowrap; }
.ago-labels { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; text-align: center; padding-top: var(--sp-2); }
.ago-labels div { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-note); color: var(--muted); }
.ago-labels strong { font-size: var(--fs-small); color: var(--text); }
.ago-labels .now strong { color: var(--accent); }
.ago-rain { color: var(--t-cool); }
@keyframes ago-rise { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ago-bar { animation: none; } }
.history-chart { width: 100%; height: auto; display: block; }

/* Severe outlook */
.risk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.risk-tile { background: var(--card-2); border-radius: 12px; padding: var(--sp-4) var(--sp-4); border-top: 5px solid var(--risk, var(--line)); display: flex; flex-direction: column; gap: 0.25rem; }
.risk-name { font-size: var(--fs-title); font-weight: 700; }
.risk-num { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.risk-bar { display: flex; gap: 3px; }
.risk-bar i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.risk-bar i.on { background: var(--risk); }
.hz-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.hz { font-size: var(--fs-small); background: var(--card); border: 1px solid var(--line); border-radius: 3px; padding: var(--sp-1) var(--sp-3); }
.hz.sig { border-color: var(--extreme); color: var(--t-critical); font-weight: 700; }
.md { background: var(--accent-soft); border-left: 5px solid var(--accent); border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin-bottom: .7rem; display: flex; flex-direction: column; gap: 0.25rem; }
.md.hot { border-left-color: var(--extreme); background: color-mix(in srgb, var(--extreme) 12%, var(--card)); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; margin-bottom: .6rem; }
.seg button { border: none; border-radius: 0; padding: var(--sp-2) var(--sp-4); }
.seg button.active { background: var(--accent-fill); color: #fff; }
.verdict { background: var(--accent-soft); border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin-bottom: .6rem; }
.ing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.ing { background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 0.25rem; }
.ing-head { display: flex; justify-content: space-between; }
.ing-word { font-weight: 700; font-size: var(--fs-text2); }
.ing-bar { height: 7px; background: var(--line); border-radius: 3px; overflow: hidden; }
.ing-bar i { display: block; height: 100%; border-radius: 3px; }
.l0 { color: var(--muted); } .ing-bar i.l0 { background: var(--muted); }
.l1 { color: var(--t-warn); } .ing-bar i.l1 { background: #e3b008; }
.l2 { color: var(--t-serious); } .ing-bar i.l2 { background: var(--moderate); }
.l3 { color: var(--t-critical); } .ing-bar i.l3 { background: var(--extreme); }

/* Storm reports */
.layer-toggles { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--fs-text2); margin-top: .5rem; }
.layer-toggles input { min-width: auto; }
.reports { list-style: none; padding: 0; margin: 0; }
.reports li { display: flex; gap: 0.5rem; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.reports li:last-child { border-bottom: none; }
.rep-icon { font-size: var(--fs-big); }
.rep-marker { font-size: 18px; line-height: 22px; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }

/* Fire */
.fire-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: .6rem; }

/* Safety plan */
.plan-field { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: .55rem; font-size: var(--fs-text2); font-weight: 600; }
.plan-field textarea {
  font: inherit; font-weight: 400; font-size: var(--fs-text2); border: 1px solid var(--line); border-radius: 10px;
  padding: var(--sp-3) var(--sp-3); background: var(--card-2); color: var(--text);
}
.kit { display: grid; }
.kit input { min-width: auto; margin-right: .3rem; }
.plan-now { background: var(--extreme); color: #fff; border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin-bottom: .6rem; font-size: var(--fs-body); }

/* Page tabs */
.pages {
  display: flex; padding: var(--sp-3) var(--sp-5); margin: 0 auto;
  overflow-x: auto; scrollbar-width: none;
  position: sticky; top: 0; z-index: 9;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.pages::-webkit-scrollbar { display: none; }
.pages button {
  border-radius: 3px; white-space: nowrap; font-weight: 600; border: none; background: transparent;
  color: var(--text-2); position: relative;
}
.pages button:hover { background: var(--card-2); }
.pages button.active { background: var(--accent-fill); color: #fff; }
.nav-dot { position: absolute; top: 5px; right: 4px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bg); }
.nav-dot.elevated { background: var(--moderate); }
.nav-dot.serious { background: var(--extreme); animation: blink 1.4s infinite; }
.page-wide { max-width: 1100px; margin: 0 auto; padding: var(--sp-5) var(--sp-5); display: flex; flex-direction: column; gap: 1rem; }

/* Air */
.air-hero { display: flex; gap: 1rem; align-items: center; }
.air-ring {
  flex: 0 0 120px; height: 120px; border-radius: 50%; border: 10px solid var(--c);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.air-ring .num { font-size: var(--fs-huge); font-weight: 700; line-height: 1; }
.aqi-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; margin-top: .8rem; font-size: var(--fs-note); }
.aqi-scale div { border-top: 6px solid var(--c); padding-top: var(--sp-2); display: flex; flex-direction: column; }
.aqi-scale b { font-weight: 600; }
.pollutants { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 0.5rem; }
.pollutant { background: var(--card-2); border-radius: 12px; padding: var(--sp-4) var(--sp-4); border-left: 5px solid var(--c); display: flex; flex-direction: column; gap: 0.25rem; }
.p-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem .5rem; align-items: baseline; }
.p-aqi { font-weight: 700; white-space: nowrap; }
.p-aqi small { font-weight: 600; color: var(--muted); }
.ozone-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: center; }
.ozone-grid p { margin: 0 0 .5rem; }
.ozone-grid svg { max-width: 440px; }

/* Space */
.sky-row { display: flex; justify-content: space-between; gap: 0.5rem; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.events { list-style: none; padding: 0; margin: 0; }
.events li { display: grid; grid-template-columns: 70px 34px 1fr; gap: 0.5rem; align-items: start; padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line); }
.events li.special { background: var(--accent-soft); border-radius: 8px; }
.events li.special strong::after { content: ' ⭐'; }
.ev-date { display: flex; flex-direction: column; }
.ev-date strong::after { content: none !important; }
.ev-icon { font-size: var(--fs-big); }
.kp-bars { display: flex; align-items: flex-end; gap: 2px; height: 70px; margin-top: .6rem; }
.kp-bars i { flex: 1; border-radius: 2px 2px 0 0; }
.kp-bars i.pred { opacity: .45; }

/* Earthquakes */
.mag-badge { flex: 0 0 44px; height: 44px; border-radius: 50%; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Alert switches */
.sw-list { display: flex; flex-direction: column; }
.sw-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.sw-row:last-child { border-bottom: none; }
.sw-ic { font-size: var(--fs-lead); text-align: center; }
.sw-text { display: flex; flex-direction: column; font-size: var(--fs-text2); line-height: 1.3; }
.sw-text small { color: var(--muted); font-size: var(--fs-small); }
.sw-text input[type=time] { font-size: var(--fs-text2); padding: var(--sp-1) var(--sp-2); margin-left: .2rem; width: auto; }
.sw-row select { font-size: var(--fs-small); padding: var(--sp-2) var(--sp-3); border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.sw-locked { font-size: var(--fs-text2); opacity: .7; padding-right: var(--sp-3); }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: 0 0 44px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; background: var(--line); border-radius: 3px; transition: background .15s ease; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s ease; }
.switch input:checked + span { background: var(--good); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Helper-stopped alarm */
.hb { margin-top: .8rem; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.hb-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: var(--fs-text2); }
.hb-pill { font-size: var(--fs-small); font-weight: 700; padding: var(--sp-1) var(--sp-3); border-radius: 3px; }
.hb-pill.ok { color: var(--t-good); }
.hb-pill.off { background: var(--card-2); color: var(--muted); }
.hb-pill.bad { background: color-mix(in srgb, var(--extreme) 15%, transparent); color: var(--t-critical); }
.hb-form { display: flex; gap: 0.5rem; margin: .3rem 0 .5rem; }.hb-form input { flex: 1; width: 0; }

/* ---------- Always-visible explainers (replacing fold-down menus) ---------- */
.explain { background: var(--card-2); border-radius: 12px; padding: var(--sp-4) var(--sp-4); margin-top: .7rem; font-size: var(--fs-text2); line-height: 1.5; }
.explain p { margin: .3rem 0 0; }
.explain.danger { border-left: 5px solid var(--extreme); }
.alert-title { font-weight: 700; margin-bottom: .2rem; }
.alert-do { font-size: var(--fs-text2); margin: .4rem 0; padding: var(--sp-3) var(--sp-3); background: var(--card); border-radius: 8px; }
.learn { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0.5rem; }
.stream-form .row input { flex: 1; min-width: 0; }

/* ---------- Clickable gauges ---------- */
.gauge { cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.gauge:hover, .gauge:focus-visible { transform: translateY(-2px); border-color: var(--accent); outline: none; }
.gauge-more { font-size: var(--fs-small); font-weight: 700; color: var(--link); margin-top: auto; padding-top: var(--sp-2); }

/* ---------- Hero: best-time chip + sky effects ---------- */
.hero-best {
  position: relative; z-index: 1; margin-top: .7rem; width: 100%; text-align: left;
  background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; padding: var(--sp-3) var(--sp-4);
}
.hero-best:hover { background: rgba(255,255,255,.26); border-color: #fff; }
.hero-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero-fx i { position: absolute; display: block; }
.hero-fx .drop { top: -20px; width: 1.5px; height: 16px; background: linear-gradient(transparent, rgba(255,255,255,.55)); animation: fall linear infinite; }
.hero-fx .flake { top: -10px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.85); animation: snow linear infinite; }
.hero-fx .star { border-radius: 50%; background: #fff; animation: twinkle 3s ease-in-out infinite; }
.hero-fx .cloud { left: -30%; width: 220px; height: 60px; border-radius: 60px; background: rgba(255,255,255,.12); filter: blur(6px); animation: drift linear infinite; }
.hero-fx .sunglow { right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,102,.55), transparent 65%); animation: pulseGlow 6s ease-in-out infinite; }
.hero-fx .flash { inset: 0; background: rgba(255,255,255,.35); opacity: 0; animation: flash 9s infinite; }
@keyframes fall { to { transform: translateY(420px); } }
@keyframes snow { to { transform: translate(30px, 420px); } }
@keyframes twinkle { 50% { opacity: .25; } }
@keyframes drift { to { left: 110%; } }
@keyframes pulseGlow { 50% { transform: scale(1.12); opacity: .8; } }
@keyframes flash { 0%, 91%, 95%, 100% { opacity: 0; } 92%, 94% { opacity: 1; } }

/* ---------- Planner ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: .6rem; }
.chip { border-radius: 3px; font-weight: 600; padding: var(--sp-3) var(--sp-4); }
.chip.active { background: var(--accent-fill); color: #fff; border-color: var(--accent); }
.toggle { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-text2); margin-bottom: .8rem; cursor: pointer; }
.toggle input { min-width: auto; width: 18px; height: 18px; accent-color: var(--accent); }
.best-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0.5rem; }
.best { display: flex; gap: 0.75rem; align-items: center; background: var(--card-2); border-radius: 14px; padding: var(--sp-4) var(--sp-4); border: 1px solid var(--line); }
.best.top { border-color: var(--good); box-shadow: 0 0 0 1px var(--good) inset; }
.score-ring { width: 56px; height: 56px; flex: 0 0 56px; }
.best-when { font-weight: 700; }
.best-meta { font-size: var(--fs-text2); }
.pgrid { display: flex; flex-direction: column; gap: 3px; overflow-x: auto; }
.pg-row { display: grid; grid-template-columns: 80px repeat(24, minmax(14px, 1fr)); gap: 2px; align-items: center; min-width: 520px; }
.pg-day { font-size: var(--fs-small); font-weight: 700; }
.pg-hr { font-size: var(--fs-note); color: var(--muted); white-space: nowrap; }
.pg-cell { height: 34px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-note); color: #fff; cursor: pointer; }
.pg-cell.off, .pg-swatch.off { background: repeating-linear-gradient(135deg, var(--card-2) 0 4px, var(--line) 4px 6px); cursor: default; }
.pg-swatch { display: inline-block; width: 18px; height: 12px; border-radius: 3px; }
/* What's shaping the scores: one 3-day strip per problem (renderPlanner in insights.js) */
.why-tl { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: var(--sp-2); }
/* Same columns and padding as .plan-row, so the strips sit under the skylines above */
.why-tl-row { display: grid; grid-template-columns: 30px minmax(9rem, 14rem) minmax(0, 1fr) 52px; gap: 0.75rem; align-items: center; padding: 0.25rem var(--sp-2); }
.why-tl-hdr { padding-bottom: 0; }
.why-tl-hdr .plan-rb-days { grid-column: 3; }
.why-tl-ic { font-size: 1.1rem; line-height: 1; text-align: center; }
.why-tl-name { font-size: var(--fs-small); font-weight: 600; }
.why-tl-n { font-size: var(--fs-note); color: var(--muted); text-align: right; }
.why-strip { display: block; width: 100%; height: 22px; }
.why-base { fill: var(--line); }
.why-tl-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: var(--sp-1) 0 0; }
.why-tl-key span { display: inline-flex; align-items: center; gap: 0.25rem; }
.why-tl-key i { width: 10px; height: 10px; border-radius: 2px; }
@media (max-width: 640px) {
  .why-tl-row { grid-template-columns: 26px minmax(0, 1fr) 46px; row-gap: 0.25rem; }
  .why-strip { grid-column: 2 / 4; grid-row: 2; }
  .why-tl-hdr > span:empty { display: none; }
  .why-tl-hdr .plan-rb-days { grid-column: 2 / 4; }
}
.why-bars { display: flex; flex-direction: column; gap: 0.5rem; }
.why-row { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 50px; gap: 0.5rem; align-items: center; font-size: var(--fs-text2); }
.why-bar { height: 10px; background: var(--card-2); border-radius: 3px; overflow: hidden; }
.why-bar i { display: block; height: 100%; background: var(--moderate); border-radius: 3px; }

/* ---------- Gauge history pop-up ---------- */
.metric-dialog {
  width: min(820px, 94vw); max-height: 90vh; padding: 0; border: 1px solid var(--line); border-radius: 20px;
  background: var(--card); color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.metric-dialog::backdrop { background: rgba(5, 10, 20, .6); backdrop-filter: blur(3px); }
.dlg-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: var(--sp-5) var(--sp-5); background: var(--card); border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; }
#dlgBody { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.dlg-hero { display: flex; gap: 1rem; align-items: center; background: var(--accent-soft); border-radius: 14px; padding: var(--sp-4) var(--sp-5); margin-bottom: 1rem; }
.dlg-big { font-size: var(--fs-huge); font-weight: 700; white-space: nowrap; }
.dlg-sec { margin-bottom: 1.1rem; }
.dlg-sec h3 { font-size: var(--fs-text2); margin: 0 0 .4rem; }
.dlg-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rose-wrap { display: flex; justify-content: center; }
.rose { width: 220px; max-width: 100%; }
.records { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-text2); }
.records li { display: flex; justify-content: space-between; gap: 0.5rem; padding: var(--sp-1) 0; }
.rec-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.facts { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-text2); line-height: 1.5; }

/* ---------- Page headers ---------- */
.page-intro { padding: var(--sp-3) var(--sp-2) var(--sp-2); }
.page-intro h1 { font-size: var(--fs-big); margin: 0 0 .2rem; letter-spacing: -.02em; }
.page-intro p { margin: 0; color: var(--text-2); max-width: 70ch; }
.jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: .7rem; }
.jump a { font-size: var(--fs-small); font-weight: 600; text-decoration: none; padding: var(--sp-2) var(--sp-4); border-radius: 3px; background: var(--card); border: 1px solid var(--line); color: var(--text-2); }
.jump a:hover { border-color: var(--accent); color: var(--text); }
.page-wide > .card { scroll-margin-top: 64px; }

/* ---------- Weather patterns (History tab) ---------- */
.fact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0.5rem; margin: .7rem 0 .3rem; }
.fact { background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-text2); }
.fact-k { font-size: var(--fs-small); font-weight: 700; color: var(--muted); margin-bottom: .15rem; }
.table-wrap { overflow-x: auto; }
.decades { width: 100%; border-collapse: collapse; font-size: var(--fs-text2); min-width: 520px; }
.decades th, .decades td { padding: var(--sp-3) var(--sp-3); text-align: left; border-bottom: 1px solid var(--line); }
.decades thead th { font-size: var(--fs-small); color: var(--muted); font-weight: 700; }
.dcell { display: flex; flex-direction: column; gap: 3px; }
.dcell i { display: block; height: 5px; border-radius: 3px; opacity: .85; }
.temp-chip { display: inline-block; min-width: 44px; text-align: center; border-radius: 6px; padding: var(--sp-1) var(--sp-3); font-weight: 700; color: var(--text); }
.notable-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 0.5rem; }
.notable { background: var(--card-2); border-radius: 14px; padding: var(--sp-4) var(--sp-4); }
.notable-ic { font-size: var(--fs-big); line-height: 1; margin-bottom: .3rem; }
.notable-v { font-size: var(--fs-title); font-weight: 700; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-3); border-left: 3px solid var(--line); }
.timeline li { position: relative; display: grid; grid-template-columns: 110px 1fr; gap: 0.75rem; padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); }
.timeline li::before { content: ''; position: absolute; left: -9px; top: .75rem; width: 13px; height: 13px; border-radius: 50%; background: var(--extreme); border: 3px solid var(--card); }
.tl-date { font-weight: 700; font-size: var(--fs-text2); }

/* ---------- Dictionary ---------- */
.dict-tools { position: sticky; top: 56px; z-index: 5; display: flex; flex-direction: column; gap: 0.5rem; }
.dict-tools input[type=search] { width: 100%; font-size: var(--fs-body); padding: var(--sp-4) var(--sp-5); border-radius: 12px; }
.dict-tools .chips { margin: 0; }
.dict-az { display: flex; flex-wrap: wrap; gap: 2px; }
.dict-az a, .dict-az span { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-weight: 700; font-size: var(--fs-text2); text-decoration: none; }
.dict-az a { color: var(--link); background: var(--accent-soft); }
.dict-az a:hover { background: var(--accent-fill); color: #fff; }
.dict-az span { color: var(--line); }
.dict-letter { scroll-margin-top: 230px; }
.dict-letter h3 { font-size: var(--fs-big); margin: .8rem 0 .3rem; padding-bottom: var(--sp-2); border-bottom: 2px solid var(--accent); color: var(--link); }
.dict-entry { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.dict-entry:last-child { border-bottom: none; }
.dict-term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
.dict-term dfn { font-style: normal; font-weight: 700; font-size: var(--fs-body); }
.dict-cat { font-size: var(--fs-small); background: var(--card-2); border-radius: 3px; padding: var(--sp-1) var(--sp-3); color: var(--text-2); }
.dict-entry p { margin: .3rem 0 0; line-height: 1.55; max-width: 75ch; }
.dict-entry p + p { margin-top: .55rem; }
.word-link { color: inherit; text-decoration: underline dotted var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.word-link:hover { color: var(--link); text-decoration-style: solid; }
.dict-where { font-size: var(--fs-small); color: var(--muted); margin-top: .25rem; }
mark { background: color-mix(in srgb, var(--minor) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* ---------- Quiz ---------- */
.quiz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.quiz-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.quiz-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); gap: 0.5rem; }
.quiz-mode {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left;
  padding: var(--sp-4) var(--sp-4); border-radius: 14px; background: var(--card-2); transition: transform .12s ease, border-color .12s ease;
}
.quiz-mode:hover { transform: translateY(-2px); border-color: var(--accent); }
.quiz-mode.big { padding: var(--sp-5); background: linear-gradient(145deg, var(--accent-soft), var(--card-2)); }
.quiz-mode.big span { font-size: var(--fs-huge); line-height: 1; }
.quiz-mode.big strong { font-size: var(--fs-body); }
.quiz-mode small { color: var(--muted); font-size: var(--fs-small); }
.quiz-mode.done { opacity: .8; }
.topic-meter { width: 100%; height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.topic-meter i { display: block; height: 100%; background: var(--good); border-radius: 3px; }
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge-pill { font-size: var(--fs-small); font-weight: 700; padding: var(--sp-2) var(--sp-4); border-radius: 3px; background: color-mix(in srgb, var(--minor) 25%, var(--card-2)); }
.badge-pill.locked { background: var(--card-2); color: var(--muted); filter: grayscale(1); opacity: .6; }
.quiz-stage:empty { display: none; }
.quiz-top { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: var(--fs-text2); }
.quiz-count { font-weight: 700; }
.quiz-cat { background: var(--card-2); border-radius: 3px; padding: var(--sp-1) var(--sp-3); }
.quiz-score { margin-left: auto; font-weight: 700; }
.quiz-progress { height: 8px; background: var(--card-2); border-radius: 3px; overflow: hidden; margin: .6rem 0 1rem; }
.quiz-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); border-radius: 3px; transition: width .3s ease; }
.quiz-q { font-size: var(--fs-title); line-height: 1.35; margin: 0 0 .8rem; }
.quiz-pic { display: block; width: 100%; max-width: 360px; margin: 0 auto 1rem; border-radius: 12px; }
.storm-quiz-pic { max-width: 220px; background: var(--accent-soft); padding: 6px; box-sizing: border-box; }
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.quiz-choice {
  display: flex; align-items: center; gap: 0.75rem; text-align: left; padding: var(--sp-4) var(--sp-5); border-radius: 14px;
  font-size: var(--fs-body); background: var(--card-2); border: 2px solid var(--line); transition: transform .1s ease, border-color .1s ease;
}
.quiz-choice:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.qk { flex: 0 0 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--card); border: 1px solid var(--line); }
.quiz-choice.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--card-2)); animation: pop .35s ease; }
.quiz-choice.right .qk { background: var(--good); color: #fff; border-color: var(--good); }
.quiz-choice.wrong { border-color: var(--extreme); background: color-mix(in srgb, var(--extreme) 14%, var(--card-2)); animation: shake .35s ease; }
.quiz-choice.wrong .qk { background: var(--extreme); color: #fff; border-color: var(--extreme); }
.quiz-choice:disabled { cursor: default; }
@keyframes pop { 50% { transform: scale(1.04); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.quiz-explain { margin-top: 1rem; padding: var(--sp-4) var(--sp-5); border-radius: 14px; border-left: 5px solid; animation: fadeUp .3s ease; }
.quiz-explain.ok { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--card-2)); }
.quiz-explain.no { border-color: var(--extreme); background: color-mix(in srgb, var(--extreme) 8%, var(--card-2)); }
.quiz-explain p { margin: .35rem 0 .6rem; line-height: 1.5; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.quiz-actions.center { justify-content: center; margin-top: 1rem; }
.quiz-next { margin-left: auto; background: var(--accent-fill); color: #fff; border-color: var(--accent); font-weight: 700; padding: var(--sp-3) var(--sp-5); }
.quiz-actions.center .quiz-next { margin-left: 0; }
.quiz-result { text-align: center; padding: var(--sp-3) 0 var(--sp-5); }
.quiz-rank-icon { font-size: 4rem; line-height: 1.1; animation: pop .6s ease; }
.quiz-rank { font-size: var(--fs-big); font-weight: 700; }
.quiz-final { color: var(--text-2); margin-top: .2rem; }
.quiz-newbadges { margin-top: .8rem; }
.quiz-review { background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); margin-bottom: .5rem; font-size: var(--fs-text2); display: flex; flex-direction: column; gap: 0.25rem; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 5000; }
.confetti i { position: absolute; top: 55%; width: 9px; height: 13px; border-radius: 2px; animation: burst 1.4s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes burst {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(calc(var(--dx) * .8), var(--dy)) rotate(calc(var(--r) * .5)); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) * -1.2)) rotate(var(--r)); opacity: 0; }
}

/* ---------- Sacred geometry (decorative; see geometry.js) ---------- */
@keyframes geoSpin { to { transform: rotate(360deg); } }
.loading::before {
  content: ''; display: block; width: 44px; height: 44px; margin: 0 auto .6rem;
  background: var(--geo-spinner) center / contain no-repeat; animation: geoSpin 6s linear infinite;
}
.page-intro h1::after {  /* a golden-ratio divider: segments sized 1 : φ : φ² */
  content: ''; display: block; height: 3px; width: 161.8px; margin-top: .45rem; border-radius: 3px;
  /* 1 : φ : φ² of the width = 19.1% : 30.9% : 50%, with small gaps */
  background: linear-gradient(90deg, var(--accent) 0 18.1%, transparent 18.1% 20.1%, var(--accent) 20.1% 49%, transparent 49% 51%, #e0a800 51% 100%);
  opacity: .8;
}
.quiz-rank-wrap { position: relative; width: 160px; height: 130px; margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.gold-spiral { position: absolute; inset: -15px 0 0; width: 160px; height: 160px; opacity: .55; animation: geoSpin 30s linear infinite; }
.quiz-rank-wrap .quiz-rank-icon { position: relative; }
@media (prefers-reduced-motion: reduce) { .loading::before, .gold-spiral { animation: none; } }
/* Safety first: during an active warning the decoration steps aside */
body.alert-mode .hero-fx { display: none; }

/* ---------- Heat & winter ---------- */
.heat-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: .6rem; }
.heat-day { background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-2); text-align: center; display: flex; flex-direction: column; gap: 0.25rem; align-items: center; }
.heat-feel { font-size: var(--fs-title); font-weight: 700; }
.heat-day .pill { font-size: var(--fs-note); line-height: 1.2; }
.heat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.data-note { display: flex; gap: 0.5rem; align-items: flex-start; background: var(--accent-soft); border-radius: 12px; padding: var(--sp-3) var(--sp-4); margin: 0 0 .8rem; font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); }
.metric-dialog .data-note { margin: .6rem 0 0; }
.saved-streams li.stations-checked { background: none; padding: var(--sp-2) var(--sp-1); display: block; }
.local-note { max-width: 1300px; margin: .6rem auto 0; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-text2); border-radius: 12px; background: var(--accent-soft); color: var(--text-2); }

/* ---------- Navigation icons + phone bottom bar ---------- */
.nav-ic { width: 18px; height: 18px; flex: 0 0 18px; }
.pages button { display: inline-flex; align-items: center; gap: 0.5rem; }
.bottom-nav { display: none; }
@media (max-width: 640px) {
  #pageNav { display: none; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .bottom-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: color-mix(in srgb, var(--card) 94%, transparent); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line); padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
  }
  .bottom-nav button {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    border: none; background: none; color: var(--muted); font-size: var(--fs-note); font-weight: 600; padding: var(--sp-3) 0; border-radius: 12px;
  }
  .bottom-nav .nav-ic { width: 24px; height: 24px; flex-basis: 24px; }
  .bottom-nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Search row: the field and buttons may wrap rather than widen the page at large text sizes */
  /* Large text sizes: let everything inside the pages shrink and long words break,
     instead of pushing the page wider than the screen */
  .page *, .topbar * { min-width: 0; }
  body { overflow-wrap: anywhere; }
  .search { flex-wrap: wrap; }
  .search input { flex: 1 1 8rem; }
  .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .bottom-nav button.active { color: var(--link); }
  .bottom-nav button.active .nav-ic { background: var(--accent-soft); border-radius: 3px; padding: 2px 10px; box-sizing: content-box; }
  .bottom-nav .nav-dot { top: 4px; right: calc(50% - 18px); }
}

/* Phone alerts */
.steps { padding-left: var(--sp-5); margin: .4rem 0; }
.steps li { margin-bottom: .45rem; }
.topic { display: flex; gap: 0.5rem; align-items: center; margin-top: .3rem; flex-wrap: wrap; }
.topic code { background: var(--card-2); padding: var(--sp-2) var(--sp-3); border-radius: 6px; word-break: break-all; }

/* Tabs */
.tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 1rem; }
.seg-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 3px; background: var(--card-2); border-radius: 12px; border: 1px solid var(--line); }
.tab { border-radius: 9px; border: none; background: transparent; font-weight: 600; color: var(--text-2); padding: var(--sp-3) var(--sp-2); }
.tab.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* Hourly */
.hour-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: var(--sp-3); }
.hour { flex: 0 0 76px; text-align: center; background: var(--card-2); border-radius: 10px; padding: var(--sp-3) var(--sp-2); }
.hour .t { font-size: var(--fs-small); color: var(--muted); }
.hour .i { font-size: var(--fs-big); }
.hour .temp { font-weight: 700; }
.hour .pop { font-size: var(--fs-small); color: var(--t-cool); }
.hour.day-start { border-left: 3px solid var(--accent); }
.chart { width: 100%; height: auto; display: block; touch-action: pan-y; }
.chart-block { margin-top: .9rem; }
.chart-title { font-size: var(--fs-small); font-weight: 600; color: var(--muted); margin: .4rem 0 .1rem; }
.history-chart { touch-action: pan-y; }
.chart-tip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; }
.chart-tip {
  position: fixed; z-index: 3000; pointer-events: none; min-width: 150px; max-width: 240px;
  background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px;
  padding: var(--sp-3) var(--sp-3); font-size: var(--fs-small); line-height: 1.4; box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* Day rows (3/7 day) */
.day-row {
  display: grid; grid-template-columns: 110px 40px 1fr 70px; align-items: center; gap: 0.75rem;
  padding: var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--line);
}
.day-row:last-child { border-bottom: none; }
.day-row .name { font-weight: 600; }
.day-row .i { font-size: var(--fs-huge); text-align: center; }
.day-row .pop { color: var(--t-cool); font-size: var(--fs-text2); text-align: right; }
.range { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-text2); }
.range .bar { flex: 1; height: 6px; background: var(--card-2); border-radius: 3px; position: relative; }
.range .fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--cool), var(--warm)); }

/* 3-day detail cards */
.three-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.three-card { background: var(--card-2); border-radius: 12px; padding: var(--sp-4); }
.three-card .i { font-size: var(--fs-huge); }
.three-card .hl { font-size: var(--fs-big); font-weight: 700; }
.three-card ul { list-style: none; padding: 0; margin: .5rem 0 0; font-size: var(--fs-text2); }
.three-card li { padding: var(--sp-1) 0; }

/* Today (parts of day) */
.parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.part { background: var(--card-2); border-radius: 12px; padding: var(--sp-4); text-align: center; }
.part .i { font-size: var(--fs-huge); }
.part .temp { font-size: var(--fs-title); font-weight: 700; }

/* Monthly calendar */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.cal .dow { text-align: center; font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.cal .cell { background: var(--card-2); border-radius: 10px; padding: var(--sp-3); min-height: 78px; font-size: var(--fs-text2); }
.cal .cell.empty { background: transparent; }
.cal .cell.typical { opacity: .7; border: 1px dashed var(--line); background: transparent; }
.cal .cell.today { outline: 2px solid var(--accent); }
.cal .d { font-weight: 600; font-size: var(--fs-small); }
.cal .i { font-size: var(--fs-title); }
.cal .hi { font-weight: 700; }
.cal .lo { color: var(--muted); }
.legend { display: flex; gap: 0.5rem 1rem; font-size: var(--fs-small); color: var(--text-2); margin-top: .6rem; flex-wrap: wrap; align-items: center; }
.key { display: inline-flex; align-items: center; gap: 0.5rem; }
.key i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
.key i.band { height: 10px; background: var(--muted); opacity: .35; }
.key i.dash { height: 0; border-top: 2px dashed var(--text-2); }

/* Record scale (History) */
.rscale { position: relative; margin: 1.6rem .5rem 2.8rem; }
.rscale-track { position: relative; height: 12px; border-radius: 3px; background: var(--card-2); border: 1px solid var(--line); }
.rscale-normal { position: absolute; top: 0; bottom: 0; background: var(--muted); opacity: .3; border-radius: 3px; }
.rscale-today { position: absolute; top: -3px; bottom: -3px; border-radius: 3px; background: linear-gradient(90deg, var(--cool), var(--warm)); box-shadow: 0 0 0 2px var(--card); }
.rscale-rec { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--text-2); }
.rscale-labels span, .rscale-today-label {
  position: absolute; transform: translateX(-50%); font-size: var(--fs-small); color: var(--muted); text-align: center; white-space: nowrap; line-height: 1.25;
}
.rscale-labels span { top: 20px; }
.rscale-labels b { color: var(--text); font-size: var(--fs-text2); }
.rscale-today-label { top: -22px; font-weight: 700; color: var(--text); font-size: var(--fs-small); }

/* Radar */
.radar-map { height: 295px; border-radius: 10px; overflow: hidden; background: var(--card-2); z-index: 0; }
.radar-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: .6rem; }
.radar-controls input[type=range] { flex: 1; accent-color: var(--accent); padding: 0; }
.radar-legend { margin-top: .5rem; }
.radar-scale {
  height: 8px; border-radius: 3px;
  background: linear-gradient(90deg, #04e9e7, #019ff4, #02fd02, #01c501, #008e00, #fdf802, #e5bc00, #fd9500, #fd0000, #d40000, #bc0000, #f800fd, #9854c6, #fdfdfd);
}
.vel-scale {
  height: 8px; border-radius: 3px;
  background: linear-gradient(90deg, #7dff7d, #12a312, #0a5c0a, #6b6b6b, #6b0a0a, #d62828, #ff8a8a);
}
.site-marker { font-size: 16px; line-height: 22px; white-space: nowrap; filter: drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.site-marker span { font-size: 12px; font-weight: 700; color: #fff; background: rgba(0,0,0,.55); border-radius: 4px; padding: 0 4px; margin-left: 2px; }
.rot-help { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; margin-top: .7rem; background: var(--card-2); border-radius: 12px; padding: var(--sp-4); }
.rot-help p { margin: 0 0 .5rem; }
.couplet { width: 100%; height: auto; }
@media (max-width: 640px) { .rot-help { grid-template-columns: 1fr; } .couplet { max-width: 240px; } }
.radar-scale-labels { display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--muted); margin-top: .2rem; }
.map-hint {
  position: absolute; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.45); color: #fff; font-weight: 600; pointer-events: none;
}
.tip-pop {
  position: absolute; z-index: 2000; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-text2);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.home-marker { font-size: 22px; line-height: 1; text-align: center; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.leaflet-popup-content { font-family: inherit; }

/* Player */
.player {
  aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; margin-bottom: .6rem;
}
.player video, .player iframe { width: 100%; height: 100%; border: 0; }
.player-empty { color: #bbb; text-align: center; padding: var(--sp-5); font-size: var(--fs-text2); }
.live-dot { color: var(--extreme); font-weight: 700; font-size: var(--fs-text2); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .hero-fx { display: none; } }
.stream-form { display: flex; flex-direction: column; gap: 0.5rem; }
.stream-form .row { display: flex; gap: 0.5rem; }
.saved-streams { list-style: none; padding: 0; margin: .6rem 0 0; }
.saved-streams li {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  padding: var(--sp-2) var(--sp-3); border-radius: 8px; background: var(--card-2); margin-bottom: .3rem;
}
.saved-streams li span { cursor: pointer; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-streams li button { padding: var(--sp-1) var(--sp-3); }
.saved-streams li a { text-decoration: none; padding: 0 var(--sp-2); }
.help { margin-top: .6rem; font-size: var(--fs-text2); }
.help summary { cursor: pointer; color: var(--link); }

/* Learn */
.learn details { border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
.learn details:last-child { border-bottom: none; }
.learn summary { cursor: pointer; font-weight: 600; }
.learn p { margin: .4rem 0 0; font-size: var(--fs-text2); }

.footer { text-align: center; padding: var(--sp-5); }
.loading { text-align: center; padding: var(--sp-7); color: var(--muted); }
.error { color: var(--t-critical); }
/* #2: segmented switches wrap instead of pushing the page sideways at large text sizes */
.seg { flex-wrap: wrap; max-width: 100%; }
/* #4: screen-reader-only heading (the Weather tab's visible "title" is the weather itself) */
.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; }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
}
/* Keep content clear of the notch / status bar when opened from the home screen */
.topbar { padding-top: max(.8rem, env(safe-area-inset-top)); }
.footer { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; padding: max(.7rem, env(safe-area-inset-top)) 1rem .7rem; }
  /* Bigger tap targets and 16px inputs (stops iPhone from zooming in when typing) */
  button { padding: var(--sp-3) var(--sp-4); }
  input { font-size: 16px; }
  .saved-streams li { padding: var(--sp-3) var(--sp-3); }
  .saved-streams li span { padding: var(--sp-2) 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .search { order: 3; max-width: none; flex-basis: 100%; }
  .layout { padding: var(--sp-5); }
  .three-grid, .parts { grid-template-columns: repeat(2, 1fr); }
  .day-row { grid-template-columns: 70px 32px 1fr 50px; gap: 0.5rem; }
  .radar-map { height: 225px; }
  .cal .cell { min-height: 64px; padding: var(--sp-2); font-size: var(--fs-small); }
  .severe-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .risk-grid, .fire-grid, .ing-grid, .ozone-grid { grid-template-columns: 1fr; }
  .dlg-2col, .rec-2 { grid-template-columns: 1fr; }
  .metric-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .dlg-hero { flex-direction: column; align-items: flex-start; }
  .why-row { grid-template-columns: 1fr 80px 44px; }
  .pg-row { grid-template-columns: 62px repeat(24, minmax(12px, 1fr)); }
  .page-intro h1 { font-size: var(--fs-title); }
  .quiz-stats { grid-template-columns: 1fr 1fr; }
  .heat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .heat-grid { grid-template-columns: 1fr; }
  .local-note { margin: .6rem 1rem 0; }
  .quiz-modes, .quiz-choices { grid-template-columns: 1fr; }
  .quiz-q { font-size: var(--fs-lead); }
  .timeline li { grid-template-columns: 1fr; gap: 0.25rem; }
  .dict-tools { top: 50px; }
  .dict-az a, .dict-az span { width: 24px; height: 24px; font-size: var(--fs-small); }
  .gauges { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .hero { padding: 1.1rem 1rem 1rem; border-radius: 18px; }
  .hero-temp { font-size: 3.8rem; }
  .hero-icon { font-size: 4rem; }
  .seg-tabs .tab { font-size: var(--fs-text2); padding: var(--sp-3) var(--sp-1); }
  .pages { padding: var(--sp-3) var(--sp-5) 0; }
  .page-wide { padding: var(--sp-5); }
  .air-hero { flex-direction: column; align-items: flex-start; }
  .aqi-scale { grid-template-columns: repeat(3, 1fr); row-gap: .4rem; }
  .events li { grid-template-columns: 56px 28px 1fr; }
  .plan-field textarea { font-size: 16px; }
  .storm { grid-template-columns: 1fr; gap: 0.5rem; }
  .storm-count { display: flex; align-items: baseline; gap: 0.5rem; text-align: left; }
  .cal { gap: 0.25rem; }
  .cal .hi, .cal .lo { display: block; }
}

/* ---------- Storm Guide ---------- */
.page-wide { --sg-cloud: var(--card-2); --sg-storm: color-mix(in srgb, var(--muted) 38%, var(--card)); --sg-edge: var(--text-2);
  --sg-funnel: color-mix(in srgb, var(--muted) 80%, var(--card)); --sg-dust: color-mix(in srgb, #a8743a 45%, var(--card)); }
.sg-life { width: 100%; height: auto; max-height: 260px; display: block; margin: .4rem 0; }
.sg-lbl { font-size: 15px; font-weight: 700; fill: var(--text); }
.sg-note { font-size: 12px; fill: var(--muted); }
.sg-key { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; color: var(--text-2); }
.sg-key i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }
.sg-tools { position: sticky; top: 56px; z-index: 5; }
.sg-tools .chips { margin-bottom: .4rem; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 1rem; }
.sg-card { display: flex; flex-direction: column; gap: 0.75rem; scroll-margin-top: 150px; }
.sg-top { display: grid; grid-template-columns: 96px 1fr; gap: 0.75rem; align-items: center; }
.storm-pic { width: 96px; height: 72px; background: var(--accent-soft); border-radius: 14px; padding: 4px; box-sizing: border-box; }
.sg-top h3 { margin: .25rem 0 .15rem; font-size: var(--fs-lead); }
.sg-one { margin: 0; color: var(--text-2); line-height: 1.45; }
.sg-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sg-now { font-size: var(--fs-small); font-weight: 700; border-radius: 3px; padding: var(--sp-1) var(--sp-3); color: var(--t-good); border: 1px solid currentColor; }
.sg-facts { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sg-facts dt { font-weight: 700; font-size: var(--fs-small); color: var(--text-2); }
.sg-facts dd { margin: .1rem 0 0; line-height: 1.5; }
.sg-season { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; margin-top: .4rem; max-width: 320px; }
.sg-m { height: 26px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-note);
  background: color-mix(in srgb, var(--accent) var(--lvl), var(--card-2)); }
.sg-m b { color: var(--text); font-weight: 700; }
.sg-m[style*="--lvl:65%"] b, .sg-m[style*="--lvl:100%"] b { color: #fff; }
.sg-m.now { outline: 2px solid var(--text); outline-offset: 1px; }
.sg-dangers { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sg-dangers span.d1 { --dc: #d6a400; } .sg-dangers span.d2 { --dc: var(--moderate); } .sg-dangers span.d3 { --dc: var(--t-critical); }
.sg-dangers span { font-size: var(--fs-small); font-weight: 600; padding: var(--sp-1) var(--sp-3); border-radius: 3px; color: var(--dc, var(--t-critical)); background: color-mix(in srgb, var(--dc, var(--t-critical)) 10%, var(--card)); }
.sg-act { background: var(--card-2); border-radius: 12px; padding: var(--sp-4) var(--sp-4); border-left: 4px solid var(--t-good); }
.sg-act p { margin: .25rem 0 0; line-height: 1.5; }
.sg-terms { display: flex; flex-wrap: wrap; gap: 0.25rem .6rem; align-items: baseline; color: var(--muted); }
.linklike { background: none; border: none; padding: 0; color: var(--link); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.sg-shapes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; margin: .6rem 0 1rem; }
@media (max-width: 900px) { .sg-shapes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .sg-shapes { grid-template-columns: repeat(2, 1fr); } }
.sg-shapes figure { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; background: var(--card-2); border-radius: 12px; padding: var(--sp-4); }
.sg-shapes svg { width: 60px; height: 80px; }
.sg-shapes figcaption { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--fs-small); line-height: 1.4; }
.sg-shapes figcaption span { color: var(--text-2); }
.sg-h3 { margin: .4rem 0 .5rem; font-size: var(--fs-body); }
.sg-ef { display: flex; flex-direction: column; gap: 0.5rem; }
.sg-ef-row { display: grid; grid-template-columns: 48px 110px minmax(60px, 160px) 1fr; gap: 0.5rem; align-items: center; }
.sg-ef-badge { font-weight: 700; text-align: center; border-radius: 8px; padding: var(--sp-2) 0; color: #fff; background: color-mix(in srgb, var(--t-critical) var(--lvl), var(--muted)); }
.sg-ef-mph { font-size: var(--fs-text2); }
.sg-ef-bar { height: 8px; background: var(--card-2); border-radius: 4px; overflow: hidden; }
.sg-ef-bar i { display: block; height: 100%; background: var(--t-critical); border-radius: 4px; }
.sg-ef-dmg { font-size: var(--fs-text2); color: var(--text-2); }
.sg-ladder { list-style: none; padding: 0; margin: .6rem 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sg-ladder li { display: flex; gap: 0.75rem; align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--card-2); border-left: 5px solid var(--c); }
.sg-ladder strong { color: var(--c); font-size: var(--fs-body); }
.sg-ladder p { margin: .15rem 0 0; }
.sg-ic { font-size: var(--fs-big); line-height: 1; flex: 0 0 1.9rem; text-align: center; }
.sg-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 640px) {
  .sg-top { grid-template-columns: 76px 1fr; }
  .storm-pic { width: 76px; height: 57px; }
  .sg-ef-row { grid-template-columns: 44px 1fr; }
  .sg-ef-bar { display: none; }
  .sg-ef-dmg { grid-column: 1 / -1; }
  .sg-tools { position: static; }
}

/* ---------- Weather games (Quiz tab) ---------- */
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 0.5rem; margin-top: .6rem; }
.game-card { display: flex; flex-direction: column; text-align: left; border-radius: 14px;
  background: var(--card-2); transition: transform .12s ease, border-color .12s ease; }
.game-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.game-card strong { font-size: var(--fs-body); }
.game-card small { color: var(--text-2); font-size: var(--fs-small); line-height: 1.4; }
.game-card .game-best { color: var(--muted); margin-top: auto; }
.lvl { font-size: var(--fs-small); font-weight: 700; border-radius: 3px; padding: var(--sp-1) var(--sp-3); border: 1px solid currentColor; white-space: nowrap; }
.lvl-easy { color: var(--t-good); }
.lvl-medium { color: var(--t-warn); }
.lvl-hard { color: var(--t-serious); }
.lvl-expert { color: var(--t-critical); }
.g-top { display: flex; flex-wrap: wrap; gap: 0.5rem .8rem; align-items: center; margin-bottom: .8rem; }
.g-title { font-size: var(--fs-lead); }
.g-status { margin-left: auto; font-size: var(--fs-text2); }
.g-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.g-choice { display: flex; align-items: center; gap: 0.75rem; text-align: left; padding: var(--sp-4) var(--sp-5); border-radius: 14px; font-size: var(--fs-body);
  background: var(--card-2); border: 2px solid var(--line); transition: transform .1s ease, border-color .1s ease; }
.g-choice:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent); }
.g-choice:disabled { cursor: default; }
.g-choice.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 16%, var(--card-2)); animation: pop .35s ease; }
.g-choice.right .qk { background: var(--good); color: #fff; border-color: var(--good); }
.g-choice.wrong { border-color: var(--extreme); background: color-mix(in srgb, var(--extreme) 14%, var(--card-2)); animation: shake .35s ease; }
.g-choice.close { border-color: var(--minor); background: color-mix(in srgb, var(--minor) 16%, var(--card-2)); }
.quiz-explain.close { border-color: var(--minor); background: color-mix(in srgb, var(--minor) 10%, var(--card-2)); }


/* Weather Word */
.word-board { display: grid; gap: 6px; justify-content: center; margin: .6rem 0; }
.word-row { display: grid; grid-template-columns: repeat(5, 52px); gap: 6px; }
.word-tile { height: 52px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-big); font-weight: 700; border-radius: 8px;
  border: 2px solid var(--line); text-transform: uppercase; }
.word-tile.typed { border-color: var(--muted); animation: pop .15s ease; }
.word-tile.hit, .kb-key.hit { background: var(--good); border-color: var(--good); color: #fff; }
.word-tile.near, .kb-key.near { background: var(--minor); border-color: var(--minor); color: #fff; }
.word-tile.miss, .kb-key.miss { background: var(--muted); border-color: var(--muted); color: #fff; }
.word-msg { min-height: 1.4em; text-align: center; font-weight: 600; margin: .3rem 0; }
.kb { display: flex; flex-direction: column; gap: 6px; align-items: center; margin: .4rem 0 .6rem; }
.kb-row { display: flex; gap: 5px; }
.kb-key { min-width: 32px; height: 46px; padding: 0 var(--sp-2); border-radius: 8px; font-weight: 700; background: var(--card-2); }
.kb-key.wide { min-width: 58px; font-size: var(--fs-small); }

/* Lightning Round */
.lr-clock { width: 84px; height: 84px; margin: 0 auto .6rem; border-radius: 50%; border: 5px solid var(--accent); display: flex; flex-direction: column;
  align-items: center; justify-content: center; font-size: var(--fs-huge); font-weight: 700; line-height: 1; }
.lr-clock small { font-size: var(--fs-note); font-weight: 600; color: var(--muted); }
.lr-clock.low { border-color: var(--extreme); color: var(--t-critical); animation: pop 1s ease infinite; }
.lr-answer { font-size: var(--fs-lead); background: var(--card-2); border-radius: 12px; padding: var(--sp-4) var(--sp-5); }
.lr-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; border-radius: 16px; }
.lr-btn { font-size: var(--fs-lead); font-weight: 700; padding: var(--sp-5); border-radius: 14px; border: 2px solid var(--line); background: var(--card-2); }
.lr-btn.yes:hover { border-color: var(--good); }
.lr-btn.no:hover { border-color: var(--extreme); }
.lr-btn kbd { font-size: var(--fs-note); opacity: .6; margin-left: .3rem; }
.lr-buttons.flash-ok { animation: flashOk .4s ease; }
.lr-buttons.flash-no { animation: shake .35s ease; }
@keyframes flashOk { 50% { box-shadow: 0 0 0 4px var(--good); } }

/* Dress for the Weather */
.dress-scene { display: flex; gap: 0.75rem; align-items: center; background: var(--card-2); border-radius: 14px; padding: var(--sp-4) var(--sp-5); margin-bottom: .5rem; }
.dress-sky { font-size: var(--fs-huge); }
.dress-facts { color: var(--text-2); font-size: var(--fs-text2); margin-top: .2rem; }
.dress-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 0.5rem; margin: .6rem 0; }
.dress-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: var(--sp-4) var(--sp-3); border-radius: 14px; background: var(--card-2);
  border: 2px solid var(--line); font-weight: 600; font-size: var(--fs-text2); text-align: center; }
.dress-item span { font-size: var(--fs-huge); }
.dress-item small { font-weight: 600; font-size: var(--fs-small); color: var(--text-2); }
.dress-item.on { border-color: var(--accent); background: var(--accent-soft); }
.dress-item.good { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--card-2)); }
.dress-item.missed { border-color: var(--minor); border-style: dashed; }
.dress-item.extra { border-color: var(--extreme); background: color-mix(in srgb, var(--extreme) 10%, var(--card-2)); }

/* Radar pictures, Ingredients Lab, Warning Desk */
.radar-pic { display: block; width: 100%; max-width: 360px; margin: 0 auto 1rem; border-radius: 12px; }
.lab-ings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.lab-ing { display: flex; flex-direction: column; gap: 0.25rem; background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); }
.lab-ing strong { font-size: var(--fs-lead); }
.lab-ing span { font-size: var(--fs-small); font-weight: 700; color: var(--link); }
.desk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.desk .radar-pic { margin: 0; }
.desk-title { margin: 0 0 .4rem; font-size: var(--fs-body); }
.desk-facts { margin: 0; padding-left: var(--sp-5); line-height: 1.6; }
@media (max-width: 640px) {
  .g-choices, .desk { grid-template-columns: 1fr; }
  .word-row { grid-template-columns: repeat(5, 40px); gap: 5px; }
  .word-board { gap: 5px; }
  .word-tile { height: 40px; font-size: var(--fs-lead); }
  .kb-row { gap: 4px; }
  .kb-key { min-width: 0; width: calc((100vw - 90px) / 10); padding: 0; height: 42px; }
  .kb-key.wide { width: calc((100vw - 90px) / 10 * 1.5); }
  .g-status { margin-left: 0; width: 100%; }
}

/* ---------- Badge cards (games) ---------- */
.rarity-easy { --rar: #6b7c93; --rar2: #a9b6c8; }
.rarity-medium { --rar: #1f8a4c; --rar2: #6fd29a; }
.rarity-hard { --rar: #1f62c9; --rar2: #7fb2ff; }
.rarity-expert { --rar: #7a3fc4; --rar2: #c79bff; }
.rarity-legend { --rar: #b8860b; --rar2: #ffd766; }
.card-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(120px, 100%), 1fr)); gap: 0.5rem; }
.mini-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; padding: var(--sp-3) var(--sp-3);
  border-radius: 12px; background: var(--card-2); border: 2px solid var(--rar, var(--line)); font-size: var(--fs-small); }
button.mini-card { background: linear-gradient(160deg, color-mix(in srgb, var(--rar2) 22%, var(--card-2)), var(--card-2)); transition: transform .12s ease; }
button.mini-card:hover { transform: translateY(-3px) rotate(-1deg); }
.mini-card strong { line-height: 1.2; }
.mini-card small { color: var(--text-2); font-size: var(--fs-small); line-height: 1.3; }
.mini-card .fun-art { width: 70px; height: 52px; }
.mini-ic { position: absolute; top: 4px; left: 6px; font-size: var(--fs-body); }
.mini-card.locked { border-style: dashed; opacity: .75; min-height: 110px; justify-content: center; }
.mini-card.locked .mini-ic { position: static; font-size: var(--fs-big); }
.badge-btn { border: none; cursor: pointer; }
.badge-btn:hover { filter: brightness(1.1); }

.fun-card-dialog { border: none; padding: 0; background: transparent; max-width: min(360px, calc(100vw - 32px)); width: 100%; overflow: visible;
  --sg-cloud: var(--card-2); --sg-storm: color-mix(in srgb, var(--muted) 38%, var(--card)); --sg-edge: var(--text-2);
  --sg-funnel: color-mix(in srgb, var(--muted) 80%, var(--card)); --sg-dust: color-mix(in srgb, #a8743a 45%, var(--card)); }
.fun-card-dialog::backdrop { background: rgba(5, 10, 20, .65); backdrop-filter: blur(3px); }
.fun-card { position: relative; overflow: hidden; color: var(--text); background: var(--card); border-radius: 22px; padding: var(--sp-5) var(--sp-5) var(--sp-5);
  border: 5px solid transparent; background-image: linear-gradient(var(--card), var(--card)), linear-gradient(135deg, var(--rar), var(--rar2), var(--rar));
  background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); }
.fun-card.is-new { animation: cardIn .6s cubic-bezier(.2, 1.4, .4, 1); }
.fun-card.is-new::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-100%); animation: shine 1.4s .5s ease; }
@keyframes cardIn { from { transform: scale(.6) rotateY(90deg); opacity: 0; } }
@keyframes shine { to { transform: translateX(100%); } }
.fun-new { text-align: center; font-weight: 700; color: var(--rar); margin-bottom: .4rem; }
.fun-head { display: flex; justify-content: space-between; font-size: var(--fs-small); font-weight: 700; color: var(--text-2); }
.fun-rarity { color: #fff; background: var(--rar); border-radius: 3px; padding: var(--sp-1) var(--sp-3); text-transform: uppercase; letter-spacing: .05em; }
.fun-frame { position: relative; margin: .6rem 0; border-radius: 14px; padding: var(--sp-3);
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--rar2) 45%, var(--card-2)), var(--card-2) 70%); }
.fun-frame .fun-art { display: block; width: 100%; height: auto; max-height: 170px; }
.fun-icon { position: absolute; right: 10px; bottom: 8px; font-size: var(--fs-huge); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.fun-name { text-align: center; margin: .2rem 0; font-size: var(--fs-big); }
.fun-how { text-align: center; font-size: var(--fs-text2); margin: 0 0 .7rem; color: var(--text-2); }
.fun-fact { background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--rar); }
.fun-fact p { margin: .25rem 0 0; line-height: 1.5; font-size: var(--fs-text2); }
@media (prefers-reduced-motion: reduce) { .fun-card.is-new, .fun-card.is-new::after { animation: none; } }

/* ---------- Live sky cams ---------- */
.cam-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: .6rem 0; }
.cam-tile { position: relative; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border-radius: 10px; background: #1b2230; border: 2px solid transparent; }
.cam-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.cam-tile:hover img { transform: scale(1.05); }
.cam-tile.active { border-color: var(--accent); }
.cam-tile strong { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5) var(--sp-3) var(--sp-2); font-size: var(--fs-small); color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75)); }
.cam-live { position: absolute; top: 6px; left: 6px; font-size: var(--fs-note); font-weight: 700; color: #fff; background: #d32f2f; border-radius: 4px; padding: var(--sp-1) var(--sp-2); }
.cam-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--fs-big); color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6); opacity: .85; }
.cam-tile.offline img { visibility: hidden; }
.cam-tile.offline .cam-live { background: #555; }
.cam-tile.offline .cam-live::after { content: ' (offline?)'; }
.cam-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.cam-links li { display: flex; flex-direction: column; }
.cam-links a { font-weight: 700; text-decoration: none; }
.cam-links a:hover { text-decoration: underline; }
#camClose { margin-bottom: .5rem; }

/* ---------- Warnings: labeled details ---------- */
.alert-dl { margin: .5rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--fs-text2); line-height: 1.5; }
.alert-dl > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0.5rem; }
.alert-dl > div.wide { grid-template-columns: minmax(0, 1fr); }
.alert-dl dt { font-weight: 700; font-size: var(--fs-small); color: var(--text-2); padding-top: var(--sp-1); }
.alert-dl dd { margin: 0; }
.alert-dl ul { margin: 0; padding-left: var(--sp-5); }
.alert-dl a { overflow-wrap: anywhere; }
@media (max-width: 640px) { .alert-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ---------- Phone alert settings pop-up ---------- */
.settings-btn { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin: .7rem 0; padding: var(--sp-4) var(--sp-5); border-radius: 12px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); text-align: left; font-weight: 700; }
.settings-btn span { flex: 1; }
.settings-btn small { font-weight: 600; color: var(--text-2); font-size: var(--fs-small); }
.settings-btn b { font-size: var(--fs-lead); color: var(--link); }
.settings-btn:hover { border-color: var(--accent); }
.settings-dialog { width: min(520px, calc(100vw - 32px)); }
.settings-body { padding: var(--sp-3) var(--sp-5) var(--sp-5); }
.settings-body > p:first-child { margin-top: .2rem; }

/* ---------- Cleanup pass: menu fit, search, Live Coverage ---------- */
.pages { justify-content: safe center; gap: 0.25rem; }
.pages button { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-text2); }
.search-word { display: inline; }
.legend-line { display: block; margin-top: .15rem; }
.stream-form .row { flex-wrap: nowrap; align-items: center; }
.stream-form .row .small-btn { flex: 0 0 auto; align-self: auto; }
.stream-form .play-btn { flex: 0 0 auto; background: var(--accent-fill); color: #fff; border-color: var(--accent); font-weight: 700; }
#liveCard .subhead { margin-top: .8rem; }
@media (max-width: 640px) {
  .search-word { display: none; }
  .stream-form .row { flex-wrap: wrap; }
}

/* A heading that starts a new group of cards within a page (e.g. Air & allergies on Hazards) */
.section-intro { margin: 1.2rem .2rem 0; padding-top: var(--sp-5); border-top: 2px solid var(--line); scroll-margin-top: 64px; }
.section-intro h2 { margin: 0 0 .2rem; font-size: var(--fs-title); }
.section-intro p { margin: 0; color: var(--text-2); }

/* Tabs that hold several pages (Earth, Learn): the row of buttons that switches between them */
.subtabs { display: inline-flex; align-self: flex-start; width: fit-content; gap: 0.25rem; padding: var(--sp-2); margin: .2rem .2rem .4rem; border-radius: 3px; background: var(--card); border: 1px solid var(--line); }
.subtabs button { border: none; background: transparent; border-radius: 3px; padding: var(--sp-3) var(--sp-5); font-weight: 700; color: var(--text-2); }
.subtabs button:hover { background: var(--card-2); }
.subtabs button.active { background: var(--accent-fill); color: #fff; }

/* ---------- Readability: headings stand apart from body text ---------- */
/* Card titles sit above a thin rule, so each card's topic is clear at a glance */
.card > .card-head, .card > h2:first-child { padding-bottom: var(--sp-3); margin-bottom: .85rem; border-bottom: 1px solid var(--line); }
.card > .card-head h2 { margin: 0; }
.card-head > .muted, .card-head > span.small { font-size: var(--fs-small); }
.explain > strong { font-size: var(--fs-body); }
.subhead .muted { font-weight: 600; font-size: var(--fs-text2); }

/* ---------- Safety plan: compact layout ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem .9rem; }
.plan-grid .plan-field { margin: 0; }
.plan-field span { font-size: var(--fs-text2); font-weight: 700; }
.plan-field textarea { resize: none; overflow: hidden; min-height: 2.3rem; line-height: 1.4; }
/* Storm kit as tiles that light up when packed, with a progress ring (renderPlan / kitStatus in severe.js) */
.kit-head { display: flex; align-items: center; gap: 0.75rem; margin-top: .9rem; }
.kit-head .subhead { margin: 0; white-space: nowrap; }
.kit-ring { width: 56px; height: 56px; flex: none; }
.kit-ring circle { fill: none; stroke-width: 6; }
.kit-ring-bg { stroke: var(--line); }
.kit-ring-fill { stroke: var(--good); stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.kit-ring text { font-size: 14px; font-weight: 700; fill: var(--text); }
.kit-say { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); color: var(--text-2); }
.kit { grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); gap: 0.5rem; margin-top: .6rem; font-size: var(--fs-small); }
.kit .kit-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 5.5rem; padding: var(--sp-2); border-radius: 10px; border: 1.5px dashed var(--line); background: var(--card-2); text-align: center; line-height: 1.25; cursor: pointer; transition: background .2s, border-color .2s; }
.kit .kit-item input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.kit-ic { font-size: 1.8rem; line-height: 1; filter: grayscale(1); opacity: .45; transition: filter .2s, opacity .2s, transform .2s; }
.kit-name { color: var(--text-2); }
.kit-tick { position: absolute; top: 6px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--good); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; transform: scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.kit .kit-item:hover { border-color: var(--muted); }
.kit .kit-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.kit .kit-item:has(input:checked) { border-style: solid; border-color: color-mix(in srgb, var(--good) 60%, transparent); background: color-mix(in srgb, var(--good) 12%, var(--card-2)); }
.kit .kit-item:has(input:checked) .kit-ic { filter: none; opacity: 1; animation: kit-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.kit .kit-item:has(input:checked) .kit-name { color: var(--text); font-weight: 600; }
.kit .kit-item:has(input:checked) .kit-tick { transform: scale(1); }
@keyframes kit-pop { 50% { transform: scale(1.25); } }
@media (max-width: 640px) { .kit .kit-item { min-height: 5rem; padding: var(--sp-2) 4px; font-size: var(--fs-note); } .kit-ic { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .kit-ic, .kit-tick, .kit-ring-fill { transition: none; animation: none !important; } }
.plan-tips { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: .9rem; }
.plan-tips .explain { margin: 0; }
.plan-tips .explain p { font-size: var(--fs-text2); line-height: 1.45; margin: .3rem 0 0; }
@media (max-width: 760px) {
  .plan-grid, .plan-tips { grid-template-columns: 1fr; }
  .kit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.stream-form .row:last-child { flex-wrap: wrap; }
.stream-form .row:last-child input { flex: 1 1 100%; }

/* ---------- Readability pass ---------- */
:root { --accent-fill: #2468c4; --link: #1f63bd; }
@media (prefers-color-scheme: dark) { :root { --accent-fill: #2466c2; --link: #7db4f5; } }
/* Paragraphs: comfortable spacing and a readable line length (about 75 characters) */
.card p, .explain p, .alert-dl dd, .dict-entry p, .sg-facts dd, .hero-summary, .page-intro p { line-height: 1.6; max-width: 75ch; }
.card li { line-height: 1.55; }
/* Alert badges: dark text on the light yellow/orange ones, deeper red behind white text */
.badge, .badge.Moderate { color: #1c1400; }
.badge.Severe { background: #c7371f; color: #fff; }
.badge.Extreme { color: #fff; }
/* Earthquake magnitude: a colored ring (age of the quake) around readable text */
.mag-badge { background: color-mix(in srgb, var(--c, #888) 22%, var(--card)); border: 3px solid var(--c, #888); color: var(--text); }

/* ---------- Compact alerts: summary in the card, full text in a pop-up ---------- */
.alert-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.alert-top .alert-title { margin-bottom: .1rem; }
.alert-more { flex: 0 0 auto; white-space: nowrap; }
.alert-sum { margin: .35rem 0 0; font-size: var(--fs-text2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.alert.urgent .alert-sum { -webkit-line-clamp: 3; }
.alert-dialog { width: min(680px, calc(100vw - 32px)); }
.alert-dialog .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; margin: .2rem 0 .6rem; }

/* ---------- Planner: air & allergies ---------- */
.pa-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.pa-day { background: var(--card-2); border-radius: 12px; padding: var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: 0.5rem; }
.pa-when { font-weight: 700; }
.pa-item { display: grid; grid-template-columns: 1fr auto; column-gap: .5rem; align-items: baseline; }
.pa-item span { font-size: var(--fs-text2); color: var(--text-2); }
.pa-item strong { text-align: right; }
.pa-item small { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-small); }
.pa-nudge { margin: .7rem 0 0; padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: var(--accent-soft); }
.pa-tips { margin: .6rem 0 .3rem; }
.pa-tip { margin: .35rem 0 0; padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: var(--card-2); font-size: var(--fs-text2); }
@media (max-width: 640px) {
  /* Phones: keep the 3 days side by side, value under each label, fine print hidden */
  .pa-grid { gap: 0.5rem; }
  .pa-day { padding: var(--sp-3) var(--sp-3); gap: 0.5rem; }
  .pa-when { font-size: var(--fs-text2); overflow-wrap: normal; word-break: keep-all; }
  .pa-item { grid-template-columns: 1fr; }
  .pa-item strong { text-align: left; font-size: var(--fs-text2); line-height: 1.25; }
  .pa-item span { font-size: var(--fs-small); }
  .pa-item small { display: none; }
}

/* Helper status pill: a lighter tint keeps the green text readable in light mode */
.hb-pill.ok { background: color-mix(in srgb, var(--good) 10%, transparent); }

/* Phones: alert details and alert settings fill the screen like the other pop-ups */
@media (max-width: 640px) { .settings-dialog, .alert-dialog { width: 100vw; max-width: 100vw; } }

/* Hazards: why the tab has a dot */
.page-intro .hz-why { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem .45rem; margin: .7rem 0 0; padding: var(--sp-3) var(--sp-4); border-radius: 12px;
  background: color-mix(in srgb, var(--t-warn) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--t-warn) 35%, var(--line)); max-width: none; }
.hz-why-item { font-size: var(--fs-text2); font-weight: 600; padding: var(--sp-2) var(--sp-4); border-radius: 3px; background: var(--card); border: 1px solid var(--line); color: var(--text); }
.hz-why-item:hover { border-color: var(--accent); }
.hz-why-item.serious { border-color: var(--t-critical); color: var(--t-critical); }

/* ---------- At-a-glance tiles (Space, Quakes) ---------- */
.glance-card { padding: var(--sp-4); }
.glance-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 0.5rem; }
.glance { display: flex; gap: 0.5rem; align-items: center; background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); min-width: 0; }
.glance .g-ic { font-size: var(--fs-big); line-height: 1; flex: 0 0 auto; }
.g-label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.g-value { font-size: var(--fs-lead); font-weight: 700; line-height: 1.25; }
.g-sub { font-size: var(--fs-small); color: var(--text-2); line-height: 1.3; }
#quakeSummary { margin: .6rem 0; }
#glanceSpaceWx { display: contents; }
/* ---------- Space: planets list, compact events, space weather stats ---------- */
.planet-list { list-style: none; padding: 0; margin: 0; }
.planet-list li { display: grid; grid-template-columns: minmax(170px, auto) 1fr; gap: 0.25rem 1rem; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.planet-list li:last-child { border-bottom: none; }
.pl-name { grid-row: span 2; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pl-bright { font-size: var(--fs-small); color: var(--muted); }
.pl-tip { font-size: var(--fs-small); color: var(--text-2); }
.pl-hidden { margin: .5rem 0 0; }
.events.compact li { padding: var(--sp-3) var(--sp-2); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: .7rem; }
.card-foot .small-btn { align-self: center; }
.sw-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.sw-stats > div { display: flex; flex-direction: column; background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); }
.sw-stats .label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.sw-stats strong { font-size: var(--fs-title); }
.sw-stats span:last-child { font-size: var(--fs-text2); color: var(--text-2); }
.list-dialog { width: min(720px, calc(100vw - 32px)); }
/* ---------- Quakes: two-line rows ---------- */
.quake-list li { align-items: center; }
.q-text { display: flex; flex-direction: column; min-width: 0; }
.q-place { font-weight: 700; color: var(--text); text-decoration: none; }
.q-place:hover { text-decoration: underline; color: var(--link); }
.q-felt { color: var(--t-warn); font-weight: 700; }
@media (max-width: 640px) {
  .planet-list li { grid-template-columns: 1fr; }
  .pl-name { grid-row: auto; }
  .sw-stats { grid-template-columns: 1fr; }
  .glance-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .glance { padding: var(--sp-3) var(--sp-4); gap: 0.75rem; }
  .glance .g-ic { font-size: var(--fs-title); width: 1.6rem; text-align: center; }
  .g-value { font-size: var(--fs-body); }
  .list-dialog { width: 100vw; max-width: 100vw; }
}

/* Outdoors page: planner and hazards as two groups of cards */
.section-group { display: flex; flex-direction: column; gap: 1rem; }
.section-group > .card, .section-group > .section-intro { scroll-margin-top: 64px; }
.section-group > .section-intro:first-child { margin-top: .4rem; }

/* History: at-a-glance tiles fill in as each section loads */
.hg { display: contents; }
.rec-line { margin: .4rem 0 0; }
#page-history .glance-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { #page-history .glance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { #page-history .glance-row { grid-template-columns: 1fr; } }

/* ---------- Game banners ---------- */
.games-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: #fff; border-radius: 16px; padding: var(--sp-5) var(--sp-5);
  background: linear-gradient(120deg, #3b2f9e, #2f7de0 55%, #12a17d); box-shadow: var(--shadow); }
.games-hero h2 { margin: 0 0 .15rem; padding: 0; border: none; font-size: var(--fs-big); color: #fff; }
.games-hero p { margin: 0; color: rgba(255, 255, 255, .92); max-width: none; }
.games-hero-icons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.games-hero-icons span { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-title); border-radius: 50%;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35); }
.games-hero-icons span:nth-child(odd) { transform: translateY(-3px); }
.card > .games-hero:first-child { margin-bottom: .9rem; }

.game-card { position: relative; padding: 0; overflow: hidden; gap: 0; align-items: stretch; }
.game-banner { display: block; height: 92px; background: linear-gradient(135deg, var(--g1), var(--g2)); }
.game-banner svg { display: block; width: 100%; height: 100%; }
.game-card:hover .game-banner svg { transform: scale(1.05); transition: transform .25s ease; }
.game-body { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--sp-4) var(--sp-5) var(--sp-5); flex: 1; }
.lvl.on-banner { color: #fff; background: rgba(8, 14, 24, .55); border-color: rgba(255, 255, 255, .35); backdrop-filter: blur(2px); }
.game-card .lvl.on-banner { position: absolute; top: 8px; left: 8px; }

/* The banner across the top of a game while you play */
.g-top.g-hero { position: relative; overflow: hidden; color: #fff; border-radius: 14px; padding: var(--sp-4) var(--sp-5); min-height: 64px; }
.g-hero .game-banner.wide { position: absolute; inset: 0; height: auto; z-index: 0; }
.g-hero .game-banner.wide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 10, 18, .62) 0%, rgba(6, 10, 18, .35) 55%, rgba(6, 10, 18, 0) 85%); }
.g-hero > :not(.game-banner) { position: relative; z-index: 1; }
.g-hero .g-title { font-size: var(--fs-title); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.g-hero .small-btn { color: #fff; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
.g-hero .small-btn:hover { background: rgba(255, 255, 255, .3); }
.g-hero .g-status { font-weight: 600; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); background: rgba(6, 10, 18, .45); border-radius: 3px; padding: var(--sp-1) var(--sp-4); }
.g-hero .g-status:empty { display: none; }
@media (max-width: 640px) {
  .games-hero-icons { display: none; }
  .game-banner { height: 78px; }
  .g-hero .g-status { margin-left: auto; width: auto; font-size: var(--fs-small); }
  .g-top.g-hero { padding: var(--sp-3) var(--sp-4); gap: 0.5rem .5rem; min-height: 0; margin-bottom: .6rem; }
  .g-hero .lvl { display: none; }
  .g-hero .g-title { font-size: var(--fs-body); }
  .g-hero .small-btn { padding: var(--sp-2) var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) { .game-card:hover .game-banner svg { transform: none; } }

/* Space: tonight's times and Moon dates side by side */
.sky-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
/* Today's allergy details: label on the left, detail on the right */
.allergy-detail { list-style: none; padding: 0; margin: 0 0 .6rem; }
.allergy-detail li { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 0.25rem 1rem; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.allergy-detail li > span { color: var(--text-2); }
@media (max-width: 640px) { .sky-cols, .allergy-detail li { grid-template-columns: 1fr; } }

/* ---------- Right now + forecast in one card ---------- */
.now-card { border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.now-card .hero { border-radius: 0; box-shadow: none; }
.now-forecast { padding: var(--sp-5) var(--sp-5) var(--sp-5); }
.now-forecast .tabs { margin-bottom: .8rem; }
@media (max-width: 640px) { .now-forecast { padding: var(--sp-4) var(--sp-4) var(--sp-5); } }

/* ---------- Public site: welcome + "not an official source" notice, local station buttons ---------- */
.public-note { max-width: 1300px; margin: .6rem auto 0; padding: var(--sp-3) var(--sp-5); font-size: var(--fs-text2); border-radius: 12px; background: var(--accent-soft); color: var(--text-2);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: center; }
.public-note .pn-official { color: var(--text); }
.local-stations { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: .6rem; }

/* ---------- Problem log (footer link + pop-up) ---------- */
.link-btn { background: none; border: 0; padding: var(--sp-2) var(--sp-3); margin-top: .3rem; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: .6rem 0; }
.problem-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.problem-log li { padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: var(--accent-soft); }
.pl-when { font-size: var(--fs-small); color: var(--text-2); }
.pl-msg { font-weight: 600; overflow-wrap: anywhere; user-select: text; }

/* ---------- Nearby webcams (Windy) ---------- */
.wcam .wcam-mi { display: block; font-size: var(--fs-note); font-weight: 400; opacity: .85; }
.wcam-player iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; }
.wcam-big { width: 100%; border-radius: 10px; display: block; }
#windyCams { margin-bottom: .7rem; }

/* ---------- Site index ---------- */
/* One card per page, packed into columns so a long page (Outdoors) doesn't leave gaps beside it */
.index-grid { columns: 3 290px; column-gap: .8rem; margin-bottom: .2rem; }
.index-card { margin: 0 0 .8rem; break-inside: avoid; }
.index-card h2 { margin-bottom: .6rem; }
.index-card h2 .linklike { font-weight: 700; }
.index-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.index-list .linklike { font-weight: 600; text-align: left; }
.index-inside { font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); margin-top: .1rem; }
.index-inside .linklike { font-weight: 600; }
.index-note { font-size: var(--fs-small); color: var(--muted); }
.index-sub { margin-top: -.3rem; padding-left: var(--sp-5); }
.index-sub > .linklike { font-weight: 600; }
.index-plain { font-size: var(--fs-text2); color: var(--text-2); }
/* The site index as one numbered outline: I. tab, A. page, 1. section, a. what's inside, i. one level further */
#siteIndex { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: .8rem; }
.ix-tools .ix-find { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.ix-tools input { flex: 1 1 260px; min-width: 0; padding: var(--sp-3) var(--sp-4); border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; }
.ix-toc { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: .7rem 0 .2rem; }
.ix-toc .linklike { font-weight: 600; }
.ix-tab > details > summary { list-style: none; cursor: pointer; }
.ix-tab > details > summary::-webkit-details-marker { display: none; }
.ix-tab > details > summary h2 { display: inline-flex; align-items: baseline; gap: 0.5rem; margin: 0; }
.ix-tab > details > summary h2::after { content: '▾'; font-size: var(--fs-small); color: var(--muted); }
.ix-tab > details:not([open]) > summary h2::after { content: '▸'; }
.ix-tab h2 .ix-name { font-size: var(--fs-title); font-weight: 700; }
.ix-tab > details > .ix-about { margin: .3rem 0 .5rem; }
.ix-list { list-style: none; margin: .2rem 0 0; padding: 0; }
.ix-list .ix-list { margin-left: .9rem; padding-left: var(--sp-5); border-left: 1px solid var(--line); }
.ix-line { display: flex; align-items: baseline; gap: 0.5rem; padding: var(--sp-1) var(--sp-2); border-radius: 6px; }
.ix-body { min-width: 0; flex: 1; }
.ix-num, .ix-ref { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
.ix-num { flex: 0 0 auto; min-width: 1.6em; text-align: right; font-size: var(--fs-small); }
.ix-ref { font-size: var(--fs-small); }
.ix-list .linklike { text-align: left; }
.ix-d2 > .ix-line .ix-name { font-size: var(--fs-lead); font-weight: 700; }
.ix-d2 { margin-top: .45rem; }
.ix-d3 > .ix-line .ix-name { font-weight: 700; }
.ix-d4 > .ix-line .ix-name, .ix-d5 > .ix-line .ix-name, .ix-d6 > .ix-line .ix-name { font-weight: 600; font-size: var(--fs-text2); }
.ix-about { font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); }
.ix-see, .ix-words { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); margin-top: .1rem; }
.ix-see .linklike, .ix-words .linklike { font-weight: 600; }
.ix-steps { list-style: none; margin: .3rem 0 0; padding-left: var(--sp-5); border-left: 2px solid var(--accent); }
.ix-steps .ix-line { padding: var(--sp-1) var(--sp-2); }
.ix-hit > .ix-line { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.ix-fold { margin: .1rem 0 0 2.1rem; }
.ix-fold > summary { cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--link); list-style: none; }
.ix-fold > summary::-webkit-details-marker { display: none; }
.ix-fold[open] > summary { color: var(--muted); }
.index-ok { font-weight: 700; }
.index-bad { font-weight: 700; color: var(--extreme); }
.index-problems { margin: .3rem 0 .6rem; padding-left: var(--sp-5); }

.cam-live.cam-photo { background: rgba(0, 0, 0, .65); }
.cam-tile.offline .cam-photo::after { content: ' (not loading)'; }

/* ---------- USGS page: rivers & lakes, quake details, magnetic field ---------- */
.water-fast { color: var(--extreme); font-weight: 700; }
.quake-facts { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); margin-bottom: .6rem; }
.quake-facts .value { font-size: var(--fs-body); }
/* Garden: the watering guide, one pair of bars a day */
.wg-pick { margin-bottom: .6rem; }
.wg-chart { display: flex; align-items: flex-end; height: 120px; gap: 2px; margin: .8rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.wg-day { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.wg-day i { display: block; width: 38%; max-width: 16px; border-radius: 3px 3px 0 0; min-height: 1px; }
.wg-use { background: var(--warm); }
.wg-rain { background: var(--cool); }
.wg-ahead i { opacity: .45; }
.wg-today { background: var(--accent-soft); border-radius: 6px 6px 0 0; }
.wg-day span { position: absolute; top: 100%; margin-top: .2rem; font-size: var(--fs-note); color: var(--muted); white-space: nowrap; }
.wg-today span { font-weight: 700; color: var(--text); }
/* Hazards: the longer view */
.la-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 0.5rem; margin: .4rem 0 .5rem; }
.la-day { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: var(--sp-3) var(--sp-2); border-radius: 10px; background: var(--card-2); font-size: var(--fs-small); text-align: center; }
.la-day span { color: var(--text-2); font-size: var(--fs-small); }
.la-day.la-lo { background: color-mix(in srgb, var(--minor) 28%, var(--card-2)); }
.la-day.la-hi { background: color-mix(in srgb, var(--extreme) 30%, var(--card-2)); }
.hr-days .hr-1 { background: color-mix(in srgb, #f5d000 30%, var(--card-2)); }
.hr-days .hr-2 { background: color-mix(in srgb, #ff8c00 32%, var(--card-2)); }
.hr-days .hr-3 { background: color-mix(in srgb, #e02020 34%, var(--card-2)); }
.hr-days .hr-4 { background: color-mix(in srgb, #b0207a 40%, var(--card-2)); }
.hr-months i { background: var(--extreme); opacity: .7; }
.wh-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; height: 130px; margin: .6rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.wh-chart > div { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.wh-stack { width: 70%; height: 100%; display: flex; flex-direction: column-reverse; }
.wh-stack i { display: block; width: 100%; }
.wh-chart span { position: absolute; top: 100%; margin-top: .2rem; font-size: var(--fs-note); color: var(--muted); }
@media (max-width: 640px) { .sw-stats.hr-grid { grid-template-columns: 1fr; } .sw-stats.hr-grid > * { flex-basis: 100%; } }
/* What could hit this spot: every tornado track within 25 miles, around the spot (tornadoScope in hazards.js) */
.ts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.ts-scope { width: min(100%, 360px); height: auto; flex: none; }
.ts-disc { fill: color-mix(in srgb, var(--card-2) 80%, #0b1a2e); }
.ts-ring { fill: none; stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ts-axis { stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 2 3; opacity: .6; }
.ts-lab { font-size: 1.6px; fill: var(--muted); paint-order: stroke; stroke: var(--card); stroke-width: .45px; }
.ts-n { font-weight: 700; }
.ts-track { stroke-linecap: round; opacity: .8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ts-draw .5s ease-out forwards; animation-delay: var(--d); }
.ts-track:hover { opacity: 1; stroke-width: .6 !important; }
.ts-top { font-size: 1.9px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--card); stroke-width: .5px; }
.ts-home { fill: var(--accent); stroke: #fff; stroke-width: .35; }
.ts-side { flex: 1 1 15rem; min-width: 0; }
.ts-big { font-size: var(--fs-body); margin: 0 0 var(--sp-1); }
.ts-big b { font-size: var(--fs-lead); }
.ts-key { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.ts-key span { display: inline-flex; align-items: center; gap: 0.25rem; }
.ts-key i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; }
@keyframes ts-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ts-track { animation: none; stroke-dashoffset: 0; } }
.key i.fz-floodway { height: 10px; background: repeating-linear-gradient(45deg, #e05050 0 2px, transparent 2px 5px); }
.drill-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: .5rem 0; }
.drill-steps { margin: .4rem 0; padding-left: var(--sp-6); line-height: 1.7; }
.drill-clock { font-size: var(--fs-big); font-variant-numeric: tabular-nums; }
/* Solar: a typical year, and panels grouped by roof face */
.sy-chart { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; height: 120px; align-items: end; margin: .8rem 0 1.4rem; border-bottom: 1px solid var(--line); }
.sy-chart > div { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.sy-chart i { display: block; width: 70%; background: var(--moderate); border-radius: 4px 4px 0 0; opacity: .75; }
.sy-chart .sy-now i { opacity: 1; }
.sy-chart b { position: absolute; left: 8%; right: 8%; height: 3px; background: var(--text); border-radius: 2px; }
.sy-chart span { position: absolute; top: 100%; margin-top: .2rem; font-size: var(--fs-note); color: var(--muted); }
.sy-chart .sy-now span { color: var(--text); font-weight: 700; }
.face-head { font-size: var(--fs-text2); margin: .8rem 0 .35rem; }
/* Earthquakes: hot spots, the phone-alert line, map lines, the yearly chart and the magnitude ladder */
.q-hot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem .5rem; margin: .6rem 0 0; }
.q-hot .small-btn { align-self: center; }
.q-alerts { margin: .5rem 0 0; }
.key i.q-fault-k { height: 3px; background: #ff7a45; }
.key i.q-plate-k { height: 2px; background: #e8a33d; }
.qy-bar { fill: var(--warm); opacity: .85; }
.qy-bar.qy-now { opacity: .4; }
.qy-limits { fill: color-mix(in srgb, var(--good) 14%, transparent); }
.qy-note { fill: var(--text-2); font-weight: 700; }
.qy-mark { fill: var(--extreme); stroke: var(--card); stroke-width: 1.5; }
.mag-ladder { display: grid; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ml-row { display: grid; grid-template-columns: 4rem 1fr 7rem 9rem; gap: 0.25rem .8rem; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); align-items: baseline; font-size: var(--fs-text2); }
.ml-row:first-child { border-top: none; }
.ml-head { background: var(--card-2); font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.ml-row.ml-here { background: var(--accent-soft); }
@media (max-width: 640px) {
  .ml-row { grid-template-columns: 3.2rem 1fr; }
  .ml-row > span:nth-child(3), .ml-row > span:nth-child(4) { grid-column: 2; font-size: var(--fs-small); color: var(--text-2); }
  .ml-head > span:nth-child(3), .ml-head > span:nth-child(4) { display: none; }
  .ml-row:not(.ml-head) > span:nth-child(3)::before { content: 'Energy '; color: var(--muted); }
  .ml-row:not(.ml-head) > span:nth-child(4)::before { content: 'A year, worldwide: '; color: var(--muted); }
}
a.small-btn { text-decoration: none; display: inline-block; }
.quake-list .q-place { text-align: left; text-decoration: none; }
#usgsCams .cam-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); margin-top: 0; }
#usgsCams .cam-tile { border-radius: 14px; }
#usgsCams .wcam-mi { display: block; font-weight: 600; opacity: .85; }
.mag-chart { width: 100%; height: 110px; display: block; margin-top: .6rem; background: var(--card-2); border-radius: 12px; }
.mag-axis, .qs-axis { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-small); color: var(--muted); margin-top: .25rem; }
.mag-now { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem .7rem; font-size: var(--fs-body); margin-bottom: .3rem; }
/* status labels: text-safe colors on a soft tint of the same color */
.u-chip { display: inline-block; font-size: var(--fs-small); font-weight: 700; padding: var(--sp-1) var(--sp-3); border-radius: 3px; white-space: nowrap;
  color: var(--u); background: color-mix(in srgb, var(--u) 15%, transparent); }
.u-good { --u: var(--t-good); } .u-cool { --u: var(--t-cool); } .u-warn { --u: var(--t-warn); } .u-bad { --u: var(--t-critical); }
/* rivers & lakes tiles */
.water-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 0.5rem; }
.water-tile { display: flex; flex-direction: column; gap: 0.5rem; background: var(--card-2); border-radius: 14px; padding: var(--sp-4) var(--sp-4); border-left: 4px solid var(--cool); min-width: 0; }
.water-tile.fast { border-left-color: var(--extreme); }
.wt-head { display: flex; gap: 0.5rem; align-items: flex-start; }
.wt-head .rep-icon { line-height: 1.15; flex: 0 0 auto; }
.wt-head .q-place { line-height: 1.3; display: inline-block; }
.wt-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; }
.wt-num { font-size: var(--fs-big); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; margin-bottom: .3rem; font-variant-numeric: tabular-nums; }
.wt-num small { font-size: var(--fs-text2); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.water-spark { flex: 0 1 120px; width: 120px; height: 34px; min-width: 60px; }
.water-spark polyline { fill: none; stroke: var(--cool); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.water-spark polygon { fill: color-mix(in srgb, var(--cool) 16%, transparent); }
.water-spark.fast polyline { stroke: var(--extreme); }
.water-spark.fast polygon { fill: color-mix(in srgb, var(--extreme) 16%, transparent); }
.wt-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem .6rem; padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-text2); margin-top: auto; }
.norm-meter { display: inline-flex; gap: 3px; }
.norm-meter i { width: 14px; height: 8px; border-radius: 3px; background: var(--line); }
.norm-meter .n0 { background: var(--moderate); } .norm-meter .n1 { background: var(--minor); } .norm-meter .n2 { background: var(--good); }
.norm-meter .n3 { background: var(--cool); } .norm-meter .n4 { background: var(--extreme); }
.verdict-bad { background: color-mix(in srgb, var(--extreme) 14%, var(--card)); font-weight: 700; }
/* earthquakes: 30 days of dots */
.quake-strip { margin-top: .7rem; }
.qs-plot { position: relative; height: 96px; margin: 0 24px; }
.quake-strip { background: var(--card-2); border-radius: 12px; padding: 30px 0 var(--sp-3); }
.qs-plot::after { content: ''; position: absolute; left: -24px; right: -24px; bottom: 0; border-bottom: 1px dashed var(--line); }
.qs-axis { padding: 0 var(--sp-4); margin-top: .45rem; white-space: nowrap; }
@media (max-width: 640px) { .qs-axis span:nth-child(2) { display: none; } }
.qdot { position: absolute; width: var(--s); height: var(--s); padding: 0; border-radius: 50%; transform: translate(-50%, 50%); cursor: pointer;
  border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 30%, transparent); }
.qdot:hover, .qdot:focus-visible { background: color-mix(in srgb, var(--c) 65%, transparent); z-index: 1; }
/* elevation */
.elev-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.elev-num { font-size: var(--fs-huge); font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.elev-num small { font-size: var(--fs-lead); font-weight: 600; color: var(--muted); letter-spacing: 0; }
.elev-bar { position: relative; height: 14px; border-radius: 3px; background: var(--card-2); margin-top: 1rem; }
.elev-fill { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: linear-gradient(90deg, #2e9e5b, #c9a34a); min-width: 14px; }
.elev-here { position: absolute; top: 50%; width: 20px; height: 20px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--card); border: 4px solid #c9a34a; box-shadow: var(--shadow); }
.elev-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--muted); }
.elev-axis { position: relative; display: flex; justify-content: space-between; font-size: var(--fs-small); color: var(--muted); margin: .35rem 0 .7rem; }
.elev-mile { position: absolute; transform: translateX(-100%); padding-right: var(--sp-3); white-space: nowrap; }

/* Environment page */
.env-stats { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); margin-bottom: .6rem; }
/* Garden › Frost dates as season stripes (seasonStripes in environment.js) */
.fs-head { margin: 0 0 var(--sp-2); }
.fs-chart { display: block; max-width: 100%; height: auto; }
.fs-ax { font-size: 11px; fill: var(--muted); }
.fs-now-lab { fill: var(--accent); font-weight: 700; }
.fs-grid { stroke: var(--line); stroke-width: 1; opacity: .5; }
.fs-typ { stroke: var(--text-2); stroke-width: 1; stroke-dasharray: 3 3; }
.fs-typ-lab { font-weight: 600; fill: var(--text-2); }
.fs-today { stroke: var(--text); stroke-width: 1.5; }
.fs-fc { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 2 2; }
.fs-fcdot { fill: var(--card); stroke: var(--accent); stroke-width: 2; }
.fs-row .fs-bar { transform-box: fill-box; transform-origin: 0 50%; animation: fs-grow .5s ease-out both; animation-delay: calc(var(--i) * 18ms); }
.fs-row:hover .fs-bar { filter: brightness(1.15); }
.fs-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: var(--sp-1) 0 var(--sp-2); }
.fs-key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.fs-key i { display: inline-block; width: 22px; height: 7px; border-radius: 3px; }
.fs-key i.fs-key-fc { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--accent); box-sizing: border-box; }
.fs-key i.fs-key-today { width: 0; height: 12px; border-left: 1.5px solid var(--text); border-radius: 0; }
@keyframes fs-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .fs-row .fs-bar { animation: none; } }
/* Garden › Warmth for growing (gddChart in environment.js) */
.gdd-head { margin: var(--sp-2) 0; }
.gdd-chart { display: block; max-width: 100%; height: auto; }
.gdd-grid { stroke: var(--line); stroke-width: 1; opacity: .6; }
.gdd-ax { font-size: 11px; fill: var(--muted); }
.gdd-band { fill: color-mix(in srgb, var(--good) 15%, transparent); }
.gdd-norm { fill: none; stroke: var(--good); stroke-width: 2; stroke-dasharray: 5 4; }
.gdd-last { fill: none; stroke: var(--muted); stroke-width: 1.5; opacity: .7; }
.gdd-year { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; }
.gdd-mine { fill: none; stroke: #e07b39; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; animation: gdd-draw 1.4s ease-out both; }
.gdd-dot { fill: #e07b39; stroke: var(--card); stroke-width: 2.5; animation: gdd-pop .4s 1.3s ease-out both; transform-box: fill-box; transform-origin: center; }
.gdd-ndot { fill: var(--good); }
.gdd-gap { stroke: var(--text-2); stroke-width: 1.5; stroke-dasharray: 3 3; }
.gdd-gaplab { font-weight: 600; fill: var(--text-2); }
.gdd-now { font-size: 13px; font-weight: 700; fill: var(--text); }
.gdd-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: var(--sp-1) 0 var(--sp-2); }
.gdd-key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.gdd-key i { display: inline-block; width: 16px; height: 0; border-top: 3px solid #e07b39; }
.gdd-key i.k-norm { border-top: 2px dashed var(--good); }
.gdd-key i.k-last { border-top: 2px solid var(--muted); }
.gdd-key i.k-band { height: 10px; border: 0; background: color-mix(in srgb, var(--good) 20%, transparent); }
@keyframes gdd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gdd-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .gdd-mine, .gdd-dot { animation: none; } }
.env-stats strong { font-size: var(--fs-lead); }
.env-map { height: 250px; margin-bottom: .7rem; }
#ev-damage .reports li > span:last-child, #ev-tropics .reports li > span:last-child { min-width: 0; }
#envSkyControls { margin: -.2rem 0 .3rem; }
/* Four choices on one line, even in a narrow column or on a phone */
#envSkySeg { flex-wrap: nowrap; }
#envSkySeg button { padding: var(--sp-2) var(--sp-3); white-space: nowrap; flex: 1 1 auto; font-size: var(--fs-text2); }
@media (max-width: 360px) { #envSkySeg button { padding: var(--sp-2) var(--sp-2); font-size: var(--fs-small); } }
.solar-chart { width: 100%; height: 90px; display: block; }
.solar-chart polygon { fill: color-mix(in srgb, var(--moderate) 22%, transparent); }
.solar-chart polyline { fill: none; stroke: var(--moderate); stroke-width: 2; }
.solar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 0.5rem; margin-bottom: .6rem; }
.solar-grid span { background: var(--card-2); border-radius: 8px; padding: var(--sp-2) var(--sp-2); text-align: center; font-weight: 700; border: 2px solid transparent; }
.solar-grid span.weak { border-color: var(--t-warn); }
.solar-grid small { font-weight: 600; color: var(--muted); }
.solar-days { list-style: none; padding: 0; margin: 0 0 .6rem; }
.solar-days li { display: grid; grid-template-columns: 7.5rem 5.5rem 1fr; gap: 0.5rem; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.solar-days li:last-child { border-bottom: none; }
.solar-home-btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: var(--sp-4) var(--sp-5); color: var(--text); }
.solar-home-btn > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.solar-home-btn .g-label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.solar-hours { display: flex; align-items: flex-end; gap: 3px; height: 110px; margin-bottom: .6rem; }
.solar-hours > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.solar-hours i { display: block; width: 100%; background: color-mix(in srgb, var(--moderate) 45%, var(--card-2)); border-radius: 4px 4px 0 0; }
.solar-hours .best i { background: var(--moderate); }
.solar-hours span { font-size: var(--fs-note); color: var(--muted); white-space: nowrap; margin-top: 2px; }
.solar-days-chart { display: flex; align-items: flex-end; gap: 2px; height: 100px; }
.solar-days-chart > div { flex: 1; max-width: 28px; height: 100%; position: relative; display: flex; align-items: flex-end; }
.solar-days-chart i { display: block; width: 100%; background: var(--moderate); border-radius: 3px 3px 0 0; }
.solar-days-chart b { position: absolute; left: -1px; right: -1px; height: 2px; background: var(--text-2); }
.solar-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin: 0 0 .5rem; }
.solar-form label { display: flex; flex-direction: column; font-size: var(--fs-small); font-weight: 600; gap: 0.25rem; }
.solar-form input { width: 7rem; min-width: 0; }
.energy-wrap { overflow-x: auto; margin-bottom: .6rem; }
.energy-table { width: 100%; border-collapse: collapse; font-size: var(--fs-text2); }
.energy-table th { text-align: left; font-size: var(--fs-small); color: var(--muted); font-weight: 600; padding: var(--sp-2) var(--sp-3); white-space: nowrap; }
.energy-table td { padding: var(--sp-3); border-top: 1px solid var(--line); vertical-align: top; }
.energy-table td:nth-child(4) { min-width: 190px; }
.energy-bar { height: 8px; background: var(--card-2); border-radius: 4px; overflow: hidden; margin-bottom: .2rem; }
.energy-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
.energy-bar i.before { background: var(--muted); }
.energy-acts { white-space: nowrap; text-align: right; }
.solar-form .toggle { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 600; }
.solar-form input[type=date] { width: 9.5rem; }

/* ============ October 2026 visual fixes ============ */
.nw { white-space: nowrap; }
/* The top menu: room to breathe on a wide window; on a narrow one the icons go so the names still fit */
@media (min-width: 900px) { .pages { gap: 0.5rem; } .pages button { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-body); } }
@media (max-width: 760px) { .pages .nav-ic { display: none; } }
/* The air quality ring stays round when the card stacks on a phone */
.air-ring { width: 120px; min-width: 120px; min-height: 120px; }
/* Planner grid: the whole day fits a phone without splitting the day names */
.pg-day { white-space: nowrap; }
.pg-short { display: none; }
.pg-cell.now, .pg-swatch.now { outline: 2px solid var(--text); outline-offset: -1px; }
.pg-swatch.now { background: none; }
@media (max-width: 640px) {
  .pg-long { display: none; }
  .pg-short { display: inline; }
  .pg-row { grid-template-columns: 44px repeat(24, minmax(0, 1fr)); min-width: 0; gap: 1px; }
  .pg-cell { height: 30px; border-radius: 3px; font-size: var(--fs-note); }
  .pg-hr { font-size: var(--fs-note); }
}
/* Heat tiles: whole words only */
.heat-day .pill { overflow-wrap: normal; word-break: normal; hyphens: none; }
@media (max-width: 640px) { .heat-day { padding: var(--sp-3) var(--sp-1); } .heat-day .pill { font-size: var(--fs-note); letter-spacing: -.01em; } }
/* Filter bars: one swipeable row of chips, so the pinned bar stays short */
.dict-tools .chips, .sg-tools .chips { flex-wrap: wrap; }
@media (max-width: 640px) { .dict-tools .chips, .sg-tools .chips, .dict-az { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }
.dict-tools .chips::-webkit-scrollbar, .sg-tools .chips::-webkit-scrollbar, .dict-az::-webkit-scrollbar { display: none; }
.dict-tools .chips > *, .sg-tools .chips > *, .dict-az > * { flex: 0 0 auto; }
.dict-tools .chips, .sg-tools .chips { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; }
.sg-wrap { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 640px) {
  .dict-tools, .sg-tools { padding: var(--sp-3) var(--sp-4); gap: 0.5rem; }
  .dict-tools input[type=search] { padding: var(--sp-3) var(--sp-4); }
  #dictCount, #sgCount { display: none; }
}
/* Solar: the three best hours are simply brighter bars */
.solar-hours .peak i { background: var(--moderate); }
/* Forms on the Solar and Home energy cards */
.solar-form input[type=checkbox] { width: 1.1rem; height: 1.1rem; min-width: 0; flex: 0 0 auto; }
.solar-form label.toggle { align-self: center; }
/* Space Station list: the star is written at the end of the line */
.events li.nostar strong::after { content: none; }
/* Rainfall colour key */
.rain-key { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); color: var(--text-2); margin: 0 0 .4rem; }
.rain-key i { flex: 1; max-width: 320px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #a6d4ff, #2f6fe0 22%, #19a84f 44%, #f4e04d 62%, #f59a23 78%, #e03131 92%, #b03bd0); }
.rain-key[hidden] { display: none; }
/* Recently sent alerts, and the tucked-away phone set-up */
.recent-alerts { list-style: none; padding: 0; margin: 0 0 .6rem; font-size: var(--fs-text2); }
.recent-alerts li { display: flex; justify-content: space-between; gap: 0.5rem; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.recent-alerts li:last-child { border-bottom: none; }
.recent-alerts li span:last-child { white-space: nowrap; }
details.setup, details.fine { margin: .4rem 0 .6rem; }
details.setup > summary, details.fine > summary { cursor: pointer; font-weight: 600; font-size: var(--fs-text2); color: var(--link); list-style: none; display: inline-block; }
details.setup > summary::-webkit-details-marker, details.fine > summary::-webkit-details-marker { display: none; }
details.setup[open] > summary, details.fine[open] > summary { margin-bottom: .3rem; }
/* Live Coverage: station names get the room; reorder and remove appear only while editing */
.saved-streams:not(.editing) [data-up], .saved-streams:not(.editing) [data-del] { display: none; }
.saved-streams li span { white-space: normal; overflow: visible; }
/* Water-supply lakes */
.lake-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 0.5rem; margin-bottom: .5rem; }
.lake-gauge { background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); }
.lake-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.lake-bar { height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--u) 18%, var(--card)); overflow: hidden; }
.lake-bar i { display: block; height: 100%; background: var(--u); border-radius: 5px; }
.lake-ends { display: flex; justify-content: space-between; font-size: var(--fs-note); color: var(--muted); margin-top: .15rem; }
/* Home energy: on a phone each bill is a small stack, not a squeezed table */
.energy-table td:first-child { min-width: 9.5rem; }
@media (max-width: 720px) {
  .energy-table thead { display: none; }
  .energy-table, .energy-table tbody, .energy-table tr, .energy-table td { display: block; width: auto; }
  .energy-table tr { border-top: 1px solid var(--line); padding: var(--sp-3) 0; }
  .energy-table td { border: none; padding: var(--sp-1) 0; min-width: 0; }
  .energy-table td:nth-child(4) { min-width: 0; margin-top: .25rem; }
  .energy-acts { text-align: left; margin-top: .3rem; }
}

/* ---- layout patterns ---- */
/* Fold-away notes */
details.fine > summary { font-weight: 600; font-size: var(--fs-small); color: var(--muted); }
details.fine > summary:hover { color: var(--link); }
details.fine > p, details.fine > div { margin-top: .2rem; }
/* No stranded tiles: a short last row stretches to fill the width */
.env-stats { display: flex; flex-wrap: wrap; }
.env-stats > div { flex: 1 1 140px; min-width: 0; }   /* 140px: two fit side by side even on the narrowest phones */
.quiz-topics, .games-grid, .card-shelf { display: flex; flex-wrap: wrap; }
.quiz-topics > * { flex: 1 1 190px; }
.games-grid > * { flex: 1 1 210px; }
.card-shelf > * { flex: 1 1 120px; }
.ago-row { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
/* Five gauges: three on the first row, two wider ones on the second */
.gauge-src { margin: 0 0 -.4rem; }   /* sits just above the gauges it describes */
#gaugeSrc:has(+ #gauges:empty) { display: none; }   /* and goes with them when the forecast couldn't load */
/* Six gauges: three across, two rows (two across on a phone), every one the same size */
.gauges { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
@media (max-width: 640px) {
  .gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The Weather page is three rows: the forecast beside live coverage, the maps two by two, then readings beside settings.
   On one column (tablets and phones) the row wrappers dissolve, so the cards can keep the phone order: readings before maps. */
@media (max-width: 960px) {
  #page-weather > .col-main, #page-weather > .col-side, #page-weather > .col-wide { display: contents; }
  #page-weather > * > * { min-width: 0; }
  /* one column: the forecast, the radar, the readings, the other maps, the notes, then the heads-ups and live views */
  #radarCard, #liveCard:not(.folded) { order: 1; }
  #envStationCard, #gaugeSrc, #gauges { order: 2; }
  #rainCard { order: 3; }
  #ev-sky, #wxMapCard { order: 4; }
  #notesCard { order: 5; }
  #spaceNote, #solarHome { order: 6; }
  #liveCard, #camsCard { order: 7; }
}
/* A map's colour key belongs right under the map */
.legend.map-key { margin: -.2rem 0 .7rem; }
/* Storm Guide: each card shows the essentials and opens for the rest */
.sg-more > summary { cursor: pointer; list-style: none; font-weight: 600; font-size: var(--fs-text2); color: var(--link); padding: var(--sp-2) 0; }
.sg-more > summary::-webkit-details-marker { display: none; }
.sg-more .opened, .sg-more[open] .closed { display: none; }
.sg-more[open] .opened { display: inline; }
.sg-more[open] > summary { margin-bottom: .5rem; }
.sg-more .sg-facts { margin-bottom: .6rem; }
.sg-radar { float: right; width: 150px; margin: 0 0 .4rem .8rem; display: flex; flex-direction: column; gap: 0.25rem; text-align: center; }
.sg-radar .radar-pic { width: 100%; height: auto; border-radius: 10px; }
@media (max-width: 480px) { .sg-radar { float: none; margin: 0 0 .4rem; } }
/* Dictionary: two columns of entries on a wide screen */
@media (min-width: 900px) {
  .dict-letter { columns: 2; column-gap: 2.2rem; }
  .dict-letter h3 { column-span: all; }
  .dict-entry { break-inside: avoid; }
}

/* ---- pictures ---- */
/* Space: the Moon and the night */
.sky-hero { display: flex; gap: 1rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.moon-box { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }
.moon-pic { width: 68px; height: 68px; filter: drop-shadow(0 0 6px rgba(240, 232, 200, .25)); }
.moon-dark { fill: color-mix(in srgb, var(--text) 16%, var(--card)); }
.moon-lit { fill: #f3ecd4; }
.night-line { flex: 1 1 280px; min-width: 0; }
.nt-track { position: relative; height: 22px; border-radius: 11px; overflow: hidden; background: linear-gradient(90deg, #d9793a, #5a4f8f 10%, #5a4f8f 90%, #d9793a); }
.nt-track i { position: absolute; top: 0; bottom: 0; }
.nt-dark { background: #121a33; }
.nt-moon { top: auto !important; height: 5px; bottom: 2px !important; background: #f3ecd4; border-radius: 3px; }
.nt-now { width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.nt-labels { display: flex; justify-content: space-between; gap: 0.5rem; font-size: var(--fs-note); color: var(--text-2); margin-top: .2rem; }
.nt-k { width: 14px !important; height: 8px !important; border-radius: 2px; }
.nt-k.twilight { background: #5a4f8f; } .nt-k.dark { background: #121a33; outline: 1px solid var(--line); } .nt-k.moon { background: #f3ecd4; height: 4px !important; }
/* Space: where the planets are */
.planet-strip { margin-bottom: .2rem; }
.ps-sky { fill: color-mix(in srgb, var(--cool) 9%, var(--card-2)); }
.ps-guide { stroke: var(--line); stroke-dasharray: 3 4; }
.ps-horizon { stroke: var(--text-2); stroke-width: 2; }
.ps-tick { stroke: var(--text-2); }
.ps-dir { font-size: 11px; font-weight: 700; fill: var(--text-2); }
.ps-name { font-size: 12px; font-weight: 700; fill: var(--text); }
.ps-small { font-size: 10px; fill: var(--muted); }
/* Space: Kp */
.kp-what { background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); margin: 0 0 .6rem; max-width: none !important; line-height: 1.55; }
.kp-chart { margin-top: .2rem; }
details.kp-what > summary { cursor: pointer; font-weight: 700; }
details.kp-what[open] > summary { margin-bottom: .25rem; }
/* Space: from the Sun to your sky, one box per step with an arrow between */
.sun-chain { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }
.sun-chain li { position: relative; display: flex; flex-direction: column; gap: 0.25rem; background: var(--card-2); border-radius: 12px; padding: var(--sp-3) var(--sp-4); min-width: 0; }
.sun-chain li + li::before { content: '→'; position: absolute; left: -1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 700; font-size: var(--fs-lead); }
.sun-chain .sc-ic { font-size: var(--fs-big); line-height: 1; }
.sun-chain .label { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.sun-chain .sc-big { font-size: var(--fs-lead); }
.sun-chain .sc-word .u-chip { white-space: normal; }
.sun-chain .sc-text { font-size: var(--fs-small); color: var(--text-2); }
@media (max-width: 1000px) {
  .sun-chain { grid-template-columns: 1fr; gap: 1.5rem; }
  .sun-chain li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .5rem; }
  .sun-chain .sc-ic { grid-row: span 4; align-self: center; }
  .sun-chain li + li::before { content: '↓'; left: 1.85rem; top: -1.2rem; transform: none; }
}
.aurora-map { margin: 0; display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 1rem; align-items: center; }
.aurora-map img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; display: block; background: #000; }
/* Space: the Sun today */
.sun-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sun-pics figure { margin: 0; display: flex; gap: 0.75rem; align-items: center; background: var(--card-2); border-radius: 12px; padding: var(--sp-3); min-width: 0; }
.sun-pics img { width: 170px; height: 170px; flex: 0 0 auto; border-radius: 10px; background: #000; }
.flare-scale { margin: .8rem 0 .3rem; padding-top: var(--sp-6); }
.fs-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); height: 28px; }
.fs-track > span { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--fs-small); color: var(--text); }
.fs-A { background: color-mix(in srgb, var(--good) 22%, var(--card-2)); border-radius: 8px 0 0 8px; }
.fs-B { background: color-mix(in srgb, var(--good) 34%, var(--card-2)); }
.fs-C { background: color-mix(in srgb, var(--cool) 34%, var(--card-2)); }
.fs-M { background: color-mix(in srgb, var(--minor) 45%, var(--card-2)); }
.fs-X { background: color-mix(in srgb, var(--extreme) 42%, var(--card-2)); border-radius: 0 8px 8px 0; }
.fs-mark { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); }
.fs-mark span { font-style: normal; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); font-size: var(--fs-note); font-weight: 700; white-space: nowrap; color: var(--text); }
.fs-mark.fs-day { background: var(--text-2); opacity: .8; }
.fs-mark.fs-day span { bottom: auto; top: calc(100% + 2px); font-weight: 600; color: var(--text-2); }
.fs-words { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; text-align: center; font-size: var(--fs-small); color: var(--muted); margin-top: 1.8rem; }
.cy-bar { fill: color-mix(in srgb, var(--minor) 50%, var(--card-2)); }
.cy-smooth { fill: none; stroke: var(--warm); stroke-width: 2.5; }
.cy-pred { fill: none; stroke: var(--warm); stroke-width: 2; stroke-dasharray: 5 4; opacity: .85; }
.cy-aurora { fill: var(--good); stroke: var(--card); stroke-width: 2; }
.key i.cy-k.bar { height: 10px; background: color-mix(in srgb, var(--minor) 50%, var(--card-2)); }
.key i.cy-k.smooth { height: 3px; background: var(--warm); }
.key i.cy-k.pred { height: 0; border-top: 2px dashed var(--warm); }
.key i.cy-k.aurora { width: 10px; height: 10px; border-radius: 50%; background: var(--good); }
@media (max-width: 900px) { .sun-pics { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .aurora-map { grid-template-columns: 1fr; }
  .sun-pics figure { flex-direction: column; align-items: stretch; }
  .sun-pics img { width: 100%; height: auto; aspect-ratio: 1; max-width: 340px; align-self: center; }
}
/* Space: bright stars, all the way round the horizon, on a night sky in both themes */
.star-ring .st-sky { fill: #131d30; }
.star-ring .ps-guide { stroke: #34425c; }
.star-ring .ps-small { fill: #9fb0c8; }
.star-ring .ps-name { font-size: 11px; fill: #e8edf5; }
.star-ring .ps-name.ps-planet { font-style: italic; fill: #ffd36b; }
.star-ring .st-body { stroke: #131d30; stroke-width: 1; }
.star-list .pl-name { align-self: start; }
.star-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--text) 35%, transparent); align-self: center; }
/* Space Station arcs */
.iss-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.iss-row > div { min-width: 0; }
.iss-arc { flex: 0 0 104px; width: 104px; height: 50px; }
.iss-arc line { stroke: var(--line); stroke-width: 1.5; }
.iss-arc path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.iss-arc text { font-size: 9px; fill: var(--muted); font-weight: 700; }
@media (max-width: 480px) { .iss-arc { flex-basis: 84px; width: 84px; } }
/* Air quality pointer */
.aqi-pointer-row { position: relative; height: 14px; margin-top: .8rem; }
.aqi-pointer-row span { position: absolute; transform: translateX(-50%); font-size: var(--fs-small); line-height: 1; color: var(--text); }
.aqi-pointer-row + .aqi-scale { margin-top: 0; }
/* Solar pictures */
.solar-chart { height: auto; }
.solar-chart polyline { vector-effect: none; }
.solar-chart circle { fill: var(--moderate); }
.solar-grid.by-inverter { grid-template-columns: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: minmax(0, 1fr); gap: 3px; margin-bottom: .3rem; }
.solar-grid.by-inverter span { padding: var(--sp-3) 0; font-size: var(--fs-small); border-width: 2px; background: color-mix(in srgb, var(--moderate) var(--heat, 0%), var(--card-2)); }
@media (max-width: 640px) { .solar-grid.by-inverter { grid-template-rows: repeat(4, auto); } }
.solar-bar, .payback { display: block; height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.solar-bar { margin-top: .3rem; height: 5px; background: color-mix(in srgb, var(--text) 12%, transparent); }
.solar-bar i, .payback i { display: block; height: 100%; border-radius: 4px; background: var(--moderate); }
.payback { margin: -.2rem 0 0; }
.payback i { background: var(--good); }
.solar-days-wrap { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
.solar-days-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-note); color: var(--muted); text-align: right; height: 110px; white-space: nowrap; }
.solar-days-chart { flex: 1; height: 110px; gap: 3px; border-bottom: 1px solid var(--line); }
.solar-days-chart > div { max-width: none; }
.solar-days-chart > div > span { position: absolute; left: 0; right: 0; bottom: -1.05rem; text-align: center; font-size: var(--fs-note); color: var(--muted); }
.solar-days-chart .empty, .slot-empty { border: 1px dashed var(--line); border-radius: 3px; }
.solar-days-chart .empty { height: 100%; }
.slot-empty { display: inline-block; width: 12px !important; height: 10px !important; background: none !important; }
/* Hurricane names on the track map */
.storm-label { font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; white-space: nowrap; }
/* Soil temperature against planting ranges */
.soil-scale { margin: .2rem 0 .7rem; }
.soil-mark { position: relative; height: 1.2rem; }
.soil-mark span { position: absolute; transform: translateX(-9px); font-size: var(--fs-small); font-weight: 700; white-space: nowrap; }
.soil-zones { display: flex; gap: 2px; border-radius: 8px; overflow: hidden; }
.soil-zones div { min-width: 0; padding: var(--sp-2) var(--sp-2); display: flex; flex-direction: column; font-size: var(--fs-note); line-height: 1.25; color: #10151f; }
.soil-zones b { font-weight: 700; }
.soil-zones span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soil-zones .z0 { background: #9ec5f4; } .soil-zones .z1 { background: #a9dcc6; } .soil-zones .z2 { background: #b9e39a; }
.soil-zones .z3 { background: #f1e08a; } .soil-zones .z4 { background: #f5b56b; } .soil-zones .z5 { background: #ee8a6a; }
/* Nature's calendar as a year */
.nat-chart { margin-bottom: .9rem; }
.nat-row { display: grid; grid-template-columns: minmax(96px, 200px) 1fr; gap: 0.5rem; align-items: center; padding: var(--sp-1) 0; }
.nat-name { font-size: var(--fs-small); font-weight: 600; }
.nat-months { display: grid; grid-template-columns: repeat(12, 1fr); font-size: var(--fs-note); color: var(--muted); text-align: center; }
.nat-track { position: relative; height: 14px; border-radius: 7px; background: var(--card-2); }
.nat-track i { position: absolute; top: 0; bottom: 0; border-radius: 7px; }
.nat-span { background: color-mix(in srgb, var(--good) 35%, var(--card-2)); }
.nat-peak { background: var(--good); }
.nat-now { width: 2px; top: -3px !important; bottom: -3px !important; background: var(--text); border-radius: 1px !important; }
.nat-k { width: 14px !important; height: 8px !important; border-radius: 4px; }
.nat-k.span { background: color-mix(in srgb, var(--good) 35%, var(--card-2)); } .nat-k.peak { background: var(--good); } .nat-k.now { width: 2px !important; height: 12px !important; background: var(--text); }
@media (max-width: 640px) { .nat-row { grid-template-columns: 104px 1fr; gap: 0.5rem; } .nat-name { font-size: var(--fs-note); } }
/* Air quality: today's band is marked, which also works when the scale wraps to two rows on a phone */
.aqi-scale div.on b { font-weight: 700; color: var(--text); }
.aqi-scale div.on { background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 0 0 6px 6px; padding-left: var(--sp-2); }
@media (max-width: 640px) { .aqi-pointer-row { display: none; } .aqi-pointer-row + .aqi-scale { margin-top: .8rem; } .aqi-scale div.on b::before { content: "B2  "; } }
/* Space Station passes on a phone: the arc sits under the words instead of squeezing them */
@media (max-width: 640px) { .iss-row { flex-wrap: wrap; gap: 0.25rem; } .iss-row > div { flex: 1 1 100%; } .iss-arc { flex: 0 0 110px; width: 110px; } }
/* The Moon is always drawn against a night-dark disc, in light and dark themes alike */
.moon-dark { fill: #1c2542; }
.nt-k.moon { outline: 1px solid var(--line); }
/* Nine quiz topics: three rows of three (two columns on a phone, with the last one full width) */
.quiz-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .quiz-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quiz-topics > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* History: the "on this date" and "month so far" tiles fill the row instead of bunching on the left */
.ago-row, #history .stats { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ago-row > *, #history .stats > * { flex: 1 1 150px; min-width: 0; }

/* ---- the menu: seven tabs, or six where there is no solar system ---- */
/* The row of buttons inside Earth and Learn stands in for the page title */
.subtabs { margin: .2rem 0 -.3rem; max-width: 100%; }
.subtabs button { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.subtabs .nav-ic { width: 16px; height: 16px; flex-basis: 16px; }
@media (max-width: 640px) {
  .subtabs { display: flex; align-self: stretch; width: auto; overflow-x: auto; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtabs button { flex: 1 0 auto; justify-content: center; padding: var(--sp-3) var(--sp-3); font-size: var(--fs-small); }   /* never narrower than its name: a long row scrolls sideways instead */
  .subtabs .nav-ic { display: none; }
  .bottom-nav button.active .nav-ic { margin: -2px 0; }   /* the lit tab's name stays level with the others */
}
/* Seven tabs in the phone bar: on a narrow screen the names shrink a little instead of being cut off */
@media (max-width: 640px) {
  .bottom-nav button { font-size: clamp(.6rem, 2.85vw, .72rem); }
  .bottom-nav button.active .nav-ic { padding: 2px 8px; }
}
/* Safety plan: a third tip box runs the full width instead of leaving a gap beside it */
.plan-tips > .explain:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- what a forecaster would add (forecaster.js) ---- */
/* Forecaster's notes */
.notes-key ul { margin: 0; padding-left: var(--sp-5); }
.notes-key li { margin-bottom: .4rem; line-height: 1.5; }
.notes-key p { margin: 0 0 .4rem; }
.notes-more p, .notes-more li { line-height: 1.55; max-width: 75ch; }
.notes-h { margin: .9rem 0 .2rem; font-size: var(--fs-body); }
.notes-h .muted { font-weight: 600; font-size: var(--fs-text2); }
#notes > p.small { margin: .6rem 0 0; }
/* How sure the forecast is, and the longer outlooks, under the forecast tabs */
#forecastSure:empty { display: none; }
.sure { margin-top: .9rem; padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.sure-head { margin: 0 0 .6rem; line-height: 1.5; }
.sure-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.sure-day { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: var(--sp-3) var(--sp-1); border-radius: 10px; background: var(--card-2); font-size: var(--fs-small); border-bottom: 4px solid var(--c); text-align: center; }
.sure-day.s2 { --c: var(--good); } .sure-day.s1 { --c: var(--moderate); } .sure-day.s0 { --c: var(--extreme); }
.sure-day b { font-size: var(--fs-text2); }
.sure-day em { font-style: normal; font-weight: 700; font-size: var(--fs-note); color: var(--text-2); }
.sure-rain { color: var(--text-2); white-space: nowrap; }
.sure > p.small { margin: .5rem 0 0; }
.outlook-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.outlook-list li { background: var(--card-2); border-radius: 10px; padding: var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: 0.25rem; }
@media (max-width: 640px) { .sure-days { gap: 0.25rem; } .sure-day { font-size: var(--fs-note); padding: var(--sp-2) 0; } .sure-day b { font-size: var(--fs-note); } .sure-day em, .sure-rain { font-size: var(--fs-note); } }
/* Rain in the next two hours (inside the coloured header) */
.rain-soon { position: relative; z-index: 1; display: flex; align-items: center; gap: 0.5rem; margin-top: .6rem; padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-weight: 700; }
.rain-soon > span:first-of-type { flex: 1; }
.soon-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; }
.soon-bars i { width: 5px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.soon-bars i.on { background: #fff; }
/* The measured trace */
.trace-events { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.trace-events li { background: var(--accent-soft); border-radius: 10px; padding: var(--sp-3) var(--sp-4); }
#obsTrace:not(:empty) { margin-top: .4rem; }
/* Weather map */
.hl-mark { font-weight: 700; font-size: var(--fs-lead); line-height: 24px; text-align: center; text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg), 0 0 6px var(--bg); }
.hl-mark.hi { color: #4dabf7; } .hl-mark.lo { color: #ff6b6b; }
.jet-arrow svg { width: 100%; height: 100%; display: block; }
#wxMapSeg { flex-wrap: nowrap; }
#wxMapSeg button { padding: var(--sp-2) var(--sp-3); white-space: nowrap; flex: 1 1 auto; font-size: var(--fs-text2); }
@media (max-width: 360px) { #wxMapSeg button { padding: var(--sp-2) var(--sp-2); font-size: var(--fs-small); } }
/* Storm cells */
.cell-dot { width: 14px; height: 14px; flex: 0 0 14px; margin-top: .3rem; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
#cells .reports li > span:last-child, #flood .reports li > span:last-child { min-width: 0; }
/* Drawn weather icons (Meteocons) in place of emoji, sized from the text size of the spot they sit in */
.wx-pic { width: 1.5em; height: 1.5em; display: inline-block; vertical-align: middle; }
.hero-icon .wx-pic { width: 1.3em; height: 1.3em; display: block; }
.layer-toggles a { font-size: var(--fs-text2); }
/* Solar: the clear-day ceiling on the power chart; and the weather balloon's chart */
.solar-chart polyline.ceiling { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dash-key { height: 0 !important; background: none !important; border-top: 2px dashed var(--muted); }
.balloon-chart { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; margin: .4rem 0; }
/* The balloon's seven tiles sit four and three, not six and one */
@media (min-width: 761px) { .balloon-stats > div { flex-basis: 22%; } }
/* The air-quality word beside the dial reads like a heading without being one */
.air-hero .air-word { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.25; letter-spacing: -.015em; }
.rain-none { margin: .2rem 0 .6rem; }
.wt-what { font-size: var(--fs-note); color: var(--muted); margin: -.15rem 0 .2rem; }
.rain-busy { color: var(--text-2); background: var(--card-2); border-radius: 10px; padding: var(--sp-3) var(--sp-3); }
.risk-calm { margin: .2rem 0 .3rem; padding: var(--sp-3) var(--sp-4); border-radius: 12px; background: var(--card-2); border-left: 4px solid var(--good); }
.card .risk-calm { max-width: none; }
/* The planets view stays a modest size on a wide screen */
#planets svg { max-height: 220px; }
/* Rainfall totals: the month at a glance, a bar for every day, and tiles against normal */
.rain-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: .3rem; }
.rain-big { font-size: var(--fs-huge); font-weight: 700; white-space: nowrap; letter-spacing: -.02em; }
.rain-head > div:last-child { flex: 1; min-width: 0; }
.rain-meter { position: relative; height: 7px; border-radius: 99px; background: var(--card-2); border: 1px solid var(--line); margin: .3rem 0 .1rem; overflow: hidden; }
.rain-meter i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #86b6ef, var(--cool)); border-radius: 99px; }
.rain-meter b { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--text-2); }
.rain-chart { width: 100%; height: auto; display: block; margin: .4rem 0 .1rem; }
.rain-key { display: flex; flex-wrap: wrap; gap: 0.25rem .8rem; margin-bottom: .5rem; }
.rain-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }
.rain-key .rain-normal-key { width: 2px; height: 12px; background: var(--text-2); border-radius: 0; }
.rain-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rain-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; align-items: center; gap: 0.5rem; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.rain-name { font-size: var(--fs-text2); line-height: 1.2; }
.rain-name small { display: block; font-size: var(--fs-note); color: var(--muted); }
.rain-bar .rain-meter { margin: 0; }
.rain-row strong { font-size: var(--fs-text2); font-variant-numeric: tabular-nums; text-align: right; min-width: 4.2em; }
/* Space held for parts of the Weather page that fill in after the page loads, so the cards below them don't jump down a
   second after you scroll there (measured October 19, 2026: up to 90 px on a wide screen, more on a phone) */
#wxMapKey:empty { min-height: 1.6rem; }
#wxMapNote:empty { min-height: 3rem; }
#envSkyNote:empty { min-height: 1.6rem; }
@media (max-width: 960px) { #envRain > .loading { min-height: 440px; } }   /* on one column the maps are below it */
@media (max-width: 640px) {
  #wxMapKey:empty { min-height: 4.9rem; }
  #wxMapNote:empty { min-height: 5.9rem; }
  #envSkyNote:empty { min-height: 3rem; }
}
/* Every map gets the full width of its card, and a little more height on a wide screen (all 30% shorter since October 19, 2026) */
@media (min-width: 961px) {
  .radar-map, .env-map { height: 365px; }
  /* A big side and a smaller side, so something leads: the forecast on top, then the radar */
  .layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  /* The maps, two by two: the radar big, then the row below turns the other way round.
     The buttons always take their own line, so the two maps in a row start level */
  .map-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
  .map-grid > * { grid-column: span 2; }
  #radarCard, #ev-sky { grid-column: span 3; }
  #radarCard { order: 1; }
  #rainCard { order: 2; }
  #wxMapCard { order: 3; }
  #ev-sky { order: 4; }
  .map-grid .radar-map { height: 300px; }
  #radarCard .radar-map { height: 330px; }   /* about level with the rain totals beside it */
  .map-grid .card-head { flex-wrap: wrap; }
  .map-grid .card-head:has(.seg) { min-height: 5.5rem; align-content: flex-start; }
  .map-grid .card-head .seg { flex: 1 0 100%; }
  /* The last row: the sky cams beside whatever heads-ups are showing */
  .foot-row { flex-direction: row; align-items: flex-start; }
  .foot-row > * { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1200px) { .gauges { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
/* The dictionary's search panel stays on screen while reading, so it keeps to about two rows */
@media (min-width: 641px) {
  .dict-tools { gap: 0.5rem; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .dict-tools input[type=search] { padding: var(--sp-3) var(--sp-4); font-size: var(--fs-text2); }
  .dict-tools .chips { gap: 0.25rem; }
  .dict-tools .chip { font-size: var(--fs-note); padding: var(--sp-1) var(--sp-3); }
  .dict-az a, .dict-az span { width: 22px; height: 22px; font-size: var(--fs-note); }
  #dictCount { font-size: var(--fs-note); }
}
/* Quieter supporting text at the top of the Weather page. A live warning (.on, .urgent) keeps its full size */
.hero-refresh { font-size: .72rem; }
.hero .tips .tip { font-size: .78rem; }
.hero-best { font-size: .86rem; }
.alerts-line:not(.on):not(.urgent) { font-size: var(--fs-small); }
#comingUp, #comingUp .small { font-size: var(--fs-small); }
#envStation p.small { font-size: var(--fs-note); }
/* The radar's next hour: a badge on the map while a projected picture shows, and arrival times beside the storms */
.future-badge { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 650; pointer-events: none;
  background: rgba(20, 24, 33, .85); color: #fff; font-size: var(--fs-small); font-weight: 700; padding: var(--sp-2) var(--sp-4); border-radius: 3px; white-space: nowrap; }
.leaflet-tooltip.cell-eta { background: var(--card); color: var(--text); border: 1px solid var(--line); font-weight: 700; font-size: var(--fs-note); padding: var(--sp-1) var(--sp-3); box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.leaflet-tooltip.cell-eta::before { display: none; }
.future-help { margin-top: .6rem; }
.future-help p { margin: .35rem 0; }
.future-help .caveat { color: var(--muted); }
/* Phones: the three radar views fit on one line, and the time label gets its own line so the slider keeps its length */
#radarModeSeg { flex-wrap: nowrap; }
#radarModeSeg button { white-space: nowrap; }
@media (max-width: 480px) {
  #radarModeSeg button { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-small); }
  #rainControls { flex-wrap: wrap; }
  #rainControls #radarTime { flex: 1 0 100%; text-align: center; }
}

/* ---------- The look: a working instrument panel on deep blue, in one typeface: the computer's own system font. Size and weight do the rest. ---------- */
h2, .subhead, .dict-letter h3, .notes-h { font-weight: 700; letter-spacing: 0; }
h2 { font-size: var(--fs-title); }
.subhead { font-size: var(--fs-body); }
.brand { font-weight: 700; letter-spacing: 0; }
.brand-icon { border-radius: 8px; }

/* Sheets in a logbook, not floating cards: a dark rule across the top of each, and no shadow */
.card { box-shadow: none; }
.card-head { padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line); margin-bottom: .7rem; align-items: baseline; }
.card-head h2 { margin-bottom: 0; }

/* Instruments: small capitals in monospace for labels and stamps, and figures that line up */
.g-value, .sw-stats strong, .dlg-big, .rain-big { font-variant-numeric: tabular-nums; }
.notes-stamp { font-size: var(--fs-note); }

/* Tabs are tabs: a rule under the one you're on, instead of a bright pill */
.pages button { background: none; border: 0; border-bottom: 2px solid transparent; font-weight: 600; color: var(--text-2); }
.pages button:hover { background: none; color: var(--text); border-bottom-color: var(--line); }
.pages button.active { background: none; color: var(--text); border-bottom-color: var(--accent); }
.subtabs { background: none; border: 0; border-bottom: 1px solid var(--line); gap: 1rem; padding: 0; }
.subtabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: var(--sp-2) var(--sp-1); color: var(--muted); font-weight: 600; }
.subtabs button.active { background: none; color: var(--text); border-bottom-color: var(--accent); }
.seg-tabs { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; }
.tab { border-bottom: 2px solid transparent; border-radius: 0; }
.tab.active { background: none; box-shadow: none; border-bottom-color: var(--accent); }
.jump a { background: none; border: 0; border-bottom: 1px solid var(--line); padding: var(--sp-1) var(--sp-1); margin-right: .5rem; }
.bottom-nav button.active .nav-ic { background: none; }

/* The forecasters' notes: the one thing on the page a person wrote today, set as a signed bulletin */
.notes-stamp { color: var(--muted); margin-bottom: .75rem; }
.notes-key { font-size: var(--fs-lead); line-height: 1.5; }
.notes-key ul { list-style: none; padding: 0; margin: 0; }
.notes-key li { padding: var(--sp-3) 0; margin: 0; border-bottom: 1px solid var(--line); line-height: 1.5; }
.notes-key li:first-child { padding-top: 0; }
.notes-key li:last-child { border-bottom: 0; }
.notes-sign { font-size: var(--fs-text2); color: var(--text-2); margin: .7rem 0 .2rem; padding-left: var(--sp-4); border-left: 2px solid var(--accent); }
.notes-sign span { font-size: var(--fs-note); color: var(--muted); }
.notes-more p, .notes-more li { font-size: var(--fs-small); line-height: 1.65; }
.notes-more .notes-aside { font-size: var(--fs-note); color: var(--muted); }
.notes-more .notes-h { font-size: var(--fs-note); font-weight: 600; }
.hero a, .hero .linklike { color: #fff; }   /* links stay readable on every sky color */
/* The top weather panel keeps its own softer look: bold system type, rounded corners, and pill buttons */
.now-card .hero { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hero-refresh, .hero .tip { border-radius: 999px; }
.hero-best { border-radius: 12px; }
.switch span { border-radius: 999px; }   /* a switch still has to look like a switch */
/* Explanations stay quiet everywhere, so the readings and the forecasters' words stand out */
p.small.muted, p.explain, .fold-note, details.fine p, .notes-aside { font-size: var(--fs-note); line-height: 1.5; }
/* What matters goes first and biggest. A day with a severe risk gets the room; quiet days stay small */
.risk-grid { display: flex; align-items: stretch; }
.risk-tile { flex: 1 1 0; min-width: 0; }
.risk-tile.risk-on { flex: 2.4 1 0; }
.risk-tile.risk-quiet { border-top-width: 1px; background: none; border: 1px solid var(--line); }
.risk-quiet .risk-name { font-size: var(--fs-body); font-weight: 600; color: var(--text-2); }
.risk-quiet .risk-bar { display: none; }
@media (max-width: 640px) { .risk-grid { flex-direction: column; } .risk-tile, .risk-tile.risk-on { flex: none; } }
/* Page introductions step back so the content comes first */
.page-intro p { font-size: var(--fs-text2); color: var(--muted); }
/* Wide screens use their width: pages run wider, and cards pack into two columns instead of one long stack.
   Warnings and at-a-glance rows run across the top. Phones and smaller windows keep the single column */
@media (min-width: 1200px) {
  .layout, .page-wide, .local-note, .public-note { max-width: 1640px; }
  #page-severe, #page-flooding, #page-fireheat, #page-winter, #page-safety, #page-planner, #page-air, #page-history, #page-sky, #page-sun, #page-quakes, #page-solar, #page-environment {
    display: block; column-count: 2; column-gap: 1rem; }
  #page-severe > *, #page-flooding > *, #page-fireheat > *, #page-winter > *, #page-safety > *, #page-planner > *, #page-air > *, #page-history > *, #page-sky > *, #page-sun > *, #page-quakes > *, #page-solar > *, #page-environment > * {
    break-inside: avoid; margin-top: 0; margin-bottom: 1rem; }
  .page-wide > .subtabs, .page-wide > .page-intro, .page-wide > .glance-card, #hzAnswer, #alertsCard, #tracker { column-span: all; }
}
/* The forecasters' key messages as pictures: a week strip, numbered messages, and tags for when, where and what */
.nv-week { margin-bottom: var(--sp-4); }
.nv-days { display: grid; grid-template-columns: repeat(7, 1fr); font-size: var(--fs-note); color: var(--muted); }
.nv-days span { padding-left: var(--sp-2); border-left: 1px solid var(--line); }
.nv-days span:first-child { color: var(--text); font-weight: 600; }
.nv-rows { position: relative; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 7)); background-color: var(--card-2); border-radius: 6px; padding: var(--sp-2) 0; }
.nv-row { position: relative; height: 22px; }
.nv-bar { position: absolute; top: 2px; bottom: 2px; min-width: 14px; border-radius: 4px; color: #fff; font-size: var(--fs-note); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.nv-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); z-index: 1; }
.nv-l3 { background: var(--severe); }
.nv-l2 { background: #a97c00; }
.nv-l1 { background: var(--accent-fill); }
.notes-key li.nv-item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.nv-num { flex: 0 0 auto; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; color: #fff; font-size: var(--fs-small); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.nv-tags { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-2); }
.nv-tag { display: inline-flex; align-items: center; gap: 0.25rem; }
.nv-tag .nav-ic { width: 15px; height: 15px; flex-basis: 15px; color: var(--muted); }
/* Text inside a card fills most cards, but stops at a readable line length on wide screens */
.card p, .explain p, .notes-more p, .notes-more li, .page-intro p, .gauge-src { max-width: 90ch; }
.nv-name { position: absolute; top: 3px; font-size: var(--fs-note); font-weight: 600; color: var(--text); white-space: nowrap; }
.nv-num .nav-ic { width: 15px; height: 15px; flex-basis: 15px; color: #fff; }
/* With the week strip above them, the key messages can be ordinary reading size */
.notes-key { font-size: var(--fs-text2); line-height: 1.45; }
.notes-key li.nv-item { gap: var(--sp-3); padding: var(--sp-3) 0; }
.nv-num { width: 20px; height: 20px; margin-top: 0; }
.nv-num .nav-ic { width: 13px; height: 13px; flex-basis: 13px; }
.nv-tags { font-size: var(--fs-note); margin-top: var(--sp-1); }
.nv-tag .nav-ic { width: 13px; height: 13px; flex-basis: 13px; }
.notes-sign { font-size: var(--fs-small); }
/* Rainfall totals: a rain gauge and the period in words, then the amounts as tiles */
.rain-head { align-items: flex-start; gap: 1rem; }
.rain-gauge { flex: 0 0 82px; width: 82px; height: auto; }
.rain-story .rain-big { line-height: 1.1; }
.rain-tale { margin: .35rem 0 0; font-size: var(--fs-text2); line-height: 1.45; color: var(--text); }
.rain-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; border-top: 0; }
.rain-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0; background: var(--card-2); border: 0; border-radius: 10px; padding: var(--sp-3); min-width: 0; }
.rain-row .rain-name { font-size: var(--fs-small); color: var(--muted); font-weight: 600; }
.rain-row strong { font-size: var(--fs-lead); text-align: left; min-width: 0; }
.rain-row small { font-size: var(--fs-note); color: var(--muted); }
.rain-row .rain-meter { width: 100%; margin: .25rem 0 0; }
@media (max-width: 420px) { .rain-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Each gauge's next 12 hours: a small chart and one line on where it is headed */
.gauge-spark { position: relative; width: 100%; margin-top: var(--sp-2); }
.gauge-spark svg { display: block; width: 100%; height: 30px; }
.gauge-spark > i { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; }
.gauge-axis { display: flex; justify-content: space-between; font-size: var(--fs-note); color: var(--muted); }
.gauge-next { font-size: var(--fs-small); font-weight: 600; color: var(--text); line-height: 1.3; margin-top: .15rem; }
/* The measured readings use the gauges' look, without the history link: all four in a row wherever they fit */
.measured-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: var(--sp-3); }
@media (min-width: 961px) { .measured-gauges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gauge.gauge-plain { cursor: default; }
.gauge.gauge-plain:hover { transform: none; border-color: var(--line); }
.gauge-plain .gauge-pic { height: 72px; }
/* The first thing on the Warnings page: the answer, large, with what to do beside it. The intro paragraph makes way for it */
#page-severe .page-intro > p:not(.hz-why) { display: none; }
#page-severe .page-intro { padding: 0; }
.hz-answer { display: flex; align-items: center; gap: 1.5rem; background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--answer, var(--muted)); border-radius: var(--radius); padding: var(--sp-5) var(--sp-6); }
.hz-answer:empty { display: none; }
.hz-a-main { flex: 1 1 auto; min-width: 0; }
.hz-a-title { font-size: var(--fs-huge); font-weight: 700; line-height: 1.2; }
.hz-a-sub { font-size: var(--fs-body); color: var(--text-2); margin-top: var(--sp-2); }
.hz-a-do { flex: 0 0 300px; font-size: var(--fs-text2); line-height: 1.4; padding-left: 1.5rem; border-left: 1px solid var(--line); }
.hz-a-do span { display: block; font-size: var(--fs-small); font-weight: 700; color: var(--muted); margin-bottom: var(--sp-1); }
.hz-act { background: color-mix(in srgb, var(--extreme) 20%, var(--card)); border-color: var(--extreme); }
.hz-act .hz-a-do span { color: var(--text); }
.hz-watch { background: color-mix(in srgb, var(--moderate) 12%, var(--card)); }
@media (max-width: 760px) {
  .hz-answer { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: var(--sp-5); }
  .hz-a-title { font-size: var(--fs-big); }
  .hz-a-do { flex: none; padding: var(--sp-3) 0 0; border-left: 0; border-top: 1px solid var(--line); }
}
/* The same answer at the top of the Weather page: tap it for the details. A quiet day shrinks to one line */
#hzAnswerHome { grid-column: 1 / -1; cursor: pointer; }
#hzAnswerHome:hover, #hzAnswerHome:focus-visible { border-color: var(--accent); border-left-color: var(--answer, var(--muted)); outline: none; }
.hz-a-more { flex: 0 0 auto; font-size: var(--fs-small); font-weight: 700; color: var(--link); }
.hz-home.hz-calm { padding: var(--sp-3) var(--sp-5); border-left-width: 5px; gap: 0.75rem; }
.hz-home.hz-calm .hz-a-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.hz-home.hz-calm .hz-a-title { font-size: var(--fs-body); }
.hz-home.hz-calm .hz-a-sub { margin: 0; font-size: var(--fs-small); }
.hz-home.hz-calm .hz-a-do { display: none; }

/* Storm ingredients and the balloon: how a storm is made, the recipe so far, and what each number means */
.ing-intro { font-size: var(--fs-text2); line-height: 1.5; color: var(--text-2); margin: 0 0 var(--sp-3); }
.recipe { margin-bottom: var(--sp-3); }
.recipe-head { font-size: var(--fs-text2); margin-bottom: var(--sp-2); }
.recipe-head strong { font-size: var(--fs-lead); }
.recipe-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.recipe-row span { flex: 1 1 90px; text-align: center; font-size: var(--fs-small); font-weight: 600; padding: var(--sp-2); border-radius: 8px; background: var(--card-2); color: var(--muted); }
.recipe-row span.on { background: color-mix(in srgb, var(--moderate) 28%, var(--card)); color: var(--text); }
.ing-now { font-size: var(--fs-text2); font-weight: 600; line-height: 1.35; }
.ball { min-width: 0; }
.ball-bar { position: relative; width: 100%; margin: var(--sp-2) 0 var(--sp-1); overflow: visible; }
.ball-bar b { position: absolute; left: 75%; top: -2px; bottom: -2px; width: 2px; background: var(--text-2); }
.sw-stats span.ball-need { font-size: var(--fs-note); color: var(--muted); line-height: 1.35; }
.sw-stats span.ball-fc { font-size: var(--fs-note); font-weight: 600; color: var(--text); margin-top: var(--sp-1); }

/* The balloon as an event: the climb on the left, the story and the jump to the forecast on the right */
.ball-show { display: flex; gap: 1.25rem; align-items: stretch; margin-bottom: var(--sp-3); }
.ball-scene { flex: 0 0 190px; width: 190px; height: auto; border-radius: 12px; display: block; }
.ball-story { flex: 1 1 auto; min-width: 0; }
.ball-headline { font-size: var(--fs-big); font-weight: 700; line-height: 1.2; margin-bottom: var(--sp-2); }
.sky-balloon { animation: ball-rise 14s ease-in infinite; }
@keyframes ball-rise {
  0% { transform: translateY(262px) scale(.7); opacity: 0; }
  6% { opacity: 1; }
  88% { transform: translateY(44px) scale(1.25); opacity: 1; }
  94%, 100% { transform: translateY(36px) scale(1.5); opacity: 0; }
}
.sky-balloon { transform-box: fill-box; transform-origin: center; }
.sky-star { animation: star-twinkle 3s ease-in-out infinite; }
@keyframes star-twinkle { 50% { opacity: .25; } }
.sky-fog { animation: fog-drift 9s ease-in-out infinite alternate; }
@keyframes fog-drift { to { transform: translateX(12px); } }
.jump-key { display: flex; gap: 1rem; font-size: var(--fs-note); color: var(--muted); margin-bottom: var(--sp-2); }
.jump-key span { display: inline-flex; align-items: center; gap: 0.25rem; }
.jump-key .jump-dot { position: static; transform: none; animation: none; }
.jump-row { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: center; gap: 0.75rem; padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
.jump-name strong { display: block; font-size: var(--fs-small); }
.jump-name span { font-size: var(--fs-small); color: var(--muted); }
.jump-name b.hot { color: var(--t-serious); }
.jump-track { position: relative; height: 12px; border-radius: 6px; background: var(--card-2); }
.jump-tick { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--line); }
.jump-line { position: absolute; top: 4px; height: 4px; border-radius: 2px; background: var(--accent); transform-origin: var(--from, left); animation: jump-grow .9s ease-out both; animation-delay: var(--d); }
.jump-line.hot { background: var(--severe); }
@keyframes jump-grow { from { transform: scaleX(0); } }
.jump-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; display: inline-block; }
.jump-dot.was { background: var(--card); border: 2px solid var(--text-2); }
.jump-dot.now { background: var(--accent); animation: jump-pop .4s ease-out both; animation-delay: calc(var(--d) + .7s); }
.jump-dot.now.hot { background: var(--severe); box-shadow: 0 0 0 3px color-mix(in srgb, var(--severe) 30%, transparent); }
@keyframes jump-pop { from { transform: scale(0); } }
@media (max-width: 640px) {
  .ball-show { flex-direction: column; }
  .ball-scene { flex: none; width: 100%; max-height: 240px; }
  .ball-headline { font-size: var(--fs-title); }
}
@media (prefers-reduced-motion: reduce) {
  .sky-balloon, .sky-star, .sky-fog, .jump-line, .jump-dot.now { animation: none; }
  .sky-balloon { transform: translateY(150px); }
}
@media (max-width: 640px) { .ball-scene { flex: none; width: 190px; max-height: none; margin: 0 auto; } }
.ball-scene { align-self: flex-start; aspect-ratio: 240 / 320; }

/* The balloon's real sky, side by side with the story */
.ball-show { align-items: flex-start; }
.ball-profile { flex: 1 1 58%; min-width: 0; width: 100%; height: auto; border-radius: 12px; display: block; }
.ball-show .ball-story { flex: 1 1 42%; }
.jump-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
.balloon-chart { filter: invert(1) hue-rotate(180deg); border-radius: 10px; }
@media (max-width: 760px) { .ball-profile { flex: none; } .ball-show .ball-story { flex: none; width: 100%; } }

/* Tropical storms: what they mean here, even with nothing out there */
.trop-season { margin: var(--sp-3) 0; }
.trop-head { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; font-size: var(--fs-text2); margin-bottom: var(--sp-2); }
.trop-head span { color: var(--text-2); }
.trop-bar { position: relative; height: 10px; border-radius: 5px; background: var(--card-2); }
.trop-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: linear-gradient(90deg, var(--cool), var(--moderate)); }
.trop-bar b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); }
.trop-axis { position: relative; display: flex; justify-content: space-between; font-size: var(--fs-note); color: var(--muted); margin-top: var(--sp-1); }
.trop-gulf { display: flex; flex-direction: column; gap: 0.125rem; background: var(--card-2); border-left: 4px solid var(--muted); border-radius: 10px; padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
.trop-gulf.on { border-left-color: var(--cool); }
.trop-gulf span { font-size: var(--fs-small); color: var(--text-2); }
.trop-past > strong { display: block; font-size: var(--fs-text2); margin-bottom: var(--sp-1); }
.trop-storm { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 0.5rem; padding: var(--sp-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-2); }
.trop-storm > span { color: var(--muted); }
.trop-storm b { color: var(--text); }

/* Gulf moisture: the stream from the Gulf, and the dew point from yesterday through the next two days */
.gulf-story { margin: var(--sp-2) 0 0; font-size: var(--fs-text2); font-weight: 600; line-height: 1.4; color: var(--text); max-width: none; }
.gulf-show { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: var(--sp-3); }
.gulf-flow { flex: 0 0 88px; width: 88px; height: auto; border-radius: 8px; background: var(--card); }
.gulf-plot { flex: 1 1 auto; min-width: 0; }
.gulf-chart { display: block; width: 100%; height: auto; }
.gulf-flow.on .gulf-stream { animation: gulf-run var(--flow, 4s) linear infinite; }
.gulf-flow:not(.on) .gulf-stream { stroke: var(--muted); }
@keyframes gulf-run { to { stroke-dashoffset: -38; } }
.gulf-key { display: flex; gap: 0.75rem; font-size: var(--fs-note); color: var(--muted); margin-top: var(--sp-1); }
.gulf-key i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--cool); vertical-align: 3px; margin-right: 0.25rem; }
.gulf-key i.fc { border-top-style: dashed; }
@media (prefers-reduced-motion: reduce) { .gulf-flow.on .gulf-stream { animation: none; } }
@media (max-width: 640px) { .gulf-flow { display: none; } }
.trop-hit { font-style: normal; font-size: var(--fs-note); font-weight: 600; color: var(--text); background: var(--card-2); border-radius: 3px; padding: 0 var(--sp-2); margin-left: var(--sp-1); }
/* Hazards has a lot to say, so it gets more room: wider gaps, roomier cards, and the storm ingredients and balloon across the full page */
@media (min-width: 961px) {
  #page-severe .card, #page-flooding .card, #page-fireheat .card, #page-quakes .card, #page-safety .card { padding: var(--sp-6); }
  #page-severe .sw-stats, #page-flooding .sw-stats, #page-fireheat .sw-stats, #page-quakes .sw-stats, #page-safety .sw-stats { gap: 0.75rem; }
  #page-severe .verdict { margin: var(--sp-4) 0; padding: var(--sp-4) var(--sp-5); }
  .ing-grid, .risk-grid { gap: 0.75rem; }
  .ing { padding: var(--sp-4) var(--sp-5); gap: 0.25rem; }
  .recipe { margin: var(--sp-5) 0; }
  #balloon { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line); }
}
@media (min-width: 1200px) {
  #page-severe, #page-flooding, #page-fireheat, #page-quakes, #page-safety { column-gap: 1.5rem; }
  #page-severe > *, #page-flooding > *, #page-fireheat > *, #page-quakes > *, #page-safety > * { margin-bottom: 1.5rem; }
  #ingCard { column-span: all; }
  .ing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ball-show { gap: 2rem; }
  .ball-profile { flex: 1 1 60%; }
  .ball-show .ball-story { flex: 1 1 40%; }
  .jump-row { padding: var(--sp-3) 0; }
}

/* Gulf moisture has its own card now, so its inner box steps back */
#gulfCard .trop-gulf { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
#gulfCard .trop-gulf > strong { font-size: var(--fs-lead); }

/* One set of ingredients beside the sky, top of the sky to the ground, each with what it means */
.jump-name { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; }
.jump-name strong { display: inline; }
.jump-name small { font-size: var(--fs-note); color: var(--muted); }
.jump-name span { flex: 1 0 100%; }
.jump-means { font-size: var(--fs-small); line-height: 1.35; color: var(--text); }
.jump-means span { color: var(--muted); }

/* The flight: a live readout above the sky, layers appearing as the balloon reaches them, and the ingredient it is passing through lit up */
.ball-left { flex: 1 1 60%; min-width: 0; }
.ball-hud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: var(--sp-2); }
.ball-hud[hidden] { display: none; }
.ball-hud > div { background: var(--card-2); border-radius: 8px; padding: var(--sp-2) var(--sp-3); min-width: 0; }
.ball-hud span { display: block; font-size: var(--fs-note); color: var(--muted); }
.ball-hud b { font-size: var(--fs-lead); font-variant-numeric: tabular-nums; }
.ball-profile.riding .ride-on { opacity: 0; transition: opacity .5s; }
.ball-profile.riding .ride-on.on { opacity: 1; }
.jump-row { transition: background .3s, box-shadow .3s; border-radius: 6px; }
.jump-row.live { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent); }
@media (max-width: 760px) { .ball-left { flex: none; width: 100%; } .ball-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Gulf moisture runs the full width under the outlook row: the words on the left, the chart on the right, with even gaps around it */
@media (min-width: 1200px) {
  #gulfCard { column-span: all; }
  #gulfCard .trop-gulf { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto auto 1fr; column-gap: 2rem; }
  #gulfCard .trop-gulf > strong, #gulfCard .trop-gulf > span, #gulfCard .gulf-story { grid-column: 1; }
  #gulfCard .gulf-show { grid-column: 2; grid-row: 1 / 4; margin-top: 0; }
}

/* The outlook and Looking further ahead share a row, so they end level */
.hz-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 1200px) {
  .hz-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; column-span: all; }
}

/* The outlook's map, and the two weeks ahead on one strip */
#outlookMapWrap { margin-top: var(--sp-4); }
#outlookMap { height: 280px; }
.risk-tile[data-day] { cursor: pointer; }
.risk-tile.risk-sel { outline: 2px solid var(--text-2); outline-offset: 1px; }
.outlook-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; align-items: center; font-size: var(--fs-small); margin-top: var(--sp-2); }
.outlook-key { display: inline-flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; color: var(--text-2); }
.outlook-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.25rem; }
.tl-grid { display: grid; grid-template-columns: 74px repeat(14, minmax(0, 1fr)); gap: 3px; align-items: stretch; margin: var(--sp-4) 0 var(--sp-2); }
.tl-head { text-align: center; font-size: var(--fs-note); color: var(--muted); line-height: 1.25; }
.tl-head b { display: block; color: var(--text-2); }
.tl-head.now b { color: var(--text); font-size: .62rem; }
.tl-side { font-size: var(--fs-note); color: var(--muted); align-self: center; line-height: 1.2; }
.tl-span { grid-row: span 8; align-self: start; padding-top: var(--sp-2); }
.tl-cell { height: 54px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-note); font-weight: 700; background: var(--card-2); min-width: 0; overflow: hidden; }
.tl-cell.hot { background: var(--c); color: #111; writing-mode: vertical-rl; }
.tl-cell.fuzzy, .tl-key .fuzzy { background: repeating-linear-gradient(135deg, var(--card-2) 0 4px, var(--line) 4px 7px); color: var(--text-2); }
.tl-cell.none, .tl-key .none { background: none; border: 1px dashed var(--line); }
.tl-bar { min-width: 0; height: 28px; margin-top: 4px; border-radius: 5px; background: color-mix(in srgb, var(--moderate) 30%, var(--card)); border: 1px solid color-mix(in srgb, var(--moderate) 55%, transparent); display: flex; align-items: center; padding: 0 var(--sp-2); font-size: var(--fs-small); font-weight: 600; overflow: hidden; }
.tl-bar span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-key { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--fs-note); color: var(--muted); }
.tl-key i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 0.25rem; vertical-align: -1px; box-sizing: border-box; }
@media (max-width: 640px) {
  .tl-grid { grid-template-columns: 44px repeat(14, minmax(0, 1fr)); gap: 2px; }
  .tl-cell { height: 44px; font-size: .6rem; }
  .tl-head.now b { font-size: 0; }
  .tl-head.now b::after { content: 'T'; font-size: var(--fs-note); }
  #outlookMap { height: 230px; }
}
@media (min-width: 1200px) { .tl-cell { height: 120px; } .tl-bar { height: 40px; } }

/* The strip's everyday rows, sized so the card fills */
.tl-cell { height: 64px; }
@media (min-width: 1200px) { .tl-cell { height: 64px; } .tl-bar { height: 34px; } }
.tl-temp { position: relative; height: 150px; margin: 14px 0; min-width: 0; }
.tl-temp i { position: absolute; left: 50%; width: 8px; margin-left: -4px; border-radius: 4px; background: linear-gradient(180deg, var(--warm), var(--cool)); }
.tl-temp b, .tl-temp em { position: absolute; left: 50%; transform: translateX(-50%); font-size: var(--fs-note); font-style: normal; white-space: nowrap; }
.tl-temp b { bottom: 100%; color: var(--text); }
.tl-temp em { top: 100%; color: var(--muted); }
.tl-rain { position: relative; height: 60px; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; border-bottom: 1px solid var(--line); min-width: 0; }
.tl-rain i { display: block; background: var(--cool); border-radius: 3px 3px 0 0; }
.tl-rain span { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: var(--fs-note); color: var(--text-2); }
@media (max-width: 640px) { .tl-temp { height: 110px; } .tl-temp b, .tl-temp em, .tl-rain span { font-size: .56rem; } }

/* Tornadoes: strength by color, and each path drawn to scale */
.tor-stack { display: flex; height: 30px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: var(--sp-3); }
.tor-stack span { display: flex; align-items: center; justify-content: center; gap: 0.25rem; font-size: var(--fs-small); color: #111; min-width: 3px; white-space: nowrap; }
.tor-list { list-style: none; padding: 0; margin: 0; }
.tor-list li.tor { display: flex; gap: 0.75rem; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.tor-list li.tor:last-child { border-bottom: 0; }
.tor-ef { flex: 0 0 66px; height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 8px; background: color-mix(in srgb, var(--ef) 24%, var(--card)); border: 1px solid var(--ef); }
.tor-ef b { font-size: var(--fs-lead); line-height: 1.1; }
.tor-ef small { font-size: .62rem; color: var(--text-2); white-space: nowrap; }
.tor-body { flex: 1 1 auto; min-width: 0; }
.tor-top { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; align-items: baseline; }
.tor-top span { font-size: var(--fs-small); color: var(--muted); }
.tor-track { display: flex; align-items: center; height: 22px; }
.tor-track i { display: block; border-radius: 99px 40px 40px 99px; min-height: 3px; }
.tor-facts { display: flex; flex-wrap: wrap; gap: 0 0.75rem; font-size: var(--fs-small); color: var(--text-2); }
.tor-facts .near { color: var(--t-serious); font-weight: 700; }

/* A long-lasting condition, told in words under the calendar */
.tl-note { margin: var(--sp-3) 0 0; font-size: var(--fs-small); color: var(--text-2); }

/* On wide screens the rows grow to meet the bottom of the card beside it */
@media (min-width: 1200px) { .tl-cell { height: 80px; } .tl-temp { height: 215px; } .tl-rain { height: 90px; } }

/* The balloon card: the links sit under the picture, filling the space beside the longer list of readings */
.ball-show { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) {
  .ball-show { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto 1fr; row-gap: var(--sp-3); }
  .ball-left { grid-column: 1; grid-row: 1; }
  .ball-show .ball-story { grid-column: 2; grid-row: 1 / 3; }
  .ball-more { grid-column: 1; grid-row: 2; min-width: 0; }
}

/* Words drawn on the balloon's sky stay readable over the lines */
.ball-profile text { paint-order: stroke; stroke: rgba(7, 18, 38, 0.65); stroke-width: 2.5px; stroke-linejoin: round; }
.ball-said { margin: 0 0 var(--sp-2); font-size: var(--fs-text2); line-height: 1.45; }

/* A day with a severe risk: a wash of the risk's color, when it is, how bad on the 1 to 5 scale, and the odds */
.hz-risk { border-left-width: 1px; border-color: color-mix(in srgb, var(--answer) 45%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--answer) 20%, var(--card)), var(--card) 62%); }
.hz-a-when { font-size: var(--fs-text2); font-weight: 700; color: var(--answer); margin-bottom: var(--sp-1); }
.hz-gauge { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.hz-meter { display: grid; grid-template-columns: repeat(5, 34px); gap: 3px; row-gap: var(--sp-2); }
.hz-meter b { grid-column: 1 / 4; font-size: var(--fs-text2); white-space: nowrap; }
.hz-meter span { grid-column: 4 / 6; justify-self: end; align-self: center; font-size: var(--fs-small); color: var(--muted); }
.hz-meter i { height: 8px; border-radius: 2px; background: var(--line); }
.hz-meter i.on { background: var(--answer); }
.hz-odds { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--fs-note); color: var(--muted); }
.hz-odds span { display: flex; flex-direction: column; }
.hz-odds b { font-size: var(--fs-text2); color: var(--text); }
@media (max-width: 1100px) { .hz-risk { flex-wrap: wrap; } .hz-risk .hz-a-main { flex-basis: 100%; } }
@media (max-width: 760px) { .hz-meter { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* The Weather page's two columns end level: whichever runs short, its long card takes up the difference */
@media (min-width: 961px) {
  .col-main > .now-card { flex: 0 0 auto; }
  .col-main > #notesCard { flex: 1 1 auto; }
}

/* Air & allergies: the answer across the top, then the days and allergies, the hours, and what is behind it */
#airNow .air-hero { align-items: flex-start; gap: 1.5rem; }
.air-say { flex: 1 1 auto; min-width: 0; }
.air-say p { margin: 0 0 var(--sp-2); }
.air-hero .air-say .air-word { font-size: var(--fs-big); margin-bottom: var(--sp-2); }
.air-measured { flex: 0 0 240px; display: flex; flex-direction: column; gap: 0.125rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }
#airOfficial:empty { display: none; }
#airOfficial { flex: 0 0 auto; max-width: 300px; }
.air-measured > span { font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.air-measured > div { display: flex; align-items: baseline; gap: 0.5rem; }
.air-measured b { font-size: var(--fs-huge); line-height: 1.1; }
.air-measured small { font-size: var(--fs-note); color: var(--text-2); line-height: 1.4; }
.pa-table { display: grid; grid-template-columns: 74px repeat(var(--days), minmax(0, 1fr)); gap: 0.5rem; align-items: stretch; }
.pa-table .pa-when { text-align: left; align-self: end; }
.pa-side { align-self: center; font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.pa-side small { display: block; font-weight: 400; font-size: var(--fs-note); color: var(--muted); }
.pa-cell { background: var(--card-2); border-radius: 10px; padding: var(--sp-3); display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.pa-cell strong { line-height: 1.2; }
.pa-cell small { font-size: var(--fs-note); color: var(--muted); }
.pa-cell .meter { margin-top: auto; height: 5px; }
.py-year { position: relative; display: grid; grid-template-columns: 74px repeat(12, minmax(0, 1fr)); gap: 2px; align-items: center; margin-bottom: var(--sp-2); }
.py-name { font-size: var(--fs-note); color: var(--text-2); white-space: nowrap; }
.py-year i { height: 18px; border-radius: 2px; background: color-mix(in srgb, var(--warm) var(--v), var(--card-2)); }
.py-year b { font-size: var(--fs-note); font-weight: 400; color: var(--muted); text-align: center; }
.py-year em { position: absolute; top: -3px; bottom: 16px; left: calc(74px + (100% - 74px) * var(--now)); width: 2px; background: var(--text); border-radius: 1px; }
.air-parts { display: flex; flex-direction: column; gap: var(--sp-4); }
.ap-top { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.ap-top span { font-weight: 700; white-space: nowrap; }
.ap-top small { font-weight: 600; color: var(--muted); }
.ap-bar { position: relative; height: 10px; margin: var(--sp-1) 0 var(--sp-2); border-radius: 5px; background: var(--card-2); }
.ap-bar i { display: block; height: 100%; border-radius: 5px; }
.ap-bar u { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text-2); opacity: .5; }
.air-part p { margin: 0; font-size: var(--fs-note); line-height: 1.45; color: var(--text-2); }
.air-part p span { color: var(--muted); }
@media (max-width: 760px) {
  #airNow .air-hero { gap: 0.75rem; }
  #airOfficial { max-width: none; width: 100%; }
  .air-measured { padding: var(--sp-3) 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .pa-table { grid-template-columns: 50px repeat(var(--days), minmax(0, 1fr)); gap: 0.25rem; }
  .pa-cell { padding: var(--sp-2); }
  .pa-cell strong { font-size: var(--fs-small); }
  .pa-cell small { display: none; }
}
@media (min-width: 1200px) {
  #page-air { display: grid; column-count: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
  #page-air > * { margin-bottom: 0; min-width: 0; }
  #page-air > .subtabs, #page-air > .page-intro, #page-air > #airNow, #page-air > #airChartCard { grid-column: 1 / -1; }
  #page-air > .card:has(+ #allergyCard[hidden]) { grid-column: 1 / -1; }
  #page-air .ozone-grid { grid-template-columns: 1fr; }
  #page-air .ozone-grid svg { max-width: 600px; }
}

/* The Air page's moving window, and the last 30 days */
.air-window { margin-bottom: var(--sp-3); }
#airDots { display: block; width: 100%; height: 170px; border-radius: 12px; background: radial-gradient(ellipse at 30% 20%, #1c3560, #0a1428 75%); }
.air-window-key { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-top: var(--sp-2); font-size: var(--fs-note); color: var(--muted); }
.air-window-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.25rem; }
.air-best { margin: 0 0 var(--sp-3); font-size: var(--fs-text2); font-weight: 600; }
.air-days { display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 3px; }
.air-days i { height: 30px; border-radius: 3px; }
.air-days i.today { outline: 2px solid var(--text); outline-offset: 1px; opacity: 1 !important; }
.air-days-ends { display: flex; justify-content: space-between; margin-top: var(--sp-1); font-size: var(--fs-note); color: var(--muted); }
/* Your air record */
.ar-wrap { overflow-x: auto; margin-bottom: var(--sp-3); }
.ar-table { width: 100%; border-collapse: collapse; font-size: var(--fs-text2); }
.ar-table th { text-align: left; font-size: var(--fs-small); color: var(--muted); font-weight: 600; padding: var(--sp-2); white-space: nowrap; }
.ar-table td { padding: var(--sp-2); border-top: 1px solid var(--line); vertical-align: top; }
/* Day, numbers and levels stay on one line; the small notes go under the value and the last two columns wrap, so the table fits the card */
.ar-table td:nth-child(-n+6) { white-space: nowrap; }
.ar-table td small.muted { display: block; font-size: var(--fs-note); margin-top: 2px; }
.ar-table td:nth-child(7) { min-width: 8rem; }
.ar-table td:nth-child(8) { min-width: 7rem; }
.ar-you { white-space: nowrap; }
.ar-table tr.hard td { background: color-mix(in srgb, var(--t-warn) 8%, transparent); }
.ar-aqi { display: inline-block; min-width: 2.4em; padding: 1px 6px; border-radius: 6px; text-align: center; font-weight: 700; color: #fff; background: var(--c); }
.ar-flag { color: var(--t-warn); font-weight: 600; white-space: normal; }
.ar-fast { color: var(--t-warn); font-weight: 700; }
.ar-check { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); max-width: 40rem; }
.ar-check-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.ar-check select, .ar-check input { font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; min-width: 0; }
.ar-feel { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-feel .chip[aria-pressed="true"] { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.ar-check-foot { display: flex; align-items: center; gap: var(--sp-3); }
.ar-check-foot > button { flex: none; white-space: nowrap; }
.ar-check-foot > span { min-width: 0; }
.ar-you { display: block; font-weight: 600; }
/* Who is checking in (renderAirRecord in extras.js) */
.ar-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: var(--sp-2); }
.ar-who .ar-add { border-style: dashed; }
.ar-add-form { display: inline-flex; gap: 0.5rem; align-items: center; }
.ar-add-form[hidden] { display: none; }
.ar-add-form input { width: 9rem; }
.ar-person { display: grid; grid-template-columns: 3.5rem auto; column-gap: 0.5rem; align-items: baseline; }
.ar-person + .ar-person { margin-top: 0.25rem; }
.ar-person > b { grid-row: 1 / 4; font-size: var(--fs-note); color: var(--muted); font-weight: 600; }
.ar-person > :not(b) { grid-column: 2; }
.ar-you.ar-some { color: var(--t-warn); } .ar-you.ar-bad { color: var(--t-serious); }
.ar-note { display: block; color: var(--text-2); white-space: normal; max-width: 22rem; }
@media (max-width: 640px) {
  .ar-table thead { display: none; }
  .ar-table, .ar-table tbody, .ar-table tr, .ar-table td { display: block; }
  .ar-table tr { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--line); }
  .ar-table td, .ar-table td:nth-child(n) { border: none; padding: 0; white-space: normal; min-width: 0; }
  .ar-table td small.muted { display: inline; }
  .ar-table tr.hard { background: color-mix(in srgb, var(--t-warn) 8%, transparent); }
  .ar-table tr.hard td { background: none; }
  .ar-table td:nth-child(1) { grid-column: 1 / -1; font-weight: 600; }
  .ar-table td:nth-child(2)::before { content: 'Worst '; color: var(--muted); }
  .ar-table td:nth-child(3)::before { content: 'Average '; color: var(--muted); }
  .ar-table td:nth-child(4)::before { content: 'Mold '; color: var(--muted); }
  .ar-table td:nth-child(5)::before { content: 'Pollen '; color: var(--muted); }
  .ar-table td:nth-child(6)::before { content: 'Pressure '; color: var(--muted); }
  .ar-table td:nth-child(7), .ar-table td:nth-child(8) { grid-column: 1 / -1; }
  .ar-table td:nth-child(7):empty, .ar-table td:nth-child(8):empty { display: none; }
}
@media (max-width: 760px) { .air-days { gap: 1px; } .air-days i { height: 24px; } #airDots { height: 140px; } }

/* What's in the air: one line per pollutant, tap for what it is */
.ap-scale, .ap-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 96px; gap: 0.75rem; align-items: center; }
.ap-scale { font-size: var(--fs-note); color: var(--muted); margin-top: var(--sp-3); }
.ap-scale span { grid-column: 2; grid-row: 1; }
.ap-scale span:nth-child(2) { padding-left: 33.3%; }
.ap-scale span:nth-child(3) { padding-left: 66.7%; white-space: nowrap; }
.ap-group { margin-top: var(--sp-3); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--line); font-size: var(--fs-small); font-weight: 700; color: var(--text-2); }
.ap-group small { margin-left: 0.5rem; font-size: var(--fs-note); font-weight: 400; color: var(--muted); }
.ap-row { width: 100%; padding: var(--sp-2) var(--sp-1); background: none; border: 0; border-radius: 6px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ap-row:hover, .ap-row[aria-expanded="true"] { background: var(--card-2); }
.ap-name { font-size: var(--fs-text2); font-weight: 600; min-width: 0; }
.ap-name small { display: block; font-size: var(--fs-note); font-weight: 700; color: var(--warm); }
.ap-row .ap-bar { display: block; margin: 0; }
.ap-val { text-align: right; font-weight: 700; white-space: nowrap; }
.ap-val small { font-weight: 600; color: var(--muted); }
.ap-more { padding: var(--sp-2) var(--sp-3) var(--sp-3); font-size: var(--fs-small); line-height: 1.45; }
.ap-more p { margin: 0 0 var(--sp-1); }
.ap-more span { color: var(--muted); }
.air-sizes { display: block; width: 100%; height: auto; margin-bottom: var(--sp-2); }
@media (max-width: 640px) {
  .ap-scale, .ap-row { grid-template-columns: 112px minmax(0, 1fr) 74px; gap: 0.5rem; }
  .ap-scale span:nth-child(3) { font-size: .6rem; }
  .ap-group small { display: block; margin-left: 0; }
}

/* Both lower cards run the full width, so neither leaves the other with empty space */
.air-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 1200px) {
  #page-air > .card:has(#airPollutants), #page-air > .card:has(#ozone) { grid-column: 1 / -1; }
  .air-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; }
  .air-split .ap-scale { margin-top: 0; }
  #page-air .ozone-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; }
  #page-air .ozone-grid svg { max-height: 230px; }
}
@media (min-width: 1200px) {
  .air-split > div:last-child { display: flex; flex-direction: column; }
  .air-split .ap-row { flex: 1 0 auto; }
  .air-split .ap-bar { height: 14px; border-radius: 7px; }
  .air-split .ap-bar i { border-radius: 7px; }
}

/* The Weather page's air warning */
.air-home { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.75rem; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 18%, var(--card)); cursor: pointer; }
.air-home[hidden] { display: none; }
.air-home > b { font-size: var(--fs-big); color: var(--text); }
.air-home span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; font-size: var(--fs-small); color: var(--text-2); }
.air-home strong { font-size: var(--fs-body); color: var(--text); }
.air-home i { font-style: normal; font-size: var(--fs-small); font-weight: 700; color: var(--link); white-space: nowrap; }

/* Best times: the answer, then each day hour by hour, then every activity at once */
.plan-hero { display: flex; align-items: center; gap: 1.25rem; margin-top: var(--sp-4); padding: var(--sp-5); border-radius: 14px; border: 1px solid color-mix(in srgb, var(--good) 50%, var(--line)); background: linear-gradient(100deg, color-mix(in srgb, var(--good) 24%, var(--card)), var(--card-2) 70%); }
.plan-icon { font-size: 3.25rem; line-height: 1; flex: 0 0 auto; }
.plan-say { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.plan-say small { font-size: var(--fs-small); font-weight: 700; color: var(--text-2); }
.plan-say strong { font-size: var(--fs-huge); line-height: 1.15; }
.plan-say span { font-size: var(--fs-text2); color: var(--text-2); }
.plan-say .plan-watch { color: var(--t-serious); font-weight: 600; }
.plan-spans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0.5rem; margin-top: var(--sp-3); }
.plan-span { display: flex; flex-direction: column; padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: var(--card-2); }
.plan-span strong { font-size: var(--fs-text2); }
.plan-span span { font-size: var(--fs-small); color: var(--muted); }
.pg-cell { position: relative; flex-direction: column; height: 62px; gap: 1px; overflow: visible; }
.pg-cell span { font-size: 1rem; line-height: 1; }
.pg-cell b { font-size: var(--fs-note); font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.pg-cell.night, .pg-swatch.night { background: #0a1430; cursor: default; }
.pg-cell.win::after, .pg-swatch.win { content: ""; position: absolute; left: -1px; right: -1px; bottom: -4px; height: 3px; background: #ffd166; }
.pg-swatch.win { position: static; display: inline-block; height: 4px; vertical-align: middle; }
.pg-cell.now { z-index: 1; }
.pg-row { row-gap: 6px; margin-bottom: 4px; }
.plan-all { display: flex; flex-direction: column; }
.plan-row { position: relative; display: grid; grid-template-columns: 30px minmax(9rem, 14rem) minmax(0, 1fr) 52px; gap: 0.75rem; align-items: center; width: 100%; padding: var(--sp-2) var(--sp-2); background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.plan-row:last-child { border-bottom: 0; }
.plan-row:hover, .plan-row.on { background: var(--card-2); }
.plan-row.on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.plan-row-ic { font-size: 1.25rem; }
.plan-row-txt { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.plan-row-name { font-weight: 600; font-size: var(--fs-text2); }
.plan-row-when { font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; }
/* The 3-day skyline in each row (renderPlanner in insights.js) */
.plan-row-hdr { cursor: default; padding-top: 0; padding-bottom: var(--sp-1); }
.plan-row-hdr:hover { background: none; }
.plan-rb-days { grid-column: 3; display: grid; grid-template-columns: repeat(3, 1fr); font-size: var(--fs-note); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.plan-rb-days span { padding-left: 4px; border-left: 1px solid var(--line); }
.plan-row-rb { display: block; min-width: 0; }
.rb { display: block; width: 100%; height: 34px; overflow: visible; }
.rb-day { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rb-dark { fill: var(--line); }
.rb-win { fill: #ffd166; }
.rb-now { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; }
.plan-row:hover .rb-bar { filter: brightness(1.12); }
.plan-all.grow .rb-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: rb-grow .5s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(var(--k) * 8ms); }
@keyframes rb-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .plan-all.grow .rb-bar { animation: none; } }
.plan-row-when b { color: var(--text); }
.plan-row-score { font-size: var(--fs-small); font-weight: 700; text-align: right; }
@media (max-width: 640px) {
  .plan-hero { flex-wrap: wrap; gap: 0.75rem; padding: var(--sp-4); }
  .plan-icon { font-size: 2.25rem; }
  .plan-say strong { font-size: var(--fs-big); }
  .pg-cell { height: 40px; }
  .pg-cell span, .pg-cell b { display: none; }
  .plan-row { grid-template-columns: 26px minmax(0, 1fr) 46px; row-gap: 0.5rem; }
  .plan-row-txt { grid-column: 2; grid-row: 1; }
  .plan-row-score { grid-column: 3; grid-row: 1; }
  .plan-row-when { white-space: normal; }
  .plan-row-rb, .plan-rb-days { grid-column: 2 / 4; grid-row: 2; }
  .plan-rb-days { grid-row: 1; }
}
@media (min-width: 1200px) {
  #page-planner { display: grid; column-count: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  #page-planner > * { margin-bottom: 0; min-width: 0; }
  #page-planner > .subtabs, #page-planner > .page-intro, #page-planner > #planBestCard, #page-planner > #planGridCard { grid-column: 1 / -1; }
}
.plan-span .plan-watch { color: var(--t-serious); font-weight: 600; }

/* What's in the air: the bar's track shows the Good, Moderate and Sensitive zones, and the size row uses the page's own text */
.ap-scale span { grid-column: auto; grid-row: auto; padding-left: 0 !important; }
.ap-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ap-zones i { font-style: normal; text-align: center; white-space: nowrap; }
.ap-bar.zones { background: linear-gradient(90deg, color-mix(in srgb, #2e9e5b 26%, var(--card-2)) 0 33.3%, color-mix(in srgb, #e3b008 24%, var(--card-2)) 33.3% 66.7%, color-mix(in srgb, #ef8f1c 26%, var(--card-2)) 66.7%); overflow: hidden; }
.air-split .ap-group:first-child { margin-top: 0; }
.sz-row { --k: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; align-items: end; margin-bottom: var(--sp-2); }
.sz { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.sz-shape { height: 78px; display: flex; align-items: center; justify-content: center; }
.sz-shape i { display: block; width: calc(var(--um) * var(--k) * 1px); height: calc(var(--um) * var(--k) * 1px); min-width: 2px; min-height: 2px; border-radius: 50%; }
.sz-shape i.hair { height: 78px; border-radius: 3px; background: linear-gradient(90deg, #3d2c20, #7d6248 45%, #a58868 55%, #4a3627); }
.sz b { font-size: var(--fs-small); font-weight: 600; line-height: 1.2; }
.sz small { font-size: var(--fs-note); color: var(--muted); }
@media (max-width: 640px) { .sz-row { --k: .75; gap: 0.25rem; } .ap-zones i { font-size: .6rem; } }

/* Air quality over the days and today's ozone share a row, and the ozone chart grows to match */
@media (min-width: 1200px) {
  #page-air > #airChartCard, #page-air > .card:has(#ozone) { grid-column: auto; }
  #page-air .ozone-grid { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  #page-air .ozone-grid svg { max-height: none; width: 100%; }
}
@media (min-width: 1200px) { #page-air .ozone-grid svg text { font-size: 7.5px; } }

/* Today's almanac: a page from an old almanac, in the app's own type */
.alm-date { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; padding-bottom: var(--sp-2); border-bottom: 2px solid var(--line); }
.alm-date strong { font-size: var(--fs-title); }
.alm-date span { font-size: var(--fs-small); color: var(--muted); }
.alm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.alm-col { padding: var(--sp-4) var(--sp-5); border-right: 1px solid var(--line); min-width: 0; }
.alm-col:first-child { padding-left: 0; }
.alm-col:last-child { border-right: 0; }
.alm-col h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-small); font-weight: 700; color: var(--muted); }
.alm-col p { margin: 0 0 var(--sp-1); font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); }
.alm-col p.alm-big { font-size: var(--fs-lead); font-weight: 700; color: var(--text); line-height: 1.25; }
.alm-col p.muted { font-size: var(--fs-note); color: var(--muted); }
.alm-quote { margin: 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--line); text-align: center; font-size: var(--fs-lead); font-style: italic; }
.alm-quote span { display: block; font-size: var(--fs-note); font-style: normal; color: var(--muted); margin-top: var(--sp-1); }
/* Weather lore on trial */
.lore-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0.75rem; margin-bottom: var(--sp-3); }
.lore { background: var(--card-2); border-radius: 12px; padding: var(--sp-4); display: flex; flex-direction: column; min-width: 0; }
.lore-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.lore-say { margin: 0; font-size: var(--fs-body); font-weight: 700; line-height: 1.3; }
.lore-stamp { flex: 0 0 auto; max-width: 104px; padding: 3px 7px; border: 2px solid currentColor; border-radius: 3px; font-size: var(--fs-note); font-weight: 700; line-height: 1.15; text-align: center; transform: rotate(3deg); }
.lore-stamp.good { color: #5fd38d; }
.lore-stamp.warn { color: #ffd166; }
.lore-stamp.bad { color: #ff9a7a; }
.lore-stamp.plain { color: var(--muted); }
.lore-of { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-note); color: var(--muted); }
.lore-q { margin: auto 0 var(--sp-2); font-size: var(--fs-small); color: var(--text-2); }
.lore-bar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 38px; gap: 0.5rem; align-items: center; font-size: var(--fs-note); margin-bottom: var(--sp-1); color: var(--text-2); }
.lore-bar i { display: block; height: 10px; border-radius: 5px; background: var(--line); overflow: hidden; }
.lore-bar b { display: block; height: 100%; background: var(--muted); }
.lore-bar b.hot { background: var(--accent); }
.lore-bar strong { text-align: right; color: var(--text); }
.lore-note { margin: var(--sp-2) 0 0; font-size: var(--fs-note); color: var(--text-2); }
@media (max-width: 760px) {
  .alm-grid { grid-template-columns: 1fr; }
  .alm-col, .alm-col:first-child { padding: var(--sp-3) 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .alm-col:last-child { border-bottom: 0; }
  .lore-bar { grid-template-columns: 104px minmax(0, 1fr) 34px; }
}
@media (min-width: 1200px) { #ev-almanac, #ev-lore { column-span: all; } }
@media (min-width: 1200px) { .lore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Flooding: lakes as basins, rivers as moving ribbons, and how far the water sits below you */
.lake-row { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 0.75rem; }
.lake-pic { display: block; width: 100%; height: auto; margin-top: var(--sp-2); }
.lake-wave { animation: lakeWave 7s linear infinite; }
@keyframes lakeWave { to { transform: translateX(60px); } }
.wt-ribbon { height: 26px; display: flex; align-items: center; border-radius: 4px; background: var(--card); overflow: hidden; }
.wt-ribbon i { display: block; width: 100%; background: repeating-linear-gradient(100deg, #2a78d6 0 18px, #5aa5f0 18px 26px, #2a78d6 26px 44px); background-size: 44px 100%; animation: riverFlow 3s linear infinite; }
@keyframes riverFlow { to { background-position: 44px 0; } }
.water-tile.fast .wt-ribbon i { background: repeating-linear-gradient(100deg, #c9503f 0 18px, #ef8f6a 18px 26px, #c9503f 26px 44px); background-size: 44px 100%; }
.flood-rule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; align-items: end; margin-top: var(--sp-3); }
.flood-rule > div { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-height: 92px; text-align: center; }
.flood-rule .fr-ic { font-size: 1.5rem; line-height: 1; position: relative; z-index: 1; margin-bottom: -10px; }
.flood-rule i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, color-mix(in srgb, #5aa5f0 75%, transparent), #2a78d6); }
.flood-rule b { margin-top: var(--sp-1); font-size: var(--fs-text2); }
.flood-rule small { font-size: var(--fs-note); color: var(--text-2); line-height: 1.25; }
.drop-chart { margin-bottom: var(--sp-2); }
.drop-ground { border-top: 3px solid #7d6248; padding-top: 2px; font-size: var(--fs-note); color: var(--text-2); }
.drop-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0.5rem; }
.drop-col { display: flex; flex-direction: column; min-width: 0; text-align: center; }
.drop-well { height: 150px; }
.drop-well i { position: relative; display: block; min-height: 4px; background: linear-gradient(180deg, transparent, color-mix(in srgb, #2a78d6 22%, transparent) 40%, color-mix(in srgb, #2a78d6 28%, transparent)); border-bottom: 5px solid #5aa5f0; }
.drop-well b { position: absolute; left: 0; right: 0; bottom: 3px; font-size: var(--fs-note); font-style: normal; line-height: 1.15; }
.drop-col span { margin-top: var(--sp-1); font-size: var(--fs-note); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.drop-col small { font-size: .62rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .lake-wave, .wt-ribbon i { animation: none; } }
@media (max-width: 640px) { .drop-cols { gap: 0.25rem; } .drop-col span { font-size: .62rem; } .drop-well b { font-size: .62rem; } }
@media (min-width: 1200px) {
  #us-water { column-span: all; }
  #us-water .water-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #us-water .lake-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
.drop-ground { border-top: 0; border-bottom: 3px solid #7d6248; padding: 0 0 2px; }
.drop-well { box-sizing: content-box; height: 130px; padding-bottom: 20px; }
.drop-well b { top: 100%; bottom: auto; margin-top: 6px; }

/* The Almanack tab is one wide column of cards */
#page-almanack > .card { margin-bottom: 1rem; }

/* The almanac's pictures */
.alm-grid { gap: 0.75rem; margin-top: var(--sp-3); }
.alm-col, .alm-col:first-child { padding: var(--sp-4); border: 0; border-radius: 12px; background: var(--card-2); display: flex; flex-direction: column; }
.alm-pic { display: block; width: 100%; height: auto; border-radius: 8px; margin-bottom: var(--sp-3); }
.alm-moon { background: linear-gradient(180deg, #081126, var(--card-2)); }
.alm-moonpic { display: flex; justify-content: center; }
.alm-moonpic .moon-pic { width: 112px; height: 112px; margin: 0; }
.alm-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin: var(--sp-2) 0 var(--sp-3); text-align: center; }
.alm-week span { display: flex; flex-direction: column; align-items: center; }
.alm-week .moon-pic { width: 100%; max-width: 26px; height: auto; margin: 0; }
.alm-week small { font-size: var(--fs-note); color: var(--muted); }
.alm-wheel { display: block; width: 100%; max-width: 176px; margin: 0 auto var(--sp-2); }
.alm-wheel path { fill: none; stroke-linecap: round; }
.wh-span { stroke-width: 3; stroke-opacity: .32; }
.wh-peak { stroke-width: 4.5; }
.alm-quote { padding: var(--sp-5) 0 var(--sp-2); border-top: 0; font-size: var(--fs-big); }
@media (min-width: 761px) { .alm-col, .alm-col:first-child, .alm-col:last-child { border: 0; padding: var(--sp-4); } }
@media (max-width: 760px) { .alm-col, .alm-col:first-child { padding: var(--sp-4); border: 0; } .alm-quote { font-size: var(--fs-title); } }

/* The old planters' rule, and how the lore trials work */
.pl-lead { margin: 0 0 var(--sp-3); }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0.75rem; margin-bottom: var(--sp-3); }
.pl-side { display: flex; gap: 1rem; align-items: center; padding: var(--sp-4); border-radius: 12px; border: 1px solid transparent; background: var(--card-2); }
.pl-side.on { border-color: #f3ecd4; }
.pl-side .moon-pic { flex: 0 0 72px; width: 72px; height: 72px; margin: 0; }
.pl-side strong { font-size: var(--fs-lead); }
.pl-side small { display: block; font-size: var(--fs-note); color: var(--muted); margin-bottom: var(--sp-2); }
.pl-side p { margin: 0 0 var(--sp-1); font-size: var(--fs-small); color: var(--text-2); }
.pl-side p b { font-weight: 600; color: var(--text); }
.pl-now { margin-left: 0.5rem; padding: 1px 6px; border-radius: 3px; background: #f3ecd4; color: #111; font-size: var(--fs-note); font-weight: 700; }
.lore-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 2rem; margin-bottom: var(--sp-4); }
.lore-how .subhead { margin-top: 0; }
.lore-how ol { margin: 0; padding-left: 1.25rem; font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); }
.lore-how li { margin-bottom: var(--sp-1); }
.lore-key { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 0.5rem 0.75rem; align-items: center; }
.lore-key .lore-stamp { max-width: none; transform: none; }
.lore-key p { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.lore-key b { font-weight: 600; color: var(--text); }

/* The Almanack tab's other cards */
.alm-urgent, .alm-list, .alm-sky, .alm-fish, .alm-history, .alm-heard, .alm-notes { list-style: none; padding: 0; margin: 0; }
.alm-urgent li { display: flex; flex-direction: column; padding: var(--sp-3); margin-bottom: var(--sp-2); border-radius: 8px; background: color-mix(in srgb, var(--moderate) 16%, var(--card-2)); font-size: var(--fs-small); }
.alm-urgent strong { font-size: var(--fs-text2); }
.alm-urgent span { color: var(--text-2); }
.alm-list li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-text2); }
.alm-list li:last-child { border-bottom: 0; }
.alm-table { display: grid; grid-template-columns: 112px repeat(var(--n), minmax(0, 1fr)); gap: 3px; align-items: center; margin-bottom: var(--sp-2); }
.alm-table > b { font-size: var(--fs-note); text-align: center; color: var(--muted); }
.alm-job { font-size: var(--fs-small); color: var(--text-2); }
.alm-table > i { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 4px; font-style: normal; font-weight: 700; color: #fff; }
.alm-table > em { display: flex; justify-content: center; }
.alm-table .moon-pic { width: 24px; height: 24px; margin: 0; }
.alm-s2 { background: #2e9e5b; }
.alm-s1 { background: #8a7a2c; }
.alm-s0 { background: var(--card-2); }
.alm-k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.alm-sky li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 0.5rem; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
.alm-sky li:last-child { border-bottom: 0; }
.alm-sky b { grid-row: span 2; font-size: var(--fs-small); color: var(--muted); }
.alm-sky span { font-size: var(--fs-text2); font-weight: 600; }
.alm-sky small { font-size: var(--fs-note); color: var(--muted); }
.alm-fish li { display: grid; grid-template-columns: 56px 72px minmax(0, 1fr); gap: 0.5rem; align-items: baseline; padding: var(--sp-1) 0; font-size: var(--fs-small); }
.alm-stars { color: #ffd166; letter-spacing: 1px; }
.alm-stars i { font-style: normal; opacity: .2; }
.alm-fish small { font-size: var(--fs-note); color: var(--text-2); }
.alm-count { display: flex; align-items: center; gap: 0.75rem; font-size: var(--fs-text2); font-weight: 600; }
.alm-count input { width: 80px; padding: var(--sp-2); border-radius: 6px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; }
.alm-result { min-height: 1.5em; margin: var(--sp-2) 0; font-size: var(--fs-lead); font-weight: 700; }
.alm-heard li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 0.75rem; align-items: baseline; padding: var(--sp-1) 0; font-size: var(--fs-small); }
.alm-heard small { font-size: var(--fs-note); color: var(--muted); white-space: nowrap; }
.alm-history li { display: flex; flex-direction: column; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-2); }
.alm-history li:last-child { border-bottom: 0; }
.alm-history b { color: var(--text); font-size: var(--fs-text2); }
.alm-note { display: flex; gap: 0.5rem; margin-bottom: var(--sp-3); }
.alm-note input { flex: 1 1 auto; min-width: 0; padding: var(--sp-2) var(--sp-3); border-radius: 6px; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; }
.alm-notes li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 0 0.5rem; padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
.alm-notes small { grid-column: 2; font-size: var(--fs-note); color: var(--muted); }
.alm-notes button { grid-column: 3; grid-row: 1; font-size: var(--fs-note); }
.alm-yearwrap { overflow-x: auto; }
.alm-year { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.alm-year th, .alm-year td { padding: var(--sp-2); text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; font-weight: 400; }
.alm-year thead th { font-size: var(--fs-note); font-weight: 700; color: var(--muted); }
.alm-year tbody th { font-weight: 700; }
.alm-year tr.now { background: var(--card-2); }
.alm-year small { font-size: var(--fs-note); color: var(--muted); }
.sign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 0.75rem; }
@media (min-width: 1200px) {
  #page-almanack { display: grid; column-count: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  #page-almanack > * { margin-bottom: 0; min-width: 0; }
  #page-almanack > .subtabs, #page-almanack > .page-intro, #ev-almanac, #ev-planters, #ev-lore, #al-year, #al-read { grid-column: 1 / -1; }
  .sign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .alm-table { grid-template-columns: 78px repeat(var(--n), minmax(0, 1fr)); gap: 2px; } .alm-table .moon-pic { width: 18px; height: 18px; } .alm-heard li { grid-template-columns: minmax(0, 1fr) auto; } }

/* The Almanack tab: four labeled sections on a 12-column grid */
.alm-jump { position: sticky; top: var(--alm-top, 56px); z-index: 5; display: flex; gap: 0.25rem; padding: var(--sp-2) 0; margin-bottom: var(--sp-2); background: var(--bg); overflow-x: auto; }
.alm-jump button { flex: 0 0 auto; padding: var(--sp-1) var(--sp-3); border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text-2); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.alm-jump button:hover { color: var(--text); border-color: var(--accent); }
.alm-sec { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem 0.75rem; margin: var(--sp-4) 0 var(--sp-1); padding-bottom: var(--sp-1); border-bottom: 2px solid var(--line); scroll-margin-top: 110px; }
.alm-sec strong { font-size: var(--fs-big); }
.alm-sec span { font-size: var(--fs-small); color: var(--muted); }
#almSecToday { margin-top: 0; }
#page-almanack > .card { margin-bottom: 1rem; }
@media (min-width: 1200px) {
  #page-almanack { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #page-almanack > * { grid-column: 1 / -1; }
  #page-almanack > .card { margin-bottom: 0; }
  #page-almanack > .alm-sec { margin-bottom: 0; }
  #page-almanack > #al-chores { grid-column: span 5; }
  #page-almanack > #al-best { grid-column: span 7; }
  #page-almanack > #al-signs, #page-almanack > #al-sky, #page-almanack > #al-history, #page-almanack > #al-fish { grid-column: span 6; }
  #page-almanack > #al-crickets { grid-column: span 5; }
  #page-almanack > #ev-planters { grid-column: span 7; }
  #page-almanack > #al-year { grid-column: span 8; }
  #page-almanack > #al-journal { grid-column: span 4; }
  .pl-side { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1560px) {
  #page-almanack > #al-signs, #page-almanack > #al-sky, #page-almanack > #al-history, #page-almanack > #al-fish { grid-column: span 3; }
  .alm-fish li { grid-template-columns: 44px 60px minmax(0, 1fr); gap: 0.25rem; }
}
@media (min-width: 1200px) {
  #page-almanack > #ev-planters { grid-column: 1 / -1; }
  #page-almanack > #al-year { grid-column: span 8; grid-row: span 2; }
  #page-almanack > #al-journal, #page-almanack > #al-crickets { grid-column: span 4; }
  .pl-side { flex-direction: row; align-items: center; }
  #al-signs { display: flex; flex-direction: column; }
  #almSigns { flex: 1 1 auto; display: flex; flex-direction: column; }
  #almSigns .alm-list { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; }
  #almSigns .alm-list li { font-size: var(--fs-body); font-weight: 600; }
}

/* The Almanack packed tight: smaller cards, pictures and gaps, so more fits on a screen */
#page-almanack { gap: 0.625rem; }
#page-almanack > .card { padding: var(--sp-3) var(--sp-4); margin-bottom: 0.625rem; border-radius: 12px; }
#page-almanack .card-head { margin-bottom: var(--sp-2); padding-bottom: var(--sp-1); }
#page-almanack .card-head h2 { font-size: var(--fs-lead); }
#page-almanack .card-head > .muted { display: none; }
#page-almanack .subhead { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-text2); }
#page-almanack p.small.muted { margin: var(--sp-1) 0 0; }
#page-almanack details.fine { margin: var(--sp-1) 0 0; }
.alm-sec { margin: var(--sp-2) 0 0; padding-bottom: 2px; scroll-margin-top: 100px; }
.alm-sec strong { font-size: var(--fs-title); }
.alm-jump { padding: var(--sp-1) 0; margin-bottom: 0; }
.alm-date { padding-bottom: var(--sp-1); }
.alm-date strong { font-size: var(--fs-body); }
.alm-grid { gap: 0.5rem; margin-top: var(--sp-2); }
.alm-col, .alm-col:first-child { padding: var(--sp-3); }
.alm-col h3 { margin-bottom: var(--sp-1); }
.alm-col p { margin-bottom: 2px; font-size: var(--fs-note); }
.alm-col p.alm-big { font-size: var(--fs-text2); }
.alm-pic { max-height: 104px; margin-bottom: var(--sp-1); }
.alm-moonpic .moon-pic { width: 64px; height: 64px; }
.alm-week { margin: 2px 0 var(--sp-1); }
.alm-week .moon-pic { max-width: 20px; }
.alm-wheel { max-width: 112px; margin-bottom: 2px; }
.alm-quote { padding: var(--sp-2) 0 0; font-size: var(--fs-text2); }
.alm-quote span { display: inline; margin-left: 0.5rem; }
.alm-urgent li { padding: var(--sp-2); margin-bottom: var(--sp-1); }
.alm-urgent strong { font-size: var(--fs-small); }
.alm-list li { padding: 2px 0; border-bottom: 0; font-size: var(--fs-small); }
#page-almanack #almSigns .alm-list li { font-size: var(--fs-small); font-weight: 400; }
.alm-table > i { height: 22px; font-size: var(--fs-small); }
.alm-table { gap: 2px; margin-bottom: var(--sp-1); }
.alm-job { font-size: var(--fs-note); }
.alm-table .moon-pic { width: 18px; height: 18px; }
.alm-sky li { padding: 2px 0; border-bottom: 0; }
.alm-sky span { font-size: var(--fs-small); }
.alm-history li { padding: 2px 0; border-bottom: 0; font-size: var(--fs-note); }
.alm-history b { font-size: var(--fs-small); }
.alm-fish li { padding: 0; font-size: var(--fs-note); }
.alm-count { font-size: var(--fs-small); }
.alm-count input { padding: 2px var(--sp-2); }
#almCricket > p:first-child { margin: 0 0 var(--sp-2); font-size: var(--fs-small); line-height: 1.4; }
.alm-result { min-height: 0; margin: var(--sp-1) 0; font-size: var(--fs-text2); }
.alm-year th, .alm-year td { padding: 2px var(--sp-2); }
.pl-lead { margin: 0 0 var(--sp-2); font-size: var(--fs-small); }
.pl-grid { gap: 0.5rem; margin-bottom: 0; }
.pl-side { gap: 0.75rem; padding: var(--sp-2) var(--sp-3); }
.pl-side .moon-pic { flex-basis: 44px; width: 44px; height: 44px; }
.pl-side strong { font-size: var(--fs-text2); }
.pl-side small { display: inline; margin: 0 0 0 0.5rem; }
.pl-side p { margin: 0; font-size: var(--fs-note); }
.lore-how { margin-bottom: var(--sp-2); gap: 0 1.5rem; }
.lore-how ol { font-size: var(--fs-note); line-height: 1.35; }
.lore-how li { margin-bottom: 0; }
.lore-key { gap: 0.125rem 0.5rem; }
.lore-key p { font-size: var(--fs-note); }
.lore-grid, .sign-grid { gap: 0.5rem; margin-bottom: var(--sp-1); }
.lore { padding: var(--sp-2) var(--sp-3); }
.lore-say { font-size: var(--fs-small); }
.lore-of { margin: 0 0 var(--sp-1); }
.lore-q { margin-bottom: var(--sp-1); font-size: var(--fs-note); }
.lore-bar { grid-template-columns: 112px minmax(0, 1fr) 34px; margin-bottom: 0; }
.lore-bar i { height: 7px; }
.lore-note { margin-top: var(--sp-1); }
@media (min-width: 1200px) {
  #page-almanack > .card { margin-bottom: 0; }
  .lore-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) and (max-width: 1559px) { .lore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .alm-col, .alm-col:first-child { padding: var(--sp-3); } }
@media (min-width: 1200px) { #almSigns .alm-list { justify-content: flex-start; gap: var(--sp-2); } }
/* Signs, sky, history and fishing share one row on any wide screen */
@media (min-width: 1200px) {
  #page-almanack > #al-signs, #page-almanack > #al-sky, #page-almanack > #al-history, #page-almanack > #al-fish { grid-column: span 3; }
  .alm-fish li { grid-template-columns: 40px 56px minmax(0, 1fr); gap: 0.25rem; }
  #almFish p.small:not(.muted) { margin: var(--sp-1) 0 0; font-size: var(--fs-note); }
}

/* Lore on trial and Reading the sky, squeezed */
.lore-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 0.25rem 1.5rem; margin: 0 0 var(--sp-2); padding-left: 1.1rem; font-size: var(--fs-note); line-height: 1.35; color: var(--text-2); }
.lore-steps li { padding-left: 0.125rem; }
.lore { padding: var(--sp-2); }
.lore-head { gap: 0.5rem; }
.lore-say { font-size: var(--fs-small); line-height: 1.2; }
.lore-stamp { max-width: none; padding: 1px 5px; border-width: 1px; font-size: .62rem; white-space: nowrap; transform: none; }
.lore-of { margin-bottom: 2px; font-size: .68rem; }
.lore-q { margin-bottom: 2px; font-size: .68rem; }
.lore-bar { grid-template-columns: 96px minmax(0, 1fr) 30px; gap: 0.25rem; font-size: .68rem; line-height: 1.25; }
.lore-note { margin-top: 2px; font-size: .68rem; line-height: 1.25; }
.lore-keycard .lore-key { grid-template-columns: auto minmax(0, 1fr); gap: 1px 0.375rem; }
.lore-keycard .lore-key p { font-size: .62rem; line-height: 1.2; }
.lore-keycard .lore-key b { font-weight: 600; }
.sign-grid .lore-head { flex-direction: column; gap: 2px; }
@media (min-width: 1200px) {
  .lore-grid, #page-almanack .lore-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sign-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Fire: a flame for each day, what feeds it, and the dry spell behind it */
.fire-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 0.5rem; margin-bottom: var(--sp-2); }
.fire-day { display: flex; gap: 0.75rem; align-items: center; padding: var(--sp-3); border-radius: 12px; background: var(--card-2); }
.fire-flame { flex: 0 0 76px; width: 76px; height: 96px; overflow: visible; }
.fire-flame g { transform-origin: 40px 96px; transform-box: view-box; }
.ff-out { scale: var(--size); fill: #ef6c2c; animation: flameOut 1.6s ease-in-out infinite; }
.ff-in { scale: var(--size); fill: #ffd166; animation: flameOut 1.1s ease-in-out infinite reverse; }
.fire-day.l0 .ff-out { fill: #7c8aa0; }
.fire-day.l0 .ff-in { fill: #aab6c8; }
.fire-day.l1 .ff-out { fill: #e3a008; }
.fire-day.l3 .ff-out, .fire-day.l4 .ff-out { fill: #d9361f; }
@keyframes flameOut { 0%, 100% { transform: scaleY(1) skewX(0); } 35% { transform: scaleY(1.07) skewX(-2deg); } 70% { transform: scaleY(.95) skewX(2deg); } }
.fire-say { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.fire-say > span { font-size: var(--fs-small); color: var(--muted); }
.fire-say > strong { font-size: var(--fs-title); line-height: 1.1; }
.fire-say small { font-size: var(--fs-note); }
.fire-g { display: grid; grid-template-columns: auto 1fr; gap: 0 0.5rem; font-size: var(--fs-note); }
.fire-g span { color: var(--muted); }
.fire-g b { text-align: right; font-weight: 600; white-space: nowrap; }
.fire-g i { grid-column: 1 / -1; position: relative; display: block; height: 6px; margin-top: 2px; border-radius: 3px; background: var(--line); }
.fire-g u { display: block; height: 100%; border-radius: 3px; background: #7fb0e6; }
.fire-g u.hot { background: #ef8f1c; }
.fire-g s { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); }
.fire-rain { display: flex; align-items: flex-end; gap: 3px; height: 52px; padding-bottom: 1px; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-1); }
.fire-rain i { flex: 1 1 0; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--line); }
.fire-rain i.wet { background: var(--cool); }
.fire-drought { display: flex; height: 24px; border-radius: 5px; overflow: hidden; margin-bottom: var(--sp-1); }
.fire-drought i { display: flex; align-items: center; justify-content: center; font-size: var(--fs-note); font-style: normal; font-weight: 700; color: #1a1205; white-space: nowrap; overflow: hidden; }
/* Heat: the week on one thermometer */
.heat-week { display: block; width: 100%; height: auto; margin-bottom: var(--sp-1); }
#heatMore { margin-top: var(--sp-2); }
@media (prefers-reduced-motion: reduce) { .ff-out, .ff-in { animation: none; } }
@media (min-width: 1200px) {
  #hz-fire { column-span: all; }
  .fire-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.5rem; }
  .fire-split .subhead { margin-top: 0; }
}
#hz-fire .env-map { height: 230px; }
.fire-rain { height: 72px; }

/* The fire map: real land, glowing heat, and live fires */
.fire-photo { filter: brightness(.82) saturate(1.25); }
#hz-fire .env-map { height: 300px; }
.fm-hot i { display: block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff3b0 0 18%, #ffae2b 32%, rgba(255, 110, 20, .65) 55%, rgba(255, 80, 0, 0) 72%); animation: fmGlow 2.4s ease-in-out infinite; }
.fm-fire { position: relative; display: flex; align-items: center; justify-content: center; }
.fm-fire span { position: relative; line-height: 1; filter: drop-shadow(0 0 5px #ff7a1a); }
.fm-fire b { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ff5a2c; background: rgba(255, 90, 40, .22); animation: fmPulse 2.2s ease-out infinite; }
@keyframes fmPulse { from { transform: scale(.6); opacity: .95; } to { transform: scale(1.5); opacity: 0; } }
@keyframes fmGlow { 50% { transform: scale(1.3); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .fm-hot i, .fm-fire b { animation: none; } }
@media (min-width: 1200px) { #hz-fire .fire-rain { height: 150px; } }

/* Earthquakes: a seismograph across the top, and ripples on real land */
.q-drum { margin: var(--sp-3) 0; }
#quakeDrum { display: block; width: 100%; height: 118px; border-radius: 8px; background: linear-gradient(180deg, #0a1428, #101d36); border: 1px solid var(--line); cursor: pointer; touch-action: pan-y; }
#quakeDrumSay { min-height: 1.3em; margin: var(--sp-1) 0 0; font-size: var(--fs-note); color: var(--text-2); }
.q-ripple { position: relative; pointer-events: none; }
.q-ripple i { position: absolute; inset: 0; border: 2px solid #ffb35c; border-radius: 50%; animation: quakeRing 3s ease-out infinite; }
.q-ripple i + i { animation-delay: 1.5s; }
@keyframes quakeRing { from { transform: scale(.15); opacity: .95; } to { transform: scale(1); opacity: 0; } }
#quakeSummary .glance-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (prefers-reduced-motion: reduce) { .q-ripple i { animation: none; opacity: .5; } }
@media (min-width: 1200px) {
  #q-map { column-span: all; }
  .q-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 1.25rem; }
  #quakeMap { height: 340px; }
}
@media (max-width: 640px) { #quakeDrum { height: 96px; } }

/* The quake map: dark relief, so bright quakes stand out */
#quakeMap { background: #0b1830; }
.q-relief { filter: sepia(1) hue-rotate(178deg) saturate(1.5) brightness(1.15); }
.q-dot { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)); }
.leaflet-tooltip.q-num { padding: 0; border: 0; background: none; box-shadow: none; color: #101a2c; font-size: 10px; font-weight: 800; }
.leaflet-tooltip.q-num::before { display: none; }
.key i.q-mag-k { width: 10px; height: 10px; border-radius: 50%; }
.key i.q-fault-k { height: 0; background: none; border-top: 2px dashed #e6f1ff; }
.q-ripple i { border-color: #ffd166; }
.q-relief { filter: sepia(1) hue-rotate(180deg) saturate(1.7) brightness(.5) contrast(1.5); }
.leaflet-tooltip.q-num { color: #101a2c; }

/* Recent quakes, packed; and the magnitude staircase */
.quake-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.quake-list li { padding: var(--sp-2) 0; gap: 0.5rem; }
.quake-list .mag-badge { flex-basis: 36px; height: 36px; border-width: 2px; font-size: var(--fs-small); }
.quake-list .q-place { font-size: var(--fs-small); line-height: 1.2; }
.quake-list .q-text .small { font-size: var(--fs-note); }
.q-arrow { display: inline-block; font-style: normal; font-weight: 700; color: var(--text); }
#quakeLearn .ing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stairs { display: flex; align-items: flex-end; gap: 4px; height: 170px; margin-top: var(--sp-2); }
.stair { position: relative; flex: 1 1 0; min-width: 0; height: var(--h); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: var(--sp-1) 0; border: 0; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--c) 28%, var(--card-2)); color: var(--text); font: inherit; cursor: pointer; }
.stair span { font-size: 1.1rem; line-height: 1; }
.stair b { font-size: var(--fs-small); }
.stair em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; font-size: .62rem; font-style: normal; font-weight: 700; white-space: nowrap; color: var(--c); }
.stair.on { background: var(--c); color: #101a2c; }
.stair:hover, .stair:focus-visible { animation: stairShake .32s linear infinite; outline: none; }
@keyframes stairShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(var(--shake)); } 75% { transform: translateX(calc(var(--shake) * -1)); } }
.stair-say { padding: var(--sp-3); margin-top: 0; border-radius: 0 0 8px 8px; background: var(--card-2); font-size: var(--fs-small); }
.stair-say > strong { display: block; font-size: var(--fs-text2); margin-bottom: var(--sp-2); }
.stair-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: var(--sp-1); }
.stair-facts span { display: flex; flex-direction: column; font-size: var(--fs-note); color: var(--muted); }
.stair-facts b { font-size: var(--fs-small); color: var(--text); }
.stair-say small { display: block; font-size: var(--fs-note); color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .stair:hover, .stair:focus-visible { animation: none; } }
@media (max-width: 640px) { .quake-list { grid-template-columns: minmax(0, 1fr); } .stair span { font-size: .9rem; } .stair b { font-size: var(--fs-note); } }

/* The flood map: dark ground, vivid water, live gauges */
#floodZoneMap { background: #0b1830; }
#floodZoneMap .leaflet-tile-pane .leaflet-layer:first-child img { filter: sepia(1) hue-rotate(180deg) saturate(1.6) brightness(.55) contrast(1.3); }
.fz-zones { filter: saturate(3) brightness(1.15) contrast(1.1); animation: fzShimmer 4s ease-in-out infinite; }
@keyframes fzShimmer { 50% { opacity: .78; } }
.fz-gauge i { display: block; width: 12px; height: 12px; margin: 2px; border-radius: 50%; background: #5cc8ff; border: 2px solid #fff; box-shadow: 0 0 0 0 rgba(92, 200, 255, .7); animation: fzPing 2.6s ease-out infinite; }
.fz-gauge.up i { background: #ffb347; }
.fz-gauge.fast i { background: #ff4d4d; }
@keyframes fzPing { to { box-shadow: 0 0 0 12px rgba(92, 200, 255, 0); } }
.key i.fz-gauge-k { width: 10px; height: 10px; border-radius: 50%; background: #5cc8ff; border: 1px solid #fff; }
.leaflet-tooltip.fz-tip { padding: 1px 5px; border: 0; background: #ffd166; color: #101a2c; font-weight: 700; box-shadow: none; }
.leaflet-tooltip.fz-tip::before { display: none; }
.fz-reach { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.125rem 0.5rem; margin: var(--sp-1) 0 var(--sp-2); }
.fz-reach b { font-size: var(--fs-huge); line-height: 1.1; color: #ffd166; }
.fz-reach span { font-size: var(--fs-small); color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .fz-zones, .fz-gauge i { animation: none; } }

/* The flood words, explained */
.fz-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0.5rem; margin-bottom: var(--sp-2); }
.fz-term { display: flex; flex-direction: column; gap: 0.125rem; padding: var(--sp-2) var(--sp-3); border-radius: 8px; background: var(--card-2); }
.fz-term strong { font-size: var(--fs-small); }
.fz-term span { font-size: var(--fs-note); line-height: 1.4; color: var(--text-2); }
@media (min-width: 1200px) {
  #fl-terms { column-span: all; }
  .fz-terms { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
  .fz-term.wide { grid-column: span 2; }
}

/* Flood outlook: each day's rain and risk, and the rain hour by hour */
.fl-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: var(--sp-2) 0; }
.fl-day { display: flex; flex-direction: column; align-items: flex-start; gap: 0.125rem; padding: var(--sp-3); border-radius: 10px; background: var(--card-2); min-width: 0; }
.fl-day > span { font-size: var(--fs-small); color: var(--muted); }
.fl-day > b { font-size: var(--fs-title); line-height: 1.1; }
.fl-day small { font-size: var(--fs-note); color: var(--text-2); line-height: 1.3; }
.fl-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; width: 100%; margin: var(--sp-1) 0; }
.fl-steps i { height: 7px; border-radius: 2px; background: var(--line); }
.fl-steps i.on.s0 { background: #5fd38d; }
.fl-steps i.on.s1 { background: #7fb6e8; }
.fl-steps i.on.s2 { background: #ffd166; }
.fl-steps i.on.s3 { background: #ff9a3c; }
.fl-steps i.on.s4 { background: #ff4d4d; }
.fl-rain { display: block; width: 100%; height: auto; margin-bottom: var(--sp-1); }

/* The ground around you */
.land-top { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--sp-2); }
.land-rank { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.land-rank b { font-size: var(--fs-huge); line-height: 1.1; color: #c9a56a; }
.land-rank span { font-size: var(--fs-small); font-weight: 600; }
.land-rank small { font-size: var(--fs-note); color: var(--text-2); }
.land-compass { flex: 0 0 104px; width: 104px; height: 104px; }
.land-cut { display: block; width: 100%; height: auto; margin-bottom: var(--sp-1); border-radius: 8px; background: linear-gradient(180deg, #16294d, #1c3a68); }
.drop-well { height: 84px; }
.trace-story { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-text2); line-height: 1.45; }

/* The gauges: what each reading means, and a little life */
.gauge-means { margin-top: var(--sp-1); padding: 2px var(--sp-2); border-radius: 6px; background: var(--card-2); font-size: var(--fs-small); font-weight: 600; line-height: 1.3; color: var(--text); }
.dial-needle { transform-origin: 60px 58px; animation: needleIn 1.1s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes needleIn { from { transform: rotate(-70deg); } }
.wind-sway { transform-origin: 60px 60px; animation: windSway 3.2s ease-in-out infinite; }
@keyframes windSway { 25% { transform: rotate(5deg); } 75% { transform: rotate(-5deg); } }
.drop-bob { animation: dropBob 3s ease-in-out infinite; }
@keyframes dropBob { 50% { transform: translateY(-2px); } }
.sun-glow { filter: drop-shadow(0 0 4px #fab219); }
@media (prefers-reduced-motion: reduce) { .dial-needle, .wind-sway, .drop-bob { animation: none; } }

/* The sky dome */
.dome-wrap { margin-bottom: var(--sp-3); }
#skyDome { display: block; margin: 0 auto; cursor: pointer; touch-action: pan-y; }
.dome-time { display: flex; align-items: center; gap: 0.75rem; margin-top: var(--sp-2); }
.dome-time input { flex: 1 1 auto; min-width: 0; accent-color: #ffd166; }
.dome-time b { flex: 0 0 auto; font-size: var(--fs-text2); }
.dome-say { min-height: 2.8em; margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-text2); }
@media (min-width: 1200px) {
  #sp-stars { column-span: all; }
  #stars { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .dome-list .star-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.25rem; margin: 0; }
}

/* Tonight's hours, the tour, and the city switch */
.dome-bars { display: flex; align-items: flex-end; gap: 2px; height: 58px; margin-top: var(--sp-2); }
.dome-bars button { position: relative; flex: 1 1 0; min-width: 0; height: 100%; padding: 0 0 14px; display: flex; align-items: flex-end; background: none; border: 0; cursor: pointer; }
.dome-bars i { display: block; width: 100%; border-radius: 2px 2px 0 0; }
.dome-bars span { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: .62rem; color: var(--muted); white-space: nowrap; }
.dome-bars button.best i { outline: 2px solid #ffd166; outline-offset: 1px; }
.dome-best { margin: var(--sp-1) 0 0; font-size: var(--fs-small); }
.dome-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: var(--sp-2); }
.dome-tour { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.dome-tour .small-btn { font-size: var(--fs-note); padding: 2px var(--sp-2); }

/* Sun to sky: the trip as a moving picture, and how far south the aurora reaches */
.sun-trip { margin: var(--sp-2) 0; }
#sunTrip { display: block; width: 100%; height: 170px; border-radius: 10px; background: #050a18; }
.sun-chain li { padding: var(--sp-3); }
.sun-chain .sc-text { font-size: var(--fs-note); line-height: 1.35; color: var(--text-2); }
.au-ruler { position: relative; height: 66px; margin: var(--sp-1) 0 var(--sp-2); border-radius: 8px; background: linear-gradient(90deg, #0a1428, #162540); overflow: hidden; }
.au-glow { position: absolute; left: 0; top: 0; height: 26px; width: var(--reach); background: linear-gradient(90deg, rgba(95,227,155,.25), #5fe39b 85%, rgba(160,110,255,.7)); border-radius: 0 12px 12px 0; transition: width .35s ease; }
.au-spot { position: absolute; bottom: 4px; transform: translateX(-50%); font-size: var(--fs-note); color: var(--text-2); white-space: nowrap; }
.au-spot u { display: block; width: 1px; height: 26px; margin: 0 auto 2px; background: var(--muted); text-decoration: none; }
.au-you { color: #ffd166; font-weight: 700; }
.au-you u { background: #ffd166; width: 2px; }
.au-pick { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-text2); }
.au-pick input { flex: 1 1 auto; min-width: 0; accent-color: #5fe39b; }
.au-say { min-height: 3em; margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-text2); }
.aurora-map img { max-height: 300px; width: auto; max-width: 100%; display: block; margin: 0 auto; }
.sun-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem 1.5rem; }
@media (min-width: 1200px) {
  #sp-chain { column-span: all; }
  .sun-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sun-pair .subhead { margin-top: var(--sp-2); }
}
@media (max-width: 640px) { #sunTrip { height: 130px; } .au-spot { font-size: .58rem; } }
@media (max-width: 640px) { .au-spot:nth-of-type(4) { display: none; } }

/* NOAA's week of messages */
.msg-time { margin: var(--sp-2) 0; }
.msg-lane { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0.5rem; align-items: center; height: 30px; }
.msg-lane > span { font-size: var(--fs-note); color: var(--text-2); }
.msg-lane small { margin-left: 0.25rem; color: var(--muted); }
.msg-track { position: relative; height: 100%; border-bottom: 1px solid var(--line); }
.msg-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.msg-track button { position: absolute; top: 50%; width: var(--s); height: var(--s); padding: 0; border: 0; border-radius: 50%; background: var(--c); transform: translate(-50%, -50%); cursor: pointer; }
.msg-track button.on { outline: 2px solid #fff; outline-offset: 2px; opacity: 1 !important; }
.msg-days { position: relative; height: 16px; margin-left: calc(112px + 0.5rem); }
.msg-days span { position: absolute; transform: translateX(-50%); font-size: var(--fs-note); color: var(--muted); }
.msg-card { padding: var(--sp-3); border-radius: 10px; background: var(--card-2); font-size: var(--fs-small); }
.msg-card > strong { display: block; font-size: var(--fs-text2); }
.msg-card > small { display: block; font-size: var(--fs-note); color: var(--muted); }
.msg-card p { margin: var(--sp-1) 0; }
.msg-touch { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: var(--sp-1) 0; }
.msg-touch span { padding: 1px 7px; border-radius: 3px; background: var(--accent-soft); font-size: var(--fs-note); font-weight: 600; }
.msg-card ul { margin: 0; padding-left: 1rem; font-size: var(--fs-note); color: var(--text-2); }
@media (max-width: 640px) { .msg-lane { grid-template-columns: 76px minmax(0, 1fr); } .msg-days { margin-left: calc(76px + 0.5rem); } }

/* Reading the flare card */
.fg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.fg-tile { display: flex; flex-direction: column; gap: 0.125rem; padding: var(--sp-2) var(--sp-3); border-radius: 8px; background: var(--card-2); }
.fg-tile strong { font-size: var(--fs-small); }
.fg-tile span { font-size: var(--fs-note); line-height: 1.4; color: var(--text-2); }
.fg-sizes { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-2); }
.fg-size { display: grid; grid-template-columns: 26px 56px minmax(0, 1fr); gap: 0.5rem; align-items: center; font-size: var(--fs-note); color: var(--text-2); }
.fg-size b { display: flex; align-items: center; justify-content: center; height: 22px; border-radius: 4px; color: var(--text); }
.fg-size strong { color: var(--text); }
.fg-note { margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: 8px; background: var(--accent-soft); font-size: var(--fs-small); line-height: 1.4; }
@media (max-width: 640px) { .fg-grid { grid-template-columns: minmax(0, 1fr); } }

/* Space weather right now */
.sn-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; margin-bottom: var(--sp-2); }
.sn-dial { display: flex; flex-direction: column; align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--card-2); text-align: center; }
.sn-dial .dial { width: 100%; max-width: 230px; }
.sn-big { font-size: var(--fs-big); font-weight: 700; line-height: 1.1; }
.sn-word { font-size: var(--fs-small); color: var(--text-2); }
.sn-next { margin-top: var(--sp-1); font-size: var(--fs-note); color: var(--muted); }
.sn-scales { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: 12px; background: var(--card-2); }
.sn-title { font-size: var(--fs-text2); font-weight: 700; }
.sn-title span { display: block; font-size: var(--fs-note); font-weight: 400; color: var(--muted); }
.sn-scale > div:first-child { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 0.25rem; align-items: baseline; }
.sn-scale b { grid-row: span 2; font-size: var(--fs-lead); }
.sn-scale strong { font-size: var(--fs-small); }
.sn-scale small { font-size: var(--fs-note); color: var(--muted); }
.sn-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 2px; }
.sn-steps i { height: 6px; border-radius: 2px; background: var(--line); }
.sn-steps i.on { background: #ffd166; }
.sn-steps i.on.l3 { background: #ff9a3c; }
.sn-steps i.on.l4, .sn-steps i.on.l5 { background: #ff4d4d; }
.sn-foot { font-size: var(--fs-note); color: var(--muted); }
@media (max-width: 640px) { .sn-panel { grid-template-columns: minmax(0, 1fr); } }

/* Tonight and the planets on one clock */
.night-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: var(--sp-2); }
.night-moon { display: flex; align-items: center; gap: 0.5rem; }
.night-moon .moon-pic { width: 58px; height: 58px; margin: 0; }
.night-moon div { display: flex; flex-direction: column; }
.night-moon strong { font-size: var(--fs-text2); }
.night-moon span { font-size: var(--fs-small); color: var(--muted); }
.night-facts { flex: 1 1 320px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.night-facts div { display: flex; flex-direction: column; min-width: 0; }
.night-facts span { font-size: var(--fs-note); color: var(--muted); }
.night-facts b { font-size: var(--fs-text2); white-space: nowrap; }
.night-facts small { font-size: var(--fs-note); color: var(--text-2); }
.night-lanes { margin-bottom: var(--sp-2); }
.nl-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0.5rem; align-items: center; margin-bottom: 2px; }
.nl-row > span { font-size: var(--fs-note); color: var(--text-2); }
.nl-track { position: relative; display: flex; height: 16px; border-radius: 3px; overflow: hidden; background: #0a1430; }
.nl-track i { flex: 1 1 0; }
.nl-track u { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffd166; }
.nl-hours > div { position: relative; height: 14px; }
.nl-hours b { position: absolute; transform: translateX(-50%); font-size: var(--fs-note); font-weight: 400; color: var(--muted); }
#stargaze .sw-stats { gap: 0.5rem; }
#stargaze .sw-stats > div { padding: var(--sp-2) var(--sp-3); }
#sp-planets .planet-list li { padding: var(--sp-2) 0; }
@media (max-width: 640px) { .night-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; } }

/* Sky events as a calendar, and the Space Station's path */
.sky-next { display: flex; align-items: center; gap: 0.75rem; padding: var(--sp-3); margin-bottom: var(--sp-2); border-radius: 10px; background: linear-gradient(100deg, #1c3560, var(--card-2)); }
.sky-next-ic { font-size: 1.8rem; line-height: 1; }
.sky-next > div:nth-child(2) { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sky-next small { font-size: var(--fs-note); color: var(--muted); }
.sky-next strong { font-size: var(--fs-text2); }
.sky-next div > span { font-size: var(--fs-note); color: var(--text-2); }
.sky-count { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.sky-count b { font-size: var(--fs-big); line-height: 1; color: #ffd166; }
.sky-count span { font-size: var(--fs-note); color: var(--muted); white-space: nowrap; }
.sky-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.sky-cal > b { text-align: center; font-size: var(--fs-note); font-weight: 400; color: var(--muted); }
.sky-cal button { position: relative; display: flex; flex-direction: column; align-items: center; padding: 2px 0 3px; min-height: 42px; border: 1px solid transparent; border-radius: 5px; background: var(--card-2); color: var(--text-2); font: inherit; cursor: pointer; }
.sky-cal small { font-size: .62rem; align-self: flex-start; margin-left: 3px; line-height: 1; }
.sky-cal .moon-pic { width: 20px; height: 20px; margin: 0; }
.sky-cal em { position: absolute; top: 0; right: 2px; font-size: .7rem; font-style: normal; }
.sky-cal .past { opacity: .35; }
.sky-cal .has { background: #1c3560; }
.sky-cal .special { background: color-mix(in srgb, #ffd166 22%, var(--card-2)); border-color: #ffd166; }
.sky-cal .today { border-color: var(--text); }
.sky-cal .on { outline: 2px solid var(--accent); }
.sky-day { min-height: 3.6em; margin: var(--sp-2) 0; font-size: var(--fs-small); }
.sky-day p { margin: 2px 0 0; color: var(--text-2); }
.iss-hero { display: flex; gap: 1rem; align-items: center; margin-bottom: var(--sp-2); }
.iss-sky { flex: 0 0 170px; width: 170px; height: 170px; }
.iss-trail { stroke-dasharray: 600; animation: issDraw 3s ease-out; }
@keyframes issDraw { from { stroke-dashoffset: 600; } }
.iss-say { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; min-width: 0; }
.iss-say small { font-size: var(--fs-note); color: var(--muted); }
.iss-say strong { font-size: var(--fs-lead); }
.iss-say span { font-size: var(--fs-small); color: var(--text-2); }
.iss-say .iss-cloudy { color: var(--t-serious); font-weight: 600; }
.iss-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 0.75rem; margin-bottom: var(--sp-2); }
.iss-pick { display: grid; grid-template-columns: 52px 62px minmax(0, 1fr) 26px; gap: 0.25rem; align-items: center; padding: 2px var(--sp-1); border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit; font-size: var(--fs-note); text-align: left; cursor: pointer; }
.iss-pick:hover, .iss-pick.on { background: var(--card-2); }
.iss-pick i { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.iss-pick u { display: block; height: 100%; background: #ffd166; }
.iss-pick small { text-align: right; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .iss-trail { animation: none; } }
@media (max-width: 640px) { .iss-hero { flex-direction: column; align-items: flex-start; } .iss-list { grid-template-columns: minmax(0, 1fr); } .sky-cal .moon-pic { width: 16px; height: 16px; } }

/* The star list: one line each, with the story in one place */
.star-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.star-row { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: var(--sp-1) var(--sp-2); border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.star-row:hover, .star-row.on { background: var(--card-2); }
.star-row i { width: 9px; height: 9px; border-radius: 50%; }
.star-row b { font-size: var(--fs-small); }
.star-row span { font-size: var(--fs-note); color: var(--muted); white-space: nowrap; }
.star-fact { min-height: 92px; margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 10px; background: var(--card-2); font-size: var(--fs-small); }
.star-fact strong { display: block; font-size: var(--fs-text2); }
.star-fact small { display: block; font-size: var(--fs-note); color: var(--muted); }
.star-fact p { margin: var(--sp-1) 0 0; }
.dome-list .subhead:first-child { margin-top: 0; }
@media (max-width: 640px) { .star-rows { grid-template-columns: minmax(0, 1fr); } }

/* The Night sky page opens on a night sky */
.night-scene { position: relative; height: 170px; margin-bottom: var(--sp-2); border-radius: 12px; overflow: hidden; }
.night-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gl-star { animation: glTwinkle 4s ease-in-out infinite; }
@keyframes glTwinkle { 50% { opacity: .3; } }
.gl-cloud { animation: glDrift 60s linear infinite alternate; }
@keyframes glDrift { to { transform: translateX(90px); } }
.gl-shoot { opacity: 0; animation: glShoot 11s ease-in infinite; }
@keyframes glShoot { 0%, 88% { opacity: 0; transform: translate(1100px, 10px); } 90% { opacity: 1; transform: translate(1040px, 32px); } 96%, 100% { opacity: 0; transform: translate(820px, 118px); } }
.ns-moon { position: absolute; right: 7%; top: 16px; filter: drop-shadow(0 0 18px rgba(255, 244, 214, .75)); }
.ns-moon .moon-pic { width: 92px; height: 92px; margin: 0; }
.ns-say { position: absolute; left: 22px; top: 26px; right: 170px; display: flex; flex-direction: column; gap: 0.25rem; text-shadow: 0 1px 8px rgba(5, 8, 30, .8); }
.ns-say strong { font-size: var(--fs-huge); line-height: 1.15; color: #fff; }
.ns-say span { font-size: var(--fs-text2); color: #e4dcff; }
@media (prefers-reduced-motion: reduce) { .gl-star, .gl-cloud, .gl-shoot { animation: none; } }
@media (max-width: 640px) { .night-scene { height: 150px; } .ns-say { left: 14px; top: 12px; right: 92px; } .ns-say strong { font-size: var(--fs-lead); } .ns-say span { font-size: var(--fs-small); } .ns-moon { right: 10px; top: 10px; } .ns-moon .moon-pic { width: 64px; height: 64px; } }

/* The Flooding page opens on moving water */
.water-scene { background: linear-gradient(90deg, rgba(6, 18, 36, .72), rgba(6, 18, 36, .28) 60%, rgba(6, 18, 36, .1)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Oklahoma_River_Skyline.jpg?width=1800") center 100% / cover no-repeat, #16507f; }
.ws-credit { position: absolute; right: 8px; bottom: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(6, 18, 36, .6); color: #fff; font-size: var(--fs-note); opacity: .8; text-decoration: none; text-shadow: 0 1px 3px #000; }
.water-scene { position: relative; height: 170px; margin-bottom: 1rem; border-radius: 12px; overflow: hidden; column-span: all; }
.water-scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.water-scene .ns-say { top: 18px; right: 22px; }
.water-scene .ns-say span { color: #eafcff; }
.ws-rain { stroke: #dff6ff; stroke-opacity: .6; stroke-width: 1.5; animation: wsRain 1.4s linear infinite; }
@keyframes wsRain { to { transform: translate(-30px, 170px); } }
@media (prefers-reduced-motion: reduce) { .ws-rain { animation: none; transform: translateY(70px); } }
@media (max-width: 640px) { .water-scene { height: 140px; } .water-scene .ns-say { right: 14px; } }
.water-scene.alarm { outline: 3px solid var(--extreme); }
.water-scene.alarm { background-blend-mode: normal, luminosity; }

/* A severe risk day: a storm on the horizon behind the words, with the numbers on clean panels */
.hz-risk { position: relative; overflow: hidden; background: #131a4a; border: 1px solid color-mix(in srgb, var(--answer) 70%, transparent); border-left-width: 1px; }
.hz-risk > * { position: relative; z-index: 1; }
.hz-risk > .hz-scene { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hz-bolt { opacity: 0; animation: hzFlash 7s linear infinite; }
@keyframes hzFlash { 0%, 90%, 100% { opacity: 0; } 91%, 93% { opacity: 1; } 92% { opacity: .2; } }
.hz-risk .hz-a-when { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--answer); color: #15122e; font-size: var(--fs-small); }
.hz-risk .hz-a-title { color: #fff; text-shadow: 0 2px 10px rgba(5, 8, 30, .7); }
.hz-risk .hz-gauge, .hz-risk .hz-a-do { padding: var(--sp-2) var(--sp-3); border: 0; border-radius: 10px; background: rgba(8, 11, 36, .62); color: #fff; }
.hz-risk .hz-a-do span { color: #cdc8ec; }
.hz-risk .hz-meter span, .hz-risk .hz-odds { color: #cdc8ec; }
.hz-risk .hz-odds b { color: #fff; }
.hz-risk .hz-meter i { background: rgba(255, 255, 255, .18); }
.hz-risk .hz-meter i.on { background: var(--answer); }
.hz-risk .hz-a-more { color: #fff; }
@media (prefers-reduced-motion: reduce) { .hz-bolt { animation: none; opacity: .75; } }

/* Phones: the words size themselves, so the risk panels stay inside the banner */
@media (max-width: 1100px) { .hz-risk .hz-a-main { flex-basis: auto; } .hz-risk { flex-wrap: wrap; } }
@media (max-width: 760px) { .hz-risk { flex-wrap: nowrap; } .hz-risk .hz-gauge, .hz-risk .hz-a-do { width: 100%; box-sizing: border-box; } .hz-risk .hz-a-do { padding: var(--sp-2) var(--sp-3); } }

/* The severe risk banner, plain: the app's own dark card, a solid stripe in the risk color, and the numbers set out flat */
.hz-risk { background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--answer); border-left-width: 1px; }
.hz-risk .hz-a-when { display: block; padding: 0; background: none; color: var(--answer); font-size: var(--fs-text2); }
.hz-risk .hz-a-title { color: var(--text); text-shadow: none; }
.hz-risk .hz-gauge, .hz-risk .hz-a-do { padding: 0; border-radius: 0; background: none; color: var(--text); }
.hz-risk .hz-a-do { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.hz-risk .hz-a-do span, .hz-risk .hz-meter span, .hz-risk .hz-odds { color: var(--muted); }
.hz-risk .hz-odds b { color: var(--text); }
.hz-risk .hz-meter i { background: var(--line); }
.hz-risk .hz-a-more { color: var(--link); }
@media (max-width: 760px) { .hz-risk .hz-a-do { padding: var(--sp-3) 0 0; border-left: 0; border-top: 1px solid var(--line); } }

/* The severe risk banner on grey cloud: white words, and the risk color kept to the stripe, the time and the meter */
.hz-risk { background: #3f4652; }
.hz-risk .hz-a-title { color: #fff; text-shadow: 0 1px 6px rgba(10, 14, 22, .65); }
.hz-risk .hz-a-when { text-shadow: 0 1px 4px rgba(10, 14, 22, .7); }
.hz-risk .hz-gauge, .hz-risk .hz-a-do { color: #fff; text-shadow: 0 1px 4px rgba(10, 14, 22, .7); }
.hz-risk .hz-a-do { border-color: rgba(255, 255, 255, .28); }
.hz-risk .hz-a-do span, .hz-risk .hz-meter span, .hz-risk .hz-odds { color: #dfe4ec; }
.hz-risk .hz-odds b { color: #fff; }
.hz-risk .hz-meter i { background: rgba(255, 255, 255, .28); }
.hz-risk .hz-a-more { color: #fff; }

/* Air quality right now, over a photo of open sky (public domain, CC0) */
#airNow { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(8, 15, 32, .82), rgba(8, 15, 32, .62) 55%, rgba(8, 15, 32, .78)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Sky_Clouds_and_Atmosphere.jpg?width=1600") center 40% / cover no-repeat, var(--card); }
#airNow h2, #airNow .air-word { text-shadow: 0 1px 8px rgba(5, 10, 24, .75); }
#airNow .air-say p, #airNow .air-measured small { color: #eef3fb; text-shadow: 0 1px 5px rgba(5, 10, 24, .8); }
#airNow .muted, #airNow .air-measured > span { color: #cdd8e8; }
#airNow .aqi-scale { color: #eef3fb; text-shadow: 0 1px 4px rgba(5, 10, 24, .85); }
.air-credit { margin: var(--sp-1) 0 0; text-align: right; font-size: .62rem; color: #cdd8e8; }
.air-credit a { color: inherit; }

/* The Winter page */
.winter-scene { position: relative; height: 170px; margin-bottom: 1rem; border-radius: 12px; overflow: hidden; column-span: all; background: linear-gradient(90deg, rgba(8, 18, 34, .78), rgba(8, 18, 34, .34) 62%, rgba(8, 18, 34, .12)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Oklahoma_Ice_Storm_-_panoramio.jpg?width=1800") center 32% / cover no-repeat, #33445a; }
.winter-scene .ns-say { top: 22px; right: 22px; }
.winter-scene .ns-say span { color: #eef4fb; }
.winter-scene.alarm { outline: 3px solid var(--extreme); }
#page-winter #hz-winter, #page-winter #wn-years { column-span: all; }
.wn-lead { margin: 0 0 var(--sp-3); font-size: var(--fs-text2); }
.wn-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); }
.wn-day { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border-radius: 10px; border-top: 3px solid var(--wn); background: var(--card-2); --wn: var(--muted); }
.wn-day span { font-size: var(--fs-small); color: var(--text-2); }
.wn-day b { font-size: var(--fs-huge); line-height: 1.1; }
.wn-day small { font-size: var(--fs-note); color: var(--muted); }
.wn-day em { margin-top: 2px; font-style: normal; font-size: var(--fs-small); font-weight: 600; color: var(--wn); }
.wn-cool { --wn: #8fd0ff; } .wn-cold { --wn: #5aa9ff; } .wn-bad { --wn: var(--extreme); }
.wn-todo { margin: var(--sp-3) 0 0; padding: 0; list-style: none; font-size: var(--fs-text2); display: grid; gap: 4px; }
.wn-todo span { color: var(--text-2); }
.wn-hours { display: block; width: 100%; height: auto; }
.wn-hours text { font-size: 13px; fill: var(--muted); }
.wn-line { fill: none; stroke: var(--text); stroke-width: 2; }
.wn-under { fill: #5aa9ff; fill-opacity: .55; }
.wn-r32 { stroke: #8fd0ff; stroke-dasharray: 5 4; } .wn-r28 { stroke: #5aa9ff; stroke-dasharray: 2 4; }
.wn-ruler { position: relative; padding: 26px 0 24px; }
.wn-bands { display: flex; height: 24px; border-radius: 6px; overflow: hidden; }
.wn-bands div { display: flex; align-items: center; justify-content: center; min-width: 0; font-size: var(--fs-note); color: #fff; white-space: nowrap; overflow: hidden; }
.wn-f0 { background: #33597e; } .wn-f1 { background: #7a5ba8; } .wn-f2 { background: #b4478a; } .wn-f3 { background: #c8324f; }
.wn-mark { position: absolute; top: 26px; width: 2px; height: 24px; background: #fff; font-style: normal; }
.wn-mark b { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); font-size: var(--fs-small); white-space: nowrap; }
.wn-mark.up b { top: -22px; }
.wn-ends { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-note); color: var(--muted); }
.wn-stick { display: flex; gap: var(--sp-4); align-items: center; }
.wn-ground { flex: none; text-align: center; }
.wn-ground b { display: block; font-size: var(--fs-huge); line-height: 1.1; }
.wn-ground small { font-size: var(--fs-note); color: var(--muted); }
.wn-stick ol { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.wn-stick li { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--sp-2); padding: 4px var(--sp-2); border-radius: 6px; font-size: var(--fs-small); color: var(--muted); }
.wn-stick li.on { background: var(--card-2); color: var(--text); }
.wn-ice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.wn-ice > div { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-small); }
.wn-ice svg { width: 64px; height: 64px; }
.wn-ice span { color: var(--text-2); }
.wn-glaze { fill: #bfe4ff; fill-opacity: .65; stroke: #e6f5ff; } .wn-wire { fill: #10161f; }
.wn-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.wn-steps > div { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border-radius: 10px; background: var(--card-2); font-size: var(--fs-small); color: var(--muted); }
.wn-steps b { font-size: var(--fs-lead); color: var(--text-2); }
.wn-steps strong { color: var(--text-2); }
.wn-steps em { display: block; font-style: normal; font-size: var(--fs-note); color: #8fd0ff; }
.wn-steps .on { outline: 2px solid #5aa9ff; color: var(--text); }
.wn-steps .on b, .wn-steps .on strong { color: var(--text); }
.wn-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.wn-tiles > div { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border-radius: 10px; background: var(--card-2); }
.wn-tiles span { font-size: var(--fs-small); color: var(--text-2); }
.wn-tiles b { font-size: var(--fs-lead); }
.wn-tiles small { font-size: var(--fs-note); color: var(--muted); }
.wn-bars { display: flex; align-items: stretch; gap: 3px; height: 110px; }
.wn-bars > div { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.wn-bars i { display: block; border-radius: 3px 3px 0 0; background: #8fd0ff; opacity: .7; }
.wn-bars span { height: 1.1rem; font-size: var(--fs-note); color: var(--muted); text-align: center; white-space: nowrap; }
.wn-bars .top i { background: #fff; opacity: 1; } .wn-bars .now i { background: #ffc94d; opacity: 1; }
.wn-past { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.wn-past li { display: grid; grid-template-columns: 3rem 3.6rem 1fr; gap: var(--sp-2); align-items: baseline; font-size: var(--fs-text2); }
.wn-past span { font-size: var(--fs-small); color: var(--muted); }
.wn-past p { margin: 0; }
@media (max-width: 760px) {
  .winter-scene { height: 140px; }
  .winter-scene .ns-say { top: 14px; left: 14px; right: 14px; }
  .wn-week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wn-ice, .wn-steps, .wn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wn-stick { flex-direction: column; align-items: stretch; }
  .wn-stick li { grid-template-columns: 6rem 1fr; }
  .wn-bands div span { display: none; }
}

/* The Winter page in even rows: every card in a row is the same height, and nothing is left hanging */
.wn-mark.start b { left: 0; transform: none; }
.wn-mark.end b { left: auto; right: 0; transform: none; }
@media (min-width: 1200px) {
  #page-winter { display: grid; column-count: auto; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "tabs tabs tabs" "intro intro intro" "scene scene scene" "week week week" "hours hours storm" "hours hours chill" "stick ice past" "steps steps steps" "years years years"; grid-template-rows: repeat(4, auto) auto 1fr auto auto auto; }
  #page-winter > * { margin: 0; min-width: 0; }
  #page-winter > .subtabs { grid-area: tabs; }
  #page-winter > .page-intro { grid-area: intro; }
  #page-winter > .winter-scene { grid-area: scene; }
  #hz-winter { grid-area: week; } #wn-hours { grid-area: hours; } #wn-storm { grid-area: storm; } #wn-chill { grid-area: chill; }
  #wn-stick { grid-area: stick; } #wn-ice { grid-area: ice; } #wn-steps { grid-area: steps; } #wn-past { grid-area: past; } #wn-years { grid-area: years; }
  .wn-ice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wn-ice > div { display: grid; grid-template-columns: 64px 1fr; column-gap: var(--sp-2); align-items: center; align-content: start; }
  .wn-ice svg { grid-row: span 2; }
  .wn-stick { flex-direction: column; align-items: stretch; gap: var(--sp-2); }
  .wn-ground { display: flex; align-items: baseline; gap: var(--sp-2); text-align: left; }
}

/* Heat runs the full width like Fire weather: the week on the left, HeatRisk and heat stress on the right */
@media (min-width: 1200px) {
  #hz-heat { column-span: all; }
  #hz-heat .fire-split > * { min-width: 0; }
  #heatMore { margin-top: 0; }
  #heatMore > summary { display: none; }
}

/* The Fire & heat banner, using the Winter banner's layout */
.fire-scene { background: linear-gradient(90deg, rgba(26, 14, 8, .8), rgba(26, 14, 8, .4) 62%, rgba(26, 14, 8, .15)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Oklahoma_wildfires_2025.jpg?width=1600") center 68% / cover no-repeat, #5a4632; }
.fire-scene .ns-say span { color: #fbeee0; }

/* The Earthquakes banner, using the Winter banner's layout */
.quake-scene { background: linear-gradient(90deg, rgba(20, 12, 10, .8), rgba(20, 12, 10, .42) 62%, rgba(20, 12, 10, .15)), url("https://commons.wikimedia.org/wiki/Special:FilePath/2011_Oklahoma_earthquake_damage.jpg?width=1800") center 78% / cover no-repeat, #5a3a30; }
.quake-scene .ns-say span { color: #fbeee0; }

/* The Warnings & storms banner, the same height as the photo banners on the other pages */
#hzAnswer { box-sizing: border-box; min-height: 170px; margin-bottom: 1rem; }
@media (max-width: 760px) { #hzAnswer { min-height: 140px; } }

/* The Get prepared page: a banner that shows how ready you are, then even rows */
.ready-scene { background: linear-gradient(90deg, rgba(10, 20, 16, .84), rgba(10, 20, 16, .45) 62%, rgba(10, 20, 16, .12)), url("https://commons.wikimedia.org/wiki/Special:FilePath/FEMA_-_44311_-_Tornado_storm_shelter_exterior_with_debris_in_Oklahoma.jpg?width=1800") center 70% / cover no-repeat, #3b4a34; }
@media (min-width: 1200px) {
  #page-safety { display: grid; column-count: auto; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas: "tabs tabs" "intro intro" "scene scene" "risk plan" "drill plan" "outage outage"; }
  #page-safety > * { margin: 0; min-width: 0; }
  #page-safety > .subtabs { grid-area: tabs; }
  #page-safety > .page-intro { grid-area: intro; }
  #page-safety > .winter-scene { grid-area: scene; }
  #homeRiskCard { grid-area: risk; } #planCard { grid-area: plan; } #drillCard { grid-area: drill; } #outageCard { grid-area: outage; }
  #outageGuide .ing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The Garden & nature page: banner, planting calendar and even rows */
.garden-scene { background: linear-gradient(90deg, rgba(8, 22, 16, .84), rgba(8, 22, 16, .45) 62%, rgba(8, 22, 16, .12)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Oklahoma_City,_OK_-_USA_-_Will_Rogers_Park_-_panoramio.jpg?width=1800") center 56% / cover no-repeat, #2f4a38; }
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5); margin-bottom: var(--sp-2); }
.pl-grid .nat-row { grid-template-columns: 7rem 1fr; padding: 3px 0; }
.nat-track i.pl-spring, .nat-k.pl-spring { background: var(--good); }
.nat-track i.pl-fall, .nat-k.pl-fall { background: #e8a33d; }
@media (max-width: 760px) { .pl-grid { grid-template-columns: minmax(0, 1fr); } .pl-grid > div + div .nat-head { display: none; } }
@media (min-width: 1200px) {
  #page-environment { display: grid; column-count: auto; gap: 1rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #page-environment > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
  #page-environment > #ev-soil, #page-environment > #ev-water { grid-column: span 3; }
  #page-environment > #ev-frost { grid-column: span 2; }
  #page-environment > #envNatureCard { grid-column: span 4; }
  #page-environment:has(#envNatureCard[hidden]) > #ev-frost { grid-column: 1 / -1; }
  #envNature .reports { columns: 2; column-gap: var(--sp-5); }
  #envNature .reports li { break-inside: avoid; }
}

/* The Night sky banner: the real Milky Way over Oklahoma, with tonight's own Moon on top */
.night-scene { background: linear-gradient(90deg, rgba(6, 10, 24, .72), rgba(6, 10, 24, .2) 60%, rgba(6, 10, 24, .1)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Milky_Way_over_Oklahoma.jpg?width=1800") center 24% / cover no-repeat, #0b0f3a; }

/* Weather history: banner, time machine, wildest days, and even rows */
.history-scene { background: linear-gradient(90deg, rgba(14, 12, 10, .8), rgba(14, 12, 10, .42) 62%, rgba(14, 12, 10, .1)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Dust_Bowl_in_Texas_County,_Oklahoma.jpg?width=1600") center 24% / cover no-repeat, #4a4238; }
.tm-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); font-size: var(--fs-text2); }
.tm-form input { padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); color: var(--text); font: inherit; color-scheme: dark; }
.tm-note { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 8px; background: var(--card-2); font-size: var(--fs-text2); }
.tm-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.tm-head strong { display: block; font-size: var(--fs-lead); }
.tm-head span { color: var(--text-2); font-size: var(--fs-text2); }
.tm-moon { flex: none; } .tm-moon .moon-pic { width: 56px; height: 56px; margin: 0; }
.tm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--sp-2); }
.tm-tiles > div { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--card-2); }
.tm-tiles span { font-size: var(--fs-small); color: var(--text-2); }
.tm-tiles b { font-size: var(--fs-lead); white-space: nowrap; }
.tm-line { margin: var(--sp-3) 0 var(--sp-2); }
.tm-decades { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--sp-2); }
.tm-decades > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tm-decades b { font-size: var(--fs-text2); padding-bottom: 2px; border-bottom: 1px solid var(--line); }
.tm-decades button { display: flex; flex-direction: column; padding: 4px 8px; border: 0; border-left: 3px solid var(--tm); border-radius: 6px; background: var(--card-2); color: var(--text-2); font: inherit; font-size: var(--fs-note); text-align: left; cursor: pointer; }
.tm-decades button span { font-size: var(--fs-small); font-weight: 600; color: var(--tm); }
.tm-decades button:hover, .tm-decades button:focus-visible, .tm-decades button.on { background: color-mix(in srgb, var(--tm) 28%, var(--card-2)); color: var(--text); outline: none; }
.tm-tornado { --tm: #ff7a7a; } .tm-cold { --tm: #8fd0ff; } .tm-heat { --tm: #ffb04d; } .tm-rain { --tm: #5fd6c4; }
/* Forecast desk › challenge result as a target range (renderChallenge in desk.js) */
.ch-lanes { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-2) 0 var(--sp-3); }
.ch-lane { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.ch-lane-name { display: flex; flex-direction: column; font-weight: 700; font-size: var(--fs-small); }
.ch-lane-name small { font-weight: 400; color: var(--muted); font-size: var(--fs-note); }
.ch-range { position: relative; height: calc(var(--n, 1) * 24px + 14px); border-radius: 22px; background: var(--card-2); overflow: visible; }
.ch-ring { position: absolute; top: 6px; bottom: 6px; left: 50%; transform: translateX(-50%); border-radius: 21px; }
.ch-ring.r3 { width: 92%; background: color-mix(in srgb, #c94f4f 10%, transparent); }
.ch-ring.r2 { width: 61%; background: color-mix(in srgb, #e3b008 16%, transparent); }
.ch-ring.r1 { width: 31%; background: color-mix(in srgb, #2e9e5b 22%, transparent); }
.ch-bull { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #c94f4f; outline: 3px solid color-mix(in srgb, #c94f4f 30%, transparent); }
.ch-pin { position: absolute; top: calc(7px + var(--j) * 24px); transform: translateX(-11px); display: flex; flex-direction: row; gap: 3px; align-items: center; z-index: 1; animation: ch-fly .55s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--j) * 140ms + .1s); }
.ch-pin b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--pin); border: 2px solid var(--card); }
.ch-pin small { font-size: 10px; font-weight: 600; color: var(--text-2); white-space: nowrap; background: color-mix(in srgb, var(--card) 80%, transparent); padding: 0 3px; border-radius: 3px; }
.ch-pin.out b { outline: 2px dashed var(--pin); outline-offset: 1px; }
.ch-pin-p0 { --pin: var(--accent); } .ch-pin-p1 { --pin: #8e44ad; } .ch-pin-p2 { --pin: #d06a2a; } .ch-pin-p3 { --pin: #2a9d8f; } .ch-pin-nws { --pin: #6b7280; }
.ch-tally { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.ch-tally > span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card-2); font-weight: 600; font-size: var(--fs-small); }
.ch-tally > span.won { outline: 2px solid #e3b008; }
.ch-tally i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: var(--pin); }
.ch-tally b { font-size: var(--fs-lead); }
.ch-tally small { color: var(--muted); font-weight: 400; }
@keyframes ch-fly { from { transform: translate(-11px, -30px) scale(1.6); opacity: 0; } to { transform: translateX(-11px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ch-pin { animation: none; } }
@media (max-width: 640px) { .ch-lane { grid-template-columns: 1fr; gap: 2px; } .ch-lane-name { flex-direction: row; gap: 0.5rem; align-items: baseline; } }
/* History › How the forecast has done, as a report card (reportCard in forecaster.js) */
.rc { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-3) 0; padding: var(--sp-3); border-radius: 10px; background: var(--card-2); border-left: 4px solid #c94f4f; background-image: repeating-linear-gradient(to bottom, transparent 0 31px, color-mix(in srgb, var(--cool) 18%, transparent) 31px 32px); }
.rc-overall { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 7.5rem; padding: var(--sp-2); border-radius: 10px; border: 2px solid var(--g); background: color-mix(in srgb, var(--g) 12%, var(--card)); text-align: center; }
.rc-overall span { font-size: var(--fs-note); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.rc-overall b { font-size: 3.2rem; line-height: 1.05; color: var(--g); font-family: Georgia, 'Times New Roman', serif; animation: rc-stamp .5s cubic-bezier(.3, 1.6, .5, 1) both .2s; }
.rc-overall small { font-size: var(--fs-note); color: var(--text-2); }
.rc-rows { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; }
.rc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 5px 0; border-bottom: 1px dashed var(--line); }
.rc-label { display: flex; flex-direction: column; font-weight: 600; font-size: var(--fs-small); }
.rc-label small { font-weight: 400; color: var(--text-2); font-size: var(--fs-note); }
.rc-grade { flex: none; width: 2.1rem; height: 2.1rem; border-radius: 50%; display: grid; place-items: center; font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; color: var(--g); border: 2px solid var(--g); transform: rotate(-8deg); animation: rc-stamp .4s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.35s + var(--i) * 120ms); }
.rc-note { margin: var(--sp-2) 0 0; font-size: var(--fs-small); color: var(--text-2); font-style: italic; }
.rc-A { --g: #2e9e5b; } .rc-B { --g: #6a9e2e; } .rc-C { --g: #c48a00; } .rc-D { --g: #d06a2a; } .rc-F { --g: #c94f4f; }
@keyframes rc-stamp { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } to { opacity: 1; } }
.rc-overall b { transform: none; }
@media (prefers-reduced-motion: reduce) { .rc-overall b, .rc-grade { animation: none; } }
@media (max-width: 640px) { .rc-overall { width: 100%; flex-direction: row; gap: var(--sp-3); justify-content: flex-start; } .rc-overall b { font-size: 2.4rem; } }
/* Oklahoma's wildest days as a timeline (renderTimeMachine in timemachine.js) */
.tw-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--sp-3); }
.tw { position: relative; height: calc(var(--rows) * 30px + 34px); margin: 0 14px; }
.tw-axis { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; border-top: 2px solid var(--line); }
.tw-axis span { position: absolute; top: 4px; transform: translateX(-50%); font-size: var(--fs-note); color: var(--muted); white-space: nowrap; }
.tw-axis span::before { content: ""; position: absolute; left: 50%; top: -9px; height: 6px; border-left: 1px solid var(--line); }
.tw-dot { position: absolute; bottom: calc(var(--lvl) * 30px + 28px); width: 28px; height: 28px; margin-left: -14px; padding: 0; border-radius: 50%; border: 2px solid var(--tm); background: color-mix(in srgb, var(--tm) 22%, var(--card)); font-size: 14px; line-height: 1; cursor: pointer; transition: transform .15s, opacity .2s; animation: tw-in .4s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 40ms); }
.tw-dot:hover, .tw-dot:focus-visible { transform: scale(1.25); z-index: 2; outline: none; }
.tw-dot.on { background: var(--tm); transform: scale(1.2); z-index: 1; outline: 2px solid var(--text); outline-offset: 2px; }
.tw-dot.dim { opacity: .2; }
.tw-card { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: var(--card-2); min-height: 6.5rem; }
.tw-card strong { display: block; font-size: var(--fs-lead); margin-top: var(--sp-1); }
.tw-card p { margin: var(--sp-1) 0; }
.tw-kind { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: var(--fs-note); font-weight: 700; background: color-mix(in srgb, var(--tm) 25%, transparent); color: var(--text); }
@keyframes tw-in { from { transform: translateY(10px) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tw-dot { animation: none; transition: none; } }
@media (max-width: 640px) { .tw-dot { width: 22px; height: 22px; margin-left: -11px; font-size: 11px; bottom: calc(var(--lvl) * 24px + 28px); } .tw { height: calc(var(--rows) * 24px + 34px); margin: 0 10px; } .tw-axis span:nth-child(even) { display: none; } .tw-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .tw-filter .chip { flex: none; } }
@media (min-width: 1200px) {
  #page-history { display: grid; column-count: auto; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-history > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
  #h-machine { grid-column: 1; order: 3; } #h-today { grid-column: 2; order: 3; }
  #page-history > .page-intro { order: 0; } #page-history > .winter-scene { order: 1; } #page-history > .glance-card { order: 2; }
  #page-history > .subtabs { order: 0; }
  #h-wild { grid-column: 1 / -1; order: 4; }
  #h-patterns { grid-column: 1; order: 5; } #h-notable { grid-column: 2; order: 5; }
  #h-year { grid-column: 1; order: 6; } #h-enso { grid-column: 2; order: 6; }
  #h-check { grid-column: 1; order: 7; } #h-drought { grid-column: 2; order: 7; }
  #page-history:has(#h-drought[hidden]) #h-check { grid-column: 1 / -1; }
}

/* The Solar page: no jump links, a banner, then one short card for each part in even rows */
.solar-scene { background: linear-gradient(90deg, rgba(8, 18, 40, .8), rgba(8, 18, 40, .4) 62%, rgba(8, 18, 40, .1)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Rooftop_solar_panels_in_Caldicot_-_geograph.org.uk_-_6388281.jpg?width=1600") center 27% / cover no-repeat, #1b4a84; }
#page-solar > #envSolarCard { padding: 0; border: 0; background: none; box-shadow: none; }
.sol-grid { display: grid; gap: 1rem; margin-bottom: var(--sp-2); }
.sol-part { min-width: 0; margin: 0; }
.sol-part:empty { display: none; }
.sol-part > .subhead:first-child { margin-top: 0; }
#page-solar .sol-part .sw-stats { margin-top: 0; }
@media (min-width: 1200px) {
  #page-solar { display: block; column-count: auto; }
  #page-solar > * { margin-bottom: 1rem; }
  .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Solar: what the sun did today, the week ahead, and the bills side by side */
.sol-eq { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.sol-eq > div { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--card-2); }
.sol-eq span { font-size: var(--fs-small); color: var(--text-2); }
.sol-eq b { font-size: var(--fs-lead); }
.sol-eq small { font-size: var(--fs-note); color: var(--muted); }
/* Solar › Roof records: odometer and every day as a dot (solarRecords in environment.js) */
.odo { display: inline-flex; align-items: flex-end; gap: 3px; margin: var(--sp-1) 0 var(--sp-2); }
.odo-d { display: inline-block; height: 2.4rem; width: 1.75rem; overflow: hidden; border-radius: 6px; background: #1b1f27; color: #f4f1e8; font-size: 1.6rem; font-weight: 700; line-height: 2.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.odo-d:nth-last-child(2) { background: #e07b39; color: #fff; }
.odo-d > span { display: flex; flex-direction: column; transform: translateY(calc(var(--n) * -2.4rem)); animation: odo-roll 1.4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 90ms); }
.odo-d i { font-style: normal; height: 2.4rem; }
.odo-unit { margin-left: 0.5rem; font-weight: 600; color: var(--muted); font-size: var(--fs-small); }
@keyframes odo-roll { from { transform: translateY(0); } }
.rr-lead { margin: var(--sp-3) 0 var(--sp-2); }
.rr-strip { position: relative; height: calc(var(--rows) * 13px + 44px); margin: 0 8px; border-bottom: 1px solid var(--line); }
.rr-dot { position: absolute; bottom: calc(var(--lvl) * 13px + 3px); width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; border: 1.5px solid #e07b39; box-sizing: border-box; animation: sol-pop .3s ease-out both; animation-delay: calc(var(--i) * 25ms); }
.rr-dot.beat { background: #e07b39; }
.rr-dot.rr-best { background: #f2c230; border-color: #b8860b; }
.rr-avg { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--muted); }
.rr-key-avg { display: inline-block; width: 0; height: 12px; border-left: 1.5px dashed var(--muted); }
.rr-avg em { position: absolute; top: 0; left: 4px; font-style: normal; font-size: var(--fs-note); color: var(--muted); white-space: nowrap; }
.rr-tag { position: absolute; top: 0; transform: translateX(-50%); font-size: var(--fs-note); color: var(--text-2); text-align: center; white-space: nowrap; line-height: 1.25; }
.rr-tag-low { transform: none; }
.rr-tag-best { transform: translateX(-100%); text-align: right; }
.rr-axis { display: flex; justify-content: space-between; margin: 2px 8px 0; font-size: var(--fs-note); color: var(--muted); }
.rr-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: var(--sp-2) 0 0; }
.rr-key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.rr-key .rr-dot { position: static; flex: none; width: 11px; height: 11px; margin: 0; animation: none; }
@media (prefers-reduced-motion: reduce) { .odo-d > span, .rr-dot { animation: none; } }
/* Solar › Savings as a jar of 100 coins (paybackJar in environment.js) */
.pj { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin: var(--sp-1) 0 var(--sp-3); }
.pj-coins { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; width: min(100%, 460px); padding: 10px; border-radius: 10px; background: var(--card-2); }
.pj-big { font-size: var(--fs-lead); }
.pj-coin { aspect-ratio: 1; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--muted) 60%, transparent); box-sizing: border-box; }
.pj-coin.on { border: 0; background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c230 45%, #b8860b); animation: pj-drop .45s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 60ms); }
.pj-coin.now { border: 1.5px solid #d9a521; background: conic-gradient(#f2c230 var(--p), transparent 0); animation: pj-glow 1.6s ease-in-out infinite alternate; }
.pj-say { display: flex; flex-direction: column; gap: 2px; flex: 1 1 14rem; min-width: 0; }
.pj-say span { font-size: var(--fs-text2); }
.pj-say small { font-size: var(--fs-note); color: var(--muted); }
.pj-say small b { color: var(--text); }
@keyframes pj-drop { from { transform: translateY(-14px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pj-glow { from { outline: 2px solid transparent; } to { outline: 2px solid color-mix(in srgb, #f2c230 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pj-coin.on, .pj-coin.now { animation: none; } }
/* What the sun did, as rows of icons (pictos in renderSolar, environment.js) */
.sol-pics { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.sol-pic { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--card-2); }
.sol-pic-say { grid-row: 1 / 3; display: flex; flex-direction: column; }
.sol-pic-say span { font-size: var(--fs-small); color: var(--text-2); }
.sol-pic-say b { font-size: var(--fs-lead); line-height: 1.2; }
.sol-pic-say small, .sol-pic-per { font-size: var(--fs-note); color: var(--muted); }
.sol-pic-icons { display: flex; flex-wrap: wrap; gap: 2px 4px; font-size: 1.35rem; line-height: 1.2; }
.sol-pic-icons i { font-style: normal; display: inline-block; animation: sol-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--row) * 120ms + var(--k) * 35ms); }
.sol-pic-icons i.part { width: var(--w); overflow: hidden; white-space: nowrap; opacity: .55; }
.sol-pic-per { grid-column: 2; }
@keyframes sol-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sol-pic-icons i { animation: none; } }
@media (max-width: 640px) {
  .sol-pic { grid-template-columns: 1fr; row-gap: var(--sp-1); }
  .sol-pic-say { grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-2); }
  .sol-pic-say small { width: 100%; }
  .sol-pic-per { grid-column: 1; }
  .sol-pic-icons { font-size: 1.1rem; gap: 2px; }
}
.sol-week, .bill-bars { display: flex; align-items: stretch; gap: var(--sp-2); height: 150px; margin-bottom: var(--sp-2); }
.sol-week > div, .bill-bars > div { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.sol-week i, .bill-bars i { display: block; width: 100%; border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--moderate) 45%, var(--card-2)); }
.sol-week .best i { background: var(--moderate); }
.sol-week span, .bill-bars span { font-size: var(--fs-small); font-weight: 600; }
.sol-week small, .bill-bars small { font-size: var(--fs-note); color: var(--muted); }
.bill-bars { max-width: 760px; height: 190px; }
.bill-bars i { background: var(--moderate); }
.bill-bars .before i, .bill-k.before { background: #8aa2bd; }
.bill-k { display: inline-block; width: 14px; height: 10px; border-radius: 3px; background: var(--moderate); }
.sol-week > .best { padding: 0; border: 0; background: none; }

/* The Solar replay: the day as a time-lapse */
.sol-wide { grid-column: 1 / -1; }
.sr-sky { position: relative; height: 300px; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, #1b2a5a, #c8693f 78%, #f2b263); }
.sr-sky > div { position: absolute; }
.sr-day { inset: 0; background: linear-gradient(180deg, #2f78cf, #9ed0f2 80%); }
.sr-sun { z-index: 1; width: 54px; height: 54px; margin: -27px; border-radius: 50%; background: radial-gradient(circle, #fffbe6 30%, #ffd95e 62%, rgba(255, 200, 70, 0) 72%); box-shadow: 0 0 60px 26px rgba(255, 221, 120, .55); }
.sr-cloud { z-index: 2; inset: 0; opacity: 0; background: url("https://commons.wikimedia.org/wiki/Special:FilePath/Sky_Clouds_and_Atmosphere.jpg?width=1600") center / cover no-repeat, #76808e; }
.sr-read { z-index: 3; left: 18px; top: 14px; display: flex; flex-direction: column; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }
.sr-read strong { font-size: var(--fs-huge); line-height: 1.1; }
.sr-read span { font-size: var(--fs-lead); }
.sr-tally { z-index: 3; right: 14px; top: 14px; display: flex; gap: var(--sp-2); }
.sr-tally div { display: flex; flex-direction: column; min-width: 84px; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: rgba(8, 18, 40, .62); color: #fff; }
.sr-tally b { font-size: var(--fs-lead); white-space: nowrap; }
.sr-tally small { font-size: var(--fs-note); color: #d7e3f2; }
.sr-roof { z-index: 3; left: 50%; bottom: 10px; display: flex; align-items: flex-end; gap: 22px; transform: translateX(-50%) perspective(520px) rotateX(38deg); --lit: 0; }
.sr-face { display: grid; grid-template-columns: repeat(11, 34px); gap: 3px; padding: 5px; border-radius: 6px; background: #1a2230; }
.sr-face i { display: block; height: 56px; border-radius: 2px; background: color-mix(in srgb, #ffd25e calc(var(--lit) * var(--s) * 100%), #0d1f45); box-shadow: 0 0 calc(var(--lit) * 12px) rgba(255, 210, 94, .7); }
.sr-face:last-child:not(:first-child) { grid-template-columns: repeat(3, 34px); }
.sr-bar { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0; }
.sr-bar input { flex: 1; min-width: 0; accent-color: var(--moderate); }
.sr-bar button { min-width: 84px; }
@media (max-width: 760px) {
  .sr-sky { height: 260px; }
  .sr-read { left: 12px; top: 10px; } .sr-read strong { font-size: var(--fs-lead); } .sr-read span { font-size: var(--fs-text2); }
  .sr-tally { left: 10px; right: 10px; top: auto; bottom: 8px; } .sr-tally div { flex: 1; min-width: 0; padding: 4px var(--sp-2); }
  .sr-roof { bottom: 66px; gap: 8px; }
  .sr-face { grid-template-columns: repeat(11, 16px); padding: 3px; gap: 2px; } .sr-face i { height: 26px; }
  .sr-face:last-child:not(:first-child) { grid-template-columns: repeat(3, 16px); }
}

/* Learn and Settings: banners, the storm calendar, the word of the day, and fuller layouts */
.storm-scene { background: linear-gradient(90deg, rgba(6, 14, 28, .78), rgba(6, 14, 28, .3) 62%, rgba(6, 14, 28, .08)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Wallcloud_mit_Tailcloud_im_westlichen_Oklahoma_II.jpg?width=1800") center 84% / cover no-repeat, #1d3a55; }
.quiz-scene { background: linear-gradient(90deg, rgba(8, 10, 24, .72), rgba(8, 10, 24, .2) 62%, rgba(8, 10, 24, 0)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Circular_base_of_a_rotating_wall_cloud_-_NOAA.jpg?width=1800") center 55% / cover no-repeat, #34405a; }
.alm-scene { background: linear-gradient(90deg, #2c2115 52%, rgba(44, 33, 21, .35) 70%, rgba(44, 33, 21, 0) 84%), url("https://commons.wikimedia.org/wiki/Special:FilePath/Title_page_for_Poor_Richard,_1743,_an_Almanack_..._LCCN2005692066.jpg?width=1000") right 11% / 48% auto no-repeat, #e6dcc6; }
.settings-scene { background: linear-gradient(90deg, rgba(10, 12, 28, .8), rgba(10, 12, 28, .36) 62%, rgba(10, 12, 28, .1)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Downtown_Oklahoma_City_and_Oklahoma_River_at_Sunset.jpg?width=1800") center 34% / cover no-repeat, #3a2f4a; }
.lp-go { align-self: flex-start; margin-top: var(--sp-2); text-shadow: none; }
.sy-row { display: grid; grid-template-columns: 11.5rem repeat(12, minmax(0, 1fr)); align-items: center; gap: 2px; width: 100%; padding: 1px 0; border: 0; background: none; color: var(--text-2); font: inherit; font-size: var(--fs-small); text-align: left; }
button.sy-row { cursor: pointer; }
button.sy-row:hover, button.sy-row:focus-visible { color: var(--text); outline: none; background: var(--card-2); }
.sy-row > span { line-height: 1.2; }   /* long names wrap rather than end in "…" */
.sy-row i { display: block; height: 15px; border-radius: 2px; font-style: normal; }
.sy-head i { height: auto; background: none; font-size: var(--fs-note); color: var(--muted); text-align: center; }
.sy-head i.now { color: var(--text); font-weight: 700; }
.sy-0 { background: var(--card-2); } .sy-1 { background: #5b3f7a; } .sy-2 { background: #c9553f; } .sy-3 { background: #ffb347; }
.sy-row i.now:not(.sy-head i) { box-shadow: 0 0 0 1px var(--text); }
.sy-k { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.dict-hero { position: relative; min-height: 190px; margin-bottom: 1rem; border-radius: 12px; overflow: hidden; background: linear-gradient(90deg, rgba(6, 14, 30, .88), rgba(6, 14, 30, .62) 58%, rgba(6, 14, 30, .2)), url("https://commons.wikimedia.org/wiki/Special:FilePath/National_Weather_Center_6-20-2006_3-48-27_PM.jpg?width=1800") center 45% / cover no-repeat, #1b3a5a; }
.dict-word { max-width: 720px; padding: var(--sp-4) var(--sp-5) var(--sp-6); color: #fff; }
.dict-word small { font-size: var(--fs-small); color: #cfe0f4; }
.dict-word strong { display: block; font-size: var(--fs-huge); line-height: 1.15; }
.dict-word p { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-text2); }
.dict-season { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: var(--sp-2) 0; font-size: var(--fs-small); }
.dict-season:empty { display: none; }
.quiz-topics .quiz-mode:nth-child(5n+1) { border-left: 4px solid #5aa9ff; } .quiz-topics .quiz-mode:nth-child(5n+2) { border-left: 4px solid #ff7a7a; } .quiz-topics .quiz-mode:nth-child(5n+3) { border-left: 4px solid #5fd6c4; } .quiz-topics .quiz-mode:nth-child(5n+4) { border-left: 4px solid #ffb347; } .quiz-topics .quiz-mode:nth-child(5n) { border-left: 4px solid #c79bff; }
.settings-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); }
.settings-list .small-btn { padding: var(--sp-3); text-align: left; }
@media (min-width: 1200px) {
  #page-storms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  #page-storms > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
  #page-storms > #sg-life, #page-storms > #sg-year { grid-column: span 1; }
  #page-settings { display: grid; column-count: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; gap: 1rem; }
  #page-settings > * { grid-column: 1 / -1; margin: 0; min-width: 0; }
  #page-settings > #phoneCard { grid-column: 1; grid-row: span 2; } #page-settings > #appCard, #page-settings > #elsewhereCard { grid-column: 2; }
}
@media (max-width: 760px) { .dict-word { padding: var(--sp-3) var(--sp-4) 2.4rem; } }

/* Dictionary: the numbers decoded, and more words on a wide screen */
.dict-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-2); }
.dict-nums button { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-3); border: 1px solid transparent; border-radius: 10px; background: var(--card-2); color: var(--text-2); font: inherit; font-size: var(--fs-small); text-align: left; cursor: pointer; }
.dict-nums button:hover, .dict-nums button:focus-visible { border-color: var(--accent); outline: none; color: var(--text); }
.dict-nums b { font-size: var(--fs-lead); color: var(--text); }
@media (min-width: 1200px) { .dict-letter { columns: 3; } }
.dict-nums { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .dict-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The action games */
.arc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-2); }
.arc-wrap { position: relative; }
#arc { display: block; width: 100%; max-height: 74vh; margin: 0 auto; border-radius: 12px; background: #1b2730; touch-action: none; user-select: none; cursor: pointer; }
.arc-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-4); border-radius: 12px; background: rgba(8, 14, 22, .78); color: #fff; text-align: center; }
.arc-start[hidden] { display: none; }
.arc-start p { max-width: 520px; margin: 0; font-size: var(--fs-text2); }
.arc-mute { position: absolute; z-index: 2; right: 10px; top: 10px; padding: 3px 9px; border: 0; border-radius: 6px; background: rgba(8, 14, 22, .6); color: #fff; font: inherit; font-size: var(--fs-small); cursor: pointer; }
.arc-fact { max-width: 620px; margin: var(--sp-3) auto 0; padding: var(--sp-3); border-radius: 10px; background: var(--card-2); font-size: var(--fs-text2); text-align: center; }
@media (max-width: 760px) { .arc-cards { grid-template-columns: minmax(0, 1fr); } }

/* The Almanack, printed: paper, ink and a serif face, set only on this page */
#page-almanack { --card: #f3ead6; --card-2: #e9dcc0; --line: #bfa97c; --text: #2b2114; --text-2: #4a3a24; --muted: #6d5a3c; --link: #7a2e12; --accent: #8a3a18; font-family: Georgia, "Times New Roman", serif; }
#page-almanack > .card { border: 1px solid #a68d5e; outline: 3px double #bfa97c; outline-offset: -7px; background: var(--card); color: var(--text); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
#page-almanack .card-head { border-bottom: 2px solid var(--text); }
#page-almanack h2 { font-family: Georgia, "Times New Roman", serif; font-variant: small-caps; letter-spacing: .03em; color: var(--text); }
#page-almanack .subhead, #page-almanack strong, #page-almanack b { color: inherit; }
#page-almanack > .page-intro p, #page-almanack > .alm-sec, #page-almanack > .alm-sec strong { color: #e6d8b8; }
#page-almanack > .alm-sec strong { font-variant: small-caps; }
#page-almanack > .alm-sec span { color: #bfae8c; }
.alm-verse { display: block; margin-top: 4px; font-family: Georgia, "Times New Roman", serif; font-size: var(--fs-text2); color: #f0e2c0; }
.alm-pagewrap { overflow-x: auto; }
.alm-page { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.alm-page caption { padding-bottom: var(--sp-2); font-size: var(--fs-lead); font-variant: small-caps; text-align: center; }
.alm-page th { padding: 4px 8px; border-top: 2px solid var(--text); border-bottom: 1px solid var(--text); font-weight: 400; font-style: italic; text-align: left; white-space: nowrap; }
.alm-page td { padding: 3px 8px; border-bottom: 1px dotted var(--line); vertical-align: top; }
.alm-page td:first-child { font-weight: 700; text-align: right; }
.alm-page td:nth-child(3), .alm-page td:nth-child(4), .alm-page td:nth-child(6) { white-space: nowrap; }
.alm-page td:last-child { min-width: 200px; font-style: italic; }
.alm-page tr.end td:nth-child(-n+2) { color: #8a2a12; }
.alm-page tr.today td { background: #e4cf9c; font-weight: 700; }
.alm-page .mo { text-align: center; }
@media (min-width: 1200px) { #page-almanack > #al-month { grid-column: 1 / -1; } }
#page-almanack > .subtabs { --text: #f3ead6; --text-2: #d9cdb2; --muted: #bfae8c; --accent: #e8b45a; font-family: var(--font, system-ui, sans-serif); }
#page-almanack > .subtabs button { color: #d9cdb2; }
#page-almanack > .subtabs button.active, #page-almanack > .subtabs button[aria-current] { color: #fff; }
#page-almanack .alm-moon { background: linear-gradient(180deg, #162647 0, #162647 112px, var(--card-2) 150px); }
#page-almanack .alm-moon h3 { color: #f3ead6; }
.alm-page td:nth-child(2) { white-space: nowrap; }
#arc { height: auto; max-height: none; }
@media (min-width: 1200px) {
  #gamesHome .games-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  #gamesHome .games-grid .game-card { grid-column: span 4; }
}
@media (min-width: 1200px) { #gamesHome .games-grid { display: grid; } #gamesHome .games-grid .game-card { flex: none; width: auto; } }

/* Game cards on real photos */
.game-banner { height: 150px; background-size: cover; background-repeat: no-repeat; background-color: #1b2730; }
.arc-cards .game-banner { height: 210px; }
.game-card:hover .game-banner { filter: brightness(1.12); }
.g-hero .game-banner.wide::after { background: linear-gradient(90deg, rgba(6, 10, 18, .82), rgba(6, 10, 18, .45) 60%, rgba(6, 10, 18, .25)); }
.g-top.g-hero { min-height: 96px; }
.games-hero { background: none; padding: 0; color: var(--text); }
.games-hero h2 { color: var(--text); }
.games-hero p { color: var(--text-2); }
@media (max-width: 760px) { .game-banner { height: 110px; } .arc-cards .game-banner { height: 150px; } }

/* The Sun & auroras banner: the real May 2024 aurora, seen from southern Oklahoma */
.sun-scene { background: linear-gradient(90deg, rgba(6, 8, 24, .74), rgba(6, 8, 24, .26) 62%, rgba(6, 8, 24, .05)), url("https://commons.wikimedia.org/wiki/Special:FilePath/Aurora_in_Southern_Oklahoma_(53714738361).jpg?width=1800") center 45% / cover no-repeat, #2a1f4a; }

/* Ingredients Lab: the guide you can open during the game */
.lab-guide { margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--card-2); font-size: var(--fs-text2); }
.lab-guide summary { cursor: pointer; font-weight: 600; color: var(--link); }
.lab-guide ol { margin: var(--sp-2) 0; padding-left: 1.4rem; display: grid; gap: 4px; }

/* What forecasters say: the combined read, and the local office's graphics */
.fb-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-4); }
.fb-row { display: grid; grid-template-columns: 10rem 1fr; gap: var(--sp-2); padding: 6px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-text2); }
.fb-row > span { color: var(--muted); font-size: var(--fs-small); }
.fb-row ul { margin: 0; padding-left: 1.1rem; }
.fb-read > p { margin-top: var(--sp-2); }
.fb-pics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); align-content: start; }
.fb-pics a:first-child:last-child { grid-column: 1 / -1; }
.fb-pics img { display: block; width: 100%; height: auto; border-radius: 8px; }
#hz-brief { column-span: all; }
@media (max-width: 900px) { .fb-wrap { grid-template-columns: minmax(0, 1fr); } .fb-row { grid-template-columns: 7rem 1fr; } }
@media (max-width: 900px) { .fb-pics { grid-template-columns: minmax(0, 1fr); } }

/* How to read the radar */
.rg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.rg-view { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3); border-radius: 10px; background: var(--card-2); font-size: var(--fs-small); }
.rg-view .subhead { margin: 0; }
.rg-view p { margin: 0; } .rg-view ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 3px; }
.rg-pic svg { display: block; width: 100%; height: auto; max-height: 150px; border-radius: 8px; }
.rg-watch { margin-top: auto; padding-top: var(--sp-2); color: var(--text-2); }
.rv-scale { height: 8px; border-radius: 3px; background: linear-gradient(90deg, #00e000, #0a7a0a, #8a8a8a, #8f1010, #ff2020); }
@media (max-width: 1100px) { .rg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rg-grid { grid-template-columns: minmax(0, 1fr); } }

/* The Storm Builder */
.sb-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-4); }
.sb-side { display: flex; flex-direction: column; gap: var(--sp-2); }
.sb-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-slide { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-text2); }
.sb-slide > span { display: flex; justify-content: space-between; gap: var(--sp-2); }
.sb-slide input[type="range"] { width: 100%; accent-color: var(--moderate); }
.sb-slide select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); color: var(--text); font: inherit; }
.sb-side p { margin: 0; }
.sb-stage { position: relative; display: flex; align-items: flex-end; min-height: 320px; border-radius: 12px; overflow: hidden; background: #1b2a3a center / cover no-repeat; transition: background-image .35s ease; }
.sb-say { width: 100%; display: flex; flex-direction: column; gap: 2px; padding: var(--sp-5) var(--sp-4) var(--sp-5); background: linear-gradient(0deg, rgba(5, 10, 20, .9), rgba(5, 10, 20, .55) 70%, rgba(5, 10, 20, 0)); color: #fff; }
.sb-say strong { font-size: var(--fs-huge); line-height: 1.1; }
.sb-say em { font-style: normal; font-weight: 600; color: #ffd27a; }
.sb-say em:empty { display: none; }
.sb-stage small { position: absolute; right: 8px; bottom: 5px; font-size: var(--fs-note); color: #d7e3f2; }
.sb-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-2); padding: 0; list-style: none; counter-reset: sb; }
.sb-steps li { counter-increment: sb; display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3); border-radius: 10px; border-top: 3px solid var(--line); background: var(--card-2); font-size: var(--fs-small); color: var(--text-2); }
.sb-steps li::before { content: counter(sb); font-size: var(--fs-lead); font-weight: 700; color: var(--muted); }
.sb-steps b { color: var(--text); }
.sb-steps .sb-go { border-top-color: var(--good); } .sb-steps .sb-go::before { color: var(--good); }
.sb-steps .sb-stop { border-top-color: var(--extreme); } .sb-steps .sb-stop::before { color: var(--extreme); }
.sb-steps .sb-off { opacity: .5; }
@media (max-width: 900px) { .sb-wrap { grid-template-columns: minmax(0, 1fr); } .sb-stage { min-height: 260px; } .sb-steps { grid-template-columns: minmax(0, 1fr); } .sb-steps li::before { display: none; } }
@media (max-width: 900px) { .sb-stage { order: -1; position: sticky; top: 8px; z-index: 2; min-height: 200px; } }

/* How a thunderstorm grows: real clouds and real numbers */
.lc-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.lc-stage { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; border-radius: 10px; overflow: hidden; background: var(--card-2); font-size: var(--fs-small); }
.lc-pic { position: relative; height: 150px; background-size: cover; background-repeat: no-repeat; }
.lc-pic b { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4) var(--sp-3) var(--sp-2); background: linear-gradient(0deg, rgba(5, 10, 20, .86), rgba(5, 10, 20, 0)); color: #fff; font-size: var(--fs-text2); }
.lc-stage dl { display: grid; grid-template-columns: auto 1fr; gap: 1px var(--sp-2); margin: var(--sp-1) var(--sp-3) 0; }
.lc-stage dt { color: var(--muted); } .lc-stage dd { margin: 0; font-weight: 600; }
.lc-stage p { margin: 0; padding: 0 var(--sp-3) var(--sp-3); color: var(--text-2); }
.lc-modes { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.lc-modes th, .lc-modes td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.lc-modes thead th { color: var(--muted); font-weight: 400; }
@media (max-width: 640px) { .lc-stages { grid-template-columns: minmax(0, 1fr); } .lc-pic { height: 170px; } }

.sb-slide small { color: var(--text-2); font-size: var(--fs-small); line-height: 1.4; }
.sb-sum { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: 8px; background: var(--card-2); font-size: var(--fs-text2); font-weight: 600; }

/* The radar field guide */
.rf-thumbs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-2); }
.rf-thumbs button { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--card-2); color: var(--text-2); font: inherit; font-size: var(--fs-small); cursor: pointer; }
.rf-thumbs button.on { border-color: var(--accent); color: var(--text); }
.rf-thumbs img { display: block; width: 100%; height: 70px; object-fit: cover; }
.rf-thumbs span { display: block; padding: 3px 4px; }
.rf-big { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-2); padding: var(--sp-3); border-radius: 10px; background: var(--card-2); }
.rf-img img { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 8px; background: #0a111c; }
.rf-text strong { display: block; font-size: var(--fs-big); line-height: 1.15; }
.rf-text small { color: var(--muted); font-size: var(--fs-small); }
.rf-text dl { margin: var(--sp-2) 0 0; font-size: var(--fs-text2); }
.rf-text dt { margin-top: var(--sp-2); font-weight: 700; color: var(--accent); }
.rf-text dd { margin: 0; }
.rg-view h4 { margin: 0; font-size: var(--fs-text2); }
.rg-bands { display: flex; gap: 2px; }
.rg-bands button { flex: 1; height: 22px; padding: 0; border: 0; border-radius: 3px; cursor: pointer; }
.rg-bands button:focus-visible { outline: 2px solid var(--text); }
.rg-band { min-height: 2.6em; }
.rd-dial { margin-top: var(--sp-1); padding: var(--sp-2); border-radius: 8px; background: rgba(0, 0, 0, .18); }
.rd-dial label { display: flex; flex-direction: column; gap: 3px; font-weight: 600; }
.rd-dial input { width: 100%; accent-color: var(--moderate); }
.rd-dial svg { display: block; width: 100%; max-height: 140px; }
#rdDial b, #rdDial small { display: block; text-align: center; }
#rdDial small { color: var(--muted); }
.rg-view > .small-btn { align-self: flex-start; margin-top: var(--sp-1); }
@media (max-width: 900px) { .rf-big { grid-template-columns: minmax(0, 1fr); } .rf-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Forecaster's notes: the whole bulletin, in tabs, with the jargon explained */
.notes-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-2); }
.notes-body { font-size: var(--fs-text2); }
.notes-body p { margin: 0 0 var(--sp-3); line-height: 1.6; max-width: 80ch; }
/* The card keeps a readable width on wide screens instead of stretching across the whole page */
.notes-row > .bulletin { max-width: 64rem; }
.notes-body ul { margin: 0 0 var(--sp-3); padding-left: 1.2rem; }
.notes-when { font-weight: 600; color: var(--muted); }
.notes-words { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 10px; background: var(--card-2); }
.notes-words b { display: block; margin-bottom: var(--sp-1); }
.notes-words dl { display: grid; gap: 4px; margin: 0; font-size: var(--fs-small); }
.notes-words dl > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--sp-2); }
.notes-words dt { font-weight: 600; } .notes-words dd { margin: 0; color: var(--text-2); }
.notes-tablewrap { overflow-x: auto; }
.notes-cities { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.notes-cities th, .notes-cities td { padding: 4px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.notes-cities thead th { color: var(--muted); font-weight: 400; }
@media (max-width: 640px) { .notes-words dl > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* On wide screens a long section scrolls in place, so it doesn't leave the column beside it empty */
@media (min-width: 1200px) { #notesBody { max-height: 560px; overflow-y: auto; padding-right: var(--sp-2); } }

/* How a storm day comes together */
.sd-chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: 0; list-style: none; counter-reset: sd; }
.sd-chain li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3); border-radius: 10px; border-top: 3px solid var(--moderate); background: var(--card-2); font-size: var(--fs-small); color: var(--text-2); counter-increment: sd; }
.sd-chain small { color: var(--muted); }
.sd-chain small::before { content: counter(sd) ". "; }
.sd-chain b { color: var(--text); font-size: var(--fs-text2); }
@media (max-width: 1100px) { .sd-chain { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sd-chain { grid-template-columns: minmax(0, 1fr); } }

/* Storm Prediction Center discussions */
#hz-spc { column-span: all; }
.spc-lead { font-weight: 700; }
.spc-md { margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); }
.spc-md strong { display: block; font-size: var(--fs-body); }
.spc-md small { display: block; margin-bottom: var(--sp-2); color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 1200px) { .spc-text { columns: 2; column-gap: var(--sp-6); } .spc-text p { break-inside: avoid; } }

/* Your county's warnings now sits in Weather history, on its own full row */
@media (min-width: 1200px) { #page-history > #sv-history { grid-column: 1 / -1; order: 8; } }

@media (min-width: 1200px) { #page-history > #sv-history { grid-column: 1; } #page-history > #ev-damage { grid-column: 2; order: 8; } }

@media (min-width: 1200px) { #page-history > #ev-tropics { order: 9; } }

#tropicsNote { column-span: all; border-left: 4px solid #f76707; }

/* Storm Prediction Center briefing */
.spc-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: var(--sp-4); }
.spc-tabs button { --risk: var(--line); display: grid; gap: 1px; padding: 8px 10px; text-align: left; color: var(--text); background: var(--card-2); border: 1px solid var(--line); border-top: 3px solid var(--risk); border-radius: 8px; cursor: pointer; font: inherit; }
.spc-tabs b { font-size: var(--fs-small); font-weight: 600; }
.spc-tabs span { font-size: var(--fs-note); color: var(--muted); }
.spc-tabs button.on { background: var(--accent-soft, rgba(90,150,255,.16)); border-color: var(--accent); border-top-color: var(--risk); }
.spc-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-5); align-items: start; margin-bottom: var(--sp-4); }
.spc-stamp { font-size: var(--fs-note) !important; color: var(--muted); margin: 0 0 var(--sp-2) !important; }
.spc-lead { font-size: var(--fs-note) !important; font-weight: 700; letter-spacing: .03em; color: var(--text-2); margin: 0 0 var(--sp-1) !important; }
.spc-summary { font-size: var(--fs-lead); line-height: 1.45 !important; color: var(--text); }
.spc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; margin: var(--sp-2) 0 var(--sp-3); }
.spc-facts > div { padding: 7px 10px; border-radius: 8px; background: var(--card-2); border-top: 2px solid var(--line); }
.spc-facts span { display: block; font-size: var(--fs-note); color: var(--muted); }
.spc-facts b { font-size: var(--fs-body); font-weight: 700; }
.spc-facts .tor { border-top-color: #e5484d; } .spc-facts .hail { border-top-color: #4cc2ff; } .spc-facts .wind { border-top-color: #f5a524; }
.spc-tor { color: #ff8589; } .spc-hail { color: #7fd4ff; } .spc-wind { color: #ffc266; }
.spc-num { font-weight: 700; color: var(--text); }
.spc-map { margin: 0; }
.spc-map img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
.spc-maptabs { display: flex; gap: 4px; margin-top: 6px; }
.spc-maptabs button { flex: 1; padding: 5px 4px; font: inherit; font-size: var(--fs-small); color: var(--text-2); background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.spc-maptabs button.on { color: var(--text); border-color: var(--accent); }
.spc-secs { columns: 2; column-gap: var(--sp-4); }
.spc-sec { break-inside: avoid; padding: var(--sp-3); margin-bottom: var(--sp-3); border-radius: 10px; background: var(--card-2); border-left: 3px solid var(--line); }
.spc-sec.mine { border-left-color: var(--accent); }
.spc-sec h4 { display: flex; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-1); font-size: var(--fs-body); }
.spc-sec h4 em { flex: none; font-style: normal; font-size: var(--fs-note); font-weight: 600; color: var(--accent); }
.spc-sec p:last-child { margin-bottom: 0; }
.spc-earlier { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.spc-earlier::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.spc-md { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--sp-4); align-items: start; margin: 0 0 var(--sp-4); padding: 0 0 var(--sp-4); border-bottom: 1px solid var(--line); }
.spc-md.mine { padding: var(--sp-3); border: 1px solid var(--accent); border-radius: 10px; }
.spc-mdmap { position: sticky; top: 70px; }
.spc-mdmap img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
.spc-mdtext h4 { margin: 0; font-size: var(--fs-lead); }
.spc-md .spc-sec h4 { font-size: var(--fs-body); }
.spc-about { color: var(--text-2); margin-bottom: var(--sp-2) !important; }
.spc-watch { display: grid; grid-template-columns: auto auto 1fr; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }
.spc-watch span { font-size: var(--fs-small); color: var(--muted); }
.spc-watch b { font-size: 1.3rem; }
.spc-watch i { height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; }
.spc-watch u { display: block; height: 100%; background: #e8912c; }
@media (max-width: 900px) { .spc-hero, .spc-md { grid-template-columns: minmax(0, 1fr); } .spc-secs { columns: 1; } .spc-mdmap { position: static; } }
@media (max-width: 640px) { .spc-tabs { display: flex; overflow-x: auto; margin-inline: -2px; padding-bottom: 4px; } .spc-tabs button { flex: none; min-width: 112px; } }
.spc-secs.one { columns: 1; }

.alert-where { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 4px 0; font-size: var(--fs-small); color: var(--text-2); }
.alert-where b { color: var(--text); font-weight: 700; }
.alert-around { margin-top: var(--sp-3); }
.alert-around h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.alert-around > div { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) auto; gap: var(--sp-3); padding: 7px 10px; margin-bottom: 4px; border-radius: 8px; background: var(--card-2); border-left: 3px solid var(--line); font-size: var(--fs-small); }
.alert-around > div.urgent { border-left-color: #e8912c; }
.alert-around small { color: var(--muted); font-size: var(--fs-note); }
@media (max-width: 640px) { .alert-around > div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* What forecasters say: their points, then the three graphics in one row */
.fb-wrap { display: block; }
.fb-local { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--sp-2); margin: var(--sp-3) 0; font-size: var(--fs-text2); }
.fb-local > span { font-size: var(--fs-small); color: var(--muted); }
.fb-local ul { margin: 0; padding-left: 1.1rem; }
.fb-pics { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-bottom: var(--sp-2); }
#forecastBrief > p { margin: 0; }
@media (max-width: 640px) { .fb-local { grid-template-columns: minmax(0, 1fr); gap: 2px; } .fb-pics { grid-template-columns: minmax(0, 1fr); } }

.spc-sec { display: flow-root; }

/* Region cards: a dark map strip with the real risk areas, title laid over it */
.spc-sec.has-map { padding: 0; overflow: hidden; }
.spc-strip { position: relative; height: 138px; background: #0a1322; }
.spc-us { display: block; width: 100%; height: 100%; }
.spc-us path { vector-effect: non-scaling-stroke; }
.spc-us .us-base { fill: #1a2740; }
.spc-us .us-risk { fill-rule: evenodd; fill-opacity: .82; }
.spc-us .us-lines { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: .75; }
.spc-us .us-main { fill: none; stroke: #fff; stroke-width: 1.4; }
.spc-us text { fill: #fff; stroke: #0a1322; paint-order: stroke; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.spc-us .us-ring { fill: none; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spc-us .us-home { fill: #fff; }
.spc-over { position: absolute; inset: 0 45% 0 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 3px; padding: var(--sp-3); background: linear-gradient(90deg, rgba(10, 19, 34, .94) 55%, rgba(10, 19, 34, 0)); pointer-events: none; }
.spc-over h4 { margin: 0; font-size: var(--fs-body); line-height: 1.25; color: #fff; }
.spc-over em { font-style: normal; font-size: var(--fs-note); font-weight: 700; color: #8fc1ff; }
.spc-key { display: flex; flex-wrap: wrap; gap: 1px 9px; font-size: var(--fs-note); color: #d5deea; }
.spc-key i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 2px; }
.spc-sectext { padding: var(--sp-3); }
.spc-sectext p:last-child { margin-bottom: 0; }
.spc-sec.has-map.mine { box-shadow: 0 0 0 1px var(--accent); border-left: 0; }
.spc-sec.has-map { border-left: 0; }
@media (max-width: 640px) { .spc-strip { height: 150px; } .spc-over { right: 38%; } }

/* Top of Warnings & storms: one board with a real photo, then the facts in a row */
.hz-answer.hz-board { display: block; padding: 0; overflow: hidden; border: 1px solid var(--line); border-top: 4px solid var(--answer, var(--muted)); background: var(--card); column-span: all; margin-bottom: var(--sp-3); }
.hzb-hero { --photo: url("https://commons.wikimedia.org/wiki/Special:FilePath/Sky_Clouds_and_Atmosphere.jpg?width=1800"); position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); min-height: 170px; padding: var(--sp-5) var(--sp-6); background: linear-gradient(90deg, rgba(6, 12, 24, .8), rgba(6, 12, 24, .18) 58%, rgba(6, 12, 24, .42)), var(--photo) center var(--photo-y, 45%) / cover no-repeat, #2b3647; color: #fff; }
.hz-watch .hzb-hero, .hz-risk .hzb-hero { --photo-y: 84%; --photo: url("https://commons.wikimedia.org/wiki/Special:FilePath/Wallcloud_mit_Tailcloud_im_westlichen_Oklahoma_II.jpg?width=1800"); }
.hz-act .hzb-hero { --photo: url("https://commons.wikimedia.org/wiki/Special:FilePath/Circular_base_of_a_rotating_wall_cloud_-_NOAA.jpg?width=1800"); }
.hz-board .hz-a-when { font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--answer, #fff); filter: brightness(1.35); }
.hz-board .hz-a-title { font-size: var(--fs-huge); line-height: 1.12; color: #fff; text-shadow: 0 1px 8px rgba(5, 8, 30, .8); }
.hz-board .hz-a-sub { color: #e6ecf5; }
.hz-board .hz-a-do { flex: none; width: min(300px, 34%); padding: var(--sp-3) var(--sp-4); border: 0; border-radius: 10px; background: rgba(6, 12, 24, .62); color: #fff; backdrop-filter: blur(4px); }
.hz-board .hz-a-do span { color: #cdd8e6; }
.hz-board .hz-gauge { margin: 0; padding: var(--sp-3) var(--sp-5) 0; }
.hzb-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); }
.hz-gauge + .hzb-tiles { margin-top: var(--sp-3); }
.hzb-tile { display: grid; gap: 2px; align-content: start; padding: var(--sp-3) var(--sp-4); background: var(--card); border-top: 3px solid transparent; }
.hzb-tile span { font-size: var(--fs-small); color: var(--muted); }
.hzb-tile b { font-size: var(--fs-lead); font-weight: 700; }
.hzb-tile b:empty { display: none; }
.hzb-tile small { font-size: var(--fs-small); line-height: 1.35; color: var(--text-2); }
.hzb-tile.say small { color: var(--text); font-size: var(--fs-text2); }
.hzb-tile.tor { border-top-color: #e5484d; } .hzb-tile.hail { border-top-color: #4cc2ff; } .hzb-tile.wind { border-top-color: #f5a524; }
.hz-why { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--muted); }
.hz-why[hidden] { display: none; }
.hz-why strong { font-weight: 600; }
.alert-watch { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-4); align-items: start; }
.alert-watch img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
@media (max-width: 640px) {
  .hzb-hero { flex-direction: column; align-items: stretch; gap: var(--sp-3); padding: var(--sp-4); }
  .hz-board .hz-a-do { width: auto; }
  .hz-board .hz-a-title { font-size: var(--fs-lead); }
  .alert-watch { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) { .hzb-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Gulf moisture: the real map from the water to here */
.gulf-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--sp-5); align-items: stretch; }
.gulf-map { position: relative; margin: 0; width: 100%; min-height: 270px; border-radius: 10px; overflow: hidden; background: #0d2c49; }
.gulf-geo { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs-sea { fill: #0f3556; }
.gs-land { fill: #1c2a3f; }
.gs-us { stroke: rgba(255, 255, 255, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gs-glow, .gs-run, .gs-wind { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gs-glow { stroke: #4cc2ff; stroke-width: 9; opacity: .16; }
.gs-run { stroke: #7fd4ff; stroke-width: 2.5; stroke-dasharray: 9 11; }
.gulf-geo.on .gs-run { animation: gs-flow var(--run, 3s) linear infinite; }
.gulf-geo.off .gs-glow { opacity: .05; } .gulf-geo.off .gs-run { opacity: .25; stroke-dasharray: 2 12; }
.gs-wind { stroke: #e0b870; stroke-width: 3; stroke-dasharray: 9 11; animation: gs-flow 3s linear infinite; }
.gs-wind.moist { stroke: #7fd4ff; }
@keyframes gs-flow { to { stroke-dashoffset: -40; } }
@media (prefers-reduced-motion: reduce) { .gs-run, .gs-wind { animation: none !important; } }
.gs-name { fill: #a9cbe4; font-style: italic; text-anchor: middle; }
.gs-ring { fill: rgba(255, 255, 255, .14); stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.gs-you { fill: #fff; }
.gulf-map figcaption { position: absolute; left: 12px; top: 12px; display: grid; padding: 8px 12px; border-radius: 8px; background: rgba(6, 12, 24, .7); color: #fff; }
.gulf-map figcaption b { font-size: 2.1rem; line-height: 1; }
.gulf-map figcaption span { font-size: var(--fs-small); }
.gulf-map figcaption small { font-size: var(--fs-note); color: #cdd8e6; }
.gulf-read { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.gulf-read > strong { font-size: var(--fs-lead); }
.gulf-read > span { font-size: var(--fs-small); color: var(--text-2); }
/* The storm recipe: a score, then a real photo for each ingredient */
.rc-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: center; margin-bottom: var(--sp-4); }
.rc-score { display: grid; justify-items: center; width: 118px; padding: var(--sp-2) 0; border-radius: 10px; background: var(--card-2); border-top: 3px solid var(--muted); }
.rc-score.warm { border-top-color: #f5a524; } .rc-score.hot { border-top-color: #e5484d; }
.rc-score b { font-size: 2.6rem; line-height: 1; }
.rc-score span { font-size: var(--fs-small); }
.rc-score small { font-size: var(--fs-note); color: var(--muted); }
.rc-verdict { font-size: var(--fs-lead); line-height: 1.4; }
.rc-verdict em { display: block; font-style: normal; color: var(--t-serious); }
.rc-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.rc-tile { overflow: hidden; border-radius: 10px; background: var(--card-2); }
.rc-pic { position: relative; height: 104px; background: var(--pic) center / cover no-repeat, #2b3647; }
.rc-tile.off .rc-pic { filter: grayscale(1) brightness(.55); }
.rc-pic i { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 4px; font-style: normal; font-size: var(--fs-note); font-weight: 700; color: #fff; background: rgba(6, 12, 24, .72); }
.rc-tile.on .rc-pic i { background: #b4322f; }
.rc-body { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.rc-body h4 { margin: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text-2); }
.rc-body b { font-size: var(--fs-lead); font-weight: 700; }
.rc-pips { display: flex; gap: 3px; margin: 2px 0; }
.rc-pips i { flex: 1; height: 5px; border-radius: 2px; background: var(--line); }
.rc-pips i.l0 { background: var(--muted); } .rc-pips i.l1 { background: #e3b008; } .rc-pips i.l2 { background: var(--moderate); } .rc-pips i.l3 { background: var(--extreme); }
.rc-body small { font-size: var(--fs-small); color: var(--text-2); }
@media (max-width: 900px) { .gulf-board { grid-template-columns: minmax(0, 1fr); } .rc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rc-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 640px) { .rc-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .rc-score { width: auto; grid-template-columns: auto auto auto; gap: 8px; align-items: baseline; justify-content: start; padding: var(--sp-2) var(--sp-3); } }

/* Weather balloon extras */
.ball-profile { cursor: ns-resize; touch-action: pan-y; }
.ball-prev { display: none; }
.ball-profile.with-prev .ball-prev { display: inline; }
.ball-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-small); color: var(--text-2); }
.ball-tools button { padding: 5px 12px; font: inherit; color: var(--text); background: var(--card-2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.ball-tools button:hover { border-color: var(--accent); }
.ball-tools span { color: var(--muted); font-size: var(--fs-note); }
.ball-change { margin: var(--sp-2) 0 0; font-size: var(--fs-text2); font-weight: 600; }
.ball-change:empty { display: none; }
#ballRing { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
#ballRing:empty { display: none; }
.ring-lead { margin: 0 0 var(--sp-3); font-size: var(--fs-text2); }
.ring-show { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--sp-3); }
.ring-map { width: 100%; height: 100%; min-height: 280px; border-radius: 10px; background: #0d1a2e; }
.ring-land { fill: #1c2a3f; stroke: rgba(255, 255, 255, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ring-wind { fill: none; stroke: #7fd4ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 11; vector-effect: non-scaling-stroke; animation: gs-flow 3s linear infinite; }
.ring-map text { fill: #fff; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: #0d1a2e; stroke-width: 3px; }
.ring-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.ring-card { display: grid; gap: 4px; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--card-2); border-top: 3px solid transparent; }
.ring-card.next { border-top-color: #f5a524; }
.ring-card > div:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; font-size: var(--fs-small); }
.ring-card em { font-style: normal; font-size: var(--fs-note); font-weight: 700; color: #f5a524; }
.ring-card small { font-size: var(--fs-note); color: var(--muted); }
.ring-mini { display: block; width: 100%; height: 84px; }
.ring-nums { display: flex; justify-content: space-between; gap: 6px; }
.ring-nums span { display: grid; font-size: var(--fs-note); color: var(--muted); }
.ring-nums b { font-size: var(--fs-text2); color: var(--text); }
@media (prefers-reduced-motion: reduce) { .ring-wind { animation: none; } }
@media (max-width: 900px) { .ring-show { grid-template-columns: minmax(0, 1fr); } .ring-map { height: 240px; min-height: 0; } .ring-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ball-guide { margin: var(--sp-3) 0; padding: var(--sp-3) var(--sp-4); border-radius: 10px; background: var(--card-2); }
.ball-guide h4 { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.ball-guide dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); margin: 0; }
.ball-guide dt { font-size: var(--fs-small); font-weight: 700; }
.ball-guide dd { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); }
.ball-guide dt i, .ring-how i { display: inline-block; width: 16px; height: 3px; margin-right: 6px; vertical-align: 3px; border-radius: 2px; }
.ball-guide i.t, .ring-how i.t { background: #ff7a59; } .ball-guide i.d, .ring-how i.d { background: #5fe39b; }
.ring-how { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--text-2); }
.ring-says { margin: 2px 0 0; font-size: var(--fs-small); line-height: 1.3; color: var(--text); }
.ring-mini { height: 96px; }
@media (max-width: 900px) { .ball-guide dl { grid-template-columns: minmax(0, 1fr); } }
.ball-show > .ball-more { grid-column: 1 / -1; }

.ring-says b { font-weight: 700; }
.ring-shapes { margin-top: var(--sp-4); }
.ring-shapes h4 { margin: 0 0 var(--sp-1); font-size: var(--fs-body); }
.ring-shapes > p { margin: 0 0 var(--sp-3); font-size: var(--fs-small); color: var(--text-2); }
.ring-shapes > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.ring-shapes article { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--card-2); }
.ring-shapes svg { width: 72px; height: 76px; }
.ring-shapes strong { display: block; font-size: var(--fs-small); }
.ring-shapes span { font-size: var(--fs-small); line-height: 1.4; color: var(--text-2); }
@media (max-width: 1100px) { .ring-shapes > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ring-shapes > div { grid-template-columns: minmax(0, 1fr); } }

/* The Weather page's alert: impossible to miss while a watch or warning is on */
.hz-answer.hz-alarm { position: relative; border: 0; border-radius: var(--radius); padding: var(--sp-4) var(--sp-5) var(--sp-4) calc(var(--sp-5) + 18px); overflow: hidden; }
.hz-alarm::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: repeating-linear-gradient(135deg, #14100a 0 10px, #ffd23f 10px 20px); }
.hz-alarm.hz-watch { background: linear-gradient(100deg, #ffb020, #f76707); color: #1c1003; box-shadow: 0 0 0 1px #ffb020, 0 6px 28px rgba(247, 103, 7, .4); }
.hz-alarm.hz-act { background: linear-gradient(100deg, #e02424, #8f1212); color: #fff; animation: hz-alarm 1.6s ease-in-out infinite; }
@keyframes hz-alarm { 0%, 100% { box-shadow: 0 0 0 2px #ff6b6b, 0 6px 24px rgba(224, 36, 36, .4); } 50% { box-shadow: 0 0 0 5px #ff6b6b, 0 6px 44px rgba(224, 36, 36, .8); } }
.hz-a-live { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.hz-a-live i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; animation: hz-beat 1.2s ease-in-out infinite; }
@keyframes hz-beat { 50% { opacity: .25; } }
.hz-alarm .hz-a-title { color: inherit; font-size: var(--fs-huge); font-weight: 800; line-height: 1.12; margin: 2px 0 6px; }
.hz-a-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hz-a-chips span { padding: 2px 9px; border-radius: 5px; font-size: var(--fs-small); font-weight: 700; color: #fff; background: rgba(20, 12, 4, .78); }
.hz-alarm .hz-a-sub { color: inherit; font-size: var(--fs-small); margin-top: 4px; }
.hz-alarm .hz-a-do { flex: none; width: min(320px, 32%); border: 0; padding: var(--sp-2) var(--sp-3); border-radius: 8px; color: #fff; background: rgba(20, 12, 4, .78); }
.hz-alarm .hz-a-do span { color: #ffd98a; }
.hz-alarm .hz-a-more { color: inherit; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .hz-alarm.hz-act, .hz-a-live i { animation: none; } .hz-alarm.hz-act { box-shadow: 0 0 0 4px #ff6b6b; } }
@media (max-width: 640px) { .hz-answer.hz-alarm { padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 16px); } .hz-alarm .hz-a-title { font-size: var(--fs-lead); } .hz-alarm .hz-a-do { width: auto; } }

/* The radar under the alert, while a storm watch or warning is on */
#radarCard.radar-up { grid-column: 1 / -1; order: 0; }
#radarCard.radar-up .radar-map { height: 480px; }
#radarCard.radar-up #cells { max-height: 320px; overflow-y: auto; }
@media (min-width: 1200px) {
  #radarCard.radar-up { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--sp-4); align-content: start; }
  #radarCard.radar-up > * { grid-column: 1; }
  #radarCard.radar-up > .card-head { grid-column: 1 / -1; min-height: 0; }
  #radarCard.radar-up > .card-head .seg { flex: 0 1 auto; }
  #radarCard.radar-up > #cells { grid-column: 2; grid-row: 2 / span 12; max-height: 640px; }
  .map-grid.radar-gone > #rainCard { grid-column: span 2; }
  .map-grid.radar-gone > #wxMapCard { grid-column: span 3; }
  .map-grid.radar-gone > #ev-sky { grid-column: 1 / -1; }
}
@media (max-width: 640px) { #radarCard.radar-up .radar-map { height: 340px; } }
#radarCard.radar-up #reports { max-height: 260px; overflow-y: auto; }
/* Phones: the soil planting labels wrap instead of being cut off, and every tab name in the bottom bar fits */
@media (max-width: 640px) {
  .soil-zones div { padding: var(--sp-1); }
  .soil-zones span { white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: .68rem; line-height: 1.15; }
  .bottom-nav button { font-size: .66rem; letter-spacing: -.02em; }
}
.alm-verse small { display: block; margin-top: 2px; font-style: normal; font-size: var(--fs-note); opacity: .8; }
.air-home.calm { padding: var(--sp-2) var(--sp-4); border-color: var(--line); background: var(--card); }
.air-home.calm > b { font-size: var(--fs-lead); color: var(--c); }
.air-home.calm span { flex-direction: row; flex-wrap: wrap; gap: 0 .6rem; align-items: baseline; }
.air-home { min-width: 0; }
.air-home.calm span { flex: 1 1 0; min-width: 0; }
.air-home > b { flex: none; white-space: nowrap; }   /* the AQI number never splits across lines */
@media (max-width: 640px) {
  .air-home { flex-wrap: wrap; } .air-home > i { margin-left: auto; }
  .air-home:not(.calm) span { flex: 1 1 0; }   /* the words take the row beside the number; the link drops below */
  .air-home:not(.calm) > i { flex-basis: 100%; text-align: right; }
}
.tm-warn { margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border-radius: 8px; background: var(--card-2); border-left: 3px solid var(--moderate); font-size: var(--fs-small); }
.dict-more summary { cursor: pointer; font-size: var(--fs-small); color: var(--link); margin-top: 2px; }
.dict-more[open] summary { margin-bottom: var(--sp-1); }
/* Fewer emoji: the at-a-glance tiles read by their words and numbers, with a thin colored edge instead of an icon */
.glance .g-ic { display: none; }
.glance { border-left: 3px solid var(--accent); }
.trace-guide { margin-top: var(--sp-3); }
.trace-guide summary { cursor: pointer; font-weight: 700; font-size: var(--fs-body); }
.trace-guide[open] summary { margin-bottom: var(--sp-2); }

/* ===== Forecast desk (desk.js) ===== */
.ch-intro { margin-top: 0; }
.ch-form { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); align-items: flex-end; padding: var(--sp-4); border-radius: 12px;
  background: linear-gradient(135deg, rgba(42, 120, 214, .16), rgba(236, 131, 90, .12)); border: 1px solid var(--line); }
.ch-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-small); font-weight: 700; }
.ch-form label span { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--muted); }
.ch-form input { width: 5.5em; font-size: 1.25rem; font-weight: 700; padding: 6px 8px; }
.ch-form button { font-weight: 700; }
.ch-form #chSaved { flex-basis: 100%; }
.ch-board { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: var(--sp-4); margin: var(--sp-4) 0; align-items: stretch; }
.ch-big { padding: var(--sp-4); border-radius: 12px; background: var(--card-2); display: flex; flex-direction: column; gap: 2px; }
.ch-big span { font-size: var(--fs-small); color: var(--muted); }
.ch-big strong { font-size: 2.6rem; line-height: 1.05; color: var(--accent); }
.ch-big small { color: var(--text-2); }
.ch-vs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.ch-vs div { position: relative; padding: var(--sp-2) var(--sp-3); border-radius: 10px; background: var(--card-2); overflow: hidden; }
.ch-vs b { display: block; font-size: 1.1rem; }
.ch-vs span { font-size: var(--fs-small); color: var(--text-2); }
.ch-vs i { position: absolute; left: 0; bottom: 0; height: 4px; background: #2f9e44; }
.ch-tip { padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--moderate); background: var(--card-2); border-radius: 0 10px 10px 0; }
.ch-who { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.ch-who strong { margin-right: var(--sp-2); }
.ch-name { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ch-name input { flex: 1; max-width: 16em; font-size: var(--fs-body); padding: 6px 8px; }
.ch-locked { margin: var(--sp-3) 0 0; font-size: var(--fs-text2); }
.ch-result { margin: var(--sp-4) 0; padding: var(--sp-4); border-radius: 12px; background: var(--card-2); }
.ch-result h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-title); }
.ch-miss { margin-left: 4px; font-weight: 600; color: var(--moderate); }
.ch-miss.ok { color: var(--good); }
.ch-miss.bad { color: var(--severe); }
.ch-table tr.ch-seen { font-weight: 700; }
.ch-table tr.ch-win th { color: var(--accent); }
.ch-table tr.ch-rival { color: var(--text-2); }
.ch-table tr.ch-me th { text-decoration: underline; text-underline-offset: 3px; }
.ch-table, .dm-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.ch-table th, .ch-table td, .dm-table th, .dm-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.dm-scroll { overflow-x: auto; }
.dm-table th i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }

.dm-say { margin-top: 0; }
.dm-chart .dm-line { transition: opacity .2s; }
.dm-chart .dm-line.dim { opacity: .12; }
.dm-keys { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }
.dm-key { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); }
.dm-key i { width: 12px; height: 12px; border-radius: 50%; }
.dm-key small { color: var(--muted); }
.dm-key.picked { outline: 2px solid var(--accent); }
.dm-board { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.dm-board li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-radius: 10px; background: var(--card-2); }
.dm-board li:first-child { box-shadow: inset 4px 0 0 #2f9e44; }
.dm-board i { width: 12px; height: 12px; border-radius: 50%; }
.dm-rank { font-weight: 800; color: var(--muted); width: 1.2em; }
.dm-miss { margin-left: auto; font-size: var(--fs-small); color: var(--text-2); }

.dk-map-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); align-items: start; }
.dk-map { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.dk-map.white { background: #fff; }
.dk-map img { display: block; width: 100%; height: auto; }
.dk-map-look h3 { margin: 0 0 4px; }
.dk-map-look ul { padding-left: 1.1em; margin: var(--sp-2) 0 0; }
.dk-map-look li { margin-bottom: var(--sp-2); line-height: 1.45; }
.dk-ing-seg { flex-wrap: wrap; }
.dk-sub { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dk-key { margin: 0; display: grid; gap: var(--sp-2); }
.dk-key dt { font-weight: 700; font-size: var(--fs-small); display: flex; align-items: center; gap: 8px; }
.dk-key dd { margin: 2px 0 0 36px; font-size: var(--fs-small); line-height: 1.45; color: var(--text-2); }
.dk-sw { flex: 0 0 28px; width: 28px; height: 18px; }
.dk-scale { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.dk-scale thead th { text-align: left; color: var(--muted); font-weight: 600; padding: 0 8px 4px 0; }
.dk-scale tbody th { text-align: left; white-space: nowrap; padding: 5px 12px 5px 0; vertical-align: top; }
.dk-scale td { padding: 5px 0; line-height: 1.4; color: var(--text-2); }
.dk-scale tbody tr { border-top: 1px solid var(--line); }
.dk-basics { margin-top: var(--sp-4); }
.dk-basics-barb { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; margin-bottom: var(--sp-3); }
.dk-basics-barb p { flex: 1 1 260px; margin: 0; line-height: 1.5; }
.dk-barbs { flex: 0 1 330px; width: 100%; max-width: 330px; height: auto; color: var(--text); }

.sk-pick { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.sk-pick .seg { margin-bottom: 0; }
.sk-said { margin-top: 0; }
.sk-wrap { display: flex; gap: var(--sp-4); align-items: flex-start; }
.sk-main { flex: 1 1 auto; min-width: 0; max-width: 720px; }
.sk-side { flex: 0 0 250px; }
.sk-side .subhead { margin-top: 0; }
.sk-chart, .sk-hodo { display: block; width: 100%; height: auto; background: #0d1a30; border-radius: 10px; }
.sk-hodo { max-width: 250px; }
.sk-bg { fill: #0d1a30; }
.sk-iso { stroke: #8fa0b8; stroke-opacity: .22; stroke-width: 1; }
.sk-iso.zero { stroke: #74c0fc; stroke-opacity: .55; stroke-dasharray: 4 3; }
.sk-dry { fill: none; stroke: #ff922b; stroke-opacity: .18; stroke-width: 1; }
.sk-wet { fill: none; stroke: #51cf66; stroke-opacity: .16; stroke-width: 1; }
.sk-mix { fill: none; stroke: #63e6be; stroke-opacity: .3; stroke-width: 1; stroke-dasharray: 2 4; }
.sk-bar { stroke: #c2ccda; stroke-opacity: .28; }
.sk-lab { font-size: 10px; fill: #c2ccda; }
.sk-z { fill: #8fa0b8; font-size: 9px; }
.sk-t { fill: none; stroke: #ff6b4a; stroke-width: 2.6; stroke-linejoin: round; }
.sk-d { fill: none; stroke: #5fe39b; stroke-width: 2.6; stroke-linejoin: round; }
.sk-parcel { fill: none; stroke: #f4f4f4; stroke-width: 1.6; stroke-dasharray: 6 4; }
.sk-cape { fill: rgba(255, 80, 80, .38); }
.sk-cin { fill: rgba(80, 150, 255, .38); }
.sk-mark { stroke-width: 2; }
.sk-mark.lcl { stroke: #e9ecef; } .sk-mark.lfc { stroke: #ffa8a8; } .sk-mark.el { stroke: #ffd43b; } .sk-mark.fz { stroke: #74c0fc; }
.sk-mlab { font-size: 10px; font-weight: 700; paint-order: stroke; stroke: #0d1a30; stroke-width: 3px; }
.sk-mlab.lcl { fill: #e9ecef; } .sk-mlab.lfc { fill: #ffa8a8; } .sk-mlab.el { fill: #ffd43b; } .sk-mlab.fz { fill: #74c0fc; }
.sk-barbs line, .sk-barbs polygon { stroke: #dee2e6; stroke-width: 1.4; }
.sk-flag { fill: #dee2e6; }
.sk-barb-calm { fill: none; stroke: #dee2e6; }
.sk-cursor { stroke: #fff; stroke-opacity: .6; stroke-dasharray: 3 3; pointer-events: none; }
.sk-ring { fill: none; stroke: #8fa0b8; stroke-opacity: .3; }
.sk-rm { fill: #fff; stroke: #0d1a30; stroke-width: 1.5; }
.sk-rmlab { font-weight: 700; fill: #fff; }
.sk-hkey { margin-top: var(--sp-2); }
.sk-read { margin-top: var(--sp-2); padding: 8px 12px; border-radius: 8px; background: var(--card-2); font-size: var(--fs-small); min-height: 2.6em; }
.sk-up { color: #e8590c; font-weight: 700; }
.sk-down { color: var(--accent); font-weight: 700; }
.sk-stats { margin-top: var(--sp-4); }
#skHit { cursor: crosshair; touch-action: pan-y; }

.dk-report { border: 1px solid var(--line); border-radius: 10px; margin-bottom: var(--sp-2); background: var(--card-2); }
.dk-report summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding: 8px 12px; cursor: pointer; }
.dk-report summary code, .dk-raw code { font-size: .92em; word-break: break-word; white-space: normal; }
.dk-tokens { margin: 0; padding: 4px 12px 12px; display: grid; gap: 4px; }
.dk-tokens div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; }
.dk-tokens dt code { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--card); border: 1px solid var(--line); font-weight: 700; word-break: break-all; }
.dk-tokens dd { margin: 0; font-size: var(--fs-small); color: var(--text-2); }
.dk-raw { padding: 8px 12px; border-radius: 8px; background: var(--card-2); }
.dk-taf { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.dk-taf li { border-left: 3px solid var(--accent); padding-left: var(--sp-3); }
.dk-taf h4 { margin: 0 0 4px; font-size: var(--fs-body); }
.dk-taf h4 code { font-size: .8em; color: var(--muted); font-weight: 400; }
.dk-taf .dk-tokens { padding-left: 0; }

@media (max-width: 860px) {
  .sk-wrap { flex-direction: column; }
  .sk-side { flex-basis: auto; width: 100%; }
  .sk-hodo { margin: 0 auto; }
  .dk-map-wrap, .ch-board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .dk-tokens div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ch-form input { width: 4.6em; }
}

/* Charts, maps and pictures inside a card stop at about 600px wide, so on a big screen each one fits
   on screen whole instead of growing with the card. Zero specificity, so a smaller cap set elsewhere still wins.
   Page banners sit outside cards and keep the full width. */
:where(.card, .now-card) :where(svg, canvas, img, video, iframe, .leaflet-container, .gulf-map):not(:where(.leaflet-container *, svg *)) { max-width: 600px; }
/* Wide screens only: on a phone the map and its notes stack (the 860px rule above), so this must not undo that */
@media (min-width: 861px) {
  .dk-map-wrap { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
  /* The key beside it is long, so the map stays in view while you read it */
  .dk-map { position: sticky; top: 72px; }
}
/* The ones that used to fill their card sit in its middle once they stop at 600px */
.chart, .history-chart, .mag-chart, .rain-chart, .sk-chart, .heat-week, .fl-rain, .land-cut, .wn-hours, .gulf-chart, .gulf-map,
.ball-profile, .balloon-chart, .ring-map, .radar-map, .env-map, .rf-img img, #airDots, #quakeDrum, #sunTrip { margin-inline: auto; }
/* A map's slider and color key keep to the map's width */
.radar-controls, .radar-legend { max-width: 600px; margin-inline: auto; }

/* Phone fixes for clipped and broken text (checked at 360-414px wide) */
@media (max-width: 640px) {
  /* Storm types table: each storm type becomes its own block, so "Multicell" isn't squeezed mid-word */
  .lc-modes thead { display: none; }
  .lc-modes, .lc-modes tbody, .lc-modes tr, .lc-modes th, .lc-modes td { display: block; }
  .lc-modes tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); }
  .lc-modes th, .lc-modes td { padding: 0; border: none; }
  .lc-modes th { font-weight: 700; }
  .lc-modes td:nth-of-type(1)::before { content: 'Wind shear: '; color: var(--muted); }
  .lc-modes td:nth-of-type(2)::before { content: 'Lasts: '; color: var(--muted); }
  /* Lake levels: four to a row, so names like Thunderbird fit whole */
  .drop-cols { grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); row-gap: var(--sp-3); }
  .drop-col span { overflow-wrap: normal; }
  /* Soil temperature zones: two rows of three, the zone the soil is in now outlined */
  .soil-mark { display: none; }
  .soil-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .soil-zones span { white-space: normal; }
  .soil-zones .here { box-shadow: inset 0 0 0 3px #10151f; }
  .soil-zones em { font-style: normal; font-weight: 700; }
}
.soil-zones em { display: none; }
@media (max-width: 640px) { .soil-zones .here em { display: block; } }
/* Small day labels under charts stay on one line */
.tl-rain span { white-space: nowrap; left: -6px; right: -6px; }
.solar-days-chart > div > span { white-space: nowrap; left: 50%; right: auto; transform: translateX(-50%); }
.msg-days span { white-space: nowrap; }
.msg-days span:last-child { transform: translateX(-100%); }
/* Almanack week table: "Today" fits its narrow phone column on one line */
@media (max-width: 640px) { .alm-table > b { font-size: .62rem; white-space: nowrap; } }
/* Site index: shallower indents on phones, so deep entries keep room for long words like Evapotranspiration */
@media (max-width: 640px) { .ix-list .ix-list { margin-left: .35rem; padding-left: var(--sp-2); } }
/* Index links size to their whole words ("anywhere" let the browser shrink them and split "Radar" as Rada-r) */
.ix-list .linklike { overflow-wrap: break-word; }
.ix-line > .linklike { min-width: min-content; }

/* How you'll feel: the owner's 3-day outlook on the Weather page. Plain: one card, three columns split by thin lines,
   a colored dot and word for the verdict, the reasons, and one thing to do */
.body-cast { grid-column: 1 / -1; min-width: 0; padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.body-cast[hidden] { display: none; }
.bc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); margin-bottom: var(--sp-2); }
.bc-head h2 { margin: 0; font-size: var(--fs-body); }
.bc-head span { font-size: var(--fs-small); color: var(--text-2); }
.bc-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bc-day { --t: #2fb171; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: var(--sp-1) var(--sp-4); border: 0; border-left: 1px solid var(--line);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.bc-day:first-child { border-left: 0; padding-left: 0; }
.bc-day:hover b, .bc-day:focus-visible b { text-decoration: underline; }
.bc-care { --t: #e9a91c; } .bc-rough { --t: #e5484d; }
.bc-day small { font-size: var(--fs-note); color: var(--muted); }
.bc-day b { display: flex; align-items: center; gap: 6px; font-size: var(--fs-body); }
.bc-day b::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--t); }
.bc-day > span { font-size: var(--fs-small); color: var(--text-2); }
.bc-day > .bc-say { color: var(--muted); }
@media (max-width: 640px) {
  .body-cast { padding: var(--sp-3) var(--sp-4); }
  .bc-days { grid-template-columns: minmax(0, 1fr); }
  .bc-day, .bc-day:first-child { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) 0; border-left: 0; border-top: 1px solid var(--line); }
  .bc-day small { grid-column: 1; grid-row: 1; }
  .bc-day b { grid-column: 1; grid-row: 2; }
  .bc-day > span { grid-column: 2; grid-row: 1; }
  .bc-day > .bc-say { grid-row: 2; }
}

/* What sets you off: one line per possible trigger, its verdict on the right */
.ar-why { list-style: none; margin: 0 0 var(--sp-2); padding: 0; max-width: 52rem; }
.ar-why li { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.ar-why span { color: var(--text-2); }
.ar-why em { font-style: normal; font-weight: 600; white-space: nowrap; color: var(--muted); }
.ar-why-linked em { color: var(--t-serious); } .ar-why-maybe em { color: var(--t-warn); } .ar-why-none em { color: var(--good); }
@media (max-width: 640px) {
  .ar-why li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; }
  .ar-why span { grid-column: 1 / -1; grid-row: 2; }
}
/* What sets you off, as tiles (triggerReport in extras.js): dots until a side has 3 days, then a bar of how often */
.trg-grid, .trg-key { --hit: var(--t-serious); }
.trg-grid { list-style: none; margin: var(--sp-2) 0; padding: 0; max-width: 52rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--sp-2); }
.trg { --tone: var(--muted); position: relative; display: flex; flex-direction: column; gap: 0.5rem; padding: var(--sp-3); background: var(--card-2); border-radius: 10px; border-top: 3px solid var(--tone); }
.trg-linked { --tone: var(--t-serious); } .trg-maybe { --tone: var(--t-warn); } .trg-none { --tone: var(--good); } .trg-wait { --tone: var(--line); }
.trg-top { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-small); }
.trg-ic { font-size: 1.25rem; line-height: 1; }
.trg-top b { flex: 1; min-width: 0; }
.trg-top em { font-style: normal; font-weight: 600; font-size: var(--fs-note); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--tone); color: var(--text-2); white-space: nowrap; }
.trg-linked .trg-top em, .trg-maybe .trg-top em, .trg-none .trg-top em { background: var(--tone); border-color: var(--tone); color: var(--card); }
.trg-side { display: grid; grid-template-columns: 4rem minmax(0, 1fr) 4.5rem; align-items: center; gap: 0.5rem; font-size: var(--fs-note); color: var(--text-2); }
.trg-side small { text-align: right; color: var(--muted); font-size: var(--fs-note); }
.trg-dots { display: flex; gap: 6px; }
.trg-dots i, .trg-key i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px dashed var(--muted); box-sizing: border-box; }
.trg-dots i.ok, .trg-key i.ok { border: 0; background: var(--text-2); opacity: .45; }
.trg-dots i.hit, .trg-key i.hit { border: 0; background: var(--hit); }
.trg-bar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.trg-bar i { display: block; height: 100%; background: var(--hit); border-radius: 4px; }
.trg-progress { display: flex; align-items: center; gap: 0.75rem; margin: var(--sp-2) 0 0; }
.trg-steps { display: flex; gap: 3px; }
.trg-steps i { width: 22px; height: 6px; border-radius: 2px; background: var(--line); }
.trg-steps i.on { background: var(--accent); }
.trg-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0 0 var(--sp-2); }
.trg-key span { display: inline-flex; align-items: center; gap: 0.25rem; }
.trg-key i { width: 10px; height: 10px; }

/* Migraine: its own toggle on the check-in, and a switch on "What sets you off" */
.ar-feel .ar-mig { margin-left: var(--sp-2); }
.ar-feel .ar-mig[aria-pressed="true"] { background: #8b4fc7; border-color: #8b4fc7; color: #fff; }
.ar-why-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); max-width: 52rem; }
.ar-why-head .subhead { margin: 0; }
@media (max-width: 640px) { .ar-feel .ar-mig { margin-left: 0; } }

/* ---------- Get the app + iPhone polish ---------- */
.install-steps { margin: .4rem 0 0; padding-left: 1.3rem; line-height: 1.6; }
.public-note .pn-install { display: block; margin-bottom: .35rem; color: var(--text); }
.public-note .pn-install .linklike { margin-left: .4rem; }
/* Stop iPhone enlarging text when the phone is turned sideways */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Keep content clear of the notch when an iPhone is turned sideways */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* 16px text boxes on touch screens: anything smaller makes iPhone zoom in while typing */
@media (pointer: coarse) {
  input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea { font-size: max(16px, 1em); }
}
/* Opened from the home screen: no grey flash on tap, no rubber-band pull past the page */
@media (display-mode: standalone) {
  body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
}