/* NAFA-BOX — design tokens */
:root {
  --bg: #0f1216;
  --bg-deep: #0a0d10;
  --surface: #171c22;
  --surface-2: #1f262e;
  --surface-glass: rgba(23, 28, 34, 0.72);
  --border: #2a323c;
  --border-soft: #222a33;
  --text: #e8edf2;
  --muted: #9aa7b2;
  --accent: #5fd4c6;
  --accent-soft: rgba(95, 212, 198, 0.14);
  --accent-ink: #062a26;
  --amber: #f0b429;
  --amber-soft: rgba(240, 180, 41, 0.12);
  --amber-ink: #2b1f02;
  --danger: #e5646e;
  /* third chart hue — promoted from the aurora's faint blue so charts,
     levels and the hero field have a real 3-hue system */
  --indigo: #7d9bff;
  --indigo-soft: rgba(125, 155, 255, 0.13);
  --gold: #f7d774;
  --gold-deep: #b98413;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  /* --sp-5 was referenced in six places but never defined; without it the
     whole padding shorthand on .hof-aside was invalid and dropped */
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 40px rgba(0, 0, 0, 0.35);
  --glow-accent: 0 0 24px rgba(95, 212, 198, 0.22);
  --glow-amber: 0 0 28px rgba(240, 180, 41, 0.25);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --font-display: "Space Grotesk", var(--sans);
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { height: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(95, 212, 198, 0.055), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 110%, rgba(240, 180, 41, 0.03), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* full-bleed sections use margin: 0 calc(50% - 50vw); 100vw includes the
     scrollbar, so without this they force a horizontal scroll. `clip` rather
     than `hidden` so the sticky player and Hall of Fame rail keep working. */
  overflow-x: clip;
}

h1, h2, h3, .splash-word, .sp-title {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 5px;
  border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover { background: var(--border); }

main { flex: 1; }

a { color: var(--accent); }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

kbd {
  font-family: var(--mono);
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0 0.3rem;
  background: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .skel-in .bar, .skeleton .bar { animation: none; opacity: 0.6; }
  .rv { opacity: 1; transform: none; }
  .cursor-glow { display: none; }
  /* NB: no width override here. `width: attr(data-w)` used to live in this
     block; since Chrome shipped generalized attr() it resolves to a string,
     which is invalid for width, so the !important declaration fell back to
     `auto` and painted EVERY bar full-width for reduced-motion users.
     JS already sets the correct inline width; the `* { transition: none }`
     rule above is all that's needed to make it appear instantly. */
}

/* ---------- shell ---------- */

.wrap {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 var(--sp-4);
  width: 100%;
}

.site-header {
  border-bottom: 1px solid var(--border);
  padding: var(--sp-6) 0 var(--sp-8);
}

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-8);
  color: var(--muted);
  font-size: 0.8125rem;
}

.site-footer p { margin: 0 0 var(--sp-2); }
.site-footer p:last-child { margin: 0; }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--sp-6) 0 var(--sp-2);
}

/* ---------- brand ---------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-4);
  box-shadow: var(--shadow-1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--accent);
}

.brand-logo {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
  filter: drop-shadow(0 0 6px rgba(95, 212, 198, 0.45));
}

.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  color: var(--text);
}

.brand-word em {
  font-style: normal;
  color: var(--accent);
}

.nav-links { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  padding: var(--sp-1) 0;
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease-out);
}

.nav-links a:hover { color: var(--accent); }

.nav-links a.active {
  color: var(--text);
  border-bottom-color: var(--accent);
  text-shadow: 0 0 14px rgba(95, 212, 198, 0.35);
}

/* ---------- splash hero ---------- */

.splash {
  position: relative;
  min-height: calc(100vh - 8rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) 0 var(--sp-6);
  overflow: hidden;
}

.splash-grid {
  position: absolute;
  inset: -2rem;
  background-image:
    linear-gradient(var(--surface-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-2) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 25%, transparent 72%);
  pointer-events: none;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.splash-inner {
  position: relative;
  text-align: center;
  max-width: 48rem;
}

.splash-logo {
  width: clamp(4.5rem, 9vw, 6.5rem);
  height: auto;
  color: var(--accent);
  margin: 0 auto var(--sp-5, 1.25rem);
  display: block;
  filter: drop-shadow(0 0 18px rgba(95, 212, 198, 0.35));
  animation: splash-rise 600ms ease-out both;
}

/* aurora backdrop — two slow-drifting light fields behind the grid */
.splash::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 42% 32% at 24% 28%, rgba(95, 212, 198, 0.13), transparent 65%),
    radial-gradient(ellipse 36% 30% at 76% 68%, rgba(240, 180, 41, 0.07), transparent 65%),
    radial-gradient(ellipse 50% 40% at 55% 15%, rgba(93, 140, 255, 0.05), transparent 70%);
  animation: aurora-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}

.splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 62% at 50% 46%, transparent 45%, var(--bg) 100%);
  pointer-events: none;
}

.splash-inner { z-index: 1; }

@keyframes aurora-drift {
  from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
  to { transform: translate3d(2.5%, 2%, 0) scale(1.08); }
}

.splash-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 8vw, 5rem);
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0 0 var(--sp-4);
  color: var(--text);
  animation: splash-rise 600ms ease-out 90ms both;
}

.splash-word em {
  font-style: normal;
  background: linear-gradient(120deg, #7ee8da 10%, #5fd4c6 45%, #35a99c 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(95, 212, 198, 0.3));
}

.splash-tag {
  font-size: clamp(1.0625rem, 2.6vw, 1.375rem);
  color: var(--muted);
  margin: 0 0 var(--sp-3);
  animation: splash-rise 600ms ease-out 180ms both;
}

.splash-tag strong { color: var(--accent); font-weight: 600; }

.splash-sub {
  color: var(--muted);
  max-width: 40rem;
  margin: 0 auto var(--sp-5, 1.25rem);
  font-size: 0.9375rem;
  animation: splash-rise 600ms ease-out 270ms both;
}

.splash .cta-row {
  justify-content: center;
  margin: 0 0 var(--sp-6);
  animation: splash-rise 600ms ease-out 360ms both;
}

.splash .stats {
  justify-content: center;
  animation: splash-rise 600ms ease-out 450ms both;
}

.splash-cue {
  position: absolute;
  bottom: var(--sp-4);
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  cursor: pointer;
  animation: splash-bounce 2.4s ease-in-out infinite;
}

.splash-cue:hover { color: var(--accent); border-color: var(--accent); }

#home-levels { padding-bottom: var(--sp-8); }

@keyframes splash-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: none; }
}

@keyframes splash-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 0.375rem); }
}

@media (prefers-reduced-motion: reduce) {
  .splash-logo, .splash-word, .splash-tag, .splash-sub,
  .splash .cta-row, .splash .stats, .splash-cue {
    animation: none;
  }
  .splash::before { animation: none; }
}

/* ---------- home ---------- */

.cta-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin: var(--sp-4) 0 var(--sp-6);
}

.btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, #6fe9da, #46b3a6);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
  font-size: 0.9375rem;
  box-shadow: var(--glow-accent);
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), filter 180ms ease;
}

.btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(95, 212, 198, 0.35);
}

.btn-primary:active { transform: translateY(0); }

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-4);
  color: var(--muted);
  font-size: 0.875rem;
}

.splash .stats {
  gap: var(--sp-2);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: var(--sp-2) var(--sp-6);
  box-shadow: var(--shadow-1);
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}

.splash .stats span { white-space: nowrap; }

.stats strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-weight: 700;
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.level-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  padding: var(--sp-4);
  text-decoration: none;
  color: var(--text);
  display: grid;
  gap: var(--sp-1);
  overflow: hidden;
  transition: transform 200ms var(--ease-out), border-color 160ms ease,
    box-shadow 200ms var(--ease-out);
}

.level-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -20%, var(--accent-soft), transparent 70%);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.level-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.level-card:hover::after { opacity: 1; }

.lc-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--accent);
}

.lc-label { font-size: 0.875rem; font-weight: 600; }

.lc-desc { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }

/* ---------- library toolbar ---------- */

.toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) 0;
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  flex-wrap: wrap;
}

.toolbar input[type="search"] {
  flex: 1;
  min-width: 14rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.9375rem;
}

.toolbar input[type="search"]::placeholder { color: var(--muted); }

.toolbar select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.875rem;
}

.level-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.8125rem;
  border-radius: 999px;
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
}

.chip:hover { color: var(--text); border-color: var(--accent); }

.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}

.result-count { color: var(--muted); font-size: 0.8125rem; white-space: nowrap; }

/* ---------- exam list ---------- */

.exam-list {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.exam-list li + li { border-top: 1px solid var(--border); }

/* The archive is a catalog, not a table. As one full-width column, 146
   sessions made a 16,000px page whose rows spanned 1180px to carry ~700px
   of content. Wide enough for two columns, it becomes a card grid: same
   rows, half the scroll, a sensible measure each. Narrow screens keep the
   seamless list — cards there only add gaps and lengthen the page. */
@media (min-width: 1100px) {
  .exam-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .exam-list li {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .exam-list li + li { border-top: 1px solid var(--border); }

  .exam-row {
    align-items: start;
    height: 100%;
  }

  /* a narrower card clamps sooner, and the title is what people scan */
  .exam-list .proj-lead { -webkit-line-clamp: 3; }
}

.exam-row {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  text-decoration: none;
  color: var(--text);
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
  position: relative;
  overflow: hidden;
}

.exam-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.exam-row:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}

.exam-row:hover::before { transform: scaleY(1); }

/* Hall of Fame rows get the gold sweep */
.exam-row.hof-row::before { background: linear-gradient(180deg, var(--amber), #b98413); }
.exam-row.hof-row .proj-lead::after {
  content: " 🏆";
  font-size: 0.85em;
}

.row-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.55;
  align-self: start;
  padding-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

.exam-row:hover .row-num { color: var(--accent); opacity: 1; }

.row-main { display: grid; gap: var(--sp-1); min-width: 0; }

.proj-lead {
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.row-sub {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  color: var(--muted);
  font-size: 0.75rem;
  align-items: center;
}

.row-sub .name { color: var(--text); font-weight: 500; }

.row-kws { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-1); }

.study-flag { color: var(--accent); font-weight: 600; }

.kw {
  color: var(--muted);
  font-size: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
}

.lvl-tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0 0.25rem;
  vertical-align: 1px;
  white-space: nowrap;
}

.dur {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--muted);
  white-space: nowrap;
}

.badge {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.125rem 0.5rem;
  white-space: nowrap;
}

.badge-pending { background: var(--amber); color: var(--amber-ink); }
.badge-partial { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }

.empty-note {
  margin-top: var(--sp-8);
  text-align: center;
  color: var(--muted);
  padding: var(--sp-8) 0;
}

/* ---------- exam view ---------- */

.exam-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.back-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}

