/* Lesson screen on paper. Overrides the black lesson surface with the landing
   page's visual language (paper ground, ink rules, coral action, lime growth)
   so the app no longer looks like a different product from the page that sold
   it. Loaded after styles.css; scoped to body.view-lesson. The smile stays the
   listening face - it only loses its glow and gains an ink outline. */

body.view-lesson {
  --lp-paper: #f3efe5;
  --lp-ink: #15171b;
  --lp-muted: #5e625f;
  --lp-coral: #ff654a;
  --lp-coral-text: #a83224;
  --lp-blue: #3448e5;
  --lp-lime: #dbff65;
  --lp-lime-text: #5d7a00;
  --lp-white: #fffdf8;
  --lp-line: rgba(21, 23, 27, 0.16);
  background: var(--lp-paper);
  color: var(--lp-ink);
}

body.view-lesson::before {
  background:
    linear-gradient(var(--lp-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--lp-line) 1px, transparent 1px),
    var(--lp-paper);
  background-size: 44px 44px, 44px 44px, auto;
  opacity: 0.55;
  transform: none;
}

body.view-lesson .practice-surface.conversation-surface {
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-white);
  box-shadow: 8px 8px 0 var(--lp-blue);
  color: var(--lp-ink);
}

body.view-lesson .surface-ambient {
  display: none;
}

body.view-lesson .flow-line {
  background: rgba(21, 23, 27, 0.12);
}

body.view-lesson .flow-line span {
  background: var(--lp-ink);
}

/* Top pills */
body.view-lesson .lesson-word-counter,
body.view-lesson .lesson-plan-badge,
body.view-lesson .first-run-lesson-badge {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-white);
  color: var(--lp-ink);
  box-shadow: 2px 2px 0 var(--lp-ink);
}

body.view-lesson .lesson-word-label,
body.view-lesson .lesson-word-value,
body.view-lesson .first-run-lesson-badge span,
body.view-lesson .first-run-lesson-badge strong {
  color: var(--lp-ink);
}

body.view-lesson .first-run-lesson-badge {
  background: var(--lp-lime);
}

/* The plan badge takes the same spot and look as the free-trial badge: top
   left, lime, two lines. The word counter keeps the top right. */
body.view-lesson .practice-surface > .lesson-plan-badge {
  right: auto;
  left: 14px;
  top: 14px;
  z-index: 5;
  min-width: 104px;
  min-height: 42px;
  padding: 6px 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-lime);
  font-size: 0.86rem;
  font-weight: 950;
  line-height: 1;
}

body.is-first-run-lesson.view-lesson .practice-surface > .lesson-plan-badge {
  display: none;
}

body.view-lesson .cannot-speak-button {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-white);
  color: var(--lp-ink);
  font-weight: 800;
}

body.view-lesson .cannot-speak-button[aria-pressed="true"] {
  background: var(--lp-ink);
  color: var(--lp-white);
}

/* Stream: the listening smile, then the prompt block. The top pills are
   absolutely positioned, so the stream starts below them. The stage row stays
   fixed (smile + status) and the prompt block is the flexible row. */
body.view-lesson .conversation-stream {
  padding-top: 72px;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 14px;
}

body.view-lesson {
  --paper-smile: min(36vw, 140px);
}

body.view-lesson .practice-surface.conversation-surface .conversation-stream .voice-stage {
  order: 1;
  height: auto !important;
  min-height: calc(var(--paper-smile) + 56px) !important;
  align-self: start !important;
  align-content: start;
  gap: 10px;
}

body.view-lesson .practice-copy {
  order: 2;
  min-height: 0;
  grid-template-rows: none !important;
  grid-auto-flow: row;
  grid-auto-rows: max-content;
  align-content: start;
  gap: 12px;
}

