/* The glass shell (ds- prefix): the gem template's header, menus, phone bar, sheets and footer, dissolved into the page instead of sitting on it.
   Loaded by includes/journey-scene.php (journey_scene_head()) after the page's own sheets, on every public page, and only while the gem template is on
   (<html data-shell="glass">, printed by head.php): the particle template never loads it and prints none of its markup. The Sangat portal, the member pages and the
   admin desks never get the marker, so they keep their solid chrome. Every rule sits under html[data-shell="glass"].
   Markup: includes/shell/chrome.php (unchanged). Behaviour: assets/js/shell/shell.js sets [data-scrolled] on the header after 8px of scroll.

   One idea carries it: the shell is air, and its edge is a horizon, a single hairline of lamplight, brightest at the centre, that fades out at both ends instead of a boxed border.
     rest      the header is a soft veil over the page's own light, no border, no box (the veil keeps the words at AA over the brightest hero light)
     scrolled  the veil lifts and a frosted pane takes its place (blur + saturation), with the horizon hairline along its lower edge and a soft shadow
     panels    mega menus, the account menu, the Help drawer, search and the Me sheet are the same frosted pane, floating clear of the bar
     phone     the bottom bar floats as a frosted pill with the dial rising out of it; the footer settles into the page's own ground
   Dusk glass (Temple Dark) tints with the canvas black; dawn glass (Temple Dawn) with a warm milk, never grey. Tokens only: the --gl-* names below are the
   sheet's own and are built from the app's tokens, so a pack or the Dawn/Dark switch re-tints the glass with no change here.
   Fallbacks: no backdrop-filter, prefers-reduced-transparency and prefers-contrast: more give an opaque tinted surface. Reduced motion: no transitions.
   Breakpoints (rem): md 48rem (768px), lg 64rem (1024px). */

/* ---------------------------------------------------------------- the glass tokens
   --gl-tint    what the glass is tinted with (the lightest surface in Dawn, the canvas black in Dark)
   --gl-veil, --gl-frost, --gl-panel   how much of the tint each layer carries (0 to 1): the veil at rest, the scrolled header, a floating pane
   --gl-line    the hairline (amber at 20% in Dark, warm brown at 18% in Dawn)
   --gl-fx, --gl-more, --gl-rest   the fallback switches: effects on (1) or off (0); extra opacity added to every pane; the frosted pane already at rest */
