/* Squiddlr Lux-Blue fragment stylesheet — v2 (2026-09-11)
 * ============================================================
 * The "Blue Lux" synthesis: same visual identity as the crimson Lux
 * (ops/myst-sidecar/lux-fragment.css) but with the crimson replaced by a
 * calm navy-blue accent — students consistently preferred the blue variant
 * over the stark crimson-on-cream in the Sept 2026 render pilot.
 *
 * v2 additions (Sept 11, 2026): sidebar TOC (.lecture-shell + .lecture-toc),
 * Watch These attached-video callout (.watch-these + .wt-*), chart cards
 * (figure.chart-card + .chart-title), calc-card (details.calc-card), and
 * Quarto-style callouts kept back-compat via `.callout` alias on `.admonition`.
 * Bumping to `lux-blue-fragment.v2.css` at the CDN path lets old lectures
 * keep pointing at v1 during any rollback window.
 *
 * Scoped to `article.lecture` (from scripts/lecture/render-fragment.mjs) so
 * it never overrides globalomnipanopticon chrome or the crimson Lux legacy
 * stylesheet targeting `article.myst-article`.
 *
 * Design targets:
 *   - Navy accent on cream body — same WCAG contrast ratios as the crimson,
 *     verified below.
 *   - Same typography stack (General Sans / Satoshi / STIX Two).
 *   - Callout / admonition styling that survives without Tailwind.
 *   - Focus rings that meet WCAG 2.x AA (3:1 non-text contrast).
 *   - prefers-reduced-motion honored.
 *   - Print-friendly (no dark backgrounds, links show URLs).
 *
 * Contrast verification (WCAG 2.2 AA):
 *   - Body ink #12141A on cream #FAF7F1                → 17.4:1  (AAA)
 *   - Navy H1 #1B2A4A on cream #FAF7F1                 → 12.9:1  (AAA)
 *   - Sea accent #1F5A6C on cream #FAF7F1              →  7.1:1  (AAA)
 *   - Link navy #1F3B7A on cream #FAF7F1               →  9.9:1  (AAA)
 *   - Focus ring navy #1F3B7A vs neighbour cream       →  9.9:1  (>3:1, AA)
 *   - Admonition-info navy on light-blue #E4EDFB       →  9.4:1  (AAA)
 *   - Admonition-warning ink on gold #F3E2B3           → 12.5:1  (AAA)
 *   - Code fence ink on fog-100 #F3F1EC                → 17.1:1  (AAA)
 *
 * If new colours are added, run scripts/ada-check.js on a sample fragment
 * before shipping.
 */

/* ── Colour + typography tokens (scoped to the article) ───────────────────── */
article.lecture {
    /* Palette — navy replaces crimson as the primary accent */
    --lb-ink:        #12141A;   /* body text */
    --lb-navy:       #1B2A4A;   /* primary accent (headings, borders) */
    --lb-navy-deep:  #142042;   /* pressed / hover */
    --lb-link:       #1F3B7A;   /* links (a shade lighter than -navy for
                                   the underline-only look) */
    --lb-sea:        #1F5A6C;   /* secondary accent (kicker, subject label) */
    --lb-cream:      #FFFFFF;   /* page / data-panel background */
    --lb-fog-050:    #FCFDFE;
    --lb-fog-100:    #F3F6F8;   /* code fence background */
    --lb-fog-200:    #D8E0E8;   /* rule + hairline */
    --lb-fog-300:    #667085;   /* muted text, AA on white */
    --lb-surface-alt:#F3F7FA;   /* quiet panels: provenance / metadata */
    --lb-callout-info-bg:    #EAF3FA;
    --lb-callout-warn-bg:    #FFF3D8;
    --lb-callout-tip-bg:     #EAF5ED;
    --lb-callout-danger-bg:  #FDECEC;
    --lb-gold:       #C29C4A;
    --lb-moss:       #4A7C59;

    /* Type */
    --lb-font-body:    "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --lb-font-display: "Satoshi", "General Sans", system-ui, sans-serif;
    --lb-font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, "SF Mono", Consolas, monospace;
    --lb-font-math:    "STIX Two Math", "Cambria Math", serif;

    /* Rhythm */
    --lb-line-height:  1.65;
    --lb-heading-lh:   1.25;

    /* Focus ring — 3:1 contrast against cream, navy tone */
    --lb-focus-outline: 2px solid var(--lb-link);
    --lb-focus-offset:  2px;
}

/* ── Base body ─────────────────────────────────────────────────────────── */
article.lecture {
    font-family: var(--lb-font-body);
    color: var(--lb-ink);
    line-height: var(--lb-line-height);
    font-size: 1rem;
    max-width: 72ch;
    margin: 0 auto;
    padding: 1rem 1.25rem 4rem;
    font-feature-settings: "ss01", "ss02";
    background: transparent;   /* let host page decide */
    /* Article-style reading: justified prose with automatic hyphenation.
       Only the paragraph body should justify — headings, captions, TOC
       links, callouts, and the theme-toggle chrome must stay left-aligned. */
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
}
/* Reset justification for elements that shouldn't be justified.
   Justification on headings, captions and short labels produces ugly
   wide spacing on the last (usually only) line. */
