/**
 * v5-chrome.css — CS 145 layout & chrome (FA-26V5)
 *
 * Side-by-side with shared/core-styles.css.
 *
 * EVERY selector is gated by body[data-module] so this file has
 * NO effect on a page until base-template.html (Phase 2) adds the
 * attribute via build.py (Phase 3). Until then, this stylesheet is
 * inert — safe to ship to every page.
 *
 * Reads variables from v5-tokens.css. Load that file FIRST.
 *
 * Layout (module page):
 *   ┌──────────┬───────────────────────────────────┐
 *   │   rail   │   article (70ch)   │    aside    │
 *   │ (240px)  │                    │   (220px)   │
 *   └──────────┴───────────────────────────────────┘
 */

/* ──────────────────────────────────────────────────────
   LAYOUT VARIABLES
   ────────────────────────────────────────────────────── */
body[data-module] {
    --rail-w:  240px;
    --aside-w: 220px;

    font-family: var(--v5-sans);
    font-size: 16px;
    color: var(--v5-text);
    background: var(--v5-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'cv11','ss01';
    margin: 0;
}

body[data-module] a {
    color: var(--accent);
    text-decoration: none;
}
body[data-module] a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ──────────────────────────────────────────────────────
   PAGE LAYOUT
   ────────────────────────────────────────────────────── */
body[data-module] .v5-layout {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr;
    min-height: 100vh;
}

/* ──────────────────────────────────────────────────────
   RAIL (sidebar)
   ────────────────────────────────────────────────────── */
body[data-module] .v5-rail {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--rail-w);
    background: var(--v5-bg);
    border-right: 1px solid var(--v5-hairline);
    padding: 1.25rem 1rem 2rem;
    overflow-y: auto;
}

body[data-module] .v5-rail-mark {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.25rem 0.5rem 0.5rem;
    margin-bottom: 0.6rem;
    color: inherit;
    text-decoration: none;
}
body[data-module] .v5-rail-mark:hover { text-decoration: none; }

body[data-module] .v5-rail-mark-text {
    font-family: var(--v5-serif);
    font-weight: 500;
    font-size: 1.25rem;
    letter-spacing: -0.015em;
    color: var(--v5-ink);
    font-variation-settings: 'opsz' 36;
}

body[data-module] .v5-rail-module {
    display: flex; align-items: center; gap: 0.5rem;
    margin: 0 0.5rem 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--v5-hairline);
}

body[data-module] .v5-rail-module .v5-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--accent);
    color: white;
    font-family: var(--v5-mono);
    font-weight: 600;
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: var(--v5-r-sm);
}
body[data-module] .v5-rail-module .v5-badge svg { width: 12px; height: 12px; }

body[data-module] .v5-rail-module .v5-label {
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--v5-muted);
}

body[data-module] .v5-rail-section { margin-bottom: 1.1rem; }

body[data-module] .v5-rail-section-title {
    padding: 0 0.5rem;
    font-family: var(--v5-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--v5-muted);
    margin-bottom: 0.3rem;
}

body[data-module] .v5-rail-link {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.32rem 0.5rem;
    font-family: var(--v5-sans);
    font-size: 0.875rem;
    color: var(--v5-text);
    border-left: 2px solid transparent;
    margin-left: -2px;
    border-radius: 0 var(--v5-r-sm) var(--v5-r-sm) 0;
    transition: color 0.12s, background 0.12s;
    line-height: 1.3;
    text-decoration: none;
}

body[data-module] .v5-rail-link .v5-dot {
    width: 6px; height: 6px;
    border-radius: 99px;
    background: transparent;
    border: 1.5px solid var(--v5-hairline-2);
    flex-shrink: 0;
}
body[data-module] .v5-rail-link.is-completed .v5-dot { background: var(--v5-done); border-color: var(--v5-done); }
body[data-module] .v5-rail-link.is-progress  .v5-dot { background: var(--v5-warn); border-color: var(--v5-warn); }

body[data-module] .v5-rail-link:hover {
    color: var(--v5-ink);
    background: var(--accent-tint);
    text-decoration: none;
}
body[data-module] .v5-rail-link.is-active {
    color: var(--v5-ink);
    background: var(--accent-tint);
    border-left-color: var(--accent);
    font-weight: 600;
}

body[data-module] .v5-rail-link .v5-pill-mini {
    font-family: var(--v5-mono);
    font-weight: 600;
    font-size: 0.55rem;
    background: var(--accent);
    color: white;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: auto;
    letter-spacing: 0.05em;
}
body[data-module] .v5-rail-link .v5-pill-mini.is-case {
    background: var(--accent-tint);
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* ──────────────────────────────────────────────────────
   MAIN + ARTICLE
   ────────────────────────────────────────────────────── */
body[data-module] .v5-main {
    grid-column: 2;
    padding: 2rem 3rem 6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-w);
    gap: 3rem;
    max-width: 1280px;
}

body[data-module] .v5-article {
    /* No max-width — debug tables, side-by-side blocks, code, and SVG diagrams
       all need to fill the .main column. Prose still reads at a comfortable
       length because .main itself is capped at 1280px. */
    min-width: 0;
}

