/* =============================================================
   lab.css — Econometrics Lab: home grid, lessons, Python IDE
   Pairs with base.css.
   ============================================================= */

.lab {
  max-width: 72rem;
  margin-inline: auto;
  padding: calc(3.6rem + clamp(1.5rem, 5vh, 3rem)) var(--pad) 6rem;
}

/* ---- Lab hero ---- */
.lab-hero { text-align: center; margin-bottom: 3rem; }
.lab-hero h1 {
  font-size: clamp(2.4rem, 1.5rem + 4vw, 4.2rem); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.02; text-wrap: balance;
  background: linear-gradient(150deg, var(--gold-celadon), #f1d27a, var(--gold-harvest), var(--gold-mystic));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lab-hero p { color: var(--ink-dim); max-width: 46rem; margin: 1rem auto 0; }

/* ---- Account strip ---- */
.account {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.5rem; padding: 1rem 1.25rem;
  border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-elev);
}
.account__txt { color: var(--ink-dim); font-size: 0.95rem; }
.account__txt b { color: var(--ink); }
.account__right { display: inline-flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }

/* ---- Model grid ---- */
.lab-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  perspective: 1200px;            /* gives the reveal a real depth tilt */
}
.model-card {
  display: flex; flex-direction: column; gap: 0.7rem;
  padding: 1.4rem; border-radius: 16px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold-mystic) 7%, var(--bg-elev)), var(--bg-elev));
  border: 1px solid var(--hairline);
  text-decoration: none; color: inherit;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.model-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gold-harvest) 45%, transparent);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.model-card[aria-disabled="true"] { opacity: 0.62; pointer-events: none; }
.model-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.model-card__badge {
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.22rem 0.55rem; border-radius: 999px;
  color: var(--gold-celadon); border: 1px solid var(--hairline); white-space: nowrap;
}
.model-card__num { font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.model-card h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; }
.model-card p { color: var(--ink-dim); font-size: 0.94rem; flex: 1; }
.model-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.3rem; }
.model-card__cta { font-weight: 700; color: var(--gold-harvest); font-size: 0.92rem; }

/* ---- Progress bar ---- */
.progress { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; flex: 1; }
.progress__bar { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gold-mystic), var(--gold-harvest)); transition: width 0.4s var(--ease); }
.progress-label { font-size: 0.8rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============== Lesson page ============== */
.lesson { max-width: 52rem; margin-inline: auto; }
.lesson-head { margin-bottom: 2rem; }
.lesson-head__back {
  display: inline-flex; align-items: center;
  font-size: 0.9rem; color: var(--ink-dim); text-decoration: none;
  padding: 0.6rem 0; margin: -0.6rem 0;   /* invisible ≥40px hit area */
}
.lesson-head__back:hover { color: var(--gold-harvest); }
.lesson-head h1 { margin-top: 0.6rem; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }

.step { margin-bottom: 1.8rem; }
.step--read > * + * { margin-top: 1.05em; }
.step--read h2 { font-size: 1.5rem; font-weight: 700; margin-top: 0.6em; letter-spacing: -0.01em; }
.step--read h3 { font-size: 1.2rem; font-weight: 700; }
/* stage-title h2 for code/interactive/question stages: semantic h2, compact size */
.stage__guide .stage__h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 0; }
.step--read p, .step--read li { color: var(--ink); }
.step--read code { font-family: var(--font-mono); font-size: 0.86em; background: var(--bg-elev); border: 1px solid var(--hairline); border-radius: 5px; padding: 0.1em 0.38em; }
.step--read .callout {
  border-inline-start: 3px solid color-mix(in srgb, var(--gold-harvest) 70%, transparent);
  background: var(--bg-elev); border-radius: 0 10px 10px 0; padding: 0.9rem 1.1rem; color: var(--ink-dim);
}
.step--read .callout b { color: var(--gold-celadon); }
.katexish { font-style: italic; }

/* ---- Code cell / Python IDE ---- */
.cell { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: var(--bg-deep); }
.cell__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--hairline); background: var(--bg-elev); }
.cell__dot { width: 0.65rem; height: 0.65rem; border-radius: 999px; background: color-mix(in srgb, var(--gold-mystic) 70%, var(--bg)); }
.cell__title { font-size: 0.82rem; color: var(--ink-dim); font-family: var(--font-mono); }
.cell__run {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.9rem; border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: 0.82rem; color: #1a1407; border: 0;
  background: linear-gradient(140deg, var(--gold-celadon), var(--gold-harvest));
}
.cell__run:disabled { opacity: 0.5; cursor: progress; }
.cell__reset { padding: 0.4rem 0.7rem; border-radius: 8px; cursor: pointer; font-size: 0.82rem;
  color: var(--ink-dim); background: transparent; border: 1px solid var(--hairline); }
