/* Ops Console — the redesign's look (PLAN_2026-10-27_ops_redesign_phase1.md §4). Loaded only by
   index.v2.html, after ops.css, so today's console is untouched.

   1. TOKENS — ops.css's own variables, re-pointed at the new merchant admin's values (ink #303030,
      muted #616161, line #e3e3e3, page #f1f1f1, black primary buttons, links #005bd3, Inter only).
      Every page not rebuilt yet inherits the new look through these, without being edited.
   2. SHELL — the dark sidebar is the console's own: staff should never mistake it for the
      merchant's admin, which they may be looking at on the same call.
   3. COMPONENTS — cards, tables, buttons and badges in the merchant admin's shapes.
   Type stays inside the redesign's budget: 11 / 12 / 13 / 14 / 20 / 24 px. */

:root {
  --bg: #f1f1f1; --surface: #ffffff; --surface-2: #f7f7f7;
  --border: #e3e3e3; --border-s: #d4d4d4;
  --ink: #303030; --muted: #616161;
  --primary: #303030; --primary-h: #1a1a1a; --primary-bg: #ebebeb; --primary-ink: #ffffff;
  --primary-text: #005bd3;
  --success: #0c5132; --success-bg: #cdfee1;
  --warn: #5e4200; --warn-solid: #b28400; --warn-bg: #ffd6a4;
  --danger: #c70a24; --danger-bg: #fee9e8; --danger-border: #f5b4b4;
  --radius: 12px; --radius-s: 8px;
  --fs-l: 14px; --fs-2xl: 24px;
  --shadow: 0 0 0 1px rgba(26,26,26,.07), 0 1px 0 1px rgba(26,26,26,.05);
  --shadow-pop: 0 0 0 1px rgba(26,26,26,.08), 0 8px 24px rgba(0,0,0,.16);
  --display: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --side: #1a1a1a; --side-hover: #2a2a2a; --side-on: #3a3a3a; --side-ink: #e3e3e3; --side-muted: #a6a6a6;
  --link: #005bd3; --brand: #ff4a1c;
}
a { color: var(--link); }
:focus-visible { outline-color: var(--link); }
h1, h2, h3, .brand, .crumb, .stat-num, .page-head h1, .empty-state h1 { letter-spacing: -.005em; }

/* ── Shell ─────────────────────────────────────────────────────────── */
/* The sidebar column is dark to the bottom of a long page, not only as far as the sticky sidebar. */
.app { grid-template-columns: 240px 1fr; background: linear-gradient(90deg, var(--side) 240px, var(--bg) 240px); }
.sidebar {
  background: var(--side); color: var(--side-ink); border-right: 0;
  padding: 14px 10px 12px; display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.v2-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 8px 6px; }
