/* Rotewell — the bench. Cut-paper collage on charcoal; one acid tab. Built for this drop. */
:root{
  --ground:#0B0B0C; --panel:#141416; --ridge:#232326; --paper:#D9D3C6; --news:#9E9A90;
  --ink:#EFEAE1; --dim:#8C877E; --tab:#C8F24B; --warm:#E4713B; --shadow:0 10px 0 -4px rgba(0,0,0,.65);
  --measure:1180px; --railw:124px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:400 16px/1.5 'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit}
code{font:600 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
h1,h2,h3{font-family:'Archivo Black',Impact,system-ui,sans-serif;font-weight:400;letter-spacing:-.015em;margin:0}
em{font-style:normal;color:var(--tab)}
button,input{font:inherit;color:inherit}

/* ---- the rail: the only fixed chrome. Buy lives here at every width. ---- */
#rail{
  position:fixed; z-index:40; left:0; right:0; bottom:0; height:64px;
  display:flex; align-items:center; gap:12px; padding:0 12px;
  background:#0E0E10; border-top:2px solid var(--ridge);
}
#rail .mark{display:flex;align-items:center;gap:8px;text-decoration:none;flex:0 0 auto}
#rail .mark img{width:30px;height:30px;border-radius:50%;display:block}
#rail .mark span{font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:.01em}
.railmid{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.1}
.railk{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.railmid b{font-family:'Archivo Black',sans-serif;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rail .pill{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:104px; padding:7px 14px; text-decoration:none; line-height:1.1;
  background:var(--tab); color:#0B0B0C; border:2px solid #0B0B0C; box-shadow:3px 3px 0 rgba(200,242,75,.25);
}
#rail .pill b{font-family:'Archivo Black',sans-serif;font-size:14px}
#rail .pill .buyk{font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.72}
#rail .pill.cold{background:var(--ridge);color:var(--dim);box-shadow:none}
#rail .pill.cold b{color:var(--news)}

#wrap{max-width:var(--measure);margin:0 auto;padding:0 16px 96px}

/* ---- the torn title slab ---- */
#top{padding:22px 0 8px}
.slab{
  position:relative;background:var(--panel);border:2px solid var(--ridge);padding:20px 18px 16px;
  clip-path:polygon(0 6px,3% 0,17% 5px,34% 0,51% 6px,68% 1px,84% 6px,100% 0,100% 100%,0 100%);
}
.kick{margin:0 0 10px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--news)}
.slab h1{font-size:clamp(25px,7.2vw,40px);line-height:1.02}
.lede{margin:12px 0 0;max-width:62ch;color:var(--dim);font-size:14.5px}
.lede b{color:var(--ink);font-weight:800}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tabs a,.tabs button{
  padding:7px 12px;text-decoration:none;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;border:2px solid var(--ridge);color:var(--dim);cursor:pointer;
}
.tabs a.on{background:var(--paper);border-color:var(--paper);color:#0B0B0C;font-weight:800}
.tabs button.live{border-color:var(--tab);color:var(--tab)}

/* ---- stage ---- */
#stage{display:block;margin-top:18px}
#bench,#side{min-width:0}
#side{margin-top:22px}

.panel{background:var(--panel);border:2px solid var(--ridge);padding:16px 14px;margin-bottom:16px}
.panel>h2{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--news)}
.note{margin:8px 0 0;color:var(--dim);font-size:13.5px}
.quiet{color:var(--news);font-size:13px;margin:10px 0 0}

/* ---- the three dials ---- */
.dials{margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.dialrow{
  display:grid;grid-template-columns:1fr;gap:8px;background:#0F0F11;border:2px solid var(--ridge);
  padding:10px 10px 11px;cursor:pointer;user-select:none;
}
.dialrow:focus-visible{outline:3px solid var(--tab);outline-offset:2px}
.dialk{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--news)}
.throw{position:relative;display:grid;grid-template-columns:1fr 1fr;height:50px;background:#0B0B0C;border:2px solid var(--ridge)}
.throw span{
  display:flex;align-items:center;justify-content:center;font-family:'Archivo Black',sans-serif;
  font-size:15px;letter-spacing:.06em;color:var(--dim);z-index:2;transition:color .18s ease;
}
.tabpaper{
  position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 4px);background:var(--paper);
  z-index:1;transition:transform .22s cubic-bezier(.2,.9,.25,1),background .22s ease;
  clip-path:polygon(0 4%,96% 0,100% 12%,98% 52%,100% 91%,93% 100%,4% 97%,0 88%);
}
.dialrow[data-on="1"] .tabpaper{transform:translateX(calc(100% + 2px));background:var(--tab)}
.dialrow[data-on="0"] .throw span:first-child,
.dialrow[data-on="1"] .throw span:last-child{color:#0B0B0C}

/* ---- the composed rote ---- */
.rote{
  margin-top:16px;background:#0F0F11;border:2px solid var(--tab);padding:15px 14px;
  box-shadow:5px 5px 0 rgba(200,242,75,.16);
}
.rote .rk{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--news)}
.rote h3{font-family:'Archivo Black',sans-serif;font-size:clamp(24px,6.6vw,34px);color:var(--tab);margin:6px 0 2px;line-height:1}
.rote.flip h3{animation:flip .3s ease}
@keyframes flip{from{transform:rotateX(78deg);opacity:.15}to{transform:none;opacity:1}}
.rote .gloss{color:var(--ink);font-size:14px}
.roteline{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;padding-top:12px;border-top:2px solid var(--ridge)}
.roteline div{line-height:1.15}
.roteline .tag{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--news)}
.roteline b{font-family:'Archivo Black',sans-serif;font-size:19px}
.hot{color:var(--tab)}.cool{color:var(--warm)}

/* ---- commit ---- */
.commit{display:flex;gap:8px;margin-top:14px}
.commit input{
  flex:1 1 auto;min-width:0;background:#0B0B0C;border:2px solid var(--ridge);padding:13px 12px;
  font-family:'Archivo Black',sans-serif;font-size:17px;
}
.commit input:focus{outline:none;border-color:var(--tab)}
.commit button{
  flex:0 0 auto;padding:13px 20px;background:var(--tab);color:#0B0B0C;border:2px solid var(--tab);
  font-family:'Archivo Black',sans-serif;font-size:15px;letter-spacing:.04em;cursor:pointer;
}
.commit button:disabled{background:var(--ridge);border-color:var(--ridge);color:var(--news);cursor:not-allowed}

/* ---- the length scrubber ---- */
.scrub{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:12px}
.scrub button{
  padding:11px 0;background:#0B0B0C;border:2px solid var(--ridge);color:var(--dim);
  font-family:'Archivo Black',sans-serif;font-size:16px;cursor:pointer;
}
.scrub button.on{background:var(--paper);border-color:var(--paper);color:#0B0B0C}
.scrub button.drawn{border-color:var(--tab);color:var(--tab)}
.scrub button.on.drawn{background:var(--tab);color:#0B0B0C}

/* ---- standings ---- */
.stand{margin-top:12px;display:flex;flex-direction:column;gap:5px}
.standrow{display:grid;grid-template-columns:1fr auto;gap:4px 10px;position:relative;padding:8px 10px;background:#0F0F11;border-left:4px solid var(--ridge);overflow:hidden}
.standrow.mine{border-left-color:var(--tab)}
.standrow .bar{position:absolute;inset:0 auto 0 0;background:rgba(200,242,75,.11);transition:width .35s ease;z-index:0}
.standrow>*{position:relative;z-index:1}
.sn{font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx{font-family:'Archivo Black',sans-serif;font-size:14px;text-align:right}
.sg{grid-column:1/-1;font-size:11.5px;color:var(--news);display:flex;gap:10px;flex-wrap:wrap}

/* ---- tape ---- */
.tape{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.chit{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:7px 2px;border-bottom:1px dashed var(--ridge);font-size:12.5px}
.chit code{color:var(--news)}
.chit b{font-family:'Archivo Black',sans-serif;font-size:12px;color:var(--paper)}
.chit .t{color:var(--news);font-size:11px}

/* ---- tables / ledger ---- */
.grid8{width:100%;border-collapse:collapse;margin-top:10px;font-size:12.5px}
.grid8 th,.grid8 td{padding:7px 6px;text-align:right;border-bottom:1px solid var(--ridge);white-space:nowrap}
.grid8 th:first-child,.grid8 td:first-child{text-align:left}
.grid8 th{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--news);font-weight:600}
.wide{overflow-x:auto}

/* ---- footer ---- */
.tailcard{display:flex;flex-direction:column;gap:18px;margin-top:26px;padding:20px 0 10px;border-top:2px solid var(--ridge);font-size:13px;color:var(--dim)}
.tailcol b{color:var(--ink);font-family:'Archivo Black',sans-serif;font-size:13px;letter-spacing:.02em}
.tailcol p{margin:6px 0 0;max-width:46ch}
.tag{display:block;margin-top:9px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--news)}
.tailcol a{display:block;margin-top:6px;color:var(--paper)}

/* ---- sheet ---- */
#sheet{position:fixed;inset:0;z-index:60;background:rgba(5,5,6,.82);display:flex;align-items:flex-end;justify-content:center;padding:14px}
#sheet[hidden]{display:none!important}
.sheetbox{width:100%;max-width:440px;background:var(--panel);border:2px solid var(--tab);padding:16px}
.sheettop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.sheettop b{font-family:'Archivo Black',sans-serif;font-size:14px;letter-spacing:.1em;text-transform:uppercase}
.sheettop button{background:none;border:none;color:var(--dim);cursor:pointer;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.wl button{display:flex;align-items:center;gap:10px;width:100%;padding:11px;margin-bottom:7px;background:#0B0B0C;border:2px solid var(--ridge);cursor:pointer;text-align:left}
.wl img{width:22px;height:22px}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);z-index:80;background:var(--paper);color:#0B0B0C;padding:10px 16px;font-weight:800;font-size:13px;max-width:88vw}

/* ---- 720+ : one column, wider measure, bigger object ---- */
@media (min-width:720px){
  body{font-size:17px}
  #wrap{padding:0 28px 100px}
  .slab{padding:30px 28px 24px}
  .panel{padding:22px 20px}
  .throw{height:58px}
  .throw span{font-size:18px}
  .commit input,.commit button{padding:15px 22px;font-size:19px}
  .scrub button{padding:14px 0;font-size:19px}
  .sn{font-size:15px}.sx{font-size:17px}
  .tailcard{flex-direction:row;gap:46px}
  .tailcol{flex:1}
}

/* ---- 1000+ : the page recomposes, the rail goes vertical ---- */
@media (min-width:1000px){
  #rail{
    top:0;bottom:0;right:auto;width:var(--railw);height:auto;flex-direction:column;
    padding:20px 12px;gap:0;border-top:none;border-right:2px solid var(--ridge);
  }
  #rail .mark{flex-direction:column;gap:9px;text-align:center}
  #rail .mark img{width:46px;height:46px}
  #rail .mark span{font-size:12px}
  .railmid{flex:1 1 auto;justify-content:center;align-items:center;text-align:center}
  .railmid b{font-size:17px}
  #rail .pill{width:100%;min-width:0;padding:13px 6px}
  #rail .pill b{font-size:15px}
  body{padding-left:var(--railw)}
  #wrap{max-width:calc(var(--measure) + 68px);padding-left:34px;padding-right:34px;padding-bottom:40px}
  #top{padding-top:32px}
  .slab h1{font-size:clamp(38px,3.6vw,52px)}
  .lede{font-size:16.5px}
  #stage{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(320px,1fr);gap:26px;align-items:start}
  #side{margin-top:0}
  .rote h3{font-size:40px}
  .tape{max-height:420px;overflow:auto}
}
@media (min-width:1280px){
  #stage{gap:34px}
  .slab h1{font-size:54px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* collect button on a wallet's ledger */
.take{padding:5px 10px;background:none;border:2px solid var(--tab);color:var(--tab);cursor:pointer;font-size:11px;letter-spacing:.12em;text-transform:uppercase}