/*
 * lesson.css: lessons rendered by net.benlamb.dsa.lesson.LessonRenderer and enhanced by js/lesson.js.
 * Uses only the design tokens that site.css defines on :root (docs/design.md). Light mode only.
 *
 * Class contract (renderer, this file and lesson.js must agree; rename in all three or not at all):
 *
 *   .lesson-body[data-lesson]           one lesson; data-msg-* carry every word lesson.js shows
 *   h2[id], h3[id], h4[id]               lesson sections; the page owns the h1
 *   pre.code.code-java > code            Java, with span.tok-keyword | tok-string | tok-comment | tok-number | tok-annotation
 *   pre.code.code-text > code            plain text (also pre.code with no language)
 *   pre.console > code                   program output
 *   .table-wrap > table.data             Markdown table: caption, th[scope=col], cells .align-right | .align-center
 *   aside.ask > p.ask-q                  a question students ask ("Q:"), then its answer
 *   div.check > details > summary        a self-check; the answer is in div.check-answer
 *   aside.teaser, .teaser-label          a think-first question, labeled "Think first."
 *   aside.sticky                         a short aside in Ben's voice
 *   form.quiz[data-quiz][data-answer]    multiple choice:
 *       fieldset > legend (span.quiz-hint when several answers are right)
 *       ul.quiz-choices > li.quiz-choice > input + label + p.quiz-why[hidden]
 *       .quiz-actions > button.quiz-check[hidden] + p.quiz-feedback[role=status]
 *       details.quiz-answer > ul.quiz-key > li.is-right | is-wrong > strong.quiz-mark + p.quiz-key-why
 *         (the answer key for readers without JavaScript; lesson.js hides it)
 *   form.fill[data-fill][data-accept]    type an exact answer:
 *       p.fill-q > label, .fill-row > input.fill-input + button.fill-check[hidden]
 *       p.fill-feedback[role=status], details.fill-answer > p.fill-accepted + explanation
 *   .table-wrap > table.array-diagram    an array: thead index row, tr.array-values, tr.array-pointers
 *       td.is-highlight (gold fill), td.is-done (hatched), span.array-pointer
 *
 * States lesson.js sets: li.quiz-choice.is-right | is-wrong (plus strong.quiz-mark in the label),
 * .quiz-feedback / .fill-feedback .is-pass | is-fail, form.fill.is-solved, input.fill-input[aria-invalid=true],
 * and tabindex on pre and .table-wrap elements that scroll sideways.
 */

.lesson-body {
  max-width: 70ch;
  overflow-wrap: break-word;
}

/* The renderer marks script-only controls hidden; keep them hidden even when a class sets display. */
.lesson-body [hidden] {
  display: none !important;
}

.lesson-body p,
.lesson-body li {
  text-wrap: pretty;
}

.lesson-body h2,
.lesson-body h3,
.lesson-body h4 {
  scroll-margin-top: 1.5rem;
}

.lesson-body h2 {
  margin-block: 2.75rem 0.75rem;
}

.lesson-body h3 {
  margin-block: 2rem 0.5rem;
}

.lesson-body > :first-child {
  margin-top: 0;
}

.lesson-body img {
  max-width: 100%;
  height: auto;
}

/* ---- Code ------------------------------------------------------------------------------------------------ */

.lesson-body pre {
  margin-block: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  overflow-x: auto;
  font-family: var(--font-code);
  font-size: 1.05rem;
  line-height: 1.55;
  tab-size: 4;
  white-space: pre;
}

.lesson-body pre.code {
  background: var(--code-bg);
  color: var(--ink);
}

.lesson-body pre.console {
  background: var(--ink);
  color: var(--gold);
}

.lesson-body pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.lesson-body .tok-keyword {
  color: var(--plum);
}

.lesson-body .tok-string {
  color: var(--pass);
}

.lesson-body .tok-comment {
  color: var(--ink-2);
}

.lesson-body .tok-number {
  color: var(--steel);
}

