/* ============================================================================================
   assets/liquid-glass.css · RIVET Liquid Glass, one material for the whole site.
   Owner direction (30 Oct 2026): "use it more widely, including on cards".
   Ported from w26/vnext assets/glass.css (tokens, floors, fallbacks), adapted to this branch:
   no class hooks needed, it dresses the existing selectors. Linked LAST on every page with the
   site header (tools/build/chrome.py puts it after type.css), so it wins at equal weight.
   (assets/glass.css on this branch is the diagram system; it is unrelated and unchanged.)

   WHERE: the header bar and mega panels, the phone menu sheet, sticky bars, tab bars, chips over
   photos, and cards (course, plan with price, member and quote, feature tiles).
   NEVER: forms, tables, charts, long text, the footer, duo cards and bands, anything magenta.

   CONTRAST FLOORS: every glass layer carries a tint of at least .82 (light rgba(248,248,250,.82),
   dark rgba(10,10,12,.82)). Over the worst backdrop (black under light glass, white under dark
   glass) black ink stays 13:1, slate 5.4:1, white 11:1, silver 7.8:1, so text stays AA before blur.

   FALLBACKS: no backdrop-filter -> solid; prefers-reduced-transparency -> solid, no blur;
   prefers-contrast: more -> solid plus an ink rim; forced-colors -> Canvas with a CanvasText rim.
   ============================================================================================ */

/* ---------- tokens: light (membership and community pages) ---------- */
:root {
  --lg-filter: blur(20px) saturate(180%);
  --lg-tint: rgba(248, 248, 250, .82);                       /* bars, panels, sheets */
  --lg-card: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(248, 248, 250, .82)); /* cards: white-leaning, never under .82 */
  --lg-chip: rgba(10, 10, 12, .82);                          /* chips over photos are always dark glass, white ink */
  --lg-rim: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 -1px 0 rgba(0, 0, 0, .05);
  --lg-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px -10px rgba(17, 12, 46, .2);
  --lg-chip-rim: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .12);
  --lg-hair: rgba(74, 74, 104, .16);
}
@media (max-width: 759.98px) { :root { --lg-filter: blur(14px) saturate(170%); } }

/* ---------- tokens: dark (corporate pages: html[data-mode="dark"], body.gtm-dark) ---------- */
html[data-mode="dark"], body.gtm-dark {
  --lg-tint: rgba(10, 10, 12, .82);
  --lg-card: linear-gradient(180deg, rgba(18, 18, 26, .84), rgba(10, 10, 12, .82));
  --lg-rim: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(0, 0, 0, .4);
  --lg-shadow: 0 12px 40px -10px rgba(0, 0, 0, .65);
  --lg-hair: rgba(255, 255, 255, .1);
}

/* ============================ HEADER ============================
   The bar's glass lives on ::before, not on the header itself: an element with backdrop-filter
   becomes the backdrop root of everything inside it, so the mega panels and the phone sheet could
   only blur the bar, never the page. On ::before the panels see the page. */
html #rivet-header, html #rivet-header.is-open {
  background: transparent !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#rivet-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -1px 0 var(--nv-hair);
}
html[data-mode="dark"] #rivet-header::before, body.gtm-dark #rivet-header::before { box-shadow: inset 0 -1px 0 var(--nv-hair); }

/* mega panels (desktop) */
@media (min-width: 961px) {
  #rivet-header .hdr__panel-in {
    background: var(--lg-tint);
    -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
    box-shadow: var(--lg-rim), var(--nv-shadow);
    border-radius: 20px;
  }
}

/* phone and tablet sheet: the sheet, its pinned back row and its pinned foot */
@media (max-width: 960px) {
  #rivet-header .hdr__nav {
    background: var(--lg-tint);
    -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  }
  html #rivet-header .hdr__item.is-open > .hdr__trigger,
  html #rivet-header .hdr__sheetfoot {
    background: var(--lg-tint) !important;
    -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  }
}

/* ============================ STICKY BARS AND TAB BARS ============================ */
/* light bars */
html:root body :is(.ptabs__tabs, .seewhat__match, .catbar) {
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}
html:root body .catbar { box-shadow: inset 0 -1px 0 var(--lg-hair); border-bottom-color: transparent; }
@media (max-width: 760px) {
  html.js:root body .ptabs__bar {
    background: var(--lg-tint);
    -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
    box-shadow: inset 0 -1px 0 var(--lg-hair);
  }
  /* inside the glass bar the tab strip itself stays clear (one glass layer, not two) */
  html.js:root body .ptabs__bar .ptabs__tabs { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
}
/* pill tabs that sit on the page: glass, the selected one stays solid ink */
html:root body main.pdp .pdp-tab:not([aria-selected="true"]),
html:root body .ptab:not([aria-selected="true"]):not(.ptabs__tabs .ptab) {
  background: var(--lg-tint);
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}
@media (max-width: 760px) {
  html:root body .ptabs__tabs .ptab:not([aria-selected="true"]) { background: var(--lg-tint); box-shadow: var(--lg-rim), var(--lg-shadow); }
}
/* dark rails (events, OS overview): dark glass at the floor */
html:root body :is(.evrail, .ovrail) {
  background: rgba(10, 10, 12, .82);
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
}
/* the phone sticky action bar on plan pages: always dark glass, white ink */
html:root body main.pdp .pp-sticky {
  background: rgba(10, 10, 12, .82);
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -16px rgba(0, 0, 0, .55);
}

/* ============================ CHIPS OVER PHOTOS ============================ */
html:root body :is(#rivet-header .hdr-feat__chip, .shot__cap, .pp-hv__cap, .sk-chip, .hub__pill) {
  background: var(--lg-chip);
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-chip-rim);
  color: #fff;
}
/* the hero pill on the home page (light chip on the page) */
html:root body .nh-pill {
  background: var(--lg-tint); border-color: transparent;
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}

