/* The page shell of the rain map: the locked background photo under the water tint, and the glass / reading-paper tokens the
   panels use (src/water-map.css). The values are the one-map's, unchanged. Static file (not bundled): linked from index.html
   before the bundled stylesheet. Light for every viewer; every text ≥ 15 px. */
:root{
  /* the water tone: deep sea-blue at the edges, a sky-blue light from the top right — restrained */
  --wp-tint:linear-gradient(180deg,rgba(8,42,74,.52) 0%,rgba(14,62,102,.26) 42%,rgba(7,34,62,.66) 100%);
  --wp-sky:radial-gradient(1100px 620px at 82% -12%,rgba(140,205,245,.30),transparent 62%);
}

/* the locked background: one photo, softened, under the water tint (never scrolls, never moves with the pages) */
.wp-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#0b2a45;pointer-events:none}
/* the photo is shown sharp (no blur); readability comes from the glass panels */
.wp-bg img{display:block;width:100%;height:100%;object-fit:cover}
/* the view drifts slowly left ↔ right, like sitting and watching a sea of mist (2026-10-30, the
   .backdrop-pan): the picture is wider than the screen by --pan-margin each side and moves at most --pan-shift, so no edge
   ever shows; translate3d only (the compositor), 48 s each way, opening mid-sweep. Portrait crops the wide photo hard: a wider
   layer and a longer sweep. Only this photo moves — never the map, the panels or the text. */
.wp-bg picture{--pan-margin:8vw;--pan-shift:7vw;position:absolute;inset:0 calc(var(--pan-margin) * -1);display:block;animation:backdrop-pan 48s ease-in-out infinite alternate;animation-delay:-24s;will-change:transform}
@media (orientation:portrait){.wp-bg picture{--pan-margin:30vw;--pan-shift:26vw}}
@keyframes backdrop-pan{from{transform:translate3d(calc(var(--pan-shift) * -1),0,0)}to{transform:translate3d(var(--pan-shift),0,0)}}
@media (prefers-reduced-motion:reduce){.wp-bg picture{animation:none}}
.wp-bg::after{content:"";position:absolute;inset:0;background:var(--wp-sky),var(--wp-tint)}

/* ── Clear liquid glass ("max", macOS-clear, 2026-10-30): the big surfaces (bar, controls, panel) are
   see-through over a live blur of the STILL photo (never over the WebGL map); text set straight on them gets a soft white
   halo; rows, cards, inputs and chips inside keep a "plate". Phones: a lighter blur. No backdrop-filter → a solid surface. ── */
:root{
  --wp-clear:radial-gradient(120% 80% at 6% 0%,rgba(255,255,255,.14),transparent 55%),linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.06) 100%);
  --wp-clear-edge:rgba(255,255,255,.74);
  --wp-clear-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.12),0 1px 1px rgba(0,0,0,.06),0 30px 70px -28px rgba(4,24,44,.62);
  /* unprefixed FIRST, then -webkit-: this repo's minifier (Vite 5 / esbuild) keeps BOTH in that order (the other order drops -webkit-, so Safari/iOS ≤ 17 lost the blur); test/glass-build.test.js checks the build */
  --wp-blur:blur(36px) saturate(190%);
  --wp-blur-phone:blur(22px) saturate(175%);
  --wp-plate:rgba(255,255,255,var(--wp-plate-a));--wp-plate-a:.5;   /* controls and cards inside the glass (2026-10-30: was .84) */
  --wp-halo:0 0 1px rgba(255,255,255,.95),0 0 10px rgba(255,255,255,.8),0 0 18px rgba(255,255,255,.55);
}

/* ── Content boxes: glass panes (a sheen from the lit corner, a 1 px rim, an inner highlight). No nested backdrop-filter. ── */
:root{
  --wp-pane-sheen:linear-gradient(160deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 45%);
  --wp-pane-rim:rgba(255,255,255,.72);
  --wp-pane-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.1),0 1px 2px rgba(16,24,40,.05),0 12px 30px -18px rgba(4,24,44,.45);
}

/* ── Reading paper: the boxes people READ are a frosted near-white paper with a hairline rim; cards set on the paper are
   pure white with a hairline and a soft drop. ── */
:root{
  --wp-read:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 46%,rgba(248,251,254,.92) 100%);
  --wp-read-rim:rgba(255,255,255,.96);
  --wp-read-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(18,38,64,.04),0 0 0 1px rgba(18,38,64,.06),0 2px 6px -2px rgba(16,24,40,.1),0 22px 44px -24px rgba(4,24,44,.55);
  --wp-read-card:#fff;
  --wp-read-line:rgba(18,38,64,.1);
  --wp-read-card-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 18px -12px rgba(4,24,44,.3);
}