/* ── 1. the reader's glass setting ────────────────────────────────────
   --lg-a is the opacity of every glass fill. Clear lets the environment
   through; Tinted is nearly solid, for bright rooms and tired eyes. */
html[data-skin]{--lg-a:.64}
html[data-skin][data-glass="clear"]{--lg-a:.42}
html[data-skin][data-glass="tinted"]{--lg-a:.90}

/* ── 2. the material, light ───────────────────────────────────────────── */
html[data-skin="white"]{
  --void:#F1F1F5;
  --lg-edge:rgba(22,22,46,.10);
  --lg-lip:rgba(255,255,255,.96);
  --surface:rgba(255,255,255,var(--lg-a));
  --surface-2:rgba(255,255,255,calc(var(--lg-a) + .16));
  --hair:rgba(22,22,46,.11);--hair-2:rgba(22,22,46,.065);
  --lift:inset 0 1px 0 var(--lg-lip),inset 0 0 0 1px rgba(255,255,255,.32),
    0 0 0 .5px var(--lg-edge),0 1px 2px rgba(22,22,46,.04),
    0 12px 28px -16px rgba(22,22,46,.20);
  --lift-sm:inset 0 1px 0 var(--lg-lip),0 0 0 .5px var(--lg-edge),
    0 4px 12px -6px rgba(22,22,46,.14);
  --lift-lg:inset 0 1px 0 var(--lg-lip),inset 0 0 0 1px rgba(255,255,255,.38),
    0 0 0 .5px var(--lg-edge),0 2px 4px rgba(22,22,46,.04),
    0 26px 52px -22px rgba(22,22,46,.26);
  --inset:inset 0 1px 2px rgba(22,22,46,.07),inset 0 0 0 .5px rgba(22,22,46,.08);
  --glass-fill:rgba(255,255,255,var(--lg-a));
  --glass-fill-lite:rgba(255,255,255,calc(var(--lg-a) - .06));
  --lg-track:rgba(118,118,140,.12);
  --glass-rim:rgba(255,255,255,.96);--glass-rim-soft:var(--lg-edge);
  --mat-fill:rgba(255,255,255,var(--lg-a));--mat-rim:var(--lg-edge);
  --mat-shadow:0 1px 2px rgba(22,22,46,.04),0 12px 28px -16px rgba(22,22,46,.20);
  --lg-bar:rgba(255,255,255,calc(var(--lg-a) + .08));
  --lg-bar-edge:rgba(22,22,46,.12);
  --lg-lens:rgba(var(--gold-rgb),.15);
  --lg-env:
    radial-gradient(62% 42% at 0% 0%,rgba(212,176,108,.30),transparent 70%),
    radial-gradient(54% 38% at 100% 20%,rgba(128,164,255,.20),transparent 70%),
    radial-gradient(72% 46% at 28% 100%,rgba(112,210,182,.18),transparent 72%);
}

/* ── 3. the material, dark ────────────────────────────────────────────
   Same physics on a night canvas: the fill is a deep warm smoke rather
   than white, the lip is a faint highlight, and the edge is a dark line
   that cuts the pane out of the environment. */
html[data-skin="dark"]{
  --lg-edge:rgba(0,0,0,.62);
  --lg-lip:rgba(255,244,222,.11);
  --surface:rgba(24,20,14,var(--lg-a));
  --surface-2:rgba(30,25,18,calc(var(--lg-a) + .12));
  --lift:inset 0 1px 0 var(--lg-lip),inset 0 0 0 .5px rgba(255,244,222,.05),
    0 0 0 .5px var(--lg-edge),0 16px 34px -18px rgba(0,0,0,.80);
  --lift-sm:inset 0 1px 0 var(--lg-lip),0 0 0 .5px var(--lg-edge),
    0 6px 14px -8px rgba(0,0,0,.70);
  --lift-lg:inset 0 1px 0 rgba(255,244,222,.15),inset 0 0 0 .5px rgba(255,244,222,.06),
    0 0 0 .5px var(--lg-edge),0 28px 56px -24px rgba(0,0,0,.85);
  --inset:inset 0 1px 3px rgba(0,0,0,.55),inset 0 0 0 .5px rgba(255,244,222,.05);
  --glass-fill:rgba(24,20,14,var(--lg-a));
  --glass-fill-lite:rgba(24,20,14,calc(var(--lg-a) - .10));
  --lg-track:rgba(255,244,222,.06);
  --glass-rim:rgba(255,244,222,.16);--glass-rim-soft:rgba(255,244,222,.07);
  --mat-fill:rgba(24,20,14,var(--lg-a));--mat-rim:rgba(255,244,222,.07);
  --mat-shadow:0 16px 34px -18px rgba(0,0,0,.80);
  --lg-bar:rgba(20,17,12,calc(var(--lg-a) + .14));
  --lg-bar-edge:rgba(0,0,0,.70);
  --lg-lens:rgba(var(--gold-rgb),.18);
  --lg-env:
    radial-gradient(60% 40% at 0% 0%,rgba(230,179,37,.20),transparent 70%),
    radial-gradient(52% 38% at 100% 22%,rgba(64,196,150,.13),transparent 70%),
    radial-gradient(70% 46% at 36% 100%,rgba(110,86,214,.16),transparent 72%);
}

/* ── 4. the environment the glass sits in ─────────────────────────────
   Three very large, very soft pools of colour, fixed and never animated.
   Without them a translucent card on a flat canvas is just a lighter
   rectangle; with them each pane picks up the light of where it sits.
   html::before, not body::before -- several pages already own body's
   pseudo-elements for their verdict bloom. No blur, no animation: one
   static composited layer. */
