/* ==========================================================================
   فهيم — Reading: hub (reading.html), lessons list (reading-lessons.html)
   and one lesson (reading-lesson.html). Sketchbook look from tokens.css:
   white cards with pencil borders, forest ink, yellow highlighter, sticky-note pastels.
   Text never animates (Safari drops Arabic marks under effects).
   ========================================================================== */
@media (min-width: 1321px) { .rl-page .app { grid-template-columns: var(--side-w) minmax(0, 1fr); } }
.rl-page .main { max-width: 1080px; gap: var(--s-24); align-content: start; }
.rl-page .main > * { min-width: 0; }
.rl-page bdi { unicode-bidi: isolate; }
.rl-page ol { list-style: none; margin: 0; padding: 0; }
.rl-page p { margin: 0; }
.rl-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rl-page .icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* progress bar shared by the hub and the list */
.rh-bar { position: relative; display: block; flex: 1; min-width: 80px; height: 8px; border-radius: var(--r-pill); background: var(--canvas); border: 1px solid var(--border-strong); overflow: hidden; }
.rh-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--c-reading); border-radius: var(--r-pill); }

/* ================= Hub (reading.html) =================
   The dashboard's language — white 28px cards on the colour wash, section tints, charcoal
   pills — in the Reading page's own arrangement: a journey card across the top (next step +
   a three-stage track), the two doors with a ring and a band line, accuracy per question type,
   then recent sessions beside the reading tools. */
.rh-page .main { gap: 20px; align-content: start; }
/* the summary under the title: a quiet line of figures — the number large, its label small, hairlines between
   (no pills). The level, when there is one, leads with a gold dot; a «mistakes to review» link reads as a link. */
.rh-chips { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 8px; margin-top: -10px; }
.rh-chips:empty { display: none; }
.rh-chip { display: inline-flex; align-items: baseline; gap: 6px; padding-inline: 18px; font-size: 13px; line-height: 1.5; color: var(--muted); white-space: nowrap; }
.rh-chip:first-child { padding-inline-start: 0; }
.rh-chip + .rh-chip { border-inline-start: 1px solid var(--border-strong); }
.rh-chip b { font-size: 18px; line-height: 1; font-weight: var(--w-semibold); color: var(--ink); font-variant-numeric: tabular-nums; }
.rh-chip--ink::before { content: ""; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--highlight); }
.rh-chip--link { color: var(--ink-2); text-decoration: none; transition: color var(--dur-fast); }
.rh-chip--link b { color: var(--terracotta); }
.rh-chip--link:hover, .rh-chip--link:focus-visible { color: var(--ink); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; }

/* the next step and one button — a plain white card; the section's colour appears only as the eyebrow's mark.
   The grammar hub adds its units between them (.rh-path): progress lines, gold only on the unit you are in */
.rh-next { --n-c: var(--c-reading); --n-t: var(--t-reading); --n-l: var(--l-reading);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 40px;
  padding: 26px 30px; border-radius: 28px; background: var(--surface); border: 1px solid rgba(23, 25, 23, .06); }
