/* The lesson player (DECISIONS.md O53), in the PMC house look of the
   triangle congruency lesson: a quiet credit line, navy headings, colourful
   content (blue rule cards, green answers), a caption band at the foot.
   Sizes are in container units, so the stage reads the same at any width,
   on a laptop, a phone, or full screen. Its own file: app.css is busy. */

.lesson-player { --lp-navy: var(--house-navy, #1F4E79); --lp-ink: var(--house-ink, #16202f); --lp-sec: var(--house-secondary, #5f6f86);
  --lp-hair: var(--house-hair, #dde5ef); --lp-blue: var(--house-blue-tint, #eef4fb); --lp-blue-line: var(--house-blue-line, #c9dbef);
  --lp-green: var(--house-green, #1f7a45); --lp-green-tint: var(--house-green-tint, #eef7f1); --lp-amber: var(--house-amber, #a86a16);
  --lp-amber-tint: var(--house-amber-tint, #fdf8f0); --lp-amber-line: var(--house-amber-line, #e7c89a);
  display: grid; gap: 10px; }
.lesson-stage { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  background: #fff; color: var(--lp-ink); border: 1px solid var(--lp-hair); border-radius: 12px; box-shadow: 0 10px 34px rgba(11,31,54,.08); }
.lesson-stage .house-masthead { position: absolute; top: 2.2cqw; left: 4.4cqw; right: 4.4cqw; margin: 0; padding-bottom: .7cqw; }
.lesson-stage .house-masthead-credit { height: 1.9cqw; min-height: 14px; }
.lesson-stage .house-masthead span { font-size: max(8px, .85cqw); }
.lesson-screen { position: absolute; top: 6.5cqw; left: 4.4cqw; right: 4.4cqw; bottom: 9.5cqw; }
.lesson-frame { height: 100%; display: flex; flex-direction: column; gap: 1.4cqw; animation: lesson-in .35s ease-out; }
@keyframes lesson-in { from { opacity: 0; transform: translateY(.6cqw); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lesson-frame, .lesson-step.is-new { animation: none !important; } }
.lesson-kicker { margin: 0; font-size: 1.15cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-sec); }
.lesson-heading { margin: 0; font-size: 3.4cqw; font-weight: 750; color: var(--lp-navy); letter-spacing: -.02em; line-height: 1.12; }
.lesson-body { flex: 1; min-height: 0; display: flex; gap: 2.8cqw; align-items: center; }
.lesson-words { flex: 1; display: grid; gap: 1.8cqw; align-content: center; }
.has-figure .lesson-words { flex: 0 1 46%; }
.lesson-show { font-size: 2.35cqw; line-height: 1.38; background: var(--lp-blue); border: 1px solid var(--lp-blue-line); border-left: .5cqw solid var(--lp-navy);
  border-radius: .8cqw; padding: 1.4cqw 1.8cqw; }
.lesson-math { font-size: 4.2cqw; font-weight: 600; text-align: center; color: var(--lp-ink); letter-spacing: .02em; }
.lesson-figure { flex: 1; min-width: 0; height: 100%; display: grid; place-items: center; }
.lesson-figure svg { width: 100%; height: auto; max-width: 100%; max-height: 100%; }

/* worked examples: the problem, then the steps as they are written up */
.lesson-problem { font-size: 3.1cqw; font-weight: 700; color: var(--lp-navy); }
.lesson-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9cqw; align-content: start; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.lesson-step { display: grid; grid-template-columns: 3cqw 1fr; gap: 1.2cqw; align-items: start; padding: .9cqw 1.3cqw; border: 1px solid var(--lp-hair);
  border-radius: .8cqw; background: #fff; }
.lesson-step.is-new { background: var(--lp-blue); border-color: var(--lp-blue-line); animation: lesson-in .35s ease-out; }
.lesson-step.is-try { background: var(--lp-amber-tint); border-color: var(--lp-amber-line); color: var(--lp-amber); }
.lesson-step-n { width: 3cqw; height: 3cqw; border-radius: 50%; display: grid; place-items: center; border: .22cqw solid var(--lp-navy);
  color: var(--lp-navy); font-weight: 800; font-size: 1.5cqw; }
.lesson-step.is-try .lesson-step-n { border-color: var(--lp-amber); color: var(--lp-amber); }
.lesson-step-show { font-size: 2.1cqw; line-height: 1.3; }
.lesson-step-why { margin-top: .3cqw; font-size: 1.5cqw; color: var(--lp-sec); }
.lesson-answer { align-self: flex-start; font-size: 2.6cqw; font-weight: 700; color: var(--lp-green); background: var(--lp-green-tint);
  border: 1px solid #bfe0cb; border-left: .5cqw solid var(--lp-green); border-radius: .8cqw; padding: .9cqw 1.8cqw; }
.lesson-answer span { font-size: 1.2cqw; letter-spacing: .14em; text-transform: uppercase; margin-right: .8cqw; }
.is-close { justify-content: center; text-align: center; align-items: center; }
.is-close .lesson-show { max-width: 70%; }

/* Guided Practice: it stops and waits for "Show me" */
.lesson-wait { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 1.6cqw;
  padding: 1.2cqw; background: var(--lp-amber-tint); border: 1px solid var(--lp-amber-line); border-radius: .8cqw; }
.lesson-try-hint { margin: 0; font-size: 1.8cqw; color: var(--lp-amber); }
.lesson-show-me { font-size: max(14px, 1.5cqw); }

/* the caption band */
.lesson-caption { position: absolute; left: 6cqw; right: 6cqw; bottom: 1.6cqw; margin: 0; text-align: center; font-size: 1.75cqw; line-height: 1.35;
  color: #fff; background: rgba(10, 27, 51, .86); border-radius: .7cqw; padding: .7cqw 1.4cqw; }
.lesson-caption:empty { display: none; }

/* before it starts */
.lesson-start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1.2cqw; border: 0; cursor: pointer;
  background: linear-gradient(160deg, rgba(10,27,51,.92), rgba(21,64,90,.9)); color: #fff; font: inherit; }
.lesson-start[hidden] { display: none; }
.lesson-start-icon { width: 8cqw; height: 8cqw; border-radius: 50%; display: grid; place-items: center; font-size: 3.2cqw; padding-left: .5cqw;
  background: var(--gold, #C9A355); color: #0A1B33; }
.lesson-start-title { font-size: 3.2cqw; font-weight: 750; max-width: 80%; text-align: center; }
.lesson-start-hint { font-size: 1.4cqw; opacity: .8; letter-spacing: .08em; text-transform: uppercase; }

/* controls, under the stage */
.lesson-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lesson-controls[hidden], .lesson-chapters[hidden] { display: none; }
.lesson-controls .button { padding: .55rem .9rem; }
.lesson-play { min-width: 5.5rem; }
.lesson-progress { flex: 1 1 140px; height: 8px; background: #e3e9f1; border-radius: 99px; overflow: hidden; }
.lesson-progress span { display: block; height: 100%; width: 0; background: var(--lp-navy); transition: width .3s; }
.lesson-speed { display: flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 700; color: var(--lp-navy); }
.lesson-speed select { padding: .4rem .5rem; border: 1px solid #b8c4cc; border-radius: 8px; background: #fff; }
.lesson-chapters { display: flex; flex-wrap: wrap; gap: 6px; }
.lesson-chapter { border: 1px solid var(--lp-hair); background: #fff; color: var(--lp-navy); border-radius: 99px; padding: .3rem .8rem; font: inherit;
  font-size: .82rem; font-weight: 700; cursor: pointer; }
.lesson-chapter.is-current { background: var(--lp-navy); border-color: var(--lp-navy); color: #fff; }
.lesson-note { margin: 0; font-size: .78rem; color: var(--lp-sec); }

/* full screen: the stage fills the screen, the controls stay under it */
.lesson-player.is-full { background: #0A1B33; padding: 2vh 2vw; align-content: center; }
.lesson-player.is-full .lesson-stage { max-height: 86vh; width: auto; max-width: 100%; margin: 0 auto; }
.lesson-player.is-full .lesson-note, .lesson-player.is-full .lesson-chapter:not(.is-current) { color: #c9d5e0; }
.lesson-player.is-full .lesson-speed { color: #fff; }

/* the script editor, the panel in a pack, the shelf under Worksheets */
.lesson-edit-part { margin: 18px 0 0; }
.lesson-edit-screen { border: 1px solid var(--house-hair, #dde5ef); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; }
.lesson-edit-screen legend { padding: 0 6px; font-weight: 800; color: var(--house-navy, #1F4E79); font-size: .85rem; }
.lesson-edit-screen.is-new { border-style: dashed; }
.lesson-give-students { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.lesson-chip { display: inline-block; padding: 2px 8px; border-radius: 99px; background: var(--house-blue-tint, #eef4fb); color: var(--house-navy, #1F4E79);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.lesson-text p { margin: 0 0 .5rem; }
.lesson-shelf { margin-bottom: 20px; }
label.optin-check.lesson-with-video span { display: grid; gap: 2px; }
label.optin-check.lesson-with-video small { color: var(--muted, #5f6f86); font-weight: 400; }
@media (max-width: 640px) {
  .lesson-caption { font-size: 2.8cqw; left: 3cqw; right: 3cqw; }
  .lesson-controls .button { padding: .5rem .7rem; }
}