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

:root {
  /* Color Palette - Warm & Educational Pastels */
  --primary-color: hsl(168, 76%, 38%);
  --primary-light: hsl(168, 76%, 95%);
  --primary-hover: hsl(168, 76%, 32%);
  --accent-color: hsl(24, 90%, 62%);
  --accent-light: hsl(24, 90%, 95%);
  
  /* Disaster-specific Theme Colors (Soft, Educational & Reassuring) */
  --color-earthquake: hsl(35, 45%, 45%);
  --color-earthquake-bg: hsl(35, 45%, 95%);
  --color-volcano: hsl(8, 70%, 55%);
  --color-volcano-bg: hsl(8, 70%, 95%);
  --color-wildfire: hsl(18, 85%, 55%);
  --color-wildfire-bg: hsl(18, 85%, 95%);
  --color-storm: hsl(210, 70%, 55%);
  --color-storm-bg: hsl(210, 70%, 95%);
  --color-flood: hsl(196, 80%, 45%);
  --color-flood-bg: hsl(196, 80%, 95%);
  --color-drought: hsl(40, 82%, 48%);
  --color-drought-bg: hsl(40, 82%, 95%);

  /* Light Mode Semantics (Default) */
  --bg-app: hsl(45, 20%, 96%);
  --bg-card: hsla(0, 0%, 100%, 0.85);
  --bg-header: hsl(0, 0%, 100%);
  --text-main: hsl(210, 24%, 16%);
  --text-muted: hsl(210, 10%, 45%);
  --border-color: hsla(168, 40%, 30%, 0.12);
  --border-hover: hsla(168, 40%, 30%, 0.25);
  --map-filter: none;
  --scrollbar-track: hsl(45, 10%, 90%);
  --scrollbar-thumb: hsl(168, 20%, 80%);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
  /* Dark Mode Semantics */
  --bg-app: hsl(215, 20%, 10%);
  --bg-card: hsla(215, 20%, 16%, 0.85);
  --bg-header: hsl(215, 20%, 14%);
  --text-main: hsl(210, 20%, 95%);
  --text-muted: hsl(210, 10%, 70%);
  --border-color: hsla(168, 30%, 50%, 0.18);
  --border-hover: hsla(168, 30%, 50%, 0.35);
  --map-filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.95);
  --scrollbar-track: hsl(215, 15%, 15%);
  --scrollbar-thumb: hsl(168, 15%, 30%);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
  
  --primary-light: hsl(168, 40%, 18%);
  --accent-light: hsl(24, 40%, 18%);
  --color-earthquake-bg: hsl(35, 30%, 16%);
  --color-volcano-bg: hsl(8, 30%, 16%);
  --color-wildfire-bg: hsl(18, 30%, 16%);
  --color-storm-bg: hsl(210, 30%, 16%);
  --color-flood-bg: hsl(196, 40%, 16%);
  --color-drought-bg: hsl(40, 40%, 16%);
}

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

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

body {
  font-family: 'Lexend', 'Roboto', sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  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: 8px;
  height: 8px;
}
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

.glass-panel {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

/* Logo links */
.logo-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
}

/* Navigation items in header */
.splash-nav {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

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

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

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 12px;
  border: none;
  font-family: 'Lexend', sans-serif;
  font-size: 14px;
  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(--primary-color);
  color: #ffffff;
  box-shadow: 0 4px 12px hsla(168, 76%, 38%, 0.2);
}
.btn-primary:hover {
  background-color: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px hsla(168, 76%, 38%, 0.3);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background-color: var(--primary-light);
  color: var(--primary-color);
  border: 1.5px solid var(--border-color);
}
.btn-secondary:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

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

.btn-icon {
  width: 42px;
  height: 42px;
  padding: 0;            /* override .btn padding so the icon isn't squashed */
  border-radius: 12px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  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(--primary-light);
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.btn-block {
  width: 100%;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 30px;
  font-size: 11px;
  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); }

