/* STEM LM skin for the lesson tab, player and mini lab. lesson.css keeps the structure; this file
   only changes surfaces, type and glow so the player matches the rest of STEM LM: black and white,
   so the highlights and glows are ink. Loaded last. */

.lesson-panel {
  --tutor-ink: var(--ink);
  --accent-2: var(--ink);
  --grad-soft: var(--soft);
}
.lesson-panel h2,
.lesson-panel .lesson-heading {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.lesson-panel .lab-title {
  font: 600 24px/1.25 var(--display), var(--cjk-sans);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
}
.lesson-panel h3,
.lesson-panel .ask-title {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.lesson-lede {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}

/* ---------- build form ---------- */
.lesson-box {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--border);
}
.lesson-check input {
  accent-color: var(--accent);
}
.lesson-file {
  border-top-color: var(--border);
}
.lesson-options label {
  font: 500 11px/1.2 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.lesson-options select,
.lesson-options input,
.lesson-voice {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border);
  color: var(--ink);
  font-family: var(--ui);
  text-transform: none;
  letter-spacing: 0;
}
.lesson-options select:focus,
.lesson-options input:focus,
.lesson-voice:focus {
  outline: none;
  border-color: rgba(169, 155, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(169, 155, 255, 0.14);
}
.lesson-voice option,
.lesson-options select option {
  background: var(--surface-2);
}
.lesson-engine,
.lesson-cost {
  font-family: var(--mono);
  letter-spacing: 0.02em;
}
.lesson-error {
  color: var(--danger);
}

/* ---------- generation progress ---------- */
.lesson-stages li {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-color: var(--border);
}
.lesson-stages li.is-active {
  border-color: rgba(16, 16, 16, 0.6);
  color: var(--accent-2);
  box-shadow: 0 0 20px -6px rgba(16, 16, 16, 0.7);
}
.lesson-stages li.is-done {
  background: var(--grad-soft);
  border-color: var(--border-strong);
}
.lesson-threads,
.lesson-thread {
  border-color: var(--border);
}
.lesson-thread.is-running .lesson-thread-dot {
  border-color: var(--accent-2);
  background: var(--accent-2);
  box-shadow: 0 0 12px var(--accent-2);
}
.lesson-thread.is-done .lesson-thread-dot {
  border-color: var(--accent);
  background: var(--accent);
}

/* ---------- player ---------- */
.lesson-frame {
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 40px 90px -40px rgba(94, 120, 255, 0.55),
    0 0 60px -30px rgba(169, 155, 255, 0.6);
}
.lesson-loading {
  font-family: var(--mono);
  background: var(--glass-strong);
  border: 1px solid var(--border);
}
.lesson-caption {
  font-family: var(--ui), var(--cjk-sans);
  font-size: 16px;
}
.lesson-caption .rest {
  color: var(--faint);
}
.lesson-play {
  background: var(--grad);
  color: #06070e;
  box-shadow: 0 10px 30px -10px rgba(140, 130, 255, 0.9);
  transition: transform 0.2s, box-shadow 0.2s;
}
.lesson-play:hover {
  filter: none;
  transform: scale(1.05);
  box-shadow: 0 14px 40px -10px rgba(160, 130, 255, 1);
}
.lesson-counter,
.lesson-time {
  font-family: var(--mono);
}
.lesson-seg {
  background: var(--border);
}
.lesson-seg i {
  background: var(--grad, var(--accent));
  box-shadow: 0 0 10px rgba(16, 16, 16, 0.6);
}
.lesson-player:fullscreen {
  background: radial-gradient(120% 80% at 50% 0%, #11142a 0%, var(--bg) 60%);
}

/* ---------- slides ---------- */
.ls-slide {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(169, 155, 255, 0.12), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(16, 16, 16, 0.08), transparent 60%),
    var(--surface);
}
.ls-title {
  font-weight: 600;
  letter-spacing: -0.04em;
}
.ls-layout-title .ls-title {
  letter-spacing: -0.05em;
}
.ls-title-rule {
  background: var(--grad);
  box-shadow: 0 0 24px rgba(140, 130, 255, 0.7);
}
.ls-bullet.is-highlight {
  background: var(--grad-soft);
  box-shadow: inset 5px 0 var(--accent-2);
}
.ls-bullet-icon {
  background: var(--grad-soft);
  color: var(--accent-2);
}
.ls-bullet.is-highlight .ls-bullet-icon {
  background: var(--grad);
  color: #06070e;
}
.ls-term {
  border-left-color: var(--accent-2);
}
.ls-term-word {
  font-weight: 600;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ls-visual-canvas {
  background: rgba(4, 5, 10, 0.6);
  box-shadow: inset 0 0 0 1px var(--border);
}
.ls-visual.is-highlight .ls-visual-canvas {
  box-shadow:
    inset 0 0 0 1px var(--border),
    0 0 0 3px rgba(16, 16, 16, 0.7),
    0 0 40px -6px rgba(16, 16, 16, 0.6);
}
.ls-curve {
  filter: drop-shadow(0 0 6px rgba(169, 155, 255, 0.55));
}
.ls-step,
.ls-compare-col,
.ls-code {
  background: rgba(255, 255, 255, 0.03);
}
.ls-step.is-active {
  background: var(--grad);
  border-color: transparent;
  color: #06070e;
}
.ls-code {
  font-family: var(--mono);
}
.ls-code-line.is-active {
  background: var(--grad-soft);
  box-shadow: inset 5px 0 var(--accent-2);
}

/* ---------- ask the tutor ---------- */
.lesson-ask {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  border-color: var(--border);
}
.ask-input {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border);
}
.ask-input:focus {
  outline: none;
  border-color: rgba(16, 16, 16, 0.6);
  box-shadow: 0 0 0 4px rgba(16, 16, 16, 0.12);
}
.ask-who {
  font-family: var(--mono);
}
.ask-replay {
  color: var(--accent-2);
}