/* EquipMart's look on the same screens (BUILD_PLAN THM-03, THM-04; ADR-056, ADR-060; docs/SAAS.md §5.1).
   Used only when <html data-brand="equipmart"> (src/shared/brand.ts says when: off everywhere by default). Under
   data-brand="ktuulz" nothing in this file applies, so the NexFix look stays exactly as it is (THM-02 proves it).
   Rules of this file:
   - It sets variables, on :root[data-brand='equipmart'] only. The few rules it has (part-number figures, touch sizes)
     are scoped under the same attribute.
   - Screen only (@media screen): printouts and PDFs keep the NexFix light tokens whatever the brand (THM-05).
   - Every variable the NexFix dark block sets and this file's light block sets is set again in the dark block, so
     dark mode never mixes the two.
   - Colours come from EquipMart's tokens with the owner's changes (--em-*, generated from design/equipmart/tokens.css
     and palette.css, which the website loads too); the few that are
     derived say so. Layout does not change: same sizes, same spacing, only colours, fonts and corner radius.
   - No logo or name here: the NexFix logo stays (product owner 2026-11-07); it is drawn in brand.tsx. Only its T's
     colour changes, to gold (--logo-t, --wordmark-t; owner 2026-11-08 "make logo T to match theme"). */
/* Generated from design/equipmart/tokens.css (PartsPlus commit fd2c60b64ecd82012ea4dacd5f4927886aabe643) and design/equipmart/palette.css
   (its values win) by scripts/sync-equipmart-tokens.mjs.
   Do not edit. The values only: nothing here is used unless brand-equipmart.css maps it (data-brand="equipmart"). */
:root {
  --em-radius: 0.75rem;
  --em-background: oklch(1 0 0);
  --em-foreground: #111111;
  --em-card: oklch(1 0 0);
  --em-card-foreground: #111111;
  --em-popover: oklch(1 0 0);
  --em-popover-foreground: #111111;
  --em-primary: oklch(0.38 0.075 190);
  --em-primary-foreground: oklch(0.99 0.005 180);
  --em-secondary: oklch(0.955 0.02 180);
  --em-secondary-foreground: oklch(0.3 0.06 190);
  --em-muted: oklch(0.96 0.006 200);
  --em-muted-foreground: oklch(0.47 0.02 200);
  --em-accent: oklch(0.955 0.02 180);
  --em-accent-foreground: oklch(0.3 0.06 190);
  --em-destructive: oklch(0.55 0.21 27);
  --em-border: oklch(0.89 0.01 200);
  --em-input: oklch(0.8 0.015 200);
  --em-ring: oklch(0.6 0.1 185);
  --em-tint: oklch(0.965 0.03 178);
  --em-tint-foreground: oklch(0.3 0.06 190);
  --em-signal: oklch(0.38 0.075 190);
  --em-signal-foreground: oklch(0.99 0.005 180);
  --em-font-body: var(--font-inter), var(--font-arabic), ui-sans-serif, system-ui, sans-serif;
  --em-leading-body: 1.5;
  --em-rtl-font-body: var(--font-arabic), var(--font-inter), ui-sans-serif, system-ui, sans-serif;
  --em-rtl-leading-body: 1.7;
  --em-rtl-tracking-tighter: 0;
  --em-rtl-tracking-tight: 0;
  --em-dark-background: #0a0a0a;
  --em-dark-foreground: #f5f5f5;
  --em-dark-card: #141414;
  --em-dark-card-foreground: #f5f5f5;
  --em-dark-popover: #141414;
  --em-dark-popover-foreground: #f5f5f5;
  --em-dark-primary: oklch(0.38 0.075 190);
  --em-dark-primary-foreground: oklch(0.99 0.005 180);
  --em-dark-secondary: #1c1c1c;
  --em-dark-secondary-foreground: #f5f5f5;
  --em-dark-muted: #1c1c1c;
  --em-dark-muted-foreground: #a3a3a3;
  --em-dark-accent: #1c1c1c;
  --em-dark-accent-foreground: #f5f5f5;
  --em-dark-destructive: oklch(0.65 0.19 25);
  --em-dark-border: #2a2a2a;
  --em-dark-input: #3a3a3a;
  --em-dark-ring: oklch(0.7 0.1 190);
  --em-dark-tint: oklch(0.22 0.03 200);
  --em-dark-tint-foreground: oklch(0.9 0.02 180);
  --em-dark-signal: oklch(0.7 0.1 185);
  --em-dark-signal-foreground: oklch(0.15 0.03 200);
  --em-brand-text: oklch(0.38 0.075 190);
  --em-gold: #c9a227;
  --em-gold-foreground: #111111;
  --em-gold-text: #7f650a;
  --em-warning: #f5db12;
  --em-warning-foreground: #111111;
  --em-foreground-2: #333333;
  --em-primary-hover: oklch(0.33 0.075 190);
  --em-warning-line: #9c8c00;
  --em-dark-brand-text: oklch(0.8 0.09 190);
  --em-dark-gold: #c9a227;
  --em-dark-gold-foreground: #111111;
  --em-dark-gold-text: #c9a227;
  --em-dark-warning: #f5db12;
  --em-dark-warning-foreground: #111111;
  --em-dark-foreground-2: #d4d4d4;
  --em-dark-primary-hover: oklch(0.44 0.075 190);
  --em-dark-hover: #1a1a1a;
  --em-dark-section: #222222;
  --em-dark-warning-line: #f5db12;
  --em-dark-band: #0b2e2c;
}

/* Self-hosted, never from a CDN; downloaded only when a screen uses them, which is only under this brand.
   Also used by the NexFix look since the redesign (look-v3.css, UXR-10).
   SIL Open Font License 1.1 (out/renderer/fonts/LICENSE-*.txt). Their own names, so a font installed on the PC never
   takes their place. */