.back-link:hover { color: var(--accent); }

.exam-heading { min-width: 0; }

.exam-title {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exam-proj {
  margin: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
  max-width: 46rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exam-topbar .spacer { flex: 1; }

.yt-link { font-size: 0.8125rem; white-space: nowrap; }

.exam-layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-4);
  align-items: start;
  margin-top: var(--sp-4);
  padding-bottom: var(--sp-8);
}

.player-col { position: sticky; top: 4.25rem; }

.player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}

.player-frame iframe,
.player-frame .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.player-col .session-meta {
  margin-top: var(--sp-3);
  color: var(--muted);
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-variant-numeric: tabular-nums;
}

.player-controls {
  margin-top: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.player-controls .spacer { flex: 1; }

.btn-qa {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.btn-qa:hover {
  background: rgba(95, 212, 198, 0.12);
  color: var(--accent);
  box-shadow: 0 0 16px rgba(95, 212, 198, 0.25);
}

.btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8125rem;
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.btn:hover { background: var(--surface-2); color: var(--text); }

.btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.hint {
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: var(--sp-2);
}

/* ---------- side panel: tabs ---------- */

.side-panel { min-width: 0; }

.panel-tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.tab {
  background: none;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
}

.tab[aria-selected="true"] {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: inset 0 2px 0 var(--accent);
}

.transcript {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 9.5rem);
  position: sticky;
  top: 4.25rem;
}

.panel-tabs + .transcript { position: static; max-height: calc(100vh - 11rem); }

.transcript-toolbar {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.transcript-toolbar input[type="search"] {
  flex: 1;
  min-width: 8rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-2);
  font-size: 0.875rem;
}

.transcript-toolbar input[type="search"]::placeholder { color: var(--muted); }

.match-info {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.seg-list {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2);
  flex: 1;
}

.seg {
  display: grid;
  grid-template-columns: 4.6rem 1fr auto;
  gap: var(--sp-3);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  padding: var(--sp-2) var(--sp-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  align-items: baseline;
}

.seg:hover { background: var(--surface-2); }

.seg .ts {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.seg .copy-ts {
  opacity: 0;
  font-size: 0.6875rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 0.375rem;
  cursor: pointer;
}

.seg:hover .copy-ts,
.seg:focus-within .copy-ts { opacity: 1; }

.seg.active { background: var(--surface-2); border-left-color: var(--accent); }
.seg.active .ts { color: var(--accent); }

.seg.hit mark {
  background: var(--amber);
  color: var(--amber-ink);
  border-radius: 2px;
  padding: 0 1px;
}

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  color: var(--muted);
  font-size: 0.875rem;
}

.notice strong { color: var(--text); }
/* (skeleton styles live with the shimmer block near the footer) */

/* ---------- study notes ---------- */

.study-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}

.study-body h3 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--sp-5, 1.25rem) 0 var(--sp-2);
}

.study-body h3:first-child { margin-top: 0; }

.study-proj { font-size: 0.9375rem; margin: 0; }

.study-brief {
  color: var(--muted);
  font-size: 0.875rem;
  margin: 0;
}

.qa-callout {
  margin-top: var(--sp-4);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: rgba(95, 212, 198, 0.06);
  padding: var(--sp-3);
  font-size: 0.875rem;
}

.tool-list, .concept-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}

.tool-list li, .concept-list li {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.8125rem;
}

.tool-count {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
}

.jump { text-decoration: none; }
.jump:hover { text-decoration: underline; }

.rebuild-h { color: var(--accent) !important; }

.rebuild-sub {
  color: var(--muted);
  font-size: 0.8125rem;
  margin: 0 0 var(--sp-2);
}

.progress {
  height: 0.5rem;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  role: progressbar;
  aria-valuemin: 0;
  aria-valuemax: 100;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width 200ms ease;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.checklist li + li { border-top: 1px solid var(--border); }

.checklist label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  font-size: 0.875rem;
  cursor: pointer;
  align-items: baseline;
}

.checklist input[type="checkbox"] {
  accent-color: var(--accent);
  width: 1rem;
  height: 1rem;
  margin: 0;
  transform: translateY(2px);
}

.checklist input:checked + span { color: var(--muted); text-decoration: line-through; }

/* ---------- content pages (mission/purpose/how-to) ---------- */

.page {
  max-width: 44rem;
  padding: var(--sp-8) 0 var(--sp-4);
}

.page h2 {
  font-size: 1.375rem;
  line-height: 1.3;
  margin: var(--sp-8) 0 var(--sp-3);
}

.page > .eyebrow + h2,
.page h2:first-of-type { margin-top: var(--sp-3); }

.page p { margin: 0 0 var(--sp-4); }
.page ul, .page ol { margin: 0 0 var(--sp-4); padding-left: 1.25rem; }
.page li { margin-bottom: var(--sp-2); }

.steps { counter-reset: step; list-style: none; padding: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: var(--sp-4);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.875rem;
}

/* ---------- home data sections (insights page) ---------- */

.insights-cta { margin-top: var(--sp-6); font-size: 0.9375rem; }

.insights-cta a { font-weight: 600; }

.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.home-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(31, 38, 46, 0.5), var(--surface) 30%);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  box-shadow: var(--shadow-1);
}

.home-panel .panel-title {
  font-size: 1.0625rem;
  margin: 0 0 var(--sp-1);
}

.panel-sub {
  color: var(--muted);
  font-size: 0.8125rem;
  margin: 0 0 var(--sp-4);
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr 2.5rem;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-1) 0;
  font-size: 0.8125rem;
}

.bar-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-track {
  height: 0.5rem;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.home-panel:nth-child(2) .bar-fill { background: var(--amber); }

.bar-val {
  font-family: var(--mono);
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.recent-panel, .nudge-panel { margin-top: var(--sp-4); }

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recent-list li + li { border-top: 1px solid var(--border); }

/* four children — name, level tag, project, date — so the grid needs four
   tracks; with three, the tag landed in the 1fr column and stretched while
   the date wrapped to a second row */
.recent-row {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) auto minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: baseline;
  padding: var(--sp-2) 0;
  text-decoration: none;
  color: var(--text);
}

.recent-row:hover strong { color: var(--accent); }
.recent-row .lvl-tag { justify-self: start; }

.recent-proj {
  color: var(--muted);
  font-size: 0.8125rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-date {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.75rem;
}

.steps-compact li { margin-bottom: var(--sp-2); font-size: 0.9375rem; }
.steps-compact li::before { width: 1.6rem; height: 1.6rem; font-size: 0.8125rem; }

@media (max-width: 48rem) {
  .home-grid { grid-template-columns: 1fr; }
  .recent-row { grid-template-columns: 1fr auto; }
  .recent-proj { grid-column: 1 / -1; }
}

/* ---------- dedicated study page ---------- */

.study-topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) 0;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.study-topbar .spacer { flex: 1; }

.study-progress-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.reading-progress {
  position: sticky;
  top: 3.1rem;
  z-index: 4;
  height: 2px;
  background: var(--border);
}

.reading-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #8ff0e4);
  box-shadow: 0 0 8px rgba(95, 212, 198, 0.6);
  transition: width 80ms linear;
}

.study-page {
  max-width: 76rem;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-2) var(--sp-8);
  outline: none;
}

/* magazine grid: quick-reference first, deep-dive below */
.sp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--sp-8);
  margin-top: var(--sp-6);
}
@media (min-width: 960px) {
  .sp-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .sp-rail { border-left: 1px solid var(--border-soft); padding-left: var(--sp-6); }
  .sp-rail-sec { margin-top: var(--sp-6); }
  .sp-rail-sec:first-child { margin-top: 0; }
  .sp-main .sp-sec:first-child { margin-top: 0; }
}
.sp-rail .chip-cloud { gap: var(--sp-1); }
.sp-rail .chip-cloud a, .sp-rail .chip-cloud .jump { font-size: 0.78rem; padding: 2px 8px; }
#sp-narrative { margin-top: var(--sp-8); }

/* the lab viewer gets the full stage: wide two-column canvas */
#view-lab .study-page {
  max-width: 88rem;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

.sp-head { margin-bottom: var(--sp-6); }

.sp-title {
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.25;
  margin: var(--sp-2) 0 var(--sp-2);
  letter-spacing: -0.01em;
}

.sp-byline { color: var(--muted); margin: 0 0 var(--sp-4); font-size: 0.9375rem; }

.sp-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.sp-progress-widget { width: 10rem; }

.sp-progress-widget .progress { margin: 0; height: 0.375rem; }

.coming-soon { margin-bottom: var(--sp-6); }

.sp-sec { margin-top: var(--sp-8); }

.sp-sec > h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}

.sp-prose { font-size: 1rem; line-height: 1.65; margin: 0; }

.sp-sub { color: var(--muted); font-size: 0.875rem; margin: 0 0 var(--sp-3); }

/* session map */
.timeline { display: grid; gap: var(--sp-2); }

.tl-item {
  display: grid;
  grid-template-columns: 5.5rem 12rem 1fr;
  gap: var(--sp-3);
  align-items: baseline;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-2) var(--sp-3);
  text-decoration: none;
  color: var(--text);
  transition: border-color 120ms ease;
}

.tl-item:hover { border-color: var(--accent); }

.tl-time { font-family: var(--mono); color: var(--accent); font-size: 0.875rem; }

.tl-name { font-weight: 600; font-size: 0.9375rem; }

.tl-desc { color: var(--muted); font-size: 0.8125rem; }

/* chip clouds */
.chip-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.chip-cloud a,
.chip-cloud .jump {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1875rem 0.75rem;
  font-size: 0.8125rem;
  text-decoration: none;
  color: var(--text);
}

.chip-cloud a:hover { border-color: var(--accent); color: var(--accent); }

/* examiner questions */
.qlist { margin: 0; padding: 0; list-style: none; counter-reset: q; }

.qlist li {
  counter-increment: q;
  position: relative;
  padding: var(--sp-2) 0 var(--sp-2) 2.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9375rem;
}

.qlist li::before {
  content: "Q" counter(q);
  position: absolute;
  left: 0;
  top: var(--sp-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
}

.q-text { color: var(--text); }

/* glossary */
.gloss { margin: 0; display: grid; gap: var(--sp-2); }

.gloss dt { font-weight: 600; font-size: 0.9375rem; }

.gloss dd {
  margin: 0 0 var(--sp-2);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* similar projects */
.similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--sp-3);
}

.similar-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-3);
  text-decoration: none;
  color: var(--text);
  display: grid;
  gap: var(--sp-1);
  align-content: start;
  font-size: 0.875rem;
  transition: border-color 120ms ease;
}

.similar-card:hover { border-color: var(--accent); }

.similar-card strong { line-height: 1.35; }

.sc-by { color: var(--muted); font-size: 0.75rem; }