article.lecture h1,
article.lecture h2,
article.lecture h3,
article.lecture h4,
article.lecture h5,
article.lecture h6,
article.lecture .lecture-kicker,
article.lecture .lecture-title,
article.lecture figcaption,
article.lecture .callout-title,
article.lecture .admonition-title,
article.lecture .wt-heading,
article.lecture .wt-title,
article.lecture .wt-meta,
article.lecture .wt-actions,
article.lecture th,
article.lecture td,
article.lecture .equation-number,
article.lecture .chart-title,
article.lecture .chart-desc,
article.lecture pre,
article.lecture code {
    text-align: left;
    hyphens: manual;
    -webkit-hyphens: manual;
}

article.lecture p { margin: 0 0 1em 0; }

/* ── Header (kicker + title) ──────────────────────────────────────────── */
article.lecture .lecture-header {
    margin: 0 0 1.5rem;
    padding: 0 0 1rem;
    border-bottom: 2px solid var(--lb-navy);
}

article.lecture .lecture-kicker {
    font-family: var(--lb-font-display);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lb-sea);
    margin: 0 0 0.4rem;
}

article.lecture .lecture-kicker .subject { font-weight: 700; }
article.lecture .lecture-kicker .version {
    color: var(--lb-fog-300);
    font-weight: 500;
}

article.lecture .lecture-title {
    font-family: var(--lb-font-display);
    color: var(--lb-navy);
    font-weight: 700;
    line-height: var(--lb-heading-lh);
    font-size: 2rem;
    margin: 0;
}

/* ── Headings ─────────────────────────────────────────────────────────── */
article.lecture h2,
article.lecture h3,
article.lecture h4,
article.lecture h5,
article.lecture h6 {
    font-family: var(--lb-font-display);
    color: var(--lb-navy);
    line-height: var(--lb-heading-lh);
    margin: 2rem 0 0.6rem;
    font-weight: 700;
}
article.lecture h2 { font-size: 1.5rem; }
article.lecture h3 { font-size: 1.2rem; color: var(--lb-sea); }
article.lecture h4 { font-size: 1.05rem; font-style: italic; font-weight: 600; }

/* ── Links (underline-only, no hover animation for reduced-motion) ─────── */
article.lecture a {
    color: var(--lb-link);
    text-decoration: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 2px;
}
article.lecture a:hover { color: var(--lb-navy-deep); }
article.lecture a:focus-visible {
    outline: var(--lb-focus-outline);
    outline-offset: var(--lb-focus-offset);
    border-radius: 2px;
}

/* ── Code ─────────────────────────────────────────────────────────────── */
article.lecture code {
    font-family: var(--lb-font-mono);
    font-size: 0.94em;
    background: var(--lb-fog-100);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}
article.lecture pre {
    font-family: var(--lb-font-mono);
    font-size: 0.9rem;
    background: var(--lb-fog-100);
    padding: 1rem 1.25rem;
    border-radius: 6px;
    border-left: 4px solid var(--lb-navy);
    overflow-x: auto;
    line-height: 1.5;
}
article.lecture pre code { background: transparent; padding: 0; }

/* ── Admonitions / callouts (both class families supported) ───────────── */
/* v2: `.callout` and `.callout-<kind>` are treated as aliases of
 *     `.admonition` / `.admonition-<kind>` so the MVP renderer's Quarto
 *     `::: {.callout-note}` blocks style identically to MyST admonitions. */
article.lecture .admonition,
article.lecture .callout {
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    border-left: 4px solid var(--lb-navy);
    background: var(--lb-callout-info-bg);
}
article.lecture .admonition .admonition-title,
article.lecture .admonition > p:first-child > strong:first-child,
article.lecture .callout .callout-title,
article.lecture .callout .callout-header {
    font-family: var(--lb-font-display);
    color: var(--lb-navy);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.85rem;
    display: block;
    margin: 0 0 0.4rem;
}
article.lecture .callout .callout-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
article.lecture .callout .callout-icon {
    font-size: 1rem;
    line-height: 1;
    color: var(--lb-navy);
    flex: 0 0 auto;
}
article.lecture .callout p:last-child { margin-bottom: 0; }

