/*
 * Shared Book Reader styles — v2 (Teacher + Student portals).
 *
 * Loaded by Book_ByExamType.cshtml in both portals. The v1 file
 * (book-reader.css) is kept on disk as a backup and is no longer linked
 * anywhere. This v2 is a full design refresh over the same markup — every
 * selector/class/attribute the reader JS (book-reader.js) and the seed content
 * HTML depend on is preserved; only the styling changed.
 *
 * Design system:
 *   - Warm-neutral surface system (paper/panel/hover share one temperature).
 *   - Single accent (deep teal) reserved for links, active state, section
 *     numbers, focus and a few meaningful markers — never as large fills.
 *   - Semantic callout tokens (info/tip/warn) for scannable notes.
 *   - One UI sans applied to ALL reader chrome (kills the portal font leak);
 *     Georgia serif body; math falls back to the body serif.
 *   - Calm weight scale (400/500/600/700 — no 800/900).
 *   - 4px spacing scale + 3 radii.
 *   - Theme scopes override token VALUES only (components read var(--token)).
 */

:root {
    /* Reading surface — warm neutral (light default). */
    --book-reader-surface: #FDFCFA;
    --book-reader-paper: #FBFAF7;
    --book-reader-paper-soft: #F3EFE8;
    --book-reader-panel: #F1EDE6;
    --book-reader-hover: #EFEAE1;
    --book-reader-border: #E6E0D5;
    --book-reader-paper-border: #E0D8CA;
    --book-reader-subtle-border: #E6E0D5;
    --book-reader-choice-border: #EAE3D6;

    /* Ink / text. muted is dark enough for >=4.5:1 on paper. */
    --book-reader-ink: #1A1712;
    --book-reader-body: #2E2A24;
    --book-reader-muted: #5C5648;

    /* Single accent — deep teal/pine. */
    --book-reader-accent: #0E6B5C;
    --book-reader-accent-soft: #E4F0EC;
    --book-reader-on-accent: #FFFFFF;

    /* Semantic callout roles (scannable notes). */
    --book-reader-info: #2C5E8A;
    --book-reader-info-soft: #E7EEF5;
    --book-reader-tip: #2E6B3E;
    --book-reader-tip-soft: #E9F2EA;
    --book-reader-warn: #A8531B;
    --book-reader-warn-soft: #F6ECE1;
    --book-reader-success-soft: #ECF3EC;

    /* Shadows / overlays / focus. */
    --book-reader-shadow: rgba(30, 26, 20, .08);
    --book-reader-card-shadow: rgba(30, 26, 20, .06);
    --book-reader-backdrop: rgba(0, 0, 0, .45);
    --book-reader-focus: rgba(14, 107, 92, .45);

    /* Font roles (theme-independent). One UI sans for all chrome. */
    --book-reader-font-body: Georgia, "Times New Roman", serif;
    --book-reader-font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --book-reader-font-math: "Cambria Math", Cambria, Georgia, serif;

    /* 4px spacing scale. */
    --book-reader-space-1: .25rem;
    --book-reader-space-2: .5rem;
    --book-reader-space-3: .75rem;
    --book-reader-space-4: 1rem;
    --book-reader-space-5: 1.5rem;
    --book-reader-space-6: 2rem;
    --book-reader-space-7: 2.5rem;
    --book-reader-space-8: 3rem;

    /* Radius scale. */
    --book-reader-radius-sm: 6px;
    --book-reader-radius-md: 8px;
    --book-reader-radius-pill: 999px;
}

/* Reader theme scopes — token VALUES only. */
.book-reader[data-reader-theme="sepia"] {
    --book-reader-surface: #F4ECD8;
    --book-reader-paper: #F4ECD8;
    --book-reader-paper-soft: #EBDFC8;
    --book-reader-panel: #EBDFC8;
    --book-reader-hover: #EADFC2;
    --book-reader-border: #DED2B4;
    --book-reader-paper-border: #D8CBAA;
    --book-reader-subtle-border: #DED2B4;
    --book-reader-choice-border: #DED2B4;
    --book-reader-ink: #3A2E1E;
    --book-reader-body: #4A3B28;
    --book-reader-muted: #6A5636;
    --book-reader-accent: #0C6153;
    --book-reader-accent-soft: #E0EBE3;
    --book-reader-info-soft: #E4EBE9;
    --book-reader-tip-soft: #E6EEDF;
    --book-reader-warn-soft: #EFE4CE;
    --book-reader-success-soft: #E7EEDC;
    --book-reader-focus: rgba(12, 97, 83, .45);
}

