/* ───────────────────────────────────────────────────────────────────
       STUDENT LESSON READER  (paginated — one section per page)
       Hash route #read/{tenant}/{course}/{lessonId}[/{n}|/done]

       Layout: app-style header + pip nav + single-section page + nav footer.
       Daily-use design — warm cream + deep ink + Fraunces display.
       Tokens: --bg, --bg-tint, --ink, --ink-soft, --ink-mute, --line,
       --line-soft, --accent-warm, --accent-blue, --gold, plus
       --read-wrong / --read-right for comparison blocks.
       ─────────────────────────────────────────────────────────────────── */
    :root {
      --read-wrong:    #C2563E;
      --read-wrong-bg: #FBEEE8;
      --read-right:    #2A6B47;
      --read-right-bg: #E9F2EC;
      --read-content-max: 720px;
      --read-header-h:    58px;
      --read-pip-size:    9px;
      --read-pip-cur:     13px;
    }
    .reader-shell {
      display: none;
      position: fixed; inset: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-body);
      flex-direction: column;
      z-index: 80;
    }
    .reader-shell.is-active { display: flex; }

    /* ── Top header (slim, app-style) ── */
    .reader-header {
      display: flex; align-items: center; gap: 1rem;
      padding: 0 1.4rem;
      height: var(--read-header-h);
      background: var(--bg-tint);
      border-bottom: 1px solid var(--line);
      flex-shrink: 0;
    }
    .reader-back {
      display: inline-flex; align-items: center; gap: .45rem;
      padding: .45rem .65rem;
      color: var(--ink-soft);
      text-decoration: none;
      border-radius: 8px;
      font-size: .88rem;
      font-weight: 500;
      transition: background .15s, color .15s;
    }
    .reader-back:hover { background: var(--line-soft); color: var(--ink); }
    .reader-header-title {
      flex: 1; min-width: 0;
      display: flex; align-items: baseline; gap: .8rem;
      overflow: hidden;
    }
    .reader-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.25;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .reader-header-meta {
      display: flex; align-items: center; gap: .45rem;
      flex-shrink: 0;
    }
    /* Edit-lesson button shown only to god + course editors on the
       reader header. Subtle pencil + label so it doesn't compete with
       the bookmark button or the lesson title. */
    .reader-edit-btn {
      display: inline-flex; align-items: center; gap: .35rem;
      padding: .35rem .7rem;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--line);
      color: var(--ink-soft);
      font-size: .8rem;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
      transition: all .15s ease;
      flex-shrink: 0;
    }
    .reader-edit-btn:hover {
      color: var(--ink);
      border-color: var(--ink-mute);
      background: var(--bg-tint);
    }
    .reader-edit-btn[hidden] { display: none; }
    @media (max-width: 600px) {
      .reader-edit-btn span:not(.crown) { display: none; }
      .reader-edit-btn { padding: .35rem .5rem; }
    }

    .reader-bookmark-btn {
      width: 36px; height: 36px;
      padding: 0;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink-mute);
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: color .15s, border-color .15s, background .15s, transform .15s;
    }
    .reader-bookmark-btn svg { width: 16px; height: 16px; }
    .reader-bookmark-btn:hover {
      color: var(--gold);
      border-color: var(--gold);
      background: rgba(184,146,58,.08);
    }
    .reader-bookmark-btn.is-saved {
      color: var(--gold);
      border-color: var(--gold);
      background: rgba(184,146,58,.12);
    }
    .reader-pill {
      padding: .22rem .55rem;
      border-radius: 999px;
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--ink-soft);
      background: var(--line-soft);
      border: 1px solid var(--line);
    }
    .reader-pill.is-grammar  { background: rgba(31,77,107,.10);  color: #1F4D6B;  border-color: rgba(31,77,107,.20); }
    .reader-pill.is-vocab    { background: rgba(92,138,106,.12); color: #3F6F4D;  border-color: rgba(92,138,106,.22); }
    .reader-pill.is-reading  { background: rgba(91,180,166,.12); color: #2D7368;  border-color: rgba(91,180,166,.22); }
    .reader-pill.is-writing  { background: rgba(214,118,89,.12); color: #A04A2E;  border-color: rgba(214,118,89,.22); }
    .reader-pill.is-speaking { background: rgba(232,155,110,.14); color: #94542B; border-color: rgba(232,155,110,.24); }
    .reader-pill.is-strategy { background: rgba(140,107,63,.10); color: #6E5125;  border-color: rgba(140,107,63,.22); }

    /* ── Pip nav row (under header) ── */
    .reader-pipbar {
      display: flex; align-items: center; justify-content: center;
      gap: 1.2rem;
      padding: .9rem 1.4rem;
      background: var(--bg);
      border-bottom: 1px solid var(--line-soft);
      flex-shrink: 0;
    }
    .reader-pips {
      display: flex; align-items: center;
      gap: 0;
    }
    .reader-pip {
      width: var(--read-pip-size); height: var(--read-pip-size);
      border-radius: 50%;
      border: 1.5px solid var(--ink-mute);
      background: var(--bg);
      cursor: pointer;
      padding: 0;
      transition: width .2s, height .2s, background .2s, border-color .2s, box-shadow .2s;
      flex-shrink: 0;
    }
    .reader-pip:hover { border-color: var(--gold); }
    .reader-pip.is-done {
      background: var(--gold);
      border-color: var(--gold);
    }
    .reader-pip.is-current {
      width: var(--read-pip-cur); height: var(--read-pip-cur);
      background: var(--gold);
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(184,146,58,.18);
    }
    .reader-pip-line {
      width: 18px; height: 2px;
      background: var(--line);
      transition: background .2s;
      flex-shrink: 0;
    }
    .reader-pip-line.is-done { background: var(--gold); }
    .reader-pipbar-counter {
      font-family: var(--font-display);
      font-size: .82rem;
      color: var(--ink-mute);
      font-weight: 500;
      letter-spacing: .04em;
      flex-shrink: 0;
      min-width: 4.5rem;
      text-align: right;
    }
    .reader-pipbar-counter strong {
      color: var(--ink);
      font-weight: 600;
    }

    /* ── Page area (one section at a time) ── */
    .reader-page {
      flex: 1; min-height: 0;
      overflow-y: auto;
      padding: 2.4rem 1.6rem 2rem;
      scroll-behavior: smooth;
    }
    .reader-page-inner {
      max-width: var(--read-content-max);
      margin: 0 auto;
      font-size: 1.02rem;
      line-height: 1.72;
      color: var(--ink);
    }
    .reader-page-eyebrow {
      display: inline-block;
      font-family: var(--font-display);
      font-size: .82rem;
      color: var(--gold);
      font-weight: 600;
      letter-spacing: .12em;
      margin-bottom: .55rem;
      text-transform: uppercase;
    }
    .reader-page-title {
      font-family: var(--font-display);
      font-size: 1.95rem;
      line-height: 1.2;
      letter-spacing: -.01em;
      font-weight: 500;
      color: var(--ink);
      margin: 0 0 1.8rem;
    }
    .reader-page-subline {
      display: block;
      font-size: .92rem;
      font-style: italic;
      color: var(--ink-soft);
      margin: -1rem 0 1.8rem;
    }

    /* ── Page enter animation ── */
    .reader-page-inner {
      animation: reader-page-enter .28s ease-out;
    }
    @keyframes reader-page-enter {
      from { opacity: 0; transform: translateY(10px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Footer nav (Prev / Next) ── */
    .reader-footer {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.6rem;
      background: var(--bg-tint);
      border-top: 1px solid var(--line);
      flex-shrink: 0;
    }
    .reader-nav-btn {
      display: inline-flex; align-items: center; gap: .55rem;
      padding: .65rem 1.25rem;
      font-size: .9rem;
      font-weight: 600;
      letter-spacing: .01em;
      border-radius: 999px;
      border: 1.5px solid var(--line);
      background: var(--card);
      color: var(--ink);
      cursor: pointer;
      font-family: var(--font-body);
      transition: border-color .15s, background .15s, transform .15s, opacity .15s;
    }
    .reader-nav-btn:hover { border-color: var(--ink-mute); }
    .reader-nav-btn:disabled,
    .reader-nav-btn.is-disabled {
      opacity: .3;
      cursor: not-allowed;
      pointer-events: none;
    }
    .reader-nav-btn.is-primary {
      background: var(--accent-warm);
      color: white;
      border-color: var(--accent-warm);
      padding: .7rem 1.6rem;
    }
    .reader-nav-btn.is-primary:hover {
      background: #BD5F45;
      border-color: #BD5F45;
      transform: translateY(-1px);
    }
    .reader-footer-spacer { flex: 1; }

    /* ── End-of-lesson page ── */
    .reader-end-page {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center;
      gap: 1rem;
      min-height: 100%;
      padding: 1rem;
    }
    .reader-end-icon {
      width: 64px; height: 64px;
      border-radius: 50%;
      background: rgba(184,146,58,.15);
      color: var(--gold);
      font-size: 1.8rem; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: .8rem;
    }
    .reader-end-eyebrow {
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 700;
    }
    .reader-end-title {
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.2;
      margin: 0;
    }
    .reader-end-desc {
      font-size: 1rem;
      color: var(--ink-soft);
      max-width: 460px;
      line-height: 1.55;
      margin: 0;
    }
    .reader-end-meta {
      display: flex; gap: 1.6rem;
      margin: .8rem 0 .4rem;
      font-size: .82rem;
      color: var(--ink-mute);
    }
    .reader-end-meta strong { color: var(--ink); font-weight: 600; }
    .reader-end-cta {
      margin-top: .6rem;
      padding: .85rem 1.8rem;
      background: var(--accent-warm);
      color: white;
      border: none;
      border-radius: 999px;
      font-size: .95rem;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      display: inline-block;
      transition: background .15s, transform .15s;
      font-family: var(--font-body);
    }
    .reader-end-cta:hover { background: #BD5F45; transform: translateY(-1px); }
    .reader-end-cta.is-disabled {
      background: var(--line);
      color: var(--ink-mute);
      cursor: default;
    }
    .reader-end-cta.is-secondary {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--ink);
      margin-top: .55rem;
    }
    .reader-end-cta.is-secondary:hover {
      background: var(--ink);
      color: var(--bg, #fff);
      transform: translateY(-1px);
    }

    /* ─── PRACTICE BLOCK — inline interactive exercises in lessons ─
       Phase 1: fill / mcq / conjugation / match. Each practice block
       walks one item at a time inside a section, with check + feedback.
       Class prefix `.pb-` to avoid collision with `.practice-*` on
       the IELTS Practice page. */
    .pb-block {
      margin: 1.6rem 0 .6rem;
      background: rgba(184,146,58,.04);
      border: 1px solid var(--line);
      border-left: 3px solid var(--accent-warm, #c08a3e);
      border-radius: 10px;
      padding: 1.1rem 1.2rem 1.2rem;
    }
    .pb-empty, .pb-error {
      color: var(--ink-mute);
      font-style: italic;
      font-size: .9rem;
    }
    .pb-head {
      display: flex; flex-direction: column; gap: .35rem;
      margin-bottom: 1rem;
    }
    .pb-eyebrow {
      font-size: .68rem;
      font-weight: 600;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent-warm, #c08a3e);
    }
    .pb-bar {
      height: 2px; border-radius: 999px;
      background: var(--line); overflow: hidden;
    }
    .pb-bar span {
      display: block; height: 100%;
      background: var(--accent-warm, #c08a3e);
      transition: width .25s ease;
    }
    .pb-body { min-height: 60px; }
    .pb-prompt {
      font-size: .92rem;
      color: var(--ink-mute);
      margin-bottom: .8rem;
      line-height: 1.45;
    }
    .pb-foot {
      display: flex; justify-content: flex-end;
      margin-top: 1rem;
    }
    .pb-btn-primary, .pb-btn-secondary {
      padding: .6rem 1.3rem;
      border-radius: 999px;
      font-size: .92rem;
      font-weight: 600;
      cursor: pointer;
      border: 0;
      transition: transform .12s, background .15s;
    }
    .pb-btn-primary {
      background: var(--ink); color: var(--bg, #fff);
    }
    .pb-btn-primary:hover { transform: translateY(-1px); background: #2a2f3a; }
    .pb-btn-secondary {
      background: transparent; color: var(--ink);
      border: 1.5px solid var(--line);
    }
    .pb-btn-secondary:hover { border-color: var(--ink); }

    /* fill */
    .pb-fill {
      font-size: 1.18rem;
      line-height: 1.5;
      color: var(--ink);
    }
    .pb-fill-input {
      display: inline-block;
      min-width: 90px;
      padding: .15rem .5rem;
      margin: 0 .15rem;
      font-family: inherit; font-size: inherit;
      border: 0; border-bottom: 2px solid var(--accent-warm, #c08a3e);
      background: transparent;
      color: var(--ink);
      outline: none;
    }
    .pb-fill-input:focus {
      background: rgba(184,146,58,.06);
      border-bottom-color: var(--ink);
    }

    /* mcq */
    .pb-mcq-q {
      font-size: 1rem;
      color: var(--ink);
      margin-bottom: .8rem;
      line-height: 1.45;
    }
    .pb-mcq-options {
      display: flex; flex-direction: column;
      gap: .4rem;
    }
    .pb-mcq-option {
      display: flex; align-items: center;
      gap: .65rem;
      padding: .6rem .85rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg, #fff);
      color: var(--ink);
      font-size: .95rem;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      transition: border-color .12s, background .12s;
    }
    .pb-mcq-option:hover { border-color: var(--ink-mute); }
    .pb-mcq-option.is-selected {
      border-color: var(--accent-warm, #c08a3e);
      background: rgba(184,146,58,.07);
    }
    .pb-mcq-letter {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: var(--bg-tint, rgba(0,0,0,.04));
      display: flex; align-items: center; justify-content: center;
      font-size: .78rem; font-weight: 600;
      color: var(--ink-mute);
      flex-shrink: 0;
    }
    .pb-mcq-option.is-selected .pb-mcq-letter {
      background: var(--accent-warm, #c08a3e); color: white;
    }

    /* conjugation */
    .pb-conj-verb {
      font-family: 'Fraunces', serif;
      font-size: 1.15rem; font-weight: 500;
      color: var(--ink);
      margin-bottom: .55rem;
      letter-spacing: -.005em;
    }
    .pb-conj-table { width: 100%; border-collapse: collapse; }
    .pb-conj-table td {
      padding: .35rem .5rem;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
    }
    .pb-conj-pron {
      font-size: .9rem;
      color: var(--ink-mute);
      width: 30%;
      font-family: 'Fraunces', serif;
      font-style: italic;
    }
    .pb-conj-cell { width: 70%; }
    .pb-conj-input {
      width: 100%; max-width: 220px;
      padding: .35rem .55rem;
      font-family: inherit; font-size: .98rem;
      border: 0; border-bottom: 1.5px solid var(--line);
      background: transparent;
      color: var(--ink);
      outline: none;
    }
    .pb-conj-input:focus {
      background: rgba(184,146,58,.06);
      border-bottom-color: var(--accent-warm, #c08a3e);
    }

    /* match */
    .pb-match {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: .6rem;
    }
    .pb-match-col {
      display: flex; flex-direction: column;
      gap: .4rem;
    }
    .pb-match-tile {
      padding: .55rem .8rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg, #fff);
      color: var(--ink);
      font-size: .94rem;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
      transition: all .12s;
    }
    .pb-match-tile:hover:not(.is-paired) {
      border-color: var(--ink-mute);
    }
    .pb-match-tile.is-selected {
      border-color: var(--accent-warm, #c08a3e);
      background: rgba(184,146,58,.1);
    }
    .pb-match-tile.is-paired {
      cursor: default;
      opacity: .82;
    }
    .pb-match-tile.pair-c1 { border-color: #5C8A6A; background: rgba(92,138,106,.10); }
    .pb-match-tile.pair-c2 { border-color: #6A9DD0; background: rgba(106,157,208,.10); }
    .pb-match-tile.pair-c3 { border-color: #C97AB6; background: rgba(201,122,182,.10); }
    .pb-match-tile.pair-c4 { border-color: #E8946A; background: rgba(232,148,106,.10); }
    .pb-match-tile.pair-c5 { border-color: #a78be0; background: rgba(167,139,224,.10); }
    .pb-match-tile.pair-c6 { border-color: #5bb4a6; background: rgba(91,180,166,.10); }

    /* feedback */
    .pb-feedback {
      display: flex; gap: .65rem; align-items: flex-start;
      padding: .85rem 1rem;
      border-radius: 8px;
      margin-bottom: .8rem;
    }
    .pb-feedback.is-ok {
      background: rgba(63,111,77,.10);
      color: #2A4F37;
    }
    .pb-feedback.is-bad {
      background: rgba(192,57,43,.08);
      color: #8A2C20;
    }
    .pb-feedback-icon {
      width: 24px; height: 24px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-weight: 700;
      flex-shrink: 0;
    }
    .pb-feedback.is-ok .pb-feedback-icon { background: #3F6F4D; color: white; }
    .pb-feedback.is-bad .pb-feedback-icon { background: #C0392B; color: white; }
    .pb-feedback-msg { line-height: 1.45; font-size: .95rem; }
    .pb-explanation {
      padding: .65rem .9rem;
      background: rgba(0,0,0,.025);
      border-left: 2px solid var(--ink-mute);
      border-radius: 4px;
      font-size: .9rem;
      color: var(--ink);
      line-height: 1.5;
    }

    /* done */
    .pb-done {
      text-align: center;
      padding: 1.4rem 1rem;
    }
    .pb-done-icon {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(63,111,77,.12);
      color: #3F6F4D;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; font-weight: 700;
      margin: 0 auto .65rem;
    }
    .pb-done-title {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: 1.2rem;
      color: var(--ink);
      margin: .15rem 0;
    }
    .pb-done-score {
      color: var(--ink-mute);
      font-size: .92rem;
      margin: 0 0 1rem;
    }
    .pb-done-row {
      display: flex; gap: .55rem; justify-content: center;
    }

    /* ─── Exercise pack page (#exercises/{t}/{c}/{lessonId}) ──────────
       Standalone post-lesson exercise route. Renders the practice-block
       engine inside the stub-shell on a focused, lesson-titled page.
       Body class `is-exercise` swaps the default centered "coming soon"
       layout for a top-aligned reader-style column. */
    #stub-body.is-exercise {
      display: block;
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
    }
    .ep-wrap {
      max-width: 720px;
      margin: 0 auto;
      padding: 2.4rem 1.4rem 4rem;
    }
    .ep-eyebrow {
      font-size: .78rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-mute, #8a7c5a);
      font-weight: 600;
      margin-bottom: .35rem;
    }
    .ep-title {
      font-size: 1.85rem;
      font-weight: 700;
      margin: 0 0 .35rem;
      color: var(--ink, #1f1a10);
      letter-spacing: -.01em;
    }
    .ep-desc {
      color: var(--ink-mute, #6b6044);
      margin: 0 0 1.6rem;
      font-size: .98rem;
    }
    .ep-engine {
      /* The practice-block placeholder paints its own card; remove the
         secondary card border the inline-in-lesson treatment uses, since
         on a dedicated page the block IS the page. */
    }
    .ep-engine .pb-block {
      margin: 0;
      background: transparent;
      border: 1px solid var(--line);
      border-left: 1px solid var(--line);
      border-radius: 14px;
      padding: 1.4rem 1.4rem 1.5rem;
    }
    .ep-loading,
    .ep-empty {
      max-width: 560px;
      margin: 4rem auto;
      padding: 2rem 1.4rem;
      text-align: center;
      color: var(--ink-mute, #6b6044);
    }
    .ep-empty h3 {
      margin: 0 0 .4rem;
      color: var(--ink, #1f1a10);
      font-size: 1.2rem;
    }
    .ep-back-cta {
      display: inline-block;
      margin-top: 1rem;
      padding: .6rem 1.1rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--ink, #1f1a10);
      text-decoration: none;
      font-weight: 600;
      font-size: .92rem;
    }
    .ep-back-cta:hover { background: rgba(0,0,0,.03); }

    /* ─── Review-this-lesson modal — post-lesson reinforcement ──────
       Standalone walk-through of drill cards whose sourceLessonId
       matches the just-finished lesson. Stage flips on tap. */
    .rl-modal {
      position: fixed; inset: 0;
      z-index: 1100;
      display: flex; align-items: center; justify-content: center;
    }
    body.has-review-modal { overflow: hidden; }
    .rl-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.62);
      backdrop-filter: blur(3px);
    }
    .rl-card {
      position: relative;
      width: min(560px, 94vw);
      max-height: 92vh;
      background: var(--bg, #fff);
      border-radius: 18px;
      box-shadow: 0 22px 60px rgba(0,0,0,.45);
      overflow: hidden;
      display: flex; flex-direction: column;
      animation: rlFadeIn .25s ease-out both;
    }
    @keyframes rlFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .rl-head {
      display: flex; align-items: center; gap: 1rem;
      padding: .9rem 1.1rem .55rem;
    }
    .rl-eyebrow {
      flex: 1;
      font-size: .7rem; font-weight: 600;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--accent-warm, #c08a3e);
    }
    .rl-progress {
      font-family: 'Fraunces', serif;
      font-size: .92rem;
      color: var(--ink-mute);
      letter-spacing: .02em;
    }
    .rl-progress span {
      color: var(--ink);
      font-weight: 500;
    }
    .rl-close {
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: transparent;
      font-size: 1.3rem; line-height: 1;
      color: var(--ink-mute);
      cursor: pointer;
    }
    .rl-close:hover { color: var(--ink); border-color: var(--ink); }
    .rl-bar {
      height: 3px;
      background: var(--line);
      margin: 0 1.1rem;
      border-radius: 999px;
      overflow: hidden;
    }
    .rl-bar span {
      display: block; height: 100%;
      background: var(--accent-warm, #c08a3e);
      transition: width .25s ease;
    }
    .rl-stage {
      flex: 1;
      padding: 2.2rem 1.4rem;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      min-height: 220px;
    }
    .rl-face {
      width: 100%;
      text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 1rem;
    }
    .rl-az-prompt {
      font-family: 'Fraunces', serif;
      font-size: 1.6rem;
      color: var(--ink);
      line-height: 1.3;
      max-width: 32ch;
    }
    .rl-flip-hint {
      font-size: .78rem;
      color: var(--ink-mute);
      letter-spacing: .04em;
    }
    .rl-de {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: 2rem;
      color: var(--ink);
      letter-spacing: -.01em;
    }
    .rl-az {
      font-size: 1.05rem;
      color: var(--ink-mute);
      max-width: 32ch;
    }
    .rl-audio-row {
      display: flex; gap: .55rem;
      margin: .25rem 0;
    }
    .rl-audio {
      width: 38px; height: 38px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: transparent;
      color: var(--ink);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: all .15s ease;
    }
    .rl-audio:hover {
      color: var(--accent-warm);
      border-color: var(--accent-warm);
      background: rgba(184,146,58,.08);
    }
    .rl-audio.is-slow {
      border-style: dashed;
      color: var(--ink-mute);
    }
    .rl-audio.is-slow:hover {
      color: var(--accent-warm);
      border-color: var(--accent-warm);
      border-style: solid;
    }
    .rl-foot {
      padding: .9rem 1.1rem 1.2rem;
      display: flex; justify-content: center;
    }
    .rl-btn-primary, .rl-btn-secondary {
      padding: .8rem 1.6rem;
      border-radius: 999px;
      font-size: .95rem;
      font-weight: 600;
      cursor: pointer;
      border: 0;
      transition: transform .15s, background .15s, color .15s;
    }
    .rl-btn-primary {
      background: var(--ink);
      color: var(--bg, #fff);
    }
    .rl-btn-primary:hover { transform: translateY(-1px); background: #2a2f3a; }
    .rl-btn-secondary {
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--line);
    }
    .rl-btn-secondary:hover { border-color: var(--ink); }
    .rl-loading, .rl-empty, .rl-done {
      padding: 2rem 1.4rem;
      text-align: center;
    }
    .rl-empty h3, .rl-done h3 {
      font-family: 'Fraunces', serif;
      font-weight: 500;
      font-size: 1.4rem;
      color: var(--ink);
      margin: .5rem 0;
    }
    .rl-empty p, .rl-done p {
      color: var(--ink-mute);
      max-width: 36ch;
      margin: 0 auto 1.2rem;
      line-height: 1.55;
    }
    .rl-done-icon {
      width: 56px; height: 56px;
      margin: 0 auto 1rem;
      border-radius: 50%;
      background: rgba(63, 111, 77, .12);
      color: #3F6F4D;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem;
    }
    .rl-done-row {
      display: flex; gap: .65rem; justify-content: center;
    }
    .reader-end-cta.is-disabled:hover { background: var(--line); transform: none; }
    .reader-end-secondary {
      font-size: .85rem;
      color: var(--ink-mute);
      text-decoration: none;
      margin-top: .2rem;
    }
    .reader-end-secondary:hover { color: var(--ink); text-decoration: underline; }

    /* ── Lesson quiz overlay ── */
    .reader-quiz-page {
      max-width: 760px;
      margin: 0 auto;
      padding: 2rem 1.5rem 4rem;
      animation: readerFadeIn .3s ease;
    }
    .reader-quiz-h {
      display: flex; align-items: center; justify-content: space-between;
      gap: 1rem; margin-bottom: 1.6rem;
    }
    .reader-quiz-exit {
      background: none; border: none; cursor: pointer;
      color: var(--ink-mute); font-size: .85rem; font-family: inherit;
      padding: .35rem .55rem; border-radius: 6px;
    }
    .reader-quiz-exit:hover { color: var(--ink); background: var(--line-soft); }
    .reader-quiz-progress { text-align: right; }
    .reader-quiz-counter {
      display: block; font-size: .72rem; letter-spacing: .12em;
      text-transform: uppercase; font-weight: 600; color: var(--ink-mute);
      margin-bottom: .4rem;
    }
    .reader-quiz-dots { display: inline-flex; gap: .35rem; }
    .reader-quiz-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--line);
      transition: background .15s, transform .15s;
    }
    .reader-quiz-dot.is-current { background: var(--ink-soft); transform: scale(1.4); }
    .reader-quiz-dot.is-correct { background: #2A6B47; }
    .reader-quiz-dot.is-wrong   { background: #B6442C; }

    .reader-quiz-q {
      font-family: var(--font-display, Georgia, serif);
      font-size: 1.32rem; font-weight: 500; line-height: 1.45;
      color: var(--ink); margin-bottom: 1.6rem;
    }
    .reader-quiz-fill-prompt { font-family: var(--font-display, Georgia, serif); }
    .reader-quiz-fill-blank {
      display: inline-block; min-width: 4ch; border-bottom: 2px solid var(--ink-mute);
      letter-spacing: .12em; color: transparent;
    }

    /* MCQ */
    .reader-quiz-options {
      display: flex; flex-direction: column; gap: .55rem;
      margin-bottom: 1.2rem;
    }
    .reader-quiz-option {
      display: flex; align-items: center; gap: .9rem;
      padding: .85rem 1rem;
      background: var(--card, #fff); color: var(--ink);
      border: 1.5px solid var(--line); border-radius: 10px;
      font-family: inherit; font-size: .98rem; line-height: 1.4;
      cursor: pointer; text-align: left;
      transition: background .12s, border-color .12s, transform .08s;
    }
    .reader-quiz-option:hover:not(:disabled) {
      background: var(--bg-soft, var(--line-soft));
      border-color: var(--ink-mute);
    }
    .reader-quiz-option:active:not(:disabled) { transform: scale(0.99); }
    .reader-quiz-option:disabled { cursor: default; opacity: .85; }
    .reader-quiz-option-letter {
      flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--line-soft); color: var(--ink-soft);
      font-family: var(--font-display, Georgia, serif); font-size: .9rem; font-weight: 600;
    }
    .reader-quiz-option-text { flex: 1; }
    .reader-quiz-option.is-correct {
      background: rgba(42, 107, 71, 0.08); border-color: #2A6B47;
    }
    .reader-quiz-option.is-correct .reader-quiz-option-letter {
      background: #2A6B47; color: #fff;
    }
    .reader-quiz-option.is-wrong {
      background: rgba(182, 68, 44, 0.06); border-color: #B6442C;
    }
    .reader-quiz-option.is-wrong .reader-quiz-option-letter {
      background: #B6442C; color: #fff;
    }

    /* True / False (and TFNG: True / False / Not Given) */
    .reader-quiz-tf-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
      margin-bottom: 1.2rem;
    }
    .reader-quiz-tf-row.reader-quiz-tf-row-three { grid-template-columns: 1fr 1fr 1fr; }

    /* Multi-select */
    .reader-quiz-multi-list {
      display: flex; flex-direction: column; gap: .55rem;
      margin-bottom: 1.2rem;
    }
    .reader-quiz-multi-row {
      display: flex; align-items: center; gap: .9rem;
      padding: .85rem 1rem;
      background: var(--card, #fff); color: var(--ink);
      border: 1.5px solid var(--line); border-radius: 10px;
      font-size: .98rem; cursor: pointer;
      transition: background .12s, border-color .12s;
    }
    .reader-quiz-multi-row:hover { background: var(--bg-soft, var(--line-soft)); }
    .reader-quiz-multi-cb { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
    .reader-quiz-multi-row.is-correct { background: rgba(42,107,71,.08); border-color: #2A6B47; }
    .reader-quiz-multi-row.is-wrong   { background: rgba(182,68,44,.06); border-color: #B6442C; }
    .reader-quiz-tf-btn {
      padding: 1.1rem; font-size: 1.05rem; font-family: inherit;
      background: var(--card, #fff); color: var(--ink);
      border: 1.5px solid var(--line); border-radius: 10px;
      cursor: pointer; transition: background .12s, border-color .12s;
      font-weight: 500;
    }
    .reader-quiz-tf-btn:hover:not(:disabled) {
      background: var(--bg-soft, var(--line-soft));
      border-color: var(--ink-mute);
    }
    .reader-quiz-tf-btn:disabled { cursor: default; opacity: .85; }
    .reader-quiz-tf-btn.is-correct {
      background: rgba(42, 107, 71, 0.08); border-color: #2A6B47; color: #2A6B47;
    }
    .reader-quiz-tf-btn.is-wrong {
      background: rgba(182, 68, 44, 0.06); border-color: #B6442C; color: #B6442C;
    }

    /* Fill blank */
    .reader-quiz-fill-row {
      display: flex; gap: .55rem; margin-bottom: 1.2rem;
    }
    .reader-quiz-fill-input {
      flex: 1; padding: .8rem 1rem;
      background: var(--card, #fff); color: var(--ink);
      border: 1.5px solid var(--line); border-radius: 10px;
      font-family: inherit; font-size: 1rem;
    }
    .reader-quiz-fill-input:focus {
      outline: none; border-color: var(--ink-mute);
    }
    .reader-quiz-fill-input.is-correct { border-color: #2A6B47; background: rgba(42,107,71,.06); }
    .reader-quiz-fill-input.is-wrong   { border-color: #B6442C; background: rgba(182,68,44,.06); }
    .reader-quiz-fill-submit {
      padding: 0 1.4rem; font-size: .92rem; font-weight: 500;
      background: var(--ink); color: var(--bg, #fff);
      border: none; border-radius: 10px; cursor: pointer; font-family: inherit;
    }
    .reader-quiz-fill-submit:disabled { opacity: .6; cursor: default; }

    /* Match pairs */
    .reader-quiz-mp-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: .8rem;
      margin-bottom: 1rem;
    }
    .reader-quiz-mp-col { display: flex; flex-direction: column; gap: .45rem; }
    .reader-quiz-mp-left, .reader-quiz-mp-right {
      padding: .7rem .9rem; text-align: left;
      background: var(--card, #fff); color: var(--ink);
      border: 1.5px solid var(--line); border-radius: 8px;
      font-family: inherit; font-size: .92rem; line-height: 1.35;
      cursor: pointer; transition: all .12s;
    }
    .reader-quiz-mp-left:hover:not(:disabled),
    .reader-quiz-mp-right:hover:not(:disabled) {
      background: var(--bg-soft, var(--line-soft)); border-color: var(--ink-mute);
    }
    .reader-quiz-mp-left.is-selected {
      background: rgba(60, 90, 130, 0.08); border-color: #3C5A82;
    }
    .reader-quiz-mp-left.is-paired, .reader-quiz-mp-right.is-paired {
      opacity: .85; cursor: default;
    }
    .reader-quiz-mp-left.is-paired { background: var(--bg-soft, var(--line-soft)); }
    .reader-quiz-mp-left.is-paired[data-pair-color="1"] { border-left: 4px solid #C76A3F; }
    .reader-quiz-mp-right.is-paired[data-pair-color="1"] { border-left: 4px solid #C76A3F; }
    .reader-quiz-mp-left.is-paired[data-pair-color="2"] { border-left: 4px solid #3C5A82; }
    .reader-quiz-mp-right.is-paired[data-pair-color="2"] { border-left: 4px solid #3C5A82; }
    .reader-quiz-mp-left.is-paired[data-pair-color="3"] { border-left: 4px solid #5C8A6A; }
    .reader-quiz-mp-right.is-paired[data-pair-color="3"] { border-left: 4px solid #5C8A6A; }
    .reader-quiz-mp-left.is-paired[data-pair-color="4"] { border-left: 4px solid #8C6B3F; }
    .reader-quiz-mp-right.is-paired[data-pair-color="4"] { border-left: 4px solid #8C6B3F; }
    .reader-quiz-mp-left.is-paired[data-pair-color="5"] { border-left: 4px solid #6B4F8C; }
    .reader-quiz-mp-right.is-paired[data-pair-color="5"] { border-left: 4px solid #6B4F8C; }
    .reader-quiz-mp-left.is-wrong { background: rgba(182, 68, 44, 0.08); border-color: #B6442C; }

    /* Feedback + actions */
    .reader-quiz-feedback {
      display: none; padding: 1rem 1.2rem; border-radius: 10px;
      margin-top: .4rem; margin-bottom: 1.2rem;
      font-size: .92rem; line-height: 1.55;
    }
    .reader-quiz-feedback.is-visible { display: block; }
    .reader-quiz-feedback.is-correct {
      background: rgba(42, 107, 71, 0.08); color: #1f4f33;
      border: 1px solid rgba(42, 107, 71, 0.25);
    }
    .reader-quiz-feedback.is-wrong {
      background: rgba(182, 68, 44, 0.06); color: #883722;
      border: 1px solid rgba(182, 68, 44, 0.25);
    }
    .reader-quiz-fb-h {
      display: flex; align-items: center; gap: .55rem;
      font-weight: 600; margin-bottom: .4rem;
      font-family: var(--font-display, Georgia, serif);
    }
    .reader-quiz-fb-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 50%;
      font-size: .8rem; font-weight: 700;
    }
    .reader-quiz-feedback.is-correct .reader-quiz-fb-icon { background: #2A6B47; color: #fff; }
    .reader-quiz-feedback.is-wrong   .reader-quiz-fb-icon { background: #B6442C; color: #fff; }
    .reader-quiz-fb-explanation { color: inherit; opacity: .92; }
    .reader-quiz-fb-correct { display: block; margin-top: .4rem; font-size: .88rem; }

    /* Pin-this-question pill — same calm language as block pin:
       no tilt, no pop. Saved state speaks via the surrounding
       feedback panel which gets the same highlight wash. */
    .reader-quiz-bookmark {
      margin-left: auto;
      display: inline-flex; align-items: center;
      gap: .42rem;
      padding: .38rem .8rem .38rem .65rem;
      font-family: var(--font-body);
      font-size: .76rem;
      font-weight: 600;
      letter-spacing: .04em;
      color: var(--ink-soft);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 999px;
      cursor: pointer;
      transition: color .2s ease, border-color .2s ease, background .2s ease;
      animation: rb-quizbm-fade-in .35s ease;
    }
    @keyframes rb-quizbm-fade-in {
      from { opacity: 0; transform: translateY(-3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .reader-quiz-bookmark:hover {
      color: var(--accent-warm);
      border-color: color-mix(in srgb, var(--accent-warm) 60%, var(--line));
    }
    .reader-quiz-bookmark.is-bookmarked {
      color: var(--accent-warm);
      border-color: var(--accent-warm);
      background: color-mix(in srgb, var(--accent-warm) 14%, var(--card));
    }
    .reader-quiz-bookmark.is-bookmarked svg { fill: currentColor; }
    .reader-quiz-bookmark-label {
      font-variant-caps: all-small-caps;
      letter-spacing: .08em;
    }
    /* When the quiz is pinned, the feedback panel itself gets the
       same highlighter ring — matches the block-level highlight. */
    .reader-quiz-feedback:has(.reader-quiz-bookmark.is-bookmarked) {
      box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--accent-warm) 38%, transparent),
        0 8px 26px -14px color-mix(in srgb, var(--accent-warm) 30%, transparent);
      transition: box-shadow .3s ease;
    }

    .reader-quiz-actions { display: flex; justify-content: flex-end; gap: .55rem; }
    .reader-quiz-next, .reader-quiz-check {
      padding: .8rem 1.6rem; font-size: .95rem; font-weight: 500;
      background: var(--ink); color: var(--bg, #fff);
      border: none; border-radius: 10px; cursor: pointer; font-family: inherit;
    }
    .reader-quiz-next:hover:not(:disabled), .reader-quiz-check:hover:not(:disabled) {
      background: #000;
    }
    .reader-quiz-check:disabled { opacity: .55; cursor: default; }
    .reader-quiz-secondary {
      padding: .8rem 1.4rem; font-size: .92rem; font-weight: 500;
      background: none; color: var(--ink-soft);
      border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-family: inherit;
    }
    .reader-quiz-secondary:hover { background: var(--line-soft); color: var(--ink); }

    /* Summary */
    .reader-quiz-summary {
      max-width: 600px; margin: 2rem auto;
      text-align: center; padding: 2rem 1rem 4rem;
    }
    .reader-quiz-summary-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--ink); color: var(--bg, #fff);
      font-size: 1.6rem; margin-bottom: 1rem;
    }
    .reader-quiz-summary-eyebrow {
      font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
      font-weight: 600; color: var(--ink-mute); margin-bottom: .35rem;
    }
    .reader-quiz-summary-h {
      font-family: var(--font-display, Georgia, serif);
      font-size: 2.4rem; font-weight: 500; margin: 0 0 .4rem; color: var(--ink);
    }
    .reader-quiz-summary-praise { color: var(--ink-soft); margin-bottom: 1.6rem; }
    .reader-quiz-summary-wrongs {
      text-align: left; margin: 1.5rem auto;
      padding: 1rem 1.2rem; background: var(--bg-soft, var(--line-soft));
      border-radius: 10px;
    }
    .reader-quiz-summary-wrongs-h {
      font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
      font-weight: 700; color: var(--ink-mute); margin-bottom: .8rem;
    }
    .reader-quiz-summary-wrong { margin-bottom: 1rem; }
    .reader-quiz-summary-wrong:last-child { margin-bottom: 0; }
    .reader-quiz-summary-q { font-weight: 500; color: var(--ink); margin-bottom: .25rem; }
    .reader-quiz-summary-ex { font-size: .88rem; color: var(--ink-soft); }
    .reader-quiz-summary-actions {
      display: flex; gap: .55rem; justify-content: center; margin-top: 1rem;
    }

    @media (max-width: 540px) {
      .reader-quiz-tf-row { grid-template-columns: 1fr; }
      .reader-quiz-mp-grid { grid-template-columns: 1fr; }
      .reader-quiz-fill-row { flex-direction: column; }
      .reader-quiz-fill-submit { padding: .8rem; }
    }

    /* ── Block: text ── */
    .rb-text { margin: 0 0 1.4rem; }
    .rb-text p { margin: 0 0 1rem; }
    .rb-text p:last-child { margin-bottom: 0; }
    .rb-text strong { color: var(--ink); font-weight: 600; }
    .rb-text em { color: var(--ink); font-style: italic; }
    .rb-text ul, .rb-text ol { margin: 0 0 1rem; padding-left: 1.5rem; }
    .rb-text li { margin-bottom: .35rem; line-height: 1.65; }
    .rb-text blockquote {
      border-left: 3px solid var(--accent-warm);
      padding: .4rem 0 .4rem 1.2rem;
      margin: 1rem 0;
      color: var(--ink-soft);
      font-style: italic;
    }
    .rb-text code {
      font-family: 'SF Mono', Menlo, monospace;
      font-size: .9em;
      padding: .1em .4em;
      background: var(--line-soft);
      border-radius: 4px;
    }

    /* ── Block: comparison (✗ wrong / ✓ right) ── */
    .rb-comparison {
      margin: 1.6rem 0;
      display: flex; flex-direction: column;
      gap: .5rem;
      border-radius: var(--radius);
      overflow: hidden;
    }
    .rb-cmp-row {
      display: flex; align-items: flex-start; gap: .9rem;
      padding: .85rem 1.05rem;
      font-size: .98rem;
      line-height: 1.55;
    }
    .rb-cmp-row.is-wrong {
      background: var(--read-wrong-bg);
      border: 1px solid rgba(194,86,62,.20);
      color: var(--ink);
    }
    .rb-cmp-row.is-right {
      background: var(--read-right-bg);
      border: 1px solid rgba(42,107,71,.18);
      color: var(--ink);
    }
    .rb-cmp-icon {
      flex-shrink: 0;
      width: 1.3rem; height: 1.3rem;
      border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-weight: 700;
      font-size: .85rem;
      color: white;
      line-height: 1;
      margin-top: .14rem;
    }
    .rb-cmp-row.is-wrong .rb-cmp-icon { background: var(--read-wrong); }
    .rb-cmp-row.is-right .rb-cmp-icon { background: var(--read-right); }
    .rb-cmp-text { flex: 1; min-width: 0; }
    .rb-cmp-text em { font-style: italic; color: var(--ink-soft); }

    /* ── Block: explanation (collapsible per language) ── */
    .rb-explanation-group {
      margin: 1.6rem 0;
      display: flex; flex-direction: column;
      gap: .55rem;
    }
    .rb-explanation {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--bg-tint);
      overflow: hidden;
      transition: border-color .15s;
    }
    .rb-explanation.is-open { border-color: var(--gold); }
    .rb-exp-header {
      display: flex; align-items: center; gap: .7rem;
      width: 100%;
      padding: .82rem 1.1rem;
      background: rgba(184,146,58,.06);
      border: none;
      cursor: pointer;
      font-family: var(--font-body);
      text-align: left;
      color: var(--ink);
      font-size: .92rem;
      font-weight: 500;
      letter-spacing: .005em;
      transition: background .15s;
    }
    .rb-exp-header:hover { background: rgba(184,146,58,.12); }
    .rb-explanation.is-open .rb-exp-header { background: rgba(184,146,58,.12); }
    .rb-exp-label {
      flex: 1;
      display: inline-flex; align-items: center; gap: .35rem;
    }
    .rb-exp-chevron {
      font-size: .85rem;
      color: var(--ink-mute);
      transition: transform .2s ease;
      flex-shrink: 0;
    }
    .rb-explanation.is-open .rb-exp-chevron { transform: rotate(180deg); color: var(--gold); }
    .rb-exp-body {
      display: none;
      padding: 1rem 1.2rem 1.15rem;
      border-top: 1px solid var(--line-soft);
      font-size: .98rem;
      line-height: 1.72;
      color: var(--ink);
      background: var(--card);
    }
    .rb-explanation.is-open .rb-exp-body { display: block; }
    .rb-exp-body p { margin: 0 0 .85rem; }
    .rb-exp-body p:last-child { margin-bottom: 0; }
    .rb-exp-body strong { color: var(--ink); font-weight: 600; }
    .rb-exp-body em { color: var(--ink); font-style: italic; }
    .rb-exp-empty {
      padding: 1.2rem;
      text-align: center;
      font-size: .85rem;
      color: var(--ink-mute);
      font-style: italic;
    }

    /* ── Block: keyRule (pull-quote) ── */
    .rb-keyRule {
      margin: 1.8rem 0;
      padding: 1rem 1.4rem;
      border-left: 3px solid var(--gold);
      background: rgba(184,146,58,.05);
      border-radius: 0 var(--radius) var(--radius) 0;
      font-family: var(--font-display);
      font-size: 1.08rem;
      line-height: 1.55;
      color: var(--ink);
      font-weight: 500;
    }
    .rb-keyRule strong { font-weight: 600; }
    .rb-keyRule em { font-style: italic; color: var(--ink-soft); }

    /* ── Block: reveal (collapsible Q→A) ── */
    .rb-reveal {
      margin: 1.4rem 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      overflow: hidden;
    }
    .rb-reveal-q {
      display: flex; align-items: flex-start; gap: .8rem;
      padding: 1rem 1.2rem;
      font-size: .97rem;
      color: var(--ink);
      line-height: 1.55;
    }
    .rb-reveal-q-mark {
      flex-shrink: 0;
      font-family: var(--font-display);
      font-size: 1.05rem;
      color: var(--gold);
      font-weight: 600;
      line-height: 1;
      margin-top: .08rem;
    }
    .rb-reveal-q-text { flex: 1; min-width: 0; font-weight: 500; }
    .rb-reveal-actions {
      padding: 0 1.2rem .9rem;
      display: flex; gap: .5rem; flex-wrap: wrap;
    }
    .rb-reveal-btn {
      padding: .42rem .9rem;
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .02em;
      color: var(--ink);
      background: var(--line-soft);
      border: 1px solid var(--line);
      border-radius: 8px;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s;
      font-family: var(--font-body);
    }
    .rb-reveal-btn:hover { background: var(--accent-warm-soft); border-color: var(--accent-warm); }
    .rb-reveal-btn.is-hint { background: transparent; }
    .rb-reveal-answer {
      padding: 1rem 1.2rem;
      border-top: 1px solid var(--line-soft);
      background: var(--read-right-bg);
      font-size: .96rem;
      line-height: 1.6;
      color: var(--ink);
      display: none;
    }
    .rb-reveal-answer.is-shown { display: block; }
    .rb-reveal-answer-mark {
      display: inline-flex; align-items: center; justify-content: center;
      width: 1.2rem; height: 1.2rem;
      background: var(--read-right); color: white;
      border-radius: 50%; font-size: .75rem; font-weight: 700;
      margin-right: .5rem; vertical-align: -2px;
    }
    .rb-reveal-hint {
      padding: .8rem 1.2rem;
      border-top: 1px dashed var(--line);
      background: var(--bg-tint);
      font-size: .88rem;
      line-height: 1.55;
      color: var(--ink-soft);
      font-style: italic;
      display: none;
    }
    .rb-reveal-hint.is-shown { display: block; }
    .rb-reveal-hint::before {
      content: "Hint  ";
      display: inline-block;
      font-size: .68rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 700;
      font-style: normal;
      color: var(--gold);
      margin-right: .4rem;
    }

    /* ── Block: table ── */
    .rb-table-wrap {
      margin: 1.8rem 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--card);
    }
    .rb-table { width: 100%; border-collapse: collapse; font-size: .94rem; }
    .rb-table thead th {
      text-align: left;
      padding: .75rem 1rem;
      background: rgba(184,146,58,.08);
      border-bottom: 1px solid var(--line);
      font-size: .75rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--ink);
    }
    .rb-table tbody td {
      padding: .7rem 1rem;
      border-bottom: 1px solid var(--line-soft);
      vertical-align: top;
      line-height: 1.5;
      color: var(--ink);
    }
    .rb-table tbody tr:nth-child(even) { background: var(--bg-tint); }
    .rb-table tbody tr:last-child td { border-bottom: none; }
    .rb-table-caption {
      margin-top: .55rem;
      font-size: .82rem;
      color: var(--ink-mute);
      text-align: center;
      font-style: italic;
    }

    /* ── Block: image / video / animation ── */
    .rb-media { margin: 1.8rem 0; text-align: center; }
    .rb-media img,
    .rb-media iframe,
    .rb-media video,
    .rb-media lottie-player {
      max-width: 100%;
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      display: block;
      margin: 0 auto;
    }
    .rb-media iframe { aspect-ratio: 16/9; width: 100%; border: 0; }
    .rb-media-caption {
      margin-top: .55rem;
      font-size: .82rem;
      color: var(--ink-mute);
      font-style: italic;
    }
    .rb-media-placeholder {
      padding: 2.4rem 1.2rem;
      background: var(--bg-tint);
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      color: var(--ink-mute);
      text-align: center;
      font-size: .88rem;
    }

    /* ── Block: graph ── */
    .rb-graph { margin: 1.8rem 0; }
    .rb-graph canvas {
      max-width: 100%;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1rem;
    }
    .rb-graph-caption {
      margin-top: .55rem;
      font-size: .82rem;
      color: var(--ink-mute);
      text-align: center;
      font-style: italic;
    }

    /* ───────────────────────────────────────────────────────────────────
       COURSE LESSONS LIST  (the "all lessons" page)
       Hash route #lessons/{tenant}/{course}
       Layout: app header + course hero + filter row + responsive card grid
       ─────────────────────────────────────────────────────────────────── */
    .course-shell {
      display: none;
      position: fixed; inset: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font-body);
      flex-direction: column;
      z-index: 75;
      overflow: hidden;
    }
    .course-shell.is-active { display: flex; }

    /* Cosmetic top header — hidden. Page identity comes from the left
       rail + the page's own h1. The reader-header (lesson view) stays. */
    .course-header {
      display: none;
    }
    .course-back {
      display: inline-flex; align-items: center; gap: .45rem;
      padding: .45rem .65rem;
      color: var(--ink-soft);
      text-decoration: none;
      border-radius: 8px;
      font-size: .88rem;
      font-weight: 500;
      transition: background .15s, color .15s;
    }
    .course-back:hover { background: var(--line-soft); color: var(--ink); }
    /* Hide the back arrow when the sidebar is visible — users navigate via
       the sidebar instead. On mobile the sidebar collapses, so we restore
       the back link via the media query below. */
    body.has-sidebar .course-back { display: none; }
    @media (max-width: 880px) {
      body.has-sidebar .course-back { display: inline-flex; }
    }
    .course-header-title {
      flex: 1; min-width: 0;
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--ink);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      display: flex; align-items: center; gap: .65rem;
    }
    .course-header-logo {
      height: 26px; width: auto; max-width: 80px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .course-user-pill {
      display: inline-flex; align-items: center; gap: .45rem;
      padding: .35rem .7rem;
      font-size: .82rem;
      color: var(--ink-soft);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-weight: 500;
    }
    .course-user-pill .crown { font-size: .9rem; color: var(--gold); }

    .course-body {
      flex: 1; min-height: 0;
      overflow-y: auto;
      padding: 2.4rem 2rem 4rem;
    }
    .course-inner {
      max-width: 1180px;
      margin: 0 auto;
    }

    /* ── Course hero ── */
    .course-hero {
      margin-bottom: 2rem;
      padding-bottom: 1.6rem;
      border-bottom: 1px solid var(--line);
    }
    .course-hero-eyebrow {
      display: inline-block;
      font-size: .72rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 700;
      margin-bottom: .55rem;
    }
    .course-hero-title {
      font-family: var(--font-display);
      font-size: 2.2rem;
      line-height: 1.15;
      letter-spacing: -.01em;
      font-weight: 500;
      color: var(--ink);
      margin: 0 0 .6rem;
    }
    .course-hero-desc {
      font-size: .98rem;
      color: var(--ink-soft);
      max-width: 56ch;
      line-height: 1.55;
      margin: 0;
    }

    /* ── Filter row ── */
    .course-filters {
      display: flex; flex-direction: column; gap: .85rem;
      margin-bottom: 2rem;
    }
    .course-chips {
      display: flex; flex-wrap: wrap;
      gap: .45rem;
    }
    .course-chips-label {
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      font-weight: 700;
      align-self: center;
      margin-right: .4rem;
      min-width: 4.4rem;
    }
    .course-chip {
      display: inline-flex; align-items: center; gap: .4rem;
      padding: .42rem .85rem;
      font-size: .82rem;
      font-weight: 500;
      color: var(--ink-soft);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 999px;
      cursor: pointer;
      transition: background .15s, border-color .15s, color .15s;
      font-family: var(--font-body);
    }
    .course-chip:hover { border-color: var(--ink-mute); color: var(--ink); }
    .course-chip.is-active {
      background: var(--ink);
      color: var(--bg);
      border-color: var(--ink);
    }
    .course-chip-count {
      font-size: .72rem;
      color: var(--ink-mute);
      font-weight: 600;
    }
    .course-chip.is-active .course-chip-count { color: inherit; opacity: .65; }
    .course-chip.is-cat-grammar.is-active  { background: #1F4D6B; border-color: #1F4D6B; color: white; }
    .course-chip.is-cat-vocab.is-active    { background: #3F6F4D; border-color: #3F6F4D; color: white; }
    .course-chip.is-cat-reading.is-active  { background: #2D7368; border-color: #2D7368; color: white; }
    .course-chip.is-cat-writing.is-active  { background: #A04A2E; border-color: #A04A2E; color: white; }
    .course-chip.is-cat-speaking.is-active { background: #94542B; border-color: #94542B; color: white; }
    .course-chip.is-cat-strategy.is-active { background: #6E5125; border-color: #6E5125; color: white; }
    .course-chip.is-cat-grammar.is-active .course-chip-count,
    .course-chip.is-cat-vocab.is-active .course-chip-count,
    .course-chip.is-cat-reading.is-active .course-chip-count,
    .course-chip.is-cat-writing.is-active .course-chip-count,
    .course-chip.is-cat-speaking.is-active .course-chip-count,
    .course-chip.is-cat-strategy.is-active .course-chip-count { color: inherit; opacity: .8; }

    .course-search-row {
      display: flex; align-items: center; gap: .65rem;
      flex-wrap: wrap;
    }
    .course-search-wrap {
      position: relative;
      flex: 1;
      max-width: 420px;
      min-width: 240px;
    }
    .course-search-wrap::before {
      content: '🔍';
      position: absolute;
      left: .85rem;
      top: 50%;
      transform: translateY(-50%);
      font-size: .9rem;
      opacity: .55;
      pointer-events: none;
    }
    .course-search {
      width: 100%;
      padding: .65rem 1rem .65rem 2.4rem;
      font-size: .9rem;
      font-family: var(--font-body);
      color: var(--ink);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 999px;
      outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .course-search:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(184,146,58,.12);
    }
    .course-search::placeholder { color: var(--ink-mute); }

    /* ── Card grid ── */
    .course-grid-meta {
      font-size: .82rem;
      color: var(--ink-mute);
      margin-bottom: 1rem;
    }
    .course-grid-meta strong { color: var(--ink); font-weight: 600; }
    .course-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 1rem;
    }

    /* ── Lesson card ── */
    .course-card {
      position: relative;
      display: flex; flex-direction: column;
      padding: 1.1rem 1.2rem 1.05rem;
      padding-left: 1.5rem;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
      cursor: pointer;
      text-decoration: none;
      color: var(--ink);
      transition: transform .18s, box-shadow .18s, border-color .18s;
      min-height: 132px;
      overflow: hidden;
    }
    .course-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      border-color: var(--ink-mute);
    }
    .course-card::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 4px;
      background: var(--ink-mute);
      transition: background .18s;
    }
    .course-card.is-cat-grammar::before  { background: #3B6A8A; }
    .course-card.is-cat-vocab::before    { background: #5C8A6A; }
    .course-card.is-cat-reading::before  { background: #5bb4a6; }
    .course-card.is-cat-writing::before  { background: #D67659; }
    .course-card.is-cat-speaking::before { background: #e89b6e; }
    .course-card.is-cat-strategy::before { background: #8C6B3F; }
    .course-card-eyebrow {
      display: inline-block;
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      font-weight: 700;
      margin-bottom: .55rem;
    }
    .course-card.is-cat-grammar  .course-card-eyebrow { color: #3B6A8A; }
    .course-card.is-cat-vocab    .course-card-eyebrow { color: #3F6F4D; }
    .course-card.is-cat-reading  .course-card-eyebrow { color: #2D7368; }
    .course-card.is-cat-writing  .course-card-eyebrow { color: #A04A2E; }
    .course-card.is-cat-speaking .course-card-eyebrow { color: #94542B; }
    .course-card.is-cat-strategy .course-card-eyebrow { color: #6E5125; }

    /* Completed lessons — green tint + thick green left stripe + corner
       Completed badge. Loud enough to scan the grid at a glance. */
    .course-card.is-completed {
      background: linear-gradient(180deg, #DCEEDF 0%, #E9F2EC 60%, #EDF6EF 100%);
      border-color: rgba(42,107,71,.5);
      box-shadow: 0 0 0 1px rgba(42,107,71,.18) inset;
    }
    .course-card.is-completed::before {
      background: var(--read-right);
      width: 6px;
    }
    .course-card.is-completed .course-card-eyebrow {
      color: var(--read-right) !important;
    }
    .course-card.is-completed .course-card-eyebrow::before {
      content: '✓ ';
      color: var(--read-right);
      font-weight: 800;
    }
    .course-card.is-completed:hover {
      border-color: var(--read-right);
      box-shadow: 0 0 0 1px var(--read-right) inset, var(--shadow-md);
    }
    .course-card-done-badge {
      position: absolute;
      top: 12px; right: 48px;          /* sit left of bookmark button */
      display: inline-flex; align-items: center; gap: .25rem;
      padding: .22rem .55rem;
      border-radius: 999px;
      background: var(--read-right);
      color: #fff;
      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1;
      box-shadow: 0 1px 4px rgba(42,107,71,.35);
    }
    .course-card-done-badge svg { width: 11px; height: 11px; }
    .course-card-title {
      font-family: var(--font-display);
      font-size: 1.08rem;
      font-weight: 500;
      line-height: 1.3;
      color: var(--ink);
      margin: 0 0 .8rem;
      letter-spacing: -.005em;
      /* clamp 2 lines */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .course-card-meta {
      display: flex; align-items: center; gap: .8rem;
      margin-top: auto;
      font-size: .78rem;
      color: var(--ink-mute);
    }
    .course-card-meta span {
      display: inline-flex; align-items: center; gap: .25rem;
    }
    .course-card-meta .sep {
      width: 3px; height: 3px;
      background: var(--ink-mute);
      border-radius: 50%;
      opacity: .5;
    }

    .course-empty {
      grid-column: 1 / -1;
      padding: 3rem 1rem;
      text-align: center;
      color: var(--ink-mute);
      font-style: italic;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
      background: var(--bg-tint);
    }

    /* Bookmark — per-card icon button */
    .course-card-bookmark {
      position: absolute;
      top: .55rem;
      right: .55rem;
      width: 30px; height: 30px;
      padding: 0;
      background: rgba(255,255,255,.85);
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--ink-mute);
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: color .15s, background .15s, border-color .15s, transform .15s;
      font-family: var(--font-body);
      z-index: 2;
    }
    .course-card-bookmark svg { width: 14px; height: 14px; }
    .course-card-bookmark:hover {
      color: var(--gold);
      border-color: var(--gold);
      background: var(--card);
      transform: scale(1.06);
    }
    .course-card-bookmark.is-saved {
      color: var(--gold);
      border-color: var(--gold);
      background: rgba(184,146,58,.10);
    }

    /* Bookmark — filter chip on the lessons-list page */
    .course-bookmark-toggle {
      display: inline-flex; align-items: center; gap: .4rem;
      flex-shrink: 0;
    }
    .course-bookmark-toggle svg { width: 14px; height: 14px; }
    .course-bookmark-toggle.is-active {
      background: var(--gold);
      border-color: var(--gold);
      color: white;
    }
    .course-bookmark-toggle.is-active .course-chip-count { color: rgba(255,255,255,.75); }

    /* Loading state for course list */
    .course-loading {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 4rem 2rem;
      color: var(--ink-mute);
    }

    /* Mobile */
    @media (max-width: 640px) {
      .course-header { padding: 0 .9rem; }
      .course-back-label { display: none; }
      .course-body { padding: 1.6rem 1rem 3rem; }
      .course-hero-title { font-size: 1.7rem; }
      .course-chips-label { display: none; }
      .course-chip { font-size: .78rem; padding: .38rem .7rem; }
      .course-grid { grid-template-columns: 1fr; }
    }

    /* ── Loading + error states ── */
    .reader-loading, .reader-error {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      flex: 1;
      padding: 2rem;
      color: var(--ink-mute);
      text-align: center;
    }
    .reader-loading .reader-spinner {
      width: 32px; height: 32px;
      border: 3px solid var(--line);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: reader-spin .9s linear infinite;
      margin-bottom: .8rem;
    }
    @keyframes reader-spin { to { transform: rotate(360deg); } }
    .reader-error h2 {
      font-family: var(--font-display);
      color: var(--ink);
      font-size: 1.4rem;
      margin: 0 0 .6rem;
      font-weight: 500;
    }
    .reader-error a {
      color: var(--accent-warm);
      text-decoration: none;
      margin-top: 1.2rem;
      font-weight: 600;
    }
    .reader-error a:hover { text-decoration: underline; }

    /* ── Mobile (<= 640px) ── */
    @media (max-width: 640px) {
      .reader-header { padding: 0 .9rem; gap: .7rem; }
      .reader-back-label { display: none; }
      .reader-title { font-size: .95rem; }
      .reader-pill { font-size: .62rem; padding: .18rem .45rem; }
      .reader-pipbar { padding: .65rem .8rem; gap: .8rem; }
      .reader-pip-line { width: 12px; }
      .reader-pipbar-counter { font-size: .76rem; min-width: auto; }
      .reader-page { padding: 1.6rem 1rem 1.2rem; }
      .reader-page-title { font-size: 1.55rem; margin-bottom: 1.4rem; }
      .reader-footer { padding: .75rem .9rem; gap: .6rem; }
      .reader-nav-btn { padding: .55rem 1rem; font-size: .85rem; }
      .reader-nav-btn.is-primary { padding: .55rem 1.15rem; }
    }
    @media (max-width: 380px) {
      .reader-pip-line { width: 8px; }
      .reader-pipbar { gap: .55rem; }
    }

    /* ─── German A1+A2 block types (native_first courses) ──────────
       These render inside Azerbaijani-language lessons where German is
       the language being taught, not the medium of instruction. */

    /* Bookmark wrapper — appears on callout-class blocks. */
    /* Pin — small, calm affordance. Sits at the top-right of any
       wrappable block. Idle: hidden. Hover: appears as a quiet
       circle. Active (saved): filled pin in accent, no tilt or
       pop — the *block itself* communicates the saved state via
       the highlight wash below. */
    .rb-callout-wrap {
      position: relative;
      border-radius: 8px;
      transition: box-shadow .3s ease, background .3s ease;
    }
    .rb-callout-bookmark {
      position: absolute;
      top: .55rem; right: .55rem;
      width: 32px; height: 32px;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 50%;
      color: var(--ink-mute);
      cursor: pointer;
      opacity: 0;
      transition: opacity .2s ease,
                  color .2s ease,
                  border-color .2s ease,
                  background .2s ease;
      z-index: 2;
    }
    .rb-callout-wrap:hover .rb-callout-bookmark,
    .rb-callout-bookmark:focus-visible,
    .rb-callout-bookmark.is-bookmarked {
      opacity: 1;
    }
    .rb-callout-bookmark:hover {
      color: var(--accent-warm);
      border-color: color-mix(in srgb, var(--accent-warm) 60%, var(--line));
    }
    .rb-callout-bookmark.is-bookmarked {
      color: var(--accent-warm);
      border-color: var(--accent-warm);
      background: color-mix(in srgb, var(--accent-warm) 14%, var(--card));
    }
    .rb-callout-bookmark.is-bookmarked svg { fill: currentColor; }
    @media (hover: none) {
      .rb-callout-bookmark { opacity: .6; }
    }

    /* HIGHLIGHTED STATE — the block itself.
       When pinned, the wrap gets a soft warm "highlighter" wash:
       a subtle accent ring all around + a faint background tint.
       Reads as "this block has been marked" without shouting. */
    .rb-callout-wrap:has(.rb-callout-bookmark.is-bookmarked) {
      box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--accent-warm) 38%, transparent),
        0 8px 26px -14px color-mix(in srgb, var(--accent-warm) 30%, transparent);
    }
    /* For wrappers around blocks that already have their own
       background (keyRule, tip, cultural, comparison, table,
       phrasebook, etc.), the box-shadow ring around the wrap is
       the highlight signal. Text blocks have no visible chrome —
       so they get an inner highlighter wash instead. */
    .rb-callout-wrap[data-block-kind="text"]:has(.rb-callout-bookmark.is-bookmarked) .rb-callout-content {
      padding: .9rem 1.1rem .65rem;
      border-radius: 6px;
      background: linear-gradient(
        105deg,
        color-mix(in srgb, var(--accent-warm) 10%, transparent) 0%,
        color-mix(in srgb, var(--accent-warm) 16%, transparent) 50%,
        color-mix(in srgb, var(--accent-warm) 10%, transparent) 100%
      );
      transition: background .35s ease, padding .25s ease;
    }
    .rb-callout-wrap[data-block-kind="text"]:has(.rb-callout-bookmark.is-bookmarked) .rb-text {
      margin-bottom: 0;
    }

    /* Tip — soft sidebar callout */
    .rb-tip {
      background: rgba(184,146,58,.06);
      border-left: 3px solid var(--accent-warm);
      border-radius: 8px;
      padding: 1rem 1.2rem;
      margin: 1.4rem 0;
    }
    .rb-tip-label {
      font-family: var(--font-display);
      font-size: .8rem; letter-spacing: .12em;
      text-transform: uppercase; color: var(--accent-warm);
      font-weight: 600;
      margin-bottom: .35rem;
    }
    .rb-tip-body { color: var(--ink); line-height: 1.55; font-size: .95rem; }

    /* Cultural note */
    .rb-cultural {
      background: var(--bg-tint);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 1rem 1.2rem;
      margin: 1.4rem 0;
    }
    .rb-cultural-header {
      display: flex; align-items: center; gap: .5rem;
      font-size: .78rem; letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-weight: 600;
      margin-bottom: .55rem;
    }
    .rb-cultural-body { color: var(--ink); font-size: .94rem; line-height: 1.55; }

    /* Phrasebook */
    .rb-phrasebook {
      margin: 1.4rem 0;
      display: flex; flex-direction: column; gap: .65rem;
    }
    .rb-phrasebook-title {
      font-family: var(--font-display);
      font-size: 1rem; font-weight: 500;
      color: var(--ink);
      margin-bottom: .25rem;
    }
    /* Phrase card — typography-led, not box-led. The German phrase
       gets editorial weight (large serif, ink-on-cream); Azerbaijani
       sits in muted gray as the "translation". A tiny dotted bridge
       between them reads as "this maps to that" without screaming. */
    .rb-phrase {
      display: flex; gap: 1.1rem; align-items: stretch;
      padding: 1rem 1.15rem;
      background: #FBF6E8;
      border: 1px solid var(--line);
      border-radius: 12px;
      position: relative;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .rb-phrase::before {
      content: '';
      position: absolute;
      left: 0; top: 14px; bottom: 14px;
      width: 3px;
      background: var(--accent-warm, #B6442C);
      opacity: .35;
      border-radius: 0 2px 2px 0;
      transition: opacity .15s ease;
    }
    .rb-phrase:hover {
      border-color: var(--ink-soft);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(31, 25, 18, .07);
    }
    .rb-phrase:hover::before { opacity: .8; }
    .rb-phrase-image {
      flex-shrink: 0;
      width: 64px; height: 64px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      display: flex; align-items: center; justify-content: center;
    }
    .rb-phrase-image img { max-width: 100%; max-height: 100%; }
    /* Two-column grid: DE | bridge | AZ.
       The middle "bridge" column is a tiny dotted line that visually
       connects target-language to native-language without a heavy
       border. The German side gets editorial weight; AZ side stays
       muted but readable. Context note spans the full row underneath. */
    .rb-phrase-main {
      flex: 1; min-width: 0;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) 28px minmax(0, .95fr);
      column-gap: .85rem;
      row-gap: .45rem;
      align-items: center;
    }
    .rb-phrase-de {
      display: flex; align-items: center; gap: .55rem;
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 500;
      color: var(--ink);
      line-height: 1.25;
      letter-spacing: -0.005em;
    }
    .rb-phrase-bridge {
      align-self: center;
      height: 1px;
      background-image: radial-gradient(circle, var(--ink-mute) 1px, transparent 1.5px);
      background-size: 6px 1px;
      background-repeat: repeat-x;
      opacity: .55;
    }
    .rb-phrase-az {
      font-size: .98rem;
      font-weight: 400;
      color: var(--ink-soft);
      line-height: 1.35;
    }
    .rb-phrase-context {
      grid-column: 1 / -1;
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      width: max-content;
      font-size: .72rem;
      color: var(--accent-warm, #B6442C);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      padding: .2rem .55rem;
      background: rgba(184, 90, 70, .08);
      border-radius: 999px;
      font-style: normal;
    }
    @media (max-width: 560px) {
      .rb-phrase-main {
        grid-template-columns: 1fr;
        row-gap: .25rem;
      }
      .rb-phrase-bridge { display: none; }
      .rb-phrase-de { font-size: 1.15rem; }
      .rb-phrase-az { font-size: .9rem; }
    }
    .rb-phrase-audio {
      width: 28px; height: 28px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink-soft);
      border-radius: 50%;
      cursor: pointer;
      flex-shrink: 0;
      transition: all .12s ease;
    }
    .rb-phrase-audio:hover {
      color: var(--accent-warm); border-color: var(--accent-warm);
      background: rgba(184,146,58,.08);
    }
    .rb-phrase-audio:active { transform: scale(.92); }
    .rb-phrase-audio.is-inline { width: 22px; height: 22px; vertical-align: middle; }
    .rb-phrase-audio.is-letter { width: 22px; height: 22px; }
    .rb-phrase-audio.is-pron { width: 26px; height: 26px; }
    /* Slow-rate companion button. Renders directly after the play btn
       on manifest-driven audio (table German column, dialogue fallback).
       Dashed border + muted ink so the eye reads it as the secondary
       action; primary tap is still the play triangle. */
    .rb-phrase-audio.is-slow {
      margin-left: .25rem;
      border-style: dashed;
      color: var(--ink-mute);
    }
    .rb-phrase-audio.is-slow:hover {
      color: var(--accent-warm); border-color: var(--accent-warm);
      border-style: solid;
    }

    /* Dialogue */
    .rb-dialogue {
      margin: 1.4rem 0;
      display: flex; flex-direction: column; gap: .6rem;
    }
    .rb-dialogue-title {
      font-family: var(--font-display);
      font-size: 1rem; font-weight: 500;
      margin-bottom: .35rem;
    }
    .rb-dialogue-turn {
      display: flex; flex-direction: column;
      max-width: 78%;
    }
    .rb-dialogue-turn.is-a { align-self: flex-start; align-items: flex-start; }
    .rb-dialogue-turn.is-b { align-self: flex-end;   align-items: flex-end;   }
    .rb-dialogue-speaker {
      font-size: .72rem; color: var(--ink-mute);
      letter-spacing: .08em; text-transform: uppercase;
      margin-bottom: .15rem;
    }
    .rb-dialogue-bubble {
      background: var(--bg-tint);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: .65rem .9rem;
    }
    .rb-dialogue-turn.is-b .rb-dialogue-bubble {
      background: rgba(184,146,58,.10);
      border-color: rgba(184,146,58,.25);
    }
    .rb-dialogue-de {
      font-family: var(--font-display);
      font-size: 1rem; font-weight: 500;
      color: var(--ink);
      line-height: 1.35;
    }
    .rb-dialogue-az {
      font-size: .85rem; color: var(--ink-soft);
      margin-top: .2rem;
    }

    /* Alphabet grid */
    .rb-alphabet { margin: 1.4rem 0; }
    .rb-alphabet-title {
      font-family: var(--font-display);
      font-size: 1rem; font-weight: 500;
      margin-bottom: .55rem;
    }
    .rb-alphabet-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
      gap: .5rem;
    }
    .rb-letter {
      background: var(--bg-tint);
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: .55rem .35rem;
      text-align: center;
      position: relative;
    }
    .rb-letter-glyph {
      font-family: var(--font-display);
      font-size: 1.25rem; font-weight: 500;
      color: var(--ink);
      line-height: 1.1;
    }
    .rb-letter-ipa {
      font-size: .76rem; color: var(--accent-warm);
      margin-top: .15rem;
    }
    .rb-letter-az {
      font-size: .68rem; color: var(--ink-mute);
      margin-top: .2rem;
    }
    .rb-letter .rb-phrase-audio {
      position: absolute; top: .25rem; right: .25rem;
    }

    /* Pronunciation rule */
    .rb-pron {
      background: var(--bg-tint);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: .85rem 1.05rem;
      margin: 1rem 0;
    }
    .rb-pron-header {
      display: flex; align-items: center; gap: .55rem;
      flex-wrap: wrap;
    }
    .rb-pron-symbol {
      font-family: var(--font-display);
      font-size: 1.4rem; font-weight: 500;
      color: var(--ink);
      min-width: 1.5em;
    }
    .rb-pron-arrow { color: var(--ink-mute); }
    .rb-pron-sound {
      font-size: 1.05rem; font-weight: 500;
      color: var(--accent-warm);
    }
    .rb-pron-note {
      font-size: .82rem; color: var(--ink-soft);
      margin-top: .35rem; line-height: 1.4;
    }
    .rb-pron-examples {
      margin-top: .55rem;
      display: flex; flex-wrap: wrap; gap: .35rem .55rem;
    }
    .rb-pron-ex {
      font-family: var(--font-display);
      font-size: .92rem;
      color: var(--ink);
      padding: .15rem .45rem;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 6px;
    }
    .rb-pron-ex-az { color: var(--ink-mute); font-size: .8rem; }

    /* Gloss */
    .rb-gloss {
      margin: 1.2rem 0;
      padding: .9rem 1.1rem;
      background: var(--bg-tint);
      border-left: 3px solid var(--ink-soft);
      border-radius: 8px;
    }
    .rb-gloss-de {
      font-family: var(--font-display);
      font-size: 1.1rem; font-weight: 500;
      color: var(--ink);
      line-height: 1.4;
    }
    .rb-gloss-az {
      font-size: .92rem; color: var(--ink-soft);
      margin-top: .25rem;
      line-height: 1.45;
    }
    .rb-gloss-wbw {
      margin-top: .65rem;
      font-size: .82rem; color: var(--ink-soft);
    }
    .rb-gloss-wbw summary { cursor: pointer; padding: .15rem 0; }
    .rb-gloss-wbw-grid {
      margin-top: .45rem;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: .45rem;
    }
    .rb-gloss-wbw-cell {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: .35rem .5rem;
    }
    .rb-gloss-wbw-de {
      font-family: var(--font-display);
      font-weight: 500; color: var(--ink);
    }
    .rb-gloss-wbw-az {
      font-size: .76rem; color: var(--ink-mute);
      margin-top: .1rem;
    }

    /* ──────────────────────────────────────────────────────────────
       UNITS LAYOUT — opt-in via course.lessonsLayout === 'units'
       Two views: the journey-rail map and the per-unit detail page.
       ────────────────────────────────────────────────────────────── */

    /* The hero gets a chunky overall progress bar that's visible from
       the top of the scroll. We style the existing course-hero shell
       and lay the bar underneath the description. */
    .units-hero { padding-bottom: 1.4rem; }
    .units-overall {
      margin-top: 1.1rem;
      max-width: 32rem;
    }
    .units-overall-bar {
      height: 8px;
      background: var(--line-soft);
      border-radius: 999px;
      overflow: hidden;
    }
    .units-overall-bar > span {
      display: block; height: 100%;
      background: linear-gradient(90deg, #C97AB6 0%, #5C8A6A 50%, #E8946A 100%);
      border-radius: 999px;
      transition: width .35s cubic-bezier(.4,.1,.2,1);
    }
    .units-overall-meta {
      margin-top: .55rem;
      font-size: .82rem;
      color: var(--ink-soft);
    }
    .units-overall-meta strong { color: var(--ink); font-weight: 600; }

    /* ── Path layout (Pre-IELTS) — daily syllabus ─────────────────
       3 phases stacked vertically. Each phase contains weeks
       (collapsible). Each week contains 5 days. Today highlighted.
       Designed for daily-driver use: open the page, see today,
       click in. */
    .path-index {
      max-width: 920px;
      margin: 0 auto;
      padding: 3.4rem 1.8rem 5rem;
    }

    .path-hero {
      margin-bottom: 2.4rem;
      padding-bottom: 1.6rem;
      border-bottom: 1px solid var(--line);
    }
    .path-hero-eyebrow {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent-warm, #B6442C);
      margin-bottom: .55rem;
    }
    .path-hero-title {
      font-family: var(--font-display);
      font-size: clamp(2rem, 4vw, 2.8rem);
      font-weight: 600;
      letter-spacing: -.018em;
      color: var(--ink);
      margin: 0 0 .8rem;
      line-height: 1.1;
    }
    .path-hero-desc {
      margin: 0 0 1.4rem;
      color: var(--ink-soft);
      font-size: 1rem;
      line-height: 1.55;
      max-width: 560px;
    }
    .path-hero-bar {
      max-width: 380px;
      height: 6px;
      background: var(--line-soft);
      border-radius: 99px;
      overflow: hidden;
      margin-bottom: 1.2rem;
    }
    .path-hero-bar > span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--accent-warm, #B6442C), color-mix(in srgb, var(--accent-warm, #B6442C) 75%, var(--ink)));
      transition: width .45s ease;
    }
    .path-today-cta {
      display: inline-flex; align-items: center;
      padding: .8rem 1.4rem;
      background: var(--ink);
      color: var(--bg);
      border-radius: 99px;
      font-size: .95rem;
      font-weight: 600;
      text-decoration: none;
      transition: all .2s;
      box-shadow: 0 8px 22px -10px rgba(0,0,0,.35);
    }
    .path-today-cta:hover {
      background: var(--accent-warm, #B6442C);
      transform: translateY(-2px);
      box-shadow: 0 14px 28px -10px var(--accent-warm, #B6442C);
    }

    /* Phase card — bigger container, accent-strip on the left edge.
       Click header to collapse/expand. */
    .path-phase {
      --accent: #D4A05A;
      position: relative;
      background: var(--card, #fff);
      border: 1px solid var(--line);
      border-radius: 16px;
      margin-bottom: 1.1rem;
      overflow: hidden;
      transition: border-color .2s, box-shadow .2s;
    }
    .path-phase::before {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 4px;
      background: var(--accent);
    }
    .path-phase:hover {
      border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    }
    .path-phase.is-open {
      box-shadow: 0 14px 32px -22px color-mix(in srgb, var(--accent) 60%, rgba(0,0,0,.25));
    }
    .path-phase-h {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 1rem;
      padding: 1.2rem 1.4rem 1.2rem 1.65rem;
      background: transparent;
      border: 0;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      color: var(--ink);
    }
    .path-phase-num {
      flex-shrink: 0;
      font-family: var(--font-display);
      font-size: 1.4rem;
      font-weight: 600;
      color: var(--accent);
      letter-spacing: -.02em;
      width: 38px;
    }
    .path-phase-name {
      flex: 1 1 auto;
      display: flex; flex-direction: column;
      gap: .15rem;
      min-width: 0;
    }
    .path-phase-eyebrow {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    .path-phase-title {
      font-family: var(--font-display);
      font-size: 1.3rem;
      font-weight: 600;
      letter-spacing: -.01em;
      color: var(--ink);
    }
    .path-phase-stats {
      flex-shrink: 0;
      font-size: .82rem;
      color: var(--ink-mute);
      font-weight: 600;
    }
    .path-phase-chev {
      flex-shrink: 0;
      color: var(--ink-mute);
      transition: transform .25s;
    }
    .path-phase.is-open .path-phase-chev { transform: rotate(180deg); color: var(--accent); }
    .path-phase-bar {
      height: 3px;
      background: var(--line-soft);
      margin: 0 1.4rem 0 1.65rem;
      border-radius: 99px;
      overflow: hidden;
    }
    .path-phase-bar > span {
      display: block;
      height: 100%;
      background: var(--accent);
      transition: width .4s ease;
    }
    .path-phase-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .35s ease;
      padding: 0 1.4rem;
    }
    .path-phase.is-open .path-phase-body {
      max-height: 4000px;
      padding: 1rem 1.4rem 1.5rem 1.65rem;
    }

    /* Week row — compact inside phase. Click header to expand days. */
    .path-week {
      padding: .55rem 0;
      border-top: 1px solid var(--line-soft);
    }
    .path-week:first-child { border-top: 0; }
    .path-week-h {
      width: 100%;
      display: flex;
      align-items: center;
      gap: .85rem;
      padding: .55rem .25rem;
      background: transparent;
      border: 0;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      color: var(--ink);
      transition: background .15s;
      border-radius: 8px;
    }
    .path-week-h:hover { background: var(--line-soft); }
    .path-week-dot {
      flex-shrink: 0;
      width: 22px; height: 22px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 1rem;
      color: var(--ink-mute);
      line-height: 1;
    }
    .path-week-dot.is-done { color: var(--accent); }
    .path-week-dot.is-progress { color: var(--accent); }
    .path-week-meta {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: .1rem;
      min-width: 0;
    }
    .path-week-num {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    .path-week-name {
      font-size: 1rem;
      font-weight: 600;
      color: var(--ink);
    }
    .path-week-progress {
      font-size: .82rem;
      font-weight: 600;
      color: var(--ink-mute);
    }
    .path-week-chev {
      flex-shrink: 0;
      color: var(--ink-mute);
      transition: transform .25s;
    }
    .path-week.is-open .path-week-chev { transform: rotate(180deg); color: var(--accent); }
    .path-days {
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease;
    }
    .path-week.is-open .path-days {
      max-height: 600px;
      padding-top: .35rem;
      padding-bottom: .55rem;
    }
    .path-day-empty {
      list-style: none;
      padding: .65rem .9rem;
      font-size: .85rem;
      color: var(--ink-mute);
      font-style: italic;
    }
    .path-day {
      list-style: none;
      margin: .15rem 0;
    }
    .path-day-link {
      display: flex;
      align-items: center;
      gap: .9rem;
      padding: .65rem .9rem;
      border-radius: 10px;
      text-decoration: none;
      color: var(--ink);
      transition: background .15s, padding-left .15s;
      position: relative;
    }
    .path-day-link:hover {
      background: color-mix(in srgb, var(--accent) 6%, transparent);
      padding-left: 1.2rem;
    }
    .path-day-num {
      flex-shrink: 0;
      width: 56px;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-mute);
    }
    .path-day-icon {
      flex-shrink: 0;
      width: 22px; height: 22px;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--accent);
    }
    .path-day-title {
      flex: 1 1 auto;
      font-size: .94rem;
      color: var(--ink);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .path-day-mins {
      flex-shrink: 0;
      font-size: .76rem;
      color: var(--ink-mute);
      font-weight: 600;
    }
    .path-day-chip {
      flex-shrink: 0;
      padding: .15rem .55rem;
      background: var(--accent);
      color: #fff;
      border-radius: 99px;
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .path-day-arrow {
      flex-shrink: 0;
      color: var(--ink-mute);
      opacity: .4;
      transition: transform .15s, opacity .15s, color .15s;
    }
    .path-day-link:hover .path-day-arrow {
      color: var(--accent);
      opacity: 1;
      transform: translateX(2px);
    }
    /* Today row — accent rail + accent-tinted background */
    .path-day.is-today .path-day-link {
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      box-shadow: inset 3px 0 0 var(--accent);
    }
    .path-day.is-today .path-day-title {
      font-weight: 600;
      color: var(--ink);
    }
    .path-day.is-today .path-day-icon {
      color: var(--accent);
    }
    .path-day-todaytick {
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--accent);
    }
    /* Done row — desaturated, checkmark in accent */
    .path-day.is-done .path-day-link {
      opacity: .65;
    }
    .path-day.is-done .path-day-link:hover { opacity: 1; }
    .path-day.is-done .path-day-title {
      text-decoration: line-through;
      text-decoration-thickness: 1px;
      text-decoration-color: color-mix(in srgb, var(--ink-mute) 50%, transparent);
    }

    /* ── Modules layout (IELTS) — flat grid of skill modules ────────
       Designed for daily use: clean module cards, accent per skill,
       progress bar per card. No journey framing — modules are parallel
       skills, not sequential. */
    .modules-index {
      max-width: 1100px;
      margin: 0 auto;
      padding: 2.4rem 1.8rem 4rem;
    }
    .mod-hero {
      margin-bottom: 2.2rem;
    }
    .mod-hero-eyebrow {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--accent-warm, #B6442C);
      margin-bottom: .55rem;
    }
    .mod-hero-title {
      font-family: var(--font-display);
      font-size: clamp(1.85rem, 3.6vw, 2.6rem);
      font-weight: 600;
      letter-spacing: -.018em;
      color: var(--ink);
      margin: 0 0 .65rem;
    }
    .mod-hero-desc {
      margin: 0 0 1.4rem;
      color: var(--ink-soft);
      font-size: .98rem;
      line-height: 1.55;
      max-width: 580px;
    }
    .mod-hero-bar {
      max-width: 360px;
      height: 6px;
      background: var(--line-soft);
      border-radius: 99px;
      overflow: hidden;
    }
    .mod-hero-bar > span {
      display: block;
      height: 100%;
      background: linear-gradient(90deg, var(--accent-warm, #B6442C), color-mix(in srgb, var(--accent-warm, #B6442C) 70%, var(--ink)));
      transition: width .45s ease;
    }
    .mod-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
    }
    .mod-card {
      --accent: #3B6A8A;
      position: relative;
      display: flex;
      align-items: stretch;
      gap: 1rem;
      padding: 1.3rem 1.4rem 1.4rem;
      background: var(--card, #fff);
      border: 1px solid var(--line);
      border-radius: 16px;
      text-decoration: none;
      color: inherit;
      transition: transform .2s, border-color .2s, box-shadow .2s, padding-left .2s;
      overflow: hidden;
    }
    .mod-card::before {
      content: '';
      position: absolute;
      left: 0; top: 14%; bottom: 14%;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--accent);
      opacity: 0;
      transition: opacity .2s, top .2s, bottom .2s;
    }
    .mod-card:hover {
      transform: translateY(-2px);
      border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
      box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--accent) 60%, rgba(0,0,0,.25));
      padding-left: 1.7rem;
    }
    .mod-card:hover::before {
      opacity: 1;
      top: 0; bottom: 0;
    }
    .mod-card.is-empty {
      opacity: .55;
      cursor: default;
      pointer-events: none;
    }
    .mod-card.is-complete {
      border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
    }
    .mod-card-icon {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px; height: 52px;
      border-radius: 14px;
      background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 18%, var(--card)) 0%,
        color-mix(in srgb, var(--accent) 7%, var(--card)) 100%);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
      font-size: 1.7rem;
      transition: background .2s, transform .2s;
    }
    .mod-card:hover .mod-card-icon {
      background: linear-gradient(135deg,
        var(--accent) 0%,
        color-mix(in srgb, var(--accent) 78%, #000) 100%);
      transform: scale(1.05);
    }
    .mod-card-body { flex: 1 1 auto; min-width: 0; }
    .mod-card-name {
      font-family: var(--font-display);
      font-size: 1.25rem;
      font-weight: 600;
      letter-spacing: -.008em;
      color: var(--ink);
      margin: 0 0 .35rem;
    }
    .mod-card-desc {
      margin: 0 0 .75rem;
      font-size: .88rem;
      line-height: 1.45;
      color: var(--ink-soft);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .mod-card-meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .5rem;
      font-size: .78rem;
      color: var(--ink-mute);
      margin-bottom: .75rem;
    }
    .mod-card-chip {
      padding: .15rem .55rem;
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--accent);
      border-radius: 99px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-size: .68rem;
    }
    .mod-card-status { font-weight: 600; }
    .mod-card-bar {
      height: 4px;
      background: var(--line-soft);
      border-radius: 99px;
      overflow: hidden;
    }
    .mod-card-bar > span {
      display: block;
      height: 100%;
      background: var(--accent);
      transition: width .45s ease;
    }
    .mod-card-arrow {
      flex-shrink: 0;
      align-self: center;
      color: var(--ink-mute);
      opacity: .55;
      transition: transform .2s, color .15s, opacity .15s;
    }
    .mod-card:hover .mod-card-arrow {
      color: var(--accent);
      opacity: 1;
      transform: translateX(3px);
    }

    /* Journey rail — a flowing two-column staircase. Cards alternate
       sides on desktop with a subtle vertical line between them; on
       mobile collapses to a single column. The "rail" feel comes from
       the dotted center spine (::before) and the card "joints" tying
       in to it. */
    .units-rail {
      list-style: none; padding: 0; margin: 0;
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.4rem;
    }
    @media (min-width: 760px) {
      .units-rail {
        grid-template-columns: 1fr 1fr;
        column-gap: 2rem;
        row-gap: 1.6rem;
      }
      /* Stagger the second column down by a half-row for a journey feel. */
      .units-rail > .unit-tile:nth-child(even) { transform: translateY(2.4rem); }
      /* Soft connector line down the middle. */
      .units-rail::before {
        content: '';
        position: absolute;
        left: 50%; top: 1rem; bottom: 1rem;
        width: 0;
        border-left: 2px dashed var(--line);
        opacity: .55;
        pointer-events: none;
      }
    }

    .unit-tile {
      list-style: none;
      --unit-accent: #5C8A6A;
    }
    .unit-tile-link {
      display: block;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 18px;
      overflow: hidden;
      text-decoration: none;
      color: inherit;
      transition: transform .2s cubic-bezier(.4,.1,.2,1), box-shadow .2s, border-color .2s;
      box-shadow: 0 1px 0 rgba(0,0,0,.02);
    }
    .unit-tile-link:hover {
      transform: translateY(-3px);
      box-shadow: 0 14px 32px -18px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.04);
      border-color: var(--unit-accent);
    }
    .unit-tile.is-empty .unit-tile-link {
      opacity: .65;
      cursor: not-allowed;
      pointer-events: none;
    }
    .unit-tile.is-unsorted .unit-tile-link {
      pointer-events: none;
      cursor: default;
      opacity: .85;
    }

    /* Hero band — colored by the unit accent, gets an oversized number
       overlay for character. Illustration URL replaces the gradient. */
    .unit-tile-band {
      position: relative;
      height: 130px;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,.92);
      overflow: hidden;
    }
    .unit-tile-band::after {
      /* Subtle radial highlight + grain, applied on top of any bg-image. */
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.22) 0%, transparent 60%),
        radial-gradient(80% 60% at 80% 90%, rgba(0,0,0,.18) 0%, transparent 70%);
      pointer-events: none;
    }
    .unit-tile-num {
      position: relative;
      font-family: var(--font-display);
      font-size: 4.6rem;
      font-weight: 500;
      line-height: 1;
      letter-spacing: -.04em;
      color: rgba(255,255,255,.96);
      text-shadow: 0 2px 24px rgba(0,0,0,.25);
      z-index: 1;
    }
    .unit-tile-tick {
      position: absolute;
      top: 12px; right: 14px;
      width: 30px; height: 30px;
      display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.95);
      color: var(--unit-accent);
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0,0,0,.18);
      z-index: 2;
    }
    .unit-tile-tick svg { width: 16px; height: 16px; }

    .unit-tile-body {
      padding: 1.05rem 1.2rem 1.1rem;
    }
    .unit-tile-eyebrow {
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--unit-accent);
      font-weight: 700;
      margin-bottom: .35rem;
    }
    .unit-tile-title {
      font-family: var(--font-display);
      font-size: 1.45rem;
      font-weight: 500;
      line-height: 1.18;
      letter-spacing: -.005em;
      color: var(--ink);
      margin: 0 0 .15rem;
    }
    .unit-tile-subtitle {
      font-size: .92rem;
      color: var(--ink-soft);
      margin-bottom: .5rem;
    }
    .unit-tile-blurb {
      font-size: .87rem;
      color: var(--ink-soft);
      line-height: 1.5;
      margin: 0;
    }
    .unit-tile-foot {
      display: flex; flex-direction: column;
      gap: .45rem;
      margin-top: 1rem;
      padding-top: .85rem;
      border-top: 1px solid var(--line-soft);
    }
    .unit-tile-foot-row {
      display: flex; align-items: center;
      justify-content: space-between;
      gap: .6rem;
    }
    .unit-tile-status {
      font-size: .82rem;
      font-weight: 600;
      color: var(--ink-soft);
    }
    .unit-tile.is-complete .unit-tile-status { color: var(--unit-accent); }
    .unit-tile-pct {
      font-size: .82rem;
      font-weight: 700;
      color: var(--ink-mute);
      font-variant-numeric: tabular-nums;
      display: inline-flex; align-items: center;
      line-height: 1;
    }
    .unit-tile-pct svg {
      width: 14px; height: 14px;
      color: var(--unit-accent);
    }
    .unit-tile.is-complete .unit-tile-pct { color: var(--unit-accent); }
    /* The bar: subtle track + accent fill. Rounded ends so the fill
       reads as soft progress rather than a hard meter. */
    .unit-tile-bar {
      height: 6px;
      background: var(--line-soft);
      border-radius: 999px;
      overflow: hidden;
    }
    .unit-tile-bar > span {
      display: block; height: 100%;
      background: var(--unit-accent);
      border-radius: 999px;
      transition: width .4s cubic-bezier(.4,.1,.2,1);
    }
    .unit-tile-bar.is-complete > span {
      /* Subtle gradient on the complete state so it doesn't look flat. */
      background: linear-gradient(90deg,
                  var(--unit-accent),
                  color-mix(in srgb, var(--unit-accent) 75%, white));
    }

    /* Progress ring — small SVG, the arc takes the unit accent. */
    .unit-ring {
      width: 36px; height: 36px;
      flex: 0 0 36px;
    }
    .unit-ring-track {
      fill: none;
      stroke: var(--line);
      stroke-width: 3;
    }
    .unit-ring-arc {
      fill: none;
      stroke: var(--unit-accent);
      stroke-width: 3;
      stroke-linecap: round;
      transition: stroke-dasharray .4s cubic-bezier(.4,.1,.2,1);
    }
    .unit-ring-label {
      font-family: var(--font-body);
      font-size: 9px;
      font-weight: 700;
      fill: var(--ink-soft);
    }
    .unit-ring.is-complete .unit-ring-arc { stroke: var(--unit-accent); }
    .unit-ring.is-complete .unit-ring-label { fill: var(--unit-accent); }

    /* ── Unit detail page ─────────────────────────────────────────── */

    .unit-detail { padding-top: .25rem; }
    .unit-detail-crumbs {
      margin-bottom: 1rem;
    }
    .unit-back {
      display: inline-flex; align-items: center; gap: .35rem;
      font-size: .85rem; font-weight: 600;
      color: var(--ink-soft);
      text-decoration: none;
      padding: .4rem .7rem .4rem .55rem;
      border-radius: 999px;
      background: var(--card);
      border: 1px solid var(--line);
      transition: background .15s, color .15s, border-color .15s;
    }
    .unit-back:hover {
      color: var(--ink);
      border-color: var(--ink-mute);
    }
    .unit-back-arrow { font-size: 1rem; line-height: 1; }

    .unit-detail-hero {
      position: relative;
      border-radius: 22px;
      padding: 2.4rem 2rem 2.2rem;
      color: rgba(255,255,255,.96);
      overflow: hidden;
      box-shadow: 0 18px 40px -22px rgba(0,0,0,.35);
    }
    .unit-detail-hero::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(120% 70% at 20% 10%, rgba(255,255,255,.22) 0%, transparent 65%),
        radial-gradient(80% 70% at 100% 100%, rgba(0,0,0,.20) 0%, transparent 70%);
      pointer-events: none;
    }
    .unit-detail-hero-inner {
      position: relative; z-index: 1;
      display: flex; align-items: flex-end;
      gap: 1.4rem;
      flex-wrap: wrap;
    }
    .unit-detail-num {
      font-family: var(--font-display);
      font-size: 5rem;
      line-height: .85;
      font-weight: 500;
      letter-spacing: -.04em;
      color: rgba(255,255,255,.95);
      text-shadow: 0 2px 24px rgba(0,0,0,.25);
      flex: 0 0 auto;
    }
    /* Module-style detail badge — IELTS modules have icons, no numbers. */
    .unit-detail-num.is-module {
      display: inline-flex; align-items: center; justify-content: center;
      width: 88px; height: 88px;
      font-size: 2.6rem;
      border-radius: 22px;
      background: rgba(255,255,255,.18);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.2),
                  0 12px 28px -16px rgba(0,0,0,.35);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .unit-detail-meta { flex: 1 1 14rem; }
    .unit-detail-eyebrow {
      font-size: .72rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.85);
      font-weight: 700;
      margin-bottom: .35rem;
    }
    .unit-detail-title {
      font-family: var(--font-display);
      font-size: 2.2rem;
      font-weight: 500;
      line-height: 1.1;
      letter-spacing: -.01em;
      color: #fff;
      margin: 0 0 .15rem;
    }
    .unit-detail-subtitle {
      font-size: 1.05rem;
      color: rgba(255,255,255,.85);
    }
    .unit-detail-blurb {
      max-width: 56ch;
      margin: 1.5rem 0 .25rem;
      color: var(--ink-soft);
      font-size: 1rem;
      line-height: 1.55;
    }
    .unit-detail-progress {
      display: flex; flex-direction: column;
      gap: .8rem;
      margin: 1.2rem 0 1.6rem;
      padding: 1rem 1.2rem 1.1rem;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
    }
    .unit-detail-progress-head {
      display: flex; align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
    .unit-detail-progress-text {
      font-size: .95rem;
      color: var(--ink-soft);
    }
    .unit-detail-progress-text strong { color: var(--ink); font-weight: 600; }
    .unit-detail-progress-sub {
      font-size: .8rem;
      color: var(--ink-mute);
      margin-top: .2rem;
    }
    .unit-detail-progress-pct {
      font-family: var(--font-display);
      font-size: 1.8rem;
      font-weight: 500;
      letter-spacing: -.01em;
      color: var(--unit-accent);
      line-height: 1;
      font-variant-numeric: tabular-nums;
      display: inline-flex; align-items: center;
    }
    .unit-detail-progress-pct svg {
      width: 26px; height: 26px;
      color: var(--unit-accent);
    }
    .unit-detail-bar {
      height: 8px;
      background: var(--line-soft);
      border-radius: 999px;
      overflow: hidden;
    }
    .unit-detail-bar > span {
      display: block; height: 100%;
      background: var(--unit-accent);
      border-radius: 999px;
      transition: width .45s cubic-bezier(.4,.1,.2,1);
    }
    .unit-detail-bar.is-complete > span {
      background: linear-gradient(90deg,
                  var(--unit-accent),
                  color-mix(in srgb, var(--unit-accent) 70%, white));
    }

    .unit-detail-section-h {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 500;
      color: var(--ink);
      margin: 1.4rem 0 .8rem;
      letter-spacing: -.005em;
    }
    .unit-detail-empty {
      padding: 2rem;
      text-align: center;
    }

    /* Teacher video row — sits between progress strip and lesson list.
       Horizontal scroller on mobile; wraps to a flex grid on wider
       screens. Cards reuse the unit's accent for the placeholder
       gradient when no thumbnail is attached. */
    .unit-detail-videos {
      margin: 1.6rem 0 .4rem;
    }
    .unit-video-row {
      display: flex; gap: .9rem;
      overflow-x: auto;
      padding: .2rem .15rem .5rem;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .unit-video-card {
      flex: 0 0 auto;
      width: 240px;
      display: flex; flex-direction: column;
      gap: .55rem;
      padding: 0;
      background: transparent;
      border: 0;
      cursor: pointer;
      text-align: left;
      scroll-snap-align: start;
      transition: transform .15s ease;
    }
    .unit-video-card:hover { transform: translateY(-2px); }
    .uvc-thumb {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .uvc-play {
      width: 48px; height: 48px;
      border-radius: 50%;
      background: rgba(255,255,255,.92);
      color: var(--ink);
      display: flex; align-items: center; justify-content: center;
      backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0,0,0,.18);
      transition: transform .15s ease;
    }
    .uvc-play svg { width: 22px; height: 22px; margin-left: 3px; }
    .unit-video-card:hover .uvc-play { transform: scale(1.08); }
    .uvc-duration {
      position: absolute;
      bottom: .5rem; right: .5rem;
      background: rgba(0,0,0,.7);
      color: #fff;
      font-size: .72rem; font-weight: 500;
      padding: .15rem .4rem;
      border-radius: 4px;
      letter-spacing: .01em;
    }
    .uvc-title {
      font-size: .92rem;
      line-height: 1.3;
      color: var(--ink);
      font-weight: 500;
      padding: 0 .15rem;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @media (min-width: 720px) {
      .unit-video-card { width: 280px; }
    }

    /* Modal video player. Backdrop dim + centered card with 16:9
       iframe. Auto-stops playback on close by blanking the src. */
    .video-modal {
      position: fixed; inset: 0;
      z-index: 1000;
      display: none;
      align-items: center; justify-content: center;
    }
    .video-modal.is-open { display: flex; }
    body.has-video-modal { overflow: hidden; }
    .video-modal-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.78);
      backdrop-filter: blur(3px);
    }
    .video-modal-card {
      position: relative;
      width: min(960px, 94vw);
      max-height: 92vh;
      background: var(--bg, #fff);
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,.5);
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .video-modal-head {
      display: flex; align-items: center; justify-content: space-between;
      gap: .8rem;
      padding: .7rem 1rem;
      border-bottom: 1px solid var(--line);
    }
    .video-modal-title {
      font-size: 1rem; font-weight: 500;
      color: var(--ink);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .video-modal-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: transparent;
      font-size: 1.4rem; line-height: 1;
      color: var(--ink-mute);
      cursor: pointer;
    }
    .video-modal-close:hover {
      color: var(--ink);
      border-color: var(--ink);
    }
    .video-modal-frame {
      position: relative;
      aspect-ratio: 16 / 9;
      background: #000;
    }
    .video-modal-frame iframe {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: 0;
    }

    /* Lesson rows inside a unit. Numbered, pill-shaped, hover-elevates. */
    .unit-lesson-list {
      list-style: none; padding: 0; margin: 0 0 2rem;
      display: flex; flex-direction: column;
      gap: .55rem;
    }
    .unit-lesson { list-style: none; }
    /* Legacy single-anchor row — used by lessons WITHOUT exercises[]
       (IELTS, etc.). One tap opens the reader. */
    .unit-lesson-link {
      display: flex; align-items: center;
      gap: 1rem;
      padding: .85rem 1rem;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 12px;
      text-decoration: none;
      color: inherit;
      transition: transform .15s, border-color .15s, box-shadow .15s;
    }
    .unit-lesson-link:hover {
      transform: translateX(2px);
      border-color: var(--unit-accent);
      box-shadow: 0 6px 16px -10px rgba(0,0,0,.18);
    }
    /* Disclosure pattern for lessons that carry `exercises[]`. Single
       integrated card: row at top, divider, action list below. No nested
       boxes — the action rows are part of the SAME card. Only one lesson
       can be open at a time (accordion, wired in lessons-list.js). */
    .unit-lesson.is-collapsible {
      display: block;
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      transition: border-color .2s, box-shadow .2s;
    }
    .unit-lesson.is-collapsible:hover {
      border-color: color-mix(in srgb, var(--unit-accent) 28%, var(--line));
    }
    .unit-lesson.is-collapsible.is-open {
      border-color: color-mix(in srgb, var(--unit-accent) 55%, var(--line));
      box-shadow: 0 12px 32px -22px color-mix(in srgb, var(--unit-accent) 60%, rgba(0,0,0,.25));
    }
    .unit-lesson-toggle {
      display: flex; align-items: center;
      gap: 1rem;
      width: 100%;
      padding: 1rem 1.15rem;
      background: transparent;
      border: 0;
      cursor: pointer;
      text-align: left;
      color: inherit;
      font: inherit;
      transition: background .15s;
    }
    .unit-lesson-toggle:hover { background: color-mix(in srgb, var(--unit-accent) 4%, transparent); }
    .unit-lesson-toggle:focus-visible {
      outline: 2px solid var(--unit-accent);
      outline-offset: -2px;
      border-radius: 14px;
    }
    .unit-lesson-chevron {
      flex: 0 0 auto;
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px;
      color: var(--ink-mute);
      transition: transform .25s ease, color .15s;
    }
    .unit-lesson.is-open .unit-lesson-chevron {
      transform: rotate(-180deg);
      color: var(--unit-accent);
    }

    /* Open state — lesson card gets a soft tinted background gradient
       so the eye knows which lesson is currently focused. */
    .unit-lesson.is-collapsible.is-open {
      background:
        linear-gradient(180deg,
          color-mix(in srgb, var(--unit-accent) 6%, var(--card)) 0%,
          var(--card) 100%);
    }

    /* Action rows live INSIDE the same card. No own border, no own bg —
       they read as continuation of the lesson, divided by a hairline. */
    .unit-lesson-panel {
      display: flex;
      flex-direction: column;
      border-top: 1px solid color-mix(in srgb, var(--unit-accent) 22%, var(--line));
      animation: unitLessonPanelIn .25s ease;
    }
    /* [hidden] would normally do display:none, but our `display:flex` above
       overrides it. Restore the hide-behaviour explicitly. */
    .unit-lesson-panel[hidden] { display: none; }
    @keyframes unitLessonPanelIn {
      from { opacity: 0; transform: translateY(-3px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .unit-lesson-action {
      position: relative;
      display: flex; align-items: center;
      gap: 1rem;
      padding: 1rem 1.15rem;
      background: transparent;
      text-decoration: none;
      color: inherit;
      transition: background .18s, padding-left .18s;
      border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    }
    .unit-lesson-action:first-child { border-top: 0; }

    /* Each action gets its own accent color via --action-tint custom prop.
       Read uses unit-accent (warm), Practice uses a complementary teal so
       the two affordances are visually distinct at a glance. */
    .unit-lesson-action.is-read     { --action-tint: var(--unit-accent); }
    .unit-lesson-action.is-practice { --action-tint: #2f8a8a; }

    .unit-lesson-action::before {
      content: '';
      position: absolute;
      left: 0; top: 10%;
      bottom: 10%;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--action-tint);
      opacity: 0;
      transition: opacity .18s, top .18s, bottom .18s;
    }
    .unit-lesson-action:hover {
      background:
        linear-gradient(90deg,
          color-mix(in srgb, var(--action-tint) 12%, transparent) 0%,
          color-mix(in srgb, var(--action-tint) 4%, transparent) 60%,
          transparent 100%);
      padding-left: 1.4rem;
    }
    .unit-lesson-action:hover::before {
      opacity: 1;
      top: 0; bottom: 0;
    }
    .unit-lesson-action-icon {
      flex: 0 0 auto;
      display: inline-flex; align-items: center; justify-content: center;
      width: 40px; height: 40px;
      border-radius: 11px;
      color: var(--action-tint);
      background:
        linear-gradient(135deg,
          color-mix(in srgb, var(--action-tint) 14%, var(--card)) 0%,
          color-mix(in srgb, var(--action-tint) 6%, var(--card)) 100%);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--action-tint) 18%, transparent);
      transition: background .2s, color .15s, box-shadow .2s, transform .2s;
    }
    .unit-lesson-action:hover .unit-lesson-action-icon {
      background:
        linear-gradient(135deg,
          var(--action-tint) 0%,
          color-mix(in srgb, var(--action-tint) 80%, #000) 100%);
      color: #fff;
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--action-tint) 30%, transparent),
        0 6px 14px -8px var(--action-tint);
      transform: scale(1.04);
    }
    .unit-lesson-action-text {
      flex: 1 1 auto; min-width: 0;
      display: flex; flex-direction: column;
      gap: .15rem;
    }
    .unit-lesson-action-title {
      font-weight: 600;
      font-size: 1rem;
      color: var(--ink);
      letter-spacing: -.005em;
    }
    .unit-lesson-action-sub {
      font-size: .8rem;
      color: var(--ink-mute);
    }
    .unit-lesson-action-arrow {
      flex: 0 0 auto;
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px;
      border-radius: 50%;
      color: var(--ink-mute);
      opacity: .5;
      transition: transform .2s, color .15s, opacity .18s, background .15s;
    }
    .unit-lesson-action:hover .unit-lesson-action-arrow {
      color: var(--action-tint);
      opacity: 1;
      transform: translateX(4px);
      background: color-mix(in srgb, var(--action-tint) 12%, transparent);
    }
    .unit-lesson-num {
      flex: 0 0 38px;
      width: 38px; height: 38px;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 600;
      color: var(--unit-accent);
      background: color-mix(in srgb, var(--unit-accent) 12%, var(--card));
      border-radius: 50%;
    }
    .unit-lesson.is-completed .unit-lesson-num {
      background: var(--unit-accent);
      color: #fff;
    }
    .unit-lesson.is-completed .unit-lesson-num svg { width: 18px; height: 18px; }
    .unit-lesson-body { flex: 1 1 auto; min-width: 0; }
    .unit-lesson-title {
      font-weight: 600;
      color: var(--ink);
      font-size: .98rem;
      line-height: 1.3;
    }
    .unit-lesson-meta {
      font-size: .78rem;
      color: var(--ink-mute);
      margin-top: .2rem;
    }
    .unit-lesson-arrow {
      flex: 0 0 auto;
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--ink-mute);
      transition: transform .15s, color .15s;
    }
    .unit-lesson-link:hover .unit-lesson-arrow {
      color: var(--unit-accent);
      transform: translateX(2px);
    }

    /* Tighten the detail hero padding on small screens. */
    @media (max-width: 640px) {
      .unit-detail-hero { padding: 1.8rem 1.4rem 1.6rem; border-radius: 18px; }
      .unit-detail-num  { font-size: 4rem; }
      .unit-detail-title { font-size: 1.7rem; }
      .unit-tile-band { height: 110px; }
      .unit-tile-num  { font-size: 3.8rem; }
    }

    /* ──────────────────────────────────────────────────────────────
       SAVED PAGE — per-course pinned list
       Phase 2 MVP: header + scroll-list of cards.
       Each card preserves the source block's native chrome by
       rendering the snapshot HTML inline (block CSS classes flow
       through). Phase 3 will add filter chips + lesson grouping.
       ────────────────────────────────────────────────────────────── */

    /* Override the parent .stub-body flex-center layout — that's
       designed for a single small "coming soon" card and clips long
       content on both ends. For Saved we want a normal block scroll
       container that aligns content to the top and lets it grow as
       tall as it needs. */
    #stub-body.is-saved {
      display: block;
      align-items: initial;
      justify-content: initial;
      padding: 2rem 1.4rem 5rem;
    }
    .saved-page {
      max-width: 880px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }

    .saved-header {
      margin-bottom: 1.4rem;
      padding-bottom: 1.2rem;
      border-bottom: 1px solid var(--line);
    }
    .saved-title {
      font-family: var(--font-display);
      font-size: 2.1rem;
      font-weight: 500;
      letter-spacing: -.012em;
      color: var(--ink);
      margin: 0 0 .35rem;
      line-height: 1.15;
    }
    .saved-subtitle {
      margin: 0;
      color: var(--ink-soft);
      font-size: .98rem;
    }

    .saved-count {
      font-size: .78rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--ink-mute);
      font-weight: 700;
      margin: .25rem 0 1rem;
    }

    /* ── Filter chips + search row ──
       Sits between the page header and the result list. Sticky on
       mobile so chips stay reachable while scrolling a long list.
       Counts on each chip update with the current search query. */
    .saved-filters {
      margin-bottom: .85rem;
    }
    .saved-chips {
      display: flex; flex-wrap: wrap;
      gap: .4rem;
    }
    .saved-chip {
      display: inline-flex; align-items: center;
      gap: .45rem;
      padding: .45rem .85rem;
      font-family: var(--font-body);
      font-size: .82rem;
      font-weight: 600;
      letter-spacing: .005em;
      color: var(--ink-soft);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 999px;
      cursor: pointer;
      transition: color .15s, border-color .15s, background .15s;
    }
    .saved-chip:hover {
      color: var(--ink);
      border-color: var(--ink-mute);
    }
    .saved-chip.is-active {
      color: var(--bg);
      background: var(--ink);
      border-color: var(--ink);
    }
    .saved-chip-count {
      font-size: .72rem;
      color: var(--ink-mute);
      font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .saved-chip.is-active .saved-chip-count {
      color: color-mix(in srgb, var(--bg) 70%, var(--ink-mute));
    }
    /* Tone hints for inactive chips — soft borders matching their
       saved-tag-* colors so the chip row feels organized. */
    .saved-chip.saved-chip-rule:not(.is-active),
    .saved-chip.saved-chip-tip:not(.is-active) {
      border-color: color-mix(in srgb, var(--accent-warm) 35%, var(--line));
    }
    .saved-chip.saved-chip-quiz:not(.is-active) {
      border-color: rgba(42,107,71,.30);
    }
    .saved-chip.saved-chip-compare:not(.is-active) {
      border-color: rgba(182,68,44,.30);
    }
    .saved-chip.saved-chip-culture:not(.is-active) {
      border-color: rgba(92,122,139,.30);
    }
    .saved-chip.saved-chip-phrase:not(.is-active) {
      border-color: rgba(79,122,92,.30);
    }

    /* Search input */
    .saved-search-row {
      position: relative;
      display: flex; align-items: center;
      margin: .85rem 0 1.2rem;
    }
    .saved-search-icon {
      position: absolute;
      left: .85rem;
      color: var(--ink-mute);
      pointer-events: none;
    }
    .saved-search-input {
      width: 100%;
      padding: .65rem 2.4rem .65rem 2.3rem;
      font-family: var(--font-body);
      font-size: .94rem;
      color: var(--ink);
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 10px;
      transition: border-color .15s, box-shadow .15s;
    }
    .saved-search-input:focus {
      outline: none;
      border-color: var(--ink-mute);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 8%, transparent);
    }
    .saved-search-input::-webkit-search-cancel-button { display: none; }
    .saved-search-clear {
      position: absolute;
      right: .55rem;
      width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      background: transparent;
      border: none;
      color: var(--ink-mute);
      border-radius: 50%;
      cursor: pointer;
      transition: color .15s, background .15s;
    }
    .saved-search-clear:hover {
      color: var(--ink);
      background: var(--line-soft);
    }

    /* Sticky filter row on mobile so chips stay reachable */
    @media (max-width: 700px) {
      .saved-filters,
      .saved-search-row {
        position: sticky;
        z-index: 5;
        background: var(--bg);
        margin-left: -1.4rem;
        margin-right: -1.4rem;
        padding-left: 1.4rem;
        padding-right: 1.4rem;
      }
      .saved-filters {
        top: 0;
        padding-top: .8rem;
        padding-bottom: .35rem;
      }
      .saved-search-row {
        top: 3.4rem;
        padding-top: 0;
        padding-bottom: .8rem;
        margin-top: 0;
      }
      .saved-chips {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        padding-bottom: .25rem;
      }
      .saved-chips::-webkit-scrollbar { display: none; }
      .saved-chip { flex-shrink: 0; }
    }

    /* Lesson group header (default view, no filter/search) */
    .saved-group {
      margin-bottom: 1.6rem;
    }
    .saved-group-h {
      display: flex; align-items: baseline;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: .65rem;
      padding-bottom: .55rem;
      border-bottom: 1px solid var(--line-soft);
    }
    .saved-group-title {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 500;
      color: var(--ink);
      margin: 0;
      letter-spacing: -.005em;
      flex: 1; min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .saved-group-count {
      font-size: .72rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--ink-mute);
      font-weight: 700;
      flex-shrink: 0;
    }
    .saved-group-list {
      display: flex; flex-direction: column;
      gap: 1rem;
    }

    /* Flat results (when filter/search is active) */
    .saved-results {
      display: flex; flex-direction: column;
      gap: 1.2rem;
    }

    /* Empty state for "filter matches nothing" */
    .saved-list-empty {
      text-align: center;
      padding: 2.5rem 1.5rem;
      color: var(--ink-soft);
    }
    .saved-list-empty h3 {
      font-family: var(--font-display);
      font-size: 1.2rem;
      font-weight: 500;
      color: var(--ink);
      margin: 0 0 .35rem;
      letter-spacing: -.005em;
    }
    .saved-list-empty p {
      margin: 0 0 1rem;
      font-size: .94rem;
    }
    .saved-clear-filters {
      padding: .55rem 1.1rem;
      background: var(--ink);
      color: var(--bg);
      border: none;
      border-radius: 999px;
      font-family: var(--font-body);
      font-size: .85rem;
      font-weight: 600;
      cursor: pointer;
      transition: transform .18s, box-shadow .18s;
    }
    .saved-clear-filters:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 14px -8px rgba(0,0,0,.25);
    }

    .saved-loading,
    .saved-empty {
      text-align: center;
      padding: 3rem 1.5rem;
      color: var(--ink-soft);
    }
    .saved-loading {
      display: flex; flex-direction: column;
      align-items: center; gap: .8rem;
      font-size: .92rem;
      color: var(--ink-mute);
    }
    .saved-spinner {
      width: 28px; height: 28px;
      border: 2px solid var(--line);
      border-top-color: var(--accent-warm);
      border-radius: 50%;
      animation: saved-spin .8s linear infinite;
    }
    @keyframes saved-spin {
      to { transform: rotate(360deg); }
    }
    .saved-empty-icon {
      display: inline-flex; align-items: center; justify-content: center;
      width: 64px; height: 64px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--accent-warm) 12%, var(--card));
      color: var(--accent-warm);
      margin: 0 auto 1rem;
    }
    .saved-empty h3 {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 500;
      color: var(--ink);
      margin: 0 0 .55rem;
      letter-spacing: -.005em;
    }
    .saved-empty p {
      max-width: 42ch;
      margin: 0 auto 1.2rem;
      line-height: 1.6;
      font-size: .95rem;
    }
    .saved-empty-cta {
      display: inline-flex; align-items: center;
      padding: .6rem 1.2rem;
      background: var(--ink);
      color: var(--bg);
      border-radius: 999px;
      font-size: .88rem;
      font-weight: 600;
      text-decoration: none;
      transition: transform .18s, box-shadow .18s;
    }
    .saved-empty-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px -8px rgba(0,0,0,.25);
    }

    /* ── Cards ──
       The outer .saved-list is just a container. Spacing between
       chips / search / count / groups is handled per-element so we
       don't accidentally double-gap the filter row. */
    .saved-list { display: block; }
    .saved-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 1.1rem 1.2rem 1rem;
      transition: opacity .25s ease, transform .25s ease, border-color .18s;
      animation: saved-card-in .35s ease;
    }
    @keyframes saved-card-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .saved-card:hover {
      border-color: color-mix(in srgb, var(--ink-mute) 50%, var(--line));
    }
    .saved-card.is-removing {
      opacity: 0;
      transform: translateY(-4px) scale(.99);
    }

    /* Top meta strip — type tag, source, time */
    .saved-card-meta {
      display: flex; align-items: center;
      gap: .65rem;
      flex-wrap: wrap;
      margin-bottom: .85rem;
      font-size: .82rem;
    }
    .saved-tag {
      display: inline-flex; align-items: center;
      padding: .2rem .55rem;
      font-size: .68rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 700;
      border-radius: 999px;
      background: var(--bg-tint);
      color: var(--ink-soft);
      border: 1px solid var(--line);
      flex-shrink: 0;
    }
    .saved-tag-rule    { color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 40%, var(--line)); background: color-mix(in srgb, var(--accent-warm) 10%, var(--card)); }
    .saved-tag-tip     { color: var(--accent-warm); border-color: color-mix(in srgb, var(--accent-warm) 40%, var(--line)); background: color-mix(in srgb, var(--accent-warm) 8%, var(--card)); }
    .saved-tag-quiz    { color: #2A6B47; border-color: rgba(42,107,71,.35); background: rgba(42,107,71,.06); }
    .saved-tag-compare { color: #B6442C; border-color: rgba(182,68,44,.35); background: rgba(182,68,44,.06); }
    .saved-tag-culture { color: #5C7A8B; border-color: rgba(92,122,139,.35); background: rgba(92,122,139,.08); }
    .saved-tag-explain { color: #8C6B3F; border-color: rgba(140,107,63,.35); background: rgba(140,107,63,.07); }
    .saved-tag-reveal  { color: #7A5BA4; border-color: rgba(122,91,164,.35); background: rgba(122,91,164,.08); }
    .saved-tag-phrase  { color: #4F7A5C; border-color: rgba(79,122,92,.35); background: rgba(79,122,92,.07); }
    .saved-tag-neutral { /* default */ }

    .saved-meta-source {
      flex: 1; min-width: 0;
      display: inline-flex; align-items: center;
      gap: .35rem;
      color: var(--ink-soft);
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .saved-meta-lesson {
      color: var(--ink);
      font-weight: 600;
    }
    .saved-meta-sep {
      color: var(--ink-mute);
    }
    .saved-meta-section {
      color: var(--ink-soft);
      font-size: .82rem;
    }
    .saved-meta-time {
      flex-shrink: 0;
      color: var(--ink-mute);
      font-size: .78rem;
      font-variant-numeric: tabular-nums;
    }

    /* Body — the snapshot content */
    .saved-card-body {
      margin-bottom: 1rem;
    }
    .saved-block-preview {
      /* Snapshot HTML carries .rb-keyRule, .rb-tip, etc. as-is.
         Their existing CSS handles the styling. We just clip any
         floating bookmark buttons that snuck into the snapshot. */
    }
    .saved-block-preview .rb-callout-bookmark { display: none; }
    /* Any block inside the snapshot keeps its rb-* native styling.
       The snapshot wraps: .rb-callout-content > .rb-keyRule, etc.
       (Old pins without snapshots show a stub instead.) */
    .saved-card-body .rb-text:last-child,
    .saved-card-body .rb-text:last-child p:last-child {
      margin-bottom: 0;
    }
    .saved-card-stub {
      padding: 1rem 1.1rem;
      background: var(--bg-tint);
      border: 1px dashed var(--line);
      border-radius: 8px;
      color: var(--ink-mute);
      font-size: .9rem;
      font-style: italic;
    }
    .saved-card-stub p { margin: 0; }

    /* Quiz preview — distinct shape */
    .saved-quiz-preview {
      padding: 1rem 1.1rem;
      background: rgba(42,107,71,.04);
      border: 1px solid rgba(42,107,71,.18);
      border-radius: 10px;
    }
    .saved-quiz-q {
      font-family: var(--font-display);
      font-size: 1.05rem;
      line-height: 1.45;
      color: var(--ink);
      font-weight: 500;
      letter-spacing: -.005em;
      margin-bottom: .7rem;
    }
    .saved-quiz-exp {
      padding-top: .7rem;
      border-top: 1px solid rgba(42,107,71,.18);
      color: var(--ink);
      font-size: .94rem;
      line-height: 1.6;
    }
    .saved-quiz-exp strong { color: var(--ink); font-weight: 600; }
    .saved-quiz-exp em { font-style: italic; color: var(--ink-soft); }
    .saved-quiz-exp p { margin: 0 0 .6rem; }
    .saved-quiz-exp p:last-child { margin-bottom: 0; }
    .saved-quiz-fb-correct { display: block; margin-top: .4rem; font-size: .86rem; color: #2A6B47; }

    /* Footer actions */
    .saved-card-foot {
      display: flex; align-items: center;
      justify-content: space-between;
      gap: .8rem;
      padding-top: .85rem;
      border-top: 1px solid var(--line-soft);
    }
    .saved-card-open {
      display: inline-flex; align-items: center;
      gap: .25rem;
      padding: .42rem 0;
      color: var(--ink);
      text-decoration: none;
      font-size: .88rem;
      font-weight: 600;
      transition: color .15s, transform .15s;
    }
    .saved-card-open:hover {
      color: var(--accent-warm);
    }
    .saved-card-open span { transition: transform .15s; }
    .saved-card-open:hover span { transform: translateX(2px); }

    .saved-card-unpin {
      display: inline-flex; align-items: center;
      gap: .35rem;
      padding: .42rem .85rem;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 999px;
      cursor: pointer;
      color: var(--ink-mute);
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .03em;
      transition: color .15s, border-color .15s, background .15s;
      font-family: var(--font-body);
    }
    .saved-card-unpin:hover:not(:disabled) {
      color: #B6442C;
      border-color: rgba(182,68,44,.35);
      background: rgba(182,68,44,.05);
    }
    .saved-card-unpin:disabled {
      opacity: .5;
      cursor: not-allowed;
    }
    .saved-card-unpin svg {
      flex-shrink: 0;
    }

    /* Responsive */
    @media (max-width: 600px) {
      #stub-body.is-saved {
        padding: 1.2rem 1rem 3rem;
      }
      .saved-title { font-size: 1.7rem; }
      .saved-card { padding: 1rem; }
      .saved-card-meta {
        font-size: .78rem;
      }
      .saved-meta-source {
        flex-basis: 100%;
        white-space: normal;
      }
      .saved-meta-time {
        margin-left: auto;
      }
      .saved-card-foot {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: .55rem;
      }
      .saved-card-unpin,
      .saved-card-open {
        justify-content: center;
      }
    }

    /* ─── DAY READER (Pre-IELTS path stepper) ───────────────────────── */
    .day-stepper {
      max-width: 720px;
      margin: 0 auto;
      padding: 1.5rem 1.25rem 2rem;
      display: flex; flex-direction: column;
      min-height: 100%;
      gap: 1.25rem;
    }
    .day-head {
      display: flex; align-items: center; gap: 1.2rem;
      flex-wrap: wrap;
    }
    .day-head-title {
      display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0;
    }
    .day-head-eyebrow {
      font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
      color: var(--ink-mute); font-weight: 600;
    }
    .day-head-station {
      font-family: var(--font-display); font-size: 1.25rem;
      color: var(--ink); font-weight: 500;
    }
    .day-dots {
      display: inline-flex; gap: .4rem;
    }
    .day-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: var(--line); cursor: pointer;
      transition: all .15s;
    }
    .day-dot.is-done   { background: var(--accent-warm, #B6442C); opacity: .55; }
    .day-dot.is-active { background: var(--accent-warm, #B6442C); transform: scale(1.4); }
    .day-station {
      flex: 1;
      background: var(--card, #fff);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg, 14px);
      padding: 1.6rem 1.4rem;
    }
    .day-station h2 {
      font-family: var(--font-display); font-size: 1.5rem;
      margin: 0 0 .8rem; color: var(--ink); font-weight: 500;
    }
    .day-intro { color: var(--ink-soft); margin: 0 0 1rem; line-height: 1.5; }
    .day-foot {
      display: flex; justify-content: space-between; align-items: center;
      gap: 1rem;
    }
    .day-prev, .day-next {
      padding: .7rem 1.3rem;
      border-radius: 99px;
      border: 1px solid var(--line);
      background: var(--card, #fff);
      color: var(--ink-soft);
      font-weight: 600; font-size: .9rem;
      cursor: pointer;
      transition: all .15s;
    }
    .day-prev:hover { color: var(--ink); border-color: var(--ink-mute); }
    .day-next {
      background: var(--accent-warm, #B6442C);
      border-color: transparent;
      color: #fff;
    }
    .day-next:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -8px rgba(0,0,0,.25); }

    /* WATCH */
    .day-yt {
      position: relative; padding-bottom: 56.25%; height: 0;
      border-radius: 12px; overflow: hidden;
      background: #000; margin: 1rem 0;
    }
    .day-yt iframe {
      position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
    }
    .day-watch-q { margin-top: 1rem; }
    .day-q-h { font-weight: 600; color: var(--ink); margin: 0 0 .4rem; }
    .day-watch-prompts { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); line-height: 1.7; }

    /* VOCAB */
    .day-vocab-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
    .day-vocab-row {
      display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1rem;
      padding: .9rem 1rem;
      border: 1px solid var(--line); border-radius: 10px;
      background: var(--bg-tint, #f7f3e8);
    }
    .day-vocab-en { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
    .day-vocab-word { font-weight: 600; color: var(--ink); font-size: 1.02rem; }
    .day-vocab-pos {
      font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
      color: var(--ink-mute); padding: .15rem .4rem;
      border: 1px solid var(--line); border-radius: 99px;
    }
    .day-vocab-az { color: var(--ink-soft); text-align: right; }
    .day-vocab-ex { grid-column: 1 / -1; font-style: italic; color: var(--ink-mute); font-size: .9rem; }

    /* GRAMMAR */
    .day-gr-explain { color: var(--ink-soft); line-height: 1.6; margin-bottom: 1rem; }
    .day-gr-explain p { margin: 0 0 .55rem; }
    .day-gr-examples { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .4rem; }
    .day-gr-examples li {
      padding: .6rem .9rem;
      border-left: 3px solid var(--accent-warm, #B6442C);
      background: var(--bg-tint, #f7f3e8);
      border-radius: 4px;
    }
    .ex-en { display: block; color: var(--ink); }
    .ex-az { display: block; color: var(--ink-mute); font-size: .9rem; margin-top: .2rem; }
    .day-gr-drills h3 {
      font-family: var(--font-display); font-size: 1rem;
      margin: 1rem 0 .6rem; color: var(--ink);
    }
    .day-gr-drills ol { padding-left: 1.4rem; line-height: 2.1; color: var(--ink-soft); }
    .day-gr-input {
      border: 1px solid var(--line); border-radius: 6px;
      padding: .25rem .55rem; font: inherit;
      width: 9rem; margin: 0 .2rem;
      background: #fff;
    }
    .day-gr-input.is-ok  { border-color: #6FAA63; background: #f0f7ee; }
    .day-gr-input.is-bad { border-color: #C5604A; background: #fcf1ee; }
    .day-gr-fb { margin-left: .4rem; font-size: .85rem; color: var(--ink-mute); }
    .day-gr-check {
      margin-top: .8rem;
      padding: .55rem 1rem;
      border-radius: 99px;
      border: 1px solid var(--line);
      background: var(--card, #fff);
      cursor: pointer; font-weight: 600; color: var(--ink-soft);
    }
    .day-gr-check:hover { border-color: var(--ink); color: var(--ink); }

    /* WRITE */
    .day-write-prompt { color: var(--ink); font-size: 1rem; line-height: 1.55; margin: 0 0 .8rem; }
    .day-write-check {
      list-style: none; padding: 0; margin: 0 0 1rem;
      display: flex; flex-direction: column; gap: .35rem;
    }
    .day-write-check li {
      font-size: .88rem; color: var(--ink-soft);
      padding-left: 1.2rem; position: relative;
    }
    .day-write-check li::before {
      content: '✓'; position: absolute; left: 0; color: var(--accent-warm, #B6442C);
    }
    .day-write-area {
      width: 100%; min-height: 220px;
      border: 1px solid var(--line); border-radius: 10px;
      padding: 1rem; font: inherit; line-height: 1.6;
      background: var(--bg-tint, #f7f3e8);
      resize: vertical;
    }
    .day-write-area:focus { outline: 2px solid var(--accent-warm, #B6442C); outline-offset: -1px; }
    .day-write-meta {
      display: flex; justify-content: space-between;
      font-size: .85rem; color: var(--ink-mute); margin-top: .5rem;
    }

    .day-empty, .day-loading {
      max-width: 480px; margin: 4rem auto; text-align: center;
      padding: 2rem; color: var(--ink-soft);
    }
    .day-empty h3 { color: var(--ink); margin: 0 0 .5rem; font-family: var(--font-display); }
    .day-empty-back {
      display: inline-block; margin-top: 1rem;
      color: var(--accent-warm, #B6442C); text-decoration: none; font-weight: 600;
    }

    /* ─── PATH HOMEPAGE (Pre-IELTS) — illustrated, story-arc layout ─
       Static layout (chronology fixed):
         · Phase 1 large at top-center (the journey starts here)
         · Phases 2 + 3 smaller bottom-left and bottom-right
       Bg: topographic contour pattern (svg/topo-bg.svg), fixed, subtle.
       Top-right: tilted "Davam et" vellum tag → continue button.
       ───────────────────────────────────────────────────────────── */
    /* Full-bleed: ignore course-inner's 1180px cap. The calendar uses
       all viewport width; nav arrows float fixed at vertical mid-center
       on each edge. */
    .path-home {
      max-width: none; margin: 0;
      width: 100%;
      padding: 1rem 5.5rem 6rem;   /* 5.5rem L/R = clearance for the floating arrows */
      position: relative;
      min-height: 100dvh;
      box-sizing: border-box;
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .course-shell.is-active:has(.path-home) { overflow: hidden; }
    .path-home > * { position: relative; z-index: 1; }
    /* Background: fine warm dot grid (paper-stock feel) + soft radial
       vignette that brightens the center. Both fixed across the viewport
       so they don't scroll. Subtle on purpose. */
    .path-home::before {
      content: '';
      position: fixed; inset: 0; pointer-events: none; z-index: 0;
      background-image:
        radial-gradient(ellipse at center,
          rgba(255, 250, 235, .55) 0%,
          rgba(255, 250, 235, 0)   55%),
        radial-gradient(circle at 1px 1px,
          rgba(120, 80, 40, .085) 1px,
          transparent 1.5px);
      background-size: auto, 22px 22px;
      background-position: center, 0 0;
    }

    /* Course wordmark — pinned to viewport top-left, not the path-home box. */
    .path-home-mark {
      position: fixed;
      top: 1.3rem; left: 1.5rem;
      display: flex; flex-direction: column; gap: .35rem;
      z-index: 5;
      opacity: 0;
      transition: opacity .55s ease .15s;
      pointer-events: none;
    }
    .path-home.is-mounted ~ .path-home-mark,
    .path-home.is-mounted .path-home-mark { opacity: .55; }
    .path-home-mark:hover { opacity: .85; }
    .path-home-mark-name {
      font-family: var(--font-display);
      font-size: .9rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--ink-soft);
      font-weight: 500;
    }
    .path-home-mark-rule {
      display: block;
      width: 28px; height: 1px;
      background: var(--ink-mute);
    }

    /* ─── Continue button (top-right vellum tag) ─────────────────── */
    .path-continue {
      position: absolute;
      top: 1.4rem; right: 1.6rem;
      display: flex; flex-direction: column; gap: .15rem;
      width: 230px;
      padding: .9rem 1.1rem 1rem;
      background: var(--card, #fff);
      border: 1px solid var(--line);
      border-radius: 14px;
      text-decoration: none; color: var(--ink);
      box-shadow:
        0 1px 0 rgba(120,80,40,.06),
        0 18px 36px -22px rgba(120,80,40,.32);
      transform: rotate(1.2deg);
      transition: transform .25s ease, box-shadow .25s ease;
      z-index: 4;
      opacity: 0; animation: pathContinueIn .55s ease .2s forwards;
    }
    @keyframes pathContinueIn {
      from { opacity: 0; transform: rotate(4deg) translateY(-6px); }
      to   { opacity: 1; transform: rotate(1.2deg) translateY(0); }
    }
    .path-continue:hover {
      transform: rotate(0deg) translateY(-3px);
      box-shadow:
        0 1px 0 rgba(120,80,40,.06),
        0 26px 48px -22px rgba(120,80,40,.42);
    }
    .path-continue-eyebrow {
      font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
      font-weight: 700; color: var(--accent-warm, #B6442C);
      display: flex; justify-content: space-between; align-items: center;
    }
    .path-continue-arrow { transition: transform .2s; display: inline-block; }
    .path-continue:hover .path-continue-arrow { transform: translateX(4px); }
    .path-continue-day {
      font-family: var(--font-display);
      font-size: 1.65rem; font-weight: 500;
      color: var(--ink); line-height: 1.1; letter-spacing: -.01em;
      margin-top: .15rem;
    }
    .path-continue-title {
      font-size: .9rem; color: var(--ink-soft);
      line-height: 1.35;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .path-continue-rule {
      display: block; height: 2px; width: 36px;
      background: var(--accent-warm, #B6442C);
      border-radius: 99px; margin-top: .55rem;
    }
    .path-continue.is-done {
      transform: rotate(-1deg);
      cursor: default;
    }

    /* ─── Stage (phase ladder: 3 cards side-by-side, ascending) ───
       All three cards same width, in a horizontal row, but each one
       stepped up vertically — left lowest, right highest — so the row
       reads as a staircase climbing toward mastery. */
    .path-stage {
      flex: 1; min-height: 0;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1.4rem;
      position: relative;
      margin-top: 1.5rem;
      align-items: center;
      padding-top: 4rem;   /* room for tag + ladder rise on slot 3 */
    }
    .path-phase-slot-1 { grid-column: 1; --ladder-y: 0; }
    .path-phase-slot-2 { grid-column: 2; --ladder-y: -2.2rem; }
    .path-phase-slot-3 { grid-column: 3; --ladder-y: -4.4rem; }

    .path-phase-card {
      position: relative;
      display: grid;
      grid-template-rows: auto 1fr auto;
      padding: 1rem 1.2rem 1.2rem;
      background: color-mix(in srgb, var(--card, #fff) 92%, var(--bg-tint, #f5ecd8));
      border: 1px solid var(--line);
      border-radius: 22px;
      text-decoration: none; color: var(--ink);
      box-shadow:
        0 1px 0 rgba(120,80,40,.04),
        0 26px 50px -32px rgba(120,80,40,.32);
      transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .25s, opacity .3s;
      overflow: hidden;
      z-index: 1;
      opacity: 0;
      transform: translateY(calc(var(--ladder-y, 0px) + 14px));
    }
    .path-home.is-mounted .path-phase-card {
      opacity: 1;
      transform: translateY(var(--ladder-y, 0px));
    }
    .path-home.is-mounted .path-phase-card[data-phase-idx="0"] { transition-delay: .15s; }
    .path-home.is-mounted .path-phase-card[data-phase-idx="1"] { transition-delay: .3s; }
    .path-home.is-mounted .path-phase-card[data-phase-idx="2"] { transition-delay: .45s; }

    .path-phase-card:hover {
      transform: translateY(calc(var(--ladder-y, 0px) - 5px));
      box-shadow:
        0 1px 0 rgba(120,80,40,.04),
        0 36px 60px -28px color-mix(in srgb, var(--accent) 30%, rgba(120,80,40,.4));
      border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    }
    /* Active phase: warm radial under-glow + accent border. */
    .path-phase-card.is-current {
      border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent),
        0 30px 60px -22px color-mix(in srgb, var(--accent) 50%, rgba(120,80,40,.3));
    }
    .path-phase-card.is-current::before {
      content: ''; position: absolute; inset: -30%;
      background: radial-gradient(ellipse at 50% 50%,
        color-mix(in srgb, var(--accent) 14%, transparent) 0%,
        transparent 60%);
      pointer-events: none; z-index: 0;
    }
    .path-phase-card.is-upcoming { opacity: .82; }
    .path-home.is-mounted .path-phase-card.is-upcoming { opacity: .82; }
    .path-phase-card.is-upcoming:hover { opacity: 1; }
    .path-phase-card.is-done {
      background: color-mix(in srgb, var(--accent) 6%, var(--card, #fff));
    }

    /* Tilted "Buradasan" tag — pinned to top-left like a paper sticker. */
    .path-phase-tag {
      position: absolute;
      top: -8px; left: 14px;
      padding: .3rem .8rem;
      background: var(--accent);
      color: #fff;
      font-size: .68rem; font-weight: 800;
      letter-spacing: .14em; text-transform: uppercase;
      border-radius: 6px;
      transform: rotate(-3.5deg);
      box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--accent) 60%, transparent);
      z-index: 3;
    }
    .path-phase-tag.is-done {
      background: var(--card, #fff);
      color: var(--accent);
      border: 1px solid var(--accent);
    }

    /* Header — eyebrow + title in clean upper area (designed-in negative space). */
    .path-phase-head {
      position: relative; z-index: 2;
      padding: .4rem .2rem 0;
      display: flex; flex-direction: column; gap: .2rem;
    }
    .path-phase-eyebrow {
      font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
      color: var(--ink-mute); font-weight: 700;
    }
    .path-phase-title {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 3.2vw, 2.4rem);
      color: var(--ink); font-weight: 500;
      line-height: 1.05; letter-spacing: -.015em;
    }

    /* Illustration — full-bleed scene area in the middle. */
    .path-phase-illust {
      position: relative; z-index: 1;
      align-self: stretch;
      display: flex; align-items: center; justify-content: center;
      color: var(--accent);
      padding: .5rem;
      min-height: 0;
    }
    .path-phase-illust svg {
      max-width: 80%; max-height: 100%;
      stroke-dasharray: 800; stroke-dashoffset: 0;
      transition: stroke-dashoffset .3s;
    }
    .path-phase-card:hover .path-phase-illust svg {
      animation: phaseSketchDraw 1.1s ease-out;
    }
    @keyframes phaseSketchDraw {
      0%   { stroke-dashoffset: 800; }
      100% { stroke-dashoffset: 0; }
    }
    .path-phase-card.is-upcoming .path-phase-illust { opacity: .65; }

    /* Footer — gün count, just above the edge bar. */
    .path-phase-foot {
      position: relative; z-index: 2;
      padding: 0 .2rem .15rem;
      font-size: .82rem;
      color: var(--ink-soft);
    }
    .path-phase-meta { font-weight: 600; }

    /* Edge bar at the very bottom of the card, filled left→right. */
    .path-phase-edgebar {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 4px;
      background: color-mix(in srgb, var(--accent) 14%, transparent);
      border-radius: 0 0 22px 22px;
      overflow: hidden;
      z-index: 2;
    }
    .path-phase-edgebar-fill {
      display: block; height: 100%;
      background: var(--accent);
      border-radius: 0 0 0 22px;
      width: 0;
      transition: width 1.4s cubic-bezier(.2,.8,.2,1) .5s;
    }
    .path-home.is-mounted .path-phase-edgebar-fill { width: var(--pct, 0%); }

    /* God-only pen button. */
    .path-phase-edit {
      position: absolute;
      top: .8rem; right: .8rem;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--card, #fff);
      border: 1px solid var(--line);
      color: var(--ink-mute);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
      opacity: 0;
      transition: all .15s;
      z-index: 4;
    }
    .path-phase-card:hover .path-phase-edit { opacity: 1; }
    .path-phase-edit:hover {
      color: var(--accent); border-color: var(--accent);
      transform: scale(1.08);
    }

    /* ─── CALENDAR (4 weeks × 7 days, one phase at a time) ─────────
       Premium serious style. Cream base, deep ink. Done = muted forest
       green. Today = warm terracotta with soft outer glow that breathes.
       Future = quiet bone cells. Rest cells (Sat+Sun) = barely-there,
       small "İstirahət" label.
       ───────────────────────────────────────────────────────────── */
    .cal {
      flex: 1; min-height: 0;
      width: 100%;
      margin: 1rem auto 0;
      display: flex; flex-direction: column;
      gap: 1.1rem;
    }
    .cal-head {
      display: flex; align-items: center; justify-content: center;
      gap: 1.2rem;
      padding: 0 .25rem;
      flex-shrink: 0;
    }
    .cal-title {
      text-align: center;
      display: flex; flex-direction: column; gap: .15rem;
    }
    .cal-eyebrow {
      font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
      color: var(--ink-mute); font-weight: 700;
    }
    .cal-name {
      font-family: var(--font-display);
      font-size: clamp(1.8rem, 3.4vw, 2.5rem);
      font-weight: 500; color: var(--ink);
      margin: 0; line-height: 1.05; letter-spacing: -.015em;
    }
    /* Floating nav arrows — fixed at vertical mid-center, pinned to the
       left and right edges of the viewport. */
    .cal-nav {
      position: fixed;
      top: 50%; transform: translateY(-50%);
      width: 52px; height: 52px;
      border-radius: 50%;
      border: 1px solid var(--line);
      background: var(--card, #fff);
      color: var(--ink-soft);
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
      box-shadow: 0 12px 24px -10px rgba(120,80,40,.22);
      z-index: 5;
    }
    .cal-nav-prev { left: 1.2rem; }
    .cal-nav-next { right: 1.2rem; }
    .cal-nav:hover:not([disabled]) {
      color: #fff;
      background: var(--accent-warm, #B6442C);
      border-color: var(--accent-warm, #B6442C);
      transform: translateY(calc(-50% - 2px));
      box-shadow: 0 18px 30px -10px color-mix(in srgb, var(--accent-warm, #B6442C) 50%, rgba(0,0,0,.2));
    }
    .cal-nav[disabled] { opacity: .25; cursor: not-allowed; }

    .cal-grid {
      flex: 1; min-height: 0;
      display: flex; flex-direction: column; gap: .55rem;
      width: 100%;
    }
    .cal-row {
      display: grid;
      /* Fixed-width label so column 1 aligns identically across all
         four rows; the 7 day columns share remaining width equally. */
      grid-template-columns: 180px repeat(7, 1fr);
      gap: .55rem;
      flex: 1; min-height: 0;
      opacity: 0; transform: translateY(8px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .path-home.is-mounted .cal-row { opacity: 1; transform: none; }
    .path-home.is-mounted .cal-row:nth-child(1) { transition-delay: .1s; }
    .path-home.is-mounted .cal-row:nth-child(2) { transition-delay: .2s; }
    .path-home.is-mounted .cal-row:nth-child(3) { transition-delay: .3s; }
    .path-home.is-mounted .cal-row:nth-child(4) { transition-delay: .4s; }

    .cal-row-label {
      display: flex; flex-direction: column; justify-content: center;
      padding: .6rem .9rem;
      border-right: 1px solid var(--line);
    }
    .cal-row-num {
      font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
      color: var(--ink-mute); font-weight: 700;
      margin-bottom: .15rem;
    }
    .cal-row-name {
      font-family: var(--font-display);
      font-size: 1rem; color: var(--ink); font-weight: 500;
      line-height: 1.2;
    }

    .cal-day {
      position: relative;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: .7rem .4rem .55rem;
      background: var(--card, #fff);
      border: 1px solid var(--line);
      border-radius: 10px;
      text-decoration: none; color: var(--ink);
      transition: transform .2s, box-shadow .2s, border-color .2s, background .2s;
      min-width: 0; min-height: 0;
      overflow: hidden;
    }
    .cal-day-num {
      position: absolute;
      top: .35rem; left: .5rem;
      font-size: .68rem; font-weight: 700;
      letter-spacing: .04em;
      color: var(--ink-mute);
      font-variant-numeric: tabular-nums;
    }
    .cal-day-mark {
      position: absolute;
      top: .3rem; right: .45rem;
      display: inline-flex; align-items: center; justify-content: center;
      width: 16px; height: 16px;
      transition: transform .2s;
    }
    .cal-day-arrow {
      font-size: .95rem; font-weight: 700;
    }
    .cal-day-title {
      font-size: .82rem; line-height: 1.22;
      color: var(--ink); font-weight: 500;
      text-align: center;
      padding: 0 .25rem;
      display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* FUTURE — quiet bone cells. */
    .cal-day.is-future:hover {
      transform: translateY(-2px);
      border-color: var(--ink-mute);
      box-shadow: 0 10px 18px -10px rgba(120,80,40,.22);
    }

    /* DONE — muted forest green, white text, check mark. */
    .cal-day.is-done {
      background: #6F8A6F;
      border-color: #5d7a5e;
      color: #fff;
    }
    .cal-day.is-done .cal-day-num { color: rgba(255,255,255,.72); }
    .cal-day.is-done .cal-day-title { color: #fff; opacity: .94; }
    .cal-day.is-done .cal-day-mark { color: #fff; }
    .cal-day.is-done:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 22px -10px rgba(80,110,80,.5);
    }

    /* TODAY — warm terracotta, soft breathing glow, arrow nudges on hover. */
    .cal-day.is-today {
      background: var(--accent-warm, #B6442C);
      border-color: var(--accent-warm, #B6442C);
      color: #fff;
      animation: calTodayBreathe 4.5s ease-in-out infinite;
    }
    @keyframes calTodayBreathe {
      0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-warm, #B6442C) 22%, transparent), 0 18px 32px -14px color-mix(in srgb, var(--accent-warm, #B6442C) 60%, transparent); }
      50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-warm, #B6442C) 28%, transparent), 0 22px 36px -14px color-mix(in srgb, var(--accent-warm, #B6442C) 75%, transparent); }
    }
    .cal-day.is-today .cal-day-num { color: rgba(255,255,255,.85); }
    .cal-day.is-today .cal-day-title { color: #fff; }
    .cal-day.is-today .cal-day-mark { color: #fff; }
    .cal-day.is-today:hover { transform: translateY(-3px); }
    .cal-day.is-today:hover .cal-day-mark { transform: translateX(3px); }

    /* REST — barely-there cells (Sat+Sun). No interaction. */
    .cal-day.is-rest, .cal-day.is-empty {
      background: transparent;
      border: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
      cursor: default;
      pointer-events: none;
    }
    .cal-day-rest {
      font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
      color: var(--ink-mute); opacity: .45; font-weight: 600;
    }

    /* Mobile: stack the row label above each row, arrows shrink. */
    @media (max-width: 760px) {
      .cal-row {
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: auto 1fr;
        gap: .35rem;
      }
      .cal-row-label {
        grid-column: 1 / -1;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: .3rem 0;
      }
      .cal-day-title { font-size: .72rem; -webkit-line-clamp: 2; }
      .cal-nav { width: 40px; height: 40px; }
    }

    /* Sketch editor modal. */
    .sketch-editor-ov {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(20,15,10,.45);
      display: flex; align-items: center; justify-content: center;
      padding: 1.5rem;
      backdrop-filter: blur(4px);
    }
    .sketch-editor-card {
      background: var(--card, #fff);
      border: 1px solid var(--line);
      border-radius: 18px;
      width: 100%; max-width: 720px;
      box-shadow: 0 40px 80px -20px rgba(0,0,0,.35);
      overflow: hidden;
      display: flex; flex-direction: column;
    }
    .sketch-editor-h {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1rem 1.3rem; border-bottom: 1px solid var(--line);
    }
    .sketch-editor-h h3 {
      font-family: var(--font-display);
      font-size: 1.15rem; margin: 0; color: var(--ink); font-weight: 500;
    }
    .sketch-editor-x {
      width: 30px; height: 30px; border-radius: 50%;
      border: 1px solid var(--line); background: var(--card);
      cursor: pointer; color: var(--ink-mute); font-size: 1.1rem;
    }
    .sketch-editor-help {
      margin: 0; padding: .8rem 1.3rem;
      font-size: .85rem; color: var(--ink-soft);
      background: var(--bg-tint, #f7f3e8);
      border-bottom: 1px solid var(--line);
    }
    .sketch-editor-help code {
      background: var(--card); padding: .1rem .3rem;
      border-radius: 4px; font-size: .9em;
    }
    .sketch-editor-grid {
      display: grid; grid-template-columns: 1fr 200px;
      gap: 1rem; padding: 1rem 1.3rem;
    }
    .sketch-editor-ta {
      width: 100%; min-height: 240px;
      font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
      font-size: .82rem; line-height: 1.5;
      padding: .8rem;
      border: 1px solid var(--line); border-radius: 10px;
      background: var(--bg-tint, #f7f3e8);
      resize: vertical;
    }
    .sketch-editor-ta:focus { outline: 2px solid var(--accent-warm, #B6442C); outline-offset: -1px; }
    .sketch-editor-preview {
      display: flex; flex-direction: column; gap: .5rem;
      align-items: center;
    }
    .sketch-editor-preview-label {
      font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
      color: var(--ink-mute); font-weight: 700;
    }
    .sketch-editor-preview-box {
      width: 100%; aspect-ratio: 1;
      border: 1px dashed var(--line); border-radius: 12px;
      padding: 1rem;
      color: var(--accent, var(--accent-warm, #B6442C));
      display: flex; align-items: center; justify-content: center;
    }
    .sketch-editor-preview-box svg {
      max-width: 100%; max-height: 100%;
      stroke: currentColor; fill: none;
    }
    .sketch-editor-f {
      display: flex; justify-content: space-between; align-items: center;
      gap: .5rem; padding: .9rem 1.3rem;
      border-top: 1px solid var(--line);
    }
    .sketch-editor-actions { display: flex; gap: .5rem; }
    .sketch-editor-clear, .sketch-editor-cancel, .sketch-editor-save {
      padding: .55rem 1.1rem;
      border-radius: 99px;
      border: 1px solid var(--line);
      background: var(--card);
      color: var(--ink-soft); font-weight: 600; font-size: .9rem;
      cursor: pointer;
    }
    .sketch-editor-clear:hover, .sketch-editor-cancel:hover {
      color: var(--ink); border-color: var(--ink-mute);
    }
    .sketch-editor-save {
      background: var(--accent-warm, #B6442C); color: #fff;
      border-color: transparent;
    }
    .sketch-editor-save:hover { transform: translateY(-1px); }
    .sketch-editor-save:disabled { opacity: .6; cursor: wait; transform: none; }

    @media (max-width: 600px) {
      .sketch-editor-grid { grid-template-columns: 1fr; }
      .sketch-editor-preview-box { aspect-ratio: 2; }
    }

    @media (max-width: 760px) {
      .path-home { overflow: visible; min-height: auto; padding-bottom: 7rem; }
      .course-shell.is-active:has(.path-home) { overflow: auto; }
      .path-stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 1rem;
        padding-top: 2rem;
      }
      .path-phase-slot-1 { grid-column: 1; grid-row: 1; --ladder-y: 0; }
      .path-phase-slot-2 { grid-column: 1; grid-row: 2; --ladder-y: 0; }
      .path-phase-slot-3 { grid-column: 1; grid-row: 3; --ladder-y: 0; }
      .path-continue {
        position: relative; top: 0; right: 0;
        width: auto; max-width: 320px; margin: 0 auto 1rem;
        transform: rotate(0deg);
      }
      .path-home-head { padding-top: .2rem; }
    }
    @media (min-height: 0) and (max-height: 760px) and (min-width: 761px) {
      .path-home-title { font-size: 2rem; }
      .path-home-head { padding: .2rem 0 .6rem; }
      .path-stage { gap: 1rem 1.2rem; margin-top: .4rem; }
      .path-phase-card { padding: .8rem 1rem 1rem; }
      .path-continue { width: 210px; padding: .75rem .9rem .85rem; }
      .path-continue-day { font-size: 1.4rem; }
    }