/* ==========================================================================
   mindboost. — Freedom brand theme (LIGHT)
   --------------------------------------------------------------------------
   The single source of brand truth for the lesson shell. Both the menu
   (index.html) and the content pages (module.html) link this file — that
   shared link IS the menu<->page connection. Each page keeps its own
   layout CSS on top, so they stay visually distinct.

   Vendored from the mindboost Design System (light-theme/colors_and_type.css).
   mindboost is a LIGHT system: white / warm-grey paper canvas, #0d0d0d ink
   reserved for type, hot pink (#E91E63) doing ~25% of the work. No dark theme.
   Sources matched: mindboostlearning.com (live), calebfoster.ai (sister).

   A client theme is a thin per-client file that loads AFTER this one and
   overrides the --mb-* tokens below; it does not replace this file.
   ========================================================================== */

/* ── Self-hosted brand fonts — NO CDN (D44, Security & Assurance) ──────────
   Every weight we use is a local file: the package makes zero outbound font
   calls and works air-gapped. Poppins is OFL — vendored from the official Google
   Fonts repo into ../fonts/. If you add a new weight, add its file + an @font-face
   here; never re-introduce an @import. (The DS is Poppins-only; Archivo Black was
   removed 2026-06-23 to match the canonical brand spec — #152.) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Poppins-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Poppins-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Poppins-ExtraBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/Poppins-Black.ttf") format("truetype");
}

:root {

  /* ── Brand / Base palette ────────────────────────────────────────── */
  --mb-pink:              #E91E63;
  --mb-pink-soft:         rgba(233,30,99,0.08);
  --mb-pink-tint:         #FFF5F8;          /* paper-pink — tinted surface */
  --mb-pink-strong:       #C81254;          /* AA-safe pink — white text on it = 5.72:1 (buttons/tabs/accordion heads); #E91E63 is only 4.35 */
  --mb-pink-deep:         #A8104A;          /* hover for strong-pink fills */

  --mb-slate:             #455A64;
  --mb-slate-soft:        rgba(69,90,100,0.10);
  --mb-slate-strong:      #37474F;

  /* Light neutrals — the new editorial canvas */
  --mb-ink:               #0d0d0d;          /* structural dark for type & contrast bands */
  --mb-surface:           #ffffff;          /* default card surface */
  --mb-surface-raised:    #FAFAFA;          /* hovered / lifted */
  --mb-surface-1a:        #F2F2F0;          /* alt-row surface (warm light grey) */

  /* Hairlines + borders */
  --mb-border:            rgba(13,13,13,0.08);
  --mb-border-strong:     rgba(13,13,13,0.20);
  --mb-border-accent:     rgba(233,30,99,0.45);

  /* Pure */
  --mb-white:             #ffffff;
  --mb-black:             #000000;

  /* Text on light */
  --mb-text:              #0d0d0d;
  --mb-text-muted:        rgba(13,13,13,0.64);   /* AA 4.5:1 on the paper surface (#f2f2f0) */
  --mb-text-subtle:       rgba(13,13,13,0.30);
  --mb-text-faint:        rgba(13,13,13,0.10);

  /* Studio team colors — internal tooling only.
     DELIBERATE DEVIATION from DS v5: the source DS uses brighter persona colours
     (caleb #06AEEF, amanda #FF4D4D, lily #A52DBE, owen #FFC20E, stu #0BA17C) as
     avatars/accents. Freedom renders some as TEXT on a light tint (.mb-tag--blue →
     caleb, .mb-status--wip → owen), where the brights fail WCAG AA — so we keep the
     deeper AA-safe values here. (Confirmed Caleb, 2026-06-25.) */
  --mb-role-caleb:        #2A6FDB;          /* slightly deeper for AA on white */
  --mb-role-amanda:       #E91E63;
  --mb-role-lily:         #7C5AE0;
  --mb-role-owen:         #C58200;
  --mb-role-stu:          #0C8A5B;

  /* Validation — readable on light surfaces */
  --mb-success:           #0C8A5B;
  --mb-success-fg:        #064A30;
  --mb-error:             #C62828;
  --mb-error-fg:          #8A1A1A;
  --mb-warning:           #C56800;
  --mb-warning-fg:        #6B3A00;

  /* ── Semantic tokens ─────────────────────────────────────────────── */

  --mb-accent:            var(--mb-pink);
  --mb-accent-inverted:   var(--mb-white);
  --mb-accent-soft:       var(--mb-pink-soft);
  --mb-accent-hover:      var(--mb-pink-strong);
  /* AA text accent (DS v5): use these where the accent renders as TEXT or a
     white-on-pink fill — pink-strong (#C81254, white 5.72:1), hover pink-deep. */
  --mb-accent-text:       var(--mb-pink-strong);
  --mb-accent-text-hover: var(--mb-pink-deep);

  --mb-bg:                var(--mb-white);
  --mb-fg:                var(--mb-text);
  --mb-fg-muted:          var(--mb-text-muted);
  --mb-fg-subtle:         var(--mb-text-subtle);

  --mb-card-bg:           var(--mb-surface);
  --mb-card-border:       var(--mb-border);
  --mb-card-bg-hover:     var(--mb-surface-raised);
  --mb-card-border-hover: var(--mb-border-accent);

  --mb-btn-bg:            var(--mb-pink-strong);   /* AA: white text needs the deeper pink (4.35→5.72) */
  --mb-btn-fg:            var(--mb-accent-inverted);
  --mb-btn-bg-hover:      var(--mb-pink-deep);

  --mb-btn-ghost-bg:      transparent;
  --mb-btn-ghost-fg:      var(--mb-ink);
  --mb-btn-ghost-border:  var(--mb-ink);

  --mb-btn-disabled:      #E5E5E3;
  --mb-btn-disabled-fg:   rgba(13,13,13,0.30);

  --mb-progress:          var(--mb-accent);
  --mb-progress-bg:       rgba(13,13,13,0.10);
  --mb-focus-ring:        var(--mb-accent);


  /* ── Typography — base ───────────────────────────────────────────── */

  /* Display can be overridden per-page (e.g. Poppins 900 tight) by setting
     --mb-font-display on a wrapper. */
  --mb-font-heading:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mb-font-display:      "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mb-font-body:         "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mb-font-mono:         ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", monospace;

  --mb-fs-xs:             0.625rem;          /* 10 — eyebrow */
  --mb-fs-sm:             0.75rem;
  --mb-fs-base:           0.875rem;
  --mb-fs-md:             1rem;
  --mb-fs-lg:             1.25rem;
  --mb-fs-xl:             1.75rem;
  --mb-fs-2xl:            clamp(2rem, 5vw, 3.2rem);
  --mb-fs-3xl:            clamp(2.4rem, 6.5vw, 4.5rem);

  --mb-fw-regular:        400;
  --mb-fw-medium:         500;
  --mb-fw-semibold:       600;
  --mb-fw-bold:           700;
  --mb-fw-heavy:          800;
  --mb-fw-black:          900;

  /* Display weight — overridable by the type-variant tweak */
  --mb-fw-display:        800;
  /* Display tracking — overridable */
  --mb-tracking-display:  -0.025em;

  --mb-tracking-hero:     -0.04em;
  --mb-tracking-h1:       -0.025em;
  --mb-tracking-body:     0;
  --mb-tracking-label:    0.15em;
  --mb-tracking-eyebrow:  0.2em;

  --mb-lh-tight:          1.02;
  --mb-lh-snug:           1.15;
  --mb-lh-normal:         1.5;
  --mb-lh-relaxed:        1.65;


  /* ── Shape / shadow / motion ─────────────────────────────────────── */

  --mb-radius-sm:         8px;
  --mb-radius:            12px;
  --mb-radius-md:         16px;
  --mb-radius-lg:         20px;
  --mb-radius-xl:         30px;
  --mb-radius-pill:       9999px;

  /* Pink-tinted lift — replaces the heavy black drop-shadow of dark theme */
  --mb-shadow-sm:         0 4px 12px rgba(13,13,13,0.06);
  --mb-shadow-md:         0 16px 48px rgba(233,30,99,0.12), 0 4px 12px rgba(13,13,13,0.04);
  --mb-shadow-lg:         0 24px 64px rgba(233,30,99,0.18), 0 8px 24px rgba(13,13,13,0.06);
  --mb-shadow-pink:       0 0 0 1px rgba(233,30,99,0.20), 0 20px 56px rgba(233,30,99,0.18);

  --mb-transition-fast:   0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --mb-transition:        0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --mb-transition-slow:   0.55s cubic-bezier(0.4, 0, 0.2, 1);


  /* ── Spacing ─────────────────────────────────────────────────────── */

  --mb-space-2xs:         0.25rem;
  --mb-space-xs:          0.5rem;
  --mb-space-sm:          0.75rem;
  --mb-space-md:          1rem;
  --mb-space-lg:          1.5rem;
  --mb-space-xl:          2.5rem;
  --mb-space-2xl:         4rem;
  --mb-space-3xl:         6rem;

}


