/* Skilletway — the pass. Brutalist type on a soot ground, one turquoise heat. */
:root{
  --soot:#0F0E0B; --slab:#191814; --seam:#34312A; --bone:#ECE6D9; --ash:#9A958A; --heat:#3FE3D1; --heatdim:rgba(63,227,209,.16);
  --rail-w:52px;
  --disp:'Dela Gothic One',Impact,sans-serif; --txt:'Schibsted Grotesk',system-ui,sans-serif; --mono:'Azeret Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--soot)}
body{background:var(--soot);color:var(--bone);font:400 15px/1.5 var(--txt);padding:14px calc(var(--rail-w) + 14px) 40px 14px;min-height:100vh;overflow-x:hidden}
a{color:var(--heat)} code{font-family:var(--mono);word-break:break-all}
button{font:inherit;cursor:pointer}

/* ---------- HERO: the warning label (text) ---------- */
.cautionlabel{font-size:18px;line-height:1.34;border:3px solid var(--bone);background:var(--soot);position:relative;padding:34px 14px 14px}
.cautionlabel::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background:repeating-linear-gradient(-45deg,var(--heat) 0 12px,var(--soot) 12px 24px);border-bottom:3px solid var(--bone)}
.cautionkick{font:800 12px/1 var(--txt);letter-spacing:.18em;text-transform:uppercase;color:var(--heat);margin-bottom:10px}
.cautioncopy{font-weight:600;text-transform:uppercase;letter-spacing:.01em}
.cautioncopy b{color:var(--heat);font-weight:800}

