/* Acatro brand tokens as CSS variables — generated from docs/brand-system.md
   v1.1 (same source as packages/acatro_ui). Do not tweak hexes ad hoc:
   change the brand doc first, then regenerate here and in acatro_ui.
   Layout/spacing/motion rules: docs/customer-web-ux.md v1.0. */

/* Brand fonts, self-hosted (variable, latin subset) — no CDN. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Ember Coral (primary) */
  --coral-50: #FFF3F0; --coral-100: #FFE1DA; --coral-200: #FFC3B5;
  --coral-300: #FF9C86; --coral-400: #FF7154; --coral-500: #F5502C;
  --coral-600: #D93E1F; --coral-700: #B32F16; --coral-800: #8C2411;
  --coral-900: #6B1B0C; --coral-950: #2A0D06;

  /* Signal Teal (trust) */
  --teal-50: #EDFAF8; --teal-100: #D2F2EE; --teal-200: #A6E4DD;
  --teal-300: #6FCFC5; --teal-400: #3AB3A8; --teal-500: #17948B;
  --teal-600: #0F776F; --teal-700: #0C5E58; --teal-800: #0A4A45;
  --teal-900: #073733;

  /* Warm neutrals */
  --white: #FFFFFF;
  --neutral-50: #FAF9F7; --neutral-100: #F3F1EE; --neutral-200: #E7E4DF;
  --neutral-300: #D3CFC8; --neutral-400: #A8A29A; --neutral-500: #6B665D;
  --neutral-600: #57524A; --neutral-700: #3E3A34; --neutral-800: #2A2723;
  --neutral-900: #1B1916;

  /* Semantic */
  --success-50: #EAF7EF; --success-500: #1E9E5A; --success-600: #17804A; --success-800: #0E6B3A;
  --warning-50: #FEF6E7; --warning-500: #E8930C; --warning-700: #A16A05; --warning-800: #8A5A06;
  --error-50: #FDEBEA; --error-500: #D92D20; --error-600: #B42318; --error-700: #9A1C13;
  --info-50: #EFF4FE; --info-500: #2563EB; --info-800: #1E40AF;
  --gold-50: #FBF3E2; --gold-500: #D4900A; --gold-700: #8A5C05;

  /* Food compliance (never restyled) */
  --veg: #1E9E5A; --non-veg: #8A4B2A; --egg: #C98A0B;

  /* Order-status accents (brand-system §3.1, light mode) */
  --status-placed: var(--warning-500);
  --status-preparing: var(--warning-500);
  --status-confirmed: var(--teal-500);
  --status-ready_for_pickup: var(--teal-500);
  --status-picked_up: var(--teal-500);
  --status-on_the_way: var(--teal-500);
  --status-arrived: var(--teal-600);
  --status-delivered: var(--success-600);
  --status-cancelled: var(--neutral-500);
  --status-rejected: var(--error-500);

  /* Type — Manrope display / Inter body per brand doc §4 (self-hosted above;
     tabular numerals for money). */
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* Elevation + motion (customer-web-ux.md §1) — warm-tinted, never pure black */
  --shadow-1: 0 1px 2px rgba(43,13,6,.05), 0 2px 8px rgba(43,13,6,.06);
  --shadow-2: 0 4px 12px rgba(43,13,6,.08), 0 12px 32px rgba(43,13,6,.10);
  --ease: cubic-bezier(.2,.8,.4,1);
}

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

/* ── Base ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--neutral-50);
  color: var(--neutral-900);
  font-size: 15px;
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--font-display); color: var(--neutral-900); }
.money { font-variant-numeric: tabular-nums; }

/* ── Shell ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border-bottom: 1px solid var(--neutral-200);
  padding: 12px 24px;
}
.topbar .brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--coral-600); }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a {
  color: var(--neutral-600); text-decoration: none; padding: 6px 12px; border-radius: 8px;
}
.topbar nav a:hover { background: var(--neutral-100); }
.topbar nav a.active { color: var(--coral-700); background: var(--coral-50); font-weight: 600; }
.topbar .spacer { flex: 1; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }

/* ── Cards, badges, buttons ────────────────────────────────────────── */
.card {
  background: var(--white); border: 1px solid var(--neutral-200);
  border-radius: 16px; padding: 16px; margin-bottom: 12px;
  box-shadow: var(--shadow-1);
}
.badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.badge.placed, .badge.preparing { background: var(--warning-50); color: var(--warning-700); }
.badge.confirmed, .badge.ready_for_pickup { background: var(--teal-50); color: var(--teal-700); }
.badge.rejected { background: var(--error-50); color: var(--error-600); }
.badge.open { background: var(--success-50); color: var(--success-600); }
.badge.closed { background: var(--error-50); color: var(--error-600); }

.btn {
  font: inherit; font-weight: 600; border-radius: 12px; padding: 9px 16px;
  border: 1px solid transparent; cursor: pointer; min-height: 24px; text-decoration: none;
  transition: background .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.btn:active { transform: scale(.98); }
:is(.btn, .chip, input, select, a, button, summary):focus-visible {
  outline: 2px solid var(--coral-500); outline-offset: 2px; border-radius: 4px;
}
.btn-primary { background: var(--coral-600); color: var(--white); }
.btn-primary:hover { background: var(--coral-700); }
.btn-outline { background: var(--white); color: var(--neutral-700); border-color: var(--neutral-300); }
.btn-outline:hover { background: var(--neutral-100); }
.btn-danger { background: var(--error-600); color: var(--white); }
.btn-danger:hover { background: var(--error-700); }
.btn-sm { padding: 5px 10px; font-size: 13px; }

input[type="text"], input[type="tel"], input[type="number"],
input[type="password"], input[type="date"], select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--neutral-300);
  border-radius: 8px; background: var(--white); color: var(--neutral-900);
}
input:focus, select:focus { outline: 2px solid var(--coral-400); outline-offset: 1px; }
.error-text { color: var(--error-600); font-size: 13px; margin-top: 4px; }

/* Visible to a screen reader, to nothing else.
   Needed because several controls on the operator surface are unambiguous by
   position and ambiguous by name — a reject-reason box beside the order it
   refuses, a search field under the heading that explains it. A placeholder is
   not a substitute: it is never announced as the field's name and it vanishes
   the moment anybody types. Clip-based rather than `display:none`, which would
   take it out of the accessibility tree along with everything else. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  border: 0;
}

/* ── Order board ───────────────────────────────────────────────────── */
/* Four lanes since S103 — the fourth is Out for delivery, which the board had
   never had, so an order simply vanished at handoff and "where is it?" had no
   answer on the surface that is asked it.
   Explicit breakpoints rather than auto-fit: these are four named places, not a
   gallery, and an owner learning "ready is the third column" should not find it
   somewhere else because a sidebar changed width. */
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1200px) { .board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .board { grid-template-columns: 1fr; } }
.board h2 { font-size: 15px; color: var(--neutral-600); margin: 0 0 10px; }
.order-items { margin: 8px 0; padding: 0; list-style: none; color: var(--neutral-700); }
.order-items li { padding: 2px 0; }
.order-meta { color: var(--neutral-500); font-size: 13px; }
.order-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ── Stat header ───────────────────────────────────────────────────── */
.stats { display: flex; gap: 16px; margin-bottom: 20px; }
.stat {
  background: var(--white); border: 1px solid var(--neutral-200);
  border-radius: 12px; padding: 12px 20px; min-width: 140px;
}
.stat .label { color: var(--neutral-500); font-size: 12px; }
.stat .value { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
/* Multi-outlet switcher — reads as the outlet name, not as a form control. */
.outlet-switcher {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  max-width: 260px; padding: 2px 4px; margin: 2px 0 4px;
  background: transparent; border: 1px solid var(--neutral-200); border-radius: 8px;
}

/* ── Menu table ────────────────────────────────────────────────────── */
table.menu { width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--neutral-200); border-radius: 12px; overflow: hidden; }
table.menu th, table.menu td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--neutral-100);
}
table.menu th { background: var(--neutral-100); color: var(--neutral-600); font-size: 13px; }
tr.category-row td { background: var(--neutral-50); font-weight: 700; }
/* FSSAI-style diet marks (customer-web-ux.md §4): green circle-in-square for
   veg; filled TRIANGLE-in-square for non-veg (and egg, in its ochre color) —
   the 2020 Labelling Regs shape distinction, legible without color vision. */
