/* =========================================================
   Hebi Kitchen — desk styles

   Read across a counter, in a lit kitchen, by someone holding a knife. Three
   rules follow from that:

   1. The screen answers one question at a glance — what needs doing next.
      The queue is one list, oldest first, because the order at the top is the
      one going cold. State is a stripe down the left edge and a count on the
      filter above, so the shape of the night is still readable without
      reading a word. Everything a row does not need lives one tap away in
      the sheet.
   1b. Nothing on a row is a call to action. Moving an order along is a
      *status change*, so it is one control of one shape on every row — a
      select showing where the order stands now — never a button that shouts
      a different verb and a different colour per stage.
   2. Colour is state. Gold is new, amber is cooking, blue is out, green is
      done — and the same four colours run through the pills, the column
      dots and the urgency rail, so they are learned once.
   3. It is still Hebi — same warm near-blacks, same gold-as-hairline — but
      the site's display serif stays on the site. This screen is geometric
      sans throughout: Montserrat, tightly tracked, for figures and headings,
      Onest for everything that has to be read quickly.
   ========================================================= */
:root{
  color-scheme:dark;

  /* ---- ground: four steps, none of them pure black ---- */
  --ink:        #0B0A09;
  --ink-1:      #100E0D;
  --ink-2:      #16130F;
  --raise:      #1C1A17;
  --surface:    #1D1D1F;
  --surface-2:  #262628;

  --white:      #F3F3F2;   /* primary text */
  --muted:      #9C9C9B;
  --faint:      #6A6A69;

  /* Gold is two things and they must not be confused. The three below are a
     *material* — the gradient on the primary button, the logo's own ramp.
     --gold-ink is gold used as ink: text, icons, the focus ring. On paper the
     material stays as it is and the ink goes dark, which is why they are
     separate tokens rather than one. */
  --gold-lift:  #F5E7A2;
  --gold:       #EBD55C;
  --gold-deep:  #96783E;
  --gold-dark:  #755923;
  --gold-ink:   #EBD55C;
  --on-gold:    #1A1508;   /* text sitting on the gold material */

  --hair:       rgba(255,255,255,.075);
  --hair-2:     rgba(255,255,255,.14);
  --hair-3:     rgba(255,255,255,.24);
  --hover:      rgba(255,255,255,.05);
  --hover-2:    rgba(255,255,255,.06);

  /* ---- state: one hue per stage, reused everywhere ----
     Every border, tint and wash in the sheet is mixed from these five in
     `color-mix`, so a theme only has to restate the five. */
  --s-new:      #EBD55C;
  --s-cook:     #E0A33C;
  --s-away:     #8FB3E6;
  --s-done:     #8FBE6E;
  --s-dead:     #D9614F;

  --tint-new:   rgba(235,213,92,.10);
  --tint-cook:  rgba(224,163,60,.10);
  --tint-away:  rgba(143,179,230,.10);
  --tint-done:  rgba(143,190,110,.12);
  --tint-dead:  rgba(217,97,79,.12);

  /* Text that sits *on* one of those tints needs more lift than the hue
     itself has — on a near-black ground that means going lighter. */
  --on-new:     #F5E7A2;
  --on-cook:    #F0C98A;
  --on-away:    #B9D0F0;
  --on-done:    #B6D79C;
  --on-dead:    #E99384;

  /* ---- surfaces that float ---- */
  --bar-bg:        rgba(16,14,13,.86);
  --bar-bg-closed: rgba(38,17,14,.86);
  --toast-bg:      rgba(38,38,40,.96);
  --scrim-bg:      rgba(4,3,3,.6);

  /* One highlight, reused: it is what makes a dark panel read as a made
     object rather than a hole in the page. On paper there is no hole to
     avoid, so it becomes a shadow instead. */
  --lift:          inset 0 1px 0 rgba(255,255,255,.045);
  --shadow-gold:   0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px -10px rgba(235,213,92,.7);
  --shadow-card:   0 40px 80px -50px #000;
  --shadow-menu:   0 24px 50px -24px #000;
  --shadow-sheet:  -30px 0 70px -40px #000;
  --shadow-toast:  0 20px 40px -24px #000;

  --font:  'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
           'Noto Sans Armenian', sans-serif;
  /* Geometric, high x-height, straight-sided — the Gotham register. It runs
     a good deal larger than a Garamond at the same px, so every display size
     below is set for this face, not adapted from one. */
  --display: 'Montserrat', 'Onest', ui-sans-serif, system-ui, -apple-system,
             'Segoe UI', 'Noto Sans Armenian', sans-serif;
  --tight: -.02em;

  --r:      12px;
  --r-sm:   9px;
  /* --bar-min sizes the bar. --bar-h is the bar's *measured* height, written
     by script, and is only ever read by things stuck beneath it — never by
     the bar itself, or measuring it would drive its own height. */
  --bar-min: 58px;
  --bar-h:   58px;
}

