/* ═══════════════════════════════════════════════════════════════════════════
   MEDCUE GLASS · v2 design system (prototype; production-shaped)
   Production: public/css/glass.css. Dark follows html[data-learner-theme="dark"] only — set on every page by learner-appearance.js, day by default (formerly also prefers-color-scheme on public pages, no attribute);
   production shell.js pins html[data-theme="light"], so data-theme is deliberately NOT used here.
   Scope: everything lives under body.mc-glass via :where(), inside cascade layers → zero specificity,
   no !important, inert on pages that have not opted in.
   Idiom: iOS / iPadOS / macOS 27 — opaque content, Liquid Glass only on floating chrome.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer glass.tokens, glass.base, glass.components, glass.shell, glass.page;

@font-face {
  font-family: "Inter Glass";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─────────────────────────────── TOKENS ─────────────────────────────── */
@layer glass.tokens {
  :root {
    color-scheme: light dark;
    /* Backgrounds (grouped idiom) */
    --g-bg: #F2F2F7;                 /* systemGroupedBackground */
    --g-bg-2: #FFFFFF;               /* secondarySystemGroupedBackground — cells, cards */
    --g-bg-3: #F2F2F7;               /* tertiary — inset wells inside cells */
    --g-bg-plain: #FFFFFF;           /* systemBackground — reading surfaces */
    --g-bg-elevated: #FFFFFF;        /* sheets, popovers */
    /* Labels */
    --g-label: #000000;
    --g-label-2: rgb(60 60 67 / .75); /* Apple's increased-contrast secondary label: ≥4.5:1 on grouped and cell backgrounds */
    --g-label-3: rgb(60 60 67 / .30);
    --g-label-4: rgb(60 60 67 / .18);
    --g-ink: #1D1D1F;                /* apple.com marketing ink */
    --g-ink-2: #6E6E73;
    /* Fills & separators */
    --g-fill: rgb(120 120 128 / .20);
    --g-fill-2: rgb(120 120 128 / .16);
    --g-fill-3: rgb(118 118 128 / .12);
    --g-fill-4: rgb(116 116 128 / .08);
    --g-sep: rgb(60 60 67 / .29);
    --g-sep-opaque: #C6C6C8;
    /* Tint: Medcue coral is the app accent colour. Never an outcome. */
    --g-tint: #BC4028;
    --g-tint-hover: #A73A24;
    --g-tint-on: #FFFFFF;
    --g-tint-fill: #BC4028; /* filled controls carrying text */
    --g-tint-fill-hover: #A73A24;
    --g-tint-soft: rgb(188 64 40 / .12);
    /* System colours (light) — used for icon tiles, charts, outcomes */
    --g-red: #E0263A;   --g-orange: #F08A00; --g-yellow: #E6B800; --g-green: #28A745;
    --g-mint: #00B5AC;  --g-teal: #2AA6C0;   --g-cyan: #2EA3DA;   --g-blue: #0A6CF0;
    --g-indigo: #5452D0;--g-purple: #A24CD6; --g-pink: #E42F58;   --g-brown: #9C7C55; --g-gray: #8E8E93;
    /* Outcomes (text-safe on white) */
    --g-correct: #1A7F37; --g-correct-soft: rgb(40 167 69 / .12);
    --g-wrong: #C8102E;   --g-wrong-soft: rgb(224 38 58 / .10);
    --g-warn: #9A5B00;
    /* Clinical stage — always opaque, always dark for films */
    --g-stage: #0B0C0E; --g-on-stage: #FFFFFF; --g-on-stage-ink: #000000; --g-stage-mat: rgb(20 20 24 / .62);
    /* Glass materials (2027 diffuse recipe) */
    --g-glass-rgb: 250 250 252;
    --g-glass-ultrathin: .42; --g-glass-thin: .58; --g-glass-regular: .72;
    --g-glass-rim: rgb(255 255 255 / .9);
    --g-glass-edge: rgb(0 0 0 / .06);
    --g-glass-gloss: linear-gradient(180deg, rgb(255 255 255 / .16), transparent 50%); /* top light on glass chrome; off in dark */
    --g-glass-shadow: 0 0 0 .5px rgb(0 0 0 / .06), 0 8px 28px -8px rgb(20 20 30 / .22);
    --g-pop-shadow: 0 0 0 .5px rgb(0 0 0 / .08), 0 18px 50px -12px rgb(20 20 30 / .32);
    /* Type: SF on Apple platforms, Inter elsewhere */
    --g-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Glass", "Segoe UI", system-ui, sans-serif;
    --g-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Glass", "Segoe UI", system-ui, sans-serif;
    --g-font-rounded: ui-rounded, "SF Pro Rounded", -apple-system, "Inter Glass", system-ui, sans-serif;
    --g-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* Dynamic type: production maps html[data-text-scale] → --g-scale (small .8824 · default 1 · large 1.1176 · larger 1.2353) */
    --g-scale: 1;
    /* HIG text styles (Large/default content size) */
    --g-t-largetitle: 34px; --g-t-title1: 28px; --g-t-title2: 22px; --g-t-title3: 20px;
    --g-t-headline: 17px;   --g-t-body: 17px;   --g-t-callout: 16px; --g-t-subhead: 15px;
    --g-t-footnote: 13px;   --g-t-caption: 12px; --g-t-caption2: 11px;
    /* apple.com marketing ramp */
    --g-m-hero: clamp(48px, 6.6vw, 80px); --g-m-h1: clamp(40px, 4.6vw, 56px); --g-m-h2: clamp(32px, 3.4vw, 40px);
    --g-m-h3: 28px; --g-m-h4: 21px; --g-m-body: 17px; --g-m-lede: clamp(19px, 1.7vw, 21px);
    /* Geometry (concentric) */
    --g-r-window: 26px; --g-r-card: 22px; --g-r-cell: 12px; --g-r-control: 10px; --g-r-small: 8px; --g-r-capsule: 999px;
    --g-sidebar-w: 280px;
    --g-gutter: 20px;
    --g-content-max: 1080px;
    --g-bar-inset: 112px;           /* phone: floating tab bar / dock height + breathing room */
    --g-reading-max: 680px;
    /* Motion */
    --g-spring: linear(0, 0.057, 0.185, 0.337, 0.486, 0.618, 0.727, 0.812, 0.877, 0.924, 0.956, 0.978, 0.992, 1, 1.004, 1.006, 1.006, 1.006, 1.005, 1.004, 1.003, 1.002, 1.002, 1.001, 1.001, 1, 1, 1, 1, 1, 1);
    --g-spring-smooth: linear(0, 0.055, 0.175, 0.312, 0.445, 0.562, 0.66, 0.74, 0.803, 0.852, 0.89, 0.919, 0.94, 0.956, 0.968, 0.977, 0.983, 0.988, 0.991, 0.994, 0.995, 0.997, 0.998, 0.998, 0.999, 0.999, 0.999, 1, 1, 1, 1);
    --g-spring-bouncy: linear(0, 0.085, 0.27, 0.48, 0.67, 0.82, 0.927, 0.994, 1.03, 1.044, 1.045, 1.039, 1.029, 1.02, 1.012, 1.006, 1.002, 0.999, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 1, 1, 1, 1, 1, 1, 1);
    --g-ease: cubic-bezier(.25, .1, .25, 1);
    --g-d-fast: 140ms; --g-d-base: 260ms; --g-d-move: 480ms; --g-d-reveal: 700ms;
    --g-reveal-y: 28px; --g-r-device: 32px; --g-stage-dim: rgb(0 0 0 / .55); --g-vital-rule: 2px;
  }
  :root[data-text-scale="small"] { --g-scale: .8824; }
  :root[data-text-scale="large"] { --g-scale: 1.1176; }
  :root[data-text-scale="larger"] { --g-scale: 1.2353; }

  /* Dark appearance: elevated surfaces step up rather than casting shadows */
  html[data-learner-theme="dark"] {
    --g-bg: #000000; --g-bg-2: #1C1C1E; --g-bg-3: #2C2C2E; --g-bg-plain: #000000; --g-bg-elevated: #1C1C1E;
    --g-label: #FFFFFF; --g-label-2: rgb(235 235 245 / .60); --g-label-3: rgb(235 235 245 / .30); --g-label-4: rgb(235 235 245 / .16);
    --g-ink: #F5F5F7; --g-ink-2: #A1A1A6;
    --g-fill: rgb(120 120 128 / .36); --g-fill-2: rgb(120 120 128 / .32); --g-fill-3: rgb(118 118 128 / .24); --g-fill-4: rgb(118 118 128 / .18);
    --g-sep: rgb(84 84 88 / .65); --g-sep-opaque: #38383A;
    --g-tint: #E8664D; --g-tint-hover: #F07A62; --g-tint-on: #FFFFFF; --g-tint-fill: #C8452C; --g-tint-fill-hover: #B53B24; --g-tint-soft: rgb(232 102 77 / .2);
    --g-red: #FF453A; --g-orange: #FF9F0A; --g-yellow: #FFD60A; --g-green: #30D158; --g-mint: #63E6E2; --g-teal: #40C8E0;
    --g-cyan: #64D2FF; --g-blue: #0A84FF; --g-indigo: #5E5CE6; --g-purple: #BF5AF2; --g-pink: #FF375F; --g-brown: #AC8E68; --g-gray: #8E8E93;
    --g-correct: #30D158; --g-correct-soft: rgb(48 209 88 / .16); --g-wrong: #FF6961; --g-wrong-soft: rgb(255 69 58 / .16); --g-warn: #FFB340;
    --g-glass-rgb: 28 28 30; --g-glass-ultrathin: .5; --g-glass-thin: .74; --g-glass-regular: .82;
    --g-glass-gloss: linear-gradient(transparent, transparent); /* no gloss in dark: elevation by step, never by gradient */
    --g-glass-rim: rgb(255 255 255 / .1); --g-glass-edge: rgb(0 0 0 / .4);
    --g-glass-shadow: 0 0 0 .5px rgb(255 255 255 / .08), 0 10px 30px -8px rgb(0 0 0 / .7);
    --g-pop-shadow: 0 0 0 .5px rgb(255 255 255 / .1), 0 22px 60px -12px rgb(0 0 0 / .8);
  }
  @media not all /* dark is set by html[data-learner-theme], see learner-appearance.js */ {
    html:not([data-learner-theme="light"]) {
      --g-bg: #000000; --g-bg-2: #1C1C1E; --g-bg-3: #2C2C2E; --g-bg-plain: #000000; --g-bg-elevated: #1C1C1E;
      --g-label: #FFFFFF; --g-label-2: rgb(235 235 245 / .60); --g-label-3: rgb(235 235 245 / .30); --g-label-4: rgb(235 235 245 / .16);
      --g-ink: #F5F5F7; --g-ink-2: #A1A1A6;
      --g-fill: rgb(120 120 128 / .36); --g-fill-2: rgb(120 120 128 / .32); --g-fill-3: rgb(118 118 128 / .24); --g-fill-4: rgb(118 118 128 / .18);
      --g-sep: rgb(84 84 88 / .65); --g-sep-opaque: #38383A;
      --g-tint: #E8664D; --g-tint-hover: #F07A62; --g-tint-on: #FFFFFF; --g-tint-fill: #C8452C; --g-tint-fill-hover: #B53B24; --g-tint-soft: rgb(232 102 77 / .2);
      --g-red: #FF453A; --g-orange: #FF9F0A; --g-yellow: #FFD60A; --g-green: #30D158; --g-mint: #63E6E2; --g-teal: #40C8E0;
      --g-cyan: #64D2FF; --g-blue: #0A84FF; --g-indigo: #5E5CE6; --g-purple: #BF5AF2; --g-pink: #FF375F; --g-brown: #AC8E68; --g-gray: #8E8E93;
      --g-correct: #30D158; --g-correct-soft: rgb(48 209 88 / .16); --g-wrong: #FF6961; --g-wrong-soft: rgb(255 69 58 / .16); --g-warn: #FFB340;
      --g-glass-rgb: 28 28 30; --g-glass-ultrathin: .5; --g-glass-thin: .74; --g-glass-regular: .82;
      --g-glass-gloss: linear-gradient(transparent, transparent); /* no gloss in dark: elevation by step, never by gradient */
      --g-glass-rim: rgb(255 255 255 / .1); --g-glass-edge: rgb(0 0 0 / .4);
      --g-glass-shadow: 0 0 0 .5px rgb(255 255 255 / .08), 0 10px 30px -8px rgb(0 0 0 / .7);
      --g-pop-shadow: 0 0 0 .5px rgb(255 255 255 / .1), 0 22px 60px -12px rgb(0 0 0 / .8);
    }
  }
}

