/* =====================================================================
 * NubiEvents.Staff — component layer
 *
 * Hand-written, Tailwind-independent. Every value references a token from
 * nubievents-tokens.css — there is NO raw hex in this file. Dark-surface tints
 * (the plum sign-in screen) and semantic tints are derived with color-mix()
 * from plum / white / the gate palette, never a new literal.
 *
 * Real sizes, spacing and copy come from the design files named per block. The
 * off-scale figures the designs draw (48px count, 52px timer, 74px seat, radius
 * 18/15/13) are SNAPPED to the normalised system — the 8-step type scale, the two
 * display tokens (44 / 76) and the four radii (10 / 12 / 16 / pill). Snaps are
 * listed in the build report, not invented here.
 *
 * Carried over from guest step zero:
 *   1. Inputs sit at 16px (--ne-fs-16), never smaller — under 16px iOS Safari
 *      zooms the page on focus.
 *   2. font-variant-numeric:tabular-nums on every counting / ticking figure
 *      (PIN-lockout timer, order counts, table number, seat number).
 *   3. Semantic colour is MEANING, never decoration. Full-bleed semantic colour
 *      belongs to the gate result surface (.ne-result) and NOWHERE else.
 *
 * NFR-6: there is NO offline component. A dropped connection shows .ne-connlost
 * ("wait to reconnect"), never a queue-on-the-phone UI.
 * ===================================================================== */

/* =====================================================================
 * SHARED  (identical to the guest host — host-agnostic, token-only)
 * ===================================================================== */

/* ---- button --------------------------------------------------------- */
.ne-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--ne-space-8);
  font-family:var(--ne-font); font-weight:var(--ne-fw-800); line-height:1;
  border:1px solid transparent; border-radius:var(--ne-radius-input);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.ne-btn--sm{ font-size:var(--ne-fs-13); padding:var(--ne-space-8) var(--ne-space-12); }
.ne-btn--md{ font-size:var(--ne-fs-14); padding:var(--ne-space-12) var(--ne-space-16); }
.ne-btn--lg{ font-size:var(--ne-fs-16); padding:var(--ne-space-16) var(--ne-space-24); }
.ne-btn--block{ width:100%; }
.ne-btn--primary{ background:var(--ne-amethyst); color:var(--ne-white); }
.ne-btn--primary:hover{ background:var(--ne-amethyst-600); }
.ne-btn--secondary{ background:var(--ne-white); color:var(--ne-ink); border-color:var(--ne-line); }
.ne-btn--secondary:hover{ background:var(--ne-tint); }
.ne-btn--ghost{ background:transparent; color:var(--ne-muted); }
.ne-btn--ghost:hover{ color:var(--ne-amethyst); }
.ne-btn--danger{ background:var(--ne-invalid); color:var(--ne-white); }
.ne-btn--danger:hover{ background:color-mix(in srgb, var(--ne-invalid) 85%, var(--ne-ink)); }
.ne-btn:disabled, .ne-btn[disabled]{
  background:var(--ne-line); color:var(--ne-muted);
  border-color:transparent; cursor:not-allowed;
}

/* ---- card ------------------------------------------------------------ */
.ne-card{
  background:var(--ne-white); border:1px solid var(--ne-line);
  border-radius:var(--ne-radius-card); padding:var(--ne-space-16);
}
.ne-card--pad-lg{ padding:var(--ne-space-24); }
.ne-card--flush{ padding:0; overflow:hidden; }

/* ---- status pill (uppercase label pill) ------------------------------ */
.ne-pill{
  display:inline-flex; align-items:center; gap:var(--ne-space-4);
  font-size:var(--ne-fs-12); font-weight:var(--ne-fw-800);
  text-transform:uppercase; letter-spacing:.05em;
  padding:var(--ne-space-4) var(--ne-space-12); border-radius:var(--ne-radius-pill);
  background:var(--ne-plum); color:var(--ne-white);
}
.ne-pill--muted{ background:var(--ne-tint); color:var(--ne-muted); }
.ne-pill--ok{ background:color-mix(in srgb, var(--ne-valid) 12%, var(--ne-white)); color:var(--ne-valid); }
.ne-pill--warn{ background:color-mix(in srgb, var(--ne-warning) 14%, var(--ne-white)); color:var(--ne-warning); }
.ne-pill--danger{ background:color-mix(in srgb, var(--ne-invalid) 10%, var(--ne-white)); color:var(--ne-invalid); }

