:root { --ink:#183b3d; --muted:#6b7e7c; --line:#e1e9e5; --cyan:#087f79; --panel:#fff; }
html,body { height:100dvh; overflow:hidden; }
body { background:#e9efea; }
button { transition:background .15s, box-shadow .15s; }
button:focus-visible,summary:focus-visible,input:focus-visible { outline:3px solid #54b9a7; outline-offset:3px; }
button:disabled { opacity:.5; cursor:wait; }
.topbar { height:76px; min-height:0; padding:12px 26px; gap:16px; }
h1 { font-size:19px; letter-spacing:-.7px; }
h1 span { font-weight:450; color:#72908a; margin-left:6px; }
.topbar p { font-size:11px; letter-spacing:.3px; margin-top:6px; }
.status { border:0; background:#f0f5ef; border-radius:100px; font-size:11px; display:flex; align-items:center; gap:8px; }
.statusDot { width:7px; height:7px; display:inline-block; border-radius:50%; background:#42917a; flex-shrink:0; }
.appShell { height:calc(100dvh - 108px); min-height:0; grid-template-columns:300px minmax(0,1fr); }
.sidebar { padding:26px 22px 20px; scrollbar-width:thin; scrollbar-color:#d8e3de transparent; }
.panelIntro { padding:0 0 25px; }
.eyebrow { display:block; font-size:9px; font-weight:700; letter-spacing:1.8px; color:#658d82; }
.panelIntro h2 { font-size:27px; letter-spacing:-1px; text-transform:none; margin:10px 0; font-weight:550; }
.panelIntro p { font-size:12px; color:var(--muted); line-height:1.75; }
.controlSection { padding:20px 0; }
.sectionTitle { gap:9px; margin-bottom:13px; }
.sectionTitle h2 { text-transform:none; letter-spacing:0; font-size:12px; font-weight:650; }
.sectionTitle svg { width:16px; }
.microcopy { font-size:10px; line-height:1.6; }
.field { font-size:11px; margin-top:16px; }
.readout { background:#f4f8f5; border:0; border-radius:10px; padding:15px; font-size:11px; }
.readout strong { font-size:12px; }
.readout span { line-height:1.65; }
.layerGrid { display:block; }
.check { font-size:11px; min-height:35px; grid-template-columns:18px 1fr; margin:3px 0; }
.check input { height:15px; width:15px; }
.layerDetails { border:0; border-top:1px solid var(--line); padding:14px 0 5px; margin-top:12px; border-radius:0; }
.layerDetails summary { font-size:11px; font-weight:550; }
.layerDetails summary span { font-size:9px; color:var(--muted); float:right; font-weight:400; }
.warningCopy { background:#faf6e9; border:0; color:#89723d; padding:12px; font-size:10px; }
.legend { font-size:10px; gap:8px; }
.iconButton { box-shadow:none; border-radius:10px; height:36px; width:36px; background:#fff; }
.mapToolbar { top:22px; right:20px; left:auto; gap:10px; }
.viewSwitch { display:flex; padding:4px; border:1px solid #dae4dc; background:#fff; border-radius:12px; box-shadow:0 5px 20px #294c3910; }
.viewSwitch button { display:flex; align-items:center; gap:6px; border:0; border-radius:8px; padding:7px 12px; background:transparent; font-size:11px; cursor:pointer; }
.viewSwitch button[aria-pressed="true"] { background:#e5f1e9; color:#14715e; font-weight:700; }
.viewSwitch svg { width:13px; height:13px; }
.locationChip { position:absolute; top:22px; left:24px; z-index:4; display:flex; align-items:center; gap:11px; padding:12px 16px; border:1px solid #e2e9e1; border-radius:12px; background:#fffffff0; box-shadow:0 5px 20px #294c3910; }
.locationChip strong { display:block; font-size:12px; font-weight:600; }
.locationChip div>span { display:block; margin-top:4px; color:var(--muted); font-size:10px; }
.maplibregl-ctrl-top-right { top:86px; right:16px; }
.maplibregl-ctrl-group { border-radius:10px; overflow:hidden; box-shadow:0 5px 18px #294c3915!important; }
.scenarioDock { position:absolute; z-index:5; width:min(500px,calc(100% - 48px)); left:50%; bottom:35px; transform:translateX(-50%); padding:20px 24px 15px; border:1px solid #e1e8df; background:rgba(255,255,255,.97); border-radius:18px; box-shadow:0 12px 50px #254b3426; }
.dockHeading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:18px; }
.dockHeading h2 { text-transform:none; font-size:31px; font-weight:550; letter-spacing:-1px; margin-top:5px; }
.dockHeading small { font-size:12px; font-weight:400; letter-spacing:0; color:var(--muted); }
.playButton { border:0; background:#173f36; color:white; padding:11px 16px; border-radius:10px; display:flex; align-items:center; gap:7px; font-size:11px; cursor:pointer; }
.playButton svg { height:13px; width:13px; }
.playButton:hover { background:#266452; }
.scenarioSteps { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.scenarioSteps button { border:1px solid #e0e8df; border-radius:9px; padding:11px 4px; background:#f6f8f4; font-size:13px; cursor:pointer; }
.scenarioSteps button span { font-size:10px; color:#7d9188; }
.scenarioSteps button[aria-pressed="true"] { border-color:#388e71; background:#e5f0e5; color:#1a624d; box-shadow:inset 0 0 0 1px #388e71; font-weight:700; }
#rainDockContent>p { font-size:9px; color:#7b8a82; text-align:center; margin-top:12px; line-height:1.5; }
.terrainNote { position:absolute; z-index:4; left:24px; top:88px; max-width:calc(100% - 90px); padding:7px 10px; background:#fffffff0; border-radius:6px; font-size:9px; color:#627c6e; }
.layerStatus { top:125px; left:24px; }
.mapArea { background:#e4ede3; }
footer { min-height:32px; height:32px; padding:8px 22px; font-size:9px; color:#76837b; }
.srOnly { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none!important; }
@media (min-width:769px) and (min-height:521px) { .drawerClose { display:none; } }
@media (max-width:1000px) { .locationChip { max-width:190px; }.locationChip div>span { display:none; } }
@media (max-width:768px), (max-height:520px) {
  .topbar { height:64px; padding:10px 14px; gap:10px; }
  .status { display:none; }
  h1 { font-size:17px; }
  .topbar p { font-size:10px; }
  .appShell,.appShell.panelCollapsed { height:100dvh; min-height:0; }
  .mapArea { inset:64px 0 32px; }
  .sidebar { padding:20px; bottom:42px; max-height:70dvh; z-index:22; border-radius:18px; }
  .panelIntro { padding-bottom:10px; }
  .drawerClose { float:right; }
  .locationChip { top:14px; left:12px; padding:10px; max-width:145px; }
  .locationChip strong { font-size:10px; }
  .mapToolbar { top:14px; right:12px; gap:6px; }
  .viewSwitch button { padding:7px 10px; }
  .mapToolbar .iconButton { height:38px; width:38px; }
  .maplibregl-ctrl-top-right { top:70px; right:6px; }
  .terrainNote { top:64px; left:12px; max-width:calc(100% - 80px); }
  .scenarioDock { width:calc(100% - 24px); bottom:30px; padding:16px; border-radius:15px; }
  .dockHeading { margin-bottom:12px; }
  .dockHeading h2 { font-size:27px; }
  .eyebrow { font-size:8px; letter-spacing:1.3px; }
  .playButton { padding:12px; }
  .scenarioSteps button { min-height:44px; }
  .check { min-height:44px; font-size:12px; }
  .check input { width:18px; height:18px; }
  .mobileReadout { z-index:12; bottom:215px; max-height:32dvh; }
  footer { font-size:8px; padding:5px 12px; line-height:1.3; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }

/* Responsive layout: content determines header/footer height, map receives the remaining space. */
body { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.topbar { position:relative; inset:auto; height:auto; min-height:68px; padding:12px 20px; }
.topbar p { font-size:12px; }
.appShell,.appShell.panelCollapsed { height:100%; min-height:0; }
.appShell { grid-template-columns:clamp(310px,24vw,370px) minmax(0,1fr); }
.appShell.panelCollapsed { grid-template-columns:0 minmax(0,1fr); }
.sidebar { padding:20px; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.panelIntro { padding-bottom:16px; }
.panelIntro h2 { font-size:23px; line-height:1.25; margin:8px 0; letter-spacing:-.6px; }
.panelIntro p { font-size:13px; line-height:1.55; }
.eyebrow { font-size:10px; letter-spacing:1.2px; color:#507567; }
.controlSection { padding:16px 0; }
.sectionTitle { margin-bottom:10px; }
.sectionTitle h2 { font-size:14px; }
.field,.readout,.legend,.check { font-size:13px; line-height:1.5; }
.field { margin:8px 0; }
.microcopy { font-size:12px; line-height:1.5; color:#586e64; }
.readout { padding:13px; max-height:260px; }
.readout strong { font-size:13px; }
.readout dl,.technicalBody dl { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.readout dt,.readout dd,.technicalBody dt,.technicalBody dd { overflow-wrap:anywhere; }
.check { min-height:44px; grid-template-columns:20px minmax(0,1fr); gap:10px; margin:0; }
.check input { width:18px; height:18px; margin:0; }
.layerDetails { padding:10px 0 0; margin-top:10px; }
.layerDetails summary { font-size:13px; padding:8px 0; line-height:1.45; }
.layerDetails summary span { float:none; display:block; margin-left:16px; font-size:11px; }
.usageHelp { margin-bottom:10px; }
.usageHelp summary,#technicalDetails summary { font-size:13px; min-height:24px; }
.usageHelp p { margin-top:12px; }
.warningCopy { font-size:12px; }
.iconButton { width:44px; height:44px; flex-shrink:0; }
.viewSwitch button { min-height:44px; min-width:44px; font-size:13px; }
.playButton { min-height:44px; font-size:13px; }
.scenarioSteps button { min-height:44px; font-size:15px; }
.scenarioSteps button span { font-size:12px; }
.scenarioDock { padding:16px 20px 12px; }
#rainDockContent>p { font-size:11px; color:#566f60; }
.dockHeading { margin-bottom:12px; }
.dockHeading small { font-size:13px; }
.locationChip strong { font-size:13px; }
.locationChip div>span { font-size:11px; }
.terrainNote { font-size:11px; top:92px; max-width:calc(100% - 110px); }
.maplibregl-ctrl-top-right { top:126px; }
footer { position:relative; inset:auto; height:auto; min-height:30px; padding:7px 16px max(7px,env(safe-area-inset-bottom)); font-size:11px; line-height:1.4; color:#52685d; }
.mapArea { min-height:0; }
@media (min-width:769px) and (max-width:1100px) and (min-height:521px) {
  .locationChip { top:78px; left:16px; padding:8px 12px; }
  .mapToolbar { left:16px; right:auto; top:16px; }
  .terrainNote { top:126px; left:16px; }
  .maplibregl-ctrl-top-right { top:16px; right:8px; }
}
@media (max-width:768px), (max-height:520px) {
  .topbar { min-height:64px; padding:8px 12px; }
  .appShell,.appShell.panelCollapsed { display:block; }
  .mapArea { position:relative; inset:auto; height:100%; }
  .sidebar,.appShell.panelCollapsed .sidebar { position:fixed; left:8px; right:8px; top:76px; bottom:48px; max-height:none; padding:16px; border-radius:14px; transform:translateX(calc(-100% - 20px)); visibility:hidden; transition:transform .18s,visibility .18s; }
  .appShell.panelOpen .sidebar { transform:translateX(0); visibility:visible; }
  .drawerClose { position:sticky; top:0; float:right; margin:0 0 8px 12px; z-index:3; }
  .panelIntro { padding-right:4px; }
  .panelIntro h2 { font-size:21px; }
  .mapToolbar { top:12px; right:12px; }
  .mapToolbar .iconButton { width:44px; height:44px; }
  .locationChip { top:16px; left:12px; padding:8px; max-width:130px; }
  .locationChip strong { font-size:11px; }
  .terrainNote { top:72px; left:12px; max-width:calc(100% - 76px); font-size:10px; }
  .maplibregl-ctrl-top-right { top:110px; right:6px; }
  .scenarioDock { position:absolute; left:0; bottom:0; transform:none; width:100%; border-radius:14px 14px 0 0; padding:12px 14px; }
  #map { bottom:var(--dock-height,190px); height:auto; }
  .maplibregl-ctrl-bottom-right,.maplibregl-ctrl-bottom-left { bottom:0; }
  .mobileReadout { bottom:calc(var(--dock-height,190px) + 10px); max-height:calc(100% - var(--dock-height,190px) - 85px); font-size:13px; }
  .scenarioDock .eyebrow { font-size:10px; }
  .dockHeading h2 { font-size:26px; }
  #rainDockContent>p { margin-top:8px; font-size:11px; text-align:left; }
  .readout dl,.technicalBody dl { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .readout dd,.technicalBody dd { text-align:right; }
}
@media (max-width:360px) {
  h1 { font-size:16px; }
  .topbar p { font-size:11px; }
  .locationChip { display:none; }
  .mapToolbar { left:12px; right:auto; }
  .dockHeading { align-items:flex-start; }
  .dockHeading h2 { font-size:23px; }
  .dockHeading small { font-size:12px; }
  .playButton { padding:10px; font-size:12px; }
  .scenarioSteps { gap:5px; }
}
@media (max-height:520px) and (min-width:600px) {
  .topbar { min-height:54px; padding:5px 12px; }
  .sidebar,.appShell.panelCollapsed .sidebar { top:62px; width:min(380px,calc(100% - 16px)); bottom:40px; }
  #map { bottom:0; right:320px; width:auto; }
  .scenarioDock { width:310px; left:auto; right:0; bottom:0; top:0; border-radius:0; overflow:auto; padding:16px; }
  .dockHeading { display:block; }
  .playButton { margin-top:12px; }
  .mapToolbar { left:12px; right:auto; top:8px; }
  .locationChip { display:none; }
  .terrainNote { top:64px; max-width:calc(100% - 410px); }
  .mobileReadout { bottom:8px; right:330px; max-height:calc(100% - 72px); }
  .maplibregl-ctrl-top-right { top:66px; right:6px; }
}
/* Meteorology stays inside the scrollable panel at every viewport size. */
.weatherLinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.weatherLinks a, .weatherRefresh { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; border: 1px solid #bed6d8; border-radius: 8px; background: #eef8f7; color: #125c65; font: inherit; text-decoration: none; text-align: center; }
.weatherModel { margin-top: 14px; }
.weatherDay { padding: 10px 12px; border: 1px solid #d6e4e5; border-radius: 8px; background: white; margin: 8px 0; }
.weatherDay p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; }
.weatherCurrent { line-height: 1.6; }
.weatherRefresh { width: 100%; cursor: pointer; }
.weatherRefresh:disabled { opacity: .6; cursor: wait; }
#weatherData, #presetDescription { overflow-wrap: anywhere; }

.rainCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 450; }
.rainActions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.rainActions button { flex: 1; min-height: 44px; border: 1px solid #bed6d8; border-radius: 9px; padding: 8px 12px; background: #e7f6fb; color: #12526b; font: inherit; cursor: pointer; }
.rainActions button[aria-pressed="true"] { background: #12526b; color: white; }
.rainActions button:disabled { opacity: .5; cursor: wait; }
.rainActions button[hidden] { display: none; }
#rainAnimationNote { line-height: 1.45; margin: 8px 0 0; font-size: 11px; color: #456575; }
.rainTimeline { margin-top: 10px; padding: 10px 12px 8px; border: 1px solid #c9e2e8; border-radius: 9px; background: linear-gradient(135deg, #f4fbfd, #e8f6f8); }
.timelineHeading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: #236275; font-size: 10px; font-weight: 700; letter-spacing: .06em; }
.timelineHeading output { color: #0e526b; font-size: 13px; letter-spacing: 0; }
.rainTimeline input { width: 100%; margin: 10px 0 4px; accent-color: #1684a7; cursor: pointer; }
.timelineMarks { display: flex; justify-content: space-between; color: #66818b; font-size: 10px; }

.weatherMapOptions { display: grid; gap: 6px; margin: 12px 0; }
.weatherModel > div { margin-top: 10px; font-size: 13px; line-height: 1.55; }
.weatherModel p { overflow-wrap: anywhere; line-height: 1.55; }
.weatherRaw { font-family: monospace; font-size: 12px; }
.officialAlert { margin: 10px 0; padding: 10px; border-left: 4px solid #8494a1; background: #fff; border-radius: 6px; }
.officialAlert[data-severity="Moderate"] { border-left-color: #d5a912; }
.officialAlert[data-severity="Severe"] { border-left-color: #dd7820; }
.officialAlert[data-severity="Extreme"] { border-left-color: #c32f42; }
.stormSignal { background: #edf3f7; padding: 12px; border-radius: 8px; }
.stormSignal[data-state="threshold"] { background: #fff0da; border: 1px solid #d39936; }
.laboratoryButton { display:flex; flex-direction:column; gap:5px; padding:14px 16px; margin-top:16px; border-radius:10px; background:#126b68; color:#fff; text-decoration:none; line-height:1.4; min-height:48px; }
.laboratoryButton:visited { color:#fff; }
.laboratoryButton:hover { background:#0c5552; }
.laboratoryButton span { font-size:12px; }
.laboratoryButton:focus-visible { outline:3px solid #d99b31; outline-offset:3px; }
#phoneRainToggle,.phonePanelLabel { display:none; }

@media (max-width:768px), (pointer:coarse) and (max-height:520px) {
  #phoneRainToggle { display:block; width:100%; min-height:44px; padding:10px 14px; border:1px solid #bed6d8; border-radius:9px; background:#edf7f5; color:#125c65; font:inherit; font-weight:600; cursor:pointer; }
  #phoneRainToggle[aria-expanded="true"] { margin-bottom:10px; }
  #panelToggle { width:auto; gap:6px; padding:0 10px; }
  .phonePanelLabel { display:inline; font-size:12px; }
  #rainDockContent { max-height:45dvh; overflow-y:auto; }
  .scenarioDock { padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  .phoneRainCollapsed #map { right:0; bottom:var(--dock-height,66px); }
  .phoneRainCollapsed .scenarioDock { top:auto; left:0; right:0; width:100%; }
  .phoneRainCollapsed .mobileReadout { right:12px; }
  .sidebar .drawerClose { background:#fff; border:1px solid #bed6d8; box-shadow:0 2px 8px #123f521a; }
}
.weatherUnavailable { background: #fff4d7; padding: 10px; border-radius: 6px; }

/* Two information levels share the same map and calculations. */
.topbar { grid-template-columns:auto minmax(0,1fr) auto; }
.experienceSwitch { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; padding:3px; gap:3px; border:1px solid #c7d8d3; border-radius:11px; background:#edf4f1; }
.experienceSwitch button { min-height:38px; padding:7px 14px; border:0; border-radius:8px; background:transparent; color:#36594f; font-size:12px; font-weight:700; cursor:pointer; }
.experienceSwitch button[aria-pressed="true"] { background:#fff; color:#104f4b; box-shadow:0 2px 8px #173b3220; }
.generalGuide { display:none; position:absolute; z-index:5; top:20px; left:20px; width:min(310px,calc(100% - 150px)); padding:14px 16px; border:1px solid #cce0da; border-radius:14px; background:rgba(255,255,255,.94); box-shadow:0 8px 28px #183d3420; backdrop-filter:blur(10px); }
.generalGuide strong,.generalGuide>span { display:block; }
.generalGuide strong { margin:5px 0 4px; color:#163f3b; font-size:15px; line-height:1.25; }
.generalGuide>span:last-child { color:#557069; font-size:12px; line-height:1.4; }
.generalOpacity { display:none; gap:8px; margin:11px 0 3px; color:#46655d; font-size:11px; font-weight:650; }
.generalOpacity input { width:100%; accent-color:#148c9a; }
.mode-general .generalGuide,.mode-general .generalOpacity { display:grid; }
.mode-general #panelToggle,.mode-general .sidebar { display:none; }
.mode-general .locationChip { display:none; }
.mode-general .appShell { grid-template-columns:minmax(0,1fr); }
.mode-general .scenarioDock { width:min(560px,calc(100% - 32px)); }
.mode-general .scenarioDock .rainTimeline,.mode-general #comparisonNote { display:none; }
.mode-general .mobileReadout,.mode-general .readout { border:1px solid #cbded8; }
.mode-general .mobileReadout { display:block; position:absolute; z-index:12; top:132px; left:20px; right:auto; bottom:auto; width:min(390px,calc(100% - 40px)); max-height:min(44dvh,360px); overflow:auto; padding:14px; background:rgba(255,255,255,.97); border-radius:14px; box-shadow:0 12px 40px #173c3326; font-size:13px; line-height:1.45; }
.mode-general .mobileReadout[hidden] { display:none; }
.mode-general .mobileReadout strong,.mode-general .mobileReadout span { display:block; }
.mode-general .mobileReadout span { margin-top:6px; color:#516a63; }
.mode-general .mobileReadout dl { margin:10px 0 0; }
.generalAlert .alertTitle { display:inline-flex; width:max-content; max-width:100%; padding:5px 9px; border-radius:999px; color:#173c36; background:#dfeee9; }
.generalAlert .alert-medium { color:#60470b; background:#fff0b8; }
.generalAlert .alert-high { color:#743613; background:#ffe0c6; }
.generalAlert .alert-critical { color:#791f25; background:#ffd6d9; }
.generalAlert dl { grid-template-columns:1fr; gap:4px; }
.generalAlert dt { margin-top:5px; color:#557069; font-size:10px; text-transform:uppercase; letter-spacing:.06em; }
.generalAlert dd { margin:0; text-align:left; }
@media (max-width:900px) {
  .topbar { grid-template-columns:auto minmax(0,1fr) auto; padding-bottom:62px; }
  .experienceSwitch { top:auto; bottom:10px; width:calc(100% - 24px); transform:translateX(-50%); }
  .experienceSwitch button { flex:1; }
  .status { grid-column:3; grid-row:1; }
}
@media (max-width:768px), (max-height:520px) {
  .mode-general .generalGuide { display:none; }
  .mode-general .scenarioDock { width:100%; }
  .mode-general .mobileReadout { top:auto; left:10px; right:10px; bottom:calc(var(--dock-height,190px) + 10px); width:auto; }
}
@media (max-width:430px) {
  .status { display:none; }
  .topbar { grid-template-columns:minmax(0,1fr); }
  .brand { grid-row:1; }
}

/* Shared control anchors at every information level. Notices use natural flow. */
.topbar { grid-template-columns:44px minmax(0,1fr) auto minmax(0,1fr); padding:8px 12px; }
.topbar .brand { grid-column:2; grid-row:1; }
.topbar #panelToggle { grid-column:1; grid-row:1; }
.topbar #panelToggle { width:44px; padding:0; }
.topbar .phonePanelLabel { display:none; }
.mode-general #panelToggle { display:flex; visibility:hidden; }
.topbar .status { grid-column:4; grid-row:1; justify-self:end; }
.experienceSwitch { position:static; grid-column:3; grid-row:1; justify-self:center; transform:none; width:auto; }
.brand { min-width:0; }
.institution { display:inline; }
@media (max-width:1200px) {
  .topbar { grid-template-columns:44px minmax(0,1fr) auto; gap:10px; }
  .topbar .status { display:none; }
  .institution { display:block; }
}
@media (max-width:600px) {
  .topbar { grid-template-columns:44px minmax(0,1fr); }
  .experienceSwitch { grid-column:1 / -1; grid-row:2; }
}
.mapToolbar { top:12px; right:12px; left:auto; flex-wrap:nowrap; }
.maplibregl-ctrl-top-right { top:74px; right:6px; }
.scenarioDock,.mode-general .scenarioDock { left:auto; right:12px; bottom:12px; top:auto; transform:none; width:min(500px,calc(100% - 24px)); max-height:calc(100% - 86px); overflow:auto; }
#phoneRainToggle { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:48px; padding:18px 14px 8px; border:0; border-radius:9px; background:#edf7f5; color:#125c65; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.rainHandle { position:absolute; top:6px; left:calc(50% - 20px); width:40px; height:4px; border-radius:4px; background:#8caaa4; }
.rainChevron { width:9px; height:9px; border-left:2px solid currentColor; border-top:2px solid currentColor; transform:rotate(45deg); }
#phoneRainToggle[aria-expanded="true"] .rainChevron { transform:rotate(225deg); }
#phoneRainToggle[aria-expanded="true"] { margin-bottom:10px; }
#rainDockContent { max-height:none; }
.generalOpacity { display:grid; }
.mapNotices { position:absolute; z-index:6; left:12px; top:76px; width:min(390px,calc(100% - 80px)); max-height:max(0px,calc(100% - var(--dock-height,66px) - 106px)); display:flex; flex-direction:column; gap:8px; overflow:auto; overscroll-behavior:contain; }
.mapNotices .generalGuide,.mapNotices .locationChip,.mapNotices .terrainNote,.mapNotices .layerStatus,.mapNotices .mobileReadout { position:static; width:100%; max-width:none; max-height:none; margin:0; flex-shrink:0; }
.mapNotices .generalGuide { padding:10px 12px; }
.mapNotices:has(.mobileReadout:not([hidden])) .generalGuide { display:none; }
@media (max-width:768px), (max-height:520px) {
  .topbar .status { display:none; }
  .sidebar,.appShell.panelCollapsed .sidebar { top:calc(var(--header-height,116px) + 8px); }
  .scenarioDock,.mode-general .scenarioDock,.phoneRainCollapsed .scenarioDock { left:0; right:0; bottom:0; top:auto; width:100%; }
  #map,.phoneRainCollapsed #map { right:0; bottom:var(--dock-height,66px); width:auto; }
  .mapNotices { top:72px; }
  .mapToolbar { top:12px; right:12px; left:auto; }
}

/* Compact institutional mark and stable header anchors on small screens. */
.topbar { grid-template-columns:44px minmax(0,1fr) auto minmax(0,1fr) 32px; }
.camLogo { grid-column:5; grid-row:1; width:32px; height:32px; object-fit:contain; }
@media (max-width:1200px) {
  .topbar { grid-template-columns:44px minmax(0,1fr) auto 32px; }
  .camLogo { grid-column:4; }
}
@media (max-width:768px), (pointer:coarse) and (max-height:520px) {
  .topbar { grid-template-columns:44px minmax(54px,1fr) auto 28px; gap:5px; min-height:58px; padding:4px 8px; }
  .topbar .brand h1 { font-size:13px; line-height:1.2; white-space:nowrap; }
  .topbar .brand h1 span { display:block; font-size:11px; }
  .topbar .brand p { display:none; }
  .topbar .experienceSwitch { grid-column:3; grid-row:1; padding:2px; gap:2px; }
  .experienceSwitch button { min-height:44px; padding:6px 9px; font-size:11px; white-space:nowrap; text-transform:capitalize; }
  .visorPrefix { display:none; }
  .camLogo { width:28px; height:28px; }
  .scenarioDock,.mode-general .scenarioDock,.phoneRainCollapsed .scenarioDock { padding:4px 10px max(4px,env(safe-area-inset-bottom)); max-height:48dvh; overflow:auto; }
  #phoneRainToggle { min-height:44px; padding:14px 10px 4px; font-size:12px; }
  #phoneRainToggle[aria-expanded="true"] { margin-bottom:6px; }
  .mode-general .mapNotices .generalGuide { display:none; }
  .mapNotices .terrainNote { font-size:10px; padding:5px 8px; }
  footer { font-size:10px; min-height:0; padding:4px 10px max(4px,env(safe-area-inset-bottom)); }
}

/* Map focus keeps only the cartography and a small, reversible exit control. */
.mapFocusToggle { width:auto; min-width:44px; padding:0 12px; gap:7px; }
.mapFocusToggle .focusLabel { white-space:nowrap; font-size:11px; font-weight:700; }
body.map-focus { display:block; }
.map-focus .topbar,
.map-focus footer,
.map-focus .sidebar,
.map-focus .scenarioDock,
.map-focus .generalGuide,
.map-focus .locationChip,
.map-focus .terrainNote,
.map-focus .layerStatus,
.map-focus .mobileReadout { display:none!important; }
.map-focus .mapNotices { display:none!important; }
.map-focus .appShell,
.map-focus .appShell.panelCollapsed { display:block; width:100%; height:100dvh; min-height:0; }
.map-focus .mapArea { position:relative; inset:auto; width:100%; height:100dvh; min-height:0; }
.map-focus #map { position:absolute; inset:0!important; width:100%!important; height:100%!important; }
.map-focus .mapToolbar { position:absolute; z-index:20; top:max(12px,env(safe-area-inset-top)); right:max(12px,env(safe-area-inset-right)); left:auto; }
.map-focus .mapToolbar .viewSwitch,
.map-focus #resetView { display:none; }
.map-focus .mapFocusToggle { display:inline-flex; background:rgba(255,255,255,.96); box-shadow:0 5px 20px #294c3922; }
.map-focus .maplibregl-ctrl-top-right { top:70px; }

@media (max-width:430px) {
  .mapFocusToggle { width:44px; padding:0; }
  .mapFocusToggle .focusLabel { display:none; }
  .map-focus .mapFocusToggle { width:auto; padding:0 12px; }
  .map-focus .mapFocusToggle .focusLabel { display:inline; }
}

/* Satellite is a base-map choice; hydrological overlays retain their meaning. */
.mapToolbar { flex-wrap: wrap; max-width: calc(100% - 24px); justify-content: flex-end; }
.basemapStatus { margin: 6px 0; padding: 6px 8px; border-radius: 6px; background: #edf4f3; color: #36534e; font-size: 11px; line-height: 1.4; }
.basemapStatus[hidden] { display: none; }
@media (max-width: 640px) {
  .mapToolbar .basemapSwitch button { padding: 7px 8px; min-height: 36px; }
  .maplibregl-ctrl-top-right { top: 124px; }
}

/* Always-visible key, independent of the collapsible rainfall panel. */
.mapColorKey {
  position:absolute; z-index:5; left:12px; bottom:42px;
  width:158px; box-sizing:border-box; padding:9px 10px;
  border:1px solid #d5e1dd; border-radius:10px;
  background:rgba(255,255,255,.94); color:#254b50;
  box-shadow:0 2px 8px #193e3414; pointer-events:none;
  font-size:10px; line-height:1.3;
}
.mapColorKeyRow + .mapColorKeyRow { margin-top:8px; }
.mapColorKey strong { display:block; font-size:10px; font-weight:650; margin-bottom:4px; }
.mapColorRamp { display:block; height:6px; border-radius:4px; }
.mapColorRampWarning { background:linear-gradient(90deg,#f5c642,#ea7e2a,#c93d3a); }
.mapColorRampWater { background:linear-gradient(90deg,#d6eef8,#2f86c3,#0a315d); }
.mapColorEnds { display:flex; justify-content:space-between; margin-top:3px; }
.mapColorKey small { display:block; margin-top:6px; font-size:9px; color:#526761; }
@media (max-width:768px), (max-height:520px) {
  .mapColorKey { left:8px; bottom:calc(var(--dock-height,66px) + 28px); width:150px; padding:7px 8px; }
}
.map-focus .mapColorKey { bottom:max(34px,env(safe-area-inset-bottom)); }

.mapRecovery { position: fixed; top: 68px; left: 12px; right: 12px; z-index: 1200; pointer-events: none; }
.mapRecovery span:not([hidden]), .mapRecovery button:not([hidden]) { display: inline-block; padding: 7px 10px; border-radius: 8px; background: #fff5d6; color: #183e47; font-size: 11px; }
.mapRecovery button { pointer-events: auto; }
.mapNotices .mapRecovery { position:static; inset:auto; width:100%; }
@media (max-width:768px) {
  /* Keep connection/recovery notices above the map instead of covering the
     mobile rain handle or its expanded scenario controls. */
  .mapRecovery { top:calc(var(--header-height,58px) + 78px); bottom:auto; left:8px; right:76px; }
  .mapRecovery span { max-width:100%; }
}
#map { isolation: isolate; z-index: 0; }
#map .leaflet-control-container { position: relative; z-index: 700; }
#map .leaflet-top.leaflet-right { top: 84px; }
@media (max-width:768px) { #map .leaflet-top.leaflet-right { top:110px; } }

/* Mobile: one action row, optional tools, and more room for the actual map.
   All controls/IDs are shared with desktop; no renderer or data changes. */
.phoneMapToggle { display:none; }
.phoneMapTools { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:flex-start; gap:10px; }
@media (max-width:768px), (max-height:520px) {
  body { height:100dvh; min-height:0; }
  .mapToolbar:has(.runoff-entry) { left:8px; right:8px; top:8px; max-width:none; gap:6px; align-items:flex-start; }
  .phoneMapToggle { display:flex; flex:0 0 54px; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:44px; min-height:48px; padding:5px; border:1px solid #b7d0ca; border-radius:10px; background:#fffffff5; color:#165b55; font:600 11px system-ui; cursor:pointer; box-shadow:0 3px 12px #173d4b16; }
  .phoneMapToggle::after { content:''; width:6px; height:6px; border-right:2px solid; border-bottom:2px solid; transform:rotate(45deg); }
  .phoneMapToggle[aria-expanded=true]::after { transform:rotate(225deg); }
  .phoneMapToggle:focus-visible { outline:3px solid #168a94; outline-offset:2px; }
  .phoneMapTools { position:relative; flex-basis:100%; max-width:100%; gap:7px; padding:8px; border:1px solid #c9dbd5; border-radius:12px; background:#fffffff7; box-shadow:0 6px 18px #173d4b18; }
  .phoneMapTools .viewSwitch { box-shadow:none; padding:2px; }
  .phoneMapTools .viewSwitch button { min-height:44px; }
  .phoneMapTools .addressSearch > summary { min-width:44px; min-height:44px; }
  .phoneMapTools .addressSearch { position:static; }
  .phoneMapTools .addressPanel { top:calc(100% + 6px); right:0; width:min(340px,calc(100vw - 32px)); }
  .phoneMapTools .mapFocusToggle { min-height:44px; }
  .phoneMapTools .focusLabel { display:inline; }
  .mapColorKey { width:126px; padding:6px 7px; border-radius:8px; bottom:calc(var(--dock-height,52px) + 26px); font-size:9px; }
  .mapColorKey strong { font-size:9px; margin-bottom:3px; }
  .mapColorKeyRow + .mapColorKeyRow { margin-top:5px; }
  .mapColorKey .mapColorEnds { font-size:8px; gap:4px; }
  .mapColorKey > small { display:none; } /* permanent footer retains the experimental warning */
  .scenarioDock,.mode-general .scenarioDock,.phoneRainCollapsed .scenarioDock { padding:3px 8px max(3px,env(safe-area-inset-bottom)); }
  .scenarioDock .eventRegionControl { margin:0 0 8px; }
  .scenarioDock .eventRegionControl select { min-height:44px; }
  #phoneRainToggle { min-height:44px; padding:14px 10px 5px; }
  .map-focus .phoneMapTools .mapFocusToggle { display:inline-flex; }
}
@media (max-height:520px) {
  .mapColorKey { display:flex; gap:10px; width:280px; max-width:calc(100% - 84px); }
  .mapColorKeyRow { flex:1; min-width:0; }
  .mapColorKeyRow + .mapColorKeyRow { margin-top:0; }
  .mapArea:has(#phoneMapToggle[aria-expanded=true]) .mapColorKey { visibility:hidden; }
}