/* FibLab Method Academy — shared styles */

:root {
    --bg: #0a0a0a;
    --bg-elev: #141414;
    --bg-elev-2: #1c1c1c;
    --border: #2a2a2a;
    --border-active: #3a3a3a;
    --text: #e6e6e6;
    --text-dim: #a0a0a0;
    --text-faint: #6a6a6a;
    --accent: #38bdf8;
    --accent-deep: #0ea5e9;
    --accent-bg: rgba(56, 189, 248, 0.1);
    --emerald: #34d399;
    --rose: #fb7185;
    --amber: #fbbf24;
    --violet: #c4b5fd;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --content-width: 800px;
    --sidebar-width: 360px;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 17px;        /* +10% baseline body bump (per user request) */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* layout */
.app {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
}

.sidebar {
    border-right: 1px solid var(--border);
    background: var(--bg-elev);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    padding: 24px 14px;
}

.main {
    padding: 56px 56px 96px;
    max-width: calc(var(--content-width) + 112px);
    margin: 0 auto;
    width: 100%;
}

/* sidebar */
.sb-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 24px;
    text-decoration: none;
    color: var(--text);
}
.sb-brand:hover { text-decoration: none; }
.sb-brand-mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    line-height: 0;
}
.sb-brand-mark svg {
    width: 100%;
    height: 100%;
    display: block;
}
.sb-brand-name {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.sb-brand-sub {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 3px;
}

/* .sb-progress-* removed: completion-tracking UI replaced by Discrimination Gym streaks */

.sb-section { margin-top: 16px; }
.sb-section-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 8px 12px;
    margin-bottom: 2px;
}
.sb-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-dim);
    font-size: 13.5px;
    transition: background 0.15s, color 0.15s;
    line-height: 1.3;
}
.sb-link:hover {
    background: var(--bg-elev-2);
    color: var(--text);
    text-decoration: none;
}
.sb-link.active {
    background: var(--accent-bg);
    color: var(--accent);
}
.sb-link-meta {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-faint);
    flex-shrink: 0;
}
.sb-link.active .sb-link-meta { color: var(--accent); }
.sb-link-meta.full { color: var(--emerald); }

/* main content */
.page-header {
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
}
.page-eyebrow {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    margin-bottom: 8px;
}
.page-title {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin-bottom: 14px;
}
.page-lede {
    font-size: 18.5px;
    color: var(--text-dim);
    max-width: 640px;
    line-height: 1.55;
}
/* WHY-first sentence — one-line conceptual frame above the lede.
   Top-down processors need the "why this exists" hook before any mechanic. */
.page-why {
    font-size: 14.5px;
    color: var(--accent);
    max-width: 720px;
    line-height: 1.45;
    margin: -4px 0 14px;
    font-style: italic;
    border-left: 2px solid var(--accent);
    padding-left: 12px;
    opacity: 0.92;
}
.page-why::before {
    content: "Why this exists — ";
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    opacity: 0.85;
}
/* Same pattern, scoped inside chapters (Layer 4 indicator chapters etc.) */
.chapter-why {
    font-size: 14px;
    color: var(--accent);
    line-height: 1.45;
    margin: 6px 0 14px;
    font-style: italic;
    border-left: 2px solid var(--accent);
    padding-left: 12px;
    opacity: 0.9;
}
.chapter-why::before {
    content: "Why this tool — ";
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.14em;
    opacity: 0.85;
}

h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

p { color: var(--text); line-height: 1.65; }

