/* Hand-built figures for lesson 13, Reasoning models. */

/* shared: two columns that stack on a phone, small chart text, checkboxes */
.rs-two { display: grid; gap: 22px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .rs-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rs-side .slider { font-size: 0.85rem; margin: 6px 0; }
.rs-grid { stroke: var(--line); }
.rs-axis { stroke: var(--ink-3); stroke-width: 1.2; }
.rs-tick { font: 12px var(--f-mono); fill: var(--ink-3); }
.rs-tick.small { font-size: 10.5px; }
.rs-tick.on { fill: var(--ink); font-weight: 600; }
.rs-check { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--ink-2); }
.pos { color: var(--good); } .neg { color: var(--bad); }

/* hero */
.hr { width: 100%; height: auto; display: block; margin: 0 auto; max-width: 900px; }
.hr-q { font: 400 26px var(--f-display); fill: var(--ink); }
.hr-row { font: 500 15px var(--f-ui); fill: var(--ink-3); }
.hr-step { opacity: 0; transition: opacity 0.6s; }
.hr-step.in { opacity: 1; }
.hr-box { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.hr-step.bad .hr-box { stroke: var(--bad); } .hr-step.good .hr-box { stroke: var(--good); }
.hr-lbl { font: 500 17px var(--f-mono); fill: var(--ink); }
.hr-lbl.small { font: 12.5px var(--f-ui); fill: var(--ink-3); }
.hr-step.bad .hr-lbl:not(.small) { fill: var(--bad); font-size: 24px; } .hr-step.good .hr-lbl:not(.small) { fill: var(--good); }
.hr-arrow { fill: none; stroke: var(--ink-3); stroke-width: 2; }
.hr-head { fill: var(--ink-3); }

/* the everyday picture: room to write */
.pr-paper { padding: 18px 20px; border-radius: var(--r-2); background: var(--surface-2); border: 1px solid var(--line-2); min-height: 200px; font: 1.05rem/1.7 var(--f-mono); color: var(--ink-2); }
.pr-head { margin: 0 0 8px; font: 400 1.6rem var(--f-display); color: var(--ink); }
.pr-line { display: grid; grid-template-columns: 1fr auto minmax(6ch, auto); gap: 12px; margin: 0; }
.pr-line b { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.pr-line.total { border-top: 1px solid var(--ink-3); margin-top: 6px; padding-top: 6px; }
.pr-line.total b { color: var(--gold); font-weight: 600; }
.pr-line.gone b { color: var(--ink-3); }
.pr-read { font-size: 0.9rem; color: var(--ink-2); margin: 14px 0 0; }
.pr-read b { color: var(--ink); }

/* 1: the clerk's passes */
.cp-ctl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 0.85rem; margin-bottom: 14px; }
.cp-sum { font: 400 1.35rem var(--f-display); color: var(--ink); margin: 0 0 12px; }
.cp-sum .muted { font: 0.85rem var(--f-ui); }
.cp-passes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.cp-pass { padding: 10px 12px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; color: var(--ink-2); }
.cp-pass b { color: var(--ink); font-family: var(--f-mono); }
.cp-pass.ans { border-color: var(--ink-3); }
.cp-pass.ans.good { border-color: var(--good); } .cp-pass.ans.good b { color: var(--good); }
.cp-pass.ans.bad { border-color: var(--bad); } .cp-pass.ans.bad b { color: var(--bad); }
.cp-k { font: 500 0.7rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cp-read { font-size: 0.9rem; color: var(--ink-2); margin: 14px 0 0; }
.cp-read b { color: var(--ink); }

/* 2: the budget dial */
.bd-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0; }
.bd-chip { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line); font-size: 0.8rem; color: var(--ink-3); }
.bd-chip b { font: 600 1.1rem var(--f-mono); color: var(--ink-3); }
.bd-chip small { font-size: 0.7rem; }
.bd-chip.fit { border-color: var(--accent); background: var(--accent-soft); color: var(--ink-2); }
.bd-chip.fit b { color: var(--accent-ink); }
.bd-read { font: 0.95rem/1.7 var(--f-mono); color: var(--ink-2); margin: 0; }
.bd-read b { color: var(--ink); }
.bd-chart { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }
.bd-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.bd-dot { fill: var(--accent); }
.bd-dot.on { fill: var(--gold); }

/* 3: voting */
.vb-ctl { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 0.85rem; margin-bottom: 12px; }
.vb-chart { width: 100%; height: auto; display: block; }
.vb-bar { fill: var(--ink-3); opacity: 0.45; }
.vb-bar.win { fill: var(--accent); opacity: 1; }
.vb-bar.tie { fill: var(--gold); opacity: 0.8; }
.vb-read { font-size: 0.9rem; color: var(--ink-2); margin: 10px 0 0; }
.vb-read b { color: var(--ink); }