html[data-shell="glass"] {
  --gl-tint: var(--ds-surface-raised);
  --gl-line: color-mix(in srgb, var(--ds-accent) 18%, transparent);
  --gl-line-strong: color-mix(in srgb, var(--ds-accent) 42%, transparent);
  --gl-chip: color-mix(in srgb, var(--ds-accent) 11%, transparent);
  --gl-veil: .72;
  --gl-frost: .76;
  --gl-panel: .9;
  --gl-blur: 18px;
  --gl-blur-panel: 28px;
  --gl-sat: 1.5;
  --gl-lit: inset 0 1px 0 color-mix(in srgb, var(--ds-surface-raised) 70%, transparent);
  --gl-shadow: 0 1.25rem 2.75rem -1.25rem color-mix(in srgb, var(--ds-accent) 42%, transparent), 0 .25rem 1rem -.5rem color-mix(in srgb, var(--ds-text) 16%, transparent);
  --gl-scrim: color-mix(in srgb, var(--ds-text) 26%, transparent);
  --gl-fx: 1;
  --gl-more: 0;
  --gl-rest: 0;
  --gl-ease: var(--ds-ease-gentle);
  --gl-dur: var(--ds-dur-slow);
  --gl-bar-gap: var(--ds-space-3);
  scroll-padding-block-start: calc(var(--ds-header-h) + var(--ds-space-4));   /* a link to #section never leaves its heading under the header */
}
/* the phone bar and overlays of a page kept in Temple Dark in either theme (data-glass-dark, includes/shell/app-shell.php) take the always-dark overlay colours, as its header and footer take .ds-theme-dark */
html[data-shell="glass"] [data-glass-dark] {
  --ds-surface: var(--ds-overlay-surface); --ds-surface-sunken: var(--ds-overlay-surface); --ds-surface-raised: color-mix(in srgb, var(--ds-overlay-surface) 90%, var(--ds-overlay-text));
  --ds-text: var(--ds-overlay-text); --ds-text-muted: var(--ds-overlay-muted); --ds-accent: var(--ds-overlay-accent); --ds-border: var(--ds-overlay-border); --ds-focus: var(--ds-overlay-accent);
  color: var(--ds-text);
}
html[data-shell="glass"].dark, html[data-shell="glass"][data-theme="dark"], html[data-shell="glass"] .ds-theme-dark, html[data-shell="glass"] [data-glass-dark] {
  --gl-tint: var(--ds-surface-sunken);
  --gl-line: var(--ds-border);
  --gl-line-strong: color-mix(in srgb, var(--ds-accent) 50%, transparent);
  --gl-chip: color-mix(in srgb, var(--ds-accent) 16%, transparent);
  --gl-veil: .6;
  --gl-frost: .7;
  --gl-panel: .88;
  --gl-lit: inset 0 1px 0 color-mix(in srgb, var(--ds-text) 9%, transparent);
  --gl-shadow: 0 1.5rem 3rem -1.25rem color-mix(in srgb, var(--ds-surface-sunken) 94%, transparent), 0 .25rem 1rem -.5rem color-mix(in srgb, var(--ds-surface-sunken) 80%, transparent);
  --gl-scrim: color-mix(in srgb, var(--ds-surface-sunken) 58%, transparent);
}
/* the alpha of a layer, with (declared again under .ds-theme-dark and [data-glass-dark], so a header or sheet kept in Temple Dark reads its own --gl-frost)  the fallback's extra opacity folded in (never above 100%) */
html[data-shell="glass"], html[data-shell="glass"] .ds-theme-dark, html[data-shell="glass"] [data-glass-dark] { --gl-a-frost: min(100%, calc((var(--gl-frost) + var(--gl-more)) * 100%)); --gl-a-panel: min(100%, calc((var(--gl-panel) + var(--gl-more) * .1) * 100%)); }

/* ---------------------------------------------------------------- the header: a veil at rest, a frosted pane once the page moves
   The header's own box is transparent; two pseudo-elements carry the look and fade into each other (opacity only, so the change is smooth and costs no layout).
   The frost layer holds the backdrop blur, so the menus inside the header can blur the page behind them (a blur on the header itself would hide it from them).
   !important on the header's own paint: the page sheets of the world pages give a light header a solid ground (chakra.css, about.css, darshan.css). */
html[data-shell="glass"] .ds-header--shell {
  isolation: isolate; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border-block-end: 0; box-shadow: none !important;
}
html[data-shell="glass"] .ds-header--shell::before, html[data-shell="glass"] .ds-header--shell::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; transition: opacity var(--gl-dur) var(--gl-ease);
}
/* the frosted pane, with the horizon hairline as its lowest layer */
html[data-shell="glass"] .ds-header--shell::before {
  inset: 0; opacity: var(--gl-rest);
  background-color: var(--gl-tint);   /* a browser without color-mix keeps an opaque tint */
  background-image: linear-gradient(90deg, transparent, var(--gl-line) 14%, var(--gl-line-strong) 50%, var(--gl-line) 86%, transparent);
  background-position: 50% 100%; background-size: 100% 1px; background-repeat: no-repeat;
  background-color: color-mix(in srgb, var(--gl-tint) var(--gl-a-frost), transparent);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * var(--gl-fx))) saturate(var(--gl-sat)); backdrop-filter: blur(calc(var(--gl-blur) * var(--gl-fx))) saturate(var(--gl-sat));
  box-shadow: var(--gl-shadow);
  clip-path: inset(0 0 -4rem 0);   /* the shadow falls below the bar only, never up into the strip above it */
}
html[data-shell="glass"] .ds-header--shell[data-scrolled]::before { opacity: 1; }
/* the veil: the page's light, held back a little behind the words, and gone at the lower edge so nothing ends in a line */
html[data-shell="glass"] .ds-header--shell::after {
  inset: 0 0 -1.25rem; opacity: calc(var(--gl-fx) * (1 - var(--gl-rest)));
  background: linear-gradient(180deg, color-mix(in srgb, var(--gl-tint) calc(var(--gl-veil) * 100%), transparent) 0, color-mix(in srgb, var(--gl-tint) calc(var(--gl-veil) * 62%), transparent) 58%, transparent 100%);
}
html[data-shell="glass"] .ds-header--shell[data-scrolled]::after { opacity: 0; }

