/* AshPine: the shop's dashboard.
   Iron grey ink on bright white and a cool desk. Verdigris is go and done, coral is what
   needs the shop, mocha is To check and Less. Anek Kannada for words, IBM Plex Mono for
   money, quantities and codes. Soft shadows instead of borders; borders only on fields.
   Computer: a rail, then three columns (the list | the chat | the bill). Phone: one
   screen at a time, with tabs along the bottom. */

@font-face { font-family: "Anek Kannada"; font-weight: 100 800; font-stretch: 75% 125%; font-display: swap; src: url(/static/fonts/anek-kannada-kannada.woff2) format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0B83, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+200C-200D, U+20B9, U+25CC, U+A830-A835; }
@font-face { font-family: "Anek Kannada"; font-weight: 100 800; font-stretch: 75% 125%; font-display: swap; src: url(/static/fonts/anek-kannada-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Anek Kannada"; font-weight: 100 800; font-stretch: 75% 125%; font-display: swap; src: url(/static/fonts/anek-kannada-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/static/fonts/plex-mono-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/static/fonts/plex-mono-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-mono-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-mono-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-mono-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-mono-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #1F2626;
  --ink-2: #4C5454;     /* secondary text */
  --ink-3: #5F6969;     /* small print, 4.5:1 on white and on every tint it sits on */
  --white: #FFFFFF;
  --desk: #F5F7F7;      /* pages, and the desk the bill lies on */
  --chat: #F2F6F5;
  --rule: #E2E8E8;
  --rule-2: #E9EEEE;
  --edge: #7D8888;      /* field borders, 3:1 on white */
  --fill: #EEF2F2;      /* secondary buttons, chips */
  --fill-2: #E4EAEA;
  --go: #0F7A6C;
  --go-hover: #0B6559;
  --go-ink: #0F6E62;
  --verd: #1EA896;
  --verd-tint: #E3F5F2;
  --tick: #16907F;
  --coral: #FF715B;
  --coral-ink: #B3402B;
  --coral-tint: #FFE9E5;
  --danger: #C2412C;
  --mocha: #523F38;
  --mocha-tint: #F3ECE9;
  --shadow-1: 0 1px 2px rgba(31, 38, 38, .06), 0 1px 3px rgba(31, 38, 38, .08);
  --shadow-2: 0 2px 4px rgba(31, 38, 38, .06), 0 6px 14px -2px rgba(31, 38, 38, .10);
  --shadow-3: 0 6px 12px rgba(31, 38, 38, .08), 0 18px 40px -8px rgba(31, 38, 38, .20);
  /* A till receipt's torn edge, its teeth pointing down or up. */
  --teeth-down: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  --teeth-up: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 16px 100%;
  --sans: "Anek Kannada", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --rail: 76px;
  --tabs: 0px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font: 16px/1.4 var(--sans); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
/* The page doesn't stretch past its ends or reload when pulled down: the installed app
   would slide away with a spinner, and the shop's work on the page with it. What is
   open over a page holds the page still. */
html { overscroll-behavior-y: none; }
html:has(.deck, .drawer, dialog[open]) { overflow: hidden; }
/* Each pane that scrolls keeps its scrolling to itself. */
.stream, .queue, .paper-wrap, .drawer .fields, .deck { overscroll-behavior: contain; }
.quick, .outcomes, .filters, .menu-tabs { overscroll-behavior-x: contain; }
body { margin: 0; background: var(--desk); color: var(--ink); min-height: 100vh; min-height: 100dvh; }
h1, h2, h3 { margin: 0; line-height: 1.2; text-wrap: balance; }
h1 { font-size: 24px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 700; }
p { margin: 0; }
a { color: var(--go); text-underline-offset: .2em; }
a:hover { color: var(--go-hover); }
small { font-size: 13px; color: var(--ink-3); }
code, kbd, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
code { font-size: .88em; }
.muted { color: var(--ink-3); }
.warn { color: var(--coral-ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.offscreen { position: absolute; left: -9999px; }
[hidden] { display: none !important; }
.js .nojs { display: none !important; }
html:not(.js) .js-only { display: none !important; }
:focus-visible { outline: 2px solid var(--go); outline-offset: 2px; }
main:focus { outline: none; }
::selection { background: var(--verd-tint); }
.skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--go); color: var(--white); padding: 8px 14px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* Icons: Heroicons, outline. */
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* The logo: fire and ash, then the pine cone. */
.mark { display: block; width: 40px; height: 40px; }
.lg-fire { fill: var(--coral); }
.lg-core { fill: #FFC4B8; }
.lg-cone { fill: var(--mocha); }
.lg-scale { fill: none; stroke: var(--white); stroke-width: 1; opacity: .5; }
.lg-ash1 { fill: var(--ink-2); }
.lg-ash2 { fill: var(--ink-3); }
.lg-ash3 { fill: #A3ADAD; }
.w-ash { color: var(--ink-2); }
.w-pine { color: var(--mocha); }

/* Controls. Primary is solid, secondary a soft fill, tertiary text. Borders only on
   fields people type into. */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  min-height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 10px; background: var(--white); max-width: 100%; font-size: 16px; color: var(--ink); }
textarea { padding: 10px 12px; line-height: 1.4; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--go); box-shadow: 0 0 0 3px var(--verd-tint); }
input[type=number] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=file] { font-size: 14px; color: var(--ink-2); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; margin-right: 10px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--fill); color: var(--ink); cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
select { appearance: none; padding-right: 36px; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C5454' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; }
button, .btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 0; border-radius: 10px; background: none; font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; color: var(--ink); }
button:disabled { opacity: .45; cursor: not-allowed; }
.go { background: var(--go); color: var(--white); min-height: 44px; }
.go:hover:not(:disabled) { background: var(--go-hover); color: var(--white); }
.soft { background: var(--fill); color: var(--ink); }
.soft:hover { background: var(--fill-2); color: var(--ink); }
.bad { background: var(--danger); color: var(--white); min-height: 44px; }
.bad-text { color: var(--danger); }
.icon-btn { width: 40px; height: 40px; padding: 0; min-height: 0; background: var(--fill); color: var(--ink); border-radius: 10px; display: inline-grid; place-items: center; }
.icon-btn:hover { background: var(--fill-2); color: var(--ink); }
.chip { min-height: 34px; padding: 0 12px; border-radius: 8px; background: var(--fill); font-size: 14px; }
.chip:hover { background: var(--fill-2); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
label small { font-weight: 400; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.card { background: var(--white); border-radius: 12px; box-shadow: var(--shadow-1); }

/* Avatars: initials on one of six tints, the same for a person every time. */
.av { width: 40px; height: 40px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 15px; font-weight: 700; background: var(--fill); color: var(--ink-2); }
.av.h0 { background: var(--verd-tint); color: var(--go-ink); }
.av.h1 { background: var(--coral-tint); color: var(--coral-ink); }
.av.h2 { background: var(--mocha-tint); color: var(--mocha); }
.av.h3 { background: #EDF0F0; color: #3E4646; }
.av.h4 { background: #DDF4F0; color: #0F5E54; }
.av.h5 { background: #F7F2F0; color: #6B4F45; }

/* Tags name what a row or an order waits for. */
.tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; flex: none; vertical-align: middle; background: var(--fill); color: var(--ink-2); }
.tag .i { width: 16px; height: 16px; }
.t-reply { background: var(--coral-tint); color: var(--coral-ink); }
.t-check { background: var(--mocha-tint); color: var(--mocha); }
.t-pack { background: #DDF4F0; color: var(--go-ink); }
.t-way { background: #EDF0F0; color: #3E4646; }
.t-wait { background: var(--fill); color: var(--ink-2); }
.t-bot { background: #E6F2F0; color: #2C5E57; }
.t-done { background: var(--verd-tint); color: var(--go-ink); }
.t-cancel { background: var(--fill); color: var(--danger); }

/* ------------------------------------------------------------------ The shell */
/* A rail on the left of a computer, tabs along the bottom of a phone. */
body.app { padding-left: var(--rail); }
.side { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: var(--rail); background: var(--white); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 0; }
.side .brand { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border-radius: 12px; }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 68px; min-height: 0; padding: 4px 0 6px;
  border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--ink-2); text-decoration: none; background: none; }
.tab .i { width: 24px; height: 24px; padding: 4px 16px; box-sizing: content-box; border-radius: 10px; }
.tab:hover { color: var(--ink); }
.tab:hover .i { background: var(--desk); }
.tab[aria-current="page"] { color: var(--go-ink); }
.tab[aria-current="page"] .i { background: var(--verd-tint); }
.badge { position: absolute; top: 0; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: var(--coral); color: var(--ink); font: 600 12px/18px var(--mono); text-align: center; }
.badge.none { display: none; }
.side-end { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Open, Busy or Paused: always in view, one tap to change. */
.taking { position: relative; }
.taking summary { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; padding: 8px 0; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.taking summary:hover { background: var(--desk); }
.taking i, .menu-body i { display: block; width: 12px; height: 12px; border-radius: 4px; background: var(--tick); flex: none; }
.taking .t-busy i, .menu-body .d-busy { background: var(--coral); }
.taking .t-paused i, .menu-body .d-paused { background: var(--ink-2); }
.taking .t-paused { color: var(--ink); }
.menu-body { position: absolute; z-index: 31; left: calc(100% + 8px); bottom: 0; width: 280px; padding: 6px; background: var(--white); border-radius: 12px; box-shadow: var(--shadow-3); display: flex; flex-direction: column; }
.menu-body button { justify-content: flex-start; align-items: flex-start; gap: 10px; width: 100%; padding: 10px; text-align: left; white-space: normal; }
.menu-body button i { margin-top: 5px; }
.menu-body button span { display: flex; flex-direction: column; gap: 2px; }
.menu-body button small { font-weight: 400; }
.menu-body button:hover { background: var(--desk); }
.menu-body button[aria-pressed="true"] { background: var(--verd-tint); }
.menu-body p { margin: 0; padding: 10px; color: var(--ink-2); }

/* Who is signed in, and Log out. */
.me { position: relative; }
.me .av { width: 32px; height: 32px; font-size: 13px; }

main { min-width: 0; }
body.bare main { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }

/* Strips: what the whole shop should know, one line each. */
.strip { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 15px; background: var(--fill); color: var(--ink); }
.strip > span, .strip > p { flex: 1; min-width: 0; }
.strip .btn, .strip button { min-height: 36px; }
.strip.alert { background: var(--coral-tint); color: var(--coral-ink); }
.strip.alert > span { white-space: pre-line; }
.strip.alert b { color: var(--coral-ink); }
.strip.alert .soft { background: var(--white); }
.strip.busy, .strip.closed { background: var(--mocha-tint); color: var(--mocha); }
.strip.paused { background: var(--ink-2); color: var(--white); }
.strip.done { background: var(--verd-tint); color: var(--go-ink); white-space: pre-line; }
#live:not(.stale) { display: none; }
body.bare .strip { width: min(380px, 100%); border-radius: 10px; }

.empty { color: var(--ink-2); padding: 24px 16px; font-size: 15px; }
.back { display: none; }
.sub { color: var(--ink-2); font-size: 14px; }

/* ------------------------------------------------------------------ Chats */
/* Three columns that fill the window and scroll on their own: the list, the chat, the
   bill with its actions always on screen. */
body:has(.now) main { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.now { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr) minmax(380px, 460px); }
.now.resting, .now.solo { grid-template-columns: 340px minmax(0, 1fr); }
.rail { display: flex; flex-direction: column; min-height: 0; background: var(--white); box-shadow: var(--shadow-1); z-index: 2; }
.list-head { padding: 18px 16px 10px; }
.list-head h1, .list-head h2 { font-size: 24px; }
.find { padding: 0 16px 8px; }
.search { position: relative; display: flex; align-items: center; flex-direction: row; }
.search .i { position: absolute; left: 12px; color: var(--ink-3); pointer-events: none; }
.search input { width: 100%; padding-left: 40px !important; }
.found { padding: 6px 16px 10px; font-size: 14px; color: var(--ink-2); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 16px 10px; }
.filters a { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 8px; background: var(--fill);
  font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.filters a:hover { background: var(--fill-2); color: var(--ink); }
.filters b { font: 600 13px var(--mono); color: var(--ink); }
.filters small { color: inherit; font-family: var(--mono); font-size: 12px; }
.filters a[aria-current] { background: var(--ink); color: var(--white); }
.filters a[aria-current] b { color: var(--white); }
.queue { flex: 1; min-height: 0; overflow-y: auto; }
/* With nothing open on a wide screen, the calm pane says so; the list needn't. */
@media (min-width: 761px) { .resting .empty.idle { display: none; } }
.to-archived { display: flex; align-items: center; gap: 12px; margin: 0 8px 2px; padding: 10px 16px; border-radius: 10px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
.to-archived:hover { background: var(--desk); color: var(--ink); }
.to-archived b { margin-left: auto; font: 600 13px var(--mono); color: var(--ink-3); }
.to-archived.older { justify-content: center; margin-bottom: 16px; }
.jobs { list-style: none; margin: 0; padding: 0 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.job { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av who t" "av what what"; gap: 2px 12px; align-items: center;
  padding: 10px 8px; border-radius: 10px; color: inherit; text-decoration: none; }
.job:hover { background: var(--desk); color: inherit; }
.job[aria-current] { background: var(--verd-tint); }
.job .av { grid-area: av; }
.job .who { grid-area: who; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job .age, .job .ago { grid-area: t; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.job.late .age { color: var(--coral-ink); font-weight: 700; }
.job .what { grid-area: what; display: flex; align-items: center; gap: 8px; min-width: 0; }
.job .note { font-size: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job .also { grid-column: 2 / -1; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The customer's chat, in the middle. */
.talk { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--chat); }
.person { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--white); box-shadow: var(--shadow-1); position: relative; z-index: 1; }
.person-id { flex: 1; min-width: 0; }
.person h1, .person h2 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person .sub .i { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.person .sub.shop { color: var(--go-ink); font-weight: 600; }
.person .sub .muted { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.stream { flex: 1; min-height: 6rem; overflow-y: auto; list-style: none; margin: 0; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: min(75%, 34rem); display: flex; flex-direction: column; gap: 3px; }
.msg p { padding: 8px 12px; border-radius: 12px; background: var(--white); box-shadow: var(--shadow-1); white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.4; }
.msg.in { align-self: flex-start; }
.msg.in p { border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg.out p { border-bottom-right-radius: 4px; }
.msg.from-bot p { background: #E6F2F0; }
.msg.from-operator p { background: var(--go); color: var(--white); }
.msg .by { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.msg .by .i { width: 14px; height: 14px; }
.msg .t { font-size: 12px; color: var(--ink-3); }
.msg .failed { color: var(--danger); font-weight: 600; }
.msg .heard { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-right: 2px; }
.msg .media img { display: block; max-width: min(260px, 100%); max-height: 22rem; border-radius: 10px; box-shadow: var(--shadow-1); }
.msg audio.media { width: min(260px, 100%); }
.msg .btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.msg .btns span { padding: 5px 10px; border-radius: 8px; background: var(--white); box-shadow: var(--shadow-1); font-size: 13px; font-weight: 600; color: var(--go); }
.day { align-self: center; margin: 6px 0 2px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.day span { display: inline-block; padding: 3px 10px; border-radius: 6px; background: var(--white); box-shadow: var(--shadow-1); }
.hand-mark { align-self: center; text-align: center; font-size: 13px; color: var(--ink-2); }
.hand-mark span { display: inline-block; padding: 4px 10px; border-radius: 6px; background: #E5ECEB; }
.stream > .empty { align-self: center; }
.compose { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--white); box-shadow: 0 -1px 3px rgba(31, 38, 38, .06); }
.compose .field { display: flex; gap: 8px; align-items: flex-end; }
.compose textarea { flex: 1; min-height: 44px; max-height: 10rem; resize: none; font-size: 15px; }
.compose .send { width: 44px; height: 44px; padding: 0; flex: none; }
.compose.off { flex-direction: row; align-items: center; }
.compose .take { flex: 1; min-height: 44px; justify-content: center; }
.field-off { flex: 1; min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 10px; background: var(--fill); color: var(--ink-3); font-size: 15px; }
.quick, .outcomes { display: flex; gap: 6px; flex-wrap: wrap; }

/* The work, on the right: the bill on its desk, with the actions docked under it. */
.work { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--desk); }
.work-head { display: flex; align-items: flex-start; gap: 8px; padding: 16px 20px 10px; }
.work-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kicker { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.work-head h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 20px; }
.addr { display: flex; align-items: flex-start; gap: 4px; }
.addr .i { width: 16px; height: 16px; margin-top: 1px; }
.addr a { margin-left: 4px; font-weight: 600; }
/* A past bill opens alone, its heading over the paper. */
.now.solo .work-head { width: 100%; max-width: 560px; margin: 0 auto; }
.paper-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 20px 32px; }
.work > .empty { padding: 20px; }

/* The bill is a till receipt: white paper with a torn bottom edge. */
.bill { --pad: 20px; position: relative; max-width: 520px; margin: 0 auto 32px; padding: 10px var(--pad) 16px; background: var(--white);
  filter: drop-shadow(0 1px 1px rgba(31, 38, 38, .08)) drop-shadow(0 6px 12px rgba(31, 38, 38, .07)); }
.bill::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; background: var(--white); -webkit-mask: var(--teeth-down); mask: var(--teeth-down); }
.lines { list-style: none; margin: 0; padding: 0; }
.line { position: relative; transition: margin .15s, padding .15s; }
.lbtn { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5rem; column-gap: 12px; align-items: baseline; width: 100%; min-height: 0; padding: 10px 0;
  border-radius: 0; background: none; text-align: left; font-size: 15px; font-weight: 400; white-space: normal; color: var(--ink); }
.lbtn .item { display: flex; flex-direction: column; min-width: 0; }
.lbtn .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbtn .asked { font: 12px var(--mono); color: var(--ink-3); }
.lbtn .asked:empty { display: none; }
.line.unsaved { box-shadow: inset 3px 0 0 var(--danger); }
.line.unsaved .lbtn .item::after { content: "Not saved"; font: 600 12px var(--mono); color: var(--danger); }
.lbtn .q { font: 500 14px var(--mono); color: var(--ink-2); white-space: nowrap; }
.lbtn .sum { font: 500 15px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.js .checklist .lbtn:hover .nm { color: var(--go-ink); }
.line.changed .q, .line.l-changed .q, .line.changed .asked { color: var(--go-ink); font-weight: 600; }
.line.out .nm, .line.out .sum, .line.l-out_of_stock .nm, .line.l-out_of_stock .sum { text-decoration: line-through; color: var(--ink-3); }
.line.out .q, .line.l-out_of_stock .q { color: var(--coral-ink); font-weight: 600; }
/* A line being changed lifts off the paper as a torn strip. */
.line.open { z-index: 1; margin: 18px calc(-1 * var(--pad)); padding: 2px var(--pad) 12px; background: var(--white);
  filter: drop-shadow(0 2px 2px rgba(31, 38, 38, .10)) drop-shadow(0 10px 16px rgba(31, 38, 38, .14)); }
.line.open::before, .line.open::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: var(--white); }
.line.open::before { bottom: 100%; -webkit-mask: var(--teeth-up); mask: var(--teeth-up); }
.line.open::after { top: 100%; -webkit-mask: var(--teeth-down); mask: var(--teeth-down); }
.ed { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 0 4px; }
.js .line:not(.open) .ed { display: none; }
html:not(.js) .ed { padding-bottom: 10px; }
.stepper { display: inline-flex; align-items: center; height: 44px; border-radius: 10px; background: var(--white); box-shadow: var(--shadow-2); }
.stepper button { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 10px; }
.stepper:focus-within { outline: 2px solid var(--go); outline-offset: 2px; }
.stepper .less { color: var(--mocha); }
.stepper .more { color: var(--go); }
.stepper button:hover { background: var(--desk); }
.stepper input { width: 64px; min-height: 0 !important; height: 44px; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: center; font: 600 16px var(--mono) !important; }
.stepper .unit { padding-right: 10px; font: 13px var(--mono); color: var(--ink-3); }
html:not(.js) .stepper button { display: none; }
html:not(.js) .stepper .unit { padding-right: 12px; }
.outb { height: 44px; padding: 0 16px; background: var(--coral-tint); color: var(--coral-ink); }
.outb:hover { background: #FFDAD3; color: var(--coral-ink); }
.outb[aria-pressed="true"] { background: var(--fill); color: var(--ink); }
.add { margin-top: 10px; font-size: 14px; }
.add summary { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; padding: 4px 0; }
.add summary .i { width: 18px; height: 18px; }
.add > div { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 10px; }
.add input[name=add_sku] { width: 16rem; }
.add input[name=add_qty] { width: 7rem; }
.bill .total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-weight: 700; }
.bill .total small { margin-left: 6px; font-weight: 400; }
.bill .total b { font: 700 22px var(--mono); font-variant-numeric: tabular-nums; }
.history, .earlier { max-width: 520px; margin: 0 auto 16px; font-size: 14px; }
.history summary, .earlier h3 { font-size: 14px; font-weight: 600; color: var(--ink-2); padding: 4px 0; }
.timeline, .earlier ul { list-style: none; margin: 6px 0 0; padding: 0; }
.timeline li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; }
.timeline small { margin-left: 4px; }
.timeline time, .earlier time { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.earlier li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule-2); }
.earlier b { font: 600 14px var(--mono); }
.dock { display: flex; flex-direction: column; gap: 8px; padding: 12px 20px 14px; background: var(--white); box-shadow: 0 -2px 10px -4px rgba(31, 38, 38, .14); }
.dock .hint { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.dock .hint:empty { display: none; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions > form, .actions > div { flex: 1 1 auto; display: flex; gap: 8px; }
.actions .go, .actions .bad { flex: 1; min-height: 48px; font-size: 16px; }
.dispatch .pick { flex: 1; min-width: 0; }
.dispatch select { width: 100%; min-height: 48px; }
.dispatch .go { flex: 1.4; }
.paid button { flex: 1; }
.actions > .danger { flex-basis: 100%; }
.danger summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; font-size: 14px; font-weight: 600; color: var(--danger); }
.danger summary .i { width: 18px; height: 18px; }
.danger[open] summary { color: var(--ink-2); }
.danger form { display: flex; margin-top: 6px; }

.calm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; background: var(--desk); color: var(--ink-2); text-align: center; }
.calm-i .i { width: 48px; height: 48px; stroke-width: 1.2; color: var(--tick); }
.calm h2 { font-size: 20px; color: var(--ink); }

/* One by one: the phone's deck of cards over the bill. */
.deck { position: fixed; inset: 0; z-index: 45; background: var(--desk); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
.deck-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px 8px; }
.deck-head b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-head span { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.segs { display: flex; gap: 4px; padding: 0 16px; }
.segs button { flex: 1; min-height: 0; height: 24px; padding: 0; border-radius: 0; }
.segs button::after { content: ""; display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--rule); }
.segs button.have::after { background: var(--tick); }
.segs button.short::after { background: var(--mocha); }
.segs button.out::after { background: var(--coral); }
.segs button[aria-current]::after { height: 8px; box-shadow: 0 0 0 2px var(--desk), 0 0 0 3px var(--ink); }
.stage { flex: 1; position: relative; margin: 12px 16px 16px; touch-action: pan-y; }
.dcard { position: absolute; inset: 0; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-2); display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 4px; padding: 24px; text-align: center; transition: transform .2s, opacity .2s; cursor: grab; }
.dcard.have { box-shadow: var(--shadow-2), inset 0 0 0 2px var(--tick); }
.dcard.short { box-shadow: var(--shadow-2), inset 0 0 0 2px var(--mocha); }
.dcard.out { box-shadow: var(--shadow-2), inset 0 0 0 2px var(--coral); }
.dcard .was { position: absolute; top: 18px; left: 0; right: 0; font-size: 14px; color: var(--ink-2); }
.dcard h2 { font-size: 30px; line-height: 1.1; }
.dcard .big { margin-top: 12px; font: 600 80px/1 var(--mono); color: var(--go); }
.dcard .u { font: 500 15px var(--mono); color: var(--ink-2); }
.dcard .asked { font-size: 14px; color: var(--mocha); }
.dcard .lab { position: absolute; top: 22px; padding: 2px 10px; border-radius: 6px; font-weight: 700; opacity: 0; border: 2px solid; background: var(--white); }
.dcard .lab.l { left: 18px; color: var(--coral-ink); transform: rotate(-8deg); }
.dcard .lab.r { right: 18px; color: var(--go); transform: rotate(8deg); }
.how { position: absolute; inset: 0; border-radius: 16px; background: var(--white); box-shadow: var(--shadow-2), inset 0 0 0 2px var(--mocha); display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 18px; padding: 24px; text-align: center; }
.how p { font-size: 18px; font-weight: 600; }
.big-step { display: flex; align-items: center; gap: 14px; }
.big-step button { width: 64px; height: 64px; border-radius: 14px; font-size: 28px; background: var(--fill); }
.big-step b { min-width: 88px; font: 600 64px/1 var(--mono); color: var(--go); }
.how .row { display: flex; gap: 8px; width: 100%; }
.how .row button { flex: 1; min-height: 52px; }
.how .row button:not(.go) { background: var(--fill); }
.deck-acts { display: grid; grid-template-columns: 56px 1fr 1fr 1fr; gap: 8px; padding: 0 16px 20px; }
.deck-acts button { min-height: 60px; border-radius: 14px; font-size: 17px; background: var(--white); box-shadow: var(--shadow-1); }
.deck-acts .out { color: var(--coral-ink); }
.deck-acts .short { color: var(--mocha); }
.deck-acts .go { background: var(--go); color: var(--white); }

/* ------------------------------------------------------------------ Pages */
.page { max-width: 1080px; margin: 0 auto; padding: 24px 24px 48px; }
.head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px; }
.head .sub { font-size: 15px; }
.head-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sec { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 8px; font-size: 16px; color: var(--ink-2); }
.sec .n { font: 600 13px var(--mono); color: var(--ink-3); }
.page .empty { padding: 12px 0; }
.card.list { list-style: none; margin: 0; padding: 4px 0; }
.card.list > li + li { border-top: 1px solid var(--rule-2); }
.pages { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 0; font-size: 14px; color: var(--ink-2); }
.pair, .trio { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.money { position: relative; }
.money > span { position: absolute; left: 12px; bottom: 11px; font-family: var(--mono); color: var(--ink-3); font-weight: 500; }
.money input { padding-left: 28px !important; font-family: var(--mono); }

/* Deliver */
.page.deliver { max-width: 760px; }
.rider, .done-row, .part { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.rider .who, .part .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rider .who small, .done-row small, .part small { font-size: 14px; color: var(--ink-2); }
.card.order { padding: 14px 16px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.ct { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ct a { font-size: 17px; color: var(--ink); text-decoration: none; }
.ct a:hover { color: var(--go-ink); }
.ct .n { font-size: 14px; color: var(--ink-2); }
.ct .t { margin-left: auto; font: 700 18px var(--mono); }
.card.order .dispatch, .card.order .paid { display: flex; gap: 8px; }
.card.order .go { flex: 1; min-height: 48px; }
.card.order .dispatch .go { flex: 1.4; }
.done-row a { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; }
.paid-by { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--ink-2); }
.paid-by .i { width: 18px; height: 18px; }

/* Items */
.import { position: relative; }
.import .panel { position: absolute; z-index: 20; right: 0; top: calc(100% + 8px); width: min(440px, 92vw); padding: 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: var(--shadow-3); font-size: 14px; color: var(--ink-2); }
.import .cols code { font-size: 12px; color: var(--ink); }
.import .panel .go { align-self: flex-start; }
.items .find { padding: 0; max-width: 440px; margin-bottom: 4px; }
.items .filters { padding: 8px 0 12px; }
.stock { list-style: none; margin: 0; padding: 4px 0; }
.stock > li + li { border-top: 1px solid var(--rule-2); }
.stock .item { display: grid; grid-template-columns: 48px 44px minmax(0, 2.4fr) minmax(0, 1fr) 112px minmax(0, 1fr) 72px 40px; align-items: center; gap: 12px; padding: 10px 16px; }
.stock .item > form { display: none; }
.stock .what { min-width: 0; }
.stock .what b { font-weight: 600; margin-right: 6px; }
.stock .what small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock .item:not(.out) .oos { display: none; }
.stock .item.off .what b { color: var(--ink-3); }
.stock .sold, .stock .group { font-size: 14px; color: var(--ink-2); }
.stock .price { position: relative; flex-direction: row; align-items: center; }
.stock .price span { position: absolute; left: 10px; font: 14px var(--mono); color: var(--ink-3); }
.stock .price input[name] { width: 100%; min-height: 40px; padding: 0 10px 0 24px; text-align: right; font: 500 15px var(--mono); border-color: transparent; background: var(--desk); }
.stock .price input[name]:hover { border-color: var(--edge); }
.stock .save { min-height: 36px; }
.js .stock .item:not(.dirty) .save { visibility: hidden; }
.stock .item.saving { opacity: .5; }
.thumb { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--fill); display: grid; place-items: center; color: var(--ink-3); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 8px; background: var(--edge); transition: background .15s; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 6px; background: var(--white); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.switch input:checked + span { background: var(--tick); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--go); outline-offset: 2px; }
.menu { position: relative; }
.menu summary { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); }
.menu summary:hover, .menu[open] summary { background: var(--fill); }
.pop { position: absolute; z-index: 20; right: 0; top: calc(100% + 4px); min-width: 190px; padding: 6px; display: flex; flex-direction: column; box-shadow: var(--shadow-3); }
.pop a, .pop button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pop .bad-text { color: var(--danger); }
.pop a:hover, .pop button:hover { background: var(--desk); }
/* The drawer: one item to add or edit, over the list. */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(31, 38, 38, .32); }
.drawer { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--white); box-shadow: var(--shadow-3); }
.drawer form { display: flex; flex-direction: column; height: 100%; }
.drawer header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; }
.drawer .fields { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.drawer footer { display: flex; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -2px 10px -4px rgba(31, 38, 38, .14); }
.drawer footer .go { flex: 1; min-height: 48px; }
.drawer footer .soft { min-height: 48px; }
.drawer:has([name=sold][value=piece]:checked, [name=sold][value^=loose]:checked) .holds { display: none; }
.photo { flex-direction: row; align-items: center; gap: 12px; }
.photo img, .photo .thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; }
.photo span:not(.thumb) { min-width: 3rem; }
.opts { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.opts legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.opt { position: relative; flex-direction: row; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; background: var(--fill); color: var(--ink); cursor: pointer; }
.opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt:has(input:checked) { background: var(--ink); color: var(--white); }
.opt:has(input:focus-visible) { outline: 2px solid var(--go); outline-offset: 2px; }
@supports not selector(:has(*)) { .opt:focus-within { outline: 2px solid var(--go); outline-offset: 2px; } }
.opts input[name=new_group] { min-height: 36px; width: 11rem; font-size: 14px; }
.switch-row { flex-direction: row; justify-content: space-between; align-items: center; font-size: 15px; color: var(--ink); }
dialog.zoom { padding: 0; border: 0; border-radius: 12px; max-width: min(92vw, 800px); background: var(--white); box-shadow: var(--shadow-3); }
dialog.zoom::backdrop { background: rgba(31, 38, 38, .6); }
dialog.zoom img { display: block; max-width: 100%; max-height: 86vh; }

/* Settings */
.page.settings, .page.health { max-width: 720px; }
.card.group { padding: 20px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 16px; }
.savebar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 16px; padding: 12px 0;
  background: linear-gradient(rgba(245, 247, 247, 0), var(--desk) 35%); }
#unsaved { margin-right: auto; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.savebar .go { min-width: 8rem; }
.people { list-style: none; margin: 0; padding: 0; }
.people li { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.people li b { flex: 1; }
.inline { display: flex; gap: 8px; align-items: flex-end; }
.inline label { flex: 1; }
.row-line { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; font-size: 15px; }
.row-line small { flex-basis: 100%; }

/* Login */
.login { width: min(380px, 100%); padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.login .brand { display: flex; align-items: center; gap: 10px; font-size: 26px; font-weight: 700; }
.login .mark { width: 48px; height: 48px; }
.login h1 { font-size: 16px; font-weight: 600; color: var(--ink-2); }
.login .go { min-height: 48px; margin-top: 4px; }

/* ------------------------------------------------------------------ Menu (customers) */
.menu-page { max-width: 40rem; margin: 0 auto; background: var(--white); }
.menu-page main { padding: 0 16px 7rem; }
.menu-head { display: flex; flex-direction: column; gap: 6px; padding: 20px 16px 4px; }
.menu-head p { font-size: 15px; color: var(--ink-2); }
/* The search and the shelves stay in reach while the page scrolls. */
.menu-nav { position: sticky; top: 0; z-index: 5; padding: 8px 16px 0; background: var(--white); box-shadow: 0 1px 0 var(--rule); }
.menu-nav input { width: 100%; }
.menu-tabs { display: flex; gap: 6px; margin: 0 -16px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none; }
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px; background: var(--fill);
  font-size: 14px; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.menu-tabs a[aria-current] { background: var(--ink); color: var(--white); }
.menu-found { margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.kind { border-bottom: 1px solid var(--rule-2); }
.kind summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; cursor: pointer; list-style: none; }
.kind summary::-webkit-details-marker { display: none; }
.kind summary .mi-name { flex: 1; }
.kind summary .i { flex: none; color: var(--ink-3); transition: transform .15s; }
.kind details[open] summary .i { transform: rotate(180deg); }
.picked-n { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--go); color: var(--white); font: 600 13px var(--mono); }
.brand { padding: 0 0 8px 12px; border-left: 2px solid var(--rule-2); margin-bottom: 8px; }
.brand h3 { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.menu-item.size { border-bottom: 0; padding: 6px 0; }
.menu-group h2 { margin: 22px 0 4px; font-size: 17px; }
.menu-group ul { list-style: none; margin: 0; padding: 0; }
.menu-item { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.mi-name { min-width: 0; font-weight: 600; }
.mi-name small { display: block; margin-top: 2px; font: 13px var(--mono); color: var(--ink-2); }
.mi-qty { display: flex; align-items: center; gap: 6px; flex: none; }
.mi-qty button { width: 44px; height: 44px; min-height: 0; padding: 0; border-radius: 10px; font-size: 20px; background: var(--fill); color: var(--go); }
.menu-item.picked .more { background: var(--go); color: var(--white); }
.mi-qty output { min-width: 3.6rem; text-align: center; font: 600 14px var(--mono); color: var(--go); }
.menu-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px max(16px, calc(50% - 19rem)) calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--white); box-shadow: 0 -2px 10px -4px rgba(31, 38, 38, .14); }
.menu-bar .btn { min-height: 48px; padding: 0 18px; }
.menu-count { gap: 10px; min-height: 48px; padding: 0; text-align: left; white-space: normal; }
.menu-count span { display: flex; flex-direction: column; }
.menu-count small { font-size: 13px; font-weight: 400; color: var(--ink-2); }
.menu-count .i { flex: none; color: var(--ink-3); transform: rotate(180deg); transition: transform .15s; }
.menu-count[aria-expanded="true"] .i { transform: none; }
.menu-list { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; max-height: 60vh; overflow-y: auto; padding: 16px max(16px, calc(50% - 19rem)) 8px;
  background: var(--white); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px -8px rgba(31, 38, 38, .2); }
.menu-list h2 { margin: 0 0 4px; font-size: 17px; }
.menu-list ul { list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------------ Policies (customers) */
.policy-page { max-width: 40rem; margin: 0 auto; padding: 24px 16px 48px; font-size: 17px; background: var(--white); }
.policy-page h2 { margin: 28px 0 8px; }
.policy-page p, .policy-page li { margin: 10px 0; }
.policy-page ul, .policy-page ol { padding-left: 1.3rem; }

/* Moving from one job to the next, where the browser can draw it. */
@view-transition { navigation: auto; }
.work { view-transition-name: work; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  @view-transition { navigation: none; }
}

/* A narrower computer: tighter columns. */
@media (max-width: 1180px) {
  .now { grid-template-columns: 300px minmax(0, 1fr) minmax(340px, 380px); }
  .now.resting, .now.solo { grid-template-columns: 300px minmax(0, 1fr); }
  .work-head, .dock { padding-left: 16px; padding-right: 16px; }
  .paper-wrap { padding-left: 12px; padding-right: 12px; }
  .bill { --pad: 16px; }
  .stock .item { grid-template-columns: 48px 44px minmax(0, 2fr) minmax(0, 1fr) 104px 72px 40px; }
  .stock .group { display: none; }
}
/* A tablet: the list beside one column, the job's main part on top, and the page
   scrolls as one. */
@media (max-width: 1000px) and (min-width: 761px) {
  body:has(.now) main { height: auto; display: block; }
  .now { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
  .now .rail { order: -2; grid-row: span 2; position: sticky; top: 0; height: 100dvh; }
  .now:not(.is-chat) .work { order: -1; }
  .work { min-height: 60dvh; }
  .paper-wrap { overflow: visible; }
  .dock { position: sticky; bottom: 0; z-index: 5; }
  .stream { max-height: 60dvh; }
}

/* Phone: one screen at a time, tabs along the bottom. */
@media (max-width: 760px) {
  :root { --tabs: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body.app { padding-left: 0; padding-bottom: var(--tabs); }
  .side { top: auto; right: 0; width: auto; height: var(--tabs); flex-direction: row; align-items: stretch; gap: 0; padding: 0 0 env(safe-area-inset-bottom, 0px); box-shadow: 0 -1px 3px rgba(31, 38, 38, .08); }
  .side .brand { display: none; }
  .side > .tab { flex: 1; width: auto; justify-content: center; }
  .tab .i { padding: 4px 18px; }
  /* Open and Sound sit in the Chats bar. */
  .side-end { display: none; }
  body:has(.now.auto, .now.resting) .side-end { display: flex; position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: 12px; flex-direction: row; gap: 6px; margin: 0; }
  .side-end .tab { width: 40px; height: 40px; padding: 0; justify-content: center; background: var(--fill); border-radius: 10px; }
  .side-end .tab span { display: none; }
  .side-end .tab .i { padding: 0; background: none; width: 20px; height: 20px; }
  .taking summary { flex-direction: row; width: auto; height: 40px; padding: 0 12px; gap: 8px; background: var(--fill); border-radius: 10px; font-size: 14px; }
  .side-end .me .av { display: grid; background: none; }
  .side-end .menu-body { position: fixed; left: 12px; right: 12px; top: calc(60px + env(safe-area-inset-top, 0px)); bottom: auto; width: auto; }
  /* A strip above the page would slip under those buttons, so the page starts below them. */
  body:has(.now.auto, .now.resting) main:has(> .strip:not([hidden]), .strips .strip:not(#live), #live.stale) { padding-top: calc(62px + env(safe-area-inset-top, 0px)); }
  .badge { left: calc(50% + 10px); }

  body:has(.now) main { height: auto; display: block; }
  .now, .now.resting { display: flex; flex-direction: column; }
  .rail { box-shadow: none; }
  .queue { overflow: visible; }
  .now:not(.auto):not(.resting) .rail { display: none; }
  .now.auto .work, .now.auto .talk, .resting .calm { display: none; }
  .now:not(.is-chat) .work { order: -1; }
  .back { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 12px; font-weight: 600; color: var(--ink-2); text-decoration: none; }
  .talk > .back { background: var(--white); }
  .work-head { padding: 4px 16px 10px; }
  .paper-wrap { overflow: visible; padding: 4px 8px 24px; }
  .bill { --pad: 14px; }
  .dock { position: sticky; bottom: var(--tabs); z-index: 5; padding: 10px 12px 12px; }
  .actions > form, .actions > div { flex-basis: 100%; }
  .now.is-chat .talk .stream { min-height: 50dvh; }
  .now.is-chat .compose { position: sticky; bottom: var(--tabs); z-index: 5; }
  /* The name gets the header's room: no avatar, and Give back is its icon. */
  .person { gap: 8px; padding: 8px 12px; }
  .person .av { display: none; }
  .back-to-bot { width: 40px; padding: 0; justify-content: center; }
  .back-to-bot span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .now:not(.is-chat) .talk { border-top: 8px solid var(--desk); }
  .work.about { border-top: 8px solid var(--chat); }
  .msg { max-width: 86%; }
  .quick, .outcomes, .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }

  .page { padding: 16px 16px 32px; }
  .head-end { width: 100%; margin-left: 0; }
  .head-end > * { flex: 1; }
  .import .panel { position: fixed; left: 16px; right: 16px; top: 72px; width: auto; }
  .import summary { width: 100%; }
  .stock .item { grid-template-columns: 44px minmax(0, 1fr) 104px 40px; grid-template-areas: "thumb what what menu" "sw sold price price" "save save save save"; gap: 8px 12px; padding: 12px; }
  .stock .switch { grid-area: sw; }
  .stock .thumb { grid-area: thumb; }
  .stock .what { grid-area: what; }
  .stock .sold { grid-area: sold; }
  .stock .price { grid-area: price; }
  .stock .save { grid-area: save; }
  .stock .menu { grid-area: menu; }
  .js .stock .item:not(.dirty) .save { display: none; }
  .card.order .dispatch { flex-direction: column; }
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card.group { padding: 16px; }
  .savebar { bottom: var(--tabs); }
}

/* A finger needs 44px; a pointer doesn't, and the counter's laptop stays compact. */
@media (pointer: coarse) {
  .chip, .filters a, .menu-tabs a, .opt, .stock .save { min-height: 44px; }
  .filters a { height: 44px; }
  .icon-btn, .menu summary { width: 44px; height: 44px; }
  .segs button { height: 44px; }
}
@media (pointer: coarse) and (max-width: 760px) {
  .side-end .tab { width: 44px; height: 44px; }
  .taking summary { height: 44px; }
}

/* A server that isn't the live one says so on every page, over the corner and out of the layout. */
.envtag { position: fixed; top: env(safe-area-inset-top, 0); right: 12px; z-index: 60; margin: 0; padding: 1px 10px 2px; border-radius: 0 0 8px 8px; background: var(--coral-ink); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }