/* THE ALL-GLASS LOOK (owner 25 Oct 2026) — html.gu + gu-clear | gu-frost, set by showcase-glassui.js; spec = platform
   docs/ui-vision/GLASS-SPEC.md. No dark panel or page ground: the Showcase's film shows through every surface. The glass is
   silver (no neon); the dimming lives in the backdrop's brightness(), not in a dark fill. Safari: -webkit-backdrop-filter is
   written with literal values per strength, never through var(). */
/* ROUND 2 (owner 25 Oct, on round 1: "hard to tell difference … doesn't look like glass applied to pages"): bolder — light
   frosted fills with a gloss sweep, bright silver rims, the film brighter behind; clear and frost now clearly apart (clear =
   see-through glass, frost = milky glass). Words keep a soft shadow under the letters. */
html.gu-clear{
  --gu-fill:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 50%,rgba(255,255,255,.08));
  --gu-read:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05) 50%,rgba(255,255,255,.08));
  --gu-edge:rgba(255,255,255,.4);--gu-read-edge:rgba(255,255,255,.34);
  --gu-shadow:0 30px 60px -30px rgba(0,0,0,.5),0 0 36px -12px rgba(215,223,229,.16)}
html.gu-frost{
  --gu-fill:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.14) 50%,rgba(255,255,255,.18));
  --gu-read:radial-gradient(120% 70% at 0% 0%,rgba(255,255,255,.2),rgba(255,255,255,0) 55%),linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.13) 50%,rgba(255,255,255,.17));
  --gu-edge:rgba(255,255,255,.42);--gu-read-edge:rgba(255,255,255,.36);
  --gu-shadow:0 34px 70px -30px rgba(0,0,0,.55),0 0 40px -12px rgba(215,223,229,.18)}
html.gu{
  --gu-hi:inset 0 1px 0 rgba(255,255,255,.8),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 -1px 0 rgba(255,255,255,.14);
  --gu-read-hi:inset 0 1px 0 rgba(255,255,255,.7),inset 0 0 0 1px rgba(255,255,255,.04),inset 0 -1px 0 rgba(255,255,255,.12);
  --gu-thick:rgba(22,25,29,.22);
  --gu-ts:0 1px 2px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.35)}

/* ── the film behind the pages ── */
#guAmb{display:none}
html.gu #guAmb{display:block;position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .6s cubic-bezier(.16,1,.3,1);
  background:#0a0a0a center/cover no-repeat}
html.gu #guAmb.on{opacity:1}
html.gu #guAmb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the film behind the pages at .72 (round 1's .55 still read as a dark page; owner: "never a dark background") */
/* --gu-amb is set by showcase-glassui.js from the picture itself: .72 on dark/dusk film, down to .26 on a bright frame */
html.gu #guAmb video,html.gu #guAmb.still{transform:scale(1.08);filter:blur(22px) brightness(var(--gu-amb,.72)) saturate(1.3);transition:filter .9s linear}
html.gu #guAmb.still video{display:none}
html.gu.gu-page #worldStage .wl,html.gu.gu-page #worldStage .world-veil,html.gu.gu-page #worldPlan{opacity:0!important}
html.gu .vp-shade{background:radial-gradient(130% 100% at 50% 35%,transparent 55%,rgba(10,10,10,.28) 100%)}

/* ── page grounds: transparent, the film is the ground ── */
html.gu #mainPane,html.gu body #mainPane{background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.gu .eg-page,html.gu .pp-page{background:transparent!important}
html.gu .ov-bg{background:transparent!important}
html.gu .ov-bg i{opacity:0!important}
/* the page backdrop's vignette drew a framed box behind the whole layout: gone, the film is the ground */
html.gu .ov-bg::after,html.gu .ov-deck .ov-bg::after,html.gu .ov-deck.ov-at-hub .ov-bg::after{display:none!important}
html.gu .ov3-gbg{background:transparent!important}
/* the sticky section bar on Features: its own frosted strip, so headings never read through it as they scroll under */
html.gu .fx-jump{background:var(--gu-read)!important;border:1px solid var(--gu-read-edge);border-radius:18px;padding:10px 12px!important;
  box-shadow:var(--gu-read-hi);-webkit-backdrop-filter:blur(34px) saturate(1.5) brightness(.72)!important;backdrop-filter:blur(34px) saturate(1.5) brightness(.72)!important}
/* Gallery's own blurred-photo ground sat in a framed box and read as a dark panel: the film is its ground too */
html.gu .gl3-bg{display:none!important}
html.gu #clientFoot{background:linear-gradient(0deg,rgba(6,7,8,.34),rgba(6,7,8,0))!important}

