:root {
  --page: #14201c;
  --panel: #ffffff;
  --ink: #101815;
  --ink-secondary: #55625c;
  /* captions, ticks, table heads: 4.9:1 on white and 4.5:1 on the #f3f6f4 cards (WCAG 1.4.3; accessibility audit
     2026-10-29, was #8b968f at 3.1:1) */
  --ink-muted: #68736d;
  --line: #e2e6e2;
  /* the border of text boxes and menus: 3:1 on white (WCAG 1.4.11); dividers keep --line */
  --control-line: #8b968f;
  --accent: #2a6f4f;
  --accent-soft: #dcefe4;
  --series-lstm: #2a78d6;
  /* forecast orange as TEXT (the time bar's "forecast from", the summary arrows): 5:1 on white (was #d9622a, 3.7:1); the
     chart lines keep #c2702e, a graphic (3.7:1, above the 3:1 non-text floor) */
  --series-gnn: #b25518;
  --danger: #b5382f;
  --seq-1: #1d63c9; --seq-2: #2e9e5b; --seq-3: #f2c94c; --seq-4: #f2802e; --seq-5: #c23b2e;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--page); color: var(--ink); }
/* "This map was updated" (a redeploy while the tab was open): sticks to the top of the panel */
.upd-note { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 6px 10px;
  flex-wrap: wrap; background: var(--accent-soft); color: var(--accent); border-radius: 6px; padding: 6px 10px; margin: 0 0 10px;
  font-size: 12.5px; font-weight: 600; }
.upd-note[hidden] { display: none; }
.upd-note .upd-btns { display: flex; gap: 12px; }
.upd-note button { all: unset; cursor: pointer; color: inherit; font-weight: 700; }
.upd-note #upd-reload { text-decoration: underline; }
.upd-note button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }

#map {
  position: absolute;
  inset: 0;
  height: 100%;
}
/* Grayscale the basemap tiles only -- the kriged surface and well markers render in other
   Leaflet panes, so this filter leaves their color untouched. */
.leaflet-tile-pane {
  filter: grayscale(1) contrast(1.02);
}
/* "Gray canvas": the USGS shaded relief, flattened and lightened to a near-blank canvas (as the surfacewater app) */
.tiles-relief { filter: contrast(.6) brightness(1.12); }

#panel {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: 340px;
  max-width: calc(100vw - 32px);
  background: var(--panel);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,.25);
  z-index: 1000;
  overflow-y: auto;
  padding: 18px 20px 22px;
}

/* view switch (layout stage 1, 2026-10-15): pinned to the top of the panel while it scrolls; full panel width over the
   panel's padding. On phones it is the first row of the bottom sheet. */
.panel-top {
  position: sticky; top: -18px; z-index: 5; margin: -18px -20px 14px; padding: 10px 20px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.view-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
/* place search (app.js initPlaceSearch): in the Search fold under the Map key (.map-tools) */
.place-search { position: relative; }
.place-search input { width: 100%; font: inherit; font-size: 13.5px; color: var(--ink); background: #f6f8f7;
  border: 1px solid var(--control-line); border-radius: 8px; padding: 8px 10px; min-height: 38px; }
.place-search input::placeholder { color: var(--ink-muted); }
.place-search input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); background: #fff; }
#place-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; margin: 0; padding: 4px; list-style: none;
  max-height: 340px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.18); }
