/* self-hosted webfonts (emitFonts) */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/inter-700.woff2") format("woff2");
}

/* brand.json design tokens (white-label, derived) */
:root {
  --bg: #262626;
  --bg-deep: #1f1f1e;
  --panel: #2e2e2c;
  --panel-2: #353532;
  --text: #F5F5F3;
  --muted: #b6b6b0;
  --border: #45453f;
  --blue: #1F5FBF;
  --ocean: #4CA0E6;
  --red: #E53935;
  --gold: #FFD23F;
  --green: #4caf6d;
  --paper: #FAFAF8;
  --ink: #262626;
  --surface-0: #131313;
  --surface-1: #1e1e1e;
  --surface-2: #313131;
  --surface-3: #3a3a3a;
  --glass: rgba(68, 68, 68, 0.55);
  --glass-strong: rgba(68, 68, 68, 0.78);
  --text-1: #F5F5F3;
  --text-2: #bbbbba;
  --text-3: #8e8e8d;
  --accent: #4CA0E6;
  --accent-strong: #61abe9;
  --accent-soft: rgba(76, 160, 230, 0.14);
  --glow: rgba(76, 160, 230, 0.42);
  --glow-soft: rgba(76, 160, 230, 0.22);
  --border-soft: rgba(245, 245, 243, 0.08);
  --border-glow: rgba(76, 160, 230, 0.4);
  --hairline: rgba(245, 245, 243, 0.06);
  --grad-a: rgba(76, 160, 230, 0.16);
  --grad-b: rgba(31, 95, 191, 0.1);
  --grad-wash: rgba(76, 160, 230, 0.07);
  --font-display: "Space Grotesk", "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
}

/* per-track gradient worlds */
[data-track="foundations"] {
  --tk-accent: #4CA0E6;
  --tk-accent-strong: #65adea;
  --tk-soft: rgba(76, 160, 230, 0.14);
  --tk-glow: rgba(76, 160, 230, 0.42);
  --tk-glow-soft: rgba(76, 160, 230, 0.2);
  --tk-grad-a: rgba(76, 160, 230, 0.18);
  --tk-grad-b: rgba(57, 120, 173, 0.12);
  --tk-border: rgba(76, 160, 230, 0.4);
}
[data-track="core"] {
  --tk-accent: #1F5FBF;
  --tk-accent-strong: #3e75c8;
  --tk-soft: rgba(31, 95, 191, 0.14);
  --tk-glow: rgba(31, 95, 191, 0.42);
  --tk-glow-soft: rgba(31, 95, 191, 0.2);
  --tk-grad-a: rgba(31, 95, 191, 0.18);
  --tk-grad-b: rgba(23, 71, 143, 0.12);
  --tk-border: rgba(31, 95, 191, 0.4);
}
[data-track="diagnostics"] {
  --tk-accent: #FFD23F;
  --tk-accent-strong: #ffd85a;
  --tk-soft: rgba(255, 210, 63, 0.14);
  --tk-glow: rgba(255, 210, 63, 0.42);
  --tk-glow-soft: rgba(255, 210, 63, 0.2);
  --tk-grad-a: rgba(255, 210, 63, 0.18);
  --tk-grad-b: rgba(191, 158, 47, 0.12);
  --tk-border: rgba(255, 210, 63, 0.4);
}
[data-track="advanced"] {
  --tk-accent: #E53935;
  --tk-accent-strong: #e95551;
  --tk-soft: rgba(229, 57, 53, 0.14);
  --tk-glow: rgba(229, 57, 53, 0.42);
  --tk-glow-soft: rgba(229, 57, 53, 0.2);
  --tk-grad-a: rgba(229, 57, 53, 0.18);
  --tk-grad-b: rgba(172, 43, 40, 0.12);
  --tk-border: rgba(229, 57, 53, 0.4);
}
[data-track="master"] {
  --tk-accent: #F5F5F3;
  --tk-accent-strong: #f6f6f5;
  --tk-soft: rgba(245, 245, 243, 0.14);
  --tk-glow: rgba(245, 245, 243, 0.42);
  --tk-glow-soft: rgba(245, 245, 243, 0.2);
  --tk-grad-a: rgba(245, 245, 243, 0.18);
  --tk-grad-b: rgba(184, 184, 182, 0.12);
  --tk-border: rgba(245, 245, 243, 0.4);
}

/* Premium dark SaaS theme for the Technician Certification LMS.
   Build-time design tokens (derived from brand.json) are prepended ahead of this
   file by designTokensCss(). The :root below is a self-contained fallback so the
   raw stylesheet still renders if served alone. Layer order:
     (a) token fallbacks + reset, (b) fluid type scale, (c) primitives,
     (d) site chrome, (e) per-surface sections, (f) motion, (g) print.
   No em dashes anywhere. No network. */

/* ============================================================
   (a) token fallbacks + modern reset
   ============================================================ */

:root {
  --bg: #262626;
  --bg-deep: #161615;
  --panel: #2e2e2c;
  --panel-2: #353532;
  --text: #F5F5F3;
  --muted: #b6b6b0;
  --border: #45453f;
  --blue: #1F5FBF;
  --ocean: #4CA0E6;
  --red: #E53935;
  --gold: #FFD23F;
  --green: #4caf6d;
  --paper: #FAFAF8;
  --ink: #262626;

  /* surface ladder, deepest to glassiest */
  --surface-0: #161615;
  --surface-1: #1f1f1e;
  --surface-2: #2e2e2c;
  --surface-3: #353532;
  --glass: rgba(58, 58, 54, 0.55);
  --glass-strong: rgba(58, 58, 54, 0.78);

  /* text ladder */
  --text-1: #F5F5F3;
  --text-2: #c9c9c4;
  --text-3: #9a9a94;

  /* accent + glow */
  --accent: #4CA0E6;
  --accent-strong: #6fb4ec;
  --accent-soft: rgba(76, 160, 230, 0.14);
  --glow: rgba(76, 160, 230, 0.42);
  --glow-soft: rgba(76, 160, 230, 0.22);

  /* borders */
  --border-soft: rgba(245, 245, 243, 0.08);
  --border-glow: rgba(76, 160, 230, 0.4);
  --hairline: rgba(245, 245, 243, 0.06);

  /* gradient stops */
  --grad-a: rgba(76, 160, 230, 0.16);
  --grad-b: rgba(31, 95, 191, 0.1);
  --grad-wash: rgba(76, 160, 230, 0.07);

  /* fonts: modern system stacks, Phase 2 wires real font files */
  --font-display: "Space Grotesk", "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* legacy alias kept so any --font reference still resolves */
  --font: var(--font-text);

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;

  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 250ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-deep);
  color: var(--text-1);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* ambient radial washes layered over the deep base */
  background-image:
    radial-gradient(1100px 620px at 12% -8%, var(--grad-a), transparent 60%),
    radial-gradient(900px 540px at 100% 0%, var(--grad-b), transparent 55%),
    radial-gradient(1400px 900px at 50% 120%, var(--grad-wash), transparent 60%);
  background-attachment: fixed;
  min-height: 100vh;
}

