/* INV Web: the shared stylesheet (design docs/design/impl/00-SYSTEM.md).
   INV's own colours and the Segoe UI system stack; from the "Industry" design
   system only the "+" corner marks, line-height 1.55, heading tracking and
   border-box (owner decision Q1). No web fonts, no icons, no @import, no
   external URL: the CSP allows only this site's own files.
   Order (00-SYSTEM §4): 1 tokens, 2 base, 3 panel and corner marks, 4 chrome,
   5 navigation, 6 buttons and fields, 7 data components, 8 sign-in / account /
   error screens, 9 phone and reduced motion.
   Colour only through the --inv-* tokens: no colour value outside the two
   token blocks (a test checks this). Area rules (ic-, ds-, pr-) live in the
   area stylesheets, linked from {% block head_extra %}. */

/* ── 1. Tokens (00-SYSTEM §1.7) ─────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  /* surfaces */
  --inv-window: #f0f0f0;  --inv-content: #ffffff;  --inv-tabstrip: #e0e0e0;  --inv-tabstrip-hover: #d2d2d2;
  --inv-zebra: #f5f5f5;   --inv-zebra-detail: #f9f9f9;  --inv-row-hover: #e8f4fd;  --inv-qr-bg: #ffffff;
  /* ink */
  --inv-ink: #333333;  --inv-muted: #6b6b6b;  --inv-status-muted: #555555;  --inv-on-accent: #ffffff;
  /* accent, links, focus */
  --inv-accent: #1a72e8;  --inv-accent-pressed: #1560c0;  --inv-utility: #5b21b6;
  --inv-link: #1a72e8;    --inv-link-hover: #1560c0;      --inv-link-on-tint: #1560c0;  --inv-focus: #1a72e8;
  /* meaning */
  --inv-stale-ink: #8a5a00;  --inv-stale-ink-strip: #845600;
  --inv-figure-down: #c62828;  --inv-fault: #a4331f;
  --inv-qty-in: #137333;  --inv-qty-out: #c0392b;  --inv-qty-in-fill: #137333;  --inv-qty-zero-fill: #6b6b6b;
  --inv-chip-bg: #d6eaf8;  --inv-chip-ink: #1a5276;  --inv-chip-close: #c0392b;  --inv-remote: #6a5acd;
  --inv-notice-bg: var(--inv-chip-bg);  --inv-notice-ink: var(--inv-chip-ink);
  --inv-money-negative: var(--inv-figure-down);
  --inv-fail-daily: var(--inv-figure-down);  --inv-fail-reports: var(--inv-fault);
  --inv-error: var(--inv-figure-down);
  /* lines */
  --inv-rule: #aaaaaa;  --inv-hairline: #c8c8c8;  --inv-corner: rgb(29 31 32 / 0.55);
  /* charts */
  --inv-pie-1: #1a72e8; --inv-pie-2: #e8811a; --inv-pie-3: #2fa84f; --inv-pie-4: #a4331f; --inv-pie-5: #7a4fb5;
  --inv-pie-6: #c9a227; --inv-pie-7: #3aa0a0; --inv-pie-8: #b05a8f; --inv-pie-9: #6b6b6b;

  /* type */
  --inv-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --inv-font-mono: Consolas, ui-monospace, Menlo, "Cascadia Mono", "Courier New", monospace;
  --inv-scale: 1.2;
  --inv-fs-screen-title: calc(20px * var(--inv-scale));
  --inv-fs-figure-total: calc(17.33px * var(--inv-scale));
  --inv-fs-figure:       calc(14.67px * var(--inv-scale));
  --inv-fs-body:         calc(13.33px * var(--inv-scale));
  --inv-fs-small:        calc(12px * var(--inv-scale));
  --inv-fs-note:         calc(10.67px * var(--inv-scale));
  --inv-fs-code: 20px;  --inv-fs-chart-label: 12px;
  --inv-fw-regular: 400;  --inv-fw-bold: 700;
  --inv-line-height: 1.55;  --inv-line-height-heading: 1.12;
  --inv-heading-tracking: -0.015em;  --inv-underline-offset: 3px;  --inv-code-tracking: 4px;

  /* spacing */
  --inv-sp-2: 2px;  --inv-sp-4: 4px;  --inv-sp-6: 6px;  --inv-sp-8: 8px;  --inv-sp-10: 10px;  --inv-sp-12: 12px;
  --inv-sp-14: 14px; --inv-sp-16: 16px; --inv-sp-18: 18px; --inv-sp-20: 20px; --inv-sp-24: 24px;
  --inv-sp-40: 40px; --inv-sp-48: 48px;
  --inv-margin: 14px;  --inv-gutter: 10px;  --inv-space-5: 20px;

  /* sizes */
  --inv-page-width: 1200px;  --inv-page-width-wide: 1400px;
  --inv-card-w: 420px;  --inv-card-w-wide: 760px;  --inv-panel-left: 420px;  --inv-list-w: 176px;
  --inv-title-h: 48px;  --inv-strip-h: 36px;  --inv-admin-bar-h: 34px;  --inv-view-strip-h: 32px;
  --inv-footer-h: 40px;  --inv-summary-h: 64px;
  --inv-row: 28px;  --inv-row-figure: 32px;  --inv-count-row: 28px;  --inv-bar-h: 9px;  --inv-bar-lane: 150px;
  --inv-control-h: 36px;  --inv-control-h-compact: 32px;  --inv-code-h: 40px;  --inv-code-w: 170px;
  --inv-touch: 44px;

  /* borders, focus, corner marks */
  --inv-border: 1px solid var(--inv-rule);
  --inv-border-hairline: 1px solid var(--inv-hairline);
  --inv-total-rule: 2px solid var(--inv-ink);
  --inv-radius: 0;
  --inv-focus-w: 2px;  --inv-focus-offset: 2px;  --inv-focus-inset: -2px;
  --inv-corner-size: 11px;  --inv-corner-arm: 5px;  --inv-corner-stroke: 1px;  --inv-corner-inset: -6px;
}

