/* Unmapped Search (11 Nov 2026; first version step 2.3; v2 the same day): the search home (/search: the box in the
   middle of the screen, real questions with today's figures), and one page per kind of thing a search resolves to
   (worker/search-pages.ts): "Here" for a spot (a map sheet and numbered sections), a ward, a dam, a number, a
   "Which one?" list. A page has one black sheet; a section has one source line; the footer is said once. Uses the site's own tokens (styles.css). No box in
   the header any more: "Search" in the menu comes here.

   Motion, direction A "the sheet settles" (Reports/search-home-2026-11-11.md): things rise a few pixels into place in
   reading order, lines draw once, the dam's gauge fills, and the box glides from the middle of the home to the top of
   the answer (a view transition, where the browser has them). All of it sits inside prefers-reduced-motion:
   no-preference; without it the page is simply there. Nothing loops, nothing moves after it has settled. */

.sx-ico { width: 16px; height: 16px; flex: none; }

/* ── The box ───────────────────────────────────────────────────────────────────────────────────────────────── */
.sx-box { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 6px 0 14px; border: 1.5px solid var(--ink); border-radius: var(--r-sm); background: var(--surface); text-align: left; transition: box-shadow .25s var(--ease); }
.sx-box .sx-ico { width: 18px; height: 18px; color: var(--ink-3); transition: color .2s ease; }
.sx-box:focus-within { outline: 2px solid var(--accent-strong); outline-offset: 2px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent), 0 22px 40px -30px rgba(15, 20, 25, .5); }
.sx-box:focus-within .sx-ico { color: var(--ink); }
/* The rule under the box: grows from the left on focus, and runs while suggestions are on their way. */
.sx-box::after { content: ''; position: absolute; left: -1.5px; right: -1.5px; bottom: -1.5px; height: 3px; border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); pointer-events: none; }
.sx-box:focus-within::after { transform: scaleX(1); }
.sx-box input[type=search] { flex: 1; min-width: 0; height: 52px; border: 0; background: transparent; font: 500 1.05rem var(--sans); color: var(--ink); outline: none; }
.sx-box input::-webkit-search-cancel-button { display: none; }
.sx-go { min-height: 42px; padding: 0 16px; border: 0; border-radius: var(--r-sm); background: var(--core); color: var(--on-core); font: 600 .9rem var(--sans); cursor: pointer; }
.sx-go:hover { background: color-mix(in srgb, var(--core) 84%, var(--bg)); }

/* ── Suggestions while typing (search.js) ──────────────────────────────────────────────────────────────────── */
.sx-list { position: absolute; z-index: 70; top: calc(100% + 8px); left: -1.5px; right: -1.5px; max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 8px; border: 1.5px solid var(--ink); border-radius: var(--r-sm); background: var(--surface); box-shadow: 0 24px 40px -26px rgba(15, 20, 25, .5); color: var(--ink); text-align: left; }
.sx-list p { margin: 10px 0 2px; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
.sx-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: baseline; min-height: 44px; padding: 9px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.sx-list a b { font-weight: 600; font-size: .94rem; }
.sx-list a span { font: 620 1rem var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.sx-list a small { grid-column: 1 / -1; font-size: .76rem; color: var(--ink-3); }
.sx-list a[aria-selected=true], .sx-list a:hover { background: var(--sunk); margin: 0 -12px; padding-left: 12px; padding-right: 12px; }
.sx-list p.sx-osm { margin: 8px 0 0; text-transform: none; letter-spacing: 0; font: 400 .8125rem/1.4 var(--sans, inherit); }
.sx-list p.sx-osm a { display: inline; min-height: 0; padding: 0; border: 0; color: inherit; text-decoration: underline; }

/* ── The search home ───────────────────────────────────────────────────────────────────────────────────────── */
.sx-home { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 0; max-width: 720px; min-height: calc(100svh - 190px); margin: 0 auto; padding: clamp(28px, 9svh, 96px) 0 24px; text-align: center; }
.sx-name { margin: 0; font: 650 clamp(2.3rem, 9vw, 4.2rem)/1 var(--sans); letter-spacing: -.045em; }
.sx-name span { font-weight: 450; color: var(--ink-2); }
.sx-name b { position: relative; font-weight: 700; }
.sx-name b::after { content: ''; position: absolute; right: -.34em; top: .08em; width: .2em; height: .2em; background: var(--accent); }
.sx-lede { margin: 14px 0 26px; max-width: 30em; font-size: 1.02rem; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.sx-home .sx-box { min-height: 64px; padding-left: 18px; }
.sx-home .sx-box input[type=search] { height: 60px; font-size: 1.12rem; }
.sx-home .sx-go { min-height: 48px; padding: 0 20px; }
.sx-hint { margin: 12px 0 0; font-size: .84rem; color: var(--ink-3); }
.sx-key { display: none; }
.sx-hint kbd { display: inline-block; min-width: 1.5em; padding: 0 5px; border: 1px solid var(--rule-2); border-bottom-width: 2px; border-radius: 3px; background: var(--surface); font: 500 .75rem/1.5 var(--mono); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .sx-key { display: inline; } }
.sx-egs { width: 100%; margin-top: clamp(28px, 6svh, 56px); text-align: left; }
.sx-egs ul { display: grid; gap: 0; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.sx-egs li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 14px; align-items: baseline; min-height: 48px; padding: 11px 2px; border-bottom: 1px solid var(--rule); color: inherit; text-decoration: none; }
.sx-egs .q { font-weight: 550; text-wrap: balance; }
.sx-egs .q::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 9px 2px 0; background: var(--rule-2); transition: background-color .2s ease; }
.sx-egs a:hover .q::before, .sx-egs a:focus-visible .q::before { background: var(--accent); }
.sx-egs a:hover .q { text-decoration: underline; text-underline-offset: 3px; }
.sx-egs b { font: 640 1.06rem var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.sx-egs small { grid-column: 1 / -1; padding-left: 15px; font-size: .78rem; line-height: 1.4; color: var(--ink-3); }
/* A phone's home stays short: six questions, without their second line. */
@media (max-width: 519px) { .sx-egs small, .sx-egs li:nth-child(n+7) { display: none; } .sx-home { min-height: 0; } }
@media (min-width: 760px) { .sx-egs ul { grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.sx-home .sx-fine { max-width: 44em; text-wrap: balance; }

/* ── A question's page ─────────────────────────────────────────────────────────────────────────────────────── */
.sx-top { padding: clamp(20px, 4vh, 40px) 0 4px; }
.sx-mini { margin: 0 0 10px; font: 650 1rem/1 var(--sans); letter-spacing: -.03em; }
.sx-mini a { color: var(--ink); text-decoration: none; }
.sx-mini span { font-weight: 450; color: var(--ink-2); }
.sx-ans.sheet { position: relative; isolation: isolate; overflow: hidden; padding: 18px 18px 20px; border-radius: var(--r-sm); background: var(--core); color: var(--on-core); }
.sx-ans.sheet::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--on-core) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on-core) 6%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
.sx-ans .sheet-h { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.sx-ans .sheet-h::before { content: ''; width: 8px; height: 8px; margin-top: 3px; background: var(--accent); flex: none; }
.sx-ans h2 { margin: 0; font: 600 1.3rem/1.2 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.sx-ans a { color: var(--on-core); }
.sx-tag { display: inline-block; margin: 8px 0 0; padding: 2px 7px; border-radius: 2px; background: color-mix(in srgb, var(--on-core) 14%, transparent); font: 500 .75rem/1.5 var(--mono); text-transform: uppercase; letter-spacing: .02em; }
.sx-big { margin: 4px 0 0; font: 640 clamp(2.6rem, 12vw, 4.4rem)/1.05 var(--sans); letter-spacing: -.05em; overflow-wrap: anywhere; }
.sx-big small { font: 500 1rem var(--sans); letter-spacing: 0; color: var(--on-core-2); }
.sx-say { margin: 10px 0 0; font-size: .98rem; line-height: 1.5; color: var(--on-core-2); }
.sx-say b { color: var(--on-core); font-weight: 600; }
.sx-src { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin: 14px 0 0; font-size: .8rem; color: var(--on-core-2); }
.sx-rel { font-family: var(--mono); font-size: .75rem; padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--on-core) 35%, transparent); border-radius: 2px; text-decoration: none; white-space: nowrap; }
.sx-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sx-ans .btn-ink { background: var(--on-core); color: var(--core); }
.sx-ans .btn-line { border-color: color-mix(in srgb, var(--on-core) 40%, transparent); color: var(--on-core); }
.sx-date { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: .84rem; color: var(--on-core-2); }
.sx-date input { min-height: 38px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--on-core) 40%, transparent); border-radius: var(--r-sm); background: transparent; color: var(--on-core); font: 500 .86rem var(--sans); color-scheme: dark; }

/* No data: hatching means "no data", as on the site's map. */
.sx-nodata { padding: 16px; border: 1px dashed var(--ink-2); border-radius: var(--r-sm); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--hatch) 13%, transparent) 0 1px, transparent 1px 5px); }
.sx-nodata h2 { margin: 4px 0 0; font: 600 1.2rem/1.25 var(--sans); letter-spacing: -.02em; }
.sx-nodata p { margin: 6px 0 0; font-size: .92rem; color: var(--ink-2); }
.sx-k { margin: 0; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
.sx-rows { list-style: none; margin: 0; padding: 0; }
.sx-rows li > a, .sx-rows li > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.sx-rows li > a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sx-rows b { font-weight: 600; }
.sx-rows .v { font: 620 1.02rem var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.sx-rows small { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-3); }
.sx-rows .is-weak b { font-weight: 500; color: var(--ink-2); }

.sx-fine { margin: 22px 0 0; font-size: .82rem; color: var(--ink-3); }
.sx-foot { margin-top: 32px; }
/* Addresses (step 2.4): the approximate tag. */

/* ── Small labels and notes shared by the pages ────────────────────────────────────────────────────────────── */
.sx-pk { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.sx-pnote { margin: 6px 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-2); }

/* The dam: a gauge, four figures, the year as a line, rain, and the pictures from space. */
.sv { --p-ink: var(--ink); --p-2: var(--ink-3); --p-rule: var(--rule); --p-soft: var(--sunk); }
.sv .sheet { --p-ink: var(--on-core); --p-2: var(--on-core-2); --p-rule: color-mix(in srgb, var(--on-core) 18%, transparent); --p-soft: color-mix(in srgb, var(--on-core) 12%, transparent); }
.sx-gauge { position: relative; height: 14px; margin: 16px 0 22px; background: var(--p-soft); border-radius: 2px; }
.sx-gauge-fill { position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--accent); border-radius: 2px 0 0 2px; transform-origin: left; }
.sx-gauge-tick { position: absolute; top: -3px; bottom: -3px; left: var(--x); width: 1.5px; background: var(--p-ink); }
.sx-gauge-tick span { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); font: 500 .75rem/1 var(--mono); text-transform: uppercase; color: var(--p-2); }
.sx-gauge-mark { position: absolute; top: 50%; left: var(--x); width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 1.5px solid var(--p-ink); border-radius: 50%; background: transparent; }
.sx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
@media (min-width: 520px) { .sx-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sx-stats div { padding-top: 8px; border-top: 1px solid var(--p-rule); }
.sx-stats dt { font-size: .8125rem; line-height: 1.3; color: var(--p-2); }
.sx-stats dd { margin: 2px 0 0; font: 620 1.12rem/1.15 var(--sans); letter-spacing: -.02em; }
.sx-stats dd small { font: 500 .8125rem var(--sans); letter-spacing: 0; color: var(--p-2); }
.sx-tl { margin: 0; }
.sx-tl svg { display: block; width: 100%; height: clamp(110px, 26vw, 160px); overflow: visible; color: var(--p-ink); }
.sx-tl path { fill: none; vector-effect: non-scaling-stroke; }
.sx-tl-now { stroke: currentColor; stroke-width: 2; }
.sx-tl-before { stroke: var(--p-2); stroke-width: 1.25; stroke-dasharray: 3 4; }
.sx-tl-full, .sx-tl-base { stroke: var(--p-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sx-tl-full { stroke-dasharray: 1 3; stroke: var(--p-2); }
.sx-tl-t { display: none; }
.sx-tl .sx-dot { fill: var(--accent); }
.sx-tl-x { display: flex; justify-content: space-between; margin: 4px 0 0; font: 500 .75rem/1.3 var(--mono); color: var(--p-2); }
.sx-tl figcaption { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: .76rem; color: var(--p-2); }
.sx-lg::before { content: ''; display: inline-block; width: 16px; height: 0; margin: 0 6px 3px 0; border-top: 2px solid var(--p-ink); }
.sx-lg-before::before { border-top: 1.25px dashed var(--p-2); }
.sx-rain table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.sx-rain th { padding: 4px 12px 4px 0; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; text-align: left; color: var(--p-2); border-bottom: 1px solid var(--p-rule); }
.sx-rain td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--p-rule); font-variant-numeric: tabular-nums; }
/* No pictures yet: hatching means "no data", as on the site's map. */
.sx-hatch { padding: 14px; border: 1px dashed var(--p-2); border-radius: var(--r-sm); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--p-ink) 12%, transparent) 0 1px, transparent 1px 6px); }
.sx-hatch p { margin: 0; max-width: 46em; font-size: .86rem; line-height: 1.5; color: var(--p-2); }
.sx-hatch b { color: var(--p-ink); }
.sx-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sx-pair figure, .sx-years li { margin: 0; }
.sx-pair img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: var(--p-soft); }
.sx-pair figcaption { margin-top: 4px; font-size: .8125rem; color: var(--p-2); }
.sx-pair figcaption b { color: var(--p-ink); }
.sx-years { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 6px; margin: 10px 0 0; padding: 0 0 4px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; }
.sx-years img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: var(--p-soft); }
.sx-years span { display: block; margin-top: 2px; font: 500 .75rem/1.3 var(--mono); color: var(--p-2); }