/* chapter card */
.chapter {
    border: 1px solid var(--border);
    background: var(--bg-elev);
    border-radius: 12px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.chapter:hover { border-color: var(--border-active); }
.chapter.done { border-color: rgba(52, 211, 153, 0.3); }

.chapter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.chapter-head:hover { background: var(--bg-elev-2); }

.chapter-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.chapter-title {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
/* .chapter-status removed: Mark-complete badges no longer rendered */
.chapter-arrow {
    color: var(--text-faint);
    transition: transform 0.2s;
    font-size: 12px;
    flex-shrink: 0;
}
.chapter.open .chapter-arrow { transform: rotate(90deg); }

.chapter-body {
    display: none;
    padding: 8px 32px 32px;
    border-top: 1px solid var(--border);
}
.chapter.open .chapter-body { display: block; }

.chapter-body p { margin-bottom: 16px; line-height: 1.7; }
.chapter-body ul,
.chapter-body ol { padding-left: 24px; margin-bottom: 16px; }
.chapter-body li { margin-bottom: 6px; line-height: 1.6; }
.chapter-body h3 {
    font-size: 12px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 32px 0 12px;
    font-weight: 600;
}
.chapter-body h3:first-child { margin-top: 16px; }
.chapter-body strong { color: var(--text); font-weight: 600; }

/* glossary tooltips */
dfn {
    font-style: normal;
    color: var(--accent);
    border-bottom: 1px dashed rgba(56, 189, 248, 0.4);
    cursor: help;
}
dfn:hover { border-bottom-style: solid; }

/* =========================================================================
   Argument-color prose tokens (Tier 1 #6).
   Color-codes concept-family terms so the structure of an argument is
   visible at a glance. Hex values mirror FIBLAB_GRAPH.families.<X>.color
   in shared/graph.js — keep them in sync.
   Specificity: these rules sit AFTER the dfn block above so a
   <dfn data-term="trend" class="t-trend"> renders amber (the family color),
   not the dfn-default accent teal. Dashed underline is preserved as the
   "click to define" affordance.
   ========================================================================= */
.t-level       { color: var(--accent); }   /* teal/sky */
.t-trend       { color: #fbbf24; }         /* amber */
.t-method      { color: #a78bfa; }         /* violet */
.t-execution   { color: #fb7185; }         /* rose */
.t-indicator   { color: #94a3b8; }         /* slate */
.t-walkthrough { color: #34d399; }         /* emerald */

/* dfn overrides — explicitly win over dfn's default accent color, while
   keeping the dashed underline at the same family-tinted alpha. */
dfn.t-level       { color: var(--accent);  border-bottom-color: rgba(56, 189, 248, 0.4); }
dfn.t-trend       { color: #fbbf24;        border-bottom-color: rgba(251, 191, 36, 0.45); }
dfn.t-method      { color: #a78bfa;        border-bottom-color: rgba(167, 139, 250, 0.45); }
dfn.t-execution   { color: #fb7185;        border-bottom-color: rgba(251, 113, 133, 0.45); }
dfn.t-indicator   { color: #94a3b8;        border-bottom-color: rgba(148, 163, 184, 0.45); }
dfn.t-walkthrough { color: #34d399;        border-bottom-color: rgba(52, 211, 153, 0.45); }

/* Cheat-row + vocab-matrix term overrides. The base rules force the term
   text to var(--text); these put the family color back when a t-* class
   is present, so cheat-block terms read as 3-color scan, matching prose. */
.layer-cheat-row .lc-term.t-level,
.layer-cheat-row dfn.t-level,
.vocab-matrix .vm-term.t-level       { color: var(--accent); }
.layer-cheat-row .lc-term.t-trend,
.layer-cheat-row dfn.t-trend,
.vocab-matrix .vm-term.t-trend       { color: #fbbf24; }
.layer-cheat-row .lc-term.t-method,
.layer-cheat-row dfn.t-method,
.vocab-matrix .vm-term.t-method      { color: #a78bfa; }
.layer-cheat-row .lc-term.t-execution,
.layer-cheat-row dfn.t-execution,
.vocab-matrix .vm-term.t-execution   { color: #fb7185; }
.layer-cheat-row .lc-term.t-indicator,
.layer-cheat-row dfn.t-indicator,
.vocab-matrix .vm-term.t-indicator   { color: #94a3b8; }
.layer-cheat-row .lc-term.t-walkthrough,
.layer-cheat-row dfn.t-walkthrough,
.vocab-matrix .vm-term.t-walkthrough { color: #34d399; }

.glossary-popover {
    position: absolute;
    background: #000;
    border: 1px solid var(--border-active);
    border-radius: 8px;
    padding: 14px 16px;
    max-width: 360px;
    width: max-content;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.glossary-popover.visible { opacity: 1; }
.glossary-popover-term {
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.glossary-popover-def { /* unchanged styling — kept as wrapper for graph layout */ }

/* ---- Graph-derived popover sections (Tier-0 wiring) ---- */
.glossary-popover-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    margin-bottom: 8px;
    line-height: 1.2;
}
.glossary-popover-meta-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
    flex-shrink: 0;
}
.glossary-popover-meta-text {
    color: var(--text-dim);
}
.glossary-popover-meta-pill {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.05em;
    text-decoration: none;
    margin-left: auto;
}
.glossary-popover-meta-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.glossary-popover-section {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.glossary-popover-section-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    font-weight: 600;
}
.glossary-popover-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.glossary-popover-chip {
    display: inline-block;
    font-size: 11px;
    line-height: 1.3;
    padding: 3px 8px 3px 7px;
    border: 1px solid var(--border-active);
    border-left: 3px solid var(--text-dim);
    border-radius: 4px;
    background: var(--bg-elev-2);
    color: var(--text);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.glossary-popover-chip:hover {
    background: var(--border);
    border-color: var(--accent);
    text-decoration: none;
}
.glossary-popover-fails-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.glossary-popover-fails-item {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-dim);
}
.glossary-popover-fails-label {
    color: var(--text);
    font-weight: 500;
}
.glossary-popover-fails-summary {
    color: var(--text-dim);
}
.glossary-popover-source {
    font-size: 10px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.glossary-popover-source a,
.glossary-popover-source span {
    color: var(--text-faint);
    font-family: var(--mono);
    text-decoration: none;
    transition: color 0.15s;
}
.glossary-popover-source a:hover {
    color: var(--accent);
}
.glossary-popover-deepdive {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
}
.glossary-popover-deepdive a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 10px;
}
.glossary-popover-deepdive a:hover {
    color: #fde68a;
}

/* quote callout */
.quote {
    border-left: 3px solid var(--accent);
    background: var(--bg-elev-2);
    padding: 16px 22px;
    margin: 24px 0;
    border-radius: 4px;
}
.quote-text {
    font-style: italic;
    color: var(--text);
    font-size: 15.5px;
    line-height: 1.6;
}
.quote-attr {
    color: var(--text-faint);
    font-size: 11px;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* example box */
.example {
    background: #050505;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 18px 0;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--text-dim);
    overflow-x: auto;
}
.example-label {
    color: var(--accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}
.example .num { color: var(--text); font-weight: 500; }
.example .ok { color: var(--emerald); }
.example .bad { color: var(--rose); }
.example .dim { color: var(--text-faint); }

/* rules block */
.rules {
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 22px;
    margin: 18px 0;
}
.rules-label {
    color: var(--accent);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
    font-weight: 600;
}
.rules ul,
.rules ol { padding-left: 22px; margin: 0; }
.rules li { margin-bottom: 8px; line-height: 1.55; font-size: 14.5px; }
.rules li:last-child { margin-bottom: 0; }

/* warning block */
.warning {
    border-left: 3px solid var(--rose);
    background: rgba(251, 113, 133, 0.06);
    padding: 14px 18px;
    margin: 20px 0;
    border-radius: 4px;
    font-size: 14px;
}
.warning-label {
    color: var(--rose);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    font-weight: 600;
}

/* quiz */
.quiz {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.quiz-label {
    color: var(--amber);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 18px;
    font-weight: 600;
}
.quiz-question { margin-bottom: 28px; }
.quiz-question:last-child { margin-bottom: 0; }
.quiz-prompt { font-weight: 500; margin-bottom: 12px; line-height: 1.5; font-size: 15px; }
.quiz-options { display: grid; gap: 6px; }
.quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}
.quiz-option:hover {
    background: var(--bg-elev-2);
    border-color: var(--border-active);
}
.quiz-option.correct {
    border-color: var(--emerald);
    background: rgba(52, 211, 153, 0.08);
}
.quiz-option.wrong {
    border-color: var(--rose);
    background: rgba(251, 113, 133, 0.08);
}
.quiz-question.answered .quiz-option { cursor: default; }
.quiz-question.answered .quiz-option:hover { background: transparent; border-color: var(--border); }
.quiz-question.answered .quiz-option.correct { border-color: var(--emerald); background: rgba(52, 211, 153, 0.08); }
.quiz-question.answered .quiz-option.wrong { border-color: var(--rose); background: rgba(251, 113, 133, 0.08); }

.quiz-feedback {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.55;
    display: none;
}
.quiz-feedback.show { display: block; }
.quiz-feedback.correct {
    background: rgba(52, 211, 153, 0.08);
    color: var(--emerald);
    border: 1px solid rgba(52, 211, 153, 0.25);
}
.quiz-feedback.wrong {
    background: rgba(251, 113, 133, 0.08);
    color: var(--rose);
    border: 1px solid rgba(251, 113, 133, 0.25);
}

/* .chapter-actions removed: Mark-complete buttons no longer rendered */
.btn {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-active);
    color: var(--text);
    padding: 10px 18px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-weight: 500;
}
.btn:hover {
    background: var(--border);
}
.btn.primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}
.btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
/* .btn.done removed: completion-state buttons no longer rendered */

/* page nav (prev/next bottom) */
.page-nav {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.page-nav-link {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
    flex: 1;
    max-width: 280px;
}
.page-nav-link:hover {
    border-color: var(--accent);
    background: var(--bg-elev);
    text-decoration: none;
}
.page-nav-link-eyebrow {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.page-nav-link-title { font-weight: 500; color: var(--text); font-size: 15px; }
.page-nav-link.next { text-align: right; margin-left: auto; align-items: flex-end; }
.page-nav-link.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* index landing */
.hero {
    margin-bottom: 64px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
}
.hero-eyebrow {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    margin-bottom: 12px;
}
.hero-title {
    font-size: 56px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 20px;
    max-width: 720px;
}
.hero-lede {
    font-size: 19px;
    color: var(--text-dim);
    max-width: 580px;
    line-height: 1.55;
    margin-bottom: 28px;
}
.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: var(--accent);
    color: #000;
    border-radius: 8px;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
}
.hero-cta:hover { background: var(--accent-deep); text-decoration: none; }

.layer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 48px;
}
.layer-card {
    border: 1px solid var(--border);
    background: var(--bg-elev);
    border-radius: 12px;
    padding: 22px 24px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, transform 0.15s;
}
.layer-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    text-decoration: none;
}
.layer-card-eyebrow {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    font-weight: 600;
}
.layer-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.layer-card-desc {
    font-size: 13.5px;
    color: var(--text-dim);
    line-height: 1.55;
    margin-bottom: 14px;
}
.layer-card-meta {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-faint);
}

.section-title {
    font-size: 13px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin: 48px 0 16px;
}

/* footer */
.footer {
    margin-top: 96px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 12px;
    line-height: 1.6;
}

/* mobile */
@media (max-width: 900px) {
    .app {
        grid-template-columns: 1fr;
    }
    .sidebar {
        position: static;
        height: auto;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .main {
        padding: 32px 24px 64px;
    }
    .page-title { font-size: 30px; }
    .hero-title { font-size: 38px; }
    .chapter-body { padding: 8px 20px 24px; }
}

/* utility */
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mono { font-family: var(--mono); }
.accent { color: var(--accent); }
.emerald { color: var(--emerald); }
.rose { color: var(--rose); }
.amber { color: var(--amber); }
.violet { color: var(--violet); }

/* ===== "Watch on YouTube" link below local clip ===== */
.video-link {
    margin: -8px 0 24px;
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
}
.video-link a {
    color: var(--accent);
    text-decoration: none;
}
.video-link a:hover {
    text-decoration: underline;
}

/* ===== Pinned tooltip (click-to-pin) ===== */
.glossary-popover.pinned {
    pointer-events: auto;
    border-color: var(--accent);
    padding-right: 36px;
}
.glossary-popover-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: transparent;
    border: 1px solid var(--border-active);
    color: var(--text-dim);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.glossary-popover-close:hover {
    background: var(--bg-elev-2);
    color: var(--text);
}
.glossary-popover-source {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-faint);
}
.glossary-popover-source a {
    color: var(--accent);
}

dfn.pinned {
    color: var(--text);
    background: var(--accent-bg);
    padding: 0 4px;
    border-bottom: 1px solid var(--accent);
    border-radius: 3px;
}

/* ===== SVG diagrams ===== */
.diagram {
    background: #050505;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 24px;
    margin: 24px 0;
    overflow-x: auto;
}
.diagram svg {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}
.diagram-caption {
    text-align: center;
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 14px;
    font-style: italic;
}

/* SVG candle classes */
.svg-y rect { fill: #fde68a; stroke: #ca8a04; stroke-width: 1; }
.svg-b rect { fill: #93c5fd; stroke: #2563eb; stroke-width: 1; }
.svg-y-faint rect { fill: rgba(253, 230, 138, 0.3); stroke: rgba(202, 138, 4, 0.4); stroke-width: 1; }
.svg-b-faint rect { fill: rgba(147, 197, 253, 0.3); stroke: rgba(37, 99, 235, 0.4); stroke-width: 1; }
.svg-wick { stroke: #6a6a6a; stroke-width: 1.5; }
.svg-wick-faint { stroke: rgba(106, 106, 106, 0.5); stroke-width: 1.5; }
.svg-hold-line { stroke: #34d399; stroke-width: 1.5; stroke-dasharray: 4,3; fill: none; }
.svg-break-line { stroke: #fb7185; stroke-width: 1.5; stroke-dasharray: 4,3; fill: none; }
.svg-origin-line { stroke: #fbbf24; stroke-width: 1.5; stroke-dasharray: 4,3; fill: none; }
.svg-trend-up { stroke: #fde68a; stroke-width: 1.5; fill: none; }
.svg-trend-down { stroke: #93c5fd; stroke-width: 1.5; fill: none; }
.svg-arrow { stroke: #a0a0a0; stroke-width: 1.5; fill: none; }
.svg-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    fill: #a0a0a0;
}
.svg-label-h { fill: #34d399; }
.svg-label-b { fill: #fb7185; }
.svg-label-o { fill: #fbbf24; }
.svg-label-bright { fill: #e6e6e6; font-weight: 600; }

/* ===== Walkthrough step cards ===== */
.wt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}
.wt-tag {
    font-size: 11px;
    padding: 4px 10px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-dim);
    font-family: var(--mono);
}
.wt-tag.video { color: var(--accent); border-color: var(--accent); }

.wt-setup {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 26px;
    margin-bottom: 24px;
}
.wt-setup-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 12px;
}

.wt-step {
    border: 1px solid var(--border);
    background: var(--bg-elev);
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
}
.wt-step-head {
    padding: 18px 24px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: background 0.15s;
}
.wt-step-head:hover { background: var(--bg-elev-2); }
.wt-step-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
}
.wt-step-title {
    font-size: 16px;
    font-weight: 500;
}
.wt-step-arrow {
    color: var(--text-faint);
    transition: transform 0.2s;
}
.wt-step.open .wt-step-arrow { transform: rotate(90deg); }
.wt-step-body {
    display: none;
    padding: 8px 28px 24px;
    border-top: 1px solid var(--border);
}
.wt-step.open .wt-step-body { display: block; }

.wt-predict {
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0;
}
.wt-predict-label {
    color: var(--amber);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    font-weight: 600;
}
.wt-reveal {
    background: rgba(52, 211, 153, 0.06);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 16px 0;
    display: none;
}
.wt-reveal.show { display: block; }
.wt-reveal-label {
    color: var(--emerald);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    font-weight: 600;
}
.wt-reveal-btn {
    background: var(--bg-elev-2);
    border: 1px solid var(--border-active);
    color: var(--accent);
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    margin-top: 10px;
    transition: background 0.15s;
}
.wt-reveal-btn:hover { background: var(--border); }
.wt-reveal-btn.hidden { display: none; }

/* Annotated chart art (PNG base + inline SVG overlay) */
.wt-chart {
    position: relative;
    max-width: 960px;
    margin: 18px auto 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    line-height: 0;
}
.wt-chart img {
    width: 100%;
    height: auto;
    display: block;
}
.wt-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.wt-chart-caption {
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
    margin: 6px auto 18px;
    max-width: 960px;
    line-height: 1.5;
    font-family: var(--mono);
}

.concept-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.concept-chip {
    font-size: 11px;
    padding: 4px 10px;
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color 0.15s;
}
.concept-chip:hover {
    border-color: var(--accent);
    text-decoration: none;
}

/* See-also cross-link chip rows under annotated walkthrough charts */
.wt-chart-seealso {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 8px 16px 16px;
    font-size: 12px;
}
.wt-chart-seealso-label {
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
    font-weight: 600;
    margin-right: 4px;
}
.wt-chart-seealso-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: 12px;
    transition: background 0.15s, border-color 0.15s;
}
.wt-chart-seealso-chip:hover {
    background: var(--bg-elev-2);
    border-color: var(--accent);
}
.wt-chart-seealso-chip.fam-level       { border-left-color: var(--accent); }
.wt-chart-seealso-chip.fam-trend       { border-left-color: #fbbf24; }
.wt-chart-seealso-chip.fam-method      { border-left-color: #a78bfa; }
.wt-chart-seealso-chip.fam-execution   { border-left-color: #fb7185; }
.wt-chart-seealso-chip.fam-indicator   { border-left-color: #94a3b8; }
.wt-chart-seealso-glyph {
    width: 28px;
    height: 14px;
    display: block;
    flex-shrink: 0;
}

/* ===== Reference page styles ===== */
.glossary-search {
    width: 100%;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-active);
    color: var(--text);
    padding: 14px 18px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    margin-bottom: 24px;
}
.glossary-search:focus {
    outline: none;
    border-color: var(--accent);
}
.glossary-list {
    display: grid;
    gap: 12px;
}
.glossary-entry {
    border: 1px solid var(--border);
    background: var(--bg-elev);
    border-radius: 8px;
    padding: 16px 20px;
}
.glossary-entry-term {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 6px;
}
.glossary-entry-def {
    font-size: 14px;
    color: var(--text-dim);
    line-height: 1.6;
}
.glossary-entry.hidden { display: none; }

.cheat-card {
    border: 1px solid var(--border);
    background: var(--bg-elev);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 18px;
    page-break-inside: avoid;
}
.cheat-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}
.cheat-card-sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: 16px;
    font-weight: 600;
}
.cheat-card ul {
    padding-left: 22px;
    margin: 0;
}
.cheat-card li {
    margin-bottom: 6px;
    font-size: 13.5px;
    line-height: 1.55;
}

@media print {
    .sidebar, .page-nav { display: none; }
    .app { grid-template-columns: 1fr; }
    .main { padding: 24px; max-width: 100%; }
    body { background: white; color: black; }
    .cheat-card { page-break-inside: avoid; border-color: #ccc; background: white; color: black; }
}

.quote-card {
    border-left: 3px solid var(--accent);
    background: var(--bg-elev);
    border-radius: 4px;
    padding: 18px 22px;
    margin-bottom: 16px;
}
.quote-card-text {
    font-style: italic;
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 8px;
}
.quote-card-meta {
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.quote-card-tags {
    margin-top: 8px;
}
.quote-card-tag {
    font-size: 10px;
    padding: 2px 8px;
    background: var(--bg-elev-2);
    color: var(--text-dim);
    border-radius: 10px;
    margin-right: 4px;
    font-family: var(--mono);
}

/* ===== YouTube video embed (facade + iframe swap) ===== */
.video-embed {
    margin: 0 0 24px;
}
.video-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: #000;
    padding: 0;
    transition: border-color 0.2s, transform 0.2s;
}
.video-thumb:hover {
    border-color: var(--accent);
}
.video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.video-thumb:hover img {
    opacity: 1;
}
.video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.78);
    border: 2px solid white;
    display: grid;
    place-items: center;
    color: white;
    font-size: 22px;
    line-height: 1;
    padding-left: 4px;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.2s;
    pointer-events: none;
}
.video-thumb:hover .video-play {
    background: var(--accent);
    color: black;
    border-color: var(--accent);
    transform: translate(-50%, -50%) scale(1.05);
}
.video-embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: block;
}
.video-label {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-faint);
    font-family: var(--mono);
    text-align: center;
}
.chapter-body .video-embed {
    margin-top: 8px;
    margin-bottom: 28px;
}
.page-header + .video-embed {
    margin-top: -16px;
    margin-bottom: 40px;
}

/* Local gif / mp4 styling — same shape as YouTube embed */
.video-gif,
.video-local {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border);
    border-radius: 10px;
    object-fit: cover;
    display: block;
    background: #000;
}
.video-local {
    object-fit: contain;
}

/* CLIP duration badge on YouTube facades */
.video-clip-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--accent);
    color: #000;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 3px;
    pointer-events: none;
}

/* =========================================================================
   Sidebar v2 — concept-minimap (Tier 1 #16)
   ========================================================================= */

/* ---- Mode toggle (Map / Linear / Cheat) -------------------------------- */
.sidebar-mode-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 2px;
    margin: 0 4px 16px;
}
.sidebar-mode-toggle-btn {
    background: transparent;
    color: var(--text-faint);
    border: none;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
.sidebar-mode-toggle-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}
.sidebar-mode-toggle-btn.active {
    background: var(--accent-bg);
    color: var(--accent);
}

/* ---- Minimap container ------------------------------------------------- */
.sidebar-minimap-wrap {
    position: relative;
    margin: 0 4px 14px;
    padding: 10px 8px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.sidebar-minimap {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ---- Minimap nodes ----------------------------------------------------- */
.sidebar-minimap-node-group {
    cursor: pointer;
    transition: opacity 0.15s ease;
    outline: none;
}
.sidebar-minimap-node-group.dim {
    opacity: 0.2;
}
.sidebar-minimap-node {
    transition: r 0.15s ease, stroke-width 0.15s ease;
    stroke: rgba(0, 0, 0, 0.35);
    stroke-width: 0.5;
}
.sidebar-minimap-node.active {
    stroke: var(--text);
    stroke-width: 1.4;
}
.sidebar-minimap-halo {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.2;
    opacity: 0.85;
}
.sidebar-minimap-node-group.hover-active .sidebar-minimap-node {
    stroke: var(--text);
    stroke-width: 1.5;
}
.sidebar-minimap-node-group.neighbor .sidebar-minimap-node {
    stroke: var(--text-dim);
    stroke-width: 1;
}
.sidebar-minimap-node-group:focus-visible .sidebar-minimap-node {
    stroke: var(--accent);
    stroke-width: 1.6;
}

/* ---- Minimap edges ----------------------------------------------------- */
.sidebar-minimap-edge {
    stroke: var(--text);
    stroke-opacity: 0.15;
    stroke-width: 0.5;
    pointer-events: none;
    transition: stroke-opacity 0.15s ease;
}
.sidebar-minimap-edge.dim {
    stroke-opacity: 0.04;
}
.sidebar-minimap-edge.lit {
    stroke: var(--accent);
    stroke-opacity: 0.7;
    stroke-width: 0.9;
}

/* ---- Cluster labels ---------------------------------------------------- */
.sidebar-minimap-cluster-label {
    fill: var(--text-faint);
    font-family: var(--mono);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
}

/* ---- Tooltip (HTML overlay) -------------------------------------------- */
.sidebar-minimap-tooltip {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-active);
    border-radius: 4px;
    padding: 6px 8px;
    max-width: 200px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.sidebar-minimap-tooltip-label {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.sidebar-minimap-tooltip-meta {
    font-size: 9.5px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.sidebar-minimap-tooltip-summary {
    color: var(--text-dim);
    font-size: 11px;
}

/* ---- Related-to-current panel ----------------------------------------- */
.sidebar-related {
    margin: 0 4px 16px;
}
.sidebar-related-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 8px;
    margin-bottom: 4px;
}
.sidebar-related-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sidebar-related-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-left: 2px solid var(--border);
    border-radius: 0 4px 4px 0;
    color: var(--text-dim);
    font-size: 12px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    line-height: 1.3;
}
.sidebar-related-chip:hover {
    background: var(--bg-elev-2);
    color: var(--text);
    text-decoration: none;
}
.sidebar-related-chip-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.sidebar-related-chip-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================================
   Layer-cheat surface (Tier 1 #2: cheat-as-surface)
   The dense at-a-glance summary that opens every layer page.
   Replaces the old "scroll a curriculum" frame with "see the whole layer
   in N rows, click to drill." Per beelddenker punch list Tier 1 #2.
   ========================================================================= */
.layer-cheat {
    background: rgba(56, 189, 248, 0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 28px 28px;
    margin: 0 0 28px 0;
}
.layer-cheat-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    margin: 0 0 14px 0;
}
.layer-cheat-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--border);
}
.layer-cheat-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14.5px;
    line-height: 1.5;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.layer-cheat-row:hover {
    background: rgba(56, 189, 248, 0.04);
    text-decoration: none;
}
.layer-cheat-row dfn,
.layer-cheat-row .lc-term {
    font-style: normal;
    color: var(--text);
    font-weight: 600;
    border-bottom: none;
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 180px;
}
.layer-cheat-row .lc-summary {
    color: var(--text-dim);
    flex: 1 1 auto;
}
.layer-cheat-row .lc-glyph {
    width: 48px;
    height: 24px;
    flex-shrink: 0;
    vertical-align: middle;
}

/* =========================================================================
   Layer 1 dense vocabulary matrix (Tier 2 #11)
   Seven primitives × five attributes. Replaces chapter-accordion as the
   cheat surface for Layer 1 only. Per Tier 2 #11 ("Welcome dense
   matrices") and source-concept-index §4 Core tier.
   ========================================================================= */
.vocab-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.45;
    margin: 4px 0 0 0;
}
.vocab-matrix th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-faint);
    font-weight: 600;
    text-align: left;
    padding: 6px 10px 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: bottom;
}
.vocab-matrix td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--text-dim);
}
.vocab-matrix tr {
    border-left: 3px solid var(--border);
}
.vocab-matrix tr:hover td {
    background: rgba(56, 189, 248, 0.04);
}
.vocab-matrix .vm-term {
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-bottom: none;
}
.vocab-matrix .vm-term:hover {
    color: var(--accent);
}
.vocab-matrix .vm-related {
    font-size: 12px;
}
.vocab-matrix .vm-related a {
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px dotted var(--border-active);
}
.vocab-matrix .vm-related a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.vocab-matrix .vm-contrast { color: var(--text-dim); font-style: italic; }

/* Family-color left border per row. Family colors mirror graph.js families. */
.vocab-matrix tr.fam-level    { border-left-color: var(--accent); }
.vocab-matrix tr.fam-trend    { border-left-color: #fbbf24; }
.vocab-matrix tr.fam-method   { border-left-color: #a78bfa; }
.vocab-matrix tr.fam-execution{ border-left-color: #fb7185; }

/* Vocab matrix glyph — inline SVG sprite reference, replaces former
   [hold]/[break]/etc. text placeholder pills. Sized to fit the
   "Looks like" cell while remaining readable at the matrix's font size. */
.vm-glyph {
    width: 72px;
    height: 32px;
    display: block;
}

/* Mobile: collapse the matrix to a stacked card list (per Tier 3 #27). */
@media (max-width: 820px) {
    .vocab-matrix, .vocab-matrix tbody, .vocab-matrix tr,
    .vocab-matrix th, .vocab-matrix td { display: block; }
    .vocab-matrix thead { display: none; }
    .vocab-matrix tr {
        border: 1px solid var(--border);
        border-left-width: 3px;
        border-radius: 8px;
        margin-bottom: 10px;
        padding: 4px 10px;
    }
    .vocab-matrix td { border: none; padding: 4px 0; }
    .vocab-matrix td::before {
        content: attr(data-label) " · ";
        color: var(--text-faint);
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-right: 4px;
    }
    .vocab-matrix td.vm-term-cell::before { content: ""; }
    .layer-cheat-row { flex-wrap: wrap; gap: 2px 10px; padding: 10px 0; }
    .layer-cheat-row .lc-term { min-width: 0; max-width: none; flex: 1 1 auto; }
    .layer-cheat-row .lc-summary { flex: 1 1 100%; }
}

/* =========================================================================
   DISCRIMINATION GYM (Tier 1 #8)
   The only achievement gate on the site. Replaces per-chapter quizzes.
   Page lives at practice/discriminate.html.
   ========================================================================= */

/* Wider main on the gym page so the 4 cards don't crush */
.main-wide {
    max-width: 1100px;
}

/* ---- Stats strip ---- */
.gym-stats-strip {
    display: flex;
    gap: 12px;
    margin-bottom: 36px;
    flex-wrap: wrap;
    align-items: stretch;
}
.gym-reset {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-faint);
    border-radius: 10px;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    align-self: flex-end;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.gym-reset:hover {
    color: var(--rose);
    border-color: var(--rose);
    background: rgba(251, 113, 133, 0.06);
}
.gym-stat {
    flex: 1 1 180px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    position: relative;
}
.gym-stat-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-bottom: 8px;
}
.gym-stat-value {
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.gym-stat-sub {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-faint);
    font-family: var(--mono);
}

/* Streak landmark — celebration ring at 5/10/25/50/100 */
.gym-stat-streak.landmark {
    border-color: var(--emerald);
    box-shadow: 0 0 0 1px var(--emerald), 0 0 24px rgba(52, 211, 153, 0.18);
    animation: gym-streak-ring 1.6s ease-out;
}
.gym-stat-streak.landmark .gym-stat-value {
    color: var(--emerald);
}
.gym-stat-streak.landmark-major {
    border-color: var(--amber);
    box-shadow: 0 0 0 1px var(--amber), 0 0 32px rgba(251, 191, 36, 0.25);
}
.gym-stat-streak.landmark-major .gym-stat-value {
    color: var(--amber);
}
@keyframes gym-streak-ring {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* ---- Round container ---- */
.gym-round {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 32px 32px;
    margin-bottom: 24px;
}
.gym-round-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.gym-round-num {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.gym-round-target {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
}
.gym-round-target-eyebrow {
    color: var(--text-faint);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-right: 4px;
}
.gym-round-tier {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 9.5px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--bg-elev-2);
    color: var(--text-faint);
    border: 1px solid var(--border);
    vertical-align: 1px;
}
.gym-round-tier-core   { color: var(--accent); border-color: rgba(56, 189, 248, 0.3); }
.gym-round-tier-method { color: var(--violet); border-color: rgba(196, 181, 253, 0.3); }
.gym-round-tier-hard   { color: var(--rose);   border-color: rgba(251, 113, 133, 0.3); }

.gym-prompt {
    font-size: 17px;
    color: var(--text);
    line-height: 1.5;
    margin: 14px 0 22px;
    font-weight: 500;
}

/* ---- Cards (2x2 default, 1x4 on wide) ---- */
.gym-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}
@media (min-width: 1100px) {
    .gym-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* The card is a relatively-positioned button so the corner letter and
   the post-answer reveal label can stack absolutely on top of the
   glyph artwork. The glyph itself is the primary visual content. */
.gym-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 18px 12px 18px;
    aspect-ratio: 4 / 3;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
}
.gym-card:hover:not(:disabled) {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.gym-card:disabled {
    cursor: default;
    opacity: 0.95;
    transform: none;
}
.gym-card:disabled:hover {
    border-color: var(--border);
    transform: none;
}

/* Corner letter — small mono badge for keyboard reference (1-4 keys
   map to A-D). Positioned absolutely so it doesn't compete with the
   glyph for vertical center. */
.gym-card-letter {
    position: absolute;
    top: 8px;
    left: 10px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-faint);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.3;
    letter-spacing: 0.05em;
    z-index: 2;
}

/* Glyph wrapper — bounds the SVG so it scales sensibly inside the
   4:3 card while leaving room for the corner letter and (after
   answer) the bottom reveal label. */
.gym-card-glyph-wrap {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    overflow: hidden;
}
.gym-card-glyph {
    width: 100%;
    max-width: 220px;
    height: auto;
    max-height: 100%;
    display: block;
}
/* Larger purpose-built mini-chart used for concepts that have a dedicated
   gym-chart symbol (see shared/gym-charts.svg). Falls back to .gym-card-glyph
   for concepts without one. */
.gym-card-chart {
    width: 100%;
    max-width: 280px;
    height: auto;
    max-height: 100%;
    aspect-ratio: 240 / 140;
    display: block;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
    padding: 8px;
    box-sizing: border-box;
}
.gym-card-fallback {
    font-size: 32px;
    color: var(--text-faint);
    font-family: var(--mono);
    text-align: center;
}

/* Reveal label — appended on answer-click, names the concept shown.
   Hidden before-answer so the card stays a pure pattern. */
.gym-card-reveal {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.45);
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    line-height: 1.25;
    letter-spacing: 0.01em;
    z-index: 1;
}

.gym-card.correct {
    border-color: var(--emerald);
    background: rgba(52, 211, 153, 0.06);
    box-shadow: inset 0 0 0 1px var(--emerald);
}
.gym-card.correct .gym-card-reveal {
    background: rgba(52, 211, 153, 0.18);
    border-top-color: var(--emerald);
    color: var(--emerald);
}
.gym-card.incorrect {
    border-color: var(--rose);
    background: rgba(251, 113, 133, 0.06);
    box-shadow: inset 0 0 0 1px var(--rose);
}
.gym-card.incorrect .gym-card-reveal {
    background: rgba(251, 113, 133, 0.18);
    border-top-color: var(--rose);
    color: var(--rose);
}

/* ---- Feedback ---- */
.gym-feedback {
    margin-top: 4px;
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-elev-2);
}
.gym-feedback.correct {
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(52, 211, 153, 0.06);
}
.gym-feedback.incorrect {
    border-color: rgba(251, 113, 133, 0.4);
    background: rgba(251, 113, 133, 0.06);
}
.gym-feedback-headline {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.4;
}
.gym-feedback.correct .gym-feedback-headline { color: var(--emerald); }
.gym-feedback.incorrect .gym-feedback-headline { color: var(--rose); }
.gym-feedback-explanation {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text);
    margin: 0;
}
.gym-feedback-landmark {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(251, 191, 36, 0.12);
    color: var(--amber);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.gym-source {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.gym-source-video {
    color: var(--text-dim);
    font-weight: 500;
}
.gym-source-time {
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
}
.gym-source-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.gym-source-link:hover,
.gym-source-link:hover .gym-source-video,
.gym-source-link:hover .gym-source-time {
    color: var(--accent);
}

/* ---- Actions ---- */
.gym-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}
.gym-next {
    padding: 11px 22px;
    font-size: 14px;
}

/* ---- Context panel ---- */
.gym-context {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.gym-context-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-bottom: 8px;
}
.gym-context-body {
    font-size: 13.5px;
    color: var(--text);
    line-height: 1.55;
}

/* ---- How this works disclosure ---- */
.gym-howto {
    margin-top: 8px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-elev);
}
.gym-howto > summary {
    padding: 14px 20px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-dim);
    list-style: none;
    user-select: none;
}
.gym-howto > summary::-webkit-details-marker { display: none; }
.gym-howto > summary::before {
    content: '▶ ';
    color: var(--text-faint);
    font-size: 9px;
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.15s;
    transform: translateY(-1px);
}
.gym-howto[open] > summary::before {
    transform: rotate(90deg) translateX(-1px);
}
.gym-howto[open] > summary {
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.gym-howto-body {
    padding: 16px 20px 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-dim);
}
.gym-howto-body p { margin-bottom: 12px; color: var(--text-dim); }
.gym-howto-body ul {
    padding-left: 22px;
    margin-bottom: 14px;
}
.gym-howto-body li { margin-bottom: 6px; }
.gym-howto-body strong { color: var(--text); }
.gym-howto-note {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    font-size: 12.5px;
}

/* Index-page Discrimination Gym promo card — same shape as layer cards
   but a quiet accent border so it stands out as the achievement gate. */
.layer-card.layer-card-gym {
    border-color: rgba(56, 189, 248, 0.35);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.04) 0%, var(--bg-elev) 100%);
}
.layer-card.layer-card-gym:hover {
    border-color: var(--accent);
}
.layer-card-gym .layer-card-eyebrow {
    color: var(--accent);
}

/* Hero secondary CTA (muted "or open the Gym →" alongside primary) */
.hero-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    color: var(--text-dim);
    font-size: 14px;
    text-decoration: none;
}
.hero-cta-secondary:hover {
    color: var(--accent);
    text-decoration: none;
}

/* Mobile gym tweaks */
@media (max-width: 720px) {
    .gym-round { padding: 20px 18px 24px; }
    .gym-prompt { font-size: 15px; }
    .gym-stat-value { font-size: 28px; }
    .gym-card { padding: 14px 8px; }
    .gym-card-letter { font-size: 11px; padding: 1px 5px; top: 6px; left: 8px; }
    .gym-card-reveal { font-size: 10.5px; padding: 5px 6px; }
    .hero-cta-secondary { margin-left: 0; margin-top: 14px; display: block; }
}

/* =========================================================================
   FRONT-DOOR CONCEPT MAP (Tier 0 §0 Slice 2)
   The literal homepage canvas — a large interactive SVG of FIBLAB_GRAPH
   rendered as a clustered concept graph. Larger, more interactive cousin
   of sidebar.js's minimap. Lives at #frontmap on index.html only.
   ========================================================================= */

/* Wide main on the index page so the 1200×640 map has room to breathe. */
.main-frontmap {
    max-width: 1320px;
}

/* ---- Slim hero (half the original height; row layout w/ toggle) -------- */
.hero-slim {
    margin-bottom: 24px;
    padding-bottom: 18px;
}
.hero-slim-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.hero-gym-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(34, 211, 238, 0.12));
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.06), 0 4px 14px -6px rgba(56, 189, 248, 0.35);
}
.hero-gym-cta:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.28), rgba(34, 211, 238, 0.18));
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12), 0 6px 18px -6px rgba(56, 189, 248, 0.5);
}
.hero-gym-cta-icon {
    display: inline-block;
    font-size: 11px;
    line-height: 1;
    opacity: 0.85;
}
.hero-gym-cta-label { white-space: nowrap; }
.hero-slim .hero-title {
    font-size: 36px;
    margin-bottom: 0;
    max-width: none;
    line-height: 1.1;
}
.hero-slim .hero-eyebrow {
    margin-bottom: 6px;
}