.diet-dot {
  display: inline-block; width: 13px; height: 13px; border-radius: 2px;
  border: 1.5px solid; position: relative; margin-right: 8px; vertical-align: -1px;
}
.diet-dot::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: currentColor;
}
.diet-non_veg::after, .diet-egg::after {
  border-radius: 0; inset: 2px;
  clip-path: polygon(50% 8%, 96% 92%, 4% 92%);
}
.diet-veg { color: var(--veg); border-color: var(--veg); }
.diet-non_veg { color: var(--non-veg); border-color: var(--non-veg); }
.diet-egg { color: var(--egg); border-color: var(--egg); }
.muted { color: var(--neutral-400); }

/* ── Login ─────────────────────────────────────────────────────────── */
.login-wrap { max-width: 380px; margin: 80px auto; }
.login-wrap .card { padding: 28px; }
.login-wrap label { display: block; margin: 12px 0 4px; font-weight: 600; color: var(--neutral-700); }
.login-wrap input { width: 100%; }
.hint {
  background: var(--teal-50); color: var(--teal-800); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; margin-top: 16px;
}

/* ── Admin ops console ─────────────────────────────────────────────── */
.container-wide { max-width: 1240px; }
.page-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 4px; }
.page-head h1 { font-size: 24px; margin: 0; }
.page-sub { color: var(--neutral-500); font-size: 14px; margin: 0 0 20px; }
.section-title { font-size: 16px; margin: 28px 0 12px; color: var(--neutral-800); }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--neutral-200); margin-bottom: 18px; }
.tabs button {
  font: inherit; font-weight: 600; background: none; border: none; cursor: pointer;
  padding: 10px 16px; color: var(--neutral-500); border-bottom: 2px solid transparent;
}
.tabs button.active { color: var(--coral-700); border-bottom-color: var(--coral-600); }

/* Filter / toolbar row */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.toolbar .field { display: flex; flex-direction: column; gap: 4px; }
.toolbar label { font-size: 12px; font-weight: 600; color: var(--neutral-600); }
.toolbar input, .toolbar select { min-width: 160px; }

/* Generic data table.
   ⚠ `overflow: CLIP`, never `hidden`, and the difference is a bug that shipped on
   two surfaces for weeks. Both clip the corners to the 12px radius; only `hidden`
   makes the table **a scroll container**. A `position: sticky` header resolves its
   offset against the nearest scrollport, so with `hidden` the sticky `th` on
   `body.admin` (top: 65px) and `body.owner` (top: 58px) pinned itself 65/58px
   below the TABLE's own top edge — painting the column header across the first
   data row, on every table, at rest, before anybody scrolled anything. `clip`
   clips without creating a scrollport, so the offset resolves against the
   viewport and means what it was written to mean: "sit under the topbar".
   The narrow-width rule that sets `display: block; overflow-x: auto` deliberately
   re-creates the scrollport for horizontal scrolling — and turns the sticky
   header off in the same breath. */
table.data { width: 100%; border-collapse: collapse; background: var(--white);
  border: 1px solid var(--neutral-200); border-radius: 12px; overflow: clip; }
table.data th, table.data td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--neutral-100);
  vertical-align: middle; font-size: 14px;
}
table.data th { background: var(--neutral-100); color: var(--neutral-600); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.03em; }
table.data tr:last-child td { border-bottom: none; }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data a { color: var(--coral-700); text-decoration: none; font-weight: 600; }
table.data a:hover { text-decoration: underline; }
.empty { color: var(--neutral-400); padding: 24px; text-align: center; }

/* Status badges — full order state machine + onboarding states */
.badge.picked_up, .badge.on_the_way, .badge.arrived { background: var(--teal-50); color: var(--teal-700); }
.badge.delivered { background: var(--success-50); color: var(--success-800); }
.badge.cancelled_customer, .badge.cancelled_system, .badge.delivery_failed,
.badge.payment_failed { background: var(--neutral-100); color: var(--neutral-600); }
.badge.pending_payment { background: var(--warning-50); color: var(--warning-700); }
.badge.pending { background: var(--warning-50); color: var(--warning-700); }
/* O5 — quiet context rather than a status: it labels which SIDE a history row
   came from, and must not compete with the override badge beside it. Its own
   declared pair, because bare `.badge` sets padding and no fill at all — a span
   with no modifier renders as unstyled text in a pill-shaped gap (the U2
   lesson, in the other direction). */
.badge.muted { background: var(--neutral-100); color: var(--neutral-600); }
.badge.approved { background: var(--success-50); color: var(--success-800); }
.badge.suspended { background: var(--error-50); color: var(--error-600); }
.badge.demand { background: var(--info-50); color: var(--info-800); }
.badge.rain { background: var(--teal-50); color: var(--teal-700); }
.badge.paid, .badge.completed { background: var(--success-50); color: var(--success-800); }
.badge.online { background: var(--success-50); color: var(--success-800); }
.badge.offline { background: var(--neutral-100); color: var(--neutral-500); }

/* Inline forms & small controls */
.inline-form { display: inline-flex; gap: 6px; align-items: center; }
.inline-form input[type="number"], .inline-form input[type="text"] { width: 96px; }
.btn-success { background: var(--success-600); color: var(--white); }
.btn-success:hover { background: var(--success-800); }
.btn-warning { background: var(--warning-700); color: var(--white); }
.btn-warning:hover { background: var(--warning-800); }
.stack-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; }
.stack-form label { display: block; font-size: 12px; font-weight: 600; color: var(--neutral-600); margin-bottom: 4px; }
.stack-form input, .stack-form select { width: 100%; }
.flash { background: var(--success-50); color: var(--success-800); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--neutral-100); }
.timeline .when { color: var(--neutral-500); font-size: 13px; min-width: 150px; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.kv { font-size: 14px; } .kv .k { color: var(--neutral-500); font-size: 12px; }
.kv .v { font-weight: 600; }
.flash-error { background: var(--error-50); color: var(--error-700); }

/* ── Restaurant board: alarm, acceptance clock, cancelled lane, rider ──
   Phase 1 of docs/restaurant-surfaces-plan.md (G2/G3/G4/G5). Tokens only —
   no new colours enter the system here (D9). */
.alarm {
  display: flex; align-items: center; gap: 12px;
  background: var(--warning-50); color: var(--warning-800);
  border: 2px solid var(--warning-700); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 16px;
  font-weight: 700; font-size: 15px;
  animation: alarm-pulse 1.1s ease-in-out infinite;
}
.alarm .alarm-text { flex: 1; }
.alarm .btn { background: var(--warning-800); color: var(--white); border: none; }
.alarm.cancelled { background: var(--error-50); color: var(--error-700); border-color: var(--error-600); }
.alarm.cancelled .btn { background: var(--error-600); }
@keyframes alarm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.72; } }
/* A kitchen screen runs all day; respect a user who has asked for stillness. */
@media (prefers-reduced-motion: reduce) { .alarm { animation: none; } }

.accept-clock {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 8px 0; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  background: var(--teal-50); color: var(--teal-700);
}
.accept-clock.auto_reject { background: var(--error-50); color: var(--error-600); }
.accept-clock.urgent { background: var(--warning-50); color: var(--warning-800); }
.accept-clock .clock-value { font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800; }

.lane-cancelled { margin-bottom: 18px; }
.lane-cancelled h2 { font-size: 15px; color: var(--error-600); margin: 0 0 10px; }
.cancelled-card { border: 2px solid var(--error-600); }
.cancel-reason { margin: 8px 0; font-size: 14px; color: var(--error-700); }

.rider-strip {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  margin: 8px 0; padding: 7px 10px; border-radius: 8px;
  background: var(--neutral-100); font-size: 13px;
}
.rider-strip.here { background: var(--success-50); }
.rider-strip .rider-state { font-weight: 700; color: var(--neutral-700); }
.rider-strip.here .rider-state { color: var(--success-800); }
.rider-strip .rider-name { font-weight: 600; }
.rider-strip .rider-phone { color: var(--coral-700); text-decoration: none; font-weight: 700; }