/* the same card in the other sections' colours (grammar.html, listening.html, speaking.html) */
.rh-next--grammar { --n-c: var(--c-grammar); --n-t: var(--t-grammar); --n-l: var(--l-grammar); }
.rh-next--listening { --n-c: var(--c-listening); --n-t: var(--t-listening); --n-l: var(--l-listening); }
.rh-next--speaking { --n-c: var(--c-speaking); --n-t: var(--t-speaking); --n-l: var(--l-speaking); }
.rh-next--writing { --n-c: var(--c-writing); --n-t: var(--t-writing); --n-l: var(--l-writing); }
.rh-next__main { min-width: 0; display: grid; gap: 6px; justify-items: start; }
.rh-next__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--n-c); font-size: 12.5px; font-weight: var(--w-semibold); }
.rh-next__eyebrow .icon { display: none; }
.rh-next__eyebrow::before { content: ""; width: 16px; height: 2px; border-radius: 2px; background: currentColor; }
.rh-next__title { font-size: 21px; line-height: 1.45; font-weight: var(--w-semibold); color: var(--ink); }
.rh-next__why { display: none !important; }   /* the title says the step; no sentence explaining it */
.rh-next__why--unused { font-size: 13.5px; line-height: 1.75; color: var(--muted); max-width: 46ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.rh-next__go { border-radius: var(--r-pill); min-height: 48px; padding-inline: 26px; white-space: nowrap; }

/* the grammar units: a thin progress line over each, a small numbered dot, the name and one fact */
.rh-next:has(> .rh-path) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) auto; }
.rh-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; border-inline-start: 1px solid var(--border); }
.rh-next .rh-path { padding-inline-start: 40px; }   /* (.rh-next: stronger than «.rl-page ol { padding: 0 }») */
.rh-path li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "bar bar" "dot txt"; align-items: start; gap: 14px 10px; }
.rh-path__bar { grid-area: bar; display: block; height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.rh-path__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--n-c); transition: width var(--dur-slow) var(--ease-out); }
.rh-path__dot { grid-area: dot; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--muted); border: 1px solid var(--border-strong); }
.rh-path__dot b { font-size: 12px; font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.rh-path__dot .icon { display: none; width: 13px; height: 13px; stroke-width: 2.6; }
.rh-path__txt { grid-area: txt; display: grid; gap: 1px; min-width: 0; }
.rh-path b { font-size: 14px; line-height: 1.5; font-weight: var(--w-semibold); color: var(--ink); }
.rh-path small { font-size: 12px; line-height: 1.5; color: var(--muted); }
.rh-path li.is-here .rh-path__dot { background: var(--highlight); border-color: var(--highlight); color: var(--ink); }
.rh-path li.is-here .rh-path__bar { background: color-mix(in srgb, var(--highlight) 30%, var(--border)); }
.rh-path li.is-done .rh-path__dot { background: var(--n-c); border-color: var(--n-c); color: #fff; }
.rh-path li.is-done .rh-path__dot b { display: none; }
.rh-path li.is-done .rh-path__dot .icon { display: block; }
.rh-path li.is-later b { color: var(--muted); font-weight: var(--w-medium); }
/* narrower screens: the text and button on one line, the stages under them */
@media (max-width: 1180px) {
  .rh-next:has(> .rh-path) { grid-template-columns: minmax(0, 1fr) auto; }
  .rh-path { grid-column: 1 / -1; grid-row: 2; border-inline-start: 0; border-top: 1px solid var(--border); }
  .rh-next .rh-path { padding: 22px 0 0; }
}

/* the two doors: the heart of the page — big, side by side, each with what's next inside */
.rh-doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.rh-doors .rh-door { min-height: 400px; padding: 28px 30px 30px; gap: 20px; border-radius: 32px; }
.rh-doors .rh-door__icon { width: 56px; height: 56px; border-radius: 18px; }
.rh-doors .rh-door__icon .icon { width: 28px; height: 28px; }
.rh-doors .rh-door__tag { font-size: 13.5px; padding: 6px 16px; }
.rh-doors .rh-door__figure { gap: 24px; }
.rh-doors .rh-door__title { font-size: clamp(30px, 2.8vw, 40px); }
.rh-doors .rh-door__sub { font-size: 14.5px; max-width: 460px; }
.rh-doors .rh-ring { width: 150px; height: 150px; }
.rh-doors .rh-ring::after { inset: 13px; }
.rh-doors .rh-ring b { font-size: 44px; }
.rh-doors .rh-ring small { font-size: 13px; }
.rh-doors .rh-score { width: 190px; padding: 18px 18px 12px; border-radius: 24px; }
.rh-doors .rh-score > b { font-size: 54px; }
.rh-doors .rh-spark svg { height: 44px; }
.rh-door__next { display: grid; gap: 2px; padding: 14px 18px; border-radius: 20px; background: rgba(255, 255, 255, .78); }
.rh-door__next[hidden] { display: none; }
.rh-door__next small { font-size: 12px; color: var(--k); font-weight: var(--w-semibold); }
.rh-door__next b { font-size: 16px; font-weight: var(--w-semibold); line-height: 1.5; text-align: start; }
.rh-door__next b[dir="ltr"] { text-align: end; }
.rh-doors .rh-door__go { padding: 14px 28px; font-size: 16px; }

/* the two doors + accuracy per type */
.rh-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(340px, 1fr); gap: 20px; align-items: stretch; }
.rh-door { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 300px; padding: 22px 24px 24px; border-radius: 28px;
  border: 1px solid var(--k-line); color: var(--ink); text-decoration: none; top: 0; transition: top var(--dur-fast), border-color var(--dur-fast); }   /* lift with top, never transform: it holds Arabic text */
/* lessons = gold ("start here"), practice = the vocab teal */
.rh-door--lessons { --k: var(--c-plan); --k-line: var(--l-plan); --k-tag: var(--highlight); background-color: var(--t-plan); }
.rh-door--practice { --k: var(--c-vocab); --k-line: var(--l-vocab); --k-tag: var(--l-vocab); --k-fill: var(--t-vocab); background-color: var(--t-vocab); }
.rh-door--exam { --k: var(--c-exam); --k-line: var(--l-exam); --k-tag: var(--l-exam); --k-fill: var(--t-exam); background-color: var(--t-exam); }
.rh-door:hover { top: -2px; border-color: var(--k); }
.rh-door:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.rh-door__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rh-door__icon { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: #fff; color: var(--k); }
.rh-door__icon .icon { width: 24px; height: 24px; }
.rh-door__tag { font-size: 12.5px; font-weight: var(--w-semibold); padding: 4px 14px; border-radius: var(--r-pill); background: var(--k-tag); }
.rh-door__figure { display: flex; align-items: center; gap: 18px; }
.rh-door__text { display: grid; gap: 6px; min-width: 0; }
.rh-door__title { font-size: 26px; line-height: 1.3; font-weight: var(--w-medium); }
.rh-door__sub { font-size: 13.5px; line-height: 1.8; color: var(--ink-2); }
/* --p is a registered number so the ring's fill can glide to its value (set by nav.js's count-up, with the number);
   only the ring repaints while it fills, nothing is laid out again */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
.rh-ring { position: relative; flex: none; width: 108px; height: 108px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: conic-gradient(var(--k) calc(var(--p) * 1%), rgba(255, 255, 255, .8) 0);
  transition: --p 1s cubic-bezier(.33, 1, .68, 1); }
@media (prefers-reduced-motion: reduce) { .rh-ring { transition: none; } }
.rh-ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: color-mix(in srgb, var(--k-fill, var(--t-plan)) 40%, #fff); }
.rh-ring b, .rh-ring small { position: relative; z-index: 1; }
.rh-ring b { font-size: 30px; font-weight: var(--w-medium); line-height: 1.1; }
.rh-ring small { font-size: 12px; color: var(--ink-2); }
.rh-score { flex: none; width: 150px; display: grid; gap: 2px; padding: 14px 14px 10px; border-radius: 20px; background: rgba(255, 255, 255, .78); }
.rh-score > b { font-size: 38px; font-weight: var(--w-regular); line-height: 1.05; }
.rh-score > small { font-size: 12px; color: var(--ink-2); }
.rh-spark { display: grid; gap: 2px; margin-top: 6px; color: var(--k); }
.rh-spark svg { display: block; width: 100%; height: 36px; overflow: visible; }
.rh-spark small { font-size: 11.5px; color: var(--muted); }
.rh-door__progress { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: var(--w-medium); }
.rh-door__progress .rh-bar { background: rgba(255, 255, 255, .8); border-color: var(--k-line); }
.rh-door__progress .rh-bar i { background: var(--k); }
.rh-door__stats { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-door__stats li { display: flex; align-items: baseline; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .8); font-size: 13px; }
.rh-door__stats b { font-size: 15px; font-weight: var(--w-bold); }
.rh-door__go { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--on-accent); font-weight: var(--w-semibold); font-size: 15px; }
.rh-door__go::after { content: "←"; }

.rh-card { min-width: 0; padding: 22px 24px; border-radius: 28px; background: var(--surface); border: 1px solid rgba(255, 255, 255, .9); }
.rh-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.rh-card__head h2 { font-size: 21px; line-height: 1.4; font-weight: var(--w-medium); }
.rh-card__head p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.rh-pill { flex: none; padding: 6px 15px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); font-size: 13px; color: var(--ink-2); }
.rh-pill:hover { border-color: var(--ink); color: var(--ink); }
.rh-empty { font-size: 13.5px; line-height: 1.8; color: var(--muted); padding: 8px 0; }

/* name and number on one line, the bar under them at full width: long names («True / False / Not Given») never meet the bar */
.rh-types__list li:not(.rh-empty) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 11px 0; }
.rh-types__list li + li { border-top: 1px solid var(--border); }
.rh-types__name { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: var(--w-semibold); }
.rh-types__name bdi { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-types__name em { flex: none; font-style: normal; font-size: 11.5px; font-weight: var(--w-semibold); padding: 1px 9px; border-radius: var(--r-pill); background: var(--t-exam); color: var(--c-exam); }
.rh-types__bar { grid-column: 1 / -1; grid-row: 2; display: block; height: 8px; border-radius: 8px; background: var(--lilac); overflow: hidden; }
.rh-types__bar i { display: block; height: 100%; border-radius: inherit; }
.rh-types__list .is-low .rh-types__bar i { background: var(--c-exam); }
.rh-types__list .is-mid .rh-types__bar i { background: var(--highlight); }
.rh-types__list .is-high .rh-types__bar i { background: var(--c-speaking); }
.rh-types__pct { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; white-space: nowrap; }
.rh-types__pct b { font-size: 15px; font-weight: var(--w-semibold); }
.rh-types__pct small { font-size: 11.5px; color: var(--muted); }
.rh-types__list .is-none .rh-types__pct b { color: var(--muted); }   /* not tried yet: «—» */

/* recent sessions + tools */
.rh-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(280px, .85fr); gap: 20px; align-items: stretch; }
.rh-recent__list li:not(.rh-empty) { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; }
.rh-recent__list li + li { border-top: 1px solid var(--border); }
.rh-recent__ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--t-vocab); color: var(--c-vocab); }
.rh-recent__list .is-exam .rh-recent__ico { background: var(--t-exam); color: var(--c-exam); }
.rh-recent__list .is-learn .rh-recent__ico { background: var(--t-reading); color: var(--c-reading); }
.rh-recent__ico .icon { width: 21px; height: 21px; }
.rh-recent__main { display: grid; gap: 2px; min-width: 0; }
.rh-recent__main b { font-size: 14px; font-weight: var(--w-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: end; }
.rh-recent__main small { font-size: 12px; color: var(--muted); }
.rh-recent__list li:has(a) { position: relative; }
.rh-recent__main a { min-width: 0; color: inherit; text-decoration: none; display: grid; }
.rh-recent__main a::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }   /* the whole row opens it */
.rh-recent__main a:hover b { text-decoration: underline; }
.rh-recent__n { text-align: end; }
.rh-recent__n b { display: block; font-size: 22px; font-weight: var(--w-regular); line-height: 1.15; }
.rh-recent__n small { font-size: 11.5px; color: var(--muted); }
.rh-row--two { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); }
.rh-more { display: grid; align-content: start; }
/* the bottom row: one head height and one row height in all three cards, so their rows sit on the same lines */
.rh-row .rh-card__head { min-height: 38px; align-items: center; }
.rh-row :is(.rh-types__list, .rh-recent__list) li:not(.rh-empty), .rh-row .rh-tool { box-sizing: border-box; height: 74px; padding-block: 0; align-content: center; }
button.rh-tool { width: 100%; font: inherit; text-align: start; background: none; border: 0; cursor: pointer; }
.rh-tool { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 18px; color: var(--ink); text-decoration: none; transition: background-color var(--dur-fast); }
.rh-tool:hover { background: var(--lilac); }
.rh-tool:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rh-tool__ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--t-reading); color: var(--c-reading); }
.rh-tool__ico .icon { width: 21px; height: 21px; }
.rh-tool b { display: block; font-size: 14.5px; font-weight: var(--w-semibold); }
.rh-tool small { display: block; font-size: 12px; color: var(--muted); line-height: 1.6; }
.rh-tool__go { width: 18px; height: 18px; color: var(--muted); }