/* ─────────────────────────────── BASE ─────────────────────────────── */
@layer glass.base {
  :where(.mc-glass) *, :where(.mc-glass) *::before, :where(.mc-glass) *::after { box-sizing: border-box; }
  :where(.mc-glass) [hidden] { display: none !important; }
  :where(html:has(.mc-glass)) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--g-bg); }
  :where(body.mc-glass) {
    margin: 0; min-height: 100dvh; background: var(--g-bg); color: var(--g-label);
    font: 400 calc(var(--g-t-body) * var(--g-scale)) / 1.4118 var(--g-font); letter-spacing: -.022em;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
    font-feature-settings: "ss01" 0;
  }
  :where(.mc-glass) :is(h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd) { margin: 0; }
  :where(.mc-glass) :is(h1, h2, h3) { text-wrap: balance; }
  :where(.mc-glass) :is(img, svg, video) { display: block; max-width: 100%; }
  :where(.mc-glass) a { color: var(--g-tint); text-decoration: none; }
  :where(.mc-glass) a:hover { text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
  :where(.mc-glass) button { font: inherit; color: inherit; }
  :where(.mc-glass) :focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); outline-offset: 2px; border-radius: 6px; }
  :where(.mc-glass) ::selection { background: color-mix(in srgb, var(--g-tint) 26%, transparent); }
  :where(.mc-glass) .g-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :where(.mc-glass) .g-tnum { font-variant-numeric: tabular-nums; }
  :where(.mc-glass) .g-ic { width: 22px; height: 22px; stroke-width: 1.7; flex: none; }
  :where(.mc-glass) .g-ic-sm { width: 17px; height: 17px; stroke-width: 1.9; }
  :where(.mc-glass) .g-ic-lg { width: 28px; height: 28px; stroke-width: 1.6; }

  /* HIG text styles */
  :where(.mc-glass) .g-largetitle { font: 700 calc(var(--g-t-largetitle) * var(--g-scale))/1.2 var(--g-font-display); letter-spacing: -.021em; }
  :where(.mc-glass) .g-title1 { font: 700 calc(var(--g-t-title1) * var(--g-scale))/1.214 var(--g-font-display); letter-spacing: -.02em; }
  :where(.mc-glass) .g-title2 { font: 700 calc(var(--g-t-title2) * var(--g-scale))/1.27 var(--g-font-display); letter-spacing: -.018em; }
  :where(.mc-glass) .g-title3 { font: 600 calc(var(--g-t-title3) * var(--g-scale))/1.25 var(--g-font-display); letter-spacing: -.017em; }
  :where(.mc-glass) .g-headline { font: 600 calc(var(--g-t-headline) * var(--g-scale))/1.294 var(--g-font); letter-spacing: -.024em; }
  :where(.mc-glass) .g-body { font-size: calc(var(--g-t-body) * var(--g-scale)); line-height: 1.4118; }
  :where(.mc-glass) .g-callout { font-size: calc(var(--g-t-callout) * var(--g-scale)); line-height: 1.3125; letter-spacing: -.02em; }
  :where(.mc-glass) .g-subhead { font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.3333; letter-spacing: -.015em; }
  :where(.mc-glass) .g-footnote { font-size: calc(var(--g-t-footnote) * var(--g-scale)); line-height: 1.3846; letter-spacing: -.006em; }
  :where(.mc-glass) .g-caption { font-size: calc(var(--g-t-caption) * var(--g-scale)); line-height: 1.3333; letter-spacing: 0; }
  :where(.mc-glass) .g-2 { color: var(--g-label-2); }
  :where(.mc-glass) .g-3 { color: var(--g-label-3); }
  :where(.mc-glass) .g-tinted { color: var(--g-tint); }
  :where(.mc-glass) .g-strong { font-weight: 600; }
}

