/* Lotwane — the lot board. Brutalist slabs, amber on ink, written for this drop. */
:root{
  --ink:#0B0B0C; --paper:#F2F2F0; --amber:#FFC53D; --amber-dim:#7a5c17;
  --dim:#8A8A85; --line:#232326; --panel:#131315; --bar:56px;
  --slab:#17171A;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--paper);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased;
  padding-top:calc(var(--bar) + env(safe-area-inset-top));
  overflow-x:hidden;
}
a{color:inherit}
code{font-family:inherit}
button{font:inherit;cursor:pointer}
h1,h2,h3,.d{font-family:Anton,"Arial Narrow",Impact,sans-serif; font-weight:400; letter-spacing:.01em; text-transform:uppercase; margin:0}

/* ---------- the hammer bar: chrome, identity and the buy control, fixed at every width ---------- */
.hammerbar{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--bar);
  display:flex; align-items:center; gap:10px; padding:0 12px;
  background:#0B0B0Cf2; border-bottom:2px solid var(--amber);
  backdrop-filter:blur(6px);
}
.hammerbar .mark{display:flex; align-items:center; gap:8px; text-decoration:none; flex:0 0 auto}
.hammerbar .mark img{display:block; width:26px; height:26px}
.hammerbar .mark span{font-family:Anton,Impact,sans-serif; font-size:21px; letter-spacing:.04em; text-transform:uppercase}
.hammerbar .tick{
  flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:11px; color:var(--dim); text-align:center; letter-spacing:.06em; text-transform:uppercase;
}
.hammerbar .tick b{color:var(--amber)}
.hammerbar .buy{
  flex:0 0 auto; text-decoration:none; background:var(--amber); color:#101012;
  font-weight:700; font-size:11px; letter-spacing:.04em; padding:8px 10px;
  display:flex; gap:6px; align-items:center; border:2px solid var(--amber);
}
.hammerbar .buy b{font-weight:700}
.hammerbar .buy.off{background:transparent; color:var(--amber-dim); border-color:var(--amber-dim)}

.nav{display:flex; gap:2px; padding:8px 12px 0; flex-wrap:wrap}
.nav a{
  text-decoration:none; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--dim); border:1px solid var(--line); padding:5px 9px;
}
.nav a.on{color:var(--amber); border-color:var(--amber)}
.nav a.wbtn{margin-left:auto}
.nav a.wbtn.on{color:var(--ink); background:var(--amber); border-color:var(--amber)}

/* ---------- stage ---------- */
#stage{display:block; padding:12px; max-width:560px; margin:0 auto}
.boot{color:var(--dim); padding:40px 0; text-align:center}

