/* ==========================================================================
   disastr.xyz Shared Styles
   ========================================================================== */

/* Import semantic design tokens (source of truth) */
@import url("styles/tokens.css");

/* Disaster category colors — mapped to the Brand & Social Kit palette.
   Each disaster points at a semantic category token from styles/tokens.css,
   so light/dark theming is inherited for free (the category tokens remap
   under [data-theme="dark"] there). */
:root {
  --cat-earthquake: var(--cat-grape);
  --cat-earthquake-bg: var(--cat-grape-bg);
  --cat-volcano: var(--cat-berry);
  --cat-volcano-bg: var(--cat-berry-bg);
  --cat-wildfire: var(--cat-gold);
  --cat-wildfire-bg: var(--cat-gold-bg);
  --cat-storm: var(--cat-teal);
  --cat-storm-bg: var(--cat-teal-bg);
  --cat-flood: var(--cat-sky);
  --cat-flood-bg: var(--cat-sky-bg);
  --cat-drought: var(--cat-clay);
  --cat-drought-bg: var(--cat-clay-bg);
  --cat-heatwave: var(--cat-ember);
  --cat-heatwave-bg: var(--cat-ember-bg);

  /* Legacy aliases for smooth migration */
  --color-earthquake: var(--cat-earthquake);
  --color-earthquake-bg: var(--cat-earthquake-bg);
  --color-volcano: var(--cat-volcano);
  --color-volcano-bg: var(--cat-volcano-bg);
  --color-wildfire: var(--cat-wildfire);
  --color-wildfire-bg: var(--cat-wildfire-bg);
  --color-storm: var(--cat-storm);
  --color-storm-bg: var(--cat-storm-bg);
  --color-flood: var(--cat-flood);
  --color-flood-bg: var(--cat-flood-bg);
  --color-drought: var(--cat-drought);
  --color-drought-bg: var(--cat-drought-bg);
  --color-heatwave: var(--cat-heatwave);
  --color-heatwave-bg: var(--cat-heatwave-bg);

  /* Map filter for dark mode */
  --map-filter: none;
}

