/* The Math of Enough (Tasks 82, 83): on top of ../assets/splash.css.  One idea per screen: a question as the headline,
   one big number, short lines, generous space; phone first.  The rest of the splash site is dark only; this page also
   reads in a light theme, when the reader picks it in the settings, (the header stays dark, for the wordmark).  No inline styles: the page's CSP is style-src 'self'. */
[hidden]{display:none!important}

/* normal section padding (splash.css section, .hero); no full-screen bands (Task 94) */
#sim-out>.sbars:first-child,#hv-out>.pair:first-child{margin-top:0}
.moe section .lead{margin-bottom:16px}
.col{max-width:720px}
.moe .hero{text-align:center}
.moe .hero .lead{margin:0 auto 6px}
.moe h1{font-size:clamp(36px,8vw,64px)}
.screen h2{font-size:clamp(30px,6.4vw,50px);line-height:1.1;letter-spacing:-.02em;margin:0 0 24px}
/* Task 110: never one word alone on a heading's last line (balance where supported; pretty for the leads) */
.moe h1,.moe h2,.moe h3{text-wrap:balance}
.moe .lead,.moe .punch{text-wrap:pretty}
.screen p{max-width:640px}
.moe .hero p{max-width:none}
.lines p{margin:0 0 6px}
.lines{margin:0 0 18px}

.big{font-weight:700;font-size:clamp(56px,16vw,112px);line-height:1;letter-spacing:-.03em;color:var(--teal);font-variant-numeric:tabular-nums;margin:28px 0 10px;overflow-wrap:anywhere}
.big.arrow{font-size:clamp(34px,9vw,72px);margin-bottom:8px}
.widget .big{font-size:clamp(48px,13vw,88px);margin:6px 0 6px}
.small{font-size:15px;color:var(--dim)}
.punch{font-size:clamp(20px,3.4vw,25px);line-height:1.35;font-weight:500;color:var(--text);border-left:3px solid var(--acc);padding-left:16px;margin:26px 0}

/* a permanent $ or % inside a box (Task 91): shown, never part of the typed value */
.affix{position:relative;display:block}
.affix .sym{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--FM);font-size:24px;color:var(--mu);pointer-events:none;text-transform:none;letter-spacing:0}
.affix.pre .sym{left:12px}
.affix.post .sym{right:12px}
.affix.pre input{padding-left:34px}
.affix.post input{padding-right:34px}

/* section 1: the yearly totals as bars, drawn from the page's own numbers */
.ybars{display:block;width:100%;max-width:460px;height:auto;margin:6px 0 18px}
.ybars .bar{fill:var(--teal)}
.ybars .lbl{fill:var(--mu);font-family:var(--FM);font-size:26px}
.ybars .val{fill:var(--text);font-family:var(--FM);font-size:26px;font-weight:600}

/* a one-line math note (Task 91): small and plain, not a fold */
.mathline{font-size:15.5px;color:var(--mu);border-top:1px solid var(--brd2);padding-top:14px;margin-top:22px}
.mathline strong{font-family:var(--FM);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-right:6px}

/* section 3: two pairs of bars, Steady and Swinger side by side */
.sbars{display:grid;grid-template-columns:1fr;gap:18px;margin:18px 0 0}   /* the two groups stacked (10-27): side by side left the bars too short to read */
.sk{font-family:var(--FM);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin:0 0 8px}
.srow{display:grid;grid-template-columns:72px 1fr auto;align-items:center;gap:10px;margin:0 0 8px}
.sn{font-family:var(--FM);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.srow.hot .sn,.srow.hot .sv{color:var(--acc)}
.strack{display:block;height:22px;background:var(--bg);border:1px solid var(--brd2)}
.sfill{display:block;height:100%;width:0;background:var(--teal);transition:width .5s ease-out}
.srow.hot .sfill{background:var(--acc)}
.sv{font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;color:var(--teal);min-width:0;overflow-wrap:anywhere}

.widget{border:1px solid var(--brd2);background:var(--surf);padding:22px 20px;margin:30px 0}
.widget .small{margin:14px 0 0}
.asks{display:flex;flex-wrap:wrap;gap:12px 16px}
.ask{display:flex;flex-direction:column;gap:6px;flex:1 1 140px;font-family:var(--FM);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.ask input{font:inherit;font-family:var(--FM);font-size:24px;letter-spacing:0;text-transform:none;color:var(--text);background:var(--bg);border:1px solid var(--brd2);padding:10px 12px;width:100%;min-width:0}
.ask input:focus-visible,.drag input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.drag{display:block;margin:14px 0 4px;font-family:var(--FM);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu)}
.drag b{color:var(--text);font-weight:600}
.drag input{display:block;width:100%;height:36px;margin:6px 0 0;accent-color:var(--acc);cursor:pointer}

.run{font-family:var(--FM);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--bg);background:var(--teal);border:0;padding:14px 20px;cursor:pointer;width:100%}
.run:hover{background:var(--text)}
.run:disabled{opacity:.6;cursor:wait}