img { max-width: 100%; }

/* FROZEN: .hidden meaning must not change */
.hidden { display: none !important; }
.muted { color: var(--text-3); font-size: 0.9em; }
.center { text-align: center; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { text-decoration: underline; color: var(--accent-strong); }

code {
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.9em;
  font-family: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

/* ============================================================
   (b) fluid type scale (clamp)
   ============================================================ */

h1, h2, h3, .cert-title, .ib-overlay-title {
  font-family: var(--font-display);
  font-weight: 700;
}
.modhead h1, .hero h1 {
  margin: 6px 0 12px;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.article h2, .section-h { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.45rem); }
.article h3 { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); }
.cert-title { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.3rem); }

/* ============================================================
   (c) primitives: glass cards, buttons, chips, inputs, surfaces
   ============================================================ */

.card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 18px 0;
  box-shadow: 0 1px 0 var(--hairline) inset, 0 18px 40px -28px rgba(0, 0, 0, 0.7);
}
.card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.btn {
  display: inline-block;
  position: relative;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color: #0c1622;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease), filter var(--t-fast) var(--ease);
  box-shadow: 0 8px 24px -12px var(--glow);
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 0 0 1px var(--border-glow), 0 12px 30px -10px var(--glow);
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft), 0 0 0 1px var(--accent); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
.btn.ghost {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--border-glow);
  box-shadow: none;
}
.btn.ghost:hover { background: var(--glow-soft); box-shadow: 0 0 0 1px var(--border-glow); }

.chip {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.chip.id {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid var(--border-glow);
}
.chip.track { background: var(--glass); color: var(--accent); border: 1px solid var(--border-glow); }
.chip.outline { background: transparent; color: var(--text-3); border: 1px solid var(--border-soft); }
.chip.gold { background: var(--gold); color: var(--ink); }

/* text inputs share a glassy surface with a glow focus ring */
#tech-name, #fc-search, .ib-overlay input {
  width: 100%;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-family: var(--font-text);
  font-size: 1rem;
  padding: 12px 14px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
#tech-name:focus, #fc-search:focus, .ib-overlay input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--glow-soft);
}

/* ============================================================
   (d) site chrome: header, footer, layout
   ============================================================ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--glass-strong);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 50;
  flex-wrap: wrap;
  box-shadow: 0 1px 0 var(--hairline) inset, 0 10px 30px -24px rgba(0, 0, 0, 0.8);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-1);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.brand:hover { text-decoration: none; }
.brand img { height: 38px; width: auto; display: block; }
.navlinks { display: flex; gap: 6px; flex-wrap: wrap; }
.navlinks a {
  color: var(--text-2);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.navlinks a:hover {
  text-decoration: none;
  border-color: var(--border-glow);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 36px 24px 96px;
}
/* dashboard wrap exposes its inner padding so track-section gradient worlds can
   bleed to the wrap edges and re-center their content column */
body.dash-page .wrap { --wrap-pad: 24px; --col: 992px; }

.sitefoot {
  border-top: 1px solid var(--border-soft);
  background: var(--surface-0);
  color: var(--text-3);
  text-align: center;
  font-size: 0.75rem;
  padding: 26px 24px;
  letter-spacing: 0.02em;
}
.sitefoot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  max-width: 720px;
  margin: 0 auto;
}
.sitefoot-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--text-1);
}
.sitefoot-contact {
  color: var(--text-2);
  line-height: 1.7;
}
.sitefoot-fine {
  color: var(--text-3);
  font-size: 0.7rem;
}
.sitefoot-dot {
  display: inline-block;
  margin: 0 8px;
  color: var(--text-3);
  opacity: 0.6;
}

/* ============================================================
   (e) per-surface sections (restyle existing selectors)
   ============================================================ */

/* ---------- module page ---------- */

/* Cinematic banner: the module cover SVG washed by the track's --tk-* gradient
   world (body[data-track] is set by initModulePage), with the existing .modhead
   title/chips/status block overlaid inside. Full-bleed to the .wrap padding. */
.modhero {
  position: relative;
  margin: -36px calc(-1 * var(--wrap-pad, 24px)) 32px;
  padding: 56px var(--wrap-pad, 24px) 30px;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--tk-border, var(--border-soft));
}
.modhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(90% 130% at 0% 0%, var(--tk-grad-a, var(--glow-soft)), transparent 58%),
    radial-gradient(95% 130% at 100% 100%, var(--tk-grad-b, transparent), transparent 60%),
    var(--surface-1);
}
.modhero-art {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -3%;
  transform: translateY(-50%);
  width: 42%;
  max-width: 460px;
  height: auto;
  opacity: 0.16;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent);
  mask-image: radial-gradient(closest-side, #000 52%, transparent);
}
.modhero-inner { position: relative; max-width: 1040px; margin: 0 auto; }
.modhero .modhead { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.modhero h1 {
  font-size: clamp(1.55rem, 1rem + 2.2vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
}

.modhead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 18px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.program {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }

.status-badge {
  display: inline-block;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-badge.passed { background: var(--green); color: #08160e; }
.status-badge.testout { background: var(--gold); color: var(--ink); }
.status-badge.locked { background: var(--glass); color: var(--text-3); border: 1px solid var(--border-soft); }
.status-badge.available { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--border-glow); }

.testout-card { border-left: 4px solid var(--gold); }

/* ---------- article content (premium docs treatment) ---------- */

/* Measured reading column with refined type rhythm. Wide blocks (tables, visuals,
   callouts) still span the full column; prose is capped near 70ch for readability. */
.article {
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--text-2);
}
.article > p,
.article > ul,
.article > ol,
.article > blockquote,
.article > h2,
.article > h3,
.article > h4 { max-width: 70ch; }
.article h2 {
  font-family: var(--font-display);
  color: var(--text-1);
  font-size: 1.5rem;
  margin: 48px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
  letter-spacing: -0.015em;
  scroll-margin-top: 88px;
}
.article h2::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.92em;
  margin-right: 12px;
  vertical-align: -0.06em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--tk-accent, var(--accent)), var(--tk-accent-strong, var(--accent-strong)));
  box-shadow: 0 0 10px -1px var(--tk-glow, var(--glow));
}
.article h3 { font-family: var(--font-display); color: var(--text-1); font-size: 1.18rem; margin: 30px 0 8px; letter-spacing: -0.005em; }
.article h4 { color: var(--text-1); font-size: 1.02rem; margin: 22px 0 6px; letter-spacing: 0.01em; }
.article p { margin: 14px 0; color: var(--text-2); }
.article a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-glow); }
.article a:hover { color: var(--accent-strong); text-decoration-color: currentColor; }
.article strong { color: var(--text-1); font-weight: 700; }
.article hr {
  border: 0;
  height: 1px;
  margin: 36px 0;
  background: linear-gradient(90deg, transparent, var(--border-glow), transparent);
}
.article ul, .article ol { margin: 14px 0; padding-left: 26px; color: var(--text-2); }
.article li { margin: 7px 0; padding-left: 4px; }
.article li::marker { color: var(--accent); }
.article ol li::marker { color: var(--text-3); font-weight: 700; }
.article code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.88em;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--accent-strong);
  white-space: nowrap;
}
.article blockquote {
  margin: 18px 0;
  padding: 4px 18px;
  border-left: 3px solid var(--border-glow);
  color: var(--text-2);
  font-style: italic;
}
.section-h {
  color: var(--accent);
  font-family: var(--font-display);
  margin: 42px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}