[data-theme="dark"] {
  --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.95);

  /* Disaster colors inherit dark variants automatically — the underlying
     category tokens (--cat-grape, --cat-berry, …, --cat-clay) are remapped
     for dark mode in styles/tokens.css, so no overrides are needed here. */
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.5;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.scrollable-list {
  scrollbar-gutter: stable;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: var(--space-2);
  height: var(--space-2);
}
::-webkit-scrollbar-track { background: var(--color-surface-sunken); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

.glass-panel {
  background: var(--color-surface);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Logo links */
.logo-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
}

/* Navigation items in header */
.splash-nav {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.nav-link:hover {
  color: var(--color-primary);
  background-color: var(--color-focus-ring);
}

.nav-link.active {
  color: var(--color-primary);
  background-color: var(--color-focus-ring);
  font-weight: 700;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: none;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  text-decoration: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background-color: var(--color-focus-ring);
  color: var(--color-primary);
  border: 1.5px solid var(--color-border);
}
.btn-secondary:hover {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn-outline:hover {
  border-color: var(--color-primary);
  background-color: var(--color-focus-ring);
  color: var(--color-primary);
}

.btn-icon {
  width: 44px;
  height: 44px;
  padding: 0;            /* override .btn padding so the icon isn't squashed */
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.btn-icon i, .btn-icon svg { flex: none; }
.btn-icon:hover {
  background-color: var(--color-focus-ring);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-block {
  width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-earthquakes { background-color: var(--color-earthquake-bg); color: var(--color-earthquake); }
.badge-volcanoes { background-color: var(--color-volcano-bg); color: var(--color-volcano); }
.badge-wildfires { background-color: var(--color-wildfire-bg); color: var(--color-wildfire); }
.badge-storms { background-color: var(--color-storm-bg); color: var(--color-storm); }
.badge-floods { background-color: var(--color-flood-bg); color: var(--color-flood); }
.badge-droughts { background-color: var(--color-drought-bg); color: var(--color-drought); }
.badge-heatwaves { background-color: var(--color-heatwave-bg); color: var(--color-heatwave); }

/* Custom Map Marker classes */
.custom-marker { background: none; border: none; }
.marker-pin {
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 0;
  background: var(--color-primary);
  position: absolute;
  transform: rotate(-45deg);
  left: 50%; top: 50%;
  margin: -19px 0 0 -19px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-on-primary);
  box-shadow: var(--shadow-md);
  transition: all 0.2s ease;
}
.marker-pin:hover { transform: rotate(-45deg) scale(1.1); }
.marker-pin-inner { transform: rotate(45deg); display: flex; align-items: center; justify-content: center; }
.pin-earthquakes { background-color: var(--color-earthquake); }
.pin-volcanoes { background-color: var(--color-volcano); }
.pin-wildfires { background-color: var(--color-wildfire); }
.pin-storms { background-color: var(--color-storm); }
.pin-floods { background-color: var(--color-flood); }
.pin-droughts { background-color: var(--color-drought); }
.pin-heatwaves { background-color: var(--color-heatwave); }

.user-pulse-marker { background: none; border: none; }
.user-pulse {
  width: 14px; height: 14px; background-color: var(--cat-gold); border: 2px solid var(--color-on-primary); border-radius: 50%;
  position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; box-shadow: var(--shadow-sm); z-index: 10;
}
.user-pulse-ring {
  border: 3px solid var(--cat-gold); border-radius: 50%; height: 40px; width: 40px;
  position: absolute; left: 50%; top: 50%; margin: -20px 0 0 -20px; animation: user-ping 1.6s ease-out infinite; opacity: 0;
}

/* ==========================================================================
   Header & App Shell
   ========================================================================== */

.app-header {
  height: var(--space-8);
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* Logo + actions take equal flex shares so the centred nav sits dead-centre
   regardless of per-page tagline / action-button widths (no more bounce). */
.header-logo { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.logo-icon { color: var(--color-primary); animation: spin-slow 20s linear infinite; display: flex; align-items: center; }
.logo-text h1 { font-size: var(--text-lg); font-weight: 800; color: var(--color-text); }
.logo-text h1 span { color: var(--color-primary); font-size: var(--text-sm); font-weight: 700; }
.logo-text .tagline { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 0; justify-content: flex-end; }

/* Page-specific action buttons (alerts + ping). Live on the El Niño tracker and
   the live map; on every other page they keep their box (visibility:hidden) so
   the centred nav doesn't shift between pages. */
.header-tools { display: flex; align-items: center; gap: var(--space-3); }
.header-tools--hidden { visibility: hidden; }

/* ==========================================================================
   Mobile Burger Menu (full-page takeover) — hidden on desktop
   ========================================================================== */
.menu-btn { display: none; }
/* Inline Material glyphs need explicit sizing — the shared .btn padding would
   otherwise squash them inside the fixed-size icon button. */
.menu-btn, .menu-close-btn { padding: 0; }
.menu-btn svg, .menu-close-btn svg { width: 24px; height: 24px; flex: none; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-8);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  visibility: hidden;
  overflow-y: auto;
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }

.mobile-menu-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-6); padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu-title { font-size: var(--text-2xl); font-weight: 800; color: var(--color-text); }

.mobile-menu-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.mobile-menu-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-3); border-radius: var(--radius-lg);
  font-size: var(--text-lg); font-weight: 700; text-decoration: none;
  color: var(--color-text); border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mobile-menu-link:hover { background-color: var(--color-focus-ring); }
.mobile-menu-link.active { background-color: var(--color-focus-ring); color: var(--color-primary); border-color: var(--color-border); }

.mobile-menu-mode { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.mobile-menu-subtitle {
  display: block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--color-text-muted); margin-bottom: var(--space-3);
}
.mode-toggle-row {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: 14px; cursor: pointer;
  background-color: var(--color-surface); border: 1px solid var(--color-border);
  color: var(--color-text); font-family: var(--font-display); font-size: 15px; font-weight: 700;
  transition: border-color 0.2s ease;
}
.mode-toggle-row:hover { border-color: var(--color-primary); }
.mode-toggle-icons { display: inline-flex; align-items: center; color: var(--color-primary); }
body.menu-open { overflow: hidden; }

/* ==========================================================================
   Accordion (collapsible panels, e.g. map page "Filters")
   ========================================================================== */
.accordion-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0; margin-bottom: var(--space-3);
  background: none; border: none; cursor: default;
  font-family: var(--font-display);
}
.accordion-title {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--color-text-muted);
}
.accordion-title i { width: 16px; height: 16px; }
.accordion-chevron { width: 18px; height: 18px; color: var(--color-text-muted); transition: transform 0.25s ease; display: none; }
.accordion.open .accordion-chevron { transform: rotate(180deg); }
/* Desktop: panels are always open — collapsing is a mobile-only affordance. */
.accordion-body { display: block; }
/* The Active Events feed must fill the sidebar height on desktop. */
.feed-accordion > .accordion-body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.feed-header.accordion-toggle { margin-bottom: 0; }

/* Accordions that stay collapsible on desktop too (e.g. El Niño Filters,
   collapsed on load so the impacts list shows without scrolling). */
.accordion.always-collapsible > .accordion-toggle,
.accordion.always-collapsible .feed-header.accordion-toggle { cursor: pointer; }
.accordion.always-collapsible .accordion-chevron { display: inline-flex; }
.accordion.always-collapsible:not(.open) > .accordion-body { display: none; }

.app-layout {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

/* ==========================================================================
   SPLASH LANDING PAGE STYLING (index.html)
   ========================================================================== */

.splash-body {
  overflow-y: auto;
  height: auto;
}

.splash-body .app-header {
  position: sticky;
  top: 0;
}

/* ==========================================================================
   HERO — "Live Tracking" full-bleed animated map
   A bespoke dark scene: navy→gold sky, drifting map dot-grid, slow radar
   sweep, soft sun, and category-tinted event pings blooming on the open
   right side. The sky/scrim/sun hex values are one-off scene paint (like
   --scene-*), not UI chrome; event pings reuse the --cat-* category tokens.
   ========================================================================== */
.hero-section {
  position: relative;
  width: 100%;
  min-height: min(780px, 94vh);
  overflow: hidden;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.hero-sky {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(118deg, #0C2356 0%, #173F8E 40%, #2E6BBE 66%, #C9D7E0 92%, #EBD49A 110%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.3px, transparent 1.6px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(125% 120% at 26% 42%, #000 38%, transparent 80%);
  mask-image: radial-gradient(125% 120% at 26% 42%, #000 38%, transparent 80%);
  animation: hero-pan 36s linear infinite;
}
.hero-radar {
  position: absolute; top: 50%; left: 74%; z-index: 0;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(140, 185, 240, 0.26), rgba(140, 185, 240, 0.05) 14%, transparent 26%, transparent 100%);
  animation: hero-spin 14s linear infinite;
}
.hero-sun {
  position: absolute; top: 64px; right: 140px; z-index: 0;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 154, 0.9), rgba(255, 201, 110, 0.45) 44%, transparent 70%);
  filter: blur(6px);
  animation: hero-sun 9s ease-in-out infinite;
}

/* event pings — tint set per-ping via --ping, drawn from category tokens */
.hero-pings { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-ping { position: absolute; color: var(--ping); }
.hero-ping .ring {
  position: absolute; left: 50%; top: 50%;
  width: var(--ring); height: var(--ring);
  margin: calc(var(--ring) / -2) 0 0 calc(var(--ring) / -2);
  border-radius: 50%; border: 2px solid currentColor;
  animation: hero-ping var(--dur, 3.6s) ease-out infinite;
  animation-delay: var(--delay, 0s);
}
.hero-ping .dot {
  position: absolute; left: 50%; top: 50%;
  width: var(--dot); height: var(--dot);
  margin: calc(var(--dot) / -2) 0 0 calc(var(--dot) / -2);
  border-radius: 50%; background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: hero-dot var(--dur, 3.6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.hp1 { top: 24%; left: 60%; --ping: var(--cat-gold);  --ring: 64px; --dot: 10px; --dur: 3.2s; }
.hp2 { top: 62%; left: 82%; --ping: var(--cat-berry); --ring: 54px; --dot: 9px;  --dur: 4.2s; --delay: .7s; }
.hp3 { top: 78%; left: 64%; --ping: #9DC4E8;          --ring: 60px; --dot: 9px;  --dur: 3.7s; --delay: 2.1s; }
.hp4 { top: 40%; left: 90%; --ping: #fff;             --ring: 46px; --dot: 8px;  --dur: 4.6s; --delay: 1.2s; }
.hp5 { top: 50%; left: 71%; --ping: var(--cat-teal);  --ring: 40px; --dot: 8px;  --dur: 5s;   --delay: 3s; }

.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 22, 58, 0.5), rgba(7, 22, 58, 0.12) 46%, transparent 62%);
}

@keyframes hero-pan { 0% { background-position: 0 0; } 100% { background-position: 28px 28px; } }
@keyframes hero-spin { 0% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes hero-sun { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes hero-ping { 0% { transform: scale(.25); opacity: 0.9; } 80% { opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes hero-dot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.75; } }
@keyframes hero-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: min(780px, 94vh);
  display: flex;
  align-items: center;
  padding: var(--space-8) var(--space-6);
}
.hero-content { max-width: 580px; }

.hero-content .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-5);
}
.hero-badge .live-dot { position: relative; display: inline-flex; width: 8px; height: 8px; }
.hero-badge .live-dot::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--cat-gold); animation: hero-live 2s ease-in-out infinite;
}

.hero-content h2 {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4vw, 3.3rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: var(--space-4);
}
.hero-content h2 span { color: #FBE3A6; }

.hero-content p {
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  margin-bottom: var(--space-6);
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.btn-lg {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  border-radius: var(--radius-lg);
}

/* hero buttons — solid white + glass, tuned for the dark scene */
.btn-hero-light, .btn-hero-glass {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 24px;
  border-radius: 13px;
  cursor: pointer;
  text-decoration: none;
}
.btn-hero-light {
  background: #fff;
  color: #173F8E;
  border: none;
  box-shadow: 0 8px 24px rgba(7, 22, 58, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-hero-light:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-hero-glass {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.15s ease;
}
.btn-hero-glass:hover { background: rgba(255, 255, 255, 0.2); }
.btn-hero-light i, .btn-hero-light svg,
.btn-hero-glass i, .btn-hero-glass svg { width: 17px; height: 17px; }

@media (prefers-reduced-motion: reduce) {
  .hero-grid, .hero-radar, .hero-sun, .hero-ping .ring, .hero-ping .dot,
  .hero-badge .live-dot::before { animation: none; }
}

/* ==========================================================================
   Disaster icon system (glyph + scene) — see disaster-icons.js
   Motion stills automatically under prefers-reduced-motion.
   ========================================================================== */
.di-svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.disaster-icon { display: inline-flex; align-items: center; justify-content: center; }

@keyframes ds-shock { 0% { transform: scale(.3); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ds-rise { 0% { transform: translateY(3px); opacity: 0; } 20% { opacity: .95; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes ds-flick { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.13) scaleX(.95); } 100% { transform: scaleY(.93) scaleX(1.04); } }
@keyframes ds-rain { 0% { transform: translateY(-7px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }
@keyframes ds-wave { 0% { transform: translateX(0); } 100% { transform: translateX(-32px); } }
@keyframes ds-flash { 0%, 90%, 100% { opacity: 0; } 92% { opacity: 1; } 94% { opacity: .25; } 96% { opacity: 1; } 98% { opacity: 0; } }
@keyframes ds-sweep { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes ds-shimmer { 0%, 100% { transform: translateX(-1.6px); } 50% { transform: translateX(1.6px); } }
@keyframes ds-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.8px); } }
@keyframes ds-drift { 0%, 100% { transform: translateX(-1.6px); } 50% { transform: translateX(1.6px); } }
@keyframes ds-shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-1.4px, .8px); } 40% { transform: translate(1.4px, -.8px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(1px, 1px); } }
@keyframes ds-glow { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes ds-smoke { 0% { transform: translateY(2px) scale(.65); opacity: 0; } 25% { opacity: .55; } 100% { transform: translateY(-22px) scale(1.5); opacity: 0; } }
@keyframes ds-spin-slow { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

.di-flick { transform-box: fill-box; transform-origin: bottom; animation: ds-flick 1s ease-in-out infinite alternate; }
.di-flick-rev { transform-box: fill-box; transform-origin: bottom; animation: ds-flick .8s ease-in-out infinite alternate-reverse; }
.di-bob { transform-box: fill-box; transform-origin: center; animation: ds-bob 3s ease-in-out infinite; }
.di-drift { transform-box: fill-box; transform-origin: center; animation: ds-drift 4.5s ease-in-out infinite; }
.di-shake { transform-box: fill-box; transform-origin: center; animation: ds-shake .55s linear infinite; }
.di-shock { transform-box: fill-box; transform-origin: center; animation: ds-shock 2.6s ease-out infinite; }
.di-spin { transform-box: fill-box; transform-origin: center; animation: ds-spin-slow 4s linear infinite; }
.di-sweep { transform-box: fill-box; transform-origin: 32px 32px; animation: ds-sweep 3.4s linear infinite; }
.di-glow { animation: ds-glow 2s ease-in-out infinite; }
.di-smoke { transform-box: fill-box; transform-origin: center; animation: ds-smoke 2.6s ease-out infinite; }
.di-rise { transform-box: fill-box; transform-origin: center; animation: ds-rise 2s ease-out infinite; }
.di-wave { animation: ds-wave 2.6s linear infinite; }
.di-wave-rev { animation: ds-wave 2.1s linear infinite reverse; }
.di-rain { animation: ds-rain 1.1s linear infinite; }
.di-flash { animation: ds-flash 2.8s linear infinite; }
.di-shimmer { animation: ds-shimmer 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .di-svg * { animation: none !important; } }

/* inline glyph (sits next to text — badges, cards, toasts, legend rows) */
.di-inline { display: inline-flex; width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }
.di-inline svg { width: 100%; height: 100%; }

/* per-surface icon sizing */
.stat-emoji svg { width: 32px; height: 32px; }
.stat-total .stat-emoji svg { width: 40px; height: 40px; }
.library-emoji svg { width: 30px; height: 30px; }
.filter-emoji svg { width: 18px; height: 18px; }
.legend-icon svg { width: 16px; height: 16px; }
.toast-icon .di-inline { width: 20px; height: 20px; }
/* map pins sit on a category-coloured background, so the glyph renders as a
   clean white silhouette (preserves the animated shape, drops the fills) */
.marker-pin-inner .di-inline { width: 22px; height: 22px; }
.marker-pin-inner svg { filter: brightness(0) invert(1); }

/* details-drawer scene banner — large tinted scene for the selected event */
.drawer-scene {
  position: relative;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.drawer-scene-media { position: absolute; inset: 0; }
.drawer-scene-media svg { width: 100%; height: 100%; display: block; }
.drawer-scene-scrim { position: absolute; inset: 0; background: var(--image-scrim); pointer-events: none; }
.drawer-scene-label { position: absolute; left: var(--space-4); bottom: var(--space-3); z-index: 2; color: #fff; }
.drawer-scene-kicker {
  display: block; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85;
}
.drawer-scene-type { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.1; }
/* the event pull-out reads calmer as a still frame — freeze its disaster
   visuals (scene banner + badge glyph) while leaving the rest of the site live */
.details-drawer .di-svg * { animation: none !important; }

/* ==========================================================================
   UI icon set (line chrome) — see ui-icons.js
   Strokes stay a constant ~2px at any size via non-scaling-stroke, so one
   64-grid definition reads correctly from 16px to 48px.
   ========================================================================== */
.ui-icon { width: 24px; height: 24px; display: inline-block; flex: none; vertical-align: middle; }
.ui-icon, .ui-icon * { vector-effect: non-scaling-stroke; stroke-width: 2; }
/* a touch heavier where it sits large on a solid colour tile */
.feature-icon .ui-icon, .feature-icon .ui-icon * { stroke-width: 2.4; }

@keyframes ui-bell { 0%, 62%, 100% { transform: rotate(0); } 70% { transform: rotate(9deg); } 80% { transform: rotate(-7deg); } 88% { transform: rotate(4deg); } 94% { transform: rotate(-2deg); } }
@keyframes ui-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes ui-rise { 0% { transform: translateY(2px); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-12px); opacity: 0; } }
@keyframes ui-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes ui-shock { 0% { transform: scale(.3); opacity: .85; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes ui-trace { 0% { stroke-dashoffset: 130; opacity: 1; } 55% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes ui-signal { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-icon * { animation: none !important; } }

/* inline title bell (notification headings) — sized to the text and held still */
.title-bell { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }
.title-bell, .title-bell * { animation: none !important; }

/* ==========================================================================
   Virtual Disastr Lab — simulators (see school-lab.js)
   The lab stages are bespoke inline-styled scenes; these are the shared bits.
   ========================================================================== */
.lab-shell details > summary { list-style: none; }
.lab-shell details > summary::-webkit-details-marker { display: none; }
.lab-shell input[type="range"] { accent-color: var(--color-primary); }
@keyframes vl-cloud { 0% { transform: translateX(0); } 100% { transform: translateX(40px); } }
@keyframes vl-mesospin { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }
@keyframes vl-rise { 0% { transform: translateY(2px); opacity: 0; } 20% { opacity: .95; } 100% { transform: translateY(-20px); opacity: 0; } }
@keyframes vl-flick { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.12) scaleX(.95); } 100% { transform: scaleY(.94) scaleX(1.04); } }
@keyframes vl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes vl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .lab-shell * { animation-duration: .001ms !important; } }

/* lab chrome — token-driven so it follows the global palette + dark mode */
.lab-shell { color: var(--color-text); }
/* Shared full-bleed hero band (Lab + Library) — brand gradient, tokenised.
   It's a brand band, so it stays indigo across themes (primitives don't remap). */
.hero-band { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600) 60%, var(--brand-550) 100%); }
.hero-band::before { content: ""; position: absolute; right: 6%; top: -60px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 174, 46, 0.32), transparent 70%); pointer-events: none; }
.hero-band-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.hero-band-copy { max-width: 680px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.hero-eyebrow svg { width: 14px; height: 14px; }
.hero-band h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; margin: 18px 0 14px; }
.hero-band h2 .accent { color: var(--cat-gold); }
.hero-band-lede { color: rgba(255, 255, 255, 0.82); font-size: 17px; line-height: 1.55; max-width: 60ch; }
.lab-card { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6); }
.lab-card h3, .lab-card h4, .lab-card h5 { color: var(--color-text); }
.lab-lede { color: var(--color-text-muted); }
.lab-panel { background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: var(--space-5); }
.lab-info { background: var(--status-safe-bg); border: 1px solid var(--status-safe-border); border-radius: var(--radius-md); padding: var(--space-4); }
.lab-info h5 { color: var(--status-safe); }
.lab-info p { color: var(--color-text-muted); }
.lab-theater-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.lab-theater-card p { color: var(--color-text-muted); }
.lab-chapter { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.lab-chapter > summary { color: var(--color-text); }
.lab-chapter > p { color: var(--color-text-muted); }
.lab-stat { background: var(--color-surface-sunken); border-radius: var(--radius-md); padding: var(--space-3); }
.lab-stat .lab-stat-label { color: var(--color-text-muted); }
.lab-step { display: flex; gap: 11px; padding: 11px 12px; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); transition: all .3s; }
.lab-step span:last-child { color: var(--color-text-muted); }
.lab-step strong { color: var(--color-text); }
.lab-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: var(--radius-pill); }
.lab-badge--grape { background: var(--cat-grape-bg); color: var(--cat-grape); }
.lab-badge--berry { background: var(--cat-berry-bg); color: var(--cat-berry); }
.lab-badge--teal { background: var(--cat-teal-bg); color: var(--cat-teal); }
.lab-badge--brand { background: var(--color-focus-ring); color: var(--color-primary); }
.observe-card { display: flex; gap: 13px; border-radius: var(--radius-md); padding: var(--space-4); }
.observe-card h5 { color: var(--color-text); }
.observe-card p { color: var(--color-text-muted); }
.observe-card.is-danger { background: var(--status-danger-bg); border: 1px solid var(--status-danger-border); }
.observe-card.is-safe { background: var(--status-safe-bg); border: 1px solid var(--status-safe-border); }
.observe-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; }
.observe-ico.is-danger { background: var(--status-danger); }
.observe-ico.is-safe { background: var(--status-safe); }
.lab-eyebrow { color: var(--color-text-muted); }
.lab-temp-badge { background: var(--status-warning-bg); color: var(--status-warning); font-weight: 600; font-size: 12px; padding: 2px 7px; border-radius: var(--radius-sm); white-space: nowrap; }

/* Features Grid section */
.features-section {
  width: 100%;
  max-width: 1200px;
  margin: var(--space-7) auto;
  padding: 0 var(--space-6);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.section-header h3 {
  font-size: var(--text-2xl);
  font-weight: 800;
}

.section-header p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: stacked */
  gap: var(--space-7);
}
@media (min-width: 600px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }   /* tablet: 2×2 */
}
@media (min-width: 1024px) {
  .features-grid { grid-template-columns: repeat(4, 1fr); }   /* desktop: one row */
}

.feature-card {
  padding: var(--space-4);
  text-align: left;
}

.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-primary);
  margin-bottom: var(--space-5);
}

.bg-earthquake { background-color: var(--color-earthquake); }
.bg-volcano { background-color: var(--color-volcano); }
.bg-storm { background-color: var(--color-storm); }
.bg-flood { background-color: var(--color-flood); }
.bg-drought { background-color: var(--color-drought); }
.bg-heatwave { background-color: var(--color-heatwave); }

.feature-card h4 {
  font-size: var(--text-lg);
  font-weight: 800;
  margin-bottom: var(--space-3);
}

.feature-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Splash colour accents */
.section-header h3 { position: relative; display: inline-block; }
.section-header h3::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin: var(--space-3) auto 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-primary), var(--cat-gold));
}

/* Live Global Tracker stats */
/* width:100% so the section fills its max-width — without it, the `auto`
   margins inside the flex-column body shrink it to the cards' content width. */
.stats-section { width: 100%; max-width: 1200px; margin: var(--space-7) auto; padding: 0 var(--space-6); }
/* Mobile-first: 6 type cards in two columns, Total Active full width below. */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.stats-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-emoji {
  font-size: 26px;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-bg);
  flex-shrink: 0;
}
.stat-body { display: flex; flex-direction: column; min-width: 0; }
.stat-number { white-space: nowrap; }

/* Tablet & desktop: type cards on the left, Total Active prominent on the right.
   Tablet keeps 2 columns (3 cols are too tight for "Earthquakes"); desktop uses 3. */
@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: minmax(0, 2.4fr) minmax(240px, 1fr);
    align-items: stretch;
  }
  .stats-types { grid-template-columns: repeat(2, 1fr); }
  .stat-total {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-6);
  }
  .stat-total .stat-body { align-items: center; }
  .stat-total .stat-emoji { width: 66px; height: 66px; font-size: 32px; }
  .stat-total .stat-number { font-size: var(--text-3xl); }
  .stat-total .stat-label { font-size: var(--text-base); }
}
@media (min-width: 1024px) {
  .stats-types { grid-template-columns: repeat(3, 1fr); }
}
.stat-number { font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; color: var(--color-text); }
.stat-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.stat-total { background: var(--color-focus-ring); }
.stats-updated {
  text-align: center; margin-top: 20px;
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.stats-updated a { color: var(--color-primary); text-decoration: none; font-weight: 700; }
.stats-updated a:hover { text-decoration: underline; }

/* Notification CTA — full width, action on the right */
.alert-cta-section {
  width: 100%;
  /* Match the feature/stat cards: those sections are 1200px wide with
     var(--space-6) side padding, so their content spans 1200 - 2*space-6.
     This panel IS the visible element, so cap it to that same width. */
  max-width: calc(1200px - 2 * var(--space-6));
  margin: 40px auto 80px auto;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.cta-content { flex: 1; }
.cta-content h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-3); }
.cta-content p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-3); max-width: 720px; }
.status-message { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; transition: color 0.2s; }
.status-message.active { color: var(--color-primary); font-weight: 700; }

.cta-action {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}
.cta-settings { display: flex; flex-direction: column; gap: var(--space-1); width: 220px; }
.cta-settings label { font-size: var(--text-xs); font-weight: 600; text-align: right; }

.app-footer {
  text-align: center;
  padding: var(--space-8) var(--space-6);
  border-top: 1.5px solid var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ==========================================================================
   LIVE DISASTER MAP PAGE STYLING (tracker.html)
   ========================================================================== */

/* Left sidebar panel feeds */
.dashboard-panel {
  width: 380px;
  background-color: var(--color-surface);
  border-right: 1.5px solid var(--color-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: var(--shadow-sm);
}

.search-container { padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.search-wrapper { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: var(--space-3); color: var(--color-text-muted); width: 18px; pointer-events: none; }
.search-container input[type="search"] {
  width: 100%; padding: var(--space-2) 40px var(--space-2) 42px; background-color: var(--color-bg);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text); outline: none; transition: all 0.2s ease;
}
.search-container input[type="search"]:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); background-color: var(--color-surface); }
.btn-clear-search { position: absolute; right: var(--space-3); background: none; border: none; cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; }
.btn-clear-search:hover { color: var(--color-primary); }

.filters-container { padding: var(--space-4); border-bottom: 1px solid var(--color-border); }
.filters-container h2, .feed-header h2 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.8px; color: var(--color-text-muted); margin-bottom: var(--space-3); font-weight: 700; }
.filter-grid { display: flex; flex-direction: column; gap: var(--space-2); }
.filter-tab {
  display: flex; align-items: center; width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background-color: var(--color-bg); cursor: pointer; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text); transition: all 0.2s ease;
}
.filter-tab:hover { background-color: var(--color-surface); border-color: var(--color-primary); }
.filter-tab.active { background-color: var(--color-focus-ring); color: var(--color-primary); border-color: var(--color-primary); }
.filter-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: var(--space-2); }
.filter-dot-svg { display: flex; align-items: center; }
.filter-label { flex: 1; text-align: left; }
.filter-count { background-color: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); border: 1px solid var(--color-border); font-weight: 700; }
.filter-tab.active .filter-count { background-color: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }

.feed-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: var(--space-4) 0 0 0; }
.feed-header { padding: 0 var(--space-4) var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; }
.feed-header h2 { margin-bottom: 0; }
.feed-sub { display: flex; align-items: center; gap: var(--space-2); }
.live-indicator { font-size: var(--text-xs); font-weight: 700; color: var(--color-primary); display: inline-flex; align-items: center; gap: var(--space-1); }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-primary); display: inline-block; animation: alert-pulse 1.8s infinite; }
.disaster-list { flex: 1; padding: var(--space-2) var(--space-4) var(--space-5) var(--space-4); }
.loading-state, .empty-state { padding: var(--space-8) var(--space-5); text-align: center; color: var(--color-text-muted); }
.spinner { width: 32px; height: 32px; border: 3px solid var(--color-border); border-top: 3px solid var(--color-primary); border-radius: 50%; margin: 0 auto var(--space-3) auto; animation: spin 1s linear infinite; }

/* Disaster cards in sidebar list */
.disaster-card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.disaster-card:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.disaster-card.selected { border-color: var(--color-primary); background-color: var(--color-focus-ring); box-shadow: 0 0 0 1px var(--color-primary); }
.disaster-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; }
.card-earthquakes::before { background-color: var(--cat-earthquake); }
.card-volcanoes::before { background-color: var(--cat-volcano); }
.card-wildfires::before { background-color: var(--cat-wildfire); }
.card-storms::before { background-color: var(--cat-storm); }
.card-floods::before { background-color: var(--cat-flood); }
.card-droughts::before { background-color: var(--cat-drought); }
.card-heatwaves::before { background-color: var(--cat-heatwave); }
.card-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-1); }
.card-header-row h3 { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta-row { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-2); }
.card-distance { margin-left: auto; font-weight: 700; color: var(--color-primary); background-color: var(--color-focus-ring); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }

/* Map Viewport Area */
.map-viewport { flex: 1; position: relative; height: 100%; z-index: 1; }
#map { width: 100%; height: 100%; }
.map-legend { position: absolute; bottom: var(--space-6); left: var(--space-6); padding: var(--space-3) var(--space-4); z-index: 50; width: 180px; pointer-events: auto; }
.map-legend h3 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); margin-bottom: var(--space-2); font-weight: 800; }
.legend-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; margin-bottom: var(--space-1); }
.legend-row:last-child { margin-bottom: 0; }
.legend-icon-svg { display: flex; align-items: center; }

/* ==========================================================================
   Details Drawer (600px width for emphasis) & Tabs Dashboard
   ========================================================================== */

.details-drawer {
  position: absolute;
  top: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  width: 600px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + 30px));
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: auto;
}

.details-drawer.open {
  transform: translateX(0);
}

.drawer-scroll-container {
  flex: 1;
  padding: var(--space-6);
}

.close-drawer-btn {
  position: absolute;
  /* Match the drawer's content padding so the button sits inside the card with
     even spacing on every side, instead of floating in the corner. */
  top: var(--space-6); right: var(--space-6);
  z-index: 20;
}

.drawer-header {
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  padding-right: 40px;
}

.header-badges-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.drawer-header h2 {
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
  margin: var(--space-2) 0;
  line-height: 1.25;
}

.detail-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
}

.detail-meta svg { width: 14px; height: 14px; }

.proximity-banner {
  display: flex; align-items: center; gap: var(--space-2);
  background-color: var(--color-focus-ring); color: var(--color-primary);
  border: 1px solid var(--color-border); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); margin-bottom: var(--space-5); font-size: var(--text-xs); font-weight: 600;
}
.proximity-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.proximity-banner.alert-hazard {
  background-color: rgba(230, 124, 115, 0.1);
  color: var(--status-danger);
  border-color: var(--color-border);
}
.proximity-banner.alert-safe {
  background-color: var(--color-focus-ring);
  color: var(--color-primary);
  border-color: var(--color-border);
}