/* ---- list row -------------------------------------------------------- */
.ne-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--ne-space-12); padding:var(--ne-space-16);
  border:1px solid var(--ne-line); border-radius:var(--ne-radius-card);
  background:var(--ne-white);
}
.ne-row__label{ font-size:var(--ne-fs-14); font-weight:var(--ne-fw-800); color:var(--ne-ink); }
.ne-row__value{ font-size:var(--ne-fs-14); font-weight:var(--ne-fw-800); color:var(--ne-ink); }

/* ---- form field + inline error --------------------------------------- */
.ne-field{ display:flex; flex-direction:column; gap:var(--ne-space-8); }
.ne-label{ font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800); color:var(--ne-ink); }
.ne-input{
  width:100%; padding:var(--ne-space-16);
  border:2px solid var(--ne-line); border-radius:var(--ne-radius-input);
  background:var(--ne-white); color:var(--ne-ink);
  font-family:var(--ne-font);
  font-size:var(--ne-fs-16);          /* OVERRIDE 1 — never below 16px */
  font-weight:var(--ne-fw-700); outline:none;
}
.ne-input::placeholder{ color:var(--ne-muted); font-weight:var(--ne-fw-600); }
.ne-input:focus{ border-color:var(--ne-amethyst); }
.ne-input--error{ border-color:var(--ne-invalid); }
.ne-hint{ font-size:var(--ne-fs-12); font-weight:var(--ne-fw-600); color:var(--ne-muted); }
.ne-error{
  padding:var(--ne-space-12) var(--ne-space-16); border-radius:var(--ne-radius-input);
  background:color-mix(in srgb, var(--ne-invalid) 8%, var(--ne-white));
  border:1px solid color-mix(in srgb, var(--ne-invalid) 30%, var(--ne-white));
  color:var(--ne-invalid);
  font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800); line-height:1.5;
}

/* ---- empty state ----------------------------------------------------- */
.ne-empty{
  text-align:center; padding:var(--ne-space-32) var(--ne-space-24);
  border:1px solid var(--ne-line); border-radius:var(--ne-radius-card);
  background:var(--ne-white);
}
.ne-empty__icon{
  width:80px; height:80px; margin:0 auto var(--ne-space-16);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--ne-fs-34);
  background:var(--ne-white); border:1px solid var(--ne-line);
  border-radius:var(--ne-radius-card);
}
.ne-empty__title{ font-size:var(--ne-fs-26); font-weight:var(--ne-fw-800); color:var(--ne-ink); }
.ne-empty__body{
  margin-top:var(--ne-space-8); max-width:440px; margin-inline:auto;
  font-size:var(--ne-fs-16); font-weight:var(--ne-fw-600); color:var(--ne-muted); line-height:1.55;
}
.ne-empty__stat{ margin-top:var(--ne-space-16); font-size:var(--ne-fs-14); font-weight:var(--ne-fw-800); color:var(--ne-amethyst); }

/* ---- section header -------------------------------------------------- */
.ne-section-header{
  font-size:var(--ne-fs-14); font-weight:var(--ne-fw-800); color:var(--ne-muted);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:var(--ne-space-16);
}

/* =====================================================================
 * STAFF — numeric keypad  (S-01 gate, K-01 kitchen, SP-1..4)
 * ONE keypad. It lives on the plum sign-in surface; all tints below are
 * color-mix() of plum / white / lilac — no literal dark hex.
 * ===================================================================== */
.ne-signin{
  min-height:100%; display:flex; flex-direction:column;
  padding:var(--ne-space-24) var(--ne-space-24) var(--ne-space-24);
  background:var(--ne-plum); color:var(--ne-white);
}
.ne-signin__eyebrow{
  font-size:var(--ne-fs-12); font-weight:var(--ne-fw-800); color:var(--ne-lilac);
  text-transform:uppercase; letter-spacing:.08em;
}
.ne-signin__title{
  font-size:var(--ne-fs-26); font-weight:var(--ne-fw-800); color:var(--ne-white);
  margin-top:var(--ne-space-8); letter-spacing:-0.02em;
}
/* staff code — read-only, the post the phone is signed to (GATE-04). */
.ne-signin__codelabel{
  display:block; font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800);
  color:var(--ne-lilac); margin:var(--ne-space-16) 0 var(--ne-space-8);
}
.ne-signin__code{
  padding:var(--ne-space-16); border-radius:var(--ne-radius-input);
  background:color-mix(in srgb, var(--ne-white) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--ne-lilac) 32%, var(--ne-plum));
  font-size:var(--ne-fs-16); font-weight:var(--ne-fw-800);
  color:color-mix(in srgb, var(--ne-lilac) 60%, var(--ne-white));
}
.ne-signin__code--filled{ color:var(--ne-white); }
.ne-signin__code--error{ border:2px solid var(--ne-invalid); color:var(--ne-white); }