/* section 2 and its math: the charts */
.chart{display:block;width:100%;height:auto;margin:18px 0 4px;background:var(--bg);border:1px solid var(--brd2)}
#ld-chart{touch-action:pan-y;cursor:ew-resize}
.chart .axis{stroke:var(--brd2);stroke-width:1}
.chart .goal{stroke:var(--dim);stroke-width:1;stroke-dasharray:5 5}
.chart .clean{fill:none;stroke:var(--teal);stroke-width:2.5}
.chart .variable{fill:none;stroke:var(--acc);stroke-width:2;stroke-dasharray:7 4}
.chart .shock{fill:none;stroke:var(--text);stroke-width:2;stroke-dasharray:2 4;stroke-linecap:round}
.chart .marker{stroke:var(--acc);stroke-width:2}
.chart .dot{fill:var(--acc);stroke:var(--bg);stroke-width:3}
.chart .lbl{fill:var(--dim);font-family:var(--FM);font-size:13px}
.chart .lbl.end{text-anchor:end}
.chart .lbl.mid{text-anchor:middle}

/* side by side: Steady vs Swinger, a fixed exit vs hold and hope */
.edge{border:0;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--mu)}
.edge legend{font-family:var(--FM);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px;padding:0}
.edge label,.pick label{cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:6px 12px 6px 8px;margin-left:-8px}
.edge input,.pick input{accent-color:var(--acc);margin-right:8px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--brd2);border:1px solid var(--brd2);margin:18px 0 0}
.pair>div{background:var(--bg);padding:16px 14px}
.pair h3{font-family:var(--FM);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.pair .hot h3,.pair .hot .v{color:var(--acc)}
.stat{margin:0 0 12px}
.stat .v{display:block;font-size:clamp(26px,7vw,40px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--teal)}
.stat .k{display:block;font-size:13.5px;color:var(--mu);line-height:1.35}
.lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15em),1fr));gap:12px 20px;margin:14px 0 4px}
.list-h{font-family:var(--FM);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);margin:0 0 6px}
.hv-line{font-size:clamp(17px,2.4vw,20px);color:var(--text);margin:16px 0 18px}
.hv-more{margin-top:6px}
.lists ul{margin:0;padding-left:18px;font-family:var(--FM);font-size:13.5px;color:var(--mu)}

/* "Show me the math": works without JavaScript */
details.math{margin:22px 0 0;border-top:1px solid var(--brd2)}
details.math summary{cursor:pointer;list-style:none;font-family:var(--FM);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);padding:14px 0}
details.math summary::-webkit-details-marker{display:none}
details.math summary::before{content:"+";display:inline-block;width:1.2em}
details.math[open] summary::before{content:"−"}
details.math summary:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
details.math p{font-size:15.5px;color:var(--mu)}
.model{color:var(--mu)}

.ph{display:inline-block;font-family:var(--FM);font-size:14px;color:var(--acc);border:1px dashed var(--acc-b);padding:6px 10px}
.cta{display:inline-block;margin-top:14px;font-family:var(--FM);font-weight:600;font-size:16px;letter-spacing:.04em;color:var(--bg);background:var(--teal);padding:14px 20px;text-decoration:none}
.cta:hover{background:var(--text)}

@media (max-width:600px){.widget{padding:18px 14px}.pair>div{padding:14px 10px}}
@media (prefers-reduced-motion:reduce){.sfill{transition:none}}

