/* The back-office as a phone app.
   Mobile first: one column, bottom tab bar. Past 900px the tab bar becomes a sidebar and
   the ticket rail flows into columns - same templates, no second layout to keep in sync.

   Dressed as the kitchen's own paper: orders are thermal tickets on a steel pass, with a torn
   top edge, dashed rules, machine digits for everything the kitchen counts, and modifiers in
   the second colour of a two-colour kitchen printer, red. */

:root {
  color-scheme: light dark;

  --bg: #e3e7e9;
  --surface: #ffffff;
  --sunk: #eef1f2;
  --ink: #141618;
  --muted: #5f666c;
  --line: #d5dbde;
  --rule: #b7bfc4;

  /* Actions are printed in ink. The brand green is kept for the logo and the live signal. */
  --accent: #141618;
  --accent-ink: #ffffff;
  --accent-wash: #1416180d;
  --brand: #1f6b53;
  --print-red: #c42a1f;
  --soon: #a35f00;
  --late: #c42a1f;

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, "PingFang SC", monospace;

  --tap: 44px;
  --gutter: 16px;
  --tooth: 7px;
  --r-ticket: 3px;
  --r-sheet: 14px;
  --lift: 0 -1px 0 var(--line);
  --paper-shadow: 0 1px 0 #0000000d, 0 6px 12px #0000000f;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0f10;
    --surface: #1b1e20;
    --sunk: #151719;
    --ink: #eceff0;
    --muted: #979fa5;
    --line: #2a2f32;
    --rule: #41484d;

    --accent: #eceff0;
    --accent-ink: #111314;
    --accent-wash: #eceff012;
    --brand: #4fae8c;
    --print-red: #ff7466;
    --soon: #f2a53a;
    --late: #ff6a5c;
    --paper-shadow: 0 1px 0 #00000080, 0 8px 16px #00000066;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 1.0625rem; }
h3 { font-size: 0.9375rem; }
p { margin: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

/* --- shell ------------------------------------------------------------------ */

.app {
  min-height: 100dvh;
  display: grid;
  grid-template-areas: "bar" "main" "nav";
  grid-template-rows: auto 1fr auto;
}

.topbar {
  grid-area: bar;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px var(--gutter);
  padding-top: max(8px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 1.25rem; font-weight: 700; }
.topbar .venue {
  margin-left: auto; color: var(--muted);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* A superadmin's way back to the restaurant list (A59). */
.topbar a.venue { color: var(--accent); text-decoration: none; }

.main { grid-area: main; width: 100%; padding: var(--gutter) var(--gutter) 28px; }

.tabs {
  grid-area: nav;
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  background: var(--surface);
  box-shadow: var(--lift);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs a {
  position: relative;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 500;
}
.tabs a svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.tabs a.on { color: var(--ink); font-weight: 600; }
.tabs a.on svg { stroke-width: 2.1; }
.tabs a.on::before {
  content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0;
  width: 30px; height: 3px; background: var(--ink);
}
/* The sidebar's masthead. The bottom bar has no room for it. */
.tabs .brand { display: none; }

@media (min-width: 900px) {
  .app {
    grid-template-areas: "nav bar" "nav main";
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
  }
  .tabs {
    position: sticky; top: 0; height: 100dvh;
    flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 18px 12px;
    background: var(--bg);
    border-right: 1px solid var(--line);
    box-shadow: none;
  }
  .tabs a {
    flex: 0 0 auto; flex-direction: row; justify-content: flex-start; gap: 12px;
    min-height: 42px; padding: 0 12px; border-radius: 4px; font-size: 0.9375rem;
  }
  .tabs a.on { background: var(--ink); color: var(--surface); }
  .tabs a.on::before { display: none; }
  .tabs .brand {
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px 22px;
    font-family: var(--mono); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.04em;
  }
  .tabs .brand img { border-radius: 5px; }
  .main { padding: 24px 28px 48px; max-width: 1180px; }
  /* The console reads as a conversation, not a dashboard. */
  .main:has(#playground) { max-width: 860px; }
  .topbar { padding-inline: 28px; }
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer;
}
/* display above would otherwise beat the hidden attribute. */
.btn[hidden] { display: none; }
.btn:active { translate: 0 1px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--danger { color: var(--late); border-color: color-mix(in srgb, var(--late) 50%, var(--line)); }
.btn--warn {
  color: var(--soon);
  border-color: color-mix(in srgb, var(--soon) 55%, var(--line));
  background: color-mix(in srgb, var(--soon) 10%, var(--surface));
}
.btn--quiet { background: none; border-color: transparent; color: var(--muted); }
.btn--wide { width: 100%; }
.btn--small { min-height: 34px; padding: 0 12px; font-size: 0.875rem; }

input, select, textarea {
  font: inherit; color: var(--ink);
  min-height: var(--tap);
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--rule); border-radius: 4px;
  width: 100%;
}
/* Figures are machine-printed wherever they are typed, too. */
input[type=number], input[type=time], input[inputmode=tel], input[inputmode=decimal] {
  font-family: var(--mono);
}
input[type=checkbox] { width: auto; min-height: 0; }
select {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field { display: block; }
.field > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 0.8125rem; }
.fields { display: grid; gap: 12px; }
.fields--pair { grid-template-columns: 1fr 1fr; }

.seg {
  display: flex; gap: 2px; padding: 2px;
  border: 1.5px solid var(--ink); border-radius: 5px;
}
.seg button {
  flex: 1; min-height: 36px; padding: 0 8px;
  border: 0; border-radius: 3px; background: none;
  color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
[data-show="open"] .seg button[value="open"],
[data-show="done"] .seg button[value="done"],
[data-show="all"]  .seg button[value="all"] {
  background: var(--ink); color: var(--surface);
}

.pill {
  display: inline-block; padding: 1px 7px;
  border: 1px solid var(--rule); border-radius: 3px; color: var(--ink);
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.pill--live { background: var(--brand); border-color: var(--brand); color: var(--accent-ink); }
.pill--live::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px;
  border-radius: 50%; background: currentColor; vertical-align: 0.1em;
}
.pill--late { border-color: var(--late); color: var(--late); }
.pill--warn { border-color: var(--soon); color: var(--soon); }
.pill--toggle { cursor: pointer; }
.pill--toggle input { margin: 0 3px 0 0; vertical-align: -0.1em; }
/* Auto-print shows only on the print station (orders.html says why). */
.pill--toggle[hidden] { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px 3px 10px;
  border: 1px solid var(--rule); border-radius: 4px;
  font-size: 0.8125rem;
}
.chip button {
  border: 0; background: none; color: var(--muted);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1;
}

/* --- surfaces --------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px;
}

.list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.list > * + * { border-top: 1px dashed var(--line); }
.row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 52px; padding: 9px 14px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
}
button.row, a.row { cursor: pointer; text-decoration: none; }
button.row:hover, a.row:hover { background: var(--accent-wash); }
.row__main { flex: 1 1 auto; min-width: 0; }
.row input, .row select { flex: 1 1 7em; width: auto; min-width: 0; }
.row__sub { color: var(--muted); font-size: 0.8125rem; }
.row__value {
  color: var(--muted); font-family: var(--mono); font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.row__main > .row__sub { display: block; }
.row--bare { padding: 0; min-height: 0; }
.row--wrap { flex-wrap: wrap; }
/* A92: suggestions under a field, in the list's flow: `.list` clips anything floating out. */
.suggest { list-style: none; margin: 0; padding: 4px 0; background: var(--sunk); }
.suggest li { padding: 10px 14px; cursor: pointer; }
.suggest li.on, .suggest li:hover { background: var(--accent-wash); }

/* A menu row is two targets: the name opens the editor, the switch flips sold out in place. */
.itemtap {
  flex: 1; min-width: 0; padding: 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.itemtap > span { display: block; }
.itemtap > .row__sub { font-family: var(--mono); }
.itemtap:hover > span:first-child { text-decoration: underline; text-underline-offset: 3px; }

details.fold { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
details.fold > summary {
  display: flex; align-items: center; gap: 8px;
  min-height: 52px; padding: 9px 14px;
  font-weight: 500; cursor: pointer; list-style: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "＋"; margin-left: auto; color: var(--muted); }
details.fold[open] > summary::after { content: "－"; }
details.fold[open] > summary { border-bottom: 1px solid var(--line); }
.fold__body { padding: 14px; display: grid; gap: 12px; }

/* Three controls will not fit one phone line, and an unlabelled wrapped time field is a
   coin flip between opening and closing. So: day on its own line, then the pair. */
.hours { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 12px 14px; }
.hours > select { grid-column: 1 / -1; }
@media (min-width: 620px) {
  .hours { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
  .hours > select { grid-column: auto; }
}

.group { margin: 22px 0; }
.group:first-child { margin-top: 0; }
.group > h2 {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.group > h2::after { content: ""; flex: 1; border-top: 1px dashed var(--rule); }
.group > p { margin-bottom: 10px; color: var(--muted); font-size: 0.8125rem; max-width: 62ch; }

.notice { padding: 10px 12px; border-radius: 4px; font-size: 0.875rem; margin-bottom: 12px; }
.notice--bad { background: color-mix(in srgb, var(--late) 12%, transparent); color: var(--late); }
.notice--ok { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }

.empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 0.9375rem; }

/* The torn edge: a row of teeth standing on top of the sheet, in the sheet's own colour.
   Drawn above the box rather than cut out of it, so the sheet keeps an ordinary shadow. */
.ticket, .signin { --paper: var(--surface); position: relative; margin-top: var(--tooth); }
.ticket::before, .signin::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--tooth);
  background: conic-gradient(from 135deg at top, #0000, var(--paper) 1deg 89deg, #0000 90deg)
              top / calc(2 * var(--tooth)) var(--tooth) repeat-x;
}

/* Signing in is one whole receipt. */
.signin {
  max-width: 340px; margin-inline: auto; margin-top: calc(8vh + var(--tooth));
  display: grid; gap: 18px; justify-items: start;
  padding: 26px 26px 28px;
  background: var(--paper); border-radius: 0 0 4px 4px; box-shadow: var(--paper-shadow);
}
.signin img { border-radius: 12px; }
.signin h1 { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.04em; }
.signin form { width: 100%; }

/* --- the ticket rail -------------------------------------------------------- */

.tickets { display: grid; gap: 18px; }
@media (min-width: 720px) {
  .tickets { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
}

.ticket {
  background: var(--paper);
  border-radius: 0 0 var(--r-ticket) var(--r-ticket);
  box-shadow: var(--paper-shadow);
  padding: 12px 16px 14px;
}
.ticket[data-state="cancelled"], .ticket[data-state="completed"] {
  --paper: var(--sunk); color: var(--muted);
}
.ticket[data-state="cancelled"] .ticket__lines { text-decoration: line-through; opacity: 0.6; }
/* Nothing to cook: a call to make. */
.ticket[data-state="callback"] { box-shadow: inset 0 3px 0 var(--late), var(--paper-shadow); }
.ticket[data-state="callback"] .ticket__clock { font-size: 1.375rem; color: var(--late); }

.ticket__head { display: flex; align-items: center; gap: 10px; }
.ticket__clock {
  font-family: var(--mono); font-size: 1.875rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em; line-height: 1.1;
}
.ticket__clock-label {
  font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0; color: var(--muted); margin-right: 2px; vertical-align: 0.45em;
}
.ticket__due { color: var(--muted); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
/* Soon and late are stamped on, the way the pass marks a ticket by hand. */
.ticket__due[data-due="soon"], .ticket__due[data-due="late"] {
  padding: 0 6px; border: 2px solid currentColor; border-radius: 4px; rotate: -3deg;
}
.ticket__due[data-due="soon"] { color: var(--soon); }
.ticket__due[data-due="late"] { color: var(--surface); background: var(--late); border-color: var(--late); }
.ticket__code {
  margin-left: auto; text-align: right; line-height: 1.35;
  font-family: var(--mono); font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ticket__code .row__sub { font-size: 0.75rem; font-weight: 400; }
.railnote { margin: 10px 0 12px; color: var(--muted); font-size: 0.8125rem; }
.railnote a { color: var(--ink); }
.ticket__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 8px 0 10px;
}
.ticket .ticket__meta > span:not(.pill) { font-weight: 600; }
.ticket > .row__sub { font-family: var(--mono); }
.ticket__lines { display: grid; gap: 6px; padding: 12px 0; border-top: 1px dashed var(--rule); }
.ticket__line { display: flex; gap: 8px; font-size: 1rem; font-weight: 500; }
.ticket__qty {
  flex: 0 0 auto; min-width: 2.1em;
  font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums;
}
.ticket__mods, .ticket__note {
  display: block; color: var(--print-red); font-size: 0.8125rem; font-weight: 500;
}
.ticket__foot {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; border-top: 1px dashed var(--rule);
}
.ticket__total {
  font-family: var(--mono); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.ticket__actions { margin-left: auto; display: flex; gap: 8px; }
.ticket__actions .btn { min-height: 38px; }

[data-show="open"] .ticket:not([data-state="confirmed"], [data-state="callback"]),
[data-show="done"] .ticket:is([data-state="confirmed"], [data-state="callback"]),
[data-show="open"] .empty[data-for="done"], [data-show="open"] .empty[data-for="all"],
[data-show="done"] .empty[data-for="open"], [data-show="done"] .empty[data-for="all"],
[data-show="all"]  .empty[data-for="open"], [data-show="all"] .empty[data-for="done"] {
  display: none;
}

/* --- bottom sheet ----------------------------------------------------------- */

dialog.sheet {
  width: 100%; max-width: 520px;
  margin: auto auto 0;
  padding: 0;
  border: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  background: var(--surface); color: var(--ink);
  box-shadow: 0 -10px 40px #00000038;
}
dialog.sheet::backdrop { background: #0006; }
dialog.sheet[open] { animation: rise 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes rise { from { translate: 0 18px; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }
@media (min-width: 620px) {
  dialog.sheet { margin: auto; border-radius: 8px; }
}

.sheet__grip {
  width: 38px; height: 4px; margin: 10px auto 0;
  border-radius: 2px; background: var(--line);
}
.sheet__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px; }
.sheet__head h2 { flex: 1; min-width: 0; }
.sheet__body {
  padding: 0 16px 16px;
  max-height: min(70dvh, 620px); overflow-y: auto;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.sheet__body > * + * { margin-top: 14px; }

/* --- toast ------------------------------------------------------------------ */

.toast {
  position: fixed; left: 50%; translate: -50% 0; z-index: 40;
  bottom: calc(68px + env(safe-area-inset-bottom));
  display: none; align-items: center; gap: 10px;
  padding: 10px 16px;
  border: 0; border-radius: 4px;
  background: var(--ink); color: var(--surface);
  box-shadow: 0 6px 24px #00000038;
  font: inherit; font-weight: 500; cursor: pointer;
}
.toast[data-visible] { display: flex; }
@media (min-width: 900px) { .toast { bottom: 24px; } }

/* --- console ---------------------------------------------------------------- */

.thread { display: grid; gap: 10px; }
.bubble { max-width: 82%; padding: 10px 13px; border-radius: 4px; background: var(--sunk); }
.bubble--caller { justify-self: end; background: var(--ink); color: var(--surface); }
.bubble--ai { justify-self: start; background: var(--surface); border: 1px solid var(--line); }
.bubble--bad {
  justify-self: start; color: var(--late);
  background: color-mix(in srgb, var(--late) 12%, transparent);
}
/* A58: a line said while the host thought, and a line the caller did not hear to the end. */
.bubble--hold { color: var(--muted); border-style: dashed; }
.bubble__cut { display: block; margin-top: 4px; color: var(--muted); font-size: 0.8125rem; }
/* Tool calls read as the printer's log: typed ones fold open, spoken ones arrive as a line. */
.bubble--tool {
  justify-self: stretch; max-width: none; background: none; padding: 2px 0;
  color: var(--muted); font-family: var(--mono); font-size: 0.75rem;
}
.bubble--tool summary { cursor: pointer; }
.bubble pre {
  margin: 6px 0 0; padding: 9px; border-radius: 3px;
  background: var(--sunk); color: var(--ink); overflow-x: auto;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.45;
}
.composer { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.composer input, .composer select { flex: 1; min-width: 0; }
.composer input[type="number"] { flex: 0 0 4em; }
.composer .btn { flex: 0 0 auto; }