/* ── AT REST: the menu, the billboard, Home's four ways, pills and small controls (the chosen strength) ── */
html.gu.v3d body #hud,html.gu.v3d.v3-open body #hud,html.gu.v3d .v3-tog,html.gu #v3Tip,html.gu #cdBoard::before,
html.gu.v3w #isHome .v3-center .is-acts button:not(.main) i,
html.gu.v3w.cd #isHome .v3-center .is-acts.cd-ways button i,html.gu.v3w.cd #isHome .v3-center .is-acts.cd-ways .main i,
html.gu.cd:not(.v3w) .is-acts.cd-ways button,
html.gu .ov-menu,html.gu .gl3-tabs,html.gu .gl3-allbtn,html.gu .ov3-fl,html.gu .ov3-arr,html.gu .ov3-ra,html.gu .ov3-ex,
html.gu.m2 #sxrSideTab,html.gu #sxrBack,html.gu #ivBack,html.gu .fx-tag,html.gu .gl3-arr,html.gu .gl3-vclose,html.gu .gl3-vtabs,
html.gu .ov3-vc-tabs,html.gu .ov3-vc-x,html.gu #toast,html.gu #clientFoot .cf-cta,html.gu .ov-lens-tag{
  background:var(--gu-fill)!important;border-color:var(--gu-edge)!important;box-shadow:var(--gu-hi),var(--gu-shadow)!important;text-shadow:var(--gu-ts)}
html.gu-clear.v3d body #hud,html.gu-clear.v3d.v3-open body #hud,html.gu-clear.v3d .v3-tog,html.gu-clear #v3Tip,html.gu-clear #cdBoard::before,
html.gu-clear.v3w #isHome .v3-center .is-acts button:not(.main) i,
html.gu-clear.v3w.cd #isHome .v3-center .is-acts.cd-ways button i,html.gu-clear.v3w.cd #isHome .v3-center .is-acts.cd-ways .main i,
html.gu-clear.cd:not(.v3w) .is-acts.cd-ways button,
html.gu-clear .ov-menu,html.gu-clear .gl3-tabs,html.gu-clear .gl3-allbtn,html.gu-clear .ov3-fl,html.gu-clear .ov3-arr,html.gu-clear .ov3-ra,html.gu-clear .ov3-ex,
html.gu-clear.m2 #sxrSideTab,html.gu-clear #sxrBack,html.gu-clear #ivBack,html.gu-clear .fx-tag,html.gu-clear .gl3-arr,html.gu-clear .gl3-vclose,html.gu-clear .gl3-vtabs,
html.gu-clear .ov3-vc-tabs,html.gu-clear .ov3-vc-x,html.gu-clear #toast,html.gu-clear #clientFoot .cf-cta{
  -webkit-backdrop-filter:blur(16px) saturate(1.8) brightness(.95)!important;backdrop-filter:blur(16px) saturate(1.8) brightness(.95)!important}
html.gu-frost.v3d body #hud,html.gu-frost.v3d.v3-open body #hud,html.gu-frost.v3d .v3-tog,html.gu-frost #v3Tip,html.gu-frost #cdBoard::before,
html.gu-frost.v3w #isHome .v3-center .is-acts button:not(.main) i,
html.gu-frost.v3w.cd #isHome .v3-center .is-acts.cd-ways button i,html.gu-frost.v3w.cd #isHome .v3-center .is-acts.cd-ways .main i,
html.gu-frost.cd:not(.v3w) .is-acts.cd-ways button,
html.gu-frost .ov-menu,html.gu-frost .gl3-tabs,html.gu-frost .gl3-allbtn,html.gu-frost .ov3-fl,html.gu-frost .ov3-arr,html.gu-frost .ov3-ra,html.gu-frost .ov3-ex,
html.gu-frost.m2 #sxrSideTab,html.gu-frost #sxrBack,html.gu-frost #ivBack,html.gu-frost .fx-tag,html.gu-frost .gl3-arr,html.gu-frost .gl3-vclose,html.gu-frost .gl3-vtabs,
html.gu-frost .ov3-vc-tabs,html.gu-frost .ov3-vc-x,html.gu-frost #toast,html.gu-frost #clientFoot .cf-cta{
  -webkit-backdrop-filter:blur(34px) saturate(1.5) brightness(.72)!important;backdrop-filter:blur(34px) saturate(1.5) brightness(.72)!important}
/* Home's four ways stay alike: the first is not a framed capsule (owner rule, options alike) */
html.gu.v3w.cd #isHome .v3-center .is-acts.cd-ways .main{background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* the one light: the rim brightens under the pointer (desktop rail + cards) */
@media (hover:hover){
  html.gu.v3d body #hud,html.gu .pp-plan,html.gu .pp-tile,html.gu .fx-card,html.gu .ov3-m{transition:border-color .2s,box-shadow .2s,transform .3s cubic-bezier(.16,1,.3,1)}
  html.gu.v3d body #hud:hover,html.gu .pp-plan:hover,html.gu .pp-tile:hover,html.gu .fx-card:hover,html.gu .ov3-m:hover{border-color:rgba(238,242,246,.42)!important}
}

/* ── WHERE YOU READ: Overview modules, Features + Buy cards, Explore cards, Concierge, panels (frost in both strengths).
   They sit over the film, which is already blurred, so most are fill-only (cheap in Safari with many cards). ── */
