/* Jianco calculator page — /assets/calc.v2.css v2 (v1 plus the hedge modes). Page-only rules on top of ui.css (tokens, .btn, .chip, .card, nav, sheet,
   toast, statusbar). The either-way table follows oracle.css .payoff, copied here so this page does not load oracle.css.
   Colours only through ui.css tokens; --line-ui and --focus are read when a palette defines them, else they fall back. */

/* hero */
.chero{padding-block:16px 12px}
.chero h1{margin-top:8px}
.chero .lede{margin-top:10px;max-width:60ch;text-wrap:pretty}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media (min-width:720px){.chero{padding-block:36px 16px}}

/* page grid: inputs, then results; side by side from 1024 */
.cgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-block:4px 40px}
.cin{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (min-width:1024px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}}
@media (min-width:1280px){.cgrid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
/* from 1024 the results column stays in view while the inputs scroll past it (there is no dock there); when it is
   taller than the window it scrolls inside itself, the verdict first */
@media (min-width:1024px){
  .res{position:sticky;top:calc(var(--nav-h) + 12px);max-height:calc(100vh - var(--nav-h) - 24px);max-height:calc(100dvh - var(--nav-h) - 24px);overflow-y:auto;scrollbar-width:thin}
  .res>*,.rbody>*{flex-shrink:0}
} /* once the wrap caps the page, results get the wider column: six figures per row */

/* a numbered block */
.blk{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-4);box-shadow:var(--card-top);padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
@media (min-width:720px){.blk{padding:20px}}
.blk,.res,.bh{scroll-margin-top:calc(var(--nav-h) + 12px)}
.bh{display:flex;align-items:center;gap:10px;font:400 22px/1.2 var(--serif);color:var(--tx)}
@media (min-width:1024px){.bh{font-size:24px}}
.bh .n{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-gold-2);color:var(--gold);font:500 11px/1 var(--mono);display:grid;place-items:center;flex:none}
.hint{font:400 13px/1.5 var(--sans);color:var(--mut);max-width:64ch;text-wrap:pretty}
.hint b{font-weight:500;color:var(--tx)}

/* the two books */
.books{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:600px) and (max-width:1023px){.books{grid-template-columns:repeat(2,minmax(0,1fr))}}

.book{background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--r-3);padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
.bk-h{font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold)}
.asks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fee{display:flex;flex-direction:column;gap:10px}
.fline{font:400 12px/1.45 var(--mono);color:var(--mut);overflow-wrap:break-word}
/* ≥ 1024 the inputs column is narrow: the books stack, and each book is a grid in reading order: the venue and the two
   asks take full rows (so a 48.95 ask and 'Polymarket (global)' never clip), then the order type beside the fee setting */
@media (min-width:1024px){
  .book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:12px}
  .book>.bk-h,.book>.fld,.book>.asks{grid-column:1/-1}
  .book>.fee{display:contents}
  .book .fline,.book .chk{grid-column:1/-1}
  .book .fline{margin-top:-2px}
}

/* fields: label face above, 48 px value face, gold edge on focus */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld>.k{font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mut)}
.inp{position:relative;display:flex;align-items:center;min-height:48px;border:1px solid var(--line-ui,var(--line-2));border-radius:var(--r-2);background:var(--bg-3);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.inp:hover{border-color:var(--line-gold-2)}
.inp:focus-within{border-color:var(--focus,var(--gold));box-shadow:0 0 0 1px var(--focus,var(--gold))}
.inp input{flex:1 1 auto;min-width:0;width:100%;height:46px;padding:0 12px;border:0;border-radius:var(--r-2);background:transparent;outline:0;color:var(--tx);font:500 16px/1 var(--mono);font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;scroll-margin-block:calc(var(--nav-h) + 24px) 96px}
.inp input::placeholder{color:var(--dim);opacity:1}
.inp input[type=date]{padding-right:8px;min-height:46px;color-scheme:dark}
.inp input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.8}
.inp .u{flex:none;padding-right:12px;font:400 15px/1 var(--mono);color:var(--mut);pointer-events:none}
.inp .u.pre{padding:0 0 0 12px}
.inp .u.pre+input{padding-left:4px}
.fld .err{font:400 12px/1.3 var(--mono);color:var(--bad);min-height:0}
.fld .err:empty{display:none}
.fld.bad .inp{border-color:var(--bad-line);box-shadow:none}
.fld.soft .err{color:var(--amber)}
.fld.usd .inp .u{visibility:hidden} /* '$0.45' typed: the ¢ mark would contradict it */
.fld.bad .inp:focus-within{border-color:var(--bad);box-shadow:0 0 0 1px var(--bad)}

