/* California Water Map: a full-screen map in the map family's layout, as on
   Hard Tech.

   The Layers panel top-left (open on a desktop; at 768px and under, closed
   until asked for, over a backdrop), zoom top-right, the credits pill
   bottom-right, and the legend above it: the panel holds the list of dams
   and runs the height of the screen, so a bottom-left legend would sit under
   it, as on Hard Tech. The menu button, panel and legend use the .ob-panel
   kit from ui.css.

   The site's theme (src/scripts/theme.js, switched from the header) changes
   the whole page: the panels take brand.css's light tokens, and the marks
   and tiles their light set below. */

:root {
  /* One color per water system, measured in both themes (CIE Lab distance
     of at least 25 between any two, the dams and the accent purple
     included; each clears 3:1 on its basemap's ground). main.js reads them
     by system id. */
  --cw-swp: #38bdf8;
  --cw-cvp: #4ade80;
  --cw-laa: #fb923c;
  --cw-cra: #f87171;
  --cw-sandiego: #fde047;
  --cw-hetchy: #2dd4bf;
  --cw-mokelumne: #f472b6;
  --cw-imperial: #d4a373;
  --cw-res: #3b82f6;               /* reservoir outlines: measured 32 or more from every color here, both themes */
  --cw-local: #a3e635;             /* DWR's local canals: measured 40 or more from every color here */
  --cw-dam: #94a3b8;               /* a dam's outline: quieter than the lines */
  --cw-dam-fill: rgba(148, 163, 184, 0.3);
  --cw-ring: var(--ob-fg);         /* the selected dam or line */
  --cw-plant: var(--ob-fg);        /* a plant: ink, apart from every system color */
  --cw-plant-edge: #030712;        /* its outline, and a hollow one's ground */
  --cw-tip: #111827;               /* a tooltip's ground, as Traffic Violence's --sd-tip */
  --cw-current: rgba(192, 132, 252, 0.16);  /* the open row */
  --cw-backdrop: rgba(3, 7, 18, 0.6);       /* behind the panel on a phone */
  --cw-light-ground: #f2f3f0;      /* the light basemap's land */
  --cw-panel-w: 320px;
}
html[data-map-theme="light"] {
  --cw-swp: #0369a1;
  --cw-cvp: #15803d;
  --cw-laa: #df4e00;               /* the light ones under 3:1 on the light land (about #e2e2e2) are deepened to 3.1:1 (BL-187) */
  --cw-cra: #b91c1c;
  --cw-sandiego: #a16207;
  --cw-hetchy: #0f766e;
  --cw-mokelumne: #be185d;
  --cw-imperial: #78350f;
  --cw-local: #4f8e00;
  --cw-res: #2e7bee;
  --cw-dam: #475569;
  --cw-dam-fill: rgba(71, 85, 105, 0.18);
  --cw-ring: #111827;
  --cw-plant: #111827;
  --cw-plant-edge: #ffffff;
  --cw-tip: #ffffff;
  --cw-current: rgba(126, 34, 206, 0.1);
  --cw-backdrop: rgba(15, 23, 42, 0.35);
}

body.cw-page {
  margin: 0;
  background: var(--ob-bg);
  color: var(--ob-fg);
  font-family: var(--ob-font);
}
html[data-map-theme="light"] body.cw-page { background: var(--cw-light-ground); }

/* Every element the page shows and hides sets its own display, which would
   override [hidden]. */
.cw-page [hidden] { display: none !important; }

.cw-main { position: absolute; inset: 0; }
#map { position: fixed; inset: 0; z-index: 0; background: inherit; }

/* Tucked above the screen until a keyboard reaches it. */
.cw-skip {
  position: absolute; left: 12px; top: -48px; z-index: 10001;
  padding: 8px 12px; border-radius: var(--ob-radius-sm);
  background: var(--ob-purple); color: var(--ob-on-accent);
  font: var(--ob-text-sm) var(--ob-font); text-decoration: none;
}
.cw-skip:focus { top: calc(var(--ob-bar-h) + 8px); }

/* ---- Layers button and panel ---------------------------------------------- */

.menu-btn {                        /* the surface is .ob-panel's */
  position: fixed; top: var(--ob-map-inset); left: var(--ob-map-inset); z-index: 9995;
  min-height: var(--ob-control-h-lg);
  padding: 8px 14px;
  font: 600 var(--ob-text-sm) var(--ob-font);
  cursor: pointer;
}