/* ─────────────────────────────── COMPONENTS ─────────────────────────────── */
@layer glass.components {
  /* Materials */
  :where(.mc-glass) :is(.g-mat-ultrathin, .g-mat-thin, .g-mat) {
    -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%);
    box-shadow: inset 0 1px 0 var(--g-glass-rim), inset 0 -1px 0 var(--g-glass-edge), var(--g-glass-shadow);
  }
  :where(.mc-glass) .g-mat-ultrathin { background: var(--g-glass-gloss), rgb(var(--g-glass-rgb) / var(--g-glass-ultrathin)); }
  :where(.mc-glass) .g-mat-thin { background: var(--g-glass-gloss), rgb(var(--g-glass-rgb) / var(--g-glass-thin)); }
  :where(.mc-glass) .g-mat { background: var(--g-glass-gloss), rgb(var(--g-glass-rgb) / var(--g-glass-regular)); }
  @media (prefers-reduced-transparency: reduce) {
    :where(.mc-glass) :is(.g-mat-ultrathin, .g-mat-thin, .g-mat) { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--g-bg-elevated); }
  }

  /* Buttons — capsules (HIG: filled, gray, plain, bordered; small/regular/large) */
  :where(.mc-glass) .g-btn {
    --h: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--h); padding: 0 20px;
    border: 0; border-radius: var(--g-r-capsule); cursor: pointer; white-space: nowrap; text-decoration: none !important;
    font: 600 calc(var(--g-t-body) * var(--g-scale))/1 var(--g-font); letter-spacing: -.022em;
    background: var(--g-fill-3); color: var(--g-tint);
    transition: transform var(--g-d-fast) var(--g-ease), background-color var(--g-d-fast) linear, opacity var(--g-d-fast) linear;
    -webkit-tap-highlight-color: transparent;
  }
  :where(.mc-glass) .g-btn:hover { background: var(--g-fill-2); }
  :where(.mc-glass) .g-btn:active { transform: scale(.97); }
  :where(.mc-glass) .g-btn-filled { background: var(--g-tint-fill, var(--g-tint)); color: var(--g-tint-on); }
  :where(.mc-glass) .g-btn-filled:hover { background: var(--g-tint-fill-hover, var(--g-tint-hover)); }
  :where(.mc-glass) .g-btn-label { color: var(--g-label); }
  :where(.mc-glass) .g-btn-plain { background: transparent; padding: 0 8px; }
  :where(.mc-glass) .g-btn-plain:hover { background: var(--g-fill-4); }
  :where(.mc-glass) .g-btn-destructive { color: var(--g-red); }
  :where(.mc-glass) .g-btn-filled.g-btn-destructive { background: var(--g-red); color: #fff; }
  :where(.mc-glass) .g-btn:disabled, :where(.mc-glass) .g-btn[aria-disabled="true"] { background: var(--g-fill-3); color: var(--g-label-3); cursor: default; transform: none; }
  :where(.mc-glass) .g-btn-sm { --h: 32px; padding: 0 14px; font-size: calc(var(--g-t-subhead) * var(--g-scale)); }
  :where(.mc-glass) .g-btn-lg { --h: 52px; padding: 0 28px; }
  :where(.mc-glass) .g-btn-wide { width: 100%; }
  :where(.mc-glass) .g-btn-icon { width: var(--h); padding: 0; }
  :where(.mc-glass) .g-btn[aria-pressed="true"] { color: var(--g-tint); background: var(--g-tint-soft); }

  /* Inset grouped list (Settings / Health idiom) */
  :where(.mc-glass) .g-section { display: grid; gap: 7px; }
  :where(.mc-glass) .g-section + .g-section { margin-top: 35px; }
  :where(.mc-glass) .g-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 16px; }
  :where(.mc-glass) .g-section-head h2 { font: 700 calc(var(--g-t-title3) * var(--g-scale))/1.25 var(--g-font-display); letter-spacing: -.017em; }
  :where(.mc-glass) .g-section-head .g-caps { font: 400 calc(var(--g-t-footnote) * var(--g-scale))/1.3 var(--g-font); color: var(--g-label-2); text-transform: uppercase; letter-spacing: 0; }
  :where(.mc-glass) .g-section-foot { padding: 0 16px; font-size: calc(var(--g-t-footnote) * var(--g-scale)); line-height: 1.38; color: var(--g-label-2); }
  :where(.mc-glass) .g-list { list-style: none; margin: 0; padding: 0; background: var(--g-bg-2); border-radius: var(--g-r-cell); overflow: hidden; }
  :where(.mc-glass) .g-cell {
    position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 16px; width: 100%;
    border: 0; background: transparent; text-align: left; color: inherit; text-decoration: none !important; font: inherit;
  }
  :where(.mc-glass) :is(a, button).g-cell { cursor: pointer; }
  :where(.mc-glass) :is(a, button).g-cell:hover { background: var(--g-fill-4); }
  :where(.mc-glass) :is(a, button).g-cell:active { background: var(--g-fill-3); }
  :where(.mc-glass) .g-list > li + li > .g-cell::before, :where(.mc-glass) .g-list > .g-cell + .g-cell::before {
    content: ""; position: absolute; top: 0; right: 0; left: var(--sep-inset, 16px); height: .5px; background: var(--g-sep);
  }
  :where(.mc-glass) .g-list.has-icons { --sep-inset: 60px; }
  :where(.mc-glass) .g-cell .g-cell-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
  :where(.mc-glass) .g-cell .g-cell-title { font-size: calc(var(--g-t-body) * var(--g-scale)); line-height: 1.29; }
  :where(.mc-glass) .g-cell .g-cell-sub { font-size: calc(var(--g-t-subhead) * var(--g-scale)); line-height: 1.33; color: var(--g-label-2); }
  :where(.mc-glass) .g-cell .g-cell-value { color: var(--g-label-2); font-size: calc(var(--g-t-body) * var(--g-scale)); white-space: nowrap; font-variant-numeric: tabular-nums; }
  :where(.mc-glass) .g-chev { width: 14px; height: 14px; color: var(--g-label-3); stroke-width: 2.6; flex: none; }
  /* Settings-style icon tile: coloured squircle with a white glyph */
  :where(.mc-glass) .g-tile-ic { width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--tile, var(--g-gray)); flex: none; }
  :where(.mc-glass) .g-tile-ic .g-ic { width: 19px; height: 19px; stroke-width: 2; }
  :where(.mc-glass) .g-tile-ic.lg { width: 44px; height: 44px; border-radius: 11px; }
  :where(.mc-glass) .g-tile-ic.lg .g-ic { width: 26px; height: 26px; }

  /* Cards & widgets (radius concentric to the window) */
  :where(.mc-glass) .g-card { background: var(--g-bg-2); border-radius: var(--g-r-card); padding: 16px; position: relative; }
  :where(.mc-glass) .g-card-head { display: flex; align-items: center; gap: 8px; font: 600 calc(var(--g-t-headline) * var(--g-scale))/1.25 var(--g-font); color: var(--g-label); }
  :where(.mc-glass) .g-card-head .g-ic { width: 19px; height: 19px; stroke-width: 2; color: var(--card-accent, var(--g-tint)); }
  :where(.mc-glass) .g-card-head .g-card-meta .g-ic { color: var(--g-label-3); width: 13px; height: 13px; }
  :where(.mc-glass) .g-card-head .g-card-meta { margin-left: auto; color: var(--g-label-2); font-weight: 400; display: inline-flex; align-items: center; gap: 4px; }
  :where(.mc-glass) .g-metric { font: 700 34px/1 var(--g-font-rounded); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  :where(.mc-glass) .g-metric small { font: 600 15px/1 var(--g-font); color: var(--g-label-2); letter-spacing: -.01em; margin-left: 3px; }

  /* Segmented control with sliding thumb */
  :where(.mc-glass) .g-seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: 9px; background: var(--g-fill-3); isolation: isolate; }
  :where(.mc-glass) .g-seg button { all: unset; position: relative; z-index: 1; cursor: pointer; padding: 6px 14px; text-align: center; border-radius: 7px; font: 500 calc(var(--g-t-footnote) * var(--g-scale))/1.3 var(--g-font); white-space: nowrap; }
  :where(.mc-glass) .g-seg button[aria-checked="true"] { font-weight: 600; }
  :where(.mc-glass) .g-seg button:focus-visible { outline: 3px solid color-mix(in srgb, var(--g-tint) 55%, transparent); }
  :where(.mc-glass) .g-seg .g-seg-thumb { position: absolute; z-index: 0; top: 2px; bottom: 2px; left: 0; width: 0; border-radius: 7px; background: var(--g-bg-elevated); box-shadow: 0 3px 8px rgb(0 0 0 / .12), 0 3px 1px rgb(0 0 0 / .04), 0 0 0 .5px rgb(0 0 0 / .04); transition: transform var(--g-d-move) var(--g-spring), width var(--g-d-move) var(--g-spring); }
  html[data-learner-theme="dark"] :where(.mc-glass) .g-seg .g-seg-thumb { background: #636366; }
  :where(.mc-glass) .g-seg.lg button { padding: 8px 18px; font-size: calc(var(--g-t-subhead) * var(--g-scale)); }

  /* Switch (iOS 51×31) */
  :where(.mc-glass) .g-switch { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 99px; background: var(--g-fill); position: relative; cursor: pointer; margin: 0; flex: none; transition: background-color var(--g-d-base) linear; }
  :where(.mc-glass) .g-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgb(0 0 0 / .15), 0 3px 1px rgb(0 0 0 / .06); transition: translate var(--g-d-move) var(--g-spring); }
  :where(.mc-glass) .g-switch:checked { background: var(--g-green); }
  :where(.mc-glass) .g-switch:checked::after { translate: 20px 0; }

  /* Fields */
  :where(.mc-glass) .g-field { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--g-r-control); border: 0; background: var(--g-fill-3); color: var(--g-label); font: inherit; font-size: calc(var(--g-t-body) * var(--g-scale)); }
  :where(.mc-glass) .g-field::placeholder { color: var(--g-label-3); }
  :where(.mc-glass) .g-field:focus { outline: 3px solid color-mix(in srgb, var(--g-tint) 45%, transparent); outline-offset: 0; }
  :where(.mc-glass) .g-search { position: relative; display: flex; align-items: center; }
  :where(.mc-glass) .g-search .g-ic { position: absolute; left: 10px; width: 17px; height: 17px; color: var(--g-label-2); pointer-events: none; }
  :where(.mc-glass) .g-search .g-field { padding-left: 34px; min-height: 36px; border-radius: 10px; font-size: calc(var(--g-t-body) * var(--g-scale)); }
  :where(.mc-glass) .g-label { display: block; font: 400 calc(var(--g-t-footnote) * var(--g-scale))/1.3 var(--g-font); color: var(--g-label-2); text-transform: uppercase; margin: 0 0 7px 16px; }

  /* Range slider */
  :where(.mc-glass) .g-range { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 0; }
  :where(.mc-glass) .g-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--g-tint) var(--p, 50%), var(--g-fill) var(--p, 50%)); }
  :where(.mc-glass) .g-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; margin-top: -12px; box-shadow: 0 .5px 4px rgb(0 0 0 / .12), 0 6px 13px rgb(0 0 0 / .12); }
  :where(.mc-glass) .g-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--g-fill); }
  :where(.mc-glass) .g-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--g-tint); }
  :where(.mc-glass) .g-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 .5px 4px rgb(0 0 0 / .12), 0 6px 13px rgb(0 0 0 / .12); }

  /* Badges, chips, tokens */
  :where(.mc-glass) .g-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--g-red); color: #fff; font: 600 13px/1 var(--g-font); font-variant-numeric: tabular-nums; }
  :where(.mc-glass) .g-badge.quiet { background: var(--g-fill-2); color: var(--g-label-2); }
  :where(.mc-glass) .g-chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--g-r-capsule); background: var(--g-fill-3); color: var(--g-label); font: 500 calc(var(--g-t-footnote) * var(--g-scale))/1 var(--g-font); white-space: nowrap; }
  :where(.mc-glass) .g-chip .g-ic { width: 14px; height: 14px; stroke-width: 2.2; }
  :where(.mc-glass) .g-chip.tint { background: var(--g-tint-soft); color: var(--g-tint); }
  :where(.mc-glass) .g-chip.sample { background: transparent; box-shadow: inset 0 0 0 1px var(--g-sep); color: var(--g-label-2); }
  :where(.mc-glass) .g-chip.proposed { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-indigo) 50%, transparent); color: var(--g-indigo); }

  /* Progress */
  :where(.mc-glass) .g-progress { height: 4px; border-radius: 2px; background: var(--g-fill-2); overflow: hidden; }
  :where(.mc-glass) .g-progress > i { display: block; height: 100%; width: var(--p, 0%); background: var(--bar, var(--g-tint)); border-radius: inherit; transition: width var(--g-d-move) var(--g-spring-smooth); }
  :where(.mc-glass) .g-gauge { --size: 44px; --w: 5px; width: var(--size); height: var(--size); border-radius: 50%; background: conic-gradient(var(--bar, var(--g-tint)) calc(var(--p, 0) * 1%), var(--g-fill-2) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--w)), #000 calc(100% - var(--w) + .5px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--w)), #000 calc(100% - var(--w) + .5px)); }

  /* Swift Charts–style bar chart */
  :where(.mc-glass) .g-chart { display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); align-items: end; gap: 6px; height: 120px; position: relative; margin-top: 18px; }
  :where(.mc-glass) .g-chart > span { position: relative; justify-self: center; display: block; width: min(14px, 60%); height: calc(var(--v) * 1%); min-height: 2px; border-radius: 3px; background: var(--bar, var(--g-tint)); }
  :where(.mc-glass) .g-chart > span[data-label]::after { content: attr(data-label); position: absolute; bottom: calc(100% + 4px); left: 50%; translate: -50% 0; font: 600 11px/1 var(--g-font); color: var(--g-label); white-space: nowrap; }
  :where(.mc-glass) .g-chart .g-chart-goal { position: absolute; left: 0; right: 0; bottom: calc(var(--goal, 50) * 1%); border-top: 1px dashed var(--g-label-2); pointer-events: none; }
  :where(.mc-glass) .g-chart .g-chart-goal::after { content: attr(data-label); position: absolute; right: 0; bottom: 3px; font: 500 11px/1 var(--g-font); color: var(--g-label-2); }
  :where(.mc-glass) .g-chart > span.muted { background: var(--g-fill); }
  :where(.mc-glass) .g-chart-axis { display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: 6px; margin-top: 6px; font-size: 11px; color: var(--g-label-2); text-align: center; }

  /* Redacted skeleton (SwiftUI .redacted(reason: .placeholder)) */
  :where(.mc-glass) .g-redacted { color: transparent !important; background: var(--g-fill-3); border-radius: 5px; animation: g-shimmer 1.6s ease-in-out infinite; user-select: none; }
  @keyframes g-shimmer { 50% { opacity: .55; } }

  /* Empty / unavailable state (ContentUnavailableView) */
  :where(.mc-glass) .g-empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 24px; }
  :where(.mc-glass) .g-empty .g-ic { width: 44px; height: 44px; stroke-width: 1.4; color: var(--g-label-3); margin-bottom: 6px; }
  :where(.mc-glass) .g-empty h3 { font: 700 calc(var(--g-t-title3) * var(--g-scale))/1.25 var(--g-font-display); }
  :where(.mc-glass) .g-empty p { color: var(--g-label-2); max-width: 36ch; }

  /* Inline banner */
  :where(.mc-glass) .g-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--g-r-cell); background: var(--g-bg-2); }
  :where(.mc-glass) .g-banner.warn { background: color-mix(in srgb, var(--g-orange) 12%, var(--g-bg-2)); }
  :where(.mc-glass) .g-banner.info { background: color-mix(in srgb, var(--g-blue) 9%, var(--g-bg-2)); }
  :where(.mc-glass) .g-banner .g-ic { margin-top: 1px; }

  /* Key caps */
  :where(.mc-glass) kbd, :where(.mc-glass) .g-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--g-bg-2); box-shadow: inset 0 0 0 .5px var(--g-sep), 0 1px 0 var(--g-sep); font: 500 12px/1 var(--g-font); color: var(--g-label-2); }

  /* Sheet (dialog) — detents on phone, form sheet on iPad/desktop */
  :where(.mc-glass) dialog.g-sheet {
    position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 100%; max-height: none; height: var(--detent-h, 92dvh);
    padding: 0; border: 0; border-radius: 38px 38px 0 0; background: var(--g-bg-elevated); color: var(--g-label);
    box-shadow: var(--g-pop-shadow); overflow: hidden; display: none; flex-direction: column;
    translate: 0 var(--drag, 0px);
  }
  :where(.mc-glass) dialog.g-sheet[open] { display: flex; animation: g-sheet-in var(--g-d-move) var(--g-spring-smooth); }
  :where(.mc-glass) dialog.g-sheet[data-detent="medium"] { --detent-h: 52dvh; }
  :where(.mc-glass) dialog.g-sheet.grouped { background: var(--g-bg); }
  :where(.mc-glass) dialog.g-sheet::backdrop { background: rgb(0 0 0 / .28); animation: g-fade var(--g-d-base) linear; }
  @keyframes g-sheet-in { from { translate: 0 100%; } }
  @keyframes g-fade { from { opacity: 0; } }
  :where(.mc-glass) .g-sheet-grab { flex: none; display: grid; place-items: center; height: 18px; cursor: grab; touch-action: none; border: 0; background: transparent; width: 100%; }
  :where(.mc-glass) .g-sheet-grab::before { content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--g-fill); }
  :where(.mc-glass) .g-sheet-bar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 16px 10px; }
  :where(.mc-glass) .g-sheet-bar .g-sheet-title { font: 600 calc(var(--g-t-headline) * var(--g-scale))/1.3 var(--g-font); text-align: center; }
  :where(.mc-glass) .g-sheet-bar > :first-child { justify-self: start; }
  :where(.mc-glass) .g-sheet-bar > :last-child { justify-self: end; }
  :where(.mc-glass) .g-sheet-body { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 4px 16px max(24px, env(safe-area-inset-bottom)); }
  @media (min-width: 768px) {
    :where(.mc-glass) dialog.g-sheet { inset: 0; margin: auto; width: min(var(--sheet-w, 620px), calc(100vw - 48px)); height: auto; max-height: min(var(--sheet-h, 720px), calc(100dvh - 64px)); border-radius: var(--g-r-window); translate: none; }
    :where(.mc-glass) dialog.g-sheet .g-sheet-body { min-height: 0; }
    :where(.mc-glass) dialog.g-sheet[open] { animation: g-form-in var(--g-d-move) var(--g-spring); }
    :where(.mc-glass) dialog.g-sheet[data-detent="medium"] { --detent-h: auto; }
    :where(.mc-glass) .g-sheet-grab { display: none; }
    :where(.mc-glass) .g-sheet-bar { padding-top: 14px; }
  }
  @keyframes g-form-in { from { opacity: 0; scale: .96; translate: 0 12px; } }

  /* Popover menu (iOS/macOS context menu) */
  :where(.mc-glass) .g-menu {
    position: fixed; z-index: 200; min-width: 230px; max-width: 290px; padding: 6px; border-radius: 14px; display: none;
    transform-origin: var(--ox, 0) var(--oy, 0);
  }
  :where(.mc-glass) .g-menu.open { display: block; animation: g-menu-in 320ms var(--g-spring); }
  @keyframes g-menu-in { from { opacity: 0; scale: .7; } }
  :where(.mc-glass) .g-menu button, :where(.mc-glass) .g-menu a { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 9px; font: 400 calc(var(--g-t-body) * var(--g-scale))/1.25 var(--g-font); color: var(--g-label); }
  :where(.mc-glass) .g-menu :is(button, a):hover, :where(.mc-glass) .g-menu :is(button, a):focus-visible { background: var(--g-fill-3); }
  :where(.mc-glass) .g-menu :is(button, a) .g-ic { margin-left: auto; width: 18px; height: 18px; color: var(--g-label); }
  :where(.mc-glass) .g-menu .destructive, :where(.mc-glass) .g-menu .destructive .g-ic { color: var(--g-red); }
  :where(.mc-glass) .g-menu hr { border: 0; height: 6px; margin: 4px -6px; background: var(--g-fill-4); }
  :where(.mc-glass) .g-menu .g-menu-title { padding: 6px 12px 4px; font-size: 13px; color: var(--g-label-2); }

  /* HUD (transient confirmation) */
  :where(.mc-glass) .g-hud { position: fixed; z-index: 300; left: 50%; top: max(18px, env(safe-area-inset-top)); translate: -50% 0; display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px 11px 14px; border-radius: var(--g-r-capsule); font: 600 15px/1.2 var(--g-font); color: var(--g-label); animation: g-hud 2.4s var(--g-spring) forwards; pointer-events: none; }
  :where(.mc-glass) .g-hud .g-ic { color: var(--g-green); }
  @keyframes g-hud { 0% { opacity: 0; translate: -50% -14px; scale: .9; } 12%, 82% { opacity: 1; translate: -50% 0; scale: 1; } 100% { opacity: 0; translate: -50% -6px; } }

  /* Apple Intelligence–style edge glow: only while generating */
  :where(.mc-glass) .g-thinking { position: relative; }
  :where(.mc-glass) .g-thinking::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--g-a, 0deg), #0894FF, #C959DD, #FF2E54, #FF9004, #0894FF); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: g-spin 1.8s linear infinite; }
  @property --g-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  @keyframes g-spin { to { --g-a: 360deg; } }

  /* App-icon squircle (brand presentation) */
  :where(.mc-glass) .g-appicon { width: var(--s, 64px); height: var(--s, 64px); border-radius: calc(var(--s, 64px) * .225); background: linear-gradient(180deg, #FFFFFF, #F2EFEC); display: grid; place-items: center; box-shadow: 0 0 0 .5px rgb(0 0 0 / .08), 0 8px 20px -6px rgb(0 0 0 / .2); }
  :where(.mc-glass) .g-appicon img { width: 62%; height: auto; }
  :where(.mc-glass) .g-appicon .g-logo-dark { display: none !important; }
  :where(.mc-glass) .g-appicon .g-logo-light { display: block !important; }
  

  /* The brain and medcue name form one transparent, proportional logo. */
  :where(.mc-glass) .g-logo { display: block; height: 60px; width: 192px; object-fit: contain; flex: none; }
  :where(.mc-glass) .g-logo-dark { display: none; }
  html[data-learner-theme="dark"] :where(.mc-glass) .g-logo-light { display: none; }
  html[data-learner-theme="dark"] :where(.mc-glass) .g-logo-dark { display: block; }
  @media not all /* dark is set by html[data-learner-theme], see learner-appearance.js */ {
    html:not([data-learner-theme="light"]) :where(.mc-glass) .g-logo-light { display: none; }
    html:not([data-learner-theme="light"]) :where(.mc-glass) .g-logo-dark { display: block; }
    html:not([data-learner-theme="light"]) :where(.mc-glass) .g-seg .g-seg-thumb { background: #636366; }
  }
}

/* ─────────────────────────────── SHELL ─────────────────────────────── */
@layer glass.shell {
  /* App frame: inset glass sidebar ≥1024, floating tab bar below */
  :where(.mc-glass) .g-app { min-height: 100dvh; }
  :where(.mc-glass) .g-sidebar { display: none; }
  :where(.mc-glass) .g-main { min-width: 0; padding-bottom: calc(var(--g-bar-inset) + env(safe-area-inset-bottom)); }
  :where(.mc-glass) .g-bottom-edge { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; height: calc(96px + env(safe-area-inset-bottom)); pointer-events: none; background: linear-gradient(transparent, var(--g-bg) 70%); }
  @media (min-width: 1024px) { :where(.mc-glass) .g-bottom-edge { display: none; } }
  :where(.mc-glass) .g-content { max-width: var(--g-content-max); margin: 0 auto; padding: 0 var(--g-gutter); }
  :where(.mc-glass) .g-content.narrow { max-width: 760px; }

  /* Navigation bar: inline title fades in when the large title scrolls away */
  :where(.mc-glass) .g-navbar {
    position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
    height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
    background: transparent; transition: background-color var(--g-d-base) linear;
  }
  :where(.mc-glass) .g-navbar::after { content: ""; position: absolute; inset: 0 0 -1px; z-index: -1; opacity: 0; transition: opacity var(--g-d-base) linear;
    background: rgb(var(--g-glass-rgb) / var(--g-glass-regular)); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: 0 .5px 0 var(--g-sep); }
  :where(.mc-glass) .g-navbar.is-scrolled::after { opacity: 1; }
  :where(.mc-glass) .g-navbar .g-navbar-title { font: 600 calc(var(--g-t-headline) * var(--g-scale))/1.2 var(--g-font); opacity: 0; translate: 0 6px; transition: opacity var(--g-d-base) linear, translate var(--g-d-base) var(--g-ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
  :where(.mc-glass) .g-navbar.is-scrolled .g-navbar-title { opacity: 1; translate: 0 0; }
  :where(.mc-glass) .g-navbar .g-nav-lead { display: flex; align-items: center; gap: 4px; justify-self: start; }
  :where(.mc-glass) .g-navbar .g-nav-trail { display: flex; align-items: center; gap: 6px; justify-self: end; }
  :where(.mc-glass) .g-navbtn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: var(--g-r-capsule); background: transparent; color: var(--g-tint); cursor: pointer; font: 400 calc(var(--g-t-body) * var(--g-scale))/1 var(--g-font); text-decoration: none !important; }
  :where(.mc-glass) .g-navbtn:hover { background: var(--g-fill-4); }
  :where(.mc-glass) .g-navbtn .g-ic { width: 22px; height: 22px; }
  :where(.mc-glass) .g-navbtn.glass { height: 40px; min-width: 40px; color: var(--g-label); }
  :where(.mc-glass) .g-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #A2A2A8, #85858B); color: #fff; font: 600 14px/1 var(--g-font-rounded); }

  :where(.mc-glass) .g-largehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 2px 0 14px; }
  :where(.mc-glass) .g-largehead .g-eyebrow { font: 600 calc(var(--g-t-footnote) * var(--g-scale))/1.3 var(--g-font); color: var(--g-label-2); text-transform: uppercase; letter-spacing: .01em; margin-bottom: 2px; }
  :where(.mc-glass) .g-largehead .g-largetitle { min-width: 0; }

  /* Phone tab bar (floating Liquid Glass capsule + separate search orb) */
  :where(.mc-glass) .g-tabbar { position: fixed; z-index: 60; left: 50%; bottom: max(18px, calc(env(safe-area-inset-bottom) + 6px)); translate: -50% 0; display: flex; align-items: center; gap: 10px; }
  :where(.mc-glass) .g-tabbar-pill { display: flex; padding: 4px; border-radius: var(--g-r-capsule); }
  :where(.mc-glass) .g-tab { display: grid; justify-items: center; gap: 1px; min-width: 70px; padding: 6px 10px 5px; border-radius: var(--g-r-capsule); color: var(--g-label); text-decoration: none !important; font: 600 10px/1.15 var(--g-font); letter-spacing: .01em; transition: min-width var(--g-d-move) var(--g-spring), padding var(--g-d-move) var(--g-spring), background-color var(--g-d-fast) linear; }
  :where(.mc-glass) .g-tab .g-ic { width: 25px; height: 25px; stroke-width: 1.7; }
  :where(.mc-glass) .g-tab[aria-current="page"] { color: var(--g-tint); background: var(--g-fill-3); }
  :where(.mc-glass) .g-tabbar-search { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--g-label); border: 0; cursor: pointer; }
  :where(.mc-glass) .g-tabbar.is-min .g-tab:not([aria-current="page"]) { min-width: 0; width: 0; padding: 0; overflow: hidden; opacity: 0; }
  :where(.mc-glass) .g-tabbar.is-min .g-tab[aria-current="page"] { min-width: 56px; }

  @media (min-width: 1024px) {
    /* Block from first paint: the sidebar is fixed, so a grid here squeezed the page into the sidebar column until topnav.js ran. */
    :where(.mc-glass) .g-app { display: block; }
    :where(.mc-glass) .g-tabbar { display: none; }
    :where(.mc-glass) .g-main { padding-bottom: 64px; }
    :where(.mc-glass) .g-sidebar {
      display: flex; flex-direction: column; position: sticky; top: 10px; height: calc(100dvh - 20px); margin: 10px 0 10px 10px;
      border-radius: var(--g-r-window); padding: 12px 10px 10px; overflow: hidden;
    }
    :where(.mc-glass) .g-navbar { padding-left: 24px; padding-right: 24px; }
    :where(.mc-glass) .g-content { padding: 0 36px; }
    :where(.mc-glass) .g-navbar .g-hide-wide { display: none; }
  }
  :where(.mc-glass) .g-side-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 12px; }
  :where(.mc-glass) .g-side-search { margin: 0 2px 10px; }
  :where(.mc-glass) .g-side-search button { all: unset; box-sizing: border-box; cursor: text; display: flex; align-items: center; gap: 7px; width: 100%; height: 34px; padding: 0 10px; border-radius: 10px; background: var(--g-fill-3); color: var(--g-label-2); font-size: 15px; }
  :where(.mc-glass) .g-side-search kbd { margin-left: auto; height: 20px; min-width: 20px; font-size: 11px; background: transparent; box-shadow: inset 0 0 0 .5px var(--g-sep); }
  :where(.mc-glass) .g-side-scroll { flex: 1; overflow: auto; margin: 0 -4px; padding: 0 4px; }
  :where(.mc-glass) .g-side-group { margin-bottom: 14px; }
  :where(.mc-glass) .g-side-group > p { font: 700 calc(var(--g-t-footnote) * var(--g-scale))/1.2 var(--g-font); color: var(--g-label-2); padding: 6px 10px 4px; display: flex; justify-content: space-between; }
  :where(.mc-glass) .g-side-link { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 10px; border-radius: 10px; color: var(--g-label); text-decoration: none !important; font: 400 calc(var(--g-t-body) * var(--g-scale))/1.2 var(--g-font); letter-spacing: -.02em; }
  :where(.mc-glass) .g-side-link:hover { background: var(--g-fill-4); }
  :where(.mc-glass) .g-side-link .g-ic { width: 21px; height: 21px; color: var(--g-tint); stroke-width: 1.8; }
  :where(.mc-glass) .g-side-link .g-side-count { margin-left: auto; font-size: 15px; color: var(--g-label-2); font-variant-numeric: tabular-nums; }
  :where(.mc-glass) .g-side-link[aria-current="page"] { background: var(--g-fill-3); color: var(--g-tint); font-weight: 600; }
  :where(.mc-glass) .g-side-link[aria-current="page"] .g-side-count { color: var(--g-tint); }
  :where(.mc-glass) .g-side-link[aria-disabled="true"] { color: var(--g-label-3); cursor: default; }
  :where(.mc-glass) .g-side-link[aria-disabled="true"] .g-ic { color: var(--g-label-3); }
  :where(.mc-glass) .g-side-foot { border-top: .5px solid var(--g-sep); padding-top: 8px; margin-top: 4px; display: grid; gap: 2px; }
  :where(.mc-glass) .g-side-me { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; color: var(--g-label); text-decoration: none !important; }
  :where(.mc-glass) .g-side-me:hover { background: var(--g-fill-4); }
  :where(.mc-glass) .g-side-me .g-avatar { width: 34px; height: 34px; }
  :where(.mc-glass) .g-side-me .g-cell-main { display: grid; gap: 0; min-width: 0; }

  /* Spotlight search */
  :where(.mc-glass) dialog.g-spotlight { position: fixed; inset: 12vh 0 auto; margin: 0 auto; width: min(680px, calc(100vw - 24px)); max-height: 70dvh; padding: 0; border: 0; border-radius: 22px; color: var(--g-label); overflow: hidden; display: none; flex-direction: column; background: rgb(var(--g-glass-rgb) / .86); -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); box-shadow: var(--g-pop-shadow); }
  :where(.mc-glass) dialog.g-spotlight[open] { display: flex; animation: g-form-in 360ms var(--g-spring); }
  :where(.mc-glass) dialog.g-spotlight::backdrop { background: rgb(0 0 0 / .18); }
  :where(.mc-glass) .g-spot-in { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 60px; }
  :where(.mc-glass) .g-spot-in .g-ic { width: 22px; height: 22px; color: var(--g-label-2); }
  :where(.mc-glass) .g-spot-in input { flex: 1; border: 0; background: transparent; outline: none; font: 400 22px/1 var(--g-font-display); letter-spacing: -.02em; color: var(--g-label); }
  :where(.mc-glass) .g-spot-results { overflow: auto; padding: 6px 8px 10px; border-top: .5px solid var(--g-sep); }
  :where(.mc-glass) .g-spot-results .g-spot-h { font: 600 12px/1 var(--g-font); color: var(--g-label-2); padding: 10px 10px 6px; }
  :where(.mc-glass) .g-spot-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; color: var(--g-label); text-decoration: none !important; cursor: pointer; }
  :where(.mc-glass) .g-spot-item[aria-selected="true"] { background: var(--g-tint); color: var(--g-tint-on); }
  :where(.mc-glass) .g-spot-item[aria-selected="true"] .g-2 { color: color-mix(in srgb, var(--g-tint-on) 75%, transparent); }
  :where(.mc-glass) .g-spot-item .g-tile-ic { width: 28px; height: 28px; }
  :where(.mc-glass) .g-spot-item .g-cell-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
  :where(.mc-glass) .g-spot-in input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

  /* ── Marketing chrome (apple.com grammar) ── */
  :where(.mc-glass.g-site) { background: var(--g-bg-plain); color: var(--g-ink); }
  /* Marketing: one translucent bar (Medcue is one product, so no apple.com-style second "local" bar) */
  :where(.mc-glass) .g-gnav { position: sticky; top: 0; z-index: 50; background: rgb(var(--g-glass-rgb) / .8); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 .5px 0 var(--g-sep); }
  :where(.mc-glass) .g-gnav-in { max-width: 1024px; height: 76px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
  :where(.mc-glass) .g-gnav a { color: var(--g-ink); text-decoration: none !important; white-space: nowrap; }
  :where(.mc-glass) .g-gnav .g-logo { height: 60px; }
  :where(.mc-glass) .g-gnav-logo { display: inline-flex; justify-self: start; }
  :where(.mc-glass) .g-gnav-links { display: flex; gap: 30px; }
  :where(.mc-glass) .g-gnav-links a, :where(.mc-glass) .g-gnav-signin { font: 400 13px/1 var(--g-font); letter-spacing: -.01em; opacity: .8; transition: opacity .15s; }
  :where(.mc-glass) .g-gnav-links a:hover, :where(.mc-glass) .g-gnav-signin:hover, :where(.mc-glass) .g-gnav-links a[aria-current="page"] { opacity: 1; }
  :where(.mc-glass) .g-gnav-links a[aria-current="page"] { font-weight: 600; }
  :where(.mc-glass) .g-gnav-end { justify-self: end; display: flex; align-items: center; gap: 18px; }
  :where(.mc-glass) .g-gnav-m, :where(.mc-glass) .g-gnav-menu { display: none; }
  :where(.mc-glass) .g-gnav-menu { width: 36px; height: 36px; margin-right: -8px; border: 0; border-radius: 50%; background: none; color: var(--g-ink); place-items: center; cursor: pointer; }
  :where(.mc-glass) .g-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 980px; background: var(--g-tint-fill, var(--g-tint)); color: var(--g-tint-on) !important; font: 400 12px/1 var(--g-font); text-decoration: none !important; white-space: nowrap; }
  :where(.mc-glass) .g-pill:hover { background: var(--g-tint-fill-hover, var(--g-tint-hover)); }
  :where(.mc-glass) .g-mbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 980px; font: 400 17px/1 var(--g-font); letter-spacing: -.022em; text-decoration: none !important; white-space: nowrap; border: 0; cursor: pointer; }
  :where(.mc-glass) .g-mbtn.primary { background: var(--g-tint); color: var(--g-tint-on); }
  :where(.mc-glass) .g-mbtn.primary:hover { background: var(--g-tint-hover); }
  :where(.mc-glass) .g-mbtn.secondary { background: transparent; color: var(--g-tint); box-shadow: inset 0 0 0 1px var(--g-tint); }
  :where(.mc-glass) .g-mlink { color: var(--g-tint); font-size: 17px; }
  :where(.mc-glass) .g-mlink::after { content: " ›"; }
  :where(.mc-glass) .g-mwrap { max-width: 1024px; margin: 0 auto; padding: 0 22px; }
  :where(.mc-glass) .g-msection { padding: 100px 0; }
  :where(.mc-glass) .g-msection.alt { background: var(--g-bg); }
  :where(.mc-glass) .g-m-eyebrow { font: 600 21px/1.19 var(--g-font-display); letter-spacing: .011em; color: var(--g-tint); margin-bottom: 8px; }
  :where(.mc-glass) .g-m-hero { font: 600 var(--g-m-hero)/1.05 var(--g-font-display); letter-spacing: -.015em; }
  :where(.mc-glass) .g-m-h1 { font: 600 var(--g-m-h1)/1.07 var(--g-font-display); letter-spacing: -.005em; }
  :where(.mc-glass) .g-m-h2 { font: 600 var(--g-m-h2)/1.1 var(--g-font-display); letter-spacing: 0; }
  :where(.mc-glass) .g-m-h3 { font: 600 var(--g-m-h3)/1.14 var(--g-font-display); letter-spacing: .007em; }
  :where(.mc-glass) .g-m-h4 { font: 600 var(--g-m-h4)/1.19 var(--g-font-display); letter-spacing: .011em; }
  :where(.mc-glass) .g-m-lede { font: 400 var(--g-m-lede)/1.38 var(--g-font-display); letter-spacing: .011em; color: var(--g-ink-2); }
  :where(.mc-glass) .g-m-body { font: 400 17px/1.47 var(--g-font); letter-spacing: -.022em; color: var(--g-ink-2); }
  :where(.mc-glass) .g-m-body strong { color: var(--g-ink); font-weight: 600; }
  :where(.mc-glass) sup.g-fn { font-size: .6em; top: -.5em; vertical-align: initial; position: relative; }
  :where(.mc-glass) sup.g-fn a { color: inherit; }
  :where(.mc-glass) .g-tile { background: var(--g-bg); border-radius: 28px; padding: 36px; overflow: hidden; position: relative; }
  :where(.mc-glass.g-site) .g-msection.alt .g-tile { background: var(--g-bg-plain); }
  :where(.mc-glass) .g-footer { background: var(--g-bg); color: var(--g-ink-2); font: 400 12px/1.33 var(--g-font); letter-spacing: -.01em; padding: 18px 0 22px; }
  :where(.mc-glass) .g-footer .g-mwrap > * + * { margin-top: 12px; }
  :where(.mc-glass) .g-footer a { color: var(--g-ink); opacity: .82; }
  :where(.mc-glass) .g-footnotes { padding-bottom: 14px; border-bottom: .5px solid var(--g-sep); }
  :where(.mc-glass) .g-footnotes ol { padding-left: 16px; display: grid; gap: 8px; }
  :where(.mc-glass) .g-footdir { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 16px 0; border-bottom: .5px solid var(--g-sep); }
  :where(.mc-glass) .g-footdir h3 { font: 600 12px/1.33 var(--g-font); color: var(--g-ink); margin-bottom: 8px; }
  :where(.mc-glass) .g-footdir ul { list-style: none; padding: 0; display: grid; gap: 8px; }
  :where(.mc-glass) .g-footdir a { color: var(--g-ink-2); opacity: 1; }
  :where(.mc-glass) .g-footlegal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
  :where(.mc-glass) .g-crumbs { display: flex; gap: 8px; align-items: center; padding: 10px 0; border-bottom: .5px solid var(--g-sep); }
  :where(.mc-glass) .g-crumbs a { opacity: .82; }
  @media (max-width: 833px) {
    :where(.mc-glass) .g-gnav-in { display: flex; justify-content: space-between; height: 76px; }
    :where(.mc-glass) .g-gnav .g-logo { width: clamp(104px, calc(100vw - 216px), 160px); height: auto; }
    :where(.mc-glass) .g-gnav-end { gap: 12px; }
    :where(.mc-glass) .g-gnav-signin { display: none; }
    :where(.mc-glass) .g-gnav-menu { display: grid; }
    :where(.mc-glass) .g-gnav-links { display: none; position: absolute; inset: 76px 0 auto; flex-direction: column; gap: 0; padding: 6px 22px 18px; background: var(--g-bg-plain, var(--g-bg)); min-height: calc(100dvh - 76px); box-shadow: 0 .5px 0 var(--g-sep), 0 18px 30px -18px rgb(0 0 0 / .25); }
    :where(.mc-glass) .g-gnav.open { background: var(--g-bg-plain); box-shadow: none; }
    :where(.mc-glass) .g-gnav.open .g-gnav-links { display: flex; }
    :where(.mc-glass) .g-gnav-links a { font: 600 22px/1.2 var(--g-font-display); letter-spacing: .005em; opacity: 1; padding: 12px 0; border-bottom: .5px solid var(--g-sep); }
    :where(.mc-glass) .g-gnav-links a:last-child { border-bottom: 0; }
    :where(.mc-glass) .g-gnav-m { display: block; }
    :where(.mc-glass) .g-msection { padding: 64px 0; }
    :where(.mc-glass) .g-tile { padding: 26px; border-radius: 24px; }
    :where(.mc-glass) .g-footdir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (prefers-reduced-motion: reduce) {
    :where(.mc-glass) *, :where(.mc-glass) *::before, :where(.mc-glass) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }
}
@layer glass.components { :where(.mc-glass) dialog:focus { outline: none; } }

