/* If Isabella Breaks: a survey-sheet UI, sibling to Event Horizon.
   Same bones as the black hole sim (near-black slabs, hairlines, small corners, numbered section heads, a mono for
   every number) but its own voice: a sober serif for the one headline, cool paper-white text, and water blue as the
   single accent. Alarm orange is reserved for meaning: the dam failing, water having arrived, the disclaimer. */
:root {
  color-scheme: dark;
  --ground: #070a0f;
  --panel: #0a0e14;
  --ink: rgba(9, 13, 19, .82);
  --ink-solid: #0b1017;
  --raise: rgba(214, 228, 240, .045);
  --hair: rgba(214, 228, 240, .09);
  --hair2: rgba(214, 228, 240, .17);
  --hair3: rgba(214, 228, 240, .34);
  --paper: #e9eff5;
  --soft: #bcc8d4;
  --dim: #8a9aab;
  --faint: #5c6a79;          /* decoration only (lamps, ticks); too low-contrast for text */
  --water: #4fb3ff;
  --water-hi: #a8dbff;
  --water-lo: rgba(79, 179, 255, .13);
  --alarm: #ff6b4a;
  --alarm-lo: rgba(255, 107, 74, .12);
  --ok: #6fcf97;
  --official: #ffd166;
  --focus: #d9eeff;
  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --edge: 16px;
  --r: 4px;
  --r-sm: 3px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 14px 40px rgba(0, 0, 0, .45);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ground); color: var(--paper); font: 400 13.5px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
