/* ─────────────────────────────────────────────────────────────────
   IELTS Reading — page + lesson surfaces.
   Page bg stays dark espresso (from ielts-shell.css). Content sits
   on warm cream surfaces — book pages on a coffee-shop shelf.
   ───────────────────────────────────────────────────────────── */

/* Cream + ink palette for content (overrides nothing outside .ielts-page). */
.ielts-page {
  --paper:       #F5EBD3;
  --paper-tint:  #EFE2C4;
  --paper-deep:  #E7D6B0;
  --paper-ink:        #1F1812;
  --paper-ink-soft:   #4A3F33;
  --paper-ink-mute:   #7A6A55;
  --paper-honey:      #B57A2E;
  --paper-ember:      #B6442C;
  --paper-line:  rgba(31, 24, 18, .12);
  --paper-line-strong: rgba(31, 24, 18, .25);
}

/* ─── Reading page (lessons grid + practice) ─────────────────── */
.reading-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.rd-head {
  margin-bottom: 2.4rem;
}
.rd-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ielts-honey, #D9A268);
  margin-bottom: .6rem;
}
.rd-title {
  font-family: 'Source Serif 4', 'Tiempos', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  letter-spacing: -.02em;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0;
  line-height: 1.05;
}

/* Sections within the reading page */
.rd-section { margin-bottom: 3.5rem; }
.rd-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--ielts-line, rgba(242,230,204,.10));
}
.rd-section-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--ielts-ink, #F2E6CC);
  margin: 0;
  letter-spacing: -.01em;
}
.rd-section-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  color: var(--ielts-ink-soft, #B6A484);
}