/* ============================================================================
   Element-level defaults
   ============================================================================ */

html, body {
  background: var(--mb-bg);
  color: var(--mb-fg);
  font-family: var(--mb-font-body);
  font-size: var(--mb-fs-md);
  line-height: var(--mb-lh-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mb-font-heading);
  color: var(--mb-fg);
  line-height: var(--mb-lh-snug);
  letter-spacing: var(--mb-tracking-h1);
  font-weight: var(--mb-fw-heavy);
}

/* Mega display — uses --mb-font-display so it can be re-skinned per page */
.mb-display, h1.mb-display {
  font-family: var(--mb-font-display);
  font-size: var(--mb-fs-3xl);
  font-weight: var(--mb-fw-display);
  line-height: var(--mb-lh-tight);
  letter-spacing: var(--mb-tracking-display);
}

h1  { font-family: var(--mb-font-display); font-size: var(--mb-fs-2xl); font-weight: var(--mb-fw-display); letter-spacing: var(--mb-tracking-display); line-height: var(--mb-lh-tight); }
h2  { font-size: 1.6rem; font-weight: var(--mb-fw-heavy); letter-spacing: var(--mb-tracking-h1); }
h3  { font-size: var(--mb-fs-xl); font-weight: var(--mb-fw-bold);  }
h4  { font-size: var(--mb-fs-lg); font-weight: var(--mb-fw-bold);  }