button, select, input { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
a { color: var(--water-hi); text-decoration-color: rgba(168, 219, 255, .45); text-underline-offset: 2px; transition: color .15s, text-decoration-color .15s; }
a:hover { color: #fff; text-decoration-color: currentColor; }
::selection { background: var(--water); color: #04121f; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* the micro-label: small mono capitals, used for every heading and column head */
h2, h3, .kicker, .grp, .lbl, th, #clock-sub, #loading, .fac-summary span {
  font-family: var(--mono); font-weight: 500; text-transform: uppercase;
}

.muted { color: var(--dim); }
.small { font-size: 12px; }
.hidden { display: none !important; }
.bad { color: var(--alarm); }
.good { color: var(--ok); }

/* ---------- frame ---------- */
#app { display: grid; grid-template-columns: 360px 1fr; height: 100vh; height: 100dvh; }
#panel { background: var(--panel); border-right: 1px solid var(--hair2); overflow-y: auto; counter-reset: sec; scrollbar-width: thin; scrollbar-color: rgba(214, 228, 240, .16) transparent; }
#stage { position: relative; min-width: 0; overflow: hidden; }
#map { position: absolute; inset: 0; }

/* ---------- panel: masthead ---------- */
.panel-head { display: grid; grid-template-columns: auto 1fr; column-gap: 17px; align-items: center; padding: 26px 20px 22px; background: linear-gradient(180deg, rgba(79, 179, 255, .05), transparent 85%); }
/* a reservoir gauge: the ring half full */
.mark { position: relative; width: 28px; height: 28px; margin: 5px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px var(--hair3);
  background: linear-gradient(180deg, transparent 0 47%, var(--water-hi) 47% 51%, var(--water) 51%, #1b5fae 100%); }
.mark::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--hair2); }
.kicker { font-size: 10px; line-height: 1; letter-spacing: .18em; color: var(--dim); white-space: nowrap; }
h1 { font: 400 35px/1 var(--display); letter-spacing: -.005em; margin: 9px 0 0; color: #fff; }
.dek { grid-column: 1 / -1; margin: 17px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--soft); }

/* ---------- panel: sections, numbered like a lab manual (01 Scenario) ---------- */
section { padding: 20px 20px 22px; border-top: 1px solid var(--hair); counter-increment: sec; }
h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 10px; line-height: 1.2; letter-spacing: .18em; color: var(--soft); }
h2::before { content: counter(sec, decimal-leading-zero); color: var(--water); letter-spacing: .06em; }
h2::after { content: ""; order: 1; flex: 1; min-width: 12px; height: 1px; background: var(--hair); }
h2 .pill { order: 2; }

/* scenarios: specimen cards with an indicator lamp */
.scen-list { display: grid; gap: 14px; }
.scen-group { display: grid; gap: 6px; }
.grp { font-size: 10px; line-height: 1; letter-spacing: .14em; color: var(--dim); margin-bottom: 2px; }
.scen { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font: 500 13px/1.3 var(--sans); color: var(--soft); background: rgba(214, 228, 240, .02); border: 1px solid var(--hair2); border-radius: var(--r); padding: 10px 12px; cursor: pointer; transition: color .18s, border-color .18s, background .18s; }
.scen .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; transition: background .18s, box-shadow .18s; }
.scen:hover { color: var(--paper); border-color: var(--hair3); background: var(--raise); }
.scen:hover .dot { background: var(--dim); }
.scen:active { background: rgba(214, 228, 240, .07); }
.scen.on { color: #fff; border-color: rgba(79, 179, 255, .6); background: linear-gradient(90deg, var(--water-lo), rgba(79, 179, 255, .03)); }
.scen.on .dot { background: var(--water); box-shadow: 0 0 8px var(--water); }
.scen.on::after { content: ""; position: absolute; top: -1px; left: 10px; right: 10px; height: 1px; background: var(--water); box-shadow: 0 0 8px var(--water); }

/* the scenario description reads like a caption in a journal */
.caption { margin: 16px 0 0; padding: 1px 0 1px 13px; border-left: 1px solid var(--water); font-size: 12.5px; line-height: 1.58; color: var(--soft); }

/* data tables: comparison, sensitivity, inspector. Hairline rows, mono figures. */
.cmp, .sens, .insp-all { width: 100%; border-collapse: collapse; }
.cmp th, .sens th, .insp-all th, .places th { font-size: 10px; line-height: 1.3; letter-spacing: .08em; color: var(--dim); text-align: right; vertical-align: bottom; }
.cmp td, .sens td, .insp-all td { border-top: 1px solid var(--hair); text-align: right; font: 400 12px/1.4 var(--mono); color: var(--soft); font-variant-numeric: tabular-nums; }
.cmp td:first-child, .sens td:first-child, .insp-all td:first-child { text-align: left; font-family: var(--sans); }
.cmp th:first-child, .sens th:first-child, .insp-all th:first-child { text-align: left; }

.compare { margin-top: 16px; border-top: 1px solid var(--hair2); border-bottom: 1px solid var(--hair2); }
.cmp th { padding: 9px 8px 8px; }
.cmp td { padding: 7px 8px; white-space: nowrap; }
.cmp td:first-child { padding-left: 0; color: var(--dim); white-space: normal; }
.cmp b { font-weight: 500; }
.cmp td:has(.bad) { white-space: normal; }
.nw { white-space: nowrap; }
.cmp .cur { color: var(--paper); background: var(--water-lo); }
.cmp th.cur { color: var(--water-hi); box-shadow: inset 0 1px 0 var(--water); }
.compare p { margin: 0; padding: 10px 0 11px; border-top: 1px solid var(--hair); font-size: 12px; line-height: 1.5; color: var(--dim); }

/* segmented controls: one bordered strip, hairline dividers, the chosen cell lit from below */
.seg { display: grid; gap: 1px; background: var(--hair2); border: 1px solid var(--hair2); border-radius: var(--r); overflow: hidden; }
.seg button { font: 500 12.5px/1.2 var(--sans); color: var(--soft); background: var(--panel); border: 0; padding: 10px 8px; cursor: pointer; transition: color .15s, background .15s; }
.seg button:hover { color: #fff; background: linear-gradient(var(--raise), var(--raise)), var(--panel); }
.seg button:active { background: linear-gradient(rgba(214, 228, 240, .08), rgba(214, 228, 240, .08)), var(--panel); }
.seg button.on { color: var(--water-hi); background: linear-gradient(var(--water-lo), var(--water-lo)), var(--panel); box-shadow: inset 0 -1px 0 var(--water); }
.seg button:focus-visible { outline-offset: -3px; }
#layers { grid-template-columns: 1fr 1fr; }
#layers button:first-child { grid-column: 1 / -1; }
#basemaps { grid-template-columns: repeat(3, 1fr); flex: 1; }
.seg.sm button { padding: 8px 6px; font-size: 12px; }
.field { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.lbl { font-size: 10px; line-height: 1; letter-spacing: .14em; color: var(--dim); white-space: nowrap; }

/* overlays: a row label with a switch */
.checks { margin-top: 16px; border-top: 1px solid var(--hair); }
.check { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); font-size: 12.5px; color: var(--soft); cursor: pointer; transition: color .15s; }
.check:last-child { border-bottom: 0; padding-bottom: 0; }
.check:hover { color: #fff; }
.check input { -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 28px; height: 16px; margin: 0; border: 1px solid var(--hair3); border-radius: 99px; background: transparent; cursor: pointer; transition: border-color .2s, background .2s; }
.check input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--dim); transition: transform .2s var(--ease), background .2s, box-shadow .2s; }
.check:hover input { border-color: var(--dim); }
.check input:checked { border-color: rgba(79, 179, 255, .65); background: var(--water-lo); }
.check input:checked::after { transform: translateX(12px); background: var(--water); box-shadow: 0 0 8px rgba(79, 179, 255, .8); }
.swatch-dash { display: inline-block; width: 22px; height: 0; border-top: 2px dashed var(--official); vertical-align: middle; margin-left: 6px; }

/* arrival table: a lamp per place, lit once the water has arrived */
.places { width: 100%; border-collapse: collapse; }
.places th { padding: 0 0 9px; border-bottom: 1px solid var(--hair2); letter-spacing: .14em; }
.places th:first-child { text-align: left; }
.places td { padding: 0; border-bottom: 1px solid var(--hair); vertical-align: baseline; transition: background .15s; }
.places tr:last-child td { border-bottom: 0; }
.places td:nth-child(2), .places td:nth-child(3) { padding: 8px 0 8px 12px; text-align: right; font: 400 12px/1.4 var(--mono); color: var(--soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.places td:nth-child(3) { width: 62px; color: var(--paper); }
.places tr[data-i] { cursor: pointer; }
.places .go { position: relative; display: block; width: 100%; padding: 8px 0 8px 16px; text-align: left; font: 400 13px/1.4 var(--sans); color: var(--paper); background: none; border: 0; cursor: pointer; transition: color .15s; }
.places .go::before { content: ""; position: absolute; left: 1px; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); transition: background .2s, box-shadow .2s; }
.places .go:focus-visible { outline-offset: -2px; }
.places tr[data-i]:hover td { background: var(--raise); }
.places tr[data-i]:hover .go { color: var(--water-hi); }
.places .dry .go, .places .dry td:nth-child(2) { color: var(--dim); }
.places .dry .go::before { background: transparent; box-shadow: inset 0 0 0 1px var(--faint); }
.places .reached .go::before { background: var(--alarm); box-shadow: 0 0 7px var(--alarm); }
.places .reached td:nth-child(2) { color: var(--alarm); }

/* facilities: a count tag, four counters, then the roll */
.pill { font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--alarm); background: var(--alarm-lo); border: 1px solid rgba(255, 107, 74, .38); border-radius: 2px; padding: 4px 6px 3px; }
.pill:empty { display: none; }
.fac-summary { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair2); }
.fac-summary > div { padding: 10px 0 10px 10px; border-left: 1px solid var(--hair); }
.fac-summary > div:first-child { padding-left: 0; border-left: 0; }
.fac-summary span { display: block; font-size: 10px; line-height: 1; letter-spacing: .06em; color: var(--dim); white-space: nowrap; }
.fac-summary b { display: flex; align-items: center; gap: 7px; margin-top: 9px; font: 400 17px/1 var(--mono); color: var(--paper); font-variant-numeric: tabular-nums; }
.fac-summary b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.fac-list { list-style: none; margin: 0; padding: 0 8px 0 0; max-height: 264px; overflow-y: auto; border-bottom: 1px solid var(--hair2); scrollbar-width: thin; scrollbar-color: rgba(214, 228, 240, .16) transparent; }
.fac-list li { display: grid; grid-template-columns: 6px 1fr auto; column-gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--hair); cursor: pointer; }
.fac-list li:last-child { border-bottom: 0; }
.fac-list .k { width: 6px; height: 6px; border-radius: 50%; transform: translateY(-1px); }
.fac-list .nm { padding: 0; text-align: left; font: 400 12.5px/1.4 var(--sans); color: var(--soft); background: none; border: 0; cursor: pointer; transition: color .15s; }
.fac-list li:hover .nm { color: var(--water-hi); }
.fac-list .t { font: 400 11.5px/1.4 var(--mono); color: var(--dim); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .2s; }
.fac-list li.reached .nm { color: var(--paper); }
.fac-list li.reached:hover .nm { color: var(--water-hi); }
.fac-list li.reached .t { color: var(--alarm); }
.fac-list .empty { display: block; color: var(--dim); font-size: 12.5px; cursor: default; }

