/* =====================================================================================================
   Rengi web-admin — "The Pass" (WEB-UI-1)

   Every screen is a piece of the restaurant's own equipment: brushed-steel ground, white work surfaces,
   graphite ink, hairline rules instead of card shadows, rectangular controls, and one lamp colour that
   means "waiting for you". Green only ever means ready or fine, red only a fault or a destructive act.
   Every figure sits on tabular numerals. The kitchen board is the dark equipment panel. The Platform
   Console is the maker's service panel (graphite rail, cobalt mark); a restaurant's app is headed by
   its own name and logo.

   Shape: controls 8px, surfaces 12px, dialogs, sheets and touch tiles 16px; lamps are round, counts are pills.
   Type: Onest (OFL, fonts/Onest-OFL.txt), one variable face for the interface and the figures; every figure
   that changes or lines up sits on tabular numerals.
   Motion (apple-design): feedback on the press, not the release; what moves starts from where it is, eases
   out fast and settles without a bounce; what floats is a material (blur and a soft long shadow) and gives
   way to solid surfaces under prefers-reduced-transparency; prefers-reduced-motion trades movement for fades.
   Icons: Phosphor regular sprite (icons.svg, MIT). z-index: see --z-*.
   ===================================================================================================== */

/* Onest (OFL, fonts/Onest-OFL.txt): one variable face, 400–700, split the way the browser asks for it. The
   Cyrillic extension carries the hryvnia sign, so a price never falls back to another face for its last glyph. */
@font-face { font-family: "Onest"; src: url("fonts/Onest-CyrillicExt.woff2?v=1") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Onest"; src: url("fonts/Onest-Cyrillic.woff2?v=1") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("fonts/Onest-LatinExt.woff2?v=1") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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: "Onest"; src: url("fonts/Onest-Latin.woff2?v=1") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; 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; }

/* ----------------------------------------------------------------------------------------- tokens */
:root {
    color-scheme: light;

    /* Steel: one warm-neutral grey family, from the work surface to graphite. */
    --steel-0: oklch(99.5% 0.0015 95);
    --steel-50: oklch(97.8% 0.002 95);
    --steel-100: oklch(95.6% 0.003 95);
    --steel-150: oklch(93.4% 0.0035 95);
    --steel-200: oklch(90.4% 0.004 95);
    --steel-300: oklch(84% 0.005 95);
    --steel-400: oklch(71% 0.006 95);
    --steel-500: oklch(52% 0.007 95);
    --steel-600: oklch(44% 0.008 95);
    --steel-700: oklch(35% 0.008 95);
    --steel-800: oklch(27% 0.008 95);
    --steel-900: oklch(21.5% 0.008 95);
    --steel-950: oklch(16.5% 0.007 95);

    /* Semantic surfaces and ink. The bench is brushed steel, the work surface nearly white, and the steps
       between them small: a hover, a pressed plate and a sunken well are each one notch, never a new colour. */
    --canvas: oklch(97.3% 0.0025 95);
    --surface: oklch(99.6% 0.0015 95);
    --surface-raised: oklch(99.6% 0.0015 95);
    --surface-subtle: oklch(95.9% 0.003 95);
    --surface-hover: oklch(96.4% 0.003 95);
    --surface-accent: oklch(93.8% 0.0035 95);
    --rail: oklch(95.2% 0.003 95);
    --rail-hover: oklch(96.4% 0.003 95);
    --rail-ink: oklch(37% 0.008 95);
    --ink: var(--steel-900);
    --navy: var(--steel-900);
    --muted: oklch(50% 0.007 95);
    --subtle: oklch(58% 0.007 95);
    --label: oklch(37% 0.008 95);
    --border: oklch(90.6% 0.004 95);
    --line-soft: oklch(93.8% 0.0035 95);
    --input-border: oklch(88.5% 0.0045 95);
    --hover-border: oklch(50% 0.007 95);
    --neutral-soft: oklch(95.9% 0.003 95);

    /* The action: graphite, like the keys on a piece of kitchen equipment. */
    --action: var(--steel-900);
    --action-hover: color-mix(in oklch, var(--steel-900) 88%, var(--steel-50));
    --on-action: var(--steel-0);

    /* The lamp: waiting for you. */
    --amber: oklch(50% 0.125 62);
    --amber-lamp: oklch(75% 0.155 70);
    --amber-soft: oklch(96.6% 0.03 82);
    --amber-line: oklch(87% 0.07 78);
    /* Ready, fine. */
    --green: oklch(46% 0.11 152);
    --green-lamp: oklch(63% 0.15 150);
    --green-soft: oklch(96.2% 0.03 152);
    --green-line: oklch(86% 0.07 152);
    /* A fault, or a step with no way back. */
    --red: oklch(50% 0.175 27);
    --red-lamp: oklch(61% 0.2 27);
    --red-soft: oklch(96.6% 0.02 27);
    --red-line: oklch(87% 0.06 27);
    /* Rengi itself: the console's mark and a support session inside a restaurant. */
    --cobalt: oklch(50% 0.17 264);
    --cobalt-strong: oklch(43% 0.17 264);
    --cobalt-soft: oklch(95.5% 0.025 264);
    /* Kept names: a note or an optional step (calm, never the lamp). */
    --blue: oklch(37% 0.008 95);
    --blue-dark: var(--steel-900);
    --blue-soft: oklch(95.9% 0.003 95);

    --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23858480' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --focus: var(--steel-900);
    --focus-soft: oklch(21.5% 0.008 95 / .12);
    --selection: oklch(90% 0.07 82);

    /* Elevation: tinted to the ink, one light source above. A key casts a hairline; what floats casts a soft,
       long shadow that starts well inside its own edge, so it reads as lifted rather than outlined. */
    --shadow-1: 0 1px 2px oklch(21.5% 0.008 95 / .06);
    --shadow-2: 0 10px 30px -12px oklch(21.5% 0.008 95 / .22);
    --shadow-3: 0 2px 6px oklch(21.5% 0.008 95 / .05), 0 28px 64px -16px oklch(21.5% 0.008 95 / .3);
    --shadow: var(--shadow-1);

    /* Type. */
    --font-ui: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-figures: "Onest", "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-md: 14px; --text-lg: 16px;
    --text-xl: 18px; --text-2xl: 22px; --text-3xl: 26px;

    /* Space, shape, controls, layers, motion. */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --radius-mark: 2px; --radius-control: 8px; --radius-surface: 12px; --radius-large: 16px;
    --control-sm: 32px; --control-md: 38px; --control-key: 36px; --control-lg: 44px; --control-touch: 56px;
    --rail-width: 244px;
    --z-sticky: 10; --z-nav: 20; --z-popover: 30; --z-overlay: 100; --z-toast: 300; --z-support: 400;
    /* Motion (apple-design): a press settles at once; whatever moves eases out fast and lands soft, and the
       springs are critically damped unless a gesture threw the thing (then --spring-bounce). */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 20.5%, 1.043 24.5%, 1.035 28.4%, 1.007 41.7%, 0.998 55.4%, 1);
    --press: 120ms;

    font-family: var(--font-ui);
}

/* The dark theme; the kitchen board wears it too unless a cook chose light. */
:root[data-theme="dark"], :root:not([data-theme-preference="light"]) .kds-shell {
    color-scheme: dark;
    --canvas: oklch(15.6% 0.006 95);
    --surface: oklch(20% 0.007 95);
    --surface-raised: oklch(22.5% 0.008 95);
    --surface-subtle: oklch(17.4% 0.007 95);
    --surface-hover: oklch(23% 0.008 95);
    --surface-accent: oklch(25.5% 0.008 95);
    --rail: oklch(17.6% 0.007 95);
    --rail-hover: oklch(23% 0.008 95);
    --rail-ink: oklch(83% 0.005 95);
    --ink: oklch(95% 0.004 95);
    --navy: oklch(96% 0.004 95);
    --muted: oklch(68% 0.006 95);
    --subtle: oklch(60% 0.007 95);
    --label: oklch(83% 0.005 95);
    --border: oklch(29% 0.008 95);
    --line-soft: oklch(25% 0.008 95);
    --input-border: oklch(33% 0.009 95);
    --hover-border: oklch(68% 0.006 95);
    --neutral-soft: oklch(25% 0.008 95);
    --action: oklch(94% 0.004 95);
    --action-hover: oklch(86% 0.005 95);
    --on-action: oklch(18% 0.006 95);
    --amber: oklch(82% 0.13 78);
    --amber-lamp: oklch(78% 0.155 72);
    --amber-soft: oklch(28% 0.05 70);
    --amber-line: oklch(42% 0.08 70);
    --green: oklch(80% 0.13 150);
    --green-lamp: oklch(70% 0.15 150);
    --green-soft: oklch(27% 0.045 152);
    --green-line: oklch(40% 0.07 150);
    --red: oklch(76% 0.15 27);
    --red-lamp: oklch(66% 0.19 27);
    --red-soft: oklch(28% 0.05 27);
    --red-line: oklch(43% 0.1 27);
    --cobalt: oklch(70% 0.13 264);
    --cobalt-strong: oklch(58% 0.16 264);
    --cobalt-soft: oklch(28% 0.05 264);
    --blue: oklch(83% 0.005 95);
    --blue-dark: oklch(96% 0.004 95);
    --blue-soft: oklch(25% 0.008 95);
    --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a3a29e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --focus: oklch(95% 0.004 95);
    --focus-soft: oklch(95% 0.004 95 / .18);
    --selection: oklch(40% 0.07 75);
    --shadow-1: 0 1px 2px oklch(0% 0 0 / .4);
    --shadow-2: 0 14px 36px -12px oklch(0% 0 0 / .7);
    --shadow-3: 0 28px 64px -16px oklch(0% 0 0 / .75);
    --shadow: var(--shadow-1);
}

:root[data-density="compact"] { --control-md: 34px; }

/* ------------------------------------------------------------------------------------------- base */
* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-size: var(--text-md); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; }
/* A link is ink; in running text it carries an engraved underline. Links dressed as buttons, rows or
   cards style themselves. */
a { color: var(--ink); font-weight: inherit; text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:not([class]):hover { color: var(--ink); text-decoration: underline; }
:is(p, li, dd, small, td, .alert, .hint, .field-hint, .muted, .section-heading) > a:not([class]) { text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 40%, transparent); }
:is(p, li, dd, small, td, .alert, .hint, .field-hint, .muted) > a:not([class]):hover { text-decoration-color: currentColor; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--navy); text-wrap: balance; }
h1 { margin-bottom: 6px; font-size: var(--text-3xl); font-weight: 650; line-height: 1.15; letter-spacing: -0.022em; }
h1[tabindex]:focus, h1[tabindex]:focus-visible { outline: none; }
h2 { margin-bottom: 4px; font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -0.006em; }
h3 { margin-bottom: 4px; font-size: var(--text-md); font-weight: 600; line-height: 1.35; }
p { color: var(--muted); text-wrap: pretty; }
small, .hint, .field-hint, .alert > span, .alert > strong, .entrance-door small, td { text-wrap: pretty; }
.entrance-door strong, .empty-state h2, .login-heading h1 { text-wrap: balance; }
strong, b { font-weight: 600; }
code { padding: 1px 5px; color: var(--ink); background: var(--neutral-soft); border: 1px solid var(--border); border-radius: var(--radius-mark); font-family: var(--font-mono); font-size: 12px; }
kbd { display: inline-flex; align-items: center; min-height: 20px; padding: 1px 6px; color: var(--muted); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 5px; font: 500 11px var(--font-ui); }
::selection { color: var(--ink); background: var(--selection); }
::placeholder { color: var(--subtle); opacity: 1; }
html { scrollbar-color: color-mix(in oklch, var(--ink) 22%, transparent) transparent; }
/* A page short enough to need no scrollbar keeps the room for one, so the content does not shift 15 px between pages. */
html { scrollbar-gutter: stable; }
input, textarea { caret-color: var(--ink); }
table, .num, time, .tabular { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; padding: 9px 13px; color: var(--on-action); background: var(--action); border-radius: var(--radius-control); text-decoration: none; transform: translateY(-150%); transition: transform 160ms var(--ease-out); }
.skip-link:focus { color: var(--on-action); transform: none; }
.nowrap { white-space: nowrap; }
.muted { color: var(--muted); font-size: var(--text-xs); }
hr { height: 1px; margin: var(--space-5) 0; background: var(--border); border: 0; }

/* Keyboard focus: a graphite ring clear of the control, on every interactive element. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------------------------------ icons */
.icon { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em; fill: currentColor; }
.icon.lg { width: 1.4em; height: 1.4em; }
.button .icon { width: 16px; height: 16px; }

/* ------------------------------------------------------------------------------------------ shell
   A rail on the left, the work on the right. A restaurant's rail is brushed steel headed by its own
   name and logo; the console's rail is the maker's graphite panel with the cobalt mark. */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); }
.content-column { min-width: 0; display: flex; flex-direction: column; }
/* The rail is as tall as the window and scrolls on its own: with every section a cabinet has, the list
   is taller than a 768 px screen, and whatever sits below the fold would be out of reach. */
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 14px; padding: var(--space-4) var(--space-3) var(--space-3); color: var(--ink); background: var(--rail); border-right: 1px solid var(--border); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
/* The sections scroll inside the rail; the business's name above them and the account, language and theme
   below them stay in view on any screen (a cabinet's list is taller than a 900 px window). */
@media (min-width: 761px) {
    .sidebar { overflow: hidden; }
    .sidebar > .primary-nav { flex: 1 1 auto; min-height: 0; margin-inline: -4px; padding-inline: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.rail-head { display: flex; align-items: center; gap: var(--space-2); }
.brand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 6px; color: var(--ink); text-decoration: none; border-radius: var(--radius-control); transition: background-color 120ms ease; }
.brand:hover { color: var(--ink); }
.brand > span:last-child { min-width: 0; display: flex; flex-direction: column; }
/* A restaurant's name is what tells staff where they are: two lines before it is ever cut. */
.brand strong { display: -webkit-box; overflow: hidden; font-size: var(--text-md); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.brand small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
/* The restaurant's mark: its logo when it has one, its initial on engraved steel until then. */
/* Until the logo arrives the mark is a graphite key with the initial on it; a logo sits on white. */
.brand-mark { position: relative; display: grid; place-items: center; flex: none; width: 34px; height: 34px; overflow: hidden; color: var(--on-action); background: var(--action); border: 0; border-radius: 9px; font-family: var(--font-figures); font-size: 16px; font-weight: 700; }
.brand-mark:has(> img[data-state="loaded"]) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.brand-mark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Once the logo has loaded, the initial under it steps aside (a transparent logo must not show it);
   a logo that failed is hidden and the initial stays. The picture only marks itself (TenantMark). */
.brand-mark:has(> img[data-state="loaded"]) > span { visibility: hidden; }
.brand-mark > img[data-state="failed"] { display: none; }
.brand-mark.large { width: 52px; height: 52px; border-radius: 14px; font-size: 22px; }

.primary-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-group { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-3); }
.nav-group-label { margin: 0 10px 4px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .01em; }
.primary-nav a { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 6px 10px; color: var(--rail-ink); border-radius: var(--radius-control); font-size: var(--text-md); font-weight: 500; line-height: 1.3; text-decoration: none; transition: background-color 120ms ease, color 120ms ease, transform var(--press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.primary-nav a:active { transform: scale(.98); }
.primary-nav a .icon { width: 19px; height: 19px; color: var(--muted); transition: color 120ms ease; }
.primary-nav a > span:not(.icon) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) { .primary-nav a:hover { color: var(--ink); background: var(--rail-hover); } }
/* A count of what waits on the person looking: an amber pill at the row's end. */
.nav-count { margin-left: auto; min-width: 22px; padding: 0 7px; color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.primary-nav a:hover .icon { color: var(--ink); }
.primary-nav a.active { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border); font-weight: 600; }
.primary-nav a.active .icon { color: var(--ink); }
/* A surface the business has not bought: locked and visible, so an owner can decide to buy it. */
.primary-nav a.nav-locked, .primary-nav a.nav-locked:hover { color: var(--subtle); }
.nav-locked .icon { color: var(--subtle); }
/* The way back to another workspace (the queue's rail): a plain link with its arrow, first in the list. */
.nav-return { font-weight: 500; }
.nav-return + .nav-return { margin-top: 0; }
.nav-return-group { margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); }

.sidebar-footer { margin-top: auto; display: grid; gap: 10px; padding-top: var(--space-3); border-top: 1px solid var(--border); }
/* UI-2: the cabinet's rail ends in the station keys and the person; its rule is the person's own. */
.cabinet-shell .sidebar-footer { padding-top: 0; border-top: 0; }
.rail-search { display: flex; align-items: center; gap: 8px; width: 100%; height: 36px; padding: 0 10px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; font-size: 13.5px; text-align: left; transition: border-color 120ms ease, color 120ms ease, transform var(--press) var(--ease-out); }
.rail-search .icon { width: 16px; height: 16px; }
.rail-search kbd { margin-left: auto; }
@media (hover: hover) { .rail-search:hover { color: var(--ink); border-color: var(--hover-border); } }
.rail-search:active { transform: scale(.98); }
.stations { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.station-link { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 36px; padding: 0 8px; color: var(--label); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: border-color 120ms ease, color 120ms ease, transform var(--press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.station-link .icon { flex: none; width: 17px; height: 17px; }
.station-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .station-link:hover { color: var(--ink); border-color: var(--hover-border); } }
.station-link:active { transform: scale(.97); }
/* The person: avatar, name and role, then the moon or the sun. The row is the key to the account menu. */
.me { position: relative; display: flex; align-items: center; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.me-button { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer; text-align: left; transition: background-color 120ms ease, transform var(--press) var(--ease-out); }
@media (hover: hover) { .me-button:hover { background: var(--rail-hover); } }
.me-button:active { transform: scale(.98); }
.me-button[aria-expanded="true"] { background: var(--surface-accent); }
.me-name { min-width: 0; display: grid; line-height: 1.25; }
.me-name strong { overflow: hidden; font-size: 13.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.me-name span { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
/* The account menu (apple-design): grows up out of the row that opened it — its origin is that row — and
   a click anywhere else, or Escape, puts it away. A material: it floats, so it carries the long shadow. */
.popover-scrim { position: fixed; inset: 0; z-index: calc(var(--z-popover) - 1); }
.account-menu { position: absolute; bottom: calc(100% - 4px); left: 0; right: 0; z-index: var(--z-popover); display: grid; gap: 4px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-2), var(--shadow-1); transform-origin: 30% 100%; animation: menu-in 200ms var(--ease-out); }
.sidebar-footer { position: relative; }
@keyframes menu-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.account-menu-who { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; border-bottom: 1px solid var(--line-soft); }
.account-menu-who > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.account-menu-who strong { font-size: var(--text-sm); }
.account-menu-who small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.account-menu-prefs { display: grid; gap: 6px; padding: 6px 4px; }
.menu-selector { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; color: var(--label); font-size: var(--text-sm); font-weight: 500; }
.menu-selector select { min-width: 0; min-height: 32px; padding: 4px 28px 4px 9px; font-size: var(--text-sm); }
.account-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; color: var(--ink); background: transparent; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0 0 var(--radius-control) var(--radius-control); cursor: pointer; font-weight: 500; text-align: left; }
@media (hover: hover) { .account-menu-item:hover { background: var(--surface-hover); } }
.account-menu-item .icon { color: var(--muted); }
.connectivity { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--muted); border-radius: var(--radius-control); font-size: var(--text-xs); text-decoration: none; }
.connectivity:hover { color: var(--ink); background: var(--rail-hover); }
.status-dot { display: inline-block; flex: none; width: 8px; height: 8px; background: var(--steel-400); border-radius: var(--radius-mark); }
.status-dot.online { background: var(--green-lamp); }
.status-dot.offline { background: var(--red-lamp); }
.status-dot.degraded { background: var(--amber-lamp); }
.connectivity.degraded { color: var(--amber); }
.user-card { min-width: 0; }
.user-card { display: flex; align-items: center; gap: 9px; padding: 6px 4px 6px 6px; }
.avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; color: var(--label); background: var(--surface-accent); border-radius: 50%; font-size: var(--text-xs); font-weight: 700; }
.avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.user-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; line-height: 1.3; }
.user-copy strong { display: -webkit-box; overflow: hidden; color: var(--ink); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.user-copy small { color: var(--muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
/* The language and the theme: a person's own settings, kept quietly at the foot of the rail. */
.rail-prefs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.platform-shell .rail-search, .platform-shell .station-link { color: var(--steel-300); background: oklch(22% 0.008 95); border-color: oklch(30% 0.008 95); }
.rail-prefs .selector-field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rail-prefs select, .rail-prefs .shell-selector select { width: 100%; min-width: 0; min-height: 30px; padding: 3px 6px; background-color: transparent; border-color: var(--border); font-size: var(--text-xs); box-shadow: none; }

.icon-button { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; color: var(--label); background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer; font-size: 17px; line-height: 1; transition: background-color 120ms ease, color 120ms ease, transform var(--press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.icon-button .icon { width: 18px; height: 18px; }
@media (hover: hover) { .icon-button:hover { color: var(--ink); background: var(--surface-hover); } }
.icon-button:active { transform: scale(.94); }
/* The menu key that folds the rail away exists only on a phone. */
.icon-button.rail-toggle { display: none; }

/* ------------------------------------------------------------------------------- cabinet navigation
   NAV-1. The cabinet in eight areas, not twenty-two screens: the rail names the areas, the strip above
   a page names the screens of the area being worked in, and a phone trades the rail for a bar under the
   thumb. One map draws all three (CabinetNavigation). */
.cabinet-shell .primary-nav > a { min-height: 40px; }
.cabinet-shell .primary-nav > .nav-group { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); }
/* A laptop 632 px tall: the sections and the working screens under them fit the rail without a scrollbar of their own. */
@media (min-width: 761px) and (max-height: 760px) {
    .cabinet-shell .primary-nav > a { min-height: 32px; padding-block: 4px; }
    .cabinet-shell .primary-nav > .nav-group { margin-top: var(--space-2); padding-top: var(--space-2); }
    .cabinet-shell .sidebar { gap: var(--space-2); padding-top: var(--space-3); }
}
/* The strip is navigation, not a filter: text links on the page's own rule, the screen in view underlined
   in ink. Filters are the bordered keys of .filter-bar and never look like this. */
/* UI-2: the strip sits under the page's title, as the concept's tabs do: the area is named once (the title), its
   screens are the tabs, and the screen in view carries an ink underline that slides to the next one. */
.area-nav { display: flex; flex-wrap: wrap; gap: 0 22px; margin: -6px 0 22px; border-bottom: 1px solid var(--border); }
.area-nav a { position: relative; display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 42px; color: var(--muted); font-size: var(--text-md); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color 120ms ease; }
.area-nav a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: transparent; border-radius: 2px; transition: background-color 120ms ease; }
.area-nav a:hover { color: var(--ink); }
.area-nav a.active { color: var(--ink); font-weight: 600; }
.area-nav a.active::after { background: var(--ink); }
.area-nav a .icon { width: 14px; height: 14px; color: var(--subtle); }
.area-nav a.nav-locked, .area-nav a.nav-locked:hover { margin-left: auto; color: var(--subtle); }
/* A tab is as wide as its label in the chosen weight whether or not it is chosen: the bold label of the screen in view
   no longer pushes every tab after it sideways at each switch. The 600-weight copy has no height and is never seen. */
:is(.area-nav, .detail-tabs) [data-label] { display: inline-flex; flex-direction: column; }
:is(.area-nav, .detail-tabs) [data-label]::before { height: 0; overflow: hidden; content: attr(data-label); font-weight: 600; visibility: hidden; pointer-events: none; user-select: none; }
/* The bar is a phone's; a wide screen has the rail. */
.tab-bar { display: none; }

/* A list of ways in — the «More» page, the work screens: a row a thumb can hit, with one line on what is
   behind it. */
.nav-rows { max-width: 720px; margin-bottom: var(--space-6); }
.nav-rows > h2 { margin: 0 0 var(--space-2); color: var(--label); font-size: var(--text-sm); font-weight: 600; }
.nav-rows > ul { margin: 0; padding: 0; overflow: hidden; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.nav-rows > ul > li + li { border-top: 1px solid var(--line-soft); }
.nav-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 60px; padding: 10px var(--space-4); color: var(--ink); text-decoration: none; transition: background-color 120ms ease; -webkit-tap-highlight-color: transparent; }
.nav-row:hover { color: var(--ink); background: var(--surface-hover); }
.nav-row:focus-visible { outline-offset: -2px; }
.nav-row-mark { display: grid; place-items: center; width: 36px; height: 36px; color: var(--label); background: var(--surface-subtle); border-radius: var(--radius-control); }
.nav-row-mark .icon { width: 20px; height: 20px; }
.nav-row-copy { display: grid; gap: 1px; min-width: 0; }
.nav-row-copy strong { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.nav-row-copy small { color: var(--muted); font-size: var(--text-sm); line-height: 1.35; text-wrap: pretty; }
.nav-row > .nav-row-go { width: 16px; height: 16px; color: var(--subtle); transition: color 120ms ease; }
.nav-row:hover > .nav-row-go { color: var(--ink); }
/* The account on the «More» page: the rail's foot with room for words. */
.account-panel { display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.account-panel .user-card { flex-wrap: wrap; gap: var(--space-3); padding: 0; }
.account-panel .user-copy { flex: 1 1 180px; }
.account-panel .rail-prefs { gap: var(--space-3); }
.account-panel .rail-prefs .selector-field span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.account-panel .rail-prefs .shell-selector { display: grid; }
.account-panel .rail-prefs .shell-selector select { min-height: var(--control-lg); padding: 7px 10px; background-color: var(--surface); border-color: var(--input-border); font-size: var(--text-md); }

/* The console: the maker's service panel. */
.platform-shell .sidebar { --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a2a19d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --rail: var(--steel-950); --rail-hover: oklch(24% 0.008 95); --rail-ink: var(--steel-300); --subtle: var(--steel-400); color: var(--steel-100); background: var(--rail); border-right-color: oklch(10% 0.005 95); }
.platform-shell .brand, .platform-shell .brand:hover { color: var(--steel-50); }
.platform-shell .brand small, .platform-shell .nav-group-label, .platform-shell .connectivity, .platform-shell .user-copy small { color: var(--steel-400); }
/* The console's own name and what it is are read whole (cc-29): two short lines, never «…». */
.platform-shell .brand small { white-space: normal; text-wrap: balance; }
.platform-shell .brand-mark, .platform-login .brand-mark { color: #fff; background: var(--cobalt); border-color: transparent; box-shadow: none; }
.platform-shell .primary-nav a .icon { color: var(--steel-400); }
.platform-shell .primary-nav a:hover { color: #fff; }
.platform-shell .primary-nav a:hover .icon { color: #fff; }
.platform-shell .primary-nav a.active { color: #fff; background: oklch(26% 0.01 95); box-shadow: inset 2px 0 0 var(--cobalt); }
.platform-shell .primary-nav a.active .icon { color: oklch(78% 0.1 264); }
.platform-shell .sidebar-footer { border-top-color: oklch(26% 0.008 95); }
.platform-shell .user-copy strong { color: var(--steel-50); }
.platform-shell .avatar { color: var(--steel-50); background: oklch(24% 0.008 95); border-color: oklch(30% 0.008 95); }
.platform-shell .connectivity:hover, .platform-shell .icon-button:hover { color: #fff; background: var(--rail-hover); }
.platform-shell .sidebar .icon-button { color: var(--steel-300); }

/* The console's top bar: search, the command palette and a person's own settings. */
.shell-toolbar { position: sticky; top: 0; z-index: var(--z-nav); display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 9px clamp(20px, 3vw, 40px); background: color-mix(in oklch, var(--canvas) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: saturate(1.4) blur(10px); }
.global-search { position: relative; flex: 1; max-width: 560px; }
.shell-search { max-width: none; }
.shell-search kbd { margin-left: auto; }
.command-trigger { gap: 10px; color: var(--muted); }
.command-trigger kbd { font-size: 10px; }
.selector-field { display: grid; gap: 3px; color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.selector-field select { min-width: 150px; }
.shell-selector span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.shell-selector select { min-width: 112px; min-height: 34px; font-size: var(--text-sm); }
.shell-toolbar .shell-selector select { min-width: 0; }
.command-trigger { margin-left: auto; }
.global-search .search-box { max-width: none; }
.help-trigger { border: 1px solid var(--border); }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: var(--z-popover); overflow: hidden; padding: 6px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-surface); box-shadow: var(--shadow-2); }
.search-results > small { display: block; padding: 7px 9px 4px; color: var(--muted); }
.search-result { display: grid; grid-template-columns: 1fr auto; align-items: center; border-radius: var(--radius-control); }
.search-result.selected, .search-result:hover { background: var(--surface-accent); }
.search-result > button:first-child { min-width: 0; display: grid; gap: 2px; padding: 9px; color: var(--ink); background: transparent; border: 0; cursor: pointer; text-align: left; }
.search-result span { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.search-state { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 72px; padding: 12px; color: var(--muted); text-align: center; }
.search-state button { color: var(--ink); background: none; border: 0; cursor: pointer; text-decoration: underline; }
/* Under 1100 px the palette key keeps its icon and the search takes what is left; under 900 px language and
   theme leave the bar (they stay in Settings) rather than run off the screen. */
@media (max-width: 1100px) {
    .command-trigger > span:not(.icon), .command-trigger kbd { display: none; }
    .global-search { flex: 1 1 180px; min-width: 0; }
    .shell-toolbar .search-box { min-width: 0; }
}
@media (max-width: 900px) { .shell-toolbar .shell-selector { display: none; } }

.content { width: 100%; max-width: 1560px; min-width: 0; padding: 28px clamp(20px, 3vw, 40px) 72px; }
/* UI-2: a cabinet page reads on the concept's measure — 1180 px, centred beside the rail. */
.cabinet-shell .content { max-width: calc(1180px + 2 * clamp(20px, 3vw, 40px)); margin-inline: auto; padding-bottom: 64px; }
/* A screen arrives the way the concept's views do: a short rise into place, never a slide across. */
.cabinet-shell .content > * { animation: view-in 200ms var(--ease-out); }
/* The page's own title comes first and the strip of the area's screens sits under it (the concept's subnav):
   the layout draws the strip before the page, so the column orders them — the way back, the title, the strip. */
.cabinet-shell .content { display: flex; flex-direction: column; }
.cabinet-shell .content > :is(.back-link, .breadcrumbs) { order: -3; align-self: flex-start; }
.cabinet-shell .content > .page-header { order: -2; }
.cabinet-shell .content > .area-nav { order: -1; }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } }

/* ------------------------------------------------------------------------------------ page header */
.page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px; min-height: 36px; margin-bottom: 22px; }
.page-header > div:first-child { flex: 1 1 420px; min-width: 0; }
/* The keys sit on the title's line (not on the subtitle's last line), so they stay put from page to page. */
.page-header .header-actions, .page-header .page-actions { flex: 0 1 auto; justify-content: flex-end; margin-top: -4px; margin-left: auto; }
.page-header h1 { margin-bottom: 4px; }
.page-header p { max-width: 72ch; margin-bottom: 0; font-size: var(--text-md); }
.page-actions, .header-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tenant-heading { align-items: flex-start; }
.page-header .header-actions > .icon-button { width: var(--control-key); height: var(--control-key); color: var(--label); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1); }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: color 120ms ease; }
.back-link:hover { color: var(--ink); }
.title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.title-line h1, .title-line h2, .title-line h3 { margin-bottom: 0; }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; color: var(--muted); font-size: var(--text-sm); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.refresh-note { color: var(--muted); font-size: var(--text-xs); }

/* --------------------------------------------------------------------------------------- controls
   Rectangular keys. A press settles like a hardware key (0.97, 120 ms); hover is a change of fill,
   never a lift. Graphite is the one action; the plain key is steel on white. */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--control-key); padding: 0 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-1); transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform var(--press) var(--ease-out); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.button:active:not(:disabled) { transform: scale(.97); }
/* Inside a table row or an inline action group a button is a control among controls, not a call to action. */
.button.small, td .button, .row-actions .button, .row-action { min-height: var(--control-sm); padding: 0 11px; font-size: var(--text-sm); }
td .button:not(.primary):not(.destructive), .row-actions .button:not(.primary):not(.destructive) { box-shadow: none; }
.button.primary { color: var(--on-action); background: var(--action); border-color: var(--action); }
.button.secondary { color: var(--ink); background: var(--surface); border-color: var(--border); }
.button.tertiary, .button.ghost { color: var(--label); background: transparent; border-color: transparent; box-shadow: none; }
/* A quiet action with no plate of its own is marked the way a link is, so it never reads as a label. */
.button.tertiary:not(:has(.icon)) > span:only-child, .button.tertiary:not(:has(.icon, span)) { text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: 3px; }
/* On a bar the key has its own plate, so it needs no underline. */
:is(.pos-bar, .kds-bar, .impersonation-bar) .button.tertiary, :is(.pos-bar, .kds-bar, .impersonation-bar) .button.tertiary > span { text-decoration: none; }
.button.full { width: 100%; }
.button.large { min-height: var(--control-lg); padding: 0 18px; font-size: 14.5px; }
.button:disabled, fieldset:disabled .button { opacity: .5; cursor: not-allowed; box-shadow: none; }
.button.destructive { color: var(--red); background: var(--red-soft); border-color: var(--red-line); }
.button.destructive.solid { color: white; background: var(--red); border-color: var(--red); }
:root[data-theme="dark"] .button.destructive.solid { color: var(--on-action); background: var(--red-lamp); border-color: var(--red-lamp); }
.button.danger-ghost { color: var(--red); background: transparent; border-color: transparent; box-shadow: none; }
.cabinet-dialog .form-actions > .button.danger-ghost { background: var(--red-soft); border-color: var(--red-line); }
@media (hover: hover) {
    .button:hover:not(:disabled) { color: var(--ink); background: var(--surface-hover); border-color: var(--hover-border); }
    .button.primary:hover:not(:disabled) { color: var(--on-action); background: var(--action-hover); border-color: var(--action); }
    .button.tertiary:hover:not(:disabled), .button.ghost:hover:not(:disabled) { color: var(--ink); background: var(--surface-accent); border-color: transparent; }
    .button.destructive:hover:not(:disabled) { color: var(--red); background: color-mix(in oklch, var(--red-soft) 70%, var(--red-line)); border-color: var(--red); }
    .button.destructive.solid:hover:not(:disabled) { color: white; background: color-mix(in oklch, var(--red) 85%, black); border-color: color-mix(in oklch, var(--red) 85%, black); }
    .button.danger-ghost:hover:not(:disabled) { color: var(--red); background: var(--red-soft); border-color: transparent; }
    .cabinet-dialog .form-actions > .button.danger-ghost:hover:not(:disabled) { background: color-mix(in oklch, var(--red-soft) 70%, var(--red-line)); border-color: var(--red); }
    :root[data-theme="dark"] .button.destructive.solid:hover:not(:disabled) { color: var(--on-action); background: var(--red); border-color: var(--red); }
}
.link-button { padding: 0; color: inherit; background: none; border: 0; cursor: pointer; font: inherit; text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 40%, transparent); text-underline-offset: 3px; }
.link-button:hover { text-decoration-color: currentColor; }
.copy-inline { display: inline-block; max-width: min(240px, 100%); overflow: hidden; margin-block: -3px; padding: 3px 0; color: var(--muted); background: none; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: .92em; text-align: left; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
/* In a list of facts the id is whole: it wraps inside its own cell instead of running into the next one. */
dd > .copy-inline { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: var(--text-sm); }
.copy-inline:hover { color: var(--ink); text-decoration: underline; }
.sort-button { display: inline-flex; align-items: center; gap: 4px; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; font: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; }
.sort-button { min-height: 24px; margin-block: -3px; }
.sort-button .icon { width: 14px; height: 14px; }
.file-button { position: relative; overflow: hidden; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Fields: the label above, the help under it, the error under that. */
/* The field every text control starts from, at zero specificity: any component that draws its own (a search box,
   the till's note, a PIN) overrides it with a single class. */
:where(input[type="date"], input[type="time"], input[type="datetime-local"]) { height: var(--control-md); }
.time-field { font-variant-numeric: tabular-nums; }
td > .time-field { width: 84px; text-align: center; }
:where(select, input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), textarea) { min-height: var(--control-md); padding: 7px 11px; color: var(--ink); background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius-control); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; }
/* The caret is a drawn chevron in the muted ink of its ground (--select-caret): two gradient halves made a ragged
   triangle with a stray seam at 1x. */
select { padding-right: 32px; appearance: none; background-image: var(--select-caret); background-position: right 12px center; background-size: 10px 6px; background-repeat: no-repeat; cursor: pointer; }
select:focus, input:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-soft); }
/* A field the browser filled in stays a field of this page: its own surface and ink, not the browser's pale blue. */
input:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: inset 0 0 0 100px var(--surface); }
input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px var(--surface), 0 0 0 3px var(--focus-soft); }
/* A field that cannot be changed now must not look like one waiting for input: faded, with no edge to click into. */
select:disabled, input:disabled, textarea:disabled { color: var(--muted); background-color: var(--surface-subtle); border-color: transparent; opacity: .6; cursor: not-allowed; }
:is(input, select, textarea)[aria-invalid="true"], .invalid, select.invalid, input.invalid, textarea.invalid { border-color: var(--red); }
:is(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklch, var(--red) 22%, transparent); }
textarea { width: 100%; min-height: 84px; padding-block: 9px; line-height: 1.5; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--action); cursor: pointer; }
input[type="color"] { width: 40px; height: 32px; padding: 2px; background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius-control); }
input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.field { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-width: 0; }
.field > input:not([type="checkbox"]):not([type="radio"]), .field > select, .field > textarea, .localized-field input, .localized-field textarea { width: 100%; min-width: 0; }
select { max-width: 100%; text-overflow: ellipsis; }
/* A list box shows its rows, not the dropdown chevron in the middle of them. */
select[multiple], select[size]:not([size="1"]) { padding-right: 10px; background-image: none; }
.field label { color: var(--label); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.field-label { color: var(--label); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.field small, .field-hint { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
.field .validation-message, .validation-message { color: var(--red); font-size: var(--text-xs); font-weight: 500; }
/* A hint that is telling somebody something is wrong, not describing a field. */
.field small.warning-text { color: var(--amber); }
.required-mark { margin-left: 2px; color: var(--red); }
label .optional { margin-left: 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 500; text-transform: lowercase; }
.compact-field { min-width: 220px; }
.align-end { align-self: end; }
.select-field { display: grid; gap: 6px; color: var(--label); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
/* The chosen value reads like every other field's, not like its 12 px label. */
.select-field select, .select-field input { color: var(--ink); font-size: var(--text-md); font-weight: 400; }
/* A label drawn as <label class="field"><span>…</span> looks like every other field label. */
label.field > span:first-child { color: var(--label); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.select-field select { min-width: 150px; }
.search-box { min-width: 220px; max-width: 520px; display: flex; flex: 1; align-items: center; gap: 8px; height: var(--control-md); padding: 0 11px; color: var(--muted); background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius-control); transition: border-color 120ms ease, box-shadow 120ms ease; }
.search-box:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus-soft); }
.search-box span { color: var(--subtle); font-size: 16px; }
.search-box input { align-self: stretch; width: 100%; min-height: 0; padding: 0; background: transparent; border: 0; outline: 0; box-shadow: none; }
.search-box input:focus { box-shadow: none; }
.inline-check { display: inline-flex; align-items: center; gap: 8px; color: var(--label); cursor: pointer; white-space: nowrap; }
.inline-check input { width: 16px; height: 16px; accent-color: var(--action); }
.toggle { display: inline-flex; align-items: flex-start; gap: 8px; color: var(--label); font-size: var(--text-sm); line-height: 1.4; cursor: pointer; }
/* A checkbox inside a field reads as a choice, not as the field's label (the .field label rule made it 13 px bold). */
.field label:is(.toggle, .toggle-field, .switch, .inline-check) { color: var(--ink); font-size: var(--text-md); font-weight: 400; }
.field label.toggle-field small { font-weight: 400; }
.toggle input[type="checkbox"], .inline-check input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: calc((1lh - 16px) / 2) 0 0; accent-color: var(--action); }
.toggle-field { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; cursor: pointer; }
/* The same 16 px box as every other choice on the page, centred on the label's first line. */
.toggle-field input { flex: none; width: 16px; height: 16px; margin: calc((1lh - 16px) / 2) 0 0; accent-color: var(--action); }
.toggle-field span { display: grid; gap: 2px; }
.toggle-field small { color: var(--muted); font-size: var(--text-xs); }
/* A switch: a real checkbox drawn as the toggle on a panel. */
.switch { display: inline-flex; align-items: center; gap: 10px; color: var(--label); font-size: var(--text-sm); cursor: pointer; }
/* Off is the field-edge tone of each theme and on is the action colour, so the two never read as two greys. */
/* The knob travels on a spring that settles without overshoot (apple-design), and a press widens it a touch
   toward where it is going, the way a finger leans on a real toggle. */
.switch input[type="checkbox"] { position: relative; flex: none; width: 36px; height: 22px; margin: 0; appearance: none; background: var(--border); border-radius: 999px; cursor: pointer; transition: background-color 160ms ease; }
.switch input[type="checkbox"]::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; content: ""; background: var(--surface); border-radius: 999px; box-shadow: 0 1px 2px oklch(0% 0 0 / .25); transition: transform 240ms var(--ease-spring), width 160ms var(--ease-out); }
.switch input[type="checkbox"]:active:not(:disabled)::after { width: 20px; }
.switch input[type="checkbox"]:checked:active:not(:disabled)::after { transform: translateX(10px); }
.switch input[type="checkbox"]:checked { background: var(--action); }
.switch input[type="checkbox"]:checked::after { background: var(--on-action); transform: translateX(14px); }
:root[data-theme="dark"] .switch input[type="checkbox"]:not(:checked) { background: oklch(36% 0.009 95); }
.switch input[type="checkbox"]:disabled { opacity: .45; }

