/* Lesson page. Loaded after site.css on lesson pages only. */

.lesson-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); grid-template-areas: "side main"; gap: var(--s-8); padding-block: var(--s-7) var(--s-9); }
.lesson { grid-area: main; max-width: 42rem; min-width: 0; }
.lesson-side { grid-area: side; align-self: start; position: sticky; top: var(--s-5); font-size: var(--text-sm); }
@media (max-width: 60rem) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side"; gap: var(--s-7); }
  .lesson-side { position: static; border-top: 1px solid var(--ink); padding-top: var(--s-5); }
}

.crumbs { font-size: var(--text-sm); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crumbs a { color: var(--ink-2); }
.lesson-head { margin-top: var(--s-4); }
.lesson-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.05; }
.lesson-summary { margin-top: var(--s-4); font-size: var(--text-lg); line-height: 1.5; color: var(--ink-2); }
.lesson-meta { margin-top: var(--s-4); font-size: var(--text-sm); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); align-items: center; }

/* Small uppercase labels shared by lesson blocks */
.short-version h2, .objectives h2, .callout-label, .worked figcaption, .statement figcaption, .side-label, .pager-label, .compare-table caption {
  font-family: var(--sans); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}

.short-version { margin-top: var(--s-7); padding: var(--s-5); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.short-version p { margin-top: var(--s-2); font-family: var(--serif); font-size: 1.1875rem; line-height: 1.6; }
.objectives { margin-top: var(--s-6); }
.objectives ul { margin: var(--s-3) 0 0; padding-left: 1.2rem; color: var(--ink-2); }
.objectives li + li { margin-top: var(--s-1); }

/* Reading column */
.lesson-body { margin-top: var(--s-7); font-family: var(--serif); font-size: 1.1875rem; line-height: 1.7; }
.lesson-body > h2, .lesson-body section > h2 { font-size: var(--text-xl); margin-top: var(--s-7); margin-bottom: var(--s-3); letter-spacing: -0.005em; }
.lesson-body > h2:first-child { margin-top: 0; }
.lesson-body p + p { margin-top: var(--s-4); }
.lesson-body ul, .lesson-body ol { margin: var(--s-4) 0; padding-left: 1.3rem; }
.lesson-body li + li { margin-top: var(--s-2); }
.lesson-body strong { font-weight: 500; }
.lesson-body li::marker { color: var(--navy); }
.lesson-body > * + figure, .lesson-body > * + aside, .lesson-body > * + .table-wrap { margin-top: var(--s-6); }
.lesson-body figure + p, .lesson-body aside + p, .lesson-body .table-wrap + p, .lesson-body .table-wrap + h2 { margin-top: var(--s-6); }

/* Callout: a bordered box with a label. No coloured side stripe. */
.callout { padding: var(--s-5); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: 1.0625rem; line-height: 1.6; }
.callout p + p { margin-top: var(--s-2); }
.callout .callout-label { margin-bottom: var(--s-2); }

/* Part / Module / Lesson structure figure */
.structure { margin: var(--s-6) 0 0; border-top: 1px solid var(--ink); font-family: var(--sans); font-size: var(--text-sm); }
.structure-row { display: grid; grid-template-columns: 5rem 1fr auto; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.structure-row--2 .structure-example { padding-left: 1.25rem; }
.structure-row--3 .structure-example { padding-left: 2.5rem; }
.structure-level { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.structure-example { font-family: var(--serif); font-size: var(--text-base); color: var(--ink); }
.structure-note { color: var(--ink-3); font-size: var(--text-xs); text-align: right; }
@media (max-width: 36rem) {
  .structure-row { grid-template-columns: 4rem 1fr; }
  .structure-note { grid-column: 2; text-align: left; }
  .structure-row--2 .structure-example, .structure-row--3 .structure-example { padding-left: 0; }
}

/* Tables */
.table-wrap { overflow-x: auto; }
.compare-table, .calc { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--text-sm); line-height: 1.45; }
.compare-table caption { text-align: left; padding-bottom: var(--s-2); }
.compare-table th, .compare-table td, .calc th, .calc td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-3) var(--s-3) 0; border-top: 1px solid var(--rule); }
.compare-table thead th, .calc thead th { border-top: 1px solid var(--ink); font-weight: 600; color: var(--ink); }
.compare-table tbody th { font-weight: 500; color: var(--ink-2); width: 30%; }
.calc { font-variant-numeric: tabular-nums; }
.calc td, .calc thead th:not(:first-child) { text-align: right; }
.calc th:last-child, .calc td:last-child { padding-right: 0; }
.calc tbody th { font-weight: 500; color: var(--ink-2); }