.ne-signin__prompt{ text-align:center; font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800); color:var(--ne-lilac); }

/* PIN dots — six, empty by default, filled solid white as digits arrive. */
.ne-pindots{ display:flex; justify-content:center; gap:var(--ne-space-12); margin-top:var(--ne-space-16); }
.ne-pindots__dot{
  width:17px; height:17px; border-radius:var(--ne-radius-pill);
  border:2px solid color-mix(in srgb, var(--ne-lilac) 45%, var(--ne-plum));
}
.ne-pindots__dot--filled{ background:var(--ne-white); border-color:var(--ne-white); }

/* keypad — 3-column grid, 76px keys. */
.ne-keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--ne-space-12); }
.ne-keypad__key{
  height:76px; border:none; border-radius:var(--ne-radius-card);
  background:color-mix(in srgb, var(--ne-white) 9%, transparent);
  color:var(--ne-white); font-family:var(--ne-font);
  font-size:var(--ne-fs-26); font-weight:var(--ne-fw-800);
  font-variant-numeric:tabular-nums;    /* OVERRIDE 2 */
}
.ne-keypad__key:active{ background:color-mix(in srgb, var(--ne-white) 16%, transparent); }
.ne-keypad__key--back{ background:transparent; color:var(--ne-lilac); font-size:var(--ne-fs-20); }

.ne-signin__submit{
  width:100%; margin-top:var(--ne-space-16); padding:var(--ne-space-16);
  border:none; border-radius:var(--ne-radius-input);
  background:var(--ne-amethyst); color:var(--ne-white);
  font-family:var(--ne-font); font-size:var(--ne-fs-16); font-weight:var(--ne-fw-800);
}
.ne-signin__submit:disabled{
  background:color-mix(in srgb, var(--ne-lilac) 28%, var(--ne-plum));
  color:color-mix(in srgb, var(--ne-lilac) 55%, var(--ne-muted));
}

/* wrong code / PIN banner (SP-3) — semantic invalid, ON the plum surface. */
.ne-signin__alert{
  margin-top:var(--ne-space-12); padding:var(--ne-space-12) var(--ne-space-16);
  border-radius:var(--ne-radius-input);
  background:color-mix(in srgb, var(--ne-invalid) 32%, var(--ne-plum));
  border:1px solid var(--ne-invalid);
}
.ne-signin__alert-title{ font-size:var(--ne-fs-14); font-weight:var(--ne-fw-800); color:var(--ne-white); line-height:1.45; }
.ne-signin__alert-body{
  margin-top:var(--ne-space-4); font-size:var(--ne-fs-13); font-weight:var(--ne-fw-700);
  color:color-mix(in srgb, var(--ne-invalid) 28%, var(--ne-white)); line-height:1.5;
}
/* recover the wrong code from inside the error banner (SP-3). */
.ne-signin__alert-action{
  display:inline-block; margin-top:var(--ne-space-8);
  font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800);
  color:var(--ne-white); text-decoration:underline;
}
.ne-spacer{ flex:1; }

/* sign-in framing — the SP artboard is a fixed 390x844 phone card
 * (docs/design SP-1: `.screen{width:390px;min-height:844px}`). The frame fills the
 * window and CENTRES the card, so on desktop it stays a phone-width card on the
 * artboard tint and never stretches, and on a phone the card fills the viewport.
 * Escapes EmptyLayout's brand badge + padding, which is what made it overflow. */
.ne-signin-frame{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#E9E4F0;
}
.ne-signin--card{
  width:390px; max-width:100%;      /* MATCHES the design's width:390px, capped */
  height:100%; max-height:844px; min-height:0;   /* one screen, never taller than the artboard */
}