.sp-link-row { margin-top: var(--sp-2); font-size: 0.875rem; }

.study-panel-foot {
  border-top: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-3);
}

@media (max-width: 40rem) {
  .tl-item { grid-template-columns: 4.2rem 1fr; }
  .tl-desc { grid-column: 1 / -1; }
}

/* ---------- outcomes ---------- */

.badge-pass {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 0 10px rgba(95, 212, 198, 0.18);
}

.badge-fail {
  background: rgba(240, 100, 100, 0.12);
  color: #ff8f8f;
  border: 1px solid rgba(240, 100, 100, 0.5);
}

.outcome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
}

.outcome-pct {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.outcome-comp {
  color: var(--muted);
  font-size: 0.8125rem;
  font-family: var(--mono);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.0625rem 0.4rem;
}

.outcome-inline {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: 0.875rem;
}

.outcome-inline .outcome-pct { font-size: 1rem; }

.qa-answer { margin-top: var(--sp-2); }

.qa-answer summary {
  cursor: pointer;
  color: var(--accent);
  font-size: 0.8125rem;
  user-select: none;
}

.qa-answer p {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* ---------- built-by ---------- */

.bb-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.bb-avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.125rem;
  display: grid;
  place-items: center;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.bb-name { margin: 0; font-size: 1.5rem; line-height: 1.2; }

.bb-role { margin: var(--sp-1) 0 0; color: var(--muted); font-size: 0.9375rem; }

.bb-creed {
  font-style: italic;
  color: var(--accent);
  margin: 0 0 var(--sp-4);
}

.bb-links { list-style: none; padding: 0; }

.bb-links li { margin-bottom: var(--sp-1); }

.bb-links a { text-decoration: none; }
.bb-links a:hover { text-decoration: underline; }

.bb-sign { color: var(--muted); font-size: 0.8125rem; margin-top: var(--sp-6); }

/* ---------- narrative ---------- */

.narr-block { margin-bottom: var(--sp-5, 1.25rem); }

.narr-block h4 {
  font-size: 1rem;
  margin: 0 0 var(--sp-1);
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.narr-ts { font-weight: 400; font-size: 0.75rem; }

.narr-block p {
  margin: 0;
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.qa-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  position: relative;
}

.qa-card.qa-ok { border-left-color: var(--accent); }
.qa-card.qa-mid { border-left-color: var(--amber); }
.qa-card.qa-gap { border-left-color: #ff8f8f; }

.qa-q { font-weight: 600; margin: 0 0 var(--sp-2); font-size: 0.9375rem; }

.qa-exp, .qa-got {
  margin: 0 0 var(--sp-1);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--muted);
}

.qa-exp strong, .qa-got strong { color: var(--text); }

.qa-verdict {
  display: inline-block;
  margin-top: var(--sp-2);
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  color: var(--muted);
}

.qa-ok .qa-verdict { color: var(--accent); border-color: var(--accent); }
.qa-mid .qa-verdict { color: var(--amber); border-color: var(--amber); }
.qa-gap .qa-verdict { color: #ff8f8f; border-color: #ff8f8f; }

.plain-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.plain-list li { margin-bottom: var(--sp-2); }

/* ---------- question bank ---------- */

.qbank-tabs { margin: 0; }

.qb-panel { padding: var(--sp-4) 0 var(--sp-8); }

.qb-setup { max-width: 46rem; }

.qb-best { color: var(--muted); font-size: 0.875rem; margin: var(--sp-3) 0 0; }

.qb-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--sp-3);
  gap: var(--sp-3);
}

.qb-count, .qb-score {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.qb-score { color: var(--accent); }

.quiz-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-4) var(--sp-6) var(--sp-5, 1.25rem);
  max-width: 46rem;
}

.quiz-topic {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 var(--sp-2);
}

.quiz-q {
  font-size: 1.125rem;
  line-height: 1.45;
  margin: 0 0 var(--sp-4);
}

.quiz-opts { display: grid; gap: var(--sp-2); }

.qopt {
  text-align: left;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
}

.qopt:hover:not(:disabled) { border-color: var(--accent); }

.qopt:disabled { cursor: default; opacity: 0.75; }

.qopt-key {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
}

.qopt.correct {
  border-color: var(--accent);
  background: rgba(95, 212, 198, 0.12);
  opacity: 1;
}

.qopt.correct .qopt-key { color: var(--accent); }

.qopt.wrong {
  border-color: #ff8f8f;
  background: rgba(240, 100, 100, 0.1);
  opacity: 1;
}

.qopt.wrong .qopt-key { color: #ff8f8f; }

.quiz-explain {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.55;
}

.quiz-explain strong { color: var(--text); }

.qb-results {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: rgba(95, 212, 198, 0.05);
  padding: var(--sp-6);
  text-align: center;
  max-width: 30rem;
}

.qb-results h3 { margin: 0 0 var(--sp-2); }

.qb-results .outcome-pct { display: block; }

.qb-results .cta-row { justify-content: center; margin: var(--sp-4) 0 0; }

/* flashcards */

.fc-stage { max-width: 44rem; }

.fc-card {
  position: relative;
  width: 100%;
  min-height: 16rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: var(--text);
  text-align: left;
  perspective: 1000px;
  display: block;
}

.fc-inner { position: relative; width: 100%; height: 100%; }

.fc-face {
  min-height: 16rem;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  backface-visibility: hidden;
}

.fc-face .fc-label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.fc-face p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.fc-back { display: none; border-left: 3px solid var(--accent); }

.fc-card.flipped .fc-front { display: none; }
.fc-card.flipped .fc-back { display: flex; }

.fc-stage .player-controls { margin-top: var(--sp-3); }

/* exam questions browse */

.qb-filters {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-3);
  align-items: center;
}

.qb-filters input[type="search"] {
  flex: 1;
  min-width: 12rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-size: 0.9375rem;
}

.exam-q-meta {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: var(--sp-1);
}

#qb-exam .qlist { max-width: 52rem; margin-top: var(--sp-4); }

/* ---------- universal footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--sp-8);
  padding: var(--sp-8) 0 var(--sp-6);
  color: var(--muted);
  font-size: 0.875rem;
  background:
    radial-gradient(60rem 20rem at 85% -10%, rgba(95, 212, 198, 0.06), transparent 60%),
    var(--bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}

.footer-brand .brand { margin-bottom: var(--sp-3); }

.footer-tag {
  color: var(--text);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
}

.footer-mono {
  font-size: 0.8125rem;
  line-height: 1.55;
  margin: 0;
  max-width: 22rem;
}

.footer-col { display: grid; gap: var(--sp-2); align-content: start; }

.footer-col h3 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-1);
}

.footer-col a {
  color: var(--muted);
  text-decoration: none;
  transition: color 120ms ease, padding-left 120ms ease;
}

.footer-col a:hover {
  color: var(--accent);
  padding-left: var(--sp-1);
}

.footer-legal { padding-top: var(--sp-4); }

.footer-legal p { margin: 0 0 var(--sp-1); font-size: 0.75rem; }

/* ---------- insights stat hero ---------- */

.stat-hero {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(95, 212, 198, 0.07), transparent 45%),
              var(--surface);
  padding: var(--sp-6);
  margin: var(--sp-6) 0 0;
}

.sh-main {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  align-items: baseline;
}

.sh-stat {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--muted);
  font-size: 0.875rem;
}

.sh-stat strong {
  font-family: var(--mono);
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 24px rgba(95, 212, 198, 0.35);
}

.sh-cells {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.sh-cell {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
}

.sh-cell strong { color: var(--accent); }

/* ---------- shimmer skeletons ---------- */

.skel-in { padding: var(--sp-4); display: grid; gap: var(--sp-2); }

.skel-in .bar,
.skeleton .bar {
  height: 2.4rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg,
    var(--surface-2) 40%, rgba(154, 167, 178, 0.14) 50%, var(--surface-2) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.skel-in .bar:nth-child(1) { width: 92%; }
.skel-in .bar:nth-child(2) { width: 78%; }
.skel-in .bar:nth-child(3) { width: 85%; animation-delay: 0.15s; }
.skel-in .bar:nth-child(4) { width: 64%; animation-delay: 0.3s; }
.skel-in .bar:nth-child(5) { width: 88%; animation-delay: 0.45s; }

@keyframes shimmer {
  from { background-position: 120% 0; }
  to { background-position: -80% 0; }
}

/* ---------- micro-interactions ---------- */

.btn, .btn-primary, .chip, .tab {
  transition: background 140ms ease, border-color 140ms ease,
    color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.btn:active, .btn-primary:active, .chip:active {
  transform: translateY(1px);
}

.btn-primary {
  box-shadow: 0 0 0 rgba(95, 212, 198, 0);
}

.btn-primary:hover {
  box-shadow: 0 0 24px rgba(95, 212, 198, 0.35);
  transform: translateY(-1px);
}

.level-card, .similar-card, .exam-row {
  transition: border-color 140ms ease, background 140ms ease,
    transform 140ms ease, box-shadow 140ms ease;
}

.level-card:hover, .similar-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(95, 212, 198, 0.15);
}

.tl-item:hover .tl-time { text-shadow: 0 0 14px rgba(95, 212, 198, 0.5); }

.bar-fill { transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1); }

.site-nav a.brand:hover .brand-logo { color: #8ff0e4; }

.brand-logo { transition: color 140ms ease, transform 300ms ease; }

.site-nav a.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.08); }

/* scrollbar (WebKit) */
.seg-list::-webkit-scrollbar,
.study-body::-webkit-scrollbar { width: 0.625rem; }

.seg-list::-webkit-scrollbar-track,
.study-body::-webkit-scrollbar-track { background: transparent; }

.seg-list::-webkit-scrollbar-thumb,
.study-body::-webkit-scrollbar-thumb {
  background: var(--surface-2);
  border-radius: 999px;
  border: 2px solid var(--bg);
}

.seg-list::-webkit-scrollbar-thumb:hover,
.study-body::-webkit-scrollbar-thumb:hover { background: var(--border); }

@media (max-width: 60rem) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
}

@media (max-width: 40rem) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5, 1.25rem); }
  .sh-stat strong { font-size: 1.6rem; }
}

/* ---------- reveal on scroll ---------- */