/* Dark follows the device (owner decision Q2). INV has no dark mode: this is
   the proposed palette, every text pair at least 4.5:1. Unchanged: accent,
   accent-pressed, on-accent, the QR ground and the pie colours. */
@media (prefers-color-scheme: dark) {
  :root {
    --inv-window: #1b1b1b;  --inv-content: #242424;  --inv-tabstrip: #2e2e2e;  --inv-tabstrip-hover: #3a3a3a;
    --inv-zebra: #2a2a2a;   --inv-zebra-detail: #282828;  --inv-row-hover: #1d3346;
    --inv-ink: #e6e6e6;  --inv-muted: #a8a8a8;  --inv-status-muted: #b0b0b0;
    --inv-utility: #a78bfa;
    --inv-link: #7cb0ee;  --inv-link-hover: #a9cbf5;  --inv-link-on-tint: #7cb0ee;  --inv-focus: #7cb0ee;
    --inv-stale-ink: #e0a84a;  --inv-stale-ink-strip: #e0a84a;
    --inv-figure-down: #ff6b6b;  --inv-fault: #f08a6c;
    --inv-qty-in: #5cc97a;  --inv-qty-out: #ff8a80;  --inv-qty-in-fill: #217a3c;  --inv-qty-zero-fill: #5c5c5c;
    --inv-chip-bg: #1f3a52;  --inv-chip-ink: #cfe6f7;  --inv-chip-close: #ff8a80;  --inv-remote: #a99cf0;
    --inv-rule: #5a5a5a;  --inv-hairline: #3a3a3a;  --inv-corner: rgb(230 230 230 / 0.45);
  }
}

