/* =====================================================================
   WorldNaturalDisasters.com — Design System v2 "Obsidian Signal"
   A monitoring instrument, not a marketing page: calm dark surfaces,
   one signal accent, hazard colour reserved for actual hazards.
   ===================================================================== */

/* ---------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------- */
:root {
  /* Surfaces — elevation by lightness + hue shift, not opacity guesswork */
  --bg: #05070d;
  --surface-1: #0a0e17;
  --surface-2: #0e1420;
  --surface-3: #131b29;
  --glass: rgba(10, 14, 23, 0.78);

  /* Lines */
  --line: rgba(148, 165, 190, 0.10);
  --line-strong: rgba(148, 165, 190, 0.22);
  --line-bright: rgba(56, 225, 255, 0.35);

  /* Text */
  --text: #eef2f8;
  --text-2: #98a5b9;
  /* Raised from #5e6b80 on 2026-09-06 for WCAG 2.2 AA 1.4.3.
     The old value measured 3.20:1 on --surface-3 and 3.73:1 on --bg. It is
     used in 22 rules at --t-xs (12px) and --t-sm (14px) — alert timestamps,
     article bylines, form hints, table headers, the whole footer — and none of
     that is "large text", which starts at 24px (or 18.66px bold). So 4.5:1 was
     required and it was missing everywhere.
     This is the SMALLEST value that clears 4.5:1 against all four surfaces:
     hue (217deg) and saturation (15%) are untouched, lightness goes 44% -> 53%.
     It still measures well below --text-2 (6.92:1), so the three text tiers
     stay distinct rather than collapsing into two. */
  --text-3: #76849a;

  /* Signal — ONE accent. Cyan reads as instrumentation, not marketing. */
  --signal: #38e1ff;
  --signal-deep: #0fb8db;
  --signal-glow: rgba(56, 225, 255, 0.22);

  /* Hazard scale — reserved for severity, never decoration */
  --hz-extreme: #ff4d5e;
  --hz-severe: #ff8a3d;
  --hz-moderate: #ffc53d;
  --hz-minor: #4cc3ff;
  --safe: #35e0a1;

  /* Type */
  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale — major third (1.25), fluid at the top end.
     --t-base is 16px: body copy never goes below that (WCAG readability floor).
     --t-sm/--t-xs are for meta and labels only, never for running text. */
  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.15rem, 0.5vw + 1rem, 1.35rem);
  --t-xl: clamp(1.45rem, 1vw + 1.1rem, 1.9rem);
  --t-2xl: clamp(1.9rem, 2vw + 1.2rem, 2.75rem);
  --t-3xl: clamp(2.5rem, 4vw + 1rem, 4.25rem);

  /* Spacing — 4px base */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;

  /* Radius hierarchy — small controls, larger containers */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Elevation — layered, never a single flat blur */
  --e-1: 0 1px 2px rgba(0, 0, 0, .4);
  --e-2: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .35);
  --e-3: 0 4px 8px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .5);

  /* Motion — premium easing, short durations */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.33, 1, .68, 1);
  --dur-1: 140ms;
  --dur-2: 260ms;
  --dur-3: 480ms;

  --max: 1240px;
}

/* ---------------------------------------------------------------
   BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Atmospheric field: a faint signal wash + fine grain. No blobs, no gradients as decoration. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 460px at 78% -8%, rgba(56, 225, 255, .06), transparent 62%),
    radial-gradient(700px 400px at 8% 4%, rgba(15, 184, 219, .05), transparent 58%);
  pointer-events: none;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .22;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--signal); text-decoration: none; transition: color var(--dur-1) var(--ease); }
a:hover { color: #7eeaff; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: -0.04em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); letter-spacing: -0.015em; }

/* A card title is an h2 so the heading order runs h1 -> h2, and carries this
   class so it keeps the size it had as an h3. Screen-reader structure and the
   type scale are separate questions, and fixing one must not silently answer
   the other. */
.card-title { font-size: var(--t-lg); letter-spacing: -0.015em; }
p { margin: 0 0 var(--s-4); max-width: 68ch; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--s-5); }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

::selection { background: var(--signal); color: #04202a; }

/* ---------------------------------------------------------------
   ACCESSIBILITY
   --------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--signal); color: #04202a; padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* Icon system — inline SVG, currentColor, optically sized */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; stroke-width: 1.6; }
.ico-lg { width: 1.35em; height: 1.35em; }

/* ---------------------------------------------------------------
   HEADER
   --------------------------------------------------------------- */
/* ---------- App bar (site-wide, above the header) ----------

   Signal cyan, never the hazard palette. A red or orange strip pinned above
   every page of a disaster site is read as a warning by people scanning for
   exactly that, and --hz-* is reserved for severity as stated at the top of
   this file. Losing a few installs costs less than one person mistaking an
   advertisement for an alert.

   Not sticky. It scrolls away and .site-header below it pins instead, so a
   promotional strip never permanently occupies the top of a phone screen. */