/* 4: the step checker */
.sc-slips .slider { font-size: 0.85rem; margin: 6px 0; }
.sc-slips .slider b { min-width: 4ch; }
.sc-slips + .seg { margin: 10px 0 14px; }
.sc-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sc-step { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line); font-size: 0.88rem; }
.sc-step code { font: 500 1rem var(--f-mono); color: var(--ink); background: none; padding: 0; }
.sc-stamp { font-size: 0.8rem; }
.sc-step.ok { border-color: var(--good); } .sc-step.ok .sc-stamp { color: var(--good); }
.sc-step.wrong { border-color: var(--bad); } .sc-step.wrong .sc-stamp { color: var(--bad); }
.sc-verdicts { margin-top: 12px; display: grid; gap: 6px; }
.sc-v { margin: 0; font-size: 0.88rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sc-v span { font: 500 0.7rem var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); min-width: 11ch; }
.sc-v.good b { color: var(--good); } .sc-v.bad b { color: var(--bad); }
.sc-v i { color: var(--ink-3); font-style: normal; font-size: 0.8rem; }
.sc-ceiling .slider { font-size: 0.85rem; margin: 6px 0; }
.sc-dots { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.sc-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); opacity: 0.7; }
.sc-pass { font: 0.95rem/1.7 var(--f-mono); color: var(--ink-2); margin: 0; }
.sc-pass b { color: var(--ink); }

/* 5: group advantages */
.ga-ctl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 0.85rem; margin-bottom: 14px; }
.ga-rows { display: grid; gap: 6px; }
.ga-row { display: grid; grid-template-columns: 70px auto 82px 1fr 56px; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--ink-2); }
.ga-flip { border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 0; font: 500 0.8rem var(--f-ui); cursor: pointer; background: var(--surface-2); color: var(--ink-3); }
.ga-flip.good { color: var(--good); border-color: var(--good); } .ga-flip.bad { color: var(--bad); border-color: var(--bad); }
.ga-len { font-size: 0.8rem; color: var(--ink-3); }
.ga-len select { font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 4px; }
.ga-r { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.ga-bar { position: relative; height: 18px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.ga-bar::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--ink-3); }
.ga-bar i { position: absolute; top: 0; bottom: 0; width: var(--w); transition: width 0.2s; }
.ga-bar i.pos { left: 50%; background: var(--good); } .ga-bar i.neg { right: 50%; background: var(--bad); }
.ga-row b { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--f-mono); }
.ga-read { font-size: 0.9rem; color: var(--ink-2); margin: 14px 0 0; }
.ga-read b { color: var(--ink); }
@media (max-width: 560px) { .ga-row { grid-template-columns: 62px auto 1fr 52px; } .ga-r { display: none; } .ga-ctl .btn { width: 100%; } }

/* 5b: the price of a length */
.lp-ctl { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-size: 0.85rem; margin-bottom: 14px; }
.lp-d { display: inline-flex; align-items: center; gap: 8px; }
.lp-rows { display: grid; gap: 6px; }
.lp-row { display: grid; grid-template-columns: 56px 1fr 120px 52px; gap: 10px; align-items: center; font-size: 0.85rem; color: var(--ink-2); }
.lp-L { font: 500 0.85rem var(--f-mono); color: var(--ink-2); }
.lp-work { font: 0.78rem var(--f-mono); color: var(--ink-3); }
.lp-bar { height: 18px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.lp-bar i { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }
.lp-row.win .lp-bar i { background: var(--gold); }
.lp-row.win .lp-L, .lp-row.win b { color: var(--gold); }
.lp-row b { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.lp-read { font-size: 0.9rem; color: var(--ink-2); margin: 14px 0 0; }
.lp-read b { color: var(--ink); }
@media (min-width: 760px) { .lp-row { grid-template-columns: 56px 1fr 220px 56px; } }
@media (max-width: 560px) { .lp-row { grid-template-columns: 50px 1fr 52px; } .lp-work { display: none; } }

/* 6: slips compound */
.cs-read { font: 1.05rem/1.7 var(--f-mono); color: var(--ink-2); margin: 12px 0 8px; }
.cs-read b { color: var(--ink); }
.cs-table { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.85rem; color: var(--ink-3); }
.cs-table b { color: var(--ink); font-family: var(--f-mono); }
.cs-chart { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }
.cs-line { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.cs-dot { fill: var(--gold); }

/* 6b: the bill */
.tb-ctl { display: grid; gap: 8px 22px; grid-template-columns: 1fr; font-size: 0.85rem; margin-bottom: 16px; }
@media (min-width: 760px) { .tb-ctl { grid-template-columns: 1fr 1fr; } }
.tb-ctl .slider b { min-width: 5ch; }
.tb-out { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tb-out { grid-template-columns: 1fr 1fr; } }
.tb-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-1); background: var(--surface-2); border: 1px solid var(--line); }
.tb-stat .n { font: 400 1.9rem/1.1 var(--f-display); color: var(--gold); }
.tb-stat .l { font: 0.82rem/1.45 var(--f-ui); color: var(--ink-2); }
.tb-chains { display: grid; gap: 3px; margin: 14px 0 10px; }
.tb-chains i { display: block; height: 6px; border-radius: 3px; background: var(--accent); opacity: 0.8; min-width: 4px; }
.tb-read { font-size: 0.9rem; color: var(--ink-2); margin: 0; }