/* ── 2. Base, utilities, visually hidden, skip link (§3.0) ──────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--inv-window); color: var(--inv-ink);
  font-family: var(--inv-font); font-size: var(--inv-fs-body); line-height: var(--inv-line-height);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4 { margin: 0; font-family: inherit; line-height: var(--inv-line-height-heading);
                 letter-spacing: var(--inv-heading-tracking); }
p, figure, dl, dd { margin: 0; }
a { color: var(--inv-link); text-underline-offset: var(--inv-underline-offset); }
a:hover { color: var(--inv-link-hover); }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: var(--inv-focus-w) solid var(--inv-focus); outline-offset: var(--inv-focus-offset); }

.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: var(--inv-sp-8); top: -3rem; z-index: 10; padding: var(--inv-sp-6) var(--inv-sp-12);
             background: var(--inv-content); color: var(--inv-ink); border: var(--inv-border); }
.skip-link:focus { top: var(--inv-sp-8); }

/* utilities (tables and inline text) */
.u-right { text-align: right; }       .u-center { text-align: center; }
.u-mono { font-family: var(--inv-font-mono); }
.u-nowrap { white-space: nowrap; }
.u-pre { white-space: pre-wrap; }     /* keeps INV's double spaces and still wraps */
.u-strong { font-weight: var(--inv-fw-bold); }
.u-muted { color: var(--inv-muted); }

/* ── 3. Panel and the "+" corner marks (§3.8) ───────────────────────────── */

.panel { min-width: 0; background: var(--inv-content); border: var(--inv-border); }

/* One ::after layer of eight 1 px lines: an 11 x 11 "+" centred on each corner
   pixel of the 1 px border. No markup, invisible to screen readers, dropped by
   forced-colours mode. A framed element keeps overflow visible and its own
   ::after free; its parent leaves at least 6 px of room. */
.blueprint, .button--primary { position: relative; }
.blueprint::after, .button--primary::after {
  content: ""; position: absolute; inset: var(--inv-corner-inset); pointer-events: none;
  --inv-corner-line: linear-gradient(var(--inv-corner), var(--inv-corner));
  background:
    var(--inv-corner-line) left  var(--inv-corner-arm) top    0 / var(--inv-corner-stroke) var(--inv-corner-size) no-repeat,
    var(--inv-corner-line) left  0 top    var(--inv-corner-arm) / var(--inv-corner-size) var(--inv-corner-stroke) no-repeat,
    var(--inv-corner-line) right var(--inv-corner-arm) top    0 / var(--inv-corner-stroke) var(--inv-corner-size) no-repeat,
    var(--inv-corner-line) right 0 top    var(--inv-corner-arm) / var(--inv-corner-size) var(--inv-corner-stroke) no-repeat,
    var(--inv-corner-line) left  var(--inv-corner-arm) bottom 0 / var(--inv-corner-stroke) var(--inv-corner-size) no-repeat,
    var(--inv-corner-line) left  0 bottom var(--inv-corner-arm) / var(--inv-corner-size) var(--inv-corner-stroke) no-repeat,
    var(--inv-corner-line) right var(--inv-corner-arm) bottom 0 / var(--inv-corner-stroke) var(--inv-corner-size) no-repeat,
    var(--inv-corner-line) right 0 bottom var(--inv-corner-arm) / var(--inv-corner-size) var(--inv-corner-stroke) no-repeat;
}

/* ── 4. Chrome: header, main, footer (§3.1, §3.2) ───────────────────────── */

.site-header { background: var(--inv-tabstrip); border-bottom: var(--inv-border); color: var(--inv-ink); }
.site-header__inner { max-width: var(--inv-page-width); margin: 0 auto; padding: var(--inv-sp-8) var(--inv-margin);
  min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--inv-sp-8) var(--inv-sp-20); }
.site-brand { font-size: var(--inv-fs-figure); font-weight: var(--inv-fw-bold); color: var(--inv-ink); text-decoration: none; }
.site-brand:hover { color: var(--inv-ink); text-decoration: underline; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--inv-sp-2); }
.site-nav__link { display: block; padding: 5px var(--inv-sp-14); font-size: var(--inv-fs-small); font-weight: var(--inv-fw-bold);
  color: var(--inv-ink); background: var(--inv-tabstrip); text-decoration: none; }
.site-nav__link:hover { color: var(--inv-ink); background: var(--inv-tabstrip-hover); }
.site-nav__link[aria-current] { color: var(--inv-on-accent); background: var(--inv-accent); }
.site-nav__link[aria-current]:hover { color: var(--inv-on-accent); background: var(--inv-accent); }
.site-nav__link[aria-current]:active { background: var(--inv-accent-pressed); }
.site-nav__link[aria-current]:focus-visible { outline-color: var(--inv-on-accent); outline-offset: -4px; }
.site-account { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--inv-sp-6) var(--inv-sp-16);
  font-size: var(--inv-fs-small); }