/* Worked example */
.worked { margin: var(--s-6) 0 0; padding: var(--s-5); overflow-x: auto; background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.worked figcaption { margin-bottom: var(--s-3); }
.worked > p { margin-top: var(--s-4); font-size: 1.0625rem; line-height: 1.6; }

/* Financial statements, rendered from content/data/ by the build */
.statement { margin: var(--s-6) 0 0; padding: var(--s-5); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.statement figcaption { margin-bottom: var(--s-3); }
.statement-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--text-sm); line-height: 1.4; font-variant-numeric: tabular-nums; }
.statement-table th, .statement-table td { padding: var(--s-2) var(--s-3) var(--s-2) 0; text-align: left; vertical-align: baseline; font-weight: 400; color: var(--ink); }
.statement-table td { text-align: right; white-space: nowrap; width: 5.5rem; }
.statement-table th:last-child, .statement-table td:last-child { padding-right: 0; }
.statement-table thead th { padding-top: 0; border-bottom: 1px solid var(--ink); font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); }
.statement-table thead th:not(:first-child) { text-align: right; }
.statement-table .is-indent > th { padding-left: var(--s-4); }
.statement-table .is-heading > th { padding-top: var(--s-4); font-weight: 600; }
.statement-table .is-subtotal > * { border-top: 1px solid var(--rule-strong); font-weight: 600; }
.statement-table .is-total > * { border-top: 1px solid var(--ink); border-bottom: 3px double var(--ink); font-weight: 600; }
.statement-table .is-memo > * { font-size: var(--text-xs); color: var(--ink-2); }
.statement-table .is-total + .is-memo > * { padding-top: var(--s-3); }
.statement-table .is-highlight > * { background: var(--navy-wash); }
.statement-table .is-highlight > th { padding-left: var(--s-2); }
.statement-table .is-highlight.is-indent > th { padding-left: var(--s-4); }
.statement-note { margin-top: var(--s-3); font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-3); }
.lesson-body .statement + p { margin-top: var(--s-6); }
@media (max-width: 36rem) {
  .statement { padding: var(--s-4); }
  .statement-table { font-size: var(--text-xs); }
  .statement-table td { width: 4rem; }
}

/* DCF sandbox (lesson.js), built on the calculator styles */
.dcf-sandbox { font-family: var(--sans); }
.dcf-warning { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px dashed var(--ink-3); border-radius: var(--radius); font-size: var(--text-sm); color: var(--ink); }
.dcf-table { margin-top: var(--s-2); }
.dcf-table .dcf-total > * { border-top: 1px solid var(--ink); font-weight: 600; color: var(--ink); }
.dcf-actions { margin-top: var(--s-4); }

/* Bond lab (lesson.js), built on the same calculator styles */
.bond-lab, .rate-path, .payoff-lab { font-family: var(--sans); }
.bond-lab .takeaway { margin-top: var(--s-3); font-size: var(--text-sm); color: var(--ink-2); }

