/* ============================================================
   North7 Design System — Color & Type Tokens
   ------------------------------------------------------------
   Three themes share the same accent hues; only neutrals,
   surfaces, and contrast values shift.

   Themes:
     :root, [data-theme="light"]   — paper, ink, warm slate
     [data-theme="pastel"]         — sage, sand, mist, peach
     [data-theme="dark"]           — alpine night, pine, ember

   Pull the variable, not the hex. Always.
============================================================ */

/* ============================================================
   1. BASE TOKENS (theme-independent)
============================================================ */
:root {
  /* ---------- Type families ---------- */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- Type scale (modular, ratio 1.250 — major third) ---------- */
  --fs-xs:    0.75rem;    /* 12 — captions, footnotes */
  --fs-sm:    0.875rem;   /* 14 — small UI text */
  --fs-base:  1rem;       /* 16 — body */
  --fs-md:    1.125rem;   /* 18 — large body / lede */
  --fs-lg:    1.375rem;   /* 22 */
  --fs-xl:    1.75rem;    /* 28 */
  --fs-2xl:   2.25rem;    /* 36 */
  --fs-3xl:   3rem;       /* 48 */
  --fs-4xl:   4rem;       /* 64 */
  --fs-5xl:   5.5rem;     /* 88 — hero display */

  /* ---------- Line heights ---------- */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ---------- Letter spacing ---------- */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;  /* uppercase eyebrow labels */

  /* ---------- Font weights ---------- */
  --fw-light:  300;
  --fw-reg:    400;
  --fw-med:    500;
  --fw-sb:     600;
  --fw-bold:   700;

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  0.25rem;   /* 4 */
  --sp-2:  0.5rem;    /* 8 */
  --sp-3:  0.75rem;   /* 12 */
  --sp-4:  1rem;      /* 16 */
  --sp-5:  1.5rem;    /* 24 */
  --sp-6:  2rem;      /* 32 */
  --sp-7:  3rem;      /* 48 */
  --sp-8:  4rem;      /* 64 */
  --sp-9:  6rem;      /* 96 */
  --sp-10: 8rem;      /* 128 */

  /* ---------- Radii ---------- */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* ---------- Brand accent hues (shared) ---------- */
  --pine-50:   #ECF2EE;
  --pine-100:  #D4E2D7;
  --pine-200:  #A8C4AE;
  --pine-300:  #74A07E;
  --pine-400:  #4B7D58;
  --pine-500:  #2F5C3D;    /* primary */
  --pine-600:  #224730;
  --pine-700:  #183524;
  --pine-800:  #0F2317;

  --ember-50:  #FBEFE8;
  --ember-100: #F6DAC9;
  --ember-200: #EFB695;
  --ember-300: #E58F61;
  --ember-400: #D26B3A;    /* accent */
  --ember-500: #B0532A;
  --ember-600: #8A3F1E;
  --ember-700: #5F2B14;

  --sky-50:    #ECF1F4;
  --sky-100:   #D2DEE7;
  --sky-200:   #A3BDCD;
  --sky-300:   #6E96AE;
  --sky-400:   #467289;
  --sky-500:   #2F5468;

  --sand-50:   #F6EFE3;
  --sand-100:  #ECDFC4;
  --sand-200:  #DDC79B;
  --sand-300:  #C7A972;

  /* ---------- Shadows (warm-tinted, soft) ---------- */
  --shadow-xs: 0 1px 1px rgba(28, 24, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(28, 24, 18, 0.06), 0 1px 1px rgba(28, 24, 18, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(28, 24, 18, 0.08), 0 2px 4px -2px rgba(28, 24, 18, 0.05);
  --shadow-lg: 0 12px 24px -6px rgba(28, 24, 18, 0.10), 0 4px 8px -4px rgba(28, 24, 18, 0.06);
  --shadow-xl: 0 24px 48px -12px rgba(28, 24, 18, 0.18), 0 8px 16px -8px rgba(28, 24, 18, 0.08);
  --shadow-ring: 0 0 0 1px rgba(28, 24, 18, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:   120ms;
  --t-base:   220ms;
  --t-slow:   400ms;

  /* ---------- Layout ---------- */
  --content-narrow: 38rem;   /* 608 — long-form reading */
  --content-base:   62rem;   /* 992 — standard articles */
  --content-wide:   80rem;   /* 1280 — galleries, apps */
  --content-bleed:  96rem;   /* 1536 — max */
}

/* ============================================================
   2. THEME: LIGHT (default)
   Paper, ink, pine.
============================================================ */
:root,
[data-theme="light"] {
  /* Surfaces */
  --bg:         #FAF7F1;   /* warm paper */
  --bg-soft:    #F2EDE3;
  --bg-sunken:  #E9E1D2;
  --surface:    #FFFFFF;
  --surface-2:  #FAF7F1;

  /* Foreground */
  --fg:         #1C1812;   /* near-black ink, warm */
  --fg-1:       #1C1812;
  --fg-2:       #4A4338;   /* secondary text */
  --fg-3:       #80776A;   /* tertiary / muted */
  --fg-4:       #B0A797;   /* placeholder, disabled */
  --fg-inverse: #FAF7F1;

  /* Borders */
  --border:        rgba(28, 24, 18, 0.10);
  --border-strong: rgba(28, 24, 18, 0.20);
  --border-subtle: rgba(28, 24, 18, 0.06);

  /* Brand */
  --brand:         var(--pine-500);
  --brand-hover:   var(--pine-600);
  --brand-press:   var(--pine-700);
  --brand-soft:    var(--pine-50);
  --on-brand:      #FAF7F1;

  --accent:        var(--ember-400);
  --accent-hover:  var(--ember-500);
  --accent-soft:   var(--ember-50);
  --on-accent:     #FAF7F1;

  /* Semantic */
  --success: #2E6B43;
  --warning: #B47D1E;
  --danger:  #A6402C;
  --info:    var(--sky-400);

  --success-soft: #E5EFE8;
  --warning-soft: #F6ECD5;
  --danger-soft:  #F6E2DC;
  --info-soft:    #E3ECF1;

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(75, 125, 88, 0.35);

  /* Selection */
  --selection-bg: rgba(210, 107, 58, 0.25);
}

/* ============================================================
   3. THEME: PASTEL
   Soft chalky alpine — sage, sand, mist, peach.
============================================================ */
[data-theme="pastel"] {
  --bg:         #F4F1E8;
  --bg-soft:    #EAE6D8;
  --bg-sunken:  #DFD9C5;
  --surface:    #FBF9F2;
  --surface-2:  #F4F1E8;

  --fg:         #2B2A24;
  --fg-1:       #2B2A24;
  --fg-2:       #5C5849;
  --fg-3:       #8C8773;
  --fg-4:       #B8B19A;
  --fg-inverse: #FBF9F2;

  --border:        rgba(43, 42, 36, 0.10);
  --border-strong: rgba(43, 42, 36, 0.20);
  --border-subtle: rgba(43, 42, 36, 0.06);

  /* Softer brand */
  --brand:         #6E9A78;   /* dusty sage */
  --brand-hover:   #5C8466;
  --brand-press:   #4B6E54;
  --brand-soft:    #DDE8DE;
  --on-brand:      #FBF9F2;

  --accent:        #E5A07A;   /* faded peach */
  --accent-hover:  #D38961;
  --accent-soft:   #F6E3D5;
  --on-accent:     #2B2A24;

  --success: #6E9A78;
  --warning: #C9A55E;
  --danger:  #C47660;
  --info:    #8FAEBC;

  --success-soft: #DDE8DE;
  --warning-soft: #EFE4C9;
  --danger-soft:  #F0DAD0;
  --info-soft:    #D9E4EA;

  --focus-ring: 0 0 0 3px rgba(110, 154, 120, 0.30);
  --selection-bg: rgba(229, 160, 122, 0.28);
}

/* ============================================================
   4. THEME: DARK
   Alpine night — deep navy/charcoal, pine, ember.
============================================================ */
[data-theme="dark"] {
  --bg:         #14171B;   /* alpine night */
  --bg-soft:    #1A1E23;
  --bg-sunken:  #0F1216;
  --surface:    #1E2329;
  --surface-2:  #262C33;

  --fg:         #F0EBE0;
  --fg-1:       #F0EBE0;
  --fg-2:       #C5BFB1;
  --fg-3:       #8E8676;
  --fg-4:       #5C5749;
  --fg-inverse: #14171B;

  --border:        rgba(240, 235, 224, 0.10);
  --border-strong: rgba(240, 235, 224, 0.20);
  --border-subtle: rgba(240, 235, 224, 0.05);

  --brand:         #7AB58C;   /* brighter pine for contrast */
  --brand-hover:   #98C8A6;
  --brand-press:   #B6DBC1;
  --brand-soft:    rgba(122, 181, 140, 0.14);
  --on-brand:      #14171B;

  --accent:        #E58F61;
  --accent-hover:  #EFA882;
  --accent-soft:   rgba(229, 143, 97, 0.14);
  --on-accent:     #14171B;

  --success: #7AB58C;
  --warning: #E3BD6A;
  --danger:  #E08572;
  --info:    #8FB8CC;

  --success-soft: rgba(122, 181, 140, 0.14);
  --warning-soft: rgba(227, 189, 106, 0.14);
  --danger-soft:  rgba(224, 133, 114, 0.14);
  --info-soft:    rgba(143, 184, 204, 0.14);

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.45), 0 4px 8px -4px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.55), 0 8px 16px -8px rgba(0, 0, 0, 0.40);
  --shadow-ring: 0 0 0 1px rgba(240, 235, 224, 0.06);

  --focus-ring: 0 0 0 3px rgba(122, 181, 140, 0.40);
  --selection-bg: rgba(229, 143, 97, 0.35);
}

/* ============================================================
   5. SEMANTIC TYPE STYLES
   Apply to any element; or use the helper classes below.
============================================================ */

/* Base */
html { font-family: var(--font-sans); font-size: 16px; line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { margin: 0; }
::selection { background: var(--selection-bg); }

/* Display & headings — Instrument Serif for character */
.t-display, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-5);
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-sb);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-med);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}