html.gu .ov3-m,html.gu .ov3-vc,html.gu .ov-mod,html.gu .ov-tile,html.gu .pp-band,html.gu .pp-plan,html.gu .pp-tile,html.gu .pp-plan.is-rec,
html.gu .fx-card,html.gu .story-page[data-page="Explore"] .ci-card,html.gu body .story-page[data-page="Explore"]:not(.ov-deck) .ci-card,
html.gu .sh-card,html.gu .sh-hero,html.gu .ov-bar-cta{
  background:var(--gu-read)!important;border-color:var(--gu-read-edge)!important;box-shadow:var(--gu-read-hi),0 30px 70px -30px rgba(0,0,0,.5)!important;
  /* the film behind is already blurred, so no blur here; brightness() dims what shows through (still the picture's own colour,
     never a dark fill) so white words hold 4.5:1 even over a white frame (owner 25 Oct: "do need contrast"; frost picked) */
  -webkit-backdrop-filter:brightness(.66)!important;backdrop-filter:brightness(.66)!important;text-shadow:var(--gu-ts)}
/* a media tile IS its picture (Docs' plans, Media): the picture is the tile's own inline background-image, which the
   reading glass's `background` shorthand above wiped out (26 Oct 2026: SONO's three plan cards showed only frost). The tile
   keeps its picture and wears the glass edge; its caption strip reads on the dimmed film like the cards. */
html.gu .mg-tile{border-color:var(--gu-read-edge)!important;box-shadow:var(--gu-read-hi),0 30px 70px -30px rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter:brightness(.66)!important;backdrop-filter:brightness(.66)!important;text-shadow:var(--gu-ts)}
/* words set straight on the film (page titles, intros): a soft shadow under the letters only, never a panel */
html.gu :is(.eg-page,.pp-page) > :is(header,div,section) > :is(h1,h2,p),html.gu :is(.eg-head,.pp-head,.fx-head) :is(h1,h2,p,span){text-shadow:var(--gu-ts)}
/* text-heavy surfaces and anything over sharp media: frost + blur, thickened */
html.gu.m2 #sxrSide,html.gu .gl3-panel,html.gu .gl3-gpanel,html.gu .gl3-plate,html.gu .mg-hub,html.gu .ml-detail,html.gu .ml-convert,
html.gu .g-panel,html.gu .cq-sidebar,html.gu .sales-panel,html.gu .modal-box,html.gu .ci-card{
  background:linear-gradient(var(--gu-thick),var(--gu-thick)),var(--gu-read)!important;border-color:var(--gu-read-edge)!important;
  box-shadow:var(--gu-read-hi),0 30px 70px -30px rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter:blur(34px) saturate(1.5) brightness(.72)!important;backdrop-filter:blur(34px) saturate(1.5) brightness(.72)!important}
html.gu #modal{background:rgba(10,10,10,.28)!important}
/* the page-change morph: glass tint, never a blur (a blur over the arriving page reads as a glitch) */
html.gu .m2-shape{background:var(--gu-read)!important;border-color:var(--gu-read-edge)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.gu .gl3-vscrim{background:rgba(6,8,10,.3)!important}

/* dark words on light buttons keep no shadow */
html.gu :is(.pp-act-main,.gl3-go,.sh-start,.in-see,.fx-tag-addon,.pp-bill [aria-pressed="true"]){text-shadow:none!important}

/* ── phones: frost always (the bottom dock, the header, the Gallery sheet) ── */
@media (max-width:760px){
  /* the chapter bar sits over the billboard's ticker on phones: thick frost, so words never read through words */
  html.gu[data-showcase-ui="glass"] body #hud,html.gu .gl3-panel,html.gu .ov-menu{
    background:linear-gradient(var(--gu-thick),var(--gu-thick)),var(--gu-read)!important;border-color:var(--gu-read-edge)!important;
    -webkit-backdrop-filter:blur(34px) saturate(1.5) brightness(.72)!important;backdrop-filter:blur(34px) saturate(1.5) brightness(.72)!important}
  html.gu[data-showcase-ui="glass"] body #brandbar{background:linear-gradient(180deg,rgba(6,9,12,.42),rgba(6,9,12,0))!important}
}

/* ── accessibility: reduced transparency = solid graphite; reduced motion = no pointer light (MOTION.md) ── */
@media (prefers-reduced-transparency:reduce){
  html.gu.v3d body #hud,html.gu .v3-tog,html.gu #v3Tip,html.gu .ov-menu,html.gu .gl3-tabs,html.gu .ov3-m,html.gu .ov3-vc,html.gu .pp-plan,html.gu .pp-tile,
  html.gu .pp-band,html.gu .fx-card,html.gu .ci-card,html.gu .sh-card,html.gu .sh-hero,html.gu.m2 #sxrSide,html.gu .gl3-panel,html.gu .gl3-gpanel,
  html.gu .g-panel,html.gu .sales-panel,html.gu .modal-box,html.gu.v3w #isHome .v3-center .is-acts .main{
    background:rgba(22,25,29,.96)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (prefers-reduced-motion:reduce){html.gu #guAmb{transition:none}}