/* ============================================================
 *  RDBD Pujo Queue — guest surface
 *
 *  Boxed. The page ground is the darker shell; every block of content sits
 *  on a cream card with a hairline border, so nothing floats.
 *
 *  Colour discipline read off the brand's own design:
 *    teal        every action, and short waits
 *    mustard     one highlight word, and kickers
 *    red         long waits, and opting out. Never a headline.
 *    brown / 70  ink and secondary ink
 *  Colour appears in two places only — the action and the wait number.
 *
 *  Oswald stands in for Railroad Gothic CC Bold, Hanken Grotesk for Haskoy.
 *  Both stand-ins are the brand's own.
 * ============================================================ */

:root{
  --mustard:#faa61a; --mustard-deep:#d98200; --mustard-tint:#fcefa6;
  --shell:#e8dfc6;                 /* page ground — makes the boxes read */
  --cream:#fffcdf;                 /* card surface */
  --edge:#ddd0a8;                  /* hairline on cream */
  --teal:#007c91; --teal-deep:#00606f;
  --brown:#4e2a18; --brown-70:#6b4a3a;
  --red:#d8342f;

  --font-display:"Oswald","Railroad Gothic CC","Arial Narrow",sans-serif;
  --font-body:"Hanken Grotesk","Haskoy",system-ui,-apple-system,sans-serif;
  --fast:120ms ease;
  --r:10px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);background:var(--shell);color:var(--brown);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;min-height:100vh;
}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}

.wrap{max-width:430px;margin:0 auto;padding:0 14px calc(120px + env(safe-area-inset-bottom))}

/* ---- the box ---- */
.box{background:var(--cream);border:1px solid var(--edge);border-radius:var(--r);
     padding:20px;margin-bottom:12px}
.box-tight{padding:8px 20px}
.box-h{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
       color:var(--brown-70);padding:16px 20px 10px;margin:0}

/* ---- type ---- */
.dsp{font-family:var(--font-display);font-weight:700;text-transform:uppercase;line-height:.98;
     letter-spacing:.01em}
.dsp-xl{font-size:46px}
.dsp-lg{font-size:36px}
.dsp-md{font-size:27px}
.hi{color:var(--mustard-deep)}
.eyebrow{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
         color:var(--brown-70)}
.lead{font-size:17px;line-height:1.5;color:var(--brown-70)}
.fine{font-size:15px;line-height:1.5;color:var(--brown-70)}

/* ---- top bar ---- */
.topbar{display:flex;align-items:baseline;gap:12px;padding:18px 6px 14px}
.wordmark{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:.08em;
          text-transform:uppercase;line-height:1}
.topbar-r{margin-left:auto;font-weight:700;font-size:12px;letter-spacing:.14em;
          text-transform:uppercase;color:var(--brown-70)}

/* ---- hero wait ---- */
.hero-name{font-family:var(--font-display);font-weight:700;font-size:40px;line-height:1;
           text-transform:uppercase;margin-top:8px}
.hero-wait{display:flex;align-items:baseline;gap:14px;margin-top:14px}
.hero-num{font-family:var(--font-display);font-weight:700;font-size:84px;line-height:.82;
          font-variant-numeric:tabular-nums}
.hero-unit{font-weight:700;font-size:17px}
.hero-sub{font-size:15px;color:var(--brown-70);margin-top:12px;
          padding-top:12px;border-top:1px solid var(--edge)}

.w-ok{color:var(--teal)} .w-mid{color:var(--mustard-deep)} .w-bad{color:var(--red)}

/* ---- rows ---- */
.row{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:none;
     border:none;border-top:1px solid var(--edge);padding:15px 20px;cursor:pointer;
     font-family:inherit;color:inherit}