/* ---- Map / Cards toggle ------------------------------------------------ */
.index-toggle {
    display: inline-flex;
    background: var(--bg-elev-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    flex-shrink: 0;
}
.index-toggle-btn {
    background: transparent;
    color: var(--text-dim);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    letter-spacing: 0.04em;
}
.index-toggle-btn:hover {
    color: var(--text);
}
.index-toggle-btn.active {
    background: var(--accent-bg);
    color: var(--accent);
}

/* ---- View toggling: data-index-view on body --------------------------- */
.index-view-map,
.index-view-cards { display: none; }
body[data-index-view='Map']   .index-view-map   { display: block; }
body[data-index-view='Cards'] .index-view-cards { display: block; }

/* ---- Frontmap container ---------------------------------------------- */
#frontmap {
    background: linear-gradient(180deg, #0e0e10 0%, var(--bg) 100%);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 22px 22px;
    margin: 0 0 36px;
    overflow: hidden;
    min-height: 320px;
}
.frontmap-wrap {
    position: relative;
    width: 100%;
}
.frontmap-svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1400 / 720;
    overflow: visible;
    user-select: none;
}

/* ---- Cluster hulls (faint rounded rect under each family) ------------- */
.frontmap-cluster-hull {
    fill-opacity: 0.04;
    stroke-opacity: 0.18;
    stroke-width: 1;
    transition: fill-opacity 0.18s ease, stroke-opacity 0.18s ease;
    pointer-events: none;
}
.frontmap-cluster-hull.lit {
    fill-opacity: 0.10;
    stroke-opacity: 0.55;
}
.frontmap-cluster-label {
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    fill-opacity: 0.85;
    cursor: pointer;
    user-select: none;
}
.frontmap-cluster-label:hover { fill-opacity: 1; }