/* ---- locked-out panel (SP-4) — five wrong PINs, device paused --------- */
.ne-lockout{
  min-height:100%; display:flex; flex-direction:column;
  padding:var(--ne-space-24); background:var(--ne-plum); color:var(--ne-white);
}
.ne-lockout__icon{
  width:60px; height:60px; border-radius:var(--ne-radius-card);
  background:color-mix(in srgb, var(--ne-white) 9%, transparent);
  display:flex; align-items:center; justify-content:center; font-size:var(--ne-fs-26);
}
.ne-lockout__title{ font-size:var(--ne-fs-26); font-weight:var(--ne-fw-800); color:var(--ne-white); margin-top:var(--ne-space-16); line-height:1.2; }
.ne-lockout__body{ margin-top:var(--ne-space-12); font-size:var(--ne-fs-16); font-weight:var(--ne-fw-600); color:var(--ne-lilac); line-height:1.6; }
.ne-lockout__timer{
  margin-top:var(--ne-space-16); padding:var(--ne-space-16);
  border-radius:var(--ne-radius-card); text-align:center;
  background:color-mix(in srgb, var(--ne-white) 8%, transparent);
}
.ne-lockout__timer-label{ font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800); color:var(--ne-lilac); text-transform:uppercase; letter-spacing:.06em; }
.ne-lockout__timer-value{
  font-size:var(--ne-fs-hero); font-weight:var(--ne-fw-800); color:var(--ne-white);
  line-height:1.1; margin-top:var(--ne-space-4); font-variant-numeric:tabular-nums;  /* OVERRIDE 2 */
}
.ne-lockout__note{
  margin-top:var(--ne-space-16); padding:var(--ne-space-16);
  border-radius:var(--ne-radius-input);
  background:color-mix(in srgb, var(--ne-white) 8%, transparent);
  font-size:var(--ne-fs-14); font-weight:var(--ne-fw-700); color:var(--ne-white); line-height:1.55;
}
.ne-lockout__foot{ text-align:center; font-size:var(--ne-fs-13); font-weight:var(--ne-fw-700); color:color-mix(in srgb, var(--ne-lilac) 60%, var(--ne-muted)); margin-top:var(--ne-space-12); }

/* =====================================================================
 * STAFF — tab bars
 * ===================================================================== */
/* segmented control on the plum kitchen header (K-02) */
.ne-tabbar{
  display:inline-flex; gap:var(--ne-space-8); padding:var(--ne-space-4);
  border-radius:var(--ne-radius-input);
  background:color-mix(in srgb, var(--ne-white) 6%, transparent);
}
.ne-tabbar__tab{
  padding:var(--ne-space-8) var(--ne-space-16); border:none; border-radius:var(--ne-radius-control);
  background:transparent; color:var(--ne-lilac);
  font-family:var(--ne-font); font-size:var(--ne-fs-14); font-weight:var(--ne-fw-800);
}
.ne-tabbar__tab--active{ background:var(--ne-amethyst); color:var(--ne-white); }

/* underline tabs on a light surface — category picker (W-03) */
.ne-tabs{ display:flex; gap:var(--ne-space-16); border-bottom:1px solid var(--ne-line); }
.ne-tabs__tab{
  padding:var(--ne-space-8) var(--ne-space-4); border:none; background:transparent;
  border-bottom:3px solid transparent;
  font-family:var(--ne-font); font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800); color:var(--ne-muted);
}
.ne-tabs__tab--active{ color:var(--ne-ink); border-bottom-color:var(--ne-amethyst); }

/* =====================================================================
 * STAFF — kitchen order card  (K-02)
 * ===================================================================== */
.ne-ordercard{
  background:var(--ne-white); border:1px solid var(--ne-line);
  border-radius:var(--ne-radius-card); padding:var(--ne-space-24);
  display:flex; flex-direction:column; gap:var(--ne-space-12);
}
.ne-ordercard__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--ne-space-12); }
.ne-ordercard__count{
  font-size:var(--ne-fs-hero); font-weight:var(--ne-fw-800); color:var(--ne-plum);
  line-height:1; font-variant-numeric:tabular-nums;   /* OVERRIDE 2 */
}
.ne-ordercard__times{ font-size:var(--ne-fs-16); font-weight:var(--ne-fw-800); color:var(--ne-amethyst); margin-left:var(--ne-space-8); }
.ne-ordercard__title{ font-size:var(--ne-fs-20); font-weight:var(--ne-fw-800); color:var(--ne-plum); line-height:1.15; }
.ne-ordercard__who{ display:flex; flex-direction:column; gap:var(--ne-space-4); }
.ne-ordercard__who span{ font-size:var(--ne-fs-12); font-weight:var(--ne-fw-600); color:var(--ne-muted); }
.ne-ordercard__action{
  margin-top:auto; width:100%; padding:var(--ne-space-16); border:none;
  border-radius:var(--ne-radius-input);
  font-family:var(--ne-font); font-size:var(--ne-fs-16); font-weight:var(--ne-fw-800); color:var(--ne-white);
}
.ne-ordercard__action--start{ background:var(--ne-amethyst); }
.ne-ordercard__action--ready{ background:var(--ne-valid); }     /* semantic: advances to Ready */
.ne-ordercard__action--handed{ background:var(--ne-plum); }
/* the collapsed-plates line ("+3 more") when a card exceeds the plate cap. */
.ne-ordercard__more{ font-size:var(--ne-fs-12); font-weight:var(--ne-fw-800); color:var(--ne-amethyst); }