/* ──────────────────────────────────────────────────────
   PAGE HEAD (crumbs, title, meta strip, read bar)
   ────────────────────────────────────────────────────── */
body[data-module] .v5-crumbs {
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--v5-muted);
    margin-bottom: 0.85rem;
    display: flex; align-items: center; gap: 0.5rem;
}
body[data-module] .v5-crumbs .v5-crumb-sep    { color: var(--v5-hairline-2); }
body[data-module] .v5-crumbs .v5-crumb-module {
    color: white;
    background: var(--accent);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}
body[data-module] .v5-crumbs .v5-crumb-here { color: var(--v5-ink); font-weight: 600; }

body[data-module] .v5-page-title {
    font-family: var(--v5-serif);
    font-weight: 500;
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--v5-ink);
    margin: 0 0 1rem;
    font-variation-settings: 'opsz' 144;
}

body[data-module] .v5-page-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v5-muted);
    padding: 0.7rem 0;
    border-top: 1px solid var(--v5-hairline);
    border-bottom: 1px solid var(--v5-hairline);
    margin-bottom: 2rem;
}
body[data-module] .v5-page-meta b   { color: var(--v5-ink); font-weight: 600; }
body[data-module] .v5-page-meta .v5-meta-sep { color: var(--v5-hairline-2); }

body[data-module] .v5-read-bar {
    position: fixed;
    top: 0; left: var(--rail-w); right: 0;
    height: 2px;
    background: transparent;
    z-index: 100;
}
body[data-module] .v5-read-bar-fill {
    height: 100%;
    background: var(--accent);
    width: 0;
    transition: width 0.1s linear;
}

/* ──────────────────────────────────────────────────────
   ARTICLE BODY (typography)
   These rules style the markdown output the converter drops
   into .v5-article — no class on individual elements needed.
   ────────────────────────────────────────────────────── */
body[data-module] .v5-article p {
    font-family: var(--v5-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--v5-text);
    margin: 1rem 0;
}

body[data-module] .v5-article h2 {
    font-family: var(--v5-serif);
    font-weight: 500;
    font-size: 1.65rem;
    letter-spacing: -0.015em;
    color: var(--v5-ink);
    margin: 2.75rem 0 0.85rem;
    line-height: 1.15;
    font-variation-settings: 'opsz' 60;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--v5-hairline);
}

body[data-module] .v5-article h3 {
    font-family: var(--v5-sans);
    font-weight: 600;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    margin: 1.75rem 0 0.5rem;
}

body[data-module] .v5-article h4 {
    font-family: var(--v5-sans);
    font-weight: 600;
    font-size: 1rem;
    color: var(--v5-ink);
    margin: 1.25rem 0 0.4rem;
}

body[data-module] .v5-article ul,
body[data-module] .v5-article ol {
    margin: 0.6rem 0 1rem 1.25rem;
    padding-left: 0;
}
body[data-module] .v5-article li {
    margin: 0.35rem 0;
    line-height: 1.55;
    color: var(--v5-text);
}
body[data-module] .v5-article li strong { font-weight: 600; color: var(--v5-ink); }

body[data-module] .v5-article hr {
    border: none;
    border-top: 1px dashed var(--v5-hairline-2);
    margin: 2rem 0;
}

body[data-module] .v5-article code {
    font-family: var(--v5-mono);
    font-size: 0.88em;
    background: var(--accent-tint);
    color: var(--accent);
    padding: 1px 5px;
    border-radius: 3px;
}
body[data-module] .v5-article pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
}

/* ──────────────────────────────────────────────────────
   CODE BLOCKS
   ──────────────────────────────────────────────────────
   The converter currently emits <pre><code class="language-sql">...</code></pre>
   directly. We style that AND the richer wrapper variant
   (.v5-code-block) consistently. */
body[data-module] .v5-code-block,
body[data-module] .v5-article pre {
    background: var(--v5-surface);
    border-radius: var(--v5-r);
    box-shadow: 0 0 0 1px var(--v5-hairline);
    margin: 1.25rem 0;
    overflow: hidden;
}

body[data-module] .v5-code-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.85rem;
    background: var(--v5-bg);
    border-bottom: 1px solid var(--v5-hairline);
    font-family: var(--v5-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--v5-muted);
}
body[data-module] .v5-code-block-head b { color: var(--v5-ink); font-weight: 600; }
body[data-module] .v5-code-block-head .v5-lang {
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
}