/* Financial statement explorer (lesson.js builds it from the JSON inside .fs-explorer) */
.fs-explorer { margin: var(--s-6) 0 0; padding: var(--s-5); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); font-family: var(--sans); font-size: var(--text-sm); line-height: 1.45; }
.fs-label { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.lesson-body .fs-events { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--s-2); }
.lesson-body .fs-events li + li { margin-top: 0; }
.fs-events button { width: 100%; height: 100%; text-align: left; font: inherit; color: var(--ink); padding: var(--s-2) var(--s-3); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer; }
.fs-events button:hover { border-color: var(--navy); }
.fs-status { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); }
.fs-status strong { font-weight: 600; }
.fs-check { margin-top: var(--s-2); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fs-panels { margin-top: var(--s-5); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.fs-panel--balance { grid-column: 2; grid-row: 1 / span 2; }
.fs-panel .fs-label { margin-bottom: var(--s-2); }
.fs-table { font-size: var(--text-xs); }
.fs-table td { width: 3.5rem; }
.fs-table .fs-delta { color: var(--navy); font-weight: 600; }
.fs-table .is-changed > * { background: var(--navy-wash); }
.fs-actions { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fs-actions .btn:disabled { opacity: 0.45; cursor: default; }
@media (max-width: 40rem) {
  .fs-explorer { padding: var(--s-4); }
  .fs-panels { grid-template-columns: minmax(0, 1fr); }
  .fs-panel--balance { grid-column: auto; grid-row: auto; }
}

/* Charts */
.figure { margin: var(--s-6) 0 0; }
.figure figcaption { margin-top: var(--s-2); font-family: var(--sans); font-size: var(--text-xs); color: var(--ink-3); }
.line-chart { font-family: var(--sans); }
.line-chart svg { width: 100%; height: auto; overflow: visible; }
.line-chart .grid { stroke: var(--rule); stroke-width: 1; }
.line-chart .tick { font: 11px var(--sans); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.line-chart .lbl { font: 500 12px var(--sans); fill: var(--ink); }
.line-chart .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .series--1 { stroke: var(--data-1); }
.line-chart .series--2 { stroke: var(--data-2); }
.line-chart .end { stroke: var(--paper); stroke-width: 2; }
.line-chart .end--1 { fill: var(--data-1); }
.line-chart .end--2 { fill: var(--data-2); }
.line-chart .crosshair { stroke: var(--ink-3); stroke-width: 1; }
.line-chart .hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.line-chart .chart-tip { margin-top: 0; line-height: 1.5; }
.line-chart .tip-row { display: inline-flex; align-items: center; gap: var(--s-2); }
.key-line--1 { background: var(--data-1); }
.key-line--2 { background: var(--data-2); }
.chart-table { margin-top: var(--s-3); font-size: var(--text-sm); }
.chart-table summary { cursor: pointer; color: var(--navy); }
.chart-table .calc { margin-top: var(--s-3); }

/* End-of-lesson blocks */
.takeaways, .quiz-block, .whats-next { margin-top: var(--s-7); }
.lesson-body .takeaways > h2, .lesson-body .quiz-block > h2, .lesson-body .whats-next > h2 { margin-top: 0; }
.takeaways ul { font-size: 1.125rem; }

.quiz { font-family: var(--sans); font-size: var(--text-base); line-height: 1.5; padding: var(--s-5); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); }
.quiz + .quiz { margin-top: var(--s-4); }
.quiz-q { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.5; }
.lesson-body .quiz-options { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.lesson-body .quiz-options li + li { margin-top: 0; }
.quiz-options button {
  width: 100%; text-align: left; font: inherit; font-size: var(--text-sm); color: var(--ink);
  padding: var(--s-3) var(--s-4); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius); cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline;
}
.quiz-options button:hover { border-color: var(--navy); }
.quiz-options button[data-state="correct"] { border-color: var(--navy); background: var(--navy-wash); }
.quiz-options button[data-state="incorrect"] { border-color: var(--ink-3); border-style: dashed; }
.quiz-mark { flex: none; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.quiz-options button[data-state="incorrect"] .quiz-mark { color: var(--ink-3); }
.quiz-explain { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--text-sm); }
.quiz-explain[hidden] { display: none; }
.quiz-verdict { font-weight: 600; color: var(--ink); margin-bottom: var(--s-1); }

/* Footer: complete, previous/next */
.lesson-foot { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--ink); }
.complete-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.complete-row .fine { margin: 0; }
.pager { margin-top: var(--s-7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.pager-link { display: block; padding: var(--s-4); border: 1px solid var(--rule-strong); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--surface); }
.pager-link:hover { border-color: var(--navy); color: var(--ink); }
.pager-link:last-child:not(:first-child) { text-align: right; }
.pager-title { display: block; margin-top: var(--s-1); font-family: var(--serif); font-size: var(--text-lg); }
.soon { display: inline-block; margin-top: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }
@media (max-width: 36rem) {
  .worked, .callout, .short-version, .quiz { padding: var(--s-4); }
  .calc, .compare-table { font-size: var(--text-xs); }
}
@media (max-width: 36rem) { .pager { grid-template-columns: 1fr; } .pager-link:last-child:not(:first-child) { text-align: left; } }
.lesson-disclaimer { margin-top: var(--s-6); font-size: var(--text-xs); color: var(--ink-3); max-width: 38rem; }

/* Module sidebar */
.lesson-side h2 { margin-top: var(--s-1); font-family: var(--serif); font-size: var(--text-lg); }
.module-list { list-style: none; margin: var(--s-4) 0; padding: 0; counter-reset: m; border-top: 1px solid var(--rule); }
.module-list li { counter-increment: m; display: grid; grid-template-columns: 1.5rem 1fr; align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.module-list li::before { content: counter(m); font-variant-numeric: tabular-nums; }
/* Completed: a small navy diamond, taken from the logo */
.module-list li.done::before { content: ""; width: 0.5rem; height: 0.5rem; background: var(--navy); transform: rotate(45deg) translate(-1px, -1px); }
.module-list a { color: var(--ink-2); text-decoration: none; }
.module-list a:hover { color: var(--ink); text-decoration: underline; }
.module-list a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.side-back { font-size: var(--text-sm); }

/* Compounding calculator */
.calculator { font-family: var(--sans); }
.calc-inputs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.calc-field { display: grid; grid-template-rows: 1fr auto; align-items: end; gap: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }
.calc-input { display: flex; align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--field); }
.calc-input:focus-within { outline: 2px solid var(--navy); outline-offset: 1px; }
.calc-input i { font-style: normal; color: var(--ink-3); padding: 0 var(--s-2); font-size: var(--text-sm); }
.calc-input input { width: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--text-sm); color: var(--ink); padding: 0.45rem 0.5rem; font-variant-numeric: tabular-nums; }
.calc-input input:focus { outline: none; }
.calc-input i + input { padding-left: 0; }
.calc-figures { display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--s-5) 0 var(--s-4); border-top: 1px solid var(--rule); }
.calc-figures div { padding: var(--s-3) var(--s-3) 0 0; }
.calc-figures div + div { padding-left: var(--s-4); border-left: 1px solid var(--rule); }
.calc-figures dt { font-size: var(--text-xs); color: var(--ink-3); }
.calc-figures dd { margin: var(--s-1) 0 0; font-size: 1.375rem; font-weight: 500; color: var(--ink); }
.calc-inputs--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.calc-inputs--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.calc-note { margin: 0 0 var(--s-3); font-size: var(--text-sm); color: var(--ink-2); }
@media (max-width: 36rem) {
  .calc-inputs, .calc-inputs--five { grid-template-columns: 1fr 1fr; }
  .calc-figures { grid-template-columns: 1fr; }
  .calc-figures div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .calc-figures div { padding-bottom: var(--s-2); }
}

/* Footnote markers in the text: small numbers that jump to Notes and sources */
.fn-ref { font-family: var(--sans); font-size: 0.68em; line-height: 0; margin-left: 0.08em; }
.fn-ref a { color: var(--navy); text-decoration: none; padding: 0 0.12em; }
.fn-ref a:hover, .fn-ref a:focus-visible { text-decoration: underline; }
.lesson-soon { color: var(--ink-2); }
.lesson-soon .soon { display: inline; margin: 0; font-family: var(--sans); white-space: nowrap; }
.corrections { margin-top: var(--s-7); font-family: var(--sans); font-size: var(--text-sm); }

/* Go deeper, Learn more, Notes and sources */
.go-deeper, .learn-more, .lesson-notes { margin-top: var(--s-7); font-family: var(--sans); font-size: var(--text-sm); }
.go-deeper h2, .learn-more h2, .lesson-notes h2 {
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--ink);
}
.go-deeper ul, .learn-more ul { list-style: none; margin: 0; padding: 0; }
.go-deeper li, .learn-more li { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.go-deeper li a, .learn-more li a { font-family: var(--serif); font-size: var(--text-base); }
.where { display: block; margin-top: var(--s-1); font-size: var(--text-xs); color: var(--ink-3); }
.lesson-notes ol { margin: var(--s-3) 0 0; padding-left: 1.6rem; color: var(--ink-2); line-height: 1.55; }
.lesson-notes li { padding: var(--s-1) 0; }
.lesson-notes li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lesson-notes li:target { background: var(--navy-wash); outline: 4px solid var(--navy-wash); }
.lesson-notes a { overflow-wrap: anywhere; }
.note-back { margin-left: var(--s-2); font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; }

/* A single formula, set apart from the text */
.lesson-body .formula { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); border-block: 1px solid var(--rule); font-family: var(--sans); font-size: var(--text-base); font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }

/* Range chart */
.range-chart svg { width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.range-chart .grid { stroke: var(--rule); stroke-width: 1; }
.range-chart .zero { stroke: var(--ink-3); stroke-width: 1; }
.range-chart .tick { font-size: 11px; fill: var(--ink-3); }
.range-chart .row-lbl { font-size: 13px; font-weight: 500; fill: var(--ink); }
.range-chart .lbl { font-size: 12px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.range-chart .range-bar { fill: var(--data-1); }
.range-chart .range-dot { fill: var(--data-1); stroke: var(--surface); stroke-width: 2; }

/* Capstone tasks */
.task { font-family: var(--sans); font-size: var(--text-base); line-height: 1.5; padding: var(--s-5); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); }
.lesson-body > * + .task, .lesson-body .task + .task, .lesson-body > * + .quiz { margin-top: var(--s-5); }
.task-q { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.5; }
.task-actions { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.task-result { font-size: var(--text-sm); color: var(--ink-2); font-weight: 500; }
.task-explain { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--text-sm); }
.task-explain[hidden] { display: none; }
.task-field { margin-top: var(--s-4); max-width: 16rem; }

.lesson-body .order-items, .lesson-body .match-items { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-2); counter-reset: ord; }
.lesson-body .order-items li, .lesson-body .match-items li { margin: 0; }
.order-items li {
  counter-increment: ord; display: grid; grid-template-columns: 1.75rem 1fr auto; gap: var(--s-3); align-items: center;
  padding: var(--s-2) var(--s-3); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: var(--text-sm);
}
.order-items li::before { content: counter(ord); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.order-controls { display: inline-flex; gap: var(--s-1); }
.order-controls button {
  font: inherit; font-size: var(--text-xs); padding: 0.25rem 0.5rem; cursor: pointer;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.order-controls button:hover { border-color: var(--navy); color: var(--navy); }
.match-items li {
  display: grid; grid-template-columns: 1fr minmax(10rem, 14rem); gap: var(--s-3); align-items: center;
  padding: var(--s-2) var(--s-3); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: var(--text-sm);
}
.match-items select { font: inherit; font-size: var(--text-sm); padding: 0.35rem 0.5rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--field); color: var(--ink); width: 100%; }
@media (max-width: 36rem) { .match-items li { grid-template-columns: 1fr; } }

.order-items li[data-state="correct"], .match-items li[data-state="correct"], .calc-task[data-state="correct"] .calc-input { border-color: var(--navy); background: var(--navy-wash); }
.order-items li[data-state="incorrect"], .match-items li[data-state="incorrect"], .calc-task[data-state="incorrect"] .calc-input { border-style: dashed; border-color: var(--ink-3); }

.reflect-task textarea {
  display: block; width: 100%; margin-top: var(--s-4); padding: var(--s-3); resize: vertical;
  font: inherit; font-size: var(--text-sm); line-height: 1.5; color: var(--ink);
  background: var(--field); border: 1px solid var(--rule-strong); border-radius: var(--radius);
}
.reflect-task details { margin-top: var(--s-4); border-top: 1px solid var(--rule); }
.reflect-task summary { cursor: pointer; padding: var(--s-3) 0; color: var(--navy); font-weight: 500; font-size: var(--text-sm); }
.reflect-task details p { color: var(--ink-2); font-size: var(--text-sm); }
.reflect-task details p + p { margin-top: var(--s-2); }

.score-panel { margin-top: var(--s-7); padding: var(--s-5); border: 1px solid var(--navy); border-radius: var(--radius); background: var(--navy-wash); font-family: var(--sans); }
.score-panel h2 { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); }
.score-panel p { margin-top: var(--s-2); font-size: var(--text-base); color: var(--ink); }
.score-panel[hidden] { display: none; }

