/* Blackboard lessons (lessons/play.php). Page tokens come from style.css;
   these are the board's own: slate, wooden frame and chalk colours. */
@import url('lesson-fonts.css');
:root {
  --slate: #26352E;
  --slate-deep: #1B2722;
  --frame: #6E4B2A;
  --frame-dark: #4A3019;
  --chalk: #F4F2EA;
  --chalk-dim: rgba(244,242,234,0.55);
  --chalk-yellow: #F3D47A;
  --chalk-pink: #F2A2A0;
  --chalk-green: #A9E3B8;
  --chalk-blue: #A8D2F0;
  --font-chalk: 'Kalam', 'Comic Sans MS', cursive;
}
/* Layout: one lesson, one board. Header, then the framed slate (the lesson
   happens here), captions directly under it, then the controls and the scene
   list. Single dark look, same tokens as the Prep4Ten site. */
.lesson-wrap { max-width: 960px; margin: 0 auto; padding: 22px 16px 56px; display: flex; flex-direction: column; gap: 14px; }
h1 { font-family: var(--font-display); margin: 0; font-size: 24px; line-height: 1.2; text-wrap: balance; }
.eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.head { display: flex; flex-direction: column; gap: 6px; }
.head p { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.5; }
.meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--ink-secondary); font-variant-numeric: tabular-nums; }

/* ---- board ---- */
.frame { border-radius: 12px; padding: 14px 14px 26px; position: relative;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 9px), linear-gradient(180deg, var(--frame), var(--frame-dark));
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.12); }
.board { position: relative; border-radius: 4px; overflow: hidden; min-height: 440px;
  padding: 28px 34px 34px; color: var(--chalk); font-family: var(--font-chalk); font-size: 23px; line-height: 1.5;
  background:
    radial-gradient(ellipse 55% 40% at 20% 28%, rgba(255,255,255,0.045), transparent 70%),
    radial-gradient(ellipse 45% 35% at 80% 75%, rgba(255,255,255,0.035), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%, var(--slate), var(--slate-deep));
  box-shadow: inset 0 0 44px rgba(0,0,0,0.55); }
.board math { color: inherit; font-family: 'STIX Two Math', 'Cambria Math', math; font-size: 1.0em; }
.scene { display: flex; flex-direction: column; gap: 12px; transition: opacity 0.45s, filter 0.45s, transform 0.45s; }
.scene.wiping { opacity: 0; filter: blur(3px); transform: translateX(-14px); }

.l-h { color: var(--chalk-yellow); font-weight: 700; font-size: 1.12em; margin-bottom: 2px; }
.l-h .ul { display: block; height: 3px; margin-top: 2px; width: 0; background: currentColor; border-radius: 2px; opacity: 0.8; transition: width 0.6s ease-out; }
.l-h.done .ul { width: min(100%, 12ch); }
.l-h.pink { color: var(--chalk-pink); }
.l-p { min-width: 0; overflow-wrap: anywhere; }
.l-note { color: var(--chalk-pink); }
.l-box { align-self: flex-start; position: relative; padding: 6px 16px; color: var(--chalk-yellow); max-width: 100%; }
.l-box .edge { position: absolute; inset: 0; border: 2.5px solid var(--chalk-yellow); border-radius: 10px 6px 12px 7px;
  clip-path: inset(0 100% 0 0); transition: clip-path 0.7s ease-out; opacity: 0.85; }
.l-box.done .edge { clip-path: inset(0 0 0 0); }

.l-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; }
.l-graph { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.l-graph svg { width: 100%; max-width: 260px; height: auto; overflow: visible; }
.l-graph .cap { font-size: 0.8em; line-height: 1.35; }
.stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s-axis { stroke: var(--chalk-dim); stroke-width: 2; }
.s-curve { stroke: var(--chalk-blue); stroke-width: 3; }
.s-root { fill: var(--chalk-yellow); opacity: 0; transition: opacity 0.3s; }
.s-root.on { opacity: 1; }
.s-lbl { fill: var(--chalk-dim); font-family: var(--font-chalk); font-size: 13px; opacity: 0; transition: opacity 0.4s; }
.s-lbl.on { opacity: 1; }

/* The mask leaves a margin on every side: Devanagari marks (the dot of ों, a
   matra's flag) and italic overhangs reach past the word's box and were cut off. */
.tok { display: inline-block; clip-path: inset(-40% 100% -40% -0.3em); opacity: 0; }
.tok.on { clip-path: inset(-40% -0.3em -40% -0.3em); opacity: 1; transition: clip-path var(--w, 0.25s) linear, opacity 0.06s; }
.tok.tick { color: var(--chalk-green); }

.board-overlay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3;
  background: radial-gradient(ellipse at center, rgba(27,39,34,0.25), rgba(27,39,34,0.72)); }
