/* ==========================================================================
   learn.css - styles for the interactive Learn section.
   Loaded only on Learn pages, on top of executive.css. Built entirely on the
   existing design tokens (--accent, --surface, --line, --radius, ...).
   ========================================================================== */

/* ---- Learn-specific tokens (derived from the global palette) ------------- */
:root {
    --learn-soft: #eef4f1;
    --learn-soft-strong: #e2ede8;
    --learn-warn: #9b6a1d;
    --learn-bad: #9b271d;
    --learn-good: var(--accent-deep);
    --code-bg: #f3f1ea;
    --code-ink: #21302b;
}

/* ==========================================================================
   Hub page
   ========================================================================== */
.lesson-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 42px;
}

.lesson-card {
    display: flex;
    flex-direction: column;
    min-height: 240px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-strong);
    box-shadow: 0 16px 50px rgba(25, 23, 20, 0.05);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

a.lesson-card:hover,
a.lesson-card:focus-visible {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 24px 60px rgba(25, 23, 20, 0.09);
}

.lesson-card .lesson-card__cat {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 780;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lesson-card h3 {
    margin-bottom: 12px;
}

.lesson-card p {
    margin-bottom: 0;
    color: var(--muted);
}

.lesson-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
}

.lesson-card__meta span {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    padding: 4px 9px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 680;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0;
}

.lesson-card--soon {
    opacity: 0.72;
    cursor: default;
}

.lesson-card--soon .lesson-card__cat {
    color: var(--muted);
}

.lesson-badge {
    align-self: flex-start;
    margin-bottom: 16px;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lesson-badge--live {
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.lesson-badge--soon {
    background: var(--line);
    color: var(--muted);
}

/* ==========================================================================
   Lesson chrome: reading progress + sticky TOC
   ========================================================================== */
.reading-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 120;
    height: 3px;
    background: transparent;
    pointer-events: none;
}

.reading-progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 120ms linear;
}

.lesson-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
    counter-reset: toc;
}

.lesson-toc__link {
    display: block;
    border-left: 2px solid var(--line);
    padding: 7px 0 7px 14px;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.4;
    transition: border-color 160ms ease, color 160ms ease;
}

.lesson-toc__link:hover,
.lesson-toc__link:focus-visible {
    color: var(--accent-deep);
}

.lesson-toc__link.is-active {
    border-left-color: var(--accent);
    color: var(--accent-deep);
    font-weight: 720;
}

/* The TOC card should not stretch full sidebar height */
.article-aside .lesson-toc {
    align-self: start;
}

/* Let the main column shrink below its widgets' intrinsic width so wide
   widget content (SVG trees, code blocks) scrolls inside its own scroll
   container instead of forcing horizontal page overflow. Needed because the
   shared .article-layout collapses to a min-content-based 1fr track <=980px. */
.article-body {
    min-width: 0;
}

.widget {
    max-width: 100%;
}

/* ==========================================================================
   Lesson hero artwork (inline SVG, no binary asset needed)
   ========================================================================== */
.lesson-figure {
    margin-top: clamp(28px, 4vw, 48px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--learn-soft), var(--surface));
    box-shadow: var(--shadow);
}

.lesson-figure svg {
    display: block;
    width: 100%;
    height: auto;
}

/* Level meter in the first .article-meta chip - filled bars signal the level.
   Scoped to beat .article-meta span and reset its chip border/padding. */
.article-meta .level-meter {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 11px;
    margin-right: 8px;
    padding: 0;
    border: 0;
    background: none;
}
.article-meta .level-meter i { width: 3px; border-radius: 1px; background: var(--line); }
.article-meta .level-meter i:nth-child(1) { height: 4px; }
.article-meta .level-meter i:nth-child(2) { height: 7px; }
.article-meta .level-meter i:nth-child(3) { height: 10px; }
.article-meta .level-meter--foundational i:nth-child(-n+1) { background: var(--accent); }
.article-meta .level-meter--intermediate i:nth-child(-n+2) { background: var(--learn-warn); }
.article-meta .level-meter--leadership   i:nth-child(-n+3) { background: var(--accent-deep); }

/* ==========================================================================
   Generic widget shell
   ========================================================================== */
.widget {
    margin: 32px 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-strong);
    box-shadow: 0 16px 50px rgba(25, 23, 20, 0.05);
    overflow: hidden;
}