/* ── v2: one page per kind of thing ────────────────────────────────────────────────────────────────────────── */
.sv-ico { width: 16px; height: 16px; flex: none; }
.sv-kind { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 500 .75rem/1.4 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--accent-ink); }
.sv { margin-top: 20px; }
.sv-head h1, .sv-hero h1 { margin: 0; font: 540 var(--t-h1)/1.04 var(--sans); letter-spacing: -.038em; text-wrap: balance; overflow-wrap: anywhere; }
.sv-hero h1 { font: 600 clamp(1.3rem, 5vw, 1.6rem)/1.2 var(--sans); letter-spacing: -.02em; }
.sv-sub { margin: 8px 0 0; max-width: 60ch; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.sv-cols, .sv-dam, .sv-num { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.sv-cols { margin-top: 18px; }
.sv-main { min-width: 0; }
@media (min-width: 980px) {
  .sx-top .sx-box { max-width: 720px; }
  /* A place's answer and a number's: the black sheet is a band across the top, as on a dam's answer and a place page
     (13 Nov 2026; it was a sticky panel beside the sections). A place: the map on the left, where it is, the glance,
     the jumps and the source on the right. A number: the title and figure on the left, what it says and its source
     on the right. */
  .sv-side .sv-sheet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--col); align-items: start; padding: 26px 30px 24px; }
  .sv-side .sv-sheet > .sheet-h { grid-column: 1 / -1; }
  .sv-side .sv-map { display: flow-root; }
  .sv-side .sv-map-main { max-height: 300px; }
  .sv-num > .sv-hero.sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col); align-items: start; padding: 26px 30px 24px; }
  .sv-num > .sv-hero.sheet > .sheet-h { grid-column: 1 / -1; }
  .sv-hero-r > .sx-say:first-child { margin-top: 0; }
  /* A dam's answer: the black sheet is a band across the top (as on a place page), the level and its bar on the left,
     the figures and the ways on on the right; everything under it has the sheet's full width. */
  .sv-dam > .sv-hero.sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--col); align-items: start; padding: 26px 30px 24px; }
  .sv-dam > .sv-hero.sheet > * { grid-column: 1; min-width: 0; }
  .sv-dam > .sv-hero.sheet > .sheet-h { grid-column: 1 / -1; }
  .sv-dam > .sv-hero.sheet > .sx-stats { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: 0; }
  .sv-dam > .sv-hero.sheet > .sx-acts { grid-column: 2; grid-row: 4; align-self: start; }
  .sv-dam > .sv-hero.sheet > .sh-bar { grid-column: 2; grid-row: 5; align-self: start; }
  /* Under the band the sections pair up (a chart too, as on a dam's answer); the from-space block and the links under
     the sections have the full width. */
  .sv-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col); align-items: start; }
  .sv-main > .sv-sec:has(.ds-space), .sv-main > :not(.sv-sec) { grid-column: 1 / -1; }
}