.cell__editwrap { position: relative; }
.cell__hl, .cell__editor {
  margin: 0; border: 0; padding: 0.9rem 1rem; tab-size: 4;
  font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.55;
  letter-spacing: 0; white-space: pre; overflow-wrap: normal;
}
.cell__hl { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: #f3ead0; background: transparent; }
.cell__editor {
  position: relative; display: block; width: 100%; min-height: 3rem; resize: vertical;
  color: transparent; background: transparent; caret-color: var(--gold-harvest);
  outline: 0; overflow: auto; z-index: 1;
}
.cell__editor::selection { background: color-mix(in srgb, var(--gold-harvest) 32%, transparent); }
/* Python token colours */
.tk-c { color: #8a8571; font-style: italic; }   /* readable comments (AA on the cell bg) */
.tk-s { color: #a7c489; }
.tk-k { color: #e8913a; }
.tk-b { color: #d8b86a; }
.tk-f { color: #c9c6ac; }
.tk-n { color: #e0c98a; }
/* Significance colouring in console output */
.cell__out .sig { color: #7fd17f; font-weight: 700; }
.cell__out .insig { color: #ff9d6e; font-weight: 700; }
.cell__out {
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.5;
  padding: 0 1rem; max-height: 26rem; overflow: auto; white-space: pre-wrap; color: var(--ink-dim);
}
.cell__out:not(:empty) { padding: 0.85rem 1rem; border-top: 1px solid var(--hairline); }
.cell__out .err { color: #ff9d6e; }
.cell__out .ok { color: var(--gold-celadon); }
.cell__figs { display: grid; gap: 0.8rem; padding: 0 1rem; justify-items: center; }
.cell__figs:not(:empty) { padding: 0.85rem 1rem; border-top: 1px solid var(--hairline); }
.cell__figs img { width: 100%; max-width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--hairline); background: var(--bg-deep); }

/* Touch devices: 16px text inputs stop iOS Safari's auto-zoom-on-focus.
   The syntax-highlight layer must keep IDENTICAL metrics to the textarea. */
@media (pointer: coarse) {
  .cell__hl, .cell__editor { font-size: 16px; line-height: 1.5; }
  .q-blank, .q-num { min-height: 2.75rem; font-size: 16px; }
  .quiz__choice { min-height: 2.75rem; align-items: center; }
  .cell__run, .cell__reset, .course-nav__mod { min-height: 2.75rem; }
  .control__range { min-height: 2.75rem; }
}

/* ---- Pyodide boot indicator ---- */
.boot { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 150; display: none; align-items: center; gap: 0.7rem;
  padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.85rem; color: var(--ink-dim);
  background: var(--bg-elev); border: 1px solid var(--hairline); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.boot.show { display: inline-flex; }
.boot__spin { width: 0.9rem; height: 0.9rem; border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--gold-harvest) 35%, transparent); border-top-color: var(--gold-harvest);
  animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot__spin { animation: none; } }

.lab-foot { text-align: center; color: var(--ink-faint); font-size: 0.86rem; margin-top: 3.5rem; border-top: 1px solid var(--hairline); padding-top: 2rem; }

/* ---- Interactive widget (landscape: controls | live output) ---- */
.lesson { max-width: 56rem; }
.cell--interactive { background: var(--bg-deep); }
/* Stacked by default so the chart always gets the full width; the controls
   sit side-by-side only when the workspace is genuinely wide (container query
   on .stage__work). This fixes the cramped/tiny charts in a narrow split. */
.interactive { display: grid; grid-template-columns: 1fr; }
.interactive__controls {
  display: flex; flex-direction: column; gap: 1.15rem;
  padding: 1.1rem; border-bottom: 1px solid var(--hairline);
}
.interactive__output { min-width: 0; padding: 0.4rem 0; }
.interactive__output .cell__figs { padding: 0.85rem 1rem 0.4rem; }
.interactive__output .cell__figs:not(:empty) { border-top: 0; }
.interactive__output .cell__out { max-height: 16rem; }
@container labwork (min-width: 32rem) {
  .interactive { grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr); }
  .interactive__controls { border-bottom: 0; border-right: 1px solid var(--hairline); }
}
.control { display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.85rem; color: var(--ink-dim); }
.control__label { display: flex; justify-content: space-between; gap: 0.5rem; }
.control__val { color: var(--gold-celadon); font-variant-numeric: tabular-nums; font-weight: 700; }
.control__range { width: 100%; accent-color: var(--gold-harvest); cursor: pointer; }

/* ---- Quiz ---- */
.quiz { border: 1px solid var(--hairline); border-radius: 12px; padding: 1.2rem 1.35rem; background: var(--bg-elev); }
.quiz__prompt { font-weight: 700; }
.quiz__choices { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.95rem 0; }
.quiz__choice { display: flex; gap: 0.6rem; align-items: center; cursor: pointer; color: var(--ink); }
.quiz__choice input { accent-color: var(--gold-harvest); width: 1.05rem; height: 1.05rem; }
.quiz__actions { display: flex; gap: 0.6rem; }
.quiz .btn { padding: 0.5rem 1rem; font-size: 0.85rem; }
.quiz__feedback { margin-top: 1rem; font-size: 0.92rem; line-height: 1.5; }
.quiz__feedback:empty { display: none; }
.quiz__feedback.ok { color: var(--gold-celadon); }
.quiz__feedback.err { color: #ff9d6e; }
.quiz__feedback.hint { color: var(--ink-dim); }

/* True/False — two large side-by-side targets */
.quiz__choices--tf { flex-direction: row; gap: 0.7rem; }
.quiz__choices--tf .quiz__choice { flex: 1 1 0; justify-content: center; border: 1px solid var(--hairline); padding: 0.7rem; }
/* Numeric answer */
.q-numwrap { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0.9rem; }
.q-num { width: 9rem; max-width: 60vw; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px solid var(--hairline); background: var(--bg-deep); color: var(--ink); font-family: var(--font-mono); font-size: 1rem; }
.q-num:focus { outline: 0; border-color: color-mix(in srgb, var(--gold-harvest) 60%, transparent); }
.q-unit { color: var(--ink-dim); font-family: var(--font-mono); }
/* Fill in the blank — inline underlined input */
.q-fill { line-height: 2.2; margin: 0.1rem 0 0.9rem; }
.q-blank { min-width: 7rem; max-width: 90%; padding: 0.2rem 0.6rem; margin: 0 0.15rem; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--gold-harvest) 55%, transparent); background: color-mix(in srgb, var(--gold-celadon) 7%, transparent); color: var(--ink); font-family: var(--font-mono); font-size: 0.95rem; border-radius: 4px 4px 0 0; }
.q-blank:focus { outline: 0; border-bottom-color: var(--gold-harvest); background: color-mix(in srgb, var(--gold-harvest) 12%, transparent); }
.quiz.is-solved .q-num, .quiz.is-solved .q-blank { border-color: #7fd17f; color: #7fd17f; }

/* ============== Staged course player ============== */
.lab--wide { max-width: 76rem; }
.course { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }

.course-nav { position: sticky; top: 4.4rem; display: flex; flex-direction: column; gap: 0.3rem; }
.course-nav__title { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.4rem; padding-left: 0.3rem; }
.course-nav__mod {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  width: 100%; text-align: left; padding: 0.6rem 0.7rem; border-radius: 10px;
  border: 1px solid transparent; background: transparent; color: var(--ink-dim);
  font: inherit; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.course-nav__mod:hover { color: var(--ink); background: var(--bg-elev); }
.course-nav__mod.is-current { color: var(--ink); background: var(--bg-elev); border-color: color-mix(in srgb, var(--gold-harvest) 40%, transparent); }
.course-nav__name { font-size: 0.9rem; line-height: 1.25; }
.course-nav__count { font-size: 0.72rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.course-nav__mod.is-done .course-nav__count { color: var(--gold-celadon); }

.course-head h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-weight: 700; letter-spacing: -0.015em; margin-top: 0.4rem; }
.course-progress { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.9rem; }

.stage { margin-top: 1.6rem; scroll-margin-top: 4.8rem; }
.stage__kicker { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-harvest); margin-bottom: 1rem; }
.stage__split { display: flex; align-items: stretch; }
.stage__solo { max-width: 46rem; }
.stage__guide { flex: 0 0 var(--guideW, 38%); min-width: 0; padding-right: 0.7rem; }  /* code pane gets the majority by default; drag persists user choice */
.stage__guide > * + * { margin-top: 1.05em; }
.stage__work { flex: 1 1 0; min-width: 0; padding-left: 0.7rem; container: labwork / inline-size; }
/* Draggable divider — wide hit area + a visible gold grip knob so it reads as
   "drag me to resize". Mechanics live in lab-course.js (pointer events). */
.stage__handle { flex: 0 0 22px; align-self: stretch; cursor: col-resize; position: relative; touch-action: none; }
@media (pointer: coarse) and (min-width: 901px) {
  .stage__handle { flex-basis: 44px; }
}
.stage__handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; transform: translateX(-50%); border-radius: 999px;
  background: var(--hairline); transition: background 0.2s;
}
.stage__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 8px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 999px; border: 1px solid var(--hairline);
  background: linear-gradient(var(--bg-elev), color-mix(in srgb, var(--gold-mystic) 22%, var(--bg-elev)));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.stage__handle:hover::before, .stage__handle.drag::before { background: color-mix(in srgb, var(--gold-harvest) 60%, transparent); }
.stage__handle:hover::after, .stage__handle.drag::after {
  border-color: color-mix(in srgb, var(--gold-harvest) 75%, transparent);
  background: linear-gradient(var(--bg-elev), color-mix(in srgb, var(--gold-harvest) 30%, var(--bg-elev)));
  box-shadow: 0 0 16px color-mix(in srgb, var(--gold-harvest) 40%, transparent);
}
@media (max-width: 900px) {
  .stage__split { flex-direction: column; }
  .stage__guide { flex-basis: auto; padding-right: 0; }
  .stage__work { padding-left: 0; margin-top: 1.2rem; }
  .stage__handle { display: none; }
  /* Narrow screens: wrap code instead of clipping it behind an invisible
     horizontal scrollbar. BOTH overlay layers must wrap identically, and
     the editor's scrollbars are hidden so its content width can never
     drift from the overflow-hidden highlight layer beneath it. */
  .cell__hl, .cell__editor { white-space: pre-wrap; overflow-wrap: break-word; }
  .cell__editor { scrollbar-width: none; }
  .cell__editor::-webkit-scrollbar { display: none; }
}

/* Points & streak badge */
.gamify { display: inline-flex; align-items: center; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.gamify span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; padding: 0.28rem 0.65rem; border-radius: 999px; border: 1px solid var(--hairline); background: var(--bg-elev); white-space: nowrap; }
.gamify .gpts { color: var(--gold-celadon); }
.gamify .gstreak { color: var(--gold-harvest); }

.course-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.course-foot__pos { font-size: 0.85rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.course-empty { text-align: center; padding: 6rem var(--pad); }
.course-empty h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); font-weight: 700; margin: 1rem 0 0.6rem; }

/* The Worker ships this meaningful fallback before the interactive player
   boots, then the player progressively replaces it. */
.course-fallback { grid-column: 1 / -1; max-width: 52rem; margin-inline: auto; padding: 2rem 0 3rem; }
.course-fallback h1 { margin: 1rem 0 0.8rem; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); letter-spacing: -0.02em; text-wrap: balance; }
.course-fallback > p { color: var(--ink-dim); max-width: 44rem; }
.course-fallback__meta { color: var(--ink-faint) !important; font-size: 0.9rem; }
.course-breadcrumb { display: flex; flex-wrap: wrap; gap: 0.55rem; color: var(--ink-faint); font-size: 0.9rem; }
.course-breadcrumb a { color: var(--gold-harvest); }

/* Crawlable, visible syllabus below the live course player. */
.course-overview { max-width: 60rem; margin: 5rem auto 0; padding: 3rem 0 0; border-top: 1px solid var(--hairline); }
.course-overview__kicker { margin-bottom: 0.65rem; color: var(--gold-harvest); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; }
.course-overview h2 { font-size: clamp(1.65rem, 1.25rem + 1.8vw, 2.5rem); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.course-overview > p:not(.course-overview__kicker) { max-width: 48rem; margin-top: 0.9rem; color: var(--ink-dim); }
.course-outline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.course-outline__module { padding: 1.2rem 1.3rem; border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-elev); }
.course-outline__module h3 { font-size: 1.08rem; line-height: 1.25; }
.course-outline__module p { margin-top: 0.55rem; color: var(--ink-dim); font-size: 0.92rem; }
.course-overview__byline { font-size: 0.9rem; }
.course-overview__related-title { margin-top: 3rem; font-size: 1.35rem !important; }
.course-related { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1rem; padding: 0; list-style: none; }
.course-related a { display: inline-flex; min-height: 2.75rem; align-items: center; padding: 0.55rem 0.8rem; border: 1px solid var(--hairline); border-radius: 999px; text-decoration: none; color: var(--ink-dim); }
.course-related a:hover { color: var(--gold-harvest); border-color: color-mix(in srgb, var(--gold-harvest) 45%, transparent); }

@media (max-width: 900px) {
  .course { grid-template-columns: 1fr; }
  .course-nav { position: static; top: auto; flex-direction: row; flex-wrap: wrap; }
  .course-nav__title { width: 100%; }
  .course-nav__mod { width: auto; flex: 1 1 auto; }
  .stage__split { grid-template-columns: 1fr; }
  .stage__work { position: static; }
  .course-outline { grid-template-columns: 1fr; }
}

/* ============== Figures under the prompt (left guide column) ============== */
.stage__figs { display: grid; gap: 0.8rem; margin-top: 1.15rem; justify-items: center; }
.stage__figs:empty { display: none; }
.stage__figs img {
  width: 100%; max-width: 100%; height: auto; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--bg-deep);
}
/* a freshly-estimated figure "develops" top-down (JS-driven via FX.reveal);
   live (slider) charts crossfade via FX.swap so the before/after delta shows */
.stage__figs img.fx-develop {
  clip-path: inset(0 0 100% 0); opacity: 0; transform: scale(0.985);
  transition: clip-path 0.26s var(--ease), opacity 0.22s linear, transform 0.26s var(--ease);
}
.stage__figs img.fx-develop.in { clip-path: inset(0 0 0 0); opacity: 1; transform: none; }

/* ====================== Delight layer (window.FX) ====================== */
.fx-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 300; }

.fx-points {
  position: fixed; z-index: 320; pointer-events: none;
  font: 700 1.15rem/1 var(--font-serif); color: var(--gold-harvest);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
  animation: fxRise 1.2s var(--ease) both;
}
@keyframes fxRise {
  0%   { opacity: 0; transform: translate(-50%, -10%) scale(0.8); }
  22%  { opacity: 1; transform: translate(-50%, -65%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -185%) scale(1); }
}

.fx-pop { animation: fxPop 0.55s var(--ease); }
@keyframes fxPop { 0%, 100% { transform: none; } 35% { transform: scale(1.18); } }

.fx-ring {
  position: fixed; z-index: 310; width: 26px; height: 26px; border-radius: 999px;
  pointer-events: none; border: 2.5px solid; transform: translate(-50%, -50%) scale(0.3);
  animation: fxRing 0.7s var(--ease) both;
}
.fx-ring--ok  { border-color: #7fd17f; box-shadow: 0 0 26px rgba(127, 209, 127, 0.55); }
.fx-ring--err { border-color: #ff9d6e; box-shadow: 0 0 26px rgba(255, 157, 110, 0.55); }
@keyframes fxRing {
  0%   { opacity: 0.85; transform: translate(-50%, -50%) scale(0.3); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(5.5); }
}

.fx-shake { animation: fxShake 0.42s ease; }
@keyframes fxShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); } 30% { transform: translateX(7px); }
  45% { transform: translateX(-6px); } 60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.fx-glow { animation: fxGlow 1.4s var(--ease); }
@keyframes fxGlow {
  0%, 100% { box-shadow: none; }
  30% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold-harvest) 60%, transparent),
                    0 0 22px color-mix(in srgb, var(--gold-harvest) 45%, transparent); }
}