/* Chips and presets: a quiet choice in a row. */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; color: var(--label); background: var(--surface-subtle); border: 1px solid var(--line-soft); border-radius: 6px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.chip.active { color: var(--ink); background: var(--surface); box-shadow: inset 0 0 0 1px var(--input-border); }

/* Tabs: an underline on the one in view, set on a hairline. */
.detail-tabs { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; gap: 22px; margin-bottom: 22px; padding: 0 2px; overflow-x: auto; scrollbar-width: thin; background: var(--canvas); border-bottom: 1px solid var(--border); scrollbar-width: none; }
.detail-tabs a, .detail-tabs .tab { position: relative; padding: 11px 0 12px; color: var(--muted); font-size: var(--text-md); font-weight: 500; text-decoration: none; white-space: nowrap; }
.detail-tabs a:hover { color: var(--ink); }
.detail-tabs a.active { color: var(--ink); font-weight: 600; }
/* The underline is its own 2 px bar (as on the area strip): an inset shadow left hairlines down a tab's sides at fractional widths. */
.detail-tabs :is(a, .tab)::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; content: ""; background: transparent; }
.detail-tabs :is(a.active, button.tab.active)::after { background: var(--ink); }
/* PUSH-1: a page's own tabs drawn as buttons — the push screen switches its parts without leaving the address. */
.detail-tabs button.tab { margin: 0; background: none; border: 0; cursor: pointer; }
.detail-tabs button.tab:hover { color: var(--ink); }
.detail-tabs button.tab.active { color: var(--ink); font-weight: 600; }
/* The rules hang their bullets on the panel's 20 px gutter, under the heading, and end on it. */
.push-rules { display: grid; gap: 6px; margin: 0 20px 20px; padding-left: 18px; color: var(--label); }
.push-field-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.push-emoji { position: relative; }
.push-emoji-toggle { min-width: 32px; min-height: 28px; padding: 2px 6px; font-size: 16px; line-height: 1; background: transparent; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.push-emoji-toggle[aria-expanded="true"] { background: var(--surface-hover); }
.push-emoji-panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; }
.push-emoji-panel emoji-picker {
    --background: var(--surface-raised); --border-color: var(--border); --border-radius: 12px;
    --button-hover-background: var(--surface-hover); --button-active-background: var(--surface-hover);
    --indicator-color: var(--action); --input-border-color: var(--input-border); --input-font-color: var(--ink);
    --input-placeholder-color: var(--muted); --category-font-color: var(--ink); --outline-color: var(--action);
    --num-columns: 8; --emoji-size: 1.5rem; height: 360px; box-shadow: var(--shadow);
}
@media (max-width: 640px) {
    /* A phone: a sheet along the bottom edge, as wide as the screen allows. */
    .push-emoji-panel { position: fixed; top: auto; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
    .push-emoji-panel emoji-picker { --num-columns: 7; --emoji-size: 1.35rem; width: 100%; height: min(360px, 60vh); }
}
.push-counter { justify-self: end; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.push-counter.over { color: var(--red); }
/* The preview as a lock-screen notice: the app's mark, its name and "now" on one line, then the words, cut where a phone cuts them. */
.push-preview { max-width: 420px; margin: 0; padding: 12px 14px 13px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-1); }
.push-preview-app { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; color: var(--muted); font-size: var(--text-xs); }
.push-preview-icon.brand-mark { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }
.push-preview-name { flex: 1; min-width: 0; overflow: hidden; color: var(--label); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.push-preview-time { flex: none; }
.push-preview strong { display: -webkit-box; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.push-preview p { display: -webkit-box; margin: 2px 0 0; overflow: hidden; color: var(--label); font-size: var(--text-sm); line-height: 1.4; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.push-preview-panel .push-preview { margin: 0 20px; max-width: none; }
.push-preview-panel .push-logo-hint { display: block; margin: 10px 20px 20px; color: var(--muted); font-size: var(--text-xs); }
.push-test-list { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.push-test-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* PUSH-UI: the four parts of push as a segmented plate under the section's own tabs; the delivery strip quiet above. */
.filter-bar.push-tabs { display: flex; width: fit-content; }
.push-delivery { margin-bottom: var(--space-5); }
.push-delivery span { color: var(--label); font-size: var(--text-sm); }
/* The automatic pushes: two cards a row on the page's own measure, each the same four bands. */
.push-automations { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); }
.push-automations > .push-auto { display: flex; flex-direction: column; margin: 0; }
.push-auto-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px 12px; }
.push-auto-head h2 { margin: 0; font-size: var(--text-lg); }
.push-auto-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); }
.push-auto-sample:not(.notif) { display: grid; gap: 2px; margin: 0 20px 16px; padding: 10px 12px; background: var(--surface-subtle); border: 1px solid var(--line-soft); border-radius: 12px; font-size: var(--text-sm); }
.push-auto-sample strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.push-auto-sample span { display: -webkit-box; overflow: hidden; color: var(--label); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.push-auto-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: auto 0 0; border-top: 1px solid var(--line-soft); }
.push-auto-stats > div { min-width: 0; padding: 12px 20px; }
.push-auto-stats > div + div { border-left: 1px solid var(--line-soft); }
.push-auto-stats dt { color: var(--muted); font-size: var(--text-xs); }
.push-auto-stats dd { margin: 2px 0 0; font-family: var(--font-figures); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.push-auto-stats dd small { color: var(--muted); font-family: var(--font-body, inherit); font-size: var(--text-xs); font-weight: 500; }
.push-auto-foot { display: flex; justify-content: flex-end; padding: 12px 20px; border-top: 1px solid var(--line-soft); }
/* A switch that is a button: one press turns the rule on or off, and it says which it is now. */
.switch-button { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: var(--control-sm); padding: 0 4px; color: var(--label); background: none; border: 0; border-radius: var(--radius-control); cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 600; }
.switch-track { position: relative; width: 36px; height: 22px; background: var(--border); border-radius: 999px; transition: background-color 160ms ease; }
.switch-track::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; content: ""; background: var(--surface); border-radius: 50%; box-shadow: 0 1px 2px oklch(0% 0 0 / .25); transition: transform 240ms var(--ease-spring); }
.switch-button[aria-checked="true"] { color: var(--ink); }
.switch-button[aria-checked="true"] .switch-track { background: var(--action); }
.switch-button[aria-checked="true"] .switch-track::after { background: var(--on-action); transform: translateX(14px); }
.switch-button:disabled { cursor: not-allowed; opacity: .5; }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }
/* The editors are pages: panels on the left, the preview beside them and kept in view. */
.push-editor-page .editor-side { position: sticky; top: var(--space-4); }
.push-editor-page .push-words { margin-top: 4px; }
.push-editor-page .form-section > .field, .push-editor-page .form-section > .toggle-field, .push-editor-page .form-section > .switch { margin-inline: 20px; }
.push-editor-page .form-section > .field { margin-bottom: 16px; }
.push-editor-page .form-section > .switch { margin-bottom: 16px; }
.push-name-panel { padding-top: 20px; }
.push-name-panel > .field:last-child { margin-bottom: 0; }
.push-period { margin: 0 0 10px; color: var(--muted); font-size: var(--text-sm); }
/* Fields whose labels run to two lines keep their boxes on one line along the row. */
.form-grid.push-aligned > .field { grid-template-rows: 1fr auto; align-content: end; }
.push-estimate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 20px 0; color: var(--label); font-size: var(--text-sm); }
.push-when { margin: 0 20px 16px; }
.push-send-at { max-width: 320px; }
.save-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.push-editor-bar { margin-top: var(--space-5); }
/* Stacked, the preview follows the words it shows rather than the first panel. */
@media (max-width: 1279px) {
    .push-editor-page .editor-side { position: static; }
    .push-editor-page .editor-main > :nth-child(2) { order: 0; }
}
/* A phone: the four parts two by two, never a word cut at the edge; the editor's keys full width with sending first;
   a campaign's figures two to a line instead of a column of six. */
@media (width <= 760px) {
    .filter-bar.push-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: visible; }
    .push-tabs .button { justify-content: center; }
    .push-editor-bar .save-bar-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin-left: 0; }
    .push-editor-bar .save-bar-actions .button { min-height: var(--control-lg); }
    .push-editor-bar .save-bar-actions .button.primary { grid-column: 1 / -1; order: -1; }
    .push-editor-bar .save-bar-actions .button:only-child { grid-column: 1 / -1; }
    .push-auto-stats > div { padding-inline: 14px; }
}
@container (width < 560px) {
    .card-table.push-table tr { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    .card-table.push-table td:first-child, .card-table.push-table td.row-actions { grid-column: 1 / -1; }
}
.platform-shell .detail-tabs { top: 56px; }
/* CON-1: a group's sections stand one under another, each clear of the sticky strip when it is scrolled to. */
.tenant-section + .tenant-section { margin-top: var(--space-5); }
.tenant-section { scroll-margin-top: 120px; }
/* The brand screen's surface switch: its name, the one-choice plate, and the way back to the shared theme. */
.theme-surfaces { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-5); }
.theme-surfaces-label { color: var(--label); font-size: var(--text-sm); font-weight: 600; }
.theme-surfaces .filter-bar { margin: 0; }
@media (hover: hover) { .theme-surfaces .filter-bar .button[aria-pressed="true"]:hover:not(:disabled) { color: var(--ink); background: var(--surface); border-color: var(--border); } }
/* A filter of one choice: a segmented plate, the chosen segment raised. */
.filter-bar { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; margin-bottom: 16px; padding: 3px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 10px; }
.filter-bar .button { min-height: 30px; padding: 0 12px; color: var(--muted); background: transparent; border-color: transparent; border-radius: 7px; box-shadow: none; font-size: var(--text-sm); font-weight: 500; }
@media (max-width: 1100px) { .filter-bar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .filter-bar .button { flex: none; } }
.filter-bar .button.primary, .filter-bar .button[aria-pressed="true"] { color: var(--ink); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-1); font-weight: 600; }
@media (hover: hover) { .filter-bar .button:hover:not(:disabled):not(.primary) { color: var(--ink); background: color-mix(in oklch, var(--surface) 55%, transparent); border-color: transparent; } .filter-bar .button.primary:hover { color: var(--ink); background: var(--surface); border-color: var(--border); } }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: var(--muted); border-top: 1px solid var(--border); font-size: var(--text-sm); }
.pagination div { display: flex; align-items: center; gap: 10px; }

/* ---------------------------------------------------------------------------------------- feedback
   Status reads as a lamp and a word, never the colour alone. Quiet when all is well; the exceptions
   take a fill. */
/* UI-2: a state is a lamp — a round light — and a word in that light's ink, on no plate of its own (the concept's
   .lamp). Waiting is the one that glows: its lamp carries a soft amber halo. */
.badge { display: inline-flex; align-items: center; gap: 7px; min-height: 22px; padding: 0; color: var(--label); background: transparent; border-radius: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.badge::before { flex: none; width: 8px; height: 8px; content: ""; background: var(--steel-400); border-radius: 50%; }
.badge.success { color: var(--green); background: transparent; }
.badge.success::before { background: var(--green-lamp); }
.badge.warning { color: var(--amber); background: transparent; }
.badge.warning::before { background: var(--amber-lamp); box-shadow: 0 0 0 3px var(--amber-soft); }
.badge.danger { color: var(--red); background: transparent; }
.badge.danger::before { background: var(--red-lamp); }
/* Optional and not done: a todo in a calm voice, never the lamp (Task 5C) — a hollow light. */
.badge.optional { color: var(--label); background: transparent; box-shadow: none; }
.badge.optional::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--steel-400); }
.badge.neutral { color: var(--muted); background: transparent; }
.badge.info { color: var(--label); background: transparent; }
.badge.info::before { background: var(--steel-500); }
.badge .icon { width: 13px; height: 13px; margin-left: -1px; }
.badge.gift-line::before { display: none; }
/* In a table a state is one plate on one line (a two-line «Готове до / видачі» reads as two things);
   a column too narrow for it widens, and the table scrolls. */
td .badge { white-space: nowrap; }
.version { padding: 2px 7px; color: var(--muted); background: var(--surface-subtle); border-radius: 6px; font-family: var(--font-mono); font-size: 11px; }
/* A label on a thing (Хит, Новинка, an allergen): a small steel plate — never a state. */
.tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; color: var(--label); background: var(--surface-subtle); border: 1px solid var(--line-soft); border-radius: 6px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.tag.amber { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.tag .icon { width: 13px; height: 13px; }

.alert { display: grid; gap: 2px; margin-bottom: 20px; padding: 12px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); line-height: 1.45; }
.alert strong { display: block; font-weight: 600; }
/* A key inside an alert keeps its own width instead of stretching across the page. */
.alert > :is(a.button, button.button, .button) { justify-self: start; margin-top: 6px; }
.alert small { display: block; margin-top: 2px; color: var(--muted); }
.alert.error, .alert.danger { background: var(--red-soft); border-color: var(--red-line); }
.alert.error strong, .alert.danger strong { color: var(--red); }
.alert.success { background: var(--green-soft); border-color: var(--green-line); }
.alert.success strong { color: var(--green); }
.alert.warning { background: var(--amber-soft); border-color: var(--amber-line); }
.alert.warning strong { color: var(--amber); }
.alert.info { background: var(--surface-subtle); }
.alert.compact { padding: 8px 11px; font-size: var(--text-sm); }
.alert ul { margin: 4px 0 0; padding-left: 18px; }
/* One problem is a sentence, not a list of one. */
.alert ul:has(> li:only-child) { padding-left: 0; list-style: none; }
/* A page-level alert while a dialog is open: the backdrop dims the page, so the error rendered in
   normal flow would be invisible exactly when it matters most. */
.alert.floating { position: fixed; top: 18px; left: 50%; z-index: var(--z-toast); width: min(680px, calc(100vw - 40px)); transform: translateX(-50%); box-shadow: var(--shadow-2); }
.conflict-alert { grid-template-columns: auto 1fr; }
.alert-actions { grid-column: 2; display: flex; gap: 8px; margin-top: 8px; }
.error-panel .alert { margin-bottom: 0; }
.error-copy { color: var(--muted); font-size: var(--text-xs); }
.alert small code { display: inline-block; max-width: 100%; overflow-wrap: anywhere; vertical-align: bottom; user-select: all; }

/* A toast rises from the edge it sits on and settles (apple-design: it comes from where it will go back to). */
.toast { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); max-width: min(440px, calc(100vw - 32px)); padding: 11px 16px; color: var(--steel-0); background: var(--steel-900); border-radius: 12px; box-shadow: var(--shadow-2); font-weight: 500; transition: opacity 180ms ease, transform 280ms var(--ease-spring); }
@starting-style { .toast { opacity: 0; transform: translateY(12px) scale(.98); } }
:root[data-theme="dark"] .toast { color: var(--steel-900); background: var(--steel-100); }
/* A copy the browser refused is said in the same place a successful one is, in the lamp's colour. */
.toast.warning { color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); }

.loading-state { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 220px; color: var(--muted); }
.page-loading { min-height: 55vh; }
.spinner { flex: none; width: 16px; height: 16px; border: 2px solid color-mix(in oklch, currentColor 30%, transparent); border-top-color: currentColor; border-radius: 50%; animation: spin .7s linear infinite; }
.spinner.dark { color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton-card, .skeleton-panel, .skeleton-row { overflow: hidden; position: relative; }
.skeleton-panel { min-height: 260px; }
.skeleton-line { display: block; width: 100%; height: 12px; margin: 6px 0; background: linear-gradient(90deg, var(--surface-subtle) 25%, var(--border) 50%, var(--surface-subtle) 75%); background-size: 200% 100%; border-radius: 3px; animation: shimmer 1.4s ease-in-out infinite; }
.skeleton-line.short { width: 45%; }
.skeleton-line.title { width: 280px; height: 26px; margin-bottom: 22px; }
.skeleton-row td { height: 52px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty-state { display: grid; justify-items: center; gap: 4px; padding: 72px 24px; text-align: center; }
.empty-state.compact { padding: 40px 20px; }
/* A load that answers quickly shows nothing at all: the spinner and its word fade in only after 350 ms, so a fast screen
   does not flash a loader and then jump to its content. */
.empty-state:has(> .spinner) { animation: loading-appear 180ms ease 350ms both; }
@keyframes loading-appear { from { opacity: 0; } }
.empty-state h1, .empty-state h2 { margin-bottom: 4px; font-size: var(--text-xl); }
.empty-state p { max-width: 460px; margin-bottom: 8px; }
.empty-icon { display: grid; place-items: center; min-width: 44px; height: 44px; margin-bottom: 12px; padding: 0 10px; color: var(--muted); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-large); font-weight: 600; }
.empty-icon .icon { width: 22px; height: 22px; }
.success-icon { color: var(--green); background: var(--green-soft); border-color: var(--green-line); }
.success-screen { display: grid; justify-items: center; padding: 52px 24px; text-align: center; }
.success-mark { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 15px; color: var(--steel-0); background: var(--green-lamp); border-radius: var(--radius-large); font-size: 24px; }
.success-mark .icon { width: 26px; height: 26px; }
.success-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dirty-indicator { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); font-size: var(--text-xs); font-weight: 600; }
.dirty-indicator::before { width: 7px; height: 7px; content: ""; background: var(--amber-lamp); border-radius: var(--radius-mark); }
.rate-limit { margin: 0; color: var(--amber); font-size: var(--text-sm); text-align: center; }
.retry-button { margin-bottom: 14px; }

/* ---------------------------------------------------------------------------------------- surfaces
   A work surface is white on the steel ground, edged by a hairline. No shadow: a panel sits on the
   bench, it does not float over it. Inside a panel there are rules, never another card. */
.panel { margin-bottom: var(--space-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.toolbar-panel { padding: 16px 20px; }
.tenant-toolbar .select-field select { min-width: 128px; }
.tenant-toolbar > .button.tertiary { margin-left: auto; }
.toolbar-panel > .saved-view-picker { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--line-soft); }
.toolbar { display: flex; align-items: flex-end; gap: 10px; }
.tenant-toolbar { flex-wrap: wrap; }
.tenant-toolbar .search-box { flex-basis: 280px; }
.audit-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 12px; }
.audit-toolbar > .field, .audit-toolbar > .select-field { min-width: 0; }
.audit-toolbar .select-field select { width: 100%; min-width: 0; }
.toolbar-actions { display: flex; gap: 8px; }
@media (max-width: 1280px) { .audit-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .audit-toolbar > .toolbar-actions { grid-column: 1 / -1; } }
@media (width <= 760px) { .audit-toolbar { grid-template-columns: minmax(0, 1fr); } }
.filter-bar.audit-presets { flex-wrap: wrap; overflow-x: visible; margin-bottom: 12px; }
.code-subline { padding: 0; color: var(--muted); background: none; border: 0; font-size: 11px; }
.audit-table { min-width: 980px; }
.audit-table td > strong { white-space: nowrap; }
.page-size select { min-width: 78px; }
.toolbar-meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 8px; color: var(--muted); font-size: var(--text-xs); }
.section-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; padding: 16px 20px 12px; }
.section-heading > div { min-width: 0; }
/* A heading with no hint lines its actions up with the title's centre. */
.section-heading:not(:has(> div:first-child > p, > div:first-child > small)) { align-items: center; }
/* The title takes the row; its actions keep their size and, when there is no room beside it, go under it. */
.section-heading > div:first-child { flex: 1 1 240px; }
/* An action group never shrinks below its keys: without room it goes under the title (and wraps its keys). */
.section-heading > :not(:first-child) { flex: 0 0 auto; max-width: 100%; }
.section-heading > .row-actions, .section-heading > .page-actions { flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.section-heading h2 { margin-bottom: 2px; }
.section-heading p { max-width: 72ch; margin-bottom: 0; font-size: var(--text-sm); }
.section-heading.padded { padding-bottom: 16px; }
.subsection { margin: 20px 20px 0; padding-top: 16px; border-top: 1px solid var(--border); }
.subsection .form-grid { padding: 0; }
/* An item a launch action scrolled to is outlined for a moment, so the eye lands where the fix is. */
.panel.focused { outline: 2px solid var(--ink); outline-offset: 2px; transition: outline-color 1.5s ease-in; }
.hint { color: var(--muted); font-size: var(--text-sm); }
/* Blocks placed straight in a panel keep the panel's 20 px inset like its headings and fields do. */
.panel > .alert, .panel.form-section > .alert { margin: 0 20px 16px; }
.panel > :is(.toggle-field, p.muted, p.hint):not(.padded-hint) { margin-inline: 20px; }
.padded-hint { margin-bottom: 0; padding: 10px 20px 0; }

/* ------------------------------------------------------------------------------------- UI-2 blocks
   The concept's shared blocks: a lamp and a word, the rows of what waits, the strip of figures, a panel's quiet
   link, bars, a breakdown. */
.lamp { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.lamp::before { flex: none; width: 8px; height: 8px; content: ""; background: var(--muted); border-radius: 50%; }
.lamp.wait { color: var(--amber); }
.lamp.wait::before { background: var(--amber-lamp); box-shadow: 0 0 0 3px var(--amber-soft); }
.lamp.ok { color: var(--green); }
.lamp.ok::before { background: var(--green-lamp); }
.lamp.fault { color: var(--red); }
.lamp.fault::before { background: var(--red-lamp); }
.lamp.idle { color: var(--muted); }
.panel-link { color: var(--muted); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.panel-link:hover { color: var(--ink); }
.today-date { margin-top: 2px; }
.today-branch-filter { margin: 0; }
.attention { overflow: hidden; }
.attention-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 20px; }
.attention-row + .attention-row { border-top: 1px solid var(--line-soft); }
.attention-icon { display: grid; place-items: center; width: 40px; height: 40px; color: var(--label); background: var(--surface-subtle); border-radius: 10px; }
.attention-icon .icon { width: 20px; height: 20px; }
.attention-icon.wait { color: var(--amber); background: var(--amber-soft); }
.attention-icon.fault { color: var(--red); background: var(--red-soft); }
.attention-icon.ok { color: var(--green); background: var(--green-soft); }
.attention-copy { min-width: 0; }
.attention-copy strong { display: block; font-weight: 600; }
.attention-copy span { display: block; color: var(--muted); font-size: var(--text-sm); }
.attention.calm .attention-row { grid-template-columns: 40px minmax(0, 1fr); }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; overflow: hidden; }
.kpi { min-width: 0; padding: 18px 20px; }
.kpi + .kpi { border-left: 1px solid var(--line-soft); }
.kpi dt { color: var(--muted); font-size: var(--text-sm); }
.kpi dd, .kpi dd.num { text-align: left !important; }
.kpi dd { margin: 6px 0 0; font-size: 27px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi dd > small { margin-left: 4px; }
.kpi dd small, .money-figure small { color: var(--label); font-size: .6em; font-weight: 600; letter-spacing: 0; }
.kpi .delta { margin-top: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.kpi .delta.up { color: var(--green); }
.today-day-note { margin: -8px 0 20px; color: var(--muted); font-size: var(--text-sm); }
.today-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); gap: 20px; align-items: stretch; }
.today-grid > .panel, .today-grid .stack > .panel { margin-bottom: 0; }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; min-width: 0; }
.chart-panel { display: flex; flex-direction: column; }
.chart { display: flex; flex: 1; flex-direction: column; padding: 4px 20px 18px; }
.chart-empty { justify-content: center; min-height: 176px; }
.chart-legend { display: flex; gap: 16px; color: var(--muted); font-size: 12.5px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 10px; height: 10px; background: var(--ink); border-radius: 3px; }
.chart-legend i.ghost { background: var(--border); }
.bars { display: grid; flex: 1; grid-template-columns: repeat(var(--hours, 13), minmax(0, 1fr)); align-items: end; gap: 6px; min-height: 176px; margin-top: 14px; }
.bar { position: relative; height: 100%; }
.bar i { position: absolute; bottom: 0; border-radius: 5px 5px 2px 2px; transform-origin: bottom; animation: bar-rise 520ms var(--ease-out) both; }
.bar .ghost { left: 8%; right: 8%; height: var(--g); background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--border); }
.bar .now { left: 26%; right: 26%; height: var(--t); background: var(--ink); animation-delay: 80ms; }
.bar.live .now { background: color-mix(in oklch, var(--ink) 55%, transparent); }
@keyframes bar-rise { from { transform: scaleY(0); } }
.hours { display: grid; grid-template-columns: repeat(var(--hours, 13), minmax(0, 1fr)); gap: 6px; margin-top: 8px; color: var(--muted); font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums; }
.hours .live { color: var(--ink); font-weight: 700; }
.branch-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 20px; }
.branch-row + .branch-row { border-top: 1px solid var(--line-soft); }
.branch-row:last-child { padding-bottom: 16px; }
.branch-row strong { display: block; font-weight: 600; }
.branch-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 3px; color: var(--muted); font-size: 12.5px; }
.branch-meta .lamp { font-size: 12.5px; }
.today-panel-foot { padding-bottom: 16px; }
.breakdown { display: grid; gap: 12px; padding: 0 20px 18px; }
.breakdown > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
.breakdown span { color: var(--label); }
.breakdown b { font-weight: 650; }
.breakdown i { grid-column: 1 / -1; width: var(--w); height: 4px; background: var(--ink); border-radius: 4px; opacity: .85; transform-origin: left; animation: bar-grow 520ms var(--ease-out) both; }
@keyframes bar-grow { from { transform: scaleX(0); } }
@media (max-width: 1000px) { .today-grid { grid-template-columns: minmax(0, 1fr); } }
.bar.single .now { left: 18%; right: 18%; }
/* A day of one's own choosing sits in the period plate as its last segment: a calendar mark that opens the picker. */
.filter-day { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; color: var(--muted); border: 1px solid transparent; border-radius: 7px; cursor: pointer; font-size: var(--text-sm); }
.filter-day .icon { width: 15px; height: 15px; }
.filter-day input { width: 128px; min-height: 0; height: 26px; padding: 0 4px; color: inherit; background: transparent; border: 0; box-shadow: none; font-size: var(--text-sm); }
.filter-day input:focus { box-shadow: none; }
.filter-day.chosen { color: var(--ink); background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-1); font-weight: 600; }
.reports-one-branch { color: var(--label); font-size: var(--text-sm); }
.reports-aside { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: -8px 2px 20px; color: var(--muted); font-size: var(--text-sm); }
.reports-aside b { color: var(--label); font-weight: 600; }
#reports-splits .section-heading + .breakdown { padding-top: 0; }
#reports-splits .section-heading:not(:first-child) { padding-top: 4px; }
@media (width <= 760px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kpi:nth-child(3) { border-left: 0; }
    .kpi:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
    .attention-row { grid-template-columns: 36px minmax(0, 1fr); padding-inline: 16px; }
    .attention-icon { width: 36px; height: 36px; }
    .attention-row > .button { grid-column: 2; justify-self: start; }
    .branch-row, .breakdown { padding-inline: 16px; }
    .chart { padding-inline: 16px; }
    .bars, .hours { gap: 3px; }
}

/* ------------------------------------------------------------------------------------------ tables
   Fixed columns; a row restyles in place when its state changes. Headings are sentence-case plates. */
