:root {
  color-scheme: light;
  --surface-0: #eef0f2;
  --surface-1: #fcfcfb;
  --surface-2: #f3f3f1;
  --border: #dddcd7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #74736c;   /* 4.6:1 on surface-1 (audit part 2, L-06; was #77766f, 4.44:1) */
  --accent: #2a78d6;
  --badge-bg: #e3eefb;
  --badge-fg: #1c5cab;
  --sys-swp: #2a78d6;
  --sys-cvp: #eb6834;
  --sys-friant: #1baf7a;
  --sys-local: #4a3aa7;
  --sys-river: #7f9db3;
  --sys-delta: #7f9db3;
  --unmeasured: #9a9993;
  --grid: #e6e5e1;
  --highlight: #1e6fd9;
  --acct-loss: #e34948;
  --acct-loss-text: #c53030;  /* >= 4.5:1 on the light surfaces, for small text (the plain loss color is 3.8:1) */
  --acct-gain: #2a78d6;
  --plan-under: #1b9e9a;
  --plan-over: #b5469b;
  --wyt-W: #1c5cab;
  --wyt-AN: #7fb0e6;
  --wyt-BN: #c9c7bf;
  --wyt-D: #e9a36a;
  --wyt-C: #c4410c;
  --wyt-C2: #7a1f00;
  --wyt-X: #4b2a6f;
  /* event markers (F10), one per type; muted so the series line stays dominant */
  --ev-drought_proclamation: #8a5fb5;
  --ev-tucp_order: #cf7f2e;
  --ev-curtailment: #c0463f;
  --ev-regulation: #4a6fa5;
  --ev-operations: #3f9a62;
  --ev-infrastructure: #8a7560;
  --ev-flood: #2a9d9a;
  /* map pins: eight categorical colors, in the order a new pin takes them; not the selection blue, not the system colors */
  --pin-1: #e61730;
  --pin-2: #11a1b4;
  --pin-3: #c543d2;
  --pin-4: #8f9817;
  --pin-5: #157f58;
  --pin-6: #c37294;
  --pin-7: #705ea5;
  --pin-8: #8e6201;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface-0: #111111;
    --surface-1: #1a1a19;
    --surface-2: #242423;
    --border: #383835;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #9a998f;
    --accent: #3987e5;
    --badge-bg: #1c2f48;
    --badge-fg: #9ec5f4;
    --sys-swp: #3987e5;
    --sys-cvp: #d95926;
    --sys-friant: #199e70;
    --sys-local: #d8d7cf;
    --sys-river: #6f8ea6;
    --sys-delta: #6f8ea6;
    --unmeasured: #6c6b66;
    --grid: #2e2e2c;
    --highlight: #6da7ec;
  --acct-loss: #e66767;
  --acct-loss-text: #e66767;
  --acct-gain: #3987e5;
  --plan-under: #3bb8b3;
  --plan-over: #d070b8;
  --wyt-W: #3987e5;
  --wyt-AN: #8bb8ec;
  --wyt-BN: #6c6b66;
  --wyt-D: #d98a4f;
  --wyt-C: #e0662f;
  --wyt-C2: #ffb08a;
  --wyt-X: #b59ae0;
  --ev-drought_proclamation: #b48ad6;
  --ev-tucp_order: #e0a052;
  --ev-curtailment: #e0706a;
  --ev-regulation: #7a9fd0;
  --ev-operations: #62b983;
  --ev-infrastructure: #b09a84;
  --ev-flood: #4cc0bc;
  /* map pins: eight categorical colors, in the order a new pin takes them; not the selection blue, not the system colors */
  --pin-1: #e61730;
  --pin-2: #11a1b4;
  --pin-3: #c543d2;
  --pin-4: #8f9817;
  --pin-5: #157f58;
  --pin-6: #c37294;
  --pin-7: #705ea5;
  --pin-8: #8e6201;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #111111;
  --surface-1: #1a1a19;
  --surface-2: #242423;
  --border: #383835;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #9a998f;
  --accent: #3987e5;
  --badge-bg: #1c2f48;
  --badge-fg: #9ec5f4;
  --sys-swp: #3987e5;
  --sys-cvp: #d95926;
  --sys-friant: #199e70;
  --sys-local: #d8d7cf;
  --sys-river: #6f8ea6;
  --sys-delta: #6f8ea6;
  --unmeasured: #6c6b66;
  --grid: #2e2e2c;
  --highlight: #6da7ec;
  --acct-loss: #e66767;
  --acct-loss-text: #e66767;
  --acct-gain: #3987e5;
  --plan-under: #3bb8b3;
  --plan-over: #d070b8;
  --wyt-W: #3987e5;
  --wyt-AN: #8bb8ec;
  --wyt-BN: #6c6b66;
  --wyt-D: #d98a4f;
  --wyt-C: #e0662f;
  --wyt-C2: #ffb08a;
  --wyt-X: #b59ae0;
  --ev-drought_proclamation: #b48ad6;
  --ev-tucp_order: #e0a052;
  --ev-curtailment: #e0706a;
  --ev-regulation: #7a9fd0;
  --ev-operations: #62b983;
  --ev-infrastructure: #b09a84;
  --ev-flood: #4cc0bc;
  /* map pins: eight categorical colors, in the order a new pin takes them; not the selection blue, not the system colors */
  --pin-1: #e61730;
  --pin-2: #11a1b4;
  --pin-3: #c543d2;
  --pin-4: #8f9817;
  --pin-5: #157f58;
  --pin-6: #c37294;
  --pin-7: #705ea5;
  --pin-8: #8e6201;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--surface-0);
  color: var(--text-primary);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
#map { position: absolute; inset: 0; background: var(--surface-0); }

#panel {
  position: absolute; top: 12px; right: 12px; bottom: 12px;
  width: 400px; max-width: calc(100vw - 24px);
  overflow-y: auto; z-index: 1000;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.14);
  padding: 16px 18px 20px;
}
/* time controls: a bar along the bottom of the map, left of the panel (its height is kept in --tb-h by app.js initTimebar,
   so the map's bottom-left controls sit above it and, on a phone, the panel sits above it) */
#timebar {
  /* 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 */
  --tbw: max(min(560px, 100% - 448px), (100% - 448px) * 2 / 3);
  position: absolute; bottom: 12px; z-index: 1000; box-sizing: border-box;
  width: var(--tbw); left: max(12px, min(50% - var(--tbw) / 2, 100% - 436px - var(--tbw)));
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.14); padding: 8px 14px 6px;
}
#timebar .tb-row { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; }
#timebar .tb-play { display: inline-flex; gap: 4px; }
#timebar .tb-play button { padding: 3px 9px; }
#timebar .tb-opts { display: inline-flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-left: auto; }
#timebar .tb-slide { flex-wrap: nowrap; margin-top: 2px; }
#timebar .tb-slide input[type=range] { flex: 1; min-width: 0; margin: 6px 0; }
/* year ticks under the slider (app.js sliderTicks): a mark per year, a label every two (every four when narrow) */
#timebar .tb-track { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; --th: 16px; }
#timebar .tb-track input[type=range] { width: 100%; margin: 6px 0 0; }
#timebar .tb-ticks { position: relative; height: 18px; margin: 0 calc(var(--th) / 2); pointer-events: none; }
#timebar .tb-ticks:empty { display: none; }
#timebar .tb-tick { position: absolute; top: 0; width: 1px; height: 4px; background: var(--text-muted); opacity: .7; }
#timebar .tb-tick.lab { height: 7px; opacity: 1; }
#timebar .tb-tick-l { position: absolute; top: 7px; transform: translateX(-50%); font-size: 10px; line-height: 1.1; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
#timebar .tb-go { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
#timebar .tb-go input { width: 6.5em; padding: 2px 6px; font-size: 12px; }
#timebar .tb-go-msg { color: var(--text-muted); }
#timebar .tb-go-msg.bad { color: var(--acct-loss, #c4410c); }
#timebar .wyt-line { margin: 0; }
#timebar .wyt-line:empty { display: none; }
.leaflet-bottom.leaflet-left { bottom: calc(var(--tb-h, 0px) + 12px); }
#panel header h1 { font-size: 18px; margin: 0 0 4px; }
.sub { margin: 0 0 8px; color: var(--text-secondary); font-size: 13px; }
section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 12px; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 0 0 8px; }
h3 { font-size: 14px; margin: 14px 0 4px; }
/* collapsible panel sections: the heading is the toggle (app.js initCollapse) */
.sec-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; }
.sec-toggle::before { content: "\25BE"; font-size: 10px; width: 10px; display: inline-block; transition: transform .15s; }
section.collapsed .sec-toggle::before { transform: rotate(-90deg); }
.sec-toggle:hover { color: var(--text-primary); }
.sec-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
section.collapsed h2 { margin-bottom: 0; }
section.collapsed > .row { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .sec-toggle::before { transition: none; } }
.row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.between { justify-content: space-between; }
.small { font-size: 12px; }
.muted { color: var(--text-muted); }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.badge { background: var(--badge-bg); color: var(--badge-fg); border-radius: 6px; padding: 2px 8px; font: 600 13px ui-monospace, Consolas, monospace; }
button {
  font: inherit; color: var(--text-primary); background: var(--surface-1);
  border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer;
}
button:hover { background: var(--surface-2); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.linkish { border: none; background: none; color: var(--accent); padding: 2px 0; }
.linkish:hover { background: none; text-decoration: underline; }
.csv-row { gap: 14px; margin: 4px 0 0; }
.search { position: relative; margin: 8px 0 0; }
.search input { width: 100%; font: inherit; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; }
.search input::placeholder { color: var(--text-muted); }
#searchList, .bs-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: 4px; list-style: none;
  max-height: 340px; overflow-y: auto; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
#searchList li, .bs-list li { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; cursor: pointer; }
#searchList .sr-t, .bs-list .sr-t { display: flex; flex-direction: column; flex: 1; min-width: 0; }
#searchList li[aria-selected="true"], .bs-list li[aria-selected="true"] { background: var(--surface-2); outline: 1px solid var(--accent); outline-offset: -1px; }
#searchList li.more, .bs-list li.more { cursor: default; }
.csv-btn { font-size: 12px; }
dialog.doc.wide { max-width: 860px; }
.card-scroll { overflow-x: auto; }
.card-months td { padding-left: 4px; padding-right: 4px; }
.card-btn { margin-left: 4px; }
.bs-line { border-top: 1px dashed var(--border); padding-top: 6px; margin-top: 8px; }
.bs-line .bal { margin: 2px 0; }
.est-row td { color: var(--text-secondary); font-style: italic; }
.cy, .est.cy { color: var(--sys-swp); }
.bal.review td { padding-top: 3px; padding-bottom: 3px; }
.bal.review td.num { white-space: nowrap; }
.est-note { background: var(--surface-2); border-left: 3px solid var(--wyt-D); padding: 6px 8px; border-radius: 4px; }
.cmp-tab { margin-top: 6px; }
.cmp-note { margin: 4px 0; }
.bal td.cmpcol { color: var(--text-secondary); border-left: 1px dashed var(--border); padding-left: 8px; }
select { font: inherit; font-size: 12px; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 2px 4px; }
.cmp td { vertical-align: top; padding-top: 6px; padding-bottom: 6px; }
.cmp-bar { display: flex; height: 10px; border-radius: 3px; overflow: hidden; margin: 4px 0 2px; background: var(--surface-2); }
.cmp-bar i, .cmp-legend i { display: block; height: 100%; }
.cmp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; }
.cmp-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cmp-legend i { width: 12px; height: 10px; border-radius: 2px; }
.cmp-daily { background: var(--accent); }
.cmp-monthly { background: var(--wyt-AN); }
.cmp-estimated { background: var(--wyt-D); }
.cmp-no_record { background: var(--grid); outline: 1px solid var(--border); outline-offset: -1px; }
.cmp-not_published { background: repeating-linear-gradient(45deg, var(--unmeasured) 0 2px, transparent 2px 4px); }
.cmp-strip { display: flex; gap: 1px; margin-top: 4px; }
.cmp-cell { flex: 1; height: 8px; background: var(--accent); border-radius: 1px; cursor: pointer; }
.cmp-cell.cur { outline: 2px solid var(--text-primary); outline-offset: 0; }
.snap-note { background: var(--badge-bg); color: var(--badge-fg); border-radius: 6px; padding: 6px 8px; margin: 4px 0 8px; }
.snap-note a { color: inherit; font-weight: 600; }
/* "This map was updated" (app.js initUpdateCheck): stays at the top of the panel while it scrolls */
.upd-note { position: sticky; top: -16px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; margin: -4px 0 10px; }
.upd-note[hidden] { display: none; }
.upd-btns { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.upd-note button { all: unset; cursor: pointer; color: inherit; font-weight: 600; }
.upd-note #updReload { text-decoration: underline; }
.upd-note button:hover { filter: brightness(.85); }
.upd-note button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 3px; }
.cite { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; user-select: all; overflow-wrap: anywhere; }
.wyt-line { margin: 4px 0 0; color: var(--text-secondary); }
.wyt-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 3px -1px 0; }
.wyt-legend { margin: 2px 0 0; }
.wyt-key { white-space: nowrap; margin-left: 4px; }
.seg { display: flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; margin: 6px 0; }
.seg button { flex: 1; border: none; border-radius: 0; border-right: 1px solid var(--border); padding: 6px 4px; font-size: 13px; }
.seg button:last-child { border-right: none; }
.seg button[aria-checked="true"] { background: var(--accent); color: #fff; }
.seg.mini { margin: 0; }
.seg.mini button { padding: 3px 8px; font-size: 12px; flex: none; }
input[type=range] { width: 100%; accent-color: var(--accent); margin: 8px 0 2px; }
.check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); margin-left: auto; }