/* Unlayered guard: hosts that inject plain `body {}` styles would otherwise beat every layer above */
html:has(body.mc-glass), body.mc-glass { background: var(--g-bg); color: var(--g-label); }

/* Glass learner chrome (topnav.js). Fixed sidebar >=1024, floating tab bar below.
   Fold into glass.css at the end of the build or keep loading alongside it. */
@layer glass.shell {
  :where(.mc-glass) .g-side-top a { display: inline-flex; }
  :where(.mc-glass) button.g-side-me,
  :where(.mc-glass) button.g-side-link,
  :where(.mc-glass) .g-side-search button { font: inherit; text-align: left; }
  :where(.mc-glass) button.g-side-me { border: 0; background: none; width: 100%; cursor: pointer; }
  :where(.mc-glass) button.g-side-link { border: 0; background: none; width: 100%; cursor: pointer; }
  :where(.mc-glass) .g-side-me .g-cell-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :where(.mc-glass) .g-side-upgrade { color: var(--g-tint); font-weight: 600; }
  :where(.mc-glass) .g-side-count[hidden] { display: none; }

  :where(.mc-glass) .skip-link { position: fixed; z-index: 300; inset: 8px auto auto 8px; padding: 10px 14px; border-radius: var(--g-r-capsule, 999px); background: var(--g-tint-fill, var(--g-tint)); color: var(--g-tint-on, #fff); font: 600 15px/1 var(--g-font); text-decoration: none; translate: 0 -200%; }
  :where(.mc-glass) .skip-link:focus { translate: 0 0; }

  /* Account menu extras */
  :where(.mc-glass) .g-menu .g-menu-id { display: grid; gap: 1px; padding: 8px 12px 6px; }
  :where(.mc-glass) .g-menu .g-menu-id b { font-weight: 600; color: var(--g-label); overflow-wrap: anywhere; }
  :where(.mc-glass) .g-menu .g-menu-id span { font-size: 12px; color: var(--g-label-2); overflow-wrap: anywhere; }
  :where(.mc-glass) .g-menu [data-appearance-set] .g-ic { visibility: hidden; color: var(--g-tint); }
  :where(.mc-glass) .g-menu [data-appearance-set][aria-checked="true"] .g-ic { visibility: visible; }
  :where(.mc-glass) .g-menu .g-menu-progress { padding: 4px 12px 8px; display: grid; gap: 6px; font-size: 13px; color: var(--g-label-2); }
  :where(.mc-glass) .g-menu .g-menu-progress[hidden] { display: none; }
  :where(.mc-glass) .g-menu .tnav-daily-progress__head { display: flex; justify-content: space-between; gap: 12px; }
  :where(.mc-glass) .g-menu .tnav-daily-progress__head strong { color: var(--g-label); font-weight: 600; font-variant-numeric: tabular-nums; }
  :where(.mc-glass) .g-menu .tnav-daily-progress__bar { color: var(--g-green); }
  :where(.mc-glass) .g-menu .tnav-daily-progress__svg { display: block; width: 100%; height: 6px; }
  :where(.mc-glass) .g-menu .tnav-daily-progress__track { fill: var(--g-fill-3); }
  :where(.mc-glass) .g-menu .tnav-daily-progress__fill { fill: currentColor; }
  :where(.mc-glass) .g-menu .tnav-daily-progress__loading { height: 6px; border-radius: 3px; background: var(--g-fill-3); }

  /* Desktop: the sidebar is fixed so pages need no grid wrapper. */
  @media (min-width: 1024px) {
    body.mc-glass.g-shell { padding-left: calc(var(--g-sidebar-w) + 20px); }
    /* Reserve the sidebar before topnav.js mounts it, so shell pages do not jump sideways on load. */
    body.mc-glass:not(.g-shell):not(.mc-focus):not(.q-shell):not([data-focus="true"]):has(> #topnav) { padding-left: calc(var(--g-sidebar-w) + 20px); }
    body.mc-glass.g-shell .g-sidebar { position: fixed; top: 10px; left: 10px; width: var(--g-sidebar-w); margin: 0; z-index: 50; }
    body.mc-glass.g-shell .g-app { display: block; }
  }
  /* Phone/tablet: room for the floating tab bar. */
  @media (max-width: 1023.98px) {
    body.mc-glass.g-shell { padding-bottom: calc(var(--g-bar-inset) + env(safe-area-inset-bottom)); }
    body.mc-glass.g-shell .g-main { padding-bottom: 0; }
  }
}

/* ═══ Integration additions (orchestrator) ═══ */
@layer glass.components {
  /* Legacy MB.toast (shell.js) element: styled like the Glass HUD so pages that no longer load base.css still show it */
  :where(.mc-glass) .toast { position: fixed; z-index: 300; left: 50%; top: max(18px, env(safe-area-inset-top)); translate: -50% -12px; max-width: min(92vw, 420px); padding: 11px 18px; border-radius: var(--g-r-capsule); font: 600 15px/1.25 var(--g-font); color: var(--g-label); text-align: center; opacity: 0; pointer-events: none; transition: opacity var(--g-d-base) linear, translate var(--g-d-move) var(--g-spring); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); background: rgb(var(--g-glass-rgb) / var(--g-glass-regular)); box-shadow: inset 0 1px 0 var(--g-glass-rim), var(--g-glass-shadow); }
  :where(.mc-glass) .toast.show { opacity: 1; translate: -50% 0; }

  :where(.mc-glass) .g-navbar :is(.g-btn, a, button) { white-space: nowrap; }
}
@layer glass.shell {
  /* Five tabs plus search must fit a phone without spilling past the edge. */
  @media (max-width: 459px) {
    :where(.mc-glass) .g-tabbar { gap: 6px; max-width: calc(100vw - 16px); }
    :where(.mc-glass) .g-tabbar .g-tab { min-width: 58px; padding-inline: 4px; }
  }
  @media (max-width: 359px) {
    :where(.mc-glass) .g-tabbar .g-tab { min-width: 48px; padding-inline: 2px; }
    :where(.mc-glass) .g-tabbar-search { width: 48px; height: 48px; }
  }
}
@layer glass.shell {
  /* Quick day/night switch (sidebar, page bars, marketing header): deliberately quiet — a small grey glyph, no fill */
  :where(.mc-glass) .g-theme-toggle { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--g-label-3); cursor: pointer; transition: color var(--g-d-fast) linear, background-color var(--g-d-fast) linear; }
  :where(.mc-glass) .g-theme-toggle:hover, :where(.mc-glass) .g-theme-toggle:focus-visible { color: var(--g-label-2); background: var(--g-fill-4); }
  :where(.mc-glass) .g-theme-toggle .g-ic { width: 16px; height: 16px; stroke-width: 1.6; }
  :where(.mc-glass) .g-theme-toggle .g-ic-sun { display: none; }
  html[data-learner-theme="dark"] :where(.mc-glass) .g-theme-toggle .g-ic-sun { display: block; }
  html[data-learner-theme="dark"] :where(.mc-glass) .g-theme-toggle .g-ic-moon { display: none; }
  :where(.mc-glass) .g-side-top { display: flex; align-items: center; justify-content: space-between; }
  :where(.mc-glass) .q-top .g-theme-toggle { align-self: center; }
  @media (min-width: 1024px) { :where(.mc-glass) .g-theme-toggle--bar { display: none; } }
}
}
@layer glass.base {
  /* Native controls and scrollbars follow the chosen appearance, not the system */
  html[data-learner-theme="light"]:has(.mc-glass) { color-scheme: light; }
  html[data-learner-theme="dark"]:has(.mc-glass) { color-scheme: dark; }
}
@layer glass.components {
  /* Destructive text on dark grey controls needs a lighter red to stay ≥4.5:1 */
  html[data-learner-theme="dark"] :where(.mc-glass) .g-btn-destructive:not(.g-btn-filled) { color: #FF8077; }
}