h5, .t-h5 {
  font-family: var(--font-sans);
  font-weight: var(--fw-med);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}

/* Body */
p, .t-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-reg);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
  text-wrap: pretty;
}

.t-lede {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.t-small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.t-caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* Eyebrow — small uppercase label, used above headings */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-med);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Pull-quote — italic serif */
.t-quote, blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  border-left: 2px solid var(--brand);
  padding-left: var(--sp-5);
  margin: var(--sp-6) 0;
}

/* Code */
code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--fw-med);
  background: var(--bg-soft);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
  color: var(--fg-1);
}

pre, .t-pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  background: var(--bg-sunken);
  color: var(--fg-1);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  overflow-x: auto;
  margin: var(--sp-4) 0;
}
pre code { background: none; padding: 0; }

/* Link */
a, .t-link {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, var(--brand) 35%, transparent);
  transition: color var(--t-fast) var(--ease-soft), text-decoration-color var(--t-fast) var(--ease-soft);
}
a:hover { color: var(--brand-hover); text-decoration-color: var(--brand-hover); }

/* Utility */
.fg-1 { color: var(--fg-1); }
.fg-2 { color: var(--fg-2); }
.fg-3 { color: var(--fg-3); }
.fg-brand { color: var(--brand); }
.fg-accent { color: var(--accent); }