/* ============================ CARDS ============================
   Course cards, plan cards with prices, member and quote cards, feature tiles. Light on light
   pages, dark on dark pages (the tokens follow the page mode). No border: the rim and the lift
   shadow separate the card. Duo cards (the featured plan, the paid access card, member-card
   objects, event cards) keep their duo and are not listed here. */
html:root body :is(
  .tile, .nh-quote, .nh-step, .nacc--free,
  .pdp-quote, .pdp-tile:not(.pdp-tiles--room > .pdp-tile), .pdp-card,
  .pp-plan:not(.pp-plan--feat), .pp-course,
  .catcard, .mw-card, .bene__card, .aud__card, .valuecard, .mcard, .dcr-tile,
  .rcard, .pillar, .benchcard, .trustcard, .capcard
) {
  background: var(--lg-card);
  border-color: transparent;
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}
/* the team view of the pricing grid turns a non-fitting featured plan white: glass it like the others */
html:root body .pp-plans-sec[data-mode="team"] .pp-plan--feat[data-fits="no"] {
  background: var(--lg-card);
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-rim), var(--lg-shadow);
}
/* dark academy pages: their cards are a 5% white wash over a dark ground (academy-dark.css, with !important).
   The ground is always dark there, so the wash keeps white ink AA; add the blur, swap the border for the rim. */
body.gtm-dark main :is(.course, .tile, .catcard, .miniquote, .lib-card, .lib-step, .gradquote, .cmemb__item, .trkcard) {
  -webkit-backdrop-filter: var(--lg-filter); backdrop-filter: var(--lg-filter);
  border-color: transparent !important;
  box-shadow: var(--lg-rim), var(--lg-shadow) !important;
}

/* ============================ FALLBACKS ============================ */
/* 1. no backdrop-filter: every layer turns solid at its own colour */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --lg-tint: #F8F8FA; --lg-card: #FFFFFF; --lg-chip: #0A0A0C; }
  html[data-mode="dark"], body.gtm-dark { --lg-tint: #12121A; --lg-card: #0A0A0C; }
  html:root body :is(.evrail, .ovrail), html:root body main.pdp .pp-sticky { background: #12121A; }
}
/* 2. reduced transparency: solid, no blur */
@media (prefers-reduced-transparency: reduce) {
  :root { --lg-filter: none; --lg-tint: #F8F8FA; --lg-card: #FFFFFF; --lg-chip: #0A0A0C; }
  html[data-mode="dark"], body.gtm-dark { --lg-tint: #12121A; --lg-card: #0A0A0C; }
  html:root body :is(.evrail, .ovrail), html:root body main.pdp .pp-sticky { background: #12121A; }
  body.gtm-dark main :is(.course, .tile, .catcard, .miniquote, .lib-card, .lib-step, .gradquote, .cmemb__item, .trkcard) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* 3. more contrast: solid plus a 1px ink rim on cards */
@media (prefers-contrast: more) {
  :root { --lg-filter: none; --lg-tint: #F8F8FA; --lg-card: #FFFFFF; --lg-chip: #000000;
    --lg-rim: inset 0 0 0 1px #000000; }
  html[data-mode="dark"], body.gtm-dark { --lg-tint: #12121A; --lg-card: #0A0A0C; --lg-rim: inset 0 0 0 1px #FFFFFF; }
}
/* 4. forced colours: the system draws it; no blur, Canvas ground, a CanvasText edge */
@media (forced-colors: active) {
  :root, html[data-mode="dark"], body.gtm-dark { --lg-filter: none; --lg-tint: Canvas; --lg-card: Canvas; --lg-chip: Canvas; --lg-rim: none; --lg-shadow: none; }
  #rivet-header::before { background: Canvas; border-bottom: 1px solid CanvasText; }
  html:root body :is(
    .tile, .nh-quote, .nh-step, .nacc--free, .pdp-quote, .pdp-tile, .pdp-card, .pp-plan, .pp-course,
    .catcard, .mw-card, .bene__card, .aud__card, .valuecard, .mcard, .dcr-tile, .rcard, .pillar, .benchcard, .trustcard, .capcard,
    .ptabs__tabs, .seewhat__match, .pdp-tab, .ptab, .pp-sticky, .nh-pill
  ) { border: 1px solid CanvasText; }
  html:root body :is(#rivet-header .hdr-feat__chip, .shot__cap, .pp-hv__cap, .sk-chip, .hub__pill) { color: CanvasText; }
}