/* The smile keeps its face; the glow goes, an ink outline comes */
body.view-lesson .practice-surface.conversation-surface .conversation-stream .voice-stage .mic-button {
  width: var(--paper-smile) !important;
  min-width: var(--paper-smile) !important;
  min-height: var(--paper-smile) !important;
  border: 3px solid var(--lp-ink);
  box-shadow: 5px 5px 0 var(--lp-ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

body.view-lesson .voice-stage .mic-button::before {
  border-color: transparent;
}

body.view-lesson.is-recording .voice-stage .mic-button {
  box-shadow: 5px 5px 0 var(--lp-coral);
}

body.view-lesson .speech-status {
  color: var(--lp-muted);
  font-weight: 700;
}

body.view-lesson.is-recording .speech-status,
body.view-lesson.is-transcribing .speech-status {
  color: var(--lp-ink);
}

body.view-lesson .speech-status:not(:empty) {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-white);
  color: var(--lp-ink);
}

body.view-lesson .mic-permission-hint {
  color: var(--lp-muted);
}

/* Prompt */
body.view-lesson .prompt-text {
  color: var(--lp-ink);
  font-weight: 900;
  letter-spacing: -0.01em;
}

body.view-lesson .prompt-category-label,
body.view-lesson .prompt-status-label {
  color: var(--lp-muted);
}

body.view-lesson .user-transcript {
  color: var(--lp-ink);
}

/* Reveal and attempt controls */
body.view-lesson .answer-reveal:not(.revealed) {
  border: 1.5px solid var(--lp-ink) !important;
  border-radius: 4px !important;
  background: var(--lp-white) !important;
  color: var(--lp-ink) !important;
  box-shadow: 2px 2px 0 var(--lp-ink) !important;
}

body.view-lesson .answer-reveal.revealed {
  border: 2px solid var(--lp-ink) !important;
  border-radius: 6px !important;
  background: var(--lp-lime) !important;
  color: var(--lp-ink) !important;
  box-shadow: 4px 4px 0 var(--lp-ink) !important;
  font-weight: 900;
}

body.view-lesson .lesson-attempt-primary {
  border: 2px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-ink);
  color: var(--lp-white);
  box-shadow: 3px 3px 0 var(--lp-coral);
}

body.view-lesson .lesson-attempt-primary:hover {
  background: var(--lp-ink);
  border-color: var(--lp-ink);
}

body.view-lesson .lesson-attempt-secondary {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: transparent;
  color: var(--lp-ink);
}

body.view-lesson .lesson-attempt-secondary:hover {
  background: var(--lp-white);
  border-color: var(--lp-ink);
  color: var(--lp-ink);
}

body.view-lesson .silent-self-assessment {
  color: var(--lp-ink);
}

body.view-lesson .silent-self-assessment button {
  border: 1.5px solid var(--lp-ink);
  border-radius: 4px;
  background: var(--lp-white);
  color: var(--lp-ink);
  box-shadow: 2px 2px 0 var(--lp-ink);
}

body.view-lesson .problem-feedback-button {
  border-color: var(--lp-ink);
  color: var(--lp-ink);
}

body.view-lesson .feedback {
  border: 1.5px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-white);
  color: var(--lp-ink);
}

body.view-lesson .feedback.correct-feedback {
  background: var(--lp-lime);
}

body.view-lesson .feedback.wrong-feedback {
  background: #ffe3dc;
}

body.view-lesson .feedback-title,
body.view-lesson .feedback-title.correct,
body.view-lesson .feedback-title.wrong,
body.view-lesson .feedback-answer,
body.view-lesson .feedback-note {
  color: var(--lp-ink);
}

body.view-lesson .lesson-finish-button {
  border: 2px solid var(--lp-ink);
  border-radius: 6px;
  background: var(--lp-coral);
  color: var(--lp-ink);
  box-shadow: 5px 5px 0 var(--lp-ink);
  font-weight: 900;
}

body.view-lesson .lesson-finish-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 var(--lp-ink);
}

@media (prefers-reduced-motion: reduce) {
  body.view-lesson .voice-stage .mic-button,
  body.view-lesson .lesson-finish-button {
    transition: none;
  }
}