.book-reader[data-reader-theme="dark"] {
    --book-reader-surface: #16181D;
    --book-reader-paper: #1A1D23;
    --book-reader-paper-soft: #22262E;
    --book-reader-panel: #22262E;
    --book-reader-hover: #262B34;
    --book-reader-border: #2C3038;
    --book-reader-paper-border: #2C3038;
    --book-reader-subtle-border: #2C3038;
    --book-reader-choice-border: #2C3038;
    --book-reader-ink: #ECECEA;
    --book-reader-body: #C9C7C2;
    --book-reader-muted: #9A968D;
    --book-reader-accent: #3FB39F;
    --book-reader-accent-soft: rgba(63, 179, 159, .14);
    --book-reader-info: #7FB0DA;
    --book-reader-info-soft: rgba(127, 176, 218, .14);
    --book-reader-tip: #7CC089;
    --book-reader-tip-soft: rgba(124, 192, 137, .14);
    --book-reader-warn: #E0A264;
    --book-reader-warn-soft: rgba(224, 162, 100, .14);
    --book-reader-success-soft: rgba(124, 192, 137, .12);
    --book-reader-shadow: rgba(0, 0, 0, .4);
    --book-reader-card-shadow: rgba(0, 0, 0, .3);
    --book-reader-focus: rgba(63, 179, 159, .5);
}

html {
    scroll-behavior: smooth;
}

/*
 * Layout-isolation guard. The reader renders inside portal layouts whose
 * global stylesheets (e.g. shared-layout.css `.dark-mode h1..h6` / `label`)
 * target bare tags and would recolor / re-font reader typography that only
 * inherits from a container. Reassert the reader tokens on the elements
 * themselves, scoped under `.book-reader`, so the reader stays token-driven
 * and immune to outer-layout CSS. book-reader-v2.css always loads after the
 * layout stylesheets, so this also wins equal-specificity ties by source order.
 */
.book-reader h1,
.book-reader h2,
.book-reader h3,
.book-reader h4,
.book-reader h5,
.book-reader h6 {
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
}

.book-reader label {
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
}

.book-reader .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.book-reader-skip {
    position: absolute;
    left: var(--book-reader-space-4);
    top: -4rem;
    z-index: 50;
    background: var(--book-reader-accent);
    color: var(--book-reader-on-accent);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-2) var(--book-reader-space-3);
    font-family: var(--book-reader-font-ui);
    font-weight: 700;
    transition: top .2s ease;
}

.book-reader-skip:focus {
    top: var(--book-reader-space-4);
    color: var(--book-reader-on-accent);
    outline: 3px solid var(--book-reader-focus);
    outline-offset: 2px;
}

.book-reader {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: var(--book-reader-space-5);
    align-items: start;
}

/* Thin reading-progress bar pinned to the top of the viewport. */
.reader-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    background: var(--book-reader-border);
}

.reader-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--book-reader-accent);
    transition: width .1s linear;
}

.reader-nav {
    position: sticky;
    top: var(--book-reader-space-4);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    background: var(--book-reader-surface);
    border: 1px solid var(--book-reader-border);
    border-radius: var(--book-reader-radius-md);
    box-shadow: 0 10px 24px var(--book-reader-shadow);
}

.reader-nav-header {
    color: var(--book-reader-ink);
    background: var(--book-reader-panel);
    border-bottom: 1px solid var(--book-reader-border);
    padding: var(--book-reader-space-4);
}

.reader-nav-header--cover {
    display: flex;
    align-items: flex-start;
    gap: var(--book-reader-space-3);
}

.reader-nav-cover-btn {
    flex: 0 0 48px;
    width: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
    border-radius: var(--book-reader-radius-sm);
    cursor: pointer;
}

.reader-nav-cover-btn:focus-visible {
    outline: 3px solid var(--book-reader-focus);
    outline-offset: 2px;
}

.reader-nav-cover {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--book-reader-radius-sm);
    border: 1px solid var(--book-reader-border);
    box-shadow: 0 2px 6px var(--book-reader-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}

.reader-nav-cover-btn:hover .reader-nav-cover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--book-reader-shadow);
}

.reader-nav-headings {
    flex: 1 1 auto;
    min-width: 0;
}

.reader-nav-headings h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Cover lightbox — click the sidebar thumbnail to enlarge the full cover. */
.reader-cover-lightbox {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--book-reader-space-6);
    background: var(--book-reader-backdrop);
}

.reader-cover-lightbox-img {
    max-width: min(90vw, 380px);
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: var(--book-reader-radius-md);
    box-shadow: 0 24px 60px var(--book-reader-shadow);
}

.reader-cover-lightbox-close {
    position: absolute;
    top: var(--book-reader-space-5);
    right: var(--book-reader-space-5);
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--book-reader-radius-pill);
    border: 1px solid var(--book-reader-border);
    background: var(--book-reader-surface);
    color: var(--book-reader-ink);
    font-size: 1.1rem;
    cursor: pointer;
}