/* ---------------------------------------------------- paper

   The same design in a lit room. Not an inversion: the golds and the five
   state hues go *down* in lightness rather than up, because a hue that reads
   as bright on near-black reads as washed-out on paper. The material golds
   (the button, the logo) are left alone — they are the same physical gold in
   both rooms.

   Script resolves "system" to an explicit data-theme before first paint, so
   this needs only the one selector. */
:root[data-theme="light"]{
  color-scheme:light;

  --ink:        #F2EFE9;   /* warm paper, never #fff */
  --ink-1:      #FBFAF7;
  --ink-2:      #FEFDFB;
  --raise:      #FFFFFF;
  --surface:    #FFFFFF;
  --surface-2:  #F1EEE8;

  --white:      #1A1815;   /* primary text — warm near-black */
  --muted:      #5F5A53;
  --faint:      #7B756C;

  --gold-deep:  #8A6A1C;
  --gold-ink:   #7C5F18;

  --hair:       rgba(26,24,21,.10);
  --hair-2:     rgba(26,24,21,.16);
  --hair-3:     rgba(26,24,21,.28);
  --hover:      rgba(26,24,21,.04);
  --hover-2:    rgba(26,24,21,.055);

  --s-new:      #8A6A1C;
  --s-cook:     #96591B;
  --s-away:     #2F5D9E;
  --s-done:     #3E7A2D;
  --s-dead:     #B2372A;

  --tint-new:   rgba(138,106,28,.10);
  --tint-cook:  rgba(150,89,27,.10);
  --tint-away:  rgba(47,93,158,.09);
  --tint-done:  rgba(62,122,45,.10);
  --tint-dead:  rgba(178,55,42,.09);

  --on-new:     #6E5314;
  --on-cook:    #7B4715;
  --on-away:    #274D84;
  --on-done:    #336524;
  --on-dead:    #93291E;

  --bar-bg:        rgba(251,250,247,.88);
  --bar-bg-closed: rgba(253,238,235,.92);
  --toast-bg:      rgba(255,255,255,.97);
  --scrim-bg:      rgba(40,36,30,.32);

  --lift:          0 1px 2px rgba(26,24,21,.045);
  --shadow-gold:   0 1px 0 rgba(255,255,255,.45) inset, 0 6px 16px -10px rgba(150,120,62,.75);
  --shadow-card:   0 30px 60px -40px rgba(26,24,21,.35);
  --shadow-menu:   0 20px 44px -22px rgba(26,24,21,.32);
  --shadow-sheet:  -30px 0 60px -40px rgba(26,24,21,.3);
  --shadow-toast:  0 16px 34px -20px rgba(26,24,21,.32);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--ink); color:var(--white);
  font:400 15px/1.45 var(--font);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
button,input{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }
.sprite{ display:none; }
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
:focus-visible{ outline:2px solid var(--gold-ink); outline-offset:2px; border-radius:4px; }
svg{ width:1em; height:1em; flex:none; }

/* ---------------------------------------------------- brand

   The restaurant's own mark, with the desk named beside it behind a rule.
   The desk is a sub-brand of Hebi Sushi, not a product of its own, and the
   lockup should say so. */
.brand{ margin:0; display:flex; align-items:center; gap:11px; line-height:1; }
.brand img{ display:block; width:92px; height:33px; }
.brand span{
  font-family:var(--display); font-size:12px; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
  padding-left:12px; border-left:1px solid var(--hair-2);
}
.brand--lg{ gap:14px; }
.brand--lg img{ width:134px; height:48px; }
.brand--lg span{ font-size:13px; padding-left:14px; }