/* ---- Edges ----------------------------------------------------------- */
.frontmap-edge {
    fill: none;
    stroke-width: 1;
    stroke-opacity: 0.15;
    transition: stroke-opacity 0.15s ease, stroke-width 0.15s ease;
    pointer-events: none;
}
.frontmap-edge.contrasts {
    stroke: #e879f9;
    stroke-dasharray: 2 4;
    stroke-opacity: 0.20;
}
.frontmap-edge.lit {
    stroke-opacity: 0.85;
    stroke-width: 1.6;
}
.frontmap-edge.dim {
    stroke-opacity: 0.04;
}

/* ---- Nodes ----------------------------------------------------------- */
.frontmap-node-group {
    cursor: pointer;
    transition: opacity 0.15s ease;
    outline: none;
}
.frontmap-node-group.dim { opacity: 0.25; }
.frontmap-node {
    transition: stroke-width 0.15s ease, filter 0.15s ease;
}
/* Active / neighbor / focus modulate stroke-width and add a soft glow,
   but the family-color stroke is preserved (set inline as the JS-level
   stroke attribute). The accent-tinted glow makes the highlight readable
   without overwriting the family outline. */
.frontmap-node-group.active .frontmap-node {
    stroke-width: 2.8;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.55)) brightness(1.25);
}
.frontmap-node-group.neighbor .frontmap-node {
    stroke-width: 2.1;
    filter: brightness(1.18);
}
.frontmap-node-group:focus-visible .frontmap-node {
    stroke: var(--accent);
    stroke-width: 2.6;
}
.frontmap-node-group:hover .frontmap-node {
    filter: brightness(1.15);
}
.frontmap-node-halo {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    opacity: 0.65;
    pointer-events: none;
}

/* Tier outline modulation — applied directly via stroke-width attr in JS,
   but also let CSS hint families on focus / hover for skin variants. */
.frontmap-node-tier-walkthrough { stroke-linejoin: round; }

/* The single-letter glyph inside the node. */
.frontmap-node-glyph {
    fill: rgba(0, 0, 0, 0.78);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
    letter-spacing: -0.02em;
}

/* The text label below the node. */
.frontmap-node-label {
    fill: var(--text-dim);
    font-size: 11.5px;
    font-weight: 500;
    pointer-events: none;
    transition: fill 0.15s ease;
}
.frontmap-node-group.active .frontmap-node-label,
.frontmap-node-group.neighbor .frontmap-node-label {
    fill: var(--text);
}

/* ---- First-paint triad reveal ---------------------------------------- */
/* For ~1.5s: non-triad nodes/edges fade to 80%; triad sits at full alpha
   with a 1.2× visual halo. Then the class drops, transitions handle the
   ease back to 100%. */
.frontmap-svg.triad-reveal .frontmap-node-group:not(.triad) {
    opacity: 0.8;
}
.frontmap-svg.triad-reveal .frontmap-edge {
    stroke-opacity: 0.10;
}
.frontmap-svg .frontmap-node-group {
    transition: opacity 0.55s ease;
}

/* ---- Legend strip ---------------------------------------------------- */
.frontmap-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 22px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11.5px;
    color: var(--text-dim);
    align-items: center;
}
.frontmap-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.frontmap-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.frontmap-legend-tier-guide {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    gap: 6px;
}
.frontmap-legend-tier {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--text-dim);
    margin: 0 4px 0 6px;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.03);
}
.frontmap-legend-tier.method      { border-width: 1.5px; }
.frontmap-legend-tier.specialty   { border-width: 1px; }
.frontmap-legend-tier.tool        { border-width: 1px; border-style: dashed; }
.frontmap-legend-tier.walkthrough { border-radius: 2px; border-width: 1.5px; }