.app-bar {
  background: linear-gradient(90deg, rgba(56,225,255,.13), rgba(56,225,255,.05) 60%, transparent);
  border-bottom: 1px solid var(--line-bright);
}
.app-bar-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 9px var(--s-5);
  display: flex; align-items: center; gap: var(--s-4);
}
.app-bar-icon {
  flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--signal-glow); color: var(--signal);
}
.app-bar-text { margin: 0; min-width: 0; flex: 1; line-height: 1.3; }
.app-bar-text strong {
  display: block; font-size: var(--t-sm); font-weight: 600; color: var(--text);
}
.app-bar-sub {
  display: block; font-size: var(--t-xs); color: var(--text-2); margin-top: 1px;
}
.app-bar-cta {
  flex: none; white-space: nowrap;
  padding: 7px 15px; border-radius: var(--r-md);
  background: var(--signal); color: #04222b;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .01em;
  /* 44px including padding — the site's minimum touch target. */
  min-height: 34px; display: inline-flex; align-items: center;
}
.app-bar-cta:hover { background: var(--signal-deep); }
.app-bar-close {
  flex: none; background: none; border: 0; cursor: pointer;
  color: var(--text-3); font-size: 22px; line-height: 1;
  width: 34px; height: 34px; border-radius: var(--r-md);
}
.app-bar-close:hover { color: var(--text); background: rgba(148,165,190,.10); }

@media (max-width: 620px) {
  /* The sub-line is the first thing to go: on a narrow screen the headline
     and the button are the whole message, and two lines of promo above the
     navigation is too much. */
  .app-bar-sub { display: none; }
  .app-bar-inner { gap: var(--s-3); padding: 8px var(--s-4); }
  .app-bar-text strong { font-size: var(--t-xs); }
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(6, 9, 15, .9);
  box-shadow: var(--e-2);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 66px;
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--text); }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px;
  background: linear-gradient(150deg, rgba(56, 225, 255, .18), rgba(56, 225, 255, .04));
  border: 1px solid var(--line-bright);
  color: var(--signal);
  position: relative;
}
.brand-mark::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 12px;
  border: 1px solid var(--signal);
  opacity: 0;
  animation: mark-pulse 3.2s var(--ease-out) infinite;
}
@keyframes mark-pulse {
  0% { transform: scale(.9); opacity: .5; }
  70%, 100% { transform: scale(1.25); opacity: 0; }
}
.brand-text {
  font-family: var(--font-display); font-weight: 500; font-size: 1rem;
  letter-spacing: -0.03em; line-height: 1;
}
.brand-text strong { font-weight: 700; color: var(--signal); }

.main-nav { display: flex; align-items: center; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  color: var(--text); border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer;
  line-height: 0;
}
.nav-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-menu a {
  position: relative; display: block; padding: 9px 13px;
  color: var(--text-2); font-size: var(--t-sm); font-weight: 500;
  border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease);
}
.nav-menu a::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 1px;
  background: var(--signal); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.nav-menu a:hover { color: var(--text); }
.nav-menu a:hover::after { transform: scaleX(1); }
.nav-cta {
  margin-left: var(--s-3);
  color: #04202a !important;
  background: linear-gradient(135deg, var(--signal), var(--signal-deep));
  font-weight: 600 !important;
  box-shadow: 0 0 0 0 var(--signal-glow);
  transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.nav-cta::after { display: none; }
.nav-cta:hover { box-shadow: 0 0 24px -2px var(--signal-glow); transform: translateY(-1px); }

@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .nav-menu {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--surface-1); border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--s-5) var(--s-5);
    box-shadow: var(--e-3);
  }
  .nav-menu.open { display: flex; }
  .nav-menu a { padding: 13px 4px; font-size: var(--t-md); }
  .nav-menu a::after { display: none; }
  .nav-cta { margin: var(--s-3) 0 0; text-align: center; }
}

/* ---------------------------------------------------------------
   BREADCRUMBS
   --------------------------------------------------------------- */
.breadcrumbs { padding: var(--s-5) var(--s-5) 0; font-size: var(--t-sm); }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  list-style: none; margin: 0; padding: 0; color: var(--text-3);
}
.breadcrumbs li + li::before { content: '/'; margin-right: var(--s-2); color: var(--text-3); }
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs a:hover { color: var(--signal); }
.breadcrumbs [aria-current] { color: var(--text); }

/* ---------------------------------------------------------------
   HERO — one composition, not a dashboard
   --------------------------------------------------------------- */
.hero { position: relative; padding: var(--s-9) 0 var(--s-8); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--s-8); align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.kicker {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal);
  background: rgba(56, 225, 255, .06);
  border: 1px solid rgba(56, 225, 255, .22);
  padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: var(--s-5);
}
.kicker .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--safe);
  box-shadow: 0 0 0 3px rgba(53, 224, 161, .18);
  animation: live-blink 2.4s var(--ease-out) infinite;
}
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 { margin-bottom: var(--s-5); }
.hero h1 .line-2 {
  background: linear-gradient(96deg, var(--signal) 10%, #9df3ff 55%, var(--signal-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--text-2); font-size: var(--t-md); max-width: 54ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-meta { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--text-3); }
.hero-meta strong { color: var(--text-2); font-weight: 500; }

#particles { position: absolute; inset: 0; z-index: -1; opacity: .45; }

/* ---------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5);
  border-radius: var(--r-md); border: 1px solid transparent;
  font-family: var(--font-body); font-weight: 600; font-size: var(--t-base);
  cursor: pointer; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.btn:active { transform: translateY(1px) scale(.995); }

.btn-primary {
  background: linear-gradient(135deg, var(--signal), var(--signal-deep));
  color: #04202a;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 24px -10px var(--signal);
}
.btn-primary:hover { color: #04202a; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 34px -10px var(--signal); transform: translateY(-1px); }
/* Light sweep on hover — one subtle flourish, not a shimmer party */
.btn-primary::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg); opacity: 0;
}
.btn-primary:hover::after { animation: sweep var(--dur-3) var(--ease-out); }
@keyframes sweep { 0% { left: -60%; opacity: .8; } 100% { left: 120%; opacity: 0; } }

