/* AquaScope Explorer: design tokens, the map-first shell, tabs, cards and the
   Analyst drawer. One stylesheet, no build step.

   The shell rule that everything else follows from: the map is the page. It
   fills `main` absolutely, and the rail, the inspector and the Analyst float
   over it as cards. Nothing takes width away from the map, so the map is the
   first thing you see at every window size, and opening a panel never squeezes
   it into a strip. */

:root {
  color-scheme: light;

  /* ink and surfaces */
  --ink: #0f1c26;
  --ink-2: #33475a;
  --muted: #64798a;
  --line: #e3eaf1;
  --line-soft: #eef3f8;
  --bg: #ffffff;
  --bg-soft: #f4f8fb;
  --bg-sunken: #eaf1f7;
  /* floating cards sit on the map, so they are translucent with a blur */
  --surface: rgba(255, 255, 255, .93);
  --surface-solid: #ffffff;

  /* Accent for the interface only. Gauge colours live in core.js, so the
     chrome never competes with the data for the same blue. */
  --blue: #0b6bb8;
  --blue-dark: #075390;
  --blue-soft: #e9f2fa;
  --purple: #6a3ab2;

  --warn-bg: #fff6e5;
  --warn-ink: #8a5300;
  --err-bg: #fdeceb;
  --err-ink: #b3261e;
  --ok-ink: #1e7b45;

  /* the space behind the globe, swapped per basemap by body[data-basemap] */
  --map-void: radial-gradient(62% 78% at 50% 38%, #f4f9fd 0%, #dceaf5 45%, #b8d2e8 78%, #9dbfda 100%);

  --rail-w: 296px;
  --panel-w: clamp(348px, 32vw, 478px);
  /* Below the side-by-side breakpoint the Analyst covers the inspector, so
     it has to be exactly as wide, or the card underneath peeks out. */
  --drawer-w: var(--panel-w);
  --header-h: 56px;
  --gap: 12px;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --shadow-1: 0 1px 2px rgba(13, 38, 59, .06), 0 2px 8px rgba(13, 38, 59, .07);
  --shadow-2: 0 2px 6px rgba(13, 38, 59, .08), 0 14px 38px rgba(13, 38, 59, .16);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #e7eef5;
    --ink-2: #c2cfdb;
    --muted: #93a5b6;
    --line: #263341;
    --line-soft: #1d2733;
    --bg: #0e151c;
    --bg-soft: #161f29;
    --bg-sunken: #1b2632;
    --surface: rgba(16, 24, 32, .90);
    --surface-solid: #101820;
    --blue: #52a5e8;
    --blue-dark: #7cbdf2;
    --blue-soft: #12293d;
    --purple: #a98cf0;
    --warn-bg: #3a2d12;
    --warn-ink: #f2c879;
    --err-bg: #3a1d1c;
    --err-ink: #ff9a92;
    --ok-ink: #78d295;
    --map-void: radial-gradient(62% 78% at 50% 38%, #1a2836 0%, #101a25 45%, #080d13 78%, #04070a 100%);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .35);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .45), 0 14px 38px rgba(0, 0, 0, .55);
  }
}

/* Imagery wants dark space behind the globe whatever the UI theme is. */
body[data-basemap="dark"],
body[data-basemap="satellite"],
body[data-basemap="satellite-recent"],
body[data-basemap="daily"],
body[data-basemap="usgs"] {
  --map-void: radial-gradient(62% 78% at 50% 38%, #1b2a39 0%, #0f1926 45%, #070c12 78%, #03060a 100%);
}

* { box-sizing: border-box; }

/* `hidden` has to win. A class rule that sets `display` beats the user agent's
   [hidden] { display: none } on specificity, and several of ours did: the map's
   WebGL fallback (an opaque panel over the map), the overlay date row, the
   colour legend, the area-selection result and the empty tab badges were all
   painting while the code believed they were hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0; height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; overflow: hidden; }
a { color: var(--blue); text-underline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -.01em; }
.muted { color: var(--muted); }
ul, ol { margin: 0; }
/* Numbers are the point of this app; keep columns of them aligned. */
.kpi .v, .rail-count, .count, table.ffa, .hit-id, .dist, .st-meta { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bg); padding: .5rem .8rem; border: 1px solid var(--line); border-radius: var(--radius-xs); }
.skip:focus { left: .5rem; top: .5rem; }
/* Announced, not shown: the polite live region in src/a11y.js. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── header ──────────────────────────────────────────────────────────────── */

header#top {
  flex: none; height: var(--header-h); display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0 .75rem; background: var(--bg); position: relative; z-index: 20;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.brand-btn {
  display: flex; align-items: center; gap: .5rem; background: none; border: 0; padding: .25rem .35rem;
  border-radius: var(--radius-xs); cursor: pointer; color: inherit; font: inherit; text-align: left; min-width: 0;
}
.brand-btn:hover { background: var(--bg-soft); }
.brand .logo { font-size: 1.35rem; line-height: 1; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-size: .98rem; font-weight: 680; letter-spacing: -.015em; }
.tagline { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controls { display: flex; align-items: center; gap: .35rem; }
.header-tools { position: relative; }
.header-tools > summary { cursor: pointer; list-style: none; }
.header-tools-menu { display: none; }
.header-tools[open] .header-tools-menu {
  display: flex; flex-direction: column; align-items: stretch; gap: .4rem;
  position: absolute; right: 0; top: calc(100% + .6rem); min-width: 180px;
  padding: .65rem; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
}
/* Tools > Data status (#593): one line, open for every scheduled job */
.data-status { border-top: 1px solid var(--line-soft); padding-top: .4rem; font-size: .74rem; max-width: 300px; }
.data-status summary { cursor: pointer; color: var(--ink-2); }
.ds-list { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .2rem; }
.ds-list li { display: grid; grid-template-columns: 8px auto 1fr; align-items: center; gap: .4rem; }
.ds-list i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.ds-list .ds-ok i { background: var(--ok-ink); }
.ds-list .ds-stale i, .ds-list .ds-failing i { background: var(--err-ink); }
.ds-name { white-space: nowrap; }
.ds-age { color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-list .ds-stale .ds-age, .ds-list .ds-failing .ds-age { color: var(--err-ink); }
.entry-routes { display: flex; flex-direction: column; align-items: stretch; gap: .65rem; margin: 1.2rem 0; }
.entry-routes .btn { text-align: left; white-space: normal; padding: .8rem; }

.search-wrap { position: relative; }
#search {
  width: 320px; padding: .44rem .7rem .44rem 2rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .88rem; background: var(--bg-soft); color: var(--ink); transition: border-color .15s, background .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364798a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: .6rem center; background-size: 15px;
}
#search:focus { background-color: var(--bg); border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
#search::-webkit-search-cancel-button { cursor: pointer; }
.search-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: 420px; max-height: 360px; overflow: auto;
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-2); z-index: 40; padding: .25rem;
}
.search-results .hit { padding: .4rem .55rem; cursor: pointer; font-size: .85rem; display: flex; gap: .5rem; align-items: center; border-radius: var(--radius-xs); }
.search-results .hit:hover, .search-results .hit.active { background: var(--blue-soft); }
.search-results .hit-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The Environment Agency's ids are UUIDs, and at full length they took half
   the row and pushed the station name into an ellipsis. The name is the part
   worth reading; the first characters of the id are enough to tell two apart. */
.search-results .hit-id { margin-left: auto; white-space: nowrap; font-size: .76rem; color: var(--muted);
  max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
.search-results .hit i, .chip i, .rail-row i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
/* The source swatch is a shape, not a dot: colour alone does not survive
   colour-vision deficiency, so the legend has to show what the map draws. */
.shape-swatch { flex: none; display: inline-block; vertical-align: -1px; margin-right: .1rem; }
.nearest .shape-swatch, .ask-stations .shape-swatch { margin-right: .35rem; }
.search-results .hit-head { padding: .45rem .55rem .2rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 640; }
.search-results .hit .pin { width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #4b5f6d; display: inline-block; flex: none; }

.icon-btn {
  font: inherit; font-size: .95rem; line-height: 1; display: inline-grid; place-items: center;
  padding: .42rem .5rem; border-radius: var(--radius-xs); border: 1px solid var(--line);
  background: var(--bg); color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--bg-soft); border-color: var(--line); }
.icon-btn[aria-expanded="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-dark); }

/* ── boot progress: a hairline under the header, not a band ───────────────── */

.boot { position: absolute; left: 0; right: 0; top: var(--header-h); height: 0; z-index: 19; }
.boot[hidden] { display: none; }
.boot-fill {
  position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--blue), #48b8e8); transition: width .4s ease;
}
.boot-label {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow-1);
  border-radius: 999px; padding: .22rem .7rem; font-size: .74rem; color: var(--ink-2); white-space: nowrap;
}
.boot-label:empty { display: none; }

/* ── the shell: map underneath, everything else floating ─────────────────── */

main { position: relative; flex: 1; min-height: 0; }

.map-wrap { position: absolute; inset: 0; background: var(--map-void); }
#map { position: absolute; inset: 0; }
/* MapLibre paints nothing outside the sphere in globe mode, so the void above
   shows through. Keep the canvas transparent. */
.maplibregl-map { background: transparent; }
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 2rem; background: var(--bg-soft); z-index: 4; }
.map-fallback .status { max-width: 420px; }

/* MapLibre's own controls, restyled to match the floating cards. */
.maplibregl-ctrl-group {
  border-radius: var(--radius-sm) !important; box-shadow: var(--shadow-1) !important;
  background: var(--surface-solid) !important; border: 1px solid var(--line);
  overflow: hidden;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line-soft); }
.maplibregl-ctrl-group button { width: 32px !important; height: 32px !important; }
.maplibregl-ctrl-group button:hover { background: var(--bg-soft) !important; }
@media (prefers-color-scheme: dark) {
  .maplibregl-ctrl-group button span { filter: invert(1) hue-rotate(180deg); }
}
.maplibregl-ctrl-scale {
  background: var(--surface) !important; border-color: var(--line) !important; color: var(--ink-2) !important;
  backdrop-filter: blur(8px); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; font-size: .68rem;
}
.maplibregl-ctrl-attrib {
  background: var(--surface) !important; backdrop-filter: blur(8px);
  border-radius: var(--radius-xs) 0 0 0; font-size: .68rem;
}
.maplibregl-ctrl-attrib a { color: var(--ink-2) !important; }
.maplibregl-popup-content {
  font-size: .8rem; padding: .45rem .65rem; background: var(--surface-solid); color: var(--ink);
  border-radius: var(--radius-xs); box-shadow: var(--shadow-2); border: 1px solid var(--line);
}
.maplibregl-popup-tip { border-top-color: var(--surface-solid) !important; border-bottom-color: var(--surface-solid) !important; }

/* Our own map buttons (layers, projection) head the top-left column; MapLibre's
   zoom, locate and fullscreen groups are pushed below them so the corner reads
   as one stack rather than two overlapping ones. */