/* A phone opens with the panel closed: the page's name sits beside Layers
   until the panel opens. */
.map-title { display: none; }
@media (max-width: 768px) {
  .menu-btn[aria-expanded="false"] ~ .map-title {
    display: flex; align-items: center; position: fixed; z-index: 9994; pointer-events: none;
    top: var(--ob-map-inset); left: 118px; max-width: calc(100vw - 118px - 64px);
    box-sizing: border-box; min-height: var(--ob-control-h-lg);
    margin: 0; padding: 4px 12px;
    font: 600 var(--ob-text-md)/1.25 var(--ob-font);
  }
}

.panel {
  position: fixed; top: 56px; left: var(--ob-map-inset); z-index: 9990;
  display: flex; flex-direction: column; gap: 10px;
  box-sizing: border-box;
  width: var(--cw-panel-w);
  max-width: calc(100vw - 2 * var(--ob-map-inset));
  max-height: calc(100vh - 56px - var(--ob-bar-h) - var(--ob-map-inset));
  max-height: calc(100dvh - 56px - var(--ob-bar-h) - var(--ob-map-inset));
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform .25s ease, visibility 0s;
}
.panel.closed {
  transform: translateX(calc(-100% - 24px));
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
.panel:focus:not(:focus-visible) { outline: none; }
.panel h1, .panel h2, .panel h3, .panel p { margin: 0; }

.cw-backdrop { position: fixed; inset: 0; z-index: 9989; background: var(--cw-backdrop); }

.cw-readout { font-size: var(--ob-text-sm); color: var(--ob-muted); }
.cw-readout strong { color: var(--ob-fg); font-weight: 600; }

.cw-filters { display: flex; flex-direction: column; gap: 10px; }
.cw-filters .ob-label { font-size: var(--ob-text-xs); }
.cw-input { font-size: var(--ob-text-md); min-height: var(--ob-control-h-lg); box-sizing: border-box; }
.cw-group { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.cw-fold > summary {
  display: flex; justify-content: space-between; align-items: center;
  min-height: var(--ob-control-h); list-style: none; cursor: pointer;
}
.cw-fold > summary::-webkit-details-marker { display: none; }
.cw-fold > summary::after { content: "\25BE"; }
.cw-fold:not([open]) > summary::after { content: "\25B8"; }
.cw-fold[open] > summary { margin-bottom: 4px; }
.cw-check { display: flex; align-items: center; gap: 8px; min-height: var(--ob-control-h); font-size: var(--ob-text-sm); cursor: pointer; }
.cw-check input { margin: 0; width: 16px; height: 16px; flex: none; }
.cw-check-n { margin-left: auto; white-space: nowrap; color: var(--ob-muted); font-size: var(--ob-text-xs); font-variant-numeric: tabular-nums; }
.cw-systems { list-style: none; margin: 0 0 0 24px; padding: 0; }
.cw-systems .cw-check { font-size: var(--ob-text-sm); }
.cw-systems:has(~ .cw-checkall) { margin-bottom: 0; }
.cw-checkall { display: flex; gap: 16px; margin-left: 24px !important; }
/* The water systems and local canals, folded under "Aqueducts and canals" (closed at first). */
.cw-sub { margin: -2px 0 0 24px; }
.cw-sub summary { display: flex; align-items: center; gap: 6px; min-height: var(--ob-control-h); cursor: pointer; list-style: none; font-size: var(--ob-text-sm); color: var(--ob-muted); }
.cw-sub summary::-webkit-details-marker { display: none; }
.cw-sub summary::before { content: "\25B8"; font-size: var(--ob-text-xs); }
.cw-sub[open] summary::before { content: "\25BE"; }
.cw-sub summary:hover { color: var(--ob-fg); }
.cw-sub .cw-systems, .cw-sub .cw-checkall { margin-left: 0 !important; }
.cw-group > .cw-check > .cw-key { width: 30px; }
.cw-swatch { flex: none; width: 22px; height: 4px; border-radius: 2px; background: var(--c); }
html[data-map-theme="light"] .cw-swatch { box-shadow: 0 0 0 2px var(--cw-light-ground); }

.cw-linkbtn {
  min-height: var(--ob-control-h);
  padding: 0;
  border: 0;
  background: none;
  color: var(--ob-purple);
  font: inherit;
  font-size: var(--ob-text-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---- the list ---------------------------------------------------------------- */

.cw-results:focus { outline: none; }
.cw-results-h { margin-bottom: 4px; }
.cw-list { list-style: none; margin: 0; padding: 0; }
.cw-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--ob-radius-sm);
  background: none;
  color: var(--ob-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cw-row:hover { background: var(--ob-hover); }
.cw-row[aria-current="true"] { background: var(--cw-current); }
.cw-row-name { display: flex; align-items: center; gap: 8px; font-size: var(--ob-text-md); font-weight: 600; }
.cw-row-sub { font-size: var(--ob-text-xs); color: var(--ob-muted); }
.cw-more, .cw-empty { font-size: var(--ob-text-sm); color: var(--ob-muted); }

/* ---- one dam or aqueduct ---------------------------------------------------- */

.cw-detail { display: flex; flex-direction: column; gap: 10px; }
.cw-detail:focus { outline: none; }
.cw-detail h2 { display: flex; align-items: center; gap: 8px; font-size: var(--ob-text-base); font-weight: 600; line-height: 1.3; }
.cw-detail a { color: var(--ob-purple); }
.cw-detail-sub { font-size: var(--ob-text-sm); color: var(--ob-muted); }
.cw-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: var(--ob-text-sm); }
.cw-facts dt { color: var(--ob-muted); white-space: nowrap; }
.cw-facts dd { margin: 0; }
.cw-note { font-size: var(--ob-text-xs); color: var(--ob-muted); line-height: 1.45; }
.cw-detail-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* ---- footer ------------------------------------------------------------------- */

.cw-foot {
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px solid var(--ob-panel-border);
  font-size: var(--ob-text-xs);
  color: var(--ob-muted);
  /* Pinned to the bottom of the panel, as on Hard Tech, so How this is made
     and the downloads are in reach without scrolling past the list. */
  position: sticky; bottom: -12px; z-index: 2;
  background: var(--ob-surface-flat);
  background: rgb(from var(--ob-panel) r g b / 1);
  margin: 2px -14px -12px; padding: 10px 14px 20px;
}
.cw-about[open] { max-height: 38vh; overflow-y: auto; }
.cw-skip-list:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cw-skip-list { display: inline-block; margin-bottom: 6px; font-size: var(--ob-text-sm); color: var(--ob-purple); }
.cw-about summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; color: var(--ob-purple); }
.cw-about p { margin: 6px 0 0; line-height: 1.45; }
.cw-about a, .cw-dl a { color: var(--ob-purple); }
.cw-dl { margin: 6px 0 0; line-height: 1.45; }

/* ---- legend ------------------------------------------------------------------- */

.cw-legend {
  position: fixed; right: var(--ob-map-inset); z-index: 9985;
  bottom: calc(var(--ob-map-inset) + var(--ob-credits-h) + 8px);
  max-width: calc(100vw - 2 * var(--ob-map-inset));
  padding: 8px 12px;
}
@media (max-width: 768px) { .cw-legend { right: auto; left: var(--ob-map-inset); } }

.cw-legend summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 28px;
  list-style: none; cursor: pointer;
}
.cw-legend summary::-webkit-details-marker { display: none; }
.cw-legend summary::after { content: "\25BE"; }
.cw-legend:not([open]) summary::after { content: "\25B8"; }
.cw-legend[open] summary { margin-bottom: 4px; }
/* A note wraps to the width the legend's rows set, rather than widen the card (DB:E17). */
.cw-legend-note { width: 0; min-width: 100%; margin: 6px 0 0; font-size: var(--ob-text-xs); color: var(--ob-muted); }
.cw-key { flex: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 30px; height: 16px; }
.cw-key--dams i { display: block; box-sizing: border-box; border-radius: 50%; background: var(--cw-dam-fill); border: 1.5px solid var(--cw-dam); }
.cw-key--dams i:first-child { width: 7px; height: 7px; }
.cw-key--dams i:last-child { width: 15px; height: 15px; }
.cw-key--canal, .cw-key--pipeline, .cw-key--tunnel { height: 0; border-top: 3px solid var(--ob-fg); }
.cw-key--pipeline { border-top-style: dashed; }
.cw-key--tunnel { border-top-style: dotted; }
.cw-key--local { border-top-color: var(--cw-local); border-top-width: 2px; }
.cw-key--res i { display: block; box-sizing: border-box; width: 18px; height: 12px; border: 1px solid var(--cw-res); border-radius: 40% 55% 45% 60%; background: color-mix(in srgb, var(--cw-res) 18%, transparent); }
.cw-detail h2 .cw-key--res { width: 20px; }
.cw-page [data-off] { display: none; }
/* A plant: its layer's shape in the page's ink (LAYERS in main.js), filled
   when it operates. */
.cw-key--plant { width: 30px; display: inline-flex; justify-content: center; }
.cw-key--plant .cw-mark { width: 14px; height: 14px; }
.cw-row-name .cw-key--plant, .cw-detail h2 .cw-key--plant { width: 14px; }
.cw-mark { display: block; width: 100%; height: 100%; overflow: visible; }
.cw-mark path { fill: var(--cw-plant); stroke: var(--cw-plant-edge); stroke-width: 1.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.cw-mark--hollow path { fill: var(--cw-plant-edge); stroke: var(--cw-plant); stroke-width: 2px; }
.cw-mark--off { opacity: 0.45; }   /* not operating: faded, since dashes do not show at map size */

/* ---- plants on the map ---------------------------------------------------------- */

.leaflet-marker-icon.cw-plant { background: none; border: 0; cursor: pointer; }
.cw-sources { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 4px; font-size: var(--ob-text-xs); color: var(--ob-muted); line-height: 1.45; }

/* ---- the map's own marks ------------------------------------------------------ */

.leaflet-tooltip.cw-tip, .cw-popup .leaflet-popup-content-wrapper {
  background: var(--cw-tip); color: var(--ob-fg);
  border: 1px solid var(--ob-panel-border); border-radius: var(--ob-radius-sm);
  box-shadow: var(--ob-panel-shadow);
  font: var(--ob-text-sm)/1.35 var(--ob-font);
}
.leaflet-tooltip-top.cw-tip::before { border-top-color: var(--cw-tip); }
.cw-tip-sub { color: var(--ob-muted); font-size: var(--ob-text-xs); }
.leaflet-tooltip.cw-label { padding: 2px 8px; font-weight: 600; pointer-events: none; }

/* ---- the phone's card -------------------------------------------------------- */

.cw-peek {
  position: fixed; z-index: 9987;
  left: var(--ob-map-inset); right: var(--ob-map-inset);
  bottom: calc(var(--ob-map-inset) + var(--ob-credits-h) + 8px);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 6px 8px 14px;
}
.cw-peek-text { flex: 1; min-width: 0; }
.cw-peek-text p { margin: 0; }
.cw-peek-name { font-size: var(--ob-text-md); font-weight: 600; }
.cw-peek-where { font-size: var(--ob-text-xs); color: var(--ob-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-peek #cw-peek-more { flex: none; min-height: 44px; padding: 0 6px; }
.cw-peek-close {
  flex: none; width: 44px; height: 44px;
  border: 0; background: none; color: var(--ob-muted);
  font: var(--ob-text-xl)/1 var(--ob-font); cursor: pointer;
}
/* While the card is up, the legend steps out of its way. */
body:has(#cw-peek:not([hidden])) .cw-legend { display: none; }

.cw-notice {
  position: fixed; top: calc(var(--ob-bar-h) + var(--ob-map-inset)); left: 50%; z-index: 9980;
  transform: translateX(-50%);
  max-width: calc(100vw - 2 * var(--ob-map-inset) - 120px);
  padding: 8px 12px;
}
@media (max-width: 768px) {
  .cw-notice { left: var(--ob-map-inset); transform: none; max-width: calc(100vw - 2 * var(--ob-map-inset) - 64px); top: calc(var(--ob-bar-h) + var(--ob-map-inset) + var(--ob-control-h-lg) + 8px); }
  body:has(.menu-btn[aria-expanded="true"]) .cw-notice { display: none; }
}

/* Leaflet's controls in the panel style. */
.leaflet-control-zoom.leaflet-bar { border: 1px solid var(--ob-panel-border); border-radius: var(--ob-radius-sm); box-shadow: var(--ob-panel-shadow); }
.leaflet-control-zoom a, .leaflet-control-zoom a:hover {
  width: 44px; height: 44px; line-height: 44px;
  background: var(--ob-panel); color: var(--ob-fg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.leaflet-control-zoom a.leaflet-disabled { color: var(--ob-muted); opacity: 0.5; cursor: default; }
.leaflet-container { font-family: var(--ob-font); }

/* On a phone the panel is a sheet over the map. */
@media (max-width: 768px) {
  .panel {
    z-index: 9992;
    width: min(var(--cw-panel-w), calc(100vw - 2 * var(--ob-map-inset)));
  }
}