/* ---------------------------------------------------- controls */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--hair-2); background:var(--surface); color:var(--white);
  border-radius:var(--r-sm); padding:0 16px; min-height:44px;
  font-weight:500; cursor:pointer; box-shadow:var(--lift);
  transition:background .12s ease, border-color .12s ease, transform .08s ease;
}
.btn:hover{ background:var(--surface-2); border-color:var(--hair-3); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:default; transform:none; }
.btn--gold{
  border-color:transparent; color:var(--on-gold); font-weight:600;
  background:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 58%,var(--gold-lift) 100%);
  box-shadow:var(--shadow-gold);
}
.btn--gold:hover{ filter:brightness(1.07); }
.btn--wide{ width:100%; }
.btn--danger{ color:var(--on-dead); border-color:color-mix(in srgb, var(--s-dead) 36%, transparent); background:var(--tint-dead); }
.btn--danger:hover{ background:color-mix(in srgb, var(--s-dead) 20%, transparent); border-color:color-mix(in srgb, var(--s-dead) 55%, transparent); }
.btn--sm{ min-height:36px; padding:0 12px; font-size:13px; }

.ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:none; border:0; color:var(--muted); cursor:pointer;
  padding:9px; border-radius:var(--r-sm); font-size:15px;
}
.ghost:hover{ color:var(--white); background:var(--hover); }
.ghost--text{ font-size:13px; padding:9px 10px; white-space:nowrap; }
.ghost[aria-pressed="false"]{ color:var(--faint); }

.seg{
  display:inline-flex; gap:2px; padding:3px; border-radius:999px;
  background:var(--ink-2); border:1px solid var(--hair);
}
.seg button{
  background:none; border:0; color:var(--muted); cursor:pointer;
  padding:7px 15px; border-radius:999px; font-size:13px; white-space:nowrap;
  transition:background .12s ease, color .12s ease;
}
.seg button:hover{ color:var(--white); }
.seg button[aria-pressed="true"]{ background:var(--raise); color:var(--white); box-shadow:var(--lift); }
.seg em{
  font-style:normal; font-variant-numeric:tabular-nums; color:var(--faint);
  margin-left:5px; font-weight:600;
}
.seg button[aria-pressed="true"] em{ color:var(--gold-ink); }

/* ---------------------------------------------------- sign in */
.gate{ min-height:100dvh; display:grid; place-items:center; padding:24px; }
.gate__card{
  width:min(380px,100%); display:grid; gap:16px;
  background:linear-gradient(180deg, var(--ink-1), var(--ink));
  border:1px solid var(--hair); border-radius:18px; padding:34px 30px;
  box-shadow:var(--lift), var(--shadow-card);
}
.gate__sub{
  margin:0 0 6px; color:var(--faint); font-size:11px;
  text-transform:uppercase; letter-spacing:.18em;
}
.field{ display:grid; gap:7px; }
.field > span{ font-size:12px; color:var(--muted); letter-spacing:.03em; }
.field input,.field textarea{
  background:var(--ink-2); border:1px solid var(--hair-2); color:var(--white);
  border-radius:var(--r-sm); padding:12px 13px; min-height:46px; width:100%;
}
.field input:focus{ border-color:var(--gold-deep); outline:none; background:var(--raise); }
/* Prototype mode has to be impossible to miss — on the way in, and on the
   screen afterwards. */
.gate__demo{
  margin:0; display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  font-size:12.5px; line-height:1.5; color:var(--muted);
  background:var(--tint-cook); border:1px solid color-mix(in srgb, var(--s-cook) 28%, transparent);
  border-radius:var(--r-sm); padding:10px 12px;
}
.gate__demo b{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--s-cook);
}
.badge{
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--s-cook); background:var(--tint-cook);
  border:1px solid color-mix(in srgb, var(--s-cook) 34%, transparent); border-radius:6px; padding:4px 8px;
  white-space:nowrap;
}

.gate__error{
  margin:0; color:var(--on-dead); font-size:13px; background:var(--tint-dead);
  border:1px solid color-mix(in srgb, var(--s-dead) 30%, transparent); border-radius:var(--r-sm); padding:9px 12px;
}