/* Severity Indicator Section */
.severity-section {
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 20px;
}

.severity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.severity-header h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.severity-num-badge {
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
}

.severity-meter-bg {
  height: 10px;
  background-color: var(--color-border);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.severity-meter-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--status-safe), var(--status-warning), var(--status-danger));
  background-size: 600px 10px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.severity-explanation {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
  font-weight: 500;
}

/* Science Corner */
.science-corner-card {
  background-color: var(--color-focus-ring);
  border: 1.5px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 24px;
}

.science-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); color: var(--color-primary); }
.science-header h3 { font-size: var(--text-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.edu-icon { width: 22px; height: 22px; }
#detail-science-description { font-size: var(--text-sm); color: var(--color-text); line-height: 1.6; }

/* Tabbed Media Explorer Dashboard */
.media-dashboard-section h3 {
  font-size: var(--text-sm);
  font-weight: 800;
  margin-bottom: var(--space-1);
}

.media-tabs-header {
  display: flex;
  gap: var(--space-1);
  background-color: var(--color-bg);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  margin-bottom: var(--space-3);
  overflow-x: auto;
}

.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  color: var(--color-text);
  background-color: var(--color-border);
}

.tab-btn.active {
  background-color: var(--color-surface);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.tab-btn svg {
  width: 14px;
  height: 14px;
}

.tab-viewer-canvas {
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-height: 290px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tab-content {
  display: none;
  flex: 1;
  flex-direction: column;
}

.tab-content.active {
  display: flex;
}

.tab-caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  text-align: center;
  font-weight: 500;
}

/* Image comparison slider */
.comparison-slider { position: relative; width: 100%; height: 240px; border-radius: var(--radius-md); overflow: hidden; border: 1.5px solid var(--color-border); }
.comparison-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.comparison-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.after-image { clip-path: inset(0 0 0 var(--slider-pos, 50%)); }
.image-label { position: absolute; bottom: var(--space-2); background-color: rgba(0,0,0,0.65); color: var(--color-on-primary); font-size: var(--text-xs); font-weight: 700; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); text-transform: uppercase; pointer-events: none; z-index: 5; }
.before-label { left: var(--space-2); }
.after-label { right: var(--space-2); }
.slider-handle { position: absolute; top: 0; bottom: 0; left: var(--slider-pos, 50%); width: 4px; background-color: var(--color-primary); transform: translateX(-50%); cursor: ew-resize; z-index: 10; }
.handle-line { width: 100%; height: 100%; background-color: var(--color-primary); }
.handle-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background-color: var(--color-primary); border: 2.5px solid var(--color-on-primary); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.handle-button svg { width: 14px; height: 14px; }

/* Science Diagram Viewport */
.diagram-canvas { width: 100%; height: 240px; border-radius: var(--radius-md); background-color: var(--color-surface); display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); overflow: hidden; }
.diagram-img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Event News Feed tab content (NEW) */
.news-feed-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 240px;
  padding-right: 4px;
}

.news-card {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-3);
}

.news-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
  border-bottom: 1px dashed var(--color-border);
  padding-bottom: var(--space-1);
}

.news-source {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-primary);
}

.news-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.news-card h5 {
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-1);
  line-height: 1.25;
}

.news-snippet {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Accordion sections */
.accordions-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.custom-accordion {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.2s ease;
}

.custom-accordion summary {
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  outline: none;
  user-select: none;
  color: var(--color-text);
}

.custom-accordion[open] {
  border-color: var(--color-primary);
}

.custom-accordion[open] summary {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-primary);
}

.accordion-content {
  padding: var(--space-3);
  background-color: var(--color-bg);
}

.docs-pre {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text);
  white-space: pre-wrap;
  line-height: 1.55;
}

/* Simulated Camera and Telemetry visual grids */
.live-visuals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  height: 240px;
}

.visuals-frame {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.visuals-tag {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  font-weight: 800;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-muted);
}

.visuals-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  text-align: center;
}

.placeholder-field-camera { background-color: var(--scene-steel-darker); color: var(--scene-screen-text); }
.cam-icon { width: 28px; height: 28px; margin-bottom: var(--space-1); }
.cam-msg { font-size: var(--text-xs); line-height: 1.35; }

.placeholder-field-telemetry { background-color: var(--scene-screen-dark); }
.telemetry-svg { width: 100%; height: 100%; }
.telemetry-wave-anim {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-wave 4s linear infinite;
}

@keyframes draw-wave {
  to { stroke-dashoffset: 0; }
}

/* ==========================================================================
   SCHOOL LAB PAGE STYLING (school-lab.html)
   ========================================================================== */

.lab-body {
  overflow-y: auto;
  height: auto;
}

.lab-body .app-header {
  position: sticky;
  top: 0;
}

.lab-section {
  max-width: 1200px;
  margin: var(--space-8) auto;
  padding: var(--space-7);
}

.lab-section-header {
  margin-bottom: var(--space-7);
  border-bottom: 1.5px solid var(--color-border);
  padding-bottom: var(--space-5);
}

.lab-badge {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.lab-section-header h3 { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-2); }
.lab-section-header p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }

/* 1. Tokyo Shake Table Simulator */
.shake-table-container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.shake-table-stage {
  height: 380px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--scene-cloud);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.shake-stage-bedrock {
  height: 44px;
  background: linear-gradient(180deg, var(--scene-earth-1) 0%, var(--scene-earth-2) 55%, var(--scene-earth-3) 100%);
  border-top: 3px solid var(--scene-earth-edge);
  width: 100%;
  box-shadow: inset 0 6px 10px rgba(0,0,0,0.12);
}

.shake-stage-ground {
  height: 16px;
  background: linear-gradient(180deg, var(--scene-grass-1), var(--scene-grass-2));
  border-top: 2px solid var(--scene-grass-edge);
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-around;
}

/* Tower Base foundations */
.sim-tower {
  width: 110px;
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  transition: transform 0.1s ease;
  transform-origin: bottom center;
}

.tower-rigid { left: 60px; }
.tower-isolated { right: 60px; }

.tower-foundation {
  width: 120px; height: 16px; border-radius: var(--radius-sm);
  font-size: 8px; font-weight: 800; color: var(--scene-cloud);
  display: flex; align-items: center; justify-content: center;
}

.rigid-foundation { background-color: var(--scene-steel-dark); border: 1.5px solid var(--scene-steel-darker); }
.isolation-foundation { background-color: var(--scene-steel-light); border: 1.5px solid var(--scene-steel-mid); }

.tower-floor {
  width: 90px; height: 45px; background-color: var(--scene-concrete-1);
  border-left: 3px solid var(--scene-steel-mid); border-right: 3px solid var(--scene-steel-mid);
  border-top: 2px solid var(--scene-concrete-edge); display: flex; align-items: center;
  justify-content: space-around; padding: 0 10px; position: relative;
}

.win { width: 18px; height: 22px; background-color: var(--scene-win-1); border: 1px solid var(--scene-win-edge); border-radius: 2px; }

.tower-roof {
  width: 100px; height: 35px; background-color: var(--scene-steel-mid); border-radius: 4px 4px 0 0;
  font-size: 8.5px; font-weight: 800; color: var(--scene-cloud);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

/* Spring isolator pads */
.base-isolator-pads {
  width: 110px; height: 20px;
  display: flex; justify-content: space-around;
  padding: 0 10px; background-color: rgba(0,0,0,0.05);
}

.isolator-spring {
  width: 25px; height: 100%;
  background-image: radial-gradient(circle, var(--scene-spring) 40%, transparent 45%);
  background-size: 8px 8px;
  background-repeat: repeat-y;
  background-position: center;
  border: 1px solid var(--scene-spring-edge);
  border-radius: var(--radius-sm);
  transition: transform 0.1s;
}

/* Tuned Mass Damper Pendulum weight */
.tuned-mass-damper {
  position: absolute;
  top: 15px; left: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background-color: var(--scene-damper);
  border: 2px solid var(--scene-damper-edge);
  box-shadow: 0 0 8px var(--scene-damper);
  transform: translateX(-50%);
  transform-origin: top center;
}

/* Cracks overlay on standard building */
.crack-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 5;
}

.sim-tower.cracked .crack-overlay {
  opacity: 0.8;
  /* Simple CSS jagged vector crack */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='200' viewBox='0 0 100 200'><path d='M 50,20 L 45,60 L 55,90 L 40,120 L 50,160' stroke='red' stroke-width='3.5' fill='none' stroke-linecap='round'/></svg>");
}

.tower-status-tag {
  position: absolute;
  top: -24px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  animation: alert-pulse 1s infinite;
}

.status-danger { background-color: var(--status-danger); color: var(--color-on-danger); }
.status-safe { background-color: var(--status-safe); color: #fff; }

/* Interactive table settings layout */
.shake-table-controls {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.button-row { display: flex; gap: var(--space-3); }
.educational-card-simple { padding: var(--space-4); border-radius: var(--radius-md); border: 1.5px solid var(--color-border); }
.educational-card-simple h5 { font-size: var(--text-sm); font-weight: 800; margin-bottom: var(--space-1); }
.educational-card-simple ul { list-style-position: inside; font-size: var(--text-xs); color: var(--color-text); }
.educational-card-simple li { margin-bottom: var(--space-1); }

/* Active shake animations classes applied via JS */
@keyframes earthquake-shaking {
  0% { transform: translateX(0); }
  25% { transform: translateX(calc(var(--shake-level) * -1.5px)); }
  50% { transform: translateX(0); }
  75% { transform: translateX(calc(var(--shake-level) * 1.5px)); }
  100% { transform: translateX(0); }
}

.stage-shaking #shake-ground {
  animation: earthquake-shaking 0.12s linear infinite;
}

/* Rigid building sways violently */
@keyframes tower-sway-rigid {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(calc(var(--shake-level) * 0.9deg)); }
}
.stage-shaking .tower-rigid {
  animation: tower-sway-rigid 0.12s ease-in-out infinite alternate;
}

/* Base isolated building remains upright, only bases compress */
@keyframes tower-sway-isolated {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  50% { transform: rotate(calc(var(--shake-level) * 0.12deg)) translateX(calc(var(--shake-level) * -0.4px)); }
}
.stage-shaking .tower-isolated {
  animation: tower-sway-isolated 0.12s ease-in-out infinite alternate;
}

/* Base pads slide horizontally opposite to ground */
@keyframes springs-compress {
  0%, 100% { transform: skewX(0deg); }
  50% { transform: skewX(calc(var(--shake-level) * -1.5deg)); }
}
.stage-shaking .isolator-spring {
  animation: springs-compress 0.12s ease-in-out infinite alternate;
}

/* Tuned Mass Damper swings opposite to building sway */
@keyframes damper-swing {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(calc(var(--shake-level) * -3deg)); }
}
.stage-shaking .tuned-mass-damper {
  animation: damper-swing 0.12s ease-in-out infinite alternate;
}

/* 2. Iceland Volcanic Ash & Airspace blockage */
.engine-blockage-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.engine-canvas-container {
  height: 320px; border: 1.5px solid var(--color-border); border-radius: 16px;
  background-color: var(--color-surface); display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 20px;
}

.jet-engine-svg { width: 100%; height: 100%; }