/* ── Menu manager (Phase 2 — own the menu) ──────────────────────────── */
.menu-flash {
  margin: 12px 0; padding: 10px 14px; border-radius: 8px;
  background: var(--success-50); color: var(--success-800); font-weight: 600;
}
.menu-add-category { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.menu-category { margin: 24px 0; }
.menu-category-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; border-bottom: 2px solid var(--neutral-200);
  padding-bottom: 8px; margin-bottom: 8px;
}
.menu-category-head h2 { margin: 0; font-size: 20px; }
.menu-category-actions, .menu-item-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.menu-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--neutral-100); color: var(--neutral-600); font-size: 12px; font-weight: 600;
}
.menu-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.menu-item-form {
  padding: 12px; border-radius: 10px;
  background: var(--neutral-50); border: 1px solid var(--neutral-200);
}
.menu-check { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--neutral-700); }
.menu-check input[type="number"] { width: 56px; }
.menu-thumb {
  display: block; margin-top: 6px; width: 72px; height: 54px;
  object-fit: cover; border-radius: 6px; border: 1px solid var(--neutral-200);
}
.badge-bestseller {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--warning-50); color: var(--warning-800);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}

/* G12 — variants / add-ons */
.option-panel {
  padding: 12px 14px; border-radius: 10px;
  background: var(--teal-50); border: 1px solid var(--teal-100);
}
.option-panel h3 { margin: 0 0 8px; font-size: 15px; color: var(--teal-800); }
.option-group {
  padding: 8px 10px; margin-bottom: 10px; border-radius: 8px;
  background: var(--white); border: 1px solid var(--neutral-200);
}
.option-list { list-style: none; margin: 6px 0; padding: 0; }
.option-list li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 4px 0; }
.option-list .option-name { font-weight: 600; min-width: 140px; }

/* D23 pickup code — read aloud across a counter, so it is sized to be read
   from a metre away rather than to be pretty. Tabular figures because a
   misread 1/7 costs a phone call. */
.pickup-code {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  margin: 8px 0; padding: 8px 12px; border-radius: 8px;
  background: var(--teal-50); border: 1px solid var(--teal-200);
}
.pickup-code-label {
  font-size: 12px; font-weight: 600; color: var(--teal-800);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pickup-code-value {
  margin-left: auto; font-size: 26px; font-weight: 800; line-height: 1.1;
  color: var(--teal-800); letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}

.order-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.order-link:hover { border-bottom-style: solid; }

/* ── Customer web (public storefront) — customer-web-ux.md v1.0 ────── */
.cust-header { position: sticky; top: 0; z-index: 40; box-shadow: var(--shadow-1); }
.cust-header .brand { text-decoration: none; font-size: 22px; letter-spacing: -0.02em; }
.cust-header .cust-tagline { margin-left: -8px; }
.cust-nav { display: flex; align-items: center; gap: 12px; }
.cust-nav a { color: var(--neutral-600); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 500; }
.cust-nav a:hover { background: var(--neutral-100); }
.cust-nav a.active { color: var(--coral-700); background: var(--coral-50); font-weight: 600; }
.cust-nav a.btn { color: var(--white); }
.cust-nav a.btn:hover { background: var(--coral-700); }
.cust-main { min-height: 60vh; }
.cust-footer { border-top: 1px solid var(--neutral-200); background: var(--white); margin-top: 64px; padding: 32px 0; }
.cust-footer .brand { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--coral-600); }
.cust-footer p { margin: 6px 0 0; }

/* Hero band */
.hero {
  background: linear-gradient(135deg, var(--coral-50) 0%, var(--neutral-50) 70%);
  border: 1px solid var(--coral-100); border-radius: 16px;
  padding: 40px 32px; margin-bottom: 24px;
}
.hero h1 { font-size: 34px; letter-spacing: -0.02em; margin: 0 0 6px; }
.hero p { color: var(--neutral-600); margin: 0; font-size: 16px; }

/* Offers strip */
.offers-strip { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 20px; }
.offer-chip {
  background: var(--coral-50); color: var(--coral-800); border: 1px dashed var(--coral-300);
  border-radius: 12px; padding: 12px 16px; font-size: 13px;
}
.offer-chip strong { font-family: var(--font-display); font-size: 14px; letter-spacing: 0.02em; }

/* Search + filter row */
.feed-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.feed-toolbar .field { display: flex; flex-direction: column; gap: 4px; }
.feed-toolbar label { font-size: 12px; font-weight: 600; color: var(--neutral-600); }
.feed-toolbar input[type="search"] {
  min-width: 280px; padding: 11px 14px; border-radius: 12px; font-size: 15px;
}
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 8px 14px; min-height: 24px; border-radius: 999px;
  border: 1px solid var(--neutral-300); background: var(--white); color: var(--neutral-700);
  transition: background .15s var(--ease), border-color .15s var(--ease);
  text-decoration: none; display: inline-flex; align-items: center;
}
.chip:hover { border-color: var(--neutral-400); background: var(--neutral-50); }
.chip.on { background: var(--teal-50); color: var(--teal-800); border-color: var(--teal-300); }

/* Restaurant cards — imagery-forward (ux §3) */
.rest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .rest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rest-grid { grid-template-columns: 1fr; } }
.rest-card {
  display: block; text-decoration: none; color: inherit; overflow: hidden;
  background: var(--white); border: 1px solid var(--neutral-200); border-radius: 16px;
  box-shadow: var(--shadow-1);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.rest-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--coral-200); }
.rest-card .body { padding: 14px 16px 16px; }
.rest-card h2 { font-size: 17px; margin: 0 0 3px; letter-spacing: -0.01em; }
.rest-card .cuisines { color: var(--neutral-500); font-size: 13px; margin: 0 0 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rest-card .meta-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--neutral-600); flex-wrap: wrap; }
.rest-card.closed .card-img { filter: grayscale(1) opacity(.7); }

/* Restaurant/dish imagery — real photo (img) or tinted-initial placeholder */
.card-img {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 40px; color: var(--white);
  text-shadow: 0 2px 8px rgba(43,13,6,.25); user-select: none;
}
.card-img.sm { aspect-ratio: 1; width: 96px; border-radius: 12px; font-size: 26px; flex: none; }
img.card-img { object-fit: cover; width: 100%; height: auto; display: block; background: var(--neutral-100); }
img.card-img.sm { width: 96px; height: 96px; }

/* Restaurant hero banner */
.rest-banner {
  width: 100%; aspect-ratio: 3 / 1; max-height: 260px; object-fit: cover;
  border-radius: 16px; display: block; margin-bottom: 16px; box-shadow: var(--shadow-1);
  background: var(--neutral-100);
}
.tint-0 { background: linear-gradient(135deg, var(--coral-400), var(--coral-600)); }
.tint-1 { background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); }
.tint-2 { background: linear-gradient(135deg, var(--gold-500), var(--non-veg)); }
.tint-3 { background: linear-gradient(135deg, var(--coral-300), var(--coral-500)); }
.tint-4 { background: linear-gradient(135deg, var(--teal-300), var(--teal-500)); }
.tint-5 { background: linear-gradient(135deg, var(--warning-500), var(--gold-700)); }
.tint-6 { background: linear-gradient(135deg, var(--coral-500), var(--coral-700)); }
.tint-7 { background: linear-gradient(135deg, var(--success-500), var(--teal-600)); }

.rating-pill {
  display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 13px;
  background: var(--success-500); color: var(--white); padding: 3px 9px; border-radius: 8px;
}
.rating-pill.low { background: var(--warning-500); }
.veg-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--veg);
  border: 1px solid var(--veg); border-radius: 4px; padding: 1px 6px;
}
.closed-tag { color: var(--error-600); font-weight: 600; font-size: 12px; }
.time-est { color: var(--neutral-600); }