.btn-ghost {
  background: rgba(148, 165, 190, .06);
  border-color: var(--line-strong); color: var(--text);
}
.btn-ghost:hover { background: rgba(148, 165, 190, .12); border-color: var(--line-bright); color: var(--text); }
.btn-danger { background: linear-gradient(135deg, var(--hz-extreme), #ff7a86); color: #2a060d; }
.btn-sm { min-height: 36px; padding: 0 var(--s-3); font-size: var(--t-xs); }

/* Touch devices have no hover and no cursor precision: every interactive control
   gets the full 44px target, regardless of how compact it looks on desktop. */
@media (pointer: coarse) {
  .btn, .btn-sm, .chip, .rte-btn, .pagination a, .pagination span, .repeater-del {
    min-height: 44px;
  }
  .nav-toggle { min-height: 44px; min-width: 44px; }
}

/* ---------------------------------------------------------------
   SEARCH
   --------------------------------------------------------------- */
.hero-search { position: relative; margin-top: var(--s-6); max-width: 520px; }
.hero-search input {
  width: 100%; min-height: 52px; padding: 0 var(--s-5) 0 46px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); color: var(--text);
  font-family: var(--font-body); font-size: var(--t-base);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.hero-search input:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 4px rgba(56, 225, 255, .1);
}
.hero-search input::placeholder { color: var(--text-3); }
.hero-search .search-icon {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); line-height: 0; pointer-events: none;
}
.search-results-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); box-shadow: var(--e-3);
  max-height: 340px; overflow-y: auto; display: none;
}
.search-results-dropdown.open { display: block; }
.search-results-dropdown a {
  display: block; padding: 11px 16px; color: var(--text);
  border-bottom: 1px solid var(--line); font-size: var(--t-sm);
}
.search-results-dropdown a:last-child { border-bottom: 0; }
.search-results-dropdown a:hover { background: rgba(56, 225, 255, .07); }

/* ---------------------------------------------------------------
   SURFACES
   --------------------------------------------------------------- */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
/* Top inner highlight — the detail that separates premium from flat */
.panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10) 22%, rgba(255, 255, 255, .10) 78%, transparent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  pointer-events: none;
}
.glass {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--s-4); }
/* Homepage "Global context": four, two or one across. auto-fill gave three
   and a lone fourth card at common laptop widths (seen live at 1100px).
   minmax(0, 1fr), not 1fr: a bare 1fr has a min-content floor and one long
   word can push a column wider than the screen.
   Five cards since the river flood forecast: with an odd count the FIRST card
   takes the whole row (1 + 4, or 1 + 2 + 2), so no row ends with one card
   alone. :nth-last-child(odd) on the first child is true exactly when the
   count is odd — with an even count nothing spans. */
.context-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 600px) {
  .context-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-grid > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1000px) { .context-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.section { padding: var(--s-8) 0; }
.section--tight { padding: var(--s-6) 0; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap;
}
.section-head h1, .section-head h2 { margin-bottom: var(--s-1); }
.section-head p { color: var(--text-2); margin: 0; font-size: var(--t-sm); }
.eyebrow {
  display: block; font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
  margin-bottom: var(--s-2);
}
.see-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
}
.see-all .ico { transition: transform var(--dur-2) var(--ease); }
.see-all:hover .ico { transform: translateX(3px); }

/* ---------------------------------------------------------------
   STATS
   --------------------------------------------------------------- */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)); gap: var(--s-3); }
.stat-tile {
  padding: var(--s-5) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-1);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.stat-tile:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.stat-tile .num {
  font-family: var(--font-display); font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--text);
}
.stat-tile .label {
  font-size: var(--t-xs); color: var(--text-3);
  text-transform: uppercase; letter-spacing: .1em; font-weight: 500;
}
.stat-tile.hot .num { color: var(--hz-extreme); }
.stat-tile.hot { border-color: rgba(255, 77, 94, .22); }

/* ---------------------------------------------------------------
   SEVERITY — never colour alone: bar count + label + colour
   --------------------------------------------------------------- */
