/* Course detail (the book view).
 *
 * Ported from redesign/v1 static/redesign/css/course.css + the reading-
 * surface pieces of lesson.css (chapter-head, prose, primary-text).
 * Drops editor's-pick and related-courses (no view logic on main yet).
 *
 * Every course detail page is rendered inline: frontmatter (title +
 * description + progress) then each lesson as a chapter block.
 */

/* ---------- Spine band (thin color strip at top of page) ---------- */
.spine-band {
    position: fixed; top: 0; left: 0; right: 0;
    height: 4px; background: var(--spine); z-index: 50;
}

/* ---------- Course-hero strip — auto-masthead from lesson images ----- */
/* Shown on the course detail page only if the lessons have generated
   images. Empty tiles (missing images) are skipped — the strip just
   gets narrower. Bleeds edge-to-edge via negative margin matching
   .container-wide's 48 px gutter. Subtle gradient overlay at the
   bottom blends into the page background. */
/* Playful stacked-cards hero — up to 5 lesson images fanned like a
 * slightly-messy hand of cards. Each card is positioned by :nth-child,
 * tilted a few degrees, and lifted/rotated further on stack-hover so
 * the fan opens. Per-card hover pops the chosen card forward. All CSS,
 * no JS. Decorative (aria-hidden on the container). */
.course-hero-strip {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 36px 0 46px;
    /* Break out of the parent container so the fan reaches edge-to-edge
     * regardless of the page's content width. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 12px;
    margin-bottom: 28px;
    perspective: 1200px;
    /* Single source of truth for tile width; margin/overlap scales from
     * this so the geometry stays correct at every viewport size. */
    --tile-w: clamp(180px, 22vw, 360px);
}
.course-hero-strip::after {
    content: "";
    position: absolute;
    left: 18%; right: 18%;
    bottom: 24px;
    height: 28px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.35), transparent 70%);
    filter: blur(14px);
    z-index: 0;
    pointer-events: none;
}
.course-hero-strip__tile {
    flex: 0 0 auto;
    width: var(--tile-w);
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.32),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    /* Overlap is ~21% of each tile's width — scales with the clamp
     * above so small and large viewports both look right. */
    margin: 0 calc(var(--tile-w) * -0.21);
    transform-origin: 50% 80%;
    transition:
        transform .55s cubic-bezier(.2, .75, .2, 1),
        box-shadow .35s ease,
        z-index 0s;
    position: relative;
    z-index: 1;
    will-change: transform;
}
/* Resting positions — centre card straightest, edges tilt outward.
 * Stacking order puts the centre on top, then neighbours, edges behind. */
.course-hero-strip__tile:nth-child(1) { z-index: 1; transform: rotate(-8deg) translateY(14px); }
.course-hero-strip__tile:nth-child(2) { z-index: 2; transform: rotate(-3.5deg) translateY(4px); }
.course-hero-strip__tile:nth-child(3) { z-index: 5; transform: rotate(0.5deg)  translateY(-2px); }
.course-hero-strip__tile:nth-child(4) { z-index: 3; transform: rotate(4deg)  translateY(4px); }
.course-hero-strip__tile:nth-child(5) { z-index: 1; transform: rotate(9deg)  translateY(14px); }

/* Hover effects are gated to pointer: fine devices ONLY. On a phone
 * (pointer: coarse) iOS fires :hover on tap and holds it until the
 * user taps elsewhere — which leaves the fan half-open or a tile
 * stuck popped-forward. Gating fixes that at the root. */
@media (hover: hover) and (pointer: fine) {
    /* Stack-level hover — the whole fan opens slightly. */
    .course-hero-strip:hover .course-hero-strip__tile:nth-child(1) { transform: rotate(-11deg) translate(-28px, 2px); }
    .course-hero-strip:hover .course-hero-strip__tile:nth-child(2) { transform: rotate(-5.5deg) translate(-14px, -4px); }
    .course-hero-strip:hover .course-hero-strip__tile:nth-child(3) { transform: rotate(0deg)   translate(0, -14px); }
    .course-hero-strip:hover .course-hero-strip__tile:nth-child(4) { transform: rotate(6deg)   translate(14px, -4px); }
    .course-hero-strip:hover .course-hero-strip__tile:nth-child(5) { transform: rotate(12deg)  translate(28px, 2px); }

    /* Per-card hover — that card pops forward and straightens.
     * !important required because the parent-hover rule above
     * also sets transform. */
    .course-hero-strip__tile:hover {
        transform-origin: 50% 50%;
        transform: rotate(0deg) translateY(-26px) scale(1.05) !important;
        box-shadow:
            0 26px 50px rgba(0, 0, 0, 0.45),
            0 0 0 1px rgba(255, 255, 255, 0.06);
        z-index: 10;
    }
}