.table-panel { overflow: hidden; }
.table-scroll { overflow-x: auto; }
/* A table in a panel starts and ends on the panel's 20 px inset, in line with its heading. */
@media (min-width: 761px) {
    .panel > .table-scroll :is(th, td):first-child, .panel > table :is(th, td):first-child { padding-left: 20px; }
    .panel > .table-scroll :is(th, td):last-child, .panel > table :is(th, td):last-child { padding-right: 20px; }
    /* The count under a list starts where its columns start. */
    .panel > .table-summary { padding-inline: 20px; }
}
/* A table wider than its panel says so, on every width: a soft edge on the side that has more, gone once scrolled to the end. */
.panel > .table-scroll[data-overflow] { background: linear-gradient(to left, var(--surface) 40%, transparent) right / 28px 100% no-repeat local, linear-gradient(to left, oklch(21.5% 0.008 95 / .10), transparent) right / 14px 100% no-repeat scroll; }
table { width: 100%; border-collapse: collapse; }
th { position: sticky; top: 0; z-index: 1; padding: 11px 16px; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--line-soft); font-size: 12.5px; font-weight: 600; text-align: left; white-space: nowrap; }
td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color 120ms ease; }
tbody tr:hover td { background: var(--surface-hover); }
tr.selected td, tr.selected:hover td { background: var(--surface-accent); }
tr.faded td { opacity: .55; }
.tenant-name { color: var(--ink); font-weight: 600; }
/* An identifier in a row's second line is for copying, not reading: it may be cut short so the row keeps its width. */
.subline { display: block; max-width: 320px; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.subline .copy-inline { max-width: 150px; }
.row-action { font-weight: 600; white-space: nowrap; }
a.row-action:not(.button) { text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: 3px; }
a.row-action:not(.button):hover { text-decoration-color: currentColor; }
.summary-cell { max-width: 280px; color: var(--muted); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.compact-table td { padding: 9px 10px; }
.compact-table th { padding: 8px 10px; }
.compact-table .subline { max-width: 230px; }
.compact-table .subline .copy-inline { max-width: 105px; }
.row-action-icon { padding-inline: 7px; font-size: 15px; line-height: 1; }
.row-actions { display: flex; gap: 8px; }
/* The actions column is as narrow as its keys and sits at the table's right edge. */
td.row-actions { display: table-cell; width: 1%; text-align: right; white-space: nowrap; }
td.row-actions > * + * { margin-left: 8px; }
/* A list wider than the screen keeps its actions in view: the last column pins to the right edge and the rest scrolls under it. */
.pinned-actions th:last-child, .pinned-actions td:last-child { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: -1px 0 0 var(--border); }
.pinned-actions th:last-child { z-index: 2; }
/* Nothing scrolls under a list that fits (platformAdminApi.tables), so its pinned column draws no rule. */
.table-scroll:not([data-overflow]) > .pinned-actions :is(th, td):last-child { box-shadow: none; }
.pinned-actions tbody tr:hover td:last-child { background: var(--surface-hover); }
.tenant-table td.tenant-cell { min-width: 240px; }
.tenant-table td.launch-cell { min-width: 170px; }
/* Narrower than the whole list: the columns the tenant's own page carries (catalogue, manifest, last change) step back,
   so what an operator scans — who, whether it is on, how it pays, whether it can launch — stays whole beside its keys. */
@media (max-width: 1599px) { .tenant-table :is(th, td):is(.col-catalog, .col-manifest, .col-updated) { display: none; } .tenant-table td.tenant-cell { min-width: 220px; } }
@media (max-width: 1100px) {
    .tenant-table thead { display: none; }
    .tenant-table, .tenant-table tbody { display: block; }
    .tenant-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .tenant-table td { display: block; padding: 0; border: 0; }
    .tenant-table td:not(.tenant-cell, .status-cell, .launch-cell, .actions-cell) { display: none; }
    .tenant-table td.tenant-cell { grid-column: 1; grid-row: 1; min-width: 0; }
    .tenant-table td.status-cell { grid-column: 1; grid-row: 2; }
    .tenant-table td.launch-cell { grid-column: 1; grid-row: 3; min-width: 0; }
    .tenant-table td.actions-cell { grid-column: 2; grid-row: 1 / span 3; align-self: center; position: static; background: transparent; box-shadow: none; }
    .panel > .table-scroll > .tenant-table td:is(:first-child, :last-child) { padding: 0; }
    .tenant-table tbody tr:hover :is(td, td:last-child) { background: none; }
    .tenant-table tbody tr:hover { background: var(--surface-hover); }
}
.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.table-toolbar input[type="search"] { max-width: 320px; }
.table-summary { margin: 0; padding: 10px 14px; color: var(--muted); font-size: var(--text-xs); border-top: 1px solid var(--border); }
.data-table td, .data-table th { padding-inline: 12px; }
.plain-list { margin: 0; padding: 0; list-style: none; }
:root[data-density="compact"] td { padding-block: 7px; }
:root[data-density="compact"] th { padding-block: 7px; }
:root[data-density="compact"] .metric { padding: 12px 14px; }

/* -------------------------------------------------------------------------------------- figures
   The quiet facts: one strip, divided by hairlines, figures on the grid. */
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-bottom: var(--space-5); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
/* The last figure is the launch state, a phrase rather than a number: its column takes what the phrase needs. */
@media (min-width: 1200px) { .metric-grid.five { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(max-content, 1.25fr); } .metric-grid.five > :last-child .badge { white-space: nowrap; } }
@media (max-width: 1100px) { .metric-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1199px) { .metric-grid.five:has(> :nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .metric-grid.five:has(> :nth-child(5)) > * { grid-column: span 2; } .metric-grid.five:has(> :nth-child(5)) > :nth-child(n+4) { grid-column: span 3; } }
@media (width <= 760px) { .metric-grid.five > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Every figure draws its own right and bottom rule; the panel's edge clips the ones on the outside. */
.metric { min-width: 0; container-type: inline-size; padding: 16px 18px; color: var(--ink); background: var(--surface); box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
.metric span, .metric small { display: block; color: var(--muted); font-size: var(--text-xs); }
.metric strong { display: block; margin: 4px 0 2px; overflow: hidden; color: var(--ink); font-family: var(--font-figures); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.metric .badge { display: inline-flex; width: fit-content; max-width: 100%; white-space: normal; line-height: 1.3; text-align: left; }
a.metric { text-decoration: none; }
.metric-link { display: block; transition: background-color 120ms ease; }
.metric-link:hover { color: var(--ink); background: var(--surface-hover); }
.metric-grid.mini { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 16px 0; }
.panel > .section-heading + .metric-grid.mini { margin-top: 0; }
.panel > .metric-grid.mini:last-child { margin-bottom: 0; border-bottom: 0; }
.metric strong.metric-na { color: var(--muted); font-family: var(--font-ui); font-size: var(--text-md); font-weight: 500; }
/* A state in a figure's place is a lamp and a word, set at body size (cc-07). */
.metric strong:has(> .badge) { overflow: visible; font-family: var(--font-ui); font-size: var(--text-md); font-weight: 500; white-space: normal; }
.metric-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* A phone: the debt, which can be several currencies, gets the whole row; the two counts share the next. */
@media (width <= 760px) { .metric-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-grid.three > :first-child { grid-column: 1 / -1; } }
/* A figure per currency: the lines of one metric stack without the figure's own top gap. */
.metric strong + strong { margin-top: 0; }
@container (max-width: 240px) { .metric strong { font-size: clamp(17px, 10cqi, 24px); } }
/* Inside a panel the figures are a ruled strip across it, never a box in a box. */
.panel .metric-grid { border-width: 1px 0; border-radius: 0; }
.dashboard-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
@media (max-width: 1100px) { .dashboard-grid { grid-template-columns: minmax(0, 1fr); } }
.dashboard-grid > .panel { margin-bottom: 0; }
div.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
div.detail-grid > .panel { margin-bottom: 0; }
@media (max-width: 1279px) { div.detail-grid { grid-template-columns: minmax(0, 1fr); } .detail-tabs { gap: 18px; } }
@media (max-width: 900px) { .platform-shell .detail-tabs { position: static; } }
/* The facts of one record: the name, then its value, on two columns that line up. */
dl.detail-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0 0 16px; }
dl.detail-grid dt { color: var(--muted); font-size: var(--text-sm); }
dl.detail-grid dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.definition-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0 20px 16px; }
.definition-list div { min-width: 0; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.definition-list dt { color: var(--muted); font-size: var(--text-xs); }
.definition-list dd { margin: 2px 0 0; overflow-wrap: anywhere; font-weight: 500; }
/* An unset value never reads like a value. */
.not-set { color: var(--subtle); font-weight: 400; }
#tenant-features > .flag-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; padding: 4px 20px 0; }
#tenant-features > .flag-row > .toggle { align-items: center; min-height: 40px; border-bottom: 1px solid var(--line-soft); }
#integration-readiness td:last-child { color: var(--muted); font-size: var(--text-sm); }
.launch-requirement { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
/* An inline editor's keys stand clear of its panel's edge; its fields stop at a readable width. */
.panel > form:last-child > fieldset:last-child > .form-actions:last-child { padding-bottom: 20px; }
.edit-panel .form-grid, .edit-panel .form-actions { max-width: 1040px; }
/* The JSON section opens like a section, with its own key. */
.form-actions + .json-details { margin: 16px 20px 20px; }
.json-details > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.json-details > summary::-webkit-details-marker { display: none; }
.json-details > summary .icon { transition: transform 150ms var(--ease-out); }
.json-details[open] > summary .icon { transform: rotate(90deg); }
.json-details > .json-view { margin-top: 10px; }
/* Name and state stay close (columns of 260-370 px, as many as fit); the bottom row draws no rule of its own
   (the clip takes the last pixel of the box, so the space under it is a margin); a form section pads its own foot. */
.flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; margin-bottom: 16px; padding: 0 20px; clip-path: inset(0 0 1px 0); }
.form-section > .flag-grid:last-child { margin-bottom: 0; }
.flag-grid div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.flag-grid strong { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.manifest-list, .review-list { padding: 0 20px 16px; }
.manifest-list div, .review-list div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.manifest-list span, .review-list span { color: var(--muted); }
.manifest-list span { font-family: var(--font-mono); font-size: var(--text-sm); }
.policy { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.policy span { color: var(--muted); font-size: var(--text-xs); }
/* Objects of the same kind side by side (branches). Inside a panel they are outlined, not raised. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; padding: 0 20px 20px; }
.card-grid.bare { margin-bottom: var(--space-5); padding: 0; }
.branch-card { display: grid; align-content: start; gap: 12px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
/* Inside a panel the branches are rows under hairlines, never cards in a card. */
.panel .card-grid { gap: 0 24px; }
.panel .branch-card { padding: 14px 0; background: transparent; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; }
.branch-card h2 { margin-bottom: 0; font-size: var(--text-lg); }
.branch-card p { margin: 0; }
.branch-card > small { color: var(--muted); }
.dense-cards .branch-card { min-height: 200px; }
/* A branch keeps one card size however many branches there are: empty tracks stay, cards are panels 20 px apart. */
.branch-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 20px; padding: 0; }
.branch-card > .row-actions { margin-top: 4px; }
/* Side by side, the cards share one height; their keys share one line at the foot instead of following each card's text. */
.branch-grid > .branch-card { display: flex; flex-direction: column; }
.branch-grid > .branch-card > .row-actions { margin-top: auto; padding-top: 4px; }
/* The facts read as one row from the left, each as wide as its words (not two half-card columns); a narrow card wraps them. */
.branch-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.branch-facts dt { color: var(--muted); font-size: var(--text-xs); }
.branch-facts dd { margin: 0; font-size: var(--text-sm); font-weight: 600; }
/* NAV-1: what belongs to a branch, on its own card — rows on the card's hairlines, not a box in a box.
   Each opens the screen on this branch only. */
.branch-parts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.branch-parts > li { border-bottom: 1px solid var(--line-soft); }
.branch-parts a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 44px; margin-inline: -8px; padding: 6px 8px; color: var(--ink); font-size: var(--text-md); font-weight: 500; text-decoration: none; border-radius: var(--radius-control); transition: background-color 120ms ease; -webkit-tap-highlight-color: transparent; }
.branch-parts a:hover { color: var(--ink); background: var(--surface-hover); }
.branch-parts a > .icon:first-child { width: 18px; height: 18px; color: var(--subtle); }
.branch-parts a > .nav-row-go { width: 14px; height: 14px; color: var(--subtle); }
.branch-parts small { color: var(--muted); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: right; }
/* The screen is showing one branch: which, the way back, and the way to all of them. */
.branch-scope { display: grid; gap: 2px; margin-bottom: var(--space-4); }
.branch-scope > .back-link { justify-self: start; margin-bottom: 6px; }
.scope-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0; padding: 8px 12px; color: var(--label); background: var(--surface-subtle); border-radius: var(--radius-control); font-size: var(--text-sm); }
.scope-note strong { color: var(--ink); font-weight: 600; }
.scope-note a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }
/* The branch editor: the coordinates are one pair with one hint under both; the switches are a grid of their own. */
.coordinate-pair { display: grid; align-content: start; gap: 6px; }
.cabinet-dialog .coordinate-pair > .form-grid { padding: 0; }
.branch-switches > .field > .toggle-field { padding-block: 0; }
.activity-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.activity-list article > div { min-width: 0; display: grid; }
.activity-list article > div span { color: var(--muted); font-size: var(--text-xs); }
.activity-list article > div strong { overflow-wrap: anywhere; }
.diagnostics-strip { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) auto; align-items: center; gap: 22px; padding: 16px 20px; }
.diagnostics-strip > div { min-width: 0; display: grid; }
.diagnostics-strip > div:first-child { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; }
.diagnostics-strip > div > div { display: grid; min-width: 0; }
.diagnostics-strip span, .diagnostics-strip small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.connectivity-value.connected { color: var(--green); }
.connectivity-value.degraded { color: var(--amber); }
.connectivity-value.disconnected { color: var(--red); }

/* A note inside a panel: set on the steel, no second border. */
.notice-card { margin: 0 20px 16px; padding: 12px 14px; background: var(--surface-subtle); border-radius: var(--radius-control); }
.notice-card p { margin: 3px 0 0; }
.limitation-list { display: flex; gap: 8px; padding: 0 20px 20px; flex-wrap: wrap; }
/* What the manifest will never do: a fact of the product, not a fault (CD-16). */
.limitation-list span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; color: var(--label); background: var(--surface-subtle); border-radius: 4px; font-size: var(--text-xs); font-weight: 600; }
.limitation-list .icon { width: 13px; height: 13px; color: var(--muted); }
.panel-subhead { margin: 4px 20px 0; padding-bottom: 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; border-bottom: 1px solid var(--line-soft); }
details { margin: 0 20px 20px; }
summary { color: var(--ink); cursor: pointer; font-weight: 600; }
summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.json-view { max-height: 350px; overflow: auto; padding: 14px; color: var(--steel-100); background: var(--steel-950); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: 11px; }
.technical-wrap { font-family: var(--font-mono); font-size: 11px; }
.version-note, .support-text { color: var(--muted); font-size: var(--text-xs); }

/* Platform diagnostics and a person's settings: facts in two columns of panels. */
.diagnostic-grid, .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-5); }
.settings-grid > * { min-width: 0; }
.diagnostic-grid > .panel, .settings-grid > .panel { margin-bottom: 0; }
.diagnostic-card { padding: 18px 20px; }
.diagnostic-card h2 { margin-bottom: 12px; }
.diagnostic-card dl { display: grid; gap: 0; margin: 0; }
.diagnostic-card dl div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.diagnostic-card dt { color: var(--muted); }
.diagnostic-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.diagnostic-card .status-dot { margin-right: 7px; }
.diagnostic-card dd code { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
@media (max-width: 1280px) { .diagnostic-grid { grid-template-columns: minmax(0, 1fr); } }
@media (width <= 760px) { .diagnostic-card dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.diagnostic-actions, .danger-zone { padding-bottom: 20px; }
.diagnostic-actions .form-actions { flex-wrap: wrap; padding-top: 4px; }
.sanitized-notice { display: flex; align-items: flex-start; gap: 10px; }
.sanitized-notice > .icon { margin-top: 2px; }
.settings-section { min-height: 145px; padding: 18px 20px; }
.settings-section h2 { margin-bottom: 14px; }
.settings-fields { display: grid; gap: 14px; max-width: 440px; }
.settings-fields .selector-field, .settings-fields .select-field { display: grid; gap: 5px; color: var(--label); font-size: var(--text-sm); font-weight: 600; }
.settings-fields select { width: 100%; min-width: 0; }
.settings-fields .inline-check { color: var(--ink); font-size: var(--text-md); font-weight: 500; }
.settings-actions { display: flex; gap: 8px; padding: 0 20px; flex-wrap: wrap; }

/* First steps, for a console nobody has used yet. */
.onboarding-panel { overflow: hidden; }
.onboarding-count { margin: 0 20px 6px; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.onboarding-progress { height: 6px; margin: 0 20px 12px; overflow: hidden; background: var(--line-soft); border-radius: 3px; }
.onboarding-progress span { display: block; height: 100%; background: var(--green-lamp); border-radius: inherit; }
.onboarding-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0 20px 16px; list-style: none; }
.onboarding-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 40px; padding: 4px 0; border-bottom: 1px solid var(--line-soft); }
.onboarding-list button { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; color: var(--ink); background: transparent; border: 0; cursor: pointer; text-align: left; }
.onboarding-list button .icon { color: var(--subtle); }
.onboarding-list li.complete button .icon { color: var(--green); }
.onboarding-list li.complete button { color: var(--muted); text-decoration: line-through; }

/* ----------------------------------------------------------------------------- the console's tools */
.modal-backdrop { position: fixed; inset: 0; z-index: var(--z-overlay); display: grid; align-items: start; justify-items: center; padding: min(7vh, 64px) 20px 20px; background: oklch(16.5% 0.007 95 / .55); transition: opacity 180ms ease; }
@starting-style { .modal-backdrop { opacity: 0; } }
.command-palette, .shortcut-dialog { width: min(100%, 640px); overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow-3); }
/* The palette (apple-design): it opens near the top, where the eye already is, settling from a touch smaller;
   it is a material over a dimmed page. */
.palette-backdrop { align-items: flex-start; padding-top: min(14vh, 120px); }
.command-palette { display: flex; flex-direction: column; max-height: min(560px, calc(100dvh - 2 * min(14vh, 120px))); transform-origin: 50% 0; animation: palette-in 220ms var(--ease-out); }
@keyframes palette-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--border); }
.palette-input > .icon { width: 18px; height: 18px; color: var(--muted); }
.palette-input input { flex: 1; min-height: 32px; padding: 0; background: transparent; border: 0; box-shadow: none; font-size: 15px; }
.palette-input input::-webkit-search-cancel-button { display: none; }
.palette-input input:focus { box-shadow: none; }
.palette-results { flex: 1; min-height: 0; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scroll-padding-block: 8px; }
.cabinet-search .palette-results { max-height: none; }
.palette-group { padding: 10px 11px 4px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.cabinet-search .palette-command { justify-content: flex-start; gap: 12px; padding: 7px 10px; text-align: left; }
.palette-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; color: var(--label); background: var(--surface-subtle); border-radius: var(--radius-control); }
.palette-mark .icon { width: 17px; height: 17px; }
.palette-copy { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.palette-copy strong { font-weight: 600; }
.palette-copy small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
.palette-area { flex: none; color: var(--muted); font-size: var(--text-xs); }
.palette-command.selected .palette-mark { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--border); }
.palette-foot { display: flex; gap: 16px; padding: 9px 15px; color: var(--muted); background: var(--surface-subtle); border-top: 1px solid var(--line-soft); font-size: var(--text-xs); }
.palette-foot span { display: inline-flex; align-items: center; gap: 4px; }
.palette-foot kbd { min-height: 18px; padding: 0 5px; background: var(--surface); }
@media (pointer: coarse) { .palette-foot { display: none; } }
.palette-command { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer; text-align: left; }
.palette-command.selected, .palette-command:hover { background: var(--surface-accent); }
.shortcut-list { display: grid; margin: 0; padding: 0 20px 20px; }
.shortcut-list div { display: grid; grid-template-columns: 120px 1fr; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.shortcut-list dd { margin: 0; color: var(--muted); }
.saved-view-picker { display: flex; align-items: end; gap: 8px; flex-wrap: wrap; }
.saved-view-picker .select-field select { min-width: 220px; }
.saved-view-editor { display: flex; align-items: end; gap: 8px; flex: 1 0 100%; padding-top: 8px; border-top: 1px solid var(--border); }
.saved-view-editor .field { min-width: min(320px, 100%); }
.drop-zone { display: grid; place-items: center; min-height: 120px; margin: 0 20px 18px; padding: 20px; color: var(--muted); background: var(--surface-subtle); border: 1px dashed var(--input-border); border-radius: var(--radius-surface); text-align: center; transition: background-color 150ms ease, border-color 150ms ease; }
.drop-zone.dragging { color: var(--ink); background: var(--surface-accent); border-color: var(--ink); }
.import-panel .import-actions { padding-top: 0; }
.print-summary { display: none; }

/* The audit trail: a row that opens its own detail underneath, the diff read left to right. */
.expand-button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: var(--label); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
.expand-button:hover { color: var(--ink); border-color: var(--input-border); }
.expand-button .icon { width: 14px; height: 14px; transition: transform 160ms var(--ease-out); }
.expand-button[aria-expanded="true"] .icon { transform: rotate(90deg); }
.audit-detail-row td { padding: 0 18px 16px; background: var(--surface-subtle); }
.audit-detail-row:hover td { background: var(--surface-subtle); }
.audit-detail { padding: 14px 0 0; }
.audit-detail dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; margin: 0 0 12px; }
.audit-detail dl div { display: grid; }
.audit-detail dt { color: var(--muted); font-size: var(--text-xs); }
.audit-detail dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.diff-list { padding: 0 20px; }
.diff-row { display: grid; grid-template-columns: 130px 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.diff-row .before { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--red); }
.diff-row .after { color: var(--ink); font-weight: 600; }
.diff-arrow { display: inline-flex; color: var(--subtle); }
.compact-diff { padding: 0; }
.compact-diff .diff-row { grid-template-columns: 160px 1fr auto 1fr; }
.preview-box { margin: 0 20px 20px; padding-bottom: 16px; background: var(--surface-subtle); border-radius: var(--radius-surface); }
.creation-preview { margin: 0; }

/* ------------------------------------------------------------------------------------------ dialogs
   A dialog is a sheet laid on the bench: it settles in (scale .97 → 1, 200 ms), its blocks spaced by
   one gap, its action row kept in view while the form scrolls. */
.cabinet-dialog { width: min(680px, 100%); max-height: 86vh; overflow-y: auto; display: grid; align-content: start; gap: 18px; padding: 22px 0 0; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow-3); overscroll-behavior: contain; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
/* One column that never grows past the dialog: a wide table or a long word inside scrolls or wraps instead of
   widening the sheet past a phone's edge (the product editor was 450 px wide on a 390 px screen). */