.sev {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px 3px 8px; border-radius: var(--r-sm); border: 1px solid;
}
.sev-bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 9px; }
.sev-bars i { width: 2.5px; background: currentColor; border-radius: 1px; display: block; }
.sev-bars i:nth-child(1) { height: 40%; }
.sev-bars i:nth-child(2) { height: 62%; }
.sev-bars i:nth-child(3) { height: 82%; }
.sev-bars i:nth-child(4) { height: 100%; }
.sev-bars i.off { opacity: .22; }
.sev-extreme { color: var(--hz-extreme); border-color: rgba(255, 77, 94, .38); background: rgba(255, 77, 94, .09); }
.sev-severe { color: var(--hz-severe); border-color: rgba(255, 138, 61, .36); background: rgba(255, 138, 61, .08); }
.sev-moderate { color: var(--hz-moderate); border-color: rgba(255, 197, 61, .32); background: rgba(255, 197, 61, .07); }
.sev-minor { color: var(--hz-minor); border-color: rgba(76, 195, 255, .3); background: rgba(76, 195, 255, .07); }

.status-badge {
  font-family: var(--font-mono); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-3);
}
.status-badge.active { color: var(--safe); }

/* ---------------------------------------------------------------
   ALERT FEED
   --------------------------------------------------------------- */
.alert-item {
  position: relative;
  display: grid; grid-template-columns: 38px 1fr auto;
  gap: var(--s-4); align-items: start;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  transition: background var(--dur-1) var(--ease);
}
.alert-item::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--signal); transform: scaleY(0); transform-origin: center;
  transition: transform var(--dur-2) var(--ease);
}
.alert-item:hover { background: rgba(148, 165, 190, .045); color: var(--text); }
.alert-item:hover::before { transform: scaleY(1); }
.alert-item:last-child { border-bottom: 0; }
.alert-icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(148, 165, 190, .07);
  border: 1px solid var(--line);
  color: var(--text-2);
}
.alert-title { display: block; font-weight: 600; font-size: var(--t-base); margin-bottom: 3px; line-height: 1.35; }
.alert-meta {
  display: flex; flex-wrap: wrap; gap: 5px var(--s-3);
  font-size: var(--t-xs); color: var(--text-3); align-items: center;
}
.alert-time { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--text-3); white-space: nowrap; }
@media (max-width: 620px) {
  .alert-item { grid-template-columns: 32px 1fr; padding: var(--s-4); }
  .alert-icon { width: 32px; height: 32px; }
  .alert-time { grid-column: 2; }
}

/* Feed shell */
.feed-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line);
}
.feed-head h2 { margin: 0; font-size: var(--t-md); display: inline-flex; align-items: center; gap: var(--s-2); }
.feed-scroll { max-height: 430px; overflow-y: auto; scrollbar-width: thin; }
.feed-foot { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------
   CARDS (country / guide) — hover lift + signal edge
   --------------------------------------------------------------- */
.country-card {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); color: var(--text);
  transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.country-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-bright);
  box-shadow: var(--e-2);
  color: var(--text);
}
.country-flag {
  width: 38px; height: 28px; object-fit: cover; flex: none;
  border-radius: 4px; border: 1px solid var(--line-strong);
}
.country-card strong { font-weight: 600; letter-spacing: -0.01em; }
.country-card .meta { font-size: var(--t-xs); color: var(--text-3); }

/* ---------------------------------------------------------------
   MAP
   --------------------------------------------------------------- */
.map-shell {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line-strong); box-shadow: var(--e-2);
}
#livemap { height: 520px; background: #070a11; z-index: 1; }
.map-fullpage #livemap { height: calc(100vh - 230px); min-height: 460px; }
.map-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-4) 0; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 14px; cursor: pointer;
  border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  background: transparent; color: var(--text-2);
  font-family: var(--font-body); font-size: var(--t-sm);
  transition: all var(--dur-1) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-bright); }
.chip[aria-pressed="true"] {
  color: #04202a; background: var(--signal); border-color: var(--signal); font-weight: 600;
}
.map-attribution-note { font-size: var(--t-xs); color: var(--text-3); padding-top: var(--s-3); }
.map-fallback { padding: var(--s-7); text-align: center; color: var(--text-2); }
.map-fs-btn { position: absolute; top: 12px; right: 12px; z-index: 500; }

/* Markers — pulse only for the two highest severities */
.wnd-marker { position: relative; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.wnd-marker::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid currentColor; animation: ping 2.4s var(--ease-out) infinite; opacity: 0;
}
@keyframes ping { 0% { transform: scale(.6); opacity: .85; } 100% { transform: scale(1.6); opacity: 0; } }
.wnd-marker.m-extreme { background: var(--hz-extreme); color: var(--hz-extreme); }
.wnd-marker.m-severe { background: var(--hz-severe); color: var(--hz-severe); }
.wnd-marker.m-moderate { background: var(--hz-moderate); color: var(--hz-moderate); width: 13px; height: 13px; }
.wnd-marker.m-minor { background: var(--hz-minor); color: var(--hz-minor); width: 11px; height: 11px; }
.wnd-marker.m-moderate::after, .wnd-marker.m-minor::after { display: none; }