@font-face { font-family: 'EM Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('./inter-latin-wght-normal-Dx4kXJAl.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'EM Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('./inter-latin-ext-wght-normal-DO1Apj_S.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'EM Plex Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url('./ibm-plex-sans-arabic-arabic-400-normal-CyU-ddYS.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'EM Plex Arabic'; font-style: normal; font-weight: 500; font-display: swap; src: url('./ibm-plex-sans-arabic-arabic-500-normal-C4MQITzh.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'EM Plex Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url('./ibm-plex-sans-arabic-arabic-600-normal-0pRdybE_.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'EM Plex Arabic'; font-style: normal; font-weight: 700 900; font-display: swap; src: url('./ibm-plex-sans-arabic-arabic-700-normal-DrtBj6UE.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'EM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2') format('woff2'); }
@font-face { font-family: 'EM Plex Mono'; font-style: normal; font-weight: 500 900; font-display: swap; src: url('./ibm-plex-mono-latin-600-normal-BgSNZQsw.woff2') format('woff2'); }

@media screen {
  :root[data-brand='equipmart'] {
    /* surfaces: white cards on the faintest grey-green, one step below them for dense lists (derived) */
    --bg: oklch(0.975 0.004 200);
    --surface: var(--em-card);
    --surface-2: var(--em-muted);
    --border: var(--em-border);
    --border-strong: var(--em-input);
    --text: var(--em-foreground); /* #111111 (design/equipmart/palette.css) */
    --text-2: var(--em-foreground-2);
    --muted: var(--em-muted-foreground);
    /* EquipMart's petrol, exactly (#004f4b), for buttons, links, selection and the whole top band */
    --primary: var(--em-primary);
    --primary-hover: var(--em-primary-hover);
    --primary-soft: var(--em-secondary);
    --link: var(--em-brand-text);
    --on-primary: var(--em-primary-foreground);
    --on-primary-2: oklch(0.88 0.03 185); /* derived: the quieter label on a petrol tile */
    --focus-ring: color-mix(in oklch, var(--em-ring) 45%, transparent);
    --row-hover: oklch(0.975 0.012 180); /* derived: a breath of --accent */
    --row-section: oklch(0.94 0.01 200);
    /* the one accent, gold (owner 2026-11-08), only as a thin line or outline, never a fill: the guide's current chapter,
       the sign-in card's top edge, the outline of Home's Needs-attention count. Never a warning (lemon) or an error. */
    --brand: var(--em-gold);
    --logo-t: var(--em-gold); /* the logo's T outline and the wordmark's t, as on the website (owner 2026-11-08) */
    --wordmark-t: var(--em-gold);
    --on-brand: var(--em-gold-foreground);
    --danger: var(--em-destructive);
    --danger-soft: oklch(0.965 0.025 27);
    --danger-line: oklch(0.86 0.07 27);
    --danger-solid: var(--em-destructive);
    --danger-solid-hover: oklch(0.49 0.2 27);
    --chart-bar: oklch(0.62 0.06 190);
    /* warnings: lemon with near-black text, as on the website, so they never look like the gold accent;
       success stays NexFix's green, one step darker for 4.5 : 1 on its tint (derived) */
    --warn: var(--em-warning-foreground);
    --warn-soft: var(--em-warning);
    --warn-line: var(--em-warning-line);
    --ok: #17703a;
    --backdrop: color-mix(in oklch, var(--em-foreground) 45%, transparent);
    --tag-bg: color-mix(in oklch, var(--em-foreground) 78%, transparent);
    /* the menu bar and toolbar: one band of EquipMart's petrol, exactly --primary, in light and dark (product owner
       2026-11-07 "petrol green", 2026-11-08 "it should look same" as the website). On it, everything is white or a
       white tint; the main toolbar button is white with petrol text, so it stands out on the band. */
    --chrome: var(--em-primary);
    --chrome-2: var(--em-primary);
    --sidebar-text: oklch(0.95 0.012 185);
    --sidebar-active: var(--em-primary-foreground); /* the underline under the open screen's menu */
    --chrome-strong: var(--em-primary-foreground);
    --chrome-muted: oklch(0.9 0.025 185);
    --chrome-line: rgb(255 255 255 / 0.2);
    --chrome-hover: rgb(255 255 255 / 0.13);
    --chrome-hover-2: rgb(255 255 255 / 0.13);
    --chrome-focus: rgb(255 255 255 / 0.9);
    --chrome-field: rgb(255 255 255 / 0.08);
    --chrome-field-hover: rgb(255 255 255 / 0.45);
    --chrome-btn-line: rgb(255 255 255 / 0.26);
    --chrome-primary: var(--em-primary-foreground);
    --chrome-primary-hover: oklch(0.92 0.02 185);
    --chrome-on-primary: var(--em-primary);
    --chrome-warn-line: var(--em-warning);
    --chrome-warn-bg: var(--em-warning);
    --chrome-warn-text: var(--em-warning-foreground);
    --chrome-bad-line: rgb(248 113 113 / 0.65);
    --chrome-bad-bg: rgb(248 113 113 / 0.18);
    --chrome-bad-text: #fecaca;
    --chrome-ok: #4ade80;
    --toolbar-text: oklch(0.95 0.012 185);
    --toolbar-line: rgb(255 255 255 / 0.14);
    /* the first screens stay dark (the NexFix logo needs it): near-black, as dark mode, with a petrol glow */
    --first-bg: radial-gradient(1100px 720px at 28% 38%, oklch(0.6 0.1 185 / 0.16), transparent 60%), radial-gradient(900px 600px at 92% 100%, oklch(0.6 0.1 185 / 0.08), transparent 60%), linear-gradient(160deg, #1c1c1c 0%, #111111 62%, #0a0a0a 100%);
    --center-bg: radial-gradient(1000px 640px at 30% 35%, oklch(0.6 0.1 185 / 0.14), transparent 60%), linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 70%);
    /* shape and type */
    --radius: calc(var(--em-radius) - 2px); /* the account site's buttons and inputs (rounded-md, 10 px; WEB-13); grid cells stay square */
    --font: 'EM Inter', 'EM Plex Arabic', system-ui, sans-serif;
    --num: 'EM Inter', 'EM Plex Arabic', system-ui, sans-serif;
    --code: 'EM Plex Mono', 'EM Plex Arabic', ui-monospace, monospace; /* part numbers and codes */
  }

  /* Dark: neutral near-black (design/equipmart/palette.css), not EquipMart's navy; the same petrol for the band and
     the buttons. Petrol text on near-black is 2.1 : 1, so links, tabs and the dashboard bars use --link, the same hue
     lighter (#4baaa5, 5.9 : 1 or more). */
  :root[data-brand='equipmart'][data-theme='dark'] {
    --bg: var(--em-dark-background);
    --surface: var(--em-dark-card);
    --surface-2: var(--em-dark-muted);
    --border: var(--em-dark-border);
    --border-strong: var(--em-dark-input);
    --text: var(--em-dark-foreground);
    --text-2: var(--em-dark-foreground-2);
    --muted: var(--em-dark-muted-foreground);
    /* WEB-13: as the account site in dark (design/site-theme.css, owner 2026-11-08): primary buttons are the light brand
       green with near-black text (11.4 : 1), so the hand-over from the account to the shop is not noticed. The menu
       band keeps the petrol (--chrome, above). */
    --primary: #73d1ca;
    --primary-hover: #8fdcd6;
    --primary-soft: var(--em-dark-secondary);
    --link: var(--em-dark-brand-text);
    --on-primary: #0a0a0a;
    --on-primary-2: #1f3b39; /* WEB-13: the quieter label on a light-green tile (6.6 : 1) */
    --focus-ring: color-mix(in oklch, var(--em-dark-ring) 45%, transparent);
    --row-hover: var(--em-dark-hover);
    --row-section: var(--em-dark-section);
    --brand: var(--em-dark-gold);
    --logo-t: var(--em-dark-gold);
    --wordmark-t: var(--em-dark-gold);
    --on-brand: var(--em-dark-gold-foreground);
    --sidebar-active: var(--em-dark-primary-foreground);
    --danger: var(--em-dark-destructive);
    --danger-soft: #2a1414;
    --danger-line: #5c2626;
    --danger-solid: oklch(0.55 0.2 27);
    --danger-solid-hover: oklch(0.5 0.19 27);
    --chart-bar: #737373;
    --warn: var(--em-dark-warning-foreground);
    --warn-soft: var(--em-dark-warning);
    --warn-line: var(--em-dark-warning-line);
    --ok: #4ade80;
    --backdrop: color-mix(in oklch, black 60%, transparent);
    --chrome: var(--em-dark-band); /* deep green, the website's dark hero band; buttons stay the brand petrol */
    --chrome-2: var(--em-dark-band);
    --sidebar-text: oklch(0.95 0.012 185);
    --chrome-strong: var(--em-dark-primary-foreground);
    --chrome-muted: oklch(0.9 0.025 185);
    --chrome-line: rgb(255 255 255 / 0.2);
    --chrome-hover: rgb(255 255 255 / 0.13);
    --chrome-hover-2: rgb(255 255 255 / 0.13);
    --chrome-focus: rgb(255 255 255 / 0.9);
    --chrome-field: rgb(255 255 255 / 0.08);
    --chrome-field-hover: rgb(255 255 255 / 0.45);
    --chrome-btn-line: rgb(255 255 255 / 0.26);
    --chrome-primary: var(--em-dark-primary-foreground);
    --chrome-primary-hover: oklch(0.92 0.02 185);
    --chrome-on-primary: var(--em-dark-primary);
    --toolbar-text: oklch(0.95 0.012 185);
    --toolbar-line: rgb(0 0 0 / 0.6);
  }

  /* The A4 sheet of the document viewer (UX-127) is the printout as it prints, and printouts keep NexFix's fonts
     (THM-05): the sheet keeps them too, so what is shown is what prints. */
  :root[data-brand='equipmart'] .dv-sheet { --font: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Sans Arabic', system-ui, sans-serif;
    --num: 'Segoe UI', Tahoma, system-ui, sans-serif; --code: var(--num); font-family: var(--font); }

  /* Home's Needs-attention count in a gold ring, the text stays near-black (the brackets are for the NexFix look). Guide
     step numbers are petrol, as buttons are: gold is never a fill. */
  :root[data-brand='equipmart'] .attention .attn-count { display: inline-block; min-width: 22px; padding: 0 6px; border: 1.5px solid var(--brand); border-radius: 11px; color: var(--text); font-size: 12.5px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 2px; }
  :root[data-brand='equipmart'] .guide-sn { background: var(--primary); color: var(--on-primary); }
  :root[data-brand='equipmart'] .attention .attn-count .attn-paren { display: none; }

  /* Warnings shown as a colour on their own (no tint behind) get the lemon as a mark, since lemon text is unreadable. */
  :root[data-brand='equipmart'] .tile .value.warn { text-decoration: underline 4px var(--warn-soft); text-underline-offset: 4px; text-decoration-skip-ink: none; }
  :root[data-brand='equipmart'] .loc-tag.warn-tag { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
  :root[data-brand='equipmart'] .input.unmatched { border-color: var(--warn-line); }
  :root[data-brand='equipmart'] .bell-item:not(.error) { border-inline-start-color: var(--warn-line); }

  /* Part numbers and codes: every digit the same width, a zero that is not an O (EquipMart's catalogue look). */
  :root[data-brand='equipmart'] :is(.picker-item .code, .tree-row .code, .pl-code) { font-variant-numeric: tabular-nums slashed-zero; }
}

/* THM-04: touch targets of at least 44 px on a touch screen (a phone, a tablet), under this brand only — as EquipMart
   does. Mouse and keyboard PCs see no change. */
@media screen and (pointer: coarse) {
  :root[data-brand='equipmart'] :is(button, [role='button'], .btn, select, textarea, input:not([type='checkbox'], [type='radio'], [type='hidden']), label.check, label.switch) { min-height: 44px; }
  :root[data-brand='equipmart'] :is(button, [role='button'], .btn) { min-width: 44px; }
  :root[data-brand='equipmart'] label:not(.check, .switch):has(> input:is([type='checkbox'], [type='radio'])) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
  :root[data-brand='equipmart'] .mb-btn { margin-block: 0; }
  :root[data-brand='equipmart'] .menubar { height: auto; min-height: 44px; }
  :root[data-brand='equipmart'] .toolbar { height: auto; min-height: 46px; padding-block: 4px; }
}
/* The Cash place (MNY-08): the owner-approved round 3 layout (docs/design/cash/) on the app's own tokens. Phone first:
   one column, the main button full width; from 900 px the form and the table side by side. */
.cash .ic { flex: none; vertical-align: -3px; margin-inline-end: 6px; }
.cash h1 small { font-size: 13px; font-weight: 500; }
.cash .card h2 { font-size: 15px; font-weight: 700; margin: 0 0 8px; }
.cash .card + .card { margin-top: 12px; }
.cash-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .cash-cols { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }
.cash-form { max-width: 560px; }
.cash-kv { margin: 0; }
.cash-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cash-kv > div:last-child { border-bottom: 0; }
.cash-kv dt { color: var(--muted); font-size: 14px; }
/* Round 3 (.sec-h h2): a card's heading 18 px bold. */
.cash .card > h2 { font-size: 18px; font-weight: 700; }
.cash-kv dd { margin: 0; font-weight: 600; text-align: end; }
.cash-kv .total { border-top: 1px solid var(--border-strong, var(--border)); font-size: 16px; }
.cash-kv .total dt { color: inherit; font-weight: 700; }
.cash-choices { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.cash-choices legend { font-weight: 600; margin-bottom: 6px; }
.cash-choices .choice { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.cash-choices .choice.on { border-color: var(--accent, var(--ok)); box-shadow: inset 0 0 0 1px var(--accent, var(--ok)); }
.cash .seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cash table.data tr.selected td { background: var(--ok-soft); }
.cash .alert.info { background: var(--info-soft); border-color: var(--info-soft); color: var(--info-text); }
/* Round 3 (docs/design/cash/home): four equal figures in one card, a rule between them; 14 px label, 22 px bold figure,
   the first in the brand green. */
.cash-figs.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; margin-bottom: 12px; }
.cash-figs.stat-strip > div { padding: 14px 20px; border-inline-start: 1px solid var(--border); min-width: 0; gap: 0; }
.cash-figs.stat-strip > div:first-child { border-inline-start: 0; }
.cash-figs.stat-strip span { font-size: 14px; color: var(--muted); }
.cash-figs.stat-strip strong, .cash-figs.stat-strip strong .num, .cash-figs.stat-strip .big strong { font-size: 22px; font-weight: 700; line-height: 1.35; }
.cash-figs.stat-strip > div:first-child strong { color: var(--link); }
@media (max-width: 1023px) {
  .cash-figs.stat-strip { grid-template-columns: 1fr 1fr; }
  .cash-figs.stat-strip > div:nth-child(n + 3) { border-top: 1px solid var(--border); }
  .cash-figs.stat-strip > div:nth-child(odd) { border-inline-start: 0; }
}
@media (max-width: 599px) {
  .cash-figs.stat-strip > div { padding: 10px 14px; }
  .cash-figs.stat-strip strong, .cash-figs.stat-strip strong .num, .cash-figs.stat-strip .big strong { font-size: 18px; }
}
@media (max-width: 600px) {
  .cash .hide-ph { display: none; }
  /* Round 3 (docs/design/cash/*-375): the title is in the phone header; the head's buttons wrap as they are, 44 px. */
  .cash .page-head > h1 { display: none; } /* the note under it stays (the receipt: number · way · date) */
  .cash .page-head { flex-wrap: wrap; gap: 8px; }
  .cash .page-head .btn { min-height: 44px; }
  .cash .cash-form .btn.primary:not(.seg *), .cash .stack > div > .btn.primary { width: 100%; min-height: 48px; justify-content: center; text-align: center; }
}
@media (max-width: 900px) { .cash .hide-tab { display: none; } }

/* Round 3 (track R, docs/design/cash/collect): the main button full width under the table, 48 px; fields 44 px. */
.cash-go > .btn.primary { width: 100%; min-height: 48px; justify-content: center; font-size: 15px; }
.cash .cash-form .input, .cash .cash-form select { min-height: 44px; font-size: 15px; }
.cash .card { padding: 16px; }
.cash .cash-form .field > span:first-child { font-size: 14px; font-weight: 600; color: var(--text); }
.cash-choices legend { font-size: 14px; }
.cash-choices .choice { min-height: 52px; padding: 8px 14px; gap: 12px; }
.cash-choices .choice > span { display: flex; flex-direction: column; line-height: 1.35; font-weight: 600; font-size: 15px; }
.cash-choices .choice small { font-size: 13px; font-weight: 400; }
.cash-choices .choice.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.cash-choices .choice input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; }
.amt-in { display: flex; align-items: center; gap: 8px; }
.amt-in .input { text-align: end; font-weight: 700; font-size: 20px; max-width: 240px; font-family: var(--num); }
.amt-in .riyal { height: 18px; color: var(--muted); }
@media (max-width: 600px) { .amt-in .input { max-width: none; } }

/* The receipt photo box (docs/design/cash/expense). */
.cash-photo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px; border: 1px dashed var(--border-strong, var(--border)); border-radius: var(--radius); }
.cash-photo-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--primary-soft); color: var(--link); }
.cash-photo-ic .ic { margin: 0; }
.cash-photo .btn { cursor: pointer; }
.cash-photo-file { display: inline-flex; align-items: center; color: var(--link); font-weight: 600; cursor: pointer; }

