/* ==========================================================================
   Miftah Islamiyat — lesson pages  (visual redesign, Stage 2)

   The reading experience matters more here than anywhere else: this is where
   a student spends an hour at a time. The redesign aims for the feel of a
   well-set textbook — generous measure, clear section rhythm, and pedagogical
   furniture (evidence, frames, misconceptions) that is visually distinct
   without shouting.
   ========================================================================== */

.lesson { padding-block: var(--s7) var(--s9); }

/* ==========================================================================
   Header
   ========================================================================== */
.lesson__eyebrow {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-bottom: var(--s4); max-width: none;
}
.lesson__title { margin-bottom: var(--s4); }
.lesson__header .lede { margin-bottom: var(--s5); }

.lesson__meta {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center;
  padding-block: var(--s4);
  margin-bottom: var(--s5);
  border-block: 1px solid var(--rule);
}
.lesson__time {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.7rem;
  font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-faint);
  margin: 0; margin-right: auto; max-width: none;
}
/* Separated by a rule rather than punctuation, so the two facts stay legible
   when they wrap onto different lines on a narrow screen. */
.lesson__position {
  padding-inline-start: 0.7rem;
  border-inline-start: 1px solid var(--rule-strong);
  color: var(--ink-soft); font-weight: 600;
}
@media (max-width: 30rem) {
  .lesson__position { padding-inline-start: 0; border-inline-start: 0; }
}

/* --- Syllabus connection -------------------------------------------------- */
.syllabus-connection {
  padding: var(--s3) var(--s5);
  margin-bottom: var(--s6);
  background: var(--indigo-tint);
  border: 1px solid var(--indigo-edge);
  border-radius: var(--radius);
}
.syllabus-connection summary {
  font-family: var(--font-ui); font-weight: 650; font-size: 0.88rem;
  color: var(--indigo); cursor: pointer; padding-block: var(--s2);
}
.syllabus-connection[open] summary { margin-bottom: var(--s3); }
.syllabus-connection__list { list-style: none; margin: 0; padding: 0; }
.syllabus-connection__list li {
  display: flex; gap: var(--s3); flex-wrap: wrap; align-items: baseline;
  margin-bottom: var(--s3); max-width: none;
}
.syllabus-connection__text { flex: 1 1 22rem; font-size: 0.9rem; }
.syllabus-connection__note {
  flex-basis: 100%; font-size: 0.8rem; font-style: italic; color: var(--ink-faint);
}
.syllabus-connection__link { margin: var(--s3) 0 0; font-size: 0.84rem; }

/* --- Contents ------------------------------------------------------------- */
.lesson-contents {
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s7);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.lesson-contents__title {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint); margin-bottom: var(--s3);
}
.lesson-contents__phases {
  display: grid; gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.lesson-contents__phase-title {
  margin: 0 0 var(--s2);
  font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.lesson-contents__phase-title a { color: var(--gold); text-decoration: none; }
.lesson-contents__phase-title a:hover { text-decoration: underline; }
.lesson-contents__list {
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--font-ui); font-size: 0.84rem;
}
.lesson-contents__list li { margin: 0 0 var(--s2); max-width: none; }
.lesson-contents__list a { text-decoration: none; color: var(--ink-soft); }
.lesson-contents__list a:hover { color: var(--pine-deep); text-decoration: underline; }

/* --- Two-column lesson shell --------------------------------------------
   A lesson runs to twenty numbered sections. Below 82rem the inline contents
   block above is the only wayfinding, which means a student who has scrolled
   past it has no idea where they are. From 82rem there is unused margin either
   side of the 62rem reading column, so the contents move into a sticky rail
   there and the inline block steps aside. The reading measure does not change:
   the left column stays at the width it already had.
   ------------------------------------------------------------------------- */
.lesson-rail { display: none; }

@media (min-width: 82rem) {
  .wrap--lesson.lesson__layout {
    width: min(100% - 3rem, 84rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--s5);
    align-items: start;
  }
  .lesson__main { min-width: 0; }

  /* The inline contents block is now redundant on screen, but it is still the
     only contents list in print, so it is hidden rather than removed. */
  .lesson__main > .lesson-contents { display: none; }

  .lesson-rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--s4));
    max-height: calc(100dvh - var(--header-h) - var(--s6));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-inline-start: var(--s4);
    border-inline-start: 1px solid var(--rule);
  }
}