/* USGS ShakeMap intensity labels on an earthquake's map: neutral, never a hazard colour. */
.shake-label { width: 0; height: 0; }
.shake-label span { position: absolute; transform: translate(-50%, -50%); font: 600 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  color: #e8edf5; background: rgba(5,7,13,.72); padding: 2px 4px; border-radius: 3px; white-space: nowrap; }

/* ---------------------------------------------------------------
   TABLES
   --------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface-1);
}
table.data { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 620px; }
table.data th, table.data td { text-align: left; padding: 13px var(--s-5); border-bottom: 1px solid var(--line); }
table.data tr:last-child td { border-bottom: 0; }
table.data th {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-3);
  background: rgba(148, 165, 190, .04);
  position: sticky; top: 0;
}
table.data td.num, table.data td.mono { font-variant-numeric: tabular-nums; }
table.data tbody tr { transition: background var(--dur-1) var(--ease); }
table.data tbody tr:hover td { background: rgba(148, 165, 190, .04); }

/* ---------------------------------------------------------------
   FORMS
   --------------------------------------------------------------- */
.form-grid { display: grid; gap: var(--s-5); max-width: 620px; }
label { font-weight: 600; font-size: var(--t-sm); display: block; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="search"], input[type="password"], select, textarea {
  width: 100%; min-height: 44px; padding: 11px 14px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); color: var(--text);
  font-family: var(--font-body); font-size: var(--t-base);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--signal);
  box-shadow: 0 0 0 4px rgba(56, 225, 255, .1);
}
select[multiple] { min-height: 150px; padding: var(--s-2); }
textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field-hint { font-size: var(--t-xs); color: var(--text-3); margin-top: 5px; }
.checkbox-row { display: flex; align-items: flex-start; gap: var(--s-3); font-weight: 400; font-size: var(--t-sm); }
.checkbox-row input { width: auto; min-height: auto; margin-top: 3px; accent-color: var(--signal); }
.honeypot { position: absolute; left: -9999px; }

.notice {
  padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
  border: 1px solid; font-size: var(--t-sm); margin-bottom: var(--s-5);
}
.notice-ok { border-color: rgba(53, 224, 161, .35); background: rgba(53, 224, 161, .07); color: var(--safe); }
.notice-warn { border-color: rgba(255, 197, 61, .35); background: rgba(255, 197, 61, .07); color: var(--hz-moderate); }

/* ---------------------------------------------------------------
   PROSE
   --------------------------------------------------------------- */
.prose { max-width: 70ch; font-size: var(--t-md); line-height: 1.75; color: #dbe3ee; }
.prose h2 { margin-top: 1.9em; }
.prose h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.35em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--signal); }
.prose blockquote {
  border-left: 2px solid var(--signal); margin: 1.4em 0;
  padding: 2px 0 2px var(--s-5); color: var(--text-2); font-style: italic;
}
.prose code {
  font-family: var(--font-mono); font-size: .875em;
  background: rgba(148, 165, 190, .12); padding: 2px 6px; border-radius: var(--r-sm);
}

/* Code blocks. Added 2026-08-09 with /api, the first page on the site to use
   <pre>. There was no `pre` rule at all, so the example URLs — 95 characters
   with no spaces to break at — pushed the whole page sideways on a phone.
   `overflow-x: auto` rather than wrapping, matching `.table-wrap`: a URL you
   are meant to copy should not be silently broken across lines. */
.prose pre {
  overflow-x: auto;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3);
  margin: 0 0 1.1em;
}
.prose pre code {
  background: none; padding: 0; font-size: .85em; white-space: pre;
}
.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
  color: var(--text-3); font-size: var(--t-sm); margin-bottom: var(--s-6);
  padding-bottom: var(--s-5); border-bottom: 1px solid var(--line);
  align-items: center;
}
.toc { font-size: var(--t-sm); }
.toc strong { display: block; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.toc ol { margin: 0; padding-left: 1.2em; }
.toc li { margin-bottom: 5px; }
.demo-banner {
  border: 1px dashed rgba(255, 197, 61, .5); color: var(--hz-moderate);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-4);
  font-size: var(--t-sm); margin-bottom: var(--s-5);
}

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */
details.faq-item {
  border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: var(--s-2); background: var(--surface-1);
  transition: border-color var(--dur-2) var(--ease);
}
details.faq-item[open] { border-color: var(--line-strong); }
details.faq-item summary {
  cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: var(--s-4);
  align-items: center; font-size: var(--t-base);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: ''; width: 9px; height: 9px; flex: none;
  border-right: 1.5px solid var(--signal); border-bottom: 1.5px solid var(--signal);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-2) var(--ease);
}
details.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
details.faq-item .faq-body { padding: 0 var(--s-5) var(--s-4); color: var(--text-2); }
details.faq-item .faq-body p { margin: 0; }

/* ---------------------------------------------------------------
   SKELETON / EMPTY / ERROR
   --------------------------------------------------------------- */
.skeleton {
  position: relative; overflow: hidden;
  background: rgba(148, 165, 190, .07); border-radius: var(--r-sm); min-height: 14px;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(238, 242, 248, .07), transparent);
  animation: shimmer 1.6s var(--ease-out) infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.empty-state { text-align: center; padding: var(--s-8) var(--s-5); color: var(--text-2); }
.empty-state .glyph {
  display: inline-grid; place-items: center; width: 54px; height: 54px;
  border-radius: var(--r-lg); margin-bottom: var(--s-4);
  background: rgba(148, 165, 190, .06); border: 1px solid var(--line);
  color: var(--text-3);
}
.empty-state p { margin: 0 auto; max-width: 46ch; font-size: var(--t-sm); }