@media (max-width: 1280px) {
  .rh-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rh-more { grid-column: 1 / -1; }
  .rh-row--two .rh-more { grid-column: auto; }
}
@media (max-width: 960px) {
  .rh-card { border-color: var(--border); }
  .rh-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .rh-doors { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rh-grid, .rh-row { grid-template-columns: minmax(0, 1fr); }
  .rh-doors .rh-door { min-height: 0; padding: 22px; }
  .rh-doors .rh-ring { width: 120px; height: 120px; }
  .rh-next, .rh-next:has(> .rh-path) { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; border-radius: 24px; }
  .rh-next__title { font-size: 18px; }
  /* phones: the stages as a short list — the dot, then the name with its line under it */
  .rh-path { grid-row: auto; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rh-next .rh-path { padding-top: 18px; }
  .rh-path li { grid-template-areas: "dot txt" "dot bar"; gap: 6px 12px; }
  .rh-path__bar { margin-top: 2px; }
  .rh-chip { padding-inline: 0 14px; }
  .rh-chip + .rh-chip { border-inline-start: 0; }
  .rh-door { min-height: 0; }
  .rh-door__figure { flex-direction: column; align-items: flex-start; }
}

/* ================= Lessons list ================= */
.rll-top { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; background: var(--t-reading); border-color: var(--l-reading); }
.rll-top__text { flex: 1 1 340px; min-width: 0; display: grid; gap: 6px; }
.rll-top .card__sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.7; }
.rll-top__bar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-2); max-width: 420px; }
.rll-top__bar .rh-bar { background: rgba(255, 255, 255, .7); }
#rll-groups { display: grid; gap: var(--s-24); }
/* writing-lessons.html: Task 1 · Task 2, one open at a time (the squares above them choose) */
.wl-panel { display: grid; gap: var(--s-24); }
body:not([data-panel="task1"]) [data-panel-of="task1"], body:not([data-panel="task2"]) [data-panel-of="task2"] { display: none; }
.wl-more { padding-inline: 4px; font-size: 14px; }
.rll-group { display: grid; gap: 12px; }
.rll-group__head { display: flex; align-items: center; gap: 12px; padding-inline: 4px; }
.rll-group__head > div { flex: 1; min-width: 0; }
.rll-group__n { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c-reading); color: #fff; font-weight: var(--w-display); }
.rll-group__count { flex: none; font-size: 13px; font-weight: var(--w-semibold); color: var(--ink-2); padding: 3px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); direction: ltr; }
.rll-list { display: grid; gap: 10px; }
.rll-item { position: relative; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); transition: border-color var(--dur-fast); }
.rll-item:hover { border-color: var(--l-reading); }
.rll-item.is-next { border-color: var(--highlight-edge); background: color-mix(in srgb, var(--highlight-soft) 50%, var(--surface)); }
.rll-item__link { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; color: inherit; text-decoration: none; border-radius: inherit; }
.rll-item__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rll-item__n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--t-reading); color: var(--c-reading); border: 1.5px solid var(--l-reading); }
.rll-item__n b { font-size: 14px; font-weight: var(--w-display); }
.rll-item__n .icon { display: none; width: 18px; height: 18px; stroke-width: 2.4; }
.rll-item.is-next .rll-item__n { background: var(--highlight); border-color: var(--highlight); color: var(--ink); }
.rll-item.is-done .rll-item__n { background: var(--c-reading); border-color: var(--c-reading); color: #fff; }
.rll-item.is-done .rll-item__n b { display: none; }
.rll-item.is-done .rll-item__n .icon { display: block; }
.rll-item__body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.rll-item__title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 16.5px; font-weight: var(--w-display); line-height: 1.5; }
.rll-item__sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }
.rll-item__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--muted); }
.rll-item__meta .icon { width: 14px; height: 14px; }
.rll-item__meta .ltr { font-family: var(--font); }
.rll-chip { font-size: 11px; font-weight: var(--w-semibold); padding: 1px 10px; border-radius: var(--r-pill); line-height: 1.8; }
.rll-chip--done { background: var(--accent-soft); color: var(--ink); }
.rll-chip--next { background: var(--highlight); }
.rll-item__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 18px; padding: 10px 0 14px; border-top: 1px dashed var(--border-strong); font-size: 13.5px; color: var(--ink-2); }
.rll-item__foot > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.rll-item__foot b { color: var(--ink); font-weight: var(--w-semibold); }
.rll-item__foot .icon { width: 16px; height: 16px; flex: none; }
.rll-item__foot .btn { white-space: nowrap; }
.rll-item__foot:not(.is-done) { margin: 0 10px 10px; padding: 10px 12px; border: 1px solid var(--ink); border-radius: 10px; background: var(--highlight-soft); }
.rll-note { font-size: 12.5px; color: var(--muted); padding-inline: 4px; }