body[data-module] .v5-code-actions { display: flex; gap: 0.4rem; }
body[data-module] .v5-code-btn {
    font-family: var(--v5-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
    border: 1px solid var(--v5-hairline);
    color: var(--v5-text);
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}
body[data-module] .v5-code-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

body[data-module] .v5-code-block pre,
body[data-module] .v5-article pre {
    margin: 1.25rem 0;
    padding: 1rem 1.2rem;
    font-family: var(--v5-mono);
    font-size: 0.92rem;
    line-height: 1.55;
    /* Uniform dark treatment — matches the legacy pre.language-sql look so
       inline-styled <pre style="background:#1e293b"> blocks (e.g. the FloWS
       Python example) get readable light text instead of black-on-black. */
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%) !important;
    color: #E6EDF3 !important;
    border: 1px solid rgba(56, 139, 253, 0.18) !important;
    border-radius: var(--v5-r);
    box-shadow: 0 4px 6px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.05);
    /* pre-wrap so long lines and SQL comments wrap inside narrow columns
       and don't slip behind right-edge overlays. Whitespace preserved. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
}
/* Plain text (no syntax-class span) inside a <pre> needs to inherit the
   light foreground we just set. */
body[data-module] .v5-article pre,
body[data-module] .v5-article pre code {
    color: #E6EDF3 !important;
}
/* SQL syntax tints — re-pick on the dark background. The accent-blue
   (M1) on dark is fine; bumping comment + string brightness so they
   don't get lost. */