/* ---------------------------------------------------------------
   PAGINATION
   --------------------------------------------------------------- */
.pagination { display: flex; gap: var(--s-2); justify-content: center; margin: var(--s-7) 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 42px; min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--s-3); border-radius: var(--r-md);
  border: 1px solid var(--line-strong); color: var(--text-2);
  font-family: var(--font-mono); font-size: var(--t-sm);
  transition: all var(--dur-1) var(--ease);
}
.pagination a:hover { border-color: var(--line-bright); color: var(--text); }
.pagination [aria-current] { background: var(--signal); color: #04202a; border-color: var(--signal); font-weight: 700; }

/* ---------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------- */
.site-footer {
  margin-top: var(--s-9);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(10, 14, 23, .5), rgba(5, 7, 13, .95));
  position: relative;
}
.site-footer::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-bright) 30%, var(--line-bright) 70%, transparent);
}
.footer-grid {
  display: grid; grid-template-columns: 1.7fr repeat(4, 1fr);
  gap: var(--s-6); padding: var(--s-8) var(--s-5) var(--s-6);
  max-width: var(--max); margin: 0 auto;
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  .footer-about { grid-column: 1 / -1; }
}
.footer-col h2 {
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--text-3);
  margin-bottom: var(--s-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--text-2); font-size: var(--t-sm); }
.footer-col a:hover { color: var(--signal); }
.footer-about p { color: var(--text-3); font-size: var(--t-sm); max-width: 42ch; }
.footer-about .brand { margin-bottom: var(--s-3); }
.footer-disclaimer {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  border: 1px solid rgba(255, 77, 94, .22); background: rgba(255, 77, 94, .05);
  border-radius: var(--r-md); color: #ffb3ba; font-size: var(--t-xs);
}
.footer-bottom {
  border-top: 1px solid var(--line);
  padding: var(--s-4) var(--s-5) var(--s-6);
  max-width: var(--max); margin: 0 auto;
}
.footer-bottom p { color: var(--text-3); font-size: var(--t-xs); margin: 0; max-width: none; }
.footer-sources { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); }
.footer-sources span { color: var(--text-3); font-family: var(--font-mono); font-size: var(--t-xs); }

/* ---------------------------------------------------------------
   UTILITY
   --------------------------------------------------------------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.text-dim { color: var(--text-2); } .text-faint { color: var(--text-3); }
.small { font-size: var(--t-sm); }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-sm);
  background: rgba(148, 165, 190, .08); border: 1px solid var(--line);
  color: var(--text-2); font-family: var(--font-mono); font-size: var(--t-xs);
}
.link-card { display: block; color: var(--text); transition: transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.link-card:hover { transform: translateY(-3px); border-color: var(--line-bright); box-shadow: var(--e-2); color: var(--text); }
.link-card h3 { margin-bottom: var(--s-2); }

/* Scroll reveal.
   The hidden state is scoped to .js-reveal, which JavaScript adds to <html> only
   after the observer is wired up. If the script fails, never loads, or the browser
   lacks IntersectionObserver, the class is never added and every section renders
   normally — content is never hidden by a broken enhancement. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); }
.js-reveal [data-reveal].revealed {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}

/* ---------------------------------------------------------------
   ADVERTISING
   Slots reserve their height up front so an ad can never shift content
   (Core Web Vitals), and are always visually separated and labelled so
   an ad can never read as a disaster alert.
   --------------------------------------------------------------- */
.ad-slot {
  display: block; margin: var(--s-7) auto; max-width: 100%;
  min-height: var(--ad-h, 280px);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(148, 165, 190, .025);
  text-align: center;
  contain: layout paint;
}
.ad-label {
  display: block; margin-bottom: var(--s-2);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3);
}
@media (max-width: 900px) {
  .ad-slot { min-height: var(--ad-h-mobile, 250px); }
  .ad-slot--desktop-only { display: none; }
}
@media print { .ad-slot { display: none !important; } }

/* ---------------------------------------------------------------
   CONSENT BANNER
   --------------------------------------------------------------- */
.consent {
  position: fixed; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); z-index: 300;
  max-width: 640px; margin: 0 auto;
  background: var(--glass); backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--e-3); padding: var(--s-5);
}
.consent p { font-size: var(--t-sm); color: var(--text-2); margin: 0 0 var(--s-4); max-width: none; }
.consent-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.consent-actions .btn { flex: 1 1 auto; min-width: 140px; }
@media (max-width: 520px) { .consent-actions .btn { flex-basis: 100%; } }

/* ---------------------------------------------------------------
   ADMIN
   --------------------------------------------------------------- */
.admin-layout { display: grid; grid-template-columns: 216px 1fr; gap: var(--s-6); padding: var(--s-6) 0; min-height: 70vh; }
@media (max-width: 860px) { .admin-layout { grid-template-columns: 1fr; } }
.admin-nav { align-self: start; position: sticky; top: 86px; padding: var(--s-2); }
.admin-nav ul { list-style: none; margin: 0; padding: 0; }
.admin-nav a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 13px; border-radius: var(--r-sm);
  color: var(--text-2); font-size: var(--t-sm);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.admin-nav a:hover { background: rgba(148, 165, 190, .07); color: var(--text); }
