/* /learn/kalshi-15-minute-fair-value (2026-10-18, Wave 1). Built by tools/learn_fair_value.py.
   Tokens only, so the light/dark toggle moves every part. Plan: claude/plan-2026-10-18-learn-fair-value-page.md s4. */

/* H1: two phrases on two lines (Jay's headline rule) */
.fv-h1 span,.fv-h1 em{display:block;text-wrap:balance}

/* the three numbers: --paper on --bg is a weak edge, so each card carries a 2px --brand top edge */
.fv-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fv-card{background:var(--paper);border:1px solid var(--line-2);border-top:2px solid var(--brand);border-radius:var(--r);padding:16px 18px}
.fv-card h3{font:700 17px/1.3 var(--sans);color:var(--ink)}
.fv-card p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media (max-width:760px){.fv-trio{grid-template-columns:1fr}}

/* the equation: scrolls inside itself on a phone, never the page */
.fv-formula{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:6px 18px;overflow-x:auto}
.fv-formula p{display:grid;gap:4px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.fv-formula p:last-child{border-bottom:0}
.fv-formula code{font:600 16px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:nowrap}
.fv-formula span{font-size:14.5px;line-height:1.5;color:var(--ink-2)}

/* worked example rows */
.fv-rc{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.fv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 16px;padding:11px 16px;border-bottom:1px solid var(--line)}
.fv-row:last-child{border-bottom:0}
.fv-row span{font-weight:600;color:var(--ink)}
.fv-row b{font-variant-numeric:tabular-nums;color:var(--ink);text-align:right}
.fv-row b.fv-up{color:var(--brand-ink)}
.fv-row small{grid-column:1 / -1;font-size:13px;line-height:1.45;color:var(--ink-3)}

/* the bell curve: fixed viewBox, so its height is reserved before paint */
.fv-bell{margin:20px 0 0}
.fv-bell svg{display:block;width:100%;height:auto;aspect-ratio:640 / 220}
.fv-bell figcaption{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.fv-axis{stroke:var(--line-2);stroke-width:1.5}
.fv-curve{fill:none;stroke:var(--ink-2);stroke-width:2.5}
.fv-area{fill:var(--brand-soft);stroke:none}
.fv-now{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:4 4}
.fv-strike{stroke:var(--brand);stroke-width:2.5}
.fv-lab{font:600 13px var(--sans);fill:var(--ink-2)}
.fv-lab--strike{fill:var(--brand-ink)}
.fv-big{font:800 17px var(--sans);fill:var(--brand-ink)}
.fv-big--down{fill:var(--ink)}

/* the timeline */
.fv-time{list-style:none;padding:0;border-left:2px solid var(--line-2)}
.fv-time li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;padding:10px 0 10px 16px}
.fv-yr{font:800 17px/1.4 var(--sans);color:var(--brand-ink);font-variant-numeric:tabular-nums}
.fv-ev{font-size:15.5px;line-height:1.6;color:var(--ink)}
@media (max-width:560px){.fv-time li{grid-template-columns:1fr;gap:2px}}

/* where it breaks */
.fv-breaks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fv-break{background:var(--paper);border:1px solid var(--line-2);border-left:3px solid var(--loss-ink);border-radius:var(--r);padding:14px 16px}
.fv-break h3{font:700 16.5px/1.3 var(--sans);color:var(--ink)}
.fv-break p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media (max-width:760px){.fv-breaks{grid-template-columns:1fr}}

/* source links: the same pill the lessons use (assets/lesson.css .cite), which this page doesn't load */
.fv-page .cite{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:1px 7px;margin:0 1px;border-radius:999px;background:var(--brand-soft);border:1px solid var(--line-2);font:600 12px/1.5 var(--sans);color:var(--brand-ink);text-decoration:none;white-space:normal;vertical-align:1px}
.fv-page .cite:hover{border-color:var(--brand)}
/* on a phone the equation wraps instead of scrolling */
@media (max-width:560px){.fv-formula code{white-space:normal;font-size:15px}}

/* Wave 2 (2026-10-18): the calculator. Inputs on the left, results on the right, the curve under both; one column on a phone */
.fv-calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;background:var(--paper);border:1px solid var(--line-2);border-top:2px solid var(--brand);border-radius:var(--r);padding:18px}
.fv-calc .fv-bell{grid-column:1 / -1;margin:0}
@media (max-width:760px){.fv-calc{grid-template-columns:1fr;padding:14px}}
.fv-in{display:grid;gap:12px;align-content:start}
.fv-f label,.fv-seg legend{display:block;font:700 14px/1.3 var(--sans);color:var(--ink);margin-bottom:6px;padding:0}
.fv-box{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;background:var(--paper);border:1px solid var(--line-3);border-radius:10px}
.fv-box:focus-within{outline:2px solid var(--brand);outline-offset:1px}
.fv-box span{font-weight:700;color:var(--ink-2)}
.fv-box input{flex:1;min-width:0;border:0;background:transparent;font:600 17px/1.2 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;padding:10px 0}
.fv-box input:focus{outline:none}
.fv-hint{margin-top:4px;font-size:12.5px;line-height:1.4;color:var(--ink-3)}
.fv-seg{border:0;margin:0;padding:0;min-width:0}
.fv-seg-row{display:flex;gap:8px}
.fv-seg label{flex:1;position:relative}
.fv-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fv-seg span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border:1px solid var(--line-3);border-radius:10px;font:700 15px var(--sans);color:var(--ink-2);background:var(--paper)}
.fv-seg input:checked + span{border:2px solid var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.fv-seg input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.fv-out{align-self:start;background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:6px 16px 14px}
.fv-orow{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.fv-orow span{color:var(--ink-2);font-weight:600}
.fv-orow b{color:var(--ink);font-variant-numeric:tabular-nums}
.fv-orow--big{border-bottom:0;padding-top:12px}
.fv-orow--big span{color:var(--ink);font-weight:800}
.fv-orow--big b{font:800 22px/1 var(--sans)}
.fv-orow b.is-pos{color:var(--gain)}
.fv-orow b.is-neg{color:var(--loss-ink)}
.fv-verdict{margin-top:6px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.fv-err{margin:10px 0 4px;padding:8px 10px;border-left:3px solid var(--loss-ink);font-size:14px;color:var(--ink)}
.fv-tw{overflow-x:auto}
.fv-cases{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.fv-cases caption{caption-side:top;text-align:left;font-size:13.5px;line-height:1.5;color:var(--ink-3);padding-bottom:8px}
.fv-cases th,.fv-cases td{padding:9px 12px;border-bottom:1px solid var(--line-2);text-align:right;color:var(--ink)}
.fv-cases th[scope="row"],.fv-cases thead th:first-child{text-align:left}
.fv-cases thead th{font-size:13px;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){.fv-area{transition:d .2s ease}}
/* on a phone the 640-wide curve scales to about 0.56x, so its labels get bigger SVG sizes to stay about 13 to 17px */
@media (max-width:560px){.fv-lab{font-size:24px}.fv-big{font-size:30px}.fv-bell svg{overflow:visible}}