.site-account__name { font-weight: var(--inv-fw-bold); }
.site-account__link, .site-account__link:hover { color: var(--inv-ink); }
.site-account__link:hover { text-decoration-thickness: 2px; }
.site-signout { margin: 0; }
.site-signout__button { font: inherit; font-weight: var(--inv-fw-bold); color: var(--inv-ink); background: var(--inv-content);
  border: var(--inv-border); border-radius: var(--inv-radius); padding: var(--inv-sp-4) var(--inv-sp-12); cursor: pointer; }
.site-signout__button:hover { background: var(--inv-zebra); }
.site-signout__button:active { background: var(--inv-tabstrip); }
/* design v2: a header link never breaks inside itself ("Inventory Control" wrapped at 320 px) */
.site-nav__link, .site-account__link, .site-signout__button { white-space: nowrap; }

.site-main { flex: 1; width: 100%; max-width: var(--inv-page-width); margin: 0 auto; padding: var(--inv-margin);
  display: flex; flex-direction: column; gap: var(--inv-margin); }
.site-main:focus { outline: none; }
.site-main--auth { max-width: none; padding: var(--inv-sp-40) var(--inv-margin) var(--inv-sp-48); }
.site--wide .site-header__inner, .site--wide .site-main { max-width: var(--inv-page-width-wide); }
.site-footer { padding: var(--inv-margin); text-align: center; font-size: var(--inv-fs-small); color: var(--inv-muted); }
.site-footer__text { margin: 0; }

/* ── 5. Navigation: admin head, strip, tabs, title row, store switch ────── */

/* Administration head (§3.3): the signed-in bar, then the strip hanging from it */
.admin-head { display: flex; flex-direction: column; }
.admin-bar { min-height: var(--inv-admin-bar-h); display: flex; align-items: center; justify-content: space-between;
  gap: var(--inv-sp-12); padding: 0 var(--inv-sp-10); background: var(--inv-tabstrip); border: var(--inv-border);
  font-size: var(--inv-fs-small); color: var(--inv-ink); }
.admin-bar__who { white-space: pre-wrap; }
.admin-bar__lock { margin: 0; }
.admin-strip { border-top: 0; }

/* Strip (§3.4): admin strip, Past reports view strip */
.strip { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--inv-sp-2); min-height: var(--inv-strip-h);
  padding: 0 var(--inv-sp-4); background: var(--inv-tabstrip); border: var(--inv-border); }
.strip__link { display: flex; align-items: center; padding: var(--inv-sp-4) var(--inv-sp-16); font-size: var(--inv-fs-small);
  font-weight: var(--inv-fw-regular); color: var(--inv-ink); text-decoration: none; }
.strip__link:not([aria-current]):hover { color: var(--inv-ink); background: var(--inv-tabstrip-hover); }
.strip__link[aria-current] { font-weight: var(--inv-fw-bold); color: var(--inv-on-accent); background: var(--inv-accent); }
.strip__link[aria-current]:hover { color: var(--inv-on-accent); }
.strip__link[aria-current]:active { background: var(--inv-accent-pressed); }
.strip__link:focus-visible { outline-offset: var(--inv-focus-inset); }
.strip__link[aria-current]:focus-visible { outline-color: var(--inv-on-accent); outline-offset: -4px; }
.strip--compact { min-height: var(--inv-view-strip-h); }
.strip--compact .strip__link { padding: var(--inv-sp-4) var(--inv-sp-14); }

/* Tabs (§3.5): Inventory folder tabs, Daily Sales underline sub-tabs */
.tabs { display: flex; gap: var(--inv-sp-2); background: var(--inv-tabstrip); overflow-x: auto; }
.tabs__link { flex: none; padding: var(--inv-sp-6) var(--inv-sp-16); font-size: var(--inv-fs-small); font-weight: var(--inv-fw-regular);
  color: var(--inv-ink); background: var(--inv-tabstrip); text-decoration: none; white-space: nowrap; }