.lesson-body .tok-annotation {
  color: var(--caution);
}

/* ---- Tables (table.data itself is styled by site.css) ------------------------------------------------------ */

/* Positioned so the visually hidden cell text (absolutely positioned) scrolls with the table, not the page. */
.lesson-body .table-wrap {
  position: relative;
  margin-block: 1.5rem;
  max-width: 100%;
  overflow-x: auto;
}

/* Small tables get enough width that a short caption stays on one line. */
.lesson-body .table-wrap > table.data {
  min-width: min(100%, 24rem);
}

.lesson-body .align-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.lesson-body .align-center {
  text-align: center;
}

/* ---- Asides and panels ------------------------------------------------------------------------------------- */

.lesson-body .ask,
.lesson-body .teaser,
.lesson-body .sticky,
.lesson-body .check,
.lesson-body .quiz,
.lesson-body .fill {
  margin-block: 2rem;
}

.lesson-body .ask,
.lesson-body .teaser,
.lesson-body .check,
.lesson-body .quiz,
.lesson-body .fill {
  padding: clamp(16px, 2vw, 28px);
}

.lesson-body .ask > :first-child,
.lesson-body .teaser > :first-child,
.lesson-body .sticky > :first-child,
.lesson-body .check > :first-child,
.lesson-body .check-answer > :first-child {
  margin-top: 0;
}

.lesson-body .ask > :last-child,
.lesson-body .teaser > :last-child,
.lesson-body .sticky > :last-child,
.lesson-body .check > :last-child,
.lesson-body .check-answer > :last-child {
  margin-bottom: 0;
}

/* Soft panels with a thick left rule. */
.lesson-body .ask {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 6px solid var(--ink);
  border-radius: 4px 12px 12px 4px;
}

.lesson-body .ask-q {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.35;
  text-wrap: balance;
}

.lesson-body .teaser {
  background: var(--cream);
  border-left: 6px solid var(--ink);
  border-radius: 4px 12px 12px 4px;
}

.lesson-body .teaser-label {
  font-weight: 700;
}

/* A note stuck to the page: cream, serif italic, a slight tilt for readers who haven't asked for less motion. */
.lesson-body .sticky {
  max-width: 34rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream);
  border: 1px solid var(--line-soft);
  border-radius: 3px;
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
}

.lesson-body .sticky em {
  font-style: normal;
}

.lesson-body .sticky code {
  font-style: normal;
}

@media (prefers-reduced-motion: no-preference) {
  .lesson-body .sticky {
    transform: rotate(-0.8deg);
  }
}

.lesson-body .check,
.lesson-body .quiz,
.lesson-body .fill {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}

/* ---- Disclosures: "Show answer" --------------------------------------------------------------------------- */

.lesson-body details {
  margin-top: 1rem;
}

.lesson-body .check details {
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
}

.lesson-body summary {
  width: fit-content;
  padding-block: 0.375rem;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}

.lesson-body summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lesson-body details[open] > summary {
  margin-bottom: 0.5rem;
}

/* ---- Quiz -------------------------------------------------------------------------------------------------- */

.lesson-body .quiz fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lesson-body .quiz legend {
  padding: 0 0 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.lesson-body .quiz-hint {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-2);
  font-size: 1rem;
  font-weight: 400;
}

.lesson-body .quiz-choices {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lesson-body .quiz-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: start;
  margin: 0;
  padding: 0.5rem 0.875rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.lesson-body .quiz-choice:has(input:checked) {
  border-color: var(--line);
}

.lesson-body .quiz-choice input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.375rem 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.lesson-body .quiz-choice label {
  min-width: 0;
  overflow-wrap: anywhere;
  min-height: 2rem;
  cursor: pointer;
}

.lesson-body .quiz-why {
  grid-column: 2;
  margin: 0.25rem 0 0.25rem;
  font-size: 1.1rem;
}

.lesson-body .quiz-choice.is-right {
  background: var(--pass-bg);
  border-color: var(--pass);
}

.lesson-body .quiz-choice.is-wrong {
  background: var(--fail-bg);
  border-color: var(--fail);
}

.lesson-body .quiz-mark {
  font-weight: 700;
}

.lesson-body .is-right .quiz-mark {
  color: var(--pass);
}

.lesson-body .is-wrong .quiz-mark {
  color: var(--fail);
}

.lesson-body .quiz-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 1.25rem;
}