.reader-cover-lightbox-close:hover {
    background: var(--book-reader-panel);
}

.reader-cover-lightbox-close:focus-visible {
    outline: 3px solid var(--book-reader-focus);
    outline-offset: 2px;
}

.reader-nav-header p {
    margin: var(--book-reader-space-2) 0 0;
    color: var(--book-reader-muted);
    font-family: var(--book-reader-font-ui);
    font-size: .86rem;
    font-weight: 500;
    line-height: 1.35;
}

.reader-nav-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--book-reader-space-2);
}

.reader-controls {
    display: grid;
    gap: var(--book-reader-space-3);
    padding: var(--book-reader-space-3);
    border-bottom: 1px solid var(--book-reader-border);
}

.reader-search-control {
    position: relative;
}

.reader-search-control i {
    position: absolute;
    left: var(--book-reader-space-3);
    top: 50%;
    color: var(--book-reader-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.reader-search-control input {
    width: 100%;
    min-height: 44px;
    color: var(--book-reader-ink);
    background: var(--book-reader-surface);
    border: 1px solid var(--book-reader-border);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-2) 2.2rem;
    font-family: var(--book-reader-font-ui);
    font-weight: 500;
}

.reader-search-control input:focus,
.reader-section-link:focus {
    outline: 3px solid var(--book-reader-focus);
    outline-offset: 2px;
}

.reader-nav-list {
    flex: 1 1 auto;
    overflow: auto;
    padding: var(--book-reader-space-3);
}

.reader-nav-group + .reader-nav-group {
    margin-top: var(--book-reader-space-4);
}

.reader-nav-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--book-reader-space-3);
    width: 100%;
    min-height: 44px;
    border: 0;
    color: var(--book-reader-ink);
    background: transparent;
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-2);
    font-family: var(--book-reader-font-ui);
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
}

.reader-nav-heading:hover {
    color: var(--book-reader-accent);
}

.reader-nav-heading:focus-visible {
    outline: 3px solid var(--book-reader-focus);
    outline-offset: 2px;
}

.reader-nav-heading span {
    flex: 1 1 auto;
}

.reader-chevron {
    flex: 0 0 auto;
    transition: transform .18s ease;
}

.reader-nav-heading[aria-expanded="true"] .reader-chevron {
    transform: rotate(90deg);
}

.reader-nav-heading small {
    flex: 0 0 auto;
    color: var(--book-reader-accent);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

.reader-nav-group.is-active .reader-nav-heading {
    color: var(--book-reader-accent);
    background-color: var(--book-reader-accent-soft);
}

.reader-section-links {
    display: grid;
    gap: var(--book-reader-space-1);
    margin-top: var(--book-reader-space-2);
    padding-left: var(--book-reader-space-4);
}

.reader-section-link {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: var(--book-reader-space-2);
    align-items: center;
    min-height: 40px;
    color: var(--book-reader-ink);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-2);
    font-family: var(--book-reader-font-ui);
    font-weight: 500;
    line-height: 1.25;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Hover — accent text only, no filled block. */
.reader-section-link:hover {
    color: var(--book-reader-accent);
}

/* Active — accent text + thin left rule + slight weight, no filled callout. */
.reader-section-link.is-active {
    color: var(--book-reader-accent);
    background-color: var(--book-reader-accent-soft);
    font-weight: 600;
}

.reader-section-number {
    color: var(--book-reader-accent);
    font-family: var(--book-reader-font-ui);
    font-weight: 700;
    text-align: right;
}

.reader-main {
    min-width: 0;
    background: var(--book-reader-paper);
    border-radius: var(--book-reader-radius-md);
    padding: clamp(1rem, 2vw, 2rem);
}

/* These containers carry tabindex="-1" only as programmatic scroll/skip targets
   (TOC click / hash nav). Suppress the focus outline they'd otherwise draw when
   focused that way; real interactive controls keep their own focus rings. */
.book-section:focus,
.reader-main:focus {
    outline: none;
}

.reader-toolbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--book-reader-space-4);
    margin-bottom: var(--book-reader-space-4);
    background: var(--book-reader-surface);
    border: 1px solid var(--book-reader-border);
    border-radius: var(--book-reader-radius-md);
    padding: var(--book-reader-space-4);
    box-shadow: 0 10px 24px var(--book-reader-shadow);
}

.reader-toolbar h2 {
    margin: 0;
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
}

.reader-toolbar p {
    margin: var(--book-reader-space-1) 0 0;
    color: var(--book-reader-muted);
    font-family: var(--book-reader-font-ui);
    font-weight: 500;
}

