/* Orderdesk — a neon order desk on a slate wall. Six slots, one drawn order flips up amber. */
:root {
  --wall: #3D4B5C;
  --wall-lo: #34414F;
  --wall-line: rgba(20, 28, 38, .28);
  --bench: #283340;
  --bench-hi: #4E6074;
  --ink: #EEF3F8;
  --ink-dim: #B4C1CF;
  --ink-mute: #8796A7;
  --tube: #F4FAFF;
  --amber: #FFB31A;
  --amber-ink: #241805;
  --paper: #F3EEE3;
  --paper-ink: #2A2722;
  --rail-w: 44px;
  --sign: "Tilt Neon", "Manrope", system-ui, sans-serif;
  --text: "Manrope", system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--wall); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--text); font-size: 15px; line-height: 1.5;
  background-color: var(--wall);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 33px, var(--wall-line) 33px 34px),
    repeating-linear-gradient(90deg, transparent 0 67px, rgba(20, 28, 38, .12) 67px 68px);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "plate" "sign" "now" "counter" "slip" "roll" "menu" "lookup" "base";
  row-gap: 14px;
  padding: 10px calc(var(--rail-w) + 14px) 28px 14px;
  overflow-x: hidden;
}
a { color: inherit; }
code, pre { font-family: var(--mono); }
button { font: inherit; cursor: pointer; }

/* ---------- the CA tube: a vertical neon strip on the right wall ---------- */
#caStrip {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40;
  width: var(--rail-w);
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 12px 0;
  background: rgba(30, 38, 48, .94);
  border: 1.5px solid rgba(244, 250, 255, .55); border-right: 0; border-radius: 14px 0 0 14px;
  box-shadow: 0 0 10px rgba(244, 250, 255, .28), -4px 0 22px rgba(10, 14, 20, .45);
}
.tube-tag, .tube-addr, .tube-gm { writing-mode: vertical-rl; }
.tube-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--ink-mute); }
.tube-addr {
  font-size: 11px; line-height: 1; letter-spacing: .01em; color: var(--tube);
  text-shadow: 0 0 6px rgba(244, 250, 255, .55);
  user-select: all; -webkit-user-select: all;
}
.tube-addr[data-wait="1"] { color: var(--ink-dim); text-shadow: none; font-style: italic; user-select: none; -webkit-user-select: none; }
.tube-copy {
  writing-mode: vertical-rl; padding: 10px 5px; border-radius: 9px;
  border: 1.5px solid var(--amber); background: var(--amber); color: var(--amber-ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  box-shadow: 0 0 10px rgba(255, 179, 26, .45);
}
.tube-copy[data-done="1"] { background: transparent; color: var(--amber); }
.tube-gm { font-family: var(--mono); font-size: 9.5px; color: var(--ink-mute); text-decoration: none; letter-spacing: .08em; }
.tube-gm:hover { color: var(--ink); }

/* ---------- name plate (short on purpose) ---------- */
.nameplate { grid-area: plate; display: flex; align-items: center; gap: 9px; height: 42px; }
.nameplate img { border-radius: 6px; display: block; }
.nameplate-word { font-family: var(--sign); font-size: 19px; letter-spacing: .02em; text-shadow: 0 0 8px rgba(244, 250, 255, .45); }
.nameplate-desk { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); }
.nameplate-wallet {
  margin-left: auto; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(244, 250, 255, .4);
  background: transparent; color: var(--ink); font-size: 12.5px; font-weight: 600;
}
.nameplate-wallet[data-on="1"] { border-color: var(--amber); color: var(--amber); font-family: var(--mono); font-weight: 400; }