.interactive-steps-card {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

.step-list { list-style: none; margin-top: 14px; }
.step-item {
  font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 12px;
  padding-left: 20px; position: relative; transition: color 0.3s;
}
.step-item::before {
  content: ''; position: absolute; left: 0; top: 6px;
  width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-border);
}
.step-item.active { color: var(--color-text); }
.step-item.active::before { background-color: var(--color-primary); box-shadow: 0 0 6px var(--color-primary); }

/* Animated particles loop */
@keyframes ash-flow {
  0% { transform: translateX(-20px); opacity: 0; }
  10% { opacity: 0.8; }
  60% { opacity: 0.8; }
  90% { transform: translateX(250px) scale(0.6); opacity: 0; }
  100% { transform: translateX(250px) scale(0.3); opacity: 0; }
}

.ash-active #ash-particles {
  opacity: 1;
}

.ash-active #ash-particles circle {
  animation: ash-flow 2s linear infinite;
}
.ash-active #ash-particles circle:nth-child(2) { animation-delay: 0.5s; }
.ash-active #ash-particles circle:nth-child(3) { animation-delay: 1.1s; }
.ash-active #ash-particles circle:nth-child(4) { animation-delay: 1.6s; }

/* 3. Virtual documentary cards grid */
.documentary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}

.video-card {
  background-color: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}

.video-card:hover {
  transform: translateY(-2px);
}

.video-screen {
  height: 160px;
  background-color: var(--scene-screen-black);
  position: relative;
  overflow: hidden;
}

.video-play-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background-color 0.2s;
}

.video-card:hover .video-play-overlay {
  background-color: rgba(0, 0, 0, 0.1);
}

.btn-video-play {
  width: 46px; height: 46px; border-radius: 50%;
  background-color: var(--color-primary); border: 2.5px solid var(--color-on-primary);
  color: var(--color-on-primary); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-md);
  transition: transform 0.2s;
}
.btn-video-play:hover { transform: scale(1.1); }
.btn-video-play svg { width: 20px; height: 20px; fill: currentColor; }

.video-anim-canvas {
  width: 100%; height: 100%;
}

.video-time-tag {
  position: absolute; bottom: var(--space-2); right: var(--space-2);
  background-color: rgba(0,0,0,0.7); color: var(--color-on-primary);
  font-size: var(--text-xs); font-weight: 700; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  z-index: 5;
}

.video-info {
  padding: var(--space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-info h4 { font-size: var(--text-base); font-weight: 800; color: var(--color-text); margin-bottom: var(--space-1); }
.video-summary { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); line-height: 1.4; }

.video-chapters {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
  display: none; /* Show only when playing/active! */
}

.video-card.playing .video-chapters {
  display: block;
}

.video-card.playing .video-play-overlay {
  background-color: transparent;
}

.chapter-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
}
.chapter-details summary {
  padding: var(--space-1) var(--space-2); font-weight: 700; cursor: pointer; color: var(--color-text);
}
.chapter-content {
  padding: var(--space-2) var(--space-2); background-color: var(--color-bg); border-top: 1px solid var(--color-border);
  line-height: 1.4; color: var(--color-text-muted);
}

/* Looping Video Vector Animations triggers */
.video-card.playing .wave-stroke-anim {
  stroke-dasharray: 200;
  animation: dash-monitor 2s linear infinite;
}

@keyframes dash-monitor {
  to { stroke-dashoffset: -400; }
}

.video-card.playing .lava-drip-anim {
  stroke-dasharray: 40;
  animation: lava-flow 3s linear infinite;
}

@keyframes lava-flow {
  to { stroke-dashoffset: -80; }
}

.video-card.playing .smoke-puff-anim {
  animation: smoke-puff 2s ease-out infinite;
}

@keyframes smoke-puff {
  0% { transform: scale(0.3) translate(0, 0); opacity: 0.8; }
  50% { opacity: 0.4; }
  100% { transform: scale(1.6) translate(-10px, -40px); opacity: 0; }
}

.video-card.playing .spiral-spin-anim {
  transform-origin: 100px 60px;
  animation: spin 6s linear infinite;
}

.video-card.playing .spiral-spin-anim-reverse {
  transform-origin: 100px 60px;
  animation: spin 10s linear infinite reverse;
}

/* ==========================================================================
   School Lab amendments: realistic towers, collapse, observe panel,
   YouTube facades, ash-sky scene, engine fire
   ========================================================================== */

/* Sky backdrop + more realistic towers */
.shake-table-stage { background: linear-gradient(180deg, var(--scene-sky-1) 0%, var(--scene-sky-2) 55%, var(--scene-sky-3) 100%); }
.shake-sky { position: absolute; top: 0; left: 0; right: 0; height: 72%; overflow: hidden; pointer-events: none; }
.shake-sky::before { content: ''; position: absolute; top: 20px; right: 38px; width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--scene-sun-1), var(--scene-sun-2)); box-shadow: 0 0 30px rgba(255,224,130,0.8); }
/* Fluffy drifting clouds */
.shake-sky::after {
  content: '';
  position: absolute; top: 28px; left: 38px;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--scene-cloud);
  box-shadow:
    20px 9px 0 -2px var(--scene-cloud), 40px 2px 0 0 var(--scene-cloud), 58px 11px 0 -5px var(--scene-cloud),
    150px 17px 0 0 var(--scene-cloud), 168px 7px 0 -4px var(--scene-cloud), 188px 15px 0 -9px var(--scene-cloud);
  opacity: 0.92;
  filter: drop-shadow(0 3px 4px rgba(120,140,160,0.18));
  animation: cloud-drift 30s linear infinite;
}
@keyframes cloud-drift { 0% { transform: translateX(-12px); } 100% { transform: translateX(28px); } }

/* Less-clipart, glassy curtain-wall towers */
.tower-floor {
  width: 94px; height: 42px;
  background: linear-gradient(180deg, var(--scene-gfloor-1), var(--scene-gfloor-2));
  border-left: 2px solid var(--scene-gfloor-edge); border-right: 2px solid var(--scene-gfloor-edge);
  border-top: 1px solid var(--scene-gfloor-top);
  display: flex; align-items: center; justify-content: space-around; padding: 0 7px; position: relative;
  box-shadow: inset 0 -3px 6px rgba(70,90,110,0.06);
}
.win {
  width: 16px; height: 27px; border: none; border-radius: 1px;
  background: linear-gradient(135deg, var(--scene-glass-1) 0 44%, var(--scene-glass-2) 45%, var(--scene-glass-3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
.tower-rigid .tower-floor { background: linear-gradient(180deg, var(--scene-rfloor-1), var(--scene-rfloor-2)); }
.tower-isolated .win { background: linear-gradient(135deg, var(--scene-glass-teal-1) 0 44%, var(--scene-glass-teal-2) 45%, var(--scene-glass-teal-3) 100%); }
.tower-roof { background: linear-gradient(180deg, var(--scene-roof-1), var(--scene-steel-dark)); border-radius: 3px 3px 0 0; box-shadow: inset 0 2px 3px rgba(255,255,255,0.18); }
.tower-antenna { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 3px; height: 14px; background: var(--scene-antenna); }
.tower-antenna::after { content: ''; position: absolute; top: -4px; left: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--scene-beacon); box-shadow: 0 0 6px var(--scene-beacon); animation: alert-pulse 1.4s infinite; }

/* Rigid tower collapse */
.tower-rigid.collapsed { animation: none !important; }
.tower-rigid.collapsed .crack-overlay { opacity: 0; }
.tower-rigid.collapsed .tower-floor,
.tower-rigid.collapsed .tower-roof {
  animation: floor-fall 1s forwards cubic-bezier(0.45, 0.05, 0.6, 0.6);
}
@keyframes floor-fall {
  to { transform: translate(var(--fx, 40px), 190px) rotate(var(--fr, 90deg)); opacity: 0; }
}
.tower-rigid.collapsed .tower-roof { --fx: 82px; --fr: 150deg; animation-delay: 0s; }
.tower-rigid.collapsed .floor-4 { --fx: 64px; --fr: 110deg; animation-delay: 0.05s; }
.tower-rigid.collapsed .floor-3 { --fx: 34px; --fr: 70deg; animation-delay: 0.15s; }
.tower-rigid.collapsed .floor-2 { --fx: -32px; --fr: -65deg; animation-delay: 0.25s; }
.tower-rigid.collapsed .floor-1 { --fx: 18px; --fr: 35deg; animation-delay: 0.35s; }

.tower-rubble {
  position: absolute; bottom: 0; left: 28px; width: 154px; height: 24px;
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 4;
  background:
    radial-gradient(circle at 18% 85%, var(--scene-rubble) 0 8px, transparent 9px),
    radial-gradient(circle at 42% 70%, var(--scene-steel-light) 0 10px, transparent 11px),
    radial-gradient(circle at 64% 88%, var(--scene-steel-mid) 0 7px, transparent 8px),
    radial-gradient(circle at 86% 76%, var(--scene-rubble) 0 9px, transparent 10px);
}
.tower-rubble.show { opacity: 1; }

/* What to Observe panel */
.observe-panel { margin-top: var(--space-7); }
.observe-title { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-4); }
.observe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.observe-card { border-radius: var(--radius-lg); padding: var(--space-5); border: 1.5px solid var(--color-border); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.observe-card-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.observe-emoji { font-size: 26px; }
.observe-card-head h5 { font-size: var(--text-lg); font-weight: 800; }
.observe-card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }

/* Lab subsection + clips */
.lab-subsection { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1.5px solid var(--color-border); }
.lab-subhead { font-size: var(--text-lg); font-weight: 800; margin-bottom: var(--space-1); }
.lab-subtext { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); max-width: 760px; line-height: 1.5; }
.clips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* YouTube facades */
.yt-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; background: var(--scene-screen-black); border: 1.5px solid var(--color-border); }
.video-screen .yt-facade { height: 100%; aspect-ratio: auto; border-radius: 0; border: none; }
.yt-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease, filter 0.3s ease; }
.yt-facade:hover .yt-thumb { transform: scale(1.05); filter: brightness(0.82); }
.yt-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.yt-play { width: 58px; height: 58px; border-radius: 50%; background: rgba(229, 57, 53, 0.92); border: 3px solid var(--color-on-primary); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); transition: transform 0.2s ease, background 0.2s ease; cursor: pointer; }
.yt-facade:hover .yt-play { transform: scale(1.1); background: #E53935; }
.yt-play svg { width: 26px; height: 26px; fill: currentColor; }
.yt-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4) var(--space-3) var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--color-on-primary); background: linear-gradient(transparent, rgba(0,0,0,0.8)); }
.yt-iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Documentary chapters now always visible (videos are real) */
.video-chapters { display: block; }

/* Interactive tornado simulation */
.sim-layout { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 30px; align-items: stretch; margin-bottom: 28px; }
.sim-controls { display: flex; flex-direction: column; gap: 16px; }
.sim-phase { font-size: 13px; font-weight: 800; color: var(--color-primary); background: var(--color-focus-ring); border-radius: 10px; padding: 11px 14px; text-align: center; }

