/* The player: while stepping, the Lesson takes the screen (header hidden, fixed top and bottom bars, a Rail).
   Loaded after lesson.css on Chapter pages; tokens come from style.css. Everything here is scoped to body.player or new classes. */

.player-exit, .player-stage, .rail, .celebration { display: none; }
.player main > :not(#lesson):not(.rail) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; }

.player .site-header, .player .site-footer { display: none; }
.player.prose-page main { width: min(100% - 2 * var(--space-3), 46rem); margin: 0 auto; padding: 5.5rem 0 9.5rem; }
.player .stepper.is-stepping .step.is-current { min-height: 40vh; font-size: 1.2rem; }
.player .tier-nav { margin: 0 0 var(--space-2); }
.player .step { scroll-margin-top: 6rem; }

.player .stepper-top { position: fixed; inset: 0 0 auto 0; z-index: 20; margin: 0; padding: .5rem var(--space-3) 0; background: var(--bg); }
.player .player-bar { display: flex; align-items: center; gap: var(--space-2); width: min(100%, 46rem); margin: 0 auto .5rem; }
.player .player-exit { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); color: var(--muted); font: 400 2rem/1 var(--sans); text-decoration: none; }
.player .player-exit:hover { color: var(--text); }
.player .player-stage { display: block; flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .85rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.player .player-tools { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.player .stepper-meta { margin: 0; gap: var(--space-2); flex-wrap: nowrap; }
.player .stepper-status { font-size: .8rem; white-space: nowrap; }
.player .rail-toggle { white-space: nowrap; }
.player .bar-track { width: min(100%, 46rem); margin: 0 auto; gap: 4px; }
.player .bar-stage { position: relative; }
.player .bar-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.player .tick { height: .25rem; border-radius: 0; }
.player .tick.is-done { opacity: 1; }
.player .tick[aria-current] { height: .25rem; margin-top: 0; background: var(--text); }

.player .stepper-nav { position: fixed; left: 50%; bottom: 0; z-index: 20; display: flex; flex-direction: column; align-items: stretch; gap: .35rem; width: min(100%, 30rem); margin: 0; padding: .75rem var(--space-2) calc(.75rem + env(safe-area-inset-bottom, 0px)); background: var(--bg); border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; transform: translateX(-50%); }
.nav-row { display: flex; gap: var(--space-1); }
.player .nav-row .button { padding: .85rem 1.25rem; border-radius: var(--radius-lg); }
.player .nav-row .button:not(.ghost) { flex: 1; background: var(--accent); color: var(--accent-ink); }
.player .nav-row .button.is-good { background: var(--correct); color: var(--state-ink); }
.player .nav-row .button.is-retry { background: var(--retry); color: var(--state-ink); }
.player .skip-link { align-self: center; padding: .15rem .5rem; color: var(--muted); font-size: .85rem; }
.player .skip-link[hidden] { display: none; }

/* The Rail: closed by default; a side panel on wide screens, a bottom sheet on phones. */
.player .rail { display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(26rem, 100%); padding: var(--space-3); overflow-y: auto; background: var(--surface); border-left: 1px solid var(--rule); font-family: var(--sans); animation: rail-in .25s ease-out both; }
.player .rail[hidden] { display: none; }
.rail-close { float: right; }
.rail .video-block { margin-top: 0; padding-top: 0; border-top: 0; }
.rail .further { margin-top: var(--space-3); }
@media (max-width: 40rem) {
  .player .rail { top: auto; left: 0; width: auto; max-height: 70vh; border-left: 0; border-top: 1px solid var(--rule); border-radius: var(--radius-lg) var(--radius-lg) 0 0; animation-name: sheet-in; }
  .player .stepper-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .player .stepper-top { padding-inline: var(--space-2); }
  .player .player-tools { gap: var(--space-1); }
  .player .player-tools .theme-toggle { width: 2.25rem; height: 2.25rem; }
  .player .calc-toggle { bottom: 6.5rem; }
  .player .calc { bottom: 10rem; }
}

/* Motion: every animation is switched off for readers who ask for less. */
@keyframes step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes step-in-back { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes rail-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes nudge { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(calc((var(--i) - 5.5) * 1.3rem), 5rem) rotate(240deg); } }
.player .stepper.is-stepping .step.is-current { animation: step-in .3s ease-out both; }
.player .stepper[data-direction="back"].is-stepping .step.is-current { animation-name: step-in-back; }
.checkpoint-q.is-wrong { animation: nudge .35s ease-out; }
.is-correct .q-status { color: var(--correct); animation: pop .25s ease-out both; }
.is-review .q-status { color: var(--retry); }

/* End of Chapter */
.player .celebration { position: relative; display: grid; justify-items: center; gap: var(--space-1); margin-bottom: var(--space-3); color: var(--correct); }
.celebration svg { width: 4.5rem; height: 4.5rem; }
.celebration .ring, .celebration .tick-mark { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.celebration .ring { stroke-width: 3; --len: 176; stroke-dasharray: 176; }
.celebration .tick-mark { stroke-width: 4; --len: 50; stroke-dasharray: 50; }
.celebration-text { margin: 0; font: 600 1.1rem var(--sans); color: var(--text); }
.confetti { position: absolute; top: 2.2rem; left: 50%; width: .5rem; height: .5rem; opacity: 0; background: var(--track-maths); }
.confetti:nth-child(4n+2) { background: var(--track-physics); }
.confetti:nth-child(4n+3) { background: var(--correct); }
.confetti:nth-child(4n) { background: var(--accent); }
.celebration.is-playing .ring { animation: draw .7s ease-out both; }
.celebration.is-playing .tick-mark { animation: draw .4s .55s ease-out both; }
.celebration.is-playing .confetti { animation: fall 1.3s ease-out both; animation-delay: calc(var(--i) * 45ms + .5s); }

@media (prefers-reduced-motion: reduce) {
  .player .stepper.is-stepping .step.is-current, .checkpoint-q.is-wrong, .is-correct .q-status, .player .rail,
  .celebration .ring, .celebration .tick-mark, .celebration .confetti { animation: none !important; }
  .celebration .confetti { display: none; }
}
@media print {
  .rail, .rail[hidden] { display: block !important; position: static !important; width: auto; }
  .player main > :not(#lesson):not(.rail) { position: static; width: auto; height: auto; clip-path: none; }
  .rail-close, .skip-link, .rail-topic { display: none !important; }
  .stepper.is-stepping .step-rail { display: block !important; }
}

/* Rail items for a topic: history and sources, shown ahead of the video and Further learning. */
.stepper.is-stepping .step-rail { display: none; }
.step-rail { margin-top: var(--space-3); font: .95rem/1.55 var(--sans); }
.rail-topic:empty { display: none; }
.rail-topic { margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--rule); }
.rail-heading { margin: 0 0 var(--space-1); font: 600 .8rem var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rail .admonition.background, .step-rail .admonition.background { margin: 0 0 var(--space-2); padding: 0; background: none; border: 0; }
.rail .admonition-title, .step-rail .admonition-title { margin: 0 0 .25rem; font-weight: 600; }
.rail .admonition p, .step-rail .admonition p { margin: 0 0 .5rem; }
.rail-toggle.has-extra::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: .4rem; border-radius: 50%; background: var(--accent); vertical-align: middle; }