/* =====================================================================
   Lesson player: full-screen, one screen at a time, fixed footer sheet.
   ===================================================================== */
.player {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.pl-top {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: max(env(safe-area-inset-top), 18px) 20px 10px;
}
.pl-x {
  appearance: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition:
    background-color var(--dur-2) ease,
    color var(--dur-2) ease,
    transform var(--dur-2) var(--ease-spring);
}
.pl-x svg {
  width: 24px;
  height: 24px;
}
.pl-x:hover {
  background: var(--bg-2);
  color: var(--text);
  transform: rotate(90deg);
}
.pl-bar {
  position: relative;
  flex: 1;
  height: 18px;
  border-radius: 99px;
  background: var(--line);
}
.pl-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--teal);
  transform-origin: 0 50%;
  transform: scaleX(0);
  transition: transform var(--dur-bar) var(--ease-spring);
  overflow: hidden;
}
.pl-fill::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 4px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.35);
}
.pl-combo {
  position: absolute;
  left: 50%;
  top: calc(100% + 3px);
  z-index: 3;
  line-height: 1.2;
  transform: translate(-50%, 0);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--amber-ink);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur-2) ease;
}
.pl-combo.on {
  opacity: 1;
}
.pl-chip {
  font-size: 13px;
  font-weight: 900;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 38px;
  text-align: right;
}
/* the mistakes chip says what its number is; on phones it takes the lesson number's place so the bar keeps its length */
.pl-retry em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 420px) {
  .pl-top:has(.pl-retry:not([hidden])) .pl-chip {
    display: none;
  }
}
.pl-ref {
  appearance: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--blue);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 0 var(--line);
}
.pl-ref svg {
  width: 22px;
  height: 22px;
}
.pl-ref[hidden],
.pl-drawer[hidden] {
  display: none;
}
.pl-drawer {
  position: absolute;
  top: 70px;
  right: 20px;
  z-index: 5;
  width: min(420px, calc(100vw - 40px));
  max-height: 60vh;
  overflow: auto;
  padding: 16px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--line);
}

.pl-stage {
  position: relative;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain; /* scrolling past the end doesn't move the page underneath */
}
.pl-screen {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 20px 40px;
}
.pl-screen.wide {
  max-width: 1100px;
}
.pl-screen.leaving {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}
.pl-in > * + * {
  margin-top: 14px;
}
.pl-read .lesson-title {
  font-size: 30px;
}
.pl-read .lesson-body {
  font-size: 17.5px;
}
.pl-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* a screen that stands alone sits in the middle of the space, not stuck under the bar */
  min-height: calc(100vh - 220px); /* the stage is the screen minus the lesson bar and the footer */
  min-height: calc(100dvh - 220px);
  text-align: center;
  padding: 2vh 0;
}
.pl-center h1 {
  font-size: 32px;
  color: var(--ink);
  margin: 10px 0 0;
}
.pl-center .lede {
  margin: 6px auto 0;
}
.pl-center-row {
  justify-content: center;
}
.pl-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-dim);
}
.pl-tag.orange {
  background: var(--amber-dim);
  color: var(--amber-ink);
}
.pl-tag.violet {
  background: var(--violet-dim);
  color: var(--violet-ink);
}
.pl-tag.green {
  background: var(--teal-dim);
  color: var(--teal-ink);
}
.pl-tag.rose {
  background: var(--rose-dim);
  color: var(--rose-ink);
}
.pl-kinds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 480px;
  margin-top: 18px;
}
.pl-kinds b {
  flex-basis: 100%;
  font-size: 15px;
  font-weight: 900;
  color: var(--text-dim);
}
.pl-kinds b.pl-pass {
  margin-top: -4px;
  color: var(--teal-ink);
}
.pl-pass-note {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-dim);
}
.pl-kind {
  padding: 3px 10px;
  border: 0;
  border-radius: 99px;
  background: var(--blue-dim, var(--panel-2, var(--line)));
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  pointer-events: none;
}
.pl-ref-card {
  text-align: left;
  margin-top: 16px;
}