/* the six stubs */
.stubs{display:grid; grid-template-columns:repeat(6,1fr); gap:4px; align-items:end; margin-bottom:10px}
.stub{
  background:var(--slab); border:1px solid var(--line); border-bottom:3px solid var(--line);
  padding:7px 4px 5px; text-align:center; min-height:54px;
  display:flex; flex-direction:column; justify-content:flex-end; gap:2px;
}
.stub .n{font-family:Anton,Impact,sans-serif; font-size:17px; color:var(--dim); line-height:1}
.stub .s{font-size:9px; color:var(--dim); letter-spacing:.04em}
.stub.done{border-bottom-color:var(--amber-dim)}
.stub.done .n{color:var(--paper)}
.stub.empty{opacity:.55}
.stub.empty .s{color:var(--amber-dim)}
.stub.live{background:var(--amber); border-color:var(--amber); border-bottom-color:var(--amber)}
.stub.live .n,.stub.live .s{color:#101012}
.stub.live .n{font-size:20px}

/* the open lot: the one object */
.slab{background:var(--slab); border:2px solid var(--amber); padding:16px 14px 14px; position:relative; overflow:hidden}
.slab.cold{border-color:var(--line)}
.slab .head{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.slab .lotno{font-family:Anton,Impact,sans-serif; font-size:clamp(38px,13vw,62px); line-height:.9; color:var(--amber)}
.slab.cold .lotno{color:var(--dim)}
.slab .pct{font-family:Anton,Impact,sans-serif; font-size:clamp(30px,10vw,46px); line-height:.9; text-align:right}
.slab .pct small{display:block; font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase}
.slab .pays{margin-top:12px; font-family:Anton,Impact,sans-serif; font-size:clamp(26px,9vw,40px); line-height:1; color:var(--paper)}
.slab .pays em{font-style:normal; color:var(--amber)}
.slab .sub{font-size:12px; color:var(--dim); margin-top:4px}
.slab .carry{margin-top:10px; border-left:3px solid var(--amber); padding:6px 0 6px 9px; font-size:12px; color:var(--paper); background:#ffc53d12}
.wick{height:6px; background:var(--line); margin-top:14px; position:relative}
.wick i{position:absolute; inset:0 auto 0 0; background:var(--amber); transition:width .9s linear}
.wickrow{display:flex; justify-content:space-between; font-size:10px; color:var(--dim); margin-top:5px; letter-spacing:.06em; text-transform:uppercase}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.cell{background:var(--panel); border:1px solid var(--line); padding:9px 10px}
.cell .k{font-size:10px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase}
.cell .v{font-family:Anton,Impact,sans-serif; font-size:22px; line-height:1.15}
.cell .v.am{color:var(--amber)}

/* the commit */
.commit{margin-top:12px; border:1px solid var(--line); background:var(--panel); padding:12px}
.commit h3{font-size:17px; margin-bottom:8px}
.commit .row{display:flex; gap:8px}
.commit input{
  flex:1 1 auto; min-width:0; background:#0b0b0c; border:1px solid var(--line); color:var(--paper);
  font:inherit; font-size:18px; padding:11px 12px;
}
.commit input:focus{outline:none; border-color:var(--amber)}
.btn{
  background:var(--amber); color:#101012; border:2px solid var(--amber); font-weight:700;
  padding:11px 14px; letter-spacing:.04em; text-transform:uppercase; font-size:12px;
}
.btn:disabled{opacity:.35; cursor:not-allowed}
.btn.ghost{background:transparent; color:var(--amber)}
.commit .fine{font-size:11px; color:var(--dim); margin-top:8px}
.commit .mine{border-left:3px solid var(--amber); padding-left:9px; font-size:12px}
.commit .mine b{color:var(--amber)}

/* aside */
.side{margin-top:14px; display:flex; flex-direction:column; gap:12px}
.card{border:1px solid var(--line); background:var(--panel)}
.card h3{font-size:14px; padding:9px 11px; border-bottom:1px solid var(--line); color:var(--dim); letter-spacing:.08em}
.card .body{padding:10px 11px}
.tape{list-style:none; margin:0; padding:0; max-height:330px; overflow:auto}
.tape li{display:flex; gap:8px; align-items:baseline; padding:7px 11px; border-bottom:1px solid var(--line); font-size:12px}
.tape li:last-child{border-bottom:0}
.tape .amt{font-family:Anton,Impact,sans-serif; font-size:16px; color:var(--amber); min-width:64px}
.tape .who{color:var(--dim); flex:1 1 auto; overflow:hidden; text-overflow:ellipsis}
.tape .lot{color:var(--paper)}
.quiet{padding:14px 11px; color:var(--dim); font-size:12px}
.primer ol{margin:0; padding-left:18px; font-size:12px; color:var(--paper)}
.primer li{margin:5px 0}
.primer .fine{color:var(--dim); font-size:11px; margin-top:8px}
.shares{display:flex; gap:3px; margin:9px 0 2px}
.shares span{flex:1 1 auto; text-align:center; font-size:10px; padding:5px 0; background:#0b0b0c; border:1px solid var(--line); color:var(--dim)}
.shares span:first-child{border-color:var(--amber); color:var(--amber)}

/* tables / ledger */
.rows{width:100%; border-collapse:collapse; font-size:12px}
.rows th{text-align:left; font-weight:400; color:var(--dim); font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:7px 9px; border-bottom:1px solid var(--line)}
.rows td{padding:8px 9px; border-bottom:1px solid var(--line)}
.rows tr:last-child td{border-bottom:0}
.rows a{color:var(--amber)}
.am{color:var(--amber)}
.mono{font-size:11px; color:var(--dim)}
.big{font-family:Anton,Impact,sans-serif; font-size:clamp(28px,9vw,44px); line-height:1; margin:2px 0 10px}
.lede{font-size:13px; color:var(--dim); margin-bottom:14px; max-width:60ch}
.prose h2{font-size:18px; margin:18px 0 6px}
.prose p{margin:0 0 10px; max-width:66ch; font-size:13px}
.prose b{color:var(--amber)}

/* footer */
.lotfoot{border-top:1px solid var(--line); margin-top:26px; padding:14px 12px 40px; max-width:560px; margin-left:auto; margin-right:auto}
.fnote{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:11px; color:var(--dim); margin-bottom:7px}
.fnote code{color:var(--paper); word-break:break-all; font-size:11px}
.fnote .k{text-transform:uppercase; letter-spacing:.06em}
.fnote button{background:transparent; border:1px solid var(--line); color:var(--dim); font-size:10px; padding:3px 7px}
.fnote a{color:var(--amber)}
.fine{color:var(--dim)}

/* modal */
#modal{position:fixed; inset:0; z-index:90; background:#000000c4; display:flex; align-items:flex-end; justify-content:center}
#modal[hidden]{display:none !important}
.gaveldrawer{background:var(--panel); border:2px solid var(--amber); width:100%; max-width:460px; padding:14px}
.drawerhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.drawerhead h3{font-size:18px}
.drawerhead button{background:transparent; border:1px solid var(--line); color:var(--dim); padding:4px 8px; font-size:11px}
.wl{display:flex; flex-direction:column; gap:6px}
.wl button{display:flex; gap:9px; align-items:center; background:#0b0b0c; border:1px solid var(--line); color:var(--paper); padding:10px}
.wl img{width:20px; height:20px}
.hammercall{position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:120; background:var(--amber); color:#101012; font-weight:700; font-size:12px; padding:9px 13px; max-width:86vw}

/* ---------- wider ---------- */
@media (min-width:720px){
  :root{--bar:62px}
  body{font-size:15px}
  #stage,.lotfoot{max-width:760px}
  #stage{padding:18px}
  .stub{min-height:70px}
  .stub .n{font-size:22px}
  .slab{padding:22px 20px 18px}
  .slab .lotno{font-size:74px}
  .slab .pct{font-size:56px}
  .slab .pays{font-size:46px}
  .grid2{grid-template-columns:repeat(4,1fr)}
  .nav a{font-size:12px; padding:6px 11px}
}
@media (min-width:1000px){
  #stage{
    display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:26px; align-items:start;
    max-width:1180px; padding:24px;
  }
  .lotfoot{max-width:1180px; padding-left:24px; padding-right:24px}
  .side{margin-top:0; position:sticky; top:calc(var(--bar) + 16px)}
  .nav{max-width:1180px; margin:0 auto; padding:12px 24px 0}
  .slab .lotno{font-size:92px}
  .slab .pct{font-size:64px}
  .slab .pays{font-size:54px}
  .stub{min-height:86px}
  .stub .n{font-size:26px}
  .stub .s{font-size:10px}
  .hammerbar{padding:0 24px}
  .hammerbar .mark span{font-size:24px}
  .hammerbar .tick{font-size:12px}
  .hammerbar .buy{font-size:12px; padding:9px 14px}
  .tape{max-height:420px}
}