/* Custom Map Marker classes */
.custom-marker { background: none; border: none; }
.marker-pin {
  width: 38px;
  height: 38px;
  border-radius: 50% 50% 50% 0;
  background: var(--primary-color);
  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 #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  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); }

.user-pulse-marker { background: none; border: none; }
.user-pulse {
  width: 14px; height: 14px; background-color: var(--accent-color); border: 2px solid #ffffff; border-radius: 50%;
  position: absolute; top: 50%; left: 50%; margin: -7px 0 0 -7px; box-shadow: 0 0 10px rgba(0,0,0,0.25); z-index: 10;
}
.user-pulse-ring {
  border: 3px solid var(--accent-color); border-radius: 40px; 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: 75px;
  background-color: var(--bg-header);
  border-bottom: 1.5px solid var(--border-color);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.header-logo { display: flex; align-items: center; }
.logo-icon { color: var(--primary-color); animation: spin-slow 20s linear infinite; display: flex; align-items: center; }
.logo-text h1 { font-size: 20px; font-weight: 800; color: var(--text-main); }
.logo-text h1 span { color: var(--primary-color); font-size: 15px; font-weight: 700; }
.logo-text .tagline { font-size: 11px; color: var(--text-muted); font-weight: 500; }

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

/* ==========================================================================
   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(--bg-app);
  display: flex;
  flex-direction: column;
  padding: 18px 22px 40px;
  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: 26px; padding-bottom: 16px;
  border-bottom: 1.5px solid var(--border-color);
}
.mobile-menu-title { font-size: 22px; font-weight: 800; color: var(--text-main); }

.mobile-menu-nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu-link {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 14px; border-radius: 14px;
  font-size: 18px; font-weight: 700; text-decoration: none;
  color: var(--text-main); border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mobile-menu-link:hover { background-color: var(--primary-light); }
.mobile-menu-link.active { background-color: var(--primary-light); color: var(--primary-color); border-color: var(--border-color); }

.mobile-menu-mode { margin-top: 26px; padding-top: 20px; border-top: 1.5px solid var(--border-color); }
.mobile-menu-subtitle {
  display: block; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 12px;
}
.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(--bg-card); border: 1px solid var(--border-color);
  color: var(--text-main); font-family: 'Lexend', sans-serif; font-size: 15px; font-weight: 700;
  transition: border-color 0.2s ease;
}
.mode-toggle-row:hover { border-color: var(--primary-color); }
.mode-toggle-icons { display: inline-flex; align-items: center; color: var(--primary-color); }
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: 12px;
  background: none; border: none; cursor: default;
  font-family: 'Lexend', sans-serif;
}
.accordion-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted);
}
.accordion-title i { width: 16px; height: 16px; }
.accordion-chevron { width: 18px; height: 18px; color: var(--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; }

.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-section {
  width: 100%;
  min-height: calc(100vh - 75px);
  margin: 0;
  padding: 60px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--primary-light) 0%, hsl(200, 82%, 94%) 28%, var(--bg-app) 52%, hsl(280, 60%, 95%) 76%, var(--accent-light) 100%);
  background-size: 220% 220%;
  animation: hero-gradient 18s ease infinite;
}
[data-theme="dark"] .hero-section {
  background: linear-gradient(120deg, var(--primary-light) 0%, hsl(200, 40%, 16%) 30%, var(--bg-app) 55%, hsl(280, 35%, 17%) 80%, var(--accent-light) 100%);
  background-size: 220% 220%;
}

@keyframes hero-gradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Animated weather scene behind the hero */
.hero-weather { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }

.hero-sun {
  position: absolute; top: 8%; right: 9%;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FFF6D5 0%, #FFE08A 46%, rgba(255,224,138,0) 72%);
  box-shadow: 0 0 90px 36px rgba(255, 213, 79, 0.32);
  animation: sun-pulse 6s ease-in-out infinite;
}
@keyframes sun-pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.06); opacity: 1; } }

.hero-cloud {
  position: absolute;
  width: 92px; height: 30px; border-radius: 30px;
  background: #ffffff;
  box-shadow: 34px 6px 0 -2px #fff, 64px 0 0 -5px #fff, 24px 14px 0 -7px #fff, 0 8px 22px rgba(120,140,160,0.18);
}
.cloud-1 { top: 16%; transform: scale(1.35); opacity: 0.9; animation: cloud-move 40s linear infinite; }
.cloud-2 { top: 40%; transform: scale(0.95); opacity: 0.72; animation: cloud-move 56s linear infinite; animation-delay: -14s; }
.cloud-3 { top: 62%; transform: scale(1.15); opacity: 0.6; animation: cloud-move 70s linear infinite; animation-delay: -34s; }
@keyframes cloud-move { from { left: -220px; } to { left: 115%; } }