.lesson-rail__title {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-faint);
  margin: 0 0 var(--s3);
}
.lesson-rail__phase {
  margin: var(--s4) 0 var(--s2);
  font-family: var(--font-ui); font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.lesson-rail__phase:first-of-type { margin-top: 0; }
.lesson-rail__phase a { color: var(--gold); text-decoration: none; }
.lesson-rail__phase a:hover { color: var(--pine-deep); }
.lesson-rail__list {
  list-style: none;
  margin: 0 0 var(--s3); padding: 0;
  font-family: var(--font-ui); font-size: 0.78rem;
}
.lesson-rail__list li { margin: 0; max-width: none; }
.lesson-rail__list a {
  display: block;
  padding: 0.3rem 0 0.3rem var(--s4);
  margin-inline-start: -1px;
  border-inline-start: 2px solid transparent;
  line-height: 1.4;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.lesson-rail__num {
  display: inline-block;
  min-width: 1.5em;
  margin-inline-end: 0.3em;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--rule-strong);
}
.lesson-rail__list a:hover { color: var(--pine-deep); }
.lesson-rail__list a[aria-current="true"] {
  color: var(--pine-deep);
  font-weight: 650;
  border-inline-start-color: var(--pine);
}
.lesson-rail__list a[aria-current="true"] .lesson-rail__num { color: var(--pine); }

@media print {
  .lesson-rail { display: none; }
  .lesson__main > .lesson-contents { display: block; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
/* --- Phases ---------------------------------------------------------------
   A lesson runs Learn, What the examiner wants, Practise, Write a full answer,
   Consolidate. The phase heading is the loudest thing in the body; sections
   sit under it. This is what stops twenty-five equal headings reading as one
   undifferentiated list.
   ------------------------------------------------------------------------- */
.lesson-phase { scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.lesson-phase + .lesson-phase { margin-top: var(--s8); }

.lesson-phase__title {
  display: flex; align-items: center; gap: var(--s3);
  margin: 0 0 var(--s2);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--gold-edge);
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t-3); letter-spacing: -.015em;
}
.lesson-phase__step {
  flex: none; width: 1.7rem; height: 1.7rem;
  display: inline-grid; place-items: center;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 700;
  color: #fff; background: var(--pine);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}

.lesson-section { padding-top: var(--s6); scroll-margin-top: calc(var(--header-h) + var(--s4)); }
.lesson-section + .lesson-section { border-top: 1px solid var(--rule); }

/* --- The spine ------------------------------------------------------------
   The teaching, the worked example and the practice question are why the page
   exists. They are set larger, on their own ground, so the eye finds them
   before it finds the flashcards.
   ------------------------------------------------------------------------- */
.lesson-section--primary {
  margin-top: var(--s5);
  padding: var(--s5) var(--s6) var(--s6);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-inline-start: 4px solid var(--pine);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.lesson-section--primary + .lesson-section,
.lesson-section + .lesson-section--primary { border-top: 0; }
.lesson-section--primary > .lesson-section__title { font-size: var(--t-2); }
.lesson-section--primary > .lesson-section__title .lesson-section__num {
  color: #fff; background: var(--pine); border-color: var(--pine);
}

/* --- Reference sections ---------------------------------------------------
   Marking guidance, the self-assessment checklist and the further revision
   task are standing guidance rather than lesson content: a student consults
   them, they do not read them again in every lesson. Collapsed by default,
   never removed, and forced open for print.
   ------------------------------------------------------------------------- */
.lesson-section--reference { padding-top: var(--s5); }
.lesson-section--reference > summary {
  cursor: pointer;
  list-style: none;
  align-items: center;
}
.lesson-section--reference > summary::-webkit-details-marker { display: none; }
.lesson-section--reference > summary::after {
  content: "";
  width: 0.5rem; height: 0.5rem; flex: none;
  margin-inline-start: auto;
  border-right: 2px solid var(--ink-faint);
  border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--ease);
}
.lesson-section--reference[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
.lesson-section--reference > summary:hover { color: var(--pine-deep); }
.lesson-section--reference > summary .lesson-section__num {
  color: var(--ink-faint); background: var(--paper-sunk); border-color: var(--rule);
}
.lesson-section__hint {
  font-family: var(--font-ui); font-size: 0.64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint);
  padding: 0.15rem 0.5rem;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.lesson-section--reference > .lesson-section__content { padding-top: var(--s4); }

@media print {
  .lesson-section--reference > .lesson-section__content { display: block !important; }
}

.lesson-section__title {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s4);
}
/* Section numbers repeat the arched plaque used by every icon on the site,
   which is what keeps a lesson page reading as the same product as the home
   page rather than as a bare document. */
.lesson-section__num {
  flex: none; width: 2rem; height: 2rem;
  display: inline-grid; place-items: center;
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700;
  color: var(--pine-deep); background: var(--pine-tint);
  border: 1px solid var(--pine-edge);
  border-radius: 46% 46% var(--radius-sm) var(--radius-sm) / 38% 38% var(--radius-sm) var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Objectives and vocabulary
   ========================================================================== */
.objectives { list-style: none; padding: 0; }
.objectives__item { max-width: none; }
.objectives label {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  cursor: pointer; transition: background .12s var(--ease);
}
.objectives label:hover { background: var(--paper-sunk); }
.objectives input:checked + span { color: var(--ink-faint); text-decoration: line-through; }

.vocab {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin-bottom: var(--s3);
}
.vocab__item {
  padding: var(--s3) var(--s4);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--pine);
  border-radius: var(--radius);
}
.vocab__term {
  display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap;
  font-family: var(--font-ui); font-weight: 700; color: var(--ink-strong);
}
.vocab__ar { font-family: var(--font-ar); font-size: 1.4em; color: var(--pine); }
.vocab__def {
  margin: var(--s1) 0 0; font-size: 0.9rem; line-height: 1.6;
  color: var(--ink-soft); max-width: none;
}
.vocab__link { font-family: var(--font-ui); font-size: 0.84rem; }

/* ==========================================================================
   Evidence — gold, because quotation is what lifts an answer to the top band
   ========================================================================== */
.evidence {
  position: relative;
  padding: var(--s5) var(--s6);
  margin: 0 0 var(--s5);
  background: var(--gold-tint);
  border: 1px solid var(--gold-edge);
  border-radius: var(--radius-lg);
}
.evidence .arabic-block {
  background: rgba(255,255,255,.6);
  border-color: var(--gold-edge);
}
.evidence__quote {
  border: 0; padding: 0; margin: 0 0 var(--s3);
  font-style: normal; color: var(--ink);
}
.evidence__quote p {
  font-size: var(--t-1); line-height: 1.65; margin: 0;
}
.evidence__quote p::before { content: "\201C"; color: var(--gold); }
.evidence__quote p::after  { content: "\201D"; color: var(--gold); }
.evidence__ref {
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--gold);
  margin: 0;
}
.evidence__comment {
  margin: var(--s4) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--gold-edge);
  font-size: 0.9rem; color: var(--ink-soft);
}

/* ==========================================================================
   Answer frames — the taught structures
   ========================================================================== */
.answer-frame {
  padding: var(--s6);
  margin-bottom: var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--pine-edge);
  border-top: 3px solid var(--pine);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.answer-frame__title { color: var(--pine-deep); font-size: var(--t-1); margin-bottom: var(--s2); }
.answer-frame__lede {
  font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft);
  margin-bottom: var(--s5); max-width: none;
}
.answer-frame__parts { display: grid; gap: 0; margin: 0; }
.answer-frame__part {
  display: grid; grid-template-columns: minmax(8rem, 11rem) 1fr; gap: var(--s5);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.answer-frame__part:last-child { border-bottom: 0; padding-bottom: 0; }
.answer-frame__part dt {
  font-family: var(--font-ui); font-weight: 700; font-size: 0.88rem;
  color: var(--pine-deep);
}
.answer-frame__part dd { margin: 0; }
.answer-frame__hint { display: block; font-size: 0.88rem; color: var(--ink-faint); }
.answer-frame__value { display: block; margin-top: var(--s2); }
@media (max-width: 42rem) {
  .answer-frame__part { grid-template-columns: 1fr; gap: var(--s1); }
}

/* ==========================================================================
   Boundary note
   ========================================================================== */
.boundary {
  padding: var(--s5);
  margin-bottom: var(--s5);
  background: var(--clay-tint);
  border: 1px solid var(--clay-edge);
  border-radius: var(--radius-lg);
}
.boundary__title {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--clay); font-size: var(--t-0); margin-bottom: var(--s2);
}
.boundary__label {
  font-family: var(--font-ui); font-size: 0.84rem; font-weight: 650;
  margin-bottom: var(--s2);
}
.boundary__list { font-size: 0.92rem; margin-bottom: 0; }

