@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-regular.woff2?v=0.97.40') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-semibold.woff2?v=0.97.40') format('woff2');
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/oswald-bold.woff2?v=0.97.40') format('woff2');
}

:root {
  color-scheme: dark;
  --font-body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --surface-1: #0d1b2a;
  --surface-2: #1b365d;
  --page: #0d1b2a;
  --ink-1: #ffffff;
  --ink-2: #d9dee3;
  --ink-muted: #9ba3b8;
  --hairline: #274264;
  --border: rgba(255, 255, 255, 0.12);
  --accent: #3f7ac4;
  --brand: #dc262b;
  --cat-action: #fab219;
  --cat-minor: #ec835a;
  --cat-moderate: #d03b3b;
  --cat-major: #a855f7;
  --cat-none: #898781;
  --sev-emergency: #d03b3b;
  --sev-warning: #ec835a;
  --sev-watch: #fab219;
  --sev-advisory: #898781;
  --good: #0ca30c;
  --tile-value: #ffffff;
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface-1: #ffffff;
  --surface-2: #ebeef3;
  --page: #f2f5f8;
  --ink-1: #0d1b2a;
  --ink-2: #1b365d;
  --ink-muted: #565e77;
  --hairline: #d9dee3;
  --border: rgba(13, 27, 42, 0.16);
  --accent: #1b365d;
  --brand: #dc262b;
  /* sunlight contrast: dark-theme ambers/oranges/grays wash out on white; darker equivalents */
  --cat-action: #a97800;
  --cat-minor: #c9531f;
  --cat-moderate: #bf2e2e;
  --cat-none: #6d6b64;
  --sev-emergency: #bf2e2e;
  --sev-warning: #c9531f;
  --sev-watch: #a97800;
  --sev-advisory: #6d6b64;
  --cat-major: #8b2fd6;
  --good: #006300;
  --tile-value: #0d1b2a;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font-body);
  background: var(--page);
  color: var(--ink-1);
  font-size: 14px;
  display: flex;
  flex-direction: column;
}
.drive-title, .modal-head strong, .threat-head { font-family: var(--font-display); }

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--hairline);
  flex-wrap: wrap;
}
.brand { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.brand-logo { display: block; height: 44px; width: auto; }
.brand-logo-dark { display: none; }
:root[data-theme="dark"] .brand-logo-dark { display: block; }
:root[data-theme="dark"] .brand-logo-light { display: none; }
.brand .sub { color: var(--ink-2); font-size: 12px; }
.brand .sub .live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand); margin-right: 4px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

.tiles { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  min-width: 92px;
  cursor: pointer;
}
.tile:hover, .tile:focus-visible { border-color: var(--accent); }
.tile .label { font-size: 10.5px; color: var(--ink-2); }
.tile .value { font-size: 18px; font-weight: 600; color: var(--tile-value); line-height: 1.2; }
.tile .value .unit { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.tile.alert-tile .value { display: flex; align-items: center; gap: 6px; }
.tile .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.controls { display: flex; align-items: center; gap: 8px; }
.controls button { padding: 4px 10px; font-size: 12.5px; }
button, select, input, textarea {
  font: inherit;
  color: var(--ink-1);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: #fff; border-color: transparent; }
.refresh-meta { font-size: 10.5px; color: var(--ink-muted); text-align: right; line-height: 1.35; white-space: nowrap; }
.refresh-meta .fresh-dot { width: 7px; height: 7px; vertical-align: baseline; }
#update-chip {
  background: var(--good); color: #fff; border-color: transparent;
  font-weight: 700; animation: pulse 2.4s infinite;
}
#update-chip[hidden] { display: none; }

/* actionable ticker — recency-biased glance line; duplicated halves loop seamlessly */
#ticker { overflow: hidden; background: var(--surface-2); border-bottom: 1px solid var(--hairline); }
#ticker[hidden] { display: none; }
.ticker-track { display: inline-flex; white-space: nowrap; animation: tickerScroll 58s linear infinite; will-change: transform; }
#ticker:hover .ticker-track, #ticker:active .ticker-track { animation-play-state: paused; }
.ticker-half { display: inline-flex; align-items: center; min-width: 100%; }
.ticker-item { font-size: 12.5px; font-weight: 600; padding: 5px 0; cursor: pointer; flex: 0 0 auto; color: var(--ink-2); }
.ticker-item:hover { text-decoration: underline; }
.ticker-sep { color: var(--ink-muted); padding: 0 14px; flex: 0 0 auto; }
@keyframes tickerScroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

#emergency-banner {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%);
  z-index: 1200; max-width: min(92vw, 720px);
  display: flex; align-items: center; gap: 10px;
  background: var(--sev-emergency); color: #fff;
  padding: 10px 14px; border-radius: 8px;
  font-weight: 600; font-size: 13.5px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  animation: pulse 1.6s infinite;
}
#emergency-banner[hidden] { display: none; }
#emergency-banner span { cursor: pointer; }
#emergency-banner button {
  background: rgba(255,255,255,0.15); border: none; color: #fff;
  border-radius: 6px; padding: 2px 9px; font-size: 14px; min-height: 0;
}

main { flex: 1; display: flex; min-height: 0; }
#sidebar {
  width: 420px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border-right: 1px solid var(--hairline);
}
#map { flex: 1; background: var(--page); }
#sheet-handle { display: none; } /* mobile-only bottom-sheet grabber (shown in the phone media query) */
/* Drive Mode is the field's key view — give its control a distinct accent so it reads as a feature, not a utility */
#drive-btn { border-color: var(--note-teal, #14b8a6); color: var(--note-teal, #14b8a6); }
#drive-btn:hover { background: color-mix(in srgb, var(--note-teal, #14b8a6) 14%, var(--surface-2)); }
/* the address risk-check is the public entry point — accent it so it reads as a headline feature */
#risk-btn { border-color: var(--accent); color: var(--accent); font-weight: 650; }
#risk-btn:hover { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
/* graceful-update toast — quiet notice before/after the idle rollover reload */
#update-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 1750; max-width: min(92vw, 460px);
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--surface-1); border: 1px solid var(--border); border-left: 4px solid var(--good);
  border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--ink-1);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
#update-toast[hidden] { display: none; }
#update-toast.confirm { cursor: pointer; }
#update-toast button { min-height: 0; padding: 4px 10px; font-size: 12px; flex: 0 0 auto; }

#drive-hint {
  position: fixed; top: 54px; right: 10px; z-index: 1250; max-width: min(92vw, 340px);
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: var(--surface-1); border: 1px solid var(--note-teal, #14b8a6); border-left-width: 4px;
  border-radius: 9px; font-size: 12.5px; color: var(--ink-1); box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: pulse 2.4s 2;
}
#drive-hint[hidden] { display: none; }
#drive-hint span { flex: 1; line-height: 1.35; }
#drive-hint button { min-height: 0; padding: 4px 9px; font-size: 12px; flex: 0 0 auto; }
#drive-hint #drive-hint-go { background: var(--note-teal, #14b8a6); color: #fff; border-color: transparent; font-weight: 700; }
#drive-hint #drive-hint-x { background: none; border: none; color: var(--ink-muted); padding: 4px 6px; }

#threat-strip { background: var(--surface-2); }
#threat-strip:not(:empty) { padding: 7px 10px 8px; border-bottom: 1px solid var(--hairline); }
/* plain-language headline — a slim one-line strip at every width; tap expands the full sentence */
.threat-headline {
  display: block; width: 100%; text-align: left; margin-bottom: 5px; padding: 3px 8px; min-height: 0;
  background: var(--surface-1); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-1); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.threat-headline.open { white-space: normal; }
.threat-headline:hover { border-color: var(--accent); }
.threat-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--sev-emergency);
  margin-bottom: 6px;
}
.threat-head::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.threat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 6px; }
.stat-row {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 8px 4px 7px; min-height: 0;
  border: none; border-left: 3px solid var(--ink-muted); border-radius: 6px;
  background: var(--surface-1);
  font-size: 12px; text-align: left; color: var(--ink-1); line-height: 1.25;
}
.stat-row .glyph { flex: 0 0 auto; font-size: 11px; width: 15px; text-align: center; }
.stat-row .num {
  flex: 0 0 auto; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; min-width: 14px;
}
.stat-row .lbl { color: var(--ink-2); font-weight: 500; min-width: 0; } /* wraps — clipping loses meaning-bearing words (ES 'nivel MAYOR', 'récord histórico') */
.stat-row:hover { filter: brightness(1.12); }
.stat-row.emergency {
  border-left-color: var(--sev-emergency);
  background: color-mix(in srgb, var(--sev-emergency) 12%, var(--surface-1));
}
.stat-row.emergency .glyph, .stat-row.emergency .num { color: var(--sev-emergency); }
.stat-row.emergency .lbl { color: var(--ink-1); font-weight: 600; }
.stat-row.major {
  border-left-color: var(--cat-major);
  background: color-mix(in srgb, var(--cat-major) 8%, var(--surface-1));
}
.stat-row.major .glyph, .stat-row.major .num { color: var(--cat-major); }
.stat-row.warn {
  border-left-color: var(--sev-warning);
  background: color-mix(in srgb, var(--sev-warning) 8%, var(--surface-1));
}
.stat-row.warn .glyph, .stat-row.warn .num { color: var(--sev-warning); }
.stat-row.good {
  border-left-color: var(--good);
  background: color-mix(in srgb, var(--good) 8%, var(--surface-1));
}
.stat-row.good .glyph, .stat-row.good .num { color: var(--good); }
.stat-row.crest { grid-column: 1 / -1; }
.stat-row.crest .num { font-size: 13px; letter-spacing: 0.01em; }
.stat-row.crest .riv { color: var(--ink-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ffe-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ffe-tag {
  flex: 0 0 auto; font-size: 9px; font-weight: 800; letter-spacing: 0.07em;
  color: #fff; background: var(--sev-emergency); border-radius: 4px; padding: 2.5px 6px;
}
.ffe-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 0;
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 5px;
  color: var(--ink-1); border: 1px solid color-mix(in srgb, var(--sev-emergency) 55%, transparent);
  background: color-mix(in srgb, var(--sev-emergency) 10%, var(--surface-1));
  white-space: nowrap;
}
.ffe-chip .until { color: var(--sev-emergency); font-weight: 700; font-variant-numeric: tabular-nums; }
.ffe-chip:hover { filter: brightness(1.12); }
.strip-ok { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.strip-ok .ok-line { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--good); }
.strip-ok .ok-sub { font-size: 11px; color: var(--ink-2); }
.strip-ok.quiet {
  border-left: 3px solid var(--good); padding: 3px 0 3px 8px;
  background: color-mix(in srgb, var(--good) 6%, transparent);
}

.cutoff-circle {
  stroke: var(--sev-emergency); fill: var(--sev-emergency);
  stroke-dasharray: 8 6;
  animation: cutoffPulse 2.4s infinite;
}
@keyframes cutoffPulse { 50% { stroke-opacity: 0.35; } }
.z-low .leaflet-marker-pane .gauge-icon.cat-none { display: none; }
.gauge-hit {
  position: relative; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.gauge-hit .rise-arrow { top: -2px; right: 1px; }
.gauge-hit .fall-arrow { bottom: -2px; right: 1px; }

.tabs {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--hairline);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; border: none; border-radius: 0; background: none;
  padding: 9px 8px; color: var(--ink-2); font-size: 13px; font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tabs button:hover { color: var(--ink-1); }
.tabs button.active { color: var(--ink-1); border-bottom-color: var(--accent); font-weight: 600; }
.tabs button .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 5px;
  border-radius: 8px; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
}
.tabs button.active .count { color: var(--ink-1); border-color: var(--accent); }

/* min-height 0: without it a long feed grows past the flex column and shoves the disclaimer off-viewport */
.tab-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 12px; display: none; }
.tab-body.active { display: block; }