.tabs__link:not([aria-current]):hover { color: var(--inv-ink); background: var(--inv-tabstrip-hover); }
.tabs__link[aria-current] { font-weight: var(--inv-fw-bold); color: var(--inv-ink); background: var(--inv-content); }
.tabs__link:focus-visible { outline-offset: var(--inv-focus-inset); }
.tabs--folder { align-self: flex-start; padding: 3px 3px 0; border: var(--inv-border); border-bottom: 0; overflow: visible; }
.tabs--underline { gap: 0; border-bottom: var(--inv-border); }
.tabs--underline .tabs__link { padding: 7px var(--inv-sp-16) 5px; border-bottom: 2px solid var(--inv-tabstrip); }
.tabs--underline .tabs__link:not([aria-current]):hover { border-bottom-color: var(--inv-tabstrip-hover); }
.tabs--underline .tabs__link[aria-current] { border-bottom-color: var(--inv-utility); }

/* Page title row (§3.6) */
.page-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inv-sp-8) var(--inv-sp-14); min-height: var(--inv-title-h); }
.page-title__h { font-size: var(--inv-fs-screen-title); font-weight: var(--inv-fw-bold); }
.page-title__meta { font-size: var(--inv-fs-small); color: var(--inv-muted); }
.page-title > .store-switch { margin-left: auto; }

/* Segmented store switch (§3.7): links, aria-current="true" on the chosen store */
.store-switch { display: flex; gap: var(--inv-sp-2); padding: var(--inv-sp-2); background: var(--inv-tabstrip); }
.store-switch__link { display: flex; align-items: center; justify-content: center; padding: 5px var(--inv-sp-16);
  font-size: var(--inv-fs-small); font-weight: var(--inv-fw-regular); color: var(--inv-ink); background: var(--inv-tabstrip);
  text-decoration: none; white-space: nowrap; }
.store-switch__link:hover { color: var(--inv-ink); outline: 1px solid var(--inv-rule); }
.store-switch__link[aria-current] { font-weight: var(--inv-fw-bold); color: var(--inv-on-accent); background: var(--inv-accent); }
.store-switch__link[aria-current]:active { background: var(--inv-accent-pressed); }
.store-switch__link:focus-visible { outline: var(--inv-focus-w) solid var(--inv-focus); outline-offset: var(--inv-focus-offset); }
.store-switch--gapped { gap: var(--inv-sp-4); padding: 0; background: none; }
.store-switch--gapped .store-switch__link { padding: var(--inv-sp-4) var(--inv-sp-12); }

/* ── 6. Buttons, fields, inputs (§3.9, §3.10) ───────────────────────────── */

.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--inv-sp-6);
  font: inherit; font-size: var(--inv-fs-small); line-height: var(--inv-line-height); white-space: nowrap;
  padding: 7px 22px; border: 1px solid transparent; border-radius: var(--inv-radius); cursor: pointer; text-decoration: none; }
.button--primary { font-weight: var(--inv-fw-bold); color: var(--inv-on-accent); background: var(--inv-accent); border-color: var(--inv-accent); }
.button--primary:hover, .button--primary:active { color: var(--inv-on-accent); background: var(--inv-accent-pressed);
  border-color: var(--inv-accent-pressed); }
.button--secondary { font-weight: var(--inv-fw-regular); color: var(--inv-ink); background: var(--inv-content);
  border-color: var(--inv-rule); padding: 7px var(--inv-sp-16); }
.button--secondary:hover { color: var(--inv-ink); background: var(--inv-zebra); }
.button--secondary:active { background: var(--inv-tabstrip); }
.button--quiet { font-weight: var(--inv-fw-regular); color: var(--inv-ink); background: transparent; border: 0;
  padding: var(--inv-sp-4) var(--inv-sp-6); text-decoration: underline; }
.button--quiet:hover, .button--quiet:active { color: var(--inv-ink); background: var(--inv-tabstrip-hover); }
.button--quiet:focus-visible { outline-offset: var(--inv-focus-inset); }
.button--primary.button--compact { padding: 5px 18px; }
.button--secondary.button--compact { padding: 5px var(--inv-sp-12); }