.fx-banner {
  position: fixed; z-index: 330; left: 50%; top: 38%;
  transform: translate(-50%, -50%) scale(0.92); opacity: 0;
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 1rem 1.6rem; border-radius: 999px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--gold-celadon) 92%, #fff), var(--gold-harvest));
  color: #1a1407; font: 700 1.15rem/1.1 var(--font-serif); white-space: nowrap; max-width: 92vw;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px color-mix(in srgb, var(--gold-harvest) 45%, transparent);
  pointer-events: none; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.fx-banner.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fx-banner__check { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 999px; background: #1a1407; color: var(--gold-celadon); font-size: 0.92rem; }

/* Significance ignite — significant p-values flare gold->green, rows sweep */
.cell__out .fx-ignite { animation: fxIgnite 0.42s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes fxIgnite {
  0%   { color: var(--gold-harvest); text-shadow: 0 0 11px color-mix(in srgb, #7fd17f 75%, transparent); }
  100% { color: #7fd17f; text-shadow: none; }
}
.cell__out .sigrow { position: relative; }
.cell__out .fx-sweep::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--gold-harvest), #7fd17f);
  transform: scaleX(0); transform-origin: left;
  animation: fxSweep 0.5s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + 180ms);
}
@keyframes fxSweep { to { transform: scaleX(1); opacity: 0.55; } }

/* Run button — charge/release + honest meniscus while Pyodide works */
.cell__run { position: relative; overflow: hidden; }
.cell__run:not(:disabled):active { transform: scale(0.95) translateY(1px); }
.cell__run.fx-busy::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: #1a1407; opacity: 0.5; transform: scaleX(0); transform-origin: left;
  animation: fxMeniscus 0.65s var(--ease) forwards;
}
@keyframes fxMeniscus { to { transform: scaleX(0.85); } }
.cell__run.fx-fire { animation: fxFire 0.28s var(--ease); }
@keyframes fxFire { 0% { transform: scale(0.94); } 55% { transform: scale(1.06); } 100% { transform: none; } }

/* result handoff bloom around the freshly-computed output */
.fx-bloom { animation: fxBloom 0.54s var(--ease); border-radius: 10px; }
@keyframes fxBloom { 0% { box-shadow: 0 0 0 0 rgba(218, 145, 0, 0.5); } 100% { box-shadow: 0 0 0 8px rgba(218, 145, 0, 0); } }

/* points coin arc + streak flame lifecycle */
.fx-coin { position: fixed; left: 0; top: 0; z-index: 325; pointer-events: none; white-space: nowrap; font: 700 0.95rem/1 var(--font-serif); color: var(--gold-harvest); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }
.fx-flare { animation: fxFlare 0.6s var(--ease); }
@keyframes fxFlare { 0%, 100% { transform: scale(1); filter: none; } 35% { transform: scale(1.35); filter: brightness(1.35); } }
.gstreak.fx-lit { animation: fxLit 3.4s ease-in-out infinite; }
@keyframes fxLit { 0%, 100% { text-shadow: 0 0 5px color-mix(in srgb, var(--gold-harvest) 45%, transparent); } 50% { text-shadow: 0 0 13px color-mix(in srgb, var(--gold-harvest) 80%, transparent); } }

/* Quiz answer states */
.quiz__choice { padding: 0.32rem 0.5rem; border-radius: 8px; transition: background 0.2s, color 0.2s; }
.quiz__choice.is-correct { color: #7fd17f; background: color-mix(in srgb, #7fd17f 13%, transparent); }
.quiz__choice.is-correct input { accent-color: #7fd17f; }
.quiz__choice.is-wrong { color: #ff9d6e; background: color-mix(in srgb, #ff9d6e 13%, transparent); }
.quiz.is-solved .quiz__check { opacity: 0.55; }

@media (prefers-reduced-motion: reduce) {
  .fx-points, .fx-ring, .fx-shake, .fx-glow, .fx-pop,
  .cell__out .fx-ignite, .cell__out .fx-sweep::after,
  .cell__run.fx-busy::after, .cell__run.fx-fire, .fx-bloom { animation: none !important; }
  .cell__run.fx-busy::after { display: none; }
  .fx-flare, .gstreak.fx-lit { animation: none !important; }
  .stage__figs img.fx-develop { clip-path: none; opacity: 1; transform: none; transition: none; }
  .fx-banner { transition: opacity 0.2s linear; }
}

/* ====================== Academy 2.0 command surface ====================== */
.today {
  position: relative;
  padding: clamp(0.8rem, 1.8vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--gold-harvest) 28%, var(--hairline));
  border-radius: 20px;
  background: radial-gradient(circle at 85% 0, color-mix(in srgb, var(--gold-harvest) 10%, transparent), transparent 34%), var(--bg-elev);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}
.today__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.today__heading h1 { font-size: clamp(1.65rem, 1.25rem + 1.6vw, 2.35rem); line-height: 1; letter-spacing: -0.025em; }
.today__heading > p { color: var(--ink-faint); font-size: 0.76rem; text-align: right; }
.today__commands { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14.5rem, 0.34fr); gap: 0.65rem; margin-top: 0.7rem; }
.today .dashboard-grid { grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 0.72fr); gap: 0.55rem; }
.today .dashboard-resume { min-height: 6.4rem; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 0.8rem; }
.today .dashboard-resume h2 { max-width: 30ch; font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.32rem); }
.today .dashboard-resume > div > p:not(.academy-kicker) { margin-top: 0.24rem; color: var(--ink-faint); font-size: 0.72rem; }
.today .dashboard-resume .btn { flex: 0 0 auto; }
.today .dashboard-metrics { grid-template-columns: 1fr; gap: 0.35rem; }
.today .dashboard-metrics article { min-height: 3rem; padding: 0.4rem 0.55rem; }
.today .dashboard-metric__value { font-size: 1.18rem; }
.today__side { display: grid; grid-template-columns: 1fr; gap: 0.38rem; }
.session-control, .today__project {
  display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: 0.65rem;
  padding: 0.35rem 0.55rem; border: 1px solid var(--hairline); border-radius: 11px; color: var(--ink-dim); background: var(--bg-deep); font-size: 0.73rem;
}
.session-control select { min-height: 2.15rem; padding: 0.25rem 1.7rem 0.25rem 0.55rem; border: 1px solid var(--hairline); border-radius: 8px; color: var(--ink); background: var(--bg-elev); }
.today .dashboard-review { min-height: 3.25rem; padding: 0.42rem 0.58rem; }
.today .dashboard-review > span:last-child { display: none; }
.today__project { align-items: flex-start; flex-direction: column; justify-content: center; color: inherit; text-decoration: none; }
.today__project span { color: var(--ink-faint); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; }
.today__project b { color: var(--gold-celadon); font-size: 0.74rem; line-height: 1.2; }
.today .dashboard-focus { grid-template-columns: auto minmax(0, 1fr); margin-top: 0.55rem; padding: 0.35rem; }
.today .dashboard-focus li a { min-height: 2.75rem; }
.today__bar { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.55rem; }
.today__bar > .btn { min-height: 2.75rem; padding-inline: 0.85rem; }
.global-search { display: flex; min-width: 14rem; min-height: 2.75rem; flex: 1; align-items: center; gap: 0.45rem; padding: 0 0.65rem; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg-deep); }
.global-search input { width: 100%; min-width: 0; border: 0; color: var(--ink); background: transparent; }
/* The inner input drops its own ring so the whole search chrome reads as one
   control — which means the wrapper has to show the focus, or tabbing into the
   academy search gives a keyboard user no indication at all. Mirrors
   .course-search:focus-within below. */