.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.filters select, .filters input[type="search"] { font-size: 12px; padding: 4px 8px; }
.filters input[type="search"] { flex: 1; min-width: 110px; }

.card {
  border: 1px solid var(--border);
  border-left: 4px solid var(--ink-muted);
  border-radius: 8px;
  background: var(--surface-2);
  padding: 8px 10px;
  margin-bottom: 8px;
  cursor: pointer;
}
.card:hover { border-color: var(--accent); }
.card.feed-allclear { border-left-color: var(--good); color: var(--good); cursor: default; text-align: center; }
.card.pri-critical { border-left-color: var(--sev-emergency); }
.card.pri-high { border-left-color: var(--sev-warning); }
.card.pri-medium { border-left-color: var(--sev-watch); }
.card.pri-low { border-left-color: var(--ink-muted); }
.card .head { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.card .type-chip {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em;
}
.card .when { margin-left: auto; font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.card .summary { margin: 4px 0; font-size: 13px; line-height: 1.35; }
.card .meta { font-size: 11.5px; color: var(--ink-2); }
.card .meta a { color: var(--accent); text-decoration: none; }
.card .badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.badge {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-size: 10.5px; line-height: 1.5; padding: 2px 8px; border-radius: 9px;
  border: 1px solid var(--border); color: var(--ink-2); background: var(--surface-1);
}
.badge.status-open, .badge.status-unverified { border-color: var(--sev-watch); }
.badge.status-in-progress { border-color: var(--accent); }
.badge.status-verified { border-color: var(--good); }
.badge.status-resolved { color: var(--ink-muted); text-decoration: line-through; }
.badge.src-official { border-color: var(--accent); color: var(--accent); font-weight: 650; letter-spacing: 0.03em; }
.badge.src-curated { border-color: var(--cat-action); color: var(--cat-action); font-weight: 650; letter-spacing: 0.03em; }
.badge.src-mini { font-size: 9px; padding: 1px 6px; flex: 0 0 auto; align-self: center; }
/* compact citation — a short chip link, never the full raw URL (source.url preserved as href) */
.badge.src-link { color: var(--accent); text-decoration: none; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.badge.src-link:hover { border-color: var(--accent); }
.badge.src-link.off { color: var(--ink-muted); cursor: default; }
/* card action row — tappable controls with real affordance (not bare text links) */
.card-actions { display: flex; gap: 6px; margin-top: 7px; }
.act-btn {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 34px; padding: 5px 10px; font-size: 12px; font-weight: 600;
  color: var(--ink-1); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
}
.act-btn:hover { border-color: var(--accent); color: var(--accent); }
.act-btn:active { transform: translateY(1px); }

.section-title { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin: 14px 0 6px; }
.section-title:first-child { margin-top: 0; }
.tab-sub { font-size: 12px; color: var(--ink-2); line-height: 1.4; margin: 2px 0 12px; }

.alert-card { border-left-width: 4px; }
.alert-card.sev-emergency { border-left-color: var(--sev-emergency); }
.alert-card.sev-warning { border-left-color: var(--sev-warning); }
.alert-card.sev-watch { border-left-color: var(--sev-watch); }
.alert-card.sev-advisory { border-left-color: var(--sev-advisory); }
.alert-card .event { font-weight: 650; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.alert-card .event .ev-name { min-width: 0; }
.alert-card .event .emergency-flag {
  color: var(--sev-emergency); font-size: 10.5px; font-weight: 700; white-space: nowrap;
  border: 1px solid var(--sev-emergency); border-radius: 4px; padding: 1px 5px;
}
.alert-card .areas { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.35; }
/* controlled meta row — each time unit stays whole (no label/value split); the text link is its own chip */
.alert-card .alert-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px;
  margin-top: 6px; font-size: 11px; color: var(--ink-muted);
}
.alert-card .alert-meta .am-when { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.alert-card .alert-text-link {
  color: var(--accent); text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; min-height: 30px;
  display: inline-flex; align-items: center;
}
.alert-card .event .alert-text-link { margin-left: auto; flex: 0 0 auto; }
.alert-card .alert-text-link:hover { border-color: var(--accent); }

.resource-item { padding: 7px 2px; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.resource-item .addr { color: var(--ink-2); font-size: 12px; }
.resource-item a { color: var(--accent); text-decoration: none; }
.resource-item.reopened { border-left: 3px solid var(--good); padding-left: 8px; cursor: pointer; }
.resource-item.reopened strong { color: var(--good); }
.resource-item.reopened.aged { opacity: 0.65; border-left-color: var(--ink-muted); }
.resource-item.reopened.aged strong { color: var(--ink-muted); }
.monitor-group { margin-bottom: 12px; }
.monitor-group a { display: block; padding: 5px 2px; color: var(--accent); text-decoration: none; font-size: 12.5px; }
.monitor-group a:hover { text-decoration: underline; }

#new-request-form { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 12px; background: var(--surface-2); display: none; }
#new-request-form.open { display: block; }
#new-request-form .row { display: flex; gap: 6px; margin-bottom: 6px; }
#new-request-form .row > * { flex: 1; min-width: 0; }
#new-request-form textarea { width: 100%; resize: vertical; min-height: 48px; }
#new-request-form .hint { font-size: 11px; color: var(--ink-muted); margin: 4px 0; }
.feed-actions { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.feed-actions button { font-size: 12px; padding: 4px 10px; }
.feed-actions[hidden] { display: none; }
#more-menu {
  border: 1px dashed var(--border); border-radius: 8px;
  padding: 8px; background: var(--surface-2);
}
#filters-toggle.on, #more-toggle.on { border-color: var(--accent); color: var(--accent); }
.filters[hidden] { display: none; }

/* 911 footer — one row at every width; the full notice lives in #safety-modal (tap) */
.disclaimer {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--ink-muted); padding: 5px 12px;
  border-top: 1px solid var(--hairline); background: var(--surface-1);
  cursor: pointer;
}
.disclaimer strong { color: var(--sev-emergency); }
.disclaimer .disc-short { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disclaimer .disc-full { display: none; }

#data-age-bar {
  padding: 5px 10px; font-size: 12.5px; font-weight: 700;
  color: #fff; letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.age-bar-x {
  background: rgba(0, 0, 0, 0.28); border: none; color: #fff; border-radius: 6px;
  padding: 2px 8px; min-height: 0; cursor: pointer; font-size: 12px; flex: 0 0 auto;
}
.age-bar-x:hover { background: rgba(0, 0, 0, 0.45); }
#data-age-bar[hidden] { display: none; }
#data-age-bar.amber { background: var(--sev-warning); }
#data-age-bar.red { background: var(--sev-emergency); animation: pulse 1.6s infinite; }

.tabs button .count.sev {
  border-color: var(--sev-emergency); color: var(--sev-emergency); font-weight: 700;
}
.card.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

/* Leaflet marker/overlay styling — colors live here so theme switching repaints */
.gauge-icon {
  border-radius: 50%;
  border: 2px solid var(--surface-1);
  box-shadow: 0 0 0 1px var(--border);
}
.gauge-icon.cat-action { background: var(--cat-action); }
.gauge-icon.cat-minor { background: var(--cat-minor); }
.gauge-icon.cat-moderate { background: var(--cat-moderate); }
.gauge-icon.cat-major { background: var(--cat-major); animation: pulse 1.6s infinite; }
.gauge-icon.cat-none { background: var(--cat-none); opacity: 0.7; }
/* dead/stale sensor — greyed + dashed, no pulse; suppressed from flood signals but kept on the map */
.gauge-icon.stale { background: var(--cat-none); opacity: 0.5; border-style: dashed; box-shadow: none; animation: none; }

.req-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px 6px 6px 0;
  background: var(--surface-1); border: 2px solid var(--ink-muted);
  font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.req-icon.pri-critical { border-color: var(--sev-emergency); }
.req-icon.pri-high { border-color: var(--sev-warning); }
.req-icon.pri-medium { border-color: var(--sev-watch); }
.req-icon.resolved { opacity: 0.45; }
.shelter-icon {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--good); color: #fff; font-size: 13px;
  border: 2px solid var(--surface-1);
}

.alert-poly.sev-emergency { stroke: var(--sev-emergency); fill: var(--sev-emergency); }
.alert-poly.sev-warning { stroke: var(--sev-warning); fill: var(--sev-warning); }
.alert-poly.sev-watch { stroke: var(--sev-watch); fill: var(--sev-watch); }
.alert-poly.sev-advisory { stroke: var(--sev-advisory); fill: var(--sev-advisory); }

/* punch the label-boost tiles up so place names stay readable under radar/alert washes */
.leaflet-labels-pane.boost-dark { filter: brightness(1.35) contrast(1.1); }

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--surface-1); color: var(--ink-1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}
.leaflet-popup-content { font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; margin: 10px 12px; }
.popup-title { font-weight: 650; margin-bottom: 2px; }
.popup-meta { color: var(--ink-2); font-size: 12px; }
.cat-word { font-weight: 700; text-transform: uppercase; }
.popup-link a { color: var(--accent); text-decoration: none; font-size: 12px; }
.popup-spark { margin-top: 6px; }
.popup-spark .spark-note { font-size: 10.5px; color: var(--ink-muted); }

.map-legend {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font: 11.5px system-ui, sans-serif; color: var(--ink-1);
  line-height: 1.7; max-width: 180px; cursor: pointer;
}
.map-legend .lg-title { font-weight: 650; margin-bottom: 2px; }
/* collapsed to a title pill by default (both breakpoints) — it otherwise covers the SW marker cluster; click to expand */
.map-legend:not(.open) > *:not(:first-child) { display: none; }
.map-legend:not(.open) > .lg-title:first-child::after { content: ' ▸'; color: var(--accent); font-weight: 700; }
.map-legend.open > .lg-title:first-child::after { content: ' ▾'; color: var(--ink-muted); }
/* short maps (landscape phone, expanded sheet) can't fit the full expanded legend — cap + scroll instead of clipping the title/rows */
.map-legend.open { max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
.map-legend .sw {
  display: inline-block; border-radius: 50%; margin-right: 6px; vertical-align: middle;
  border: 1.5px solid var(--surface-1); box-shadow: 0 0 0 1px var(--border);
}
.map-legend .sw-line {
  width: 14px; height: 4px; border-radius: 1px; border: 0; box-shadow: none;
}
/* legend swatches are chrome, never subject to marker declutter/pulse */
.map-legend .gauge-icon { display: inline-block !important; animation: none; opacity: 1; }
/* attribution collapsed to a tap-to-open ⓘ pill (owner: the bar crowded the legend on short screens); credits preserved on tap */
.leaflet-control-attribution { max-width: 22px; overflow: hidden; white-space: nowrap; cursor: pointer; }
.leaflet-control-attribution.attr-open { max-width: min(92vw, 560px); white-space: normal; }
.leaflet-control-attribution .attr-i { font-weight: 700; color: #0a58ca; padding: 0 1px; }

.rise-arrow {
  position: absolute; top: -10px; right: -7px;
  font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--ink-1); text-shadow: 0 0 3px var(--page), 0 0 3px var(--page);
}
.rise-arrow.cat-major { color: var(--cat-major); }
.rise-arrow.cat-moderate { color: var(--cat-moderate); }
.rise-arrow.cat-minor { color: var(--cat-minor); }
.rise-arrow.cat-action { color: var(--cat-action); }
.fall-arrow {
  position: absolute; bottom: -10px; right: -7px;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--good); text-shadow: 0 0 3px var(--page), 0 0 3px var(--page);
}
.lsr-icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; font-size: 13px;
  background: var(--surface-1); border: 2px solid var(--accent);
  border-radius: 4px; transform: rotate(45deg);
}
.lsr-icon > * { transform: rotate(-45deg); }
.lsr-icon.aging, .lsr-icon.stale { opacity: 0.55; border-color: var(--ink-muted); }
.lsr-card { border-left-color: var(--accent); }
.road-chip {
  background: var(--surface-1); border: 1px solid var(--sev-warning);
  border-radius: 4px; padding: 0 4px; font-weight: 600; font-size: 12px; white-space: nowrap;
}

.fresh-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.fresh-dot.fresh { background: var(--good); }
.fresh-dot.recent { background: var(--sev-watch); }
.fresh-dot.aging { background: var(--sev-warning); }
.fresh-dot.stale { background: var(--ink-muted); }
.badge.new-chip { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.badge.reverify { border-color: var(--sev-warning); color: var(--sev-warning); font-weight: 600; }
.badge.reverify::before { content: '⏱'; margin-right: 3px; }

/* aged/suppressed items — dimmed, retrievable, never deleted */
.card.aged { opacity: 0.55; border-left-style: dashed; }
.card.gauge-card.stale { opacity: 0.72; border-left-style: dashed; }
.stale-note { color: var(--ink-muted); font-weight: 600; }
.stale-glyph { color: var(--ink-muted); }
.badge.aged-chip { border-color: var(--ink-muted); color: var(--ink-muted); }
.aged-toggle {
  display: block; width: 100%; text-align: center;
  font-size: 12px; color: var(--ink-muted); background: none;
  border: 1px dashed var(--border); border-radius: 8px;
  padding: 7px; margin: 4px 0 10px;
}
.aged-toggle:hover { color: var(--accent); }
.lsr-icon.aged-icon { opacity: 0.4; border-color: var(--ink-muted); }
#flt-aged, #flt-inview { font-size: 12px; padding: 4px 8px; color: var(--ink-muted); }
#flt-aged.on, #flt-inview.on { border-color: var(--accent); color: var(--accent); }

/* map↔list sync: popup-reveal pulse + on-the-map affordance glyph */
.card.flash { animation: card-flash 0.75s ease-in-out 2; }
@keyframes card-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 3px var(--accent); border-color: var(--accent); }
}
.card .head .geo-flag { font-size: 10px; opacity: 0.5; }