/* Match exercise — one row per left-side item with a <select> on the
 * right. Post-submit rows colour as .correct / .incorrect (same
 * semantics as the mc/tf feedback on individual buttons). */
.ex-match { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ex-match__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md, 10px);
    transition: border-color .15s, background .15s;
}
.ex-match__left  { font-family: var(--font-serif); font-size: 16px; }
.ex-match__select {
    padding: 8px 10px;
    background: transparent;
    border: 1px solid var(--rule-2, var(--rule));
    border-radius: var(--radius-sm, 6px);
    color: var(--text);
    font: inherit;
    font-size: 14px;
}
.ex-match__select:focus { outline: 0; border-color: var(--amber); }
.ex-match__row.correct    { border-color: #43a047; background: rgba(67, 160, 71, 0.10); }
.ex-match__row.incorrect  { border-color: #ef5350; background: rgba(239, 83, 80, 0.10); }

/* Order exercise — per-item <select> 1..N + label. Same correctness
 * colours as match. */
.ex-order { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ex-order__row {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 14px;
    align-items: center;
    padding: 8px 14px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md, 10px);
    transition: border-color .15s, background .15s;
}
.ex-order__select {
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--rule-2, var(--rule));
    border-radius: var(--radius-sm, 6px);
    color: var(--text);
    font: inherit; font-size: 14px;
}
.ex-order__select:focus { outline: 0; border-color: var(--amber); }
.ex-order__label { font-family: var(--font-serif); font-size: 16px; }
.ex-order__row.correct    { border-color: #43a047; background: rgba(67, 160, 71, 0.10); }
.ex-order__row.incorrect  { border-color: #ef5350; background: rgba(239, 83, 80, 0.10); }

/* Cloze — inputs flow inline with the surrounding sentence text. */
.ex-cloze {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.7;
    margin: 8px 0;
}
.ex-cloze__input {
    display: inline-block;
    min-width: 8ch;
    margin: 0 3px;
    padding: 2px 8px;
    background: var(--bg-2);
    border: 0;
    border-bottom: 2px solid var(--rule-2, var(--rule));
    color: var(--text);
    font: inherit; font-size: inherit;
    text-align: center;
}
.ex-cloze__input:focus { outline: 0; border-bottom-color: var(--amber); }
.ex-cloze__input.correct   { border-bottom-color: #43a047; background: rgba(67, 160, 71, 0.10); }
.ex-cloze__input.incorrect { border-bottom-color: #ef5350; background: rgba(239, 83, 80, 0.10); }

/* Mobile: keep the fanned card arrangement but shrink the tiles and
 * stop at the resting position — no hover animation. The hover rules
 * above are already gated to pointer:fine so they're silent here
 * (iPhone's sticky :hover-on-tap doesn't trigger). Milder tilts since
 * there's less horizontal room. */
/* Mobile: scale the fan up to (almost) full mobile width. With 5
 * tiles at 21% overlap on each side, total fan width ≈ tile-w × 3.32.
 * Targeting ~95% viewport → tile-w ≈ 28.6vw. Clamp so small phones
 * don't get absurdly tiny tiles and big ones don't blow up. */
@media (max-width: 780px) {
    .course-hero-strip {
        --tile-w: clamp(108px, 28.6vw, 180px);
        padding: 18px 0 24px;
    }
    .course-hero-strip__tile {
        border-radius: 8px;
        transition: none;
        will-change: auto;
    }
    .course-hero-strip__tile:nth-child(1) { transform: rotate(-6deg)   translateY(10px); }
    .course-hero-strip__tile:nth-child(2) { transform: rotate(-2.5deg) translateY(2px); }
    .course-hero-strip__tile:nth-child(3) { transform: rotate(0.5deg)  translateY(-2px); }
    .course-hero-strip__tile:nth-child(4) { transform: rotate(3deg)    translateY(2px); }
    .course-hero-strip__tile:nth-child(5) { transform: rotate(7deg)    translateY(10px); }

    /* Defence-in-depth: even though the hover rules above are gated
     * to (hover: hover) and (pointer: fine) — which already excludes
     * touch devices — explicitly pin every tile to its resting
     * transform under touch. A user with a Pencil, a trackpad-over-
     * iPad, or any exotic pointer won't reach into the animated
     * state on this width. */
    .course-hero-strip:hover .course-hero-strip__tile,
    .course-hero-strip:hover .course-hero-strip__tile:nth-child(n),
    .course-hero-strip__tile:hover,
    .course-hero-strip__tile:focus,
    .course-hero-strip__tile:active {
        transition: none !important;
    }
}

/* Honour reduced-motion — no animated fanning, just the resting stack. */
@media (prefers-reduced-motion: reduce) {
    .course-hero-strip__tile,
    .course-hero-strip:hover .course-hero-strip__tile,
    .course-hero-strip__tile:hover { transition: none; }
}

/* ---------- Frontmatter (course header) ----------
 * .crumbs, h1.title, p.subtitle live in shell.css.
 * Course-specific additions layer on top.
 */
.frontmatter { padding: 32px 0 48px; }
.frontmatter h1.title { max-width: 18ch; }
.frontmatter .eyebrow { margin: 0 0 18px; }

p.desc {
    font-size: 17px; line-height: 1.65;
    color: var(--text); margin: 0 0 28px;
    max-width: 58ch;
}
.meta {
    display: flex; gap: 22px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--muted); letter-spacing: .05em;
    margin: 0 0 28px;
}
.meta span::before {
    content: ""; display: inline-block;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--spine); opacity: .75;
    margin-right: 8px; vertical-align: middle;
}

.cta-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 32px; }

/* ---------- Chapter navigation (prev / next, below a paginated chapter) ---------- */
.chapter-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 48px 0 80px;
    border-top: 1px solid var(--rule);
    padding-top: 24px;
}
.chapter-nav__link {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px 18px;
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.chapter-nav__link:hover { border-color: var(--gold); }
.chapter-nav__link--next { text-align: right; }
.chapter-nav__dir {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.chapter-nav__title {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.35;
}
@media (max-width: 640px) {
    .chapter-nav { grid-template-columns: 1fr; }
    .chapter-nav__link--next { text-align: left; }
}

/* Finale CTA — shown below the chapter nav on the last lesson of a
 * starter course, once the student has finished reading. Hidden by
 * default; revealed by the exercise-submit handler or the page-load
 * sync. Styled as a warm parchment card so it reads as "bonus page"
 * at the back of a book, not "modal interruption". */
.finale-cta {
    display: none;
    margin: 32px 0 48px;
    padding: 40px 36px;
    background:
        linear-gradient(135deg,
            rgba(246, 237, 224, 1),
            rgba(246, 237, 224, 0.85));
    color: #2a2520;
    border-radius: 6px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.15),
        0 16px 32px rgba(0, 0, 0, 0.18);
    position: relative;
    overflow: hidden;
}
.finale-cta.is-visible {
    display: block;
    animation: finale-rise .6s cubic-bezier(.2, .75, .2, 1);
}
.finale-cta::before {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(135deg,
            rgba(0, 0, 0, 0.025) 0 1px, transparent 1px 3px);
    pointer-events: none;
}
.finale-cta__inner { position: relative; z-index: 1; text-align: center; }
.finale-cta__eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.55);
    margin: 0 0 12px;
}
.finale-cta__title {
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: rgba(0, 0, 0, 0.92);
    margin: 0 0 12px;
    font-weight: 500;
}
.finale-cta__body {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.75);
    max-width: 46ch;
    margin: 0 auto 22px;
}
.finale-cta__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
@keyframes finale-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 560px) {
    .finale-cta { padding: 28px 20px; }
    .finale-cta__title { font-size: 22px; }
    .finale-cta__body { font-size: 15px; }
}

