/* Lesson detail. The shared .page-hero / .tutorial-wrap / .back-link
     components come from style.css; a lesson page uses a slightly smaller
     headline so the body text stays the thing the eye goes to. */
  .page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
  .page-hero .subtitle { font-size: 1.1rem; }
  .tutorial-wrap { padding: 0 1.5rem; }

  /* How long this page takes to read. Same number as the page's own
     timeRequired metadata (utils/readTime.js), so the two can never disagree.
     Muted and small on purpose: it is a fact, not a headline. */
  .page-hero .read-time {
    color: var(--muted);
    font-size: 0.85rem;
    margin: 0.75rem 0 0;
  }

  .tutorial-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2.5rem;
  }

  /* Video: only a real embed is ever rendered. No placeholder card - 0/224
     lessons have a youtube id, so a "Video coming soon" block would be a
     promise we do not keep on every page. */
  .video-embed {
    display: block;
    border-radius: 12px;
    overflow: hidden;
  }

  /* In-depth content */
  .lesson-content {
    max-width: 42rem;
    margin: 0 auto;
    padding-bottom: 4rem;
  }
  .lesson-content h2 {
    font-size: 1.6rem;
    margin: 2.5rem 0 1rem;
  }
  .lesson-content h3 {
    font-size: 1.3rem;
    margin: 2rem 0 0.75rem;
  }
  .lesson-content p {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 1rem;
  }
  .lesson-content ul,
  .lesson-content ol {
    margin: 0 0 1rem 1.5rem;
  }
  .lesson-content li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
  }
  .lesson-content a {
    color: var(--accent);
  }

  /* Examples block */
  .examples-block {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 3rem;
  }
  .examples-title {
    font-size: 1.6rem;
    margin: 2.5rem 0 1rem;
  }
  .example-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
  }
  .example-card h3 {
    font-size: 1.3rem;
    margin-top: 0;
  }
  .example-card p {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 1rem;
  }
  .example-card ul,
  .example-card ol {
    margin: 0 0 1rem 1.5rem;
  }
  .example-card li {
    margin-bottom: 0.4rem;
    line-height: 1.6;
  }
  .example-card a {
    color: var(--accent);
  }

  /* Hands-on “Try it” block */
  .hands-on-block {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 3rem;
  }
  .hands-on-title {
    font-size: 1.6rem;
    margin: 2.5rem 0 0.4rem;
  }
  .hands-on-intro {
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 1.5rem;
  }
  .hands-on-step {
    display: flex;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
  }
  .hands-on-num {
    flex: 0 0 auto;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .hands-on-content {
    flex: 1;
    min-width: 0;
  }
  .hands-on-summary {
    color: var(--text);
    font-size: 1.08rem;
    line-height: 1.6;
    margin: 0 0 0.85rem;
  }
  .hands-on-code {
    background: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    color: var(--text);
    overflow-x: auto;
    white-space: pre;
    margin: 0 0 0.85rem;
  }
  /* D9: PRIMM predict-then-run. The expected output is now a closed disclosure:
     the reader states a prediction first, then opens the answer. The prompt line
     sits above it; the answer keeps the old monospace muted styling. */
  .hands-on-predict-prompt {
    font-size: 0.92rem;
    color: var(--text);
    margin: 0 0 0.6rem;
  }
  .hands-on-expected {
    background: var(--muted-bg);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 0.25rem 0.5rem 0.5rem;
    margin: 0 0 0.85rem;
  }
  .hands-on-expected > summary {
    list-style-position: outside;
    cursor: pointer;
    font-weight: 600;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.6rem;
  }
  .hands-on-expected > summary::-webkit-details-marker {
    color: var(--accent);
  }
  .hands-on-expected[open] {
    padding: 0.25rem 0.5rem 0.75rem;
  }
  .hands-on-expected .hands-on-expected-body {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.88rem;
    color: var(--muted);
    white-space: pre;
    overflow-x: auto;
    margin: 0;
  }
  .hands-on-warning {
    background: #fff7ed;
    border: 1px solid #fde2c4;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
    color: #9a3412;
    margin: 0;
  }

  /* Data flow diagram */
  .dataflow-block {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: 3rem;
  }
  .dataflow-title {
    font-size: 1.6rem;
    margin: 2.5rem 0 1rem;
  }
  .dataflow-summary {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
  }
  .dataflow-summary p {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.75;
    margin: 0;
  }
  /* Scheme (plan) — plain text diagram reader can hand-draw */
  .flow-plan-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 2rem 0 0.75rem;
  }
  .flow-plan {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .flow-plan-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--muted-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.9rem 1.1rem;
  }
  .flow-plan-num {
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .flow-plan-text {
    color: var(--text);
    font-size: 1.02rem;
    line-height: 1.5;
    font-weight: 500;
  }
  .flow-plan-connector {
    text-align: center;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0;
  }

  /* Lesson path: the previous and next lesson in reading order. One component,
     two directions; the arrow is the only difference. */
  .lesson-step {
    max-width: 820px;
    margin: 0 auto 3rem;
    padding: 1.5rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
  .lesson-step + .lesson-step {
    margin: 0.75rem auto 3rem;
  }
  .lesson-step .step-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .lesson-step .step-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
  }
  .lesson-step .step-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
  }
  .lesson-step .step-link:hover {
    text-decoration: underline;
  }

  /* Mark Complete toggle */
  .mark-complete-wrap {
    max-width: 820px;
    margin: 2rem auto 3rem;
    padding: 0 1.5rem;
  }
  .mark-complete-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.6rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    border: 2px solid var(--accent);
    background: var(--surface);
    color: var(--accent);
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    justify-content: center;
  }
  .mark-complete-btn:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
    transform: translateY(-1px);
  }
  .mark-complete-btn.is-complete {
    background: var(--accent);
    color: #fff;
  }
  .mc-check {
    font-size: 1.05rem;
    line-height: 1;
  }

  /* D1b: the explanation now sits collapsed under "Why this works", after the
     reader has already done the hands-on steps and seen the data flow. The
     <details> is closed by default so the action stays the thing at the top of
     the page. J2.1: the examples no longer live inside this disclosure - they
     moved to their own visible band at page level, so only .lesson-content is
     left here. */
  .why-block {
    max-width: 820px;
    margin: 0 auto;
    margin-bottom: 2.5rem;
    padding: 0.25rem 0.5rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
  }
  .why-block > summary {
    list-style-position: outside;
    cursor: pointer;
    color: var(--text);
    font-weight: 600;
    font-size: 1.15rem;
    padding: 0.75rem 1rem;
  }
  .why-block > summary::-webkit-details-marker {
    color: var(--accent);
  }
  .why-block[open] {
    padding: 0.25rem 0.5rem 1.5rem;
  }
  .why-block[open] > summary {
    margin-bottom: 1rem;
  }
  /* Inside the open panel the concept article needs its own breathing room. */
  .why-block .lesson-content {
    max-width: 42rem;
  }
  /* J2.1: the examples band sits at page level, so it follows the same measure
     as the other page-level blocks rather than the narrower in-panel one. */
  .examples-block {
    max-width: 820px;
  }