/* ---------- the sign ---------- */
.sign {
  grid-area: sign; margin: 2px 0 0; font-family: var(--sign); font-weight: 400;
  font-size: 40px; line-height: 1.04; letter-spacing: -.005em; color: var(--tube);
  text-shadow: 0 0 4px rgba(244, 250, 255, .9), 0 0 16px rgba(190, 225, 255, .45);
}
.sign-a, .sign-b { display: block; }
.sign-b { color: var(--amber); text-shadow: 0 0 4px rgba(255, 200, 90, .9), 0 0 18px rgba(255, 179, 26, .55); }
.nowline { grid-area: now; margin: 0; font-size: 16.5px; line-height: 1.45; color: var(--ink); max-width: 46ch; }
.nowline b { color: var(--amber); font-weight: 800; }

/* ---------- the desk ---------- */
.counter {
  grid-area: counter; position: relative;
  background: linear-gradient(180deg, rgba(40, 51, 64, .92), rgba(36, 46, 58, .96));
  border-radius: 16px; padding: 12px 12px 14px;
  border: 1px solid rgba(78, 96, 116, .8);
  box-shadow: 0 18px 40px rgba(10, 14, 20, .35);
}
.counter-top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-mute); margin-bottom: 12px; flex-wrap: wrap; }
.counter-top span:first-child { color: var(--ink-dim); }
.slots { list-style: none; margin: 0; padding: 4px 2px 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.slot {
  position: relative; aspect-ratio: 1 / 1; border-radius: 10px;
  display: flex; flex-direction: column; justify-content: space-between; padding: 8px 9px;
  border: 1.5px dashed rgba(180, 193, 207, .35); color: var(--ink-mute);
  transition: transform .5s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s, border-color .3s, background .3s;
  min-width: 0;
}
.slot-n { font-family: var(--sign); font-size: 22px; line-height: 1; }
.slot-who { font-family: var(--mono); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-amt { font-family: var(--mono); font-size: 10.5px; }
.slot[data-s="in"] {
  border: 1.5px solid var(--tube); color: var(--tube);
  box-shadow: 0 0 6px rgba(244, 250, 255, .55), inset 0 0 8px rgba(244, 250, 255, .18);
}
.slot[data-s="in"] .slot-n { text-shadow: 0 0 8px rgba(244, 250, 255, .8); }
.slot[data-s="in"][data-me="1"] .slot-who { color: var(--amber); }
.slot[data-s="next"] { border: 1.5px solid rgba(244, 250, 255, .75); color: var(--ink); cursor: pointer; animation: flicker 3.2s infinite steps(1, end); }
.slot[data-s="next"] .slot-who { color: var(--amber); }
.slot[data-s="drawn"] {
  border: 1.5px solid var(--amber); background: rgba(255, 179, 26, .14); color: var(--amber);
  transform: translateY(-9px) rotate(-7deg);
  box-shadow: 0 0 10px rgba(255, 179, 26, .7), 0 0 28px rgba(255, 179, 26, .35), inset 0 0 12px rgba(255, 179, 26, .25);
  z-index: 2;
}
.slot[data-s="drawn"] .slot-n { text-shadow: 0 0 10px rgba(255, 179, 26, .9); }
.slot[data-s="paid"] { border: 1.5px solid rgba(244, 250, 255, .28); color: var(--ink-mute); }
.slot[data-s="wait"] { border: 1.5px solid var(--tube); color: var(--tube); animation: scan 1.4s infinite; }
.slot[data-fresh="1"] { animation: lightup .9s ease-out 1; }
@keyframes flicker { 0%, 100% { opacity: 1; } 8% { opacity: .35; } 10% { opacity: 1; } 52% { opacity: .55; } 54% { opacity: 1; } }
@keyframes lightup { 0% { opacity: .2; box-shadow: none; } 30% { opacity: 1; } 40% { opacity: .4; } 60% { opacity: 1; } }
@keyframes scan { 0%, 100% { box-shadow: 0 0 4px rgba(244, 250, 255, .3); } 50% { box-shadow: 0 0 16px rgba(255, 179, 26, .7); border-color: var(--amber); } }
.counter-edge { height: 4px; margin: 16px 2px 12px; border-radius: 4px; background: var(--tube); box-shadow: 0 0 8px rgba(244, 250, 255, .8), 0 0 22px rgba(190, 225, 255, .35); }
.counter-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.sum-k { display: block; font-size: 10.5px; color: var(--ink-mute); line-height: 1.25; }
.sum-v { font-family: var(--mono); font-size: 17px; font-weight: 400; color: var(--ink); }
.sum-v[data-amber="1"] { color: var(--amber); }
.place {
  display: block; width: 100%; padding: 15px 14px; border: 0; border-radius: 12px;
  background: var(--amber); color: var(--amber-ink); font-weight: 800; font-size: 16px; letter-spacing: .01em;
  box-shadow: 0 0 18px rgba(255, 179, 26, .4);
}
.place:disabled { background: rgba(255, 179, 26, .22); color: var(--ink-dim); box-shadow: none; cursor: default; }
.counter-mine { font-size: 12.5px; color: var(--ink-mute); margin-top: 8px; text-align: center; }
.collect {
  display: block; width: 100%; margin-top: 10px; padding: 12px; border-radius: 12px;
  border: 1.5px solid var(--amber); background: transparent; color: var(--amber); font-weight: 600;
}

/* ---------- the last-draw slip (paper) ---------- */
.slip {
  grid-area: slip; background: var(--paper); color: var(--paper-ink); border-radius: 4px 4px 0 0; padding: 14px 14px 18px;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; position: relative;
  box-shadow: 0 12px 30px rgba(10, 14, 20, .35);
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100%;
          mask: radial-gradient(circle 6px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100%;
}
.slip-head { display: flex; justify-content: space-between; letter-spacing: .12em; font-size: 11px; border-bottom: 1px dashed rgba(42, 39, 34, .45); padding-bottom: 6px; margin-bottom: 8px; }
.slip-line { display: flex; justify-content: space-between; gap: 10px; }
.slip-line span:last-child { text-align: right; }
.slip-big { font-family: var(--sign); font-size: 24px; line-height: 1.15; margin: 4px 0 8px; }
.slip-big em { font-style: normal; background: var(--amber); padding: 0 5px; border-radius: 3px; }
.slip-rule { border-top: 1px dashed rgba(42, 39, 34, .45); margin: 6px 0; }
.slip-say { font-family: var(--text); font-size: 14px; line-height: 1.5; }
.slip a { color: inherit; }

/* ---------- the tape ---------- */
.roll { grid-area: roll; background: rgba(28, 36, 46, .85); border-radius: 12px; padding: 12px; border: 1px solid rgba(78, 96, 116, .6); }
.roll-head, .lookup .roll-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-mute); margin-bottom: 8px; }
.roll-lines { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow-y: auto; font-family: var(--mono); font-size: 12px; }
.roll-lines li { display: grid; grid-template-columns: 54px minmax(0, 1fr) 40px; gap: 8px; padding: 6px 0; border-bottom: 1px dotted rgba(180, 193, 207, .18); align-items: baseline; }
.roll-lines li span:nth-child(2) { overflow-wrap: anywhere; }
.roll-k { color: var(--ink-mute); text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.roll-t { color: var(--ink-mute); text-align: right; font-size: 10.5px; }
.roll-lines li[data-k="drawn"] .roll-k, .roll-lines li[data-k="drawn"] b { color: var(--amber); }
.roll-lines li[data-print="1"] { animation: printin .6s ease-out 1; }
.roll-lines li[data-eg="1"] { opacity: .5; }
.roll-lines li.roll-say { display: block; color: var(--ink-dim); font-family: var(--text); font-size: 13px; border: 0; }
@keyframes printin { from { transform: translateY(-8px); opacity: 0; background: rgba(255, 179, 26, .18); } to { transform: none; opacity: 1; } }

/* ---------- the menu card (rules) ---------- */
.menu { grid-area: menu; border: 1.5px solid rgba(244, 250, 255, .35); border-radius: 14px; padding: 16px 14px; }
.menu-title { margin: 0 0 10px; font-family: var(--sign); font-weight: 400; font-size: 24px; color: var(--tube); text-shadow: 0 0 6px rgba(244, 250, 255, .5); }
.menu-list { margin: 0 0 14px; }
.menu-list div { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.menu-list dt { order: 1; color: var(--ink-dim); }
.menu-list div::after { content: ""; order: 2; flex: 1; min-width: 12px; border-bottom: 2px dotted rgba(180, 193, 207, .4); transform: translateY(-4px); }
.menu-list dd { order: 3; margin: 0; font-family: var(--mono); white-space: nowrap; color: var(--ink); }
.menu-steps { margin: 0 0 14px; padding-left: 20px; color: var(--ink-dim); }
.menu-steps li { margin: 6px 0; }
.menu-steps b { color: var(--ink); }
.menu-eg { background: var(--paper); color: var(--paper-ink); border-radius: 6px; padding: 12px; }
.menu-eg-h { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; margin-bottom: 6px; }
.menu-eg pre { margin: 0; font-size: 11px; line-height: 1.55; white-space: pre; overflow-x: auto; }

.lookup { grid-area: lookup; background: rgba(28, 36, 46, .85); border-radius: 12px; padding: 12px; font-size: 13px; overflow-wrap: anywhere; }
.lookup code { font-size: 12px; }

/* ---------- base ---------- */
.base { grid-area: base; border-top: 1px solid rgba(180, 193, 207, .25); padding-top: 14px; font-size: 12px; color: var(--ink-mute); }
.base-row { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; }
.base-row code { color: var(--ink-dim); overflow-wrap: anywhere; font-size: 11.5px; }
.base-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.base-links a { color: var(--ink); }
.base-note { font-size: 11.5px; }

.toasts { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: grid; gap: 6px; width: min(92vw, 420px); }
.toast { background: var(--paper); color: var(--paper-ink); padding: 10px 14px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }

/* ---------- 720 – 1000: one column, wider and bigger ---------- */
@media (min-width: 700px) {
  body { padding: 18px calc(var(--rail-w) + 36px) 36px 32px; row-gap: 18px; }
  :root { --rail-w: 50px; }
  .tube-addr { font-size: 12.5px; }
  .sign { font-size: 60px; }
  .sign-a, .sign-b { display: inline; }
  .nowline { font-size: 19px; }
  .slots { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .slot-n { font-size: 26px; }
  .counter { padding: 16px 18px 18px; }
  .sum-v { font-size: 21px; }
  .slip-big { font-size: 28px; }
}

/* ---------- ≥ 1000: the page recomposes — the desk left, the slip and the tape beside it ---------- */
@media (min-width: 1000px) {
  :root { --rail-w: 54px; }
  body {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 34px; row-gap: 18px;
    grid-template-rows: auto auto auto auto 1fr auto auto;
    grid-template-areas:
      "plate plate"
      "sign  slip"
      "now   slip"
      "counter roll"
      "menu  roll"
      "lookup roll"
      "base  base";
    max-width: calc(1160px + var(--rail-w) + 60px); margin: 0 auto;
    padding: 22px calc(var(--rail-w) + 40px) 40px 40px;
  }
  .sign { font-size: 60px; }
  .sign-a, .sign-b { display: block; }
  .nowline { font-size: 20px; }
  .slip, .roll { align-self: start; }
  .roll { position: sticky; top: 20px; }
  .roll-lines { max-height: 620px; }
  .slot-n { font-size: 30px; }
  .slot-who { font-size: 12px; }
  .tube-addr { font-size: 13.5px; }
  .tube-copy { font-size: 12px; padding: 12px 6px; }
}
@media (prefers-reduced-motion: reduce) { .slot, .roll-lines li { animation: none !important; transition: none !important; } }