/* Owner portal, "Menu Board" skin (CONTRACT-DESIGN): warm cream base, cream cards, ONE brand yellow (#FAC20E, always with ink text on top),
   a near-black anchor card, condensed display type for page titles and big numbers, mono for small labels. Fonts are self-hosted (public/fonts).
   Colour roles: yellow = the primary action or a highlight (current tab, selection); red (--danger) = urgent only (errors, delete/void, overdue);
   everything else is ink, cream or grey. --pill and --on-pill are ALWAYS a pair. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 800; font-display: swap; src: url("/fonts/big-shoulders-display-800.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); }
:root {
  --bg: #F6F0DC;
  --ink: #151410;
  --card: #FFFFFF;
  --cardc: #FBF8EC;
  --cell: #FFFFFF;
  --line: rgba(18, 18, 18, 0.14);
  --field-line: rgba(18, 18, 18, 0.36);   /* form control borders: 3:1 against the card */
  --mute: rgba(18, 18, 18, 0.62);
  --soft: rgba(18, 18, 18, 0.06);
  --accent: #FAC20E;
  --on-accent: #151410;   /* ink on yellow, always */
  --accent-btn: #FAC20E;  /* fill behind ink button text */
  --accent-ink: #7A5C00;  /* yellow used as TEXT on light surfaces (5.5:1 on cream) */
  --pill: #151410;
  --on-pill: #FBF8EC;
  --chip: rgba(250, 194, 14, 0.30);
  --danger: #B3260F;      /* errors, delete, overdue orders */
  --danger-chip: rgba(179, 38, 15, 0.10);
  --on-danger: #FFFFFF;
  --anchor: #171612;
  --on-anchor: #FFFDF6;
  --on-anchor-mute: rgba(255, 253, 246, 0.64);
  --on-anchor-line: rgba(255, 253, 246, 0.16);
  --check-a: #FFFFFF;
  --check-b: #DCD5BD;
  --track-off: rgba(18, 18, 18, 0.24);
  --sel: #FAC20E;         /* a selected tab / pill / option: yellow with --on-sel ink, ringed in ink so it never relies on colour alone */
  --on-sel: #151410;
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --dur-ui: 180ms;
  --dur-in: 360ms;
  --shadow: 0 1px 2px rgba(80, 62, 10, 0.05), 0 10px 30px rgba(110, 86, 10, 0.07);
  --shadow-float: 0 2px 4px rgba(80, 62, 10, 0.06), 0 14px 34px rgba(60, 46, 0, 0.16);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --r-card: 20px;
  --r-field: 14px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --tabbar-h: 66px;
  --bar-b: max(12px, calc(var(--safe-b) - 6px));
  --dock: calc(var(--tabbar-h) + var(--bar-b) + 22px);
  --topbar-h: calc(56px + var(--safe-t));
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Noto Sans", "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15120E;          /* the board's warm near-black ground */
    --ink: #F3EDE0;         /* chalk */
    --card: #1F1A14;        /* raised panel */
    --cardc: #261F17;       /* the warm dark counterpart of the cream card */
    --cell: #2B241B;
    --line: rgba(243, 237, 224, 0.16);
    --field-line: rgba(243, 237, 224, 0.38);
    --mute: rgba(243, 237, 224, 0.66);
    --soft: rgba(243, 237, 224, 0.08);
    --accent-ink: #FAC20E;
    --pill: #F3EDE0;
    --on-pill: #151410;
    --chip: rgba(250, 194, 14, 0.22);
    --danger: #FF8A75;
    --danger-chip: rgba(255, 138, 117, 0.16);
    --on-danger: #151410;
    --anchor: #3A3024;
    --track-off: rgba(243, 237, 224, 0.28);
    --check-a: #3A3830;
    --check-b: #2A2923;
    --shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-float: 0 14px 34px rgba(0, 0, 0, 0.55);
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 var(--font);
  padding-bottom: var(--dock);
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
/* CONTRACT-DESIGN 10: the corner glow was decoration, so there is none. The ground is flat cream (light) or warm near-black (dark). */
/* Links are ink with an underline; yellow only appears as a thicker underline on hover and focus (a highlight). */
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--field-line); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--dur-ui) var(--ease); }
a:hover, a:focus-visible { text-decoration-color: var(--accent); text-decoration-thickness: 3px; }
/* CONTRACT-DESIGN 9: page titles only (h1) are display type. */
h1 { font-family: var(--display); font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.95; margin: 0.5rem 0 1rem; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; font-weight: 400; letter-spacing: -0.015em; margin: 0 0 0.6rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.4rem; }
p { margin: 0.4rem 0 0.8rem; }
code { background: var(--soft); padding: 1px 6px; border-radius: 6px; font-size: 0.92em; overflow-wrap: anywhere; }
small { font-size: 0.85em; }
.zh, [lang="zh"] { font-family: "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; }
.muted, .hint { color: var(--mute); }
.hint { font-size: 0.9rem; margin: 0.2rem 0 0.6rem; }
.subtle { font-size: 0.95rem; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--pill); color: var(--on-pill); padding: 8px 14px; z-index: 100; border-radius: 0 0 12px 0; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; min-height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: var(--safe-t) calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l));
  background: var(--bg); box-shadow: 0 1px 0 var(--line, rgba(0,0,0,.08));
}
.brand { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.viewlink {
  white-space: nowrap; font-size: 0.9rem; font-weight: 600; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--cardc); box-shadow: var(--shadow);
}
.page { max-width: 760px; margin: 0 auto; padding: 4px calc(16px + var(--safe-r)) 24px calc(16px + var(--safe-l)); }
.page.wide { max-width: 1180px; }
.sidenav { display: none; }

/* floating pill tab bar (phones) */
.tabbar {
  position: fixed; left: 50%; bottom: var(--bar-b); transform: translateX(-50%); z-index: 30;
  width: min(calc(100% - 32px - var(--safe-l) - var(--safe-r)), 420px);
  display: flex; padding: 6px; border-radius: 999px;
  background: var(--cardc); box-shadow: var(--shadow-float);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .tabbar { background: color-mix(in srgb, var(--cardc) 91%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); }
}
.tabbar:not(:has(a:nth-child(3))) { width: min(calc(100% - 32px - var(--safe-l) - var(--safe-r)), 280px); }
.tabbar a {
  flex: 1; min-width: 0; height: calc(var(--tabbar-h) - 12px); border-radius: 999px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--mute); text-decoration: none; font-size: 11px; font-weight: 600; touch-action: manipulation;
  transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar a[aria-current="page"] { background: var(--sel); color: var(--on-sel); box-shadow: inset 0 0 0 2px var(--on-sel); }
.ico { display: block; }
.tabbar .ico { width: 22px; height: 22px; stroke-width: 1.8; }

@media (min-width: 900px) {
  body { padding-bottom: 0; padding-left: 252px; }
  .tabbar { display: none; }
  .topbar { padding-left: 24px; padding-right: 28px; }
  .page { max-width: 904px; margin: 0; padding: 8px 24px 48px; }
  .page.wide { max-width: 1204px; }
  .sidenav {
    display: flex; flex-direction: column; position: fixed; left: 16px; top: 16px; bottom: 16px; width: 220px; padding: 14px 10px 10px;
    background: var(--cardc); border-radius: var(--r-card); box-shadow: var(--shadow); overflow-y: auto; z-index: 25;
  }
  .sidenav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .sidenav a {
    display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
    color: var(--ink); text-decoration: none; font-weight: 600; transition: background-color var(--dur-ui) var(--ease);
  }
  .sidenav a:hover { background: var(--soft); }
  .sidenav a[aria-current="page"] { background: var(--sel); color: var(--on-sel); box-shadow: inset 0 0 0 2px var(--on-sel); }
  .sidenav form { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
  .sidenav .linklike { width: 100%; text-align: left; padding: 10px 16px; }
}

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 0 20px; border: 0; border-radius: 999px;
  background: var(--cardc); color: var(--ink); box-shadow: inset 0 0 0 1px var(--field-line);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; touch-action: manipulation;
  transition: transform var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.btn:active { transform: scale(0.97); background: var(--soft); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn.primary { background: var(--accent-btn); color: var(--on-accent); box-shadow: 0 6px 16px rgba(21, 20, 16, 0.16); }
.btn.primary:hover { box-shadow: 0 0 0 6px rgba(250, 194, 14, 0.18), 0 6px 16px rgba(21, 20, 16, 0.16); }
.btn.primary:active { background: var(--accent-btn); filter: brightness(0.92); }
.btn.danger { color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger); }
.btn.big { min-height: 58px; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; }
.btn.block { display: flex; width: 100%; margin: 4px 0 16px; }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 0.95rem; }
.btn.icon { min-width: 64px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.linklike { background: none; border: 0; color: var(--mute); font: inherit; font-weight: 600; padding: 12px; cursor: pointer; min-height: 44px; }
.linklike:hover { color: var(--ink); }
input, select, textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; color: var(--ink);
  background: var(--cell); border: 1px solid var(--field-line); border-radius: var(--r-field);
  transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--mute); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