.callout {
  position: relative;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--accent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 16px 20px;
  margin: 20px 0;
  box-shadow: 0 14px 34px -28px rgba(0, 0, 0, 0.7);
}
.callout > div:last-child { color: var(--text-2); line-height: 1.65; }
.callout-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--accent);
}
.callout.ib { border-left-color: var(--blue); background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 60%), var(--glass); }
.callout.ib .callout-label { color: var(--accent); }
.callout.phx { border-left-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%), var(--glass); }
.callout.phx .callout-label { color: var(--gold); }
.callout.darrel { border-left-color: var(--red); background: linear-gradient(180deg, color-mix(in srgb, var(--red) 8%, transparent), transparent 60%), var(--glass); }
.callout.darrel .callout-label { color: var(--red); }

.tablewrap {
  overflow-x: auto;
  margin: 22px 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px -30px rgba(0, 0, 0, 0.7);
}
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.tablewrap th {
  background: var(--accent-soft);
  color: var(--accent-strong);
  text-align: left;
  padding: 11px 14px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-glow);
}
.tablewrap td { padding: 10px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: top; color: var(--text-2); }
.tablewrap tbody tr:last-child td { border-bottom: 0; }
.tablewrap tr:nth-child(even) td { background: var(--hairline); }
.tablewrap tbody tr { transition: background var(--t-fast) var(--ease); }
.tablewrap tbody tr:hover td { background: var(--accent-soft); color: var(--text-1); }

ul.checklist { list-style: none; padding-left: 4px; margin: 12px 0; }
ul.checklist li { display: flex; gap: 10px; margin: 8px 0; align-items: flex-start; }
ul.checklist .box {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-top: 5px;
  border: 2px solid var(--accent);
  border-radius: 4px;
}

.visual-card {
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 16px 0;
  box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.7);
}
.visual-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.practical { border-left: 4px solid var(--gold); }
.pdf-link { margin: 28px 0; }

/* ---------- section nav (sticky right rail, desktop only) ---------- */

/* Built by initSectionNav() and appended to <body>. Hidden by default; revealed
   on wide viewports where there is room beside the centered .wrap column. */
.section-nav { display: none; }

@media (min-width: 1100px) {
  .section-nav {
    display: block;
    position: fixed;
    top: 96px;
    right: max(20px, calc((100vw - 1040px) / 2 - 230px));
    width: 200px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding-left: 16px;
    z-index: 40;
  }
  .section-nav-progress {
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: var(--border-soft);
    overflow: hidden;
  }
  .section-nav-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 0%;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--tk-accent, var(--accent)), var(--tk-accent-strong, var(--accent-strong)));
    box-shadow: 0 0 8px -1px var(--tk-glow, var(--glow));
    transition: height var(--t-fast) var(--ease);
  }
  .section-nav-cap {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 12px;
  }
  .section-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .section-nav-link {
    display: block;
    padding: 6px 0 6px 2px;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--text-3);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
    padding-left: 12px;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  }
  .section-nav-link:hover { color: var(--text-1); }
  .section-nav-link:focus-visible { outline: none; color: var(--accent-strong); box-shadow: 0 0 0 2px var(--glow-soft); border-radius: 3px; }
  .section-nav-link.active {
    color: var(--accent-strong);
    border-left-color: var(--tk-accent, var(--accent));
    font-weight: 600;
  }
}

/* ---------- quiz engine ---------- */

#quiz-area { margin-top: 14px; }
.quiz-progress {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.quiz-q { font-size: 1.08rem; font-weight: 600; margin-bottom: 14px; color: var(--text-1); }
.quiz-kind { color: var(--gold); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.quiz-opts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--glass);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.opt:hover { border-color: var(--border-glow); }
.opt input { margin-top: 4px; accent-color: var(--accent); }
.opt.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--border-glow), 0 0 18px -8px var(--glow);
}

.quiz-result { margin-top: 14px; }
.quiz-result .score {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.quiz-result.pass .score { color: var(--green); }
.quiz-result.fail .score { color: var(--red); }
.review-item {
  background: var(--glass);
  border: 1px solid var(--border-soft);
  border-left: 4px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin: 10px 0;
  font-size: 0.92rem;
}
.review-item .ri-q { font-weight: 700; margin-bottom: 6px; }
.review-item .ri-yours { color: var(--red); }
.review-item .ri-correct { color: var(--green); }
.review-item .ri-exp { color: var(--text-3); margin-top: 6px; }
.review-item .opt-wrong { color: var(--red); }
.review-item .opt-correct { color: var(--green); font-weight: 600; }

/* ---------- quiz: phase 6 visual upgrade ---------- */

/* slide-in on each freshly inserted question (pure CSS, plays on insert) */
.quiz { animation: qSlideIn 0.34s var(--ease) both; }
@keyframes qSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* decorative progress dots */
.quiz-dots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.quiz-dots .qdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-soft);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.quiz-dots .qdot.done { background: var(--tk-accent, var(--accent)); }
.quiz-dots .qdot.current {
  background: var(--tk-accent-strong, var(--accent-strong));
  transform: scale(1.5);
  box-shadow: 0 0 10px -2px var(--tk-glow, var(--glow));
}

