/* =============================================================================
   Liquid glass (2026-10-08, research: factory/night/2026-10-08/r-ui2026.md). Loaded by ui-light.php after ui.css.
   Four surfaces only (GPU cost scales with count): the header bar while it sits over a photograph or video,
   the tour booking card, the phone action bars, and the home hero plate.

   Three tiers, each complete on its own:
   1. Refraction  Chromium only. glass.js builds an SVG displacement map per surface and sets
                  --ui-glass-refract: url(#ca-glass-N); the bezel bends what is behind the edges.
   2. Frosted     every engine with backdrop-filter (Safari, Firefox): blur + saturation, no url().
   3. Solid paper no backdrop-filter, or the visitor asked for less transparency or more contrast.
   Legibility never depends on the blur: the tint alone keeps ink text >= 4.5:1 over a pure black or pure white
   backdrop (window.caGlass.audit() measures it on the live page).
   Every value is a token so Sidar can tune it here and nowhere else.
   ============================================================================= */
body.ca-ui {
    --ui-glass-tint: var(--ui-paper);                 /* the colour of the glass */
    --ui-glass-alpha: 64%;                            /* how much of it; the contrast floor, keep >= 60% */
    --ui-glass-bg: color-mix(in srgb, var(--ui-glass-tint) var(--ui-glass-alpha), transparent);
    --ui-glass-solid: var(--ui-paper);                /* tier 3 */
    --ui-glass-blur: 14px;
    --ui-glass-sat: 165%;
    --ui-glass-edge: color-mix(in srgb, var(--ui-paper) 85%, transparent);   /* the lit top rim */
    --ui-glass-line: color-mix(in srgb, var(--obsidian) 10%, transparent);
    --ui-glass-shadow: 0 1px 2px color-mix(in srgb, var(--obsidian) 6%, transparent), 0 10px 32px color-mix(in srgb, var(--obsidian) 12%, transparent);
    --ui-glass-bezel: 22;                             /* px of the edge that bends (read by glass.js) */
    --ui-glass-scale: 46;                             /* how far it bends, px (read by glass.js) */
    --ui-glass-ease: 220ms ease;
}

/* ---- The shared surface rule (tiers 1 and 2) ---------------------------------------------------------- */
html body.ca-ui.ui-glass-over #masthead .navbar,
html body.ca-ui .tr-book.tr-book,
html body.ca-ui .ui-mbar.ui-mbar,
html body.ca-ui .tr-bar.tr-bar {
    background: var(--ui-glass-bg) !important;
    -webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-sat)) !important;
    backdrop-filter: var(--ui-glass-refract,) blur(var(--ui-glass-blur)) saturate(var(--ui-glass-sat)) !important;
}

/* Home hero plate (b-hero): keeps its own 76% tint from home.css for the text on the film; glass.css adds only the
   refraction in front of the blur, so the plate bends the film at its edges like the other surfaces. */
html body.ca-ui .hm-plate.hm-plate {
    -webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(var(--ui-glass-sat));
    backdrop-filter: var(--ui-glass-refract,) blur(var(--ui-glass-blur)) saturate(var(--ui-glass-sat)); }

/* Header: solid paper (ui.css) over plain page, glass only while a photograph or video is under it. */
html body.ca-ui #masthead .navbar { transition: background-color var(--ui-glass-ease), box-shadow var(--ui-glass-ease); }
html body.ca-ui.ui-glass-over #masthead .navbar {
    box-shadow: inset 0 -1px 0 var(--ui-glass-line), inset 0 1px 0 var(--ui-glass-edge), 0 6px 24px color-mix(in srgb, var(--obsidian) 10%, transparent) !important;
    border-bottom-color: transparent !important; }

/* Tour booking card */
html body.ca-ui .tr-book.tr-book {
    border-color: var(--ui-glass-line) !important;
    box-shadow: inset 0 1px 0 var(--ui-glass-edge), inset 0 0 0 1px color-mix(in srgb, var(--ui-paper) 40%, transparent), var(--ui-glass-shadow) !important; }

/* Phone action bars: the shared one (ui.css) and the tour family's own */
html body.ca-ui .ui-mbar.ui-mbar,
html body.ca-ui .tr-bar.tr-bar {
    border-top: 1px solid var(--ui-glass-line) !important;
    box-shadow: inset 0 1px 0 var(--ui-glass-edge), 0 -8px 24px color-mix(in srgb, var(--obsidian) 9%, transparent) !important; }

/* Bottom bars carry a denser tint than the token: page text (the tour section tabs) read through 64% (S3-0, 2026-10-15). */
html body.ca-ui .tr-bar.tr-bar, html body.ca-ui .ui-mbar.ui-mbar { --ui-glass-bg: color-mix(in srgb, var(--ui-glass-tint) 86%, transparent); }

/* Repaint isolation for the fixed bars (r-ui2026 #15). Not on the header: its mega menu hangs below it. */
html body.ca-ui .ui-mbar.ui-mbar, html body.ca-ui .tr-bar.tr-bar { contain: layout paint; }

/* ---- Tier 3: solid paper ------------------------------------------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body.ca-ui.ui-glass-over #masthead .navbar,
    html body.ca-ui .tr-book.tr-book,
    html body.ca-ui .ui-mbar.ui-mbar,
    html body.ca-ui .tr-bar.tr-bar,
    html body.ca-ui .hm-plate.hm-plate { background: var(--ui-glass-solid) !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
    html body.ca-ui.ui-glass-over #masthead .navbar,
    html body.ca-ui .tr-book.tr-book,
    html body.ca-ui .ui-mbar.ui-mbar,
    html body.ca-ui .tr-bar.tr-bar,
    html body.ca-ui .hm-plate.hm-plate {
        background: var(--ui-glass-solid) !important;
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    html body.ca-ui #masthead .navbar { transition: none; }
}