.v2-brand-l { display: flex; align-items: center; gap: 8px; }
.v2-brand img { height: 17px; width: auto; display: block; }
.sidebar .brand-suffix { color: #fff; font-family: var(--font); font-size: var(--fs-m); font-weight: 650; letter-spacing: 0; }
.env-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
  background: #2e2e2e; color: #f3f3f3; font-size: var(--fs-xs); line-height: 16px; font-weight: 600; white-space: nowrap;
}
.env-badge i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); display: block; }
.env-badge[data-env="staging"] i { background: #2463d1; }
.env-badge[data-env="development"] i, .env-badge[data-env="dev"] i { background: #b28400; }
.nav-group + .nav-group { margin-top: 10px; }
.nav-group-label {
  color: var(--side-muted); text-transform: none; letter-spacing: 0;
  font-size: var(--fs-s); font-weight: 550; padding: 8px 10px 4px;
}
.nav-item { color: var(--side-ink); font-weight: 550; padding: 7px 10px; border-radius: var(--radius-s); }
.nav-item:hover { background: var(--side-hover); color: #fff; }
.nav-item.active { background: var(--side-on); color: #fff; font-weight: 650; }
.v2-account { margin-top: auto; border-top: 1px solid #2e2e2e; padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.v2-account-link { justify-content: flex-start; gap: 10px; min-width: 0; }
.v2-account .user-badge { color: var(--side-ink); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-avatar { width: 22px; height: 22px; border-radius: 50%; background: #4a4a4a; flex: none; }
/* .sidebar-scoped so it outranks the generic .btn-ghost below (white on white otherwise). */
.sidebar .v2-signout { background: transparent; border-color: #3a3a3a; color: var(--side-ink); box-shadow: none; }
.sidebar .v2-signout:hover { background: var(--side-hover); color: #fff; }

/* Three columns, so the search box sits at the same place on every page whatever the crumb's length (C9). */
.topbar { padding: 10px 24px; gap: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 480px) minmax(0, 1fr); }
.topbar-right { justify-self: end; }
.crumb { font-family: var(--font); font-size: var(--fs-l); font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-find {
  flex: 1 1 260px; max-width: 480px; justify-self: stretch; display: flex; align-items: center; gap: 8px; height: 34px;
  padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-s);
  background: var(--surface-2); color: var(--muted); font: inherit; text-align: left; cursor: text;
}
.v2-find:hover { border-color: var(--border-s); }
.v2-find kbd { margin-left: auto; font: 500 var(--fs-xs)/16px var(--font); padding: 0 5px; border: 1px solid var(--border); border-radius: 4px; background: #fff; color: var(--muted); }
.content { max-width: 1240px; padding: 20px 24px 56px; }

/* ── Components ────────────────────────────────────────────────────── */
.page-head h1 { font-size: var(--fs-xl); font-weight: 650; }
.card { border: 0; box-shadow: var(--shadow); border-radius: var(--radius); padding: 16px; }
.card h2 { font-size: var(--fs-l); font-weight: 650; }
.table-wrap { border: 0; box-shadow: var(--shadow); border-radius: var(--radius); }
table.tbl th { background: var(--surface-2); color: var(--muted); font-size: var(--fs-s); font-weight: 550; text-transform: none; letter-spacing: 0; }
/* Buttons are at least as tall as the 32 px inputs and selects beside them, so a row of controls lines up
   (.btn-sm stays small, for rows of a table). */
.btn { font-weight: 550; border-radius: var(--radius-s); padding: 8px 12px; min-height: 32px; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: inset 0 -1px 0 1px rgba(0,0,0,.8), inset 0 1px 0 1px rgba(255,255,255,.18); }
.btn-primary:hover { background: var(--primary-h); }
/* The outline is the border itself: drawn as an inset ring inside a transparent border, a ghost button read 2 px
   shorter than the primary beside it. */
.btn-ghost { background: #fff; border-color: rgba(0,0,0,.12); border-bottom-color: #b5b5b5; box-shadow: none; }
.btn-ghost:hover { background: #fafafa; }
a.btn { text-decoration: none; }
.badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; border-radius: var(--radius-s); font-weight: 550; font-size: var(--fs-s); line-height: 16px; padding: 2px 8px; letter-spacing: 0; }
/* The merchant admin's tones. ok / danger / warn / caution / info / muted, one meaning each. */
.badge-ok { background: #cdfee1; color: #0c5132; }
.badge-danger { background: #fedad9; color: #8e0b21; }
.badge-warn { background: #ffd6a4; color: #5e4200; }
.badge-caution { background: #ffeb78; color: #4f4700; }
.badge-info { background: #e0f0ff; color: #00527c; }
.badge-muted { background: #e3e3e3; color: #303030; }
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }

/* ── Controls: one height (32 px), one inset ring, one corner, on every page (design review 2026-10-29, C10 S3) ── */
/* The old classes (.filterbar, .searchbar, .select, .form-field, .field) are restated as the v2 control, so a page
   not rebuilt yet lines up with the new ones. Scoped to #content: the sign-in page keeps its own. A select in a
   toolbar reads as the chips beside it (small, strong); a select in a form reads as the fields. */
.v2-bar input[type="search"], #content .filterbar input:not([type="checkbox"]):not([type="radio"]), #content .searchbar input,
#content .form-field input:not([type="checkbox"]):not([type="radio"]), #content .field input:not([type="checkbox"]):not([type="radio"]),
.v2-bar select, select.v2-select, #content .filterbar select, #content select.select, #content .form-field select, #content .field select {
  height: 32px; min-width: 0; border: 0; border-radius: var(--radius-s); background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border-s); font: inherit; font-size: var(--fs-m); font-weight: 450; padding: 0 10px;
}
.v2-bar select, select.v2-select, #content .filterbar select, #content select.select { font-size: var(--fs-s); font-weight: 550; padding-right: 24px; cursor: pointer; }
#content .form-field select, #content .field select { padding-right: 24px; cursor: pointer; }
#content .form-field textarea, #content .field textarea {
  border: 0; border-radius: var(--radius-s); background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-s);
  font: inherit; font-size: var(--fs-m); padding: 8px 10px;
}
.v2-bar input[type="search"]:focus, #content .filterbar input:focus, #content .searchbar input:focus, #content .form-field input:focus,
#content .field input:focus, .v2-bar select:focus, select.v2-select:focus, #content .filterbar select:focus, #content select.select:focus,
#content .form-field select:focus, #content .field select:focus, #content .form-field textarea:focus, #content .field textarea:focus { outline: 2px solid var(--link); outline-offset: 1px; }
/* Ticks and radios in the console's ink, not the browser's blue (Requests did this first). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* ── Older pages inside the new shell: their components in the new look (review 2026-10-29, C3 C7 C8 C16 C23) ── */
/* ops.css styles .st-actions twice, for a state's buttons and for a staff row, and the later rule won both: "Try
   again" sat small at the bottom right, and a staff cell stopped being a cell. A state's actions are centred at full
   size again; a staff cell is a table cell with its buttons on one line. */
.st-empty .st-actions, .st-error .st-actions { justify-content: center; gap: 10px; }
.st-empty .st-actions .btn, .st-error .st-actions .btn { padding: 8px 12px; font-size: var(--fs-m); }
table.tbl td.st-actions { display: table-cell; text-align: right; white-space: nowrap; vertical-align: middle; }
td.st-actions .btn { min-height: 0; }
td.st-actions .btn + .btn { margin-left: 6px; }
/* Labels in sentence case, no stripe, a hairline top: the merchant admin's tiles, not the old console's. */
.kpi-label, .stat-label, .an-tile-label, .section-eyebrow, .dash-eyebrow { text-transform: none; letter-spacing: 0; font-size: var(--fs-s); font-weight: 550; }
.kpi::before { display: none; }
.an-tile { border-top-width: 1px; }
/* A tile's outline is the shadow ring alone (a border as well read heavier than a card). */
.stat, .kpi { border: 0; }
/* A card's heading level with the buttons beside it (.card h2's bottom margin outranked .card-head h2's none). */
.card .card-head h2 { margin: 0; }
/* A notice is the pale note colour, across the whole width of its card. */
.notice-block { background: #fff8db; border-color: transparent; max-width: none; }
/* Times and figures in tables in the console's font, with even digits. */
table.tbl td.mono { font-family: inherit; }

/* ── Lists: views, filters, rows (Stores first; Home and Requests reuse them) ── */
.v2-sub { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-m); }
/* 16 px in from the card's edge, where the table's first cell starts (S24). */
.v2-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.v2-grow { flex: 1 1 240px; min-width: 0; }
/* A bar's search box and selects are the console's control (Controls, above). An empty bar draws nothing (C14). */
.v2-list > .v2-bar:empty { display: none; }
.v2-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; border: 0;
  border-radius: var(--radius-s); background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border);
  font: inherit; font-size: var(--fs-s); line-height: 16px; font-weight: 550; cursor: pointer;
}
.v2-chip:hover { background: var(--surface-2); }
.v2-chip.on { background: #303030; color: #fff; box-shadow: none; }
.v2-chip .n { color: var(--muted); font-weight: 450; }
.v2-chip.on .n { color: #d0d0d0; }
/* The design's cell rules: cells wrap, numbers do not, and the store's name stays pinned when a
   narrow screen scrolls the table sideways. */
.v2-list table.tbl th { padding: 8px 12px; white-space: normal; vertical-align: bottom; line-height: 16px; }
.v2-list table.tbl td { padding: 10px 12px; white-space: normal; vertical-align: top; }
.v2-list table.tbl th:first-child, .v2-list table.tbl td:first-child { padding-left: 16px; position: sticky; left: 0; z-index: 1; background: var(--surface); }
.v2-list table.tbl th:first-child { background: var(--surface-2); }
.v2-list table.tbl tbody tr:hover td:first-child { background: var(--surface-2); }
.v2-list table.tbl th:last-child, .v2-list table.tbl td:last-child { padding-right: 16px; }
.v2-list table.tbl td.num { white-space: nowrap; }
.v2-list .v2-meter-cell { min-width: 120px; }
.v2-meta { color: var(--muted); font-size: var(--fs-s); line-height: 16px; margin-top: 3px; }
.v2-nw { white-space: nowrap; }
a.v2-rl { color: var(--ink); text-decoration: none; font-weight: 600; }
a.v2-rl:hover { text-decoration: underline; }
.v2-meter { height: 8px; margin-top: 4px; border-radius: 999px; background: #ebebeb; overflow: hidden; }
.v2-meter span { display: block; height: 100%; border-radius: 999px; background: #2463d1; }
.v2-meter.warn span { background: var(--warn-solid); }
.v2-meter.bad span { background: var(--danger); }
.v2-meter.free span { background: #bcd0f4; }
.v2-t-warn { color: #5e4200; }
.v2-t-bad { color: #8e0b21; }
.v2-note { color: var(--muted); font-size: var(--fs-s); margin: 10px 0 0; }
.v2-list .pager { padding: 10px 16px; border-top: 1px solid var(--border); }
/* Meta text in a row whose items are centred sits on the row's line, not 3 px under it (S26, C17). */
.v2-inline > .v2-meta, .v2-check > .v2-meta, .v2-rq-store .v2-meta { margin-top: 0; }

/* ── Home: status line, the queue, "Since yesterday" ── */
.v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v2-inline { display: inline-flex; align-items: center; gap: 6px; }
.sd { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; background: #b5b5b5; }
.sd.ok { background: #29845a; }
.sd.warn { background: var(--warn-solid); }
.sd.bad { background: var(--danger); }
.card.v2-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 16px; margin-bottom: 16px; }
.v2-status-parts { gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: var(--fs-s); }
.card.v2-status-bad { box-shadow: inset 0 0 0 1px var(--danger-border), var(--shadow); }
.v2-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.v2-cols > .card { margin-bottom: 0; }
.card.v2-flush { padding: 0; overflow: hidden; }
/* Home's "Needs you" card is flush: its empty, error and loading boxes keep the card's 16 px (C12). */
#hm-body > .st-empty, #hm-body > .st-error, #hm-body > .sk { margin: 0 16px 16px; }
.v2-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2-flush .v2-card-head { padding: 14px 16px 4px; }
.v2-card-head h2 { margin: 0; font-size: var(--fs-l); font-weight: 650; }
.v2-check { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--fs-s); cursor: pointer; }
.v2-bar-flat { border-bottom: 0; padding: 8px 16px 12px; }
/* position: relative so absolutely placed children (the hidden "Do" label) scroll with the table
   instead of escaping the box and widening the page on a phone. */
.v2-tw { position: relative; overflow-x: auto; border-top: 1px solid var(--border); }
table.v2-q { min-width: 560px; }
table.v2-q th { padding: 8px 12px; line-height: 16px; }
table.v2-q td { padding: 10px 12px; white-space: normal; vertical-align: top; }
table.v2-q th:first-child, table.v2-q td:first-child { padding-left: 16px; }
table.v2-q th:last-child, table.v2-q td:last-child { padding-right: 16px; }
table.v2-q tbody tr { cursor: default; }
table.v2-q td.num { white-space: nowrap; }
.v2-what { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-muted { color: var(--muted); }
.v2-what + .v2-muted { margin-top: 3px; }
.v2-note-int { background: #fff8db; border-radius: var(--radius-s); padding: 6px 10px; margin-top: 6px; font-size: var(--fs-s); line-height: 16px; }
table.v2-q td.v2-do, table.v2-q th.v2-do { width: 1%; white-space: nowrap; text-align: right; }
/* The buttons sit on the title's line; "Take it" and "Release" are one width, so "Open" never moves; a name stays on one line (C18). */
table.v2-q td.v2-do { padding-top: 7px; }
.v2-do [data-act="take"], .v2-do [data-act="release"] { min-width: 68px; }
table.v2-q td[data-label="Who has it"] { white-space: nowrap; }
.v2-do .btn + .btn { margin-left: 4px; }
.btn-sm { padding: 4px 10px; font-size: var(--fs-s); line-height: 16px; width: auto; min-height: 0; }
tr.v2-snoozed td { opacity: .6; }
.v2-foot { padding: 10px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-s); line-height: 16px; }
.v2-menu {
  position: fixed; z-index: 90; min-width: 220px; max-height: 60vh; overflow-y: auto; padding: 6px;
  display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-s); box-shadow: var(--shadow-pop);
}
.v2-menu > button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 6px; font: inherit; color: var(--ink); cursor: pointer; }
.v2-menu > button:hover, .v2-menu > button:focus-visible { background: var(--surface-2); }
.v2-menu-h { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; padding: 8px 8px 2px; }
.v2-menu-chips { display: flex; gap: 4px; padding: 2px 6px 6px; }
.v2-menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.v2-menu-note { margin: 0; padding: 4px 8px; color: var(--muted); font-size: var(--fs-s); }
.v2-rows { display: flex; flex-direction: column; margin-top: 6px; }
.v2-rw { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.v2-rw:first-child { border-top: 0; }
.v2-rw:hover .t { text-decoration: underline; }
.v2-rw .g { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.v2-rw .t { font-weight: 600; }
.v2-big { font-size: var(--fs-xl); line-height: 28px; font-weight: 650; min-width: 28px; font-variant-numeric: tabular-nums; }
.v2-note-form { display: flex; flex-direction: column; gap: 10px; }
.v2-note-form textarea { width: 100%; border: 0; border-radius: var(--radius-s); box-shadow: inset 0 0 0 1px var(--border-s); padding: 8px 10px; font: inherit; resize: vertical; }
.v2-acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* The store page: its health badge sits beside the name, as in the design, and is a plain link. */
a.badge { text-decoration: none; }
#sd-status { margin-right: auto; }
/* The store page's Health tab: the merchant's score, then its checks. */
.v2-flush .v2-score-head { padding: 16px; align-items: flex-start; }
.v2-score { gap: 12px; }
.v2-of { color: var(--muted); font-size: var(--fs-l); font-weight: 450; }
.v2-block { display: block; }
.v2-strong { font-weight: 600; }
@media (max-width: 1100px) { .v2-cols { grid-template-columns: minmax(0, 1fr); } }
/* A phone reads each item top to bottom: what, then waiting and owner on one line, then the buttons. */
@media (max-width: 720px) {
  table.v2-q { min-width: 0; }
  table.v2-q thead { display: none; }
  table.v2-q tbody, table.v2-q tbody tr, table.v2-q tbody tr td, table.v2-q tbody tr td.v2-do { display: block; width: auto; text-align: left; }
  table.v2-q tbody tr { padding: 10px 16px; border-bottom: 1px solid var(--border); }
  table.v2-q tbody tr td, table.v2-q tbody tr td:first-child, table.v2-q tbody tr td:last-child { padding: 2px 0; border-bottom: 0; }
  table.v2-q tbody tr td[data-label] { display: inline-block; margin-right: 14px; color: var(--muted); font-size: var(--fs-s); }
  table.v2-q tbody tr td[data-label]::before { content: attr(data-label) ": "; }
  table.v2-q tbody tr td.v2-do { padding-top: 8px; }
}

/* ── Small screens: the sidebar is a drawer again (ops.css's rule, restated after the sticky one) ── */
@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; background: var(--bg); }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 248px; height: auto; z-index: 80; }
  .v2-find span { display: none; }
  .v2-find { flex: 0 1 auto; }
  .topbar { display: flex; }
  .content { padding: 16px; }
}

/* ── The store page (Phase 2): its header, the setup list, the conversation reader ── */
.v2-store-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v2-store-title { display: grid; gap: 6px; min-width: 0; }
.v2-store-badges { gap: 10px; flex-wrap: wrap; }
.v2-steps { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.v2-turn { display: grid; gap: 4px; padding: 12px 16px; border-top: 1px solid var(--border); }
.v2-turn:first-child { border-top: 0; }
.v2-turn-details { background: var(--surface-2); border-radius: var(--radius-s); padding: 8px 10px; margin-top: 4px; }
.v2-turn-details .kv { grid-template-columns: 140px 1fr; }

/* ── The store page's Analytics tab (Phase 2): the merchant's six pages in the console's pieces ── */
/* Its tables sit in cards of every width, two and three to a row: words wrap instead of holding the 640px
   minimum of a full-width list, numbers stay on one line, and a row is not a link. */
.v2-an table.tbl { min-width: 0; }
.v2-an table.tbl th { white-space: normal; vertical-align: bottom; }
.v2-an table.tbl td { white-space: normal; vertical-align: top; overflow-wrap: break-word; }
.v2-an table.tbl td.num { white-space: nowrap; }
.v2-an table.tbl tbody tr { cursor: default; }
.v2-an .an-grid > .card { margin-bottom: 0; }
/* A heading and its "Sort by" share a line where there is room; on a phone the menu drops below and narrows. */
.v2-an .v2-card-head { flex-wrap: wrap; }
.v2-an .filterbar select { max-width: 100%; }
/* "How sales are counted": before refunds − refunded = after refunds, on one line where there is room. */
.v2-an-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-an-eq > .stat { flex: 1 1 160px; }
.v2-an-op { color: var(--muted); font-size: var(--fs-xl); }

/* ── The store page's Assistant tab (Phase 2, D6): the merchant's pages, a page list beside the page ── */
.v2-as { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.v2-as > .card { margin-bottom: 0; }
.v2-as-side { display: flex; flex-direction: column; gap: 12px; padding: 8px; position: sticky; top: 16px; }
.v2-as-nav { display: flex; flex-direction: column; gap: 2px; }
.v2-as-nav a { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.v2-as-nav a:hover { background: var(--surface-2); }
.v2-as-nav a[aria-current="page"] { background: #ebebeb; }
.v2-as-nav .t { font-weight: 600; }
.v2-as-nav .v2-meta { margin-top: 0; }
.v2-as-pad { margin: 0; padding: 0 10px; }
.v2-as-pv { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 6px; }
.v2-as-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* The page's title is a page title, not another section heading (A10). */
.v2-as-main > .v2-card-head h2 { margin: 0; font-size: var(--fs-xl); line-height: 28px; }
/* Paragraphs, notices and the notes take the page's own gaps, not the browser's margins (A2, A5, A13). */
.v2-as-main > p, #as-disc > p { margin: 0; }
.v2-as-main .notice-block { max-width: none; margin: 0; }
.v2-as-notes { display: flex; flex-direction: column; gap: 6px; }
.v2-as-notes:empty { display: none; }
.v2-as-notes .v2-note-int { margin-top: 0; }
.v2-as-form { display: flex; flex-direction: column; gap: 16px; }
.v2-as-sec { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border); }
.v2-as-form > .v2-as-sec:first-child { padding-top: 0; border-top: 0; }
.v2-as-sec h3 { margin: 0; font-size: var(--fs-m); font-weight: 650; }
.v2-as-sec p { margin: 0; }
.v2-as-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.v2-as-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-as-stack { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v2-as-tight { gap: 8px; }
.v2-as-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-as-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2-as-f > label, .v2-as-lab { font-size: var(--fs-s); font-weight: 550; color: var(--ink); }
.v2-as-hint { color: var(--muted); font-size: var(--fs-s); line-height: 16px; }
.v2-as-err { color: var(--danger); font-size: var(--fs-s); line-height: 16px; font-weight: 550; }
.v2-as-in {
  width: 100%; min-height: 32px; border: 0; border-radius: var(--radius-s); background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border-s); font: inherit; font-size: var(--fs-m); padding: 6px 10px;
}
textarea.v2-as-in { resize: vertical; }
.v2-as-in:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.v2-as-in:disabled { background: var(--surface-2); color: var(--muted); }
.v2-as-bad .v2-as-in { box-shadow: inset 0 0 0 1px var(--danger); }
.v2-as-unit { display: flex; align-items: center; gap: 8px; }
/* A number, a short text and a colour are as wide as what they hold (A9). */
.v2-as-unit .v2-as-in { width: 96px; flex: none; }
.v2-as-in.v2-as-short { max-width: 240px; }
.v2-as-colour .v2-as-in { max-width: 160px; }
.v2-as-unit > span { color: var(--muted); font-size: var(--fs-s); }
.v2-as-colour { display: flex; align-items: center; gap: 8px; }
.v2-as-sw { width: 24px; height: 24px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.v2-as-sw-none { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #ebebeb 4px, #ebebeb 8px); }
.v2-as-switch, .v2-as-radios label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.v2-as-switch input, .v2-as-radios input { margin: 2px 0 0; flex: none; }
.v2-as-switch .g, .v2-as-radios .g { display: flex; flex-direction: column; gap: 2px; }
/* A switch's title is strong; a choice in a list reads as plain words under its group's label (A11). */
.v2-as-switch .t { font-weight: 550; }
.v2-as-radios .t { font-weight: 450; }
/* A control that cannot change says so: no pointer, muted words (A12). */
.v2-as-switch:has(input:disabled), .v2-as-radios label:has(input:disabled) { cursor: default; }
.v2-as-switch:has(input:disabled) .t, .v2-as-radios label:has(input:disabled) .t { color: var(--muted); }
.v2-as-radios { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v2-as-radios legend { padding: 0; margin-bottom: 6px; font-size: var(--fs-s); font-weight: 550; }
/* auto-fit: a row of tiles fills its width instead of leaving an empty column at the right (A3). */
.v2-as-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.v2-as-tiles-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.v2-as-tiles-s { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); }
.v2-as-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 0; border-radius: var(--radius-s);
  background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-s); font: inherit; text-align: left; cursor: pointer;
}
.v2-as-tile:hover:not(:disabled) { background: var(--surface-2); }
.v2-as-tile[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--ink); }
.v2-as-tile:disabled { cursor: default; color: var(--muted); }
.v2-as-tile .t { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; }
.v2-as-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.v2-as-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 10px; border-radius: 999px; background: #ebebeb; font-size: var(--fs-s); line-height: 20px; }
.v2-as-chip button { border: 0; background: none; color: var(--muted); padding: 0 6px; margin-right: -6px; border-radius: 999px; font: inherit; cursor: pointer; }
.v2-as-chip button:hover { background: #d4d4d4; color: var(--ink); }
.v2-as-chip-bad { background: var(--warn-bg); color: var(--warn); }
/* The add field is as wide as the field above it, and its button as tall as the field (A7). */
.v2-as-add { display: flex; align-items: center; gap: 8px; }
.v2-as-add .btn { align-self: stretch; }
.v2-as-cat { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: var(--radius-s); box-shadow: inset 0 0 0 1px var(--border); }
.v2-as-cat-lang { grid-template-columns: minmax(0, 1fr) auto; }
.v2-as-cat-img { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.v2-as-wide { grid-column: 1 / -1; margin: 0; }
.v2-as-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.v2-as-img { font-size: var(--fs-s); overflow-wrap: anywhere; }
.v2-as-lang { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 12px; border-radius: var(--radius-s); background: var(--surface-2); }
.v2-as-lang .g { display: flex; flex-direction: column; gap: 2px; flex: 1 1 280px; }
.v2-as-lang .v2-as-f { flex: 0 1 240px; }
.v2-as-tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-m); }
.v2-as-tbl th, .v2-as-tbl td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.v2-as-tbl th { background: var(--surface-2); color: var(--muted); font-size: var(--fs-s); font-weight: 550; }
.v2-as-disc { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: var(--radius-s); background: var(--surface-2); }
/* Discounts: its parts in the page's 16 px rhythm (A2). */
#as-disc { display: flex; flex-direction: column; gap: 16px; }
/* The host is only as tall as the bar, so a sticky bar inside it never moved. Without a box of its own, the bar
   sticks to the bottom of the page's card while there are unsaved changes, and the note stays in place (A1). */
.v2-as-barhost { display: contents; }
.v2-as-barhost:empty { display: none; }
.v2-as-barhost .v2-note { margin: 0; }
.v2-as-barhost .notice-block { margin: 0; max-width: none; }
.v2-as-barhost .notice-block p { margin: 0 0 10px; }
.v2-as-bar {
  position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 12px; border-radius: var(--radius); background: var(--ink); color: #fff; box-shadow: var(--shadow-pop);
}
.v2-as-bar .btn.v2-as-discard { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #5a5a5a; }
.v2-as-bar .btn.v2-as-discard:hover { background: #3a3a3a; }
.v2-as-bar .btn.v2-as-go { background: #fff; color: var(--ink); box-shadow: none; }
.v2-as-bar .btn.v2-as-go:hover { background: #f1f1f1; }
.v2-as-legacy > .card:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .v2-as { grid-template-columns: minmax(0, 1fr); }
  .v2-as-side { position: static; }
  .v2-as-grid, .v2-as-grid3, .v2-as-cat, .v2-as-cat-lang { grid-template-columns: minmax(0, 1fr); }
}

/* ── Names to review (Phase 3): the list beside the name picked, which decides it and asks first ── */
.v2-nm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.v2-nm-cols > .card, .v2-nm-cols > .table-wrap { margin-bottom: 0; }
.v2-nm-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.v2-nm-side h2 { margin: 0; overflow-wrap: anywhere; }
.v2-nm-side p { margin: 0; }
.v2-nm-shop { margin-left: auto; max-width: 240px; }
.v2-pick { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer; overflow-wrap: break-word; }
/* A name and how stores write it keep room for a whole word (C1): `anywhere` let the column shrink to one letter. */
.v2-list table.tbl td.v2-nm-name { min-width: 128px; }
.v2-list table.tbl td.v2-nm-seen { min-width: 140px; }
/* Until the list is read its bar has nothing to show, and a failed read leaves the list the whole width (C4). */
#nm-bar:has(> select:empty) { display: none; }
.v2-nm-cols:has(#nm-rows .st-error) { grid-template-columns: minmax(0, 1fr); }
.v2-nm-cols:has(#nm-rows .st-error) > .v2-nm-side { display: none; }
.v2-pick:hover { text-decoration: underline; }
.v2-list table.tbl tr.v2-sel td { background: #f2f7fe; }
.v2-sw { width: 14px; height: 14px; border-radius: 50%; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.v2-sw-l { width: 24px; height: 24px; }
.v2-nm-sec { display: flex; flex-direction: column; gap: 4px; }
.v2-nm-sec > .v2-meta { margin-top: 0; }
.v2-nm-list { display: flex; flex-direction: column; gap: 4px; }
.v2-nm-li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.v2-nm-li > :first-child { min-width: 0; overflow-wrap: anywhere; }
.v2-nm-li .v2-meta { margin-top: 0; white-space: nowrap; }
.v2-nm-swatch { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
.v2-nm-form { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.v2-nm-means { padding-left: 22px; }
/* The design's choices read as plain words; the one chosen is strong. */
.v2-nm-form .v2-as-radios .t { font-weight: 450; }
.v2-nm-form .v2-as-radios input:checked + .g .t { font-weight: 600; }
.v2-nm-acts { justify-content: flex-end; }
.v2-ask { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius); background: #fff1e3; }
.v2-ask p { margin: 0; }
@media (max-width: 1100px) {
  .v2-nm-cols { grid-template-columns: minmax(0, 1fr); }
  .v2-nm-side { position: static; }
}
/* Data health by store (Phase 3, D7): its title in the list's own bar; the reason wraps, in the app's words. */
.v2-nm-capped { margin: 0 2px 12px; color: #5e4200; }
.v2-dh-head h2 { margin: 0; font-size: var(--fs-l); font-weight: 650; }
.v2-dh-head .v2-meta { margin-top: 0; margin-left: auto; }
.v2-list table.tbl td.v2-dh-why { min-width: 220px; max-width: 340px; }
.v2-meter.ok span { background: #29845a; }
.badge-dark { background: #303030; color: #fff; }
/* ── Requests (Phase 3): the list and the request on one screen ── */
/* The design's split: the list on the left, the open request on the right; one column on a narrow screen. */
.v2-rq { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(0, 1.6fr); gap: 16px; align-items: start; }
.v2-rq > .card { margin-bottom: 0; min-width: 0; }
.v2-rq-bulk { background: #f2f7fe; }
/* The views bar is empty until the list is read: no strip above a skeleton or an error. */
.v2-rq-list > .v2-bar:empty { display: none; }
.v2-rq-shop { justify-content: space-between; }
.v2-rq-rows { display: flex; flex-direction: column; }
.v2-rq-rows > .st-empty, .v2-rq-rows > .st-error, .v2-rq-rows > .sk { margin: 16px; }
.v2-rq-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); cursor: pointer; }
.v2-rq-row:first-child { border-top: 0; }
.v2-rq-row:hover { background: var(--surface-2); }
.v2-rq-row.on { background: #f2f7fe; }
.v2-rq-row input[type="checkbox"] { margin: 3px 0 0; flex: none; accent-color: var(--ink); }
.v2-rq-open { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.v2-rq-open .t { font-weight: 600; overflow-wrap: anywhere; }
.v2-rq-open:hover .t { text-decoration: underline; }
.v2-rq-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.v2-rq-foot { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.v2-rq-list .pager { margin-top: 0; padding: 10px 16px; border-top: 1px solid var(--border); }
.v2-rq-detail { display: flex; flex-direction: column; gap: 16px; }
.v2-rq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.v2-rq-title { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 280px; }
.v2-rq-title h2 { margin: 0; font-size: var(--fs-xl); line-height: 28px; font-weight: 650; overflow-wrap: anywhere; }
.v2-rq-title .v2-rq-badges { margin-top: 0; }
.v2-rq-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; }
.v2-rq-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: var(--fs-s); font-weight: 550; }
.v2-rq-in {
  width: 100%; min-height: 32px; border: 0; border-radius: var(--radius-s); background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border-s); font: inherit; font-size: var(--fs-m); font-weight: 450; padding: 6px 10px;
}
.v2-rq-in:focus { outline: 2px solid var(--link); outline-offset: 1px; }
textarea.v2-rq-in { resize: vertical; line-height: 20px; }
.v2-rq-kv { grid-template-columns: 120px 1fr; }
.v2-rq-store {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 14px; border-radius: var(--radius-s);
  box-shadow: inset 0 0 0 1px var(--border); color: inherit; text-decoration: none;
}
.v2-rq-store:hover { background: var(--surface-2); }
.v2-rq-store-name, .v2-rq-store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; flex: 1 1 100%; min-width: 0; }
.v2-rq-go { margin-left: auto; color: var(--link); font-weight: 550; }
.v2-rq-thread { display: flex; flex-direction: column; gap: 14px; }
.v2-rq-msg { display: flex; align-items: flex-start; gap: 10px; }
.v2-rq-msg .g { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2-rq-thread .v2-meta { margin-top: 0; }
.v2-rq-thread .v2-meta strong { color: var(--ink); }
.v2-rq-av {
  width: 28px; height: 28px; flex: none; border-radius: 50%; background: #e3e3e3; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 650;
}
.v2-rq-av.us { background: var(--ink); color: #fff; }
.v2-rq-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.v2-note-int.v2-rq-note { margin-top: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; font-size: var(--fs-m); line-height: 20px; }
.v2-rq-reply { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.v2-seg { display: inline-flex; align-self: flex-start; gap: 2px; padding: 2px; border-radius: var(--radius-s); background: #ebebeb; }
.v2-seg button {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--fs-s); font-weight: 550;
  padding: 4px 12px; border-radius: var(--radius-s); cursor: pointer;
}
.v2-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.v2-rq-send { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.v2-rq-send .v2-meta { margin-top: 0; flex: 1 1 240px; }
.v2-rq-ro { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-s); }
@media (max-width: 1100px) { .v2-rq { grid-template-columns: minmax(0, 1fr); } }

/* ── Page fixes from the design review of 2026-10-29 (console-wide) ── */
/* Audit log: two filters, Filter and CSV fit beside the title instead of pushing the page sideways (C2). */
#au-filter { max-width: none; flex: 0 1 auto; }
#au-filter input { flex: 0 1 180px; width: 180px; min-width: 0; }
/* Profile: "Disable 2FA" on the line of the code it takes (C11). */
#pf-2fa-off { align-items: flex-end; }
/* Stores: health and plan facts keep room for "8 of 9 checks pass" and "trial · ends 31 Oct" (C13). */
.v2-list table.tbl td.v2-st-fact { min-width: 130px; }
/* Its four filters are one width, the widest choice's ("Needs attention, under 60") (C26). */
#st-filters select { flex: 0 0 208px; width: 208px; }

/* ── The store page: the design review of 2026-10-29 ── */
/* A card's heading keeps 12 px above what it heads, and a subtitle stays 4 px under it (S4). */
#st-panel .card > .v2-card-head { margin-bottom: 12px; }
#st-panel .card > .v2-card-head + p.v2-meta { margin-top: -8px; }
#st-panel .card.v2-flush > .v2-card-head, #st-panel .v2-as-main > .v2-card-head { margin-bottom: 0; }
/* A heading outside a card starts at the cards' edge (S16). */
.v2-ov-head { padding: 0 0 12px; }
/* Overview: two columns of stacked cards; the right one is wide enough for a store's details and a note (S1, S2). */
.v2-cols { margin-bottom: 16px; }
.v2-ov-cols { grid-template-columns: minmax(0, 1fr) 360px; }
.v2-ov-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v2-ov-col > .card { margin-bottom: 0; }
.v2-ov-cols .kv { grid-template-columns: 96px minmax(0, 1fr); }
#ov-notes .v2-rw { flex-direction: column; align-items: stretch; gap: 8px; }
@media (max-width: 1100px) { .v2-ov-cols { grid-template-columns: minmax(0, 1fr); } }
/* A form's fields in one row: no inset, one control height, the tick on the controls' line (S5). */
.v2-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.v2-form-row .v2-check { height: 32px; }
/* Settings: the brands as the console's chips, the input as tall as its Add (S6); buttons clear of the table (S23). */
.v2-st-brands { margin: 8px 0; }
.v2-as-add.v2-st-brand-add { max-width: 420px; }
.v2-acts-after { margin-top: 12px; }
/* Tiles: as many columns as tiles, up to the row; six as two rows of three; one keeps a tile's width (S9). */
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); }
.stat-grid.v2-stat-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid.v2-stat-one { grid-template-columns: minmax(184px, 280px); }
@media (max-width: 720px) { .stat-grid.v2-stat-3 { grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); } }
/* Analytics: a heading with a select and one without are one height (S7); short lists start at the top of their
   row (S7); the funnel's counts take one width, so its bars end together (S12); a cause's badge on its own line (S13). */
.v2-an .v2-card-head { min-height: 32px; }
.v2-an .an-grid.v2-an-start { align-items: start; }
.v2-an-n { min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.v2-an-kind { margin-top: 4px; }
/* Plan: "By purpose" and "By model" share their columns, 16 px apart (S15). */
.v2-pl-tbl table.tbl { table-layout: fixed; }
.v2-pl-tbl table.tbl th.num { width: 120px; }
.v2-pl-tbl + .v2-pl-tbl { margin-top: 16px; }
/* ── Subscriptions and AI cost (Phase 4, the Fleet group's money pages: views/subscriptions.js, aiCost.js) ── */
/* The header's controls on one line at one height: the period, the tick, the export. */
.v2-mo-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v2-mo-acts .btn { height: 32px; padding: 0 12px; }
.v2-mo-select {
  height: 32px; border: 0; border-radius: var(--radius-s); background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--border-s); font: inherit; font-size: var(--fs-s); font-weight: 550; padding: 0 28px 0 10px;
}
.v2-mo-select:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.v2-mo-acts .v2-seg button { min-height: 28px; }
.v2-mo-acts .v2-check { height: 32px; padding: 0 2px; }
/* One 16px rhythm between the blocks, as between cards; tiles in a row share its height. */
.v2-mo .stat-grid.v2-mo-kpis { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.v2-mo-slot { margin-bottom: 16px; }
.v2-mo-slot:empty { display: none; }
.v2-mo-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); }
.v2-mo-banner.crit { background: var(--danger-bg); }
.v2-mo-banner.warn { background: #fff1e3; }
.v2-mo-banner .g { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-mo-banner .t { font-weight: 600; }
.v2-mo-quiet { margin: 0; color: var(--muted); font-size: var(--fs-s); line-height: 16px; }
/* Home's two columns: the figures on the left, the lists on the right. */
.v2-mo-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v2-mo-col > .card, .v2-mo-g2 > .card { margin-bottom: 0; }
.v2-mo .v2-card-head { flex-wrap: wrap; }
.v2-mo .v2-card-head .v2-meta { margin-top: 0; }
.v2-mo-cb { margin-top: 12px; }
.v2-mo .v2-flush .v2-tw { margin-top: 10px; }
.v2-mo-g2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
/* Tables in cards: numbers right-aligned on one line, words wrap, and a row is not a link. */
.v2-mo table.tbl { min-width: 560px; }
.v2-mo-g2 table.tbl { min-width: 0; }
.v2-mo table.tbl th { padding: 8px 12px; line-height: 16px; white-space: normal; vertical-align: bottom; }
.v2-mo table.tbl td { padding: 10px 12px; white-space: normal; vertical-align: top; }
.v2-mo table.tbl td.num, .v2-mo table.tbl th.num { white-space: nowrap; }
.v2-mo table.tbl th:first-child, .v2-mo table.tbl td:first-child { padding-left: 16px; }
.v2-mo table.tbl th:last-child, .v2-mo table.tbl td:last-child { padding-right: 16px; }
.v2-mo table.tbl tbody tr { cursor: default; }
/* Label · bar · value rows (From install to paying, By purpose). */
.v2-mo-hbs { display: grid; grid-template-columns: minmax(110px, 1.2fr) minmax(0, 2fr) auto; gap: 10px 12px; align-items: center; margin-top: 12px; }
.v2-mo-hb { display: contents; }
.v2-mo-hb .v2-meter { margin-top: 0; }
.v2-mo-hb-v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.v2-mo-drop { margin: 12px 0 0; }
.v2-mo .v2-rw > .badge { flex: none; }
.v2-mo-none .v2-muted { font-size: var(--fs-s); }
/* The charts: the last MRR named at its end; cost per day against the dashed daily budget. */
.v2-mo-chart .v2-mo-end { fill: var(--ink); font-size: var(--fs-s); font-weight: 600; font-family: var(--font); }
.v2-mo-chart .v2-mo-bar { fill: #2463d1; }
.v2-mo-chart .v2-mo-bar.over { fill: var(--danger); }
.v2-mo-chart .v2-mo-budget { fill: none; stroke: var(--warn-solid); stroke-width: 1.5; stroke-dasharray: 5 4; }
.v2-mo-chart .v2-mo-budget-l { fill: var(--warn); font-size: var(--fs-xs); font-family: var(--font); }
/* AI cost: the budget beside "Cost per day" (Admins change it there), a margin's tone. */
.v2-mo-head-r { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2-mo-note { margin: 8px 0 0; }
.v2-mo-budget-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin-top: 12px; }
.v2-mo-budget-form .v2-mo-note { margin: 0; }
.v2-mo-t-ok { color: #0c5132; }
.v2-mo-pre { font-size: var(--fs-m); font-weight: 550; color: var(--muted); letter-spacing: 0; }
@media (max-width: 720px) {
  .v2-mo-hbs { grid-template-columns: minmax(96px, 1fr) minmax(0, 1fr) auto; }
}
/* ── Analytics across every store (Phase 4): the store tab's look (.v2-an), every store at once ── */
/* Every row of figures fills its width, so a figure and its change sit on one line and the labels under them line up;
   the six cards three to a row, two rows of one height (two to a row on a narrow screen, one on a phone). Figures
   line up digit for digit. */
.v2-fa .stat-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.v2-fa .v2-fa-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-fa .stat-num { font-variant-numeric: tabular-nums; }
.v2-fa .v2-fa-tools { gap: 16px; flex-wrap: wrap; }
.v2-fa .v2-fa-line { margin: -6px 2px 14px; }
.v2-fa .v2-fa-line:empty { display: none; }
.v2-fa .v2-card-head .v2-meta { margin-top: 0; }
.v2-fa .v2-card-head .v2-inline { gap: 12px; }
/* A search shoppers typed can be one long word (or code): it wraps instead of widening the card. */
.v2-fa .v2-fa-wrap { overflow-wrap: anywhere; }
@media (max-width: 1100px) { .v2-fa .v2-fa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .v2-fa .v2-fa-kpis { grid-template-columns: minmax(0, 1fr); } }
/* ── Answer health (Phase 4): the figures, errors by hour with the releases, the four breakdowns ── */
/* The design's header: the title block and the controls share a top line, controls 32px tall, and wrap together. */
.page-head.v2-ah-head { align-items: flex-start; gap: 12px 16px; margin-bottom: 16px; }
.v2-ah-head .v2-inline { gap: 8px; }
.v2-ah-head h1 { line-height: 28px; }
.v2-ah-head .v2-sub { margin-top: 4px; max-width: 68ch; }
.badge.v2-ah-new { background: #ece3ff; color: #5700d1; }
.v2-ah-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.v2-ah-acts .v2-seg { align-self: center; }
.v2-ah-acts .v2-seg button { min-height: 28px; }
.v2-ah-acts .filterbar select { min-height: 32px; padding: 5px 10px; min-width: 160px; }
/* The alert: the design's red banner, in Home's words, its button at the right edge. */
.card.v2-status.v2-ah-alert { align-items: center; background: var(--danger-bg); box-shadow: none; }
.v2-ah-alert-g { flex: 1 1 320px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* Six figures as equal cards: one row at desktop width, then three, then two, never a row with one left over. */
.v2-ah .stat-grid.v2-ah-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.v2-ah .v2-ah-cards .stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 0; }
.v2-ah .v2-ah-cards .stat-label { margin: 0; color: var(--muted); font-size: var(--fs-m); font-weight: 450; line-height: 20px; text-transform: none; letter-spacing: 0; }
.v2-ah .v2-ah-cards .stat-num { font-size: var(--fs-xl); line-height: 28px; font-weight: 650; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.v2-ah .v2-ah-cards .stat-sub { margin-top: 0; font-size: var(--fs-s); line-height: 16px; }
@media (max-width: 1320px) { .v2-ah .stat-grid.v2-ah-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .v2-ah .stat-grid.v2-ah-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The chart, and its legend in short line swatches as the design draws them. */
.v2-ah-chart { margin-top: 12px; }
.v2-ah-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; color: var(--muted); font-size: var(--fs-s); line-height: 16px; }
.v2-ah-legend span { display: inline-flex; align-items: center; gap: 6px; }
.v2-ah-legend i { display: block; width: 14px; height: 2px; }
.v2-ah-legend i.v2-ah-dash { background: repeating-linear-gradient(90deg, #c70a24 0 4px, transparent 4px 7px); }
/* The breakdowns run edge to edge: a table's first and last columns line up with its heading's 16px. */
.v2-ah .v2-flush .v2-card-head { padding: 14px 16px 10px; }
.v2-ah-body { padding: 2px 16px 16px; }
.v2-ah-pad { margin: 0; padding: 2px 16px 16px; }
.v2-ah table.tbl th, .v2-ah table.tbl td { padding: 8px 12px; }
.v2-ah table.tbl th:first-child, .v2-ah table.tbl td:first-child { padding-left: 16px; }
.v2-ah table.tbl th:last-child, .v2-ah table.tbl td:last-child { padding-right: 16px; }
.v2-ah tr.v2-ah-total td { font-weight: 600; }
/* What answers ended with: label | bar | share, every bar starting on one line, shares right-aligned. */
.v2-ah-bars { display: flex; flex-direction: column; gap: 10px; }
.v2-ah-hb { display: grid; grid-template-columns: minmax(150px, 1.5fr) 2fr minmax(48px, auto); gap: 10px 12px; align-items: center; }
.v2-ah-hb .v2-meter { margin-top: 0; }
.v2-ah-hb .num { text-align: right; font-variant-numeric: tabular-nums; }
/* ── Audit log (Phase 5, views/auditLog.js): the log in sentences, before → after folded under a row ── */
/* The board's columns: When and Who keep their width, the sentence takes the rest; a phone scrolls the table in its box. */
.v2-au table.tbl { min-width: 720px; }
.v2-au th.v2-au-when { width: 130px; }
.v2-au th.v2-au-who { width: 160px; }
.v2-au th.v2-au-store { width: 170px; }
.v2-au #au-filters select { flex: 0 0 auto; max-width: 240px; }
.v2-au table.tbl tbody tr { cursor: default; }
/* A person's letter in a circle, yours dark; System has no letter. */
.v2-au-av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: #e3e3e3; color: #303030; font-size: var(--fs-xs); font-weight: 650; line-height: 1; }
.v2-au-av.me { background: #4a4a4a; color: #fff; }
.v2-au-av.sys { background: #ebebeb; box-shadow: inset 0 0 0 1px var(--border-s); }
a.v2-au-link { color: inherit; text-decoration: none; }
a.v2-au-link:hover { text-decoration: underline; }
/* "2 fields": the board's outlined badge, a button that folds the fields open under the row. */
button.badge.v2-au-fields { border: 0; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-s); font-family: inherit; cursor: pointer; margin-left: 2px; }
button.badge.v2-au-fields:hover { background: var(--surface-2); }
button.badge.v2-au-fields[aria-expanded="true"] { background: #303030; color: #fff; box-shadow: none; }
/* The row folded open and its fields share one pale blue, the pinned first cell too. */
.v2-au table.tbl tbody tr.sel td, .v2-au table.tbl tbody tr.sel:hover td { background: #f2f7fe; }
.v2-au tr.sel .v2-au-text { font-weight: 600; }
.v2-au tr.v2-au-detail td { padding-top: 0; }
.v2-au-ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.v2-au-side { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--radius-s); background: #fff;
  box-shadow: inset 0 0 0 1px var(--border); overflow-wrap: anywhere; }
.v2-au-side .v2-meta { margin-top: 0; }
/* The pager sits on the table's last line, as Requests' does (the shared .pager keeps a 14 px gap above it). */
.v2-au .pager { margin-top: 0; }
.v2-au .pager-range { flex: 1 1 auto; min-width: 0; }
/* ── Staff and My account (Phase 5): views/staffPage.js, views/account.js, and the account block at the foot of the sidebar ── */
/* The account block: the person's initial in its circle, their name over "Admin · My account". */
.v2-avatar { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: var(--fs-s); font-weight: 650; line-height: 1; }
.v2-account-who { display: flex; flex-direction: column; min-width: 0; line-height: 16px; }
.v2-account-name { color: #fff; font-size: var(--fs-m); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-account-name:empty { display: none; }
/* Staff: a person is their initial, their name (and "You"), and the email or the invite under it. */
.v2-sf-note:empty { display: none; }
.v2-sf-done { display: flex; flex-direction: column; gap: 8px; }
.v2-sf-done p { margin: 0; }
.v2-sf-invite { display: flex; flex-direction: column; gap: 8px; }
.v2-sf-invite .v2-card-head h2, .v2-sf-invite p { margin: 0; }
.v2-sf-rule { padding: 14px 16px; }
.v2-sf-rule-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.v2-sf-rule-row .v2-check { color: var(--ink); font-size: var(--fs-m); font-weight: 550; }
#sf-rule-ask:empty { display: none; }
#sf-rule-ask { margin-top: 12px; }
.v2-sf-g { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-sf-g > .v2-meta { margin-top: 0; }
.v2-sf-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.v2-sf-av { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #ebebeb; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-s); font-weight: 650; }
.badge.v2-sf-you { background: var(--ink); color: #fff; }
.v2-sf-people table.tbl td { vertical-align: middle; }
.v2-sf-people table.tbl td:first-child { min-width: 240px; }
/* table.tbl's own cell rule (ops.css) would put the buttons on the left: they sit at the row's right edge, as in the design. */
table.tbl td.v2-sf-do { white-space: nowrap; text-align: right; }
.v2-sf-do .btn + .btn { margin-left: 4px; }
.v2-sf-people table.tbl tr.v2-sf-ask-row td { background: var(--surface); padding-top: 0; }
.v2-sf-ask-acts { margin-top: 8px; }
.v2-sf-field { max-width: 360px; margin-top: 8px; }
.v2-sf-setnow { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.08); }
.v2-sf-roles .v2-card-head { padding: 14px 16px 12px; }
.v2-sf-roles table.tbl { min-width: 560px; }
.v2-sf-roles table.tbl th:first-child, .v2-sf-roles table.tbl td:first-child { padding-left: 16px; width: 44%; }
.v2-sf-roles table.tbl td { white-space: normal; }
/* My account: cards in one column, the board's width; forms one control high. */
.v2-my { max-width: 960px; }
.v2-my .card > .v2-card-head { margin-bottom: 12px; }
.v2-my .card.v2-flush > .v2-card-head { margin-bottom: 0; padding: 14px 16px 12px; }
.v2-my .v2-card-head h2 { margin: 0; }
.v2-my-kv { grid-template-columns: 160px minmax(0, 1fr); }
.v2-my-line { display: inline-flex; align-items: center; gap: 10px; }
.v2-my-form { display: flex; flex-direction: column; gap: 12px; }
.v2-my-form p { margin: 0; }
.v2-my-kv .v2-my-form { margin-top: 8px; max-width: 520px; }
.v2-my-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.v2-my-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.v2-my-sub { display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; }
.v2-my-sub p { margin: 0; }
.v2-as-in.v2-my-otp { width: 120px; font-variant-numeric: tabular-nums; }
.v2-my-codes-box { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius); background: #fff8db; }
.v2-my-codes-box p { margin: 0; }
.v2-my-codes { display: grid; grid-template-columns: repeat(4, minmax(0, max-content)); gap: 6px 24px; margin: 4px 0; padding: 0 0 0 20px; }
.v2-my-codes code, .v2-my-key { font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-l); letter-spacing: .04em; overflow-wrap: anywhere; }
.v2-my-enroll { margin: 4px 0 12px; }
.v2-my-tw table.tbl th:first-child, .v2-my-tw table.tbl td:first-child { padding-left: 16px; }
.v2-my-tw table.tbl th:last-child, .v2-my-tw table.tbl td:last-child { padding-right: 16px; }
@media (max-width: 720px) {
  .v2-my-fields { grid-template-columns: minmax(0, 1fr); }
  .v2-my-codes { grid-template-columns: repeat(2, minmax(0, max-content)); }
  .v2-my-kv { grid-template-columns: minmax(0, 1fr); }
}
/* ── System (Phase 5): Status, Releases & switches, Event log (views/system.js; boards System.html, Switches.html) ── */
.page-head.v2-sy-head { align-items: flex-start; gap: 12px 16px; margin-bottom: 12px; }
.v2-sy-head h1 { line-height: 28px; }
.v2-sy-head .v2-sub { margin-top: 4px; max-width: 68ch; }
.v2-sy-acts { display: flex; align-items: center; gap: 8px; }
.v2-sy-acts .btn[hidden] { display: none; }
#sy-tabs { margin-bottom: 16px; }
#sy-tabs .tab { display: inline-flex; align-items: center; gap: 6px; }
/* "New", as Answer health's. */
.badge.v2-sy-new { background: #ece3ff; color: #5700d1; }
.v2-sy > .card, .v2-sy > .v2-mo-banner { margin-bottom: 16px; }
.v2-sy .v2-card-head { flex-wrap: wrap; }
.v2-sy .v2-card-head .v2-meta { margin-top: 0; }
.v2-sy .v2-tw { margin-top: 10px; }
/* Tables in cards: 16 px in from the card's edge, words wrap, a row is not a link. */
.v2-sy table.v2-sy-tbl { min-width: 640px; }
.v2-sy table.v2-sy-tbl th { padding: 8px 12px; line-height: 16px; white-space: normal; vertical-align: bottom; }
.v2-sy table.v2-sy-tbl td { padding: 10px 12px; white-space: normal; vertical-align: top; overflow-wrap: anywhere; }
.v2-sy table.v2-sy-tbl th:first-child, .v2-sy table.v2-sy-tbl td:first-child { padding-left: 16px; }
.v2-sy table.v2-sy-tbl th:last-child, .v2-sy table.v2-sy-tbl td:last-child { padding-right: 16px; }
.v2-sy table.v2-sy-tbl tbody tr { cursor: default; }
.v2-sy table.v2-sy-tbl td.v2-nw { white-space: nowrap; overflow-wrap: normal; }
.v2-sy table.v2-sy-svc td:first-child { width: 22%; }
.v2-sy table.v2-sy-svc td:nth-child(2) { width: 16%; }
.v2-sy table.v2-sy-jobs td:first-child { width: 30%; }
.v2-sy table.v2-sy-rel td:nth-child(3) { width: 50%; }
.v2-sy table.v2-sy-sw td:first-child { width: 24%; }
.v2-sy table.v2-sy-sw td:nth-child(2) { width: 34%; }
.v2-sy-note { margin: 8px 16px 0; padding: 8px 12px; border-radius: var(--radius-s); background: #fff8db; color: var(--ink); font-size: var(--fs-s); line-height: 16px; }
.v2-sy-pad { padding: 4px 16px 16px; }
/* Console set-up: a tick, a name, the settings it is made of; never a value. */
.v2-sy-setup { display: flex; flex-direction: column; padding: 4px 16px 6px; }
.v2-sy-set { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.v2-sy-set:first-child { border-top: 0; }
.v2-sy-set .g { display: flex; flex-direction: column; min-width: 0; }
.v2-sy-ck { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1; }
.v2-sy-ck.ok { background: #cdfee1; color: #0c5132; }
.v2-sy-ck.warn { background: #ffd6a4; color: #5e4200; }
.v2-sy-ck.muted { background: #ebebeb; color: var(--muted); }
code.v2-sy-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-s); color: var(--ink); background: none; padding: 0; overflow-wrap: anywhere; }
/* Releases & switches: the read-only note, the search and filters, a row where web and worker differ. */
.v2-mo-banner.v2-sy-info { background: #eaf4ff; }
.v2-sy-bar { border-bottom: 0; padding: 10px 16px 0; }
.v2-sy-bar input[type="search"] { flex: 1 1 260px; }
.v2-sy-chips { flex-wrap: wrap; gap: 6px; }
.v2-sy tr.v2-sy-diff td { background: #fff8eb; }
.v2-sy td.v2-sy-none { padding: 4px 16px 16px; }
/* The Event log inside its tab: its filters under System's heading, not beside a heading of their own. */
.page-head.v2-sy-loghead { justify-content: flex-start; margin-bottom: 12px; }
@media (max-width: 720px) { .v2-sy-bar input[type="search"] { flex-basis: 100%; } }