/* Celebratory last-lesson nav: the book is finished. Warmer colour
 * + amber corner hint so the reader feels landed, not ejected. */
.chapter-nav__link--finale {
    background: linear-gradient(135deg,
        rgba(212, 162, 83, 0.06),
        rgba(212, 162, 83, 0.14));
    border-color: var(--amber);
}
.chapter-nav__link--finale .chapter-nav__dir {
    color: var(--amber);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
}

/* Forward-nav is gated until the chapter quiz is attempted. We
 * deliberately still show the link (not display:none) so the user
 * knows where they're going — the click handler scrolls them to the
 * quiz instead of navigating. */
.chapter-nav__link.is-quiz-gated {
    /* opacity 0.55 was visually clear (greyed out) but tanked contrast on
     * EVERY child text element — the alpha-blended foreground dropped to
     * ~2.15:1 (WCAG critical). Communicate "locked" via dashed border
     * + the .chapter-nav__gate-hint text underneath instead. */
    cursor: help;
    border-style: dashed;
    background: var(--bg-2);
}
.chapter-nav__link.is-quiz-gated:hover { border-color: var(--rule); }
.chapter-nav__gate-hint {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}

/* Nudge animation on a gated-click: wiggles the exercises block so
 * it's clear where the user needs to go. */
@keyframes quiz-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.chapter-exercises.shake-hint { animation: quiz-shake 0.5s ease-in-out; }