/* Reading controls (font size / line height / theme). */
.reader-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--book-reader-space-2);
}

.reader-tool-group {
    display: inline-flex;
    border: 1px solid var(--book-reader-border);
    border-radius: var(--book-reader-radius-sm);
    overflow: hidden;
}

.reader-tool-btn {
    min-height: 44px;
    min-width: 44px;
    padding: var(--book-reader-space-1) var(--book-reader-space-2);
    border: 0;
    background: var(--book-reader-surface);
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
    cursor: pointer;
    transition: background .18s ease;
}

.reader-tool-btn + .reader-tool-btn {
    border-left: 1px solid var(--book-reader-border);
}

.reader-tool-btn:hover:not(:disabled) {
    background: var(--book-reader-hover);
}

.reader-tool-btn[aria-pressed="true"] {
    background: var(--book-reader-accent);
    color: var(--book-reader-on-accent);
}

/* Active button keeps its accent fill on hover so the light text stays legible. */
.reader-tool-btn[aria-pressed="true"]:hover:not(:disabled) {
    background: var(--book-reader-accent);
    color: var(--book-reader-on-accent);
}

.reader-tool-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.reader-tool-btn:focus-visible {
    outline: 3px solid var(--book-reader-focus);
    outline-offset: 2px;
}

.reader-empty-state {
    color: var(--book-reader-muted);
    background: var(--book-reader-surface);
    border: 1px dashed var(--book-reader-border);
    border-radius: var(--book-reader-radius-md);
    margin-bottom: var(--book-reader-space-4);
    padding: var(--book-reader-space-4);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

/* Continuous reading surface — sections flow into one another, no cards. */
.book-section {
    scroll-margin-top: 5rem;
    padding: 0;
    transition: background .2s ease;
}

.book-section + .book-section {
    margin-top: var(--book-reader-space-7);
    padding-top: var(--book-reader-space-7);
    border-top: 1px solid var(--book-reader-border);
}

/* Topic heading above each section body — sits under the chapter hero and above
   the flowing body, giving a clear hierarchy: chapter hero > topic > body. */
.section-label {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--book-reader-space-2);
    margin-bottom: var(--book-reader-space-4);
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.section-label span:first-of-type {
    color: var(--book-reader-accent);
}

.section-label span + span::before {
    content: "/";
    margin-right: var(--book-reader-space-1);
    color: var(--book-reader-muted);
}

.book-ai-panel {
    margin: 0 0 var(--book-reader-space-5);
    padding: var(--book-reader-space-3);
    background: var(--book-reader-surface);
    border: 1px solid var(--book-reader-border);
    border-radius: var(--book-reader-radius-md);
    font-family: var(--book-reader-font-ui);
}

.book-ai-panel-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--book-reader-space-3);
}

.book-ai-models,
.book-ai-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--book-reader-space-2);
}

.book-ai-model,
.book-ai-action {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--book-reader-space-2);
    color: var(--book-reader-ink);
    background: var(--book-reader-surface);
    border: 1px solid var(--book-reader-border);
    border-radius: var(--book-reader-radius-pill);
    padding: var(--book-reader-space-1) var(--book-reader-space-3);
    font-family: var(--book-reader-font-ui);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.book-ai-model {
    width: 42px;
    padding-inline: var(--book-reader-space-2);
}

.book-ai-model:hover,
.book-ai-action:hover {
    color: var(--book-reader-accent);
    background: var(--book-reader-accent-soft);
}

.book-ai-model.is-active {
    color: var(--book-reader-on-accent);
    background: var(--book-reader-accent);
    border-color: var(--book-reader-accent);
}

.book-ai-model:focus-visible,
.book-ai-action:focus-visible,
.book-ai-choice:focus-within {
    outline: 3px solid var(--book-reader-focus);
    outline-offset: 2px;
}

.book-ai-action:disabled {
    opacity: .58;
    cursor: wait;
}

.book-ai-output {
    margin-top: var(--book-reader-space-3);
    border-top: 1px solid var(--book-reader-border);
    padding-top: var(--book-reader-space-3);
}

.book-ai-loading,
.book-ai-error,
.book-ai-response-header,
.book-ai-similar-meta,
.book-ai-choice-feedback {
    font-family: var(--book-reader-font-ui);
}

.book-ai-loading,
.book-ai-error {
    display: inline-flex;
    align-items: center;
    gap: var(--book-reader-space-2);
    color: var(--book-reader-muted);
    font-weight: 600;
}

.book-ai-error {
    color: var(--book-reader-warn);
}