p { color: var(--mb-fg); line-height: var(--mb-lh-relaxed); }
p.mb-lede { font-size: var(--mb-fs-lg); color: var(--mb-fg-muted); max-width: 60ch; }

/* The mindboostlearning.com emphasis signature — colour, not italic. */
.mb-pink, h1 .mb-pink, h2 .mb-pink, h3 .mb-pink { color: var(--mb-accent); }
.mb-pink-italic { color: var(--mb-accent); font-style: italic; }

/* Eyebrows */
.mb-eyebrow {
  font-size: var(--mb-fs-xs);
  font-weight: var(--mb-fw-heavy);
  text-transform: uppercase;
  letter-spacing: var(--mb-tracking-eyebrow);
  color: var(--mb-accent);
}
.mb-label {
  font-size: var(--mb-fs-sm);
  font-weight: var(--mb-fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--mb-tracking-label);
  color: var(--mb-fg-muted);
}

.mb-wordmark {
  font-family: var(--mb-font-heading);
  font-weight: var(--mb-fw-heavy);
  letter-spacing: var(--mb-tracking-h1);
  color: var(--mb-fg);
}
.mb-wordmark .dot { color: var(--mb-accent); }

/* link colour applies to real links, NOT button-styled <a> (see .mb-btn) */
a:not(.mb-btn) { color: var(--mb-accent); text-decoration: none; }
a:not(.mb-btn):hover { color: var(--mb-accent-hover); }

code, pre, kbd { font-family: var(--mb-font-mono); font-size: 0.9em; }