/* selected-option glow ring (no correctness revealed mid-quiz) */
.opt.opt-selected {
  border-color: var(--tk-accent, var(--accent));
  background: var(--tk-soft, var(--accent-soft));
  box-shadow: 0 0 0 1px var(--tk-accent, var(--accent)), 0 0 22px -8px var(--tk-glow, var(--glow));
}

/* animated score reveal: SVG ring driven by --ring-pct set inline at render */
.score-reveal {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 6px 0 18px;
  animation: scoreRevealIn 0.5s var(--ease) both;
}
@keyframes scoreRevealIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.score-ring { width: 96px; height: 96px; flex: 0 0 auto; }
.score-ring-track { fill: none; stroke: var(--surface-0); stroke-width: 10; }
.score-ring-fill {
  fill: none;
  stroke: var(--tk-accent, var(--accent));
  stroke-width: 10;
  stroke-linecap: round;
  /* r=52 -> circumference ~326.726 */
  stroke-dasharray: 326.726;
  stroke-dashoffset: 326.726;
  animation: scoreRingFill 0.9s var(--ease) 0.1s forwards;
}
@keyframes scoreRingFill {
  to { stroke-dashoffset: calc(326.726 - 326.726 * (var(--ring-pct) / 100)); }
}
.quiz-result.pass .score-ring-fill { stroke: var(--green); filter: drop-shadow(0 0 8px rgba(76, 175, 109, 0.5)); }
.quiz-result.fail .score-ring-fill { stroke: var(--red); }
.score-reveal-body { min-width: 0; }
.quiz-result-head {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.quiz-result.pass .quiz-result-head { color: var(--green); }
.quiz-result.fail .quiz-result-head { color: var(--text-2); }

/* next-module card on pass */
.next-module-card {
  display: block;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--radius-md, 14px);
  border: 1px solid var(--tk-border, var(--border-soft));
  background:
    linear-gradient(135deg, var(--tk-grad-a, var(--glow-soft)), transparent 70%),
    var(--glass);
  text-decoration: none;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.next-module-card:hover {
  border-color: var(--tk-accent, var(--accent));
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}
.nmc-kicker {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tk-accent, var(--accent));
}
.nmc-label { display: block; font-weight: 700; color: var(--text-1); margin-top: 4px; }
.nmc-sub { display: block; color: var(--text-3); font-size: 0.88rem; margin-top: 2px; }

/* ---------- quiz focus mode ---------- */

/* When a quiz starts, body.quiz-focus hides page chrome and centers the quiz
   host in a calm, cinematic layer. The quiz stays inside its existing container,
   so the [data-track] vars on <body> remain available. Cleared when the result
   renders (app.js finish()). */
body.quiz-focus .topbar,
body.quiz-focus .sitefoot,
body.quiz-focus .tabbar,
body.quiz-focus .section-nav { display: none !important; }
body.quiz-focus .modhero { opacity: 0.18; filter: saturate(0.6); transition: opacity var(--t-base) var(--ease); }
body.quiz-focus #module-body > *:not(#quiz-host):not(#testout-card) { display: none; }
/* While the quiz host is the focused card, dim the test-out card to nothing; but
   when the test-out itself is the running quiz, keep its card visible instead. */
body.quiz-focus #module-body > #testout-card:not(:has(.quiz)) { display: none; }
body.quiz-focus .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body.quiz-focus #quiz-host,
body.quiz-focus #testout-card {
  width: min(720px, 100%);
  margin: 24px auto 0;
  background:
    radial-gradient(120% 140% at 50% -20%, var(--tk-glow-soft, var(--glow-soft)), transparent 60%),
    var(--surface-1);
  border: 1px solid var(--tk-border, var(--border-soft));
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
  animation: focusCardIn 0.42s var(--ease) both;
}
@keyframes focusCardIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- confetti canvas ---------- */

.ib-confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 120;
}

/* ---------- dashboard ---------- */

/* continue-learning hero: cover-art backdrop, greeting, progress ring, CTA */
.hero-host { min-height: 280px; }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 36px;
  padding: 32px 34px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--tk-border, var(--border-soft));
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--tk-grad-a, var(--glow-soft)), transparent 62%),
    var(--glass);
  box-shadow: 0 30px 70px -44px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.34;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 65%);
  mask-image: linear-gradient(90deg, transparent, #000 65%);
}
.hero-art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(115%);
}
.hero-main, .hero-side { position: relative; z-index: 1; }
.hero-kicker {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tk-accent, var(--accent));
}
.hero-greet { margin-top: 10px; color: var(--text-3); font-size: 0.95rem; }
.hero-greet span { color: var(--text-1); font-weight: 600; }
.hero-head {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 8px 0 10px;
}
.hero-sub { color: var(--text-2); max-width: 46ch; margin: 0 0 20px; }
.hero-cta { font-size: 1rem; padding: 12px 26px; }

.hero-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.ring-wrap { position: relative; width: 140px; height: 140px; align-self: center; }
.ring { width: 140px; height: 140px; display: block; }
.ring-track { fill: none; stroke: var(--surface-0); stroke-width: 12; }
.ring-fill {
  fill: none;
  stroke: var(--tk-accent, var(--accent));
  stroke-width: 12;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--tk-glow, var(--glow)));
  transition: stroke-dasharray var(--t-slow) var(--ease);
}
.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#progress-label { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
.ring-cap { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-top: 2px; }

.progress-line { display: flex; align-items: center; gap: 12px; }
.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
}
#progress-fill {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--tk-accent, var(--accent)), var(--tk-accent-strong, var(--accent-strong)));
  border-radius: 999px;
  box-shadow: 0 0 18px -2px var(--tk-glow, var(--glow));
  transition: width var(--t-slow) var(--ease);
}
.hero-name-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* gold cert-unlock hero */
.hero-gold {
  border-color: var(--gold);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 210, 63, 0.22), transparent 55%),
    linear-gradient(135deg, rgba(255, 210, 63, 0.16), transparent 60%),
    var(--glass);
  box-shadow: 0 30px 70px -40px rgba(255, 210, 63, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.hero-gold .hero-kicker { color: var(--gold); }
.hero-gold .ring-fill { stroke: var(--gold); filter: drop-shadow(0 0 10px rgba(255, 210, 63, 0.55)); }
.hero-gold #progress-fill { background: linear-gradient(90deg, var(--gold), #fff0b8); box-shadow: 0 0 18px -2px rgba(255, 210, 63, 0.6); }
.hero-gold .hero-cta { background: linear-gradient(180deg, #ffe27a, var(--gold)); color: var(--ink); box-shadow: 0 10px 30px -10px rgba(255, 210, 63, 0.6); }

/* track sections become full-width gradient worlds, each its own --tk-* world */
.track-section {
  position: relative;
  margin: 0 calc(-1 * var(--wrap-pad, 0px));
  padding: 36px var(--wrap-pad, 0px);
  --accent: var(--tk-accent, var(--accent));
  overflow: hidden;
  isolation: isolate;
}
.track-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(80% 120% at 0% 0%, var(--tk-grad-a, var(--glow-soft)), transparent 60%),
    radial-gradient(90% 120% at 100% 100%, var(--tk-grad-b, transparent), transparent 60%);
  opacity: 0.9;
}
.track-section .track-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: -4%;
  transform: translateY(-50%);
  width: 46%;
  max-width: 520px;
  height: auto;
  opacity: 0.12;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.track-inner { position: relative; max-width: var(--col, 1080px); margin: 0 auto; }
.track-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tk-border, var(--border-soft));
  letter-spacing: -0.01em;
}
.track-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--tk-accent, var(--accent, var(--ocean)));
  box-shadow: 0 0 12px -1px var(--tk-glow, var(--glow));
  flex: 0 0 auto;
}
.track-count { margin-left: auto; color: var(--text-3); font-size: 0.85rem; font-weight: 600; }

.modgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}

/* modcard: cover art with HTML overlay (title once, id chip, status). No
   duplicate title anywhere on the card. */
.modcard {
  display: flex;
  flex-direction: column;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  color: var(--text-1);
  overflow: hidden;
  transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  box-shadow: 0 16px 36px -30px rgba(0, 0, 0, 0.8);
}
.modcard:hover {
  text-decoration: none;
  border-color: var(--tk-border, var(--border-glow));
  transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--tk-border, var(--border-glow)), 0 26px 50px -26px var(--tk-glow, var(--glow));
}
.modcard .mc-cover {
  position: relative;
  display: block;
  line-height: 0;
  overflow: hidden;
}
.modcard .mc-cover img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}
.modcard:hover .mc-cover img { transform: scale(1.06); }
.modcard .mc-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(15, 15, 14, 0.62) 78%, rgba(15, 15, 14, 0.88));
  pointer-events: none;
}
.modcard .mc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
  line-height: 1.3;
}
.modcard .mc-top { display: flex; align-items: center; gap: 8px; }
.modcard .mc-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}
.modcard .mc-status {
  padding: 10px 14px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--border-soft);
}
.modcard.passed { border-top: 3px solid var(--green); }
.modcard.passed .mc-status { color: var(--green); }
.modcard.testout { border-top: 3px solid var(--gold); }
.modcard.testout .mc-status { color: var(--gold); }
.modcard.available { border-top: 3px solid var(--tk-accent, var(--accent)); }
.modcard.available .mc-status { color: var(--tk-accent, var(--accent)); }
.modcard.locked { opacity: 0.5; border-top: 3px solid var(--border); }
.modcard.locked .mc-status { color: var(--text-3); }
.modcard.locked:hover { transform: none; box-shadow: 0 16px 36px -30px rgba(0, 0, 0, 0.8); border-color: var(--border-soft); }
.modcard.locked:hover .mc-cover img { transform: none; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; }
  .hero-side { order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .ring-wrap { align-self: flex-start; }
}

/* ---------- videos ---------- */

.videos { margin: 8px 0 24px; }
.vid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.vid-slot {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 36px -30px rgba(0, 0, 0, 0.8);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.vid-slot:hover {
  border-color: var(--border-glow);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--border-glow), 0 0 30px -6px var(--glow-soft);
  transform: translateY(-2px);
}
.vid-slot-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft);
}
.vid-slot-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.vid-player {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
  aspect-ratio: 16 / 9;
}
.vid-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.vid-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vid-soon {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}
.vid-soon-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  background: linear-gradient(180deg, rgba(15, 15, 14, 0.55), rgba(15, 15, 14, 0.82));
}
/* Subtle centered play glyph (disc + triangle) above the coming-soon copy.
   The triangle is drawn with an SVG mask so it stays centered in the disc. */
