/* Self-hosted variable fonts (static/fonts/*-latin.woff2, display=swap):
   fully offline — no webfont CDN. Inter covers 100–900, Space Grotesk
   (display voice) 300–700. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-variable-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/SpaceGrotesk-variable-latin.woff2') format('woff2');
}

:root {
  /* Stormglass palette — deep-sea ink + frosted glass + one blue signal
     (see DESIGN.md). Status hues are functional, never decorative. */
  --primary: #3b6ef5;
  --primary-soft: #e8eaf6;
  --primary-container: #dbeafe;
  --navy: #1a243b;
  --brand-gold: #876421;
  --brand-gold-soft: rgba(177,139,65,.12);
  --red: #d93d2a;
  --orange: #e08a0e;
  --green: #0a7a42;
  --bg: #f0f2f5;
  --bg-gradient: radial-gradient(1200px 600px at 10% -10%, #e6ecff 0%, transparent 60%),
                 radial-gradient(1000px 500px at 90% 0%, #e0f2f1 0%, transparent 55%),
                 linear-gradient(180deg, #f7f8fb 0%, #eef2f7 100%);
  --surface: #ffffff;
  --glass: rgba(255,255,255,0.68);
  --glass-strong: rgba(255,255,255,0.82);
  --glass-border: rgba(255,255,255,0.42);
  --glass-blur: 16px;
  --glass-shadow: 0 8px 32px rgba(16,42,67,0.08), 0 1px 3px rgba(16,42,67,0.06);
  --glass-shadow-strong: 0 12px 40px rgba(16,42,67,0.12), 0 4px 12px rgba(16,42,67,0.08);
  --text: #1b2330;
  --text-secondary: #5f6b7a;
  --text-muted: #66707f;
  --border: rgba(27,35,48,0.08);
  --border-strong: rgba(27,35,48,0.12);
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  /* Depth scale (single top-left light source; shadows tinted to surface) */
  --z-nav: 20;
  --z-dock: 30;
  --z-bell: 600;
  --z-splash: 2000;
  /* Motion system — one vocabulary for every animation (SmoothUI-inspired
     spring/snappy easings; Apple-HIG rule: motion is brief, purposeful,
     and never the only carrier of meaning). Durations stay ≤450ms so the
     emergency UI never feels sluggish; see .reveal below. */
  --ease-spring: cubic-bezier(.2,1.4,.4,1);
  --ease-snap: cubic-bezier(.65,0,.35,1);
  --ease-out-soft: cubic-bezier(.22,.61,.36,1);
  --dur-instant: 120ms;
  --dur-fast: 200ms;
  --dur-med: 350ms;
  --dur-slow: 450ms;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size:16px; color:var(--text); background: var(--bg); background-image: var(--bg-gradient); min-height:100vh; }
/* Display voice: hero titles, brand, section heads. Numerals stay Inter
   tabular (see tabular-nums rules) so counters never jitter. */
h1, .font-display { font-family: var(--font-display); letter-spacing:-0.02em; text-wrap:balance; }
.nav-brand { font-family: var(--font-display); }
/* Film grain: static SVG noise at 3% — breaks digital flatness with zero
   repaint cost (no animation, pointer-events none). */
body::after {
  content:""; position:fixed; inset:0; z-index:3000; pointer-events:none; opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] body::after { opacity:.05; }
/* background-attachment:fixed is only composited cheaply on precise-pointer
   desktops; on touch devices it forces a full repaint per scroll frame. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  html, body { background-attachment: fixed; }
}
@media (prefers-reduced-motion: no-preference){
  html { scroll-behavior: smooth; }
}
/* Reserve scrollbar space always: centered content no longer shifts when
   pages with/without scrollbars swap (both classic and thin scrollbars). */
html { scrollbar-gutter: stable; }
/* Browser surfaces carry the design too: selection, scrollbars, link offset */
::selection { background: rgba(59,110,245,0.28); }
[data-theme="dark"] ::selection { background: rgba(122,162,255,0.35); }
* { scrollbar-width: thin; scrollbar-color: rgba(120,134,155,0.55) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background: rgba(120,134,155,0.55); border-radius:999px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-track { background: transparent; }
a { text-underline-offset: 3px; }
input, select, textarea { font-variant-numeric: tabular-nums; }

/* Utilities — Liquid Glass */
.container { max-width:1200px; margin:0 auto; padding:0 16px; }
.card {
  background: var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.card:hover { box-shadow: var(--glass-shadow-strong), inset 0 1px 0 rgba(255,255,255,0.45); border-color: rgba(255,255,255,0.55); }
/* Danger Zone: red-tinted frosted glass (alerts are functional layer, so
   the material belongs here). Specular top highlight sells the glass. */
.danger-zone { border:1px solid rgba(217,45,32,0.4);
  background:linear-gradient(135deg, rgba(217,45,32,0.12), rgba(217,45,32,0.04));
  backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);
  box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.25); }
[data-theme="dark"] .danger-zone { border-color:rgba(249,112,102,0.45);
  background:linear-gradient(135deg, rgba(217,45,32,0.24), rgba(217,45,32,0.08)); }
.danger-modal-card { background:var(--glass-strong);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:0 20px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25); }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:5px 10px; border-radius:var(--radius-pill); border:1px solid transparent; backdrop-filter: blur(8px); }
.badge-available { background:rgba(236,253,243,0.85); color:var(--green); border-color:rgba(166,244,197,0.7); }
.badge-nearly { background:rgba(255,250,235,0.85); color:#8a5200; border-color:rgba(254,223,137,0.7); }
.badge-full { background:rgba(254,243,242,0.85); color:#b3261e; border-color:rgba(254,205,202,0.7); }
.badge-unknown { background:rgba(255,255,255,0.6); color:var(--text-secondary); border-color:var(--border); }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:var(--radius-pill); font-weight:600; font-size:14px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease; letter-spacing:0.01em; }
.btn-primary { background:#2e5fe0; color:white; box-shadow: 0 2px 8px rgba(59,110,245,0.25); }
.btn-primary:hover { background:#2449b8; box-shadow: 0 4px 16px rgba(59,110,245,0.32); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(59,110,245,0.2); }
.btn-secondary:active, .btn:active { transform: translateY(1px); }
/* Hover effects (gallery-inspired, restrained for an emergency UI):
   primary gets a light sheen sweep + lift; secondary gets lift + border
   glow. GPU-only properties (transform/opacity), never layout. Gated to
   real hover pointers with motion allowed — touch and reduced-motion
   users get the instant state change instead. */
.btn-primary { position:relative; overflow:hidden; }
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .btn-primary::before{
    content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    transform:skewX(-20deg); transition:left 0.55s ease; pointer-events:none;
  }
  .btn-primary:hover:not(:disabled)::before{ left:135%; }
  .btn-secondary:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 4px 14px rgba(16,42,67,0.14); }
}
.btn-secondary { background: var(--glass-strong); color:var(--text); border-color: var(--glass-border); backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(16,42,67,0.06); }
.btn-secondary:hover { background: rgba(255,255,255,0.92); border-color: rgba(59,110,245,0.18); }

/* Nav — liquid glass sticky */
.nav { background: rgba(255,255,255,0.72); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); border-bottom:1px solid var(--glass-border); position:sticky; top:0; z-index:20; box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 4px 20px rgba(16,42,67,0.04); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }
.nav-brand { display:flex; flex-shrink:0; align-items:center; gap:10px; font-weight:800; letter-spacing:-0.02em; color:var(--navy); text-decoration:none; }
.brand-shield { display:block; object-fit:contain; flex-shrink:0; background:#101f3d; border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:3px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.16)); }
.brand-word { font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.04em; white-space:nowrap; }
.brand-word > span { color:var(--primary); }
.brand-word small { display:block; margin-top:2px; color:var(--text-secondary); font-family:Inter, sans-serif; font-size:11px; font-weight:500; letter-spacing:.04em; }
.splash-shield { filter:drop-shadow(0 12px 18px rgba(0,0,0,.25)); }
.admin-utilities { display:flex; align-items:center; gap:10px; margin-left:auto; min-width:0; }
.admin-utilities form { margin:0; }
.admin-username { max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-tab-row { padding-bottom:10px; }
.admin-tab-row .nav-links { width:fit-content; max-width:100%; scrollbar-width:thin; }
.admin-tab-row .nav-links a { font-size:13px; padding-inline:16px; }
.site-footer { border-top:1px solid var(--border-strong); background:var(--glass); padding:24px 0; margin-top:32px; }
.site-footer a { color:var(--text-secondary); }
.site-footer a:hover { color:var(--primary); }

.nav-links { display:flex; gap:2px; align-items:center; position:relative; max-width:100%; overflow-x:auto; scrollbar-width:none; scroll-padding-inline:8px; scroll-behavior:smooth; background:rgba(27,35,48,0.06); border:1px solid var(--glass-border); border-radius:var(--radius-pill); padding:4px; }
.nav-links::-webkit-scrollbar { display:none; }
/* Flex-item floor: the bar must shrink (not push past the viewport) so its
   internal scroll engages on tab-dense bars like the admin nav. */
.nav-inner .nav-links { min-width:0; }
.nav-links a { position:relative; z-index:1; display:inline-flex; align-items:center; min-height:44px; flex-shrink:0; color:var(--text-secondary); text-decoration:none; font-weight:500; font-size:14px; padding:9px 15px; border-radius:var(--radius-pill); white-space:nowrap; transition:color var(--dur-fast) ease, transform var(--dur-instant) ease; }
.nav-links a:hover { color:var(--primary); }
.nav-links a:active { transform:scale(0.94); }
.nav-links a:focus-visible { outline:2px solid var(--primary); outline-offset:-3px; }
.nav-links a[aria-current="page"]:not(.btn) { background:var(--primary-container); color:var(--navy); font-weight:700; }
.nav-links a.btn, .nav-links form, .nav-links .theme-toggle { position:relative; z-index:1; flex-shrink:0; }
/* Sliding tab indicator (positioned by JS; the static pill above is the
   no-JS fallback). Follows hover/focus fast, snaps on click, parks on the
   active tab. CTA buttons (.btn) keep their own style and are skipped. */
.nav-tab-pill { position:absolute; top:4px; left:0; width:100px; height:44px; border-radius:var(--radius-pill); transform-origin:left center;
  background:rgba(255,255,255,0.9); border:1px solid rgba(255,255,255,0.9);
  box-shadow:0 1px 2px rgba(16,42,67,0.12), 0 4px 12px rgba(16,42,67,0.10); z-index:0;
  pointer-events:none; opacity:0;
  transition:transform var(--dur-med) var(--ease-out-soft), opacity var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.nav-tab-pill.fast { transition-duration:140ms; }
.nav-tab-pill.press { box-shadow:0 0 0 3px rgba(59,110,245,0.25), 0 1px 2px rgba(16,42,67,0.12); }
.nav-links.pill-live a[aria-current="page"]:not(.btn) { background:transparent; }
[data-theme="dark"] .nav-links { background:rgba(255,255,255,0.07); }
[data-theme="dark"] .nav-tab-pill { background:rgba(122,162,255,0.20); border-color:rgba(122,162,255,0.38); box-shadow:0 1px 2px rgba(0,0,0,0.3), 0 4px 14px rgba(0,0,0,0.25); }
[data-theme="dark"] .nav-tab-pill.press { box-shadow:0 0 0 3px rgba(122,162,255,0.35), 0 1px 2px rgba(0,0,0,0.3); }
.nav-toggle { display:none; background: var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:8px 10px; min-width:44px; min-height:44px; align-items:center; justify-content:center; backdrop-filter: blur(12px); }
.mobile-menu { display:none; flex-direction:column; gap:4px; padding:12px 0 16px; border-top:1px solid var(--border); }
.mobile-menu a { display:flex; align-items:center; min-height:44px; padding:10px 14px; color:var(--text); text-decoration:none; font-weight:500; border-radius:12px; }
.mobile-menu a:hover { background: var(--glass); }

@media (max-width: 768px) {
  .admin-utilities, .admin-tab-row { display:none; }
  .nav-links { display:none; }
  .nav-toggle { display:inline-flex; }
  .mobile-menu.open { display:flex; }
  .container { padding:0 14px; }
  .grid-3 { grid-template-columns:1fr !important; }
  .map-layout { grid-template-columns:1fr !important; }
  table { display:block; overflow-x:auto; }
}

/* Focus — Material 3 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }

/* Tables — glass */
table { width:100%; border-collapse:separate; border-spacing:0; background: var(--glass); backdrop-filter: blur(12px); border-radius: var(--radius); overflow:hidden; border:1px solid var(--glass-border); box-shadow: var(--glass-shadow); }
th, td { padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; font-size:14px; }
th { background: rgba(255,255,255,0.5); color:var(--text-secondary); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
tr:last-child td { border-bottom:none; }

/* Forms — Material filled (checkboxes/radios keep native sizing) */
label { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { width:100%; padding:11px 14px; border:1px solid var(--border-strong); border-radius:12px; font-size:14px; color:var(--text); background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color:var(--primary); background: white; box-shadow:0 0 0 3px rgba(59,110,245,0.12); outline:none; }
input[type="checkbox"], input[type="radio"] { width:18px; height:18px; flex:0 0 auto; margin:0; accent-color:var(--primary); cursor:pointer; }
#hzBadge { white-space:nowrap; }

.flash { padding:12px 14px; border-radius:12px; margin-bottom:12px; font-size:14px; backdrop-filter: blur(12px); border:1px solid transparent; }
.flash-danger { background: rgba(254,243,242,0.85); color:#7A271A; border-color: rgba(254,205,202,0.7); }
.flash-warning { background: rgba(255,250,235,0.85); color:#7A4D07; border-color: rgba(254,223,137,0.7); }
.flash-info { background: rgba(239,248,255,0.85); color:#1849A9; border-color: rgba(178,221,255,0.7); }
.flash-success { background: rgba(236,253,243,0.85); color:#054F31; border-color: rgba(166,244,197,0.7); }

/* Theme-aware warning notice (replaces hardcoded light banners that go
   unreadable in dark mode — light text on cream). */
.notice-warn { border:1px solid rgba(254,223,137,0.7); background:#FFFAEB; color:#7A4D07; border-radius:12px; padding:12px 14px; font-size:13px; }
.notice-warn a { color:inherit; font-weight:700; }
[data-theme="dark"] .notice-warn { background:rgba(122,77,7,0.35); border-color:rgba(254,223,137,0.35); color:#fedf89; }

/* Grid helpers */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.stat-card { padding:18px; }
.demo-banner { background: rgba(255,250,235,0.75); backdrop-filter: blur(12px); border:1px solid rgba(254,223,137,0.6); color:#7A4D07; padding:12px 14px; border-radius:12px; text-align:center; font-size:13px; margin-bottom:16px; box-shadow: var(--glass-shadow); }

/* Weather visuals — liquid glass */
.weather-hero { display:grid; grid-template-columns:1.2fr 0.8fr; gap:16px; }
@media (max-width: 768px){ .weather-hero{ grid-template-columns:1fr; } }
.weather-icon-wrap { width:72px; height:72px; display:grid; place-items:center; border-radius:16px; background: rgba(239,248,255,0.8); backdrop-filter: blur(12px); border:1px solid rgba(178,221,255,0.5); color:var(--primary); box-shadow: 0 4px 12px rgba(59,110,245,0.08); }
.weather-metric { position:relative; }
.weather-bar { height:8px; background: rgba(234,236,240,0.8); border-radius:999px; overflow:hidden; margin-top:8px; }
.weather-bar-fill { height:8px; border-radius:999px; transition:width 0.6s ease; }
.weather-bar-fill.temp { background: linear-gradient(90deg, #2E90FA 0%, #F79009 55%, #D92D20 100%); }
.weather-bar-fill.humidity { background: linear-gradient(90deg, #3b6ef5 0%, #5b8cff 100%); }
.weather-bar-fill.wind { background: linear-gradient(90deg, #039855 0%, #12b76a 100%); }
.weather-gauge-labels { display:flex; justify-content:space-between; font-size:11px; color:var(--text-secondary); margin-top:4px; }
.hourly-strip { display:flex; gap:10px; overflow-x:auto; padding:8px 2px 12px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.hourly-strip::-webkit-scrollbar{ height:6px; }
.hourly-strip::-webkit-scrollbar-thumb{ background: rgba(208,213,221,0.8); border-radius:999px; }
.hourly-card { min-width:88px; flex:0 0 auto; scroll-snap-align:start; background: var(--glass); backdrop-filter: blur(12px); border:1px solid var(--glass-border); border-radius:16px; padding:10px 8px; text-align:center; box-shadow: var(--glass-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.hourly-card:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-strong); }
.hourly-card .h-time{ font-size:12px; font-weight:600; color:var(--text-secondary); }
.hourly-card .h-temp{ font-size:16px; font-weight:800; margin-top:4px; }
.skeleton{ background: linear-gradient(90deg, rgba(234,236,240,0.8) 25%, rgba(242,244,247,0.9) 50%, rgba(234,236,240,0.8) 75%); background-size:200% 100%; animation: shimmer 1.2s infinite; border-radius:12px; }
@keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Now card — liquid glass matte, time-aware (PH Asia/Manila) */
.weather-now { border-radius:20px; padding:24px; display:flex; justify-content:space-between; gap:16px; border:1px solid var(--glass-border); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); box-shadow: var(--glass-shadow-strong); }
.weather-now.day { background: linear-gradient(135deg, rgba(255,255,255,0.82) 0%, rgba(219,234,254,0.75) 55%, rgba(191,219,254,0.65) 100%); color:var(--navy); }
.weather-now.night { background: linear-gradient(135deg, rgba(15,23,42,0.88) 0%, rgba(30,41,59,0.82) 55%, rgba(11,20,32,0.86) 100%); border-color: rgba(255,255,255,0.08); color:#CBD5E1; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.weather-now .now-label{ font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; opacity:0.9; }
.weather-now.day .now-label{ color:#475467; }
.weather-now.night .now-label{ color:#8da0b8; }
.weather-now-temp{ font-size:84px; font-weight:800; line-height:1; letter-spacing:-0.04em; position:relative; display:inline-flex; align-items:start; gap:4px; }
.weather-now.day .weather-now-temp{ color:var(--navy); }
.weather-now.night .weather-now-temp{ color:#e2e8f0; text-shadow: 0 2px 12px rgba(0,0,0,0.2); }
.weather-now-icon{ font-size:22px; line-height:1; margin-top:8px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.18)); }
.weather-now-desc{ font-size:22px; font-weight:500; }
.weather-now.day .weather-now-desc{ color:var(--navy); }
.weather-now.night .weather-now-desc{ color:#e2e8f0; }
.weather-now-feels{ font-size:16px; font-weight:400; }
.weather-now.day .weather-now-feels{ color:#475467; }
.weather-now.night .weather-now-feels{ color:#94a3b8; }
.weather-now-hilo{ font-size:14px; margin-top:6px; font-weight:500; }
.weather-now.day .weather-now-hilo{ color:#475467; }
.weather-now.night .weather-now-hilo{ color:#94a3b8; }
@media (max-width: 640px){ .weather-now{ flex-direction:column; } .weather-now-temp{ font-size:64px; } }

/* Environmental status — Heat Index & AQI (PAGASA/DENR) */
.env-section { border-radius:16px; padding:16px; margin-top:16px; transition: background 0.4s ease; }
.env-tint-green { background: linear-gradient(135deg, rgba(236,253,243,0.35) 0%, rgba(236,253,243,0.15) 100%); border:1px solid rgba(166,244,197,0.4); }
.env-tint-yellow { background: linear-gradient(135deg, rgba(254,249,195,0.4) 0%, rgba(254,249,195,0.15) 100%); border:1px solid rgba(253,230,138,0.5); }
.env-tint-orange { background: linear-gradient(135deg, rgba(255,237,213,0.45) 0%, rgba(255,237,213,0.18) 100%); border:1px solid rgba(253,186,116,0.55); }
.env-tint-red { background: linear-gradient(135deg, rgba(254,226,226,0.45) 0%, rgba(254,226,226,0.18) 100%); border:1px solid rgba(252,165,165,0.6); }
.env-tint-purple { background: linear-gradient(135deg, rgba(243,232,255,0.45) 0%, rgba(243,232,255,0.18) 100%); border:1px solid rgba(216,180,254,0.6); }
.env-tint-maroon { background: linear-gradient(135deg, rgba(127,29,29,0.08) 0%, rgba(127,29,29,0.04) 100%); border:1px solid rgba(127,29,29,0.22); }
.env-overall { display:flex; gap:10px; align-items:center; padding:12px 14px; border-radius:12px; backdrop-filter: blur(12px); border:1px solid var(--glass-border); background: var(--glass); box-shadow: var(--glass-shadow); margin-bottom:12px; }
.env-overall-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; flex:0 0 auto; }
.env-grid { display:grid; grid-template-columns: 1.1fr 1.6fr; gap:12px; align-items:stretch; }
@media (max-width: 768px){ .env-grid{ grid-template-columns:1fr; } }
.env-card { padding:14px; border-radius:16px; backdrop-filter: blur(14px); border:1px solid var(--glass-border); box-shadow: var(--glass-shadow); transition: transform 0.15s ease; display:flex; flex-direction:column; }
.env-card:hover { transform: translateY(-1px); }
.env-card-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.env-card-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background: rgba(255,255,255,0.7); border:1px solid var(--glass-border); }
/* AQI primary emphasis */
.env-card--aqi { padding:16px; border-width:1.5px; }
.env-card--aqi .env-measure { font-size:34px; }
.env-card--aqi .env-card-icon { width:36px; height:36px; }
.env-measure { font-size:28px; font-weight:800; letter-spacing:-0.02em; line-height:1; }
.env-card--aqi .env-bar { height:10px; }
.env-unit { font-size:14px; font-weight:600; color:var(--text-secondary); margin-left:2px; }
.env-badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:0.02em; border:1px solid transparent; margin-top:6px; }
.env-reco { font-size:12px; color:var(--text-secondary); margin-top:8px; line-height:1.4; }
.env-meta { font-size:11px; color:var(--text-muted); margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.env-bar { height:8px; border-radius:999px; background: rgba(234,236,240,0.8); overflow:hidden; margin-top:8px; }
.env-bar-fill { height:8px; border-radius:999px; transition: width 0.5s ease; }
.env-expand { margin-top:10px; font-size:11px; }
.env-expand summary { cursor:pointer; color:var(--primary); font-weight:600; list-style:none; }
.env-expand summary::-webkit-details-marker{ display:none; }
.env-expand[open] summary{ margin-bottom:6px; }

/* Hazards overlay — quake pulse + fire dots + legend */
.quake-pulse{ border-radius:50%; background:rgba(147,51,234,0.35); border:2px solid #9333ea; animation:quake-ping 1.8s ease-out infinite; }
@keyframes quake-ping{ 0%{ box-shadow:0 0 0 0 rgba(147,51,234,0.45);} 70%{ box-shadow:0 0 0 10px rgba(147,51,234,0);} 100%{ box-shadow:0 0 0 0 rgba(147,51,234,0);} }
.fire-dot{ font-size:16px; line-height:18px; text-align:center; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }

/* Splash cover — logo intro before Home, once per tab session */
#splash{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; cursor:pointer;
  background:
    radial-gradient(460px 320px at 28% 28%, rgba(26,57,122,.55), transparent 70%),
    radial-gradient(460px 320px at 74% 64%, rgba(130,12,26,.45), transparent 70%),
    radial-gradient(320px 240px at 52% 46%, rgba(210,173,98,.14), transparent 70%),
    linear-gradient(160deg, #101c33 0%, #1a243b 55%, #1e3a8a 100%); }
#splash.splash-hide{ opacity:0; pointer-events:none; transition:opacity .4s ease; }
.splash-inner{ display:grid; justify-items:center; gap:10px; text-align:center; padding:24px; }
.splash-shield{ animation:splash-pop .55s cubic-bezier(.2,1.4,.4,1) both; filter:drop-shadow(0 14px 22px rgba(0,0,0,.45)); }
.splash-word{ color:#fff; font-weight:800; font-size:34px; letter-spacing:.04em; animation:splash-rise .5s .25s ease both; }
.splash-word span{ color:#8fb0ff; }
.splash-tag{ color:rgba(255,255,255,.72); font-size:13px; animation:splash-rise .5s .4s ease both; }
.splash-bar{ width:180px; height:4px; border-radius:999px; background:rgba(255,255,255,.18); overflow:hidden; animation:splash-rise .5s .5s ease both; }
/* GPU-only loader sweep: the bar (40% of 180px) slides on transform, never
   margin-left, so it never triggers layout per frame. */
.splash-bar span{ display:block; height:100%; width:40%; border-radius:999px; background:#fff; animation:splash-load 1.1s .3s ease-in-out infinite; will-change:transform; }
@keyframes splash-pop{ 0%{ transform:scale(.4); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@keyframes splash-rise{ 0%{ transform:translateY(10px); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes splash-load{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(260%); } }
@media (prefers-reduced-motion: reduce){
  .splash-shield,.splash-word,.splash-tag,.splash-bar,.splash-bar span{ animation:none; }
  #splash.splash-hide{ transition-duration:.15s; }
}
/* Reduced transparency: every frosted surface falls back to the opaque
   surface token (it adapts to light/dark), and the cursor sheen goes away.
   Contrast boost: stronger hairlines + wider focus ring. */
@media (prefers-reduced-transparency: reduce){
  .card, .nav, .finder-pill, .hero-live-chip, .hero-map-link,
  .map-dock, .map-statusbar, .btn-secondary, .theme-toggle,
  #ann-bell, #ann-modal, .danger-zone, .danger-modal-card,
  .flash, .hourly-card, .weather-now, .env-overall, .env-card,
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:var(--surface);
  }
  .stat-glass::after { display:none; }
}
/* Same opaque fallback where a dark-theme background override would
   otherwise outrank it (attribute + class beats the plain-class rule). */
@media (prefers-reduced-transparency: reduce){
  [data-theme="dark"] .nav, [data-theme="dark"] .danger-zone,
  [data-theme="dark"] .flash-danger, [data-theme="dark"] .flash-warning,
  [data-theme="dark"] .flash-info, [data-theme="dark"] .flash-success,
  [data-theme="dark"] .weather-now.day, [data-theme="dark"] .weather-now.night,
  [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
  [data-theme="dark"] select, [data-theme="dark"] textarea {
    background:var(--surface);
  }
  [data-theme="dark"] .env-card.env-tinted { background:var(--surface) !important; }
}
@media (prefers-contrast: more){
  .card { border-color:var(--border-strong); }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline-width:3px; }
}
/* Global reduced-motion floor (Apple HIG Lens 1: motion stays optional).
   Any infinite or transitional motion not explicitly gated above collapses
   to its end state — shimmer skeletons, quake pings, sheens, reveals. */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .reveal { opacity:1 !important; transform:none !important; filter:none !important; }
  .skeleton { animation:none !important; }
}

/* Dark mode — enabled via <html data-theme="dark"> (see prefs.js).
 * Light theme above is untouched; every rule here is scoped under the
 * attribute so the default rendering is byte-identical. Map tiles stay
 * light by design (see Settings). */
[data-theme="dark"] {
  color-scheme: dark;
  --primary: #7aa2ff;
  --primary-soft: #1c2a4d;
  --primary-container: #23365e;
  --navy: #e8edf7;
  --red: #f97066;
  --orange: #fdb022;
  --green: #32d583;
  --bg: #0b1220;
  --bg-gradient: radial-gradient(1200px 600px at 10% -10%, #16233f 0%, transparent 60%),
                 radial-gradient(1000px 520px at 88% 8%, rgba(26,57,122,.30), transparent 60%),
                 radial-gradient(760px 420px at 82% 34%, rgba(210,173,98,.06), transparent 65%),
                 radial-gradient(1000px 500px at 90% 0%, #0e2a28 0%, transparent 55%),
                 linear-gradient(180deg, #0d1526 0%, #0a101d 100%);
  --surface: #141d31;
  --glass: rgba(20,29,49,0.72);
  --glass-strong: rgba(26,36,59,0.88);
  --glass-border: rgba(255,255,255,0.10);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4);
  --glass-shadow-strong: 0 12px 40px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
  --text: #e8edf7;
  --text-secondary: #a8b3c7;
  --text-muted: #9aa7bd;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.16);
}
[data-theme="dark"] .nav { background: rgba(13,21,38,0.78); box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 20px rgba(0,0,0,0.35); }
/* Liquid-glass edge light: frosted surfaces read flat on near-black
   backdrops without a top inner highlight + hairline border. The hover
   companion keeps the lift effect (tie specificity, later in file). */
[data-theme="dark"] .card { border-color:rgba(255,255,255,0.13); box-shadow:var(--glass-shadow), inset 0 1px 0 rgba(255,255,255,0.06); }
[data-theme="dark"] .card:hover { border-color:rgba(255,255,255,0.20); box-shadow:var(--glass-shadow-strong), inset 0 1px 0 rgba(255,255,255,0.08); }
[data-theme="dark"] .nav-links a:hover { background: rgba(122,162,255,0.14); color: var(--primary); }
[data-theme="dark"] .nav-links a[aria-current="page"] { background: var(--primary-container); color: #fff; }
[data-theme="dark"] th { background: rgba(255,255,255,0.04); }
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background: rgba(255,255,255,0.06); color: var(--text); }
/* Same specificity as the base :focus rule, or focused inputs flash white. */
[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { background: rgba(255,255,255,0.09); }
/* Dark primary is periwinkle (#7aa2ff) — white button text fails on it,
   so primary buttons keep the light-mode blue fill in dark mode. */
[data-theme="dark"] .btn-primary { background:#2e5fe0; }
[data-theme="dark"] .btn-primary:hover { background:#2449b8; }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { background: rgba(255,255,255,0.09); border-color: var(--primary); box-shadow: 0 0 0 3px rgba(122,162,255,0.18); }
[data-theme="dark"] select option { background: #141d31; color: #e8edf7; }
[data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,0.10); border-color: rgba(122,162,255,0.3); }
[data-theme="dark"] .card:hover { border-color: rgba(255,255,255,0.16); }
/* Pastel alert surfaces stay readable: darken text-side, keep hue */
[data-theme="dark"] .flash-danger { background: rgba(122,39,26,0.45); color:#fda29b; border-color: rgba(253,162,155,0.35); }
[data-theme="dark"] .flash-warning { background: rgba(122,77,7,0.45); color:#fedf89; border-color: rgba(254,223,137,0.35); }
[data-theme="dark"] .flash-info { background: rgba(24,73,169,0.45); color:#b2ddff; border-color: rgba(178,221,255,0.35); }
[data-theme="dark"] .flash-success { background: rgba(5,79,49,0.5); color:#a6f4c5; border-color: rgba(166,244,197,0.35); }
[data-theme="dark"] .demo-banner { background: rgba(122,77,7,0.35); border-color: rgba(254,223,137,0.35); color:#fedf89; }
[data-theme="dark"] .badge-available { background:rgba(5,79,49,0.5); color:#a6f4c5; border-color:rgba(166,244,197,0.35); }
[data-theme="dark"] .badge-nearly { background:rgba(122,77,7,0.4); color:#fedf89; border-color:rgba(254,223,137,0.35); }
[data-theme="dark"] .badge-full { background:rgba(122,39,26,0.45); color:#fda29b; border-color:rgba(253,162,155,0.35); }
[data-theme="dark"] .badge-unknown { background:rgba(255,255,255,0.07); color:var(--text-secondary); }
/* Weather day card would glare in dark mode — give it a dusk treatment */
[data-theme="dark"] .weather-now.day { background: linear-gradient(135deg, rgba(26,36,59,0.9) 0%, rgba(35,54,94,0.85) 55%, rgba(30,58,138,0.75) 100%); color:#e8edf7; }
[data-theme="dark"] .weather-now.day .weather-now-temp, [data-theme="dark"] .weather-now.day .weather-now-desc { color:#fff; }
[data-theme="dark"] .weather-now.day .now-label, [data-theme="dark"] .weather-now.day .weather-now-feels, [data-theme="dark"] .weather-now.day .weather-now-hilo { color:#a8b3c7; }
[data-theme="dark"] .weather-icon-wrap { background: rgba(122,162,255,0.12); border-color: rgba(122,162,255,0.3); }
[data-theme="dark"] .weather-bar, [data-theme="dark"] .env-bar { background: rgba(255,255,255,0.12); }
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 75%); background-size:200% 100%; }
[data-theme="dark"] .env-card-icon { background: rgba(255,255,255,0.07); }
/* Env tint washes need a darker base to stay legible */
[data-theme="dark"] .env-tint-green { background: linear-gradient(135deg, rgba(5,79,49,0.4) 0%, rgba(5,79,49,0.15) 100%); }
[data-theme="dark"] .env-tint-yellow { background: linear-gradient(135deg, rgba(122,77,7,0.4) 0%, rgba(122,77,7,0.15) 100%); }
[data-theme="dark"] .env-tint-orange { background: linear-gradient(135deg, rgba(154,52,18,0.45) 0%, rgba(154,52,18,0.18) 100%); }
[data-theme="dark"] .env-tint-red { background: linear-gradient(135deg, rgba(127,29,29,0.5) 0%, rgba(127,29,29,0.2) 100%); }
[data-theme="dark"] .env-tint-purple { background: linear-gradient(135deg, rgba(88,28,135,0.45) 0%, rgba(88,28,135,0.18) 100%); }
/* Footer + hourly scrollbars use hardcoded light values inline */
[data-theme="dark"] body > footer { background: rgba(13,21,38,0.78) !important; }
[data-theme="dark"] .hourly-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); }
/* Announcement modal is JS-injected; vars keep it themed (see announcements.js) */
/* Home announcement banner + bell history (see home_banner.js) */
#home-ann-banner{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; }
#home-ann-banner[hidden]{ display:none; }
#home-ann-body{ flex:1; min-width:0; }
#home-ann-msg{ font-size:14px; line-height:1.5; margin:2px 0 0; }
#home-ann-msg.clamped{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
#home-ann-meta{ font-size:12px; color:var(--text-secondary); margin-top:6px; }
#home-ann-actions{ display:flex; gap:8px; flex:0 0 auto; flex-wrap:wrap; }
#ann-bell{ position:fixed; right:16px; top:76px; z-index:600; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; background:var(--glass-strong);
  border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); color:var(--text); }
#ann-bell:hover{ box-shadow:var(--glass-shadow-strong); }
#ann-bell-count{ position:absolute; top:-4px; right:-4px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:var(--red); color:#fff; font-size:11px; font-weight:800;
  display:grid; place-items:center; }
#ann-bell-count[hidden]{ display:none; }
/* Admin edit panels: full-width detail rows with grouped fields. One
   pattern serves centers + staging; single-open accordion + focus is
   wired per page, no-JS reveals everything via noscript. */
.admin-edit-title { font-weight:800; font-size:14px; margin:2px 0 10px; }
.admin-edit-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.admin-edit-grid fieldset { border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin:0; min-width:0; }
.admin-edit-grid legend { font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary); padding:0 6px; }
.admin-edit-grid label { display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--text-secondary); margin-bottom:8px; }
.admin-edit-grid label:last-child { margin-bottom:0; }
.admin-edit-grid textarea { resize:vertical; min-height:64px; }
.admin-edit-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
tr.center-edit > td, tr.staging-edit > td { background:var(--glass-strong); }
/* Small admin/dialog buttons meet the 44px floor (see map panel rules). */
#splashSkip, #ann-dismiss-all, #ann-ack { min-height:44px; }
#ann-history{ position:fixed; right:16px; top:128px; width:min(370px, calc(100vw - 32px)); max-height:min(62vh, 520px);
  overflow-y:auto; z-index:600; }
#ann-history[hidden]{ display:none; }
.ann-hist-item{ border-bottom:1px solid var(--border); padding:10px 0; display:flex; gap:10px; }
.ann-hist-item:last-child{ border-bottom:none; }
.ann-hist-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; margin-top:5px; }
.ann-hist-item.is-dismissed{ opacity:0.6; }
#ann-undo{ position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:700;
  display:flex; gap:10px; align-items:center; padding:10px 14px; font-size:13px; }
#ann-undo[hidden]{ display:none; }
@media (max-width:768px){
  /* Bell docks into the hamburger menu (moved there by JS) instead of
     floating bottom-right where it goes unnoticed. */
  #ann-bell{ display:none; }
  #ann-bell.in-menu{ display:flex; position:static; width:100%; height:auto; border-radius:12px;
    border:none; box-shadow:none; background:transparent; justify-content:flex-start;
    padding:10px 14px; font-weight:500; color:var(--text); }
  #ann-bell.in-menu #ann-bell-label{ display:inline !important; font-size:14px; }
  #ann-bell.in-menu #ann-bell-count{ position:static; margin-left:auto; }
  #ann-history{ top:128px; bottom:auto; }
  #ann-undo{ bottom:16px; }
}
/* Weather page: backend severity tints are light pastels — in dark mode the
   card wash is dropped (severity cue survives via border + badge). */
[data-theme="dark"] .env-card.env-tinted { background: var(--glass) !important; }
[data-theme="dark"] .cond-badge { background: rgba(24,73,169,0.5) !important; border-color: rgba(178,221,255,0.4) !important; color: #b2ddff !important; }
/* Map popups (Leaflet + Mapbox) ship white chrome — theme it in dark mode.
   Popup *bodies* already use var(--text-secondary); this covers the frame. */
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .mapboxgl-popup-content { background: var(--surface); color: var(--text); border:1px solid var(--border-strong); }
[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); border:1px solid var(--border-strong); }
[data-theme="dark"] .leaflet-popup-close-button,
[data-theme="dark"] .mapboxgl-popup-close-button { color: var(--text-secondary) !important; }
[data-theme="dark"] .mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
[data-theme="dark"] .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
[data-theme="dark"] .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { border-bottom-color: var(--surface); }
[data-theme="dark"] .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
[data-theme="dark"] .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
[data-theme="dark"] .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color: var(--surface); }
[data-theme="dark"] .mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--surface); }
[data-theme="dark"] .mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--surface); }

/* Scroll-reveal motion system (vanilla translation of SmoothUI's
   soft-blur-in + stagger patterns; driven by static/js/reveal.js).
   GPU-only (transform/opacity/filter), one shared easing, per-item delay
   via --reveal-delay so grids cascade without per-element keyframes.
   Restrained by design: an emergency directory earns trust through speed
   and clarity, not choreography — reveals run once, on entry, ≤450ms. */
.reveal {
  opacity:0;
  transform:translateY(14px);
  filter:blur(4px);
  transition:opacity var(--dur-med) var(--ease-out-soft),
             transform var(--dur-med) var(--ease-out-soft),
             filter var(--dur-med) var(--ease-out-soft);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
.reveal.in { opacity:1; transform:none; filter:none; will-change:auto; }
/* Stagger helper: children of [data-stagger] cascade in DOM order. */
[data-stagger] > * { --reveal-delay:calc(var(--reveal-idx, 0) * 60ms); }
/* Hero entrance: title resolves from a soft blur (SmoothUI focus-blur
   resolve, single run) while supporting copy stays static for readability. */
.reveal-hero-title.in { animation:hero-resolve var(--dur-slow) var(--ease-out-soft) both; }
@keyframes hero-resolve { 0%{ opacity:0; filter:blur(6px); } 100%{ opacity:1; filter:blur(0); } }
/* Number pop for live stat counters — transform-only, spring easing. */
.stat-pop { display:inline-block; }
.stat-pop.tick { animation:stat-tick var(--dur-med) var(--ease-spring) both; }
@keyframes stat-tick { 0%{ transform:scale(.82); opacity:.4; } 100%{ transform:scale(1); opacity:1; } }
/* No-JS fallback: content must never stay invisible without the observer. */
.no-js .reveal { opacity:1; transform:none; filter:none; }

/* Reicon — self-hosted SVG sprite (see static/icons/REICON.md).
   currentColor inherits context color, so glyphs follow light/dark theme
   and parent accents automatically. Sizes come from width/height attrs. */
.ri { display:inline-block; vertical-align:-0.125em; flex:0 0 auto; }
.splash-inner .splash-shield { display:block; }

/* Glass StatsCard — dashboard stat component (icon tile + label + value +
   threshold line). Hover lift mirrors the reference (-5px, GPU-only) and is
   gated to real hover pointers with motion allowed. Theme-aware: the same
   tokens serve light + dark, unlike dark-only mockups. */
.stat-glass { display:flex; flex-direction:column; gap:10px; padding:18px; }
a.stat-glass { text-decoration:none; color:inherit; cursor:pointer; }
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  a.stat-glass:hover, div.stat-glass:hover { transform:translateY(-5px); box-shadow:var(--glass-shadow-strong); border-color:rgba(255,255,255,0.55); }
}
.stat-glass-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.stat-glass-label { font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-secondary); padding-top:12px; }
.stat-glass-ico { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:0 0 auto;
  box-shadow:0 4px 12px rgba(16,42,67,0.18); }
.stat-glass-ico svg { width:22px; height:22px; }
.stat-glass[data-tone="green"] .stat-glass-ico { background:linear-gradient(135deg, #039855 0%, #12b76a 100%); }
.stat-glass[data-tone="orange"] .stat-glass-ico { background:linear-gradient(135deg, #e08a0e 0%, #f79009 100%); }
.stat-glass[data-tone="red"] .stat-glass-ico { background:linear-gradient(135deg, #d92d20 0%, #f97066 100%); }
.stat-glass[data-tone="blue"] .stat-glass-ico { background:linear-gradient(135deg, #2e5fe0 0%, #5b8cff 100%); }
.stat-glass[data-tone="gray"] .stat-glass-ico { background:linear-gradient(135deg, #667085 0%, #98a2b3 100%); }
.stat-glass-value { font-size:32px; font-weight:800; letter-spacing:-0.02em; line-height:1; font-variant-numeric:tabular-nums; }
.stat-glass-delta { display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--text-secondary); }
.stat-glass-delta svg { width:15px; height:15px; }
.stat-glass[data-tone="green"] .stat-glass-delta { color:var(--green); }
.stat-glass[data-tone="orange"] .stat-glass-delta { color:var(--orange); }
.stat-glass[data-tone="red"] .stat-glass-delta { color:var(--red); }
.stat-glass[data-tone="blue"] .stat-glass-delta { color:var(--primary); }

/* Theme toggle — 44px glass circle in the nav. Both icons render; CSS shows
   moon in light mode (tap to go dark) and sun in dark mode. The pre-paint
   snippet sets data-theme before CSS, so the icon is right on first paint. */
.theme-toggle { width:44px; height:44px; border-radius:50%; display:inline-grid; place-items:center; cursor:pointer; flex:0 0 auto;
  background:var(--glass-strong); border:1px solid var(--glass-border); color:var(--text);
  box-shadow:0 2px 8px rgba(16,42,67,0.06); padding:0;
  transition:background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) ease; }
.theme-toggle:hover { box-shadow:var(--glass-shadow-strong); border-color:rgba(59,110,245,0.25); }
.theme-toggle svg { width:20px; height:20px; }
.theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
.theme-toggle-label { display:none; }
#mobileMenu .theme-toggle { width:100%; height:auto; min-height:44px; border-radius:12px; border:none; box-shadow:none;
  display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:10px 14px;
  font-size:14px; font-weight:500; background:transparent; }
#mobileMenu .theme-toggle:hover { background:var(--glass); }
#mobileMenu .theme-toggle-label { display:inline; }

/* ============ Stormglass overhaul (see DESIGN.md) ============ */
/* Eyebrow + section head: icon tile, kickers above titles. Sentence case. */
.eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-secondary); }
.eyebrow svg { width:14px; height:14px; }
.section-head { display:flex; align-items:center; gap:10px; margin:0 0 10px; }
.section-head h2 { margin:0; font-size:17px; font-family:var(--font-display); letter-spacing:-0.01em; }
.section-head .eyebrow { display:block; margin-bottom:2px; }
.section-head .head-ico { width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  flex:0 0 auto; color:#fff; background:linear-gradient(135deg, var(--primary) 0%, #5b8cff 100%);
  box-shadow:0 4px 12px rgba(59,110,245,0.3); }
.section-head .head-ico svg { width:18px; height:18px; }
/* Stat spotlight: cursor-tracked radial sheen, fine pointers + motion only. */
.stat-glass { position:relative; overflow:hidden; }
.stat-glass::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity var(--dur-med) ease;
  background:radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.14), transparent 65%); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion: no-preference){
  .stat-glass:hover::after { opacity:1; }
}
[data-theme="dark"] .stat-glass::after {
  background:radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), rgba(122,162,255,0.16), transparent 65%); }
/* Readiness desk: finder and a compact map share one surface. Gold belongs
   to the brand; capacity colors keep their operational meaning. */
.hero-band { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:10px;
  border:1px solid var(--border-strong); border-top-color:var(--brand-gold); border-radius:var(--radius-lg);
  background:var(--glass); box-shadow:var(--glass-shadow); }
.finder-pill { min-width:0; align-self:center; padding:16px 20px; }
.finder-pill h1 { margin:0; color:var(--text); font-size:clamp(24px,2.4vw,32px); line-height:1.13; max-width:22ch; }
.finder-intro { margin:12px 0 16px; color:var(--text-secondary); font-size:14px; line-height:1.5; max-width:55ch; }
#heroFind { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
#heroCity { min-width:0; }
#heroGo { grid-column:1/-1; }
#heroMsg { font-size:13px; color:var(--text-secondary); margin-top:8px; }
#heroMsg:empty { display:none; }
.hero-map-frame { position:relative; min-width:0; min-height:288px; border-radius:16px; overflow:hidden; background:#d7e2e2; }
.hero-map-frame #previewMap { position:absolute; inset:0; height:100%; }
.hero-map-link { position:absolute; z-index:3; top:12px; right:12px; display:flex; align-items:center; min-height:44px;
  padding:9px 14px; border-radius:999px; background:#0b162b; color:#f7f9fc; text-decoration:none; font-size:13px; box-shadow:0 3px 10px #0b162b30; }
.hero-map-link:hover { background:#263f66; }
.home-status { margin:14px 0 10px; }
.home-status .grid-4 { gap:16px; }
/* Weather + hotlines share one row at half width each, compressed.
   Rhythm matches the stat grid (16px); the shorter card centers so neither
   side shows dead space against its taller sibling. */
.home-duo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; align-items:stretch; margin-top:16px; }
.home-duo #weatherSummary, .home-duo .home-emergency { margin-top:0; min-width:0; }
.home-duo .card { padding:14px 16px; }
.home-duo .home-emergency { flex-direction:column; align-items:stretch; justify-content:center; gap:10px; }
.home-duo .home-emergency-actions { margin-left:0; }
.home-duo .home-weather { align-content:center; height:100%; }
.home-duo .home-weather .wx-now { font-size:32px; }
.home-status .stat-glass { padding:14px 16px; min-height:120px; }
.home-status .stat-glass-ico { width:34px; height:34px; border-radius:10px; }
.home-status .stat-glass-value { font-size:32px; }
.home-status .stat-glass-label { font-size:11px; }
.home-status > p { margin:8px 0 0; }
.home-emergency { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:12px; padding:12px 16px; }
.home-emergency h2 { font-size:15px; margin:0 0 3px; }
.home-emergency p { font-size:12px; color:var(--text-secondary); margin:0; }
.home-emergency-actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
#weatherSummary { margin-top:12px; min-width:0; }
.home-weather { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto; align-items:center; gap:12px 24px; }
.home-weather .wx-title { margin:0 0 8px; color:var(--text-secondary); font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.home-weather .wx-now { font-family:var(--font-display); font-size:38px; font-weight:700; letter-spacing:-.03em; }
.wx-condition { margin-left:10px; font-size:14px; }
.wx-current-details { display:flex; gap:20px; color:var(--text-secondary); font-size:13px; }
.wx-current-details span { display:flex; align-items:center; gap:6px; }
.wx-current-details svg { width:16px; height:16px; }
.wx-actions { display:flex; align-items:center; gap:8px; justify-self:end; }
.wx-actions button { width:44px; padding:8px; }
.wx-foot { grid-column:1/-1; border-top:1px solid var(--border); padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12px; color:var(--text-secondary); }
.wx-foot a { color:var(--primary); font-weight:600; white-space:nowrap; }
.nearby-content { margin-top:12px; }
[data-theme="dark"] { --brand-gold:#e4c784; --brand-gold-soft:rgba(228,199,132,.1); }
[data-theme="dark"] .nav-links.pill-live a:not(.btn) { background:transparent; }
.nav-links .btn-primary { color:#fff; }
.nav-links a:not(.btn)[aria-current="page"] { text-decoration:underline; text-decoration-color:var(--brand-gold); text-underline-offset:7px; }
.btn-danger { background:#b3261e; color:#fff; border-color:#b3261e; }
.btn-danger:hover { background:#8f1e18; border-color:#8f1e18; }
@media (max-width: 900px) and (min-width:769px) {
  .nav:not(.nav--admin) .brand-word { font-size:16px; }
  .nav:not(.nav--admin) .nav-links a { font-size:12px; padding-inline:10px; }
}
@media (max-width: 700px) {
  .home-duo { grid-template-columns:minmax(0,1fr); }
  .hero-band { grid-template-columns:minmax(0,1fr); }
  .finder-pill { padding:12px; min-width:0; }
  #heroFind { grid-template-columns:minmax(0,1fr); }
  #home-ann-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .hero-map-frame { min-height:144px; }
  .home-status .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-weather { grid-template-columns:minmax(0,1fr) auto; gap:12px; }
  .wx-current-details { grid-row:2; grid-column:1/-1; }
  .wx-actions { grid-row:1; grid-column:2; }
  .wx-foot { flex-wrap:wrap; }
  .home-emergency-actions { margin-left:0; }
  .home-status .stat-glass-delta { font-size:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-tab-pill { transition:none; }
  .nav-links { scroll-behavior:auto; }
}
.hero-live-chip { position:absolute; z-index:2; top:14px; left:16px; display:flex; gap:8px; align-items:center;
  font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:#fff; background:rgba(5,9,15,0.55); border:1px solid rgba(255,255,255,0.16);
  backdrop-filter:blur(12px); border-radius:var(--radius-pill); padding:7px 12px; }
.hero-live-chip .dot { width:8px; height:8px; border-radius:50%; background:#32d583; box-shadow:0 0 8px #32d583; }
@media (prefers-reduced-motion: no-preference){
  .hero-live-chip .dot { animation:live-blink 2.4s ease-in-out infinite; }
}
@keyframes live-blink { 0%,100%{ opacity:1; } 50%{ opacity:0.45; } }
/* Ticker: bottom-bar status strip (timeline-bar language, adapted). */
.ticker { display:flex; align-items:center; gap:14px; overflow-x:auto; padding:10px 14px; margin-top:12px;
  font-size:12.5px; color:var(--text-secondary); scrollbar-width:none; }
.ticker::-webkit-scrollbar { display:none; }
.ticker .t-item, .map-statusbar .t-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.ticker .t-item svg, .map-statusbar .t-item svg { width:15px; height:15px; }
.ticker .t-item b, .map-statusbar .t-item b { color:var(--text); font-variant-numeric:tabular-nums; }
.map-statusbar .t-item b { color:#fff; }
/* Map chrome: floating glass dock + bottom status bar. */
.map-shell { position:relative; }
.map-dock { position:absolute; z-index:500; top:12px; left:50%; transform:translateX(-50%);
  display:flex; gap:4px; padding:5px; border-radius:var(--radius-pill);
  background:rgba(5,9,15,0.62); border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 8px 28px rgba(0,0,0,0.35); max-width:calc(100% - 24px); overflow-x:auto; scrollbar-width:none; }
.map-dock::-webkit-scrollbar { display:none; }
.map-dock button { border:none; background:transparent; color:rgba(255,255,255,0.72); font:inherit;
  font-size:12.5px; font-weight:600; padding:9px 14px; min-height:40px; border-radius:var(--radius-pill);
  cursor:pointer; white-space:nowrap; transition:background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.map-dock button:hover { background:rgba(255,255,255,0.10); color:#fff; }
.map-dock button[aria-selected="true"] { background:#fff; color:#0b1220; }
.map-statusbar { position:absolute; z-index:500; right:12px; bottom:12px; left:auto;
  max-width:min(430px, calc(100% - 24px)); justify-content:flex-end;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:11.5px; color:rgba(255,255,255,0.82);
  background:rgba(5,9,15,0.62); border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);
  border-radius:14px; padding:8px 12px; box-shadow:0 8px 28px rgba(0,0,0,0.35); }
.map-statusbar b { color:#fff; font-variant-numeric:tabular-nums; }
.map-statusbar .sep { opacity:0.35; }
/* Skip link: hidden until keyboard focus (redesign audit omission fix). */
.skip-link { position:fixed; top:-60px; left:12px; z-index:4000; background:var(--navy); color:#fff;
  padding:10px 16px; border-radius:12px; font-size:13px; font-weight:700; text-decoration:none;
  transition:top var(--dur-fast) ease; }
.skip-link:focus-visible { top:12px; color:#fff; }

/* Information hierarchy: operational content leads, glass supports it. */
.page-intro { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:16px 0 28px; }
.page-intro > div { min-width:0; }
.page-intro .page-context { color:var(--brand-gold); font-size:12px; font-weight:750; letter-spacing:.075em; text-transform:uppercase; margin:0 0 9px; }
.page-intro h1 { font-family:var(--font-display); font-size:clamp(28px,3.4vw,44px); line-height:1.12; letter-spacing:-.03em; margin:0 0 8px; text-wrap:balance; }
.page-intro p:not(.page-context) { color:var(--text-secondary); line-height:1.55; max-width:66ch; margin:0; }
.page-intro > .btn { flex:none; }
.section-heading, .results-heading { display:flex; justify-content:space-between; gap:16px; align-items:end; margin:32px 0 14px; }
.section-heading h2, .results-heading h2 { font-family:var(--font-display); font-size:clamp(18px,2vw,24px); margin:0 0 4px; }
.section-heading p { color:var(--text-secondary); font-size:13px; margin:0; }
.section-heading a { color:var(--primary); font-weight:700; white-space:nowrap; }
.results-heading #liveStamp { font-size:12px; color:var(--text-secondary); }
.action-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0 24px; }
.action-tile { display:flex; align-items:center; gap:14px; min-width:0; padding:18px; border-radius:16px; border:1px solid var(--glass-border); background:var(--glass); box-shadow:var(--glass-shadow); text-decoration:none; color:var(--text); }
.action-tile:hover { border-color:var(--primary); color:var(--text); }
.action-tile > svg { flex:none; color:var(--primary); }
.action-tile > span:nth-child(2) { min-width:0; }
.action-tile strong { display:block; font-size:15px; }
.action-tile small { display:block; color:var(--text-secondary); font-size:12px; margin-top:3px; }
.action-tile > span:last-child { margin-left:auto; color:var(--primary); }
.action-emergency > svg, .action-emergency > span:last-child { color:var(--red); }
.finder-pill h2 { margin:0; font-family:var(--font-display); color:var(--text); font-size:clamp(24px,2.4vw,32px); line-height:1.13; max-width:22ch; }
.home-information { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); align-items:start; gap:16px; margin-top:20px; }
.home-information > * { min-width:0; }
.home-support { display:grid; gap:16px; }
.home-support #weatherSummary, .home-support .home-emergency { margin:0; min-width:0; }
.home-support .home-weather { grid-template-columns:minmax(0,1fr) auto; }
.home-support .wx-current-details, .home-support .wx-foot { grid-column:1/-1; }
.home-support .home-emergency { display:block; }
.home-support .home-emergency-actions { margin:12px 0 0; }
.home-status .stat-glass { min-width:0; }
.directory-controls { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(180px,1fr); gap:14px 16px; align-items:end; margin-bottom:18px; }
.directory-controls label { display:block; margin-bottom:6px; }
.directory-controls input, .directory-controls select { width:100%; min-width:0; margin:0; }
.directory-tools { grid-column:1/-1; display:flex; align-items:end; flex-wrap:wrap; gap:10px; }
.directory-tools > div { flex:1 1 210px; }
.directory-tools > button { flex:0 1 auto; }
.directory-extra { grid-column:1/-1; border-top:1px solid var(--border); padding-top:16px; }
.directory-card { display:flex; flex-direction:column; min-width:0; gap:6px; }
.directory-card-title { margin:0; font-size:17px; line-height:1.35; overflow-wrap:anywhere; }
.directory-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:10px; }
.directory-card-actions .btn { flex:1 1 120px; padding:8px 12px; text-align:center; }
.breadcrumb { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; color:var(--text-secondary); font-size:13px; }
.breadcrumb a { color:var(--primary); font-weight:650; }
.center-intro { align-items:center; }
.detail-columns { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:18px; align-items:start; }
.detail-columns > * { min-width:0; }
.detail-primary { display:grid; gap:14px; }
.detail-primary .grid-4 { gap:8px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.detail-primary .grid-4 .card { padding:12px; box-shadow:none; background:transparent; }
.detail-primary h2, .detail-aside h2 { font-size:19px; margin:0; }
.detail-primary h3 { font-size:14px; margin:4px 0 0; }
.detail-freshness { color:var(--text-secondary); font-size:12px; margin:0; }
.detail-aside { display:grid; gap:16px; }
.detail-aside .card p { font-size:13px; color:var(--text-secondary); margin:8px 0; }
.detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.hotline-lead { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; padding:24px; border-radius:20px; color:#f7f9fc; background:#192743; box-shadow:var(--glass-shadow-strong); }
.hotline-lead > div { display:flex; align-items:center; flex-wrap:wrap; gap:20px; }
.hotline-number { font-family:var(--font-display); font-size:clamp(48px,6vw,78px); font-weight:700; line-height:1; font-variant-numeric:tabular-nums; color:#fff; }
.hotline-lead h2 { margin:0 0 3px; font-size:18px; }
.hotline-lead p { margin:0; font-size:13px; color:#e3e9f4; }
.readiness-note { margin-top:24px; padding:20px 24px; border:1px solid var(--border-strong); border-radius:16px; }
.readiness-note h2 { margin:0 0 6px; font-size:17px; }
.readiness-note p { margin:0; color:var(--text-secondary); line-height:1.5; }
.settings-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px; }
.settings-layout > .card { min-width:0; margin:0 !important; }
.settings-layout > .card:last-child { grid-column:1/-1; }
.map-panel-title { font-size:16px; line-height:1.2; margin:0; }
.admin-attention { display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.admin-attention h2 { margin:0 0 4px; font-size:19px; }
.admin-attention p { margin:0; color:var(--text-secondary); font-size:13px; }
.admin-attention-items { display:flex; flex-wrap:wrap; gap:8px; }
.admin-attention-items a { display:flex; flex-direction:column; min-width:126px; gap:4px; padding:10px 14px; border-radius:12px; background:var(--brand-gold-soft); text-decoration:none; color:var(--text); }
.admin-attention-items strong { font-family:var(--font-display); font-size:24px; line-height:1; font-variant-numeric:tabular-nums; }
.admin-attention-items span { color:var(--text-secondary); font-size:12px; }
.admin-form-block { margin-bottom:18px; }
.admin-form-block h2 { font-size:18px; margin:0 0 14px; }
.admin-form-row { display:flex; flex-wrap:wrap; gap:12px; align-items:end; }
.admin-form-row label { flex:1 1 170px; min-width:0; }
.admin-form-row .btn { flex:none; }
@media (min-width: 769px) {
  body:has(.map-shell) #map { width:calc(100% - 380px); margin-left:380px; }
  body:has(.map-shell) #sidePanel { top:76px; left:12px; bottom:12px; width:356px; }
  body:has(.map-shell) #routeDock { left:calc(50% + 190px); max-width:calc(100% - 400px); }
}
@media (max-width: 900px) {
  .home-information { grid-template-columns:minmax(0,1fr); }
  .home-support { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .home-support .home-weather { display:block; }
}
@media (max-width: 700px) {
  .page-intro { align-items:start; flex-direction:column; gap:14px; margin:16px 0 22px; }
  .action-row { grid-template-columns:1fr; gap:8px; }
  .action-tile { padding:12px 16px; }
  .home-support, .detail-columns, .settings-layout { grid-template-columns:1fr; }
  .settings-layout > .card:last-child { grid-column:auto; }
  .directory-controls { grid-template-columns:1fr; }
  .directory-tools, .directory-extra { grid-column:auto; }
  .directory-tools > button { flex:1 1 auto; }
  .section-heading, .results-heading { align-items:start; flex-wrap:wrap; }
  .hotline-lead { padding:20px; }
}