.global-search input:focus { outline: 0; }
.global-search:focus-within {
  border-color: var(--gold-harvest);
  outline: 2px solid color-mix(in srgb, var(--gold-harvest) 26%, transparent);
  outline-offset: 2px;
}
.global-search kbd { padding: 0.12rem 0.38rem; border: 1px solid var(--hairline); border-radius: 5px; color: var(--ink-faint); font: 0.7rem var(--font-mono); }
.today__settings { position: relative; }
.today__settings summary { list-style: none; cursor: pointer; }
.today__settings summary::-webkit-details-marker { display: none; }
.today__settings > div { position: absolute; z-index: 60; top: calc(100% + 0.45rem); right: 0; width: 14rem; padding: 0.65rem; border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-elev); box-shadow: 0 18px 45px rgba(0,0,0,.5); }
.today__settings .btn { width: 100%; min-height: 2.75rem; justify-content: center; }
.today > .account { min-height: 2.75rem; margin-top: 0.5rem; padding-block: 0.15rem; }
.today > .account .account__txt { font-size: 0.73rem; }
.today > .account .btn { min-height: 2.5rem; }
.today + .academy-section { margin-top: 1.4rem; }

/* Connected skills and portfolio studio */
.skill-map { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.skill-course { min-width: 0; border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-elev); }
.skill-course summary { display: flex; min-height: 3.4rem; align-items: center; justify-content: space-between; gap: 0.7rem; padding: 0.65rem 0.8rem; cursor: pointer; list-style: none; }
.skill-course summary::-webkit-details-marker { display: none; }
.skill-course summary b, .skill-course summary small { display: block; }
.skill-course summary b { font-size: 0.9rem; }
.skill-course summary small { margin-top: 0.15rem; color: var(--ink-faint); font-size: 0.68rem; }
.skill-course[open] summary > span:last-child { transform: rotate(45deg); }
.skill-course__items { display: grid; gap: 0.4rem; padding: 0 0.55rem 0.55rem; }
.skill-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.16rem 0.55rem; padding: 0.55rem; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg-deep); }
.skill-chip__level { grid-row: 1 / 3; align-self: center; width: 4.4rem; color: var(--gold-harvest); font-size: 0.61rem; line-height: 1.2; text-transform: uppercase; }
.skill-chip h3 { font-size: 0.81rem; }
.skill-chip p { overflow: hidden; color: var(--ink-faint); font-size: 0.67rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.skill-chip__meter { grid-column: 2; height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.skill-chip__meter i { display: block; width: calc(var(--level) * 20%); height: 100%; border-radius: inherit; background: var(--gold-harvest); }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; }
.project-card { display: flex; min-height: 14rem; flex-direction: column; gap: 1rem; padding: 1.1rem; border: 1px solid var(--hairline); border-radius: 17px; color: inherit; background: linear-gradient(150deg, color-mix(in srgb, var(--gold-mystic) 7%, var(--bg-elev)), var(--bg-elev)); text-decoration: none; }
.project-card:hover { border-color: color-mix(in srgb, var(--gold-harvest) 48%, transparent); transform: translateY(-2px); }
.project-card__num { align-self: flex-end; color: var(--gold-harvest); font: 0.74rem var(--font-mono); }
.project-card h3 { font-size: 1.25rem; }
.project-card p:not(.academy-kicker) { margin-top: 0.45rem; color: var(--ink-dim); font-size: 0.82rem; }
.project-card__foot { display: flex; align-items: center; gap: 0.65rem; margin-top: auto; color: var(--ink-faint); font-size: 0.7rem; }

/* Instant SVG labs, graded code, cases, and accessible matching */
.concept-lab, .case-study, .match-lab, .challenge-cell { display: grid; gap: 0.85rem; padding: 0.85rem; border: 1px solid var(--hairline); border-radius: 13px; background: var(--bg-deep); }
.concept-lab__plot { width: 100%; min-height: 14rem; border: 1px solid var(--hairline); border-radius: 10px; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--gold-harvest) 6%, transparent), transparent 52%); }
.concept-lab__axis { fill: none; stroke: color-mix(in srgb, var(--ink) 25%, transparent); stroke-width: 1; }
.concept-lab__curve { fill: none; stroke: var(--gold-harvest); stroke-width: 4; stroke-linecap: round; }
.concept-lab__point { fill: var(--gold-celadon); stroke: var(--bg-deep); stroke-width: 3; }
.concept-lab__readout { min-height: 3.4rem; color: var(--ink-dim); font-size: 0.8rem; line-height: 1.4; }
.challenge-cell > .btn { justify-self: start; }
.case-study__choice { width: 100%; min-height: 3rem; text-align: left; cursor: pointer; }
.case-study__complete { padding: 2rem 1rem; text-align: center; }
.case-study__complete > span { display: inline-grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: #071707; background: #7fd17f; font-weight: 700; }
.case-study__complete h3 { margin-top: 0.75rem; }
.case-study__complete p { margin-top: 0.45rem; color: var(--ink-dim); }
.match-lab__rows { display: grid; gap: 0.55rem; }
.match-lab__rows label { display: grid; grid-template-columns: minmax(8rem, .6fr) minmax(0, 1fr); align-items: center; gap: 0.65rem; }
.match-lab__rows label > span { color: var(--gold-celadon); font-size: 0.78rem; }
.match-lab select { width: 100%; min-height: 2.75rem; padding: 0.5rem 2rem 0.5rem 0.65rem; border: 1px solid var(--hairline); border-radius: 9px; color: var(--ink); background: var(--bg-elev); }

/* Keep stage content near the top of a 720px viewport. */
.lab--wide .course-head { padding: 0.78rem 0.95rem; }
.lab--wide .course-head__meta { margin-top: 0.35rem; }
.lab--wide .course-head h1 { margin-top: 0.2rem; font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem); }
.lab--wide .course-progress { margin-top: 0.45rem; }
.lab--wide .course-brief { margin-top: 0.45rem; }
.lab--wide .course-brief summary { min-height: 2.5rem; padding-top: 0.4rem; }
.lab--wide .stage { margin-top: 0.8rem; scroll-margin-top: 4rem; }
.lab--wide .stage__kicker { margin-bottom: 0.55rem; }