/* Soft rain drifting across the left side */
.hero-rain {
  position: absolute; top: -10%; left: 0; width: 42%; height: 120%;
  background-image: repeating-linear-gradient(105deg, rgba(120,170,210,0.22) 0 1.5px, transparent 1.5px 11px);
  background-size: 26px 26px;
  animation: rain-fall 0.7s linear infinite;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, #000, transparent);
  mask-image: linear-gradient(to right, #000, transparent);
}
@keyframes rain-fall { from { background-position: 0 0; } to { background-position: -26px 26px; } }

/* Occasional lightning flash */
.hero-lightning {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 22% 30%, rgba(255,255,255,0.9), transparent 55%);
  opacity: 0;
  animation: lightning 11s linear infinite;
}
@keyframes lightning {
  0%, 90%, 100% { opacity: 0; }
  91% { opacity: 0.4; }
  92% { opacity: 0; }
  93.5% { opacity: 0.55; }
  95% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rain, .hero-lightning, .hero-cloud, .hero-sun { animation: none; }
  .hero-lightning { opacity: 0; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 60px;
  align-items: center;
}

.hero-content .hero-badge {
  display: inline-flex;
  padding: 6px 14px;
  background: linear-gradient(90deg, var(--primary-light), hsl(280, 60%, 95%), var(--accent-light));
  color: var(--primary-hover);
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 30px;
  margin-bottom: 20px;
  border: 1px solid var(--border-color);
}
[data-theme="dark"] .hero-content .hero-badge { background: var(--primary-light); }

.hero-content h2 {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-main);
  margin-bottom: 24px;
}

.hero-content h2 span {
  background: linear-gradient(90deg, var(--primary-color), hsl(200, 80%, 50%) 50%, var(--accent-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
}

.hero-content p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 36px;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 15px;
  border-radius: 14px;
}

.hero-visual {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  position: relative;
}

.visual-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-md);
  max-width: 320px;
}

.visual-card:nth-child(1) { align-self: flex-start; }
.visual-card:nth-child(2) { align-self: center; margin-left: 60px; }
.visual-card:nth-child(3) { align-self: flex-end; margin-left: 120px; }

.visual-emoji {
  font-size: 32px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--bg-app);
}

.visual-card h4 {
  font-size: 15px;
  font-weight: 800;
}
.visual-card p {
  font-size: 11px;
  color: var(--text-muted);
}

/* Animations */
.animate-float {
  animation: float 5s ease-in-out infinite;
}
.animate-float-delay {
  animation: float 5s ease-in-out infinite;
  animation-delay: 2.5s;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}

/* Features Grid section */
.features-section {
  width: 100%;
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 24px;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-header h3 {
  font-size: 26px;
  font-weight: 800;
}

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

.features-grid {
  display: grid;
  grid-template-columns: 1fr;          /* mobile: stacked */
  gap: 30px;
}
@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: 30px;
  text-align: left;
}

.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 20px;
}

.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); }

.feature-card h4 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
}

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

/* Splash colour accents */
.features-grid .feature-card { border-top: 4px solid var(--color-earthquake); }
.features-grid .feature-card:nth-child(2) { border-top-color: var(--color-volcano); }
.features-grid .feature-card:nth-child(3) { border-top-color: var(--color-flood); }
.features-grid .feature-card:nth-child(4) { border-top-color: var(--primary-color); }

.section-header h3 { position: relative; display: inline-block; }
.section-header h3::after {
  content: '';
  display: block;
  width: 64px; height: 4px;
  margin: 12px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

/* 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: 60px auto; padding: 0 24px; }
/* Mobile-first: 6 type cards in two columns, Total Active full width below. */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.stats-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  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: 14px;
  background: var(--bg-app);
  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: 12px;
    padding: 28px 24px;
  }
  .stat-total .stat-body { align-items: center; }
  .stat-total .stat-emoji { width: 66px; height: 66px; font-size: 32px; }
  .stat-total .stat-number { font-size: 46px; }
  .stat-total .stat-label { font-size: 14px; }
}
@media (min-width: 1024px) {
  .stats-types { grid-template-columns: repeat(3, 1fr); }
}
.stat-number { font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--text-main); }
.stat-label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.stat-earthquakes { border-top: 3px solid var(--color-earthquake); }
.stat-volcanoes { border-top: 3px solid var(--color-volcano); }
.stat-wildfires { border-top: 3px solid var(--color-wildfire); }
.stat-storms { border-top: 3px solid var(--color-storm); }
.stat-floods { border-top: 3px solid var(--color-flood); }
.stat-droughts { border-top: 3px solid var(--color-drought); }
.stat-total { border-top: 3px solid var(--primary-color); background: var(--primary-light); }
.stats-updated {
  text-align: center; margin-top: 20px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.stats-updated a { color: var(--primary-color); 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%;
  max-width: 1200px;
  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: 22px; font-weight: 800; margin-bottom: 12px; }
.cta-content p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; max-width: 720px; }
.status-message { font-size: 11px; color: var(--text-muted); font-weight: 500; transition: color 0.2s; }
.status-message.active { color: var(--primary-color); font-weight: 700; }