/* select: native, with a drawn chevron in a token colour */
.sel{position:relative;display:block}
.sel select{display:block;width:100%;min-height:48px;padding:0 40px 0 12px;border:1px solid var(--line-ui,var(--line-2));border-radius:var(--r-2);background:var(--bg-3);color:var(--tx);font:500 16px/1.2 var(--sans);-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.sel select:hover{border-color:var(--line-gold-2)}
.sel select:focus-visible{outline:2px solid var(--focus,var(--gold-2));outline-offset:2px;border-radius:var(--r-2)}
.sel select option{background:var(--bg-2);color:var(--tx)}
.sel::after{content:"";position:absolute;right:17px;top:50%;width:7px;height:7px;border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* segmented radios (order type, size mode) */
.tog{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:2px;border:1px solid var(--line-ui,var(--line-2));border-radius:var(--r-pill);background:var(--bg-1);min-width:0}
.tog label{position:relative;display:flex;min-width:0}
.tog input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tog span{flex:1;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 12px;border-radius:var(--r-pill);font:500 13px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);transition:background var(--t-fast),color var(--t-fast);white-space:nowrap}
.tog label:hover span{color:var(--tx)}
.tog input:checked+span{background:var(--gold);color:var(--ink)}
.tog input:focus-visible+span{outline:2px solid var(--focus,var(--gold-2));outline-offset:2px}
.tog.w{max-width:360px}

/* checkbox and switch: the native input stays in the tree (visually hidden), the box/track are drawn */
.chk,.sw{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;align-self:flex-start;cursor:pointer;font:400 14px/1.3 var(--sans);color:var(--tx);-webkit-user-select:none;user-select:none}
.chk input,.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chk .box{width:20px;height:20px;flex:none;border:1px solid var(--line-ui,var(--line-2));border-radius:var(--r-1);background:var(--bg-3);position:relative;transition:background var(--t-fast),border-color var(--t-fast)}
.chk .box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);opacity:0}
.chk input:checked+.box{background:var(--gold);border-color:var(--gold)}
.chk input:checked+.box::after{opacity:1}
.chk input:focus-visible+.box,.sw input:focus-visible+.tr{outline:2px solid var(--focus,var(--gold-2));outline-offset:3px}
.sw .tr{width:40px;height:24px;flex:none;border-radius:var(--r-pill);border:1px solid var(--line-ui,var(--line-2));background:var(--bg-3);position:relative;transition:background var(--t-fast),border-color var(--t-fast)}
.sw .tr::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--mut);transition:transform var(--t-ui) var(--ease),background var(--t-fast)}
.sw input:checked+.tr{background:var(--gold);border-color:var(--gold)}
.sw input:checked+.tr::after{transform:translateX(16px);background:var(--ink)}