/* Restaurant page (ux §4) */
.rest-hero { margin-bottom: 8px; }
.rest-hero h1 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 4px; }
.rest-hero .sub { color: var(--neutral-600); margin: 0 0 12px; font-size: 15px; }
.rest-hero .stat-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.breadcrumbs { font-size: 13px; color: var(--neutral-500); margin-bottom: 14px; }
.breadcrumbs a { color: var(--neutral-600); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Outlet offers (G11) — the codes a customer types at checkout, so the code
   itself is the loudest thing in the card. Scrolls horizontally on a phone
   rather than wrapping into a wall. */
.offer-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 2px;
  margin: 12px 0 4px; scrollbar-width: none;
}
.offer-strip::-webkit-scrollbar { display: none; }
.offer-card {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: 12px; background: var(--teal-50);
  border: 1px dashed var(--teal-300); color: var(--teal-800); max-width: 280px;
}
.offer-card strong { font-size: 14px; letter-spacing: 0.04em; }
.offer-card span { font-size: 12.5px; color: var(--neutral-700); }

/* Sticky category nav — anchor chips, works with zero JS */
.cat-nav {
  position: sticky; top: 57px; z-index: 30; display: flex; gap: 8px; overflow-x: auto;
  background: var(--neutral-50); padding: 10px 0; margin: 8px 0 4px;
  border-bottom: 1px solid var(--neutral-200); scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav a { white-space: nowrap; }

.menu-section h2 { font-size: 19px; margin: 30px 0 4px; scroll-margin-top: 120px; letter-spacing: -0.01em; }
.menu-section .count { color: var(--neutral-400); font-weight: 500; font-size: 14px; }
.menu-item {
  display: flex; gap: 16px; justify-content: space-between;
  padding: 18px 0; border-bottom: 1px solid var(--neutral-100);
}
.menu-item .info { flex: 1; min-width: 0; }
.menu-item .name { font-weight: 600; font-size: 15.5px; }
.menu-item .desc { color: var(--neutral-500); font-size: 13px; margin: 4px 0 0; max-width: 60ch; }
.menu-item .price { font-variant-numeric: tabular-nums; font-weight: 600; margin-top: 8px; }
.menu-item .add-form { min-width: 210px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.menu-item .opt-group { margin: 0; text-align: left; align-self: stretch;
  background: var(--neutral-50); border: 1px solid var(--neutral-100); border-radius: 12px; padding: 10px 12px; }
.menu-item .opt-group .opt-title { font-size: 12px; font-weight: 700; color: var(--neutral-600); margin-bottom: 4px; }
.menu-item .opt-group label { display: block; font-size: 13px; color: var(--neutral-700); padding: 2px 0; }
@media (max-width: 640px) {
  .menu-item { flex-direction: column; }
  .menu-item .add-form { align-items: stretch; text-align: left; min-width: 0; }
}
.bestseller { font-size: 11px; font-weight: 700; color: var(--gold-700); background: var(--gold-50);
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.unavail { color: var(--neutral-400); font-size: 13px; font-weight: 600; }

/* Cart / checkout (ux §5) */
.two-col { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }
.summary-sticky { position: sticky; top: 76px; }
.qty-stepper { display: inline-flex; align-items: center; gap: 10px; }
.qty-stepper button { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--neutral-300);
  background: var(--white); font-weight: 700; cursor: pointer; font-size: 15px;
  transition: background .15s var(--ease); }
.qty-stepper button:hover { background: var(--neutral-100); }
.bill-rows { list-style: none; padding: 0; margin: 0; }
.bill-rows li { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.bill-rows li.total { border-top: 1px solid var(--neutral-200); margin-top: 8px; padding-top: 12px;
  font-weight: 700; font-size: 17px; font-family: var(--font-display); }
.bill-rows .discount { color: var(--success-600); }
.bill-rows .surge { color: var(--warning-700); }

/* Payment methods as selectable cards */
.pay-methods { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; }
.pay-methods label {
  display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 500;
  border: 1px solid var(--neutral-200); border-radius: 12px; padding: 12px 14px; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.pay-methods label:hover { border-color: var(--neutral-300); background: var(--neutral-50); }
.pay-methods label:has(input:checked) { border-color: var(--coral-500); background: var(--coral-50); }
.pay-methods.inline { flex-direction: row; flex-wrap: wrap; }
.pay-methods.inline label { padding: 8px 14px; }
.addr-option {
  display: flex; gap: 10px; align-items: start; font-size: 14px;
  border: 1px solid var(--neutral-200); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
  cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease);
}
.addr-option:hover { border-color: var(--neutral-300); }
.addr-option:has(input:checked) { border-color: var(--teal-500); background: var(--teal-50); }
.trust-note { display: flex; gap: 6px; align-items: center; color: var(--neutral-500); font-size: 12.5px; margin-top: 10px; }

/* Tracking (ux §6) */
.track-status { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.track-status h1 { font-size: 26px; margin: 0; letter-spacing: -0.02em; }
.otp-card { background: var(--teal-50); color: var(--teal-900); border: 1px solid var(--teal-200);
  border-radius: 16px; padding: 18px; margin: 0 0 12px; box-shadow: var(--shadow-1); }
.otp-card .code { font-family: var(--font-display); font-weight: 800; font-size: 36px; letter-spacing: 8px;
  color: var(--teal-700); }
.eta-line { font-size: 14px; color: var(--neutral-600); }
.rider-card { display: flex; align-items: center; gap: 12px; }

/* G15 — the rating card, on a delivered order. Stars are real <button>s, not
   an input[type=range] dressed up: they have to be reachable by keyboard and
   announce a value, and the whole card must work with zero JS beyond Livewire's
   own round-trip. */
.rate-card .rate-row { padding: 10px 0; border-top: 1px solid var(--neutral-200); }
.rate-card .rate-row:first-of-type { border-top: 0; }
.rate-stars { display: flex; gap: 4px; margin: 6px 0 8px; }
.rate-stars button {
  font: inherit; font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 3px;
  border: 0; background: none; color: var(--neutral-300);
  transition: transform .12s var(--ease), color .12s var(--ease);
}
.rate-stars button:hover { transform: scale(1.12); }
.rate-stars button.on { color: var(--success-600); }
body.cust .rate-stars button.on { color: var(--rating); }
.rate-card textarea {
  width: 100%; min-height: 68px; padding: 10px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--neutral-300); border-radius: 12px; background: var(--white);
  resize: vertical;
}
/* Negative chips read as a complaint, not as another thing to collect. */
.chip.neg.on { background: var(--warning-50); color: var(--warning-700); border-color: var(--warning-500); }
.rate-saved { color: var(--success-800); font-weight: 600; font-size: 13.5px; }

/* Status stepper — every state, pre-dispatch included */
.stepper { list-style: none; margin: 4px 0 8px; padding: 0; }
.stepper li { display: flex; gap: 12px; position: relative; padding: 0 0 22px 0; }
.stepper li:last-child { padding-bottom: 4px; }
.stepper .dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 3px;
  border: 2px solid var(--neutral-300); background: var(--white); z-index: 1;
}
.stepper li::before {
  content: ""; position: absolute; left: 6px; top: 17px; bottom: -2px; width: 2px;
  background: var(--neutral-200);
}
.stepper li:last-child::before { display: none; }
.stepper li.done .dot { background: var(--teal-500); border-color: var(--teal-500); }
.stepper li.done::before { background: var(--teal-300); }
.stepper li.now .dot { background: var(--coral-500); border-color: var(--coral-500); animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,80,44,.35); } 50% { box-shadow: 0 0 0 6px rgba(245,80,44,0); } }
.stepper .lbl { font-weight: 600; font-size: 14px; }
.stepper li:not(.done):not(.now) .lbl { color: var(--neutral-400); font-weight: 500; }
.stepper .when { color: var(--neutral-500); font-size: 12.5px; }

/* ══ Zomato-language art-direction pass (customer-web-ux.md) ══════════ */
body.cust { background: var(--white); }
.cust .container { max-width: 1160px; }

/* Immersive food hero */
.hero {
  position: relative; border: none; border-radius: 20px; overflow: hidden;
  background-size: cover; background-position: center;
  padding: 60px 44px; margin: 8px 0 24px;
}
.hero-inner { max-width: 640px; position: relative; z-index: 1; }
.hero h1 { color: var(--white); font-size: 40px; line-height: 1.08; margin: 0 0 8px; letter-spacing: -0.025em; }
.hero p { color: rgba(255,255,255,.92); margin: 0 0 20px; font-size: 16px; }
.hero-search {
  display: flex; align-items: center; gap: 10px; background: var(--white);
  border-radius: 14px; padding: 2px 16px; box-shadow: var(--shadow-2); max-width: 560px;
}
.hero-search input { border: none; outline: none; flex: 1; padding: 15px 4px; font-size: 16px; background: transparent; }
.hero-search-ic { font-size: 17px; opacity: .55; }