/* ---- Drawer (slides in from the right edge of the SVG canvas) -------- */
.frontmap-drawer {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 400px;
    max-width: calc(100% - 16px);
    max-height: calc(100% - 16px);
    overflow-y: auto;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-active);
    border-radius: 12px;
    padding: 18px 20px 20px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
    transform: translateX(calc(100% + 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform 0.22s ease, opacity 0.22s ease;
    z-index: 5;
}
.frontmap-drawer.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}
.frontmap-drawer-head {
    border-left: 3px solid var(--accent);
    padding: 0 0 0 12px;
    margin-bottom: 12px;
}
.frontmap-drawer-eyebrow {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}
.frontmap-drawer-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 8px;
}
.frontmap-drawer-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.frontmap-drawer-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid var(--border-active);
    color: var(--text-dim);
    background: rgba(255, 255, 255, 0.02);
    font-weight: 500;
}
.frontmap-drawer-badge.tier {
    color: var(--text-faint);
    border-color: var(--border);
}
.frontmap-drawer-summary {
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.5;
    margin: 4px 0 14px;
}
.frontmap-drawer-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: #000;
    font-weight: 500;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 6px;
    text-decoration: none;
    margin-bottom: 14px;
}
.frontmap-drawer-cta:hover { background: var(--accent-deep); text-decoration: none; }
.frontmap-drawer-source {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 16px;
}
.frontmap-drawer-source-link {
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
}
.frontmap-drawer-source-link:hover { text-decoration: underline; }
.frontmap-drawer-source-meta {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-faint);
    line-height: 1.4;
}
.frontmap-drawer-section {
    margin-top: 12px;
}
.frontmap-drawer-section-label {
    font-size: 10px;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    margin-bottom: 6px;
}
.frontmap-drawer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.frontmap-drawer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 9px 4px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left-width: 2px;
    border-radius: 4px;
    color: var(--text-dim);
    font-size: 12px;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.frontmap-drawer-chip:hover {
    background: var(--bg-elev);
    color: var(--text);
    text-decoration: none;
}
.frontmap-drawer-chip-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

/* ---- Quick paths (4-card mini grid below the map) -------------------- */
.index-quickpaths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 36px;
}
.index-quickpath {
    display: block;
    padding: 16px 18px 18px;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    border-radius: 10px;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.index-quickpath:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    text-decoration: none;
}
.index-quickpath-eyebrow {
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    margin-bottom: 6px;
}
.index-quickpath-title {
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.index-quickpath-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.45;
}

/* ---- Mobile fallback (<= 760px): vertical family-grouped chip list --- */
.frontmap-mobile {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0;
}
.frontmap-mobile-family {
    border-top: 3px solid var(--border);
    padding-top: 10px;
}
.frontmap-mobile-family-head {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.frontmap-mobile-family-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.frontmap-mobile-chips {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.frontmap-mobile-chip {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-areas:
        'glyph label'
        'glyph summary';
    gap: 2px 10px;
    padding: 8px 12px 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text);
    align-items: center;
}
.frontmap-mobile-chip:hover {
    background: var(--bg-elev-2);
    text-decoration: none;
}
.frontmap-mobile-chip-glyph {
    grid-area: glyph;
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    align-self: center;
    border: 1px solid currentColor;
    border-radius: 4px;
    padding: 4px 0;
    line-height: 1;
}
.frontmap-mobile-chip-label {
    grid-area: label;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
}
.frontmap-mobile-chip-summary {
    grid-area: summary;
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.35;
}

/* Compact the slim hero on small screens. */
@media (max-width: 760px) {
    #frontmap {
        padding: 14px 12px 16px;
    }
    .hero-slim .hero-title { font-size: 26px; }
    .index-toggle-btn { padding: 5px 10px; font-size: 11.5px; }
    .frontmap-drawer {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        max-height: 70vh;
        border-radius: 14px 14px 0 0;
        transform: translateY(100%);
    }
    .frontmap-drawer.open { transform: translateY(0); }
}

/* =========================================================================
   Glyph sprite surfaces (Tier 0 #1)
   Per-surface CSS for the 63-symbol concept-glyph sprite. The sprite itself
   is injected by shared/glyphs.js; rules below size and tint each usage
   site. Surfaces: glossary popover header, sidebar minimap nodes, frontmap
   nodes. (Vocab matrix and cheat-row glyphs sit with their own blocks.)
   ========================================================================= */

/* ---- Glossary popover header glyph ----------------------------------- */
.popover-header-glyph {
    display: block;
    width: 120px;
    height: 48px;
    margin: 6px auto 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

/* ---- Sidebar minimap glyph swap-in ----------------------------------- */
/* The new minimap node is an <use> + tiny family-color dot. Dim/active
   states cascade to both children via the parent group's classes. */
.sidebar-minimap-node-use {
    transition: opacity 0.15s ease;
    opacity: 0.92;
}
.sidebar-minimap-node-group.dim .sidebar-minimap-node-use,
.sidebar-minimap-node-group.dim .sidebar-minimap-node-dot {
    opacity: 0.25;
}
.sidebar-minimap-node-group.hover-active .sidebar-minimap-node-use,
.sidebar-minimap-node-group.neighbor .sidebar-minimap-node-use {
    opacity: 1;
}
.sidebar-minimap-node-use.active {
    opacity: 1;
}
.sidebar-minimap-node-dot {
    transition: r 0.15s ease;
}
.sidebar-minimap-node-dot.active {
    stroke: var(--text);
    stroke-width: 0.5;
}
/* Transparent hit-target rect overlaying each minimap node. Sized 30×26 —
   above the 24px accessible-target floor — and rendered on top so it
   intercepts pointer events even when the cursor lands in the gap between
   the small glyph and the family-color dot. The visual children (use, dot)
   stay below and continue to render the dim/active/hover state via the
   parent group's classes. */
.sidebar-minimap-node-hit {
    fill: transparent;
    cursor: pointer;
    /* pointer-events default ('visiblePainted') still fires for fill=transparent
       in SVG; explicit 'fill' makes it crystal-clear and immune to future
       global resets that might disable visiblePainted on transparent fills. */
    pointer-events: fill;
}

/* ---- Frontmap node glyph centering ----------------------------------- */
/* The <use> sprite reference replaces the legacy 1-letter <text> glyph
   inside each circle. Pointer-events disabled so the parent group
   continues to receive hover/click events. */
.frontmap-node-glyph-svg {
    pointer-events: none;
}

/* ===== Fractal multi-timeframe diagram ================================
   Tier 0 §0 master artifact. Page-spanning SVG showing one origin level
   ($86.589 from WT-1 SOL Long) drawn through 1W → 1D → 4H → 1H panels
   at the same y-coordinate. The visual punchline: the level is
   invariant across scales. Embedded both in layer-2-trends chapter 2.3
   and on index.html as a hero artifact alongside the front-map. */
.fractal-diagram {
    background: #050505;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 24px 22px;
    margin: 24px auto;
    max-width: 1200px;
    overflow-x: auto;
}
.fractal-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 720px;
}
.fractal-diagram-caption {
    text-align: center;
    font-size: 12px;
    color: var(--text-faint);
    margin-top: 14px;
    font-style: italic;
    line-height: 1.5;
}
.fractal-panel-label {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    fill: #c9c9c9;
    font-weight: 600;
    text-transform: uppercase;
}
.fractal-panel-caption {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    fill: #8a8a8a;
    letter-spacing: 0.04em;
}
.fractal-origin-callout {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    fill: #fbbf24;
    font-weight: 600;
}
.fractal-thesis-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    fill: #c9c9c9;
    text-transform: uppercase;
}
.fractal-separator {
    stroke: #1f1f1f;
    stroke-width: 1;
    stroke-dasharray: 2,3;
}
.fractal-panel {
    transition: opacity 0.22s ease;
}
/* Hover-trace: dim siblings, brighten the focused panel.
   Origin line is excluded (it's the invariant — stays at full opacity). */
.fractal-diagram:hover .fractal-panel {
    opacity: 0.32;
}
.fractal-diagram .fractal-panel:hover {
    opacity: 1;
}

/* Index hero placement — sit between slim hero and front-map as a
   sibling artifact. */
.index-fractal-hero {
    margin: 4px 0 28px;
}
.index-fractal-hero .fractal-diagram {
    margin: 0;
}
.index-fractal-hero-eyebrow {
    font-size: 10px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    margin-bottom: 8px;
}

@media (max-width: 760px) {
    .fractal-diagram {
        padding: 14px 12px 16px;
    }
}

/* ===== Layer hero illustrations =====
   Banner-size SVG that visually previews what a layer teaches, sitting at
   the top of each layer page above the .layer-cheat block. */
.layer-hero {
    margin: 16px 0 24px;
    padding: 12px 16px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.layer-hero svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1200px;
    margin: 0 auto;
}
.layer-hero-caption {
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}
.layer-hero-label {
    font-family: var(--mono);
    font-size: 14px;
    fill: #c9c9c9;
    letter-spacing: 0.14em;
    font-weight: 600;
    text-transform: uppercase;
}
.layer-hero-sublabel {
    font-family: var(--mono);
    font-size: 12px;
    fill: #8a8a8a;
    letter-spacing: 0.06em;
}
.layer-hero-divider {
    stroke: #1f1f1f;
    stroke-width: 1;
    stroke-dasharray: 2,3;
}

/* Bump label sizes inside hero SVGs (the in-SVG .svg-label* classes default
   to 10px which is illegible at hero scale). These overrides apply only
   inside .layer-hero so the diagrams elsewhere keep their tighter sizing. */
.layer-hero .svg-label {
    font-size: 14px;
}
.layer-hero .svg-label-bright {
    font-size: 15px;
    font-weight: 600;
}
.layer-hero .svg-label-h,
.layer-hero .svg-label-b,
.layer-hero .svg-label-o {
    font-size: 14px;
    font-weight: 600;
}

@media (max-width: 720px) {
    .layer-hero { padding: 8px; }
}

/* ===== Chapter hero illustrations =====
   Smaller-scale hero that lives at the top of a SPECIFIC chapter (inside
   .chapter-body, after the chapter <header>). Used for "secondary" heroes
   that supplement the per-layer hero with chapter-specific visuals. */
.chapter-hero {
    margin: 0 0 24px;
    padding: 12px 16px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.chapter-hero svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1100px;
    margin: 0 auto;
}
.chapter-hero-caption {
    font-size: 12px;
    color: var(--text-faint);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

/* Match the layer-hero label sizing inside chapter heroes */
.chapter-hero .svg-label { font-size: 14px; }
.chapter-hero .svg-label-bright { font-size: 15px; font-weight: 600; }
.chapter-hero .svg-label-h,
.chapter-hero .svg-label-b,
.chapter-hero .svg-label-o { font-size: 14px; font-weight: 600; }

@media (max-width: 720px) {
    .chapter-hero { padding: 8px; }
}

/* ============================================================================
   prefers-reduced-motion — respect OS-level motion-reduction preference.
   Disables all transitions, animations, and smooth-scroll site-wide.
   Specifically blunts the noisier ones: gym streak-ring keyframe,
   front-map triad-reveal opacity ease, fractal-diagram hover dim.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Cancel the front-map triad-reveal fade so all nodes are at full opacity from first paint */
    .frontmap-svg.triad-reveal .frontmap-node-group { opacity: 1 !important; }
    /* Cancel the fractal-diagram hover-dim cascade */
    .fractal-diagram:hover .fractal-panel { opacity: 1 !important; }
    /* Cancel the gym streak-ring celebration animation */
    .gym-stat-streak.landmark { animation: none !important; }
}

/* ============================================================================
   Quick-path PRIMARY emphasis — for the "Where to start" recommended-reading
   card on the front door. Subtle accent border + glow.
   ============================================================================ */
.index-quickpath-primary {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.15);
    background: rgba(56, 189, 248, 0.03);
}
.index-quickpath-primary .index-quickpath-eyebrow {
    color: var(--accent);
}

/* ============================================================================
   Reading-order page — phase-grouped reading list with diagnostic table.
   ============================================================================ */
.reading-phase {
    margin: 32px 0;
    padding: 24px 28px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.reading-phase-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 4px;
}
.reading-phase-skip .reading-phase-eyebrow {
    color: var(--text-faint);
}
.reading-phase-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.reading-phase-lede {
    color: var(--text-dim);
    margin-bottom: 16px;
    line-height: 1.6;
}
.reading-list {
    margin: 12px 0;
    padding-left: 22px;
    line-height: 1.9;
}
.reading-list li {
    margin-bottom: 4px;
}
.reading-list-note {
    color: var(--text-faint);
    font-size: 14px;
    margin-left: 4px;
}
.reading-phase-target {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 14px;
}