/* version badge + changelog modal */
#app-version {
  flex: 0 0 auto; cursor: pointer; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
#app-version:hover { color: var(--ink-1); }
#app-version.has-new::after {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-left: 5px; vertical-align: super;
}
#changelog-modal {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
}
#changelog-modal[hidden] { display: none; }
.modal-box {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  width: min(92vw, 560px); max-height: 80vh; display: flex; flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#changelog-body { overflow-y: auto; padding: 10px 14px; }
.chg-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--hairline); font-size: 12.5px; }
.chg-row:last-child { border-bottom: none; }
.chg-v { flex: 0 0 58px; font-weight: 650; color: var(--accent); }
.chg-line { color: var(--ink-2); line-height: 1.4; }

#sitrep-modal {
  position: fixed; inset: 0; z-index: 1440;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
}
#sitrep-modal[hidden] { display: none; }
.sitrep-box { width: min(94vw, 640px); }
.sitrep-body { overflow-y: auto; padding: 10px 12px; }
.sitrep-pre {
  margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; color: var(--ink-1);
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.sitrep-pre strong { color: var(--accent); font-weight: 700; }
.sitrep-foot {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--hairline);
}
.sitrep-foot button { font-size: 12.5px; padding: 6px 12px; }

.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-bottom: 1px solid var(--hairline); font-size: 13.5px;
}
.modal-head button { min-height: 0; padding: 2px 8px; }

#safety-modal {
  position: fixed; inset: 0; z-index: 1500;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: center; justify-content: center;
}
#safety-modal[hidden] { display: none; }
#safety-modal .modal-head { color: var(--sev-emergency); font-size: 15px; }
.safety-body { padding: 12px 16px 4px; font-size: 13.5px; line-height: 1.55; color: var(--ink-1); }
.safety-body p { margin: 0 0 10px; }
.safety-body .no-deploy {
  padding: 10px 12px; border: 2px solid var(--sev-emergency); border-radius: 8px;
  font-weight: 800; color: var(--sev-emergency); text-align: center; letter-spacing: 0.03em;
}
#safety-ack { margin: 6px 16px 16px; }

