/* ============================================================
   EarthDetect — "Seismograph Almanac"
   Palette  : paper #F2F0EB · charcoal #1C1B19 · slate #3F4A52
              crimson #C0392B (quakes) · amber #E0A200 (warnings)
              ocean #2F5F6A (temperature)
   Type     : Archivo (display, condensed weights) · system body
              · ui-monospace for all data figures
   Signature: a live seismograph baseline rule that runs under the
              masthead and ticks where the day's largest quake landed.
   ============================================================ */

:root{
  --paper:#F2F0EB;
  --paper-2:#FBFAF7;
  --ink:#1C1B19;
  --slate:#3F4A52;
  --muted:#6B6B64;
  --line:#1C1B19;
  --line-soft:#D6D3CA;
  --grid:#E4E1D8;
  --crimson:#C0392B;
  --crimson-deep:#8E2A20;
  --amber:#E0A200;
  --ocean:#2F5F6A;
  --shadow: none;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --disp: "Archivo", system-ui, sans-serif;
  --narrow: "Archivo Narrow", "Archivo", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; }

html,body{ margin:0; }

body{
  background:var(--paper);
  /* faint engineering grid behind everything */
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  color:var(--ink);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--ocean); text-underline-offset:3px; text-decoration-thickness:1px; }

.wrap{
  width:min(1340px, 100%);
  margin:0 auto;
  background:var(--paper);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
}

/* ---------- MASTHEAD ---------- */
.masthead{
  border-bottom:2px solid var(--line);
  padding:18px clamp(20px,3.2vw,40px) 0;
}
.masthead-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:12px;
}
.logo-mark{
  width:34px;height:34px;
  border:2px solid var(--ink);
  display:grid;place-items:center;
  flex:0 0 auto;
  align-self:center;
}
.logo-mark svg{ display:block; }
.wordmark{
  font-family:var(--disp);
  font-weight:800;
  font-size:clamp(2.1rem, 5.4vw, 3.4rem);
  letter-spacing:-0.04em;
  line-height:0.9;
  text-transform:uppercase;
}
.wordmark .detect{ color:var(--crimson); }
.tagline{
  font-family:var(--narrow);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:0.7rem;
  color:var(--muted);
  margin-top:6px;
}
.issue-meta{
  text-align:right;
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--slate);
  line-height:1.7;
  border-left:1px solid var(--line-soft);
  padding-left:14px;
}
.issue-meta .big{
  font-family:var(--disp);
  font-weight:700;
  font-size:0.95rem;
  letter-spacing:0.02em;
  color:var(--ink);
  display:block;
}
.live-dot{
  display:inline-block;width:7px;height:7px;background:var(--crimson);
  margin-right:5px;border-radius:50%;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

/* ---------- SEISMOGRAPH BASELINE (signature) ---------- */
.seismo{
  margin-top:16px;
  height:46px;
  border-top:1px solid var(--line-soft);
  position:relative;
  overflow:hidden;
}
.seismo svg{ display:block; width:100%; height:100%; }
.seismo .trace{
  fill:none;
  stroke:var(--crimson);
  stroke-width:1.4;
  stroke-linejoin:round;
}
.seismo .baseline{ stroke:var(--line-soft); stroke-width:1; }
.seismo-label{
  position:absolute; bottom:4px; right:8px;
  font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted);
  background:var(--paper); padding:0 4px;
}