/* D8: graduated support (Parsons problem). The reader drags the correct lines
   back into order before writing code. Lines are <button> fragments stacked in a
   column; the client script reorders them on Check. Kept visually distinct from
   the hands-on code so it reads as a puzzle, not another example. */
.parsons-block {
  max-width: 820px;
  margin: 0 auto;
  margin-bottom: 2.5rem;
  padding: 1rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.parsons-title {
  font-weight: 600;
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}
.parsons-intro {
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.parsons-lines {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.parsons-line {
  cursor: pointer;
  font-family: var(--font-mono, monospace);
  font-size: 0.9rem;
  white-space: pre;
  text-align: left;
  width: 100%;
  padding: 0.4rem 0.75rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}
.parsons-line:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.parsons-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.parsons-check,
.parsons-reset {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.parsons-check:hover,
.parsons-reset:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.parsons-status {
  margin: 0.5rem 0 0;
  color: var(--muted);
  min-height: 1.2rem;
}
.parsons-status.ok {
  color: var(--accent);
  font-weight: 600;
}

  /* D2: the outcome the reader is aiming for, shown in the hero before any
     explanation. It is the lesson's own final expected output, so it is styled
     like a result, not like prose: monospace, on a surface, clearly bounded.
     Small type on the note keeps it a fact rather than a second headline. */
  .outcome-block {
    margin: 1.25rem 0 0;
    padding: 1rem 1.25rem;
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
  }
  .outcome-block .outcome-title {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.5rem;
  }
  .outcome-block .outcome-preview {
    font-family: var(--mono, ui-monospace, monospace);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
    margin: 0;
  }
  .outcome-block .outcome-note {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0.5rem 0 0;
  }

/* D4: the choice passages get their OWN disclosure nested inside the why-block.
   A reader who is deciding between two approaches opens this one and leaves the
   concept explanation closed. Smaller type than the outer summary on purpose:
   this is a second-level decision, not the page's own heading. */
.why-block .choices-block {
  margin: 1.25rem auto 0;
  padding: 0.25rem 0.5rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.why-block .choices-block > summary {
  list-style-position: outside;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.6rem 1rem;
}
.why-block .choices-block > summary::-webkit-details-marker {
  color: var(--accent);
}
.why-block .choices-block[open] {
  padding: 0.25rem 0.5rem 1.25rem;
}
.why-block .choices-block .lesson-content {
  max-width: 42rem;
}

/* D10: one concept per screen (chunking / cognitive load).
   The why-block used to render every section of a lesson at once — up to 1122
   words on a single screen. Each concept is now its own disclosure inside the
   open why-block, so the reader sees a scannable list of concept TITLES and
   opens ONE at a time. The heading is the <summary>, which means the titles
   stay visible (that is the map of the lesson) while the prose stays hidden
   until asked for. Second-level disclosure, so it is styled smaller than the
   why-block's own summary — same shape as the D4 choices-block, one level up.
   The body still lives inside .lesson-content, so all prose rules above apply
   unchanged inside it. */
.why-block .why-section {
  margin: 1rem auto 0;
  padding: 0.2rem 0.5rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.why-block .why-section > summary {
  list-style-position: outside;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.6rem 1rem;
}
.why-block .why-section > summary::-webkit-details-marker {
  color: var(--accent);
}
.why-block .why-section[open] {
  padding: 0.2rem 0.5rem 1.25rem;
}
.why-block .why-section .lesson-content {
  max-width: 42rem;
}
/* The first concept sits flush under the why summary; no double gap. */
.why-block[open] > summary + .lesson-content > .why-section:first-of-type {
  margin-top: 0;
}

/* D11: line-by-line execution trace (dual coding).
   The flow-plan above is the "what it means" model; this is the matching
   "what happens, in order" model for the first exercise. It is a closed
   disclosure so it adds no reading load until the reader asks to trace.
   Each row is one source line; a print shows its output on the right, a
   setup line is labelled as silent. Monospace on the left to read as code,
   muted prose on the right so the annotation never competes with the code. */
.trace-block {
  max-width: 820px;
  margin: 0 auto;
  margin-bottom: 2.5rem;
  padding: 0.25rem 0.5rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.trace-block > summary {
  list-style-position: outside;
  cursor: pointer;
  color: var(--text);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 0.75rem 1rem;
}
.trace-block > summary::-webkit-details-marker {
  color: var(--accent);
}
.trace-block[open] {
  padding: 0.25rem 0.5rem 1.5rem;
}
.trace-block[open] > summary {
  margin-bottom: 1rem;
}
.trace-intro {
  color: var(--muted);
  font-size: 1rem;
  margin-bottom: 1rem;
}
.trace-lines {
  max-width: 42rem;
}
.trace-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.trace-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
  font-size: 0.95rem;
}
.trace-out {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--accent);
  font-size: 0.95rem;
}
.trace-note {
  color: var(--muted);
  font-style: italic;
  font-size: 0.9rem;
}

/* D12: the retrieval-practice quick check (a warm-up about the PREVIOUS lesson).
   It reuses the D8 click-to-reorder interaction, so it needs the same layout
   mechanics — but it must not look like the lesson's own exercise. A dashed
   border and a neutral (not accent-tinted) line background read as "a small
   question", and the type is one step smaller than the parsons block. The
   reader answers it at the very top of the page, before any new material. */
.recall-block {
  max-width: 720px;
  margin: 0 auto;
  margin-bottom: 2rem;
  padding: 0.75rem 1rem 1rem;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.recall-title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 0.4rem;
}
.recall-intro {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 0.6rem;
}
.recall-lines {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.recall-line {
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  white-space: pre;
  text-align: left;
  width: 100%;
  padding: 0.3rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
}
.recall-line:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.recall-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.recall-check,
.recall-reset {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.recall-check:hover,
.recall-reset:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.recall-status {
  margin: 0.4rem 0 0;
  color: var(--muted);
  min-height: 1.2rem;
}
.recall-status.ok {
  color: var(--accent);
  font-weight: 600;
}

/* F27: the Reference layer, reached from where the words appear. A lesson page
   already has a reading rhythm; this block is a shelf, not another card. The
   term is the link (the thing to look up) and the definition follows it, so a
   reader scanning the page gets the answer without leaving and the full entry
   one click away. No border box: the list is the whole layout, repeated n
   times, and a box around each would be the one layout repeated n times. */
.lesson-refs {
  margin: 2.5rem 0 0;
  padding: 0;
}
.lesson-refs .refs-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
.lesson-refs .refs-intro {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.8rem;
}
.lesson-refs .refs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}
.lesson-refs .ref-item {
  font-size: 0.9rem;
  color: var(--muted);
}
.lesson-refs .ref-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.lesson-refs .ref-link:hover {
  text-decoration: underline;
}
.lesson-refs .ref-def {
  display: block;
  margin: 0.15rem 0 0;
  font-size: 0.88rem;
}
@media (prefers-reduced-motion: reduce) {
  .lesson-refs .ref-link { transition: none; }
}