html[data-skin]::before{content:"";position:fixed;inset:0;z-index:-1;
  pointer-events:none;background:var(--lg-env)}

/* ── 5. surfaces that were opaque on purpose become glass ─────────────── */
html[data-skin] .hub-set{background:var(--surface);border:0;
  box-shadow:var(--lift);border-radius:20px}
html[data-skin] .hub-row:active{background:rgba(var(--gold-rgb),.09)}

/* One edge treatment for every card in the app. Only the shadow is set:
   a card's background and border can carry state, its edge never does. */
html[data-skin] .card,html[data-skin] .pane,html[data-skin] .section{
  box-shadow:var(--lift)}
/* The page hero is the thickest pane on its page (bigger surface reads
   thicker): full glass, deepest shadow, a whisper of gold catching light. */
html[data-skin] .page-hero{border:0;box-shadow:var(--lift-lg);
  background:linear-gradient(150deg,rgba(var(--gold-rgb),.09),transparent 55%),
    var(--surface)}
html[data-skin] .page-hero::after{opacity:.55}

/* ── 6. the floating tab bar ──────────────────────────────────────────
   Lifted off the bottom edge into a capsule, the one surface that gets a
   real backdrop blur because the page genuinely scrolls beneath it. The
   capsule is a fraction of the old full-width bar's area, which is what
   keeps the blur inside the 15 Aug iOS memory budget. */
html[data-skin] .bnav{left:12px;right:12px;margin:0 auto;max-width:520px;
  bottom:calc(8px + env(safe-area-inset-bottom,0px));
  padding:5px;gap:0;border:0;border-radius:32px;
  background:var(--lg-bar);
  -webkit-backdrop-filter:saturate(190%) blur(16px);
  backdrop-filter:saturate(190%) blur(16px);
  box-shadow:inset 0 1px 0 var(--lg-lip),inset 0 -1px 0 rgba(255,255,255,.06),
    0 0 0 .5px var(--lg-bar-edge),0 2px 6px rgba(0,0,0,.06),
    0 16px 36px -12px rgba(0,0,0,.26)}
html[data-skin] .bnav a{min-height:52px;padding:6px 2px;gap:4px;
  border-radius:27px;color:var(--muted);
  transition:background var(--dur-snappy,220ms) var(--ease-snappy,ease),
    color var(--dur-snappy,220ms) var(--ease-snappy,ease),
    transform 160ms var(--ease-snappy,ease)}
html[data-skin] .bnav a:active{transform:scale(.94);background:var(--lg-lens);opacity:1}
/* The selected tab is a lens: a small tinted pane with its own lip. */
html[data-skin] .bnav a.current{color:var(--gold-lite);background:var(--lg-lens);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 .5px rgba(var(--gold-rgb),.22)}
html[data-skin] .bnav .bnav-icon{display:flex;align-items:center;
  justify-content:center;height:24px;font-size:20px;text-shadow:none}
html[data-skin] .bnav .bnav-icon svg{width:23px;height:23px;display:block}
html[data-skin] .bnav a.current .bnav-icon svg{stroke-width:1.9}
html[data-skin] .bnav .bnav-lbl{font-size:10.5px;font-weight:600;
  letter-spacing:.005em;text-transform:none}

/* ── 7. back control: a glass capsule, as iOS 27 draws it ─────────────── */
html[data-skin] .nav-back{gap:2px;min-height:40px;padding:0 14px 0 8px;
  border-radius:20px;background:var(--surface);box-shadow:var(--lift-sm);
  font-size:15px;font-weight:600;letter-spacing:-0.01em;
  transition:transform 140ms var(--ease-snappy,ease),opacity .15s ease}
html[data-skin] .nav-back:active{transform:scale(.95);opacity:.85}
html[data-skin] .nav-back-chev{font-size:24px;margin-top:-2px}

/* ── 8. segmented controls: a glass track with a sliding lens ────────── */
html[data-skin] .idx-switch,html[data-skin] .skin-toggle{
  background:var(--lg-track);border:0;
  box-shadow:var(--inset);
  -webkit-backdrop-filter:none;backdrop-filter:none}
html[data-skin] .idx-pill,html[data-skin] .skin-toggle a{
  letter-spacing:.03em;border:0}
html[data-skin] .idx-pill.on,html[data-skin] .skin-toggle a.on{
  background:var(--surface-2);color:var(--ink);box-shadow:var(--lift-sm)}
html[data-skin] .idx-pill:active,html[data-skin] .skin-toggle a:active{
  transform:scale(.96)}

/* ── 9. accessibility: the system's own reduce/contrast switches win ──── */
@media (prefers-reduced-transparency:reduce){
  html[data-skin]{--lg-a:.97}
  html[data-skin]::before{display:none}
  html[data-skin] .bnav{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-contrast:more){
  html[data-skin]{--lg-a:1;--lg-edge:var(--ink-3)}
  html[data-skin] .bnav{box-shadow:0 0 0 1px var(--ink-3)}
}
@media (prefers-reduced-motion:reduce){
  html[data-skin] .bnav a,html[data-skin] .nav-back{transition:none}
  html[data-skin] .bnav a:active,html[data-skin] .nav-back:active,
  html[data-skin] .idx-pill:active,html[data-skin] .skin-toggle a:active{transform:none}
}