/* Offers strip */
.offer-chip { display: flex; align-items: center; gap: 8px; }
.offer-pct { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center;
  background: var(--coral-600); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 800; }

/* Filter bar */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 22px; }
.filter-spacer { flex: 1; }
.chip-select { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--neutral-300); background: var(--white); color: var(--neutral-700); cursor: pointer; }
.feed-heading { font-family: var(--font-display); font-size: 22px; margin: 4px 0 16px; letter-spacing: -0.01em; }
.feed-heading span { color: var(--neutral-400); font-weight: 600; font-size: 15px; }

/* Restaurant cards — Zomato anatomy */
.rest-grid { gap: 22px; }
.rest-card { border: 1px solid var(--neutral-200); border-radius: 18px; box-shadow: var(--shadow-1); }
.rest-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--neutral-200); }
.card-media { position: relative; overflow: hidden; border-radius: 18px 18px 0 0; }
.card-media .card-img { aspect-ratio: 4 / 3; border-radius: 0; }
.card-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
  background: linear-gradient(transparent, rgba(27,25,22,.6)); pointer-events: none; }
.fav { position: absolute; top: 10px; right: 10px; z-index: 2; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--coral-600); box-shadow: var(--shadow-1); }
.offer-ribbon { position: absolute; left: 12px; bottom: 9px; z-index: 2; color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.closed-veil { position: absolute; inset: 0; z-index: 2; background: rgba(27,25,22,.5); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; }
.rest-card .body { padding: 12px 14px 15px; }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.title-row h3 { font-size: 17px; margin: 0; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rating-pill { background: var(--success-600); border-radius: 7px; padding: 3px 8px; flex: none; }
.rating-pill.low { background: var(--warning-500); }
.sub-row { display: flex; align-items: center; gap: 6px; color: var(--neutral-600); font-size: 13px; margin: 6px 0 3px; }
.sub-row .cuisines { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sub-row .dot { color: var(--neutral-300); }
.cost-row { font-size: 13px; color: var(--neutral-700); font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* Restaurant menu rows — info left, image + green ADD right */
.cust .cat-nav { background: var(--white); top: 58px; }
.menu-item { display: block; border: none; border-bottom: 1px solid var(--neutral-100); border-radius: 0;
  padding: 22px 0; margin: 0; box-shadow: none; background: transparent; }
.menu-row { display: flex; gap: 24px; justify-content: space-between; align-items: flex-start; }
.menu-item .info { flex: 1; min-width: 0; }
.menu-item .name { font-weight: 600; font-size: 16px; margin: 4px 0 0; }
.menu-item .price { font-weight: 600; margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.menu-item .desc { color: var(--neutral-500); font-size: 13px; margin: 6px 0 0; max-width: 56ch; }
.menu-media { width: 132px; flex: none; display: flex; flex-direction: column; align-items: center; }
.menu-media .thumb { width: 132px; height: 118px; border-radius: 14px; aspect-ratio: auto; font-size: 30px; }
.btn-add { margin-top: -20px; z-index: 2; position: relative; background: var(--white); color: var(--success-600);
  border: 1px solid var(--success-500); border-radius: 10px; font: inherit; font-weight: 800; font-size: 14px;
  letter-spacing: .06em; padding: 9px 26px; cursor: pointer; box-shadow: var(--shadow-1);
  transition: background .15s var(--ease), color .15s var(--ease); }
.btn-add span { color: var(--success-500); font-weight: 700; }
.btn-add:hover { background: var(--success-600); color: #fff; }
.btn-add:hover span { color: #fff; }
.custom-note { font-size: 11px; color: var(--neutral-400); margin-top: 5px; }
.menu-item.is-unavailable .thumb { filter: grayscale(1) opacity(.6); }
.menu-item .unavail { margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--neutral-400); }
.menu-opts { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; padding: 12px 16px;
  background: var(--neutral-50); border: 1px solid var(--neutral-100); border-radius: 12px; }
.menu-opts .opt-group { min-width: 150px; background: none; border: none; padding: 0; }
.menu-opts .opt-title { font-size: 12px; font-weight: 700; color: var(--neutral-600); display: block; margin-bottom: 5px; }
.menu-opts .opt-title em { color: var(--neutral-400); font-weight: 500; font-style: normal; }
.menu-opts label { display: block; font-size: 13px; color: var(--neutral-700); padding: 3px 0; }
@media (max-width: 620px) {
  .menu-row { gap: 14px; }
  .menu-media { width: 104px; } .menu-media .thumb { width: 104px; height: 96px; }
  .hero { padding: 40px 24px; } .hero h1 { font-size: 30px; }
}

/* Sticky cart bar */
.cart-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 60;
  width: min(760px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between;
  gap: 16px; background: var(--coral-600); color: #fff; text-decoration: none;
  padding: 14px 22px; border-radius: 14px; box-shadow: var(--shadow-2);
  transition: background .15s var(--ease), transform .15s var(--ease);
}
.cart-bar:hover { background: var(--coral-700); }
.cart-bar-info { font-size: 15px; font-weight: 600; }
.cart-bar-rest { opacity: .85; font-weight: 500; margin-left: 4px; }
.cart-bar-cta { font-family: var(--font-display); font-weight: 800; letter-spacing: .01em; white-space: nowrap; }
.cust-footer { margin-bottom: 40px; }
@media (max-width: 560px) { .cart-bar-rest { display: none; } }

/* ══ VIBRANT customer-storefront layer (brand-system §2.5, v1.2) ══════ */
:root {
  --brand-50: #FFF1EF; --brand-100: #FFDAD5; --brand-500: #FF4D3D;
  --brand-600: #EA2B1F; --brand-700: #C21A10;
  --accent: #FF7A00;
  --surface: #FFFFFF; --surface-2: #F7F7F8;
  --ink: #1C1917; --ink-2: #3D4152; --ink-3: #686B78;
  --rating: #267E3E;
}

/* Scoped to the storefront only — operator surfaces keep the muted brand */
body.cust { background: var(--surface); color: var(--ink); }
body.cust h1, body.cust h2, body.cust h3 { color: var(--ink); }
body.cust .order-meta, body.cust .cuisines, body.cust .page-sub,
body.cust .sub-row, body.cust .menu-item .desc, body.cust .cost-row { color: var(--ink-3); }
body.cust .menu-item .name, body.cust .title-row h3 { color: var(--ink); }
body.cust .btn-primary { background: var(--brand-600); }
body.cust .btn-primary:hover { background: var(--brand-700); }
body.cust .topbar .brand, body.cust .cust-footer .brand { color: var(--brand-600); }
body.cust .cust-nav a.btn { background: var(--brand-600); }
body.cust .cust-nav a.btn:hover { background: var(--brand-700); }
body.cust .cust-nav a.active { color: var(--brand-700); background: var(--brand-50); }
body.cust .cart-bar { background: var(--brand-600); }
body.cust .cart-bar:hover { background: var(--brand-700); }
body.cust .rating-pill { background: var(--rating); }
body.cust .chip.on { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
body.cust .fav { color: var(--brand-600); }
body.cust .breadcrumbs a { color: var(--brand-700); }
/* R2-6 — the customer focus ring is GREEN, not brand red. §8 rule 3 is "red
   means broken", so a red ring around a field somebody merely tapped is the
   shape of a validation failure. Scoped to body.cust: the operator surfaces
   keep the base coral ring, which is §2.1-2.4's and not this ask's. */
body.cust :is(.btn,.chip,input,select,a,button,summary):focus-visible { outline-color: var(--success-600); }

/* "What's on your mind?" — circular cuisine tiles */
.section-head { font-family: var(--font-display); font-size: 22px; margin: 24px 0 14px; letter-spacing: -.01em; }
.cuisine-rail { display: flex; gap: 22px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: none; }
.cuisine-rail::-webkit-scrollbar { display: none; }
.cuisine-tile { flex: none; width: 92px; text-align: center; background: none; border: none; padding: 0;
  font: inherit; color: var(--ink-2); cursor: pointer; }
.cuisine-tile img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--neutral-100);
  box-shadow: var(--shadow-1); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.cuisine-tile:hover img { transform: translateY(-3px) scale(1.03); box-shadow: var(--shadow-2); }
.cuisine-tile span { display: block; margin-top: 9px; font-size: 13px; font-weight: 600; }

/* Bold coupon banners (replace thin dashed chips) */
.deal-banner { display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 6px; margin: 6px 0 4px; scrollbar-width: none; }
.deal-banner::-webkit-scrollbar { display: none; }
.deal-card { flex: none; min-width: 290px; display: flex; align-items: center; gap: 14px; text-decoration: none;
  padding: 16px 20px; border-radius: 16px; color: #fff; box-shadow: var(--shadow-1);
  background: linear-gradient(115deg, var(--brand-600), var(--accent)); }
.deal-card .deal-ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; }
.deal-amt { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.1; letter-spacing: -.01em; }
.deal-code { font-size: 12px; opacity: .92; letter-spacing: .04em; margin-top: 2px; }

/* Promoted / Top-Rated card tags */
.card-tags { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px; }
.card-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; color: #fff; box-shadow: var(--shadow-1); }
.card-tag.promoted { background: rgba(28,25,23,.82); }
.card-tag.top { background: var(--accent); }

/* Hero text must stay light over the photo (override body.cust ink heading) */
body.cust .hero h1 { color: #fff; }
body.cust .hero p { color: rgba(255,255,255,.92); }

/* ══ VIBRANT commerce pages — cart · checkout · tracking · history · login ══
   Same appetite-forward language as discovery/restaurant, carried through the
   ordering journey. Storefront tokens only (brand-system §2.5). ══════════════ */

/* Shared building blocks */
.sec-title { font-family: var(--font-display); font-size: 16px; font-weight: 700;
  margin: 0 0 12px; display: flex; align-items: center; gap: 9px; letter-spacing: -.01em; }
.sec-step { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--brand-50); color: var(--brand-700);
  font-size: 12px; font-weight: 800; }
.btn-block { display: block; width: 100%; text-align: center; }
.field-label { display: block; font-weight: 600; font-size: 13px; color: var(--ink-2); margin: 2px 0 6px; }
.bill-note { margin: 12px 0 14px; font-size: 12.5px; }

/* Friendly empty states (cart / checkout / history) */
.empty-state { text-align: center; max-width: 460px; margin: 32px auto 64px; padding: 44px 24px;
  background: var(--surface); border: 1px solid var(--neutral-200); border-radius: 20px; box-shadow: var(--shadow-1); }
.empty-emoji { font-size: 52px; line-height: 1; margin-bottom: 14px; }
.empty-state h2 { font-size: 22px; margin: 0 0 8px; }
.empty-state p { color: var(--ink-3); margin: 0 0 22px; font-size: 15px; }

/* ── Cart ─────────────────────────────────────────────────────────── */
.cart-lines { display: flex; flex-direction: column; gap: 12px; }
.cart-line { display: flex; gap: 14px; align-items: flex-start; background: var(--surface);
  border: 1px solid var(--neutral-200); border-radius: 16px; padding: 14px; box-shadow: var(--shadow-1); }
.cart-thumb { width: 60px; height: 60px; border-radius: 13px; font-size: 22px; flex: none; }
.cart-line-main { flex: 1; min-width: 0; }
.cart-line-name { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.cart-line-opts, .cart-line-unit { color: var(--ink-3); font-size: 13px; margin-top: 3px; }
.cart-line-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-line-total { font-weight: 700; font-size: 15px; color: var(--ink); }
.cart-line-remove { background: none; border: none; padding: 0; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--brand-600); cursor: pointer; }
.cart-line-remove:hover { text-decoration: underline; }
.cart-lines-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 2px; }
.link-ghost { background: none; border: none; padding: 6px 4px; font: inherit; font-weight: 600; font-size: 14px;
  color: var(--brand-600); cursor: pointer; text-decoration: none; }
.link-ghost:hover { text-decoration: underline; }
.link-ghost.danger { color: var(--ink-3); }
.link-ghost.danger:hover { color: var(--error-600); }
body.cust .qty-stepper button { color: var(--ink); }
body.cust .qty-stepper button:hover { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }

/* ── Checkout ─────────────────────────────────────────────────────── */
.addr-body { display: flex; flex-direction: column; gap: 3px; }
.addr-label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
body.cust .addr-option:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.pay-ic { font-size: 20px; width: 26px; text-align: center; flex: none; }
.pay-body { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.pay-name { font-weight: 600; color: var(--ink); }
.mock-badge { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--neutral-200);
  border-radius: 6px; padding: 2px 7px; }
body.cust .pay-methods label:has(input:checked) { border-color: var(--brand-500); background: var(--brand-50); }
.coupon-row { display: flex; align-items: center; gap: 8px; background: var(--surface-2);
  border: 1px solid var(--neutral-200); border-radius: 12px; padding: 3px 8px 3px 12px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease); }
.coupon-row:focus-within { border-color: var(--success-600); box-shadow: 0 0 0 3px rgba(23,128,74,.15); }
.coupon-ic { flex: none; font-size: 15px; opacity: .8; }
.coupon-row input { flex: 1; min-width: 0; border: none; background: transparent; padding: 10px 4px;
  font-weight: 600; letter-spacing: .04em; }
.coupon-row input:focus { outline: none; }
.coupon-hint { margin: 6px 0 0; }
.tip-block { margin-top: 18px; }
.tip-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.tip-pill { cursor: pointer; }
.tip-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.tip-pill span { display: inline-flex; align-items: center; justify-content: center; min-width: 54px;
  padding: 8px 15px; border-radius: 999px; border: 1px solid var(--neutral-300); background: var(--surface);
  color: var(--ink-2); font-weight: 600; font-size: 14px; transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
.tip-pill input:checked + span { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.tip-pill input:focus-visible + span { outline: 2px solid var(--success-600); outline-offset: 2px; }
.tip-hint { margin: 8px 0 0; }
.addr-add summary { cursor: pointer; font-weight: 600; color: var(--brand-600); list-style: none; }
.addr-add summary::-webkit-details-marker { display: none; }

/* ── Order tracking ───────────────────────────────────────────────── */
.eta-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; padding: 3px 11px;
  border-radius: 999px; background: var(--teal-50); color: var(--teal-800); font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.rider-card { display: flex; align-items: center; gap: 14px; }
.rider-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--teal-400), var(--teal-600)); }
body.cust .stepper li.now .dot { background: var(--brand-500); border-color: var(--brand-500); }

/* ── Order history ────────────────────────────────────────────────── */
.order-list { display: flex; flex-direction: column; gap: 12px; }
.order-row { display: flex; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--neutral-200); border-radius: 16px; padding: 14px 16px;
  box-shadow: var(--shadow-1);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); }