/* ---------------------------------------------------- top bar */
.bar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:22px;
  min-height:var(--bar-min); padding:0 18px;
  background:var(--bar-bg);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--hair);
}
.bar__end{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.sep{ width:1px; height:22px; background:var(--hair-2); margin:0 6px; }

.nav{ display:flex; gap:2px; }
.nav button{
  position:relative; background:none; border:0; cursor:pointer;
  color:var(--muted); padding:0 14px; height:var(--bar-min);
  display:inline-flex; align-items:center; gap:8px; font-size:14px;
}
.nav button:hover{ color:var(--white); }
.nav button[aria-pressed="true"]{ color:var(--white); }
/* The active tab is marked by a gold hairline on the bar's own edge — the
   same device the site uses for its section labels. */
.nav button[aria-pressed="true"]::after{
  content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-ink),var(--gold-deep));
  border-radius:2px;
}
.nav__n{
  font-style:normal; font-size:11px; font-weight:600; min-width:19px;
  padding:0 5px; height:19px; border-radius:999px; display:grid; place-items:center;
  background:var(--surface); color:var(--muted);
}
.nav__n[data-hot="true"]{ background:var(--gold); color:var(--on-gold); }

.shop{ display:flex; align-items:center; gap:10px; }
.switch{
  width:50px; height:28px; border-radius:999px; cursor:pointer; flex:none;
  border:1px solid var(--hair-2); background:var(--surface); padding:2px;
  display:flex; align-items:center; transition:background .16s ease, border-color .16s ease;
}
.switch__dot{
  width:22px; height:22px; border-radius:50%; background:var(--faint);
  transition:transform .16s cubic-bezier(.3,.8,.4,1), background .16s ease;
}
.switch[aria-checked="true"]{ background:var(--tint-done); border-color:color-mix(in srgb, var(--s-done) 45%, transparent); }
.switch[aria-checked="true"] .switch__dot{ transform:translateX(22px); background:var(--s-done); }
.shop__text{ font-size:13px; font-weight:600; color:var(--s-done); }

/* Closed is not a detail. It tints the bar and states itself in a strip. */
.app[data-open="false"] .bar{ background:var(--bar-bg-closed); border-bottom-color:color-mix(in srgb, var(--s-dead) 30%, transparent); }
.app[data-open="false"] .shop__text{ color:var(--s-dead); }
.closed-strip{
  margin:0; padding:9px 18px; font-size:13px; color:var(--on-dead);
  background:var(--tint-dead); border-bottom:1px solid color-mix(in srgb, var(--s-dead) 26%, transparent);
  position:sticky; top:var(--bar-h); z-index:29;
}
.closed-strip b{ color:var(--s-dead); }

