/* ============================================================
   World Earthquake Labs — global stylesheet
   ============================================================ */

:root {
  --navy-900: #10254a;
  --navy-800: #16294e;
  --navy-700: #1d3560;
  --ink: #22375e;
  --body: #44536e;
  --muted: #5d6b84;
  --faint: #7b8698;
  --blue-600: #1a6ef5;
  --blue-700: #1257d6;
  --blue-050: #eef4ff;
  --teal-500: #0e9a8d;
  --green-500: #1d9e6e;
  --green-050: #e9f7f0;
  --red-500: #e8432d;
  --line: #e6ebf3;
  --line-soft: #eef1f6;
  --bg-soft: #f6f8fb;
  --card-shadow: 0 1px 2px rgba(18, 42, 83, .05);
  --pop-shadow: 0 14px 40px rgba(10, 26, 60, .16);
  --radius: 16px;
  --ad-anchor-h: 58px;
  --font-sans: "Inter", -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--body);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--navy-800); }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

.serif { font-family: var(--font-serif); }

/* ---------------- Header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.header-inner {
  display: flex;
  align-items: center;
  height: 78px;
  gap: 20px;
}

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 62px; display: block; }

.main-nav {
  display: flex;
  gap: 36px;
  margin-left: auto;
  margin-right: 40px;
}

.main-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: #33415c;
  transition: color .15s;
}

.main-nav a:hover, .main-nav a.active { color: var(--blue-600); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.nav-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--navy-800);
  place-items: center;
}

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--blue-600);
  color: #fff;
  box-shadow: 0 1px 2px rgba(26, 110, 245, .35);
}
.btn-primary:hover { background: var(--blue-700); }

.btn-outline {
  background: #fff;
  border: 1px solid #cfd9e8;
  color: var(--navy-700);
}
.btn-outline:hover { border-color: #9fb4d4; color: var(--navy-900); }

.btn-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid #dfe6f0;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--card-shadow);
  transition: border-color .15s;
}
.btn-chip:hover { border-color: #b9c8de; }
.btn-chip svg { color: var(--muted); }

.btn-block { width: 100%; }

.link {
  color: var(--blue-600);
  font-size: 13.5px;
  font-weight: 600;
}
.link:hover { text-decoration: underline; }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--blue-600);
  padding: 6px 0;
  transition: color .15s;
}
.btn-text:hover {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}

/* ---------------- Page head ---------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 38px 0 26px;
  flex-wrap: wrap;
}

.page-head h1 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy-800);
}

.page-head .sub {
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--muted);
}

.page-actions { display: flex; gap: 12px; align-items: center; }

/* ---------------- Cards ---------------- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--card-shadow);
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.card-title { font-size: 15.5px; font-weight: 700; color: var(--navy-800); }
.card-title .light { font-weight: 500; color: var(--faint); }
.card-sub { font-size: 12.5px; color: var(--faint); margin: 2px 0 0; }

.chart-box { position: relative; height: 250px; margin-top: 18px; }
.chart-box.tall { height: 280px; }
.chart-box.short { height: 210px; }

/* ---------------- Stat cards ---------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.stat-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--card-shadow);
}

.stat-label { font-size: 13px; font-weight: 600; color: var(--muted); }

.stat-value {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  color: #1a56db;
  /* Source Serif 4 wants ~1.2em of line box. Tighter than that and the
     descenders sit outside the card -- visible on every stat tile. */
  line-height: 1.2;
  margin-top: 12px;
  letter-spacing: -.01em;
}
.stat-value.red { color: var(--red-500); }
.stat-value .unit { font-size: 20px; }

.stat-sub { font-size: 12.5px; color: var(--muted); margin-top: 9px; display: flex; align-items: center; gap: 5px; }
.stat-sub .up { color: var(--green-500); display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.stat-sub .down { color: var(--red-500); display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }

/* ---------------- Chips / selects ---------------- */

.range-chips {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fff;
}

.range-chips button {
  border: 1px solid transparent;
  background: none;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.range-chips button.active {
  color: var(--blue-600);
  background: #f3f8ff;
  border-color: #d3e3fd;
  box-shadow: 0 1px 2px rgba(26, 110, 245, .12);
}

.select-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe6f0;
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  font-size: 14px;
  box-shadow: var(--card-shadow);
}

.select-chip .lbl { color: var(--muted); font-size: 13.5px; }

.date-chip { gap: 7px; }
.date-chip input[type="date"] {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
  outline: none;
  cursor: pointer;
  padding: 0;
  width: 118px;
}

.select-chip select {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-800);
  outline: none;
  cursor: pointer;
}

/* ---------------- Tables ---------------- */

.eq-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.eq-table thead th {
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.eq-table thead th:first-child { border-radius: 8px 0 0 8px; }
.eq-table thead th:last-child { border-radius: 0 8px 8px 0; }

.eq-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--body);
  font-variant-numeric: tabular-nums;
}

.eq-table td.mag { font-weight: 700; color: var(--navy-800); white-space: nowrap; }
.eq-table td.mag.big { color: var(--red-500); }
.eq-table td.right, .eq-table th.right { text-align: right; }
.eq-table .eq-loading td {
  height: 92px;
  color: var(--faint);
  text-align: center;
}

.section-title {
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy-800);
  margin: 36px 0 14px;
}

.view-all-row { text-align: center; margin-top: 26px; }

/* ---------------- Live map page ---------------- */

.map-shell {
  position: relative;
  height: 600px;
  border-radius: 18px;
  overflow: hidden;
  background: #081c3c;
  box-shadow: 0 10px 34px rgba(9, 25, 66, .18);
  perspective: 1500px;
}

#map {
  position: absolute;
  inset: 0;
  background: #081c3c;
  transition: transform .95s cubic-bezier(.35, 0, .2, 1);
  transform-origin: 50% 78%;
  will-change: transform;
}

/* 2D → 3D preview: tilt the map plane into perspective (real 3D engine plugs in later) */
.map-shell.mode-3d #map {
  transform: rotateX(42deg) scale(1.55) translateY(-4%);
  pointer-events: none;
}

/* Earthquake 4D engine (Three.js app in an iframe, faded in over the tilting 2D map) */
.map-3d-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 830;
  background: #05070d;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease .35s;
}
.map-shell.mode-3d .map-3d-frame { opacity: 1; pointer-events: auto; }

.map-shell.mode-3d .map-timebar,
.map-shell.mode-3d .zoom-ctl,
.map-shell.mode-3d .quake-card { display: none; }

.map-horizon {
  position: absolute;
  inset: 0;
  z-index: 828;
  pointer-events: none;
  opacity: 0;
  transition: opacity .95s ease;
  background:
    linear-gradient(to bottom, rgba(6, 16, 42, .92), rgba(6, 16, 42, 0) 34%),
    radial-gradient(120% 60% at 50% 108%, rgba(26, 110, 245, .18), transparent 60%);
}
.map-shell.mode-3d .map-horizon { opacity: 1; }

.map-3d-badge {
  position: absolute;
  top: 20px;
  left: 22px;
  z-index: 860;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(9, 22, 52, .78);
  backdrop-filter: blur(6px);
  color: #dbe6ff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 22px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .4s ease .45s, transform .4s ease .45s;
  pointer-events: none;
}
.map-3d-badge svg { color: #8ab8ff; }
.map-shell.mode-3d .map-3d-badge { opacity: 1; transform: none; }

.leaflet-container { font-family: var(--font-sans); }
.map-shell.base-sat .leaflet-tile-pane { filter: brightness(.72) saturate(.8) contrast(1.06); }
.leaflet-control-attribution {
  background: rgba(8, 20, 50, .5) !important;
  color: rgba(255, 255, 255, .55) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: rgba(255, 255, 255, .7) !important; }

.map-timebar {
  position: absolute;
  left: 22px;
  right: 92px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 8px 30px rgba(6, 18, 48, .32);
}

.map-timebar .range-chips { border: none; padding: 0; }

.play-btn {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid #e2e8f2;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--navy-800);
  transition: border-color .15s;
}
.play-btn:hover { border-color: #b9c8de; }

#timeScrub {
  flex: 1;
  min-width: 60px;
  accent-color: var(--blue-600);
  height: 22px;
  cursor: pointer;
}

.time-readout {
  min-width: 0;
  max-width: 46%;
  border: 1px solid #e2e8f2;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: #33445f;
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.now-btn {
  border: none;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--faint);
  padding: 8px 6px;
}
.now-btn.active, .now-btn:hover { color: var(--blue-600); }

.zoom-ctl {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(6, 18, 48, .32);
}

.zoom-ctl button {
  width: 42px;
  height: 42px;
  border: none;
  background: #fff;
  color: var(--navy-800);
  display: grid;
  place-items: center;
}
.zoom-ctl button:first-child { border-bottom: 1px solid var(--line-soft); }
.zoom-ctl button:hover { background: var(--bg-soft); }

/* selected quake card */

.quake-card {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 950;
  width: 298px;
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px 24px;
  box-shadow: 0 22px 60px rgba(5, 16, 45, .4);
  animation: cardIn .22s ease;
}

@keyframes cardIn { from { opacity: 0; transform: translateY(-6px); } }

.qc-close {
  position: absolute;
  top: 16px;
  right: 16px;
  border: none;
  background: none;
  color: #8b97ab;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px;
}
.qc-close:hover { background: var(--bg-soft); color: var(--navy-800); }

.qc-mag {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--red-500);
  line-height: 1.15;
}