/* ================= One lesson ================= */
/* header: crumbs, then the name with room around it, the one-line aim, then small tags */
.rlv-page .sp-crumbs { margin-bottom: 10px; }
.rlv-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.rlv-page .dash-title { font-size: 28px; line-height: 1.35; }
.rlv-en { font-size: 15px; font-weight: var(--w-semibold); color: var(--ink-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); padding: 2px 12px; line-height: 1.6; align-self: center; }
.rlv-page .dash-sub { margin-top: 6px; font-size: 14.5px; line-height: 1.8; }
.rlv-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rlv-kicker:empty { display: none; }
.rlv-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 2px 10px; line-height: 1.7; }
.rlv-tag .icon { width: 14px; height: 14px; }
.rlv-page .dash-sub .ltr { font-family: var(--font); }
.rlv { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: var(--s-24); align-items: start; }
.rlv-body { display: grid; gap: var(--s-24); min-width: 0; grid-column: 1; grid-row: 1; }
.rlv-toc { grid-column: 2; grid-row: 1; position: sticky; top: var(--s-16); }
.rlv-toc details { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); padding: 12px; }
.rlv-toc summary { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--w-semibold); cursor: pointer; list-style: none; padding: 2px 4px 8px; }
.rlv-toc summary::-webkit-details-marker { display: none; }
.rlv-toc ol { display: grid; gap: 2px; }
.rlv-toc a { display: block; padding: 7px 10px; border-radius: 8px; font-size: 13px; line-height: 1.6; color: var(--ink-2); text-decoration: none; }
.rlv-toc a:hover { background: var(--lilac); color: var(--ink); }
.rlv-toc a.is-on { background: var(--highlight); color: var(--ink); font-weight: var(--w-semibold); }