.module-list--plain { counter-reset: none; }
.module-list--plain li { display: block; }
.module-list--plain li::before { content: none; }
.capstone-page .lesson-foot .milestone { margin: 0 0 var(--s-5); }

/* Part 5 tools: allocation explorer and entry-method comparison */
.alloc-inputs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.alloc-inputs select { font: inherit; font-size: var(--text-sm); color: var(--ink); padding: var(--s-2); border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--surface); }
.alloc-cash { font-size: var(--text-base); color: var(--ink); padding: var(--s-2) 0; }
.alloc-figures { grid-template-columns: repeat(5, 1fr); }
.alloc-figures dd { font-size: 1.125rem; }
.alloc-compare tr.is-mine th, .alloc-compare tr.is-mine td,
.entry-table tr.is-mine th, .entry-table tr.is-mine td { background: var(--navy-wash); }
.entry-compare .seg { flex-wrap: wrap; }
.entry-path { display: block; width: 100%; height: auto; margin: var(--s-4) 0; }
.entry-path .series { stroke: var(--navy); stroke-width: 2; }
.entry-path .grid { stroke: var(--rule); }
.entry-path .tick { font-family: var(--sans); font-size: 11px; fill: var(--ink-3); }

/* Spreadsheet formulas quoted in a lesson */
main code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.875em; overflow-wrap: anywhere; }