/* ---- "Am I at risk?" address check ---- */
#risk-modal {
  position: fixed; inset: 0; z-index: 1450;
  background: rgba(0, 0, 0, 0.42);
  display: flex; align-items: center; justify-content: center;
}
#risk-modal[hidden] { display: none; }
.risk-box { width: min(94vw, 520px); }
.risk-body { overflow-y: auto; padding: 12px 14px; }
.risk-inputrow { display: flex; gap: 8px; margin-bottom: 4px; }
#risk-addr {
  flex: 1 1 auto; padding: 9px 11px; font-size: 14px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-1);
}
#risk-go { flex: 0 0 auto; padding: 9px 16px; font-weight: 650; }
#risk-saved:not(:empty) { margin: 8px 0 4px; }
.rs-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-bottom: 5px; }
.rs-chip { display: inline-flex; align-items: stretch; margin: 0 6px 6px 0; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.rs-go { padding: 5px 11px; font-size: 12px; background: var(--surface-2); color: var(--ink-1); border: none; border-radius: 0; }
.rs-go:hover { color: var(--accent); }
.rs-x { padding: 5px 8px; font-size: 11px; background: var(--surface-2); color: var(--ink-muted); border: none; border-left: 1px solid var(--hairline); border-radius: 0; }
.rs-x:hover { color: var(--sev-emergency); }

.risk-card { margin-top: 8px; }
.risk-place { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.rp-pin { font-size: 17px; flex: 0 0 auto; }
.rp-label { flex: 1 1 auto; font-weight: 650; font-size: 13.5px; color: var(--ink-1); line-height: 1.3; min-width: 0; word-break: break-word; }
.rp-save { flex: 0 0 auto; padding: 4px 10px; font-size: 12px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent); }
.rp-save:disabled { color: var(--good); border-color: var(--good); opacity: 1; }
.risk-read {
  padding: 10px 12px; margin-bottom: 10px; border-radius: 8px; line-height: 1.4;
  background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  font-size: 13px; color: var(--ink-1); font-weight: 550;
}
.risk-sec { margin-bottom: 10px; }
.risk-sec-t { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); margin-bottom: 5px; }
.risk-quiet { font-size: 12px; color: var(--ink-2); line-height: 1.45; padding: 6px 0; }
.risk-tip { font-size: 11.5px; color: var(--ink-muted); line-height: 1.4; margin-top: 6px; }
.risk-alert {
  padding: 8px 10px; margin-bottom: 6px; border-radius: 7px; font-size: 12.5px;
  background: var(--surface-2); border-left: 3px solid var(--sev-warning);
}
.risk-alert.sev-emergency { border-left-color: var(--sev-emergency); }
.risk-alert.sev-watch { border-left-color: var(--cat-action); }
.ra-area { color: var(--ink-2); font-size: 11.5px; margin-top: 2px; line-height: 1.35; }
.ra-meta { color: var(--ink-muted); font-size: 11px; margin-top: 2px; }
.risk-gauge {
  display: block; width: 100%; text-align: left; padding: 8px 10px; margin-bottom: 6px;
  border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-1);
}
.risk-gauge:hover { border-color: var(--accent); }
.rg-top { display: flex; gap: 8px; align-items: baseline; }
.rg-name { flex: 1 1 auto; font-weight: 650; font-size: 12.5px; min-width: 0; }
.rg-dist { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.rg-now { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.rg-fcst { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.risk-road { font-size: 12.5px; color: var(--ink-1); padding: 4px 0; display: flex; gap: 6px; align-items: baseline; }
.rr-dist { margin-left: auto; flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.risk-honesty {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 11.5px; line-height: 1.5;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border);
}

/* "your place" map marker — distinct from the GPS "YOU" dot */
.risk-pin { position: relative; display: flex; flex-direction: column; align-items: center; }
.risk-pin-dot {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--accent); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
}
.risk-pin-dot::before { content: "🏠"; transform: rotate(45deg); font-size: 14px; }
.risk-pin-label {
  margin-top: 2px; font-size: 9px; font-weight: 800; letter-spacing: 0.03em; color: #fff;
  background: var(--accent); padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}

.locate-btn { font-size: 18px; }

/* offline tile save — bottomleft, stacked under the legend */
.offline-ctl { font: 11.5px system-ui, sans-serif; color: var(--ink-1); }
/* subtle: a small square toggle matching the zoom/layer controls; panel expands on tap */
.off-toggle {
  width: 34px; height: 34px; padding: 0; font-size: 16px; line-height: 1; border-radius: 7px;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--ink-2);
  box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.off-toggle.open { color: var(--accent); border-color: var(--accent); }
.off-toggle.has-cache { color: var(--good); border-color: var(--good); } /* something is cached */
.off-panel {
  margin-top: 6px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 9px; max-width: 214px; box-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.off-panel[hidden] { display: none; }
.off-panel-head { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--ink-2); margin-bottom: 6px; text-transform: uppercase; }
.offline-ctl .off-save { width: 100%; min-height: 0; padding: 5px 8px; font-size: 12px; font-weight: 650; }
.offline-ctl .off-save:disabled { opacity: 0.6; cursor: progress; }
.offline-ctl .off-status { margin-top: 5px; color: var(--ink-2); font-size: 11px; line-height: 1.35; }
.offline-ctl .off-status.over { color: var(--sev-warning); font-weight: 650; }
.offline-ctl .off-note { margin-top: 4px; color: var(--ink-muted); font-size: 10px; line-height: 1.3; }
.offline-ctl .off-clear {
  margin-top: 6px; width: 100%; min-height: 0; padding: 3px 6px; font-size: 10.5px;
  color: var(--ink-muted); background: none; border: 1px dashed var(--border); border-radius: 6px;
}
.offline-ctl .off-clear:hover { color: var(--accent); border-color: var(--accent); }

.card .head .sid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; font-weight: 700;
  color: var(--accent); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 5px; cursor: copy; flex: 0 0 auto;
}

.record-line.near { color: var(--cat-major); font-weight: 600; }
.record-line.at { color: var(--sev-emergency); }

.popup-expand {
  display: block; width: 100%; margin: 6px 0 2px; padding: 7px; font-size: 12px; font-weight: 600;
  background: var(--surface-2); color: var(--accent); border: 1px solid var(--border); border-radius: 6px; cursor: pointer;
}
#hydro-modal { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
#hydro-modal[hidden] { display: none; }
.hydro-box { width: min(96vw, 960px); }

/* alert card reach disambiguator + readable alert-text reader */
.alert-card .areas .alert-reach { color: var(--ink-2); font-weight: 600; }
.alert-text-link { color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
#alert-modal { position: fixed; inset: 0; z-index: 1500; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; }
#alert-modal[hidden] { display: none; }
.alert-box { width: min(94vw, 620px); }
#alert-body { overflow-y: auto; padding: 10px 14px 12px; }
.alert-doc-area { font-weight: 650; color: var(--ink-1); font-size: 13px; }
.alert-doc-headline { color: var(--ink-2); font-size: 12.5px; margin-top: 3px; }
.alert-doc-when { color: var(--ink-muted); font-size: 11px; margin: 4px 0 8px; }
.alert-doc-instr-h { font-weight: 650; color: var(--ink-1); font-size: 12px; margin-top: 10px; }
.alert-doc-text { white-space: pre-wrap; word-break: break-word; font-family: inherit; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 4px 0 0; }
.alert-doc-src { font-size: 11px; color: var(--ink-muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hairline); }
/* click-to-map identify: pulse the clicked alert's polygon + a ping at its center */
path.alert-flash { animation: alertFlash 0.55s ease-in-out 3; }
@keyframes alertFlash { 0%, 100% { stroke-width: 1.5; stroke-opacity: 0.9; } 50% { stroke-width: 6.5; stroke-opacity: 1; } }
.alert-ping { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; border: 3px solid var(--accent); box-shadow: 0 0 10px var(--accent); animation: alertPing 0.9s ease-out 2; }
@keyframes alertPing { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }

/* threat-chip focus: temporary expanding-halo pulse on the framed gauge markers */
.gauge-attn::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; border: 3px solid var(--accent);
  box-shadow: 0 0 12px var(--accent); pointer-events: none;
  animation: gaugeAttn 1.5s ease-out 3;
}
@keyframes gaugeAttn {
  0% { transform: scale(0.55); opacity: 0.95; }
  70% { opacity: 0.5; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .gauge-attn::after { animation: none; } }
#hydro-canvas-wrap { padding: 10px 12px; }
#hydro-canvas { width: 100%; height: auto; display: block; }
#hydro-legend { display: flex; flex-wrap: wrap; gap: 12px; padding: 2px 14px 8px; font-size: 11.5px; color: var(--ink-2); }
#hydro-legend .hl { display: inline-flex; align-items: center; gap: 5px; }
#hydro-legend .hl i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }
#hydro-legend .hl i.dashed { border-top: 2px dashed var(--ink-1); background: none; height: 0; }
#hydro-note { padding: 0 14px 12px; }

/* ---- road & river cameras ---- */
.cam-icon {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.cam-icon.cam-river { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 1px 3px rgba(0,0,0,0.4); }
/* City of Austin arterial cams — amber ring to read apart from TxDOT/USGS */
.cam-icon.cam-austin { border-color: #e0902f; box-shadow: 0 0 0 1px #e0902f, 0 1px 3px rgba(0,0,0,0.4); }
/* ATX Floods low-water-crossing cams — bold flood-blue ring (the on-mission flagged layer) */
.cam-icon.cam-flood { border-color: #2f80ed; box-shadow: 0 0 0 1.5px #2f80ed, 0 1px 3px rgba(0,0,0,0.4); }
/* Houston TranStar cams — teal ring to read apart from the other metros */
.cam-icon.cam-houston { border-color: #17a2a2; box-shadow: 0 0 0 1px #17a2a2, 0 1px 3px rgba(0,0,0,0.4); }
/* City of El Paso bridge cams — purple ring (live HLS, border crossings) */
.cam-icon.cam-elp { border-color: #8e5cd9; box-shadow: 0 0 0 1px #8e5cd9, 0 1px 3px rgba(0,0,0,0.4); }
/* snapshot-only ITS cams: muted + dashed so a still never reads as a live stream */
.cam-icon.cam-snap { border: 1.5px dashed var(--ink-muted); opacity: 0.8; filter: saturate(0.4); }
/* viewer sits above Drive Mode (1600) — drive rows open cameras without leaving Drive Mode */
#cam-viewer { position: fixed; inset: 0; z-index: 1700; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; }
#cam-viewer[hidden] { display: none; }
.cam-box { width: min(96vw, 840px); }
#cam-stage { padding: 10px 12px 2px; }
#cam-stage video, #cam-stage img {
  display: block; width: 100%; max-height: min(62vh, 480px);
  background: #000; object-fit: contain; border-radius: 6px; /* letterbox, never crop */
}
.cam-fallback { padding: 28px 12px; text-align: center; color: var(--ink-2); font-size: 13px; background: #000; border-radius: 6px; }
#cam-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px 0; font-size: 13.5px; font-weight: 650; }
#cam-meta:empty { display: none; }
.cam-badge { font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 5px; flex: 0 0 auto; }
.cam-badge.live { color: #fff; background: var(--sev-emergency); }
.cam-badge.still { color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--border); }
.cam-badge.stale { color: var(--sev-warning); background: var(--surface-2); border: 1px solid var(--sev-warning); }
.cam-time { color: var(--ink-1); }
.cam-stale-note { flex: 1 1 100%; font-size: 11.5px; font-weight: 500; color: var(--sev-warning); }
#cam-note { padding: 6px 14px 12px; }

/* Drive Mode: big type, high contrast, one-thumb; overrides theme to dark for glare.
   The crest-summary view shares the same full-screen dark chrome. */
#drive-mode, #summary-view {
  position: fixed; inset: 0; z-index: 1600; background: #0d1b2a; color: #fff;
  display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#drive-mode[hidden], #summary-view[hidden] { display: none; }

#summary-body { padding: 6px 14px 14px; flex: 1 1 auto; }
.sum-head { padding: 8px 2px 4px; }
.sum-event { font-size: 15px; font-weight: 800; }
.sum-sub { font-size: 13px; color: #b9b8b1; margin-top: 2px; }
.sum-cite { font-size: 11.5px; color: #8a897f; margin-top: 4px; line-height: 1.35; }
.sum-quiet { color: #b9b8b1; font-size: 14px; padding: 14px 2px; }
.sum-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.sum-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
  color: #8a897f; padding: 4px 6px 4px 0; border-bottom: 1px solid #2c2c2a;
}
.sum-table td { padding: 8px 6px 8px 0; border-bottom: 1px solid #222220; vertical-align: top; line-height: 1.35; }
.sum-name { font-weight: 700; }
.sum-lid { font-size: 11px; color: #8a897f; }
.sum-stage { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-when, .sum-window { font-size: 11.5px; color: #b9b8b1; font-variant-numeric: tabular-nums; }
.sum-rec { font-size: 11px; color: #b9b8b1; margin-top: 3px; }
.sum-rec.near { color: var(--cat-major); font-weight: 600; }
.sum-rec.at { color: var(--sev-emergency); font-weight: 700; }
/* the view is hardcoded dark like Drive Mode, so badges can't ride the theme vars */
.sum-table .badge { display: inline-block; margin-top: 3px; background: #1b365d; border-color: #274264; color: #d9dee3; }
.drive-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid #274264; position: sticky; top: 0; background: #0d1b2a; z-index: 2;
}
.drive-title { font-size: 17px; font-weight: 800; flex: 1 1 auto; letter-spacing: 0.02em; }
.drive-head button { font-size: 16px; padding: 10px 16px; background: #1b365d; color: #fff; border: 1px solid #274264; border-radius: 8px; min-height: 48px; }
#drive-exit { background: #3f7ac4; border-color: #3f7ac4; }
#drive-fresh { padding: 4px 14px 0; font-size: 13px; color: #8a897f; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
#drive-fresh[hidden] { display: none; }
#drive-threat { padding: 6px 14px; }
.dt-emerg { background: #2a1414; border: 2px solid #d03b3b; color: #ff6b6b; font-size: 19px; font-weight: 800; padding: 12px 14px; border-radius: 10px; margin: 8px 0; line-height: 1.3; }
.dt-crest { color: #c9a0ff; font-size: 17px; font-weight: 700; padding: 6px 2px; }
.dt-nogps { color: #b9b8b1; font-size: 16px; padding: 10px 2px; }
#drive-list { padding: 4px 10px 10px; flex: 1 1 auto; }
.drive-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 16px 14px; margin: 8px 0; background: #1b365d; border: 1px solid #274264;
  border-radius: 12px; color: #fff; min-height: 64px;
}
.drive-row:active { background: #24487d; }
.d-glyph { font-size: 30px; flex: 0 0 auto; width: 38px; text-align: center; }
.d-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.d-name { font-size: 18px; font-weight: 700; line-height: 1.25; }
.d-sub { font-size: 14px; color: #b9b8b1; }
.d-dist { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto; text-align: right; color: #fff; }
.drive-911 {
  position: sticky; bottom: 0; background: #1a0e0e; border-top: 2px solid #d03b3b;
  color: #ff8080; font-size: 15px; font-weight: 700; text-align: center; padding: 12px 14px; line-height: 1.35;
}

.crossing-icon {
  width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid;
  background: var(--surface-1); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.xg-stale { color: var(--cat-action); font-weight: 600; }
#crossings-body:not(:empty) { border-bottom: 1px solid var(--hairline); margin-bottom: 6px; padding-bottom: 4px; }

#wave-list { border-bottom: 1px solid var(--hairline); padding-bottom: 8px; margin-bottom: 6px; }
#wave-list[hidden] { display: none; }
.wave-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; min-height: 0; text-align: left; font-size: 12px; font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; color: var(--ink-1);
}
.wave-toggle.open { border-color: var(--accent); }
.wave-count { font-size: 10.5px; font-weight: 600; color: var(--ink-muted); flex: 0 0 auto; white-space: nowrap; }
.wave-body[hidden] { display: none; }
.wave-body { margin-top: 4px; }
.wave-river { font-size: 12px; font-weight: 700; color: var(--ink-1); margin: 8px 2px 3px; }
.wave-hint { font-size: 10px; font-weight: 500; color: var(--ink-muted); }
.wave-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 5px 8px; margin: 2px 0; background: var(--surface-2); border: none;
  border-left: 3px solid var(--hairline); border-radius: 5px; cursor: pointer; min-height: 0;
}
.wave-row:hover { background: var(--surface-1); }
.wave-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.wave-site { flex: 1 1 auto; font-size: 12.5px; color: var(--ink-1); font-weight: 600; }
.wave-stage { font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.wave-eta { font-size: 11px; color: var(--ink-2); flex: 0 0 auto; min-width: 92px; text-align: right; }
.wave-eta.past { color: var(--ink-muted); }

#gps-wait {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 950;
  background: var(--surface-1); border: 1px solid var(--accent); border-radius: 999px;
  padding: 5px 14px; font-size: 12.5px; font-weight: 650; color: var(--ink-1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); animation: pulse 1.6s infinite;
}
#gps-wait[hidden] { display: none; }
.locate-btn.locating { color: var(--accent); animation: pulse 1.6s infinite; }

/* transient re-center hint: slides out to the right of the ⌖ button, flashes a few times, then retracts */
.locate-btn { position: relative; }
.recenter-drawer {
  position: absolute; left: calc(100% + 6px); top: 50%; transform: translateY(-50%); z-index: 1200;
  display: flex; align-items: center; height: 40px; max-width: 0; padding: 0;
  overflow: hidden; white-space: nowrap; pointer-events: none;
  background: var(--surface-1); color: var(--ink-1); border: 1px solid var(--accent);
  border-radius: 999px; font-size: 12.5px; font-weight: 650; box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  transition: max-width 0.28s ease, opacity 0.28s ease, padding 0.28s ease; opacity: 0;
}
.recenter-drawer[hidden] { display: none; }
.recenter-drawer.open {
  max-width: 200px; opacity: 1; padding: 0 14px; pointer-events: auto;
  animation: recenterFlash 0.6s ease-in-out 0.3s 3;
}
@keyframes recenterFlash {
  0%, 100% { background: var(--surface-1); color: var(--ink-1); }
  50% { background: var(--accent); color: #fff; }
}

/* bottom-right north compass: rests above the chat FAB, lifts with it when the playback bar opens */
.compass-ctl { position: absolute; right: 16px; bottom: 104px; z-index: 1160; }
.compass-ctl a { width: 42px; height: 42px; line-height: 42px; display: flex; align-items: center; justify-content: center; }
.compass-ctl svg { display: block; }
body.pb-bar-open .compass-ctl { bottom: 206px; }

/* ramp endpoints sampled from live IEM q2 tiles (continuous HSV: blue→cyan→green→yellow→orange→red) */
#mrms-legend {
  position: absolute; bottom: 26px; right: 84px; z-index: 900; /* clear of the chat FAB corner */
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 6px 10px 7px; width: 230px; box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
#mrms-legend[hidden] { display: none; }
#mrms-legend-title { font-size: 11px; font-weight: 700; color: var(--ink-2); display: block; margin-bottom: 4px; }
#mrms-legend-chips { display: flex; gap: 4px; margin-bottom: 5px; }
.mrms-chip {
  flex: 1; padding: 3px 0; font-size: 11px; font-weight: 650; line-height: 1;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--hairline);
  border-radius: 999px; cursor: pointer; touch-action: manipulation;
}
.mrms-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.mrms-ramp {
  height: 10px; border-radius: 3px;
  background: linear-gradient(90deg, #0006ff, #00d8ff, #00fe00, #e4fe00, #ff9e00, #ff0000, #ff00c8);
}
.mrms-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-muted); margin-top: 2px; }

#inun-legend {
  position: absolute; bottom: 84px; right: 84px; z-index: 900; /* stacks above the rainfall legend */
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 6px 10px 7px; width: 230px; box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
#inun-legend[hidden] { display: none; }
#inun-legend-title { font-size: 11px; font-weight: 700; color: var(--ink-2); display: block; margin-bottom: 3px; }
.inun-sw {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px; margin-right: 5px;
  vertical-align: -1px; background: rgba(0,110,199,0.55); border: 1px solid rgba(0,110,199,0.9);
}
.inun-note { font-size: 10px; line-height: 1.35; color: var(--ink-muted); }

/* active-layer pills — under the AO chips; hidden entirely when only default layers are on */
.layer-pills {
  position: absolute; top: 46px; left: 54px; right: 56px; z-index: 990;
  display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap;
  pointer-events: none;
}
.layer-pills[hidden] { display: none; }
.layer-pill {
  pointer-events: auto; white-space: nowrap; min-height: 0;
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--accent); color: var(--ink-1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.layer-pill .lp-x { color: var(--ink-muted); font-size: 10px; }
.layer-pill:hover .lp-x { color: var(--sev-emergency); }
.layer-pill.lp-add { border-color: var(--border); color: var(--ink-2); font-weight: 700; }
.layer-pill.lp-add:hover { border-color: var(--accent); color: var(--accent); }
/* playback: the amber ⏮ badge owns the top-center band — group the pills directly beneath it */
body.pb-on .layer-pills { top: 84px; }

/* point inspector popup (long-press / right-click) */
.inspect-pop .leaflet-popup-content { margin: 8px 10px; min-width: 216px; }
.inspect-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.inspect-t { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); flex: 1; }
.inspect-x { min-height: 0; padding: 1px 7px; font-size: 12px; background: none; border: none; color: var(--ink-muted); cursor: pointer; }
.inspect-x:hover { color: var(--sev-emergency); }
.inspect-usng {
  display: block; width: 100%; text-align: left; min-height: 0; padding: 4px 8px; margin-bottom: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; font-weight: 700;
  color: var(--accent); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 6px; cursor: copy;
}
.inspect-read { font-size: 12px; line-height: 1.4; margin-bottom: 4px; }
.inspect-line {
  display: block; width: 100%; text-align: left; font-size: 11.5px; color: var(--ink-2);
  padding: 3px 0; border: none; background: none; min-height: 0; line-height: 1.35;
}
.inspect-line.sev-emergency { color: var(--sev-emergency); font-weight: 700; }
.inspect-line.sev-warning { color: var(--sev-warning); font-weight: 600; }
button.inspect-gauge { cursor: pointer; color: var(--ink-1); }
button.inspect-gauge:hover { color: var(--accent); }
.inspect-note { font-size: 10px; color: var(--ink-muted); margin-top: 4px; line-height: 1.3; }

/* AO quick-jump — one collapsed context chip; taps open the preset row in place */
.ao-jump {
  position: absolute; top: 10px; left: 54px; right: 56px; z-index: 1000;
  display: flex; gap: 6px; align-items: flex-start;
  pointer-events: none;
}
.ao-current {
  pointer-events: auto; white-space: nowrap; min-height: 0; flex: 0 0 auto;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 12px;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--ink-1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.ao-current:hover, .ao-jump.open .ao-current { border-color: var(--accent); }
.ao-caret { color: var(--ink-muted); font-size: 10px; display: inline-block; transition: transform 0.15s; }
.ao-jump.open .ao-caret { transform: rotate(180deg); }
.ao-row { display: none; }
.ao-jump.open .ao-row { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; pointer-events: none; }
.ao-chip {
  pointer-events: auto; white-space: nowrap; min-height: 0;
  font-size: 12px; padding: 4px 10px; border-radius: 12px;
  background: var(--surface-1); border: 1px solid var(--border); color: var(--ink-1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.ao-chip:hover { border-color: var(--accent); }

/* location beacon: rings ping a few times on each deliberate locate, then settle to the static core dot */
.my-pos-wrap { position: relative; width: 48px; height: 48px; }
.my-pos-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--accent);
  animation: locPing 2s ease-out 3 forwards;
}
.my-pos-ring.d2 { animation-delay: 1s; }
.my-pos-core {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px;
  border-radius: 50%; background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 0 12px rgba(0,0,0,0.7);
}
.my-pos-label {
  position: absolute; top: 48px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-weight: 800; font-size: 10px;
  letter-spacing: 0.08em; padding: 1px 7px; border-radius: 7px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
@keyframes locPing { 0% { transform: scale(0.4); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* unified radar timeline: observed past | NOW | model future; the future zone flips the bar amber+dashed */
#radar-scrub {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 1100; display: flex; align-items: center; gap: 8px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px 12px; box-shadow: 0 3px 12px rgba(0,0,0,0.5);
  /* 144px cap keeps the centered bar's right edge clear of the chat-FAB corner at narrow desktop (v0.95.1) */
  max-width: min(calc(100vw - 12px), calc(100% - 144px));
}
#radar-scrub[hidden] { display: none; }
#radar-scrub.rs-future { border: 2px dashed var(--sev-warning); padding: 5px 11px; }
#rs-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; white-space: nowrap;
  color: #0d1b2a; background: var(--sev-warning); padding: 2px 7px; border-radius: 6px;
}
#rs-badge[hidden] { display: none; }
#rs-play { min-height: 0; padding: 2px 10px; font-size: 14px; }
#rs-track { position: relative; display: flex; align-items: center; width: min(38vw, 300px); }
#rs-slider { width: 100%; position: relative; z-index: 2; margin: 0; }
#radar-scrub.rs-future #rs-slider { accent-color: var(--sev-warning); }
/* amber dashed underline marks the model-future segment of the track */
#rs-future {
  position: absolute; left: 0; right: 0; bottom: 1px; height: 3px; border-radius: 2px; z-index: 1;
  background: repeating-linear-gradient(90deg, var(--sev-warning) 0 6px, transparent 6px 11px);
  opacity: 0.85; pointer-events: none;
}
#rs-future[hidden], #rs-now[hidden] { display: none; }
#rs-now { position: absolute; top: 2px; bottom: 0; width: 0; border-left: 2px solid var(--ink-2); opacity: 0.75; z-index: 1; pointer-events: none; }
#rs-now span {
  position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
  font-size: 8px; font-weight: 800; letter-spacing: 0.05em; line-height: 1; color: var(--ink-2);
}
#rs-label { font-size: 12px; font-weight: 700; min-width: 44px; color: var(--ink-2); white-space: nowrap; }
#rs-label.projected { color: var(--sev-warning); }
/* HRRR cells are ~3km blocks — supersampled WMS render + slight blur softens them toward the observed-radar look */
.fcst-tiles { filter: blur(1.5px) saturate(1.05); }
.rtl-xfade { transition: opacity 0.35s ease; }
@media (max-width: 500px) {
  /* left/right-anchored (not centered): keeps the bar clear of the chat-FAB corner at every sheet state (v0.95.1) */
  #radar-scrub { gap: 6px; padding: 5px 8px; left: 6px; right: 76px; transform: none; max-width: none; }
  #radar-scrub.rs-future { padding: 4px 7px; }
  #rs-track { flex: 1 1 auto; width: auto; min-width: 60px; }
  #rs-badge { font-size: 9px; }
  #rs-label { font-size: 11px; min-width: 0; flex: 0 0 auto; } /* the time readout keeps its width — the track absorbs the squeeze */

  /* scannable, not cramped: tighten card rhythm and give the action buttons a real thumb target */
  .card { padding: 9px 11px; margin-bottom: 7px; }
  .card .summary { font-size: 13px; margin: 3px 0; }
  .card .meta { font-size: 11px; }
  .card .badges { gap: 5px; margin-top: 6px; }
  .card-actions { gap: 7px; margin-top: 8px; }
  .act-btn { min-height: 40px; font-size: 12.5px; }
  .badge.src-link { max-width: 150px; }
  /* Alerts density on phones (owner: cards ran too tall) — .card.alert-card outranks the ≤768 .card padding */
  .card.alert-card { padding: 7px 10px; margin-bottom: 5px; }
  .alert-card .event { font-size: 12.5px; line-height: 1.2; }
  .alert-card .areas { margin-top: 2px; line-height: 1.25; }
  .alert-card .alert-meta { margin-top: 4px; gap: 2px 8px; }
  .alert-card .alert-text-link { min-height: 40px; }
}

@media print {
  :root, :root[data-theme="light"] {
    --surface-1: #fff; --surface-2: #fff; --page: #fff;
    --ink-1: #000; --ink-2: #333; --ink-muted: #555;
    --hairline: #ccc; --border: #999;
  }
  #map, .controls, .tiles, .feed-actions, #new-request-form, .filters,
  .tabs, #emergency-banner, .card-actions,
  #changelog-modal, #safety-modal { display: none !important; }
  main { display: block; }
  #sidebar { width: 100%; border: none; }
  .tab-body.active { overflow: visible; }
  .card { break-inside: avoid; }
  html, body { background: #fff; color-scheme: light; }
}

@media (max-width: 768px) {
  body { font-size: 15px; }
  header { padding: 2px 8px; gap: 8px; } /* 40px tap targets + 2px pad = the same header height as v0.88.0's 36px + 4px */
  .brand { min-width: 0; flex: 1; }
  .brand-logo { height: 36px; }
  .brand h1 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand .sub { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* tiles duplicate the (richer, tappable) threat strip — reclaim ~55px of list */
  .tiles { display: none; }
  /* non-flooding gauges are pure clutter on a phone map */
  .leaflet-marker-pane .gauge-hit.hit-none { display: none; }
  /* phone header: icon-only controls in one uncramped row; brand + time get their space */
  /* bottom-sheet resize: a small FLOATING vertical pill (▲ full / ↕ half / ▼ min) — no strip,
     consumes zero panel space, always visible (fixed, above the chat FAB), even when minimized */
  #sheet-handle {
    display: flex; flex-direction: column; position: fixed; right: 8px; bottom: 92px; z-index: 900;
    background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  }
  #sheet-handle button {
    min-width: 34px; min-height: 30px; padding: 0; font-size: 13px; font-weight: 700; border-radius: 0;
    background: var(--surface-1); color: var(--ink-2); border: none; border-bottom: 1px solid var(--hairline);
  }
  #sheet-handle button:last-child { border-bottom: none; }
  #sheet-handle button.on { background: var(--accent); color: #fff; }

  .controls { margin-left: auto; gap: 8px; }
  .controls .ctl-lbl { display: none; } /* icon-only — 🔍 🚗 ⟳ ⋮ (the ⋮ menu keeps its labels) */
  .controls button { min-height: 40px; min-width: 40px; padding: 4px 7px; font-size: 15px; }
  #update-chip { font-size: 11.5px; } /* the one control that keeps its words when shown */
  .refresh-meta { min-width: 0; font-size: 10px; }
  main { flex-direction: column; }
  #map { order: -1; flex: 1 1 auto; min-height: 60px; }   /* fills whatever the sheet leaves — no fixed height */
  #sidebar {
    width: 100%; min-width: 0; overflow: hidden; transition: height 0.22s ease;
    border-right: none; border-top: 1px solid var(--hairline);
  }
  /* sheet height per state; map (flex:1) takes the rest. Full fits the viewport so the 911 footer stays put.
     the resize control floats (fixed), so peek can collapse the panel to nothing — map truly full-screen */
  main.sheet-peek #sidebar { flex: 0 0 auto; height: 0; border-top: none; }
  main.sheet-half #sidebar { flex: 0 0 auto; height: 37vh; } /* mid/default: ~60/40 map-favoring split (header chrome excluded) */
  main.sheet-full #sidebar { flex: 0 0 auto; height: calc(100dvh - 120px); }
  /* threat module collapses to 1-2 scrollable rows — sidebar space belongs to the feed */
  #threat-strip:not(:empty) { padding: 5px 8px 6px; }
  .threat-head { display: none; }
  .threat-headline { min-height: 24px; }
  .threat-grid {
    display: flex; flex-wrap: nowrap; gap: 5px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .threat-grid::-webkit-scrollbar { display: none; }
  .stat-row { flex: 0 0 auto; padding: 3px 8px 3px 6px; font-size: 11px; }
  .stat-row .num { font-size: 13px; }
  .stat-row .lbl, .stat-row.crest .riv { overflow: visible; white-space: nowrap; } /* one-line chips — the strip scrolls sideways, full text stays reachable */
  .ffe-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 5px; }
  .ffe-row::-webkit-scrollbar { display: none; }
  .strip-ok .ok-sub { display: none; }
  .tabs button { padding: 11px 7px; font-size: 13.5px; }
  .tab-body { padding-bottom: 76px; } /* keep the chat FAB off card actions */
  button, select { min-height: 42px; }
  /* condense the feed-actions strip on phones — shorter buttons reclaim vertical real estate, still tappable */
  .feed-actions { gap: 4px; margin-bottom: 6px; }
  .feed-actions button { min-height: 34px; padding: 3px 9px; font-size: 11.5px; line-height: 1.1; }
  #more-menu { padding: 6px; }
  .filters select, .filters input[type="search"] { min-height: 36px; }
  .card { padding: 10px 12px; }
  .badge { padding: 4px 9px; font-size: 11.5px; }
  .map-legend { font-size: 10px; line-height: 1.5; max-width: 140px; padding: 6px 8px; opacity: 0.92; }
  /* collapse behavior is now in the base rules (both breakpoints) */
  /* one-thumb targets on the merged + / − / ⌖ bar */
  .leaflet-bar a, .leaflet-touch .leaflet-bar a { width: 42px; height: 42px; line-height: 42px; }
  .ao-jump { left: 62px; right: 62px; }
  .layer-pills { left: 62px; right: 62px; }
  .layer-pill { min-height: 30px; }
  .ao-current, .ao-chip { min-height: 30px; }
  /* expanded row scrolls sideways — six wrapped pills would bury the 42vh map */
  .ao-jump.open .ao-row { flex-wrap: nowrap; overflow-x: auto; pointer-events: auto; padding-bottom: 4px; }
  .offline-ctl { max-width: 168px; padding: 6px 8px; opacity: 0.95; }
  .offline-ctl .off-note { font-size: 9.5px; }
}

/* phone held sideways (short + landscape) — the ≤768 WIDTH query misses 844–932px-wide
   phones, dumping them into the too-tall desktop layout. Force a map-favoring side-by-side
   split. Placed AFTER the ≤768 block so equal-specificity rules win the 667×375 overlap. */
@media (max-height: 500px) and (orientation: landscape) {
  header { padding: 3px 8px; gap: 8px; flex-wrap: nowrap; }
  .brand { min-width: 0; flex: 0 1 auto; }
  .brand h1 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand .sub { display: none; }
  .tiles { display: none; }
  #ticker { display: none; }
  .controls { margin-left: auto; gap: 8px; }
  .controls .ctl-lbl { display: none; }
  .controls button { min-height: 34px; min-width: 38px; padding: 4px 7px; font-size: 15px; }
  .refresh-meta { min-width: 0; font-size: 10px; }

  main { flex-direction: row; }
  #map { order: 0; flex: 1 1 auto; min-height: 0; }
  #sheet-handle { display: none; }

  /* narrow scrollable sidebar (map-favoring). MUST override all three sheet-state rules —
     main.sheet-half #sidebar is specificity (1,1,1); a bare #sidebar (1,0,0) loses. */
  main.sheet-peek #sidebar,
  main.sheet-half #sidebar,
  main.sheet-full #sidebar,
  #sidebar {
    flex: 0 0 auto; width: 40vw; min-width: 260px; max-width: 340px;
    height: auto; overflow: hidden;
    border-top: none; border-right: 1px solid var(--hairline);
  }

  #threat-strip:not(:empty) { padding: 4px 8px 5px; }
  .threat-head { display: none; }
  .threat-grid {
    display: flex; flex-wrap: nowrap; gap: 5px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .threat-grid::-webkit-scrollbar { display: none; }
  .stat-row { flex: 0 0 auto; padding: 3px 8px 3px 6px; font-size: 11px; }
  .stat-row .num { font-size: 13px; }
  .stat-row .lbl, .stat-row.crest .riv { overflow: visible; white-space: nowrap; }
  .ffe-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ffe-row::-webkit-scrollbar { display: none; }

  .tabs button { padding: 8px 8px; font-size: 13px; }
  .tab-body { padding: 8px 10px; }

  .disclaimer { padding: 4px 10px; }
}

/* gauges tab — bucketed by actionability */
.group-toggle button { font-size: 12px; padding: 4px 10px; }
.group-toggle button.on { border-color: var(--accent); color: var(--accent); }
.gauge-card .g-name { font-weight: 650; font-size: 13px; min-width: 0; }

/* RFC forecast-max crests (hollow rings) + USGS raw-stage dots */
.fcst-ring {
  border-radius: 50%;
  background: transparent;
  border: 2.5px solid var(--cat-none);
  box-shadow: 0 0 0 1px var(--surface-1);
}
.fcst-ring.cat-action { border-color: var(--cat-action); }
.fcst-ring.cat-minor { border-color: var(--cat-minor); }
.fcst-ring.cat-moderate { border-color: var(--cat-moderate); }
.fcst-ring.cat-major { border-color: var(--cat-major); }
.map-legend .fcst-ring { display: inline-block; box-shadow: none; }
.usgs-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5b7fa6;
  border: 1.5px solid var(--surface-1);
  opacity: 0.85;
}

/* recently-reopened road — a "recovery / cleared" badge, deliberately a green ✓ road-sign
   shape (not a filled circle) so it never reads as a gauge/alert dot amid the circle markers */
.reopen-hit { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.reopen-icon {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 17px; font-size: 12px; font-weight: 800; line-height: 1;
  color: var(--good);
  background: color-mix(in srgb, var(--good) 16%, var(--surface-1));
  border: 2px solid var(--good); border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.map-legend .reopen-icon { width: 18px; height: 14px; margin-right: 6px; vertical-align: middle; font-size: 11px; box-shadow: none; }

/* mobile tap targets — small map markers get a transparent ~44px hit halo centered on the
   anchor (marker still points at its true coordinate); visible glyph unchanged. Scoped to the
   marker pane so legend swatches keep their small size (owner UX: markers hard to tap on a phone) */
@media (max-width: 768px) {
  .leaflet-marker-pane .reopen-icon,
  .leaflet-marker-pane .cam-icon,
  .leaflet-marker-pane .lsr-icon,
  .leaflet-marker-pane .usgs-dot { position: relative; }
  .leaflet-marker-pane .reopen-icon::before,
  .leaflet-marker-pane .cam-icon::before,
  .leaflet-marker-pane .lsr-icon::before,
  .leaflet-marker-pane .usgs-dot::before {
    content: ''; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
    border-radius: 50%;
  }
}

/* historical playback (v0.82) — collapsed ⏮ pill + slim bottom timeline bar over the map */
#pb-pill {
  position: absolute; bottom: 26px; right: 74px; z-index: 1100; /* clear of the LAN chat FAB (fixed right:16) */
  min-height: 0; padding: 6px 12px; font-size: 15px; border-radius: 999px;
  background: var(--surface-1); border: 1px solid var(--border);
  color: var(--ink-1); box-shadow: 0 3px 12px rgba(0,0,0,0.5); cursor: pointer;
}
#pb-pill.pb-disabled { opacity: 0.45; cursor: not-allowed; }
body.pb-bar-open #pb-pill { display: none; } /* the bar's ✕ takes over while expanded */
body.pb-bar-open #chat-fab { bottom: 148px; } /* desktop: FAB rides above the open bar — it otherwise buries NOW/✕ (phone override: 178px) */
body.pb-bar-open #radar-scrub { bottom: 148px; } /* radar timeline rides above the (taller, v0.84) playback bar + caption */
#playback-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 1150;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface-1); border-top: 2px solid var(--sev-warning);
  padding: 8px 34px 6px 12px; box-shadow: 0 -3px 12px rgba(0,0,0,0.4);
}
#playback-bar[hidden] { display: none; }
.pb-chips { display: flex; gap: 4px; }
.pb-chip { min-height: 0; padding: 4px 10px; font-size: 12px; font-weight: 700; border-radius: 999px; }
.pb-chip.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
#pb-play { min-height: 0; padding: 4px 13px; font-size: 14px; }
#pb-slider-wrap { position: relative; flex: 1; min-width: 130px; padding-top: 8px; }
/* custom-drawn scrub: slim visual track, tall hit area (input height ≫ track), fat thumb */
#pb-slider {
  width: 100%; margin: 0; display: block; height: 34px;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
  touch-action: none; /* the browser must never pan/double-tap-zoom mid-scrub */
}
#pb-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); }
#pb-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface-1); box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
#pb-slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--border); }
#pb-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-1); box-shadow: 0 1px 4px rgba(0,0,0,0.45); }
/* requested-window span with no recorded frames — hatched, scrub snaps out of it (never faked data) */
#pb-prearch {
  position: absolute; left: 0; top: 25px; transform: translateY(-50%); height: 8px;
  border-radius: 3px 0 0 3px; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--ink-muted) 55%, transparent) 3px 6px);
  border-right: 2px solid var(--sev-warning);
}
#pb-prearch[hidden] { display: none; }
#pb-ticks { position: absolute; top: -4px; left: 0; right: 0; height: 12px; pointer-events: none; }
.pb-tick {
  position: absolute; transform: translateX(-50%); pointer-events: auto;
  background: none; border: none; min-height: 0; padding: 0 4px;
  font-size: 10px; line-height: 1; color: var(--cat-major); cursor: pointer;
}
#pb-time {
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--sev-warning); min-width: 64px; text-align: center;
}
#pb-time.live { color: var(--good); }
#pb-now { min-height: 0; padding: 4px 11px; font-size: 12px; font-weight: 800; }
#pb-now.armed { border-color: var(--good); color: var(--good); }
#pb-close { position: absolute; top: 6px; right: 4px; min-height: 0; padding: 4px 9px; font-size: 13px; background: none; border: none; color: var(--ink-muted); cursor: pointer; }
#pb-note { flex-basis: 100%; font-size: 10.5px; color: var(--ink-muted); line-height: 1.3; }
#pb-badge {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 1200;
  background: var(--sev-warning); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 0.03em;
  padding: 4px 13px; border-radius: 999px; box-shadow: 0 3px 12px rgba(0,0,0,0.5); white-space: nowrap;
}
#pb-badge[hidden] { display: none; }
body.pb-on #threat-strip { opacity: 0.45; filter: grayscale(0.35); } /* playback dims the live threat read */

/* playback story mode (v0.84): caption strip, HUD, speed + frame-step controls */
#pb-caption {
  position: absolute; bottom: calc(100% + 10px); left: 10px; max-width: min(460px, calc(100% - 20px));
  z-index: 1160; text-align: left; cursor: pointer; min-height: 0;
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  border: 1px solid var(--border); border-left: 3px solid var(--sev-warning);
  border-radius: 8px; padding: 6px 10px;
  font-size: 12.5px; line-height: 1.35; color: var(--ink-1);
  box-shadow: 0 3px 12px rgba(0,0,0,0.4);
}
#pb-caption[hidden] { display: none; }
#pb-caption.cap-in { animation: pb-cap-in 0.35s ease; }
@keyframes pb-cap-in { from { opacity: 0; transform: translateY(5px); } }
/* one-time prominent archive-birth note — flashes in over the bar, holds 3s */
#pb-arch-note {
  position: absolute; bottom: calc(100% + 10px); left: 10px; right: 10px; z-index: 1170;
  background: var(--surface-1); border: 1px solid var(--sev-warning); border-left: 4px solid var(--sev-warning);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 700; line-height: 1.35;
  color: var(--ink-1); box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  animation: pb-cap-in 0.35s ease;
}
#pb-arch-note[hidden] { display: none; }
/* every playback + radar-scrub control opts out of browser double-tap zoom (tap leaks fixed in JS via DomEvent) */
#playback-bar, #playback-bar button, .pb-tick, #pb-pill, #pb-badge, #radar-scrub, #rs-play { touch-action: manipulation; }
#rs-slider { touch-action: none; }
#pb-back, #pb-fwd { min-height: 0; padding: 4px 8px; font-size: 12px; }
#pb-speed { min-height: 0; padding: 4px 9px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
#pb-hud {
  flex-basis: 100%; font-size: 11px; font-weight: 700; color: var(--ink-2); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums;
}
#pb-hud[hidden], #pb-hud-detail[hidden] { display: none; }
#pb-hud-detail { flex-basis: 100%; font-size: 10.5px; color: var(--ink-muted); line-height: 1.4; }
.pb-alert-poly.sev-sv { stroke: #e0b13f; fill: #e0b13f; }
.pb-alert-poly.sev-to { stroke: #c04ae2; fill: #c04ae2; }
/* slow-speed visual tween between archive frames — opacity/size/color only, never data values */
body.pb-tween .pb-ghit .gauge-icon { transition: width 0.45s ease, height 0.45s ease, background-color 0.45s ease, opacity 0.45s ease; }
/* archive radar/rainfall A/B buffers (v0.93.1) cross-fade between time buckets during replay */
.pb-xfade { transition: opacity 0.35s ease; }

/* v0.91 playback prominence — pulse ring, callout labels, road markers, crest-flow (all visual only) */
.pb-ghit { width: 40px; height: 40px; } /* room for the 2× major dot */
.pb-ring {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 2.5px solid var(--cat-none); opacity: 0;
  animation: pb-ring 1.3s ease-out;
}
.pb-ring[hidden] { display: none; }
.pb-ring.cat-major { border-color: var(--cat-major); }
.pb-ring.cat-moderate { border-color: var(--cat-moderate); }
.pb-ring.cat-minor { border-color: var(--cat-minor); }
.pb-ring.cat-action { border-color: var(--cat-action); }
@keyframes pb-ring { 0% { transform: scale(0.35); opacity: 0.95; } 100% { transform: scale(1.2); opacity: 0; } }
.pb-glabel {
  position: absolute; top: calc(100% - 5px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none; z-index: 5;
  font: 700 10.5px/1.25 system-ui, sans-serif; color: var(--ink-1);
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.pb-glabel[hidden] { display: none; }
.pb-road {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; font-size: 12px; line-height: 1;
  background: var(--surface-1); border: 2px solid var(--ink-muted);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.pb-crest-line { animation: pb-dash 1.1s linear infinite; }
@keyframes pb-dash { to { stroke-dashoffset: -18; } } /* dashArray 10 8 — one full period per loop */
.pb-crest-lbl {
  transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font: 700 10px/1 system-ui, sans-serif; color: var(--cat-major);
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  border: 1px solid var(--cat-major); border-radius: 999px; padding: 3px 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.strip-live-note { font-size: 10px; font-weight: 700; color: var(--sev-warning); padding: 4px 10px 0; letter-spacing: 0.02em; }

@media (max-width: 768px) {
  /* thumb-zone targets: the bar lives at the bottom of the map, one-handed reach */
  #playback-bar { gap: 6px; padding: 7px 8px 5px; }
  #playback-bar button, .pb-chip { min-height: 36px; }
  #pb-pill { min-height: 42px; min-width: 46px; bottom: 20px; right: 10px; } /* phone: map bottom edge is above the sheet — corner is free */
  #pb-slider-wrap { min-width: 110px; }
  /* playback drives the pane automatically (min-size on entry, restored on exit) — hide the manual handle
     under the bar, and lift the chat FAB clear of it */
  body.pb-bar-open #sheet-handle { display: none; }
  body.pb-bar-open #chat-fab { bottom: 178px; }
  body.pb-bar-open .compass-ctl { bottom: 236px; }
  #pb-arch-note { right: 84px; } /* clear of the lifted chat FAB */
}

/* fat-finger pass (owner field feedback): phone-width playback controls get real tap targets */
@media (max-width: 500px) {
  .tab-body { padding-right: 52px; } /* card line ends clear the fixed sheet-handle band (chat.js widens for its FAB) */
  #playback-bar { padding: 8px 46px 6px 8px; } /* right inset keeps row 1 clear of the enlarged ✕ */
  #pb-slider-wrap { flex-basis: 100%; min-width: 0; } /* the scrub gets a full-width row of its own */
  #pb-slider { height: 44px; }
  #pb-slider::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  #pb-slider::-moz-range-thumb { width: 28px; height: 28px; }
  #pb-prearch { top: 30px; }
  /* #playback-bar prefix outranks the ≤768 `#playback-bar button { min-height: 36px }` rule */
  #playback-bar #pb-back, #playback-bar #pb-fwd { min-width: 44px; min-height: 44px; font-size: 15px; }
  #playback-bar #pb-play { min-width: 48px; min-height: 44px; font-size: 16px; }
  #playback-bar #pb-speed { min-width: 44px; min-height: 44px; font-size: 13px; }
  #playback-bar #pb-now { min-height: 44px; padding: 4px 14px; }
  #playback-bar .pb-chip { min-height: 40px; }
  #playback-bar #pb-close { min-width: 40px; min-height: 40px; font-size: 16px; }
  .pb-tick { font-size: 12px; padding: 0 6px; }
  body.pb-bar-open #radar-scrub { bottom: 226px; } /* the taller wrapped bar needs more clearance */
  body.pb-bar-open #chat-fab { bottom: 226px; } /* the ≤768 178px lift still sits on the ~188px wrapped bar at phone width */
  body.pb-bar-open .compass-ctl { bottom: 284px; }
}

/* ---- v0.86: header search + "?" glossary + first-run onboarding ---- */
.hsearch { position: relative; display: flex; align-items: center; gap: 5px; }
#search-input { width: 220px; padding: 5px 9px; font-size: 12.5px; border-radius: 6px; }
#search-input[hidden] { display: none; }
#search-results {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 1600;
  min-width: 260px; max-width: min(92vw, 380px); max-height: 50vh; overflow-y: auto;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); padding: 4px;
}
#search-results[hidden] { display: none; }
.sr-row {
  display: flex; width: 100%; gap: 8px; align-items: baseline; text-align: left;
  background: none; border: none; border-radius: 6px; padding: 7px 9px; font-size: 12.5px;
}
.sr-row:hover { background: var(--surface-2); }
.sr-kind { flex: 0 0 auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-muted); }
.sr-label { flex: 1 1 auto; color: var(--ink-1); line-height: 1.35; }
.sr-note { padding: 8px 10px; font-size: 12px; color: var(--ink-2); }
#help-btn { font-weight: 800; }

#glossary-modal {
  position: fixed; inset: 0; z-index: 1450;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
}
#glossary-modal[hidden] { display: none; }
.glossary-box { width: min(94vw, 560px); }
#glossary-body { overflow-y: auto; padding: 8px 14px 14px; }
.gl-row { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--hairline); }
.gl-row:last-child, .gl-row.gl-chip { border-bottom: none; }
.gl-chip { padding: 2px 0; color: var(--ink-2); }
.gl-sw { flex: 0 0 44px; text-align: center; font-size: 14px; }
.gl-sw .gauge-icon, .gl-sw .fcst-ring { display: inline-block; animation: none; opacity: 1; }
.gl-txt { flex: 1 1 auto; color: var(--ink-2); line-height: 1.45; }
.gl-txt strong { color: var(--ink-1); }
.gl-note { font-size: 12px; color: var(--ink-2); line-height: 1.5; padding: 4px 0 2px; }

#onboard {
  position: fixed; inset: 0; z-index: 1480;
  background: rgba(0, 0, 0, 0.6);
  display: flex; align-items: center; justify-content: center;
}
#onboard[hidden] { display: none; }
.ob-box {
  position: relative; width: min(92vw, 400px);
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
#ob-skip { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--ink-muted); font-size: 12px; padding: 6px 8px; }
#ob-skip:hover { color: var(--accent); }
.ob-viewport { overflow: hidden; margin-top: 14px; }
.ob-panels { display: flex; transition: transform 0.28s ease; }
.ob-panel { flex: 0 0 100%; min-width: 0; text-align: center; padding: 8px 6px 4px; }
.ob-art { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; margin-bottom: 10px; }
.ob-art .gauge-icon { display: inline-block; width: 16px; height: 16px; animation: none; }
.ob-glyph { font-size: 26px; }
.ob-pb { color: var(--sev-warning); }
.ob-card { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; }
.ob-dim { opacity: 0.55; }
.ob-text { font-size: 14px; line-height: 1.5; color: var(--ink-1); }
#ob-legend { margin-top: 10px; font-size: 12.5px; color: var(--accent); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; }
.ob-dots { display: flex; justify-content: center; gap: 7px; margin: 12px 0 10px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.ob-dot.on { background: var(--accent); }
#ob-next { width: 100%; min-height: 40px; font-weight: 650; }

@media (max-width: 768px) {
  /* expanded search takes over the top bar — the standard consumer-map pattern */
  .hsearch.open {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1300; padding: 8px;
    background: var(--surface-1); border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  }
  .hsearch.open #search-input { flex: 1 1 auto; width: auto; min-height: 40px; font-size: 15px; }
  .hsearch.open #search-results { top: 100%; left: 8px; right: 8px; max-width: none; }
  .ob-text { font-size: 15px; }
}

/* ---- v0.88.1: header ⋮ overflow menu (owner: "top row is getting very crowded") ---- */
.hmore { position: relative; }
#hmore-btn { font-weight: 800; min-width: 40px; }
#hmore-btn.on { border-color: var(--accent); }
#hmore-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 1600;
  display: flex; flex-direction: column; gap: 2px; min-width: 180px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45); padding: 6px;
}
#hmore-menu[hidden] { display: none; }
.controls #hmore-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 6px; padding: 8px 10px;
  font-size: 13px; min-height: 40px; color: var(--ink-1);
}
.controls #hmore-menu button:hover { background: var(--surface-2); }
#hmore-menu .ctl-lbl { display: inline; } /* menu entries keep icon + label at every width — discoverability lives here now */

/* ---- v0.89: grouped layer sheet — replaces the stock Leaflet checkbox control as the picker ---- */
.leaflet-control-layers { display: none; } /* control stays mounted as the overlay-event registry; the sheet is the UI */

/* one themed map-control family — zoom/locate/layers/share share surface, border, hover in both themes */
.leaflet-bar, .leaflet-touch .leaflet-bar {
  border: 1px solid var(--border); border-radius: 6px; background-clip: padding-box;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.leaflet-bar a, .leaflet-touch .leaflet-bar a { background: var(--surface-1); color: var(--ink-1); border-bottom: 1px solid var(--hairline); }
.leaflet-bar a:first-child, .leaflet-touch .leaflet-bar a:first-child { border-top-left-radius: 5px; border-top-right-radius: 5px; }
.leaflet-bar a:last-child, .leaflet-touch .leaflet-bar a:last-child { border-bottom: none; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; }
.leaflet-bar a:hover, .leaflet-bar a:focus { background: var(--surface-2); color: var(--ink-1); }
.leaflet-bar a.leaflet-disabled { background: var(--surface-2); color: var(--ink-muted); }
.ls-trigger a { font-size: 15px; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.ls-trigger svg { display: block; }
#layer-sheet { position: fixed; inset: 0; z-index: 1460; }
#layer-sheet[hidden] { display: none; }
.ls-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.ls-panel {
  position: absolute; top: 60px; right: 12px; width: 344px; max-height: min(78vh, 660px);
  display: flex; flex-direction: column;
  background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.5);
}
.ls-grab { display: none; }
.ls-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--hairline); font-size: 14px;
}
.ls-head button { min-height: 0; padding: 2px 8px; }
.ls-note {
  margin: 8px 12px 0; padding: 6px 10px; font-size: 12px; font-weight: 600;
  color: var(--sev-warning); border: 1px solid var(--sev-warning); border-radius: 6px;
}
.ls-note[hidden] { display: none; }
.ls-body { overflow-y: auto; overflow-x: hidden; padding: 2px 10px 12px; -webkit-overflow-scrolling: touch; }
.ls-group {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-muted); margin: 12px 4px 4px;
}
.ls-base { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ls-base-btn { flex: 1; min-height: 36px; border: 0; border-radius: 0; background: var(--surface-2); font-size: 12.5px; }
.ls-base-btn + .ls-base-btn { border-left: 1px solid var(--border); }
.ls-base-btn.on { background: var(--accent); color: #fff; font-weight: 700; }
.ls-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  min-height: 48px; padding: 6px 8px; margin-top: 4px; touch-action: manipulation;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
}
.ls-row:disabled, .ls-base-btn:disabled, .ls-reset:disabled { opacity: 0.45; cursor: default; }
/* nested child row (reopenings under road closures) — indent + a subtle left connector to read as nested */
.ls-child { margin-left: 22px; width: calc(100% - 22px); border-left: 2px solid var(--accent); }
.ls-subhead {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  min-height: 34px; padding: 4px 8px; margin-top: 6px;
  background: transparent; border: 0; color: var(--ink-muted);
  font-size: 12px; font-weight: 700; touch-action: manipulation;
}
.ls-sub-caret { display: inline-block; transition: transform 0.15s; }
.ls-subhead[aria-expanded="true"] .ls-sub-caret { transform: rotate(90deg); }
.ls-sub-name { letter-spacing: 0.03em; }
.ls-sub-count { margin-left: auto; font-weight: 600; color: var(--accent); }
.ls-subrows[hidden] { display: none; }
.ls-icon { flex: 0 0 24px; text-align: center; font-size: 15px; line-height: 1; }
.ls-icon .gauge-icon { width: 13px; height: 13px; display: inline-block; }
.ls-icon .fcst-ring { width: 12px; height: 12px; display: inline-block; }
.ls-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ls-name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.ls-sub { font-size: 11px; color: var(--ink-muted); line-height: 1.3; overflow-wrap: anywhere; }
.ls-knob { flex: 0 0 34px; height: 20px; border-radius: 10px; background: var(--border); position: relative; }
.ls-knob::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ink-muted); transition: left 0.15s;
}
.ls-row.on .ls-knob { background: var(--accent); }
.ls-row.on .ls-knob::after { left: 16px; background: #fff; }
.ls-knob.ls-go { background: none; height: auto; font-size: 20px; color: var(--ink-muted); text-align: right; }
.ls-knob.ls-go::after { display: none; }
.ls-reset { display: block; width: 100%; margin-top: 14px; font-weight: 600; }
@media (max-width: 768px) {
  .ls-panel {
    top: auto; right: 0; left: 0; bottom: 0; width: 100%;
    max-height: 78vh; border-radius: 14px 14px 0 0;
    border-left: 0; border-right: 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ls-grab { display: block; flex: 0 0 auto; width: 44px; height: 4px; border-radius: 2px; background: var(--ink-muted); margin: 8px auto 0; }
}