.vid-soon-overlay::before {
  content: "";
  width: 54px;
  height: 54px;
  margin-bottom: 6px;
  border-radius: 50%;
  border: 1px solid var(--border-glow);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23f5f5f3' fill-opacity='0.82'/%3E%3C/svg%3E") center / 26px 26px no-repeat,
    radial-gradient(circle at 50% 50%, var(--glow-soft), transparent 72%),
    color-mix(in srgb, var(--surface-0) 55%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: border-color var(--t-fast) var(--ease);
}
.vid-slot:hover .vid-soon-overlay::before { border-color: var(--accent); }
.vid-soon-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.vid-soon-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text-1);
  max-width: 36ch;
}
.vid-soon-badge {
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 3px 12px;
}
.vid-slot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
}
.vid-slot-name {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.3;
}
.vid-transcript-link {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- transcripts ---------- */

.article.transcript .ts-section {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.article.transcript .ts-beat {
  color: var(--text-1);
  font-size: 1rem;
  margin: 20px 0 8px;
}
.article.transcript .ts-line { margin: 10px 0; line-height: 1.65; }
.article.transcript .ts-speaker {
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.article.transcript .ts-cue {
  margin: 10px 0;
  padding: 6px 14px;
  border-left: 3px solid var(--border-soft);
  color: var(--text-3);
  font-style: italic;
  font-size: 0.9rem;
}

/* ---------- field cards ---------- */

#fc-search { margin: 10px 0 20px; }
.fieldcard {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin: 12px 0;
  padding: 0 20px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.fieldcard:hover { border-color: var(--border-glow); }
.fieldcard[open] {
  border-color: var(--border-glow);
  box-shadow: 0 18px 44px -32px rgba(0, 0, 0, 0.75), inset 0 1px 0 var(--hairline);
}
.fieldcard summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-1);
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.fieldcard summary::-webkit-details-marker { display: none; }
.fieldcard summary::after {
  content: "";
  margin-left: auto;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}
.fieldcard[open] summary::after { transform: rotate(-135deg); }
.fieldcard summary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--glow-soft); border-radius: var(--radius-sm); }
.fieldcard h3 { color: var(--gold); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 16px 0 6px; }
.fieldcard p { color: var(--text-2); line-height: 1.65; }
.fieldcard > *:last-child { padding-bottom: 18px; }

/* ---------- certificate ---------- */

.certificate {
  background: var(--paper);
  color: var(--ink);
  border: 10px double var(--blue);
  border-radius: 6px;
  padding: 50px 56px;
  text-align: center;
  margin: 24px auto;
  max-width: 760px;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.85);
}
.cert-logo { height: 64px; width: auto; margin-bottom: 18px; }
.cert-program {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.cert-title { font-weight: 800; margin: 12px 0 4px; letter-spacing: -0.01em; }
.cert-awarded { color: #777; font-style: italic; margin: 14px 0 6px; }
.cert-name {
  font-size: 1.9rem;
  font-weight: 700;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
  padding: 0 30px 6px;
  margin-bottom: 18px;
}
.cert-body { max-width: 560px; margin: 0 auto 20px; font-size: 0.95rem; color: #444; }
.cert-date { font-weight: 700; margin-bottom: 30px; }
.cert-sigs { display: flex; justify-content: space-around; gap: 30px; margin: 10px 0 26px; }
.sig { font-size: 0.85rem; color: #444; flex: 1; max-width: 260px; }
.sig-line { border-bottom: 1px solid #888; height: 36px; margin-bottom: 8px; }
.cert-foot { font-size: 0.68rem; color: #888; border-top: 1px solid #ddd; padding-top: 14px; }

.cert-id {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--blue);
  margin-bottom: 24px;
}

/* ---------- trophy room: shared seal SVG ---------- */
.cert-seal, .cert-stage-seal, .cert-sheet-seal { display: block; }
.seal-ring { stroke: var(--gold); stroke-width: 2.4; }
.seal-ring-inner { stroke: var(--gold); stroke-width: 1; opacity: 0.7; }
.seal-laurel { stroke: var(--gold); stroke-width: 1.6; opacity: 0.85; fill: none; }
.seal-star { fill: var(--gold); }
.seal-ribbon { fill: var(--gold); opacity: 0.9; }

/* ---------- locked: progress-toward-trophy page ---------- */
.cert-locked-card { position: relative; overflow: hidden; }
.cert-seal-dim {
  width: 132px; height: 132px;
  margin: 0 auto 8px;
  opacity: 0.32;
  filter: drop-shadow(0 0 18px var(--glow-soft));
}
.cert-progress-summary { margin: 18px auto 22px; max-width: 460px; }
.cps-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.cps-count { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text-1); }
.cps-pct { font-size: 0.85rem; color: var(--text-3); font-weight: 600; }
.cps-track {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-0);
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.cps-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), #ffe588);
  box-shadow: 0 0 14px -2px rgba(255, 210, 63, 0.6);
  transition: width var(--t-slow) var(--ease);
}
.cert-remaining-head {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 22px 0 10px;
}
.cert-remaining { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.cert-rem-note { color: var(--text-2); font-size: 0.92rem; }
.cert-rem-note strong { color: var(--gold); }
.cert-rem-row a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  border: 1px solid var(--border-soft);
  color: var(--text-2);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cert-rem-row a:hover {
  text-decoration: none;
  border-color: var(--border-glow);
  background: var(--surface-2);
  transform: translateX(3px);
}
.cert-rem-id {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 8px;
}
.cert-rem-title { color: var(--text-1); font-size: 0.92rem; }
.cert-rem-more { color: var(--text-3); font-size: 0.86rem; padding-left: 4px; }

/* ---------- ready: trophy room stage ---------- */
.cert-stage { text-align: center; }
.cert-stage-head { margin: 8px auto 4px; max-width: 620px; }
.cert-stage-seal {
  width: 120px; height: 120px;
  margin: 0 auto 6px;
  filter: drop-shadow(0 0 26px var(--glow));
  animation: certSealIn 0.7s var(--ease) both;
}
@keyframes certSealIn {
  0% { transform: scale(0.7) rotate(-8deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.cert-stage-kicker {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.cert-stage-title { margin: 0 0 8px; }
.cert-stage-sub { color: var(--text-2); max-width: 540px; margin: 0 auto 18px; }

/* gold-accented certificate sheet treatment */
.certificate { position: relative; }
.cert-corner {
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid var(--gold);
  opacity: 0.85;
}
.cert-corner-tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.cert-corner-tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.cert-corner-bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.cert-corner-br { bottom: 16px; right: 16px; border-left: none; border-top: none; }
.cert-sheet-seal {
  width: 88px; height: 88px;
  margin: 0 auto 14px;
}

/* per-track earned badge grid */
.cert-badges-head {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 30px 0 14px;
}
.cert-badges {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin: 0 auto 26px;
  max-width: 720px;
}
.cert-badge {
  --bdg: var(--tk-accent, var(--accent));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px 14px;
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--tk-grad-a, var(--glow-soft)), transparent 65%),
    var(--surface-2);
  border: 1px solid var(--tk-border, var(--border-soft));
  box-shadow: 0 0 22px -10px var(--tk-glow, var(--glow));
}
.cert-badge-medal { width: 46px; height: 46px; }
.cert-badge-medal circle { stroke: var(--bdg); stroke-width: 2.2; fill: none; }
.cert-badge-star { fill: var(--bdg); }
.cert-badge-tail { stroke: var(--bdg); stroke-width: 2; fill: none; }
.cert-badge-name { font-size: 0.78rem; font-weight: 700; color: var(--text-1); text-align: center; line-height: 1.25; }
.cert-badge-tag {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bdg);
}
.cert-print-row { margin-top: 8px; }

@media print {
  /* certificate.html prints ONLY the rendered cert sheet, black on white with gold
     accents. All chrome, the trophy-room scaffold and the badge grid are hidden.
     One page: @page margins plus a sheet that flows naturally (no 100vh). */
  @page { margin: 14mm; }
  .topbar, .sitefoot, .center, .tabbar, #cert-locked,
  .cert-stage-head, .cert-badges-head, .cert-badges, .cert-print-row,
  .ib-overlay, .ib-demo-watermark { display: none !important; }
  body { background: #fff !important; background-image: none !important; color: #000; }
  .wrap { padding: 0 !important; max-width: none !important; }
  .cert-stage { text-align: center; }
  .certificate {
    margin: 0 auto !important;
    border: 3px solid var(--gold) !important;
    box-shadow: none !important;
    padding: 36px 44px;
    max-width: 720px;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .cert-corner { border-color: var(--gold) !important; }
  .cert-program { color: #000 !important; }
  .cert-title, .cert-name, .cert-date { color: #000 !important; }
  .cert-id { color: #000 !important; }
  .cert-sheet-seal { width: 76px; height: 76px; }
}

/* ---------- access gate + onboarding overlays ---------- */

.ib-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-deep);
  background:
    radial-gradient(900px 600px at 50% 18%, var(--grad-a), transparent 60%),
    radial-gradient(700px 500px at 80% 90%, var(--grad-b), transparent 60%),
    var(--bg-deep);
}
.ib-overlay-card {
  background: var(--glass-strong);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 36px 34px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--hairline) inset;
}
.ib-overlay-logo { height: 56px; width: auto; margin-bottom: 16px; }
.ib-overlay-program {
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ib-overlay-title { font-size: 1.5rem; margin: 0 0 8px; letter-spacing: -0.01em; }
.ib-overlay-sub { color: var(--text-3); font-size: 0.92rem; margin: 0 0 18px; }
.ib-overlay form { display: flex; flex-direction: column; gap: 10px; }
.ib-overlay .btn { width: 100%; }
.ib-overlay-msg { color: var(--red); font-size: 0.85rem; min-height: 1.1em; margin-top: 10px; font-weight: 600; }
.ib-overlay-foot {
  color: var(--text-3);
  font-size: 0.72rem;
  line-height: 1.5;
  margin-top: 18px;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
/* until the runtime decides, hide page content so nothing flashes behind the gate */
body.ib-gated main.wrap, body.ib-gated .topbar, body.ib-gated .sitefoot { visibility: hidden; }

/* ---------- cinematic gate: layered backdrop ---------- */

.ib-gate { overflow: hidden; }
.ib-gate-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* slow-drifting gradient blobs that form a soft mesh behind the card */
.ib-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}
.ib-blob-1 {
  width: 46vw; height: 46vw; min-width: 420px; min-height: 420px;
  left: -6vw; top: -8vw;
  background: radial-gradient(circle at 50% 50%, var(--accent), transparent 68%);
  animation: ibBlobDrift1 26s ease-in-out infinite;
}
.ib-blob-2 {
  width: 40vw; height: 40vw; min-width: 360px; min-height: 360px;
  right: -8vw; top: 22vh;
  background: radial-gradient(circle at 50% 50%, var(--blue), transparent 68%);
  opacity: 0.42;
  animation: ibBlobDrift2 32s ease-in-out infinite;
}
.ib-blob-3 {
  width: 34vw; height: 34vw; min-width: 320px; min-height: 320px;
  left: 30vw; bottom: -14vw;
  background: radial-gradient(circle at 50% 50%, var(--gold), transparent 70%);
  opacity: 0.2;
  animation: ibBlobDrift3 38s ease-in-out infinite;
}
/* abstract art motifs echoing the cover-art language, very low opacity */
.ib-motif {
  position: absolute;
  color: var(--accent);
  opacity: 0.07;
  will-change: transform;
}
.ib-motif-1 { width: 30vw; max-width: 360px; left: 5vw; bottom: 8vh; animation: ibSpin 120s linear infinite; }
.ib-motif-2 { width: 22vw; max-width: 260px; right: 8vw; top: 10vh; color: var(--gold); opacity: 0.06; animation: ibFloat 18s ease-in-out infinite; }
.ib-motif-3 { width: 26vw; max-width: 300px; right: 18vw; bottom: 6vh; color: var(--blue); opacity: 0.07; animation: ibSpin 160s linear infinite reverse; }

@keyframes ibBlobDrift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6vw, 4vh, 0) scale(1.08); }
}
@keyframes ibBlobDrift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-5vw, -3vh, 0) scale(1.1); }
}
@keyframes ibBlobDrift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(3vw, -5vh, 0) scale(1.12); }
}
@keyframes ibSpin { to { transform: rotate(360deg); } }
@keyframes ibFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3vh); }
}