.bg     { background: var(--bg); }
.surface { background: var(--surface); }
/* ============================================================
   MS Certification Practice — app styles
   Strictly North7 tokens. No bare hex.
============================================================ */

* { box-sizing: border-box; }
html { font-feature-settings: "ss01" on, "ss02" on, "cv01" on, "cv02" on; }
body {
  background: var(--bg);
  color: var(--fg-1);
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

/* ---------- Family colour dot ----------
   A bullet that takes its colour inline from family.color.
*/
.fam-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--fg-3));
  flex: none;
  vertical-align: 1px;
}
.fam-dot.lg { width: 14px; height: 14px; }
.fam-dot.xl { width: 16px; height: 16px; }

/* Density variants. Default = comfortable. */
:root { --density-row: var(--sp-4); --density-card: var(--sp-5); }
[data-density="compact"] { --density-row: var(--sp-3); --density-card: var(--sp-4); }

/* ============================================================
   Site Header
============================================================ */
.app-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-5);
  height: 64px;
  padding: 0 var(--sp-6);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.app-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-sans); font-weight: var(--fw-sb);
  color: var(--fg-1); text-decoration: none; cursor: pointer;
  letter-spacing: var(--tracking-tight);
  font-size: var(--fs-md);
}
.app-brand .accent { color: var(--accent); }
.app-brand .divider { width: 1px; height: 22px; background: var(--border-strong); margin: 0 var(--sp-2); }
.app-brand .product {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  line-height: 1;
}
.app-brand .product em { font-style: italic; color: var(--brand); }

.app-nav {
  display: flex; align-items: center; gap: 2px;
  margin-left: var(--sp-4);
}
.app-nav-item {
  padding: 8px 12px;
  border-radius: var(--r-md);
  color: var(--fg-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.app-nav-item:hover { background: var(--bg-soft); color: var(--fg-1); }
.app-nav-item.active { background: var(--brand-soft); color: var(--brand); }
.app-nav-item .nav-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-sb);
  line-height: 18px;
  text-align: center;
  vertical-align: 1px;
}
.app-nav-item.active .nav-badge { background: var(--brand); color: var(--on-brand); }

.app-nav-sep {
  width: 1px; height: 18px; background: var(--border); margin: 0 var(--sp-2);
}

.app-tools { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }

.app-tool-link {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--fg-2);
  text-decoration: none;
  transition: all var(--t-fast);
}
.app-tool-link:hover { background: var(--bg-soft); color: var(--fg-1); }
.app-tool-link svg { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }

.icon-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-2); background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
.icon-btn:hover { background: var(--bg-soft); color: var(--fg-1); border-color: var(--border); }
.icon-btn svg { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   Layout: index page (sidebar + content)
============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  max-width: var(--content-bleed);
  margin: 0 auto;
}