.rv {
  opacity: 0;
  transform: translateY(0.875rem);
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.rv.revealed {
  opacity: 1;
  transform: none;
}

/* stagger siblings lightly */
.exam-list .rv:nth-child(odd) { transition-delay: 0ms; }
.exam-list .rv:nth-child(even) { transition-delay: 40ms; }
.recent-list .rv + .rv { transition-delay: calc(var(--i, 1) * 30ms); }

/* ---------- page transitions ---------- */

.page-enter {
  animation: page-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to { opacity: 1; transform: none; }
}

/* ---------- ambient cursor glow ---------- */

.cursor-glow {
  position: fixed;
  left: -14rem;
  top: -14rem;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle,
    rgba(95, 212, 198, 0.05) 0%,
    rgba(95, 212, 198, 0.02) 35%,
    transparent 65%);
  transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- keyboard help ---------- */

.kbd-help {
  position: fixed;
  inset: 0;
  background: rgba(15, 18, 22, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  place-items: center;
  z-index: 50;
}

.kbd-help.open {
  display: grid;
  animation: help-in 180ms ease both;
}

@keyframes help-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kbd-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  min-width: 20rem;
  max-width: 26rem;
  transform: translateY(0.5rem) scale(0.97);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.kbd-help.open .kbd-card { transform: none; }

.kbd-card h3 { margin: 0 0 var(--sp-4); font-size: 1rem; }

.kbd-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-3);
  margin: 0 0 var(--sp-2);
  font-size: 0.875rem;
  align-items: center;
}

.kbd-card dd { margin: 0; color: var(--muted); }

/* ---------- logo ambient pulse ---------- */

.brand-logo { animation: logo-breathe 5s ease-in-out infinite; }

@keyframes logo-breathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(95, 212, 198, 0)); }
  50% { filter: drop-shadow(0 0 10px rgba(95, 212, 198, 0.45)); }
}

/* ---------- library head ---------- */

.lib-head { padding: var(--sp-6) 0 var(--sp-3); }

.lib-title { margin: 0 0 var(--sp-1); font-size: 1.375rem; }

.lib-sub { color: var(--muted); margin: 0; max-width: 46rem; font-size: 0.9375rem; }

/* ---------- fact cards / faq / build log ---------- */

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.fact-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}

.fact-card strong {
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--accent);
}

.fact-card span { color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }

.faq {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: var(--sp-2);
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-weight: 600;
  font-size: 0.9375rem;
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  color: var(--muted);
  font-size: 1.125rem;
}

.faq[open] summary::after { content: "−"; }

.faq summary:hover { color: var(--accent); }

.faq p {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-3);
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

.timeline-list { list-style: none; padding: 0; }

.timeline-list li {
  position: relative;
  padding: 0 0 var(--sp-4) var(--sp-6);
  border-left: 2px solid var(--border);
  margin-left: 0.5rem;
}

.timeline-list li:last-child { padding-bottom: 0; }

.timeline-list li::before {
  content: "";
  position: absolute;
  left: -0.3125rem;
  top: 0.375rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(95, 212, 198, 0.5);
}

.tl-date {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  display: block;
  margin-bottom: var(--sp-1);
}

/* ---------- skeletons (shared) ---------- */

.row-skel { padding: var(--sp-2) var(--sp-4); }

.row-skel .skel-in { padding: 0; }

.row-skel .bar { height: 1.1rem; margin-bottom: var(--sp-1); }

.chip-skel {
  display: inline-block;
  height: 1.75rem;
  width: 6.5rem;
  border-radius: 999px;
  background: linear-gradient(100deg,
    var(--surface-2) 40%, rgba(154, 167, 178, 0.14) 50%, var(--surface-2) 60%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

.chip-skel:nth-child(2n) { width: 5rem; }
.chip-skel:nth-child(3n) { width: 7.5rem; animation-delay: 0.2s; }

/* ---------- glossary ---------- */

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-bottom: var(--sp-8);
}

.gloss-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.gloss-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.gloss-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
}

.gloss-head h3 { margin: 0; font-size: 1rem; }

.gloss-count {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.0625rem 0.5rem;
  white-space: nowrap;
}

