/* Clover - "A. Board, dark" (DESIGN.md, row 3, 2026-09-21). One selected look, one main
   button, one secondary button. Buttons 8px, cards 12px, nothing under 44px tall. */
:root{
  --bg:#14171B; --card:#1D2127; --line:#333A44; --text:#F1EFE8; --muted:#A9AFBC;
  --acc:#57D68D; --sel:#1B4632; --onacc:#0E1A13; --bad:#F2958B; --field:#14171B;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);color-scheme:dark;
  font-family:Archivo,"Arial Narrow",-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.4}
.hidden{display:none !important}
h1,h2{margin:0;font-weight:800}
h2{font-size:22px}
button,input,select{font:inherit;color:inherit;margin:0}
button{cursor:pointer;border-radius:8px;border:1px solid transparent;background:transparent;min-height:44px;padding:0 14px;font-size:15px;font-weight:600}
button:disabled{cursor:default}
input,select{width:100%;height:44px;border-radius:8px;background:var(--field);border:1px solid var(--line);color:var(--text);padding:0 12px;font-size:15px}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
label,.sub{display:block;font-size:13px;color:var(--muted)}
.big{font-size:36px;line-height:40px;font-weight:800;font-stretch:88%;font-variant-numeric:tabular-nums}
.hint{margin:0;font-size:13px;color:var(--muted);line-height:1.45}
.empty{margin:0;font-size:15px;color:var(--muted)}
small{display:block;font-size:12px;font-weight:500;color:var(--muted)}