.row:first-of-type{border-top:none}
.row:hover{background:#fdf8d2}
.row:disabled{opacity:.45;cursor:not-allowed}
.row-num{flex:0 0 60px;font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1;
         font-variant-numeric:tabular-nums}
.row-num small{display:block;font-family:var(--font-body);font-size:11px;font-weight:700;
               letter-spacing:.12em;color:var(--brown-70);margin-top:3px}
.row-main{flex:1;min-width:0}
.row-n{font-weight:700;font-size:17px}
.row-m{font-size:14px;color:var(--brown-70);margin-top:2px}
.row-go{flex:0 0 auto;font-family:var(--font-display);font-weight:600;font-size:15px;
        letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}

/* ---- key/value ---- */
.kv{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;
    border-bottom:1px solid var(--edge)}
.kv:last-child{border-bottom:none}
.kv-k{font-size:17px}
.kv-v{font-family:var(--font-display);font-weight:700;font-size:24px;font-variant-numeric:tabular-nums}

/* ---- buttons: every one is visible. no invisible text links. ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;
     padding:12px 20px;border:2px solid transparent;border-radius:var(--r);cursor:pointer;
     font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:.05em;
     text-transform:uppercase;text-decoration:none;margin-top:10px;transition:all var(--fast)}
.btn-go{background:var(--teal);border-color:var(--teal);color:var(--cream)}
.btn-go:hover{background:var(--teal-deep);border-color:var(--teal-deep)}
.btn-line{background:var(--cream);color:var(--teal);border-color:var(--teal)}
.btn-line:hover{background:#e6f1f3}
.btn-out{background:var(--cream);color:var(--brown);border-color:var(--brown)}
.btn-out:hover{background:#f6efc9}
.btn-leave{background:var(--cream);color:var(--red);border-color:var(--red)}
.btn-leave:hover{background:#fdeceb}
.btn:disabled{opacity:.4;cursor:not-allowed}
/* a button running straight into the next box reads as one blob */
.btn + .box{margin-top:12px}

/* ---- chips ---- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px}
.chip{flex:0 0 auto;border:2px solid var(--edge);background:var(--cream);color:var(--brown-70);
      border-radius:var(--r);padding:10px 16px;font-family:inherit;font-weight:700;font-size:14px;
      cursor:pointer;white-space:nowrap}
.chip.on{background:var(--brown);border-color:var(--brown);color:var(--cream)}

/* ---- party size ---- */
.sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.size{aspect-ratio:1;border:2px solid var(--edge);background:var(--cream);border-radius:var(--r);
      font-family:var(--font-display);font-weight:600;font-size:25px;color:var(--brown);cursor:pointer}
.size:hover{border-color:var(--brown-70)}
.size.on{background:var(--brown);border-color:var(--brown);color:var(--cream)}

/* ---- fields ---- */
.field{margin-top:18px}
.field:first-child{margin-top:0}
.lbl{display:block;font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
     color:var(--brown-70);margin-bottom:8px}
.inp{width:100%;border:2px solid var(--edge);border-radius:var(--r);background:#fff;
     padding:13px 14px;font-family:var(--font-body);font-size:19px;color:var(--brown)}
.inp::placeholder{color:#b9a184}
.inp:focus{outline:none;border-color:var(--teal)}
.err{font-size:15px;color:var(--red);margin-top:12px;font-weight:600}

/* ---- token ---- */
.token{text-align:center}
.token-v{font-family:var(--font-display);font-weight:700;font-size:92px;line-height:.9;
         font-variant-numeric:tabular-nums}
.live{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;
      color:var(--teal);margin-top:10px}
.live i{width:8px;height:8px;border-radius:50%;background:var(--teal);
        animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---- ready ---- */
.ready-num{font-family:var(--font-display);font-weight:700;font-size:76px;line-height:.9;
           text-align:center;font-variant-numeric:tabular-nums}
.hold{text-align:center;font-weight:700;font-size:16px;color:var(--red);margin-top:8px;
      font-variant-numeric:tabular-nums}

/* ---- menu ---- */
.dish{display:flex;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--edge)}
.dish:last-child{border-bottom:none}
.dish-n{flex:1;font-weight:700;font-size:17px}
.dish-d{font-size:14px;color:var(--brown-70);font-weight:400;margin-top:2px}
.dish-p{font-family:var(--font-display);font-weight:600;font-size:21px;color:var(--teal)}

/* ---- bottom nav ---- */
/* A bar attached to the bottom of the screen, not a card hovering over the
   content. Full-bleed ground so there is no shell showing beside it, a hairline
   top edge, and a soft lift so it reads as sitting above the page. */
.nav{position:fixed;bottom:0;left:0;right:0;background:var(--cream);
     border-top:1px solid var(--edge);box-shadow:0 -6px 18px rgba(78,42,24,.07);
     display:flex;justify-content:center;z-index:20;
     padding-bottom:env(safe-area-inset-bottom)}
.nav-in{display:flex;width:100%;max-width:430px;padding:0 14px}
.navb{flex:1;background:none;border:none;padding:16px 4px;cursor:pointer;font-family:var(--font-display);
      font-weight:600;font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--brown-70);
      border-top:3px solid transparent;margin-top:-1px}
.navb.on{color:var(--teal);border-top-color:var(--teal)}

/* ---- notes & states ---- */
.note{border-left:3px solid var(--mustard);padding:2px 0 2px 14px;font-size:16px;
      line-height:1.5;color:var(--brown-70)}
.note-red{border-left-color:var(--red)}
.empty{text-align:center;padding:36px 8px}
.empty-h{font-family:var(--font-display);font-weight:700;font-size:28px;text-transform:uppercase;
         line-height:1;margin-bottom:10px}
.empty-d{font-size:16px;color:var(--brown-70)}
.skel{background:var(--edge);opacity:.55;border-radius:4px;height:16px;
      animation:fade 1.4s ease-in-out infinite}
@keyframes fade{0%,100%{opacity:.55}50%{opacity:.25}}
.spin{width:16px;height:16px;border:2px solid rgba(255,252,223,.4);border-top-color:currentColor;
      border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--brown);
       color:var(--cream);border-radius:var(--r);padding:13px 20px;font-size:15px;opacity:0;
       pointer-events:none;transition:opacity var(--fast);z-index:60;max-width:86vw;text-align:center}
.toast.on{opacity:1}
.foot{padding:6px 8px 0;font-size:14px;color:var(--brown-70);text-align:center}

/* a token that has not been confirmed yet — placeholder, not the real number */
.token-hidden{font-family:var(--font-display);font-weight:700;font-size:92px;line-height:.9;
              color:var(--edge);letter-spacing:.12em}
/* the row for the size you picked */
.kv-on{background:#fdf6d0;margin:0 -20px;padding-left:20px;padding-right:20px}