/* ---------------------------------------------------- views */
.view{ padding:20px 18px 60px; max-width:1560px; margin:0 auto; }
.viewhead{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.viewhead h1{
  margin:0; font-family:var(--display); font-weight:700; font-size:22px;
  line-height:1; letter-spacing:var(--tight);
}
.viewhead .seg{ margin-left:auto; }
.note{ color:var(--faint); font-size:12.5px; max-width:62ch; margin:26px 0 0; line-height:1.6; }

/* ---------------------------------------------------- the queue

   One row per order, laid out on a grid so the same thing is always in the
   same place: when to worry, what to cook, where it goes, what it is worth,
   where it stands. Scanning down any one of those columns has to work. */
.rows{ display:grid; gap:9px; }

.row{
  position:relative; cursor:pointer;
  display:grid; gap:14px; align-items:start;
  grid-template-columns:152px minmax(190px,1.25fr) minmax(190px,1.15fr) 130px 176px;
  grid-template-areas:"id what who money status";
  background:linear-gradient(180deg,var(--ink-1),var(--ink-2));
  border:1px solid var(--hair); border-left:3px solid var(--sc, var(--hair-2));
  border-radius:var(--r); padding:13px 15px;
  box-shadow:var(--lift);
  transition:border-color .14s ease, background .14s ease;
}
.row.is-enter{ animation:rise .26s cubic-bezier(.2,.8,.3,1) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.row:hover{ background:linear-gradient(180deg,var(--raise),var(--ink-2)); }
.row:hover .row__id b{ text-decoration-color:var(--gold-deep); }
.row[data-state="placed"]    { --sc:var(--s-new); }
.row[data-state="preparing"] { --sc:var(--s-cook); }
.row[data-state="on-the-way"]{ --sc:var(--s-away); }
.row[data-state="delivered"] { --sc:var(--s-done); }
.row[data-state="cancelled"] { --sc:var(--s-dead); opacity:.6; }
.row[data-state="placed"]{ background:linear-gradient(180deg,color-mix(in srgb, var(--s-new) 6%, transparent),var(--ink-2) 70%); }
.row.is-fresh{ animation:rise .26s cubic-bezier(.2,.8,.3,1) both, flash 1.6s ease .26s; }
@keyframes flash{
  0%,100%{ box-shadow:var(--lift); }
  25%{ box-shadow:var(--lift), 0 0 0 2px color-mix(in srgb, var(--s-new) 50%, transparent), 0 0 26px -8px color-mix(in srgb, var(--s-new) 60%, transparent); }
}

.row__id{ grid-area:id; display:grid; gap:5px; align-content:start; }
.row__what{ grid-area:what; display:grid; gap:8px; align-content:start; min-width:0; }
.row__id b{
  font-family:var(--display); font-size:13px; font-weight:700;
  text-decoration:1px dotted underline; text-underline-offset:3px;
  text-decoration-color:var(--hair-3);
  letter-spacing:var(--tight); color:var(--white); font-variant-numeric:tabular-nums;
}
.clock{
  display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
  font-variant-numeric:tabular-nums; color:var(--faint);
}
.row[data-late="warn"] .clock{ color:var(--s-cook); }
.row[data-late="late"] .clock{ color:var(--s-dead); font-weight:600; }
.row[data-late="late"] .clock svg{ animation:tick 1.6s ease-in-out infinite; }
@keyframes tick{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* The food. Quantities in gold and in their own gutter, so the column of
   numbers can be read straight down. */
.row__lines{ margin:0; padding:0; list-style:none; display:grid; gap:3px; }
.row__lines li{ display:flex; gap:9px; align-items:baseline; font-size:14.5px; line-height:1.3; }
.row__lines b{
  font-family:var(--display); font-size:14px; font-weight:700; color:var(--gold-ink);
  min-width:1.5em; letter-spacing:var(--tight); font-variant-numeric:tabular-nums;
}
.row__lines i{ font-style:normal; color:var(--faint); font-size:12px; margin-left:3px; }

.row__who{ grid-area:who; display:grid; gap:4px; font-size:13px; color:var(--muted); min-width:0; }
.row__who div{ display:flex; gap:7px; align-items:flex-start; }
.row__who svg{ color:var(--faint); margin-top:3px; flex:none; }
.row__who .nm{ color:var(--white); }

.row__note{
  margin:0;
  color:var(--on-cook); background:var(--tint-cook); border-radius:var(--r-sm);
  padding:7px 10px; font-size:12.5px; line-height:1.45; white-space:pre-wrap;
  display:flex; gap:7px;
}
.row__note svg{ color:var(--s-cook); margin-top:3px; flex:none; }

.row__money{ grid-area:money; display:grid; gap:7px; justify-items:end; align-content:start; }
.row__sum{
  font-family:var(--display); font-size:17px; font-weight:700; line-height:1;
  letter-spacing:var(--tight); color:var(--white); font-variant-numeric:tabular-nums;
}
.row__sum em{
  font-style:normal; font-family:var(--font); font-size:10px; font-weight:500;
  color:var(--faint); margin-left:4px; letter-spacing:0;
}
.row__tags{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }

.row__status{ grid-area:status; display:grid; gap:7px; align-content:start; }


/* ---------------------------------------------------- status controls

   The same control, the same shape, on every row and in the sheet. It states
   where the order stands and it is how you move it — there is no verb to read
   and no button to hunt for. A native select would hand the open list to the
   operating system, which draws it in its own colours and its own metrics;
   this is drawn here, so the menu looks like the desk and the stage colours
   survive being opened. */
.status{
  display:flex; align-items:center; gap:8px; width:100%; min-height:40px;
  cursor:pointer; text-align:left;
  border-radius:var(--r-sm); padding:0 10px 0 11px;
  font:600 12.5px/1 var(--font); letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--sc, var(--hair-2));
  background:color-mix(in srgb, var(--sc, #888) 13%, transparent);
  color:var(--sc, var(--white));
  transition:filter .12s ease, border-color .12s ease;
}
.status > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status__dot{
  width:7px; height:7px; border-radius:50%; background:currentColor; flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--sc, #888) 22%, transparent);
}
.status__caret{ color:var(--muted); font-size:13px; transition:transform .14s ease; }
.status:hover{ filter:brightness(1.3); }
.status[aria-expanded="true"]{ filter:brightness(1.3); }
.status[aria-expanded="true"] .status__caret{ transform:rotate(180deg); }
.status:disabled{ opacity:.5; cursor:default; }
.status:disabled .status__caret{ display:none; }
.status--pay{
  min-height:32px; font-weight:500; font-size:11px; letter-spacing:.08em;
  border-color:var(--hair-2); background:var(--ink-2); color:var(--muted);
}
.status--pay[data-paid="true"]{
  border-color:color-mix(in srgb, var(--s-done) 40%, transparent); background:var(--tint-done); color:var(--s-done);
}
/* In a table the control sits at its own width against the column edge,
   rather than stretching the cell. */
td .status{ width:auto; min-width:176px; display:inline-flex; }

/* ---------------------------------------------------- the menu

   Shared by every dropdown on the page — the status controls and the language
   picker. Positioned in script against whichever trigger opened it. */
.menu{
  position:fixed; z-index:50; min-width:190px; max-width:280px;
  background:var(--raise); border:1px solid var(--hair-2); border-radius:var(--r);
  padding:5px; display:grid; gap:2px;
  box-shadow:var(--shadow-menu), var(--lift);
  animation:menu-in .13s cubic-bezier(.2,.8,.3,1) both;
}
.menu[data-up="true"]{ transform-origin:bottom; }
@keyframes menu-in{ from{ opacity:0; transform:translateY(-4px) scale(.985); } to{ opacity:1; transform:none; } }
.menu__item{
  display:flex; align-items:center; gap:9px; width:100%;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:9px 10px; border-radius:7px; color:var(--white);
  font:500 13.5px/1.2 var(--font);
}
.menu__item:hover,.menu__item:focus-visible{ background:var(--hover-2); outline:none; }
.menu__item[aria-selected="true"]{ color:var(--gold-ink); }
.menu__dot{
  width:8px; height:8px; border-radius:50%; background:var(--c, var(--faint)); flex:none;
}
.menu__item > span{ flex:1; }
.menu__check{ color:var(--gold-ink); font-size:13px; }
.menu__item--danger{ color:var(--on-dead); }
.menu__item--danger:hover{ background:var(--tint-dead); }
.menu__sep{ height:1px; background:var(--hair); margin:3px 2px; }

.lang{ display:flex; }
.lang [data-lang-label]{ font-size:12px; letter-spacing:.06em; }

/* ---------------------------------------------------- pills */
.pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  padding:4px 8px; border-radius:6px; white-space:nowrap;
  border:1px solid var(--hair-2); color:var(--muted); background:var(--ink-2);
}
.pill--placed   { color:var(--s-new);  border-color:color-mix(in srgb, var(--s-new) 36%, transparent); background:var(--tint-new); }
.pill--preparing{ color:var(--s-cook); border-color:color-mix(in srgb, var(--s-cook) 36%, transparent); background:var(--tint-cook); }
.pill--on-the-way{color:var(--s-away); border-color:color-mix(in srgb, var(--s-away) 36%, transparent); background:var(--tint-away); }
.pill--delivered{ color:var(--s-done); border-color:color-mix(in srgb, var(--s-done) 36%, transparent); background:var(--tint-done); }
.pill--cancelled{ color:var(--s-dead); border-color:color-mix(in srgb, var(--s-dead) 36%, transparent); background:var(--tint-dead); }
.pill--unpaid   { color:var(--on-dead);border-color:color-mix(in srgb, var(--s-dead) 32%, transparent); background:var(--tint-dead); }
.pill--paid     { color:var(--s-done); border-color:color-mix(in srgb, var(--s-done) 32%, transparent); background:var(--tint-done); }
.pill--warn     { color:var(--s-cook); border-color:color-mix(in srgb, var(--s-cook) 36%, transparent); background:var(--tint-cook); }
.pill--gold     { color:var(--gold-ink);border-color:color-mix(in srgb, var(--s-new) 30%, transparent); background:var(--tint-new); }

/* ---------------------------------------------------- the sheet */
.scrim{
  position:fixed; inset:0; z-index:40; background:var(--scrim-bg);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  animation:fade .18s ease both;
}
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
.sheet{
  position:fixed; z-index:41; top:0; right:0; bottom:0; width:min(440px,100%);
  background:var(--ink-1); border-left:1px solid var(--hair);
  box-shadow:var(--shadow-sheet);
  overflow-y:auto; overscroll-behavior:contain;
  animation:slide .24s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes slide{ from{ transform:translateX(24px); opacity:0; } to{ transform:none; opacity:1; } }
.sheet__inner{ padding:20px 22px 34px; display:grid; gap:18px; }
.sheet__top{ display:flex; align-items:flex-start; gap:12px; }
.sheet__id{
  font-family:var(--display); font-size:20px; font-weight:700; line-height:1;
  letter-spacing:var(--tight);
}
.sheet__when{ color:var(--faint); font-size:12.5px; margin-top:6px; }
.sheet__close{ margin-left:auto; }
.sheet h2{
  margin:0 0 9px; font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep);
}
.sheet section{ border-top:1px solid var(--hair); padding-top:16px; }
.sheet section:first-of-type{ border-top:0; padding-top:0; }

.bigcall{
  display:flex; align-items:center; gap:11px; text-decoration:none;
  background:var(--ink-2); border:1px solid var(--hair-2); border-radius:var(--r-sm);
  padding:12px 14px; color:var(--gold-ink); font-weight:600; font-size:17px;
  box-shadow:var(--lift);
}
.bigcall:hover{ background:var(--raise); border-color:var(--hair-3); }
.kv{ display:grid; gap:7px; font-size:13.5px; }
.kv div{ display:flex; gap:12px; }
.kv dt{ color:var(--faint); min-width:88px; }
.kv dd{ margin:0; color:var(--white); }

.lines{ display:grid; gap:8px; }
.lines__row{ display:flex; gap:10px; align-items:baseline; font-size:14px; }
.lines__row b{
  font-family:var(--display); font-size:14px; font-weight:700; color:var(--gold-ink);
  min-width:1.6em; letter-spacing:var(--tight);
}
.lines__row span:last-child{ margin-left:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
.tot{ display:grid; gap:5px; border-top:1px solid var(--hair); margin-top:12px; padding-top:12px; font-size:13px; }
.tot div{ display:flex; color:var(--muted); }
.tot span:last-child{ margin-left:auto; font-variant-numeric:tabular-nums; }
.tot .grand{
  color:var(--white); font-family:var(--display); font-size:17px; font-weight:700;
  letter-spacing:var(--tight); align-items:baseline; margin-top:6px;
}

.trail{ display:grid; gap:0; }
.trail div{
  display:flex; gap:11px; font-size:12.5px; color:var(--muted);
  padding:7px 0 7px 15px; position:relative;
}
.trail div::before{
  content:''; position:absolute; left:0; top:14px; width:6px; height:6px;
  border-radius:50%; background:var(--hair-3);
}
.trail div:not(:last-child)::after{
  content:''; position:absolute; left:2.5px; top:20px; bottom:-1px; width:1px; background:var(--hair);
}
.trail div:last-child::before{ background:var(--gold-deep); }
.trail time{ color:var(--faint); margin-left:auto; font-variant-numeric:tabular-nums; padding-left:14px; }
.trail em{ font-style:normal; color:var(--faint); }
.sheet__kill{ border-top:1px solid var(--hair); padding-top:16px; }
.sheet__actions{ display:grid; gap:9px; }
.pillrow{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.note-box{
  margin:0; color:var(--on-cook); background:var(--tint-cook); border-radius:var(--r-sm);
  padding:8px 11px; font-size:12.5px; line-height:1.45; white-space:pre-wrap;
  display:flex; gap:8px;
}
.note-box svg{ color:var(--s-cook); margin-top:3px; flex:none; }

/* ---------------------------------------------------- history */
.tablewrap{
  border:1px solid var(--hair); border-radius:var(--r); overflow:hidden;
  background:var(--ink-1); box-shadow:var(--lift);
}
.tablewrap--scroll{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th,td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--hair); }
th{
  color:var(--faint); font-weight:500; font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; background:var(--ink-2);
}
tbody tr:last-child td{ border-bottom:0; }
tbody tr[data-open-order]{ cursor:pointer; }
tbody tr[data-open-order]:hover{ background:var(--hover); }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
td.mono{ color:var(--muted); font-variant-numeric:tabular-nums; }
td.money{ font-weight:600; font-variant-numeric:tabular-nums; }

.empty{
  border:1px dashed var(--hair); border-radius:var(--r);
  padding:52px 20px; text-align:center; color:var(--faint);
}
.empty b{
  display:block; color:var(--muted); font-family:var(--display);
  font-size:16px; font-weight:600; letter-spacing:var(--tight); margin-bottom:6px;
}

/* ---------------------------------------------------- payments */
.tiles{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); }
.tile{
  background:linear-gradient(180deg,var(--ink-1),var(--ink-2));
  border:1px solid var(--hair); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--lift);
}
.tile span{
  font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--faint);
}
.tile b{
  display:block; margin-top:9px; font-family:var(--display); font-weight:700;
  font-size:24px; line-height:1; letter-spacing:var(--tight);
  font-variant-numeric:tabular-nums;
}
.tile em{ font-style:normal; font-family:var(--font); font-size:12px; color:var(--faint); margin-left:4px; }
.tile--in  b{ color:var(--s-done); }
.tile--out b{ color:var(--s-cook); }

.panel{ margin-top:24px; }
.panel > h2{
  margin:0 0 11px; font-size:10.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-deep);
}

