:root {
  --paper: #e4e9e5;
  --surface: #f7f9f7;
  --surface-2: #edf1ee;
  --line: #c6d0cb;
  --ink: #14201d;
  --ink-2: #42544e;
  --ink-3: #5c6d67;
  --chart: #1f6f8b;
  --chart-soft: #d5e4e9;
  --swash: #5f8f86;
  --collision: #c89434;
  --overwash: #b85a2a;
  --inundation: #8c2f39;
  --nodata: #5c6a65;
  --band: #b9c7c1;
  --warn-bg: #f5e7d2;
  --warn-ink: #7a4c13;
  --warn-line: #d9b67a;
  --shadow: 0 1px 2px rgba(20,32,29,.08), 0 8px 24px rgba(20,32,29,.06);
  color-scheme: light;
}

body.theme-dark {
  --paper: #0c1412;
  --surface: #141f1c;
  --surface-2: #1b2825;
  --line: #2c3b37;
  --ink: #dee7e3;
  --ink-2: #9daea8;
  --ink-3: #7a8b85;
  --chart: #5faec7;
  --chart-soft: #1b333c;
  --swash: #7fb0a6;
  --collision: #ddaa4e;
  --overwash: #d4763f;
  --inundation: #c1545e;
  --nodata: #6b7b76;
  --band: #33453f;
  --warn-bg: #2e2515;
  --warn-ink: #e0bc7c;
  --warn-line: #5a4720;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-width: 1080px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", Arial, sans-serif;
  font-size: 13px;
}

/* One-viewport shell: evidence panes may scroll internally, never the application body. */
html, body { width: 100%; min-height: 100dvh; overflow: hidden; }
body { min-width: 0; height: 100dvh; }
.topbar, .run-summary, .storm-timeline, .provenance-rail { min-width: 0; }
.console { min-width: 0; min-height: 0; grid-template-columns: clamp(238px, 21vw, 320px) minmax(420px, 1fr) clamp(300px, 25vw, 390px); }
.pane-left, .pane-right { min-height: 0; }
.pane-left { overflow-y: auto; }
.pane-right { overflow-y: auto; }
button, select, input { font: inherit; }
button, select, input[type="range"], input[type="checkbox"] { cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--chart); outline-offset: 2px; }

/* A7: CLAUDE.md requires this label on the primary display, never only in a footnote.
   At 9.5px on a projector it functionally was one. The leading chip makes it deliberate
   disclosure rather than an apology. */
/* A8: the mark carries from the start page into the console. */
.brand .brand-mark { height: 30px; width: auto; flex: none; }

.fixture-strip b {
  padding: 3px 6px;
  border: 1px solid var(--warn-ink);
  border-radius: 2px;
  background: var(--warn-line);
  color: var(--warn-ink);
  font-weight: 700;
  letter-spacing: .09em;
}
.fixture-strip {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-line);
  color: var(--warn-ink);
  font: 600 11px/1 "IBM Plex Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fixture-strip span { color: var(--warn-ink); opacity: .82; font-weight: 400; letter-spacing: .035em; }