/* Collections (docs/design/cash/collections): the filter as one segmented control; Remind over Collect. */
.cash .seg.joined { gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.cash .seg.joined .btn { border: 0; border-radius: 0; min-height: 30px; }
.cash .seg.joined .btn + .btn { border-inline-start: 1px solid var(--border); }
.cash .coll-acts { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cash .linklike.strong { color: var(--link); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; }
.cash .page-head .btn { font-weight: 600; } /* design: the head's word buttons are semibold */

/* Payment received (round 3, docs/design/cash/receipt): Print receipt with its key, Send on WhatsApp outlined, Collect
   another as a plain word button; the receipt number in the fixed-width face. */
.cash-receipt .cash-receipt-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cash .btn.outline { border-color: var(--link); color: var(--link); background: var(--surface); }
.cash .btn.plain { border-color: transparent; background: none; color: var(--link); }
.cash .pn { font-family: var(--font-mono, ui-monospace, monospace); }
.cash-receipt .cash-kv dd { font-size: 16px; }
.cash-receipt .card > .table-wrap { margin-inline: -16px; margin-bottom: -16px; }
.cash-receipt .card > .table-wrap table.data { border: 0; border-radius: 0; }
/* Payment received on a phone (round 3): Print receipt full width, fixed above the bottom bar; the head keeps WhatsApp
   and Collect another. */
.cash-sticky { display: none; }
@media screen and (max-width: 600px) {
  .cash-sticky { display: block; position: fixed; bottom: 64px; inset-inline: 0; z-index: 40; padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); }
  .cash-sticky .btn.primary { width: 100%; min-height: 48px; justify-content: center; }
  .cash-receipt:has(.cash-sticky) { padding-bottom: 76px; }
}
@media print { .cash-sticky { display: none !important; } }
/* Round 3 (.tbl): the receipt's rows 48 px (56 px on a phone, as drawn), the head row 40 px. */
.cash-receipt table.data tbody td, .cash-receipt table.data tfoot td { height: 48px; }
.cash-receipt table.data thead th { height: 40px; }
@media screen and (max-width: 600px) { .cash-receipt table.data tbody td { height: 56px; } }
/* Expenses to approve (round 3, docs/design/cash/approve): Approve over Send back at the row's end; on a phone the who ·
   when · paid by line under the kind. */
.cash .show-ph { display: none; }
@media screen and (max-width: 600px) { .cash .show-ph { display: block; } }
.cash td.cash-act { text-align: end; }
.cash td.cash-act > .btn { display: flex; margin-inline-start: auto; }
.cash td.cash-act > .btn + .btn { margin-top: 4px; }
.cash table.data td { vertical-align: middle; }
.cash td.cash-act .btn.small { min-height: 36px; padding: 0 12px; font-weight: 600; }
.cash table.data tbody td { padding-top: 12px; padding-bottom: 12px; }
.cash table.data td > .muted { font-size: 13px; }
/* Cash in / out (round 3, docs/design/cash/cash-move): Direction as one joined switch across the form, 44 px; the main
   button 48 px filling the row, Cancel as a word. */
.cash .seg.joined.big { display: flex; width: 100%; }
.cash .seg.joined.big .btn { min-height: 44px; padding: 0 16px; font-size: 15px; }
.cash .cash-act-row { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.cash .cash-act-row > .btn.primary.lg { flex: 1; min-height: 48px; justify-content: center; font-size: 15px; }
.cash .cash-opt { color: var(--muted); font-weight: 400; }
/* Collect payment (round 3, docs/design/cash/collect): the customer's figures on a soft box; Overdue in red; *in full* /
   *part* under the amount; invoice numbers fixed-width. */
.cash .cash-form .cash-kv { background: var(--surface-2); border-radius: 8px; padding: 0 12px; }
.cash .cash-red, .cash .cash-red .num { color: var(--danger); }
.cash table.data td.num > small { display: block; font-size: 12px; }

/* Round 3 — Collect payment / Pay supplier (docs/design/cash/collect): the link at the card's top, the tick column,
   the table to the card's edges, *The receipt will say*. */
.cash-pays .link-btn { background: none; border: 0; padding: 4px 0; min-height: 32px; cursor: pointer; font: inherit; font-weight: 600; font-size: 14px; color: var(--link); }
.cash-pays .link-btn:hover { text-decoration: underline; }
.cash-pays > .table-wrap { margin-inline: -16px; margin-bottom: -16px; margin-top: 12px; }
.cash-pays > .table-wrap table.data { border: 0; border-radius: 0; }
.cash-pays table.data th.tick, .cash-pays table.data td.tick { width: 40px; padding-inline-end: 0; }
.cash-pays table.data td.tick input { width: 18px; height: 18px; accent-color: var(--primary); margin: 0; pointer-events: none; }
.cash-pays table.data tbody td { height: 52px; }
.cash-will h2 { margin-bottom: 8px; }
.cash-will .cash-kv dd { font-size: 16px; font-weight: 600; }
.cash-photo .btn { min-height: 40px; font-size: 14px; font-weight: 600; }
.cash-photo-file { font-size: 14px; }
/* Track R (round 3): the phone pass's 44 px floor (look-v3-daily.css) is more specific than the 48 px main buttons drawn
   in docs/design/cash/*-375 and the invoice's fixed bar — keep them 48 px on the phone. */
@media screen and (max-width: 599px) {
  main.content :is(.cash .cash-form .btn.primary:not(.seg *), .cash .stack > div > .btn.primary, .cash-go > .btn.primary, .cash-sticky .btn.primary,
    .cash .cash-act-row > .btn.primary.lg, .phone-stk .btn):not(.pbox-modal *) { min-height: 48px; }
}
/* Track R (round 3, docs/design/cash/cash-move-375): on the phone the main button is fixed above the bottom bar, full width;
   Cancel gives way (the header's menu and the bottom bar lead back). */
@media screen and (max-width: 599px) {
  .cash .cash-act-row { position: fixed; bottom: 64px; inset-inline: 0; z-index: 40; margin: 0; padding: 10px 16px;
    background: var(--surface); border-top: 1px solid var(--border); }
  .cash .cash-act-row > .btn.plain { display: none; }
  .cash .cash-form:has(.cash-act-row) { margin-bottom: 76px; }
}
/* The redesign's look on the real screens (BUILD_PLAN UXR-10 step 1; docs/erp/DESIGN-SYSTEM.md v3; owner approved
   round 3 on 2026-11-10 15:25 UTC): the WEBSITE's colours and fonts (design/site-theme.css, ADR-071) — white header
   with a 1 px rule, petrol-green buttons (#004f4b) and the brand green (#73d1ca) in dark, white cards (12 px) on a
   light grey-green page, 8 px buttons and fields, IBM Plex Sans Arabic + Inter, IBM Plex Mono for part numbers.
   Rules of this file:
   - It sets variables only (plus card corners and the band's rules), on the NexFix look only: under
     data-brand="equipmart" nothing here applies (brand-equipmart.css keeps EquipMart's petrol band, THM-03).
   - Screen only (@media screen): printouts and PDFs keep their own fixed colours and fonts (THM-05).
   - Fonts: the same self-hosted woff2 files brand-equipmart.css declares ('EM Inter', 'EM Plex Arabic', 'EM Plex
     Mono'; SIL OFL 1.1, out/renderer/fonts/LICENSE-*.txt) — never from Google, never a font installed on the PC.
   - The first screens (sign-in, licence key, set-up) keep their dark look (UX-86): --first-* are not touched. */

@media screen {
  :root:not([data-brand='equipmart']) {
    --bg: #f7f9f9;
    --surface: #ffffff;
    --surface-2: #f1f4f5;
    --border: #dce2e4;
    --border-strong: #c2cbce;
    --text: #111111;
    --text-2: #2f3a3d; /* labels and table headings (11.9 : 1) */
    --muted: #5a6669; /* side notes (5.9 : 1 on white) */
    --primary: #004f4b; /* the website's petrol green: buttons, focus, selection (white on it 9.6 : 1) */
    --primary-hover: #1a615d;
    --primary-soft: #e8f6f3;
    --link: #004f4b;
    --on-primary: #f8fdfc;
    --on-primary-2: #b9dcd8;
    --focus-ring: rgb(62 152 147 / 0.3);
    --row-hover: #f1f7f6;
    --row-section: #e9eff0;
    --cell-edit: #fffbe6;
    --brand: #73d1ca;
    --sidebar-active: var(--primary); /* the green underline under the open section */
    --ok: #1e7a4c;
    --ok-soft: #e6f4ec;
    --ok-line: #b7dcc6;
    --warn: #8a5a00;
    --chart-bar: #3e9893;
    --radius: 8px;
    --radius-card: 12px;
    /* The header: white like the website, one 1 px rule under it; text in the page's colours, the main button green. */
    --chrome: var(--surface);
    --chrome-2: var(--surface);
    --sidebar-text: var(--text-2);
    --chrome-strong: var(--text);
    --chrome-muted: var(--muted);
    --chrome-line: var(--border);
    --chrome-hover: var(--surface-2);
    --chrome-hover-2: var(--surface-2);
    --chrome-focus: #3e9893;
    --chrome-field: var(--surface-2);
    --chrome-field-hover: var(--border-strong);
    --chrome-btn-line: var(--border-strong);
    --chrome-primary: var(--primary);
    --chrome-primary-hover: var(--primary-hover);
    --chrome-on-primary: var(--on-primary);
    --chrome-warn-line: var(--warn-line);
    --chrome-warn-bg: var(--warn-soft);
    --chrome-warn-text: var(--warn);
    --chrome-bad-line: var(--danger-line);
    --chrome-bad-bg: var(--danger-soft);
    --chrome-bad-text: var(--danger);
    --chrome-ok: var(--ok);
    --toolbar-text: var(--text);
    --toolbar-line: var(--border);
    --logo-chip: transparent;
    /* Type: Inter for Latin and figures, IBM Plex Sans Arabic for Arabic, IBM Plex Mono for part numbers. */
    --font: 'EM Inter', 'EM Plex Arabic', system-ui, sans-serif;
    --num: 'EM Inter', system-ui, sans-serif;
    --code: 'EM Plex Mono', 'EM Plex Arabic', ui-monospace, monospace;
  }
  :root:not([data-brand='equipmart'])[lang='ar'] {
    --font: 'EM Plex Arabic', 'EM Inter', system-ui, sans-serif;
  }

  /* Dark: the website's neutral near-black; buttons in the light brand green with near-black text (11.4 : 1). */
  :root:not([data-brand='equipmart'])[data-theme='dark'] {
    --bg: #0a0a0a;
    --surface: #141414;
    --surface-2: #1c1c1c;
    --border: #2a2a2a;
    --border-strong: #3a3a3a;
    --text: #f5f5f5;
    --text-2: #d4d4d4;
    --muted: #a3a3a3;
    --primary: #73d1ca;
    --primary-hover: #8fdcd6;
    --primary-soft: #0f2e2c;
    --link: #73d1ca;
    --on-primary: #0a0a0a;
    --on-primary-2: #1f3b39;
    --focus-ring: rgb(67 178 172 / 0.35);
    --row-hover: #1a1f1e;
    --row-section: #1f2423;
    --cell-edit: #1f2a28;
    --ok: #7fd1a5;
    --ok-soft: #12261a;
    --warn: #f5db12;
    --warn-soft: #2a2405;
    --danger: #ff8a80;
    --danger-soft: #2c0f0d;
    --chart-bar: #43b2ac;
    --chrome-focus: #43b2ac;
  }

  /* White cards with 12 px corners, as the website; buttons and fields keep --radius (8 px). */
  :root:not([data-brand='equipmart']) :is(.card, .tile) { border-radius: var(--radius-card); }
  /* The header is one white band: a rule under the menu bar row and under the toolbar row. */
  :root:not([data-brand='equipmart']) .menubar { border-bottom: 1px solid var(--chrome-line); }
  :root:not([data-brand='equipmart']) .mb-btn.here { color: var(--primary); font-weight: 600; }
  :root:not([data-brand='equipmart'])[data-theme='dark'] .mb-btn.here { color: var(--link); }

  /* The A4 sheet of the document viewer is the printout as it prints: it keeps the print fonts (THM-05). */
  :root:not([data-brand='equipmart']) .dv-sheet { --font: 'Segoe UI', Tahoma, 'Geeza Pro', 'Noto Sans Arabic', system-ui, sans-serif;
    --num: 'Segoe UI', Tahoma, system-ui, sans-serif; --code: var(--num); font-family: var(--font); }
}
/* Track R (round-3 match): the header, the Top menu's tabs and the person menu exactly as the approved round-3 prototype
   draws them (src/renderer/src/prototype/proto.css: .top, .tabs, .tab, .me, .user-dd, .seg, .switch). Layout and sizes
   only — colours come from the tokens (look-v3.css; EquipMart's under its brand), so dark mode follows. */
@media screen {
  /* The header: 64 px, white, one rule under it; the mark + NexFix, then the shop and branch, search, New invoice, bell, person. */
  .toolbar { height: 64px; gap: 12px; padding: 0 20px; position: relative; z-index: 45; } /* its menus open over the tabs */
  .tb-brand { gap: 8px; flex: none; }
  .tb-brand svg, .tb-brand img { border-radius: 22%; }
  .tb-wm { font: 600 18px/1 var(--num); letter-spacing: -0.01em; direction: ltr; color: var(--chrome-strong); }
  .tb-shop { min-width: 0; padding-inline-start: 12px; border-inline-start: 1px solid var(--chrome-line); line-height: 1.3; }
  .tb-shop-n, .tb-shop .acc-switch-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; color: var(--chrome-strong); }
  .tb-shop-b, .tb-shop small { display: block; font-size: 12px; color: var(--chrome-muted); }
  :root[lang='ar'] .tb-shop-n, :root[lang='ar'] .tb-shop .acc-switch-name { font-size: 15px; }
  :root[lang='ar'] :is(.tb-shop-b, .tb-shop small) { font-size: 13px; }
  .tb-shop .acc-switch { border: 0; background: none; padding: 0; min-height: 0; height: auto; text-align: start; display: inline-flex; align-items: center; gap: 6px; color: inherit; }
  .tb-shop .acc-switch-t { display: flex; flex-direction: column; min-width: 0; }
  .toolbar .topbar-search { flex: 1; max-width: 520px; height: 42px; gap: 10px; padding: 0 12px; margin: 0; margin-inline-start: auto; border-radius: var(--radius); font-size: 14px; }
  .toolbar .topbar-search .kbd { font-size: 11px; }
  .toolbar .ib.tb-search-btn { display: none; } /* .ib (below) would show it: only under 1024 px (design) */
  .toolbar > .btn.primary.tb-new { min-height: 44px; padding: 0 16px; gap: 6px; border-radius: var(--radius); font-size: 14px; }
  .tb-arrows { display: none; }
  .toolbar .conn-dot { display: none; }
  /* The bell: an icon, the count in a gold dot. */
  .toolbar .ib { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius); background: none; color: inherit; cursor: pointer; position: relative; flex: none; }
  .toolbar .ib:hover { background: var(--chrome-hover-2); }
  .toolbar > .bell > .bell-btn, .toolbar > .bell > .bell-btn.warn { border: 0; background: none; color: var(--chrome-muted); }
  .toolbar > .bell > .bell-btn.bad { border: 0; background: none; color: var(--danger); }
  .bell-btn .bell-count { position: absolute; top: 5px; inset-inline-end: 5px; min-width: 18px; height: 18px; padding: 0 4px; margin: 0; border-radius: 9px;
    background: #c9a227; color: #111; font: 700 11px/18px var(--num); text-align: center; }
  .bell-btn.bad .bell-count { background: var(--danger); color: #fff; }
  /* ONE person button: initial in a soft green circle, name with the role under it, a caret. */
  .user-menu > .me { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 6px; border-radius: var(--radius); color: var(--chrome-strong); cursor: pointer; font: inherit; text-align: start; }
  .user-menu > .me:hover { background: var(--chrome-hover-2); }
  .user-menu .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--link); font-weight: 700; flex: none; }
  .user-menu .me-t { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; line-height: 1.25; }
  .user-menu .me-t small { color: var(--chrome-muted); font-size: 12px; font-weight: 400; }
  .user-menu > .me .caret { font-size: 12px; color: var(--chrome-muted); }
  /* The person menu (the design's .user-dd): header, rows of 44 px with the control at the end. */
  .user-menu-list { min-width: 300px; padding: 6px; border: 1px solid var(--border); top: calc(100% + 4px); color: var(--text); }
  .user-menu > .me { color: var(--text); }
  .toolbar .user-menu > .me { color: var(--chrome-strong); }
  .ud-h { display: flex; flex-direction: column; padding: 6px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 14px; }
  .ud-h span { color: var(--muted); font-size: 12px; }
  .user-menu-list .ud-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; font-size: 14px;
    border-radius: 6px; color: var(--text); text-align: start; width: 100%; }
  .user-menu-list button.ud-row:hover, .user-menu-list a.ud-row:hover { background: var(--surface-2); }
  .ud-extra { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 4px 0; padding: 4px 0; display: flex; flex-direction: column; }
  .ud-extra .ud-row { color: var(--muted); }
  .ud-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
  .user-menu-list .ud-seg button { padding: 4px 10px; font: 600 12px/1.5 var(--font); border: 0; background: none; color: var(--text); cursor: pointer; }
  .user-menu-list .ud-seg button + button { border-inline-start: 1px solid var(--border-strong); }
  .user-menu-list .ud-seg button.on { background: var(--primary); color: var(--on-primary); }
  .ud-langs { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
  .user-menu-list .ud-langs button { border: 0; background: none; padding: 2px 2px; font: inherit; color: var(--muted); cursor: pointer; }
  .user-menu-list .ud-langs button.on { color: var(--text); font-weight: 600; }
  .user-menu-list .ud-switch { flex: none; width: 48px; height: 28px; border-radius: 14px; border: 0; padding: 0; background: var(--border-strong); position: relative; display: inline-block; cursor: pointer; }
  .user-menu-list .ud-switch span { position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
  .user-menu-list .ud-switch.on { background: var(--primary); } .user-menu-list .ud-switch.on span { inset-inline-start: 23px; }

  /* Top position: the tabs under the header (the website's NavTabs) — icon, word, caret; the green rule under where you are. */
  .menubar { height: 46px; gap: 4px; padding: 0 20px; background: var(--surface); }
  .mb-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; margin: 0; padding: 0 12px; border-radius: 0; font-size: 14px; font-weight: 600;
    color: var(--muted); border-bottom: 2px solid transparent; }
  :root[lang='ar'] .mb-btn { font-size: 15px; }
  .mb-btn:hover, .mb-item.open .mb-btn { background: none; color: var(--text); }
  .mb-item.open .mb-btn { background: var(--surface-2); border-radius: 6px 6px 0 0; }
  .mb-btn.here { color: var(--text) !important; box-shadow: none; border-bottom-color: var(--primary); font-weight: 600; }
  .mb-btn.here .ic { color: var(--link); }
  .mb-btn .caret { font-size: 11px; }
  .mb-drop { top: calc(100% + 4px); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
  .mb-drop button { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 6px; font-size: 14px; }
  .mb-drop button.quiet { color: var(--muted); }
  .mb-drop button.cur { background: var(--primary-soft); color: var(--link); font-weight: 600; }
  .mb-drop .mb-group { border-top: 0; margin-top: 0; padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
}
@media screen and (max-width: 1023px) {
  .toolbar .topbar-search { display: none; }
  .toolbar .ib.tb-search-btn { display: inline-grid; margin-inline-start: auto; }
  .toolbar .user-menu > .me :is(.me-t, .caret) { display: none; }
}
@media screen {
  .tb-title { display: none; }
  .drawer-person .user-menu > .me { width: 100%; }
  .drawer-person .user-menu-list { position: fixed; inset-inline: 8px; top: 64px; z-index: 70; min-width: 0; max-width: 360px; max-height: calc(100vh - 80px); overflow: auto; }
  .user-menu-list .ud-row > span:first-child { white-space: nowrap; }
}
@media screen and (max-width: 599px) {
  .toolbar { height: 56px; gap: 2px; padding: 0 6px; }
  .tb-title { display: block; flex: 1; min-width: 0; font-weight: 700; font-size: 18px; padding-inline-start: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .toolbar > .user-menu { display: none; }
  .toolbar .tb-search-btn { margin-inline-start: 0; }
  .bb-new .bb-ic { width: 44px; height: 44px; margin-top: -16px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.18); }
  .tb-shop:not(.shop-host-bar), .tb-wm, .toolbar > .bell { display: none !important; }
  /* Shared server (owner to decide, index.md O8): the shop switcher stays in the phone header, in place of the title. */
  .toolbar .tb-shop.shop-host-bar { flex: 1; min-width: 0; border: 0; padding-inline-start: 4px; }
  .toolbar:has(.shop-host-bar) .tb-title { display: none; }
  .tb-shop.shop-host-bar .acc-switch-name { max-width: 16ch; }
  .tb-brand { display: flex !important; }
}

/* Side menu, Full (the prototype's .side / .m-*): 264 px; Home with the green bar at the start; each section a heading with
   its daily items under it; More (n) folds the rest; Help at the end, under a rule. */
@media screen {
  .shell-body > .side-menu:not(.icons) { width: 264px; }
  .sm-list .sm-item { min-height: 40px; padding: 0 12px; font-weight: 600; font-size: 15px; }
  .sm-list .sm-item.on { background: var(--primary-soft); color: var(--link); font-weight: 700; box-shadow: inset 3px 0 0 var(--primary); }
  [dir='rtl'] .sm-list .sm-item.on { box-shadow: inset -3px 0 0 var(--primary); }
  .sm-sec { margin-top: 10px; }
  .sm-sec-h { display: flex; align-items: center; gap: 10px; padding: 6px 12px; font-weight: 700; font-size: 14px; color: var(--text); }
  .sm-sec-h .ic { color: var(--muted); }
  .sm-list .sm-item.sub { font-weight: 400; padding-inline-start: 42px; min-height: 36px; font-size: 14px; color: var(--text); }
  .sm-list .sm-item.sub.quiet { color: var(--muted); }
  .sm-list .sm-item.sub.on { color: var(--link); font-weight: 700; }
  /* S16: More (n) in green, the chevron right after the words (the design's .m-item.more). */
  .sm-list .sm-item.sub.sm-more-btn { color: var(--link); font-weight: 600; }
  .sm-list .sm-more-btn .grow { flex: none; }
  .sm-fold .grow { text-align: start; }
  .sm-more-h, .sm-list .sm-group { padding: 6px 12px 2px; padding-inline-start: 42px; font-size: 12px; color: var(--muted); font-weight: 600; }
  .sm-list .sm-group { color: #7f650a; }
  :root[data-theme='dark'] .sm-list .sm-group { color: #c9a227; }
  .sm-list .sm-help { margin-top: 16px; border-top: 1px solid var(--border); border-radius: 0; padding-top: 8px; color: var(--link); }
  :root[lang='ar'] .sm-list .sm-item.sub, :root[lang='ar'] .sm-sec-h { font-size: 15px; }
  /* Home and Help as the prototype's .m-item: the body size (16 px, 17 px in Arabic). */
  .sm-list .sm-item:not(.sub) { font-size: 16px; }
  :root[lang='ar'] .sm-list .sm-item:not(.sub) { font-size: 17px; }
  /* The phone / tablet drawer as the prototype's .drawer .m-item: 48 px rows, items 44 px at the body size. */
  .drawer .sm-list .sm-item { min-height: 48px; }
  .drawer .sm-list .sm-item.sub { min-height: 44px; font-size: 16px; }
  :root[lang='ar'] .drawer .sm-list .sm-item.sub { font-size: 17px; }
}

/* Track R run 3 (design proto.css, phone): bottom bar words 12 px semibold; the menu button in the text colour; no key
   hints on buttons (a phone has no keyboard). */
@media screen and (max-width: 599px) {
  .bottom-bar .bb-item { font-size: 12px; font-weight: 600; }
  .toolbar .tb-menu { color: var(--text); }
  .content .btn .kbd { display: none; }
}

/* No login flash (owner 2026-11-11): the shared server's loading frame (quietLoading.tsx) — the round-3 header's outline
   (64 px, white, one rule; 56 px on a phone), the page's grey-green, and the busy line only after 300 ms. */
.quiet-loading { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg, #f7f9f9); }
.quiet-loading .ql-top { height: 64px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px;
  background: var(--surface, #ffffff); border-bottom: 1px solid var(--border, #dce2e4); color: var(--text, #111111); }
.quiet-loading .ql-top svg { border-radius: 22%; }
.quiet-loading .ql-wm { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.quiet-loading .ql-line { opacity: 0; animation: ql-show 0s linear 300ms forwards; }
.quiet-loading .ql-page { flex: 1; }
@keyframes ql-show { to { opacity: 1; } }
@media (max-width: 900px) { .quiet-loading .ql-top { height: 56px; padding: 0 12px; } }
/* Track Q (Phase 3b): on a tablet the shop switcher in the header gives way to the search (it overlapped it at
   768 / 1024 px): it shrinks and its name ends in "…". */
@media screen and (min-width: 600px) and (max-width: 1279px) {
  .toolbar .tb-shop.shop-host-bar { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .toolbar .tb-shop.shop-host-bar .acc-switch { max-width: 100%; min-width: 0; }
  .toolbar .tb-shop.shop-host-bar .acc-switch-name { max-width: 20ch; }
}
/* The daily screens in the approved look (track M2; erp-redesign.md BUILD PHASE step 4; round 3 designs in
   docs/design/redesign/invoice-*.png): sales invoice, quotation, returns, delivery orders, purchase invoice.
   Same flow and keys as before — this file changes the look only.
   - Layout rules for the shared lines foot (.doc-totals) apply on every brand: its markup is shared.
   - Colours, corners and type apply on the NexFix look only (data-brand="equipmart" keeps its own), screen only
     (printouts keep their fixed look, THM-05). Tokens come from look-v3.css / styles.css; nothing new is coloured here.
   - "Counter tool" rules: flat surfaces and thin rules, colour only with meaning, figures tabular and aligned,
     part numbers in the fixed-width face, one primary button. */

@media screen {
  /* The foot of the lines: + Add line and cost · profit on one side, the totals block on the other. */
  .totals-bar.doc-totals { align-items: flex-end; gap: 24px; flex-wrap: wrap; }
  .doc-totals-side { flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; min-width: 0; }
  .doc-totals-side .totals-profit { border-inline-end: 0; padding-inline-end: 0; margin-inline-end: 0; }
  .doc-sum { margin: 0; display: grid; grid-template-columns: auto auto; column-gap: 0; row-gap: 4px; min-width: 260px; }
  .doc-sum > div { display: contents; }
  .doc-sum dt { color: var(--text-2); font-size: 13px; align-self: baseline; padding-inline-end: 32px; }
  .doc-sum dd { margin: 0; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; align-self: baseline; }
  .doc-sum .totals-grand dt { font-weight: 600; color: var(--text); padding-top: 6px; border-top: 1px solid var(--border-strong); }
  .doc-sum .totals-grand dd { font-size: 20px; font-weight: 700; padding-top: 6px; border-top: 1px solid var(--border-strong); }
  .th-riyal { font-weight: 400; color: var(--muted); }
  .th-riyal .riyal { color: var(--text-2); margin: 0; }
  .info-mark svg { vertical-align: -2px; }
  .line-del svg { display: block; }

  /* ---- NexFix look ---- */
  :root:not([data-brand='equipmart']) .doc-screen { --doc-row: 44px; }
  :root:not([data-brand='equipmart']) .doc-screen .page-head h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
  :root:not([data-brand='equipmart']) .doc-screen > .card { border-radius: var(--radius-card, 12px); padding: 18px 20px; }
  :root:not([data-brand='equipmart']) .doc-screen .field > label,
  :root:not([data-brand='equipmart']) .doc-screen .field-label { font-weight: 600; color: var(--text); }

  :root:not([data-brand='equipmart']) .page-head .watch-how { font-size: 14px; font-weight: 600; } /* round-3 "Watch how": a plain green link */
  /* Track R: the lines' foot as the round-3 .grid-foot / .gf-tot (sizes from proto.css). */
  :root:not([data-brand='equipmart']) .doc-screen .doc-sum { column-gap: 24px; row-gap: 2px; min-width: 280px; }
  :root:not([data-brand='equipmart']) .doc-screen .doc-sum dt { font-size: 14px; color: var(--muted); padding-inline-end: 0; }
  :root:not([data-brand='equipmart']) .doc-screen .doc-sum dd { font-size: 16px; }
  :root:not([data-brand='equipmart']) .doc-screen .doc-sum .totals-grand dt { font-size: 16px; font-weight: 700; color: var(--text); }
  :root:not([data-brand='equipmart']) .doc-screen .doc-sum .totals-grand dd { font-size: 22px; color: var(--link); }
  :root:not([data-brand='equipmart']) .doc-screen .doc-totals-side > .btn.small { min-height: 36px; padding: 0 12px; font-size: 14px; font-weight: 600; }
  :root:not([data-brand='equipmart']) .doc-screen .doc-totals-side .f2-hint { font-size: 14px; }
  :root:not([data-brand='equipmart']) .page-head .watch-how { text-decoration: none; }
  :root:not([data-brand='equipmart']) .page-head:has(> .ph-note) { align-items: flex-end; padding-bottom: 0; }
  :root:not([data-brand='equipmart']) .page-head:has(> .ph-note) > h1 { margin-bottom: 22px; }

  /* Track R (I2): the header fields 44 px with 16 px text, as the round-3 invoice draws them. */
  :root:not([data-brand='equipmart']) .doc-screen > .card .field :is(input, select, .input, .select, button.btn) { min-height: 44px; font-size: 16px; }
  :root:not([data-brand='equipmart']) .doc-screen > .card .field > label { font-size: 14px; margin-bottom: 6px; }
  /* Field's own label is the first <span> of <label class="field">: bold, the text colour, as the design's .f-l. */
  :root:not([data-brand='equipmart']) .doc-screen > .card label.field > span:first-child { font-size: 14px; font-weight: 600; color: var(--text); }

  /* Track R (D4): the returns list's "Return from an invoice" box as the design's fields — 44 px, bold label, 44 px button. */
  :root:not([data-brand='equipmart']) .return-find .input { min-height: 44px; font-size: 16px; }
  :root:not([data-brand='equipmart']) .return-find label.field > span:first-child { font-size: 14px; font-weight: 600; color: var(--text); }
  :root:not([data-brand='equipmart']) .return-find .btn { height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; }

  /* Track R (I2): the customer's + as its own square button beside the field (round-3 .btn.sq), not inside it. */
  :root:not([data-brand='equipmart']) .doc-screen > .card .picker.with-add { padding-inline-end: 52px; }
  :root:not([data-brand='equipmart']) .doc-screen > .card .picker.with-add > .input { padding-inline-end: 12px; }
  :root:not([data-brand='equipmart']) .doc-screen > .card .picker-add { inset-inline-end: 0; width: 44px; height: 44px; border-radius: var(--radius); color: var(--text); font-size: 20px; font-weight: 400; }
  :root:not([data-brand='equipmart']) .doc-screen > .card .picker.with-add > .picker-tag { inset-inline-end: 60px; }

  /* The customer line under the customer: short label/value marks; red only for a real problem. */
  :root:not([data-brand='equipmart']) .doc-screen .cust-strip { background: none; border: 0; padding: 0; margin-top: 8px; gap: 8px; align-items: center; font-size: 13px; }
  :root:not([data-brand='equipmart']) .doc-screen .cust-strip.over { background: none; }
  :root:not([data-brand='equipmart']) .doc-screen .cs-mark { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); white-space: nowrap; }
  :root:not([data-brand='equipmart']) .doc-screen .cs-mark strong { color: var(--text); font-weight: 600; }
  :root:not([data-brand='equipmart']) .doc-screen .cs-mark.neg { background: var(--danger-soft); color: var(--danger); }
  :root:not([data-brand='equipmart']) .doc-screen .cs-mark.neg strong { color: var(--danger); }
  :root:not([data-brand='equipmart']) .doc-screen .cs-mark.muted { background: none; padding-inline: 2px; }
  :root:not([data-brand='equipmart']) .doc-screen .cs-link { font-weight: 600; padding: 3px 4px; }
  :root:not([data-brand='equipmart']) .doc-screen .cs-note { flex-basis: 100%; font-size: 12.5px; }

  /* The lines: one white surface with 12 px corners, the totals as its foot. */
  :root:not([data-brand='equipmart']) .doc-screen .doc-lines { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card, 12px); }
  /* No overflow clipping: the part list drops out of the grid. The heading row takes the corners instead. */
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid thead th:first-child { border-start-start-radius: var(--radius-card, 12px); }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid thead th:last-child { border-start-end-radius: var(--radius-card, 12px); }
  :root:not([data-brand='equipmart']) .doc-screen .doc-lines .totals-bar { border-end-start-radius: var(--radius-card, 12px); border-end-end-radius: var(--radius-card, 12px); }
  :root:not([data-brand='equipmart']) .doc-screen .doc-lines > .machine-chip,
  :root:not([data-brand='equipmart']) .doc-screen .doc-lines > :not(table):not(.totals-bar) { margin: 10px 12px 0; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid { background: var(--surface); }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid th { background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--border); border-inline-end: 1px solid var(--border); }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td { height: var(--doc-row); border: 0; border-bottom: 1px solid var(--border); border-inline-end: 1px solid var(--border); }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid :is(th, td):last-child { border-inline-end: 0; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td input,
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td select { height: calc(var(--doc-row) - 1px); padding: 0 8px; font-size: 14px; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td input:focus,
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td select:focus { background: var(--cell-edit); box-shadow: inset 0 0 0 2px var(--primary); border-radius: 6px; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td.ro { background: transparent; color: var(--text); font-size: 14px; padding: 0 8px; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td.ro.neg { color: var(--danger); }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td.idx { color: var(--muted); font-size: 12.5px; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid tbody tr:hover > td:not(.invalid) { background: var(--row-hover); }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid :is(input.part-no, .part-no) { font-family: var(--code); font-size: 13px; letter-spacing: 0; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid input.part-no::placeholder { font-family: var(--font); }
  /* Figures sit on the right in both languages (.num is a left-to-right run); their headings follow them. */
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid th.num { text-align: right; }
  :root:not([data-brand='equipmart']) .doc-screen table.data.doc-grid td { padding: 0 10px; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td.line-net { font-weight: 600; text-align: end; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td input.num { text-align: end; }
  :root:not([data-brand='equipmart']) .doc-screen .part-peek { text-decoration: none; }
  :root:not([data-brand='equipmart']) .doc-screen .part-peek:hover { text-decoration: underline; }
  /* The last price this customer paid, small under the price; one click takes it. */
  :root:not([data-brand='equipmart']) .doc-screen .last-price { color: var(--muted); font-size: 11.5px; padding: 0 8px 3px; }
  :root:not([data-brand='equipmart']) .doc-screen .last-price:hover { color: var(--link); }
  :root:not([data-brand='equipmart']) .doc-screen td:has(> .last-price) input { height: 26px; }
  /* Cost · profit · margin per line (who may see costs): the profit green or red, cost and margin muted under it. */
  :root:not([data-brand='equipmart']) .doc-screen .line-profit strong.pos { color: var(--ok); }
  :root:not([data-brand='equipmart']) .doc-screen .line-profit strong.neg { color: var(--danger); }
  :root:not([data-brand='equipmart']) .doc-screen .line-del { color: var(--muted); }
  :root:not([data-brand='equipmart']) .doc-screen .line-del:hover { color: var(--danger); background: var(--danger-soft); }

  :root:not([data-brand='equipmart']) .doc-screen .doc-lines .totals-bar { border: 0; border-top: 0; background: var(--surface); padding: 16px 20px 18px; }
  :root:not([data-brand='equipmart']) .doc-screen .totals-profit { color: var(--text-2); font-size: 13px; }
  :root:not([data-brand='equipmart']) .doc-screen .doc-sum .totals-grand dd { font-size: 22px; color: var(--primary); }

  /* The actions: no box — who entered it on one side, Save and the one primary Finish on the other. */
  :root:not([data-brand='equipmart']) .doc-screen > .card.doc-actions { background: none; border: 0; padding: 4px 0 0; }
  :root:not([data-brand='equipmart']) .doc-screen .doc-actions .voucher-meta { color: var(--text-2); }
  :root:not([data-brand='equipmart']) .doc-screen .doc-actions .btn { height: 44px; padding: 0 18px; font-size: 15px; font-weight: 600; }
  :root:not([data-brand='equipmart']) .doc-screen .doc-actions .btn.primary.big { min-width: 120px; justify-content: center; }
}

@media screen and (max-width: 900px) {
  .doc-sum { min-width: 0; flex: 1 1 100%; }
}

/* Phone (approved addition, audit H-02): the lines grid does not fit at 375 px, so each line becomes rows separated by
   a rule — part number and ✕, the name, then quantity · price · net, then stock · unit · discount and the extra
   columns (profit, …), each with its small label. Same cells, same inputs, same Enter order; desktop unchanged. */
@media screen and (max-width: 599px) {
  .doc-screen table.doc-grid thead { display: none; }
  .doc-screen table.doc-grid, .doc-screen table.doc-grid tbody { display: block; }
  .doc-screen table.doc-grid tr.line-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .doc-screen table.doc-grid tr.line-row > td { display: block; flex: 1 1 calc(33.333% - 8px); min-width: 0; width: auto !important; height: auto; border: 0 !important; padding: 0; background: none; }
  .doc-screen table.doc-grid tr.line-row > td.c-no, .doc-screen table.doc-grid tr.line-row > td.c-vat { display: none; }
  .doc-screen table.doc-grid tr.line-row > td.c-part { flex: 1 1 calc(100% - 44px); order: 0; }
  .doc-screen table.doc-grid tr.line-row > td.c-part .picker { width: 100%; }
  .doc-screen table.doc-grid tr.line-row > td.c-del { flex: 0 0 32px; order: 1; align-self: center; }
  .doc-screen table.doc-grid tr.line-row > td.c-name { flex-basis: 100%; order: 2; padding: 0 2px; white-space: normal; }
  .doc-screen table.doc-grid tr.line-row > td:is(.c-qty, .c-price, .c-net) { order: 3; }
  .doc-screen table.doc-grid tr.line-row > td:is(.c-stock, .c-unit, .c-discount, .c-unitCost) { order: 4; }
  .doc-screen table.doc-grid tr.line-row > td.c-extra { order: 5; flex-basis: 100%; }
  .doc-screen table.doc-grid tr.line-row > td.c-extra .line-profit { flex-direction: row; gap: 8px; align-items: baseline; }
  .doc-screen table.doc-grid tr.line-row > td[data-label]::before { content: attr(data-label); display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; padding: 0 2px 2px; }
  .doc-screen table.doc-grid tr.line-row > td.c-part input { border: 1px solid var(--border-strong); border-radius: var(--radius); height: 40px; }
  .doc-screen table.doc-grid tr.line-row > td:is(.c-qty, .c-price, .c-discount, .c-unitCost, .c-unit) :is(input, select) { border: 1px solid var(--border); border-radius: var(--radius); height: 40px; }
  .doc-screen table.doc-grid tr.line-row > td.ro.num { text-align: start; padding: 0 2px; line-height: 40px; }
  .doc-screen table.doc-grid tr.line-row > td.ro.num::before { line-height: normal; }
  .doc-screen table.doc-grid tr.line-row > td.c-net { font-weight: 700; }
  .doc-screen table.doc-grid tr:is(.row-error, .row-warn, .row-note) { display: block; }
  .doc-screen table.doc-grid tr:is(.row-error, .row-warn, .row-note) > td.idx { display: none; }
  .doc-screen table.doc-grid tr:is(.row-error, .row-warn, .row-note) > td { display: block; }
  /* I7 (round 3, invoice-375): a line with no part yet is one "Part no. or name" box; the rest shows once a part is in. */
  .doc-screen table.doc-grid tr.line-row.empty > td:not(.c-part) { display: none; }
  .doc-screen table.doc-grid tr.line-row.empty > td.c-part { flex-basis: 100%; }
  .doc-screen .doc-lines .totals-bar { padding: 12px; }
  .doc-screen .doc-actions .row { flex-wrap: wrap; }
  .doc-screen .f2-hint { display: none; }
  /* Phone (round-3 invoice-375): the title is in the header; the note on its own line, then the buttons; no Watch how. */
  .doc-screen .page-head > h1 { display: none; }
  .page-head > .ph-note { position: static; flex-basis: 100%; white-space: normal; }
  :root:not([data-brand='equipmart']) .page-head:has(> .ph-note) > h1 { margin-bottom: 0; }
  .doc-screen .page-head .watch-how { display: none; } /* no F2 key on a phone (the design hides it there) */
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid tbody tr.line-row:hover > td:not(.invalid) { background: none; }
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid tr.line-row > td.ro { background: none; }
}

/* I7: the invoice's phone bar (Sales.tsx .phone-stk) — fixed above the bottom bar under 600 px; hidden elsewhere. */
.phone-stk { display: none; }
@media screen and (max-width: 599px) {
  .phone-stk { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: fixed; bottom: 64px; inset-inline: 0; z-index: 40;
    padding: 10px 16px; background: var(--surface); border-top: 1px solid var(--border); }
  .phone-stk > div { display: flex; flex-direction: column; line-height: 1.2; }
  .phone-stk .stk-l { color: var(--muted); font-size: 12px; }
  .phone-stk .num { font-size: 20px; font-weight: 700; }
  .phone-stk .stk-b { display: flex; gap: 8px; }
  .phone-stk .btn { min-height: 48px; padding: 0 20px; }
  .doc-actions.has-phone-stk .stk-dup { display: none; }
  .doc-screen:has(.phone-stk) { padding-bottom: 76px; }
  /* The total is in the bar; the page keeps Before discount and VAT as label · value rows across the card. */
  .doc-screen:has(.phone-stk) .doc-sum .totals-grand { display: none; }
  .doc-screen:has(.phone-stk) .doc-sum { width: 100%; display: flex; flex-direction: column; gap: 4px; }
  .doc-screen:has(.phone-stk) .doc-sum dd { font-weight: 700; }
  .doc-screen:has(.phone-stk) .doc-sum > div { display: flex; justify-content: space-between; }
  /* The empty line's one box: 48 px, 16 px words (design invoice-375). */
  .doc-screen table.doc-grid tr.line-row.empty > td.c-part input { height: 48px; font-size: 16px; }
  /* No key hints on a phone (no keyboard): the head's New F4. */
  .doc-screen .page-head .kbd { display: none; }
}

/* Track R (round-3 PageHead): every screen's title 22 px bold (24 px Arabic), as the design's .page-h h1. */
@media screen {
  :root:not([data-brand='equipmart']) main.content .page-head > h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
  :root:not([data-brand='equipmart'])[lang='ar'] main.content .page-head > h1 { font-size: 24px; }
}
/* Phone (round 3): the title is in the header, so the page's own title and Watch how are hidden (as on the invoice);
   the returns box stacks; an empty list's words stay in view when its table scrolls sideways. */
@media screen and (max-width: 599px) {
  :root:not([data-brand='equipmart']) main.content .page-head > h1:not(:only-child) { display: none; }
  :root:not([data-brand='equipmart']) main.content .page-head .watch-how { display: none; }
  :root:not([data-brand='equipmart']) .return-find { flex-direction: column; align-items: stretch; }
  td .f3-empty { position: sticky; inset-inline-start: 0; max-width: calc(100vw - 64px); }
}
/* Track R (I6): the line's unit reads as text (*Piece*), as the round-3 invoice draws it; the list's arrow and edge show
   only on hover or focus (a part with packing units still opens its list — the flow stays). */
@media screen and (min-width: 600px) {
  :root:not([data-brand='equipmart']) .doc-screen table.doc-grid td.c-unit select:not(:hover):not(:focus) { appearance: none; background-image: none; border-color: transparent; box-shadow: none; }
}
/* Track Q (Phase 2, web app on a phone): on the shared server the phone header holds the shop switcher in place of the
   screen's title (O8), so the screen keeps its own title — otherwise no screen says what it is. */
@media screen and (max-width: 599px) {
  body:has(.toolbar .shop-host-bar) main.content .page-head > h1 { display: block !important; }
}
/* Track Q (Phase 3b, owner 2026-11-11 "not responsive"): on a phone every control a thumb uses is at least 44 px and no
   words are smaller than 14 px — buttons, boxes and lists in the screens, the date chips, the tabs and the header's
   buttons. Inputs inside a table (the invoice lines) keep their row height; the look is otherwise unchanged. */
@media screen and (max-width: 599px) {
  main.content :is(.btn, .tab, select.select, select.input, input.input:not(table input), textarea.input):not(.linklike):not(.pbox-modal *) { min-height: 44px; }
  main.content .btn.small:not(.pbox-modal *), :root:not([data-brand='equipmart']) main.content .doc-screen .doc-totals-side > .btn.small { min-height: 44px !important; min-width: 44px; }
  main.content .chip:not(.pbox-modal *) { min-height: 44px; padding: 6px 14px; font-size: 14px; }
  main.content .more-details-toggle { min-height: 44px; }
  main.content .chip-row, main.content .chips { gap: 8px; }
  main.content :is(.linklike, .ph-note a, .ph-note button, .card a[href]):not(.pbox-modal *) { min-height: 44px; display: inline-flex; align-items: center; }
  .toolbar :is(.tb-arrow, .ib) { min-width: 44px; min-height: 44px; }
  main.content :is(label.field > span, th, small, .f3-hint, .cs-mark, .badge, dt, .stk-l, .oh-chip, .muted, .btn.small, .cs-link,
    .loc-tag, .part-no, .totals-profit, .totals-profit *, .fs-sample, .oh-bar-c span, .voucher-meta, .voucher-meta *):not(.pbox-modal *) { font-size: 14px !important; }
  main.content .picker-add { width: 44px; height: 44px; }
  main.content .picker.with-add .input { padding-inline-end: 52px; }
}
/* Track M3 (erp-redesign.md step 5, UXR-07; owner approved round 3 on 2026-11-10): the forms and setup screens in
   round 1's layout with the website's look — New customer as a short form (name + mobile + two switches), Add a
   person by what they do (role presets), and empty lists that say what to do next. Variables only from look-v3.css /
   styles.css, so EquipMart's look and the dark mode follow by themselves. Flat: rules and spacing, no shadows, no
   pills, no coloured rails ("Counter tool"). Screen and print alike are harmless here (dialogs never print). */

/* A switch with a title and one plain line under it, the fields it opens below it. Round 3 (track R, F1): as the
   prototype's .form-sec / .switch-row - a white card, the words first and the 48 x 28 switch at the end. */
.f3-sec { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.f3-switch { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; cursor: pointer; }
.f3-switch .switch-track { width: 48px; height: 28px; border-radius: 14px; }
.f3-switch .switch-track::after { top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; }
.f3-switch .switch input:checked + .switch-track::after { inset-inline-start: 23px; }
.f3-switch-text { display: flex; flex-direction: column; gap: 2px; }
.f3-switch-text strong { font-size: 16px; font-weight: 600; color: var(--text); }
.f3-switch-text small { color: var(--muted); font-size: 14px; }
.f3-open { display: flex; flex-direction: column; gap: 10px; }
.f3-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 560px; }
/* F2: Name, then Mobile, one under the other (the prototype's .form, 560 px), 44 px boxes. */
.f3-quick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 560px; }
.f3-quick .input { min-height: 44px; font-size: 16px; }
/* Round 3 (F7): the quick fields' labels as the design's — 14 px semibold in the text colour. */
.f3-quick .field > span:first-child { font-size: 14px; font-weight: 600; color: var(--text); }
.f3-quick ~ .f3-sec { max-width: 560px; }
.f3-note { color: var(--muted); font-size: 0.86em; margin: 0; }
.f3-hint { color: var(--muted); font-size: 0.86em; margin: 2px 0; font-weight: 400; }

/* Add a person: "What do they do in the shop?" — round 3 (track R, F5, prototype .roles / .role-o): one card per role
   with 8 px between, 12 px corners; the chosen one soft green with the brand green edge. */
.f3-roles { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.f3-roles legend { font-weight: 600; color: var(--text); padding: 0; margin-bottom: 8px; }
.f3-role { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); }
.f3-role:hover { background: var(--row-hover, var(--surface-2)); }
.f3-role.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.f3-role input { width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--primary); }
.f3-role-text { display: flex; flex-direction: column; gap: 2px; }
.f3-role-text strong { font-size: 16px; font-weight: 600; color: var(--text); }
.f3-role-text small { font-size: 14px; color: var(--muted); }

/* Settings > Modules (F3, prototype Modules): the lead line, the switches in one card with a rule between, "Always on"
   as a second card with its title. */
.f3-modules { display: flex; flex-direction: column; gap: 24px; max-width: 560px; }
.f3-modules .f3-lead { color: var(--muted); font-size: 16px; margin: 0; }
.f3-modules .f3-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 12px 16px; }
.f3-modules .f3-card .f3-sec { border: 0; border-radius: 0; padding: 6px 0; background: none; }
.f3-modules .f3-card .f3-sec + .f3-sec { border-top: 1px solid var(--border); }
.f3-modules .f3-card h3 { font-size: 18px; font-weight: 600; margin: 4px 0 12px; }
.f3-modules .f3-plain { gap: 8px; font-size: 16px; }
.f3-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.f3-plain li { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.f3-plain svg, .f3-ok svg { color: var(--ok); flex: none; }

/* An empty list: why, and what to do next (Q6). One outline icon, a heading, one line, the actions as words. */
.f3-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--text-2); }
.f3-empty svg { color: var(--muted); }
/* L1 (round 3, prototype .empty-ic): the icon in an 80 px soft green circle; the title at the title size. */
.f3-empty .f3-empty-ic { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 8px; background: var(--primary-soft); }
.f3-empty .f3-empty-ic svg { color: var(--link); }
.f3-empty h2 { margin: 4px 0 0; font-size: 22px; font-weight: 700; color: var(--text); }
.f3-empty p { margin: 0; max-width: 520px; color: var(--muted); }
.f3-empty .f3-empty-act { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
/* Round 3 (L3): the design's words at 16 px (17 px Arabic) with room, buttons at the control height (44 px) with the + icon. */
.f3-empty p { font-size: 16px; line-height: 1.6; }
:root[lang='ar'] .f3-empty p { font-size: 17px; }
.f3-empty .f3-empty-act .btn { min-height: 44px; height: auto; padding: 0 16px; font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
/* An empty list (nothing made yet) is the empty state alone on the page, no table frame (L3). */
.f3-empty.alone { padding: 40px 16px; }
.f3-empty .f3-empty-act .btn svg { color: currentColor; }

@media (max-width: 600px) {
  .f3-quick, .f3-pair { grid-template-columns: minmax(0, 1fr); }
  .f3-open { padding-inline-start: 0; }
}

/* ---- Step 5b: the account screens as the next page of nexfixksa.com (owner 17:30 / 17:45 UTC). The website's white
   page, its top bar and footer, the brand green main button (never black), the logo once. Light by default; dark only
   in dark mode, with the website's near-black and the light brand green. Website tokens: design/site-theme.css. */
.site-page { --site-bg: #ffffff; --site-fg: #111111; --site-muted: #5a6669; --site-line: #e5e7e8; --site-green: #004f4b; --site-on-green: #f8fdfc;
  --site-green-hover: #1a615d; --site-gold: #7f650a; --site-card: #ffffff;
  min-height: 100vh; display: flex; flex-direction: column; background: var(--site-bg); color: var(--site-fg); }
:root[data-theme='dark'] .site-page { --site-bg: #0a0a0a; --site-fg: #f5f5f5; --site-muted: #a3a3a3; --site-line: #2a2a2a; --site-green: #73d1ca; --site-on-green: #0a0a0a;
  --site-green-hover: #8fdcd6; --site-gold: #c9a227; --site-card: #141414; }
.site-page .btn.primary { background: var(--site-green); border-color: var(--site-green); color: var(--site-on-green); }
.site-page .btn.primary:hover:not(:disabled) { background: var(--site-green-hover); border-color: var(--site-green-hover); }
.site-page a:not(.btn):not(.site-logo) { color: var(--site-green); }
.site-top { position: sticky; top: 0; z-index: 20; background: var(--site-bg); border-bottom: 1px solid var(--site-line); }
.site-top-in, .site-foot-in { max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.site-top-in { display: flex; align-items: center; gap: 20px; min-height: 64px; }
.site-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--site-fg); }
.site-logo .wm-nex { color: var(--site-fg); }
.site-logo .wm-fix { color: var(--site-gold); }
.site-nav { display: flex; gap: 20px; }
.site-page .site-nav a, .site-page .site-foot-links a { color: var(--site-fg); text-decoration: none; font-weight: 500; }
.site-page .site-nav a:hover, .site-page .site-foot-links a:hover { color: var(--site-green); }
.site-spacer { flex: 1; }
.site-lang { background: none; border: 1px solid var(--site-line); border-radius: 8px; color: var(--site-fg); font: inherit; padding: 6px 12px; min-height: 36px; cursor: pointer; }
.site-lang:hover { border-color: var(--site-muted); }
.site-page a.site-wa { display: inline-flex; align-items: center; gap: 6px; color: var(--site-fg); text-decoration: none; border: 1px solid var(--site-line); border-radius: 8px; padding: 6px 12px; min-height: 36px; }
.site-main { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 48px 16px 64px; }
.site-box { width: min(480px, 100%); display: flex; flex-direction: column; gap: 12px; }
.site-box.wide { width: min(640px, 100%); }
.site-company { font-size: 20px; font-weight: 700; }
/* The form card on the white page: a thin rule, no shadow, no coloured top band, no logo of its own. */
.site-page .auth-card { width: 100%; background: var(--site-card); color: var(--site-fg); border: 1px solid var(--site-line); border-top: 1px solid var(--site-line);
  border-radius: 12px; box-shadow: none; padding: 28px; }
.site-page .acc-auth .acc-lang { display: none; } /* the language is in the top bar */
.site-foot { border-top: 1px solid var(--site-line); background: var(--site-bg); color: var(--site-muted); font-size: 14px; }
.site-foot-in { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; padding-bottom: 24px; }
.site-foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-foot-line { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.site-page .site-foot-line a { color: var(--site-muted); text-decoration: none; }
/* Signed-in account pages (Plan & payments, users, security): the same bar holds the shop switcher and account menu. */
.site-page .acc-main { max-width: 960px; padding: 32px 16px 48px; }
.site-page .acc-card { background: var(--site-card); border-color: var(--site-line); }
.site-page .acc-plans .featured { border-color: var(--site-green); box-shadow: 0 0 0 1px var(--site-green); }
.site-page .acc-seg button.on { background: var(--site-green); color: var(--site-on-green); }
@media (max-width: 760px) {
  .site-nav, .site-wa-text { display: none; }
  .site-top-in { gap: 10px; min-height: 56px; }
  .site-main { padding: 24px 16px 40px; }
  .site-page .auth-card { padding: 24px 16px; }
}
:root[lang='ar'] .f3-empty h2 { font-size: 24px; }
/* Track Q (Phase 3b): signed in on a tablet (761–1100 px) the bar holds the shop switcher, the person and the language
   too — the website's links and the WhatsApp word give way (still in the footer), so the page never scrolls sideways. */
@media (max-width: 1100px) {
  .site-top-in:has(> .acc-menu) { gap: 12px; }
  .site-top-in:has(> .acc-menu) :is(.site-nav, .site-wa-text) { display: none; }
  .site-top-in:has(> .acc-menu) .acc-me :is(.me-t, .caret) { display: none; }
}
/* Track O (PUR-*) — "Counter tool" (erp-tracks.md, Visual direction v2): flat, thin rules, tables, fixed-width part numbers,
   aligned amounts, colour only with meaning. Existing tokens only. */
.pur-note { padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pur-part { font-family: Consolas, Menlo, monospace; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.pur-num { font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.pur-warn { color: var(--warn); }
.pur-warn::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-inline-end: 6px; vertical-align: middle; }
.pur-section { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.pur-section > h2 { font-size: 15px; margin: 0 0 8px; }
.pur-steps { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.pur-steps li[aria-current='step'] { color: inherit; font-weight: 600; }
.pur-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
.pur-qty { width: 84px; }
.pur-phone-only { display: none; }
@media (max-width: 700px) {
  .pur-form { grid-template-columns: minmax(0, 1fr); }
  .pur-hide-phone { display: none; }
  .pur-phone-only { display: block; }
  .pur-table td, .pur-table th { padding-inline: 6px; }
}
.pur-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
@media (max-width: 700px) { .pur-actions > .btn.primary { flex: 1 1 100%; min-height: 44px; } }
.pur-sub { display: block; white-space: normal; font-size: 12px; }
.pur-sub.pur-phone-only { display: none; }
@media (max-width: 700px) { .pur-sub.pur-phone-only { display: block; } }

/* PUR-09/10: pay in currency */
.pur-words { padding: 10px 12px; border-radius: 8px; background: var(--surface-2, #f4f6f5); line-height: 1.6; }
.pur-advance { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line, #e3e6e4); }
.pur-advance .muted { flex-basis: 100%; }

/* PUR-07: landed-cost sheet — every column shows; on the phone the table scrolls inside its box, never the page */
.pur-sheet .pur-section { overflow-x: auto; }
.pur-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; margin: 8px 0; }
.pur-facts dt { font-size: 12px; color: var(--muted, #666); }
.pur-facts dd { margin: 0; }
@media print { .pur-sheet .pur-section { overflow: visible; } .pur-sheet .pur-table { font-size: 10pt; } }
/* MT-40 track B: the shared server's account screens. Uses the renderer's tokens (styles.css, THM-01..05). */
.acc-wide { width: 100%; justify-content: center; }
.acc-auth h1 { margin: 0; font-size: 22px; }
.acc-auth-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acc-lang { flex: none; }
.acc-google { display: inline-flex; align-items: center; gap: 10px; height: 44px; text-decoration: none; color: var(--text); }
.acc-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.acc-or::before, .acc-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.acc-code-boxes { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 360px; direction: ltr; }
.acc-code-box { height: 54px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-size: 26px; font-variant-numeric: tabular-nums; color: var(--text); }
.acc-code-box.active { border-color: var(--link); box-shadow: 0 0 0 3px var(--focus-ring); }
.acc-code-boxes.invalid .acc-code-box { border-color: var(--danger); }
/* The real input sits over the boxes: taps, paste and autofill land in it; its own text and caret are hidden. */
.acc-code-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.011; font-size: 16px; border: 0; background: transparent; color: transparent; caret-color: transparent; letter-spacing: 0; cursor: text; }
.acc-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.acc-prefix { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); }
.acc-prefix span { padding: 0 6px 0 10px; color: var(--muted); white-space: nowrap; }
.acc-prefix input { border: 0; flex: 1; min-width: 0; }
.acc-ok { color: var(--ok); }
.acc-status { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--info-soft); color: var(--info-text); }
.acc-status.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.acc-status.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.acc-status.error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }

.acc-page { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
.acc-top { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
.acc-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.acc-spacer { flex: 1; }
.acc-main { width: 100%; max-width: 920px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.acc-h1 { font-size: 22px; margin: 4px 0; }
.acc-foot { text-align: center; padding: 16px; font-size: 13px; }
.acc-menu { position: relative; }
.acc-menu-list { position: absolute; inset-inline-start: 0; top: calc(100% + 4px); min-width: 240px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / 0.14); padding: 6px; display: flex; flex-direction: column; z-index: 30; }
.acc-menu-list.end { inset-inline-start: auto; inset-inline-end: 0; }
.acc-menu-list > a, .acc-menu-list > button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px; border-radius: 6px; text-decoration: none; color: var(--text); background: none; border: 0; text-align: start; font: inherit; cursor: pointer; min-height: 40px; justify-content: center; }
.acc-menu-list > a:hover, .acc-menu-list > button:hover, .acc-menu-list > a.current { background: var(--surface-2); }
.acc-menu-who { display: flex; flex-direction: column; padding: 8px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.acc-switch-name { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.acc-avatar { width: 36px; height: 36px; border-radius: 50%; padding: 0; justify-content: center; font-weight: 700; }
/* Round 3 (track R, S6/S7): the account pages' ONE person button as the ERP's — initial in a soft green circle, name with
   the role under it, a caret; the menu opens with the name and role · shop. */
.acc-me { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 6px; border-radius: 8px; color: inherit; cursor: pointer; font: inherit; text-align: start; min-width: 0; }
.acc-me:hover { background: var(--surface-2); }
.acc-me .av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--link); font-weight: 700; flex: none; }
.acc-me .me-t { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; line-height: 1.25; min-width: 0; }
.acc-me .me-t > span, .acc-me .me-t small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22ch; }
.acc-me .me-t small { color: var(--text-2); font-size: 12px; font-weight: 400; }
.acc-me .caret { font-size: 12px; color: var(--text-2); }
@media (max-width: 760px) {
  .acc-me .me-t, .acc-me .caret { display: none; }
  .site-top-in > .acc-menu .acc-switch-name { max-width: 26vw; }
  .site-top-in:has(> .acc-menu) .wordmark { display: none; } /* signed in on a phone: the mark alone, room for the shop */
  .site-top-in > .acc-menu ~ .site-wa { display: none; } /* signed in on a phone: WhatsApp stays in the footer */
  .site-top-in { min-width: 0; }
  .site-top-in .site-logo { flex: none; }
}
@media (max-width: 420px) { .site-top-in > .acc-menu ~ .site-lang { padding: 6px 8px; } }
.acc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.acc-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-decoration: none; }
a.acc-card:hover { border-color: var(--border-strong); }
.acc-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.acc-badge { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); }
.acc-badge.state-active { background: var(--ok-soft); color: var(--ok); }
.acc-badge.state-trial, .acc-badge.state-trial_ended, .acc-badge.state-past_due { background: var(--warn-soft); color: var(--warn); }
.acc-badge.state-read_only, .acc-badge.state-suspended, .acc-badge.state-cancelled { background: var(--danger-soft); color: var(--danger); }
.acc-dialog-back { position: fixed; inset: 0; background: rgb(0 0 0 / 0.4); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.acc-dialog { background: var(--surface); border-radius: 12px; padding: 20px; width: 100%; max-width: 380px; }
.acc-dialog h2 { margin: 0; font-size: 19px; }
.acc-copy { flex: none; }
@media (max-width: 520px) {
  .acc-top .wordmark { display: none; }
  .acc-main { padding: 12px; }
}
.acc-top .wm-nex { color: var(--text); }
.acc-add { align-self: flex-start; }
.acc-auth .acc-lang { height: 30px; }
.acc-h2 { font-size: 17px; margin: 0; }
.acc-h3 { font-size: 15px; margin: 6px 0 0; }
.acc-grid2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.acc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.acc-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.acc-list-row:first-child { border-top: 0; }
.acc-who { display: flex; flex-direction: column; flex: 1; min-width: 160px; overflow-wrap: anywhere; }
.acc-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px; list-style: none; padding: 0; margin: 0; font-size: 17px; }
.acc-steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 12px; }
.acc-steps > li > .stack { align-items: flex-start; margin-top: 4px; }
.acc-qr { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px; align-self: flex-start; }
.acc-key { font-size: 16px; letter-spacing: 0.05em; padding: 6px 8px; background: var(--surface-2); border-radius: 6px; }
.acc-phone-only { display: none; align-self: flex-start; }
@media (max-width: 520px) {
  .acc-grid2 { grid-template-columns: 1fr; }
  .acc-phone-only { display: inline-flex; }
  .acc-qr { display: none; }
}
.acc-center { align-items: center; }
.acc-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.acc-seg button { border: 0; background: none; padding: 8px 12px; font: inherit; color: var(--text); cursor: pointer; min-height: 38px; }
.acc-seg button.on { background: var(--primary); color: var(--on-primary); }
.acc-plans .featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.acc-plan-name { font-size: 17px; }
.acc-price { font-size: 22px; font-weight: 700; }
.acc-feats { margin: 0; padding-inline-start: 18px; color: var(--text-2); }
.acc-total { font-weight: 700; }
.acc-bank { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.acc-bank-row dd { margin: 2px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.acc-mono { font-family: ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.acc-cards-soon { padding: 10px 14px; border: 1px dashed var(--border-strong); border-radius: 8px; }
.acc-grid2.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .acc-grid2.even { grid-template-columns: 1fr; } }
.acc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.acc-tabs a { padding: 8px 12px; text-decoration: none; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.acc-tabs a[aria-current='page'] { color: var(--text); border-bottom-color: var(--primary); font-weight: 600; }
.acc-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.acc-tile { align-items: flex-start; }
.acc-tile.warn { border-color: var(--warn-line); background: var(--warn-soft); }
.acc-tile-n { font-size: 26px; font-weight: 700; }
.acc-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.acc-facts dt { color: var(--text-2); }
.acc-facts dd { margin: 0; overflow-wrap: anywhere; }
.acc-badge.health-ok { background: var(--ok-soft); color: var(--ok); }
.acc-badge.health-warning { background: var(--warn-soft); color: var(--warn); }
.acc-badge.health-error { background: var(--danger-soft); color: var(--danger); }
.acc-pay-form { border-color: var(--primary); }
/* Contrast (axe, WCAG AA): coloured backgrounds keep their tint and edge; the text stays the full text colour. */
.acc-top .wm-fix { color: var(--text-2); }
/* Round 3 (track R): no coloured side rails — a flat line, the text in the text colour, the tone as a small dot. */
.acc-status, .acc-status.ok, .acc-status.warn, .acc-status.error { color: var(--text); border-color: var(--border); background: var(--surface-2); display: flex; align-items: baseline; gap: 8px; }
.acc-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); transform: translateY(-1px); }
.acc-status.ok::before { background: var(--ok); }
.acc-status.warn::before { background: var(--warn); }
.acc-status.error::before { background: var(--danger); }
.acc-status.error { border-color: var(--danger); }
.acc-badge[class*='state-'], .acc-badge[class*='health-'] { color: var(--text); }

/* The shop host (contract §1.5): the shop's name in the ERP's header is the switcher (round 3, look-v3-shell.css). */
.shop-host-bar { display: flex; align-items: center; gap: 6px; }
.shop-host-bar .acc-switch-name { unicode-bidi: plaintext; }
.toolbar .shop-host-bar .acc-menu-list { color: var(--text); }
.acc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Forms pass (owner 10 Nov): 44 px targets and 16 px input text (no iOS zoom) on the account screens. */
.acc-auth .input, .acc-main .input, .acc-main .select, .acc-auth .select, .acc-prefix input { height: 44px; font-size: 16px; }
.acc-auth .btn.primary, .acc-auth .acc-google { min-height: 44px; font-size: 16px; }
.acc-auth .linklike { min-height: 44px; padding-inline: 0; text-align: start; }
.acc-auth > .linklike, .acc-auth .field > .linklike { align-self: flex-start; }
.acc-legal { margin: 0; text-align: start; }

/* Layout and alignment (owner 10 Nov), 4/8 px grid: one start edge (logical properties, mirrors in Arabic); label →
 * field 8 px; every field keeps a 20 px spot under it for its error, so nothing jumps when one appears; 16 px between
 * blocks; one control height (44 px), one radius. The card is 480 px on desktop, full width minus 16 px on phones. */
.form-box:has(.acc-auth) { width: min(480px, 100%); }
.auth-card.acc-auth { gap: 16px; text-align: start; }
.form-side .auth-card.acc-auth .input, .form-side .auth-card.acc-auth .btn.primary, .form-side .auth-card.acc-auth .acc-google { height: 44px; min-height: 44px; font-size: 16px; }
.acc-auth .field, .acc-form .field { gap: 8px; }
.acc-auth .field > span, .acc-form .field > span { font-size: 14px; }
.acc-auth .field:not(.invalid), .acc-form .field:not(.invalid) { padding-bottom: 20px; }
.acc-auth .field-error, .acc-form .field-error { margin: -4px 0 0; min-height: 16px; line-height: 16px; font-size: 13px; }
.acc-auth .btn, .acc-auth .input, .acc-auth .acc-code-box { border-radius: var(--radius); }
.acc-auth .acc-row { justify-content: flex-start; column-gap: 24px; }
@media (max-width: 520px) { .form-side .auth-card.acc-auth { padding: 24px 16px; } }

/* Invite staff (forms pass): email + role on one row, "Add another", one button. Phone: email on its own line. */
.acc-form { gap: 16px; }
.acc-form > * { max-width: 560px; width: 100%; }
.acc-form > .acc-add-row { width: auto; }
.acc-invite-head, .acc-invite-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px 44px; column-gap: 8px; align-items: center; }
.acc-invite-head { font-size: 14px; color: var(--text-2); margin-bottom: -8px; }
.acc-invite-row { row-gap: 4px; }
.acc-invite-row .input, .acc-invite-row .select { height: 44px; font-size: 16px; }
.acc-invite-x { width: 44px; height: 44px; justify-content: center; font-size: 20px; padding: 0; }
.acc-invite-err { grid-column: 1 / -1; margin: 0; min-height: 16px; line-height: 16px; font-size: 13px; }
.acc-add-row { align-self: flex-start; min-height: 44px; }
.acc-invite-lbl { display: none; font-size: 14px; color: var(--text-2); }
.acc-actions { display: flex; justify-content: flex-start; }
.acc-actions .btn.primary { min-height: 44px; font-size: 16px; padding-inline: 24px; }
@media (max-width: 520px) {
  .acc-invite-head { display: none; }
  .acc-invite-row { grid-template-columns: auto minmax(0, 1fr) 44px; row-gap: 8px; }
  .acc-invite-lbl { display: block; }
  .acc-invite-lbl:first-child, .acc-invite-row > .input { grid-column: 1 / -1; }
  .acc-invite-row + .acc-invite-row { border-top: 1px solid var(--border); padding-top: 12px; }
  .acc-actions .btn.primary { width: 100%; justify-content: center; }
}
.acc-hidden { display: none !important; }
.acc-form .acc-grid2 { gap: 0 16px; }
.acc-form .btn.primary, .acc-main .btn.primary { min-height: 44px; font-size: 16px; }
/* Track P: the vendor's "Plans & prices" — Counter tool: flat, thin rules, a table on desktop, label/value rows on the
   phone. Colours are the site theme's tokens; only the primary button is green. */
.vp-section { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--border); }
.vp-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vp-table th, .vp-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: middle; height: 40px; }
.vp-table thead th { font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.vp-table tbody th { font-weight: 600; white-space: nowrap; }
.vp-table .num { text-align: end; }
.vp-table tr.vp-hidden th, .vp-table tr.vp-hidden td { color: var(--text-2); }
.vp-table input[type='checkbox'], .vp-table input[type='radio'] { width: 20px; height: 20px; accent-color: var(--primary); }
.vp-table .select { height: 40px; border-radius: 4px; min-width: 9.5em; }
.vp-num { width: 5.5em; max-width: 100%; text-align: end; border-radius: 4px; font-variant-numeric: tabular-nums; }
.vp-num.invalid { border-color: var(--danger, #b42318); }
.vp-price { display: inline-flex; align-items: center; gap: 0.3em; direction: ltr; }
.vp-settings { display: flex; gap: 16px; flex-wrap: wrap; }
.vp-settings .field { width: 12em; }
.vp-preview { margin: 0; padding: 12px 0; border-top: 1px solid var(--border); line-height: 1.7; }
.vp-save { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); max-width: 36em; }
@media (max-width: 900px) {
  .vp-table thead { display: none; }
  .vp-table, .vp-table tbody, .vp-table tr, .vp-table th, .vp-table td { display: block; width: 100%; }
  .vp-table tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .vp-table th, .vp-table td { border: 0; height: auto; padding: 4px 0; }
  .vp-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
  .vp-table td::before { content: attr(data-label); color: var(--text-2); font-size: 14px; }
  .vp-table tbody th { font-size: 16px; }
  .vp-table .select { height: 44px; min-width: 0; max-width: 60%; }
  .vp-num { height: 44px; }
}