@media (max-width: 900px) {
  .today__commands, .today .dashboard-grid { grid-template-columns: 1fr; }
  .today__side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .lab--academy { padding-top: calc(3.6rem + 0.45rem); }
  .today { padding: 0.65rem; border-radius: 15px; }
  .today__heading > p, .today .dashboard-metrics, .today .dashboard-focus__head, .today > .account .account__txt, .today > .account .gamify, .today__bar > .lab-hero__diagnostic { display: none; }
  .today__commands { margin-top: 0.45rem; }
  .today .dashboard-resume { min-height: 5.5rem; padding: 0.55rem; }
  .today .dashboard-resume h2 { max-width: 19ch; font-size: 0.96rem; }
  .today .dashboard-resume .btn { min-height: 2.75rem; padding-inline: 0.65rem; }
  .today__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .today__project { display: none; }
  .today .dashboard-focus { margin-top: 0.4rem; }
  .today .dashboard-focus ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .today .dashboard-focus li:nth-child(3) { display: none; }
  .today__bar { flex-wrap: wrap; }
  .today__bar > #heroPrimaryCta { order: 1; }
  .global-search { order: 0; width: calc(100% - 3.3rem); flex-basis: calc(100% - 3.3rem); }
  .today__settings { order: 0; }
  .today > .account { min-height: 2.7rem; }
  .today > .account .account__right { width: 100%; flex-wrap: nowrap; }
  .today > .account .btn { min-height: 2.5rem; padding-inline: 0.55rem; font-size: 0.7rem; }
  .today + .academy-section { margin-top: 1rem; }
  .course-explorer .academy-section__head { margin-bottom: 0.55rem; }
  .course-tools { margin-bottom: 0.5rem; }
  .course-explorer .model-card { min-height: 15rem; }
  .skill-map { grid-template-columns: 1fr; }
  .match-lab__rows label { grid-template-columns: 1fr; gap: 0.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .project-card, .skill-course summary > span:last-child { transition: none; }
  .project-card:hover { transform: none; }
}

/* ====================== Academy platform ======================
   The catalogue is progressively enhanced by lab-ui.js. These rules cover
   both the crawlable server markup and every learner-state variant created by
   JavaScript, so loading or offline states never collapse the layout. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.lab--academy {
  position: relative;
  isolation: isolate;
  max-width: 88rem;
  overflow: clip;
  padding-top: calc(3.6rem + clamp(0.75rem, 1.8vh, 1.2rem));
}
.lab--academy::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -12rem; left: 50%;
  width: min(88rem, 125vw); height: 32rem;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 12%, color-mix(in srgb, var(--gold-harvest) 14%, transparent), transparent 55%),
    radial-gradient(ellipse at 15% 45%, color-mix(in srgb, var(--gold-mystic) 8%, transparent), transparent 42%),
    radial-gradient(ellipse at 85% 35%, color-mix(in srgb, var(--gold-celadon) 6%, transparent), transparent 38%);
  filter: blur(2px);
}

/* The first viewport is a working academy cockpit, not a second landing page.
   Identity and orientation stay editorial on the left; the learner's current
   state and next action sit beside them, with account controls directly below. */

.lab--academy .lab-hero {
  grid-area: identity;
  position: relative;
  display: flex;
  min-width: 0;
  max-width: none;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: clamp(0.55rem, 1.35vw, 0.95rem) clamp(0.35rem, 1.45vw, 0.9rem);
  text-align: left;
}
.lab--academy .lab-hero h1 {
  max-width: none;
  margin-top: clamp(0.75rem, 1.45vw, 1rem);
  font-size: clamp(2.3rem, 1.55rem + 1.75vw, 3rem);
  line-height: 0.97;
  letter-spacing: -0.038em;
}
.lab--academy .lab-hero > p:not(.lab-hero__kicker) {
  max-width: 35rem;
  margin: 0.7rem 0 0;
  color: color-mix(in srgb, var(--ink-dim) 94%, var(--ink));
  font-size: clamp(0.92rem, 0.85rem + 0.25vw, 1.02rem);
  line-height: 1.43;
}
.lab-hero__diagnostic {
  border-color: color-mix(in srgb, var(--gold-celadon) 24%, var(--hairline));
  background: color-mix(in srgb, var(--bg-deep) 58%, transparent);
}

/* Account controls stay quiet until needed, but every control remains a full
   touch target. A restrained pulse communicates sync without blocking use. */
.lab--academy .account {
  grid-area: account;
  position: relative;
  min-height: 3.55rem;
  margin: 0;
  padding: 0.4rem clamp(0.75rem, 2vw, 1.1rem);
  border-color: color-mix(in srgb, var(--gold-celadon) 16%, transparent);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--gold-mystic) 7%, var(--bg-elev)), var(--bg-elev) 58%),
    var(--bg-elev);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.account__txt { max-width: 43rem; font-size: 0.82rem; line-height: 1.35; }
.account__right { justify-content: flex-end; }
.account .btn {
  min-height: 2.75rem;
  padding-inline: 0.9rem;
  font-size: 0.8rem;
}
.btn--quiet {
  color: var(--ink-dim);
  border-color: transparent;
  background: transparent;
}
.btn--quiet:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.account--loading::after {
  content: "";
  position: absolute;
  inset: auto 1.2rem 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-harvest), transparent);
  transform-origin: left;
  animation: accountScan 1.45s ease-in-out infinite;
}
@keyframes accountScan {
  0% { opacity: 0; transform: scaleX(0); transform-origin: left; }
  45% { opacity: 0.8; transform: scaleX(1); transform-origin: left; }
  55% { opacity: 0.8; transform: scaleX(1); transform-origin: right; }
  100% { opacity: 0; transform: scaleX(0); transform-origin: right; }
}

/* Shared section language */
.academy-section {
  scroll-margin-top: 5.25rem;
}
.academy-section {
  margin-top: clamp(2.25rem, 4vw, 3.4rem);
  content-visibility: auto;
  contain-intrinsic-size: auto 48rem;
}
.academy-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: clamp(1.35rem, 3vw, 2rem);
}
.academy-section__head > div { min-width: 0; }
.academy-kicker {
  margin-bottom: 0.35rem;
  color: var(--gold-harvest);
  font-size: 0.71rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.academy-section__head h2 {
  font-size: clamp(1.75rem, 1.25rem + 2.15vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.academy-section__head > p,
.academy-section__head > output {
  max-width: 34rem;
  color: var(--ink-dim);
  font-size: 0.94rem;
  line-height: 1.5;
  text-align: right;
}
.academy-section__head > output {
  flex: 0 0 auto;
  color: var(--gold-celadon);
  font-variant-numeric: tabular-nums;
}

/* Learner dashboard */

@keyframes dashboardSkeleton { to { background-position: -200% 0; } }
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(16.5rem, 0.92fr);
  gap: 0.6rem;
}
.dashboard-resume {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(0.8rem, 1.45vw, 1rem);
  border: 1px solid color-mix(in srgb, var(--gold-harvest) 30%, var(--hairline));
  border-radius: 14px;
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent);
}
.dashboard-resume h2 {
  max-width: 18ch;
  font-size: clamp(1.35rem, 1.12rem + 0.75vw, 1.72rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.dashboard-resume > p:not(.academy-kicker) {
  margin-top: 0.38rem;
  color: var(--ink-dim);
  font-size: 0.78rem;
  line-height: 1.35;
}
.dashboard-resume .btn {
  min-height: 2.75rem;
  padding-inline: 0.9rem;
  font-size: 0.82rem;
}
.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}
.dashboard-metrics article {
  display: flex;
  min-height: 4.55rem;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-deep) 56%, transparent);
}
.dashboard-metric__value {
  color: var(--gold-celadon);
  font-size: clamp(1.35rem, 1.1rem + 0.75vw, 1.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.dashboard-metric__label {
  margin-top: 0.3rem;
  color: var(--ink);
  font-size: 0.72rem;
  line-height: 1.25;
}
.dashboard-metrics small { color: var(--ink-faint); font-size: 0.66rem; }
.dashboard-review {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  min-height: 4.6rem;
  padding: 0.58rem 0.72rem;
  border: 1px solid color-mix(in srgb, var(--gold-harvest) 36%, var(--hairline));
  border-radius: 12px;
  color: inherit;
  background: linear-gradient(145deg, color-mix(in srgb, var(--gold-harvest) 10%, var(--bg-deep)), color-mix(in srgb, var(--bg-deep) 60%, transparent));
  text-decoration: none;
}
.dashboard-review:hover { border-color: color-mix(in srgb, var(--gold-harvest) 65%, transparent); }
.dashboard-review .academy-kicker { margin-bottom: 0.22rem; }
.dashboard-review strong { color: var(--gold-celadon); font-size: 0.86rem; line-height: 1.2; }
.dashboard-review > span:last-child { margin-top: 0.18rem; color: var(--ink-faint); font-size: 0.66rem; line-height: 1.25; }
.dashboard-focus {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-deep) 46%, transparent);
}
.dashboard-focus:empty { display: none; }
.dashboard-focus__head { padding-inline: 0.25rem; }
.dashboard-focus__head .academy-kicker { margin-bottom: 0.18rem; }
.dashboard-focus__head h2 {
  font-size: 0.84rem;
  line-height: 1.15;
  white-space: nowrap;
}
.dashboard-focus ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.dashboard-focus li { min-width: 0; }
.dashboard-focus li a {
  display: grid;
  min-height: 3rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  color: inherit;
  background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
  text-decoration: none;
}
.dashboard-focus li a:hover { border-color: color-mix(in srgb, var(--gold-harvest) 42%, transparent); }
.dashboard-focus__number {
  color: var(--gold-harvest);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.dashboard-focus li b,
.dashboard-focus li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-focus li b { font-size: 0.72rem; line-height: 1.2; }
.dashboard-focus li small { margin-top: 0.12rem; color: var(--ink-faint); font-size: 0.63rem; }

/* Guided learning paths */
.path-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.path-grid:empty { min-height: 15rem; }
.path-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1.25rem, 3vw, 1.7rem);
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--gold-mystic) 5%, var(--bg-elev)), var(--bg-elev));
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.16);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.path-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--gold-harvest) 35%, transparent);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.3);
}
.path-card--featured {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--gold-harvest) 10%, transparent), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--gold-mystic) 10%, var(--bg-elev)), var(--bg-elev));
}
.path-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.path-card__top h3 {
  font-size: clamp(1.35rem, 1.08rem + 0.8vw, 1.75rem);
  line-height: 1.13;
}
.path-card__top > span {
  flex: 0 0 auto;
  padding: 0.28rem 0.62rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.path-card__blurb {
  max-width: 56rem;
  margin-top: 0.75rem;
  color: var(--ink-dim);
  font-size: 0.91rem;
  line-height: 1.55;
}
.path-sequence {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.25rem;
  margin: 1.35rem 0 1.45rem;
  padding: 0;
  list-style: none;
  counter-reset: path;
}
.path-sequence li {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
}
.path-sequence li:not(:last-child)::after {
  content: "›";
  position: absolute;
  left: calc(100% + 0.42rem);
  color: color-mix(in srgb, var(--ink-faint) 65%, transparent);
}
.path-sequence li > span {
  display: inline-grid;
  width: 1.6rem; height: 1.6rem;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-faint);
  background: var(--bg-deep);
  font-size: 0.69rem;
  font-variant-numeric: tabular-nums;
}
.path-sequence li[data-state="in-progress"] > span {
  color: #1a1407;
  border-color: var(--gold-harvest);
  background: var(--gold-harvest);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-harvest) 12%, transparent);
}
.path-sequence li[data-state="completed"] > span {
  color: #0b190b;
  border-color: #7fd17f;
  background: #7fd17f;
}
.path-sequence a {
  position: relative;
  color: var(--ink-dim);
  font-size: 0.85rem;
  text-decoration: none;
}
/* The sequence links render ~22px tall, under the 24px WCAG 2.5.8 minimum.
   Expand the pointer target with a pseudo-element (as .pill a does) so the hit
   area grows without moving any text. The 5px vertical bleed stays inside the
   0.7rem row gap, so adjacent rows never overlap. */