.gloss-def {
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

.gloss-ex {
  margin: 0;
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------- level strip (library) ---------- */

.lvl-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.lvl-strip-card {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-1);
  cursor: pointer;
  align-content: start;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.lvl-strip-card:hover { border-color: var(--accent); transform: translateY(-1px); }

.lvl-strip-card.on {
  border-color: var(--accent);
  background: rgba(95, 212, 198, 0.08);
  box-shadow: 0 0 20px rgba(95, 212, 198, 0.15);
}

.lsc-name { font-weight: 600; font-size: 0.875rem; }

.lsc-strip-card.on .lsc-name { color: var(--accent); }

.lvl-strip-card.on .lsc-name { color: var(--accent); }

.lsc-stats {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.lsc-note {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* ---------- print: study packs as clean PDFs ---------- */

@media print {
  :root {
    --bg: #fff;
    --surface: #fff;
    --surface-2: #f4f4f4;
    --border: #ccc;
    --text: #111;
    --muted: #555;
    --accent: #0a7a6e;
    --accent-ink: #fff;
    --amber: #8a6100;
    --amber-ink: #fff;
  }

  body { font-size: 11pt; line-height: 1.5; background: #fff; color: #111; }

  .site-header, .site-nav, .site-footer, .toolbar, .kbd-help,
  .cursor-glow, .splash-cue, .study-topbar, .reading-progress,
  .player-col, .player-controls, .panel-tabs, .cta-row,
  #view-home, #view-insights, #view-qbank, #view-glossary,
  #view-library, #view-exam, #view-mission, #view-purpose,
  #view-how-to, #view-builtby, .hint, .sp-actions { display: none !important; }

  #view-study-page { display: block !important; }
  #view-study-page[hidden] { display: block !important; }

  .study-page { max-width: none; padding: 0; }

  .sp-title { font-size: 20pt; }

  .sp-sec { break-inside: avoid-page; margin-top: 1.2em; }

  .sp-sec > h3 {
    border-bottom: 1.5pt solid #111;
    color: #111;
    padding-bottom: 0.2em;
  }

  .qa-card, .tl-item, .checklist li, .gloss-card, .fact-card,
  .narr-block, .notice, .similar-card {
    border: 0.75pt solid #bbb;
    background: #fff;
    break-inside: avoid;
  }

  .qa-card.qa-ok, .qa-card.qa-mid, .qa-card.qa-gap { border-left: 2.5pt solid #888; }
  .qa-card.qa-ok { border-left-color: #0a7a6e; }
  .qa-card.qa-gap { border-left-color: #b33; }

  a { color: #111; text-decoration: none; }
  a.jump::after { content: " (" attr(href) ")"; font-size: 7.5pt; color: #666; }

  .checklist input[type="checkbox"] {
    appearance: auto;
    border: 1pt solid #111;
  }

  .progress { display: none; }

  .lvl-tag { border-color: #111; color: #111; }

  @page { margin: 1.8cm; }
}

/* mini timeline + question list (exam study panel) */

.mini-timeline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.mini-timeline a {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1875rem 0.5rem;
  text-decoration: none;
}

.mini-timeline a:hover { border-color: var(--accent); color: var(--accent); }

.mini-tl-sep { color: var(--muted); }

.mini-qlist {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: mq;
}

.mini-qlist li {
  counter-increment: mq;
  padding: var(--sp-1) 0 var(--sp-1) 1.75rem;
  position: relative;
  font-size: 0.875rem;
  line-height: 1.5;
}

.mini-qlist li::before {
  content: "Q" counter(mq);
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
}

/* ---------- continue studying strip ---------- */

.cont-strip { margin-bottom: var(--sp-4); }

.cont-h {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-2);
}

.cont-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-2);
}

.cont-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-3);
  text-decoration: none;
  color: var(--text);
  display: grid;
  gap: var(--sp-1);
  align-content: start;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.cont-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}

.cont-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.cont-sub { color: var(--muted); font-size: 0.75rem; }

.cont-bar { height: 0.375rem; margin: 0; }

.cont-pct {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--accent);
}

.cont-pct.cont-new { color: var(--muted); }

/* ---------- study pager ---------- */

.sp-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.pager-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  color: var(--text);
  display: grid;
  gap: var(--sp-1);
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.pager-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}

.pager-card.next { text-align: right; }

.pager-card.back { text-align: center; }

.pager-dir {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.pager-title {
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.pager-sub { color: var(--muted); font-size: 0.75rem; }

@media (max-width: 40rem) {
  .sp-pager { grid-template-columns: 1fr; }
  .pager-card.next { text-align: left; }
}

/* glossary term auto-links */
a.gterm {
  color: inherit;
  text-decoration: underline dotted rgba(95, 212, 198, 0.55);
  text-underline-offset: 3px;
  transition: text-decoration-color 140ms ease, color 140ms ease;
}

a.gterm:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- a11y helpers ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.visually-hidden-focusable:not(:focus) {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- responsive ---------- */

@media (max-width: 60rem) {
  .exam-layout { grid-template-columns: 1fr; }
  .player-col, .transcript { position: static; max-height: none; }
  .panel-tabs + .transcript { max-height: 70vh; }
  .exam-title { font-size: 0.9375rem; }
}

@media (max-width: 32rem) {
  .toolbar input[type="search"] { flex-basis: 100%; }
  .seg { grid-template-columns: 3.6rem 1fr; }
  .seg .copy-ts { display: none; }
  .exam-proj { white-space: normal; }
}

/* ================= LABS ================= */

.labs-controls {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) repeat(4, minmax(118px, 160px));
  gap: 12px;
  margin: 18px 0 10px;
}
.labs-controls input,
.labs-controls select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 14px;
  font: inherit;
}
.chip-mono { font-family: var(--mono); font-size: .78em; }

.labs-courses { display: grid; gap: 14px; margin-top: 14px; }
.lab-course {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  overflow: hidden;
}
.lab-course summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 18px;
}
.lab-course summary::-webkit-details-marker { display: none; }
.lab-course summary::before { content: "▸"; color: var(--accent); transition: transform .15s; }
.lab-course[open] summary::before { transform: rotate(90deg); }
.lc-name { font-weight: 600; }
.lc-meta { color: var(--muted); font-size: .85em; margin-left: auto; }
.lc-meta a { color: var(--accent); }
.lc-lvl {
  display: inline-block; font-size: .72em; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); vertical-align: middle;
}
.lc-student { color: var(--muted); font-weight: 400; font-size: .88em; }

/* project-lab tape rail */
.lab-tape-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 16px; }
.tape-q {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 12px; margin: 6px 0; border-radius: 10px;
  border: 1px solid var(--border); text-decoration: none;
  color: var(--text); font-size: .92em; line-height: 1.45;
}
.tape-q:hover { border-color: var(--accent); background: var(--surface-2); }
.tq-ts {
  font-family: var(--mono); font-size: .82em; color: var(--accent);
  white-space: nowrap; flex: none;
}
.lab-tape-qs { padding: 0 6px 8px; }

.lab-rows { list-style: none; margin: 0; padding: 0 8px 10px; display: grid; gap: 2px; }
.lab-row {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 12px; border-radius: 10px; text-decoration: none;
  color: var(--text);
}
.lab-row:hover { background: rgba(95, 212, 198, .08); }
.lr-name { flex: 1; }
.lr-meta { color: var(--muted); font-size: .8em; white-space: nowrap; }

/* labs catalog pagination */
.labs-pager {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 16px; min-height: 34px;
}
.lp-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lp-nav button {
  min-width: 34px; height: 32px; padding: 0 8px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  font: inherit; font-size: .9em;
}
.lp-nav button:hover:not(:disabled) { border-color: var(--accent); }
.lp-nav button.on { border-color: var(--accent); color: var(--accent); }
.lp-nav button:disabled { opacity: .35; cursor: default; }
.lp-info, .lp-gap { color: var(--muted); font-size: .85em; }
.lp-info { margin-left: 6px; }

/* lab viewer */
.lab-bullets { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.lab-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lab-task {
  display: grid; grid-template-columns: 34px 1fr; gap: 12px;
  border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; background: rgba(255, 255, 255, .015);
}
.lab-task.done { opacity: .55; }
.lab-task.done .lt-title { text-decoration: line-through; }
.lab-tick {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border); background: transparent;
  color: var(--muted); font-size: 14px; cursor: pointer;
}
.lab-tick:hover { border-color: var(--accent); color: var(--accent); }
.lab-tick[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.lt-title { margin: 0 0 6px; font-size: 1em; }
.lt-id {
  font-family: var(--mono);
  font-size: .8em; color: var(--accent);
  border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px;
}
.lt-concept, .lt-expl { margin: 6px 0 0; font-size: .92em; color: var(--muted); }
.lt-concept strong, .lt-expl strong { color: var(--text); }
.lab-code {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  background: #0d1117; border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: .84em; overflow-x: auto; white-space: pre;
}

.lab-fulltext summary { cursor: pointer; color: var(--accent); }
.lab-fulltext pre {
  max-height: 60vh; overflow: auto; padding: 14px;
  background: #0d1117; border: 1px solid var(--border); border-radius: 10px;
  font-size: .82em; white-space: pre-wrap;
}

.lab-doc {
  max-height: 65vh; overflow: auto; padding: 4px 16px 16px;
  border: 1px solid var(--border); border-radius: 10px;
  font-size: .95em; line-height: 1.65;
}
.lab-doc h2, .lab-doc h3, .lab-doc h4, .lab-doc h5 {
  margin: 18px 0 6px; line-height: 1.3;
}
.lab-doc h2 { font-size: 1.15em; }
.lab-doc h3 { font-size: 1.05em; }
.lab-doc h4, .lab-doc h5 { font-size: 1em; color: var(--muted); }
.lab-doc p { margin: 8px 0; }
.lab-doc ul, .lab-doc ol { margin: 8px 0; padding-left: 22px; }
.lab-doc blockquote {
  margin: 10px 0; padding: 6px 12px; border-left: 3px solid var(--accent);
  color: var(--muted); background: rgba(255,255,255,.03); border-radius: 0 8px 8px 0;
}
.lab-doc hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
.lab-doc code {
  font-family: var(--mono); font-size: .88em; padding: 1px 5px;
  background: #0d1117; border-radius: 5px;
}
.lab-doc pre.lab-code { margin: 10px 0; }
.lab-doc-pre {
  max-height: 60vh; overflow: auto; padding: 14px;
  background: #0d1117; border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--mono); font-size: .82em; white-space: pre-wrap;
}

/* ---- lab viewer two-column layout ---- */
.lab-cols {
  display: grid;
  grid-template-columns: minmax(0, 64rem) minmax(320px, 26rem);
  justify-content: center;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
/* the original document docks at the top of the rail and scrolls
   away with the page — it does not follow the reader */
.lab-rail { position: static; }
#view-lab .sp-sec { margin-top: clamp(2.5rem, 4vw, 4rem); }
#view-lab .sp-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.lab-docbox { border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-2); overflow: hidden; }
.lab-docbox summary {
  cursor: pointer; list-style: none;
  display: flex; flex-direction: column; gap: 3px; padding: 14px 18px;
}
.lab-docbox summary::-webkit-details-marker { display: none; }
.lab-docbox summary::before {
  content: "📄"; margin-bottom: 4px; font-size: 1.1em;
}
.ld-title { font-weight: 600; }
.ld-hint { color: var(--muted); font-size: .8em; }
.lab-docbox[open] .ld-hint::after { content: ""; }
.lab-docbox .sp-sub, .lab-docbox .chip-cloud, .lab-docbox .lab-doc { padding: 0 18px; }
.lab-docbox .chip-cloud { margin-bottom: 10px; }
.lab-docbox .lab-doc {
  max-height: 55vh; overflow: auto; margin: 0 0 16px; border: none;
  border-top: 1px solid var(--border); border-radius: 0; padding-top: 12px;
}
@media (max-width: 1024px) {
  .lab-cols { grid-template-columns: minmax(0, 1fr); }
  .lab-rail { order: 2; }
}

/* lab-page loading skeletons — mirror the final wireframe */
.skel-sec > *:not(h3) { visibility: hidden; }
.skel-sec { position: relative; }
.skel-sec::after {
  content: ""; position: absolute; inset: 44px 0 0;
  background:
    linear-gradient(100deg, transparent 40%, rgba(154,167,178,.10) 50%, transparent 60%),
    repeating-linear-gradient(
      to bottom,
      var(--surface-2) 0 14px, transparent 14px 22px);
  background-size: 200% 100%, 100%;
  border-radius: 8px;
  animation: shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
.skel-sec#lab-tasks-sec::after { height: 340px; inset: 100px 0 auto 0; }
.skel-sec#lab-context-sec::after { height: 260px; inset: 44px 0 auto 0; }
.skel-doc { min-height: 92px; }
.skel-doc .lab-doc { display: none; }
@media (prefers-reduced-motion: reduce) {
  .skel-sec::after { animation: none; opacity: .6; }
}

/* context + ladder */
.lab-context .lab-bp { font-size: 1.02em; line-height: 1.65; margin: 4px 0 14px; }
.lab-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.badge {
  font-size: .78em; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted);
}
.badge-lv-beginner { color: #7ee787; border-color: #7ee78755; }
.badge-lv-intermediate { color: #f2cc60; border-color: #f2cc6055; }
.badge-lv-advanced { color: #ff9492; border-color: #ff949255; }
.badge-tool { text-transform: none; font-family: var(--mono); }
.lab-ladder {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  counter-reset: ll;
}
.lab-ladder li {
  display: grid; grid-template-columns: 140px 1fr; gap: 14px;
  padding: 13px 18px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,.02);
}
.ll-stage { font-weight: 600; color: var(--accent); font-size: .9em; }
.ll-do { color: var(--muted); font-size: .92em; line-height: 1.55; }

/* warm-up + prereq notes */
.warm-card {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 14px 18px; margin-bottom: 12px;
  background: rgba(255,255,255,.02);
}
.warm-card h4 { margin: 0 0 4px; font-size: .95em; }
.warm-card p { margin: 0; color: var(--muted); font-size: .9em; }
.pn-item { border-bottom: 1px dashed var(--border); padding: 6px 0; }
.pn-item summary { cursor: pointer; color: var(--text); font-size: .92em; }
.pn-item p { margin: 8px 0; color: var(--muted); font-size: .88em; }

/* deep dive */
.lt-dd {
  margin-top: 12px; border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255,255,255,.015); overflow: hidden;
}
.lt-dd summary {
  cursor: pointer; padding: 9px 14px; font-size: .86em; font-weight: 600;
  color: var(--accent); list-style: none;
}
.lt-dd summary::-webkit-details-marker { display: none; }
.lt-dd summary::before { content: "∷ "; }
.lt-dd[open] summary { border-bottom: 1px solid var(--border); }
.lt-dd > *:not(summary) { padding: 0 14px; }
.lt-dd h5 {
  margin: 14px 0 6px; font-size: .78em; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.dd-why { margin: 10px 0 2px; font-size: .92em; line-height: 1.6; }
.dd-steps { margin: 4px 0; padding-left: 20px; display: grid; gap: 6px; }
.dd-steps li { font-size: .88em; }
.dd-steps code {
  font-family: var(--mono); font-size: .85em; padding: 1px 6px;
  background: #0d1117; border-radius: 5px; word-break: break-all;
}
.dd-steps span { color: var(--muted); }
.dd-flags { border-collapse: collapse; width: 100%; font-size: .86em; }
.dd-flags td { border: 1px solid var(--border); padding: 5px 9px; vertical-align: top; }
.dd-flags td:first-child { font-family: var(--mono); white-space: nowrap; width: 1%; }
.lt-dd ul { margin: 4px 0 10px; padding-left: 20px; display: grid; gap: 5px; }
.lt-dd ul li { font-size: .88em; color: var(--text); }
.dd-warn li::marker { content: "⚠ "; }
.dd-verify li::marker { content: "✓ "; }
.dd-harden li::marker { content: "🛡 "; }
.dd-risk { margin-top: 4px; }
.dd-risk li { color: #ffb86c; }

/* attachments */
.lab-files { display: grid; gap: 8px; margin-bottom: 14px; }
.lab-file {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; background: rgba(255,255,255,.02);
}
.lf-ic { font-size: 1.1em; }
.lf-name { font-family: var(--mono); font-size: .9em; flex: 1; }
.lf-meta { color: var(--muted); font-size: .8em; }
.lf-dl {
  font: inherit; font-size: .82em; cursor: pointer;
  padding: 4px 12px; border-radius: 8px;
  border: 1px solid var(--accent); color: var(--accent); background: none;
}
.lf-dl:hover { background: rgba(95, 212, 198, .1); }

/* quiz */
.lab-mcq { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.lm-stem { margin: 0 0 10px; font-weight: 500; }
.lm-opts { display: grid; gap: 6px; }
.qopt {
  display: flex; gap: 10px; align-items: baseline; text-align: left;
  background: transparent; border: 1px solid var(--border);
  color: var(--text); border-radius: 10px;
  padding: 9px 12px; cursor: pointer; font: inherit;
}
.qopt:hover { border-color: var(--accent); }
.qopt-l {
  font-family: var(--mono);
  color: var(--muted); font-size: .85em;
}
.qopt.right { border-color: #34d399; background: rgba(52, 211, 153, .1); }
.qopt.wrong { border-color: #f87171; background: rgba(248, 113, 113, .08); }
.lm-explain { margin: 10px 0 0; font-size: .88em; color: var(--muted); }
.lm-explain strong { color: #34d399; }

/* interview drills */
.iv-q { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.iv-q summary { cursor: pointer; font-weight: 500; }
.iv-type {
  font-size: .72em; color: var(--accent); text-transform: uppercase;
  letter-spacing: .06em; margin-left: 8px;
}
.iv-follow, .iv-ans, .iv-skill { margin: 10px 0 0; font-size: .92em; }
.iv-ans { color: var(--text); }
.iv-follow, .iv-skill { color: var(--muted); }

.lab-eq summary { cursor: pointer; color: var(--accent); margin-bottom: 10px; }

@media (max-width: 720px) {
  .labs-controls { grid-template-columns: 1fr; }
}

/* ---------- hall of fame ---------- */

.hof-flag { color: var(--amber); margin-left: 6px; font-size: .85em; }
.hof-panel { margin-top: 34px; }
.hof-card {
  position: relative;
  border: 1px solid rgba(240, 180, 41, 0.35);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 14px 0 22px;
  background:
    linear-gradient(150deg, rgba(240, 180, 41, 0.07), transparent 45%),
    linear-gradient(180deg, rgba(31, 38, 46, 0.6), var(--surface) 40%);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.hof-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 180, 41, 0.6), transparent);
}

.hof-card.hof-compact { padding: 14px 16px; }
.hof-head { display: flex; gap: 12px; align-items: flex-start; }
.hof-trophy {
  font-size: 1.5em;
  line-height: 1.2;
  filter: drop-shadow(0 0 10px rgba(240, 180, 41, 0.55));
}
.hof-titles h3 { margin: 0 0 4px; font-size: 1.02em; }
.hof-byline { margin: 0; color: var(--muted); font-size: .88em; }
.hof-citation { margin: 12px 0 0; font-size: .95em; }
.hof-evidence { list-style: none; margin: 12px 0 0; padding: 0; }
.hof-evidence li { margin: 6px 0; font-size: .9em; }
.hof-evidence li a { text-shadow: 0 0 12px rgba(95, 212, 198, 0.25); }
.hof-links { margin-top: 12px; }
.hof-links a {
  border-color: rgba(240, 180, 41, 0.4) !important;
  color: var(--amber) !important;
}
.hof-links a:hover {
  border-color: var(--amber) !important;
  box-shadow: var(--glow-amber);
}
.hof-nom-h { margin-top: 34px; }
.hof-ribbon {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid rgba(240, 180, 41, .45);
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--amber-soft), transparent 60%);
  padding: 10px 14px;
  margin: 4px 0 10px;
  font-size: .92em;
  box-shadow: var(--glow-amber);
}
.hof-ribbon a { color: var(--amber); }
#sp-hof[hidden] { display: none; }

/* ============================================================
   WIREFRAME v2 — dashboard, journey, charts, HOF layout
   ============================================================ */

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

#home-dash { padding: var(--sp-8) 0 var(--sp-8); }

.dash-story { text-align: center; margin-bottom: var(--sp-8); }

.dash-h {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  margin: 0 0 var(--sp-6);
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

.journey {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--sp-3);
  padding: 0;
  margin: 0 auto var(--sp-2);
  max-width: 56rem;
  counter-reset: jstep;
}

.j-step {
  position: relative;
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  text-align: left;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  padding: var(--sp-3) var(--sp-4);
  counter-increment: jstep;
  transition: transform 200ms var(--ease-out), border-color 160ms ease, box-shadow 200ms var(--ease-out);
}

.j-step:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: var(--shadow-1);
}

.j-step:nth-child(4):hover { border-color: var(--amber); }

.j-glyph {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(95, 212, 198, 0.5));
}

.j-step:nth-child(4) .j-glyph { color: var(--amber); filter: drop-shadow(0 0 8px rgba(240, 180, 41, 0.5)); }

.j-step strong { display: block; font-family: var(--font-display); font-size: 0.95rem; }
.j-step div span:last-child { color: var(--muted); font-size: 0.75rem; line-height: 1.4; display: block; margin-top: 2px; }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.dash-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
@media (max-width: 900px) { .dash-duo { grid-template-columns: 1fr; } }

/* donut */
.dash-donut[aria-busy="true"] { min-height: 180px; }
.donut-wrap { position: relative; width: 148px; margin: var(--sp-2) auto var(--sp-3); }
.donut-svg { width: 148px; height: 148px; transform: rotate(-90deg); }
.donut-track { fill: none; stroke: var(--surface-2); stroke-width: 11; }
.donut-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 0 1;
  filter: drop-shadow(0 0 8px rgba(95, 212, 198, 0.45));
  transition: stroke-dasharray 1100ms var(--ease-out) 250ms;
}
.revealed .donut-ring { stroke-dasharray: var(--dash) 1; }
.donut-center {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
}
.donut-center strong {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.donut-center span { color: var(--muted); font-size: 0.75rem; }
.donut-legend {
  list-style: none; display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2); padding: 0; margin: 0;
  text-align: center;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-3);
}
.donut-legend strong {
  display: block; font-family: var(--font-display);
  font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.donut-legend span { color: var(--muted); font-size: 0.7rem; }

/* level bars panel */
.dash-levels { margin-top: var(--sp-3); }
.dash-levels .bar-row { margin: var(--sp-3) 0; }

/* growth sparkline */
.dash-growth { margin-top: var(--sp-3); }
.spark-svg { width: 100%; height: auto; display: block; overflow: visible; }
.spark-area { fill: rgba(95, 212, 198, 0.14); }
.spark-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(95, 212, 198, 0.4));
  transition: stroke-dashoffset 1400ms var(--ease-out) 200ms;
}
.revealed .spark-line { stroke-dashoffset: 0; }
.spark-dot { fill: var(--amber); filter: drop-shadow(0 0 6px rgba(240, 180, 41, 0.7)); }
.spark-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--border-soft);
  padding-top: var(--sp-3); margin-top: var(--sp-2);
  font-size: 0.85rem; color: var(--muted);
}
.spark-meta strong {
  font-family: var(--font-display);
  font-size: 1.15rem; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.spark-latest { color: var(--amber); font-family: var(--mono); font-size: 0.75rem; }

/* ---------- hall of fame layout ---------- */

.hof-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
  margin-top: var(--sp-4);
}
@media (max-width: 960px) { .hof-layout { grid-template-columns: 1fr; } }

.hof-aside {
  position: sticky;
  top: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(31, 38, 46, 0.5), var(--surface) 30%);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  box-shadow: var(--shadow-1);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
@media (max-width: 960px) {
  .hof-aside { position: static; max-height: none; }
}
.hof-aside h2 {
  font-size: 1.05rem;
  margin: var(--sp-4) 0 var(--sp-2);
}
.hof-aside h2:first-child { margin-top: 0; }
.hof-aside .steps { padding-left: 1.2rem; }
.hof-aside .steps li { font-size: 0.85rem; margin: var(--sp-2) 0; }
.hof-aside ul { padding-left: 1.2rem; font-size: 0.85rem; }
.hof-aside a { color: var(--accent); }
.hof-aside code {
  font-family: var(--mono); font-size: 0.75rem;
  background: var(--surface-2); padding: 1px 5px; border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .donut-ring, .spark-line { transition: none; }
  .donut-ring { stroke-dasharray: var(--dash) 1; }
  .spark-line { stroke-dashoffset: 0; }
}

/* ==========================================================================
   v11 — premium layer
   One bold move: the hero plots the real archive (a point per session,
   month on x, score on y). Everything else stays quiet and responds to
   the pointer rather than animating at it.
   ========================================================================== */

/* ---------- global chrome: read progress + film grain ---------- */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: var(--border-soft);
  opacity: 0;
  transition: opacity 240ms var(--ease-out);
}