.field { display: flex; flex-direction: column; gap: var(--inv-sp-6); }
.field__label { font-size: var(--inv-fs-small); font-weight: var(--inv-fw-bold); }
.field__hint { font-size: var(--inv-fs-small); font-weight: var(--inv-fw-regular); color: var(--inv-muted); }
.field--inline { flex-direction: row; align-items: center; font-size: var(--inv-fs-small); font-weight: var(--inv-fw-regular); }
.field--grow { flex: 1 1 280px; }
.input, .select { font: inherit; color: var(--inv-ink); background: var(--inv-content); border: var(--inv-border);
  border-radius: var(--inv-radius); }
.input { width: 100%; height: var(--inv-control-h); padding: 0 var(--inv-sp-10); font-size: var(--inv-fs-body);
  font-weight: var(--inv-fw-regular); }
.input::placeholder { color: var(--inv-muted); opacity: 1; }
.input--compact { height: var(--inv-control-h-compact); padding: 0 var(--inv-sp-8); flex: 1; width: auto; min-width: 0; }
.input--mono { font-family: var(--inv-font-mono); }
.input--code { font-family: var(--inv-font-mono); font-size: var(--inv-fs-code); letter-spacing: var(--inv-code-tracking);
  height: var(--inv-code-h); width: var(--inv-code-w); max-width: 100%; }
.select { height: var(--inv-control-h-compact); padding: 0 var(--inv-sp-6); font-size: var(--inv-fs-small); }
.check { display: inline-flex; align-items: center; gap: var(--inv-sp-6); font-size: var(--inv-fs-small);
  font-weight: var(--inv-fw-regular); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--inv-accent); }

/* ── 7. Tables, heads, N/A, stale, store chip, alerts, pager (§3.11–§3.14) ─ */

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: var(--inv-fw-bold); }
.table td { vertical-align: middle; }
.table .u-right { text-align: right; }   .table .u-center { text-align: center; }
.table td.is-na { text-align: left; }    /* an N/A starts at the lane's left edge */

.table--report th { padding: var(--inv-sp-4) 0; font-size: var(--inv-fs-small); color: var(--inv-muted);
  text-transform: uppercase; border-bottom: var(--inv-border); }
.table--report td { padding: 0; }
.table--report tbody tr { height: var(--inv-row); border-bottom: var(--inv-border-hairline); }

.table--data { font-size: var(--inv-fs-small); }
.table--data thead tr { background: var(--inv-tabstrip); }
.table--data th { padding: var(--inv-sp-6) var(--inv-sp-8); color: var(--inv-ink); white-space: nowrap; }
.table--data td { padding: 0 var(--inv-sp-8); }
.table--data a { color: var(--inv-link-on-tint); }
.table--data a:hover { color: var(--inv-link-on-tint); text-decoration-thickness: 2px; }

.table-wrap { overflow-x: auto; }
.table-wrap:focus-visible { outline-offset: var(--inv-focus-inset); }

.column-head { margin: 0; font-size: var(--inv-fs-small); font-weight: var(--inv-fw-bold); line-height: var(--inv-line-height);
  letter-spacing: normal; color: var(--inv-muted); text-transform: uppercase; }
.column-head--as-written { text-transform: none; white-space: pre-wrap; }   /* INV's own case and spacing */
.na { font-size: var(--inv-fs-body); font-weight: var(--inv-fw-regular); color: var(--inv-muted); white-space: pre-wrap; }
.stale { color: var(--inv-stale-ink); }
.stale--strip { color: var(--inv-stale-ink-strip); }
.stale-stamp { margin-right: var(--inv-sp-6); font-size: var(--inv-fs-small); font-weight: var(--inv-fw-regular); }
.store-chip { display: inline-block; padding: 0 var(--inv-sp-8); font-size: var(--inv-fs-small); font-weight: var(--inv-fw-bold);
  color: var(--inv-ink); background: var(--inv-content); border: var(--inv-border); white-space: nowrap; }