.cta-action {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.cta-settings { display: flex; flex-direction: column; gap: 6px; width: 220px; }
.cta-settings label { font-size: 12px; font-weight: 600; text-align: right; }

.app-footer {
  text-align: center;
  padding: 40px 24px;
  border-top: 1.5px solid var(--border-color);
  background-color: var(--bg-header);
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

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

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

.search-container { padding: 16px; border-bottom: 1px solid var(--border-color); }
.search-wrapper { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 14px; color: var(--text-muted); width: 18px; pointer-events: none; }
.search-container input[type="search"] {
  width: 100%; padding: 12px 40px 12px 42px; background-color: var(--bg-app);
  border: 1.5px solid var(--border-color); border-radius: 12px;
  font-family: 'Lexend', sans-serif; font-size: 14px; color: var(--text-main); outline: none; transition: all 0.2s ease;
}
.search-container input[type="search"]:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px hsla(168, 76%, 38%, 0.15); background-color: var(--bg-header); }
.btn-clear-search { position: absolute; right: 14px; background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; }
.btn-clear-search:hover { color: var(--primary-color); }

.filters-container { padding: 16px; border-bottom: 1px solid var(--border-color); }
.filters-container h2, .feed-header h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 12px; font-weight: 700; }
.filter-grid { display: flex; flex-direction: column; gap: 8px; }
.filter-tab {
  display: flex; align-items: center; width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-color);
  background-color: var(--bg-app); cursor: pointer; font-family: 'Lexend', sans-serif; font-size: 13px; font-weight: 600; color: var(--text-main); transition: all 0.2s ease;
}
.filter-tab:hover { background-color: var(--bg-header); border-color: var(--primary-color); }
.filter-tab.active { background-color: var(--primary-light); color: var(--primary-color); border-color: var(--primary-color); }
.filter-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 10px; }
.filter-dot-svg { display: flex; align-items: center; }
.filter-label { flex: 1; text-align: left; }
.filter-count { background-color: var(--bg-header); color: var(--text-muted); font-size: 11px; padding: 2px 8px; border-radius: 20px; border: 1px solid var(--border-color); font-weight: 700; }
.filter-tab.active .filter-count { background-color: var(--primary-color); color: #ffffff; border-color: var(--primary-color); }

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

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

/* Map Viewport Area */
.map-viewport { flex: 1; position: relative; height: 100%; z-index: 1; }
#map { width: 100%; height: 100%; }
.map-legend { position: absolute; bottom: 24px; left: 24px; padding: 12px 16px; z-index: 50; width: 180px; pointer-events: auto; }
.map-legend h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 8px; font-weight: 800; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.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: 15px; right: 15px; bottom: 15px;
  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: 24px;
}

.close-drawer-btn {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 20;
}

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

.header-badges-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.drawer-header h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  margin: 8px 0;
  line-height: 1.25;
}

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

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

.proximity-banner {
  display: flex; align-items: center; gap: 10px;
  background-color: var(--accent-light); color: var(--accent-color);
  border: 1px solid hsla(24, 90%, 62%, 0.15); padding: 10px 14px;
  border-radius: 12px; margin-bottom: 20px; font-size: 12px; font-weight: 600;
}
.proximity-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.proximity-banner.alert-hazard {
  background-color: hsl(8, 70%, 96%);
  color: var(--color-volcano);
  border-color: hsla(8, 70%, 55%, 0.15);
}
.proximity-banner.alert-safe {
  background-color: var(--primary-light);
  color: var(--primary-color);
  border-color: hsla(168, 76%, 38%, 0.15);
}

/* Severity Indicator Section */
.severity-section {
  background-color: var(--bg-app);
  border: 1.5px solid var(--border-color);
  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(--text-muted);
  text-transform: uppercase;
}

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

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

.severity-meter-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, #4CAF50, #FFEB3B, #FF9800, #F44336);
  background-size: 600px 10px;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

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

/* Tabbed Media Explorer Dashboard */
.media-dashboard-section h3 {
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 4px;
}

.media-tabs-header {
  display: flex;
  gap: 4px;
  background-color: var(--bg-app);
  padding: 4px;
  border-radius: 12px;
  border: 1.5px solid var(--border-color);
  margin-bottom: 14px;
  overflow-x: auto;
}

.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  font-family: 'Lexend', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

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

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

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

.tab-viewer-canvas {
  background-color: var(--bg-app);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  padding: 16px;
  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: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  text-align: center;
  font-weight: 500;
}