.app-sidebar {
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-6);
  border-right: 1px solid var(--border);
  font-family: var(--font-sans);
}

.sidebar-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-sb);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 0 10px;
  margin-bottom: var(--sp-2);
}

.sidebar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; }

.sidebar-link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 8px 10px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--fg-2);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-link:hover { background: var(--bg-soft); color: var(--fg-1); }
.sidebar-link.active { background: var(--brand-soft); color: var(--brand); font-weight: var(--fw-med); }
.sidebar-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; flex: none; }
.sidebar-link .fam-dot { margin-right: 2px; }
.sidebar-link.active svg { opacity: 1; }
.sidebar-count {
  margin-left: auto; font-family: var(--font-mono);
  font-size: 11px; color: var(--fg-3);
}
.sidebar-link.active .sidebar-count { color: var(--brand); }

/* Pills variant */
.sidebar-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0 4px; }
.sidebar-pills .sidebar-link {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
}
.sidebar-pills .sidebar-link.active {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}
.sidebar-pills .sidebar-count { display: none; }

/* Rail variant — vertical text */
.sidebar-rail .sidebar-list { gap: 4px; }
.sidebar-rail .sidebar-link {
  padding: 10px 12px;
  border-left: 2px solid transparent;
  border-radius: 0;
}
.sidebar-rail .sidebar-link.active {
  background: transparent;
  border-left-color: var(--brand);
  color: var(--brand);
}

/* ============================================================
   Main content
============================================================ */
.app-main {
  padding: var(--sp-7) var(--sp-7) var(--sp-8);
  min-width: 0;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

.page-hero { margin-bottom: var(--sp-6); }
.page-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--sp-2);
}
.page-title {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}
.page-title em { font-style: italic; color: var(--brand); }
.page-lede {
  font-weight: var(--fw-light);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0;
}

/* Search + filter row */
.filter-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-5);
  flex-wrap: wrap;
}
.search-wrap {
  flex: 1; min-width: 240px;
  display: flex; align-items: center; gap: var(--sp-2);
  height: 40px; padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-wrap:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
.search-wrap svg { stroke: currentColor; fill: none; stroke-width: 1.5; color: var(--fg-3); }
.search-wrap input {
  flex: 1; height: 100%; background: transparent; border: 0; outline: 0;
  font-family: var(--font-sans); font-size: var(--fs-sm); color: var(--fg-1);
}
.search-wrap input::placeholder { color: var(--fg-4); }
.search-wrap kbd {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
}

.filter-pills { display: flex; gap: 4px; padding: 4px; background: var(--bg-soft); border-radius: var(--r-md); }
.filter-pill {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--fg-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all var(--t-fast);
}
.filter-pill:hover { color: var(--fg-1); }
.filter-pill.active { background: var(--surface); color: var(--fg-1); box-shadow: var(--shadow-xs); }

/* ============================================================
   Continue rail
============================================================ */
.continue-rail {
  margin-bottom: var(--sp-7);
}
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.rail-head h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-xl);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.rail-head .rail-sub { font-size: var(--fs-sm); color: var(--fg-3); }
.rail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.rail-card {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--t-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.rail-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.rail-row {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.rail-row .fam-dot { flex: none; }
.rail-code {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  font-weight: var(--fw-sb); letter-spacing: 0.04em;
  color: var(--brand);
}
.rail-type {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: var(--fw-sb);
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.rail-type.flash { color: var(--accent); }

.rail-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-med);
  color: var(--fg-1);
  line-height: var(--lh-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  margin-top: 2px;
}
.rail-meta {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rail-pct {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-sb);
  color: var(--fg-1);
  flex: none;
}
.rail-pct.fresh { color: var(--fg-3); font-weight: var(--fw-reg); font-style: italic; font-family: var(--font-display); }
.rail-pct.done  { color: var(--success); }

.rail-bar {
  position: relative;
  width: 100%;
  height: 4px;
  background: var(--border-subtle);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: 4px;
}
.rail-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: var(--r-pill);
  background: var(--fill, var(--brand));
  transition: width var(--t-slow) var(--ease-out);
}

/* ============================================================
   Course family section
============================================================ */
.family-section {
  scroll-margin-top: 80px;
  margin-bottom: var(--sp-8);
}
.family-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}
.family-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-sb);
  letter-spacing: 0.08em;
  color: var(--brand);
  text-transform: uppercase;
  padding: 4px 8px;
  background: var(--brand-soft);
  border-radius: var(--r-sm);
}
.family-name {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0;
}
.family-meta { margin-left: auto; font-size: var(--fs-sm); color: var(--fg-3); }
.family-meta strong { color: var(--fg-1); font-weight: var(--fw-med); }
.family-blurb { font-size: var(--fs-sm); color: var(--fg-2); margin: 0 0 var(--sp-5); max-width: 60ch; }