.book-ai-response-header {
    display: inline-flex;
    align-items: center;
    gap: var(--book-reader-space-2);
    margin-bottom: var(--book-reader-space-3);
    color: var(--book-reader-accent);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.book-ai-response-body {
    color: var(--book-reader-body);
}

.book-ai-response-body > :last-child,
.book-ai-similar-question > :last-child {
    margin-bottom: 0;
}

.book-ai-similar-list {
    display: grid;
    gap: var(--book-reader-space-3);
}

.book-ai-similar-card {
    background: var(--book-reader-paper-soft);
    border: 1px solid var(--book-reader-paper-border);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-3);
}

.book-ai-similar-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--book-reader-space-1);
    margin-bottom: var(--book-reader-space-2);
    color: var(--book-reader-muted);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.book-ai-similar-meta span + span::before {
    content: "/";
    margin-right: var(--book-reader-space-1);
}

.book-ai-choice-list {
    display: grid;
    gap: var(--book-reader-space-2);
    margin-top: var(--book-reader-space-3);
}

.book-ai-choice {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: var(--book-reader-space-2);
    align-items: start;
    margin: 0;
    color: var(--book-reader-ink);
    background: var(--book-reader-surface);
    border: 1px solid var(--book-reader-border);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-2) var(--book-reader-space-3);
    cursor: pointer;
}

.book-ai-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.book-ai-choice-label {
    width: 1.55rem;
    height: 1.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--book-reader-accent);
    border: 1.5px solid var(--book-reader-accent);
    border-radius: var(--book-reader-radius-pill);
    font-family: var(--book-reader-font-ui);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1;
}

.book-ai-choice-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.book-ai-choice:hover {
    border-color: var(--book-reader-accent);
}

.book-ai-choice.is-disabled {
    cursor: default;
}

.book-ai-choice.is-correct {
    background: var(--book-reader-success-soft);
    border-color: var(--book-reader-tip);
}

.book-ai-choice.is-wrong {
    background: var(--book-reader-warn-soft);
    border-color: var(--book-reader-warn);
}

.book-ai-choice-feedback {
    margin-top: var(--book-reader-space-2);
    font-weight: 700;
}

.book-ai-feedback-correct,
.book-ai-feedback-wrong {
    display: inline-flex;
    align-items: center;
    gap: var(--book-reader-space-2);
}

.book-ai-feedback-correct {
    color: var(--book-reader-tip);
}

.book-ai-feedback-wrong {
    color: var(--book-reader-warn);
}

/* Chapter (main-topic) hero — marks the start of each chapter in the reading
   flow so chapters read as distinct sections, not one flat stream. */
.reader-chapter-hero {
    margin: var(--book-reader-space-8) 0 var(--book-reader-space-6);
    padding-bottom: var(--book-reader-space-4);
    border-bottom: 2px solid var(--book-reader-accent);
}

.reader-chapter-hero:first-child {
    margin-top: 0;
}

.reader-chapter-eyebrow {
    display: block;
    color: var(--book-reader-accent);
    font-family: var(--book-reader-font-ui);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.reader-chapter-title {
    margin: var(--book-reader-space-1) 0 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.reader-chapter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--book-reader-space-3);
    margin: var(--book-reader-space-2) 0 0;
    color: var(--book-reader-muted);
    font-family: var(--book-reader-font-ui);
    font-size: .82rem;
    font-weight: 500;
}

.reader-content {
    margin-inline: 0;
    color: var(--book-reader-body);
    font-family: var(--book-reader-font-body);
    font-size: var(--reader-font-size, 18px);
    line-height: var(--reader-line-height, 1.7);
}

/* Wide block elements may break out of the text measure. */
.reader-content table,
.reader-content .mcq,
.reader-content .example-box,
.reader-content .question-item,
.reader-content .mcq-item,
.reader-content .verity-mcq,
.reader-content .values-grid,
.reader-content .math-block {
    max-width: none;
}

.reader-content h1,
.reader-content h2,
.reader-content h3,
.reader-content h4 {
    font-family: var(--book-reader-font-ui);
    line-height: 1.25;
    font-weight: 700;
}

.reader-content h1 {
    color: var(--book-reader-ink);
    border-bottom: 2px solid var(--book-reader-accent);
    padding-bottom: var(--book-reader-space-2);
    font-size: 1.9rem;
}

.reader-content h2 {
    color: var(--book-reader-ink);
    border-bottom: 1px solid var(--book-reader-paper-border);
    padding-bottom: var(--book-reader-space-1);
    margin-top: 1.35em;
    font-size: 1.5rem;
}

.reader-content h3 {
    color: var(--book-reader-ink);
    margin-top: 1.1em;
    font-size: 1.25rem;
}

.reader-content h4 {
    color: var(--book-reader-ink);
    margin-top: 1em;
    font-size: 1.1rem;
}

.reader-content img,
.reader-content svg {
    max-width: 100%;
    height: auto;
}