/* controls on glass: quiet chips of the accent instead of grey boxes; the words stay in the ink (the accent on a light photograph would fail AA) */
html[data-shell="glass"] .ds-header--shell .ds-nav__trigger:hover, html[data-shell="glass"] .ds-header--shell .ds-nav__toplink:hover,
html[data-shell="glass"] .ds-header--shell .ds-nav__trigger[aria-expanded="true"] { background: var(--gl-chip); color: var(--ds-text); }
html[data-shell="glass"] .ds-header--shell .ds-iconbtn:hover { background: var(--gl-chip); }
html[data-shell="glass"] .ds-header--shell .ds-avatar { background: color-mix(in srgb, var(--gl-tint) 60%, transparent); border-color: var(--gl-line-strong); }
html[data-shell="glass"] .ds-header--shell .ds-avatar:hover { border-color: var(--ds-accent); }
html[data-shell="glass"] .ds-header--shell .ds-button--ghost { border-color: var(--gl-line-strong); }
html[data-shell="glass"] .ds-header--shell .ds-button--ghost:hover { background: var(--gl-chip); }
html[data-shell="glass"] .ds-header--shell a:focus-visible, html[data-shell="glass"] .ds-header--shell button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- floating panes: the mega menus and the account menu
   Clear of the bar by a breath (the item spans the bar, so the pointer still reaches the panel; chrome.js keeps a panel open for 200ms while it crosses). */
html[data-shell="glass"] .ds-nav__panel, html[data-shell="glass"] .ds-header--shell .ds-menu {
  background-color: var(--gl-tint);
  background-color: color-mix(in srgb, var(--gl-tint) var(--gl-a-panel), transparent);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur-panel) * var(--gl-fx))) saturate(var(--gl-sat)); backdrop-filter: blur(calc(var(--gl-blur-panel) * var(--gl-fx))) saturate(var(--gl-sat));
  border: 1px solid var(--gl-line); box-shadow: var(--gl-lit), var(--gl-shadow);
}
html[data-shell="glass"] .ds-nav__panel { inset-block-start: calc(100% + var(--ds-space-2)); border-radius: var(--ds-radius-lg); }
html[data-shell="glass"] .ds-nav__link:hover, html[data-shell="glass"] .ds-menu__item:hover { background: var(--gl-chip); }
html[data-shell="glass"] .ds-menu__hello, html[data-shell="glass"] .ds-menu__scope { border-color: var(--gl-line); }

/* a link in a pane keeps its ink on hover and focus (the site's own a:hover turns it the burgundy that reads on parchment, and not on dusk glass); the chip shows the hover */
html[data-shell="glass"] :is(.ds-nav__link, .ds-menu__item, .ds-mesheet__link, .ds-helpdrawer .hlp-live__link, .ds-tabbar__link):is(:hover, :focus-visible) { color: var(--ds-text); }
html[data-shell="glass"] .ds-mesheet__link:hover { background: var(--gl-chip); }
html[data-shell="glass"] .ds-tabbar__link[aria-current="page"]:hover { color: var(--ds-accent); }

/* ---------------------------------------------------------------- the Me sheet, the Help drawer and search: the same pane */
html[data-shell="glass"] dialog.ds-mesheet, html[data-shell="glass"] dialog.ds-helpdrawer, html[data-shell="glass"] dialog.ds-cmdk {
  background-color: var(--gl-tint);
  background-color: color-mix(in srgb, var(--gl-tint) var(--gl-a-panel), transparent);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur-panel) * var(--gl-fx))) saturate(var(--gl-sat)); backdrop-filter: blur(calc(var(--gl-blur-panel) * var(--gl-fx))) saturate(var(--gl-sat));
  border-color: var(--gl-line); box-shadow: var(--gl-lit), var(--gl-shadow);
}
html[data-shell="glass"] dialog.ds-mesheet { border-block-end: 0; border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; }
html[data-shell="glass"] dialog.ds-mesheet .ds-sheet__head, html[data-shell="glass"] dialog.ds-helpdrawer .ds-sheet__head, html[data-shell="glass"] .ds-cmdk__field,
html[data-shell="glass"] .ds-mesheet__link, html[data-shell="glass"] .ds-helpdrawer__all { border-color: var(--gl-line); }
html[data-shell="glass"] .ds-helpdrawer__input { background: color-mix(in srgb, var(--gl-tint) 70%, transparent); border-color: var(--gl-line-strong); }
html[data-shell="glass"] .ds-cmdk__opt[aria-selected="true"], html[data-shell="glass"] .ds-close:hover { background: var(--gl-chip); }
/* behind a sheet the page is veiled and softened, not blacked out */
html[data-shell="glass"] dialog.ds-mesheet::backdrop, html[data-shell="glass"] dialog.ds-helpdrawer::backdrop, html[data-shell="glass"] dialog.ds-cmdk::backdrop {
  background: var(--gl-scrim, var(--ds-surface-sunken)); opacity: 1; -webkit-backdrop-filter: blur(calc(6px * var(--gl-fx))); backdrop-filter: blur(calc(6px * var(--gl-fx)));
}
@media (min-width: 48rem) {
  html[data-shell="glass"] dialog.ds-helpdrawer[open] { border-inline-start: 1px solid var(--gl-line); border-block-start: 0; }
  html[data-shell="glass"] dialog.ds-helpdrawer::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }   /* the page behind the drawer stays in view, as it does today */
}
/* ---------------------------------------------------------------- the phone bar: a floating pill, the dial rising out of it
   The footer's padding follows --ds-chrome-bar, which now also counts the gap under the pill. */
@media (max-width: 63.99rem) {
  html[data-shell="glass"] { --ds-chrome-bar: calc(var(--ds-tabbar-h) + var(--gl-bar-gap) + env(safe-area-inset-bottom, 0px)); scroll-padding-block-end: var(--ds-chrome-bar); }
}
html[data-shell="glass"] .ds-tabbar--shell {
  inset-inline: max(var(--ds-space-3), env(safe-area-inset-left, 0px)) max(var(--ds-space-3), env(safe-area-inset-right, 0px)); inset-block-end: calc(var(--gl-bar-gap) - var(--ds-space-1) + env(safe-area-inset-bottom, 0px)); max-inline-size: 34rem; margin-inline: auto; padding: 0;
  background: transparent; border: 0; border-radius: var(--ds-radius-lg); isolation: isolate;
}
html[data-shell="glass"] .ds-tabbar--shell::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-color: var(--gl-tint);
  background-color: color-mix(in srgb, var(--gl-tint) var(--gl-a-frost), transparent);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * var(--gl-fx))) saturate(var(--gl-sat)); backdrop-filter: blur(calc(var(--gl-blur) * var(--gl-fx))) saturate(var(--gl-sat));
  border: 1px solid var(--gl-line); box-shadow: var(--gl-lit), var(--gl-shadow);
}
html[data-shell="glass"] .ds-tabbar--shell .ds-tabbar__list { padding: var(--ds-space-1); }
html[data-shell="glass"] .ds-tabbar--shell .ds-tabbar__link { border-radius: var(--ds-radius-md); }
html[data-shell="glass"] .ds-tabbar--shell .ds-tabbar__link[aria-current="page"] { box-shadow: none; background: var(--gl-chip); }
/* the cradle behind the dial is the same pane, cut to the part above the bar */
html[data-shell="glass"] .ds-tabbar__item--dial::before {
  background-color: var(--gl-tint);
  background-color: color-mix(in srgb, var(--gl-tint) var(--gl-a-frost), transparent);
  -webkit-backdrop-filter: blur(calc(var(--gl-blur) * var(--gl-fx))) saturate(var(--gl-sat)); backdrop-filter: blur(calc(var(--gl-blur) * var(--gl-fx))) saturate(var(--gl-sat));
  border-color: var(--gl-line);
}