.order-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--brand-100); }
.order-row-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.order-row-icon { width: 52px; height: 52px; border-radius: 14px; flex: none; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #fff;
  text-shadow: 0 2px 8px rgba(43,13,6,.25); }
.order-row-main { flex: 1; min-width: 0; }
.order-row-top { display: flex; align-items: center; gap: 10px; }
.order-row-top strong { font-size: 16px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-row-meta { margin-top: 3px; }
.order-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.order-row-total { font-weight: 700; font-size: 16px; color: var(--ink); }
.order-row-actions { display: flex; align-items: center; gap: 12px; }
.order-row-cta { font-weight: 700; font-size: 13px; color: var(--brand-600); text-decoration: none; }
.order-row-cta:hover { text-decoration: underline; }
.pager { margin-top: 20px; }

/* Reorder CTA card (tracking, terminal orders) */
.reorder-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.reorder-card strong { font-size: 15px; color: var(--ink); }
.pager nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ── Login ────────────────────────────────────────────────────────── */
.login-wrap { max-width: 420px; margin: 56px auto 80px; }
.login-card { padding: 32px; }
.login-mark { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--brand-600);
  letter-spacing: -.02em; margin-bottom: 14px; }
.login-card h1 { font-size: 26px; margin: 0 0 4px; }
.login-form label { display: block; margin: 16px 0 6px; font-weight: 600; color: var(--ink-2); font-size: 14px; }
.phone-row { display: flex; gap: 8px; align-items: stretch; }
.phone-cc { display: inline-flex; align-items: center; padding: 0 12px; background: var(--surface-2);
  border: 1px solid var(--neutral-300); border-radius: 8px; font-weight: 600; color: var(--ink-2); }