.topbar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 14px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 300px; }
.brand strong { font-size: 15px; letter-spacing: -.025em; }
.brand span { color: var(--ink-3); font-size: 11.5px; }
.mode-switch { display: grid; grid-template-columns: repeat(2, minmax(115px, 1fr)); flex: 0 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); }
.mode-switch button { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding: 6px 10px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink-3); text-align: left; }
.mode-switch button:last-child { border-right: 0; }
.mode-switch button span { font: 600 7.5px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.mode-switch button b { overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mode-switch button:hover { color: var(--ink); }
.mode-switch button.active { box-shadow: inset 0 -3px 0 var(--chart); background: var(--chart-soft); color: var(--chart); }
.event-chip { margin-left: auto; display: flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 5px 8px 5px 10px; color: var(--ink-2); font-size: 11.5px; }
.event-chip span { font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; color: var(--chart); }
.event-chip select { min-width: 214px; border: 0; background: transparent; color: var(--ink-2); font: 600 11px/1.2 "IBM Plex Sans", sans-serif; cursor: pointer; outline: none; }
.header-actions { margin-left: 0; }
.plain-button { border: 1px solid var(--line); color: var(--ink-2); background: var(--surface-2); border-radius: 4px; padding: 6px 10px; font-size: 11px; }
.plain-button:hover { border-color: var(--ink-3); color: var(--ink); }
.plain-button.compact { font-size: 10px; padding: 4px 7px; }

.console { height: calc(100vh - 113px); display: grid; grid-template-columns: 320px minmax(470px, 1fr) 390px; }
.pane { min-width: 0; background: var(--surface); overflow: hidden; }
.pane-left { border-right: 1px solid var(--line); display: flex; flex-direction: column; }
.pane-map { background: var(--surface-2); display: flex; flex-direction: column; }
.pane-right { border-left: 1px solid var(--line); overflow-y: auto; }
.side-section { padding: 13px 15px; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0; color: var(--ink-3); font: 600 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.layer-line { min-height: 25px; display: flex; align-items: center; justify-content: space-between; color: var(--ink-2); font-size: 11.5px; }
.layer-line:first-of-type { margin-top: 7px; }
.layer-line span { display: flex; gap: 6px; align-items: baseline; }
.layer-line em { color: var(--ink-3); font: 400 10px/1 "IBM Plex Mono", monospace; font-style: normal; }
.layer-line select { max-width: 108px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink-2); background: var(--surface-2); font-size: 10.5px; }
.layer-line input { accent-color: var(--chart); width: 13px; height: 13px; margin: 0; }
.layer-line.unavailable { color: var(--ink-3); opacity: .62; }
.layer-line.unavailable::after { content: 'not mapped'; margin-left: auto; color: var(--ink-3); font: 400 8px/1 "IBM Plex Mono", monospace; }
.layer-line.unavailable input { margin-left: 6px; }
.layer-line-note { margin: -2px 0 0; color: var(--ink-3); font-size: 10px; line-height: 1.4; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scenario-section { padding-top: 13px; }
.scenario-control { margin-top: 11px; }
.scenario-control label { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 10.5px; }
.scenario-control label b { color: var(--ink); font: 500 10.5px/1 "IBM Plex Mono", monospace; }
.scenario-control input { width: 100%; height: 15px; margin: 3px 0 0; accent-color: var(--chart); }
.scenario-readout { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--ink-3); }
.scenario-readout b { color: var(--ink); font: 500 10.5px/1 "IBM Plex Mono", monospace; }
.scenario-note { margin: 9px 0 0; color: var(--ink-3); font-size: 10px; line-height: 1.5; }
.inspection-section { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 13px 0 0; }
.inspection-section > .section-title-row { padding: 0 15px; }
.list-count { color: var(--ink-3); font: 400 10px/1 "IBM Plex Mono", monospace; }
.filter-group { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 15px; border-bottom: 1px solid var(--line); }
.filter { padding: 4px 6px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface-2); color: var(--ink-2); font: 400 9.5px/1 "IBM Plex Mono", monospace; }
.filter.active { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.ranked-list { overflow-y: auto; }
.rank-row { width: 100%; display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; text-align: left; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; background: var(--surface); color: var(--ink); }
.rank-row:hover { background: var(--surface-2); }
.rank-row.selected { background: var(--chart-soft); border-left-color: var(--chart); }
.rank-number { padding-top: 2px; color: var(--ink-3); font: 400 10px/1 "IBM Plex Mono", monospace; }
.rank-main strong { display: block; font-size: 11.5px; font-weight: 600; line-height: 1.22; }
.rank-main span { display: block; margin-top: 2px; color: var(--ink-3); font: 400 9.5px/1.2 "IBM Plex Mono", monospace; }
.rank-main em { display: block; margin-top: 2px; color: var(--ink-2); font-size: 9.5px; font-style: normal; line-height: 1.2; }
.chip { align-self: start; padding: 3px 5px; color: #fff; border-radius: 2px; font: 600 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .035em; text-transform: uppercase; }
.chip.Swash { background: var(--swash); }.chip.Collision { background: var(--collision); }.chip.Overwash { background: var(--overwash); }.chip.Inundation { background: var(--inundation); }
.chip.NO_DATA { background: transparent; border: 1px dashed var(--nodata); color: var(--nodata); padding: 2px 4px; }
/* Swash (3.65:1) and Collision (2.71:1) fail contrast with white text and wash out on a
   projector. Ink on those two reaches 4.59:1 and 6.17:1. Overwash and Inundation keep white. */
.chip.Swash, .chip.Collision,
.hover-tooltip .hover-regime.Swash, .hover-tooltip .hover-regime.Collision { color: var(--ink); }

.map-toolbar { height: 45px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
.map-toolbar label { color: var(--ink-3); font: 500 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.map-toolbar select { min-width: 200px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--ink); font-size: 11px; }
.map-note { margin-left: auto; color: var(--ink-3); font: 400 9px/1 "IBM Plex Mono", monospace; text-align: right; }
.map-wrap { position: relative; flex: 1; min-height: 0; }
#map { position: absolute; inset: 0; background: #cadde4; }
body.theme-dark #map { background: #18323b; }
.mapboxgl-ctrl-group { border: 1px solid var(--line) !important; box-shadow: var(--shadow) !important; }
.mapboxgl-ctrl-group button { background-color: var(--surface) !important; }
.mapboxgl-ctrl-icon { filter: none; }
.token-notice, .scenario-banner { position: absolute; top: 13px; left: 13px; z-index: 3; max-width: 330px; padding: 9px 11px; border-radius: 4px; box-shadow: var(--shadow); font-size: 11px; line-height: 1.45; }
.scene-selector { position: absolute; z-index: 8; top: 13px; left: 13px; padding: 8px; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow); }
.scene-selector > span { display: block; margin: 0 0 6px 2px; color: var(--ink-3); font: 600 7.5px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; }
#scene-buttons { display: flex; gap: 4px; }
.scene-button { border: 1px solid var(--line); border-radius: 3px; padding: 5px 7px; background: var(--surface-2); color: var(--ink-2); font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .05em; }
.scene-button.active { border-color: var(--chart); background: var(--chart); color: #fff; }
.scene-button[aria-disabled="true"] { opacity: .55; }
.scene-disabled { margin: 7px 2px 0; color: var(--warn-ink); font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; }
.scene-provenance { position: absolute; z-index: 7; right: 13px; bottom: 13px; max-width: 560px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--surface) 95%, transparent); color: var(--ink-3); font: 400 8px/1.3 "IBM Plex Mono", monospace; text-align: right; }
.scene-provenance b { color: var(--chart); }.scene-provenance em { color: var(--ink-2); font-style: normal; }
.storm-scene { height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 54px 8% 6%; background: radial-gradient(circle at 80% 20%, #e9f0ef, #d6e4e8 58%, #c6d9df); color: var(--ink); }
.storm-scene p { margin: 0; color: var(--chart); font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; }.storm-scene h1 { margin: 10px 0 7px; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.04em; }.storm-scene > div span { color: var(--ink-2); font-size: 12px; }
.storm-scene svg { width: 100%; height: 100%; min-height: 300px; margin-top: 20px; color: var(--ink-3); font: 12px "IBM Plex Mono", monospace; }.storm-scene svg text { fill: currentColor; }
.storm-scene img { width: min(100%, 920px); max-height: 58vh; align-self: center; justify-self: center; margin-top: 14px; object-fit: contain; border: 1px solid var(--line); background: var(--surface); }
.storm-scene footer { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 10px; }.storm-scene footer b { color: var(--chart); font: 600 8px "IBM Plex Mono", monospace; letter-spacing: .06em; }
.raster-scene { position: absolute; inset: 0; overflow: hidden; background: #18211f; }
.raster-scene img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.raster-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.raster-scene p, .raster-scene small { position: absolute; left: 14px; width: calc(44% - 14px); max-width: 680px; box-sizing: border-box; overflow-wrap: anywhere; margin: 0; padding: 7px 9px; background: color-mix(in srgb, var(--surface) 93%, transparent); border: 1px solid var(--line); color: var(--ink); font: 600 9px/1.35 "IBM Plex Mono", monospace; letter-spacing: .035em; }
.raster-scene p { bottom: 39px; }.raster-scene small { bottom: 13px; color: var(--ink-2); font-weight: 400; }
body.context-scene-active .raster-scene p,
body.context-scene-active .raster-scene small { display: none; }
.raster-scene.terrain img { object-fit: cover; background: #d8dfdc; }
.forecast-context-scene { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: 60px clamp(24px, 5vw, 82px) 22px; background: linear-gradient(135deg, #eef4f2, #d6e5e8); color: var(--ink); overflow: hidden; }
.forecast-context-scene header p { margin: 0; color: var(--chart); font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; }.forecast-context-scene header h1 { margin: 9px 0 5px; font-size: clamp(28px, 3.2vw, 48px); letter-spacing: -.045em; }.forecast-context-scene header span { color: var(--ink-2); font: 600 10px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; }
.forecast-context-grid { min-height: 0; display: grid; grid-template-columns: minmax(270px, .8fr) minmax(390px, 1.2fr); gap: clamp(18px, 3vw, 48px); align-items: center; }.forecast-context-map, .forecast-context-chart { min-height: 0; padding: 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 84%, transparent); box-shadow: var(--shadow); }.forecast-context-map svg, .forecast-context-chart svg { display: block; width: 100%; max-height: min(38vh, 330px); }.forecast-context-chart > div { display: grid; gap: 4px; }.forecast-context-chart > div span { color: var(--chart); font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; }.forecast-context-chart > div b { font-size: clamp(18px, 1.8vw, 28px); }.forecast-context-chart small, .forecast-context-chart p { margin: 0; color: var(--ink-2); font-size: 10px; line-height: 1.35; }.forecast-context-chart svg text { fill: var(--ink-3); font: 10px "IBM Plex Mono", monospace; }
.waves-layer-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: var(--chart); font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; }.waves-layer-head small { color: var(--ink-3); font-weight: 400; letter-spacing: 0; }.forecast-context-map canvas { display: block; width: 100%; max-height: min(33vh, 260px); border: 1px solid var(--line); background: #e9efea; cursor: crosshair; image-rendering: auto; }.forecast-context-map > p { min-height: 28px; margin: 8px 0 0; color: var(--ink-2); font-size: 9px; line-height: 1.35; }
.waves-field-selector { display: flex; gap: 4px; margin: 0 0 7px; }.waves-field-selector button { border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px; background: var(--surface-2); color: var(--ink-2); font: 600 8px/1 "IBM Plex Mono", monospace; }.waves-field-selector button.active { border-color: var(--chart); background: var(--chart); color: #fff; }
.forecast-context-scene footer { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); }.forecast-context-scene footer div { display: grid; gap: 4px; }.forecast-context-scene footer b { color: var(--chart); font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; }.forecast-context-scene footer span { color: var(--ink-2); font-size: 10px; line-height: 1.25; }
.forecast-time-controls { display:flex; align-items:center; gap:5px; margin:9px 0 4px; }.forecast-time-controls button { border:1px solid var(--line); background:var(--surface-2); padding:4px 6px; font:600 8px/1 "IBM Plex Mono",monospace; }.forecast-time-controls button.active { background:var(--chart); color:#fff; border-color:var(--chart); }.forecast-time-controls span { margin-left:auto; color:var(--ink-2); font:500 8px/1 "IBM Plex Mono",monospace; }
.guided-theatre { height:100%; padding:72px clamp(28px,7vw,120px) 145px; display:grid; grid-template-rows:auto 1fr auto; background:radial-gradient(circle at 50% 48%,#e7f1ef,#c9dce1 70%); overflow:hidden; }.guided-theatre>p { color:var(--chart); font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; }.guided-theatre svg { width:100%; height:100%; }.source-node rect { fill:#f7f9f7; stroke:#b9c7c1; stroke-width:2; rx:8; }.source-node text { fill:#42544e; font:600 13px "IBM Plex Mono",monospace; }.source-node text:first-of-type { fill:#1f6f8b; }.convergence-line { stroke:#7ea9b5; stroke-width:3; stroke-dasharray:8 7; fill:none; }.segment-label-svg { fill:#14201d; font:600 14px "IBM Plex Mono",monospace; }.guided-theatre footer { color:#42544e; border-top:1px solid #b9c7c1; padding-top:13px; font-size:12px; }.engine-flow { align-self:center; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(7px,1.5vw,22px); }.engine-flow article { min-width:125px; padding:18px 14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); text-align:center; font:600 12px/1.5 "IBM Plex Mono",monospace; box-shadow:var(--shadow); }.engine-flow article small { color:var(--ink-3); font:400 9px/1.3 "IBM Plex Mono",monospace; }.engine-flow i { color:var(--chart); font-size:25px; font-style:normal; }.engine-flow .engine-core { border-color:var(--chart); background:var(--chart-soft); }.engine-flow .pending-output { border-style:dashed; color:var(--ink-2); }
.ireland-locator { position:relative; height:100%; overflow:hidden; background:#071f2c; }.ireland-locator svg { width:100%; height:100%; }.ireland-land polygon { fill:#d8e0d9; stroke:#9aaba2; stroke-width:1.2; }.wexford-highlight polygon { fill:#1f9bb5; stroke:#dff8ff; stroke-width:2; }.ireland-locator circle { fill:#f3b15a; stroke:#fff; stroke-width:3; }.ireland-locator text { fill:#f3fbf9; font:600 13px "IBM Plex Mono",monospace; letter-spacing:.1em; }.ireland-locator>div { position:absolute; left:clamp(28px,6vw,86px); bottom:170px; color:#fff; }.ireland-locator p { margin:0 0 10px; color:#7ed0df; font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.1em; }.ireland-locator h1 { margin:0; font-size:clamp(30px,3.7vw,58px); line-height:1.02; letter-spacing:-.05em; }.ireland-locator span { display:block; margin-top:14px; color:#b9cbd0; font-size:12px; }
.token-notice { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); }
.token-notice code { font-family: "IBM Plex Mono", monospace; }
.scenario-banner { top: auto; bottom: 15px; left: 50%; transform: translateX(-50%); background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); font: 600 10px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
body.seven-minute-demo #whatif-toggle { display: none; }
.tour-start { white-space: nowrap; border-color: var(--chart); color: var(--chart); }
.tour-start[hidden], #theme-toggle[hidden] { display: none !important; }
.journey-reveal[hidden] { display: none !important; }
.journey-reveal[hidden]::after { content: none !important; }
.layer-line:has(#toggle-evidence:disabled) { display: none; }

/* Guided Page 7 route: the map remains the primary object, with compact controls below it. */
body.guided-tour-active .run-summary,
body.guided-tour-active .storm-timeline,
body.guided-tour-active .pane-left,
body.guided-tour-active .pane-right,
body.guided-tour-active .map-toolbar,
body.guided-tour-active .token-notice,
body.guided-tour-active .imagery-control,
body.guided-tour-active .map-legend,
body.guided-tour-active .watch-banner,
body.guided-tour-active .pilot-route-status,
body.guided-tour-active .county-coverage-caption,
body.guided-tour-active .county-inventory-strip,
body.guided-tour-active .county-legend,
body.guided-tour-active .population-legend,
body.guided-tour-active .planning-legend,
body.guided-tour-active .zoning-legend,
body.guided-tour-active .exposure-legend { display: none !important; }
body.guided-tour-active .scene-selector, body.guided-tour-active .scene-provenance { display: flex; }
body.guided-tour-active .scene-selector { top: 14px; left: 18px; }
body.seven-minute-demo.guided-tour-active .scene-selector { display:none; }
body.guided-tour-active .scene-provenance { right: 18px; bottom: 130px; }
body.guided-tour-active .forecast-context-scene { padding-bottom: 126px; }
body.guided-tour-active .journey-reveal,
body.guided-tour-active .event-chip,
body.guided-tour-active .header-actions,
body.guided-tour-active .tour-start { display: none !important; }
body.guided-tour-active .topbar { height: 52px; }
body.guided-tour-active .console { height: calc(100dvh - 114px); display: block; }
body.guided-tour-active .pane-map { height: 100%; }
body.guided-tour-active .map-wrap { height: 100%; }
body.guided-tour-active .outlook-digest { display: none !important; }
body.guided-tour-active[data-surface="digest"] .console { display: none; }
body.guided-tour-active[data-surface="digest"] .outlook-digest { display: flex !important; height: calc(100dvh - 114px); overflow: hidden; padding-bottom: 112px; }
body.guided-tour-active[data-surface="digest"] .outlook-hero { padding: 24px 32px 18px; }
body.guided-tour-active[data-surface="digest"] .outlook-body { padding-bottom: 14px; }
body.guided-tour-active[data-surface="digest"] .outlook-hero { padding-top: 15px; padding-bottom: 12px; }
body.guided-tour-active[data-surface="digest"] .outlook-overline { margin-top: 9px; }
body.guided-tour-active[data-surface="digest"] .outlook-intro { margin-top: 7px; font-size: 11px; }
body.guided-tour-active[data-surface="digest"] .outlook-glance { margin-top: 10px; }
body.guided-tour-active[data-surface="digest"] .outlook-glance article { padding-top: 9px; padding-bottom: 9px; }
body.guided-tour-active[data-surface="digest"] .digest-locator { margin-top: 8px; }
body.guided-tour-active[data-surface="digest"] .outlook-body { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
body.guided-tour-active[data-surface="digest"] .outlook-watch, body.guided-tour-active[data-surface="digest"] .outlook-brief { padding: 12px; }
body.guided-tour-active[data-surface="digest"] .outlook-area { min-height: 92px; padding: 9px; }
.guided-tour { position: fixed; z-index: 20; right: 24px; bottom: 20px; left: 24px; display: grid; grid-template-columns: auto minmax(360px, 1fr) auto; align-items: center; gap: 18px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--chart); border-radius: 7px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 12px 32px rgba(20,32,29,.18); }
.guided-tour[hidden] { display: none; }
.guided-progress { min-width: 142px; color: var(--chart); font: 600 10px/1.25 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.guided-copy h1 { margin: 4px 0 0; font-size: 19px; letter-spacing: -.03em; }
.guided-copy > p:not(.eyebrow) { margin: 5px 0 0; color: var(--ink-2); font-size: 11px; }
.guided-evidence-rail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-top: 10px; color: var(--ink-3); font: 500 8.5px/1.35 "IBM Plex Mono", monospace; letter-spacing: .04em; }
.guided-evidence-rail b { color: var(--ink); font-weight: 600; }
.guided-controls { display: flex; align-items: center; gap: 7px; }
.guided-controls button:disabled { cursor: default; opacity: .42; }
@media (max-width: 980px) { .forecast-context-grid { grid-template-columns: 1fr; gap: 10px; }.forecast-context-map { display: none; }.forecast-context-scene footer { grid-template-columns: 1fr; gap: 7px; } }
.imagery-control { position: absolute; z-index: 2; top: 13px; right: 13px; min-width: 235px; padding: 10px 11px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); }
.imagery-control > div { display: flex; flex-direction: column; gap: 2px; }
.imagery-control strong { font-size: 10.5px; font-weight: 600; }.imagery-control span { color: var(--ink-3); font: 400 9px/1.3 "IBM Plex Mono", monospace; }
.imagery-control label { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; color: var(--ink-3); font: 400 9px/1 "IBM Plex Mono", monospace; }.imagery-control input { width: 125px; accent-color: var(--chart); }
/* A3: the workspace needs the regime key on the map. Top-left is the only clear corner;
   the scale-bar label sits near the frame bottom and would collide at bottom-left. */
.map-wrap.has-workspace .map-legend { right: auto; bottom: auto; left: 13px; top: 13px; }
.map-legend { position: absolute; z-index: 2; right: 13px; bottom: 13px; width: 220px; padding: 11px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); }
.map-legend .eyebrow { padding-bottom: 7px; }
.map-legend > div { display: grid; grid-template-columns: 11px 1fr auto; align-items: center; gap: 6px; padding: 3px 0; color: var(--ink-2); font-size: 10px; }
.map-legend i { width: 10px; height: 10px; border-radius: 50%; }.map-legend i.swash { background: var(--swash); }.map-legend i.collision { background: var(--collision); }.map-legend i.overwash { background: var(--overwash); }.map-legend i.inundation { background: var(--inundation); }.map-legend i.nodata { border: 1px dashed var(--nodata); }
.map-legend small { color: var(--ink-3); font: 400 8.5px/1 "IBM Plex Mono", monospace; }
.mapboxgl-popup-content { padding: 9px 10px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 4px; box-shadow: var(--shadow); font-family: "IBM Plex Sans", sans-serif; font-size: 11px; }.mapboxgl-popup-tip { border-top-color: var(--surface) !important; border-bottom-color: var(--surface) !important; }
.popup-title { display: block; font-weight: 600; }.popup-note { display: block; margin-top: 3px; color: var(--ink-3); font: 400 9px/1.3 "IBM Plex Mono", monospace; }

.inspector { min-height: 100%; }.empty-state { padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 12px; line-height: 1.55; }
.inspector-head { padding: 15px 16px; border-bottom: 1px solid var(--line); }.inspector-head .segment-label { color: var(--ink-3); font: 500 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }.inspector-head h1 { margin: 7px 0 3px; font-size: 19px; letter-spacing: -.03em; }.inspector-head p { margin: 0; color: var(--ink-3); font: 400 10px/1.45 "IBM Plex Mono", monospace; }
.inspector-block { padding: 15px 16px; border-bottom: 1px solid var(--line); }.regime-header { display: flex; align-items: center; gap: 8px; }.regime-header .chip { font-size: 10.5px; padding: 4px 8px; }.sallenger { color: var(--ink-3); font: 400 9.5px/1 "IBM Plex Mono", monospace; }.gloss { margin: 8px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.5; }.reason { margin: 8px 0 0; color: var(--ink-2); font-size: 11.2px; line-height: 1.55; }.reason code { color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 10.5px; }.scenario-change { margin: 9px 0 0; padding: 8px 9px; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 4px; color: var(--warn-ink); font-size: 10.5px; line-height: 1.45; }
.action-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--line); }.action-row span { color: var(--ink-3); font: 500 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }.action-row strong { color: var(--ink); font-size: 11.5px; text-align: right; }
.section-heading { margin: 0 0 9px; color: var(--ink-3); font: 600 9.5px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.envelope-label { display: flex; justify-content: space-between; color: var(--ink-3); font: 400 9.5px/1 "IBM Plex Mono", monospace; }.envelope-track { position: relative; height: 23px; margin: 2px 0 3px; }.envelope-track::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 4px; background: var(--surface-2); border-radius: 3px; }.envelope-band { position: absolute; top: 10px; height: 4px; border-radius: 3px; background: var(--band); }.envelope-central { position: absolute; top: 3px; width: 2px; height: 18px; border-radius: 2px; background: var(--ink); }.envelope-values { display: flex; justify-content: space-between; color: var(--ink-3); font: 400 9.5px/1 "IBM Plex Mono", monospace; }.envelope-values b { color: var(--ink); font-weight: 600; }
.component-table { width: 100%; border-collapse: collapse; font-size: 10.5px; }.component-table th { padding: 0 0 7px; color: var(--ink-3); text-align: left; font: 600 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }.component-table th:last-child, .component-table td:last-child { text-align: right; }.component-table td { padding: 6px 0; border-top: 1px solid var(--line); color: var(--ink-2); vertical-align: top; line-height: 1.35; }.component-table td:last-child { color: var(--ink); font-family: "IBM Plex Mono", monospace; font-size: 9.5px; }.no-data-tag { display: inline-block; padding: 2px 4px; border: 1px dashed var(--nodata); border-radius: 2px; color: var(--nodata); font: 500 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .04em; }
.evidence-item { padding: 10px 0; border-top: 1px solid var(--line); }.evidence-item:first-of-type { border-top: 0; padding-top: 0; }.evidence-item blockquote { margin: 0; padding-left: 9px; border-left: 2px solid var(--chart); color: var(--ink); font-size: 11px; line-height: 1.45; }.evidence-meta { margin: 7px 0 0 11px; color: var(--ink-3); font: 400 9px/1.55 "IBM Plex Mono", monospace; }.evidence-meta b { color: var(--ink-2); font-weight: 500; }.evidence-meta a { color: var(--chart); text-decoration: none; overflow-wrap: anywhere; }
.provenance-mini { margin: 0; padding: 10px 11px; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 4px; color: var(--warn-ink); font-size: 10.5px; line-height: 1.5; }.proxy-grid { display: grid; grid-template-columns: 112px 1fr; row-gap: 7px; font-size: 10.5px; }.proxy-grid dt { color: var(--ink-3); font: 400 9px/1.35 "IBM Plex Mono", monospace; }.proxy-grid dd { margin: 0; color: var(--ink-2); line-height: 1.35; }

.provenance-rail { height: 45px; display: flex; align-items: center; gap: 11px; overflow: hidden; padding: 0 14px; background: var(--ink); color: var(--paper); white-space: nowrap; font: 400 8.8px/1 "IBM Plex Mono", monospace; letter-spacing: .015em; }.provenance-rail span { color: var(--paper); opacity: .86; }.provenance-rail b { font-weight: 600; color: var(--surface); }

@media (max-width: 1250px) { .console { grid-template-columns: 290px minmax(430px, 1fr) 350px; }.brand { min-width: 240px; }.map-note { max-width: 150px; }.provenance-rail { gap: 7px; font-size: 8px; } }
@media (max-height: 700px) { .fixture-strip { height: 18px; }.topbar { height: 43px; }.console { height: calc(100vh - 106px); }.provenance-rail { height: 45px; }.side-section { padding-top: 10px; padding-bottom: 10px; }.scenario-control { margin-top: 7px; }.scenario-note { margin-top: 6px; }.rank-row { padding-top: 6px; padding-bottom: 6px; } }

.fixture-map { display: block; width: 100%; height: 100%; background: #cadde4; }
.fixture-map .fixture-segment { cursor: pointer; transition: opacity .15s ease; }
.fixture-map .fixture-segment:hover { opacity: .72; }
body.theme-dark .fixture-map { background: #18323b; }

/* One stable local canvas for every site evidence context. The raster is an
   SVG image using the exact same project transform as the vector geometry;
   it is never object-fit cropped beneath a separately stretched overlay. */
.stable-site-map { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; background:#e6f0ee; }
.stable-site-map .map-grid path { stroke:#9aafaa; stroke-width:1; opacity:.36; }
.stable-site-map .land-shape { fill:#f7f9f7; opacity:.92; }
.stable-site-map .context-raster { opacity:.84; }
.stable-site-map.scene-terrain .context-raster { opacity:.78; }
.stable-site-map .pilot-line { pointer-events:none; filter:drop-shadow(0 1px 1px rgba(12,31,28,.34)); }
.stable-site-map .pilot-line-hit, .stable-site-map .evidence-point { cursor:pointer; }
.stable-site-map .imagery-footprint { fill:#1f9bb5; fill-opacity:.10; stroke:#0c7280; stroke-width:2; stroke-dasharray:8 6; }
.stable-site-map .imagery-label, .stable-site-map .map-caption { fill:#42544e; font:600 11px "IBM Plex Mono", monospace; letter-spacing:.03em; }
.stable-site-map .imagery-label { fill:#0c7280; font-size:9px; }
.stable-site-map .forcing-overlay { pointer-events:none; }
.stable-site-map .forcing-overlay path { fill:none; stroke:#1f6f8b; stroke-width:2; stroke-dasharray:7 6; opacity:.9; }
.stable-site-map .forcing-overlay circle { fill:#1f6f8b; stroke:#fff; stroke-width:2; }
.stable-site-map .forcing-overlay rect { fill:#f7f3e8; stroke:#1f6f8b; stroke-width:2; }
.stable-site-map .forcing-overlay text { fill:#1f6f8b; font:600 10px "IBM Plex Mono", monospace; paint-order:stroke; stroke:#f7f9f7; stroke-width:3px; }
.site-context-panel { position:absolute; z-index:4; top:84px; right:14px; width:min(270px,34%); display:grid; gap:5px; padding:11px 12px; border:1px solid var(--line); border-left:3px solid var(--chart); border-radius:5px; background:color-mix(in srgb, var(--surface) 94%, transparent); box-shadow:var(--shadow); color:var(--ink-2); font-size:10px; line-height:1.42; }
.site-context-panel b { color:var(--chart); font:600 8.5px/1 "IBM Plex Mono", monospace; letter-spacing:.08em; }
.site-context-panel small { color:var(--ink-3); font:400 8.5px/1.35 "IBM Plex Mono", monospace; }
.site-context-panel.storm-context { border-left-color:#b85a2a; }
.site-context-panel.waves-context { border-left-color:#1f6f8b; }
/* The old before/after comparison has no validated workflow in this slice. */
.imagery-control { display:none !important; }

/* Site A/B now use the self-contained evidence workspace. These legacy
   overlays described a separate renderer and would duplicate or obscure the
   current map state. County and guided views retain their original chrome. */
.map-wrap.has-workspace .scene-selector,
.map-wrap.has-workspace .scene-provenance,
.map-wrap.has-workspace .pilot-route-status,
.map-wrap.has-workspace .watch-banner,
.map-wrap.has-workspace .scenario-banner,
.map-wrap.has-workspace .hover-tooltip,
.map-style-control[hidden] { display:none !important; }

/* Round-two map polish: compact hover treatment, satellite contrast, and fixed-rail responsiveness. */
.hover-tooltip {
  position: absolute;
  z-index: 7;
  width: 210px;
  pointer-events: none;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--chart);
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 95%, transparent);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 10.5px;
  line-height: 1.35;
}
.hover-tooltip strong { display: block; font-size: 11.5px; font-weight: 600; }
.hover-tooltip .hover-id { display: block; margin-top: 2px; color: var(--ink-3); font: 400 9px/1.25 "IBM Plex Mono", monospace; }
.hover-tooltip .hover-regime { display: inline-block; margin-top: 7px; padding: 2px 4px; border-radius: 2px; color: #fff; font: 600 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .035em; text-transform: uppercase; }
.hover-tooltip .hover-action { display: block; margin-top: 5px; color: var(--ink-2); }
.hover-tooltip .hover-regime.NO_DATA { border: 1px dashed var(--nodata); background: transparent; color: var(--nodata); }
.hover-tooltip .hover-regime.Swash { background: var(--swash); }.hover-tooltip .hover-regime.Collision { background: var(--collision); }.hover-tooltip .hover-regime.Overwash { background: var(--overwash); }.hover-tooltip .hover-regime.Inundation { background: var(--inundation); }

/* Mapbox uses these classes only when the selected base style is satellite. */
.map-wrap.is-satellite .map-legend,
.map-wrap.is-satellite .imagery-control { border-color: color-mix(in srgb, var(--line) 72%, #f7f3e8); }
.map-wrap.is-satellite .map-legend { background: color-mix(in srgb, var(--surface) 93%, transparent); }
.map-wrap.is-satellite .hover-tooltip { border-color: color-mix(in srgb, var(--line) 72%, #f7f3e8); }

.provenance-rail { height: 42px; flex-wrap: wrap; align-content: center; column-gap: 10px; row-gap: 2px; overflow: visible; padding-top: 3px; padding-bottom: 3px; white-space: normal; line-height: 1.15; }
.console { height: calc(100vh - 110px); }

@media (max-width: 1320px) {
  body { min-width: 1180px; }
  .console { grid-template-columns: 274px minmax(430px, 1fr) 332px; }
  .brand { min-width: 215px; }
  .brand span { font-size: 10.5px; }
  .topbar { gap: 12px; }
  .map-toolbar { padding-right: 10px; padding-left: 10px; }
  .map-toolbar select { min-width: 190px; }
  .map-note { max-width: 118px; font-size: 8px; }
  .side-section { padding-right: 12px; padding-left: 12px; }
  .inspection-section > .section-title-row, .filter-group { padding-right: 12px; padding-left: 12px; }
  .rank-row { padding-right: 9px; padding-left: 9px; }
  .pane-right .inspector-head, .pane-right .inspector-block { padding-right: 13px; padding-left: 13px; }
  .action-row { padding-right: 13px; padding-left: 13px; }
  .provenance-rail { font-size: 7.8px; column-gap: 7px; }
}

@media (max-height: 700px) {
  .console { height: calc(100vh - 103px); }
  .provenance-rail { height: 42px; }
}

/* Storm Replay: deliberately compact so the control remains part of the operating picture. */
.replay-panel { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.replay-fixture { color: var(--warn-ink); font: 600 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; }
.replay-topline { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.replay-button { min-width: 45px; color: var(--ink); }
.replay-button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.replay-time { color: var(--ink-2); font: 500 9.5px/1 "IBM Plex Mono", monospace; }
.replay-panel input[type="range"] { width: 100%; height: 15px; margin: 5px 0 0; accent-color: var(--chart); }
.replay-envelope { margin-top: 4px; color: var(--ink-3); font: 400 8.5px/1.35 "IBM Plex Mono", monospace; }
.replay-key-hint { margin: 5px 0 0; color: var(--ink-3); font: 500 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .03em; }
@media (max-width: 1320px) { .replay-envelope { font-size: 8px; } .replay-time { font-size: 8.8px; } }
@media (max-height: 700px) { .replay-panel { margin-top: 7px; padding-top: 7px; } .replay-envelope { display: none; } }

/* Round-three county altitude. The same shell remains in place; county is an opening view above the site console. */
[data-county-only] { display: none; }
body.view-county [data-county-only] { display: block; }
body.view-county [data-site-only] { display: none !important; }
body.view-county .pane-left { overflow-y: auto; }
body.view-county .pane-right { overflow-y: auto; }
.county-side-panel { padding: 18px 16px; }
.county-side-panel h2 { margin: 8px 0 7px; color: var(--ink); font-size: 18px; letter-spacing: -.03em; }
.county-side-caption, .county-side-note { margin: 0; color: var(--ink-2); font-size: 11px; line-height: 1.55; }
.county-side-note { margin-top: 13px; color: var(--ink-3); font-size: 10.5px; }
.county-metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 14px; }
.county-metric-grid > div { padding: 9px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; }
.county-metric-grid span { display: block; color: var(--ink-3); font: 500 8px/1.1 "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.county-metric-grid b { display: block; margin-top: 5px; color: var(--ink); font: 600 11px/1.25 "IBM Plex Mono", monospace; }
.county-coverage-caption { position: absolute; z-index: 3; top: 13px; left: 13px; max-width: 330px; padding: 9px 10px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-left: 3px solid var(--swash); border-radius: 4px; box-shadow: var(--shadow); color: var(--ink-2); font-size: 10.5px; line-height: 1.45; }
.county-legend { position: absolute; z-index: 3; right: 13px; top: 13px; width: 182px; padding: 10px 11px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); }
.county-legend .eyebrow { margin-bottom: 7px; }
.county-legend > div { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--ink-2); font-size: 10px; }
.county-legend i { display: inline-block; width: 18px; height: 7px; border-radius: 3px; }
.county-legend i.county-covered { background: #078988; }
.county-legend i.county-gap { background: repeating-linear-gradient(90deg, #4f605d 0 4px, transparent 4px 7px); height: 3px !important; border-radius: 0 !important; }
.county-legend small { display: block; margin-top: 7px; color: var(--ink-3); font: 400 8px/1.35 "IBM Plex Mono", monospace; }
/* Where people live: context layer legend, never a risk layer. Bands and colours match the
   presentation deck's wexford-context frame exactly. */
.population-legend { position: absolute; z-index: 3; right: 13px; bottom: 13px; width: 190px; padding: 10px 11px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); }
.population-legend .eyebrow { margin-bottom: 7px; }
.population-legend > div { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--ink-2); font-size: 10px; }
.population-legend i.pop-band { display: inline-block; width: 18px; height: 7px; border-radius: 3px; }
.population-legend i.pop-0 { background: #e3efee; }
.population-legend i.pop-1 { background: #b4d8d5; }
.population-legend i.pop-2 { background: #7dbcb8; }
.population-legend i.pop-3 { background: #3d9793; }
.population-legend i.pop-4 { background: #0b5f5e; }
.population-legend small { display: block; margin-top: 7px; color: var(--ink-3); font: 400 8px/1.35 "IBM Plex Mono", monospace; }
/* What is being built: context layer legend, never a risk layer. Colours and the
   two-or-more-homes size rule match the presentation deck's wexford-context frame exactly.
   Sits beside the population legend (not stacked) so both can be on at once. */
.planning-legend { position: absolute; z-index: 3; right: 215px; bottom: 13px; width: 200px; padding: 10px 11px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); }
.planning-legend .eyebrow { margin-bottom: 7px; }
.planning-legend > div { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--ink-2); font-size: 10px; }
.planning-legend > div b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.planning-legend i.plan-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.planning-legend i.plan-granted { background: #078988; }
.planning-legend i.plan-refused { background: #c43d6e; }
.planning-legend i.plan-undecided { background: #d09028; }
.planning-legend i.plan-withdrawn { background: #9aa7a5; }
.planning-legend small { display: block; margin-top: 7px; color: var(--ink-3); font: 400 8px/1.35 "IBM Plex Mono", monospace; }

.zoning-legend { position: absolute; z-index: 3; right: 215px; bottom: 219px; width: 232px; padding: 10px 11px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); }
.zoning-legend .eyebrow { margin-bottom: 7px; }
.zoning-legend > div { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--ink-2); font-size: 10px; }
.zoning-legend > div b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.zoning-legend i.zone-sw { display: inline-block; width: 18px; height: 7px; border-radius: 3px; }
.zoning-legend i.zone-residential { background: #078988; }
.zoning-legend i.zone-centre { background: #082018; }
.zoning-legend i.zone-community { background: #d09028; }
.zoning-legend i.zone-open { background: #9cc7a5; }
.zoning-legend i.zone-tourism { background: #c43d6e; }
.zoning-legend i.zone-other { background: #9aa7a5; }
.zoning-legend small { display: block; margin-top: 7px; color: var(--ink-3); font: 400 8px/1.35 "IBM Plex Mono", monospace; }

.exposure-legend { position: absolute; z-index: 3; right: 13px; bottom: 219px; width: 232px; padding: 10px 11px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: 5px; box-shadow: var(--shadow); }
.exposure-legend .eyebrow { margin-bottom: 7px; }
.exposure-legend > div { display: flex; align-items: center; gap: 7px; padding: 3px 0; color: var(--ink-2); font-size: 10px; }
.exposure-legend i.exp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.exposure-legend i.exp-1 { background: #4f9a6a; }
.exposure-legend i.exp-2 { background: #9dbd5a; }
.exposure-legend i.exp-3 { background: #e8c53a; }
.exposure-legend i.exp-4 { background: #ee8a2a; }
.exposure-legend i.exp-5 { background: #c8322b; }
.exposure-legend small { display: block; margin-top: 7px; color: var(--ink-3); font: 400 8px/1.35 "IBM Plex Mono", monospace; }
.exposure-legend .exposure-tag { display: inline-block; margin-top: 8px; padding: 4px 7px; border: 1px solid var(--warn-line); border-radius: 3px; background: var(--warn-bg); color: var(--warn-ink); font: 700 8px/1 "IBM Plex Mono", monospace; letter-spacing: .05em; text-transform: uppercase; }
/* .scene-provenance and .county-inventory-strip were both pinned to bottom:13px, so in
   county view the provenance card sat on top of the inventory tiles and the text bled
   through. Lift it clear of the strip. */
/* The named-storm strip: five cards, of which only Kathleen is a real button. Ashley, Bert,
   Darragh and Chandra are inert <article> elements reading "DAMAGE RECORD: UNDER RESEARCH",
   which says "we did not finish" rather than "the public record is incomplete". The 87-storm
   story is told far better on deck slide 5. Costs 71px of the map height we are short of. */
/* Provenance ticker. The rail is nowrap/overflow:hidden and its content overruns the viewport
   at 1366 and below, so the tail was silently truncated. Scrolling reveals all of it and reads
   as a live instrument rather than a cut-off label. 64s is deliberately slow: perceptible if
   you look, ignorable while someone is talking over it. */
.provenance-rail { position: relative; }
.provenance-rail > .rail-track {
  display: inline-flex; align-items: center; gap: 11px; white-space: nowrap;
  animation: coastlens-rail-scroll 64s linear infinite;
  will-change: transform;
}
.provenance-rail:hover > .rail-track,
.provenance-rail:focus-within > .rail-track { animation-play-state: paused; }
@keyframes coastlens-rail-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .provenance-rail > .rail-track { animation: none; }
}

#storm-timeline { display: none !important; }

/* The map is short (377px) and wide, so it fits to height and letterboxes ~150px of dead
   space each side even with both rails open. Vertical is the scarce dimension. Move the
   source inventory out of the horizontal strip along the bottom, where it cost 71px of map
   height, into that unused left margin as a column. */
body.view-county .county-inventory-strip {
  top: 78px; bottom: 13px; left: 22px; right: auto;
  width: 156px; flex-direction: column; gap: 6px;
  overflow-y: auto; overflow-x: hidden;
}
body.view-county .inventory-tile { flex: 0 0 auto; min-height: 0; padding: 6px 8px; }
body.view-county .inventory-tile strong,
body.view-county .inventory-tile b { font-size: 10.5px; line-height: 1.25; }
body.view-county .scene-provenance { bottom: 13px; max-width: 470px; }
.county-inventory-strip { position: absolute; z-index: 4; right: 13px; bottom: 13px; left: 13px; display: flex; gap: 7px; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.inventory-tile { flex: 0 0 154px; min-height: 67px; padding: 8px 9px; text-align: left; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: var(--shadow); color: var(--ink); }
.inventory-tile:hover:not([disabled]) { border-color: var(--chart); }
.inventory-tile[aria-pressed="false"] { opacity: .72; }
.inventory-tile[disabled] { cursor: default; opacity: .83; }
/* Sentinel-1 SAR and GTSM-ERA5 are mode:inventory with no layer_key, deliberately: the SAR
   orbit pair is not comparable and the surge reanalysis ends in 2024. Rendered in the same
   card style as the working toggles they read as dead buttons, so mark them as considered
   rather than broken. */
.inventory-tile[disabled] { background: transparent; border-style: dashed; box-shadow: none; }
.inventory-tile[disabled] strong, .inventory-tile[disabled] b { color: var(--ink-3); font-weight: 500; }
.inventory-tile strong { display: block; font-size: 10px; line-height: 1.18; }
.inventory-tile span { display: block; margin-top: 4px; color: var(--ink-3); font: 400 8px/1.3 "IBM Plex Mono", monospace; }
.inventory-tile em { display: inline-block; margin-top: 5px; padding: 2px 3px; border-radius: 2px; background: var(--chart-soft); color: var(--chart); font: 600 7.5px/1 "IBM Plex Mono", monospace; letter-spacing: .05em; font-style: normal; text-transform: uppercase; }
.inventory-tile em.inventory-only { border: 1px dashed var(--nodata); background: transparent; color: var(--nodata); }
.county-status-chip { padding: 4px 6px; border: 1px solid var(--swash); border-radius: 2px; color: var(--swash); font: 600 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .05em; }
.county-site-actions { display: grid; gap: 7px; }
.county-site-button { width: 100%; text-align: left; }
.fixture-site-marker { cursor: pointer; }
.fixture-site-marker:hover circle { stroke: #f4e5b6; stroke-width: 4; }

.storm-timeline { height: 86px; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 9px 14px; background: var(--surface); border-top: 1px solid var(--line); scrollbar-width: thin; }
.storm-card { flex: 0 0 192px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; gap: 3px 7px; padding: 8px 9px; text-align: left; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2); color: var(--ink); }
.storm-card.clickable { cursor: pointer; }
.storm-card.clickable:hover { border-color: var(--chart); box-shadow: var(--shadow); }
.storm-card strong { font-size: 11px; }
.storm-card time { color: var(--ink-3); font: 400 8.5px/1 "IBM Plex Mono", monospace; }
.storm-card .storm-status { grid-column: 1 / -1; align-self: start; color: var(--chart); font: 600 8px/1.25 "IBM Plex Mono", monospace; letter-spacing: .035em; }
.storm-card .storm-status.under-research { color: var(--collision); }
.storm-card .storm-status.blocked { color: var(--inundation); }
.storm-card .storm-fixture { align-self: start; color: var(--warn-ink); font: 600 7.5px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; }
body.view-county .provenance-rail { height: 42px; }

@media (max-width: 1320px) {
  .county-coverage-caption { max-width: 280px; font-size: 9.5px; }
  .county-legend { width: 164px; }
  .inventory-tile { flex-basis: 142px; }
  .storm-card { flex-basis: 178px; }
}
@media (max-height: 800px) {
  .storm-timeline { height: 71px; padding-top: 6px; padding-bottom: 6px; }
  .storm-card { min-height: 55px; padding: 6px 8px; }
  .storm-card .storm-status { font-size: 7.3px; }
  .county-inventory-strip { bottom: 8px; }
  .inventory-tile { min-height: 56px; padding: 6px 7px; }
  .inventory-tile span { display: none; }
  .county-coverage-caption { max-width: 250px; }
}

/* These all set display explicitly elsewhere, which beats the browser default for [hidden],
   so hiding them from JS silently did nothing. pilot-route-status was missing from this
   list, which is why "9 pilot segments · engine results required" kept showing in county
   view underneath the source inventory despite being set hidden. */
#county-inventory[hidden], #storm-timeline[hidden], #county-coverage-caption[hidden],
#county-legend[hidden], #pilot-route-status[hidden] { display: none !important; }

.map-style-control { display: flex; align-items: center; gap: 5px; color: var(--ink-3); font: 500 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.map-style-control select { min-width: 82px; padding: 4px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--ink); font: 400 10px/1 "IBM Plex Sans", sans-serif; text-transform: none; letter-spacing: normal; }
@media (max-width: 1320px) { .map-style-control { font-size: 8px; } .map-style-control select { min-width: 72px; } }

/* Unified event journey: historical GIS first, then an in-place council outlook reveal. */
.topbar { height: 56px; gap: 14px; }
.brand { min-width: 260px; }
.journey-reveal { display: flex; min-width: 176px; flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 30px 6px 10px; border: 1px solid var(--chart); border-radius: 5px; background: var(--chart-soft); color: var(--ink); position: relative; text-align: left; }
.journey-reveal::after { content: "→"; position: absolute; top: 50%; right: 10px; color: var(--chart); transform: translateY(-50%); }
.journey-reveal:hover { box-shadow: var(--shadow); }
.journey-reveal span { color: var(--chart); font: 600 7.5px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.journey-reveal b { font-size: 10.5px; font-weight: 600; line-height: 1.1; }
.event-chip { min-width: 0; max-width: 280px; }
.event-chip b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.header-actions { display: flex; flex-shrink: 0; gap: 6px; }
.header-actions .plain-button { white-space: nowrap; }

.run-summary { height: 70px; display: grid; grid-template-columns: minmax(245px, 1.35fr) repeat(5, minmax(130px, 1fr)); align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--line); }
.journey-line { display: grid; grid-template-columns: auto 1fr; align-content: center; column-gap: 7px; row-gap: 3px; padding: 9px 14px; border-right: 1px solid var(--line); }
.journey-line span { color: var(--chart); font: 600 7.5px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.journey-line b { color: var(--ink); font-size: 11px; font-weight: 600; }
.journey-line i { grid-column: 1 / -1; height: 1px; margin: 2px 0; background: linear-gradient(90deg, var(--chart), var(--line)); }
.run-fact { min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px; border-right: 1px solid var(--line); }
.run-fact > span { color: var(--ink-3); font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.run-fact b { overflow: hidden; margin-top: 5px; color: var(--ink); font-size: 14px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.run-fact small { overflow: hidden; margin-top: 4px; color: var(--ink-3); font: 400 9px/1.15 "IBM Plex Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.run-fact.emphasis { box-shadow: inset 3px 0 0 var(--chart); background: color-mix(in srgb, var(--chart-soft) 48%, var(--surface)); }

.console { height: calc(100dvh - 188px); }
.mode-context { margin-top: 9px; padding: 8px 9px; border: 1px solid var(--line); border-left: 3px solid var(--chart); border-radius: 3px; background: var(--surface-2); color: var(--ink-2); font-size: 9.5px; line-height: 1.4; }
[data-whatif-only] { display: none !important; }
body[data-mode="whatif"] [data-whatif-only] { display: flex !important; }
body[data-mode="whatif"] p[data-whatif-only] { display: block !important; }
body[data-mode="whatif"] .replay-panel { display: none; }

.watch-banner { position: absolute; z-index: 4; top: 13px; left: 50%; max-width: 360px; transform: translateX(-50%); padding: 9px 11px; border: 1px solid var(--line); border-left: 4px solid var(--collision); border-radius: 4px; background: color-mix(in srgb, var(--surface) 95%, transparent); box-shadow: var(--shadow); color: var(--ink-2); font-size: 10.5px; line-height: 1.4; }
.watch-banner b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 11px; }
.watch-banner small { color: var(--ink-3); font: 400 8.5px/1.3 "IBM Plex Mono", monospace; }
.pilot-route-status { position: absolute; z-index: 3; left: 13px; bottom: 13px; display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: var(--shadow); }
.pilot-route-status b { color: var(--chart); font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; }
.pilot-route-status span { color: var(--ink-3); font-size: 9px; }

.inspector-tabs { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: repeat(2, 1fr); padding: 7px; border-bottom: 1px solid var(--line); background: var(--surface); }
.inspector-tab { border: 0; border-bottom: 2px solid transparent; padding: 7px 5px; background: transparent; color: var(--ink-3); font: 600 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.inspector-tab:hover { color: var(--ink); }
.inspector-tab.active { border-bottom-color: var(--chart); color: var(--chart); }
.briefing-kicker { display: inline-block; margin-bottom: 9px; padding: 3px 5px; border: 1px solid var(--warn-line); color: var(--warn-ink); font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; }
.briefing-lead { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.5; }
.change-list, .briefing-list { margin: 0; padding-left: 17px; color: var(--ink-2); font-size: 11px; line-height: 1.5; }
.change-list li, .briefing-list li { margin: 6px 0; }
.change-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 10.5px; }
.change-row b { color: var(--ink); font: 500 9px/1.35 "IBM Plex Mono", monospace; text-align: right; }

.outlook-digest { display: none; height: calc(100dvh - 118px); overflow-y: auto; background: var(--paper); }
body[data-mode="forecast"][data-surface="digest"] .run-summary,
body[data-mode="forecast"][data-surface="digest"] .console,
body[data-mode="forecast"][data-surface="digest"] .storm-timeline { display: none; }
body[data-mode="forecast"][data-surface="digest"] .outlook-digest { display: flex; flex-direction: column; }
body[data-mode="forecast"][data-surface="digest"] .journey-reveal::after { content: "↗"; }

.outlook-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: end; padding: 28px 34px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.outlook-status { display: inline-block; padding: 4px 6px; border: 1px solid var(--warn-line); border-radius: 3px; background: var(--warn-bg); color: var(--warn-ink); font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; }
.outlook-overline { margin: 16px 0 5px; color: var(--chart); font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.outlook-hero h1 { margin: 0; color: var(--ink); font-size: clamp(27px, 3vw, 44px); line-height: 1.02; letter-spacing: -.045em; }
.outlook-intro { max-width: 760px; margin: 12px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.outlook-actions { display: flex; flex-direction: column; gap: 7px; min-width: 190px; }
.outlook-evidence-ribbon { display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 34px 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.outlook-evidence-ribbon article { min-width: 0; padding: 11px 15px; border-right: 1px solid var(--line); }
.outlook-evidence-ribbon article:last-child { border-right: 0; }
.outlook-evidence-ribbon span { display: block; color: var(--chart); font: 600 7.5px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.outlook-evidence-ribbon b { display: block; margin-top: 6px; color: var(--ink); font-size: 11px; line-height: 1.25; }
.outlook-evidence-ribbon small { display: block; margin-top: 4px; color: var(--ink-3); font-size: 8.5px; line-height: 1.3; }
.outlook-evidence-ribbon .no-data { background: var(--surface-2); }
.outlook-evidence-ribbon .no-data span, .outlook-evidence-ribbon .no-data b { color: var(--nodata); }
.outlook-evidence-ribbon[hidden], .outlook-dependency-rail[hidden] { display: none !important; }
.primary-button { padding: 9px 13px; border: 1px solid var(--chart); border-radius: 4px; background: var(--chart); color: #fff; font-size: 11px; font-weight: 600; }
.primary-button:hover { filter: brightness(.94); }

.outlook-glance { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 34px 0; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); box-shadow: var(--shadow); }
.outlook-glance article { min-width: 0; padding: 15px 17px; border-right: 1px solid var(--line); }
.outlook-glance article:last-child { border-right: 0; }
.outlook-glance span { display: block; color: var(--ink-3); font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.outlook-glance b { display: block; overflow: hidden; margin-top: 7px; color: var(--ink); font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.outlook-glance small { display: block; margin-top: 5px; color: var(--ink-3); font-size: 9.5px; }
.digest-locator { display: flex; align-items: center; gap: 9px; margin: 12px 34px 0; padding: 8px 11px; border: 1px solid var(--line); border-left: 3px solid var(--chart); background: var(--surface); color: var(--ink-3); font: 600 8.5px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; }
.digest-locator i { display: block; width: 46px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, #aab5b0 0 25%, var(--chart) 25% 72%, #aab5b0 72%); }
.digest-locator b { color: var(--ink); font-weight: 600; }
.digest-locator[hidden] { display: none !important; }

.outlook-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .72fr); gap: 18px; min-height: 0; padding: 18px 34px; }
.outlook-watch, .outlook-brief { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.outlook-heading-row { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.outlook-heading-row h2, .outlook-brief h2 { margin: 6px 0 0; font-size: 19px; letter-spacing: -.03em; }
.outlook-heading-row > span { padding: 3px 5px; border: 1px dashed var(--nodata); color: var(--ink-3); font: 600 7.5px/1 "IBM Plex Mono", monospace; letter-spacing: .06em; }
.outlook-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.outlook-area { min-width: 0; min-height: 186px; display: flex; flex-direction: column; padding: 14px; text-align: left; border: 1px solid var(--line); border-top: 4px solid var(--area-colour, var(--chart)); border-radius: 5px; background: var(--surface-2); color: var(--ink); }
.outlook-area.Swash { --area-colour: var(--swash); }
.outlook-area.Collision { --area-colour: var(--collision); }
.outlook-area.Overwash { --area-colour: var(--overwash); }
.outlook-area.Inundation { --area-colour: var(--inundation); }
.outlook-area:hover { border-right-color: var(--chart); border-bottom-color: var(--chart); border-left-color: var(--chart); box-shadow: var(--shadow); }
.outlook-area > span { color: var(--ink-3); font: 600 7.5px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.outlook-area h3 { margin: 7px 0 3px; font-size: 14px; line-height: 1.2; }
.outlook-area .outlook-area-id { color: var(--ink-3); font: 400 8.5px/1 "IBM Plex Mono", monospace; }
.outlook-area p { margin: 13px 0 0; color: var(--ink-2); font-size: 10.5px; line-height: 1.45; }
.outlook-area footer { margin-top: auto; padding-top: 12px; color: var(--chart); font-size: 10px; font-weight: 600; }
.outlook-gap { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; padding: 10px 12px; border: 1px dashed var(--nodata); border-radius: 4px; color: var(--ink-3); font-size: 10px; line-height: 1.4; }
.outlook-gap b { color: var(--ink-2); }

.outlook-brief > p:not(.eyebrow) { margin: 11px 0 0; color: var(--ink-2); font-size: 11px; line-height: 1.55; }
.outlook-consideration { margin-top: 18px; padding: 13px; border-left: 4px solid var(--chart); background: var(--chart-soft); }
.outlook-consideration span { display: block; color: var(--chart); font: 600 8px/1 "IBM Plex Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }
.outlook-consideration b { display: block; margin-top: 7px; color: var(--ink); font-size: 12px; line-height: 1.4; }
.outlook-notice { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--warn-line); border-radius: 4px; background: var(--warn-bg); color: var(--warn-ink); }
.outlook-notice b { font-size: 10.5px; }
.outlook-notice p { margin: 5px 0 0; font-size: 9.5px; line-height: 1.45; }
.text-button { margin-top: 14px; padding: 0; border: 0; background: transparent; color: var(--chart); font-size: 10.5px; font-weight: 600; text-align: left; }
.text-button:hover { text-decoration: underline; }
.outlook-dependency-rail { display: flex; justify-content: space-between; gap: 16px; padding: 9px 34px; border-top: 1px solid var(--line); background: var(--surface-2); color: var(--ink-3); font: 400 8px/1.3 "IBM Plex Mono", monospace; }
.outlook-dependency-rail b { color: var(--ink-2); }

@media (max-width: 1380px) {
  .brand { min-width: 205px; }
  .brand span { display: none; }
  .mode-switch { grid-template-columns: repeat(2, minmax(92px, 1fr)); }
  .mode-switch button { padding-right: 7px; padding-left: 7px; }
  .journey-reveal { min-width: 162px; }
  .event-chip { max-width: 220px; }
  .run-summary { grid-template-columns: minmax(205px, 1.2fr) repeat(5, minmax(115px, 1fr)); }
  .run-fact { padding-right: 7px; padding-left: 7px; }
  .run-fact b { font-size: 12px; }
  .run-fact small { font-size: 8.5px; }
  .outlook-hero { padding-right: 24px; padding-left: 24px; }
  .outlook-evidence-ribbon { margin-right: 24px; margin-left: 24px; }
  .outlook-glance { margin-right: 24px; margin-left: 24px; }
  .outlook-body { padding-right: 24px; padding-left: 24px; }
  .outlook-dependency-rail { padding-right: 24px; padding-left: 24px; }
}

@media (max-height: 760px) {
  .topbar { height: 50px; }
  .run-summary { height: 64px; }
  .console { height: calc(100vh - 172px); }
  .journey-line { padding-top: 6px; padding-bottom: 6px; }
  .run-fact { padding-top: 5px; padding-bottom: 5px; }
  .mode-context { display: none; }
  .outlook-digest { height: calc(100vh - 110px); }
  .outlook-hero { padding-top: 16px; padding-bottom: 14px; }
  .outlook-intro { margin-top: 7px; font-size: 11px; }
  .outlook-evidence-ribbon { margin-top: 8px; }
  .outlook-evidence-ribbon article { padding-top: 8px; padding-bottom: 8px; }
  .outlook-glance { margin-top: 10px; }
  .outlook-glance article { padding-top: 10px; padding-bottom: 10px; }
  .outlook-body { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .outlook-watch, .outlook-brief { padding: 13px; }
  .outlook-area { min-height: 156px; padding: 10px; }
}

/* Presentation-ready application shell: one viewport, token-free map, optional work rails. */
body {
  --left-rail-width: clamp(245px, 19vw, 285px);
  --right-rail-width: clamp(300px, 23vw, 350px);
}
.fixture-strip { height: 20px; }
.topbar { height: 52px; }
/* The first status cell divides the rest of the bar evenly, so its right edge never met the
   left rail. Pin it to the same --left-rail-width the console grid uses and the two
   vertical rules line up. */
.run-summary { height: 64px; grid-template-columns:
  max(var(--left-rail-width), 210px) repeat(3, minmax(0, 1fr)) max(var(--right-rail-width), 210px); }
.journey-line { display: none; }
.run-fact { padding: 6px 10px; }
.run-fact b { margin-top: 4px; font-size: 14px; }
.run-fact small { margin-top: 3px; }
.console {
  height: calc(100dvh - 160px);
  grid-template-columns: var(--left-rail-width) minmax(0, 1fr) var(--right-rail-width);
  transition: grid-template-columns .22s ease;
}
.provenance-rail { height: 32px; flex-wrap: nowrap; overflow: hidden; padding-top: 0; padding-bottom: 0; white-space: nowrap; }
body.view-county .provenance-rail { height: 32px; }
/* The edge handles replace these. Hidden rather than removed from the DOM because
   setPaneCollapsed() still writes their label and aria-pressed state. */
#toggle-left-pane, #toggle-right-pane { display: none !important; }

.home-link { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; margin-right: 8px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink-2);
  font-size: 11px; text-decoration: none; white-space: nowrap; }
.home-link:hover { border-color: var(--chart); color: var(--ink); }
.home-link:focus-visible { outline: 2px solid var(--chart); outline-offset: 1px; }

.rail-handle {
  position: absolute; z-index: 8; top: 50%; transform: translateY(-50%);
  width: 14px; height: 58px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--ink-3);
  cursor: pointer; font-size: 15px; line-height: 1; box-shadow: var(--shadow);
}
.rail-handle span { display: inline-block; transition: transform .15s ease; }
.rail-handle:hover { color: var(--ink); border-color: var(--chart); }
.rail-handle:focus-visible { outline: 2px solid var(--chart); outline-offset: 1px; }
.rail-handle-left { left: 0; border-left: 0; border-radius: 0 5px 5px 0; }
.rail-handle-right { right: 0; border-right: 0; border-radius: 5px 0 0 5px; }
body.left-collapsed .rail-handle-left span,
body.right-collapsed .rail-handle-right span { transform: rotate(180deg); }

body.left-collapsed { --left-rail-width: 0px; }
body.right-collapsed { --right-rail-width: 0px; }
body.left-collapsed .pane-left,
body.right-collapsed .pane-right { visibility: hidden; border: 0; }
.pane-left, .pane-right { transition: visibility .22s ease; }
.map-toolbar { gap: 9px; height: 43px; padding: 0 10px; }
.map-toolbar select { min-width: 180px; }
.rail-toggle {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 600 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.rail-toggle:hover { border-color: var(--chart); color: var(--chart); }
#toggle-right-pane { margin-left: auto; }
.map-note { margin-left: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-trigger { white-space: nowrap; }
.fixture-map { background: #d9e7e7; }
.map-wrap.is-satellite .fixture-map { filter: saturate(.72) contrast(1.1) brightness(.78); }
body.context-scene-active .watch-banner,
body.context-scene-active .pilot-route-status,
body.context-scene-active .map-legend,
body.context-scene-active .county-inventory-strip,
body.context-scene-active .county-legend,
body.context-scene-active .population-legend,
body.context-scene-active .planning-legend,
body.context-scene-active .zoning-legend,
body.context-scene-active .exposure-legend { display: none !important; }
body.context-scene-active .scene-provenance { right: 12px; bottom: 10px; max-width: 44%; }
body.context-scene-active .storm-scene footer { display: none; }
.storm-scene { grid-template-rows: auto minmax(0, 1fr); padding: 54px 4% 34px; }
.storm-scene img { height: 100%; max-height: 100%; min-height: 0; margin-top: 8px; }
.forecast-context-scene { gap: 8px; padding: 54px clamp(20px, 4vw, 62px) 34px; }
.forecast-context-grid { gap: clamp(12px, 2vw, 28px); }
.forecast-context-map, .forecast-context-chart { padding: 10px; }
.forecast-context-map canvas { max-height: min(29vh, 220px); }
.forecast-context-chart svg { max-height: min(23vh, 180px); }
.forecast-context-scene footer { display: none; }

@media (max-width: 1180px) {
  .brand span, .map-note, .event-chip, .tour-start { display: none; }
  .mode-switch { grid-template-columns: repeat(2, minmax(86px, 1fr)); }
}
@media (max-height: 760px) {
  .topbar { height: 48px; }
  .run-summary { height: 60px; }
  .console { height: calc(100dvh - 152px); }
  .provenance-rail, body.view-county .provenance-rail { height: 32px; }
}

/* The council report button no longer opens a full-screen viewer (removed 9 September 2026).
   Its only feedback is a temporary label swap, so a click never reads as a dead control and
   nothing new is drawn into the crowded topbar. min-width holds the row steady during the swap. */
.report-trigger { min-width: 186px; }