/* Image comparison slider */
.comparison-slider { position: relative; width: 100%; height: 240px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--border-color); }
.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: 10px; background-color: rgba(0,0,0,0.65); color: #ffffff; font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; pointer-events: none; z-index: 5; }
.before-label { left: 10px; }
.after-label { right: 10px; }
.slider-handle { position: absolute; top: 0; bottom: 0; left: var(--slider-pos, 50%); width: 4px; background-color: var(--primary-color); transform: translateX(-50%); cursor: ew-resize; z-index: 10; }
.handle-line { width: 100%; height: 100%; background-color: var(--primary-color); }
.handle-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; border-radius: 50%; background-color: var(--primary-color); border: 2.5px solid #ffffff; color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.handle-button svg { width: 14px; height: 14px; }

/* Science Diagram Viewport */
.diagram-canvas { width: 100%; height: 240px; border-radius: 10px; background-color: #ffffff; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); 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(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
}

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

.news-source {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent-color);
}

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

.news-card h5 {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 4px;
  line-height: 1.25;
}

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

/* Accordion sections */
.accordions-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.custom-accordion summary {
  padding: 12px 14px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
  user-select: none;
  color: var(--text-main);
}

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

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

.accordion-content {
  padding: 14px;
  background-color: var(--bg-header);
}

.docs-pre {
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: var(--text-main);
  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: 12px;
  height: 240px;
}

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

.visuals-tag {
  background-color: var(--bg-app);
  border-bottom: 1px solid var(--border-color);
  font-size: 10px;
  font-weight: 800;
  padding: 4px 8px;
  color: var(--text-muted);
}

.visuals-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
}

.placeholder-field-camera { background-color: #212121; color: #727272; }
.cam-icon { width: 28px; height: 28px; margin-bottom: 6px; }
.cam-msg { font-size: 10px; line-height: 1.35; }

.placeholder-field-telemetry { background-color: #0d1117; }
.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-banner {
  background-color: var(--primary-light);
  border-bottom: 1.5px solid var(--border-color);
  padding: 40px 24px;
}

.banner-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.banner-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-block;
}

.lab-banner h2 { font-size: 32px; font-weight: 800; color: var(--text-main); margin-bottom: 12px; }
.lab-banner h2 span { color: var(--primary-color); }
.lab-banner p { font-size: 14.5px; color: var(--text-muted); max-width: 800px; line-height: 1.6; }

.lab-section {
  max-width: 1200px;
  margin: 40px auto;
  padding: 30px;
}

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

.lab-badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 12px;
}

