/* ============================================================
   book.css  -  Canonical shared stylesheet for all page types
   Single source of truth for visual rendering.
   All HTML files link to this instead of inline <style> blocks.
   ============================================================ */

/* ----- :root variables ----- */
:root {
    --primary: #1a1a2e;
    --accent: #0f3460;
    --highlight: #e94560;
    --bg: #fafafa;
    --text: #2d3436;
    --text-light: #555;
    --code-bg: #1e1e2e;
    --code-text: #cdd6f4;
}

/* ----- Reset ----- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* ----- Base typography ----- */
body {
    font-family: serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.85;
    font-size:1.0625rem;
    -webkit-hyphens: auto;
    hyphens: auto;
}

p {
    margin-bottom: 1.2rem;
    text-align: justify;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--highlight); }

/* Visible link cues inside content areas: color + underline for discoverability */
.content a:not(.section-card):not(.toc-link):not(.book-title-link):not(.toc-part-header):not(.toc-ch) {
    color: #1a6fb5;
    text-decoration: underline;
    text-decoration-color: rgba(26, 111, 181, 0.4);
    text-underline-offset: 2px;
    text-decoration-thickness: 1.5px;
    transition: text-decoration-color 0.2s, color 0.2s;
}
.content a:not(.section-card):not(.toc-link):not(.book-title-link):not(.toc-part-header):not(.toc-ch):hover {
    color: var(--highlight);
    text-decoration-color: var(--highlight);
    text-decoration-thickness: 2px;
}
/* TOC links don't follow body-prose link styling — they have their own
 * card visuals defined in the toc-* section below. */
.content .toc-chapter > a,
.content .toc-part-title a,
.content .toc-main a {
    color: inherit !important;
    text-decoration: none !important;
}
.content .toc-chapter > a:hover,
.content .toc-main a:hover {
    text-decoration: none !important;
}
/* Nav links inside chapter-nav should not be underlined */
.chapter-nav a { text-decoration: none !important; }

ul, ol { margin: 0.5rem 0 1.2rem 1.5rem; }
li { margin-bottom: 0.4rem; }

/* Justify text-intensive bullets in main content (paragraph-style list items
 * read better with even right edges, like the surrounding prose). Excludes
 * UI / layout lists (TOC, section cards, chapter cards, callouts, objectives)
 * which keep their existing left alignment via more specific rules. */
main.content li {
    text-align: justify;
    hyphens: auto;
}
main.content .sections-list li,
main.content .section-list li,
main.content .chapter-card-body li,
main.content .callout li,
main.content .objectives li,
main.content nav li,
main.content .toc-chapter-list li,
main.content .chapter-nav li {
    text-align: left;
    hyphens: manual;
}

/* ----- Headings ----- */
h2 {
    font-size: 1.8rem;
    color: var(--primary);
    margin: 3rem 0 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--highlight);
    line-height: 1.3;
}
h3 {
    font-size: 1.35rem;
    color: var(--accent);
    margin: 2rem 0 1rem;
    line-height: 1.3;
}
h4 {
    font-size: 1.1rem;
    color: var(--primary);
    margin: 1.5rem 0 0.75rem;
}

/* ----- Layout: .content ----- */
.content {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* ----- Chapter header -----
 * Wave D2 (May 2026): tightened vertical rhythm and centered breadcrumb so
 * the part/chapter trail visually aligns with the centered h1. Before this
 * change the breadcrumb was flex-aligned to the start (left) while the h1
 * was centered, which produced an off-balance look. */
.chapter-header {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    padding: 0 2rem 2rem;
    text-align: center;
}
/* Subtle horizontal accent rule between the search section and the chapter
 * title section, so the visual hierarchy reads as two distinct zones. */
.chapter-header .header-search {
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
}
.chapter-header h1 {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0.5rem 0 0.4rem;
    line-height: 1.18;
    letter-spacing: -0.01em;
}
.chapter-header h1.part-title {
    /* Part-landing h1 is the page's biggest typographic event;
     * give it a touch more weight. */
    font-size: 2.7rem;
}

/* Header navigation bar: book title (left) + ToC icon (right) */
.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.5rem;
    margin: 0 -0.5rem 0.8rem;
    font-family: sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
}
.header-nav .book-title-link {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}
.header-nav .book-title-link:hover { color: rgba(255,255,255,0.95); }
.header-nav .toc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    transition: all 0.2s;
}
.header-nav .toc-link:hover {
    color: rgba(255,255,255,0.95);
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
}
.header-nav .toc-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Header hierarchy: Part (top) > Module (middle) > Section title (bottom) */
.part-label {
    font-family: sans-serif;
    font-size: 0.88rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.15rem;
}
.part-label a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}
.part-label a:hover { opacity: 0.9; }

.chapter-label {
    font-family: sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 0.3rem;
}
.chapter-label a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}
.chapter-label a:hover { opacity: 0.9; }

/* New compact breadcrumb (Wave D, May 2026): one row above h1 with
 * Part > Chapter (both linked), and a "current location" label below
 * the h1. Replaces the 3-row stack of part-label/chapter-label/
 * section-label. Old classes are kept above for any legacy pages that
 * may still emit them, but the normalize script now emits these. */
.page-breadcrumb {
    font-family: sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 auto 0.6rem;
    max-width: 820px;
    color: rgba(255,255,255,0.85);
    /* Flex so chevron separators sit baseline-aligned with the link text.
     * justify-content:center aligns the breadcrumb with the centered h1. */
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem 0.5rem;
}
.page-breadcrumb a {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,0.35);
    padding-bottom: 1px;
}
.page-breadcrumb a:hover {
    color: #fff;
    border-bottom-color: rgba(255,255,255,0.7);
}
.page-breadcrumb .bc-sep {
    color: rgba(255,255,255,0.5);
    font-size: 0.95em;
}
.page-breadcrumb .bc-current {
    color: rgba(255,255,255,0.7);
}

/* "Current location" caption that sits BELOW the h1 (Section 31.1,
 * Chapter 31, Appendix A, etc.). A subtle outlined pill so it reads as
 * an intentional label rather than a floating caption. */
.page-current {
    display: inline-block;
    font-family: sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255,255,255,0.92);
    margin: 0.6rem auto 0;
    padding: 0.3rem 0.9rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 999px;
    text-transform: uppercase;
    background: rgba(255,255,255,0.05);
}

/* Section breadcrumb (legacy, kept for any page that still emits this).
 * The new normalize script now emits .page-current instead. */
.section-label {
    font-family: sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    color: rgba(255,255,255,0.65);
}

/* Part/chapter subtitle (description text below h1 in header) */
.chapter-header .subtitle,
.chapter-header .chapter-subtitle {
    font-size: 1.1rem;
    opacity: 0.85;
    max-width: 650px;
    margin: 0.5rem auto 0;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
}

/* ----- Epigraph ----- */
.epigraph {
    max-width: 100%;
    margin: 2rem 0 2.5rem;
    padding: 1.2rem 1.5rem;
    border-left: 4px solid var(--highlight);
    background: linear-gradient(135deg, rgba(233,69,96,0.04), rgba(15,52,96,0.04));
    border-radius: 0 8px 8px 0;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text);
}
.epigraph p { margin: 0 0 0.5rem 0; }
.epigraph cite {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-style: normal;
    font-size: 0.9rem;
    color: var(--highlight);
    font-weight: 700;
    text-align: right;
}
.epigraph cite::before { content: "\2014\00a0"; }
.epigraph cite .agent-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--highlight);
    vertical-align: middle;
    flex-shrink: 0;
}
.epigraph cite .agent-avatar-inline {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size:0.875rem;
    font-weight: 700;
    color: white;
    font-family: sans-serif;
    font-style: normal;
    flex-shrink: 0;
    overflow: hidden;
}
.epigraph cite .agent-avatar-inline img,
.agent-avatar-large img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.epigraph cite a {
    color: var(--highlight);
    text-decoration: none;
    border-bottom: 1px dotted rgba(233,69,96,0.3);
}
.epigraph cite a:hover {
    border-bottom-style: solid;
    border-bottom-color: var(--highlight);
}
.epigraph cite .agent-desc {
    font-weight: 400;
    font-size: 0.82rem;
    color: var(--text-light);
}

/* ----- Wisdom Council ----- */
.wisdom-council-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
    margin: 2rem 0;
}
.agent-card {
    border: 1px solid #d8dce6;
    border-radius: 10px;
    padding: 1.2rem;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.agent-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.agent-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.agent-card-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid var(--highlight);
    flex-shrink: 0;
}
.agent-card-name {
    font-family: sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0;
    line-height: 1.2;
}
.agent-card-title {
    font-size: 0.82rem;
    color: var(--highlight);
    font-weight: 700;
    font-style: italic;
}
.agent-card-tagline {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.5;
    margin: 0.3rem 0;
}
.agent-card-meta {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.4;
}
.agent-card-meta strong {
    color: var(--text);
    font-weight: 700;
}

/* ----- Prerequisites ----- */
.prereqs,
.prerequisites {
    margin: 1.5rem 0 2rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(135deg, rgba(15,52,96,0.04), rgba(233,69,96,0.02));
    border: 1px solid rgba(15,52,96,0.12);
    border-left: 5px solid var(--accent);
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}
.prereqs h2,
.prerequisites h2 { font-size: 1.1rem; margin-bottom: 0.5rem; position: relative; }
.prereqs h2::before,
.prerequisites h2::before {
    content: '';
    display: inline-block;
    width: 1.2em; height: 1.2em;
    margin-right: 0.4em;
    vertical-align: middle;
    background: url('icons/callout-prereqs.png') center/contain no-repeat;
    cursor: help;
}
.prereqs h2::after,
.prerequisites h2::after {
    content: "Knowledge and skills you should have before starting this chapter.";
    position: absolute; left: 0; top: 100%; z-index: 10;
    background: #333; color: white; padding: 6px 12px;
    border-radius: 4px; font-size: 0.75rem; font-weight: 400;
    max-width: 320px; white-space: normal;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.prereqs h2:hover::after,
.prerequisites h2:hover::after { opacity: 1; }
.prereqs a,
.prerequisites a {
    color: var(--highlight);
    text-decoration: none;
    border-bottom: 1px dotted var(--highlight);
}
.prereqs a:hover,
.prerequisites a:hover { border-bottom-style: solid; }

/* ----- Learning Objectives ----- */
.objectives {
    margin: 1.5rem 0 2rem;
    padding: 1.4rem 1.8rem;
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border: 1px solid rgba(67,160,71,0.18);
    border-left: 5px solid #43a047;
    border-radius: 0 8px 8px 0;
    font-size: 0.95rem;
    line-height: 1.65;
}
.objectives h3 {
    font-family: sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2e7d32;
    margin: 0 0 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}
.objectives h3::before {
    content: '';
    display: inline-block;
    width: 1.2em; height: 1.2em;
    margin-right: 0.4em;
    vertical-align: middle;
    background: url('icons/callout-objectives.png') center/contain no-repeat;
    cursor: help;
}
.objectives h3::after {
    content: "What you will be able to do after completing this chapter or section.";
    position: absolute; left: 0; top: 100%; z-index: 10;
    background: #333; color: white; padding: 6px 12px;
    border-radius: 4px; font-size: 0.75rem; font-weight: 400;
    text-transform: none; letter-spacing: normal; max-width: 320px;
    white-space: normal; opacity: 0; pointer-events: none;
    transition: opacity 0.2s ease;
}
.objectives h3:hover::after { opacity: 1; }
.objectives ul { margin: 0.3rem 0 0 1.4rem; }
.objectives li { margin-bottom: 0.35rem; }

/* ----- Chapter Overview ----- */
.overview {
    max-width: 750px;
    margin: 2rem auto 2.5rem;
    padding: 1.6rem 2rem;
    background: linear-gradient(135deg, rgba(15,52,96,0.05), rgba(15,52,96,0.02));
    border: 1px solid rgba(15,52,96,0.12);
    border-left: 4px solid var(--accent);
    border-radius: 0 10px 10px 0;
    font-size: 0.97rem;
    line-height: 1.75;
}
.overview h2 {
    font-family: sans-serif;
    font-size: 1.25rem;
    color: var(--accent);
    margin: 0 0 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(15,52,96,0.15);
}
.overview p { text-align: justify; hyphens: auto; }
.overview p:last-child { margin-bottom: 0; }

/* ----- Chapter Cards (part-level index pages) ----- */
/* ============================================================
   Chapter Cards (Part index pages: listing chapters)
   ============================================================ */
.chapter-card {
    background: white;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s;
}
.chapter-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.09);
    transform: translateY(-3px);
}
.chapter-card-header {
    background: var(--primary, #1a1a2e);
    color: white;
    padding: 1.1rem 1.5rem;
    font-family: sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
}
.chapter-card-header a,
.content .chapter-card-header a,
.content .chapter-card-header a:not(.section-card):not(.toc-link):not(.book-title-link):not(.toc-part-header):not(.toc-ch) {
    color: #ffffff;
    text-decoration: none;
}
.chapter-card-header a:hover,
.content .chapter-card-header a:hover {
    opacity: 0.9;
    text-decoration: underline;
    color: #ffffff;
}
.chapter-card-header .mod-num {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-right: 0.5rem;
}
.chapter-card-body {
    padding: 1.3rem 1.5rem;
    font-size: 0.93rem;
    line-height: 1.6;
}
.chapter-card-body p { margin-bottom: 0.8rem; }
.chapter-card-body .section-list {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    border-top: 1px solid #f0f0f0;
}
.chapter-card-body .section-list li {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.9rem;
}
.chapter-card-body .section-list li:last-child { border-bottom: none; }
.chapter-card-body .section-list a {
    color: var(--accent);
    text-decoration: none;
    display: block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    transition: background 0.15s;
}
.chapter-card-body .section-list a:hover {
    color: var(--highlight);
    background: rgba(15,52,96,0.04);
}
.chapter-card-body .section-list .sec-num {
    color: var(--highlight);
    font-weight: 700;
    margin-right: 0.4rem;
    min-width: 2.2rem;
    display: inline-block;
    font-family: sans-serif;
}

/* ============================================================
   Section Cards (Chapter index pages: listing sections)
   ============================================================ */
.sections-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.sections-list li { margin: 0; }
.section-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.2rem 1.4rem;
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 4px solid var(--accent);
    border-radius: 0 8px 8px 0;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
    text-decoration: none;
    color: inherit;
}
.section-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    border-left-color: var(--highlight);
}
.section-num {
    font-family: sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    background: var(--accent);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    min-width: 2.5rem;
    text-align: center;
    flex-shrink: 0;
}
.section-card:hover .section-num { background: var(--highlight); }
.section-title {
    font-weight: 700;
    color: var(--primary);
    font-size: 1rem;
    flex: 1 1 60%;
}
.section-desc {
    font-size: 0.88rem;
    color: var(--text-light, #666);
    line-height: 1.55;
    flex: 1 1 100%;
    margin-top: -0.2rem;
}

/* ============================================================
   Course Cards (syllabi/pathways grids)
   ============================================================ */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}