/* ==========================================================================
   Beyond the obvious
   ========================================================================== */
.beyond { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.beyond__row {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: var(--s5);
  align-items: start;
  padding: var(--s4); border-radius: var(--radius);
}
.beyond__row--obvious {
  background: var(--paper-sunk); border: 1px dashed var(--rule-strong);
}
.beyond__row--stronger {
  background: var(--sage-tint); border: 1px solid var(--sage-edge);
  border-left: 3px solid var(--sage);
}
.beyond__tag {
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
  padding-top: 0.15rem;
}
.beyond__row--stronger .beyond__tag { color: var(--sage); }
.beyond__row p { margin: 0; }
.beyond__note {
  font-size: 0.84rem; font-style: italic; color: var(--ink-faint);
  margin-top: var(--s2);
}
@media (max-width: 42rem) {
  .beyond__row { grid-template-columns: 1fr; gap: var(--s2); }
}

/* ==========================================================================
   Misconceptions
   ========================================================================== */
.misconceptions { display: grid; gap: var(--s3); }
.misconception {
  padding: var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.misconception p { margin-bottom: var(--s3); max-width: none; }
.misconception p:last-child { margin-bottom: 0; }
.misconception__tag {
  display: inline-block;
  font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 0.1rem 0.5rem; border-radius: 999px; margin-right: var(--s2);
  color: var(--clay); background: var(--clay-tint); border: 1px solid var(--clay-edge);
}
.misconception__tag--fact {
  color: var(--sage); background: var(--sage-tint); border-color: var(--sage-edge);
}
.misconception__think { color: var(--ink-soft); }
.misconception__fact  { color: var(--ink); }

/* ==========================================================================
   Exam question — deliberately the most prominent block on the page
   ========================================================================== */
.exam-q {
  padding: var(--s6);
  margin-bottom: var(--s5);
  background: var(--paper-raised);
  border: 2px solid var(--ink-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.exam-q__label {
  display: inline-block; margin: 0 0 var(--s5);
  padding: 0.3rem 0.75rem;
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: #fff; background: var(--ink-strong);
  border-radius: var(--radius-sm);
}
.exam-q__part {
  display: grid; grid-template-columns: 2rem 1fr auto; gap: var(--s3);
  align-items: baseline; max-width: none;
  padding-bottom: var(--s4); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--rule);
}
.exam-q__part:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.exam-q__letter { font-family: var(--font-ui); font-weight: 700; color: var(--ink-strong); }
.exam-q__stem { font-size: var(--t-1); line-height: 1.5; }
.exam-q__marks {
  font-family: var(--font-ui); font-weight: 700; white-space: nowrap;
  color: var(--ink-strong); font-variant-numeric: tabular-nums;
}
.exam-q__ao {
  grid-column: 2;
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
  letter-spacing: .07em; color: var(--ink-faint);
}
.exam-q__note {
  margin: var(--s5) 0 0; padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: 0.8rem; font-style: italic; color: var(--ink-faint);
}
@media (max-width: 42rem) {
  .exam-q__part { grid-template-columns: 1.6rem 1fr; }
  .exam-q__marks { grid-column: 2; }
}

/* ==========================================================================
   Planner
   ========================================================================== */
.planner {
  padding: var(--s6);
  margin-bottom: var(--s5);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
.planner__prompts { margin-bottom: var(--s5); }
.planner__prompts h4 { font-size: 0.95rem; }
.planner__prompts ol { font-size: 0.92rem; margin-bottom: 0; }
.planner__boundary {
  padding: var(--s3) var(--s4); margin-bottom: var(--s5);
  font-size: 0.88rem; max-width: none;
  background: var(--clay-tint);
  border-left: 3px solid var(--clay);
  border-radius: var(--radius-sm);
}
.planner__field { margin-bottom: var(--s5); }
.planner__field label {
  display: block; margin-bottom: var(--s2);
  font-weight: 650; font-size: 0.88rem; color: var(--ink-strong);
}
/* Sized to approximate the real paper's answer space. */
.planner__answer--short { min-height: 8rem; }
.planner__answer--long  { min-height: 24rem; }
.planner__hint { margin: var(--s2) 0 0; font-size: 0.8rem; color: var(--ink-faint); }
.planner__saved {
  margin: 0; min-height: 1.2em;
  font-family: var(--font-ui); font-size: 0.76rem; font-weight: 600; color: var(--sage);
}

/* ==========================================================================
   Indicative answer
   ========================================================================== */
.indicative {
  margin-bottom: var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.indicative > summary {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline;
  padding: var(--s4) var(--s5);
  font-family: var(--font-ui); cursor: pointer;
  background: var(--paper-sunk);
}
.indicative[open] > summary { border-bottom: 1px solid var(--rule); }
.indicative__summary-label { font-weight: 650; color: var(--pine-deep); }
.indicative__summary-note { font-size: 0.8rem; color: var(--ink-faint); }
.indicative__body { padding: var(--s5); }
.indicative__banner {
  padding: var(--s3) var(--s4); margin-bottom: var(--s5); max-width: none;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 650;
  color: var(--pine-deep); background: var(--pine-tint);
  border-left: 3px solid var(--pine); border-radius: var(--radius-sm);
}
.indicative__commentary {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}
.indicative__commentary h4 { font-size: 0.95rem; color: var(--ink-soft); }

/* ==========================================================================
   Marking guidance
   ========================================================================== */
.marking { margin-bottom: var(--s5); }
.levels { margin-bottom: var(--s4); }
.levels th:first-child { width: 4rem; }
.levels td:nth-child(2) {
  width: 6rem; white-space: nowrap;
  font-family: var(--font-ui); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink-strong);
}
.levels tbody th {
  font-size: var(--t-1); color: var(--pine);
  font-variant-numeric: tabular-nums;
}
.levels ul { margin: 0; padding-left: var(--s4); font-size: 0.9rem; }
.levels li { margin: 0 0 var(--s1); }
.levels__note, .marking__note {
  padding: var(--s3) var(--s4); max-width: none;
  font-size: 0.88rem;
  background: var(--paper-sunk); border-radius: var(--radius);
}

/* ==========================================================================
   Self-check
   ========================================================================== */
.self-check { list-style: none; padding: 0; }
.self-check li { max-width: none; margin-bottom: 0; }
.self-check label {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
  font-size: 0.94rem; cursor: pointer;
  transition: background .12s var(--ease);
}
.self-check label:hover { background: var(--paper-sunk); }
.self-check input:checked + span { color: var(--sage); }
.self-check__note {
  margin-top: var(--s3); font-size: 0.84rem;
  font-style: italic; color: var(--ink-faint);
}

/* ==========================================================================
   Flashcards
   ========================================================================== */
.flashcards {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.flashcard {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.flashcard:hover { border-color: var(--pine-edge); box-shadow: var(--shadow-sm); }
.flashcard__btn {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5);
  background: none; border: 0;
  font-family: inherit; font-size: inherit; color: inherit;
}
.flashcard__front { font-weight: 650; color: var(--ink-strong); }
.flashcard__prompt {
  font-family: var(--font-ui); font-size: 0.74rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .06em; color: var(--pine);
}
.flashcard__back {
  padding: var(--s4) var(--s5) var(--s5);
  margin-top: calc(var(--s2) * -1);
  font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft);
  border-top: 1px dashed var(--rule);
}

/* ==========================================================================
   Completion and navigation
   ========================================================================== */
.lesson-complete {
  margin-top: var(--s8); padding: var(--s6);
  background: var(--pine-tint);
  border: 1px solid var(--pine-edge);
  border-radius: var(--radius-xl);
}
.lesson-complete__control {
  display: flex; gap: var(--s3); align-items: center;
  font-family: var(--font-ui); font-size: var(--t-0); font-weight: 620;
  color: var(--ink-strong); cursor: pointer;
}
.lesson-complete__note {
  margin: var(--s3) 0 0; font-size: 0.82rem; color: var(--ink-soft);
}

.lesson-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4);
  margin-top: var(--s7);
}
.lesson-nav__link {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s5);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  text-decoration: none; color: inherit;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.lesson-nav__link:hover {
  border-color: var(--pine-edge); box-shadow: var(--shadow-sm); color: inherit;
}
.lesson-nav__link--next { text-align: right; }
.lesson-nav__dir {
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint);
}
.lesson-nav__id {
  font-family: var(--font-ui); font-size: 0.76rem; font-weight: 700;
  color: var(--pine); letter-spacing: .04em;
}
.lesson-nav__title { font-size: 0.95rem; line-height: 1.4; }
@media (max-width: 42rem) {
  .lesson-nav { grid-template-columns: 1fr; }
  .lesson-nav__link--next { text-align: left; }
}