/* Reckonry — a printed check on a dark table. Paper, ink, one cyan rule. */
:root{
  --ground:#08090B; --ink:#EDEFF2; --cyan:#00D5FF; --paper:#E9E7E0; --papershade:#CFCCC2;
  --dim:#7C8390; --line:#1A1D23; --panel:#0D0F13; --panel2:#11141A; --warm:#FFC14D;
  --strip:84px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ground);color:var(--ink);
  font-family:"Roboto Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
body{padding-bottom:calc(var(--strip) + env(safe-area-inset-bottom,0px))}
a{color:inherit}
h1,h2,h3,.wordmark,.bignum{font-family:"Archivo Black",Impact,sans-serif;font-weight:400;letter-spacing:-.01em}
#till{max-width:1180px;margin:0 auto;padding:18px 16px 32px}

/* ---------- masthead printed at the head of the roll ---------- */
.head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:2px solid var(--line)}
.head img{width:34px;height:34px;border-radius:7px;display:block}
.head .wordmark{font-size:19px;letter-spacing:.02em;text-transform:uppercase}
.head .tag{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin-left:auto;text-align:right}
.head a.wm{display:flex;align-items:center;gap:10px;text-decoration:none}

/* ---------- the lede ---------- */
.lede{padding:20px 0 16px;border-bottom:1px dashed var(--line)}
.lede h1{font-size:27px;line-height:1.05;margin:0 0 10px;text-transform:uppercase}
.lede h1 em{font-style:normal;color:var(--cyan)}
.lede p{margin:0;color:#B9C0CB;max-width:62ch;font-size:13.5px}
.lede .steps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding:0;list-style:none}
.lede .steps li{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.lede .steps li b{color:var(--cyan);font-weight:700}

/* ---------- stage ---------- */
.stage{display:grid;grid-template-columns:1fr;gap:20px;padding-top:16px}
.primary{min-width:0}
.beside{min-width:0;display:grid;gap:14px;align-content:start}

/* ---------- the meter strip above the board ---------- */
.meter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:14px}
.meter div{background:var(--panel);padding:10px 12px;min-width:0}
.meter .k{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.meter .v{font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meter .v.hot{color:var(--cyan)}
.meter .v.warm{color:var(--warm)}

/* ---------- the board of six courses ---------- */
.board{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.boardHead{display:grid;grid-template-columns:38px 1fr 62px 84px;gap:8px;padding:9px 12px;background:var(--panel2);
  font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)}
.boardHead span:nth-child(3),.boardHead span:nth-child(4){text-align:right}
.course{display:grid;grid-template-columns:38px 1fr 62px 84px;gap:8px;align-items:center;width:100%;
  padding:13px 12px;background:transparent;border:0;border-top:1px solid var(--line);color:var(--ink);
  font:inherit;text-align:left;cursor:pointer;transition:background .12s ease}
.course:first-of-type{border-top:0}
.course:hover{background:#12151B}
.course .n{font-family:"Roboto Mono",monospace;font-size:21px;font-weight:700;color:var(--dim);transition:color .12s}
.course .dish{font-size:13px;letter-spacing:.09em;text-transform:uppercase}
.course .dish small{display:block;font-size:10.5px;letter-spacing:.02em;text-transform:none;color:var(--dim);margin-top:2px}
.course .seats,.course .take{text-align:right;font-size:13px;font-variant-numeric:tabular-nums}
.course .seats{color:var(--dim)}
.course .take{font-weight:700}
.course .take.up{color:var(--cyan)}
.course .take.down{color:#E0596B}
.course[aria-pressed="true"]{background:#0F1A1F}
.course[aria-pressed="true"] .n{color:var(--cyan)}
.course[aria-pressed="true"] .dish{color:var(--cyan)}
.course[disabled]{cursor:default;opacity:.55}

/* ---------- the order button ---------- */
.order{display:block;width:100%;margin-top:14px;padding:16px 14px;border:0;border-radius:11px;
  background:var(--cyan);color:#04252C;font:inherit;font-weight:700;font-size:15px;letter-spacing:.02em;cursor:pointer}
.order[disabled]{background:#1A2026;color:var(--dim);cursor:default}
.order .sub{display:block;font-weight:400;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.72;margin-top:3px}
.fine{color:var(--dim);font-size:11.5px;margin:10px 2px 0;line-height:1.55}

/* ---------- cards beside ---------- */
.card{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.card h3{margin:0;padding:11px 13px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
  border-bottom:1px solid var(--line);background:var(--panel2)}
.card .body{padding:13px}
.card .body p{margin:0 0 9px;font-size:12px;color:#AEB6C2;line-height:1.6}
.card .body p:last-child{margin-bottom:0}
.card .body b{color:var(--ink)}
.card .body .cy{color:var(--cyan)}

/* ---------- the tape ---------- */
.tape{margin:0;padding:0;list-style:none;font-size:12px}
.tape li{display:grid;grid-template-columns:1fr auto auto;gap:9px;align-items:center;padding:9px 13px;
  border-top:1px dashed var(--line);font-variant-numeric:tabular-nums;animation:print .34s ease both}
.tape li:first-child{border-top:0}
.tape .who{color:#AEB6C2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tape .ord{color:var(--cyan);font-weight:700}
.tape .when{color:var(--dim);font-size:11px}
@keyframes print{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tape li{animation:none}}
.quiet{padding:16px 13px;color:var(--dim);font-size:12px;line-height:1.6}

/* ---------- settled sittings ---------- */
.rolls{display:grid;gap:12px}
.roll{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.rollHead{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;padding:11px 13px;background:var(--panel2);
  border-bottom:1px solid var(--line)}
.rollHead .id{font-family:"Archivo Black",sans-serif;font-size:14px}
.rollHead .bit{font-size:11px;color:var(--dim);letter-spacing:.05em}
.rollHead .bit b{color:var(--ink);font-weight:700}
.rollGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
.rollGrid div{background:var(--panel);padding:10px 12px}
.rollGrid .k{display:block;font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.rollGrid .v{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.paidrow{display:flex;flex-wrap:wrap;gap:6px;padding:11px 13px;border-top:1px solid var(--line)}
.paidrow span{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--dim);
  font-variant-numeric:tabular-nums}
.paidrow span b{color:var(--cyan);font-weight:700}

/* ---------- rules ---------- */
.rules{display:grid;gap:14px;max-width:70ch}
.rule{border-left:2px solid var(--cyan);padding:2px 0 2px 14px}
.rule h3{margin:0 0 5px;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.rule p{margin:0;font-size:13px;color:#AEB6C2;line-height:1.62}
.worked{border:1px solid var(--line);border-radius:12px;background:var(--panel);padding:14px}
.worked h3{margin:0 0 10px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.worked ol{margin:0;padding-left:18px;font-size:12.5px;color:#AEB6C2;line-height:1.75}
.worked ol b{color:var(--cyan)}

/* ---------- my seat ---------- */
.seatrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px solid var(--line);
  border-radius:11px;background:var(--panel);padding:12px 13px}
.seatrow .lab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.seatrow .big{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.take2{border:0;border-radius:9px;background:var(--cyan);color:#04252C;font:inherit;font-weight:700;
  padding:11px 15px;cursor:pointer;white-space:nowrap}
.take2[disabled]{background:#1A2026;color:var(--dim);cursor:default}

/* ---------- the stub footer (reference, not selling) ---------- */
.stub{margin-top:26px;padding-top:16px;border-top:2px solid var(--line);color:var(--dim);font-size:11px;
  display:grid;gap:7px;word-break:break-all}
.stub .k{letter-spacing:.14em;text-transform:uppercase;margin-right:7px;color:#5C6472}
.stub code{color:#AEB6C2}
.stub a{color:var(--cyan);text-decoration:none}
.stub .line{line-height:1.7}

/* ---------- the fixed check strip: always on screen, at every width ---------- */
#check{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(8,9,11,.96);
  backdrop-filter:blur(9px);border-top:2px solid var(--line);
  padding:7px 12px calc(7px + env(safe-area-inset-bottom,0px));display:grid;gap:7px}
#check .tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
#check .tabs::-webkit-scrollbar{display:none}
#check .tabs a{flex:0 0 auto;padding:6px 10px;border-radius:7px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);text-decoration:none;border:1px solid transparent}
#check .tabs a.on{color:var(--cyan);border-color:#153740;background:#0C171B}
#check .paybit{display:flex;align-items:center;gap:8px}
#check #purseBtn{flex:0 0 auto;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);
  color:var(--dim);font:inherit;font-size:11.5px;cursor:pointer;letter-spacing:.06em}
#check #purseBtn.on{color:var(--ink);border-color:#2A3038}
#check .buy{flex:1 1 auto;text-align:center;padding:11px 12px;border-radius:9px;background:var(--cyan);
  color:#04252C;font-weight:700;font-size:13.5px;text-decoration:none;letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#check .buy.cold{background:#151A20;color:var(--dim);cursor:default}
#check .buy .tick{opacity:.72;font-weight:400;margin-left:6px}

/* ---------- sheet ---------- */
#chit{position:fixed;inset:0;z-index:60;background:rgba(4,5,7,.72);display:flex;align-items:flex-end;justify-content:center}
#chit[hidden]{display:none!important}
.slip{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px 14px 0 0;max-height:86vh;overflow:auto}
.slipHead{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.slipHead button{background:none;border:0;color:var(--dim);font-size:22px;line-height:1;cursor:pointer}
#chitBody{padding:15px}
#chitBody .wl{display:grid;gap:8px}
#chitBody .wl button{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel2);color:var(--ink);font:inherit;cursor:pointer}
#chitBody .wl img{width:22px;height:22px;border-radius:5px}
#chitBody .conf{font-size:13px;color:#AEB6C2;line-height:1.65}
#chitBody .conf b{color:var(--cyan)}
#chitBody .go{width:100%;margin-top:14px;padding:14px;border:0;border-radius:10px;background:var(--cyan);
  color:#04252C;font:inherit;font-weight:700;cursor:pointer}
#chitBody .go[disabled]{background:#1A2026;color:var(--dim)}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--strip) + 16px);z-index:80;
  background:var(--paper);color:#101318;padding:10px 15px;border-radius:9px;font-size:12.5px;max-width:88vw;
  box-shadow:0 8px 28px rgba(0,0,0,.5)}

/* ---------- wider than a phone: one column, more air ---------- */
@media (min-width:640px){
  #till{padding:24px 24px 40px}
  .lede h1{font-size:40px}
  .lede p{font-size:15px}
  .meter{grid-template-columns:repeat(4,minmax(0,1fr))}
  .meter .v{font-size:22px}
  .course{grid-template-columns:48px 1fr 78px 110px;padding:16px 15px}
  .course .n{font-size:26px}
  .course .dish{font-size:14.5px}
  .rollGrid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width:760px){
  :root{--strip:60px}
  #check{grid-template-columns:1fr auto;align-items:center;padding:9px 20px calc(9px + env(safe-area-inset-bottom,0px))}
  #check .buy{flex:0 0 auto;min-width:190px}
  .lede h1{font-size:48px}
}
/* ---------- desktop: the page recomposes, it does not merely widen ---------- */
@media (min-width:1000px){
  #till{padding:30px 32px 48px}
  .stage{grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:26px;align-items:start}
  .lede h1{font-size:60px;max-width:17ch}
  .lede p{font-size:16px}
  .meter .v{font-size:26px}
  .course{padding:18px 17px}
  .course .n{font-size:30px}
  .order{font-size:16px;padding:18px}
  .rolls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .beside{position:sticky;top:26px}
}