.scroll-progress.on { opacity: 1; }

.scroll-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--indigo), var(--accent) 55%, var(--amber));
  box-shadow: 0 0 12px rgba(95, 212, 198, 0.55);
  transform-origin: left;
}

/* barely-there grain — kills the plastic flatness of large dark fills */
.grain {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav: sliding indicator ---------- */

.nav-links { position: relative; }

.nav-indicator {
  position: absolute;
  left: 0;
  top: 50%;
  height: 1.75rem;
  width: 0;
  margin-top: -0.875rem;
  border-radius: 999px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(95, 212, 198, 0.25);
  opacity: 0;
  pointer-events: none;
  transition: transform 380ms var(--ease-spring), width 380ms var(--ease-spring),
    opacity 200ms var(--ease-out);
}

.nav-indicator.on { opacity: 1; }
.nav-links a { position: relative; z-index: 1; }

/* ---------- hero: the archive field ---------- */

.splash-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease-out;
}

.splash-field.lit { opacity: 1; }
.splash-field.hot { cursor: pointer; }

/* fade the top and bottom edges only — the horizontal span is the time
   axis and must stay intact */
.splash-field {
  mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent);
}

/* session readout that follows the pointer across the field */
.field-tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: 15rem;
  display: grid;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
}

.field-tip.on { opacity: 1; }
.field-tip strong { font-size: 0.85rem; font-family: var(--font-display); }
.ft-proj {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ft-meta { font-family: var(--mono); font-size: 0.65rem; color: var(--accent); }

@media (max-width: 720px) { .field-tip { display: none; } }

/* the field sits under the grid + vignette but over the aurora */
.splash-grid { z-index: 1; }
.splash::after { z-index: 2; }
.splash-inner { z-index: 3; }

.splash-ident {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 auto var(--sp-6);
  padding: 0.3rem 0.85rem 0.3rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  animation: splash-rise 600ms ease-out both;
}

.splash-ident b { color: var(--text); font-weight: 600; }

.ident-pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(95, 212, 198, 0.55);
  animation: ident-ping 2.6s ease-out infinite;
  flex: none;
}

@keyframes ident-ping {
  0% { box-shadow: 0 0 0 0 rgba(95, 212, 198, 0.5); }
  70% { box-shadow: 0 0 0 0.55rem rgba(95, 212, 198, 0); }
  100% { box-shadow: 0 0 0 0 rgba(95, 212, 198, 0); }
}

/* legend — makes the field readable as data, not decoration */
.splash-legend {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: 3;
  display: grid;
  gap: 2px;
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 800ms ease-out 900ms;
  pointer-events: none;
  text-align: left;
}

.splash-legend.on { opacity: 0.7; }
.lg-title { color: var(--text); opacity: 0.75; }
.lg-axes { display: flex; gap: var(--sp-3); }
.lg-x::before, .lg-y::before {
  content: "";
  display: inline-block;
  width: 0.8rem;
  height: 1px;
  vertical-align: middle;
  margin-right: 0.35rem;
  background: currentColor;
  opacity: 0.5;
}
.lg-y::before { transform: rotate(-90deg); }

@media (max-width: 720px) { .splash-legend { display: none; } }

/* ---------- topic marquee: what the archive actually covers ---------- */

.topic-band {
  position: relative;
  margin: 0 calc(50% - 50vw) var(--sp-8);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.band-track {
  display: flex;
  gap: var(--sp-6);
  width: max-content;
  animation: band-scroll 64s linear infinite;
}

.topic-band:hover .band-track { animation-play-state: paused; }

.band-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--muted);
  white-space: nowrap;
}

.band-item b { color: var(--text); font-weight: 500; }
.band-item i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent);
  opacity: 0.8;
}
.band-item.hot i { color: var(--amber); }

@keyframes band-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- section rails ---------- */