/* orientation cards */
.oris{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:600px) and (max-width:1023px){.oris{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ≥ 1024 the inputs column is narrow: the two cards stack so each label stays on one line */
.ori{position:relative;display:block;cursor:pointer;min-width:0}
.ori input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ori-in{display:flex;flex-direction:column;gap:10px;height:100%;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-3);background:var(--bg-2);transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.ori:hover .ori-in{border-color:var(--line-gold-2)}
.ori input:checked+.ori-in{border-color:var(--line-gold-2);box-shadow:var(--glow-pick-1)}
.ori input:focus-visible+.ori-in{outline:2px solid var(--focus,var(--gold-2));outline-offset:3px}
.ori-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 14px/1.3 var(--sans);color:var(--tx)}
.ori-t b{font-weight:500}
.ori-t .chip{margin-left:auto}
.ori .rd{width:18px;height:18px;flex:none;border-radius:50%;border:1px solid var(--line-ui,var(--line-2));background:var(--bg-3);position:relative}
.ori input:checked+.ori-in .rd{border-color:var(--gold)}
.ori input:checked+.ori-in .rd::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--gold)}
.ori-l{font:400 13px/1.4 var(--mono);color:var(--mut);overflow-wrap:break-word}
.ori-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ori-kv>span{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-width:0} /* a label that wraps keeps its value on the row's baseline */
.ori-kv i{font:500 10px/1.2 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ori-kv b{font:500 15px/1.2 var(--mono);color:var(--tx);white-space:nowrap}
.ori-kv b.pos{color:var(--pos)} .ori-kv b.neg{color:var(--bad)}
.chip.cheap{background:var(--gold-tint);border-color:var(--line-gold-2);color:var(--gold-2)}
/* an orientation without both asks: disabled by colour, never opacity */
.ori.off{cursor:default}
.ori.off input{cursor:default}
.ori.off .ori-in,.ori.off:hover .ori-in{border-style:dashed;border-color:var(--line-2);box-shadow:none}
.ori.off .ori-t,.ori.off .ori-kv b{color:var(--dim)}

/* size */
.szrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:420px}
.szrow>.fld{justify-content:flex-end}
.bal{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--amber-line);border-radius:var(--r-3);background:var(--amber-bg)}
.bal-t{font:400 14px/1.45 var(--sans);color:var(--tx)}
.bal-b{display:flex;flex-wrap:wrap;gap:8px}
.bal-b .btn{white-space:normal;text-align:center;line-height:1.2;padding-block:6px}
.dates{display:flex;flex-wrap:wrap;gap:10px 8px}
.dates .chip.cat[aria-pressed="true"]{background:var(--sel-bg,var(--gold-tint));border-color:var(--sel-bg,var(--line-gold-2));color:var(--sel-fg,var(--gold-2))}
.rdbox{display:flex;flex-direction:column;gap:10px}

/* venue access facts */
.access{font:400 13px/1.5 var(--sans);color:var(--mut);padding:10px 12px;border-left:2px solid var(--line-gold-2);background:var(--gold-6);border-radius:0 var(--r-2) var(--r-2) 0}
.access b{font-weight:500;color:var(--tx)}
.access.nobody{border-left-color:var(--bad);background:var(--bad-bg)}

/* results */
.res-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.res-h .btn svg{width:16px;height:16px}
.verdict{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-3);background:var(--bg-2)}
.verdict .vt{font:400 clamp(22px,5.6vw,30px)/1.15 var(--serif);color:var(--tx);text-wrap:balance}
.verdict .vt em{font-style:italic;color:var(--gold);padding-inline-end:.06em}
.verdict .vs{font:400 14px/1.5 var(--sans);color:var(--mut);text-wrap:pretty}
.verdict .vs b{font-weight:500;color:var(--tx)}
.verdict.lock{border-color:var(--pos-line);background:var(--pos-bg)}
.verdict.lock .vt em{color:var(--pos)}
.verdict.lean{border-color:var(--amber-line);background:var(--amber-bg)}
.verdict.lean .vt em{color:var(--amber)}
.verdict.loss{border-color:var(--bad-line);background:var(--bad-bg)}
.verdict.loss .vt em{color:var(--bad)}
.verdict.lock .vs,.verdict.lean .vs,.verdict.loss .vs{color:var(--tx)} /* --mut on a tinted card is under 4.5:1 */
.verdict .vn{display:block;margin-top:4px;color:var(--amber)}
.rbody{display:flex;flex-direction:column;gap:10px}
.rs{font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold);margin-top:8px}
.pos{color:var(--pos)} .neg{color:var(--bad)}