.qc-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.35;
  margin: 10px 0 14px;
}

.qc-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  padding: 3.5px 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.qc-row .k { color: var(--faint); }

.qc-div { height: 1px; background: var(--line-soft); margin: 13px 0; }

.quake-card .btn { margin-top: 18px; }

/* dropdown panels (filters / legend) */

.drop-wrap { position: relative; }

.drop-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1100;
  width: 268px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--pop-shadow);
  padding: 18px 20px;
  display: none;
}
.drop-panel.open { display: block; }

.drop-panel.lg {
  width: 400px;
  max-height: 72vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }

.pchip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--body);
  transition: background .12s, border-color .12s, color .12s;
}
.pchip:hover { border-color: #b9c8de; }
.pchip.on { background: var(--blue-050); border-color: #cfe0fb; color: var(--blue-600); }

.prow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--body); margin: 6px 0; }
.prow > span { min-width: 108px; flex-shrink: 0; color: var(--muted); }
.prow input[type="range"] { flex: 1; min-width: 0; }
.prow output { min-width: 44px; text-align: right; font-weight: 700; color: var(--navy-800); font-size: 12px; white-space: nowrap; }

.prow.dates { gap: 8px; }
.prow.dates > span { min-width: auto; }
.prow.dates input[type="date"] {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
}

.chip-row.bands { gap: 5px; }
.bchip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--body);
  cursor: pointer;
}
.bchip input { accent-color: var(--blue-600); width: 13px; height: 13px; margin: 0; }

.phint { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin: 4px 0 0; }

.p3d-details {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 8px 0;
}
.p3d-details summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 2px 0;
}
.p3d-details .prow > span { min-width: 34px; }

#filters3d h4 { margin-top: 16px; }
#filters3d h4:first-child { margin-top: 0; }
#filters3d .check { font-size: 13px; }

.drop-panel h4 { font-size: 13px; font-weight: 700; color: var(--navy-800); margin: 0 0 10px; }
.drop-panel .row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--body); padding: 5px 0; }

.legend-dot { display: inline-block; border-radius: 50%; margin-right: 10px; vertical-align: middle; }

.legend-item { display: flex; align-items: center; font-size: 13px; color: var(--body); padding: 4px 0; }
.legend-item .grow { flex: 1; }
.legend-line {
  display: inline-block;
  width: 26px; height: 0;
  border-top: 2px dashed #ff6b35;
  margin-right: 10px;
}
.legend-line.coast { border-top: 2px solid #7f9ebb; }
.legend-line.fault { border-top: 2px solid #e0566e; }
.legend-volcano {
  width: 8px;
  height: 8px;
  margin: 0 14px 0 4px;
  border-radius: 50%;
  background: #e55b3d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8);
}

input[type="range"] { width: 100%; accent-color: var(--blue-600); }
.drop-panel label.check { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--body); padding: 4px 0; cursor: pointer; }
.drop-panel input[type="checkbox"] { accent-color: var(--blue-600); width: 15px; height: 15px; }

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--blue-600);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* on-map legend (2D) */

.map-legend {
  position: absolute;
  left: 22px;
  bottom: 94px;
  z-index: 890;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(5px);
  border-radius: 12px;
  padding: 12px 16px 13px;
  box-shadow: 0 8px 30px rgba(6, 18, 48, .32);
}

/* Phones turn the legend into a button; wide screens never see it. */
.map-legend .ml-toggle { display: none; }

.map-legend .ml-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

.map-legend .legend-item { font-size: 12.5px; padding: 3px 0; }
.map-shell.mode-3d .map-legend { display: none; }

/* in-map layers control */

.map-layers-btn {
  position: absolute;
  top: 20px;
  right: 22px;
  z-index: 940;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 12px;
  background: #fff;
  color: var(--navy-800);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 30px rgba(6, 18, 48, .32);
}
.map-layers-btn:hover { background: var(--bg-soft); }

.map-layers-panel {
  position: absolute;
  top: 72px;
  right: 22px;
  z-index: 960;
  width: 292px;
  max-height: calc(100% - 100px);
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(5, 16, 45, .38);
  padding: 16px 18px;
  scrollbar-width: thin;
}

.map-layers-panel h4 { font-size: 13px; font-weight: 700; color: var(--navy-800); margin: 14px 0 8px; }
.map-layers-panel h4:first-child { margin-top: 0; }
.map-layers-panel .check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--body); padding: 4px 0; cursor: pointer; }
.map-layers-panel input[type="checkbox"] { accent-color: var(--blue-600); width: 15px; height: 15px; }

/* one-track dual-handle slider */

.dualwrap {
  position: relative;
  height: 30px;
  margin: 2px 0 8px;
}
.dualwrap::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--line);
  border-radius: 2px;
}
.dual-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--blue-600);
  border-radius: 2px;
  pointer-events: none;
}
.dualwrap input[type="range"] {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  height: 22px;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}
.dualwrap input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.dualwrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px; height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--blue-600);
  box-shadow: 0 1px 3px rgba(9, 25, 66, .3);
  cursor: pointer;
}
.dualwrap input[type="range"]::-moz-range-track { height: 4px; background: transparent; }
.dualwrap input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--blue-600);
  box-shadow: 0 1px 3px rgba(9, 25, 66, .3);
  cursor: pointer;
}

/* anchored event card (Leaflet popup skin) */

.quake-pop .leaflet-popup-content-wrapper {
  border: 1px solid rgba(17, 43, 84, .08);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(5, 16, 45, .28);
  padding: 0;
}

.quake-pop .leaflet-popup-content {
  margin: 21px 23px 22px;
  width: min(258px, calc(100vw - 96px)) !important;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  position: relative;
  color: var(--ink);
}

.quake-pop .qc-mag { font-size: 28px; }
.quake-pop .qc-title {
  font-size: 15px;
  line-height: 1.35;
  margin: 8px 0 13px;
  padding-right: 24px;
}
.quake-pop .qc-row {
  gap: 16px;
  font-size: 13px;
  line-height: 1.45;
  padding: 2.5px 0;
}
.quake-pop .qc-div { margin: 11px 0; }

.quake-pop .qc-close {
  top: -5px;
  right: -7px;
  width: 27px;
  height: 27px;
}

.quake-pop .btn-block {
  margin-top: 13px;
  padding: 9px 14px;
  font-size: 13px;
  border-radius: 9px;
  box-shadow: 0 5px 12px rgba(26, 104, 230, .18);
}

.quake-pop .leaflet-popup-tip { box-shadow: 0 6px 16px rgba(5, 16, 45, .2); }

/* quake pulse marker */

.pulse-wrap { position: relative; }
.pulse-wrap .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--pc, #e53935);
  animation: pulse 1.8s ease-out infinite;
}
.pulse-wrap .ring:nth-child(2) { animation-delay: .6s; }

@keyframes pulse {
  0% { transform: scale(.45); opacity: .95; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* ---------------- Dashboard ---------------- */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.donut-flex { display: flex; align-items: center; gap: 30px; margin-top: 14px; }
.donut-hold { position: relative; width: 220px; height: 220px; flex-shrink: 0; }

.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 11px; min-width: 0; }
.donut-legend .row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); }
.donut-legend .row .grow { flex: 1; }
.donut-legend .row .val { color: var(--muted); font-variant-numeric: tabular-nums; }

.sig-list { display: flex; flex-direction: column; margin-top: 6px; }

.sig-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.sig-row:last-child { border-bottom: none; }