article.lecture .admonition-note,
article.lecture .callout-note { background: var(--lb-callout-info-bg); }
article.lecture .admonition-tip,
article.lecture .admonition-success,
article.lecture .callout-tip { background: var(--lb-callout-tip-bg); border-left-color: var(--lb-moss); }
article.lecture .callout-tip .callout-icon,
article.lecture .callout-tip .callout-title { color: var(--lb-moss); }
article.lecture .admonition-warning,
article.lecture .callout-warning { background: var(--lb-callout-warn-bg); border-left-color: var(--lb-gold); }
article.lecture .callout-warning .callout-icon,
article.lecture .callout-warning .callout-title { color: #7a5a10; }
article.lecture .admonition-danger,
article.lecture .admonition-important,
article.lecture .callout-important,
article.lecture .callout-caution { background: var(--lb-callout-danger-bg); border-left-color: #8B1A2B; }
article.lecture .callout-important .callout-icon,
article.lecture .callout-important .callout-title { color: #8B1A2B; }

/* ── Tables ────────────────────────────────────────────────────────────── */
article.lecture table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}
article.lecture thead th {
    text-align: left;
    background: var(--lb-navy);
    color: var(--lb-cream);
    padding: 0.5em 0.75em;
    font-family: var(--lb-font-display);
    font-weight: 600;
}
article.lecture tbody td,
article.lecture tbody th {
    padding: 0.45em 0.75em;
    border-bottom: 1px solid var(--lb-fog-200);
    vertical-align: top;
}
article.lecture tbody tr:nth-child(2n) td { background: var(--lb-fog-050); }
article.lecture .align-left   { text-align: left; }
article.lecture .align-right  { text-align: right; font-variant-numeric: tabular-nums; }
article.lecture .align-center { text-align: center; }

/* ── Glossary ──────────────────────────────────────────────────────────── */
article.lecture .glossary {
    display: block;
    margin: 1.5rem 0;
}
article.lecture .glossary dt {
    font-family: var(--lb-font-display);
    font-weight: 700;
    color: var(--lb-navy);
    margin-top: 1rem;
}
article.lecture .glossary dd { margin: 0.25rem 0 0 0; }

/* ── Authorship and contribution provenance ───────────────────────────── */
article.lecture .authorship-provenance {
    margin-top: 2.25rem;
    padding: 1.1rem 1.25rem;
    border-left: 4px solid var(--lb-teal, #1F5A6C);
    background: var(--lb-surface-alt, #F3F7FA);
    border-radius: 0.25rem;
}
article.lecture .authorship-provenance h2 { margin-top: 0; }
article.lecture .authorship-provenance p:last-child { margin-bottom: 0; }
article.lecture .authorship-provenance,
article.lecture .authorship-provenance p,
article.lecture .authorship-provenance strong {
    color: var(--lb-ink);
}

/* ── Public-site footer ───────────────────────────────────────────────────
   The rendered lecture is a standalone CloudFront document. Its footer must
   therefore carry the same readable Global Omni identity and return paths as
   the public shell, rather than leaving a centered, document-width signature
   block at the end of the article. */
footer.site {
    margin-top: 2rem;
    background: #07111F;
    color: #E6EAF1;
    font-family: "Satoshi", "General Sans", system-ui, sans-serif;
    font-size: 0.9rem;
    line-height: 1.55;
}
footer.site .site-footer-inner {
    max-width: 76rem;
    margin: 0 auto;
    padding: 2rem max(1.25rem, calc((100vw - 76rem) / 2));
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr) auto;
    gap: 1.5rem 2.5rem;
    align-items: start;
}
footer.site .site-footer-brand {
    margin: 0;
    color: #FFFFFF;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
}
footer.site .site-footer-brand span {
    display: block;
    margin-top: 0.3rem;
    color: #7FE2D8;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}
footer.site .site-footer-contact p { margin: 0 0 0.35rem; }
footer.site .site-footer-contact p:last-child { margin-bottom: 0; }
footer.site .instructor-line { color: #FFFFFF; font-weight: 700; }
footer.site a {
    color: #7FE2D8;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
footer.site a:hover { color: #FFFFFF; }
footer.site a:focus-visible {
    outline: 2px solid #F4B860;
    outline-offset: 3px;
}
footer.site .site-footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem 1rem;
}
@media (max-width: 44rem) {
    footer.site .site-footer-inner { grid-template-columns: 1fr; }
    footer.site .site-footer-nav { justify-content: flex-start; }
}

/* ── Figures ──────────────────────────────────────────────────────────── */
article.lecture figure {
    margin: 1.5rem 0;
    text-align: center;
}
article.lecture figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
article.lecture figcaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: var(--lb-fog-300);
    font-style: italic;
    text-align: center;
}

/* ── Math (KaTeX server-rendered) ─────────────────────────────────────── */
article.lecture .katex,
article.lecture .katex-display {
    font-family: var(--lb-font-math);
}
article.lecture .katex-display {
    margin: 1.25rem 0;
    overflow-x: auto;
    overflow-y: hidden;
}

/* ── Quotes (from transcript integration — instructor-selected only) ────── */
article.lecture blockquote.quote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--lb-sea);
    background: var(--lb-fog-050);
    font-style: italic;
    color: var(--lb-ink);
    border-radius: 0 6px 6px 0;
}
article.lecture blockquote.quote cite {
    display: block;
    margin-top: 0.6rem;
    font-style: normal;
    font-size: 0.85rem;
    color: var(--lb-sea);
    font-family: var(--lb-font-display);
}

/* ── Footnotes ────────────────────────────────────────────────────────── */
article.lecture .footnotes {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--lb-fog-200);
    font-size: 0.9rem;
}
article.lecture .footnote-back {
    text-decoration: none;
    margin-left: 0.3em;
    color: var(--lb-sea);
}

/* ── Fact-check UI (canon + agentic verdict markers) ──────────────────── */
article.lecture claim[data-check] {
    /* Claims render as ordinary inline text — the check is metadata for the
       gate. If Meghan wants a subtle "verified" marker later, style here. */
}

/* ── Shell: sidebar TOC + main column (v2) ─────────────────────────────
 * The shell lives OUTSIDE article.lecture so the article's own max-width
 * still gives comfortable reading measure. On narrow viewports the TOC
 * collapses to a top strip; on ≥ 960px it sits to the left as a sticky
 * sidebar.
 * -------------------------------------------------------------------- */
.lecture-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 84rem;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 960px) {
    .lecture-shell {
        grid-template-columns: 16rem 1fr;
        align-items: start;
    }
}
.lecture-toc {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    font-family: var(--lb-font-body);
    font-size: 0.9rem;
    padding: 1rem 0.75rem;
    border-right: 1px solid var(--lb-fog-200);
}
.lecture-toc .toc-heading {
    font-family: var(--lb-font-display);
    color: var(--lb-navy);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem;
    font-weight: 700;
}
.lecture-toc ol { list-style: none; padding: 0; margin: 0; }
.lecture-toc ol ol { padding-left: 0.85rem; margin: 0.25rem 0; }
.lecture-toc li { margin: 0.25rem 0; line-height: 1.35; }
.lecture-toc a {
    color: var(--lb-ink);
    text-decoration: none;
    display: block;
    padding: 0.15rem 0.25rem;
    border-left: 2px solid transparent;
    font-weight: 650;
}
.lecture-toc a:hover,
.lecture-toc a:focus-visible {
    color: var(--lb-link);
    border-left-color: var(--lb-link);
    background: var(--lb-fog-050);
    outline: none;
}
.lecture-toc .toc-h3 a { font-size: 0.85rem; color: var(--lb-fog-300); font-weight: 550; }
.lecture-toc .toc-h3 a:hover { color: var(--lb-link); }
@media (max-width: 959px) {
    .lecture-toc {
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--lb-fog-200);
    }
}