/* question presenter */
.pl-ask {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}
.pl-prompt {
  flex: 1;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 18px;
}
.pl-prompt::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 18px;
  width: 14px;
  height: 14px;
  background: var(--panel);
  border-left: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: rotate(45deg);
}
.pl-check-q {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--amber-dim);
  margin: 18px 0 14px;
}
.pl-q-text {
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  margin-top: 6px;
}
.pl-qwrap .opts {
  display: grid;
  gap: 10px;
}
.pl-body .opt {
  width: 100%;
}
.pl-body .opt.sel,
.pl-body .qc-line.sel {
  border-color: var(--blue-edge);
  background: var(--blue-dim);
  color: var(--blue-ink);
  box-shadow: 0 var(--lip) 0 var(--blue-edge);
}
.pl-body .opt.sel .opt-l {
  border-color: var(--blue-edge);
  color: var(--blue-ink);
}
.player [data-check] {
  display: none !important;
}
.player .q-actions:not(:has(> :not([data-check]))) {
  display: none;
}

/* try it */
.pl-try-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pl-try-head h1 {
  margin: 4px 0 0;
  font-size: 28px;
}
.pl-try-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
  align-items: start;
}
.pl-try-grid:not(:has(.pl-try-side)) {
  grid-template-columns: minmax(0, 1fr);
}
/* a demo wider than its column scrolls sideways instead of being cut off by the stage. The padding (cancelled by the margin)
   keeps hover lifts, card lips and focus rings from being clipped by the scroll box. */
.pl-try-demo {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden; /* the stage scrolls vertically; a transform in flight must not flash a scrollbar here */
  padding: 4px 4px 8px;
  margin: -4px -4px -8px;
}
/* wide tables and display maths scroll in place on narrow screens, in lessons, questions and demos alike */
.pl-in :has(> table),
.pl-in .katex-display {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
/* things inside a demo with a fixed or no-wrap width shrink instead of pushing the whole demo wider */
.pl-try-demo .btn {
  white-space: normal;
}
.pl-try-demo .grid > * {
  min-width: 0;
}
.pl-try-demo .stat b {
  overflow-wrap: anywhere;
}
.pl-try-demo label.field {
  max-width: 100%;
}
.pl-try-demo label.field input:not([type="range"], [type="checkbox"]) {
  min-width: 0;
  max-width: 100%;
}
.pl-try-side {
  position: sticky;
  top: 0;
}
.pl-try-side .guide {
  margin: 0;
}
.pl-demo > .card:last-child {
  margin-bottom: 0;
}
@media (max-width: 980px) {
  .pl-try-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pl-try-side {
    position: static;
    order: -1;
  }
  .pl-try-side .guide {
    padding: 0 14px;
  }
  .pl-try-side .guide .card-head {
    cursor: pointer;
    margin: 0;
    min-height: 44px; /* the whole chip is the tap target */
  }
  .pl-try-side .guide.open .guide-list {
    padding-bottom: 10px;
    max-height: 28vh;
    overflow: auto;
  }
  .pl-try-side .guide .card-head::after {
    content: "▾";
    margin-left: auto;
    color: var(--text-faint);
    font-weight: 900;
    transition: transform var(--dur-2) ease;
  }
  .pl-try-side .guide.open .card-head::after {
    transform: rotate(180deg);
  }
  .pl-try-side .guide:not(.open) .guide-list {
    display: none;
  }
}

.pl-recap .takeaways {
  margin: 0;
}

.pl-tag-study {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
}
.pl-tag-study svg {
  width: 14px;
  height: 14px;
  flex: none;
}
.pl-tag-study span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- recap video step (js/content/nic/videos.js) ---------- */
.pl-video {
  margin: 0;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.pl-video video {
  display: block;
  width: min(100%, 520px, 52vh);
  aspect-ratio: 1;
  border: 3px solid var(--line-2);
  border-radius: 22px;
  background: var(--bg-2);
  box-shadow: 0 6px 0 var(--line-2);
}
.pl-video figcaption {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 700;
}
.pl-video figcaption a {
  color: var(--blue-ink);
}
.pl-chapters {
  margin-top: 8px;
  font-weight: 700;
}
.pl-chapters ol {
  margin: 6px 0 0;
  padding-left: 22px;
  color: var(--text-dim);
}