.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.legend label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.legend .sw { width: 22px; height: 0; border-top: 4px solid; border-radius: 2px; flex: none; }
.legend .sw.dot { width: 12px; height: 12px; border: 2px solid; border-radius: 50%; }

.bal { width: 100%; border-collapse: collapse; font-size: 13px; }
.bal td { padding: 3px 0; vertical-align: middle; }
.bal td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 8px; }
.bal tr.grp td { padding-top: 8px; font-weight: 600; color: var(--text-secondary); font-size: 12px; }
.bal tr.total td { border-top: 1px solid var(--border); font-weight: 600; }
.bal tr.ck td { border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); font-style: italic; }
.bal tr.ck td.num { font-style: normal; color: var(--text-primary); }
.bal tr.click { cursor: pointer; }
.bal tr.click:hover td { background: var(--surface-2); }
.bal tr.active td, .bal tr.focus td { background: var(--badge-bg); }
.bal tr.active td:first-child { box-shadow: inset 3px 0 0 var(--highlight); padding-left: 6px; }
.bar { height: 6px; border-radius: 0 3px 3px 0; min-width: 1px; }
.barcell { width: 38%; padding-left: 8px !important; }
.barcell.plan { position: relative; }
.bar.alloc { position: absolute; top: 50%; height: 12px; margin-top: -6px; width: 0; min-width: 0; border-left: 2px solid var(--text-primary); border-radius: 0; }
.plan-more summary { cursor: pointer; font-size: 12px; color: var(--accent); margin: 4px 0; }
/* "More info": method, caveats and sources folded under a section's or card's short intro */
details.more-info { margin: 2px 0 6px; }
details.more-info > summary { cursor: pointer; font-size: 12px; color: var(--accent); margin: 4px 0; }
details.more-info > p { margin: 2px 0 4px; }
.est { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.bal.turn td.num:first-child { text-align: right; padding: 3px 8px 3px 0; width: 36px; }
.bal.turn td { font-size: 12px; }

/* system accounting: diverging bars around zero (losses are negative, so left; missing inflow right) */
.barcell.dv { width: 30%; position: relative; background: linear-gradient(var(--border), var(--border)) center / 1px 12px no-repeat; }
.bar.dv { position: absolute; top: 50%; margin-top: -3px; }
.bar.dv.loss { right: 50%; border-radius: 3px 0 0 3px; background: var(--acct-loss); }
.bar.dv.gain { left: 50%; border-radius: 0 3px 3px 0; background: var(--acct-gain); }
.acct td:first-child { padding-right: 4px; }
.acct-detail { background: var(--surface-2); border-radius: 8px; padding: 6px 10px 8px; margin: 8px 0; }
.acct-detail p { margin: 4px 0; }
.bal.ledger td { font-size: 12px; }
.bal.ledger td.sg { width: 14px; color: var(--text-muted); text-align: center; }
.bal.ledger tr.op td { color: var(--text-secondary); font-style: italic; }
.bal.ledger tr.op td.num { font-style: normal; }
.bal.ledger tr.sub td { color: var(--text-secondary); }
.acct-chart { width: 100%; height: auto; display: block; margin-top: 2px; }
.acct-chart .ax { stroke: var(--grid); stroke-width: 1; }
.acct-chart .gridl { stroke: var(--grid); stroke-width: .6; stroke-dasharray: 2 3; }
/* chart zoom controls (app.js "chart zoom"): a row of small buttons above every chart */
.chart-zoom { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.chart-zoom button { padding: 1px 8px; font-size: 12px; line-height: 18px; min-width: 26px; }
.chart-zoom button:disabled { opacity: .4; cursor: default; }
.chart-zoom button:disabled:hover { background: var(--surface-1); }
.chart-zoom .chart-zoom-hint { margin-left: 4px; }
.acct-chart .tk { font-size: 10px; fill: var(--text-muted); }
.acct-chart .tk.cur { fill: var(--text-primary); font-weight: 600; }
.acct-chart .curband { fill: var(--badge-bg); }
.acct-chart .hit { fill: transparent; }
.acct-chart .yr { cursor: pointer; outline: none; }
.acct-chart .yr:hover .hit, .acct-chart .yr:focus-visible .hit { fill: var(--grid); }
.acct-chart .col.loss { fill: var(--acct-loss); }
.acct-chart .col.gain { fill: var(--acct-gain); }
.acct-chart .col.suspect { fill-opacity: .4; }
.acct-chart .op { stroke: var(--text-primary); stroke-width: 2; stroke-linecap: round; }
.acct-chart .nodata { fill: var(--unmeasured); }
.acct-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 2px; }
.acct-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.acct-legend .sw.loss { background: var(--acct-loss); }
.acct-legend .sw.gain { background: var(--acct-gain); }
.acct-legend .sw.op { height: 0; width: 12px; border-top: 2px solid var(--text-primary); border-radius: 0; vertical-align: 3px; }
p.acct-ch { margin-top: 8px !important; }
/* estimates: a separate, dashed and hatched block, never styled like the measured ledger */
.est-block { margin: 10px 0 4px; padding: 6px 8px 6px 12px; border: 1px dashed var(--text-muted); border-radius: 6px; position: relative;
  background: var(--surface-1); }
.est-block::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 6px 0 0 6px;
  background: repeating-linear-gradient(45deg, var(--text-muted) 0 1.5px, transparent 1.5px 4px); }
.est-head { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.est-badge { display: inline-block; font: 600 10px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .05em;
  border: 1px dashed var(--text-secondary); color: var(--text-secondary); border-radius: 4px; padding: 0 5px; margin-right: 4px; vertical-align: 1px; }
/* Sacramento Slough's range (an estimate) inside the Wilkins Slough to Verona ledger table: dashed rows under the measured balance */
.bal tr.est-row td { border-top: 1px dashed var(--text-muted); font-style: italic; vertical-align: top; }
.bal tr.est-row td.num { font-style: normal; white-space: nowrap; }
.bal tr.est-row td .small { margin-top: 2px; }
.bal tr.flood-note td { border-top: 1px solid var(--border, var(--text-muted)); color: var(--text-secondary); }
.bal tr.flood-note td.small { padding-top: 4px; padding-bottom: 4px; }
.bal.est td { font-style: italic; }
.bal.est td.num { font-style: normal; }
.bal.est td.grade { font: 600 11px ui-monospace, Consolas, monospace; color: var(--text-secondary); font-style: normal; cursor: help; }
/* DWR's own accounting (F2, operator layer): a solid bar and a diamond, between the measured ledger and the dashed estimates */
.op-block { margin: 10px 0 4px; padding: 6px 8px 6px 12px; border-left: 4px solid var(--text-secondary); border-radius: 0 6px 6px 0; background: var(--surface-1); }
.op-head { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.op-badge { display: inline-block; font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .05em; border: 1px solid var(--text-secondary);
  color: var(--text-secondary); border-radius: 4px; padding: 0 5px; margin-right: 4px; vertical-align: 1px; }
.bal.oploss td { font-size: 12px; vertical-align: top; }
.bal.oploss td.sg { width: 14px; color: var(--text-muted); text-align: center; }
.bal.oploss tr.mem td:nth-child(2) { padding-left: 14px; color: var(--text-secondary); }
.acct-chart .estband { fill: url(#estHatch); stroke: var(--text-muted); stroke-width: .75; stroke-dasharray: 2 1.5; }
.acct-chart .hatch { stroke: var(--text-muted); stroke-width: 1.2; }
.acct-legend .sw.estsw { border: 1px dashed var(--text-muted); border-radius: 1px;
  background: repeating-linear-gradient(45deg, var(--text-muted) 0 1px, transparent 1px 3px); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 4px 0 8px; }
.stat { background: var(--surface-2); border-radius: 8px; padding: 6px 8px; }
.stat .k { font-size: 11px; color: var(--text-muted); }
.stat .v { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
#chart { margin: 4px -4px 0; min-height: 190px; }
#chart .u-legend { font-size: 12px; color: var(--text-secondary); }
.uplot, .uplot * { color: var(--text-secondary); }

footer { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 10px; }

dialog.doc {
  max-width: 640px; width: calc(100vw - 32px); max-height: 85vh; overflow-y: auto;
  background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px;
}
dialog.doc h2 { font-size: 18px; text-transform: none; letter-spacing: 0; color: var(--text-primary); }
dialog.doc .doc-brand { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 0 0 2px; }
dialog.doc .doc-brand + h2 { margin-top: 0; }
dialog.doc li { margin: 4px 0; }
/* data notes (data_issues.yaml): grouped by kind, one collapsible entry each */
#notesFilter { margin: 10px 0 4px; }
#notesFilter .seg { flex-wrap: wrap; }
.notes-ctx { background: var(--badge-bg); border-radius: 6px; padding: 6px 10px; margin: 8px 0; }
.notes-grp { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 16px 0 2px; }
.notes-grp-sub { margin: 0 0 6px; }
details.note { border-top: 1px solid var(--border); padding: 6px 0; }
details.note > summary { cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; }
details.note > summary::-webkit-details-marker { display: none; }
details.note > summary::before { content: "\25B8"; color: var(--text-muted); flex: none; width: 10px; }
details.note[open] > summary::before { content: "\25BE"; }
details.note > summary .t { flex: 1; font-weight: 600; }
details.note.hit { background: var(--badge-bg); border-radius: 6px; padding: 6px 8px; }
.note-st { flex: none; font: 600 10px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .05em;
  border-radius: 4px; padding: 1px 6px; border: 1px solid var(--border); color: var(--text-secondary); }
.note-st.open { border-color: var(--acct-loss); color: var(--acct-loss); }
.note-st.flagged { border-style: dashed; border-color: var(--text-secondary); }
.note-st.fixed { background: var(--badge-bg); color: var(--badge-fg); border-color: transparent; }
.note-body { margin: 6px 0 4px 18px; }
.note-body dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.note-body dt { color: var(--text-muted); font-size: 12px; padding-top: 1px; }
.note-body dd { margin: 0; }
.note-links { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px 10px; }
@media (max-width: 520px) { .note-body dl { grid-template-columns: 1fr; } .note-body dt { padding-top: 6px; } .note-body { margin-left: 0; } }
/* event markers (F10): type chips under the feature chart, the tooltip over it, the list in About */
#chart { position: relative; }
.ev-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 4px 0 0; }
.ev-chips:empty { display: none; }
.ev-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; font-size: 12px; line-height: 1.5;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-secondary); }
.ev-chip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ev-chip[aria-pressed="true"] { background: var(--surface-2); color: var(--text-primary); border-color: var(--text-muted); }
.ev-chip[aria-pressed="false"] { opacity: .55; }
.ev-chip[aria-pressed="false"] i { background: transparent !important; border: 1.5px solid var(--text-muted); }
.ev-chip .n { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ev-tip { position: absolute; z-index: 6; box-sizing: border-box; background: var(--surface-1); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.22); padding: 7px 9px; font-size: 12px; line-height: 1.4;
  pointer-events: none; text-align: left; overflow-wrap: anywhere; }
.ev-tip.pin { pointer-events: auto; border-color: var(--text-muted); }
.ev-tip b { font-size: 13px; }
.ev-tip .ev-type { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--text-secondary); }
.ev-tip .ev-type i, .ev-tbl .ev-type i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.ev-tip p { margin: 3px 0 0; }
.ev-tip .ev-doc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-tip .ev-x { position: absolute; top: 1px; right: 3px; font-size: 14px; padding: 0 4px; }
.ev-tip ul { list-style: none; margin: 4px 0 0; padding: 0; }
.ev-tip li { padding: 2px 0; }
.ev-tip li button { all: unset; cursor: pointer; display: block; width: 100%; }
.ev-tip li button:hover, .ev-tip li button:focus-visible { background: var(--surface-2); outline: 1px solid var(--accent); }
.ev-tip.list li i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.ev-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.ev-tbl th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 3px 6px 3px 0; border-bottom: 1px solid var(--border); }
.ev-tbl td { vertical-align: top; padding: 5px 6px 5px 0; border-bottom: 1px solid var(--border); }
.ev-tbl tr.ev-wy td { background: var(--surface-2); font-weight: 600; color: var(--text-secondary); padding: 3px 6px; border-bottom: none; }
.ev-tbl td.d { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-tbl .ev-type { display: inline-flex; align-items: baseline; gap: 4px; color: var(--text-secondary); }
.ev-tbl .ev-type i { flex: none; }
.ev-tbl td.t { width: 6.5em; }
.ev-tbl .ev-doc { color: var(--text-secondary); }
.ev-tbl details summary { cursor: pointer; color: var(--accent); }
.ev-unv { display: inline-block; font: 600 10px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .05em;
  border: 1px dashed var(--text-secondary); color: var(--text-secondary); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; cursor: help; }
.flash { animation: flash 2s ease-out; }
@keyframes flash { 0%, 55% { background: var(--badge-bg); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; background: var(--badge-bg); } }
#eventsBox .ev-scroll { overflow-x: auto; }
@media (max-width: 520px) {
  .ev-tbl thead { display: none; }
  .ev-tbl tr, .ev-tbl td { display: block; }
  .ev-tbl tr.ev-wy td { display: block; }
  .ev-tbl td { border-bottom: none; padding: 1px 0; }
  .ev-tbl tr:not(.ev-wy) { border-bottom: 1px solid var(--border); padding: 5px 0; }
  .ev-tbl td::before { content: attr(data-l) ": "; color: var(--text-muted); }
  .ev-tbl td.t::before, .ev-tbl tr.ev-wy td::before { content: none; }
}
/* first-visit welcome dialog: a numbered one-line tour, each line with a "show me" link */
#welcomeTitle:focus { outline: none; }
.welcome-list { margin: 8px 0; padding-left: 22px; }
.welcome-list li { margin: 6px 0; }
.welcome-list li[hidden] { display: none; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.welcome-actions .primary { background: var(--badge-fg); color: var(--surface-1); border-color: var(--badge-fg); font-weight: 600; }
.welcome-actions .primary:hover { background: var(--badge-fg); filter: brightness(1.12); }
/* example clips (scripts/record_clips.py): a video over the welcome list, its captions as a transcript */
.welcome-list [data-clip] { margin-left: 4px; }
.welcome-list [data-clip][hidden] { display: none; }
#clipVideo { display: block; width: 100%; max-height: 70vh; border-radius: 8px; background: var(--surface-2); margin: 8px 0; }
.clip-caps { margin: 6px 0; padding-left: 22px; }
dialog::backdrop { background: rgba(0,0,0,.4); }
.close { float: right; font-size: 18px; }
/* the close button stays in the window's top-right corner while its content scrolls (a click outside the window also closes it) */
dialog.doc > form[method="dialog"] { position: sticky; top: 0; z-index: 5; float: right; margin: -10px -14px 0 8px; }
dialog.doc > form[method="dialog"] .close { float: none; background: var(--surface-1); border-radius: 50%; width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.18); }

#loading {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2000;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 10px 16px;
}