.book-question-stem svg {
    width: fit-content;
    height: auto;
}

@media (min-width: 992px) {
    .book-question-stem svg {
        max-width: 500px;
        width: auto;
    }
}

.reader-content table {
    width: 100%;
    margin: var(--book-reader-space-3) 0;
    border-collapse: collapse;
    font-size: .95em;
}

.reader-content th,
.reader-content td {
    border: 1px solid var(--book-reader-paper-border);
    padding: var(--book-reader-space-2) var(--book-reader-space-3);
    text-align: left;
    vertical-align: top;
}

/* Neutral table header + accent underline (no large accent fill). */
.reader-content th {
    color: var(--book-reader-ink);
    background: var(--book-reader-panel);
    border-bottom: 2px solid var(--book-reader-accent);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

.reader-content table.ref td:first-child {
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

.reader-content table.ref tr:nth-child(even) td {
    background: var(--book-reader-paper-soft);
}

.reader-content .math,
.reader-content .math-block,
.reader-content .formula-card,
.reader-content .calc,
.reader-content .opt-txt {
    font-family: var(--book-reader-font-math);
}

.reader-content .math {
    background: var(--book-reader-paper-soft);
    border-radius: var(--book-reader-radius-sm);
    padding: 1px 6px;
}

.reader-content .math-block {
    display: block;
    overflow-x: auto;
    white-space: pre-wrap;
    background: var(--book-reader-panel);
    border-left: 3px solid var(--book-reader-accent);
    border-radius: 0 var(--book-reader-radius-sm) var(--book-reader-radius-sm) 0;
    margin: var(--book-reader-space-3) 0;
    padding: var(--book-reader-space-3) var(--book-reader-space-4);
}

/* --- Callouts (restrained — light rules, no heavy filled boxes) ---------- */
/* Neutral emphasis (method / formula / general highlight): hairline rule, no fill. */
.reader-content .highlight-box,
.reader-content .coach-box,
.reader-content .formula-card {
    margin: var(--book-reader-space-4) 0;
    padding: var(--book-reader-space-1) 0 var(--book-reader-space-1) var(--book-reader-space-4);
    border-left: 2px solid var(--book-reader-border);
}

/* Semantic notes — soft tint + coloured hairline, only where meaning needs colour.
   Kept light: minimal padding, thin bar, no shadow. */
.reader-content .note,
.reader-content .tip,
.reader-content .trap-box,
.reader-content .warning {
    margin: var(--book-reader-space-4) 0;
    padding: var(--book-reader-space-3) var(--book-reader-space-4);
    border-left: 3px solid;
    border-radius: 0 var(--book-reader-radius-sm) var(--book-reader-radius-sm) 0;
}

.reader-content .note {
    background: var(--book-reader-info-soft);
    border-left-color: var(--book-reader-info);
}

.reader-content .tip {
    background: var(--book-reader-tip-soft);
    border-left-color: var(--book-reader-tip);
}

.reader-content .trap-box,
.reader-content .warning {
    background: var(--book-reader-warn-soft);
    border-left-color: var(--book-reader-warn);
}

/* Worked examples / inline questions — NOT callouts. Integrated into the flow
   with spacing + a top hairline; no box, no fill, no shadow. */
.reader-content .example-box,
.reader-content .question-item,
.reader-content .mcq,
.reader-content .mcq-item {
    margin: var(--book-reader-space-5) 0;
    padding-top: var(--book-reader-space-3);
    border-top: 1px solid var(--book-reader-border);
}

.reader-content .verity-mcq {
    margin: var(--book-reader-space-6) 0;
}

.reader-content .verity-mcq h4 {
    margin-bottom: var(--book-reader-space-2);
}

.reader-content .standard-note {
    margin: var(--book-reader-space-3) 0;
    color: var(--book-reader-muted);
    font-family: var(--book-reader-font-ui);
    font-size: .9rem;
}

.reader-content .mcq-item .stem {
    color: var(--book-reader-ink);
    font-weight: 600;
}

.reader-content .mcq-item ol[type],
.reader-content .question-item ol[type] {
    margin: var(--book-reader-space-3) 0;
    padding-left: var(--book-reader-space-5);
}

.reader-content .mcq-item details,
.reader-content .question-item details {
    margin-top: var(--book-reader-space-3);
    border-top: 1px dashed var(--book-reader-paper-border);
    padding-top: var(--book-reader-space-3);
}

.reader-content .mcq-item summary,
.reader-content .question-item summary {
    cursor: pointer;
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

.reader-content .skill {
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--book-reader-space-2);
    color: var(--book-reader-muted);
    font-family: var(--book-reader-font-ui);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.reader-content .badge {
    display: inline-flex;
    align-items: center;
    margin: var(--book-reader-space-1) var(--book-reader-space-1) var(--book-reader-space-1) 0;
    color: var(--book-reader-accent);
    background: var(--book-reader-accent-soft);
    border: 1px solid var(--book-reader-paper-border);
    border-radius: var(--book-reader-radius-pill);
    padding: var(--book-reader-space-1) var(--book-reader-space-2);
    font-family: var(--book-reader-font-ui);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.2;
}

.reader-content .stem-card {
    background: var(--book-reader-paper-soft);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-3) var(--book-reader-space-4);
}

/* Option lists (inline content) — share the questionbank option chip look:
   neutral chip, no accent bar; the label badge carries the accent. */
.reader-content .opts,
.reader-content .options-list {
    list-style: none;
    padding-left: 0;
}

.reader-content .opts li,
.reader-content .options-list li {
    display: flex;
    gap: var(--book-reader-space-2);
    background: var(--book-reader-paper-soft);
    border: 1px solid var(--book-reader-paper-border);
    border-radius: var(--book-reader-radius-sm);
    margin: var(--book-reader-space-2) 0;
    padding: var(--book-reader-space-2) var(--book-reader-space-3);
}

/* Option badge — outline (not filled). */
.reader-content .opts .badge {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--book-reader-radius-pill);
    color: var(--book-reader-accent);
    background: transparent;
    border: 1.5px solid var(--book-reader-accent);
    font-family: var(--book-reader-font-ui);
    font-size: .78rem;
    font-weight: 700;
}

.reader-content details.solution {
    margin-top: var(--book-reader-space-3);
    border-top: 1px dashed var(--book-reader-paper-border);
    padding-top: var(--book-reader-space-3);
}

.reader-content details.solution > summary {
    cursor: pointer;
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

.reader-content .values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--book-reader-space-2);
}