/* ── Watch These (attached-video callout) ─────────────────────────────── */
article.lecture .watch-these {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem;
    background: var(--lb-callout-info-bg);
    border-left: 4px solid var(--lb-sea);
    border-radius: 6px;
}
article.lecture .watch-these .wt-heading {
    font-family: var(--lb-font-display);
    color: var(--lb-navy);
    font-size: 1.1rem;
    margin: 0 0 0.75rem;
    display: flex; align-items: center; gap: 0.6rem;
}
article.lecture .watch-these .wt-chip {
    background: var(--lb-navy);
    color: var(--lb-cream);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
}
article.lecture .watch-these .wt-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
@media (min-width: 720px) {
    article.lecture .watch-these .wt-cards { grid-template-columns: 1fr 1fr; }
}
article.lecture .wt-card {
    background: var(--lb-cream);
    border: 1px solid var(--lb-fog-200);
    border-radius: 6px;
    padding: 0.75rem 0.9rem;
    display: flex; flex-direction: column; gap: 0.4rem;
}
article.lecture .wt-title { font-family: var(--lb-font-display); font-size: 1rem; margin: 0; color: var(--lb-navy); }
article.lecture .wt-meta  { font-size: 0.85rem; color: var(--lb-fog-300); margin: 0; }
article.lecture .wt-note  { font-size: 0.9rem; margin: 0; }
article.lecture .wt-actions a {
    display: inline-block; padding: 0.35rem 0.75rem;
    background: var(--lb-navy); color: var(--lb-cream);
    border-radius: 4px; text-decoration: none;
    font-family: var(--lb-font-display); font-size: 0.85rem; font-weight: 600;
}
article.lecture .wt-actions a:hover { background: var(--lb-navy-deep); }

/* ── Chart card (plotly / static figure) ──────────────────────────────── */
article.lecture .chart-card {
    margin: 1.75rem 0;
    padding: 1rem 1.25rem;
    background: var(--lb-fog-050);
    border: 1px solid var(--lb-fog-200);
    border-left: 3px solid var(--lb-navy);
    border-radius: 6px;
}
article.lecture .chart-title { font-family: var(--lb-font-display); color: var(--lb-navy); font-weight: 700; font-size: 1rem; margin: 0 0 0.35rem; }
article.lecture .chart-desc  { font-size: 0.9rem; color: var(--lb-fog-300); margin: 0 0 0.75rem; }
article.lecture .plotly-target { width: 100%; min-height: 320px; }

/* ── Calc card (worked example with formula + inputs + result) ────────── */
article.lecture details.calc-card {
    margin: 1.5rem 0;
    padding: 0.6rem 1.15rem;
    background: var(--lb-fog-050);
    border: 1px solid var(--lb-fog-200);
    border-left: 3px solid var(--lb-sea);
    border-radius: 6px;
}
article.lecture details.calc-card[open] { padding-bottom: 1rem; }
article.lecture details.calc-card summary.calc-summary {
    font-family: var(--lb-font-display);
    font-weight: 700; font-size: 0.98rem;
    cursor: pointer; list-style: none;
    padding: 0.35rem 0; margin: 0;
    color: var(--lb-navy);
}
article.lecture details.calc-card summary.calc-summary::-webkit-details-marker { display: none; }
article.lecture .calc-formula { text-align: center; margin: 0.5rem 0 0.75rem; }
article.lecture .calc-inputs { font-size: 0.92rem; }
article.lecture .calc-result { margin: 0.6rem 0 0; }

/* ── Lecture folds (Check Yourself, source code, worked answers) ──────── */
/* Native disclosure gives students keyboard-accessible progressive
 * disclosure without requiring a client-side component. */