/* pick a stretch of waterway (app.js "pick a stretch of waterway") */
.seg-pin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; color: #fff; font: 700 12px/20px system-ui, sans-serif;
  text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,.45); cursor: grab; }
.seg-pin:active { cursor: grabbing; }
.seg-picking, .seg-picking .leaflet-interactive { cursor: crosshair !important; }
.bal.seg td { padding: 3px 0; }
.bal.seg tr.total td { font-weight: 600; }
details.seg-list > summary { cursor: pointer; list-style: none; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
details.seg-list > summary::-webkit-details-marker { display: none; }
details.seg-list > summary::before { content: "\25B8"; color: var(--text-muted); width: 10px; flex: none; }
details.seg-list[open] > summary::before { content: "\25BE"; }
details.seg-list > summary b { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
details.seg-list > table { margin: 2px 0 6px 16px; width: calc(100% - 16px); }

/* CVP contractors layer legend */
.cvp-legend { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12px; width: 190px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.cvp-legend-t { font-weight: 600; margin-bottom: 4px; }
.cvp-ramp { height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--plan-under), var(--surface-1) 50%, var(--plan-over)); border: 1px solid var(--border); }
.cvp-legend-l { display: flex; justify-content: space-between; color: var(--text-muted); margin-top: 2px; }
.cvp-legend-n { margin-top: 4px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.cvp-nc { display: inline-block; width: 14px; height: 10px; border: 1px dashed var(--text-muted); border-radius: 2px; }

/* map pins (app.js "map pins"): search pin buttons, the detail panel's toggle, the "Pinned" box, the labels */
.pin-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 9px; border-radius: 999px; color: var(--text-secondary); }
.pin-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.4; flex: none; }
.pin-toggle svg circle { fill: currentColor; stroke: none; }
.pin-toggle[aria-pressed="true"] { color: var(--text-primary); border-color: var(--text-muted); background: var(--surface-2); }
.pin-toggle[aria-pressed="true"] svg path { fill: currentColor; }
.pin-toggle[aria-pressed="true"] svg circle { fill: var(--surface-2); }
.pin-toggle[hidden] { display: none; }
.sr-pin { flex: none; padding: 3px 6px; }
.detail-btns { margin: 0; gap: 6px; }
.pin-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; margin-right: 5px; vertical-align: -1px; box-shadow: 0 0 0 1.5px var(--surface-1); }
.leaflet-tooltip.tt.pin-tt { font-weight: 600; white-space: nowrap; max-width: none; padding: 3px 7px; pointer-events: none; }
.leaflet-tooltip.pin-tt::before { display: none; }
/* polygon names on the reference layers: text with a halo, no box, never in the way of a click */
.leaflet-tooltip.area-lbl { background: none; border: 0; box-shadow: none; padding: 0; color: var(--text-secondary); font-size: 11px; font-weight: 600;
  white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--surface-1), 0 0 3px var(--surface-1), 0 0 2px var(--surface-1); }
.leaflet-tooltip.area-lbl::before { display: none; }
.leaflet-tooltip.area-lbl.gsa { color: var(--sys-friant); font-weight: 600; }
.leaflet-tooltip.area-lbl.small { font-size: 10px; font-weight: 500; }
.leaflet-tooltip.area-lbl.county { color: var(--text-muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 10px; }   /* county names (Counties layer): quieter than the water layers' names */
.bs-map { gap: 12px; margin: 4px 0 2px; }
/* "Gray streets" basemap (app.js BASEMAPS): OpenStreetMap tiles in grayscale; a dark street map in the dark theme */
/* "Gray canvas": USGS shaded relief, softened to a quiet ground under the network (light) or inverted (dark) */
.tiles-relief { filter: grayscale(1) contrast(.6) brightness(1.12); }
:root[data-theme="dark"] .tiles-relief { filter: grayscale(1) invert(1) contrast(.6) brightness(.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tiles-relief { filter: grayscale(1) invert(1) contrast(.6) brightness(.55); } }

/* map key (app.js buildMapKey): the colors and symbols, on the map */
.map-key { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  padding: 6px 10px; font-size: 12px; max-width: calc(100vw - 72px); }
.map-key.open { width: 270px; padding-bottom: 8px; max-height: calc(100vh - 270px); overflow-y: auto; }   /* the Tributaries Map's key is long: scroll it rather than run under the time bar */
.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-size: 12px; }
.mk-head:hover { background: none; }
.mk-caret { margin-left: auto; font-size: 10px; color: var(--text-muted); }
.mk-sub { margin: 7px 0 3px; font-size: 11px; color: var(--text-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-ln { display: inline-block; width: 22px; height: 0; flex: none; border-radius: 2px; }
.mk-res { position: relative; display: inline-block; width: 16px; height: 16px; flex: none; margin: 0 3px; border: 1.5px solid var(--text-secondary); border-radius: 50%;
  background: color-mix(in srgb, var(--text-secondary) 12%, transparent); }
.mk-res > i { position: absolute; inset: 3px; border-radius: 50%; background: var(--text-secondary); opacity: .85; }
.mk-turn { display: inline-block; width: 8px; height: 8px; flex: none; margin: 0 7px; border: 2px solid var(--text-secondary); border-radius: 50%; background: var(--surface-1); }
.mk-foot { margin-top: 6px; }
.mk-check { align-items: flex-start; cursor: pointer; }   /* the Tributaries Map key's "Upper watersheds" checkbox (app.js trUpKey) */
/* Search and Ask the map on the left, under the map key (app.js buildMapTools; user, 2026-10-20) */
/* each is its own bubble (user, 2026-10-21): a pill while closed (side by side), 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 app.js mapToolsFit: above the time bar; the gaps pass clicks to the map */
.mt-fold { pointer-events: auto; background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); 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 6px; }
.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(--text-muted); }
.mt-fold:not([open]) .mt-x { display: none; }
.map-tools .search { margin: 6px 0 2px; }
.map-tools #searchList { position: static; max-height: 45vh; overflow-y: auto; margin-top: 4px; }
.map-key.open { max-height: calc(55vh - 90px); }   /* the key scrolls sooner so Search and Ask the map stay above the time bar */
.mk-check input { flex: none; margin: 2px 0 0; accent-color: var(--accent); }
.mk-hint { margin: 2px 0 0 21px; }
.pins-box { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  padding: 8px 10px; width: 240px; max-width: calc(100vw - 72px); font-size: 12px; }
.pins-box[hidden] { display: none; }
.pins-head { display: flex; gap: 6px; align-items: baseline; width: 100%; border: none; background: none; padding: 0; margin: 0 0 4px; text-align: left; cursor: pointer; }
.pins-head:hover { background: none; }
.pins-caret { margin-left: auto; align-self: center; }
.pins-caret::before { content: "\25BE"; font-size: 10px; color: var(--text-muted); display: inline-block; transition: transform .15s; }
.pins-head[aria-expanded="false"] { margin-bottom: 0; }
.pins-head[aria-expanded="false"] .pins-caret::before { transform: rotate(90deg); }
.pins-list { list-style: none; margin: 0; padding: 0; max-height: min(40vh, 330px); overflow-y: auto; }
.pins-list li { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-top: 1px solid var(--border); }
.pins-list .pin-sw { width: 12px; height: 12px; margin: 0; }
.pin-t { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.pin-name { text-align: left; font: inherit; font-weight: 600; color: var(--text-primary); padding: 0; overflow-wrap: anywhere; }
.pin-x { border: none; background: none; font-size: 16px; line-height: 1; padding: 0 4px; color: var(--text-muted); }
.pin-x:hover { color: var(--text-primary); background: none; }
.pins-foot { display: flex; gap: 12px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.pins-foot .check { margin-left: auto; font-size: 12px; }
.pins-msg { margin-top: 4px; color: var(--acct-loss-text); }
.pins-msg:empty { display: none; }

/* map marks */
.leaflet-container { font: inherit; }
.leaflet-interactive:focus { outline: none; } /* the selection halo shows what was clicked */
/* a map control, the view tabs or the time bar under an open hover note fades out of its way (app.js, L.Tooltip _setPosition); it comes back when the note closes */
.tt-under { opacity: 0.12; pointer-events: none; transition: opacity 0.12s; }
.leaflet-tooltip.tt {
  background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.18); border-radius: 6px; font-size: 12px; padding: 6px 8px;
  white-space: normal; width: max-content; max-width: min(360px, calc(100vw - 32px));   /* long notes wrap instead of running off the map */
}
.leaflet-tooltip.tt b { font-size: 13px; }
.leaflet-tooltip.tt .muted { color: var(--text-muted); }
.leaflet-tooltip-top.tt::before { border-top-color: var(--border); }
.flowing { animation: flow linear infinite; }
.sel-glow { filter: blur(4px); }
.sel-pulse { animation: sel-pulse 0.9s ease-out 2; }
@keyframes sel-pulse { 0% { stroke-opacity: 1; } 50% { stroke-opacity: 0.25; } 100% { stroke-opacity: 1; } }
@keyframes flow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) { .flowing, .sel-pulse { animation: none; } }
/* Delta channel flows (F21, app.js dch*): the chevron / marker pane, the key's symbols, the panel's chart. Colors from tokens only (light, dark, [data-theme]). */
/* the layer's panes (lines, moving dashes, marks, hits) serve both maps (phase 2: the Delivery Map's overlay); app.js adds the layer only to the view that has it on, and the Southern California view never shows it */
body.socal-map .leaflet-dchlines-pane, body.socal-map .leaflet-dchflow-pane, body.socal-map .leaflet-trdch-pane, body.socal-map .leaflet-dchhits-pane { display: none; }
.mk-dd { height: 2.5px; background: repeating-linear-gradient(90deg, var(--unmeasured) 0 8px, transparent 8px 11px, var(--unmeasured) 11px 13px, transparent 13px 16px); }
.mk-rev { flex: none; width: 22px; text-align: center; font-style: normal; font-weight: 700; color: var(--text-primary); line-height: 1; }
.mk-gate { flex: none; width: 22px; height: 12px; background: linear-gradient(90deg, transparent 9px, var(--text-primary) 9px 13px, transparent 13px); }
.dch-info { margin: 4px 0 8px; }
.dch-chart { margin: 8px 0 4px; }
.dch-svg { width: 100%; height: auto; display: block; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; }
.dch-line { fill: none; stroke: var(--sys-delta); stroke-width: 1.4; }
.dch-zero { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 4 3; }
.dch-band { fill: var(--accent); opacity: 0.18; }
.dch-lab { fill: var(--text-secondary); font-size: 10px; }
.leaflet-control-attribution { font-size: 10px; }
.leaflet-control-layers { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border) !important; border-radius: 8px !important; }
.leaflet-control-layers-expanded { padding: 8px 12px; font-size: 13px; }
.leaflet-control-layers-separator { border-top-color: var(--border); }
.leaflet-control-layers-toggle { width: 36px !important; height: 36px !important; }
:root[data-theme="dark"] .leaflet-control-layers-toggle, :root[data-theme="dark"] .leaflet-bar a { filter: invert(0.9); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .leaflet-control-layers-toggle, :root:not([data-theme="light"]) .leaflet-bar a { filter: invert(0.9); } }

