:root {
  color-scheme: dark;
  --canvas: #090c12;
  --surface: #111722;
  --surface-raised: #171f2c;
  --border: #344054;
  --text: #f5f7fa;
  --text-secondary: #c1c8d2;
  --text-muted: #949dab;
  --accent: #ef625d;
  --focus: #8fd3ff;
  --warning: #f2c66d;
  --error: #ff847d;
  --success: #72c49a;
  --rail-width: 340px;
  --right-rail-width: 380px;
  --left-column: var(--rail-width);
  --right-column: var(--right-rail-width);
  --header-height: 72px;
  --bottom-tray-height: 310px;
  font-family: Aptos, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--canvas); color: var(--text); }
body { font-size: 14px; }
button, input, select { font: inherit; }
button, select, input[type="number"] { min-height: 44px; }
button { color: var(--text); }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.app-shell { display: grid; grid-template-columns: var(--left-column) minmax(0, 1fr) var(--right-column); grid-template-rows: minmax(0, 1fr); width: 100%; height: 100%; }
.app-shell.left-collapsed { --left-column: 52px; }
.app-shell.right-collapsed { --right-column: 52px; }
.center-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) var(--bottom-tray-height); overflow: hidden; }
.center-stage.bottom-collapsed { --bottom-tray-height: 52px; }