/* The sheet of a spot: the map with the pin, where the pin is and why, three figures, and the way down the page. */
.sv-sheet { position: relative; isolation: isolate; overflow: hidden; padding: 16px 16px 18px; border-radius: var(--r-sm); background: var(--core); color: var(--on-core); }
.sv-sheet::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--on-core) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on-core) 6%, transparent) 1px, transparent 1px); background-size: 24px 24px; }
.sv-sheet .sheet-h { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.sv-sheet .sheet-h::before { content: ''; width: 8px; height: 8px; margin-top: 3px; background: var(--accent); flex: none; }
.sv-sheet a { color: var(--on-core); }
.sv-map-main { display: block; width: 100%; height: auto; max-height: 46svh; }
.sv-map-ward { fill: color-mix(in srgb, var(--on-core) 11%, transparent); stroke: var(--on-core); stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sv-map-muni { fill: none; stroke: var(--on-core-2); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.sv-map-street { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.sv-map-pin circle { fill: var(--accent); stroke: var(--core); stroke-width: 1.5; }
.sv-map-pin .sv-map-ring { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); stroke-width: 1; }
.sv-map-scale path { fill: none; stroke: var(--on-core-2); stroke-width: 1; }
.sv-map-scale text, .sv-map-n { fill: var(--on-core-2); font: 500 10px var(--mono); }
.sv-map-inset { float: left; width: 84px; margin: 12px 12px 2px 0; }
.sv-map-inset svg { display: block; width: 100%; height: auto; }
.sv-map-inset figcaption { margin-top: 3px; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; color: var(--on-core-2); }
.sv-map-muni-in { fill: color-mix(in srgb, var(--on-core) 9%, transparent); stroke: var(--on-core-2); stroke-width: .8; }
.sv-map-ward-in { fill: var(--accent); }
.sv-map-dot { fill: none; stroke: var(--on-core); stroke-width: 1.2; }
.sv-placed { overflow: hidden; margin: 12px 0 0; font-size: .9rem; line-height: 1.5; color: var(--on-core-2); }
.sv-how { display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 2px; background: color-mix(in srgb, var(--on-core) 16%, transparent); color: var(--on-core); font: 500 .75rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .02em; vertical-align: 1px; }
.sv-glance { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.sv-glance div { padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--on-core) 22%, transparent); }
.sv-glance dt { font-size: .8125rem; line-height: 1.3; color: var(--on-core-2); }
.sv-glance dd { margin: 2px 0 0; font: 620 1.08rem/1.15 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; }
.sv-glance div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.sv-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sv-jump a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--on-core) 32%, transparent); border-radius: var(--r-sm); font-size: .8rem; text-decoration: none; }
.sv-jump a:hover { background: var(--on-core); color: var(--core); }
.sv-sheet-src { margin: 12px 0 0; font-size: .8125rem; line-height: 1.45; color: var(--on-core-2); }