/* Chart lab: one set of numbers drawn several ways */
.chart-lab .seg, .payoff-lab .seg { flex-wrap: wrap; }
.payoff-lab .seg { margin-bottom: var(--s-4); }
.lab-plot .zero { stroke: var(--ink-3); }
.lab-plot { display: block; width: 100%; height: auto; margin: var(--s-4) 0; overflow: visible; }
.lab-plot .series { stroke: var(--navy); stroke-width: 2; stroke-linejoin: round; }
.lab-plot .grid { stroke: var(--rule); }
.lab-plot .tick { font-family: var(--sans); font-size: 11px; fill: var(--ink-3); }
@media (max-width: 40rem) {
  .alloc-inputs { grid-template-columns: 1fr 1fr; }
  .alloc-figures { grid-template-columns: 1fr 1fr; }
  .alloc-figures div + div { border-left: 0; padding-left: 0; }
}

/* Members-only preview: what a visitor without membership sees instead of the lesson body */
.locked-panel { margin-top: var(--s-7); padding: var(--s-6) var(--s-5); border: 1px solid var(--navy); border-radius: var(--radius); background: var(--navy-wash); }
.locked-panel h2 { font-size: 1.375rem; }
.locked-panel p { margin-top: var(--s-3); color: var(--ink-2); line-height: 1.6; }
.locked-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5) !important; }