.alert { margin: 0 0 var(--inv-sp-16); padding: var(--inv-sp-8) var(--inv-sp-10); border: 1px solid transparent; background: var(--inv-content); }
.alert--error  { color: var(--inv-error); border-color: var(--inv-error); }
.alert--locked { color: var(--inv-stale-ink); border-color: var(--inv-stale-ink); }
.alert--info, .alert--ok { margin-bottom: var(--inv-sp-14); border: 0; color: var(--inv-notice-ink); background: var(--inv-notice-bg); }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inv-sp-4); }
.pager__link { display: inline-flex; align-items: center; padding: 3px var(--inv-sp-10); font-size: var(--inv-fs-small);
  color: var(--inv-ink); background: var(--inv-content); border: var(--inv-border); text-decoration: none; }
a.pager__link:hover { color: var(--inv-ink); background: var(--inv-zebra); }
.pager__link[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.pager__pos { margin-left: var(--inv-sp-8); white-space: pre; }

/* ── 8. Sign-in, account and error screens (design 01 §3.5) ─────────────── */

.auth-card { width: 100%; max-width: var(--inv-card-w); margin: 0 auto; padding: var(--inv-sp-24); }
.auth-card--wide { max-width: var(--inv-card-w-wide); }
.auth-card__title { margin: 0 0 var(--inv-sp-4); font-size: var(--inv-fs-screen-title); font-weight: var(--inv-fw-bold);
  color: var(--inv-ink); }
.auth-card__title--solo  { margin-bottom: var(--inv-sp-18); }
.auth-card__title--setup { margin-bottom: var(--inv-sp-16); }
.auth-card__lede { margin: 0 0 var(--inv-sp-18); color: var(--inv-muted); }
.auth-form { display: flex; flex-direction: column; gap: var(--inv-sp-14); margin: 0; }
.auth-form--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--inv-sp-14) var(--inv-sp-20); }
.auth-form--grid .auth-actions { grid-column: 1 / -1; margin-top: 0; }
.auth-form--confirm { gap: var(--inv-sp-10); }
.auth-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--inv-sp-12); margin-top: var(--inv-sp-4); }
.auth-note { margin: 0; font-size: var(--inv-fs-small); color: var(--inv-muted); }
.auth-text { margin: 0 0 var(--inv-sp-16); text-wrap: pretty; }
.auth-text--scan { margin-bottom: var(--inv-sp-18); }
.auth-text--last { margin: 0; }

/* Remember me (design v2): the checkbox and its hint, lined up under the label text
   (16 px box + 6 px gap; 20 + 6 on a phone) */
.auth-remember { display: flex; flex-direction: column; }
.auth-remember__hint { margin-left: 22px; }
/* ...and the remembered name, read-only, with "Not you?" (a button posting a CSRF form) */
.auth-remembered { display: flex; align-items: center; justify-content: space-between; gap: var(--inv-sp-12);
  min-height: var(--inv-control-h); padding: 0 var(--inv-sp-10); background: var(--inv-zebra);
  border: var(--inv-border-hairline); }
.auth-remembered__name { min-width: 0; font-weight: var(--inv-fw-bold); overflow-wrap: anywhere; }
.auth-remembered__forget { flex: none; font: inherit; font-size: var(--inv-fs-small); color: var(--inv-link-on-tint);
  background: none; border: 0; padding: 0; text-decoration: underline;
  text-underline-offset: var(--inv-underline-offset); cursor: pointer; }
.auth-remembered__forget:hover { color: var(--inv-link-on-tint); text-decoration-thickness: 2px; }

/* Set-up steps (design v2, handoff known issue 9): a grid, so on a phone each step
   fills its own row and the current one is blue across the whole row */
.auth-steps { list-style: none; margin: 0 0 var(--inv-sp-18); padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--inv-sp-2);
  background: var(--inv-tabstrip); font-size: var(--inv-fs-small); }
.auth-steps__item { padding: var(--inv-sp-4) var(--inv-sp-14); color: var(--inv-ink); }
.auth-steps__item[aria-current="step"] { background: var(--inv-accent); color: var(--inv-on-accent); font-weight: var(--inv-fw-bold); }
.auth-steps__num { margin-right: 0.5em; }