#place-list li { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
#place-list li .ps-sub { font-size: 11.5px; color: var(--ink-secondary); }
#place-list li[aria-selected="true"] { background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -1px; }
#place-list li.more { cursor: default; font-size: 12px; color: var(--ink-muted); }
/* phones only (layout stage 5): the bottom sheet's handle and its folded "peek" line */
.sheet-handle, .sheet-peek { display: none; }
.sheet-handle { width: 100%; height: 24px; margin: -6px 0 4px; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
.sheet-handle span { display: block; width: 44px; height: 5px; margin: 0 auto; border-radius: 3px; background: #c3cac6; }
.sheet-peek { align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--ink-secondary); }
.sheet-peek span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-peek .btn-peek { width: auto; margin: 0; padding: 8px 18px; flex-shrink: 0; }
/* the coach strip: three tips under the header on a first visit (layout stage 5) */
.coach { position: relative; margin-top: 12px; padding: 10px 36px 10px 12px; border: 1px solid #cfe3d7; border-radius: 8px;
  background: #f1f7f3; font-size: 12.5px; line-height: 1.45; }
.coach ol { margin: 0; padding-left: 18px; }
.coach li + li { margin-top: 3px; }
.coach-close { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--ink-secondary); font-size: 14px; cursor: pointer; border-radius: 6px; }
.coach-close:hover { background: #e2eee7; }
.view-tab {
  min-height: 40px; border: 0; border-radius: 8px; background: #eef1ef; color: var(--ink);
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.view-tab:hover { background: #e2e8e4; }
.view-tab[aria-selected="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.view-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-options { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.more-options > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); }
#scenario-block #run-forecast-btn { margin-top: 12px; }
/* "Compare two scenarios" (feature idea 17) */
/* "Compare scenarios" (feature idea 17, rebuilt 2026-10-20; app.js cxOpen): one button in the panel, the rest in a popup */
.compare-launch { margin-top: 10px; }
.compare-launch .btn-ghost { width: 100%; min-height: 40px; font-weight: 600; color: var(--accent); border: 2px solid var(--accent); border-radius: 8px; background: #fff; cursor: pointer; }
#cmp-dialog { width: min(1180px, calc(100% - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 1px solid #cfd6d1; border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3); color: var(--ink); overflow: hidden; }
#cmp-dialog[open] { display: flex; flex-direction: column; }
#cmp-dialog::backdrop { background: rgba(16,24,21,.5); }
.cmp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.cmp-head h2 { margin: 0; font-size: 19px; }
.cmp-head .caption { margin: 2px 0 0; }
.cmp-head-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.cmp-x { width: 40px; height: 40px; }
.cmp-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.cmp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px;
  border-top: 1px solid var(--line); background: #fafbfa; }
.cmp-foot .cx-msg { flex-basis: 100%; margin: 0; }
.cx-sec { display: flex; flex-direction: column; gap: 8px; }
.cx-sec h3 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.cx-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cx-num { width: 24px; height: 24px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.cx-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-width: 460px; }
.cx-tabs button { min-height: 40px; border: 0; border-radius: 8px; background: #eef1ef; font: inherit; font-size: 13.5px; cursor: pointer; }
.cx-tabs button[aria-selected="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.cx-sec input[type="search"], .cx-coords input { height: 40px; border: 1px solid var(--control-line); border-radius: 8px; padding: 0 12px; font: inherit;
  font-size: 14px; width: 100%; max-width: 460px; box-sizing: border-box; }
.cx-sec input[type="search"]:focus, .cx-coords input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.cx-results { list-style: none; margin: 0; padding: 0; max-width: 460px; display: flex; flex-direction: column; gap: 2px; }
.cx-results button { width: 100%; text-align: left; display: flex; flex-direction: column; padding: 6px 10px; border: 0; border-radius: 6px;
  background: #f6f8f7; font: inherit; font-size: 13.5px; cursor: pointer; }
.cx-results button:hover, .cx-results button:focus-visible { background: var(--accent-soft); }
.cx-r-sub { font-size: 12px; color: var(--ink-secondary); }
.cx-chip { max-width: 460px; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); color: #1d4f38; font-size: 13.5px; }
.cx-chip-sub { font-size: 12.5px; color: #3d6b55; }
.cx-coords { display: flex; gap: 10px; max-width: 460px; }
.cx-field { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--ink-secondary); }
.cx-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.cx-group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cx-group legend { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-secondary); padding: 0 0 4px; }
.cx-opt { display: flex; align-items: flex-start; gap: 10px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.cx-opt.is-on { background: #f1f7f3; outline: 1px solid #cfe3d7; }
.cx-opt.is-off { opacity: .5; cursor: default; }
.cx-opt input { width: 18px; height: 18px; accent-color: var(--accent); margin: 1px 0 0; flex-shrink: 0; }
.cx-sw { width: 14px; height: 4px; border-radius: 2px; margin-top: 9px; flex-shrink: 0; }
.cx-opt-t { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cx-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-secondary); }
.cx-h select { height: 36px; border: 1px solid var(--control-line); border-radius: 8px; font: inherit; font-size: 13px; }
.cx-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-btns .btn-ghost { min-height: 40px; padding: 0 14px; }
.cx-go { min-height: 44px; padding: 0 22px; border: 0; border-radius: 8px; background: var(--accent); color: #fff; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; }
.cx-go:disabled { opacity: .5; cursor: default; }
.cx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cx-chipbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid; border-radius: 18px;
  background: #fff; font: inherit; font-size: 13px; cursor: pointer; }
.cx-chipbtn[aria-pressed="false"] { background: #f3f5f4; color: var(--ink-muted); border-color: #c9d1cc !important; text-decoration: line-through; }
.cx-line { display: inline-block; width: 18px; height: 0; border-top: 3px solid; flex-shrink: 0; vertical-align: middle; margin-right: 6px; }
.cx-chipbtn .cx-line { margin-right: 0; }
.cx-hist { border-top-color: #2a6f4f; }
.cx-mt { border-top: 2px dashed #b3261e; }
.cx-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cx-ranges, .cx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cx-range, .cx-tool { min-height: 36px; min-width: 36px; padding: 0 10px; border: 1px solid #c9d1cc; border-radius: 8px; background: #fff; font: inherit;
  font-size: 13px; cursor: pointer; }
.cx-range[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.cx-tools .caption { margin: 0 0 0 6px; }
.cx-chart { position: relative; width: 100%; }
.cx-chart svg { display: block; width: 100%; height: auto; user-select: none; }
.cx-tip { position: absolute; top: 40px; min-width: 190px; padding: 8px 10px; background: #fff; border: 1px solid #c9d1cc; border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: 12.5px; pointer-events: none; display: flex; flex-direction: column; gap: 3px; }
.cx-tip[hidden] { display: none; }
.cx-tip-h { font-weight: 600; margin-bottom: 2px; }
.cx-tip-r { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.cx-tip-r span:nth-child(2) { flex: 1; }
.cx-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 12.5px; color: var(--ink-secondary); }
.cx-k { display: inline-flex; align-items: center; gap: 6px; }
.cx-bandsw { width: 18px; height: 10px; opacity: .3; display: inline-block; }
.cx-key select { height: 32px; border: 1px solid var(--control-line); border-radius: 6px; font: inherit; font-size: 12.5px; }
.cx-tablewrap { overflow-x: auto; }
.cx-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.cx-table th, .cx-table td { padding: 8px 10px; border-bottom: 1px solid #eef1ef; text-align: left; vertical-align: top; }
.cx-table thead th { border-bottom: 2px solid var(--line); font-size: 12.5px; white-space: nowrap; }
.cx-table tbody th { font-weight: 400; min-width: 200px; }
.cx-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-of { font-size: 12px; color: var(--ink-secondary); }
.cx-more { font-size: 13px; color: var(--ink-secondary); }
.cx-more summary { cursor: pointer; color: var(--accent); }
@media (max-width: 760px) {
  #cmp-dialog { width: 100%; height: 100%; max-height: 100%; border-radius: 0; margin: 0; }
  .cx-groups { grid-template-columns: minmax(0, 1fr); }
  .cmp-head, .cmp-body, .cmp-foot { padding-left: 14px; padding-right: 14px; }
  .cx-tools .caption { display: none; }
  .cx-table tbody th { min-width: 150px; }
  .cmp-head h2 { font-size: 16px; }
  .cmp-head { padding-top: 10px; padding-bottom: 10px; }
  #cmp-back { padding: 0 8px; }
  .cmp-foot { padding-top: 8px; padding-bottom: 8px; }
  .cmp-foot > .cx-go { display: none; } /* the header's close button is enough on a phone */
  .cmp-foot .cx-btns .btn-ghost { min-height: 38px; font-size: 13px; }
}

.panel-header h1 { font-size: 17px; margin: 0 0 4px; }
.panel-header .sub { font-size: 12px; color: var(--ink-secondary); line-height: 1.5; margin: 0; }

.block { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; }
.block:first-of-type { border-top: none; margin-top: 18px; padding-top: 0; }

.block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.block-head h2 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-secondary); margin: 0; font-weight: 700; }

.month-label {
  font-family: "Cascadia Mono", "Consolas", monospace;
  font-weight: 700; font-size: 13px; color: var(--accent);
  background: var(--accent-soft); padding: 3px 8px; border-radius: 6px;
}

/* time controls: a bar along the bottom of the map, left of the panel (layout as in the surfacewater app). Two thirds of
   the map beside the panel (at least 560 px where there is room), centred on the screen; where centring would run it
   under the panel, it sits as near the centre as the panel allows. The panel takes 16 + 340 + 16 px on the right. */
#timebar {
  --tbw: max(min(560px, 100% - 388px), (100% - 388px) * 2 / 3);
  position: absolute; bottom: 16px; z-index: 1000; box-sizing: border-box;
  width: var(--tbw); left: max(16px, min(50% - var(--tbw) / 2, 100% - 372px - var(--tbw)));
  background: var(--panel); border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,.25);
  padding: 8px 14px 6px;
}
#timebar .tb-row { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
#timebar .btn-ghost { padding: 4px 10px; }
#timebar .tb-opts { margin-left: auto; }
#timebar .tb-note { font-size: 11.5px; font-weight: 700; color: var(--series-gnn); }
#timebar .tb-slide { flex-wrap: nowrap; margin-top: 2px; align-items: flex-start; }
#timebar .tb-end { font-size: 10.5px; color: var(--ink-muted); font-family: monospace; white-space: nowrap; line-height: 16px; margin-top: 6px; }
/* the slider: a drawn bar (filled to the thumb, forecast months tinted) and a white tick at every January under a
   transparent range input; the thumb is 16 px, so its centre runs from 8 px to width - 8 px and ticks / labels use that span */
#timebar .tb-track { position: relative; flex: 1; min-width: 0; padding-top: 6px; }
#timebar .tb-bar { position: absolute; left: 0; right: 0; top: 10px; height: 8px; border-radius: 4px; background: #b4bcb8; }
#timebar .tb-ticks { position: absolute; left: 8px; right: 8px; top: 10px; height: 8px; pointer-events: none; }
#timebar .tb-ticks i { position: absolute; top: 0; width: 2px; height: 8px; margin-left: -1px; background: #fff; opacity: .9; }
#timebar .tb-years { position: relative; height: 14px; margin: 1px 8px 0; pointer-events: none; }
#timebar .tb-years span { position: absolute; transform: translateX(-50%); font-size: 10px; line-height: 14px; color: var(--ink-muted);
  font-family: monospace; white-space: nowrap; }
#time-slider { position: relative; z-index: 1; display: block; width: 100%; height: 16px; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer; }
#time-slider::-webkit-slider-runnable-track { height: 16px; background: transparent; }
#time-slider::-moz-range-track { height: 16px; background: transparent; }
#time-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 3px solid var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.35); box-sizing: border-box; }
#time-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,.35); box-sizing: border-box; }
#time-slider:focus-visible { outline: none; }
#time-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
#time-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
#timebar .tb-goto { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-secondary); }
#timebar .tb-goto input { width: 76px; font: 12px "Cascadia Mono", "Consolas", monospace; padding: 3px 6px; border: 1px solid var(--control-line);
  border-radius: 6px; color: var(--ink); background: #fff; }
#timebar .tb-goto input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
#timebar .tb-goto input.bad { border-color: var(--danger); outline-color: var(--danger); }
.leaflet-bottom.leaflet-left { bottom: calc(var(--tb-h, 0px) + 16px); }
.slider-scale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-muted); margin-top: 4px; font-family: monospace; }
#slider-boundary-label { color: var(--series-gnn); font-weight: 700; }

.playback-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 10px; }

.btn-ghost, .btn-primary {
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  border-radius: 8px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--line);
}
.btn-ghost { background: #fff; color: var(--ink); }
.btn-ghost:hover { background: #f4f6f4; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); width: 100%; margin-top: 14px; }
.btn-primary:hover { background: #235e42; }
.btn-primary:disabled { background: var(--ink-muted); border-color: var(--ink-muted); cursor: not-allowed; }

.range-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 8px 0 2px; }
.range-toggle button {
  font-family: inherit; font-size: 11px; font-weight: 600; padding: 4px 10px;
  background: #fff; color: var(--ink-secondary); border: 0; cursor: pointer;
}
.range-toggle button + button { border-left: 1px solid var(--line); }
.range-toggle button:hover { background: #f4f6f4; }
.range-toggle button:disabled { color: var(--ink-tertiary, #9aa29e); cursor: not-allowed; background: #fff; }
.range-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.popup-tabs { margin: 2px 0 6px; } /* the map popup's chart tabs (app.js popupTabs) */
.units-toggle { display: flex; margin: 0 0 8px; }
.units-toggle button { flex: 1; }

.checkbox-row { font-size: 12.5px; color: var(--ink-secondary); display: flex; align-items: center; gap: 6px; }

.ramp-bar { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--seq-1), var(--seq-2), var(--seq-3), var(--seq-4), var(--seq-5)); }
.ramp-ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink-muted); margin-top: 5px; font-family: monospace; }

.caption { font-size: 11.5px; color: var(--ink-muted); line-height: 1.55; margin: 8px 0 0; }

.field-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--ink-secondary); margin: 12px 0 5px; }
select, #custom-precip {
  width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--control-line);
  font-family: inherit; font-size: 12.5px; background: #fff; color: var(--ink);
}
#point-q, #point-depth, .ask-row input[type="text"], .per-year-input { border: 1px solid var(--control-line); border-radius: 6px; }
/* keyboard focus on the rows that open a chart or a GSA (app.js rowKeys) and on anything the UA ring may not reach */
tr[tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* a fold's heading holds a real button (app.js scanFolds): the heading keeps its look, the button takes the focus ring */
.fold-btn { all: unset; display: inline; font: inherit; color: inherit; cursor: pointer; }
.fold-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* less motion when the system asks for it (WCAG 2.3.3): the map's own flights and zooms are turned off in app.js */
@media (prefers-reduced-motion: reduce) {
  #loading-overlay.hidden { transition: none; }
  html { scroll-behavior: auto; }
}
#metric-select { margin-bottom: 10px; }
#custom-precip { margin-top: 6px; }

#forecast-status { min-height: 14px; }
#forecast-status.error { color: var(--danger); }
#forecast-status.ok { color: var(--accent); }

#well-tooltip-content { font-size: 12.5px; color: var(--ink-secondary); line-height: 1.7; }
#well-tooltip-content b { color: var(--ink); }

.leaflet-popup-content { font-size: 12.5px; }

/* narrow viewport: panel becomes a bottom sheet instead of a right rail */
@media (max-width: 760px) {
  #panel {
    top: auto; right: 8px; left: 8px; bottom: calc(var(--tb-h, 90px) + 16px); width: auto; max-width: none;
    max-height: calc(60vh - var(--tb-h, 90px));
  }
  /* the bottom sheet (layout stage 5): peek = the handle, the view switch and one line; half = 60 % of the screen
     (the old sheet); full = up to the top of the screen. The page opens in peek so the map shows. */
  .sheet-handle { display: block; }
  #panel[data-sheet="peek"] { max-height: none; height: var(--peek-h, 150px); overflow: hidden; box-sizing: border-box; padding-bottom: 0; }
  #panel[data-sheet="peek"] .sheet-peek { display: flex; }
  #panel[data-sheet="full"] { top: 8px; max-height: none; }
  /* the time bar in one row: Play, the month, the slider ("Go to" and the well toggle stay off on phones; the
     wells checkbox is in the Valley view's layer list) */
  #timebar { display: flex; align-items: center; gap: 8px; }
  #timebar .tb-row:first-child { flex: 0 0 auto; flex-wrap: nowrap; gap: 6px; }
  #timebar .tb-goto, #timebar .tb-opts, #timebar #slider-boundary-label, #timebar .tb-end, #timebar .tb-years { display: none; }
  #timebar .tb-slide { flex: 1; min-width: 0; margin-top: 0; }
  #timebar { left: 8px; right: 8px; bottom: 8px; width: auto; padding: 6px 10px 4px; }
  .leaflet-bottom.leaflet-left { bottom: calc(var(--tb-h, 0px) + 8px); }
}

.inputs-block { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.inputs-block summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); }
.input-row { margin-top: 12px; }
.input-row .input-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-secondary); }
.input-row .input-value { font-family: monospace; font-weight: 400; white-space: nowrap; }
.input-row input[type="range"], .input-row select { width: 100%; margin-top: 5px; }
.tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: #efe9dd; color: #7a5a1f; }
.tag-constrained { background: #e1efe6; color: #2a6f4f; }
.btn-small { margin-top: 12px; padding: 4px 10px; font-size: 11.5px; }

.credits ul { margin: 0; padding-left: 16px; font-size: 11px; line-height: 1.55; color: var(--ink-secondary); }
.credits li { margin-bottom: 2px; }
.copyright { margin: 12px 0 0; font-size: 11.5px; font-weight: 600; color: var(--ink-secondary); }

/* About dialog */
.header-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.header-buttons .btn-small { margin-top: 0; }
#intro-dialog, #about-dialog { max-width: 720px; width: calc(100% - 32px); max-height: 85vh; padding: 0; border: 1px solid #cfd6d1;
  border-radius: 8px; color: #1d2621; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
#intro-dialog::backdrop, #about-dialog::backdrop { background: rgba(16,24,21,.45); }
#intro-dialog { max-width: 640px; }
.intro-lede { font-size: 14.5px; margin: 14px 0 4px; }
.intro-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.intro-actions .btn-primary { width: auto; margin-top: 0; }

/* loading overlay (initial load) and the forecast spinner */
#loading-overlay { position: absolute; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center;
  background: rgba(20,32,28,.55); }
