/* The app's one stylesheet: the tokens, the three shells (Operator, staff,
   storefront), and every component more than one screen uses.

   Row 7.7 (card #53): a component lives HERE, once. A screen's own stylesheet
   holds only what is unique to that screen, and never redefines a component
   this file owns — tests/unit/checks/css.php fails when one does, and when a
   font-size, spacing or radius is a literal rather than a token.
   docs/OPERATOR-LOOK.md is the spec. */

:root {
  /* Colour. */
  --bg: #f6f7f9; --surface: #ffffff; --ink: #1d232b; --muted: #5b6573; --line: #d9dee5;
  --brand: #1f5f8b; --brand-ink: #ffffff; --accent: #e8f1f8; --field: #ffffff;
  --ok-bg: #e7f5ec; --ok-ink: #1c5e33; --error-bg: #fcebea; --error-ink: #8a1f17;
  --info-bg: #eef3fb; --info-ink: #1f4a7a; --viewing-bg: #f39c12; --viewing-ink: #1d1300;

  /* Type. Five sizes, and no others: every font-size in public/assets/*.css is one of these. */
  --text-xs: .8125rem;   /* 13px: table meta, status pills, counts */
  --text-s: .875rem;     /* 14px: hints, sub-menu items, table cells */
  --text-m: 1rem;        /* body, fields, buttons */
  --text-l: 1.25rem;     /* card and section headings (h2) */
  --text-xl: 1.625rem;   /* screen title (h1), tile counts */
  --weight-strong: 600;  /* h1, h2, current menu item, primary button */
  --weight-label: 500;   /* labels, table headings, top menu items */

  /* Spacing. Every margin, gap and padding is one of these. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;

  /* Shape and control height. */
  --radius: 8px;            /* cards */
  --radius-control: 6px;    /* inputs, buttons, tabs */
  --radius-pill: 999px;     /* status pills and count badges */
  --control-h: 44px;        /* buttons, inputs, selects: the tap minimum */
  --control-h-s: 36px;      /* button.small, table row actions (desktop only) */

  /* The Operator's frame (row 7.6), copied from wp-admin. dark-ok: the frame is
     the SAME in light and dark, as wp-admin's is — Operators have used these
     colours for years and should find them after the switch. The screens inside
     the frame keep the tokens above and follow the device. */
  --bar-h: 40px;                        /* wp-admin's is 32px; 40 keeps its buttons tappable */
  --nav-w: 160px;                       /* wp-admin's sidebar width */
  --nav-bg: #1d2327;                    /* #adminmenuback and #wpadminbar */
  --nav-ink: #f0f0f1;
  --nav-icon: rgba(240, 246, 252, .6);
  --nav-hover-ink: #72aee6;
  --nav-open-bg: #2c3338;
  --nav-sub-ink: rgba(240, 246, 252, .7);
  --nav-current-bg: #2271b1;
  --nav-current-ink: #ffffff;
  --nav-arrow: var(--bg);               /* the 8px triangle, in the screen's own colour, so it points into it */

  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12161b; --surface: #1b2129; --ink: #e6eaef; --muted: #a2acb8; --line: #2e3742;
    --brand: #4d9ad0; --brand-ink: #0c1117; --accent: #1f2d3a; --field: #121820;
    --ok-bg: #173323; --ok-ink: #a6e0bb; --error-bg: #3a1714; --error-ink: #f3b1aa;
    --info-bg: #182638; --info-ink: #b5d0f0;
  }
}

/* ---- base ---------------------------------------------------------------- */

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--text-m)/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--brand); }
h1 { font-size: var(--text-xl); font-weight: var(--weight-strong); margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-l); font-weight: var(--weight-strong); margin: 0 0 var(--space-3); }
h3 { font-size: var(--text-m); font-weight: var(--weight-strong); margin: 0 0 var(--space-2); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-2); top: var(--space-2); background: var(--surface); padding: var(--space-2); z-index: 10; }
.muted, .hint { color: var(--muted); }
.hint { margin: var(--space-1) 0 0; font-size: var(--text-s); }
.small { font-size: var(--text-xs); }
.crumbs { margin: 0 0 var(--space-1); font-size: var(--text-s); }
.lead { max-width: 760px; }
.pre, .prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- shells ------------------------------------------------------------- */