/* ============================================================
   Cert cards — index grid
============================================================ */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-4);
}
[data-density="compact"] .cert-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}

.cert-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--density-card);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  display: flex; flex-direction: column; gap: var(--sp-2);
  min-height: 152px;
}
.cert-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* Faded state for cards without a published bank yet — still clickable. */
.cert-card.is-soon {
  opacity: 0.55;
  transition: opacity var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.cert-card.is-soon:hover {
  opacity: 0.9;
}

/* Card variants */
.cert-card.style-featured {
  background: var(--surface-2);
  border-color: var(--brand);
  border-width: 1px;
}
.cert-card.style-featured .cert-code { color: var(--brand); }

.cert-card.style-minimal {
  border-color: transparent;
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  min-height: auto;
}
.cert-card.style-minimal:hover {
  background: var(--bg-soft);
  transform: none;
  box-shadow: none;
  border-radius: var(--r-md);
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}

.cert-row-top { display: flex; align-items: center; gap: var(--sp-2); }
.cert-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-sb);
  letter-spacing: 0.06em;
  color: var(--brand);
}
.cert-card .fam-dot { margin-right: 2px; }
.cert-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: var(--fw-med);
  height: 20px; padding: 0 8px;
  border-radius: var(--r-pill);
  margin-left: auto;
}
.cert-status .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cert-status.ready    { background: var(--success-soft); color: var(--success); }
.cert-status.progress { background: var(--warning-soft); color: var(--warning); }
.cert-status.soon     { background: var(--bg-soft); color: var(--fg-3); }
.cert-status.soon .dot { background: var(--fg-4); }
.cert-status.retired  { background: var(--bg-soft); color: var(--fg-3); border: 1px dashed var(--fg-4); }
.cert-status.retired .dot { background: var(--fg-4); }

.cert-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-med);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
}
[data-density="compact"] .cert-name { font-size: var(--fs-base); }

.cert-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--sp-3);
  padding-top: var(--sp-3);
  font-size: var(--fs-xs); color: var(--fg-3);
}
.cert-foot .level {
  font-size: 10.5px; font-weight: var(--fw-sb);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-xs);
  background: var(--bg-soft); color: var(--fg-2);
}
.cert-foot .level.expert { background: var(--accent-soft); color: var(--accent); }
.cert-foot .level.fundamentals { background: var(--info-soft); color: var(--info); }
.cert-foot .level.associate { background: var(--brand-soft); color: var(--brand); }

/* The activity counter that REPLACED the ring on cert cards.
   Tiny text under the title — "2 sessions" or "Not started".
*/
.cert-activity {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.cert-activity.has { color: var(--brand); }
.cert-activity .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* Progress ring small */
.cert-ring {
  position: relative;
  width: 28px; height: 28px;
  flex: none;
}
.cert-ring svg { transform: rotate(-90deg); }
.cert-ring .bg { stroke: var(--border); fill: none; stroke-width: 3; }
.cert-ring .fg { stroke: var(--brand); fill: none; stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset var(--t-base) var(--ease-out); }
.cert-ring .lbl {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 9px; font-weight: var(--fw-sb); color: var(--fg-1);
}
.cert-ring.empty .fg { stroke: var(--fg-4); }

/* ============================================================
   Launcher (course or single-cert)
============================================================ */
.launcher-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-bottom: var(--sp-4);
  text-decoration: none;
}
.launcher-back:hover { color: var(--brand); }
.launcher-back svg { stroke: currentColor; fill: none; stroke-width: 1.5; }

.launcher-head { margin-bottom: var(--sp-6); display: flex; align-items: flex-start; gap: var(--sp-4); }
.launcher-head-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--dot, var(--fg-1));
  margin-top: 18px;
  flex: none;
}
.launcher-head h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-3xl);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  line-height: 1.1;
}
.launcher-sub {
  margin-top: 4px;
  display: flex; gap: var(--sp-4); align-items: center;
  font-size: var(--fs-sm); color: var(--fg-3); flex-wrap: wrap;
}
.launcher-sub a { color: var(--brand); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.launcher-sub a:hover { text-decoration: underline; }
.launcher-sub svg { stroke: currentColor; fill: none; stroke-width: 1.5; }

.launcher-cards { display: flex; flex-direction: column; gap: var(--sp-4); }

.launcher-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
}
.launcher-card-top {
  display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap;
}
.launcher-card-top .code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-sb);
  letter-spacing: 0.06em;
  color: var(--brand);
}
.launcher-card-top .name {
  font-size: var(--fs-md);
  font-weight: var(--fw-sb);
  color: var(--fg-1);
}
.launcher-card-top .age { font-size: var(--fs-sm); color: var(--fg-3); margin-left: auto; }
.launcher-card-stats {
  display: flex; gap: var(--sp-4); align-items: baseline;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
}
.launcher-card-stats .num {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-sb);
  color: var(--fg-1);
}
.launcher-card-stats .num.ready { color: var(--success); }
.launcher-card-stats .num.progress { color: var(--warning); }

.launcher-card-divider {
  border-top: 1px dashed var(--border);
  margin: var(--sp-4) calc(-1 * var(--sp-6));
}

.launcher-card-focus {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--fg-2);
  cursor: pointer;
}
.launcher-card-focus strong { color: var(--fg-1); font-weight: var(--fw-med); }
.launcher-card-focus .chev { color: var(--fg-3); }
.launcher-card-focus:hover .chev { color: var(--brand); }

.launcher-card-controls {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.launcher-card-controls label { font-size: var(--fs-sm); color: var(--fg-2); }
.q-count-input {
  width: 64px; height: 38px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--fg-1);
  box-shadow: var(--shadow-xs);
}
.q-count-input:focus { outline: 0; border-color: var(--brand); box-shadow: var(--focus-ring); }

/* ============================================================
   Buttons
============================================================ */
.btn {
  font-family: var(--font-sans);
  font-weight: var(--fw-med);
  font-size: var(--fs-sm);
  height: 38px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-soft);
  white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-primary.outline { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.btn-primary.outline:hover { background: var(--brand-soft); }
.btn-secondary { background: var(--surface); color: var(--fg-1); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-soft); }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { background: var(--bg-soft); color: var(--fg-1); }
.btn-danger-ghost { background: transparent; color: var(--danger); border-color: var(--border-strong); }
.btn-danger-ghost:hover { background: var(--danger-soft); }
.btn-sm { height: 30px; padding: 0 10px; font-size: var(--fs-xs); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.btn:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.btn svg { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   Quiz screen
============================================================ */
.quiz-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-9);
}

.quiz-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-4);
  box-shadow: var(--shadow-xs);
}
.quiz-header .qh-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-sb);
  letter-spacing: 0.06em;
  color: var(--brand);
}
.quiz-header .qh-name { font-size: var(--fs-md); font-weight: var(--fw-sb); color: var(--fg-1); }
.quiz-header .qh-progress {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--fg-1);
  margin-left: var(--sp-5);
}
.quiz-header .qh-progress span { color: var(--fg-3); }
.quiz-header .qh-age { font-size: var(--fs-sm); color: var(--fg-3); }
.quiz-header-right { margin-left: auto; display: flex; gap: var(--sp-2); }

.quiz-progress {
  height: 4px;
  background: var(--border-subtle);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: var(--sp-3) 0 var(--sp-4);
}
.quiz-progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: var(--r-pill);
  transition: width var(--t-base) var(--ease-out);
}

.q-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-xs);
}

.q-tags {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.q-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-sb);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  color: var(--fg-2);
  border: 1px solid var(--border);
}
.q-tag.type-tag {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
  cursor: pointer;
}
.q-tag.type-tag:hover { background: var(--brand-soft); }
.q-tag.type-tag.active { background: var(--brand-soft); }

.q-prompt {
  font-family: var(--font-sans);
  font-weight: var(--fw-med);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
  text-wrap: pretty;
}
.q-hint { font-size: var(--fs-sm); color: var(--fg-3); margin: 0 0 var(--sp-5); }

/* Option rows (single / multi) */
.q-options { display: flex; flex-direction: column; gap: var(--sp-3); }
.q-option {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-soft);
  font-size: var(--fs-sm);
  color: var(--fg-1);
  line-height: var(--lh-snug);
}
.q-option:hover { border-color: var(--border-strong); background: var(--bg-soft); }
.q-option.selected { border-color: var(--brand); background: var(--brand-soft); }
.q-option.correct {
  border-color: var(--success);
  background: var(--success-soft);
}
.q-option.wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.q-option .marker {
  width: 20px; height: 20px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none; margin-top: 1px;
  background: var(--surface);
}
.q-option.multi .marker { border-radius: 5px; }
.q-option.selected .marker { border-color: var(--brand); background: var(--brand); }
.q-option.selected .marker::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-brand); }
.q-option.multi.selected .marker::after { width: 10px; height: 6px; border: 1.5px solid var(--on-brand); border-top: 0; border-right: 0; border-radius: 0; background: transparent; transform: rotate(-45deg) translate(1px, -1px); }
.q-option.correct .marker { border-color: var(--success); background: var(--success); }
.q-option.correct .marker::after { background: var(--on-brand); }
.q-option.wrong .marker { border-color: var(--danger); background: var(--surface); }
.q-option.wrong .marker::after { width: 10px; height: 2px; background: var(--danger); border-radius: 1px; }

