/* the halo that keeps text readable over the moving field: the page's own ground, in either scheme (the road can
   tint --wall per district, so the halo takes the scheme's ground, not the district's) */
:root { --halo: #e8e3d9; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --halo: #0a0a0c; } }
:root[data-theme="dark"] { --halo: #0a0a0c; }

/* the field: glass and water behind the whole page; a rendered plate first, the live render over it where the
   device can carry it (world/site/home-field.js); night in the dark scheme */
.gw-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #0d1a24; }
/* the large viewport height: when a phone's toolbar slides away, the field still reaches the bottom edge */
@supports (height: 100lvh) { .gw-backdrop { bottom: auto; height: 100lvh; } }
.gw-backdrop picture, .gw-backdrop img, .gw-backdrop canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gw-backdrop img { object-fit: cover; }
.gw-backdrop canvas { opacity: 0; transition: opacity .9s var(--ease-standard, ease); }
.gw-backdrop.live canvas { opacity: 1; }
html.plain .gw-backdrop canvas { display: none; }
/* a display dither: a lossless tile of high-passed noise, white and black at up to 2.4 percent alpha, laid over the plate, so
   the night sky's gradient breaks up where the image encoder smoothed the renderer's own dither away */
.gw-backdrop .gw-dither { position: absolute; inset: 0; background: url("/media/world/glass-water/dither-128.png") repeat; }
main#main, body > footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .gw-backdrop canvas { transition: none; } }

/* reading pages: the field is the rendered plate only; their words keep AA contrast through the halo */

/* pages over the field read in light ink in both schemes: the field's sea and night sky are dark, and a soft wash of
   the field's own deep water (a gradient, no edge) holds the words at AA contrast over its brightest pixels; the
   measurement is in PASSES.md, pass 8 */
body:has(.gw-backdrop) { --ink: #f4efe6; --soft: #e3ddd0; --wall: #0c1620; --wall-2: #13212d; --line: rgba(244, 239, 230, .34); --on-ink: #0c1620; --halo: #07101a; color-scheme: dark; background: #0c1620; color: var(--ink); }
.gw-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 16, 26, .78) 0%, rgba(7, 16, 26, .62) 42%, rgba(7, 16, 26, .18) 70%, rgba(7, 16, 26, .06) 100%); }
body.reading .gw-backdrop::after { background: radial-gradient(ellipse 70% 120% at 50% 50%, rgba(7, 16, 26, .8) 0%, rgba(7, 16, 26, .7) 55%, rgba(7, 16, 26, .45) 100%); }
@media (max-width: 860px) { .gw-backdrop::after { background: linear-gradient(180deg, rgba(7, 16, 26, .66) 0%, rgba(7, 16, 26, .8) 45%, rgba(7, 16, 26, .88) 100%); } }
/* on phones the hand sits at the top edge; a reading page's first words start below it */
@media (max-width: 860px) { body.reading main { padding-top: 96px !important; } }
/* magnetic links (world/site/magnet.js): the held link leans toward the pointer and its underline takes full weight */
:is(.wi-links, .wi-jump, .floor-list) a { display: inline-block; } /* the hand's links are flex items already */
a[data-held] { text-decoration-thickness: 2px; text-underline-offset: .2em; }
/* the drawn platform marks (scripts/marks/): flat inks with computed overlaps, key ink light for the water field */
.xo-mark { display: block; width: 104px; height: 104px; margin: 0 0 8px -4px; }
/* the hand says what each control does: a word under each form, which is also its accessible name
   (scripts/hand-labels.mjs). The forms stay; nothing is boxed. */
.o-hand.o-said { padding-bottom: 22px; gap: 14px; }
.o-hand.o-said > :is(a[data-o], button), .o-hand.o-said .o-cell { position: relative; }
.o-hand.o-said .o-cell { display: inline-flex; }
.o-hand.o-said > :is(a[data-o], button) .o-name, .o-hand.o-said .o-under { position: absolute; top: calc(50% + 27px); left: 50%; translate: -50% 0; width: auto; height: auto; overflow: visible; clip-path: none; white-space: nowrap;
  font: 600 11px/1.1 var(--face-text); letter-spacing: .05em; color: var(--ink); pointer-events: none; }
/* every label hangs a fixed distance below its control's centre, and the hand centres its controls on one line, so
   the labels share one baseline whatever height a form takes (the fold is 52 px, the rest 44, and a form may grow) */
.o-hand.o-said > :is(a[data-o], button) .o-name, .o-hand.o-said .o-under { text-shadow: 0 0 8px var(--wall, #0c1620), 0 0 3px var(--wall, #0c1620), 0 0 1px var(--wall, #0c1620); }

/* the field reaches the whole length of the page: under the fixed plate, the page's own ground is the same plate and
   its mirror, stacked so the water meets the water and the sky meets the sky, repeated down the page without a seam.
   A reader sees the fixed plate on every screen; the ground shows wherever the plate cannot reach (a full-page
   capture, a phone toolbar sliding away, a print) */
body:has(.gw-backdrop) {
  --ground: url("/media/world/glass-water/field-night-ground-1920.webp");
  --ground-wash: linear-gradient(90deg, rgba(7, 16, 26, .78) 0%, rgba(7, 16, 26, .62) 42%, rgba(7, 16, 26, .18) 70%, rgba(7, 16, 26, .06) 100%);
  background: #0c1620; background-image: var(--ground-wash), var(--ground); background-size: 100% 100%, 100% auto;
  background-position: 0 0, center top; background-repeat: no-repeat, repeat-y; background-attachment: local, scroll;
}
body.reading:has(.gw-backdrop) { --ground-wash: linear-gradient(rgba(7, 16, 26, .72), rgba(7, 16, 26, .72)); }
@media (orientation: portrait) { body:has(.gw-backdrop) { --ground: url("/media/world/glass-water/field-night-ground-portrait-828.webp"); } }
@media (max-width: 860px) { body:has(.gw-backdrop) { --ground-wash: linear-gradient(rgba(7, 16, 26, .8), rgba(7, 16, 26, .8)); } }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:has(.gw-backdrop) { --ground: url("/media/world/glass-water/field-day-ground-1920.webp"); }
}
@media (prefers-color-scheme: light) and (orientation: portrait) {
  :root:not([data-theme="dark"]) body:has(.gw-backdrop) { --ground: url("/media/world/glass-water/field-day-ground-portrait-828.webp"); }
}
:root[data-theme="light"] body:has(.gw-backdrop) { --ground: url("/media/world/glass-water/field-day-ground-1920.webp"); }
@media (orientation: portrait) { :root[data-theme="light"] body:has(.gw-backdrop) { --ground: url("/media/world/glass-water/field-day-ground-portrait-828.webp"); } }
@media (orientation: portrait) { :root[data-theme="dark"] body:has(.gw-backdrop) { --ground: url("/media/world/glass-water/field-night-ground-portrait-828.webp"); } }
html.plain body:has(.gw-backdrop) { background-image: none; }