.auth-setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--inv-sp-24);
  border-top: var(--inv-border); padding-top: var(--inv-sp-18); }
.auth-setup__col { display: flex; flex-direction: column; gap: var(--inv-sp-10); min-width: 0; }
.auth-qr { margin: 0; display: flex; flex-direction: column; gap: var(--inv-sp-10); }
.auth-qr__frame { width: 168px; height: 168px; background: var(--inv-qr-bg); border: var(--inv-border); }
.qr-svg { display: block; width: 100%; height: 100%; shape-rendering: crispEdges; }
.auth-qr__caption { font-size: var(--inv-fs-small); color: var(--inv-muted); }
.auth-secret { display: block; width: max-content; max-width: 100%; padding: var(--inv-sp-8) var(--inv-sp-10);
  font-family: var(--inv-font-mono); font-size: var(--inv-fs-body); letter-spacing: 1px; word-spacing: 6px;
  background: var(--inv-zebra); border: var(--inv-border-hairline); user-select: all; }
/* "Start again" on the confirm step: a secondary button on its own row, clear of the
   primary button's corner marks (design v2, handoff known issue 10) */
.auth-restart { margin: var(--inv-sp-16) 0 0; }

.error-page__code { margin: 0; font-family: var(--inv-font-mono); font-size: var(--inv-fs-small); color: var(--inv-muted); }
.error-page__title { margin: var(--inv-sp-6) 0 var(--inv-sp-10); }
.error-page__body { margin: 0 0 var(--inv-sp-16); }
.error-page__link { margin: 0; }

/* Transitional: the old placeholder markup (class "card") still used by
   inventory/index.html until the Inventory page replaces it. Remove then. */
.card { width: 100%; max-width: var(--inv-card-w-wide); margin: 0 auto; padding: var(--inv-sp-24);
  background: var(--inv-content); border: var(--inv-border); }
.card h1 { margin-bottom: var(--inv-sp-16); font-size: var(--inv-fs-screen-title); }
.placeholder { color: var(--inv-muted); }

/* ── 9. Phone (at most 40rem = 640 px) and other media (§3.16) ──────────── */

@media (max-width: 40rem) {
  /* header: a fixed three-row grid (01 §2.2) */
  .site-header__inner { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--inv-sp-6) var(--inv-sp-16);
    grid-template-areas: "brand brand brand out" "nav nav nav nav" "name pw tf tf"; }
  .site-brand { grid-area: brand; }
  .site-nav { grid-area: nav; }
  .site-account { display: contents; }
  .site-account__name { grid-area: name; }
  .site-account__link--password { grid-area: pw; }
  .site-account__link--twofactor { grid-area: tf; }
  .site-signout { grid-area: out; }
  .site-nav__list > li { flex: 1 1 0; }
  .site-brand, .site-nav__link, .site-signout__button, .site-account__link, .site-account__name {
    min-height: var(--inv-touch); display: flex; align-items: center; }
  .site-nav__link { justify-content: center; }

  /* 44 px touch targets (spec 06 §11) */
  .button, .strip__link, .tabs__link, .store-switch__link, .pager__link { min-height: var(--inv-touch); }
  .check { min-height: var(--inv-touch); }
  .check input { width: 20px; height: 20px; }
  .auth-remember__hint { margin-left: 26px; }
  .auth-remembered, .auth-remembered__forget { min-height: var(--inv-touch); }
  .input, .input--compact, .input--code, .select { height: var(--inv-touch); }
  .button--quiet { padding: var(--inv-sp-4) var(--inv-sp-10); }
  .tabs__link { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }

  /* title row: the store switch takes its own full-width line of equal buttons */
  .page-title { min-height: 0; }
  .page-title > .store-switch { margin-left: 0; width: 100%; }
  .store-switch__link { flex: 1 1 0; }
}

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

/* Windows contrast themes replace fills with system colours, so a current item
   told apart by its accent fill alone would vanish: keep it in the system's own
   selection colours (system colour keywords, not hex). */
@media (forced-colors: active) {
  .site-nav__link[aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}