.course-link-card {
    display: flex;
    flex-direction: column;
    padding: 1.3rem 1.4rem 1.2rem;
    background: white;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
    position: relative;
    overflow: hidden;
}
.course-link-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--accent), var(--highlight));
    border-radius: 12px 12px 0 0;
}
.course-link-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    transform: translateY(-3px);
    border-color: var(--accent);
}
.course-link-card .crs-num {
    font-family: sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: white;
    background: linear-gradient(135deg, var(--accent), var(--highlight));
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 0.6rem;
}
.course-link-card h3 {
    font-family: sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    margin: 0 0 0.4rem;
    line-height: 1.3;
    border-bottom: none;
}
.course-link-card:hover h3 { color: var(--accent); }
.course-link-card .crs-desc {
    font-size: 0.88rem;
    color: var(--text-light, #666);
    line-height: 1.55;
    flex: 1;
}
.crs-fields { margin-top: 0.5rem; }
.crs-field { font-size: 0.85rem; color: #555; line-height: 1.5; margin-bottom: 0.2rem; }
.crs-label { font-weight: 700; color: var(--primary); margin-right: 0.3rem; }
.crs-label::after { content: ':'; }
.course-link-card h3 a { color: inherit; text-decoration: none; }
.course-link-card h3 a:hover { color: var(--accent); }
/* Alternate accent colors for track cards to distinguish from course cards */
.course-grid .course-link-card:nth-child(1)::before { background: linear-gradient(135deg, #0f3460, #2980b9); }
.course-grid .course-link-card:nth-child(2)::before { background: linear-gradient(135deg, #e94560, #ff6b6b); }
.course-grid .course-link-card:nth-child(3)::before { background: linear-gradient(135deg, #2d6a4f, #52b788); }
.course-grid .course-link-card:nth-child(4)::before { background: linear-gradient(135deg, #7b2cbf, #c77dff); }
.course-grid .course-link-card:nth-child(5)::before { background: linear-gradient(135deg, #e76f51, #f4a261); }
/* Matching badge colors */
.course-grid .course-link-card:nth-child(1) .crs-num { background: linear-gradient(135deg, #0f3460, #2980b9); }
.course-grid .course-link-card:nth-child(2) .crs-num { background: linear-gradient(135deg, #e94560, #ff6b6b); }
.course-grid .course-link-card:nth-child(3) .crs-num { background: linear-gradient(135deg, #2d6a4f, #52b788); }
.course-grid .course-link-card:nth-child(4) .crs-num { background: linear-gradient(135deg, #7b2cbf, #c77dff); }
.course-grid .course-link-card:nth-child(5) .crs-num { background: linear-gradient(135deg, #e76f51, #f4a261); }

@media (max-width: 600px) {
    .course-grid { grid-template-columns: 1fr; }
}

/* ----- Syllabus Table ----- */
.syllabus-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 1rem 0 2rem;
}
.syllabus-table thead th {
    background: var(--primary);
    color: white;
    padding: 0.6rem 0.8rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.3px;
}
.syllabus-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: top;
    line-height: 1.5;
}
.syllabus-table tr:hover td {
    background: #f4f7fa;
}
.syllabus-table td:first-child {
    font-weight: 700;
    color: var(--accent);
    width: 3.5rem;
    text-align: center;
}

/* ----- Agent Cards ----- */
.agent-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}
.agent-card img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    flex-shrink: 0;
}
.agent-card .agent-info {
    flex: 1;
    min-width: 0;
}
.agent-card .agent-num {
    font-family: sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--highlight);
    letter-spacing: 1px;
}
.agent-card .agent-name {
    font-family: sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.25;
    margin: 0.1rem 0 0.25rem;
}
.agent-card .agent-desc {
    font-size: 0.78rem;
    color: var(--text-light);
    line-height: 1.45;
}
@media (max-width: 600px) {
    .agent-card img { width: 40px; height: 40px; }
}

/* ----- Chapter Navigation (bottom nav bar) -----
 * Wave D4 (May 2026): each nav anchor is now a small two-line card with
 * label ("Previous"/"In Chapter"/"Next") + number ("Section 31.2") +
 * truncated title. The bulky gradient buttons are replaced with subtle
 * outlined cards so the bottom nav reads as supporting structure
 * rather than the page's loudest element. */
.chapter-nav, nav.chapter-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.7rem;
    max-width: 820px;
    margin: 3rem auto 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 0.88rem;
    border-top: none;
}
.chapter-nav a {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.15rem;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--accent);
    background: #ffffff;
    border: 1px solid #dce1ea;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    line-height: 1.3;
    min-height: 3.6rem;
}
.chapter-nav .nav-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #8893a3;
    font-weight: 700;
}
.chapter-nav .nav-num {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: -0.005em;
}
.chapter-nav .nav-title {
    font-size: 0.82rem;
    font-weight: 400;
    color: #4a5568;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* "Up" card sits center, slightly shaded so the eye finds the parent
 * destination at a glance. */
.chapter-nav a.up {
    background: #f5f7fb;
    border-color: #c5cfde;
    text-align: center;
    align-items: center;
}
.chapter-nav a.next {
    text-align: right;
    align-items: flex-end;
}
/* Arrow markers via after/before, scoped to the label row */
.chapter-nav a.prev .nav-label::before { content: "← "; }
.chapter-nav a.next .nav-label::after { content: " →"; }
.chapter-nav a.up .nav-label::before { content: "↑ "; }
.chapter-nav a:hover {
    border-color: var(--highlight);
    box-shadow: 0 2px 8px rgba(233, 69, 96, 0.08);
    transform: translateY(-1px);
}
.chapter-nav a:hover .nav-num,
.chapter-nav a:hover .nav-title {
    color: var(--highlight);
}
.chapter-nav a:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(233, 69, 96, 0.06);
}
/* Remove old arrow entities from link text via CSS (for pages that include &larr; / &rarr; inline) */
/* Single-child navs: center */
.chapter-nav a:first-child:last-child {
    grid-column: 1 / -1;
    justify-content: center;
}

/* ============================================================
   Callout boxes
   7 canonical types, consistent structure
   ============================================================ */

/* Base callout */
.callout {
    border: 1px solid;
    border-left: 5px solid;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
    border-radius: 0 8px 8px 0;
    font-size: 1rem;
}
/* Ensure all callout content uses the same base font size */
.callout p, .callout li, .callout .quiz-question,
.callout details, .callout summary { font-size: inherit; }
/* Callout body content alignment.
 *
 * Paragraphs (and paragraph-like blocks: <p>, .quiz-question, .answer body)
 * use JUSTIFIED text so the right edge matches the surrounding prose
 * (book-wide `p { text-align: justify; }` is the default). This makes
 * multi-paragraph callouts (research-frontier, big-picture, looking-back,
 * practical-example) read as text boxes rather than narrow left-aligned
 * inserts.
 *
 * List items (<li>) stay LEFT-aligned: justifying a single-line bullet
 * looks wrong (huge gaps in the middle).
 *
 * <summary> elements also stay LEFT-aligned: they are short single-line
 * affordances ("Show Answer", "Further Reading", etc).
 *
 * !important guards against accidental inheritance of text-align:center
 * from a surrounding figure/table/aside (was the "self-check looks
 * centered" bug). */
.callout,
.callout > p,
.callout > div:not(.callout-title) p,
.callout > div:not(.callout-title),
.callout .quiz-question,
.callout .answer p,
.callout details .answer p,
.callout > details > .answer {
    text-align: justify !important;
}
.callout > ul,
.callout > ol,
.callout > details,
.callout > details > summary,
.callout details summary,
.callout li {
    text-align: left !important;
}
/* Lists inside callouts: explicit padding so bullets sit inside the
 * callout border instead of overflowing to the left or appearing
 * mis-indented. text-align:left protects against any inherited center
 * alignment that would put bullets in the middle of the box. */
.callout ul, .callout ol {
    padding-left: 1.6em;
    margin: 0.5em 0;
    text-align: left;
    list-style-position: outside;
}
.callout ul { list-style-type: disc; }
.callout ol { list-style-type: decimal; }
.callout li { margin: 0.2em 0; line-height: 1.55; }
.callout li::marker { color: inherit; }

/* Figure-replaced paragraphs: a placeholder prose block where a deleted
 * duplicate diagram used to live. Make it visually distinct from regular
 * prose without putting the whole paragraph in italic (which made the
 * SR 11-7 figure-replacement read as a sidenote rather than primary
 * content). Subtle left-bar + slightly muted color = "callout-lite". */
.figure-replaced {
    border-left: 3px solid #b3c5d8;
    background: #f7f9fc;
    padding: 0.7em 1em;
    margin: 1em 0;
    color: #2a3340;
    font-size: 0.97em;
}
.figure-replaced em { font-style: normal; }

/* Standardize: body content headings (h1-h4) are always left-aligned
 * regardless of any enclosing centered context (figure caption, table
 * cell, etc.). User reports of "section 31.1.2 is left, 31.1.3 is
 * centered" inside the same file mean some heading was inheriting
 * center from a parent. Force it. */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    text-align: left;
}
.callout-title {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    margin-bottom: 0.5rem;
    cursor: help;
    position: relative;
    /* Standardize on left alignment for every callout title regardless of
     * the surrounding context (a callout placed inside a figure or table
     * cell with text-align:center otherwise inherits that alignment).
     * !important ensures even a higher-specificity per-type rule cannot
     * accidentally re-center the title in the future. */
    text-align: left !important;
}

/* Callout tooltip descriptions (single source of truth, pure CSS, no HTML changes needed) */
.callout .callout-title::after {
    position: absolute;
    left: 0;
    top: 100%;
    background: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    max-width: 320px;
    line-height: 1.4;
    z-index: 100;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.callout .callout-title:hover::after { opacity: 1; }

/* Tooltip text per callout type */
.callout.big-picture .callout-title::after {
    content: "Sets the context: why this topic matters and how it connects to the broader picture.";
}
.callout.key-insight .callout-title::after {
    content: "A single inline aha-moment. Use ONE paragraph that names the mental model in plain language. For end-of-section bulleted recaps, use key-takeaway instead.";
}
.callout.note .callout-title::after {
    content: "Additional detail or clarification that supplements the main text.";
}
.callout.warning .callout-title::after {
    content: "A common mistake, pitfall, or misconception to watch out for.";
}
.callout.practical-example .callout-title::after {
    content: "A real-world scenario showing how practitioners apply this concept in production.";
}
.callout.fun-note .callout-title::after {
    content: "A lighthearted or surprising fact related to the topic. Not essential, but memorable.";
}
.callout.research-frontier .callout-title::after {
    content: "Current research directions and open questions at the cutting edge of this field.";
}
.callout.algorithm .callout-title::after {
    content: "Step-by-step pseudocode or formal procedure for an algorithm discussed in this section.";
}
.callout.tip .callout-title::after {
    content: "A practical shortcut, best practice, or time-saving technique from experienced practitioners.";
}
.callout.exercise .callout-title::after {
    content: "A hands-on exercise to test your understanding. Try it before reading the solution.";
}
.callout.looking-back .callout-title::after {
    content: "A short recap: where you have been in prior chapters and how it sets up what comes next.";
}
.callout.cross-ref .callout-title::after {
    content: "Pointers to other sections of the book where related ideas are covered in depth.";
}
.callout.postmortem .callout-title::after {
    content: "Real-world production failure (anonymized). What broke, why, and what the team changed.";
}
.callout p:last-child { margin-bottom: 0; }

/* 1. Big Picture (purple) - icon: &#9733; */
.callout.big-picture {
    background: linear-gradient(135deg, #f3e5f5, #ede7f6);
    border-color: #ce93d8;
    border-left-color: #8e24aa;
}
.callout.big-picture .callout-title { color: #6a1b9a; }

/* 0. Thesis Thread (deep indigo) — recurring callout that ties a section to one
   of the 5 unifying theses introduced in front-matter/section-fm.0-conceptual-map.html.
   Distinctive look so readers can spot the spine of the book across chapters. */
.callout.thesis-thread::before {
    content: "\1F9F5";  /* spool-of-thread emoji */
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    font-size: 1.1rem;
    opacity: 0.55;
}
/* Production Pattern (9th edition Wave C2) — inline copy of a pattern
   from FM.0c. Teal-green so it's visually distinct from the warning-
   colored postmortem but still recognizably "production-relevant." */
.callout.production-pattern {
    background: linear-gradient(135deg, #e0f2f1, #b2dfdb);
    border-color: #4db6ac;
    border-left-color: #00695c;
    border-left-width: 5px;
}
.callout.production-pattern .callout-title { color: #004d40; font-weight: 700; }
.callout.production-pattern .callout-title::after {
    content: "A named production pattern: when it applies, how to use it, and when to skip it.";
}

/* "Under the Hood": explains the internal mechanism of a concept, model,
 * algorithm, or training procedure in prose (architecture, data flow, why
 * it works). Distinct from the `algorithm` callout, which carries
 * step-by-step pseudocode. Slate / engine-room palette. */
.callout.under-the-hood {
    background: linear-gradient(135deg, #eceff1, #cfd8dc);
    border-color: #90a4ae;
    border-left-color: #37474f;
    border-left-width: 5px;
}
.callout.under-the-hood .callout-title { color: #37474f; font-weight: 700; }
.callout.under-the-hood .callout-title::after {
    content: "How it works under the hood: the internal mechanism, architecture, or training procedure behind this concept.";
}

/* "Still open" debate list on FM.0e — slightly denser than default ol. */
ol.open-debates {
    padding-left: 1.3em;
}
ol.open-debates li {
    margin-bottom: 0.9em;
    line-height: 1.55;
}

/* Reading Pathways v2 - per-pathway card on FM.8b. */
section.pathway {
    margin: 2.5em 0;
    padding: 1.5em;
    border: 1px solid #cfd8dc;
    border-left: 5px solid #00838f;
    border-radius: 0.5em;
    background: linear-gradient(135deg, #ffffff, #f5fafa);
}
section.pathway h3 {
    margin-top: 0;
    color: #00838f;
}
ol.pathway-steps {
    margin-top: 1em;
    padding-left: 1.5em;
}
ol.pathway-steps li {
    margin-bottom: 0.5em;
}
ol.pathway-steps li em {
    color: #546e7a;
    font-style: italic;
}
.pathway-skip {
    margin-top: 1em;
    padding: 0.7em 1em;
    background: #fff8e1;
    border-left: 3px solid #f9a825;
    font-size: 0.95em;
}

/* Prereq auto-link — bare "Chapter NN" / "Section X.Y" / "Appendix L"
   tokens inside prereq boxes wrapped with this class (9th edition v719).
   Slight blue tint so the prereq box is visibly scannable but the links
   don't compete with body cross-refs. */
a.prereq-link {
    color: #1565c0;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid rgba(21, 101, 192, 0.4);
}
a.prereq-link:hover {
    border-bottom-color: #1565c0;
    background: #e3f2fd;
}

/* Glossary auto-link — first occurrence of each glossary term in each
   section is wrapped with this class (9th edition Wave A5). Subtle dotted
   underline so readers know it's a term link without it screaming. */
a.glossary-link {
    text-decoration: none;
    border-bottom: 1px dotted #757575;
    color: inherit;
    background: linear-gradient(transparent 0%, transparent 80%,
                                #fff59d 80%, transparent 100%);
}
a.glossary-link:hover {
    background: #fff59d;
    border-bottom-color: #424242;
}

/* Looking Back — short recap that bridges from prior chapters into this one.
   Lives at the very top of each chapter index page. Calm muted blue so it
   doesn't compete visually with the chapter overview / big picture below. */
.callout.looking-back {
    background: linear-gradient(135deg, #eceff1, #e3f2fd);
    border-color: #b0bec5;
    border-left-color: #455a64;
}

.callout.whats-next {
    background: #e8f8f4;
    border-left-color: #16a085;
}
.callout.whats-next .callout-title { color: #117a65; }
.callout.whats-next .callout-title::after { content: "Where this section's ideas continue: the next section to read."; }

.callout.looking-back .callout-title { color: #263238; }

/* Cross-Ref — discreet pointer to a canonical home elsewhere. Almost-flat
   so it slides into the prose without screaming. */
.callout.cross-ref {
    background: linear-gradient(135deg, #eceff1, #cfd8dc);
    border-color: #b0bec5;
    border-left-color: #455a64;
    font-size: 1rem;
}
.callout.cross-ref .callout-title { color: #263238; }

/* See Also link styling: muted slate gray. Without this override, See Also
 * callouts (which typically contain 3-5 links) inherit the global
 * `.content a:hover` rule and ALL links flash red-pink (#e94560) on hover,
 * making the callout look "highlighted in red". Slate-gray hover keeps the
 * callout discreet and matches the border-left-color.
 *
 * State coverage: default + :visited + :hover + :focus + :active.
 * Without explicit :visited, browsers apply their own purple/red visited
 * color and the user sees "red highlight" on previously-visited See Also
 * links. With explicit :visited matching the default, all states stay slate.
 */
.callout.cross-ref a,
.callout.cross-ref a:visited,
.callout.cross-ref a:link {
    color: #455a64 !important;
    text-decoration-color: rgba(69, 90, 100, 0.4) !important;
    text-decoration-thickness: 1.5px !important;
}
.callout.cross-ref a:hover,
.callout.cross-ref a:focus,
.callout.cross-ref a:active {
    color: #1a4078 !important;
    text-decoration-color: #1a4078 !important;
    text-decoration-thickness: 2px !important;
}
/* Also drop the help-cursor on the See Also title: the title text is
 * short ("See Also") and the tooltip explains the callout type — the
 * cursor: help (which can render as a question-mark) is more distracting
 * than informative for cross-refs. */
.callout.cross-ref .callout-title { cursor: default; }

/* Postmortem — production-failure callout (9th edition Wave C1). Slightly
   alarming maroon so readers register that this is a real incident, not a
   contrived example. */
.callout.postmortem {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    border-color: #ffb74d;
    border-left-color: #b71c1c;
    border-left-width: 5px;
}
.callout.postmortem .callout-title { color: #b71c1c; font-weight: 700; }
/* Postmortem uses a Unicode warning glyph instead of a PNG icon (no
 * callout-postmortem.png asset exists). The global icon rule below at
 * line 1334 styles ::before as a 1.2em x 1.2em inline-block waiting for
 * a background-image, which conflicts with Unicode text content: the
 * glyph ends up vertically misaligned and the title can wrap onto the
 * next line. Override the box geometry here so the Unicode character
 * flows inline as ordinary text on the same baseline as the title. */
.callout.postmortem .callout-title::before {
    content: "\26A0";
    display: inline;
    width: auto;
    height: auto;
    background: none;
    vertical-align: baseline;
    margin-right: 0.35em;
    color: #b71c1c;
    font-weight: 700;
}

/* Inline pill that names the thesis-thread badge in prose (e.g. "see the
   thesis-thread callout below"). Keeps the badge recognizable even in
   continuous text. */
.thesis-thread-tag {
    display: inline-block;
    padding: 0.05em 0.5em;
    margin: 0 0.15em;
    background: #e8eaf6;
    color: #1a237e;
    border: 1px solid #9fa8da;
    border-radius: 0.5em;
    font-size: 0.85em;
    font-weight: 700;
    font-family: sans-serif;
    line-height: 1.4;
}

/* 2. Key Insight (green) - icon: &#128161; */
.callout.key-insight {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border-color: #a5d6a7;
    border-left-color: #43a047;
}
.callout.key-insight .callout-title { color: #1b5e20; }

/* 3. Note (blue) - icon: &#128221; */
.callout.note {
    background: linear-gradient(135deg, #e3f2fd, #e8eaf6);
    border-color: #90caf9;
    border-left-color: #1976d2;
}
.callout.note .callout-title { color: #1565c0; }

/* 4. Warning (amber) - icon: &#9888; */
.callout.warning {
    background: linear-gradient(135deg, #fff8e1, #fff3e0);
    border-color: #ffcc80;
    border-left-color: #f57c00;
}
.callout.warning .callout-title { color: #bf360c; }

/* 5. Practical Example (light grey-blue) - icon: &#x1F3D7;&#xFE0F; */
.callout.practical-example {
    background: #f5f5f5;
    border-color: #b3e0f2;
    border-left-color: #5dade2;
}
.callout.practical-example .callout-title { color: #2471a3; }

/* 6. Fun Note (pink) - icon: &#127914; */
.callout.fun-note {
    background: linear-gradient(135deg, #fce4ec, #f3e5f5);
    border-color: #f48fb1;
    border-left-color: #e91e63;
}
.callout.fun-note .callout-title { color: #c2185b; }

/* 7. Research Frontier (purple-blue) - icon: &#128300; */
.callout.research-frontier {
    background: linear-gradient(135deg, #e8eaf6, #e3f2fd);
    border-color: #9fa8da;
    border-left-color: #5e35b1;
}
.callout.research-frontier .callout-title { color: #4527a0; }

/* 8. Algorithm / Pseudocode (indigo) - icon: &#9881; */
.callout.algorithm {
    background: linear-gradient(135deg, #f3effc, #eceaf8);
    border-color: #9581c4;
    border-left-color: #4a55a2;
}
.callout.algorithm .callout-title { color: #2e3990; }
.callout.algorithm pre {
    background: #faf8ff;
    color: #1a1a2e;
    border: 1px solid #c5b8e0;
    border-left: 4px solid #4a55a2;
    padding-left: 1.2em;
    font-family: monospace;
    font-variant-numeric: tabular-nums;
    tab-size: 2;
    font-size: 0.88rem;
    line-height: 1.65;
}
.callout.algorithm .algo-line-keyword {
    color: #3949ab;
    font-weight: 700;
}
.callout.algorithm .algo-line-comment {
    color: #6b6b6b;
    font-style: italic;
}
/* Wave D4 (May 2026): pseudocode blocks rendered through Pygments with
 * lang-text were getting numbers tinted as floats (gold) and bare words
 * tinted as random Pygments tokens. Override those tints so the block
 * reads as uniform plain text with only the algo-line-keyword spans
 * highlighted. Highest-leverage fix from the readability audit. */
.callout.algorithm pre code.lang-text .mf,
.callout.algorithm pre code.lang-text .mi,
.callout.algorithm pre code.lang-text .n,
.callout.algorithm pre code.lang-text .nb,
.callout.algorithm pre code.lang-text .o,
.callout.algorithm pre code.lang-text .p {
    color: inherit;
    font-weight: inherit;
}
.callout.algorithm pre code.lang-text .k,
.callout.algorithm pre code.lang-text .kn {
    color: #3949ab;
    font-weight: 700;
}
/* Tip callout: practical advice, shortcuts, pro-tips */
.callout.tip {
    background: linear-gradient(135deg, #e0f7fa, #e1f5fe);
    border-color: #80deea;
    border-left-color: #00acc1;
}
.callout.tip .callout-title { color: #006064; }

/* 10. Exercise (deep orange) - icon: &#9998; */
.callout.exercise {
    background: linear-gradient(135deg, #fbe9e7, #fff3e0);
    border-color: #ffab91;
    border-left-color: #e64a19;
}
.callout.exercise .callout-title { color: #c62828; }
.callout.exercise details { margin-top: 1rem; }
.callout.exercise details summary {
    cursor: pointer;
    font-weight: 700;
    color: #c62828;
    font-family: sans-serif;
    font-size: 0.9rem;
}
.callout.exercise ol, .callout.exercise ul { margin-top: 0.5rem; }

/* Grouped exercises container (created by book.js) */
.exercises-container {
    border: 2px solid #e64a19;
    border-radius: 10px;
    margin: 1.5rem 0;
    overflow: hidden;
    background: linear-gradient(135deg, #fbe9e7, #fff3e0);
}
.exercises-container > summary.exercises-summary {
    cursor: pointer;
    padding: 0.9rem 1.2rem;
    font-family: sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #c62828;
    background: linear-gradient(135deg, #fbe9e7, #fff3e0);
    border-bottom: 1px solid rgba(230, 74, 25, 0.15);
    list-style: none;
    user-select: none;
    /* Don't inherit centered alignment from any enclosing context. */
    text-align: left;
}
.exercises-container > summary.exercises-summary::-webkit-details-marker { display: none; }
.exercises-container > summary.exercises-summary::before {
    content: "\25B6\00a0";
    font-size: 0.8rem;
    transition: transform 0.2s;
    display: inline-block;
}
.exercises-container[open] > summary.exercises-summary::before {
    transform: rotate(90deg);
}
.exercises-container .exercises-icon {
    margin-right: 0.3rem;
}
/* Exercises inside the grouped container lose their outer border */
.exercise-inside-group.callout.exercise {
    border: none;
    border-left: 4px solid #e64a19;
    border-radius: 0;
    margin: 0;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(230, 74, 25, 0.1);
    background: transparent;
}
.exercise-inside-group.callout.exercise:last-child {
    border-bottom: none;
}

/* Section-level exercises wrapper (used in 57+ files) */
section.exercises,
div.exercises {
    margin: 2rem 0;
}

/* Orphaned utility classes */
.lab-steps { margin: 1rem 0; }
.lab-steps ol { counter-reset: lab-step; }
.lab-extensions { margin-top: 1.5rem; }
.lab-extensions h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-bottom: 0.5rem; }

.diagram { margin: 1.5rem 0; text-align: center; }

.table-container,
.table-responsive { overflow-x: auto; margin: 1rem 0; }

.dataset-card,
.model-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin: 0.75rem 0;
    background: #fafafa;
}
.model-meta { font-size: 0.9rem; color: #666; margin-top: 0.5rem; }

.exercise-answer {
    background: #f9fbe7;
    border-left: 4px solid #689f38;
    padding: 0.8rem 1rem;
    border-radius: 0 6px 6px 0;
    margin: 0.5rem 0;
}

.table-caption {
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.5rem;
    text-align: center;
    font-style: italic;
}

.template-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    margin: 0.75rem 0;
    background: #fafafa;
}
.template-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #666;
    margin-bottom: 0.3rem;
}
.template-desc { font-size: 0.92rem; color: #555; margin-top: 0.3rem; }

/* Additional orphaned classes (audit round 2) */
.bib-note { font-size: 0.88rem; color: #666; font-style: italic; margin-top: 0.25rem; }
.bibliography-list { list-style: none; padding: 0; }
.caption { font-size: 0.9rem; color: #555; font-style: italic; text-align: center; margin-top: 0.5rem; }
.code-label { font-size: 0.85rem; font-weight: 700; color: #666; margin-bottom: 0.25rem; }
/* `.data-table` rule removed Wave D2 (May 2026). All 12 book-content uses
 * were converted to `.complex-table` by scripts/_fix_table_standardization.py
 * because the 4-sided grid look was visually inconsistent with the rest of
 * the book's tables (which only have horizontal header underlines). Any
 * stray `class="data-table"` now falls through to the global <table> rule
 * and renders identically to `.complex-table`. */
.dataset-tag, .model-tag {
    display: inline-block;
    font-size: 0.78rem;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    background: #e8eaf6;
    color: #3949ab;
    margin: 0.15rem 0.25rem;
}
.figure-text { font-size: 0.88rem; color: #555; text-align: center; margin: 0.5rem 0; }
.highlight-row { background: #fffde7 !important; }
.lab-difficulty, .lab-level { font-size: 0.82rem; font-weight: 700; color: #00695c; }
.lab-duration { font-size: 0.82rem; color: #666; }
.math-display { text-align: center; margin: 1.2rem 0; overflow-x: auto; max-width: 100%; }
/* KaTeX auto-render wraps display math in .katex-display. Allow horizontal
   scroll so long equations never overflow the page on reflowable readers. */
.katex-display { overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 0.25rem 0; }
.katex-display > .katex { max-width: 100%; }
/* Inline math should not break across lines; allow wrap of the surrounding
   paragraph instead. */
.katex { max-width: 100%; }
.takeaway-next { margin-top: 1rem; padding: 0.75rem; background: #f3e5f5; border-radius: 6px; }

/* Callout icons via CSS (single source of truth).
 *
 * The callout-title itself becomes a flex container so the icon and the
 * title text share a single baseline regardless of font size or
 * line-height. This avoids the vertical-align quirk where `display:
 * inline-block` + `vertical-align: middle` puts the icon slightly above the
 * x-height of the title text (visible as a misaligned icon on
 * numeric-example, library-shortcut, and other callouts with multi-line
 * titles).
 *
 * `flex-wrap: nowrap` keeps the icon on the same line as the FIRST line of
 * the title; the title text can still wrap to multiple lines within its
 * flex item (because of `min-width: 0`). Earlier `flex-wrap: wrap` would
 * push the icon onto its own line whenever the title was too long, which
 * looked wrong (icon alone above a multi-line title). Setting
 * `align-items: flex-start` ensures the icon aligns with the FIRST line of
 * a multi-line title rather than centering on the whole block.
 */
.callout .callout-title {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    column-gap: 0.4em;
    row-gap: 0.15em;
}
.callout .callout-title > span,
.callout .callout-title {
    min-width: 0;  /* allow text to wrap inside its own flex item */
}
.callout .callout-title::before {
    content: '';
    flex: 0 0 auto;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    /* Align icon with the first text line (cap height) rather than the
     * vertical midpoint of a multi-line title. */
    margin-top: 0.15em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.callout.big-picture .callout-title::before { background-image: url('icons/callout-big-picture.png'); }
.callout.key-insight .callout-title::before { background-image: url('icons/callout-key-insight.png'); }
.callout.note .callout-title::before { background-image: url('icons/callout-note.png'); }
.callout.warning .callout-title::before { background-image: url('icons/callout-warning.png'); }
.callout.practical-example .callout-title::before { background-image: url('icons/callout-practical-example.png'); }
.callout.fun-note .callout-title::before { background-image: url('icons/callout-fun-note.png'); }
.callout.research-frontier .callout-title::before { background-image: url('icons/callout-research-frontier.png'); }
.callout.algorithm .callout-title::before { background-image: url('icons/callout-algorithm.png'); }
.callout.tip .callout-title::before { background-image: url('icons/callout-tip.png'); }
.callout.exercise .callout-title::before { background-image: url('icons/callout-exercise.png'); }
.callout.key-takeaway .callout-title::before { background-image: url('icons/callout-key-takeaway.svg'); }
.callout.lab .callout-title::before { background-image: url('icons/callout-lab.svg'); }
.callout.self-check .callout-title::before { background-image: url('icons/callout-self-check.svg'); }
.callout.library-shortcut .callout-title::before { background-image: url('icons/callout-library-shortcut.svg'); }
/* Under the Hood: a gear/cog icon signaling "internal mechanism". Inline SVG
   keeps the asset bundle small (matches the cross-ref / whats-next pattern). */
.callout.under-the-hood .callout-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337474f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}
/* Cross-Ref: compass / link-arrow icon. Inline SVG keeps the asset bundle small
   while signaling "navigate elsewhere in the book". */
.callout.cross-ref .callout-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23607d8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76' fill='%23607d8b' stroke='none'/%3E%3C/svg%3E");
}
/* What's Next: forward-arrow icon. Inline SVG matches the section's
   "continue reading" theme. */
.callout.whats-next .callout-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23117a65' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 17 18 12 13 7'/%3E%3Cpolyline points='6 17 11 12 6 7'/%3E%3C/svg%3E");
}
/* Looking Back: backward-arrow icon (mirror of whats-next). */
.callout.looking-back .callout-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237b5e1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'/%3E%3Cpolyline points='18 17 13 12 18 7'/%3E%3C/svg%3E");
}
/* Production Pattern: gear icon to convey "operational recipe". */
.callout.production-pattern .callout-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23455a64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

/* 11. Key Takeaway (warm gold) */
.callout.key-takeaway {
    background: linear-gradient(135deg, #fff8e1, #fffde7);
    border: 1px solid #ffd54f;
    border-left: 5px solid #f9a825;
}
.callout.key-takeaway .callout-title { color: #f57f17; }

/* 12. Library Shortcut (teal/cyan) */
.callout.library-shortcut {
    background: linear-gradient(135deg, #e0f2f1, #e0f7fa);
    border-color: #80cbc4;
    border-left-color: #00897b;
}
.callout.library-shortcut .callout-title { color: #00695c; }
.callout.library-shortcut .callout-title::after {
    content: "A popular library that accomplishes the same task in fewer lines. Install and try it.";
}
.callout.library-shortcut pre { margin-top: 0.75rem; }

/* 13. Numeric Example (warm amber/orange) */
.callout.numeric-example {
    background: linear-gradient(135deg, #fff8e1, #fff3e0);
    border-color: #ffcc80;
    border-left-color: #ff9800;
}
.callout.numeric-example .callout-title { color: #e65100; }
.callout.numeric-example .callout-title::before { content: "🔢 "; }
.callout.numeric-example .callout-title::after {
    content: "A worked numerical example showing the math in action.";
}
.callout .callout-label {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.4rem;
}
.callout.library-shortcut .callout-label { color: #00695c; }
.callout.key-takeaway .callout-title::after {
    content: "End-of-section bulleted recap. Use a short ul/ol that summarizes the multiple takeaways from the section. For a single inline aha-moment paragraph, use key-insight instead.";
}

/* 14. Self-Check / Quiz (indigo) */
.callout.self-check {
    background: linear-gradient(135deg, #e8eaf6, #e3f2fd);
    border: 1px solid #7986cb;
    border-left: 5px solid #3949ab;
}
.callout.self-check .callout-title { color: #283593; }
.callout.self-check .callout-title::after {
    content: "Test your understanding before moving on.";
}
.callout.self-check .quiz-question { margin: 1.2rem 0 0.5rem; font-weight: normal; }

/* Self-check collapsible wrapper (added by book.js) */
.selfcheck-collapse {
    margin: 1.5rem 0;
    border: 1px solid #7986cb;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(57,73,171,0.04), rgba(63,81,181,0.02));
}
.selfcheck-collapse-summary {
    text-align: left;
    cursor: pointer;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(135deg, rgba(57,73,171,0.12), rgba(57,73,171,0.06));
    font-family: sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #283593;
    user-select: none;
    list-style: none;
    letter-spacing: 0.3px;
}
.selfcheck-collapse-summary::before {
    content: "\25B6\00a0";
    font-size: 0.75rem;
    transition: transform 0.2s;
    display: inline-block;
}
.selfcheck-collapse[open] .selfcheck-collapse-summary::before {
    transform: rotate(90deg);
}
.selfcheck-collapse-summary::-webkit-details-marker { display: none; }
.selfcheck-collapse .callout.self-check {
    margin: 0;
    border: none;
    border-radius: 0;
    border-left: 5px solid #3949ab;
}

/* Collapsible real-world scenario / practical example */
.scenario-collapse {
    margin: 1.5rem 0;
    border: 1px solid rgba(0,121,107,0.25);
    border-left: 4px solid #00897b;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
    background: #fff;
}
.scenario-collapse-summary {
    cursor: pointer;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(135deg, #e0f2f1, #f1f8e9);
    font-family: sans-serif;
    font-size: 0.93rem;
    font-weight: 400;
    color: #004d40;
    user-select: none;
    list-style: none;
    line-height: 1.5;
}
.scenario-collapse-summary strong {
    font-weight: 700;
    color: #00695c;
}
.scenario-collapse-summary::before {
    content: "\25B6\00a0";
    font-size: 0.7rem;
    transition: transform 0.2s;
    display: inline-block;
}
.scenario-collapse[open] .scenario-collapse-summary::before {
    transform: rotate(90deg);
}
.scenario-collapse-summary::-webkit-details-marker { display: none; }
.scenario-collapse .callout.practical-example {
    margin: 0;
    border: none;
    border-radius: 0;
    border-top: 1px solid rgba(0,121,107,0.12);
}

/* Research Frontier collapsible: matches the research-frontier callout
 * theme (purple-blue). Closed state acts like a callout summary; open
 * state reveals the full callout body. */
.frontier-collapse {
    margin: 1.5rem 0;
    border: 1px solid rgba(74,85,162,0.25);
    border-left: 4px solid #4a55a2;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
    background: #fff;
}
.frontier-collapse-summary {
    cursor: pointer;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(135deg, #f3effc, #eceaf8);
    font-family: sans-serif;
    font-size: 0.93rem;
    font-weight: 400;
    color: #2e3990;
    user-select: none;
    list-style: none;
    line-height: 1.5;
}
.frontier-collapse-summary strong { font-weight: 700; color: #2e3990; }
.frontier-collapse-summary::before {
    content: "\25B6\00a0";
    font-size: 0.7rem;
    transition: transform 0.2s;
    display: inline-block;
}
.frontier-collapse[open] .frontier-collapse-summary::before {
    transform: rotate(90deg);
}
.frontier-collapse-summary::-webkit-details-marker { display: none; }
.frontier-collapse .callout.research-frontier {
    margin: 0;
    border: none;
    border-radius: 0;
    border-top: 1px solid rgba(74,85,162,0.12);
}

/* Library Shortcut code collapse: the prose + pip install + tooltip stay
 * visible; only the code-block-wrapper inside the shortcut collapses. */
.shortcut-code-collapse {
    margin: 0.75rem 0 0 0;
}
.shortcut-code-collapse-summary {
    cursor: pointer;
    padding: 0.5rem 0.85rem;
    background: #f5f1ed;
    border: 1px solid #d9c9b1;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #6e4f1d;
    user-select: none;
    list-style: none;
    display: inline-block;
}
.shortcut-code-collapse-summary::before {
    content: "\25B6\00a0";
    font-size: 0.65rem;
    transition: transform 0.2s;
    display: inline-block;
}
.shortcut-code-collapse[open] .shortcut-code-collapse-summary::before {
    transform: rotate(90deg);
}
.shortcut-code-collapse[open] .shortcut-code-collapse-summary {
    background: #ede5d5;
}
.shortcut-code-collapse-summary::-webkit-details-marker { display: none; }
.shortcut-code-collapse .code-block-wrapper {
    margin-top: 0.5rem;
}

/* Library-shortcut <details class="code-collapsible">: collapses the code
 * snippet so the callout reads as prose by default. Same visual language as
 * .shortcut-code-collapse but applied to the new class name authored by
 * scripts/_collapse_library_shortcut_code.py. */
.callout.library-shortcut .code-collapsible {
    margin: 0.75rem 0 0 0;
}
.callout.library-shortcut .code-collapsible > summary {
    cursor: pointer;
    padding: 0.5rem 0.85rem;
    background: #f5f1ed;
    border: 1px solid #d9c9b1;
    border-radius: 6px;
    font-family: sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #6e4f1d;
    user-select: none;
    list-style: none;
    display: inline-block;
}
.callout.library-shortcut .code-collapsible > summary::before {
    content: "\25B6\00a0";
    font-size: 0.65rem;
    transition: transform 0.2s;
    display: inline-block;
}
.callout.library-shortcut .code-collapsible[open] > summary::before {
    transform: rotate(90deg);
}
.callout.library-shortcut .code-collapsible[open] > summary {
    background: #ede5d5;
}
.callout.library-shortcut .code-collapsible > summary::-webkit-details-marker {
    display: none;
}
.callout.library-shortcut .code-collapsible .code-block-wrapper {
    margin-top: 0.5rem;
}
.callout.library-shortcut .code-collapsible .code-caption {
    margin-top: 0.4rem;
    font-size: 0.85rem;
}

/* 15. Lab (green-cyan) */
.callout.lab {
    background: linear-gradient(135deg, #e0f2f1, #e8f5e9);
    border: 1px solid #80cbc4;
    border-left: 5px solid #00897b;
}
.callout.lab .callout-title { color: #00695c; }
.callout.lab .callout-title::after {
    content: "A guided hands-on lab with step-by-step instructions. Code along to build your understanding.";
}

/* Citation lines inside callouts */
.callout .citation,
p.citation {
    font-size: 0.88rem;
    color: #666;
    margin-top: 0.5rem;
}

/* ============================================================
   Code blocks
   ============================================================ */
pre {
    background: var(--code-bg);
    color: var(--code-text);
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.2rem 0;
    font-family: monospace;
    font-size: 0.92rem;
    line-height: 1.6;
}
code {
    font-family: monospace;
    font-size: 0.92em;
}
p code, li code {
    background: #eef;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    color: var(--accent);
}

/* Prism.js integration: prevent pre>code from inheriting inline-code styles */
pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
}

.code-output {
    /* Wave D3 (May 2026): tone the output block down from the previous
     * green-accent treatment, which clashed with the rest of the book's
     * neutral code-block palette. Now: subtle cool-gray surface, no
     * vertical accent bar. Output blocks still read as distinct from
     * code (different background, "Output" label above), but they no
     * longer pull the eye away from the code itself. */
    background: #f4f6fa;
    color: #1a1a2e;
    padding: 1rem 1.5rem;
    border-radius: 0 0 8px 8px;
    margin: -0.5rem 0 0.3rem;
    font-family: monospace;
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-x: auto;
}
.code-output::before {
    content: "Output";
    display: block;
    font-family: sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #5a6c80;
    margin-bottom: 0.5rem;
}
/* When output sits between pre and caption, tighten spacing */
.code-output + .code-caption {
    margin-top: 0.3rem;
}

/* Code output collapsible wrapper (added by book.js) */
/* Unified code block wrapper: groups code, output, and caption */
.code-block-wrapper {
    margin: 1.2rem 0;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.code-block-wrapper > .code-collapse {
    margin: 0;
    border: none;
    border-radius: 0;
}
.code-block-wrapper > pre {
    margin: 0;
    border-radius: 0;
}
.code-block-wrapper > .output-collapse {
    margin: 0;
    border-radius: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.code-block-wrapper > .code-output {
    margin: 0;
    border-radius: 0;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.code-block-wrapper > .code-caption {
    margin: 0;
    border-radius: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.output-collapse {
    margin: -0.5rem 0 0.3rem;
    border-left: 4px solid #7ab648;
    border-radius: 0 8px 8px 0;
    background: #f8f8f4;
}
.output-collapse-summary {
    cursor: pointer;
    padding: 0.5rem 1rem;
    font-family: sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #5a8f3a;
    user-select: none;
    list-style: none;
}
.output-collapse-summary::before {
    content: "\25B6\00a0";
    font-size: 0.7rem;
    transition: transform 0.2s;
    display: inline-block;
}
.output-collapse[open] .output-collapse-summary::before {
    transform: rotate(90deg);
}
.output-collapse-summary::-webkit-details-marker { display: none; }
.output-collapse .code-output {
    margin: 0;
    border-left: none;
    border-radius: 0;
    border-top: 1px solid rgba(122,182,72,0.2);
}
.output-collapse .code-output::before {
    display: none;
}
.output-collapse + .code-caption {
    margin-top: 0.3rem;
}

.code-caption {
    font-family: sans-serif;
    font-size: 0.88rem;
    color: #333;
    text-align: center;
    margin-top: 0.3rem;
    margin-bottom: 1.8rem;
    padding: 0.4rem 1rem;
    line-height: 1.5;
    font-style: italic;
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
}
.code-caption strong {
    font-style: normal;
    color: var(--accent);
    font-weight: 700;
}

/* When a code-caption directly follows a <pre> (the most common case),
 * visually attach it to the bottom edge of the code block — no top margin,
 * matching width and corner radius. Same logic as the EPUB override. */
pre + .code-caption,
.code-block-wrapper > pre + .code-caption {
    margin-top: 0;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background: rgba(0,0,0,0.04);
}

/* Bold/strong inside Prism code blocks: ensure visibility */
pre[class*="language-"] b,
pre[class*="language-"] strong {
    color: #f9e2af;
    font-weight: 700;
}

/* Code blocks inside callouts: ensure contrast */
.callout pre[class*="language-"] {
    background: #1e1e2e;
    color: #cdd6f4;
}
.callout .code-caption {
    color: #333;
    background: rgba(255,255,255,0.85);
}

.code-block-group {
    margin: 1.5rem 0 2rem;
}

/* ----- Diagrams ----- */
.diagram-container {
    margin: 2rem 0;
    text-align: center;
}
.diagram-container svg {
    width: 100%;
    max-width: 100%;
    height: auto;
}
/* W24 fix: PNGs inside .diagram-container had no max-width rule, only
 * the <svg> sibling did. Result: raster diagrams rendered at native
 * pixel width (up to 5400+ px for the worst panoramas), overflowing
 * the page horizontally on every reader narrower than the source PNG.
 * max-height also caps vertical extent for tall figures. */
.diagram-container img {
    max-width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}
.diagram-caption {
    font-family: sans-serif;
    font-size: 0.88rem;
    color: #555;
    text-align: center;
    margin-top: 0.5rem;
    line-height: 1.5;
    font-style: italic;
}
.diagram-caption strong {
    font-style: normal;
    color: var(--accent);
    font-weight: 700;
}

/* ----- Illustrations ----- */
.illustration {
    margin: 2rem auto;
    text-align: center;
}
/* Image sizing rules (W24, audit fix).
 *
 * Problem: figures with explicit width="..." height="..." HTML attributes
 * (set from source-image pixel dimensions) were stretching vertically and
 * clipping. max-width:100% alone caps width but lets height stay at its
 * attribute value, so a 1024x1024 figure capped to 800px wide stays 1024
 * tall, distorting the aspect ratio and overflowing the page.
 *
 * Fix: height:auto so aspect is preserved when max-width kicks in.
 * max-height:80vh prevents very tall figures from running off the page.
 * The same rule on a broader `figure img` selector catches figures that
 * don't use the .illustration class. */
.illustration img,
figure img {
    max-width: 100%;
    height: auto;
    max-height: 80vh;
    object-fit: contain;
}
.illustration img {
    border-radius: 8px;
}
/* Inline SVGs inside figure containers must be block-level and
 * horizontally centered. Without `display:block + margin:0 auto` the
 * default inline rendering leaves the SVG left-aligned even though the
 * surrounding .illustration / .diagram has text-align:center. The
 * text-align rule only affects inline content; large inline SVGs need
 * the margin auto rule explicitly. */
.illustration svg,
figure svg,
.diagram svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
/* Global fallback: every <img> in body content respects page width and
 * keeps aspect ratio. This is the catch-all for images not wrapped in
 * <figure> or .illustration (e.g. inline avatars in callouts). The
 * !important is needed because some pages set width/height as attrs
 * which would otherwise win on certain reflow renderers. */
.content img {
    max-width: 100%;
    height: auto;
}
/* ----- Figure captions ----- */
.illustration figcaption,
figcaption {
    text-align: center;
    font-family: sans-serif;
    font-size: 0.88rem;
    color: #555;
    margin-top: 0.5rem;
    line-height: 1.5;
    font-style: italic;
}
figcaption strong {
    font-style: normal;
    color: var(--accent);
    font-weight: 700;
}
.figure-source {
    display: block;
    font-size: 0.78rem;
    font-style: normal;
    color: #888;
    margin-top: 0.25rem;
}

/* ----- Tables: content-aware column sizing (W24 audit fix) -----
 *
 * Every content table in the book uses table-layout:auto so columns get
 * sized to their content. Short-content columns (numbering, percentages,
 * single-word tags) stay narrow; long-prose columns absorb the leftover
 * width and wrap to fewer lines. This applies to bare <table> in chapter
 * prose and to <table class="complex-table">; the .comparison-table rule
 * below repeats the same setting with extra commentary. */
.content table,
table.complex-table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ----- Comparison Tables ----- */
.comparison-table {
    margin: 1.5rem 0;
    border-radius: 8px;
    /* overflow-x:auto allows horizontal scroll on mobile when the table is
     * wider than the container; overflow-y:visible avoids cutting off the
     * gradient title bar when scrolling. (Was `overflow: hidden` before,
     * which clipped wide tables on phones and Kindle.) */
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid #d8dce6;
    background: #fff;
}
.comparison-table table {
    /* table-layout:auto lets the browser size columns by content width.
     * Result: short columns like "v1, v2, v3, v4" or "72%, 81%, 89%, 93%"
     * stay narrow, leaving the leftover horizontal space for verbose
     * columns ("Change", "Observation") that have actual prose to fit.
     * Previously this was `fixed`, which forced equal-width columns and
     * wasted space on short columns while wrapping the long ones to
     * three or four lines. word-wrap/overflow-wrap remain so a single
     * very long token in a content cell still breaks instead of
     * forcing horizontal overflow. The parent .comparison-table has
     * overflow-x:auto for the edge case where total content still
     * exceeds container width. */
    table-layout: auto;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.comparison-table-title {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #fff;
    padding: 0.7rem 1.2rem;
    font-family: sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: help;
    position: relative;
}
.comparison-table-title::before {
    content: '\2696';
    font-size: 1.1rem;
}
.comparison-table-title::after {
    content: "Side-by-side comparison of tools, techniques, or approaches. Hover column headers for details.";
    position: absolute;
    left: 0;
    top: 100%;
    background: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: normal;
    white-space: normal;
    max-width: 320px;
    line-height: 1.4;
    z-index: 100;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.comparison-table-title:hover::after { opacity: 1; }
.comparison-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.comparison-table th {
    background: #f0f2f8;
    padding: 0.6rem 0.8rem;
    text-align: left;
    font-weight: 700;
    color: #1a1a2e;
    border-bottom: 2px solid #d8dce6;
    font-size: 0.85rem;
}
.comparison-table td {
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #eee;
    vertical-align: top;
    line-height: 1.5;
}
.comparison-table tr:last-child td {
    border-bottom: none;
}
.comparison-table tr:nth-child(even) td {
    background: #f8f9fc;
}
.comparison-table .winner {
    color: #27ae60;
    font-weight: 700;
}
.comparison-table .caution {
    color: #e67e22;
    font-weight: 700;
}

/* ============================================================
   Bibliography (card-based)
   ============================================================ */
/* Collapsible bibliography wrapper (applied by book.js: collapsed by default) */
.bib-collapse {
    margin-top: 3rem;
    border: 1px solid rgba(15,52,96,0.15);
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(15,52,96,0.04), rgba(233,69,96,0.02));
}
.bib-collapse-summary {
    cursor: pointer;
    padding: 0.8rem 1.2rem;
    background: linear-gradient(135deg, rgba(15,52,96,0.08), rgba(15,52,96,0.04));
    font-family: sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent, #0f3460);
    user-select: none;
    list-style: none;
    letter-spacing: 0.3px;
}
.bib-collapse-summary::before {
    content: "\25B6\00a0";
    font-size: 0.75rem;
    transition: transform 0.2s;
    display: inline-block;
}
.bib-collapse[open] .bib-collapse-summary::before {
    transform: rotate(90deg);
}
.bib-collapse-summary::-webkit-details-marker { display: none; }
.bib-collapse .bibliography {
    margin-top: 0;
    padding-top: 0.5rem;
    border: none;
    border-radius: 0;
}

/* Canonical .bibliography-collapsible: closed state IS a callout box,
   typeset identically to other callouts (Segoe UI 0.95rem, 0.3px letter-
   spacing, 700 weight, colored title) + an icon and a tooltip on hover. */
.bibliography-collapsible {
    margin-top: 2.5rem;
    border: 1px solid #d7c79e;
    border-left: 5px solid #a67c1a;
    border-radius: 0 8px 8px 0;
    background: linear-gradient(135deg, #fff8e1, #fef3c7);
    padding: 0;
    overflow: visible;  /* allow tooltip to escape */
    position: relative;
}
.bibliography-collapsible > summary {
    list-style: none;
    cursor: help;
    padding: 1rem 1.25rem;
    /* Match canonical .callout-title typesetting */
    font-family: sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    color: #6b4f0f;
    user-select: none;
    position: relative;
    /* Flexbox so the chevron + book icon + label share a single baseline,
     * matching the .callout .callout-title pattern set elsewhere. */
    display: flex;
    align-items: center;
    column-gap: 0.4em;
}
.bibliography-collapsible > summary::-webkit-details-marker { display: none; }
.bibliography-collapsible > summary::before {
    /* Book icon (matches the canonical bib-collapse-summary chevron-plus-book) */
    content: "\25B6\00a0\1F4DA";  /* ▶ + 📚 */
    flex: 0 0 auto;
    font-size: 0.9rem;
    transition: transform 0.2s ease;
    color: #a67c1a;
    line-height: 1;
}
.bibliography-collapsible[open] > summary::before {
    transform: rotate(90deg) translateX(-0.05em);
}
/* Tooltip on hover, matching the .callout .callout-title::after pattern */
.bibliography-collapsible > summary::after {
    content: "Further reading: peer-reviewed papers, official docs, and tutorials curated for this section.";
    position: absolute;
    left: 0;
    top: 100%;
    background: #333;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-family: sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0;
    white-space: normal;
    max-width: 320px;
    line-height: 1.4;
    z-index: 100;
    margin-top: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.bibliography-collapsible > summary:hover::after { opacity: 1; }
.bibliography-collapsible > summary:hover { background: rgba(166, 124, 26, 0.05); }
.bibliography-collapsible > section.bibliography {
    padding: 0 1.25rem 1rem;
}

/* URL overflow fix: long URLs/paths in inline <code> should wrap on narrow
 * screens (40.3.3 pattern: wss://... URL blew past page width). */
.content p code,
.content li code,
.content .callout p code,
.content .callout li code,
.content a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Original rule continues: */
.bibliography-collapsible .bibliography {
    margin-top: 0;
    padding-top: 0.5rem;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.bibliography {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(15,52,96,0.04), rgba(233,69,96,0.02));
    border-radius: 8px;
    border: 1px solid rgba(15,52,96,0.1);
}
.bibliography-title {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}
.bibliography-title::before {
    content: "\1F4DA\00a0";
    font-size: 1.1em;
    color: var(--accent);
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--highlight);
}
.bib-category {
    font-family: sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--highlight);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 1.5rem 0 0.8rem;
}
.bib-entry-card {
    padding: 0.8rem 1rem;
    margin-bottom: 0.8rem;
    background: white;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}
.bib-entry-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.bib-ref {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}
.bib-ref a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
}
.bib-ref a:hover { color: var(--highlight); }
.bib-annotation {
    font-size: 0.88rem;
    color: var(--text-light);
    margin: 0.4rem 0 0;
    line-height: 1.5;
}
.bib-meta {
    display: inline-block;
    font-family: sans-serif;
    font-size: 0.72rem;
    background: rgba(15,52,96,0.08);
    color: var(--accent);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Aliases for backward-compatible class names */
.bib-entry { /* alias for bib-entry-card */
    padding: 0.8rem 1rem;
    margin-bottom: 0.8rem;
    background: white;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}
.bib-entry:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.bib-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Cross-reference INLINE links: <a class="cross-ref" href="...">Section X</a>.
 *
 * Critical: anchor the selector to `a.cross-ref` so it does NOT match
 * <div class="callout cross-ref"> (which also carries the cross-ref
 * class for See Also callouts). Without the `a` anchor, hovering the
 * See Also callout would tint its entire prose body red via the hover
 * color rule below. */
a.cross-ref {
    color: #1a6fb5;
    text-decoration: none;
    border-bottom: 1.5px dotted rgba(26, 111, 181, 0.5);
}
a.cross-ref:hover {
    color: var(--highlight);
    border-bottom: 2px solid var(--highlight);
}

/* Glossary page elements */
.glossary-list { list-style: none; padding: 0; }
.glossary-entry { padding: 0.8rem 0; border-bottom: 1px solid #f0f0f0; }
.glossary-term { font-weight: 700; color: var(--primary); font-size: 1.05rem; }
.glossary-def { margin-top: 0.3rem; font-size: 0.95rem; line-height: 1.6; }
.glossary-xref { font-size: 0.85rem; color: var(--text-light); margin-top: 0.2rem; }
.glossary-xref a { color: var(--accent); }

/* Part overview on part index pages (mirrors .overview for chapter indexes) */
.part-overview {
    max-width: 750px;
    margin: 2rem auto 2.5rem;
    padding: 1.6rem 2rem;
    background: linear-gradient(135deg, rgba(15,52,96,0.05), rgba(15,52,96,0.02));
    border: 1px solid rgba(15,52,96,0.12);
    border-left: 4px solid var(--accent);
    border-radius: 0 10px 10px 0;
    font-size: 0.97rem;
    line-height: 1.75;
}
.part-overview h2 {
    font-family: sans-serif;
    font-size: 1.25rem;
    color: var(--accent);
    margin: 0 0 0.8rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(15,52,96,0.15);
}
.part-overview p { text-align: left; }
.part-overview p:last-child { margin-bottom: 0; }

/* Section break (appendices) */
.section-break { margin: 2rem 0; border-top: 1px solid #e0e0e0; }

/* ----- What's Next ----- */
.whats-next {
    background: linear-gradient(135deg, #e3f2fd, #e8eaf6);
    border: 1px solid #90caf9;
    border-left: 4px solid #1565c0;
    border-radius: 10px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
}
.whats-next h2,
.whats-next h3 {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    color: #1565c0;
    margin: 0 0 0.5rem;
}
.whats-next p:last-child { margin-bottom: 0; }
.whats-next h2::before,
.whats-next h3::before {
    content: "\27A1\00a0";
    font-size: 1.1em;
}

/* Reset heading margins inside all content boxes (prevents h2's 3rem top margin from creating empty space) */
.callout h2, .callout h3,
.prereqs h2,
.prerequisites h2,
.objectives h2, .objectives h3,
.outcomes h2, .outcomes h3,
.whats-next h2, .whats-next h3 {
    margin-top: 0;
}

/* nav.chapter-nav: unified above in ".chapter-nav, nav.chapter-nav" block */

/* ----- Tables ----- */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
th, td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
th {
    background: var(--primary);
    color: white;
    font-family: sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
tr:nth-child(even) { background: #f8f8f8; }

/* ----- Quiz / Check Your Understanding (legacy, now .callout.self-check) ----- */
.quiz-question { margin: 1.2rem 0 0.5rem; font-weight: normal; }
details { margin: 0.5rem 0 1.2rem; }
summary {
    cursor: pointer;
    color: var(--accent);
    font-family: sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.3rem 0;
}
summary:hover { text-decoration: underline; }
details .answer {
    padding: 0.8rem 1rem;
    background: #eef;
    border-radius: 6px;
    margin-top: 0.5rem;
}

/* ----- Key Takeaways (styled like callout) ----- */
.takeaways {
    background: linear-gradient(135deg, #e0f2f1, #e0f7fa);
    border: 1px solid #80cbc4;
    border-left: 5px solid #00897b;
    border-radius: 0 8px 8px 0;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
}
.takeaways h2,
.takeaways h3 {
    font-family: sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    border-bottom: none;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #00695c;
}
.takeaways h2::before,
.takeaways h3::before {
    content: '';
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.4em;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('icons/callout-key-insight.png');
}
.takeaways ul { margin-top: 0.5rem; }
.takeaways li:last-child { margin-bottom: 0; }

/* ----- Labs ----- */
.lab {
    background: linear-gradient(135deg, #e8eaf6, #e3f2fd);
    border: 2px solid var(--accent);
    border-radius: 10px;
    padding: 2rem;
    margin: 2.5rem 0;
}
.lab-meta {
    font-family: sans-serif;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 1rem;
}
.lab-step {
    background: white;
    border-radius: 8px;
    padding: 1.2rem;
    margin: 1rem 0;
    border: 1px solid rgba(0,0,0,0.06);
}
.lab-expected {
    background: #f1f8e9;
    border-left: 4px solid #43a047;
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}
.lab-stretch {
    background: #fff8e1;
    border-left: 4px solid #f57c00;
    padding: 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
    margin: 1rem 0;
}

/* Lab sub-elements */
.lab-objective {
    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);
    border-left: 4px solid #1e88e5;
    padding: 1rem 1.2rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Collapsible code blocks (applied by book.js: long blocks collapsed, short blocks open) */
.code-collapse {
    margin: 1rem 0;
    border: 1px solid rgba(55, 71, 133, 0.2);
    border-left: 4px solid #374785;
    border-radius: 0 8px 8px 0;
    overflow: hidden;
}
.code-collapse summary {
    cursor: pointer;
    padding: 0.6rem 1rem 0.6rem 2.8rem;
    background: linear-gradient(135deg, #eef0f7, #e8eaf6);
    font-family: sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: #374785;
    user-select: none;
    list-style: none;
    position: relative;
}
.code-collapse summary::before {
    content: "\25B6";
    font-size: 0.55rem;
    transition: transform 0.2s;
    display: inline-block;
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #374785;
}
.code-collapse[open] summary::before {
    transform: translateY(-50%) rotate(90deg);
}
.code-collapse-icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
    margin-right: 0.35em;
    opacity: 0.85;
}
.code-collapse summary::-webkit-details-marker { display: none; }
.code-collapse pre {
    margin: 0;
    border-radius: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.code-collapse .code-output {
    margin: 0;
    border-top: 1px solid rgba(0,0,0,0.06);
}
.code-collapse .code-caption {
    margin: 0;
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(0,0,0,0.06);
}

.lab-skills {
    margin-bottom: 1.2rem;
}
.lab-skills h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; color: #555; margin-bottom: 0.5rem; }
.lab-skills ul { padding-left: 1.5rem; }
.lab-skills li { margin-bottom: 0.3rem; font-size: 0.92rem; }

.lab-prereqs {
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin-bottom: 1.2rem;
    font-size: 0.9rem;
}
.lab-prereqs h4 { font-size: 0.9rem; margin-bottom: 0.5rem; }
.lab-prereqs code { background: #e8e8e8; padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.85rem; }

.lab-solution summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--accent, #0f3460);
    padding: 0.5rem 0;
    font-size: 0.95rem;
}
.lab-solution summary:hover { color: var(--highlight, #e94560); }

/* Collapsible lab wrapper (applied by book.js: collapsed by default) */
.lab-collapse {
    margin: 2rem 0;
    border: 1px solid #80cbc4;
    border-left: 5px solid #00897b;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(135deg, #e0f2f1, #e8f5e9);
}
.lab-collapse-summary {
    cursor: pointer;
    padding: 0.9rem 1.2rem;
    background: linear-gradient(135deg, #e0f2f1, #e8f5e9);
    color: #00695c;
    font-family: sans-serif;
    font-size: 1rem;
    font-weight: 700;
    user-select: none;
    list-style: none;
    border-bottom: 1px solid rgba(0,121,107,0.15);
    /* Standardize on left alignment - don't inherit center from any
     * enclosing context. */
    text-align: left;
}
.lab-collapse-summary::before {
    content: "\25B6\00a0";
    font-size: 0.8rem;
    transition: transform 0.2s;
    display: inline-block;
}
.lab-collapse[open] .lab-collapse-summary::before {
    transform: rotate(90deg);
}
.lab-collapse-summary::-webkit-details-marker { display: none; }
.lab-collapse-summary:hover {
    background: linear-gradient(135deg, #c8e6c9, #b2dfdb);
}
.lab-collapse .lab-collapse-icon {
    margin-right: 0.3rem;
}
.lab-collapse .lab {
    border: none;
    margin: 0;
    border-radius: 0;
}
.lab-collapse .lab-title {
    margin: 0;
    padding: 0.8rem 1.2rem 0;
    font-size: 1rem;
    color: #00695c;
}

/* ----- Math (KaTeX-powered) ----- */
.math {
    white-space: nowrap;
    background: #f4f6fa;
    padding: 0.1em 0.3em;
    border-radius: 3px;
    border: 1px solid #e4e7ef;
    font-size: 0.95em;
    vertical-align: baseline;
    line-height: inherit;
}
.math .katex { font-size: 1em; }
.math-block {
    position: relative;
    background: linear-gradient(135deg, #f8f9fc 0%, #f0f2f8 100%);
    border: 1px solid #d8dce6;
    border-left: 4px solid var(--accent, #0f3460);
    border-radius: 6px;
    padding: 1.2rem 1.5rem;
    margin: 1.5rem 0;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.8;
    overflow-x: auto;
}
.math-block .katex-display { margin: 0; }
.math-block .katex-display > .katex { font-size: 1.1em; }
.math-block-label {
    display: block;
    text-align: left;
    font-family: sans-serif;
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent, #0f3460);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e0e3ea;
}
.math-block p {
    margin: 0.4rem 0;
}
.math-block .math-where {
    display: block;
    text-align: left;
    font-style: normal;
    font-size: 0.92rem;
    color: #555;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed #d8dce6;
    line-height: 1.6;
}
.math-block .math-where strong {
    font-style: italic;
    font-family: serif;
    color: #333;
}

/* ----- Syntax highlighting ----- */
.kw { color: #cba6f7; font-weight: bold; }
.fn { color: #89b4fa; }
.st { color: #a6e3a1; }
.cm { color: #6c7086; font-style: italic; }
.nu { color: #fab387; }
.op { color: #89dceb; }
.va { color: #f38ba8; }

/* ============================================================
   Module index page overrides
   ============================================================ */
.chapter-index .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 3rem 2rem;
}
/* ============================================================
   Responsive: Tablet (1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .content { max-width: 100%; padding: 2rem 1.5rem; }
    .chapter-header { padding: 0 1.5rem 2.5rem; }
    .chapter-header h1 { font-size: 2rem; }
    .header-nav { font-size: 0.78rem; }
    .epigraph, .prereqs, .prerequisites { max-width: 100%; }
    svg { max-width: 100%; height: auto; }
    .illustration img { max-width: 100%; height: auto; }
    .section-card { padding: 1rem 1.2rem; }
    .chapter-card { margin-bottom: 1.2rem; }
}

/* ============================================================
   Responsive: iPad Mini / small tablet (768px)
   ============================================================ */
@media (max-width: 768px) {
    .content { padding: 1.5rem 1rem; }
    .chapter-header { padding: 0 1rem 2rem; }
    .chapter-header h1 { font-size: 1.6rem; }
    .chapter-header .subtitle,
    .chapter-header .chapter-subtitle { font-size: 0.95rem; }
    .header-nav { padding: 0.5rem 0.2rem; margin: 0 -0.2rem 1.2rem; }
    .header-nav .book-title-link { font-size: 0.72rem; max-width: 55%; }
    .header-nav .toc-link { font-size: 0.72rem; padding: 0.2rem 0.4rem; }
    body { font-size:1rem; line-height: 1.75; }
    h2 { font-size: 1.5rem; margin-top: 2rem; }
    h3 { font-size: 1.2rem; }
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    pre { overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 0.82rem; }
    .callout { margin-left: 0; margin-right: 0; padding: 1rem 1.2rem; }
    .math-block { padding: 0.8rem 1rem; font-size: 1rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .objectives, .prereqs, .prerequisites { padding: 1rem 1.2rem; }
    .overview { padding: 1rem 1.2rem; }
    .section-card { flex-direction: column; gap: 0.4rem; padding: 0.9rem 1rem; }
    .section-num { min-width: auto; }
    .chapter-card-header { padding: 0.8rem 1rem; }
    .chapter-card-body { padding: 1rem; }
    .chapter-nav, nav.chapter-nav {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .chapter-nav a.next, .chapter-nav a:last-child:not(.up):not(.prev) {
        justify-content: center;
        text-align: center;
    }
    .chapter-nav a.prev, .chapter-nav a:first-child:not(.up):not(.next) {
        justify-content: center;
        text-align: center;
    }
    .chapter-nav a.up, .chapter-nav a:nth-child(2) {
        order: -1;
    }
    .comparison-table { font-size: 0.82rem; overflow-x: auto; }
    .comparison-table th, .comparison-table td { padding: 0.4rem 0.6rem; }
    .bibliography { padding: 1.5rem 1rem; }
    .whats-next { padding: 1.2rem 1rem; }
    .part-label { font-size: 0.85rem; }
    .chapter-label { font-size: 0.78rem; letter-spacing: 2px; }
    .illustration figcaption { font-size: 0.85rem; }
}

/* ============================================================
   Responsive: Mobile (480px)
   ============================================================ */
@media (max-width: 480px) {
    .content { padding: 1rem 0.75rem; }
    .chapter-header { padding: 0 0.75rem 1.5rem; }
    .chapter-header h1 { font-size: 1.4rem; }
    .epigraph, .prereqs, .prerequisites { max-width: 100%; margin-left: 0; margin-right: 0; }
    .header-nav .book-title-link { font-size: 0.68rem; max-width: 50%; }
    .header-nav .toc-link { font-size: 0.68rem; }
    .callout { padding: 0.8rem 1rem; font-size: 0.92rem; }
    .section-card { border-left-width: 3px; }
    .section-desc { font-size: 0.85rem; }
    pre { font-size: 0.78rem; padding: 0.8rem; }
    .code-caption { font-size: 0.8rem; }
    .bib-entry-card, .bib-entry { padding: 0.8rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }
}

/* ============================================================
   Print
   ============================================================
   v13.5: EPUB readers (Calibre, Kindle KFX) honor @media print
   rules and applied these unwanted transforms in normal EPUB
   reading. Specifically the navy chapter-header banner was
   stripped, math-block gradient replaced with flat gray, and
   .whats-next was hidden (since-fixed). Keep only the rules
   that genuinely apply to paper printing (hidden nav chrome
   isn't useful in either context but is now also handled in
   epub_overrides). Move visual style changes OUT of @media
   print so EPUB readers don't apply them. */
@media print {
    .header-nav { display: none; }
    .chapter-nav, nav.chapter-nav { display: none; }
    .header-search { display: none; }
    .callout { break-inside: avoid; }
    pre { white-space: pre-wrap; word-wrap: break-word; }
    a[href]::after { content: ""; }   /* suppress URL-after-link addition */
}

/* ----- Nav footer (legacy class) ----- */
.nav-footer {
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 1px solid #e0e0e0;
    font-size: 0.95rem;
}

.nav-footer a {
    color: var(--primary, #0f3460);
    text-decoration: none;
}

.nav-footer a:hover {
    text-decoration: underline;
}

/* ============================================================
   Level Badges (difficulty indicators on section headings)
   Icons match the index.html legend system
   ============================================================ */

/* --- Level badges: small inline pills shown on section cards & headings --- */
.level-badge {
    display: inline-block;
    font-family: sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 0.4rem;
    line-height: 1.2;
    cursor: help;
    border: 1px solid transparent;
    transition: transform 0.15s ease;
}
.level-badge:hover { transform: scale(1.05); }

.level-badge.basic,
.level-badge.entry,
.level-badge.level-entry {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #a5d6a7;
}
.level-badge.intermediate,
.level-badge.level-intermediate {
    background: #fff8e1;
    color: #ef6c00;
    border-color: #ffcc80;
}
.level-badge.advanced,
.level-badge.level-advanced {
    background: #fbe9e7;
    color: #c62828;
    border-color: #ef9a9a;
}
.level-badge.research {
    background: #ede7f6;
    color: #4527a0;
    border-color: #b39ddb;
}

/* Place badge on its own row inside the flex section-card layout */
.section-card .level-badge {
    flex-basis: 100%;
    align-self: flex-start;
    margin-left: 0;
    margin-top: 0.2rem;
}

/* --- Exercise-type badges: Gemini-generated icons, text as tooltip --- */
.exercise-type {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0;            /* hide text */
    color: transparent;       /* hide text */
    padding: 0;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 0.4rem;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: help;
    position: relative;
    border: 2px solid;
    transition: transform 0.15s ease;
}
.exercise-type:hover { transform: scale(1.2); }
/* Tooltip on hover */
.exercise-type::after {
    content: attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    font-size: 0.7rem;
    font-family: sans-serif;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10;
}
.exercise-type:hover::after { opacity: 1; }

.exercise-type.conceptual {
    background-color: #e8eaf6;
    border-color: #9fa8da;
    background-image: url('icons/conceptual-exercise-icon.png');
}
.exercise-type.coding {
    background-color: #e0f2f1;
    border-color: #80cbc4;
    background-image: url('icons/coding-exercise-icon.png');
}
.exercise-type.analysis {
    background-color: #f3e5f5;
    border-color: #ce93d8;
    background-image: url('icons/analysis-exercise-icon.png');
}
.exercise-type.discussion {
    background-color: #fff3e0;
    border-color: #ffcc80;
    background-image: url('icons/discussion-exercise-icon.png');
}

/* Level legend box (appears at top of each section) */
.level-legend {
    max-width: 500px;
    margin: 1rem auto 2rem;
    padding: 0.8rem 1.2rem;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.8;
}
.level-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2px 0;
}

/* ============================================================
   Book Index Page (index.html)
   Styles for the main table of contents / landing page
   ============================================================ */

/* Index page uses sans-serif body font */
body.index-page {
    font-family: sans-serif;
    line-height: 1.6;
}

/* Header bar */
body.index-page header {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white;
    padding: 0 2rem 2rem;
    text-align: center;
}
body.index-page header h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
body.index-page header .chapter-subtitle {
    font-size: 1.1rem;
    opacity: 0.85;
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}
.meta-bar {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}
.meta-bar span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Main container for ToC / index pages */
body.index-page .container {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Legend bar */
.legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; padding: 1rem 1.5rem; background: var(--card-bg); border-radius: 10px; border: 1px solid var(--border); }
.legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.badge { display: none; }
.badge-group { display: none; }

/* Table of Contents */
.toc {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #dfe6e9);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}
.toc h3 { margin-bottom: 1rem; font-size: 1.1rem; }
.toc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.4rem 2rem;
}
.toc-item {
    font-size: 0.88rem;
    padding: 3px 0;
    cursor: pointer;
    color: var(--accent);
    text-decoration: none;
    display: block;
}
.toc-item:hover { color: var(--highlight); }
.toc-item .toc-num { font-weight: 700; margin-right: 0.3rem; }

/* Short TOC: compact inline layout with middot separators */
#toc-short .stoc-part {
    margin-bottom: 0.7rem;
}
#toc-short .stoc-part:last-child {
    margin-bottom: 0;
}
#toc-short .dense-part-header {
    margin: 0.4rem 0 0.15rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.84rem;
    border: none;
    background: var(--primary, #1a1a2e);
    color: white;
    border-radius: 3px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.5;
}
#toc-short .dense-part-header a {
    color: white;
    text-decoration: none;
    border-bottom: none;
}
#toc-short .dense-part-header a:hover {
    opacity: 0.85;
}
#toc-short .stoc-group {
    display: inline;
    line-height: 1.7;
}
#toc-short .dense-chapter {
    display: inline;
    font-size: 0.84rem;
    line-height: 1.7;
}
#toc-short .dense-chapter + .dense-chapter::before {
    content: "\00b7";
    margin: 0 0.35rem;
    color: #b0bec5;
    font-weight: 700;
}
#toc-short .dense-ch-num {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--highlight, #e94560);
    margin-right: 0.15rem;
}
#toc-short .dense-chapter a {
    color: var(--accent, #0f3460);
    text-decoration: none;
    border-bottom: none;
}
#toc-short .dense-chapter a:hover {
    color: var(--highlight, #e94560);
    text-decoration: underline;
}
#toc-short .dense-appendices-header {
    margin-top: 0.4rem;
    color: #ffffff;
}

/* Legacy card-based classes (kept for compat) */
#toc-short .toc-part-group {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #dfe6e9);
    border-radius: 10px;
    margin-bottom: 0.6rem;
    overflow: hidden;
}
#toc-short a.toc-part-header,
#toc-short span.toc-part-header {
    display: block;
    padding: 0.55rem 1.2rem;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: white !important;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-bottom: none;
}
#toc-short a.toc-part-header:hover { filter: brightness(1.15); }
#toc-short .toc-appendices-header {
    background: linear-gradient(135deg, #5a6672, #78909c) !important;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#toc-short .toc-chapters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0;
    padding: 0.3rem 0;
}
#toc-short a.toc-ch {
    display: block;
    padding: 0.3rem 1.2rem;
    font-size: 0.85rem;
    color: var(--accent);
    text-decoration: none;
    border-bottom: none;
    transition: background 0.15s, color 0.15s;
}
#toc-short a.toc-ch:hover { background: rgba(15, 52, 96, 0.06); color: var(--highlight); }
#toc-short .toc-ch .toc-num {
    display: inline-block;
    min-width: 2rem;
    font-weight: 700;
    color: var(--highlight);
    font-size: 0.82rem;
}
#toc-short .toc-appendix-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
@media (max-width: 600px) {
    #toc-short .toc-chapters { grid-template-columns: 1fr; }
    #toc-short .toc-appendix-grid { grid-template-columns: 1fr; }
}
.toc-item .new-badge {
    background: var(--highlight);
    color: white;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    font-weight: 700;
    vertical-align: middle;
}

/* Dense detailed ToC (flat, print-style layout) */
.dense-part-header {
    margin: 1.2rem 0 0.3rem 0;
    padding: 0.45rem 0.8rem;
    background: #111122;
    color: #ffffff;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.dense-part-header:first-child { margin-top: 0; }
.dense-group-header {
    margin: 0.8rem 0 0.2rem 0;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--accent, #2c3e50);
    border-bottom: 2px solid var(--accent, #2c3e50);
    opacity: 0.7;
}
.dense-part-header a,
.content .dense-part-header a,
.content .dense-part-header a:not(.section-card):not(.toc-link):not(.book-title-link):not(.toc-part-header):not(.toc-ch) {
    color: #ffffff;
    text-decoration: none;
}
.dense-part-header a:hover,
.content .dense-part-header a:hover {
    text-decoration: underline;
    color: #ffffff;
}
.dense-chapter {
    margin: 0.2rem 0 0 0;
    padding: 0.1rem 0.2rem;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.45;
    display: flex;
    align-items: baseline;
}
.dense-chapter a,
#toc-detailed .dense-chapter a { color: var(--accent); text-decoration: none; text-decoration-line: none; }
.dense-chapter a:hover,
#toc-detailed .dense-chapter a:hover { color: var(--highlight); text-decoration: underline; }
.dense-ch-num {
    display: inline-block;
    min-width: 3.2rem;
    flex-shrink: 0;
    color: var(--highlight);
    font-weight: 700;
    font-size: 0.82rem;
    text-align: left;
}
.dense-sections {
    margin: -0.05rem 0 0.25rem 3.4rem;
    padding: 0.15rem 0 0.15rem 0.6rem;
    font-size: 0.78rem;
    line-height: 1.65;
    color: #555;
    border-left: 2px solid var(--border, #dfe6e9);
}
.dense-sections a,
#toc-detailed .dense-sections a {
    color: #546e7a;
    font-weight: 400;
    text-decoration: none;
    text-decoration-line: none;
    margin-right: 0.1rem;
}
.dense-sections a:hover,
#toc-detailed .dense-sections a:hover { color: var(--highlight); text-decoration: underline; }
@media (max-width: 600px) {
    .dense-sections { margin-left: 1.2rem; }
    .dense-ch-num { min-width: 2.4rem; }
}

/* Prereqs and Outcomes boxes (index page) */
body.index-page .prereqs,
body.index-page .outcomes {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border, #dfe6e9);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}
body.index-page .outcomes {
    background: linear-gradient(135deg, #e8f5e9, #f1f8e9);
    border-color: #a5d6a7;
}
body.index-page .outcomes h3 { margin-bottom: 0.8rem; color: #2e7d32; }
body.index-page .prereqs h2 { margin-bottom: 0.8rem; }
body.index-page .prereqs ul,
body.index-page .outcomes ul { padding-left: 1.5rem; font-size: 0.92rem; }
body.index-page .prereqs li,
body.index-page .outcomes li { margin-bottom: 0.3rem; }

/* Chapter cards */
.book-chapter {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    border: 1px solid var(--border, #dfe6e9);
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.book-chapter:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }

.chapter-header-item {
    background: linear-gradient(135deg, #16213e, var(--accent));
    color: white;
    padding: 1.2rem 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
}
.chapter-header-item:hover { filter: brightness(1.1); }
.chapter-header-item h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    padding: 0;
    border: none;
}
.chapter-header-item h2 a,
.content .chapter-header-item h2 a {
    color: #ffffff;
    text-decoration: none;
}
.chapter-header-item h2 a:hover,
.content .chapter-header-item h2 a:hover {
    text-decoration: underline;
    color: #ffffff;
}
.chapter-num {
    background: rgba(255,255,255,0.2);
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
}
.chapter-header-item .chevron {
    font-size: 1.2rem;
    transition: transform 0.3s;
}
.book-chapter.collapsed .chevron { transform: rotate(-90deg); }
.book-chapter.collapsed .chapter-body { display: none; }

.chapter-body { padding: 1.5rem; }
.chapter-desc {
    color: var(--text-light, #636e72);
    font-size: 0.92rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border, #dfe6e9);
}

/* Lesson rows inside chapter cards */
.lesson {
    padding: 0.8rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.lesson:last-child { border-bottom: none; }
.lesson-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.lesson-title .lesson-num {
    color: var(--highlight);
    font-weight: 700;
    min-width: 2.5rem;
    font-size: 0.85rem;
}
.lesson-title a { color: var(--accent); text-decoration: none; }
.lesson-title a:hover { color: var(--highlight); text-decoration: underline; }
.lesson-topics {
    margin-left: 3rem;
    font-size: 0.87rem;
    color: var(--text-light, #636e72);
}
.lesson-topics ul { list-style: none; padding: 0; margin: 0.2rem 0; }
.lesson-topics li {
    padding: 1px 0;
    position: relative;
    padding-left: 1rem;
    line-height: 1.4;
}
.lesson-topics li::before {
    content: '\25B8';
    position: absolute;
    left: 0;
    color: var(--highlight);
    font-size: 0.75rem;
}

/* Project callout */
.project-callout {
    background: linear-gradient(135deg, #fff9e6, #fff3cd);
    border: 1px solid #f0d060;
    border-radius: 8px;
    padding: 1rem 1.2rem;
    margin-top: 1rem;
    font-size: 0.88rem;
}
.project-callout strong { color: #856404; }
.tools-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.tool-chip {
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.8rem;
    color: #4338ca;
    font-weight: 400;
}

/* Footer */
body.index-page footer {
    text-align: center;
    padding: 2rem;
    color: var(--text-light, #636e72);
    font-size: 0.85rem;
    border-top: 1px solid var(--border, #dfe6e9);
    margin-top: 2rem;
}

/* Index page responsive overrides */
@media (max-width: 768px) {
    body.index-page header h1 { font-size: 1.5rem; }
    .lesson-topics { margin-left: 1rem; }
    .toc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Standalone .container (for part/chapter index pages that
   do not carry body.index-page or .chapter-index scoping)
   ============================================================ */
.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Legacy: .book-title-bar replaced by .header-nav inside .chapter-header.
   Kept as hidden fallback during migration. */
.book-title-bar { display: none; }

/* ----- Page Footer ----- */
footer {
    text-align: center;
    padding: 1.5rem 1rem 2rem;
    margin-top: 0;
    color: #aaa;
    font-size: 0.78rem;
    font-family: sans-serif;
    line-height: 1.5;
    letter-spacing: 0.3px;
    border-top: 1px solid rgba(0,0,0,0.06);
}
footer p { margin-bottom: 0.15rem; text-align: center; }
footer .footer-title {
    font-weight: 700;
    color: #666;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}
footer .footer-updated {
    font-size: 0.72rem;
    color: #bbb;
    margin-top: 0.2rem;
}
footer a { color: #999; text-decoration: none; }
footer a:hover { color: var(--accent); }

/* ============================================================
   Front Matter Cards: Pathway, Course, and Intro Section Cards
   ============================================================ */

/* --- Pathway Dependency Diagram --- */
.pathway-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 2rem auto;
    max-width: 750px;
}
.pathway-row {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}
.pathway-box {
    padding: 0.7rem 1.2rem;
    border-radius: 12px;
    font-family: sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    color: white;
    min-width: 130px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: transform 0.2s, box-shadow 0.2s;
}
.pathway-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.pathway-box.p1 { background: #1565c0; }
.pathway-box.p2 { background: #6a1b9a; }
.pathway-box.p3 { background: #00695c; }
.pathway-box.p4 { background: #e65100; }
.pathway-box.p5 { background: #2e7d32; }
.pathway-box.p6 { background: #c62828; }
.pathway-box.p7 { background: #4527a0; }
.pathway-box.p8 { background: #37474f; }
.pathway-box.capstone { background: linear-gradient(135deg, var(--primary), var(--highlight)); }
.pathway-arrow {
    font-size: 1.4rem;
    color: #999;
    margin: 0.2rem 0;
    text-align: center;
}
.pathway-arrow.branching {
    display: flex;
    justify-content: center;
    gap: 6rem;
}
.pathway-branch-label {
    font-family: sans-serif;
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 0.3rem;
}

/* --- Self-Study Pathway Detail Card (used in introduction-pathways.html) --- */
.pathway-card {
    border: 1px solid rgba(0,0,0,0.08);
    border-left: 4px solid var(--accent);
    border-radius: 0 12px 12px 0;
    padding: 1.5rem;
    margin: 1.2rem 0;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.2s, border-left-color 0.2s;
}
.pathway-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    border-left-color: var(--highlight);
}
.pathway-card h4 {
    margin-top: 0;
    color: var(--accent);
}
.pathway-card .time-estimate {
    font-family: sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--highlight);
    margin-bottom: 0.5rem;
}

/* --- Pathway Link Card Grid (used in front-matter/pathways/index.html) --- */
.pathway-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.pathway-link-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.3rem 1.4rem;
    background: white;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.pathway-link-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.1);
    transform: translateY(-3px);
    border-color: var(--highlight);
}
.pw-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f4fa 0%, #e8edf5 100%);
    border-radius: 10px;
    transition: background 0.25s;
}
.pathway-link-card:hover .pw-avatar {
    background: linear-gradient(135deg, #fce4e8 0%, #fdd 100%);
}
.pw-avatar svg {
    width: 28px;
    height: 28px;
}
.pw-info {
    flex: 1;
    min-width: 0;
}
.pathway-link-card h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
}
.pathway-link-card h3 a { color: inherit; text-decoration: none; }
.pathway-link-card h3 a:hover { color: var(--accent); }
.pw-who {
    font-family: sans-serif;
    font-size: 0.82rem;
    color: var(--text-light);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}
.pw-meta {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 0 0 0.5rem 0;
}
.pw-meta span {
    font-family: sans-serif;
    font-size: 0.73rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 6px;
    line-height: 1.4;
}
.pw-time {
    background: #eef2ff;
    color: var(--accent);
}
.pw-level {
    background: #fef3f2;
    color: #b42318;
}
.pw-topics {
    font-family: sans-serif;
    font-size: 0.78rem;
    color: #555;
    line-height: 1.45;
    margin: 0;
}
.pw-topics strong {
    color: var(--primary);
    font-weight: 700;
}

/* --- Pathway Reason Descriptors (used in pathway chapter lists) --- */
.pw-reason { display: inline; font-size: 0.82rem; color: #888; font-style: italic; margin-left: 0.3rem; }
.pw-reason::before { content: ' \00B7 '; color: #bbb; font-style: normal; }

/* --- Intro Section Cards (used in introduction.html) --- */
.intro-sections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}
.intro-section-card {
    display: block;
    padding: 1.4rem;
    background: white;
    border: 1px solid rgba(0,0,0,0.06);
    border-left: 4px solid var(--accent);
    border-radius: 0 12px 12px 0;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s, transform 0.2s, border-left-color 0.2s;
}
.intro-section-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    border-left-color: var(--highlight);
}
.intro-section-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    color: var(--accent);
}
.intro-section-card p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-light);
    line-height: 1.55;
}

/* --- Responsive adjustments for front-matter cards --- */
@media (max-width: 600px) {
    .intro-sections { grid-template-columns: 1fr; }
    .pathway-grid { grid-template-columns: 1fr; }
    .pathway-link-card { padding: 1rem; gap: 0.75rem; }
    .pathway-box { min-width: 100px; font-size: 0.78rem; padding: 0.5rem 0.8rem; }
    .pathway-row { gap: 0.5rem; }
}


/* ============================================================
   Pagefind search box (header) — v6.13 high-contrast restyle
   The search box sits inside .chapter-header which has a dark
   gradient background. Without the white card + explicit colors
   below, the Pagefind UI inherits the dark context and result
   text becomes unreadable. This override gives the search its
   OWN bright card with the book's accent palette as highlights.
   ============================================================ */
/* Wave D6 (May 2026): search redesigned as a collapsible icon next to
 * the Contents button. Default: collapsed (icon only, ~32x32). Expanded
 * (when .search-open class is on the wrapper, set by JS on focus-within
 * OR by click on the icon): full search card slides down from the top
 * right of the header.
 *
 * Best practices applied:
 *   - Click-to-open (not pure hover) for touch / mobile.
 *   - ESC key closes it (handled in book.js).
 *   - Click-outside closes it.
 *   - Focus auto-moves to the input on open.
 *   - Initial state is collapsed so reading flow is uninterrupted. */
.header-search {
    /* Default collapsed state: a small icon button sitting in the top-right
     * of the chapter header, with adequate clearance from the Contents
     * button (which is the right-most nav item). Contents button is ~ 7rem
     * wide including padding; we leave 0.9rem gap. */
    position: absolute;
    top: 0.5rem;
    right: 8.5rem;
    width: 1.85rem;
    height: 1.85rem;
    margin: 0;
    padding: 0;
    z-index: 50;
}
.header-search::before {
    /* Magnifying glass icon as a pseudo-element on the wrapper itself.
     * Clicking anywhere on the wrapper opens the search via JS. */
    content: "🔍";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.header-search:hover::before,
.header-search.search-open::before {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.4);
}
.header-search #search {
    /* Hidden by default; revealed when .search-open class is set on parent.
     * Use position: fixed (anchored to the viewport) so the panel can't
     * overflow off the left edge on narrow screens. The 29x29 wrapper is
     * far too small to be a positioning context for a 28rem panel. */
    position: fixed;
    top: 3.2rem;
    right: 1rem;
    width: 28rem;
    max-width: calc(100vw - 2rem);
    padding: 1rem;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    display: none;
    z-index: 51;
}
.header-search.search-open #search {
    display: block;
}
.header-search.search-open::before {
    /* Hide the icon while panel is open to reduce visual noise. */
    opacity: 0.5;
}
/* Friendly message shown when pagefind can't load (file:// protocol). */
.search-offline-note {
    color: #1a4078;
    font-size: 0.9rem;
    line-height: 1.5;
    padding: 0.5rem 0.25rem;
}
.search-offline-note code {
    background: #f4f4f4;
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.85rem;
}
/* Legacy override kept for any page still loading the old layout: if the
 * wrapper isn't absolute-positioned (e.g. fallback shape), revert. */
.legacy-search .header-search {
    position: static;
    width: auto;
    height: auto;
    max-width: 820px;
    margin: 1rem auto 1.25rem;
    padding: 0 1rem;
}
.legacy-search .header-search::before { display: none; }
.legacy-search .header-search #search {
    display: block;
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
/* Chapter-header gets relative positioning so absolute children land
 * inside it (the search wrapper above + any future top-right elements). */
.chapter-header { position: relative; }
.header-search-OLD-RESTORE {
    max-width: 820px;
    margin: 1rem auto 1.25rem;
    padding: 0 1rem;
}
.header-search #search {
    /* Pagefind UI custom properties (these flow into all sub-elements) */
    --pagefind-ui-scale: 0.9;
    --pagefind-ui-primary: #e94560;          /* hot pink accent for highlights */
    --pagefind-ui-text: #1a1a2e;             /* near-black text on white card */
    --pagefind-ui-background: #ffffff;       /* white card surface */
    --pagefind-ui-border: rgba(15, 52, 96, 0.16);
    --pagefind-ui-tag: #eef2f7;              /* light-blue secondary surface */
    --pagefind-ui-border-width: 1px;
    --pagefind-ui-border-radius: 12px;
    --pagefind-ui-image-border-radius: 8px;
    --pagefind-ui-image-box-ratio: 3 / 2;
    --pagefind-ui-font: sans-serif;

    /* OUR card wrapper — breaks the dark-gradient inheritance from the header */
    background: rgba(255, 255, 255, 0.97);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.20),
                0 2px 6px rgba(0, 0, 0, 0.10);
    padding: 0.5rem 0.75rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #1a1a2e;
}
/* Ensure every Pagefind-injected child element renders on the white card */
.header-search #search,
.header-search #search * {
    color: #1a1a2e;
}
/* v6.37: Google-like search-result layout.
 *   Top:    small grey breadcrumb path                "Part 2 › Chapter 06"
 *   Middle: bold blue title (the link)                 "BERT, GPT, T5 …"
 *   Bottom: larger dark snippet with bright matches    "...the bidirectional…"
 * Breadcrumb is lifted out of the link text by book.js (#10). */

/* Breadcrumb above the title */
.header-search .pf-breadcrumb {
    font-size: 0.78em;
    color: #5a6c80 !important;
    line-height: 1.2;
    margin-bottom: 2px;
    letter-spacing: 0.02em;
    font-weight: 400;
}

/* Title link — Google-style large blue, no underline by default */
.header-search .pagefind-ui__result-link,
.header-search a.pagefind-ui__result-link {
    color: #1a55c2 !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05em;
    line-height: 1.3;
}
.header-search .pagefind-ui__result-link:hover {
    color: #e94560 !important;
    text-decoration: underline;
}
.header-search .pagefind-ui__result-link:visited {
    color: #6b3aa0 !important;  /* Google-style purple for visited */
}

/* Snippet — larger, darker, more prominent than current */
.header-search .pagefind-ui__result-excerpt {
    color: #1a1a2e !important;
    line-height: 1.55;
    font-size: 0.97em;
    margin-top: 4px;
}

/* Highlighted match within the snippet — bright yellow background, bold */
.header-search .pagefind-ui__result-excerpt mark,
.header-search mark {
    background: #fff2a8;
    color: #1a1a2e;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 700;
}

/* Sub-results (multiple matches per page) — slightly indented */
.header-search .pagefind-ui__result-nested {
    margin-left: 0;
    padding-left: 12px;
    border-left: 2px solid rgba(15, 52, 96, 0.08);
    margin-top: 6px;
}
/* Each result card */
.header-search .pagefind-ui__result {
    border-bottom: 1px solid rgba(15, 52, 96, 0.10);
    padding: 0.7rem 0;
}
.header-search .pagefind-ui__result:last-child {
    border-bottom: none;
}
/* Result count / "Loading…" / etc. */
.header-search .pagefind-ui__message {
    color: #555 !important;
    font-style: italic;
    font-size: 0.9rem;
}
/* Search input itself */
.header-search .pagefind-ui__search-input {
    background: #ffffff !important;
    color: #1a1a2e !important;
    border: 1.5px solid rgba(15, 52, 96, 0.18) !important;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.header-search .pagefind-ui__search-input:focus {
    border-color: #e94560 !important;
    box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.18) !important;
    outline: none;
}
.header-search .pagefind-ui__search-input::placeholder {
    color: #888 !important;
    font-style: italic;
}
/* Clear button */
.header-search .pagefind-ui__search-clear {
    color: #999 !important;
}
.header-search .pagefind-ui__search-clear:hover {
    color: #e94560 !important;
}
/* "Load more" button */
.header-search .pagefind-ui__button {
    background: #0f3460 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: background 0.18s;
}
.header-search .pagefind-ui__button:hover {
    background: #e94560 !important;
}
/* Title above the results list (e.g., "5 results for ...") */
.header-search .pagefind-ui__results-area > p:first-child,
.header-search .pagefind-ui__results-area .pagefind-ui__results-amount {
    color: #555 !important;
    font-size: 0.9rem;
    margin: 0.5rem 0;
}
/* Cap the results dropdown height so a long result list SCROLLS inside the
   card instead of overflowing the viewport (Pagefind already paginates with
   a "Load more" button, but with sub-results the list can still grow tall).
   The search input sits in the form above and stays fixed; only the results
   area scrolls. */
.header-search .pagefind-ui__drawer,
.header-search .pagefind-ui__results-area {
    max-height: 65vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media print {
    .header-search { display: none !important; }
}

/* ============================================================
   New 2-level ToC (Wave D5, May 2026)
   ------------------------------------------------------------
   Replaces the dual toc-short / toc-detailed view with a single,
   beautiful two-level tree: Part > Chapter. Single source of truth
   is book_structure.yaml; toc.html is regenerated by
   scripts/_rebuild_toc.py.
   ============================================================ */
.toc-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem 5rem;
}

.toc-part {
    margin: 0 0 1.75rem;
    padding: 0;
    box-shadow: 0 2px 8px rgba(15, 52, 96, 0.05);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e4e8ef;
}
.toc-part-header {
    background: linear-gradient(135deg, var(--toc-part-color, var(--primary)),
                                  var(--toc-part-accent, var(--accent)));
    color: white;
    padding: 0.55rem 1.1rem 0.55rem;
    border-radius: 10px 10px 0 0;
    margin: 0;
    text-align: left;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
/* Glossary section has no chapter list — keep its header bottom-rounded. */
.toc-part.toc-glossary-section .toc-part-header {
    border-radius: 10px;
}
.toc-part.toc-glossary-section {
    /* No chapter-list inside; the section is just the header card. */
}
.toc-part-prefix {
    font-family: sans-serif;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.78);
    font-weight: 700;
}
.toc-part-sep {
    color: rgba(255,255,255,0.5);
    font-weight: 400;
    margin: 0 0.25rem;
}
.toc-part-num {
    font-family: sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.65);
    margin-bottom: 0.15rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.toc-part-count {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.7);
    font-weight: 400;
    white-space: nowrap;
    flex: 0 0 auto;
}
.toc-part-title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.05rem;
    color: white;
    font-weight: 700;
    letter-spacing: -0.005em;
    line-height: 1.25;
    flex: 1 1 auto;
    min-width: 0;
}
.toc-part-title a {
    color: white !important;
    text-decoration: none !important;
}
.toc-part-title a:hover {
    color: rgba(255,255,255,0.85) !important;
}
.toc-part-subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.85);
    font-style: italic;
    line-height: 1.35;
    width: 100%;
    flex-basis: 100%;
    /* Allow up to 2 lines + wrap naturally so subtitles aren't truncated
     * mid-word on narrower viewports. Single-line is the desktop ideal
     * when the subtitle is short; 2-line wrap is acceptable when needed. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* Chapter list: grid of cards, one chapter per card */
.toc-chapter-list {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    background: #ffffff;
    border: 1px solid #dce1ea;
    border-top: none;
    border-radius: 0 0 10px 10px;
    /* 2-column grid for chapter cards — denser, less vertical scrolling. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem;
    overflow: hidden;
}
.toc-chapter {
    background: #fbfcfe;
    border: 1px solid #eef1f6;
    border-radius: 7px;
    margin: 0;
    transition: border-color 0.15s, background 0.15s;
}
.toc-chapter:hover {
    border-color: var(--toc-part-color, var(--primary));
    background: #ffffff;
}
.toc-chapter {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #eef0f4;
}
.toc-chapter:last-child {
    border-bottom: none;
}
.toc-chapter > a {
    display: grid;
    grid-template-columns: 2rem 1fr;
    grid-template-rows: auto auto;
    gap: 0 0.65rem;
    padding: 0.55rem 0.7rem 0.55rem 0.55rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, transform 0.12s;
    align-items: center;
    min-height: 100%;
}
.toc-chapter > a:hover {
    background: linear-gradient(90deg, #f7f9fc, #fdf3f5);
    transform: translateX(2px);
}
.toc-chapter > a:hover .toc-chapter-num {
    color: var(--highlight);
    border-right-color: var(--highlight);
}
.toc-chapter > a:hover .toc-chapter-title {
    color: var(--accent);
}
.toc-chapter-num {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: center;
    /* Circular chip with the chapter number / appendix letter inside. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    font-family: sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--toc-part-color, var(--primary));
    background: var(--toc-part-soft, #f0f3f9);
    border: 1px solid var(--toc-part-border, #dce3ee);
    letter-spacing: 0;
    transition: background 0.15s, color 0.15s, transform 0.12s;
}
.toc-chapter:hover .toc-chapter-num {
    background: var(--toc-part-color, var(--primary));
    color: #ffffff;
    border-color: var(--toc-part-color, var(--primary));
    transform: scale(1.06);
}
.toc-chapter-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.88rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.25;
}
.toc-chapter-subtitle {
    /* Chapter-level subtitles hidden in the TOC (user decision May 2026):
     * keeps the TOC compact and reading-list-like. Subtitles still live
     * in the yaml + on each chapter's landing page, just not surfaced here. */
    display: none;
}

/* Appendix-specific tweaks */
.toc-part.toc-appendices .toc-part-header {
    background: linear-gradient(135deg, #2c3e50, #4a5568);
}
/* Front Matter chips use FN labels (F0, F1, ...); 2-char content fits
 * inside the 1.9rem chip at this font size. */
.toc-part.toc-front-matter .toc-chapter-num {
    font-size: 0.72rem;
    letter-spacing: 0;
}
.toc-chapter.toc-appendix .toc-chapter-num {
    /* Appendix letters share the appendices-section teal-blue accent
     * (defined on the parent .toc-appendices via CSS variables). */
}
.toc-group-divider {
    padding: 0.7rem 1.2rem 0.35rem;
    background: #fafbfc;
    color: #4a5568;
    font-family: sans-serif;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    border-bottom: 1px solid #eef0f4;
}

/* Front-matter shorter card */
.toc-part.toc-front-matter .toc-part-header {
    background: linear-gradient(135deg, #1a1a2e, #2d3a5a);
}
/* Front Matter rows use the SAME chip-left layout as numbered Parts.
 * (The old single-column rule was removed when F-prefix chips were
 * introduced — keeping this slot for any future per-section overrides.) */

/* ============================================================
   TOC v3 palette (Wave D8) — disciplined 3-color system
   ------------------------------------------------------------
   Following best design principle: 2-3 colors only.
     - Primary navy (var(--primary))  — Part headers, chip text
     - Accent pink-red (var(--highlight)) — hover, current page
     - Neutral grays                    — chip backgrounds, subtitles
   All Parts share the same palette (no per-Part color rotation).
   Two structural variants are distinguished by HUE not color:
     - Appendices section uses a soft teal-accent (still in same family)
     - Glossary uses italic typography variant (no color change)
   ============================================================ */
.toc-part {
    --toc-part-color: var(--primary);
    --toc-part-accent: var(--accent);
    --toc-part-soft: #eef2f8;
    --toc-part-border: #d6dde9;
}
.toc-part.toc-appendices,
.toc-part.toc-glossary-section {
    --toc-part-color: #1a4d6e;
    --toc-part-accent: #2d6a91;
    --toc-part-soft: #e8f1f7;
    --toc-part-border: #cbdfe9;
}

/* Group divider inside Appendices section (Foundations / Framework Guides /
 * Infrastructure & MLOps / Pedagogical Kit). Renders as a small banded
 * heading spanning both grid columns. */
.toc-group-divider {
    grid-column: 1 / -1;
    margin: 0.5rem 0 0.25rem;
    padding: 0.45rem 0.85rem;
    font-family: sans-serif;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--toc-part-color, #1a4d6e);
    background: linear-gradient(90deg, var(--toc-part-soft, #e8f1f7), transparent);
    border-left: 3px solid var(--toc-part-color, #1a4d6e);
    border-radius: 4px;
    list-style: none;
}
.toc-group-divider:first-of-type {
    margin-top: 0.1rem;
}

/* Responsive: single column on narrow screens (< 768px) */
@media (max-width: 768px) {
    .toc-main { padding: 1rem 0.75rem 3rem; }
    .toc-part-title { font-size: 0.95rem; }
    .toc-part-subtitle {
        /* On narrow screens, allow 2 lines and wrap naturally; the 1-line
         * clamp on desktop would otherwise visually truncate too much. */
        -webkit-line-clamp: 2;
        white-space: normal;
        font-size: 0.7rem;
    }
    .toc-chapter-list {
        grid-template-columns: 1fr;
    }
    .toc-chapter > a {
        grid-template-columns: 1.9rem 1fr;
        gap: 0 0.6rem;
    }
    .toc-chapter-title {
        font-size: 0.9rem;
    }
}
@media print {
    .toc-part-header { background: #f5f7fb !important; color: #1a1a2e !important; }
    .toc-part-num, .toc-part-subtitle { color: #4a5568 !important; }
    .toc-part-title, .toc-part-title a { color: #1a1a2e !important; border-bottom: none !important; }
}

/* ----- Accessibility: skip-to-main-content link (WCAG 2.4.1) ----- */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1a4078;
    color: #ffffff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    font-family: sans-serif;
    font-size: 0.95rem;
}
.skip-link:focus {
    top: 0;
    outline: 2px solid #f6c945;
    outline-offset: 2px;
}

/* ============================================================
   Responsive safety net (Audit, May 2026)
   ============================================================
   Audit-confirmed baseline is solid: breakpoints exist at 1024,
   768, 600, and 480 px; .content img and .illustration img cap
   at 100%; inline <svg> assets use viewBox + max-width:100%;
   tables get display:block; overflow-x:auto at <=768px; .callout,
   pre, math-block, comparison-table all have overflow handling.
   The rules below close the few remaining gaps without altering
   any existing desktop styling.
   ============================================================ */

/* 1. Page-level overflow guard. Prevents a single rogue element
 *    (very wide raw token, mis-built SVG, dev fragment) from
 *    forcing the WHOLE page to scroll sideways on a phone. Body
 *    keeps normal flow so internal scroll wrappers still work. */
html { overflow-x: hidden; }
body { overflow-x: clip; }

/* 2. Long unwrappable strings inside inline <code>, links, and
 *    paragraphs. The .content table rule already breaks long
 *    tokens in tables, and pre has overflow-x:auto, but inline
 *    <code> in prose (file paths, URLs, model IDs like
 *    "meta-llama/Llama-3.1-70B-Instruct") and bare anchors with
 *    long hrefs could still push the line wider than the viewport.
 *    overflow-wrap is the modern, hyphenation-aware fallback;
 *    word-break works as a last resort on very narrow phones. */
.content p code,
.content li code,
.content td code,
.content a {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 3. Code-block-wrapper explicit bounds. The wrapper itself is
 *    given a hard max-width and its inner <pre> can scroll on
 *    overflow. This makes the styling intent explicit (matches
 *    the inline comment in the audit brief) and prevents stray
 *    inline-style or HTML "width" attrs inside the wrapper from
 *    leaking horizontally on phones. */
.code-block-wrapper { max-width: 100%; }
.code-block-wrapper pre,
.code-block-wrapper code {
    overflow-x: auto;
    max-width: 100%;
    overflow-wrap: break-word;
}
.code-block-wrapper pre code {
    /* Preserve <pre>'s own horizontal scrolling for source code,
     * which should NOT word-wrap (would mangle indentation). The
     * inner <code> inherits scroll from <pre>. */
    overflow-wrap: normal;
    word-break: normal;
    white-space: pre;
}

/* 4. Tight-viewport callout padding. The 5 px left border plus
 *    1.5 rem horizontal padding crowds 360 px phones once the
 *    content's 0.75 rem padding is also accounted for. Trim the
 *    callout chrome a touch at the smallest sizes while keeping
 *    desktop styling intact (no change at >=600 px). */
@media (max-width: 480px) {
    .callout {
        padding: 0.75rem 0.9rem;
        margin-left: 0;
        margin-right: 0;
        border-left-width: 4px;
    }
    .callout .callout-title { font-size: 0.95rem; }
}

/* 5. Bare <table> readability on phones. The 768 px breakpoint
 *    already sets table { display:block; overflow-x:auto }, but
 *    the default 0.75 rem 1 rem cell padding is wasteful on a
 *    narrow scroll container. Trim cell padding so the visible
 *    columns show more content before the user has to scroll. */
@media (max-width: 480px) {
    .content table th,
    .content table td {
        padding: 0.5rem 0.6rem;
        font-size: 0.88rem;
    }
}

/* 6. Mobile-first form factor for grids that may still emit a
 *    multi-column layout on phones because their per-breakpoint
 *    rule lives elsewhere. Catches future grid containers that
 *    aren't yet enumerated. minmax(0, 1fr) prevents grid blowout
 *    when a child has intrinsic content wider than the column. */
@media (max-width: 600px) {
    .sections-list,
    .comparison-grid,
    .compare-grid,
    .feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 7. Header-nav row. .header-nav .book-title-link already uses
 *    text-overflow:ellipsis with max-width:70% / 55% / 50% across
 *    breakpoints. Add flex-wrap as a final safety so the row never
 *    forces a horizontal scroll if both halves get long. */
.header-nav { flex-wrap: wrap; row-gap: 0.25rem; }

/* 8. Page-breadcrumb on phones. Already wraps via flex-wrap, but
 *    on the narrowest screens the uppercase letter-spacing widens
 *    the line. Drop letter-spacing slightly at <=480 px so the
 *    breadcrumb fits one or two lines instead of three. */
@media (max-width: 480px) {
    .page-breadcrumb {
        font-size: 0.74rem;
        letter-spacing: 0.04em;
        gap: 0.25rem 0.4rem;
    }
}

/* ============================================================
 * SEE ALSO LINK COLOR ENFORCEMENT (final-source-order pass).
 *
 * Earlier overrides at line 1266-1279 should already win against the
 * .content a:hover rule, but the user has reported red hover persisting
 * across multiple cycles. This block restates the rules at the END of
 * the stylesheet with a body-prefixed selector for maximum specificity
 * and unambiguous source-order precedence. Every link inside a
 * .callout.cross-ref stays slate-gray default and navy on hover/focus/
 * active, regardless of :visited state, regardless of nesting depth
 * (<p><a>, <ul><li><a>, <ol><li><a>).
 *
 * Includes the `text-decoration` shorthand explicitly because some
 * browsers reset text-decoration-color when text-decoration is set.
 * ============================================================ */
body .callout.cross-ref a,
body .callout.cross-ref a:link,
body .callout.cross-ref a:visited,
body .callout.cross-ref p a,
body .callout.cross-ref li a,
body .callout.cross-ref ul a,
body .callout.cross-ref ol a {
    color: #455a64 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(69, 90, 100, 0.4) !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 2px !important;
    transition: color 0.15s ease, text-decoration-color 0.15s ease !important;
}
body .callout.cross-ref a:hover,
body .callout.cross-ref a:focus,
body .callout.cross-ref a:active,
body .callout.cross-ref p a:hover,
body .callout.cross-ref li a:hover,
body .callout.cross-ref ul a:hover,
body .callout.cross-ref ol a:hover,
body .callout.cross-ref p a:focus,
body .callout.cross-ref li a:focus {
    color: #1a4078 !important;
    text-decoration: underline !important;
    text-decoration-color: #1a4078 !important;
    text-decoration-thickness: 2px !important;
}


/* === root-cause safety net (do not duplicate) === */
/* ------------------------------------------------------------
   Root-cause safety net (May 2026): every inline SVG without an
   explicit max-width gets caught here so it cannot push the
   viewport sideways on Kindle. width:auto + height:auto +
   max-width:100% is the textbook responsive-SVG recipe.
   ------------------------------------------------------------ */
svg { max-width: 100%; height: auto; }

/* Same idea for any <img> not already covered by a class rule. */
img { max-width: 100%; height: auto; }

/* Tables: at any viewport, if total column width exceeds container,
   horizontal scroll within the table rather than the page. Already
   the default at <=768px but extending to all sizes for Kindle. */
.content table { overflow-x: auto; max-width: 100%; }