/* the gate card floats above the backdrop with a glowing animated accent border */
.ib-gate-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  box-shadow: 0 50px 120px -50px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--hairline) inset,
    0 0 60px -28px var(--glow);
}
.ib-gate-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--accent), transparent 35%, transparent 65%, var(--blue));
  background-size: 220% 220%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.8;
  pointer-events: none;
  animation: ibBorderShift 8s ease infinite;
}
@keyframes ibBorderShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
/* glow focus on the access input */
.ib-gate-card input:focus {
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 22px -6px var(--glow);
}
/* wrong-code shake */
.ib-shake { animation: ibShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes ibShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* celebratory unlock sweep (detached overlay, removes itself) */
.ib-unlock-sweep {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, var(--accent-soft) 48%, var(--glow-soft) 52%, transparent 70%);
  background-size: 260% 100%;
  animation: ibUnlockSweep 0.85s ease-out forwards;
}
@keyframes ibUnlockSweep {
  0% { background-position: 120% 0; opacity: 0; }
  20% { opacity: 1; }
  100% { background-position: -120% 0; opacity: 0; }
}

/* ---------- hidden admin dashboard ---------- */

.admin-section { margin: 18px 0 28px; }
.admin-empty { color: var(--text-3); font-size: 0.92rem; margin: 10px 0; }

/* at-a-glance stat cards: additive summary row above the roster matrix. Reuses
   the glass surface tokens (same look as .card) with an accent value figure. */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin: 14px 0 4px;
}
.admin-stat {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-stat-value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-strong);
}
.admin-stat-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-3);
  text-transform: uppercase;
}

.admin-drop {
  border: 2px dashed var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-0);
  padding: 26px 20px;
  text-align: center;
  margin: 12px 0 8px;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.admin-drop.dragover { border-color: var(--accent); background: var(--accent-soft); }
.admin-drop p { margin: 0 0 12px; color: var(--text-3); }
.admin-import-msg { color: var(--accent); font-size: 0.85rem; min-height: 1.1em; font-weight: 600; }

.admin-tablewrap { overflow-x: auto; margin: 12px 0; }

.admin-matrix { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.admin-matrix th, .admin-matrix td { border: 1px solid var(--border-soft); padding: 5px 6px; text-align: center; }
.admin-matrix thead th {
  background: var(--surface-0);
  color: var(--accent);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 800;
}
.admin-matrix th.amx-track { color: var(--text-1); }
.admin-matrix th.amx-id { font-weight: 700; padding: 5px 4px; }
.admin-matrix .amx-name {
  text-align: left;
  white-space: nowrap;
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
  font-weight: 700;
}
.admin-matrix thead .amx-name { background: var(--surface-0); }
.admin-matrix .amx-total { font-weight: 800; white-space: nowrap; background: var(--panel-2); }
.admin-matrix .amx-cell { font-weight: 700; }
.admin-matrix .amx-cell.passed { background: rgba(76, 175, 109, 0.22); color: var(--green); }
.admin-matrix .amx-cell.testout { background: rgba(255, 210, 63, 0.22); color: var(--gold); }
.admin-matrix .amx-cell.locked { background: rgba(229, 57, 53, 0.2); color: var(--red); }
.admin-matrix .amx-cell.none { color: var(--text-3); }
.admin-matrix tr.amx-foot td { background: var(--surface-0); font-weight: 800; color: var(--text-3); }
.amx-remove {
  margin-left: 10px;
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--red);
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  cursor: pointer;
}
.amx-remove:hover { border-color: var(--red); }

