/* Shuntway — the line. Ground + one lime, a stack of rungs, a thumb bar. */
:root{
  --ground:#0B0F0A; --panel:#131A10; --edge:#1F2A19; --edge2:#2C3A22;
  --ink:#ECF3E2; --dim:#7E8C73; --dimmer:#4E5A46; --live:#CDFF3A;
  --rung:56px; --bar:58px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground); color:var(--ink);
  font:400 15px/1.45 Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  font-variant-numeric:tabular-nums;
  padding-bottom:calc(var(--bar) + 96px + env(safe-area-inset-bottom));
  min-height:100vh; overflow-x:hidden;
}
b,strong{font-weight:700}
a{color:inherit;text-decoration:none}
::selection{background:var(--live);color:#0B0F0A}

/* ---- the strip over the line ---- */
.bell{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:16px 14px 12px}
.bell h1{font:800 26px/1 Syne,Inter,sans-serif;letter-spacing:-.02em}
.bell .phase{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--live)}
.bell .phase.shut{color:var(--dim)}
.bell .clock{margin-left:auto;font:800 26px/1 Syne,Inter,sans-serif;color:var(--live)}
.bell .clock.shut{color:var(--dim)}
.strap{padding:0 14px 14px;color:var(--dim);font-size:13.5px;max-width:42ch}
.strap b{color:var(--ink)}
.strap a{color:var(--live);white-space:nowrap}
.potstrip{display:flex;gap:18px;padding:0 14px 14px;color:var(--dim);font-size:12.5px}
.potstrip b{display:block;color:var(--ink);font:700 17px/1.2 Inter,sans-serif;margin-top:2px}
.potstrip b.big{color:var(--live)}