/* ─── Lessons grid (7 rows × 2 cols) ─────────────────────────── */
.rd-lessons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.rd-lesson-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.3rem 1.6rem;
  background: var(--paper, #F5EBD3);
  border: 1px solid transparent;
  border-radius: 12px;
  text-decoration: none;
  color: var(--paper-ink, #1F1812);
  transition: transform .2s cubic-bezier(.2,.8,.2,1),
              box-shadow .2s, border-color .2s, background .2s;
  box-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 12px 26px -16px rgba(0,0,0,.45);
}
.rd-lesson-card:hover {
  transform: translateY(-3px);
  background: var(--paper-tint, #EFE2C4);
  border-color: var(--paper-honey, #B57A2E);
  box-shadow:
    0 1px 0 rgba(0,0,0,.18),
    0 22px 40px -16px rgba(0,0,0,.55);
}
.rd-lesson-num {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: .9;
  color: var(--paper-honey, #B57A2E);
  letter-spacing: -.02em;
  font-variant-numeric: oldstyle-nums;
  align-self: center;
}
.rd-lesson-body {
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0;
}
.rd-lesson-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--paper-ink, #1F1812);
  letter-spacing: -.005em;
}
.rd-lesson-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.4;
}
.rd-lesson-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .72rem;
  color: var(--paper-ink-mute, #7A6A55);
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: .15rem;
}

/* ─── Practice placeholder ─────────────────────────────────── */
.rd-practice-placeholder {
  padding: 2.4rem 1.5rem;
  background: var(--paper, #F5EBD3);
  border: 1px dashed var(--paper-line-strong, rgba(31,24,18,.25));
  border-radius: 12px;
  text-align: center;
  color: var(--paper-ink-soft, #4A3F33);
}
.rd-placeholder-eyebrow {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .55rem;
}
.rd-practice-placeholder p { margin: 0; font-size: .95rem; }

/* ─── Lesson page (single cream "book page" surface) ─────────── */
.rd-lesson-page {
  max-width: 880px;
  margin: 2.4rem auto 4rem;
  padding: 3rem 3.6rem 4rem;
  background: var(--paper, #F5EBD3);
  border-radius: 14px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(0,0,0,.16),
    0 30px 60px -28px rgba(0,0,0,.55);
  color: var(--paper-ink, #1F1812);
}

.rd-lesson-back {
  display: inline-flex; align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 500;
  color: var(--paper-ink-soft, #4A3F33);
  text-decoration: none;
  margin-bottom: 1.4rem;
  letter-spacing: .005em;
  transition: color .15s;
}
.rd-lesson-back:hover { color: var(--paper-honey, #B57A2E); }

.rd-lesson-head {
  margin-bottom: 2.4rem;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--paper-line, rgba(31,24,18,.12));
}
.rd-lesson-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .8rem;
}
.rd-lesson-title-big {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.8vw, 3.2rem);
  line-height: 1.05;
  color: var(--paper-ink, #1F1812);
  margin: 0 0 .5rem;
  letter-spacing: -.022em;
}
.rd-lesson-subtitle {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.4;
  margin: 0 0 1.2rem;
}
.rd-lesson-meta-line {
  display: flex; gap: 1.2rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  color: var(--paper-ink-mute, #7A6A55);
  font-weight: 500;
}

/* ─── Lesson body — reading typography ─────────────────────── */
.rd-lesson-body { /* container only, blocks below carry the styling */ }

.rd-block { margin: 0 0 1.3rem; }

.rd-lead {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--paper-ink, #1F1812);
  margin: 0 0 2.2rem;
  letter-spacing: .002em;
}

.rd-h2 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.15;
  color: var(--paper-ink, #1F1812);
  margin: 2.6rem 0 1rem;
  letter-spacing: -.012em;
  scroll-margin-top: 100px;
}
.rd-h2:first-child { margin-top: 0; }

.rd-p {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--paper-ink, #1F1812);
  letter-spacing: -.003em;
}
.rd-p b { font-weight: 600; }
.rd-p i { font-style: italic; }

.rd-list {
  margin: 0 0 1.4rem;
  padding-left: 1.6rem;
}
.rd-list li {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--paper-ink, #1F1812);
  margin-bottom: .55rem;
  padding-left: .25rem;
}
.rd-list-bullet { list-style: none; padding-left: 0; }
.rd-list-bullet li { position: relative; padding-left: 1.6rem; }
.rd-list-bullet li::before {
  content: '·';
  position: absolute; left: .5rem; top: -.05em;
  font-size: 1.6em; font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  line-height: 1;
}
.rd-list-numbered {
  list-style: decimal;
  color: var(--paper-honey, #B57A2E);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
}
.rd-list-numbered li {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
}

/* Callout: vertical accent rule on the left, no boxed feel. */
.rd-callout {
  position: relative;
  padding: 1rem 1.2rem 1rem 1.6rem;
  margin: 1.6rem 0 1.8rem;
  background: rgba(181, 122, 46, .07);
  border-radius: 6px;
  border-left: 3px solid var(--paper-honey, #B57A2E);
}
.rd-callout-mistake {
  background: rgba(182, 68, 44, .08);
  border-left-color: var(--paper-ember, #B6442C);
}
.rd-callout-tip {
  background: rgba(31, 24, 18, .05);
  border-left-color: var(--paper-ink-mute, #7A6A55);
}
.rd-callout-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .35rem;
}
.rd-callout-mistake .rd-callout-label { color: var(--paper-ember, #B6442C); }
.rd-callout-tip .rd-callout-label { color: var(--paper-ink-soft, #4A3F33); }
.rd-callout-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper-ink, #1F1812);
}
.rd-callout-body b { font-weight: 600; }
.rd-callout-body i { font-style: italic; }

.rd-quote {
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--paper-honey, #B57A2E);
  margin: 1.8rem 0;
  padding-left: 1.4rem;
  border-left: 2px solid var(--paper-honey, #B57A2E);
}

.rd-divider {
  border: 0; height: 1px;
  background: var(--paper-line, rgba(31,24,18,.12));
  margin: 2.4rem 0;
}

.rd-example {
  background: var(--paper-tint, #EFE2C4);
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  border-radius: 10px;
  padding: 1.4rem 1.6rem 1.2rem;
  margin: 2rem 0;
}
.rd-example-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-ember, #B6442C);
  margin-bottom: .55rem;
}
.rd-example-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  margin: 0 0 .6rem;
  color: var(--paper-ink, #1F1812);
}
.rd-example-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--paper-ink, #1F1812);
  margin-bottom: .8rem;
}
.rd-example-annotations {
  margin: .6rem 0 0;
  padding-left: 1.4rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88rem;
  color: var(--paper-ink-soft, #4A3F33);
}
.rd-example-annotations li { margin-bottom: .35rem; line-height: 1.55; }

/* ─── Inline mark spans (used by passage + walkthrough) ─────── */
.rd-mark {
  background: rgba(181, 122, 46, .15);
  border-bottom: 1.5px solid rgba(181, 122, 46, .55);
  padding: 0 .15em;
  border-radius: 2px;
  transition: background .25s, border-color .25s, opacity .25s, color .25s;
}
.rd-mark[data-kind="synonym"] {
  background: rgba(182, 68, 44, .12);
  border-bottom-color: rgba(182, 68, 44, .55);
}
.rd-mark[data-kind="trap"] {
  background: rgba(182, 68, 44, .14);
  border-bottom: 1.5px dashed rgba(182, 68, 44, .7);
}
.rd-mark[data-kind="topic"] {
  background: rgba(181, 122, 46, .22);
  border-bottom-color: rgba(181, 122, 46, .8);
  font-weight: 500;
}
.rd-mark[data-kind="reference"] {
  background: rgba(31, 24, 18, .07);
  border-bottom-color: rgba(31, 24, 18, .35);
}

/* ─── passage block (annotated, static) ─────────────────────── */
.rd-passage {
  background: var(--paper-tint, #EFE2C4);
  border-radius: 12px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 2rem 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
}
.rd-passage-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-ember, #B6442C);
  margin-bottom: .55rem;
}
.rd-passage-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--paper-ink, #1F1812);
  margin: 0 0 .35rem;
  letter-spacing: -.005em;
}
.rd-passage-source {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-size: .8rem;
  color: var(--paper-ink-mute, #7A6A55);
  margin-bottom: .9rem;
}
.rd-passage-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1.4rem;
}
.rd-passage-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--paper-ink, #1F1812);
}
.rd-passage-body p { margin: 0 0 .8rem; }
.rd-passage-body p:last-child { margin-bottom: 0; }

.rd-passage-notes {
  list-style: none;
  margin: 0; padding: 0;
  border-left: 1px solid var(--paper-line, rgba(31,24,18,.12));
  padding-left: 1rem;
  display: flex; flex-direction: column;
  gap: .6rem;
}
.rd-passage-note {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  line-height: 1.45;
  color: var(--paper-ink-soft, #4A3F33);
}
.rd-passage-note-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--paper-honey, #B57A2E);
  color: var(--paper, #F5EBD3);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: .85rem;
  flex-shrink: 0;
}
.rd-passage-note-synonym .rd-passage-note-num { background: var(--paper-ember, #B6442C); }
.rd-passage-note-trap    .rd-passage-note-num { background: var(--paper-ember, #B6442C); }
.rd-passage-note-text b { font-weight: 600; }

/* ─── walkthrough block (interactive — click steps to highlight) ── */
.rd-walkthrough {
  background: var(--paper-tint, #EFE2C4);
  border-radius: 12px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 2rem 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
}
.rd-wt-intro {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.55;
  margin: 0 0 .9rem;
}
.rd-wt-question {
  background: var(--paper, #F5EBD3);
  padding: .8rem 1rem;
  border-radius: 8px;
  margin: 0 0 1rem;
  border-left: 3px solid var(--paper-ember, #B6442C);
}
.rd-wt-q-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-ember, #B6442C);
  margin-bottom: .25rem;
}
.rd-wt-question p {
  margin: 0;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--paper-ink, #1F1812);
}

.rd-wt-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1.4rem;
}
.rd-wt-passage {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--paper-ink, #1F1812);
  background: var(--paper, #F5EBD3);
  padding: 1.1rem 1.3rem;
  border-radius: 8px;
}
.rd-wt-passage p { margin: 0 0 .8rem; }
.rd-wt-passage p:last-child { margin-bottom: 0; }

/* When a step is clicked, _wireInteractive() adds .is-lit to every
   passage mark whose data-step matches. A JS-applied class works for
   ANY number of steps — the old enumerated [data-active="N"] rules
   only covered steps 1–5, so longer walkthroughs silently failed to
   highlight. The selector carries .rd-wt-passage / .rd-wt-tap-marked
   so it out-specifies the "marks invisible by default" rule below.
   Highlight is intentionally punchy — at 35% honey the effect was
   too quiet to read as "this is the bit the step is pointing at."
   Students were clicking and getting no clear visual feedback. */
.rd-walkthrough .rd-wt-passage .rd-mark.is-lit,
.rd-walkthrough .rd-wt-tap-marked .rd-mark.is-lit {
  background: rgba(181, 122, 46, .22);
  border-bottom: 1.5px solid rgba(181, 122, 46, .75);
  border-radius: 2px;
  padding: 0 .12em;
}

.rd-wt-steps {
  display: flex; flex-direction: column;
  gap: .5rem;
}
/* Strategy walkthroughs without a passage — steps span the full width
   instead of sitting in a 280px right column. No empty box on the left. */
.rd-wt-steps-only {
  margin-top: .8rem;
  width: 100%;
}
.rd-wt-steps-only .rd-wt-step {
  background: var(--paper, #F5EBD3);
}
.rd-walkthrough[data-no-passage="true"] .rd-wt-steps-only .rd-wt-step-text {
  font-size: .88rem;
}
.rd-wt-step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: .65rem;
  align-items: start;
  text-align: left;
  padding: .7rem .85rem;
  background: var(--paper, #F5EBD3);
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.rd-wt-step:hover {
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
}
.rd-wt-step.is-active {
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
}
.rd-wt-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--paper-tint, #EFE2C4);
  color: var(--paper-honey, #B57A2E);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: .9rem;
  flex-shrink: 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  transition: background .15s, color .15s;
}
.rd-wt-step.is-active .rd-wt-step-num {
  background: var(--paper-honey, #B57A2E);
  color: var(--paper, #F5EBD3);
  border-color: var(--paper-honey, #B57A2E);
}
.rd-wt-step-body {
  display: flex; flex-direction: column; gap: .15rem;
  min-width: 0;
}
.rd-wt-step-label {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: .98rem;
  color: var(--paper-ink, #1F1812);
  line-height: 1.2;
  letter-spacing: -.005em;
}
.rd-wt-step-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.45;
}

/* ─── walkthrough attempt gate (try-first MCQ) ────────────────
   When a walkthrough has an attempt block, the steps + passage
   sit behind a soft veil until the student picks the right
   option (or hits "Show explanation"). This pushes engagement
   without feeling like a graded quiz. */
.rd-wt-attempt {
  background: var(--paper, #F5EBD3);
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin: 0 0 1rem;
  position: relative;
}
.rd-wt-attempt-eyebrow {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .45rem;
}
.rd-wt-attempt-prompt {
  margin: 0 0 .8rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .98rem;
  color: var(--paper-ink, #1F1812);
  font-style: italic;
}
.rd-wt-attempt-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.rd-wt-opt {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: .55rem;
  align-items: center;
  text-align: left;
  padding: .65rem .8rem;
  background: var(--paper-tint, #EFE2C4);
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .88rem;
  color: var(--paper-ink, #1F1812);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.rd-wt-opt:hover {
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
}
.rd-wt-opt-mark {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--paper-line-strong, rgba(31,24,18,.30));
  background: transparent;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.rd-wt-opt.is-picked .rd-wt-opt-mark {
  border-color: currentColor;
  background: currentColor;
  box-shadow: inset 0 0 0 2px var(--paper, #F5EBD3);
}
.rd-wt-opt.is-right {
  border-color: #2F7D4F;
  background: rgba(47, 125, 79, .10);
  color: #2F7D4F;
}
.rd-wt-opt.is-wrong {
  border-color: var(--paper-ember, #B6442C);
  background: rgba(182, 68, 44, .08);
  color: var(--paper-ember, #B6442C);
}
.rd-wt-attempt-feedback {
  margin-top: .8rem;
  padding-top: .8rem;
  border-top: 1px solid var(--paper-line, rgba(31,24,18,.10));
}
.rd-wt-attempt-msg {
  margin: 0 0 .55rem;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--paper-ink, #1F1812);
}
.rd-wt-attempt[data-state="right"] .rd-wt-attempt-msg { color: #2F7D4F; }
.rd-wt-attempt[data-state="wrong"] .rd-wt-attempt-msg { color: var(--paper-ember, #B6442C); }
.rd-wt-attempt-actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.rd-wt-attempt-retry,
.rd-wt-attempt-reveal {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 500;
  padding: .4rem .8rem;
  border-radius: 6px;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  background: var(--paper-tint, #EFE2C4);
  color: var(--paper-ink, #1F1812);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.rd-wt-attempt-retry:hover,
.rd-wt-attempt-reveal:hover {
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
}
/* Hide retry once student answered correctly. */
.rd-wt-attempt[data-state="right"] .rd-wt-attempt-retry,
.rd-wt-attempt[data-state="revealed"] .rd-wt-attempt-retry { display: none; }
.rd-wt-attempt[data-state="right"] .rd-wt-attempt-reveal,
.rd-wt-attempt[data-state="revealed"] .rd-wt-attempt-reveal { display: none; }

/* Inside walkthroughs, passage marks are INVISIBLE by default. They
   only appear when their matching step button is clicked. This means:
     · Idle (no step active): plain prose, no spoilers.
     · Step N active: only marks with data-step="N" are highlighted.
     · Step N active but no matching mark in passage: nothing highlights
       and nothing fades — the passage stays clean.
   The static .rd-passage block keeps its baseline highlights — those
   are guided annotations, not interactive walkthroughs. */
.rd-walkthrough .rd-wt-passage .rd-mark,
.rd-walkthrough .rd-wt-tap-marked .rd-mark {
  background: transparent;
  border-bottom-color: transparent;
  padding: 0;
  font-weight: inherit;
  opacity: 1;
  color: inherit;
}

/* Only the explanation steps are veiled while locked. The passage stays
   visible because the student needs it to answer (scan, type, tap). */
.rd-walkthrough[data-locked="true"] .rd-wt-steps {
  filter: blur(2.5px) saturate(.7);
  opacity: .50;
  pointer-events: none;
  user-select: none;
  transition: filter .25s, opacity .25s;
}
.rd-walkthrough[data-locked="false"] .rd-wt-steps {
  filter: none;
  opacity: 1;
  pointer-events: auto;
  user-select: auto;
  transition: filter .25s, opacity .25s;
}
.rd-wt-veil {
  display: none;
  margin-top: .7rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .76rem;
  color: var(--paper-ink-mute, #6B5C45);
  letter-spacing: .04em;
  text-align: center;
  font-style: italic;
}
.rd-walkthrough[data-locked="true"] .rd-wt-veil { display: block; }

/* ─── tap mode: passage rendered as clickable sentences ──────── */
.rd-wt-passage-tap {
  cursor: default;
}
.rd-wt-tap-sentences {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--paper-ink, #1F1812);
}
.rd-wt-tap-sent {
  display: inline;
  background: rgba(31, 24, 18, .025);
  border: 0;
  border-bottom: 1.5px dashed rgba(31, 24, 18, .22);
  padding: 1px 3px;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: 2px;
  transition: background .15s, color .15s, border-bottom-color .15s;
}
.rd-wt-tap-sent:hover {
  background: rgba(181, 122, 46, .15);
  border-bottom-color: var(--paper-honey, #B57A2E);
}
.rd-wt-tap-sent.is-wrong {
  background: rgba(182, 68, 44, .15);
  color: var(--paper-ember, #B6442C);
  border-bottom-color: var(--paper-ember, #B6442C);
  cursor: not-allowed;
}
.rd-wt-tap-sent.is-right {
  background: rgba(47, 125, 79, .18);
  color: #2F7D4F;
  border-bottom-color: #2F7D4F;
  font-weight: 500;
  cursor: default;
}
.rd-wt-tap-marked {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.72;
  color: var(--paper-ink, #1F1812);
}
.rd-wt-tap-marked p { margin: 0 0 .8rem; }
.rd-wt-tap-marked p:last-child { margin-bottom: 0; }

/* ─── type mode: short-answer text input ─────────────────────── */
.rd-wt-attempt-type {
  display: flex; align-items: flex-end; gap: .55rem;
  flex-wrap: wrap;
}
.rd-wt-type-field {
  display: flex; flex-direction: column; gap: .3rem;
  flex: 1 1 140px; min-width: 140px;
}
.rd-wt-type-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .68rem;
  font-weight: 600;
  color: var(--paper-ink-soft, #4A3F33);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.rd-wt-type-input {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  padding: .55rem .75rem;
  background: var(--paper-tint, #EFE2C4);
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  border-radius: 6px;
  color: var(--paper-ink, #1F1812);
  outline: none;
  transition: border-color .15s, background .15s;
  width: 100%;
  box-sizing: border-box;
}
.rd-wt-type-input:focus {
  border-color: var(--paper-honey, #B57A2E);
  background: var(--paper, #F5EBD3);
}
.rd-wt-type-input.is-right {
  border-color: #2F7D4F;
  background: rgba(47, 125, 79, .08);
  color: #2F7D4F;
}
.rd-wt-type-input.is-wrong {
  border-color: var(--paper-ember, #B6442C);
  background: rgba(182, 68, 44, .06);
}
.rd-wt-type-submit {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-weight: 600;
  padding: .55rem 1rem;
  background: var(--paper-honey, #B57A2E);
  color: var(--paper, #F5EBD3);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
.rd-wt-type-submit:hover { background: #9C691E; }
.rd-wt-attempt[data-state="right"] .rd-wt-type-submit,
.rd-wt-attempt[data-state="revealed"] .rd-wt-type-submit { display: none; }
.rd-wt-attempt[data-state="right"] .rd-wt-type-input,
.rd-wt-attempt[data-state="revealed"] .rd-wt-type-input { pointer-events: none; }

@media (max-width: 640px) {
  .rd-wt-attempt-opts { grid-template-columns: 1fr; }
  .rd-wt-attempt-type { flex-direction: column; align-items: stretch; }
  .rd-wt-type-submit { width: 100%; }
}

/* ─── compare block (two-column comparison) ─────────────────── */
.rd-compare {
  margin: 2rem 0;
}
.rd-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.rd-compare-col {
  background: var(--paper-tint, #EFE2C4);
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
  border-radius: 10px;
  padding: 1rem 1.15rem 1.1rem;
}
.rd-compare-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .55rem;
}
.rd-compare-body {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--paper-ink, #1F1812);
}
.rd-compare-body b { font-weight: 600; }
.rd-compare-body i { font-style: italic; }
.rd-compare-body p { margin: 0 0 .55rem; }
.rd-compare-body p:last-child { margin-bottom: 0; }
.rd-compare-body ul {
  list-style: none;
  margin: 0; padding: 0;
}
.rd-compare-body ul li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .35rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.5;
}
.rd-compare-body ul li::before {
  content: '·';
  position: absolute; left: .25rem; top: -.05em;
  font-size: 1.5em; font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  line-height: 1;
}
.rd-compare-note {
  margin: .6rem 0 0;
  padding-top: .55rem;
  border-top: 1px dashed var(--paper-line-strong, rgba(31,24,18,.18));
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  font-style: italic;
  color: var(--paper-ink-soft, #4A3F33);
  line-height: 1.45;
}
.rd-compare-footnote {
  margin: .8rem 0 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  color: var(--paper-ink-soft, #4A3F33);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* ─── dissect block (clickable paragraph anatomy) ─────────────── */
.rd-dissect {
  background: var(--paper-tint, #EFE2C4);
  border-radius: 12px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 2rem 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
}
.rd-dis-paragraph {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--paper-ink, #1F1812);
  background: var(--paper, #F5EBD3);
  padding: 1.2rem 1.4rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.rd-dis-sent {
  display: inline;
  padding: .15em .25em;
  margin: 0 -.05em;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
  text-align: left;
}
.rd-dis-sent:hover {
  background: rgba(181, 122, 46, .12);
}
.rd-dis-sent.is-active {
  background: rgba(181, 122, 46, .35);
  box-shadow: inset 0 -2px 0 var(--paper-honey, #B57A2E);
}
.rd-dis-sent.rd-dis-sent-topic.is-active        { background: rgba(181, 122, 46, .42); box-shadow: inset 0 -2px 0 var(--paper-honey, #B57A2E); }
.rd-dis-sent.rd-dis-sent-evidence.is-active     { background: rgba(181, 122, 46, .26); box-shadow: inset 0 -2px 0 var(--paper-honey, #B57A2E); }
.rd-dis-sent.rd-dis-sent-detail.is-active       { background: rgba(31, 24, 18, .12);   box-shadow: inset 0 -2px 0 var(--paper-ink-mute, #7A6A55); }
.rd-dis-sent.rd-dis-sent-contrast.is-active     { background: rgba(182, 68, 44, .25);  box-shadow: inset 0 -2px 0 var(--paper-ember, #B6442C); }
.rd-dis-sent.rd-dis-sent-conclusion.is-active   { background: rgba(182, 68, 44, .18);  box-shadow: inset 0 -2px 0 var(--paper-ember, #B6442C); }
.rd-dis-sent.rd-dis-sent-transition.is-active   { background: rgba(31, 24, 18, .15);   box-shadow: inset 0 -2px 0 var(--paper-ink-soft, #4A3F33); }

.rd-dis-panel {
  background: var(--paper, #F5EBD3);
  border-radius: 8px;
  padding: .9rem 1.1rem;
  min-height: 60px;
  border-left: 3px solid var(--paper-line, rgba(31,24,18,.12));
  transition: border-left-color .2s;
}
.rd-dissect[data-active="0"] .rd-dis-panel { border-left-color: var(--paper-line, rgba(31,24,18,.12)); }
.rd-dissect:not([data-active="0"]) .rd-dis-panel { border-left-color: var(--paper-honey, #B57A2E); }
.rd-dis-empty {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  font-style: italic;
  color: var(--paper-ink-mute, #7A6A55);
}
.rd-dis-note-role {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
  margin-bottom: .35rem;
}
.rd-dis-note-contrast .rd-dis-note-role,
.rd-dis-note-conclusion .rd-dis-note-role { color: var(--paper-ember, #B6442C); }
.rd-dis-note-detail .rd-dis-note-role,
.rd-dis-note-transition .rd-dis-note-role { color: var(--paper-ink-soft, #4A3F33); }
.rd-dis-note-text {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--paper-ink, #1F1812);
}
.rd-dis-note-text b { font-weight: 600; }
.rd-dis-note-text i { font-style: italic; }

/* ─── guess block (vocabulary guessing, progressive reveal) ───── */
.rd-guess {
  background: var(--paper-tint, #EFE2C4);
  border-radius: 12px;
  padding: 1.6rem 1.8rem 1.4rem;
  margin: 2rem 0;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.18));
}
.rd-guess-sentence {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--paper-ink, #1F1812);
  background: var(--paper, #F5EBD3);
  padding: 1rem 1.2rem;
  border-radius: 8px;
  margin: 0 0 1rem;
}
.rd-guess-blank {
  display: inline-block;
  min-width: 4em;
  padding: 0 .3em;
  background: rgba(31, 24, 18, .08);
  border-bottom: 2px solid var(--paper-honey, #B57A2E);
  color: transparent;
  border-radius: 3px;
  text-align: center;
  font-style: italic;
  transition: background .25s, color .25s;
}
.rd-guess[data-revealed="true"] .rd-guess-blank {
  background: rgba(181, 122, 46, .35);
  color: var(--paper-ink, #1F1812);
  font-style: normal;
  font-weight: 600;
  min-width: 0;
}

.rd-guess-clues {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
/* The "Hint N" label is rendered via ::before as an inline-flow row
   above the clue text. Originally absolute-positioned with a 2.4rem
   left padding to make room — but "Hint 2" / "Hint 3" in italic serif
   at .82rem overran that reserve and overlapped with the clue body
   (visible as "HintThe word…" / "HintContext…"). Flowing the label as
   its own line removes the geometry guess entirely. */
.rd-guess-clue {
  display: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--paper-ink-soft, #4A3F33);
  padding: .55rem .9rem .65rem .9rem;
  position: relative;
  margin-bottom: .4rem;
  background: var(--paper, #F5EBD3);
  border-radius: 6px;
  border-left: 3px solid var(--paper-honey, #B57A2E);
  animation: rdGuessIn .3s ease-out;
}
.rd-guess-clue::before {
  content: 'Hint ' attr(data-i);
  display: block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--paper-honey, #B57A2E);
  font-weight: 600;
  margin-bottom: .18rem;
}
@keyframes rdGuessIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.rd-guess[data-clue-idx="1"] .rd-guess-clue[data-i="1"],
.rd-guess[data-clue-idx="2"] .rd-guess-clue[data-i="1"],
.rd-guess[data-clue-idx="2"] .rd-guess-clue[data-i="2"],
.rd-guess[data-clue-idx="3"] .rd-guess-clue[data-i="1"],
.rd-guess[data-clue-idx="3"] .rd-guess-clue[data-i="2"],
.rd-guess[data-clue-idx="3"] .rd-guess-clue[data-i="3"],
.rd-guess[data-clue-idx="4"] .rd-guess-clue[data-i="1"],
.rd-guess[data-clue-idx="4"] .rd-guess-clue[data-i="2"],
.rd-guess[data-clue-idx="4"] .rd-guess-clue[data-i="3"],
.rd-guess[data-clue-idx="4"] .rd-guess-clue[data-i="4"] {
  display: block;
}

.rd-guess-answer {
  display: none;
  background: var(--paper, #F5EBD3);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--paper-ember, #B6442C);
  animation: rdGuessIn .35s ease-out;
}
.rd-guess[data-revealed="true"] .rd-guess-answer { display: block; }
.rd-guess-word {
  display: inline-block;
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.4rem;
  color: var(--paper-ember, #B6442C);
  margin-bottom: .4rem;
}
.rd-guess-explanation {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--paper-ink, #1F1812);
}
.rd-guess-explanation b { font-weight: 600; }
.rd-guess-explanation i { font-style: italic; }

.rd-guess-controls {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.rd-guess-hint, .rd-guess-reveal, .rd-guess-reset {
  padding: .55rem 1rem;
  border-radius: 99px;
  border: 1px solid var(--paper-line-strong, rgba(31,24,18,.25));
  background: var(--paper, #F5EBD3);
  color: var(--paper-ink-soft, #4A3F33);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.rd-guess-hint:hover:not(:disabled) {
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
  color: var(--paper-honey, #B57A2E);
}
.rd-guess-hint:disabled { opacity: .5; cursor: not-allowed; }
.rd-guess-reveal {
  background: var(--paper-ember, #B6442C);
  color: #fff;
  border-color: var(--paper-ember, #B6442C);
}
.rd-guess-reveal:hover {
  background: color-mix(in srgb, var(--paper-ember, #B6442C) 80%, #000);
}
.rd-guess[data-revealed="true"] .rd-guess-reveal { display: none; }
.rd-guess-reset { color: var(--paper-ink-mute, #7A6A55); }
.rd-guess-reset:hover { color: var(--paper-ink, #1F1812); }

/* Mobile: stack the passage + notes / steps. */
@media (max-width: 760px) {
  .rd-passage-grid,
  .rd-wt-grid,
  .rd-compare-grid { grid-template-columns: 1fr; }
  .rd-passage-notes { border-left: 0; padding-left: 0; padding-top: .8rem; border-top: 1px solid var(--paper-line, rgba(31,24,18,.12)); }
  .rd-passage, .rd-walkthrough, .rd-dissect, .rd-guess { padding: 1.2rem 1.2rem 1rem; }
  .rd-dis-paragraph, .rd-guess-sentence { padding: 1rem; font-size: 1rem; }
}

/* ─── Lesson nav (prev/next at bottom of lesson) ─────────────── */
.rd-lesson-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-top: 3.2rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--paper-line, rgba(31,24,18,.12));
}
.rd-lesson-nav-prev,
.rd-lesson-nav-next {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .9rem 1.1rem;
  background: var(--paper-tint, #EFE2C4);
  border-radius: 9px;
  text-decoration: none;
  color: var(--paper-ink, #1F1812);
  transition: transform .15s, background .15s;
  border: 1px solid transparent;
}
.rd-lesson-nav-next { text-align: right; }
.rd-lesson-nav-prev:hover,
.rd-lesson-nav-next:hover {
  transform: translateY(-2px);
  background: var(--paper-deep, #E7D6B0);
  border-color: var(--paper-honey, #B57A2E);
}
.rd-lesson-nav-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--paper-honey, #B57A2E);
}
.rd-lesson-nav-title {
  font-family: 'Source Serif 4', Georgia, serif;
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.2;
}

/* ─── God edit toggle (placeholder for full inline editor) ──── */
.rd-god-edit {
  position: fixed;
  bottom: 1.6rem; right: 1.6rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ielts-card, #2A1F17);
  border: 1px solid var(--ielts-honey, #D9A268);
  color: var(--ielts-honey, #D9A268);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 90;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,.5);
  transition: transform .15s, box-shadow .2s;
}
.rd-god-edit:hover {
  transform: scale(1.06);
  box-shadow: 0 18px 32px -10px rgba(217,162,104,.45);
}

/* ─── Empty / loading states ────────────────────────────────── */
.rd-empty, .rd-loading, .rd-coming {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--ielts-ink-soft, #B6A484);
  font-family: 'Source Serif 4', Georgia, serif;
  font-style: italic;
}
.rd-coming {
  background: var(--paper, #F5EBD3);
  border-radius: 12px;
  padding: 3rem 2rem;
  color: var(--paper-ink-soft, #4A3F33);
  margin: 2rem 0;
}
.rd-coming p { margin: 0; font-style: normal; font-family: 'Inter', system-ui, sans-serif; }
.rd-back {
  display: inline-block;
  margin-top: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  color: var(--ielts-honey, #D9A268);
  text-decoration: none;
}

/* ─── Mobile ────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .reading-page { padding: 2rem 1.2rem 4rem; }
  .rd-lessons-grid { grid-template-columns: 1fr; }
  .rd-lesson-card { padding: 1.1rem 1.2rem; gap: 1rem; }
  .rd-lesson-num { font-size: 2rem; }
  .rd-lesson-title { font-size: 1.05rem; }
  .rd-lesson-meta { display: none; }

  .rd-lesson-page { margin: 1.2rem; padding: 2rem 1.4rem 2.4rem; }
  .rd-lesson-title-big { font-size: 1.9rem; }
  .rd-lesson-subtitle { font-size: 1rem; }
  .rd-lesson-nav { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────
   Light-theme reskin (v2) — opt-in via body.is-ielts-light.
   Scope: the five subject INDEX pages only. Lesson body pages keep the
   dark espresso theme until the lesson surface is migrated in a later
   pass.

   Palette is the same brand brown / honey / cream we already use — no
   purples, no peach gradients. Background is a warm sandstone cream;
   cards lift onto a near-white cream so they read as elevated paper.
   ──────────────────────────────────────────────────────────────── */
/* Light-theme palette — ChatGPT-style pearl base with soft ambient
   lighting from the corners. Text uses our brand brown (per user's
   "use brownish for text" tweak) instead of the navy ChatGPT had.
   Combined selector (specificity 0,2,0) guarantees we win against
   shell.css's `body.has-ielts-nav` rule. */
/* Atmospheric editorial palette (per ChatGPT background spec).
   Warm pearl/ivory base with airy pastel diffusion in the corners.
   Should feel like soft daylight through frosted glass, not flat
   cream. Text colours stay brand brown (user's text-colour tweak —
   the spec's "navy" gets swapped out for our espresso). */
body.has-ielts-nav.is-ielts-light {
  --ielts-bg:        #F8F5EE;   /* warm pearl / ivory */
  --ielts-bg-tint:   #F2EDE2;
  --ielts-card:      #FCF8EE;
  --ielts-card-lift: #FFFCF4;   /* near-white card surface */
  --ielts-ink:       #2A1F12;   /* deep espresso brown (replaces spec's navy) */
  --ielts-ink-soft:  #5C4A35;
  --ielts-ink-mute:  #8C7757;
  --ielts-honey:     #B57A2E;
  --ielts-ember:     #B6442C;
  --ielts-line:      rgba(74, 58, 38, .08);
  --ielts-line-strong: rgba(74, 58, 38, .16);
  --ielts-nav-border: #EAE4DE;
  background: var(--ielts-bg);
  color: var(--ielts-ink);
}

/* Ambient atmosphere — large smooth ellipses that ACTUALLY render
   visibly. Earlier opacities (14-18%) were so faint the page read
   as flat cream. ChatGPT's mock has the gradients clearly visible:
   peach warmth top-right, lavender-blue across the bottom (right
   stronger than left). These opacities (50% peach, 40% lavender)
   match that saturation. Smooth 4-stop falloff so the gradients
   still dissolve into the pearl base without hard edges. */
body.has-ielts-nav.is-ielts-light::before {
  background:
    /* peach warmth top-right — clearly visible */
    radial-gradient(ellipse 90% 70% at 105% -5%,
      rgba(244, 175, 130, .55) 0%,
      rgba(244, 175, 130, .30) 25%,
      rgba(244, 175, 130, .08) 50%,
      rgba(244, 175, 130, 0)   72%),
    /* primary lavender-blue glow bottom-right */
    radial-gradient(ellipse 100% 85% at 110% 110%,
      rgba(160, 168, 210, .50) 0%,
      rgba(160, 168, 210, .25) 30%,
      rgba(160, 168, 210, .08) 55%,
      rgba(160, 168, 210, 0)   75%),
    /* secondary lavender wash bottom-left so the band spans the page */
    radial-gradient(ellipse 90% 70% at -10% 110%,
      rgba(178, 175, 215, .35) 0%,
      rgba(178, 175, 215, .12) 35%,
      rgba(178, 175, 215, 0)   65%);
}
/* No stripes, no noise, no patterns — the dark theme overlays are
   killed entirely on light. */
body.has-ielts-nav.is-ielts-light::after { display: none; }

/* ── Navbar (light theme) ─────────────────────────────────────────
   Almost-invisible nav blended into the atmospheric background.
   Lightweight, airy, elegant. Bottom border is a hairline in the
   #EAE4DE range. */
body.is-ielts-light .ielts-nav {
  background: linear-gradient(180deg,
    rgba(255, 252, 244, .80) 0%,
    rgba(255, 252, 244, .60) 100%);
  border-bottom: 1px solid var(--ielts-nav-border, #EAE4DE);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
body.is-ielts-light .ielts-nav-brand-mark { color: var(--ielts-ink); }
body.is-ielts-light .ielts-nav-tab {
  color: var(--ielts-ink-mute);
  font-weight: 500;
}
body.is-ielts-light .ielts-nav-tab:hover {
  color: var(--ielts-ink);
}
body.is-ielts-light .ielts-nav-tab.is-active {
  color: var(--ielts-ink);
  font-weight: 600;
}
body.is-ielts-light .ielts-nav-caret { opacity: .5; }

/* The toc search bar inherits its colours from the IELTS palette
   above, but a few rules in lesson-toc.css have hard-coded fallback
   greys that need to be redirected to the cream tokens. The card
   surface for the search field, in particular, was the only place
   the dark theme leaked onto the light page. */
body.is-ielts-light .lesson-toc-input {
  background: var(--ielts-card-lift, #FFFCF3);
  border-color: var(--ielts-line);
  color: var(--ielts-ink);
  box-shadow: 0 1px 0 rgba(74, 58, 38, .04);
}
body.is-ielts-light .lesson-toc-input::placeholder {
  color: var(--ielts-ink-mute);
}
body.is-ielts-light .lesson-toc-input:focus {
  border-color: color-mix(in srgb, var(--ielts-honey) 60%, transparent);
  background: var(--ielts-card-lift, #FFFCF3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ielts-honey, #B57A2E) 14%, transparent);
}
body.is-ielts-light .lesson-toc-icon { color: var(--ielts-ink-mute); }
body.is-ielts-light .lesson-toc-kbd kbd {
  border-color: var(--ielts-line);
  background: color-mix(in srgb, var(--ielts-card, #FBF5E5) 70%, transparent);
  color: var(--ielts-ink-soft);
}

/* Top nav switches to a cream surface flush with the page so the
   header reads as integrated rather than floating on dark glass. */
body.is-ielts-light .ielts-nav {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ielts-card-lift, #FFFBF0) 96%, transparent) 0%,
      color-mix(in srgb, var(--ielts-card-lift, #FFFBF0) 88%, transparent) 100%);
  border-bottom-color: var(--ielts-line);
}
body.is-ielts-light .ielts-nav-brand-mark { color: var(--ielts-ink); }
body.is-ielts-light .ielts-nav-tab { color: var(--ielts-ink-soft); }
body.is-ielts-light .ielts-nav-tab:hover { color: var(--ielts-ink); }
body.is-ielts-light .ielts-nav-tab.is-active { color: var(--ielts-ink); }
body.is-ielts-light .ielts-nav-caret { color: currentColor; opacity: .55; }
body.is-ielts-light .ielts-nav-menu,
body.is-ielts-light .ielts-nav-submenu {
  background: var(--ielts-card-lift);
  border-color: var(--ielts-line);
  box-shadow: 0 18px 40px -18px rgba(31, 24, 18, .25);
}
body.is-ielts-light .ielts-nav-menu-item { color: var(--ielts-ink); }
body.is-ielts-light .ielts-nav-menu-item:hover,
body.is-ielts-light .ielts-nav-menu-item:focus-visible {
  background: color-mix(in srgb, var(--ielts-honey, #B57A2E) 12%, transparent);
}

/* Reading page — light surfaces. The page var overrides above already
   handle text colour on the title etc.; below we tune the card surface
   so it pops off the cream background without feeling washed out. */
body.is-ielts-light .reading-page {
  --paper:       #FFFBF0;
  --paper-tint:  #FFF7E5;
  --paper-deep:  #F5EAD2;
  --paper-ink:        #2A1F12;
  --paper-ink-soft:   #5C4A35;
  --paper-ink-mute:   #8C7757;
  --paper-honey:      #B57A2E;
  --paper-line:       rgba(74, 58, 38, .10);
}

/* Hand-drawn wavy honey flourish under the page title — like a
   signature stroke. Inline SVG data URI so no extra asset request.
   Two waves at low stroke weight; sized at 110×14 to feel relaxed
   under the big serif title. */
body.is-ielts-light .rd-title-rule {
  display: block;
  width: 130px;
  height: 14px;
  margin-top: .5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 14' preserveAspectRatio='none'><path d='M 2 9 Q 18 1, 35 7 T 68 7 T 100 7 T 128 7' stroke='%23B57A2E' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 130px 14px;
}
body:not(.is-ielts-light) .rd-title-rule { display: none; }

/* Section divider — full-width hairline with two small dots at the
   ends. ChatGPT mock used a soft pink/peach for the rule (warm
   neutral pulled from the corner gradient); the dots are slightly
   more saturated. Sits below "Phase 1 · Foundations" as a quiet
   editorial ornament. */
body.is-ielts-light .rd-section-rule {
  display: block;
  position: relative;
  height: 1px;
  margin: .1rem 0 1.8rem;
  background: rgba(195, 142, 124, .35);
}
body.is-ielts-light .rd-section-rule::before,
body.is-ielts-light .rd-section-rule::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(195, 142, 124, .65);
  transform: translateY(-50%);
}
body.is-ielts-light .rd-section-rule::before { left: -2px; }
body.is-ielts-light .rd-section-rule::after  { right: -2px; }
body:not(.is-ielts-light) .rd-section-rule { display: none; }
body.is-ielts-light .rd-section-head { border-bottom: 0; padding-bottom: 0; }

/* Tighter top padding under the sticky nav. The dark theme's 3rem
   feels too airy on the lighter cream — the eyebrow sits naturally
   closer to the nav. */
body.is-ielts-light .reading-page {
  padding-top: 0.2rem;
}

/* Lesson card — solid cream surface (no gradient), warm subtle
   border + shadow. Four-column grid: number | divider | body |
   meta | chevron. The thin vertical divider after the number
   separates the index from the lesson info. */
body.is-ielts-light .rd-lesson-card {
  background: #FFFCF4;
  border: 1px solid rgba(74, 58, 38, .08);
  box-shadow:
    0 1px 0 rgba(74, 58, 38, .02),
    0 12px 28px -16px rgba(74, 58, 38, .14);
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  gap: 1.4rem;
}
/* Vertical divider after the lesson number — drawn as a right
   border on .rd-lesson-num so it scales with the number's height. */
body.is-ielts-light .rd-lesson-num {
  color: var(--ielts-honey);
  padding-right: 1.4rem;
  border-right: 1px solid rgba(74, 58, 38, .14);
  align-self: stretch;
  display: flex;
  align-items: center;
}
body.is-ielts-light .rd-lesson-card:hover {
  transform: translateY(-2px);
  border-color: rgba(74, 58, 38, .14);
  box-shadow:
    0 1px 0 rgba(74, 58, 38, .02),
    0 20px 36px -16px rgba(74, 58, 38, .20);
}
body.is-ielts-light .rd-lesson-title { color: var(--ielts-ink); }
body.is-ielts-light .rd-lesson-sub { color: var(--ielts-ink-soft); }

/* Time-to-read affordance — lives in its own column to the right
   of the lesson body, vertically centered. */
.rd-lesson-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--paper-ink-mute, #7A6A55);
  white-space: nowrap;
}
.rd-lesson-clock { opacity: .75; }
body.is-ielts-light .rd-lesson-meta { color: var(--ielts-ink-mute); }
/* Dark-theme cards still need a 3-column grid; only the light theme
   gets the 4-column "meta-as-its-own-column" layout (handled in the
   light-theme card rule above). */
body:not(.is-ielts-light) .rd-lesson-card {
  grid-template-columns: auto 1fr auto;
}
body:not(.is-ielts-light) .rd-lesson-card > .rd-lesson-meta {
  display: none;
}

/* Chevron arrow circle on the right of each card. Lives in the
   layout's auto-sized third column. */
.rd-lesson-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid var(--paper-line, rgba(31, 24, 18, .12));
  color: var(--paper-ink-soft, #4A3F33);
  background: transparent;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.rd-lesson-card:hover .rd-lesson-arrow {
  background: color-mix(in srgb, var(--paper-honey, #B57A2E) 14%, transparent);
  border-color: color-mix(in srgb, var(--paper-honey, #B57A2E) 50%, transparent);
  color: var(--paper-honey, #B57A2E);
  transform: translateX(2px);
}
body.is-ielts-light .rd-lesson-arrow {
  border-color: rgba(74, 58, 38, .14);
  color: var(--ielts-ink-soft);
  background: transparent;
}
body.is-ielts-light .rd-lesson-card:hover .rd-lesson-arrow {
  background: color-mix(in srgb, var(--ielts-honey, #B57A2E) 12%, transparent);
  border-color: color-mix(in srgb, var(--ielts-honey, #B57A2E) 50%, transparent);
  color: var(--ielts-honey, #B57A2E);
}

/* The search bar the toc module injects already has its own styles
   from lesson-toc.css; we just need to make sure it sits clean on the
   light background. The toc CSS already targets cream surfaces, so
   no overrides needed here — but if it ever looks off, this is where
   the local override would land. */

/* ── Browser scrollbar (light theme) ─────────────────────────────
   Style the native scrollbar so it's actually visible on the cream
   page. Wider thumb (12px), honey gradient, rounded edges, soft
   warm track. Still 100% browser-native behavior — drag the thumb,
   click the track to jump, mouse wheel to scroll. No custom JS. */
body.is-ielts-light {
  scrollbar-width: auto;                                     /* Firefox */
  scrollbar-color: #B57A2E rgba(74, 58, 38, .06);            /* Firefox: thumb + track */
}
body.is-ielts-light::-webkit-scrollbar {
  width: 12px;
}
body.is-ielts-light::-webkit-scrollbar-track {
  background: rgba(74, 58, 38, .06);
}
body.is-ielts-light::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C68A3E 0%, #B57A2E 55%, #8B5A1C 100%);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 1px 2px rgba(74, 58, 38, .25);
}
body.is-ielts-light::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #D69A4E 0%, #C58A3E 55%, #9B6A2C 100%);
  background-clip: padding-box;
}
body.is-ielts-light::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, #B57A2E 0%, #A56A1E 55%, #7B4A0C 100%);
  background-clip: padding-box;
}

/* ════════════════════════════════════════════════════════════════════
   LESSON PAGE — light theme (v2 full block-by-block migration)

   Every block style under .rd-lesson-page already uses the --paper-*
   custom-property cascade, so overriding the vars here lifts almost
   every block automatically. Per-block sections below tune the
   handful of elements that need explicit treatment (heavy shadows,
   walkthrough highlights, dissect role colours, etc.).
   ════════════════════════════════════════════════════════════════════ */

/* Override the cream-on-coffee paper vars to a near-white cream that
   sits cleanly on the pearl page background. Applied to all
   .ielts-page descendants so both index and lesson pages share the
   token system. */
body.is-ielts-light .ielts-page {
  --paper:       #FFFCF4;
  --paper-tint:  #FAF3DF;
  --paper-deep:  #F2E7C8;
  --paper-ink:        #2A1F12;
  --paper-ink-soft:   #5C4A35;
  --paper-ink-mute:   #8C7757;
  --paper-honey:      #B57A2E;
  --paper-ember:      #B6442C;
  --paper-line:       rgba(74, 58, 38, .10);
  --paper-line-strong: rgba(74, 58, 38, .22);
}

/* Lesson page — the "book page" surface. Replace the dark-theme's
   heavy black drop shadow with a soft warm cream halo so the page
   reads as elevated paper on the pearl atmosphere, not a slab on
   glass. */
body.is-ielts-light .rd-lesson-page {
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(74, 58, 38, .03),
    0 22px 50px -28px rgba(74, 58, 38, .25),
    0 4px 12px -6px rgba(74, 58, 38, .08);
  border: 1px solid rgba(74, 58, 38, .05);
}
/* Tightener: dark theme used a 30px-60px shadow that's too big for
   light. The replacement above is calmer. */

/* Lesson header — divider becomes the new --paper-line. */
body.is-ielts-light .rd-lesson-head {
  border-bottom-color: var(--paper-line);
}

/* Back link — hover trace on honey. */
body.is-ielts-light .rd-lesson-back {
  color: var(--paper-ink-soft);
}
body.is-ielts-light .rd-lesson-back:hover { color: var(--paper-honey); }

/* ── Lead paragraph — opening serif statement ─────────────────── */
body.is-ielts-light .rd-block.rd-lead {
  color: var(--paper-ink);
}

/* ── Headings — paper-ink with honey accent only on H2 ────────── */
body.is-ielts-light .rd-block.rd-h2,
body.is-ielts-light .rd-block.rd-h3 {
  color: var(--paper-ink);
}

/* ── Paragraphs — body text leans soft-ink for comfortable reading
       on cream (the dark theme used --paper-ink, slightly too dark
       for long reads here). */
body.is-ielts-light .rd-block.rd-p {
  color: var(--paper-ink);
}

/* ── Callouts — insight / tip / mistake variants. Each gets a soft
       tinted bg pulled from the corner-gradient palette so the lesson
       atmosphere echoes inside the page. */
body.is-ielts-light .rd-callout-insight {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--paper-honey) 7%, var(--paper-tint)) 0%,
    color-mix(in srgb, var(--paper-honey) 4%, var(--paper-tint)) 100%);
  border-left: 3px solid color-mix(in srgb, var(--paper-honey) 50%, transparent);
}
body.is-ielts-light .rd-callout-tip {
  background: linear-gradient(180deg,
    color-mix(in srgb, #9AB084 8%, var(--paper-tint)) 0%,
    color-mix(in srgb, #9AB084 4%, var(--paper-tint)) 100%);
  border-left: 3px solid rgba(123, 142, 110, .55);
}
body.is-ielts-light .rd-callout-mistake {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--paper-ember) 7%, var(--paper-tint)) 0%,
    color-mix(in srgb, var(--paper-ember) 4%, var(--paper-tint)) 100%);
  border-left: 3px solid color-mix(in srgb, var(--paper-ember) 55%, transparent);
}
body.is-ielts-light .rd-callout-label { color: var(--paper-ink-mute); }
body.is-ielts-light .rd-callout-body  { color: var(--paper-ink); }

/* ── Lists — bullet + numbered. Numbered list markers pick up honey
       to match the v2 accent. */
body.is-ielts-light .rd-block.rd-list-bullet,
body.is-ielts-light .rd-block.rd-list-numbered { color: var(--paper-ink); }
body.is-ielts-light .rd-list-numbered { color: var(--paper-honey); }
body.is-ielts-light .rd-list-numbered li { color: var(--paper-ink); }

/* ── Quote — italic serif with honey accent bar. */
body.is-ielts-light .rd-block.rd-quote {
  background: var(--paper-tint);
  border-left: 3px solid var(--paper-honey);
  color: var(--paper-ink-soft);
}

/* ── Divider — short hairline. */
body.is-ielts-light .rd-block.rd-divider {
  background: linear-gradient(90deg,
    transparent 0%,
    var(--paper-line-strong) 30%,
    var(--paper-line-strong) 70%,
    transparent 100%);
}

/* ── Example block — worked-example annotations list. */
body.is-ielts-light .rd-example {
  background: var(--paper-tint);
  border-left: 3px solid var(--paper-honey);
}
body.is-ielts-light .rd-example-label,
body.is-ielts-light .rd-example-title { color: var(--paper-honey); }
body.is-ielts-light .rd-example-body,
body.is-ielts-light .rd-example-annotations li { color: var(--paper-ink); }

/* ── Compare — two-column side-by-side, soft cream panels with
       hairline divider between them. */
body.is-ielts-light .rd-compare-col {
  background: color-mix(in srgb, var(--paper-tint) 70%, transparent);
  border: 1px solid var(--paper-line);
}
body.is-ielts-light .rd-compare-label { color: var(--paper-honey); }
body.is-ielts-light .rd-compare-body  { color: var(--paper-ink); }
body.is-ielts-light .rd-compare-note,
body.is-ielts-light .rd-compare-footnote { color: var(--paper-ink-soft); }

/* ── Passage block — annotated long-form passage with margin notes.
       The mark spans below get specific data-kind colours. */
body.is-ielts-light .rd-passage {
  background: var(--paper-tint);
  border: 1px solid var(--paper-line);
  border-left: 3px solid var(--paper-honey);
}
body.is-ielts-light .rd-passage-label,
body.is-ielts-light .rd-passage-title { color: var(--paper-honey); }
body.is-ielts-light .rd-passage-source { color: var(--paper-ink-mute); }
body.is-ielts-light .rd-passage-body { color: var(--paper-ink); }
body.is-ielts-light .rd-passage-note { color: var(--paper-ink); }
body.is-ielts-light .rd-passage-note-num {
  background: var(--paper-honey);
  color: var(--paper);
}

/* ── Inline mark spans — passage/example highlights. Variants by
       data-kind: synonym (ember), trap (ember dashed), topic (honey
       strong), reference (ink). Same hues, slightly more saturated
       on cream so they still read against the lighter paper. */
body.is-ielts-light .rd-mark {
  background: rgba(181, 122, 46, .16);
  border-bottom: 1.5px solid rgba(181, 122, 46, .55);
}
body.is-ielts-light .rd-mark[data-kind="synonym"] {
  background: rgba(182, 68, 44, .13);
  border-bottom-color: rgba(182, 68, 44, .55);
}
body.is-ielts-light .rd-mark[data-kind="trap"] {
  background: rgba(182, 68, 44, .15);
  border-bottom: 1.5px dashed rgba(182, 68, 44, .70);
}
body.is-ielts-light .rd-mark[data-kind="topic"] {
  background: rgba(181, 122, 46, .24);
  border-bottom-color: rgba(181, 122, 46, .80);
}
body.is-ielts-light .rd-mark[data-kind="reference"] {
  background: rgba(31, 24, 18, .08);
  border-bottom-color: rgba(31, 24, 18, .35);
}

/* ── Walkthrough block — interactive steps + passage with data-step
       marks. The light variant of the highlight needs a touch more
       saturation than the dark theme since cream-on-cream contrast
       is tighter. */
body.is-ielts-light .rd-walkthrough {
  background: var(--paper-tint);
  border: 1px solid var(--paper-line);
}
body.is-ielts-light .rd-wt-passage {
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-line);
}
body.is-ielts-light .rd-wt-intro,
body.is-ielts-light .rd-wt-question p { color: var(--paper-ink); }
body.is-ielts-light .rd-wt-q-label { color: var(--paper-honey); }
body.is-ielts-light .rd-wt-step {
  background: var(--paper);
  border: 1px solid transparent;
}
body.is-ielts-light .rd-wt-step:hover {
  background: var(--paper-tint);
  border-color: var(--paper-honey);
}
body.is-ielts-light .rd-wt-step.is-active {
  background: color-mix(in srgb, var(--paper-honey) 12%, var(--paper));
  border-color: var(--paper-honey);
}
body.is-ielts-light .rd-wt-step-num { color: var(--paper-honey); }
body.is-ielts-light .rd-wt-step-label { color: var(--paper-ink); }
body.is-ielts-light .rd-wt-step-text  { color: var(--paper-ink-soft); }

/* Walkthrough lit highlight — readjusted for cream paper. */
body.is-ielts-light .rd-walkthrough .rd-wt-passage .rd-mark.is-lit,
body.is-ielts-light .rd-walkthrough .rd-wt-tap-marked .rd-mark.is-lit {
  background: rgba(181, 122, 46, .30);
  border-bottom: 1.5px solid rgba(181, 122, 46, .85);
}

/* Walkthrough attempt UI — pick / tap / type modes. */
body.is-ielts-light .rd-wt-attempt {
  background: var(--paper);
  border: 1px solid var(--paper-line);
}
body.is-ielts-light .rd-wt-attempt-eyebrow { color: var(--paper-honey); }
body.is-ielts-light .rd-wt-attempt-prompt { color: var(--paper-ink); }
body.is-ielts-light .rd-wt-opt {
  background: var(--paper-tint);
  border: 1px solid var(--paper-line);
  color: var(--paper-ink);
}
body.is-ielts-light .rd-wt-opt:hover {
  background: color-mix(in srgb, var(--paper-honey) 8%, var(--paper-tint));
  border-color: var(--paper-honey);
}
body.is-ielts-light .rd-wt-opt.is-right {
  background: color-mix(in srgb, #9AB084 22%, var(--paper-tint));
  border-color: rgba(123, 142, 110, .65);
}
body.is-ielts-light .rd-wt-opt.is-wrong {
  background: color-mix(in srgb, var(--paper-ember) 14%, var(--paper-tint));
  border-color: color-mix(in srgb, var(--paper-ember) 60%, transparent);
}
body.is-ielts-light .rd-wt-attempt-msg { color: var(--paper-ink); }
body.is-ielts-light .rd-wt-attempt-retry,
body.is-ielts-light .rd-wt-attempt-reveal {
  background: var(--paper);
  border: 1px solid var(--paper-line-strong);
  color: var(--paper-ink-soft);
}
body.is-ielts-light .rd-wt-attempt-retry:hover,
body.is-ielts-light .rd-wt-attempt-reveal:hover {
  background: var(--paper-tint);
  border-color: var(--paper-honey);
  color: var(--paper-ink);
}

/* Tap mode — clickable sentences. */
body.is-ielts-light .rd-wt-tap-sent {
  background: var(--paper-tint);
  border: 1px solid var(--paper-line);
  color: var(--paper-ink);
}
body.is-ielts-light .rd-wt-tap-sent:hover {
  background: color-mix(in srgb, var(--paper-honey) 8%, var(--paper-tint));
  border-color: var(--paper-honey);
}
body.is-ielts-light .rd-wt-tap-sent.is-right {
  background: color-mix(in srgb, #9AB084 22%, var(--paper-tint));
  border-color: rgba(123, 142, 110, .65);
}
body.is-ielts-light .rd-wt-tap-sent.is-wrong {
  background: color-mix(in srgb, var(--paper-ember) 14%, var(--paper-tint));
  border-color: color-mix(in srgb, var(--paper-ember) 60%, transparent);
}

/* Type mode — input + check button. */
body.is-ielts-light .rd-wt-type-input {
  background: var(--paper);
  border: 1px solid var(--paper-line-strong);
  color: var(--paper-ink);
}
body.is-ielts-light .rd-wt-type-input:focus {
  border-color: var(--paper-honey);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--paper-honey) 18%, transparent);
}
body.is-ielts-light .rd-wt-type-input.is-right {
  border-color: rgba(123, 142, 110, .65);
  background: color-mix(in srgb, #9AB084 12%, var(--paper));
}
body.is-ielts-light .rd-wt-type-input.is-wrong {
  border-color: color-mix(in srgb, var(--paper-ember) 60%, transparent);
}
body.is-ielts-light .rd-wt-type-submit {
  background: var(--paper-honey);
  color: var(--paper);
}
body.is-ielts-light .rd-wt-type-submit:hover {
  background: color-mix(in srgb, var(--paper-honey) 90%, #000);
}

/* Locked steps veil — readable on cream. */
body.is-ielts-light .rd-wt-veil {
  background: linear-gradient(180deg,
    transparent 0%,
    var(--paper-tint) 60%);
  color: var(--paper-ink-soft);
}

/* ── Dissect block — sentences with role colours on click. The role
       palette stays the same hues but on a cream base. */
body.is-ielts-light .rd-dissect {
  background: var(--paper-tint);
  border: 1px solid var(--paper-line);
}
body.is-ielts-light .rd-dis-paragraph {
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-line);
}
body.is-ielts-light .rd-dis-sent {
  color: var(--paper-ink);
}
body.is-ielts-light .rd-dis-sent:hover {
  background: color-mix(in srgb, var(--paper-honey) 10%, transparent);
}
body.is-ielts-light .rd-dis-sent.is-active {
  background: color-mix(in srgb, var(--paper-honey) 22%, transparent);
}
body.is-ielts-light .rd-dis-panel {
  background: var(--paper);
  border: 1px solid var(--paper-line);
}
body.is-ielts-light .rd-dis-empty { color: var(--paper-ink-mute); }
body.is-ielts-light .rd-dis-note-role { color: var(--paper-honey); }
body.is-ielts-light .rd-dis-note-text { color: var(--paper-ink); }

/* ── Guess block — clues + blank + answer. */
body.is-ielts-light .rd-guess {
  background: var(--paper-tint);
  border: 1px solid var(--paper-line);
}
body.is-ielts-light .rd-guess-sentence {
  background: var(--paper);
  color: var(--paper-ink);
  border: 1px solid var(--paper-line);
}
body.is-ielts-light .rd-guess-blank {
  background: var(--paper-deep);
  color: var(--paper-ink);
}
body.is-ielts-light .rd-guess-clue {
  background: var(--paper);
  color: var(--paper-ink);
  border-left: 3px solid var(--paper-honey);
}
body.is-ielts-light .rd-guess-clue::before { color: var(--paper-honey); }
body.is-ielts-light .rd-guess-answer {
  background: var(--paper);
  border: 1px solid var(--paper-honey);
}
body.is-ielts-light .rd-guess-word { color: var(--paper-honey); }
body.is-ielts-light .rd-guess-explanation { color: var(--paper-ink); }
body.is-ielts-light .rd-guess-hint,
body.is-ielts-light .rd-guess-reveal,
body.is-ielts-light .rd-guess-reset {
  background: var(--paper);
  border: 1px solid var(--paper-line-strong);
  color: var(--paper-ink-soft);
}
body.is-ielts-light .rd-guess-hint:hover:not(:disabled),
body.is-ielts-light .rd-guess-reset:hover {
  border-color: var(--paper-honey);
  color: var(--paper-ink);
}
body.is-ielts-light .rd-guess-reveal {
  background: var(--paper-honey);
  color: var(--paper);
  border-color: var(--paper-honey);
}
body.is-ielts-light .rd-guess-reveal:hover {
  background: color-mix(in srgb, var(--paper-honey) 90%, #000);
}

/* ── Lesson nav — prev/next at the bottom. */
body.is-ielts-light .rd-lesson-nav-prev,
body.is-ielts-light .rd-lesson-nav-next {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  color: var(--paper-ink);
}
body.is-ielts-light .rd-lesson-nav-prev:hover,
body.is-ielts-light .rd-lesson-nav-next:hover {
  border-color: var(--paper-honey);
  background: var(--paper-tint);
}
body.is-ielts-light .rd-lesson-nav-eyebrow { color: var(--paper-honey); }
body.is-ielts-light .rd-lesson-nav-title { color: var(--paper-ink); }

/* ── Annotations module — post-its + sentence highlights. The dark
       theme's "yellow stickies on wood" metaphor doesn't translate
       directly; on light cream, the notes feel more like soft label
       cards. We keep the colour codes (yellow / pink / green / blue /
       orange) but tone the saturation down so they sit on cream
       without screaming. Sentence highlight ink stays the same — it
       was already designed to work on a cream surface. */
body.is-ielts-light .ann-rail {
  background: var(--paper);
  border-color: var(--paper-line);
}
body.is-ielts-light .ann-rail-item {
  background: color-mix(in srgb, var(--paper-tint) 80%, transparent);
  border: 1px solid var(--paper-line);
  color: var(--paper-ink);
}
body.is-ielts-light .ann-rail-item:hover {
  background: var(--paper-tint);
  border-color: var(--paper-honey);
}
body.is-ielts-light .ann-rail-eyebrow { color: var(--paper-honey); }
body.is-ielts-light .ann-spine {
  background: color-mix(in srgb, var(--paper-tint) 60%, transparent);
}
body.is-ielts-light .ann-spine-disc { background: var(--paper-honey); }
/* ── Annotation dispenser (light theme redesign) ──────────────────
   The dark-theme dispenser is a small black holder — easy to miss
   on a pearl page. The light-theme version is wider, brighter, with
   tabs that read as actual chunky sticky notes (rounded corners,
   tilt slightly, soft warm shadow). Honey-accented label + dashed
   honey divider give it the editorial vibe of the rest of the v2
   theme so the eye registers "supplies for me to use here." */
body.is-ielts-light .ann-dispenser {
  width: 104px;
  padding: 16px 12px 18px;
  background:
    linear-gradient(180deg, #FFFCF4 0%, #FAF3DE 100%);
  border: 1px solid rgba(74, 58, 38, .10);
  border-radius: 22px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(74, 58, 38, .06),
    0 2px 0 rgba(74, 58, 38, .04),
    0 18px 36px -14px rgba(74, 58, 38, .18),
    0 36px 60px -24px rgba(74, 58, 38, .14);
}

body.is-ielts-light .ann-disp-stack-head {
  border-bottom: 1px dashed rgba(181, 122, 46, .30);
  padding-bottom: 10px;
  margin-bottom: 12px;
  gap: 6px;
}
body.is-ielts-light .ann-disp-stack-icon {
  color: var(--paper-honey, #B57A2E);
  margin-top: 0;
}
body.is-ielts-light .ann-disp-stack-label {
  color: var(--paper-honey, #B57A2E);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .18em;
}

body.is-ielts-light .ann-disp-stack-tabs {
  gap: 9px;
  padding: 4px 0 2px;
}

/* Each tab as a chunky sticky-note rectangle — rounded, lifted,
   slight downward edge highlight. Looks grabbable, not painted on. */
body.is-ielts-light .ann-disp-tab {
  width: 70px;
  height: 26px;
  border-radius: 4px 4px 8px 8px;
  background: var(--ann-c);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -3px 5px color-mix(in srgb, var(--ann-cd) 24%, transparent),
    0 2px 3px rgba(74, 58, 38, .10),
    0 6px 14px color-mix(in srgb, var(--ann-cd) 45%, transparent);
}
body.is-ielts-light .ann-disp-tab::after {
  /* Soft top-to-bottom paper sheen — same as dark theme but a touch
     brighter so it reads against the cream holder. */
  background: linear-gradient(170deg,
    rgba(255, 255, 255, .35) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, .06) 100%);
}
body.is-ielts-light .ann-disp-tab:hover {
  transform: translateY(-2px) scale(1.04);
  height: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .65),
    inset 0 -4px 6px color-mix(in srgb, var(--ann-cd) 28%, transparent),
    0 4px 6px rgba(74, 58, 38, .14),
    0 10px 20px color-mix(in srgb, var(--ann-cd) 55%, transparent);
}
body.is-ielts-light .ann-disp-tab.is-armed {
  transform: translateY(-3px) scale(1.06);
  height: 32px;
  outline: 2px solid color-mix(in srgb, var(--ann-cd) 55%, transparent);
  outline-offset: 3px;
}

/* The little instruction hint that appears under the armed tab. */
body.is-ielts-light .ann-disp-hint {
  margin-top: 11px;
  padding: 8px 7px;
  background: color-mix(in srgb, var(--paper-honey, #B57A2E) 10%, transparent);
  color: var(--paper-ink, #2A1F12);
  border: 1px dashed color-mix(in srgb, var(--paper-honey, #B57A2E) 45%, transparent);
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Sign-in CTA when the user isn't logged in. */
body.is-ielts-light .ann-disp-locked {
  color: var(--paper-ink-mute, #8C7757);
}
/* The picker pill — small floating colour bar. */
body.is-ielts-light .ann-picker {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  box-shadow: 0 10px 26px -12px rgba(74, 58, 38, .25);
}
body.is-ielts-light .ann-picker-circle {
  background: color-mix(in srgb, var(--paper-tint) 80%, transparent);
  color: var(--paper-ink-soft);
}
body.is-ielts-light .ann-picker-tooltip { color: var(--paper-ink); }