/* =====================================================================
 * STAFF — kitchen filter drawer + hamburger (NO design file; built in the
 * design's language — plum surface, amethyst active, ne-* radii/weights).
 * ===================================================================== */
/* icon button that lives on the plum topbar / drawer (white glyph, subtle hover). */
.ne-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--ne-space-8); border:none; border-radius:var(--ne-radius-control);
  background:transparent; color:var(--ne-white);
  font-family:var(--ne-font); font-size:var(--ne-fs-20); font-weight:var(--ne-fw-800);
}
.ne-iconbtn:hover{ background:color-mix(in srgb, var(--ne-white) 12%, transparent); }
.ne-drawer__title{ font-size:var(--ne-fs-20); font-weight:var(--ne-fw-800); color:var(--ne-white); }
.ne-drawer__list{ display:flex; flex-direction:column; gap:var(--ne-space-8); margin-top:var(--ne-space-24); }
/* one status-filter row — mirrors the tabbar's resting/active treatment. */
.ne-filter{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ne-space-12);
  width:100%; padding:var(--ne-space-12) var(--ne-space-16);
  border:none; border-radius:var(--ne-radius-input);
  background:color-mix(in srgb, var(--ne-white) 6%, transparent); color:var(--ne-lilac);
  font-family:var(--ne-font); font-size:var(--ne-fs-16); font-weight:var(--ne-fw-800); text-align:left;
}
.ne-filter--active{ background:var(--ne-amethyst); color:var(--ne-white); }
.ne-filter__count{ font-variant-numeric:tabular-nums; }

/* kitchen state chip — SOLID, carries the order's state (meaning, not decor). */
.ne-statechip{
  display:inline-flex; align-items:center;
  font-size:var(--ne-fs-12); font-weight:var(--ne-fw-800); color:var(--ne-white);
  padding:var(--ne-space-4) var(--ne-space-12); border-radius:var(--ne-radius-pill);
}
.ne-statechip--new{ background:var(--ne-invalid); }
.ne-statechip--cooking{ background:var(--ne-warning); }
.ne-statechip--ready{ background:var(--ne-valid); }

/* =====================================================================
 * STAFF — availability toggle row  (K-04)
 * ===================================================================== */
.ne-toggle-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ne-space-16);
  background:var(--ne-white); border:1px solid var(--ne-line);
  border-radius:var(--ne-radius-card); padding:var(--ne-space-16) var(--ne-space-24);
}
.ne-toggle-row__name{ font-size:var(--ne-fs-16); font-weight:var(--ne-fw-800); color:var(--ne-plum); }
.ne-toggle{
  flex:none; padding:var(--ne-space-12) var(--ne-space-24); border:none;
  border-radius:var(--ne-radius-input);
  font-family:var(--ne-font); font-size:var(--ne-fs-14); font-weight:var(--ne-fw-800); color:var(--ne-white);
}
.ne-toggle--available{ background:var(--ne-valid); }   /* semantic: in stock */
.ne-toggle--soldout{ background:var(--ne-invalid); }    /* semantic: sold out */

/* =====================================================================
 * STAFF — full-bleed gate result surface  (S-03/S-03b valid, S-04/S-04b invalid)
 * THE ONLY place full-bleed semantic colour is allowed.
 * ===================================================================== */
