/* The Lesson stepper and Chapter reading. Loaded on Chapter pages only; tokens come from style.css. */

.lesson-goal { font-size: 1.3rem; line-height: 1.5; margin-bottom: var(--space-2); }
.lesson-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: var(--space-2) 0 var(--space-3); font: .95rem/1.4 var(--sans); color: var(--muted); }

/* Watch first */
.video-block { margin: var(--space-3) 0 var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.video-block h2 { font-size: 1.5rem; color: var(--muted); margin: 0 0 var(--space-2); }
.video-soon p { margin: 0; color: var(--muted); font-family: var(--sans); }
.video-part + .video-part { margin-top: var(--space-3); }
.video-label { margin: 0 0 var(--space-1); font: 600 .85rem/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.video-play { display: grid; place-content: center; justify-items: center; gap: var(--space-1); aspect-ratio: 16 / 9; width: 100%; padding: var(--space-2); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--text); text-decoration: none; text-align: center; font: 500 1rem/1.4 var(--sans); }
.video-play:hover { border-color: var(--accent); }
.video-play .lucide { width: 2rem; height: 2rem; color: var(--accent); }
iframe.video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); background: var(--surface); }
.chapters { margin-top: var(--space-1); }
.chapters ul { list-style: none; margin: var(--space-1) 0 0; padding: 0; font: .95rem/1.5 var(--sans); }
.chapters li { padding: .15rem 0; }
.chapters li a { display: inline-block; min-width: 3.2em; font-variant-numeric: tabular-nums; margin-right: .5em; }

/* Stages and Steps: stacked and fully readable by default */
.stage > h2 { margin-top: var(--space-5); }
.step { margin-block: var(--space-3); }
.step:focus { outline: none; }
.step > :first-child { margin-top: 0; }
.step > :last-child { margin-bottom: 0; }
.step-label { display: none; margin: 0 0 var(--space-1); font: 600 .85rem/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.part-break { margin: var(--space-4) 0 var(--space-2); padding: var(--space-1) var(--space-2); background: var(--tint); border-radius: var(--radius); font: 600 1rem/1.4 var(--sans); }
.part-break span { margin-right: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 .75rem var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.part-break span { color: var(--muted); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; margin-right: .5em; }
.step .table-wrap { margin-bottom: var(--space-2); }
.step dl { margin: 0; }
.step dt { font-weight: 600; margin-top: var(--space-2); }
.step dt:first-child { margin-top: 0; }
.step dd { margin: 0; color: var(--text); }
.history-card { background: var(--tint); border-radius: var(--radius); padding: var(--space-2); }
.history-card p:last-child { margin-bottom: 0; }
ol.problem { margin: 0; padding-left: 2.2rem; }
ol.problem > li::marker { font: 600 1rem var(--sans); color: var(--accent); }
.task-list { list-style: none; margin: 0; padding: 0; }
.task-list .task-list-control { display: none; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding-block: .2em; }
.further { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
.further h2 { font-size: 1.5rem; color: var(--muted); }

/* Stepping: one Step at a time */
.stepper.is-stepping .step { display: none; }
.stepper.is-stepping .step.is-current { display: block; margin-block: var(--space-3); }
.stepper.is-stepping .step-label { display: block; }
.stepper.is-stepping .step:has(> h3) .step-label { display: none; }
.stepper.is-stepping .stage > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.stepper.is-stepping .step.is-current { min-height: 12rem; }

.stepper-top { margin-bottom: var(--space-3); font-family: var(--sans); }
.bar-track { display: flex; gap: .4rem; }
.bar-stage { flex-basis: 0; min-width: 0; }
.bar-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: .3rem; font-size: .75rem; line-height: 1.3; color: var(--muted); }
.bar-ticks { display: flex; gap: 1px; }
.tick { flex: 1 1 0; min-width: 1px; height: .6rem; padding: 0; border: 0; border-radius: 1px; background: var(--rule); cursor: pointer; }
.tick:hover { background: var(--muted); }
.tick.is-done { background: var(--accent); opacity: .55; }
.tick[aria-current] { background: var(--accent); opacity: 1; height: .9rem; margin-top: -.15rem; }
.stepper-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); }
.stepper-status { margin: 0; font-size: .9rem; color: var(--muted); }
.text-button { padding: .25rem 0; border: 0; background: none; color: var(--accent); font: 500 .9rem var(--sans); text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

.progress-panel { margin-bottom: var(--space-3); font-family: var(--sans); font-size: .9rem; color: var(--muted); }
.progress-panel [hidden] { display: none; }
.progress-panel p { margin: var(--space-1) 0; }
.progress-done { color: var(--accent); font-weight: 600; }
.progress-actions { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.progress-note { font-size: .8rem; }

.stepper-nav { position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding: .75rem 0; background: var(--bg); border-top: 1px solid var(--rule); }
.stepper-nav[hidden] { display: none; }
button.button { border: 0; font: 600 1rem var(--sans); cursor: pointer; }
button.button.ghost { background: transparent; color: var(--text); border: 1px solid var(--rule); }
button.button:disabled { opacity: .4; cursor: default; text-decoration: none; }
button.button:not(:disabled):hover { text-decoration: underline; text-decoration-thickness: 2px; }

@media (max-width: 40rem) {
  .stepper-nav button { flex: 1; }
}

@media print {
  .stepper.is-stepping .step { display: block !important; }
  .stepper-top, .stepper-nav, .progress-panel, .video-play { display: none !important; }
}

/* Checkpoints: short numeric questions at the end of a Notes topic */
.question-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: var(--space-3); }
.question-count { margin: 0 0 var(--space-1); font: 600 .85rem/1.4 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.question-lead { margin-left: .5em; font-weight: 500; letter-spacing: 0; text-transform: none; }
.question-card .q-prompt { font-size: 1.15em; }
.q-prompt { margin-bottom: var(--space-1); }
.q-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-family: var(--sans); }
.q-row label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--muted); font-size: .95rem; }
.q-input { width: 10rem; max-width: 100%; padding: .55rem .7rem; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 1.05rem var(--sans); }
.q-unit { color: var(--muted); }
.q-unit-input { width: 8rem; max-width: 100%; padding: .55rem .7rem; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 1.05rem var(--sans); }
/* The MathLive answer field: the same box as .q-input, set in the KaTeX fonts the page already uses for its maths */
.q-math { display: inline-block; max-width: 100%; }
math-field { display: block; box-sizing: border-box; min-width: 10rem; max-width: 100%; padding: .3rem .6rem; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--bg); color: var(--text); font-size: 1.3rem; --caret-color: var(--accent); --selection-background-color: var(--accent); --selection-color: var(--accent-ink); --keyboard-zindex: 40; }
math-field:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
math-field::part(menu-toggle) { display: none; }
.is-wrong math-field, .is-part-wrong math-field { border-color: var(--retry); }
.q-help { margin: var(--space-1) 0 0; color: var(--muted); font: .85rem/1.5 var(--sans); }
.q-row .button { border: 0; font: 600 1rem var(--sans); cursor: pointer; padding: .6rem 1.2rem; }
.q-feedback { min-height: 1.5em; margin: var(--space-1) 0 0; font: 500 .95rem/1.5 var(--sans); }
.is-correct .q-feedback { color: var(--correct); }
.is-wrong .q-input { border-color: var(--retry); }
.is-wrong .q-feedback { color: var(--retry); }
.q-reveal { margin-bottom: 0; }