/* ---------------------------------------------------------------- the footer: it settles into the page's own ground
   No slab and no top border: the page's ground grows a little denser toward the foot (so the words keep AA over a scene or a long photograph), and a horizon hairline marks where
   it begins. The tint starts at half strength (so the hard edge where a page's own world ends does not show) and settles by 5rem; the blur eases in over the first 3rem. */
html[data-shell="glass"] footer.ds-footer.ds-footer--chrome {
  position: relative; isolation: isolate; background: transparent; border-block-start: 0;
}
html[data-shell="glass"] footer.ds-footer.ds-footer--chrome::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(180deg, transparent 0, var(--gl-tint) 5rem);   /* a browser without color-mix keeps a plain fade */
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--gl-tint) calc(var(--gl-a-frost) * .5), transparent) 0, color-mix(in srgb, var(--gl-tint) var(--gl-a-frost), transparent) 5rem);
  -webkit-backdrop-filter: blur(calc(14px * var(--gl-fx))) saturate(var(--gl-sat)); backdrop-filter: blur(calc(14px * var(--gl-fx))) saturate(var(--gl-sat));
  -webkit-mask-image: linear-gradient(180deg, transparent 0, black 3rem); mask-image: linear-gradient(180deg, transparent 0, black 3rem);
}
html[data-shell="glass"] footer.ds-footer.ds-footer--chrome::after {
  content: ""; position: absolute; inset: 0 0 auto; block-size: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--gl-line) 14%, var(--gl-line-strong) 50%, var(--gl-line) 86%, transparent);
}
html[data-shell="glass"] .ds-footer--chrome .ds-footer__top + .ds-footer__base { border-block-start: 1px solid transparent; border-image: linear-gradient(90deg, transparent, var(--gl-line) 14%, var(--gl-line-strong) 50%, var(--gl-line) 86%, transparent) 1; }

/* ---------------------------------------------------------------- fallbacks: an opaque tinted surface, never a transparent one that cannot be read
   (no backdrop-filter; the visitor asked for less transparency; the visitor asked for more contrast). The same three switches in each. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-shell="glass"][data-shell] { --gl-fx: 0; --gl-more: 1; --gl-rest: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-shell="glass"][data-shell] { --gl-fx: 0; --gl-more: 1; --gl-rest: 1; }
}
@media (prefers-contrast: more) {
  html[data-shell="glass"][data-shell] { --gl-fx: 0; --gl-more: 1; --gl-rest: 1; --gl-line: var(--ds-text-muted); --gl-line-strong: var(--ds-text); }
  html[data-shell="glass"] .ds-header--shell::before { background-image: linear-gradient(var(--gl-line), var(--gl-line)); }
  html[data-shell="glass"] .ds-nav__panel, html[data-shell="glass"] .ds-header--shell .ds-menu, html[data-shell="glass"] .ds-tabbar--shell::before { border-color: var(--gl-line-strong); }
}
/* the opaque states paint no veil, no blur and no feathered footer edge */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-shell="glass"] footer.ds-footer.ds-footer--chrome::before { background-image: linear-gradient(var(--gl-tint), var(--gl-tint)); -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html[data-shell="glass"] footer.ds-footer.ds-footer--chrome::before { background-image: linear-gradient(var(--gl-tint), var(--gl-tint)); -webkit-mask-image: none; mask-image: none; }
}

/* ---------------------------------------------------------------- motion: only the header's veil-to-frost fade, and none when asked */
@media (prefers-reduced-motion: reduce) {
  html[data-shell="glass"] .ds-header--shell::before, html[data-shell="glass"] .ds-header--shell::after { transition: none; }
}