article.lecture details.lecture-fold {
    margin: 1.5rem 0;
    border: 1px solid var(--lb-fog-200);
    border-radius: 6px;
    background: var(--lb-fog-050);
    overflow: clip;
}
article.lecture details.lecture-fold > summary {
    min-height: 2.75rem;
    padding: 0.7rem 1.15rem;
    color: var(--lb-navy);
    font-family: var(--lb-font-display);
    font-weight: 700;
    font-size: 0.98rem;
    line-height: 1.35;
    cursor: pointer;
}
article.lecture details.lecture-fold > summary:hover {
    background: var(--lb-fog-100);
}
article.lecture details.lecture-fold > summary:focus-visible {
    outline: var(--lb-focus-outline);
    outline-offset: -4px;
}
article.lecture details.lecture-fold[open] > summary {
    border-bottom: 1px solid var(--lb-fog-200);
}
article.lecture .lecture-fold-body {
    padding: 1rem 1.15rem;
}
article.lecture .lecture-fold-body > :first-child { margin-top: 0; }
article.lecture .lecture-fold-body > :last-child { margin-bottom: 0; }

/* Answers are deliberately calm and affirmative, distinct from warnings and
 * from the technical treatment used for optional source code. */
article.lecture details.check-yourself-answer,
article.lecture details.worked-answer {
    background: var(--lb-callout-tip-bg);
    border-color: color-mix(in srgb, var(--lb-moss) 35%, var(--lb-fog-200));
}
article.lecture details.check-yourself-answer > summary,
article.lecture details.worked-answer > summary {
    color: var(--lb-moss);
}
article.lecture details.check-yourself-answer[open] > summary,
article.lecture details.worked-answer[open] > summary {
    border-bottom-color: color-mix(in srgb, var(--lb-moss) 30%, var(--lb-fog-200));
}

/* ── Check Yourself review cards ─────────────────────────────────────────
 * This is the lecture-native equivalent of the archived Teaching GOAT
 * review-problem accordion: a compact skill title when collapsed and one
 * clean worked problem when expanded. The complete prompt lives inside the
 * card, rather than leaving an orphaned "Reveal answer" box below it. */
article.lecture details.check-yourself-card {
    margin: 0.85rem 0;
    background: #F2FAEF;
    border: 1px solid #C7E5C2;
    border-left: 5px solid #35A64A;
    border-radius: 5px;
    overflow: clip;
}
article.lecture details.check-yourself-card > summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.1rem;
    padding: 0.7rem 0.9rem;
    color: #17421E;
    font-family: var(--lb-font-display);
    font-weight: 700;
    line-height: 1.35;
    list-style: none;
}
article.lecture details.check-yourself-card > summary::-webkit-details-marker { display: none; }
article.lecture details.check-yourself-card > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0.65rem;
    height: 0.65rem;
    border: 2px solid #2F8F41;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #F2FAEF;
    background: #56B96A;
}
article.lecture details.check-yourself-card > summary::after {
    content: "›";
    margin-left: auto;
    color: #2F8F41;
    font-family: sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 140ms ease;
}
article.lecture details.check-yourself-card > summary:hover {
    background: #E7F6E3;
}
article.lecture details.check-yourself-card[open] > summary {
    background: #E7F6E3;
    border-bottom: 1px solid #C7E5C2;
}
article.lecture details.check-yourself-card[open] > summary::after {
    transform: rotate(90deg);
}
article.lecture details.check-yourself-card .lecture-fold-body {
    padding: 1rem 1.15rem 1.1rem;
    background: #FFFFFF;
    color: #172018;
}
article.lecture details.check-yourself-card .lecture-fold-body p,
article.lecture details.check-yourself-card .lecture-fold-body li,
article.lecture details.check-yourself-card .lecture-fold-body strong,
article.lecture details.check-yourself-card .lecture-fold-body em {
    color: #172018;
}
article.lecture details.check-yourself-card details.check-yourself-answer {
    margin: 1rem 0 0;
    background: #F4FBF1;
    border-left-width: 3px;
}
article.lecture details.check-yourself-card details.check-yourself-answer > summary {
    min-height: 2.7rem;
    font-size: 0.95rem;
}

article.lecture details.code-fold {
    background: var(--lb-fog-100);
    border-color: var(--lb-fog-200);
}
article.lecture details.code-fold > summary {
    color: var(--lb-navy-deep);
}
article.lecture details.code-fold .lecture-fold-body {
    padding: 0;
}
article.lecture details.code-fold pre {
    margin: 0;
    border: 0;
    border-radius: 0;
}

/* ── Citation superscripts ────────────────────────────────────────────── */
article.lecture sup.cite { font-size: 0.7em; margin-left: 1px; vertical-align: super; }
article.lecture sup.cite a { color: var(--lb-link); text-decoration: none; }
article.lecture sup.cite a:hover { text-decoration: underline; }
article.lecture .references { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--lb-fog-200); font-size: 0.92rem; }
article.lecture ol.reflist { padding-left: 1.6rem; }
article.lecture ol.reflist li { margin: 0.4rem 0; }

/* ── Stub banner (draft lecture notice) ───────────────────────────────── */
article.lecture .stub-banner {
    background: var(--lb-callout-warn-bg);
    border-left: 4px solid var(--lb-gold);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    font-family: var(--lb-font-body);
    font-size: 0.95rem;
}