/* Tornado stage */
.tornado-stage {
  position: relative; height: 330px; border-radius: 16px; overflow: hidden;
  border: 1.5px solid var(--color-border);
  background: linear-gradient(180deg, var(--scene-storm-sky-1) 0%, var(--scene-storm-sky-2) 42%, var(--scene-storm-sky-3) 66%, var(--scene-storm-sky-4) 66%, var(--scene-storm-sky-5) 100%);
}
.storm-clouds {
  position: absolute; top: 0; left: 0; right: 0; height: 96px;
  background:
    radial-gradient(46px 28px at 18% 45%, var(--scene-storm-cloud-1), transparent 70%),
    radial-gradient(56px 32px at 46% 32%, var(--scene-storm-cloud-2), transparent 70%),
    radial-gradient(50px 30px at 74% 48%, var(--scene-storm-cloud-1), transparent 70%),
    radial-gradient(40px 24px at 92% 38%, var(--scene-storm-cloud-2), transparent 70%),
    linear-gradient(180deg, var(--scene-storm-cloud-1), transparent);
}
.sim-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 26px; background: linear-gradient(180deg, var(--scene-grass-3), var(--scene-grass-4)); border-top: 2px solid var(--scene-grass-edge-2); }
.sim-town { position: absolute; bottom: 26px; left: 0; right: 0; height: 60px; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 24px; z-index: 2; }
.town-house { position: relative; width: 46px; height: 42px; transition: transform 0.55s cubic-bezier(0.4,0.05,0.55,0.6), opacity 0.55s, filter 0.55s; transform-origin: bottom center; }
.town-house .roof { position: absolute; top: -13px; left: 0; width: 0; height: 0; border-left: 23px solid transparent; border-right: 23px solid transparent; border-bottom: 15px solid var(--scene-house-roof-red); }
.town-house .body { display: block; width: 46px; height: 100%; background: linear-gradient(180deg, var(--scene-house-body-1), var(--scene-house-body-2)); border: 1px solid var(--scene-house-body-edge); border-radius: 2px 2px 0 0; position: relative; overflow: hidden; }
.town-house .body::before, .town-house .body::after { content: ''; position: absolute; top: 9px; width: 9px; height: 9px; background: var(--scene-house-win); border: 1px solid var(--scene-house-win-edge); border-radius: 1px; }
.town-house .body::before { left: 7px; }
.town-house .body::after { right: 7px; }
.town-house .door { position: absolute; bottom: 0; left: 18px; width: 11px; height: 16px; background: var(--scene-earth-1); border-radius: 3px 3px 0 0; z-index: 1; }
/* Varied heights and colours so the town doesn't look stamped out */
.town-house:nth-child(1) { height: 46px; }
.town-house:nth-child(2) { height: 38px; }
.town-house:nth-child(2) .roof { border-bottom-color: var(--scene-house-roof-blue); }
.town-house:nth-child(2) .body { background: linear-gradient(180deg, var(--scene-house-body-3), var(--scene-gfloor-2)); }
.town-house:nth-child(3) { height: 54px; }
.town-house:nth-child(3) .roof { border-bottom-color: var(--scene-house-roof-grape); }
.town-house:nth-child(4) { height: 40px; }
.town-house:nth-child(4) .body { background: linear-gradient(180deg, var(--scene-house-body-5), var(--scene-house-body-6)); }
.town-house:nth-child(5) { height: 48px; }
.town-house:nth-child(5) .roof { border-bottom-color: var(--scene-house-roof-green); }
.town-house.fallen { transform: translateY(14px) rotate(13deg); opacity: 0.82; }
.town-house.rubbled { transform: translateY(30px) rotate(72deg) scale(0.8); opacity: 0.28; filter: grayscale(0.5); }

.tornado-mover { position: absolute; bottom: 26px; left: -12%; width: 110px; height: 212px; opacity: 0; z-index: 3; }
.tornado-stage.playing .tornado-mover { animation: tornado-cross var(--cross-dur, 5s) ease-in-out forwards; }
@keyframes tornado-cross {
  0% { left: -12%; opacity: 0; }
  12% { left: 2%; opacity: 1; }
  85% { left: 84%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
/* A twisting, semi-transparent funnel with swirling bands */
.tornado-funnel {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 86px; height: 202px;
  background:
    repeating-linear-gradient(-70deg, rgba(255,255,255,0.13) 0 5px, transparent 5px 13px),
    linear-gradient(96deg, rgba(58,66,76,0.35) 0%, rgba(126,136,148,0.88) 42%, rgba(48,56,66,0.72) 100%);
  clip-path: polygon(16% 0, 84% 0, 72% 20%, 60% 46%, 62% 72%, 57% 100%, 43% 100%, 38% 72%, 40% 46%, 28% 20%);
  filter: blur(0.5px);
  transform-origin: top center;
  animation: funnel-spin 0.4s linear infinite, funnel-sway 2.2s ease-in-out infinite;
}
@keyframes funnel-spin { from { background-position: 0 0, 0 0; } to { background-position: 46px 0, 0 0; } }
@keyframes funnel-sway { 0%, 100% { transform: translateX(-50%) rotate(-2.5deg); } 50% { transform: translateX(-50%) rotate(2.5deg); } }

.tornado-debris { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 124px; height: 36px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(112,99,82,0.78), rgba(112,99,82,0.22) 58%, transparent 76%); animation: dust-pulse 1.1s ease-in-out infinite; }
@keyframes dust-pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.14); } }

/* Debris ripped up and flung around the funnel while it's active */
.debris-bit { position: absolute; bottom: 18px; left: 50%; width: 7px; height: 4px; background: var(--scene-debris-1); border-radius: 1px; opacity: 0; }
.tornado-stage.playing .debris-bit { animation: debris-fly 0.9s linear infinite; }
.debris-bit.b1 { --dx: -46px; --dy: -54px; animation-delay: 0s; }
.debris-bit.b2 { --dx: 40px; --dy: -80px; animation-delay: 0.18s; background: var(--scene-debris-2); }
.debris-bit.b3 { --dx: -30px; --dy: -98px; animation-delay: 0.36s; }
.debris-bit.b4 { --dx: 52px; --dy: -40px; animation-delay: 0.54s; background: var(--scene-house-roof-red); }
.debris-bit.b5 { --dx: -58px; --dy: -72px; animation-delay: 0.72s; background: var(--scene-house-roof-blue); }
@keyframes debris-fly {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 30px), var(--dy, -70px)) rotate(420deg); }
}

/* Storm cloud flickers with lightning while the tornado is on */
.tornado-stage.playing .storm-clouds { animation: cloud-flash 5.5s linear infinite; }
@keyframes cloud-flash {
  0%, 92%, 100% { filter: brightness(1); }
  93% { filter: brightness(1.7); }
  94% { filter: brightness(1); }
  95% { filter: brightness(1.9); }
  96% { filter: brightness(1); }
}

/* Case studies (Iceland, tornado) */
.case-study { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-top: 22px; }
.case-study + .case-study { margin-top: 34px; padding-top: 34px; border-top: 1.5px solid var(--color-border); }
.case-study-reverse .case-study-media { order: 2; }
.case-study-info > .lab-badge { margin-bottom: 0; }
.case-study-info h4 { font-size: 18px; font-weight: 800; margin: 10px 0 8px; }
.case-intro { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 16px; }
.case-study-info h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 800; margin-bottom: 8px; }
.case-facts { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.case-facts li { font-size: 13px; color: var(--color-text); padding-left: 18px; position: relative; line-height: 1.4; }
.case-facts li::before { content: '▸'; position: absolute; left: 0; color: var(--color-primary); font-weight: 800; }

.vs-note { display: flex; align-items: stretch; gap: 16px; background: var(--color-bg); border: 1.5px solid var(--color-border); border-radius: 14px; padding: 16px 20px; margin-bottom: 8px; }
.vs-item { flex: 1; display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.5; color: var(--color-text); }
.vs-emoji { font-size: 26px; flex-shrink: 0; }
.vs-divider { align-self: center; font-weight: 800; color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; }

/* Engine: ash-in-the-sky scene */
.engine-canvas-container { justify-content: flex-start; padding: 14px; }
.engine-canvas-container .jet-engine-svg { flex: 1; min-height: 0; }
.ash-sky { position: relative; width: 100%; height: 72px; border-radius: 12px; overflow: hidden; margin-bottom: 10px; background: linear-gradient(180deg, var(--scene-ash-sky-1), var(--scene-ash-sky-2)); }
.ash-active .ash-sky { background: linear-gradient(180deg, var(--scene-ash-sky-3), var(--scene-ash-sky-4)); }
.ash-sun { position: absolute; top: 10px; left: 22px; width: 24px; height: 24px; border-radius: 50%; background: var(--scene-ash-sun); opacity: 0.5; }
.ash-plane { position: absolute; top: 12px; left: -32px; font-size: 20px; animation: plane-cross 8s linear infinite; }
.ash-drift { position: absolute; border-radius: 50%; background: rgba(69,90,100,0.5); filter: blur(3px); animation: ash-float 6s ease-in-out infinite; }
.ash-d1 { width: 64px; height: 30px; top: 16px; left: 28%; }
.ash-d2 { width: 86px; height: 36px; top: 26px; left: 48%; animation-delay: 1.2s; }
.ash-d3 { width: 52px; height: 26px; top: 12px; left: 72%; animation-delay: 2.1s; }
.ash-sky-label { position: absolute; bottom: 4px; right: 8px; font-size: 10px; font-weight: 700; color: var(--scene-concrete-1); }
@keyframes plane-cross { 0% { left: -32px; } 100% { left: 108%; } }
@keyframes ash-float { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }

/* Engine overheat fire */
#engine-fire { transition: opacity 0.4s ease; }
.engine-on-fire .flame { transform-origin: center bottom; animation: flame-flicker 0.25s ease-in-out infinite alternate; }
@keyframes flame-flicker { from { transform: scaleY(1) scaleX(1); } to { transform: scaleY(1.18) scaleX(0.9); } }
.engine-on-fire .ember { animation: ember-rise 1.2s ease-out infinite; }
@keyframes ember-rise { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }

/* Engine right column — accessible cards */
.engine-explanations { display: flex; flex-direction: column; gap: 16px; }
.engine-note { background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 12px; padding: 16px; }
.engine-note h4 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.engine-note p { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; }
.temp-badge { display: inline-block; background: var(--status-danger); color: var(--color-on-danger); font-weight: 800; font-size: 12px; padding: 1px 8px; border-radius: var(--radius-sm); }

/* Step emphasis while the ash simulation is running */
.step-item { border-radius: 8px; transition: all 0.25s ease; }
.ash-active .step-item { opacity: 0.5; }
.ash-active .step-item.active {
  opacity: 1;
  color: var(--color-text);
  background: var(--color-volcano-bg);
  box-shadow: inset 3px 0 0 var(--color-volcano);
  padding: 8px 12px 8px 24px;
  transform: translateX(2px);
}
.ash-active .step-item.active strong { color: var(--color-volcano); }
.engine-on-fire .step-item#step-3.active { box-shadow: inset 3px 0 0 var(--status-danger); background: var(--status-danger-bg); }

/* "How humans adapted" — standard content box, matching the lab template */
.adaptation-card { background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 12px; padding: 16px; }
.adaptation-card h5 { font-size: 14px; font-weight: 800; margin-bottom: 8px; color: var(--color-text); }
.adaptation-card p { font-size: 13px; color: var(--color-text-muted); line-height: 1.6; }

/* ==========================================================================
   Amendments: range inputs, sidebar filters, drawer blocks, popups,
   severity dial, alert modal, and Tailwind-style toasts
   ========================================================================== */

/* Friendly range sliders (shared) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 5px;
  background: var(--color-border);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-primary); border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-sm); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-primary); border: 2px solid var(--color-surface); cursor: pointer;
}

/* Sidebar: emoji filter icons + severity filter + feed timestamp */
.filter-emoji { font-size: 16px; margin-right: 10px; line-height: 1; }
.severity-filter { margin-top: 14px; padding: 14px; background-color: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; }
.severity-filter-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.severity-filter-head label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.severity-filter-val { font-size: 12px; font-weight: 800; color: var(--color-primary); background: var(--color-focus-ring); padding: 2px 10px; border-radius: 20px; }
.severity-filter input[type="range"] { width: 100%; }
.severity-filter-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-muted); margin-top: 4px; font-weight: 600; }
.feed-updated { font-size: 10.5px; color: var(--color-text-muted); font-weight: 600; }
.legend-icon { font-size: 15px; }