.ne-result{
  min-height:100%; display:flex; flex-direction:column; text-align:center;
  padding:var(--ne-space-24); color:var(--ne-white);
}
.ne-result--valid{ background:var(--ne-valid); }
.ne-result--invalid{ background:var(--ne-invalid); align-items:center; justify-content:center; }
.ne-result__badge{
  display:flex; align-items:center; justify-content:center;
  width:78px; height:78px; border-radius:var(--ne-radius-pill);
  background:color-mix(in srgb, var(--ne-white) 18%, transparent); font-size:var(--ne-fs-hero);
}
.ne-result__badge--sm{ width:40px; height:40px; font-size:var(--ne-fs-26); }
.ne-result__title{ font-size:var(--ne-fs-34); font-weight:var(--ne-fw-800); letter-spacing:.03em; }
.ne-result__eyebrow{ margin-top:var(--ne-space-24); font-size:var(--ne-fs-14); font-weight:var(--ne-fw-700); color:color-mix(in srgb, var(--ne-white) 62%, var(--ne-valid)); text-transform:uppercase; letter-spacing:.05em; }
.ne-result__figure{
  font-size:var(--ne-fs-hero-xl); font-weight:var(--ne-fw-800); line-height:1;
  margin-top:var(--ne-space-4); font-variant-numeric:tabular-nums;   /* OVERRIDE 2 */
}
.ne-result__panel{
  margin-top:var(--ne-space-24); padding:var(--ne-space-16);
  border-radius:var(--ne-radius-card);
  background:color-mix(in srgb, var(--ne-white) 12%, transparent);
}
.ne-result__panel-label{ font-size:var(--ne-fs-13); font-weight:var(--ne-fw-700); color:color-mix(in srgb, var(--ne-white) 62%, var(--ne-valid)); text-transform:uppercase; letter-spacing:.04em; }
/* wristband swatch — the colour is DATA (per ticket type, one of six), set by
   the caller as --ne-band-color; the component CSS holds no literal. */
.ne-result__swatch{
  width:56px; height:56px; border-radius:var(--ne-radius-card);
  background:var(--ne-band-color, var(--ne-lilac));
  border:3px solid var(--ne-white); box-shadow:var(--ne-shadow);
}
.ne-result__name{ margin-top:var(--ne-space-24); font-size:var(--ne-fs-20); font-weight:var(--ne-fw-800); line-height:1.35; word-break:break-word; }
.ne-result__sub{ font-size:var(--ne-fs-14); font-weight:var(--ne-fw-600); color:color-mix(in srgb, var(--ne-white) 78%, var(--ne-valid)); }
.ne-result__body{ margin-top:var(--ne-space-16); font-size:var(--ne-fs-16); font-weight:var(--ne-fw-700); line-height:1.5; }
.ne-result__note{
  margin-top:var(--ne-space-16); padding:var(--ne-space-16); border-radius:var(--ne-radius-input);
  background:color-mix(in srgb, var(--ne-white) 14%, transparent);
  font-size:var(--ne-fs-14); font-weight:var(--ne-fw-700); line-height:1.5;
}
/* white "next guest" button — text inherits the surface's semantic colour. */
.ne-result__action{
  width:100%; margin-top:var(--ne-space-24); padding:var(--ne-space-16); border:none;
  border-radius:var(--ne-radius-input); background:var(--ne-white);
  font-family:var(--ne-font); font-size:var(--ne-fs-16); font-weight:var(--ne-fw-800);
}
.ne-result--valid .ne-result__action{ color:var(--ne-valid); }
.ne-result--invalid .ne-result__action{ color:var(--ne-invalid); }
.ne-result--invalid .ne-result__eyebrow,
.ne-result--invalid .ne-result__panel-label,
.ne-result--invalid .ne-result__sub{ color:color-mix(in srgb, var(--ne-white) 70%, var(--ne-invalid)); }

/* =====================================================================
 * STAFF — waiter table card  (W-02)
 * ===================================================================== */