.rl-intro { display: grid; gap: 12px; padding: 22px 26px; border-radius: var(--r-card); background: var(--lilac); border: 1px dashed var(--border-strong); }
.rl-intro .rl-p { font-size: 16px; }
.rl-sec { display: grid; gap: 22px; padding: 32px 36px; scroll-margin-top: 16px; }
.rl-sec > * { min-width: 0; }
.rl-sec--sum { background: var(--tint-violet); border-color: var(--border-strong); }
.rl-h2 { font-size: 20px; line-height: 1.45; font-weight: var(--w-display); }
.rl-h2::after { content: ""; display: block; width: 44px; height: 4px; margin-top: 6px; border-radius: var(--r-pill); background: var(--highlight); }
.rl-sec--sum .rl-h2::after { background: var(--ink); }
.rl-h3 { font-size: 17px; line-height: 1.5; font-weight: var(--w-display); margin-top: 18px; padding-top: 26px; border-top: 1.5px dashed var(--border); }
.rl-p { font-size: 15.5px; line-height: 1.9; color: var(--ink); }
.rl-p b, .rl-ul b, .rl-steps b, .rl-card b, .rl-note b { font-weight: var(--w-bold); }
.rl-ul { display: grid; gap: 12px; }
.rl-ul li { position: relative; padding-inline-start: 20px; font-size: 15.5px; line-height: 1.85; }
.rl-ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .75em; width: 8px; height: 8px; border-radius: 50%; background: var(--highlight); border: 1.5px solid var(--border-strong); }
.rl-sec--sum .rl-ul li::before { background: var(--surface); }
.rl-label { justify-self: start; font-size: 12.5px; font-weight: var(--w-semibold); padding: 2px 12px; border-radius: var(--r-pill); background: var(--lilac); border: 1px solid var(--border-strong); color: var(--ink-2); margin-top: 4px; }
.rl-answer { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 15.5px; }
.rl-answer__k { font-size: 12.5px; font-weight: var(--w-semibold); padding: 2px 12px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-accent); }
.rl-answer__v { font-weight: var(--w-bold); }

/* exam paper: passages and questions, left to right */
.rl-paper { display: grid; gap: 10px; padding: 20px 22px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong);
  border-inline-start: 4px solid var(--border-strong); text-align: left; font-size: 15px; line-height: 1.85; }
.rl-paper--text { background: #fffef8; border-inline-start-color: var(--ink); }
.rl-line { display: flex; gap: 10px; white-space: pre-wrap; }
.rl-line > span:last-child { min-width: 0; }
.rl-key { flex: none; min-width: 26px; font-weight: var(--w-bold); color: var(--ink-2); }
.rl-paper .gap { display: inline-block; width: 1.6em; }
.rl-paper b { font-weight: var(--w-bold); }

/* colour marks (from the teacher's colours): they link a question to its place in the passage */
.mk { background: none; color: inherit; font-weight: var(--w-semibold); border-radius: 3px; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mk-b { color: #1c5aa3; background: #e3eefb; }
.mk-o { color: #a2470c; background: #fde7d4; }
.mk-g { color: #2c6a10; background: #e1f2d3; }
.mk-r { color: #ad2316; background: #fbe0dc; }
.mk-p { color: #6a2b90; background: #f0e2f8; }
.mk-ans { color: var(--ink); background: var(--highlight); font-weight: var(--w-bold); padding: 0 6px; }
/* a listening script: where the answer was heard, as a highlighter stroke under the words */
.mk-at { padding: 0; font-weight: var(--w-bold); box-shadow: inset 0 -.42em 0 color-mix(in srgb, var(--highlight) 75%, transparent); }
/* inside an example the colours wait for the answer (they give it away) */
.rl-ex:not(.is-open) .mk { color: inherit; background: none; padding: 0; font-weight: inherit; box-shadow: none; }
/* the question paper: options under their question, a form's label and its blank */
.rl-line--o { padding-inline-start: 36px; }
.rl-line--f { padding-inline-start: 12px; }
/* a numbered part of a lesson (a mistake, a tip, a question type) */
.rl-h2__n { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-inline-end: 10px; vertical-align: 2px; border-radius: 50%;
  background: var(--highlight); border: 1.5px solid var(--border-strong); font-size: 15px; }
.rlv-toc .rl-h2__n { display: inline; margin-inline-end: 6px; background: none; border: 0; font-size: inherit; }
.rlv-toc .rl-h2__n::after { content: "."; }
.rlv-toc .rl-h2__en { display: none; }      /* the part's English name: on the heading, not in the contents */
.rl-h2__en { font-weight: var(--w-medium); color: var(--ink-2); }

/* tables */
.rl-tablewrap { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: 10px; }
.rl-tablewrap:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rl-table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.7; }
.rl-table th { background: var(--lilac); font-weight: var(--w-semibold); text-align: start; padding: 12px 16px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.rl-table td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: top; }
.rl-table tr:first-child td { border-top: 0; }
.rl-table th b { font-weight: inherit; }

/* note boxes */
.rl-note { display: flex; gap: 14px; padding: 18px 20px; border-radius: 10px; background: var(--canvas); border: 1px dashed var(--border-strong); }
.rl-note .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--ink-2); }
.rl-note > div { display: grid; gap: 6px; min-width: 0; font-size: 14.5px; line-height: 1.85; }
.rl-note__t { font-weight: var(--w-bold); }
.rl-note--warn { background: #fff5ec; border: 1px solid #f0c5a6; }
.rl-note--warn .icon { color: var(--terracotta); }
.rl-note .mk { background: none; padding: 0; }

/* steps across (◀) and down (▼) */
.rl-flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; }
.rl-flow li { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--border-strong); font-size: 14px; line-height: 1.75; text-align: center; }
.rl-flow li + li::before { content: "←"; position: absolute; inset-inline-end: calc(100% + 6px); top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ink-2); }
.rl-flow__t { font-size: 15px; font-weight: var(--w-display); }
.rl-steps { display: grid; gap: 0; }
.rl-steps li { position: relative; display: flex; gap: 14px; padding-bottom: 22px; }
.rl-steps li:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 16px; top: 36px; bottom: 2px; border-inline-start: 2px dashed var(--border-strong); }
.rl-steps__n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--highlight); border: 1.5px solid var(--border-strong); font-weight: var(--w-display); }
.rl-steps li > div { display: grid; gap: 4px; padding-top: 4px; min-width: 0; font-size: 14.5px; line-height: 1.8; }
.rl-steps__t { font-size: 15.5px; }