/* Sidebar card severity chip */
.card-sev { width: 22px; height: 22px; border-radius: 6px; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Wider drawer for richer content */
.details-drawer { width: 720px; }

/* Prominent severity dial */
.severity-main { display: flex; gap: 16px; align-items: center; }
.severity-dial {
  width: 66px; height: 66px; border-radius: var(--radius-lg);
  background: var(--color-primary); color: var(--color-on-primary);
  display: flex; align-items: center; justify-content: center; gap: 1px;
  flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.severity-dial-num { font-size: 32px; font-weight: 800; line-height: 1; }
.severity-dial-max { font-size: 12px; font-weight: 700; opacity: 0.85; }
.severity-info { flex: 1; }
.severity-info-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.severity-info-head h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); font-weight: 800; }

/* Stacked drawer blocks */
.drawer-block { margin-bottom: 22px; }
.block-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--color-text); }
.block-icon { width: 18px; height: 18px; color: var(--color-primary); }
.block-head h3 { font-size: 14px; font-weight: 800; }
.block-caption { font-size: 11px; color: var(--color-text-muted); margin-top: 8px; }

.location-map-frame { width: 100%; height: 260px; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--color-border); background: var(--color-bg); }
.location-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.facts-safety-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.fact-card { background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 14px; padding: 16px; }
.fact-card h4 { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.fact-body { font-size: 12px; color: var(--color-text-muted); line-height: 1.55; white-space: pre-line; }

.timeline-scroll { max-height: 290px; padding: 6px 10px 6px 6px; border: 1.5px solid var(--color-border); border-radius: 14px; background: transparent; }
.timeline-item { display: flex; gap: 12px; padding: 10px 6px; position: relative; }
.timeline-item:not(:last-child)::after { content: ''; position: absolute; left: 11px; top: 26px; bottom: -4px; width: 2px; background: var(--color-border); }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rag, var(--color-text-muted)); border: 2px solid var(--color-surface); margin-top: 8px; flex-shrink: 0; z-index: 1; }
.timeline-now .timeline-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--rag, var(--color-text-muted)) 25%, transparent); }
.timeline-body { flex: 1; }
.timeline-time { font-size: 10.5px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; }
.timeline-title { font-size: 13px; font-weight: 800; margin: 2px 0; }
.timeline-text { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.45; }

/* Map popups styled like the drawer */
.np-popup .leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
.np-popup .leaflet-popup-content { margin: 0; width: 250px !important; }
.np-popup .leaflet-popup-tip { background: var(--color-surface); border: 1px solid var(--color-border); }
/* Close button sits inline with the event-type badge (same row + vertical band),
   inset to the card's content padding so it stays within the content block. */
.np-popup .leaflet-popup-close-button {
  top: 16px; right: 16px; width: 24px; height: 24px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 16px/1 var(--font-body); color: var(--color-text-muted);
}
.np-popup .leaflet-popup-close-button:hover { color: var(--color-text); }
.np-popup-card { padding: 16px; }
/* badge shares the close button's row; keep its band the same height for alignment */
.np-popup-badge { margin-bottom: 10px; min-height: 24px; max-width: calc(100% - 32px); }
.np-popup-title {
  font-size: 15px; font-weight: 800; margin-bottom: 12px; line-height: 1.3; color: var(--color-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.np-popup-sev { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.np-popup-sev-num { width: 30px; height: 30px; border-radius: 9px; color: #fff; font-weight: 800; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.np-popup-sev-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
.np-popup-btn { width: 100%; padding: 9px; font-size: 13px; }

/* Alert modal (centred dialog) */
#subscribe-dialog {
  border: none; padding: 0;
  border-radius: 20px;
  max-width: 460px;
  width: calc(100% - 32px);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
  margin: auto; /* centre in viewport */
}
#subscribe-dialog::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(3px); }
.dialog-content { padding: 24px; }
.dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.dialog-header h2 { font-size: 18px; font-weight: 800; }
.dialog-close { width: 34px; height: 34px; flex-shrink: 0; }
.dialog-intro { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.range-slider-wrapper { display: flex; align-items: center; gap: var(--space-3); }
.range-slider-wrapper input[type="range"] { flex: 1; }
.slider-bubble { font-size: var(--text-xs); font-weight: 800; color: var(--color-primary); background: var(--color-focus-ring); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); white-space: nowrap; }
.form-help { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); line-height: 1.4; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.checkbox-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; padding: var(--space-2) var(--space-3); border: 1.5px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s ease; }
.checkbox-label:hover { border-color: var(--color-primary); }
.checkbox-label input { accent-color: var(--color-primary); width: 16px; height: 16px; }
.checkbox-wide { width: 100%; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); }

/* Text inputs in the alert modal */
.form-input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* Telephone input with country dialling code */
.phone-input { display: flex; gap: var(--space-2); }
.phone-code, .phone-number {
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.phone-code { flex: 0 0 auto; font-weight: 700; cursor: pointer; }
.phone-number { flex: 1; min-width: 0; }
.phone-code:focus, .phone-number:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus-ring); }

/* City/town autocomplete dropdown */
.autocomplete-wrap { position: relative; }
.autocomplete-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  display: none;
  max-height: 240px;
  overflow-y: auto;
}
.autocomplete-item { padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; border-bottom: 1px solid var(--color-border); }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--color-focus-ring); }
.autocomplete-item .ac-name { font-size: 13px; font-weight: 700; color: var(--color-text); }
.autocomplete-item .ac-meta { font-size: 11px; color: var(--color-text-muted); }

/* ==========================================================================
   Toasts / Notifications — brand component (design-system aligned)
   --------------------------------------------------------------------------
   A glass-panel surface with a tinted icon chip (matching .feature-icon /
   .observe-ico), Sora title, and an auto-dismiss progress bar. The accent is
   driven by a single per-toast custom property so category + generic (brand)
   variants share one rule and re-theme for free.
   ========================================================================== */
.toast-container {
  position: fixed;
  top: var(--space-5); right: var(--space-5);
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 360px;
  max-width: calc(100vw - var(--space-6));
  pointer-events: none;
}
.toast {
  /* Default = brand accent; category variants override these two vars. */
  --toast-accent: var(--color-primary);
  --toast-accent-bg: var(--color-focus-ring);

  position: relative;
  overflow: hidden;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: toast-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Auto-dismiss progress bar (matches the 6s timeout in showToast). */
.toast::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 3px;
  background: var(--toast-accent);
  opacity: 0.5;
  transform-origin: left;
  animation: toast-progress 6s linear forwards;
}
.toast-earthquakes { --toast-accent: var(--color-earthquake); --toast-accent-bg: var(--color-earthquake-bg); }
.toast-volcanoes   { --toast-accent: var(--color-volcano);    --toast-accent-bg: var(--color-volcano-bg); }
.toast-wildfires   { --toast-accent: var(--color-wildfire);   --toast-accent-bg: var(--color-wildfire-bg); }
.toast-storms      { --toast-accent: var(--color-storm);      --toast-accent-bg: var(--color-storm-bg); }
.toast-floods      { --toast-accent: var(--color-flood);      --toast-accent-bg: var(--color-flood-bg); }
.toast-droughts    { --toast-accent: var(--color-drought);    --toast-accent-bg: var(--color-drought-bg); }
.toast-heatwaves   { --toast-accent: var(--color-heatwave);   --toast-accent-bg: var(--color-heatwave-bg); }

.toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--toast-accent-bg);
  color: var(--toast-accent);
  font-size: var(--text-lg);
  line-height: 1;
}
.toast-content { flex: 1; min-width: 0; padding-top: 1px; }
.toast-content h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--color-text);
}
.toast-content p {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.45;
}
.btn-toast-close {
  margin: -2px -2px 0 var(--space-1);
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-toast-close:hover { background: var(--color-surface-sunken); color: var(--color-text); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-progress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* ==========================================================================
   Disaster Library page
   ========================================================================== */
.library-section { max-width: 1200px; margin: 40px auto 60px; padding: 0 24px; }
.library-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.library-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.library-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.library-media { position: relative; width: 100%; aspect-ratio: 16 / 9; cursor: pointer; background: var(--scene-screen-black); }
.library-body { padding: 20px; display: flex; flex-direction: column; }
.library-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.library-emoji {
  font-size: 24px; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--color-bg); flex-shrink: 0;
}
.library-head h3 { font-size: 19px; font-weight: 800; }
.library-desc { font-size: 13.5px; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 14px; }
.library-points { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.library-points li { font-size: 12.5px; color: var(--color-text); padding-left: 20px; position: relative; line-height: 1.4; }
.library-points li::before { content: '→'; position: absolute; left: 0; color: var(--color-primary); font-weight: 800; }

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */

@media (max-width: 900px) {
  /* --- Header: collapse nav into the right-aligned burger menu --- */
  .app-header { justify-content: flex-start; gap: 8px; padding: 0 16px; }
  .header-logo { margin-right: auto; }     /* pushes everything else to the right */
  .logo-text .tagline { display: none; }   /* drop tagline to keep the header compact */
  .splash-nav { display: none; }           /* desktop nav lives in the burger menu */
  #theme-btn { display: none; }            /* theme toggle moves into the burger menu */
  .menu-btn { display: inline-flex; }
  /* Map page: keep alert + ping but compact (icon-only) next to the burger */
  .header-actions { gap: 8px; }
  .header-tools { gap: 8px; }
  .header-actions span { display: none; }
  .header-actions .btn { padding: 9px; }
  /* No centred nav to protect on mobile — drop the reserved space entirely. */
  .header-tools--hidden { display: none; }

  /* --- Homepage hero --- */
  .hero-section { min-height: 70vh; }
  .hero-inner { min-height: 70vh; padding: var(--space-6) var(--space-5); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-hero-light, .hero-actions .btn-hero-glass { width: 100%; justify-content: center; }
  /* pull the ping cluster inward so it stays visible on narrow screens */
  .hp2 { left: 86%; } .hp4 { left: 88%; }

  /* --- Notification CTA: inset within the grid like other sections --- */
  .alert-cta-section { flex-direction: column; align-items: flex-start; gap: 20px; width: auto; margin: 32px 24px 48px; padding: 24px; }
  .cta-action { align-items: stretch; width: 100%; }
  .cta-settings { width: 100%; }
  .cta-settings label { text-align: left; }
  .facts-safety-grid { grid-template-columns: 1fr; }
  .shake-table-container { grid-template-columns: 1fr; }
  .engine-blockage-layout { grid-template-columns: 1fr; }
  .documentary-grid { grid-template-columns: 1fr; }
  .observe-grid { grid-template-columns: 1fr; }
  .clips-grid { grid-template-columns: 1fr; }
  .sim-layout { grid-template-columns: 1fr; }
  .library-grid { grid-template-columns: 1fr; }
  .case-study { grid-template-columns: 1fr; }
  .case-study-reverse .case-study-media { order: 0; }
  .vs-note { flex-direction: column; gap: 12px; }
  .vs-divider { align-self: flex-start; }

  /* --- Map page: full-screen detail takeover + accordion-driven layout --- */
  .details-drawer {
    width: 100vw; height: 100%;
    top: 0; left: 0; right: 0; bottom: 0;
    transform: translateY(100%);
    border-radius: 0;
  }
  .details-drawer.open { transform: translateY(0); }
  .app-layout { flex-direction: column; }
  .dashboard-panel { width: 100%; height: auto; max-height: 72vh; overflow-y: auto; border-right: none; border-bottom: 1.5px solid var(--color-border); }
  .feed-container { flex: none; }
  .disaster-list { max-height: 32vh; }
  .map-viewport { flex: 1; height: auto; min-height: 45vh; }

  /* Accordions become interactive (Filters + Active Events) on mobile. */
  .accordion-toggle { cursor: pointer; }
  .accordion-chevron { display: inline-flex; }
  .accordion:not(.open) > .accordion-body { display: none; }
  .feed-accordion > .accordion-body { display: block; flex: none; }
  .feed-accordion:not(.open) > .accordion-body { display: none; }
  .feed-accordion .feed-updated { display: none; }
}

/* ==========================================================================
   Disastr Lab (school-lab) — responsive overrides
   The lab markup uses inline-styled grids, so these rules need !important
   to win over the element's inline grid-template-columns.
   ========================================================================== */

/* Tablet portrait & below: simulator stage + controls stack vertically so
   the stage gets full width instead of being squeezed into ~half the card. */
@media (max-width: 900px) {
  .lab-sim-grid { grid-template-columns: 1fr !important; }
  .lab-main { padding-left: 24px !important; padding-right: 24px !important; }
}

/* Phones: collapse the remaining two-up rows and tighten padding. */
@media (max-width: 600px) {
  .lab-duo { grid-template-columns: 1fr !important; }
  .lab-case-grid { grid-template-columns: 1fr !important; }
  .lab-main { padding-left: 16px !important; padding-right: 16px !important; }
  .lab-card { padding: 18px; }
  .hero-band-inner { padding-left: var(--space-5); padding-right: var(--space-5); }
}

/* ==========================================================================
   EL NIÑO — homepage "El Niño Watch" section (v2)
   All paint references design tokens — see styles/tokens.css.
   ========================================================================== */
.elnino-section { width: 100%; max-width: 1120px; margin: var(--space-7) auto; padding: 0 var(--space-6); }
.elnino-panel { padding: var(--space-6) var(--space-6) 0; overflow: hidden; }

/* shared segmented unit toggle (km/mi, °C/°F) — also used on the tracker page */
.en-unit-toggles { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.unit-toggle { display: inline-flex; gap: 4px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 4px; }
.unit-btn { border: none; background: none; cursor: pointer; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); color: var(--color-text-muted); padding: 5px 12px; border-radius: var(--radius-pill); transition: all 0.15s ease; }
.unit-btn:hover { color: var(--color-text); }
.unit-btn.active { background: var(--color-primary); color: var(--color-on-primary); }

/* header */
.en-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.en-head-text h4 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
.en-dateline { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--color-text-muted); margin-top: 3px; }
.en-mono-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--color-text-muted); }
.en-mono-on-dark { color: rgba(255, 255, 255, 0.65); }