/* method: a collapsible group that shares the numbered heading (open by default) */
.fold > summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: pointer; border-radius: 2px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { flex: 1; margin: 0; transition: color .2s; }
.fold > summary::after { content: "+"; font: 400 15px/1 var(--mono); color: var(--dim); transition: transform .3s var(--ease), color .2s; }
.fold[open] > summary::after { transform: rotate(45deg); }
.fold[open] > summary { margin-bottom: 16px; }
.fold > summary:hover h2, .fold > summary:hover::after { color: #fff; }
.fold > summary:focus-visible { outline-offset: 5px; }
.prose p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.62; color: var(--soft); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; font-size: 10px; line-height: 1.2; letter-spacing: .16em; color: var(--paper); }
.prose h3::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.sens { margin: 2px 0 14px; border-bottom: 1px solid var(--hair2); }
.sens th { padding: 0 0 8px 8px; }
.sens th:first-child { padding-left: 0; }
.sens td { padding: 7px 0 7px 8px; color: var(--dim); }
.sens td:first-child { padding-left: 0; }
.sens tr:last-child td { color: var(--paper); }

.panel-foot { padding: 22px 20px 30px; border-top: 1px solid var(--hair); }
.notice { margin: 0; padding: 1px 0 1px 13px; border-left: 2px solid var(--alarm); font-size: 12.5px; line-height: 1.62; color: var(--soft); }
.notice strong { color: #fff; font-weight: 600; }
.credits { margin: 18px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--dim); }