::selection { background: var(--mb-accent); color: var(--mb-accent-inverted); }


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mb-transition-fast: 0ms;
    --mb-transition:      0ms;
    --mb-transition-slow: 0ms;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================================
   Instant tooltip utility — [data-tooltip] shows its text INSTANTLY on hover/focus
   (the native `title` attribute has a ~1s browser delay we can't control). Used by
   the nav buttons; aria-label still carries the accessible name for screen readers.
   ========================================================================== */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: var(--mb-ink, #0d0d0d); color: #fff;
  font-size: .72rem; font-weight: 600; line-height: 1; letter-spacing: .01em;
  padding: .3rem .5rem; border-radius: 6px; white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden;
  /* Nav chrome (nav bar, progress bar, mobile menu scrim) runs up to z-index:110 —
     a tooltip anchored to a nav button needs to clear ALL of it to actually read as
     "on top", not just its own stacking context. */
  z-index: 200;
  box-shadow: 0 4px 14px rgba(13,13,13,.18);
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; visibility: visible; }


/* ============================================================================
   Lesson-shell compatibility + background treatments
   ----------------------------------------------------------------------------
   The static pages predate this theme and reference a few token names that the
   DS expresses differently. Alias them here so linking this file is a drop-in
   replacement for each page's old inline :root block.
   ============================================================================ */

:root {
  /* Card lift aliases (pages use --mb-shadow-card / --mb-shadow-hover) */
  --mb-shadow-card:   var(--mb-shadow-md);
  --mb-shadow-hover:  var(--mb-shadow-lg);

  /* Single brand transition alias used by the menu/page layout CSS */
  --mb-transition-default: var(--mb-transition);

  /* ── Background scrims (from the DS image-overlay rules) ──────────────────
     media.js sets the *image* (--*-bg-image) and the scrim *strength*
     (--*-bg-scrim, 0–1) per the lesson config; these gradients use them so
     text/cards stay legible over photography. A strength of 0 = no scrim. */

  /* Hero: light ink wash head-to-foot, plus a stronger bottom gradient. */
  --mb-scrim-hero:
    linear-gradient(rgba(13,13,13,0.10), rgba(13,13,13,0.40));
  --mb-scrim-hero-foot:
    linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.70) 100%);

  /* Menu card image overlay: clear at top, dark at the caption. */
  --mb-scrim-card:
    linear-gradient(rgba(0,0,0,0) 30%, rgba(0,0,0,0.60) 100%);
}

/* ==========================================================================
   Framework utilities (shared across Menu / Topic / Splash)
   --------------------------------------------------------------------------
   Responsive breakpoint scale (by convention — @media can't read tokens):
     sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536   (floor 320, ceiling 2560)
   See GLOSSARY → Responsive. Prefer fluid sizing (clamp/min/max) over adding
   breakpoints.
   ========================================================================== */

/* Modal scroll lock — set on <body> by src/scroll-lock.js while any overlay is
   open. The JS also pins <body> via position:fixed (robust on iOS); this rule is
   a belt-and-braces fallback + a styling/state hook. */
body.modal-open { overflow: hidden; }


/* ==========================================================================
   .mb-btn — the shared button system (DS "Buttons" card, 1:1)
   --------------------------------------------------------------------------
   The project's FIRST global button primitive. Until now every component shipped
   its own button CSS embedded in its JS as an element-scoped `<style>` template
   (e.g. `freedom-mcq .lc-submit{…}`); this class retires that drift. Values are
   taken verbatim from the canonical DS spec — references/mindboost-design-system/
   preview/buttons.html — re-skinned onto a shared class, not redesigned.

   USAGE: `class="mb-btn mb-btn--<variant>"`. Modifiers map 1:1 to the DS:
     --pill-primary · --pill-ink · --pill-ghost · --pill-outline   (.btn-pill-*)
     --shell · --shell-primary                                     (.btn-shell(.primary))
     --card-primary · --card-ghost                                 (.btn-card-*)
     --icon (+ .round, .sm/.lg, colour --icon-primary/-ink/-outline/
             -outline-pink/-ghost/-ghost-pink)                     (.btn-icon*)
     --link                                                        (.btn-link)
   State: native `disabled` attribute (the project norm) → opacity .3, not-allowed.

   ⚠️ A11y — the base ships its OWN :focus-visible ring: there is NO global
   :focus-visible in this project to inherit (each old component re-declared one).

   ✅ CONTRAST (resolved 2026-06-25, axe live run): primary fills with #fff text use
   --mb-pink-strong (#C81254 = 5.72:1), NOT --mb-pink (#E91E63 = 4.35:1, which failed
   AA-normal at the 14–15px button sizes). --mb-pink stays the brand accent for
   decoration/large display; white-on-pink fills (shell/pill/card primary, tabs,
   accordion heads) all take the strong pink. contrast.test.js asserts these at 4.5:1.

   ⚠️ Coexistence: this rule must NOT set display/visibility at high specificity —
   MCQ/GMCQ/slider showMarking() toggles the submit button's inline display:none
   plus is-correct/is-wrong state classes, and .mb-btn has to leave those alone.
   ========================================================================== */