.rail {
  margin: var(--sp-8) 0 var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-soft);
  display: grid;
  gap: var(--sp-2);
  max-width: 42rem;
}

.rail-h {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}

.rail-sub { margin: 0; color: var(--muted); font-size: 0.9375rem; max-width: 36rem; }

/* ---------- panels: cursor spotlight + hairline top light ---------- */

.home-panel, .level-card, .hof-card {
  position: relative;
  isolation: isolate;
}

.home-panel::after,
.level-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  background: radial-gradient(
    18rem 18rem at var(--mx, 50%) var(--my, 0%),
    rgba(95, 212, 198, 0.09), transparent 70%);
}

.home-panel:hover::after,
.level-card:hover::before { opacity: 1; }

/* a single lit hairline along the top edge — reads as machined, not shadowed */
.home-panel {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 14%);
}

/* ---------- charts ---------- */

.dash-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

.donut-ring { stroke: url(#donut-grad); }

.donut-center strong { font-variant-numeric: tabular-nums; }

/* Level bars: one gradient for all four rows. The id selector is
   deliberate — .home-panel:nth-child(2) .bar-fill above is more specific
   than a two-class selector and would otherwise paint these flat amber. */
#dash-levels .bar-fill {
  background: linear-gradient(90deg, var(--indigo), var(--accent));
  position: relative;
  overflow: hidden;
}

#dash-levels .bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: translateX(-100%);
}

.revealed #dash-levels .bar-fill::after { animation: sheen 1.5s ease-out 500ms; }

@keyframes sheen { to { transform: translateX(200%); } }

/* growth: full-width flight-recorder strip with a live readout */
.growth-panel { margin-top: var(--sp-4); }

.growth-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.growth-readout {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
  min-height: 2.4rem;
  display: grid;
  gap: 2px;
  align-content: start;
}

.growth-readout b {
  display: block;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* height:auto lets the 4:1 viewBox fill the panel; a fixed height would
   letterbox the chart under the default preserveAspectRatio */
.growth-panel .spark-svg { height: auto; }
.growth-panel .dash-growth { cursor: crosshair; }

.spark-grid { stroke: var(--border-soft); stroke-width: 1; }
.spark-cursor { stroke: var(--accent); stroke-width: 1; opacity: 0; stroke-dasharray: 3 3; }
.spark-cursor.on { opacity: 0.6; }
.spark-hit { fill: transparent; }
.spark-marker { fill: var(--accent); opacity: 0; }
.spark-marker.on { opacity: 1; }

.spark-tick {
  font-family: var(--mono);
  font-size: 9px;
  fill: var(--muted);
  opacity: 0.65;
}

/* The home column is roughly half the width of the insights page, so the
   three-column row cannot hold. Stack it there only. */

#home-recent-home .recent-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sp-1) var(--sp-2);
  align-items: center;
}

/* name · level · date on one line, project wrapping under all three;
   the level column collapses to zero when a session has no level */
#home-recent-home .recent-row strong {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#home-recent-home .lvl-tag { grid-area: 1 / 2; justify-self: start; }
#home-recent-home .recent-date { grid-area: 1 / 3; }
#home-recent-home .recent-proj { grid-area: 2 / 1 / auto / -1; }

/* ---------- closing band ---------- */

.closing {
  position: relative;
  margin: var(--sp-8) calc(50% - 50vw) 0;
  padding: clamp(3rem, 8vw, 5.5rem) var(--sp-4);
  overflow: hidden;
  border-top: 1px solid var(--border);
  text-align: center;
}

.closing::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background:
    radial-gradient(ellipse 34% 46% at 28% 60%, rgba(95, 212, 198, 0.10), transparent 66%),
    radial-gradient(ellipse 30% 40% at 74% 40%, rgba(240, 180, 41, 0.06), transparent 66%);
  animation: aurora-drift 30s ease-in-out infinite alternate;
  pointer-events: none;
}

.closing-inner { position: relative; max-width: 46rem; margin: 0 auto; }

.closing-h {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

.closing-sub {
  color: var(--muted);
  margin: 0 auto var(--sp-6);
  max-width: 34rem;
  font-size: 1rem;
}

.closing .cta-row { justify-content: center; }

/* ---------- launchpad manifesto (home, right under the hero) ---------- */

.launchpad {
  position: relative;
  margin: 0 calc(50% - 50vw) var(--sp-8);
  padding: clamp(2.75rem, 7vw, 4.75rem) var(--sp-4);
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}

/* the launch trajectory: a single line rising out of the band */
.launchpad::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: clamp(1.75rem, 4vw, 2.75rem);
  background: linear-gradient(to top, var(--amber), transparent);
}

.launchpad-inner { position: relative; max-width: 50rem; margin: 0 auto; }

.launchpad-eyebrow { color: var(--amber); }

.launchpad-line {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3.8vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: var(--sp-3) 0 var(--sp-6);
  text-wrap: balance;
}

.launchpad-line em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent), var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.launchpad-line strong { font-weight: 600; color: var(--text); }

.launchpad-who {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  padding: 0;
}

.launchpad-who li {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-glass);
  color: var(--muted);
}

.launchpad-coda {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- chapter close (built-by) ---------- */

.chapter-close {
  margin: var(--sp-6) 0;
  padding: var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--amber);
  background: var(--amber-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.chapter-close p { margin: 0 0 var(--sp-3); }
.chapter-close p:last-child { margin-bottom: 0; }

.page .chapter-dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  padding: 0;
  list-style: none;
}

.chapter-dates li {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.chapter-dates .tl-date { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--amber); }

.footer-launch { color: var(--muted); font-size: 0.85rem; margin: var(--sp-3) 0 0; max-width: 22rem; }
.footer-launch em { font-style: normal; color: var(--amber); }

/* ---------- hall of fame ---------- */

/* This is the only .page carrying a two-column layout; the 44rem prose
   measure squeezed both columns into a third of the viewport. */
#view-hof .page { max-width: 100%; }
#view-hof .page > .eyebrow,
#view-hof .page > h2 { max-width: 44rem; }
#view-hof .hof-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
#view-hof .hof-main > p { max-width: 42rem; }

@media (max-width: 960px) {
  #view-hof .hof-layout { grid-template-columns: 1fr; }
}

/* a slow gold sweep, once, when the entry comes into view */

/* .hof-card already sets overflow:hidden, which clips the sweep for us */
.hof-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%,
    rgba(247, 215, 116, 0.13) 50%, transparent 62%);
  transform: translateX(-120%);
}

.revealed .hof-card::after,
.hof-panel .hof-card::after,
#hof-list .hof-card::after { animation: gold-sweep 2.4s ease-out 600ms; }

@keyframes gold-sweep { to { transform: translateX(120%); } }

/* ---------- buttons: press physics ---------- */

.btn-primary, .btn {
  transition: transform 200ms var(--ease-spring), background-color 200ms var(--ease-out),
    border-color 200ms var(--ease-out), color 200ms var(--ease-out),
    box-shadow 240ms var(--ease-out);
}

.btn-primary:hover { box-shadow: var(--glow-accent), var(--shadow-1); }

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {
  /* a 146-point scatter cannot be read at this width, and the keep-out box
     squeezes it into two thin bands — drop it and keep the aurora */
  .splash-field { display: none; }

  /* the pill radius is designed for a single nav row; once the links wrap
     it cuts into the first and last of them */
  .site-nav { border-radius: var(--radius-lg); }
  .nav-indicator { display: none; }

  .rail { margin-top: var(--sp-6); }
  .growth-head { flex-direction: column; gap: var(--sp-2); }
  .growth-readout { text-align: left; }
  .closing { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

/* ---------- reduced motion: everything above degrades to static ---------- */

@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .band-track { animation: none; transform: none; }
  .topic-band { mask-image: none; -webkit-mask-image: none; }
  .ident-pulse { animation: none; }
  .splash-field { transition: none; opacity: 1; }
  .splash-legend { transition: none; opacity: 0.7; }
  .closing::before { animation: none; }
  .nav-indicator { transition: opacity 1ms; }
  #dash-levels .bar-fill::after,
  .hof-card::after { display: none; }
}

/* ==========================================================================
   v12 — one page system for every view
   Before this, every non-home view was a 44rem column pinned to the left of
   a 76rem wrap, so ~40% of a desktop screen was dead space. Each view now
   opens with the same full-width masthead; prose views run as a measured
   column beside a sticky contents rail, and data views use the full width.
   ========================================================================== */

.view-head {
  position: relative;
  padding: var(--sp-8) 0 var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border);
}

/* a single wash of light behind the masthead, anchored to the title */
.view-head::before {
  content: "";
  position: absolute;
  left: -6%;
  right: 40%;
  top: -30%;
  bottom: -10%;
  background: radial-gradient(ellipse 60% 60% at 20% 50%,
    rgba(95, 212, 198, 0.08), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.view-head .eyebrow { margin-top: 0; }

.view-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}

.view-lead {
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 46rem;
  margin: var(--sp-4) 0 0;
}

/* ---------- prose views: measured column + contents rail ---------- */

.doc {
  display: grid;
  grid-template-columns: minmax(0, 44rem) 15rem;
  justify-content: center;
  gap: var(--sp-8);
  align-items: start;
  padding-bottom: var(--sp-8);
}

.doc-main { padding-top: 0; }

.doc-rail { position: sticky; top: var(--sp-4); }

.toc {
  border-left: 1px solid var(--border);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}

.toc-label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.7;
  margin-bottom: var(--sp-2);
}

.toc button {
  appearance: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
  padding: 0.2rem 0;
  border-left: 2px solid transparent;
  margin-left: calc(-1 * var(--sp-4) - 1px);
  padding-left: var(--sp-4);
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.toc button:hover { color: var(--text); }

.toc button.on {
  color: var(--accent);
  border-left-color: var(--accent);
}

.doc-rail > nav + nav { margin-top: var(--sp-6); }

.rail-more {
  border-left: 1px solid var(--border);
  padding-left: var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}

.rail-more a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.8125rem;
  padding: 0.2rem 0;
  transition: color 200ms var(--ease-out);
}

.rail-more a:hover { color: var(--accent); }

@media (max-width: 1020px) {
  .doc { grid-template-columns: 1fr; gap: var(--sp-4); }
  .doc-rail { display: none; }
}

/* ---------- data views: use the whole width ---------- */

.view-body { padding-bottom: var(--sp-8); }

/* three abreast on desktop; the bar tracks were ~55px inside the old
   44rem cage, far too short to compare twelve values against */
#view-insights .home-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
#view-insights .bar-row { grid-template-columns: minmax(7rem, 13rem) 1fr 3rem; }
#view-insights .stat-hero { margin-top: 0; }

/* rank the leaders rather than leaving twelve equal rows */
.bar-row { counter-increment: barrank; }
.bar-list { counter-reset: barrank; }

#view-insights .bar-label::before {
  content: counter(barrank);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0.55;
  margin-right: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