/* The staff shell's bar keeps the brand colour; the Operator's is wp-admin's (below). */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--brand); color: var(--brand-ink); }
.topbar a, .topbar .button-link { color: var(--brand-ink); }
.topbar .store-name { font-weight: var(--weight-strong); text-decoration: none; margin-right: auto; }
.topbar .who { font-size: var(--text-s); }
.topbar .button-quiet { border: 1px solid currentColor; background: transparent; color: var(--brand-ink); }
.site-header { padding: var(--space-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .store-name { font-weight: var(--weight-strong); font-size: var(--text-l); text-decoration: none; color: var(--ink); }

/* minmax(0, 1fr), not 1fr: a 1fr track will not shrink below its content, which is what
   made the whole page scroll sideways at 835 px (docs/OPERATOR-LOOK.md, Overview 2). */
.frame { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); }
main { padding: var(--space-5) var(--space-6); max-width: 1100px; width: 100%; min-width: 0; }
.shell-storefront main, main.narrow { margin: 0 auto; max-width: 720px; }

/* ---- the Operator's frame (row 7.6): wp-admin's, in both modes ---------- */

.shell-operator .topbar, .shell-staff .topbar {
  flex-wrap: nowrap; gap: var(--space-3); padding: 0 var(--space-3); min-height: var(--bar-h);
  background: var(--nav-bg); color: var(--nav-ink); font-size: var(--text-s);
}
.shell-operator .topbar a, .shell-staff .topbar a,
.shell-operator .topbar .button-link, .shell-staff .topbar .button-link { color: var(--nav-ink); }
.shell-operator .topbar a:hover, .shell-staff .topbar a:hover,
.shell-operator .topbar a:focus-visible, .shell-staff .topbar a:focus-visible,
.shell-operator .topbar .button-link:hover, .shell-staff .topbar .button-link:hover { color: var(--nav-hover-ink); }
/* The bar is dark in BOTH modes, so a control on it takes the bar's own ink, never --brand-ink,
   which is near-black in dark mode and would leave the Test Mode pill unreadable. */
.shell-operator .topbar .button-quiet, .shell-staff .topbar .button-quiet { border-color: var(--nav-ink); color: var(--nav-ink); min-height: var(--control-h-s); font-size: var(--text-xs); }
.shell-operator .topbar .button-quiet:hover, .shell-staff .topbar .button-quiet:hover { border-color: var(--nav-hover-ink); color: var(--nav-hover-ink); }
/* A long store name gets an ellipsis rather than pushing the account button off the bar. */
/* Visit site, in both admin bars: the way out to the storefront from any screen
   (Cameron, 2026-09-30). The globe is decoration; the words are the name a voice
   command says, so they stay in the HTML and only hide below 480px. */
.topbar .visit-site { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none;
  min-height: var(--control-h-s); padding-inline: var(--space-2); border-radius: var(--radius-control); }
.shell-operator .topbar .visit-site, .shell-staff .topbar .visit-site { color: var(--nav-ink); font-size: var(--text-xs); }
.shell-operator .topbar .visit-site:hover, .shell-staff .topbar .visit-site:hover { color: var(--nav-hover-ink); text-decoration: underline; }
@media (max-width: 480px) {
  .topbar .visit-site-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

.shell-operator .topbar .store-name, .shell-staff .topbar .store-name { margin-right: auto; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu-button { display: none; align-items: center; gap: var(--space-2); background: transparent; color: var(--nav-ink);
  border: 0; min-height: var(--control-h); min-width: var(--control-h); padding: 0 var(--space-2); font-size: var(--text-s); }
.menu-button:hover, .menu-button:focus-visible { color: var(--nav-hover-ink); }

.account-menu { position: relative; }
.account-menu > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; list-style: none;
  min-height: var(--control-h); padding: 0 var(--space-2); white-space: nowrap; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu > summary:focus-visible { color: var(--nav-hover-ink); }
.account-panel { position: absolute; right: 0; top: 100%; z-index: 20; display: flex; flex-direction: column; align-items: flex-start;
  gap: var(--space-2); min-width: 11rem; padding: var(--space-3); background: var(--nav-open-bg); color: var(--nav-ink);
  border-radius: 0 0 var(--radius-control) var(--radius-control); box-shadow: 0 4px 16px rgb(0 0 0 / .3); }
.account-panel a, .account-panel .button-link { color: var(--nav-ink); text-decoration: none; min-height: var(--control-h); display: inline-flex; align-items: center; }
.account-panel a:hover, .account-panel .button-link:hover { color: var(--nav-hover-ink); text-decoration: underline; }

.app-menu { background: var(--nav-bg); color: var(--nav-ink); padding: var(--space-2) 0 var(--space-6);
  position: sticky; top: 0; align-self: start; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
.app-menu ul { list-style: none; margin: 0; padding: 0; }
.app-menu .menu-row { display: flex; align-items: stretch; }
.app-menu a { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--nav-ink); }
.app-menu a[data-level="top"] { flex: 1; min-width: 0; min-height: 34px; padding: 0 0 0 var(--space-2); font-size: var(--text-s); font-weight: var(--weight-label); }
.app-menu .menu-icon { flex: none; color: var(--nav-icon); }
.app-menu .menu-words { min-width: 0; overflow-wrap: normal; word-break: keep-all; }
.app-menu a:hover, .app-menu a:focus-visible, .app-menu .menu-toggle:hover, .app-menu .menu-toggle:focus-visible { color: var(--nav-hover-ink); }
.app-menu a:hover .menu-icon, .app-menu a:focus-visible .menu-icon { color: var(--nav-hover-ink); }

/* The chevron is its own button, so Enter on the label navigates and Enter here opens the group. */
.app-menu .menu-toggle { flex: none; width: 28px; min-height: 34px; padding: 0; background: transparent; border: 0;
  color: var(--nav-icon); border-radius: 0; }
.app-menu .menu-toggle svg { transition: transform 150ms ease-out; }
@media (prefers-reduced-motion: reduce) { .app-menu .menu-toggle svg { transition: none; } }
.app-menu li.is-open > .menu-row > .menu-toggle svg { transform: rotate(90deg); }

/* Only the open group's items show. Every <a> stays in the HTML: tests/parity/lib/menu.py reads it. */
.app-menu .menu-sub { display: none; background: var(--nav-open-bg); }
.app-menu li.is-open > .menu-sub { display: block; }
.app-menu a[data-level="sub"] { min-height: 30px; padding: 0 var(--space-3) 0 var(--space-5); font-size: var(--text-s); color: var(--nav-sub-ink); }

/* The current group's top item, with the arrow that points into the screen, as wp-admin's does. */
/* The group a screen is in, or — where a menu has no groups, as the staff menu has none — the item itself. */
.app-menu li.is-open > .menu-row, .app-menu li.is-current > .menu-row { position: relative; background: var(--nav-current-bg); }
.app-menu li.is-open > .menu-row > a[data-level="top"], .app-menu li.is-current > .menu-row > a[data-level="top"] { color: var(--nav-current-ink); font-weight: var(--weight-strong); }
.app-menu li.is-open > .menu-row > a[data-level="top"] .menu-icon, .app-menu li.is-current > .menu-row > a[data-level="top"] .menu-icon { color: var(--nav-current-ink); }
.app-menu li.is-open > .menu-row > .menu-toggle { color: var(--nav-current-ink); }
.app-menu li.is-open > .menu-row::after, .app-menu li.is-current > .menu-row::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  border: 8px solid transparent; border-right-color: var(--nav-arrow); }
.app-menu a[aria-current="page"] { color: var(--nav-current-ink); font-weight: var(--weight-strong); }
.app-menu .menu-sub a[aria-current="page"] { background: rgb(0 0 0 / .18); }

.viewing-bar { display: flex; align-items: center; gap: var(--space-2) var(--space-3); min-height: var(--bar-h);
  padding: 0 var(--space-3); background: var(--viewing-bg); color: var(--viewing-ink); font-size: var(--text-s); }
.viewing-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.viewing-words { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewing-bar form { margin-left: auto; }
.viewing-bar button { background: var(--viewing-ink); color: #fff; } /* dark-ok: the viewing bar is one colour in both modes */

/* 768–1023 px: wp-admin's folded menu — a rail of icons, each group a flyout. */
@media (min-width: 768px) and (max-width: 1023px) {
  .frame { grid-template-columns: 36px minmax(0, 1fr); }
  main { padding: var(--space-5) var(--space-4); }
  .app-menu { overflow: visible; }
  .app-menu > .menu-top > li { position: relative; }
  .app-menu .menu-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .app-menu a[data-level="top"] { justify-content: center; padding: 0; min-height: 36px; }
  .app-menu .menu-toggle { display: none; }
  .app-menu .menu-sub { display: block; position: absolute; left: 100%; top: 0; z-index: 30; width: 160px;
    box-shadow: 0 4px 16px rgb(0 0 0 / .12); visibility: hidden; opacity: 0; transition: opacity 100ms linear; }
  @media (prefers-reduced-motion: reduce) { .app-menu .menu-sub { transition: none; } }
  .app-menu > .menu-top > li:hover > .menu-sub,
  .app-menu > .menu-top > li:focus-within > .menu-sub { visibility: visible; opacity: 1; }
  .app-menu li.is-open > .menu-row::after { display: none; }
}

/* Below 768 px: no sidebar. The Menu button opens it as a sheet, and the screen starts under the bar. */
@media (max-width: 767px) {
  :root { --bar-h: 48px; }
  .frame { grid-template-columns: minmax(0, 1fr); }
  .shell-operator .topbar, .shell-staff .topbar { position: sticky; top: 0; z-index: 40; }
  .menu-button { display: inline-flex; }
  .shell-operator .topbar .store-name, .shell-staff .topbar .store-name { max-width: 45vw; }
  .account-menu .account-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .app-menu { display: none; position: fixed; left: 0; right: 0; top: var(--bar-h); z-index: 35;
    max-height: calc(100dvh - var(--bar-h)); overflow-y: auto; box-shadow: 0 8px 24px rgb(0 0 0 / .35); }
  .app-menu.is-shown { display: block; animation: fmb-menu-in 180ms ease-out; }
  @media (prefers-reduced-motion: reduce) { .app-menu.is-shown { animation: none; } }
  .app-menu a[data-level="top"], .app-menu .menu-toggle { min-height: var(--control-h); }
  .app-menu a[data-level="sub"] { min-height: var(--control-h); }
  .app-menu li.is-open > .menu-row::after { display: none; }
  .viewing-words .viewing-meta { display: none; }
}
@keyframes fmb-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---- title row --------------------------------------------------------- */

/* h1 and the screen's one primary action on a line, as WordPress's "Products [Add new product]". */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.page-head h1 { margin: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* ---- cards and settings rows ------------------------------------------- */

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); margin-bottom: var(--space-5); min-width: 0; }
.card.narrow { max-width: 440px; margin: var(--space-5) auto; }
.card-inset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
/* An informational card: Shop Organization's note, and a screen not built yet. */
.notice-card { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-ink); }

/* A settings field: label beside the field from 900px, as WordPress's form-table.
   The hint goes UNDER the field, never on a negative margin. */
.settings-row { display: grid; gap: var(--space-1); margin: 0 0 var(--space-4); }
.settings-row > label, .settings-row > .settings-label { margin: 0; font-weight: var(--weight-label); }
.settings-row .hint { margin-top: var(--space-1); }
@media (min-width: 900px) {
  .settings-row { grid-template-columns: 200px minmax(0, 560px); gap: var(--space-1) var(--space-4); align-items: start; }
  .settings-row > label, .settings-row > .settings-label { grid-column: 1; padding-top: var(--space-3); }
  .settings-row > :not(label):not(.settings-label) { grid-column: 2; }
}

/* ---- forms ------------------------------------------------------------- */

label { font-weight: var(--weight-label); margin-top: var(--space-2); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=date],
input[type=time], input[type=datetime-local], input[type=number], select, textarea {
  font: inherit; font-size: var(--text-m); padding: var(--space-3); border: 1px solid var(--line);
  border-radius: var(--radius-control); background: var(--field); color: var(--ink); width: 100%; min-height: var(--control-h);
}
textarea { min-height: calc(var(--control-h) * 2); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--brand); outline-offset: 2px;
}
.stack { display: flex; flex-direction: column; gap: var(--space-2); max-width: 440px; }
.stack-wide { display: flex; flex-direction: column; gap: var(--space-2); }
.stack button { align-self: flex-start; margin-top: var(--space-2); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.two > div { display: flex; flex-direction: column; gap: var(--space-2); }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2) var(--space-3); align-items: end; }
.field-row > div { display: flex; flex-direction: column; gap: var(--space-1); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3) var(--space-3); min-width: 0; }
legend { font-weight: var(--weight-label); padding: 0 var(--space-1); }
.choices { border: 0; padding: 0; margin: 0 0 var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.choices legend { font-weight: var(--weight-label); margin-bottom: var(--space-1); }

/* One tick and its words: a real 44px target, because it is tapped at a pickup. */
label.check { font-weight: 400; display: flex; align-items: center; gap: var(--space-2); margin: 0; min-height: var(--control-h); }
label.check input { width: 20px; height: 20px; flex: none; }

/* The browser's file control, hidden, with its own label as a quiet button. */
.file-input { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.file-input input[type=file] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.file-input > label { display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer;
  min-height: var(--control-h); padding: 0 var(--space-4); border: 1px solid var(--brand); border-radius: var(--radius-control);
  background: transparent; color: var(--brand); font-weight: var(--weight-label); }
.file-input input[type=file]:focus-visible + label { outline: 3px solid var(--brand); outline-offset: 2px; }
.file-input .file-name { color: var(--muted); font-size: var(--text-s); }

/* ---- buttons ----------------------------------------------------------- */

/* Primary: one per form or title row. Secondary: an outline. Tertiary: underlined text. */
button, .button { font: inherit; font-size: var(--text-m); font-weight: var(--weight-strong); padding: 0 var(--space-4);
  min-height: var(--control-h); border-radius: var(--radius-control); border: 0; background: var(--brand); color: var(--brand-ink);
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.button-quiet { border: 1px solid var(--brand); background: transparent; color: var(--brand); font-weight: var(--weight-label); }
.button-secondary { background: var(--accent); color: var(--brand); border: 1px solid var(--line); font-weight: var(--weight-label); }
.button-link { background: none; border: 0; padding: 0; min-height: 0; font-weight: 400; text-decoration: underline; color: var(--brand); }
.button-danger { background: var(--error-ink); color: var(--surface); }
.button-small, button.button-small { min-height: var(--control-h); padding: 0 var(--space-3); font-size: var(--text-s); }
button[aria-busy="true"] { opacity: .7; }
button:disabled, .button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
form.inline, .inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
form.inline { display: inline-flex; }
.inline-form label { margin: 0; }
.inline-form select, .inline-form input { width: auto; max-width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-2) 0 0; }
.row-actions { white-space: nowrap; }
.row-actions > * { margin-right: var(--space-3); }
.row-actions .button-link { min-height: var(--control-h-s); }

/* ---- status tabs, filters, bulk bar ------------------------------------ */

/* One row of links separated by a dot; a sideways scroller of pills on a phone, never four wrapped lines. */
.status-tabs, .order-views, .coupons-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin: 0 0 var(--space-3); font-size: var(--text-s); }
.status-tabs a, .order-views a, .coupons-views a { color: var(--brand); }
.status-tabs a[aria-current="page"], .order-views a[aria-current="page"], .coupons-views a[aria-current="page"], .pages a[aria-current="page"] {
  font-weight: var(--weight-strong); color: var(--ink); text-decoration: none;
}
.status-tabs .count, .order-views .count { color: var(--muted); }

/* A filter bar is always open on a desktop: its summary only appears on a phone,
   where the bar folds away so the table is the first thing on the screen. The
   markup carries `open`, because CSS cannot open a closed <details>. */
.filters-box { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.filters-box > summary { display: none; }
@media (max-width: 767px) {
  .filters-box > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
    min-height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--line);
    border-radius: var(--radius-control); background: var(--surface); font-weight: var(--weight-label); }
  .filters-box[open] > summary { margin-bottom: var(--space-2); }
  .filters-box > summary .count { color: var(--muted); font-weight: 400; }

  /* Ten status links wrapped to four lines is what this replaces: one row that scrolls sideways. */
  .status-tabs, .order-views, .coupons-views { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    gap: var(--space-2); padding-bottom: var(--space-1); -webkit-overflow-scrolling: touch; }
  .status-tabs > *, .order-views > *, .coupons-views > * { flex: none; scroll-snap-align: start; }
  .status-tabs a, .order-views a, .coupons-views a { display: inline-flex; align-items: center; min-height: var(--control-h-s);
    padding: 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); text-decoration: none; }
  .status-tabs a[aria-current="page"], .order-views a[aria-current="page"], .coupons-views a[aria-current="page"] { background: var(--accent); border-color: var(--brand); }
}