.map-tools { position: absolute; left: 10px; top: 10px; z-index: 9; display: flex; flex-direction: column; gap: 8px; transition: left .16s ease; }
.maplibregl-ctrl-top-left { margin-top: 128px; }
.maplibregl-ctrl-top-left, .maplibregl-ctrl-bottom-left { transition: margin-left .16s ease; }
body.rail-open .map-tools { left: calc(var(--rail-w) + var(--gap) + 10px); }
body.rail-open .maplibregl-ctrl-top-left,
body.rail-open .maplibregl-ctrl-bottom-left { margin-left: calc(var(--rail-w) + var(--gap)); }
body.workbench-mode .maplibregl-ctrl-top-left { margin-top: 0; }
.map-tool {
  font: inherit; font-size: .95rem; width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-solid);
  color: var(--ink); cursor: pointer; box-shadow: var(--shadow-1);
}
.map-tool:hover { background: var(--bg-soft); }
.map-tool[aria-pressed="true"], .map-tools .map-tool[aria-expanded="true"] {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.map-tool svg { width: 17px; height: 17px; display: block; }

/* ── the map date (#522): one small bar at the bottom of the visible map ─── */

/* time-ui.js sets right and bottom so the bar centres in the map you can see. */
.timebar-wrap {
  position: absolute; left: 0; right: 0; bottom: 64px; z-index: 6;
  display: flex; justify-content: center; pointer-events: none; padding: 0 var(--gap);
}
.timebar {
  pointer-events: auto; position: relative; max-width: 100%;
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: .3rem .35rem; font-size: .78rem; color: var(--ink);
}
.timebar:not([hidden]) { display: flex; flex-direction: column; }
.timebar[hidden] { display: none; }
.tb-main { display: flex; align-items: center; gap: .2rem; }
.tb-btn {
  font: inherit; font-size: 1rem; line-height: 1; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--radius-xs); background: transparent; color: var(--ink); cursor: pointer;
}
.tb-btn:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--line); }
.tb-btn:disabled { opacity: .35; cursor: default; }
.tb-btn[aria-expanded="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-dark); }
.tb-btn svg { width: 15px; height: 15px; }
.tb-play { background: var(--blue); color: #fff; border-color: var(--blue); }
.tb-play:hover:not(:disabled) { background: var(--blue-dark); border-color: var(--blue-dark); }
.tb-play .i-pause, .tb-play[aria-pressed="true"] .i-play { display: none; }
.tb-play[aria-pressed="true"] .i-pause { display: block; }
.timebar input[type=date], .timebar select {
  font: inherit; font-size: .78rem; min-width: 0; padding: .28rem .35rem;
  border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--bg); color: var(--ink);
}
#tb-date { width: 9.6rem; font-variant-numeric: tabular-nums; }
/* Above the controls, so turning a layer on (which clears the note) does not move the play button. */
.tb-note { order: -1; font-size: .72rem; color: var(--ink-2); padding: .1rem .3rem .3rem; text-align: center; max-width: 22rem; margin: 0 auto; }
.tb-note[hidden] { display: none; }
.tb-chip {
  font: inherit; font-size: .7rem; padding: .1rem .5rem; margin-left: .25rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--blue); background: var(--blue-soft); color: var(--blue-dark);
}
.tb-panel {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: min(29rem, calc(100vw - 24px)); display: flex; flex-direction: column; gap: .45rem;
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2); padding: .55rem .65rem;
}
.tb-panel[hidden] { display: none; }
.tb-row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.tb-key { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 650; min-width: 4.6rem; }
.tb-check { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.tb-panel input[type=date] { width: 8.6rem; }
.tb-seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: hidden; }
.tb-seg label { cursor: pointer; }
.tb-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tb-seg span { display: block; padding: .22rem .55rem; font-size: .74rem; }
.tb-seg input:checked + span { background: var(--blue); color: #fff; }
.tb-seg input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: -2px; }

/* swipe compare: the right-hand map, clipped at the handle */
.compare { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.compare[hidden] { display: none; }
.compare-map { position: absolute; inset: 0; }
.compare-handle {
  position: absolute; top: 0; bottom: 0; width: 0; pointer-events: auto; cursor: ew-resize; touch-action: none;
  border-left: 2px solid #fff; box-shadow: 0 0 0 1px rgba(13, 38, 59, .25);
}
.compare-handle span {
  position: absolute; top: 50%; left: -17px; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center;
  border-radius: 999px; background: var(--surface-solid); color: var(--ink); border: 1px solid var(--line);
  box-shadow: var(--shadow-1); font-size: .8rem; letter-spacing: -.1em;
}
.compare-handle:focus-visible span { outline: 2px solid var(--blue); outline-offset: 2px; }
.compare-label {
  position: absolute; top: 12px; font-size: .72rem; padding: .18rem .5rem; border-radius: 999px;
  background: rgba(10, 22, 32, .7); color: #fff; white-space: nowrap;
}
.compare-label.left { transform: translateX(calc(-100% - 22px)); }
.compare-label.right { transform: translateX(22px); }

/* ── the layers rail: a floating card, opened on demand ──────────────────── */

.rail {
  position: absolute; left: var(--gap); top: var(--gap); z-index: 8;
  max-height: calc(100% - var(--gap) * 2);
  width: var(--rail-w); display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
  overflow: auto; overscroll-behavior: contain; padding: .55rem .6rem .8rem;
  transform-origin: top left;
  /* Opening: visibility flips at once, so the rail can take focus on the same
     tick. Closing: it is held back until the fade has finished. Transitioning
     visibility in both directions left the rail unfocusable on the first frame,
     which meant Escape (owned only from inside) could not close it. */
  transition: opacity .16s ease, transform .16s ease;
}
body:not(.rail-open) .rail {
  opacity: 0; visibility: hidden; transform: translateX(-8px) scale(.985); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: .5rem .15rem .25rem; }
.rail-head h2 { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 680; }
.count { font-size: .7rem; color: var(--muted); text-align: right; }

/* Progressive disclosure: only "Gauges" is open on arrival. */
.rail-group { border-top: 1px solid var(--line-soft); padding: .1rem 0 .25rem; }
.rail-group:first-of-type { border-top: 0; }
.rail-group > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .4rem;
  padding: .45rem .15rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 680; border-radius: var(--radius-xs);
}
.rail-group > summary::-webkit-details-marker { display: none; }
.rail-group > summary:hover { color: var(--ink-2); }
.rail-group > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: auto; margin-right: .25rem;
  border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease;
}
.rail-group[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.rail-group > summary .summary-note { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .68rem; }
.rail-group > summary .summary-note + ::after { margin-left: .35rem; }

.rail-list { display: flex; flex-direction: column; gap: 1px; }
.rail-row {
  display: flex; align-items: center; gap: .5rem; padding: .34rem .35rem; border-radius: var(--radius-xs);
  font-size: .82rem; cursor: pointer; color: var(--ink-2);
}
.rail-row:hover { background: var(--bg-soft); color: var(--ink); }
.rail-row input[type=checkbox], .rail-row input[type=radio] { accent-color: var(--blue); flex: none; }
.rail-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-count { margin-left: auto; font-size: .72rem; color: var(--muted); }
.rail-foot { font-size: .7rem; line-height: 1.55; margin-top: .6rem; padding: 0 .15rem; }
.rail-note { font-size: .68rem; line-height: 1.5; margin: .3rem .15rem 0; }
.rail-subhead { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: .55rem .15rem .2rem; font-weight: 640; }
.rail-field { display: flex; flex-direction: column; gap: .25rem; font-size: .7rem; color: var(--muted); padding: .35rem .15rem; }
.rail-field select {
  font: inherit; font-size: .82rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: .35rem .4rem;
}
.rail-list.dimmed .rail-row i { opacity: .25; }
.btn.block { width: 100%; margin: .4rem 0 .15rem; justify-content: center; }
.btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.swatches { display: flex; flex-wrap: wrap; gap: .2rem .6rem; font-size: .68rem; color: var(--muted); padding: .25rem .15rem .35rem; }
.swatches .sw { display: inline-flex; align-items: center; gap: .3rem; }
.swatches i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.area-result { font-size: .75rem; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .35rem .15rem; }
.area-result > div { width: 100%; }
.area-box { position: absolute; background: rgba(11, 107, 184, .14); border: 1.5px dashed var(--blue); border-radius: 4px; pointer-events: none; z-index: 3; }

/* Basemaps as a swatch grid: eight radio rows became two columns of chips. */
.basemap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: .15rem .15rem .3rem; }
.basemap-chip {
  position: relative; display: flex; align-items: center; gap: .4rem; cursor: pointer;
  padding: .4rem .45rem; border: 1px solid var(--line); border-radius: var(--radius-xs);
  font-size: .76rem; line-height: 1.25; color: var(--ink-2); background: var(--bg);
  min-width: 0; min-height: 34px;
}
.basemap-chip:hover { border-color: var(--blue); }
.basemap-chip input { position: absolute; opacity: 0; pointer-events: none; }
.basemap-chip .sw-thumb { width: 18px; height: 18px; border-radius: 5px; flex: none; border: 1px solid rgba(0, 0, 0, .12); }
.basemap-chip .rail-label { font-size: .76rem; white-space: normal; overflow: visible; }
.basemap-chip:has(input:checked) { border-color: var(--blue); background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }
.basemap-chip:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 1px; }