/* Without JavaScript the row is empty: the button stays hidden and nothing is announced. */
.lesson-body .quiz-actions:has(.quiz-check[hidden]) {
  margin-top: 0;
}

.lesson-body .quiz-feedback,
.lesson-body .fill-feedback {
  margin: 0;
  font-weight: 700;
}

.lesson-body .quiz-feedback.is-pass,
.lesson-body .fill-feedback.is-pass {
  color: var(--pass);
}

.lesson-body .quiz-feedback.is-fail,
.lesson-body .fill-feedback.is-fail {
  color: var(--fail);
}

.lesson-body .quiz-key {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lesson-body .quiz-key p {
  margin: 0;
}

.lesson-body .quiz-key-why {
  font-size: 1.1rem;
}

/* ---- Fill-in ----------------------------------------------------------------------------------------------- */

.lesson-body .fill-q {
  margin: 0 0 1rem;
  font-weight: 700;
  line-height: 1.45;
}

.lesson-body .fill-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.lesson-body .fill-input {
  flex: 1 1 12rem;
  min-width: 0;
  max-width: 24rem;
  min-height: 44px;
  padding: 0.375rem 0.75rem;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-code);
  font-size: 1.1rem;
}

.lesson-body .fill-input[aria-invalid="true"] {
  border-color: var(--fail);
}

.lesson-body .fill.is-solved .fill-input {
  border-color: var(--pass);
}

.lesson-body .fill-feedback:not(:empty) {
  margin-top: 0.75rem;
}

.lesson-body .fill-accepted {
  margin: 0 0 0.5rem;
}

.lesson-body .fill-answer > :last-child {
  margin-bottom: 0;
}

/* ---- Array diagram ----------------------------------------------------------------------------------------- */

.lesson-body .array-diagram {
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-code);
  font-variant-numeric: tabular-nums;
}

.lesson-body .array-diagram caption {
  padding-bottom: 0.75rem;
  caption-side: top;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  text-align: start;
}

.lesson-body .array-diagram th {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-2);
}

.lesson-body .array-diagram th[scope="row"] {
  padding-right: 0.75rem;
  text-align: end;
  white-space: nowrap;
}

.lesson-body .array-diagram th[scope="col"] {
  padding: 0 0.25rem 0.25rem;
  text-align: center;
  font-family: var(--font-code);
}

.lesson-body .array-values td {
  width: 2.25rem;
  height: 2.75rem;
  padding: 0.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left-width: 0;
  text-align: center;
  vertical-align: middle;
}

.lesson-body .array-values th + td {
  border-left-width: 1px;
  border-radius: 6px 0 0 6px;
}

.lesson-body .array-values td:last-child {
  border-radius: 0 6px 6px 0;
}

.lesson-body .array-values th + td:last-child {
  border-radius: 6px;
}

/* Done or discarded: a hatched fill and quieter text, so it reads without color. */
.lesson-body .array-values td.is-done {
  background: repeating-linear-gradient(135deg, var(--paper) 0 5px, var(--line-soft) 5px 8px);
  color: var(--ink-2);
}

/* The element in play: gold fill, bold figure, and a navy bar underneath. */
.lesson-body .array-values td.is-highlight {
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -4px 0 var(--ink);
}

.lesson-body .array-pointers td {
  padding: 0.375rem 0.25rem 0;
  font-size: 1rem;
  text-align: center;
  vertical-align: top;
}

.lesson-body .array-pointer {
  display: block;
  line-height: 1.3;
}