/* Every field fills its cell: no fixed widths, so nothing pushes the page sideways. */
.filters, .order-filters, .coupons-filters, .report-filter, .tc-filter-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3);
  margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.filters > div, .order-filters > div, .coupons-filters > div, .report-filter > p, .tc-filter-grid > div,
.filter-field, .export-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: 0; }
.filters label, .order-filters label, .coupons-filters label, .report-filter label, .tc-filter-grid label,
.filter-field label, .export-field label { margin: 0; font-size: var(--text-s); }
.filters input, .filters select, .order-filters input, .order-filters select, .coupons-filters input, .coupons-filters select,
.report-filter select, .tc-filter-grid input, .tc-filter-grid select { width: 100%; min-width: 0; }
.filter-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; grid-column: 1 / -1; justify-content: flex-end; }

/* Bulk actions on the left, the count and pager on the right, wrapping as one unit. */
.bulk, .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-3); }
.bulk label, .bulk-bar label { margin: 0; }
.bulk select, .bulk-bar select { width: auto; }
.bulk-end { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.pages, .cust-pages { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: center; }
.pages span[aria-current], .cust-pages span[aria-current] { font-weight: var(--weight-strong); }
.filtered-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.filtered-total strong { font-size: var(--text-l); }

/* ---- table ------------------------------------------------------------- */

.table-wrap, .coupons-table, .cust-table-wrap, .table-scroll {
  overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 var(--space-5);
}
table.list, .coupons-table table, table.cust-list { border-collapse: collapse; width: 100%; font-size: var(--text-s); }
table.list th, table.list td, .coupons-table th, .coupons-table td, table.cust-list th, table.cust-list td {
  text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.list thead th, .coupons-table thead th, table.cust-list thead th { background: var(--accent); color: var(--ink); font-weight: var(--weight-label); }
table.list thead th a { color: var(--ink); }
table.list tr:last-child td, .coupons-table tr:last-child td, table.cust-list tr:last-child td, table.cust-list tr:last-child th { border-bottom: 0; }
table.list tbody tr:hover, .coupons-table tbody tr:hover { background: var(--bg); }
table.list .row-title, .coupons-table .row-title, .cust-name { font-weight: var(--weight-label); }
table.list .row-title a, .coupons-table .row-title a { text-decoration: none; }
table.list .row-title a:hover, .coupons-table .row-title a:hover { text-decoration: underline; }
table.list td.name, table.list .row-title { min-width: 12rem; }
table.list input[type=checkbox], .coupons-table input[type=checkbox] { width: 20px; height: 20px; }
table.list td.thumb { width: 64px; }
table.list td.thumb img { object-fit: cover; border-radius: var(--radius-control); background: var(--accent); }
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list select { width: auto; max-width: 16rem; }
tr.retired td, tr.is-paused td { color: var(--muted); }
.empty, .coupons-empty { color: var(--muted); padding: var(--space-3) 0; }

/* Below 640px a row is a card, and each value carries its own heading. */
@media (max-width: 640px) {
  table.list thead { position: absolute; left: -9999px; }
  table.list tr { display: block; border-bottom: 1px solid var(--line); padding: var(--space-2) 0; }
  table.list td { display: block; border: 0; padding: var(--space-1) var(--space-3); }
  table.list td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: var(--text-xs); }
  table.list td[data-label="Actions"]::before { content: none; }
}

/* ---- status pill ------------------------------------------------------- */

.status, .pill, .cust-tag, .coupon-draft, .tag, .log-redirected {
  display: inline-block; padding: 2px var(--space-2); /* token-exempt: 2px 8px is the pill's own, from docs/OPERATOR-LOOK.md's Components table */
  border-radius: var(--radius-pill); font-size: var(--text-xs);
  font-weight: var(--weight-label); background: var(--accent); color: var(--ink); white-space: nowrap;
}
.status-published, .status-went, .pill-paid, .order-status-completed { background: var(--ok-bg); color: var(--ok-ink); }
.status-offline, .status-held, .pill-unpaid, .order-status-ready, .coupon-draft, .log-redirected { background: var(--info-bg); color: var(--info-ink); }
.status-stopped, .status-paused, .cust-tag,
.order-status-refunded, .order-status-cancelled, .order-status-failed, .order-status-trash { background: var(--error-bg); color: var(--error-ink); }
.tag { color: var(--muted); margin-left: var(--space-2); }

/* ---- tiles ------------------------------------------------------------- */

.tiles, .cust-tiles { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-3); }
.tile, .cust-tile { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; position: relative; }
.tile:hover, .tile:focus-visible, .cust-tile:hover, .cust-tile:focus-visible { border-color: var(--brand); background: var(--accent); }
.tile-count, .cust-tile-value { font-size: var(--text-xl); font-weight: var(--weight-strong); line-height: 1.1; color: var(--brand); font-variant-numeric: tabular-nums; }
.tile-count.is-long { font-size: var(--text-l); }
.tile-label, .cust-tile-label { font-weight: var(--weight-label); }
.cust-tile-label, .cust-tile-meta { color: var(--muted); font-size: var(--text-s); }
/* The whole tile is the link, so it needs no separate "View": an arrow says so. */
.tile::after { content: "→"; position: absolute; top: var(--space-3); right: var(--space-3); color: var(--muted); }

/* ---- notices and flashes ---------------------------------------------- */

.flash, .notice, .banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); margin: 0 0 var(--space-4); border-left: 4px solid currentColor; }
.flash { display: flex; align-items: flex-start; gap: var(--space-3); }
.flash-words { flex: 1; min-width: 0; }
.flash-close { background: none; border: 0; color: inherit; min-height: var(--control-h); min-width: var(--control-h); padding: 0; font-size: var(--text-l); }
.flash-ok, .notice-ok, .store-open.is-open { background: var(--ok-bg); color: var(--ok-ink); }
.flash-error, .notice-warning, .store-open.is-closed, .banner { background: var(--error-bg); color: var(--error-ink); }
.flash-info, .notice-info, .banner.info, .cust-notice { background: var(--info-bg); color: var(--info-ink); }
.notice p, .notice ul, .banner p { margin: var(--space-1) 0; }
.banner p:last-child { margin: 0; }
.banner a { color: inherit; font-weight: var(--weight-strong); }
.field-error { color: var(--error-ink); margin: 0; font-size: var(--text-s); }

/* ---- facts list -------------------------------------------------------- */

.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); }
.facts dt { font-weight: var(--weight-label); }
.facts dd { margin: 0; }

@media (max-width: 760px) {
  .two, .field-row { grid-template-columns: 1fr; }
}