/* ---------- stage: a slab is the one surface every floating card shares ---------- */
.card { position: absolute; background: var(--ink); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border: 1px solid var(--hair2); border-radius: var(--r); box-shadow: var(--shadow); }

/* address search */
#search { top: var(--edge); left: var(--edge); width: min(320px, calc(100% - 244px - 3 * var(--edge))); height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; z-index: 3; transition: border-color .2s, box-shadow .2s; }
#search:hover { border-color: var(--hair3); }
#search:focus-within { border-color: var(--water); box-shadow: 0 0 0 1px var(--water), var(--shadow); }
#search svg { width: 15px; height: 15px; fill: var(--dim); flex: none; transition: fill .2s; }
#search:focus-within svg { fill: var(--water-hi); }
#search input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; font-size: 13.5px; color: var(--paper); }
#search input::placeholder { color: var(--dim); opacity: 1; }
#search-results { position: absolute; top: calc(100% + 7px); left: -1px; right: -1px; list-style: none; margin: 0; padding: 4px; background: var(--ink-solid); border: 1px solid var(--hair2); border-radius: var(--r); box-shadow: var(--shadow); max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
#search-results button { display: grid; gap: 2px; width: 100%; padding: 8px 10px; text-align: left; font-size: 13px; line-height: 1.35; color: var(--paper); background: none; border: 0; border-radius: 2px; cursor: pointer; transition: background .15s; }
#search-results b { font-weight: 500; }
#search-results span { font-size: 11.5px; color: var(--dim); }
#search-results span:empty { display: none; }
#search-results button:hover { background: var(--raise); }
#search-results button:active { background: rgba(214, 228, 240, .08); }
#search-results button:focus-visible { outline-offset: -2px; }
#search-results li.muted { padding: 8px 10px; font-size: 12.5px; color: var(--dim); cursor: default; }

/* legend */
#legend { top: var(--edge); right: var(--edge); width: 244px; padding: 13px 14px 12px; font-size: 12px; }
#legend .ttl { font: 500 12px/1.35 var(--sans); color: var(--paper); margin-bottom: 9px; }
#legend .bar { height: 8px; border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); }
#legend .ticks { display: flex; justify-content: space-between; margin-top: 6px; font: 400 10px/1.3 var(--mono); color: var(--dim); }
#legend .cls { display: grid; grid-template-columns: 12px 1fr; gap: 6px 9px; align-items: baseline; font-size: 11.5px; line-height: 1.35; color: var(--soft); }
#legend .sw { width: 12px; height: 8px; border-radius: 1px; }
#legend .note { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--hair); font-size: 11.5px; line-height: 1.5; color: var(--dim); }