/* four enlarged stat cards */
.en-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding: var(--space-6) 0; }
@media (min-width: 760px) { .en-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.en-stat { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); min-width: 0; }
.en-stat-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 28px; }
.en-stat-icon { display: inline-flex; }
.en-stat-icon svg { display: block; }
.unit-toggle.compact { padding: 3px; gap: 3px; }
.unit-toggle.compact .unit-btn { padding: 3px 9px; font-size: 10.5px; }
.en-stat-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.02em; line-height: 1.1; color: var(--color-text); margin-top: var(--space-3); }
.en-stat-label { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 5px; }
.en-stat-note { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 6px; }
.en-stat-note-hot { color: var(--color-heatwave); font-weight: 600; }

/* lower: comparison bars + ONI gauge */
.en-lower { display: grid; grid-template-columns: 1fr; gap: var(--space-5); padding-bottom: var(--space-6); }
@media (min-width: 760px) { .en-lower { grid-template-columns: 1.55fr 1fr; } }
.en-compare { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.en-compare .en-mono-label { display: block; margin-bottom: var(--space-5); }
.en-sev-bars { display: flex; flex-direction: column; gap: var(--space-4); }
.en-bar-row { display: grid; grid-template-columns: 66px 1fr 44px; align-items: center; gap: var(--space-3); }
.en-bar-label { font-family: var(--font-mono); font-size: 12.5px; color: var(--color-text-muted); }
.en-bar-track { height: 11px; background: var(--color-surface-sunken); border-radius: 6px; overflow: hidden; }
.en-bar-fill { display: block; height: 100%; border-radius: 6px; background: var(--color-border-strong); }
.en-bar-val { font-family: var(--font-mono); font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; color: var(--color-text-muted); }
.en-bar-current .en-bar-label, .en-bar-current .en-bar-val { color: var(--color-heatwave); }
.en-bar-current .en-bar-fill { background: linear-gradient(90deg, var(--cat-gold), var(--color-heatwave)); }

.en-oni-card { background: linear-gradient(135deg, var(--brand-800), var(--brand-600)); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.en-oni-value-row { display: flex; align-items: baseline; gap: var(--space-3); margin-top: var(--space-2); }
.en-oni-value { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); letter-spacing: -0.02em; line-height: 1; color: color-mix(in srgb, var(--cat-gold) 55%, #fff); }
.en-oni-note { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.7); }
.en-oni-track { position: relative; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.16); margin-top: var(--space-4); overflow: hidden; }
.en-oni-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--cat-gold), var(--cat-ember)); transition: width 0.5s ease; }
.en-oni-scale { display: flex; justify-content: space-between; margin-top: 7px; font-family: var(--font-mono); font-size: 10.5px; color: rgba(255, 255, 255, 0.5); }
.en-oni-caption { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.78); margin-top: var(--space-4); line-height: 1.5; }

/* outlook (horizontal timeline) */
.en-outlook { padding: var(--space-5) 0 var(--space-6); border-top: 1px solid var(--color-border); }
.en-outlook > .en-mono-label { display: block; letter-spacing: 0.12em; margin-bottom: var(--space-5); }
.en-outlook-track { position: relative; }
.en-outlook-line { position: absolute; left: 16%; right: 16%; top: 6px; height: 2px; background: var(--color-border); }
.en-outlook-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 680px) { .en-outlook-grid { grid-template-columns: repeat(3, 1fr); } }
.en-outlook-step { text-align: center; padding: 0 var(--space-2); }
.en-outlook-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--dot, var(--color-primary)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--dot, var(--color-primary)) 18%, var(--color-surface)); }
.en-outlook-date { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--color-text-muted); margin-top: var(--space-3); }
.en-outlook-title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); margin-top: 5px; }
.en-outlook-text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; margin-top: 5px; }

/* footer CTA */
.en-cta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }

/* ==========================================================================
   EL NIÑO TRACKER — real-world map page (elnino.html)
   Standard map basemap; an equator reference line + a geographic
   sea-surface-heat overlay localise the El Niño. No radar.
   ========================================================================== */
/* heat overlay (added in JS) tints the warm pool above the tiles, below pins */
.elnino-map .leaflet-image-layer { mix-blend-mode: multiply; }
/* Contain Leaflet's panes in their own stacking context so the heat legend and
   equator label (siblings of #map) paint above the tiles, instead of flashing
   on the empty map then vanishing once tiles load over them. */
.elnino-map #map { z-index: 0; }

/* Equator annotation pinned to the vertical centre of the viewport */
.map-equator-label { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); z-index: 45; pointer-events: none;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; color: var(--color-heatwave);
  background: color-mix(in srgb, var(--color-surface) 86%, transparent); padding: 2px 7px; border-radius: var(--radius-sm); }

/* Sea-surface heat legend (cool → hot from category tokens) */
.heat-legend { position: absolute; bottom: var(--space-6); left: var(--space-6); z-index: 50; width: 220px; padding: var(--space-3) var(--space-4); pointer-events: auto; }
.heat-legend h3 { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-text-muted); margin-bottom: var(--space-2); font-weight: 500; }
.heat-legend-bar { height: 10px; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--cat-sky), var(--cat-teal), var(--cat-gold), var(--cat-ember), var(--status-danger)); margin-bottom: 6px; }
.heat-legend-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; font-weight: 500; color: var(--color-text-muted); }

/* El Niño "storm vitals" card in the tracker sidebar (mono labels per design) */
.en-vitals { padding: var(--space-4); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-3); }
.en-vitals-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.en-vitals-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--color-text-muted); }
.en-vitals-title strong { color: var(--color-heatwave); font-weight: 500; }
.en-vitals-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); align-items: start; }
.en-vital { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
.en-vital-value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.1; color: var(--color-text); }
.en-vital-value.is-hot { color: var(--color-heatwave); }
.en-vital-label { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-top: 4px; }
.en-vital-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 6px; flex-wrap: wrap; }
.en-vital-foot .en-vital-label { margin-top: 0; }

/* Active Impacts list reuses the live tracker's .disaster-card styling. */
.card-place { margin-left: auto; color: var(--color-text-muted); font-weight: 600; }

/* The collapsible "Active Impacts/Events" accordion keeps the Filters section's
   padded, bordered look, but when open it expands to fill the rest of the
   sidebar so the event list grows with the panel (rather than sitting at a fixed
   height with dead space below). The list scrolls internally. Scoped via
   .always-collapsible; shared by the El Niño tracker and the live map. */
.feed-container.always-collapsible {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: var(--space-4); border-bottom: 1px solid var(--color-border);
}
/* Collapsed: shrink back to just the header so it doesn't hold empty space. */
.feed-container.always-collapsible:not(.open) {
  flex: none; display: block; overflow: visible;
}
.feed-container.always-collapsible .feed-header.accordion-toggle {
  padding: 0; border-bottom: none; margin-bottom: var(--space-3);
}
.feed-container.always-collapsible > .accordion-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
.feed-container.always-collapsible:not(.open) > .accordion-body { display: none; }
.feed-container.always-collapsible .disaster-list {
  flex: 1; min-height: 0; padding: 0; overflow-y: auto;
}
/* On mobile the whole sidebar scrolls as one column, so the collapsible feed
   reverts to a self-contained block with an internally-scrolling list rather
   than trying to flex-fill. Placed after the desktop rules so it wins by source
   order at narrow widths (equal specificity). */
@media (max-width: 900px) {
  .feed-container.always-collapsible { flex: none; display: block; overflow: visible; }
  .feed-container.always-collapsible.open > .accordion-body { flex: none; display: block; overflow: visible; }
  .feed-container.always-collapsible .disaster-list { flex: none; max-height: 46vh; }
}

@media (max-width: 900px) {
  .elnino-section { padding: 0 var(--space-5); }
  .elnino-panel { padding: var(--space-5) var(--space-5) 0; }
  .en-panel-head { flex-direction: column; align-items: flex-start; }
  .en-outlook-line { display: none; }
  .en-cta { justify-content: stretch; }
  .en-cta .btn { width: 100%; justify-content: center; }
  .heat-legend { width: 180px; bottom: var(--space-4); left: var(--space-4); }
}