/* tables (≥ 600) after oracle.css .payoff; cards below 600 */
/* last resort for very large amounts: the table scrolls inside its card, the page never does */
.tbw{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tb{display:none;width:100%;border-collapse:collapse;font:400 13px/1.4 var(--mono);color:var(--mut)}
.tb th,.tb td{padding:10px 8px;border-bottom:1px solid var(--line-1);text-align:left;vertical-align:baseline}
.tb thead th{font:500 var(--fs-label)/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-block:6px;vertical-align:bottom}
.tb tbody th{font:500 14px/1.3 var(--sans);color:var(--tx)}
.tb .ra{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tb tr.rw-in td.ra,.tb tfoot td.ra{white-space:normal}
@media (min-width:1024px){.tb th,.tb td{padding-inline:6px}.tb{font-size:12.5px}}
.tb thead th.ra{white-space:normal}
.tb td.ra{color:var(--tx)}
.tb td.ra.pos{color:var(--pos)} .tb td.ra.neg{color:var(--bad)}
.tb tbody th .chip{margin-left:6px;vertical-align:1px}
.tb tr.rw-rules th,.tb tr.rw-rules td{border-top:1px dashed var(--line-2)}
.tb tfoot th,.tb tfoot td{border-bottom:0;color:var(--gold-2);font-family:var(--mono)}
.tb tfoot th{font:500 11px/1.3 var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold)}
.tb tr.reb th{font:400 12px/1.3 var(--mono);color:var(--mut);padding-left:18px}
.tb tr.reb td{padding-top:0}
.tb .sub{display:block;font:400 12px/1.3 var(--mono);color:var(--mut);margin-top:2px}
.tb.ew thead th:first-child{width:30%}
.chip.best{background:var(--pos-bg);border-color:var(--pos-line);color:var(--pos)}
.chip.worst{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber)}
.chip.lockc{background:var(--pos-bg);border-color:var(--pos-line);color:var(--pos)}
.chip.lossc{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.cards{display:flex;flex-direction:column;border:1px solid var(--line-1);border-radius:var(--r-3);background:var(--bg-2)}
.cards>li{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line-1);min-width:0}
.cards>li:last-child{border-bottom:0}
.cards .ch{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 15px/1.3 var(--sans);color:var(--tx)}
.cards .ch .v{font:500 16px/1.2 var(--mono);white-space:nowrap}
.cards .cm{display:flex;flex-wrap:wrap;gap:0 12px;font:400 12px/1.5 var(--mono);color:var(--mut);overflow-wrap:break-word}
.cards .cm>span{white-space:nowrap} /* facts wrap between each other, never inside one */
.cards .cg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cards .cg>span{display:flex;flex-direction:column;justify-content:flex-end;gap:2px;min-width:0} /* a label that wraps keeps its value on the row's baseline */
.cards .cg i{font:500 10px/1.2 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.cards .cg b{font:500 15px/1.2 var(--mono);color:var(--tx);white-space:nowrap}
.cards .cg b.pos{color:var(--pos)} .cards .cg b.neg{color:var(--bad)}
@media (max-width:479px){.cards .cg.long{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:10px}} /* six-figure amounts */
.cards>li.tot{flex-direction:row;justify-content:space-between;align-items:baseline;gap:12px;font:500 11px/1.3 var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--gold)}
.cards>li.tot b{font:500 16px/1.2 var(--mono);letter-spacing:0;text-transform:none;color:var(--gold-2)}
.cards>li.rw-rules{border-top:1px dashed var(--line-2)}
@media (min-width:600px){.tb{display:table}.cards{display:none}}
@media (max-width:599px){.tbw{display:none}}
@media (min-width:1024px) and (max-width:1279px){.tbw{display:none}.cards{display:flex}} /* the results column is ~430 px here: cards, not a six-column table */

/* summary */
.sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;margin:0}
@media (min-width:600px){.sum{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.sum{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){.sum{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sum>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.sum dt{font:500 var(--fs-label)/1.25 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.sum dd{margin:0;font:500 18px/1.2 var(--mono);color:var(--tx);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.sum dd.pos{color:var(--pos)} .sum dd.neg{color:var(--bad)}
.sum dd.nt{font:400 12px/1.4 var(--mono);color:var(--mut);overflow-wrap:break-word}
.sum.dim{padding-top:14px;border-top:1px solid var(--line-1)}
.sum.dim dd:not(.nt){font-size:15px;color:var(--mut)}
.sum.dim dd.pos,.sum.dim dd.neg{color:var(--mut)}
.sum.dim dt{color:var(--dim)}
.sum .wide{grid-column:1/-1}
@media (max-width:399px){.sum.long{grid-template-columns:minmax(0,1fr)}} /* a figure of 12+ characters: one per row, never split after its sign */

/* phone dock: the verdict while the inputs are on screen */
.dock{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:40;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a c" "b c";align-items:center;gap:0 12px;min-height:56px;padding:8px 14px 8px 16px;border-radius:var(--r-3);border:1px solid var(--line-gold-2);background:var(--bg-2);box-shadow:var(--sheet-shadow);color:var(--tx);transform:translateY(0);visibility:visible;transition:transform var(--t-ui) var(--ease),opacity var(--t-ui),visibility 0s}
.dock .dk-a{grid-area:a;font:500 15px/1.3 var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock .dk-b{grid-area:b;font:400 12px/1.3 var(--mono);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock svg{grid-area:c;width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.75}
.dock.lock .dk-a{color:var(--pos)} .dock.lean .dk-a{color:var(--amber)} .dock.loss .dk-a{color:var(--bad)}
.dock.away{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;visibility:hidden;transition:transform var(--t-ui) var(--ease),opacity var(--t-ui),visibility 0s linear var(--t-ui)} /* hidden: out of the tab order */
html.kb .dock{bottom:calc(8px + var(--kb,0px))} /* --kb: the on-screen keyboard's height (calc.v2.js, visualViewport) */
@media (min-width:1024px){.dock{display:none}}
@media (max-width:1023px){body.docked{padding-bottom:84px}body.docked .toast{bottom:calc(84px + env(safe-area-inset-bottom))}html.docked{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom))}}

/* hedge modes (v2). Positions on the interval bar come in through CSSOM custom properties (--x, --l, --w, --r, --rows) set by
   calc.v2.js, never style attributes: the page's CSP is style-src 'self'. */
.hm-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.hm-body[hidden]{display:none}
.lkrow{display:flex;flex-direction:column;gap:8px}
.lkrow>.k{font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mut)}
.tog.lk{max-width:240px}
.lkrow .hint{margin-top:-2px}
/* the interval as a formula */
.ivf{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border:1px solid var(--line-1);border-radius:var(--r-3);background:var(--bg-2)}
.ivk{display:flex;flex-direction:column;gap:8px;margin:0}
.ivk>div{display:grid;grid-template-columns:auto 4.6em minmax(0,1fr);align-items:baseline;gap:2px 10px;min-width:0}
.ivk dt{font:italic 400 22px/1 var(--serif);color:var(--gold)}
.ivk dd{margin:0;font:500 17px/1.2 var(--mono);color:var(--tx);font-variant-numeric:tabular-nums}
.ivk dd.nt{font:400 12px/1.4 var(--mono);color:var(--mut);overflow-wrap:break-word}
.ivq{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:500 15px/1.4 var(--mono);color:var(--mut);padding-top:10px;border-top:1px solid var(--line-1)}
.ivq b{font-weight:500;color:var(--gold-2)}
.ivq.bad b{color:var(--bad)}
.ivs{font:400 13px/1.5 var(--sans);color:var(--mut);text-wrap:pretty}
.ivs b{font-weight:500;color:var(--tx)}
/* the interval as a bar: band, mode ticks, your ratio */
.ivbar{display:flex;flex-direction:column;padding:0 2px}
.ivbar[hidden]{display:none}
.ivp{position:relative;height:28px}
.ivy{position:absolute;left:var(--x,0);bottom:12px;font:500 11px/1 var(--mono);letter-spacing:.04em;white-space:nowrap;color:var(--tx)}
.ivy.in{color:var(--pos)} .ivy.out{color:var(--amber)}
.ivt{position:relative;height:12px;border-radius:var(--r-pill);background:var(--bg-3);border:1px solid var(--line-2)}
.ivb{position:absolute;top:-1px;bottom:-1px;left:var(--l,0);width:var(--w,0);background:var(--pos-bg);border:1px solid var(--pos-line);border-radius:var(--r-pill)}
.ivm{position:absolute;top:-5px;bottom:-5px;left:var(--x,0);width:2px;margin-left:-1px;border-radius:1px;background:var(--mut)}
.ivm.on{background:var(--gold);top:-7px;bottom:-7px}
.ivm.x{background:var(--bad)}
.ivyt{position:absolute;top:-10px;bottom:-4px;left:var(--x,0);width:0;margin-left:-5px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--tx)}
.ivyt.in{border-top-color:var(--pos)} .ivyt.out{border-top-color:var(--amber)}
.ivyt[hidden],.ivy[hidden]{display:none}
.ivl{position:relative;height:calc(var(--rows,1) * 20px);margin-top:8px}
.ivn{position:absolute;left:var(--x,0);top:calc(var(--r,0) * 20px);font:500 11px/16px var(--mono);letter-spacing:.04em;white-space:nowrap;color:var(--mut)}
.ivn.on{color:var(--gold-2)} .ivn.x{color:var(--bad)}
.ive{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font:400 11px/1.3 var(--mono);color:var(--dim)}
/* the four modes */
.modes{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
@media (min-width:600px) and (max-width:1023px){.modes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.md{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line-2);border-radius:var(--r-3);background:var(--bg-2);min-width:0}
.md.on{border-color:var(--line-gold-2);box-shadow:var(--glow-pick-1)}
.md.off{border-style:dashed}
.md-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.md-h b{font:500 15px/1.3 var(--sans);color:var(--tx)}
.md-d{font:400 13px/1.45 var(--sans);color:var(--mut);text-wrap:pretty;flex:1 0 auto}
.md-x{color:var(--amber)}
.md-t{display:block;margin-top:4px;color:var(--tx)}
.md-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.md-kv.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.md-kv>span{display:flex;flex-direction:column;justify-content:flex-end;gap:3px;min-width:0}
.md-kv i{font:500 10px/1.2 var(--mono);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.md-kv b{font:500 15px/1.2 var(--mono);color:var(--tx);white-space:nowrap;font-variant-numeric:tabular-nums}
.md-kv em{font:400 12px/1.2 var(--mono);font-style:normal;color:var(--mut);white-space:nowrap}
.md-kv b.pos,.md-kv em.pos{color:var(--pos)} .md-kv b.neg,.md-kv em.neg{color:var(--bad)}
.md-u{align-self:flex-start}
.md-u .sm{display:none}
.md-u[disabled]{cursor:default;color:var(--dim);border-style:dashed}
.md-u[disabled]:hover{border-color:var(--line-2);color:var(--dim)}
.md-n{font:400 13px/1.45 var(--sans);color:var(--amber);text-wrap:pretty}
.md:not(.off) .md-n{color:var(--mut)}
.md-d b{font-weight:500;color:var(--tx)}
.md-p{display:none}
/* six-figure sizes and money in: two columns, then the rest wraps under, never clipped (F7) */
.md-kv.long{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}
.md-kv.two.long{grid-template-columns:minmax(0,1fr)}
.md-kv.long b{white-space:normal;overflow-wrap:anywhere}
.chip.dogc,.chip.favc{background:var(--pos-bg);border-color:var(--pos-line);color:var(--pos)}
/* the size, inside the hedge block: the interval, this field and the picker share one phone screen */
.hsz{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.hsz .fld{flex:0 1 170px;min-width:112px}
.hsz .inp{min-height:44px}
.hsz .inp input{height:42px}
.hsz .hint{flex:1 1 110px;font-size:12px;padding-bottom:4px}
/* what the four sizings are */
.mdefs{border:1px solid var(--line-1);border-radius:var(--r-3);background:var(--bg-2)}
.mdefs summary{display:flex;align-items:center;min-height:44px;padding:0 14px;cursor:pointer;font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mut);list-style:none}
.mdefs summary::-webkit-details-marker{display:none}
.mdefs summary::after{content:"";width:7px;height:7px;margin-left:auto;border-right:1.5px solid var(--mut);border-bottom:1.5px solid var(--mut);transform:translateY(-2px) rotate(45deg);transition:transform var(--t-fast)}
.mdefs[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.mdefs summary:hover{color:var(--tx)}
.mdefs summary:focus-visible{outline:2px solid var(--focus,var(--gold-2));outline-offset:2px;border-radius:var(--r-3)}
.mdefs dl{display:flex;flex-direction:column;gap:10px;margin:0;padding:0 14px 4px}
.mdefs dt{font:500 14px/1.3 var(--sans);color:var(--tx)}
.mdefs dd{margin:2px 0 0;font:400 13px/1.5 var(--sans);color:var(--mut);text-wrap:pretty}
.mdefs>p{padding:8px 14px 14px;font:400 12px/1.5 var(--sans);color:var(--mut);text-wrap:pretty}
/* below 600 px the four modes are one compact list: name and chip, both nets, the sizes, and a Use button at the right,
   so the interval, the size and all four picks fit one phone screen (F4). The card sentence and figure grid are for
   wider screens; the note (why not, not distinct) stays. */
@media (max-width:599px){
  .modes{gap:0;border:1px solid var(--line-2);border-radius:var(--r-3);background:var(--bg-2);overflow:hidden}
  .md{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h u" "v u" "f f" "n n";align-items:center;gap:3px 10px;padding:9px 10px 9px 12px;border:0;border-bottom:1px solid var(--line-1);border-radius:0;background:transparent;box-shadow:none}
  .md:last-child{border-bottom:0}
  .md.on{background:var(--gold-6);box-shadow:inset 3px 0 0 var(--gold)}
  .md.off{border-style:solid}
  .md-h{grid-area:h;gap:4px 8px}
  .md-h .chip.nat{display:none} /* the name says it; Break-even, Not distinct and Not at this size stay */
  .hm-body{gap:12px}
  .md-h b{font-size:14px}
  .md-d,.md-kv{display:none}
  .md-n{grid-area:n;font-size:12px;line-height:1.4}
  .md-p{display:contents} /* the nets beside the button, the sizes under both, full width */
  .md-v{grid-area:v;display:flex;flex-wrap:wrap;gap:0 12px;min-width:0;font:500 14px/1.35 var(--mono);color:var(--mut);font-variant-numeric:tabular-nums}
  .md-v>span{white-space:nowrap}
  .md-v b{font-weight:500;color:var(--tx)} .md-v b.pos{color:var(--pos)} .md-v b.neg{color:var(--bad)}
  .md-f{grid-area:f;display:flex;flex-wrap:wrap;gap:0 10px;min-width:0;font:400 12px/1.4 var(--mono);color:var(--mut)}
  .md-f>span{white-space:nowrap}
  .md-u{grid-area:u;align-self:center;min-width:64px;padding:0 12px}
  .md-u .lg{display:none} .md-u .sm{display:inline}
}
@media (max-width:399px){.md-v{font-size:13px;gap:0 10px}.md-u{min-width:58px;padding:0 10px}}
/* the custom ratio */
.cust{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border:1px solid var(--line-1);border-radius:var(--r-3);background:var(--bg-2)}
.cust.on{border-color:var(--line-gold-2)}
.cust-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cust-h .k{font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--mut)}
.cust-h output{font:500 18px/1.2 var(--mono);color:var(--gold-2);font-variant-numeric:tabular-nums}
.cust:not(.on) .cust-h output{color:var(--mut)}
.cust-h output.yo{font-size:13px;color:var(--amber);text-align:right}
.cust.off .cust-h output{color:var(--dim)}
.cust-e{display:flex;justify-content:space-between;gap:8px;font:400 11px/1.3 var(--mono);color:var(--dim);margin-top:-6px}
.cust-o{font:400 13px/1.5 var(--sans);color:var(--mut);text-wrap:pretty}
.cust-o b{font-weight:500;color:var(--tx)} .cust-o b.pos{color:var(--pos)} .cust-o b.neg{color:var(--bad)}
.cust-o .chip{vertical-align:1px}
.cust input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;cursor:pointer}
.cust input[type=range]:disabled{cursor:default}
.cust input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:var(--r-pill);background:var(--pos-bg);border:1px solid var(--pos-line)}
.cust input[type=range]::-moz-range-track{height:10px;border-radius:var(--r-pill);background:var(--pos-bg);border:1px solid var(--pos-line)}
.cust input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-8px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);box-shadow:0 0 0 1px var(--gold)}
.cust input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);box-shadow:0 0 0 1px var(--gold)}
.cust input[type=range]:focus-visible{outline:none}
.cust input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--focus,var(--gold-2));outline-offset:3px}
.cust input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--focus,var(--gold-2));outline-offset:3px}
.cust.off input[type=range]::-webkit-slider-runnable-track{background:var(--bg-3);border-color:var(--line-2)}
.cust.off input[type=range]::-moz-range-track{background:var(--bg-3);border-color:var(--line-2)}
.cust.off input[type=range]::-webkit-slider-thumb{background:var(--dim);box-shadow:none}
.cust.off input[type=range]::-moz-range-thumb{background:var(--dim);box-shadow:none}
/* both outcomes, every mode */
.tb.hm thead th:first-child{width:30%}
.tb.hm td.lb{white-space:nowrap;text-align:left;padding-right:0}
.tb.hm tbody th .chip{margin:4px 0 0}
.tb.hm tbody th .sub{white-space:nowrap}
.tb.hm tbody th .sub+.chip{display:table}
@media (min-width:1280px){.tb.hm th,.tb.hm td{padding-inline:5px}.tb.hm thead th:first-child{width:auto}}
.tb.hm tr.rw-you th,.tb.hm tr.rw-you td{border-top:1px dashed var(--line-2)}
.cards>li.rw-you{border-top:1px dashed var(--line-2)}
.cards .ch .chs{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.cards .ch small{font:400 12px/1.3 var(--mono);color:var(--mut)}
.rs[hidden],.tbw[hidden],.cards[hidden]{display:none}

.statusbar .l{max-width:62ch}
.nw{white-space:nowrap}
.statusbar a,.nav-links a{min-width:44px;justify-content:center}
@media (max-width:359px){.ori-kv b,.cards .cg b{font-size:14px}.tog span{padding:0 8px;letter-spacing:.04em}.blk{padding:14px}.book{padding:12px}}
@media (prefers-reduced-motion:reduce){.dock{transition:none}}