.board-overlay .stack { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 16px; }
.chalk-btn { font-family: var(--font-chalk); font-size: 24px; color: var(--chalk); background: rgba(0,0,0,0.12);
  border: 2px solid rgba(244,242,234,0.75); border-radius: 999px; padding: 10px 28px; cursor: pointer; display: inline-flex; gap: 10px; align-items: center; }
.chalk-btn:hover { background: rgba(244,242,234,0.08); }
.chalk-btn svg { width: 18px; height: 18px; fill: currentColor; }
.overlay-sub { font-family: var(--font-chalk); color: var(--chalk-dim); font-size: 17px; }
.wait-btn { margin-top: 6px; align-self: flex-start; font-size: 20px; padding: 6px 22px; }

.tray { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 11px; border-radius: 0 0 4px 4px; background: linear-gradient(180deg, var(--frame-dark), #3A2512); }
.tray i { position: absolute; bottom: 4px; height: 7px; border-radius: 2px; background: linear-gradient(180deg,#fff,#D8D3C4); }
.tray i:nth-child(1) { left: 12%; width: 30px; }
.tray i:nth-child(2) { left: 17%; width: 18px; background: linear-gradient(180deg,#FBE7A6,#E2C46C); }
.tray i:nth-child(3) { left: 66%; width: 24px; background: linear-gradient(180deg,#C9E4F6,#93BFE0); }
.tray b { position: absolute; right: 9%; bottom: 3px; width: 56px; height: 14px; border-radius: 3px; background: linear-gradient(180deg,#8A6A4A,#5A4029); }

/* ---- captions + controls ---- */
.captions { min-height: 3.2em; padding: 10px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  color: var(--ink-secondary); line-height: 1.55; font-size: 15px; }
.captions[hidden] { display: none; }
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.controls .spacer { flex: 1; }
.btn { font: inherit; font-size: 14px; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn-play { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); min-width: 108px; justify-content: center; }
.btn-ghost { background: transparent; }
.btn svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.controls select { font: inherit; font-size: 13px; background: var(--page-bg); color: var(--ink); border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px; }
.controls label { font-size: 13px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.scenes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.scenes button { width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--ink-secondary); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.scenes button b { font-variant-numeric: tabular-nums; color: var(--ink-muted); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.scenes button[aria-current="true"] { border-color: var(--accent); color: var(--ink); background: var(--accent-wash); }
.scenes button.seen b::after { content: " ✓"; color: var(--accent); }
.lang-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.lang-label { font-size: 13px; color: var(--ink-muted); }
.lang-pick { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px; gap: 2px; background: var(--page-bg); }
.lang-pick button { font: inherit; font-size: 14px; color: var(--ink-secondary); background: transparent; border: 0; border-radius: 999px; padding: 5px 16px; cursor: pointer; }
.lang-pick button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.lang-pick button:hover:not([aria-pressed="true"]) { color: var(--ink); }
.audio-err { margin: 0; font-size: 13px; color: #E7676B; }

@media (prefers-reduced-motion: reduce) { .tok.on, .scene, .l-box .edge, .l-h .ul { transition: none; } }
@media (max-width: 560px) {
  .board { padding: 18px 16px 24px; font-size: 18px; min-height: 380px; }
  .frame { padding: 9px 9px 20px; }
  .l-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .l-graph .cap { font-size: 0.78em; }
}
/* figures and tables */
.l-fig svg { max-width: 100%; }
.fig-s { stroke-width: 2.4; }
.c-white { stroke: var(--chalk); color: var(--chalk); }
.c-yellow { stroke: var(--chalk-yellow); color: var(--chalk-yellow); }
.c-blue { stroke: var(--chalk-blue); color: var(--chalk-blue); }
.c-pink { stroke: var(--chalk-pink); color: var(--chalk-pink); }
.c-green { stroke: var(--chalk-green); color: var(--chalk-green); }
.c-dim { stroke: var(--chalk-dim); color: var(--chalk-dim); }
.dash { stroke-dasharray: 5 5; opacity: 0; transition: opacity 0.5s; }
.dash.on { opacity: 1; }
.fade { opacity: 0; transition: opacity 0.35s; }
.fade.on { opacity: 1; }
.fig-dot { fill: var(--chalk-yellow); stroke: none; }
.fig-lbl { fill: currentColor; stroke: none; font-family: var(--font-chalk); font-size: 14px; }
.l-table { overflow-x: auto; overflow-y: hidden; max-width: 100%; }
.l-table table { border-collapse: collapse; font-size: 0.82em; }
.l-table th, .l-table td { border: 1.5px solid var(--chalk-dim); padding: 2px 12px; text-align: center; font-variant-numeric: tabular-nums; }
.l-table th { color: var(--chalk-yellow); }
.t-row { opacity: 0; transition: opacity 0.4s; }
.t-row.on { opacity: 1; }
.no-voice { margin: 0; font-size: 13px; color: var(--ink-muted); }

/* style.css has no global [hidden] rule, and .board-overlay / .captions set display. */
.lesson-wrap [hidden] { display: none !important; }