.mb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mb-font-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: var(--mb-transition);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* standalone buttons: 44×44 target — exceeds WCAG 2.2 Target Size AA (2.5.8, 24×24)
     and meets AAA (2.5.5). Icon-only variants override with their own square size (≥44
     for default/.lg; .sm dots use the 24px-spacing exception — see guardrails §8). */
  min-height: 44px;
  min-width: 44px;
}
.mb-btn:focus-visible {
  outline: 3px solid var(--mb-focus-ring, #E91E63);
  outline-offset: 2px;
}
/* Native disabled — the project norm for every button. */
.mb-btn:disabled,
.mb-btn[disabled],
.mb-btn.mb-btn--disabled {
  opacity: 0.30;
  cursor: not-allowed;
}

/* ── Pill (marketing CTA) ─────────────────────────────────────────────── */
.mb-btn--pill-primary {
  background: var(--mb-pink-strong); color: #fff;   /* AA: white text needs the strong pink (5.72:1) */
  padding: 14px 28px; border-radius: 9999px; font-size: 0.9375rem;
  box-shadow: 0 8px 24px rgba(233,30,99,0.20);
}
.mb-btn--pill-primary:hover {
  background: var(--mb-pink-deep); transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(233,30,99,0.32);
}
.mb-btn--pill-ink {
  background: var(--mb-ink); color: #fff;
  padding: 14px 28px; border-radius: 9999px; font-size: 0.9375rem;
  box-shadow: 0 8px 24px rgba(13,13,13,0.18);
}
.mb-btn--pill-ink:hover { background: #000; transform: translateY(-2px); }
.mb-btn--pill-ghost {
  background: transparent; border-color: var(--mb-ink); color: var(--mb-ink);
  padding: 11px 24px; border-radius: 9999px; font-size: 0.92rem; font-weight: 600;
}
.mb-btn--pill-ghost:hover { background: var(--mb-ink); color: #fff; }
.mb-btn--pill-outline {
  background: transparent; border-color: var(--mb-ink); color: var(--mb-ink);
  padding: 13px 26px; border-radius: 9999px; font-size: 0.9375rem;
}
.mb-btn--pill-outline:hover { background: var(--mb-ink); color: #fff; }
/* small pill (modifier, additive) */
.mb-btn--pill-sm { padding: 9px 18px; font-size: 0.82rem; }

/* ── Card (compact, in-card) ──────────────────────────────────────────── */
.mb-btn--card-primary {
  background: var(--mb-pink-strong); color: #fff;   /* AA: white text needs the strong pink (5.72:1) */
  padding: 7px 16px; border-radius: 8px; font-size: 0.72rem; font-weight: 700;
}
.mb-btn--card-ghost {
  background: transparent; border-color: var(--mb-border-strong); color: var(--mb-fg-muted);
  padding: 7px 16px; border-radius: 8px; font-size: 0.72rem; font-weight: 700;
}
.mb-btn--card-ghost:hover { color: var(--mb-ink); border-color: var(--mb-ink); }
/* card buttons are deliberately compact — escape the base 44px floor (DS spec ~28px) */
.mb-btn--card-primary, .mb-btn--card-ghost { min-height: 0; min-width: 0; }

/* ── Shell nav (lesson Back / Next / Submit) ──────────────────────────── */
.mb-btn--shell {
  background: transparent; border-color: var(--mb-border-strong); color: var(--mb-ink);
  padding: 11px 22px; border-radius: 8px; font-size: 0.9rem; font-weight: 500;
}
.mb-btn--shell-primary {
  background: var(--mb-pink-strong); border-color: var(--mb-pink-strong); color: #fff;   /* AA: white text needs the strong pink (5.72:1) */
  padding: 11px 22px; border-radius: 8px; font-size: 0.9rem; font-weight: 500;
}
.mb-btn--shell-primary:hover:not(:disabled) {
  background: var(--mb-pink-deep); border-color: var(--mb-pink-deep);
}

/* ── Icon / arrow buttons (plain icon-only controls) ──────────────────────
   Square (rounded) by default; .round → circular; .sm/.lg resize. The default
   and .lg sizes already meet the 44px target; .sm (38px) is for dense rows. */
.mb-btn--icon {
  width: 48px; height: 48px; min-width: 0; min-height: 0; padding: 0;
  border-radius: 10px; justify-content: center; flex: none;
}
.mb-btn--icon.round { border-radius: 9999px; }
.mb-btn--icon.sm { width: 38px; height: 38px; border-radius: 8px; }
.mb-btn--icon.lg { width: 60px; height: 60px; border-radius: 13px; }
.mb-btn--icon svg { width: 40%; height: 40%; transition: transform var(--mb-transition); }
.mb-btn--icon:hover svg { transform: translateX(2px); }
/* colour treatments */
.mb-btn--icon-primary {
  background: var(--mb-pink); color: #fff; border-color: var(--mb-pink);
  box-shadow: 0 8px 22px rgba(233,30,99,0.22);
}
.mb-btn--icon-primary:hover {
  background: var(--mb-pink-strong); transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(233,30,99,0.32);
}
.mb-btn--icon-ink {
  background: var(--mb-ink); color: #fff; border-color: var(--mb-ink);
  box-shadow: 0 8px 22px rgba(13,13,13,0.18);
}
.mb-btn--icon-ink:hover { background: #000; transform: translateY(-2px); }
.mb-btn--icon-outline { background: transparent; border-color: var(--mb-ink); color: var(--mb-ink); }
.mb-btn--icon-outline:hover { background: var(--mb-ink); color: #fff; }
.mb-btn--icon-outline-pink { background: transparent; border-color: var(--mb-pink); color: var(--mb-pink); }
.mb-btn--icon-outline-pink:hover { background: var(--mb-pink); color: #fff; }
.mb-btn--icon-ghost { background: transparent; border-color: transparent; color: var(--mb-ink); }
.mb-btn--icon-ghost:hover { background: var(--mb-surface-1a, #f0eee9); }
.mb-btn--icon-ghost-pink { background: transparent; border-color: transparent; color: var(--mb-pink); }
.mb-btn--icon-ghost-pink:hover { background: var(--mb-pink-soft, #fde4ec); }

/* ── Icon-close: the shared text-✕ dismiss control ─────────────────────────
   The single source for the text "×" close treatment used by every overlay
   (modal .fm-close, completion .fco-close). Built ON the icon base — pair it
   with `.mb-btn--icon` (+ a colour skin like `--icon-ghost`) and `.round`; it
   only OWNS the glyph sizing + the rotate-90°/scale hover. The .mb-btn base
   transitions every property, so the rotate animates for free. Consumers keep
   only their own position override (and any per-style skin). */
.mb-btn--icon-close { font-size: 1.4rem; line-height: 1; }
.mb-btn--icon-close:hover { transform: rotate(90deg) scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .mb-btn--icon-close:hover { transform: none; }
}

/* ── Text link (pink, growing underline) ──────────────────────────────── */
.mb-btn--link {
  background: transparent; border: none; color: var(--mb-pink);
  padding: 6px 2px; font-size: 0.9375rem; font-weight: 700; border-radius: 0;
  min-width: 0;   /* link is inline text, not a 44px target */
}
.mb-btn--link span.u {
  border-bottom: 2px solid currentColor; padding-bottom: 2px; transition: var(--mb-transition);
}
.mb-btn--link:hover span.u { padding-bottom: 5px; }

/* Trailing chevron nudge (matches the DS .chev micro-interaction). */
.mb-btn .chev { width: 1.05em; height: 1.05em; pointer-events: none; }
.mb-btn--pill-primary .chev,
.mb-btn--pill-outline .chev,
.mb-btn--link .chev { transition: transform var(--mb-transition); }
.mb-btn--pill-primary:hover .chev,
.mb-btn--pill-outline:hover .chev,
.mb-btn--link:hover .chev { transform: translateX(2px); }

/* Reduced motion: the global rule above already nukes *transitions*, but a static
   :hover transform would still jump — suppress the lift/nudge explicitly. */
@media (prefers-reduced-motion: reduce) {
  .mb-btn:hover,
  .mb-btn--icon:hover svg,
  .mb-btn:hover .chev { transform: none !important; }
}


/* ==========================================================================
   .mb-focus-ring — the shared keyboard-focus ring (DS conformance, Track A)
   --------------------------------------------------------------------------
   There is NO global :focus-visible in this project (page chrome uses
   :focus-visible as an ANIMATION trigger, not a ring — see index/topic/splash
   + brand-chrome.css). So focusable component controls each re-declared an
   identical `outline:3px solid var(--mb-focus-ring) outline-offset:2px` block in
   their own JS-embedded <style>. This utility retires that drift: add the class
   to the focusable element and delete the per-component rule.

     .mb-focus-ring            base — 3px pink outline, 2px offset
     .mb-focus-ring--lg        larger offset (3px) for raised/card surfaces
     .mb-focus-ring--on-dark   white outline for controls on dark/photo surfaces

   Kept deliberately BESPOKE (not migrated): MCQ/GMCQ `:focus-within` (a
   border+box-shadow that IS the radio indicator, not a ring), the slider thumb
   (4px + radius), and the carousel STAGE (6px + radius-20).
   ========================================================================== */
/* Suppress the UA's (blue) :focus outline on NON-keyboard focus — e.g. when the
   router programmatically focuses the nav logo on a route change. The branded ring
   below still shows for real keyboard focus (:focus-visible). (Caleb, 2026-06-25) */
.mb-focus-ring:focus:not(:focus-visible) { outline: none; }
/* The router's route-change focus ANCHOR (a heading, tabindex=-1) — never a keyboard
   tab stop, so suppress its outline entirely; this is why a route change no longer
   lights up the nav logo / home-button ring on load. (Caleb, live, 2026-06-25) */
[data-fx-focus-anchor]:focus { outline: none; }
.mb-focus-ring:focus-visible {
  outline: 3px solid var(--mb-focus-ring, #E91E63);
  outline-offset: 2px;
}
.mb-focus-ring--lg:focus-visible { outline-offset: 3px; }
.mb-focus-ring--on-dark:focus-visible { outline-color: #fff; }


/* ==========================================================================
   .mb-feedback — shared answer-marking states (DS "feedback-states", Track A)
   --------------------------------------------------------------------------
   The correct/wrong colours for marked answers. Border comes from the validation
   tokens (--mb-success / --mb-error); TEXT comes from the dark *-fg stops
   (--mb-success-fg / --mb-error-fg) so marked text stays AA on a light/tinted
   surface — this fixes a latent low-contrast text bug (no new tokens invented).

   Treatments differ per component, so this utility carries only the SHARED
   colour decision; each component keeps its own treatment on top:
     MCQ  → border + a faint bg-tint (rgba .06) on the option row
     GMCQ → border + the LABEL takes the feedback text-colour (no bg)
   The is-correct / is-wrong / is-selected hooks that showMarking() toggles are
   preserved in each component.
   ========================================================================== */
.mb-feedback--correct {
  border-color: var(--mb-success, #0C8A5B);
  color: var(--mb-success-fg, #064A30);
}
.mb-feedback--wrong {
  border-color: var(--mb-error, #C62828);
  color: var(--mb-error-fg, #8A1A1A);
}


/* ==========================================================================
   .mb-tag · .mb-status · .mb-platform — pills (DS "tags.html", 1:1, Track A)
   --------------------------------------------------------------------------
   Built verbatim from references/mindboost-design-system/preview/tags.html.
     .mb-tag      colour-coded category pill (full 8-colour palette). NOTE: there
                  is currently NO Freedom consumer for .mb-tag — it ships for DS
                  parity; the first colour-tagged surface should adopt it.
     .mb-status   state pill (+ a 6px leading dot for in-progress/live states)
     .mb-platform left-aligned platform pill on a surface; .mb-platform--on-dark
                  is the treatment for the dark/brand hero (was .hero-pill).
   ========================================================================== */
.mb-tag {
  font-size: 0.6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 4px 11px; border-radius: 9999px;
}
.mb-tag--pink   { color: var(--mb-pink,#E91E63);       background: var(--mb-pink-soft,rgba(233,30,99,0.08)); }
.mb-tag--slate  { color: var(--mb-slate,#455A64);      background: rgba(69,90,100,0.12); }
.mb-tag--green  { color: var(--mb-success,#0C8A5B);    background: rgba(12,138,91,0.10); }
.mb-tag--blue   { color: var(--mb-role-caleb,#2A6FDB); background: rgba(42,111,219,0.10); }
.mb-tag--amber  { color: var(--mb-role-owen,#C58200);  background: rgba(197,130,0,0.12); }
.mb-tag--purple { color: var(--mb-role-lily,#7C5AE0);  background: rgba(124,90,224,0.10); }
.mb-tag--teal   { color: #0F766E;                      background: rgba(15,118,110,0.10); }
.mb-tag--ink    { color: var(--mb-ink,#0d0d0d);        background: rgba(13,13,13,0.06); }

.mb-status {
  font-size: 0.62rem; font-weight: 700; padding: 4px 11px; border-radius: 9999px;
  display: inline-flex; gap: 6px; align-items: center;
}
.mb-status--ready { background: rgba(12,138,91,0.10);  color: var(--mb-success,#0C8A5B); }
.mb-status--wip   { background: rgba(197,130,0,0.12);  color: var(--mb-role-owen,#C58200); }
.mb-status--live  { background: rgba(233,30,99,0.10);  color: var(--mb-pink,#E91E63); }
.mb-status--teal  { background: rgba(15,118,110,0.10); color: #0F766E; }
.mb-status--info  { background: rgba(69,90,100,0.12);  color: var(--mb-slate,#455A64); }
/* the 6px leading dot (inherits the pill's currentColor) */
.mb-status .mb-status__dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}

.mb-platform {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 5px 12px; border-radius: 9999px;
  border: 1px solid var(--mb-border,rgba(13,13,13,0.08));
  color: var(--mb-fg-muted,rgba(13,13,13,0.64)); background: var(--mb-surface,#fff);
}
.mb-platform .mb-platform__dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
/* on-dark (brand hero) — reuses the existing .hero--brand .hero-pill rgba */
/* on-dark (brand hero): a DARK translucent chip so white text stays ≥4.5:1 over the
   bright aurora (a light translucent chip let the gradient show through → ~4.4:1). */
.mb-platform--on-dark {
  background: rgba(13,13,13,0.42);
  border-color: rgba(255,255,255,0.24);
  color: #fff;
}


/* ==========================================================================
   .mb-dots / .mb-dot — shared component page-dots (DS "progress.html", Track A)
   --------------------------------------------------------------------------
   The 16px→30px elongating pill dot, IDENTICAL across narrative (.fn-dot/
   .fn-dtick) and card-carousel (.fcc-dot/.fcc-dtick): each pip carries a ✓ once
   its step has been seen; the active step is the elongated pink pill. Extracted
   here once.
     .mb-dots         flex row container
     .mb-dot          a dot button (also wears .mb-focus-ring for the ring)
     .mb-dot.active   the current step — elongated pink pill
     .mb-dot.seen     a completed step — pink + its tick shows
     .mb-dot__tick    the ✓ glyph inside the dot
   NOTE: these are the *component* dimensions, which differ from the DS-spec
   progress.html (8/22/46px) — a DS-dimension reconciliation is a separate
   follow-up; dimensions are unchanged here.

   ⚠️ NOTE — `.mb-dot` is ALSO a pre-existing class on the mindboost logo's SVG
   ink-splash circle (themes/mindboost-logo.css, `.mb .mb-dot`). To avoid colliding
   with that decorative element, every rule below is SCOPED under `.mb-dots` (the
   dot is always a child of the dots row in real use) — the logo circle is not.
   ========================================================================== */
/* gap gives ≥24px centre-to-centre between 16px dots → satisfies WCAG 2.2 Target Size
   (2.5.8) via the spacing exception (the dots stay a 16px visual). */
.mb-dots { display: flex; gap: 10px; align-items: center; }
.mb-dots .mb-dot {
  min-width: 16px; height: 16px; border-radius: 8px;
  background: rgba(13,13,13,0.18); border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, min-width .3s, border-radius .3s;
}
.mb-dots .mb-dot .mb-dot__tick {
  font-size: 9px; line-height: 1; color: #fff; opacity: 0; transform: scale(.4);
  transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.mb-dots .mb-dot.active { background: var(--mb-pink,#E91E63); min-width: 30px; border-radius: 8px; }
.mb-dots .mb-dot.seen:not(.active) { background: var(--mb-pink,#E91E63); }
.mb-dots .mb-dot.seen:not(.active) .mb-dot__tick { opacity: 1; transform: scale(1); }


/* ==========================================================================
   .mb-card — minimal white-surface card base (DS "cards.html", Track A)
   --------------------------------------------------------------------------
   The plain white card: 1px hairline + a small translateY lift on hover.
   Consumes the EXISTING card tokens so a client theme re-skins it for free.
   Migrated consumer: stacking-cards only. hot-grid (pink-fill), menu-card
   (pink-gradient), flip-card (gradient/ink) and graphic (no bg) stay bespoke.
   ========================================================================== */
.mb-card {
  background: var(--mb-card-bg, #fff);
  border: 1px solid var(--mb-card-border, rgba(13,13,13,0.08));
  border-radius: var(--mb-radius-md, 16px);
  /* scope the transition to the hover-affected props only — a blanket `all`
     would smear transform-driven consumers (e.g. the scroll-stack). */
  transition: background var(--mb-transition), border-color var(--mb-transition), transform var(--mb-transition);
}
.mb-card:hover {
  background: var(--mb-card-bg-hover, #FAFAFA);
  border-color: var(--mb-card-border-hover, rgba(233,30,99,0.45));
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .mb-card:hover { transform: none; }
}