.overlay-row { padding-bottom: .1rem; }
.overlay-row .icon-btn.tiny { margin-left: auto; font-size: .68rem; padding: .05rem .34rem; line-height: 1.35; border-radius: 999px; }
.overlay-controls { padding: .15rem .3rem .4rem 1.7rem; display: flex; flex-direction: column; gap: .3rem; }
.overlay-controls[hidden] { display: none; }
.overlay-controls input[type=range] { width: 100%; accent-color: var(--blue); }
.overlay-controls .legend { width: 100%; max-height: 46px; object-fit: contain; background: #fff; border-radius: 4px; padding: 2px; }
.legend-big { width: 100%; max-width: 380px; background: #fff; border-radius: 6px; padding: 4px; margin-top: .5rem; }
.tag { font-size: .58rem; border: 1px solid var(--line); border-radius: 4px; padding: 0 .22rem; color: var(--muted); vertical-align: middle; }
.rail-credits { font-size: .68rem; line-height: 1.55; display: flex; flex-direction: column; gap: .3rem; padding: 0 .15rem; }
.rail-credits b { font-weight: 640; color: var(--ink-2); }

/* ── the inspector: a floating card on the right ─────────────────────────── */

.panel {
  position: absolute; right: var(--gap); top: var(--gap); z-index: 7;
  /* as tall as it needs to be, never taller than the map */
  max-height: calc(100% - var(--gap) * 2);
  width: var(--panel-w); display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain;
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
  transition: transform .2s ease, opacity .2s ease;
}
body.panel-collapsed .panel { transform: translateX(calc(100% + var(--gap) + 6px)); opacity: 0; pointer-events: none; }

/* The handle that hides the inspector and brings it back. */
#btn-panel {
  position: absolute; top: var(--gap); z-index: 9; right: calc(var(--panel-w) + var(--gap) + 8px);
  transition: right .2s ease;
}
body.panel-collapsed #btn-panel { right: var(--gap); }
body.drawer-open #btn-panel { display: none; }

.panel-empty { padding: 1.1rem 1.15rem 1.3rem; }
.panel-empty h2 { font-size: 1.22rem; letter-spacing: -.02em; margin-bottom: .45rem; }
.panel-empty p { font-size: .88rem; line-height: 1.6; color: var(--ink-2); margin: 0; }
.try { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: .9rem 0 .2rem; font-size: .78rem; }
.tips { font-size: .84rem; margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.tips summary { cursor: pointer; color: var(--blue); font-weight: 560; }
.tips ul { padding-left: 1.1rem; line-height: 1.6; margin-top: .5rem; color: var(--ink-2); }
.tips li { margin-bottom: .3rem; }

/* ── panel head ──────────────────────────────────────────────────────────── */

/* The head scrolls with the panel and the tab strip stays: a gauge head with the watch row, the export note and
   the coverage details open is taller than half a laptop panel, and stuck on top it left the tabs a sliver. */
.head {
  padding: .85rem .95rem .5rem; border-bottom: 1px solid var(--line); position: relative;
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); z-index: 3;
}
.badge {
  display: inline-block; color: #fff; font-size: .66rem; font-weight: 640; letter-spacing: .02em;
  padding: .16rem .5rem; border-radius: 999px; margin-bottom: .35rem;
}
.head h2 { font-size: 1.1rem; line-height: 1.3; letter-spacing: -.02em; }
.st-meta { font-size: .76rem; color: var(--muted); margin: .25rem 0 .55rem; line-height: 1.5; }
.st-actions, .row-actions { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.export-select { max-width: 11rem; appearance: auto; }
/* One action in the open, the rest behind a menu. Five peer buttons above the
   tabs gave no clue which one anybody actually wanted. */
/* Keep the right-aligned menu inside the panel even when actions wrap and
   More is the first item on a new row. Overflow is clipped by the panel. */
.more { position: relative; margin-left: auto; }
.more > summary { list-style: none; cursor: pointer; padding: .38rem .6rem; letter-spacing: .08em; line-height: 1; }
.more > summary::-webkit-details-marker { display: none; }
.more[open] > summary { background: var(--bg-soft); }
.more-menu {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 20; min-width: 190px;
  display: flex; flex-direction: column; padding: .25rem;
  background: var(--surface-solid); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
}
.more-menu > * {
  font: inherit; font-size: .8rem; text-align: left; padding: .42rem .55rem; border: 0; border-radius: var(--radius-xs);
  background: none; color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.more-menu > *:hover { background: var(--bg-soft); }
.row-actions { margin: .55rem 0; }
#st-export-help { font-size: .78rem; margin: .45rem 0 0; }
.record-availability { font-size: .78rem; margin-top: .45rem; }
.record-availability summary { cursor: pointer; color: var(--ink-2); }
.record-availability p { margin: .3rem 0 0; line-height: 1.5; }

/* ── tabs ────────────────────────────────────────────────────────────────── */

.tabs {
  display: flex; gap: .05rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  border-bottom: 1px solid var(--line); padding: 0 .55rem; position: sticky; top: 0; z-index: 2;
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  /* Fade the trailing edge only, so an overflowing strip reads as scrollable
     while the first tab still starts crisp against the panel edge. */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 20px), transparent 100%);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] {
  font: inherit; font-size: .8rem; padding: .55rem .44rem; border: 0; border-bottom: 2px solid transparent;
  background: none; color: var(--muted); cursor: pointer; white-space: nowrap; scroll-snap-align: start;
}
.tabs [role="tab"]:hover:not(:disabled) { color: var(--ink); }
.tabs [role="tab"][aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); font-weight: 640; }
.tabs [role="tab"]:disabled { opacity: .35; cursor: not-allowed; }
.tab-badge { display: inline-block; margin-left: .25rem; font-size: .66rem; background: var(--bg-sunken); border-radius: 999px; padding: 0 .32rem; }
.panes { padding: .7rem .95rem 2rem; }
[role="tabpanel"]:focus-visible { outline-offset: -2px; }

/* ── cards ───────────────────────────────────────────────────────────────── */

.card {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .8rem; margin-bottom: .65rem;
  background: var(--bg); box-shadow: 0 1px 2px rgba(13, 38, 59, .04);
}
.card[hidden] { display: none; }
.card-title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; }
.card-title h3, .card-title h4 { font-size: .9rem; letter-spacing: -.005em; }
.card-tools { display: flex; gap: .25rem; }
.card-note { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--muted); padding: .35rem 0; }
.note-icon { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .7rem; font-weight: 700; flex: none; }
.note-icon.empty { background: var(--bg-sunken); color: var(--muted); }
.note-icon.error { background: var(--err-bg); color: var(--err-ink); }
.card[data-state="loading"] { border-style: dashed; }

.spinner {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  border: 2px solid var(--line); border-top-color: var(--blue); animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
  .boot-fill, .panel, .rail, #btn-panel, .drawer { transition: none; }
}

.catchment .card-body { border-left: 3px solid var(--blue); padding-left: .55rem; font-size: .82rem; }
.basin .card-body { border-left: 3px solid var(--purple); padding-left: .55rem; font-size: .82rem; }
.basin .kv { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .9rem; margin-top: .4rem; }
.basin .kv div { display: flex; justify-content: space-between; gap: .4rem; border-bottom: 1px dotted var(--line); padding: .12rem 0; }
.basin .kv b { font-weight: 620; white-space: nowrap; }
.basin-foot { margin-top: .4rem; font-size: .71rem; line-height: 1.5; }

/* what can be answered here: counts on the summary line, rows behind it */
.assess details > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.assess details > summary::-webkit-details-marker { display: none; }
.assess details > summary h3 { font-size: .9rem; letter-spacing: -.005em; }
.assess details > summary::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg); margin-left: .1rem; flex: none; align-self: center; transition: transform .12s;
}
.assess details[open] > summary::after { transform: rotate(225deg); }
.assess-counts { margin-left: auto; font-size: .74rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.assess .ok { color: var(--ok-ink); }
.assess .warn { color: var(--warn-ink); }
.assess .no { color: var(--err-ink); }
.assess-foot { font-size: .74rem; margin: .45rem 0 0; line-height: 1.45; }
.assess-rows { list-style: none; padding: 0; margin: .4rem 0 0; }
.assess-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 .6rem; padding: .35rem 0; border-top: 1px solid var(--line-soft); font-size: .8rem; }
.assess-status { font-size: .7rem; font-weight: 640; white-space: nowrap; }
.assess-why { grid-column: 1 / -1; font-size: .72rem; line-height: 1.45; }
.assess-notes { padding-left: 1.1rem; margin: .45rem 0 0; font-size: .7rem; line-height: 1.5; }
.assess-notes:empty { display: none; }

/* ── controls ────────────────────────────────────────────────────────────── */

.btn {
  font: inherit; font-size: .78rem; font-weight: 520; padding: .48rem .75rem; border-radius: var(--radius-xs);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer;
  text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem;
  transition: background .13s, border-color .13s;
}
.btn:hover:not(:disabled) { background: var(--bg-soft); border-color: var(--line); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.small { font-size: .74rem; padding: .32rem .6rem; }
.btn.tiny { font-size: .69rem; padding: .18rem .45rem; }
.btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); font-weight: 620; }
.btn.primary:hover:not(:disabled) { background: var(--blue-dark) !important; border-color: var(--blue-dark); }
.ask-toggle { background: var(--purple); color: #fff; border-color: var(--purple); font-weight: 620; }
.ask-toggle:hover:not(:disabled) { background: #5a2ea0 !important; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line); background: var(--bg);
  border-radius: 999px; padding: .24rem .6rem; font-size: .74rem; cursor: pointer; color: var(--ink-2);
  transition: background .13s, border-color .13s;
}
.chip:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-dark); }

.status { margin: .5rem 0; padding: .5rem .68rem; border-radius: var(--radius-xs); font-size: .81rem; line-height: 1.5; background: var(--bg-sunken); color: var(--ink-2); }
.status.warn { background: var(--warn-bg); color: var(--warn-ink); }
.status.error { background: var(--err-bg); color: var(--err-ink); }
.status[hidden] { display: none; }

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.kpi { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .6rem; background: var(--bg-soft); min-width: 0; }
.kpi .l { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 640; }
.kpi .v { font-size: 1.02rem; font-weight: 660; margin: .12rem 0; letter-spacing: -.02em; overflow-wrap: anywhere; }
.kpi .s { font-size: .68rem; color: var(--muted); }
.plot { width: 100%; min-height: 240px; }
#plot-climate { min-height: 220px; }