.path-sequence a::after { content: ""; position: absolute; inset: -5px -4px; }
.path-sequence a:hover { color: var(--gold-celadon); }
.path-card__foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline);
}
.path-card__foot a {
  position: relative;
  flex: 0 0 auto;
  color: var(--gold-harvest);
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
/* Same 24px target floor as .path-sequence a (this row is ~23px of text). */
.path-card__foot a::after { content: ""; position: absolute; inset: -6px -6px; }

/* Course discovery tools */
.course-explorer .academy-section__head { margin-bottom: 0.85rem; }
.course-tools {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(9.5rem, auto) minmax(10rem, auto);
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.42rem;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
}
.course-tools > label {
  display: flex;
  align-items: center;
  gap: 0.58rem;
  min-width: 0;
  color: var(--ink-faint);
  font-size: 0.76rem;
  line-height: 1;
  letter-spacing: 0.05em;
}
.course-tools select,
.course-search {
  min-height: 2.85rem;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--bg-deep);
}
.course-tools select {
  min-width: 9.8rem;
  padding: 0.55rem 2.2rem 0.55rem 0.78rem;
  color: var(--ink);
  font-size: 0.86rem;
  letter-spacing: 0;
  cursor: pointer;
}
.course-search {
  display: flex !important;
  padding: 0 0.8rem;
}
.course-search > span:not(.sr-only) {
  color: var(--gold-harvest);
  font-size: 1.25rem;
  line-height: 1;
}
.course-search input {
  width: 100%; min-width: 0; height: 100%;
  padding: 0.55rem 0;
  border: 0; outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.9rem;
  letter-spacing: 0;
}
.course-search input::placeholder { color: var(--ink-faint); opacity: 1; }
.course-search:focus-within,
.course-tools select:focus-visible {
  border-color: var(--gold-harvest);
  outline: 2px solid color-mix(in srgb, var(--gold-harvest) 26%, transparent);
  outline-offset: 2px;
}
.course-tools select:focus-visible { border-radius: 11px; }
.course-search input:focus-visible { outline: 0; }