.cta-row .quiet {
    color: var(--muted); border-bottom: none; font-size: 13px;
}
.cta-row .quiet:hover { color: var(--amber); }

/* ---------- Progress card ---------- */
.progress-wrap {
    background: var(--bg-2); border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: 22px 26px; margin: 0 0 32px;
    max-width: 560px;
}
.progress-eyebrow {
    font-family: var(--font-sans); font-size: 11px;
    text-transform: uppercase; letter-spacing: .16em;
    font-weight: 600; color: var(--amber);
    margin: 0 0 6px;
}
.progress-text {
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 48, "SOFT" 40;
    font-size: 19px; line-height: 1.2;
    letter-spacing: -0.005em; color: var(--text);
    margin: 0 0 12px;
}
.progress-text em { font-style: italic; font-weight: 400; color: var(--muted); }
.progress-bar {
    height: 4px; background: var(--bg-3);
    border-radius: 999px; overflow: hidden;
    margin-top: 4px;
}
.progress-fill { height: 100%; background: var(--amber); border-radius: 999px; }

/* ---------- Table of contents (top-of-page jump list) ---------- */
.toc-section { padding: 8px 0 48px; border-top: 1px solid var(--rule); margin-top: 8px; }
.toc-section h2 { margin: 32px 0 16px; }
.toc { display: flex; flex-direction: column; gap: 0; }
.toc-row {
    display: grid; grid-template-columns: 60px 1fr auto;
    gap: 20px; align-items: baseline;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rule);
    border-left: 2px solid transparent;
    margin-left: -20px;
    text-decoration: none; color: var(--text);
    transition: background .15s, border-color .15s;
}
.toc-row:hover {
    background: var(--bg-2);
    border-left-color: var(--spine);
}
.toc-row.done .toc-num,
.toc-row.done .toc-title { color: var(--muted); }
.toc-row.done .toc-num .mark { color: var(--brand-success, #6B8E5A); }
.toc-num {
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 24, "SOFT" 40;
    font-style: italic; font-size: 18px;
    color: var(--amber); letter-spacing: -0.01em;
}
.toc-num .mark { margin-right: 8px; opacity: .9; }
.toc-body .toc-title {
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 48, "SOFT" 40;
    font-weight: 500; font-size: 19px;
    letter-spacing: -0.01em; line-height: 1.2;
    display: block;
}
.toc-body .toc-desc {
    font-size: 14px; line-height: 1.5;
    color: var(--muted); margin-top: 4px; max-width: 62ch;
}
.toc-meta {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--muted); letter-spacing: .04em; white-space: nowrap;
}

/* ---------- Chapter blocks (inline lesson content) ---------- */
.chapter {
    padding: 64px 0;
    border-top: 1px solid var(--rule);
    scroll-margin-top: 24px;
}
.chapter-head .num {
    font-family: var(--font-serif); font-style: italic;
    font-variation-settings: "opsz" 14, "SOFT" 70;
    font-size: 14px; color: var(--amber);
    letter-spacing: .08em; display: block; margin-bottom: 6px;
}
.chapter-head h2 {
    font-family: var(--font-serif); font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.08; letter-spacing: -0.02em;
    margin: 0 0 20px;
}
.chapter-head .sub {
    font-family: var(--font-serif); font-style: italic;
    font-variation-settings: "opsz" 24, "SOFT" 60;
    font-size: 18px; color: var(--muted);
    margin: 0 0 24px; max-width: 52ch;
}
.chapter-done-badge {
    display: inline-block;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-success, #6B8E5A);
    margin-left: 8px;
}

/* ---------- Prose (lesson body HTML) ----------
 * Base .prose styles live in shell.css.
 * Course-specific: narrow the reading column.
 */
.chapter .prose { max-width: 62ch; }

/* Primary-text passages (Latin, Greek, source quotes) */
.primary-text {
    margin: 32px 0; padding: 22px 26px;
    background: color-mix(in srgb, var(--spine) 8%, var(--bg-2));
    border-left: 3px solid var(--spine);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* ---------- Chapter assets (image, video, attachments) ---------- */
.chapter-image {
    margin: 28px 0;
    border-radius: var(--radius-md);
    max-width: 100%;
    overflow: hidden;
}
.chapter-image img { display: block; width: 100%; height: auto; }

.chapter-video {
    margin: 32px 0;
    max-width: 62ch;
}
.chapter-video iframe {
    width: 100%; aspect-ratio: 16 / 9;
    border: 0; border-radius: var(--radius-md);
}

.chapter-files {
    margin: 28px 0;
    max-width: 62ch;
}
.chapter-files h4 {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
    margin: 0 0 10px; font-weight: 600;
}
.chapter-files a {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 14px;
    background: var(--bg-2); border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    text-decoration: none; color: var(--text);
    border-bottom: 1px solid var(--rule);
    transition: border-color .15s;
}
.chapter-files a:hover { border-color: var(--amber); color: var(--amber); }
.chapter-files .size {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--muted); letter-spacing: .04em;
}

/* ---------- Mark-complete + lesson-level quiz (transitional) ---------- */
.chapter-actions {
    margin-top: 32px;
    display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}
.chapter-quiz {
    margin: 28px 0;
    padding: 20px 24px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    max-width: 62ch;
}
.chapter-quiz h4 {
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 48, "SOFT" 40;
    font-weight: 500; font-size: 18px; margin: 0 0 8px;
}

/* ---------- Final exam card ---------- */
.final-exam {
    margin: 80px 0 48px;
    padding: 40px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    text-align: center;
}
.final-exam .eyebrow {
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--amber); margin: 0 0 12px;
}
.final-exam h2 {
    font-family: var(--font-serif); font-weight: 500;
    font-variation-settings: "opsz" 72, "SOFT" 40;
    font-size: 28px; margin: 0 0 16px;
}
.final-exam .stats {
    display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;
    margin: 16px 0 24px;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--muted); letter-spacing: .05em;
}
.final-exam .stats b { color: var(--text); font-weight: 600; }

/* ---------- Reviews ---------- */
.reviews-section { padding: 64px 0 80px; border-top: 1px solid var(--rule); }
.reviews-section h2 { margin: 0 0 24px; }
.review-form {
    padding: 24px 28px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-radius: var(--radius-md);
    margin-bottom: 32px;
}
.review-form label {
    display: block;
    font-family: var(--font-mono); font-size: 12px;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 8px;
}
.review-form textarea,
.review-form input[type="text"] {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
    color: var(--text); font: inherit;
}
.review-form textarea:focus,
.review-form input:focus { outline: 0; border-color: var(--amber); }
.star-rating-selector { display: inline-flex; gap: 4px; margin-bottom: 8px; cursor: pointer; }
.star-btn { color: var(--rule-2); transition: color .15s; font-size: 20px; }
.star-btn.active,
.star-btn:hover,
.star-btn:hover ~ .star-btn { color: var(--amber); }

.review-card {
    padding: 16px 20px;
    border-bottom: 1px solid var(--rule);
}
.review-card:last-child { border-bottom: 0; }
.review-head {
    display: flex; justify-content: space-between;
    font-size: 14px; margin-bottom: 6px;
}
.review-card p { margin: 0; color: var(--text); }

/* ---------- Inline exercises ---------- */
.chapter-exercises {
    position: relative;
    margin-top: 48px;
    padding: 28px 32px;
    background: var(--bg-2);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--amber);
    border-radius: var(--radius-lg);
}
.ex-eyebrow {
    font-family: var(--font-sans); font-weight: 600;
    font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase;
    /* var(--amber) is the accent #B8863D — only 2.79:1 on paper-2, fails
     * WCAG AA. var(--amber-2) (gold-deep #8B6323) is 4.65:1 and keeps the
     * editorial-gold feel while the label is actually legible. */
    color: var(--amber-2);
    margin: 0 0 6px;
}
.ex-sub {
    font-family: var(--font-serif); font-style: italic;
    font-size: 15px; color: var(--muted);
    margin: 0 0 24px;
}
.ex-questions { display: flex; flex-direction: column; gap: 28px; }
.ex-question { }
.ex-q-text {
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 48, "SOFT" 45;
    font-weight: 500; font-size: 18px;
    line-height: 1.4; margin: 0 0 14px;
}
.ex-choices { display: flex; flex-direction: column; gap: 8px; }
.ex-choices--tf { flex-direction: row; gap: 10px; }
.ex-choice {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text);
    font: inherit; font-size: 15px;
    text-align: left; cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ex-choice:hover { border-color: var(--amber); }