/* Order rows */
.q-order { display: flex; flex-direction: column; gap: var(--sp-3); }
.q-row {
  display: grid;
  grid-template-columns: 24px 28px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  user-select: none;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast);
}
.q-row.dragging {
  box-shadow: var(--shadow-lg);
  border-color: var(--brand);
  cursor: grabbing;
}
.q-row.swapping { transition-duration: 320ms; }
.q-row .grip {
  display: grid; grid-template-columns: 4px 4px; grid-template-rows: 4px 4px 4px;
  gap: 2px;
  color: var(--fg-3);
  cursor: grab;
  padding: 2px;
}
.q-row .grip::before, .q-row .grip::after {
  content: ""; display: block;
}
.q-row .grip-dots { display: grid; grid-template-columns: repeat(2, 4px); grid-auto-rows: 4px; gap: 3px; }
.q-row .grip-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.q-row .pos {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-sb);
  color: var(--fg-3);
  text-align: center;
}
.q-row .text { color: var(--fg-1); }
.q-row .arrows { display: flex; gap: 4px; }
.q-row .arrow-btn {
  width: 32px; height: 26px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg-2);
  font-size: 11px;
  cursor: pointer;
  transition: all var(--t-fast);
}
.q-row .arrow-btn:hover:not([disabled]) { background: var(--bg-soft); color: var(--fg-1); }
.q-row .arrow-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.q-row.correct { border-color: var(--success); background: var(--success-soft); }
.q-row.wrong   { border-color: var(--danger);  background: var(--danger-soft); }
.q-row.correct .pos { color: var(--success); }
.q-row.wrong .pos   { color: var(--danger); }

/* Feedback panel */
.feedback {
  margin-top: var(--sp-5);
  background: var(--bg-soft);
  border-left: 3px solid var(--success);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
}
.feedback.wrong { border-left-color: var(--danger); }
.feedback-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-sb);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: var(--sp-2);
}
.feedback.wrong .feedback-label { color: var(--danger); }
.feedback-body {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  margin: 0 0 var(--sp-2);
}
.feedback-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  margin: var(--sp-2) 0;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--border-strong);
  line-height: var(--lh-snug);
}
.feedback-source {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  font-family: var(--font-mono);
  word-break: break-all;
}
.feedback-source strong { color: var(--fg-2); font-weight: var(--fw-med); font-family: var(--font-sans); margin-right: 4px; }

/* Prominent banner variant */
.feedback.banner {
  border-left: 0;
  background: var(--success-soft);
  border: 1px solid var(--success);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  margin-top: 0;
}
.feedback.banner.wrong { background: var(--danger-soft); border-color: var(--danger); }

/* Quiz nav row */
.quiz-nav {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.quiz-nav .spacer { flex: 1; }

/* Pager */
.pager {
  margin-top: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pager-cell {
  min-width: 30px; height: 30px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg-2);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--t-fast);
}
.pager-cell:hover { background: var(--bg-soft); color: var(--fg-1); }
.pager-cell.current { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.pager-cell.answered { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 35%, var(--border)); color: var(--success); }
.pager-cell.flagged { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 35%, var(--border)); color: var(--warning); }

/* Quiz footer (under pager) */
.quiz-footer {
  margin-top: var(--sp-4);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.quiz-footer a { color: var(--fg-3); text-decoration: none; }
.quiz-footer a:hover { color: var(--brand); }

/* ============================================================
   Flashcards
============================================================ */
.flash-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-9);
}
.flash-header {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.flash-header .qh-progress { margin-left: 0; }
.flash-stage {
  perspective: 1600px;
  display: grid;
  place-items: stretch;
  margin: var(--sp-5) 0;
}
.flash-card {
  width: 100%;
  display: grid;
  grid-template-areas: "stack";
  position: relative;
  transition: transform 500ms var(--ease-out);
  transform-style: preserve-3d;
  cursor: pointer;
}
.flash-card.flipped { transform: rotateY(180deg); }
.flash-face {
  grid-area: stack;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: calc(var(--sp-6) + 4px) var(--sp-7) calc(var(--sp-8));
  min-height: 320px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: var(--shadow-sm);
  gap: var(--sp-5);
}
.flash-face.back {
  transform: rotateY(180deg);
  background: var(--surface-2);
  justify-content: flex-start;
  text-align: left;
  padding-top: calc(var(--sp-7) + var(--sp-3));
}
.flash-face .face-label {
  position: absolute; top: var(--sp-4); left: var(--sp-5);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-sb);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.flash-face .face-num {
  position: absolute; top: var(--sp-4); right: var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs); color: var(--fg-3);
}
.flash-face .front-text {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  max-width: 28ch;
}
.flash-face .back-text {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  max-width: 56ch;
  width: 100%;
}
.flash-front-items {
  list-style: decimal inside;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  line-height: var(--lh-loose);
  margin: 0;
  padding: 0;
  max-width: 56ch;
  width: 100%;
}
.flash-front-items li { margin: 2px 0; }
.flash-face .flip-hint {
  margin-top: auto;
  font-size: var(--fs-xs); color: var(--fg-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.flash-face .flip-hint kbd {
  font-family: var(--font-mono); font-size: 10.5px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 6px;
}

.flash-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.flash-dots { display: flex; gap: 6px; }
.flash-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--border-strong);
  cursor: pointer;
  transition: all var(--t-fast);
}
.flash-dot.current { background: var(--brand); width: 22px; border-radius: var(--r-pill); }
.flash-dot.known { background: var(--success); }