.admin-signoff .amx-sign { padding: 4px; }
.admin-sign-box { accent-color: var(--green); width: 16px; height: 16px; cursor: pointer; }
.admin-sign-date { display: block; font-size: 0.62rem; color: var(--text-3); margin-top: 2px; min-height: 0.8em; }

.admin-scorecard {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin: 10px 0;
  padding: 0 18px;
}
.admin-scorecard summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.admin-scorecard summary::-webkit-details-marker { display: none; }
.admin-scorecard summary::after { content: "+"; margin-left: auto; color: var(--accent); font-weight: 800; }
.admin-scorecard[open] summary::after { content: "-"; }
.admin-score-count { margin-left: auto; color: var(--text-3); font-size: 0.82rem; font-weight: 700; }
.admin-scorecard[open] .admin-score-count { margin-left: 0; }
.admin-scores { border-collapse: collapse; width: 100%; font-size: 0.85rem; margin-bottom: 14px; }
.admin-scores th, .admin-scores td { border-bottom: 1px solid var(--border-soft); padding: 6px 10px; text-align: left; }
.admin-scores th { color: var(--accent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-scores .asc-passed { color: var(--green); font-weight: 700; }
.admin-scores .asc-testout { color: var(--gold); font-weight: 700; }
.admin-scores .asc-locked { color: var(--red); font-weight: 700; }
.admin-scores .asc-none { color: var(--text-3); }

.admin-reg-block { margin: 18px 0; }
.admin-reg-block h3 { color: var(--gold); font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px; }
.admin-reg { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.admin-reg th, .admin-reg td { border-bottom: 1px solid var(--border-soft); padding: 8px 12px; text-align: left; }
.admin-reg th { color: var(--accent); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.admin-reg .reg-cert { font-family: "SF Mono", "Courier New", monospace; letter-spacing: 0.06em; color: var(--text-1); }

/* print host stays hidden on screen; print CSS reveals it */
.admin-print-host { display: none; }
.print-doc { color: var(--ink); background: var(--paper); }
.print-head { border-bottom: 2px solid var(--blue); margin-bottom: 14px; padding-bottom: 8px; }
.print-program { color: var(--blue); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.print-doc h2 { margin: 6px 0 0; font-size: 1.6rem; color: var(--ink); }
.print-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; margin-bottom: 16px; font-size: 0.92rem; }
.print-table { border-collapse: collapse; width: 100%; font-size: 0.82rem; }
.print-table th, .print-table td { border: 1px solid #bbb; padding: 5px 8px; text-align: left; }
.print-table th { background: #eee; color: var(--ink); }
.print-note { font-size: 0.78rem; color: #555; margin-top: 14px; }
.cert-doc .cert-line { font-size: 1rem; margin: 10px 0; }

@media print {
  body.admin-printing main.wrap > .modhead,
  body.admin-printing #ib-admin > .admin-import,
  body.admin-printing #ib-admin > .admin-section { display: none !important; }
  body.admin-printing .admin-print-host { display: block !important; }
  body.admin-printing .topbar, body.admin-printing .sitefoot { display: none !important; }
  body.admin-printing { background: #fff; background-image: none; }
  body.admin-printing .wrap { padding: 0; max-width: none; }
  .print-doc { page-break-after: always; }
  .print-doc:last-child { page-break-after: auto; }
}

/* ---------- demo mode (sales variant only) ----------
   These rules are inert on the real build: the .ib-demo-watermark element and the
   .demo-locked panel only ship when brand.demoMode is true. */

.ib-demo-watermark {
  position: fixed;
  bottom: 18px;
  right: -52px;
  z-index: 900;
  transform: rotate(-45deg);
  background: var(--gold);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 6px 64px;
  opacity: 0.82;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  user-select: none;
}
@media print {
  .ib-demo-watermark { display: none !important; }
}

.demo-locked { border-left: 4px solid var(--gold); }
.demo-locked-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 14px;
  margin-bottom: 10px;
}

/* ============================================================
   (f) motion: reduced-motion kill switch
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover, .modcard:hover { transform: none; }
  .modcard:hover .mc-cover img { transform: none; }
}

/* Scroll reveals (initMotion). The default state is fully visible; JS adds
   .will-reveal to candidates only when motion is allowed, then .revealed as each
   scrolls into view. We hide ONLY .will-reveal:not(.revealed), and only when the
   visitor has not asked for reduced motion. This guarantees no-JS and
   reduced-motion visitors always see everything. */
@media (prefers-reduced-motion: no-preference) {
  .will-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * 0.05s);
  }
  .will-reveal:not(.revealed) {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ============================================================
   responsive
   ============================================================ */

@media (max-width: 760px) {
  .wrap { padding: 24px 16px 72px; }
  .hero { grid-template-columns: 1fr; }
  .modhead { flex-direction: column; }
  .topbar { padding: 12px 16px; }
  .brand span { display: none; }
  .certificate { padding: 30px 20px; }
  .cert-sigs { flex-direction: column; align-items: center; }
}

/* ============================================================
   mobile bottom tab bar (app-style chrome)
   ============================================================ */

/* Hidden on desktop; the narrow-viewport media query below reveals it. Hidden
   whenever the access gate is up so it never floats over the locked overlay. */
.tabbar {
  display: none;
}
body.ib-gated .tabbar {
  display: none !important;
}

.tabbar a.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 1 0;
  padding: 8px 4px;
  text-decoration: none;
  color: var(--text-3);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition: color 0.18s ease;
}
.tabbar a.tab svg {
  width: 24px;
  height: 24px;
}
.tabbar a.tab[aria-current="page"],
.tabbar a.tab.active {
  color: var(--accent-strong);
}
.tabbar a.tab[aria-current="page"] svg,
.tabbar a.tab.active svg {
  filter: drop-shadow(0 0 6px var(--glow));
}

@media (max-width: 860px) {
  /* The tab bar carries navigation on small screens; the topbar keeps only the brand. */
  .navlinks { display: none; }
  .tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    gap: 2px;
    padding: 6px 8px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--surface-2) 78%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(16px);
    backdrop-filter: saturate(1.4) blur(16px);
    border-top: 1px solid var(--border-soft);
  }
  /* Keep page content clear of the fixed bar. */
  body:not(.ib-gated) .wrap {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  body:not(.ib-gated) .sitefoot {
    padding-bottom: calc(26px + 72px + env(safe-area-inset-bottom, 0px));
  }
}

@media print {
  .tabbar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .tabbar a.tab { transition: none; }
}