/* ═══════════════════════════════════════════════════════════════════════════
   5MinuteBot tools: /calculator and /replay (2026-09-16)
   Loaded AFTER /politics.css, which supplies the tokens, nav, type and panels.
   This file only adds form controls, the calculator results and the replay viewer.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Shared ─── */
.tl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;align-items:start;margin-top:2.4rem}
.fld{padding:16px 18px;border-top:1px solid var(--hair)}
.fld:first-of-type{border-top:0}
.fld-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.fld-h label,.fld-h .lab{font-size:11.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--t-mid)}
.fld-h output{color:var(--t-hi);font-size:18px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.fld p{margin:.45rem 0 0;font-size:12px;line-height:1.6;color:var(--t-low)}
.fld p b{font-weight:500;color:var(--t-mid)}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;margin:10px 0 0;background:none;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--amber) var(--fill,50%),rgba(200,200,255,.1) var(--fill,50%))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(200,200,255,.1)}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--amber)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:50%;background:#a78bfa;border:3px solid var(--ink);box-shadow:0 0 0 1px var(--amber)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#a78bfa;border:3px solid var(--ink);box-shadow:0 0 0 1px var(--amber)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--amber-hi)}

.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;margin-top:10px;padding:2px;border-radius:9px;background:rgba(200,200,255,.05);border:1px solid var(--hair)}
.seg button{padding:8px 6px;border:0;border-radius:7px;background:none;cursor:pointer;font-size:12.5px;color:var(--t-mid);line-height:1.3}
.seg button small{display:block;font-size:11px;color:var(--t-low)}
.seg button:hover{color:var(--t-hi)}
.seg button[aria-pressed="true"]{background:var(--panel-2);color:var(--t-hi);box-shadow:inset 0 0 0 1px var(--hair-2)}
.seg button[aria-pressed="true"] small{color:var(--amber-hi)}
.chk{display:flex;gap:10px;align-items:flex-start;margin-top:10px;font-size:12.5px;color:var(--t-mid);cursor:pointer}
.chk input{margin:3px 0 0;accent-color:var(--amber)}

/* ─── Calculator results ─── */
.res-top{padding:22px 18px 18px}
.res-top .lab{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t-low)}
.res-big{display:block;margin-top:6px;font-size:clamp(2.2rem,5.4vw,3.4rem);font-weight:500;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--t-hi)}
.res-sub{margin:.7rem 0 0;font-size:12.5px;color:var(--t-low)}
.res-sub b{font-weight:500;color:var(--t-mid)}
.periods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair)}
.periods div{padding:14px 18px;border-left:1px solid var(--hair)}
.periods div:first-child{border-left:0}
.periods span{display:block;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--t-low)}
.periods b{display:block;margin-top:4px;font-size:19px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--t-hi)}
.periods small{display:block;margin-top:2px;font-size:11.5px;color:var(--t-low);font-variant-numeric:tabular-nums}
.brk{padding:4px 18px 12px;border-top:1px solid var(--hair)}
.brk div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);font-size:12.5px;color:var(--t-low)}
.brk div:last-child{border-bottom:0}
.brk b{font-weight:500;color:var(--t-hi);font-variant-numeric:tabular-nums;white-space:nowrap}
.brk .tot{color:var(--t-mid)} .brk .tot b{font-weight:600}
.be{display:flex;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--t-mid)}
.be b{font-size:20px;font-weight:500;letter-spacing:-.03em;color:var(--amber-hi);font-variant-numeric:tabular-nums}
.chart-wrap{padding:6px 10px 12px;border-top:1px solid var(--hair)}
.chart-wrap svg{display:block;width:100%;height:auto;overflow:visible}
.chart-cap{display:flex;justify-content:space-between;gap:12px;padding:10px 8px 0;font-size:11.5px;color:var(--t-low)}
.warn{margin-top:18px;padding:14px 18px;border:1px solid rgba(255,84,112,.28);border-radius:12px;background:rgba(255,84,112,.05);font-size:12.5px;line-height:1.65;color:var(--t-mid)}
.warn b{color:var(--t-hi);font-weight:500}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.how div{padding:16px 18px}
.how h3{margin:0 0 .35rem;font-size:13px;font-weight:600;color:var(--t-hi)}
.how p{margin:0;font-size:12.5px;line-height:1.65;color:var(--t-low)}
.how code{font:inherit;color:var(--amber-hi)}