.lab-section-header h3 { font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.lab-section-header p { font-size: 13.5px; color: var(--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(--border-color);
  border-radius: 16px;
  background-color: #ffffff;
  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, #8d6e63 0%, #6d4c41 55%, #5d4037 100%);
  border-top: 3px solid #4e342e;
  width: 100%;
  box-shadow: inset 0 6px 10px rgba(0,0,0,0.12);
}

.shake-stage-ground {
  height: 16px;
  background: linear-gradient(180deg, #9ccc65, #7cb342);
  border-top: 2px solid #558b2f;
  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: 4px;
  font-size: 8px; font-weight: 800; color: #ffffff;
  display: flex; align-items: center; justify-content: center;
}

.rigid-foundation { background-color: #37474F; border: 1.5px solid #212121; }
.isolation-foundation { background-color: #B0BEC5; border: 1.5px solid #78909C; }

.tower-floor {
  width: 90px; height: 45px; background-color: #ECEFF1;
  border-left: 3px solid #78909C; border-right: 3px solid #78909C;
  border-top: 2px solid #CFD8DC; display: flex; align-items: center;
  justify-content: space-around; padding: 0 10px; position: relative;
}

.win { width: 18px; height: 22px; background-color: #B2EBF2; border: 1px solid #00ACC1; border-radius: 2px; }

.tower-roof {
  width: 100px; height: 35px; background-color: #78909C; border-radius: 4px 4px 0 0;
  font-size: 8.5px; font-weight: 800; color: #ffffff;
  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, #FF5722 40%, transparent 45%);
  background-size: 8px 8px;
  background-repeat: repeat-y;
  background-position: center;
  border: 1px solid #D84315;
  border-radius: 4px;
  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: #FFEB3B;
  border: 2px solid #FBC02D;
  box-shadow: 0 0 8px #FFEB3B;
  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(--color-volcano); color: #ffffff; }
.status-safe { background-color: var(--primary-color); color: #ffffff; }

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

.button-row { display: flex; gap: 12px; }
.educational-card-simple { padding: 18px; border-radius: 12px; border: 1.5px solid var(--border-color); }
.educational-card-simple h5 { font-size: 13.5px; font-weight: 800; margin-bottom: 6px; }
.educational-card-simple ul { list-style-position: inside; font-size: 12px; color: var(--text-main); }
.educational-card-simple li { margin-bottom: 6px; }

/* 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(--border-color); border-radius: 16px;
  background-color: var(--bg-header); 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(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
}

.step-list { list-style: none; margin-top: 14px; }
.step-item {
  font-size: 12.5px; color: var(--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(--border-color);
}
.step-item.active { color: var(--text-main); }
.step-item.active::before { background-color: var(--primary-color); box-shadow: 0 0 6px var(--primary-color); }

/* 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: 24px;
  margin-top: 20px;
}

.video-card {
  background-color: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  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: #000000;
  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(--primary-color); border: 2.5px solid #ffffff;
  color: #ffffff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  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: 8px; right: 8px;
  background-color: rgba(0,0,0,0.7); color: #ffffff;
  font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
  z-index: 5;
}

.video-info {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.video-info h4 { font-size: 14.5px; font-weight: 800; color: var(--text-main); margin-bottom: 4px; }
.video-summary { font-size: 11.5px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.4; }

.video-chapters {
  margin-top: auto;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
  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(--border-color);
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 11.5px;
}
.chapter-details summary {
  padding: 6px 10px; font-weight: 700; cursor: pointer; color: var(--text-main);
}
.chapter-content {
  padding: 8px 10px; background-color: var(--bg-app); border-top: 1px solid var(--border-color);
  line-height: 1.4; color: var(--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, #d6efff 0%, #eef9ff 55%, #f7fcff 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%, #FFF3C4, #FFE082); 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: #ffffff;
  box-shadow:
    20px 9px 0 -2px #fff, 40px 2px 0 0 #fff, 58px 11px 0 -5px #fff,
    150px 17px 0 0 #fff, 168px 7px 0 -4px #fff, 188px 15px 0 -9px #fff;
  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, #eaf0f3, #cdd8de);
  border-left: 2px solid #aebfc8; border-right: 2px solid #aebfc8;
  border-top: 1px solid #d6e0e5;
  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, #d7f0fb 0 44%, #6fbfe6 45%, #bfe6f6 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
.tower-rigid .tower-floor { background: linear-gradient(180deg, #e4e8eb, #bcc6cc); }
.tower-isolated .win { background: linear-gradient(135deg, #d7f7ee 0 44%, #58c9aa 45%, #bdeede 100%); }
.tower-roof { background: linear-gradient(180deg, #546e7a, #37474f); 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: #455A64; }
.tower-antenna::after { content: ''; position: absolute; top: -4px; left: -2px; width: 7px; height: 7px; border-radius: 50%; background: #F44336; box-shadow: 0 0 6px #F44336; 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%, #90A4AE 0 8px, transparent 9px),
    radial-gradient(circle at 42% 70%, #B0BEC5 0 10px, transparent 11px),
    radial-gradient(circle at 64% 88%, #78909C 0 7px, transparent 8px),
    radial-gradient(circle at 86% 76%, #90A4AE 0 9px, transparent 10px);
}
.tower-rubble.show { opacity: 1; }

/* What to Observe panel */
.observe-panel { margin-top: 30px; }
.observe-title { font-size: 17px; font-weight: 800; margin-bottom: 16px; }
.observe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.observe-card { border-radius: 16px; padding: 20px; border: 1.5px solid var(--border-color); background: var(--bg-card); box-shadow: var(--shadow-sm); }
.observe-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.observe-emoji { font-size: 26px; }
.observe-card-head h5 { font-size: 16px; font-weight: 800; }
.observe-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* Lab subsection + clips */
.lab-subsection { margin-top: 34px; padding-top: 26px; border-top: 1.5px solid var(--border-color); }
.lab-subhead { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.lab-subtext { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; max-width: 760px; line-height: 1.5; }
.clips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* YouTube facades */
.yt-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; cursor: pointer; background: #000; border: 1.5px solid var(--border-color); }
.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 #fff; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,0.4); 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: 18px 12px 10px; font-size: 12px; font-weight: 700; color: #fff; 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(--primary-color); background: var(--primary-light); 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(--border-color);
  background: linear-gradient(180deg, #5f6b77 0%, #8a96a1 42%, #b9c4cb 66%, #cfe0c0 66%, #bcd5a3 100%);
}
.storm-clouds {
  position: absolute; top: 0; left: 0; right: 0; height: 96px;
  background:
    radial-gradient(46px 28px at 18% 45%, #565f6b, transparent 70%),
    radial-gradient(56px 32px at 46% 32%, #4a525d, transparent 70%),
    radial-gradient(50px 30px at 74% 48%, #565f6b, transparent 70%),
    radial-gradient(40px 24px at 92% 38%, #4a525d, transparent 70%),
    linear-gradient(180deg, #565f6b, transparent);
}
.sim-ground { position: absolute; bottom: 0; left: 0; right: 0; height: 26px; background: linear-gradient(180deg, #8bbf6a, #6fae54); border-top: 2px solid #5b9243; }
.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 #a8504a; }
.town-house .body { display: block; width: 46px; height: 100%; background: linear-gradient(180deg, #f3ead7, #ddcdaa); border: 1px solid #c1ad88; 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: #bfe2f0; border: 1px solid #94b4c4; 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: #8d6e63; 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: #5f7d8b; }
.town-house:nth-child(2) .body { background: linear-gradient(180deg, #eef1f3, #cdd8de); }
.town-house:nth-child(3) { height: 54px; }
.town-house:nth-child(3) .roof { border-bottom-color: #7a6a9c; }
.town-house:nth-child(4) { height: 40px; }
.town-house:nth-child(4) .body { background: linear-gradient(180deg, #f1e2d0, #d8bfa0); }
.town-house:nth-child(5) { height: 48px; }
.town-house:nth-child(5) .roof { border-bottom-color: #4e8a6a; }
.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: #6d5b48; 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: #8a7a64; }
.debris-bit.b3 { --dx: -30px; --dy: -98px; animation-delay: 0.36s; }
.debris-bit.b4 { --dx: 52px; --dy: -40px; animation-delay: 0.54s; background: #a8504a; }
.debris-bit.b5 { --dx: -58px; --dy: -72px; animation-delay: 0.72s; background: #5f7d8b; }
@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(--border-color); }
.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(--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(--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(--text-main); padding-left: 18px; position: relative; line-height: 1.4; }
.case-facts li::before { content: '▸'; position: absolute; left: 0; color: var(--primary-color); font-weight: 800; }

.vs-note { display: flex; align-items: stretch; gap: 16px; background: var(--bg-app); border: 1.5px solid var(--border-color); 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(--text-main); }
.vs-emoji { font-size: 26px; flex-shrink: 0; }
.vs-divider { align-self: center; font-weight: 800; color: var(--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, #aab6bd, #d2dade); }
.ash-active .ash-sky { background: linear-gradient(180deg, #6d7a82, #97a4ac); }
.ash-sun { position: absolute; top: 10px; left: 22px; width: 24px; height: 24px; border-radius: 50%; background: #FFD54F; 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: #ECEFF1; }
@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(--bg-card); border: 1.5px solid var(--border-color); 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(--text-muted); line-height: 1.6; }
.temp-badge { display: inline-block; background: #C62828; color: #fff; font-weight: 800; font-size: 12px; padding: 1px 8px; border-radius: 6px; }

/* 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(--text-main);
  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 #C62828; background: #fdecea; }

/* "How humans adapted" — standard content box, matching the lab template */
.adaptation-card { background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: 12px; padding: 16px; }
.adaptation-card h5 { font-size: 14px; font-weight: 800; margin-bottom: 8px; color: var(--text-main); }
.adaptation-card p { font-size: 13px; color: var(--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(--border-color);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary-color); border: 2px solid #fff;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--primary-color); border: 2px solid #fff; 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(--bg-app); border: 1px solid var(--border-color); 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(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.severity-filter-val { font-size: 12px; font-weight: 800; color: var(--primary-color); background: var(--primary-light); 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(--text-muted); margin-top: 4px; font-weight: 600; }
.feed-updated { font-size: 10.5px; color: var(--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: 16px;
  background: var(--primary-color); color: #fff;
  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(--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(--text-main); }
.block-icon { width: 18px; height: 18px; color: var(--primary-color); }
.block-head h3 { font-size: 14px; font-weight: 800; }
.block-caption { font-size: 11px; color: var(--text-muted); margin-top: 8px; }

.location-map-frame { width: 100%; height: 260px; border-radius: 14px; overflow: hidden; border: 1.5px solid var(--border-color); background: var(--bg-app); }
.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(--bg-card); border: 1.5px solid var(--border-color); border-radius: 14px; padding: 16px; }
.fact-card h4 { font-size: 13px; font-weight: 800; margin-bottom: 8px; }
.fact-body { font-size: 12px; color: var(--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(--border-color); 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(--border-color); }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rag, var(--text-muted)); border: 2px solid var(--bg-header); 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(--text-muted)) 25%, transparent); }
.timeline-body { flex: 1; }
.timeline-time { font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.timeline-title { font-size: 13px; font-weight: 800; margin: 2px 0; }
.timeline-text { font-size: 11.5px; color: var(--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(--bg-header); color: var(--text-main); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); }
.np-popup .leaflet-popup-content { margin: 0; width: 250px !important; }
.np-popup .leaflet-popup-tip { background: var(--bg-header); border: 1px solid var(--border-color); }
.np-popup .leaflet-popup-close-button { color: var(--text-muted); top: 8px; right: 8px; }
.np-popup-card { padding: 16px; }
.np-popup-badge { margin-bottom: 10px; }
.np-popup-title {
  font-size: 15px; font-weight: 800; margin-bottom: 12px; line-height: 1.3; color: var(--text-main);
  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(--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(--bg-header);
  color: var(--text-main);
  box-shadow: var(--shadow-lg);
  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(--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: 12px; }
.range-slider-wrapper input[type="range"] { flex: 1; }
.slider-bubble { font-size: 12px; font-weight: 800; color: var(--primary-color); background: var(--primary-light); padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.form-help { display: block; font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.4; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 9px 12px; border: 1.5px solid var(--border-color); border-radius: 10px; cursor: pointer; transition: all 0.15s ease; }
.checkbox-label:hover { border-color: var(--primary-color); }
.checkbox-label input { accent-color: var(--primary-color); width: 16px; height: 16px; }
.checkbox-wide { width: 100%; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }

/* Text inputs in the alert modal */
.form-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-app);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  font-family: 'Lexend', sans-serif;
  font-size: 14px;
  color: var(--text-main);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px hsla(168, 76%, 38%, 0.15); }

/* Telephone input with country dialling code */
.phone-input { display: flex; gap: 8px; }
.phone-code, .phone-number {
  padding: 11px 12px;
  background: var(--bg-app);
  border: 1.5px solid var(--border-color);
  border-radius: 10px;
  font-family: 'Lexend', sans-serif;
  font-size: 14px;
  color: var(--text-main);
  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(--primary-color); box-shadow: 0 0 0 3px hsla(168, 76%, 38%, 0.15); }

/* 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(--bg-header);
  border: 1.5px solid var(--border-color);
  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(--border-color); }
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.active { background: var(--primary-light); }
.autocomplete-item .ac-name { font-size: 13px; font-weight: 700; color: var(--text-main); }
.autocomplete-item .ac-meta { font-size: 11px; color: var(--text-muted); }

/* Tailwind-style toasts: top-right, compact, non-intrusive */
.toast-container {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 340px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--bg-header);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: toast-in 0.25s ease;
}
.toast-earthquakes { border-left-color: var(--color-earthquake); }
.toast-volcanoes { border-left-color: var(--color-volcano); }
.toast-wildfires { border-left-color: var(--color-wildfire); }
.toast-storms { border-left-color: var(--color-storm); }
.toast-icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.toast-content { flex: 1; min-width: 0; }
.toast-content h4 { font-size: 13px; font-weight: 700; margin-bottom: 2px; color: var(--text-main); }
.toast-content p { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.btn-toast-close { margin-left: 4px; background: none; border: none; color: var(--text-muted); font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.btn-toast-close:hover { color: var(--text-main); }

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

/* ==========================================================================
   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(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--primary-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.library-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lib-earthquakes { border-top-color: var(--color-earthquake); }
.lib-volcanoes { border-top-color: var(--color-volcano); }
.lib-wildfires { border-top-color: var(--color-wildfire); }
.lib-storms { border-top-color: var(--color-storm); }
.lib-tsunamis { border-top-color: #0288D1; }
.lib-droughts { border-top-color: #C9971E; }

.library-media { position: relative; width: 100%; aspect-ratio: 16 / 9; cursor: pointer; background: #000; }
.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(--bg-app); flex-shrink: 0;
}
.library-head h3 { font-size: 19px; font-weight: 800; }
.library-desc { font-size: 13.5px; color: var(--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(--text-main); padding-left: 20px; position: relative; line-height: 1.4; }
.library-points li::before { content: '→'; position: absolute; left: 0; color: var(--primary-color); 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-actions span { display: none; }
  .header-actions .btn { padding: 9px; }

  /* --- Homepage hero --- */
  .hero-section { min-height: auto; padding: 40px 24px; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .visual-card { max-width: none; width: 100%; }
  .visual-card:nth-child(2), .visual-card:nth-child(3) { margin-left: 0; }

  /* --- 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; border-right: none; border-bottom: 1.5px solid var(--border-color); }
  .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; }
}