/* ---- the line itself ---- */
.ranks{list-style:none;padding:0 10px}
.rung{
  position:relative;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;
  min-height:var(--rung);padding:8px 12px 8px 8px;margin-bottom:6px;
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;overflow:hidden;
}
.rung.fresh{animation:settleIn .3s ease both}
.rung::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--live);opacity:calc(var(--r) / 8)}
.rung.cold{background:#0E140C;border-color:#18200F}
.rung.cold::before{background:var(--dimmer);opacity:.5}
.rung.mine{border-color:var(--live);box-shadow:0 0 0 1px var(--live) inset,0 6px 22px -14px var(--live)}
.rung.bumped{animation:bump .42s cubic-bezier(.3,1.5,.5,1) both}
@keyframes settleIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes bump{0%{transform:translateY(10px) scale(.99)}60%{transform:translateY(-2px)}100%{transform:none}}
.pno{font:800 20px/1 Syne,Inter,sans-serif;text-align:center;color:var(--live)}
.rung.cold .pno{color:var(--dimmer)}
.who{display:flex;flex-direction:column;gap:3px;min-width:0}
.who .addr{font-size:13.5px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .addr .tag{color:var(--live);font-weight:700}
.who .sub{font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tally{text-align:right;line-height:1.1}
.tally .pts{font:800 19px/1 Syne,Inter,sans-serif}
.tally .rate{display:block;margin-top:4px;font-size:11px;color:var(--dim);letter-spacing:.04em}
.rung.cold .tally .pts{color:var(--dimmer)}
.shunt{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:8px;padding:11px 14px;border:0;border-radius:9px;width:100%;
  background:var(--live);color:#0B0F0A;font:700 14px/1 Inter,sans-serif;letter-spacing:.02em;cursor:pointer;
}
.shunt:disabled{background:var(--edge2);color:var(--dim);cursor:default}
.shunt .lede{display:flex;align-items:center;gap:8px}
.shunt .chev{font-size:17px;line-height:1}
.gap{display:flex;align-items:center;gap:8px;margin:2px 10px 8px;color:var(--dimmer);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.gap::before,.gap::after{content:"";flex:1;height:1px;background:var(--edge)}

.hollow{margin:6px 10px 0;padding:26px 18px;border:1px dashed var(--edge2);border-radius:12px;text-align:center;color:var(--dim)}
.hollow b{display:block;font:800 19px/1.2 Syne,Inter,sans-serif;color:var(--ink);margin-bottom:6px}

/* ---- the ladder key + feed ---- */
.ladderkey{margin:18px 10px 0;padding:14px;background:var(--panel);border:1px solid var(--edge);border-radius:12px}
.ladderkey h2,.movefeed h2,.slab h2{font:800 12px/1.5 Syne,Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.steps{display:flex;align-items:flex-end;gap:5px;height:66px;margin-top:20px}
.step{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--live),rgba(205,255,58,.35));position:relative}
.step.nil{background:var(--edge);min-height:3px}
.step span{position:absolute;top:-16px;left:0;right:0;text-align:center;font-size:10px;color:var(--dim)}
.stepfoot{display:flex;gap:5px;margin-top:7px}
.stepfoot i{flex:1;text-align:center;font-style:normal;font-size:10.5px;color:var(--dimmer)}
.keyline{margin-top:12px;font-size:13px;color:var(--dim)}
.keyline b{color:var(--ink)}

.movefeed{margin:18px 10px 0}
.mv{display:flex;align-items:baseline;gap:8px;padding:9px 2px;border-bottom:1px solid var(--edge);font-size:13px}
.mv:last-child{border-bottom:0}
.mv .k{flex:0 0 58px;font:800 10px/1.6 Syne,Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--live)}
.mv .k.dull{color:var(--dim)}
.mv .t{margin-left:auto;color:var(--dimmer);font-size:11.5px}
.mv em{font-style:normal;color:var(--dim)}

/* ---- slabs (rules, ledger, seat) ---- */
.slab{margin:14px 10px;padding:16px;background:var(--panel);border:1px solid var(--edge);border-radius:12px}
.slab p{color:var(--dim);font-size:14px;margin-top:8px}
.slab p b{color:var(--ink)}
.lede{padding:18px 14px 4px}
.lede h1{font:800 30px/1.06 Syne,Inter,sans-serif;letter-spacing:-.025em;max-width:16ch}
.lede p{margin-top:12px;color:var(--dim);font-size:15px;max-width:44ch}
.numbered{list-style:none;counter-reset:n;margin-top:6px}
.numbered li{counter-increment:n;position:relative;padding:11px 0 11px 34px;border-bottom:1px solid var(--edge);font-size:14px;color:var(--dim)}
.numbered li:last-child{border-bottom:0}
.numbered li b{color:var(--ink)}
.numbered li::before{content:counter(n);position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;background:var(--live);color:#0B0F0A;font:800 12px/22px Syne,Inter,sans-serif;text-align:center}
.pastrow{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--edge)}
.pastrow:last-child{border-bottom:0}
.pastrow .n{font:800 15px/1 Syne,Inter,sans-serif;color:var(--live)}
.pastrow .d{font-size:12.5px;color:var(--dim)}
.pastrow .v{text-align:right;font:700 15px/1.2 Inter,sans-serif}
.pastrow .v small{display:block;font-weight:400;font-size:11px;color:var(--dimmer)}

/* ---- the one action ---- */
.actdock{
  position:fixed;left:0;right:0;bottom:calc(var(--bar) + env(safe-area-inset-bottom));z-index:8;
  padding:10px 10px 12px;background:linear-gradient(180deg,rgba(11,15,10,0),var(--ground) 32%);
}
.mainflow,.sideflow{display:contents}
.take{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:16px;border:0;border-radius:12px;background:var(--live);color:#0B0F0A;
  font:800 16px/1 Syne,Inter,sans-serif;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 14px 34px -18px var(--live);
}
.take:disabled{background:var(--edge2);color:var(--dim);box-shadow:none;cursor:default}
.take small{font:500 12px/1 Inter,sans-serif;opacity:.7}

/* ---- thumb bar ---- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;gap:2px;
  height:calc(var(--bar) + env(safe-area-inset-bottom));padding:0 8px env(safe-area-inset-bottom);
  background:rgba(11,15,10,.94);backdrop-filter:blur(10px);border-top:1px solid var(--edge);
}
.tabmark{display:flex;align-items:center;gap:7px;padding-right:8px;margin-right:2px}
.tabmark b{font:800 13px/1 Syne,Inter,sans-serif;letter-spacing:.01em}
.tabmark img{border-radius:6px}
.tab{padding:9px 9px;font-size:12.5px;color:var(--dim);border-radius:8px}
.tab.on{color:var(--live);background:rgba(205,255,58,.1)}
.plug{margin-left:auto;padding:9px 12px;border:1px solid var(--edge2);border-radius:9px;background:transparent;color:var(--ink);font:500 12.5px Inter,sans-serif;cursor:pointer}
.plug.on{border-color:var(--live);color:var(--live)}

@media(hover:hover){
  .tab:hover{color:var(--ink);background:rgba(236,243,226,.05)}
  .plug:hover{border-color:var(--live);color:var(--live)}
  .take:not(:disabled):hover{filter:brightness(1.08)}
  .shunt:not(:disabled):hover{filter:brightness(1.08)}
  .rung:not(.mine):hover{border-color:var(--edge2)}
  .who .addr a:hover,.mv a:hover{color:var(--live)}
  .fineprint .outs a:hover{border-color:var(--dim);color:var(--ink)}
}

/* ---- footer + flash ---- */
.fineprint{margin:22px 10px 4px;padding-top:14px;border-top:1px solid var(--edge);color:var(--dimmer);font-size:12px}
.fineprint code{display:block;margin:7px 0;word-break:break-all;color:var(--dim);font:400 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.fineprint .outs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.fineprint .outs a{padding:8px 11px;border:1px solid var(--edge2);border-radius:8px;color:var(--dim);font-size:12px}
.fineprint .outs a.buy{border-color:var(--live);color:var(--live)}
.flash{
  position:fixed;left:10px;right:10px;bottom:calc(var(--bar) + 78px);z-index:20;
  padding:12px 14px;border-radius:10px;background:var(--live);color:#0B0F0A;font-weight:700;font-size:13.5px;text-align:center;
}

/* ---- tablet: one column, still thumb-driven, more air and bigger type ---- */
@media(min-width:720px){
  :root{--rung:64px}
  .stage{max-width:660px;margin:0 auto;padding:6px 6px 0}
  .bell h1{font-size:32px}
  .bell .clock{font-size:32px}
  .strap{font-size:15px}
  .potstrip{gap:26px;font-size:13px}
  .potstrip b{font-size:19px}
  .rung{padding:10px 16px 10px 10px;border-radius:14px}
  .pno{font-size:23px}
  .tally .pts{font-size:22px}
  .actdock{max-width:660px;margin:0 auto;bottom:calc(var(--bar) + 8px);padding:10px 6px 12px}
  .lede h1{font-size:40px}
  .lede p,.slab p{font-size:15px}
  .tabbar{padding:0 max(8px,calc((100% - 660px) / 2)) env(safe-area-inset-bottom)}
}

/* ---- desktop: the line on the left, the action and the reading matter beside it ---- */
@media(min-width:1024px){
  body{padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom))}
  .mainflow,.sideflow{display:block}
  .stage{
    display:grid;grid-template-columns:minmax(0,1fr) 352px;gap:28px;align-items:start;
    max-width:1180px;margin:0 auto;padding:30px 24px 44px;
  }
  .stage.solo{display:block;max-width:780px;padding:30px 24px 48px}
  .mainflow{min-width:0}
  .sideflow{display:flex;flex-direction:column;gap:16px}
  .bell,.potstrip,.strap{padding-left:2px;padding-right:2px}
  .bell{padding-top:0}
  .bell h1{font-size:36px}
  .bell .clock{font-size:36px}
  .ranks{padding:0}
  .rung{grid-template-columns:44px minmax(0,1fr) auto auto;gap:14px;padding:12px 18px 12px 12px}
  .who .addr{font-size:15px}
  .who .sub{font-size:12.5px}
  .pno{font-size:26px}
  .tally .pts{font-size:24px}
  .shunt{grid-column:auto;width:auto;margin-top:0;margin-left:14px;gap:14px}
  .gap{margin:6px 0 10px}
  .actdock{position:sticky;top:30px;z-index:5;left:auto;right:auto;bottom:auto;max-width:none;margin:0;padding:0;background:none}
  .ladderkey,.movefeed,.slab{margin:0}
  .movefeed{max-height:430px;overflow-y:auto;padding-right:4px}
  .fineprint{margin:4px 0 0}
  .hollow{margin:6px 0 0}
  .lede{padding:0 0 4px}
  .lede h1{font-size:46px;max-width:18ch}
  .flash{left:auto;right:24px;bottom:calc(var(--bar) + 24px);max-width:360px}
  .tabbar{padding:0 max(24px,calc((100% - 1180px) / 2)) env(safe-area-inset-bottom)}
  .tabmark b{font-size:14px}
  .tab{padding:9px 13px;font-size:13px}
}

/* ---- wide: hold the measure, let the line breathe ---- */
@media(min-width:1440px){
  .stage{grid-template-columns:minmax(0,1fr) 380px;gap:34px;max-width:1280px}
  .tabbar{padding:0 max(24px,calc((100% - 1280px) / 2)) env(safe-area-inset-bottom)}
  .rung{padding:14px 20px 14px 14px;gap:16px}
  .who .addr{font-size:15.5px}
}