/* the recent list gets its full three-column form back at this width */
#view-insights .recent-panel { margin-top: var(--sp-4); }

/* ---------- library / glossary / labs heads ---------- */

.view-head.lib-head { margin-bottom: var(--sp-6); }
.view-head .lib-title { margin: 0; }
.view-head .lib-sub { margin: var(--sp-4) 0 0; }

/* ---------- hall of fame + question bank heads ---------- */

#view-hof .page { padding-top: 0; }
#view-qbank .toolbar { margin-top: 0; }

@media (max-width: 720px) {
  .view-head { padding: var(--sp-6) 0 var(--sp-4); margin-bottom: var(--sp-4); }
  .view-head::before { display: none; }
}

/* ---------- question bank ---------- */

.qb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-6);
  font-size: 0.8125rem;
  color: var(--muted);
}

.qb-stats span { display: inline-flex; align-items: baseline; gap: 0.4rem; }

.qb-stats strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* progress through the running deck */
.qb-track {
  height: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
  margin-bottom: var(--sp-3);
}

.qb-track span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--indigo), var(--accent));
  transition: width 400ms var(--ease-out);
}

/* result ring — same visual language as the home page donut */
.score-ring { width: 8.5rem; margin: 0 auto var(--sp-4); position: relative; }
.score-ring svg { width: 100%; height: auto; transform: rotate(-90deg); display: block; }
.score-ring .sr-track { fill: none; stroke: var(--surface-2); stroke-width: 10; }
.score-ring .sr-ring {
  fill: none;
  stroke: url(#donut-grad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: var(--dash) 1;
  transition: stroke-dasharray 900ms var(--ease-out);
}
.score-ring .sr-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* real 3D flip — the markup already carried perspective and
   backface-visibility, but the faces were swapped with display:none */
.fc-card { perspective: 1400px; background: none; border: 0; padding: 0; }

.fc-inner {
  display: grid;              /* stack the faces so the tallest sets height */
  transform-style: preserve-3d;
  transition: transform 620ms var(--ease-out);
}

.fc-card.flipped .fc-inner { transform: rotateY(180deg); }

.fc-face {
  grid-area: 1 / 1;
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.fc-back {
  display: flex;
  transform: rotateY(180deg);
  border-left: 3px solid var(--accent);
}

.fc-card.flipped .fc-front { display: flex; }
.fc-card:hover .fc-face { border-color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  /* no rotation: fall back to swapping the faces outright */
  .fc-inner { transform: none !important; transform-style: flat; }
  .fc-face { backface-visibility: visible; }
  .fc-back { transform: none; display: none; }
  .fc-card.flipped .fc-front { display: none; }
  .fc-card.flipped .fc-back { display: flex; }
}

/* the qbank is a full-width view now; centre its stages rather than
   leaving them pinned to the left of an empty page */
#view-qbank .qb-setup,
#view-qbank .fc-stage,
#view-qbank .qb-quiz,
#view-qbank .qb-results { margin-left: auto; margin-right: auto; }
#view-qbank .qb-quiz { max-width: 46rem; }
#view-qbank .fc-stage { max-width: 48rem; }
#view-qbank .qb-results { max-width: 34rem; text-align: center; }

/* ...and the tabs belong over their own panel, not pinned left of it */
#view-qbank .qbank-tabs { justify-content: center; }

/* ---------- exam view fixes ---------- */

/* Wrapped flex containers default to align-content: stretch, so when the
   container is taller than its lines every line grows and the chips spill
   over the heading beneath them. Pin the lines to the top. */
.tool-list, .concept-list, .chip-cloud, .level-chips, .qb-stats {
  align-content: flex-start;
}
.tool-list li, .concept-list li, .chip-cloud a, .chip-cloud .jump {
  align-self: flex-start;
}

/* The exam and study views focus their heading on route change so screen
   readers announce it. That focus is programmatic, never keyboard-driven,
   so it should not paint a ring. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

/* ---------- glossary ---------- */

/* the cards are the page's whole content; give them the same pointer
   response the dashboard panels have */
.gloss-card { position: relative; isolation: isolate; }

.gloss-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  background: radial-gradient(16rem 16rem at var(--mx, 50%) var(--my, 0%),
    rgba(95, 212, 198, 0.10), transparent 70%);
}

.gloss-card:hover::after { opacity: 1; }

/* the how-to fact cards get the same treatment */
.fact-card { position: relative; isolation: isolate; }
.fact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
  background: radial-gradient(14rem 14rem at var(--mx, 50%) var(--my, 0%),
    rgba(95, 212, 198, 0.10), transparent 70%);
}
.fact-card:hover::after { opacity: 1; }

/* ---------- social embeds (LinkedIn post iframes) ---------- */

.embed-frame {
  display: flex;
  justify-content: center;
  margin: var(--sp-4) 0 var(--sp-2);
}

.embed-frame iframe {
  width: 100%;
  max-width: 504px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
}

/* .embed-frame sets display:flex, which outranks the UA's [hidden]
   display:none — without this the collapsed frame stays visible when the
   toggle hides it. */
.embed-frame[hidden] { display: none; }

.embed-stack {
  display: grid;
  gap: var(--sp-8);
  margin: var(--sp-4) 0 var(--sp-2);
}

.embed-card {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
}

.embed-card .embed-frame { margin: 0; width: 100%; }

.embed-cap {
  max-width: 40rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
  text-align: center;
}

.embed-toggle { font-variant-numeric: tabular-nums; }

/* ---------- dedicated hall of fame entry page ---------- */

/* The tribute page is mostly data blocks, not prose, so it does not sit in
   the 44rem measured column: masthead and wide blocks take the whole wrap,
   the citation keeps a readable measure, and the actions ride a sticky
   rail (same 320px rail the study page uses). */
#hof-entry-page { max-width: none; }

.hofe-top {
  display: grid;
  gap: var(--sp-8);
  align-items: start;
}

.hofe-main .hofe-citation,
.hofe-main p { max-width: 46rem; }

.hofe-rail .hofe-sec { margin: var(--sp-6) 0 0; }
.hofe-rail .hofe-sec:first-child { margin-top: 0; }
.hofe-rail .hofe-sec h2 { font-size: 1rem; }
.hofe-rail .sp-link-row { flex-direction: column; align-items: stretch; }
.hofe-rail .sp-link-row > a { text-align: center; }

@media (min-width: 960px) {
  .hofe-top { grid-template-columns: minmax(0, 1fr) 320px; }
  .hofe-rail {
    position: sticky;
    top: var(--sp-4);
    border-left: 1px solid var(--border-soft);
    padding-left: var(--sp-6);
  }
}

/* two posts sit side by side once there is room for both 504px frames */
@media (min-width: 1100px) {
  .hofe-wide .embed-stack {
    grid-template-columns: repeat(2, minmax(0, 504px));
    justify-content: center;
    align-items: start;
  }
}


.hof-rules-sub {
  font-size: 1.05em;
  margin: var(--sp-6) 0 var(--sp-2);
  color: var(--amber);
}

#hof-entry-page:focus { outline: none; }

.hofe-hero { padding: var(--sp-2) 0 var(--sp-4); }

.hofe-hero .eyebrow {
  color: var(--amber);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.hofe-tagline {
  margin: var(--sp-2) 0;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.25;
  max-width: 34ch;
}

.hofe-hero .outcome-inline { margin-top: var(--sp-3); }

.hofe-sec { margin: var(--sp-8) 0; }

.hofe-sec h2 {
  font-size: 1.15rem;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
}

.hofe-citation {
  max-width: 60ch;
  line-height: 1.65;
  color: var(--text);
  font-size: 0.98rem;
}

.hofe-evidence { list-style: none; margin: 0; padding: 0; }
.hofe-evidence li { margin: var(--sp-2) 0; font-size: 0.92rem; }
.hofe-evidence li a { text-shadow: 0 0 12px rgba(95, 212, 198, 0.25); }

.hofe-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}

.hofe-col {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 60%);
  padding: var(--sp-4);
}

.hofe-col h3 {
  margin: 0 0 var(--sp-3);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.hofe-win { border-top: 2px solid var(--accent); }
.hofe-win h3 { color: var(--accent); }
.hofe-loss { border-top: 2px solid var(--danger); }
.hofe-loss h3 { color: var(--danger); }
.hofe-pro { border-top: 2px solid var(--amber); }
.hofe-pro h3 { color: var(--amber); }
.hofe-con { border-top: 2px solid var(--muted); }
.hofe-con h3 { color: var(--muted); }

.hofe-wls, .hofe-pc { list-style: none; margin: 0; padding: 0; }

.hofe-wls li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: baseline;
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.hofe-wls li:last-child { border-bottom: none; }

.hofe-pc li {
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.hofe-pc li:last-child { border-bottom: none; }

/* hype wall */

.hofe-hype-sec {
  border: 1px solid rgba(240, 180, 41, 0.35);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(150deg, rgba(240, 180, 41, 0.07), transparent 45%),
    linear-gradient(180deg, rgba(31, 38, 46, 0.6), var(--surface) 40%);
  padding: var(--sp-4) var(--sp-6) var(--sp-6);
  box-shadow: var(--shadow-1);
}

.hofe-hype-sec h2 {
  border-bottom: none;
  margin-bottom: var(--sp-2);
}

.hofe-hype-count {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--amber);
  margin: var(--sp-3) 0;
}

.hofe-hype-count span { font-variant-numeric: tabular-nums; }

.hofe-hype-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.hofe-hype-btn { font-size: 1rem; }

.hofe-react {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.hofe-react b { color: var(--text); font-variant-numeric: tabular-nums; }

.hofe-react em { font-style: normal; }

.hofe-react:hover {
  border-color: var(--amber);
  color: var(--amber);
  transform: translateY(-1px);
}

.hofe-react:active, .hofe-hype-btn:active { transform: translateY(1px) scale(0.98); }

.pop { animation: hofe-pop 420ms var(--ease-out); }

@keyframes hofe-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); box-shadow: var(--glow-amber); }
  100% { transform: scale(1); }
}

/* ---------- "coming soon" placeholder (Labs) ----------
   Reuses the home .journey / .j-step pipeline: the first two stages read as
   live work, the last two are dimmed to say "not here yet". */
.soon-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.soon-steps { margin: var(--sp-6) 0 var(--sp-4); }

.soon-steps .j-step { overflow: hidden; }

.soon-steps .j-step::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0.55;
}

.soon-steps .j-step:nth-child(n+3) { opacity: 0.62; }

.soon-steps .j-step:nth-child(n+3)::after {
  background: linear-gradient(90deg, var(--border), transparent);
}

.soon-steps .j-step:nth-child(4) .j-glyph {
  color: var(--amber);
  filter: drop-shadow(0 0 8px rgba(240, 180, 41, 0.5));
}

.soon-note {
  max-width: 44rem;
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.75;
}