/* How the night's money split, at a glance. */
.share{ display:flex; height:9px; border-radius:999px; overflow:hidden; background:var(--ink-2); gap:2px; }
.share i{ display:block; width:var(--w); transition:width .4s ease; }
.share i[data-m="cash"] { background:linear-gradient(90deg,var(--gold-deep),var(--gold-ink)); }
.share i[data-m="card"] { background:var(--s-away); }
.share i[data-m="idram"]{ background:var(--s-done); }
.legend{ display:flex; gap:18px; flex-wrap:wrap; margin-top:11px; font-size:12.5px; color:var(--muted); }
.legend span{ display:inline-flex; align-items:center; gap:7px; }
.legend i{ width:9px; height:9px; border-radius:3px; display:block; }
.legend b{ color:var(--white); font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------- toasts */
.toasts{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  display:grid; gap:8px; z-index:60; pointer-events:none;
}
.toast{
  background:var(--toast-bg); border:1px solid var(--hair-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:999px; padding:11px 20px; font-size:13.5px;
  box-shadow:var(--shadow-toast), var(--lift);
  animation:pop .22s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.97); } to{ opacity:1; transform:none; } }
.toast--gold{ border-color:color-mix(in srgb, var(--s-new) 40%, transparent); color:var(--on-new); }
.toast--bad{ border-color:color-mix(in srgb, var(--s-dead) 50%, transparent); color:var(--on-dead); }