.control-rail,
.detail-rail { position: relative; z-index: 20; min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: var(--surface); }
.control-rail { border-right: 1px solid var(--border); }
.detail-rail { border-left: 1px solid var(--border); }
.rail-heading { height: var(--header-height); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.detail-heading .rail-toggle { margin-left: auto; }
.rail-title { min-width: 0; display: grid; gap: 4px; }
.rail-title strong { font-size: 16px; }
.desk-label { color: #f39a95; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.icon-button { width: 44px; height: 44px; min-height: 44px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: var(--text); font-weight: 700; cursor: pointer; }
.icon-button:hover { border-color: #607089; }
.collapsed-rail-label { display: none; height: calc(100% - var(--header-height)); align-items: center; justify-content: flex-start; gap: 14px; padding-top: 20px; color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; }
.collapsed-rail-label kbd { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border: 1px solid #5b687c; border-radius: 4px; background: #0c111a; color: var(--text); font: 700 11px/1 Aptos, "SF Pro Text", system-ui, sans-serif; writing-mode: horizontal-tb; }

/* Collapsed-rail keycaps hug the map side of each rail: in vertical-rl the
   cross-axis start is the right edge, so flex-start is map-side on the left
   rail and flex-end is map-side on the right rail. */
.collapsed-rail-label { width: 100%; }
.control-rail .collapsed-rail-label { align-items: flex-start; padding-right: 4px; }
.detail-rail .collapsed-rail-label { align-items: flex-end; padding-left: 4px; }


.rail-scroll { height: calc(100% - var(--header-height)); overflow: auto; overscroll-behavior: contain; padding-bottom: 28px; }
.control-section { padding: 16px; border-bottom: 1px solid #263044; }
.current-view-section { padding: 14px 16px; border-bottom: 1px solid #263044; background: #0d131d; }
.current-view-section p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.compact-heading { margin-bottom: 8px; }
.active-filter-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.active-filter-list:empty { display: none; }
.active-filter-list button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #536178; border-radius: 5px; padding: 4px 7px; background: #171f2c; color: var(--text-secondary); font-size: 10px; cursor: pointer; }
.active-filter-list button::after { content: "×"; color: var(--text); font-size: 13px; }
.active-filter-list button:hover { border-color: var(--focus); color: var(--text); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: 13px; font-weight: 700; }
.section-heading output, .section-heading > span { color: var(--text-secondary); font-size: 12px; }
.text-button { min-height: 32px; border: 0; padding: 4px 0; background: transparent; color: var(--focus); cursor: pointer; }
.random-combo { min-height: 34px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; background: var(--surface-raised); color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; }
.random-combo:hover { border-color: var(--focus); }
.secondary-button { min-height: 34px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 700; cursor: pointer; }
.secondary-button:hover { border-color: var(--focus); color: var(--text); }
.encoding-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }

.segmented { display: grid; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: #0c111a; }
.segmented.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmented button { min-height: 36px; border: 1px solid transparent; border-radius: 5px; padding: 6px 8px; background: transparent; color: var(--text-muted); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface-raised); border-color: var(--accent); color: var(--text); font-weight: 700; }
.strength-presets button[aria-pressed="true"] { background: var(--accent); color: #fff; }

.preset-list { display: grid; gap: 6px; }
.preset-list button { min-height: 40px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; text-align: left; color: var(--text-secondary); cursor: pointer; }
.preset-list button:hover, .preset-list button.active { border-color: var(--accent); color: var(--text); background: #23191d; }
.guided-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: #0c111a; }
.guided-tabs button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font-weight: 700; cursor: pointer; }
.guided-tabs button[aria-selected="true"] { background: var(--surface-raised); color: var(--text); }
.guided-tabs span { min-width: 22px; padding: 2px 5px; border-radius: 999px; background: #293448; color: var(--text-secondary); font-size: 10px; }
.top20-intro { margin: 0 0 9px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.cinematic-tour-launch { width: 100%; min-height: 62px; display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid #b64c48; border-radius: 7px; background: #2b171a; color: var(--text); text-align: left; cursor: pointer; }
.cinematic-tour-launch > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; }
.cinematic-tour-launch > span:last-child { display: grid; gap: 3px; }
.cinematic-tour-launch strong { font-size: 13px; }
.cinematic-tour-launch small { color: var(--text-secondary); font-size: 10px; }
.cinematic-tour-launch:hover { border-color: var(--accent); background: #351a1e; }
.cinematic-tour-launch:disabled { opacity: .55; cursor: not-allowed; }

.field-label, .field-pair label > span { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.field-gap { margin-top: 12px; }
.palette-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.palette-options button { position: relative; padding-left: 23px; text-align: left; }
.palette-options button::before { content: ""; position: absolute; left: 8px; width: 9px; height: 18px; border-radius: 3px; background: var(--scheme-swatch, var(--accent)); }
.palette-options [data-palette="ember"] { --scheme-swatch: linear-gradient(#2c7fb8, #7fcdbb, #fd8d3c, #e2504c); }
.palette-options [data-palette="steel"] { --scheme-swatch: linear-gradient(#2a5480, #6f9bab, #e78245, #b93631); }
.palette-options [data-palette="colorblind"] { --scheme-swatch: linear-gradient(#00204c, #224f75, #5c8284, #ffe442); }
.palette-options [data-palette="contrast"] { --scheme-swatch: linear-gradient(#364452, #687378, #cd7847, #8b3537); }
select, input[type="number"], input[type="search"] { width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #0c111a; color: var(--text); padding: 9px 10px; }
#geography, #geography option { font-size: 14px !important; line-height: 1.3; }
.nested-control-section { min-width: 0; padding-bottom: 14px; border-bottom: 1px solid #263044; }
.nested-control-section:last-child { padding-bottom: 0; border-bottom: 0; }
.nested-control-section h2 { margin: 0 0 10px; color: var(--text-secondary); font-size: 12px; }
.fire-search-section { padding: 14px 16px; border-bottom: 1px solid #263044; }
.county-search { position: relative; }
.county-search input { padding-right: 40px; }
.county-search button { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; min-height: 36px; border: 0; border-radius: 5px; background: transparent; color: var(--text-muted); cursor: pointer; }
.county-search button:hover { background: var(--surface-raised); color: var(--text); }
.control-note kbd { display: inline-grid; min-width: 22px; min-height: 22px; place-items: center; border: 1px solid #5b687c; border-radius: 4px; background: #0c111a; color: var(--text); font-size: 10px; }
.metric-range-control { margin-top: 8px; border: 1px solid #2c3647; border-radius: 6px; background: #0c111a; }
.metric-range-heading { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; color: var(--text-muted); font-size: 11px; line-height: 1.35; cursor: pointer; list-style: none; }
.metric-range-heading::-webkit-details-marker { display: none; }
.metric-range-heading::before { content: "›"; color: var(--text-muted); font-size: 16px; transition: transform 120ms ease-out; }
.metric-range-control[open] .metric-range-heading::before { transform: rotate(90deg); }
.metric-range-heading output { color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.metric-range-body { padding: 0 9px 6px; }
.dual-range { --range-start: 0%; --range-end: 100%; position: relative; height: 34px; margin-top: 2px; }
.dual-range::before { content: ""; position: absolute; top: 15px; right: 0; left: 0; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #3a4352 0 var(--range-start), var(--accent) var(--range-start) var(--range-end), #3a4352 var(--range-end) 100%); }
.dual-range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 34px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; }
.dual-range input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: transparent; }
.dual-range input[type="range"]::-webkit-slider-thumb { width: 19px; height: 19px; margin-top: -7px; border: 2px solid #0c111a; border-radius: 50%; appearance: none; -webkit-appearance: none; background: var(--accent); box-shadow: 0 0 0 1px #ffaaa5; pointer-events: auto; cursor: grab; }
.dual-range input[type="range"]::-moz-range-track { height: 5px; background: transparent; }
.dual-range input[type="range"]::-moz-range-thumb { width: 19px; height: 19px; border: 2px solid #0c111a; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px #ffaaa5; pointer-events: auto; cursor: grab; }
.dual-range input[type="range"]:focus-visible { outline: none; }
.dual-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus); }
.dual-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.partial-note, .warning-note { margin: 9px 0 0; color: var(--warning); font-size: 12px; line-height: 1.4; }
.control-note { margin: 8px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.scenario-tabs { display: none; margin-bottom: 12px; }
[data-mode="compare"] .scenario-tabs { display: grid; }
.scenario-badge { display: none; min-width: 26px; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: white !important; text-align: center; font-weight: 700; }
[data-mode="compare"] .scenario-badge { display: inline-block; }

.control-accordion { border-bottom: 1px solid #263044; }
.control-accordion > summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--text); font-weight: 700; cursor: pointer; list-style: none; }
.control-accordion > summary::-webkit-details-marker { display: none; }
.control-accordion > summary::before { content: "›"; flex: 0 0 auto; color: var(--text-muted); font-size: 20px; line-height: 1; transform: rotate(0); transition: transform 120ms ease-out; }
.control-accordion[open] > summary::before { transform: rotate(90deg); }
.control-accordion > summary > :last-child { margin-left: auto; color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.accordion-content { display: grid; gap: 14px; padding: 0 16px 18px; }
.accordion-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.accordion-actions p { margin: 0; color: var(--text-muted); font-size: 11px; }
.accordion-summary-note { color: var(--text-muted) !important; }
.nested-accordion { border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.nested-accordion > summary { min-height: 42px; display: flex; align-items: center; padding: 0 10px; color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; }
.nested-accordion-content { padding: 0 10px 10px; }
.definition-note { margin: 0; padding: 10px 11px; border-left: 3px solid #8e6657; background: #17191d; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.definition-note strong { color: var(--text); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.outcome-minimums > p { margin: 0 0 10px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.outcome-minimums .filter-result { margin: 9px 0 0; color: var(--text-secondary); }
.ef-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ef-grid label { position: relative; }
.ef-grid input { position: absolute; opacity: 0; pointer-events: none; }
.ef-grid span { min-height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; }
.ef-grid input:checked + span { border-color: var(--accent); background: #5a292d; color: #fff; }
.ef-grid input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.playback { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; }
.playback .primary-button { grid-column: 1 / -1; }
.playback .field-label { grid-column: 1 / -1; margin: 0; }
.playback input[type="range"] { width: 100%; accent-color: var(--accent); }
[data-mode="compare"] .playback { display: none; }
.primary-button { min-height: 44px; border: 0; border-radius: 7px; padding: 10px 14px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
.primary-button:hover { background: #ff736e; }

.empty-copy { color: var(--text-muted); line-height: 1.5; }
.county-name { margin: 0 0 5px; font-size: 20px; line-height: 1.15; }
.county-subtitle { margin: 0 0 12px; color: var(--text-secondary); font-size: 12px; }
.county-filter-note { margin: 0 0 12px; padding: 8px 10px; border-left: 3px solid var(--warning); background: #211d15; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.metric-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.metric-card { min-width: 0; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #0c111a; }
.metric-card-active { border-color: #8e6657; box-shadow: inset 0 0 0 1px #8e6657; }
.metric-card-label { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 700; line-height: 1.25; }
.metric-role { padding: 2px 5px; border: 1px solid #8e6657; border-radius: 999px; color: #f1b2a8; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.metric-card-value { color: var(--text); font-size: clamp(28px, 3vw, 36px); font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1; }
.metric-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric-comparison span { min-width: 0; display: grid; gap: 3px; }
.metric-comparison small { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.metric-comparison strong { overflow: hidden; color: var(--text); font-size: 22px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.mapped-metrics { display: grid; gap: 0; margin-top: 10px; border-top: 1px solid var(--border); }
.mapped-metrics p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 2px; border-bottom: 1px solid #263044; color: var(--text-secondary); font-size: 12px; }
.mapped-metrics p span { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mapped-metrics strong { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.evidence-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; margin: 0 0 14px; padding: 11px 0; border-top: 1px solid #263044; border-bottom: 1px solid #263044; font-size: 11px; }
.evidence-facts dt { color: var(--text-muted); }
.evidence-facts dd { margin: 0; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.evidence-note { margin: 12px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.active-measure { color: var(--text); font-weight: 700; }
.selected-swatch { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1px solid #fff; border-radius: 2px; background: var(--accent); }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.comparison-table th, .comparison-table td { padding: 6px 4px; border-top: 1px solid #263044; text-align: right; }
.comparison-table th:first-child, .comparison-table td:first-child { text-align: left; color: var(--text-secondary); }
.ranking-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.ranking-list li { counter-increment: rank; }
.ranking-list button { width: 100%; min-height: 38px; display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; border: 0; border-radius: 5px; padding: 5px 7px; background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; }
.ranking-list button::before { content: counter(rank); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ranking-list button:hover { background: var(--surface-raised); color: var(--text); }
.ranking-list .rank-value { color: var(--text); font-variant-numeric: tabular-nums; }
.rail-source { margin: 16px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.rail-resizer { position: absolute; z-index: 2; top: 0; width: 10px; height: 100%; cursor: col-resize; touch-action: none; }
.rail-resizer-left { right: -5px; }
.rail-resizer-right { left: -5px; }

.left-collapsed .control-rail .rail-title,
.left-collapsed .control-rail .rail-scroll,
.left-collapsed .control-rail .rail-resizer,
.right-collapsed .detail-rail .rail-title,
.right-collapsed .detail-rail .rail-scroll,
.right-collapsed .detail-rail .rail-resizer { display: none; }
.left-collapsed .control-rail .rail-heading,
.right-collapsed .detail-rail .rail-heading { justify-content: center; padding: 10px 4px; }
.left-collapsed .control-rail .collapsed-rail-label,
.right-collapsed .detail-rail .collapsed-rail-label { display: flex; }
.rail-scrim { display: none; }

.map-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--canvas); }
.bottom-tray { min-width: 0; min-height: 0; overflow: hidden; border-top: 1px solid var(--border); background: var(--surface); }
.bottom-tray-heading { height: 52px; display: flex; align-items: center; gap: 10px; padding: 4px 12px; }
.bottom-tray-heading > div { min-width: 0; display: grid; gap: 2px; }
.bottom-tray-heading strong { font-size: 14px; }
.bottom-tray-toggle { width: 42px; height: 42px; min-height: 42px; }
.bottom-tray-hint { margin-left: auto; color: var(--text-muted); font-size: 11px; }
.storm-table-panel { height: calc(100% - 52px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-top: 1px solid #263044; }
.bottom-collapsed .storm-table-panel { display: none; }
.storm-table-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 12px; border-bottom: 1px solid #263044; }
.storm-table-toolbar p { margin: 0; color: var(--text-secondary); font-size: 11px; }
.storm-table-actions { display: flex; align-items: center; gap: 9px; }
.download-button { min-height: 34px; padding: 5px 10px; border: 1px solid #5b687c; border-radius: 5px; background: #1a2230; color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; }
.download-button:hover { border-color: var(--focus); }
.download-button:disabled { opacity: .55; cursor: wait; }
.storm-table-pages { display: flex; align-items: center; gap: 7px; }
.storm-table-pages label { color: var(--text-muted); font-size: 11px; }
.storm-table-pages select { width: auto; min-height: 34px; padding: 5px 8px; }
.storm-table-pages button { min-height: 34px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-raised); color: var(--text); font-size: 11px; cursor: pointer; }
.storm-table-pages button:disabled { opacity: .45; cursor: default; }
.storm-table-pages output { min-width: 70px; color: var(--text-secondary); font-size: 11px; text-align: center; }
.storm-table-scroll { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.storm-table { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.storm-table th { position: sticky; z-index: 1; top: 0; padding: 8px 10px; border-bottom: 1px solid var(--border); background: #171f2c; color: var(--text-secondary); text-align: left; white-space: nowrap; }
.storm-table td { padding: 7px 10px; border-bottom: 1px solid #222b3a; color: var(--text-secondary); white-space: nowrap; }
.storm-table tbody tr:hover td { background: #171f2c; color: var(--text); }
.storm-table td:nth-child(n+5), .storm-table th:nth-child(n+5) { text-align: right; }
.display-section { background: #0e141e; }
.observation-control select { min-height: 40px; }
.map-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px 11px 20px; background: linear-gradient(180deg, #090c12f2 0%, #090c12c9 72%, transparent 100%); pointer-events: none; }
.map-header > * { pointer-events: auto; }
.map-header h1 { margin: 0; font-size: 22px; letter-spacing: 0; }
.map-header h1 span { color: var(--accent); font-size: 14px; }
.map-header h1 b { color: var(--accent); font-size: 12px; }
.map-header p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; }
.hub-return { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 3px; color: var(--text-secondary); font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; }
.hub-return:hover { color: var(--text); }
.hub-return:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.map-actions { display: flex; gap: 6px; }
.action-button { min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: var(--text); font-weight: 650; white-space: nowrap; cursor: pointer; }
.perimeter-tool-link { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.action-button:hover { border-color: #607089; }
.action-button[aria-pressed="true"] { border-color: #ff7b72; background: #25191d; box-shadow: inset 0 0 0 1px #ff7b72; }
.keyboard-help-button { display: inline-flex; align-items: center; justify-content: center; }
.keyboard-help-button kbd { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border: 1px solid #5b687c; border-radius: 4px; background: #0c111a; color: var(--text); font: 800 12px/1 Aptos, "SF Pro Text", system-ui, sans-serif; }
.action-label-short { display: none; }
.feedback-group { display: flex; gap: 4px; }
.feedback-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid currentColor; border-radius: 7px; background: var(--surface-raised); cursor: pointer; }
.feedback-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feedback-positive { color: var(--success); }
.feedback-critical { color: var(--error); }
.feedback-button:hover { background: #202a39; }
.help-feedback { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.help-feedback > strong { font-size: 13px; }
.help-feedback-actions { display: flex; gap: 8px; }

.map-grid { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; }
[data-mode="compare"] .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.map-pane { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid #2a3447; }
.pane-b { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
[data-mode="compare"] .pane-b { position: relative; inset: auto; visibility: visible; pointer-events: auto; }
.map-canvas { position: absolute; inset: 0; }
.pane-label { position: absolute; z-index: 5; top: 88px; left: 14px; display: flex; align-items: baseline; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: #111722e8; pointer-events: none; }
.pane-label strong { font-size: 12px; }
.pane-label span { color: var(--text-secondary); font-size: 11px; }
.map-kpi { position: absolute; z-index: 6; top: 132px; left: 14px; width: min(330px, calc(100% - 28px)); padding: 11px 13px 12px; border: 1px solid #4d5c72; border-left: 5px solid var(--accent); border-radius: 7px; background: #0b111bed; box-shadow: 0 10px 28px #0008; color: var(--text); pointer-events: none; }
.map-kpi-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
.map-kpi-heading > span { color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.map-kpi-heading strong { color: #fff; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.map-kpi-period { display: flex; align-items: center; justify-content: flex-end; min-height: 19px; margin-bottom: 7px; }
.map-kpi-period span { padding: 3px 6px; border: 1px solid #ef625d70; border-radius: 3px; background: #ef625d20; color: #ffaaa5; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.map-kpi dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.map-kpi dl div { min-width: 0; }
.map-kpi dt { margin: 0 0 2px; color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.map-kpi dd { margin: 0; overflow: hidden; color: #fff; font-size: clamp(19px, 1.7vw, 26px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.mobile-scenario-switch { display: none; position: absolute; z-index: 11; top: 76px; left: 50%; width: 224px; transform: translateX(-50%); }

.map-legend { position: absolute; z-index: 8; left: 18px; bottom: 18px; width: 260px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px; background: #111722ed; }
/* The reader chooses what the two dimensions mean, so the choice sits at the top of the
   legend — above the ramp it re-labels. */
/* The legend grows upward from the bottom; capped so it can never climb into the totals
   card above it. */
.legend-body { max-height: calc(100vh - 300px); overflow-y: auto; }
.legend-encoding { display: grid; gap: 4px; margin: 0 0 12px; }
.legend-encoding .field-label { margin: 0; }
.legend-encoding select { width: 100%; }
.legend-encoding select + .field-label { margin-top: 6px; }
.legend-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; }
.legend-title span:last-child { color: var(--text-muted); font-weight: 500; }
.color-ramp { height: 9px; border-radius: 3px; background: var(--tornado-ramp, linear-gradient(90deg, #2c7fb8, #7fcdbb, #edf8b1, #fd8d3c, #e2504c)); }
.legend-ticks { display: flex; justify-content: space-between; margin-top: 4px; color: var(--text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; }
.map-legend p { margin: 9px 0 0; color: var(--text-secondary); font-size: 11px; }
.map-legend b { color: var(--text); }
.height-scale-control { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; margin-top: 9px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.height-scale-control output { color: var(--text); font-variant-numeric: tabular-nums; }
.height-scale-control input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.height-scale-reset { width: 100%; min-height: 28px; margin-top: 5px; border: 1px solid var(--border); border-radius: 5px; background: #1a2230; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.height-scale-reset:hover { border-color: var(--border-strong); }

.map-player { position: absolute; z-index: 9; right: 125px; bottom: 18px; left: 300px; min-width: 0; display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; gap: 11px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #111722f2; box-shadow: 0 8px 22px #02050a88; }
.map-player-primary { display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; }
.map-player-timeline { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.map-player-timeline input { width: 100%; margin: 0; accent-color: var(--accent); }
.map-player-timeline output { color: var(--text); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.map-player-timeline p { overflow: hidden; margin: 0; color: var(--text-muted); font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.map-player-options { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; }
.map-player-options label { display: grid; gap: 2px; color: var(--text-muted); font-size: 9px; font-weight: 700; }
.map-player-options select { width: auto; min-width: 72px; min-height: 34px; padding: 4px 24px 4px 7px; color: var(--text); font-size: 10px; }
.map-player-options label:first-child select { min-width: 108px; }
.map-player-button { width: 36px; min-width: 36px; height: 36px; min-height: 36px; display: grid; place-items: center; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
.map-player-button:disabled { opacity: .5; cursor: not-allowed; }
.map-player-step { width: 36px; min-width: 36px; height: 36px; min-height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; padding: 0; background: #171f2c; color: var(--text); font-size: 20px; cursor: pointer; }
.map-player-step:hover { border-color: var(--focus); }
.map-player-step:disabled { opacity: .4; cursor: default; }

.map-hover-tooltip { position: absolute; z-index: 40; max-width: 270px; padding: 9px 11px; border: 1px solid #66758b; border-radius: 6px; background: #090d15f5; color: var(--text); box-shadow: 0 8px 24px #0009; pointer-events: none; }
.map-hover-tooltip strong { display: block; margin-bottom: 3px; font-size: 13px; }
.map-hover-tooltip span { display: block; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.map-hover-tooltip[hidden] { display: none; }

.top20-tour-caption { position: absolute; z-index: 50; bottom: clamp(30px, 4.5vh, 58px); left: 50%; width: min(1040px, calc(100% - 72px)); padding: clamp(24px, 3vw, 38px) clamp(26px, 4.2vw, 52px); border: 1px solid #ff8a83; border-left: 10px solid var(--accent); border-radius: 12px; background: linear-gradient(100deg, #080c12fa 0%, #080c12f2 100%); box-shadow: 0 20px 60px #000d; transform: translateX(-50%); text-align: left; pointer-events: none; }
.top20-tour-caption[hidden] { display: none; }
.tour-caption-kicker,
.tour-caption-measure { display: none; }
.top20-tour-caption h2 { margin: 0; color: #fff; font-size: clamp(54px, 7vw, 94px); font-weight: 880; letter-spacing: -.045em; line-height: .96; text-wrap: balance; }
.top20-tour-caption p { margin: 15px 0 0; color: #fff; font-size: clamp(28px, 3.4vw, 46px); font-weight: 820; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }
.top20-tour-caption.tour-caption-enter { animation: tour-caption-arrive 720ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes tour-caption-arrive {
  from { opacity: 0; transform: translate(-50%, 34px); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: translate(-50%, 0); clip-path: inset(0); }
}
.top20-tour-caption[data-phase="national"] { width: min(760px, calc(100% - 72px)); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(18px, 3vw, 38px); align-items: end; }
.top20-tour-caption[data-phase="national"] h2 { font-size: clamp(64px, 9vw, 112px); line-height: .82; }
.top20-tour-caption[data-phase="national"] p { margin: 0 0 .02em; font-size: clamp(28px, 4vw, 52px); }
.top20-tour-caption[data-phase="coordinates"] h2,
.top20-tour-caption[data-phase="capabilities"] h2 { font-size: clamp(48px, 6.2vw, 84px); }
.top20-tour-caption[data-phase="coordinates"] p { max-width: 940px; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.04; }
.tour-capability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.tour-capability-grid[hidden] { display: none; }
.tour-capability-grid span { min-height: 52px; display: grid; place-items: center; padding: 8px 10px; border: 1px solid #ff8a836b; border-radius: 6px; background: #ef625d18; color: #fff; font-size: clamp(15px, 1.55vw, 22px); font-weight: 800; line-height: 1.08; text-align: center; }
.tour-scene-cover { position: absolute; z-index: 51; inset: 0; display: grid; grid-template-columns: auto auto; place-content: center; align-items: center; gap: 18px; background: #070b11; color: #fff; }
.tour-scene-cover[hidden] { display: none; }
.tour-scene-cover span { width: 24px; height: 24px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 36px #ef625d77; }
.tour-scene-cover strong { font-size: clamp(36px, 5vw, 68px); font-weight: 850; letter-spacing: -.04em; }
.tour-intro-card {
  position: absolute;
  z-index: 58;
  inset: 0;
  display: grid;
  align-content: end;
  overflow: hidden;
  padding: clamp(56px, 7vw, 90px);
  background: #03060a;
  color: #fff;
  isolation: isolate;
  perspective: 900px;
}
.tour-intro-card[hidden] { display: none; }
.tour-intro-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  background:
    radial-gradient(circle at 64% 32%, #ef625d3d 0 5%, transparent 29%),
    radial-gradient(circle at 32% 74%, #1c8dab33 0 2%, transparent 30%),
    linear-gradient(145deg, #05090f 10%, #101722 54%, #020407 100%);
  animation: tour-intro-breathe 5s ease-in-out both;
}
.tour-intro-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #03060a00 0 52%, #03060ad9 78%, #03060a 100%),
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}
.tour-intro-atmosphere { position: absolute; z-index: 1; inset: 0; overflow: hidden; }
.tour-intro-grid {
  position: absolute;
  right: -16%;
  bottom: -16%;
  left: -16%;
  height: 76%;
  opacity: .44;
  background:
    linear-gradient(90deg, transparent 49.7%, #ef625d7d 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, #ef625d7d 50%, transparent 50.3%);
  background-size: 92px 92px;
  transform: rotateX(64deg) translateZ(-80px);
  transform-origin: center bottom;
  animation: tour-intro-grid-drive 5s cubic-bezier(.2, .7, .2, 1) both;
}
.tour-intro-vortex {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(76vw, 820px);
  height: min(70vw, 760px);
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 60px #000);
}
.tour-intro-vortex i {
  position: absolute;
  top: calc(var(--ring, 0) * 8.8%);
  left: 50%;
  width: calc(100% - var(--ring, 0) * 11%);
  aspect-ratio: 2.8 / 1;
  border: clamp(2px, .35vw, 5px) solid transparent;
  border-top-color: color-mix(in srgb, #ef625d calc(90% - var(--ring, 0) * 6%), #8dd8db);
  border-right-color: #ffffff24;
  border-radius: 50%;
  transform: translateX(-50%) rotate(calc(var(--ring, 0) * 17deg));
  animation: tour-intro-vortex-spin calc(1.25s + var(--ring, 0) * .12s) linear infinite;
}
.tour-intro-vortex i:nth-child(1) { --ring: 0; }
.tour-intro-vortex i:nth-child(2) { --ring: 1; }
.tour-intro-vortex i:nth-child(3) { --ring: 2; }
.tour-intro-vortex i:nth-child(4) { --ring: 3; }
.tour-intro-vortex i:nth-child(5) { --ring: 4; }
.tour-intro-vortex i:nth-child(6) { --ring: 5; }
.tour-intro-vortex i:nth-child(7) { --ring: 6; }
.tour-intro-columns {
  position: absolute;
  top: 13%;
  right: 5%;
  left: 5%;
  height: 55%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  opacity: 0;
  transform: rotateX(59deg) rotateZ(-8deg);
  transform-origin: center bottom;
}
.tour-intro-columns i {
  width: clamp(48px, 8vw, 100px);
  height: calc(14% + var(--column, 1) * 7%);
  border: 1px solid #ffffff30;
  background: linear-gradient(90deg, #168eb6, #63cbc6 72%, #c9efa9);
  box-shadow: 0 0 40px #16a4c055;
  transform-origin: bottom;
  animation: tour-intro-column-rise 900ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--column, 1) * 65ms);
}
.tour-intro-columns i:nth-child(1) { --column: 2; }
.tour-intro-columns i:nth-child(2) { --column: 5; }
.tour-intro-columns i:nth-child(3) { --column: 3; }
.tour-intro-columns i:nth-child(4) { --column: 7; }
.tour-intro-columns i:nth-child(5) { --column: 4; }
.tour-intro-columns i:nth-child(6) { --column: 8; }
.tour-intro-columns i:nth-child(7) { --column: 5; }
.tour-intro-columns i:nth-child(8) { --column: 3; }
.tour-intro-columns i:nth-child(9) { --column: 6; }
.tour-intro-radar {
  position: absolute;
  top: 7%;
  left: 50%;
  width: min(82vw, 880px);
  aspect-ratio: 1;
  border: 2px solid #ef625d59;
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg, #ef625d00 0 82%, #ef625d70 96%, transparent);
}
.tour-intro-radar::before,
.tour-intro-radar::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid #ef625d3d;
  border-radius: inherit;
}
.tour-intro-radar::after { inset: 34%; }
.tour-intro-year-stream {
  position: absolute;
  top: 8%;
  right: clamp(40px, 6vw, 80px);
  display: grid;
  gap: 8px;
  opacity: 0;
  color: #ff8a83;
  font: 800 clamp(44px, 7vw, 84px)/.9 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: -.06em;
  text-align: right;
}
.tour-intro-year-stream span { opacity: .24; transform: translateX(70px); }
.tour-intro-copy {
  position: relative;
  z-index: 8;
  width: min(920px, 100%);
  padding-left: clamp(22px, 3vw, 40px);
  border-left: clamp(8px, 1.2vw, 14px) solid #ef625d;
}
.tour-intro-copy > span {
  display: block;
  margin-bottom: clamp(14px, 2vw, 24px);
  color: #ff8a83;
  font: 850 clamp(18px, 2.5vw, 32px)/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .16em;
}
.tour-intro-copy h2 {
  max-width: 940px;
  margin: 0;
  font-size: clamp(76px, 11.5vw, 154px);
  font-weight: 920;
  letter-spacing: -.07em;
  line-height: .82;
  text-wrap: balance;
}
.tour-intro-copy p {
  max-width: 900px;
  margin: clamp(20px, 3vw, 34px) 0 0;
  color: #f8fafc;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 780;
  letter-spacing: -.03em;
  line-height: 1.03;
  text-wrap: balance;
}
.tour-intro-copy > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  animation: tour-intro-copy-punch 720ms cubic-bezier(.16, 1, .3, 1) both;
}
.tour-intro-copy > :nth-child(2) { animation-delay: 70ms; }
.tour-intro-copy > :nth-child(3) { animation-delay: 140ms; }
.tour-intro-progress {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  background: #ffffff12;
}
.tour-intro-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ef625d, #ffb28d);
  transform-origin: left;
  animation: tour-intro-progress var(--tour-opener-duration, 5s) linear both;
}

.tour-intro-card[data-opener="vortex"] .tour-intro-vortex { animation: tour-intro-vortex-arrive 4.8s cubic-bezier(.16, 1, .3, 1) both; }
.tour-intro-card[data-opener="question"] .tour-intro-vortex { opacity: .16; transform: translateX(-50%) scale(1.35); }
.tour-intro-card[data-opener="question"]::before { background: radial-gradient(circle at 66% 24%, #ef625d85 0 4%, transparent 31%), #020408; }
.tour-intro-card[data-opener="question"] .tour-intro-copy h2 { font-size: clamp(70px, 10.7vw, 142px); }
.tour-intro-card[data-opener="question"] .tour-intro-copy { width: min(980px, 100%); }
.tour-intro-card[data-opener="question"] .tour-intro-grid { animation-duration: 3.8s; }

.tour-intro-card[data-opener="impact"] .tour-intro-vortex { display: none; }
.tour-intro-card[data-opener="impact"] .tour-intro-radar {
  opacity: 1;
  animation: tour-intro-radar 2.1s linear infinite;
}
.tour-intro-card[data-opener="impact"] .tour-intro-copy h2 { font-size: clamp(92px, 15vw, 192px); color: #fff; }
.tour-intro-card[data-opener="impact"] .tour-intro-copy > span { color: #9be2db; }
.tour-intro-card[data-opener="impact"] .tour-intro-grid { background-size: 70px 70px; }

.tour-intro-card[data-opener="atlas"]::before {
  background:
    linear-gradient(115deg, transparent 0 18%, #ef625d 18% 19%, transparent 19% 36%, #ef625d4a 36% 62%, transparent 62%),
    linear-gradient(155deg, #070b12 0 38%, #17212e 38% 60%, #05070b 60%);
  animation-name: tour-intro-atlas-sweep;
}
.tour-intro-card[data-opener="atlas"] .tour-intro-vortex,
.tour-intro-card[data-opener="atlas"] .tour-intro-radar { display: none; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream { opacity: 1; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream span { animation: tour-intro-year 2.8s cubic-bezier(.16, 1, .3, 1) both; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream span:nth-child(2) { animation-delay: 120ms; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream span:nth-child(3) { animation-delay: 240ms; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream span:nth-child(4) { animation-delay: 360ms; opacity: 1; }

.tour-intro-card[data-opener="extrude"] .tour-intro-vortex,
.tour-intro-card[data-opener="extrude"] .tour-intro-radar { display: none; }
.tour-intro-card[data-opener="extrude"] .tour-intro-columns { opacity: .85; }
.tour-intro-card[data-opener="extrude"] .tour-intro-copy h2 { text-transform: uppercase; }
.tour-intro-card[data-opener="extrude"]::before { background: linear-gradient(155deg, #071721 0, #090d14 52%, #05070a 100%); }

@keyframes tour-intro-breathe {
  from { transform: scale(1.06) rotate(-1.5deg); filter: saturate(.8); }
  to { transform: scale(1) rotate(0); filter: saturate(1.2); }
}
@keyframes tour-intro-grid-drive {
  from { background-position: 0 80px; opacity: .1; }
  to { background-position: 0 -40px; opacity: .48; }
}
@keyframes tour-intro-vortex-spin { to { rotate: 1turn; } }
@keyframes tour-intro-vortex-arrive {
  0% { opacity: 0; transform: translateX(-50%) translateY(-22%) scale(1.35); filter: blur(14px); }
  22% { opacity: .9; filter: blur(0); }
  100% { opacity: .55; transform: translateX(-50%) translateY(12%) scale(.72); }
}
@keyframes tour-intro-column-rise {
  from { transform: scaleY(.03) translateY(120px); opacity: 0; }
  to { transform: scaleY(1) translateY(0); opacity: 1; }
}
@keyframes tour-intro-radar { to { rotate: 1turn; } }
@keyframes tour-intro-atlas-sweep {
  from { transform: translateX(-12%) scale(1.15); }
  to { transform: translateX(0) scale(1); }
}
@keyframes tour-intro-year {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: .28; transform: translateX(0); }
}
@keyframes tour-intro-copy-punch {
  from { opacity: .58; transform: translateY(24px) scale(1.025); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes tour-intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tour-end-card { position: absolute; z-index: 55; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(18px, 2.5vw, 30px); overflow: hidden; padding: clamp(42px, 7vw, 90px); background:
  radial-gradient(circle at 50% 38%, #253044 0%, #0d131d 38%, #05080d 78%);
  color: #fff; text-align: center; isolation: isolate; }
.tour-end-card[hidden] { display: none; }
.tour-end-card::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .18; background:
  linear-gradient(90deg, transparent 49.85%, #ef625d 50%, transparent 50.15%),
  linear-gradient(0deg, transparent 49.85%, #ef625d 50%, transparent 50.15%);
  background-size: 110px 110px; transform: perspective(600px) rotateX(56deg) scale(1.6) translateY(12%); transform-origin: center bottom; }
.tour-end-card-mark { width: clamp(28px, 4vw, 44px); height: clamp(28px, 4vw, 44px); border-radius: 8px; background: var(--accent); box-shadow: 0 18px 54px #ef625d66; }
.tour-end-card p { max-width: 820px; margin: 0; color: var(--text-secondary); font-size: clamp(26px, 3.8vw, 46px); font-weight: 760; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
.tour-end-card h2 { margin: 0; color: #fff; font-size: clamp(66px, 10vw, 126px); font-weight: 900; letter-spacing: -.065em; line-height: .9; }
.tour-end-card span { color: #ffaaa5; font-size: clamp(20px, 2.8vw, 34px); font-weight: 760; line-height: 1.15; text-wrap: balance; }
.tour-end-card:not([hidden]) > * { animation: tour-end-arrive 900ms cubic-bezier(.16, 1, .3, 1) both; }
.tour-end-card:not([hidden]) > :nth-child(2) { animation-delay: 80ms; }
.tour-end-card:not([hidden]) > :nth-child(3) { animation-delay: 150ms; }
.tour-end-card:not([hidden]) > :nth-child(4) { animation-delay: 220ms; }
@keyframes tour-end-arrive {
  from { opacity: 0; transform: translateY(34px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
body[data-tour-cut="atlas"] .tour-end-card { background: #f1eadc; color: #17120d; box-shadow: inset 0 0 0 14px #17120d; }
body[data-tour-cut="atlas"] .tour-end-card::before { opacity: .09; }
body[data-tour-cut="atlas"] .tour-end-card p { color: #51473d; font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
body[data-tour-cut="atlas"] .tour-end-card h2 { color: #17120d; font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.055em; }
body[data-tour-cut="atlas"] .tour-end-card span { color: #b83f3c; }
.top20-tour-exit { position: absolute; z-index: 52; top: 18px; right: 18px; min-height: 38px; padding: 7px 10px; border: 1px solid #ffffff55; border-radius: 6px; background: #090c12bd; color: #d6dbe2; font-size: 11px; cursor: pointer; opacity: .7; animation: tour-exit-dim 1s 5s forwards; }
.top20-tour-exit[hidden] { display: none; }
.top20-tour-exit:hover, .top20-tour-exit:focus-visible { opacity: 1; animation: none; }
.top20-tour-exit kbd { margin-left: 5px; padding: 2px 5px; border: 1px solid #687386; border-radius: 3px; background: #131b27; }
@keyframes tour-exit-dim { to { opacity: .18; } }
body.tour-active .app-shell { --left-column: 0px; --right-column: 0px; }
body.tour-active .center-stage { --bottom-tray-height: 0px; }
body.tour-active .control-rail,
body.tour-active .detail-rail,
body.tour-active .bottom-tray { visibility: hidden; }
body.tour-active .map-header,
body.tour-active .pane-label,
body.tour-active .map-legend,
body.tour-active .map-player,
body.tour-active .map-navigation,
body.tour-active .basemap-control { opacity: 0; pointer-events: none; }
body.tour-active .map-attribution { z-index: 49; top: 8px; right: 8px; bottom: auto; opacity: .64; }
body.tour-active .map-kpi { z-index: 49; top: 18px; left: 18px; width: min(450px, calc(100% - 36px)); padding: 14px 16px 15px; }
body.tour-active .map-kpi-heading > span { font-size: 11px; }
body.tour-active .map-kpi-heading strong { font-size: 28px; }
body.tour-active .map-kpi-period span { font-size: 11px; }
body.tour-active .map-kpi dt { font-size: 10px; }
body.tour-active .map-kpi dd { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.05em; }

body.tour-active.tour-controls-featured .control-rail {
  position: fixed;
  z-index: 54;
  top: 20px;
  bottom: 20px;
  left: 20px;
  width: min(390px, calc(100vw - 40px));
  height: auto;
  visibility: visible;
  border: 1px solid #65748a;
  border-radius: 12px;
  box-shadow: 0 24px 80px #000d;
}
body.tour-active.tour-controls-featured .center-stage { grid-column: 2; }
body.tour-active.tour-controls-featured .detail-rail { grid-column: 3; }
body.tour-active.tour-controls-featured .control-rail .rail-heading { height: 64px; }
body.tour-active.tour-controls-featured .control-rail .rail-scroll {
  height: calc(100% - 64px);
  overflow: hidden;
}
body.tour-active.tour-controls-featured .mode-section,
body.tour-active.tour-controls-featured .current-view-section,
body.tour-active.tour-controls-featured .presets-section,
body.tour-active.tour-controls-featured .multi-state-picker,
body.tour-active.tour-controls-featured .definition-note,
body.tour-active.tour-controls-featured .control-note,
body.tour-active.tour-controls-featured .partial-note,
body.tour-active.tour-controls-featured .metric-range-control {
  display: none;
}
body.tour-active.tour-controls-featured .control-accordion > summary { min-height: 48px; }
body.tour-active.tour-controls-featured .control-accordion .accordion-content { padding: 12px 14px 14px; }
body.tour-active.tour-controls-featured .nested-control-section { padding-bottom: 10px; }
body.tour-active.tour-controls-featured .field-pair { gap: 8px; }
body.tour-active.tour-controls-featured .field-gap { margin-top: 8px; }
body.tour-active.tour-controls-featured .top20-tour-caption {
  right: 34px;
  bottom: 48px;
  left: auto;
  width: min(610px, calc(100% - 454px));
  transform: none;
}
body.tour-active.tour-controls-featured .top20-tour-caption.tour-caption-enter {
  animation-name: tour-control-caption-arrive;
}
@keyframes tour-control-caption-arrive {
  from { opacity: 0; transform: translateY(30px); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
}

body[data-tour-cut="kinetic"] .map-kpi,
body[data-tour-cut="atlas"] .map-kpi { opacity: 0; }

body[data-tour-cut="kinetic"] .map-stage::after {
  content: "";
  position: absolute;
  z-index: 48;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, #04070bd9 78%, #04070b 100%),
    linear-gradient(90deg, #ef625d24 0 2px, transparent 2px);
  pointer-events: none;
}
body[data-tour-cut="kinetic"] .top20-tour-caption {
  z-index: 50;
  bottom: clamp(38px, 5vh, 68px);
  width: min(1010px, calc(100% - 72px));
  padding: 0 0 0 clamp(24px, 3.5vw, 46px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-tour-cut="kinetic"] .top20-tour-caption::before {
  content: "";
  position: absolute;
  top: .06em;
  bottom: .08em;
  left: 0;
  width: 10px;
  background: var(--accent);
  transform-origin: bottom;
  animation: tour-pulse-rule 660ms cubic-bezier(.16, 1, .3, 1) both;
}
body[data-tour-cut="kinetic"] .top20-tour-caption h2 {
  max-width: 980px;
  font-size: clamp(76px, 11vw, 154px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .8;
  text-shadow: 0 10px 38px #000;
}
body[data-tour-cut="kinetic"] .top20-tour-caption p {
  margin-top: 22px;
  color: #ff8a83;
  font-size: clamp(27px, 3.5vw, 45px);
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1;
  text-shadow: 0 7px 24px #000;
}
body[data-tour-cut="kinetic"] .top20-tour-caption[data-phase="national"] {
  width: min(1010px, calc(100% - 72px));
  display: block;
}
body[data-tour-cut="kinetic"] .top20-tour-caption[data-phase="national"] h2 {
  font-size: clamp(88px, 13vw, 170px);
  line-height: .76;
}
body[data-tour-cut="kinetic"] .top20-tour-caption[data-phase="national"] p {
  margin: 22px 0 0;
  font-size: clamp(32px, 4vw, 52px);
}
body[data-tour-cut="kinetic"] .top20-tour-caption.tour-caption-enter {
  animation: tour-kinetic-arrive 680ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes tour-kinetic-arrive {
  from { opacity: 0; transform: translate(-50%, 42px) skewY(2deg); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; transform: translate(-50%, 0) skewY(0); clip-path: inset(0); }
}
@keyframes tour-pulse-rule {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

body[data-tour-cut="atlas"] .map-stage::after {
  content: "";
  position: absolute;
  z-index: 48;
  inset: 0;
  background: linear-gradient(180deg, #14110c20 0%, transparent 42%, #15110d3d 100%);
  box-shadow: inset 0 0 0 14px #f1eadc;
  pointer-events: none;
}
body[data-tour-cut="atlas"] .top20-tour-caption {
  z-index: 50;
  bottom: clamp(34px, 4.5vh, 60px);
  width: min(980px, calc(100% - 92px));
  padding: clamp(30px, 4vw, 46px) clamp(34px, 5vw, 58px);
  border: 0;
  border-radius: 2px;
  background: #f5f0e6f7;
  box-shadow: 0 24px 70px #1a120a52, inset 0 0 0 1px #261d14;
}
body[data-tour-cut="atlas"] .top20-tour-caption::before {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(34px, 5vw, 58px);
  left: clamp(34px, 5vw, 58px);
  height: 5px;
  background: var(--accent);
  transform-origin: left;
  animation: tour-atlas-rule 900ms cubic-bezier(.16, 1, .3, 1) both;
}
body[data-tour-cut="atlas"] .top20-tour-caption h2 {
  color: #17120d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 7.6vw, 98px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .92;
}
body[data-tour-cut="atlas"] .top20-tour-caption p {
  margin-top: 18px;
  color: #b83f3c;
  font-size: clamp(27px, 3.25vw, 42px);
  font-weight: 850;
  letter-spacing: -.025em;
}
body[data-tour-cut="atlas"] .top20-tour-caption[data-phase="national"] {
  width: min(980px, calc(100% - 92px));
  display: block;
}
body[data-tour-cut="atlas"] .top20-tour-caption[data-phase="national"] h2 {
  font-size: clamp(58px, 7.6vw, 98px);
  line-height: .92;
}
body[data-tour-cut="atlas"] .top20-tour-caption[data-phase="national"] p {
  margin: 18px 0 0;
  font-size: clamp(30px, 3.8vw, 48px);
}
body[data-tour-cut="atlas"] .top20-tour-caption.tour-caption-enter {
  animation: tour-atlas-arrive 900ms cubic-bezier(.16, 1, .3, 1) both;
}
body.tour-active.tour-controls-featured[data-tour-cut="atlas"] .top20-tour-caption.tour-caption-enter {
  animation-name: tour-control-caption-arrive;
}
@keyframes tour-atlas-arrive {
  from { opacity: 0; transform: translate(-50%, 22px) scale(.985); filter: blur(7px); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
}
@keyframes tour-atlas-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.map-navigation { position: absolute; z-index: 12; top: 88px; right: 14px; display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #111722ed; box-shadow: 0 6px 18px #0005; }
.map-navigation button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center; border: 0; border-bottom: 1px solid var(--border); padding: 0; background: transparent; color: var(--text); font-size: 22px; font-weight: 650; cursor: pointer; }
.map-navigation button:last-child { border-bottom: 0; }
.map-navigation button:hover { background: var(--surface-raised); }
.map-navigation svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.basemap-control { position: absolute; z-index: 12; right: 14px; bottom: 14px; display: grid; justify-items: end; gap: 7px; }
.basemap-toggle { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px; background: #111722ed; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.basemap-toggle:hover, .basemap-toggle[aria-expanded="true"] { border-color: var(--focus); }
.basemap-gallery { width: 190px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #111722f5; box-shadow: 0 12px 32px #000a; }
.basemap-gallery[hidden] { display: none; }
.basemap-gallery strong { display: block; padding: 5px 6px 8px; font-size: 12px; }
.basemap-gallery button { width: 100%; min-height: 38px; display: flex; align-items: center; padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; }
.basemap-gallery button:hover { background: var(--surface-raised); color: var(--text); }
.basemap-gallery button[aria-pressed="true"] { background: #253044; color: var(--text); font-weight: 700; }
.basemap-gallery button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: var(--success); }
.multi-state-picker { margin-top: 8px; border: 1px solid var(--border); border-radius: 7px; background: #0d131d; }
.multi-state-picker summary { min-height: 42px; display: flex; align-items: center; padding: 8px 10px; color: var(--text-secondary); font-size: 12px; font-weight: 750; cursor: pointer; }
.multi-state-picker[open] summary { border-bottom: 1px solid var(--border); color: var(--text); }
.state-toggle-grid { max-height: 210px; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 9px; }
.state-toggle-grid label { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 4px; border: 1px solid #303a4c; border-radius: 5px; background: #121a26; color: var(--text-secondary); font-size: 11px; font-weight: 800; cursor: pointer; }
.state-toggle-grid label:has(input:checked) { border-color: var(--focus); background: #24344a; color: #fff; }
.state-toggle-grid input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.map-attribution { position: absolute; z-index: 7; right: 14px; bottom: 98px; max-width: 260px; margin: 0; padding: 3px 5px; border-radius: 3px; background: #090c12cf; color: #b5bdc8; font-size: 9px; line-height: 1.25; text-align: right; }
.map-attribution a { color: inherit; }

.status-overlay { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; background: var(--canvas); transition: opacity 200ms ease-out; }
.status-overlay.done { opacity: 0; pointer-events: none; }
.status-panel { max-width: 360px; padding: 24px; text-align: center; }
.status-panel strong { display: block; margin: 10px 0 5px; font-size: 17px; }
.status-panel p { margin: 0 0 16px; color: var(--text-secondary); line-height: 1.5; }
.status-mark { color: var(--accent); }
.status-overlay.error .status-mark { color: var(--error); }

dialog { width: min(600px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
dialog::backdrop { background: #03050ae8; }
#aboutDialog {
  width: min(920px, calc(100vw - 32px));
  max-height: min(880px, calc(100vh - 32px));
  overflow: hidden;
}
#mapKeysDialog {
  width: min(500px, calc(100vw - 24px));
  max-height: calc(100vh - 104px);
  margin: 72px 16px auto auto;
  border: 2px solid var(--focus);
  box-shadow: 0 22px 70px #000c, 0 0 0 1px #07111f;
}
#mapKeysDialog::backdrop { background: #03050a66; }
.dialog-shell { padding: 22px; }
.help-dialog-shell {
  max-height: min(880px, calc(100vh - 32px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.keys-dialog-shell { padding: 16px; }
.keys-dialog-shell .dialog-heading {
  margin: -16px -16px 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #0a101a;
}
.keys-dialog-shell .desk-label { color: var(--focus); }
.dialog-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.dialog-heading h2 { margin: 4px 0 0; font-size: 22px; }
.dialog-heading h2:focus { outline: 0; }
.dialog-heading h2:focus-visible { text-decoration: underline; text-decoration-color: var(--focus); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.help-dialog-heading {
  position: sticky;
  z-index: 2;
  top: -22px;
  margin: -22px -22px 0;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  background: #111825f2;
  backdrop-filter: blur(14px);
}
.help-dialog-heading h2 { font-size: clamp(22px, 3vw, 30px); }
.dialog-shell p { color: var(--text-secondary); line-height: 1.6; }
.help-intro { max-width: 74ch; margin: 22px 0 18px; font-size: 16px; }
.help-intro strong { color: var(--text); }
.help-signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.help-signal-grid > div { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.help-signal-grid span { display: block; margin-bottom: 7px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.help-signal-grid strong { display: block; font-size: 17px; }
.help-signal-grid p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.help-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.help-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.help-section-number { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #4d5c71; border-radius: 50%; color: var(--accent); font: 800 12px/1 Aptos, "SF Pro Text", system-ui, sans-serif; }
.help-section-heading h3 { margin: 2px 0 0; font-size: 20px; }
.help-eyebrow { margin: 0 !important; color: var(--text-secondary); font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1.2 !important; text-transform: uppercase; }
.help-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: help-step; }
.help-steps li { position: relative; display: grid; gap: 3px; padding: 12px 12px 12px 48px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; counter-increment: help-step; }
.help-steps li::before { content: counter(help-step); position: absolute; top: 12px; left: 12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-weight: 800; }
.help-steps span { color: var(--text-secondary); font-size: 13px; line-height: 1.4; }
.rating-principle { padding: 16px; border-left: 4px solid var(--accent); border-radius: 0 7px 7px 0; background: #1b1617; }
.rating-principle strong { font-size: 16px; }
.rating-principle p { margin: 6px 0 0; }
.help-bullets { display: grid; gap: 9px; margin: 14px 0 0; padding-left: 22px; color: var(--text-secondary); line-height: 1.5; }
.help-bullets li::marker { color: var(--accent); }
.help-history { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.help-history article { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.help-history time { display: block; margin-bottom: 10px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.help-history strong { display: block; font-size: 15px; }
.help-history p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; }
.history-note,
.violent-definition { margin: 12px 0 0; padding: 12px 14px; border-radius: 7px; background: #171f2c; font-size: 13px; }
.history-note strong,
.violent-definition strong { color: var(--text); }
.scale-note { margin: 0 0 12px; font-size: 13px; }
.ef-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; }
.ef-table-wrap:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.ef-scale-table { width: 100%; min-width: 720px; border-collapse: collapse; background: #0c111a; font-size: 13px; }
.ef-scale-table th,
.ef-scale-table td { padding: 10px 12px; border-bottom: 1px solid #2f3949; text-align: left; vertical-align: top; line-height: 1.4; }
.ef-scale-table thead th { position: sticky; top: 0; background: #171f2c; color: var(--text-secondary); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.ef-scale-table tbody tr:last-child th,
.ef-scale-table tbody tr:last-child td { border-bottom: 0; }
.ef-scale-table td:nth-child(2),
.ef-scale-table td:nth-child(3) { white-space: nowrap; }
.ef-badge { min-width: 66px; display: inline-flex; justify-content: center; padding: 4px 7px; border: 1px solid #526077; border-radius: 999px; background: #202a3a; color: var(--text); font-size: 11px; font-weight: 800; }
.ef-0,
.ef-1 { border-color: #4f91a7; background: #173545; }
.ef-2,
.ef-3 { border-color: #c89951; background: #46351d; }
.ef-4,
.ef-5 { border-color: #e76661; background: #521f23; }
.ef-unknown { color: var(--text-secondary); }
.official-references { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 14px 0; padding: 14px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; font-size: 13px; }
.official-references strong { width: 100%; }
.official-references a { color: #8fc9ff; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.official-references a:hover { color: white; }
.shortcut-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.shortcut-guide span { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 12px; }
.shortcut-guide kbd { min-width: 30px; min-height: 30px; display: grid; place-items: center; border: 1px solid #5b687c; border-radius: 5px; background: #0c111a; color: var(--text); font-weight: 800; }
.map-key-guide { margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--border); }
.map-key-guide h3 { margin: 0 0 10px; font-size: 15px; }
.map-key-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.map-key-grid > span { min-width: 0; display: grid; gap: 7px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.map-key-grid b { color: var(--text-secondary); font-size: 12px; }
.key-combo { display: flex; flex-wrap: wrap; gap: 4px; }
.key-combo kbd { min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; padding: 0 6px; border: 1px solid #5b687c; border-radius: 5px; background: #171f2c; color: var(--text); font: 800 12px/1 Aptos, "SF Pro Text", system-ui, sans-serif; box-shadow: inset 0 -2px 0 #080b10; }
.source-details { margin: 14px 0; border-top: 1px solid var(--border); }
.source-details summary { min-height: 44px; display: flex; align-items: center; color: var(--text-secondary); font-weight: 700; cursor: pointer; }
.source-facts { display: grid; grid-template-columns: 1fr auto; gap: 7px 18px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.source-facts dt { color: var(--text-secondary); }
.source-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.dialog-close { width: 100%; margin-top: 6px; }
.feedback-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 16px; background: #03050ae8; }
.feedback-modal { width: min(580px, 100%); max-height: calc(100vh - 32px); overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 24px 70px #000d; }
.feedback-modal-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.feedback-modal-header h2 { margin: 3px 0 0; font-size: 20px; }
.feedback-survey { display: block; width: 100%; height: min(72vh, 580px); border: 0; background: white; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 980px) {
  :root { --rail-width: 300px; }
  :root { --right-rail-width: 330px; }
  :root { --bottom-tray-height: 300px; }
  .map-header h1 { font-size: 19px; }
  .action-button { min-height: 40px; padding: 0 10px; font-size: 12px; }
  .action-label-wide { display: none; }
  .action-label-short { display: inline; }
  .map-legend { width: 230px; }
  .map-player { right: 12px; bottom: 164px; left: 12px; grid-template-columns: auto minmax(180px, 1fr); }
  .map-player-options { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-player-options select,
  .map-player-options label:first-child select { width: 100%; min-width: 0; }
}

@media (max-width: 760px) {
  .app-shell,
  .app-shell.left-collapsed,
  .app-shell.right-collapsed { --left-column: 44px; --right-column: 44px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .control-rail { grid-column: 1; }
  .center-stage { grid-column: 2; width: 100%; height: 100%; --bottom-tray-height: min(52vh, 390px); }
  .center-stage.bottom-collapsed { --bottom-tray-height: 48px; }
  .map-stage { width: 100%; height: 100%; }
  .detail-rail { grid-column: 3; }
  .control-rail,
  .detail-rail { z-index: 25; }
  .app-shell:not(.left-collapsed) .control-rail,
  .app-shell:not(.right-collapsed) .detail-rail { position: fixed; top: 0; bottom: 0; width: min(88vw, 380px); height: 100%; box-shadow: 0 0 28px #03050ad9; }
  .app-shell:not(.left-collapsed) .control-rail { left: 0; }
  .app-shell:not(.right-collapsed) .detail-rail { right: 0; }
  .rail-heading { height: 64px; }
  .rail-scroll { height: calc(100% - 64px); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .rail-resizer { display: none; }
  .left-collapsed .control-rail .rail-heading,
  .right-collapsed .detail-rail .rail-heading { height: 64px; }
  .collapsed-rail-label { height: calc(100% - 64px); padding-top: 16px; }
  .rail-scrim:not([hidden]) { position: fixed; z-index: 24; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: #03050aa8; cursor: default; }
  .map-header { min-height: 162px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px; align-content: start; }
  .map-header h1 { font-size: 17px; }
  .map-header p { max-width: 230px; margin-top: 3px; font-size: 10px; line-height: 1.35; }
  .hub-return { min-height: 20px; margin-bottom: 2px; }
  .map-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .map-actions > .feedback-group { display: none; }
  .action-button { min-width: 0; min-height: 44px; padding: 0 5px; font-size: 10px; }
  .keyboard-help-button kbd { min-width: 20px; min-height: 20px; font-size: 10px; }
  /* This map has one pane and no compare mode — data-mode is hardcoded to
     "explore" and app.js never reads it. The absolutely-positioned,
     opacity-transitioned pane below was inherited from the two-pane Tornado
     layout, and it wrapped the WebGL canvas in a compositing layer that iOS
     declines to paint. Desktop never applied it, which is why the blank map
     was mobile-only. Keep the single pane plain. */
  .map-pane { position: relative; opacity: 1; pointer-events: auto; border: 0; }
  .pane-label { top: 166px; left: 10px; }
  .map-kpi { top: 210px; left: 10px; width: calc(100% - 20px); }
  .map-kpi dd { font-size: clamp(17px, 5.5vw, 22px); }
  .map-navigation { top: 352px; right: 8px; }
  .map-navigation button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  [data-mode="compare"] .pane-label { display: none; }
  [data-mode="compare"] .mobile-scenario-switch { display: grid; top: 166px; }
  .map-legend { left: 8px; bottom: 10px; width: min(230px, calc(100% - 16px)); padding: 9px 10px; }
  .map-player { right: 8px; bottom: 196px; left: 8px; grid-template-columns: auto minmax(0, 1fr); gap: 7px; padding: 7px; }
  .map-player-primary { grid-template-columns: repeat(3, 44px); }
  .map-player-button,
  .map-player-step { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .map-player-options { gap: 4px; }
  .map-player-options label { font-size: 8px; }
  .map-player-options select { min-height: 32px; padding: 3px 18px 3px 5px; font-size: 9px; }
  .map-player-timeline output { font-size: 11px; }
  .map-player-timeline p { display: none; }
  .basemap-control { right: 8px; bottom: 350px; }
  .basemap-toggle { min-height: 44px; padding: 7px 9px; font-size: 10px; }
  .map-attribution { right: 8px; bottom: 392px; max-width: 180px; }
  .bottom-tray-heading { height: 48px; padding: 3px 6px; }
  .bottom-tray-toggle { width: 44px; height: 44px; min-height: 44px; }
  .bottom-tray-heading .desk-label { display: none; }
  .bottom-tray-hint { display: none; }
  .storm-table-panel { height: calc(100% - 48px); }
  .storm-table-toolbar { align-items: stretch; flex-direction: column; gap: 7px; padding: 7px 8px; }
  .storm-table-actions { align-items: stretch; flex-direction: column; }
  .download-button { width: 100%; }
  .storm-table-pages { justify-content: space-between; }
  .storm-table-pages output { min-width: 54px; }
  .top20-tour-caption { bottom: 14px; width: calc(100% - 20px); padding: 20px 18px; border-left-width: 6px; }
  .top20-tour-caption h2 { font-size: clamp(38px, 11vw, 58px); }
  .top20-tour-caption p { margin-top: 10px; font-size: clamp(22px, 6.4vw, 32px); }
  .top20-tour-caption[data-phase="national"] { width: calc(100% - 20px); grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .top20-tour-caption[data-phase="national"] h2 { font-size: clamp(58px, 18vw, 82px); }
  .top20-tour-caption[data-phase="national"] p { margin: 0 0 2px; font-size: clamp(23px, 7vw, 34px); }
  .tour-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tour-capability-grid span { min-height: 42px; font-size: clamp(13px, 3.8vw, 18px); }
  .tour-end-card { padding: 34px 20px; }
  .tour-end-card p { font-size: clamp(24px, 7vw, 34px); }
  .tour-end-card h2 { font-size: clamp(48px, 15vw, 74px); }
  .tour-end-card span { font-size: clamp(17px, 5vw, 24px); }
  .preset-list { grid-template-columns: 1fr 1fr; }
  .preset-list button { min-height: 48px; }
  #aboutDialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .help-dialog-shell { max-height: calc(100vh - 16px); padding: 16px; }
  .help-dialog-heading { top: -16px; margin: -16px -16px 0; padding: 14px 16px; }
  .help-signal-grid,
  .help-history { grid-template-columns: 1fr; }
  .help-section { margin-top: 20px; padding-top: 18px; }
  .help-section-heading { align-items: flex-start; }
}

@media (max-width: 430px) {
  .map-header p { max-width: 185px; }
  .ef-grid { grid-template-columns: repeat(4, 1fr); }
  .preset-list { grid-template-columns: 1fr; }
  .shortcut-guide { grid-template-columns: 1fr; }
  .map-key-grid { grid-template-columns: 1fr; }
  .encoding-actions { grid-template-columns: 1fr; }
  .map-player-options label:first-child select { min-width: 0; }
  #mapKeysDialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
    margin: 64px 8px auto;
  }
  .storm-table-pages label { display: none; }
  .storm-table-pages button { padding-inline: 8px; }
}

@media (hover: none) {
  .map-hover-tooltip { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Hurricane Tracks overrides — the header must stay one line so it never
   collides with the fixed position of the visible-totals panel. */
.map-header > div:first-child { min-width: 0; }
.map-header h1 { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.map-header h1 b { font-size: 12px; font-weight: 700; color: var(--accent); }
.map-header p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-actions { flex-wrap: wrap; justify-content: flex-end; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--text-secondary); font-size: 12px; }
.checkbox-row input { width: 16px; height: 16px; }
.storm-evidence h3 { margin: 0 0 4px; font-size: 19px; }
.storm-evidence h3 b { color: var(--accent); font-weight: 700; }
.evidence-lead { margin: 0 0 12px; color: var(--text-secondary); font-size: 12px; }
.evidence-narrative { margin: 14px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.65; }
.storm-table tbody tr { cursor: pointer; }
.storm-table tbody tr.is-selected { background: #1d2740; color: var(--text); }
.storm-table th button { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.storm-table th button:hover { color: var(--text); }
/* Above phone width the totals panel is dropped for room. On a phone it comes back
   as a collapsed 44px bar instead, because hiding it outright left no way to read
   the event count, the strongest quake, or the nuclear-test total on a phone. */
@media (max-width: 1080px) and (min-width: 761px) { .map-kpi { display: none; } }
/* The legend and the totals panel share the left edge; keep them off each other when
   the storm table is open and the map is short. */
.map-legend { bottom: 16px; }
@media (max-height: 900px) and (min-width: 761px) { .center-stage:not(.bottom-collapsed) .map-kpi { display: none; } }

/* Declared — the hazard picker is a long two-column list of incident types. */
.hazard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 9px; max-height: 260px; overflow: auto; padding-right: 4px; }
.hazard-grid label { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 3px 6px; border-radius: 5px; background: #0c111a; color: var(--text-secondary); font-size: 11.5px; cursor: pointer; }
.hazard-grid label:hover { background: var(--surface-raised); color: var(--text); }
.hazard-grid input { width: 15px; height: 15px; flex: none; }
.hazard-grid span { min-width: 0; }
.hazard-grid small { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.map-header h1 { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.map-header h1 b { font-size: 12px; font-weight: 700; color: var(--accent); }
.map-header p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-actions { flex-wrap: wrap; justify-content: flex-end; }
.storm-evidence h3 { margin: 0 0 4px; font-size: 19px; }
.evidence-lead { margin: 0 0 12px; color: var(--text-secondary); font-size: 12px; }
.storm-table th button { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.map-legend { bottom: 16px; }
@media (max-height: 900px) and (min-width: 761px) { .center-stage:not(.bottom-collapsed) .map-kpi { display: none; } }
/* Above phone width the totals panel is dropped for room. On a phone it comes back
   as a collapsed 44px bar instead, because hiding it outright left no way to read
   the event count, the strongest quake, or the nuclear-test total on a phone. */
@media (max-width: 1080px) and (min-width: 761px) { .map-kpi { display: none; } }

/* A Million Storms — three hazard toggles and a strength slider. */
.segmented.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hazard-toggles { margin-top: 4px; }
.hazard-toggles button { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding-inline: 3px; }
.hazard-toggles .hazard-symbol { width: 20px; height: 20px; background-size: 60px 20px; }
.hazard-toggles .hazard-symbol-hail { background-position: -20px 0; }
.hazard-toggles .hazard-symbol-wind { background-position: -40px 0; }
.hazard-toggles button > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hazard-symbol { width: 24px; height: 24px; flex: none; display: inline-block; background-image: url("./assets/severe-report-icons.svg"); background-repeat: no-repeat; background-size: 72px 24px; filter: drop-shadow(0 1px 1px #000a); }
.hazard-symbol-tornado { background-position: 0 0; }
.hazard-symbol-hail { background-position: -24px 0; }
.hazard-symbol-wind { background-position: -48px 0; }
.report-empty-state { display: grid; gap: 9px; padding: 8px 0 4px; text-align: center; }
.report-empty-state h2 { margin: 0; font-size: 17px; }
.report-empty-state p { margin: 0; color: var(--text-secondary); font-size: 12px; line-height: 1.55; }
.report-empty-symbols { display: flex; justify-content: center; gap: 12px; }
.selected-report-heading { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 11px; align-items: start; margin-bottom: 14px; }
.selected-report-heading .hazard-symbol { width: 32px; height: 32px; background-size: 96px 32px; }
.selected-report-heading .hazard-symbol-hail { background-position: -32px 0; }
.selected-report-heading .hazard-symbol-wind { background-position: -64px 0; }
.selected-report-heading p { margin: 2px 0 0; color: var(--text-secondary); font-size: 11px; }
.selected-report-heading .desk-label { margin: 0 0 3px; color: var(--accent); }
.selected-report-heading h2 { margin: 0; font-size: 21px; line-height: 1.05; }
.report-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.report-facts div { display: contents; }
.report-source a { color: #9cd7ff; }
.report-source a:hover { color: #d8efff; }
.report-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.storm-table tbody tr:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.storm-table tbody tr.is-selected td { background: #1d2740; color: var(--text); }
#minMagnitude { width: 100%; margin-top: 6px; }

/* ---------- Phone: map-first ----------
   Ported from the Tornado Landscape mobile release. The map is the product, so
   every surface collapses to a 44px bar and expands on tap; only one may be open
   at a time. Before this, a 302px-wide map carried a 162px header, a 170px legend
   and a 111px timeline stacked over it, and the totals panel was hidden outright. */

.mobile-more-button,
.map-kpi-mobile-toggle,
.mobile-surface-toggle,
.playback-options-toggle { display: none; }

@media (max-width: 760px) {
  .map-header { min-height: 104px; }
  .map-header h1 b,
  .map-header p { display: none; }
  .map-header h1 { font-size: 16px; }

  .map-actions { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .mobile-more-button { display: block; }
  .map-actions-secondary {
    position: absolute;
    z-index: 18;
    top: calc(100% + 5px);
    right: 0;
    width: min(210px, calc(100vw - 70px));
    display: none;
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 7px;
    border: 1px solid var(--border-strong, #4d5c72);
    border-radius: 8px;
    background: #111722f8;
    box-shadow: 0 14px 32px #03050ad9;
  }
  .map-actions-secondary.mobile-actions-open { display: grid; }
  .map-actions-secondary .action-button { width: 100%; justify-content: center; }
  .map-actions-secondary .feedback-group { display: flex; justify-content: center; gap: 8px; }

  /* Totals: back on the phone, collapsed to one tappable line. */
  .map-kpi {
    display: block;
    top: 108px;
    left: 8px;
    width: calc(100% - 16px);
    padding: 0;
    pointer-events: auto;
  }
  .map-kpi-mobile-toggle {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }
  .map-kpi-mobile-toggle > span:first-child { color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
  .map-kpi-mobile-toggle strong { overflow: hidden; font-size: 12px; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
  .map-kpi-mobile-toggle > span:last-child { color: var(--text-secondary); font-size: 16px; }
  .map-kpi-body { display: none; padding: 0 10px 10px; }
  .map-kpi.mobile-expanded .map-kpi-body { display: block; }
  .map-kpi.mobile-expanded .map-kpi-mobile-toggle > span:last-child { transform: rotate(180deg); }

  .map-navigation { top: 162px; right: 8px; }
  .center-stage.mobile-kpi-open .map-navigation { top: 262px; }

  .mobile-surface-toggle {
    min-height: 44px;
    display: grid;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
  }

  /* Legend: a 104px chip bottom-left; the timeline sits beside it. */
  .map-legend {
    left: 8px;
    bottom: 8px;
    width: 104px;
    height: 44px;
    padding: 0;
    overflow: hidden;
  }
  .map-legend .mobile-surface-toggle { width: 100%; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 0 9px; text-align: left; }
  .map-legend .mobile-surface-toggle > span:first-child { color: var(--text-secondary); font-size: 10px; font-weight: 800; text-transform: uppercase; }
  .map-legend .mobile-surface-toggle strong { display: none; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
  .legend-body { display: none; padding: 0 10px 10px; }
  .map-legend.mobile-expanded { right: 8px; width: auto; height: auto; max-height: min(58vh, 430px); overflow: auto; }
  .map-legend.mobile-expanded .mobile-surface-toggle { grid-template-columns: auto minmax(0, 1fr) auto; }
  .map-legend.mobile-expanded .mobile-surface-toggle strong { display: block; }
  .map-legend.mobile-expanded .legend-body { display: block; }
  .map-legend.mobile-expanded .mobile-surface-toggle > span:last-child { transform: rotate(180deg); }
  .map-legend .height-scale-control input,
  .map-legend .height-scale-reset { min-height: 44px; }

  /* Timeline: collapsed to play + year + a disclosure. */
  .map-player {
    right: 8px;
    bottom: 8px;
    left: 120px;
    height: 44px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 3px;
    padding: 2px 3px;
  }
  .playback-options-toggle { display: grid; grid-column: 3; min-width: 44px; padding: 0; font-size: 18px; }
  .map-player-primary { display: contents; }
  .map-player-primary .map-player-step { display: none; }
  .map-player-timeline { align-self: center; min-width: 0; }
  .map-player-timeline output { display: block; overflow: hidden; font-size: 0; text-overflow: ellipsis; white-space: nowrap; }
  .map-player-timeline output::after { content: attr(data-mobile-label); font-size: 11px; }
  .map-player-timeline input,
  .map-player-options { display: none; }
  .map-player.mobile-expanded {
    left: 8px;
    height: auto;
    grid-template-columns: auto minmax(0, 1fr) 44px;
    gap: 7px;
    padding: 7px;
  }
  .map-player.mobile-expanded .map-player-primary { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; }
  .map-player.mobile-expanded .map-player-primary .map-player-step { display: grid; }
  .map-player.mobile-expanded .map-player-timeline output { font-size: 11px; }
  .map-player.mobile-expanded .map-player-timeline output::after { content: ''; }
  .map-player.mobile-expanded .map-player-timeline input { display: block; }
  .map-player.mobile-expanded .map-player-options { display: grid; grid-column: 1 / -1; }
  .map-player.mobile-expanded .playback-options-toggle { transform: rotate(180deg); }

  /* One surface at a time: the other gets out of the way rather than overlapping. */
  .map-legend.mobile-obscured,
  .map-player.mobile-obscured { display: none; }

  .basemap-control { right: 8px; bottom: 60px; }
  .map-attribution { right: 8px; bottom: 104px; max-width: 180px; }
  .center-stage.mobile-surface-open .basemap-control,
  .center-stage.mobile-surface-open .map-attribution { display: none; }
}

@media (max-width: 760px) {
  /* The collapsed bar already names the measure; don't repeat it inside. */
  .map-legend.mobile-expanded #legendColorTitle { display: none; }
}

/* Quakes — the selected-event card and its actions. */
.evidence-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.evidence-actions button, .evidence-actions a {
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none;
  color: var(--text); background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 12px;
}
.evidence-actions button:hover, .evidence-actions a:hover { border-color: var(--accent); }
.storm-table tr.is-selected { background: #1d2536; }

/* With the right rail open the centre is narrow enough that the full action
   labels wrap into the map. Use the short labels before that happens. */
@media (max-width: 1700px) {
  .app-shell:not(.right-collapsed) .action-label-wide { display: none; }
  .app-shell:not(.right-collapsed) .action-label-short { display: inline; }
}

/* ---------- 3dfire: state chips, Watch Duty action, legend footnote ---------- */
.state-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.state-chip-row:empty { display: none; }
.state-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--text); background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 10px;
}
.state-chip:hover { border-color: var(--accent); }
.state-chip span { color: var(--text-muted); }
.state-chip:hover span { color: var(--accent); }

/* Watch Duty's own red, darkened until white text clears 4.5:1. */
.evidence-actions a.watch-duty-link { color: #fff; background: #bf3527; border-color: #bf3527; font-weight: 700; }
.evidence-actions a.watch-duty-link:hover { background: #a92e21; border-color: #a92e21; color: #fff; }

.legend-footnote { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }

/* Header actions: one uniform row on desktop, exactly like severe and disasters.
   The secondary wrapper exists only for the phone overflow menu. */
@media (min-width: 761px) {
  .map-actions-secondary { display: contents; }
}

/* Selected Fire facts: a ruled table read — muted labels, aligned tabular figures. */
.evidence-facts { gap: 0 14px; padding: 0; border-bottom: none; font-size: 11.5px; }
.evidence-facts span, .evidence-facts b { padding: 7px 0; border-bottom: 1px solid #1d2534; }
.evidence-facts span { color: var(--text-secondary); }
.evidence-facts b { text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.evidence-facts .not-reported { color: var(--text-muted); font-weight: 550; }
.evidence-facts .contain-hot { color: #ff9089; }
.evidence-facts .contain-cool { color: #8fd694; }

/* The two actions are peers: equal width, centered labels. */
.storm-evidence .evidence-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.storm-evidence .evidence-actions button, .storm-evidence .evidence-actions a { text-align: center; padding: 9px 8px; }

/* Never truncate a fire's name: the Largest KPI shrinks and wraps instead of
   clipping, and ranking rows keep their figure pinned to the first line. */
.map-kpi #kpiLargest { font-size: clamp(14px, 1.1vw, 18px); line-height: 1.2; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.ranking-list button { align-items: start; }
.ranking-list button::before { padding-top: 2px; }
.ranking-list .rank-value { white-space: nowrap; padding-top: 1px; }

/* Disaster-officer vitals: the three numbers that matter, readable across the
   room, then the paperwork below. Meter fill reuses the map's containment ramp. */
.fire-vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; }
.fire-vitals .vital b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; line-height: 1.1; }
.fire-vitals .vital b.not-reported { font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding-top: 6px; }
.fire-vitals .vital span { display: block; margin-top: 3px; font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.contain-meter { height: 6px; margin: 10px 0 2px; border-radius: 4px; background: #1d2534; overflow: hidden; }
.contain-meter i { display: block; height: 100%; border-radius: 4px; }
.fire-vitals + .contain-meter + .evidence-facts, .fire-vitals + .evidence-facts { margin-top: 12px; }

.arc-heading { margin: 14px 0 0; font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.arc-heading + .evidence-facts { margin-top: 4px; }
.storm-evidence .evidence-facts b { overflow-wrap: anywhere; }

/* A source-attributed record section: what it is, who reported it, and when they last
   touched it. The IRWIN incident and the WFIGS perimeter keep separate numbers, so the
   badge is the reader's cue that the two tables are not the same measurement. */
.record-source { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); }
.record-source .source-badge { padding: 2px 7px; border: 1px solid #526077; border-radius: 999px; font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: .08em; color: var(--text-secondary); }
.record-source small { margin-left: auto; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: var(--text-muted); }
.record-source + .evidence-facts { margin-top: 0; }

/* KPI card tiles — the hurricane/tornado right-rail standard, verbatim. */
.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.kpi-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px 11px; background: var(--canvas); border: 1px solid var(--border); border-radius: 8px; }
.kpi-tile span { font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.kpi-tile b { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--text); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.kpi-tile b.kpi-alert { color: var(--error); }
.kpi-tile b.not-reported { font-size: 12.5px; font-weight: 600; color: var(--text-muted); padding-top: 4px; }
.kpi-tile b.contain-hot { color: #ff9089; }
.kpi-tile b.contain-cool { color: #8fd694; }
.kpi-tile small { font-size: 11px; color: var(--text-secondary); }
.kpi-grid + .contain-meter { margin-top: 8px; }

/* Fire Shapes control: the drawing choice lives with the legend that explains it. */
.shapes-control { margin: 12px 0 0; padding: 0; border: 0; }
.shapes-control legend { padding: 0 0 6px; font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.shapes-control .segmented + .segmented { margin-top: 4px; }

/* Long values (chapter names, fuels) wrap in their own column instead of
   running over the label — the label keeps a readable minimum width. */
.storm-evidence .evidence-facts { grid-template-columns: minmax(104px, auto) minmax(0, 1fr); }

.header-view-mode { grid-template-columns: repeat(2, minmax(44px, auto)); background: var(--surface-raised); }
.header-view-mode button { min-height: 34px; font-weight: 650; }
.header-view-mode button[aria-pressed="true"] { background: var(--accent); color: #fff; }
@media (max-width: 760px) { .map-actions-secondary .header-view-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); } }