/* 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.
   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; }
}
/* 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; }
.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); }
.acc-status, .acc-status.ok, .acc-status.warn, .acc-status.error { color: var(--text); border-inline-start-width: 4px; }
.acc-status { border-inline-start-color: var(--info-text); }
.acc-status.ok { border-inline-start-color: var(--ok); }
.acc-status.warn { border-inline-start-color: var(--warn); }
.acc-status.error { border-inline-start-color: var(--danger); }
.acc-badge[class*='state-'], .acc-badge[class*='health-'] { color: var(--text); }

/* The shop host (contract §1.5): the switcher and account menu in the ERP's top bar. */
.shop-host-bar { display: flex; align-items: center; gap: 6px; }
.shop-host-bar .acc-switch-name { unicode-bidi: plaintext; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.acc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
@media (max-width: 600px) { .shop-host-bar .acc-switch-name { max-width: 9ch; } }
/* In the ERP's dark top bar: the same look as its own user menu button (styles.css .toolbar > .user-menu > .btn). */
.toolbar .shop-host-bar .acc-menu > .btn { background: transparent; border-color: var(--chrome-btn-line); color: var(--toolbar-text); min-height: 30px; padding: 4px 10px; }
.toolbar .shop-host-bar .acc-menu > .btn:hover { background: var(--chrome-hover-2); }
.toolbar .shop-host-bar .acc-avatar { width: 30px; height: 30px; padding: 0; justify-content: center; }
.toolbar .shop-host-bar .acc-menu-list { color: var(--text); }
/* Phones (375 px) on the shared server: the ERP's top bar wraps instead of running off the screen; search gets its own
   row. Scoped to the shop host (:has(.shop-host-bar)), so the desktop app and on-premises screens are unchanged. */
@media (max-width: 640px) {
  .toolbar:has(.shop-host-bar) { flex-wrap: wrap; height: auto; row-gap: 6px; padding: 6px 10px; }
  .toolbar:has(.shop-host-bar) .tb-arrows { display: none; }
  .toolbar:has(.shop-host-bar) .topbar-search { order: 10; flex: 1 1 100%; min-width: 0; }
  .toolbar:has(.shop-host-bar) .tb-new .kbd { display: none; }
  .toolbar:has(.shop-host-bar) .user-menu > .btn { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 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; }