.ex-choice-letter {
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: .1em; color: var(--muted);
    min-width: 16px;
}
.ex-choice.selected { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 8%, var(--bg)); }
.ex-choice.correct  { border-color: var(--brand-success, #6B8E5A); background: color-mix(in srgb, var(--brand-success, #6B8E5A) 10%, var(--bg)); color: var(--brand-success, #6B8E5A); }
.ex-choice.incorrect{ border-color: var(--brand-danger, #9E4A3E); background: color-mix(in srgb, var(--brand-danger, #9E4A3E) 10%, var(--bg)); color: var(--brand-danger, #9E4A3E); }
.ex-choice.revealed { border-color: var(--brand-success, #6B8E5A); opacity: .6; }
.ex-choice[disabled] { cursor: default; }

.ex-fib { }
.ex-fib-input {
    width: 100%; max-width: 360px;
    padding: 10px 14px;
    background: var(--bg);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
    color: var(--text);
    font: inherit; font-size: 15px;
}
.ex-fib-input:focus { outline: 0; border-color: var(--amber); }
.ex-fib-input.correct  { border-color: var(--brand-success, #6B8E5A); color: var(--brand-success, #6B8E5A); }
.ex-fib-input.incorrect{ border-color: var(--brand-danger, #9E4A3E); color: var(--brand-danger, #9E4A3E); }

.ex-feedback {
    margin-top: 10px;
    font-family: var(--font-serif); font-size: 14px;
    line-height: 1.5;
}
.ex-feedback.correct  { color: var(--brand-success, #6B8E5A); }
.ex-feedback.incorrect{ color: var(--brand-danger, #9E4A3E); }

.ex-actions { margin-top: 28px; display: flex; align-items: center; gap: 16px; }
.ex-done-msg {
    font-family: var(--font-serif); font-style: italic;
    color: var(--brand-success, #6B8E5A); font-size: 15px;
    margin: 0;
}
.ex-score {
    font-family: var(--font-mono); font-size: 12px;
    color: var(--muted); letter-spacing: .06em;
}

/* ---------- Checking overlay ---------- */
.ex-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(4px);
    z-index: 5;
    opacity: 0; animation: exFadeIn .25s ease forwards;
}
.ex-checking {
    display: inline-flex; align-items: center; gap: 10px;
    opacity: 0; animation: exFadeIn .25s ease forwards;
}
.ex-overlay-text {
    font-family: var(--font-serif); font-style: italic;
    font-variation-settings: "opsz" 24, "SOFT" 60;
    font-size: 18px; color: var(--text);
}
.ex-spinner {
    width: 28px; height: 28px;
    border: 2.5px solid var(--rule-2);
    border-top-color: var(--amber);
    border-radius: 50%;
    animation: exSpin .7s linear infinite;
}
@keyframes exFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes exSpin { to { transform: rotate(360deg); } }

/* ---------- Result summary bar ---------- */
.ex-result-bar {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 20px;
    margin-top: 24px;
    border-radius: var(--radius-md);
    background: var(--bg-2);
    border: 1px solid var(--rule);
    animation: exFadeIn .3s ease;
}
.ex-result-score {
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 48, "SOFT" 40;
    font-weight: 500; font-size: 28px; line-height: 1;
    letter-spacing: -0.02em;
}
.ex-result-label {
    font-size: 14px; color: var(--muted); line-height: 1.4;
}
.ex-result-bar.perfect { border-color: var(--brand-success, #6B8E5A); }
.ex-result-bar.perfect .ex-result-score { color: var(--brand-success, #6B8E5A); }

/* ---------- Starter course banner ---------- */
.starter-banner {
    background: color-mix(in srgb, var(--amber) 12%, var(--bg));
    border-bottom: 1px solid color-mix(in srgb, var(--amber) 30%, var(--rule));
    padding: 10px 0;
    font-size: 14px;
    color: var(--text);
    text-align: center;
}
.starter-banner a {
    color: var(--amber);
    font-weight: 600;
    border-bottom: 1px dotted var(--amber);
}

@media (max-width: 720px) {
    .toc-row { grid-template-columns: 48px 1fr; }
    .toc-row .toc-meta { grid-column: 2; margin-top: 6px; }
    .chapter-exercises { padding: 20px 18px; }
    .ex-choices--tf { flex-direction: column; }
}