/* ============================================================================
   Sidebar — extra rules for the rebuilt sidebar.js
   (Map/Linear/Cheat tri-state toggle, related-panel chips, cluster labels,
   minimap glyph + dot + hit-target overlay)
   ============================================================================ */

.sb-mode-toggle {
    display: flex;
    gap: 4px;
    margin: 0 4px 16px;
    padding: 3px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.sb-mode-btn {
    flex: 1 1 auto;
    background: transparent;
    border: 0;
    color: var(--text-faint);
    padding: 6px 8px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.sb-mode-btn:hover { color: var(--text); }
.sb-mode-btn.active {
    background: rgba(56, 189, 248, 0.15);
    color: var(--accent);
}

/* Related-to-current panel below the minimap */
.sb-related {
    margin: 0 4px;
    padding: 12px 10px 10px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.sb-related-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--text-faint);
    margin-bottom: 8px;
}
.sb-related-empty {
    font-size: 11px;
    color: var(--text-faint);
    font-style: italic;
}
.sb-related-chip {
    display: inline-block;
    margin: 0 4px 4px 0;
    padding: 4px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 5px;
    color: var(--text);
    text-decoration: none;
    font-size: 11px;
    transition: background 0.15s, border-color 0.15s;
}
.sb-related-chip:hover {
    background: var(--bg-elev-2);
    text-decoration: none;
}
.sb-related-chip.fam-level       { border-left-color: #38bdf8; }
.sb-related-chip.fam-trend       { border-left-color: #fbbf24; }
.sb-related-chip.fam-method      { border-left-color: #a78bfa; }
.sb-related-chip.fam-execution   { border-left-color: #fb7185; }
.sb-related-chip.fam-indicator   { border-left-color: #94a3b8; }
.sb-related-chip.fam-walkthrough { border-left-color: #34d399; }

/* Cheat-mode list */
.sb-cheat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0 4px;
}
.sb-cheat-link {
    display: block;
    padding: 8px 12px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13px;
    border-radius: 5px;
    transition: background 0.15s, color 0.15s;
}
.sb-cheat-link:hover {
    background: var(--bg-elev);
    color: var(--text);
    text-decoration: none;
}

/* Linear-mode wrapper */
.sb-linear { padding: 0 4px; }

/* Minimap-specific extra rules used by the rebuilt sidebar.js */
.sidebar-minimap-cluster-label {
    font-family: var(--mono);
    font-size: 7.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 600;
    pointer-events: none;
}
.sidebar-minimap-glyph,
.sidebar-minimap-dot {
    transition: opacity 0.18s ease;
}
.sidebar-minimap-node-group.dim .sidebar-minimap-glyph,
.sidebar-minimap-node-group.dim .sidebar-minimap-dot {
    opacity: 0.22;
}
.sidebar-minimap-node-group.lit .sidebar-minimap-glyph,
.sidebar-minimap-node-group.lit .sidebar-minimap-dot {
    opacity: 1;
}
.sidebar-minimap-node-group.active .sidebar-minimap-dot {
    r: 3.4;
    filter: drop-shadow(0 0 3px currentColor);
}
.sidebar-minimap-hit {
    cursor: pointer;
}
.sidebar-minimap-node-group:focus-visible .sidebar-minimap-glyph {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
}

/* ═══════════════════════════════════════════════════════════════════
   D6 BATCH E1 + E2 — STRUCTURAL ADDITIONS FOR TOP-DOWN PROCESSORS
   ═══════════════════════════════════════════════════════════════════
   Components: chapter-tldr · misread · ascii-tree · open-questions
              · dep-strip · unlocks-chips · layer-integration
   ─────────────────────────────────────────────────────────────────── */

/* #1 — End-of-chapter TL;DR seal (mirror of .chapter-why, right-aligned) */
.chapter-tldr {
    font-size: 14px;
    color: var(--accent);
    line-height: 1.45;
    margin: 22px 0 10px;
    font-style: italic;
    border-right: 2px solid var(--accent);
    padding-right: 12px;
    text-align: right;
    opacity: 0.9;
}
.chapter-tldr::after {
    content: " — THE COMPRESSION";
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.14em;
    opacity: 0.85;
}

/* #3 — Anti-pattern .misread callout */
.misread {
    border-left: 4px solid #fb7185;
    background: rgba(251, 113, 133, 0.06);
    padding: 14px 18px;
    margin: 20px 0;
    border-radius: 0 6px 6px 0;
}
.misread-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.misread-icon {
    color: #fb7185;
    font-size: 14px;
    line-height: 1;
}
.misread-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #fb7185;
}
.misread-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 8px 0 10px;
}
.misread-tag {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    font-weight: 600;
}
.misread-looks .misread-tag { color: #a16207; }   /* dim amber */
.misread-is .misread-tag { color: #fb7185; }
.misread-grid p { margin: 0; font-size: 14px; line-height: 1.5; }
.misread-tell {
    font-size: 13px;
    color: var(--text-dim);
    border-top: 1px dashed var(--border);
    padding-top: 8px;
    margin: 8px 0 0;
}
.misread-tell strong { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
    .misread-grid { grid-template-columns: 1fr; }
}

/* #7 — ASCII decision-tree block (in <pre>) */
.ascii-tree {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12.5px;
    line-height: 1.35;
    white-space: pre;
    overflow-x: auto;
    padding: 14px 18px;
    margin: 18px 0;
    border-left: 3px solid var(--accent);
    background: rgba(251, 191, 36, 0.04);
    color: var(--text);
    border-radius: 0 4px 4px 0;
}
.ascii-tree-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: 6px;
    font-family: inherit;
}

/* #6 — Open Questions coda per layer */
.open-questions {
    margin: 56px 0 24px;
    padding: 24px 0 0;
    border-top: 1px dashed var(--border);
}
.open-questions h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    font-weight: 600;
    margin: 0 0 6px;
}
.open-questions .oq-frame {
    font-size: 13px;
    color: var(--text-dim);
    margin: 0 0 16px;
    font-style: italic;
}
.open-questions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.open-questions li {
    padding: 10px 0 10px 18px;
    border-left: 2px solid #fbbf24;
    margin-bottom: 8px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--text);
}
.open-questions li::before { content: none; }

/* #5 — Concept dependency strip (Builds on / Unlocks chips at chapter top) */
.dep-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 6px;
    padding: 10px 14px;
    margin: 0 0 14px;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.02);
    border-left: 2px solid var(--border);
    border-radius: 0 4px 4px 0;
}
.dep-strip-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    margin-right: 4px;
}
.dep-strip-label.builds { color: #94a3b8; }
.dep-strip-label.unlocks { color: #38bdf8; }
.dep-chip {
    font-size: 11.5px;
    padding: 3px 9px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    background: transparent;
}
.dep-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.dep-chip-sep {
    width: 1px;
    background: var(--border);
    align-self: stretch;
    margin: 0 4px;
}

/* #8 — Forward-link "unlocks" chips at chapter end (cyan pill, distinct from .concept-chip) */
.unlocks-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 24px 0 12px;
    padding: 10px 14px;
    border-left: 2px solid #38bdf8;
    background: rgba(56, 189, 248, 0.04);
    border-radius: 0 4px 4px 0;
}
.unlocks-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #38bdf8;
    margin-right: 4px;
}
.unlocks-chip {
    font-size: 11.5px;
    padding: 4px 11px;
    background: transparent;
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.45);
    border-radius: 14px;
    text-decoration: none;
}
.unlocks-chip::before { content: "→\00a0"; opacity: 0.7; }
.unlocks-chip:hover {
    background: rgba(56, 189, 248, 0.1);
    border-color: #38bdf8;
}
.unlocks-chip-wt {
    border-style: dashed;
    opacity: 0.85;
}
.unlocks-chips-leaf {
    color: var(--text-dim);
    font-style: italic;
    font-size: 12.5px;
}

/* #10 — End-of-layer integration panel (3-cell grid: built on / hold / feeds into) */
.layer-integration {
    margin: 48px 0 24px;
    padding: 22px 24px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-left: 3px solid var(--accent);
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.04), transparent 70%);
    border-radius: 8px;
}
.li-heading {
    font-size: 14px;
    color: var(--accent);
    margin: 0 0 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.li-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
    margin-bottom: 12px;
}
.li-grid-arrow {
    align-self: center;
    color: var(--accent);
    font-size: 16px;
    padding: 0 12px;
    opacity: 0.7;
}
.li-cell {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
}
.li-cell-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: 6px;
    font-weight: 600;
}
.li-cell p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.li-here { border: 1px dashed rgba(56, 189, 248, 0.45); }
.li-cross {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 13px;
    color: var(--text-dim);
}
.li-cross strong { color: var(--text); font-weight: 600; }
@media (max-width: 720px) {
    .li-grid { grid-template-columns: 1fr; }
    .li-grid-arrow { padding: 4px 0; }
    .li-grid-arrow::before { content: "↓"; }
    .li-grid-arrow span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   D6 BATCHES E3 + E4 + E5 — STRUCTURAL ADDITIONS, FULL SWEEP
   ═══════════════════════════════════════════════════════════════════
   Components: family-color tier tags · concept-schema · wt-flowchart
              · breadcrumb · body.why-only · edge-case · failure-modes
   ─────────────────────────────────────────────────────────────────── */

/* #11 — Family-color tier tags (chapter heads + sub-headings) */
:root {
    --fam-level: #38bdf8;       /* sky */
    --fam-trend: #fbbf24;       /* amber */
    --fam-method: #a78bfa;      /* violet */
    --fam-indicator: #94a3b8;   /* slate */
    --fam-execution: #fb7185;   /* rose */
    --fam-walkthrough: #34d399; /* emerald */
}
.chapter-head[data-fam] {
    border-left: 3px solid var(--fam, var(--fam-level));
}
.chapter-head[data-fam="level"] { --fam: var(--fam-level); }
.chapter-head[data-fam="trend"] { --fam: var(--fam-trend); }
.chapter-head[data-fam="method"] { --fam: var(--fam-method); }
.chapter-head[data-fam="indicator"] { --fam: var(--fam-indicator); }
.chapter-head[data-fam="execution"] { --fam: var(--fam-execution); }
.chapter-head[data-fam="walkthrough"] { --fam: var(--fam-walkthrough); }
.chapter-head[data-fam] .chapter-num {
    color: var(--fam);
    opacity: 0.85;
}
/* Sub-heading family override (only when explicitly tagged — silent inheritance otherwise) */
.chapter-body h3[data-fam] {
    border-left: 2px solid var(--fam-level);
    padding-left: 10px;
    margin-left: -12px;
}
.chapter-body h3[data-fam="level"]      { border-left-color: var(--fam-level); }
.chapter-body h3[data-fam="trend"]      { border-left-color: var(--fam-trend); }
.chapter-body h3[data-fam="method"]     { border-left-color: var(--fam-method); }
.chapter-body h3[data-fam="indicator"]  { border-left-color: var(--fam-indicator); }
.chapter-body h3[data-fam="execution"]  { border-left-color: var(--fam-execution); }
.chapter-body h3[data-fam="walkthrough"]{ border-left-color: var(--fam-walkthrough); }

/* #19 — Hierarchical breadcrumb trail (sticky top strip) */
.breadcrumb {
    font-size: 11.5px;
    color: var(--text-dim);
    padding: 9px 16px 7px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.breadcrumb a {
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.15s;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep {
    opacity: 0.45;
    margin: 0 4px;
}
.breadcrumb-current {
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #9 — WHY-only mode (orthogonal content filter) */
.read-mode-pill {
    display: inline-flex;
    gap: 0;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.read-mode-pill button {
    background: transparent;
    color: var(--text-dim);
    border: none;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    font-family: inherit;
}
.read-mode-pill button.active {
    background: var(--accent);
    color: #0a0a0a;
}
body.why-only .layer-cheat,
body.why-only .layer-hero,
body.why-only .chapter-hero,
body.why-only .chapter-body > .dep-strip,
body.why-only .chapter-body > .unlocks-chips,
body.why-only .chapter-body > h3,
body.why-only .chapter-body > p:not(.chapter-why):not(.chapter-tldr),
body.why-only .chapter-body > .rules,
body.why-only .chapter-body > .warning,
body.why-only .chapter-body > .example,
body.why-only .chapter-body > .quote,
body.why-only .chapter-body > .quiz,
body.why-only .chapter-body > .misread,
body.why-only .chapter-body > .ascii-tree,
body.why-only .chapter-body > table,
body.why-only .chapter-body > ul:not(.unlocks-chips),
body.why-only .chapter-body > .vocab-matrix,
body.why-only .chapter-body > .concept-schema {
    display: none;
}
body.why-only .chapter:not(.force-full) .chapter-body {
    padding: 6px 20px 12px;
}
body.why-only .chapter:not(.force-full) .chapter-head {
    padding: 8px 16px;
}
body.why-only .chapter { background: rgba(99, 102, 241, 0.04); }
body.why-only .chapter-why {
    font-size: 16px;
    margin: 6px 0;
}
body.why-only .chapter.force-full .chapter-body > * { display: revert; }
body.why-only .chapter.force-full .chapter-hero { display: block; }
body.why-only .chapter.force-full .layer-cheat { display: block; }
body.why-only .open-questions,
body.why-only .layer-integration {
    opacity: 0.7;
}

/* #13 — Per-concept schema diagrams (520x340 wrapper) */
.concept-schema {
    margin: 18px 0 22px;
    padding: 18px 20px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 8px 8px 0;
}
.concept-schema-label {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    margin-bottom: 10px;
}
.concept-schema svg {
    display: block;
    width: 100%;
    max-width: 720px;
    height: auto;
    margin: 0 auto;
}
.concept-schema-caption {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--text-dim);
    text-align: center;
    font-style: italic;
}

/* #18 — Pre-walkthrough decision flowchart */
.wt-flowchart {
    margin: 18px 0 24px;
    padding: 20px 22px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0 6px 6px 0;
}
.wt-flowchart-eyebrow {
    font-size: 10.5px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    margin-bottom: 4px;
}
.wt-flowchart-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--text);
}
.wt-flowchart-caption {
    margin: 12px 0 0;
    font-size: 12.5px;
    color: var(--text-dim);
    font-style: italic;
}

/* #12 — Edge-case files block */
.edge-cases {
    margin: 48px 0 24px;
    padding: 24px 0 0;
    border-top: 2px dashed var(--border);
}
.edge-cases > h2 {
    font-size: 18px;
    color: var(--text);
    margin: 0 0 6px;
}
.edge-cases-lede {
    font-size: 13px;
    color: var(--text-dim);
    font-style: italic;
    margin: 0 0 18px;
}
.edge-case {
    border: 1px solid var(--border);
    border-left: 3px solid #fb7185;
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.015);
}
.edge-case-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.edge-case-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    font-weight: 600;
    color: #fb7185;
    letter-spacing: 0.1em;
}
.edge-case-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}
.edge-case-stress {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-dim);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.edge-case-prompt {
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.25);
    padding: 11px 14px;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 13.5px;
}
.edge-case-prompt-label {
    display: block;
    color: #fbbf24;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 4px;
}
.edge-case-reveal-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-top: 6px;
}
.edge-case-reveal-btn:hover {
    border-color: var(--accent);
    color: var(--text);
}
.edge-case-reveal {
    display: none;
    background: rgba(52, 211, 153, 0.05);
    border: 1px solid rgba(52, 211, 153, 0.25);
    padding: 12px 14px;
    border-radius: 4px;
    margin-top: 8px;
    font-size: 13.5px;
}
.edge-case-reveal.show { display: block; }
.edge-case-reveal-label {
    display: block;
    color: #34d399;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 4px;
}
.edge-case-reveal p { margin: 0 0 6px; }
.edge-case-reveal p:last-child { margin: 0; }