/* ---------- buttons ---------- */
.primary{background:var(--acc);color:var(--onacc);font-weight:700;width:100%}
.sec{border-color:var(--text);color:var(--text)}
.sec.sm,#fToggle,#fClear,#naClear,.actions .sec{border-color:var(--line)}
.ghost{color:var(--muted);padding:0 12px;font-size:14px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{min-width:44px;background:var(--card);border-color:var(--line);font-weight:500}
.chip[aria-pressed="true"],.bc[aria-pressed="true"]{background:var(--sel);border:1.5px solid var(--acc);font-weight:700}
.edit{color:var(--muted);font-weight:700;padding:0 10px}
.edit.on{color:var(--acc)}
.na{color:var(--muted);font-size:13px;min-width:44px;padding:0;flex:none}
.rm{width:44px;padding:0;flex:none;color:var(--muted);font-size:20px;font-weight:400}

/* ---------- header + tabs ---------- */
header{background:var(--card);border-bottom:1px solid var(--line)}
.hIn{max-width:1280px;margin:0 auto;height:68px;padding:0 32px;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{fill:var(--acc)}
h1{font-size:26px;font-stretch:112%;letter-spacing:-.01em}
.tabs{display:flex;gap:28px;flex-grow:1}
.tab{height:68px;padding:0 2px;border:0;border-radius:0;display:flex;align-items:center;gap:6px;font-size:16px;font-weight:500;color:var(--muted)}
.tab[aria-selected="true"]{color:var(--text);font-weight:700;box-shadow:inset 0 -3px 0 var(--acc)}
.tab .n{font-size:13px;font-weight:500;color:var(--muted)}
.tag{font-size:14px;color:var(--muted);white-space:nowrap}
.tag::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:1px}
.tag.stale{color:var(--bad)}.tag.stale::before{background:var(--bad)}

/* ---------- layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:32px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.col{display:flex;flex-direction:column;gap:24px;min-width:0}
#viewSlips{display:flex;flex-direction:column;gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
#side{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px}
#rail,#ladder{padding:20px;display:flex;flex-direction:column;gap:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.two>div{display:flex;flex-direction:column;gap:16px}
.actions{display:flex;gap:10px;flex-wrap:wrap}
@media(max-width:960px){.wrap{grid-template-columns:1fr;padding:16px}#side{position:static}.hIn{padding:0 16px;gap:16px;height:auto;flex-wrap:wrap}.tabs{gap:16px}.two{grid-template-columns:1fr}}

/* ---------- hot slips ---------- */
.hot{display:flex;flex-direction:column;gap:16px}
.hHead h2{font-size:28px;line-height:34px}
.hHead p{margin:4px 0 0;font-size:15px}
.hCtl{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.naWrap{flex-direction:row;align-items:center;gap:12px;margin-left:auto}
/* the hot-slip ticket and its menu live in hot.css (2026-09-26) */
.pks{display:flex;flex-direction:column}
.pk{display:flex;align-items:center;gap:8px;min-height:28px;min-width:0}
#rail .pk{min-height:44px}
.pk .lbl,.pk .two{flex-grow:1;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk .two{display:block}
.pk .who,.pk .mv{font-size:13px;font-weight:400;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk .mv{color:var(--text);padding:4px 0 2px}
.pk .pp{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.pp.won{color:var(--acc)}.pp.lost{color:var(--bad)}
.lg{width:20px;height:20px;flex:none;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700}
.lg img{width:20px;height:20px;object-fit:contain}
.lg i{width:20px;height:20px;border-radius:50%;font-style:normal;display:flex;align-items:center;justify-content:center;color:#fff}
.lg.ou{color:var(--muted);font-size:9px}
.pair{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:8px;font-size:13px;color:var(--muted)}
.pair .logged{color:var(--text);min-height:44px;display:flex;align-items:center}
.inbet{height:44px;border-radius:8px;background:var(--acc);color:var(--onacc);font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px}

/* ---------- filters ---------- */
.gHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.gHead>div{display:flex;align-items:baseline;gap:12px}
.gHead .sub{display:inline;font-size:15px}
#fToggle{background:var(--card);display:flex;align-items:center;gap:8px}
#fToggle .sub{display:inline;font-weight:500}
.fPanel{display:flex;flex-direction:column;gap:16px}
.fRow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.fRow2{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}
.fRow2 #fClear{margin-left:auto}
@media(max-width:800px){.fRow{grid-template-columns:1fr 1fr}}

/* ---------- the board ---------- */
.board{padding:0;overflow:hidden}
.bh,.gr{display:flex;gap:8px;padding:10px 16px}
.bh{border-bottom:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted)}
.bh .tl{flex-grow:1;text-align:center}
.tt{width:72px;flex:none}
.gr{padding:12px 16px;border-top:1px solid var(--line)}
.gr:nth-child(2){border-top:0}
.tt{font-size:13px;color:var(--muted);padding-top:13px}
.tt .fin{display:block;margin-top:4px;font-size:11px;font-weight:700;color:var(--bad)}
.tt .fin.live{color:var(--acc)}
.lines{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.tl{display:grid;grid-template-columns:minmax(0,1fr) 116px 116px 116px;gap:8px}
.tm{display:flex;align-items:center;gap:8px;height:44px;min-width:0}
.tm .rk{font-size:13px;color:var(--muted);font-weight:500}
.tm .nm{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm .ab{display:none;font-size:15px;font-weight:700;letter-spacing:.01em}
.tm .sc{margin-left:auto;font-size:16px;font-variant-numeric:tabular-nums;padding-right:6px}
.bc{height:44px;padding:0 4px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1}
.bc.na{opacity:.45;text-decoration:line-through}
.gr.done .bc{color:var(--muted);cursor:default}
.gr.done .tm .nm{color:var(--muted)}
.bc.won{border-color:var(--acc)}.bc.lost{border-color:var(--bad)}
.bc.won small{color:var(--acc)}.bc.lost small{color:var(--bad)}
.lnB{flex:none;width:64px;align-self:stretch;height:auto;border:1px solid var(--line);color:var(--muted);font-size:13px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
span.lnB{border:0}
.bh .lnB{align-self:auto;height:auto}
.gr.done .lnB{visibility:hidden}
.lnB.on{color:var(--acc);border-color:var(--acc)}
@media(max-width:800px){.tl{grid-template-columns:minmax(0,1fr) 64px 64px 64px;gap:4px}.tt{width:52px}.bh,.gr{gap:4px;padding-left:10px;padding-right:10px}
  .tm{gap:5px}.tm .nm{display:none}.tm .ab{display:inline}.lnB{width:40px}.lnB span{display:none}}

/* ---------- the My Bet rail ---------- */
.rhead{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.rhead>span{display:flex;gap:4px}
/* option B, 2026-09-26: whose bet / rows (pick, game, %, x) / Analytics / Bet Amount + Pays Out / Save Bet */
#rail{padding:16px;gap:14px}
.rsec{display:flex;flex-direction:column}
.rsec+.rsec{border-top:1px solid var(--line);padding-top:14px}
.rwho{display:grid;grid-template-columns:1fr 1fr}
.rlab{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
#rail .rhead{min-height:36px;margin-top:-6px}
.rg{font-size:13px;font-weight:700;padding:0 10px}.rg.on{color:var(--acc)}
.rk{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-height:44px}
.ou{flex:none;min-width:76px;min-height:32px;padding:0 1px;border:0;border-bottom:1.5px dotted var(--muted);border-radius:0;font-size:16px;font-weight:700;color:var(--text);text-align:left;white-space:nowrap;font-variant-numeric:tabular-nums}
.ou:hover,.ou[aria-expanded="true"]{color:var(--acc);border-bottom-color:var(--acc)}
.ou.off{border-bottom:0;display:inline-flex;align-items:center}
.gm{flex:1 1 0;min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.25;color:var(--muted);font-variant-numeric:tabular-nums}
.gm span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk .pp{font-size:16px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.rk .pp.hit,.rk .pp.won{color:var(--acc)}.rk .pp.miss,.rk .pp.lost{color:var(--bad)}
.rk .rm{width:36px}
.ped{flex-basis:100%;display:flex;gap:6px;align-items:center;padding:2px 0 8px}
.seg2{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;flex:none}
.seg2 button{border-radius:0;min-width:58px;padding:0 8px;font-size:14px}
.seg2 button[aria-pressed="true"]{background:var(--sel);color:var(--acc);font-weight:800}
.ped .lin{width:72px;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;padding:0 8px}
.ped .ok{background:var(--acc);color:var(--onacc);font-weight:800;padding:0 12px}
.rnote{flex-basis:100%;margin:-4px 0 6px;font-size:13px;color:var(--muted)}
.rnote.err{color:var(--bad)}.rnote.mv{color:var(--text)}
.rbox{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:0 12px}
.rbox .kv{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:32px;font-size:13px}
.rbox .kv b{font-size:16px;font-variant-numeric:tabular-nums}
.rbox .kv label{white-space:nowrap}
.rsec:nth-child(4) .rbox .kv{min-height:44px}
.rside{grid-column:2;grid-row:1/3;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6px;gap:2px}
.rside.r3{grid-row:1/4}
.rside .word{font-size:15px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.02em}
.rside b{font-size:18px;font-variant-numeric:tabular-nums}
.rside .sm{font-size:12px;color:var(--muted)}
.money{position:relative;display:block}
.money i{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted);pointer-events:none}
.money input{padding-left:22px;font-weight:700;font-variant-numeric:tabular-nums}
.rbox .money{width:92px;flex:none}.rbox .money input{height:40px;text-align:right;padding-right:8px}
.rsave{min-height:48px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.mbForm .fld{position:relative}
#moneyNote{position:absolute;top:100%;margin-top:4px;white-space:nowrap;font-size:13px}
.mbForm{padding-bottom:12px}
.rsign{display:flex;flex-direction:column;gap:8px}
.pos{color:var(--acc)}.neg{color:var(--bad)}.mid{color:var(--text)}

/* ---------- the full My Bet screen (row 6, mybet.js) ---------- */
:root{--great:#57D68D;--good:#9ED9A8;--coin:#E3C170;--badv:#F09A7A;--terr:#F2707A}
.mb{display:flex;flex-direction:column;gap:24px}
.mbBet{padding:20px}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fig{display:flex;flex-direction:column;gap:2px;min-width:0}
.fig .k{font-size:13px;color:var(--muted)}
.fig .v{font-size:48px;line-height:1.05;font-weight:800;font-stretch:88%;font-variant-numeric:tabular-nums;letter-spacing:-.01em;white-space:nowrap}
.fig .s{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.fig.vd .v{color:var(--vc)}
#verdict:empty::before{content:"—";color:var(--muted)}
.meter{position:relative;height:14px;background:var(--bg);border-radius:7px;margin:30px 0 6px}
.mHas{position:absolute;inset:0 auto 0 0;border-radius:7px;background:var(--vc)}
.mNeed{position:absolute;top:-6px;bottom:-6px;width:3px;margin-left:-1px;background:var(--text);border-radius:2px}
.mNeed::after{content:"needs";position:absolute;top:-19px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted)}
.scale{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.why{margin:14px 0 0;font-size:15px;max-width:64ch}
.why:empty{display:none}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:16px}
.nums div{background:var(--card);padding:10px 12px}
.nums span{display:block;font-size:12px;color:var(--muted)}
.nums strong{font-size:20px;font-stretch:88%;font-variant-numeric:tabular-nums}
.mbForm{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.mbForm input{width:130px;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.mbForm .go{margin-left:auto;display:flex;gap:8px}
.mbForm .primary{width:auto;padding:0 24px}
.primary:disabled{opacity:.45}
.placed{margin-top:18px;padding:14px 16px;border-radius:8px;background:var(--sel);border:1.5px solid var(--acc);display:grid;gap:12px}
.placed .row{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.placed .acts{display:flex;gap:8px;flex-wrap:wrap}
.placed .primary{width:auto;padding:0 24px}
.placed .acts:empty{display:none}
.placed .check{color:var(--acc);font-weight:800;margin-right:4px}
.placed.err{background:#2E2224;border-color:var(--terr)}
.placed.void{background:var(--card);border:1.5px dashed var(--muted)}
.signin{display:grid;gap:8px;padding-top:12px;border-top:1px solid #2E5A43}
.signin .line{display:flex;gap:8px;flex-wrap:wrap}
.signin input{flex:1 1 240px;width:auto;min-width:0;min-height:48px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:0 12px;color:var(--text);font:inherit}
.placed.hidden{display:none}
.placed b{display:block;margin-bottom:2px}
.stamp{margin:0;font-size:13px;font-weight:600;color:var(--acc);text-align:center}
.mbHead{padding:12px 16px 4px}
.mbHead h2 .sub{display:inline;font-size:18px}
.mbPicks .gw{border-top:1px solid var(--line)}
.mbPicks .gw .gr{border-top:0}
.notes{display:flex;flex-direction:column;gap:6px;padding:0 16px 12px 96px}
.flag{font-size:14px;border-radius:8px;padding:8px 10px;background:var(--bg);color:var(--muted)}
.flag b{color:var(--text)}
.flag.mv{color:var(--text);box-shadow:inset 3px 0 0 var(--coin)}
.flag.ed{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--text);padding:0 0 0 10px}
.notes .pair{border:0;padding:0 0 0 10px;background:var(--bg);border-radius:8px}
.sWord{font-size:24px;font-weight:800}
#sGrid{margin-top:8px}
.axT{font-size:11px;color:var(--muted);margin:0 0 4px 54px}
.axW{display:flex;align-items:center;gap:6px}
.axL{font-size:11px;color:var(--muted);writing-mode:vertical-rl;transform:rotate(180deg)}
.sgrid{display:grid;grid-template-columns:auto repeat(7,30px);gap:4px;align-items:center;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.sgrid .c{width:30px;height:30px;border-radius:6px}
.sgrid .c.mid{outline:2px solid var(--text);outline-offset:1px}
.sgrid .ax{text-align:center}.sgrid .ay{text-align:right;padding-right:4px}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);margin-top:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
#ladHint{padding:20px;font-size:14px}
@media(max-width:800px){.notes{padding:0 10px 12px}}
@media(max-width:620px){.trio{grid-template-columns:1fr 1fr}.fig.vd{grid-column:1/-1}.fig .v{font-size:38px}.nums{grid-template-columns:1fr 1fr}.mbForm .go{margin-left:0}}

/* ---------- the ladder (ladder.js): a card in the side column, on every screen ---------- */
#ladder .rhead h2{font-size:18px}
.close{width:44px;padding:0;border:1px solid var(--line);font-size:20px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.seg .chip{min-height:44px;font-size:14px;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ladder .hint{margin-top:-8px}
.lfoot{display:flex;align-items:center;gap:10px}
.lfoot .ghost{flex:none;padding:0 8px}
.lfoot .hint{margin:0}
.ladder td.dk{color:var(--muted)}

/* ---------- the ladder table ---------- */
.ladder{width:100%;border-collapse:collapse;font-size:15px;margin-top:8px}
.ladder th{color:var(--muted);font-weight:500;font-size:13px;text-align:right;padding:6px 4px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.ladder td{text-align:right;padding:0 4px;border-bottom:1px solid var(--line)}
.ladder th:first-child,.ladder td:first-child{text-align:left}
.ladder tr.base td{background:var(--bg);font-weight:600}
.ladder tr.cur td{background:var(--sel);box-shadow:inset 0 1.5px var(--acc),inset 0 -1.5px var(--acc)}
.ladder td.p{font-weight:700;font-size:17px}
.ladder button.use{width:100%;text-align:left;border:0;padding:10px 4px;font:inherit;border-radius:0;min-height:44px}
.ladder button.use .sub{display:inline;font-weight:400}
.scroll{overflow:auto;max-height:60vh}
#ladder .scroll{max-height:46vh}