/* glass.css — Vitrine: the one material for chrome that floats over the live
   map. Shared by the Astro shell (sticky header) and the iframe map.
   Spec: vault 30-Projects/SDL-Map/2026-09-20-liquid-glass-motion-spec.md.

   How it works: a surface opts in with class="glass" (or "glass glass-strong"
   when its whole job is to be read). Inside @supports the class sets five
   custom properties; the consumer rules below read them with the solid
   surface as fallback, so where backdrop-filter is missing, or the reader asked
   for reduced transparency, or the map is moving, every surface is simply the
   opaque slab it was before this file existed. Tokens live in tokens.css. */

@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass {
    --surface: var(--glass-bg);
    --surface-image: linear-gradient(to bottom, var(--glass-sheen), transparent 40%);
    --surface-blur: blur(var(--glass-blur)) saturate(var(--glass-sat));
    /* Menus that can open over text (the shell's phone nav drawer) keep the
       same tint and edge but blur deeper, so what is behind them reads as a
       wash rather than as competing type. Same gates as --surface-blur. */
    --surface-blur-menu: blur(calc(var(--glass-blur) * 2)) saturate(var(--glass-sat));
    --surface-edge: var(--glass-edge);
    --surface-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 var(--glass-edge-low), var(--glass-shadow);
    --surface-strong: var(--glass-bg-strong);   /* for descendants that must be read (menus) */
  }
  .glass.glass-strong { --surface: var(--glass-bg-strong); }
  /* glass-mid is now an alias of the base material (2026-09-21): header,
     footer, sheet, panel, drawer, buttons and tips all share one glass;
     glass-strong stays for menus, dialogs and the detail card. */
  .glass.glass-mid { --surface: var(--glass-bg-mid); }
  /* Phones pay more per blurred pixel and show less of it. A media query,
     not body.is-touch, so the shell's bars and the map's chrome agree. */
  @media (pointer: coarse) { .glass { --glass-blur: 12px; } }
  body.is-touch .glass { --glass-blur: 12px; }
  /* The moving-map freeze (2026-09-20) is retired (2026-09-21): it swapped
     chrome to a dark solid mid-gesture, which read as a material change on
     every button and on the sheet; one material must hold through motion.
     glass-steady remains as a no-op marker. body.no-glass below still
     measures the cost of the material for the audit. */
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass.glass-strong, .glass.glass-mid {
    --surface: var(--surface-overlay);
    --surface-strong: var(--surface-overlay);
    --surface-image: none;
    --surface-blur: none;
    --surface-blur-menu: none;
    --surface-edge: var(--rule);
    --surface-shadow: none;
  }
}
/* Consumers. Doubled class so single-class rules elsewhere lose. */
.glass.glass {
  background-color: var(--surface, var(--surface-overlay));
  background-image: var(--surface-image, none);
  -webkit-backdrop-filter: var(--surface-blur, none);
  backdrop-filter: var(--surface-blur, none);
  border-color: var(--surface-edge, var(--rule));
  box-shadow: var(--surface-shadow, none);
  transition: background-color var(--t-base, 200ms) var(--ease-standard, ease), box-shadow var(--t-base, 200ms) var(--ease-standard, ease), border-color var(--t-base, 200ms) var(--ease-standard, ease);
}
@media (prefers-reduced-motion: reduce) { .glass.glass { transition: none; } }

/* Bar variant (2026-09-21). An element with backdrop-filter becomes the
   backdrop root for everything inside it, so a descendant that also wants to
   blur (the shell's phone nav drawer, fixed under the header) sees only the
   bar's box and blurs nothing below it. .glass-bar therefore paints the
   material on ::before and leaves the element itself filter-free; children
   can carry their own glass. Same tokens, same gates, same look. */
.glass.glass.glass-bar { background-color: transparent; background-image: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.glass.glass.glass-bar::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--surface, var(--surface-overlay));
  background-image: var(--surface-image, none);
  -webkit-backdrop-filter: var(--surface-blur, none);
  backdrop-filter: var(--surface-blur, none);
  box-shadow: var(--surface-shadow, none);
  transition: background-color var(--t-base, 200ms) var(--ease-standard, ease), box-shadow var(--t-base, 200ms) var(--ease-standard, ease);
}
@media (prefers-reduced-motion: reduce) { .glass.glass.glass-bar::before { transition: none; } }

/* Audit switch (scripts/qa/map-audit.mjs --perf): body.no-glass measures the
   same gestures with every surface solid, so the cost of the material is a
   number, not an impression. Not used by the site itself. */
body.no-glass .glass, body.no-glass .glass.glass-strong, body.no-glass .glass.glass-mid {
  --surface: var(--surface-overlay); --surface-strong: var(--surface-overlay); --surface-image: none; --surface-blur: none; --surface-blur-menu: none; --surface-edge: var(--rule); --surface-shadow: none;
}