.admin-nav a.active { background: rgba(56, 225, 255, .1); color: var(--signal); font-weight: 600; }

/* Rich text editor */
.rte-wrap { border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); }
.rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: var(--s-2); border-bottom: 1px solid var(--line); background: rgba(148, 165, 190, .04); }
.rte-btn {
  background: rgba(148, 165, 190, .08); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--r-sm); min-height: 32px; padding: 0 11px; font-size: var(--t-xs);
  cursor: pointer; font-family: var(--font-body);
  transition: background var(--dur-1) var(--ease);
}
.rte-btn:hover { background: rgba(56, 225, 255, .14); }
.rte-html { margin-left: auto; font-family: var(--font-mono); }
.rte-body { min-height: 340px; max-height: 60vh; overflow-y: auto; padding: var(--s-5); outline: none; font-size: var(--t-md); line-height: 1.7; }
.rte-body h2 { font-size: var(--t-xl); margin: 1.2em 0 .4em; }
.rte-body h3 { font-size: var(--t-lg); margin: 1em 0 .35em; }
.rte-body p { margin: 0 0 .9em; }
.rte-body ul, .rte-body ol { padding-left: 1.4em; margin: 0 0 .9em; }
.rte-body blockquote { border-left: 2px solid var(--signal); margin: 1em 0; padding-left: var(--s-4); color: var(--text-2); }

.repeater-row {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-3); align-items: end;
  padding: var(--s-4); margin-bottom: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(148, 165, 190, .03);
}
@media (max-width: 640px) { .repeater-row { grid-template-columns: 1fr; } }
.repeater-label { font-size: var(--t-xs); font-weight: 600; color: var(--text-3); margin: 0; }
.repeater-del {
  background: rgba(255, 77, 94, .1); border: 1px solid rgba(255, 77, 94, .3); color: var(--hz-extreme);
  border-radius: var(--r-sm); width: 40px; height: 44px; cursor: pointer;
}
.repeater-del:hover { background: rgba(255, 77, 94, .2); }
.repeater-add { margin-top: var(--s-1); }

/* ---------------------------------------------------------------
   PRINT
   --------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #111; }
  body::before, body::after { display: none; }
  .site-header, .site-footer, .breadcrumbs, .btn, .nav-menu, .map-shell { display: none !important; }
  .panel, .glass { border: 1px solid #ccc; background: #fff; }
  a { color: #111; text-decoration: underline; }
  .prose { max-width: none; color: #111; }
}

/* ---------------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .brand-mark::after, .wnd-marker::after, .kicker .dot { animation: none; opacity: 0; }
  .kicker .dot { opacity: 1; }
  #particles { display: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Android app: /android-app page and the contextual promo ---------- */
/* The promo appears on country and event pages only — never on a safety
   guide, an emergency contact list or a live alert. Same rule the app
   enforces for its own adverts, for the same reason: somebody reading those
   during an emergency is not a person to sell anything to. */

/* The shots column needs more than the default hero split gives it. With the
   inherited 1.35fr/1fr the strip was 489px wide, so `width: 32%` rendered each
   phone at 157px — too small to read, which is the whole point of showing a
   screenshot. */