#loading-overlay.forecast { background: rgba(20,32,28,.25); pointer-events: none; }
/* appear instantly (a fade-in can stall in a busy or background tab); only the fade-out animates */
/* visibility goes once the fade is done, so a screen reader no longer reads the faded card (accessibility audit 2026-10-29) */
#loading-overlay.hidden { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.loading-card { background: #fff; border-radius: 12px; padding: 18px 22px; max-width: 320px; text-align: center;
  box-shadow: 0 6px 28px rgba(0,0,0,.3); }
.loading-card p { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.loading-card .loading-sub { font-size: 11.5px; font-weight: 400; color: var(--ink-secondary); margin-top: 4px; }
.spinner { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; border: 4px solid var(--accent-soft);
  border-top-color: var(--accent); animation: spin .9s linear infinite; }
.spinner.inline { display: inline-block; width: 12px; height: 12px; border-width: 2px; margin: 0 6px 0 0; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } }
/* the side panel sits at z 1000; on a phone it covers the lower map, so keep the card above it */
@media (max-width: 760px) { #loading-overlay { align-items: flex-start; padding-top: 18vh; } }
.about-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; background: #fff; border-bottom: 1px solid #e2e6e2; }
.about-head h2 { margin: 0; font-size: 17px; }
.about-body { padding: 4px 18px 18px; font-size: 13.5px; line-height: 1.5; }
.about-body h3 { font-size: 14.5px; margin: 18px 0 6px; color: #2a6f4f; }
.about-body ul, .about-body ol { padding-left: 20px; margin: 6px 0; }
.about-body li { margin: 4px 0; }
.about-table { border-collapse: collapse; width: 100%; font-size: 12.5px; margin: 6px 0; }
.about-table th, .about-table td { border-bottom: 1px solid #e2e6e2; padding: 5px 6px; text-align: left; vertical-align: top; }
.about-table.narrow { width: auto; }
.about-note { font-size: 12px; color: #55625c; }
/* SGMA thresholds in the GSA panel */
.threshold-box { margin-top: 10px; padding-top: 8px; border-top: 1px solid #e2e6e2; overflow-x: auto; } /* a wide table scrolls in its box, not the panel */
.threshold-box h3 { font-size: 12.5px; margin: 0 0 4px; }
/* foldable panel sections (app.js initFolds; user 2026-10-21): every block head and panel box title folds its section,
   the Scenario card excepted; the caret sits at the left of the head (user 2026-10-21) */
.fold-head { cursor: pointer; user-select: none; }
.fold-head:hover h2, h3.fold-head:hover { color: var(--accent); }
.block > .fold-head { justify-content: flex-start; }
.threshold-box > h3.fold-head { display: flex; align-items: baseline; }
.block > .fold-head::before, .threshold-box > h3.fold-head::before { content: "▾"; flex: none; width: 14px; margin-right: 4px;
  font-size: 13px; line-height: 1; color: var(--ink-secondary); font-weight: 400; }
.foldable.folded > .fold-head::before { content: "▸"; }
.foldable.folded > :not(.fold-head) { display: none !important; }
.block.folded > .block-head { margin-bottom: 0; }
.threshold-box.folded > h3 { margin-bottom: 0; }
ul.changes-list { padding-left: 16px; margin: 4px 0 0; } ul.changes-list li { margin: 2px 0; }
.threshold-forecast { color: #1d2621; }
.about-gsa { margin-top: 10px; }
.about-gsa summary { cursor: pointer; font-weight: 600; color: var(--ink-secondary); }
.about-gsa p { margin: 6px 0 0; }
.more-info summary { cursor: pointer; font-weight: 600; color: var(--ink-secondary); }
.more-info p { margin: 6px 0 0; }
/* exports and links (GSA feature 6) */
.share-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inline-select { width: auto; padding: 3px 6px; font-size: 11.5px; margin-left: 4px; }
.rms-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 11px; }
.rms-table th, .rms-table td { text-align: left; padding: 2px 4px; border-bottom: 1px solid #eef1ee; font-weight: 400; }
.rms-table th { color: var(--ink-muted); font-size: 10.5px; }
.rms-table td.num, .rms-table th.num { text-align: right; font-family: monospace; white-space: nowrap; }
.rms-table th.num { white-space: normal; } /* long month headers ("Oct 2026 forecast") wrap instead of widening the panel */
.rms-table .pub { color: var(--ink-muted); font-size: 10px; }
.rms-row { cursor: pointer; }
.rms-row:hover, .rms-row.open { background: #f4f6f4; }
.rms-table td.below-mt { color: #b3261e; font-weight: 700; }
.aquifer-row { display: block; margin-top: 6px; }
.dom-list { max-height: 320px; overflow-y: auto; margin-top: 4px; }
.dom-details summary { cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--ink-secondary); margin-top: 8px; }
.jump-btn { margin-top: 6px; }
.gsa-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* a control that doesn't apply (e.g. the horizon during a past-year replay): clearly grayed out */
select:disabled { background: #eef0ee; color: var(--ink-muted); border-color: #e6e9e6; cursor: not-allowed; opacity: .7; }
.field-label.is-disabled { color: var(--ink-muted); }
.field-note { font-weight: 400; font-size: 11px; color: var(--ink-muted); }
/* what a scenario implies for surface water (GSA feature 4) */
.supply-implied { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; color: var(--ink-secondary); }
.supply-implied h3 { font-size: 12px; margin: 0 0 6px; color: var(--ink); }
.supply-implied table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.supply-implied th, .supply-implied td { text-align: left; padding: 2px 4px; border-bottom: 1px solid #eef1ee; font-weight: 400; }
.supply-implied th { color: var(--ink-muted); font-size: 10.5px; }
.supply-implied td.num { text-align: right; font-family: monospace; white-space: nowrap; color: var(--ink); }
.supply-implied .pub { color: var(--ink-muted); font-size: 10px; }
.supply-implied .wyt { margin: 2px 0; }
.supply-implied .wyt b { color: var(--ink); }
#threshold-row { margin-top: 8px; }
/* groundwater basin layer */
#basin-block .caption:last-child { margin-top: 10px; }
.basin-label { pointer-events: none; }
.basin-label span { display: inline-block; transform: translate(-50%, -50%); color: #1f2a6b; font-size: 11px;
  font-weight: 700; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
/* Kern groundwater-banking area label */
.banking-label { pointer-events: none; }
.banking-label span { display: inline-block; transform: translate(-50%, -115%); color: #a02b6d; font-size: 11px;
  font-weight: 700; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
/* grayed-out subbasin (Kettleman Plain) label and notes */
.grayed-label { pointer-events: none; }
.grayed-label span { display: inline-block; transform: translate(-50%, 60%); color: #4a4f4c; font-size: 11px;
  font-weight: 700; white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; }
.grayed-note { margin: 6px 0 0; padding: 5px 7px; font-size: 11.5px; line-height: 1.35; color: #3d3f3e;
  background: #ecebe6; border-left: 3px solid #8a8d8b; border-radius: 3px; }
.grayed-note.low-confidence { background: #fbf1e4; border-left-color: #c2702e; }
.basin-gsa-list { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.link-btn { font: inherit; font-size: 11.5px; color: var(--accent); background: none; border: 0; padding: 1px 0;
  cursor: pointer; text-decoration: underline; text-align: left; }
.link-btn:hover { color: #235e42; }

/* rain by water year (review queue row 5) */
#per-year-inputs { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.per-year { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-secondary); }
.per-year-input { width: 58px; }

/* map key (app.js renderMapKey; user request 2026-10-13, as in the surfacewater app): what the colors, dots and
   outlines on the map mean, on the map itself. Open on a wide screen, folded on a phone. */
.map-key { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  padding: 6px 10px; font-size: 11.5px; max-height: calc(100vh - var(--tb-h, 90px) - 260px); overflow-y: auto; }
.map-key.open { width: 250px; padding-bottom: 8px; }
.mk-head { display: flex; gap: 6px; align-items: baseline; width: 100%; border: none; background: none; padding: 0; margin: 0; text-align: left;
  cursor: pointer; color: inherit; font: inherit; font-size: 12px; }
.mk-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.mk-caret { margin-left: auto; font-size: 10px; color: var(--ink-muted); }
.mk-sub { margin: 8px 0 3px; font-size: 10.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.mk-row { display: flex; align-items: center; gap: 7px; margin: 3px 0; line-height: 1.3; }
.mk-row > span { flex: 1; }
.mk-sym { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex: none; }
.mk-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.mk-ln { display: inline-block; width: 22px; height: 0; border-radius: 2px; }
.mk-area { display: inline-block; width: 20px; height: 12px; border-radius: 2px; }
/* a faint ring so the lightest bin of a shading reads against the white key (non-text contrast, 1.4.11) */
.mk-area.mk-bin, .mk-dot.mk-bin { box-shadow: inset 0 0 0 1px rgba(16,24,21,.3); }
.map-key .ramp-bar { height: 10px; margin-top: 4px; }
.map-key .ramp-ticks { font-size: 10px; margin-top: 3px; }
.mk-shade > div { flex-wrap: wrap; row-gap: 3px !important; }
.mk-note { margin: 4px 0 0; color: var(--ink-muted); font-size: 10.5px; line-height: 1.35; }
/* map tools (app.js buildMapTools; user 2026-10-21, as in the surface-water app): the place search and "Ask the map"
   under the Map key, each a fold -- a pill when closed, a card when open */
.map-tools { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; font-size: 12px; width: 290px; max-width: calc(100vw - 72px);
  overflow-y: auto; box-sizing: border-box; pointer-events: none; } /* max-height set by mapToolsFit; the gaps pass clicks to the map */
.mt-fold { pointer-events: auto; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); box-sizing: border-box; }
.mt-fold[open] { flex: 1 1 100%; border-radius: 12px; padding: 4px 10px 8px; }
.mt-fold > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: 12px; padding: 5px 12px 5px 10px;
  list-style: none; user-select: none; }
.mt-fold > summary::-webkit-details-marker { display: none; }
.mt-fold[open] > summary { padding: 3px 0; }
.mt-fold > summary:hover { color: var(--accent); }
.mt-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 999px; }
.mt-ico { width: 14px; height: 14px; flex: none; }
.mt-x { margin-left: auto; font-size: 10px; color: var(--ink-muted); }
.mt-fold:not([open]) .mt-x { display: none; }
.map-tools .place-search { margin: 6px 0 2px; }
.map-tools .place-search input { font-size: 12.5px; padding: 7px 10px; min-height: 0; border-radius: 7px; }
.map-tools #place-list { position: static; max-height: 45vh; margin-top: 4px; }
.map-tools #ask-block .caption { font-size: 11px; margin: 6px 0 0; }
.map-tools #ask-block .ask-row input[type="text"] { flex-basis: 100%; }

/* valley / subbasin summaries (app.js summaryBox; user request 2026-10-13): one fold-out line per measure */
.sum-box { margin-top: 6px; }
.sum-row { border-top: 1px solid var(--line); }
.sum-row:first-child { border-top: none; }
.sum-row > summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; cursor: pointer;
  padding: 6px 0; list-style: none; font-size: 12px; }
.sum-row > summary::-webkit-details-marker { display: none; }
.sum-row > summary::before { content: "▸"; grid-row: 1 / span 2; color: var(--ink-muted); font-size: 10px; margin-right: 2px; }
.sum-row[open] > summary::before { content: "▾"; }
.sum-row > summary { grid-template-columns: 12px 1fr auto; }
.sum-label { font-weight: 600; color: var(--ink); }
.sum-vals { font-family: "Cascadia Mono", "Consolas", monospace; font-size: 12px; white-space: nowrap; text-align: right; }
.sum-vals b { color: var(--ink); }
.sum-vals .arrow { color: var(--ink-muted); margin: 0 3px; }
.sum-vals .fc { color: var(--series-gnn); font-weight: 700; }
.sum-sub { grid-column: 2 / span 2; font-size: 10.5px; color: var(--ink-muted); }
.sum-body { padding: 0 0 8px 14px; max-height: 320px; overflow-y: auto; }
.sum-body .rms-table tr.sum-gsa { cursor: pointer; }
.sum-body .rms-table tr.sum-gsa:hover td { background: var(--accent-soft); }
.sum-body .caption { margin: 4px 0 0; }
.rms-more { margin-top: 6px; }

/* Valley view map layers (layout stage 2): the count after each layer's name */
.overlay-count { font-size: 11.5px; color: var(--ink-secondary); white-space: nowrap; }
.overlay-count-sub { white-space: normal; padding-left: 21px; margin: -2px 0 4px; } /* a long count on its own line below its box (the ISW layer) */
.overlay-count-sub:empty { display: none; }
/* "Ask the map" (question builder, 2026-10-18) */
.ask-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.ask-row select { flex: 1 1 140px; min-width: 0; font-size: 12.5px; }
.ask-row .btn-small { margin-top: 0; }
.ask-row input[type="text"] { flex: 1 1 200px; min-width: 0; font-size: 12.5px; padding: 4px 6px; }
.ask-answer { margin-top: 8px; padding: 8px 10px; background: #f3f6f4; border-radius: 6px; font-size: 12.5px; line-height: 1.5; }
.ask-answer.stale { opacity: 0.55; }
.ask-answer .ask-note { font-size: 11.5px; color: var(--ink-muted); margin: 4px 0 0; }
.ask-answer details { margin-top: 4px; font-size: 11.5px; color: var(--ink-muted); }
.ask-answer pre { white-space: pre-wrap; font-size: 11px; margin: 4px 0 0; }
.recharge-row { font-weight: 600; }
.recharge-note { margin: -4px 0 8px 22px; }
#overlay-when { margin-bottom: 8px; }

/* the depth / elevation toggle, shared by every view (between the Scenario card and the views) */
.units-row { margin-top: 14px; }

/* "any point" lookup (feature idea 3): the panel card and the map pin */
#point-depth { width: 120px; font-size: 12.5px; padding: 4px 6px; }
.point-card { margin-top: 8px; padding: 8px 10px; background: #f3f6f4; border-radius: 6px; font-size: 12.5px; line-height: 1.5; }
.point-card[hidden] { display: none; }
.point-card h3 { font-size: 12px; margin: 10px 0 2px; color: var(--ink-secondary); }
.point-title { font-weight: 700; font-size: 13px; }
.point-where { font-size: 11.5px; color: var(--ink-secondary); }
.point-line { margin: 2px 0 0; }
.point-note { margin: 4px 0 0; font-size: 11.5px; color: #7a5a1f; }
.point-wells { list-style: none; margin: 0; padding: 0; }
.point-wells li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.point-wells li:last-child { border-bottom: none; }
.point-wells .point-open { margin-top: 3px; padding: 2px 8px; font-size: 11px; }
.point-table { border-collapse: collapse; width: 100%; margin-top: 2px; }
.point-table td { padding: 2px 0; vertical-align: top; }
.point-table td:last-child { text-align: right; white-space: nowrap; padding-left: 8px; font-weight: 600; }
.point-table td.point-short { color: var(--danger); }
.point-card .more-info { margin-top: 8px; }
.leaflet-container.point-picking, .leaflet-container.point-picking .leaflet-interactive { cursor: crosshair; }
.point-pin span { position: absolute; left: 3px; top: 0; width: 16px; height: 16px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: #1d63c9; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.point-pin span::after { content: ""; position: absolute; left: 4px; top: 4px; width: 4px; height: 4px; border-radius: 50%; background: #fff; }