.ne-tablecard{
  background:var(--ne-white); border:1px solid var(--ne-line);
  border-radius:var(--ne-radius-card); padding:var(--ne-space-16);
}
.ne-tablecard__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--ne-space-12); }
.ne-tablecard__num{ font-size:var(--ne-fs-26); font-weight:var(--ne-fw-800); color:var(--ne-plum); line-height:1.05; font-variant-numeric:tabular-nums; }
.ne-tablecard__meta{ font-size:var(--ne-fs-12); font-weight:var(--ne-fw-600); color:var(--ne-muted); }
.ne-tablecard__take{
  flex:none; padding:var(--ne-space-12) var(--ne-space-16); border:none;
  border-radius:var(--ne-radius-input); background:var(--ne-amethyst); color:var(--ne-white);
  font-family:var(--ne-font); font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800);
}
/* pool remaining chips */
.ne-pool{ display:flex; flex-wrap:wrap; gap:var(--ne-space-4) var(--ne-space-12); margin-top:var(--ne-space-12); padding-bottom:var(--ne-space-12); border-bottom:1px solid var(--ne-tint); }
.ne-pool__item{ font-size:var(--ne-fs-12); font-weight:var(--ne-fw-800); color:var(--ne-plum); font-variant-numeric:tabular-nums; }
.ne-pool__item--none{ font-weight:var(--ne-fw-700); color:var(--ne-muted); }
/* per-guest order line */
.ne-orderline{ padding:var(--ne-space-12) 0; border-bottom:1px solid var(--ne-tint); }
.ne-orderline__row{ display:flex; justify-content:space-between; gap:var(--ne-space-8); }
.ne-orderline__text{ font-size:var(--ne-fs-14); color:var(--ne-plum); min-width:0; }
.ne-orderline__text b{ font-weight:var(--ne-fw-800); }
.ne-orderline__actions{ display:flex; gap:var(--ne-space-8); margin-top:var(--ne-space-8); }
.ne-orderline__return{ font-size:var(--ne-fs-11); font-weight:var(--ne-fw-700); color:var(--ne-valid); margin-top:var(--ne-space-4); }
.ne-orderline__empty{ padding:var(--ne-space-12) 0; font-size:var(--ne-fs-12); font-weight:var(--ne-fw-700); color:var(--ne-muted); }
.ne-tablecard__note{
  margin-top:var(--ne-space-12); padding:var(--ne-space-8) var(--ne-space-12);
  border-radius:var(--ne-radius-control); background:var(--ne-tint);
  font-size:var(--ne-fs-12); font-weight:var(--ne-fw-700); color:var(--ne-muted); line-height:1.4;
}

/* waiter status chip — TINTED (light bg, semantic text), not uppercase. */
.ne-statuschip{
  display:inline-flex; align-items:center; flex:none;
  font-size:var(--ne-fs-11); font-weight:var(--ne-fw-800);
  padding:var(--ne-space-4) var(--ne-space-8); border-radius:var(--ne-radius-pill);
}
.ne-statuschip--new{ background:color-mix(in srgb, var(--ne-invalid) 10%, var(--ne-white)); color:var(--ne-invalid); }
.ne-statuschip--cooking{ background:color-mix(in srgb, var(--ne-warning) 14%, var(--ne-white)); color:var(--ne-warning); }
.ne-statuschip--ready{ background:color-mix(in srgb, var(--ne-valid) 12%, var(--ne-white)); color:var(--ne-valid); }
.ne-statuschip--delivered{ background:var(--ne-tint); color:var(--ne-ink); }
.ne-statuschip--cancelled{ background:color-mix(in srgb, var(--ne-invalid) 10%, var(--ne-white)); color:var(--ne-invalid); }

/* small line-action buttons (Delivered / Cancel) */
.ne-lineaction{ padding:var(--ne-space-8) var(--ne-space-12); border:1px solid transparent; border-radius:var(--ne-radius-control); font-family:var(--ne-font); font-size:var(--ne-fs-12); font-weight:var(--ne-fw-800); }
.ne-lineaction--deliver{ background:var(--ne-valid); color:var(--ne-white); }
.ne-lineaction--cancel{ background:var(--ne-white); color:var(--ne-invalid); border-color:var(--ne-danger-border, color-mix(in srgb, var(--ne-invalid) 35%, var(--ne-white))); }

/* =====================================================================
 * STAFF — take-order pieces  (W-03)
 * ===================================================================== */
.ne-whochip{
  padding:var(--ne-space-8) var(--ne-space-16); border-radius:var(--ne-radius-pill);
  border:1px solid var(--ne-line); background:var(--ne-white); color:var(--ne-ink);
  font-family:var(--ne-font); font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800);
}
.ne-whochip--selected{ border:2px solid var(--ne-amethyst); background:var(--ne-tint); }

.ne-itemrow{ display:flex; align-items:center; justify-content:space-between; gap:var(--ne-space-12); padding:var(--ne-space-12) 0; border-bottom:1px solid var(--ne-line); }
.ne-itemrow__name{ font-size:var(--ne-fs-14); font-weight:var(--ne-fw-800); color:var(--ne-plum); }
.ne-itemrow__desc{ font-size:var(--ne-fs-12); font-weight:var(--ne-fw-600); color:var(--ne-muted); }
.ne-itemrow__add{
  flex:none; padding:var(--ne-space-8) var(--ne-space-16); border:none;
  border-radius:var(--ne-radius-input); background:var(--ne-amethyst); color:var(--ne-white);
  font-family:var(--ne-font); font-size:var(--ne-fs-13); font-weight:var(--ne-fw-800); white-space:nowrap;
}
.ne-itemrow__add:disabled, .ne-itemrow__add--soldout{ background:var(--ne-line); color:var(--ne-muted); cursor:not-allowed; }