.sig-mag { width: 58px; font-weight: 700; font-size: 15px; color: var(--navy-800); white-space: nowrap; }
.sig-mag.big { color: var(--red-500); }
.sig-loc { flex: 1; min-width: 0; }
.sig-loc .l1 { font-size: 14px; font-weight: 600; color: var(--ink); }
.sig-loc .l2 { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.sig-depth { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.mini-map {
  height: 268px;
  border-radius: 12px;
  overflow: hidden;
  background: #eef2f7;
  margin-top: 14px;
  position: relative;
}
.mini-map .leaflet-tile-pane { filter: none; }

.map-key {
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
}
.map-key span { display: inline-flex; align-items: center; gap: 7px; }

.status-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.status-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  background: #fff;
}

.status-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: var(--green-050);
  color: var(--green-500);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.status-tile .name { font-size: 14px; font-weight: 600; color: var(--navy-800); }
.status-tile .state { font-size: 12.5px; color: var(--green-500); font-weight: 600; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.status-tile .state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); }

/* ---------------- Latest news (dashboard) ---------------- */

.news-list { display: flex; flex-direction: column; margin-top: 4px; }

/* One headline per row: title, standfirst, then outlet and age. The feed
   carries no artwork -- Google News gives none -- and a grey "no image" box
   on every row was worse than no box at all. */
.news-row {
  display: block;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line-soft);
}
.news-row:last-child { border-bottom: none; }
.news-row .nt {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.5;
  transition: color .12s;
}
.news-row .nm { font-size: 12px; color: var(--faint); margin-top: 3px; }

.news-empty { color: var(--faint); padding: 26px 2px; margin: 0; }


/* ---------------- Earthquake guide page ---------------- */

.gd-navwrap {
  position: sticky;
  top: 78px;
  z-index: 400;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.embed .gd-navwrap { top: 0; }

.gd-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.gd-nav::-webkit-scrollbar { height: 5px; }
.gd-nav::-webkit-scrollbar-thumb { background: #d9e1ec; border-radius: 3px; }

.gd-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.gd-nav a svg { color: #8494ac; transition: color .12s; }
.gd-nav a:hover { background: var(--bg-soft); color: var(--navy-800); }
.gd-nav a.active { background: var(--blue-050); color: var(--blue-600); font-weight: 600; }
.gd-nav a.active svg { color: inherit; }

.gd-sec { display: none; animation: kbIn .18s ease; padding-top: 6px; }
.gd-sec.active { display: block; }
@keyframes kbIn { from { opacity: 0; transform: translateY(4px); } }

.gd-cols {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 44px;
  align-items: start;
}

.gd-terms.cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 44px;
}

.gd-table td, .gd-table th { padding: 10px 12px !important; font-size: 13px; }

.gd-shortcuts .resource-tile { cursor: pointer; }

.gd-hero {
  display: grid;
  grid-template-columns: 1fr .95fr;
  gap: 44px;
  align-items: center;
  background: linear-gradient(118deg, #f0f6ff, #fdfeff 62%);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  padding: 40px 46px;
  margin: 28px 0 22px;
}

.gd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--blue-600);
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 14px;
}

.gd-hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
}

.gd-hero p {
  color: #52627c;
  font-size: 15px;
  line-height: 1.75;
  margin: 16px 0 26px;
  max-width: 54ch;
}

.gd-hero-img { display: flex; justify-content: center; }
.gd-hero-img img { width: 100%; max-width: 520px; }

.gd-grid { display: grid; gap: 22px; margin-bottom: 22px; }
.gd-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-grid.split-62 { grid-template-columns: 1.35fr 1fr; }

.gd-card { padding: 26px 28px; margin-bottom: 22px; }
.gd-grid .gd-card { margin-bottom: 0; }

.gd-title { font-size: 18px; font-weight: 700; color: var(--navy-800); margin: 0 0 10px; }
.gd-title .gd-sub { font-size: 13px; font-weight: 500; color: var(--faint); margin-left: 8px; }

.gd-desc { font-size: 14px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; }

.gd-plates { width: 100%; height: auto; margin: 4px 0; }

.gd-note {
  font-size: 13px;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 14px 0 0;
  line-height: 1.6;
}

/* waves */
.gd-wave {
  display: flex;
  gap: 20px;
  align-items: center;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.gd-wave svg { width: 230px; flex-shrink: 0; }
.gd-wave-info { flex: 1; min-width: 0; }
.w-name { font-size: 15px; font-weight: 700; }
.w-name.p { color: #0e9a8d; }
.w-name.s { color: #1a6ef5; }
.w-name span { font-weight: 500; font-size: 12.5px; color: var(--faint); }
.w-desc { font-size: 13px; color: var(--muted); margin-top: 4px; line-height: 1.6; }

/* magnitude vs intensity */
.gd-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: 14px;
}

.cmp-box { border-radius: 14px; padding: 20px 22px; position: relative; }
.cmp-mag { background: #fdf3f1; border: 1px solid #f6ddd8; }
.cmp-int { background: #eef8f2; border: 1px solid #d9eee1; }

.cmp-head { font-size: 15.5px; font-weight: 700; color: #c62828; }
.cmp-head.green { color: #1d9e6e; }
.cmp-head span { display: block; font-size: 12px; font-weight: 500; color: var(--faint); margin-top: 3px; }
.cmp-icon { position: absolute; top: 16px; right: 20px; font-size: 28px; }

.cmp-box ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cmp-box li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.2px; color: var(--ink); line-height: 1.55; }
.cmp-box li svg { flex-shrink: 0; margin-top: 2px; color: #1d9e6e; }
.cmp-mag li svg { color: #c62828; }

.cmp-vs {
  align-self: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--navy-800);
}

.gd-example {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 12px 16px;
  line-height: 1.6;
}

/* key terms */
.gd-terms { display: flex; flex-direction: column; }
.term { display: flex; gap: 13px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.term:last-child { border-bottom: none; }
.t-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.term b { display: block; font-size: 14px; color: var(--navy-800); }
.term div span { display: block; font-size: 12.5px; color: var(--faint); margin-top: 2px; line-height: 1.5; }

/* faq */
.gd-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 16px; }

.gd-faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 18px;
  background: #fff;
  height: fit-content;
}

.gd-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-800);
}
.gd-faq summary::-webkit-details-marker { display: none; }
.gd-faq summary span[style] { margin-left: auto; }
.gd-faq summary svg { color: var(--faint); transition: transform .18s; flex-shrink: 0; }
.gd-faq details[open] summary svg { transform: rotate(180deg); }
.gd-faq details p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.7; color: var(--muted); }

/* safety */
.gd-safety { margin-top: 36px; scroll-margin-top: 90px; }

.gd-safety-head { text-align: center; max-width: 660px; margin: 0 auto 30px; }
.gd-safety-head .shield { font-size: 34px; margin-bottom: 10px; }
.gd-safety-head h2 { font-family: var(--font-serif); font-size: clamp(24px, 2.4vw, 31px); font-weight: 700; }
.gd-safety-head p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 12px 0 0; }

.gd-scenarios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.sc-card { padding: 18px; text-align: center; display: flex; flex-direction: column; }
.sc-visual { height: 96px; border-radius: 12px; display: grid; place-items: center; font-size: 46px; margin-bottom: 16px; }
.sc-title { font-size: 15px; font-weight: 700; color: var(--navy-800); }
.sc-sub { font-size: 12.5px; color: var(--faint); margin-top: 3px; }

.sc-steps { display: flex; align-items: flex-start; justify-content: center; gap: 6px; margin: 16px 0 14px; }
.sc-step { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--ink); width: 62px; }
.sc-step span {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
}
.sc-arrow { color: #c3cedd; font-size: 17px; margin-top: 8px; }

.sc-note {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: auto 0 0;
  text-align: left;
  background: var(--bg-soft);
  padding: 10px 12px;
  border-radius: 9px;
}

/* emergency kit checklist */
.kit-progress {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-600);
  background: var(--blue-050);
  padding: 5px 13px;
  border-radius: 16px;
  white-space: nowrap;
}
.kit-progress.all { color: var(--green-500); background: var(--green-050); }

.kit-list { display: flex; flex-direction: column; margin-top: 10px; }
.kit-list label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9.5px 2px;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--ink);
}
.kit-list label:last-child { border-bottom: none; }
.kit-list input { accent-color: var(--blue-600); width: 16px; height: 16px; flex-shrink: 0; }
.kit-list .kt { flex: 1; }
.kit-list input:checked ~ .kt { color: var(--faint); text-decoration: line-through; }