/* A numbered section: heading, figures, a graphic, a plain explanation, one source line. */
.sv-sec { padding: 22px 0 20px; border-top: 1.5px solid var(--ink); scroll-margin-top: calc(var(--top-h) + 12px); }
.sv-sec-h { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.sv-n { font: 500 .75rem/1 var(--mono); color: var(--accent-ink); }
.sv-sec h2 { margin: 0; font: 620 1.32rem/1.2 var(--sans); letter-spacing: -.025em; }
.sv-figs { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0 0 14px; }
.sv-fig { display: grid; gap: 2px; margin: 0; min-width: 0; }
.sv-fig b { font: 640 clamp(1.7rem, 7vw, 2.4rem)/1.05 var(--sans); letter-spacing: -.045em; overflow-wrap: anywhere; }
.sv-fig span { max-width: 20em; font-size: .82rem; line-height: 1.35; color: var(--ink-3); }
.sv-fig.is-quiet b { font-weight: 520; color: var(--ink-3); }
.sv-fig.is-words b { font: 620 1.25rem/1.2 var(--sans); letter-spacing: -.02em; }
.sv-figs-3 { margin-top: 18px; }
.sv-say { margin: 10px 0 0; max-width: 64ch; font-size: .96rem; line-height: 1.55; color: var(--ink-2); }
.sv-say.sv-quiet { font-size: .84rem; color: var(--ink-3); }
.sv-src { margin: 14px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-3); }
.sv-grp { margin: 18px 0 2px; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--ink-3); }
.sv-list { margin: 0; padding: 0; list-style: none; }
.sv-list li { position: relative; padding: 10px 0 10px 18px; border-top: 1px solid var(--rule); font-size: .96rem; line-height: 1.5; color: var(--ink-2); }
.sv-list li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; background: var(--ink); }
.sv-split { display: grid; gap: 16px; }
@media (min-width: 640px) { .sv-split { grid-template-columns: minmax(0, 1fr) 190px; align-items: end; } }