.widget__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.widget__title {
    margin: 0;
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.widget__caption {
    margin: 0;
    padding: 12px 18px 16px;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.widget__body {
    padding: 18px;
}

.widget__loading {
    padding: 28px 18px;
    color: var(--muted);
    font-size: 0.9rem;
    text-align: center;
}

/* Pill toggle/control buttons */
.widget-controls {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.widget-control {
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    padding: 6px 13px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 720;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.widget-control:hover,
.widget-control:focus-visible {
    border-color: var(--accent);
    color: var(--accent-deep);
}

.widget-control.is-active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

/* ==========================================================================
   Widget A: Architecture explorer
   ========================================================================== */
.arch {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 0;
}

.arch__tree {
    min-height: 360px;
    max-height: 460px;
    overflow: auto;
    border-right: 1px solid var(--line);
    background:
        radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px,
        var(--surface);
}

.arch__tree svg {
    display: block;
}

.arch__node rect {
    rx: 7;
    stroke: var(--line-strong);
    stroke-width: 1.2;
    fill: var(--surface-strong);
    transition: fill 140ms ease, stroke 140ms ease;
}

.arch__node text {
    font-family: Inter, sans-serif;
    font-size: 12px;
    fill: var(--ink);
    pointer-events: none;
}

.arch__node .arch__sub {
    font-size: 10px;
    fill: var(--muted);
}

.arch__node:hover rect,
.arch__node:focus-visible rect {
    stroke: var(--accent);
}

.arch__node.is-selected rect {
    fill: var(--accent-soft);
    stroke: var(--accent);
    stroke-width: 1.8;
}

.arch__node.has-children rect {
    cursor: pointer;
}

.arch__node--catalog rect { fill: var(--accent); stroke: var(--accent-deep); }
.arch__node--catalog text { fill: #fff; }
.arch__node--catalog .arch__sub { fill: rgba(255,255,255,0.82); }

.arch__link {
    fill: none;
    stroke: var(--line-strong);
    stroke-width: 1.3;
}

.arch__panel {
    padding: 18px;
    min-height: 360px;
    background: var(--surface-strong);
}

.arch__panel-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.arch__panel h4 {
    margin: 0 0 10px;
    font-size: 1.1rem;
}

.arch__panel p {
    margin: 0 0 14px;
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.7;
}

.arch__panel pre {
    margin: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--code-bg);
    color: var(--code-ink);
    padding: 14px 16px;
    font-size: 0.8rem;
    line-height: 1.6;
}

.arch__panel pre code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.arch__hint {
    color: var(--muted);
    font-size: 0.88rem;
}

/* ==========================================================================
   Widget B: Time-travel + write simulator
   ========================================================================== */
.sim__ops {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

.sim__ops .button {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.86rem;
}

.sim__timeline {
    padding: 8px 12px 4px;
    overflow-x: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.sim__timeline svg { display: block; margin: 0 auto; }

.sim__snap circle {
    fill: var(--surface-strong);
    stroke: var(--line-strong);
    stroke-width: 2;
    cursor: pointer;
    transition: fill 140ms ease, stroke 140ms ease;
}

.sim__snap.is-current circle {
    fill: var(--accent);
    stroke: var(--accent-deep);
}

.sim__snap.is-viewing circle {
    stroke: var(--accent);
    stroke-width: 3;
}

.sim__snap text {
    font-family: Inter, sans-serif;
    font-size: 11px;
    fill: var(--muted);
    text-anchor: middle;
}

.sim__axis { stroke: var(--line-strong); stroke-width: 2; }

.sim__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 0;
}

.sim__table {
    padding: 16px 18px;
    overflow-x: auto;
}

.sim__table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.sim__table th,
.sim__table td {
    border-bottom: 1px solid var(--line);
    padding: 7px 10px;
    text-align: left;
    white-space: nowrap;
}

.sim__table th {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.sim__table tr.is-new td { background: var(--accent-soft); }

.sim__table caption {
    caption-side: top;
    text-align: left;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.8rem;
}

.sim__meta {
    padding: 16px 18px;
    border-left: 1px solid var(--line);
    background: var(--surface);
    font-size: 0.86rem;
}

.sim__meta h4 {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
}

.sim__file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
}

.sim__file::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-weight: 800;
}

.sim__file--del::before { content: "x"; background: rgba(155,39,29,0.1); color: var(--learn-bad); }
.sim__file--data::before { content: "D"; }
.sim__file--manifest::before { content: "M"; background: var(--learn-soft-strong); color: var(--accent-deep); }

.sim__note {
    margin-top: 12px;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.6;
}

/* ==========================================================================
   Widget C: Evolution playground
   ========================================================================== */
.evo {
    display: grid;
    gap: 0;
}

.evo__block {
    padding: 18px;
    border-bottom: 1px solid var(--line);
}

.evo__block:last-child { border-bottom: 0; }

.evo__cols {
    margin: 12px 0 14px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.evo__col {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 10px 12px;
    transition: background 160ms ease, border-color 160ms ease;
}

.evo__col.is-added { border-color: var(--accent); background: var(--accent-soft); }
.evo__col.is-dropped { opacity: 0.4; text-decoration: line-through; }
.evo__col.is-renamed { border-color: var(--accent); }

.evo__id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    border-radius: 999px;
    background: var(--learn-soft-strong);
    padding: 3px 8px;
    color: var(--accent-deep);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 700;
}

.evo__name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86rem;
    color: var(--ink);
}

.evo__type {
    color: var(--muted);
    font-size: 0.78rem;
}

.evo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.evo__actions .button { min-height: 38px; padding: 7px 13px; font-size: 0.84rem; }

.evo__specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 12px 0;
}

.evo__spec {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 14px;
}

.evo__spec h5 {
    margin: 0 0 8px;
    font-size: 0.74rem;
    font-weight: 780;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.evo__spec.is-active { border-color: var(--accent); }
.evo__spec.is-active h5 { color: var(--accent-deep); }

.evo__spec code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    color: var(--ink);
}

.evo__files {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.evo__chip {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-strong);
    padding: 5px 9px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    color: var(--muted);
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.evo__chip.is-scanned { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.evo__chip.is-skipped { opacity: 0.42; }

.evo__prune-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0 14px;
    font-size: 0.88rem;
    color: var(--muted);
}

.evo__prune-input input {
    width: auto;
    max-width: 180px;
    padding: 8px 10px;
}

.evo__prune-summary {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.6;
}

/* ==========================================================================
   Widget D1: Code tabs (Prism-highlighted, light on-brand theme)
   ========================================================================== */
.code-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 12px 14px 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.code-tab {
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background: transparent;
    padding: 9px 14px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
}

.code-tab:hover { color: var(--accent-deep); }

.code-tab.is-active {
    border-color: var(--line);
    background: var(--code-bg);
    color: var(--code-ink);
    box-shadow: inset 0 2px 0 var(--accent);
}

.code-panel { display: none; }
.code-panel.is-active { display: block; }

.code-panel pre {
    margin: 0;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--code-bg);
    color: var(--code-ink);
    padding: 18px 20px;
    font-size: 0.83rem;
    line-height: 1.7;
}

.code-panel code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Light, on-brand Prism token theme tuned to the warm palette */
pre[class*="language-"],
code[class*="language-"] {
    color: var(--code-ink);
    text-shadow: none;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #6f7b74; font-style: italic; }
.token.punctuation { color: #5d615d; }
.token.keyword, .token.boolean, .token.atrule, .token.important { color: #0b433c; font-weight: 600; }
.token.string, .token.char, .token.attr-value { color: #8a5326; }
.token.number, .token.constant, .token.symbol { color: #9c4221; }
.token.function, .token.class-name { color: #2c6e8a; }
.token.operator, .token.entity, .token.url { color: #5d615d; }
.token.property, .token.tag, .token.attr-name { color: #116b5d; }
.token.builtin { color: #2c6e8a; }

/* ==========================================================================
   Widget D2: Quiz
   ========================================================================== */
.quiz__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 18px;
}

.quiz__q fieldset {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 16px 18px;
}

.quiz__q legend {
    padding: 0 6px;
    font-weight: 720;
    color: var(--ink);
    font-size: 0.98rem;
}

.quiz__opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--ink);
    font-size: 0.92rem;
    line-height: 1.5;
    transition: background 140ms ease, border-color 140ms ease;
}

.quiz__opt:hover { background: var(--learn-soft); }

.quiz__opt input { width: auto; margin-top: 3px; accent-color: var(--accent); }

.quiz__q.is-correct .quiz__opt.is-chosen {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.quiz__q.is-wrong .quiz__opt.is-chosen {
    border-color: var(--line-strong);
    background: var(--bg);
    color: var(--muted);
}

.quiz__q.is-wrong .quiz__opt.is-answer {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.quiz__feedback {
    margin: 12px 0 0;
    min-height: 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.quiz__feedback.is-correct,
.quiz__feedback.is-wrong {
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
    padding: 11px 14px;
}

.quiz__feedback.is-correct {
    border-left-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-deep);
}

.quiz__feedback.is-wrong {
    border-left-color: var(--learn-warn);
    background: rgba(155, 106, 29, 0.12);
    color: var(--learn-warn);
}

.quiz__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.quiz__score {
    margin: 0;
    color: var(--accent-deep);
    font-weight: 720;
}

/* ==========================================================================
   Key takeaways
   ========================================================================== */
.takeaways {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.takeaways li {
    position: relative;
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 14px 16px 14px 18px;
    color: var(--ink);
    font-size: 0.96rem;
    line-height: 1.6;
}

/* ==========================================================================
   Widget: comparison explorer (table-formats lesson)
   ========================================================================== */
.cmp__table-wrap { overflow-x: auto; }

.cmp__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.cmp__table th,
.cmp__table td {
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.cmp__table thead th {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 780;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cmp__table tbody th[scope="row"] {
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
}

.cmp__row { cursor: pointer; }
.cmp__row:hover { background: var(--learn-soft); }
.cmp__row.is-open { background: var(--accent-soft); }

.cmp-rate { display: inline-flex; align-items: center; gap: 7px; }
.cmp-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.cmp-dot--yes { background: var(--accent); }
.cmp-dot--partial { background: var(--learn-warn); }
.cmp-dot--no { background: var(--line-strong); }

.cmp__table td.is-dim,
.cmp__table th.is-dim { opacity: 0.3; }

.cmp__detail {
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.65;
}
.cmp__detail strong { color: var(--ink); }

/* ==========================================================================
   Widget: decision recommender (table-formats lesson)
   ========================================================================== */
.rec__q { margin-bottom: 16px; }
.rec__q:last-of-type { margin-bottom: 0; }

.rec__q fieldset {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 14px 16px;
}

.rec__q legend { padding: 0 6px; font-weight: 720; font-size: 0.95rem; }

.rec__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.rec__opt {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    cursor: pointer;
    font-size: 0.86rem;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.rec__opt:hover { border-color: var(--accent); color: var(--accent-deep); }
.rec__opt input { width: auto; margin: 0; accent-color: var(--accent); }
.rec__opt.is-chosen { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }

.rec__foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.rec__result { display: grid; gap: 10px; margin-top: 20px; }
.rec__rankitem {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 12px 14px;
}
.rec__rankitem.is-top { border-color: var(--accent); background: var(--accent-soft); }
.rec__rankhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rec__name { font-weight: 740; color: var(--ink); }
.rec__pct { color: var(--accent-deep); font-weight: 700; font-variant-numeric: tabular-nums; }
.rec__bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 8px 0 8px; }
.rec__bar span { display: block; height: 100%; background: var(--accent); transition: width 200ms ease; }
.rec__why { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }

/* ==========================================================================
   Widget: team self-assessment radar (leadership lesson)
   ========================================================================== */
.ta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ta__controls {
    padding: 18px;
    border-right: 1px solid var(--line);
    display: grid;
    gap: 14px;
    align-content: start;
}
.ta__dim { display: grid; gap: 6px; }
.ta__dim label {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}
.ta__dim output { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.ta__dim input[type="range"] { width: 100%; accent-color: var(--accent); }
.ta__chart { padding: 18px; display: flex; align-items: center; justify-content: center; }
.ta__chart svg { width: 100%; height: auto; max-width: 360px; }
.ta-grid { fill: none; stroke: var(--line); stroke-width: 1; }
.ta-spoke { stroke: var(--line); stroke-width: 1; }
.ta-area { fill: var(--accent); fill-opacity: 0.18; stroke: var(--accent); stroke-width: 2; transition: d 200ms ease; }
.ta-dot { fill: var(--accent-deep); }
.ta-label { font-family: Inter, sans-serif; font-size: 11px; fill: var(--muted); }
.ta__guidance { padding: 16px 18px; border-top: 1px solid var(--line); background: var(--surface); display: grid; gap: 10px; }
.ta__advice {
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent-soft);
    padding: 10px 14px;
    color: var(--accent-deep);
    font-size: 0.9rem;
    line-height: 1.6;
}
.ta__advice strong { color: var(--accent-deep); }
.ta__empty { color: var(--muted); font-size: 0.9rem; }

/* ==========================================================================
   Widget: allocation simulator (leadership lesson)
   ========================================================================== */
.alloc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.alloc__sliders { padding: 18px; border-right: 1px solid var(--line); display: grid; gap: 16px; align-content: start; }
.alloc__row { display: grid; gap: 6px; }
.alloc__row label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.alloc__row output { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.alloc__row input[type="range"] { width: 100%; accent-color: var(--accent); }
.alloc__note { margin: 0; color: var(--muted); font-size: 0.8rem; }
.alloc__out { padding: 18px; display: grid; gap: 12px; align-content: start; }
.alloc__metric { display: grid; gap: 5px; }
.alloc__metric .lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; color: var(--muted); }
.alloc__metric .lbl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.alloc__track { height: 9px; border-radius: 5px; background: var(--line); overflow: hidden; }
.alloc__fill { height: 100%; background: var(--accent); transition: width 200ms ease; }
.alloc__fill--risk { background: var(--learn-warn); }
.alloc__zone { border-radius: var(--radius); padding: 11px 14px; font-size: 0.88rem; font-weight: 700; line-height: 1.5; }
.alloc__zone--good { background: var(--accent-soft); color: var(--accent-deep); }
.alloc__zone--warn { background: rgba(155, 106, 29, 0.12); color: var(--learn-warn); }

/* ==========================================================================
   Widget: priority matrix (leadership lesson)
   ========================================================================== */
.pm__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.pm__plot { padding: 18px; display: flex; justify-content: center; }
.pm__plot svg { width: 100%; height: auto; max-width: 460px; }
.pm-quad { fill: var(--surface); }
.pm-quad--alt { fill: var(--learn-soft); }
.pm-axis { stroke: var(--line-strong); stroke-width: 1.5; }
.pm-axis-label { font-family: Inter, sans-serif; font-size: 11px; fill: var(--muted); font-weight: 600; }
.pm-quad-label { font-family: Inter, sans-serif; font-size: 9.5px; fill: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.pm-item circle { fill: var(--accent); stroke: #fff; stroke-width: 1.5; cursor: pointer; transition: fill 140ms ease; }
.pm-item text { font-family: Inter, sans-serif; font-size: 10px; fill: var(--ink); pointer-events: none; }
.pm-item:hover circle { fill: var(--accent-deep); }
.pm-item.is-active circle { fill: var(--accent-deep); }
.pm__list { list-style: none; margin: 0; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); }
.pm__chip {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    padding: 6px 11px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.pm__chip:hover { border-color: var(--accent); color: var(--accent-deep); }
.pm__chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.pm__note { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.pm__note strong { color: var(--ink); }

/* ==========================================================================
   Widget: Judgment x Discipline x Leverage multiplier (leadership lesson)
   ========================================================================== */
.jdl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.jdl__controls { padding: 18px; border-right: 1px solid var(--line); display: grid; gap: 18px; align-content: start; }
.jdl__dim { display: grid; gap: 6px; }
.jdl__dim label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.jdl__dim output { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.jdl__dim input[type="range"] { width: 100%; accent-color: var(--accent); }
.jdl__hint { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.jdl__out { padding: 18px; display: grid; gap: 12px; align-content: start; }
.jdl__score { display: flex; align-items: baseline; gap: 8px; }
.jdl__score-num { font-size: 2.4rem; font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; line-height: 1; }
.jdl__score-max { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.jdl__formula { margin: -4px 0 2px; color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.jdl__metric { display: grid; gap: 5px; }
.jdl__metric .lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; color: var(--muted); }
.jdl__metric .lbl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.jdl__track { height: 9px; border-radius: 5px; background: var(--line); overflow: hidden; }
.jdl__fill { height: 100%; background: var(--accent); transition: width 200ms ease; }
.jdl__zone { border-radius: var(--radius); padding: 11px 14px; font-size: 0.88rem; font-weight: 700; line-height: 1.5; }
.jdl__zone--good { background: var(--accent-soft); color: var(--accent-deep); }
.jdl__zone--warn { background: rgba(155, 106, 29, 0.12); color: var(--learn-warn); }
.jdl__zone--bad { background: rgba(155, 39, 29, 0.08); color: var(--learn-bad); }
.jdl__advice { border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); padding: 10px 14px; color: var(--accent-deep); font-size: 0.88rem; line-height: 1.6; }
.jdl__advice strong { color: var(--accent-deep); }

/* ==========================================================================
   Widget: AI-native readiness self-check (leadership lesson)
   ========================================================================== */
.air { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.air__list { list-style: none; margin: 0; padding: 18px; border-right: 1px solid var(--line); display: grid; gap: 14px; align-content: start; }
.air__q { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.air__q:last-child { padding-bottom: 0; border-bottom: 0; }
.air__qtext { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--ink); font-weight: 600; }
.air__tag { display: inline-block; margin-left: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 1px 9px; font-size: 0.68rem; font-weight: 780; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent-deep); white-space: nowrap; }
.air__opts { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.air__opt { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 0.84rem; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; }
.air__opt:hover { border-color: var(--accent); color: var(--accent-deep); }
.air__opt input { width: auto; margin: 0; accent-color: var(--accent); }
.air__opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.air__out { padding: 18px; display: grid; gap: 12px; align-content: start; }
.air__score { display: flex; align-items: baseline; gap: 8px; }
.air__score-num { font-size: 2.1rem; font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; line-height: 1; }
.air__score-max { font-size: 0.82rem; color: var(--muted); font-weight: 700; }
.air__metric { display: grid; gap: 5px; }
.air__metric .lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; color: var(--muted); }
.air__metric .lbl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.air__track { height: 9px; border-radius: 5px; background: var(--line); overflow: hidden; }
.air__fill { height: 100%; background: var(--accent); transition: width 200ms ease; }
.air__zone { border-radius: var(--radius); padding: 11px 14px; font-size: 0.88rem; font-weight: 700; line-height: 1.5; }
.air__zone--good { background: var(--accent-soft); color: var(--accent-deep); }
.air__zone--warn { background: rgba(155, 106, 29, 0.12); color: var(--learn-warn); }
.air__zone--bad { background: rgba(155, 39, 29, 0.08); color: var(--learn-bad); }
.air__advice-head { margin: 2px 0 -2px; font-size: 0.82rem; font-weight: 780; color: var(--ink); }
.air__advice { border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); padding: 10px 14px; color: var(--accent-deep); font-size: 0.86rem; line-height: 1.55; }
.air__advice strong { color: var(--accent-deep); }

/* ==========================================================================
   Static compare: success vs failure operating patterns (leadership lesson)
   ========================================================================== */
.sf { display: grid; gap: 10px; margin: 24px 0; }
.sf__head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf__head-cell { font-size: 0.72rem; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; text-align: center; }
.sf__head-cell--win { background: var(--accent-soft); color: var(--accent-deep); }
.sf__head-cell--lose { background: rgba(155, 39, 29, 0.08); color: var(--learn-bad); }
.sf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sf__cell { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 13px 15px; }
.sf__cell--win { border-left: 3px solid var(--accent); }
.sf__cell--lose { border-left: 3px solid var(--learn-bad); }
.sf__cell h4 { margin: 0 0 6px; font-family: inherit; font-size: 0.92rem; font-weight: 740; color: var(--ink); }
.sf__cell--win h4 { color: var(--accent-deep); }
.sf__cell p { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.55; }

@media (max-width: 980px) {
    .jdl,
    .air { grid-template-columns: 1fr; }
    .jdl__controls,
    .air__list { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 680px) {
    .sf__head { display: none; }
    .sf__row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .jdl__fill,
    .air__fill,
    .air__opt { transition: none; }
}

/* ==========================================================================
   Widget: embedding explorer (vector-search lesson)
   ========================================================================== */
.emb { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.emb__plot {
    padding: 14px;
    border-right: 1px solid var(--line);
    background:
        radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 24px 24px,
        var(--surface);
}
.emb__plot svg { display: block; width: 100%; height: auto; }
.emb-link { stroke: var(--accent); stroke-opacity: 0.45; stroke-width: 1.5; }
.emb-pt circle { stroke: #fff; stroke-width: 1.5; cursor: pointer; transition: r 140ms ease; }
.emb-pt text { font-family: Inter, sans-serif; font-size: 9.5px; fill: var(--muted); pointer-events: none; }
.emb-pt:hover circle, .emb-pt:focus-visible circle { stroke: var(--accent-deep); }
.emb-pt.is-neighbour circle { stroke: var(--accent); stroke-width: 2.5; }
.emb-pt.is-query circle { stroke: var(--accent-deep); stroke-width: 3; }
.emb__panel { padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.emb__panel h4 { margin: 0 0 6px; font-size: 0.95rem; }
.emb__rank { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.emb__rank li {
    display: flex; justify-content: space-between; gap: 10px;
    border-bottom: 1px solid var(--line); padding: 5px 0; font-size: 0.86rem;
}
.emb__rank li:first-child { color: var(--accent-deep); font-weight: 700; }
.emb__rank .sc { color: var(--muted); font-variant-numeric: tabular-nums; }
.emb__hint { color: var(--muted); font-size: 0.86rem; }

/* ==========================================================================
   Widget: ANN vs exact search (vector-search lesson)
   ========================================================================== */
.ann { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.ann__plot { padding: 14px; border-right: 1px solid var(--line); background: var(--surface); }
.ann__plot svg { display: block; width: 100%; height: auto; }
.ann-edge { stroke: var(--line); stroke-width: 1; }
.ann-edge.is-path { stroke: var(--accent); stroke-width: 1.6; }
.ann-node circle { fill: var(--line-strong); stroke: #fff; stroke-width: 1; cursor: pointer; transition: fill 120ms ease; }
.ann-node.is-visited circle { fill: var(--accent-soft); }
.ann-node.is-hit circle { fill: var(--accent); }
.ann-node.is-miss circle { fill: var(--surface-strong); stroke: var(--learn-bad); stroke-width: 2; }
.ann-query { fill: var(--accent-deep); stroke: #fff; stroke-width: 2; }
.ann__side { padding: 16px 18px; display: grid; gap: 16px; align-content: start; }
.ann__control { display: grid; gap: 6px; }
.ann__control label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; font-weight: 700; }
.ann__control output { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.ann__control input[type="range"] { width: 100%; accent-color: var(--accent); }
.ann__stat { display: grid; gap: 5px; }
.ann__stat .lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; color: var(--muted); }
.ann__stat .lbl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ann__track { height: 9px; border-radius: 5px; background: var(--line); overflow: hidden; }
.ann__fill { height: 100%; background: var(--accent); transition: width 200ms ease; }
.ann__legend { display: grid; gap: 5px; font-size: 0.78rem; color: var(--muted); }
.ann__legend span { display: inline-flex; align-items: center; gap: 7px; }
.ann__sw { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.ann__hint { color: var(--muted); font-size: 0.82rem; }

/* ==========================================================================
   Widget: RAG pipeline simulator (vector-search lesson)
   ========================================================================== */
.rag__controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
    padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface);
}
.rag__controls label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.rag__controls output { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.rag__controls select { width: auto; padding: 8px 10px; }
.rag__controls input[type="range"] { width: 120px; accent-color: var(--accent); }
.rag__controls input[type="checkbox"] { width: auto; accent-color: var(--accent); }
.rag__flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.rag__step { border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 6px 11px; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.rag__step.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.rag__step.is-off { opacity: 0.45; }
.rag__arrow { color: var(--line-strong); }
.rag__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.rag__retrieved { padding: 16px 18px; border-right: 1px solid var(--line); display: grid; gap: 8px; align-content: start; }
.rag__col-title { margin: 0; font-size: 0.74rem; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.rag__chunk { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; font-size: 0.85rem; line-height: 1.5; }
.rag__chunk .rag__score { float: right; margin-left: 10px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.78rem; }
.rag__chunk.is-used { background: var(--accent-soft); border-color: var(--accent); }
.rag__chunk.is-gold .rag__tag { color: var(--accent-deep); font-weight: 700; }
.rag__tag { display: inline-block; margin-right: 6px; font-size: 0.72rem; color: var(--muted); }
.rag__answer { padding: 16px 18px; display: grid; gap: 10px; align-content: start; }
.rag__prompt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; line-height: 1.5; white-space: pre-wrap; color: var(--muted); max-height: 150px; overflow: auto; }
.rag__verdict { border-radius: var(--radius); padding: 11px 14px; font-size: 0.9rem; font-weight: 700; line-height: 1.5; }
.rag__verdict.is-good { background: var(--accent-soft); color: var(--accent-deep); }
.rag__verdict.is-bad { background: rgba(155, 39, 29, 0.08); color: var(--learn-bad); }

/* ==========================================================================
   Widget: agentic RAG loop (vector-search lesson)
   ========================================================================== */
.arag { display: grid; gap: 0; }
.arag__question { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.arag__q-label { font-size: 0.7rem; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-deep); }
.arag__q-text { margin: 0; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.arag__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.arag__counters { display: inline-flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.82rem; color: var(--muted); }
.arag__counter b { color: var(--ink); font-variant-numeric: tabular-nums; }
.arag__actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.arag__actions .button { min-height: 38px; padding: 7px 14px; font-size: 0.84rem; }
.arag__actions .button:disabled { opacity: 0.5; cursor: default; }
.arag__steps { list-style: none; margin: 0; padding: 16px 18px; display: grid; gap: 10px; }
.arag__fallback { color: var(--muted); font-size: 0.9rem; }
.arag__step { border: 1px solid var(--line); border-left: 3px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 11px 14px; }
.arag__step--retrieve, .arag__step--refine { border-left-color: var(--accent); }
.arag__step--grade { border-left-color: var(--learn-warn); }
.arag__step--answer { border-left-color: var(--accent-deep); }
.arag__step-head { display: flex; align-items: center; gap: 8px; }
.arag__step-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--learn-soft-strong); color: var(--accent-deep); font-size: 0.72rem; font-weight: 800; flex: 0 0 auto; }
.arag__step-title { font-weight: 740; font-size: 0.88rem; color: var(--ink); }
.arag__badge { margin-left: auto; border-radius: 999px; padding: 2px 10px; font-size: 0.72rem; font-weight: 780; text-transform: uppercase; letter-spacing: 0.03em; }
.arag__badge--ok { background: var(--accent-soft); color: var(--accent-deep); }
.arag__badge--no { background: rgba(155, 106, 29, 0.14); color: var(--learn-warn); }
.arag__step-body { margin: 8px 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.arag__step-q { margin: 8px 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.78rem; line-height: 1.5; color: var(--accent-deep); }
.arag__hits { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.arag__hit { display: flex; gap: 8px; font-size: 0.83rem; line-height: 1.5; color: var(--ink); }
.arag__hit-id { flex: 0 0 auto; height: max-content; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.72rem; font-weight: 700; color: var(--accent-deep); }
.arag__answer { margin: 8px 0 0; border-radius: var(--radius); padding: 10px 12px; font-size: 0.88rem; line-height: 1.55; font-weight: 600; }
.arag__answer--good { background: var(--accent-soft); color: var(--accent-deep); }
.arag__answer--bad { background: rgba(155, 39, 29, 0.08); color: var(--learn-bad); }
.arag__cites { margin: 6px 0 0; font-size: 0.76rem; color: var(--muted); }
.arag__status { margin: 0; padding: 0 18px 16px; color: var(--muted); font-size: 0.84rem; }

/* ==========================================================================
   Widget: chunking strategy explorer (vector-search lesson)
   ========================================================================== */
.chk { display: grid; gap: 0; }
.chk__query { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.chk__q-label { font-size: 0.7rem; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-deep); }
.chk__q-text { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.chk__doc { padding: 16px 18px; display: grid; gap: 10px; }
.chk__fallback { margin: 0; color: var(--muted); font-size: 0.9rem; }
.chk__chunk { border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; }
.chk__chunk.is-retrieved { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.chk__chunk-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chk__chunk-label { font-size: 0.7rem; font-weight: 780; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.chk__retrieved-tag { margin-left: auto; border-radius: 999px; background: var(--accent); color: #fff; padding: 2px 9px; font-size: 0.68rem; font-weight: 780; text-transform: uppercase; letter-spacing: 0.03em; }
.chk__context { margin: 0 0 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.76rem; color: var(--accent-deep); }
.chk__sent { margin: 2px 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink); }
.chk__pooled { margin: 6px 0 0; font-size: 0.74rem; font-style: italic; color: var(--muted); }
.chk__verdict { padding: 0 18px 18px; display: grid; gap: 10px; }
.chk__note { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.chk__answerable { border-radius: var(--radius); padding: 11px 14px; font-size: 0.88rem; line-height: 1.55; }
.chk__answerable--good { background: var(--accent-soft); color: var(--accent-deep); }
.chk__answerable--warn { background: rgba(155, 106, 29, 0.12); color: var(--learn-warn); }
.chk__answerable--bad { background: rgba(155, 39, 29, 0.08); color: var(--learn-bad); }
.chk__answerable strong { font-weight: 780; }

/* ==========================================================================
   Widget: hybrid search + reranking (vector-search lesson)
   ========================================================================== */
.hyb { display: grid; gap: 0; }
.hyb__query { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.hyb__q-label { font-size: 0.7rem; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-deep); }
.hyb__q-text { font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.hyb__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.hyb__fallback { margin: 0; padding: 16px 18px; color: var(--muted); font-size: 0.9rem; }
.hyb__col { padding: 14px 16px; border-right: 1px solid var(--line); }
.hyb__col:last-child { border-right: 0; }
.hyb__col--fused { background: var(--surface); }
.hyb__col-title { margin: 0 0 10px; font-size: 0.72rem; font-weight: 780; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.hyb__col--fused .hyb__col-title { color: var(--accent-deep); }
.hyb__rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: hyb; }
.hyb__doc { counter-increment: hyb; display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-strong); padding: 7px 9px; font-size: 0.8rem; line-height: 1.4; }
.hyb__doc::before { content: counter(hyb); flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted); }
.hyb__doc.is-gold { border-color: var(--accent); background: var(--accent-soft); }
.hyb__doc-id { flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.7rem; font-weight: 700; color: var(--accent-deep); }
.hyb__doc-text { flex: 1 1 auto; color: var(--ink); }
.hyb__doc-gold { flex: 0 0 auto; color: var(--accent-deep); }
.hyb__note { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.86rem; line-height: 1.6; }

/* ==========================================================================
   Horizontal-scroll affordances (shared across Learn scrollers)
   ========================================================================== */
.hscroll {
    position: relative;
    /* Let the wrapper shrink below its scroller's content width inside grid
       and flex parents, so overflow-x can actually scroll (restores the
       min-width:0 the scrollers carried before they were wrapped). */
    min-width: 0;
    max-width: 100%;
    --hscroll-fade: var(--surface-strong);
}
.hscroll:has(.sim__timeline) { --hscroll-fade: var(--surface); }
.hscroll__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms ease;
    z-index: 1;
}
.hscroll__fade.is-visible { opacity: 1; }
.hscroll__fade--left { left: 0; background: linear-gradient(to right, var(--hscroll-fade), transparent); }
.hscroll__fade--right { right: 0; background: linear-gradient(to left, var(--hscroll-fade), transparent); }
.hscroll__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface-strong);
    color: var(--accent-deep);
    box-shadow: 0 6px 16px rgba(25, 23, 20, 0.12);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease, background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.hscroll__btn.is-visible { opacity: 1; visibility: visible; }
.hscroll__btn:hover { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
.hscroll__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hscroll__btn[disabled] { opacity: 0; visibility: hidden; pointer-events: none; }
.hscroll__btn svg { width: 18px; height: 18px; display: block; }
.hscroll__btn--prev { left: 4px; }
.hscroll__btn--next { right: 4px; }

/* ==========================================================================
   Widget: row vs columnar store (ClickHouse lesson)
   ========================================================================== */
.cs__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.cs__controls .cs__label { font-size: 0.82rem; font-weight: 700; color: var(--muted); margin-right: 4px; }
.cs__body { padding: 18px; display: grid; gap: 16px; }
.cs__diskwrap {
    overflow-x: auto;
    min-width: 0;
    padding-bottom: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) var(--line);
}
.cs__diskwrap::-webkit-scrollbar { height: 8px; }
.cs__diskwrap::-webkit-scrollbar-track { background: var(--line); border-radius: 999px; }
.cs__diskwrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.cs__diskwrap::-webkit-scrollbar-thumb:hover { background: var(--muted); }
.cs__disk { display: flex; gap: 3px; min-width: max-content; }
.cs__blk { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 4px; background: var(--surface); border: 1px solid var(--line); font-size: 0.66rem; color: var(--muted); flex: 0 0 auto; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.cs__blk.is-read { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
.cs__seglabel { font-size: 0.7rem; color: var(--muted); margin: 0 0 4px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.cs__stat { padding: 0 18px 18px; }
.cs__metric { display: grid; gap: 5px; }
.cs__metric .lbl { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--muted); }
.cs__metric .lbl b { color: var(--ink); font-variant-numeric: tabular-nums; }
.cs__track { height: 9px; border-radius: 5px; background: var(--line); overflow: hidden; }
.cs__fill { height: 100%; background: var(--accent); transition: width 200ms ease; }
.cs__note { margin: 8px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.6; }

/* ==========================================================================
   Widget: MergeTree sparse index & pruning (ClickHouse lesson)
   ========================================================================== */
.mt__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.mt__controls label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.mt__controls select, .mt__controls input { width: auto; padding: 7px 10px; }
.mt__controls input[type="number"] { width: 90px; }
.mt__body { padding: 18px; display: grid; gap: 12px; }
.mt__part { display: grid; gap: 6px; }
.mt__part-head { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; }
.mt__part-head .tag { border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--muted); font-size: 0.74rem; }
.mt__part.is-skip { opacity: 0.4; }
.mt__grans { display: flex; flex-wrap: wrap; gap: 4px; }
.mt__gran { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; height: 40px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); font-size: 0.66rem; color: var(--muted); transition: background 140ms ease, border-color 140ms ease, color 140ms ease; }
.mt__gran .mk { font-weight: 700; }
.mt__gran.is-scan { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
.mt__gran.is-scan .mk { color: #fff; }
.mt__stat { padding: 0 18px 18px; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.mt__stat strong { color: var(--ink); }

/* ==========================================================================
   Widget: parts & merges (ClickHouse lesson)
   ========================================================================== */
.pm2__controls { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.pm2__controls .button { min-height: 38px; padding: 7px 13px; font-size: 0.84rem; }
.pm2__body { padding: 18px; display: grid; gap: 14px; }
.pm2__parts { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; min-height: 60px; }
.pm2__part { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 8px 10px; min-width: 84px; }
.pm2__part.is-merged { border-color: var(--accent); background: var(--accent-soft); }
.pm2__part-head { font-size: 0.7rem; font-weight: 780; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
.pm2__rows { display: flex; flex-wrap: wrap; gap: 3px; }
.pm2__cell { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 4px; background: var(--surface-strong); border: 1px solid var(--line); font-size: 0.72rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.pm2__stat { color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.pm2__stat strong { color: var(--ink); }
.pm2__amp { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.pm2__amp i { width: 10px; height: 10px; border-radius: 2px; background: var(--accent); display: inline-block; }

/* ==========================================================================
   Widget: table engines on merge (ClickHouse lesson)
   ========================================================================== */
.em__controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.em__controls .button { min-height: 38px; padding: 7px 13px; font-size: 0.84rem; }
.em__grid { display: grid; grid-template-columns: 1fr 1fr; }
.em__col { padding: 16px 18px; }
.em__col + .em__col { border-left: 1px solid var(--line); }
.em__col h4 { margin: 0 0 10px; font-size: 0.74rem; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.em__rows { display: grid; gap: 6px; }
.em__row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 7px 11px; font-size: 0.85rem; }
.em__row.is-result { border-color: var(--accent); background: var(--accent-soft); }
.em__key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; color: var(--accent-deep); }
.em__val { color: var(--muted); font-variant-numeric: tabular-nums; }
.em__part-label { font-size: 0.7rem; color: var(--muted); margin: 8px 0 4px; font-weight: 700; }
.em__note { margin: 0; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; line-height: 1.6; }
.em__note strong { color: var(--ink); }

/* ==========================================================================
   Widget: lightweight update vs heavy mutation (ClickHouse lesson)
   ========================================================================== */
.lwu__controls { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.lwu__controls .button { min-height: 38px; padding: 7px 13px; font-size: 0.84rem; }
.lwu__controls .button.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lwu__controls .button.is-active:hover, .lwu__controls .button.is-active:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); }
.lwu__body { padding: 18px; display: grid; gap: 14px; }
.lwu__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.lwu__col h4 { margin: 0 0 10px; font-size: 0.74rem; font-weight: 780; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.lwu__parts { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; min-height: 64px; }
.lwu__part, .lwu__patch { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 8px 10px; }
.lwu__part.is-merged { border-color: var(--accent); background: var(--accent-soft); }
.lwu__part.is-rewritten { border-color: var(--accent-deep); }
.lwu__patch { border-style: dashed; border-color: var(--accent); background: var(--accent-soft); }
.lwu__part-head, .lwu__patch-head { font-size: 0.7rem; font-weight: 780; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; }
.lwu__cells { display: flex; flex-wrap: wrap; gap: 3px; }
.lwu__cell { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 24px; padding: 0 6px; border-radius: 4px; background: var(--surface-strong); border: 1px solid var(--line); font-size: 0.72rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.lwu__cell.is-stale { opacity: 0.45; text-decoration: line-through; }
.lwu__cell.is-patched { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
.lwu__readout { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--muted); }
.lwu__metric b { color: var(--ink); font-variant-numeric: tabular-nums; }
.lwu__note { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.6; }
.lwu__note strong { color: var(--ink); }
@media (max-width: 680px) {
    .lwu__stage { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
    .lesson-grid { grid-template-columns: repeat(2, 1fr); }
    .arch,
    .sim__grid,
    .evo__specs,
    .ta,
    .alloc,
    .emb,
    .ann,
    .rag__grid,
    .hyb__cols {
        grid-template-columns: 1fr;
    }
    .arch__tree { border-right: 0; border-bottom: 1px solid var(--line); max-height: 380px; }
    .arch__panel { min-height: 0; }
    .sim__meta { border-left: 0; border-top: 1px solid var(--line); }
    .ta__controls,
    .alloc__sliders { border-right: 0; border-bottom: 1px solid var(--line); }
    .emb__plot,
    .ann__plot,
    .rag__retrieved { border-right: 0; border-bottom: 1px solid var(--line); }
    .hyb__col { border-right: 0; border-bottom: 1px solid var(--line); }
    .hyb__col:last-child { border-bottom: 0; }
}

@media (max-width: 680px) {
    .lesson-grid { grid-template-columns: 1fr; }
    .widget { margin: 24px 0; }
    .evo__col { grid-template-columns: auto 1fr; }
    .evo__type { grid-column: 2; }
    /* Keep simulator table tabular (override the global mobile card-stack) */
    .sim__table table,
    .sim__table thead,
    .sim__table tbody,
    .sim__table tr,
    .sim__table th,
    .sim__table td {
        display: revert;
        width: auto;
    }
    .sim__table thead { display: table-header-group; }
    .sim__table tr { margin: 0; border: 0; padding: 0; background: none; }
    .sim__table td { padding: 7px 10px; position: static; padding-left: 10px; }
    .sim__table td::before { content: none; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .reading-progress__bar,
    .arch__node rect,
    .evo__col,
    .evo__chip,
    .quiz__opt,
    .rec__opt,
    .rec__bar span,
    .ta-area,
    .alloc__fill,
    .pm-item circle,
    .pm__chip,
    .emb-pt circle,
    .ann-node circle,
    .ann__fill,
    .hscroll__fade,
    .hscroll__btn {
        transition: none;
    }
}