:root[data-theme=light] body.moe{
    --bg:#F7F8FA;--surf:#FFFFFF;--surf2:#EEF1F5;
    --acc:#9A5B00;--acc-b:rgba(154,91,0,.35);
    --teal:#006C7A;--teal-d:rgba(0,108,122,.10);--teal-b:rgba(0,108,122,.30);
    --text:#0B1220;--mu:#3D4A5C;--dim:#5A6678;
    --brd:rgba(11,18,32,.08);--brd2:rgba(11,18,32,.14);
    color-scheme:light
  }
:root[data-theme=light] body.moe header.top{--bg:#080A0E;--text:#F8FAFC;--teal:#00E5FF;--acc:#FFB000;--acc-b:rgba(255,176,0,.35);background:#080A0E;color:#F8FAFC}
/* the run counter and each number's previous run (lead, 10-27): every press is a new set of random years */
.sv{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.last{display:block;font-size:12px;font-weight:400;color:var(--mute);opacity:.85;min-height:1em}
.run-note{margin-top:-4px}
.run-n{color:var(--text);margin-right:6px;font-weight:600}
.sv{min-width:10.5em}   /* one width for every value, so all four tracks line up (10-27) */
/* phone (and any width where the reader's text is large): the number takes its own full row under the bar, and its
   last-run note wraps under it, so nothing runs off the right edge (M1).  The reader's chosen text size is kept. */
@media (max-width:600px){.srow{grid-template-columns:auto 1fr;row-gap:4px}.sv{grid-column:1/-1;min-width:0;flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;column-gap:10px}}
.last{overflow-wrap:anywhere}
/* the paired results stack into one column when two would not fit at the reader's text size (M1; em-based, so the
   Largest text setting stacks them too) */
.pair{grid-template-columns:repeat(auto-fit,minmax(min(100%,13em),1fr))}
.stat .v{overflow-wrap:anywhere}

/* Task 110 */
.err{color:var(--acc)!important;font-weight:600}
.err:empty{display:none}
.slide{display:grid;grid-template-columns:1fr minmax(6.5em,8.5em);gap:6px 14px;align-items:end}
.slide .drag{margin-bottom:0}
.ask.box{flex:none}
.ask.box input{font-size:20px;padding:8px 10px}
@media (max-width:420px){.slide{grid-template-columns:1fr}}
/* M2: the charts' axis values in the page's own text, at its own size (inside the SVG they shrank to 5-7 px) */
.axis-key{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;margin:0 0 10px;font-family:var(--FM);font-size:13px;color:var(--dim)}
.picks{display:flex;flex-wrap:wrap;gap:6px 28px;margin:0 0 6px}
.pick{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 14px;font-size:16px;color:var(--text)}
.pick legend{font-family:var(--FM);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mu);padding:0;margin-bottom:2px}
.ends{margin:18px 0 0}
.erow{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;margin:0 0 6px;font-size:15px;color:var(--mu)}
.erow .sn{min-width:72px}
.erow b{color:var(--teal);font-variant-numeric:tabular-nums}
.erow.hot b{color:var(--acc)}
.fixed-note{margin:0 0 10px!important}
.formula{font-family:var(--FM);font-size:13.5px}
/* section 7: the made-up screenshot beside the whole trade block */
.shot{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15em),1fr));gap:14px;margin:22px 0 10px}
.shot figure{margin:0;border:1px solid var(--brd2);background:var(--surf);padding:16px}
.shot .tag{font-family:var(--FM);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.fake .pnl{font-size:clamp(44px,11vw,64px);font-weight:700;line-height:1;color:var(--teal);font-variant-numeric:tabular-nums;margin:0 0 6px}
.trades{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5em,1fr));gap:2px 12px;font-family:var(--FM);font-size:13px}
.trades li{display:flex;justify-content:space-between;gap:8px;color:var(--mu)}
.trades li b{font-weight:600;font-variant-numeric:tabular-nums}
.trades li.w b{color:var(--teal)}
.trades li.l b{color:var(--acc)}
.tot{margin:10px 0 0!important;font-size:15px}
.tot b{color:var(--acc)}