/* Graphs (worker/search-charts.ts). */
.sv-chart { margin: 4px 0 0; color: var(--ink); }
.sv-plot { position: relative; }
.sv-plot svg { display: block; width: 100%; height: clamp(120px, 34vw, 210px); overflow: visible; }
.sv-line { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sv-area { fill: color-mix(in srgb, currentColor 6%, transparent); }
.sv-grid { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.sv-now { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg); }
.sv-now b { position: absolute; right: -2px; bottom: 14px; padding: 1px 6px; border-radius: 2px; background: var(--core); color: var(--on-core); font: 600 .8125rem/1.5 var(--sans); white-space: nowrap; }
.sv-chart-y { justify-content: flex-start !important; gap: 18px !important; }
.sv-chart-y, .sv-chart-x { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 .75rem/1.5 var(--mono); color: var(--ink-3); }
.sv-chart-y { margin-bottom: 6px; }
.sv-chart-x { margin-top: 6px; }
.sv-bar { fill: color-mix(in srgb, currentColor 26%, transparent); }
.sv-bar.is-now { fill: var(--accent); }
.sv-norm { stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
.sv-base { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.sv-rain .sv-plot svg { height: clamp(110px, 30vw, 180px); }
.sv-chart-m { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 4px 0 0; font: 500 .75rem/1.4 var(--mono); text-align: center; color: var(--ink-3); }
.sv-chart figcaption { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: .76rem; color: var(--ink-3); }
.sv-k::before { content: ''; display: inline-block; width: 12px; height: 10px; margin-right: 6px; background: color-mix(in srgb, var(--ink) 26%, transparent); vertical-align: -1px; }
.sv-k-norm::before { height: 0; border-top: 2px solid var(--ink); vertical-align: 3px; background: none; }
.sv-two { display: flex; align-items: flex-end; gap: 12px; height: 150px; }
.sv-two-b { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; }
.sv-two-v { font: 620 .92rem/1.3 var(--sans); letter-spacing: -.02em; }
.sv-two-bar { display: block; height: calc(var(--h) * .62); margin-top: 4px; border: 1.5px solid var(--ink); border-bottom: 0; }
.sv-two-b.is-now .sv-two-bar { border-color: var(--accent); background: var(--accent); }
.sv-two-l { padding-top: 5px; border-top: 1.5px solid var(--ink); font: 500 .75rem/1.3 var(--mono); color: var(--ink-3); }
.sx-gauge.is-small { height: 8px; margin: 6px 0 2px; }

/* Land cover in 2021 (step 3.S5): one bar of shares and its key. Hues read as the land (trees green, water blue). */
.lp-cover { margin: 4px 0 0; }
.lp-bar { display: flex; height: 18px; border: 1.5px solid var(--ink); overflow: hidden; }
.lp-bar .lp-c { flex: 0 0 var(--w); min-width: 0; }
.lp-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; list-style: none; font-size: .78rem; color: var(--ink-2, var(--ink)); }
.lp-key i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); }
.lp-tree { background: #3f7d4e; } .lp-shrub { background: #8a9a5b; } .lp-grass { background: #b9c97a; } .lp-crop { background: #d9b44a; }
.lp-built { background: #b5534a; } .lp-bare { background: #c9b79c; } .lp-water { background: #4a7fb5; } .lp-wetland { background: #5aa39a; }
.lp-mangrove { background: #2f6b5b; } .lp-snow { background: #e8eef2; } .lp-moss { background: #a3a3a3; }

/* Who governs: a short table. */
.sv-who { margin: 0; }
.sv-who > div { display: grid; grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.sv-who > div:first-child { border-top: 0; padding-top: 0; }
.sv-who dt { font-size: .84rem; color: var(--ink-3); }
.sv-who dd { margin: 0; font-size: .98rem; }
.sv-code { margin-left: 6px; font: 400 .75rem var(--mono); color: var(--ink-3); }
/* Tap water systems: a bar on the left says the risk (black: high or critical; green: low). */
.sv-chips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .sv-chips { grid-template-columns: 1fr 1fr; } }
.sv-chip { padding: 10px 12px; border: 1px solid var(--rule-2); border-left: 5px solid var(--ink-3); border-radius: var(--r-sm); background: var(--surface); }
.sv-chip b { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.sv-chip span { font-size: .78rem; color: var(--ink-3); }
.sv-risk-critical, .sv-risk-high { border-left-color: var(--ink); }
.sv-risk-low { border-left-color: var(--accent); }
.sv-risk-none { border-left-style: dashed; }
/* The nearest dams, tolls and towns. */
.sv-near { margin: 0; padding: 0; list-style: none; }
.sv-near li > a, .sv-near li > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.sv-near li:first-child > * { border-top: 0; padding-top: 2px; }
.sv-near b { font-weight: 600; }
.sv-near a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sv-km { grid-column: 1; font-size: .8rem; color: var(--ink-3); }
.sv-pc { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 620 1.02rem var(--sans); letter-spacing: -.02em; white-space: nowrap; }
.sv-near .sx-gauge { grid-column: 1 / -1; }
.sv-next { margin: 0; padding: 0; list-style: none; }
.sv-next a { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.sv-next li:first-child a { border-top: 0; padding-top: 2px; }
.sv-d { font: 640 1.05rem/1.15 var(--sans); letter-spacing: -.02em; }
.sv-d small { display: block; font: 400 .75rem var(--mono); color: var(--ink-3); }
.sv-next b { display: block; font-weight: 600; }
.sv-next span span { display: block; font-size: .86rem; color: var(--ink-2); }
.sv-city { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; margin-top: 8px; padding: 16px 18px; border-radius: var(--r-sm); background: var(--core); color: var(--on-core); text-decoration: none; }
.sv-city:hover { color: var(--on-core); background: color-mix(in srgb, var(--core) 88%, var(--accent)); }
.sv-city span:first-child { grid-column: 1; font: 500 .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: color-mix(in srgb, var(--accent) 70%, var(--on-core)); }
.sv-city b { grid-column: 1; font: 620 1.15rem/1.2 var(--sans); letter-spacing: -.02em; }
.sv-city span:last-child { grid-column: 2; grid-row: 1 / span 2; font-size: 1.3rem; }
.sv-others { margin-top: 22px; }

/* A dam and a number: the black sheet carries the figure; the sections follow. */
.sv-hero.sheet { padding: 18px 18px 20px; }
.sv-hero .sx-big { margin-top: 8px; }
.sv-hero .sx-gauge { margin: 18px 0 24px; }
.sv-hero .sx-stats { margin-top: 14px; }
.sv-dam .sx-space { margin-top: 0; }
.sv-dam .sx-rain table { margin-bottom: 4px; }

/* Which one? */
.sv-pick { display: grid; gap: 8px; max-width: 760px; margin: 18px 0 0; padding: 0; list-style: none; }
.sv-pick a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1px 12px; align-items: center; min-height: 60px; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--surface); color: inherit; text-decoration: none; }
.sv-pick a:hover { border-color: var(--ink); }
.sv-pick .sv-ico { grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--accent-ink); }
.sv-pick b { font: 620 1.05rem/1.25 var(--sans); letter-spacing: -.01em; }
.sv-pick small { grid-column: 2; font-size: .82rem; color: var(--ink-3); }
.sv-pick a > span { grid-column: 3; grid-row: 1 / span 2; }
.sv-gap .sx-nodata h1 { margin: 4px 0 0; font: 620 clamp(1.3rem, 5vw, 1.7rem)/1.2 var(--sans); letter-spacing: -.02em; }
.sv-gap .sv-sec { margin-top: 22px; }

/* The footer of a page: the releases, the credits and the cite line, once. */
.sv-foot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--rule-2); font-size: .78rem; line-height: 1.5; color: var(--ink-3); }
.sv-foot p { margin: 8px 0 0; max-width: 90ch; }
.sv-foot-h { margin: 0; font: 500 .75rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .03em; }
.sv-foot-cite { font: 400 .75rem/1.5 var(--mono); overflow-wrap: anywhere; }
.sv-rel { display: inline-block; margin: 0 4px 4px 0; padding: 1px 6px; border: 1px solid var(--rule-2); border-radius: 2px; font: 400 .75rem/1.6 var(--mono); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.sv-foot-credit { font-size: .8125rem; }

/* Suggestions: each row says what kind of thing it is. */
.sx-list a { grid-template-columns: 18px minmax(0, 1fr) auto; }
.sx-list a .sv-ico { grid-row: 1 / span 2; align-self: center; color: var(--ink-3); }
.sx-list a small { grid-column: 2 / -1; }
.sx-list a[aria-selected=true] .sv-ico, .sx-list a:hover .sv-ico { color: var(--accent-ink); }

/* ── Motion (direction A, "the sheet settles") ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sx-box { view-transition-name: sx-box; }
  .sx-name, .sx-mini { view-transition-name: sx-name; }
  ::view-transition-group(sx-box), ::view-transition-group(sx-name) { animation-duration: .42s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
  ::view-transition-old(sx-name), ::view-transition-new(sx-name) { height: 100%; object-fit: contain; object-position: left center; }

  @keyframes sx-rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes sx-row { from { opacity: 0; transform: translateY(-4px); } }
  @keyframes sx-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes sx-fill { from { transform: scaleX(0); } }
  @keyframes sx-pop { from { opacity: 0; transform: scale(.4); } }
  @keyframes sx-busy { from { transform: scaleX(.2); } to { transform: scaleX(1); } }

  /* The home: name, line, box, then the questions, each a beat after the last. */
  .sx-home > :not(.sx-box) { animation: sx-rise .6s var(--ease-out) both; }
  .sx-home .sx-lede { animation-delay: .06s; }
  .sx-home .sx-hint { animation-delay: .16s; }
  .sx-home .sx-egs { animation: none; }
  .sx-home .sx-egs > p { animation: sx-rise .6s var(--ease-out) .2s both; }
  .sx-home .sx-egs li { animation: sx-rise .55s var(--ease-out) both; animation-delay: calc(.24s + var(--i) * 45ms); }
  .sx-home .sx-fine { animation-delay: .6s; }
  /* Suggestions slide in under the box, a row at a time, their figures with them. */
  .sx-list:not([hidden]) { animation: sx-row .18s var(--ease-out) both; }
  .sx-list.is-new :is(p, a) { animation: sx-row .26s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 28ms); }
  .sx-box[aria-busy=true]::after { animation: sx-busy .7s ease-in-out infinite alternate; }
  /* An answer: the sheet first, then what it is about, in reading order. */
  .sx-rv { animation: sx-rise .55s var(--ease-out) both; animation-delay: calc(.05s + var(--i, 0) * 70ms); }
  .sx-draw { stroke-dasharray: 1; animation: sx-draw .9s var(--ease-out) .25s both; }
  .sx-dot { transform-box: fill-box; transform-origin: center; animation: sx-pop .3s var(--ease-out) 1s both; }
  .sx-gauge-fill { animation: sx-fill .8s var(--ease-out) .2s both; }
}

/* "Compare with another place" (step 2.7): a quiet link at the foot of a spot's sheet. */
.sv-cmp { margin: 12px 0 0; font-weight: 600; font-size: .9rem; }
.sv-cmp a { color: var(--on-core); text-underline-offset: 3px; }