table.ffa { width: 100%; border-collapse: collapse; font-size: .79rem; }
table.ffa th, table.ffa td { text-align: right; padding: .32rem .35rem; border-bottom: 1px solid var(--line); }
table.ffa th { font-weight: 620; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; }
table.ffa th:first-child, table.ffa td:first-child { text-align: left; }
/* r, α and β are symbols: upper-casing turns α into a Latin-looking "A" and β into "B". */
table.ffa th.sym { text-transform: none; font-size: .78rem; }
table.ffa tr:last-child td { border-bottom: 0; }
table.ffa .ci { color: var(--muted); font-size: .72rem; }
/* the evidence ladder (#518): a grade chip in the table, a small badge in the gauge header */
.grade-chip, .grade-badge {
  display: inline-block; min-width: 1.4em; text-align: center; color: #1b1b1b; font-weight: 680;
  font-size: .7rem; border-radius: 999px; padding: .05rem .4rem;
}
.grade-badge { margin-left: .35rem; vertical-align: 1px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ev-sentence { font-size: .86rem; margin: 0 0 .5rem; }
.evidence .basin-foot p { margin: .3rem 0 0; }
table.regime td:first-child { white-space: nowrap; }

#notes, #pt-notes { padding-left: 1.1rem; font-size: .8rem; color: var(--muted); line-height: 1.6; }
#methods, #pt-methods { padding-left: 1.1rem; font-size: .8rem; line-height: 1.6; }
#methods .cite, #pt-methods .cite { color: var(--muted); font-size: .74rem; }

/* place context (#520): one line per layer, a small chart, the sources */
.ctx-lines { list-style: none; padding: 0; margin: 0; font-size: .83rem; width: 100%; }
.ctx-line { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: .5rem; padding: .32rem 0; border-bottom: 1px solid var(--line); }
.ctx-line:last-child { border-bottom: 0; }
.ctx-label { color: var(--muted); }
.ctx-line.error .ctx-text, .ctx-line.empty .ctx-text { color: var(--muted); }
.ctx-text .spinner { margin-right: .35rem; vertical-align: middle; }
.ctx-credits { font-size: .72rem; margin: .5rem 0 0; }
.ctx-attrib summary { cursor: pointer; margin-top: .25rem; }
.ctx-attrib ul { margin: .25rem 0 0; padding-left: 1rem; }
.plot.small { min-height: 150px; }
.area-context { width: 100%; margin-top: .35rem; }
.area-context .ctx-lines { font-size: .76rem; }
.area-context .ctx-line { grid-template-columns: 5.5rem minmax(0, 1fr); }
@media (max-width: 430px) { .ctx-line { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }

.nearest { list-style: none; padding: 0; margin: 0; font-size: .83rem; }
.nearest li { display: flex; gap: .5rem; align-items: center; padding: .34rem .3rem; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: var(--radius-xs); }
.nearest li:last-child { border-bottom: 0; }
.nearest li:hover { background: var(--bg-soft); }
.nearest .dist { margin-left: auto; color: var(--muted); font-size: .75rem; white-space: nowrap; }
.nearest li.nearest-site { display: block; cursor: default; }
.nearest-open { display: flex; align-items: center; gap: .35rem; width: 100%; text-align: left; background: transparent; border: 0; padding: .2rem 0; color: inherit; font: inherit; }
.nearest-name { min-width: 0; overflow-wrap: anywhere; }
.nearest-open > .muted { overflow-wrap: anywhere; min-width: 0; }
.nearest-records { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; color: var(--muted); font-size: .75rem; }
.nearest-records select { min-width: 0; max-width: 100%; font: inherit; }
.site-records { margin-top: .5rem; font-size: .8rem; }
.site-records:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.site-records select { min-width: 0; max-width: 100%; font: inherit; }
/* The analysis period (#270): stays visible while the record loads, so a slow full record can be cut short. */
.period-pick { align-items: center; justify-content: flex-start; margin-bottom: .35rem; font-size: .8rem; color: var(--muted); }
.period-pick select { min-width: 0; max-width: 100%; font: inherit; color: var(--ink); }

/* ── drawer (Ask) ────────────────────────────────────────────────────────── */

/* The Analyst takes the inspector's place rather than sitting next to it. Two
   cards of the same size and weight side by side do not read as an order to
   read them in; they read as clutter, and together they covered 60 % of a
   1,440 px window. One surface, and the station is named in its header. */
.drawer {
  position: absolute; right: var(--gap); top: var(--gap); max-height: calc(100% - var(--gap) * 2); z-index: 10;
  width: var(--panel-w); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
  padding: .8rem .95rem 1.6rem;
  animation: surface-in .18s ease;
}
.drawer[hidden] { display: none; }
/* The inspector stays mounted underneath, so its scroll and its results survive
   a trip to the Analyst; it is just not painted while the Analyst is up. */
body.drawer-open .panel { visibility: hidden; }
@keyframes surface-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .drawer { animation: none; } }
.drawer-head { display: flex; align-items: center; gap: .55rem; padding-bottom: .2rem; }
.drawer-head h2 { font-size: 1.02rem; letter-spacing: -.02em; }
.icon-btn.back { padding: .3rem; border: 0; background: none; }
.icon-btn.back:hover { background: var(--bg-soft); }
.icon-btn.back svg { width: 18px; height: 18px; display: block; }
/* What the Analyst is looking at, so leaving the station does not lose it. */
.context-chip {
  margin-left: auto; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .74rem; color: var(--muted); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .16rem .55rem;
}
.context-chip[hidden] { display: none; }
.ask-settings { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .7rem; margin: .65rem 0; font-size: .84rem; background: var(--bg); }
.ask-settings summary { cursor: pointer; color: var(--blue); font-weight: 560; }
.ask-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .7rem; margin-top: .55rem; }
.ask-grid label { display: flex; flex-direction: column; gap: .22rem; font-size: .72rem; color: var(--muted); }
.ask-grid input, .ask-grid select {
  font: inherit; font-size: .84rem; color: var(--ink); background: var(--bg);
  padding: .38rem .48rem; border: 1px solid var(--line); border-radius: var(--radius-xs); width: 100%;
}
.ask-grid .ask-remember { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .4rem; }
.ask-grid .ask-remember input { width: auto; }
.ask-provider-note { font-size: .73rem; line-height: 1.5; margin: .4rem 0 0; }
.ask-privacy { font-size: .74rem; line-height: 1.5; margin: .5rem 0 0; }
#ask-question {
  width: 100%; font: inherit; font-size: .89rem; padding: .55rem .65rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); resize: vertical; margin-top: .45rem; background: var(--bg); color: var(--ink);
}
#ask-question:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
.ask-context-toggle { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--muted); cursor: pointer; }
.ask-context-toggle input { accent-color: var(--blue); }
/* The context is a receipt, not a briefing: the checkbox is always there, the
   generated paragraph only when you ask to see it. */
/* The checkbox is the control and sits outside the disclosure: nesting it in
   the <summary> made one click toggle both. */
.ask-context-row { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.ask-context[hidden] { display: none; }
.ask-context > summary { list-style: none; cursor: pointer; font-size: .7rem; color: var(--blue); }
.ask-context > summary::-webkit-details-marker { display: none; }
.ask-context > summary::after { content: "see what it sends"; }
.ask-context[open] > summary::after { content: "hide"; }
.ask-context-row .context-detail { flex-basis: 100%; }
.context-detail { font-size: .72rem; line-height: 1.5; margin: .35rem 0 0; padding-left: .55rem; border-left: 2px solid var(--line); }
.ask-examples { display: flex; flex-wrap: wrap; gap: .3rem; margin: .55rem 0; }
.ask-examples .chip { font-size: .71rem; text-align: left; }
.ask-log { margin: .6rem 0 0; padding-left: 1.2rem; font-size: .77rem; color: var(--muted); line-height: 1.55; max-height: 180px; overflow: auto; }
.ask-log[hidden] { display: none; }
.ask-stations { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .6rem; }
.ask-stations[hidden] { display: none; }
.ask-result { margin-top: .85rem; font-size: .87rem; line-height: 1.6; }
.ask-result[hidden] { display: none; }
.ask-result h1 { font-size: 1.02rem; margin: .2rem 0 .5rem; }
.ask-result h2 { font-size: .94rem; margin: 1rem 0 .3rem; }
.ask-result h3 { font-size: .88rem; margin: .8rem 0 .3rem; }
.ask-result p { margin: .38rem 0; }
.ask-result ul, .ask-result ol { padding-left: 1.2rem; margin: .3rem 0; }
.ask-result code { background: var(--bg-sunken); padding: 0 .25rem; border-radius: 4px; font-size: .82rem; }
.ask-result pre { background: var(--bg-sunken); padding: .55rem .65rem; border-radius: var(--radius-xs); overflow: auto; font-size: .79rem; }
.ask-result table { border-collapse: collapse; width: 100%; font-size: .81rem; margin: .4rem 0; }
.ask-result th, .ask-result td { border: 1px solid var(--line); padding: .28rem .42rem; text-align: left; }
.ask-result th { background: var(--bg-soft); }
.ask-result hr { border: 0; border-top: 1px solid var(--line); margin: .85rem 0; }
.ask-result .foot { font-size: .75rem; color: var(--muted); }

.ask-checks { margin-top: .7rem; padding: .5rem .68rem; border-radius: var(--radius-xs); font-size: .79rem; line-height: 1.55; }
.ask-checks.ok { background: var(--bg-sunken); color: var(--muted); }
.ask-checks.warn { background: var(--warn-bg); color: var(--warn-ink); }
.ask-checks ul { padding-left: 1.1rem; margin: .3rem 0 0; }
.ask-checks[hidden] { display: none; }
.ask-code { background: var(--bg-sunken); padding: .38rem .5rem; border-radius: 6px; margin: .25rem 0 0;
  font-size: .71rem; overflow: auto; max-height: 160px; white-space: pre-wrap; }

.ask-showcase { margin: .5rem 0; padding: 0; border: 0; background: none; }
.ask-showcase[hidden] { display: none; }
.showcase-head { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 640; margin-bottom: .4rem; }
.showcase-head strong { font-weight: 640; }
.showcase-list { display: flex; flex-direction: column; gap: .25rem; }
/* One line each with the full question on hover: eight two-line chips is a
   paragraph of reading before anything has been asked. */
.showcase-chip {
  text-align: left; font-size: .76rem; border-radius: var(--radius-xs); padding: .4rem .55rem;
  display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.showcase-note { font-size: .75rem; color: var(--muted); border-left: 2px solid var(--line); padding-left: .55rem; margin-bottom: .6rem; line-height: 1.55; }
/* On-device Ask (#590): the line when the lock refuses the model's wording, the facts shown instead, a note. */
.ask-refused { background: var(--warn-bg); color: var(--warn-ink); border-radius: 6px; padding: .4rem .6rem; font-size: .85rem; }
.ask-device-facts { margin: .4rem 0 .6rem 1.1rem; padding: 0; line-height: 1.5; }
.ask-device-note { font-size: .8rem; color: var(--muted); }
.ask-log .changed { color: var(--warn-ink); }

/* A segmented control, not three stacked radios each carrying its own sentence.
   Three explanations to read before you can choose between three things is two
   explanations too many; the chosen one explains itself underneath. */
.ask-tier { display: flex; gap: 2px; margin: .7rem 0 .4rem; padding: 3px; background: var(--bg-sunken); border-radius: 999px; }
.ask-tier .seg { flex: 1; position: relative; }
.ask-tier .seg input { position: absolute; opacity: 0; pointer-events: none; }
.ask-tier .seg span {
  display: block; text-align: center; font-size: .78rem; padding: .32rem .3rem; border-radius: 999px;
  color: var(--muted); cursor: pointer; white-space: nowrap; transition: background .14s, color .14s;
}
.ask-tier .seg:hover span { color: var(--ink); }
.ask-tier .seg:has(input:checked) span { background: var(--surface-solid); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); }
.ask-tier .seg:has(input:disabled) span { opacity: .4; cursor: not-allowed; }
.ask-tier .seg:has(input:focus-visible) span { outline: 2px solid var(--blue); outline-offset: 1px; }
.tier-note { font-size: .75rem; line-height: 1.5; margin: 0 0 .5rem; min-height: 1.1em; }
.ask-compose-note { font-size: .78rem; line-height: 1.55; margin: .6rem 0 0; padding-left: .55rem; border-left: 2px solid var(--line); }
.ask-compose-note strong { color: var(--ink-2); font-weight: 600; }
#ask-result:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.ask-tier label { display: flex; align-items: center; gap: .35rem; }
.ask-tier input:disabled + span, .ask-tier label:has(input:disabled) { opacity: .55; }

/* ── modal ───────────────────────────────────────────────────────────────── */

.modal { position: fixed; inset: 0; background: rgba(9, 22, 33, .5); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 60; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-box { background: var(--surface-solid); border-radius: var(--radius); box-shadow: var(--shadow-2); max-width: 620px; width: 100%; max-height: 85vh; overflow: auto; border: 1px solid var(--line); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface-solid); }
.modal-head h2 { font-size: 1.02rem; }
.modal-body { padding: 1rem; font-size: .87rem; line-height: 1.6; }
.modal-body h3 { font-size: .89rem; margin: 1rem 0 .3rem; }
.modal-body pre { background: var(--bg-sunken); padding: .65rem .7rem; border-radius: var(--radius-xs); overflow: auto; font-size: .77rem; }
.modal-body .cite-methods { padding-left: 1.1rem; font-size: .79rem; color: var(--muted); }
/* the study reader: the composed report at full height, the frame carries its own page styles */
.study-reader { place-items: stretch center; }
.study-reader-box { max-width: 980px; max-height: none; height: calc(100vh - 2rem); display: flex; flex-direction: column; overflow: hidden; }
.study-reader-box .row-actions { margin: 0; }
.study-reader-box { max-width: 1320px; }
.study-reader-body { flex: 1; display: flex; min-height: 0; }
.study-reader-box iframe { flex: 1; width: 100%; min-width: 0; border: 0; background: #e9ecef; }
.desk-panel { width: 340px; flex: none; overflow-y: auto; border-left: 1px solid var(--line); padding: .7rem .85rem 1.2rem; font-size: .82rem; line-height: 1.45; background: var(--surface-solid); }
.desk-panel[hidden] { display: none; }
.desk-panel.busy { opacity: .6; pointer-events: none; }
.desk-panel h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 1rem 0 .4rem; }
.desk-panel h3:first-child { margin-top: .1rem; }
.desk-field { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 .6rem; border: 0; padding: 0; }
.desk-field legend { padding: 0; margin-bottom: .2rem; }
.desk-field input, .desk-field select, .desk-inline input, .desk-inline select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--surface-solid); color: inherit; }
.desk-radio { display: flex; align-items: center; gap: .35rem; }
.desk-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.desk-chips .chip.off { text-decoration: line-through; opacity: .65; }
.desk-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.desk-table td { padding: .2rem .25rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.desk-table td.r { text-align: right; white-space: nowrap; }
.desk-table tr.em td { font-weight: 600; }
.desk-sign, .desk-comments, .desk-revs { list-style: none; padding: 0; margin: 0 0 .5rem; }
.desk-sign li { display: flex; justify-content: space-between; gap: .5rem; padding: .15rem 0; }
.desk-comments li { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.desk-comments li.done { opacity: .75; }
.desk-revs li { padding: .15rem 0; }
.desk-inline { display: flex; gap: .3rem; margin: .3rem 0; }
.desk-inline input { flex: 1; min-width: 0; }
.desk-badge { font-size: .68rem; letter-spacing: .1em; border: 1px solid currentColor; border-radius: 3px; padding: 0 .3rem; margin-left: .3rem; }
@media (max-width: 900px) { .study-reader-body { flex-direction: column; } .desk-panel { width: auto; border-left: 0; border-top: 1px solid var(--line); max-height: 45vh; } }
.study-docs-card { border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius-xs); padding: .7rem .8rem; margin: .6rem 0 .8rem; font-size: .85rem; line-height: 1.5; }
.study-docs-card .row-actions { margin-top: .5rem; }

/* ── the workbench (your own data) ───────────────────────────────────────── */

.wb-drop {
  border: 2px dashed var(--line); border-radius: var(--radius-sm); padding: 1.3rem .9rem;
  text-align: center; margin-bottom: .7rem; background: var(--bg-soft);
}
.wb-drop.over { border-color: var(--blue); background: var(--blue-soft); }
.wb-drop p { margin: .3rem 0; font-size: .85rem; }
.wb-drop .link { color: var(--blue); cursor: pointer; text-decoration: underline; }
#wb-paste { width: 100%; font: inherit; font-size: .79rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .48rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-xs); background: var(--bg); color: var(--ink); }
.wb-params { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .6rem; margin-bottom: .3rem; }
.wb-field { display: flex; flex-direction: column; gap: .16rem; font-size: .71rem; color: var(--muted); }
.wb-field input, .wb-field select {
  font: inherit; font-size: .81rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: .28rem .35rem;
}
.wb-result { margin-top: .4rem; font-size: .83rem; }
.wb-result table.ffa td:first-child { color: var(--muted); }
.wb-result .btn.tiny { margin-top: .4rem; }
.wb-json { background: var(--bg-sunken); padding: .5rem; border-radius: var(--radius-xs); overflow: auto; max-height: 260px; font-size: .73rem; }
.wb-warnings { padding-left: 1.1rem; font-size: .77rem; color: var(--warn-ink); line-height: 1.55; }
.wb-suggestions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem; }
/* In workbench mode the table is the subject: the sheet takes the middle of the
   window and the map dims behind it, rather than vanishing (which used to make
   "Back to the map" feel like a page load). */