/* ── Motion preferences ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    article.lecture * {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Print ────────────────────────────────────────────────────────────── */
@media print {
    article.lecture {
        max-width: none;
        padding: 0;
        color: #000;
    }
    article.lecture a { color: #000; text-decoration: underline; }
    /* Preserve hidden worked answers and source snippets in a printable
       handout. The disclosure control remains in the markup for screen use. */
    article.lecture details.lecture-fold > .lecture-fold-body {
        display: block !important;
    }
    article.lecture a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #444;
    }
    article.lecture pre, article.lecture .admonition {
        background: transparent;
        border-left-color: #444;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   v2.1 additions (2026-09-13) — figures, numbered equations, eq-refs, and
   dark-theme variant matching globalomnipanopticon's navy+teal chrome.

   v2.2 (2026-09-13 evening) — equation-number moved from grid to
   flex+absolute so KaTeX display stays centered in wide article columns
   instead of pushed left with lots of whitespace. Justified prose +
   automatic hyphens for article-style reading, with headings/captions/
   tables/code reset to left. Full dark-mode coverage for .chapter-refs,
   .watch-these, .wt-*, chart-card, calc-card, tables, and KaTeX glyphs —
   the wrapper's lux-bootstrap grey/ink defaults were bleeding through
   onto the navy article surface as near-invisible text.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Figures with captions (renderer emits <figure class="lecture-figure">) */
article.lecture figure.lecture-figure {
    margin: 1.75rem auto;
    max-width: 720px;
    text-align: center;
}
article.lecture figure.lecture-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(18, 20, 26, 0.10);
}
article.lecture figure.lecture-figure figcaption {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    color: #4A5666;
    font-style: italic;
    line-height: 1.45;
}

/* ── Numbered display equations
   The renderer emits Quarto-labeled display math as:
     <div class="equation numbered-equation" id="eq-<slug>">
       <div class="equation-body">\[ ... \]</div>
       <div class="equation-number">(N)</div>
     </div>

   Layout: the equation-body is a centered flex row so KaTeX's centered
   display block stays centered in the article column; the equation-number
   is absolutely positioned at the row's right edge so it sits on the same
   baseline as the equation without stealing horizontal space from it. This
   avoids the "grid pushes equation left" problem where a `1fr auto` grid
   reserves a column even when the equation itself is short.              */
article.lecture .equation.numbered-equation {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0;
    padding-right: 3.5rem;     /* reserve space for the number */
    scroll-margin-top: 1rem;   /* nice landing when jumping to #eq-<slug> */
    text-align: center;
}
article.lecture .equation.numbered-equation .equation-body {
    min-width: 0;
    flex: 0 1 auto;
    overflow-x: auto;
    overflow-y: hidden;
    text-align: center;
}
article.lecture .equation.numbered-equation .equation-body .katex-display {
    margin: 0;
}
article.lecture .equation.numbered-equation .equation-number {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--lb-font-math);
    color: #5A6678;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 30em) {
    /* On very narrow screens, stack number below to avoid overlap. */
    article.lecture .equation.numbered-equation {
        display: block;
        padding-right: 0;
        text-align: center;
    }
    article.lecture .equation.numbered-equation .equation-number {
        position: static;
        transform: none;
        display: block;
        margin-top: 0.25rem;
        font-size: 0.9em;
    }
}

/* ── Inline equation cross-references: <a class="eq-ref"> */
article.lecture a.eq-ref {
    color: var(--lb-link);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    white-space: nowrap;
}
article.lecture a.eq-ref:hover,
article.lecture a.eq-ref:focus {
    border-bottom-style: solid;
}
article.lecture a.eq-ref.eq-ref-missing {
    color: #B85C3A;
    border-bottom-style: dashed;
}

/* ══════════════════════════════════════════════════════════════════════════
   Dark theme
   -----------------------------------------------------------------------
   Activated by setting data-theme="dark" on <article class="lecture">.
   Palette mirrors globalomnipanopticon.com's site chrome so the toggle
   snaps from cream-parchment to navy-cinematic in one click.

   WCAG AA contrast on the dark surface:
     - fog-100 #E6EAF1 on ink-050 #0A1220         → 14.9:1  (AAA)
     - teal-400 #4FD1C5 on ink-050                →  9.4:1  (AAA)
     - amber-400 #F4B860 on ink-050               →  9.7:1  (AAA)
     - link teal on ink-100 #101C2F               →  8.5:1  (AAA)
   ══════════════════════════════════════════════════════════════════════════ */
article.lecture[data-theme="dark"] {
    --lb-ink:        #E6EAF1;   /* body text (fog-100) */
    --lb-navy:       #4FD1C5;   /* accent flips to teal (was navy on cream) */
    --lb-navy-deep:  #2BB6A8;
    --lb-link:       #7FE2D8;   /* brighter teal for link legibility */
    --lb-sea:        #F4B860;   /* kicker/subject amber for warmth */
    --lb-cream:      #0A1220;   /* page background (ink-050) */
    --lb-fog-050:    #101C2F;   /* surface */
    --lb-fog-100:    #182A44;   /* code fence background */
    --lb-fog-200:    #2A4263;   /* rule + hairline */
    --lb-fog-300:    #8594AB;   /* muted text */
    --lb-surface-alt:#13263F;   /* provenance panel on dark navy */

    --lb-callout-info-bg:    #12253F;
    --lb-callout-warn-bg:    #17283D;
    --lb-callout-tip-bg:     #12332A;
    --lb-callout-danger-bg:  #251E32;

    --lb-gold:       #F4B860;
    --lb-moss:       #6EBF87;

    --lb-focus-outline: 2px solid var(--lb-link);

    background: var(--lb-cream);
    color: var(--lb-ink);
}