body[data-module] .sql-comment { color: #8B96A6 !important; font-style: italic; }
body[data-module] .sql-string  { color: #7EE787 !important; }
body[data-module] .sql-number  { color: #D2A8FF !important; }
body[data-module] .sql-table   { color: #FFA657 !important; font-weight: 500; }
body[data-module] .sql-operator{ color: #E6EDF3 !important; }
body[data-module] .sql-keyword,
body[data-module] .sql-function{ color: var(--accent) !important; font-weight: 600; }
/* Side-by-side code is even tighter — drop padding to give text more width */
body[data-module] .side-by-side pre {
    padding: 0.7rem 0.85rem;
    font-size: 0.78rem;
    line-height: 1.5;
}

/* Suppress the legacy `CODE` badge from shared/components.css that pins
   itself to the top-right of every <pre> and overlaps the comment text. */
body[data-module] pre::before {
    content: none !important;
    display: none !important;
}

/* SQL syntax classes emitted by tools/build.py's highlighter.
   Mapping is intentional: keywords pick up the page accent. */
body[data-module] .sql-keyword  { color: var(--accent); font-weight: 600; }
body[data-module] .sql-function { color: var(--m4); font-weight: 500; }
body[data-module] .sql-string   { color: var(--v5-done); }
body[data-module] .sql-comment  { color: var(--v5-muted); font-style: italic; }
body[data-module] .sql-number   { color: var(--m4); }
body[data-module] .sql-operator { color: var(--v5-text); }
body[data-module] .sql-table    { color: var(--m2); font-weight: 500; }

/* ──────────────────────────────────────────────────────
   CALLOUTS
   Three variants. Use class="v5-callout v5-callout--warn"
   (or --danger / --info) on a <div>. */
body[data-module] .v5-callout {
    margin: 1.25rem 0;
    padding: 0.85rem 1rem 0.85rem 2.5rem;
    border-radius: var(--v5-r);
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
}
body[data-module] .v5-callout strong { font-weight: 600; }
body[data-module] .v5-callout::before {
    position: absolute;
    left: 1rem;
    top: 0.95rem;
    width: 18px; height: 18px;
    border-radius: 99px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--v5-sans);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1;
}

body[data-module] .v5-callout--warn   { background: #FEF7E6; color: #6E4D0F; border: 1px solid #F1C97A; }
body[data-module] .v5-callout--warn::before   { content: '!'; color: #B45309; background: #F1C97A; }

body[data-module] .v5-callout--danger { background: #FEECEC; color: #7F1D1D; border: 1px solid #F5A2A2; }
body[data-module] .v5-callout--danger::before { content: '!'; color: #991B1B; background: #F5A2A2; }

body[data-module] .v5-callout--info {
    background: var(--accent-tint);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
body[data-module] .v5-callout--info::before {
    content: 'i';
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    font-style: italic;
}

/* ──────────────────────────────────────────────────────
   DATA TABLES (with _color row bars)
   The converter's process_table_with_colors() strips the
   _color column and writes class="row-blue" / row-orange /
   etc. on each <tr>. We render that as a 3px bar on the
   first cell. */
body[data-module] .v5-article table,
body[data-module] .v5-data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0 1.25rem;
    background: var(--v5-surface);
    border: 1px solid var(--v5-hairline);
    border-radius: var(--v5-r);
    overflow: hidden;
    font-size: 0.875rem;
}

body[data-module] .v5-article thead th,
body[data-module] .v5-data-table thead th {
    background: var(--v5-bg);
    text-align: left;
    padding: 0.5rem 0.85rem;
    font-family: var(--v5-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v5-ink);
    font-weight: 600;
    border-bottom: 1px solid var(--v5-hairline);
}

body[data-module] .v5-article tbody td,
body[data-module] .v5-data-table tbody td {
    padding: 0.45rem 0.85rem;
    border-bottom: 1px solid var(--v5-hairline);
    color: var(--v5-text);
    font-family: var(--v5-mono);
    font-size: 0.85rem;
}

/* Color-bar cells (the converter emits <td class="color-bar blue"> as a
   real cell, full row height). v5 widens it to 6px for visibility. The
   legacy .color-bar.blue { background: var(--color-blue) !important; }
   rules in core-styles.css continue to provide the bar's color so
   row-personality (Mickey blue, Minnie orange, etc.) carries across
   debug tables exactly as before. */
body[data-module] .v5-article td.color-bar,
body[data-module] .v5-article th.color-bar,
body[data-module] .side-by-side td.color-bar,
body[data-module] .side-by-side th.color-bar {
    width:     6px !important;
    min-width: 6px !important;
    max-width: 6px !important;
    padding:   0   !important;
    border:    none;
}

body[data-module] .v5-article tbody tr:last-child td,
body[data-module] .v5-data-table tbody tr:last-child td { border-bottom: none; }

body[data-module] .v5-article td.null,
body[data-module] .v5-data-table td.null {
    color: var(--v5-muted);
    font-style: italic;
}

body[data-module] .v5-table-caption {
    font-family: var(--v5-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--v5-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.4rem;
    display: block;
}

/* ──────────────────────────────────────────────────────
   ASIDE (right marginal column)
   ────────────────────────────────────────────────────── */
body[data-module] .v5-aside {
    position: sticky;
    top: 2rem;
    align-self: start;
    font-size: 0.85rem;
}

body[data-module] .v5-aside-block { margin-bottom: 1.75rem; }

body[data-module] .v5-aside-title {
    font-family: var(--v5-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--v5-muted);
    margin-bottom: 0.55rem;
}

body[data-module] .v5-aside-link {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.875rem;
    color: var(--v5-text);
    border-bottom: 1px solid var(--v5-hairline);
    text-decoration: none;
}
body[data-module] .v5-aside-link:last-child { border-bottom: none; }
body[data-module] .v5-aside-link:hover { color: var(--accent); text-decoration: none; }
body[data-module] .v5-aside-link .v5-aside-meta {
    font-family: var(--v5-mono);
    font-size: 0.6rem;
    color: var(--v5-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
    display: block;
}

body[data-module] .v5-aside-stub {
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    color: var(--v5-muted);
    line-height: 1.55;
    padding: 0.5rem 0.65rem;
    border-left: 2px solid var(--v5-hairline-2);
}

body[data-module] .v5-toc-h2 {
    display: block;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: var(--v5-text);
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    margin-left: -0.6rem;
    text-decoration: none;
}
body[data-module] .v5-toc-h2:hover,
body[data-module] .v5-toc-h2.is-active {
    color: var(--v5-ink);
    border-left-color: var(--accent);
    text-decoration: none;
}

/* ──────────────────────────────────────────────────────
   FOOTER NAV (prev / next)
   ────────────────────────────────────────────────────── */
body[data-module] .v5-footer-nav {
    max-width: 70ch;
    margin: 4rem 0 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--v5-hairline);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

body[data-module] .v5-footer-link {
    display: block;
    padding: 1rem 1.1rem;
    background: var(--v5-surface);
    border: 1px solid var(--v5-hairline);
    border-radius: var(--v5-r);
    transition: border-color 0.15s, transform 0.15s;
    text-decoration: none;
}
body[data-module] .v5-footer-link:hover {
    border-color: var(--accent);
    text-decoration: none;
    transform: translateY(-1px);
}
body[data-module] .v5-footer-link-eyebrow {
    font-family: var(--v5-mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--v5-muted);
    margin-bottom: 0.3rem;
}
body[data-module] .v5-footer-link-title {
    font-family: var(--v5-serif);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--v5-ink);
    font-variation-settings: 'opsz' 36;
    line-height: 1.2;
}
body[data-module] .v5-footer-link.v5-next { text-align: right; }
body[data-module] .v5-footer-link.v5-next .v5-footer-link-eyebrow::after { content: ' →'; color: var(--accent); }
body[data-module] .v5-footer-link.v5-prev .v5-footer-link-eyebrow::before { content: '← '; color: var(--accent); }

/* ──────────────────────────────────────────────────────
   MODE TOGGLE (Docs / Slides)
   Uses the same data-mode contract as shared/slide-system.js.
   Sits at top-right with room for the auth widget. */
body[data-module] .v5-mode-toggle {
    position: fixed;
    top: 1rem;
    right: 5.5rem;       /* leaves room for tracker.js auth widget at right:1rem */
    z-index: 998;
    background: var(--v5-surface);
    border: 1px solid var(--v5-hairline);
    border-radius: 999px;
    padding: 3px;
    display: flex;
    gap: 2px;
    box-shadow: 0 1px 2px rgba(14,14,16,0.05);
}
body[data-module] .v5-mode-btn {
    font-family: var(--v5-mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: transparent;
    border: none;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--v5-muted);
    transition: all 0.15s;
}
body[data-module] .v5-mode-btn:hover { color: var(--v5-ink); }
body[data-module] .v5-mode-btn.active { background: var(--v5-ink); color: white; }

/* ──────────────────────────────────────────────────────
   CASE-STUDY CHROME (only used on case-study pages)
   ────────────────────────────────────────────────────── */
body[data-module] .v5-case-band {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    margin-bottom: 1rem;
    border-radius: var(--v5-r);
    background: var(--accent-tint);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
}
body[data-module] .v5-case-band .v5-case-tag {
    background: var(--accent);
    color: white;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 3px;
    letter-spacing: 0.1em;
}
body[data-module] .v5-case-band .v5-case-meta { color: var(--accent); opacity: 0.85; }
body[data-module] .v5-case-band .v5-case-meta + .v5-case-meta::before {
    content: '·';
    margin: 0 0.5rem;
    opacity: 0.5;
}

body[data-module] .v5-objective {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--v5-surface);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--v5-r) var(--v5-r) 0;
    box-shadow: 0 0 0 1px var(--v5-hairline);
}
body[data-module] .v5-objective .v5-label {
    font-family: var(--v5-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.35rem;
}
body[data-module] .v5-objective .v5-body {
    font-family: var(--v5-serif);
    font-size: 1.15rem;
    line-height: 1.45;
    color: var(--v5-ink);
    font-variation-settings: 'opsz' 36;
}

body[data-module] .v5-conclusion {
    margin: 2rem 0 1rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(180deg, var(--accent-tint), transparent 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: var(--v5-r);
}
body[data-module] .v5-conclusion .v5-label {
    font-family: var(--v5-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 0.4rem;
}
body[data-module] .v5-conclusion p {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--v5-ink);
}

body[data-module] .v5-figure {
    margin: 1.5rem 0;
    background: var(--v5-surface);
    border: 1px solid var(--v5-hairline);
    border-radius: var(--v5-r);
    overflow: hidden;
}
body[data-module] .v5-figure img { display: block; width: 100%; height: auto; }
body[data-module] .v5-figure figcaption {
    padding: 0.55rem 0.85rem;
    font-family: var(--v5-sans);
    font-size: 0.85rem;
    color: var(--v5-muted);
    border-top: 1px solid var(--v5-hairline);
    background: var(--v5-bg);
}

/* ══════════════════════════════════════════════════════
   SLIDES MODE — chrome + typography (one block)
   ══════════════════════════════════════════════════════
   shared/slide-system.js toggles body.slides-mode; we hide
   the chrome, fill the screen, and apply a projector
   typography scale.

   Typography scale (read from ~30 ft / large room):
     ──────────────────────────────────────────────
     Page H1 (page title)        3.5rem  ≈ 56px   Fraunces
     Section H2                  2.5rem  ≈ 40px   Fraunces
     Subsection H3               1.75rem ≈ 28px   sans, accent
     H4                          1.4rem  ≈ 22px   sans
     Body p / li                 1.5rem  ≈ 24px
     Inline code                 1.3rem  ≈ 21px
     Code block (pre)            1.7rem  ≈ 27px   (oversized for projection)
     Side-by-side pre            1.3rem  ≈ 21px   (constrained, but still bumped)
     Side-by-side td             1.05rem ≈ 17px   (constrained)
     Side-by-side th             0.9rem  ≈ 14px   (constrained)
     ──────────────────────────────────────────────
   These override both the v5 docs-mode sizes (which are
   tuned for desk-distance reading) and the legacy
   body.slides-mode rules in core-styles.css. */

/* Chrome — hide the rail, fill the viewport */
body[data-module].slides-mode .v5-rail,
body[data-module].slides-mode .v5-aside,
body[data-module].slides-mode .v5-read-bar { display: none; }

/* Hide the prev/next "CONTINUE LEARNING" footer nav in slides mode —
   it's a desk-reading aid, not a presentation element. */
body[data-module].slides-mode .footer-nav { display: none !important; }
body[data-module].slides-mode .footer-nav::before { content: none !important; }
body[data-module].slides-mode .v5-article {
    max-width: none;
    width: 100%;
    margin: 0;
}

/* ── Typography scale ── */
body[data-module].slides-mode .v5-page-title,
body[data-module].slides-mode .v5-article > h1 {
    font-size: 3.5rem;
    line-height: 1.05;
    margin: 0 0 1.25rem;
}
body[data-module].slides-mode .v5-article h2 {
    font-size: 2.5rem;
    line-height: 1.15;
    margin: 2rem 0 1rem;
    padding-bottom: 0.6rem;
    font-family: var(--v5-serif);
    font-weight: 500;
}
body[data-module].slides-mode .v5-article h3 {
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 1.5rem 0 0.75rem;
    /* Drop the docs-mode uppercase-eyebrow styling — at 28px it should
       read as a real subsection heading, not a tiny label. */
    text-transform: none;
    letter-spacing: -0.005em;
    font-family: var(--v5-sans);
    font-weight: 600;
    color: var(--accent);
}
body[data-module].slides-mode .v5-article h4 {
    font-size: 1.4rem;
    line-height: 1.25;
    margin: 1.2rem 0 0.5rem;
    font-family: var(--v5-sans);
    font-weight: 600;
    color: var(--v5-ink);
}
body[data-module].slides-mode .v5-article p,
body[data-module].slides-mode .v5-article li {
    font-size: 1.5rem;
    line-height: 1.55;
}
body[data-module].slides-mode .v5-article ul,
body[data-module].slides-mode .v5-article ol {
    margin: 1rem 0 1.25rem 1.5rem;
}
body[data-module].slides-mode .v5-article :not(pre) > code {
    font-size: 1.3rem;
}
body[data-module].slides-mode .v5-article pre,
body[data-module].slides-mode .v5-code-block pre {
    font-size: 1.7rem !important;
    line-height: 1.5;
    padding: 1.6rem 1.85rem;
}
body[data-module].slides-mode .side-by-side pre {
    font-size: 1.3rem !important;
    line-height: 1.5;
    padding: 1.1rem 1.35rem;
}

/* ──────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    body[data-module] .v5-main {
        grid-template-columns: 1fr;
        padding: 1.5rem 1.5rem 4rem;
    }
    body[data-module] .v5-aside {
        position: static;
        padding-top: 1.5rem;
        border-top: 1px solid var(--v5-hairline);
    }
}
@media (max-width: 800px) {
    body[data-module] .v5-layout { grid-template-columns: 1fr; }
    body[data-module] .v5-rail {
        position: static;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--v5-hairline);
    }
    body[data-module] .v5-read-bar { left: 0; }
}

/* ──────────────────────────────────────────────────────
   LEGACY-CLASS OVERRIDES
   ──────────────────────────────────────────────────────
   The current base-template.html uses pre-v5 structural
   class names (.layout, .sidebar, .nav-section, .nav-link,
   .main, .mode-toggle, .mode-btn). When the body has
   data-module, these blocks override the equivalent rules
   in shared/core-styles.css via higher specificity.
   The legacy markup is left intact — only the styles change.
   ────────────────────────────────────────────────────── */

/* Outer flex grid → v5 grid layout */
body[data-module] .layout {
    display: grid;
    grid-template-columns: var(--rail-w) 1fr;
    min-height: 100vh;
}

/* Sidebar — clean rail */
body[data-module] .sidebar {
    width: var(--rail-w);
    background: var(--v5-bg);
    border-right: 1px solid var(--v5-hairline);
    box-shadow: none;
    padding: 1.25rem 1rem 2rem;
    position: fixed;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Sidebar logo — keep but shrink to fit the lighter rail */
body[data-module] .sidebar .logo-nav {
    width: 56px;
    height: 56px;
    margin: 0.25rem auto 1rem;
    box-shadow: 0 1px 3px rgba(14,14,16,0.08);
}

/* Sidebar h2 — strip legacy gradient text, swap to Fraunces */
body[data-module] .sidebar h2 {
    background: none;
    -webkit-text-fill-color: initial;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--v5-ink);
    font-family: var(--v5-serif);
    font-weight: 500;
    font-size: 1.15rem;
    font-variation-settings: 'opsz' 36;
    letter-spacing: -0.015em;
    padding: 0 0.5rem 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--v5-hairline);
}
body[data-module] .sidebar h2 a {
    color: inherit;
    text-decoration: none;
}

/* "Module M1" h3 in the rail — use the v5 mono eyebrow style */
body[data-module] .nav-section h3 {
    padding: 0 0.5rem;
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--v5-muted);
    margin-bottom: 0.6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
body[data-module] .nav-section h3 .emoji { display: none; }
body[data-module] .nav-section h3 .module-badge {
    background: var(--accent) !important;     /* override the inline hex from build.py */
    border-color: var(--accent) !important;
    font-family: var(--v5-mono);
    font-size: 0.65rem;
    font-weight: 600;
    color: white;
    padding: 2px 7px;
    border-radius: var(--v5-r-sm);
    letter-spacing: 0.04em;
}

/* Nav subsection wrapper + its h4 (section name) */
body[data-module] .nav-subsection {
    margin-bottom: 1.1rem;
}
body[data-module] .nav-subsection h4 {
    padding: 0 0.5rem;
    margin-bottom: 0.3rem;
    font-family: var(--v5-mono);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--v5-muted);
    font-weight: 600;
}

/* Sidebar links — v5 rail-link treatment */
body[data-module] .nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.32rem 0.5rem;
    font-family: var(--v5-sans);
    font-size: 0.875rem;
    color: var(--v5-text);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -2px;
    border-radius: 0 var(--v5-r-sm) var(--v5-r-sm) 0;
    line-height: 1.3;
    transition: color 0.12s, background 0.12s;
}
body[data-module] .nav-link:hover {
    background: var(--accent-tint);
    color: var(--v5-ink);
    padding-left: 0.5rem;       /* override the legacy padding-left: 1.75rem jump */
    padding-right: 0.5rem;
}
body[data-module] .nav-link.active {
    background: var(--accent-tint);
    color: var(--v5-ink);
    border-left: 2px solid var(--accent);
    font-weight: 600;
}

/* Quiz / case-study badges already emitted by build.py — gentle restyle */
body[data-module] .nav-link .quiz-badge,
body[data-module] .nav-link .case-badge {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-family: var(--v5-mono);
    font-size: 0.55rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body[data-module] .nav-link .quiz-badge {
    background: var(--accent);
    color: white;
}
body[data-module] .nav-link .case-badge {
    background: var(--accent-tint);
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* Main column — drop margin-left (parent is now grid), widen, breathe */
body[data-module] .main {
    margin-left: 0;
    grid-column: 2;
    padding: 2rem 3rem 6rem;
    max-width: 1280px;
    width: 100%;
}

/* Slide-mode: hide the rail AND collapse the layout grid so the main
   column reclaims the full viewport width (the sidebar column was still
   reserving its 240px even with the rail display:none'd). */
body[data-module].slides-mode .sidebar { display: none; }
body[data-module].slides-mode .layout {
    display: block;       /* collapse the 240px + 1fr grid */
}
body[data-module].slides-mode .main {
    margin-left: 0;
    padding: 0.5rem 1rem;
    max-width: 100vw;
    width: 100%;
}
/* Override the template's inline .slide { padding: 60px 80px; } down
   to a thin frame so .side-by-side can spread to (almost) the screen edge. */
body[data-module].slides-mode .slide {
    padding: 1rem 1.25rem;
    max-width: 100%;
}
/* Tighter gap so each of 3 columns gets more table width */
body[data-module].slides-mode .side-by-side {
    gap: 0.75rem;
    max-width: 100%;
    width: 100%;
}

/* Mode toggle — pull it left to leave room for the auth widget at right:1rem */
body[data-module] .mode-toggle {
    top: 1rem;
    right: 5.5rem;
    background: var(--v5-surface);
    border: 1px solid var(--v5-hairline);
    border-radius: 999px;
    padding: 3px;
    box-shadow: 0 1px 2px rgba(14,14,16,0.05);
    z-index: 998;          /* below the auth widget at 999 */
}
body[data-module] .mode-toggle .mode-controls {
    display: flex;
    gap: 2px;
    background: none;
    box-shadow: none;
    padding: 0;
    border: none;
}
body[data-module] .mode-btn {
    font-family: var(--v5-mono);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--v5-muted);
    padding: 5px 12px;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    transition: all 0.15s;
}
body[data-module] .mode-btn:hover {
    background: transparent;
    color: var(--v5-ink);
}
body[data-module] .mode-btn.active {
    background: var(--v5-ink);
    color: white;
    box-shadow: none;
}

/* ──────────────────────────────────────────────────────
   PAGE H1 (the markdown's # title)
   The converter drops the rendered MD straight into
   .v5-article — so the first <h1> needs page-title styling.
   Overrides legacy `h1` (gradient text) and `.main h1:first-of-type` (underline). */
body[data-module] .v5-article h1 {
    background: none;
    -webkit-text-fill-color: initial;
    -webkit-background-clip: initial;
    background-clip: initial;
    color: var(--v5-ink);
    font-family: var(--v5-serif);
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    margin: 0 0 1.25rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--v5-hairline);
    font-variation-settings: 'opsz' 144;
}
/* Be sure the legacy .main h1::after / underline don't render */
body[data-module] .v5-article h1::after,
body[data-module] .v5-article h1::before {
    display: none !important;
    content: none !important;
}

/* ══════════════════════════════════════════════════════
   .v5-concept — the opening "Definition / Intuition /
   Example" card that appears at the top of every concept
   page in M1, M1B, and M2. One visually consistent
   container instead of three loose paragraphs. Each
   section's label (the bold leading word) is rendered as
   a mono uppercase eyebrow above its paragraph.
   ══════════════════════════════════════════════════════ */
body[data-module] .v5-concept {
    background: var(--v5-surface);
    border: 1px solid var(--v5-hairline);
    border-left: 4px solid var(--accent);
    border-radius: var(--v5-r);
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0 2.25rem;
    box-shadow: var(--v5-shadow-1);
}
body[data-module] .v5-concept p {
    margin: 0 0 1.1rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--v5-ink);
}
body[data-module] .v5-concept p:last-child { margin-bottom: 0; }
body[data-module] .v5-concept p > strong:first-child {
    display: block;
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.35rem;
}
body[data-module] .v5-concept code {
    background: var(--accent-tint);
    color: var(--accent);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Slides mode — projection-readable scale */
body[data-module].slides-mode .v5-concept {
    padding: 1.75rem 2rem;
    margin: 1.5rem 0 2.5rem;
}
body[data-module].slides-mode .v5-concept p {
    font-size: 1.4rem;
    line-height: 1.55;
}
body[data-module].slides-mode .v5-concept p > strong:first-child {
    font-size: 0.85rem;
    margin-bottom: 0.45rem;
}

/* ══════════════════════════════════════════════════════
   .v5-callout — single canonical "callout" container,
   replacing tagline-box / impact-box / intuition-box /
   insight-box / control-box / integrity-explanation /
   correctness-grid / .callout (and its info/warning
   modifiers). One outer accent-tinted box; inner
   <h3> renders as small uppercase mono eyebrow,
   <h4> as a normal sub-heading; any direct child
   <div> is treated as a card-grid for breakdowns
   like the "CRITICAL INSIGHT → 3 cards" pattern.
   ══════════════════════════════════════════════════════ */
body[data-module] .v5-callout {
    background: var(--v5-surface);
    border: 1px solid var(--v5-hairline);
    border-left: 4px solid var(--accent);
    border-radius: var(--v5-r);
    padding: 1.1rem 1.4rem;
    margin: 1.25rem 0 1.75rem;
    box-shadow: var(--v5-shadow-1);
}
body[data-module] .v5-callout > h3 {
    font-family: var(--v5-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
    margin: 0 0 0.65rem;
    padding: 0;
    border: none;
    background: none;
}
body[data-module] .v5-callout > h4,
body[data-module] .v5-callout h4 {
    font-family: var(--v5-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--v5-ink);
    margin: 0 0 0.45rem;
    letter-spacing: -0.005em;
}
body[data-module] .v5-callout p {
    color: var(--v5-text);
    margin: 0 0 0.55rem;
    line-height: 1.55;
    font-size: 0.95rem;
}
body[data-module] .v5-callout p:last-child { margin-bottom: 0; }
body[data-module] .v5-callout > ul,
body[data-module] .v5-callout > ol {
    margin: 0 0 0.55rem 1.4rem;
    padding: 0;
    color: var(--v5-text);
}
body[data-module] .v5-callout li {
    margin: 0.15rem 0;
    line-height: 1.55;
    font-size: 0.95rem;
}
body[data-module] .v5-callout code {
    background: var(--accent-tint);
    color: var(--accent);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.9em;
}
/* Note: nested divs inside .v5-callout are NOT auto-styled as a grid.
   Page-specific layouts (e.g. .connection-flow, .definition-cards inside
   a callout) bring their own display rules. Earlier auto-grid here
   produced "callout-inside-callout" double-borders on single nested
   divs and clashed with page-specific flex layouts. */

/* Slides mode — projection-readable scale */
body[data-module].slides-mode .v5-callout {
    padding: 1.5rem 1.8rem;
}
body[data-module].slides-mode .v5-callout p,
body[data-module].slides-mode .v5-callout li { font-size: 1.2rem; }
body[data-module].slides-mode .v5-callout > h3 { font-size: 0.85rem; }
body[data-module].slides-mode .v5-callout > h4,
body[data-module].slides-mode .v5-callout h4 { font-size: 1.15rem; }

/* ══════════════════════════════════════════════════════
   SIDE-BY-SIDE LAYOUT — coherent system, not spot fixes
   ══════════════════════════════════════════════════════
   Design intent (this is the only block that styles
   .side-by-side; don't add scattered overrides elsewhere):

     • DOCS mode    = compact reading at desk distance.
                      td font 0.78rem, tight padding,
                      3 columns down to ~960px viewport.
     • SLIDES mode  = projection from across a room.
                      td font ≥1rem, generous padding,
                      columns gracefully fall back to
                      2-col then 1-col on narrower screens
                      so text never has to shrink.

   Tables inside side-by-side use table-layout:fixed so
   their width is bounded by the grid cell. The .color-bar
   first column keeps its 6px (its width:6px !important
   wins). Word-break stays at "normal" — words break
   only when truly impossible to fit. */

/* Tables fit their grid cell, never overflow into a neighbour. */
body[data-module] .side-by-side table {
    table-layout: fixed;
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto;
}
body[data-module] .side-by-side th,
body[data-module] .side-by-side td {
    word-break: normal;
    overflow-wrap: break-word;
    white-space: normal;
    hyphens: none;
    font-family: var(--v5-mono);
    line-height: 1.4;
}

/* DOCS — compact, dense, desk-distance reading. */
body[data-module] .side-by-side th {
    padding:   0.3rem 0.4rem !important;
    font-size: 0.7rem        !important;
}
body[data-module] .side-by-side td {
    padding:   0.3rem 0.45rem !important;
    font-size: 0.78rem        !important;
}

/* SLIDES — projector size. Larger text, larger padding.
   Same scale as the body (.slides-mode body { font-size: 24px }
   gives ~17–18px for these). Don't shrink to "make 3 cols fit" —
   the responsive fallback below handles narrow viewports. */
body[data-module].slides-mode .side-by-side th {
    padding:   0.5rem 0.7rem !important;
    font-size: 0.9rem         !important;
}
body[data-module].slides-mode .side-by-side td {
    padding:   0.55rem 0.75rem !important;
    font-size: 1.05rem         !important;
}

/* Responsive fallback — 3-col → 2-col → 1-col instead of
   shrinking text. Slides projected at ≥1500px get the full
   3-col layout; smaller windows degrade gracefully. */
@media (max-width: 1500px) {
    body[data-module].slides-mode .side-by-side.cols-3 {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 1100px) {
    body[data-module].slides-mode .side-by-side,
    body[data-module].slides-mode .side-by-side.cols-3,
    body[data-module].slides-mode .side-by-side.cols-4 {
        grid-template-columns: 1fr;
    }
}