input[type="search"] { border-radius: 999px; padding-left: 18px; }
textarea { resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--accent-btn); }
input[type="color"] { width: 64px; padding: 4px; min-height: 48px; }
select { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
label { display: block; font-weight: 600; font-size: 0.92rem; }
label > input, label > select, label > textarea { margin-top: 5px; font-weight: 400; font-size: 1rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; padding: 0; margin-bottom: 8px; }
.stack > * + * { margin-top: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .grid2 { grid-template-columns: 1fr; } }
/* Two time boxes side by side at every width: equal columns, the native time input fills its column. */
.time-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.time-pair label { min-width: 0; }
.time-pair input[type="time"] { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.card { border: 0; border-radius: var(--r-card); box-shadow: var(--shadow); padding: 18px 16px; margin: 0 0 14px; background: var(--card); }
fieldset.card { display: block; }
fieldset.card > legend { float: left; width: 100%; margin-bottom: 8px; }
fieldset.card > legend + * { clear: both; }
fieldset.card > label + label { margin-top: 14px; }
.tag { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 2px 9px; margin-left: 6px; border-radius: 999px; color: var(--mute); background: var(--soft); vertical-align: middle; letter-spacing: 0.01em; }
.callout { background: var(--chip); border-radius: var(--r-field); padding: 10px 14px; color: var(--ink); }
.flash {
  display: flex; align-items: center; gap: 10px; background: var(--card); box-shadow: var(--shadow); color: var(--ink);
  padding: 12px 16px; border-radius: 16px; font-weight: 600; margin: 4px 0 14px;
}
.flash::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pill); }
.errors { background: var(--danger-chip); box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--ink); padding: 12px 16px; border-radius: 16px; margin: 0 0 14px; }
.errors strong { color: var(--danger); }
.errors ul { margin: 4px 0 0; padding-left: 20px; }
ul.plain { list-style: none; margin: 0 0 10px; padding: 0; }
ul.plain li { padding: 6px 0; }
.card > ul.plain:last-child { margin-bottom: 0; }
ul.rows li { border-top: 1px solid var(--line); padding: 8px 0; }
.menu-list { list-style: none; margin: 0 0 20px; padding: 0; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.menu-list li + li { border-top: 1px solid var(--line); }
.menu-list a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 18px; color: var(--ink); text-decoration: none; font-weight: 600; }
.menu-list a::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--mute); border-top: 2px solid var(--mute); transform: rotate(45deg); flex: none; }
.menu-list a:active { background: var(--soft); }
.menu-list.compact { margin: 6px 0 16px; }
.menu-list.compact a { min-height: 44px; font-weight: 500; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 16px; }
.quick a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; }

/* big switch (button for sold-out, checkbox for forms) */
.switch {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px 0 6px;
  border: 0; border-radius: 999px; background: var(--cell); color: var(--ink); box-shadow: inset 0 0 0 1px var(--field-line);
  font: inherit; font-weight: 650; cursor: pointer; touch-action: manipulation; transition: background-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.switch .knob { position: relative; width: 52px; height: 32px; border-radius: 999px; background: var(--track-off); flex: none; transition: background-color var(--dur-ui) var(--ease); }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform var(--dur-ui) var(--ease); }
.switch.on { background: var(--chip); box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--ink); }
.switch.on .knob { background: var(--accent-btn); }
.switch.on .knob::after { transform: translateX(20px); background: #151410; }
.switch .sw-text { min-width: 4.6em; text-align: left; }
.switch[aria-busy="true"] { opacity: 0.6; }
.toggle { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 0; cursor: pointer; font-weight: 600; font-size: 1rem; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .track { position: relative; width: 56px; height: 34px; border-radius: 999px; background: var(--track-off); flex: none; transition: background-color var(--dur-ui) var(--ease); }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease); }
.toggle input:checked + .track { background: var(--accent-btn); }
.toggle input:checked + .track::after { transform: translateX(22px); background: #151410; }
.toggle input:focus-visible + .track { outline: 3px solid var(--ink); outline-offset: 3px; }
.toggle small { display: block; font-weight: 400; color: var(--mute); }

/* pills + segmented. Selected = --pill with --on-pill, always as a pair. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-block; font-weight: 600; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--cell); box-shadow: inset 0 0 0 1px var(--field-line); cursor: pointer; transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.pill input:checked + span { background: var(--sel); color: var(--on-sel); box-shadow: inset 0 0 0 2px var(--on-sel); }
.pill input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.segmented { display: flex; gap: 8px; }
.segmented label { flex: 1; }
.segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented span { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; background: var(--cell); box-shadow: inset 0 0 0 1px var(--field-line); cursor: pointer; font-weight: 600; transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
.segmented input:checked + span { background: var(--sel); color: var(--on-sel); box-shadow: inset 0 0 0 2px var(--on-sel); }
.segmented input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- items ---------- */
.search { display: flex; gap: 8px; margin: 4px 0 10px; }
.search input { flex: 1; }
.cat-block { margin: 0 0 14px; padding: 0 16px 4px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); }
.cat-block > h2 {
  position: sticky; top: var(--topbar-h); background: var(--card); padding: 16px 0 10px; margin: 0; z-index: 5;
  font-size: 1.3rem; font-weight: 300; letter-spacing: -0.02em; border-bottom: 1px solid var(--line); border-radius: var(--r-card) var(--r-card) 0 0;
}
ul.items { list-style: none; margin: 0; padding: 0; }
.item { padding: 14px 0; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--topbar-h) + 64px); }
ul.items > .item:last-child, ul.items > li:last-child { border-bottom: 0; }
.item.is-out .item-name { color: var(--mute); }
.item.is-hidden { opacity: 0.7; }
.item-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 10px; }
.item-name { font-weight: 650; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
a.item-name { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.item-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.price-form { display: flex; align-items: center; gap: 6px; }
.price-form .cur { font-weight: 300; font-size: 1.3rem; color: var(--mute); }
.price-form input { width: 5.8em; text-align: right; font-variant-numeric: tabular-nums; font-weight: 400; font-size: 1.25rem; letter-spacing: -0.01em; }
.js .price-form:not(.dirty) .btn { display: none; }
.price-form.saved input { border-color: var(--ink); background: var(--soft); }
.price-form.bad input { border-color: var(--danger); background: var(--danger-chip); }
.price-static { font-weight: 300; font-size: 1.4rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; padding: 10px 0; color: var(--ink); text-decoration: none; }
a.price-static { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; font-size: 1.1rem; }
.mover { display: flex; gap: 8px; }
.addlink { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font-weight: 600; text-decoration: none; }

/* item form */
.variants .vrow { display: grid; grid-template-columns: 1.4fr 0.8fr 1fr; gap: 8px; margin-bottom: 8px; }
.variants .vrow.one { grid-template-columns: 1.4fr 1fr; }
.variants .vrow label { font-size: 0.85rem; }
.vrow[hidden] { display: none; }
.imgbox { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.imgbox .thumb { width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-field); background: var(--soft); }
.imgbox h3 { flex-basis: 100%; margin: 0; }
.imgbox .hint { flex-basis: 100%; }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; min-height: 0; }
.savebar {
  position: sticky; bottom: calc(var(--tabbar-h) + var(--bar-b) + 12px); padding: 18px 0 8px; z-index: 10;
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}
.savebar .btn { width: 100%; }
@media (min-width: 900px) { .savebar { bottom: 0; } }
.danger-zone { margin: 24px 0; }

/* categories / specials */
details.special { padding: 6px 16px; }
details.special > summary { position: relative; cursor: pointer; list-style: none; min-height: 56px; padding: 6px 28px 6px 0; display: flex; flex-direction: row; align-items: center; gap: 12px; }
details.special > summary::-webkit-details-marker { display: none; }
details.special > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: translateY(-70%) rotate(45deg); transition: transform var(--dur-ui) var(--ease); }
details.special[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.sum-title { font-weight: 650; font-size: 1.05rem; letter-spacing: -0.01em; }
.sum-meta { color: var(--mute); font-size: 0.9rem; }
details.special[open] > summary { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
details.special > form { padding-bottom: 10px; }

/* hours */
.hours { display: grid; gap: 10px; }
.hours-day { background: var(--soft); border-radius: 16px; padding: 8px 12px 12px; }
.hours-day legend { padding: 0 4px; margin: 0; font-size: 1rem; }
.hours-sess { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-top: 6px; }
.color-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }

/* dashboard */
.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.stat { display: block; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px 14px 12px; text-decoration: none; color: var(--ink); transition: transform var(--dur-ui) var(--ease); }
.stat:active { transform: scale(0.98); }
.stat b { display: block; font-size: 2.2rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 4px; color: var(--mute); font-size: 0.82rem; line-height: 1.3; }
.stat.anchor { grid-column: 1 / -1; background: var(--anchor); color: var(--on-anchor); padding: 22px 22px 20px; box-shadow: var(--shadow-float); }
.stat.anchor b { font-size: 4.6rem; letter-spacing: -0.04em; }
.stat.anchor span { color: var(--on-anchor-mute); font-size: 1rem; }
@media (min-width: 640px) {
  .stats-row { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 12px; }
  .stat { padding: 16px; }
  .stat b { font-size: 2.6rem; }
  .stat span { font-size: 0.9rem; }
  .stat.anchor { grid-column: auto; }
}

/* tables / stats */
.table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 14px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.card .table { background: none; box-shadow: none; border-radius: 0; margin-bottom: 4px; }
.table th, .table td { text-align: right; padding: 12px 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; font-weight: 400; }
.table td { font-size: 1.1rem; font-weight: 300; }
.table tbody th { font-weight: 600; font-size: 0.95rem; }
.table tr:last-child > th, .table tr:last-child > td { border-bottom: 0; }
.table th:first-child, .table td:first-child { text-align: left; }
.table td:first-child { font-size: 1rem; font-weight: 400; }
.table thead th { font-size: 0.8rem; color: var(--mute); font-weight: 600; }
.seg-links { display: flex; gap: 6px; margin: 6px 0 14px; padding: 6px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); }
.seg-links a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--ink); transition: background-color var(--dur-ui) var(--ease); }
.seg-links a[aria-current="page"] { background: var(--sel); color: var(--on-sel); box-shadow: inset 0 0 0 2px var(--on-sel); }
.daybars { display: flex; align-items: flex-end; gap: 3px; height: 120px; border-bottom: 1px solid var(--line); }
.daybar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.daybar span { display: block; width: 100%; background: var(--accent); min-height: 2px; border-radius: 4px 4px 0 0; }
ol.bars { list-style: none; margin: 0; padding: 0; }
ol.bars li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 2.6em; gap: 12px; align-items: center; padding: 7px 0; }
.bar-label { overflow-wrap: anywhere; }
.bar-track { background: var(--soft); border-radius: 999px; height: 12px; display: block; }
.bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.bar-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 400; font-size: 1.1rem; }