/* ---------- the pass (the object) ---------- */
.passwrap{margin-top:14px;display:grid;gap:14px}
.counter{border:3px solid var(--bone);background:var(--slab)}
.lampline{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:3px solid var(--bone);font:600 12px/1.2 var(--mono);text-transform:uppercase}
.lampglow{width:12px;height:12px;background:var(--heat);box-shadow:0 0 14px 4px var(--heat);flex:none}
.lamptxt{letter-spacing:.04em}
.lampline.hot .lamptxt{color:var(--heat)}
.shelf{display:flex;align-items:center;gap:14px;padding:10px 12px;background:linear-gradient(180deg,var(--heatdim),transparent 70%);border-bottom:3px solid var(--bone)}
.panmark{position:relative;width:118px;height:78px;flex:none}
.panbowl{position:absolute;left:0;top:4px;width:72px;height:72px;border-radius:50%;background:#050504;border:7px solid var(--bone);box-shadow:0 0 0 3px var(--heat),0 0 26px var(--heatdim)}
.panhandle{position:absolute;left:66px;top:34px;width:52px;height:12px;background:var(--bone)}
.shelf.gone .panbowl{border-color:var(--seam);box-shadow:none}
.shelfnote{display:flex;flex-direction:column;min-width:0}
.bigcount{font:400 56px/0.9 var(--disp);color:var(--heat)}
.shelfnote span{font:800 14px/1.1 var(--txt);text-transform:uppercase;letter-spacing:.08em}
.shelfnote em{font:400 12px/1.3 var(--mono);color:var(--ash);font-style:normal;margin-top:4px}
.railhead{display:flex;justify-content:space-between;align-items:baseline;padding:10px 12px 6px;font:800 12px/1 var(--txt);text-transform:uppercase;letter-spacing:.14em}
.railhead b{font:600 12px/1 var(--mono);letter-spacing:0;color:var(--heat)}
.sliprail{list-style:none;display:grid;grid-template-columns:repeat(8,1fr);gap:3px;padding:4px 12px 12px;border-bottom:3px solid var(--bone)}
.slip{min-height:38px;border:2px dashed var(--seam);display:flex;flex-direction:column;justify-content:space-between;padding:2px 3px;font:600 9px/1.1 var(--mono);color:var(--ash);overflow:hidden}
.slip .sn{font-size:9px;opacity:.8}
.slip.hung{border:2px solid var(--bone);background:var(--bone);color:var(--soot)}
.slip.mine{outline:2px solid var(--heat);outline-offset:1px}
.slip.drawn{background:var(--heat);border-color:var(--heat);color:var(--soot)}
.slip.lose{opacity:.4}
.slip.nextup{border:2px solid var(--heat);color:var(--heat);cursor:pointer;animation:nudge 1.6s ease-in-out infinite}
.slip.nextup .sw{font-weight:800}
.slip.fresh{animation:clip .5s ease-out}
@keyframes nudge{50%{background:var(--heatdim)}}
@keyframes clip{from{transform:translateY(-10px);opacity:0}}
.stoveblock{display:grid;grid-template-columns:1fr 1fr;border-bottom:3px solid var(--bone)}
.stovecell{padding:10px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.stovecell + .stovecell{border-left:3px solid var(--bone)}
.stovek{font:800 11px/1 var(--txt);text-transform:uppercase;letter-spacing:.14em;color:var(--ash)}
.stovecell b{font:400 14px/1.3 var(--disp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stovecell em{font:400 11px/1.3 var(--mono);color:var(--ash);font-style:normal}
.hangdeck{display:flex;gap:8px;padding:12px}
.hanggo{flex:1;background:var(--heat);color:var(--soot);border:3px solid var(--heat);padding:14px 10px;font:800 15px/1.1 var(--txt);text-transform:uppercase;letter-spacing:.04em}
.hanggo:disabled{background:transparent;color:var(--ash);border-color:var(--seam);cursor:default}
.walletgo{background:transparent;color:var(--bone);border:3px solid var(--bone);padding:0 12px;font:600 12px/1 var(--mono)}
.walletgo.linked{color:var(--heat);border-color:var(--heat)}

/* ---------- the tape ---------- */
.printer{border:3px solid var(--bone);padding:12px;background:var(--soot);display:flex;flex-direction:column;gap:10px}
.sechead{font:400 22px/1 var(--disp);text-transform:uppercase;letter-spacing:.01em}
.taperoll{list-style:none;font:400 12px/1.45 var(--mono);display:flex;flex-direction:column;gap:6px}
.taperoll li{border-left:3px solid var(--seam);padding-left:8px}
.taperoll li .tt{color:var(--ash);margin-right:6px}
.taperoll li.served{border-left-color:var(--heat)}
.taperoll li.fresh{animation:print .7s steps(6)}
@keyframes print{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.tapeidle{color:var(--ash);font:400 12px/1.45 var(--mono);border:0!important;padding:0!important}
.primer{border-top:3px solid var(--bone);padding-top:10px;display:flex;flex-direction:column;gap:4px;font:400 12px/1.4 var(--mono)}
.primer b{color:var(--heat);text-transform:uppercase;margin-right:4px}

/* ---------- long scroll ---------- */
.longsec{margin-top:14px;border-top:3px solid var(--bone);padding-top:14px}
.examplelist{list-style:none;counter-reset:ex;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.examplelist li{counter-increment:ex;display:grid;grid-template-columns:34px 1fr;gap:8px}
.examplelist li::before{content:counter(ex);font:400 26px/1 var(--disp);color:var(--heat)}
.examplelist b,.directions b{color:var(--bone);font-weight:800}
.directions{list-style:square;padding-left:20px;display:flex;flex-direction:column;gap:8px;margin-top:10px;color:var(--ash)}
.servedrows{display:flex;flex-direction:column;margin-top:10px}
.servedrow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--seam);font:400 12px/1.4 var(--mono)}
.servedrow b{color:var(--heat)}
.altsheet{margin-top:14px;border:3px solid var(--bone);padding:16px}
.altsheet h1{font:400 30px/1.05 var(--disp);text-transform:uppercase;margin-bottom:12px}
.altsheet h3{font:800 13px/1 var(--txt);text-transform:uppercase;letter-spacing:.14em;color:var(--heat);margin:16px 0 6px}
.altsheet p{margin-bottom:8px}
.sk-alt .cautionlabel,.sk-alt .passwrap,.sk-alt .longsec{display:none}

.kitchenfoot{margin-top:24px;border-top:3px solid var(--bone);padding-top:14px;display:flex;flex-direction:column;gap:8px;font:400 12px/1.4 var(--mono);color:var(--ash)}
.footid{display:flex;align-items:center;gap:8px;font:800 13px/1 var(--txt);color:var(--bone);text-transform:uppercase}
.footkv code{color:var(--bone)}
.footlinks{display:flex;flex-wrap:wrap;gap:14px}
.foottag{color:var(--seam)}

/* ---------- the CA rail: fixed, on the side, at every width ---------- */
.carail{position:fixed;right:0;top:132px;width:var(--rail-w);z-index:20;background:var(--bone);color:var(--soot);border:3px solid var(--bone);border-right:0;
  display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 0;writing-mode:vertical-rl}
.carail-k{font:400 14px/1 var(--disp);color:var(--soot);background:var(--heat);padding:6px 3px}
.carail-addr{font:600 11px/1.1 var(--mono);white-space:nowrap;word-break:normal;user-select:all;letter-spacing:.02em}
.carail-copy{background:var(--soot);color:var(--heat);border:0;padding:10px 4px;font:800 12px/1 var(--txt);text-transform:uppercase;letter-spacing:.1em}
.carail-copy:disabled{color:var(--ash);cursor:default}
.carail-copy.done{background:var(--heat);color:var(--soot)}
.carail-gm{font:600 10px/1 var(--mono);color:var(--soot);text-decoration:underline}

/* ---------- sheet + toast ---------- */
.sheetveil{position:fixed;inset:0;background:rgba(5,5,4,.78);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheetveil[hidden]{display:none}
.sheetcard{background:var(--soot);border:3px solid var(--bone);width:100%;max-width:480px;padding:14px;margin:0 0 10px}
.sheethead{display:flex;justify-content:space-between;align-items:center;font:400 18px/1 var(--disp);text-transform:uppercase;margin-bottom:12px}
.sheethead button{background:none;border:0;color:var(--bone);font-size:24px}
.sheetfacts{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font:400 13px/1.3 var(--mono);margin-bottom:12px}
.sheetfacts b{color:var(--heat);text-align:right}
.sheetwarn{color:var(--heat);font:400 12px/1.4 var(--mono);margin-bottom:10px}
.pickwallet{display:flex;flex-direction:column;gap:6px}
.pickwallet button{display:flex;align-items:center;gap:10px;background:var(--slab);color:var(--bone);border:2px solid var(--seam);padding:10px}
.pickwallet img{width:22px;height:22px}
.toast{position:fixed;left:14px;bottom:14px;z-index:50;background:var(--heat);color:var(--soot);font:600 12px/1.3 var(--mono);padding:10px 12px;max-width:300px}

/* ---------- 720–1000: one column, wider measure, bigger type ---------- */
@media (min-width:720px){
  :root{--rail-w:58px}
  body{padding:22px calc(var(--rail-w) + 28px) 48px 28px;font-size:16px}
  .cautionlabel{font-size:19px;padding:40px 22px 20px}
  .sliprail{grid-template-columns:repeat(8,1fr)}
  .slip{min-height:52px;font-size:11px}
  .panmark{transform:scale(1.2);transform-origin:left center;margin-right:24px}
  .bigcount{font-size:72px}
  .carail-addr{font-size:12px}
  .stovecell b{font-size:22px}
}

/* ---------- ≥1000: the page recomposes — rail on the left, pass + tape side by side ---------- */
@media (min-width:1000px){
  :root{--rail-w:250px}
  body{padding:28px 32px 56px calc(var(--rail-w) + 40px);max-width:calc(1180px + var(--rail-w));font-size:16px}
  .carail{left:0;right:auto;top:0;bottom:0;height:100vh;width:var(--rail-w);writing-mode:horizontal-tb;border:0;border-right:3px solid var(--bone);
    flex-direction:column;align-items:stretch;justify-content:center;gap:14px;padding:28px 22px;background:var(--slab);color:var(--bone)}
  .carail-k{align-self:flex-start;padding:6px 10px;font-size:18px}
  .carail-addr{white-space:normal;word-break:break-all;font-size:15px;line-height:1.35;color:var(--bone)}
  .carail-copy{padding:12px;background:var(--heat);color:var(--soot);font-size:13px}
  .carail-copy:disabled{background:transparent;border:2px solid var(--seam)}
  .carail-gm{color:var(--ash)}
  .cautionlabel{font-size:26px;line-height:1.28;padding:48px 30px 26px}
  .cautionkick{font-size:14px}
  .passwrap{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start}
  .printer{position:sticky;top:28px}
  .sliprail{grid-template-columns:repeat(8,1fr);gap:6px}
  .slip{min-height:62px;font-size:12px}
  .panmark{transform:scale(1.5);margin-right:60px}
  .bigcount{font-size:96px}
  .stovecell b{font-size:26px}
  .longsec{display:grid;grid-template-columns:260px 1fr;gap:24px}
  .kitchenfoot{flex-direction:row;flex-wrap:wrap;justify-content:space-between}
}