/* ─── Replay ─── */
.rp-totals{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2rem}
.rp-layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:18px;align-items:start;margin-top:18px}
.rp-list{max-height:calc(100vh - 120px);overflow:auto;position:sticky;top:80px;scrollbar-width:thin;scrollbar-color:#4f4e68 transparent}
.rp-list .panel-h{position:sticky;top:0;z-index:2;background:var(--panel);border-radius:14px 14px 0 0}
.rp-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:center;width:100%;padding:11px 16px;border:0;border-top:1px solid var(--hair);background:none;text-align:left;cursor:pointer;color:var(--t)}
.rp-item:hover{background:rgba(200,200,255,.03)}
.rp-item[aria-current="true"]{background:rgba(124,92,255,.07);box-shadow:inset 2px 0 0 var(--amber)}
.rp-item .tm{font-size:12.5px;color:var(--t-hi);font-variant-numeric:tabular-nums}
.rp-item .tm small{display:block;font-size:11px;color:var(--t-low)}
.rp-item .ln{grid-column:2/4;font-size:11.5px;color:var(--t-low);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-item .sm{font-size:12px;color:var(--t-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.tag.won{color:var(--up)} .tag.lost{color:var(--down)} .tag.skip{color:var(--t-low)} .tag.pend{color:var(--amber-hi)}
.rp-more{display:block;width:100%;padding:12px;border:0;border-top:1px solid var(--hair);background:none;cursor:pointer;font-size:12.5px;color:var(--amber-hi)}
.rp-more:hover{color:#a78bfa}

.rp-view{min-height:520px}
.rp-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 18px;padding:18px 18px 14px;border-bottom:1px solid var(--hair)}
.rp-head h2{margin:0;color:var(--t-hi);font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:600;letter-spacing:-.03em}
.rp-head p{margin:.25rem 0 0;font-size:12px;color:var(--t-low)}
.rp-ctl{display:flex;align-items:center;gap:6px}
.rp-btn{display:inline-grid;place-items:center;min-width:36px;height:34px;padding:0 10px;border:1px solid var(--hair-2);border-radius:8px;background:var(--panel-2);cursor:pointer;color:var(--t-hi);font-size:12.5px}
.rp-btn:hover:not(:disabled){border-color:rgba(167,139,250,.5)}
.rp-btn:disabled{opacity:.35;cursor:default}
.rp-btn svg{width:14px;height:14px}
.rp-btn.play{padding:0 14px;color:#ffffff;border-color:transparent;background:linear-gradient(180deg,#9277ff,#7c5cff);font-weight:600}

/* round clock: 0–300s */
.clock{position:relative;margin:18px 18px 4px;height:46px}
.clock .bar{position:absolute;left:0;right:0;top:20px;height:6px;border-radius:3px;background:rgba(200,200,255,.06)}
.clock .cut{position:absolute;top:20px;height:6px;background:repeating-linear-gradient(135deg,rgba(200,200,255,.07) 0 4px,transparent 4px 8px);border-radius:0 3px 3px 0}
.clock .prog{position:absolute;left:0;top:20px;height:6px;border-radius:3px;background:linear-gradient(90deg,rgba(124,92,255,.35),var(--amber));transition:width .35s ease}
.clock .tick{position:absolute;top:14px;width:12px;height:18px;margin-left:-6px;border:0;padding:0;background:none;cursor:pointer}
.clock .tick::after{content:"";position:absolute;left:5px;top:0;width:2px;height:18px;border-radius:1px;background:var(--t-low)}
.clock .tick.on::after{background:var(--amber-hi);box-shadow:0 0 0 3px rgba(124,92,255,.18)}
.clock .buy{position:absolute;top:0;margin-left:-4px;width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 3px rgba(34,227,159,.18)}
.clock .lbl{position:absolute;top:32px;font-size:10.5px;color:var(--t-low);transform:translateX(-50%);white-space:nowrap}
.clock .lbl.l0{transform:none} .clock .lbl.l300{transform:translateX(-100%)}

.step-cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding:10px 18px 0;font-size:12px;color:var(--t-low)}
.step-cap b{font-weight:500;color:var(--t-hi)}

.coins{margin:12px 18px 0;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.coin{display:grid;grid-template-columns:54px minmax(0,1fr) 78px 64px 64px;gap:12px;align-items:center;padding:9px 14px;border-top:1px solid var(--hair);font-size:12.5px;font-variant-numeric:tabular-nums}
.coin:first-child{border-top:0}
.coin.hd{padding-block:7px;background:rgba(200,200,255,.02);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--t-low)}
.coin .nm{font-weight:600;color:var(--t-hi)}
.coin .nm small{display:block;font-size:10px;font-weight:400;letter-spacing:.04em;color:var(--t-low);text-transform:uppercase}
.coin.agree .nm small{color:var(--t-mid)}
.coin.target{background:rgba(124,92,255,.07);box-shadow:inset 2px 0 0 var(--amber)}
.coin.target .nm small{color:var(--amber-hi)}
.coin .px{text-align:right;color:var(--t-mid)}
.coin .px.pick{color:var(--amber-hi);font-weight:600}
.coin .mv{text-align:right}
.dv{position:relative;height:8px;border-radius:4px;background:rgba(200,200,255,.05)}
.dv::before{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--hair-2)}
.dv i{position:absolute;top:0;bottom:0;border-radius:4px;transition:left .35s ease,width .35s ease}
.dv .band{position:absolute;top:0;bottom:0;background:rgba(200,200,255,.05)}

.agree-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:14px 18px 0;font-size:12.5px;color:var(--t-mid)}
.pips{display:flex;gap:4px}
.pips i{width:16px;height:8px;border-radius:2px;background:rgba(200,200,255,.08)}
.pips i.u{background:var(--up)} .pips i.d{background:var(--down)} .pips i.need{box-shadow:inset 0 0 0 1px var(--t-low)}

.decide{margin:14px 18px 0;padding:14px 16px;border-radius:12px;border:1px solid var(--hair-2);background:var(--panel-2);font-size:13.5px;line-height:1.65;color:var(--t)}
.decide .k{display:block;margin-bottom:4px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--t-low)}
.decide.enter{border-color:rgba(34,227,159,.35);background:rgba(34,227,159,.05)}
.decide.enter .k{color:var(--up)}
.decide.won{border-color:rgba(34,227,159,.4);background:rgba(34,227,159,.07)}
.decide.lost{border-color:rgba(255,84,112,.4);background:rgba(255,84,112,.07)}
.decide.won .k{color:var(--up)} .decide.lost .k{color:var(--down)}
.decide b{font-weight:600;color:var(--t-hi)}
.results{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;margin:14px 18px 0;overflow:hidden;border:1px solid var(--hair);border-radius:12px;background:var(--hair)}
.results div{padding:10px 8px;text-align:center;background:var(--ink);font-size:11px;color:var(--t-low)}
.results b{display:block;margin-top:2px;font-size:13px;font-weight:600}
.buys{margin:10px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--t-mid)}
.buys li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px dashed var(--hair-2);font-variant-numeric:tabular-nums}
.rp-foot{padding:16px 18px 18px;font-size:11.5px;line-height:1.65;color:var(--t-low)}
.kbd{display:inline-block;padding:0 5px;border:1px solid var(--hair-2);border-radius:4px;font-size:10.5px;color:var(--t-mid)}