.flash-rating {
  display: flex; gap: var(--sp-2);
  margin-top: var(--sp-4);
  justify-content: center;
}

/* ============================================================
   Footer
============================================================ */
.site-footer {
  margin-top: var(--sp-9);
  border-top: 1px solid var(--border);
  padding: var(--sp-6) var(--sp-7);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-6);
  max-width: var(--content-bleed);
  margin-left: auto; margin-right: auto;
}
.site-footer .col h4 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-sb);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 var(--sp-3);
}
.site-footer .col { display: flex; flex-direction: column; gap: 6px; }
.site-footer .col a { color: var(--fg-2); text-decoration: none; font-size: var(--fs-sm); }
.site-footer .col a:hover { color: var(--brand); }
.site-footer .brand-col p {
  font-size: var(--fs-sm); color: var(--fg-2);
  margin: 0; max-width: 32ch; line-height: var(--lh-normal);
}
.site-footer .footer-meta {
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--fg-3);
  margin-top: var(--sp-3);
}

/* ============================================================
   Misc
============================================================ */
.toast {
  position: fixed;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--fg-1); color: var(--bg);
  font-size: var(--fs-sm);
  padding: 10px 16px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}
.toast.show { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ============================================================
   Session rows (used by "Recent activity" on launcher and the
   full Sessions page)
============================================================ */
.session-list {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.session-row {
  display: grid;
  grid-template-columns: 110px 80px 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease-soft);
}
.session-row:hover { border-color: var(--border-strong); }
.session-row .stype {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: var(--fw-sb);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--brand);
  color: var(--brand);
  background: transparent;
  text-align: center;
  width: fit-content;
}
.session-row .stype.flash {
  border-color: var(--accent);
  color: var(--accent);
}
.session-row .scode {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-sb);
  color: var(--fg-1);
  display: inline-flex; align-items: center; gap: 6px;
}
.session-row .sname {
  min-width: 0;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.session-row .sname strong { color: var(--fg-1); font-weight: var(--fw-med); }
.session-row .swhen {
  font-size: var(--fs-xs); color: var(--fg-3);
  font-family: var(--font-mono);
}
.session-row .sactions { display: flex; gap: 6px; }

/* Activity rail (replaces the "continue" rail when grouped) */
.activity-rail .rail-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rail-head .rail-link {
  font-size: var(--fs-sm);
  color: var(--brand);
  text-decoration: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.rail-head .rail-link:hover { text-decoration: underline; }
.rail-head .rail-link svg { stroke: currentColor; fill: none; stroke-width: 1.5; }

/* ============================================================
   Family page (course view) — compact grid layout
============================================================ */
.family-page-head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.family-page-head h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-3xl);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  line-height: 1.1;
}
.family-page-head .family-blurb {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  max-width: 56ch;
}
.family-page-head .stats {
  margin-top: var(--sp-3);
  display: flex; gap: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--fg-3);
  flex-wrap: wrap;
}
.family-page-head .stats strong {
  color: var(--fg-1);
  font-family: var(--font-mono);
  font-weight: var(--fw-sb);
  margin-right: 4px;
}
.family-page-head .stats span.s-ready  strong { color: var(--success); }
.family-page-head .stats span.s-progress strong { color: var(--warning); }
.family-page-head .stats span.s-soon strong { color: var(--fg-3); }

/* ============================================================
   Sessions page
============================================================ */
.sessions-page-head {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.sessions-group {
  margin-bottom: var(--sp-6);
}
.sessions-group-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0;
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.sessions-group-head h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-lg);
  margin: 0;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
.sessions-group-head .count {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}
.sessions-group-head .clear-group {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--fg-3);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-sm);
}
.sessions-group-head .clear-group:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.sessions-empty {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  color: var(--fg-3);
}
.sessions-empty h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-reg);
  font-size: var(--fs-2xl);
  color: var(--fg-1);
  margin: 0 0 var(--sp-3);
}
.sessions-empty p { max-width: 44ch; margin: 0 auto; }

/* ============================================================
   Eyebrow above launcher recent activity
============================================================ */
.section-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-sb);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: var(--sp-7) 0 var(--sp-3);
}

/* ============================================================
   Boot loading state (shown briefly before app.js mounts)
============================================================ */
.boot-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--fg-3);
}