/* side-by-side cards */
.rl-cards { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 16px; }
.rl-card { display: grid; align-content: start; gap: 6px; padding: 18px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--border-strong); font-size: 14px; line-height: 1.75; text-align: center; }
.rl-card:nth-child(4n+1) { background: #f1f9ea; }
.rl-card:nth-child(4n+2) { background: #eaf7f7; }
.rl-card:nth-child(4n+3) { background: #fdf1e8; }
.rl-card:nth-child(4n+4) { background: #faeefe; }
.rl-card__t { font-size: 15.5px; font-weight: var(--w-display); }

.rl-kv { display: grid; gap: 12px; }
.rl-kv > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 14px 18px; border-radius: 10px; background: var(--canvas); border: 1px solid var(--border); font-size: 14.5px; line-height: 1.75; }
.rl-kv dt { font-weight: var(--w-bold); }

.rl-words { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px; border-radius: 10px; border: 1.5px solid var(--border-strong); background: var(--surface); }
.rl-words li { display: inline-flex; gap: 8px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--canvas); border: 1px solid var(--border-strong); font-size: 14px; }
.rl-words b { font-weight: var(--w-display); }
/* a few short English words side by side (the common Part 2 topics) */
.rl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rl-chips li { padding: 5px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border-strong); font-size: 14.5px; font-weight: var(--w-semibold); }

/* writing: the colour of each part of an essay (Paraphrase · Plan · Outline, Topic · Support · Example …);
   gold is an extra detail or a result */
.mk-y { color: #7a5800; background: #fbefc6; }
.rl-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.rl-legend__i { --k: var(--ink-2); display: inline-flex; align-items: center; gap: 8px; padding-block: 5px; padding-inline: 10px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--border-strong); font-size: 14px; }
.rl-legend__i::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--k); }
.rl-legend__i b { font-weight: var(--w-semibold); }
.rl-legend__i--b { --k: #1c5aa3; } .rl-legend__i--g { --k: #2c6a10; } .rl-legend__i--r { --k: #ad2316; }
.rl-legend__i--o { --k: #c2570f; } .rl-legend__i--y { --k: #c79a12; }
/* the question's words → the words the essay uses instead */
.rl-swap { display: grid; grid-template-columns: max-content auto minmax(0, 1fr); gap: 10px 12px; align-items: baseline;
  padding: 16px 20px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); text-align: left; font-size: 15px; line-height: 1.7; }
.rl-swap li { display: contents; }
.rl-swap__a { color: var(--ink-2); }
.rl-swap__op { color: var(--ink-2); font-weight: var(--w-bold); }
.rl-swap__b { text-align: left; }                     /* an Arabic note («إضافة اختيارية…») sits right after its «+», not at the far side */
.rl-swap__b:not(:has(bdi)) { color: var(--ink-2); font-size: 14px; }
/* a plan: P1 · P2 · O as small tags */
.rl-paper--plan .rl-key { min-width: 38px; height: fit-content; padding: 0 8px; border-radius: 6px; background: var(--lilac); border: 1px solid var(--border-strong);
  text-align: center; font-size: 13.5px; color: var(--ink); }
/* a row of a table that names the rows under it */
.rl-table .rl-table__group th { background: var(--canvas); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--ink-2); white-space: normal; }
.rl-kv--wide > div { grid-template-columns: 200px minmax(0, 1fr); }
/* the essay checklist: eight points in two groups; a review ticks each one with where it shows */
.rl-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.rl-check__g { --k: var(--ink); display: grid; gap: 12px; padding: 18px 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-strong); border-top: 4px solid var(--k); }
.rl-check__g--r { --k: #ad2316; } .rl-check__g--g { --k: #2c6a10; }
.rl-check__h { font-size: 13px; font-weight: var(--w-bold); color: var(--k); }
.rl-check ul { display: grid; gap: 14px; }
.rl-check li { display: grid; gap: 2px; font-size: 14.5px; line-height: 1.75; }
.rl-check li > b { justify-self: start; font-weight: var(--w-bold); }
.rl-check li > span { color: var(--ink-2); }
.rl-check--review li { grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; }
.rl-check--review li > .icon { grid-row: span 2; width: 22px; height: 22px; padding: 3px; margin-top: 2px; border-radius: 50%; background: var(--k); color: #fff; stroke-width: 3; }
@media (max-width: 640px) {
  .rl-check { grid-template-columns: minmax(0, 1fr); }
  .rl-kv--wide > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rl-swap { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 14px; font-size: 14.5px; }
  .rl-swap li { display: block; padding-block: 6px; }
  .rl-swap li + li { border-top: 1px solid var(--border); }
  .rl-swap__op { margin-inline: 6px; }
}

.rl-fig { margin: 0; padding: 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); }
.rl-fig img { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; }

/* TFNG decision tree */
.rl-tree { display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 14px; line-height: 1.7; }
.rl-tree__q { padding: 10px 16px; border-radius: 10px; background: var(--surface); border: 1.5px solid var(--border-strong); max-width: 340px; }
.rl-tree__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.rl-tree__br { display: grid; gap: 8px; justify-items: center; align-content: start; }
.rl-tree__edge { font-size: 12.5px; font-weight: var(--w-bold); padding: 0 10px; border-radius: var(--r-pill); background: var(--lilac); border: 1px solid var(--border-strong); }
.rl-tree__edge::before { content: "↓ "; }
.rl-tree__end { padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-strong); min-width: 0; max-width: 100%; }
.rl-tree__q, .rl-tree__br { min-width: 0; max-width: 100%; }
.rl-tree__end--ng { background: #eeeee8; }
.rl-tree__end--t { background: #e1f2d3; }
.rl-tree__end--f { background: #fbe0dc; }
.rl-tree .mk { background: none; color: inherit; padding: 0; }

/* examples: try first, then the answer */
.rl-ex { display: grid; gap: 16px; padding: 22px 24px 24px; border-radius: var(--r-card); background: #fbfaf3; border: 1.5px solid var(--border-strong); }
.rl-ex > * { min-width: 0; }
.rl-ex__tag { justify-self: start; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--highlight-soft); border: 1.5px solid var(--highlight-line); font-size: var(--text-body); font-weight: var(--w-semibold); color: var(--ink); }
.rl-ex__tag .icon { width: 18px; height: 18px; flex: none; color: var(--highlight-edge); }
.rl-ex__btn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 26px; font-size: var(--text-sub); font-weight: var(--w-semibold); }
.rl-ex__btn .icon { width: 18px; height: 18px; }
.rl-ex__reveal { display: grid; gap: 16px; padding-top: 18px; border-top: 1.5px dashed var(--border-strong); }
.rl-ex__reveal > * { min-width: 0; }

/* the end of the lesson */
.rlv-end { display: grid; gap: 10px; scroll-margin-top: 16px; border-color: var(--border-strong); }
.rlv-end__k { font-size: 12.5px; font-weight: var(--w-semibold); color: var(--ink-2); }
.rlv-end .card__title { font-size: 20px; }
.rlv-body > *, .rlv-end > * { min-width: 0; max-width: 100%; }
/* the guide: one row per step, a line joining the numbers */
.rlv-steps { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.rlv-step { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.rlv-step:last-child { padding-bottom: 0; }
.rlv-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 17px; top: 38px; bottom: 4px; width: 2px; background: var(--border-strong); }
.rlv-step.is-done:not(:last-child)::before { background: var(--ink); }
.rlv-step__n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: var(--w-display);
  background: var(--canvas); border: 1.5px solid var(--border-strong); color: var(--muted); }
.rlv-step__n .icon { width: 18px; height: 18px; stroke-width: 2.6; }
.rlv-step.is-done .rlv-step__n { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.rlv-step.is-now .rlv-step__n { background: var(--highlight); border: 2px solid var(--ink); color: var(--ink); }
.rlv-step__body { flex: 1; min-width: 0; display: grid; gap: 4px; padding-top: 5px; }
.rlv-step__t { font-size: 15.5px; font-weight: var(--w-semibold); line-height: 1.6; }
.rlv-step.is-now .rlv-step__t { font-size: 17px; font-weight: var(--w-display); }
.rlv-step.is-later .rlv-step__t { color: var(--muted); font-weight: var(--w-medium, 500); }
.rlv-step.is-done .rlv-step__t { color: var(--ink-2); }
.rlv-step__sub { font-size: 14px; color: var(--ink-2); line-height: 1.75; }
.rlv-step.is-now { padding-bottom: 22px; }
.rlv-step.is-now .rlv-step__body { padding: 12px 14px; margin-top: -4px; border-radius: var(--r-card); background: var(--tint-violet); border: 1px solid var(--ink); gap: 6px; }
.rlv-step__act { margin-top: 4px; }
.rlv-step__act .btn { display: inline-flex; align-items: center; gap: 8px; white-space: normal; max-width: 100%; }
.rlv-step__act .btn .icon { width: 17px; height: 17px; }
.rlv-step__again { font-size: 13px; }
.rlv-end__undo { font-size: 12.5px; color: var(--muted); }
.rlv-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.rlv-pn__a { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--r-card); border: 1px solid var(--border-strong); background: var(--surface); color: inherit; text-decoration: none; }
.rlv-pn__a:hover { border-color: var(--ink); }
.rlv-pn__a small { font-size: 12px; color: var(--muted); }
.rlv-pn__a b { font-weight: var(--w-semibold); }
.rlv-pn__a--next { text-align: end; grid-column: 2; }

/* ================= Phones & tablets ================= */
@media (max-width: 1100px) {
  .rlv { grid-template-columns: minmax(0, 1fr); }
  .rlv-toc { grid-column: 1; grid-row: 1; position: static; }
  .rlv-toc summary { padding-bottom: 6px; }
  .rlv-toc ol { display: flex; flex-wrap: wrap; gap: 6px; }
  .rlv-toc a { padding: 4px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--canvas); font-size: 12.5px; }
  .rlv-body { grid-row: 2; }
}
@media (max-width: 760px) {
  .rh-next__go { width: 100%; justify-content: center; }
  .rll-top .btn { width: 100%; justify-content: center; }
  .rl-flow { grid-auto-flow: row; grid-auto-columns: auto; gap: 26px; }
  .rl-flow li + li::before { content: "↓"; inset-inline-end: auto; inset-inline-start: 50%; top: auto; bottom: calc(100% + 2px); transform: translateX(50%); }
  .rl-cards { grid-template-columns: minmax(0, 1fr); }
  .rl-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rl-paper { padding: 14px; font-size: 14.5px; }
  .rl-tree { font-size: 12.5px; }
  .rl-tree__split { gap: 6px; }
  .rl-tree__q, .rl-tree__end { padding: 8px; }
  .rl-table { font-size: 13px; }
  .rl-table th { white-space: normal; padding: 8px; }
  .rl-table td { padding: 8px; overflow-wrap: anywhere; }
  .rl-ex { padding: 12px 10px 14px; }
  .rl-ex__tag { border-radius: 14px; font-size: 15px; }
  .rl-ex__btn { font-size: var(--text-body); padding: 12px 20px; }
  .rl-sec { padding: 22px 16px; gap: 18px; }
  .rlv-page .dash-title { font-size: 23px; }
  .rlv-pn { grid-template-columns: minmax(0, 1fr); }
  .rlv-pn__a--next { grid-column: 1; }
  .rll-item__link { padding: 14px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .rh-door, .rh-door:hover { transition: none; top: 0; } }


/* ==========================================================================
   Inside the Lessons door: the door's gold carries through, in the dashboard's
   language — a hero card with a ring, each part of the course as a white card,
   lessons as one list, one lesson per row, the lesson itself under a gold header.
   ========================================================================== */
/* lessons list */
.rll-top { --k: var(--c-plan); gap: 20px 28px; padding: 26px 28px; border-radius: 30px; border: 1px solid var(--l-plan) !important;
  background: linear-gradient(115deg, var(--t-plan) 0%, color-mix(in srgb, var(--t-plan) 45%, #fff) 65%, #fff 100%) !important; }
.rll-ring { width: 118px; height: 118px; }
.rll-ring b { font-size: 34px; }
.rll-top .card__title { font-size: clamp(22px, 2.2vw, 28px); font-weight: var(--w-medium); }
.rll-top .card__sub { font-size: 14.5px; }
.rll-top .rh-bar i { background: var(--c-plan); }
.rll-top .btn { border-radius: var(--r-pill); min-height: 50px; padding-inline: 26px; }
.rll-group { gap: 16px; padding: 22px 24px 24px; border-radius: 28px; background: var(--surface); border: 1px solid rgba(255, 255, 255, .9); }
.rll-group__head { padding-inline: 0; }
.rll-group__head .card__title { font-size: 21px; font-weight: var(--w-medium); }
.rll-group__n { width: 40px; height: 40px; border-radius: 13px; background: var(--highlight) !important; color: var(--ink) !important; border-color: var(--highlight) !important; }
.rll-group__count { border: 0; background: var(--lilac); }
.rll-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rll-item { border-radius: 20px; border: 1px solid var(--border) !important; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.rll-item:hover { border-color: var(--l-plan) !important; background: color-mix(in srgb, var(--t-plan) 35%, #fff); }
.rll-item.is-next { border-color: var(--highlight-edge) !important; background: linear-gradient(140deg, var(--t-plan), color-mix(in srgb, var(--t-plan) 40%, #fff)); }
.rll-item__link { padding: 16px 18px; }
.rll-item__n { width: 40px; height: 40px; background: var(--t-plan) !important; color: var(--c-plan) !important; border: 1.5px solid var(--l-plan) !important; }
.rll-item.is-next .rll-item__n { background: var(--highlight) !important; border-color: var(--highlight) !important; color: var(--ink) !important; }
.rll-item.is-done .rll-item__n { background: var(--c-speaking) !important; border-color: var(--c-speaking) !important; color: #fff !important; }
.rll-chip--done { background: var(--t-speaking); color: var(--c-speaking); }
.rll-item__foot:not(.is-done) { border-radius: 16px; border-color: var(--l-plan); }

/* a single lesson */
.rlv-page .dash-head { padding: 24px 28px; border-radius: 30px; border: 1px solid var(--l-plan);
  background: linear-gradient(115deg, var(--t-plan) 0%, color-mix(in srgb, var(--t-plan) 45%, #fff) 65%, #fff 100%); }
.rlv-page .dash-tools:empty { display: none; }
.rlv-toc { padding: 16px; border-radius: 24px; background: var(--surface); border: 1px solid rgba(255, 255, 255, .9); }
.rlv-toc a { border-radius: 12px; padding: 8px 12px; }
.rlv-toc a.is-on { background: var(--ink); color: var(--on-accent); }
.rl-intro { border: 1px solid var(--l-plan); border-radius: 20px; background: color-mix(in srgb, var(--t-plan) 60%, #fff); }
.rlv-page .rl-sec.card { border-radius: 28px; }
.rlv-pn__a { border-radius: 20px; border-color: var(--border); padding: 14px 18px; }
.rlv-pn__a:hover { border-color: var(--l-plan); background: color-mix(in srgb, var(--t-plan) 35%, #fff); }
@media (max-width: 960px) {
  .rll-group, .rlv-toc { border-color: var(--border); }
  .rlv-page .dash-head { padding: 18px 20px; border-radius: 24px; }
}

/* writing Task 1 (data/writing-lessons/t1-*.json): the Word files' colours on cells, sentence patterns joined by «+»,
   a sentence in its coloured parts, pictures side by side with their lines, a review point hardly used («–») */
.rl-c--b { --k: #1c5aa3; --k-soft: #e3eefb; }
.rl-c--o { --k: #c2570f; --k-soft: #fde7d4; }
.rl-c--g { --k: #2c6a10; --k-soft: #e1f2d3; }
.rl-c--r { --k: #ad2316; --k-soft: #fbe0dc; }
.rl-c--y { --k: #8a6400; --k-soft: #fbefc6; }
.rl-c--n { --k: #5d5d6b; --k-soft: #ececf0; }
.rl-table td[class*="rl-c--"] { background: var(--k-soft); }
.rl-table th[class*="rl-c--"] { background: var(--k); color: #fff; }
.rl-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rl-formula__i { padding: 5px 14px; border-radius: var(--r-pill); background: var(--k-soft); color: var(--k); border: 1.5px solid color-mix(in srgb, var(--k) 45%, transparent);
  font-size: 14.5px; font-weight: var(--w-bold); line-height: 1.6; }
.rl-formula__plus { color: var(--ink-2); font-weight: var(--w-bold); }
/* one sentence, read as a sentence: each part underlined in its colour, its name in small letters under it */
.rl-parts { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 4px; padding: 16px 20px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); }
.rl-parts__i { display: inline-flex; flex-direction: column-reverse; align-items: center; min-width: 0; max-width: 100%; }
.rl-parts__i > span { padding: 1px 3px 2px; border-bottom: 3px solid var(--k); background: color-mix(in srgb, var(--k-soft) 60%, transparent); font-size: 15.5px; line-height: 1.7; }
.rl-parts__i > small { margin-top: 3px; font-size: 11.5px; line-height: 1.4; font-weight: var(--w-semibold); color: var(--k); white-space: nowrap; }
.rl-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.rl-fig figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); text-align: center; }
.rl-steps li > div:has(> .rl-steps__t > bdi[dir="ltr"]) { flex: 1; }
.rl-steps__t > bdi[dir="ltr"] { display: block; text-align: left; }
.rl-check li.is-off > b { color: var(--ink-2); }
.rl-swap--why { grid-template-columns: max-content auto max-content minmax(0, 1fr); }
.rl-swap__why { color: var(--ink-2); font-size: 14px; text-align: right; }
@media (max-width: 640px) { .rl-swap--why { grid-template-columns: minmax(0, 1fr); } .rl-swap__why { display: block; margin-top: 2px; text-align: start; } }
.rl-check__off { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--k); color: var(--k); font-weight: var(--w-bold); line-height: 1; }