.phone-row input { flex: 1; width: auto; min-width: 0; }
.login-form input { width: 100%; }
.otp-input { letter-spacing: 6px; font-weight: 700; font-size: 18px; }
.login-submit { margin-top: 22px; }

/* Profile completion / edit (D19) — reuses the login card shell. */
.verified-chip { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--neutral-300); border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.label-optional { font-weight: 500; font-size: 12.5px; color: var(--ink-3); }

/* ── Discovery mobile nits (filter clip at ~390px; tight rating pill) ─ */
.title-row h3 { min-width: 0; }
@media (max-width: 440px) {
  .filter-bar { gap: 8px; }
  .filter-spacer { display: none; }
  .filter-bar .chip-select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .rating-pill { padding: 3px 7px; font-size: 12.5px; }
}
@media (max-width: 560px) {
  .cart-line-side { gap: 6px; }
  .order-row-side { align-self: flex-start; }
}

/* ══ Session 10 — desktop-density pass + add-to-cart feedback + dish search ══
   The storefront is mobile-first and read oversized on a 1280–1440px laptop
   (giant hero pushed search results below the fold). This pass tightens the
   DESKTOP rhythm only (≥900px) — the mobile layout above is untouched — and
   adds the search/feedback affordances. Storefront tokens only (§2.5). ══════ */

/* Desktop density: smaller hero + tighter vertical rhythm so results sit near
   the fold instead of a scroll past a full-height hero. */
@media (min-width: 900px) {
  .hero { padding: 40px 40px; margin: 4px 0 20px; }
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 15px; margin-bottom: 16px; }
  .section-head { margin: 20px 0 12px; }
  .deal-banner { margin: 4px 0 2px; }
  .feed-heading { margin: 2px 0 14px; }
  .rest-grid { gap: 18px; }
  .rest-hero h1 { font-size: 26px; }
  .menu-section h2 { margin: 24px 0 2px; }
  .menu-item { padding: 16px 0; }
}

/* Compact hero — used while a search is active (search-only band, no headline)
   so typing produces an immediate, visible result set. */
.hero--compact { padding: 16px 24px; margin: 4px 0 14px; }
@media (min-width: 900px) { .hero--compact { padding: 18px 28px; } }

/* Matching-dish results (discovery search) */
.dish-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 22px; }
@media (max-width: 900px) { .dish-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dish-grid { grid-template-columns: 1fr; } }
.dish-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--neutral-200); border-radius: 14px; padding: 10px 12px;
  box-shadow: var(--shadow-1); transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease); }
