/* =====================================================================
   learn · additions for the content-driven pages (index, module,
   chapter). Tokens only: no colour, size or font is defined here.
   ===================================================================== */

/* A payload value that is not resolved yet. Never a raw {{key}}. */
.ph {
  display: inline-block; font: 500 var(--fs-xs)/1.45 var(--font-ui); color: var(--muted);
  background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: 4px;
  padding: 0 5px; white-space: nowrap; vertical-align: baseline; font-style: normal; letter-spacing: 0;
}
.block-title .ph, h4 .ph { font-weight: 600; }

/* Dev banner: mockup-only, sits under the mock bar. */
.dev-banner { background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); font: var(--fs-xs)/1.45 var(--font-ui); color: var(--text); }
.dev-banner .inner { max-width: var(--page); margin: 0 auto; padding: 6px var(--s4); display: flex; flex-wrap: wrap; gap: 4px var(--s4); align-items: baseline; }
.dev-banner b { color: var(--ink); }
.dev-banner .dv-src { font-family: var(--font-num); }
.dev-banner details { flex-basis: 100%; }
.dev-banner summary { cursor: pointer; color: var(--accent-ink); }
.dev-banner .dv-keys { font-family: var(--font-num); color: var(--muted); margin: 4px 0 2px; word-break: break-word; }
.dev-banner .bad { color: var(--bad); font-weight: 600; }

/* Mock-bar chapter picker */
.mock-bar select { background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 5px; font: inherit; padding: 3px 6px; max-width: 280px; }
.mock-bar select option, .mock-bar select optgroup { color: var(--ink); background: var(--surface); }

/* Chart shown before its example data exists */
.chart-pending {
  min-height: 170px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); padding: var(--s4);
  background: repeating-linear-gradient(45deg, var(--chart-future), var(--chart-future) 8px, var(--surface) 8px, var(--surface) 16px);
  display: grid; place-content: center; text-align: center; gap: 4px; color: var(--muted); font: var(--fs-sm)/1.4 var(--font-ui);
}
.chart-pending strong { color: var(--text); font-weight: 600; }
.chart-pending small { font-size: var(--fs-xs); }
figure.ex-figure { margin: var(--s4) 0; }
.ex-figure figcaption.cap { font: var(--fs-sm)/1.5 var(--font-read); color: var(--text); margin-top: var(--s2); }
.ex-figure .tbl-note { font-size: var(--fs-xs); color: var(--muted); margin: var(--s2) 0 0; }
.chart .line-faded { fill: none; stroke: var(--chart-line); stroke-width: 1.6; opacity: .45; }
.chart .line-alt { fill: none; stroke: var(--chart-post); stroke-width: 1.6; stroke-dasharray: 5 3; }
.chart .mk-lbl { font: 600 11px var(--font-ui); fill: var(--text); }
.chart .mk-bad { stroke: var(--bad); stroke-dasharray: 2 3; }
.chart .mk-lvl { stroke: var(--chart-ref); stroke-dasharray: 4 4; }
.chart .zero { stroke: var(--chart-ref); stroke-width: 1; }
.chart .day-sep { stroke: var(--chart-grid); stroke-width: 1; }
.chart .c-up { fill: var(--surface); stroke: var(--chart-line); }
.chart .c-dn { fill: var(--chart-line); stroke: var(--chart-line); }
.chart .bar { fill: var(--chart-line); opacity: .78; }
.chart .bar.ce { fill: var(--sell); opacity: .55; }
.chart .bar.pe { fill: var(--buy); opacity: .55; }
.chart .bar.hidden { fill: url(#hatch); opacity: 1; stroke: var(--line-strong); stroke-dasharray: 3 2; }

/* Horizontal bar rows: waterfall and grouped ratios */
.hb { margin: var(--s3) 0 0; }
.hb-row { display: grid; grid-template-columns: minmax(120px, 32%) minmax(0, 1fr) 104px; gap: var(--s3); align-items: center; font-size: var(--fs-sm); padding: 6px 0; border-bottom: 1px solid var(--line); }
.hb-row.total { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--ink); }
.hb-track { position: relative; height: 18px; }
.hb-bar { position: absolute; top: 3px; height: 12px; border-radius: 2px; background: var(--chart-line); opacity: .8; }
.hb-bar.neg { background: var(--bad); opacity: .7; }
.hb-bar.pos { background: var(--good); opacity: .7; }
.hb-bar.ce { background: var(--sell); opacity: .6; }
.hb-bar.pe { background: var(--buy); opacity: .6; }
.hb-zero { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--chart-ref); }
.hb-v { text-align: right; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.hb-group { font: 700 var(--fs-xs)/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: var(--s3) 0 0; }
@media (max-width: 559px) {
  .hb-row { grid-template-columns: minmax(0, 1fr) 96px; gap: 4px var(--s3); }
  .hb-track { grid-column: 1 / -1; grid-row: 2; }
}

/* Chapter head extras */
.chap-pre { font-size: var(--fs-sm); color: var(--muted); margin: var(--s2) 0 0; }
.chap-pre a { color: var(--accent-ink); }
.key-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s2); }
.key-terms span { font: 500 var(--fs-xs)/1 var(--font-ui); padding: 5px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.formula-note { font-size: var(--fs-sm); color: var(--muted); margin: -.5em 0 1em; }
.read-figure { margin: var(--s4) 0; }
.read-figure img { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; background: var(--surface); border-radius: var(--radius-sm); }
.read-figure figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s2); text-align: center; }

/* Decision: process line whose yes/no depends on a value not computed yet */
.pc li.pend { background: var(--surface-2); }
.pc li.pend svg { color: var(--muted); }
.dr-preview { margin: var(--s4) 0 0; }
.dr-preview .eyebrow { margin-bottom: var(--s2); }
.ce-pend { margin-top: var(--s3); }
.mod-empty { padding: var(--s6) 0; }
.feed-empty { font-size: var(--fs-sm); color: var(--muted); }
/* Labels drawn over lines get a paper-coloured halo so they stay readable. */
.chart .mk-lbl, .chart .t0-lbl, .chart text.ax-num { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; }