.app-hero { align-items: center; gap: 40px; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
.hero-lead { font-size: 1.12rem; line-height: 1.55; max-width: 46ch; }

/* Screenshots have to be big enough to actually read. The first version
   capped them at 190px, which rendered 158px wide on a 1440px screen — at
   that size a phone screenshot conveys nothing at all and simply looks
   broken. These are served at 560px and shown up to 250px. */
.app-shots { display: flex; gap: 16px; justify-content: center; align-items: center; }
/* TWO screenshots, not three. Three fitted the column at 194px each, which is
   still too small to read what the app actually says — and reading it is the
   only reason to show a screenshot at all. Two at ~285px show the watchlist
   and the map legibly, which is what a visitor is trying to judge. */
.app-shots img {
  width: calc(50% - 8px); max-width: 285px; height: auto; border-radius: 16px;
  border: 1px solid var(--hairline, rgba(0,0,0,.12));
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
/* The middle screenshot sits slightly proud so the three read as a set
   rather than as a row of unrelated pictures. */
.app-shots img:nth-child(2) { transform: translateY(-18px); }
/* The third is a bonus for very wide screens only. */
.app-shots img:nth-child(3) { display: none; }
@media (min-width: 1500px) {
  .app-shots img:nth-child(3) { display: block; }
  .app-shots img { width: calc(33.333% - 11px); max-width: 260px; }
}

/* Constrained rather than full-bleed. At the container's 1240px a paragraph
   runs to about 150 characters a line, which is past the point anyone reads
   comfortably — and it left the right half of the panel visibly empty. */
.app-why, .app-restraint { margin: 32px 0; max-width: 860px; }
.hero-actions + .small { margin-top: 14px; }
.app-restraint ul { margin: 12px 0 0; padding-left: 20px; }
.app-restraint li { margin-bottom: 8px; }
.app-cta-foot { margin-top: 32px; }

/* Shown while PLAY_APP_URL is empty — the listing is not live yet, so there
   is deliberately nothing to click. */
.app-soon { opacity: .62; cursor: default; pointer-events: none; }

/* The contextual block. Quiet on purpose: it sits below the content, never
   floats, never overlays, and is one block per page.

   The mark is the APP ICON, not a screenshot. A 74px-wide screenshot is a
   smudge; an icon is drawn to work at that size. */
.app-promo {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin: 28px 0 0; padding: 18px 20px;
}
.app-promo-icon {
  width: 56px; height: 56px; flex: 0 0 auto; border-radius: 13px;
  border: 1px solid var(--hairline, rgba(0,0,0,.12));
}
.app-promo-body { flex: 1 1 260px; min-width: 220px; }
.app-promo-body p { margin: 4px 0 0; }
.app-promo .btn { flex: 0 0 auto; }

/* Home page: text and a button, no image. It sits in the existing content
   flow rather than as a banner. */
.app-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-top: 28px; padding: 16px 20px;
}
.app-strip-body { flex: 1 1 320px; }
.app-strip-body p { margin: 4px 0 0; }


@media (max-width: 640px) {
  .app-shots { gap: 10px; }
  .app-shots img:nth-child(2) { transform: none; }
  .app-shots img:nth-child(3) { display: none; }
  .app-shots img { max-width: 46%; width: 46%; }
  .app-promo { gap: 14px; }
  .app-promo-icon { width: 48px; height: 48px; }
}

/* ---------- Satellite before and after (/satellite-before-after) ----------
   The map box has its aspect ratio set inline from the image size, so the
   comparison arrives into space that is already there. */
.sat-map { position: relative; width: 100%; min-height: 240px; max-height: 72vh; background: #070a11; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; z-index: 1; }
.sat-map-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; text-align: center; }
.sat-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 10px; }
.sat-label { display: inline-block; max-width: 44vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(5, 7, 13, .82); color: var(--text); font-family: var(--font-mono); font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-strong); }
.sat-pair img, .sat-card img { width: 100%; height: auto; display: block; border-radius: 8px; background: #070a11; }
.sat-pair figcaption { margin-top: 6px; }
.sat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--s-5); }
.sat-card { margin: 0; }
/* The plugin removes the focus outline from its slider; a keyboard user needs one. */
.leaflet-sbs-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--signal); }
.leaflet-sbs-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--signal); }

/* ---------- Location tools (/earthquake-history-near-me, /disasters-near-me) ---------- */
.tool-form { margin: var(--s-5) 0; }
.tool-form-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: end; }
.tool-form-row label { grid-column: 1 / -1; margin-bottom: 0; }
.tool-form-row input { width: 100%; min-width: 0; }
.tool-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; align-items: end; margin-top: 12px; }
.tool-form-grid label { margin: 0; }
.tool-form-grid select { width: 100%; margin-top: 6px; }
.tool-map { position: relative; width: 100%; height: 380px; margin: 14px 0; background: #070a11; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; z-index: 1; }
.tool-map-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 16px; text-align: center; }
@media (max-width: 600px) { .tool-map { height: 300px; } }

/* ---------- Disaster replay (/disaster-replay) ---------- */
.replay-map { height: 460px; }
@media (max-width: 600px) { .replay-map { height: 340px; } }
.replay-days td:last-child { width: 45%; }
.replay-bar { display: block; height: 8px; min-width: 1px; background: var(--text-3); border-radius: 2px; }
.replay-map .timecontrol-date { color: #0a0e17; }
/* The player's buttons, drawn with plain ASCII: the Glyphicons font is not loaded, and arrow
   characters are missing from some system fonts, which showed empty boxes in testing. Scoped
   to .replay-map so they outrank the plugin's stylesheet, which loads after this one. */
.replay-map .leaflet-bar-timecontrol .leaflet-control-timecontrol:before { font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: 26px; }
.replay-map .timecontrol-play:before { content: ">"; }
.replay-map .timecontrol-play.pause:before { content: "||"; }
.replay-map a.timecontrol-play.loading:before, .replay-map .timecontrol-date.loading:before { content: "..."; }
.replay-map .timecontrol-forward:before { content: ">|"; }
.replay-map .timecontrol-backward:before { content: "|<"; }
.replay-map .timecontrol-stop:before { content: "[]"; }
.replay-map .timecontrol-loop:before { content: "~"; }
.replay-map .timecontrol-speed:before { content: ">>"; }

/* ---------- Compare disaster history (/disaster-history) ---------- */
.history-chart { height: 360px; background: transparent; }
.globe-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin: 0 4px 0 10px; }
.globe-key:first-child { margin-left: 0; }
.globe-map { position: relative; width: 100%; height: min(72vh, 620px); min-height: 360px; margin: 14px 0 6px; background: #05070d; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; }
.globe-list { list-style: none; padding: 0; margin: 0; }
.globe-list li { margin-bottom: 8px; }
.maplibregl-popup-content { background: var(--surface-2); color: var(--text); }
.maplibregl-popup-tip { border-top-color: var(--surface-2) !important; border-bottom-color: var(--surface-2) !important; }