body.workbench-mode .map-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--bg); opacity: .72;
}
body.workbench-mode .panel {
  right: auto; left: 50%; transform: translateX(-50%);
  width: min(900px, calc(100% - var(--gap) * 2));
}
body.workbench-mode .map-tools, body.workbench-mode #btn-panel,
body.workbench-mode .maplibregl-control-container { display: none; }
/* The workbench sits in the middle, so the Analyst replaces it there rather
   than reappearing against the right edge: a surface that swaps should swap in
   place, not jump across the window. */
body.workbench-mode .drawer { right: auto; left: 50%; transform: translateX(-50%); }

/* ── the drawer's two modes, and Study ───────────────────────────────────── */

/* Ask or Study: the same pill as the tiers, in the drawer's head. */
.drawer-mode { display: flex; gap: 2px; padding: 3px; background: var(--bg-sunken); border-radius: 999px; }
.drawer-mode .seg { position: relative; }
.drawer-mode .seg input { position: absolute; opacity: 0; pointer-events: none; }
.drawer-mode .seg span {
  display: block; font-size: .8rem; padding: .24rem .7rem; border-radius: 999px; color: var(--muted);
  cursor: pointer; white-space: nowrap; transition: background .14s, color .14s;
}
.drawer-mode .seg:hover span { color: var(--ink); }
.drawer-mode .seg:has(input:checked) span { background: var(--surface-solid); color: var(--ink); font-weight: 620; box-shadow: var(--shadow-1); }
.drawer-mode .seg:has(input:focus-visible) span { outline: 2px solid var(--blue); outline-offset: 1px; }

/* Study: a conversation and a board. The thread is the workspace's messages,
   quiet and small; the board above the input is the one thing that is current
   (where and what to bring, the plan, the run, the answer, a decline). */
.study-thread { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .45rem; }
.study-thread .msg { display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: .5rem; font-size: .82rem; line-height: 1.5; }
/* "methodologist" is the longest name and has to fit the column on one line. */
.study-thread .msg-role { font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 640; color: var(--muted); padding-top: .2rem; white-space: nowrap; }
.study-thread .msg-body { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.study-thread .msg.user .msg-body { color: var(--ink); }
.study-thread .msg-sub { font-size: .74rem; line-height: 1.45; margin-top: .1rem; }
.study-q { margin-bottom: .3rem; }
.study-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .3rem 0 .1rem; }

.study-board { border-top: 1px solid var(--line-soft); margin-top: .7rem; padding-top: .6rem; }
.study-board.over { outline: 2px dashed var(--blue); outline-offset: 4px; border-radius: var(--radius-xs); }
.study-where { margin: 0; font-size: .86rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.study-line { display: flex; align-items: center; gap: .35rem; margin: .4rem 0 0; font-size: .76rem; }
.study-data { margin-top: .45rem; font-size: .78rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.study-data .link { color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.study-files { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; flex-basis: 100%; font-size: .74rem; color: var(--ink-2); }
.study-files li { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--line); border-radius: 999px; padding: .12rem .2rem .12rem .55rem; }
.study-x { font: inherit; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 .3rem; border-radius: 999px; }
.study-x:hover { color: var(--err-ink); }

.study-compose { margin-top: .7rem; }
#study-text {
  width: 100%; font: inherit; font-size: .89rem; padding: .55rem .65rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); resize: vertical; background: var(--bg); color: var(--ink);
}
#study-text:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-soft); }
#study-text:disabled { opacity: .55; }
.study-compose .row-actions { margin: .45rem 0 0; }