/* inspector: what happens at one point */
#inspector { top: calc(var(--edge) + 48px); left: var(--edge); width: 320px; max-height: calc(100% - 200px); overflow-y: auto; padding: 14px 16px 15px; font-size: 12.5px; scrollbar-width: thin; scrollbar-color: rgba(214, 228, 240, .16) transparent; }
#inspector .x { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0 0 1px; background: none; border: 1px solid var(--hair2); border-radius: var(--r-sm); font: 400 15px/1 var(--mono); color: var(--dim); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
#inspector .x:hover { color: #fff; border-color: var(--hair3); background: var(--raise); }
#inspector .hd { font: 600 13.5px/1.35 var(--sans); color: #fff; padding-right: 34px; }
#inspector .sub { margin-top: 3px; color: var(--soft); }
#insp-body > .muted { margin-top: 4px; font: 400 11px/1.3 var(--mono); letter-spacing: .02em; color: var(--dim); }
#inspector dl { display: grid; grid-template-columns: 1fr auto; margin: 12px 0 0; border-bottom: 1px solid var(--hair); }
#inspector dt, #inspector dd { padding: 7px 0; border-top: 1px solid var(--hair); }
#inspector dt { color: var(--dim); }
#inspector dd { margin: 0; padding-left: 12px; text-align: right; font: 400 12px/1.55 var(--mono); color: var(--paper); font-variant-numeric: tabular-nums; }
#inspector .hz { margin-top: 12px; display: flex; gap: 9px; align-items: center; padding: 8px 10px; border: 1px solid var(--hair2); border-radius: var(--r-sm); color: var(--soft); line-height: 1.35; }
#inspector .hz span:first-child { width: 12px; height: 8px; border-radius: 1px; flex: none; }
.insp-all { margin-top: 14px; }
.insp-all th { padding: 0 0 7px 8px; }
.insp-all th:first-child { padding-left: 0; }
.insp-all td { padding: 6px 0 6px 8px; }
.insp-all td:first-child { padding-left: 0; }
.insp-all tr.cur td { color: var(--water-hi); }