@media (max-width: 700px) {
  /* the map's credit line keeps the bottom strip of the screen (--attr-h), with the time bar and the panel above it, so the
     OpenStreetMap / USGS credits stay visible on a phone (pre-launch audit L-07) */
  :root { --attr-h: 30px; }
  #panel { top: auto; left: 8px; right: 8px; bottom: calc(var(--tb-h, 110px) + var(--attr-h) + 16px); width: auto; max-height: calc(55vh - var(--tb-h, 110px) - var(--attr-h)); min-height: 140px; }
  #timebar { left: 8px; right: 8px; bottom: calc(var(--attr-h) + 8px); width: auto; min-width: 0; padding: 6px 10px 4px; }
  #timebar .tb-opts { margin-left: 0; }
  .leaflet-bottom.leaflet-left { bottom: calc(var(--tb-h, 0px) + var(--attr-h) + 8px); }
  .leaflet-bottom.leaflet-right { bottom: 0; right: 0; left: 0; }
  .leaflet-bottom.leaflet-right .leaflet-control-attribution { float: none; margin: 0; line-height: 1.3; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
/* glossary (F17, glossary.yaml): one entry per term, grouped; label links in the panels are dotted underlines (span.gl) */
#glFilter { width: 100%; font: inherit; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; margin: 4px 0 6px; }
#glChips .seg { flex-wrap: wrap; }
#glChips .seg button { flex: none; padding: 4px 8px; }
.gl-grp { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 16px 0 2px; }
.gl-entry { border-top: 1px solid var(--border); padding: 8px 0; }
.gl-entry h4 { margin: 0 0 2px; font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.gl-entry p { margin: 3px 0; }
.gl-entry.hit { background: var(--badge-bg); border-radius: 6px; padding: 8px; }
.gl-draft { font: 600 10px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .05em; border: 1px dashed var(--acct-loss);
  color: var(--acct-loss); border-radius: 4px; padding: 1px 6px; }
.gl-note { border-left: 3px solid var(--acct-loss); padding-left: 8px; }
.gl-rel { display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.gl-src a, .gl-also a { color: var(--accent); }
span.gl { border-bottom: 1px dotted var(--text-muted); cursor: help; }
/* appendix (docs/data_quality_appendix.md via build_appendix.py): long-form text with a table of contents; links to data notes and to other sections */
#apBody { font-size: 14px; line-height: 1.5; }
#apBody p { margin: 8px 0; }
#apBody ul, #apBody ol { margin: 6px 0; padding-left: 22px; }
#apBody code { font-size: 12.5px; overflow-wrap: anywhere; }
#apBody a { color: var(--accent); }
#apBody .ap-note code { color: inherit; }
#apBody h3.ap-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 28px 0 4px; border-top: 2px solid var(--border); padding-top: 12px; }
#apBody h4.ap-h { font-size: 16px; margin: 22px 0 4px; padding-top: 10px; border-top: 1px solid var(--border); }
#apBody section { scroll-margin-top: 8px; }
#apBody .ap-table { overflow-x: auto; margin: 8px 0; }
#apBody table { border-collapse: collapse; font-size: 13px; }
#apBody th, #apBody td { border: 1px solid var(--border); padding: 3px 8px; vertical-align: top; text-align: left; }
#apBody th { background: var(--surface-2); }
.ap-toc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 14px 8px; margin: 14px 0; }
.ap-toc h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 8px 0 2px; }
.ap-toc ul { list-style: none; margin: 0; padding: 0; }
.ap-toc ul ul { padding-left: 16px; }
.ap-toc li { margin: 3px 0; }
.ap-toc-part > a { font-weight: 600; }
.ap-toc-sub { display: block; font-size: 12px; color: var(--text-muted); padding-left: 12px; }
.ap-toc-sub a { margin-right: 2px; }
.note-appx { margin: 6px 0 0; }
span.gl:hover, span.gl:focus-visible { border-bottom-color: var(--accent); color: var(--accent); outline: none; }
/* F5 matching rules in the subbasin view */
.gsp-rules { margin-top: 8px; }
.gsp-rule { border-left: 3px solid var(--border); padding-left: 8px; margin: 8px 0; }
.gsp-tags { padding-top: 2px; }
.gsp-tag { display: inline-block; font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .03em; border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 6px; margin: 0 4px 2px 0; color: var(--text-secondary); cursor: help; }
.gsp-tag.flag { border-color: var(--acct-loss); color: var(--acct-loss); }
.gsp-tag.cy { border-style: dashed; color: var(--sys-swp); }

/* D-1641 compliance indicators (F12): one block per indicator, status chip right; on a phone the detail line hides until the row is opened */
.d16-lead { margin: 4px 0 6px; }
.d16-eib { margin: 2px 0 4px; }
.d16-tucp { background: var(--surface-2); border-left: 3px solid var(--ev-tucp_order); padding: 5px 8px; border-radius: 4px; margin: 6px 0; }
.d16-row { border-top: 1px solid var(--border); padding: 6px 0 6px 8px; cursor: pointer; border-left: 3px solid transparent; }
.d16-row:hover { background: var(--surface-2); }
.d16-row.open { background: var(--surface-2); border-left-color: var(--highlight); }
.d16-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.d16-row.bad { border-left-color: var(--acct-loss); }
.d16-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.d16-name { font-weight: 600; font-size: 13px; }
.d16-q { font: 600 10px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .04em; border: 1px dashed var(--text-muted); color: var(--text-secondary); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; cursor: help; }
.d16-chip { flex: none; font: 600 11px ui-monospace, Consolas, monospace; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--border); color: var(--text-secondary); text-align: right; max-width: 58%; }
.d16-chip.ok { background: var(--badge-bg); color: var(--badge-fg); border-color: transparent; }
.d16-chip.bad { border-color: var(--acct-loss); color: var(--acct-loss-text); }
.d16-chip.nd { border-style: dashed; }
.d16-chip.na { color: var(--text-muted); border-color: transparent; }
.d16-sub { margin-top: 2px; }
.d16-more { margin: 6px 0 2px; cursor: default; }
.d16-more p { margin: 3px 0; }
.d16-chart-head { margin-top: 8px; }
.d16-cite { font-size: 11px; margin-bottom: 2px; }
.d16-chart { margin: 2px -4px 0; min-height: 190px; }
.d16-chart .u-legend { font-size: 11px; color: var(--text-secondary); }
.d16-sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.d16-sw.bad { background: rgba(196, 65, 12, .35); }
.d16-sw.good { background: rgba(42, 120, 214, .3); }
.d16-strip { display: flex; gap: 2px; margin-top: 4px; }
.d16-cell { flex: 1; height: 8px; border-radius: 1px; background: var(--grid); cursor: pointer; }
.d16-cell.none { cursor: default; background: transparent; outline: 1px dashed var(--border); outline-offset: -1px; }
.d16-cell.ok { background: var(--accent); }
.d16-cell.bad { background: var(--acct-loss); }
.d16-cell.nd { background: repeating-linear-gradient(45deg, var(--unmeasured) 0 2px, transparent 2px 4px); }
.d16-cell.na { background: var(--grid); }
.d16-scroll { overflow-x: auto; margin: 4px 0; }
.d16-tbl { width: auto; min-width: 100%; font-size: 12px; }
.d16-tbl th { text-align: left; font-weight: 600; color: var(--text-secondary); font-size: 11px; padding: 2px 8px 4px 0; vertical-align: bottom; min-width: 5.5em; }
.d16-tbl td { padding: 3px 8px 3px 0; white-space: nowrap; border-top: 1px solid var(--border); }
.d16-tbl tr.sel td { background: var(--badge-bg); }
.d16-tbl td.ok { color: var(--text-primary); }
.d16-tbl td.bad { color: var(--acct-loss); }
.d16-tbl td.nd, .d16-tbl td.na { color: var(--text-muted); }
.d16-tbl td.wy { position: sticky; left: 0; background: var(--surface-1); }
.d16-tbl tr.sel td.wy { background: var(--badge-bg); }
@media (max-width: 520px) {
  .d16-sub, .d16-strip { display: none; }
  .d16-row.open .d16-sub, .d16-row.open .d16-strip { display: block; }
  .d16-top { align-items: flex-start; flex-wrap: wrap; }  /* a long status chip drops under the name instead of running off the window */
  .d16-top .d16-chip { max-width: 100%; }
}
.d16-grp { margin: 14px 0 2px; padding-top: 8px; border-top: 2px solid var(--border); font-size: 14px; }
.d16-fold { border-top: 1px solid var(--border); }
.d16-fold > summary { cursor: pointer; padding: 6px 0 6px 8px; color: var(--accent); }
.d16-fold > summary .d16-chip { margin-left: 4px; }
.d16-fold > p { margin: 0 0 4px 8px; }
.d16-nd { margin-left: 4px; cursor: help; border-bottom: 1px dotted var(--text-muted); }
.d16-verify summary { cursor: pointer; color: var(--accent); }
.d16-verify ul { margin: 4px 0; padding-left: 18px; }

/* F11: what right holders report to the State Water Board. A card of its own, solid left rule and no bars, so it never reads as a
   balance row or as a modelled estimate; the measured figure sits apart under a thin rule and nothing is totalled across them. */
.ewr-card { margin: 12px 0 4px; padding: 8px 10px 8px 12px; border: 1px solid var(--border); border-left: 4px solid var(--ev-regulation);
  border-radius: 6px; background: var(--surface-2); }
.ewr-top { margin: 0 0 2px; }
.ewr-tag { display: inline-block; font: 600 10px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid var(--ev-regulation); color: var(--ev-regulation); border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.ewr-tag.prov { border-style: dashed; border-color: var(--text-secondary); color: var(--text-secondary); margin-left: 4px; }
.ewr-cav { margin: 4px 0; padding: 4px 6px; background: var(--surface-1); border-radius: 4px; color: var(--text-secondary); }
.ewr-class { margin: 6px 0 2px; }
.ewr-badge { display: inline-block; font: 600 12px ui-monospace, Consolas, monospace; background: var(--badge-bg); color: var(--badge-fg); border-radius: 6px; padding: 2px 8px; }
.ewr-chip { display: inline-block; font-size: 12px; border: 1px solid var(--text-muted); border-radius: 999px; padding: 1px 9px; color: var(--text-secondary); }
.ewr-group { margin: 4px 0 2px; }
.ewr-basis, .ewr-yr { margin: 2px 0; }
.ewr-fig { margin: 6px 0 4px; }
.ewr-line { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font-size: 13px; }
.ewr-line b { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; }
.ewr-fig > .muted { margin: 0 0 4px; }
.ewr-meas { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 5px; }
.ewr-reading { margin: 4px 0; }
.ewr-winter, .ewr-contract, .ewr-once { margin: 5px 0; padding: 4px 6px; border-left: 3px solid var(--border); }
.ewr-contract { border-left-color: var(--ev-curtailment); }
.ewr-flags { margin: 2px 0; }
.ewr-flag { display: inline-block; font-size: 11px; color: var(--text-secondary); border: 1px dashed var(--text-muted); border-radius: 4px; padding: 0 5px; margin: 0 4px 2px 0; }
.ewr-det { margin: 6px 0 0; }
.ewr-det > summary { cursor: pointer; color: var(--accent); font-size: 12px; }
.ewr-rights td { vertical-align: top; padding: 4px 0; border-top: 1px solid var(--border); }
.ewr-rights tr.grp td { border-top: none; }
.ewr-years td { font-size: 12px; }
#ewrBody h2 { margin-bottom: 4px; }
.ewr-card .linkish { text-align: left; font: inherit; padding: 0; }
/* List of features: "link to feature | Watch an example"; the bar goes with the clip button when there is no clip */
.welcome-list li:has([data-clip][hidden]) .clip-sep { display: none; }
/* delivery bundles (app.js "delivery bundles"): a pill where many deliveries leave one point, e.g. Mendota Pool */
.bundle-wrap { background: none; border: none; }
.bundle-pill { display: inline-block; transform: translate(-50%, -130%); white-space: nowrap; cursor: pointer;
  font: 600 11px/1 system-ui, sans-serif; color: var(--text-primary); background: var(--surface-1);
  border: 1.5px solid var(--sys-cvp, var(--accent)); border-radius: 999px; padding: 4px 8px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.bundle-pill:hover { background: var(--surface-2); }
.bundle-pill.open { border-style: dashed; color: var(--text-secondary); }
.bundle-wrap:focus-visible { outline: none; }
.bundle-wrap:focus-visible .bundle-pill { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the name of a place picked in search, inside its outline (app.js focusAreas) */
.leaflet-tooltip.area-lbl.focus-lbl { font-size: 13px; font-weight: 700; color: var(--text-primary); z-index: 1; }

/* System accounting: monthly table window (app.js section "monthly table"); the Estimate columns are dashed and set apart from the measured ledger */
dialog.doc.wide#acctMDlg { max-width: min(1180px, calc(100vw - 32px)); }
.am-tab td { padding: 3px 5px; }
.am-tab td.am-m { position: sticky; left: 0; background: var(--surface-1); white-space: nowrap; padding-left: 0; }
.am-tab tr.am-head td { vertical-align: bottom; line-height: 1.2; }
.am-tab tr.total td.am-m { background: var(--surface-1); }
.am-tab td.am-q { white-space: nowrap; }
.am-tab td.am-e { border-left: 1px dashed var(--text-muted); font-style: italic; color: var(--text-secondary); }
.am-tab td.am-e1 { border-left: 3px double var(--text-muted); }
.am-tab td.am-eh { background: repeating-linear-gradient(45deg, var(--surface-2) 0 3px, transparent 3px 7px); font-style: normal; }
.am-tab .est.am-flag { margin-left: 0; font-size: 12px; }

/* Tributary flow requirements (F18): the Tributaries Map (#view=tribs), a second set of layers on the same Leaflet map. The Delivery Map | Tributaries Map switch sits
   beside the zoom buttons, clear of the map key below them; chips and strip cells reuse the D-1641 ones (.d16-chip, .d16-q, .d16-cell colors). Status colors on the
   map are blue / red / amber (dashed), in step with the chips and safe for the common color-vision differences; they follow the theme through --accent, --acct-loss, --wyt-D */
/* two different greys-in-effect: --tr-grey is the neutral grey of the context reaches (no requirement scored on that reach; light, quiet, like the Delivery Map's rivers) and --tr-na is the slate blue-grey of
   "no judged requirement in this period" (a river or point that has judged rows, none in force now; darker in light theme, lighter in dark, so it reads as a status beside met blue / below red / not determinable amber).
   Checked in OKLab against the surface and the other three status colors (>= 13 normal vision, >= 8.7 for protan / deutan / tritan simulation) and 6.9 / 8.6 text contrast for the chip */
:root { --tr-ok: var(--accent); --tr-bad: var(--acct-loss); --tr-nd: var(--wyt-D); --tr-grey: #92928f; --tr-na: #465a72; }
:root[data-theme="dark"] { --tr-na: #9fb3c8; }   /* audit part 2, L-06: the chip text was 2.46:1 in the dark theme */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tr-na: #9fb3c8; } }
:root[data-theme="dark"] { --tr-grey: #777775; --tr-na: #a3b8d0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tr-grey: #777775; --tr-na: #a3b8d0; } }
/* while the Tributaries Map shows, the Delivery Map's panes (and its pins box) are hidden, not removed: nothing of its state is touched; the panel shows its own section only */
.leaflet-trgrey-pane, .leaflet-trsel-pane, .leaflet-trlines-pane, .leaflet-trflow-pane, .leaflet-trhits-pane, .leaflet-trdots-pane { display: none; }
body.tribs-map .leaflet-trgrey-pane, body.tribs-map .leaflet-trsel-pane, body.tribs-map .leaflet-trlines-pane, body.tribs-map .leaflet-trflow-pane, body.tribs-map .leaflet-trhits-pane, body.tribs-map .leaflet-trdots-pane { display: block; }
body.tribs-map .leaflet-halo-pane, body.tribs-map .leaflet-rivers-pane, body.tribs-map .leaflet-canals-pane, body.tribs-map .leaflet-hits-pane, body.tribs-map .leaflet-res-pane,
body.tribs-map .leaflet-segpins-pane, body.tribs-map .leaflet-d16mk-pane, body.tribs-map .leaflet-bundles-pane, body.tribs-map .leaflet-pins-pane, body.tribs-map .leaflet-focus-pane, body.tribs-map .pins-box { display: none; }
#tribPanel { display: none; }
body.tribs-map #tribPanel { display: block; border-top: none; margin-top: 8px; padding-top: 0; }
body.tribs-map #panel > section:not(#tribPanel) { display: none !important; }
/* the optional "Flow-requirement compliance points" layer of the Delivery Map: the Tributaries Map has its own dots, so the markers are hidden there */
body.tribs-map .leaflet-trpts-pane { display: none; }
.d16-tbl td .linkish { font-size: inherit; text-align: left; }
/* Year in review, tributary block: the requirement column wraps (the other D-1641 cells are one-liners) */
.d16-tbl td.tr-req { white-space: normal; min-width: 14em; max-width: 30em; }
.d16-tbl td.tr-st { white-space: normal; min-width: 8em; }
.d16-tbl td.tr-st .d16-chip { display: inline-block; text-align: left; max-width: 11em; border-radius: 10px; }
.tr-ptitle { font-size: 15px; text-transform: none; letter-spacing: 0; color: var(--text-primary); margin: 2px 0 6px; }
.tr-bhead { margin-top: 6px; }
.tr-bname { font-size: 16px; margin: 4px 0; }
.tr-sw { display: inline-block; width: 14px; height: 8px; border-radius: 2px; vertical-align: 0; margin: 0 2px 0 0; background: var(--tr-na); }
.tr-sw.ok { background: var(--tr-ok); }
.tr-sw.bad { background: var(--tr-bad); }
.tr-sw.nd { background: repeating-linear-gradient(90deg, var(--tr-nd) 0 5px, transparent 5px 8px); }
.tr-sw.nm { background: repeating-linear-gradient(90deg, var(--unmeasured) 0 4px, transparent 4px 7px); }
.tr-sw.grey { background: var(--tr-grey); }
.d16-chip.nm { border-style: dashed; color: var(--text-secondary); }
body.tribs-map .d16-chip.na { color: var(--tr-na); border-color: var(--tr-na); }   /* "no judged requirement in this period": slate, solid outline, the line and dot color */
.tr-line.static { cursor: default; border-left-color: transparent; }
.tr-line.static:hover { background: none; }
.mk-dot { display: inline-block; width: 8px; height: 8px; flex: none; margin: 0 7px; border-radius: 50%; background: var(--tr-ok); border: 2.5px solid var(--surface-1); box-shadow: 0 0 0 1px var(--text-muted); }
.tr-basin { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 14px 0 2px; }
.tr-upsub { margin: 10px 0 0; }   /* the "Upper watersheds" subheading inside a basin group */
.tr-upnote { margin: 12px 0 2px; }
.tr-upchk { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 4px; cursor: pointer; }   /* the panel's "Upper watersheds" checkbox, under the intro (app.js trUpNote) */
.tr-upchk input { flex: none; margin: 3px 0 0; accent-color: var(--accent); }
.tr-desig { margin: 4px 0; padding-left: 8px; border-left: 3px solid var(--border); color: var(--text-secondary); }   /* a Wild and Scenic attribute of a reach: context, no status color */
.tr-desc { margin-top: 2px; }
.tr-rlist { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.tr-rrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.tr-rrow:hover { border-color: var(--accent); }
.tr-rname { font-weight: 600; font-size: 13px; }
.tr-keyline { margin: 8px 0 2px; }
.tr-line { border-top: 1px solid var(--border); padding: 6px 0 6px 8px; cursor: pointer; border-left: 3px solid transparent; }
.tr-line:hover { background: var(--surface-2); }
.tr-line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tr-line.open { background: var(--surface-2); border-left-color: var(--highlight); }
.tr-line .d16-top { flex-wrap: wrap; }
.tr-line .d16-name { min-width: 0; overflow-wrap: anywhere; }
.tr-legend { background: var(--surface-2); border-radius: 6px; padding: 6px 10px; }
#trDlg .tr-chart { margin: 2px -4px 0; }
.view-switch { position: absolute; top: 10px; left: 54px; z-index: 1150; background: var(--surface-1); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.view-switch button { padding: 5px 12px; font-size: 13px; }
.view-switch[hidden] { display: none; }   /* .seg is display:flex, which would show the switch with no Tributaries Map data (publish switch) */
.tr-point { border-top: 2px solid var(--border); margin-top: 14px; padding-top: 6px; }
.tr-point:first-child { border-top: none; margin-top: 0; }
.tr-pname { font-size: 15px; margin: 6px 0 2px; }
.tr-sub { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 14px 0 4px; }
.tr-row { border-top: 1px solid var(--border); padding: 7px 0 7px 8px; cursor: pointer; border-left: 3px solid transparent; }
.tr-row:hover { background: var(--surface-2); }
.tr-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tr-row.open { background: var(--surface-2); border-left-color: var(--highlight); }
.tr-row.bad { border-left-color: var(--acct-loss); }
.tr-row.static { cursor: default; }
.tr-row.static:hover { background: none; }
.tr-row.proposed, .tr-row.reference { border-left: 3px dashed var(--text-muted); }
.tr-row.proposed .d16-name, .tr-row.reference .d16-name { font-weight: 500; }
.tr-cite { margin-top: 3px; }
.tr-why { margin-top: 2px; }
.tr-inst { font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .03em; border: 1px solid var(--text-muted); color: var(--text-secondary); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; font-weight: 600; }
.tr-ist { font-size: 11px; margin-left: 4px; padding: 0 6px; border-radius: 999px; vertical-align: 1px; white-space: nowrap; font-weight: 500; border: 1px solid var(--border); color: var(--text-secondary); }
.tr-ist.ok { background: var(--badge-bg); color: var(--badge-fg); border-color: transparent; }
.tr-ist.ann, .tr-ist.sup { border-style: dashed; }
.tr-ist.ghost { border-style: dashed; border-color: var(--text-muted); color: var(--text-muted); }
.tr-dayline { min-height: 2.6em; margin: 4px 0 6px; padding: 4px 8px; border-left: 3px solid var(--border); background: var(--surface-2, transparent); line-height: 1.4; }
.tr-tag { display: inline-block; margin-top: 2px; padding: 0 6px; border: 1px solid var(--text-muted); border-radius: 4px; color: var(--text-secondary); font-size: 12px; }
.tr-tag.e { border-style: dashed; }
.tr-chart { margin: 2px -4px 0; min-height: 190px; position: relative; }
.tr-sw-nd { background: var(--grid); outline: 1px solid var(--border); }
.tr-evs { margin-top: 4px; }
.tr-also, .tr-more { margin-top: 12px; }
.tr-also > summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.tr-force > summary { margin-bottom: 4px; }   /* requirements not yet / no longer in force in the period, folded per river (app.js trForceFold) */
.tr-force + .tr-force { margin-top: 6px; }
.tr-force-pt { margin: 8px 0 2px; }
.tr-mintop { margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 0 8px 8px 0; background: var(--surface-1, transparent); }
.tr-mintop p { margin: 0 0 4px; }
.tr-mintop ul { margin: 0; padding-left: 18px; }
.tr-mintop li { margin: 2px 0; }
.tr-docs { margin: 10px 0 12px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px 2px; }
.tr-docs > summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.tr-docs .tr-sub { margin-top: 10px; }
.tr-doclist { margin: 0 0 6px; padding-left: 18px; }
.tr-doclist > li { margin: 6px 0; }
.tr-doclist ul { margin: 2px 0 0; padding-left: 16px; }
.tr-doclist a { overflow-wrap: anywhere; }
.tr-strip { display: flex; gap: 0; margin-top: 5px; }
.tr-cell { flex: 1 1 0; min-width: 0; height: 9px; background: var(--grid); cursor: pointer; box-sizing: border-box; }
.tr-cell.none { cursor: default; background: transparent; box-shadow: inset 0 -1px 0 var(--border); }
.tr-cell.ok { background: var(--accent); }
.tr-cell.bad { background: color-mix(in srgb, var(--acct-loss) calc(var(--f, 1) * 100%), var(--grid)); }
.tr-cell.nd { background: repeating-linear-gradient(45deg, var(--unmeasured) 0 2px, transparent 2px 4px); }
.tr-cell.na { background: color-mix(in srgb, var(--tr-na) 38%, var(--grid)); }
.tr-cell.cur, .tr-rb.cur { outline: 2px solid var(--text-primary); outline-offset: 0; z-index: 1; position: relative; }
.tr-yrs { position: relative; height: 13px; font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tr-yrs span { position: absolute; top: 1px; transform: translateX(-2px); }
.tr-ribbon { margin: 8px 0 4px; }
.tr-rbs { display: flex; height: 14px; gap: 0; margin-top: 3px; }
.tr-rb { display: block; height: 100%; cursor: pointer; border-right: 1px solid var(--surface-1); box-sizing: border-box; background: var(--grid); }
.tr-rb.multi { background: repeating-linear-gradient(45deg, var(--unmeasured) 0 2px, var(--surface-2) 2px 5px); }
.tr-rb.rb-est { box-shadow: inset 0 3px 0 -1px var(--surface-1); }
.tr-rb-key { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.tr-rb-key .tr-rb { display: inline-block; width: 22px; height: 10px; vertical-align: -1px; margin-right: 4px; flex: none; cursor: default; }
.tr-key { white-space: normal; }
@media (max-width: 520px) { .tr-row .d16-sub, .tr-row .tr-why { font-size: 11px; } }
.tr-row .d16-top { flex-wrap: wrap; }
.tr-row .d16-name { min-width: 0; overflow-wrap: anywhere; }
.tr-row, .tr-point, .tr-also, .tr-line { min-width: 0; }
.tr-row .d16-scroll { max-width: 100%; }
.tr-rb.stated { box-shadow: inset 0 0 0 2px var(--text-primary); }

/* D-1641 places on the Delivery Map (from zoom 10): Rock Slough chloride station (square) and the approximate X2 position (diamond) */
.d16mk { cursor: pointer; }
.d16mk span { display: block; width: 100%; height: 100%; box-sizing: border-box; border: 2px solid var(--surface-1); box-shadow: 0 0 0 1.5px var(--text-primary); }
.d16mk.rsl span { background: var(--accent); border-radius: 2px; }
.d16mk.x2 span { background: var(--sys-delta); transform: rotate(45deg); }
.d16mk.x2 b { position: absolute; left: 20px; top: -1px; font: 600 12px/16px system-ui, sans-serif; color: var(--text-primary); text-shadow: 0 0 3px var(--surface-1), 0 0 3px var(--surface-1); white-space: nowrap; }
.d16mk:focus-visible span { outline: 2px solid var(--highlight); outline-offset: 2px; }
/* Allocation outlook window (F19): everything modelled is violet (--forecast), hatched and dashed; published values keep the text colour or their own series colour:
   the announced allocation is the accent blue, measured hydrology (Bulletin 120, precipitation, snowpack) green, context (later months, later announcements) grey.
   The one exception: the season chart's forecast fan (its range, median line, dot and labels, and the what-if fan) is orange (--ol-fan), so it reads as the
   continuation of the announced line (user, 2026-10-20: "orange only for the forecast fan"). */
:root { --forecast: #6a3fc4; --forecast-bg: #efe9fb; --forecast-out: #c4410c; --ol-fan: #b45309; --ol-fan-bg: #fdf1e3; --ol-ann: var(--accent); --ol-hydro: #2d8a4e; --ol-hydro-2: #9bd3ae; --ol-ctx: var(--unmeasured); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --forecast: #b9a0f2; --forecast-bg: #2a2340; --forecast-out: #f08a5d; --ol-fan: #f5a35c; --ol-fan-bg: #35261a; --ol-hydro: #4cb06c; --ol-hydro-2: #a6dbb8; } }
:root[data-theme="dark"] { --forecast: #b9a0f2; --forecast-bg: #2a2340; --forecast-out: #f08a5d; --ol-fan: #f5a35c; --ol-fan-bg: #35261a; --ol-hydro: #4cb06c; --ol-hydro-2: #a6dbb8; }
.ol-link { margin: 8px 0 0; color: var(--forecast); }
.ol-link .linkish { color: var(--forecast); }
dialog.ol-dlg { border-color: var(--forecast); }
.ol-tag { display: inline-block; font: 600 11px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .04em; color: var(--forecast); background: var(--forecast-bg); border: 1px dashed var(--forecast); border-radius: 4px; padding: 2px 6px; vertical-align: middle; margin-left: 6px; }
.ol-banner { position: sticky; top: 0; z-index: 4; margin: 0 0 8px; padding: 6px 10px; background: var(--forecast-bg); color: var(--forecast); border: 1px dashed var(--forecast); border-radius: 6px; font-weight: 600; font-size: 13px; }
.ol-sentence-fixed { border-left: 4px solid var(--forecast); padding-left: 8px; margin: 8px 0; }
.ol-controls { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; margin: 8px 0; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; }
.ol-ctl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ol-ctl-l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.ol-ctl .seg { flex-wrap: wrap; }
.ol-ctl .seg button[aria-checked="true"] { background: var(--forecast); color: #fff; }
:root[data-theme="dark"] .ol-ctl .seg button[aria-checked="true"] { color: #1a1a19; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ol-ctl .seg button[aria-checked="true"] { color: #1a1a19; } }
.ol-ctl .seg button:disabled { opacity: .45; }
.ol-controls > .ol-note { flex-basis: 100%; margin: 0; }
.ol-sl { flex: 1 1 260px; }
.ol-sl-in { display: flex; gap: 8px; align-items: center; }
.ol-sl-in input[type=range] { flex: 1; min-width: 0; accent-color: var(--forecast); }
.ol-num { width: 5.5em; }
.ol-ticks { position: relative; height: 8px; margin-top: -2px; }
.ol-ticks i { position: absolute; top: 0; width: 1px; height: 8px; background: var(--text-muted); }
.ol-wion { flex-basis: 100%; }
.ol-rows h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 14px 0 4px; }
.ol-row { border-top: 1px solid var(--border); padding: 8px 0; }
.ol-row-h { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ol-chip { font: 600 10px ui-monospace, Consolas, monospace; text-transform: uppercase; letter-spacing: .04em; border: 1px dashed var(--forecast); color: var(--forecast); background: var(--forecast-bg); border-radius: 4px; padding: 1px 5px; cursor: help; }
.ol-chip.ol-v-analogs_only, .ol-chip.ol-v-announced_better { border-style: solid; color: var(--text-secondary); background: var(--surface-2); border-color: var(--text-muted); }
.ol-sentence { margin: 4px 0; font-size: 13px; }
.ol-note { color: var(--text-secondary); }
.ol-finding { border-left: 4px solid var(--forecast-out); padding-left: 8px; }
.ol-meas-chip { font: 600 10px ui-monospace, Consolas, monospace; text-transform: uppercase; border: 1px solid var(--text-primary); border-radius: 4px; padding: 1px 5px; }
.ol-meas-tbl caption { text-align: left; font-size: 12px; color: var(--text-secondary); padding: 4px 0; }
.ol-tbl th, .ol-tbl td { font-size: 12px; }
.ol-tbl .num { white-space: nowrap; }
.ol-dlg .table-wrap { overflow-x: auto; }
.ol-fit-d { margin: 4px 0; font-size: 13px; }
.ol-fit-d summary { cursor: pointer; color: var(--forecast); }
.ol-strip, .ol-fit, .ol-hind { width: 100%; height: auto; display: block; overflow: visible; }
.ol-fit { max-height: 300px; }
.ol-svg-tag { font: 600 10px ui-monospace, Consolas, monospace; fill: var(--forecast); }
.ol-grid { stroke: var(--grid); stroke-width: 1; }
.ol-axis-t { font-size: 9px; fill: var(--text-muted); }
.ol-range, .ol-bar { stroke: var(--forecast); stroke-width: 1.2; stroke-dasharray: 4 2; }
.ol-bar.ol-out { stroke: var(--forecast-out); }
.ol-hatch-bg { fill: var(--forecast-bg); }
.ol-hatch-ln { stroke: var(--forecast); stroke-width: 1.4; opacity: .55; }
.ol-centre, .ol-centre-s { stroke: var(--forecast); stroke-width: 3; }
.ol-centre-s { stroke-width: 2; }
.ol-centre-t { font: 600 10px system-ui, sans-serif; fill: var(--forecast); }
.ol-dot { fill: var(--surface-1); stroke: var(--forecast); stroke-width: 2; stroke-dasharray: 2 1.5; }
.ol-dot-t { font-size: 9px; fill: var(--text-secondary); }
.ol-meas-tick, .ol-meas-tick-s { stroke: var(--text-primary); stroke-width: 2.5; }
.ol-meas-tick-s { stroke-width: 1.8; }
.ol-meas-dot { fill: var(--text-primary); stroke: var(--surface-1); stroke-width: 1; }
.ol-meas-t { font: 600 10px system-ui, sans-serif; fill: var(--text-primary); }
.ol-curve { stroke: var(--forecast); stroke-width: 2; stroke-dasharray: 5 3; }
.ol-scen { stroke: var(--forecast); stroke-width: 1.5; stroke-dasharray: 2 3; }
.ol-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.ol-lg { display: inline-block; width: 14px; height: 10px; vertical-align: middle; margin-right: 3px; }
.ol-lg-in { background: var(--forecast-bg); border: 1px dashed var(--forecast); }
.ol-lg-out { background: var(--forecast-bg); border: 1px dashed var(--forecast-out); }
.ol-lg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-primary); }
.ol-lg-tick { height: 0; border-top: 2px solid var(--text-primary); }
.ol-lg-c { height: 0; border-top: 3px solid var(--forecast); }
/* the season chart (design section 12) */
.ol-chart-opts { text-align: right; margin: 2px 0 0; }
.ol-chart-box { width: 100%; min-height: 160px; }
.ol-season { display: block; width: 100%; height: auto; overflow: visible; }
.ol-p-title { font: 600 11px system-ui, sans-serif; fill: var(--text-primary); }
.ol-axis { stroke: var(--text-muted); stroke-width: 1; }
.ol-grid-v { stroke: var(--grid); stroke-width: .6; opacity: .7; }
.ol-lbl { font: 10px system-ui, sans-serif; fill: var(--text-primary); paint-order: stroke; stroke: var(--surface-1); stroke-width: 3px; stroke-linejoin: round; }
.ol-lbl-sm { font-size: 9px; }
.ol-lbl-ctx { fill: var(--text-secondary); }
.ol-lbl-fc { fill: var(--ol-fan); font-weight: 600; }
.ol-empty { font-size: 11px; fill: var(--text-muted); }
.ol-ann-line { stroke: var(--ol-ann); stroke-width: 2.2; stroke-linejoin: round; }
.ol-ann-dot { fill: var(--ol-ann); stroke: var(--surface-1); stroke-width: 1; }
.ol-later-dot { fill: var(--surface-1); stroke: var(--ol-ctx); stroke-width: 1.6; }
.ol-fan { fill: var(--ol-fan); fill-opacity: .2; stroke: var(--ol-fan); stroke-width: 1; stroke-dasharray: 4 2; }
.ol-fanhatch-bg { fill: var(--ol-fan-bg); }
.ol-fanhatch-ln { stroke: var(--ol-fan); stroke-width: 1.4; opacity: .55; }
.ol-fan-wi { fill: url(#olHatchFc); fill-opacity: 1; stroke-dasharray: 2 2; }
.ol-fan-line { stroke: var(--ol-fan); stroke-width: 2; stroke-dasharray: 5 3; }
.ol-fan-dot { fill: var(--ol-fan); stroke: var(--surface-1); stroke-width: 1; }
.ol-path-faint { stroke: var(--ol-ctx); stroke-width: 1; opacity: .5; }
.ol-b120-meas { fill: var(--ol-hydro); stroke: var(--surface-1); stroke-width: 1; }
.ol-b120-later { fill: var(--surface-1); stroke: var(--ol-ctx); stroke-width: 1.6; }
.ol-whisker-meas { stroke: var(--ol-hydro); stroke-width: 1.6; }
.ol-whisker-later { stroke: var(--ol-ctx); stroke-width: 1.4; }
.ol-pbar { fill: var(--ol-hydro); }
.ol-pbar-later { fill: var(--ol-ctx); opacity: .35; }
.ol-avg { stroke: var(--text-primary); stroke-width: 2; }
.ol-sbar { fill: var(--ol-hydro); }
.ol-sbar-2 { fill: var(--ol-hydro-2); }
.ol-sbar-later { fill: var(--ol-ctx); opacity: .5; }
.ol-ref { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 4 3; }
.ol-asof { stroke: var(--text-secondary); stroke-width: 1.3; stroke-dasharray: 1.5 3; }
.ol-asof-t { font: 600 10px system-ui, sans-serif; fill: var(--text-secondary); }
.ol-asof-ctl { flex: 1 1 260px; }
.ol-asof-ctl input[type=range] { width: 100%; accent-color: var(--ol-ann); }
.ol-asof-ticks { position: relative; height: 16px; }
.ol-asof-ticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 10px; color: var(--text-secondary); white-space: nowrap; }
.ol-asof-ticks .ol-t0 { transform: none; }
.ol-asof-ticks .ol-t1 { transform: translateX(-100%); }
.ol-next { align-self: flex-end; }
.ol-caption { font-size: 13px; margin: 8px 0 4px; }
.ol-fc-txt { color: var(--forecast); }
.ol-trackline { font-size: 12px; color: var(--text-secondary); margin: 0 0 10px; }
.ol-fold { border-top: 1px solid var(--border); padding: 6px 0; }
.ol-fold > summary { cursor: pointer; font-weight: 600; }
.ol-yr-sel { fill: var(--forecast-bg); stroke: var(--forecast); stroke-width: .8; opacity: .7; }
.ol-yr-t { font-weight: 700; fill: var(--text-primary); }
.ol-row-fc td { color: var(--forecast); }
.ol-yearline { border-left: 4px solid var(--forecast); padding-left: 8px; }
@media (max-width: 520px) { .ol-banner { font-size: 11px; padding: 3px 8px; margin-right: 34px; } dialog.ol-dlg { padding: 14px 12px; } .ol-controls { padding: 6px 8px; } .ol-tag { display: block; margin: 4px 0 0; width: max-content; } }
/* Wild and Scenic rivers layer (F20): designations, never measurements. One umber hue is reserved for the layer: not a system, status or forecast (violet) colour.
   The system is told by line pattern (federal solid, state dashed, both solid on a dashed casing, protected grey dotted), the class by weight. */
:root { --wsr-fed: #1e6b3c; --wsr-state: #8fdcb4; --wsr: #1e6b3c; --wsr-bg: #e7f5ec; --wsr-prot: #77766f; }   /* federal dark green, state mint (user, 2026-10-18) */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wsr-fed: #2f8f52; --wsr-state: #a6ecc8; --wsr: #6fcf97; --wsr-bg: #1b2e23; --wsr-prot: #9a998f; } }
:root[data-theme="dark"] { --wsr-fed: #2f8f52; --wsr-state: #a6ecc8; --wsr: #6fcf97; --wsr-bg: #1b2e23; --wsr-prot: #9a998f; }
.wsr-legend { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12px; width: 232px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.wsr-legend-t { font-weight: 600; margin-bottom: 4px; }
.wsr-legend-r { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.wsr-legend-r svg { flex: none; width: 36px; height: 12px; }
.wsr-legend-r svg line { stroke: var(--wsr-fed); fill: none; }
.wsr-legend-r svg line.st { stroke: var(--wsr-state); }
.wsr-legend-r svg line.prot { stroke: var(--wsr-prot); }
.wsr-legend-n { margin-top: 4px; color: var(--text-muted); }
.wsr-legend .linkish { font-size: 12px; text-align: left; }
.wsr-key { margin-top: 2px; }
.tr-sw.wsr-federal { background: var(--wsr-fed); }
.tr-sw.wsr-state { background: var(--wsr-state); }
.tr-sw.wsr-both { background: repeating-linear-gradient(90deg, var(--wsr-fed) 0 4px, var(--wsr-state) 4px 8px); }
.tr-sw.wsr-state_protected { background: repeating-linear-gradient(90deg, var(--wsr-prot) 0 2px, transparent 2px 5px); }
.tr-wsrgrp .wsr-badge { font-size: 11px; white-space: nowrap; }   /* the Wild & Scenic legend inside the Tributaries Map key (app.js wsrKeyHtml) */
.wsr-key .linkish { font-size: 12px; text-align: left; margin-top: 2px; }
.wsr-dlg h2 { margin-top: 0; }
.wsr-dlg h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 16px 0 4px; }
.wsr-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.wsr-badge { display: inline-block; font: 600 12px system-ui, sans-serif; color: var(--wsr); background: var(--wsr-bg); border: 1px solid var(--wsr); border-radius: 4px; padding: 1px 7px; }
.wsr-badge.prot { color: var(--text-secondary); background: var(--surface-2); border-color: var(--wsr-prot); border-style: dotted; }
.wsr-badge.appr { border-style: dashed; }
.wsr-rule { border-left: 4px solid var(--wsr); background: var(--wsr-bg); padding: 6px 10px; margin: 8px 0; border-radius: 0 6px 6px 0; }
.wsr-seg { border-top: 1px solid var(--border); padding: 6px 0; }
.wsr-seg .lim { margin: 2px 0; }
.wsr-this { border: 1px solid var(--wsr); border-radius: 8px; padding: 6px 12px 8px; margin: 8px 0; }
.wsr-this h3 { margin-top: 2px; color: var(--wsr); }
.wsr-docs { list-style: none; padding: 0; margin: 4px 0 8px; }
.wsr-docs li { border-top: 1px solid var(--border); padding: 5px 0; margin: 0; }
.wsr-doc-w { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 1px; }
.wsr-mk { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; margin-left: 4px; white-space: nowrap; }
.wsr-dlg details > summary { cursor: pointer; font-weight: 600; margin: 8px 0 2px; }
.wsr-dlg details > summary .small { font-weight: 400; }
.wsr-net { border-left: 3px solid var(--wsr); padding-left: 8px; margin: 6px 0; }
.wsr-net .linkish { font-size: inherit; text-align: left; }
.wsr-timeline { list-style: none; padding: 0; margin: 4px 0; }
.wsr-timeline li { display: flex; gap: 10px; margin: 2px 0; }
.wsr-timeline .d { flex: none; width: 5.2em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wsr-bang-i { background: none; border: 0; }
.wsr-bang { display: inline-block; font: 700 10px/14px system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; color: var(--wsr-fed); background: var(--surface-1); border: 1px solid var(--wsr-fed); border-radius: 4px; padding: 0 4px; }   /* federal and state classes differ (was "!") */
@media (max-width: 520px) { dialog.wsr-dlg { padding: 14px 12px; } .wsr-legend { width: 200px; } }
/* the Tributaries Map's heading replaces the app's in that view (user, 2026-10-18) */
#trHead { display: none; }
body.tribs-map #trHead { display: block; }
body.tribs-map header .dm-only { display: none; }
/* the Tributaries panel's collapsible groups (basins; the Wild & Scenic list) (user, 2026-10-18) */
details.tr-bgrp > summary { cursor: pointer; list-style-position: inside; }
details.tr-bgrp > summary.tr-sub { margin: 8px 0 2px; }
/* the panel's two feature menus, "Minimum flow requirements" and "Wild & Scenic rivers" (user, 2026-10-18) */
.tr-feat { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; }
summary.tr-feat-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin: 0 0 6px; }
summary.tr-feat-h .tr-feat-n { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* "Ask the map", phase 1 (F22): the question builder; shown in both views (the Tributaries Map hides every other Delivery Map section) */
body.tribs-map #panel > section#askSec:not([hidden]) { display: block !important; }
.map-tools #askSec { margin: 4px 0 0; padding: 0; border: 0; background: none; box-shadow: none; }
.map-tools #askSec > h2 { display: none; }   /* moved under the map key (app.js askInit, buildMapTools) */
.ask-form { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; margin-top: 6px; }
.ask-f { display: flex; flex-direction: column; gap: 2px; flex: 1 1 150px; min-width: 0; }
.ask-f[hidden] { display: none; }
.ask-f select, .ask-f input { width: 100%; min-width: 0; font-size: 16px; padding: 4px 6px; box-sizing: border-box; }
@media (min-width: 701px) { .ask-f select, .ask-f input { font-size: 13px; } }
.ask-form button[type="submit"] { flex: 0 0 auto; }
.ask-answer { margin-top: 8px; padding: 8px 10px; background: var(--surface-2, rgba(127,127,127,.08)); border: 1px solid var(--border, rgba(127,127,127,.25)); border-radius: 6px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ask-answer.stale { opacity: 0.55; }
.ask-answer .ask-sent { margin: 0; }
.ask-answer .ask-others, .ask-answer .ask-note { margin: 6px 0 0; }
.ask-answer .ask-acts { margin-top: 6px; }
.ask-answer .ask-nums table td { vertical-align: top; }
.ask-answer .ask-nums table td.num { text-align: left; white-space: normal; }
/* the typed question (F23), above the menus */
.ask-ai { margin: 6px 0 10px; }
.ask-ai[hidden] { display: none; }
.ask-ai-row { display: flex; gap: 6px; margin: 2px 0 4px; }
.ask-ai-row input { flex: 1 1 auto; min-width: 0; font-size: 16px; padding: 4px 6px; box-sizing: border-box; }
@media (min-width: 701px) { .ask-ai-row input { font-size: 13px; } }
.ask-ai-row button { flex: 0 0 auto; }
.ask-answer .ask-reason { margin: 0 0 6px; }
.doc-ours { white-space: nowrap; }   /* "our copy" after a document link (the Document archive): never split from its middle dot */
/* The Southern California Water Deliveries Map (F24, app.js "F24" blocks): a third view on the same map. Its panes and panel sections are hidden until body.socal-map; the
   Delivery Map's own lines are taken off the map by app.js (only the shared SWP south features stay), so no Delivery Map pane is hidden here except the ones that have nothing to
   do with this region. Colors are tokens (light, dark, [data-theme]). */
:root { --sc-river: #13898f; --sc-canal: #b9770e; --sc-cra: #8a4fb0; --sc-prov: #8a5fb5; --sc-laa: #2c6fb7; }
:root[data-theme="dark"] { --sc-river: #46c0c4; --sc-canal: #e0a845; --sc-cra: #b98ad6; --sc-prov: #b48ad6; --sc-laa: #6aa9ec; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sc-river: #46c0c4; --sc-canal: #e0a845; --sc-cra: #b98ad6; --sc-prov: #b48ad6; --sc-laa: #6aa9ec; } }
.leaflet-sclines-pane, .leaflet-scflow-pane, .leaflet-schits-pane, .leaflet-scres-pane { display: none; }
body.socal-map .leaflet-sclines-pane, body.socal-map .leaflet-scflow-pane, body.socal-map .leaflet-schits-pane, body.socal-map .leaflet-scres-pane { display: block; }
body.socal-map .leaflet-d16mk-pane, body.socal-map .leaflet-bundles-pane, body.socal-map .leaflet-segpins-pane, body.socal-map .leaflet-trpts-pane { display: none; }
#scHead { display: none; }
body.socal-map #scHead { display: block; }
body.socal-map header .dm-only { display: none; }
.sc-sec { display: none; }
body.socal-map .sc-sec:not([hidden]) { display: block; }
body.socal-map #panel > section:not(.sc-sec):not(#detail) { display: none !important; }
#timebar .sc-cy { display: none; }
body.socal-map #timebar .sc-cy { display: inline-block; }
.view-switch .vw-short { display: none; }
@media (max-width: 760px) { .view-switch .vw-long { display: none; } .view-switch .vw-short { display: inline; } .view-switch button { padding: 5px 8px; } }
.sc-chip { white-space: nowrap; }
.sc-prov { display: inline-block; font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .05em; border: 1px solid var(--sc-prov); color: var(--sc-prov); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.sc-7a { display: inline-block; font: 600 10px ui-monospace, Consolas, monospace; letter-spacing: .03em; border: 1px solid var(--sc-laa); color: var(--sc-laa); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; cursor: help; }
.mk-7a { display: inline-block; width: 22px; flex: none; text-align: center; font: 700 10px ui-monospace, Consolas, monospace; color: var(--sc-laa); }
.sc-ry-select, .sc-sec select { max-width: 100%; }
.sc-shared { display: inline-block; font: 600 11px ui-monospace, Consolas, monospace; color: var(--sys-swp); margin-left: 3px; }
.sc-ledger td.sc-resid { font-weight: 600; }
.sc-ledger .sc-sub { padding-left: 14px; color: var(--text-secondary); }
.sc-why { margin: 4px 0 0; }
.sc-check { margin: 6px 0; padding: 4px 8px; border-left: 3px solid var(--border); color: var(--text-secondary); }
.sc-hand { margin: 6px 0; padding: 6px 8px; border: 1px solid var(--sys-swp); border-radius: 6px; background: var(--surface-2); }
.sc-zoom { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
.sc-zoom button { font-size: 12px; }
.mk-hatch { display: inline-block; width: 22px; height: 6px; flex: none; background: repeating-linear-gradient(135deg, var(--text-muted) 0 2px, transparent 2px 5px); border-radius: 2px; }
.mk-acct { display: inline-block; width: 22px; height: 0; flex: none; border-top: 2px dotted var(--text-muted); }
.mk-star { display: inline-block; width: 22px; flex: none; text-align: center; font-weight: 700; color: var(--sys-swp); }
.mk-prov { display: inline-block; width: 22px; flex: none; text-align: center; font: 700 10px ui-monospace, Consolas, monospace; color: var(--sc-prov); }
.mk-pnode { display: inline-block; width: 9px; height: 9px; flex: none; margin: 0 6.5px; border: 2px dashed var(--unmeasured); border-radius: 50%; background: var(--surface-1); }
/* phase 2B: Reclamation's Decree accounting, imports by source, the Havasu ledger, Mexico */
.mk-dec { display: inline-block; width: 9px; height: 9px; flex: none; margin: 0 6.5px; border: 2px solid var(--sc-canal); border-radius: 50%; background: var(--sc-canal); }
.mk-ring { display: inline-block; width: 9px; height: 9px; flex: none; margin: 0 6.5px; border: 2px dashed var(--sc-river); border-radius: 50%; background: transparent; }
.sc-flag { display: inline-block; font: 600 10px ui-monospace, Consolas, monospace; border: 1px solid var(--acct-loss); color: var(--acct-loss-text); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; cursor: help; }
.sc-imp td, .sc-sec .bal td { vertical-align: top; }
.sc-subrow td { color: var(--text-secondary); }
.sc-subrow .sc-sub, .sc-ledger .sc-sub, .bal .sc-sub { padding-left: 14px; }
.sc-parts { margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.sc-parts summary { cursor: pointer; }
.sc-annual { margin: 10px 0 4px; padding: 6px 8px; border: 1px dashed var(--sc-river); border-radius: 6px; background: var(--surface-1); }
.sc-scroll { max-height: 220px; overflow-y: auto; }
.sc-sec .est-block .bal tr.est-row td { color: var(--text-secondary); }
.sc-sec .bal td { overflow-wrap: anywhere; }
.sc-sec .bal td.num { white-space: normal; text-align: right; max-width: 52%; }      /* a value with its difference note wraps instead of widening the table (375 px) */
/* "When flows were not met" (F26): the calendar window. The cell colors are the compliance strips' (.tr-cell.ok / .bad / .nd, --f); a strip is runs of equal cells */
dialog.doc.wide#trCalDlg { max-width: min(1240px, calc(100vw - 24px)); }
#trCalNav { align-items: center; gap: 8px; flex-wrap: wrap; }
#trCalNav select { font-size: 13px; max-width: 220px; }
.tr-cal-range, .tr-cal-steps { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tr-cal-range input[type=date] { font: inherit; font-size: 13px; }
.tr-cal-step { font-size: 12px; padding: 2px 8px; }
.tr-cal-open { align-items: center; gap: 8px; margin: 6px 0; }
.tr-cal-scroll { overflow: auto; max-height: calc(100vh - 330px); min-height: 160px; border: 1px solid var(--border); border-radius: 6px; position: relative; margin: 6px 0; }
.tr-cal-inner { min-width: 100%; }
.tr-cal-row { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.tr-cal-lab { flex: none; width: 300px; position: sticky; left: 0; z-index: 3; background: var(--surface-1); padding: 3px 8px 3px 6px; font-size: 12px; line-height: 1.25; box-sizing: border-box; }
.tr-cal-id { font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-cal-sum { flex: none; width: 150px; position: sticky; right: 0; z-index: 3; background: var(--surface-1); padding: 3px 6px; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-cal-n.ok { color: var(--tr-ok); }
.tr-cal-n.bad { color: var(--tr-bad); font-weight: 600; }
.tr-cal-n.nd { color: var(--text-secondary); }
.tr-cal-strip { flex: none; margin: 0; }
.tr-cal-strip .tr-cell { height: 16px; position: relative; }
.tr-cal-strip .tr-cell.none { cursor: default; }
.tr-cal-strip .tr-cell.p::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 50%, var(--surface-1) 0 1.3px, transparent 1.7px) 0 0 / var(--cw) 100%; }
.tr-cal-head { position: sticky; top: 0; z-index: 4; background: var(--surface-1); border-bottom: 1px solid var(--text-muted); }
.tr-cal-ticks { position: relative; height: 18px; font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tr-cal-ticks span { position: absolute; top: 3px; white-space: nowrap; }
.tr-cal-grp, .tr-cal-rv { margin: 0; padding: 4px 0; background: var(--surface-1); border-bottom: 1px solid var(--border); }
.tr-cal-grp { font-size: 13px; }
.tr-cal-grp span, .tr-cal-rv span { position: sticky; left: 8px; }
.tr-sw.tr-cal-none { background: transparent; outline: 1px solid var(--border); }
.tr-sw.tr-cal-prov { background: radial-gradient(circle at 50% 50%, var(--surface-1) 0 1.3px, transparent 1.7px), var(--tr-ok); }
.tr-cal-tip { position: fixed; z-index: 30; max-width: 340px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 12px; line-height: 1.35; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); pointer-events: none; }
@media (max-width: 700px) {
  /* phone: the label sits above its strip, the strip scrolls sideways; no horizontal scroll of the page */
  .tr-cal-row { display: block; }
  .tr-cal-lab, .tr-cal-sum { width: min(300px, calc(100vw - 56px)); position: sticky; left: 0; right: auto; text-align: left; }
  .tr-cal-head .tr-cal-lab, .tr-cal-head .tr-cal-sum { display: none; }
  .tr-cal-scroll { max-height: calc(100vh - 280px); }
}

/* Stream gauges (inventory) layer (F28): operator-group colours, muted (never a system, status or forecast colour), the key's filters and the card */
:root { --ginv-usgs: #4f6f94; --ginv-dwr: #4f8a6e; --ginv-usbr: #a8743f; --ginv-usace: #7d7f3c; --ginv-util: #a3586c; --ginv-local: #7b7a73; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ginv-usgs: #8aa8cc; --ginv-dwr: #7fbf9e; --ginv-usbr: #d3a06c; --ginv-usace: #b4b670; --ginv-util: #d68aa0; --ginv-local: #a7a69e; } }
:root[data-theme="dark"] { --ginv-usgs: #8aa8cc; --ginv-dwr: #7fbf9e; --ginv-usbr: #d3a06c; --ginv-usace: #b4b670; --ginv-util: #d68aa0; --ginv-local: #a7a69e; }
.ginv-key { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
.ginv-ksh { flex: none; width: 18px; height: 14px; }
.ginv-ops { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px; }
.ginv-chk { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.ginv-chk input { margin: 0; }
.ginv-sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; margin-right: 2px; }
.ginv-time { display: block; margin: 2px 0; }
.ginv-time select { font-size: 12px; max-width: 100%; }
.ginv-count { color: var(--text-secondary); margin-top: 3px; }
.ginv-dlg h2 { margin-top: 0; }
.ginv-dlg h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: 16px 0 4px; }
.ginv-ids { margin: 2px 0 6px; color: var(--text-secondary); }
.ginv-status { margin: 6px 0; }
.ginv-bars { width: 100%; height: auto; display: block; }
.ginv-bars .ginv-lab, .ginv-bars .ginv-ax { font: 11px system-ui, sans-serif; fill: var(--text-secondary); }
.ginv-bars .ginv-tick { stroke: var(--grid); stroke-width: 1; }
.ginv-bars .ginv-per { fill: var(--highlight); opacity: .18; }
.ginv-bar.s-u, .ginv-sw.s-u { fill: var(--ginv-usgs); background: var(--ginv-usgs); }
.ginv-bar.s-c, .ginv-sw.s-c { fill: var(--ginv-dwr); background: var(--ginv-dwr); }
.ginv-bar.s-w, .ginv-sw.s-w { fill: var(--ginv-usbr); background: var(--ginv-usbr); }
.ginv-bar.s-m, .ginv-sw.s-m { fill: var(--text-primary); background: var(--text-primary); }
.ginv-bar.silent { opacity: .45; }
.ginv-bar.s-p { fill: var(--ginv-usgs); opacity: .3; }
.ginv-bkey { margin-top: 2px; }
.ginv-bkey .ginv-sw { border-radius: 2px; margin-left: 6px; }
.ginv-used { margin: 2px 0 4px; padding-left: 18px; }
/* Delivered project water by subbasin / GSA (F32, app.js bsdv*): two one-hue sequential ramps (CVP in the app's CVP orange, SWP in its SWP blue; light to dark on the light theme, dim to bright on the dark one), and the CVP line colours of the chart
   (the categorical slots that are neither blue nor orange, which mean SWP and CVP here; Friant keeps its system green). */
:root { --bsdv-cvp-1: #fde6d8; --bsdv-cvp-2: #fac5a6; --bsdv-cvp-3: #f59f72; --bsdv-cvp-4: #ec7a45; --bsdv-cvp-5: #c9531f; --bsdv-cvp-6: #8f3510;
  --bsdv-swp-1: #cde2fb; --bsdv-swp-2: #9ec5f4; --bsdv-swp-3: #6da7ec; --bsdv-swp-4: #3987e5; --bsdv-swp-5: #1c5cab; --bsdv-swp-6: #104281; --bsdv-zero: #efeeea;
  --bsdv-l-svc: #eda100; --bsdv-l-friant: #1baf7a; --bsdv-l-settlement: #e87ba4; --bsdv-l-exchange: #008300; --bsdv-l-refuge: #6250d6; --bsdv-l-swp: #2a78d6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bsdv-cvp-1: #4d2915; --bsdv-cvp-2: #82411f; --bsdv-cvp-3: #b85a2a; --bsdv-cvp-4: #df7a45; --bsdv-cvp-5: #f2a37a; --bsdv-cvp-6: #fcd3bb;
  --bsdv-swp-1: #1b3556; --bsdv-swp-2: #184f95; --bsdv-swp-3: #2a78d6; --bsdv-swp-4: #5598e7; --bsdv-swp-5: #86b6ef; --bsdv-swp-6: #cde2fb; --bsdv-zero: #343432;
  --bsdv-l-svc: #c98500; --bsdv-l-friant: #199e70; --bsdv-l-settlement: #d55181; --bsdv-l-exchange: #008300; --bsdv-l-refuge: #9085e9; --bsdv-l-swp: #3987e5; } }
:root[data-theme="dark"] { --bsdv-cvp-1: #4d2915; --bsdv-cvp-2: #82411f; --bsdv-cvp-3: #b85a2a; --bsdv-cvp-4: #df7a45; --bsdv-cvp-5: #f2a37a; --bsdv-cvp-6: #fcd3bb;
  --bsdv-swp-1: #1b3556; --bsdv-swp-2: #184f95; --bsdv-swp-3: #2a78d6; --bsdv-swp-4: #5598e7; --bsdv-swp-5: #86b6ef; --bsdv-swp-6: #cde2fb; --bsdv-zero: #343432;
  --bsdv-l-svc: #c98500; --bsdv-l-friant: #199e70; --bsdv-l-settlement: #d55181; --bsdv-l-exchange: #008300; --bsdv-l-refuge: #9085e9; --bsdv-l-swp: #3987e5; }
/* while the view is on (body.bsdv-map), the Delivery Map shows these polygons alone: every other pane of the map steps aside */
body.bsdv-map .leaflet-map-pane > .leaflet-pane:not(.leaflet-tile-pane):not(.leaflet-bsdv-pane):not(.leaflet-bsdvlab-pane):not(.leaflet-tooltip-pane):not(.leaflet-popup-pane) { display: none; }
body.bsdv-map .pins-box { display: none; }
.bsdv { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.bsdv-h { margin-bottom: 2px; }
.bsdv-ctl { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.bsdv-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.bsdv-seg button { font: inherit; font-size: 12px; padding: 4px 9px; border: 0; border-right: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); cursor: pointer; }
.bsdv-seg button:last-child { border-right: 0; }
.bsdv-seg button[aria-pressed="true"] { background: var(--text-primary); color: var(--surface-1); }
.bsdv-tog { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary); cursor: pointer; }
.bsdv-tog.on { background: var(--text-primary); color: var(--surface-1); border-color: var(--text-primary); }
.bsdv-leg { margin: 4px 0 6px; }
.bsdv-rows { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 3px 0; font-size: 12px; }
.bsdv-rows > span { display: inline-flex; align-items: center; gap: 4px; }
.bsdv-sw { display: inline-block; flex: none; width: 16px; height: 10px; border-radius: 2px; border: 1px solid var(--border); box-sizing: border-box; }
.bsdv-key { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
.bsdv-est { color: var(--text-secondary); font-style: italic; }
.bsdv-tw { max-height: 360px; overflow: auto; margin-top: 4px; }
.bsdv-tab { width: 100%; }
.bsdv-tab th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; font-size: 11px; text-align: left; }
.bsdv-tab th.num { text-align: right; }
.bsdv-tab tr[data-bsdv-open] { cursor: pointer; }
.bsdv-tab tr[data-bsdv-open]:hover td { background: var(--surface-1); }
.bsdv-tab .bsdv-estc { color: var(--text-secondary); font-style: italic; }
.bsdv-sort { font-size: 11px; }
.bsdv-sort.on { font-weight: 600; text-decoration: none; color: var(--text-primary); }
.bsdv-chart .bsdv-bar { stroke: var(--surface-1); stroke-width: 1; }
.bsdv-chart .bsdv-hatch { stroke: var(--text-secondary); stroke-width: .8; }
.bsdv-chart .bsdv-oo { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 3 2; }
.bsdv-chart .bsdv-na { fill: none; stroke: var(--text-muted); stroke-width: 1.2; stroke-dasharray: 2 2; }
.acct-legend .sw.bsdv-lsw-h { background: repeating-linear-gradient(45deg, var(--text-secondary) 0 1.5px, var(--surface-1) 1.5px 4px); border: 1px solid var(--text-secondary); }
.acct-legend .sw.bsdv-lsw-oo { background: transparent; border: 1.2px dashed var(--text-muted); }
.acct-legend .sw.bsdv-lsw-na { background: transparent; border: 1.2px dashed var(--text-muted); height: 6px; }
.bsdv-labw { width: 0; height: 0; }
.bsdv-lab { transform: translate(-50%, -50%); text-align: center; white-space: nowrap; pointer-events: none; font: 600 10px/1.15 system-ui, sans-serif; color: var(--text-primary);
  text-shadow: 0 0 3px var(--surface-1), 0 0 3px var(--surface-1), 0 0 2px var(--surface-1); }
@media (max-width: 520px) { .bsdv-seg button { padding: 4px 7px; } .bsdv-rows { gap: 3px 8px; } }