/* #17 — Failure-mode taxonomy (3-row block: looks-alike / wrong-context / incomplete) */
.failure-modes {
    margin: 18px 0 24px;
    padding: 16px 20px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.failure-modes h3 {
    margin: 0 0 4px;
    font-size: 15px;
    color: var(--text);
}
.failure-modes .fm-lede {
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
    margin: 0 0 12px;
}
.fm-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.fm-list li {
    padding: 10px 14px;
    margin-bottom: 8px;
    border-left: 3px solid var(--border);
    background: rgba(255, 255, 255, 0.015);
    border-radius: 0 4px 4px 0;
}
.fm-lookalike { border-left-color: #fbbf24 !important; }
.fm-context   { border-left-color: #fb7185 !important; }
.fm-incomplete { border-left-color: #94a3b8 !important; }
.fm-tag {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-right: 8px;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-dim);
}
.fm-list .fm-lookalike .fm-tag { color: #fbbf24; }
.fm-list .fm-context .fm-tag { color: #fb7185; }
.fm-list .fm-incomplete .fm-tag { color: #94a3b8; }
.fm-confusion {
    margin: 4px 0;
    font-size: 13.5px;
    color: var(--text);
}
.fm-diagnostic {
    margin: 4px 0 0;
    font-size: 12.5px;
    color: var(--text-dim);
}
.fm-diagnostic strong { color: var(--accent); font-weight: 600; }

/* Predict-then-reveal: flatten for print so the page is a real cheat sheet on paper. */
@media print {
    .wt-reveal-btn { display: none !important; }
    .wt-reveal, .wt-prompt { display: block !important; padding: 4px 8px !important; }
    .wt-reveal::before { content: "Answer: "; font-weight: 600; }
}

/* ═══════════════════════════════════════════════════════════════════
   D7 — CHART LAB (POC)
   ═══════════════════════════════════════════════════════════════════
   Active-decision practice on chart-shaped surfaces.
   ─────────────────────────────────────────────────────────────────── */
.cl-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    margin-top: 12px;
}
.cl-pickers { border-right: 1px solid var(--border); padding-right: 18px; }
.cl-pickers-label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--text-dim); margin-bottom: 10px;
}
.cl-picker {
    display: block; width: 100%; text-align: left;
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 8px 11px; margin-bottom: 6px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; line-height: 1.35;
    transition: border-color 0.15s, background 0.15s;
}
.cl-picker:hover { border-color: var(--accent); background: rgba(251,191,36,0.04); }
.cl-picker.active {
    border-color: var(--accent); background: rgba(251,191,36,0.10); color: var(--text);
}
.cl-picker-num {
    display: block; font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--accent); margin-bottom: 2px;
}
.cl-picker-fam {
    display: inline-block; width: 6px; height: 6px;
    border-radius: 50%; margin-right: 6px; vertical-align: middle;
}
.cl-stage { min-height: 600px; }
.cl-scenario-head { margin-bottom: 14px; }
.cl-scenario-eyebrow {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--accent); margin-bottom: 4px;
}
.cl-scenario-title {
    font-size: 22px; font-weight: 600; margin: 0 0 8px; color: var(--text);
}
.cl-scenario-why {
    font-size: 13.5px; color: var(--text-dim); font-style: italic;
    border-left: 2px solid var(--accent); padding-left: 12px;
    margin: 0 0 16px; max-width: 760px;
}
.cl-chart-shell {
    background: #0a0a0a; border: 1px solid var(--border);
    border-radius: 8px; padding: 14px; margin-bottom: 12px; position: relative;
}
.cl-chart-shell svg { display: block; width: 100%; height: auto; }
.cl-helps {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
    padding: 10px 12px; background: rgba(255,255,255,0.02);
    border: 1px solid var(--border); border-radius: 6px;
}
.cl-helps-label {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.12em; color: var(--text-dim);
    align-self: center; margin-right: 4px;
}
.cl-help-btn {
    background: transparent; color: var(--text-dim);
    border: 1px solid var(--border); padding: 4px 10px;
    border-radius: 4px; font-size: 11.5px; font-weight: 500;
    cursor: pointer; font-family: inherit;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.cl-help-btn:hover { color: var(--text); border-color: var(--accent); }
.cl-help-btn.on {
    background: rgba(251,191,36,0.10); border-color: var(--accent); color: var(--accent);
}
.cl-help-btn.cheat { margin-left: auto; color: #fb7185; border-color: rgba(251,113,133,0.4); }
.cl-help-btn.cheat.on { background: rgba(251,113,133,0.10); }

/* Help layer visibility — driven by data-helps on chart shell */
.cl-help-layer { display: none; }
.cl-chart-shell[data-helps~="levels"] .cl-help-layer.cl-layer-levels { display: inline; }
.cl-chart-shell[data-helps~="indicator"] .cl-help-layer.cl-layer-indicator { display: inline; }
.cl-chart-shell[data-helps~="last"] .cl-help-layer.cl-layer-last { display: inline; }
.cl-chart-shell[data-helps~="cheat"] .cl-help-layer { display: inline; }

/* Quiz panel */
.cl-quiz {
    background: var(--bg-elev); border: 1px solid var(--border);
    border-radius: 8px; padding: 18px 22px; max-width: 760px;
}
.cl-progress { display: flex; gap: 4px; margin-bottom: 14px; }
.cl-progress-dot { flex: 1; height: 4px; border-radius: 2px; background: var(--border); }
.cl-progress-dot.done { background: var(--accent); }
.cl-progress-dot.active { background: var(--accent); opacity: 0.5; }
.cl-step-num {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--accent); margin-bottom: 6px;
}
.cl-step-prompt {
    font-size: 16px; color: var(--text); margin: 0 0 14px; line-height: 1.45;
}
.cl-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.cl-option {
    background: transparent; color: var(--text);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 10px 14px; font-size: 14px; line-height: 1.4;
    text-align: left; cursor: pointer; font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.cl-option:hover { border-color: var(--accent); }
.cl-option.picked { border-color: var(--accent); background: rgba(251,191,36,0.06); }
.cl-option.correct { border-color: #34d399; background: rgba(52,211,153,0.08); }
.cl-option.wrong { border-color: #fb7185; background: rgba(251,113,133,0.06); opacity: 0.7; }
.cl-option-marker {
    display: inline-block; width: 18px; margin-right: 8px;
    text-align: center; color: var(--text-dim); font-weight: 600;
}
.cl-option.correct .cl-option-marker { color: #34d399; }
.cl-option.wrong .cl-option-marker { color: #fb7185; }
.cl-step-reveal {
    display: none;
    background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.25);
    padding: 12px 14px; border-radius: 6px; margin-top: 10px;
    font-size: 13.5px; line-height: 1.55;
}
.cl-step-reveal.show { display: block; }
.cl-step-reveal-label {
    display: block; color: #34d399; font-size: 10.5px;
    font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.14em; margin-bottom: 6px;
}
.cl-step-reveal p { margin: 0 0 6px; }
.cl-step-reveal p:last-child { margin: 0; }
.cl-step-actions { display: flex; gap: 8px; margin-top: 14px; }
.cl-btn {
    background: transparent; color: var(--text);
    border: 1px solid var(--border); padding: 7px 14px;
    border-radius: 6px; font-size: 12px; font-weight: 500;
    cursor: pointer; font-family: inherit;
}
.cl-btn:hover { border-color: var(--accent); color: var(--accent); }
.cl-btn-primary { background: var(--accent); color: #0a0a0a; border-color: var(--accent); }
.cl-btn-primary:hover { background: #fde68a; border-color: #fde68a; color: #0a0a0a; }
.cl-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cl-outcome {
    margin-top: 18px; padding: 16px 20px;
    border: 1px solid var(--accent); background: rgba(251,191,36,0.06);
    border-radius: 8px;
}
.cl-outcome-label {
    font-size: 10.5px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--accent); margin-bottom: 6px;
}
.cl-outcome-title {
    font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--text);
}
.cl-outcome p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; }
.cl-outcome p:last-child { margin: 0; }
@media (max-width: 900px) {
    .cl-shell { grid-template-columns: 1fr; }
    .cl-pickers { border-right: none; border-bottom: 1px solid var(--border); padding-right: 0; padding-bottom: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
   D8 WAVE D — MOBILE / PWA / PRINT
   ═══════════════════════════════════════════════════════════════════
   Phone-first responsive fixes, install/print buttons,
   compact taps, PDF print stylesheet.
   ─────────────────────────────────────────────────────────────────── */

/* ---------- INSTALL / PRINT ACTION BUTTONS (top-right of breadcrumb) ---------- */
.app-actions {
    display: inline-flex;
    gap: 6px;
    margin-left: auto;
}
.app-action-btn {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 9px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
}
.app-action-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* ---------- PHONE-FIRST RESPONSIVE FIXES ---------- */

/* Below 720px — phone territory */
@media (max-width: 720px) {
    /* Tighter page padding */
    .main { padding: 18px 14px 48px !important; }

    /* Hide sidebar by default; show only when toggled (uses existing .sidebar.open class) */
    .sidebar {
        display: none;
    }
    .sidebar.open {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;
        background: var(--bg);
        overflow-y: auto;
        padding: 16px;
    }
    .app {
        display: block; /* override grid */
    }

    /* Hamburger button — injected by nav-modes.js */
    .nav-burger {
        position: fixed;
        top: 8px;
        right: 8px;
        z-index: 250;
        background: var(--bg-elev);
        border: 1px solid var(--border);
        border-radius: 6px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 18px;
        color: var(--text);
        font-family: inherit;
    }
    .nav-burger:hover { color: var(--accent); border-color: var(--accent); }

    /* Page header — smaller */
    .page-header { padding-top: 36px; } /* clear hamburger */
    .page-title { font-size: 24px; }
    .page-why { font-size: 13.5px; padding: 6px 10px; }
    .page-lede { font-size: 15px; }

    /* Breadcrumb — bigger tap targets, drop pill */
    .breadcrumb {
        font-size: 11px;
        padding: 8px 12px 6px;
    }
    .breadcrumb a, .breadcrumb-current { padding: 4px 0; }
    .read-mode-pill button {
        padding: 6px 12px;
        font-size: 11px;
    }
    .breadcrumb-page { display: none; } /* keep only Home › Current */

    /* Chapter heads — bigger tap targets */
    .chapter-head {
        padding: 14px 16px !important;
        min-height: 56px;
    }
    .chapter-title { font-size: 15px; }
    .chapter-num { font-size: 11px; }

    /* Concept matrices / vocab matrices — horizontal scroll inside scrollable wrapper */
    table.vocab-matrix {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    table.vocab-matrix th,
    table.vocab-matrix td {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Decision trees — already in <pre> with overflow-x; tighten font */
    .ascii-tree {
        font-size: 10.5px;
        padding: 10px 12px;
    }

    /* Layer hero SVG — full width, no max */
    .layer-hero svg { max-width: 100%; height: auto; }
    .chapter-hero svg { max-width: 100%; height: auto; }

    /* Discrimination Gym — 4-card grid → 2×2 */
    .gym-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Chart Lab — picker rail full-width on top, stage below */
    .cl-shell { display: block; }
    .cl-pickers {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0 0 14px;
        margin-bottom: 14px;
    }
    .cl-chart-shell svg { max-width: 100%; }
    .cl-helps { gap: 6px; }
    .cl-help-btn { font-size: 10.5px; padding: 6px 10px; }
    .cl-options { gap: 10px; }
    .cl-option { padding: 12px 14px; font-size: 13.5px; }
    .cl-btn { padding: 9px 16px; font-size: 12px; min-height: 36px; }

    /* Trading journal form — single column at narrow */
    .jo-form-grid { grid-template-columns: 1fr 1fr !important; gap: 10px; }
    .jo-field-half { grid-column: span 2 !important; }
    .jo-trade {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px 8px;
        padding: 12px 14px;
    }
    .jo-trade > * {
        font-size: 11.5px;
    }
    .jo-trade-actions { justify-content: flex-start; }
    .jo-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }

    /* Practice index — single column */
    .pr-grid { grid-template-columns: 1fr !important; }
    .pr-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .pr-due-item {
        flex-wrap: wrap;
        font-size: 12px;
    }

    /* Walkthrough steps — wider tap on accordion heads */
    .wt-step-head { padding: 14px 16px; min-height: 56px; }
    .wt-step-title { font-size: 14px; }
    .wt-chart svg { max-width: 100%; height: auto; }

    /* Concept-chip + dep-strip — wrap and fit */
    .concept-chips, .dep-strip, .unlocks-chips { flex-wrap: wrap; }
    .dep-chip, .unlocks-chip, .concept-chip { font-size: 11px; padding: 4px 9px; }

    /* Open Questions — tighter */
    .open-questions li { font-size: 13.5px; padding: 8px 0 8px 14px; }

    /* Layer integration grid → single column */
    .li-grid {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    .li-grid-arrow {
        padding: 4px 0;
        text-align: center;
    }
    .li-grid-arrow span::before { content: "↓"; }
    .li-grid-arrow span { font-size: 0; } /* hide horizontal arrow on mobile */

    /* Source-videos page — single column */
    .sv-grid { grid-template-columns: 1fr !important; }
}

/* Tablet zone — 720px to 900px */
@media (min-width: 720px) and (max-width: 900px) {
    .jo-form-grid { grid-template-columns: 1fr 1fr 1fr !important; }
}

/* ---------- PWA / SAFE-AREA ---------- */
@media (display-mode: standalone) {
    /* Hide breadcrumb-injected hamburger redundancy when PWA-installed; show app-action buttons */
    body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- PRINT-AS-BOOK STYLESHEET ---------- */
@media print {
    /* Hide all interactive / nav surfaces */
    .sidebar, .page-nav, .breadcrumb, .nav-burger,
    .read-mode-pill, .app-actions,
    .cl-helps, .cl-quiz, .cl-pickers, .cl-shell .cl-stage > .cl-helps,
    .pr-tools, .jo-form-card, .jo-tools, .jo-trade-actions,
    .wt-reveal-btn, .cl-step-actions, .edge-case-reveal-btn,
    .sv-controls, .gym-controls, .glossary-search,
    .sidebar-minimap, .sidebar-mode-toggle,
    button, .pr-reset {
        display: none !important;
    }

    /* Reset layout — single column, full width */
    .app { grid-template-columns: 1fr !important; display: block !important; }
    .main { padding: 0 24px !important; max-width: 100% !important; }
    body { background: white !important; color: black !important; }

    /* Force colors for print readability */
    .page-eyebrow, .chapter-num { color: #444 !important; }
    .page-title, .chapter-title, .page-lede, .chapter-body, p, li, td, th { color: black !important; }
    .page-why, .chapter-why, .chapter-tldr {
        color: #555 !important;
        border-color: #888 !important;
        background: #fafafa !important;
    }

    /* Reveal everything that's normally hidden */
    .wt-reveal, .cl-step-reveal, .edge-case-reveal {
        display: block !important;
        opacity: 1 !important;
        background: #fafafa !important;
        color: black !important;
        border: 1px solid #ccc !important;
        padding: 8px 12px !important;
    }
    .wt-reveal::before { content: "Answer: "; font-weight: 600; }

    /* Charts: keep but constrain */
    svg { max-width: 100% !important; height: auto !important; }
    .chart, .layer-hero, .chapter-hero, .wt-chart { page-break-inside: avoid; }

    /* Page breaks at major boundaries */
    .chapter, article.chapter, h1.page-title { page-break-before: auto; }
    h1, h2, h3 { page-break-after: avoid; break-after: avoid; }

    /* No-break-inside for short rules and quotes */
    .rules, .quote, .example, .warning, .misread, .failure-modes section { page-break-inside: avoid; }

    /* Hide WHY-only mode stuff in print — print = full content */
    body.why-only .chapter-body > * { display: block !important; }

    /* Visible URLs after links — useful in printed page */
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9px;
        color: #888;
        font-weight: normal;
    }
    a[href^="#"]::after { content: ""; } /* in-page links don't need URL printed */

    /* Hide redundant navigation chips */
    .concept-chips, .dep-strip, .unlocks-chips, .pr-tools { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   D8 WAVE G — DAILY RITUAL + STREAK + QUICK-LOG
   ═══════════════════════════════════════════════════════════════════
   Behavior-change layer: visible streak, one-button daily flow,
   friction-reduced trade logging.
   ─────────────────────────────────────────────────────────────────── */

/* ---------- STREAK / MOMENTUM HEADER ---------- */
.rit-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    margin: 14px 0 22px;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(251, 191, 36, 0.02));
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 8px;
}
.rit-streak-num {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.rit-streak-num.zero { color: var(--text-dim); font-weight: 500; }
.rit-streak-label {
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    font-weight: 600;
    margin-top: 4px;
}
.rit-streak-fire { font-size: 28px; opacity: 0.85; }
.rit-streak-quote {
    font-size: 13px;
    color: var(--text);
    line-height: 1.45;
    font-style: italic;
}
.rit-streak-quote .accent { color: var(--accent); font-weight: 600; }
.rit-streak-meta {
    text-align: right;
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.55;
}
.rit-streak-meta strong {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- 7-DAY DOTS ---------- */
.rit-dots {
    display: flex;
    gap: 5px;
    margin-top: 8px;
    justify-content: flex-end;
}
.rit-dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--border);
    position: relative;
}
.rit-dot.done { background: #34d399; }
.rit-dot.partial { background: #fbbf24; }
.rit-dot.today {
    box-shadow: 0 0 0 2px var(--accent);
}

/* ---------- RITUAL STEP CARDS ---------- */
.rit-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}
@media (max-width: 900px) {
    .rit-steps { grid-template-columns: repeat(2, 1fr); }
    .rit-header { grid-template-columns: 1fr; gap: 8px; }
    .rit-streak-meta { text-align: left; }
    .rit-dots { justify-content: flex-start; }
}
.rit-step {
    display: block;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 14px 12px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}
.rit-step:hover {
    border-color: var(--accent);
    background: rgba(251, 191, 36, 0.04);
}
.rit-step-num {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.rit-step-title {
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 6px;
    color: var(--text);
}
.rit-step-desc {
    font-size: 11.5px;
    color: var(--text-dim);
    line-height: 1.4;
}
.rit-step.done {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(52, 211, 153, 0.05);
}
.rit-step.done::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 12px;
    color: #34d399;
    font-weight: 700;
    font-size: 16px;
}
.rit-step.done .rit-step-title { color: #34d399; }
.rit-step-action {
    margin-top: 8px;
    font-size: 10.5px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}
.rit-step.done .rit-step-action { color: #34d399; }
.rit-mark-btn {
    margin-top: 8px;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
}
.rit-mark-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.rit-step.done .rit-mark-btn { display: none; }

/* ---------- QUICK-LOG FAB + MODAL ---------- */
.ql-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--accent);
    color: #0a0a0a;
    border: none;
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(251, 191, 36, 0.4);
    z-index: 90;
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.ql-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 0 2px var(--accent);
    background: #fde68a;
}
.ql-fab:active { transform: scale(0.95); }
@media (max-width: 720px) {
    .ql-fab { bottom: 14px; right: 14px; width: 44px; height: 44px; font-size: 24px; }
}

.ql-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.ql-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}
.ql-modal {
    position: relative;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px 26px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.ql-modal-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}
.ql-modal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--text);
}
.ql-modal-close {
    background: transparent;
    color: var(--text-dim);
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}
.ql-modal-close:hover { color: var(--accent); }
.ql-modal-lede {
    font-size: 12.5px;
    color: var(--text-dim);
    margin: 0 0 16px;
    line-height: 1.45;
}
.ql-modal-lede a { color: var(--accent); }

.ql-form { display: flex; flex-direction: column; gap: 12px; }
.ql-field { display: flex; flex-direction: column; gap: 4px; }
.ql-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ql-field label {
    font-size: 10.5px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.ql-field input, .ql-field select {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 11px;
    font-family: inherit;
    font-size: 14px;
}
.ql-field input:focus, .ql-field select:focus {
    outline: none;
    border-color: var(--accent);
}
.ql-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}
.ql-btn {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
}
.ql-btn:hover { border-color: var(--accent); color: var(--accent); }
.ql-btn-primary {
    background: var(--accent);
    color: #0a0a0a;
    border-color: var(--accent);
    font-weight: 600;
}
.ql-btn-primary:hover { background: #fde68a; border-color: #fde68a; color: #0a0a0a; }
.ql-form-status {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-dim);
    min-height: 16px;
}
.ql-form-status-ok { color: #34d399; font-weight: 600; }

/* Hide quick-log FAB in print */
@media print { .ql-fab, .ql-modal-wrap { display: none !important; } }