.cabinet-dialog { grid-template-columns: minmax(0, 1fr); }
/* A long form scrolls on a hairline bar: the full-width one with arrows sat on the sheet's rounded edge. */
.cabinet-dialog { scrollbar-width: thin; scrollbar-color: color-mix(in oklch, var(--ink) 22%, transparent) transparent; }
/* The close key centres on the title's line, not on the title and its hint together. */
.cabinet-dialog > .section-heading > .icon-button, .cabinet-dialog > form > .section-heading > .icon-button { margin-block: -6px; margin-right: -8px; }
@starting-style { .cabinet-dialog { opacity: 0; transform: scale(.97) translateY(6px); } }
/* The way out mirrors the way in (platformAdminApi: the leaving copy), a little quicker: an exit is a reply, not an event. */
.modal-backdrop.leaving { pointer-events: none; animation: backdrop-leave 160ms ease forwards; }
.modal-backdrop.leaving .cabinet-dialog { animation: sheet-leave 160ms var(--ease-out) forwards; }
@keyframes backdrop-leave { to { opacity: 0; } }
@keyframes sheet-leave { to { opacity: 0; transform: scale(.97) translateY(6px); } }
@keyframes sheet-down { to { transform: translateY(100%); } }
/* A sheet holding unsaved changes answers a stray click by giving a little and settling back, not by vanishing. */
.cabinet-dialog.resist { animation: sheet-resist 300ms var(--ease-out); }
@keyframes sheet-resist { 40% { transform: scale(1.012); } }
@keyframes sheet-resist-down { 35% { transform: translateY(14px); } }
.cabinet-dialog > form { display: grid; gap: 18px; }
.cabinet-dialog .form-grid, .cabinet-dialog .flag-row, .cabinet-dialog .settings-actions { padding-inline: 24px; }
.cabinet-dialog .form-section { display: grid; gap: 12px; padding-bottom: 0; }
.cabinet-dialog .form-section > .section-heading { padding-bottom: 0; }
/* A section of a dialog is headed like a section (16 px), so it never reads as one more field label. */
.cabinet-dialog .form-section > .section-heading h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.cabinet-dialog .form-section + .form-section { padding-top: 18px; border-top: 1px solid var(--line-soft); }
.cabinet-dialog .toggle { color: var(--ink); font-size: var(--text-md); }
.cabinet-dialog .flag-row { gap: 10px 18px; }
.cabinet-dialog .form-grid > p.muted { margin: 0; }
/* -1 px: at a fractional sheet height a sticky 0 left a hairline of the scrolling form showing under the bar. */
.cabinet-dialog > .form-actions:last-child, .cabinet-dialog > form > .form-actions:last-child { position: sticky; bottom: -1px; z-index: 2; margin-top: 4px; padding: 14px 24px 16px; flex-wrap: wrap; justify-content: flex-end; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-large) var(--radius-large); }
.cabinet-dialog > :last-child:not(.form-actions) { padding-bottom: 22px; }
.cabinet-dialog.wide { width: min(920px, 100%); }
.cabinet-dialog .section-heading { padding: 0 24px; }
/* Anything else a dialog holds directly keeps the dialog's inset (a fieldset, a field, a note, a list of facts). */
.cabinet-dialog > :is(p, .field, fieldset:not(.dialog-group), .toggle-field, .notice-card, .push-preview, .push-logo-hint) { margin-inline: 24px; }
.cabinet-dialog > p { margin-block: 0; }
.cabinet-dialog > .definition-list { padding-inline: 24px; }
.cabinet-dialog > .section-heading h2 { margin: 0; font-size: var(--text-xl); }
.cabinet-dialog table { width: 100%; }
.cabinet-dialog .server-side { display: grid; gap: 10px; margin: 0 24px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-surface); background: var(--surface-subtle); }
.cabinet-dialog .server-side legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; color: var(--label); font-size: var(--text-xs); font-weight: 600; }
.cabinet-dialog .server-side p { margin: 0; font-size: var(--text-sm); }
.cabinet-dialog .alert { margin: 0 24px; padding: 12px 16px; font-size: var(--text-sm); }
.cabinet-dialog .form-section > p.validation-message { margin: 6px 24px 0; }
@media (width <= 760px) { .cabinet-dialog .form-section > p.validation-message { margin-inline: 16px; } }
.cabinet-dialog .alert ul { margin: 0; padding-left: 18px; }
.cabinet-dialog .form-section > p.hint { margin: 0 24px; color: var(--muted); font-size: var(--text-sm); }
.cabinet-dialog .form-section > p.hint a, .cabinet-dialog .form-section > .alert a { margin-left: 6px; font-weight: 600; }
.cabinet-dialog .form-section > .alert.warning { margin: 0 24px; }
/* A table in a dialog keeps the dialog's gutter, its first and last columns in line with the fields above. */
.cabinet-dialog .table-scroll { margin-inline: 24px; }
.cabinet-dialog .table-scroll :is(th, td):first-child { padding-left: 0; }
.cabinet-dialog .table-scroll :is(th, td):last-child { padding-right: 0; }
/* The step with no way back stands apart from Save and Cancel: at the footer's other end. */
.cabinet-dialog .form-actions > :is(.danger-ghost, .button.destructive:not(.solid)) { order: -1; margin-right: auto; }
/* A question before a step with no way back: the facts between the question and the buttons. */
.confirm-dialog { width: min(520px, 100%); }
.confirm-dialog .confirm-facts { margin: 0 24px; }
.confirm-dialog .form-actions { justify-content: flex-end; }
/* POSTER-6: moving to another Poster account - the two accounts, then what moving does, then the one choice. */
.poster-account-change-facts { display: grid; gap: 10px; }
.poster-account-change-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; overflow-wrap: anywhere; }
.poster-account-change-line small { color: var(--muted); font-size: var(--text-sm); }
.poster-account-change-effects { margin: 0; padding-left: 20px; color: var(--label); line-height: 1.5; }
.poster-account-change-effects li + li { margin-top: 4px; }
.poster-account-change-facts .hint { margin: 0; }
.poster-summary > span { display: block; margin-top: 2px; color: var(--label); font-size: var(--text-sm); font-weight: 400; }
/* A group of related controls in a dialog: the legend set as a field label, the rows under hairlines, the total last. */
.cabinet-dialog > fieldset.dialog-group { display: grid; gap: 0; margin: 0 24px; }
.dialog-group > legend { margin-bottom: 6px; padding: 0; color: var(--label); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.plan-product { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: calc(var(--control-md) + 12px); padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.plan-product .switch { color: var(--ink); font-size: var(--text-md); }
.money-input { display: inline-flex; align-items: center; gap: 8px; }
.money-input input { width: 120px; text-align: right; font-variant-numeric: tabular-nums; }
.money-input > span { min-width: 3ch; color: var(--muted); font-size: var(--text-sm); font-weight: 500; }
.dialog-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 10px 0 0; color: var(--label); font-size: var(--text-sm); }
.dialog-total strong { color: var(--ink); font-size: var(--text-md); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The tenant takes the row; its three-letter currency sits beside it. */
.form-grid.tenant-currency { grid-template-columns: minmax(0, 1fr) 112px; }

/* ------------------------------------------------------------------------------------------- forms
   Label above, help under it, the error under that; sections divided by a rule, never boxed. */
.form-section { padding-bottom: 20px; }
.form-grid { display: grid; gap: 16px; padding: 0 20px; }
/* A panel with no heading starts on its own 20 px, and two grids in one panel keep the grid's own gap. */
.panel.form-section > .form-grid:first-child { padding-top: 20px; }
.panel.form-section > .form-grid + .form-grid { margin-top: 16px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid > * { min-width: 0; }
/* A single column of fields in a wide panel stops at a readable width instead of running 1400 px. */
.panel .form-grid:not(.two, .three, .four) > .field { max-width: 720px; }
.span-two { grid-column: span 2; }
.span-three { grid-column: span 3; }
.field > small { line-height: 1.45; }
/* A switch that stands in a column of fields sits on the line of the controls beside it, not on the line of their labels. */
.form-grid.three > .field > .toggle:first-child, .form-grid.four > .field > .toggle:first-child { min-height: var(--control-md); margin-top: 22px; }
.form-grid.three > .field.span-three > .toggle:first-child, .form-grid.four > .field.span-three > .toggle:first-child { min-height: 0; margin-top: 0; }
.form-grid > .field > p.hint:only-child { max-width: 72ch; margin: var(--space-2) 0 calc(-1 * var(--space-2)); }
.field select { font: inherit; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 20px 20px 0; }
/* Last in a panel, the keys stand clear of its edge. */
.panel:not(.form-section) > .form-actions:last-child, .panel:not(.form-section) > form:last-child > .form-actions:last-child, .panel:not(.form-section) > .section-body:last-child > .form-actions:last-child { padding-bottom: 20px; }
/* A quiet key that opens a row lines its word up with the text above it; its hover plate reaches out. */
:is(.settings-actions, .panel .form-actions, .form-section > .form-actions) > .button.tertiary:first-child { margin-left: -14px; }
/* On a phone these rows wrap, so a quiet key often starts a line of its own: its words line up with the edge, not its plate. */
@media (width <= 760px) { :is(.diagnostic-actions .form-actions, .saved-view-picker, .import-actions) > .button.tertiary { margin-left: -14px; } }
/* A panel that is saved on its own answers underneath its own button. */
.section-status { padding: 14px 20px 0; }
.section-status .alert { margin-bottom: 0; }
.section-status .alert + .alert { margin-top: 10px; }
.edit-panel { border-color: var(--input-border); }
.localized-field { display: grid; gap: 12px 16px; }
.localized-label { color: var(--label); font-size: var(--text-sm); font-weight: 600; }
.localized-field .field label { color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.flag-row { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 0 20px; }
.reason-field { margin: 18px 20px 0; }
.confirmation-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 20px 0; padding: 12px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; }
.confirmation-check input { width: 18px; height: 18px; accent-color: var(--action); }
.validation-summary { grid-template-columns: auto 1fr; column-gap: var(--space-4); }
.validation-summary div { display: grid; gap: 4px; }
.validation-summary button { padding: 0; color: var(--red); background: none; border: 0; cursor: pointer; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
.validation-summary button { min-height: 24px; }
@media (width <= 760px) { .alert.validation-summary { grid-template-columns: 1fr; } }

/* The creation wizard: numbered steps on one hairline; the current one in ink, a done one ticked. */
.wizard-steps { position: relative; display: flex; gap: 2px; margin-bottom: 18px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.wizard-steps > span { flex: 1; padding: 8px 10px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.wizard-steps > span.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.wizard-steps button { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; min-width: 0; padding: 10px 10px 11px; color: var(--muted); background: transparent; border: 0; cursor: pointer; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.wizard-steps button .step-key { display: grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--input-border); border-radius: 4px; font-size: 11px; }
.wizard-steps button:hover:not(:disabled) { color: var(--ink); }
.wizard-steps button.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.wizard-steps button.active .step-key { color: var(--on-action); background: var(--action); border-color: var(--action); }
.wizard-steps button.complete { color: var(--label); }
.wizard-steps button.complete .step-key { color: var(--steel-0); background: var(--green-lamp); border-color: var(--green-lamp); }
.wizard-steps button:disabled { cursor: not-allowed; opacity: .6; }
@media (max-width: 1599px) { .wizard-steps button:not(.active) .step-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.step-number { display: inline-grid; place-items: center; float: left; width: 26px; height: 26px; margin-right: 10px; color: var(--ink); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; font-weight: 700; }
/* The bar that travels with the screen is a material (apple-design): frosted surface over the page that scrolls
   under it, a long soft shadow, the lamp of whether there is anything to save, and the key at the end. */
.wizard-footer { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 10px 10px 10px 18px; background: color-mix(in oklch, var(--surface) 86%, transparent); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-2); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
.wizard-footer span { color: var(--muted); font-size: var(--text-xs); }
.wizard-footer .lamp { font-size: var(--text-sm); }
.save-bar .save-dirty, .save-bar[data-dirty] .save-clean { display: none; }
.save-bar[data-dirty] .save-dirty { display: inline-flex; color: var(--amber); }
@media (prefers-reduced-transparency: reduce) { .wizard-footer { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.langs { margin: 0; }
.langs .dot { width: 6px; height: 6px; background: var(--amber-lamp); border-radius: 50%; }
.localized-field.single { display: contents; }
.where-sold { display: grid; padding: 0 20px 6px; }
.where-sold-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px auto; align-items: center; gap: 16px; padding: 10px 0; }
.where-sold-row + .where-sold-row { border-top: 1px solid var(--line-soft); }
.where-sold-row strong { font-weight: 600; }
.where-sold-row .input-affix input { min-height: 34px; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; color: var(--label); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: var(--text-sm); font-weight: 600; transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform var(--press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.toggle-chip:active:not(:disabled) { transform: scale(.96); }
.toggle-chip[aria-pressed="true"] { color: var(--on-action); background: var(--action); border-color: var(--action); }
.toggle-chip:disabled { cursor: not-allowed; opacity: .5; }
.editor-side .toggles, .toggles.editor-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
#product-allergens { padding: 0 20px 20px; }
.template-bar { display: grid; grid-template-columns: auto minmax(160px, 240px) auto; justify-content: start; align-items: center; gap: 12px 16px; padding: 14px 20px; }
@media (max-width: 1100px) { .template-bar { grid-template-columns: minmax(0, 1fr) auto; } .template-bar > div { grid-column: 1 / -1; } }
.template-bar > div { display: grid; }
.template-bar span { color: var(--muted); font-size: var(--text-xs); }

/* The hours editor: one week, one row a day, the times on a grid. */
.schedule-grid { margin: 0 20px 20px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-surface); }
.schedule-head, .schedule-row { display: grid; grid-template-columns: minmax(120px, 1fr) 80px 150px 150px; align-items: center; gap: 12px; padding: 8px 12px; }
.schedule-head { color: var(--muted); background: var(--surface-subtle); font-size: var(--text-xs); font-weight: 600; }
.schedule-row { border-top: 1px solid var(--line-soft); }
.schedule-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--action); }

/* Launch readiness: the verdict first, then every check under its group, each marked with a symbol
   and a word, so a missing requirement never depends on its colour. */
.launch-verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 20px 16px; padding: 12px 14px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.launch-verdict .badge { min-height: 26px; padding: 0 10px 0 9px; font-size: var(--text-sm); }
.launch-verdict p { flex: 1 1 260px; margin: 0; color: var(--ink); font-weight: 600; }
.launch-verdict small { color: var(--muted); }
.launch-verdict[data-launch-state="Blocked"] { background: var(--red-soft); border-color: var(--red-line); }
.launch-verdict[data-launch-state="Ready"] { background: var(--green-soft); border-color: var(--green-line); }
#launch-blockers { margin: 0 20px 16px; }
#launch-summary .badge { font-size: var(--text-xs); }
.launch-group { padding: 0 20px 8px; }
.launch-group h3 { margin: 12px 0 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.launch-checks { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.launch-check { display: grid; grid-template-columns: 26px 1fr; gap: 0 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.launch-check.neutral { opacity: .8; }
.launch-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--muted); background: var(--surface-subtle); border-radius: 4px; font-size: 12px; font-weight: 700; }
.launch-mark .icon { width: 14px; height: 14px; }
.launch-check.danger .launch-mark { color: var(--steel-0); background: var(--red-lamp); }
.launch-check.warning .launch-mark { color: var(--steel-950); background: var(--amber-lamp); }
.launch-check.optional .launch-mark { color: var(--label); background: transparent; box-shadow: inset 0 0 0 1.5px var(--input-border); }
.launch-check.success .launch-mark { color: var(--steel-0); background: var(--green-lamp); }
.launch-check.info .launch-mark { color: var(--label); background: var(--surface-subtle); box-shadow: inset 0 0 0 1px var(--border); }
.launch-body { min-width: 0; }
.launch-body .title-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.launch-message { margin: 4px 0 2px; }
.launch-meta { display: block; color: var(--muted); font-size: var(--text-xs); }
.launch-not-blocked { display: block; margin-bottom: 2px; color: var(--green); font-size: var(--text-xs); font-weight: 600; }
/* A platform override beside the published contact it replaces for customers (Task 5C). */
.contact-override { display: block; margin-top: 2px; color: var(--amber); font-size: var(--text-xs); font-weight: 600; }
.launch-body .row-action { display: inline-block; margin-top: 6px; }
/* A launch check's action is a button, not a link, because it may open a cabinet session. */
button.row-action.launch-action { padding: 0; color: var(--ink); background: none; border: 0; font-family: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: 3px; }
button.row-action.launch-action:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.launch-unavailable { display: block; margin-top: 4px; color: var(--muted); font-size: var(--text-xs); }

/* Checkout money in the tenant wizard: the field beside its effective value. */
.checkout-money .effective-value { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding-bottom: 6px; }
.checkout-money .effective-value span { color: var(--muted); font-size: var(--text-xs); }
.checkout-money .effective-value strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.checkout-summary { padding-bottom: 8px; }
.checkout-summary + .hint { padding: 0 20px 16px; color: var(--muted); }

/* The owner's invitation link, shown once: wide enough for the token to wrap, plain enough to copy by hand. */
.invitation-box { width: 100%; max-width: 720px; margin: 16px auto 4px; padding: 16px 18px; text-align: left; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.invitation-box h3 { margin: 0 0 6px; }
.invitation-box p { margin: 0 0 8px; }
.invitation-box .invitation-link code { display: block; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: 12px; word-break: break-all; user-select: all; }
.invitation-box .form-actions { justify-content: flex-start; margin-top: 8px; padding: 0; }
/* As a panel of its own (the administrators' page) the box stands in the page's column like every panel, and its
   heading keeps the box's inset instead of adding the panel heading's on top of it. */
.panel.invitation-box { max-width: none; margin: 0 0 20px; padding: 0 20px 18px; }
.panel.invitation-box > .section-heading { padding-inline: 0; }

/* The catalogue sheet and its photographs: issues first, the marks readable at a glance. */
.catalogue-import-actions { flex-wrap: wrap; gap: 10px; }
.catalogue-import .hint { margin: 6px 20px 0; }
.catalogue-report { margin: 14px 20px 0; }
.catalogue-problems, .catalogue-preview { width: calc(100% - 40px); margin: 14px 20px 0; font-size: var(--text-sm); }
.catalogue-problems td, .catalogue-preview td { vertical-align: top; }
.catalogue-problems tr.problem-error td:first-child { color: var(--red); font-weight: 600; }
.catalogue-problems tr.problem-warning td:first-child { color: var(--amber); font-weight: 600; }
.catalogue-images .metric-grid.mini { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin: 14px 0; }
.catalogue-images .form-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-inline: 0; }
.catalogue-images-rows { display: grid; gap: 0; margin: 12px 0 4px; padding: 0; list-style: none; font-size: var(--text-sm); border-top: 1px solid var(--line-soft); }
.catalogue-images-rows li { display: flex; align-items: baseline; gap: 8px; padding: 7px 4px; border-bottom: 1px solid var(--line-soft); }
.catalogue-images-rows li code { font-size: 12px; word-break: break-all; }
.catalogue-images-rows li small { color: var(--muted); }
.catalogue-images-rows li[data-row-state="Missing"] .row-mark, .catalogue-images-rows li[data-row-state="Unused"] .row-mark { color: var(--amber); }
.catalogue-images-rows li[data-row-state="Ambiguous"] .row-mark, .catalogue-images-rows li[data-row-state="Invalid"] .row-mark, .catalogue-images-rows li[data-row-state="Failed"] .row-mark { color: var(--red); }
.catalogue-images-rows li[data-row-state="Ambiguous"], .catalogue-images-rows li[data-row-state="Invalid"], .catalogue-images-rows li[data-row-state="Failed"] { background: var(--red-soft); }
.catalogue-images-rows li[data-row-state="Missing"], .catalogue-images-rows li[data-row-state="Unused"] { background: var(--amber-soft); }
.catalogue-images-rows li[data-row-state="Uploaded"] .row-mark, .catalogue-images-rows li[data-row-state="Replaced"] .row-mark, .catalogue-images-rows li[data-row-state="AlreadyPresent"] .row-mark { color: var(--green); }
.row-mark { display: inline-block; min-width: 14px; font-weight: 700; text-align: center; }
.upload-progress { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; padding: 10px 12px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: var(--text-sm); }
.upload-progress .button { margin-left: auto; }

/* ------------------------------------------------------------------------------- cabinet editors */
/* A role is a choice about a person's day: a row with a sentence, the chosen one outlined in ink. */
.role-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; padding: 0 24px; }
.role-card { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); cursor: pointer; transition: border-color 120ms ease, background-color 120ms ease; }
.role-card:hover { background: var(--surface-hover); border-color: var(--input-border); }
.role-card.chosen { background: var(--surface-subtle); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.role-card input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--action); }
/* minmax(0,1fr), not auto: a column sized to its content would make the sentence as wide as it likes. */
.role-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.role-copy strong { color: var(--ink); font-size: var(--text-md); font-weight: 600; }
.role-copy small { color: var(--muted); font-size: var(--text-xs); line-height: 1.45; white-space: normal; }
.role-summary { margin: 0 24px; padding: 12px 14px; background: var(--surface-subtle); border-radius: var(--radius-surface); }
.role-summary p { margin: 0; color: var(--ink); font-size: var(--text-sm); }
.role-summary p.muted { color: var(--muted); font-size: var(--text-xs); }
.role-summary ul { margin: 7px 0; padding-left: 18px; color: var(--muted); font-size: var(--text-xs); line-height: 1.55; }
.role-summary ul + p.muted { margin-top: 0; }
.role-scope { margin: 0; padding: 0 24px; line-height: 1.45; }
/* The people lists (staff, stations, couriers, promo codes). A name keeps its chip beside it, and a chip that is not a
   state carries no lamp. The e-mail under a name sets the floor of the name's column, up to 240 px (a longer address is
   cut, whole in its tooltip), so names stop breaking at every hyphen and the list still fits a laptop; the branches
   cell keeps a readable measure. An inner block's min and max widths count in the cell's own; the cell's would not. */
.name-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.name-line > .badge::before { display: none; }
#staff-table .subline { max-width: 240px; }
/* A wide screen has the room the laptop lacks: a long e-mail is read whole rather than from its tooltip. */
@media (min-width: 1280px) { #staff-table .subline { max-width: 420px; } }
.staff-branches { display: block; min-width: 100px; max-width: 300px; }
/* An expired code fades, but its pinned key stays solid: a see-through sticky cell would show the row scrolling under it. */
.promo-table tr.faded td:last-child { opacity: 1; }
.promo-expired { margin-left: 8px; }
/* The notice after making this browser a station: its key keeps its own width under the sentence. */
#station-enrolled > .button { justify-self: start; margin-top: 8px; }
/* A branch name that runs to two lines keeps its box on the first line, not between the two. */
.branch-flags .toggle { align-items: flex-start; }
.branch-flags .toggle > input[type="checkbox"] { margin-top: calc((1lh - 16px) / 2); }
.empty-state > .stations-pin-note { margin: 12px 0 0; }
/* KIOSK-1: an activation code is read off this screen and typed on a tablet across the room. */
.kiosk-code { margin: var(--space-4) 0; padding: var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-surface); background: var(--surface-subtle); color: var(--ink); font-family: var(--font-figures); font-size: calc(var(--text-xl) * 1.6); font-weight: 700; letter-spacing: 0.14em; text-align: center; user-select: all; }
/* Asked of the table's own panel, not the window: six columns get 822 px at 1140 px and 962 px at 1280 px beside the rail. */
.table-scroll:has(> .card-table) { container-type: inline-size; }
@container (width < 560px) {
    /* A phone: one card per row, each value under its heading, the row's keys across its foot. */
    .card-table thead { display: none; }
    .card-table, .card-table tbody { display: block; }
    .card-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
    .card-table tr:last-child { border-bottom: 0; }
    .card-table :is(td, td:last-child) { position: static; padding: 0; background: none; border: 0; box-shadow: none; }
    .card-table tbody tr:hover :is(td, td:last-child) { background: none; }
    .card-table tbody tr:hover { background: var(--surface-hover); }
    #staff-table .subline { max-width: none; }
    .card-table td[data-label]::before { display: block; margin-bottom: 2px; content: attr(data-label); color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
    .card-table td.num { text-align: left !important; }
    .card-table td.row-actions { display: flex; flex-wrap: wrap; gap: 8px; width: auto; padding-top: 6px; white-space: normal; }
    .card-table td.row-actions > * + * { margin-left: 0; }
    .card-table td.row-actions .button { flex: 1 1 auto; min-height: var(--control-lg); }
    .card-table td:empty { display: none; }
}
/* Beside the rail on a tablet or a 1140 px laptop the columns no longer fit: each row is a card too — the name and its keys on the
   first line, then its facts side by side, each under its heading — instead of columns scrolling under the keys. */
@container (560px <= width < 720px) {
    .card-table thead { display: none; }
    .card-table, .card-table tbody { display: block; }
    .card-table tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 28px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
    .card-table tr::after { order: 1; flex-basis: 100%; height: 0; content: ""; }
    .card-table tr:last-child { border-bottom: 0; }
    .card-table :is(td, td:last-child) { position: static; padding: 0; background: none; border: 0; box-shadow: none; }
    .card-table tbody tr:hover :is(td, td:last-child) { background: none; }
    .card-table tbody tr:hover { background: var(--surface-hover); }
    .card-table td:first-child { flex: 1 1 260px; min-width: 0; align-self: center; }
    .card-table td.row-actions { order: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; width: auto; margin-left: auto; }
    .card-table td.row-actions > * + * { margin-left: 0; }
    /* Facts on one even measure, so every row's «Address» stands over the next row's instead of after its name. */
    .card-table td[data-label] { order: 2; flex: 1 1 150px; max-width: 220px; min-width: 0; overflow-wrap: anywhere; }
    /* A figure under its heading lines up with the heading, not with a right edge that is no longer a column. */
    .card-table td.num { text-align: left !important; }
    .card-table td[data-label]::before { display: block; margin-bottom: 2px; content: attr(data-label); color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
    .card-table td:empty { display: none; }
    #staff-table .subline { max-width: none; }
    .panel > .table-scroll > .card-table td:is(:first-child, :last-child) { padding: 0; }
}

.modifier-group .section-heading { padding: 14px 20px 8px; }
.option-list { display: grid; gap: 0; margin: 0; padding: 0 20px 16px; list-style: none; }
.option-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
.option-list li:last-child { border-bottom: 0; }
.option-list li.unavailable { color: var(--muted); text-decoration: line-through; }
.product-modifiers { display: flex; flex-direction: column; gap: 10px; }
.product-modifiers .section-heading, .cabinet-dialog .product-modifiers .section-heading { padding: 0; align-items: flex-start; }
.modifier-summary { padding: 12px 14px; background: var(--surface-subtle); border-radius: var(--radius-surface); }
.modifier-summary .option-list { padding: 8px 0 0; }
.modifier-summary .hint { margin: 2px 0 0; }
/* The groups of one product side by side, each as wide as a list of options reads (across the whole page an option
   and its surcharge sat 1,400 px apart); a surcharge is a figure that never breaks before its currency. */
.modifier-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 20px; align-items: start; margin-bottom: var(--space-5); }
.modifier-groups > .panel { margin-bottom: 0; }
.option-list li > span:last-child { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* In a wide dialog a text kept in two languages sits side by side: one row per text, not one per language. The title
   stays in the first column so the columns nobody fills fold away. */
@media (min-width: 761px) {
    .cabinet-dialog.wide .form-grid > .localized-field { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .cabinet-dialog.wide .form-grid > .localized-field > .localized-label { grid-row: 1; grid-column: 1; }
    .cabinet-dialog.wide .form-grid > .localized-field:has(> .localized-label) > .field { grid-row: 2; }
}
/* The product editor's photographs and modifiers keep the dialog's inset like its fields; their titles are section titles. */
.cabinet-dialog .form-section > :is(.product-images, .product-modifiers) { padding-inline: 24px; }
.cabinet-dialog :is(.product-images, .product-modifiers) h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
/* The branches a dish is sold at: the switch centred under its heading, the price a figure under its own. */
.product-branches .branch-on-sale { width: 1%; text-align: center; }
.product-branches .branch-price { width: 1%; text-align: right; }
.product-branches .branch-price input { width: 132px; text-align: right; font-variant-numeric: tabular-nums; }
/* A modifier group's yes-or-no on a row of its own, then its two numbers, each as wide as a number. */
.cabinet-dialog > .modifier-required { padding-block: 0; }
.modifier-required input { margin-left: 0; }
.modifier-required strong { color: var(--ink); font-size: var(--text-md); font-weight: 600; }
.form-grid.modifier-limits { grid-template-columns: repeat(2, minmax(0, 200px)); }
.modifier-limits > .validation-message { grid-column: 1 / -1; margin-top: -8px; }
.cabinet-dialog .form-section > p.modifier-options-error { color: var(--red); font-size: var(--text-xs); font-weight: 500; }
/* The options of a group: a row each with every control on one line, a name box per language under its language. */
.option-table th.option-available, .option-table td.option-available { width: 1%; text-align: center; }
.option-table td.option-name input { width: 100%; min-width: 140px; }
.option-table .option-price { width: 132px; }
.option-table .option-price input { width: 100%; min-width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
/* A: a dish's variants — the add-on options' table, and the per-branch prices folded under it. */
.variant-branches { margin-top: 12px; }
.variant-branches > summary { cursor: pointer; font-weight: 500; }
.variant-branches .branch-price { white-space: nowrap; }
.variant-branches .branch-price input[type="text"] { width: 96px; margin-inline-start: 8px; text-align: right; font-variant-numeric: tabular-nums; }

/* On a wide screen the column heading names each box; the label beside it speaks to a screen reader until the row is a card. */
.option-cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (width <= 760px) {
    .cabinet-dialog .form-section > :is(.product-images, .product-modifiers, .product-variants) { padding-inline: 16px; }
    .cabinet-dialog > label.toggle-field.modifier-required { margin-inline: 16px; }
    .product-branches th { white-space: normal; }
    .product-branches .branch-price input { width: 96px; }
    /* A phone: an option per card, its names across the top, then its surcharge, whether it is on sale and its remove key. */
    .option-table thead { display: none; }
    .option-table table, .option-table tbody { display: block; }
    .option-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 10px 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
    .option-table tbody tr:last-child { border-bottom: 0; }
    .option-table td, .option-table td.row-actions { display: grid; gap: 6px; width: auto; min-width: 0; padding: 0; border: 0; }
    .option-table td.row-actions { padding-bottom: 2px; }
    .option-table td.option-name { grid-column: 1 / -1; }
    .option-table td.option-name input { min-width: 0; }
    .option-table .option-price { width: auto; }
    .option-table td.option-available .toggle { align-items: center; min-height: var(--control-md); }
    .option-cell-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; color: var(--label); font-size: var(--text-xs); font-weight: 500; line-height: 1.3; }
    .option-table .toggle .option-cell-label { color: var(--ink); font-size: var(--text-md); font-weight: 400; }
}

/* The zones list: the zone's name keeps the width to be read; figure headings wrap over their right-aligned figures. */
.zones-table th { vertical-align: bottom; }
.zones-table th.num { white-space: normal; min-width: 88px; }
.zones-table td:first-child { min-width: 200px; }
.zones-table td:nth-child(2) { min-width: 160px; }
.table-scroll:has(> .zones-table) { container-type: inline-size; }
/* Seven columns need ~1040 px: the table's own room decides, so 1140 px beside the rail gets cards too. */
@container (width < 1040px) {
    .zones-table thead { display: none; }
    .zones-table, .zones-table tbody { display: block; }
    .zones-table tr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 24px; padding: 14px 20px; border-bottom: 1px solid var(--line-soft); }
    .zones-table tr:last-child { border-bottom: 0; }
    .zones-table :is(td, td:first-child, td:nth-child(2), td:last-child) { position: static; min-width: 0; padding: 0; background: none; border: 0; box-shadow: none; text-align: left !important; }
    .zones-table tbody tr:hover :is(td, td:last-child) { background: none; }
    .zones-table tbody tr:hover { background: var(--surface-hover); }
    .panel > .table-scroll > .zones-table td:is(:first-child, :last-child) { padding: 0; }
    .zones-table td:first-child { flex: 1 1 calc(100% - 160px); align-self: center; }
    .zones-table td.row-actions { order: 1; width: auto; }
    .zones-table td[data-label] { order: 2; }
    .zones-table td[data-label]::before { display: block; margin-bottom: 2px; content: attr(data-label); color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
}
/* A phone: the name and its key, then the facts on two even columns, so each heading stands over the one below it. */
@container (width < 560px) {
    .zones-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px; gap: 10px 16px; }
    .zones-table td:first-child { grid-column: 1; }
    .zones-table td.row-actions { grid-column: 2; justify-self: end; align-self: center; }
}
/* Delivery zones: the map, and the corners it is drawn from beside it, on the dialog's 24 px gutter. */
.zone-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 260px); gap: 16px; padding: 0 24px; }
/* Leaflet's panes and controls (z-index 200-1000) stay inside the map, under the dialog's sticky footer. */
.zone-map { position: relative; z-index: 0; isolation: isolate; height: 340px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-surface); }
/* The count heads the list, the list takes what the map leaves, and the manual entry sits at the map's foot. */
.zone-points { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-content: start; gap: 12px; }
.zone-points ol { max-height: 220px; overflow-y: auto; margin: 0; padding-left: 22px; color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.zone-points li { padding: 2px 0; }
/* Both levels are grid items: the field in the column, the row in the field; each may shrink. */
.zone-points > .field { min-width: 0; }
.zone-points .row-actions { gap: 8px; min-width: 0; }
.zone-vertex { width: 14px; height: 14px; border-radius: 50%; background: var(--steel-900); border: 2px solid white; box-shadow: 0 0 0 1px oklch(21.5% 0.008 95 / .45); cursor: grab; }
.leaflet-drag-target .zone-vertex, .zone-vertex:active { cursor: grabbing; }
.zone-points .row-actions input { min-width: 0; flex: 1 1 auto; }
.zone-points .row-actions .button { flex: 0 0 auto; }
@media (max-width: 1100px) { .zone-split { grid-template-columns: minmax(0, 1fr); } }
@media (width <= 760px) { .zone-split { padding-inline: 16px; } }

/* Order rules: four panels of short settings. A figure's field is not a paragraph wide, a switch's hint
   keeps a reading measure, and a toggle in a field is spaced by the field, not by its own padding. */
.order-rules-panel > .form-grid { max-width: 1040px; }
.order-rules-panel .form-grid > .field > .toggle-field { padding-block: 0; }
/* A switch beside a labelled field sits on that field's box, not on its label (a phone stacks them). */
@media (min-width: 761px) {
    .order-rules-panel .form-grid.three > .field:not(.span-three) > .toggle-field:only-child { align-items: center; min-height: var(--control-md); margin-top: 22px; }
    .order-rules-panel .form-grid.three > .field:not(.span-three) > .toggle-field:only-child > input { margin-top: 0; }
}
.order-rules-panel .toggle-field small { max-width: 64ch; }
.order-rules-panel .field > .flag-row { padding: 0; gap: 8px 24px; }
.order-rules-panel .field > p.muted { margin: 0; }
/* Each zone's own minimum: the name, and its amount at the end of a short line. */
.zone-minimums { display: grid; max-width: 480px; margin: 0; padding: 0; list-style: none; }
.zone-minimums li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
.zone-minimums li:first-child { padding-top: 0; }
.zone-minimums li:last-child { border-bottom: 0; }

/* Identity and branch inputs: optional marks read as such, the map is a picture of the stored numbers. */
.time-zone-field select { margin-top: 6px; font-size: var(--text-sm); }
.time-zone-field select option { padding: 4px 6px; }
.branch-location { margin: 16px 0 0; }
.panel > .branch-location { margin-top: 0; }
.panel > .branch-location .branch-map, .panel > .branch-location .location-status { margin-inline: 20px; }
.branch-location .section-heading { margin-bottom: 8px; }
.branch-map { position: relative; z-index: 0; isolation: isolate; height: 320px; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.branch-location[data-map-state="unavailable"] .branch-map { display: none; }
.location-status { margin: 8px 0 4px; font-size: var(--text-sm); }
.location-status.is-unset { color: var(--amber); font-weight: 600; }
.location-status.is-set { color: var(--muted); }
.location-actions { display: flex; align-items: flex-end; }
.identity-summary { margin-bottom: 12px; }

/* CRM-1: the customers list — search above, dense rows, the name a link with the phone under it — and a customer's page. */
.customers-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4); }
.customers-search > .field { flex: 1 1 320px; max-width: 520px; }
.customer-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.customer-name:hover { text-decoration: underline; }
.customers-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.customer-header .name-line { margin-top: 4px; color: var(--muted); }
.customer-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.customer-columns > .panel { margin: 0; }
.facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; padding: 0 20px 20px; }
.facts dt { color: var(--muted); font-size: var(--text-sm); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.customer-addresses { display: grid; gap: 10px; margin: 0; padding: 0 20px 20px; list-style: none; }
.customer-addresses .subline { max-width: none; white-space: normal; }
@media (width <= 1100px) { .customer-columns { grid-template-columns: minmax(0, 1fr); } }
@media (width <= 760px) { .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .facts dd + dt { margin-top: 8px; } }
/* The brand: colours as swatches beside their values, pictures at the shape the apps draw them. */
/* Presets fill the existing editor. Preview labels stay in the cabinet's own ink. */
.preset-editor { display: grid; gap: var(--space-3); padding: 0 20px; max-width: 880px; }
.preset-editor > .field { max-width: 440px; }
.preset-description { margin: 0; max-width: 72ch; color: var(--muted); font-size: var(--text-sm); }
.preset-previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.preset-preview { min-width: 0; margin: 0; }
.preset-preview figcaption { margin-bottom: var(--space-2); color: var(--label); font-size: var(--text-sm); font-weight: 600; }
/* The sample is the business's own light or dark screen, whatever theme the cabinet wears: a colour not chosen yet
   stands in from that sample's steel (the --steel-* scale is the same in both cabinet themes), never from the cabinet's. */
.preset-canvas.light { --sample-page: var(--steel-50); --sample-panel: var(--steel-100); --sample-card: var(--steel-0); --sample-ink: var(--steel-900); --sample-muted: var(--steel-600); --sample-button: var(--steel-150); }
.preset-canvas.dark { --sample-page: var(--steel-950); --sample-panel: var(--steel-900); --sample-card: var(--steel-800); --sample-ink: var(--steel-50); --sample-muted: var(--steel-400); --sample-button: var(--steel-700); }
.preset-canvas { padding: 16px; background: var(--preview-page, var(--sample-page)); border: 1px solid var(--line-soft); border-radius: var(--radius-surface); }
.preset-sample-panel { display: grid; gap: 12px; padding: 14px; background: var(--preview-panel, var(--sample-panel)); border-radius: var(--radius-surface); }
.preset-sample-title { color: var(--preview-ink, var(--sample-ink)); font-size: var(--text-sm); font-weight: 600; }
.preset-sample-card { display: grid; gap: 8px; padding: 14px; color: var(--preview-ink, var(--sample-ink)); background: var(--preview-card, var(--sample-card)); border-radius: var(--radius-surface); font-size: var(--text-sm); }
.preset-sample-caption { color: var(--preview-muted, var(--sample-muted)); font-size: var(--text-xs); }
.preset-sample-action { justify-self: start; padding: 8px 12px; color: var(--preview-button-ink, var(--sample-ink)); background: var(--preview-button, var(--sample-button)); border-radius: var(--radius-control); font-weight: 600; }
.preset-load-error > p { margin-top: 0; }
@media (width <= 600px) { .preset-previews { grid-template-columns: minmax(0, 1fr); } }
.brand-basics > .form-grid { max-width: 760px; }
.logo-field { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: start; gap: var(--space-4); max-width: 760px; margin-bottom: var(--space-4); padding: 0 20px; }
/* Level with the address box: below the label's line (13 px × 1.3) and the field's 6 px gap. */
.logo-field > .brand-mark { margin-top: 0; }
/* The palette in families, each under its own name; a hairline between families, never a card. */
.color-group, .badge-group { min-width: 0; margin: 0; padding: 0 20px; border: 0; }
.badge-group + .badge-group { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
.color-group + .color-group { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
.color-group > legend, .badge-group > legend { float: left; width: 100%; margin: 0 0 var(--space-3); padding: 0; color: var(--ink); font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--space-3) var(--space-4); padding: 0 20px; }
.color-group > .color-grid { clear: both; padding: 0; }
.color-field label { overflow-wrap: anywhere; }
/* BRANDING-1: the browser's own picker is the swatch (a real control, Tab then Enter or Space), the hex code beside it, reset last. */
.color-control { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.color-control > .color-hex { flex: 1 1 auto; width: 100%; min-width: 0; font-variant-numeric: tabular-nums; }
.color-pick { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; cursor: pointer; opacity: 0; }
.color-pick:disabled { cursor: not-allowed; }
.color-chip:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.color-reset { display: inline-grid; flex: none; place-items: center; width: var(--control-md); height: var(--control-md); padding: 0; color: var(--label); background: transparent; border: 1px solid transparent; border-radius: var(--radius-control); cursor: pointer; }
.color-reset:hover:not(:disabled) { color: var(--ink); background: var(--surface-subtle); }
/* Nothing to go back to: the key keeps its place, so the row does not shift as colours change. */
.color-reset:disabled { visibility: hidden; }
.color-field.is-invalid .color-hex { border-color: var(--red); }
.color-note { margin: 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; }
/* The badges: the preview on the theme's card colour, its two colours, the contrast it reads at. */
/* Clears the floated legend, as .color-grid does: a grid beside a 100% float is pushed out of the panel sideways. */
.badge-rows { display: grid; clear: both; gap: var(--space-4); }
.badge-row { display: grid; grid-template-columns: 136px repeat(2, minmax(0, 1fr)) minmax(132px, 0.8fr); align-items: start; gap: var(--space-3) var(--space-4); }
.badge-sample { display: grid; place-items: center; min-height: 58px; padding: var(--space-2); background: var(--sample-bg, var(--surface)); border: 1px solid var(--line-soft); border-radius: var(--radius-surface); }
.product-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; color: var(--badge-ink, var(--ink)); background: var(--badge-bg, var(--surface-subtle)); border-radius: 4px; font-size: var(--text-xs); font-weight: 600; line-height: 1.2; white-space: nowrap; }
/* Level with the hex boxes: below the label's line (13 px x 1.3) and the field's 6 px gap. */
.badge-contrast { display: grid; gap: 2px; margin: calc(var(--text-sm) * 1.3 + 6px) 0 0; color: var(--muted); font-size: var(--text-xs); line-height: 1.45; font-variant-numeric: tabular-nums; }
.badge-contrast.is-low { color: var(--red); }
.badge-contrast-warning { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
@media (width <= 1100px) { .badge-row { grid-template-columns: 120px repeat(2, minmax(0, 1fr)); } .badge-contrast { grid-column: 2 / -1; margin-top: 0; } }
@media (width <= 760px) { .badge-row { grid-template-columns: minmax(0, 1fr); } .badge-contrast { grid-column: auto; } }
/* The swatch paints over a transparency grid, so #FFFFFF shows as white and #00000029 as the faint veil it is. */
.color-chip { position: relative; flex: none; width: var(--control-md); height: var(--control-md); background: linear-gradient(var(--chip, transparent), var(--chip, transparent)), repeating-conic-gradient(var(--border) 0 25%, var(--surface) 0 50%) 0 0 / 10px 10px; border: 1px solid var(--input-border); border-radius: var(--radius-control); }
.palette-note { margin: 0; padding: 0 20px; color: var(--muted); font-size: var(--text-sm); }
/* Brand's Save rides the foot of the screen (the wizard's floating footer) with its answer beside it. */
.brand-save { margin-top: 0; }
/* FORM-1: the same bar under any whole-page form. Its answer wraps above the key rather than squeezing it. */
.save-bar { flex-wrap: wrap; }
.save-bar > .button { margin-left: auto; }
.brand-save-status { display: grid; flex: 1 1 auto; gap: var(--space-2); min-width: 0; }
.brand-save-status .alert { margin: 0; }
.brand-save-status .alert span { color: inherit; font-size: inherit; text-align: start; }
.brand-save-status .badge { color: var(--label); }
.form-grid.about-fields { max-width: 760px; }
.banner-thumb { width: 96px; height: 48px; object-fit: cover; background: var(--surface-subtle); border-radius: 4px; }
.image-upload { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.image-upload .button { max-width: 100%; white-space: normal; }
/* A label drawn as a key: ".field label" would otherwise set it in the 13 px label type. */
.image-upload label.button { font-size: var(--text-md); line-height: 1.2; }
.image-upload input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.upload-problem { color: var(--red); font-size: var(--text-xs); }
.upload-format { display: block; color: var(--muted); font-size: var(--text-xs); }
@media (width <= 760px) { .color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* A strip rather than a grid: a dish has one picture, occasionally two. */
.product-images { display: flex; flex-direction: column; gap: 10px; }
/* ------------------------------------------------------------------------------------- editor pages
   MENU-PAGE. A dish or a section is edited on its own page: the main column is the thing itself, the side
   column what is decided at a glance — whether it is on sale, its labels, its pictures, its place. Panels sit
   20 px apart on the bench; one Save travels at the foot (CabinetSaveBar). On a narrower screen the columns
   become one, and the side's panels come straight after the name, so the photographs of a new dish are not
   twelve panels down. */
.editor-header { margin-bottom: var(--space-5); }
.editor-problems { margin-bottom: var(--space-5); }
.editor-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--space-5); }
/* One column that never grows past its track: a long business name in the preview is cut, not pushed past the page. */
.editor-main, .editor-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; }
.editor-columns .panel { margin: 0; }
/* The parts that bring their own heading (sizes, add-ons, photographs) stand on the panel's inset like the rest. */
.editor-page .panel > :is(.product-images, .product-modifiers, .product-variants) { padding: 16px 20px 20px; }
.editor-page .panel > :is(.product-images, .product-modifiers, .product-variants) > .section-heading { padding: 0; }
.editor-page :is(.product-images, .product-modifiers) h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: 1.3; }
.editor-page .panel > .seo-section { padding-bottom: 20px; }
.editor-page .panel > .seo-section > .section-heading { padding-bottom: 8px; }
.editor-flags { display: grid; gap: 10px; }
/* A part that pads itself, or a panel that is only its heading, ends on its own inset, not on two. */
.editor-page .panel.form-section:has(> :is(.product-images, .product-modifiers, .product-variants)), .editor-page .panel.editor-danger { padding-bottom: 0; }
.editor-danger > .section-heading { align-items: center; padding-bottom: 16px; }
.editor-danger h2 { margin: 0; }
.editor-page .save-bar { margin-top: var(--space-5); }
.menu-product-link { color: inherit; text-decoration: none; }
.menu-product-link:hover strong { text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 40%, transparent); text-underline-offset: 3px; }
@media (max-width: 1279px) {
    .editor-columns { display: flex; flex-direction: column; align-items: stretch; }
    .editor-main, .editor-side { display: contents; }
    .editor-main > :first-child { order: 0; }
    .editor-side > * { order: 1; }
    .editor-main > :not(:first-child) { order: 2; }
}

.image-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.image-tile { position: relative; width: 108px; height: 108px; margin: 0; overflow: hidden; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.image-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.image-tile .icon-button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; color: #fff; background: oklch(16.5% 0.007 95 / .72); border: none; border-radius: 4px; font-size: 14px; }
.image-tile .icon-button:hover:not(:disabled) { color: #fff; background: var(--red-lamp); }
/* The category picture keeps its square (the app crops it 1:1); the upload, its format and its help stand beside it,
   and go under it when a phone has no room for both. */
.category-image { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.category-image-actions { display: flex; flex: 1 1 220px; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 46ch; }
.image-tile.wide { display: grid; flex: none; place-items: center; width: 132px; height: 132px; }
.image-tile.wide > .icon { width: 32px; height: 32px; color: var(--subtle); }
.image-initial { color: var(--muted); font-family: var(--font-figures); font-size: 28px; font-weight: 600; }
/* The sign-in code read out to a customer: large enough to read across a counter, spaced into two fours. */
.assisted-code-value { margin: 4px 0; color: var(--ink); font-family: var(--font-figures); font-size: 38px; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.assisted-code { display: grid; justify-items: center; gap: 4px; margin: 18px 20px 20px; padding: 18px; text-align: center; background: var(--surface-subtle); border-radius: 12px; animation: view-in 220ms var(--ease-out); }
.assisted-code p { margin: 0; }
.assisted-code .button { margin-top: 8px; }
.assisted-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.assisted-keys { display: flex; gap: 8px; }

/* ---------------------------------------------------------------------------------------- entrance
   A restaurant's door is headed by its own name and mark on steel; the console's door stands on the
   maker's graphite with the cobalt mark. A person's language and theme wait at the foot of the sheet. */
.login-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px; background: var(--canvas); }
.login-shell:has(.platform-login) { background: var(--steel-950); }
.login-shell:has(.platform-login)::before { position: fixed; top: 20px; left: 24px; content: "Rengi"; color: var(--steel-400); font-family: var(--font-figures); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
.login-card { width: min(100%, 420px); padding: var(--space-8) var(--space-8) var(--space-6); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow-2); }
.login-card.wide { width: min(100%, 540px); }
.login-shell:has(.platform-login) .login-card { border-color: oklch(30% 0.008 95); box-shadow: 0 30px 80px -20px oklch(0% 0 0 / .6); }
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-6); }
.login-brand > div { min-width: 0; display: grid; }
/* A business's name is how staff know they are at the right door: two lines (three on a phone) before
   it is cut, and the whole of it in the title. */
/* The business's name is who this sign-in is for: read whole, however long, never cut with «…». */
.login-brand strong { display: block; color: var(--ink); font-size: var(--text-lg); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; text-wrap: balance; }
.login-brand div span { color: var(--muted); font-size: var(--text-sm); }
.login-heading { margin-bottom: 20px; }
.login-heading h1 { margin-bottom: 4px; font-size: var(--text-2xl); }
.login-heading p { margin-bottom: 0; }
.login-card .alert { margin-bottom: var(--space-5); }
.login-card form { display: grid; gap: 16px; }
.login-card form .button.full { min-height: var(--control-lg); margin-top: 4px; font-size: var(--text-lg); }
/* The person's own settings, at the foot of the sheet: quiet, still one tab away. */
.login-toolbar { display: flex; gap: 8px; margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); }
.login-toolbar .selector-field { position: relative; flex: 1 1 0; min-width: 0; }
.login-toolbar .selector-field span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Each picker says what it sets with its mark (the label is for screen readers), full height, and
   touch height where fingers choose: on the station's own page and on any coarse pointer. */
.login-toolbar .selector-field select { min-width: 0; min-height: var(--control-md); padding: 3px 28px 3px 9px; background-color: var(--surface); border-color: var(--input-border); box-shadow: none; font-size: var(--text-sm); font-weight: 400; }
.login-toolbar .selector-field .icon { position: absolute; top: 50%; left: 10px; width: 16px; height: 16px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.login-toolbar .selector-field .icon + select { padding-left: 32px; }
#station-device .login-toolbar .selector-field select { min-height: var(--control-lg); }
@media (pointer: coarse) {
    .login-toolbar .selector-field select { min-height: var(--control-lg); }
}
.login-help { margin: var(--space-4) 0 0; color: var(--muted); font-size: var(--text-xs); text-align: center; }
.auth-state-card { display: grid; justify-items: center; gap: 14px; text-align: center; }
.auth-state-card h1, .auth-state-card p { margin: 0; }
.auth-state-card small { color: var(--muted); }
.auth-state-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.staff-sign-in-tenant { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 16px; font-size: var(--text-sm); }
.entrance-back { margin: -12px 0 var(--space-5); font-size: var(--text-sm); }
.entrance-back a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
.entrance-back a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.staff-sign-in-other { margin: var(--space-4) 0 0; text-align: center; }
/* AUTH-UX-2: /login with no business known — where the sign-in is, nothing to fill in. */
.staff-entry-landing { display: grid; gap: var(--space-4); }
.staff-entry-landing p { margin: 0; color: var(--muted); }
/* The link's shape is an example in the sentence, not a field: an inline chip that moves whole to its own line. */
.staff-entry-shape { font-size: var(--text-sm); }
.staff-entry-shape code { display: inline-block; max-width: 100%; padding: 1px 5px; overflow-wrap: anywhere; font-size: var(--text-xs); user-select: all; }
.staff-entry-landing p.staff-entry-setup { color: var(--muted); font-size: var(--text-xs); }
/* The doors a signed-in account may open: a row each, its mark on a steel plate, the way in at the right. */
.entrance-doors { display: grid; gap: 8px; margin-top: 4px; }
.entrance-door { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); text-decoration: none; transition: border-color 120ms ease, background-color 120ms ease, transform var(--press) var(--ease-out); }
.entrance-door:hover { color: var(--ink); background: var(--surface-hover); border-color: var(--input-border); }
.entrance-door:active { transform: scale(.985); }
.entrance-door > span:not(.entrance-icon) { flex: 1; min-width: 0; }
.entrance-door strong { display: block; font-size: var(--text-lg); font-weight: 600; }
.entrance-door small { display: block; color: var(--muted); font-size: var(--text-sm); }
.entrance-door .badge { margin-left: auto; }
.entrance-door::after { flex: none; width: 8px; height: 8px; margin-right: 4px; content: ""; border-top: 1.5px solid var(--subtle); border-right: 1.5px solid var(--subtle); transform: rotate(45deg); }
.entrance-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; color: var(--ink); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-surface); font-size: 20px; }
.entrance-icon .icon { width: 22px; height: 22px; }
.staff-launcher-sign-out { margin-top: 16px; text-align: center; }
/* A phone: the sheet and each door give their text the width (the shared phone block's .login-card
   padding is outranked here), and a long name may take a third line. */
@media (width <= 760px) {
    .login-shell .login-card { padding: var(--space-6) var(--space-5) var(--space-5); }
    .entrance-door { padding: var(--space-3); }
    .entrance-icon { width: 36px; height: 36px; }
    .entrance-icon .icon { width: 20px; height: 20px; }
    .entrance-door::after { margin-right: 0; }
}
/* A workspace the account may not open, said once over whatever is on screen. */
.staff-access-notice { position: fixed; top: 12px; left: 50%; z-index: var(--z-toast); display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(560px, calc(100vw - 24px)); margin: 0; box-shadow: var(--shadow-2); transform: translateX(-50%); }
/* A sheet on the till's ground: the title and its line on the panel's own 20 px inset like the form under them, the
   sheet clear of a phone's edges, and the page free to scroll where the till's own columns are not. */
.my-pin { width: min(560px, calc(100% - 32px)); margin: 24px auto; padding-top: 20px; }
.my-pin > :is(h1, p:not(.muted, .alert)) { margin-inline: 20px; }
.my-pin h1 { margin-top: 0; }
.pos-main:has(.my-pin) { overflow-y: auto; }

/* ------------------------------------------------------------------------------------ support mode
   Rengi inside a restaurant: the maker's cobalt, a band across the top and a frame round the whole
   screen for as long as it lasts. Nothing a restaurant's own staff ever sees looks like this. */
.impersonation-bar { position: sticky; top: 0; z-index: var(--z-support); display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 7px 16px; color: #fff; background: var(--cobalt-strong); font-size: var(--text-sm); }
:root[data-theme="dark"] .impersonation-bar { background: oklch(40% 0.15 264); }
.impersonation-bar strong { font-weight: 600; }
.impersonation-bar .support-text { min-width: 0; color: #fff; font-size: var(--text-sm); }
.impersonation-bar .button { margin-left: auto; color: #fff; background: oklch(100% 0 0 / .14); border-color: oklch(100% 0 0 / .28); box-shadow: none; }
@media (hover: hover) { .impersonation-bar .button:hover:not(:disabled) { color: #fff; background: oklch(100% 0 0 / .26); border-color: oklch(100% 0 0 / .4); } }
.support-frame { position: fixed; inset: 0; z-index: calc(var(--z-support) - 1); pointer-events: none; border: 3px solid var(--cobalt-strong); }
/* Under the band the shell is as tall as the window minus the band (measured by the page; these are its first guesses). */
:root:has(#support-banner) { --support-band: 52px; }
:root:has(#support-banner) .app-shell { min-height: calc(100dvh - var(--support-band)); }
:root:has(#support-banner) .app-shell > .sidebar { top: var(--support-band); height: calc(100dvh - var(--support-band)); }
:root:has(#support-banner) .shell-toolbar { top: var(--support-band); }
:root:has(#support-banner) :is(.pos-shell, .kds-shell) { height: calc(100dvh - var(--support-band)); }
:root[data-theme="dark"] .support-frame { border-color: oklch(62% 0.16 264); }
.support-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 2px 8px; color: var(--cobalt-strong); background: #fff; border-radius: 4px; font-size: var(--text-xs); font-weight: 700; }
.support-badge::before { width: 7px; height: 7px; content: ""; background: currentColor; border-radius: var(--radius-mark); }
.support-ended .support-badge { margin-bottom: 8px; color: var(--cobalt-strong); background: var(--cobalt-soft); }
/* Whose till or kitchen this is, beside the workspace's name. */
.shell-tenant { max-width: 28ch; margin-left: 10px; overflow: hidden; font-weight: 600; opacity: .8; text-overflow: ellipsis; white-space: nowrap; }

/* ----------------------------------------------------------------------------------------- cabinet
   The overview answers the first questions of a shift before anything else: is anything waiting on
   me, is a branch paused. The cell that needs the owner lifts (the lamp's fill); the rest stay quiet. */
.ops-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-bottom: var(--space-5); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.ops-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 18px 20px 20px; color: var(--ink); background: var(--surface); box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); }
.ops-card.attention { background: var(--amber-soft); }
.ops-card.paused { background: var(--red-soft); }
.ops-label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--label); font-size: var(--text-sm); font-weight: 600; }
.ops-label::before { flex: none; width: 8px; height: 8px; content: ""; background: var(--steel-400); border-radius: var(--radius-mark); }
.ops-card.attention .ops-label::before { background: var(--amber-lamp); box-shadow: 0 0 0 3px oklch(75% 0.155 70 / .22); }
.ops-card.paused .ops-label::before { background: var(--red-lamp); }
.ops-card.calm .ops-label::before { background: var(--green-lamp); }
.ops-reading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.ops-value { color: var(--ink); font-family: var(--font-figures); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ops-headline { color: var(--ink); font-size: var(--text-lg); font-weight: 600; }
.ops-headline.muted { color: var(--muted); font-weight: 500; }
.ops-card small { color: var(--muted); font-size: var(--text-sm); }
/* The key stands at the foot of the band, on one line with its neighbour's, 12 px clear of the words above it. */
.ops-card .button { margin-top: auto; }
.ops-card > :nth-last-child(2) { margin-bottom: 12px; }
.ops-card.paused .ops-headline { color: var(--red); }

/* TODAY-1: what is not in order, one row each, every row the way to where it is put right. The lamp
   says how much it matters: red is paper not coming out of the kitchen printer, amber is a note. */
.today-problems { margin-bottom: var(--space-5); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.today-problems h2 { margin: 0; padding: 14px 20px 10px; color: var(--label); font-size: var(--text-sm); font-weight: 600; }
.today-problems ul { margin: 0; padding: 0; list-style: none; }
.today-problems li { border-top: 1px solid var(--line-soft); }
.today-problem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding: 10px 20px; color: var(--ink); text-decoration: none; transition: background-color 120ms ease; }
.today-problem::before { width: 8px; height: 8px; content: ""; background: var(--amber-lamp); border-radius: var(--radius-mark); }
.today-problem.serious { background: var(--red-soft); }
.today-problem.serious::before { background: var(--red-lamp); }
.today-problem:hover { color: var(--ink); background: var(--surface-hover); }
.today-problem:focus-visible { outline-offset: -2px; }
.today-problem-copy { display: grid; gap: 1px; min-width: 0; }
.today-problem-copy strong { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.today-problem-copy small { color: var(--muted); font-size: var(--text-sm); line-height: 1.35; text-wrap: pretty; }
.today-problem > .icon { width: 16px; height: 16px; color: var(--subtle); transition: color 120ms ease; }
.today-problem:hover > .icon { color: var(--ink); }
/* Nothing wrong is one quiet line under the band, not a box around good news. */
.today-calm { display: flex; align-items: center; gap: 8px; margin: calc(var(--space-3) - var(--space-5)) 0 var(--space-5); color: var(--muted); font-size: var(--text-sm); }
.today-calm::before { flex: none; width: 8px; height: 8px; content: ""; background: var(--green-lamp); border-radius: var(--radius-mark); }

/* The day's takings: the figures of the Reports screen, added up over the branches. */
.today-day { margin-bottom: var(--space-5); }
.today-day-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.today-day-heading h2 { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.today-day-more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--label); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.today-day-more:hover { color: var(--ink); }
.today-day-more .icon { width: 14px; height: 14px; }
.today-day .summary-strip { margin-bottom: 0; }
.today-day .summary-value { white-space: nowrap; }
.today-branches { margin: 8px 0 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.today-branches li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 16px; min-height: 44px; padding: 10px 18px; }
.today-branches li + li { border-top: 1px solid var(--line-soft); }
.today-branches span { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.today-branches small { color: var(--muted); font-size: var(--text-sm); white-space: nowrap; }
.today-branches strong { min-width: 9ch; font-family: var(--font-figures); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.today-day-note { display: block; margin-top: 8px; color: var(--muted); font-size: var(--text-sm); }

/* What the business has, in one strip of figures, each a way into its section. */
.summary-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: var(--space-5); overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.summary-card { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 16px 18px; color: var(--ink); background: var(--surface); box-shadow: 1px 0 0 var(--line-soft), 0 1px 0 var(--line-soft); text-decoration: none; transition: background-color 120ms ease; }
a.summary-card:hover { color: var(--ink); background: var(--surface-hover); }
.summary-card.static:hover { background: var(--surface); }
.summary-value { color: var(--ink); font-family: var(--font-figures); font-size: 28px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* A tile that is a way into its section says so with a caret, which darkens under the pointer. */
a.summary-card { position: relative; padding-right: 44px; }
a.summary-card > .icon { position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; color: var(--subtle); transform: translateY(-50%); transition: color 120ms ease; }
a.summary-card:hover > .icon { color: var(--ink); }
.summary-card strong { margin-top: 4px; font-weight: 600; }
.summary-card small { color: var(--muted); font-size: var(--text-xs); }
.owing { color: var(--red); font-size: var(--text-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.owing-note { color: var(--red); }
#invite-administrator .form-actions { padding-bottom: 20px; }
.form-grid.narrow { max-width: 880px; }
.self-badge { margin-left: 8px; }
.billing-subscription .section-heading > .row-actions { align-items: center; }
.billing-invoices { table-layout: fixed; min-width: 900px; }
.billing-invoices th:nth-child(1) { width: 200px; }
.billing-invoices th:nth-child(2) { width: 130px; }
.billing-invoices th:nth-child(3) { width: 110px; }
.billing-invoices th:nth-child(4) { width: 140px; }
.billing-invoices th:last-child { width: 270px; }
.billing-invoices .note-cell { color: var(--muted); }
@media (min-width: 1366px) { .billing-subscription > .table-scroll :is(th, td):first-child { padding-left: 20px; } .billing-subscription > .table-scroll :is(th, td):last-child { padding-right: 20px; } }
/* Narrower than the five columns, their keys and a note: each invoice is two lines — when and how much, then its state and its keys. */
@media (max-width: 1365px) {
    .billing-invoices { table-layout: auto; min-width: 0; }
    .billing-invoices thead { display: none; }
    .billing-invoices, .billing-invoices tbody { display: block; }
    .billing-invoices tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
    .billing-invoices tr:last-child { border-bottom: 0; }
    .billing-invoices :is(td, td:first-child, td:last-child) { position: static; padding: 0; background: none; border: 0; box-shadow: none; }
    .billing-invoices tbody tr:hover :is(td, td:last-child) { background: none; }
    .billing-invoices tbody tr:hover { background: var(--surface-hover); }
    .panel > .table-scroll > .billing-invoices td:is(:first-child, :last-child) { padding: 0; }
    .billing-invoices .period-cell { grid-column: 1 / 3; font-weight: 600; }
    .billing-invoices .amount-cell { grid-column: 3; }
    .billing-invoices .due-cell { grid-column: 1; color: var(--muted); font-size: var(--text-sm); }
    .billing-invoices .due-cell::before { content: attr(data-label) " "; }
    .billing-invoices .status-cell { grid-column: 2; justify-self: start; }
    .billing-invoices td.row-actions { grid-column: 3; width: auto; }
    .billing-invoices td.row-actions:empty { display: none; }
    .billing-invoices .note-cell { grid-column: 1 / -1; font-size: var(--text-sm); }
    .billing-invoices .note-cell:has(> .muted) { display: none; }
}
@media (width <= 560px) {
    .billing-invoices tr { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; }
    .billing-invoices .period-cell { grid-column: 1; }
    .billing-invoices .amount-cell { grid-column: 2; }
    .billing-invoices .due-cell { grid-column: 1; }
    .billing-invoices .status-cell { grid-column: 2; justify-self: end; }
    .billing-invoices td.row-actions { grid-column: 1 / -1; display: flex; gap: 8px; text-align: left; }
    .billing-invoices td.row-actions > * + * { margin-left: 0; }
    .billing-invoices td.row-actions .button { flex: 1 1 auto; }
}
.field-value { display: flex; align-items: center; min-height: var(--control-md); font-family: var(--font-figures); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The menu: sections on the left as a list you work down, their dishes on the right. */
/* UI-2: the menu — sections down the left (sticky beside a long list), the chosen section's dishes as rows. */
.menu-split { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 20px; align-items: start; }
.menu-split > .panel { margin-bottom: 0; }
.cats { position: sticky; top: 20px; display: grid; gap: 2px; padding: 8px; }
.cats hr { margin: 6px 4px; background: var(--line-soft); }
.cat { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: var(--radius-control); transition: background-color 120ms ease; }
@media (hover: hover) { .cat:hover { background: var(--surface-hover); } }
.cat.active { background: var(--surface-accent); }
.cat > button { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 38px; padding: 0 4px 0 12px; color: var(--label); background: none; border: 0; cursor: pointer; font: inherit; font-weight: 500; text-align: left; }
.cat.active > button { color: var(--ink); font-weight: 600; }
.cat.hidden-cat > button { color: var(--muted); }
.cat > button .icon { flex: none; width: 15px; height: 15px; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-count { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.cat-edit { width: 30px; height: 30px; opacity: 0; transition: opacity 120ms ease; }
.cat:hover .cat-edit, .cat.active .cat-edit, .cat-edit:focus-visible { opacity: 1; }
@media (hover: none) { .cat-edit { opacity: 1; } }
.dish-list { overflow: hidden; }
.dish-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--line-soft); }
.dish-head .filter-bar { margin: 0; }
.dish-head-title { display: flex; align-items: center; gap: 4px; min-width: 0; }
.dish-head-title h2 { margin: 0; }
.dish { display: grid; grid-template-columns: minmax(0, 1fr) 44px 20px; align-items: center; gap: 12px; padding: 0 20px 0 0; border-top: 1px solid var(--line-soft); transition: background-color 100ms ease; }
.dish-head + .dish { border-top: 0; }
@media (hover: hover) { .dish:hover { background: var(--surface-hover); } }
.dish-open { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-width: 0; padding: 10px 0 10px 20px; color: var(--ink); text-decoration: none; }
.dish-open:focus-visible { outline-offset: -2px; border-radius: var(--radius-control); }
.dish-open img, .no-photo { width: 56px; height: 56px; object-fit: cover; background: var(--surface-subtle); border-radius: 10px; }
.no-photo { display: grid; place-items: center; color: var(--muted); border: 1px dashed var(--border); }
.no-photo .icon { width: 18px; height: 18px; }
.dish-name { display: grid; min-width: 0; }
.dish-name strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.dish-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.dish-price { font-weight: 650; text-align: right; }
.dish-price s { display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 500; }
.dish .dish-go { width: 16px; height: 16px; color: var(--muted); }
.dish.off .dish-name strong, .dish.off .dish-price { color: var(--muted); }
.dish.off img { opacity: .7; filter: grayscale(.8); }
@media (max-width: 1100px) { .menu-split { grid-template-columns: 200px minmax(0, 1fr); } }
@media (width <= 760px) {
    .menu-split { grid-template-columns: minmax(0, 1fr); }
    .cats { position: static; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
    .cats hr { display: none; }
    .cat { flex: none; }
    .cat-edit { display: none; }
    .dish { grid-template-columns: minmax(0, 1fr) 44px; padding-right: 14px; }
    .dish-open { grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding-left: 14px; }
    .dish-open img, .no-photo { width: 52px; height: 52px; }
    .dish .dish-go { display: none; }
}
.menu-products td:first-child { min-width: 200px; }
.menu-products td.num { width: 1%; }
.menu-products .flag-row { margin-top: 4px; padding: 0; gap: 6px; }
.table-scroll:has(> .menu-products) { container-type: inline-size; }
.menu-product-open { color: var(--muted); }
.staff-roles-more { margin-left: 6px; vertical-align: 1px; }
.staff-roles-more::before { display: none; }
.logo-actions { display: grid; justify-items: start; gap: 8px; }
.logo-address input { width: min(440px, 100%); }
.logo-address > summary { width: fit-content; color: var(--label); font-size: var(--text-sm); cursor: pointer; }
.logo-address[open] > summary { margin-bottom: 6px; }
.menu-products tbody tr:hover .menu-product-open { color: var(--ink); }
@container (width < 600px) {
    /* The panel, not the window: at 1140 px beside the rail and the sections the dishes get ~490 px, as on a tablet
       held upright. A card per dish, its name and way in on the first line, its price, state and stop list under it. */
    .menu-products thead { display: none; }
    .menu-products, .menu-products tbody { display: block; }
    .menu-products tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "name name name edit" "price state stop stop"; align-items: center; gap: 8px 12px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
    .menu-products tbody tr:last-child { border-bottom: 0; }
    .menu-products td, .panel > .table-scroll > .menu-products td:is(:first-child, :last-child) { display: block; min-width: 0; padding: 0; border: 0; }
    .menu-products td:first-child { grid-area: name; min-width: 0; }
    .menu-products td.num { grid-area: price; width: auto; text-align: left !important; }
    .menu-products td.menu-product-status { grid-area: state; }
    .menu-products td.menu-product-stop { grid-area: stop; color: var(--muted); font-size: var(--text-sm); }
    .menu-products td.menu-product-stop::before { content: attr(data-label) ": "; }
    /* «Stop list: —» under every dish said nothing; the card names a stop only where there is one. */
    .menu-products td.menu-product-stop:not(.stopped) { display: none; }
    .menu-products.pinned-actions td:last-child { grid-area: edit; width: auto; position: static; background: transparent; box-shadow: none; }
    .menu-products.pinned-actions td[colspan] { grid-area: auto / 1 / auto / -1; }
}

/* The allergen grid: the dish name stays put while the eye travels right. The name wraps inside a fixed column and its
   state sits under it, so the fourteen columns keep the room (inline, the badge made the column 670 px wide). */
.allergen-grid th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 260px; min-width: 180px; max-width: 280px; background: var(--surface); color: var(--ink); font-size: var(--text-sm); font-weight: 500; line-height: 1.3; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.allergen-grid th[scope="row"] .badge { display: flex; width: fit-content; margin: 4px 0 0; }
.allergen-grid td { padding: 2px 4px; text-align: center; }
/* Every column is named in words, set on its side so fourteen fit across; the headings stay over a long grid. */
.allergen-grid thead th { z-index: 2; padding: 8px 6px; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.allergen-grid thead th:not(:first-child) { height: 128px; padding: 8px 4px; text-align: center; vertical-align: bottom; }
.allergen-grid thead th:first-child { left: 0; z-index: 3; padding-inline: 14px; vertical-align: bottom; }
.allergen-head { display: inline-block; max-height: 112px; line-height: 1.2; text-align: left; white-space: normal; transform: rotate(180deg); writing-mode: vertical-rl; }
/* The whole cell is the target, not only its 16 px box; the row lights up to its name. */
.allergen-cell { display: grid; place-items: center; min-height: 36px; cursor: pointer; }
@media (hover: hover) { .allergen-grid tbody tr:hover th[scope="row"] { background: var(--surface-hover); } }
/* A long grid scrolls inside its panel, under its headings, and the page's Save stays in view. On a phone the page scrolls. */
@media (min-width: 761px) { .allergen-scroll { max-height: calc(100dvh - 240px); overflow: auto; } }
/* The filters on one line centred on the select, the count at the far end; a catalogue filter is as wide as its
   choices read, whatever the longest dish name is. */
.allergen-toolbar { flex-wrap: wrap; row-gap: 12px; }
.allergen-toolbar > .toggle { align-items: center; min-height: var(--control-md); white-space: nowrap; }
.allergen-toolbar > p.hint { display: flex; align-items: center; min-height: var(--control-md); margin: 0 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.catalogue-filter select { width: clamp(220px, 28vw, 360px); max-width: 100%; }
@media (width <= 760px) {
    .allergen-grid th[scope="row"], .allergen-grid thead th:first-child { width: 40vw; min-width: 0; max-width: 150px; padding-inline: 10px; }
    .allergen-toolbar > p.hint { margin-left: 0; }
    .catalogue-filter select { width: 100%; }
}

/* The stop list: a row off sale reads as off sale from across a kitchen. The page stops at a width a
   row can be read across, so a dish is never 1250 px from its own switch. */
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.cols > .panel, .cols > .stack > .panel { margin-bottom: 0; }
.cols { margin-bottom: 20px; }
.cols.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cols, .cols.even { grid-template-columns: minmax(0, 1fr); } }
.rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line-soft); }
.rows > div:first-child { border-top: 0; }
.rows strong { display: block; font-weight: 600; }
.rows .sub { display: block; color: var(--muted); font-size: var(--text-sm); }
.hint-line { margin: 0; padding: 12px 20px 16px; color: var(--muted); font-size: var(--text-sm); }
.stop-calm { padding-bottom: 4px; }
.cols.side { grid-template-columns: 280px minmax(0, 1fr); }
@media (max-width: 1000px) { .cols.side { grid-template-columns: minmax(0, 1fr); } }
.group-list { display: grid; gap: 2px; padding: 8px; }
.group-link { display: grid; gap: 1px; padding: 10px 12px; color: var(--ink); text-align: left; background: none; border: 0; border-radius: var(--radius-control); cursor: pointer; font: inherit; transition: background-color 120ms ease; }
@media (hover: hover) { .group-link:hover { background: var(--surface-hover); } }
.group-link.active { background: var(--surface-accent); }
.group-link strong { font-weight: 600; }
.group-link span { color: var(--muted); font-size: 12.5px; }
.options { margin: 0 20px 20px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 10px; }
.option-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 130px; align-items: center; gap: 12px; padding: 10px 14px; }
.option-row + .option-row { border-top: 1px solid var(--line-soft); }
.option-row.unavailable > span:first-child { color: var(--muted); }
.where-used { padding: 0 20px 20px; }
a.tag { text-decoration: none; }
/* Pictures of a kind side by side (banners): the picture at 2:1, then its name and its key. */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 0 20px 20px; }
.thumb-card { overflow: hidden; border: 1px solid var(--line-soft); border-radius: 12px; }
.thumb-image { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 1; color: var(--muted); background: var(--surface-subtle); }
.thumb-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb-image .icon { width: 20px; height: 20px; }
.thumb-card > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 8px 9px 12px; }
.thumb-copy { display: grid; min-width: 0; }
.thumb-copy strong { overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.thumb-copy small { overflow: hidden; color: var(--muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
/* The brand screen: the colours, and the phone beside them. */
.audit-row .person { align-items: flex-start; }
.audit-sentence { display: block; font-weight: 500; }
.audit-sentence b { font-weight: 650; }
.audit-row .sub { display: flex; flex-wrap: wrap; gap: 0 4px; }
.settings-included { padding: 0 20px 4px; }
.settings-outside { padding-top: 10px; }
.settings-top .form-section { height: 100%; }
.locale-choices { padding: 0 20px 20px; }
/* Facts of one thing: the name of each on the left, its value beside it. */
.kv { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; margin: 0; padding: 0 20px 18px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
@media (width <= 760px) { .kv { grid-template-columns: 112px minmax(0, 1fr); } }
/* The zones' map and their cards beside it. */
.zones-overview { align-items: stretch; }
.map { position: relative; z-index: 0; min-height: 520px; overflow: hidden; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.map .leaflet-container { font-family: var(--font-ui); }
.map .leaflet-control-attribution { color: var(--muted); background: color-mix(in oklch, var(--surface) 80%, transparent); border-radius: 4px; font-size: 10.5px; }
.zone-cards { overflow: hidden; align-self: start; }
.zone-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 14px 16px; transition: background-color 120ms ease; }
.zone-card + .zone-card { border-top: 1px solid var(--line-soft); }
.zone-card.selected { background: var(--amber-soft); }
.zone-card-pick { display: grid; gap: 8px; min-width: 0; padding: 0; color: var(--ink); text-align: left; background: none; border: 0; cursor: pointer; font: inherit; }
.zc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zc-branch { margin-top: -6px; color: var(--muted); font-size: var(--text-xs); }
.zc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.zc-facts > span > span { display: block; color: var(--muted); font-size: var(--text-xs); }
@media (max-width: 1000px) { .map { min-height: 380px; } }
/* Tiles: objects of one kind side by side (branches, apps), each a panel; the last one may be the way to a new one. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-bottom: 20px; }
.tile { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px 20px; }
.tile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.tile-head h2 { margin: 0; font-size: var(--text-lg); }
.tile-head p { margin: 3px 0 0; color: var(--muted); font-size: var(--text-sm); }
div.facts.branch-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 0; color: var(--label); font-size: 13.5px; }
div.facts.branch-facts > div { display: flex; gap: 9px; }
div.facts.branch-facts .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.week > div { padding: 6px 0; text-align: center; background: var(--surface-subtle); border-radius: 7px; font-size: 11.5px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.week b { display: block; color: var(--label); font-size: 11px; font-weight: 600; text-transform: capitalize; }
.week > div.today { background: var(--surface-accent); box-shadow: inset 0 0 0 1px var(--border); }
.week > div.closed { color: var(--muted); }
.tile-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.tile.add { align-items: center; justify-content: center; min-height: 220px; color: var(--muted); background: transparent; border-style: dashed; cursor: pointer; font: inherit; font-weight: 600; transition: color 120ms ease, border-color 120ms ease, transform var(--press) var(--ease-out); }
.tile.add:hover:not(:disabled) { color: var(--ink); border-color: var(--hover-border); }
.tile.add:active:not(:disabled) { transform: scale(.99); }
.tile.add .icon { width: 22px; height: 22px; }
.branch-grid > .branch-card.tile { padding: 18px 20px; }
.branch-card .branch-parts { margin: 0; }
/* A code to type at checkout: monospace on a dashed plate, read letter by letter. */
.code { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; color: var(--ink); background: var(--surface-subtle); border: 1px dashed var(--border); border-radius: 7px; font: 600 12.5px var(--font-mono); letter-spacing: .04em; }
td .code + .subline { margin-top: 4px; }
.muted-cell { color: var(--muted); }
/* A push as the lock screen shows it: the app's mark, its name and «now», then the title and the words. */
.notif { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 10px; margin: 0 20px 16px; padding: 12px 14px; background: var(--surface-subtle); border: 1px solid var(--line-soft); border-radius: 14px; font-size: var(--text-sm); }
.notif .app-icon.brand-mark { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.notif-top { display: flex; justify-content: space-between; gap: 8px; min-width: 0; color: var(--muted); font-size: var(--text-xs); }
.notif-top b { overflow: hidden; color: var(--label); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.notif-body { grid-column: 2; display: grid; min-width: 0; }
.notif-body strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.notif-body span { display: -webkit-box; overflow: hidden; color: var(--label); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* A row's «…»: a small menu that opens from its key and closes when a choice is made or the page is clicked. */
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; cursor: pointer; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu[open] > summary { color: var(--ink); background: var(--surface-accent); }
.menu-pop { position: absolute; top: calc(100% + 4px); right: 0; z-index: var(--z-popover); display: grid; min-width: 180px; padding: 6px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-2), var(--shadow-1); transform-origin: 100% 0; animation: menu-in 180ms var(--ease-out); }
.menu-item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; color: var(--ink); text-align: left; white-space: nowrap; background: none; border: 0; border-radius: var(--radius-control); cursor: pointer; font: inherit; font-weight: 500; }
@media (hover: hover) { .menu-item:hover:not(:disabled) { background: var(--surface-hover); } }
.menu-item.danger { color: var(--red); }
.menu-item:disabled { opacity: .5; cursor: not-allowed; }
.person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.person > div { min-width: 0; }
.person .customer-name { display: block; font-weight: 600; text-decoration: none; }
.person .badge { margin-top: 2px; }
.customers-toolbar { margin-bottom: 16px; }
.customers-count { margin: 0; color: var(--muted); font-size: var(--text-sm); }
.customers-search { display: flex; gap: 8px; }
.customer-title { display: flex; align-items: center; gap: 16px; }
.customer-title h1 { margin-bottom: 2px; }
.kpi-date { font-size: 20px !important; }
/* A notice over a page: its mark, what it is, and the one key that acts on it (the concept's banner). */
.banner { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 20px; padding: 12px 14px 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.banner .attention-icon { width: 36px; height: 36px; }
.banner strong { display: block; font-weight: 600; }
.banner span:not(.attention-icon) { display: block; color: var(--muted); font-size: var(--text-sm); }
.banner.wait { background: var(--amber-soft); border-color: var(--amber-line); }
.banner.wait .attention-icon { background: var(--surface); }
.banner.fault { background: var(--red-soft); border-color: var(--red-line); }
@media (width <= 760px) { .banner { grid-template-columns: 36px minmax(0, 1fr); } .banner > .button { grid-column: 2; justify-self: start; } }
.allergen-toolbar .filter-bar { margin: 0; align-self: end; }
a.tag:hover { color: var(--ink); border-color: var(--hover-border); }
/* Keys of a choice in a row (percentages, kinds of order, notes): pills that are pressed or not. */
.chip-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-pick { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; color: var(--label); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform var(--press) var(--ease-out); -webkit-tap-highlight-color: transparent; }
.chip-pick:active:not(:disabled) { transform: scale(.96); }
.chip-pick[aria-pressed="true"] { color: var(--ink); background: var(--surface-accent); border-color: var(--hover-border); }
.chip-pick:disabled { cursor: not-allowed; opacity: .5; }
@media (hover: hover) { .chip-pick:hover:not(:disabled):not([aria-pressed="true"]) { color: var(--ink); border-color: var(--hover-border); } }
.setting.setting-in-grid { padding: 0; border: 0; }
.input-affix { position: relative; }
.input-affix > input { width: 100%; padding-right: 34px; text-align: left; }
.input-affix > span { position: absolute; top: 50%; right: 11px; color: var(--muted); font-size: var(--text-sm); transform: translateY(-50%); pointer-events: none; }
.money-input { max-width: 220px; }
.cash-change-hint { padding-top: 0; }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line-soft); }
.setting:first-child, .section-heading + .setting { border-top: 0; }
.setting strong { display: block; font-weight: 600; }
.setting > div > span { display: block; margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
/* The branches are a filter of one choice (the segmented plate); a long name wraps inside its segment
   instead of running past the screen, and a wrapped row of segments fills the plate. */
.filter-bar.branch-strip { flex-wrap: wrap; overflow-x: visible; }
.branch-strip .button { flex: 1 1 auto; justify-content: space-between; gap: 8px; min-width: 0; max-width: 100%; min-height: var(--control-md); padding-block: 6px; text-align: left; white-space: normal; }
.branch-strip-name { min-width: 0; overflow-wrap: anywhere; }
.branch-strip .badge { flex: none; }
/* The pause stands beside what it pauses, as a switch with a 44 px reach (the kitchen opens this on a touch screen). */
.branch-pause .section-heading { align-items: center; justify-content: flex-start; gap: var(--space-3) var(--space-6); }
.branch-pause .section-heading > div:first-child { flex: 0 1 auto; }
.branch-pause .switch, .stop-list-table .switch { min-height: var(--control-lg); padding-inline: var(--space-2); }
/* In a row the switch's reach overlaps the cell's padding rather than making every dish 20 px taller. */
.stop-list-table .switch { margin-block: -8px; }
.stop-list-page .table-toolbar { flex-wrap: wrap; }
.stop-list-page .search-box { flex: 1 1 220px; max-width: 320px; }
.stop-list-table td.num { width: 9rem; }
.stop-list-table th:last-child, .stop-list-table td:not([colspan]):last-child { width: 1%; text-align: right; white-space: nowrap; }
/* Off sale: struck through, greyed, and said in a word; its switch stays at full strength. */
tr.stopped td { color: var(--subtle); }
tr.stopped td strong { text-decoration: line-through; }
@media (max-width: 900px) {
    /* Narrow: a dish per row, its category and price under its name and its switch beside both, rather
       than four columns squeezed to five-line cells. */
    .stop-list-table thead { display: none; }
    .stop-list-table, .stop-list-table tbody { display: block; }
    .stop-list-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name name switch" "cat price switch"; align-items: center; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); }
    .stop-list-table tbody tr:last-child { border-bottom: 0; }
    .stop-list-table td { padding: 0; border: 0; }
    .stop-list-table tbody tr:hover td { background: transparent; }
    .stop-list-table tbody tr:hover { background: var(--surface-hover); }
    .stop-list-table td:nth-child(1) { grid-area: name; }
    .stop-list-table td:nth-child(2) { grid-area: cat; color: var(--muted); font-size: var(--text-xs); }
    .stop-list-table td:nth-child(3) { grid-area: price; width: auto; font-size: var(--text-xs); }
    .stop-list-table td:nth-child(4) { grid-area: switch; }
    .stop-list-table td:not([colspan]):last-child { width: auto; }
    .stop-list-table td[colspan] { grid-column: 1 / -1; }
}
@media (width <= 760px) { .branch-strip .button { flex-basis: 100%; } }

/* APPS-1: the shelf of apps — what the cabinet can do. Two shelves by what the business has; an app is
   a row of the cabinet's own kind (a mark, a name, one line) with its state under it as a lamp and a
   word. One column under a thumb, a grid of the same rows on a wide screen. A connected app this
   account can open is the whole row; one it cannot, or one not connected, is the row without a way in. */
.app-shelf { margin-bottom: var(--space-6); }
.app-shelf > h2 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; }
.app-count { color: var(--muted); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.app-shelf-how { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 var(--space-3); color: var(--label); font-size: var(--text-md); line-height: 1.45; text-wrap: pretty; }
.app-shelf-how > p { max-width: 68ch; margin: 0; }
/* UI-2: the shelf as the concept's tiles — each app a panel of its own, 16 px apart. */
.app-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.app-list > li { display: grid; min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); transition: border-color 120ms ease; }
.app-list > li:has(> a.app-row):hover { border-color: var(--hover-border); }
.app-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-3); min-height: 72px; padding: 14px var(--space-4); color: var(--ink); text-decoration: none; }
a.app-row { transition: background-color 120ms ease; }
a.app-row:hover { color: var(--ink); background: var(--surface-hover); }
a.app-row:focus-visible { outline-offset: -2px; }
.app-row-copy { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.app-row-copy strong { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.app-row-copy small { color: var(--muted); font-size: var(--text-sm); line-height: 1.35; text-wrap: pretty; }
.app-row-copy .badge { margin-top: 6px; }
.app-row > .nav-row-go { align-self: center; width: 16px; height: 16px; color: var(--subtle); transition: color 120ms ease; }
a.app-row:hover > .nav-row-go { color: var(--ink); }
/* Not connected stays on the shelf, and quiet: the mark and the name step back, the line stays readable. */
.app-row.off .nav-row-mark { color: var(--subtle); }
/* POSTER-4: an app the owner connects themselves says so where the arrow alone would stand. */
.app-row-action { display: inline-flex; align-items: center; align-self: center; gap: 4px; color: var(--ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.app-row-action .icon { width: 14px; height: 14px; color: var(--subtle); transition: color 120ms ease; }
a.app-row:hover .app-row-action .icon { color: var(--ink); }
.app-row.off strong { color: var(--label); }

/* POSTER-1: the Poster app's own page. What the connection is, then three steps in the order they are
   done; each step's answer stands inside the step, beside the key that asked for it. */
.poster-state { padding: 16px 20px; }
.poster-state-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.poster-state-line strong { font-size: var(--text-lg); font-weight: 600; overflow-wrap: anywhere; }
.poster-state-line small { color: var(--muted); font-size: var(--text-sm); overflow-wrap: anywhere; }
.poster-state p { max-width: 68ch; margin: 8px 0 0; color: var(--label); line-height: 1.45; text-wrap: pretty; }
.poster-step > :is(.poster-answer, .poster-preview, .poster-last, .poster-needs) { margin: 0 20px 16px; }
.poster-step .section-heading p { max-width: 68ch; text-wrap: pretty; }
.poster-ok { display: flex; align-items: baseline; gap: 8px; margin: 0; font-weight: 500; }
.poster-ok::before { flex: none; width: 8px; height: 8px; content: ""; background: var(--green-lamp); border-radius: var(--radius-mark); transform: translateY(-1px); }
.poster-answer > .alert { margin-top: 10px; }
.poster-needs { color: var(--muted); }
/* A branch and the Poster location it stands for: the name, the choice, the key, and the answer on its own line under them. */
.poster-branches { margin: 0 0 8px; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); }
.poster-branches > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 6px 12px; padding: 12px 20px; border-bottom: 1px solid var(--line-soft); }
.poster-branches > li:last-child { border-bottom: 0; }
.poster-branch-name { font-weight: 600; overflow-wrap: anywhere; }
.poster-branches select { width: 100%; min-width: 0; min-height: var(--control-md, 40px); }
.poster-branch-current { grid-column: 2 / -1; color: var(--label); }
.poster-row-status { grid-column: 1 / -1; min-height: 0; font-size: var(--text-sm); }
.poster-row-status:empty { display: none; }
.poster-row-problem { color: var(--red); }
.poster-row-hint { color: var(--muted); }
/* What a transfer would do: the totals in words, then the rows themselves. */
.poster-preview { padding-top: 4px; }
.poster-summary { margin: 0 0 6px; }
.poster-kinds { margin: 0 0 14px; padding: 0; color: var(--label); font-size: var(--text-sm); list-style: none; font-variant-numeric: tabular-nums; }
.poster-preview h3, .poster-last h3 { margin: 14px 0 6px; color: var(--label); font-size: var(--text-sm); font-weight: 600; }
.poster-rows { max-height: 420px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--line-soft); border-radius: var(--radius-control); }
.poster-rows > li { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr); align-items: baseline; gap: 4px 12px; padding: 9px 12px; }
.poster-rows > li + li { border-top: 1px solid var(--line-soft); }
.poster-rows > li > .badge { justify-self: start; }
.poster-rows > li > .poster-row-copy:only-child { grid-column: 1 / -1; }
.poster-row-copy { display: grid; gap: 1px; min-width: 0; }
.poster-row-copy strong { font-weight: 600; overflow-wrap: anywhere; }
.poster-row-copy small { color: var(--muted); font-size: var(--text-sm); }
.poster-preview > .form-actions { padding: 14px 0 0; }
.poster-last { padding-top: 12px; border-top: 1px solid var(--line-soft); }
.poster-last h3 { margin-top: 0; }
.poster-last p { max-width: 68ch; margin: 0; color: var(--label); font-variant-numeric: tabular-nums; }
/* POSTER-2: the fourth step says on a line of its own whether orders go to Poster, then the last day and what did not get there. */
.poster-step > .poster-ok { margin: 0 20px 16px; }
.poster-last > h3 ~ h3 { margin-top: 14px; }
.poster-last > .hint { margin-top: 8px; color: var(--muted); }
/* POSTER-3: the refresh switch and the photo note are blocks of the menu step, so their button and their warning start at the block's own edge. */
.poster-last > .form-actions { padding: 12px 0 0; }
.poster-last > .alert { margin: 10px 0 0; }
/* POSTER-4: the owner's own key. Where to find it as three numbered lines, one field, one key;
   on the connected screen the same form waits behind «Replace the key» in a quiet last block. */
.poster-key-steps { max-width: 68ch; margin: 0 20px 16px; padding-left: 22px; color: var(--label); line-height: 1.5; }
.poster-key-steps li + li { margin-top: 4px; }
.poster-key-form { display: grid; gap: 12px; max-width: 560px; padding: 0 20px; }
.poster-key-form > .form-actions { padding: 0; }
.poster-key-form > .alert { margin: 0; }
.poster-key-line { max-width: 68ch; margin: 0 20px 12px; color: var(--label); overflow-wrap: anywhere; }
.poster-key-block > .form-actions { padding-top: 0; }
.poster-key-block > .poster-key-form { margin-top: 4px; }
/* POSTER-5: the way through Poster — one key and the one line that says what happens next — and the
   key's own form folded under it as the second way. */
.poster-sign-in { display: grid; justify-items: start; gap: 10px; padding: 0 20px 18px; }
.poster-sign-in > p { max-width: 68ch; margin: 0; color: var(--label); line-height: 1.5; }
.poster-key-details > p { max-width: 68ch; margin: 10px 0 0; color: var(--label); line-height: 1.5; }
.poster-key-details > .poster-key-steps { margin: 10px 0 16px; }
.poster-key-details > .poster-key-form { padding: 0; }
.poster-key-details { margin-bottom: 0; }
.poster-connect > .poster-key-line { margin-top: 14px; margin-bottom: 0; }
.poster-key-details > summary { padding: 8px 0; }
/* POSTER-5b: the last page of the tab that went to Poster for a support session — the sign-in's sheet,
   holding one outcome: a lamp and a heading (green when it connected, amber when the person has to act),
   the sentence, and under a rule where to go next. */
.poster-return h1 { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-size: var(--text-2xl); }
.poster-return h1::before { flex: none; width: 9px; height: 9px; content: ""; background: var(--amber-lamp); border-radius: var(--radius-mark); transform: translateY(-2px); }
.poster-return[data-outcome="connected"] h1::before { background: var(--green-lamp); }
.poster-return p { margin-bottom: 0; color: var(--label); line-height: 1.5; overflow-wrap: anywhere; }
.poster-return .poster-return-lead { color: var(--ink); }
.poster-return .poster-return-next { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line-soft); color: var(--muted); font-size: var(--text-sm); }
/* The console: a derived field of an integration is a fact to read, never a box to type in. */
.integration-fact { display: block; min-height: var(--control-md, 40px); padding: 9px 0 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.integration-fact.unknown { color: var(--muted); font-weight: 400; }
.integration-about { max-width: 72ch; margin: 0 20px 12px; color: var(--label); line-height: 1.45; }

/* The business's settings: the shop's name takes the widest share of a wide row; the currency, set once,
   reads as a value beside the fields; the languages are four choices, not a run of marks and words. */
@media (width > 1100px) { .form-grid.three.settings-basics { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } }
.readonly-value { display: flex; align-items: center; min-height: var(--control-md); color: var(--ink); font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.flag-row.locale-choices { gap: 8px 20px; }
@media (width <= 900px) { .form-grid.two.settings-contacts { grid-template-columns: minmax(0, 1fr); } }
/* The phone list lines up with the fields above it: its words and its rules on the panel's inset (a
   dialog's), each field as wide as its column. Under 900 px each number is a card, its switch named. */
.phone-list { padding-inline: 20px; }
/* In a dialog the list already stands on the dialog's 24 px margin (.cabinet-dialog .table-scroll); a padding as well set it 48 px in. */
.cabinet-dialog .phone-list { padding-inline: 0; }
.phone-list table { table-layout: fixed; max-width: 880px; }
.phone-list th:first-child, .phone-list td:first-child { padding-left: 0; }
.phone-list th:last-child, .phone-list td:last-child { padding-right: 0; }
.phone-list th:first-child { width: 36%; }
.phone-list th:nth-child(3) { width: 150px; }
.phone-list th:last-child { width: 48px; }
.phone-list td input:not([type="radio"]) { width: 100%; min-width: 0; }
.phone-list .toggle input[type="radio"] { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--action); }
.phone-list tbody tr:last-child td { border-bottom: 0; }
.form-section > .phones-section { padding-bottom: 0; }
@media (width > 900px) { .phone-primary-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (width <= 900px) {
    .phone-list thead { display: none; }
    .phone-list table, .phone-list tbody { display: block; }
    .phone-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
    .phone-list tbody tr:last-child { border-bottom: 0; }
    .phone-list td { display: block; padding: 0; border: 0; }
    .phone-list td:first-child, .phone-list td:nth-child(2) { grid-column: 1 / -1; }
}
/* FFR-1: the social links read like the phone list above them: the network, the address (the widest),
   the caption, the switch, the remove key. Under 900 px each link is a card, its switch named. */
.social-list { padding-inline: 20px; }
.social-list table { table-layout: fixed; max-width: 980px; }
.social-list th:first-child, .social-list td:first-child { padding-left: 0; }
.social-list th:last-child, .social-list td:last-child { padding-right: 0; }
.social-list th:first-child { width: 150px; }
.social-list th:nth-child(3) { width: 24%; }
.social-list th:nth-child(4) { width: 120px; }
.social-list th:last-child { width: 48px; }
.social-list td input:not([type="checkbox"]), .social-list td select { width: 100%; min-width: 0; }
.social-list tbody tr:last-child td { border-bottom: 0; }
.settings-apps { padding-top: 0; }
@media (width > 900px) { .social-visible-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (width <= 900px) {
    .social-list thead { display: none; }
    .social-list table, .social-list tbody { display: block; }
    .social-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
    .social-list tbody tr:last-child { border-bottom: 0; }
    .social-list td { display: block; padding: 0; border: 0; }
    .social-list td:nth-child(-n+3) { grid-column: 1 / -1; }
}
/* SEO-1/SEO-2: a search result as Google draws it, the count under each SEO text, and the SEO
   section of an editor, folded until it is opened. */
.seo-snippet { display: grid; gap: 2px; max-width: 600px; margin: 0; padding: 14px 16px; background: var(--surface-subtle); border-radius: var(--radius-control); overflow-wrap: anywhere; }
.seo-snippet-caption { margin-bottom: 6px; color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
/* Under a panel already titled with the same words the caption is read, not shown twice. */
#seo-preview-panel .seo-snippet-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seo-snippet-url { color: var(--label); font-size: var(--text-sm); }
.seo-snippet-title { color: var(--ink); font-size: var(--text-lg); font-weight: 600; line-height: 1.35; }
.seo-snippet-description { margin: 0; color: var(--label); font-size: var(--text-sm); line-height: 1.5; }
.counted-field .char-count { justify-self: end; font-variant-numeric: tabular-nums; }
.counted-field .char-count.over { color: var(--red); font-weight: 600; }
.seo-section-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-md); padding: 0; color: var(--ink); background: none; border: 0; font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.seo-section-toggle .icon { width: 16px; height: 16px; color: var(--muted); }
.seo-section-body { display: grid; gap: 16px; }
.image-tile.og { display: grid; flex: none; place-items: center; width: 228px; max-width: 100%; height: 120px; }
/* SEO-1/SEO-5: lists edited in place — the verification codes, the redirects. A row of fields on a
   wide screen; under 900 px each row is a card, its fields named, the remove key at its corner. */
.edit-list { padding-inline: 20px; }
.edit-list table { table-layout: fixed; max-width: 980px; }
.edit-list th:first-child, .edit-list td:first-child { padding-left: 0; }
.edit-list th:last-child, .edit-list td:last-child { width: 48px; padding-right: 0; }
.edit-list td input, .edit-list td select { width: 100%; min-width: 0; }
.edit-list tbody tr:last-child td { border-bottom: 0; }
.verification-list table { max-width: 760px; }
.verification-list th:first-child { width: 180px; }
/* P1-5: wide enough for «302 — тимчасово» and the chevron, so the kind reads without opening it. */
.redirect-list th:nth-child(3) { width: 200px; }
.redirect-list td { vertical-align: top; }
.redirect-problem { display: block; margin-top: 4px; overflow-wrap: anywhere; }
@media (width <= 900px) {
    .edit-list thead { display: none; }
    .edit-list table, .edit-list tbody { display: block; }
    .edit-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
    .edit-list tbody tr:last-child { border-bottom: 0; }
    .edit-list td { display: block; width: auto; padding: 0; border: 0; }
    .edit-list td:not(:last-child) { grid-column: 1; }
    .edit-list td:last-child { grid-column: 2; grid-row: 1; width: auto; }
    .edit-list td[data-label]::before { display: block; margin-bottom: 4px; content: attr(data-label); color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
}
/* SEO-4: the site's pages and the blocks a page is built from. A block is a card with its type and
   its keys on top; a hidden one recedes; one the save refused is outlined. */
.site-page-path { font-family: var(--font-mono); font-size: var(--text-sm); overflow-wrap: anywhere; }
.site-blocks { display: grid; gap: 12px; padding: 0 20px; }
.site-blocks-empty { margin: 0 20px; }
.site-block { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }
.site-block.hidden-block { background: var(--surface-subtle); }
.site-block.invalid { border-color: var(--red); }
.site-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-soft); }
.site-block-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; font-weight: 600; }
.site-block-keys { display: flex; flex-wrap: wrap; gap: 6px; }
.site-block-body { display: grid; gap: 16px; padding: 16px; }
.site-block-body .form-grid { padding: 0; }
.site-block-body .alert { margin: 0; }
/* P2-9: an empty block says so in amber, under its type's hint; the save still takes it. */
.site-block-body .block-empty-hint { margin: 0; color: var(--amber); }
.site-block-items { display: grid; gap: 10px; }
.site-block-item { display: grid; gap: 12px; padding: 12px; background: var(--surface-subtle); border-radius: var(--radius-control); }
.site-block-item-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-sm); font-weight: 600; }
.site-block-add { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; padding: 16px 20px 20px; }
.site-block-add .field { flex: 1 1 220px; max-width: 320px; }
.site-product-picker { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); }
.site-page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 20px; }
.page-conflict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
@media (width <= 760px) {
    .site-blocks { padding: 0 16px; }
    .site-block-body { padding: 12px; }
    .site-block-add { padding-inline: 16px; }
}
/* Site analytics: the two consent switches belong together; the fields they unlock stand a step below. */
.toggle-stack { display: grid; padding: 0 20px; }
.toggle-stack + .form-grid { margin-top: 16px; }
.consent-note { margin: 0; }
/* Sign-in without SMS: the caution stands above the form with its mark; the form's panel keeps its inset. */
.assisted-caution { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 10px; }
.assisted-caution > .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--label); }
.assisted-form { padding-top: 0; }
.assisted-form > .form-actions:last-child { padding-bottom: 0; }
/* The change log: the time never breaks, a record's id is set as an identifier and recedes, and on a
   phone each change is a card (who and when, then what and where) rather than a table cut off at its edge. */
.audit-id { color: var(--muted); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }
@media (width <= 760px) {
    .audit-log thead { display: none; }
    .audit-log, .audit-log tbody { display: block; }
    .audit-log tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
    .audit-log tbody tr:last-child { border-bottom: 0; }
    .audit-log td { padding: 0; border: 0; }
    .audit-log td:first-child { grid-column: 2; grid-row: 1; color: var(--muted); font-size: var(--text-xs); }
    .audit-log td:nth-child(2) { grid-column: 1; grid-row: 1; font-weight: 600; }
    .audit-log td:nth-child(3), .audit-log td:nth-child(4) { grid-column: 1 / -1; }
}

/* Billing history: what a tenant was invoiced under, kept, and quieter than a live subscription. */
.billing-history { background: var(--surface-subtle); }
.billing-history .section-heading h2 { font-size: var(--text-lg); }
.billing-history th { background: var(--surface-subtle); }
.billing-history > .table-scroll { background: none; }
.billing-history td { color: var(--muted); }
.billing-history td:first-child { color: var(--ink); }
.billing-history tbody tr:hover td { background: transparent; }

/* A courier on an order: the name and the way to reach them, and once, the link to hand on. */
.courier-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0 0 14px; padding: 10px 12px; background: var(--surface-subtle); border-radius: var(--radius-control); font-size: var(--text-sm); }
.courier-label { color: var(--muted); font-size: var(--text-xs); font-weight: 600; }
.courier-link { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: -6px 0 14px; padding: 10px 12px; background: var(--surface-subtle); border-radius: var(--radius-control); font-size: var(--text-sm); }
.courier-link code { flex: 1 1 320px; overflow-wrap: anywhere; font-size: 12px; }
.courier-link small { flex: 1 1 100%; }

/* ---------------------------------------------------------------------------------- the order queue
   Scanned, not read: the number, how long it has waited and the next step lead every row. The
   columns never move; a row restyles in place as its order moves on. */
.queue-panel { overflow: hidden; }
/* The list folds into cards by the room it has, not by the window: beside an open order, or at 1140 px
   with the rail, the table no longer fits long before the window is narrow. */
.table-scroll:has(> .queue-table) { container-type: inline-size; }
.queue-table td { padding-block: 12px; }
/* Six columns at 1140 px beside the rail: the gutters between them give way before the table folds. */
@container (width >= 780px) {
    .queue-table :is(th, td) { padding-inline: 8px; }
    .queue-table :is(th, td):first-child { padding-left: 18px; }
    .queue-table :is(th, td):last-child { padding-right: 18px; }
}
.queue-number { font-family: var(--font-figures); font-size: 21px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* The number is the way into the order: it carries the engraved underline even where nothing hovers. */
.queue-table .link-button { text-decoration: none; }
.queue-table .link-button .queue-number { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklch, currentColor 30%, transparent); text-underline-offset: 5px; }
.queue-table .link-button:hover .queue-number { text-decoration-color: currentColor; }
.queue-table th:first-child { width: 5rem; }
/* How long it has waited on the first line; the clock and the chips share the second (one line at
   desktop widths, so the cell never grows a third). */
.queue-age { display: inline; margin-right: var(--space-2); color: var(--ink); font-family: var(--font-figures); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.queue-when { white-space: nowrap; }
.queue-placed { display: inline; margin-right: var(--space-2); color: var(--muted); font-size: var(--text-xs); }
.queue-placed .branch-time { font-size: inherit; }
.queue-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.queue-meta:empty { display: none; }
/* The keys keep to their content at the panel's right edge; the first key has one width whatever its
   word (the longest, «Передать курьеру», is 153 px), so Reject stands at the same place on every row. */
.queue-table td.row-actions { width: 1%; }
.queue-table td.row-actions .button { min-height: var(--control-md); padding: 0 14px; font-size: var(--text-md); }
.queue-table td.row-actions .button.primary { min-width: 8rem; }
.queue-table tr.waiting .queue-age { color: var(--amber); }
.queue-customer small { display: block; color: var(--muted); font-size: var(--text-xs); }
.table-summary.queue-total { border-top: 1px solid var(--border); }
/* The status plate scrolls sideways under the shared rule; here its scrollbar stays, so a mouse can reach the rest.
   A finger swipes it, and a bar drawn inside the plate on a phone only looks broken. */
@media (max-width: 1100px) and (pointer: fine) { .queue-filter { scrollbar-width: thin; } }
/* Up to 1100 px the rail still takes 224 px, and six columns that cannot shrink put the keys past the
   panel's edge: a card per order instead. The number, its state, how it leaves and how long it has
   waited on the first line, the customer under them, the keys last; every card keeps the same columns.
   Asked of the list's own width (container), so an order open beside it folds it too. */
@container (width < 780px) {
    .queue-table thead { display: none; }
    .queue-table, .queue-table tbody { display: block; }
    .queue-table tr { display: grid; align-items: baseline; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line-soft); }
    .queue-table tbody tr:last-child { border-bottom: 0; }
    .queue-table td { padding: 0; border: 0; }
    .queue-table tbody tr:hover td, .queue-table tbody tr.selected td { background: transparent; }
    .queue-table tbody tr:hover { background: var(--surface-hover); }
    .queue-table tbody tr.selected { background: var(--surface-accent); }
    .queue-now tr { grid-template-columns: 3.5rem 9rem minmax(0, 1fr) 13rem; grid-template-areas: "num status fulfil when" "num cust cust when" "act act act act"; }
    .queue-later tr { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "num when status" "num fulfil cust"; }
    .queue-table td:first-child { grid-area: num; }
    .queue-now td:nth-child(2), .queue-later td:nth-child(3) { grid-area: status; }
    .queue-now td:nth-child(3), .queue-later td:nth-child(4) { grid-area: fulfil; }
    .queue-now td:nth-child(4), .queue-later td:nth-child(5) { grid-area: cust; }
    .queue-now td:nth-child(5), .queue-later td:nth-child(2) { grid-area: when; }
    .queue-when { white-space: normal; }
    .queue-table td.row-actions { grid-area: act; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); width: auto; white-space: normal; }
    .queue-table td.row-actions > * + * { margin-left: 0; }
    /* An order waiting for the customer's money has no key to press: no empty row under it. */
    .queue-table td.row-actions:empty { display: none; }
}
@container (width < 560px) {
    /* A phone, or the list beside an open order: the number with its state at the right edge, the customer, then the time with how it leaves;
       the two keys share the card's width equally whatever their words. */
    .queue-table tr { gap: var(--space-1) var(--space-3); padding: var(--space-3) 14px; }
    .queue-now tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num status" "cust cust" "when fulfil" "act act"; }
    .queue-later tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num status" "when when" "cust fulfil"; }
    .queue-now td:nth-child(2), .queue-now td:nth-child(3), .queue-later td:nth-child(3), .queue-later td:nth-child(4) { justify-self: end; }
    .queue-table td.row-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-top: var(--space-2); }
    .queue-table td.row-actions .button, .queue-table td.row-actions .button.primary { min-width: 0; min-height: var(--control-lg); }
}
/* The reject question: the number set as in the queue, the phone under the name. */
.reject-facts { align-items: baseline; }
.reject-facts small { display: block; color: var(--muted); font-size: var(--text-xs); }
.queue-auto-refresh { min-height: var(--control-md); padding-inline: var(--space-1); }
.order-source { margin-left: 6px; }
/* Times on the operator screens are the branch's own; the zone is named only when it matters. */
.branch-time { white-space: nowrap; }
.branch-time .zone { margin-left: 4px; color: var(--muted); font-weight: 500; }
.order-timing { gap: 4px; }
.order-timing .zone { color: inherit; opacity: .8; }

/* Cancellation requests sit above the queue: work the operator must answer before it goes stale. */
.cancellation-requests { margin: 0 0 var(--space-5); overflow: hidden; background: var(--surface); border: 1px solid var(--amber-line); border-radius: var(--radius-surface); }
.cancellation-requests h2 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; font-size: var(--text-md); background: var(--amber-soft); border-bottom: 1px solid var(--amber-line); }
.cancellation-requests h2::before { width: 8px; height: 8px; content: ""; background: var(--amber-lamp); border-radius: var(--radius-mark); }

/* UI-2: the queue as the concept draws it — a toolbar (the stages, a search), the orders as rows grouped by stage,
   and the open order as a panel beside them that keeps its decision at its foot. */
.queue-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.queue-toolbar .filter-bar { margin: 0; }
.filter-bar .button .n { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.filter-bar .button .n.wait { color: var(--amber); font-weight: 700; }
.search-field { position: relative; display: block; width: min(300px, 100%); }
.search-field > .icon { position: absolute; top: 50%; left: 11px; width: 16px; height: 16px; color: var(--muted); transform: translateY(-50%); pointer-events: none; }
.search-field input { width: 100%; padding-left: 34px; }
.order-list { overflow: hidden; }
.group-title { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.group-gap { height: 6px; background: var(--surface-subtle); border-top: 1px solid var(--line-soft); }
.order-row { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 12px 20px; color: var(--ink); text-align: left; background: transparent; border: 0; border-top: 1px solid var(--line-soft); cursor: pointer; font: inherit; transition: background-color 100ms ease; -webkit-tap-highlight-color: transparent; }
.group-title + .order-row { border-top: 0; }
@media (hover: hover) { .order-row:hover { background: var(--surface-hover); } }
.order-row:active { background: var(--surface-accent); }
.order-row.selected, .order-row[aria-pressed="true"] { background: var(--surface-accent); }
.order-row:focus-visible { outline-offset: -2px; }
/* A new order carries the lamp as a short amber edge — the one stripe the system allows, because it is the lamp. */
.order-row.new::before { position: absolute; top: 10px; bottom: 10px; left: 0; width: 3px; content: ""; background: var(--amber-lamp); border-radius: 0 3px 3px 0; }
.order-head { display: grid; min-width: 0; }
.order-no { font-family: var(--font-figures); font-size: 20px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.order-way { display: flex; align-items: center; gap: 5px; margin-top: 1px; overflow: hidden; color: var(--muted); font-size: var(--text-xs); white-space: nowrap; }
.order-way .icon { flex: none; width: 13px; height: 13px; }
.order-who { display: grid; min-width: 0; }
.order-who strong { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; color: var(--muted); font-size: var(--text-sm); }
.order-meta .badge { min-height: 0; font-size: var(--text-xs); }
.order-side { display: grid; justify-items: end; gap: 3px; }
.order-side .placed { color: var(--subtle); font-size: var(--text-xs); white-space: nowrap; }
.order-side .placed .zone { margin-left: 4px; }
.age { color: var(--muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.age.wait { color: var(--amber); font-size: var(--text-md); }
.queue-placed { color: var(--muted); font-size: var(--text-xs); }
.queue-panel .table-summary { margin: 0; padding: 10px 20px 14px; color: var(--muted); font-size: var(--text-xs); border-top: 1px solid var(--line-soft); }
.queue-later { border-top: 1px solid var(--line-soft); }
.queue-later .order-row:first-child { border-top: 0; }

/* Master and detail: the open order is a column of its own that stays in view while the list scrolls. */
.queue-layout.with-detail { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.queue-layout.with-detail > .order-detail { position: sticky; top: 20px; display: flex; flex-direction: column; max-height: max(480px, calc(100dvh - 220px)); margin: 0; overflow: hidden; animation: detail-in 220ms var(--ease-out); }
.queue-layout > .order-detail:focus { outline: none; }
@keyframes detail-in { from { opacity: 0; transform: translateX(12px); } }
@media (max-width: 1100px) {
    .queue-layout.with-detail { grid-template-columns: minmax(0, 1fr) 380px; }
}
/* No room for two columns: a sheet over the list from the right edge it would have stood at. */
@media (max-width: 1000px) {
    .queue-layout.with-detail { display: block; }
    .queue-layout.with-detail > .order-detail { position: fixed; inset: 0 0 0 auto; z-index: 60; width: min(480px, 100vw); max-height: none; border-radius: 0; border-block: 0; border-right: 0; box-shadow: var(--shadow-3); }
}
@media (prefers-reduced-motion: reduce) { .queue-layout.with-detail > .order-detail { animation: none; } }
.order-detail { margin-top: var(--space-5); overflow: hidden; }
.detail-scroll { display: grid; gap: 18px; min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.detail-top h2 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.detail-top p { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); }
.detail-top-end { display: flex; align-items: center; gap: 6px; margin: -4px -8px 0 0; }
.who { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.who .avatar { width: 38px; height: 38px; }
.who strong { display: block; font-weight: 600; }
.who span.num { color: var(--muted); font-size: var(--text-sm); text-align: left !important; }
.where { display: grid; gap: 8px; padding: 12px 14px; background: var(--surface-subtle); border-radius: 10px; font-size: 13.5px; }
.where > div { display: flex; gap: 9px; }
.where .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.note { padding: 10px 12px; color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 10px; font-size: var(--text-sm); font-weight: 500; }
.items { display: grid; gap: 10px; }
.item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; }
.item .q { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.item small { display: block; color: var(--muted); font-size: 12.5px; }
.item .tag { margin-left: 6px; vertical-align: 1px; }
.totals { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13.5px; }
.totals > div { display: flex; justify-content: space-between; gap: 12px; color: var(--label); }
.totals small { display: block; color: var(--muted); font-size: var(--text-xs); }
.totals .grand { padding-top: 4px; color: var(--ink); font-size: var(--text-lg); font-weight: 650; }
.totals .cash-change { color: var(--amber); font-weight: 600; }
.detail-actions { display: grid; gap: 12px; padding: 16px 20px 18px; background: var(--surface); border-top: 1px solid var(--border); }
.detail-buttons { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; }
.detail-buttons .button.primary { grid-column: span 2; }
.order-detail .form-section { margin: 0; padding: 16px 0 0; border-top: 1px solid var(--line-soft); }
.detail-more { border-top: 1px solid var(--line-soft); }
.detail-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0 2px; color: var(--label); cursor: pointer; font-size: var(--text-sm); font-weight: 600; list-style: none; }
.detail-more > summary::-webkit-details-marker { display: none; }
.detail-more > summary .icon { width: 14px; height: 14px; color: var(--muted); transition: transform 200ms var(--ease-out); }
.detail-more[open] > summary .icon { transform: rotate(180deg); }
.detail-more > .form-section:first-of-type { border-top: 0; }
.order-detail .form-section .section-heading, .order-detail .form-section .form-grid { padding-inline: 0; }
.order-detail .form-section .section-heading { padding-top: 0; }
@media (width <= 760px) {
    .queue-toolbar { flex-direction: column; align-items: stretch; }
    .search-field { width: 100%; }
    .order-row { grid-template-columns: 56px minmax(0, 1fr) auto; padding-inline: 14px; }
    .order-way span { display: none; }
    .group-title { padding-inline: 14px; }
}
/* The kitchen ticket of the open order: its state beside the title, the one button under it. */
.operator-kitchen-ticket .section-heading { flex-wrap: wrap; }
.operator-kitchen-ticket-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 20px; }
.order-detail .operator-kitchen-ticket-body { padding-inline: 0; }
.operator-kitchen-ticket-body p { margin: 0; }
/* POSTER-2: the order's line about the Poster register — the word and the sentence, and under them what a person here has to do. */
.operator-poster .section-heading p { max-width: 68ch; margin: 4px 0 0; color: var(--label); overflow-wrap: anywhere; }
.operator-poster > .alert { margin: 10px 20px 0; }
.operator-poster-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 20px 0; }
.operator-poster > .pos-print-error { margin: 8px 20px 0; font-size: var(--text-sm); }
.order-detail .operator-poster > :is(.alert, .pos-print-error) { margin-inline: 0; }
.order-detail .operator-poster-actions { padding-inline: 0; }

/* --------------------------------------------------------------------------------- station bars
   The till and the kitchen share one strip of chrome: a graphite band holding where this is, who is
   on it, and the way to hand it on. Everything else belongs to the work under it. */
.pos-shell, .kds-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; color: var(--ink); background: var(--canvas); }
.pos-bar, .kds-bar { --bar-ink: var(--steel-100); --bar-muted: var(--steel-400); --bar-line: oklch(100% 0 0 / .14); --bar-hover: oklch(100% 0 0 / .08); display: flex; align-items: center; gap: 8px; flex: none; min-height: 52px; padding: 4px 16px; color: var(--bar-ink); background: var(--steel-900); border-bottom: 1px solid var(--steel-950); }
.pos-mark { display: grid; place-items: center; flex: none; width: 32px; height: 32px; color: var(--steel-900); background: var(--steel-100); border-radius: var(--radius-control); font-size: 16px; font-weight: 700; }
.pos-mark .icon { width: 19px; height: 19px; }
.pos-title, .kds-title { flex: none; color: #fff; font-size: var(--text-lg); font-weight: 600; white-space: nowrap; }
/* When the strip runs short the names give way, never the keys or the selectors: the business first,
   then the station, then the person, each ending in an ellipsis rather than a clipped letter. */
.pos-bar .shell-tenant, .kds-bar .shell-tenant { flex: 0 3 auto; min-width: 0; max-width: 48ch; margin-left: 2px; color: var(--bar-muted); font-weight: 500; opacity: 1; }
.pos-bar-spacer, .kds-bar-spacer { flex: 1; }
.pos-station, .kds-station { flex: 0 1 auto; min-width: calc(6ch + 20px); max-width: 24ch; overflow: hidden; padding: 3px 9px; color: var(--bar-ink); border: 1px solid var(--bar-line); border-radius: 4px; font-size: var(--text-xs); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pos-cashier, .kds-cook { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 28ch; color: var(--bar-ink); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
:is(.pos-cashier, .kds-cook) > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:is(.pos-cashier, .kds-cook) > .icon { flex: none; }
/* Who is on the station outranks the business's name beside it: a long name gives way first, the person's stays whole. */
@media (min-width: 1024px) { :is(.pos-cashier, .kds-cook) { flex-shrink: 0; } }
:is(.pos-bar, .kds-bar) .shell-selector { flex: none; }
:is(.pos-bar, .kds-bar) .button { flex: none; min-height: 36px; color: var(--bar-ink); background: transparent; border-color: var(--bar-line); box-shadow: none; }
@media (hover: hover) { :is(.pos-bar, .kds-bar) .button:hover:not(:disabled) { color: #fff; background: var(--bar-hover); border-color: oklch(100% 0 0 / .24); } }
/* Handing the station on is the one action the bar exists for: the light key on the dark strip. */
:is(.pos-bar, .kds-bar) .button.pos-switch, :is(.pos-bar, .kds-bar) .button.kds-switch { min-height: var(--control-lg); padding-inline: 16px; color: var(--steel-900); background: var(--steel-100); border-color: var(--steel-100); font-weight: 600; }
@media (hover: hover) { :is(.pos-bar, .kds-bar) .button.pos-switch:hover:not(:disabled), :is(.pos-bar, .kds-bar) .button.kds-switch:hover:not(:disabled) { color: var(--steel-900); background: #fff; border-color: #fff; } }
:is(.pos-bar, .kds-bar) .icon-button { width: var(--control-lg); height: var(--control-lg); color: var(--bar-ink); }
:is(.pos-bar, .kds-bar) .icon-button:hover { color: #fff; background: var(--bar-hover); }
:is(.pos-bar, .kds-bar) .shell-selector select { --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a2a19d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); min-width: 0; min-height: 36px; color: var(--bar-ink); background-color: transparent; border-color: var(--bar-line); box-shadow: none; }
:is(.pos-bar, .kds-bar) .shell-selector select option { color: var(--ink); background: var(--surface); }
:is(.pos-bar, .kds-bar) :focus-visible { outline-color: var(--steel-100); }
/* UI-2: the concept's station bar — the business's mark on a light plate, the station, the person, the clock, the way back. */
.station-bar .station-mark.brand-mark { width: 32px; height: 32px; color: var(--steel-900); background: var(--steel-100); border-radius: 9px; font-size: 14px; }
.station-bar .station-mark.brand-mark:has(> img[data-state="loaded"]) { background: #fff; }
.station-bar .clock { margin-inline: 6px; color: var(--bar-ink); font-family: var(--font-figures); font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.kds-bar .station-clock { display: none; }
.station-bar .nav-return { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; color: var(--bar-ink); background: oklch(25% 0.008 95); border: 1px solid oklch(32% 0.008 95); border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 600; text-decoration: none; transition: background-color 120ms ease, transform var(--press) var(--ease-out); }
.station-bar .nav-return:hover { color: #fff; background: oklch(30% 0.008 95); }
.station-bar .nav-return:active { transform: scale(.97); }
.station-menu .menu-pop { color: var(--ink); min-width: 230px; }
.station-menu > summary { color: var(--bar-ink); background: oklch(25% 0.008 95); border: 1px solid oklch(32% 0.008 95); border-radius: var(--radius-control); transition: background-color 120ms ease, transform var(--press) var(--ease-out); }
.station-menu > summary:hover, .station-menu[open] > summary { color: #fff; background: oklch(30% 0.008 95); }
.station-menu > summary:active { transform: scale(.95); }
.station-menu > summary .icon { width: 20px; height: 20px; }
.station-menu .menu-pop .workspace-switch { display: flex; justify-content: flex-start; gap: 8px; min-height: 34px; padding: 0 10px; color: var(--ink); background: none; border: 0; box-shadow: none; font-weight: 500; text-decoration: none; }
.station-menu .menu-pop .workspace-switch:hover { background: var(--surface-hover); }
.menu-prefs { display: grid; gap: 6px; margin: 4px 0; padding: 8px 6px; border-block: 1px solid var(--line-soft); }
a.menu-item { text-decoration: none; }
.pos-main, .kds-main { flex: 1; min-height: 0; overflow: hidden; }
.pos-switch-refused { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; border-width: 0 0 1px; border-radius: 0; }
.station-overlay { z-index: calc(var(--z-support) + 1); }
/* The overlay's one sentence is its heading: set on the dialog's inset like every other dialog's content. */
.station-overlay .cabinet-dialog > h2 { margin: 0 24px; font-size: var(--text-xl); }
@media (max-width: 1180px) {
    /* A counter or pass screen of 1024–1180: the other workspaces stay one tap away as icons, each still
       named by its hidden label, and the business keeps a shorter place instead of leaving the strip. */
    :is(.pos-bar, .kds-bar) .shell-tenant { max-width: 20ch; }
    :is(.pos-bar, .kds-bar) .button.tertiary { width: 36px; padding: 0; }
    :is(.pos-bar, .kds-bar) .button.tertiary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 1023px) {
    :is(.pos-bar, .kds-bar) .shell-tenant { display: none; }
}
@media (width <= 760px) {
    /* A phone: the mark says which workspace this is, so its word and the switch key's label step back
       (still read aloud), and the station and the person keep the room. */
    :is(.pos-title, .kds-title), :is(.pos-bar, .kds-bar) :is(.button.pos-switch, .button.kds-switch) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    :is(.pos-bar, .kds-bar) :is(.button.pos-switch, .button.kds-switch) { width: var(--control-lg); padding: 0; }
    .station-overlay .cabinet-dialog > h2 { margin-inline: 16px; }
}
@media (width <= 480px) {
    /* A narrow phone has the keys' width and not one name more: a name cut to «L…» says nothing, so the
       person is read aloud (and named in the chip's title) rather than drawn as a stub. */
    :is(.pos-cashier, .kds-cook) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* --------------------------------------------------------------------------- station chooser (PIN)
   The people who may work here, by name only; one tap, then six digits on keys big enough for a thumb. */
/* One top inset for every state (names, keypad, loading), grown with the screen's height: the heading
   never jumps between states, a wall monitor is not top-heavy, and 1366×768 keeps the foot in view. */
.station-chooser { display: flex; flex-direction: column; align-items: center; gap: 20px; height: 100%; padding: clamp(32px, 20vh - 100px, 128px) 16px 20px; overflow-y: auto; }
.station-chooser-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.station-chooser-head h1 { margin: 0; font-size: var(--text-3xl); }
.station-chooser-head p { margin: 0; color: var(--muted); font-size: var(--text-lg); }
/* Which station this is: a meta line under the heading, never a label above it. */
.station-chooser-name { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--text-md); font-weight: 500; }
.station-chooser-name .icon { width: 16px; height: 16px; }
.station-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(640px, 100%); }
/* The people sit centred under the heading, as many to a row as fit (three at most), and a
   two-word name stays on one line. */
.station-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 280px)); justify-content: center; gap: 12px; width: min(880px, 100%); }
.station-person { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); cursor: pointer; font-size: var(--text-xl); font-weight: 600; text-align: left; touch-action: manipulation; transition: border-color 120ms ease, background-color 120ms ease, transform var(--press) var(--ease-out); }
.station-person > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.station-person:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--input-border); }
.station-person:active:not(:disabled) { transform: scale(.97); }
.station-person:disabled { opacity: .5; cursor: not-allowed; }
.station-person-mark { display: grid; place-items: center; flex: none; width: 44px; height: 44px; color: var(--ink); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-surface); font-family: var(--font-figures); font-size: var(--text-xl); }
.station-roster-empty { max-width: 520px; text-align: center; }
.station-keypad { display: grid; justify-items: center; gap: 12px; width: min(340px, 100%); }
.station-pin-for { margin: 0; color: var(--ink); font-size: var(--text-xl); font-weight: 600; text-align: center; }
/* One field shows the progress: the keyboard types into it and its six marks are what it shows. */
.station-pin-field { display: grid; width: 100%; }
.station-pin-field > * { grid-area: 1 / 1; }
.station-pin-input, .station-pin-input:disabled { width: 100%; height: 56px; min-height: 56px; color: transparent; caret-color: transparent; font-size: 22px; text-align: center; }
.station-pin-dots { display: flex; gap: 14px; place-self: center; pointer-events: none; }
.station-pin-dots span { width: 12px; height: 12px; border: 2px solid var(--subtle); border-radius: var(--radius-mark); transition: background-color 90ms ease, border-color 90ms ease; }
.station-pin-dots span.filled { background: var(--ink); border-color: var(--ink); }
/* A wrong PIN is said in a line kept for it: the keys under the finger never move. */
.station-pin-status { width: 100%; min-height: 24px; }
.station-pin-error { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: var(--red); font-weight: 600; text-align: center; text-wrap: balance; }
.station-pin-error::before { flex: none; width: 8px; height: 8px; content: ""; background: var(--red-lamp); border-radius: var(--radius-mark); }
.station-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.station-key { min-height: 68px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--radius-large); cursor: pointer; font-family: var(--font-figures); font-size: 28px; font-weight: 600; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 90ms ease, transform var(--press) var(--ease-out); }
.station-key:hover:not(:disabled) { background: var(--surface-hover); }
.station-key:active:not(:disabled) { background: var(--surface-accent); transform: scale(.96); }
.station-key-soft { color: var(--muted); font-family: var(--font-ui); font-size: var(--text-md); font-weight: 600; }
.station-key-soft .icon { width: 24px; height: 24px; }
/* The way back is a full-width touch key under the keypad; the busy spinner sits inside its left end. */
.station-keypad .form-actions { position: relative; justify-content: center; width: 100%; padding: 0; }
.station-keypad .form-actions .button { flex: 1; min-height: var(--control-lg); font-size: var(--text-lg); }
.station-keypad .form-actions .spinner { position: absolute; top: 50%; left: 16px; z-index: 1; margin-top: -8px; }
.station-chooser-foot { margin-top: auto; }
@media (width <= 760px) {
    .station-roster { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------------------------------ the till
   Worked standing, at arm's length, with a queue waiting: the menu keys on the left, the ticket on
   the right with its total and the one button that matters pinned at its foot. */
.pos-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: 100%; }
/* The search, the drawer and the categories stay put; only the keys scroll under them. */
.pos-menu { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 16px 0; overflow: hidden; }
.pos-menu-bar { display: flex; gap: 8px; flex: none; margin-bottom: 12px; }
.pos-branch, .pos-search { min-height: var(--control-lg); height: var(--control-lg); padding: 0 12px; font-size: var(--text-lg); }
/* A long branch name ends in an ellipsis instead of pushing the search off the row. */
.pos-branch { flex: 0 1 auto; min-width: 120px; max-width: min(360px, 45%); padding-right: 34px; font-weight: 600; }
.pos-search { flex: 1 1 200px; min-width: 0; }
.pos-branch-name { display: block; flex: 0 1 auto; min-width: 0; max-width: min(360px, 45%); height: var(--control-lg); overflow: hidden; padding: 0 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); font-size: var(--text-lg); font-weight: 600; line-height: calc(var(--control-lg) - 2px); text-overflow: ellipsis; white-space: nowrap; }
/* Every category in view: the keys wrap onto a second row rather than hiding off the edge. */
.pos-categories { display: flex; flex-wrap: wrap; gap: 8px; flex: none; margin-bottom: 12px; }
.pos-chip { flex: none; max-width: 240px; overflow: hidden; min-height: var(--control-lg); padding: 0 16px; text-overflow: ellipsis; color: var(--label); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; font-size: var(--text-md); font-weight: 600; white-space: nowrap; touch-action: manipulation; transition: background-color 90ms ease, border-color 90ms ease, transform var(--press) var(--ease-out); }
.pos-chip:hover { border-color: var(--input-border); }
.pos-chip:active { transform: scale(.97); }
.pos-chip.chosen { color: var(--on-action); background: var(--action); border-color: var(--action); }
/* The keys: one size, a name of up to three lines, the price on one line along the row. The 2px inset
   keeps a key's hover edge and press from being clipped by the scroller. The rows are as tall as their
   tallest key: the scroller has a height of its own, and auto rows would stay at a key's min-height
   with a photo's name and price spilling out under the next row. */
.pos-products { display: grid; flex: 1 1 auto; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); grid-auto-rows: max-content; gap: 8px; align-content: start; min-height: 0; margin-inline: -2px; padding: 2px 2px 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pos-product { display: grid; grid-template-rows: auto 1fr auto; align-content: start; gap: 6px; min-height: 108px; padding: 10px 12px 12px; border-radius: 14px !important; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); cursor: pointer; text-align: left; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color 90ms ease, background-color 90ms ease, transform var(--press) var(--ease-out); }
.pos-product:not(:has(img)) { grid-template-rows: 1fr auto; }
.pos-product:hover:not(:disabled) { border-color: var(--input-border); }
.pos-product:active:not(:disabled) { background: var(--surface-accent); transform: scale(.97); }
.pos-product img { width: 100%; height: 84px; object-fit: cover; border-radius: 4px; }
.pos-product-name { display: -webkit-box; overflow: hidden; font-size: var(--text-md); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pos-product-price { color: var(--label); font-size: var(--text-md); font-weight: 500; font-variant-numeric: tabular-nums; }
/* Off the menu for now: the key keeps its row and its price keeps the line of its neighbours' prices;
   beside the price, a lamp and a word, not fault red. */
.pos-product.off { grid-template-columns: minmax(0, 1fr) auto; background: var(--surface-subtle); cursor: not-allowed; }
.pos-product.off :is(img, .pos-product-name) { grid-column: 1 / -1; }
.pos-product.off :is(.pos-product-name, .pos-product-price) { color: var(--muted); }
.pos-product.off .pos-product-name { text-decoration: line-through; text-decoration-color: var(--muted); }
.pos-product-off { grid-row: -2; grid-column: 2; align-self: end; }

.pos-ticket { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 16px 16px; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--border); }
.pos-ticket-heading { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 6px; font-size: var(--text-lg); }
/* Empty or full, the ticket keeps its total and the place key at its foot: the hand finds them in one place. */
.pos-ticket-empty { flex: 1 1 auto; margin: 0 0 12px; padding: 18px 0; color: var(--muted); border-top: 1px solid var(--line-soft); font-size: var(--text-md); }
.pos-lines { display: grid; flex: 1 1 auto; align-content: start; gap: 0; min-height: 96px; margin: 0 0 8px; padding: 0; overflow-y: auto; list-style: none; border-top: 1px solid var(--line-soft); }
.pos-line { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.pos-line-head { display: flex; justify-content: space-between; gap: 10px; font-size: var(--text-md); }
.pos-line-head strong { overflow-wrap: anywhere; }
.pos-line-total { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-line-option { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
/* One row per line: the quantity keys, the note for the kitchen, and the remove key. */
.pos-line-actions { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 4px; }
.pos-step { display: grid; place-items: center; width: 44px; height: 40px; padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius-control); cursor: pointer; font-size: 20px; line-height: 1; touch-action: manipulation; transition: background-color 90ms ease, transform var(--press) var(--ease-out); }
.pos-step:hover:not(:disabled) { border-color: var(--ink); }
.pos-step:active:not(:disabled) { background: var(--surface-accent); transform: scale(.94); }
.pos-qty { min-width: 30px; font-family: var(--font-figures); font-size: var(--text-lg); font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.pos-remove { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: var(--muted); background: transparent; border: 0; border-radius: var(--radius-control); cursor: pointer; font-size: 18px; touch-action: manipulation; }
.pos-remove:hover:not(:disabled) { color: var(--red); background: var(--red-soft); }
.pos-note { width: 100%; min-width: 0; min-height: 40px; height: 40px; padding: 0 10px; font-size: var(--text-sm); box-shadow: none; }
.pos-sum { display: flex; justify-content: space-between; align-items: baseline; flex: none; padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--text-md); font-weight: 600; }
.pos-sum strong { font-family: var(--font-figures); font-size: 30px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.pos-sum-note { flex: none; margin: 2px 0 10px; }
.pos-payment { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; flex: none; margin-bottom: 10px; }
.pos-pay { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; color: var(--label); background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius-control); cursor: pointer; font-size: var(--text-lg); font-weight: 600; touch-action: manipulation; transition: background-color 90ms ease, border-color 90ms ease, transform var(--press) var(--ease-out); }
.pos-pay:active:not(:disabled) { transform: scale(.97); }
.pos-pay.chosen { color: var(--ink); background: var(--surface-accent); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pos-pay.chosen::before { width: 8px; height: 8px; content: ""; background: var(--ink); border-radius: var(--radius-mark); }
.pos-payment-choose, .pos-payment-none { flex: none; margin: 0 0 10px; }
.pos-shift-required { flex: none; gap: 10px; margin-bottom: 10px; }
.pos-shift-required .button { justify-self: start; }
.pos-shift-required-note { flex: none; margin: 0 0 10px; font-size: var(--text-sm); }
#pos-place { flex: none; min-height: var(--control-touch); font-size: var(--text-xl); }

/* A dish with choices: its options as keys, the chosen one outlined in ink. */
.pos-dialog { width: min(640px, 100%); }
.pos-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; padding: 0 24px; }
.pos-option { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; min-height: 52px; padding: 10px 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius-control); cursor: pointer; font-size: var(--text-md); text-align: left; touch-action: manipulation; transition: transform var(--press) var(--ease-out); }
.pos-option:active:not(:disabled) { transform: scale(.97); }
.pos-option.chosen { background: var(--surface-accent); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.pos-option:disabled { opacity: .5; cursor: not-allowed; }
.pos-option > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pos-option-price { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Orders ready to hand over: a bounded strip above the ticket; one quiet line when there are none. */
.pos-ready { display: grid; flex: none; gap: 8px; margin: -2px 0 14px; padding: 10px 0 12px; border-bottom: 1px solid var(--border); }
.pos-ready.empty { padding-block: 2px 10px; }
.pos-ready-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pos-ready-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--text-md); }
.pos-ready-head h2::before { width: 8px; height: 8px; content: ""; background: var(--green-lamp); border-radius: var(--radius-mark); }
.pos-ready.empty .pos-ready-head h2 { color: var(--muted); font-weight: 500; }
.pos-ready.empty .pos-ready-head h2::before { background: var(--steel-400); }
/* The count is a figure beside the lamp, not a second lamp. */
.pos-ready-head .badge { min-width: 28px; justify-content: center; font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.pos-ready-head .badge::before { display: none; }
.pos-ready-list { display: grid; gap: 6px; max-height: min(34vh, 300px); margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.pos-ready-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head button" "lines button"; align-items: center; gap: 2px 10px; padding: 8px 8px 8px 12px; background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--radius-surface); }
.pos-ready-card-head { grid-area: head; display: flex; align-items: baseline; gap: 8px; }
.pos-ready-number { font-family: var(--font-figures); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.pos-ready-waiting { color: var(--muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-ready-lines { grid-area: lines; min-width: 0; margin: 0; padding: 0; color: var(--label); font-size: var(--text-sm); list-style: none; }
.pos-ready-lines li { overflow-wrap: anywhere; }
.pos-ready-handover { grid-area: button; justify-content: center; min-width: 104px; min-height: var(--control-lg); }
.pos-ready-stale, .pos-ready-notice, .pos-ready-problem { margin: 0; font-size: var(--text-xs); }
.pos-ready-stale { color: var(--amber); }
.pos-ready.stale .pos-ready-card { opacity: .6; }
.pos-ready-notice { color: var(--muted); }
.pos-ready-problem { color: var(--red); }
.pos-done-ready { width: min(460px, 100%); }
.pos-done-ready .pos-ready { margin: 0; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); }

/* A sale rung up: the number the customer is given, the facts, the next sale one key away. */
.pos-done { display: grid; place-items: center; align-content: safe center; gap: 14px; height: 100%; padding: 20px; overflow-y: auto; }
.pos-done-card { display: grid; justify-items: center; gap: 10px; width: min(460px, 100%); padding: 28px 24px 22px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
@starting-style { .pos-done-card { opacity: 0; transform: scale(.97); } }
.pos-done-mark { display: grid; place-items: center; width: 48px; height: 48px; color: #fff; background: var(--green-lamp); border-radius: var(--radius-large); font-size: 24px; }
.pos-done-mark .icon { width: 26px; height: 26px; }
.pos-done-card h1 { margin: 0; font-size: var(--text-xl); }
.pos-done-number { margin: 0; color: var(--muted); font-size: var(--text-md); }
.pos-done-number strong { display: block; color: var(--ink); font-family: var(--font-figures); font-size: 44px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pos-done-facts { display: grid; gap: 0; width: 100%; margin: 6px 0; border-top: 1px solid var(--line-soft); }
.pos-done-facts > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: var(--text-sm); }
.pos-done-facts dt { color: var(--muted); }
.pos-done-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
/* The total is the figure the customer is told. */
.pos-done-facts > div:first-child { align-items: baseline; }
.pos-done-facts > div:first-child dd { font-family: var(--font-figures); font-size: var(--text-xl); }
/* The next sale is the widest key on the card, at touch height; the rest share its row, so the
   strip of orders to hand over stays in view under the card on a 1366×768 till. */
.pos-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; margin-top: 4px; }
#pos-new-order { flex: 2 1 0; min-height: var(--control-touch); }
.pos-done-actions .button:not(#pos-new-order) { flex: 1 1 0; min-height: var(--control-lg); }
.pos-done-note { margin: 2px 0 0; }

/* The drawer's state: one row above the menu, glanced at between customers. */
.pos-shift { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; padding: 8px 8px 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); font-size: var(--text-sm); }
.pos-shift.none { background: var(--amber-soft); border-color: var(--amber-line); }
.pos-shift .button { min-height: var(--control-md); }
.pos-shift-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; white-space: nowrap; }
.pos-shift-state.none { color: var(--amber); }
.pos-shift-state.none::before { width: 8px; height: 8px; content: ""; background: var(--amber-lamp); border-radius: var(--radius-mark); }
.pos-shift-dot { width: 8px; height: 8px; background: var(--green-lamp); border-radius: var(--radius-mark); }
.pos-shift-expected { color: var(--label); white-space: nowrap; }
.pos-shift-expected strong { color: var(--ink); font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.pos-shift-hint { flex: 1 1 200px; min-width: 0; font-size: var(--text-xs); }
.pos-shift-spacer { flex: 1; }
.pos-shift-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }

/* What the till's printer did with a sale. */
.pos-print { display: grid; gap: 8px; width: 100%; padding: 10px 0 4px; border-top: 1px solid var(--line-soft); text-align: left; }
.pos-print-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--text-sm); }
.pos-print-label { color: var(--muted); }
.pos-print-actions { margin-left: auto; }
.pos-print-actions .button { min-height: var(--control-lg); }

@media (max-width: 1180px) {
    /* A 1024 counter screen keeps the ticket beside the menu, a little narrower. */
    .pos-grid { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 1023px) {
    /* A phone behind the counter: the ticket under the menu rather than a column that leaves neither usable. */
    .pos-grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .pos-ticket { max-height: 52vh; border-top: 1px solid var(--border); border-left: 0; }
    .pos-ready-list { max-height: 22vh; }
    .pos-products { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    /* Stacked, the categories are one row that scrolls sideways and fades where it goes on. */
    .pos-categories { flex-wrap: nowrap; padding-bottom: 2px; overflow-x: auto; scrollbar-width: thin; mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
    .station-chooser { padding-top: 18px; }
    .pos-shift-hint { display: none; }
}
@media (width <= 760px) {
    /* A phone: the till is one page that scrolls, the menu then the ticket, with the place key held at
       the foot of the screen once the ticket is in view, not two cramped scrollers. */
    .pos-shell { height: auto; min-height: 100dvh; }
    .pos-main { overflow: visible; }
    .pos-grid { height: auto; grid-template-rows: auto auto; }
    .pos-menu, .pos-products, .pos-lines { overflow: visible; }
    .pos-ticket { max-height: none; overflow: visible; }
    #pos-place { position: sticky; bottom: 8px; }
    .pos-menu-bar { flex-wrap: wrap; }
    .pos-branch, .pos-branch-name { flex: 1 1 100%; max-width: none; }
    .pos-options { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
}

/* ---------------------------------------------------------------------------------- the kitchen board
   The dark equipment panel at the pass (dark unless a cook chose light). Read from 1.5 to 3 m by
   somebody with their hands full: the number and the minutes are the loudest things on it, then what
   to make, then one key. New work carries the lamp; the ticket next to start stands forward. */
.kds-main { display: flex; flex-direction: column; padding: 12px 16px 16px; }
.kds-head { display: flex; flex: none; align-items: center; gap: 12px; margin-bottom: 12px; }
/* A branch that can be switched is a select with its chevron; the one branch there is is a name, not a control. */
.kds-branch { min-width: 0; min-height: var(--control-lg); height: var(--control-lg); padding: 0 34px 0 14px; color: var(--ink); background-color: var(--surface); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; border: 1px solid var(--border); border-radius: var(--radius-control); font-size: var(--text-lg); font-weight: 700; }
.kds-branch-name { min-width: 0; overflow: hidden; color: var(--ink); font-size: var(--text-xl); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.kds-count { color: var(--label); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }
.kds-clock { color: var(--ink); font-family: var(--font-figures); font-size: 30px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kds-sound { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: var(--control-lg); padding: 0 14px; color: var(--label); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.kds-sound.on { color: var(--ink); border-color: var(--green-line); }
/* Silent is the state a kitchen misses an order in: until the sound is on the key says so in amber, not in grey. */
.kds-sound:not(.on) { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }

/* The exceptions: said across the pass, never a dialog; the board under them keeps working. */
.kds-cancelled, .kds-stale, .kds-print-alert { display: flex; flex: none; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px; padding: 12px 16px; border-radius: var(--radius-surface); overflow-wrap: anywhere; }
.kds-cancelled { justify-content: space-between; align-items: center; color: #fff; background: var(--red-lamp); font-size: var(--text-xl); }
.kds-dismiss { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: #fff; background: transparent; border: 1px solid oklch(100% 0 0 / .5); border-radius: var(--radius-control); cursor: pointer; font-size: 20px; }
.kds-dismiss:hover { background: oklch(100% 0 0 / .12); }
.kds-notice { flex: none; margin: 0 0 8px; padding: 10px 14px; color: var(--label); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); font-size: var(--text-md); }
.kds-print-alert { color: var(--ink); background: var(--amber-soft); border: 1px solid var(--amber-line); }
.kds-print-alert strong, .kds-stale strong { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-xl); }
.kds-print-alert strong { color: var(--amber); }
.kds-print-alert strong::before, .kds-stale strong::before { flex: none; width: 10px; height: 10px; content: ""; border-radius: var(--radius-mark); }
.kds-print-alert strong::before { background: var(--amber-lamp); }
.kds-print-alert span, .kds-stale span { color: var(--label); font-size: var(--text-lg); }
.kds-print-alert.failed { background: var(--red-soft); border-color: var(--red-line); }
.kds-print-alert.failed strong { color: var(--red); }
.kds-print-alert.failed strong::before { background: var(--red-lamp); }
/* The board can no longer be confirmed: louder than a printer, since it is the orders themselves. */
.kds-stale { color: var(--ink); background: var(--red-soft); border: 2px solid var(--red-lamp); }
.kds-stale strong { color: var(--red); }
.kds-stale strong::before { background: var(--red-lamp); }
.kds-stale .kds-stale-since, .kds-stale .kds-stale-checking { color: var(--muted); font-size: var(--text-md); }
.kds-print-recovered, .kds-restored { display: flex; flex: none; align-items: center; gap: 10px; margin: 0 0 8px; padding: 8px 14px; color: var(--green); background: var(--surface); border: 1px solid var(--green-line); border-radius: var(--radius-surface); font-size: var(--text-md); font-weight: 600; }
.kds-print-recovered::before, .kds-restored::before { width: 8px; height: 8px; content: ""; background: var(--green-lamp); border-radius: var(--radius-mark); }

/* Three fixed stages; each scrolls on its own. */
.kds-columns { display: grid; flex: 1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-height: 0; }
.kds-column { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 12px; overflow-y: auto; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-surface); scrollbar-width: thin; }
.kds-column-title { display: flex; flex: none; align-items: center; gap: 10px; margin: 2px 2px 0; color: var(--ink); font-size: var(--text-xl); font-weight: 600; }
.kds-column-title::before { width: 10px; height: 10px; content: ""; background: var(--steel-500); border-radius: var(--radius-mark); }
.kds-new .kds-column-title::before { background: var(--amber-lamp); }
.kds-ready .kds-column-title::before { background: var(--green-lamp); }
.kds-column-count { min-width: 34px; margin-left: auto; padding: 1px 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 4px; font-family: var(--font-figures); font-size: var(--text-lg); text-align: center; font-variant-numeric: tabular-nums; }
/* A quiet stage says so in the middle of itself, big enough to read from the pass: a quiet kitchen,
   not a board that has not loaded. */
.kds-empty { margin: auto; padding: 24px 0; color: var(--subtle); font-size: var(--text-xl); text-align: center; }

/* One track no wider than the card, and words that break anywhere: a pasted name, a phone number in
   a note or a modifier with no spaces wraps inside the ticket instead of pushing out of the stage. */
.kds-ticket { display: grid; flex: none; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 16px 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); overflow-wrap: anywhere; transition: border-color 200ms ease, box-shadow 200ms ease; }
.kds-new .kds-ticket { border-color: var(--amber-line); }
.kds-ready .kds-ticket { border-color: var(--green-line); }
/* The oldest new ticket is the next one to start: it stands forward. */
.kds-new .kds-ticket:first-of-type { border-color: var(--amber-lamp); box-shadow: inset 0 0 0 1px var(--amber-lamp); }
.kds-ticket-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-soft); }
.kds-number { font-family: var(--font-figures); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.kds-age { color: var(--ink); font-family: var(--font-figures); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kds-new .kds-age { color: var(--amber); }
.kds-booked { color: var(--amber); font-size: var(--text-xl); font-weight: 700; }
.kds-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* Pickup or delivery changes how the order is packed: readable from the pass, still under the lines. */
.kds-tag { padding: 4px 8px; color: var(--label); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: 4px; font-size: var(--text-lg); font-weight: 600; line-height: 1.2; }
.kds-lines { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.kds-lines li { display: grid; gap: 2px; }
.kds-line { font-size: 20px; font-weight: 500; line-height: 1.3; }
.kds-line b { font-family: var(--font-figures); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kds-modifier { padding-left: 24px; color: var(--label); font-size: 17px; }
.kds-line-note { justify-self: start; margin-left: 24px; padding: 2px 8px; color: var(--amber); background: var(--amber-soft); border-radius: 4px; font-size: var(--text-lg); font-weight: 600; }
.kds-note { margin: 0; padding: 8px 10px; color: var(--ink); background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: var(--radius-control); font-size: 17px; }
.kds-action { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; color: var(--on-action); background: var(--action); border: 0; border-radius: var(--radius-surface); cursor: pointer; font-size: 21px; font-weight: 700; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: filter 90ms ease, transform var(--press) var(--ease-out); }
.kds-action:active:not(:disabled) { transform: scale(.98); }
.kds-action.ready { color: var(--steel-950); background: var(--green-lamp); }
.kds-action:disabled { opacity: .55; cursor: progress; }
@media (hover: hover) { .kds-action:hover:not(:disabled) { filter: brightness(1.06); } }
.kds-waiting { margin: 0; color: var(--label); font-size: var(--text-lg); }

@media (max-width: 1023px) {
    /* A portrait tablet keeps the three stages side by side; only the bar and the top row get tighter. */
    .kds-head { flex-wrap: wrap; }
    .kds-clock { font-size: 22px; }
}
@media (max-width: 767px) {
    /* A phone at the pass: one stage under another, New first, each as tall as its tickets, and the page
       the one thing that scrolls. Squeezed into the screen's height, a stage's row came out shorter than
       its tickets and they were drawn over the next stage. */
    .kds-main { overflow-y: auto; }
    .kds-columns { flex: none; grid-template-columns: minmax(0, 1fr); }
    .kds-column { min-height: auto; overflow: visible; }
    /* The top row wraps one way for every board: the branch on its own row, then the count, the sound
       key and the clock, flush right. */
    .kds-head .kds-bar-spacer { display: none; }
    .kds-branch, .kds-branch-name { flex: 1 1 100%; }
    .kds-sound { margin-left: auto; }
}

/* ------------------------------------------------------------------------- the cash shift and its X/Z
   A plain two-column ledger that prints as it reads on screen. Operational, not fiscal. */
.shift-dialog { width: min(620px, 100%); }
.shift-dialog .form-section { gap: 10px; }
.shift-dialog-problem { padding: 0 24px; }
.shift-field { display: grid; gap: 6px; padding: 0 24px; color: var(--label); font-size: var(--text-sm); font-weight: 600; }
.shift-field input { min-height: var(--control-lg); height: var(--control-lg); padding: 0 12px; font-family: var(--font-figures); font-size: var(--text-xl); font-variant-numeric: tabular-nums; }
.shift-dialog .form-section > .alert { margin: 0 24px; }
.shift-toggle { display: flex; gap: 8px; padding: 0 24px; }
.shift-expected-line, .shift-confirm { margin: 0; padding: 0 24px; color: var(--ink); font-size: var(--text-lg); }
.shift-expected-line strong { font-family: var(--font-figures); font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.shift-dialog-report { padding: 0 24px; }
@media (width <= 760px) {
    /* On a phone the dialog's inset is 16px: the fields line up with its title and help again. */
    .shift-field, .shift-toggle, .shift-expected-line, .shift-confirm, .shift-dialog-report, .shift-dialog-problem { padding-inline: 16px; }
    .shift-dialog .form-section > .alert { margin-inline: 16px; }
}
.shift-report { display: grid; gap: 14px; color: var(--ink); }
.shift-report-head h2 { margin: 0 0 6px; font-size: var(--text-lg); }
/* The kind is a line of the sheet under its name; in a dialog, whose title already says it, only paper shows it. */
.shift-report-kind { margin: 0 0 6px; color: var(--label); font-size: var(--text-xs); font-weight: 700; }
.shift-dialog .shift-report-kind { display: none; }
.shift-report-when { display: grid; gap: 3px; margin: 0; font-size: var(--text-sm); }
.shift-report-when > div { display: flex; gap: 8px; }
.shift-report-when dt { min-width: 92px; color: var(--muted); }
.shift-report-when dd { margin: 0; font-variant-numeric: tabular-nums; }
.shift-report-figures th, .shift-report-figures td { position: static; padding: 7px 4px; color: var(--ink); background: none; border-bottom: 1px solid var(--line-soft); font-size: var(--text-md); font-weight: 400; text-align: left; white-space: normal; }
.shift-report-figures td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shift-report-figures tr.sub th { padding-left: 18px; color: var(--label); font-size: var(--text-sm); }
.shift-report-figures tr.sub td { color: var(--label); font-size: var(--text-sm); }
.shift-report-figures tr.sub.split th { padding-left: 32px; font-size: var(--text-xs); }
.shift-report-figures tr.sub.split td { font-size: var(--text-xs); }
.shift-report-figures tr.strong th, .shift-report-figures tr.strong td { font-weight: 600; }
.shift-report-figures tr.total th, .shift-report-figures tr.total td { font-size: var(--text-lg); font-weight: 700; border-bottom: 2px solid var(--ink); }
.shift-report-figures tbody tr:hover td { background: none; }
/* The sheet's last line is the total, and it ends without a rule either side. */
.shift-report-figures tbody tr:last-child th, .shift-report-figures tbody tr:last-child td { border-bottom: 0; }
.variance.short, td.variance.short { color: var(--red) !important; }
.variance.over, td.variance.over { color: var(--amber) !important; }
.variance.balanced, td.variance.balanced { color: var(--green) !important; }
.shift-report-figures tr.variance small { margin-left: 6px; font-size: var(--text-2xs); font-weight: 600; }
.shift-report-note { margin: 0; font-size: var(--text-sm); }
.shift-report-section h3, .shift-report-section summary { margin: 0 0 6px; font-size: var(--text-md); font-weight: 600; cursor: default; }
.shift-report-section summary { cursor: pointer; }
/* The orders fold is a part of the sheet, not a panel's fold: it keeps the sheet's edges, so its totals end under the figures. */
details.shift-report-section { margin: 0; }
.shift-report-section[open] summary, .shift-report-section summary { color: var(--ink); }
.shift-report-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.shift-report-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.shift-report-list li.cancelled { color: var(--muted); text-decoration: line-through; }
.shift-report-reason { flex: 1; min-width: 120px; }
/* The money in both lists stands in one column, as in the figures above: an order's total flush right (on its
   own line too, when the row wraps), a movement's amount right-aligned after a type of one width. */
.shift-report-orders li > strong { min-width: 4.5em; }
.shift-report-orders li > :last-child { margin-left: auto; white-space: nowrap; text-align: right; }
.shift-report-movements li > strong { min-width: 6.5em; }
.shift-report-movements li > :nth-child(3) { min-width: 8em; text-align: right; white-space: nowrap; }
.shift-report-disclaimer { margin: 0; padding-top: 8px; color: var(--muted); border-top: 1px solid var(--border); font-size: var(--text-xs); }
@media (width <= 760px) {
    .shift-dialog-report { padding-inline: 16px; }
}
@media print {
    .shift-dialog .shift-report-kind { display: block; }
}

/* ------------------------------------------------------------------------------------------ reports
   A window of days, its figures on the grid, and the export beside the controls that chose it. */
/* The day's filters and the export's range are two groups: the export anchored at the right of the row, and
   under 1100 px a row of its own that starts at the content edge under a rule. */
.reports-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; margin-bottom: 20px; }
.reports-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; min-width: 0; }
.reports-control { display: grid; gap: 6px; color: var(--label); font-size: var(--text-sm); font-weight: 600; }
.reports-control select, .reports-control input { min-width: 200px; font-size: var(--text-md); font-weight: 400; }
.reports-control select { max-width: 100%; }
/* Every date on the row is the same control at the same size, and as tall as the select and the key beside it. */
.reports-control input[type="date"] { width: 160px; min-width: 0; height: var(--control-md); }
.reports-control strong { display: inline-flex; align-items: center; height: var(--control-md); color: var(--ink); font-size: var(--text-md); }
.reports-export { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-left: 16px; border-left: 1px solid var(--border); }
.reports-export-error { margin-bottom: 16px; }
.reports-panel .section-heading { padding: 16px 20px 0; }
.reports-panel > .alert { margin: 12px 20px 0; }
/* Six headline tiles: three across, six on a wide screen, two on a narrow one; never a hole in the grid. */
.metric-grid.reports-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0; }
.reports-metrics .metric { container-type: inline-size; padding: 16px 20px; background: var(--surface); }
/* A report shows its numbers whole: a long total shrinks to fit its tile rather than losing its end. */
.reports-metrics .metric strong { font-size: min(24px, 11.5cqi); }
/* The split tables stand side by side only while each keeps 300 px; narrower, they stack instead of overprinting.
   Each keeps its own height, so a short table's rows are not stretched out of line with its neighbour's. */
.reports-splits { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; gap: 16px 24px; padding: 0 20px 20px; }
.reports-split th, .reports-split td { padding: 8px 12px; }
/* A three-row summary has nothing to keep in view: a header stuck to the window top only covered its own rows. */
.reports-split th { position: static; }
.reports-split th:first-child, .reports-split td:first-child { padding-left: 0; }
.reports-split th:last-child, .reports-split td:last-child { padding-right: 0; }
.reports-current { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 20px; }
.reports-current-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.reports-current-facts dt { color: var(--muted); font-size: var(--text-xs); }
.reports-current-facts dd { margin: 2px 0 0; font-size: var(--text-md); font-variant-numeric: tabular-nums; }
/* A panel with nothing in it yet says so in body type, not as a footnote. */
.reports-none { margin: 0 20px; padding: 8px 0 20px; font-size: var(--text-md); }
@media (min-width: 1800px) {
    .metric-grid.reports-metrics { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .reports-controls { grid-template-columns: minmax(0, 1fr); }
    .reports-export { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 900px) {
    .metric-grid.reports-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (width <= 760px) {
    .reports-metrics .metric strong { font-size: min(20px, 11.5cqi); }
    .reports-filters { display: grid; }
    /* The export's range reads as one: from and to side by side, the key under both. */
    .reports-export { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .reports-export > .button { grid-column: 1 / -1; }
    .reports-control select, .reports-control input, .reports-control input[type="date"] { width: 100%; min-width: 0; }
}

/* ---------------------------------------------------------------------------------------- insights
   INSIGHTS-1: the till's reports. A period leads with one large figure and how it
   moved against the days before, the bars it came in under it, and four figures on one hairline row in the
   same panel, the way a phone's own statistics read. Shares are one bar cut in shades of ink, never a
   rainbow. Bars rise from the baseline once; a bar's tooltip grows from its top; reduced motion keeps
   neither movement. */
.insight-hero { overflow: hidden; }
.insight-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; padding: 22px 24px 0; }
.insight-lead { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.insight-label { margin: 0; color: var(--muted); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.insight-figure { margin: 0; color: var(--ink); font-size: clamp(38px, 4.6vw, 54px); font-weight: 650; line-height: 1; letter-spacing: -0.038em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.insight-figure .money-figure small { margin-left: .04em; color: var(--muted); font-size: .46em; font-weight: 600; letter-spacing: -0.01em; }
.insight-legend { padding-bottom: 4px; }

/* How a figure moved: a pill with an arrow, and what it was set beside. */
.trend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--muted); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; line-height: 1.3; white-space: normal; }
.trend-pill { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px 0 6px; color: var(--label); background: var(--surface-subtle); border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.trend-pill .icon { width: 13px; height: 13px; }
.trend.up .trend-pill { color: var(--green); background: var(--green-soft); }
.trend.down .trend-pill { color: var(--label); background: var(--surface-accent); }

/* The bars: this period in ink, the period before as a pale plate behind it, a rounded scale at the right. */
.ichart { display: grid; gap: 8px; padding: 26px 24px 20px; }
.ichart-plot { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: end; gap: clamp(2px, .55vw, 8px); height: 224px; padding-right: 64px; }
.ichart-grid { position: absolute; inset: 0; pointer-events: none; }
.ichart-grid span { position: absolute; right: 0; bottom: var(--y); left: 0; border-top: 1px dashed var(--line-soft); }
.ichart-grid span:last-child { border-top: 1px solid var(--border); }
.ichart-grid em { position: absolute; right: 0; bottom: 3px; color: var(--subtle); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ichart-bar { position: relative; z-index: 1; height: 100%; }
.ichart-bar i { position: absolute; bottom: 0; border-radius: 6px 6px 2px 2px; transform-origin: bottom; animation: bar-rise 640ms var(--ease-out) both; animation-delay: min(calc(var(--i, 0) * 12ms), 300ms); }
.ichart-bar .was { right: 0; left: 0; height: var(--w); background: color-mix(in oklch, var(--ink) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ink) 13%, var(--surface)); }
.ichart-bar .now { right: 22%; left: 22%; min-height: 3px; height: var(--h); background: var(--ink); transition: background-color 160ms ease; }
.ichart.dense .ichart-bar .now { right: 14%; left: 14%; border-radius: 4px 4px 1px 1px; }
.ichart-bar.zero .now { background: var(--border); }
.ichart-bar.live .now { background: color-mix(in oklch, var(--ink) 48%, transparent); }
.ichart-tip { position: absolute; bottom: calc(max(var(--h), var(--w)) + 10px); left: 50%; z-index: 2; display: grid; gap: 1px; padding: 7px 10px 8px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-2); font-size: var(--text-xs); white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px) scale(.96); transform-origin: 50% 100%; transition: opacity 140ms ease, transform 220ms var(--ease-out); }
.ichart-tip b { font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.ichart-tip small { color: var(--muted); }
/* The first bars and the last open their tooltip inwards, so it never leaves the panel. */
.ichart-bar:nth-child(-n+3) .ichart-tip { left: 0; transform: translate(0, 4px) scale(.96); transform-origin: 0 100%; }
.ichart-bar:nth-last-child(-n+2) .ichart-tip { right: 0; left: auto; transform: translate(0, 4px) scale(.96); transform-origin: 100% 100%; }
@media (hover: hover) {
    .ichart-plot:hover .ichart-bar .now { background: color-mix(in oklch, var(--ink) 30%, var(--surface)); }
    .ichart-plot:hover .ichart-bar:hover .now { background: var(--ink); }
    .ichart-bar:hover { z-index: 3; }
    .ichart-bar:hover .ichart-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
    .ichart-bar:nth-child(-n+3):hover .ichart-tip, .ichart-bar:nth-last-child(-n+2):hover .ichart-tip { transform: translate(0, 0) scale(1); }
}
.ichart-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(2px, .55vw, 8px); padding-right: 64px; color: var(--muted); font-size: 11.5px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ichart-axis .live { color: var(--ink); font-weight: 700; }

/* Four figures on one hairline row under the chart, each with its own movement. */
.insight-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line-soft); }
.insight-stats > div { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 16px 24px 18px; container-type: inline-size; }
.insight-stats > div + div { border-left: 1px solid var(--line-soft); }
.insight-stats dt { color: var(--muted); font-size: var(--text-sm); }
.insight-stats dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: min(26px, 12.5cqi); font-weight: 650; letter-spacing: -0.022em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.insight-stats dd > span:first-child { white-space: nowrap; }
.insight-stats dd .num { text-align: left !important; }
.insight-count { flex-basis: 100%; color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: 0; }

/* A share: one bar cut into its parts, then each part by name. */
.meter { display: grid; gap: 12px; padding: 2px 20px 18px; }
.meter-track { display: flex; gap: 3px; height: 12px; overflow: hidden; border-radius: 999px; }
.meter-track i { flex: var(--w) 1 0; min-width: 4px; background: var(--ink); border-radius: 3px; transform-origin: left; animation: bar-grow 640ms var(--ease-out) both; }
.meter-legend { display: grid; margin: 0; padding: 0; list-style: none; }
.meter-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; }
.meter-legend li + li { border-top: 1px solid var(--line-soft); }
.meter-dot { width: 10px; height: 10px; background: var(--ink); border-radius: 3px; }
.meter-track i:nth-child(2), .meter-legend li:nth-child(2) .meter-dot { background: color-mix(in oklch, var(--ink) 56%, var(--surface)); }
.meter-track i:nth-child(3), .meter-legend li:nth-child(3) .meter-dot { background: color-mix(in oklch, var(--ink) 32%, var(--surface)); }
.meter-track i:nth-child(n+4), .meter-legend li:nth-child(n+4) .meter-dot { background: color-mix(in oklch, var(--ink) 16%, var(--surface)); }
.meter-name { min-width: 0; color: var(--ink); font-weight: 500; }
.meter-name small { display: block; color: var(--muted); font-size: var(--text-xs); font-weight: 400; }
.meter-share { min-width: 3.4em; color: var(--muted); font-size: var(--text-sm); }
.meter-legend b { min-width: 6.5em; font-weight: 650; text-align: right; }
.meter-empty { margin: 0; padding: 0 20px 18px; }
.insight-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; padding: 12px 20px 16px; color: var(--muted); border-top: 1px solid var(--line-soft); font-size: var(--text-sm); }
.insight-foot b { margin-left: auto; color: var(--ink); font-size: var(--text-md); font-weight: 650; }
.insight-foot small { flex-basis: 100%; text-align: right; }

/* The drawer now: what should be in it, large; who opened it and what it took, under it. */
.insight-cols { align-items: stretch; }
.insight-shift { display: flex; flex-direction: column; }
.insight-shift-body { display: grid; flex: 1; align-content: start; gap: 16px; padding: 2px 20px 20px; }
.insight-shift-cash { display: grid; gap: 6px; }
.insight-shift-cash > span { color: var(--muted); font-size: var(--text-sm); }
.insight-shift-cash strong { font-size: 34px; font-weight: 650; line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.insight-shift .reports-current-facts { display: grid; gap: 10px; }
.insight-shift-body > .button { justify-self: start; }

/* Panels two by two (the statistics' site and app). */
.insight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.insight-grid > .panel { margin: 0; }


.insight-note { display: flex; align-items: flex-start; gap: 10px; max-width: 82ch; margin: 0 2px 20px; color: var(--muted); font-size: var(--text-sm); }
.insight-note .icon { flex: none; width: 17px; height: 17px; margin-top: 1px; }

@media (max-width: 1000px) {
    .insight-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (width <= 760px) {
    .insight-head { padding: 18px 16px 0; }
    .insight-figure { font-size: 42px; }
    .ichart { padding: 14px 16px 16px; }
    .ichart-plot { height: 180px; padding-right: 48px; }
    .ichart-axis { padding-right: 48px; font-size: 10.5px; }
    .ichart-plot, .ichart-axis { gap: 2px; }
    .insight-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .insight-stats > div { padding: 14px 16px 16px; }
    .insight-stats > div:nth-child(3) { border-left: 0; }
    .insight-stats > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
    .meter, .insight-foot, .insight-shift-body { padding-inline: 16px; }
}

/* -------------------------------------------------------------------------------------- statistics
   STAT-1: the website and the app. The figures lead as keys (Plausible's row): pressing one turns the
   large line under them to it, and the key it is on carries an ink rule. Then the way to an order as
   Shopify draws it, each step a bar as long as its share of the visits; the baskets left behind; the
   dishes; where the site's visitors come from and what the app's phones are, as lists with their bar
   behind the name; and the three channels side by side. */
.stats-scope { margin-left: auto !important; }
.stats-quiet { margin-bottom: 16px; }
.stats-hero { margin-bottom: 20px; }
.stats-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; border-bottom: 1px solid var(--line-soft); border-radius: var(--radius-surface) var(--radius-surface) 0 0; }
.stats-tab { position: relative; display: grid; align-content: start; gap: 6px; min-width: 0; padding: 18px 20px 16px; color: var(--ink); background: transparent; border: 0; border-left: 1px solid var(--line-soft); cursor: pointer; font: inherit; text-align: left; container-type: inline-size; transition: background-color 160ms ease; -webkit-tap-highlight-color: transparent; }
.stats-tab:first-child { border-left: 0; }
.stats-tab::after { position: absolute; right: 20px; bottom: -1px; left: 20px; height: 2px; content: ""; background: var(--ink); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--ease-out); }
.stats-tab[aria-selected="true"] { background: color-mix(in oklch, var(--ink) 3%, var(--surface)); }
.stats-tab[aria-selected="true"]::after { transform: scaleX(1); }
.stats-tab:active { background: var(--surface-accent); }
.stats-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) { .stats-tab:hover:not([aria-selected="true"]) { background: var(--surface-hover); } }
.stats-tab-label { color: var(--muted); font-size: var(--text-sm); font-weight: 600; transition: color 160ms ease; }
.stats-tab[aria-selected="true"] .stats-tab-label { color: var(--ink); }
.stats-tab-value { font-size: min(28px, 13cqi); font-weight: 650; line-height: 1.1; letter-spacing: -0.025em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stats-tab-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 22px; color: var(--muted); font-size: 12.5px; }
.stats-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 16px 24px 0; }
.stats-asof { color: var(--muted); font-size: var(--text-sm); }
.chart-legend i.dash { width: 16px; height: 0; background: none; border-top: 2px dashed color-mix(in oklch, var(--ink) 40%, transparent); border-radius: 0; }

/* The line: ink over a faint plate, the days before dashed beneath, a rule and a dot where the pointer is. */
.tchart { display: grid; gap: 8px; padding: 26px 24px 20px; }
.tchart-plot { position: relative; height: 240px; margin-right: 64px; }
.tchart-grid { position: absolute; inset: 0; pointer-events: none; }
.tchart-grid span { position: absolute; right: -64px; bottom: var(--y); left: 0; border-top: 1px dashed var(--line-soft); }
.tchart-grid span:last-child { right: 0; border-top: 1px solid var(--border); }
.tchart-grid em { position: absolute; right: 0; bottom: 3px; color: var(--subtle); font-size: 11px; font-style: normal; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tchart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: chart-reveal 900ms var(--ease-out) both; }
.tchart-area { fill: color-mix(in oklch, var(--ink) 6%, transparent); }
.tchart-line { fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.tchart-was { fill: none; stroke: color-mix(in oklch, var(--ink) 38%, transparent); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linejoin: round; }
@keyframes chart-reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tchart-hits { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.tchart-hit { position: relative; }
.tchart-rule { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border); opacity: 0; transition: opacity 120ms ease; }
.tchart-dot { position: absolute; bottom: var(--y); left: 50%; width: 11px; height: 11px; margin: 0 0 -5.5px -5.5px; background: var(--surface); border: 2px solid var(--ink); border-radius: 50%; opacity: 0; transform: scale(.5); transition: opacity 120ms ease, transform 240ms var(--ease-spring); }
.tchart-hit.marked .tchart-dot { background: var(--ink); opacity: 1; transform: none; }
.tchart-hit.marked.live .tchart-dot { background: var(--surface); box-shadow: 0 0 0 4px color-mix(in oklch, var(--ink) 12%, transparent); }
.tchart-tip { position: absolute; bottom: min(calc(var(--y) + 18px), calc(100% - 46px)); left: 50%; z-index: 2; display: grid; gap: 1px; padding: 7px 10px 8px; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-2); font-size: var(--text-xs); white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 4px) scale(.96); transform-origin: 50% 100%; transition: opacity 140ms ease, transform 220ms var(--ease-out); }
.tchart-tip b { font-size: var(--text-sm); font-weight: 650; font-variant-numeric: tabular-nums; }
.tchart-tip small { color: var(--muted); }
.tchart-hit:nth-child(-n+2) .tchart-tip { left: 0; transform: translate(0, 4px) scale(.96); transform-origin: 0 100%; }
.tchart-hit:nth-last-child(-n+2) .tchart-tip { right: 0; left: auto; transform: translate(0, 4px) scale(.96); transform-origin: 100% 100%; }
@media (hover: hover) {
    .tchart-hit:hover { z-index: 3; }
    .tchart-hit:hover .tchart-rule { opacity: 1; }
    .tchart-hit:hover .tchart-dot { opacity: 1; transform: none; }
    .tchart-hit:hover .tchart-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }
    .tchart-hit:nth-child(-n+2):hover .tchart-tip, .tchart-hit:nth-last-child(-n+2):hover .tchart-tip { transform: translate(0, 0) scale(1); }
}
.tchart-axis { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin-right: 64px; color: var(--muted); font-size: 11.5px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tchart-axis .marked { color: var(--ink); font-weight: 700; }
.tchart-empty { display: grid; place-items: center; min-height: 200px; margin: 0; padding: 20px 24px 28px; text-align: center; }

/* The way to an order. */
.stats-cols { align-items: stretch; }
.stats-cols > .panel { display: flex; flex-direction: column; }
.stats-funnel-rate { display: grid; justify-items: end; gap: 2px; }
.stats-funnel-rate b { font-size: 26px; font-weight: 650; line-height: 1.05; letter-spacing: -0.02em; }
.stats-funnel-rate small { color: var(--muted); font-size: var(--text-xs); }
.funnel { display: grid; margin: 0; padding: 2px 20px 14px; list-style: none; }
.funnel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy meta" "track track"; align-items: baseline; gap: 7px 16px; padding: 10px 0; }
.funnel li + li { border-top: 1px solid var(--line-soft); }
.funnel-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; grid-area: copy; }
.funnel-name { color: var(--label); font-weight: 500; }
.funnel-copy b { font-size: var(--text-lg); font-weight: 650; }
.funnel-meta { display: flex; align-items: baseline; gap: 10px; color: var(--muted); font-size: var(--text-sm); grid-area: meta; }
.funnel-meta > span:first-child { min-width: 3.4em; color: var(--ink); font-weight: 650; text-align: right; }
.funnel-drop { font-size: var(--text-xs); }
.funnel-track { height: 10px; overflow: hidden; background: var(--surface-subtle); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-soft); grid-area: track; }
.funnel-track i { display: block; width: var(--w); min-width: 6px; height: 100%; background: color-mix(in oklch, var(--ink) 46%, var(--surface)); border-radius: 999px; transform-origin: left; animation: bar-grow 720ms var(--ease-out) both; }
.funnel li:nth-child(2) i { animation-delay: 60ms; }
.funnel li:nth-child(3) i { animation-delay: 120ms; }
.funnel li:nth-child(4) i { animation-delay: 180ms; }
.funnel li:nth-child(5) i { animation-delay: 240ms; }
.funnel li[data-step="order"] i { background: var(--ink); }
.stats-none { margin: 0; padding: 4px 20px 20px; font-size: var(--text-md); }
.stats-foot { margin-top: auto; }

/* Baskets left behind, and where the takings come from. */
.stats-abandoned-body { display: grid; justify-items: start; gap: 10px; padding: 0 20px 20px; }
.stats-abandoned-body p { margin: 0; }
.stats-abandoned-body p.muted { font-size: var(--text-sm); }
.stats-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.stats-big .num { font-size: 40px; font-weight: 650; line-height: 1; letter-spacing: -0.03em; }
.stats-big small { color: var(--label); font-size: var(--text-md); font-weight: 600; }

/* The dishes: a bar behind the name, as long as its orders beside the most ordered. */
.stats-products td { padding-block: 10px; }
.stats-product-name { position: relative; min-width: 220px; }
.stats-product-name::before { position: absolute; top: 6px; bottom: 6px; left: 8px; width: max(0px, calc(var(--w) - 16px)); content: ""; background: color-mix(in oklch, var(--ink) 6%, var(--surface)); border-radius: 6px; transform-origin: left; animation: bar-grow 640ms var(--ease-out) both; }
.stats-product-name > span { position: relative; }
.stats-rank { display: inline-block; width: 24px; color: var(--subtle); font-size: var(--text-xs); }
.stats-products th:first-child { width: 46%; }

/* Lists with their bar behind the name: the site's sources, the app's versions. */
.stats-list { display: grid; gap: 3px; margin: 0; padding: 0 20px 14px; list-style: none; }
.stats-list li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px 0 8px; }
.stats-list.compact li { grid-template-columns: minmax(0, 1fr) auto auto; }
.stats-list li::before { position: absolute; inset: 0 auto 0 0; width: var(--w); content: ""; background: color-mix(in oklch, var(--ink) 6%, var(--surface)); border-radius: 8px; transform-origin: left; animation: bar-grow 640ms var(--ease-out) both; }
.stats-list li > * { position: relative; }
.stats-mark { display: grid; place-items: center; width: 22px; height: 22px; color: var(--label); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; font-size: 11px; font-weight: 700; }
.stats-mark .icon { width: 12px; height: 12px; }
.stats-list-name { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.stats-list-name.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.stats-list-share { min-width: 3.4em; color: var(--muted); font-size: var(--text-sm); text-align: right; }
.stats-list b { min-width: 3.5em; font-weight: 650; text-align: right; }
.stats-list-more { margin: -4px 12px 12px; }
.stats-subheading { padding-top: 4px; padding-bottom: 8px; }
.stats-subheading h3 { margin: 0; font-size: var(--text-md); font-weight: 600; }

/* The app's own figures, two by two. */
.stats-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 20px 6px; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 10px; }
.stats-facts > div { min-width: 0; padding: 12px 16px; container-type: inline-size; }
.stats-facts > div:nth-child(even) { border-left: 1px solid var(--line-soft); }
.stats-facts > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
.stats-facts dt { color: var(--muted); font-size: var(--text-xs); line-height: 1.3; }
.stats-facts dd { margin: 6px 0 0; font-size: min(24px, 12cqi); font-weight: 650; letter-spacing: -0.02em; text-align: left !important; }

/* The three channels side by side. */
.stats-compare tbody th { position: static; color: var(--label); background: transparent; border-bottom: 1px solid var(--line-soft); font-size: var(--text-md); font-weight: 500; }
.stats-compare tbody tr:last-child th { border-bottom: 0; }
.stats-compare td { font-weight: 600; }
.stats-compare th.num, .stats-compare td.num { width: 22%; }

@media (max-width: 1000px) {
    .stats-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-tab:nth-child(4) { border-left: 0; }
    .stats-tab:nth-child(n+4) { border-top: 1px solid var(--line-soft); }
}
@media (width <= 760px) {
    .stats-scope { margin-left: 0 !important; }
    .stats-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stats-tab { padding: 14px 16px; }
    .stats-tab:nth-child(n) { border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft); }
    .stats-tab:nth-child(odd) { border-left: 0; }
    .stats-tab:nth-child(-n+2) { border-top: 0; }
    .stats-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .stats-chart-head { padding: 14px 16px 0; }
    .tchart { padding: 20px 16px 16px; }
    .tchart-plot { height: 190px; margin-right: 48px; }
    .tchart-grid span { right: -48px; }
    .tchart-axis { margin-right: 48px; font-size: 10.5px; }
    .funnel, .stats-list, .stats-abandoned-body { padding-inline: 16px; }
    .stats-facts { margin-inline: 16px; }
    .stats-product-name { min-width: 160px; }
}

/* ----------------------------------------------------------------------------------------- printing */
.printing-fiscal { color: var(--label); background: var(--surface-subtle); border-color: var(--border); }
.printing-credential { border-color: var(--input-border); }
.printing-token-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 20px; }
.printing-token { flex: 1 1 320px; min-width: 0; padding: 10px 12px; font-size: var(--text-sm); word-break: break-all; user-select: all; }
.printing-credential > .alert, .printing-credential > p.muted { margin: 10px 20px 0; }
.printing-config { margin: 14px 20px 0; }
.printing-config p { margin: 8px 0; }
.printing-config pre { max-width: 100%; margin: 0; padding: 12px; overflow: auto; color: var(--steel-100); background: var(--steel-950); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
/* The markup pairs each switch with its key; two rows flowed by column keep the switches side by side above the keys. */
.printing-settings .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column; }
/* A switch whose words run to two lines keeps its box on the first line. */
.printing-settings .form-grid > .field > .toggle { display: flex; align-items: flex-start; gap: 8px; min-height: 24px; }
.printing-settings .form-grid > .field > .toggle > input[type="checkbox"] { margin-top: calc((1lh - 16px) / 2); }
/* The branch switcher is labelled like the other small selectors, and reads as a control, not as its label. */
.printing-branch-field { min-width: 0; }
.printing-branch-field select { max-width: 420px; font-size: var(--text-md); font-weight: 400; }
.printing-target-hint { margin: 12px 20px 0; }
.printing-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
/* The description keeps a readable width; the two test keys go under it together rather than into a stepped pile. */
.printing-agents > .section-heading > div:first-child, .printing-jobs-heading > div:first-child { flex: 1 1 360px; }
.printing-agents > .alert, .printing-agents > p.muted { margin: 0 20px 14px; }
.printing-agent-list { display: grid; gap: 0; margin: 0; padding: 0 20px 8px; list-style: none; border-top: 1px solid var(--line-soft); }
.printing-agent { display: grid; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.printing-agent:last-child { border-bottom: 0; }
.printing-agent.revoked { opacity: .6; }
.printing-agent-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.printing-agent-facts { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; font-size: var(--text-sm); }
.printing-agent-facts dt { color: var(--muted); font-size: var(--text-xs); }
.printing-agent-facts dd { margin: 2px 0 0; }
.printing-printers { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.printing-printers li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.printing-agent .row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.printing-new-agent { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px 20px 20px; border-top: 1px solid var(--border); }
.printing-new-agent .field { flex: 1 1 240px; }
/* The empty job list reads as the list's content, under the rule a table's headings would draw. */
.printing-empty { margin: 0; padding: 16px 20px 20px; color: var(--muted); font-size: var(--text-sm); border-top: 1px solid var(--line-soft); }
@media (width <= 760px) {
    /* One column: each switch is followed by its own key, the second pair a step apart. */
    .printing-settings .form-grid { grid-template-rows: none; grid-auto-flow: row; }
    .printing-settings .form-grid > :nth-child(3) { margin-top: 8px; }
    .printing-branch-field { flex: 1 1 auto; }
    .printing-branch-field select { width: 100%; max-width: none; }
    .printing-agent .row-actions > .button { flex: 1 1 auto; }
}
.printing-job-table td { vertical-align: top; }
.printing-job-table td > small { display: block; margin-top: 3px; }
.printing-job-table .badge + .badge { margin-left: 6px; }
.printing-reason { display: block; margin-top: 3px; }
.printing-error, .pos-print-error { display: block; color: var(--red); font-size: var(--text-xs); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------------------------------ courier
   Read on a phone, one-handed, often outdoors: one column, large type, targets that need no aim. */
.courier-shell { min-height: 100vh; min-height: 100dvh; padding: 16px; background: var(--canvas); }
.courier-card { width: min(100%, 560px); margin: 0 auto; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-large); font-size: var(--text-lg); }
.courier-card h1 { margin: 0; font-size: var(--text-3xl); }
.courier-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.courier-head p { margin: 4px 0 0; }
.courier-gone { text-align: center; }
.courier-gone .empty-icon { display: grid; margin: 0 auto 10px; font-size: 30px; }
.courier-done { margin: 0 0 14px; padding: 11px 13px; background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--radius-surface); }
.courier-facts { display: grid; gap: 14px; margin: 0 0 18px; }
.courier-facts dt { color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.courier-facts dd { display: grid; gap: 4px; margin: 4px 0 0; }
.courier-facts strong { font-size: var(--text-xl); }
.courier-call, .courier-address, .courier-branch { display: inline-block; padding: 10px 0; font-size: var(--text-xl); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: 4px; }
.courier-doorway { font-size: var(--text-xl); }
.courier-total { font-family: var(--font-figures); font-size: 26px; font-variant-numeric: tabular-nums; }
.courier-change { color: var(--amber); font-weight: 600; }
.courier-items { display: grid; gap: 10px; margin: 0 0 20px; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--line-soft); }
.courier-items li { display: flex; gap: 12px; }
.courier-quantity { min-width: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.courier-items small { display: block; }
.courier-actions .button { min-height: var(--control-touch); font-size: var(--text-xl); }
.courier-branch { display: block; margin-top: 18px; text-align: center; }

/* --------------------------------------------------------------------------------------- responsive */
@media (max-width: 1100px) {
    :root { --rail-width: 224px; }
    .sidebar { padding-inline: 10px; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid.three, .form-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-grid.three > .span-three, .form-grid.four > .span-three { grid-column: 1 / -1; }
    .metric-grid.dashboard-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .diagnostics-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .diagnostics-strip .button { justify-self: start; }
    .diagnostics-strip .button.tertiary { margin-left: -14px; }
}

@media (max-width: 900px) {
    .diagnostic-grid, .settings-grid { grid-template-columns: 1fr; }
    .metric-grid.dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .onboarding-list { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    /* A phone: the rail folds into a header row with the restaurant's mark and a menu key. */
    .app-shell { display: block; }
    .sidebar { position: sticky; top: 0; z-index: var(--z-nav); width: auto; height: auto; max-height: 100dvh; padding: 8px 12px; overflow-x: hidden; border-right: 0; border-bottom: 1px solid var(--border); }
    .icon-button.rail-toggle { display: inline-grid; }
    .brand { padding-block: 4px; }
    .sidebar:not(.open) .primary-nav, .sidebar:not(.open) .sidebar-footer { display: none; }
    .sidebar.open { overflow-y: auto; }
    .sidebar-footer { margin-top: 10px; }
    .content { padding: 22px 16px 48px; }
    .page-header, .toolbar, .pagination { align-items: stretch; flex-direction: column; }
    /* Stacked, the search box keeps its own height instead of growing to fill the column. */
    .toolbar .search-box { flex: 0 0 auto; max-width: none; }
    .page-header > div:first-child { flex: 0 0 auto; }
    .page-header .header-actions, .page-header .page-actions { justify-content: flex-start; margin-top: 0; margin-left: 0; }
    h1 { font-size: var(--text-2xl); }
    .modal-backdrop { padding: 10px; }
    .cabinet-dialog, .cabinet-dialog.wide { width: 100%; max-height: calc(100dvh - 20px); gap: 16px; }
    /* A phone: the dialog is a sheet that rises from the bottom edge, carries a grabber, can be pulled down to go
       (platformAdminApi: sheets) and leaves the way it came. Keys clear the home indicator. */
    .modal-backdrop:has(> .cabinet-dialog) { align-items: end; padding: 12px 0 0; }
    .cabinet-dialog, .cabinet-dialog.wide { position: relative; max-height: calc(100dvh - 12px); padding-top: 26px; border-bottom: 0; border-radius: var(--radius-large) var(--radius-large) 0 0; transition: transform 320ms var(--ease-out); }
    .cabinet-dialog::before { position: absolute; top: 8px; left: calc(50% - 18px); width: 36px; height: 5px; content: ""; background: var(--input-border); border-radius: 3px; }
    .cabinet-dialog > .section-heading:first-child, .cabinet-dialog > form:first-child > .section-heading:first-child { touch-action: none; }
    .cabinet-dialog > .form-actions:last-child, .cabinet-dialog > form > .form-actions:last-child { padding-bottom: calc(16px + env(safe-area-inset-bottom)); border-radius: 0; }
    @starting-style { .cabinet-dialog { opacity: 1; transform: translateY(100%); } }
    .modal-backdrop.leaving .cabinet-dialog { animation: sheet-down 220ms var(--ease-out) forwards; }
    .cabinet-dialog.resist { animation: sheet-resist-down 300ms var(--ease-out); }
    .cabinet-dialog .form-grid, .cabinet-dialog .flag-row, .cabinet-dialog .section-heading { padding-inline: 16px; }
    .role-list, .role-scope { padding-inline: 16px; }
    .role-summary { margin-inline: 16px; }
    .role-list { grid-template-columns: 1fr; }
    .cabinet-dialog .alert, .cabinet-dialog .server-side, .cabinet-dialog .form-section > p.hint { margin-inline: 16px; }
    .cabinet-dialog > :is(p, .field, fieldset:not(.dialog-group), .toggle-field, .notice-card) { margin-inline: 16px; }
    .cabinet-dialog > .definition-list { padding-inline: 16px; }
    .cabinet-dialog .table-scroll { margin-inline: 16px; }
    /* On a phone the footer's keys share the row evenly instead of wrapping raggedly. */
    .cabinet-dialog > .form-actions:last-child > .button, .cabinet-dialog > form > .form-actions:last-child > .button { flex: 1 1 auto; }
    .cabinet-dialog > fieldset.dialog-group { margin-inline: 16px; }
    .cabinet-dialog > .form-actions:last-child, .cabinet-dialog > form > .form-actions:last-child { padding-inline: 16px; }
    .form-grid.two, .form-grid.three, .form-grid.four { grid-template-columns: 1fr; }
    .form-grid.three > .field > .toggle:first-child, .form-grid.four > .field > .toggle:first-child { min-height: 0; margin-top: 0; }
    /* A toolbar with nothing left in it (the cabinet and the operator hide their selectors here) is not a blank bar. */
    .shell-toolbar:not(:has(.global-search > *)) { display: none; }
    .header-actions { align-items: stretch; }
    .page-header :is(.header-actions, .page-actions) > .button { flex: 1 1 auto; }
    div.detail-grid, .form-grid.three, .form-grid.four { grid-template-columns: 1fr; }
    .span-two, .span-three { grid-column: auto; }
    .metric-grid, .metric-grid.five { grid-template-columns: 1fr 1fr; }
    .definition-list, .flag-grid { grid-template-columns: 1fr; }
    .diff-row { grid-template-columns: 1fr; }
    .pagination div { justify-content: space-between; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-metrics { grid-template-columns: 1fr 1fr; }
    .diagnostics-strip { grid-template-columns: 1fr; }
    .ops-band { grid-template-columns: 1fr; }
    .summary-strip { grid-template-columns: 1fr 1fr; }
    .ops-value { font-size: 34px; }
    /* The takings get the whole width of a phone; the two counts share the row under them. */
    .today-day .summary-card.wide { grid-column: 1 / -1; }
    /* A count left alone on its row (no average yet) takes the row rather than leave an empty half. */
    .today-day .summary-card.wide + .summary-card:last-child { grid-column: 1 / -1; }
    .today-day .summary-card:not(.wide) .summary-value { font-size: 22px; }
    .today-problem { padding-inline: var(--space-4); }
    .today-problems h2 { padding-inline: var(--space-4); }
    .today-branches li { grid-template-columns: minmax(0, 1fr) auto; padding-inline: var(--space-4); }
    .today-branches small { grid-column: 1; grid-row: 2; }
    .today-branches strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .toolbar-meta { align-items: flex-start; flex-direction: column; }
    .template-bar { grid-template-columns: 1fr; }
    .schedule-grid { overflow-x: auto; }
    .schedule-head, .schedule-row { min-width: 620px; }
    .wizard-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 10px 12px; }
    .wizard-footer span { grid-column: 1 / -1; grid-row: 1; text-align: left; }
    .wizard-footer .button.primary { justify-self: stretch; white-space: normal; line-height: 1.2; }
    /* P1-2: a save bar's answer takes the room left of Save and wraps in it; it never widens its column
       past the screen and pushes Save off. A refusal, which is sentences, gets the whole row, and Save
       the row under it. */
    :is(.save-bar, .brand-save) { grid-template-columns: minmax(0, 1fr) auto; }
    :is(.save-bar, .brand-save) > .brand-save-status { grid-column: 1; grid-row: 1; overflow-wrap: anywhere; }
    :is(.save-bar, .brand-save) > .button { grid-column: 2; grid-row: 1; margin-left: 0; }
    :is(.save-bar, .brand-save) > .brand-save-status:has(.alert) { grid-column: 1 / -1; }
    :is(.save-bar, .brand-save) > .brand-save-status:has(.alert) + .button { grid-column: 1 / -1; grid-row: 2; }
    .audit-detail dl { grid-template-columns: 1fr 1fr; }
    .shell-toolbar { flex-wrap: wrap; padding: 10px 14px; }
    .global-search { flex-basis: 100%; max-width: none; }
    .command-trigger span, .shell-selector { display: none; }
    .login-card { padding: 22px 18px 16px; }
    .entrance-door { min-height: 60px; }
    .pos-shift .button { flex: 1 1 auto; }
    .pos-shift-spacer { display: none; }
    .pos-shift-actions { flex: 1 1 100%; margin-left: 0; }
    .printing-settings .form-grid { grid-template-columns: 1fr; }
    .printing-actions { width: 100%; justify-content: flex-start; }
    .printing-actions > :is(.button, select) { flex: 1 1 auto; }
    .printing-new-agent .button { width: 100%; }
    /* A phone: the badge and the way out on one row, the sentence under them, small. */
    .impersonation-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; min-height: 0; padding: 8px 12px; }
    .impersonation-bar .support-badge { grid-row: 1; justify-self: start; }
    .impersonation-bar .button { grid-row: 1; grid-column: 2; min-height: var(--control-sm); margin-left: 0; padding: 0 11px; font-size: var(--text-sm); }
    .impersonation-bar .support-text { grid-column: 1 / -1; font-size: var(--text-xs); line-height: 1.35; }
    :root:has(#support-banner) { --support-band: 96px; }
    :root:has(#support-banner) .app-shell > .sidebar { height: auto; max-height: calc(100dvh - var(--support-band)); }
    .toast { right: 16px; bottom: 16px; left: 16px; max-width: none; }
}

/* UI-2, a laptop beside the rail (761–1180 px): the rail keeps its icons and gives the page the width; every
   name is the icon's tooltip, and the count rides on the icon's corner. */
@media (min-width: 761px) and (max-width: 1180px) {
    .cabinet-shell { --rail-width: 72px; }
    .cabinet-shell > .sidebar { align-items: center; padding-inline: 10px; }
    .cabinet-shell .brand { flex: none; justify-content: center; padding: 4px; }
    .cabinet-shell .brand > span:last-child, .cabinet-shell .rail-search span, .cabinet-shell .rail-search kbd,
    .cabinet-shell .primary-nav a > span:not(.nav-count), .cabinet-shell .me-name, .cabinet-shell .station-link span,
    .cabinet-shell #theme-flip { display: none; }
    .cabinet-shell .rail-search { justify-content: center; width: 44px; padding: 0; }
    .cabinet-shell .sidebar > .primary-nav { width: 100%; align-items: center; }
    .cabinet-shell .primary-nav a { position: relative; justify-content: center; width: 48px; padding: 0; }
    .cabinet-shell .primary-nav .nav-count { position: absolute; top: 2px; right: 0; min-width: 18px; padding: 0 5px; font-size: 10.5px; line-height: 16px; }
    .cabinet-shell .stations { grid-template-columns: 1fr; }
    .cabinet-shell .station-link { width: 48px; padding: 0; }
    .cabinet-shell .me { justify-content: center; }
    .cabinet-shell .me-button { flex: none; padding: 4px; }
    .cabinet-shell .account-menu { left: 0; right: auto; bottom: 0; width: 280px; transform-origin: 0 100%; translate: 60px 0; }
}

/* NAV-1, a phone. The areas are a bar of frosted rail fixed under the thumb (a material: the page scrolls on
   under it), the four everyday ones and «More»; the rail itself is gone, and every page leaves room for the
   bar. (Written as a range so the block above stays the first of its spelling.) */
@media (width <= 760px) {
    .cabinet-shell > .sidebar { display: none; }
    .cabinet-shell .content { padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); }
    .cabinet-shell > .tab-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--z-nav); display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in oklch, var(--rail) 86%, transparent); border-top: 1px solid var(--border); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); }
    .tab-bar a { display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 0; min-height: 52px; padding: 0 4px; color: var(--muted); font-size: 10.5px; font-weight: 500; line-height: 1.2; text-decoration: none; border-radius: var(--radius-control); -webkit-tap-highlight-color: transparent; }
    .tab-bar a > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tab-mark { position: relative; display: grid; place-items: center; width: 44px; height: 28px; border-radius: var(--radius-control); transition: transform var(--press) var(--ease-out); }
    .tab-mark .icon { width: 22px; height: 22px; }
    .tab-mark .nav-count { position: absolute; top: -2px; right: 2px; min-width: 18px; padding: 0 5px; font-size: 10.5px; line-height: 16px; }
    .tab-bar a.active { color: var(--ink); font-weight: 600; }
    .tab-bar a:active .tab-mark { transform: scale(.9); }
    /* The strip runs edge to edge and slides sideways when an area has more screens than fit. */
    .area-nav { flex-wrap: nowrap; gap: 0 22px; margin: -10px -16px 18px; padding-inline: 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
    .area-nav::-webkit-scrollbar { display: none; }
    /* A screen slid under either edge fades into it instead of being cut, so the strip reads as one that scrolls.
       The fade spans only the 16 px gutter: at rest no word is touched. */
    .area-nav { -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
    .area-nav a { min-height: 48px; font-size: 15px; }
    .area-nav a.nav-locked { margin-left: 0; }
    .nav-row { min-height: 64px; }
    .branch-parts a { min-height: 48px; font-size: 15px; }
    .app-list { grid-template-columns: minmax(0, 1fr); }
    /* A phone stacks a branch's row: its name, the choice at full width, the key under it. Every key is a thumb's height. */
    .poster-branches > li { grid-template-columns: minmax(0, 1fr); }
    .poster-branches > li > .button { justify-self: start; }
    .poster-branch-current { grid-column: auto; }
    .poster-step .button, .poster-branches select { min-height: var(--control-lg); }
    .poster-step .section-heading > .button { width: 100%; justify-content: center; }
    .poster-preview > .form-actions > .button { width: 100%; justify-content: center; }
    .poster-rows { max-height: 360px; }
    .poster-rows > li { grid-template-columns: minmax(0, 1fr); }
    .poster-key-form .button, .poster-key-block .button, .poster-key-form input { min-height: var(--control-lg); }
    .poster-key-form > .form-actions > .button, .poster-key-block > .form-actions > .button { flex: 1 1 100%; justify-content: center; }
    .poster-sign-in { justify-items: stretch; }
    .poster-sign-in > .button { min-height: var(--control-lg); justify-content: center; }
    .poster-key-details > summary { padding: 12px 0; }
    .operator-poster-actions > .button { width: 100%; min-height: var(--control-lg); justify-content: center; }
    .app-row-copy strong { font-size: var(--text-lg); }
    .back-link { min-height: 44px; margin-bottom: 2px; font-size: var(--text-md); }
    .nav-row-copy strong { font-size: var(--text-lg); }
    .account-panel .user-card > .button { flex: 1 1 100%; min-height: var(--control-lg); }
    .account-panel .rail-prefs { grid-template-columns: minmax(0, 1fr); }
    .cabinet-shell .toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
    /* A save bar that travels with the screen stops above the bottom bar, not behind it. */
    .cabinet-shell .wizard-footer { bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------------------ motion, contrast, paper */
@media (hover: none) {
    tbody tr:hover td { background: transparent; }
    tr.selected td { background: var(--surface-accent); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .button:active:not(:disabled), .pos-product:active:not(:disabled), .pos-chip:active, .pos-step:active:not(:disabled), .pos-pay:active:not(:disabled), .pos-option:active:not(:disabled), .station-key:active:not(:disabled), .station-person:active:not(:disabled), .kds-action:active:not(:disabled), .entrance-door:active, .icon-button:active { transform: none; }
}

/* Asked for less see-through: every material turns solid — the console's bar, the phone's bar, the save bar. */
@media (prefers-reduced-transparency: reduce) {
    .shell-toolbar { background: var(--canvas); backdrop-filter: none; }
    .cabinet-shell > .tab-bar { background: var(--rail); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* More contrast asked for: hairlines become edges you can see and the faint fills firm up. */
@media (prefers-contrast: more) {
    :root { --border: oklch(72% 0.006 95); --line-soft: oklch(80% 0.005 95); --input-border: oklch(60% 0.007 95); --muted: oklch(40% 0.008 95); }
    :root[data-theme="dark"] { --border: oklch(48% 0.009 95); --line-soft: oklch(40% 0.009 95); --input-border: oklch(60% 0.009 95); --muted: oklch(80% 0.006 95); }
}
/* A theme change cross-fades (platformAdminApi.preferences.apply): short, and nothing else moves meanwhile. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; animation-timing-function: ease; }

@media (forced-colors: active) {
    .status-dot, .badge, .button, input, select, textarea { forced-color-adjust: none; border: 1px solid CanvasText; }
    .status-dot, .badge::before, .ops-label::before, .kds-column-title::before { background: CanvasText; }
    .primary-nav a.active, .pos-chip.chosen, .pos-pay.chosen, .pos-option.chosen, .role-card.chosen { outline: 2px solid Highlight; }
    .support-frame { border-color: Highlight; }
}

@page { size: A4; margin: 14mm; }
@media print {
    :root { color-scheme: light; --canvas: #fff; --surface: #fff; --surface-subtle: #fff; --ink: #000; --navy: #000; --muted: #333; --label: #222; --border: #bbb; --line-soft: #ddd; }
    .sidebar, .shell-toolbar, .breadcrumbs, .header-actions, .page-actions, .detail-tabs, .toast, .skip-link, .no-print, .onboarding-panel, .impersonation-bar, .support-frame { display: none !important; }
    .app-shell { display: block; }
    .content { max-width: none; padding: 0; }
    .panel, .metric { box-shadow: none; break-inside: avoid; }
    .print-summary { display: block; }
    .screen-tenant-detail { display: none !important; }
    a { color: #000; text-decoration: none; }
    /* The slip: the confirmation card alone, no chrome. */
    .pos-bar, .pos-done-actions, .pos-grid, .pos-done-ready, .pos-print { display: none !important; }
    .pos-shell, .pos-main, .pos-done { display: block; height: auto; }
    .pos-done-card { width: 100%; border: 0; box-shadow: none; }
    /* A report being looked at prints alone: the sheet, on paper, as on screen. */
    body:has(.shift-print) * { visibility: hidden; }
    body:has(.shift-print) .shift-print, body:has(.shift-print) .shift-print * { visibility: visible; }
    body:has(.shift-print) .pos-shell, body:has(.shift-print) .pos-main, body:has(.shift-print) .pos-grid,
    body:has(.shift-print) .pos-menu, body:has(.shift-print) .app-shell, body:has(.shift-print) .content-column,
    body:has(.shift-print) .content { display: block; height: auto; overflow: visible; }
    body:has(.shift-print) .modal-backdrop { position: absolute; inset: 0; display: block; padding: 0; background: none; }
    body:has(.shift-print) .shift-print { position: absolute; top: 0; left: 0; width: 100%; max-height: none; overflow: visible; border: 0; box-shadow: none; }
    .shift-print .no-print { display: none !important; }
    .shift-report-section[open] summary, .shift-report-section summary { list-style: none; }
}
/* B: a choice of items or of library groups in a dialog: a list that scrolls rather than a sheet taller than the screen. */
.attach-products { display: grid; gap: 6px; max-height: min(50vh, 420px); margin: 12px 0 0; padding: 0; overflow-y: auto; border: 0; }
.attach-products legend { margin-bottom: 6px; font-weight: 500; }
.attach-products small.hint { display: block; margin: 2px 0 0; }
.modifier-group h2 .badge, .modifier-summary .badge { margin-left: 8px; vertical-align: middle; }
.modifier-products { margin: 2px 0 0; }
/* In the side column the automatic-print settings stand one under another: two columns there leave a word a line. */
.cols .printing-settings .form-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
.cols .printing-settings .form-grid > :nth-child(3) { margin-top: 8px; }
/* What each role may do: six short cards under the team, a role's name over its one sentence. */
.roles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; margin: 0; padding: 0 20px 20px; }
.roles-grid > div { padding: 12px 14px; background: var(--surface-subtle); border-radius: 12px; }
.roles-grid dt { font-weight: 600; }
.roles-grid dd { margin: 3px 0 0; color: var(--muted); font-size: var(--text-sm); }
/* MON-1: the issues list. Red is for what is losing orders now and nothing else; a row reads in one look —
   the lamp, the sentence, what to do, where and how often — and its two presses sit on its right. */
.issue-counters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.issue-counter { width: 100%; font: inherit; text-align: left; border: 0; cursor: pointer; transition: background-color 120ms ease; }
.issue-counter:hover { background: var(--surface-hover); }
.issue-counter[aria-pressed="true"] { background: var(--surface-subtle); box-shadow: inset 0 -3px 0 var(--action), 1px 0 0 var(--line-soft); }
.issue-counter.danger strong { color: var(--red); }
.issue-counter.warning strong { color: var(--amber); }
.issue-detector { display: flex; align-items: center; gap: 8px; margin: -8px 0 var(--space-5); color: var(--muted); font-size: var(--text-sm); }
.issue-detector.attention { color: var(--amber); }
.issue-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: var(--space-5); align-items: start; }
.issue-filters { flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
.issue-chip { display: inline-flex; align-items: center; gap: 6px; }
.issue-list { display: grid; }
.issue-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; padding: 14px 16px 14px 13px; border-left: 3px solid transparent; border-bottom: 1px solid var(--line-soft); }
.issue-row:last-child { border-bottom: 0; }
.issue-row.issue-danger { border-left-color: var(--red-lamp); }
.issue-row.issue-warning { border-left-color: var(--amber-lamp); }
.issue-severity { padding-top: 2px; }
.issue-main { min-width: 0; }
.issue-title { display: block; color: var(--ink); font-weight: 600; text-decoration: none; }
.issue-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.issue-hint { margin: 4px 0 0; color: var(--label); font-size: var(--text-sm); max-width: 80ch; }
.issue-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 8px; color: var(--muted); font-size: var(--text-xs); }
.issue-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.issue-meta .link-button { color: var(--ink); font-weight: 600; }
.issue-subject { font-family: var(--font-mono); }
.issue-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.issue-tenants ul { display: grid; gap: 2px; margin: 0; padding: 0 8px 12px; list-style: none; }
.issue-tenant { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; color: var(--ink); font: inherit; text-align: left; background: none; border: 0; border-radius: var(--radius-control); cursor: pointer; }
.issue-tenant:hover, .issue-tenant.selected { background: var(--surface-subtle); }
.issue-tenant-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.issue-tenant-counts { display: inline-flex; gap: 10px; }
.issue-heading h1 { margin-top: 6px; }
.issue-todo { display: flex; gap: 14px; padding: 16px 20px; border-left: 3px solid var(--steel-400); }
.issue-todo.issue-danger { border-left-color: var(--red-lamp); background: var(--red-soft); }
.issue-todo.issue-warning { border-left-color: var(--amber-lamp); background: var(--amber-soft); }
.issue-todo h2 { margin-bottom: 4px; font-size: var(--text-md); }
.issue-todo p { margin: 0; max-width: 80ch; }
.issue-detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: var(--space-5); align-items: start; }
.issue-detail-side > .panel:last-child { margin-bottom: 0; }
.issue-facts { display: grid; gap: 0; margin: 0; padding: 0 20px 16px; }
.issue-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.issue-facts dt { color: var(--muted); font-size: var(--text-sm); }
.issue-facts dd { margin: 0; min-width: 0; }
.issue-facts .subline { display: block; max-width: 60ch; white-space: normal; overflow: visible; }
.issue-steps { display: grid; gap: 8px; margin: 0; padding: 0 20px 16px 40px; }
.issue-steps li span:last-child { margin-left: 8px; color: var(--muted); font-size: var(--text-sm); }
.issue-resolve { display: grid; gap: 12px; padding: 0 20px 20px; }
.issue-event-failed td { color: var(--red); }
.issue-banner { display: flex; align-items: center; gap: 14px; margin-bottom: var(--space-5); padding: 14px 18px; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--green-lamp); border-radius: var(--radius-surface); }
.issue-banner.danger { border-left-color: var(--red-lamp); background: var(--red-soft); }
.issue-banner.warning { border-left-color: var(--amber-lamp); background: var(--amber-soft); }
.issue-banner > span:nth-child(2) { display: grid; flex: 1; gap: 2px; }
.issue-banner small { color: var(--muted); }
.issue-banner-go { display: inline-flex; align-items: center; gap: 6px; color: var(--action); font-weight: 600; white-space: nowrap; }
@media (max-width: 1100px) { .issue-layout, .issue-detail-grid { grid-template-columns: minmax(0, 1fr); } .issue-tenants { order: -1; } }
@media (max-width: 760px) {
    .issue-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .issue-row { grid-template-columns: minmax(0, 1fr); }
    .issue-actions { justify-content: flex-start; }
    .issue-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
    .issue-banner { flex-wrap: wrap; }
}