@media (max-width:980px){
  .tl-grid,.rp-layout{grid-template-columns:minmax(0,1fr)}
  .rp-list{position:static;max-height:380px}
  .how{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .nav-r .l.opt{display:none}
  .coin{grid-template-columns:44px minmax(0,1fr) 64px 50px 50px;gap:8px;padding:8px 10px;font-size:11.5px}
  .coins,.decide,.agree-row,.results{margin-inline:12px}
  .clock{margin-inline:14px}
  .results{grid-template-columns:repeat(3,minmax(0,1fr))}
  .periods div{padding:12px 10px}
  .periods b{font-size:15px}
  .rp-head{padding:14px 12px}
}
@media (prefers-reduced-motion:reduce){.clock .prog,.dv i{transition:none}}

/* fixes after first render */
.rp-totals .stat b span{display:inline;font-size:inherit;letter-spacing:inherit;text-transform:none}
@media (max-width:420px){.btn-go svg{display:none}.nav-r .l{padding:.45rem .55rem}.brand{gap:.45rem}}
@media (max-width:560px){
  .periods{grid-template-columns:minmax(0,1fr)}
  .periods div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:0 12px;border-left:0;border-top:1px solid var(--hair)}
  .periods div:first-child{border-top:0}
  .periods b{grid-row:span 2;text-align:right;grid-column:2}
  .periods span,.periods small{grid-column:1}
  .coin.hd .mvh{font-size:0} .coin.hd .mvh::after{content:"Since open";font-size:10.5px}
}

/* ─── 5MinuteBot theme (ported from 5mtbot 20260916) ─── */
.coins,.decide,.results,.warn,.tt-live{border-radius:14px}