/* audit */
ul.audit { list-style: none; margin: 0; padding: 0 16px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); }
ul.audit li { padding: 14px 0; border-bottom: 1px solid var(--line); }
ul.audit li:last-child { border-bottom: 0; }
.audit-top { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.audit time { color: var(--mute); font-size: 0.9rem; font-variant-numeric: tabular-nums; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--dock) + 4px); transform: translate(-50%, 8px);
  max-width: 92vw; background: var(--pill); color: var(--on-pill); padding: 12px 20px; border-radius: 999px; font-weight: 600;
  box-shadow: var(--shadow-float); opacity: 0; pointer-events: none; transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); z-index: 60; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--danger); color: var(--on-danger); }
@media (min-width: 900px) { .toast { bottom: 24px; } }

/* ---------- login ---------- */
body.bare { padding: 0; display: flex; align-items: center; justify-content: center; padding: calc(24px + var(--safe-t)) 16px calc(24px + var(--safe-b)); }
.login { width: 100%; max-width: 400px; margin: 0 auto; padding: 32px 24px 26px; background: var(--card); border-radius: 28px; box-shadow: var(--shadow-float); }
.login h1 { margin-top: 0; font-size: 2rem; }
.login .btn.primary { width: 100%; }
.login .brand { margin: 0 0 6px; color: var(--ink); letter-spacing: 0.02em; }
.demo-hint { margin-top: 24px; font-size: 0.9rem; color: var(--mute); }

/* ---------- staff board: Coterie skin, kitchen-tablet legibility first ---------- */
.board-status { font-size: 0.9rem; color: var(--mute); margin: 0 0 12px; }
.board-status.bad { color: var(--danger); font-weight: 700; }
.calls { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.call { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow), inset 0 0 0 3px var(--accent); }
.call .what { font-weight: 700; font-size: 1.2rem; }
.call .tbl { font-size: 2.2rem; font-weight: 500; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.call .btn.done, .order-actions .done { background: var(--k-gold); color: var(--k-ink); box-shadow: none; } /* the primary action is yellow with ink */
.orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.order { border-radius: var(--r-card); overflow: hidden; background: var(--card); box-shadow: var(--shadow-float); }
/* CONTRACT-DESIGN 2: the header bar is the ticket's age. Gold under 20 min, amber 20-40 (.warn), red over 40 (.late). */
.order-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--k-gold); color: var(--k-ink); }
.order-table { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.order-table small { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; margin-right: 8px; }
.order-age { font-family: var(--mono); font-size: 0.85rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.order-lines { list-style: none; margin: 0; padding: 8px 18px; }
/* CONTRACT-DESIGN 5: a fixed quantity column (mono, right-aligned so the x signs line up), the dish in bold, then the muted Chinese name and options. */
.order-lines li { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 3.2rem 1fr; gap: 6px 10px; }
.order-lines li:last-child { border-bottom: 0; }
.order-lines .q { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; line-height: 1.35; text-align: right; font-variant-numeric: tabular-nums; }
.order-lines .nm { font-size: 1.25rem; font-weight: 700; }
.order-lines .nm2 { font-size: 1.05rem; color: var(--mute); }
.order-lines .vr { font-weight: 600; color: var(--mute); }
/* A diner's note is an instruction to the cook: never muted. Bold, ink, outlined and tinted yellow. */
.order-lines .nt { overflow-wrap: anywhere; max-width: 100%; display: inline-block; margin-top: 3px; background: var(--chip); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); padding: 2px 10px; border-radius: 10px; font-weight: 800; }
.order-note { overflow-wrap: anywhere; margin: 0; padding: 10px 18px; background: var(--chip); color: var(--ink); font-weight: 600; }
.order-actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 12px 18px 18px; }
.order-actions .btn { min-height: 64px; font-size: 1.25rem; }
.order-actions .btn.danger { padding: 0 24px; }
.big-empty { font-size: 1.2rem; padding: 40px 0; text-align: center; }
@media (min-width: 900px) { .board-page .order-table { font-size: 4.2rem; } }