/* Rich course cards. Dynamic cards use h3 while crawlable fallbacks use h2. */
.course-explorer .lab-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  perspective: none;
}
.course-explorer .model-card {
  position: relative;
  min-width: 0;
  min-height: 20.5rem;
  gap: 0.8rem;
  padding: 1.35rem;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--gold-mystic) 7%, var(--bg-elev)), var(--bg-elev) 56%),
    var(--bg-elev);
}
.course-explorer .model-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-harvest) 55%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.course-explorer .model-card:hover::before { opacity: 1; }
.model-card[data-status="in-progress"] {
  border-color: color-mix(in srgb, var(--gold-harvest) 42%, transparent);
}
.model-card[data-status="completed"] {
  border-color: color-mix(in srgb, #7fd17f 30%, transparent);
  background: linear-gradient(155deg, color-mix(in srgb, #7fd17f 5%, var(--bg-elev)), var(--bg-elev));
}
.course-explorer .model-card h2,
.course-explorer .model-card h3 {
  max-width: 19ch;
  font-size: clamp(1.2rem, 1.08rem + 0.45vw, 1.48rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.course-explorer .model-card p {
  color: var(--ink-dim);
  font-size: 0.88rem;
  line-height: 1.52;
}
.model-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.model-card__tags li {
  padding: 0.25rem 0.48rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-faint);
  background: color-mix(in srgb, var(--bg-deep) 58%, transparent);
  font-size: 0.68rem;
  line-height: 1.2;
}
.course-explorer .model-card__foot { margin-top: 0; }
.course-explorer .model-card__foot + .model-card__foot {
  padding-top: 0.65rem;
  border-top: 1px solid var(--hairline);
}
.course-explorer .model-card__cta { font-size: 0.86rem; }
.course-explorer .model-card__num { font-size: 0.72rem; }
.course-empty-state {
  padding: 3rem 1rem;
  border: 1px dashed var(--hairline);
  border-radius: 16px;
  color: var(--ink-dim);
  text-align: center;
}

/* Four-part mastery method */
.method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg-elev);
}
.method-grid li {
  position: relative;
  min-height: 14rem;
  padding: clamp(1.15rem, 2.6vw, 1.65rem);
  background: linear-gradient(150deg, color-mix(in srgb, var(--gold-mystic) 4%, transparent), transparent);
}
.method-grid li + li { border-left: 1px solid var(--hairline); }
.method-grid li > span {
  color: var(--gold-harvest);
  font-family: var(--font-mono);
  font-size: 0.73rem;
  letter-spacing: 0.12em;
}
.method-grid li > span::after {
  content: "";
  display: block;
  width: 2rem; height: 1px;
  margin: 0.75rem 0 1.15rem;
  background: color-mix(in srgb, var(--gold-harvest) 58%, transparent);
}
.method-grid h3 { font-size: 1.2rem; line-height: 1.2; }
.method-grid p { margin-top: 0.7rem; color: var(--ink-dim); font-size: 0.87rem; line-height: 1.55; }
.lab--academy .lab-foot { margin-top: clamp(4.5rem, 10vw, 7rem); }

/* ====================== Reset dialog ====================== */
.reset-dialog {
  width: min(36rem, calc(100% - 2rem));
  max-width: none;
  max-height: min(90vh, 42rem);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--gold-harvest) 34%, var(--hairline));
  border-radius: 22px;
  color: var(--ink);
  background: var(--bg-elev);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.reset-dialog[open] { animation: dialogIn 0.22s var(--ease) both; }
.reset-dialog::backdrop {
  background: rgba(2, 2, 1, 0.78);
  backdrop-filter: blur(8px) saturate(70%);
  -webkit-backdrop-filter: blur(8px) saturate(70%);
}
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.reset-dialog__panel { padding: clamp(1.4rem, 5vw, 2.25rem); }
.reset-dialog h2 {
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.15rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.reset-dialog h2 + p { margin-top: 0.9rem; color: var(--ink-dim); line-height: 1.55; }
.reset-dialog__scope {
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  color: var(--ink-dim);
  background: var(--bg-deep);
  font-size: 0.84rem;
  line-height: 1.5;
}
.reset-dialog__status {
  min-height: 1.45rem;
  margin-top: 0.8rem;
  color: var(--gold-celadon);
  font-size: 0.86rem;
}
.reset-dialog__status:empty { min-height: 0; margin-top: 0; }
.reset-dialog__status--error {
  margin-top: 1rem;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid #ff9d6e;
  border-radius: 0 8px 8px 0;
  color: #ffc0a1;
  background: color-mix(in srgb, #ff9d6e 9%, transparent);
}
.reset-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  margin-top: 1.5rem;
}
.btn--danger {
  color: #fff7f2;
  border-color: color-mix(in srgb, #ff9d6e 58%, transparent);
  background: #8f321c;
  box-shadow: 0 7px 22px rgba(143, 50, 28, 0.3);
}
.btn--danger:hover { background: #a53d23; box-shadow: 0 9px 28px rgba(143, 50, 28, 0.42); }

/* ====================== Enhanced course shell ====================== */
.course-loading {
  grid-column: 1 / -1;
  display: grid;
  min-height: min(62vh, 32rem);
  place-content: center;
  justify-items: center;
  gap: 1rem;
  color: var(--ink-dim);
  text-align: center;
}
.course-loading__mark {
  display: grid;
  width: 4.5rem; height: 4.5rem;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--gold-harvest) 36%, transparent);
  border-radius: 20px;
  color: var(--gold-harvest);
  background: radial-gradient(circle, color-mix(in srgb, var(--gold-harvest) 12%, var(--bg-elev)), var(--bg-elev));
  font-size: 2.2rem;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-harvest) 22%, transparent);
  animation: courseLoad 1.6s ease-in-out infinite;
}
@keyframes courseLoad {
  50% { transform: translateY(-4px); box-shadow: 0 0 0 9px transparent; }
}
.course-empty {
  grid-column: 1 / -1;
  min-height: min(62vh, 32rem);
  display: grid;
  place-content: center;
  justify-items: center;
}
.course-empty > p { max-width: 32rem; color: var(--ink-dim); }
.course-empty .btn { margin-top: 1.4rem; }
.course-main { min-width: 0; }
.course-head {
  position: relative;
  padding: clamp(1.15rem, 3vw, 1.75rem);
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--gold-harvest) 8%, transparent), transparent 40%),
    var(--bg-elev);
}
.course-head__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.15rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.course-head .lesson-head__back { color: var(--ink-faint); }
.course-head .lesson-head__back:hover { color: var(--gold-harvest); }
.course-head h1 { max-width: 22ch; text-wrap: balance; }
.course-progress {
  flex-wrap: wrap;
  padding-top: 0.2rem;
}
.course-progress .progress { min-width: 10rem; }
.course-brief {
  margin-top: 1.2rem;
  border-top: 1px solid var(--hairline);
}
.course-brief summary {
  display: flex;
  min-height: 2.9rem;
  align-items: center;
  gap: 0.55rem;
  padding-top: 0.85rem;
  color: var(--gold-celadon);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.course-brief summary::-webkit-details-marker { display: none; }
.course-brief summary::before {
  content: "+";
  display: inline-grid;
  width: 1.45rem; height: 1.45rem;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--gold-harvest);
  font-family: var(--font-mono);
  font-weight: 400;
}
.course-brief[open] summary::before { content: "−"; }
.course-brief__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0.85rem 0 0.15rem;
}
.course-brief__grid section {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg-deep) 62%, transparent);
}
.course-brief__grid h2 {
  color: var(--gold-celadon);
  font-size: 0.79rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.course-brief__grid h2:not(:first-child) { margin-top: 1rem; }
.course-brief__grid p,
.course-brief__grid li {
  color: var(--ink-dim);
  font-size: 0.81rem;
  line-height: 1.48;
}
.course-brief__grid ul,
.course-brief__grid ol { margin-top: 0.55rem; padding-left: 1.15rem; }
.course-brief__grid p { margin-top: 0.55rem; }
.course-brief__outline { grid-column: 1 / -1; }
.course-brief__outline ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem 1.5rem;
  padding: 0;
  list-style-position: inside;
}
.course-brief__outline li { min-width: 0; }
.course-brief__outline li::marker { color: var(--gold-harvest); }
.course-brief__outline b,
.course-brief__outline span { display: block; }
.course-brief__outline b { color: var(--ink); }
.course-brief__outline span { margin: 0.15rem 0 0 1.15rem; color: var(--ink-faint); }

/* Current module rail reads as navigation rather than a loose button list. */
.course-nav {
  padding: 0.85rem;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  box-shadow: 0 15px 42px rgba(0, 0, 0, 0.18);
}
.course-nav__title { padding: 0.15rem 0.45rem 0.55rem; }
.course-nav__mod { min-height: 3rem; }
.course-nav__mod.is-current {
  box-shadow: inset 3px 0 0 var(--gold-harvest);
}
.course-nav__mod.is-done .course-nav__name::before {
  content: "✓";
  margin-right: 0.38rem;
  color: #7fd17f;
  font-size: 0.78rem;
}
.stage {
  min-height: 16rem;
  padding: clamp(0.2rem, 1vw, 0.4rem);
}
.stage__kicker { color: var(--gold-harvest); font-weight: 700; }
.course-foot {
  min-height: 4rem;
  margin-top: 2rem;
}

/* Inputs are not covered by base.css's link/button focus selector. */
:where(.lab input, .lab textarea, .lab select, .reset-dialog input, .reset-dialog textarea, .reset-dialog select):focus-visible {
  outline: 2px solid var(--gold-harvest);
  outline-offset: 3px;
}
.stage__handle:focus-visible::after {
  border-color: var(--gold-harvest);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-harvest) 28%, transparent);
}

/* ====================== Responsive academy ====================== */
@media (max-width: 1050px) {
  .course-explorer .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method-grid li { min-height: 12rem; }
  .method-grid li:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); }
  .method-grid li:nth-child(4) { border-top: 1px solid var(--hairline); }
}

@media (max-width: 760px) {
  .lab--academy { padding-top: calc(3.6rem + 0.7rem); }
  .lab--academy .lab-hero { padding: 0.55rem 0.45rem 0.65rem; }
  .lab--academy .account { align-items: stretch; }
  .account__txt { width: 100%; }
  .account__right { width: 100%; justify-content: flex-start; }
  .account__right .gamify { margin-right: auto; }
  .academy-section__head { display: grid; gap: 0.65rem; }
  .academy-section__head > p,
  .academy-section__head > output { max-width: 40rem; text-align: left; }
  .dashboard-review { min-height: 4.6rem; }
  .dashboard-focus { grid-template-columns: 1fr; gap: 0.55rem; }
  .dashboard-focus__head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card--featured { grid-column: auto; }
  .course-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-search { grid-column: 1 / -1; }
  .course-tools > label:not(.course-search) { display: grid; gap: 0.4rem; }
  .course-tools select { width: 100%; min-width: 0; }
  .course-explorer .lab-grid { grid-template-columns: 1fr; }
  .course-explorer .model-card { min-height: 18rem; }
  .course-brief__grid,
  .course-brief__outline ol { grid-template-columns: 1fr; }
  .course-brief__outline { grid-column: auto; }
}

@media (max-width: 900px) {
  .course-nav {
    gap: 0.45rem;
    padding: 0.7rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
  }
  .course-nav__title { flex: 0 0 100%; display: none; }
  .course-nav__mod {
    flex: 0 0 min(15rem, 78vw);
    scroll-snap-align: start;
  }
  .course-nav__mod.is-current { box-shadow: inset 0 -3px 0 var(--gold-harvest); }
}

