/* ============================================================
   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(1180px, 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(16px,3vw,30px) 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-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:20px clamp(16px,3vw,30px) 4px;
  scroll-margin-top:54px;
}
.cat-divider-label{
  display:flex; align-items:center; gap:9px;
  font-family:var(--disp); font-weight:800;
  text-transform:uppercase; letter-spacing:0.02em;
  font-size:1.15rem; 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(16px,3vw,30px);
  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(16px,3vw,30px); }
.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:16px clamp(14px,2.2vw,20px) 18px;
  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:12px;
}
.panel-head h3{
  font-family:var(--disp); font-weight:700;
  font-size:0.98rem; 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:240px; position:relative; }
.panel.wide .chart-wrap{ height:230px; }
.chart-wrap-temp{ height:230px; }

/* 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(16px,3vw,30px); border-top:1px solid var(--line-soft);
  background:var(--paper-2);
}

/* ---------- FOOTER ---------- */
footer{
  border-top:2px solid var(--line);
  padding:18px clamp(16px,3vw,30px) 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; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .ledger{ grid-template-columns:1fr 1fr; }
  .chart-grid{ grid-template-columns:1fr; }
  .panel.wide{ grid-column:auto; }
}
@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; }
}