/* ---- quantity stepper (shared with guest G-03) ----------------------- */
.ne-stepper{ display:inline-flex; align-items:center; gap:var(--ne-space-16); }
.ne-stepper__btn{
  width:40px; height:40px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--ne-line); border-radius:var(--ne-radius-input);
  background:var(--ne-tint); color:var(--ne-amethyst);
  font-size:var(--ne-fs-20); font-weight:var(--ne-fw-800); line-height:1; cursor:pointer;
}
.ne-stepper__btn:disabled{ color:var(--ne-muted); opacity:.6; cursor:not-allowed; }
.ne-stepper__value{
  min-width:26px; text-align:center;
  font-size:var(--ne-fs-20); font-weight:var(--ne-fw-800); color:var(--ne-ink);
  font-variant-numeric:tabular-nums;   /* OVERRIDE 2 */
}

/* =====================================================================
 * STAFF — connection-dropped banner  (NFR-6 — REPLACES every offline screen)
 * There is no queue-on-the-phone. A dropped device cannot hold the row lock,
 * so it must stop and wait, loudly. Semantic WARNING, not invalid.
 * ===================================================================== */
.ne-connlost{
  display:flex; align-items:flex-start; gap:var(--ne-space-12);
  padding:var(--ne-space-16); border-radius:var(--ne-radius-card);
  background:color-mix(in srgb, var(--ne-warning) 12%, var(--ne-white));
  border:1px solid color-mix(in srgb, var(--ne-warning) 32%, var(--ne-white));
}
.ne-connlost__dot{ width:12px; height:12px; flex:none; margin-top:var(--ne-space-4); border-radius:var(--ne-radius-pill); background:var(--ne-warning); }
.ne-connlost__title{ font-size:var(--ne-fs-14); font-weight:var(--ne-fw-800); color:var(--ne-warning); }
.ne-connlost__body{ margin-top:var(--ne-space-4); font-size:var(--ne-fs-13); font-weight:var(--ne-fw-700); color:var(--ne-muted); line-height:1.5; }

/* =====================================================================
 * /_components gallery scaffold  (cs-*) — dev sheet chrome only.
 * ===================================================================== */
.cs-wrap{
  max-width:760px; margin:0 auto; padding:var(--ne-space-24) var(--ne-space-16);
  display:flex; flex-direction:column; gap:var(--ne-space-24);
  font-family:var(--ne-font); color:var(--ne-ink);
}
.cs-title{ font-size:var(--ne-fs-26); font-weight:var(--ne-fw-800); color:var(--ne-ink); }
.cs-note{ font-size:var(--ne-fs-13); font-weight:var(--ne-fw-600); color:var(--ne-muted); line-height:1.5; }
.cs-group{
  background:var(--ne-white); border:1px solid var(--ne-line);
  border-radius:var(--ne-radius-card); padding:var(--ne-space-16);
  display:flex; flex-direction:column; gap:var(--ne-space-16);
}
.cs-group__title{ font-size:var(--ne-fs-16); font-weight:var(--ne-fw-800); color:var(--ne-ink); }
.cs-item{ display:flex; flex-direction:column; gap:var(--ne-space-8); }
.cs-tag{ font-size:var(--ne-fs-11); font-weight:var(--ne-fw-700); color:var(--ne-muted); text-transform:uppercase; letter-spacing:.06em; }
.cs-stack{ display:flex; flex-direction:column; gap:var(--ne-space-12); }
.cs-inline{ display:flex; flex-wrap:wrap; gap:var(--ne-space-12); align-items:center; }
.cs-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--ne-space-16); }
/* a 390px phone frame for the full-screen plum / result mobiles */
.cs-phone{ width:390px; max-width:100%; min-height:560px; border-radius:var(--ne-radius-card); overflow:hidden; border:1px solid var(--ne-line); display:flex; }
.cs-phone > *{ flex:1; }
.cs-divider{ height:1px; background:var(--ne-line); margin:var(--ne-space-8) 0; }