/* Elements that don't inherit token colours natively */
article.lecture[data-theme="dark"] h1,
article.lecture[data-theme="dark"] h2,
article.lecture[data-theme="dark"] h3,
article.lecture[data-theme="dark"] h4 {
    color: var(--lb-navy);
}
article.lecture[data-theme="dark"] a {
    color: var(--lb-link);
}
article.lecture[data-theme="dark"] .kicker,
article.lecture[data-theme="dark"] .lecture-header .kicker {
    color: var(--lb-sea);
}
article.lecture[data-theme="dark"] figure.lecture-figure figcaption {
    color: #B9C3D3;
}
article.lecture[data-theme="dark"] figure.lecture-figure img {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
article.lecture[data-theme="dark"] .equation.numbered-equation .equation-number {
    color: #B9C3D3;
}
article.lecture[data-theme="dark"] a.eq-ref.eq-ref-missing {
    color: #F09876;
}
article.lecture[data-theme="dark"] pre,
article.lecture[data-theme="dark"] code {
    background: var(--lb-fog-100);
    color: var(--lb-ink);
}
article.lecture[data-theme="dark"] blockquote.quote {
    background: var(--lb-fog-050);
    border-left-color: var(--lb-navy);
    color: var(--lb-ink);
}
/* Callout backgrounds and borders — inherit the token overrides above */
article.lecture[data-theme="dark"] .admonition,
article.lecture[data-theme="dark"] .callout {
    color: var(--lb-ink);
    border-color: var(--lb-fog-200);
}
article.lecture[data-theme="dark"] .callout-warning {
    border-left-color: #F4B860;
}
article.lecture[data-theme="dark"] .callout-important,
article.lecture[data-theme="dark"] .callout-caution {
    border-left-color: #F09876;
}
article.lecture[data-theme="dark"] .callout-warning .callout-icon,
article.lecture[data-theme="dark"] .callout-warning .callout-title {
    color: #FFD28A;
}
article.lecture[data-theme="dark"] .callout-important .callout-icon,
article.lecture[data-theme="dark"] .callout-important .callout-title,
article.lecture[data-theme="dark"] .callout-caution .callout-icon,
article.lecture[data-theme="dark"] .callout-caution .callout-title {
    color: #FFB4A3;
}

/* The wrapper's lux-bootstrap sets .chapter-refs to a hardcoded #5A6678 grey
   assuming a cream page; on dark navy that reads as near-invisible. Same
   fix for any other body-level text the wrapper styles at #12141A that ends
   up inside the article on dark: force the readable dark palette. */
article.lecture[data-theme="dark"] .chapter-refs,
article.lecture[data-theme="dark"] .chapter-refs strong,
article.lecture[data-theme="dark"] p,
article.lecture[data-theme="dark"] li,
article.lecture[data-theme="dark"] strong,
article.lecture[data-theme="dark"] em {
    color: var(--lb-ink);
}
article.lecture[data-theme="dark"] .authorship-provenance {
    background: var(--lb-surface-alt);
    border-left-color: var(--lb-navy);
}
article.lecture[data-theme="dark"] .authorship-provenance h2,
article.lecture[data-theme="dark"] .authorship-provenance p,
article.lecture[data-theme="dark"] .authorship-provenance strong {
    color: var(--lb-ink);
}
/* KaTeX renders black glyphs by default — flip them to the readable
   dark palette so display math stays visible on the navy surface. */
article.lecture[data-theme="dark"] .katex,
article.lecture[data-theme="dark"] .katex * {
    color: var(--lb-ink);
}

/* Watch These chip stays readable on dark surface */
article.lecture[data-theme="dark"] .watch-these {
    background: var(--lb-callout-info-bg);
    border-left-color: var(--lb-navy);
}
article.lecture[data-theme="dark"] .wt-card {
    background: var(--lb-fog-050);
    border-color: var(--lb-fog-200);
}
article.lecture[data-theme="dark"] .wt-chip {
    background: var(--lb-navy);
    color: var(--lb-cream);
}
article.lecture[data-theme="dark"] .wt-title,
article.lecture[data-theme="dark"] .wt-heading {
    color: var(--lb-navy);
}
article.lecture[data-theme="dark"] .wt-meta {
    color: var(--lb-fog-300);
}
article.lecture[data-theme="dark"] .wt-actions a {
    background: var(--lb-navy);
    color: var(--lb-cream);
}

/* Data panels remain light in dark mode. A graph, table, or calculation asks
   readers to compare fine visual detail, so it needs a stable high-contrast
   canvas rather than a second dark surface. */
article.lecture[data-theme="dark"] .chart-card,
article.lecture[data-theme="dark"] details.calc-card {
    background: #FFFFFF;
    border-color: #B8C5D4;
    color: #12141A;
}
article.lecture[data-theme="dark"] .chart-title,
article.lecture[data-theme="dark"] details.calc-card summary.calc-summary {
    color: #1B2A4A;
}
article.lecture[data-theme="dark"] .chart-desc {
    color: #4A5666;
}
article.lecture[data-theme="dark"] .chart-card p,
article.lecture[data-theme="dark"] details.calc-card p,
article.lecture[data-theme="dark"] details.calc-card li,
article.lecture[data-theme="dark"] details.calc-card strong,
article.lecture[data-theme="dark"] details.calc-card em,
article.lecture[data-theme="dark"] details.calc-card .calc-inputs,
article.lecture[data-theme="dark"] details.calc-card .calc-result {
    color: #12141A;
}
article.lecture[data-theme="dark"] details.lecture-fold {
    background: var(--lb-fog-050);
    border-color: var(--lb-fog-200);
}
article.lecture[data-theme="dark"] details.lecture-fold > summary {
    color: var(--lb-navy);
}
article.lecture[data-theme="dark"] details.lecture-fold > summary:hover {
    background: var(--lb-fog-100);
}
article.lecture[data-theme="dark"] details.check-yourself-answer,
article.lecture[data-theme="dark"] details.worked-answer {
    background: var(--lb-callout-tip-bg);
}
article.lecture[data-theme="dark"] details.check-yourself-answer > summary,
article.lecture[data-theme="dark"] details.worked-answer > summary {
    color: var(--lb-moss);
}
article.lecture[data-theme="dark"] details.check-yourself-card {
    background: #F2FAEF;
    border-color: #C7E5C2;
    border-left-color: #35A64A;
}
article.lecture[data-theme="dark"] details.check-yourself-card > summary,
article.lecture[data-theme="dark"] details.check-yourself-card > summary:hover,
article.lecture[data-theme="dark"] details.check-yourself-card[open] > summary {
    background: #E7F6E3;
    color: #17421E;
    border-bottom-color: #C7E5C2;
}
article.lecture[data-theme="dark"] details.check-yourself-card .lecture-fold-body,
article.lecture[data-theme="dark"] details.check-yourself-card .lecture-fold-body p,
article.lecture[data-theme="dark"] details.check-yourself-card .lecture-fold-body li,
article.lecture[data-theme="dark"] details.check-yourself-card .lecture-fold-body strong,
article.lecture[data-theme="dark"] details.check-yourself-card .lecture-fold-body em {
    background: #FFFFFF;
    color: #172018;
}
article.lecture[data-theme="dark"] details.check-yourself-card details.check-yourself-answer,
article.lecture[data-theme="dark"] details.check-yourself-card details.check-yourself-answer > summary,
article.lecture[data-theme="dark"] details.check-yourself-card details.check-yourself-answer .lecture-fold-body {
    background: #F4FBF1;
    color: #172018;
}

/* Tables are the same light, high-contrast data surface. */
article.lecture[data-theme="dark"] .table-scroll,
article.lecture[data-theme="dark"] table {
    background: #FFFFFF;
    color: #12141A;
}
article.lecture[data-theme="dark"] thead th {
    background: #1B2A4A;
    color: #FFFFFF;
}
article.lecture[data-theme="dark"] tbody td,
article.lecture[data-theme="dark"] tbody th {
    background: #FFFFFF;
    border-bottom-color: #D8E0E8;
    color: #12141A;
}
article.lecture[data-theme="dark"] tbody tr:nth-child(2n) td {
    background: #F3F6F8;
}
/* KaTeX inherits the dark article ink by default. Tables intentionally stay
   white in dark mode, so their inline and display math needs an explicit dark
   ink override too. */
article.lecture[data-theme="dark"] .table-scroll .katex,
article.lecture[data-theme="dark"] .table-scroll .katex * {
    color: #12141A;
}

/* Equation number readable on dark surface (overrides the #5A6678 above) */
article.lecture[data-theme="dark"] .equation.numbered-equation .equation-number {
    color: #B9C3D3;
}

/* Sidebar TOC sits OUTSIDE article.lecture so token overrides can't cascade
   into it. Use the wrapper's :has() pattern so the TOC re-tokenizes
   whenever the article flips to dark. Palette matches the dark article. */
body:has(article.lecture[data-theme="dark"]) .lecture-toc {
    border-right-color: #2A4263;
}
body:has(article.lecture[data-theme="dark"]) .lecture-toc .toc-heading {
    color: #4FD1C5;
}
body:has(article.lecture[data-theme="dark"]) .lecture-toc a {
    color: #F6F8FC;
    font-weight: 650;
}
body:has(article.lecture[data-theme="dark"]) .lecture-toc a:hover,
body:has(article.lecture[data-theme="dark"]) .lecture-toc a:focus-visible {
    color: #7FE2D8;
    border-left-color: #7FE2D8;
    background: #101C2F;
}
body:has(article.lecture[data-theme="dark"]) .lecture-toc .toc-h3 a {
    color: #C8D3E3;
    font-weight: 550;
}

/* Print always forces light. Never print dark backgrounds — saves toner and
   matches the top-of-file design target ("Print-friendly, no dark backgrounds"). */
@media print {
    article.lecture[data-theme="dark"] {
        background: #fff !important;
        color: #000 !important;
    }
    article.lecture[data-theme="dark"] h1,
    article.lecture[data-theme="dark"] h2,
    article.lecture[data-theme="dark"] h3,
    article.lecture[data-theme="dark"] h4,
    article.lecture[data-theme="dark"] a {
        color: #000 !important;
    }
}