/* timeline: transport, clock readout, hydrograph scrubber */
#timeline { left: var(--edge); right: var(--edge); bottom: 28px; display: flex; align-items: center; gap: 16px; padding: 12px 16px 12px 12px; }
#play { width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0; border: 1px solid var(--water); border-radius: var(--r); background: var(--water); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 6px 22px rgba(79, 179, 255, .22); transition: background .18s, border-color .18s, transform .1s; }
#play:hover { background: var(--water-hi); border-color: var(--water-hi); }
#play:active { transform: translateY(1px); }
#play svg { width: 18px; height: 18px; fill: #04121f; }
#play .i-pause, #play.playing .i-play { display: none; }
#play.playing .i-pause { display: block; }
.clock { flex: none; align-self: stretch; display: flex; flex-direction: column; justify-content: center; width: 128px; padding-right: 16px; border-right: 1px solid var(--hair); }
#clock-t { font: 500 24px/1 var(--mono); letter-spacing: -.02em; color: #fff; white-space: nowrap; font-variant-numeric: tabular-nums; }
#clock-t i { font-style: normal; font-weight: 400; font-size: 13px; letter-spacing: .04em; color: var(--dim); vertical-align: 5px; margin-right: -6px; }
#clock-sub { margin-top: 9px; font-size: 10px; line-height: 1; letter-spacing: .14em; color: var(--dim); white-space: nowrap; }
.scrub { position: relative; flex: 1; height: 62px; min-width: 0; border-radius: 2px; }
.scrub:has(#slider:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
#spark { position: absolute; inset: 0; width: 100%; height: 100%; }
#slider { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
select { -webkit-appearance: none; appearance: none; flex: none; padding: 8px 27px 8px 10px; font: 400 11.5px/1.3 var(--mono); color: var(--paper); border: 1px solid var(--hair2); border-radius: var(--r-sm); cursor: pointer; transition: border-color .2s, background-color .2s;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a9aab' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center / 8px auto; }
select:hover { border-color: var(--hair3); background-color: var(--raise); }
select option { background: var(--ink-solid); color: var(--paper); }
#loading { position: absolute; left: calc(var(--edge) + 2px); bottom: 9px; font-size: 10px; line-height: 1; letter-spacing: .16em; color: var(--soft); text-shadow: 0 1px 6px #000; pointer-events: none; }
#loading:not(:empty)::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--water); box-shadow: 0 0 8px var(--water); vertical-align: 1px; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }

/* ---------- MapLibre chrome, brought onto the same slabs ---------- */
.maplibregl-map { font: inherit; }
.maplibregl-canvas:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: 114px; }
.maplibregl-ctrl-bottom-right { right: 6px; }
.maplibregl-ctrl.maplibregl-ctrl-group { background: var(--ink-solid); border: 1px solid var(--hair2); border-radius: var(--r); box-shadow: 0 8px 24px rgba(0, 0, 0, .4); overflow: hidden; }
.maplibregl-ctrl-group button { width: 30px; height: 30px; transition: background-color .15s; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--hair); }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); opacity: .72; transition: opacity .15s; }
.maplibregl-ctrl-group button:not(:disabled):hover { background-color: rgba(214, 228, 240, .08); }
.maplibregl-ctrl-group button:not(:disabled):hover .maplibregl-ctrl-icon { opacity: 1; }
.maplibregl-ctrl-group button:focus { box-shadow: none; }
.maplibregl-ctrl-group button:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; box-shadow: none; }
.maplibregl-ctrl.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(9, 13, 19, .9); color: var(--soft); font: 400 11px/1.6 var(--sans); }
.maplibregl-ctrl-attrib a { color: var(--paper); }
.maplibregl-ctrl-attrib a:hover { color: #fff; }
.maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 12px; }
.maplibregl-ctrl-attrib-button { filter: invert(1); opacity: .8; }
.maplibregl-popup-content { background: var(--ink-solid); color: var(--paper); border: 1px solid var(--hair2); border-radius: var(--r); box-shadow: var(--shadow); font: 400 13px/1.45 var(--sans); padding: 12px 30px 12px 14px; }
.maplibregl-popup-content b { font-weight: 600; }
.maplibregl-popup-content .muted { font-size: 11.5px; }
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: #2e353d; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: #2e353d; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #2e353d; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #2e353d; }
.maplibregl-popup-close-button { top: 5px; right: 5px; width: 22px; height: 22px; padding: 0 0 2px; font: 400 15px/1 var(--mono); color: var(--dim); border-radius: var(--r-sm); transition: color .15s, background-color .15s; }
.maplibregl-popup-close-button:hover { color: #fff; background-color: var(--raise); }
.place-label { font: 600 11px var(--sans); color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000; pointer-events: none; white-space: nowrap; }
.place-label::before { content: ""; display: inline-block; width: 6px; height: 6px; background: #fff; border-radius: 50%; margin-right: 5px; vertical-align: middle; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); }
.hide-labels .place-label { display: none; }

/* one quiet entrance for the floating cards */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
#search, #legend { animation: rise .7s .15s var(--ease) backwards; }
#timeline { animation: rise .7s .3s var(--ease) backwards; }
#inspector { animation: rise .35s var(--ease) backwards; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- phone: map on top, panel below ---------- */
@media (max-width: 800px) {
  :root { --edge: 8px; }
  #app { grid-template-columns: 1fr; grid-template-rows: 58vh 1fr; }
  #stage { grid-row: 1; }
  #panel { grid-row: 2; border-right: 0; border-top: 1px solid var(--hair2); }
  .panel-head { padding: 20px 16px 18px; column-gap: 15px; }
  section { padding: 18px 16px 20px; }
  .panel-foot { padding: 20px 16px 28px; }
  h1 { font-size: 31px; }
  .seg button { padding-top: 12px; padding-bottom: 12px; }
  .seg.sm button { padding-top: 10px; padding-bottom: 10px; }
  .check { padding: 13px 0; }

  #search { right: 166px; width: auto; height: 36px; }
  #legend { width: 150px; padding: 8px 10px; font-size: 11px; }
  #legend .ttl { font-size: 11px; margin-bottom: 7px; }
  #legend .cls { font-size: 10.5px; gap: 4px 7px; }
  #legend .note { display: none; }
  #inspector { top: 84px; right: 8px; width: auto; max-height: 45%; }

  #timeline { bottom: 8px; gap: 10px; padding: 8px 10px 8px 8px; }
  #play { width: 40px; height: 40px; }
  .clock { width: auto; min-width: 74px; padding-right: 10px; }
  #clock-t { font-size: 17px; }
  #clock-t i { font-size: 11px; vertical-align: 3px; margin-right: -4px; }
  #clock-sub, #speed { display: none; }
  #loading { top: 54px; bottom: auto; }
  .maplibregl-ctrl-bottom-right, .maplibregl-ctrl-bottom-left { bottom: 86px; }
  .maplibregl-ctrl-bottom-right { right: -2px; }
}