/* Question types, the status line and the self-graded flow */
.q-options { display: grid; gap: var(--space-1); margin-bottom: var(--space-1); }
.q-option { display: flex; gap: var(--space-1); align-items: baseline; padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: var(--radius); font-family: var(--sans); cursor: pointer; }
.q-option.is-right { border-color: var(--accent); }
.q-part + .q-part { margin-top: var(--space-1); }
.q-part-feedback { min-height: 1.4em; margin: .25rem 0 0; font: 500 .9rem/1.4 var(--sans); }
.is-part-correct .q-part-feedback { color: var(--correct); }
.is-part-wrong .q-input { border-color: var(--retry); }
.q-predict { display: grid; gap: .35rem; font: .95rem var(--sans); color: var(--muted); margin-bottom: var(--space-1); }
.q-text { width: 100%; padding: .55rem .7rem; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--bg); color: var(--text); font: 1rem var(--sans); }
.q-self { margin-top: var(--space-1); font-family: var(--sans); }
.q-status { margin: .25rem 0 0; font: 600 .8rem var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.is-review .q-status { color: var(--accent); }
.progress-review { margin: 0; font: 600 .9rem var(--sans); color: var(--accent); }

/* Practice tiers, recall prompts and the closing summary */
.tier-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--space-1); }
.tier-nav[hidden] { display: none; }
.tier-button { padding: .3rem .8rem; border: 1px solid var(--rule); border-radius: 999px; background: none; color: var(--text); font: 500 .85rem var(--sans); cursor: pointer; }
.tier-button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.problem-q { margin-top: var(--space-2); }
.recall .q-row { margin-top: var(--space-1); }
.stepper:not(.is-stepping) .recall .q-row, .stepper:not(.is-stepping) .problem-q .q-show { display: none; }
.summary-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.summary-row h3 { margin: 0 0 .15rem; font-size: 1.05rem; }
.summary-line { margin: 0 0 .35rem; font: 500 .95rem var(--sans); color: var(--muted); }
.summary-row progress { width: 100%; max-width: 20rem; accent-color: var(--accent); }
.summary-review { margin: .5rem 0 0; padding-left: 1.1rem; font: .9rem var(--sans); }
.summary-state { color: var(--muted); }

/* "Another one like this": generated variants of a numeric Problem, practised on the same Step. */
.variant-open { margin: var(--space-2) 0 0; }
.variant-box { margin-top: var(--space-2); padding: var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--surface); }
.variant-box[hidden] { display: none; }
.variant-count { margin: 0 0 var(--space-1); color: var(--muted); font: 600 .8rem var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.variant-solution { margin: var(--space-1) 0 0; font: .95rem/1.55 var(--sans); }
.variant-box .q-feedback { min-height: 1.4em; }