.reader-content .values-grid div {
    background: var(--book-reader-paper-soft);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-2) var(--book-reader-space-3);
}

.reader-content .calc {
    background: var(--book-reader-surface);
    border: 1px solid var(--book-reader-subtle-border);
    border-radius: var(--book-reader-radius-sm);
    line-height: 2;
    margin: var(--book-reader-space-3) 0;
    padding: var(--book-reader-space-3);
    text-align: center;
}

.reader-content .boxed {
    display: inline-block;
    color: var(--book-reader-accent);
    border: 2px solid var(--book-reader-accent);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-1) var(--book-reader-space-3);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

.reader-content .choice {
    border-bottom: 1px solid var(--book-reader-choice-border);
    padding: var(--book-reader-space-1) 0;
}

.reader-content .choice.ok {
    background: var(--book-reader-success-soft);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-1) var(--book-reader-space-2);
}

/* Question metadata caption (mcq > mcq-meta: "Question 1 · Very Hard · ..."). */
.reader-content .mcq-meta {
    margin-bottom: var(--book-reader-space-2);
    color: var(--book-reader-muted);
    font-family: var(--book-reader-font-ui);
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Lead-in labels (formula-card/warning "Method"/"trap"; choices "Why each option"). */
.reader-content .lbl,
.reader-content .clabel {
    display: inline-block;
    margin-right: var(--book-reader-space-1);
    color: var(--book-reader-accent);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

/* Choices explanation wrapper (mcq > choices > clabel + .choice). */
.reader-content .choices {
    margin-top: var(--book-reader-space-3);
}

/* Correct-answer line (solution > sol-answer: "Correct answer: C"). */
.reader-content .sol-answer {
    margin-top: var(--book-reader-space-2);
    color: var(--book-reader-ink);
    font-weight: 700;
}

/* values-grid cell label/value. */
.reader-content .vlabel {
    display: block;
    color: var(--book-reader-muted);
    font-family: var(--book-reader-font-ui);
    font-size: .78rem;
    font-weight: 500;
}

.reader-content .vval {
    display: block;
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-math);
}

/* calc step lines + down-arrow connectors. */
.reader-content .cline {
    display: block;
}

.reader-content .arrow {
    display: block;
    color: var(--book-reader-muted);
}

/* diagram = svg chart container. */
.reader-content .diagram {
    margin: var(--book-reader-space-4) 0;
    text-align: center;
}

.reader-content .diagram img,
.reader-content .diagram svg {
    display: block;
    width: min(100%, 760px);
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--book-reader-paper-border);
    border-radius: var(--book-reader-radius-md);
    background: var(--book-reader-surface);
}

.reader-content .visual-grid {
    display: grid;
    gap: var(--book-reader-space-3);
}

@media (min-width: 1000px) {
    .reader-content .visual-grid.two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* answer key grid (answer-grid > span: "1·C 2·A ..."). */
.reader-content .answer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: var(--book-reader-space-1);
    margin: var(--book-reader-space-3) 0;
}