/* ---------- QR sheet. Cards stay black on white in every theme so the code always scans and prints right. ---------- */
.qr-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.qr-card { border: 1.5px dashed #8a8a86; border-radius: var(--r-card); padding: 16px; text-align: center; background: #fff; color: #121212; break-inside: avoid; page-break-inside: avoid; }
.qr-venue { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; }
.qr-code svg, .qr-code img { width: 200px; height: 200px; max-width: 100%; display: block; margin: 0 auto; background: #fff; }
.qr-table { font-size: 1.9rem; font-weight: 400; letter-spacing: -0.02em; margin: 6px 0 0; }
.qr-scan { font-weight: 700; margin: 2px 0; }
.qr-url { font-family: ui-monospace, Consolas, monospace; font-size: 0.95rem; font-weight: 700; margin: 4px 0 0; overflow-wrap: normal; }
.qr-check { font-size: 0.8rem; color: #55554f; margin: 0 0 4px; }
.qr-fine { font-size: 0.8rem; color: #55554f; margin: 0; }

/* ---------- visual menu: media boxes, option sets, posts ---------- */
.checker {
  background-color: var(--check-a);
  background-image: conic-gradient(var(--check-b) 25%, transparent 0 50%, var(--check-b) 0 75%, transparent 0);
  background-size: 16px 16px;
}
.mbox { position: relative; flex: none; width: 132px; aspect-ratio: 1; border-radius: var(--r-field); overflow: hidden; box-shadow: inset 0 0 0 1px var(--field-line); }
.mbox.plate { background: #FFFFFF; }
.mbox .thumb, .imgbox .mbox .thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 0; background: transparent; display: block; }
.mph { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 600; text-align: center; padding: 8px; color: var(--ink); }
.mbox:has(.thumb[hidden]) .mph { display: flex; }
.imgbox.media { align-items: flex-start; gap: 8px 16px; }
.imgbox.media > h3 { flex-basis: 100%; }
.mctl { flex: 1 1 148px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mctl .hint { margin: 0; flex-basis: auto; }
.mctl .btn { max-width: 100%; text-align: center; }
.media-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; }
.maxrow .narrow { width: 6em; display: block; }

.sum-thumb { flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background-size: 12px 12px; }
.sum-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sum-text { display: flex; flex-direction: column; min-width: 0; }
.sum-text .sum-title { overflow-wrap: anywhere; }
.kind { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--soft); color: var(--ink); letter-spacing: 0.01em; }
.kind-pick { background: var(--pill); color: var(--on-pill); }
.kind-news { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }

.tag.first { margin-left: 0; }
.optsets { list-style: none; margin: 0; padding: 0; }
.optset .meta { margin: 4px 0 0; }
.optset-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.optset h2 { margin: 0; font-size: 1.3rem; font-weight: 300; letter-spacing: -0.02em; }
.optset h2 a { color: var(--ink); text-decoration: none; }
.optset-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.optset-foot .mover { margin-left: auto; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; padding: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--cell); box-shadow: inset 0 0 0 1px var(--field-line); font-weight: 600; font-size: 0.95rem; }
.chip b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.chip.on { background: var(--chip); box-shadow: inset 0 0 0 1.5px var(--accent); }

.choices { list-style: none; margin: 0 0 12px; padding: 0; }
.crow { background: var(--soft); border-radius: 16px; padding: 10px 12px 12px; margin: 0 0 10px; }
.cfields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cfields > label:first-of-type { grid-column: 1 / -1; }
@media (min-width: 640px) { .cfields { grid-template-columns: 1.5fr 1fr 0.8fr; } .cfields > label:first-of-type { grid-column: auto; } }
.cctl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cctl .btn.small { min-height: 44px; padding: 0 11px; font-size: 0.9rem; }
.cctl .pill span { padding: 0 12px; font-size: 0.9rem; }

.optpick { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.optrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.optmove { display: flex; gap: 6px; }
.optrow .optsum { order: 3; flex: 1 0 100%; font-size: 0.8rem; line-height: 1.3; margin-top: -2px; overflow-wrap: anywhere; }

.order-lines .opts { font-size: 1.1rem; font-weight: 600; color: var(--mute); line-height: 1.3; }

/* ---------- motion: cards ease in on load (final state when animation never runs) ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.page > * { animation: rise var(--dur-in) var(--ease) backwards; }
.page > :nth-child(2) { animation-delay: 50ms; }
.page > :nth-child(3) { animation-delay: 100ms; }
.page > :nth-child(4) { animation-delay: 150ms; }
.page > :nth-child(5) { animation-delay: 200ms; }
.page > :nth-child(n+6) { animation-delay: 250ms; }

@media print {
  @page { size: A4; margin: 10mm; }
  html, body, body.qr-page { padding: 0 !important; background: #fff !important; color: #000 !important; font-size: 11pt; }
  body::before { display: none; }
  .topbar, .sidenav, .tabbar, .toast, .no-print, .skip, .flash { display: none !important; }
  .page, .page.wide { max-width: none; padding: 0; margin: 0; }
  .page > * { animation: none; }
  /* 3 rows of 86 mm + 2 gaps of 4 mm = 266 mm, inside A4's 277 mm (F-R015-1). The content is sized to fit inside the card. */
  .qr-sheet { grid-template-columns: 1fr 1fr; gap: 4mm; }
  .qr-card { height: 86mm; overflow: hidden; padding: 4mm; border: 0.3mm dashed #666; border-radius: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.6mm; }
  .qr-card p, .qr-card h2 { margin: 0; line-height: 1.2; }
  .qr-code svg, .qr-code img { width: 44mm; height: 44mm; }
  .qr-venue { font-size: 12pt; }
  .qr-table { font-size: 17pt; }
  .qr-url { font-size: 10pt; }
  .qr-scan, .qr-check, .qr-fine { font-size: 8.5pt; }
}

/* ---------- owner v2: live tables, table list, charts, pickers, combos ---------- */
.item.is-out .item-main { opacity: 0.6; }
.legacy-tables { display: none !important; }

.live { margin: 0 0 16px; }
.live > h2 { margin-bottom: 8px; }
.live-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.live-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line); min-width: 0; }
.live-card.idle { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--line); opacity: 0.85; }
.lc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lc-name { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; min-width: 0; }
.lc-num { font-size: 0.85rem; font-weight: 600; color: var(--mute); letter-spacing: 0; }
.lc-time { text-align: right; flex: none; }
.lc-time b { display: block; font-size: 1.6rem; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.lc-time span { display: block; font-size: 0.75rem; color: var(--mute); }
.lc-spend { font-size: 2rem; font-weight: 300; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lc-meta { color: var(--mute); font-size: 0.9rem; }
.lc-pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chip-paid, .chip-unpaid { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.chip-paid { background: var(--soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.chip-unpaid { background: var(--chip); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.live-card .btn { margin-top: 8px; align-self: flex-start; }
/* the strip on the staff board: one scrolling row */
.live.compact .live-list { display: flex; overflow-x: auto; gap: 10px; padding: 2px 2px 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.live.compact .live-card { flex: 0 0 230px; scroll-snap-align: start; padding: 10px 14px; }
.live.compact .lc-name { font-size: 1.15rem; }
.live.compact .lc-spend { font-size: 1.5rem; }
.live.compact > h2 { font-size: 1.05rem; }

.order-table.named { font-size: 1.9rem; line-height: 1.1; overflow-wrap: break-word; word-break: normal; min-width: 0; flex: 1 1 8ch; }
.order-head { flex-wrap: wrap; }
.order-table .tlabel { white-space: nowrap; }
.order-table .tlabel { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; margin-right: 0; }
@media (min-width: 900px) { .board-page .order-table.named { font-size: 2.3rem; } }
.order-lines .combo { list-style: none; margin: 4px 0 2px; padding: 0 0 0 14px; border-left: 3px solid var(--accent); }
.order-lines .combo li { display: block; padding: 2px 0; border: 0; font-size: 1.1rem; font-weight: 650; }
.order-lines .combo .cn2 { color: var(--mute); font-weight: 500; }

.tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 640px) { .tgrid { grid-template-columns: 0.8fr 1.4fr 1.4fr 0.7fr; } }
.trows { list-style: none; margin: 0; padding: 0; }
.trow { padding: 0; }
.trow > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; cursor: pointer; list-style: none; }
.trow > summary::-webkit-details-marker { display: none; }
.trow > summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); transition: transform var(--dur-ui) var(--ease); }
.trow[open] > summary::after { transform: rotate(225deg); }
.trow > form, .trow > .trow-foot { margin: 0 16px 14px; }
.tname { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.tmeta { margin-left: auto; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.trow-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.trow input[readonly] { background: var(--soft); color: var(--mute); }
.bulk { margin-top: 12px; }
.bulk > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }

.upsell-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow-y: auto; }
.upsell-opt { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 10px 4px 8px; border-radius: 16px; background: var(--cell); box-shadow: inset 0 0 0 1px var(--field-line); cursor: pointer; }
.upsell-opt input { width: 22px; height: 22px; flex: none; accent-color: var(--ink); }
.upsell-opt:has(input:checked) { background: var(--chip); box-shadow: inset 0 0 0 1.5px var(--accent); }
.upsell-opt:has(input:disabled) { opacity: 0.5; cursor: not-allowed; }
.up-thumb { flex: none; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background-size: 12px 12px; }
.up-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.up-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.up-cat { font-weight: 400; color: var(--mute); }
.cdishbox { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; }
.cdish { flex: 1 1 220px; min-width: 0; }
.cdish select { width: 100%; }

/* charts: server-rendered SVG, fills come from the admin tokens so both themes work */
.ins-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.ins-cards .stat { padding: 14px; }
.ins-cards .stat b { font-size: 1.7rem; overflow-wrap: anywhere; }
@media (min-width: 900px) { .ins-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ins-cards .stat b { font-size: 1.9rem; } }
.notice { background: var(--soft); box-shadow: inset 0 0 0 1.5px var(--field-line); border-radius: 14px; padding: 10px 14px; font-weight: 600; }
.chart { margin: 0; }
.ch { display: block; width: 100%; max-width: 640px; height: auto; overflow: visible; }
.ch-bar { fill: var(--accent); stroke: var(--field-line); stroke-width: 0.6; }
.ch-track { fill: var(--soft); }
.ch-thumb-bg { fill: var(--soft); }
.ch-axis { stroke: var(--field-line); stroke-width: 1; }
.ch-grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-t { fill: var(--ink); font: 600 13px var(--font); }
.ch-v { fill: var(--ink); font: 500 13px var(--font); font-variant-numeric: tabular-nums; }
.ch-m { fill: var(--mute); font: 11px var(--font); font-variant-numeric: tabular-nums; }

/* ---------- owner v3: order age edges, order history, dialogs, platform ---------- */
:root { --amber: #B87800; }
@media (prefers-color-scheme: dark) { :root { --amber: #F0B429; } }
.order.warn .order-head { background: var(--k-amber); color: var(--k-ink); }
.order.late .order-head { background: var(--k-red); color: #FFFFFF; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.order-actions .done { flex: 1 1 140px; }
.order-actions .btn { min-height: 64px; font-size: 1.15rem; }
.order-actions .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; padding: 6px; background: var(--card); border-radius: 26px; box-shadow: var(--shadow); }
@media (min-width: 640px) { .tabs { flex-wrap: nowrap; border-radius: 999px; } }
.tabs a { flex: 1 1 40%; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.tabs a[aria-current="page"] { background: var(--sel); color: var(--on-sel); box-shadow: inset 0 0 0 2px var(--on-sel); }
.tabs .count { font-size: 0.78rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--soft); font-variant-numeric: tabular-nums; }
.tabs a[aria-current="page"] .count { background: rgba(21, 20, 16, 0.14); color: inherit; }
.ofilters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ofilters select, .ofilters input[type="search"] { flex: 1 1 140px; min-width: 0; }
.olist { list-style: none; margin: 0; padding: 0; }
.orow { padding: 14px 16px; }
.orow-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.orow-id { min-width: 0; overflow-wrap: anywhere; }
.orow-id b { font-size: 1.1rem; }
.orow-table { font-weight: 600; }
.orow-total { font-size: 1.3rem; font-weight: 300; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; flex: none; }
.orow p { margin: 4px 0; }
.orow-time { color: var(--mute); font-size: 0.92rem; }
.orow-lines { overflow-wrap: anywhere; }
.orow-who { color: var(--mute); font-size: 0.9rem; }
.orow-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opay, .ost { display: inline-block; font-size: 0.78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--soft); }
.opay.paid { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.opay.part { background: var(--chip); box-shadow: inset 0 0 0 1px var(--accent); }
.opay.refd { background: var(--danger-chip); box-shadow: inset 0 0 0 1px var(--danger); }
.opay.unpaid { background: var(--chip); }
.ost.bad { background: var(--danger-chip); color: var(--ink); }
.orow-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0; }

dialog.ohdlg { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: min(560px, 100vw - 24px); width: 100%; }
dialog.ohdlg::backdrop { background: rgba(10, 9, 5, 0.55); }
.ohdlg-box { background: var(--card); color: var(--ink); border-radius: 22px; box-shadow: var(--shadow-float); padding: 20px 18px 16px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.ohdlg-box h2 { margin: 0 0 10px; font-size: 1.35rem; font-weight: 400; overflow-wrap: anywhere; }
.ohdlg-note { background: var(--soft); border-radius: 14px; padding: 10px 12px; font-size: 0.95rem; }
.ohdlg-err { color: var(--danger); font-weight: 650; margin: 10px 0 0; }
.ohdlg-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ohdlg-actions .btn { flex: 1 1 140px; min-height: 52px; }
.ohdlg-reasons { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.ohdlg-reasons legend { font-weight: 650; margin-bottom: 4px; padding: 0; }
.ohdlg-radio { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 14px; background: var(--cell); box-shadow: inset 0 0 0 1px var(--field-line); cursor: pointer; }
.ohdlg-radio input { width: 20px; height: 20px; accent-color: var(--ink); }
.ohdlg-radio:has(input:checked) { background: var(--chip); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ohdlg-other { margin-top: 4px; width: 100%; }
.ohdlg-modes { display: flex; gap: 8px; margin: 12px 0 8px; }
.ohdlg-modes .ohdlg-radio { flex: 1; }
.ohdlg-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ohdlg-lcheck { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ohdlg-lcheck input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--ink); flex: none; }
.ohdlg-lname { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.ohdlg-lname small { font-weight: 400; color: var(--mute); }
.ohdlg-lprice { color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ohdlg-amount label { display: block; font-weight: 600; }
.ohdlg-total { font-weight: 650; margin: 12px 0 0; font-variant-numeric: tabular-nums; }

.platform-venues { display: grid; gap: 12px; }
.pv { padding: 14px 16px; }
.pv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pv .tgrid { margin-top: 10px; }
.pv select, .pv input { width: 100%; }

/* ---------- effect preview (item editor) ---------- */
.fx-preview { margin: 12px 0; }
.fx-stage { position: relative; width: 180px; height: 220px; border-radius: 18px; background: radial-gradient(closest-side, rgba(246, 213, 74, 0.45), rgba(250, 228, 138, 0.2) 60%, transparent 76%), #f6f0dc; overflow: hidden; box-shadow: inset 0 0 0 1px var(--field-line); }
/* fx.js draws here exactly as on the diner's dish page (classes from public/css/menu.css). */
.fx-stage .fx { position: absolute; display: block; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; z-index: 2; }
.fx-stage .fx.on { opacity: 1; }
.fx-stage .fx.back { z-index: 0; }
.fx-stage .hfloat, .fx-stage .htilt { position: absolute; inset: 0; }
.fx-stage .hfloat { animation: fxhfl 5.2s ease-in-out infinite; }
@keyframes fxhfl { 0%, 100% { transform: translateY(0) rotate(-0.4deg); } 50% { transform: translateY(-6px) rotate(0.5deg); } }
.fx-stage .shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: var(--m); mask-image: var(--m); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%) 160% 0/250% 100% no-repeat; animation: fxshn 4s ease-in-out infinite; }
@keyframes fxshn { 0% { background-position: 160% 0; } 26% { background-position: -60% 0; } 100% { background-position: -60% 0; } }
.fx-img { position: absolute; left: 30px; bottom: 8px; width: 120px; height: 120px; object-fit: contain; z-index: 1; }
.fx-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fx-back { z-index: 0; }
.fx-video { position: absolute; left: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: 0.9; }
.fx-steam_cup, .fx-steam_dish, .fx-charcoal { top: -28%; }
.fx-cold_mist, .fx-flame { top: 0; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-shine::after { content: ""; position: absolute; top: -10%; bottom: -10%; width: 34%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-18deg); animation: fxshine 3.6s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes fxshine { 0% { left: -40%; } 55%, 100% { left: 120%; } }
.fx-float .fx-img { animation: fxfloat 3.4s ease-in-out infinite; }
@keyframes fxfloat { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-7px) rotate(1.2deg); } }
.fx-note { margin: 6px 0 0; color: var(--mute); font-size: 0.88rem; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* SC-16: the auto-focused radio in a dialog gets a round ring, and only for keyboard focus */
dialog.ohdlg input[type=radio]:focus:not(:focus-visible) { outline: none; }
dialog.ohdlg input[type=radio]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 50%; }
/* SC-14: the demo-login hint links are easier to tap */
.demo-hint a { display: inline-block; padding: 10px 2px; }
/* Stamp card ("Regulars", CONTRACT-LOYALTY.md): the board's free-line chip and the Settings card's category pills. */
.order-lines .free-chip { display: inline-block; margin-top: 3px; background: var(--accent); color: var(--on-accent); padding: 2px 10px; border-radius: 999px; font-weight: 700; }
.loy-nums { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.loy-nums > div { flex: 1 1 8rem; background: var(--soft); border-radius: 14px; padding: 10px 14px; }
.loy-nums b { display: block; font-size: 1.7rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.loy-nums span { color: var(--mute); font-size: 0.85rem; }
/* After the visit (CONTRACT-REVIEW.md): the review-gift warning, a voucher line on the board, the Feedback list in Insights. */
.callout.warn { box-shadow: inset 4px 0 0 var(--accent); }
.callout.warn p { margin: 0 0 8px; }
.callout.warn[hidden], [data-reward-accepted][hidden], [data-test-link][hidden] { display: none; }
.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.check input { width: 22px; height: 22px; }
.order-lines .voucher-chip { display: inline-block; margin-top: 3px; background: var(--chip); padding: 2px 10px; border-radius: 999px; font-weight: 700; }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fb-list li { background: var(--soft); border-radius: 14px; padding: 10px 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.fb-list time { display: block; color: var(--mute); font-size: 0.8rem; margin-bottom: 2px; }

/* Price rules (CONTRACT-PRICERULES.md) */
[data-pr-days][hidden], [data-pr-cats][hidden], [data-pr-itemsel][hidden], [data-pr-warn][hidden] { display: none; }
.pr-form select[multiple] { width: 100%; }
.preview { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; min-height: 1.4em; }

/* F-R012-3: the order note in the history, wrapped so a long word cannot run off */
.orow-note { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.orow-lines { overflow-wrap: anywhere; }

/* ---------- kitchen order detail + Tables tab (CONTRACT-KITCHEN.md) ---------- */
.btabs { margin-top: 4px; }
.btabs button { flex: 1 1 40%; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.btabs button[aria-selected="true"] { background: var(--k-gold); color: var(--k-ink); } /* the current tab is the yellow highlight */
.btabs button[aria-selected="true"] .count { background: rgba(18, 18, 18, 0.14); color: inherit; }
.order.tappable { cursor: pointer; }
.order.tappable:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
/* A cancelled line or unit (KITCHEN2 section 4): struck through AND in the error red (--danger is 4.5:1+ on the card in both themes; no opacity, which would lower it). */
.order-lines li.void .nm, .order-lines li.void .q, .od-line.void .nm, .od-line.void .od-q, .od-line.void .od-price, .ln-x { color: var(--danger); text-decoration: line-through; }
/* Sound: an icon button (speaker; a slash when off) and the "Tap to enable sound" chip (KITCHEN2 A) */
.sound-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sound-btn { min-width: 44px; min-height: 44px; width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.sound-btn svg { display: block; }
.sound-btn .sound-slash { display: none; }
.sound-btn[aria-pressed="false"] .sound-slash { display: inline; }
.sound-btn[aria-pressed="false"] .sound-waves { display: none; }
.sound-chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--danger-chip); box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; }
.sound-chip[hidden] { display: none; }
.ln-x-why { color: var(--danger); font-weight: 600; }
.od-line.adj .od-price, .od-line.adj .nm { font-weight: 700; }
.od-line.adj.void .nm, .od-line.adj.void .od-price { color: var(--danger); text-decoration: line-through; }
.od-unit-n { color: var(--mute); font-size: 0.85rem; font-weight: 600; }
.od-due { background: var(--danger-chip); box-shadow: inset 0 0 0 1.5px var(--danger); color: var(--ink); border-radius: 14px; padding: 10px 14px; margin: 8px 0; display: grid; gap: 6px; }
.od-due b { font-size: 1.15rem; }
.od-due.done { background: var(--soft); box-shadow: none; }
.od-adj-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.od-adj-row select, .od-adj-row input[type="number"] { min-height: 44px; }
.od-adj-row input[type="number"] { width: 7em; }
.rfrow .rf-amt, .vrow .rf-amt { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rfrow .rf-status, .vrow .rf-status { font-weight: 700; }
.rfrow .rf-status.due, .vrow .rf-status.due, .vrow .rf-status.void, .vr-total .rf-status.due { color: var(--danger); }
.rfrow .rf-lines, .vrow .rf-lines { margin: 4px 0; overflow-wrap: anywhere; }
.vr-total { font-size: 1.1rem; margin: 8px 0; }
.vr-total b { font-variant-numeric: tabular-nums; }
/* CONTRACT-KITCHEN3: Reset table. A button on each occupied tile; "Paid · Reset table?" is highlighted when a pay-first bill is fully paid and everything is served. */
.kt-reset { display: block; width: calc(100% - 28px); margin: 0 14px 12px 18px; min-height: 44px; }
.ktable.paid-reset { box-shadow: var(--shadow), inset 0 0 0 2.5px var(--accent); }
.ktable.paid-reset .kt-state { color: var(--ink); }
.ktable.paid-reset .kt-reset { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.od-resetbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.od-resetbar.paid { background: var(--chip); border-radius: 14px; padding: 10px 14px; box-shadow: inset 0 0 0 2px var(--accent); }
.rs-units { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.rs-units li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; background: var(--soft); border-radius: 10px; }
.rs-units .rs-opts { color: var(--mute); font-size: 0.9rem; }
.rs-amt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.rs-amt input { width: 7em; min-height: 44px; }
.rs-note { color: var(--danger); font-weight: 600; }
/* A card the kitchen must see was CANCELLED by Reset table: lines struck through in red (the normal .void rule) + a banner. */
.order.reset-cancelled { box-shadow: var(--shadow), inset 0 0 0 3px var(--danger); }
.reset-banner { background: var(--danger-chip); color: var(--danger); box-shadow: inset 0 0 0 2px var(--danger); font-weight: 800; font-size: 1.15rem; padding: 8px 18px; letter-spacing: 0.01em; }
.reset-banner .zh { font-weight: 600; margin-left: 8px; }
.od-why { color: var(--danger); font-size: 0.9rem; font-weight: 600; margin-top: 2px; }

/* Kitchen Tables tab (Lee 20:49: restyled to match the order cards). A compact grid in the owner's table order: a free table is a quiet
   small tile; a table with guests spans two columns and shows its bill, dishes waiting and timings. Amber / red as on the order cards. */
.ktables { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-items: start; } /* no dense packing: the owner's order always wins */
.ktable { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
.ktable:not(.state-free) { grid-column: span 2; }
.ktable.state-free { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.ktable.level-amber { box-shadow: var(--shadow), inset 6px 0 0 var(--amber); }
.ktable.level-red { box-shadow: var(--shadow), inset 6px 0 0 var(--danger); background: var(--danger-chip); }
.kt-main { display: block; width: 100%; text-align: left; border: 0; background: transparent; color: inherit; font: inherit; padding: 12px 14px 12px 18px; min-height: 64px; cursor: pointer; }
.state-free .kt-main { padding: 10px 14px; min-height: 56px; }
.kt-main:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.kt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kt-name { font-size: 1.02rem; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.kt-name small { font-weight: 500; color: var(--mute); }
.state-free .kt-name { color: var(--mute); font-weight: 500; }
.kt-bill { font-size: 1.02rem; font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.kt-state { margin-top: 4px; font-size: 0.95rem; font-weight: 600; }
.state-free .kt-state { margin-top: 2px; font-size: 0.82rem; font-weight: 500; color: var(--mute); }
.ktable.level-amber .kt-age { color: var(--k-amber-text); }
.ktable.level-red .kt-age { color: var(--danger); }
.kt-meta { margin-top: 2px; font-size: 0.85rem; color: var(--mute); }

/* the itemised sheet */
dialog.ohdlg:has(.od) { max-width: min(640px, 100vw - 16px); }
.od { display: grid; gap: 10px; min-width: 0; }
.od-head { display: grid; gap: 4px; }
.od-table { font-size: 1.2rem; font-weight: 650; overflow-wrap: anywhere; }
.od-time { color: var(--mute); font-size: 0.92rem; }
.od-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.od-chip { padding: 2px 10px; border-radius: 999px; background: var(--soft); font-size: 0.85rem; font-weight: 650; }
.od-chip.bad { background: var(--danger-chip); box-shadow: inset 0 0 0 1px var(--danger); }
.od-flash { background: var(--soft); border-radius: 14px; padding: 8px 12px; margin: 0; font-size: 0.95rem; }
.od-err { color: var(--danger); font-weight: 650; margin: 0; overflow-wrap: anywhere; }
.od-lines { list-style: none; margin: 0; padding: 0; }
.od-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: start; }
.od-line:has(.od-sel) { grid-template-columns: auto minmax(0, 1fr) auto; }
.od-sel { display: flex; flex-direction: column; gap: 4px; min-width: 24px; }
.od-sel input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--ink); }
.od-qty { max-width: 6.5em; }
.od-body { min-width: 0; overflow-wrap: anywhere; }
.od-name { display: flex; gap: 8px; align-items: baseline; }
.od-q { font-weight: 650; font-variant-numeric: tabular-nums; }
.od-body .nm { font-weight: 650; }
.od-body .nm2, .od-body .opts, .od-body .vr { color: var(--mute); font-size: 0.92rem; }
.od-body .nt { display: inline-block; margin-top: 3px; background: var(--chip); padding: 1px 10px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; }
.od-body .combo { margin: 2px 0 0 12px; padding: 0; list-style: none; font-size: 0.92rem; }
.od-price { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.od-total { display: flex; justify-content: space-between; font-size: 1.15rem; padding-top: 4px; }
.od-total.sub { font-size: 0.95rem; color: var(--mute); }
.od-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.od-actions .btn { flex: 1 1 130px; min-height: 48px; }
.od-tools { display: flex; gap: 8px; }
.od-panel { display: grid; gap: 8px; margin-top: 4px; }
.od-reason, .od-comment, .od-note, .od-additem { width: 100%; }
.ohdlg-reasons label { display: block; font-weight: 650; }
.od-hist h3 { margin: 10px 0 4px; font-size: 1rem; }
.od-hist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.od-h1 { font-weight: 600; font-size: 0.92rem; }
.od-h2 { color: var(--mute); font-size: 0.88rem; overflow-wrap: anywhere; }
.od-h2.rm { color: var(--danger); }
.od-h2.ad { color: var(--ink); }
.od-eline { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 8px; list-style: none; }
.od-eline.removed .od-ename { text-decoration: line-through; opacity: 0.6; }
.od-etop { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.od-ename { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.od-ectl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.od-step { display: inline-flex; align-items: center; gap: 8px; }
.od-step .btn { min-width: 44px; min-height: 44px; }
.od-qn { min-width: 1.6em; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; }
.od-add { display: flex; gap: 8px; margin-top: 10px; }
.od-add select { flex: 1; min-width: 0; }
.od-opts { display: grid; gap: 8px; }
.od-opts.sub { margin: 6px 0 2px 14px; }
.od-set { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; min-width: 0; }
.od-set legend { font-weight: 650; padding: 0; margin-bottom: 2px; }
.od-choice { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 12px; background: var(--cell); box-shadow: inset 0 0 0 1px var(--field-line); }
.od-choice input { width: 20px; height: 20px; accent-color: var(--ink); flex: none; }
.od-visit-order { border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px; display: grid; gap: 6px; }
.od-visit-order.void { opacity: 0.75; }
.od-vh { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.od-vh .od-price { margin-left: auto; }
@media (max-width: 480px) { .od-actions .btn { flex: 1 1 100%; } .od-visit-order .od-actions .btn { flex: 1 1 40%; } }

/* ---------- insights: period picker, growth against the benchmark (CONTRACT-INSIGHTS2.md) ---------- */
.ins-form { display: flex; flex-direction: column; gap: 10px; }
.ins-form .ins-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ins-form label { flex: 1 1 140px; min-width: 0; }
.ins-form input, .ins-form select { width: 100%; max-width: 100%; min-width: 0; }
.ins-form .hint { margin: 0; }
.ins-form .btn { align-self: flex-start; }
.ins-cards .stat { min-width: 0; }
.ins-cards .stat.wide { grid-column: 1 / -1; }
.ins-cards .stat b.sm { font-size: 1.3rem; }
.stat .vs { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 0.82rem; line-height: 1.3; }
.stat .vs span { display: inline; margin: 0; font-size: inherit; }
.stat .vs .gr { font-weight: 700; font-variant-numeric: tabular-nums; }
.stat .vs .gr.good, .stat .vs .gr.bad { color: var(--ink); }
.stat .vs .gr.none { color: var(--mute); }
.stat .vs .was { color: var(--mute); overflow-wrap: anywhere; }

/* OrderHero lockup (src/lib/brand.tsx). */
.oh-lockup { display: inline-block; vertical-align: middle; height: auto; max-width: 100%; }
.brand .oh-lockup + span, .brand picture + span { margin-left: 8px; font-weight: 500; opacity: .8; }
.brand picture { display: inline-flex; vertical-align: middle; }
.plat { margin-left: 8px; font-size: .85rem; font-weight: 500; opacity: .7; }

/* ---------- Ask OrderHero (CONTRACT-ASSIST): the assistant chat, the AI credit page, the credit coin ---------- */
.coin { display: inline-block; vertical-align: -3px; margin-right: 5px; flex: none; }
.money { display: inline-flex; align-items: center; white-space: nowrap; }
.t-zh { display: block; color: var(--mute); font-size: 0.92em; }
.asst-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.asst-head h1 { margin: 0.5rem 0; }
.asst-bal { text-decoration: none; color: var(--ink); font-variant-numeric: tabular-nums; }
.asst-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.asst-chip { cursor: pointer; border: 0; font: inherit; font-weight: 600; font-size: 0.92rem; color: var(--ink); text-align: left; min-height: 44px; padding: 6px 14px; }
.asst-chip:active { background: var(--soft); }
.asst-log { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.asst-msg p { margin: 0 0 8px; overflow-wrap: anywhere; }
.asst-msg.me { align-self: flex-end; max-width: 88%; background: var(--chip); border-radius: 18px 18px 4px 18px; padding: 8px 14px; }
.asst-msg.me .asst-who { font-size: 0.75rem; color: var(--mute); font-weight: 600; }
.asst-msg.bot { align-self: stretch; }
.asst-err { color: var(--danger); font-weight: 600; }
.asst-form { position: sticky; bottom: calc(var(--dock) - 8px); margin-bottom: 8px; }
.asst-form textarea { width: 100%; resize: none; }
.asst-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.asst-row .hint { margin: 0; }
.asst-nocredit { margin: 0 0 12px; }
.asst-table { padding: 14px 12px; margin: 8px 0; }
.asst-table h3 { margin: 0 0 10px; font-size: 1rem; }
.asst-scroll { overflow-x: auto; }
.asst-table .table { margin-bottom: 0; font-size: 0.95rem; }
.asst-table .table td, .asst-table .table th { padding: 8px 10px; font-size: 0.95rem; }
.asst-total th, .asst-total td { font-weight: 700; }
.asst-first { text-align: left; font-weight: 500; overflow-wrap: anywhere; }
.asst-chart { margin: 0 0 12px; }
.asst-chart.bars { display: flex; flex-direction: column; gap: 6px; }
.asst-chart.bars .asst-bar { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; align-items: center; gap: 8px; font-size: 0.88rem; }
.asst-bar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asst-bar-t { display: block; height: 12px; background: var(--soft); border-radius: 999px; overflow: hidden; }
.asst-bar-f { display: block; height: 100%; background: var(--accent-btn); border-radius: 999px; }
.asst-chart.bars .asst-bar-f { width: 0; }
.asst-chart.cols { display: flex; align-items: flex-end; gap: 4px; height: 130px; }
.asst-chart.cols .asst-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; font-size: 0.7rem; text-align: center; }
.asst-chart.cols .asst-bar-t { flex: 1; display: flex; align-items: flex-end; background: none; border-radius: 4px 4px 0 0; }
.asst-chart.cols .asst-bar-f { width: 100%; border-radius: 4px 4px 0 0; }
.asst-chart.cols .asst-bar-l { overflow: hidden; }
.asst-prop { margin: 8px 0; padding: 14px; box-shadow: inset 4px 0 0 var(--accent), var(--shadow); }
.asst-prop-h { font-size: 0.78rem; font-weight: 700; color: var(--mute); text-transform: uppercase; letter-spacing: 0.04em; }
.asst-prop-s { font-weight: 600; margin: 4px 0 8px; }
.asst-prop-r { margin: 10px 0 0; font-weight: 600; }
.asst-prop-r.failed { color: var(--danger); }
.asst-foot-note { margin-top: 16px; }
.aic-big { font-size: 2.2rem; font-weight: 300; letter-spacing: -0.03em; margin: 0 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.aic-of { font-size: 1rem; letter-spacing: 0; }
.aic-bar { height: 12px; background: var(--soft); border-radius: 999px; overflow: hidden; margin: 10px 0 4px; }
.aic-bar span { display: block; height: 100%; background: var(--accent-btn); border-radius: 999px; }
.aic-more { margin-top: 10px; }
.aic-days { display: flex; align-items: flex-end; gap: 2px; height: 120px; }
.aic-day { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; font-size: 0.62rem; color: var(--mute); }
.aic-col { display: block; background: var(--accent-btn); border-radius: 3px 3px 0 0; min-height: 0; }
.aic-day.today .aic-n { color: var(--ink); font-weight: 700; }
.aic-n { margin-top: 3px; }
.aic-list .aic-q { overflow-wrap: anywhere; }

/* U (CONTRACT-DEALS): "Also suggest everything in" category pills under the item picker */
.upsell-cats { margin: 4px 0 14px; }
.upsell-cats .hint { margin-bottom: 6px; }

/* D: Deals page (CONTRACT-DEALS) */
.deal-quick { margin-left: auto; flex: none; }
.deal-quick .btn { min-height: 40px; padding: 6px 14px; }
.deal-slot { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-field); }
.deal-slot[hidden], [data-d-combo][hidden], [data-d-discount][hidden], [data-d-more][hidden] { display: none; }
.deal-slot h3 { margin: 0; font-size: 0.95rem; }
.deal-target { display: flex; align-items: center; gap: 8px; }
.deal-basket { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.deal-basket li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.deal-basket .btn { min-height: 36px; padding: 2px 12px; }
.callout ol { margin: 4px 0 8px 20px; padding: 0; }
.dealcard h2 { margin-top: 0; }
.dealcard table { width: 100%; border-collapse: collapse; }
.dealcard th, .dealcard td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); }
.dealcard td.n, .dealcard th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* P (CONTRACT-PLATFORM): the OrderHero portal. Tab strip (phones; the side nav carries the tabs from 900px), tables, usage bars, 2FA pages. */
.ptabs { display: flex; gap: 6px; margin: 0 0 14px; padding: 6px; background: var(--card); border-radius: 999px; box-shadow: var(--shadow); overflow-x: auto; }
.ptabs a { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; text-decoration: none; color: var(--ink); white-space: nowrap; }
.ptabs a[aria-current="page"] { background: var(--sel); color: var(--on-sel); box-shadow: inset 0 0 0 2px var(--on-sel); }
@media (min-width: 900px) { .ptabs { display: none; } }
.psearch { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; flex-wrap: wrap; }
.psearch input[type="search"] { flex: 1 1 220px; min-width: 0; }
.ptable-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ptable th, .ptable td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ptable thead th { color: var(--mute); font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.ptable th[scope="row"] { font-weight: 600; }
.ptable td.n, .ptable th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ptable tfoot th, .ptable tfoot td { border-bottom: 0; font-weight: 700; }
.ptable .pslug { display: block; font-weight: 400; font-size: 0.8rem; }
.pstatus { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--soft); color: var(--ink); }
.pstatus.live { background: var(--soft); box-shadow: inset 0 0 0 1px var(--line); }
.pstatus.paused { background: var(--danger-chip); box-shadow: inset 0 0 0 1px var(--danger); }
.pmonth { margin: 0 0 12px; }
.ubars { display: flex; align-items: flex-end; gap: 2px; height: 160px; }
.ucol { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; font-size: 0.62rem; color: var(--mute); }
.ustack { display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; min-height: 0; }
.useg { display: block; flex-basis: 0; min-height: 1px; background: #151410; }
.useg.v0, .useg-key.v0 { background: #151410; }
.useg.v1, .useg-key.v1 { background: #8A8272; }
.useg.v2, .useg-key.v2 { background: #4F7A5A; }
.useg.v3, .useg-key.v3 { background: #6B7FA8; }
.useg.v4, .useg-key.v4 { background: #B9A98A; }
.useg.v5, .useg-key.v5 { background: #5C554A; }
@media (prefers-color-scheme: dark) { .useg, .useg.v0, .useg-key.v0 { background: #F3EDE0; } .useg.v5, .useg-key.v5 { background: #A89F8A; } }
.ucol .un { margin-top: 3px; }
.ulegend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; }
.useg-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; }
.totp-qr { display: flex; justify-content: center; margin: 12px 0; }
.totp-qr svg { max-width: 100%; height: auto; border-radius: 12px; }
.totp-key { font-size: 1.05rem; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.totp-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; margin: 12px 0 18px; }
.totp-codes code { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* Billing (CONTRACT-PLATFORM B): the overdue banner, the invoice list, the totals */
.bill-banner { margin: 0 0 14px; box-shadow: inset 0 0 0 1px var(--danger); background: var(--danger-chip); }
.bill-banner.strong { box-shadow: inset 0 0 0 2px var(--danger); }
.bill-banner p { margin: 0; }
.bill-list > li { margin-bottom: 12px; }
.bill-inv .num { font-variant-numeric: tabular-nums; }
.bill-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bill-totals .stat b { font-size: 1.6rem; }
@media (max-width: 599px) { .bill-totals { grid-template-columns: 1fr; } }

/* O: design language (CONTRACT-DESIGN) */
/* Buttons: ease the glow and the press with the same 180 ms as everything else. */
.btn { transition: transform var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease); }
.login h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); }

/* Big-number cards (7): the Reports summary row and Home "Today at a glance". Cream cards, numerals in display type, ONE short mono label,
   the growth line small underneath, any longer wording as a muted note. */
.stat { background: var(--cardc); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.stat.anchor { background: var(--anchor); box-shadow: var(--shadow-float); }
.stat.big b, .ins-cards .stat.big b { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 10vw, 3.6rem); letter-spacing: 0.005em; line-height: 0.95; white-space: nowrap; overflow-wrap: normal; }
.stat.big span { font-family: var(--mono); font-weight: 500; font-size: 0.74rem; line-height: 1.3; letter-spacing: 0.01em; margin-top: 8px; }
.stat.big.anchor b { font-size: clamp(3.8rem, 18vw, 5.2rem); }
.stat.big.anchor span { font-size: 0.85rem; }
.stat .note { display: block; margin-top: 3px; color: var(--mute); font-size: 0.72rem; line-height: 1.3; }
.stat.big .vs { margin-top: 8px; font-size: 0.78rem; }
.stat .vs .gr { font-family: var(--mono); font-weight: 600; }
.ins-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .ins-feature { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats-row .stat.big { padding: 14px 14px 12px; }
@media (min-width: 640px) { .stats-row .stat.big { padding: 16px; } }

/* Assistant (8): the owner's question, the dark answer, the cream report cards. */
.asst-log { gap: 14px; }
.asst-msg { display: flex; flex-direction: column; gap: 8px; animation: rise var(--dur-in) var(--ease) backwards; }
.asst-msg.me { align-self: flex-end; max-width: 92%; gap: 2px; background: var(--cardc); border-radius: 20px 20px 6px 20px; padding: 8px 16px 11px; box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.asst-msg.me .asst-who { font-family: var(--mono); font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }
.asst-msg .asst-q { margin: 0; }
.asst-hl { color: var(--ink); font-size: 1.05rem; line-height: 1.5; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 0.24em; text-underline-offset: 0.1em; text-decoration-skip-ink: none; }
.asst-msg.bot { align-self: stretch; }
.asst-bubble { align-self: flex-start; max-width: 94%; background: var(--anchor); color: var(--on-anchor); border-radius: 20px 20px 20px 6px; padding: 12px 18px; box-shadow: var(--shadow-float); overflow-wrap: anywhere; }
.asst-bubble.thinking { color: var(--on-anchor-mute); }
.asst-bubble.err { background: var(--cardc); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 2px var(--danger); }
.asst-msg.bot > .asst-table, .asst-msg.bot > .asst-prop { align-self: stretch; margin: 0; }
.asst-table { background: var(--cardc); border-radius: 18px; padding: 14px 14px 12px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.asst-rn { font-family: var(--mono); font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute); }
.asst-table h3 { margin: 2px 0 8px; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.asst-figs { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 12px; }
.asst-fig b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 9vw, 2.8rem); line-height: 0.95; letter-spacing: 0.005em; font-variant-numeric: tabular-nums; }
.asst-fig span { display: block; margin-top: 3px; font-family: var(--mono); font-weight: 500; font-size: 0.72rem; color: var(--mute); }
.asst-prop { background: var(--cardc); }
.asst-prop-h { font-family: var(--mono); font-weight: 500; }
/* The empty-picture label sits on the checkerboard (follows the theme) or on the always-white video plate (always dark text). */
.mbox.plate .mph { color: #4A463C; }

/* K: kitchen service mode (CONTRACT-DESIGN) */
:root {
  --k-ground: #15120E; --k-raised: #1F1A14; --k-line: #3A3024; --k-chalk: #F3EDE0; --k-soft: #BFB6A3;
  --k-gold: #FAC20E; --k-amber: #F59E0B; --k-red: #B3260F; --k-ink: #121212; --k-paper: #FFFDF6;
  --k-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ring: var(--ink); /* focus ring for things that sit on the page ground (a ticket's own text colour changes, the ground does not) */
  --k-amber-text: #8A5A00; /* amber as TEXT on a light card (5.9:1); the fills use --k-amber with ink */
}
@media (prefers-color-scheme: dark) { :root { --k-amber-text: #F0B429; } }

/* Service mode: a dark board (body.service, set by admin-board.js: Auto / On / Off). The whole token set flips, so dialogs opened from the
   board match. It looks the same whatever the OS colour scheme is. */
html:has(body.service) { background: var(--k-ground); }
body.service {
  color-scheme: dark;
  --bg: var(--k-ground); --ink: var(--k-chalk); --mute: var(--k-soft);
  --card: var(--k-raised); --cardc: var(--k-raised); --cell: #2A231A;
  --line: var(--k-line); --field-line: rgba(243, 237, 224, 0.42); --soft: rgba(243, 237, 224, 0.08);
  --accent: var(--k-gold); --accent-btn: var(--k-gold); --on-accent: var(--k-ink); --accent-ink: var(--k-gold);
  --pill: var(--k-gold); --on-pill: var(--k-ink);
  --chip: rgba(250, 194, 14, 0.22);
  --danger: #FF8A75; --danger-chip: rgba(255, 138, 117, 0.16); --on-danger: var(--k-ink);
  --anchor: #2A231A; --on-anchor: var(--k-chalk); --on-anchor-mute: rgba(243, 237, 224, 0.7); --on-anchor-line: rgba(243, 237, 224, 0.16);
  --track-off: rgba(243, 237, 224, 0.28); --check-a: #3A3024; --check-b: #2A231A;
  --amber: var(--k-amber); --k-amber-text: var(--k-amber);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.45); --shadow-float: 0 18px 40px rgba(0, 0, 0, 0.45);
  --ring: var(--k-chalk);
}
body.service::before { display: none; }
/* Tickets stay BRIGHT in service mode: paper with ink. They carry the light token set, so every rule inside them keeps working. */
body.service .order {
  --ink: var(--k-ink); --mute: rgba(18, 18, 18, 0.68); --line: rgba(18, 18, 18, 0.16); --field-line: rgba(18, 18, 18, 0.42); --soft: rgba(18, 18, 18, 0.06);
  --card: var(--k-paper); --cardc: var(--k-paper); --cell: var(--k-paper); --pill: var(--k-ink); --on-pill: var(--k-paper);
  --chip: rgba(250, 194, 14, 0.4); --danger: #B3260F; --danger-chip: rgba(179, 38, 15, 0.1); --on-danger: #FFFFFF; --amber: #B87800;
  background: var(--k-paper); color: var(--k-ink);
}

/* Header: the clock, the title and status, the controls */
.board-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin: 0 0 12px; }
.board-clock { display: flex; align-items: baseline; gap: 12px; flex: 0 0 auto; }
.clock-time { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 0.95; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.clock-day { font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
body.service .clock-time { color: var(--k-gold); font-size: 4.2rem; }
.board-title { flex: 1 1 12rem; min-width: 0; }
.board-title h1 { margin: 0 0 2px; }
.board-title .board-status { margin: 0; }
.board-ctrls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; justify-content: flex-end; }
@media (max-width: 639px) { .board-clock { flex: 1 1 100%; } }
@media (min-width: 640px) { .clock-time { font-size: 3.2rem; } }
@media (min-width: 1024px) { body.service .clock-time { font-size: clamp(96px, 10vw, 128px); } body.service .clock-day { font-size: 1.1rem; } }

/* The Auto / On / Off control: a group of real buttons, aria-pressed on the active one; the label says what is active */
.svc { display: grid; gap: 4px; justify-items: start; }
.svc-label { font-family: var(--mono); font-size: 0.78rem; line-height: 1.2; color: var(--mute); }
.svc-btns { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--field-line); }
.svc-btn { min-width: 56px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; touch-action: manipulation; transition: background-color 180ms var(--k-ease); }
.svc-btn[aria-pressed="true"] { background: var(--k-gold); color: var(--k-ink); }

/* The waiting rail: tables with open tickets, longest wait first. A strip above the tickets, a right-hand column from 1024 px. */
.board-rail { margin: 0 0 12px; min-width: 0; }
.rail-h { margin: 0 0 6px; font-family: var(--mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.rail { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.rail-item { flex: 0 0 auto; scroll-snap-align: start; }
.rail-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-width: 168px; min-height: 48px; padding: 0 8px 0 14px; border: 0; border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-weight: 700; text-align: left; cursor: pointer; touch-action: manipulation; }
.rail-row:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.rail-name { min-width: 0; overflow-wrap: anywhere; }
.rail-t { flex: none; min-width: 4.6ch; padding: 3px 8px; border-radius: 8px; text-align: right; font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; background: var(--k-gold); color: var(--k-ink); }
.rail-row.warn .rail-t { background: var(--k-amber); }
.rail-row.late .rail-t { background: var(--k-red); color: #FFFFFF; }
.rail-none { margin: 0; font-size: 0.95rem; }
@media (max-width: 1023px) { .board-rail.empty { display: none; } }
@media (min-width: 1024px) {
  .board-grid { display: grid; grid-template-columns: minmax(0, 1fr) 184px; gap: 0 16px; align-items: start; }
  .board-rail { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--topbar-h) + 8px); margin: 0; padding: 14px 12px 10px; border-radius: 18px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); max-height: calc(100dvh - var(--topbar-h) - 24px); overflow-y: auto; }
  .board-main { grid-column: 1; grid-row: 1; min-width: 0; }
  .rail { flex-direction: column; overflow: visible; padding: 0; }
  .rail-row { min-width: 0; }
  body.service .orders { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}
@media (min-width: 1280px) { .board-grid { grid-template-columns: minmax(0, 1fr) 240px; gap: 0 18px; } }

/* A ticket from the rail: scrolled to, focused and outlined for a moment */
.order.flash { outline: 4px solid var(--ring); outline-offset: 3px; }
/* Cancelled by Reset table keeps its own look: a near-black header, not an age colour */
.order.reset-cancelled .order-head { background: #26211A; color: #F3EDE0; }

/* New-ticket motion: a ticket that arrives on a poll glides up and lands with a soft lift (360 ms) */
@keyframes ticket-in {
  from { opacity: 0.6; transform: translateY(12px); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
  to { opacity: 1; transform: none; box-shadow: var(--shadow-float); }
}
.order.arrive:not(.reset-cancelled) { animation: ticket-in 360ms var(--k-ease) backwards; }
.order { transition: box-shadow 180ms var(--k-ease); }
@media (prefers-reduced-motion: reduce) { .order.arrive, .svc-btn, .order { animation: none; transition: none; } }