/* ---------------------------------------------------- narrow */
@media (max-width:1180px){
  .row{
    grid-template-columns:150px minmax(0,1fr) 172px;
    grid-template-areas:
      "id    what status"
      "money who  status";
  }
  .row__money{ justify-items:start; }
}
@media (max-width:760px){
  /* A phone cannot hold the bar in one row without pushing the page
     sideways, so it becomes two: identity and controls above, navigation
     across the full width below, where a thumb can reach it. */
  /* Two rows here, three once a language with longer words is up — the real
     height is measured in script, so whatever is stuck below follows. */
  :root{ --bar-min:auto; --bar-h:104px; }
  .bar{
    flex-wrap:wrap; align-content:center;
    gap:8px; row-gap:4px; padding:9px 12px;
  }
  .bar .sep{ display:none; }
  .brand img{ width:78px; height:28px; }
  .brand span{ display:none; }
  .nav{ order:3; width:100%; gap:0; }
  .nav button{ flex:1; justify-content:center; height:40px; padding:0 6px; font-size:13.5px; }
  .nav button[aria-pressed="true"]::after{ left:8px; right:8px; bottom:0; }
  .bar__end{ gap:2px; }
  .shop{ gap:7px; }
  .shop__text{ font-size:12px; }
  .view{ padding:16px 12px 48px; }
  .row{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"id" "what" "who" "money" "status";
    gap:11px; padding:14px;
  }
  .row__money{ justify-items:start; }
  .row__tags{ justify-content:flex-start; }
  .status{ min-height:46px; }
  .viewhead h1{ font-size:24px; }
  /* Four chips of Armenian do not fit 375px. They scroll rather than being
     squeezed until the last one is unreadable. */
  .viewhead .seg{
    margin-left:0; width:100%; overflow-x:auto; justify-content:flex-start;
    scrollbar-width:none;
  }
  .viewhead .seg::-webkit-scrollbar{ display:none; }
  .seg button{ flex:0 0 auto; }
  .sheet{ top:auto; width:100%; max-height:92dvh; border-left:0; border-top:1px solid var(--hair-2);
          border-radius:18px 18px 0 0; }
  @keyframes slide{ from{ transform:translateY(28px); opacity:0; } to{ transform:none; opacity:1; } }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}