.reader-content .answer-grid span {
    padding: var(--book-reader-space-1) var(--book-reader-space-2);
    background: var(--book-reader-paper-soft);
    border-radius: var(--book-reader-radius-sm);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
    text-align: center;
}

/* --- Linked questionbank items rendered at the end of a book section. ---- */
.book-question-groups {
    display: grid;
    gap: var(--book-reader-space-6);
    margin-top: var(--book-reader-space-6);
}

.book-question-group {
    border-top: 1px solid var(--book-reader-border);
    padding-top: var(--book-reader-space-4);
}

.book-question-group-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--book-reader-space-3);
    margin-bottom: var(--book-reader-space-3);
}

.reader-content .book-question-group-header h3 {
    margin: 0;
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
    font-size: 1.15rem;
    font-weight: 700;
}

.book-question-group-header span {
    flex: 0 0 auto;
    color: var(--book-reader-muted);
    font-family: var(--book-reader-font-ui);
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
}

.book-question-list {
    display: grid;
    gap: var(--book-reader-space-3);
}

/* Question row — light, not a heavy card: hairline border, no shadow, no accent bar. */
.book-question-card {
    background: var(--book-reader-surface);
    border: 1px solid var(--book-reader-paper-border);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-4);
}

.book-question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--book-reader-space-1);
    margin-bottom: var(--book-reader-space-2);
    color: var(--book-reader-muted);
    font-family: var(--book-reader-font-ui);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.book-question-meta span + span::before {
    content: "/";
    margin-right: var(--book-reader-space-1);
    color: var(--book-reader-muted);
}

.book-question-stem > :last-child {
    margin-bottom: 0;
}

.book-question-options {
    display: grid;
    gap: var(--book-reader-space-2);
    list-style: none;
    margin: var(--book-reader-space-3) 0 0;
    padding: 0;
}

.book-question-option {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: var(--book-reader-space-2);
    align-items: start;
    background: var(--book-reader-paper-soft);
    border: 1px solid var(--book-reader-paper-border);
    border-radius: var(--book-reader-radius-sm);
    padding: var(--book-reader-space-2) var(--book-reader-space-3);
}

/* Option label — outline badge (matches inline .opts .badge). */
.book-question-option-label {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--book-reader-accent);
    background: transparent;
    border: 1.5px solid var(--book-reader-accent);
    border-radius: var(--book-reader-radius-pill);
    font-family: var(--book-reader-font-ui);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1;
}

.book-question-option-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.book-question-solution {
    margin-top: var(--book-reader-space-3);
    border-top: 1px dashed var(--book-reader-paper-border);
    padding-top: var(--book-reader-space-3);
}

.book-question-solution > summary {
    cursor: pointer;
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

.book-question-answer {
    margin: var(--book-reader-space-2) 0 0;
    color: var(--book-reader-ink);
    font-family: var(--book-reader-font-ui);
    font-weight: 600;
}

.book-question-solution-body {
    margin-top: var(--book-reader-space-3);
}

/* Figure/value caption. */
.reader-content .caption {
    color: var(--book-reader-muted);
    font-size: .95em;
}

/* Inline italic. */
.reader-content .i {
    font-style: italic;
}

.book-reader [hidden] {
    display: none !important;
}

/* Mobile TOC drawer backdrop (shown only on small screens, see media query). */
.reader-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: var(--book-reader-backdrop);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}

@keyframes readerSectionIn {
    from {
        opacity: .62;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.book-section.is-reader-visible {
    animation: readerSectionIn .2s ease;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .book-reader *,
    .book-section.is-reader-visible {
        animation: none !important;
        transition: none !important;
    }

    .reader-progress-bar,
    .reader-nav,
    .reader-chevron,
    .reader-drawer-backdrop {
        transition: none !important;
    }
}

@media (min-width: 992px) {
    .reader-drawer-backdrop {
        display: none;
    }
}

@media (max-width: 991.98px) {
    .book-reader {
        grid-template-columns: 1fr;
    }

    /* TOC becomes a left off-canvas drawer. */
    .reader-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(320px, 85vw);
        max-height: none;
        z-index: 70;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow: auto;
    }

    .book-reader[data-reader-drawer-open] .reader-nav {
        transform: translateX(0);
    }

    .book-reader[data-reader-drawer-open] .reader-drawer-backdrop {
        opacity: 1;
        visibility: visible;
    }

    .reader-nav-list {
        max-height: none;
    }

    .reader-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Comfortable tap targets for the primary nav in the drawer. */
    .reader-section-link {
        min-height: 44px;
    }

    .reader-section-links {
        gap: var(--book-reader-space-2);
    }
}