@media (max-width: 620px) {
  .lab--academy .lab-hero h1 { max-width: 15ch; font-size: clamp(2rem, 9vw, 2.45rem); line-height: 0.99; }
  .lab--academy .lab-hero > p:not(.lab-hero__kicker) { margin-top: 0.55rem; font-size: 0.88rem; line-height: 1.35; }
  .account__right { gap: 0.45rem; }
  .account__right .gamify { width: 100%; margin: 0 0 0.25rem; }
  .account .btn { flex: 1 1 auto; justify-content: center; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-metrics article { min-height: 4.4rem; padding: 0.55rem 0.65rem; }
  .dashboard-resume { min-height: 11.25rem; padding: 0.8rem; }
  .dashboard-resume > p:not(.academy-kicker) { margin-top: 0.45rem; }
  .dashboard-focus ol { gap: 0.4rem; }
  .dashboard-focus li a { display: block; min-height: 3.7rem; padding: 0.55rem 0.45rem; }
  .dashboard-focus__number { display: none; }
  .dashboard-focus li b { font-size: 0.78rem; }
  .dashboard-focus li small { font-size: 0.68rem; }
  .path-card__top { display: grid; }
  .path-card__top > span { justify-self: start; }
  .path-sequence { display: grid; gap: 0.55rem; }
  .path-sequence li:not(:last-child)::after {
    content: "";
    top: 1.6rem; bottom: -0.6rem; left: 0.78rem;
    width: 1px;
    background: var(--hairline);
  }
  .path-card__foot { align-items: stretch; flex-direction: column; }
  .path-card__foot .progress { width: 100%; flex: 0 0 6px; }
  .course-tools { grid-template-columns: 1fr; }
  .course-search { grid-column: auto; }
  .method-grid { grid-template-columns: 1fr; }
  .method-grid li { min-height: 0; }
  .method-grid li + li,
  .method-grid li:nth-child(3) { border-left: 0; border-top: 1px solid var(--hairline); }
  .reset-dialog__actions { flex-direction: column-reverse; }
  .reset-dialog__actions .btn { width: 100%; min-height: 3rem; justify-content: center; }
  .course-head { padding: 1rem; border-radius: 15px; }
  .course-head__meta { flex-wrap: wrap; }
  .course-progress .gamify { width: 100%; }
  .course-foot {
    position: sticky;
    z-index: 45;
    bottom: 0;
    margin: 2rem calc(-1 * var(--pad)) calc(-1 * env(safe-area-inset-bottom));
    padding: 0.72rem var(--pad) max(0.72rem, env(safe-area-inset-bottom));
    border-top: 1px solid color-mix(in srgb, var(--gold-celadon) 20%, transparent);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(14px) saturate(130%);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
  }
  .course-foot .btn { min-height: 2.85rem; padding-inline: 1rem; }
  .course-foot__pos { font-size: 0.75rem; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .account--loading::after,
  .course-loading__mark,
  .reset-dialog[open] { animation: none !important; }
  .path-card,
  .course-explorer .model-card,
  .progress__bar { transition: none; }
  .path-card:hover,
  .course-explorer .model-card:hover { transform: none; }
}

/* ====================== Portfolio project workbench ====================== */
.project-page { max-width: 86rem; }
.project-hero { max-width: 70rem; padding: clamp(1rem, 3vw, 2rem) 0 1.5rem; }
.project-hero h1 { max-width: 14ch; font-size: clamp(2.4rem, 1.55rem + 3.8vw, 4.8rem); line-height: 0.96; letter-spacing: -0.04em; text-wrap: balance; background: linear-gradient(145deg, var(--gold-celadon), #f1d27a 42%, var(--gold-harvest)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.project-hero > p:not(.academy-kicker) { max-width: 55rem; margin-top: 1rem; color: var(--ink-dim); font-size: 1.04rem; line-height: 1.6; }
.project-hero ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.1rem 0 0; padding: 0; list-style: none; }
.project-hero li { padding: 0.35rem 0.65rem; border: 1px solid var(--hairline); border-radius: 999px; color: var(--gold-celadon); font-size: 0.74rem; }
.project-workbench { border: 1px solid color-mix(in srgb, var(--gold-harvest) 28%, var(--hairline)); border-radius: 20px; overflow: hidden; background: var(--bg-elev); box-shadow: 0 25px 80px rgba(0,0,0,.3); }
.project-workbench__bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 1.3rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--hairline); background: var(--bg-deep); }
.project-workbench__bar progress { width: 10rem; height: 5px; accent-color: var(--gold-harvest); }
#projectProgressText { display: block; margin-top: 0.2rem; color: var(--ink-faint); font-size: 0.68rem; }
.project-mode { display: flex; gap: 0.3rem; }
.project-mode button { min-height: 2.5rem; padding: 0.4rem 0.7rem; border: 1px solid var(--hairline); border-radius: 8px; color: var(--ink-dim); background: transparent; cursor: pointer; }
.project-mode button.is-active { color: #171006; border-color: var(--gold-harvest); background: var(--gold-harvest); }
.project-export { display: flex; justify-content: flex-end; gap: 0.4rem; }
.project-export .btn { min-height: 2.75rem; padding-inline: 0.72rem; font-size: 0.75rem; }
.project-workbench__grid { display: grid; grid-template-columns: minmax(19rem, .74fr) minmax(0, 1.26fr); }
.project-workbench__grid > section { min-width: 0; padding: clamp(1rem, 2.4vw, 1.6rem); }
.project-workbench__grid > section + section { border-left: 1px solid var(--hairline); }
.project-workbench__grid h2 { font-size: 1.35rem; }
.project-tasks { display: grid; gap: 0.45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.project-task label { display: flex; min-height: 3.4rem; gap: 0.65rem; padding: 0.6rem; border: 1px solid var(--hairline); border-radius: 10px; background: var(--bg-deep); cursor: pointer; }
.project-task input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: 0.1rem; accent-color: var(--gold-harvest); }
.project-task b, .project-task small { display: block; }
.project-task b { font-size: 0.8rem; }
.project-task small { margin-top: 0.2rem; color: var(--ink-faint); font-size: 0.68rem; line-height: 1.35; }
.project-task.is-done { opacity: 0.64; }
.project-task.is-done b { text-decoration: line-through; text-decoration-color: var(--gold-harvest); }
.project-local-note { margin: 0.4rem 0 0.8rem; color: var(--ink-faint); font-size: 0.75rem; }
.project-provenance { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.65rem; padding: 0.75rem 1rem; border-top: 1px solid var(--hairline); color: var(--ink-faint); font-size: 0.72rem; }
.project-provenance b { color: var(--gold-celadon); }
.project-provenance code { overflow: hidden; font-family: var(--font-mono); text-overflow: ellipsis; }
.project-notes { max-width: 60rem; margin: 3rem auto 0; }
.project-notes h2 { margin-top: 2rem; font-size: 1.6rem; }
.project-notes p { margin-top: 0.7rem; color: var(--ink-dim); line-height: 1.65; }

@media (max-width: 900px) {
  .project-workbench__bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-export { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .project-workbench__grid { grid-template-columns: 1fr; }
  .project-workbench__grid > section + section { border-left: 0; border-top: 1px solid var(--hairline); }
  .project-provenance { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .project-hero { padding-top: 0.75rem; }
  .project-workbench__bar { grid-template-columns: 1fr; gap: 0.65rem; }
  .project-export { grid-column: auto; }
  .project-export .btn { flex: 1 1 8rem; }
}

/* Fold-budget guarantees: the command surface and the first course rail are
   both actionable in a 720px desktop viewport and an 844px phone viewport. */
@media (min-width: 901px) {
  .today + .course-explorer {
    display: grid;
    grid-template-columns: minmax(20rem, 0.8fr) minmax(34rem, 1.2fr);
    align-items: end;
    gap: 0.3rem 1rem;
    margin-top: 0.35rem;
  }
  .course-explorer .academy-section__head,
  .course-explorer .course-tools { margin-bottom: 0; }
  .course-explorer .academy-section__head h2 { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.8rem); }
  .course-explorer .academy-section__head > output { align-self: center; }
  .course-explorer .course-tools { padding: 0.25rem; }
  .course-explorer .course-tools select,
  .course-explorer .course-search { min-height: 2.75rem; }
  .course-explorer .lab-grid,
  .course-explorer .course-empty-state { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .course-explorer { display: flex; flex-direction: column; }
  .course-explorer .academy-section__head { order: 0; }
  .course-explorer .lab-grid { order: 1; }
  .course-explorer .course-tools { order: 2; margin: 0.8rem 0 0; }
  .course-explorer .course-empty-state { order: 3; }
  .course-explorer .academy-section__head h2 { font-size: clamp(1.35rem, 1.05rem + 4vw, 1.7rem); }
  .course-explorer .model-card { min-height: 15rem; }
}

@media (min-width: 901px) {
  .lab--wide .course-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "back meta" "title title" "progress guide";
    gap: 0.28rem 0.85rem;
  }
  .lab--wide .course-head .lesson-head__back { grid-area: back; min-height: 2.75rem; margin: 0; align-self: center; }
  .lab--wide .course-head__meta { grid-area: meta; align-self: center; justify-content: flex-end; margin: 0; }
  .lab--wide .course-head h1 {
    grid-area: title;
    max-width: none;
    margin: 0;
    font-size: clamp(1.35rem, 1.05rem + 1.05vw, 1.7rem);
    line-height: 1.08;
  }
  .lab--wide .course-progress { grid-area: progress; align-self: center; margin: 0; padding: 0; }
  .lab--wide .course-brief { grid-area: guide; align-self: center; margin: 0; border: 0; }
  .lab--wide .course-brief summary { min-height: 2.75rem; padding: 0 0.25rem; }
}