.dish-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--brand-100); }
.dish-card .dish-thumb { width: 56px; height: 56px; border-radius: 12px; font-size: 20px; flex: none; }
.dish-body { flex: 1; min-width: 0; }
.dish-name { font-weight: 600; font-size: 15px; color: var(--ink); }
.dish-rest { color: var(--ink-3); font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* R2-11b — a dish price reads as value before it reads as a number. NEVER
   --success-500, which is --veg #1E9E5A itself (§8 rule 7): a price sits
   inches from the veg mark on every row. --success-600 is the darker step,
   the same separation --rating already relies on. */
.dish-price { font-weight: 700; font-size: 13px; margin-top: 3px; color: var(--success-600); }
.dish-cta { flex: none; font-weight: 700; font-size: 13px; color: var(--brand-600); }

/* Add-to-cart confirmation — the ADD button flips to a filled "Added ✓ (n)"
   state right where the user clicked (visibility of system status). */
body.cust .btn-add.added { background: var(--success-600); color: #fff; border-color: var(--success-600); }
body.cust .btn-add.added span { color: #fff; }

/* Sticky cart bar: bump on update so the count change is noticed. */
@keyframes cartBump { 0%,100% { transform: translateX(-50%) scale(1); } 30% { transform: translateX(-50%) scale(1.06); } }
.cart-bar.bump { animation: cartBump .3s var(--ease); }

/* Near-action toast (paired with the button state + bar bump) */
.cart-toast { position: fixed; left: 50%; bottom: 84px; z-index: 70;
  transform: translateX(-50%) translateY(8px); max-width: min(560px, calc(100% - 32px));
  background: var(--ink); color: var(--surface); font-weight: 600; font-size: 14px;
  padding: 11px 18px; border-radius: 12px; box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); }
.cart-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cart-toast.is-error { background: var(--error-600); color: #fff; }

/* ══ Dark mode — warm-black storefront (brand-system §6), scoped to body.cust.
   Operator surfaces are untouched (they are not body.cust). ═══════════════════ */
@media (prefers-color-scheme: dark) {
  body.cust {
    --surface: #1E1B18; --surface-2: #262220;
    --ink: #F3F1EE; --ink-2: #CFCBC4; --ink-3: #A8A29A;
    --brand-50: #3A1712; --brand-100: #5A2A20;
    --coral-50: #33170F; --rating: #2BAF6A;
    --neutral-50: #141210; --neutral-100: #262220; --neutral-200: #3E3A34;
    --neutral-300: #4E4842; --neutral-400: #8A847B; --neutral-500: #A29C92;
    --neutral-600: #BDB8B0; --neutral-700: #D4CFC8; --neutral-800: #E8E4DE; --neutral-900: #F3F1EE;
    background: #141210; color: var(--ink);
  }
  /* Surfaces that use literal --white → lift to the dark card colour */
  body.cust .card, body.cust .topbar, body.cust .cust-footer, body.cust .hero-search,
  body.cust .btn-outline, body.cust .qty-stepper button, body.cust .chip,
  body.cust .chip-select, body.cust .cat-nav, body.cust .rest-card { background: var(--surface); }
  body.cust input, body.cust select, body.cust textarea { background: var(--surface-2); }
  /* Menu "ADD" button — white pill in light, dark surface + lifted green in dark */
  body.cust .btn-add { background: var(--surface); color: #3CC47C; border-color: #3CC47C; }
  body.cust .btn-add span { color: #3CC47C; }
  body.cust .btn-add:hover { background: var(--success-600); color: #fff; }
  body.cust .btn-add:hover span { color: #fff; }
  /* Brand colour reads as *text* here — lift off deep red to a legible ember */
  body.cust .topbar .brand, body.cust .cust-footer .brand, body.cust .breadcrumbs a,
  body.cust .cart-line-remove, body.cust .link-ghost, body.cust .order-row-cta,
  body.cust .addr-add summary, body.cust .login-mark, body.cust .cust-nav a.active,
  body.cust .chip.on, body.cust .sec-step, body.cust .tip-pill input:checked + span { color: #FF9C86; }
  body.cust .error-text { color: #F97066; }
  /* Trust surfaces (teal) — dark tints per §6 */
  body.cust .otp-card { background: #0E2926; border-color: #0A4A45; color: #D2F2EE; }
  body.cust .otp-card .code { color: #6FCFC5; }
  body.cust .eta-chip { background: #0E2926; color: #6FCFC5; }
  body.cust .hint { background: #0E2926; color: #9BE0D8; }
  body.cust .rating-pill { color: #0A2818; }
}

/* ══ Restaurant Phase 3 — history, service hours, insights ══════════════════
   docs/restaurant-surfaces-plan.md Phase 3 (G6/G7/G8/G9). Tokens only, no new
   colours enter the system here (D9). Operator surfaces, so no body.cust
   dark-mode variants — same rule the Phase 1 board additions follow. */

/* Two-column key/value rows. The existing .kv styles .k/.v spans; owner pages
   use a plain label/value pair, so give bare children a row of their own. */
.kv { list-style: none; padding: 0; margin: 8px 0 0; }
.kv li { display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid var(--neutral-100); font-size: 14px; }
.kv li > span:first-child { color: var(--neutral-600); }
.kv li > span:last-child { font-weight: 600; text-align: right; }

/* ── Service hours editor (G7) ───────────────────────────────────────── */
.hours-grid { display: grid; gap: 10px; margin: 14px 0 18px; }
.hours-day { border: 1px solid var(--neutral-200); border-radius: 10px; padding: 12px 14px; }
.hours-day-today { border-color: var(--coral-300); background: var(--coral-50); }
.hours-day-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.hours-day-head strong { font-size: 14px; }
.hours-window { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.hours-window input[type="time"] { font: inherit; font-size: 14px; padding: 6px 10px;
  border: 1px solid var(--neutral-300); border-radius: 8px; background: var(--white); }

/* ── Insights chart (G9) ─────────────────────────────────────────────────
   CSS bar heights, not a charting library: a counter machine in a kitchen may
   have no internet, and this surface already synthesises its alarm rather than
   shipping an audio file for exactly the same reason. */
.chart { display: flex; align-items: flex-end; gap: 4px; height: 180px;
  padding: 12px 0 0; margin: 6px 0 4px; overflow-x: auto; }
.chart-col { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%; gap: 6px; }
.chart-bar { width: 100%; max-width: 44px; border-radius: 6px 6px 2px 2px;
  background: var(--coral-400); min-height: 2px; transition: height .2s var(--ease); }
.chart-col:hover .chart-bar { background: var(--coral-600); }
.chart-label { font-size: 11px; color: var(--neutral-500); font-variant-numeric: tabular-nums;
  white-space: nowrap; }

@media (max-width: 700px) {
  .chart { height: 140px; }
  .hours-window { gap: 6px; }
}
/* The count is what the eye actually scans for; in "New requests (3)" the
   parenthesis is the first thing it drops.
   ✱ v1.10 — PROMOTED out of `body.owner` scope. It contains no art direction
   (a flex box, a hairline, tabular numerals) and §2.9 law 4 needs the identical
   thing on the console's tab row. Copying it would have been the second of the
   two definitions this file already regrets elsewhere. */
.lane-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--neutral-200);
  color: var(--neutral-700); font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── Skip link ─────────────────────────────────────────────────────────
   The owner nav is eight links and it is sticky, so every keyboard and screen-
   reader visit to any page started by tabbing past all eight. Off-screen until
   focused, then a real, visible, high-contrast control — a skip link that
   cannot be seen when it has focus is the commonest way to ship one that does
   not work. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--coral-700); color: var(--white);
  padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 700;
  text-decoration: none; transition: top .12s var(--ease);
}
.skip-link:focus-visible { top: 0; }
/* The heading focus ring on `#owner-main` would otherwise draw a box round the
   whole page when the skip link lands on it. */
main[tabindex="-1"]:focus { outline: none; }

/* ── Empty states ──────────────────────────────────────────────────────
   A list that loaded and is empty must never look like a list that failed to
   load. These say which one it is and, where there is one, offer the action
   that fills them — an empty menu used to be a sentence pointing at a form
   that had scrolled off the top of the page.

   ✱ v1.10 — PROMOTED and RENAMED to `.empty-state`. This is §2.9 law 7 word for
   word, and the console needs it on every one of its lists. `body.owner
   .menu-empty` is kept as an alias below rather than migrated: the owner blades
   and the owner tests both name it, and a rename that has to be right in three
   places at once is a rename that breaks one of them. */
.empty-state {
  background: var(--white); border: 1px dashed var(--neutral-300);
  border-radius: 16px; padding: 28px 24px; text-align: center;
  max-width: 56ch; margin: 18px auto;
}
.empty-state h2 { margin: 0 0 6px; font-size: 17px; }
.empty-state p { margin: 0; color: var(--neutral-600); font-size: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   THE OPERATOR CONSOLE LAYER LIVES IN ITS OWN FILE — `acatro-ops.css` (C2)
   ═════════════════════════════════════════════════════════════════════════

   1,085 lines of `body.admin` rules stood here from A0 (brand-system §2.9 v1.10)
   until `docs/admin-console-redesign.md` C2 moved them out. `/admin` no longer
   loads this stylesheet at all.

   Two reasons, and the first is measurable. The console's page title was sized by
   `.page-head h1 { font-size: 24px }` — an unscoped CUSTOMER-WEB rule, still
   below — so §2.9 did not control its own page title, and five of the twelve font
   sizes on that surface were outside the seven-step ramp §2.9 law 8 declares. A
   surface cannot hold a ramp it does not own.

   The second is this file's own safety. 185 rules here are `.cust`/`body.owner`,
   and no gate renders a page: editing a shared 2,691-line stylesheet to restyle
   the console could break the storefront silently. Two files cannot do that to
   each other.

   ⚠ NOTHING `body.admin` MAY BE ADDED HERE AGAIN. `scripts/brand/check_css.py`
   fails on a `body.admin` rule in this file, and on a `font-size` in
   `acatro-ops.css` that is not one of §2.9's seven steps.

   The console's dark mode was removed from this spot by D167 and is restored in
   `acatro-ops.css` by D204 — as a token swap on `body.admin` and NEVER as
   `filter: invert()`, which would turn the `--status-*` greens magenta. The
   customer storefront's own dark mode (§6, `body.cust`) is below and untouched by
   any of it.
   ────────────────────────────────────────────────────────────────────────── */

/* The board's own heading. It exists for the document outline and the skip
   link, not to take a line of a screen whose whole point is the lanes below
   it — so it is set at the size of a section title rather than a page one. */

/* ── Small owner components that were inline styles until Phase 5 ────── */
/* Each of these existed as a `style="…"` attribute on one element, which is
   how two pages end up disagreeing about what a bill row looks like. */
/* ✱ v1.10 — PROMOTED out of `body.owner`. The console's order-detail page had
   this exact rule as an inline `style="color: var(--coral-700)"`, which is
   §2.9 law 2's one named violation: it painted *navigation* in the colour this
   system reserves for the thing you should do. */
.back-link {
  color: var(--coral-700); text-decoration: none; font-weight: 600;
}
.back-link:hover { text-decoration: underline; }
/* ✱ v1.10 — PROMOTED out of `body.owner`. The console had this same idea as a
   `style="width: 210px"` on seven different `<th>` elements at four different
   widths, which is how two tables end up disagreeing about how wide a decision
   is. */
th.col-actions { width: 260px; }

/* ── Legal pages (P3): Terms, Privacy, and the deletion request ─────────
   Prose, not product. One narrow column, generous line height, and a table
   that survives a phone — the privacy policy's "what we collect" grid is the
   part people actually read, and it is three columns wide. */
.legal {
  max-width: 760px; margin: 0 auto; padding: 8px 0 48px;
  color: var(--neutral-800); line-height: 1.65;
}
.legal h1 { margin: 0 0 4px; font-size: 30px; line-height: 1.2; }
.legal h2 {
  margin: 32px 0 8px; font-size: 20px; line-height: 1.3;
  padding-top: 16px; border-top: 1px solid var(--neutral-200);
}
.legal h3 { margin: 24px 0 6px; font-size: 16px; }
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--brand-600); }
.legal .page-sub { margin-bottom: 20px; color: var(--neutral-600); }
.legal .flash-error { margin-bottom: 20px; }
.legal .login-form { max-width: 420px; }
.legal .legal-foot {
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--neutral-200);
  color: var(--neutral-600); font-size: 14px;
}

/* Wraps rather than scrolls: a policy row cut off at the right edge of a
   phone is a policy clause nobody has read. */
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.legal-table th, .legal-table td {
  padding: 10px 12px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--neutral-200);
}
.legal-table th { background: var(--neutral-50); font-weight: 700; }
.legal-table td:first-child { width: 34%; }

@media (max-width: 600px) {
  .legal h1 { font-size: 24px; }
  /* Below this the three columns are ~90px each and unreadable, so each row
     becomes its own stacked block with the header text carried in. */
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td { display: block; width: auto; }
  .legal-table tr { padding: 10px 0; border-bottom: 1px solid var(--neutral-200); }
  .legal-table td { border: 0; padding: 2px 0; }
  .legal-table td:first-child { width: auto; }
}

/* Legal links in the site footer — present on every page, deliberately quiet. */
.cust-footer-legal { margin-top: 6px; }
.cust-footer-legal a { color: inherit; text-decoration: underline; }