/* ---------- CATEGORY NAV ---------- */
nav.catnav{
  display:flex; align-items:stretch;
  border-bottom:2px solid var(--line);
  background:var(--ink);
  position:sticky; top:0; z-index:20;
}
.catnav-label{
  font-family:var(--narrow);
  text-transform:uppercase; letter-spacing:0.16em;
  font-size:0.66rem; color:#8C8980;
  display:flex; align-items:center; padding:0 16px;
  border-right:1px solid #34322E; white-space:nowrap;
}
.catnav-links{ display:flex; flex:1; }
.catnav-link{
  display:flex; align-items:center; gap:8px;
  font-family:var(--disp); font-weight:700;
  font-size:0.82rem; letter-spacing:0.01em;
  text-transform:uppercase; text-decoration:none;
  color:#B9B6AC;
  padding:13px 18px; border-right:1px solid #34322E;
  transition:background .12s ease, color .12s ease;
}
.catnav-link:hover{ background:#2A2824; color:var(--paper); }
.catnav-link.is-active{ background:var(--paper); color:var(--ink); }
.catnav-link.is-active:hover{ background:var(--paper); color:var(--ink); }
.catnav-home{
  display:flex; align-items:center;
  font-family:var(--disp); font-weight:800;
  font-size:0.74rem; letter-spacing:0.1em;
  text-transform:uppercase; text-decoration:none;
  color:#8C8980; padding:0 16px;
  border-right:1px solid #34322E; white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.catnav-home:hover{ background:#2A2824; color:var(--paper); }
.catnav-home.is-active{ background:var(--crimson); color:#fff; }
.catnav-live{
  display:flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:0.68rem; color:#8C8980;
  padding:0 16px; white-space:nowrap;
}
.dot{ width:8px; height:8px; display:inline-block; border-radius:50%; flex:0 0 auto; }
.dot-seismic{ background:var(--crimson); }
.dot-atmos{ background:var(--ocean); }
.dot-volcanic{ background:var(--amber); }

/* ---------- CATEGORY DIVIDER ---------- */
.cat-divider{
  display:flex; align-items:center; gap:14px;
  padding:34px clamp(20px,3.2vw,40px) 6px;
  scroll-margin-top:54px;
}
.cat-divider-label{
  display:flex; align-items:center; gap:10px;
  font-family:var(--disp); font-weight:800;
  text-transform:uppercase; letter-spacing:0.03em;
  font-size:1.22rem; color:var(--ink);
}
.cat-divider-rule{ flex:1; height:2px; background:var(--line); }

/* ---------- IN-CARD CONTROLS ---------- */
.card-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.mag-filter{ display:flex; align-items:center; gap:7px; }
.mag-filter label{
  font-family:var(--narrow); text-transform:uppercase;
  letter-spacing:0.12em; font-size:0.62rem; color:var(--muted);
}
.mag-filter select{
  appearance:none;
  background:var(--paper-2); color:var(--ink);
  border:1px solid var(--line); border-radius:2px;
  font-family:var(--mono); font-size:0.74rem;
  padding:5px 24px 5px 8px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 12px) center, calc(100% - 8px) center;
  background-size:4px 4px,4px 4px; background-repeat:no-repeat;
}
.mag-filter select:focus-visible{ outline:2px solid var(--ocean); outline-offset:1px; }

/* ---------- DATELINE STRIP ---------- */
.dateline{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:9px clamp(20px,3.2vw,40px);
  border-bottom:1px solid var(--line);
  font-family:var(--mono);
  font-size:0.72rem;
  color:var(--slate);
  background:var(--paper-2);
}
.dateline strong{ color:var(--ink); font-weight:700; }
.dateline .sep{ color:var(--line-soft); }
.chip{
  font-family:var(--narrow);
  text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.62rem; font-weight:700;
  padding:2px 7px; border:1px solid var(--line);
  border-radius:2px;
}
.chip.amber{ background:var(--amber); color:#3a2c00; border-color:var(--amber); }

/* ---------- SECTION SCAFFOLD ---------- */
.pad{ padding:clamp(20px,3.2vw,40px); }
.section-tight{ padding-top:0; }

.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; margin-bottom:14px; flex-wrap:wrap;
}
.kicker{
  font-family:var(--narrow);
  text-transform:uppercase; letter-spacing:0.16em;
  font-size:0.66rem; color:var(--muted); font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.kicker::before{
  content:""; width:18px; height:2px; background:var(--crimson);
  display:inline-block;
}
.kicker.ocean::before{ background:var(--ocean); }
.kicker.amber::before{ background:var(--amber); }

/* source badges — distinguish live vs sample data */
.badge-live,
.badge-placeholder{
  font-family:var(--mono);
  font-size:0.58rem;
  letter-spacing:0.06em;
  padding:1px 6px;
  border-radius:2px;
  text-transform:none;
  margin-left:2px;
}
.badge-live{
  background:var(--crimson); color:#fff;
}
.badge-placeholder{
  background:transparent; color:var(--muted);
  border:1px solid var(--line-soft);
}

/* loading state: dim the live panels while fetching */
.is-loading .chart-grid,
.is-loading .ledger,
.is-loading #regionBody,
.is-loading #largestBody{
  opacity:0.45;
  transition:opacity .15s ease;
}
.seg-btn:disabled,
.mag-filter select:disabled{ cursor:wait; opacity:0.7; }
h2.section-title{
  font-family:var(--disp);
  font-weight:800;
  font-size:clamp(1.15rem,2.6vw,1.55rem);
  letter-spacing:-0.025em;
  margin:2px 0 0;
  text-transform:uppercase;
}
.section-note{
  font-family:var(--mono);
  font-size:0.72rem; color:var(--muted);
  text-align:right;
}

/* ---------- STAT LEDGER ---------- */
.ledger{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.stat{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:16px 16px 18px;
  position:relative;
  background:var(--paper-2);
  min-height:128px;
  display:flex; flex-direction:column; justify-content:space-between;
}
.stat .stat-label{
  font-family:var(--narrow);
  text-transform:uppercase; letter-spacing:0.12em;
  font-size:0.66rem; font-weight:700; color:var(--muted);
}
.stat .stat-value{
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(2.1rem,5vw,2.9rem);
  line-height:0.95;
  letter-spacing:-0.03em;
  color:var(--ink);
}
.stat .stat-foot{
  font-size:0.74rem; color:var(--slate);
  display:flex; align-items:center; gap:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stat.crimson .stat-value{ color:var(--crimson); }
.delta{
  font-family:var(--mono); font-weight:600;
  font-size:0.72rem; padding:1px 5px; border-radius:2px;
  border:1px solid currentColor;
}
.delta.up{ color:var(--crimson-deep); }
.delta.down{ color:var(--ocean); }
.delta.flat{ color:var(--muted); }
/* corner tick */
.stat::after{
  content:""; position:absolute; top:0; left:0;
  width:8px; height:8px;
  border-top:2px solid transparent; border-left:2px solid transparent;
}
.stat.crimson::after{ border-top-color:var(--crimson); border-left-color:var(--crimson); }

/* ---------- CHART GRID ---------- */
.chart-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-left:1px solid var(--line);
  border-top:1px solid var(--line);
}
.panel{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:20px clamp(18px,2.4vw,26px) 22px;
  background:var(--paper-2);
}
.panel.wide{ grid-column:1 / -1; }
.panel-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:14px;
}
.panel-head h3{
  font-family:var(--disp); font-weight:700;
  font-size:1.02rem; letter-spacing:-0.01em; margin:0;
  text-transform:uppercase;
}
.panel-head .unit{
  font-family:var(--mono); font-size:0.68rem; color:var(--muted);
}
.chart-wrap{ height:280px; position:relative; }
.panel.wide .chart-wrap{ height:300px; }
.chart-wrap-temp{ height:300px; }

/* ---------- HOMEPAGE HERO ---------- */
.hero{
  padding:clamp(40px,6vw,80px) clamp(20px,3.2vw,40px) clamp(30px,4vw,52px);
  border-bottom:2px solid var(--line);
}
.hero-eyebrow{
  font-family:var(--narrow); text-transform:uppercase;
  letter-spacing:0.18em; font-size:0.72rem; font-weight:700;
  color:var(--crimson); margin:0 0 16px;
}
.hero-line{
  font-family:var(--disp); font-weight:900;
  font-size:clamp(2.8rem,7vw,5.2rem); line-height:0.93;
  letter-spacing:-0.04em; margin:0 0 20px; color:var(--ink);
}
.hero-context{
  font-family:var(--mono); font-size:clamp(0.82rem,1.2vw,0.94rem);
  color:var(--muted); margin:0; min-height:1.4em;
}

/* ---------- SNAPSHOT GRID — 3 columns ---------- */
.snapshot{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border-top:1px solid var(--line);
}
.snapshot-3col{
  grid-template-columns:repeat(3,1fr);
}
/* Nth-child rules reset for both 2-col and 3-col */
.snapshot-3col .snap-card{ border-right:1px solid var(--line); }
.snapshot-3col .snap-card:nth-child(3n){ border-right:0; }
.snapshot-3col .snap-card:nth-child(2n){ border-right:1px solid var(--line); }
/* Last card if 5 in 3-col: spans to fill */
.snapshot-3col .snap-card:last-child:nth-child(3n+2){
  grid-column:span 2; border-right:0;
}
.snapshot-3col .snap-card:last-child:nth-child(3n+1){
  grid-column:span 3; border-right:0;
}

.snap-card{
  display:flex; flex-direction:column;
  padding:24px clamp(18px,2.4vw,28px) 26px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper-2);
  text-decoration:none; color:inherit;
  transition:background .14s ease;
  min-height:360px;
}
.snap-card:nth-child(2n){ border-right:0; }
.snap-card:hover{ background:#FDFCF9; }
.snap-card-wide{ grid-column:1 / -1; border-right:0; min-height:auto; }
.snap-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px;
}
.snap-cat{
  display:flex; align-items:center; gap:8px;
  font-family:var(--disp); font-weight:800;
  text-transform:uppercase; letter-spacing:0.04em;
  font-size:0.9rem; color:var(--ink);
}
.snap-go{
  font-family:var(--narrow); text-transform:uppercase;
  letter-spacing:0.1em; font-size:0.64rem; font-weight:700;
  color:var(--muted); opacity:0;
  transition:opacity .14s ease, color .14s ease;
}
.snap-card:hover .snap-go{ opacity:1; color:var(--crimson); }
.snap-metric{
  display:flex; align-items:baseline; gap:12px;
  margin-bottom:4px; flex-wrap:wrap;
}
.snap-value{
  font-family:var(--mono); font-weight:600;
  font-size:clamp(2.6rem,4.8vw,3.8rem); line-height:0.88;
  letter-spacing:-0.04em; color:var(--ink);
}
.snap-status{
  font-family:var(--narrow); font-weight:700;
  text-transform:uppercase; letter-spacing:0.06em;
  font-size:0.78rem; padding:3px 9px; border-radius:2px;
  border:1px solid var(--line-soft); color:var(--slate);
  white-space:nowrap;
}
.snap-status.is-calm{ background:#E6EFE9; color:#1F6F43; border-color:#C9E0D2; }
.snap-status.is-elevated{ background:#FBF0D8; color:#8A6400; border-color:#EFDCA8; }
.snap-status.is-high{ background:#F6DAD5; color:#A8311F; border-color:#EBC0B8; }
.snap-unit{
  font-family:var(--mono); font-size:0.7rem; color:var(--muted);
  margin-bottom:16px;
}
.snap-chart{ height:160px; position:relative; margin-top:auto; }
.snap-foot{
  font-family:var(--mono); font-size:0.68rem; color:var(--slate);
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line-soft);
}
@media (max-width:900px){
  .snapshot-3col{ grid-template-columns:repeat(2,1fr); }
  .snapshot-3col .snap-card:nth-child(3n){ border-right:1px solid var(--line); }
  .snapshot-3col .snap-card:nth-child(2n){ border-right:0; }
  .snapshot-3col .snap-card:last-child:nth-child(3n+2){ grid-column:auto; border-right:0; }
  .snapshot-3col .snap-card:last-child:nth-child(3n+1){ grid-column:1/-1; }
}
@media (max-width:620px){
  .snapshot,.snapshot-3col{ grid-template-columns:1fr; }
  .snap-card,.snapshot-3col .snap-card{ border-right:0; min-height:auto; }
  .snap-chart{ height:130px; }
  .snap-value{ font-size:2.8rem; }
  .hero-line{ font-size:2.6rem; }
}

/* ---------- PAGE HERO (sub-pages) ---------- */
.page-hero{
  padding:clamp(30px,4.5vw,60px) clamp(20px,3.2vw,40px) clamp(22px,3vw,36px);
  border-bottom:2px solid var(--line);
}
.page-hero-eyebrow{
  font-family:var(--narrow); text-transform:uppercase;
  letter-spacing:0.18em; font-size:0.72rem; font-weight:700;
  color:var(--crimson); margin:0 0 12px;
}
.page-hero-line{
  font-family:var(--disp); font-weight:900;
  font-size:clamp(2rem,4.5vw,3.4rem); line-height:0.95;
  letter-spacing:-0.03em; margin:0 0 14px; color:var(--ink);
}
.page-hero-context{
  font-family:var(--body); font-size:clamp(0.92rem,1.4vw,1.06rem);
  line-height:1.6; color:var(--slate); margin:0; max-width:62ch;
}


/* legend row */
.legend{
  display:flex; gap:16px; margin-top:10px;
  font-family:var(--mono); font-size:0.68rem; color:var(--slate);
  flex-wrap:wrap;
}
.legend span{ display:flex; align-items:center; gap:6px; }
.legend i{ width:14px; height:3px; display:inline-block; }
.legend i.today{ background:var(--crimson); }
.legend i.prior{ background:var(--ocean); }
.legend i.dash{ background:repeating-linear-gradient(90deg,var(--muted) 0 4px,transparent 4px 7px); height:2px; }
.legend i.legend-ocean{ background:var(--ocean); }
.legend .legend-record{ color:var(--crimson); }
.legend i.legend-record-swatch{ background:var(--crimson); }
.temp-note{
  font-family:var(--mono); font-size:0.68rem; color:var(--muted);
  margin:8px 0 0;
}

/* plain-language headline read — the "what's happening" line */
.big-read{
  font-family:var(--body);
  font-size:0.98rem;
  line-height:1.45;
  color:var(--slate);
  margin:0 0 14px;
  padding:10px 14px;
  border-left:3px solid var(--ocean);
  background:var(--paper);
}
.big-read:empty{ display:none; }
.big-read strong{ color:var(--ink); font-weight:700; }

/* segmented timeframe toggle — connected square buttons */
.seg{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
}
.seg-btn{
  appearance:none;
  background:var(--paper-2);
  border:0;
  border-right:1px solid var(--line);
  color:var(--muted);
  font-family:var(--narrow);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.66rem;
  font-weight:700;
  padding:6px 11px;
  cursor:pointer;
  transition:background .12s ease, color .12s ease;
  white-space:nowrap;
}
.seg-btn:last-child{ border-right:0; }
.seg-btn:hover{ background:var(--soft, #EDEAE2); color:var(--ink); }
.seg-btn.is-on{ background:var(--ocean); color:#fff; }
.seg-btn.is-on:hover{ background:var(--ocean); color:#fff; }
.seg-btn:disabled{ cursor:wait; opacity:0.6; }
@media (max-width:520px){
  .seg-btn{ padding:6px 8px; font-size:0.6rem; letter-spacing:0.04em; }
}

/* ---------- TABLES ---------- */
.table-block{
  border-top:1px solid var(--line);
}
.table-wrap{ width:100%; overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:0.86rem; }
thead th{
  font-family:var(--narrow);
  text-transform:uppercase; letter-spacing:0.1em;
  font-size:0.64rem; font-weight:700; color:var(--paper);
  background:var(--ink);
  text-align:left; padding:9px 12px;
  border-right:1px solid #34322E;
  white-space:nowrap;
}
thead th:last-child{ border-right:0; }
thead th.num{ text-align:right; }
tbody td{
  padding:10px 12px;
  border-bottom:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
  vertical-align:middle;
}
tbody td:last-child{ border-right:0; }
tbody tr:nth-child(even){ background:var(--paper-2); }
tbody tr:hover{ background:#EDEAE2; }
td.num{ text-align:right; font-family:var(--mono); }
td.rank{ font-family:var(--mono); color:var(--muted); width:42px; }
td.place{ font-weight:600; }
td.place .sub{ display:block; font-weight:400; font-size:0.74rem; color:var(--muted); font-family:var(--mono); }
/* free-text status cell in the volcano table */
td.status-cell{ text-align:left; font-family:var(--body); }

/* magnitude tag — square, not pill */
.mag{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; padding:3px 8px;
  font-family:var(--mono); font-weight:600; font-size:0.82rem;
  border-radius:2px;
  background:#EDE6DE; color:var(--ink);
  border-left:3px solid var(--ocean);
}
.mag.m4{ border-left-color:var(--amber); background:#F7EFD6; }
.mag.m5{ border-left-color:var(--crimson); background:#F4DED9; color:var(--crimson-deep); }
.mag.m6{ background:var(--crimson); color:#fff; border-left-color:var(--crimson-deep); }

.caveat{
  font-family:var(--mono); font-size:0.7rem; color:var(--muted);
  padding:12px clamp(20px,3.2vw,40px); border-top:1px solid var(--line-soft);
  background:var(--paper-2);
}

/* ---------- FOOTER ---------- */
footer{
  border-top:2px solid var(--line);
  padding:18px clamp(20px,3.2vw,40px) 26px;
  background:var(--ink);
  color:#B9B6AC;
}
footer .foot-grid{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  align-items:flex-end;
}
footer .foot-mark{
  font-family:var(--disp); font-weight:800; text-transform:uppercase;
  letter-spacing:-0.03em; font-size:1.2rem; color:var(--paper);
}
footer .foot-mark .detect{ color:var(--crimson); }
footer p{ margin:6px 0 0; font-family:var(--mono); font-size:0.68rem; max-width:60ch; line-height:1.6; }
footer .sources{ font-family:var(--mono); font-size:0.68rem; text-align:right; line-height:1.8; }
footer .sources-title{ color:var(--paper); }
footer a{ color:#9FC0C8; }


.dot-air{   background:#2E8B57; }  /* forest green */
.dot-flood{ background:#1F6F8B; }  /* teal-blue */
.dot-space{ background:#6B4E8E; }  /* dusty violet */
:root{
  --air:   #2E8B57;
  --flood: #1F6F8B;
  --space: #6B4E8E;
}
.kicker.air::before{   background:var(--air);   }
.kicker.flood::before{ background:var(--flood); }
.kicker.space::before{ background:var(--space); }

/* Solar wind display */
.solar-wind-display{
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px; margin-top:12px;
}
.sw-stat{
  border:1px solid var(--line); padding:16px;
  background:var(--paper); text-align:center;
}
.sw-label{
  display:block; font-family:var(--narrow);
  text-transform:uppercase; letter-spacing:0.12em;
  font-size:0.62rem; color:var(--muted); margin-bottom:8px;
}
.sw-value{
  display:block; font-family:var(--mono);
  font-size:clamp(1.8rem,4vw,2.6rem); font-weight:600;
  line-height:0.95; color:var(--space); letter-spacing:-0.03em;
}
.sw-unit{
  display:block; font-family:var(--mono);
  font-size:0.72rem; color:var(--muted); margin-top:4px;
}

/* AQI rating badge */
.aqi-badge{
  display:inline-block; padding:2px 8px; border-radius:2px;
  font-family:var(--mono); font-size:0.75rem; font-weight:600;
  border:1px solid transparent;
}
.aqi-good{     background:#D4EDDA; color:#155724; border-color:#C3E6CB; }
.aqi-fair{     background:#FFF3CD; color:#856404; border-color:#FFEEBA; }
.aqi-moderate{ background:#FFE5B4; color:#7A4100; border-color:#FFD88A; }
.aqi-poor{     background:#F8D7DA; color:#721C24; border-color:#F5C6CB; }
.aqi-verypoor{ background:#C0392B; color:#fff; border-color:#A93226; }

/* Flood seg margin */
#floodSeg{ margin-bottom:4px; }

/* ---------- RESPONSIVE ---------- */
/* ---------- TABLET (two-column-friendly mid range) ---------- */
@media (max-width:1040px){
  .ledger{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .chart-grid{ grid-template-columns:1fr; }
  .panel.wide{ grid-column:auto; }
  .chart-wrap{ height:300px; }
}
@media (max-width:620px){
  .issue-meta{ text-align:left; border-left:0; padding-left:0; }
  nav.catnav{ flex-wrap:wrap; }
  .catnav-label{ width:100%; border-right:0; border-bottom:1px solid #34322E; padding:9px 16px; }
  .catnav-link{ flex:1; justify-content:center; padding:11px 10px; font-size:0.74rem; }
  .catnav-live{ display:none; }
  .card-controls{ width:100%; }
  .ledger{ grid-template-columns:1fr; }
  .section-note{ text-align:left; }
}

@media (prefers-reduced-motion:reduce){
  .live-dot{ animation:none; }
}

/* Compact ledger used inside non-seismic trend cards */
.mini-ledger{
  margin-bottom:14px;
  grid-template-columns:repeat(3,1fr);
}
.stat.flood-stat::after{ border-top-color:var(--flood); border-left-color:var(--flood); }
.stat-value.small{
  font-size:clamp(1.35rem,3vw,2rem);
  line-height:1.1;
  word-break:break-word;
}
@media (max-width:760px){
  .mini-ledger{ grid-template-columns:1fr; }
}

/* Flood trend cards use four clear labels instead of numbered card names. */
.flood-ledger{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .flood-ledger{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .flood-ledger{ grid-template-columns:1fr; } }

/* ---------- FIXES: flood card corners + mobile layout ---------- */
img, svg, canvas{ max-width:100%; }
body{ overflow-x:hidden; }
.wrap{ max-width:100%; }

/* Only featured stat cards should get the coloured corner. */
.stat.flood-stat::after{ border-top-color:transparent; border-left-color:transparent; }
.stat.flood-stat.is-featured::after{ border-top-color:var(--flood); border-left-color:var(--flood); }
.stat.flood-stat.is-featured .stat-value{ color:var(--flood); }

/* Keep wide data tables inside their own scroll area, not the whole page. */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap table{ min-width:560px; }

@media (max-width:720px){
  body{ background-size:18px 18px,18px 18px; }
  .wrap{ border-left:0; border-right:0; }

  .masthead{ padding:14px 12px 0; }
  .masthead-top{ gap:10px; }
  .brand{ align-items:center; gap:10px; min-width:0; }
  .logo-mark{ width:28px; height:28px; }
  .wordmark{ font-size:clamp(1.9rem,13vw,2.75rem); line-height:.88; }
  .tagline{ font-size:.58rem; letter-spacing:.1em; max-width:34ch; }
  .issue-meta{
    width:100%; text-align:left; border-left:0; border-top:1px solid var(--line-soft);
    padding:8px 0 0; margin-top:2px; display:flex; justify-content:space-between;
    align-items:flex-start; gap:10px; font-size:.62rem; line-height:1.45;
  }
  .issue-meta .big{ font-size:.74rem; white-space:nowrap; }
  .seismo{ height:34px; margin-top:10px; }
  .seismo-label{ right:4px; bottom:2px; font-size:.5rem; }

  nav.catnav{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  nav.catnav::-webkit-scrollbar{ display:none; }
  .catnav-label,.catnav-live{ display:none; }
  .catnav-links{ flex:0 0 auto; display:flex; }
  .catnav-link{ flex:0 0 auto; justify-content:center; padding:10px 12px; font-size:.68rem; }

  .dateline{ padding:8px 12px; gap:8px; font-size:.62rem; line-height:1.35; }
  .dateline .sep{ display:none; }
  .chip{ font-size:.56rem; padding:1px 6px; }

  .cat-divider{ padding:16px 12px 3px; gap:10px; }
  .cat-divider-label{ font-size:1rem; }
  .pad{ padding:14px 12px; }
  .section-head{ align-items:flex-start; gap:8px; margin-bottom:10px; }
  .section-note{ width:100%; text-align:left; font-size:.62rem; }
  h2.section-title{ font-size:1.15rem; line-height:1.05; }

  .ledger,.mini-ledger,.flood-ledger{ grid-template-columns:1fr; border-left:0; }
  .stat{ min-height:auto; padding:13px 14px; }
  .stat .stat-value{ font-size:2rem; line-height:1; }
  .stat-value.small{ font-size:1.48rem; line-height:1.05; }
  .stat .stat-foot{ white-space:normal; overflow:visible; }

  .chart-grid{ grid-template-columns:1fr; border-left:0; }
  .panel{ padding:16px 13px; }
  .panel-head{ display:block; margin-bottom:10px; }
  .panel-head h3{ font-size:.95rem; }
  .panel-head .unit{ display:block; text-align:left; margin-top:4px; font-size:.6rem; }
  .chart-wrap,.panel.wide .chart-wrap,.chart-wrap-temp{ height:260px; }
  .big-read{ font-size:.9rem; line-height:1.45; padding:10px 12px; margin-bottom:11px; }
  .legend{ gap:10px; font-size:.58rem; }

  .seg{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .seg::-webkit-scrollbar{ display:none; }
  .seg-btn{ padding:9px 11px; font-size:.62rem; letter-spacing:.04em; min-height:38px; white-space:nowrap; }
  .card-controls{ width:100%; gap:8px; }
  .mag-filter{ width:100%; justify-content:space-between; }
  .mag-filter select{ max-width:190px; min-height:38px; }

  table{ font-size:.78rem; }
  thead th, tbody td{ padding:8px 10px; }
  .caveat{ padding:10px 12px; font-size:.62rem; line-height:1.5; }

  .solar-wind-display{ grid-template-columns:1fr; gap:10px; }
  footer .foot-grid{ display:block; }
  footer .sources{ text-align:left; margin-top:12px; }
}

@media (max-width:420px){
  .wordmark{ font-size:2rem; }
  .tagline{ max-width:28ch; }
  .issue-meta{ display:block; }
  .issue-meta .big{ margin-bottom:3px; }
  .chart-wrap,.panel.wide .chart-wrap,.chart-wrap-temp{ height:200px; }
  .stat-value.small{ font-size:1.3rem; }
  .table-wrap table{ min-width:620px; }
}

/* Historical earthquake frequency cards */
.quake-history-ledger{ grid-template-columns:repeat(4,1fr); }
.quake-history-ledger .stat.is-featured::after{ border-top-color:var(--crimson); border-left-color:var(--crimson); }
.quake-history-ledger .stat.is-featured .stat-value{ color:var(--crimson); }
@media (max-width:980px){ .quake-history-ledger{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .quake-history-ledger{ grid-template-columns:1fr; } }