/* the plan: the objective, then a numbered checklist with the gates as chips */
.study-plan { outline: none; }
.study-plan:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--radius-xs); }
.study-objective { margin: 0 0 .2rem; font-size: .86rem; line-height: 1.5; font-weight: 600; letter-spacing: -.005em; }
.study-steps { list-style: none; padding: 0; margin: .3rem 0 0; counter-reset: step; }
.study-steps li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .12rem .45rem; padding: .42rem 0;
  border-top: 1px solid var(--line-soft); font-size: .8rem; line-height: 1.45;
}
.study-steps li::before {
  counter-increment: step; content: counter(step); font-size: .68rem; color: var(--muted);
  font-variant-numeric: tabular-nums; padding-top: .15rem; grid-row: 1 / span 4;
}
.study-steps .step-main { grid-column: 2; min-width: 0; }
.study-steps .step-tool { font-weight: 620; }
.study-steps .step-args { color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.study-steps .step-gates { grid-column: 2; display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.study-steps .step-why { grid-column: 2; font-size: .74rem; color: var(--ink-2); line-height: 1.5; }
.study-steps .step-why > summary { cursor: pointer; color: var(--blue); list-style: none; font-size: .7rem; }
.study-steps .step-why > summary::-webkit-details-marker { display: none; }
.study-args { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .5rem; margin-top: .2rem; }
.study-arg { display: flex; flex-direction: column; gap: .15rem; font-size: .68rem; color: var(--muted); }
.study-arg input {
  font: inherit; font-size: .78rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: .28rem .38rem; width: 100%;
}
.study-notes { margin-top: .35rem; font-size: .74rem; }
.study-notes > summary { cursor: pointer; color: var(--blue); list-style: none; }
.study-notes > summary::-webkit-details-marker { display: none; }
.study-notes ul { padding-left: 1.1rem; margin: .25rem 0 0; line-height: 1.5; color: var(--ink-2); }
.gate {
  font-size: .66rem; border: 1px solid var(--line); border-radius: 999px; padding: .04rem .42rem;
  color: var(--muted); background: var(--bg-soft); white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* the run: who did what, one line each; the figures as they land */
.study-timeline { list-style: none; padding: 0; margin: .2rem 0 0; font-size: .75rem; line-height: 1.5; max-height: 260px; overflow: auto; }
.study-timeline li {
  display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: .45rem; padding: .2rem .25rem;
  border-top: 1px solid var(--line-soft); color: var(--muted); border-radius: var(--radius-xs);
}
.study-timeline .tl-role { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 640; padding-top: .14rem; }
.study-timeline .tl-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.study-timeline .tl-step { font-weight: 620; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.study-timeline li.ok .tl-role { color: var(--ok-ink); }
.study-timeline li.fail .tl-role { color: var(--warn-ink); }
/* study map: a step row picks out that step's places on the map */
.study-timeline li[data-map-step] { cursor: pointer; }
.study-timeline li[data-map-step]:hover { background: var(--blue-soft); }
.study-map-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .6rem; font-size: .8rem; }
.study-figs { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.study-figs:empty { display: none; }
.study-fig { margin: 0; }
.study-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-xs); background: #fff; min-height: 60px; }
.study-fig figcaption { font-size: .72rem; color: var(--muted); line-height: 1.45; margin-top: .25rem; }

/* the engineer's view, above the answer: the grade, the decision block and the findings (#417, #419) */
.study-grade {
  display: inline-block; font-size: .66rem; font-weight: 640; text-transform: uppercase; letter-spacing: .04em;
  border: 1px solid var(--line); border-radius: 999px; padding: .12rem .55rem; color: var(--muted);
  background: var(--bg-soft); cursor: help;
}
.study-grade.grade-established { color: var(--ok-ink); border-color: var(--ok-ink); }
.study-grade.grade-indicative { color: var(--blue-dark); border-color: var(--blue); background: var(--blue-soft); }
.study-grade.grade-screening { color: var(--warn-ink); border-color: var(--warn-ink); background: var(--warn-bg); }
.study-grade.grade-not_established { color: var(--err-ink); border-color: var(--err-ink); background: var(--err-bg); }
/* a shared study (study-link.js): the label, and the reasons a link was refused */
.study-shared { outline: none; }
.study-shared-label { margin: 0 0 .35rem; }
.study-shared-label .study-grade { cursor: default; }
.study-shared-errors { font-size: .8rem; line-height: 1.5; color: var(--err-ink); margin: .35rem 0; padding-left: 1.1rem; }
.study-decision { font-size: .8rem; line-height: 1.5; margin: .4rem 0; }
.study-decision-answer { margin: 0 0 .3rem; font-weight: 620; }
.study-decision ul { padding-left: 1.1rem; margin: .1rem 0 .4rem; color: var(--ink-2); }
.study-findings { margin: 0 0 .6rem; font-size: .76rem; }
.study-findings > summary { cursor: pointer; color: var(--blue); list-style: none; }
.study-findings > summary::-webkit-details-marker { display: none; }
.study-findings ul { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-direction: column; gap: .35rem; }
.study-basis { font-size: .68rem; color: var(--muted); }

/* the answer is the star; the numbers, the figures and the files follow it */
.study-answer { margin-top: 0; outline: none; }
.study-answer:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: var(--radius-xs); }
.study-answer p:first-child { margin-top: 0; }
.study-numbers { margin-top: .5rem; }
.study-numbers td:first-child { color: var(--muted); text-align: left; }
.study-docs { font-size: .76rem; margin: .2rem 0 0; }
.study-foot { font-size: .72rem; line-height: 1.5; margin: .5rem 0 0; }
.study-declined { font-size: .85rem; line-height: 1.55; color: var(--ink-2); margin: 0; padding-left: .6rem; border-left: 2px solid var(--line); }
/* Who wrote what: one quiet line under the plan and under the answer. */
.study-by { font-size: .72rem; line-height: 1.5; margin: .35rem 0 0; }
/* A saved study at this place, offered once on the intake board. */
.study-resume { margin: .45rem 0 0; }
/* The recorded studies: one line of label, then the chips. */
.study-recorded { margin-top: .5rem; }
.study-recorded .study-chips { margin-top: .25rem; }
.study-try { margin: .2rem 0 .5rem; }
.study-try .chip { text-align: left; }

/* ── narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  :root { --panel-w: min(400px, calc(100% - 24px)); }
  .tagline { display: none; }
  #search { width: 210px; }
}

@media (max-width: 860px) {
  /* The map keeps the whole viewport; the inspector becomes a bottom sheet and
     the rail a full-height sheet from the left. Neither steals map width. */
  :root { --gap: 8px; --panel-w: auto; --drawer-w: auto; --sheet-h: 52vh; }
  #search { width: 150px; }
  .controls .btn { padding: .38rem .55rem; }
  .brand .tagline { display: none; }

  .rail { width: min(300px, calc(100% - 16px)); }

  /* A bottom sheet of a settled height, so the handle above it has somewhere
     predictable to sit; a content-sized sheet moves under its own control. */
  .panel, .drawer {
    left: var(--gap); right: var(--gap); width: auto;
    top: auto; bottom: 0; height: var(--sheet-h); max-height: var(--sheet-h);
    border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0;
  }
  body.panel-collapsed .panel { transform: translateY(100%); }
  body.drawer-open .drawer { right: var(--gap); }
  /* A grab bar so the sheet reads as a sheet. */
  .panel::before, .drawer::before {
    content: ""; position: sticky; top: 0; display: block; width: 38px; height: 4px; margin: 6px auto 2px;
    border-radius: 999px; background: var(--line); flex: none; z-index: 5;
  }
  #btn-panel { top: auto; bottom: calc(var(--sheet-h) + var(--gap)); right: var(--gap); }
  #btn-panel svg { transform: rotate(90deg); }
  body.panel-collapsed #btn-panel { bottom: var(--gap); }
  .head { padding-top: .35rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask-grid { grid-template-columns: 1fr; }
  .basin .kv { grid-template-columns: 1fr; }
  .study-timeline li { grid-template-columns: 80px minmax(0, 1fr); }
  .study-timeline .tl-role { font-size: .58rem; }
  .study-thread .msg { grid-template-columns: 88px minmax(0, 1fr); }
  .study-thread .msg-role { font-size: .56rem; }
  .study-args { grid-template-columns: 1fr; }
  .basemap-grid { grid-template-columns: 1fr 1fr; }
  body.workbench-mode .panel { height: auto; max-height: none; top: var(--gap); border-radius: var(--radius); }
}

@media (max-width: 520px) {
  :root { --sheet-h: 56vh; }
  #tb-date { width: 8.4rem; }
  .tb-btn { width: 28px; }
  .brand-name { font-size: .88rem; }
  #search { width: 128px; }
}

@media (max-width: 430px) {
  :root { --header-h: 98px; }
  header#top { flex-wrap: wrap; align-content: center; gap: .35rem; padding: .4rem .6rem; }
  .brand { flex: 0 0 100%; }
  .brand-text { display: flex; }
  .controls { width: 100%; }
  .search-wrap { flex: 1; min-width: 0; }
  #search { width: 100%; }
  .search-results { width: min(360px, calc(100vw - 24px)); left: 0; right: auto; }
}

@media print {
  header#top, .rail, .map-wrap, .drawer, .tabs, .boot, .map-tools, #btn-panel { display: none !important; }
  body { overflow: visible; }
  .panel { position: static; width: 100%; border: 0; box-shadow: none; overflow: visible; backdrop-filter: none; background: #fff; }
  [role="tabpanel"][hidden] { display: block !important; }
  .card { break-inside: avoid; }
}

/* steerable steps (src/study-controls.js): the plan's gates in plain words, and the per-step controls after
   the report */
.study-steps .step-checks { grid-column: 2; margin: .15rem 0 0; padding-left: 1rem; font-size: .74rem; line-height: 1.45; color: var(--ink-2); }
/* the plain-language gates are bullets, not steps: keep them out of the step counter */
.study-steps .step-checks li { display: list-item; list-style: disc; }
.study-steps .step-checks li::before { content: none; counter-increment: none; }
.study-steps .step-raw { grid-column: 2; font-size: .7rem; }
.study-steps .step-raw > summary { cursor: pointer; color: var(--blue); list-style: none; font-size: .7rem; }
.study-steps .step-raw > summary::-webkit-details-marker { display: none; }
.study-steer { margin-top: .6rem; font-size: .78rem; }
.study-steer > summary { cursor: pointer; color: var(--blue); font-weight: 600; }
.study-steer .steer-note { font-size: .72rem; margin: .3rem 0; }
.steer-step { border: 1px solid var(--line-soft); border-radius: var(--radius-xs); padding: .4rem .55rem .5rem; margin: .4rem 0 0; min-width: 0; }
.steer-step > legend { font-size: .72rem; font-weight: 620; padding: 0 .25rem; }
.steer-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .3rem .5rem; margin-bottom: .4rem; }
.steer-field { display: flex; flex-direction: column; gap: .15rem; font-size: .68rem; color: var(--muted); min-width: 0; }
.steer-field select, .steer-field input[type="number"] {
  font: inherit; font-size: .78rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-xs); padding: .26rem .36rem; width: 100%;
}
.steer-field input[type="checkbox"] { align-self: flex-start; }
/* ── Study this area (area-study.js) ───────────────────────────────────── */
.area-study {
  position: absolute; left: var(--gap); bottom: var(--gap); z-index: 6;
  width: min(760px, calc(100% - var(--panel-w) - 3 * var(--gap))); max-height: 58vh; overflow: auto;
  background: var(--surface); backdrop-filter: blur(8px); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-2); padding: .6rem .8rem; font-size: .82rem;
}
.area-study[hidden] { display: none; }
.area-study .as-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.area-study .small { font-size: .76rem; }
.area-study .as-headline { font-weight: 600; margin: .2rem 0 .4rem; }
.area-study .as-bar { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; margin: .4rem 0; }
.area-study .as-bar > span { display: block; height: 100%; width: 0; background: var(--blue); transition: width .3s; }
.area-study .as-controls { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .4rem 0; }
.area-study .as-legend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: .2rem 0 .4rem; color: var(--ink-2); }
.area-study .as-key i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid #0f1c26; margin-right: .3rem; vertical-align: -1px; }
.area-study table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.area-study th, .area-study td { padding: .2rem .4rem; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.area-study th:first-child, .area-study td:first-child, .area-study th:nth-child(2), .area-study td:nth-child(2) { text-align: left; }
.area-study .as-sort { background: none; border: 0; font: inherit; font-weight: 620; color: var(--ink-2); cursor: pointer; padding: 0; }
.area-study .as-site { background: none; border: 0; font: inherit; color: var(--blue); cursor: pointer; padding: 0; text-align: left; }
.area-study tr.as-skipped td, .area-study tr.as-failed td { color: var(--muted); }
.area-study .as-notes { margin-top: .4rem; }
@media (max-width: 1100px) { .area-study { width: calc(100% - 2 * var(--gap)); } }
/* The signature filter in the rail (signature-filter.js). */
.sigfilter-body input[type=number] {
  font: inherit; font-size: .82rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: .3rem .4rem; width: 100%; box-sizing: border-box;
}
.sigfilter-range { display: flex; align-items: center; gap: .35rem; }
.sigfilter-range input[type=number] { width: 0; flex: 1; }
.sigfilter-foot { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .2rem .15rem; font-size: .75rem; min-height: 1.6rem; }
/* My places + Compare (places.js, compare.js) */
.places-list { list-style: none; margin: .4rem 0; padding: 0; }
.place-row { display: flex; align-items: center; gap: .4rem; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.place-row .place-open { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-row .place-open:hover .place-name { text-decoration: underline; }
#btn-place[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); }
.cmp-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: middle; }
#panel-places .card-body p.muted { font-size: .78rem; margin: 0 0 .4rem; }

/* Watch (#521): the star, the threshold row, and "Since you were here" (watch.js) */
#btn-watch-st[aria-pressed="true"], #btn-watch-pt[aria-pressed="true"] { border-color: var(--blue); color: var(--blue); }
.watch-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .45rem 0 0; font-size: .8rem; color: var(--ink-2); }
.watch-row[hidden] { display: none; }
.watch-row select, .watch-row input { font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-xs); padding: .15rem .3rem; max-width: 100%; }
.watch-row input { width: 7rem; }
.watch-list { list-style: none; margin: .4rem 0; padding: 0; }
.watch-item { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.watch-head { display: flex; align-items: center; gap: .4rem; }
.watch-head .watch-open { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: var(--ink);
  cursor: pointer; font: inherit; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-head .watch-open:hover { text-decoration: underline; }
.watch-kind { font-size: .72rem; }
.watch-line { margin: .2rem 0 0; font-size: .8rem; line-height: 1.45; }
.watch-item.changed .watch-line { color: var(--ink); }
.watch-item.has-alert .watch-head .watch-open::before { content: ""; display: inline-block; width: .5rem; height: .5rem;
  border-radius: 50%; background: var(--warn-ink); margin-right: .4rem; vertical-align: middle; }
.watch-foot { font-size: .74rem; margin-top: .6rem; }

/* Rivers as objects (#516): the snap line, the River tab, the trace */
.pt-snap { color: var(--ink-2, inherit); }
.river-snap { margin: 2px 0 12px; font-size: .83rem; }
.river-snap:empty { display: none; }
.river-snap .btn { margin-left: 6px; }
.river-trace-out { margin-top: 10px; font-size: .83rem; line-height: 1.5; }
.river-trace-out p { margin: 0 0 .35rem; }
.river-trace-out h4 { margin: 12px 0 6px; font-size: .83rem; }

/* Now and next (#517): one sentence, a coloured chip for the class, then the forecast. */
.now-line { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 4px; font-size: .95rem; }
.now-chip { flex: none; width: 11px; height: 11px; border-radius: 50%; transform: translateY(1px); }
.now-sub { margin: 0; font-size: .75rem; }
.now-peak { margin: 0 0 6px; font-size: .88rem; }
.now-pending { margin: 0 0 6px; font-size: .8rem; }
.now-skill { margin: 6px 0 0; font-size: .8rem; }
.now-legend-note { flex-basis: 100%; margin: .2rem 0 0; font-size: .68rem; line-height: 1.35; }
/* the monthly bulletin (#523): "Read it" under the legend; the reader reuses .study-reader */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* ── the map card (#548): a click answers on the map ─────────────────────────
   Anchored to what was clicked, above it when there is room, with a tail that
   points at it. The sparkline is ink, not a hue: colour on the card means one
   thing, the today-against-normal class, the same brown-to-teal the gauges use. */
.map-card {
  --mc-spark: #33475a;
  --mc-spark-fill: rgba(51, 71, 90, .11);
  position: absolute; left: 0; top: 0; z-index: 6; width: 332px; max-width: calc(100% - 20px);
  padding: 10px 14px 11px; background: var(--surface-solid); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
  outline: none; transition: opacity .15s ease;
}
@media (prefers-color-scheme: dark) {
  .map-card { --mc-spark: #c9d6e2; --mc-spark-fill: rgba(201, 214, 226, .14); }
}
.map-card.on { animation: mc-in .18s ease-out; }
@keyframes mc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.map-card.detached { opacity: .94; }
.map-card.detached .mc-tail { display: none; }
.mc-tail {
  position: absolute; left: var(--tail, 50%); bottom: -7px; width: 12px; height: 12px; margin-left: -6px;
  background: var(--surface-solid); border: 1px solid var(--line); border-top: 0; border-left: 0;
  transform: rotate(45deg); pointer-events: none;
}
.map-card[data-side="below"] .mc-tail { bottom: auto; top: -7px; transform: rotate(225deg); }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 24px; }
.mc-what {
  margin: 0; display: inline-flex; align-items: center; gap: .35rem; min-width: 0;
  font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: var(--muted);
}
.mc-what svg { flex: none; }
.mc-close {
  flex: none; width: 26px; height: 26px; margin-right: -6px; border: 0; border-radius: 50%; background: none;
  color: var(--muted); font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
}
.mc-close:hover { background: var(--bg-soft); color: var(--ink); }
.mc-title { font-size: 1rem; line-height: 1.25; margin: .05rem 0 .1rem; overflow-wrap: anywhere; }
.mc-sub { margin: 0; font-size: .71rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-status { display: flex; align-items: baseline; gap: .45rem; margin: .55rem 0 .45rem; font-size: .81rem; line-height: 1.42; color: var(--ink-2); }
.mc-status.muted { color: var(--muted); }
.mc-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; transform: translateY(1px); box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); }
.mc-pending { color: var(--muted); align-items: center; }
.mc-row { display: flex; align-items: flex-end; gap: .8rem; margin: .1rem 0 .55rem; }
.mc-spark-wrap { flex: 1; min-width: 0; }
.mc-spark { height: 40px; }
.mc-spark svg { display: block; overflow: visible; }
.mc-line { fill: none; stroke: var(--mc-spark); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mc-area, .mc-band { fill: var(--mc-spark-fill); stroke: none; }
.mc-end { fill: var(--mc-spark); stroke: var(--surface-solid); stroke-width: 1.5; }
.mc-spark-label { display: block; margin-top: 2px; font-size: .64rem; color: var(--muted); }
.mc-spark-empty { margin: 0; font-size: .74rem; line-height: 1.4; }
.mc-figure { flex: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; max-width: 128px; }
.mc-num { font-size: 1.28rem; font-weight: 660; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mc-num small { font-size: .7rem; font-weight: 520; color: var(--muted); letter-spacing: 0; }
.mc-fig-label { margin-top: 2px; font-size: .64rem; line-height: 1.3; color: var(--muted); }
.mc-note { margin: 0 0 .5rem; padding: .35rem .5rem; font-size: .74rem; line-height: 1.4; color: var(--ink-2); background: var(--bg-soft); border-radius: var(--radius-xs); }
.mc-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.mc-actions .btn.small { padding: .32rem .55rem; }
.mc-credit { margin: .5rem 0 0; font-size: .63rem; line-height: 1.4; color: var(--muted); }
/* Waiting, said in a word and a soft bar, never a wall of spinners. */
.mc-skel {
  display: inline-block; flex: none; width: 34px; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-sunken) 0%, var(--line-soft) 50%, var(--bg-sunken) 100%);
  background-size: 200% 100%; animation: mc-shimmer 1.3s linear infinite;
}
.mc-skel.wide { display: block; width: 100%; height: 26px; margin-top: 10px; border-radius: 6px; }
.mc-skel.short { width: 70px; height: 20px; border-radius: 5px; }
@keyframes mc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* The first view's one line (the month's river status, in words) and, until the first click, how to ask the
   map: one quiet pill at the top of the map, the caption over a smaller hint. */
.map-lead {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 5;
  max-width: min(46rem, calc(100% - 160px)); width: max-content; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .36rem .9rem .38rem; text-align: center; pointer-events: none;
  border-radius: 14px; border: 1px solid transparent;
}
.map-lead:has(> p:not([hidden])) {
  background: var(--surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: var(--line); box-shadow: var(--shadow-1);
}
.map-lead p { margin: 0; }
.map-caption { font-size: .78rem; line-height: 1.4; color: var(--ink-2); font-weight: 400; }
.map-caption b { color: var(--ink); font-weight: 620; }
.map-hint { font-size: .72rem; line-height: 1.35; color: var(--muted); }
.map-caption[hidden], .map-hint[hidden] { display: none; }
body.workbench-mode .map-lead { display: none; }

/* A phone: a short sheet over the bottom of the map, not a bubble over a thumb. */
.map-card.sheet {
  left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none;
  max-height: 50vh; overflow: auto; overscroll-behavior: contain; z-index: 10;
  border-radius: var(--radius) var(--radius) 0 0; border-bottom: 0;
  padding: 4px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}
.map-card.sheet::before {
  content: ""; display: block; width: 38px; height: 4px; margin: 4px auto 4px; border-radius: 999px; background: var(--line);
}
.map-card.sheet .mc-tail { display: none; }
.map-card.sheet.on { animation: mc-up .2s ease-out; }
@keyframes mc-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.map-card.sheet .btn.small { padding: .45rem .7rem; font-size: .78rem; }
@media (max-width: 640px) {
  /* clear of the round Ask the map button on its right (#561) */
  .map-lead { top: auto; bottom: 118px; left: 10px; right: 60px; transform: none; width: auto; max-width: none; padding: .3rem .7rem; }
  .map-caption { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  .map-card.on, .map-card.sheet.on { animation: none; }
  .mc-skel { animation: none; }
}
@media print { .map-card, .map-lead { display: none !important; } }
/* Nothing in the map area scrolls sideways: the folded panel waits just off its right edge. */
main { overflow: clip; }

.rail-row i.rail-flow-sw {
  width: 14px; height: 3px; border-radius: 0;
  background: repeating-linear-gradient(90deg, #3b7fc4 0 6px, #cfe6fb 6px 8px);
}

/* ── Floods ahead (#546): the legend on the map and the card on a reach ──── */

.fa-scale { display: flex; align-items: flex-end; gap: 3px; margin: .5rem 0 .35rem; }
.fa-chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px; flex: 1;
  font-size: .66rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.fa-chip i { display: block; width: 100%; height: 8px; border-radius: 4px; }
.fa-chip.zero { opacity: .4; }
.fa-unit { font-size: .66rem; color: var(--muted); margin-left: .25rem; white-space: nowrap; }
.fa-foot { margin: .45rem 0 0; color: var(--muted); font-size: .68rem; line-height: 1.3; }
.fa-mini { display: inline-flex; gap: 1px; }
.fa-mini i { width: 7px; height: 7px; border-radius: 2px; }


/* ── Ask the map (#561): one line at the top of the map, the action log under it ──
   Closed, it is a quiet pill; open, a search-like bar with the log of what the AI did,
   newest first, each with an undo. Pins and drawn areas are the AI's own marks: ink,
   not a data colour, so they never read as a gauge or a status class. */
.map-ask {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 8;
  width: min(580px, calc(100% - 150px)); display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none;
}
.map-ask > * { pointer-events: auto; }
/* Three pills and the log's count: a pill never squeezes onto two lines; on a narrow map the count wraps under. */
.ma-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.ma-open {
  font: inherit; font-size: .8rem; font-weight: 560; color: var(--ink-2); display: inline-flex; align-items: center; gap: .45rem;
  flex: none; white-space: nowrap;
  height: 34px; padding: 0 .55rem 0 .7rem; border-radius: 999px; border: 1px solid var(--line); cursor: pointer;
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-1);
}
.ma-open:hover { color: var(--ink); background: var(--surface-solid); }
.ma-open svg, .ma-form > svg { width: 16px; height: 16px; flex: none; color: var(--blue); }
.ma-open kbd, .ma-form kbd {
  font: inherit; font-size: .66rem; color: var(--muted); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px; padding: 0 .3rem; line-height: 1.35; background: var(--bg);
}
.ma-count {
  font: inherit; font-size: .72rem; color: var(--ink-2); height: 28px; padding: 0 .65rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-1); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ma-count[aria-expanded="true"] { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-dark); }
.ma-count[hidden], .ma-open[hidden] { display: none; }
.ma-form {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; height: 42px; padding: 0 .35rem 0 .75rem;
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-2);
}
.ma-form[hidden] { display: none; }
.ma-form:focus-within { border-color: var(--blue); box-shadow: var(--shadow-2), 0 0 0 3px var(--blue-soft); }
.ma-form input {
  flex: 1; min-width: 0; font: inherit; font-size: .88rem; color: var(--ink); background: transparent; border: 0; outline: none; padding: 0;
}
.ma-form input::placeholder { color: var(--muted); }
.ma-go, .ma-x {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--radius-xs); cursor: pointer;
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 1.1rem; line-height: 1;
}
.ma-go { background: var(--blue); color: #fff; }
.ma-go:hover { background: var(--blue-dark); }
.ma-go svg { width: 15px; height: 15px; }
.ma-x:hover { background: var(--bg-soft); color: var(--ink); }
/* the bar is wide only while open; the count sits beside the pill when closed and under the bar when open */
.map-ask.open .ma-bar { flex-wrap: nowrap; }
.map-ask.open .ma-count[aria-expanded="true"] { display: none; }   /* folded (a pin card took its place), it stays a tap away */
.ma-status {
  margin: 0; width: 100%; padding: .38rem .7rem; font-size: .74rem; line-height: 1.45; color: var(--ink-2);
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-1);
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem;
}
.ma-status[hidden] { display: none; }
.ma-status.warn { color: var(--warn-ink); }
.ma-status.error { color: var(--err-ink); }
.ma-status .spinner { width: 11px; height: 11px; border-width: 1.5px; }
.ma-status .ma-who { font-weight: 650; color: var(--ink); }
.ma-status .ma-how { color: var(--muted); }
.ma-status .ma-how::after { content: "·"; margin-left: .45rem; color: var(--line); }
.ma-status .ma-note { color: var(--warn-ink); flex-basis: 100%; }
.ma-status .ma-credit { flex-basis: 100%; color: var(--muted); font-size: .66rem; }
.ma-tries {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem; width: 100%; padding: .4rem;
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-1);
}
.ma-tries[hidden] { display: none; }
.ma-tries .chip { background: var(--surface-solid); box-shadow: var(--shadow-1); font-size: .72rem; }
.ma-log {
  width: 100%; max-height: min(40vh, 218px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
}
.ma-log[hidden] { display: none; }
.ma-log-head {
  display: flex; align-items: baseline; gap: .5rem; padding: .4rem .7rem .3rem; border-bottom: 1px solid var(--line-soft);
  font-size: .72rem;
}
.ma-log-head b { font-weight: 650; font-size: .74rem; }
.ma-log-head .muted { font-size: .66rem; }
.ma-undo-all { margin-left: auto; font-size: .72rem; }
.ma-rows { list-style: none; margin: 0; padding: .2rem 0; overflow-y: auto; overscroll-behavior: contain; }
.ma-row { display: flex; align-items: center; gap: .5rem; padding: .22rem .45rem .22rem .7rem; font-size: .78rem; color: var(--ink); }
.ma-row + .ma-row { border-top: 1px solid var(--line-soft); }
.ma-ico { width: 15px; height: 15px; flex: none; color: var(--ink-2); }
.ma-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ma-by {
  flex: none; font-size: .62rem; letter-spacing: .02em; color: var(--muted); border: 1px solid var(--line);
  border-radius: 999px; padding: 0 .4rem; line-height: 1.5; white-space: nowrap;
}
.ma-by-device, .ma-by-key { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 35%, transparent); }
.ma-undo {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-xs); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted);
}
.ma-undo:hover { background: var(--bg-soft); border-color: var(--line); color: var(--ink); }
.ma-undo svg { width: 14px; height: 14px; }
/* the AI's own marks on the map */
.ma-pin {
  width: 26px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; display: block;
  filter: drop-shadow(0 2px 3px rgba(13, 38, 59, .35));
}
.ma-pin svg { width: 26px; height: 34px; display: block; }
.ma-pin svg path { fill: #22313f; stroke: #fff; stroke-width: 1.6; }
.ma-pin svg circle { fill: #fff; }
.ma-pin:hover svg path, .ma-pin:focus-visible svg path { fill: var(--blue); }
/* Scout (#563): the pins are numbered, most worth a look first; the number is the pin's dot. */
.ma-pin.ranked svg { width: 28px; height: 37px; }
.ma-pin.ranked svg text {
  fill: #fff; font: 700 10.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.ma-pin.ranked:hover svg text, .ma-pin.ranked:focus-visible svg text { fill: #fff; }
.ma-scout svg { color: var(--ink-2); }
.ma-scout.busy svg { animation: ma-scan 1.1s ease-in-out infinite; }
.ma-scout.busy { cursor: progress; }
@keyframes ma-scan { 0%, 100% { transform: translateX(-1.5px); } 50% { transform: translateX(1.5px); } }
@media (prefers-reduced-motion: reduce) { .ma-scout.busy svg { animation: none; opacity: .55; } }
.map-ask.open .ma-scout { display: none; }
/* The scout's line takes the caption's place while it shows. */
.map-ask:has(> .ma-status:not([hidden])) ~ .map-lead { visibility: hidden; }
.ma-open-pin {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
}
.ma-open-pin:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.ma-pin-mini svg { width: 11px; height: 14px; display: block; }
.ma-pin-mini svg path { fill: currentColor; }
.ma-pin-mini svg circle { fill: var(--surface-solid); }
.ma-area-tag {
  font-size: .68rem; font-weight: 600; color: var(--blue-dark); background: var(--surface-solid);
  border: 1px solid var(--blue); border-radius: 999px; padding: .05rem .5rem; white-space: nowrap; pointer-events: none;
}
/* The caption and the first-visit hint (.map-lead) step below the pill, and step aside while the box is open. */
@media (min-width: 641px) { .map-lead { top: 52px; } }
.map-ask.open ~ .map-lead { visibility: hidden; }
/* An answer under the closed box (Explain, #562) takes the caption's place while it shows. */
.map-ask:has(> .ma-status:not([hidden])) ~ .map-lead { visibility: hidden; }
@media (max-width: 1100px) {
  .map-ask { width: min(420px, calc(100% - 340px)); }
  .map-ask.open { width: min(460px, calc(100% - 120px)); }
}
/* A tablet: the legends sit top left (floods-past.css), so the closed pills take the map to their right and drop
   the shortcut key; open, the box is centred and wide as before. */
@media (min-width: 641px) and (max-width: 1100px) {
  .map-ask:not(.open) { left: 340px; right: 56px; width: auto; transform: none; }
  .ma-open kbd { display: none; }
}
/* A phone: a round button bottom right, above the panel handle; open, the bar takes the top of the map. */
@media (max-width: 640px) {
  .map-ask { top: auto; bottom: 118px; left: auto; right: 10px; transform: none; width: auto; align-items: flex-end; }
  .map-ask .ma-open { width: 40px; height: 40px; padding: 0; justify-content: center; box-shadow: var(--shadow-2); background: var(--surface-solid); }
  .map-ask .ma-open svg { width: 18px; height: 18px; }
  .ma-open-label, .ma-open kbd { display: none; }
  .ma-bar { flex-direction: column-reverse; align-items: flex-end; }
  .map-ask.open { top: 8px; bottom: auto; left: 8px; right: 8px; width: auto; align-items: stretch; z-index: 11; }
  .map-ask.open .ma-bar { flex-direction: row; }
  .ma-form input { font-size: 16px; }   /* no zoom on focus in iOS Safari */
  .ma-log { max-height: 38vh; }
  /* solid on a phone: the legends sit right under the open box and must not show through it */
  .ma-log, .ma-status, .ma-tries { background: var(--surface-solid); }
  .ma-row { padding-top: .32rem; padding-bottom: .32rem; }
}
@media print { .map-ask, .ma-pin, .ma-area-tag { display: none !important; } }

/* Explain what is on screen (#562): a note is a numbered dot at its place, in the colour of what it describes
   (a status class, a flood class, a gauge's class, the news orange), with a short card beside it. The card's
   side is chosen in map-actions.js so the cards stay off each other and off the legend, the box and the bar. */
.ma-explain svg { color: var(--ink-2); }
/* No position here: MapLibre places the marker absolutely, which also anchors the card. */
.ma-note { width: 22px; height: 22px; --tone: #33475a; cursor: pointer; }
.ma-note:hover, .ma-note:focus-within { z-index: 2; }
.ma-note.carded .ma-note-card { display: none; }
.ma-note-dot {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  font: inherit; font-size: .68rem; font-weight: 700; color: var(--tone-ink, #fff); font-variant-numeric: tabular-nums;
  background: var(--tone); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(15, 28, 38, .35), 0 2px 6px rgba(15, 28, 38, .28);
}
.ma-note-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ma-note-card {
  position: absolute; width: 220px; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px;
  padding: 6px 9px 6px 10px; border-radius: var(--radius-xs); border: 1px solid var(--line);
  border-left: 3px solid var(--tone); background: var(--surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1); color: var(--ink-2); font-size: .72rem; line-height: 1.35; text-align: left;
}
.ma-note:hover .ma-note-card { background: var(--surface-solid); box-shadow: var(--shadow-2); }
.ma-note-title { color: var(--ink); font-size: .76rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-note-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ma-note-src { color: var(--muted); font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-note.side-right .ma-note-card { left: calc(50% + 14px); top: 50%; transform: translateY(-50%); }
.ma-note.side-left .ma-note-card { right: calc(50% + 14px); top: 50%; transform: translateY(-50%); }
.ma-note.side-top .ma-note-card { bottom: calc(50% + 14px); left: 50%; transform: translateX(-50%); }
.ma-note.side-bottom .ma-note-card { top: calc(50% + 14px); left: 50%; transform: translateX(-50%); }
/* A phone: the title alone, a tap opens the whole note in the map card. */
@media (max-width: 640px) {
  .ma-note-card { width: 136px; padding: 3px 7px 3px 8px; }
  .ma-note-text, .ma-note-src { display: none; }
  .ma-note-title { font-size: .7rem; }
}
@media print { .ma-note { display: none !important; } }