.kit-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 5px; flex-shrink: 0; }
.kit-tag.must { background: #fff3e0; color: #e65100; }
.kit-tag.rec { background: var(--blue-050); color: var(--blue-600); }

/* home readiness */
.ready-steps { display: flex; flex-direction: column; gap: 16px; }
.rs { display: flex; gap: 14px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.rs b { color: var(--navy-800); }
.rs-n {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* remember banner */
.gd-remember {
  display: flex;
  gap: 28px;
  align-items: center;
  background: #eef4ff;
  border-radius: 16px;
  padding: 22px 30px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.rm-label { font-size: 16px; font-weight: 800; color: var(--navy-800); flex-shrink: 0; }
.rm-item { display: flex; gap: 13px; align-items: center; flex: 1; min-width: 230px; }
.rm-item > span { font-size: 26px; }
.rm-item b { display: block; font-size: 13.5px; color: var(--navy-800); }
.rm-item div span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* news page */
.news-page { padding: 10px 28px; }
.news-row .nd { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.65; max-width: 88ch; }
.news-time { flex-shrink: 0; font-size: 12.5px; color: var(--faint); white-space: nowrap; }

.news-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.news-src { font-size: 12.5px; font-weight: 600; color: var(--faint); }

a.news-row:hover .nt { color: var(--blue-600); }

/* compact guide banner on the dashboard */
.dash-hero {
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  padding: 22px 34px;
  margin: 0 0 20px;
}
.dash-hero .dh-title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.dash-hero p { margin: 9px 0 16px; font-size: 13.5px; color: #52627c; line-height: 1.65; max-width: 56ch; }
.dash-hero .gd-eyebrow { margin-bottom: 10px; font-size: 13px; }
.dash-hero .gd-hero-img img { max-width: 350px; }
.dash-hero .btn { padding: 10px 20px; font-size: 13.5px; }

@media (max-width: 640px) {
}

@media (max-width: 960px) {
  .gd-hero { grid-template-columns: 1fr; padding: 28px; }
  .gd-hero-img { order: -1; }
  .gd-hero-img img { max-width: 380px; }
  .gd-grid.two, .gd-grid.split-62, .gd-faq, .gd-cols, .gd-terms.cols2 { grid-template-columns: 1fr; }
  .gd-compare { grid-template-columns: 1fr; }
  .cmp-vs { justify-self: center; }
  .gd-scenarios { grid-template-columns: repeat(2, 1fr); }
  .gd-wave { flex-direction: column; align-items: flex-start; }
  .gd-wave svg { width: 100%; }
}

@media (max-width: 640px) {
  .gd-scenarios { grid-template-columns: 1fr; }
  .gd-remember { flex-direction: column; align-items: flex-start; }
}

/* ---------------- Sidebar layout (insights / research) ---------------- */

.side-layout {
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  align-items: start;
}

.side-nav {
  border-right: 1px solid var(--line-soft);
  padding: 30px 18px 40px;
  position: sticky;
  top: 78px;
  max-height: calc(100vh - 78px);
  overflow-y: auto;
}

.side-title {
  font-family: var(--font-serif);
  font-size: 25px;
  font-weight: 700;
  color: var(--navy-800);
  padding: 0 14px;
  margin: 4px 0 20px;
}

.side-nav a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  margin-bottom: 2px;
  transition: background .12s, color .12s;
}

.side-nav a svg { color: #8494ac; flex-shrink: 0; transition: color .12s; }
.side-nav a:hover { background: var(--bg-soft); color: var(--navy-800); }
.side-nav a.active { background: var(--blue-050); color: var(--blue-600); font-weight: 600; }
.side-nav a.active svg { color: var(--blue-600); }

.side-content { padding: 34px 36px 70px; min-width: 0; }

.content-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.content-head h1 {
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--navy-800);
}

.content-head .sub { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); }
.content-head .controls { display: flex; gap: 12px; flex-wrap: wrap; }

.charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.insight-view-intro {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
  padding: 19px 22px 20px;
  border: 1px solid #dbe7f8;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7faff 0%, #eef5ff 100%);
}

.insight-view-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.insight-view-controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.insight-view-controls .select-chip {
  box-shadow: 0 2px 8px rgba(17, 43, 84, .06);
}

.insight-view-intro::after {
  content: "";
  position: absolute;
  top: -42px;
  right: -28px;
  width: 150px;
  height: 150px;
  border: 24px solid rgba(37, 99, 235, .05);
  border-radius: 50%;
  pointer-events: none;
}

.insight-view-kicker {
  position: relative;
  z-index: 1;
  margin-bottom: 5px;
  color: var(--blue-600);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.insight-view-intro h2 {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.25;
}

.insight-view-intro p {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.charts-grid > .card[hidden] { display: none; }
.charts-grid > .insight-card-wide { grid-column: 1 / -1; }
.charts-grid > .analysis-wide { grid-column: 1 / -1; }

.insight-view-intro .insight-data-scope {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 4px 9px;
  border: 1px solid rgba(37, 99, 235, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #637894;
  font-size: 11.5px;
  font-weight: 600;
}

.analysis-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.analysis-kpi {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #f9fbfe;
}

.analysis-kpi .k { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.analysis-kpi .v {
  overflow: hidden;
  margin-top: 6px;
  color: var(--navy-800);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analysis-kpi .hint { margin-top: 4px; color: var(--faint); font-size: 10.5px; }

.analysis-table-head { align-items: flex-start; gap: 18px; }
.analysis-table-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.analysis-table-tools input,
.analysis-table-tools select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
  background: #fff;
  color: var(--body);
  font: inherit;
  font-size: 12px;
}
.analysis-table-tools input { width: 190px; padding: 0 11px; }
.analysis-table-tools select { padding: 0 30px 0 10px; }
.analysis-table-tools input:focus,
.analysis-table-tools select:focus { border-color: #8bb4fa; box-shadow: 0 0 0 3px rgba(37, 99, 235, .09); }

.analysis-table-wrap {
  overflow-x: auto;
  margin-top: 15px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.analysis-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.analysis-table th,
.analysis-table td {
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  font-size: 12.5px;
  vertical-align: middle;
}
.analysis-table th {
  background: #f7f9fc;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.analysis-table tbody tr { cursor: pointer; transition: background .12s; }
.analysis-table tbody tr:hover { background: #f4f8ff; }
.analysis-table tbody tr:focus { outline: 2px solid #8bb4fa; outline-offset: -2px; }
.analysis-table tbody tr:last-child td { border-bottom: 0; }
.analysis-table .right { text-align: right; }
.analysis-table .mag { color: #e64b35; font-family: var(--font-serif); font-size: 16px; font-weight: 700; }
.analysis-table .location { color: var(--navy-800); font-weight: 600; }
.analysis-table .muted { color: var(--muted); }
.analysis-empty { padding: 30px 14px !important; color: var(--muted); text-align: center !important; cursor: default; }

.analysis-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 11.5px;
}
.analysis-pager div { display: flex; gap: 7px; }
.analysis-pager button {
  min-width: 76px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--body);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.analysis-pager button:hover:not(:disabled) { border-color: #a8c4f7; background: var(--blue-050); color: var(--blue-600); }
.analysis-pager button:disabled { cursor: default; opacity: .4; }

.heatmap-box {
  height: 280px;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid #dce6f2;
  border-radius: 10px;
  background: linear-gradient(180deg, #f4f8fd, #eef4fb);
}
#spatialHeatmap { display: block; width: 100%; height: 100%; }
.heatmap-axis { display: flex; justify-content: space-between; margin-top: 6px; color: var(--faint); font-size: 10.5px; }
.analysis-legend { color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; }

.insight-modal[hidden] { display: none; }
.insight-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 22px;
}
.insight-modal-backdrop { position: absolute; inset: 0; background: rgba(7, 23, 51, .54); backdrop-filter: blur(3px); }
.insight-modal-card {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  padding: 29px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(8, 27, 61, .28);
}
.insight-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #f4f7fb;
  color: var(--muted);
  cursor: pointer;
}
.insight-modal-close:hover { background: #eaf1fb; color: var(--navy-800); }
.insight-modal-mag { color: #e54832; font-family: var(--font-serif); font-size: 31px; font-weight: 700; }
.insight-modal-card h2 { margin: 4px 44px 0 0; color: var(--navy-800); font-size: 19px; line-height: 1.35; }
.insight-modal-time { margin: 8px 0 0; color: var(--muted); font-size: 12.5px; }
.insight-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 22px 0;
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  overflow: hidden;
}
.insight-modal-grid > div { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); }
.insight-modal-grid > div:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.insight-modal-grid > div:nth-last-child(-n + 2) { border-bottom: 0; }
.insight-modal-grid dt { color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.insight-modal-grid dd { margin: 4px 0 0; color: var(--navy-800); font-size: 13px; font-weight: 600; }
.insight-modal-card .btn-block { width: 100%; }
body.insight-modal-open { overflow: hidden; }

@media (max-width: 760px) {
  .insight-view-intro { grid-template-columns: 1fr; }
  .insight-view-controls { justify-content: flex-start; }
  .analysis-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analysis-table-head { align-items: stretch; flex-direction: column; }
  .analysis-table-tools input { flex: 1; width: auto; min-width: 150px; }
}

@media (max-width: 460px) {
  .analysis-kpi-grid { grid-template-columns: 1fr; }
  .analysis-table-tools { display: grid; grid-template-columns: 1fr; }
  .analysis-pager { align-items: flex-start; flex-direction: column; }
  .insight-modal-card { padding: 24px 20px 20px; }
  .insight-modal-grid { grid-template-columns: 1fr; }
  .insight-modal-grid > div,
  .insight-modal-grid > div:nth-child(odd),
  .insight-modal-grid > div:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .insight-modal-grid > div:last-child { border-bottom: 0; }
}

/* hotspots */

.hot-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12.5px 2px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.hot-row:last-child { border-bottom: none; }

.hot-rank {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  font-size: 12.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.hot-name { flex: 1; color: var(--ink); font-weight: 500; }
.hot-count { font-weight: 600; color: var(--navy-800); font-variant-numeric: tabular-nums; }

/* model performance */

.score-row { display: flex; gap: 56px; margin: 16px 0 6px; }
.score .k { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.score .v { font-family: var(--font-serif); font-size: 32px; font-weight: 700; color: var(--navy-800); margin-top: 4px; }
.score .hint { font-size: 11.5px; color: var(--faint); margin-top: 2px; }

/* ---------------- Research hub ---------------- */

.res-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}

.res-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  background: #fff;
  box-shadow: var(--card-shadow);
}

.res-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.res-stat .k { font-size: 13.5px; color: var(--muted); font-weight: 500; }
.res-stat .v { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--navy-800); line-height: 1.2; }

.res-main {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.pub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 16px;
}

.pub-thumb {
  height: 150px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  background: #fbfcfe;
  display: flex;
}
.pub-thumb svg { width: 100%; height: 100%; }

.pub-tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--blue-600);
  margin: 14px 0 7px;
}

/* Each card is the whole paper: title, authors, venue, then the two facts
   that actually help you choose one -- how often it is cited and whether you
   can read it without a subscription. */
.pub {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: border-color .14s, box-shadow .14s;
}
a.pub:hover { border-color: #b9cdf0; box-shadow: var(--card-shadow); }
a.pub:hover .pub-title { color: var(--blue-600); }

.pub-title { font-size: 15px; font-weight: 700; color: var(--navy-800); line-height: 1.4; transition: color .14s; }
.pub-authors { font-size: 12.5px; color: var(--muted); margin-top: 9px; line-height: 1.5; }
.pub-meta { font-size: 12px; color: var(--faint); margin-top: 9px; }

.pub-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 12px; }
.pub-cites, .pub-oa {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
}
.pub-cites { background: var(--bg-soft); color: var(--muted); }
.pub-oa { background: var(--green-050); color: var(--green-500); }

.pub-source { font-size: 12px; color: var(--faint); text-align: right; }
.pub-empty { grid-column: 1 / -1; color: var(--faint); padding: 22px 2px; margin: 0; }

.ds-row {
  display: flex;
  gap: 13px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
  align-items: flex-start;
}
.ds-row:last-child { border-bottom: none; padding-bottom: 4px; }

.ds-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.ds-name { font-size: 13.5px; font-weight: 600; color: var(--navy-800); line-height: 1.45; }
.ds-meta { font-size: 12px; color: var(--faint); margin-top: 4px; }

.resources-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.resource-tile {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 14px 20px;
  text-align: center;
  background: #fff;
  transition: box-shadow .15s, transform .15s;
}
.resource-tile:hover { box-shadow: var(--pop-shadow); transform: translateY(-2px); }

.resource-tile .ic {
  width: 46px; height: 46px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
  display: grid;
  place-items: center;
}

.resource-tile .t { font-size: 14px; font-weight: 700; color: var(--navy-800); margin: 13px 0 6px; }
.resource-tile .d { font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* ---------------- Landing page ---------------- */

.hero {
  padding: 76px 0 64px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 44px;
  align-items: center;
}

.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(38px, 4.5vw, 57px);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--navy-900);
}

.hero h1 .grad {
  background: linear-gradient(92deg, #1a6ef5 10%, #0e9a8d 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  font-size: 16.5px;
  line-height: 1.7;
  color: #4a5b76;
  max-width: 54ch;
  margin: 24px 0 32px;
}

.hero-cta { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.hero-cta .btn { padding: 13px 26px; font-size: 14.5px; }

.hero-img { display: flex; justify-content: center; }
.hero-img img { width: 100%; max-width: 640px; }

/* trusted by */

.trust { background: #f4f6f9; padding: 26px 0; }

.trust-row {
  display: flex;
  align-items: center;
  gap: 40px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.trust-label { font-size: 13.5px; color: #5d6b82; max-width: 170px; line-height: 1.5; }
.trust-label.center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 620px;
  margin: 0 auto 24px;
  color: #8797ad;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .25em;
  text-transform: uppercase;
  white-space: nowrap;
}

.trust-wave {
  width: clamp(72px, 11vw, 132px);
  height: auto;
  flex: 0 1 132px;
  min-width: 0;
  opacity: .72;
}

.trust-wave-right {
  transform: scaleX(-1);
}

.trust-row.sources {
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.trust-row.sources .wordmark { flex-shrink: 0; }

.wordmark { color: #707c8f; opacity: .85; text-align: center; line-height: 1; user-select: none; }
.wordmark .main { display: block; }
.wordmark .sub { display: block; font-size: 7.5px; letter-spacing: .14em; margin-top: 4px; color: #8a94a4; }

.wordmark .main.src { font-size: 21px; font-weight: 800; letter-spacing: .04em; }

.wm-caltech .main { font-size: 27px; font-weight: 600; letter-spacing: .01em; }
.wm-usgs .main { font-size: 25px; font-weight: 800; letter-spacing: .12em; font-style: italic; }
.wm-gfz .main { font-size: 26px; font-weight: 800; letter-spacing: .3em; }
.wm-berkeley .main { font-family: var(--font-serif); font-size: 26px; font-weight: 600; }
.wm-eth .main { font-size: 25px; }
.wm-eth .main b { font-weight: 800; }

/* mission */

.mission { padding: 90px 0 72px; }

.eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--blue-600);
  margin-bottom: 14px;
}

.mission-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 54px;
}

.mission-grid h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.mission-grid .txt {
  font-size: 15.5px;
  line-height: 1.75;
  color: #52627c;
  padding-top: 44px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feature-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
  background: #fff;
  transition: box-shadow .15s, transform .15s;
}
.feature-card:hover { box-shadow: var(--pop-shadow); transform: translateY(-2px); }

.feature-card .ic {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.feature-card .t { font-size: 15px; font-weight: 700; color: var(--navy-800); margin-bottom: 7px; }
.feature-card .d { font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* dark platform band */

.platform-band {
  position: relative;
  background: #0b2f6b;
  color: #fff;
  padding: 58px 0;
  overflow: hidden;
}

.platform-band::after {
  content: "";
  position: absolute;
  inset: -40px -80px -40px auto;
  width: 55%;
  background: url("../resource/img/banner img.png") right center / contain no-repeat;
  opacity: .07;
  pointer-events: none;
}

.band-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  gap: 30px;
  align-items: start;
}

.band-intro .l1 { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.band-intro .l2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-top: 6px;
  letter-spacing: -.01em;
}
.band-intro .bar { width: 46px; height: 3px; background: #35c08e; border-radius: 2px; margin: 16px 0; }
.band-intro p { font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .72); max-width: 36ch; margin: 0; }

.band-col svg { color: #9cc0ff; }
.band-col .t { font-size: 14.5px; font-weight: 600; color: #fff; margin-top: 14px; }
.band-col .d { font-size: 13px; color: rgba(255, 255, 255, .62); margin-top: 4px; line-height: 1.55; }

/* ---------------- Footer ---------------- */

.site-footer { background: #0a2a5f; color: #fff; }

.footer-top {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 32px 0;
  flex-wrap: wrap;
}

.footer-tagline .l1 { font-size: 14.5px; font-weight: 600; }
.footer-tagline .l2 { font-size: 13px; color: rgba(255, 255, 255, .68); margin-top: 3px; }

.footer-links {
  margin-left: auto;
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.footer-links a { font-size: 13.5px; color: #d9e4fb; transition: color .15s; }
.footer-links a:hover { color: #fff; }

.footer-social { display: flex; gap: 12px; }

.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  transition: background .15s;
}
.footer-social a:hover { background: rgba(255, 255, 255, .12); }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding: 16px 0;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, .62);
}

/* ---------------- Modal ---------------- */

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(9, 22, 52, .55);
  display: none;
  place-items: center;
  padding: 24px;
}
.modal-back.open { display: grid; }

.modal {
  background: #fff;
  border-radius: 18px;
  width: min(480px, 100%);
  padding: 28px 30px;
  box-shadow: 0 30px 80px rgba(4, 12, 34, .5);
  position: relative;
}

.modal h3 { font-family: var(--font-serif); font-size: 24px; margin-bottom: 4px; }
.modal .qc-row { font-size: 14px; padding: 5px 0; }

/* ---------------- Misc ---------------- */

.page-pad-bottom { padding-bottom: 80px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) translateY(8px);
  background: var(--navy-800);
  color: #fff;
  font-size: 13.5px;
  padding: 11px 20px;
  border-radius: 10px;
  box-shadow: var(--pop-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 3000;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------- Landing long-form sections ---------------- */

.land-sec { padding: 92px 0; scroll-margin-top: 90px; }
.land-sec.alt { background: var(--bg-soft); }
.mission { scroll-margin-top: 90px; }

.sec-head { max-width: 800px; margin-bottom: 50px; }

.sec-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.01em;
}

.sec-head .lead {
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: #52627c;
}

.plat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.plat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
  transition: box-shadow .15s, transform .15s;
}
.plat-card:hover { box-shadow: var(--pop-shadow); transform: translateY(-2px); }

.plat-card .ic {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.plat-card h3 { font-size: 16.5px; font-weight: 700; color: var(--navy-800); margin: 0 0 9px; }
.plat-card p { font-size: 13.8px; line-height: 1.7; color: var(--muted); margin: 0 0 18px; flex: 1; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--line-soft);
}

.stat-strip .v {
  font-family: var(--font-serif);
  font-size: 31px;
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.2;
}
.stat-strip .k { font-size: 13px; color: var(--muted); margin-top: 6px; }

.split {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 60px;
  align-items: start;
}

.rich-text p { font-size: 15px; line-height: 1.8; color: #52627c; margin: 0 0 16px; }
.rich-text p:last-child { margin-bottom: 0; }

.ticks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 15px; }
.ticks li { display: flex; gap: 13px; font-size: 14px; color: var(--body); line-height: 1.62; }
.ticks li svg { color: var(--green-500); flex-shrink: 0; margin-top: 2px; }
.ticks li b { color: var(--navy-800); font-weight: 600; }

.code-card {
  background: #0e2544;
  border-radius: 16px;
  padding: 24px 26px;
  font-family: "Cascadia Code", Consolas, "SF Mono", monospace;
  font-size: 12.8px;
  line-height: 1.8;
  color: #dbe6ff;
  overflow-x: auto;
  box-shadow: 0 18px 46px rgba(9, 25, 66, .22);
  white-space: pre;
}

.code-card .g { color: #7ee2b8; }
.code-card .b { color: #8ab8ff; }
.code-card .o { color: #ffc98a; }
.code-card .d { color: #64789a; }

.code-cap { font-size: 12.5px; color: var(--faint); margin-top: 14px; text-align: center; }

.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.topic-card {
  display: flex;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  background: #fff;
}

.topic-card .ic {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--blue-050);
  color: var(--blue-600);
  display: grid;
  place-items: center;
}

.topic-card h3 { font-size: 15.5px; font-weight: 700; color: var(--navy-800); margin: 2px 0 7px; }
.topic-card p { font-size: 13.5px; line-height: 1.68; color: var(--muted); margin: 0; }

.sec-cta { display: flex; gap: 38px; margin-top: 40px; flex-wrap: wrap; align-items: center; }
.sec-cta .btn { padding: 12px 24px; }

.resources-grid.landing { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 0; }
.resources-grid.landing .resource-tile { text-align: left; padding: 26px 24px; }
.resources-grid.landing .ic { margin: 0; }
.resources-grid.landing .t { font-size: 15px; margin: 15px 0 7px; }
.resources-grid.landing .d { font-size: 13.3px; line-height: 1.65; }

/* ---------------- App console shell ---------------- */

.app-body {
  height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
  grid-template-areas: "side top" "side main";
  background: #fff;
}

.app-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-soft);
  padding: 20px 14px 18px;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #d9e1ec transparent;
}

.app-side::-webkit-scrollbar { width: 5px; }
.app-side::-webkit-scrollbar-thumb { background: #d9e1ec; border-radius: 4px; }

.app-side .brand { padding: 0 4px; }
.app-side .brand img { height: 66px; display: block; }

.app-nav { margin-top: 26px; display: flex; flex-direction: column; gap: 3px; }

.app-nav-group { min-width: 0; }
.app-nav-group > a { width: 100%; }
.app-nav-label { flex: 1; min-width: 0; }

.app-nav-caret {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .55;
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform .16s ease, opacity .16s ease;
}

.app-nav-group.open > a .app-nav-caret {
  opacity: .85;
  transform: rotate(225deg) translate(-1px, 1px);
}

.app-subnav {
  display: none;
  gap: 1px;
  margin: 3px 0 8px 27px;
  padding-left: 10px;
  border-left: 1px solid #dce5f1;
}

.app-nav-group.open > .app-subnav { display: grid; }

.app-nav a {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  transition: background .12s, color .12s;
}

.app-nav a svg { color: #8494ac; flex-shrink: 0; transition: color .12s; }
.app-nav a:hover { background: var(--bg-soft); color: var(--navy-800); }
.app-nav a.active { background: var(--blue-050); color: var(--blue-600); font-weight: 600; }
.app-nav a.active svg { color: inherit; }

.app-nav .app-subnav a {
  position: relative;
  gap: 0;
  min-height: 30px;
  padding: 6px 9px 6px 14px;
  border-radius: 7px;
  color: #65748b;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
}

.app-nav .app-subnav a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b7c3d3;
  transform: translateY(-50%);
}

.app-nav .app-subnav a:hover { background: #f5f8fc; color: var(--navy-800); }
.app-nav .app-subnav a.active {
  background: transparent;
  color: var(--blue-600);
  font-weight: 600;
}
.app-nav .app-subnav a.active::before {
  background: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.app-side .spacer { flex: 1; }

.app-back {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 10px;
}
.app-back svg { color: #8494ac; }
.app-back:hover { background: var(--bg-soft); color: var(--navy-800); }

/* Google AdSense slot (sidebar bottom) */
.ad-slot {
  margin-bottom: 12px;
  border-radius: 12px;
  overflow: hidden;
  min-height: 180px;
  display: flex;
}
.ad-slot .adsbygoogle { flex: 1; }

.ad-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1.5px dashed #d5dce8;
  border-radius: 12px;
  background: var(--bg-soft);
  padding: 26px 10px;
}
.ad-placeholder .ad-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--faint);
  border: 1px solid #d5dce8;
  border-radius: 5px;
  padding: 2px 7px;
}
.ad-placeholder .ad-note { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ad-placeholder .ad-size { font-size: 11px; color: var(--faint); }

.app-status {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--green-050);
  color: var(--green-500);
  font-size: 12.5px;
  font-weight: 600;
}
.app-status::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-500);
  flex-shrink: 0;
}

.app-top {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line-soft);
  background: #fff;
}

.app-top h1 { font-size: 17px; font-weight: 700; color: var(--navy-800); }

/* Shown only once the sidebar becomes a drawer. */
.app-burger {
  display: none;
  width: 38px; height: 38px;
  flex-shrink: 0;
  place-content: center;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 0;
}
.app-burger span {
  display: block;
  width: 17px; height: 1.8px;
  border-radius: 2px;
  background: var(--navy-800);
}

.app-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(10, 26, 60, .42);
  opacity: 0;
  transition: opacity .22s ease;
}
.app-scrim.on { opacity: 1; }

.app-updated {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  padding: 5px 12px;
  border-radius: 20px;
}
.app-updated::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #35c08e; }

.app-clock { margin-left: auto; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.app-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 6px 8px 6px 12px;
  color: var(--muted);
  background: #fff;
}
.app-lang select {
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
  outline: none;
  cursor: pointer;
}

.app-main { grid-area: main; position: relative; background: var(--bg-soft); min-height: 0; }

.app-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
  display: none;
}
.app-frame.active { display: block; }

/* Tablet only. Phones get the drawer further down instead, and letting this
   rail also apply there would mean undoing every rule in it. */
@media (min-width: 761px) and (max-width: 860px) {
  .app-body { grid-template-columns: 66px minmax(0, 1fr); }
  .app-side { padding: 14px 9px; align-items: center; }
  .app-side .brand img { height: 38px; width: 38px; object-fit: cover; object-position: left; }
  .app-nav a span, .app-back span, .app-status span { display: none; }
  .app-nav .app-subnav { display: none !important; }
  .app-nav-caret { display: none; }
  .ad-slot { display: none; }
  .app-nav a, .app-back { justify-content: center; padding: 12px; }
  .app-status { justify-content: center; padding: 11px; }
  .app-clock { display: none; }
}

/* ---------------- Embedded page tweaks (inside console iframe) ---------------- */

.embed .page-head { padding-top: 26px; }

/* full-bleed layout inside the console */
.embed .container { max-width: none; padding: 0 30px; }
.embed .page-pad-bottom { padding-bottom: 26px; }

/* live map view (embed): title + controls sit over the map column,
   and the event list column rises to align with the Filters row */
.embed .map-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  column-gap: 22px;
  align-items: start;
}

.embed .map-main > .page-head { grid-column: 1; grid-row: 1; }
.embed .map-main > .map-layout { display: contents; }

.embed .map-shell {
  grid-column: 1;
  grid-row: 2;
  height: calc(100vh - 165px);
  min-height: 520px;
}

.embed .map-side {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.embed .map-side .section-title { margin: 4px 0 12px; }

.embed .eq-table-wrap {
  flex: 1 1 0;
  height: 0;         /* no intrinsic height: an expanded table scrolls here
                        instead of inflating the grid row and pushing the map */
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.embed .eq-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  border-top: none;
  border-radius: 0 !important;
  padding: 10px 12px;
  font-size: 12px;
}

.embed .eq-table td { padding: 11px 12px; font-size: 13px; }
.embed .eq-table td:nth-child(3) { white-space: nowrap; }
.embed .eq-table th:nth-child(1) { width: 76px !important; }
.embed .eq-table th:nth-child(3) { width: 108px !important; }
.embed .eq-table th:nth-child(4) { width: 64px !important; }
.embed .eq-table tr:last-child td { border-bottom: none; }

.embed .view-all-row { margin-top: 14px; }
.embed .view-all-row .btn { width: 100%; }

/* Below this the 400px event column costs the map more than it is worth, so
   the two stack.
   The table needs its flex sizing undone as well, not just the columns. Beside
   the map it is `flex: 1 1 0; height: 0`, which is right when the grid row
   hands it a definite height: the table then scrolls inside a fixed box
   instead of inflating the row and pushing the map down. Stacked, the column
   has no height to give, so a zero-basis item stays zero -- which is exactly
   what happened: fourteen rows of earthquakes rendered inside a 2px box.
   (The old rule targeted .map-layout, which is `display: contents` here and
   therefore has no columns of its own to change.) */
@media (max-width: 1100px) {
  .embed .map-main { display: block; }
  .embed .map-main > .map-layout { display: block; }
  .embed .map-shell { height: calc(100vh - 330px); min-height: 420px; }
  .embed .map-side { display: block; height: auto; margin-top: 18px; }
  .embed .eq-table-wrap { flex: none; height: auto; max-height: 380px; }
}

/* Keep each child page's horizontal menu visible inside the console as a
   second navigation path alongside the expandable app sidebar. */
.embed .side-layout { display: block; }

.embed .side-nav {
  position: sticky;
  top: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  max-height: none;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-right: none;
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 26px;
  scrollbar-width: thin;
}
.embed .side-nav::-webkit-scrollbar { height: 5px; }
.embed .side-nav::-webkit-scrollbar-thumb { background: #d9e1ec; border-radius: 3px; }

.embed .side-nav .side-title { display: none; }
.embed .side-nav a { white-space: nowrap; margin-bottom: 0; padding: 9px 14px; flex-shrink: 0; }
.embed .side-content { padding: 28px 30px 60px; }

/* The console top bar already names this view; controls now live in the
   analysis intro, so the redundant embedded header can disappear entirely. */
.embed[data-nav="insights"] .content-head { display: none; }

/* The seven data sources want about 790px on one line. Below that the strip
   was a horizontal scroller, which hid four of the seven behind a gesture
   nobody knows is there -- the whole point of the strip is that you can read
   it at a glance. Wrapping keeps every logo on screen, and centring the rows
   keeps the ragged last line from looking like a mistake. */
@media (max-width: 900px) {
  .trust-row.sources {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 26px;
    overflow-x: visible;
  }
  .trust-row.sources .wordmark { flex-shrink: 1; min-width: 0; }
}

/* ---------------- Ad anchor (phones) ----------------
   The console's sidebar unit is only visible while the drawer is open, which
   on a phone is almost never. This bar is the placement that actually gets
   seen there: fixed to the bottom, dismissible, and sitting under the drawer
   and its scrim rather than over them. */

.ad-anchor {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--ad-anchor-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(10, 26, 60, .1);
}

.ad-anchor-inner { display: flex; align-items: center; justify-content: center; }

.ad-anchor-close {
  position: absolute;
  top: -13px;
  right: 10px;
  width: 26px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  box-shadow: 0 2px 8px rgba(10, 26, 60, .12);
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1120px) {
  .pub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .resources-grid { grid-template-columns: repeat(3, 1fr); }
  .band-grid { grid-template-columns: 1fr 1fr; }
  .band-intro { grid-column: 1 / -1; }
  .pub-grid { grid-template-columns: repeat(2, 1fr); }
  .res-main { grid-template-columns: 1fr; }
  .res-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 78px;
    right: 20px;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--pop-shadow);
    padding: 12px;
    min-width: 200px;
  }
  .main-nav.open { display: flex; }
  /* The nav leaves the flex row when it becomes a dropdown, and it was the
     thing holding the actions over on the right. Without this the CTA ends up
     pressed against the wordmark with the whole right half of the bar empty. */
  .header-actions { margin-left: auto; }
  .main-nav a { padding: 10px 14px; border-radius: 8px; }
  .main-nav a:hover { background: var(--bg-soft); }
  .nav-burger { display: grid; }

  /* Stacked, the hero has no image column to give the row height, so the last
     button ended up flush against the section below it. */
  .hero { grid-template-columns: 1fr; padding: 44px 0 52px; }
  .hero-img { order: -1; }
  .hero-img img { max-width: 440px; }
  .mission-grid { grid-template-columns: 1fr; gap: 20px; }
  .mission-grid .txt { padding-top: 0; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-grid, .charts-grid { grid-template-columns: 1fr; }
  .status-grid { grid-template-columns: repeat(2, 1fr); }
  .plat-grid, .split, .topic-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .resources-grid.landing { grid-template-columns: repeat(2, 1fr); }

  .side-layout { grid-template-columns: 1fr; }
  .side-nav {
    position: static;
    max-height: none;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
    padding: 14px 20px;
    align-items: center;
  }
  .side-title { display: none; }
  .side-nav a { white-space: nowrap; margin-bottom: 0; }
  .side-content { padding: 26px 22px 60px; }
}

@media (max-width: 640px) {
  .stat-grid, .feature-grid, .status-grid, .res-stats { grid-template-columns: 1fr; }
  .resources-grid { grid-template-columns: repeat(2, 1fr); }
  .resources-grid.landing, .stat-strip { grid-template-columns: 1fr; }
  .band-grid { grid-template-columns: 1fr; }
  /* map furniture is positioned in the Mobile section below */
  .quake-pop .leaflet-popup-content {
    width: min(258px, calc(100vw - 80px)) !important;
    margin: 19px 21px 20px;
  }
  .footer-links { margin-left: 0; gap: 18px; }
  .trust-row { justify-content: center; }
  .trust-label.center {
    gap: 10px;
    font-size: 9px;
    letter-spacing: .16em;
  }
  .trust-wave {
    width: clamp(44px, 14vw, 72px);
    flex-basis: 72px;
  }
}

/* ============================================================
   Mobile
   ============================================================
   Three things break these pages on a phone, and none of them are the
   breakpoints:

     1. grid and flex items refuse to shrink below their own content, so one
        wide chart canvas sizes an entire track and pushes the document
        sideways -- the page then renders zoomed out and clipped;
     2. control rows (period pickers, filter chips) sit on one unwrapping
        line that is wider than the screen;
     3. the console keeps its sidebar as a real grid column, spending 66px of
        a 390px screen on a strip of icons.

   Each is fixed once here rather than page by page.
   ============================================================ */

/* --- 1. let every track shrink ----------------------------------------
   `min-width: auto` is the initial value for grid and flex items. These are
   all laid out in tracks and would all rather wrap or scroll internally than
   widen the page. */
.card,
.card-head, .card-head > *,
.chart-box,
.stat-card,
.hot-row, .hot-name,
.page-head, .page-head > *,
.page-actions, .page-actions > *,
.side-content,
.app-main, .app-top, .app-top h1 { min-width: 0; }

/* Chart.js writes an explicit pixel width onto its canvas, which becomes the
   card's min-content width and locks the track open at that size. Capping it
   lets the container shrink; the library's resize observer then redraws to
   match on the next frame. */
.chart-box canvas { max-width: 100%; }

/* Place names arrive from the catalogue and can be long and unbreakable. */
.hot-name, .eq-table td, .analysis-table td { overflow-wrap: anywhere; }

/* ---------------- Phones ---------------- */

@media (max-width: 760px) {

  .ad-anchor { display: flex; }
  /* Reserve the bar's height so the end of the page stays reachable. */
  body.has-ad-anchor { padding-bottom: calc(var(--ad-anchor-h) + env(safe-area-inset-bottom, 0px)); }
  /* The console is a full-height grid, not a scrolling document, so it has to
     shrink instead -- padding would just leave the iframe under the bar. */
  body.app-body.has-ad-anchor {
    padding-bottom: 0;
    height: calc(100vh - var(--ad-anchor-h) - env(safe-area-inset-bottom, 0px));
  }

  /* --- site chrome ---
     Horizontal only: several sections are `class="container hero"` and the
     like, and the shorthand would wipe out their vertical rhythm too -- which
     is how the hero's last button ended up flush against the next section. */
  .container { padding-left: 16px; padding-right: 16px; }
  .header-inner { height: 62px; gap: 12px; }
  .brand img { height: 44px; }
  .header-actions { gap: 8px; }
  .header-actions .btn { padding: 9px 14px; font-size: 13px; }

  /* The dropdown hangs off a 62px header here, not the 78px desktop one, and
     a fixed 200px card looks stranded on a narrow screen. */
  .main-nav {
    top: 62px;
    left: 16px;
    right: 16px;
    min-width: 0;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }

  /* --- page furniture --- */
  .page-head { padding: 24px 0 16px; gap: 12px; }
  .page-head h1 { font-size: clamp(24px, 7.4vw, 32px); }
  .page-head .sub { font-size: 14px; }
  .section-title { margin: 26px 0 12px; }
  .card { padding: 18px 16px; }
  .chart-box { height: 220px; }
  .chart-box.tall { height: 250px; }
  .chart-box.short { height: 190px; }

  /* Filter and period rows wrap instead of running off the screen. Chips
     share the row two-up rather than each claiming a full line. */
  .page-actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .range-chips { flex-wrap: wrap; }
  .range-chips button { padding: 7px 11px; font-size: 12.5px; }
  .select-chip { flex: 1 1 145px; justify-content: space-between; }
  .content-head .controls, .insight-view-controls { width: 100%; }

  /* Wide tables scroll in their own box rather than widening the page. */
  .eq-table-wrap, .analysis-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Three columns of paper cards on a phone leaves each 145px wide and 460px
     tall. One per row, and two on a tablet. */
  .pub-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pub { padding: 16px; }

  /* Card headings and their right-hand note stop fighting for one line. */
  .card-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pub-source { text-align: left; }

  /* 4px between two tap targets is not enough to hit reliably. */
  .range-chips { gap: 6px; padding: 5px; }
  .range-chips button { padding: 9px 13px; }

  /* The chip is what you see, but the select is what you tap: make them the
     same box instead of leaving a 19px target inside a 44px pill. */
  .select-chip { padding: 0 12px; }
  .select-chip select, .select-chip .lbl { padding: 11px 0; }

  /* --- on-map furniture ---
     A phone has to fit the scrubber, the zoom pad, the layer control and a
     nine-step legend onto the same 390px as the map. The scrubber takes the
     bottom edge, zoom and legend sit above it on opposite sides, and the
     legend stays collapsed until it is asked for. */
  .map-shell { height: 74vh; min-height: 430px; }

  /* Two deterministic rows -- transport on top, date underneath -- so the
     zoom pad and the legend can be parked at a known height above it instead
     of guessing at whatever a wrapping flex row happens to measure. */
  .map-shell { --map-tb-space: 124px; }
  .map-timebar {
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: 9px 11px;
  }
  .map-timebar .play-btn { width: 38px; height: 38px; }
  .map-timebar input[type="range"] { grid-column: 2; }
  .map-timebar .now-btn { grid-column: 3; padding: 8px 2px; }
  .map-timebar .time-readout {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
    padding: 7px 12px;
    font-size: 12px;
  }

  .zoom-ctl { right: 12px; bottom: var(--map-tb-space); }
  .quake-card { left: 12px; right: 12px; width: auto; }

  .map-layers-btn { top: 12px; right: 12px; width: 38px; height: 38px; }
  .map-layers-panel { top: 58px; left: 12px; right: 12px; width: auto; }

  .map-legend {
    left: 12px;
    right: auto;
    bottom: var(--map-tb-space);
    max-width: calc(100% - 90px);
    padding: 0;
  }
  .map-legend .ml-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: none;
    padding: 9px 13px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .map-legend .ml-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-135deg) translate(-1px, -1px);
    transition: transform .16s ease;
  }
  .map-legend.open .ml-toggle::after { transform: rotate(45deg) translate(-1px, -1px); }

  .map-legend .ml-body { display: none; padding: 0 13px 11px; }
  .map-legend.open .ml-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }
  .map-legend .ml-title { grid-column: 1 / -1; }
  .map-legend .legend-item { font-size: 11.5px; padding: 2px 0; }
  .map-legend .legend-dot { margin-right: 7px; }

  /* The donut and its nine-row key cannot share a 360px line. Stack them and
     let the label side shrink, so "M 4 - 4.9 ... 362 (62%)" stays on one row
     instead of pushing the card wider than the screen. */
  .donut-flex { flex-direction: column; align-items: stretch; gap: 16px; }
  .donut-hold { align-self: center; }
  .donut-legend .row { gap: 8px; font-size: 13px; }
  .donut-legend .row > span:not(.grow):not(.legend-dot) { min-width: 0; }
  .donut-legend .row .val { flex-shrink: 0; white-space: nowrap; }

  .footer-top { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* --- console: sidebar becomes a drawer --- */
  .app-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 56px minmax(0, 1fr);
    grid-template-areas: "top" "main";
  }

  .app-side {
    position: fixed;
    z-index: 1200;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(84vw, 300px);
    padding: 16px 14px 20px;
    background: #fff;
    border-right: 1px solid var(--line);
    box-shadow: var(--pop-shadow);
    transform: translateX(-100%);
    transition: transform .22s ease;
    overscroll-behavior: contain;
  }
  .app-side.open { transform: none; }
  .app-side .brand img { height: 52px; }

  .app-scrim { display: block; }
  body.app-drawer-open { overflow: hidden; }

  .app-burger { display: inline-grid; }
  .app-top { padding: 0 12px; gap: 10px; }
  .app-top h1 {
    flex: 1;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The clock and the freshness chip are the first things to go: the title
     and the language picker have to survive at 360px. */
  .app-clock, .app-updated { display: none; }
  /* Same story as the period chips: the pill is 44px but the select inside it
     was a 17px target. Let the select own the pill's height. */
  .app-lang { padding: 0 6px 0 9px; }
  .app-lang select { padding: 11px 0; font-size: 12.5px; }

  /* --- pages inside the console iframe --- */
  .embed .container { padding-left: 16px; padding-right: 16px; }
  .embed .side-content { padding: 20px 16px 48px; }
  .embed .side-nav { padding: 10px 16px; }
  .embed .page-head { padding-top: 20px; }
  /* Taller than it looks like it needs: the map is the page here, and the
     3D view's first-run gesture guide has to fit inside this frame. */
  .embed .map-shell { height: 72vh; min-height: 420px; }
  .embed .eq-table-wrap { max-height: 60vh; }
}

/* Narrow phones: 360px and below can no longer carry the LIVE pill next to
   the burger, the title and the language picker. */
@media (max-width: 400px) {
  .select-chip { flex-basis: 100%; }
}