@import url("style.css?v=124") layer(legacy);

/* theme.css — line 1, before anything else. The ?v= here is bumped together with index.html (§8.1). */

/* Profileo / AFTL admin — UI v2 theme layer (WP-1), assembled from design-v2.md: §2.2 tokens, §2.4 base,
   §3 components in document order, §4.4 CSS icons (Lucide 1.48.0, ISC; Feather-derived icons MIT), Appendix A.
   style.css sits in the lower layer "legacy", so every rule here wins; legacy !important (print, [hidden]) still wins.
   R17: no print media block; .doc / .receipt / #print-area are never styled. Page WPs edit only inside their marker block. */

/* ==== §2.2 Token block ==== */

:root {
  color-scheme: light;               /* no dark form controls / forced dark (v2 has no dark theme) */

  /* ---------- Neutrals: cool grey (tinted towards the AFTL navy) ---------- */
  --gray-0:   #ffffff;
  --gray-25:  #fbfcfd;
  --gray-50:  #f7f8fa;
  --gray-100: #f0f2f5;
  --gray-150: #e8ebef;
  --gray-200: #dde1e7;
  --gray-300: #c9ced6;
  --gray-400: #9aa3b2;
  --gray-500: #6b7280;
  --gray-600: #4b5565;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ---------- Brand: ONE ramp. 600 = AFTL blue #006AD7, 900 = AFTL navy #00325F ---------- */
  --brand-25:  #f5f9fe;
  --brand-50:  #eef5fd;
  --brand-100: #d9e8fb;
  --brand-200: #b7d3f6;
  --brand-300: #86b5ef;
  --brand-600: #006ad7;
  --brand-700: #0058b4;
  --brand-800: #004a99;
  --brand-900: #00325f;

  /* ---------- Semantic: status only ---------- */
  --success-50: #ecfdf3;  --success-200: #abefc6;  --success-600: #079455;  --success-700: #067647;
  --warning-50: #fffaeb;  --warning-200: #fedf89;  --warning-600: #dc6803;  --warning-700: #b54708;
  --danger-50:  #fef3f2;  --danger-200:  #fecdca;  --danger-600:  #d92d20;  --danger-700:  #b42318;
  --info-50: var(--brand-50); --info-200: var(--brand-100); --info-600: var(--brand-600); --info-700: var(--brand-700);
  /* on dark surfaces (toast) */
  --success-on-dark: #47cd89; --warning-on-dark: #fdb022; --danger-on-dark: #f97066; --info-on-dark: #53b1fd;

  /* ---------- Roles (use these in components) ---------- */
  --bg-canvas: var(--gray-50);        /* page background */
  --bg-surface: #ffffff;              /* cards, sidebar, topbar, modals */
  --bg-subtle: var(--gray-50);        /* table header, toolbars, inset areas */
  --bg-muted: var(--gray-100);        /* segmented track, avatar, skeleton */
  --bg-hover: var(--gray-100);
  --bg-selected: var(--brand-50);
  --text: var(--gray-900);            /* 17.7:1 on white */
  --text-secondary: var(--gray-600);  /*  7.5:1 on white */
  --text-tertiary: var(--gray-500);   /*  4.8:1 on white — placeholders, meta, 12 px captions */
  --text-disabled: var(--gray-400);   /* disabled only (exempt from contrast) */
  --text-on-accent: #ffffff;
  --text-link: var(--brand-700);      /*  6.9:1 on white */
  --icon: var(--gray-500);
  --icon-strong: var(--gray-700);
  --border: var(--gray-200);          /* card and table dividers */
  --border-subtle: var(--gray-150);   /* row dividers inside cards */
  --border-strong: var(--gray-300);   /* secondary button outline */
  --border-input: #868f9e;            /* inputs: 3.26:1 on white (WCAG 1.4.11) */
  --accent: var(--brand-600);
  --accent-hover: var(--brand-700);
  --accent-active: var(--brand-800);
  --focus: var(--brand-600);
  --focus-ring: 0 0 0 3px rgba(0, 106, 215, 0.24);
  --focus-ring-danger: 0 0 0 3px rgba(217, 45, 32, 0.20);
  --backdrop: rgba(17, 24, 39, 0.48);

  /* ---------- Typography ---------- */
  --font-ui: "Inter", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Creato Display", "Inter", sans-serif;       /* logo wordmark + login title only */
  --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  --fs-100: 12px;  --lh-100: 16px;   /* captions, table headers, pills, counts */
  --fs-200: 13px;  --lh-200: 20px;   /* secondary text, labels, dense tables */
  --fs-300: 14px;  --lh-300: 20px;   /* UI default on desktop, buttons, table cells */
  --fs-350: 15px;  --lh-350: 22px;   /* ≤800 px only: body, nav items, list titles, sheet rows */
  --fs-400: 16px;  --lh-400: 24px;   /* card/section titles, mobile inputs */
  --fs-500: 20px;  --lh-500: 28px;   /* page title, modal title on desktop */
  --fs-600: 24px;  --lh-600: 32px;   /* KPI values */
  --fs-700: 30px;  --lh-700: 38px;   /* fast-expense amount only */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --tracking-tight: -0.01em;         /* 20 px and larger */

  /* ---------- Spacing (4 px grid) ---------- */
  --space-0: 0; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;

  /* ---------- Shape ---------- */
  --radius-xs: 2px;    /* progress bars, tab underline, sheet drag handle */
  --radius-sm: 4px;    /* status pills, kbd, checkbox, skeleton */
  --radius-md: 6px;    /* buttons, inputs, chips' inner items, nav items, menu items */
  --radius-lg: 8px;    /* cards, menus, popovers, callouts, stat groups */
  --radius-xl: 12px;   /* modals, bottom sheets (top corners), login card */
  --radius-full: 999px;/* avatars, filter chips, count badges */
  --border-w: 1px;

  /* ---------- Elevation (floating layers only) ---------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 16px 32px -8px rgba(16, 24, 40, 0.18), 0 4px 8px -4px rgba(16, 24, 40, 0.06);

  /* ---------- Motion ---------- */
  --dur-1: 100ms;  /* hover, colour */
  --dur-2: 160ms;  /* state change, fade */
  --dur-3: 240ms;  /* enter: modal, sheet, drawer */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* ---------- Layers (same order as v117 — nothing changes stacking) ---------- */
  --z-table-head: 3;
  --z-sticky: 20;         /* sticky footers inside views (.inv-bulkfoot, .su-foot) */
  --z-topbar: 40;
  --z-mbar: 90;           /* mobile bottom bar, perf pill */
  --z-modal: 100;
  --z-sheet: 150;         /* quick "New" sheet */
  --z-drawer-backdrop: 190;
  --z-drawer: 200;        /* mobile sidebar */
  --z-dialog: 250;        /* confirm dialog, help panel */
  --z-popover: 260;       /* "?" popover */
  --z-menu: 270;          /* overflow menu (opens above modals) */
  --z-toast: 300;

  /* ---------- Layout ---------- */
  --sidebar-w: 240px;
  --topbar-h: 56px;
  --sticky-top: var(--topbar-h);      /* where sticky table headers stop; 0px inside inner scroll boxes (§3.9) */
  --content-max: 1280px;
  --control-sm: 32px;
  --control-md: 36px;
  --control-lg: 44px;
  --tap: 44px;

  /* ---------- Legacy names re-pointed (so un-migrated code inherits v2) ---------- */
  --primary: var(--brand-600);
  --primary-dark: var(--gray-900);    /* was navy; used for headings — headings are now neutral */
  --primary-light: var(--brand-300);
  --navy: var(--brand-900);
  --bg: var(--bg-canvas);
  --card: var(--bg-surface);
  --muted: var(--text-secondary);
  --green: var(--success-700);
  --red: var(--danger-700);
  --orange: var(--warning-700);
  --yellow: var(--warning-700);
  --wa: var(--gray-700);              /* no WhatsApp-green buttons */
  --radius: var(--radius-lg);
  --shadow: var(--shadow-xs);
  --c-primary: var(--brand-600); --c-primary-700: var(--brand-700); --c-navy: var(--brand-900); --c-primary-50: var(--brand-50);
  --c-bg: var(--bg-canvas); --c-surface: var(--bg-surface); --c-text: var(--text); --c-text-2: var(--text-secondary);
  --c-border: var(--border); --c-border-strong: var(--border-input);
  --c-success: var(--success-700); --c-success-bg: var(--success-50); --c-success-ink: var(--success-700);
  --c-warn: var(--warning-700);    --c-warn-bg: var(--warning-50);    --c-warn-ink: var(--warning-700);
  --c-danger: var(--danger-700);   --c-danger-bg: var(--danger-50);   --c-danger-ink: var(--danger-700);
  --c-info-bg: var(--info-50); --c-info-ink: var(--info-700); --c-neutral-bg: var(--gray-100); --c-neutral-ink: var(--gray-700);
  --shadow-1: var(--shadow-xs); --shadow-2: var(--shadow-lg);
  --ring: var(--focus-ring);
  --r-sm: var(--radius-md); --r-md: var(--radius-lg); --r-lg: var(--radius-xl);
  /* --fs-xs … --fs-2xl and --s-1 … --s-6 keep their v117 values (mobile 16 px inputs depend on --fs-md). */
}

/* ==== §2.4 Base rules ==== */

html { -webkit-text-size-adjust: 100%; }
/* Unitless line-height on purpose: un-migrated legacy text with a bigger font-size (view h2/h3, .fx-amount,
   .pj-dhead h2) inherits it and scales. A px value here would make wrapped legacy headings overlap. */
body {
  background: var(--bg-canvas); color: var(--text);
  font: var(--fw-regular) var(--fs-300)/1.43 var(--font-ui);          /* 14/20 */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 800px) { body { font-size: var(--fs-350); line-height: 1.47; } }   /* 15/22 */
/* :where() around the guard keeps specificity 0, so every component rule below still wins */
:where(#app, #modal, #msheet, #help-panel) :where(h1, h2, h3, h4):where(:not(:is(.doc, .receipt) *)) { color: var(--text); font-weight: var(--fw-semibold); }
:where(#app, #modal, #msheet, #help-panel, .ui-dlg-back, .ui-pop, .ui-menu) :where(b, strong):where(:not(:is(.doc, .receipt) *)) { font-weight: var(--fw-semibold); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* rows and items that touch a clipped card edge draw the ring inside (R18) */
:is(tr, .list-row, .home-row, .pyr-row, .gs-row, .msheet-btn, .ui-menu-item, .nav-item, .stat, .stat-card):focus-visible { outline-offset: -2px; }
::selection { background: var(--brand-100); }
/* Windows high-contrast / forced colours: states that v2 draws with background only get a real edge */
@media (forced-colors: active) {
  :is(.pill, .badge):not(:is(.doc, .receipt) *), .kbd { border: 1px solid CanvasText; }
  :is(.seg, .pj-seg, .fx-toggle, .inv-seg, .su-seg, [id="exp-tabs"], .pyr-att-chips) > :is([aria-pressed="true"], .on, .active),
  #nav .nav-item.active, .gs-row.is-active { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* icons */
.ico { flex-shrink: 0; display: inline-block; vertical-align: -0.2em; }
.ico-spin { animation: v2-spin 0.8s linear infinite; }
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* numbers */
:where(#app, #modal, #msheet) :is(.num, .amt, .stat-val, .stat-value, .t-num, td.num, th.num, .home-amt, .list-amt, .pyr-bal, .pj-money, .tb-count, .pill, .badge):not(:is(.doc, .receipt) *) {
  font-variant-numeric: tabular-nums;
}
/* R6 safety net: on an amount, colour comes only from .is-negative; legacy .red/.green/.orange render neutral */
:where(#app, #modal, #msheet) :is(.num, .amt, .e-amt, .stat-val, .stat-value, .pyr-bal, .pj-money, .list-amt, .home-amt, td.num *):is(.red, .green, .orange):not(.is-negative, :is(.doc, .receipt) *) { color: var(--text); }
:where(#app, #modal, #msheet) .is-negative:not(:is(.doc, .receipt) *) { color: var(--danger-700); }

/* single-line truncation. The 2 px padding/negative margin pair gives Bengali vowel signs (ি ু ৃ ্র)
   room inside the clip box without changing layout — with a 20 px line box they are otherwise cut off. */
.truncate { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.truncate, .list-title, .list-sub, .home-t, .home-line, .home-s, .gs-row-title, .sb-user-name) { padding-block: 2px; margin-block: -2px; }

/* shared utility classes — guarded so client documents keep their look */
.muted:not(:is(.doc, .receipt) *) { color: var(--text-secondary); }
.small:not(:is(.doc, .receipt) *) { font-size: var(--fs-200); line-height: var(--lh-200); }
.green:not(:is(.doc, .receipt) *) { color: var(--success-700); }
.red:not(:is(.doc, .receipt) *) { color: var(--danger-700); }
.orange:not(:is(.doc, .receipt) *) { color: var(--warning-700); }
.clickable { cursor: pointer; }
.clickable:hover { background: var(--bg-subtle); }

/* motion reset (R12) */
#view > * { animation: none; }
button:active, .mini-btn:active, .qa-btn:active, .nav-item:active, .icon-btn:active, .home-tile:active, .step-card:active, .lite-btn:active { transform: none; }
.qa-btn:hover, .stat:hover, .stat-card:hover, .inv-tile:hover, .primary-btn:hover { transform: none; }
.qa-btn:hover, .primary-btn:hover { box-shadow: none; }   /* NOT on stat cells: their box-shadow is the hairline divider (§3.5) */
button, a, .nav-item, .chip, input, select, textarea {
  transition: background-color var(--dur-1) var(--ease-standard), border-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard), box-shadow var(--dur-1) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* Bengali runs inside English UI (data values) fall back to Hind Siliguri per glyph; give them room */
:lang(bn), .bn { line-height: 1.6; }

/* WP-1 addition: the reset above would drop the legacy translate that positions these two buttons (they jump on press) */
.erp-pill:active { transform: translateX(-50%); }
.inv-search button:active { transform: translateY(-50%); }

/* ==== §3.1 App shell and sidebar ==== */

.sidebar {
  width: var(--sidebar-w); background: var(--bg-surface); color: var(--gray-700);
  border-right: 1px solid var(--border); box-shadow: none;
}
.sidebar-brand { height: var(--topbar-h); padding: 0 16px; gap: 10px; border-bottom: 1px solid var(--border); }
.sidebar-brand img { width: 28px; height: 28px; }
.sidebar-brand strong {
  font: 700 15px/20px var(--font-brand); letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-brand small { display: none; }
#nav { padding: 8px 8px 16px; gap: 2px; scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }

#nav .nav-item, .sidebar-bottom .nav-item {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--gray-700);
  font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); text-decoration: none;
}
#nav .nav-item .ico { width: 18px; height: 18px; color: var(--icon); }
#nav .nav-item:hover { background: var(--bg-hover); color: var(--gray-900); }
#nav .nav-item:hover .ico { color: var(--icon-strong); }
#nav .nav-item.active { background: var(--bg-selected); color: var(--brand-700); font-weight: var(--fw-semibold); }
#nav .nav-item.active .ico { color: var(--brand-600); }
#nav .nav-item:focus-visible, .nav-group:focus-visible, .nav-pin:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.nav-ext-ico { margin-left: auto; color: var(--gray-400); font-size: 0; }          /* holds icon('external', 14) */

/* group headers: sentence case, small, grey, collapsible (behaviour unchanged) */
.nav-group {
  min-height: 32px; margin-top: 12px; padding: 0 10px; gap: 8px; border-radius: var(--radius-md);
  background: none; color: var(--text-tertiary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); letter-spacing: 0;
}
.nav-group:hover { background: none; color: var(--gray-700); }
.nav-chev { color: var(--gray-400); font-size: 0; }                                   /* holds icon('expand', 14) */
.nav-group[aria-expanded="false"] .nav-chev { transform: rotate(-90deg); }
.nav-group.has-active[aria-expanded="false"] .nav-group-lbl::after { width: 6px; height: 6px; margin-left: 6px; background: var(--brand-600); }
.nav-group-items { margin: 2px 0 0; padding: 0; border-left: 0; gap: 2px; }
.nav-sub { padding: 8px 10px 4px 38px; color: var(--text-tertiary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); letter-spacing: 0; }

/* favourites */
.nav-fav { margin: 4px 0 0; padding: 0 0 8px; border-bottom: 1px solid var(--border-subtle); }
.nav-fav-head { padding: 12px 4px 4px 10px; color: var(--text-tertiary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); }
.nav-fav-edit {
  min-height: 24px; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text-link); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui);
}
.nav-fav-edit:hover, .nav-fav-edit[aria-pressed="true"] { background: var(--brand-50); color: var(--brand-700); border: 0; }
.nav-fav-add {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; margin: 4px 0; padding: 0 10px;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--text-tertiary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui);
}
.nav-fav-add:hover { background: var(--bg-hover); color: var(--gray-700); border: 0; }
.nav-fav-hint { padding: 4px 10px; color: var(--text-tertiary); font-size: var(--fs-100); line-height: var(--lh-100); }
.nav-pin { flex: 0 0 28px; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--gray-400); font-size: 0; }
.nav-pin:hover { background: var(--bg-hover); color: var(--gray-700); }
.nav-pin.on { color: var(--gray-700); }
.nav-pin.on .ico { fill: currentColor; }

/* bottom user block */
.sidebar-bottom { padding: 8px; border-top: 1px solid var(--border); }
.sb-user { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px 0 8px; }
.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--bg-muted); color: var(--gray-700); font: var(--fw-semibold) var(--fs-100)/1 var(--font-ui);
}
.sb-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-user-name { color: var(--text); font: var(--fw-medium) var(--fs-200)/18px var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { color: var(--text-tertiary); font-size: var(--fs-100); line-height: var(--lh-100); }
.logout { color: inherit; }

/* mobile drawer */
.sidebar-overlay { background: var(--backdrop); z-index: var(--z-drawer-backdrop); }
@media (max-width: 800px) {
  .sidebar { width: 280px; left: -290px; z-index: var(--z-drawer); transition: left var(--dur-3) var(--ease-enter); }
  .sidebar.open { left: 0; box-shadow: var(--shadow-lg); }
  #app #nav .nav-item { min-height: var(--tap); padding-top: 0; padding-bottom: 0; font-size: var(--fs-350); }
  .nav-group, .nav-fav-add { min-height: var(--tap); }
  .nav-fav-edit { min-height: var(--tap); padding: 0 10px; }
  #nav.fav-edit .nav-pin { flex-basis: var(--tap); width: var(--tap); height: var(--tap); }
}

/* layout frame */
.main { background: var(--bg-canvas); }
.view { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 16px 24px 40px; gap: 16px; }
@media (max-width: 800px) { .view { padding: 12px 16px 24px; gap: 12px; } }

/* ==== §3.2 Top bar ==== */

.topbar {
  height: var(--topbar-h); padding: 0 24px; gap: 12px; z-index: var(--z-topbar);
  background: var(--bg-surface); border-bottom: 1px solid var(--border); box-shadow: none;
}
#page-title { display: none; }
#menu-toggle { display: none; }
.topbar-right { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.tb-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--gray-600); text-decoration: none; cursor: pointer;
}
.tb-btn:hover { background: var(--bg-hover); color: var(--gray-900); border: 0; }
.tb-bell.has { background: none; border: 0; color: var(--gray-600); }
.tb-bell .tb-txt, .tb-help .tb-txt { display: none; }
.tb-count {
  position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full);
  background: var(--brand-600); color: #fff; font: var(--fw-semibold) var(--fs-100)/18px var(--font-ui); text-align: center;
  box-shadow: 0 0 0 2px var(--bg-surface);
}
.tb-search {
  width: 320px; max-width: 40vw; margin-right: auto; padding: 0 6px 0 10px; gap: 8px; justify-content: flex-start;
  border: 1px solid var(--border); background: var(--bg-subtle); color: var(--text-tertiary);
  font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.tb-search:hover { border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--text-tertiary); }
.tb-search .tb-txt { display: inline; color: var(--text-tertiary); font-weight: var(--fw-regular); }
.kbd {
  margin-left: auto; padding: 0 5px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-tertiary); font: var(--fw-medium) var(--fs-100)/18px var(--font-ui);
}
@media (max-width: 800px) {
  .topbar { height: 52px; padding: 0 4px; gap: 4px; }
  #menu-toggle { display: inline-flex; width: 44px; height: 44px; }
  #page-title { display: block; flex: 1; min-width: 0; margin: 0; font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui);
    color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right { flex: 0 0 auto; }
  .tb-btn { width: 44px; height: 44px; }
  .tb-search { width: 44px; max-width: none; margin: 0; padding: 0; border: 0; background: none; justify-content: center; color: var(--gray-600); }
  .tb-search .tb-txt, .tb-search .kbd { display: none; }
}

/* ==== §3.3 Page header ==== */

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap;
  width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 24px 24px 0;
}
.page-head[hidden] { display: none; }
.page-head-main { min-width: 0; flex: 1 1 320px; }
.page-title { margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-500)/var(--lh-500) var(--font-ui); letter-spacing: var(--tracking-tight); }
.page-desc { margin: 4px 0 0; max-width: 65ch; color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.page-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--text-secondary);
  font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); text-decoration: none; }
.page-back:hover { color: var(--text); }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-menu-item[data-mobile-only] { display: none; }
@media (max-width: 800px) {
  .page-head { padding: 12px 16px 0; }
  .page-head-main { display: none; }                   /* the topbar shows the title on phones */
  .page-head.has-back .page-head-main { display: block; flex-basis: 100%; }
  .page-head.has-back .page-title { font-size: var(--fs-400); line-height: var(--lh-400); }
  .page-actions { width: 100%; flex-wrap: nowrap; }
  .page-actions .pa-secondary { display: none; }
  .page-actions .btn-primary { flex: 1 1 auto; min-height: var(--tap); }
  .ui-menu-item[data-mobile-only] { display: flex; }
}

/* ==== §3.4 Cards ==== */

.card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: none; overflow: hidden; overflow: clip;   /* clip (Chrome 90+, Safari 16+) rounds corners like hidden but is NOT a
                                                           scroll container, so table headers and sticky footers stick to the page */
}
/* safety net for inline 4 px stripes still in JS templates (app.js ~1066 compliance card, ~9432 Facebook result) */
#view .card[style*="border-left"]:not(:is(.doc, .receipt) *) { border-left: 1px solid var(--border) !important; }
.card.pad, .card-body { padding: 16px; }
.card-head {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-height: 52px; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
}
.card-head h3, .card-title { flex: 1; min-width: 0; margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.card-head a:not(.btn):not(.ghost-btn):not(.mini-btn), .card-link {
  display: inline-flex; align-items: center; gap: 2px; color: var(--text-link);
  font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); text-decoration: none;
}
.card-head a:not(.btn):hover, .card-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.card-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }
.card + .card { margin-top: 0; }                         /* spacing comes from .view gap */
.section-title { margin: 24px 0 8px; padding: 0; border: 0; color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); }
.two-col { gap: 16px; }
@media (max-width: 800px) {
  .card { overflow-x: auto; }                            /* legacy wide tables scroll inside the card, never the page */
  .card-head { min-height: 48px; padding: 8px 16px; }
}

/* ==== §3.5 Stat / KPI group (neutral) ==== */

:is(.stat-group, .stat-grid, .home-nums, .pyr-stats, .inv-tiles, .pj-kpis, .pj-tiles, .ln-stats, .stat-row) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0; margin: 0;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
:is(.stat-group, .stat-grid, .home-nums, .pyr-stats, .inv-tiles, .pj-kpis, .pj-tiles, .ln-stats, .stat-row) > * {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px;
  background: var(--bg-surface); border: 0; border-radius: 0; box-shadow: 1px 0 0 0 var(--border), 0 1px 0 0 var(--border);
}
/* cells that are buttons (loans filters) */
:is(.stat-group, .stat-grid, .home-nums, .pyr-stats, .inv-tiles, .pj-kpis, .pj-tiles, .ln-stats, .stat-row) > button {
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
}
:is(.stat-group, .stat-grid, .home-nums, .pyr-stats, .inv-tiles, .pj-kpis, .pj-tiles, .ln-stats, .stat-row) > :is(button, .clickable):hover { background: var(--gray-25); }
:is(.stat-group, .stat-grid, .home-nums, .pyr-stats, .inv-tiles, .pj-kpis, .pj-tiles, .ln-stats, .stat-row) > button:hover:not(:focus-visible) { outline: none; }  /* legacy button.ln-stat:hover draws a 2 px blue outline */
:is(.stat-group, .stat-grid, .home-nums, .pyr-stats, .inv-tiles, .pj-kpis, .pj-tiles, .ln-stats, .stat-row) > :focus-visible { outline-offset: -2px; }   /* container clips outer rings */
.stat { border-left: 0 !important; }                     /* also beats inline style="border-left…" left in JS templates */
.pj-kpis > div { flex-direction: column-reverse; justify-content: flex-end; }   /* markup is <b>value</b><span>label</span>; .pj-tile is <span>label</span><b>value</b> */
.stat-label, .pj-kpis span, .pj-tile span { color: var(--text-secondary); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.stat-val, .stat-value, .pj-kpis b, .pj-tile b {
  color: var(--text); font: var(--fw-semibold) var(--fs-600)/var(--lh-600) var(--font-ui); letter-spacing: var(--tracking-tight);
  overflow: visible; text-overflow: clip;          /* cancels legacy .pyr-stat/.ln-stat ellipsis */
  white-space: normal; overflow-wrap: anywhere;   /* R6: never an ellipsis on money — "৳1,23,450" has no spaces, so it only
                                                     breaks when it truly cannot fit (a crore value in a 170 px phone cell) */
}
.stat-val:is(.green, .red, .orange), .stat-value:is(.green, .red, .orange), :is(.pj-kpis, .pj-tile) b:is(.green, .red, .orange) { color: var(--text); }
:is(.stat-val, .stat-value).is-negative { color: var(--danger-700); }
.stat-sub, .stat small, .home-num small, .ln-stat small { color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
.stat.clickable, .home-num.clickable { cursor: pointer; }
@media (max-width: 800px) {
  :is(.stat-group, .stat-grid, .home-nums, .pyr-stats, .inv-tiles, .pj-kpis, .pj-tiles, .ln-stats, .stat-row) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.stat-group, .stat-grid, .home-nums, .pyr-stats, .inv-tiles, .pj-kpis, .pj-tiles, .ln-stats, .stat-row) > * { padding: 12px 14px; }
  .stat-val, .stat-value, .pj-kpis b, .pj-tile b { font-size: var(--fs-500); line-height: var(--lh-500); }
}

/* ==== §3.6 Buttons ==== */

:is(.btn, .primary-btn, .ghost-btn, .mini-btn, .danger-btn, .success-btn, .ui-btn-danger, .qa-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto;
  min-height: var(--control-md); padding: 0 14px; border: 1px solid transparent; border-radius: var(--radius-md);
  font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); white-space: nowrap; text-decoration: none;
  cursor: pointer; box-shadow: none; transform: none; vertical-align: middle;
}
:is(.btn, .primary-btn, .ghost-btn, .mini-btn, .danger-btn, .success-btn, .ui-btn-danger) .ico { width: 16px; height: 16px; margin-left: -2px; }

/* primary */
:is(.btn-primary, .primary-btn) { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
:is(.btn-primary, .primary-btn):hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--text-on-accent); }
:is(.btn-primary, .primary-btn):active { background: var(--accent-active); border-color: var(--accent-active); }

/* secondary */
:is(.btn-secondary, .ghost-btn, .mini-btn, .success-btn, .qa-btn) { background: var(--bg-surface); border-color: var(--border-strong); color: var(--gray-800); }
:is(.btn-secondary, .ghost-btn, .mini-btn, .success-btn, .qa-btn):hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--gray-900); }
:is(.btn-secondary, .ghost-btn, .mini-btn, .success-btn, .qa-btn):active { background: var(--gray-100); }
:is(.ghost-btn, .mini-btn):is(.wa) { border-color: var(--border-strong); color: var(--gray-800); }  /* WhatsApp buttons are ordinary secondaries */
:is(.btn, .ghost-btn, .mini-btn, .chip)[aria-pressed="true"], .ghost-btn.active, .mini-btn.on {
  background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700);
}

/* tertiary */
.btn-tertiary { background: transparent; border-color: transparent; color: var(--gray-700); }
.btn-tertiary:hover { background: var(--bg-hover); color: var(--gray-900); }

/* link */
:is(.btn-link, .link-btn) {
  display: inline-flex; align-items: center; gap: 4px; min-height: 0; padding: 0; border: 0; background: none;
  color: var(--text-link); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); cursor: pointer; text-decoration: none;
}
:is(.btn-link, .link-btn):hover { text-decoration: underline; text-underline-offset: 2px; }

/* danger */
:is(.btn-danger, .ui-btn-danger) { background: var(--danger-600); border-color: var(--danger-600); color: #fff; }
:is(.btn-danger, .ui-btn-danger):hover { background: var(--danger-700); border-color: var(--danger-700); }
:is(.btn-danger-secondary, .danger-btn) { background: var(--bg-surface); border-color: var(--border-strong); color: var(--danger-700); }
:is(.btn-danger-secondary, .danger-btn):hover { background: var(--danger-50); border-color: var(--danger-200); color: var(--danger-700); }

/* sizes */
:is(.btn-sm, .mini-btn, .primary-btn.sm, .danger-btn.sm, .ghost-btn.sm) { min-height: var(--control-sm); padding: 0 12px; font-size: var(--fs-200); line-height: var(--lh-200); }
.btn-lg { min-height: var(--control-lg); padding: 0 18px; }
.btn-block { display: flex; width: 100%; }

/* icon-only */
:is(.btn-icon, .icon-btn) {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--control-md); height: var(--control-md); min-height: 0; padding: 0; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--gray-600); font-size: 0; cursor: pointer;
}
:is(.btn-icon, .icon-btn):hover { background: var(--bg-hover); color: var(--gray-900); }
:is(.btn-icon, .icon-btn) .ico { width: 16px; height: 16px; }
.btn-icon.btn-sm, .remove-btn { width: var(--control-sm); height: var(--control-sm); }

/* disabled + busy */
:is(.btn, .primary-btn, .ghost-btn, .mini-btn, .danger-btn, .success-btn, .ui-btn-danger, .btn-icon, .icon-btn, .chip):is(:disabled, [aria-disabled="true"]) {
  background: var(--gray-100); border-color: var(--gray-200); color: var(--text-disabled); cursor: not-allowed; opacity: 1;
}
:is(.btn-icon, .icon-btn):is(:disabled, [aria-disabled="true"]) { background: transparent; }
[data-busy="1"] { cursor: progress; }

/* placement */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; }
.btn-row .primary-btn { width: auto; }
.btn-group { display: inline-flex; }
.btn-group > * { border-radius: 0; margin-left: -1px; }
.btn-group > :first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.btn-group > :last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
@media (min-width: 801px) {
  .modal-body > .primary-btn:last-child, .card.pad > .primary-btn:last-child { display: flex; width: fit-content; min-width: 120px; margin: 16px 0 0 auto; }
}
/* Phones (R16). Specificity matters here: :is() takes the specificity of its MOST specific argument, so
   `:is(.btn-sm, .mini-btn, .primary-btn.sm, …)` above is (0,2,0) for every member. Each phone rule below is
   (0,2,0) too and comes later, so it wins. Written at (0,1,0) (as in the first draft), .btn-sm/.mini-btn row
   actions and .btn-icon.btn-sm menu triggers stayed 32 px on phones. */
@media (max-width: 800px) {
  :where(#app, #login-screen, #modal, #msheet, .ui-dlg-back) :is(.btn, .primary-btn, .ghost-btn, .mini-btn, .danger-btn, .success-btn, .ui-btn-danger, .qa-btn):not(.btn-sm, .mini-btn, .sm, .btn-link) {
    min-height: var(--tap); white-space: normal; text-align: center;
  }
  /* small buttons stay visually compact (36 px) and get a 44 px hit area */
  :where(#app, #modal, #msheet, .ui-dlg-back) :is(.btn-sm, .mini-btn, .primary-btn.sm, .danger-btn.sm, .ghost-btn.sm):not(.btn-icon) {
    position: relative; min-height: 36px;
  }
  :where(#app, #modal, #msheet, .ui-dlg-back) :is(.btn-sm, .mini-btn, .primary-btn.sm, .danger-btn.sm, .ghost-btn.sm):not(.btn-icon)::after {
    content: ""; position: absolute; inset: -4px 0;
  }
  /* icon-only: 40 px box + 2 px extension = 44 px, including .btn-icon.btn-sm (row actions, "⋯" triggers) */
  :where(#app, #modal, #msheet, .ui-dlg-back) :is(.btn-icon, .icon-btn, .remove-btn, .btn-icon.btn-sm) { position: relative; width: 40px; height: 40px; }
  :where(#app, #modal, #msheet, .ui-dlg-back) :is(.btn-icon, .icon-btn, .remove-btn, .btn-icon.btn-sm)::after { content: ""; position: absolute; inset: -2px; }
  /* text links that act as buttons: invisible hit area, no layout change */
  :where(#app, #modal, #msheet) :is(.btn-link, .link-btn, .card-link) { position: relative; }
  :where(#app, #modal, #msheet) :is(.btn-link, .link-btn, .card-link)::after { content: ""; position: absolute; inset: -12px -4px; }
  .modal-body > .primary-btn:last-child, .login-box .primary-btn { display: flex; width: 100%; }
}

/* ==== §3.7 Inputs, selects, search ==== */

/* :where() on both sides = specificity 0, so every later rule (search icon, select chevron, login, palette) wins. Never use :is() with ids here. */
:where(#app, #login-screen, #modal, #msheet, #help-panel) :where(
  .fld input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]), .fld select, .fld textarea,
  .input, .select, input.search-inp, select.search-sel, #ord-search, #prod-search, #cust-search, #pos-search, #pos-cust-search,
  #ord-status, #inv-q, #exp-q, #pj-q, #gs-q, .inv-search input, .pj-search input, .login-box input, .fx-date, .fx-note, .pj-date,
  .su-date-inp, .pos-line input, .qty-mini input, .pj-line-nums input, .pj-line-nums select, .pj-line .pl-desc, .pj-sugg input, .inv-bq, .shp-rq) {
  height: var(--control-md); min-height: var(--control-md); padding: 0 12px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); background-color: var(--bg-surface);
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); box-shadow: none;
}
:where(#app, #modal, #msheet, #help-panel) :is(.fld textarea, textarea.input, .pj-diary-add textarea) {
  height: auto; min-height: 80px; padding: 8px 12px; border: 1px solid var(--border-input); border-radius: var(--radius-md);
  font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); resize: vertical;
}
:where(#app, #login-screen, #modal, #msheet, #help-panel) :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--gray-500); }
/* transparent outline (not `none`): invisible normally, drawn by Windows high-contrast mode, where box-shadow rings disappear */
:where(#app, #login-screen, #modal, #msheet, #help-panel) :is(input, select, textarea):focus { border-color: var(--focus); box-shadow: var(--focus-ring); outline: 2px solid transparent; outline-offset: 0; }
:where(#app, #modal, #msheet) :is(input, select, textarea):is([aria-invalid="true"], .is-invalid) { border-color: var(--danger-600); }
:where(#app, #modal, #msheet) :is(input, select, textarea):is([aria-invalid="true"], .is-invalid):focus { box-shadow: var(--focus-ring-danger); }
:where(#app, #modal, #msheet) :is(input, select, textarea):is(:disabled, [readonly]) { background-color: var(--gray-50); border-color: var(--border); color: var(--text-secondary); }
:where(#app, #login-screen, #modal, #msheet, #help-panel) ::placeholder { color: var(--text-tertiary); opacity: 1; }

/* select chevron */
:where(#app, #modal, #msheet) :is(.fld select, select.select, select.search-sel, #ord-status, .pj-line-nums select) {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: var(--ico-chevron-down); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px;
}
/* search fields: every search placeholder starts with "Search" (see §6) */
:where(#app, #modal, #msheet) :is(input[type="search"], input[placeholder^="Search"]) {
  padding-left: 34px; background-image: var(--ico-search); background-repeat: no-repeat; background-position: 10px center; background-size: 16px 16px;
}
/* checkbox / radio */
:where(#app, #modal, #msheet) :is(input[type="checkbox"], input[type="radio"]) { width: 16px; height: 16px; accent-color: var(--accent); }
/* numbers typed into grids line up with the numbers printed around them; standalone form fields stay left-aligned */
:where(#app, #modal, #msheet) :where(td, .pos-line, .pj-line-nums, .qty-mini, .inv-bcell) :is(input[type="number"], input[inputmode="decimal"], input[inputmode="numeric"]) { text-align: right; }

/* field wrapper */
:is(.field, .fld) {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px;
  color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui);
}
:is(.field, .fld) :is(small, .field-help) { color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); }
.field-error { display: flex; gap: 4px; align-items: center; color: var(--danger-700); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); }
.opt { color: var(--text-tertiary); font-weight: var(--fw-regular); }
.form-grid, .form-grid-3 { gap: 0 16px; }
.form-section-title { margin: 24px 0 12px; padding-top: 16px; border-top: 1px solid var(--border-subtle); color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); }
.form-section-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 800px) {
  :where(#app, #login-screen, #modal, #msheet, #help-panel) :is(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"]), select) {
    min-height: var(--tap); font-size: var(--fs-400);   /* 16 px: no iOS zoom */
  }
  :where(#app, #modal, #msheet, #help-panel) textarea { font-size: var(--fs-400); }
  /* a 16 px box is too small to tap: 20 px box, and the wrapping <label> becomes the 44 px target.
     Bulk-select checkboxes in table cells keep ≥ 24 px spacing (WCAG 2.5.8); new markup wraps them in a <label>. */
  :where(#app, #modal, #msheet) :is(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; }
  :where(#app, #modal, #msheet) label:has(> input[type="checkbox"], > input[type="radio"]) { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); }
}

/* ==== §3.8 Segmented controls and filter chips ==== */

/* ---- filter chips (first) ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--bg-surface);
  color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); white-space: nowrap; cursor: pointer;
}
.chip:hover { background: var(--gray-50); border-color: var(--gray-400); }
.chip:is(.on, [aria-pressed="true"]) { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); font-weight: var(--fw-medium); }
.chip :is(b, .chip-count) { color: var(--text-tertiary); font-weight: var(--fw-medium); }
.chip:is(.on, [aria-pressed="true"]) :is(b, .chip-count) { color: var(--brand-600); }
.fx-chips, .pj-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-tabs { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
@media (max-width: 800px) {
  .chip { position: relative; height: 36px; min-height: 36px; }
  .chip::after { content: ""; position: absolute; inset: -4px 0; }          /* 44 px hit area; chip rows keep an 8 px gap */
}

/* ---- segmented control (after chips) ---- */
:is(.seg, .pj-seg, .fx-toggle, .inv-seg, .su-seg, [id="exp-tabs"], .pyr-att-chips) {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px; margin: 0;
  border: 0; border-radius: var(--radius-lg); background: var(--bg-muted);
}
:is(.seg, .pj-seg, .fx-toggle, .inv-seg, .su-seg, [id="exp-tabs"], .pyr-att-chips) > :is(button, .chip, .ghost-btn, label) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; min-height: 28px; padding: 0 12px;
  border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none;
  color: var(--text-secondary); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); white-space: nowrap; cursor: pointer;
}
/* hover never on the selected item (the first draft's `> :hover` also blanked the selected thumb) */
:is(.seg, .pj-seg, .fx-toggle, .inv-seg, .su-seg, [id="exp-tabs"], .pyr-att-chips) > :is(button, .chip, .ghost-btn, label):not([aria-pressed="true"], .on, .active):hover {
  color: var(--text); background: transparent; border-color: transparent;
}
/* selected = white thumb with a 1 px ring (Primer SegmentedControl) — no drop shadow (R7) */
:is(.seg, .pj-seg, .fx-toggle, .inv-seg, .su-seg, [id="exp-tabs"], .pyr-att-chips) > :is([aria-pressed="true"], .on, .active) {
  background: var(--bg-surface); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); border: 0;
}
.fx-toggle { display: flex; width: 100%; }
.fx-toggle > :is(button, .chip, .ghost-btn, label) { flex: 1 1 0; height: 36px; min-height: 36px; }   /* (0,2,0), after the base rule */
@media (max-width: 800px) {
  :is(.seg, .pj-seg, .inv-seg, [id="exp-tabs"], .fx-toggle) { display: flex; width: 100%; }
  /* 40 px item + the 2 px track padding above and below = 44 px; ::after makes that whole band tappable */
  :is(.seg, .pj-seg, .fx-toggle, .inv-seg, .su-seg, [id="exp-tabs"], .pyr-att-chips) > :is(button, .chip, .ghost-btn, label) {
    position: relative; flex: 1 1 0; height: 40px; min-height: 40px;
  }
  :is(.seg, .pj-seg, .fx-toggle, .inv-seg, .su-seg, [id="exp-tabs"], .pyr-att-chips) > :is(button, .chip, .ghost-btn, label)::after {
    content: ""; position: absolute; inset: -2px 0;
  }
  .pyr-att-chips { display: inline-flex; width: auto; }
  .pyr-att-chips > :is(button, .chip, .ghost-btn, label) { flex: 0 0 44px; width: 44px; padding: 0; }
}

/* ==== §3.9 Tables, row actions and the overflow menu ==== */

.table:not(:is(.doc, .receipt) *) { width: 100%; border-collapse: separate; border-spacing: 0; }
.table:not(:is(.doc, .receipt) *) th {
  height: 40px; padding: 0 12px; background: var(--bg-subtle); border-bottom: 1px solid var(--border);
  color: var(--text-secondary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui);
  text-align: left; text-transform: none; letter-spacing: 0; white-space: nowrap; vertical-align: middle;
}
.table:not(:is(.doc, .receipt) *) td {
  padding: 14px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text);   /* 14 + 20 + 14 = 48 px row */
  font-size: var(--fs-300); line-height: var(--lh-300); vertical-align: middle; background: var(--bg-surface);
  font-variant-numeric: tabular-nums;                                                     /* dates, ids and counts line up too */
}
.table:not(:is(.doc, .receipt) *) :is(th, td):first-child { padding-left: 16px; }
.table:not(:is(.doc, .receipt) *) :is(th, td):last-child { padding-right: 16px; }
.table:not(:is(.doc, .receipt) *) tbody tr:last-child td { border-bottom: 0; }
.table:not(:is(.doc, .receipt) *) td :is(small, .muted) { color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px; }
.table:not(:is(.doc, .receipt) *) td strong { font-weight: var(--fw-medium); }
.table:not(:is(.doc, .receipt) *) :is(th, td):is(.num, .right) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table:not(:is(.doc, .receipt) *) td:is(.t-date, .e-no) { white-space: nowrap; }                /* dates never wrap */
.table:not(:is(.doc, .receipt) *) tr:is(.clickable, .ui-t-click) { cursor: pointer; }
.table:not(:is(.doc, .receipt) *) tr:is(.clickable, .ui-t-click):hover td { background: var(--bg-subtle); }
.table:not(:is(.doc, .receipt) *) :is(tfoot td, tr.t-total td) { font-weight: var(--fw-semibold); background: var(--bg-subtle); border-top: 1px solid var(--border); border-bottom: 0; }
.table:not(:is(.doc, .receipt) *) td:is(.pad, .e-empty) { padding: 32px 16px; text-align: center; color: var(--text-secondary); }
:is(.table.small, .table-dense):not(:is(.doc, .receipt) *) th { height: 36px; }
:is(.table.small, .table-dense):not(:is(.doc, .receipt) *) td { padding: 10px 12px; font-size: var(--fs-200); line-height: var(--lh-200); }   /* 40 px row */
.table:not(:is(.doc, .receipt) *) th:has(> input[type="checkbox"]), .table:not(:is(.doc, .receipt) *) td:has(> input[type="checkbox"]) { width: 40px; }
.table:not(:is(.doc, .receipt) *) tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* one-line cell with ellipsis (Details, Description): put the text in <span class="truncate" title="full text"> */
.table:not(:is(.doc, .receipt) *) td.t-trunc { max-width: 320px; }

/* sticky header (desktop). The window scrolls and the 56 px topbar is sticky, so headers stop under it.
   Works because .card is overflow: clip (§3.4). Inside an inner scroll box the header sticks to that box instead. */
@media (min-width: 801px) {
  #view .table:not(:is(.doc, .receipt) *) thead th { position: sticky; top: var(--sticky-top); z-index: var(--z-table-head); }
  #view :is(.t-wrap, .scroll-box, [style*="overflow-y:auto"], [style*="overflow-x:auto"], [style*="overflow:auto"]) { --sticky-top: 0px; }
}
:is(#modal, #msheet, .ui-dlg-back) .table thead th { position: static; }   /* modal heads are sticky already */

/* row actions */
:is(td.t-actions, td.row-actions) { width: 1%; white-space: nowrap; text-align: right; }
:is(td.t-actions > .t-v, td.row-actions > .row-actions-in) { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }

.ui-menu {
  position: fixed; z-index: var(--z-menu); min-width: 200px; max-width: 300px; padding: 4px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  animation: v2-fade var(--dur-2) var(--ease-enter);
}
.ui-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--gray-800); text-align: left; text-decoration: none;
  font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); cursor: pointer;
}
.ui-menu-item .ico { width: 16px; height: 16px; color: var(--icon); }
.ui-menu-item:hover { background: var(--bg-hover); color: var(--gray-900); }
.ui-menu-item:focus-visible { background: var(--bg-hover); color: var(--gray-900); outline: 2px solid var(--focus); outline-offset: -2px; }  /* arrow-key focus must be visible, not just a grey tint */
.ui-menu-item.is-danger { color: var(--danger-700); }
.ui-menu-item.is-danger .ico { color: var(--danger-600); }
.ui-menu-item.is-danger:is(:hover, :focus-visible) { background: var(--danger-50); }
.ui-menu-item:disabled { color: var(--text-disabled); cursor: not-allowed; background: none; }
.ui-menu-sep { height: 1px; margin: 4px -4px; background: var(--border-subtle); }
.ui-menu-back { position: fixed; inset: 0; z-index: calc(var(--z-menu) - 1); background: var(--backdrop); }
.ui-menu.is-sheet {
  left: 0; right: 0; bottom: 0; top: auto; max-width: none; min-width: 0; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); animation: v2-sheet-up var(--dur-3) var(--ease-enter);
}
.ui-menu.is-sheet .ui-menu-item { min-height: 48px; font-size: var(--fs-350); line-height: var(--lh-350); }
@media (max-width: 800px) { .ui-menu-item { min-height: var(--tap); } }   /* 601–800 px still opens as a popover */

/* ==== §3.10 Status pills ==== */

:is(.pill, .badge):not(:is(.doc, .receipt) *) {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm);
  font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); letter-spacing: 0; text-transform: none; text-decoration: none;
  white-space: nowrap; vertical-align: middle;
  background: var(--gray-100); color: var(--gray-700); box-shadow: inset 0 0 0 1px var(--gray-200);
}
.pill::before { content: none; }
/* neutral (default) — also: */
:is(.pill--neutral, .pill--draft, .pill--cancelled, .pill--instock, .pill--ok, .pill--notsent,
    .st-approved, .st-delivered, .st-completed, .st-cancelled, .st-returned, .lv-green):not(:is(.doc, .receipt) *) {
  background: var(--gray-100); color: var(--gray-700); box-shadow: inset 0 0 0 1px var(--gray-200); text-decoration: none;
}
:is(.pill--info, .pill--sent, .st-picking, .st-packing, .st-ready, .st-out, .lv-blue):not(:is(.doc, .receipt) *) {
  background: var(--info-50); color: var(--info-700); box-shadow: inset 0 0 0 1px var(--info-200);
}
:is(.pill--warning, .pill--partpaid, .pill--low, .pill--warn, .st-received, .st-price_approval, .st-payment_pending, .lv-yellow, .lv-orange):not(:is(.doc, .receipt) *) {
  background: var(--warning-50); color: var(--warning-700); box-shadow: inset 0 0 0 1px var(--warning-200);
}
:is(.pill--danger, .pill--overdue, .pill--out, .pill--bad, .st-stock_issue, .lv-red, .lv-critical):not(:is(.doc, .receipt) *) {
  background: var(--danger-50); color: var(--danger-700); box-shadow: inset 0 0 0 1px var(--danger-200);
}
:is(.pill--success, .pill--paid):not(:is(.doc, .receipt) *) {
  background: var(--success-50); color: var(--success-700); box-shadow: inset 0 0 0 1px var(--success-200);
}
/* R4 in tables and list rows: a neutral status is a plain word, not a grey box ("Approved" × 40 rows of grey
   boxes is still pill noise). Boxes remain for info / warning / danger / success. Specificity (0,4,0) beats the tone rules (0,2,0). */
:is(.table, .list, .home-list):not(:is(.doc, .receipt) *) :is(td, .list-row, .home-row) :is(.pill--neutral, .pill--draft, .pill--cancelled, .pill--instock, .pill--ok, .pill--notsent,
    .st-approved, .st-delivered, .st-completed, .st-cancelled, .st-returned, .lv-green) {
  height: auto; padding: 0; background: none; box-shadow: none; color: var(--text-secondary);
  font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui);
}

/* ==== §3.11 Tabs (underline) ==== */

:is(.tabs, .pj-dtabs) {
  display: flex; gap: 24px; margin: 0; padding: 0; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; background: none; border-radius: 0;
}
:is(.tabs, .pj-dtabs) > :is(button, a, .tab) {
  position: relative; flex-shrink: 0; height: 40px; min-height: 40px; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--text-secondary); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); text-decoration: none; white-space: nowrap; cursor: pointer;
}
:is(.tabs, .pj-dtabs) > :is(button, a, .tab):hover { color: var(--text); background: none; }
:is(.tabs, .pj-dtabs) > :is([aria-selected="true"], .on, .active) { color: var(--text); background: none; box-shadow: none; }
:is(.tabs, .pj-dtabs) > :is([aria-selected="true"], .on, .active)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--accent);
}
:is(.tabs, .pj-dtabs) .count { margin-left: 6px; }       /* count = .pill--neutral */
@media (max-width: 800px) { :is(.tabs, .pj-dtabs) { gap: 20px; margin: 0 -16px; padding: 0 16px; } :is(.tabs, .pj-dtabs) > * { height: 44px; } }

/* ==== §3.12 Modals and bottom sheets ==== */

.modal { padding: 24px; background: var(--backdrop); z-index: var(--z-modal); animation: v2-fade var(--dur-2) var(--ease-enter); }
.modal-box {
  width: min(640px, 100%); max-height: calc(100dvh - 48px); border: 0; border-radius: var(--radius-xl);
  background: var(--bg-surface); box-shadow: var(--shadow-lg); animation: v2-rise var(--dur-3) var(--ease-enter); overscroll-behavior: contain;
}
.modal-box.modal-sm { width: min(440px, 100%); }
.modal-box.modal-lg { width: min(880px, 100%); }
.modal-head {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px 10px 20px;
  background: var(--bg-surface); border-bottom: 1px solid var(--border);
}
.modal-head h3 { flex: 1; min-width: 0; margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.modal-head .pill { flex-shrink: 0; }
.modal-body { padding: 20px; }
.modal-foot {
  position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  padding: 12px 20px; background: var(--bg-surface); border-top: 1px solid var(--border);
}
.modal-foot .foot-start { display: flex; gap: 8px; margin-right: auto; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0 0 16px; font-size: var(--fs-300); }
.detail-grid p > strong:first-child { display: block; color: var(--text-secondary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); }
.log-line { padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-200); line-height: var(--lh-200); }
@keyframes v2-fade { from { opacity: 0; } }
@keyframes v2-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes v2-sheet-up { from { transform: translateY(100%); } }
@media (max-width: 600px) {
  .modal { padding: 0; align-items: end; place-items: end center; }
  .modal-box, .modal-box.modal-sm, .modal-box.modal-lg {
    width: 100%; max-height: 92dvh; border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: v2-sheet-up var(--dur-3) var(--ease-enter);
  }
  .modal-head { padding: 8px 8px 8px 16px; }
  .modal-body { padding: 16px; }
  .modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .modal-foot > :is(.btn, .primary-btn, .ghost-btn, .danger-btn) { flex: 1 1 0; min-height: var(--tap); }
  .modal-foot .foot-start { flex: 0 0 auto; }
  .detail-grid { grid-template-columns: 1fr; }
}

/* WP-1 addition — §3.12 prose: confirm dialog (ui.js has no marker block; title --text even when danger) + drag handles */
.ui-dlg-back { z-index: var(--z-dialog); background: var(--backdrop); animation: v2-fade var(--dur-2) var(--ease-enter); }
.ui-dlg {
  width: min(440px, 100%); padding: 24px; border: 0; border-radius: var(--radius-xl);
  background: var(--bg-surface); box-shadow: var(--shadow-lg); animation: v2-rise var(--dur-3) var(--ease-enter);
}
.ui-dlg-title, .ui-dlg.is-danger .ui-dlg-title { margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.ui-dlg-text { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.ui-dlg-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.msheet-box { animation: v2-sheet-up var(--dur-3) var(--ease-enter); }
.msheet-box::before { width: 36px; height: 4px; margin: 8px auto; border-radius: var(--radius-xs); background: var(--gray-300); }
@media (max-width: 600px) {
  .ui-dlg {
    width: 100%; padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; animation: v2-sheet-up var(--dur-3) var(--ease-enter);
  }
  .ui-dlg::before { width: 36px; height: 4px; margin: 8px auto; border-radius: var(--radius-xs); background: var(--gray-300); }
}

/* ==== §3.13 Toasts ==== */

.toast {
  left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-toast);
  min-width: 280px; max-width: min(480px, calc(100vw - 32px)); padding: 0; border-radius: var(--radius-lg);
  background: var(--gray-900); color: #fff; box-shadow: var(--shadow-lg);
  font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); animation: v2-toast var(--dur-2) var(--ease-enter);
}
@keyframes v2-toast { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast[data-type="success"] { --toast-accent: var(--success-on-dark); }
.toast[data-type="error"]   { --toast-accent: var(--danger-on-dark); }
.toast[data-type="warning"] { --toast-accent: var(--warning-on-dark); }
.toast[data-type="info"]    { --toast-accent: var(--info-on-dark); }
.toast .ui-toast-row {
  display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 8px 10px 14px; min-height: 44px;
  border-radius: inherit; box-shadow: none;
}
.ui-toast-ico { flex-shrink: 0; margin-top: 2px; color: var(--toast-accent, var(--gray-400)); font-size: 0; }
.toast .ui-toast-msg { flex: 1; min-width: 0; padding: 2px 0; }
.ui-toast-btn {
  flex-shrink: 0; min-height: 28px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--info-on-dark); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.ui-toast-btn:hover { background: rgba(255, 255, 255, 0.08); }
.ui-toast-x { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--gray-400); font-size: 0; }
.ui-toast-x:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.toast :focus-visible { outline-color: #fff; }                        /* blue ring is too faint on --gray-900 */
@media (max-width: 800px) {
  .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 32px); font-size: var(--fs-300); }
  .ui-toast-btn, .ui-toast-x { min-height: var(--tap); height: var(--tap); }
  .ui-toast-x { width: var(--tap); }
}

/* ==== §3.14 Empty states ==== */

.ui-empty { max-width: 400px; margin: 0 auto; padding: 48px 16px; text-align: center; }
.ui-empty-ico {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 12px;
  border-radius: var(--radius-full); background: var(--bg-muted); color: var(--icon); font-size: 0;
}
.ui-empty-title { margin: 0 0 4px; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.ui-empty-text { margin: 0 0 16px; color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.ui-empty-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }

/* ==== §3.15 Callouts (info / warning banners) ==== */

:is(.callout, .info-box, .warn-box, .pyr-banner) {
  margin: 0; padding: 12px 16px 12px 42px; border: 1px solid var(--info-200); border-radius: var(--radius-lg);
  background: var(--info-50) var(--ico-info) no-repeat 14px 14px / 16px 16px; color: var(--text);
  font-size: var(--fs-300); line-height: var(--lh-300);
}
:is(.callout--warning, .warn-box, .pyr-banner) { border-color: var(--warning-200); background-color: var(--warning-50); background-image: var(--ico-warning); }
.callout--danger  { border-color: var(--danger-200);  background-color: var(--danger-50);  background-image: var(--ico-danger); }
.callout--success { border-color: var(--success-200); background-color: var(--success-50); background-image: var(--ico-success); }
:is(.callout, .info-box, .warn-box, .pyr-banner) :is(strong, b) { font-weight: var(--fw-semibold); }
.callout-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ==== §3.16 List rows (Home lists, mobile records, compact lists) ==== */

.list, .home-list { display: flex; flex-direction: column; }
:is(.list-row, .home-row, .pyr-row) {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px;
  border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface);
}
:is(.list-row, .home-row, .pyr-row):last-child { border-bottom: 0; }
:is(.list-row, .home-row, .pyr-row).clickable:hover { background: var(--bg-subtle); }
:is(.list-lead, .home-ico) { flex-shrink: 0; width: 20px; color: var(--icon); font-size: 0; text-align: center; }
:is(.list-main, .home-main, .pyr-row-main) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
:is(.list-title, .home-t, .home-line) { color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.list-sub, .home-s) { color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.list-amt, .home-amt) { flex-shrink: 0; color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); font-variant-numeric: tabular-nums; }
.home-amt:is(.red, .green) { color: var(--text); }
:is(.list-actions, .pyr-row-act) { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.home-go { flex-shrink: 0; color: var(--gray-400); font-size: 0; }                  /* holds icon('next', 16) */
.home-calm { padding: 20px 16px; color: var(--text-secondary); font-weight: var(--fw-regular); text-align: center; }
@media (max-width: 800px) { :is(.list-row, .home-row, .pyr-row) { min-height: 56px; padding: 10px 16px; } :is(.list-title, .home-t) { font-size: var(--fs-350); line-height: var(--lh-350); } }

/* WP-1 addition — §3.16 prose: renderTable phone cards, restyled. Specificity (0,4,1)+ so the §3.9 cell rules
   (up to (0,3,2)) do not put table padding, dividers, width 1% and right-aligned actions on the card lines. */
@media (max-width: 700px) {
  .table.t-resp:not(:is(.doc, .receipt) *) tr { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
  .table.t-resp:not(:is(.doc, .receipt) *) tbody tr:last-child { border-bottom: 0; }
  .table.t-resp:not(:is(.doc, .receipt) *) tr:is(.clickable, .ui-t-click):hover { background: var(--bg-subtle); }
  .table.t-resp:not(:is(.doc, .receipt) *) :is(td, td:first-child, td:last-child) { padding: 3px 0; border: 0; background: none; }
  .table.t-resp:not(:is(.doc, .receipt) *) td::before { color: var(--text-secondary); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
  .table.t-resp:not(:is(.doc, .receipt) *) td.t-primary { padding-bottom: 4px; text-align: left; font: var(--fw-medium) var(--fs-350)/var(--lh-350) var(--font-ui); }
  .table.t-resp:not(:is(.doc, .receipt) *) td.t-actions { width: auto; padding-top: 8px; text-align: left; white-space: normal; }
  .table.t-resp:not(:is(.doc, .receipt) *) td.t-actions > .t-v { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  .table.t-resp:not(:is(.doc, .receipt) *) tfoot tr { background: var(--bg-subtle); }
}

/* ==== §3.18 Setup wizard stepper (Get up to date) ==== */

.su-head { padding: 16px; }
.su-head-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.su-steptxt { color: var(--text-secondary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); }
.su-steptxt strong { display: block; margin-top: 2px; color: var(--text); font: var(--fw-semibold) var(--fs-500)/var(--lh-500) var(--font-ui); letter-spacing: var(--tracking-tight); }
.su-bar { height: 4px; margin: 12px 0 0; border-radius: var(--radius-xs); background: var(--gray-150); overflow: hidden; }
.su-bar > span { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--accent); transition: width var(--dur-3) var(--ease-standard); }
.su-dots { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.su-dot {
  position: relative; display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; min-height: 0; padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--bg-surface);
  color: var(--text-tertiary); font: var(--fw-semibold) var(--fs-100)/1 var(--font-ui); cursor: pointer;
}
.su-dot + .su-dot::before { content: ""; position: absolute; right: calc(100% + 1px); top: 50%; width: 16px; height: 1px; background: var(--border); }
.su-dot.done { border-color: var(--accent); background: var(--accent); color: #fff; font-size: 0; }   /* holds icon('check', 14) */
.su-dot.cur { border: 2px solid var(--accent); color: var(--brand-700); }
.su-dot:hover { border-color: var(--accent); }
.su-foot {
  position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: var(--bg-surface); border-top: 1px solid var(--border);
}
.su-foot .su-next { margin-left: auto; }
@media (max-width: 800px) {
  .su-dots { display: none; }
  .su-steptxt strong { font-size: var(--fs-400); line-height: var(--lh-400); }
  .su-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .su-foot .su-btn { min-height: var(--tap); }
  .su-foot .su-next { flex: 1 1 auto; }
}

/* ==== §3.19 Help panel and "?" popover ==== */

.ui-help {
  width: 20px; height: 20px; margin: 0 4px; padding: 0; border: 0; border-radius: var(--radius-full);
  background: none; color: var(--text-tertiary); font-size: 0; vertical-align: -4px;
}
.ui-help:hover, .ui-help[aria-expanded="true"] { background: var(--bg-hover); color: var(--text); }
.ui-help::after { inset: -12px; }                      /* legacy ::after is -11px around a 22 px button; 20 + 24 = 44 px hit area */
.ui-pop {
  z-index: var(--z-popover); padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-md); font-size: var(--fs-300); line-height: var(--lh-300);
}
.ui-pop-title { margin-bottom: 4px; color: var(--text); font-weight: var(--fw-semibold); }
.ui-pop-ex { color: var(--text-secondary); font-size: var(--fs-200); }

.help-panel-wrap { z-index: var(--z-dialog); }
.help-panel-backdrop { background: var(--backdrop); }
.help-panel { background: var(--bg-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); }
.help-panel-head { min-height: 56px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--border); color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.help-panel-body { padding: 20px; }
@media (min-width: 700px) { .help-panel { left: auto; top: 0; width: 420px; border-radius: 0; border-left: 1px solid var(--border); } }

/* ==== §3.20 Mobile bottom bar and "New" sheet ==== */

@media (max-width: 800px) {
  .mbar {
    height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 4px 4px env(safe-area-inset-bottom, 0px); gap: 0;
    background: var(--bg-surface); border-top: 1px solid var(--border); box-shadow: none; z-index: var(--z-mbar);
  }
  .mbar-item {
    min-height: 52px; gap: 2px; border-radius: var(--radius-md); background: none; color: var(--text-secondary);
    font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui);
  }
  .mbar-ico { font-size: 0; line-height: 0; }                                   /* holds icon(..., 22) */
  .mbar-item.active { background: none; color: var(--brand-700); }
  .mbar-item.active .ico { color: var(--brand-600); }
  .mbar-plus { color: var(--text-secondary); }
  .mbar-plus .mbar-ico {
    display: grid; place-items: center; width: 40px; height: 28px; margin: 0; border: 0; border-radius: var(--radius-md);
    background: var(--accent); color: #fff; box-shadow: none;
  }
  .app > .main { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
.msheet { background: var(--backdrop); z-index: var(--z-sheet); }
.msheet-box { padding: 8px 8px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); }
.msheet-head { padding: 4px 8px 8px 12px; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.msheet-grid { display: flex; flex-direction: column; gap: 0; }
.msheet-btn {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border: 0; border-radius: var(--radius-md);
  background: none; color: var(--text); font: var(--fw-medium) var(--fs-350)/var(--lh-350) var(--font-ui); text-align: left;
}
.msheet-btn:hover { background: var(--bg-hover); }
.msheet-btn:last-child:nth-child(odd) { grid-column: auto; }
.msheet-ico { width: 20px; color: var(--icon); font-size: 0; }

/* ==== §3.21 Global search (command palette) ==== */

.modal-box.gs { width: min(640px, 100%); align-self: start; margin-top: 12vh; }
.gs .modal-head { display: none; }
.gs-field { position: relative; border-bottom: 1px solid var(--border); }
.gs-field input#gs-q {
  width: 100%; height: 52px; min-height: 52px; padding: 0 44px 0 44px; border: 0; border-radius: 0; box-shadow: none;
  background: var(--bg-surface) var(--ico-search) no-repeat 16px center / 18px 18px; font-size: var(--fs-400);
}
.gs-field .btn-icon { position: absolute; right: 8px; top: 8px; }
#gs-results { max-height: 60dvh; overflow-y: auto; padding: 8px; }
.gs-group { padding: 8px 8px 4px; color: var(--text-tertiary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); }
.gs-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px; border: 0; border-radius: var(--radius-md); cursor: pointer; }
.gs-row .ico { color: var(--icon); }
.gs-row:hover { background: var(--bg-hover); }
.gs-row.is-active { background: var(--bg-selected); }                                   /* arrow-key position: distinct from hover */
.gs-row:focus-visible { background: var(--bg-selected); outline: 2px solid var(--focus); outline-offset: -2px; }
.gs-row-title { flex: 1; min-width: 0; color: var(--text); font-size: var(--fs-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row-hint { flex-shrink: 0; color: var(--text-tertiary); font-size: var(--fs-100); }
.gs-foot { display: flex; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border); color: var(--text-tertiary); font-size: var(--fs-100); }
@media (max-width: 600px) { .modal-box.gs { margin-top: 0; align-self: end; } .gs-foot { display: none; } }
@media (max-width: 800px) { .gs-row { min-height: 48px; } }

/* ==== §3.22 Login screen ==== */

.login-screen { background: var(--bg-canvas); padding: 16px; }
.login-box {
  width: min(400px, 100%); padding: 32px; border: 1px solid var(--border); border-top: 1px solid var(--border);
  border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: none; text-align: left;   /* R7: resting card, border only */
}
.login-logo img { width: 40px; height: 40px; }
.login-box h1 { margin: 16px 0 0; color: var(--brand-900); font: 700 20px/28px var(--font-brand); letter-spacing: 0.04em; text-transform: uppercase; }
.login-sub { margin: 4px 0 24px; color: var(--text-secondary); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); letter-spacing: 0; text-transform: none; }
.login-box form { gap: 16px; }
.login-box label { gap: 6px; color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.login-box input { height: var(--control-lg); min-height: var(--control-lg); }
.login-box .primary-btn { width: 100%; min-height: var(--control-lg); }
.login-error { color: var(--danger-700); font-size: var(--fs-200); text-align: left; }
.demo-creds { margin-top: 24px; padding: 0; background: none; color: var(--text-secondary); font-size: var(--fs-200); }
.demo-creds a { color: var(--text-link); font-weight: var(--fw-medium); }

/* ==== §3.23 Loading, sync and version pills ==== */

.skeleton { height: 12px; border-radius: var(--radius-sm); background: var(--gray-150); animation: v2-pulse 1.4s ease-in-out infinite; }
@keyframes v2-pulse { 50% { opacity: 0.5; } }

/* WP-1 addition — §3.23 prose: sync badge + perf/version pill (inline styles on #sync-badge win until WP-3 removes them) */
#sync-badge, .erp-pill {
  padding: 6px 12px; border: 0; border-radius: var(--radius-md); background: var(--gray-900); color: var(--gray-0);
  font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); box-shadow: var(--shadow-lg);
}
.erp-pill { min-height: var(--control-md); }
.erp-pill.warn { background: var(--warning-700); }   /* retry state keeps its legacy amber */
@media (max-width: 800px) { .erp-pill { min-height: var(--tap); } }

/* ==== §4.4 Icons used from CSS ==== */

:root {
  --ico-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 21-4.34-4.34'/%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3C/svg%3E");
  --ico-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23006ad7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
  --ico-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23dc6803' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
  --ico-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d92d20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E");
  --ico-success: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23079455' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m16 9-5.5 5.5L8 12'/%3E%3C/svg%3E");
}

/* ---------- Appendix A — OPTIONAL navy sidebar. Inert unless <html data-sidebar="navy">: every selector is scoped to
   [data-sidebar="navy"], so the default light sidebar (§3.1) is unaffected. Token swap only, no markup change. ---------- */
[data-sidebar="navy"] .sidebar { background: var(--brand-900); border-right: 0; color: #c3cfdd; }
[data-sidebar="navy"] .sidebar-brand { border-bottom-color: rgba(255, 255, 255, 0.10); }
[data-sidebar="navy"] .sidebar-brand strong { color: #ffffff; }
[data-sidebar="navy"] #nav .nav-item { color: #c3cfdd; }
[data-sidebar="navy"] #nav .nav-item .ico { color: #8fa6c1; }
[data-sidebar="navy"] #nav .nav-item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
[data-sidebar="navy"] #nav .nav-item:hover .ico { color: #ffffff; }
[data-sidebar="navy"] #nav .nav-item.active { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
[data-sidebar="navy"] #nav .nav-item.active .ico { color: #ffffff; }
[data-sidebar="navy"] #nav :is(.nav-item, .nav-group, .nav-pin):focus-visible { outline-color: #ffffff; }
[data-sidebar="navy"] :is(.nav-group, .nav-sub, .nav-fav-head, .nav-fav-hint, .nav-fav-add, .nav-chev, .nav-ext-ico) { color: #8fa6c1; }
[data-sidebar="navy"] .nav-group:hover, [data-sidebar="navy"] .nav-fav-add:hover { color: #ffffff; background: none; }
[data-sidebar="navy"] .nav-group.has-active[aria-expanded="false"] .nav-group-lbl::after { background: #ffffff; }
[data-sidebar="navy"] .nav-fav-edit { color: #c3cfdd; }
[data-sidebar="navy"] .nav-fav-edit:hover, [data-sidebar="navy"] .nav-fav-edit[aria-pressed="true"] { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
[data-sidebar="navy"] .nav-pin { color: #8fa6c1; }
[data-sidebar="navy"] .nav-pin:hover, [data-sidebar="navy"] .nav-pin.on { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
[data-sidebar="navy"] :is(.nav-fav, .sidebar-bottom) { border-color: rgba(255, 255, 255, 0.10); }
[data-sidebar="navy"] .sb-user-name { color: #ffffff; }
[data-sidebar="navy"] .sb-user-role { color: #8fa6c1; }
[data-sidebar="navy"] .avatar { background: rgba(255, 255, 255, 0.12); color: #ffffff; }
[data-sidebar="navy"] .sidebar .btn-icon { color: #c3cfdd; }
[data-sidebar="navy"] .sidebar .btn-icon:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
/* ---------- end Appendix A ---------- */

/* ---------- Page work-package marker blocks (§8.1): a page WP edits ONLY between its own markers ---------- */

/* === WP-4 ui.js components === */
/* WP-4 — ui.js components. theme.css (WP-1) already styles the menu, pills, toast, empty state, "?" button,
   the confirm dialog (§3.12 addition) and the ui.table() phone cards (§3.16 addition). This block adds only
   the parts ui.js renders that those rules leave out. Tokens only (R14). */

/* ---- confirm dialog (ui.confirmAsync): long titles and form content passed as o.html ---- */
.ui-dlg { overscroll-behavior: contain; }
.ui-dlg-title { overflow-wrap: anywhere; }
.ui-dlg-text > :first-child { margin-top: 0; }
.ui-dlg-text > :last-child { margin-bottom: 0; }
.ui-dlg-text p { margin: 0 0 8px; }
.ui-dlg-text .fld { margin: 12px 0 8px; }

/* ---- overflow menu (ui.menu): labels, icon spacer, open trigger, text trigger, phone-only parts, sheet Cancel ---- */
.ui-menu { overflow-y: auto; overscroll-behavior: contain; }
.ui-menu-lbl { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-menu-ico-sp { flex-shrink: 0; width: 16px; }                          /* keeps labels aligned when one item has no icon */
.ui-menu-btn[aria-expanded="true"] { background: var(--bg-hover); color: var(--gray-900); }
.ui-menu-btn.btn-secondary[aria-expanded="true"] { background: var(--gray-100); border-color: var(--gray-400); }
.ui-menu-btn.btn .ico { margin: 0 -4px 0 0; }                             /* trailing chevron of a text trigger ("More") */
/* page-header secondaries are repeated in the menu for phones only (§3.3; WP-1 hides the items): their separator,
   and a trigger whose menu holds only such items, hide on desktop too */
.ui-menu-sep[data-mobile-only], .ui-menu-btn[data-mobile-only] { display: none; }
.ui-menu.is-sheet { max-height: 85dvh; }
.ui-menu.is-sheet .ui-menu-cancel { justify-content: center; color: var(--gray-700); font-weight: var(--fw-medium); }
@media (max-width: 800px) {
  .ui-menu-sep[data-mobile-only] { display: block; }
  .ui-menu-btn[data-mobile-only] { display: inline-flex; }
}

/* ---- toast (ui.toast): icon-only dismiss centred, busy Undo ---- */
.ui-toast-x { display: inline-grid; place-items: center; padding: 0; }
.ui-toast-btn:disabled { color: var(--gray-400); }

/* ---- "?" popover (ui.help) ---- */
.ui-pop-text { margin: 0; }
.ui-pop-ex { margin: 6px 0 0; }
.ui-pop .btn-link { margin-top: 8px; }
@media (max-width: 800px) {
  .ui-pop .btn-link { position: relative; }
  .ui-pop .btn-link::after { content: ""; position: absolute; inset: -12px -4px; }   /* 44 px hit area (R16) */
}

/* ---- ui.table() / renderTable ---- */
.table:not(:is(.doc, .receipt) *) th.t-actions { width: 1%; }
/* phone cards: the record's name (column flagged primary) heads the card wherever the column sits on desktop;
   a cell whose value renders nothing (a normal status, ui.status() = "") drops its label line too */
@media (max-width: 700px) {
  .table.t-resp:not(:is(.doc, .receipt) *) tbody tr { display: flex; flex-direction: column; }
  .table.t-resp:not(:is(.doc, .receipt) *) tbody td.t-primary { order: -1; }
  .table.t-resp:not(:is(.doc, .receipt) *) td:has(> .t-v:empty) { display: none; }
}
/* === end WP-4 === */

/* === WP-3 page styles (Shell) === */
/* WP-3 shell: skip link, page header helpers, sync + version pills, product thumb placeholder, login, palette hint.
   Component CSS for the sidebar, topbar, page header, modal, bottom bar, sheet, palette and login is in §3 (WP-1). */

/* skip link — first Tab stop (§8.2 WP-3, R18) */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: var(--z-toast);
  padding: 8px 12px; border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-link);
  font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); text-decoration: none; box-shadow: var(--shadow-md);
}
.skip-link:focus { top: 8px; }
#view:focus, #modal-box:focus { outline: none; }          /* programmatic focus targets (tabindex="-1"), not controls */

/* sidebar: a long label ("Mistri form — Euro + folding") wraps to a second line instead of being cut to
   "Mistri form — …"; the 8 px block padding keeps one-line items at 36 px (20 px line + 16). Phones keep WP-1's 44 px rule. */
#nav .nav-item { padding-top: 8px; padding-bottom: 8px; }
#nav .nav-lbl { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.nav-fav-add .ico { color: var(--icon); }

/* page header extras */
.page-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.page-title-row .page-title { min-width: 0; }
.page-actions .pa-menu { display: inline-flex; }
@media (min-width: 801px) { .page-actions .pa-menu--mobile { display: none; } }   /* only mobile-only items inside */
@media (max-width: 800px) {
  .page-head.no-actions:not(.has-back) { display: none; }                          /* the topbar already shows the title */
}

/* "Syncing…" while data loads (§3.23) — dark, compact, no pill radius */
.sync-badge {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: var(--z-mbar);
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-md);
  background: var(--gray-900); color: var(--gray-0); box-shadow: var(--shadow-lg);
  font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); pointer-events: none;
}

/* new data / retry / new version pill (§3.23): message + a text action, one button */
.erp-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 6px 4px 12px;
  border: 0; border-radius: var(--radius-md); background: var(--gray-900); color: var(--gray-0);
  font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); box-shadow: var(--shadow-lg); z-index: var(--z-mbar);
}
.erp-pill[hidden] { display: none; }
.erp-pill.warn { background: var(--gray-900); }
.erp-pill .ico { color: var(--warning-on-dark); }
.erp-pill-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.erp-pill-act { flex-shrink: 0; padding: 2px 8px; border-radius: var(--radius-sm); color: var(--info-on-dark); font-weight: var(--fw-semibold); }
.erp-pill:hover .erp-pill-act { background: rgba(255, 255, 255, 0.08); }
.erp-pill:active { transform: translateX(-50%); }                                     /* no press scale (R12) */
.erp-pill:focus-visible { outline: 2px solid var(--gray-0); outline-offset: 2px; }
@media (max-width: 800px) { .erp-pill { min-height: var(--tap); } }

/* product photo placeholder (productThumb) */
.pthumb-ph {
  display: grid; place-items: center; width: 100%; height: 100%; min-width: 24px; min-height: 24px;
  border-radius: inherit; background: var(--bg-muted); color: var(--icon);
}

/* approvals link that wraps a warning pill (pendingBadgeHTML) */
.pending-link { display: inline-flex; text-decoration: none; }
.pending-link:hover .pill { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 800px) { .pending-link, .demo-creds a { min-height: var(--tap); align-items: center; } }   /* R16: 44 px hit area on phones */

/* login: note + portal link, and the one-time "Cloud setup needed" steps */
.demo-creds p + p { margin-top: 8px; }
.demo-creds a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.demo-creds a:hover { text-decoration: underline; text-underline-offset: 2px; }
.login-link-ico { display: inline-flex; color: currentColor; }
.login-setup { text-align: left; color: var(--text); font-size: var(--fs-300); line-height: var(--lh-300); }
.login-setup ol { margin: 8px 0 0; padding-left: 20px; }
.login-setup li { margin: 4px 0; }
.login-setup code { font: var(--fs-200)/var(--lh-200) var(--font-mono); }

/* command palette: "type at least 2 letters" line */
.gs-empty { margin: 0; padding: 24px 16px; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); text-align: center; }

/* mobile bottom bar: every tab gets the same 28 px icon box as the "New" pill, so the five labels share one baseline */
@media (max-width: 800px) {
  .mbar-item .mbar-ico { display: grid; place-items: center; height: 28px; }
}

/* === end WP-3 === */

/* === WP-5 page styles (Home, Sales) === */
/* WP-5 — Home, Overview, New sale (POS), Bills & orders + order modal, Deliveries, Approvals (app.js range D).
   Spec §7.1, §7.6, §7.7, §7.12. Tokens only; page-scoped selectors. Shared legacy classes that other ranges also
   use (.totals-box, .trow, .step-*, .pp-img, .suggest-*, .board-*, .proof-img) are restyled only inside a WP-5
   container (.pos-*, .ord-*, #pos-cust-suggest, .ful-board, .pv-body), so Stock, Projects and Quotes are untouched. */

/* ================= Home (§7.1) ================= */
/* phone quick actions: 2 columns of 48 px secondary buttons; on desktop the page header carries them */
.home-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.home-tiles .home-tile {
  flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 48px; padding: 0 12px;
  border-radius: var(--radius-md); box-shadow: none; text-align: left; white-space: normal;
}
.home-tiles .home-tile .ico { width: 18px; height: 18px; margin: 0; color: var(--icon); }
.home-tiles .home-tile span { min-width: 0; font-size: inherit; line-height: inherit; }   /* legacy: 1.7rem emoji span */
@media (min-width: 801px) { .home-tiles { display: none; } }

/* To do + Your recent entries: stacked, two columns from 1100 px */
.home-lists { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 1100px) { .home-lists { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
@media (max-width: 800px) { .home-lists { gap: 12px; } }
.home-card .card-head .card-link { min-height: 0; margin: 0; padding: 0; }             /* legacy: -10px margins, 40 px box */
:is(.home-ico, .home-go) { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.home-nums .stat-sub .pill { vertical-align: 0; }

/* ================= Overview (§7.12) ================= */
.ov-card .list-row { min-height: 48px; }
a.list-row.ov-link { color: var(--text); text-decoration: none; }
.ov-link .list-amt { color: var(--text-secondary); font-weight: var(--fw-medium); }
.ov-more { min-height: 40px; }
.ov-card .card-head .pill { flex-shrink: 0; }
.ov-log .log-line { margin: 0; }
.ov-log .log-line:first-child { padding-top: 0; }
.ov-log .log-line:last-child { padding-bottom: 0; border-bottom: 0; }

/* ================= New sale — POS (§7.7) ================= */
.pos-grid { grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; }
.pos-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pos-search-inp { width: 100%; }
.pos-left .card-head .btn-link { flex-shrink: 0; }

/* customer search suggestions (inline list under the field, not a floating layer) */
#pos-cust-suggest {
  margin: 4px 0 0; max-height: 320px; overflow-y: auto; padding: 0;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none;
}
#pos-cust-suggest .suggest-item {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 52px; margin: 0; padding: 8px 12px;
  border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: none;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); text-align: left; cursor: pointer;
}
#pos-cust-suggest .suggest-item:last-child { border-bottom: 0; }
#pos-cust-suggest button.suggest-item:hover { background: var(--bg-hover); }
#pos-cust-suggest .suggest-item:focus-visible { outline-offset: -2px; }
#pos-cust-suggest .suggest-none { justify-content: center; color: var(--text-secondary); cursor: default; }
.sg-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.sg-type { flex-shrink: 0; color: var(--text-tertiary); font-size: var(--fs-100); line-height: var(--lh-100); }
.sg-sub { color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px; overflow-wrap: anywhere; }

/* selected customer */
.list-row.pos-cust-row {
  margin: 8px 0 0; padding: 10px 8px 10px 12px; min-height: 0;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle);
}
.pos-cust-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
#pos-cust-warn .callout { margin-top: 8px; }

/* products */
.pos-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.pos-products { gap: 8px; margin-top: 12px; }
.pos-product {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: none;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); text-align: left; cursor: pointer;
}
.pos-product:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.pos-product:focus-visible { outline-offset: -2px; }
.pos-product.outstock { opacity: 0.6; }
.pos-product .pp-img {
  display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; overflow: hidden;
  border-radius: var(--radius-md); background: var(--bg-muted); color: var(--icon); font-size: 0;
}
.pos-product .pp-img img { width: 100%; height: 100%; object-fit: cover; }
.pos-product .pp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: var(--lh-100); }
.pp-name { color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); overflow-wrap: anywhere; }
.pp-meta, .pp-stock { color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
.pp-stock.is-low { color: var(--warning-700); }
.pp-stock.is-out { color: var(--danger-700); }
.pos-product .pp-price { flex-shrink: 0; color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-none { margin: 0; padding: 24px 8px; color: var(--text-secondary); text-align: center; }

/* step-by-step picker (category › colour › items) */
.pos-products .step-crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 4px;
  color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200);
}
.pos-products .step-crumb .btn-tertiary { margin-left: -8px; padding: 0 8px; }
.pos-products .step-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.pos-products .step-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 64px; margin: 0;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: none;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); text-align: left; cursor: pointer;
}
.pos-products .step-card:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.pos-products .step-card:focus-visible { outline-offset: -2px; }
.pos-products .step-name { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.pos-products .step-sub { color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
.pos-products .step-swatch { display: block; width: 24px; height: 24px; margin: 0 0 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* colour picker modal (Slim Aluminium Shutter Profile) */
.pos-m-hint { margin: 0 0 12px; }
.pos-m-back { margin: 0 0 12px; }
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.color-card {
  display: flex; flex-direction: column; align-items: stretch; width: 100%; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: none;
  color: var(--text); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); text-align: left; cursor: pointer;
}
.color-card:hover { border-color: var(--border-strong); box-shadow: none; }
.color-card:focus-visible { outline-offset: 2px; }
.color-card .color-swatch { display: block; height: 56px; border-bottom: 1px solid var(--border); }
.color-name { display: block; padding: 8px 12px; overflow-wrap: anywhere; }

/* group quantity modal */
.pos-m-scroll, .ord-m-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pos-m-scroll .table, .ord-m-scroll .table { min-width: 0; }
.pos-grp-table th.pos-qty-col { text-align: right; }
.pos-grp-table td:last-child { width: 1%; text-align: right; white-space: nowrap; }
.pos-grp-table td.pos-out { color: var(--danger-700); }
.qty-mini { display: inline-flex; align-items: center; gap: 4px; }
.qty-mini button {
  display: inline-grid; place-items: center; flex-shrink: 0; width: var(--control-md); height: var(--control-md); padding: 0;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface);
  color: var(--gray-800); font: var(--fw-medium) var(--fs-400)/1 var(--font-ui); cursor: pointer;
}
.qty-mini button:hover { background: var(--gray-50); border-color: var(--gray-400); }
.qty-mini input { width: 64px; padding: 0 8px; }

/* cart (right column, sticky; the footer with "Create bill" stays in view) */
.pos-cart { position: sticky; top: 72px; }
@media (min-width: 901px) {
  .pos-cart { max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
  .pos-cart .pos-foot { position: sticky; bottom: 0; z-index: 1; background: var(--bg-surface); }
}
.pos-cart .card-head .pill { flex-shrink: 0; }
/* one line = two rows: name + remove | quantity · rate · line total */
.pos-cart .pos-line {
  display: grid; grid-template-columns: 64px 88px minmax(0, 1fr) auto;
  grid-template-areas: "name name name del" "qty rate total total";
  align-items: center; gap: 4px 8px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
}
.pos-cart .pos-line:first-child { padding-top: 0; }
.pos-cart .pos-line > .pl-name { grid-area: name; min-width: 0; }
.pos-cart .pos-line > input:nth-of-type(1) { grid-area: qty; }
.pos-cart .pos-line > input:nth-of-type(2) { grid-area: rate; }
.pos-cart .pos-line > input { width: 100%; }
.pos-cart .pos-line > .pl-total { grid-area: total; text-align: right; }
.pos-cart .pos-line > .pl-del { grid-area: del; }
.pos-cart .pl-name { display: flex; flex-direction: column; gap: 0; }
.pos-cart .pl-title { font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.pos-cart .pl-name small { color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
.pos-cart .pl-name small:is(.pl-warn, .pl-note) { color: var(--warning-700); }
.pos-cart .pl-total { color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-empty { margin: 0; padding: 16px 0; color: var(--text-secondary); text-align: center; }
/* totals */
:is(.pos-cart, .ord-m) .totals-box { margin: 12px 0 16px; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--bg-subtle); }
:is(.pos-cart, .ord-m) .trow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 0;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); font-variant-numeric: tabular-nums;
}
:is(.pos-cart, .ord-m) .trow > span:last-child { white-space: nowrap; }
:is(.pos-cart, .ord-m) .trow.total {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui);
}
/* fields: "Bill under" full width, then Discount + Delivery charge side by side */
.pos-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.pos-fields > .pos-f-wide, .pos-fields > :only-child { grid-column: 1 / -1; }
.pos-fields .fld { min-width: 0; }
.pos-pay .seg { display: flex; width: 100%; }
.pos-pay .seg > button { flex: 1 1 0; }
.pos-cart .card-body > .fld:last-child { margin-bottom: 0; }
/* footer: primary full width, "Save as order only" under it */
.pos-foot { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; }
.pos-main-act { display: flex; align-items: center; gap: 4px; }
.pos-main-act .btn-block { flex: 1 1 auto; width: auto; }
@media (max-width: 900px) {
  .pos-grid { grid-template-columns: minmax(0, 1fr); }            /* customer → products → bill */
  .pos-cart { position: static; }
  .pos-left { gap: 12px; }
}
@media (max-width: 800px) {
  .pos-grid { gap: 12px; }
  .pos-cart .pos-line { grid-template-columns: 72px 96px minmax(0, 1fr) auto; }
  .qty-mini { gap: 2px; }
  .qty-mini button { width: var(--tap); height: var(--tap); }
  .qty-mini input { width: 56px; height: var(--tap); min-height: var(--tap); }
  .pos-shortcuts .btn { white-space: normal; text-align: left; }
  .pos-products .step-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}
@media (max-width: 420px) { .pos-fields { grid-template-columns: minmax(0, 1fr); } }

/* ================= Bills & orders (§7.6) ================= */
.ord-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--border); background: var(--bg-surface);
}
.ord-toolbar #ord-search { flex: 0 1 320px; width: 320px; min-width: 200px; }
.ord-toolbar #ord-status { flex: 0 0 auto; width: auto; min-width: 168px; }
.ord-sum { margin-left: auto; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-table .o-chk { width: 40px; }
.o-chk-lbl { display: inline-flex; align-items: center; cursor: pointer; }
.o-chk-txt { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ord-table .o-no strong { display: block; }
.ord-table .o-sub { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
.o-viewed { display: inline-flex; align-items: center; gap: 2px; color: var(--text-tertiary); }
.ord-table .o-cust-name { display: block; }
.ord-table .o-sm { display: none; }
.ord-table td.o-act { width: 1%; }
@media (max-width: 800px) {
  .ord-toolbar #ord-search { flex: 1 1 100%; width: 100%; min-width: 0; }
  .ord-toolbar #ord-status { flex: 1 1 auto; min-width: 0; }
  /* the table becomes list rows: customer + total | "SO-1042 · 27 Sep 2026" + status */
  #order-table .ord-table, #order-table .ord-table tbody { display: block; width: 100%; min-width: 0; }
  #order-table .ord-table thead { display: none; }
  #order-table .ord-table thead:has(.o-chk) { display: block; }
  #order-table .ord-table thead tr { display: flex; align-items: center; padding: 0 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
  #order-table .ord-table thead th { display: none; }
  #order-table .ord-table thead th.o-chk { position: static; display: block; width: auto; height: auto; padding: 0; border: 0; background: none; }
  #order-table .ord-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cust total" "cust st";
    align-items: center; gap: 2px 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface);
  }
  #order-table .ord-table tbody tr:has(> td.o-chk) { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "chk cust total" "chk cust st"; padding-left: 8px; }
  #order-table .ord-table tbody tr:last-child { border-bottom: 0; }
  #order-table .ord-table tbody tr.clickable:hover { background: var(--bg-subtle); }
  #order-table .ord-table td { display: block; min-width: 0; padding: 0; border: 0; background: none; }
  #order-table .ord-table :is(td.o-no, td.o-date, td.o-src, td.o-del, td.o-act) { display: none; }
  #order-table .ord-table td.o-chk { grid-area: chk; width: auto; }
  #order-table .ord-table td.o-cust { grid-area: cust; }
  #order-table .ord-table td.o-total { grid-area: total; align-self: end; font-weight: var(--fw-semibold); }
  #order-table .ord-table td.o-st { grid-area: st; align-self: start; justify-self: end; text-align: right; }
  #order-table .o-cust-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: 2px; margin-block: -2px;
    font: var(--fw-medium) var(--fs-350)/var(--lh-350) var(--font-ui);
  }
  #order-table .ord-table .o-sm {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px;
  }
  #order-table .o-chk-lbl { justify-content: center; min-width: 32px; min-height: var(--tap); }
  #order-table thead .o-chk-lbl { gap: 8px; color: var(--text-secondary); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
  #order-table thead .o-chk-txt { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  #order-table .ord-table tr.o-empty { display: block; }
  #order-table .ord-table tr.o-empty td { padding: 32px 16px; text-align: center; color: var(--text-secondary); }
}

/* ---- order modal ---- */
.ord-m .detail-grid .btn-icon { margin: -8px 0; vertical-align: middle; }
.ord-m > .callout { margin: 0 0 16px; }
.ord-m > p.small { margin: 0 0 12px; }
.ord-m .ord-m-scroll { margin-top: 4px; }
.ord-m .ord-totals { width: 100%; max-width: 360px; margin-left: auto; }   /* after the shared .totals-box margin */
/* "Change" beside Delivery charge (admin / manager, migration-60): a small link inside the label cell */
.ord-m .trow-dc .btn-link { margin-left: 8px; font-size: var(--fs-200); line-height: var(--lh-200); vertical-align: baseline; }
.ord-m-scroll .table td:first-child { min-width: 144px; }
.ord-warn { color: var(--warning-700); }
.ord-note { margin: 0 0 8px; }
.ord-note strong { margin-right: 4px; color: var(--text-secondary); font-weight: var(--fw-medium); }
.ord-pays { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ord-pays .list-row { flex-wrap: wrap; gap: 4px 12px; }
.ord-pays .list-main { flex: 1 1 200px; }
:is(.ord-m, .pv-body) .proof-img { display: block; max-width: 100%; max-height: 300px; margin: 8px 0 0; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.ord-hist { margin-top: 24px; padding-top: 8px; border-top: 1px solid var(--border-subtle); }
.ord-hist > summary {
  display: flex; align-items: center; gap: 6px; min-height: var(--control-md); cursor: pointer; list-style: none;
  color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.ord-hist > summary::-webkit-details-marker { display: none; }
.ord-hist > summary::before {
  content: ""; flex-shrink: 0; width: 16px; height: 16px; background: var(--ico-chevron-down) no-repeat center / 16px 16px;
  transform: rotate(-90deg); transition: transform var(--dur-1) var(--ease-standard);
}
.ord-hist[open] > summary::before { transform: none; }
.ord-hist .log-line:last-child { border-bottom: 0; }
@media (max-width: 800px) { .ord-hist > summary { min-height: var(--tap); } }
@media (max-width: 600px) {
  .ord-m .ord-totals { max-width: none; }
  /* phone footer: "More" + one secondary on the first row, the single primary full width under them */
  .ord-m-foot { flex-wrap: wrap; }
  .ord-m-foot > .btn-primary { flex: 1 1 100%; order: 2; }
}

/* ---- deliver modal ---- */
.dlv-table .dlv-qty { width: 88px; }
.pv-body .pv-amt { font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); font-variant-numeric: tabular-nums; }
.pv-body > .callout { margin-top: 16px; }

/* ================= Deliveries board (§7.12) ================= */
.ful-board {
  display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0 0 8px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent;
}
.ful-board .board-col {
  flex: 0 0 256px; width: 256px; min-width: 256px; padding: 8px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ful-board .board-col-head {
  display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; padding: 0 4px 8px;
  color: var(--text); font: var(--fw-semibold) var(--fs-200)/var(--lh-200) var(--font-ui);
}
.ful-board .board-col-head > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ful-board .board-col-head .count {
  margin: 0; padding: 0; background: none; border-radius: 0;
  color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); font-variant-numeric: tabular-nums;
}
.ful-board .board-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 0 8px; padding: 12px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: none;
  color: var(--text); font-size: var(--fs-200); line-height: var(--lh-200); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-standard);
}
.ful-board .board-card:last-child { margin-bottom: 0; }
.ful-board .board-card:hover { outline: none; border-color: var(--border-strong); }
.ful-board .board-card:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ful-board .bc-no { color: var(--text-secondary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); }
.ful-board .bc-cust { max-width: 100%; color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); overflow-wrap: anywhere; }
.ful-board .bc-meta { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ful-board .bc-pill { margin-top: 2px; }
.ful-board .board-card > .btn { align-self: stretch; margin-top: 8px; }
.ful-board .bc-empty { margin: 0; padding: 8px 4px; color: var(--text-tertiary); font-size: var(--fs-200); line-height: var(--lh-200); text-align: center; }
@media (max-width: 800px) {
  .ful-board { margin: 0 -16px; padding: 0 16px 8px; }
  .ful-board .board-col { flex-basis: 272px; width: 272px; min-width: 272px; }
}

/* ================= Approvals (§7.12) ================= */
.apv-tabs { margin: 0; }
.apv-tabs .app-tab { display: inline-flex; align-items: center; }
.apv-acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
#approval-body > .card .card-head .ui-help { flex-shrink: 0; }

/* === end WP-5 === */

/* === WP-6 page styles (Stock, Customers) === */
/* WP-6 — Stock & customers (app.js range E: Products, Stock + bulk modes, Imports, Reorder, Customers,
   Contacts, Who owes me, Payments received, Returns). Tokens only; no raw hex, no heavy weights, no print rules.
   Legacy classes shared with other pages (.pp-img, .totals-box, .trow, .step-*, .suggest-*, .pay-bill) are restyled
   only inside WP-6 containers (#pay-bills, #stm-body, #rt-summary, #cf-name-suggest, .ppk, .inv-*), so POS, Quotes
   and Projects keep their own look. Phone card layouts use #view / #modal-box prefixes: the §3.9 cell rules reach
   (0,3,2), and the legacy phone rules that set `padding: 0` on table cells sit in the legacy layer and lose. */

/* ---------- shared: toolbars, counts, small layout helpers (sc-*) ---------- */
.sc-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-surface);
}
.sc-toolbar:has(+ .sc-chips:not(:empty)) { border-bottom: 0; padding-bottom: 4px; }
.sc-toolbar.sc-chips { padding-top: 8px; gap: 8px; }
.sc-toolbar.sc-chips:empty { display: none; }
.sc-search { flex: 0 1 340px; width: 340px; min-width: 200px; }
.sc-count {
  margin-left: auto; color: var(--text-secondary); white-space: nowrap;
  font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); font-variant-numeric: tabular-nums;
}
.card-head .sc-count { flex-shrink: 0; }
.sc-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-gap { margin-bottom: 12px; }
.sc-cell { display: flex; flex-direction: column; min-width: 0; }
.sc-cell > small { color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px; }
.sc-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sc-panel {
  margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}
.sc-panel-title { display: block; margin-bottom: 8px; color: var(--text); font: var(--fw-semibold) var(--fs-200)/var(--lh-200) var(--font-ui); }
.sc-scroll { margin: 0 0 16px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.sc-scroll > .table { margin: 0; }
.sc-additem { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 16px; }
.sc-additem > .fld { margin-bottom: 0; }
.sc-additem > .sc-grow { flex: 2 1 220px; min-width: 0; }
.sc-additem > .sc-w-qty { flex: 0 0 96px; }
.sc-additem > .sc-w-cost { flex: 0 0 120px; }
.sc-additem > :is(.btn, button) { flex: 0 0 auto; }
.sc-check {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 16px; cursor: pointer;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.sc-subform {
  margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--bg-subtle);
}
.sc-subform > p { margin: 0 0 8px; }
.sc-subform .btn-row { margin: 0; }
.sc-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 48px 16px; }
.sc-rel { position: relative; }
.sc-mob { display: none; }

/* help on demand: "How the reorder plan is worked out" and the optional import details (closed <details>) */
:is(.sc-howto, .sc-more) > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; list-style: none; cursor: pointer;
  color: var(--text-secondary); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui);
}
:is(.sc-howto, .sc-more) > summary::-webkit-details-marker { display: none; }
:is(.sc-howto, .sc-more) > summary::before {
  content: ""; flex-shrink: 0; width: 16px; height: 16px; transform: rotate(-90deg);
  background: var(--ico-chevron-down) no-repeat center / 16px 16px; transition: transform var(--dur-1) var(--ease-standard);
}
:is(.sc-howto, .sc-more)[open] > summary::before { transform: none; }
:is(.sc-howto, .sc-more) > summary:hover { color: var(--text); }
:is(.sc-howto, .sc-more) > summary:focus-visible { outline-offset: -2px; }
.sc-howto-body { padding: 0 16px 16px 40px; color: var(--text-secondary); }
.sc-howto-body p { margin: 0 0 4px; }
.sc-more { margin: 0 0 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); }
.sc-more > summary { min-height: 44px; padding: 0 12px; }
.sc-more > .form-grid { padding: 4px 12px 0; border-top: 1px solid var(--border-subtle); }
.sc-more .opt { font-weight: var(--fw-regular); }

/* Customers / Who owes me tables become list rows on phones (§3.16, §7.8) */
@media (max-width: 700px) {
  #view .card .table.sc-list { min-width: 0; }
  #view .table.sc-list, #view .table.sc-list tbody { display: block; width: 100%; }
  #view .table.sc-list thead { display: none; }
  #view .table.sc-list tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title amt" "title pill" "act act";
    column-gap: 12px; row-gap: 2px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle);
  }
  #view .table.sc-list tr:has(> td > input[type="checkbox"]) {
    grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "chk title amt" "chk title pill" "chk act act";
  }
  #view .table.sc-list tbody tr:last-child { border-bottom: 0; }
  #view .table.sc-list tr.clickable:hover { background: var(--bg-subtle); }
  #view .table.sc-list :is(td, td:first-child, td:last-child) { display: block; width: auto; padding: 0; border: 0; background: none; text-align: left; }
  #view .table.sc-list td:has(> input[type="checkbox"]) { grid-area: chk; align-self: start; padding-top: 2px; }
  #view .table.sc-list td.sc-dt { display: none; }
  #view .table.sc-list td.sc-m-title { grid-area: title; }
  #view .table.sc-list td.sc-m-title > strong { font: var(--fw-medium) var(--fs-350)/var(--lh-350) var(--font-ui); }
  #view .table.sc-list td.sc-m-amt { grid-area: amt; text-align: right; white-space: nowrap; font-weight: var(--fw-semibold); }
  #view .table.sc-list td.sc-m-pill { grid-area: pill; justify-self: end; }
  #view .table.sc-list td.sc-m-pill:empty { display: none; }
  #view .table.sc-list td.sc-m-act { grid-area: act; padding-top: 6px; white-space: normal; }
  #view .table.sc-list td.sc-m-act > .t-v { display: flex; justify-content: flex-start; gap: 8px; }
  #view .table.sc-list .sc-mob { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px; }
}
@media (max-width: 800px) {
  .sc-search { flex: 1 1 100%; width: 100%; min-width: 0; }
  .sc-toolbar .sc-count { margin-left: 0; }
  .sc-additem > .sc-grow { flex-basis: 100%; }
  .sc-howto-body { padding-left: 16px; }
}

/* ---------- Products (#product-table) and stock rows share the name cell ---------- */
.inv-name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inv-name .pp-img {
  display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; overflow: hidden;
  border-radius: var(--radius-md); background: var(--bg-muted); color: var(--icon); font-size: 0;
}
.inv-name .pp-img img { width: 100%; height: 100%; object-fit: cover; }
.inv-title { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.inv-title strong { font-weight: var(--fw-medium); }

/* ---------- Stock (§7.3) ---------- */
/* no coloured row stripes: the "Low" / "Out" pill carries the state (A7) */
.inv-item:is(.is-out, .is-low), .inv-item:is(.is-out, .is-low) td:first-child { box-shadow: none; }
.inv-table tr.inv-item:is(.is-out, .is-low) { box-shadow: none; }
/* bulk mode: rows with a typed number are tinted with the selection colour (was a green tint) */
.inv-item.bv-on td { background: var(--bg-selected); }
.inv-table tr.inv-item.bv-on { background: var(--bg-selected); }

.inv-sub { display: block; color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); }
.inv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.inv-toolbar:has(+ .inv-chips) { border-bottom: 0; padding-bottom: 4px; }
.inv-toolbar.inv-chips { padding-top: 8px; gap: 8px; }
.inv-search { position: relative; flex: 0 1 360px; min-width: 200px; }
.inv-search input { width: 100%; padding-right: 40px; }
.inv-search .btn-icon { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.inv-toolbar .inv-count {
  margin-left: auto; padding: 0; color: var(--text-secondary); white-space: nowrap;
  font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui);
}
.inv-count .link-btn { margin-left: 4px; font-size: var(--fs-200); }
.inv-caret { display: inline-flex; width: 14px; margin-right: 4px; vertical-align: -2px; color: var(--icon); }
.inv-grp .tag {
  display: inline-block; margin: 0 6px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-secondary); font: var(--fw-medium) var(--fs-100)/18px var(--font-ui);
}
.inv-cat small, .inv-grp small { margin-left: 6px; font-weight: var(--fw-regular); }
#view .inv-table tr.inv-cat > td {
  padding-top: 10px; padding-bottom: 10px; background: var(--bg-muted); color: var(--text);
  font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui);
}
#view .inv-table tr.inv-grp > td {
  padding-top: 10px; padding-bottom: 10px; background: var(--bg-subtle); color: var(--text);
  font: var(--fw-semibold) var(--fs-200)/var(--lh-200) var(--font-ui);
}
#view .inv-table tr.inv-grp:hover > td { background: var(--bg-hover); }
#view .inv-table tr.inv-item.bv-on > td { background: var(--bg-selected); }
.inv-act { white-space: nowrap; }
.inv-tx td.is-nil { color: var(--text-tertiary); }
@media (min-width: 701px) {
  #view .inv-table tr.inv-item > td { padding-top: 6px; padding-bottom: 6px; }       /* 32 px thumb + 12 = 44 px rows */
  #view .inv-table tr.inv-item > td:first-child { padding-left: 40px; }            /* indented under the group chevron */
}

/* bulk entry bar (stock in / out / count / low-stock levels) */
.inv-bulkbar { margin: 12px 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.inv-bulkbar > .inv-seg { margin: 0 0 12px; }
.inv-bulk-hint { margin: 0 0 12px; }
@media (min-width: 801px) { .inv-bulk-hint { display: none; } }   /* the page description says the same on desktop */
.inv-bulk-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.inv-bulk-fields .fld { flex: 1 1 240px; margin: 0; }
.inv-fill { display: flex; gap: 8px; }
.inv-fill input { flex: 1; min-width: 0; }
.inv-dest {
  display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface);
}
.inv-dest-lbl { color: var(--text); font: var(--fw-semibold) var(--fs-200)/var(--lh-200) var(--font-ui); }
.inv-dest-in {
  width: 100%; max-width: 380px; height: var(--control-md); min-height: var(--control-md); padding: 0 12px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); background-color: var(--bg-surface);
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
select.inv-dest-in {
  appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: var(--ico-chevron-down); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px;
}
.inv-who .chip { font-weight: var(--fw-medium); }
.inv-ship-hint { margin: 0 0 12px; }
.inv-bcell { min-width: 150px; }
.inv-bcell .inv-sub { margin-top: 4px; }
.inv-bulkfoot {
  position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 12px; padding: 12px 16px; background: var(--bg-surface); border-top: 1px solid var(--border); box-shadow: none;
}
.inv-bulkfoot .btn-row { margin: 0; flex-wrap: nowrap; }
.inv-foot-sum { color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.inv-foot-sum strong { color: var(--text); }

/* stock modals: history, adjust, damage, write-off, bulk review */
.inv-hist-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 0 0 16px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); color: var(--text-secondary);
}
.inv-hist-head strong { margin-left: 4px; color: var(--text); font-weight: var(--fw-semibold); }
.inv-picked {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle);
}
.inv-picked strong { font-weight: var(--fw-medium); }
.inv-hint { margin: -4px 0 16px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text); }
.inv-hint:empty { display: none; }
.inv-review-note { margin: 12px 0 0; color: var(--text-secondary); }
.inv-review-note strong { color: var(--text); }
#modal-box .callout + .table, #modal-box .callout + .inv-errs, #modal-box .callout + p { margin-top: 12px; }
.inv-errs { margin: 12px 0 0; padding-left: 20px; color: var(--text); line-height: var(--lh-300); }
.inv-errs li { margin: 4px 0; }

/* product picker modal (openModal cls "ppk") */
.ppk .ppk-search { width: 100%; margin: 0 0 12px; }
.ppk .step-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.ppk .step-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ppk .step-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; cursor: pointer; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface);
  transition: border-color var(--dur-1) var(--ease-standard), background-color var(--dur-1) var(--ease-standard);
}
.ppk .step-card:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.ppk .step-card:focus-visible { outline-offset: -2px; }
.ppk .step-card strong { color: var(--text); font-weight: var(--fw-medium); }
.ppk .step-card small { font-size: var(--fs-100); line-height: var(--lh-100); }
.ppk .color-swatch { width: 100%; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.ppk .list { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.ppk-stock { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }

/* phones: stock rows as cards (legacy layout, restyled). The legacy phone rules zero the cell padding in the
   legacy layer, so the §3.9 cell padding would win without these. */
@media (max-width: 800px) {
  .inv-search { flex: 1 1 100%; max-width: none; }
  .inv-toolbar .inv-count { margin-left: 0; }
  .inv-dest-in { max-width: none; }
  .inv-seg:is(.inv-modes, .inv-dests) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .inv-bulkfoot .btn-row { width: 100%; }
  .inv-bulkfoot .btn-row > .btn { flex: 1 1 0; }
  .inv-picked { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  #view .inv-table tr.inv-cat > td:not(:first-child) { display: none; }
  #view .inv-table tr:is(.inv-cat, .inv-grp) > td:first-child { padding: 10px 16px; }
  #view .inv-table tr.inv-item { padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); }
  #view .inv-table tr.inv-item > :is(td, td:first-child, td:last-child) { padding: 0; border: 0; background: transparent; }
  #view .inv-table tr.inv-item > td.inv-act { width: auto; text-align: left; white-space: normal; }
  #view .inv-table tr.inv-item > td.inv-act > .t-v { display: flex; width: 100%; justify-content: flex-start; gap: 8px; }
  #view .inv-table tr.inv-item > td.inv-act > .t-v > .btn-secondary { flex: 1 1 auto; }
  #view .inv-table tr.inv-item td[data-l]::before,
  #view .inv-tx td[data-l]::before,
  #modal-box .table.shp-rcv td[data-l]::before { color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); }
  .inv-mob { margin: 2px 0 0 18px; color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); }
  #view .inv-tx tr { padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
  #view .inv-tx :is(td, td:first-child, td:last-child) { padding: 0; border: 0; background: none; }
  #view .inv-tx td.is-nil { display: none; }
  #view .inv-tx td[colspan] { padding: 8px 0; text-align: left; }
}

/* ---------- Imports (shipments) ---------- */
.shp-rcv-sum { margin: 16px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); color: var(--text); }
.shp-rcv-sum .pill { margin-right: 4px; }
.shp-dup { margin-top: 8px; }
.shp-track { max-width: 420px; margin-top: 16px; }
.shp-quick { margin: 0 0 12px; }
.shp-rfoot { margin: 0; color: var(--text-secondary); }
.shp-rfoot strong { color: var(--text); }
.table.shp-rcv tr.shp-done td { background: var(--bg-subtle); color: var(--text-secondary); }
.shp-rcell .inv-sub { margin-top: 4px; }
@media (max-width: 700px) {
  #modal-box .table.shp-rcv tr { padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
  #modal-box .table.shp-rcv :is(td, td:first-child, td:last-child) { padding: 0; border: 0; background: none; }
}

/* ---------- Customers, statement, merge ---------- */
.sc-suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20; max-height: 300px; margin-top: 2px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-md);
}
#cf-name-suggest .suggest-item {
  padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); cursor: pointer;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
#cf-name-suggest .suggest-item:last-child { border-bottom: 0; }
#cf-name-suggest .suggest-item:is(:hover, :focus-visible) { background: var(--bg-hover); }
#cf-name-suggest .suggest-item:focus-visible { outline-offset: -2px; }
#cf-name-suggest .suggest-item strong { font-weight: var(--fw-medium); }
:is(#stm-body, #rt-summary) .totals-box { margin: 16px 0; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--bg-subtle); }
:is(#stm-body, #rt-summary) .trow { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: var(--fs-300); line-height: var(--lh-300); }
:is(#stm-body, #rt-summary) .trow strong { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#stm-body, #rt-summary) .trow.total {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui);
}
:is(#stm-body, #rt-summary) .trow.total strong { font-weight: var(--fw-semibold); }
.sc-stm-acts { justify-content: flex-end; margin-top: 0; }

/* ---------- Who owes me ---------- */
.due-alerts > div + div { margin-top: 4px; }

/* ---------- Receive payment modal ---------- */
.pay-note { margin: 0 0 16px; }
.pay-sugg { margin: -8px 0 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.pay-sugg .list-row { min-height: 48px; padding: 8px 12px; }
.pay-sugg .list-row:focus-visible { outline-offset: -2px; }
.pay-addnew { margin: 0 0 16px -8px; }
.list-row.pay-picked { margin: -8px 0 16px; padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.pay-nobill, .pay-hint { margin: -8px 0 16px; }
#pay-bills .pay-bills { gap: 8px; }
#pay-bills .pay-bills > span { font-weight: var(--fw-medium); }
#pay-bills .pay-bill {
  display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface);
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
#pay-bills .pay-bill:hover { border-color: var(--border-strong); }
#pay-bills .pay-bill:has(input:checked) { border-color: var(--brand-300); background: var(--bg-selected); }
#pay-bills .pay-bill strong { font-weight: var(--fw-medium); }

/* ---------- Returns form ---------- */
.rt-in-qty { width: 88px; }
.rt-in-cond { min-width: 130px; }
.rt-in-reason { width: 150px; }
#rt-summary .field-error { margin: 0 0 8px; }

/* === end WP-6 === */

/* === WP-7 page styles (Money, Quotes) === */
/* WP-7 — Money & quotes: Expenses (+ Add expense modal), Cash & profit, Buying, Colorful Lifestyle, Quotes.
   Page-scoped selectors only (exp-, fx-, fin-, proc/srq-, cl-, quo-, mq- = shared helpers of these pages).
   Tokens only; no rule reaches inside .doc / .receipt (the quote preview styles only its wrapper). */

/* ---------- shared helpers (mq-*) ---------- */
.mq-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-surface);
}
.mq-toolbar > input[type="search"] { flex: 0 1 320px; min-width: 0; }
.mq-toolbar > select { width: auto; min-width: 160px; }
.mq-sum {
  margin-left: auto; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mq-pad { padding: 16px; }
.mq-pad > .mq-toolbar { margin: -16px -16px 16px; }
.mq-muted { max-width: 80ch; margin: 0 0 12px; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.mq-muted code { font-family: var(--font-mono); font-size: var(--fs-100); }
.card > .tabs.mq-tabs { margin: 0; padding: 0 16px; }
.mq-id { color: var(--text); font-weight: var(--fw-medium); white-space: nowrap; }
.mq-name { color: var(--text); font-weight: var(--fw-medium); }
/* secondary line under the main value in a cell (specificity 0,0,2 so page classes below can undo it) */
:where(#proc-body, #cl-body, #fin-body, .quo-table, .quo-items) td > small { display: block; margin-top: 2px; }
.quo-table td > small.mq-rev { display: inline; margin: 0 0 0 4px; }
.table.quo-table td small.mq-views {
  display: flex; align-items: center; gap: 4px; margin-top: 4px;
  color: var(--text-tertiary); font-size: var(--fs-100); line-height: var(--lh-100);
}
.mq-views .ico { color: var(--icon); }
.mq-loading { display: flex; align-items: center; gap: 10px; padding: 24px 16px; color: var(--text-secondary); }
.mq-loading .ico { color: var(--icon); }

/* modal content */
.mq-body > .fld:last-child, .mq-body > .mq-attach:last-child { margin-bottom: 0; }
.mq-body > .callout { margin: 0 0 16px; }
.mq-body > .callout + .form-section-title { margin-top: 0; padding-top: 0; border-top: 0; }
.mq-note { margin: 12px 0; font-size: var(--fs-300); line-height: var(--lh-300); overflow-wrap: anywhere; }
.mq-note > strong:first-child {
  display: block; color: var(--text-secondary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui);
}
.modal-body .mq-check {
  display: flex; align-items: flex-start; gap: 10px; min-height: 0; margin: 0 0 16px;
  color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); cursor: pointer;
}
.modal-body .mq-check > input { flex-shrink: 0; margin: 2px 0 0; }
.mq-check small { display: block; margin-top: 2px; font-weight: var(--fw-regular); font-size: var(--fs-200); line-height: var(--lh-200); }
.mq-optbox {
  margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle);
}
.modal-body .mq-optbox > .mq-check { margin: 0; }
.mq-optbody { margin-top: 12px; }
.mq-optbody .fld { margin-bottom: 0; }
.mq-optbody.form-grid-3 { row-gap: 12px; }
.mq-endrow { justify-content: flex-end; }
.mq-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border-subtle);
}
.mq-mono { font-family: var(--font-mono); font-size: var(--fs-200); }

/* collapsible sections (<details>) */
.mq-fold { margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); }
.mq-fold > summary {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 16px; list-style: none; cursor: pointer;
  color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); border-radius: var(--radius-lg);
}
.mq-fold > summary::-webkit-details-marker { display: none; }
.mq-fold > summary:focus-visible { outline-offset: -2px; }
.mq-fold > summary .ico { margin-left: auto; color: var(--icon); transition: transform var(--dur-2) var(--ease-standard); }
.mq-fold[open] > summary { border-bottom: 1px solid var(--border-subtle); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.mq-fold[open] > summary .ico { transform: rotate(180deg); }
.mq-fold > :not(summary) { padding: 16px 16px 0; }
.mq-fold.mq-fold-sm { margin: 0 0 12px; border: 0; background: none; }
.mq-fold-sm > summary {
  display: inline-flex; min-height: 32px; padding: 0; color: var(--text-link); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui);
}
.mq-fold-sm > summary .ico { margin-left: 0; color: currentColor; }
.mq-fold-sm[open] > summary { border-bottom: 0; }
.mq-fold-sm > :not(summary) { padding: 8px 0 0; }
.mq-history { margin-top: 16px; border-top: 1px solid var(--border-subtle); }
.mq-history > summary {
  display: flex; align-items: center; gap: 6px; min-height: 44px; list-style: none; cursor: pointer;
  color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.mq-history > summary::-webkit-details-marker { display: none; }
.mq-history > summary::before {
  content: ""; width: 16px; height: 16px; background: var(--ico-chevron-down) no-repeat center / 16px 16px;
  transform: rotate(-90deg); transition: transform var(--dur-2) var(--ease-standard);
}
.mq-history[open] > summary::before { transform: none; }

/* line-item editor cards (quote items, purchase items, text-import preview) */
.mq-line { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); }
.mq-line .fld { margin-bottom: 12px; }
.mq-line .form-grid, .mq-line .form-grid-3 { row-gap: 0; }
.mq-line-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--border-subtle);
}
.mq-line-calc { margin-left: auto; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); font-variant-numeric: tabular-nums; }
.mq-line-foot > small:first-child { margin-left: 0; margin-right: auto; min-width: 0; }
.mq-line-amt { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-thumb { flex-shrink: 0; width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-muted); }
.mq-thumb.mq-thumb-sm { width: 36px; height: 36px; }

/* totals block */
.totals-box.mq-totals {
  max-width: 360px; margin: 12px 0 16px auto; padding: 8px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle);
}
.mq-totals .trow {
  display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; margin: 0; border: 0;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.mq-totals .trow > :last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mq-totals .trow.total {
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border);
  font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui);
}
.mq-totals .trow:first-child { margin-top: 0; border-top: 0; padding-top: 4px; }

/* attachments */
.mq-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.mq-attach .file-preview { margin: 0; border-radius: var(--radius-md); }
.mq-files { display: flex; flex-wrap: wrap; gap: 8px; }
.mq-file {
  display: inline-flex; align-items: center; gap: 2px; max-width: 280px; min-height: 32px; padding: 0 2px 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-subtle);
}
.mq-file .btn-link { min-width: 0; font-size: var(--fs-200); line-height: var(--lh-200); }
.mq-file .btn-link .truncate { max-width: 190px; }
.mq-sig {
  display: block; height: 48px; margin-top: 8px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface);
}
.mq-body .proof-img { border-radius: var(--radius-lg); }
.mq-tscroll { max-width: 100%; margin: 0 0 12px; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mq-tscroll > .table { margin: 0; }

/* ---------- Expenses ---------- */
#exp-brk:empty { display: none; }
.exp-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.exp-month { display: flex; align-items: center; gap: 8px; }
.exp-month .btn-group { display: inline-flex; align-items: center; gap: 2px; }
.exp-month .btn-group > * { margin-left: 0; border-radius: var(--radius-md); }
#exp-month { width: 168px; }
#exp-q { flex: 0 1 240px; min-width: 0; }
.exp-toolbar .exp-sum {
  margin-left: auto; padding: 0; border: 0; color: var(--text-secondary);
  font-size: var(--fs-200); line-height: var(--lh-200); white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* category breakdown */
.exp-brk > summary.exp-brk-head {
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 10px 16px; list-style: none; cursor: pointer;
}
.exp-brk-head::-webkit-details-marker { display: none; }
.exp-brk-head:focus-visible { outline-offset: -2px; }
.exp-brk-title { flex: 1; min-width: 0; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.exp-brk-head .ico { color: var(--icon); transition: transform var(--dur-2) var(--ease-standard); }
.exp-brk[open] > .exp-brk-head { border-bottom: 1px solid var(--border); }
.exp-brk[open] > .exp-brk-head .ico { transform: rotate(180deg); }
.exp-brk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 32px; padding: 4px 16px; }
.exp-brk-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 40px; grid-template-areas: "name amt pct" "bar bar bar";
  gap: 6px 12px; align-items: center; width: 100%; min-height: 0; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: none;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); text-align: left; cursor: pointer;
}
.exp-brk-row:hover { background: var(--bg-subtle); }
.exp-brk-row:focus-visible { outline-offset: -2px; }
.exp-brk-name { grid-area: name; min-width: 0; }
.exp-brk-n { display: block; font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-brk-name small {
  display: block; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.exp-brk-amt { grid-area: amt; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.exp-brk-pct { grid-area: pct; color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); font-variant-numeric: tabular-nums; text-align: right; }
.exp-brk-bar { grid-area: bar; display: block; height: 4px; border-radius: var(--radius-xs); background: var(--gray-150); overflow: hidden; }
.exp-brk-bar > span { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--brand-600); }
.exp-brk-more { padding: 8px 16px 12px; }
/* table */
.exp-table td.e-no small, .exp-table .exp-cat-sub { display: block; }
.exp-cat-t { display: block; font-weight: var(--fw-medium); }
.exp-meta-m { display: none; }
.table.exp-table td.e-desc { max-width: 320px; }
.exp-desc { display: flex; align-items: center; gap: 4px; min-width: 0; }
.exp-desc .truncate { flex: 0 1 auto; }
.exp-table td.e-st { min-width: 120px; }
.exp-table td.e-st .pill + .pill, .exp-table td.e-st .exp-reason + .pill { margin-top: 4px; }
.exp-reason { display: block; max-width: 220px; margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); white-space: normal; }
.ee-rcpt { margin: 0; }

/* ---------- Add expense modal (fx-*) ---------- */
.fx-body .fx-amount {
  display: block; width: 100%; height: 64px; min-height: 64px; margin: 0 0 16px; padding: 0 16px;
  border: 1px solid var(--border-input); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text);
  font: var(--fw-semibold) var(--fs-700)/var(--lh-700) var(--font-ui); letter-spacing: var(--tracking-tight);
  text-align: center; font-variant-numeric: tabular-nums;
}
.fx-body .fx-amount:focus { border-color: var(--focus); box-shadow: var(--focus-ring); outline: 2px solid transparent; }
.fx-body .fx-chips { margin: 0 0 12px; }
.fx-body .fx-chips:empty { display: none; }
.fx-body .fx-toggle { margin: 0 0 12px; }
.fx-lbl { flex: 1 1 100%; margin: 4px 0 -2px; color: var(--text-secondary); font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); }
.fx-lbl :is(small, .opt) { font-weight: var(--fw-regular); }
.fx-body .chip.fx-custom { border-style: dashed; }
.fx-body .chip.fx-rc { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fx-body .fx-subrow {
  margin: -4px 0 12px; padding: 8px 12px 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-subtle);
}
.fx-body .fx-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 12px; }
.fx-empty { flex: 1 1 100%; margin: 0; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.fx-body .fx-extra { align-items: center; }
.fx-rcpt { display: inline-flex; align-items: center; gap: 6px; }
.fx-rcpt:empty { display: none; }
.fx-rcpt img { width: 36px; height: 36px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-md); }
.fx-rcpt-st { color: var(--text-secondary); font-size: var(--fs-100); }
.fx-rcpt-st.is-fail { color: var(--danger-700); }
.fx-body .fx-note { flex: 1 1 180px; min-width: 0; }
.fx-moreinfo { margin: 4px 0 12px; }
.fx-moreinfo > summary {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; cursor: pointer;
  color: var(--text-link); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui);
}
.fx-moreinfo[open] > summary { margin-bottom: 8px; }
.fx-hint { margin: 0 0 8px; color: var(--warning-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.fx-lastline { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.fx-lastline .btn-link { font-size: var(--fs-200); margin-left: 8px; }
.list.fx-catlist { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 601px) { .modal-foot.fx-btns > .btn { flex: 0 0 auto; } }

/* ---------- Cash & profit ---------- */
.fin-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; }
.fin-lbl { color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.fin-toolbar > select { width: auto; min-width: 180px; }
#fin-body { display: flex; flex-direction: column; gap: 16px; }
#fin-body:empty { display: none; }
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
#fin-body .table:is(.fin-kv, .table-dense) { min-width: 0; }
.table.fin-kv td:first-child { color: var(--text); }
.table td.fin-net { font-weight: var(--fw-semibold); }
#fin-body .table td.is-negative { color: var(--danger-700); }   /* a loss reads red in tables too (R6) */

/* ---------- Buying (procurement, suppliers, sourcing) ---------- */
#proc-body > .mq-toolbar { border-bottom: 1px solid var(--border); }
.srq-img { max-height: 240px; }
.srq-reply {
  margin-top: 4px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--bg-subtle);
  color: var(--text); font-size: var(--fs-200); line-height: var(--lh-200); white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ---------- Colorful Lifestyle ---------- */
.cl-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cl-thumb {
  flex-shrink: 0; width: 40px; height: 40px; object-fit: cover;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-muted);
}
.cl-thumb.cl-thumb-ph { display: grid; place-items: center; color: var(--icon); }
.cl-prod-t { display: flex; flex-direction: column; min-width: 0; }
#cl-body .table td small.cl-sell { color: var(--text); font-weight: var(--fw-medium); font-size: var(--fs-200); }
#cl-body .table td small.cl-out { color: var(--danger-700); }
.cl-st .pill { margin-bottom: 2px; }
#cl-body .table-dense { min-width: 0; }
.cl-store {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle);
}
.cl-store-main { flex: 1 1 280px; min-width: 0; }
.cl-store-main > small { display: block; margin-top: 2px; }
.cl-store-main > .pill { margin-left: 4px; }
.cl-store-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cl-store + .form-section-title { margin-top: 16px; padding-top: 0; border-top: 0; }
.cl-store.cl-buy { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cl-buy > .table { flex: 1 1 100%; }
.cl-log { max-height: 320px; overflow-y: auto; }
.cl-buy-link { margin-left: 8px; font-size: var(--fs-200); }
.cl-tr-row { display: flex; align-items: flex-start; gap: 8px; }
.cl-tr-row > :is(input, textarea) { flex: 1 1 auto; min-width: 0; }
.cl-price {
  margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle);
}
.cl-price:empty { display: none; }
.cl-price-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cl-price-top > span:first-child { color: var(--text-secondary); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.cl-price-top > strong { color: var(--text); font: var(--fw-semibold) var(--fs-500)/var(--lh-500) var(--font-ui); font-variant-numeric: tabular-nums; }
.cl-price > small { display: block; margin-top: 4px; }
.cl-novar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.cl-novar > .mq-muted { flex: 1 1 260px; margin: 0; }
.scroll-box.cl-var-box { max-height: 320px; overflow: auto; margin: 0 0 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cl-var-in {
  width: 96px; height: var(--control-sm); padding: 0 8px; border: 1px solid var(--border-input); border-radius: var(--radius-md);
  background: var(--bg-surface); color: var(--text); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); text-align: right;
}
.cl-imgs { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-img { position: relative; display: inline-block; width: 72px; height: 72px; }
.cl-img > img { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.cl-img.is-cover > img { outline: 2px solid var(--brand-600); outline-offset: 1px; }
.cl-img > .btn-icon.cl-img-x {
  position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border: 1px solid var(--border); background: var(--bg-surface);
}
.scroll-box.cl-pick { max-height: 55dvh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.modal-body .cl-pick-row {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-bottom: 1px solid var(--border-subtle); cursor: pointer;
}
.cl-pick-row:last-child { border-bottom: 0; }
.cl-pick-row:hover { background: var(--bg-subtle); }
.cl-pick-t { flex: 1; min-width: 0; font-size: var(--fs-200); line-height: var(--lh-200); }
.cl-pick-p { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Quotes ---------- */
.mq-toolbar > input.quo-q { flex-basis: 360px; }
.quo-table td.num { white-space: nowrap; }
.quo-namefld { position: relative; }
.quo-form .btn-row.quo-additems { margin: 0 0 8px; }
.quo-form .suggest-box {
  max-height: 300px; overflow-y: auto; margin: -8px 0 16px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: var(--shadow-md);
}
.quo-form .suggest-item {
  padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--text);
  font-size: var(--fs-300); line-height: var(--lh-300); cursor: pointer;
}
.quo-form .suggest-item:last-child { border-bottom: 0; }
.quo-form .suggest-item:is(:hover, :focus-visible) { background: var(--bg-hover); }
.quo-form .suggest-item:focus-visible { outline-offset: -2px; }
.quo-form .suggest-item .muted { font-size: var(--fs-200); }
.list.quo-tpls { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.quo-tpls .list-title { white-space: normal; }
.quo-tpls .list-sub { white-space: normal; }
.quo-items td .mq-thumb { display: block; }
#sq-preview:not(:empty) { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
#sq-preview > .form-section-title:first-child { margin: 0 0 12px; }
/* on-screen PDF preview: only the wrapper is styled — the document inside keeps its own CSS */
.modal-body.quo-prev-body { background: var(--gray-150); }
.quo-prev-doc {
  zoom: 0.82; padding: 14px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface);
}

/* ---------- phones ---------- */
@media (max-width: 800px) {
  .mq-toolbar > input[type="search"], .quo-q { flex: 1 1 100%; }
  .mq-toolbar > select { flex: 1 1 auto; }
  .mq-sum { flex: 1 1 auto; text-align: right; }
  .card > .tabs.mq-tabs { margin: 0; padding: 0 16px; gap: 20px; }
  .mq-fold-sm > summary, .fx-moreinfo > summary { min-height: var(--tap); }
  .totals-box.mq-totals { max-width: none; margin: 12px 0 16px; }
  .cl-img { width: 88px; height: 88px; }
  .cl-img > .btn-icon.cl-img-x { width: 32px; height: 32px; }
  .cl-img > .btn-icon.cl-img-x::after { inset: -6px; }
  .cl-var-in { min-height: 40px; }
  /* tab rows inside cards: 44 px targets (the §3.11 phone height rule loses to the (0,1,1) base rule) */
  .card > .tabs.mq-tabs > :is(button, a) { height: var(--tap); min-height: var(--tap); min-width: var(--tap); }
  .mq-cell-link { position: relative; }
  .mq-cell-link::after { content: ""; position: absolute; inset: -14px -4px; }

  /* Expenses: toolbar stacks, table becomes list rows (§7.2, §3.16) */
  /* month switcher gets a full row; "All months" moves down next to the result count */
  .exp-toolbar { gap: 8px; }
  .exp-month { display: contents; }
  .exp-month .btn-group { order: 1; flex: 1 1 100%; min-width: 0; }
  #exp-month { flex: 1 1 auto; width: auto; min-width: 0; }
  #exp-tabs { order: 2; }
  #exp-q { order: 3; flex: 1 1 100%; }
  #exp-allm, .exp-toolbar > .danger-btn { order: 4; }
  .exp-toolbar .exp-sum { order: 4; flex: 1 1 auto; text-align: right; }
  .exp-brk-list { grid-template-columns: minmax(0, 1fr); }
  #view .card .table.exp-table { min-width: 0; }
  #view .exp-table thead { display: none; }
  #view .exp-table tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cat amt" "cat act" "st st" "desc desc";
    gap: 4px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle);
  }
  #view .exp-table.exp-chk tbody tr {
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "chk cat amt" "chk cat act" "chk st st" "chk desc desc";
  }
  #view .exp-table tbody tr:last-child { border-bottom: 0; }
  #view .exp-table tbody td { display: block; min-width: 0; padding: 0; border: 0; background: none; }
  #view .exp-table tbody td:not([class]) { grid-area: chk; align-self: start; }
  #view .exp-table tbody td.e-cat { grid-area: cat; align-self: start; }
  #view .exp-table tbody td.e-amt { grid-area: amt; align-self: start; font-weight: var(--fw-semibold); text-align: right; }
  #view .exp-table tbody td.e-st { grid-area: st; min-width: 0; justify-self: start; text-align: left; }
  #view .exp-table tbody td:is(.e-st, .e-desc):empty { display: none; }
  #view .exp-table tbody td.e-desc { grid-area: desc; max-width: none; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
  #view .exp-table tbody td.e-act { grid-area: act; width: auto; justify-self: end; }
  #view .exp-table tbody :is(td.e-no, td.e-type, td.e-meth) { display: none; }
  #view .exp-table tbody td.e-empty { grid-column: 1 / -1; padding: 0; text-align: center; }
  .exp-cat-t { display: inline; font-size: var(--fs-350); line-height: var(--lh-350); }
  .exp-table .exp-cat-sub { display: inline; }
  .exp-table .exp-cat-sub::before { content: " · "; }
  .exp-meta-m { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
  .exp-reason { max-width: none; }
}

/* === end WP-7 === */

/* === WP-8 page styles (Reports, Admin, Mim Thai) === */
/* Reports, admin and Mim Thai pages (app.js range G: Profileo vs AFTL, Investor, Reports, Traffic, Facebook,
   Users, Leads, Shops, Data & backup, Settings, compliance, trash, link modals, Mim Thai).
   Page-scoped selectors only (rp- = reports/admin, mt- = Mim Thai). Tokens only, weights 400/500/600,
   radii from --radius-*. Nothing here can match inside .doc / .receipt / #print-area. */

/* ---------- layout helpers ---------- */
/* bodies that a view re-draws on its own (period change, tab switch) stack like #view itself */
:is(#dv-body, #report-body, #traffic-body, #fb-body) { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
:is(#dv-body, #report-body, #traffic-body, #fb-body):empty { display: none; }
.rp-top { align-items: start; }                                   /* two-col: cards keep their own height */
.rp-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rp-stack--tight { gap: 8px; }
.rp-grow { flex: 1 1 auto; min-width: 0; }
.rp-sub { margin: 0; color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }
.rp-label { margin: 0; color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
p.rp-label { margin-bottom: 8px; }
.rp-count { flex-shrink: 0; color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); font-variant-numeric: tabular-nums; }
.rp-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.rp-btns:last-child { margin-bottom: 0; }
.rp-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rp-callout-p { margin: 8px 0 0; }
/* spacing utilities last, so they win over the margin: 0 of the text helpers above */
.rp-mb { margin-bottom: 16px; }
.rp-mt { margin-top: 16px; }
.rp-pad { padding: 16px; }

/* ---------- toolbar above a table (period, search, bulk delete) ---------- */
.rp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; }
.rp-toolbar--bare { padding: 0; margin-bottom: 12px; }
.rp-toolbar > select { width: auto; max-width: 100%; }
.rp-toolbar [id$="-custom"] { flex-wrap: wrap; }
.rp-search { flex: 1 1 240px; min-width: 0; max-width: 360px; }
.rp-toolbar--bare .rp-search { max-width: none; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.card > :is(.rp-toolbar, .rp-chips) + :is(.table, .ui-empty) { border-top: 1px solid var(--border); }
.card > .rp-tabs { margin: 0; padding: 0 16px; }                    /* tabs inside a card: no phone bleed */
.rp-tabs--bare { flex-shrink: 0; }

/* compact selects inside table rows (role, shop, lead status) */
.table .rp-sel { width: auto; min-width: 128px; }
@media (min-width: 801px) {
  :where(#view) .table .rp-sel { height: var(--control-sm); min-height: var(--control-sm); padding-left: 8px; font-size: var(--fs-200); line-height: var(--lh-200); }
}
.rp-check { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); cursor: pointer; }
.rp-inactive td, .rp-inactive td strong { color: var(--text-secondary); }
.rp-name { text-align: left; }                                    /* a wrapped name stays left-aligned */
/* bulk-select checkbox (blkHead / blkCell, used by many lists): the label is a 44 px target, the row keeps its height */
.rp-blk { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px; vertical-align: middle; cursor: pointer; }
.table :is(th, td):has(> .rp-blk) { width: 40px; }

/* ---------- loading (§3.23): the whole block appears only after 400 ms, so fast loads never flash ---------- */
/* id-level selector: the §2.4 reset `#view > * { animation: none }` would otherwise cancel it. Fill mode "both"
   hides it only while the animation runs, so if animations are ever off the block is simply visible. */
.rp-loading { padding: 16px; }
:is(#view, #modal) .rp-loading { animation: rp-reveal 1ms linear 400ms both; }
@keyframes rp-reveal { from { opacity: 0; } to { opacity: 1; } }
.rp-loading-txt { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-secondary); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); }
.rp-loading-txt .ico { color: var(--icon); }
.rp-skel { display: grid; grid-auto-rows: 52px; align-items: center; margin-top: 4px; }
.rp-skel .skeleton:nth-child(2) { width: 80%; }
.rp-skel .skeleton:nth-child(3) { width: 60%; }

/* ---------- Investor: 6-month bar chart (neutral + brand; no red/green) ---------- */
.rp-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }
.rp-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.rp-key { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-xs); }
.rp-chart { gap: 12px; padding: 20px 16px 12px; }
.rp-chart .bars { gap: 3px; }
.rp-chart .bar { width: 14px; border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.rp-chart .chart-col small { display: block; margin-top: 6px; color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); white-space: nowrap; }
:is(.rp-chart, .rp-legend) .b-rev { background: var(--brand-600); }
:is(.rp-chart, .rp-legend) .b-exp { background: var(--gray-400); }
:is(.rp-chart, .rp-legend) .b-pro { background: var(--brand-900); }

/* ---------- Traffic: small meter next to a daily count ---------- */
.rp-meter { display: inline-block; width: 64px; height: 4px; margin-left: 8px; overflow: hidden; vertical-align: middle; border-radius: var(--radius-xs); background: var(--gray-150); }
.rp-meter > span { display: block; height: 100%; border-radius: var(--radius-xs); background: var(--brand-300); }
@media (max-width: 800px) { .rp-meter { display: none; } }

/* ---------- Facebook ---------- */
.rp-row-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; }
.rp-row-card .rp-grow { display: flex; flex-direction: column; }
.rp-row-card strong { font-weight: var(--fw-semibold); }
.rp-details { margin-top: 8px; }
.rp-details > summary { color: var(--text-link); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); cursor: pointer; }
.rp-pre {
  max-height: 240px; margin: 8px 0 0; padding: 8px 12px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-surface);
  color: var(--text); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-mono);
}
.rp-fb-preview { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: -4px; }
.rp-fb-preview img { display: block; max-width: 100%; max-height: 240px; border: 1px solid var(--border); border-radius: var(--radius-md); }

/* ---------- lists inside modals (compliance, cloud backups): rows run edge to edge ---------- */
.modal-body > .rp-list-flush:only-child { margin: -20px; }
.rp-done .list-title { color: var(--text-secondary); }
.rp-sub-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rp-sub-line > .list-sub { min-width: 0; }
.rp-wa-row { justify-content: space-between; }
.rp-wa-row .ico { color: var(--icon); }

/* ---------- Data & backup ---------- */
.rp-tool { flex-wrap: wrap; }
.rp-tool .list-sub { white-space: normal; }
.rp-tool .list-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rp-loan-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.rp-loan-row .ob-loan-from { flex: 1 1 auto; min-width: 0; }
.rp-loan-row .ob-loan-amt { flex: 0 0 140px; width: 140px; }
.rp-log { padding-top: 4px; padding-bottom: 4px; }
.rp-log .log-line { margin: 0; overflow-wrap: anywhere; }
.rp-log .log-line:last-child { border-bottom: 0; }
.rp-log strong { font-weight: var(--fw-medium); }
.rp-inset { padding: 16px 16px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle); }
.rp-inset > .btn { margin-bottom: 16px; }
.rp-total-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.rp-total-line strong { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* bulk delete */
.rp-bulk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.rp-scroll { --sticky-top: 0px; max-height: 50dvh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rp-check-row {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px;
  border-bottom: 1px solid var(--border-subtle); color: var(--text); font-size: var(--fs-300); line-height: var(--lh-300); cursor: pointer;
}
.rp-check-row:last-child { border-bottom: 0; }
.rp-check-row:hover { background: var(--bg-subtle); }
.rp-check-row > span { min-width: 0; overflow-wrap: anywhere; }

/* share-link field */
.rp-link { font-family: var(--font-mono); font-size: var(--fs-200); }

/* ---------- Settings: card footer with text on the left; sticky save bar ---------- */
.card-foot.rp-foot-start { justify-content: flex-start; flex-wrap: wrap; align-items: center; }
.rp-savebar {
  position: sticky; bottom: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface);
}

/* ---------- Mim Thai: company picker ---------- */
.mt-co-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.mt-co {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 72px; padding: 16px; text-align: left;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text); font: inherit; cursor: pointer;
}
.mt-co:hover { background: var(--gray-25); border-color: var(--gray-400); }
.mt-co-name { color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.mt-co-sub { color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }

/* ---------- Mim Thai: order builder (was an injected <style> block, §2.1) ---------- */
.mt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.mt-list { --sticky-top: 0px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.mt-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; margin: 0; padding: 10px 12px;
  border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: var(--bg-surface);
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); text-align: left; cursor: pointer;
}
.mt-row:last-child { border-bottom: 0; }
.mt-row:hover { background: var(--bg-subtle); }
.mt-row:focus-visible { outline-offset: -2px; }
.mt-row:is(.on, [aria-pressed="true"]) { background: var(--bg-selected); box-shadow: inset 0 0 0 1px var(--brand-300); }
.mt-row .d { flex-shrink: 0; min-width: 76px; color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.mt-row-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mt-row-model { color: var(--text-secondary); font-size: var(--fs-200); }
.mt-list-note { margin: 0; padding: 12px 16px; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); text-align: center; }

.mt-label { margin: 16px 0 8px; color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.mt-label:first-child { margin-top: 0; }
.mt-label-sub { margin-left: 8px; color: var(--text-secondary); font-weight: var(--fw-regular); font-size: var(--fs-200); }
.mt-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mt-color {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 88px; min-height: 52px; padding: 6px 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface);
  color: var(--gray-800); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); cursor: pointer;
}
.mt-color b { color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); font-variant-numeric: tabular-nums; }
.mt-color:hover { background: var(--gray-50); border-color: var(--gray-400); }
.mt-color:is(.on, [aria-pressed="true"]) { background: var(--brand-50); border-color: var(--brand-300); color: var(--brand-700); box-shadow: inset 0 0 0 1px var(--brand-300); }
.mt-color:is(.on, [aria-pressed="true"]) b { color: var(--brand-700); }
.mt-custom { margin-top: 12px; }

.mt-qtyrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 16px; }
.mt-qtyrow .mt-label { margin-top: 0; }
.mt-stepper { display: inline-flex; align-items: center; gap: 8px; }
.mt-step { width: 40px; height: 40px; border: 1px solid var(--border-strong); background: var(--bg-surface); color: var(--gray-800); }
.mt-step:hover { background: var(--gray-50); border-color: var(--gray-400); color: var(--gray-900); }
.mt-step .ico { width: 16px; height: 16px; }
:where(#view, #modal) .mt-qty { width: 72px; height: 40px; min-height: 40px; padding: 0 8px; text-align: center; font-size: var(--fs-400); font-variant-numeric: tabular-nums; }
.mt-linetotal-wrap { flex: 1 1 110px; min-width: 110px; text-align: right; }
.mt-linetotal { color: var(--text); font: var(--fw-semibold) var(--fs-500)/var(--lh-500) var(--font-ui); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.mt-billrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.mt-billrow .mt-label { margin: 0; }
.mt-billrow .rp-sub b { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* order totals (a small key/value table under the order lines) */
.mt-sum { width: auto; min-width: 280px; margin: 0 0 16px auto; border-collapse: collapse; font-size: var(--fs-300); line-height: var(--lh-300); }
.mt-sum td { padding: 4px 0; color: var(--text-secondary); border: 0; }
.mt-sum td.num { padding-left: 24px; color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mt-sum .mt-sum-total td { padding-top: 10px; border-top: 1px solid var(--border); color: var(--text); font-weight: var(--fw-semibold); }
.modal-body .rp-xscroll + .mt-sum { margin-top: 12px; }
.mt-check { margin: 0 0 16px; }
.rp-xscroll { --sticky-top: 0px; overflow-x: auto; }                 /* inner scroll box: sticky table heads stick to it (§3.9) */
.modal-body > .rp-xscroll { border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* ---------- Mim Thai: price list ---------- */
.mt-kv { display: grid; gap: 4px; margin: 16px 0 0; }
.mt-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; border-bottom: 1px solid var(--border-subtle); }
.mt-kv > div:last-child { border-bottom: 0; }
.mt-kv dt { color: var(--text-secondary); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); }
.mt-kv dd { display: inline-flex; align-items: center; gap: 4px; margin: 0; color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); text-align: right; font-variant-numeric: tabular-nums; }
.card-body > .mt-kv:first-child { margin-top: 0; }
.mt-meta { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.mt-prices { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.mt-price {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 1px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  background: var(--gray-50); color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); white-space: nowrap;
}
.mt-price b { color: var(--text); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }

/* ---------- phones ---------- */
@media (max-width: 800px) {
  :is(#dv-body, #report-body, #traffic-body, #fb-body) { gap: 12px; }
  .rp-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }  /* 3 or 5 cells: the last one takes the whole row */
  .rp-toolbar > select { flex: 1 1 auto; }
  .rp-search { flex-basis: 100%; max-width: none; }
  .table .rp-sel { min-width: 140px; }
  /* wide record tables scroll inside their card or box instead of squeezing every cell into three lines */
  .rp-xscroll > .table, .card > .table.rp-wide, .modal-body > .table.rp-wide { min-width: 600px; }
  .modal-body > .rp-list-flush:only-child { margin: -16px; }
  .rp-tool .list-main { flex-basis: 100%; }
  .rp-tool .list-actions { justify-content: flex-start; }
  .rp-loan-row .ob-loan-amt { flex-basis: 112px; width: 112px; }
  .rp-savebar { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 12px 16px; }
  .rp-savebar .rp-sub { display: none; }
  .rp-savebar .btn { flex: 1 1 auto; }
  .rp-check-row { min-height: var(--tap); }
  /* theme §3.11 sets 44 px tab height at (0,1,0), below the (0,2,0) base rule; page-scoped fix, and short labels get 44 px width */
  .rp-tabs > .tab { height: var(--tap); min-height: var(--tap); min-width: 44px; }
  .mt-chips > .chip { min-width: 44px; justify-content: center; }
  .mt-co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-list { max-height: 50dvh; }
  .mt-row { min-height: 48px; font-size: var(--fs-350); line-height: var(--lh-350); }
  .mt-stepper .mt-step { width: 44px; height: 44px; }             /* same (0,2,0) as the phone btn-icon rule, later = wins */
  :where(#view, #modal) .mt-qty { height: var(--tap); min-height: var(--tap); }
  .mt-sum { width: 100%; min-width: 0; }
  .card-foot .mt-add { flex: 1 1 auto; }
}

/* blkCell now wraps the checkbox in <label class="rp-blk">: keep WP-6's phone list-row layout for Customers
   (theme-wp6 keys its checkbox column on td > input) working with the wrapped markup. */
@media (max-width: 700px) {
  #view .table.sc-list tr:has(> td > .rp-blk) { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "chk title amt" "chk title pill" "chk act act"; }
  #view .table.sc-list td:has(> .rp-blk) { grid-area: chk; align-self: start; padding-top: 2px; }
}

/* === end WP-8 === */

/* === WP-9 page styles (Staff & pay) === */
/* Staff & pay (payroll.js, §7.4). Page-scoped selectors only; ids (#view / #modal) keep these above the
   generic .table rules without !important. No raw colours: tokens only. */

/* ---- stats: three cells; on phones the third one takes the whole second row ---- */
@media (max-width: 800px) {
  .pyr-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- "Mark salary due" callout ---- */
.pyr-accrue { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.pyr-accrue-text { flex: 1 1 320px; min-width: 0; margin: 0; }
.pyr-accrue .callout-actions { flex-shrink: 0; margin-top: 0; }
.pyr-accrue.is-multi { display: block; }
.pyr-accrue-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pyr-accrue-list li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.pyr-error .callout-actions { margin-top: 12px; }

/* ---- shared text pieces ---- */
.pyr-name { color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); overflow-wrap: anywhere; }
:is(.pyr-row-main, .pyr-person-text) > small {
  color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/18px var(--font-ui); overflow-wrap: anywhere;
}
.pyr-head-meta { color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }
.pyr-note { margin: 0; color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }
.pyr-note:empty { display: none; }

/* ---- attendance rows (page card + modal): name left, P / ½ / A segmented right ---- */
.pyr-att-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--border-subtle);
}
.pyr-att-row:last-child { border-bottom: 0; }
.pyr-att-list.in-modal { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; overflow: clip; }
.pyr-att-row .pyr-row-main { flex: 1; min-width: 0; }
.pyr-att-chips { flex-shrink: 0; }
.pyr-att-chips > button { min-width: 40px; padding: 0 10px; }

/* ---- staff table (desktop) ---- */
/* same column shares in the active and inactive tables, so the two line up when both are open */
#view .pyr-table th:nth-child(1) { width: 36%; }
#view .pyr-table th:nth-child(2) { width: 30%; }
#view .pyr-table th:nth-child(3) { width: 15%; }
#view .pyr-table th:nth-child(4) { width: 12%; }
#view .pyr-table th.pyr-th-act { width: 1%; }
#view .pyr-table .pyr-c-last { white-space: nowrap; color: var(--text-secondary); }
.pyr-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pyr-person-text { display: flex; flex-direction: column; min-width: 0; }
#view .pyr-table .pyr-c-month small { color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px; }
.pyr-money { display: block; color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#view, #modal) .pyr-money-lbl { display: block; color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); }
.pyr-money.is-zero { color: var(--text-tertiary); font-weight: var(--fw-regular); }   /* settled: a quiet dash, the label says "Settled" */
#view .pyr-table--inactive :is(td, .pyr-name, .pyr-money) { color: var(--text-secondary); }
#view .pyr-table--inactive .avatar { color: var(--text-secondary); }

/* inactive staff: collapsible card */
.pyr-inactive > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; list-style: none; cursor: pointer;
  color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.pyr-inactive > summary::-webkit-details-marker { display: none; }
.pyr-inactive > summary:hover { background: var(--bg-subtle); }
.pyr-inactive > summary:focus-visible { outline-offset: -2px; }
.pyr-inactive > summary .ico { color: var(--icon); transition: transform var(--dur-2) var(--ease-standard); }
.pyr-inactive:not([open]) > summary .ico { transform: rotate(-90deg); }
.pyr-inactive[open] > summary { border-bottom: 1px solid var(--border); }

/* recent entries (dense) */
#view .pyr-recent .pyr-c-entry { color: var(--text); }
#view .pyr-recent .pyr-c-method { color: var(--text-secondary); white-space: nowrap; }
#view .pyr-recent .pyr-meta-sm { display: none; }
@media (min-width: 801px) {
  #view .pyr-recent :is(th, td):first-child { padding-left: 16px; }   /* the dense padding rule otherwise wins over the 16 px first-cell inset */
  #view .pyr-recent :is(th, td):last-child { padding-right: 16px; }
}

/* ---- phones: staff table and recent entries become list rows (R13, §3.16) ---- */
@media (max-width: 800px) {
  #view :is(.pyr-table, .pyr-recent), #view :is(.pyr-table, .pyr-recent) tbody { display: block; width: 100%; min-width: 0; }   /* legacy .card .table { min-width: 620px } */
  #view :is(.pyr-table, .pyr-recent) thead { display: none; }
  #view :is(.pyr-table, .pyr-recent) td { display: block; min-width: 0; padding: 0; border: 0; background: none; }
  #view :is(.pyr-table, .pyr-recent) tr { border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); }
  #view :is(.pyr-table, .pyr-recent) tr:last-child { border-bottom: 0; }
  #view :is(.pyr-table, .pyr-recent) tr.clickable:hover { background: var(--bg-subtle); }

  /* staff (§7.4 phone row): [avatar · name / role ...... balance + due] then [Pay ⋯] on the right.
     "This month" and "Last paid" stay in the statement (row tap) — on a 375 px row they only wrap. */
  #view .pyr-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who bal" "who act";
    align-items: start; gap: 8px 12px; padding: 12px 16px;
  }
  #view .pyr-table .pyr-c-who { grid-area: who; width: auto; }
  #view .pyr-table .pyr-person { align-items: flex-start; }
  #view .pyr-table .pyr-person .avatar { margin-top: 1px; }
  #view .pyr-table .pyr-c-bal { grid-area: bal; text-align: right; }
  #view .pyr-table .pyr-c-bal .pyr-money { font-size: var(--fs-350); line-height: var(--lh-350); }
  #view .pyr-table :is(.pyr-c-month, .pyr-c-last) { display: none; }
  #view .pyr-table td.t-actions { grid-area: act; width: auto; justify-self: end; }
  #view .pyr-table .pyr-name { font-size: var(--fs-350); line-height: var(--lh-350); }

  /* recent: [staff / "entry · date · method" ...... amount] */
  #view .pyr-recent tr { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px; }
  #view .pyr-recent td { display: none; }
  #view .pyr-recent td.pyr-c-staff { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  #view .pyr-recent td.pyr-c-amt { display: block; flex-shrink: 0; font-weight: var(--fw-semibold); }
  /* wraps instead of an ellipsis: entry labels carry amounts ("1 day × ৳800"), which are never cut (R6) */
  #view .pyr-recent .pyr-meta-sm { display: block; color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px; overflow-wrap: anywhere; }
  #view .pyr-recent td.pyr-c-amt { white-space: nowrap; }
}

/* ---- loading skeleton ---- */
.pyr-skel-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 16px; border-bottom: 1px solid var(--border-subtle); }
.pyr-skel-row:last-child { border-bottom: 0; }
.pyr-skel-av { flex: 0 0 28px; height: 28px; border-radius: var(--radius-full); }
.pyr-skel-a { flex: 0 0 32%; }
.pyr-skel-b { flex: 0 0 72px; margin-left: auto; }

/* ---- modals (pay, work / bonus / deduction, attendance, statement, staff form) ---- */
#modal .pyr-m { display: flex; flex-direction: column; gap: 16px; }
#modal .pyr-m .fld { margin-bottom: 0; }
#modal .pyr-m .form-grid { row-gap: 16px; }
#modal .pyr-m .form-grid > * { min-width: 0; }                    /* 440 px sheet: two inputs share a row without overflowing */
#modal .pyr-m .fld > :is(input, select) { width: 100%; min-width: 0; }
#modal .pyr-m .fx-chips { margin: 0; }
.pyr-group { gap: 8px; }
#modal .pyr-m .fx-amount {
  width: 100%; height: auto; min-height: 0; margin: 0; padding: 8px 12px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: none;
  color: var(--text); font: var(--fw-semibold) var(--fs-700)/var(--lh-700) var(--font-ui);
  letter-spacing: var(--tracking-tight); text-align: center; font-variant-numeric: tabular-nums;
}
#modal .pyr-m .fx-amount:hover:not(:focus) { border-color: var(--gray-500); }
#modal .pyr-m .fx-amount:focus { border-color: var(--focus); box-shadow: var(--focus-ring); outline: 2px solid transparent; }
#modal .pyr-pay-info { margin: 0; color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }
.pyr-open { display: flex; gap: 8px; }
.pyr-open select { flex: 0 1 auto; max-width: 60%; }
.pyr-open input { flex: 1; min-width: 0; }
#modal .pyr-check {
  display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; cursor: pointer;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
@media (max-width: 800px) { #modal .pyr-check { min-height: var(--tap); } }   /* the label is the 44 px target (R16) */

/* statement */
.pyr-led-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 0; padding: 0; border: 0; }
.pyr-led-head .pyr-row-main { flex: 1; min-width: 0; }
.pyr-led-bal { flex-shrink: 0; text-align: right; }
.pyr-led-bal .pyr-money { font-size: var(--fs-500); line-height: var(--lh-500); letter-spacing: var(--tracking-tight); }
.pyr-led-box { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; overflow: clip; }
#modal .pyr-led-table th.pyr-th-act { width: 1%; }
#modal .pyr-led-table td.t-date small { display: block; color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
#modal .pyr-led-table .pyr-led-kind { display: block; color: var(--text); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); overflow-wrap: anywhere; }
#modal .pyr-led-table .pyr-c-entry small { display: block; overflow-wrap: anywhere; }
#modal .pyr-led-table .pyr-c-bal { color: var(--text-secondary); }
#modal .pyr-led-table tr.is-void td, #modal .pyr-led-table tr.is-void .pyr-led-kind { color: var(--text-tertiary); }
#modal .pyr-led-table tr.is-void :is(.pyr-led-kind, .pyr-c-amt) { text-decoration: line-through; }
#modal .pyr-led-table tr.pyr-led-start td { background: var(--bg-subtle); }
@media (max-width: 600px) {
  .pyr-led-bal .pyr-money { font-size: var(--fs-400); line-height: var(--lh-400); }
  #modal .pyr-led-table, #modal .pyr-led-table tbody { display: block; width: 100%; min-width: 0; }
  #modal .pyr-led-table thead { display: none; }
  /* [entry ...... amount] then [date · no. ...... balance] (+ ⋯ for admins) */
  #modal .pyr-led-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "entry amt" "date bal";
    align-items: baseline; gap: 2px 12px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle);
  }
  #modal .pyr-led-table.has-act tr { grid-template-columns: minmax(0, 1fr) auto 40px; grid-template-areas: "entry amt act" "date bal act"; }
  #modal .pyr-led-table tr:last-child { border-bottom: 0; }
  #modal .pyr-led-table td { display: block; min-width: 0; padding: 0; border: 0; background: none; }
  #modal .pyr-led-table tr.pyr-led-start { background: var(--bg-subtle); }
  #modal .pyr-led-table .pyr-c-entry { grid-area: entry; }
  #modal .pyr-led-table .pyr-c-amt { grid-area: amt; }
  #modal .pyr-led-table .pyr-c-bal { grid-area: bal; font-size: var(--fs-200); line-height: var(--lh-200); }
  #modal .pyr-led-table td.t-date { grid-area: date; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); white-space: normal; }
  #modal .pyr-led-table td.t-date small { display: inline; font-size: inherit; line-height: inherit; white-space: nowrap; }
  #modal .pyr-led-table td.t-date small::before { content: " · "; }
  #modal .pyr-led-table td.t-actions { grid-area: act; align-self: center; width: auto; }
}

/* void reason (inside the confirm dialog) */
.ui-dlg .pyr-void-lbl { display: block; margin: 12px 0 6px; color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.ui-dlg .pyr-void-reason {
  display: block; width: 100%; min-height: 72px; padding: 8px 12px; resize: vertical;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: none;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.ui-dlg .pyr-void-reason::placeholder { color: var(--text-tertiary); opacity: 1; }
.ui-dlg .pyr-void-reason:focus { border-color: var(--focus); box-shadow: var(--focus-ring); outline: 2px solid transparent; }
@media (max-width: 800px) { .ui-dlg .pyr-void-reason { font-size: var(--fs-400); } }

/* === end WP-9 === */

/* === WP-10 page styles (Projects) === */
/* WP-10 — Project board (#/projects) and project page (#/projects?p=id), projects.js. Design spec §7.5.
   Page-scoped selectors only (.pj-*); the shared legacy classes .board / .board-col / .totals-box are only
   restyled through a .pj-* class so the orders board and other totals boxes are not touched. Tokens only. */

/* ---------- board: toolbar ---------- */
.pj-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0; padding: 0; }
.pj-tools .pj-search { flex: 0 1 380px; min-width: 220px; }
.pj-tools .pj-search input { width: 100%; }
.pj-tools .pj-seg { overflow: visible; }

/* ---------- board: columns (desktop) ---------- */
.pj-board { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0 0 8px; overflow-x: auto;
  scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; }
.pj-board .pj-col { flex: 0 0 272px; width: 272px; min-width: 272px; padding: 8px;
  background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.pj-col-head { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px 8px; margin: 0;
  color: var(--text); font: var(--fw-semibold) var(--fs-200)/var(--lh-200) var(--font-ui); }
.pj-col-head > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-col-head .count { margin: 0; padding: 0; background: none; border-radius: 0;
  color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); font-variant-numeric: tabular-nums; }
.pj-empty { margin: 0; padding: 8px 4px; color: var(--text-tertiary); font-size: var(--fs-200); line-height: var(--lh-200); text-align: center; }

/* ---------- board: project card ---------- */
.pj-card { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 12px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: none;
  color: var(--text); font-size: var(--fs-200); line-height: var(--lh-200); cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-standard); }
.pj-card:last-child { margin-bottom: 0; }
.pj-card:hover, .pj-card:focus-within { outline: none; border-color: var(--border-strong); }
.pj-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pj-card-name { position: relative; flex: 1; min-width: 0; color: var(--text); text-decoration: none; overflow-wrap: anywhere;
  font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); }
.pj-card-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.pj-code { flex-shrink: 0; padding: 0; background: none; border-radius: 0; white-space: nowrap;
  color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-mono); }
.pj-card-stage { display: flex; }
.pj-card-sub { color: var(--text-secondary); overflow-wrap: anywhere; }
.pj-money { display: block; color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
.pj-money b { color: var(--text); font-weight: var(--fw-semibold); }
.pj-bar { height: 4px; margin: 2px 0; background: var(--gray-150); border-radius: var(--radius-xs); overflow: hidden; }
.pj-bar > i { display: block; height: 100%; background: var(--brand-600); border-radius: var(--radius-xs); }
.pj-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px;
  color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
.pj-meta b { color: var(--text); font-weight: var(--fw-semibold); }
.pj-due { color: var(--text-secondary); font-weight: var(--fw-regular); }
.pj-due-pill { display: inline-flex; }
.pj-mis { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
.pj-mis .ico { color: var(--icon); }
.pj-mis span { min-width: 0; overflow-wrap: anywhere; }
.pj-card .pj-next { align-self: flex-start; margin: 2px 0 0 -8px; padding: 0 8px; gap: 4px; border-color: transparent;
  color: var(--gray-700); font-weight: var(--fw-medium); text-align: left; }
.pj-card .pj-next:hover { color: var(--gray-900); }
.pj-card .pj-next .ico { margin: 0 -2px 0 0; color: var(--icon); }

/* ---------- board: phone list (stage chips come from .pj-tabs in §3.8) ---------- */
.pj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pj-list .pj-card { margin: 0; }
.pj-tabs { margin-bottom: 8px; }

/* ---------- mistri days this month ---------- */
.pj-mm-card .card-head h3 { display: flex; align-items: center; gap: 2px; }
.pj-mm-card .table { margin: 0; }
.pj-mm-link { font-weight: var(--fw-medium); }

/* ---------- project page: code + stage pill next to the title (setPageHeader meta, .page-title-row) ---------- */
.pj-title-tags { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; letter-spacing: 0; }
.pj-title-tags .pj-code { font-size: var(--fs-200); line-height: var(--lh-200); }

/* ---------- project page: stage stepper ---------- */
.pj-stage-card { padding: 16px 16px 12px; }
.pj-stage-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 12px;
  color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.pj-stage-meta .pj-title-tags { margin-left: 0; }
.pj-stage-meta a { color: var(--text-link); text-decoration: none; }
.pj-stage-meta a:hover { text-decoration: underline; text-underline-offset: 2px; }
.pj-stage-now { display: none; margin: 0 0 12px; color: var(--text-secondary); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.pj-stepper { display: flex; margin: 0; padding: 0; list-style: none; }
.pj-stp { position: relative; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.pj-stp + .pj-stp::before { content: ""; position: absolute; top: 12px; left: calc(-50% + 16px); right: calc(50% + 16px); height: 1px; background: var(--border); }
.pj-stp:is(.done, .cur) + .pj-stp::before { background: var(--border); }
.pj-stp.done + .pj-stp::before { background: var(--accent); }
.pj-stp-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 0; margin: 0; padding: 0 2px;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--text-secondary); cursor: pointer;
  font: var(--fw-medium) var(--fs-100)/var(--lh-100) var(--font-ui); }
.pj-stp-btn:disabled { cursor: default; }
.pj-stp-btn:focus-visible { outline-offset: 2px; }
.pj-stp-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 24px; height: 24px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--bg-surface);
  color: var(--text-tertiary); font: var(--fw-semibold) var(--fs-100)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.pj-stp-btn:not(:disabled):hover .pj-stp-dot { border-color: var(--accent); }
.pj-stp.done .pj-stp-dot { border-color: var(--accent); background: var(--accent); color: var(--text-on-accent); }
.pj-stp.cur .pj-stp-dot { border: 2px solid var(--accent); color: var(--brand-700); }
.pj-stp.cur .pj-stp-btn { color: var(--text); font-weight: var(--fw-semibold); }
.pj-stp-lbl { max-width: 100%; text-align: center; overflow-wrap: anywhere; }

/* ---------- project page: tab body ---------- */
.pj-callout { margin: 0 0 16px; }
.pj-progress { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.pj-progress .pj-meta { font-size: var(--fs-200); line-height: var(--lh-200); }
.pj-facts { margin: 0; }
.pj-facts .link-btn { display: inline-flex; }
.pj-scope { padding: 12px 16px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  color: var(--text); font-size: var(--fs-300); line-height: 22px; overflow-wrap: anywhere; }
.pj-notes-text { margin: 0; overflow-wrap: anywhere; }
.pj-skel { display: flex; flex-direction: column; gap: 20px; padding: 8px 0; }
.pj-skel .skeleton:nth-child(2) { width: 80%; }
.pj-skel .skeleton:nth-child(3) { width: 60%; }

/* cost / profit and bill totals (legacy .totals-box is left alone elsewhere) */
.pj-totals { margin: 16px 0 0; padding: 12px 16px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.pj-totals .trow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0;
  color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.pj-totals .trow > :last-child { flex-shrink: 0; color: var(--text); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-totals .trow strong { font-weight: var(--fw-semibold); }
.pj-totals .trow.total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); color: var(--text);
  font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }

/* section heads inside a tab */
.pj-sec-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  margin: 24px 0 0; padding: 0 0 8px; border-bottom: 1px solid var(--border); }
.pj-sec-head:first-child, .pj-callout + .pj-sec-head { margin-top: 0; }
.pj-sec-head h4 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); }
.pj-count { color: var(--text-tertiary); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }

/* record rows (list rows, §3.16) */
.pj-rows { display: flex; flex-direction: column; }
.pj-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; gap: 12px; min-height: 52px; padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-300); line-height: var(--lh-300); opacity: 1; }
.pj-row:last-child { border-bottom: 0; }
.pj-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pj-row-title { color: var(--text); overflow-wrap: anywhere; }
.pj-row-title strong { font-weight: var(--fw-medium); }
.pj-row-title .pill { margin-left: 4px; }
.pj-row-sub { color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px; overflow-wrap: anywhere; }
.pj-row-amt { flex-shrink: 0; color: var(--text); font-weight: var(--fw-semibold); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pj-row-act { flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.pj-row.void :is(.pj-row-title, .pj-row-sub) { color: var(--text-tertiary); }
.pj-row.void .pj-row-amt { color: var(--text-tertiary); text-decoration: line-through; }
.pj-empty-line { margin: 0; padding: 12px 0; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.pj-sum-line { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.pj-sum-line b { color: var(--text); font-weight: var(--fw-semibold); }
.pj-muted { color: var(--text-tertiary); font-size: var(--fs-200); font-weight: var(--fw-regular); }
#pj-dbody > .ui-empty { padding: 32px 16px; }

/* tasks */
.pj-tasks { display: flex; flex-direction: column; }
.pj-task { display: flex; align-items: flex-start; gap: 4px; padding: 4px 0; border-bottom: 1px solid var(--border-subtle); }
.pj-task:last-child { border-bottom: 0; }
.pj-tick { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: var(--radius-md); background: none; font-size: 0; cursor: pointer; }
.pj-tick:hover { background: var(--bg-hover); }
.pj-box { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--text-on-accent); }
.pj-task.done .pj-box { border-color: var(--accent); background: var(--accent); }
.pj-task.doing .pj-box { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-700); }
.pj-task-main { flex: 1; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 2px; margin: 0; padding: 4px 8px;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--text); text-align: left; font: inherit; cursor: default; }
button.pj-task-main { cursor: pointer; }
button.pj-task-main:hover { background: var(--bg-subtle); }
button.pj-task-main:focus-visible { outline-offset: -2px; }
.pj-task-title { color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); overflow-wrap: anywhere; }
.pj-task.done .pj-task-title { color: var(--text-secondary); text-decoration: line-through; }
.pj-task-sub { color: var(--text-secondary); font-size: var(--fs-200); line-height: 18px; overflow-wrap: anywhere; }
.pj-tpl { margin-top: 12px; }
.pj-addrow { display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; margin: 16px 0 0; }
.pj-addrow input:not([type="file"]) { flex: 1; min-width: 0; }
.pj-addrow input[type="file"] { flex: 1; min-width: 0; color: var(--text-secondary); font-size: var(--fs-200); }

/* diary + gallery */
.pj-diary-add { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding: 0 0 16px; border-bottom: 1px solid var(--border); }
.pj-diary-add textarea { width: 100%; }
.pj-diary-add .pj-addrow { margin: 0; }
.pj-notes { display: flex; flex-direction: column; }
.pj-note { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--fs-300); line-height: 22px; overflow-wrap: anywhere; }
.pj-note:last-child { border-bottom: 0; }
.pj-note-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin: 0 0 2px;
  color: var(--text-secondary); font-size: var(--fs-100); line-height: var(--lh-100); }
.pj-note img { display: block; width: 140px; height: 140px; margin-top: 8px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; }
.pj-gal { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pj-gal-item { position: relative; width: 104px; margin: 0; }
.pj-gal-item img { display: block; width: 104px; height: 104px; object-fit: cover; border: 1px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; }
.pj-gal-item figcaption { position: absolute; top: 4px; left: 4px; pointer-events: none; }
.pj-gal-item .pj-gal-del { position: absolute; top: 4px; right: 4px; background: var(--bg-surface); border: 1px solid var(--border); }
.pj-gal-item .pj-gal-del:hover { background: var(--gray-50); }
.pj-gal-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 12px; margin: 12px 0 0; }
.pj-gal-type { flex: 0 0 200px; }
.pj-gal-file { flex: 1 1 200px; min-width: 0; }
.pj-gal-file input[type="file"] { color: var(--text-secondary); font-size: var(--fs-200); }

/* ---------- modals (task, mistri days, bill, project form, stock use, purchase, void) ---------- */
.pj-modal-sub { margin: 0 0 16px; color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.pj-fixed { color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); }
.pj-chiprow .pj-date { width: auto; }
#pl-head .ui-help { vertical-align: -3px; }
.pj-seg-status { align-self: flex-start; }
.pj-lines-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 8px;
  color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.pj-lines-head small { color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); }
.pj-line { margin: 0 0 8px; padding: 8px; background: var(--bg-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.pj-line .pl-desc { width: 100%; margin: 0 0 8px; }
.pj-line-nums { display: grid; grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr) minmax(0, 1.2fr) 32px; align-items: center; gap: 8px; }
.pj-line-nums input, .pj-line-nums select { width: 100%; min-width: 0; }
.pj-line-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.pj-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; color: var(--text); font-size: var(--fs-300); line-height: var(--lh-300); cursor: pointer; }
.pj-check input { flex-shrink: 0; margin-top: 2px; }
.pj-check b { font-weight: var(--fw-semibold); }
.pj-sugg { position: relative; }
.pj-sugg input { width: 100%; }
.pj-sugg-list { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; max-height: 240px; margin-top: 4px; padding: 4px; overflow-y: auto;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.pj-sugg-list button { display: block; width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-bottom: 0; border-radius: var(--radius-md);
  background: none; color: var(--text); text-align: left; cursor: pointer; font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); }
.pj-sugg-list button:hover, .pj-sugg-list button:focus-visible { background: var(--bg-hover); }
.pj-sugg-list .muted { color: var(--text-secondary); }

/* ---------- phones ---------- */
@media (max-width: 800px) {
  .pj-tools .pj-search { flex: 1 1 100%; min-width: 0; }
  .pj-list { grid-template-columns: minmax(0, 1fr); }
  .pj-card { padding: 12px 14px; }
  .pj-card-name { font-size: var(--fs-350); line-height: var(--lh-350); }
  .pj-card-name::after { content: ""; position: absolute; inset: -12px 0; }          /* 44 px hit area */
  .pj-mm-link { min-width: 44px; }

  /* stepper: full-bleed card so 8 stages get ≥ 44 px each; only the current stage is named (above the dots) */
  .pj-stage-card { margin: 0 -16px; padding: 12px 0 4px; border-left: 0; border-right: 0; border-radius: 0; }
  .pj-stage-card > :is(.pj-stage-meta, .pj-stage-now) { padding: 0 16px; }
  .pj-stage-now { display: block; }
  .pj-stp-lbl { display: none; }
  .pj-stp-btn { min-height: var(--tap); justify-content: center; }
  .pj-stp + .pj-stp::before { top: 21px; }
  .pj-dtabs > button[role="tab"] { height: var(--tap); min-height: var(--tap); }   /* §3.11 phone height; the 40 px base rule is (0,2,0) */

  .pj-row { gap: 8px 12px; }
  .pj-sugg-list button { min-height: var(--tap); }
  .pj-line-nums { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); }
  .pj-line-nums .pl-amt { grid-column: 1 / 3; }
  :is(.pj-addrow, .pj-gal-file) input[type="file"] { min-height: var(--tap); }
  .pj-gal-type { flex: 1 1 100%; }
}
@media (max-width: 480px) {
  .pj-row { flex-wrap: wrap; }
  .pj-row-main { flex: 1 1 55%; }
  .pj-addrow { flex-wrap: wrap; }
  .pj-addrow > .btn { flex: 1 1 auto; }
  .pj-addrow input[type="file"] { flex: 1 1 100%; }
}

/* === end WP-10 === */

/* === WP-11a page styles (Setup) === */
/* Get up to date wizard (setup.js) + its Home card — page styles on top of §3.18.
   Every rule is scoped to .su-* classes. Legacy su-* rules (style.css, layer "legacy") lose to any property set here;
   the resets below cover the legacy properties the component layer does not set (stripes, shadows, 700/800 weights,
   dashed dividers, blue fills). Tokens only. */

/* ---------- page frame ---------- */
.su-wrap { width: 100%; max-width: 800px; margin: 0; gap: var(--space-4); }   /* left edge lines up with the page title */
.su-wrap > .callout { margin: 0; }
.su-wrap .callout a { color: var(--text-link); font-weight: var(--fw-medium); }

/* loading: three flat skeleton rows, shown only when the load takes longer than 400 ms (§3.23) */
.su-loading { padding: var(--space-2) 0; text-align: left; opacity: 0; animation: su-appear 1ms linear 400ms forwards; }
@keyframes su-appear { to { opacity: 1; } }
.su-skel { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-4); }
.su-skel + .su-skel { border-top: 1px solid var(--border-subtle); }
.su-skel .skeleton:first-child { width: 60%; }
.su-skel .skeleton:last-child { width: 35%; height: 10px; }
.su-skel:nth-child(2) .skeleton:first-child { width: 48%; }
.su-skel:nth-child(3) .skeleton:first-child { width: 54%; }

/* ---------- stepper card (§3.18 adds bar, dots, steptxt) ---------- */
.su-head { display: block; }
.su-head .su-refresh { flex-shrink: 0; }
.su-head-note { margin: var(--space-3) 0 0; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.su-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.su-dot .ico { width: 14px; height: 14px; }
@media (min-width: 801px) {
  .su-head .su-refresh { display: none; }       /* desktop: "Refresh suggestions" is in the page header menu */
}

/* ---------- step card: body + sticky footer inside it ---------- */
.card.su-step { display: block; padding: 0; overflow: clip; }   /* clip (not a scroll box) so the footer can stick */
.su-step-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); }
.su-step-body > * { margin-top: 0; margin-bottom: 0; }
.su-q { margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); letter-spacing: 0; }
.su-q .ui-help { vertical-align: -3px; }
.su-why { max-width: 65ch; margin: calc(var(--space-2) * -1) 0 0; color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.su-now { color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.su-now strong { color: var(--text); }
.su-note, .su-intro { max-width: 70ch; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.su-note strong, .su-intro strong { color: var(--text); }
.su-none { font-style: normal; }
.su-link { align-self: flex-start; }
.su-callout p + p { margin-top: var(--space-2); }
.su-sec {
  display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 calc(var(--space-1) * -1); padding: 0; border: 0;
  color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.su-count { min-width: 20px; justify-content: center; }

/* sticky footer: Back · Save and finish later · Next/Finish */
.su-foot { border: 0; border-top: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.su-foot .su-back:disabled { background: var(--bg-surface); border-color: var(--border); }
@media (min-width: 801px) {
  .su-foot { padding: var(--space-3) var(--space-5); }
  .su-foot .su-next { flex: 0 0 auto; min-width: 96px; }
}

/* ---------- big choices: radio / checkbox cards (start date, businesses) ---------- */
.su-choices { display: grid; gap: var(--space-2); }
.su-choice {
  display: flex; align-items: flex-start; gap: var(--space-3); min-height: 0; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface); cursor: pointer;
}
.su-choice:hover { border-color: var(--gray-400); }
.su-choice input { margin: 2px 0 0; flex-shrink: 0; }
.su-choice > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.su-choice strong { color: var(--text); font-weight: var(--fw-medium); }
.su-choice small { color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.su-choice:has(input:checked) { border-color: var(--brand-300); background: var(--brand-50); }
.su-choice:focus-within { outline: 0; }
.su-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.su-choice .su-date-inp { width: 100%; max-width: 220px; margin-top: var(--space-2); }

/* ---------- list groups: suggestions, added, already in the app ---------- */
:is(.su-list, .su-done, .su-exist, .su-rows) {
  display: flex; flex-direction: column; gap: 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); overflow: hidden; overflow: clip;
}

/* suggestion row */
:is(.su-list, .su-done) > .su-card {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); min-height: 0; padding: 14px var(--space-4);
  border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: var(--bg-surface); box-shadow: none;
}
:is(.su-list, .su-done) > .su-card:last-child { border-bottom: 0; }
.su-card-main { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.su-card-title { flex: 1; min-width: 0; margin: 0; color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); overflow-wrap: anywhere; }
.su-card-amt { flex-shrink: 0; color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.su-party { color: var(--text-secondary); font-weight: var(--fw-regular); }
.su-ctx, .su-sugg { margin: 0; padding: 0; border-radius: 0; background: none; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
:is(.su-ctx, .su-sugg) strong { color: var(--text); font-weight: var(--fw-medium); }
.su-src { margin: 0; color: var(--text-tertiary); font-size: var(--fs-200); line-height: var(--lh-200); overflow-wrap: anywhere; }
.callout.su-conflict { margin: var(--space-1) 0; padding: var(--space-2) var(--space-3) var(--space-2) 36px; background-position: 12px 10px; font-size: var(--fs-200); line-height: var(--lh-200); }
.su-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }

/* "added" and "skipped" rows */
.su-done-row { gap: var(--space-3); padding: 10px var(--space-4); }
.su-ok {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 20px; width: 20px; height: auto;
  border-radius: 0; background: none; color: var(--icon); font-size: 0;
}
.su-done-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.su-done-main strong { color: var(--text); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.su-done-main small { color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); overflow-wrap: anywhere; }
.su-done-amt { flex-shrink: 0; color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-skipped .su-done-main strong { color: var(--text-secondary); text-decoration: none; }

/* rows of existing records (money places, customers, ledger, jobs, staff, fixed costs) */
.su-row { flex-wrap: nowrap; gap: var(--space-3); padding: 10px var(--space-4); }
.su-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.su-row-main strong { color: var(--text); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.su-row-main small { color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.su-row-amt { flex-shrink: 0; color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-row-amt.su-row-count { color: var(--text-secondary); font-weight: var(--fw-regular); }
.su-row-acts { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--space-1); }
.su-row-note { margin: 0; padding: 10px var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.su-row-note:last-child { border-bottom: 0; }

/* totals inside a list: group heading rows ("Customers owe you") and footer rows ("Waiting", "Every month") */
.su-total {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; margin: 0; padding: 10px var(--space-4);
  border: 0; border-top: 1px solid var(--border); background: var(--bg-subtle);
  color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui); font-variant-numeric: tabular-nums;
}
.su-total:first-child { border-top: 0; }
.su-total > span:last-child { flex-shrink: 0; white-space: nowrap; }
.su-total--muted { color: var(--text-secondary); font-weight: var(--fw-medium); }
.su-total--muted > span:last-child { color: var(--text); }
.su-total--group { border-bottom: 1px solid var(--border-subtle); }
/* no double line where a row runs into a total row */
:is(.su-row, .su-row-note, .su-card, .su-done-row):has(+ .su-total) { border-bottom: 0; }

/* collapsible groups (hidden / skipped suggestions) */
.su-more { padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); overflow: hidden; overflow: clip; }
.su-more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; margin: 0; padding: 0 var(--space-4);
  color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); cursor: pointer; list-style: none;
}
.su-more > summary::-webkit-details-marker { display: none; }
.su-more > summary:hover { background: var(--bg-subtle); }
.su-more > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.su-more[open] > summary { margin: 0; border-bottom: 1px solid var(--border); }
.su-more-chev { flex-shrink: 0; display: inline-flex; color: var(--icon); transition: transform var(--dur-2) var(--ease-standard); }
.su-more[open] .su-more-chev { transform: rotate(180deg); }
.su-more :is(.su-list, .su-done) { border: 0; border-radius: 0; }

.su-addrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 0; }

/* totals as a stat group (money step: 4 places + total; stock step: 2 cells) */
.su-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.su-stats.su-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.su-stats .stat-val { font-size: var(--fs-400); line-height: var(--lh-400); letter-spacing: 0; }
.su-stats .su-stat-total { background: var(--bg-subtle); }

/* tick boxes ("I have counted my stock", the two checks before Finish) */
.su-tick {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 10px var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface);
  color: var(--text); font-size: var(--fs-300); line-height: var(--lh-300); cursor: pointer;
}
.su-tick:hover { border-color: var(--gray-400); }
.su-tick:has(input:checked) { border-color: var(--brand-300); background: var(--brand-50); }
.su-tick input { flex-shrink: 0; margin: 0; }

/* ---------- check & finish: what you have / owe, and what it is worth ---------- */
.su-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.su-col { padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); overflow: hidden; overflow: clip; }
.su-col h4 {
  margin: 0; padding: 10px var(--space-4); border-bottom: 1px solid var(--border); background: var(--bg-subtle);
  color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.su-line { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px var(--space-4); color: var(--text-secondary); font-size: var(--fs-300); line-height: var(--lh-300); }
.su-line:nth-of-type(1) { padding-top: 10px; }
.su-line-amt { flex-shrink: 0; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.su-line--sum { margin-top: var(--space-1); padding: 10px var(--space-4); border-top: 1px solid var(--border); color: var(--text); font-weight: var(--fw-semibold); }
.su-worth {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4);
  padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface);
  color: var(--text); font-weight: var(--fw-regular);
}
.su-worth-lbl { display: inline-flex; align-items: center; color: var(--text-secondary); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); }
.su-worth-val { color: var(--text); font: var(--fw-semibold) var(--fs-500)/var(--lh-500) var(--font-ui); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }
.su-worth-val.is-negative { color: var(--danger-700); }

/* finished: centred block, "catch up" rows, routine */
.su-hero { max-width: none; padding: var(--space-6) var(--space-4) var(--space-4); }
.su-hero .ui-empty-ico { color: var(--icon); }
.su-hero .su-q { margin: 0 0 var(--space-1); }
.su-hero .ui-empty-text { max-width: 52ch; margin-left: auto; margin-right: auto; }
.su-golist .su-go {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 48px; margin: 0; padding: 0 var(--space-4);
  border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: var(--bg-surface);
  color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); text-align: left; cursor: pointer;
}
.su-golist .su-go:last-child { border-bottom: 0; }
.su-golist .su-go:hover { background: var(--bg-subtle); }
.su-go-ico { flex-shrink: 0; display: inline-flex; color: var(--icon); }
.su-go-lbl { flex: 1; min-width: 0; }
.su-go-chev { flex-shrink: 0; display: inline-flex; color: var(--gray-400); }
.su-routine { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; overflow: clip; }
.su-routine > .su-routine-row {
  padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; background: var(--bg-surface);
}
.su-routine > .su-routine-row:last-child { border-bottom: 0; }
.su-routine strong { color: var(--text); font-weight: var(--fw-medium); }
.su-routine p { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }

/* ---------- Home card (setupHomeCardHTML) ---------- */
.card.su-home {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4);
  padding: var(--space-4); border: 1px solid var(--border);
}
.su-home-main { min-width: 0; }
.su-home-title { margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.su-home-sub { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.su-home .su-bar { grid-column: 1 / -1; margin: 0; }

/* ---------- form modal (Edit then add, every Add button) ---------- */
.su-form { display: block; }
.su-form .fld > label, .su-form legend { color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.su-formsrc { margin: 0 0 var(--space-3); padding: 0; border-radius: 0; background: none; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.su-form .callout.su-conflict { margin: 0 0 var(--space-4); }
.su-intro { margin: 0 0 var(--space-4); }
.su-words:empty { display: none; }
.su-err { margin: 0; font-weight: var(--fw-regular); }
.su-choicefld { min-width: 0; margin: 0 0 var(--space-4); padding: 0; border: 0; }
.su-choicefld > legend { margin: 0 0 6px; padding: 0; }
.su-choicefld > .field-help { display: block; margin: -2px 0 6px; }
/* short choices = segmented control (§3.8) built from radio labels */
.su-choicefld > .su-seg { align-self: flex-start; }
.su-seg > .su-seg-opt:has(input:checked) { background: var(--bg-surface); color: var(--text); box-shadow: 0 0 0 1px var(--border-strong); }
.su-seg > .su-seg-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 0; }
.su-seg-opt span {
  display: inline; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none;
  color: inherit; font: inherit; cursor: pointer;
}
.su-seg-opt input:checked + span { border: 0; background: none; color: inherit; }
.su-seg-opt input:focus-visible + span { outline: 0; }
/* long choices = stacked radio cards */
.su-radios { display: grid; gap: var(--space-2); }
.su-radio {
  display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-surface);
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); cursor: pointer;
}
.su-radio:hover { border-color: var(--gray-400); }
.su-radio:has(input:checked) { border-color: var(--brand-300); background: var(--brand-50); }
.su-radio input { flex-shrink: 0; margin: 0; }
.su-form .su-tick { margin-bottom: var(--space-4); }

/* ---------- phones ---------- */
@media (max-width: 800px) {
  .su-wrap { gap: var(--space-3); }
  body:has(.su-wrap) #page-head { display: none; }      /* title is in the topbar; refresh sits in the stepper */
  .card.su-step { overflow: clip; }                      /* beats the phone .card scroll box, so the footer still sticks */
  .su-step-body { padding: var(--space-4); }
  .su-foot { flex-wrap: nowrap; gap: var(--space-2); }
  body:is(.kb-open, .modal-open) .su-foot { bottom: 0; } /* keyboard / sheet open: the bottom bar is hidden */
  .su-foot .su-back { flex: 0 0 auto; padding: 0 var(--space-3); }
  .su-foot .su-later { flex: 1 1 0; min-width: 0; padding: 0 var(--space-2); font-size: var(--fs-200); line-height: var(--lh-100); }
  .su-foot .su-next { order: 0; flex: 1 1 0; flex-basis: 0; min-width: 0; }
  .su-choice { padding: var(--space-3); }
  .su-choice .su-date-inp { max-width: none; }
  .su-card-main { gap: var(--space-3); }
  .su-acts { gap: var(--space-1); }
  .su-acts .btn-tertiary { padding: 0 var(--space-2); }
  /* record rows: name on the left over two lines; amount top right, its action under it (the name keeps its width) */
  .su-row { padding: 10px var(--space-4); }
  .su-row:has(> :is(.btn, .su-row-acts)) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px var(--space-3); }
  .su-row:has(> :is(.btn, .su-row-acts)) > .su-row-main { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .su-row:has(> :is(.btn, .su-row-acts)) > .su-row-amt { grid-column: 2; grid-row: 1; justify-self: end; }
  .su-row > :is(.btn, .su-row-acts) { grid-column: 2; grid-row: 2; justify-self: end; }
  .su-done-row:not(.su-skipped):has(> .btn) { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 6px var(--space-3); }
  .su-done-row:has(> .btn) > .su-ok { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .su-done-row:has(> .btn) > .su-done-main { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .su-done-row:has(> .btn) > .su-done-amt { grid-column: 3; grid-row: 1; justify-self: end; }
  .su-done-row:not(.su-skipped) > .btn { grid-column: 3; grid-row: 2; justify-self: end; }
  .su-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .su-stats > .su-stat-total { grid-column: 1 / -1; }
  .su-choicefld > .su-seg { display: flex; align-self: stretch; width: 100%; }
  .su-radio { min-height: var(--tap); }
  .su-tick { min-height: var(--tap); }
  .su-more > summary { min-height: var(--tap); }
}
@media (max-width: 640px) {
  .su-sheet { grid-template-columns: minmax(0, 1fr); }
}

/* === end WP-11a === */

/* === WP-11b page styles (Help) === */
/* Help centre (help.js) — design-v2.md §3.19, §7.10. Tokens only; help-* classes only.
   Never selects .help-print / .doc (the printed cheat sheet is a document, R17).
   Legacy style.css help rules (layer "legacy") are overridden here property by property. */

/* ---- page frame ---- */
.help-wrap { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: none; margin: 0; font-size: var(--fs-300); line-height: var(--lh-300); }
.help-wrap--page { max-width: 800px; }
.help-wrap--page:has(.help-article--wide) { max-width: 1040px; }
.help-card { box-shadow: none; }
.help-card-meta { flex-shrink: 0; color: var(--text-tertiary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); white-space: nowrap; }

/* ---- search (Help home: 44 px; panel: control height) ---- */
.help-search { width: 100%; max-width: 640px; }
.help-search .help-q { width: 100%; height: var(--control-lg); min-height: var(--control-lg); font-size: var(--fs-400); line-height: var(--lh-400); }
#help-panel :is(input[type="search"], input[placeholder^="Search"]) {
  padding-left: 34px; background-image: var(--ico-search); background-repeat: no-repeat; background-position: 10px center; background-size: 16px 16px;
}

/* ---- Help home layout: one column on phones and tablets; guides + side column from 1100 px ---- */
.help-home-grid { display: flex; flex-direction: column; gap: 16px; }
.help-home-grid[hidden] { display: none; }
.help-col { display: contents; }
.help-slot-page { order: 1; }
.help-slot-page:empty { display: none; }
.help-card--start { order: 2; }
.help-slot-groups { order: 3; display: flex; flex-direction: column; gap: 16px; }
.help-card--why { order: 4; }
.help-card--words { order: 5; }
.help-card--more { order: 6; }
@media (min-width: 1100px) {
  .help-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
  .help-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
}

/* ---- list rows (guides, search results, "more help") ---- */
.help-list { display: flex; flex-direction: column; }
.help-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 10px 16px;
  border: 0; border-top: 1px solid var(--border-subtle); border-radius: 0; background: none; box-shadow: none;
  color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.help-list > .help-row:first-child { border-top: 0; }
.help-row:hover { background: var(--bg-subtle); }
.help-row:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.help-row-lead { flex-shrink: 0; display: inline-flex; justify-content: center; width: 20px; color: var(--icon); font-size: 0; }
.help-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.help-row-title { color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); }
.help-row-sub {
  color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/18px var(--font-ui);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.help-row-go { flex-shrink: 0; display: inline-flex; color: var(--gray-400); font-size: 0; }
.help-results .ui-empty { padding: 32px 16px; }

/* ---- "Start here" card: ordered list with 24 px number circles ---- */
.help-numlist { list-style: none; counter-reset: help-n; margin: 0; padding: 4px 0; }
.help-numlist > li { counter-increment: help-n; margin: 0; }
.help-numrow {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 16px 8px 52px;
  color: var(--text); text-decoration: none;
}
.help-numrow::before {
  content: counter(help-n); position: absolute; left: 16px; top: 50%; margin-top: -12px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--bg-muted); color: var(--gray-700); font: var(--fw-semibold) var(--fs-100)/1 var(--font-ui);
}
.help-numrow:hover { background: var(--bg-subtle); }
.help-numrow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.help-numrow-title { flex: 1; min-width: 0; font-weight: var(--fw-medium); }
.help-numrow-meta { flex-shrink: 0; color: var(--text-tertiary); font-size: var(--fs-100); line-height: var(--lh-100); }

/* ---- definition lists (glossary page: two columns; home card: stacked) ---- */
.help-dl { margin: 0; }
.help-card .help-dl { padding: 4px 16px 8px; }
.help-dl-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 0; border-top: 1px solid var(--border-subtle); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.help-dl-row:first-child { border-top: 0; }
.help-dl-row dt { margin: 0; color: var(--text); font-weight: var(--fw-medium); }
.help-dl-row dd { margin: 0; color: var(--text-secondary); }
.help-dl--full .help-dl-row { grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 4px 24px; }
.help-dl-row.is-hl { margin: 0 -12px; padding: 12px; border-radius: var(--radius-md); border-top-color: transparent; background: var(--bg-selected); }
.help-dl-row.is-hl + .help-dl-row { border-top-color: transparent; }
.help-dl-row dd .help-acct { margin-top: 2px; }
.help-ex { display: block; margin-top: 2px; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.help-filter { width: 100%; max-width: 360px; margin: 0 0 8px; }

/* ---- article (guide, "why", special pages) ---- */
.help-article { width: 100%; max-width: 800px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-surface); box-shadow: none; }
.help-article.help-article--wide { max-width: 1040px; }
.help-article :is(p, dd, .help-ul > li, .help-steps > li) { max-width: 68ch; }
.help-article :is(p, li) { color: var(--gray-800); font-size: var(--fs-300); line-height: 22px; }
.help-article p { margin: 0 0 8px; }
.help-title { margin: 4px 0 4px; color: var(--text); font: var(--fw-semibold) var(--fs-500)/var(--lh-500) var(--font-ui); letter-spacing: var(--tracking-tight); }
.help-article .help-meta, .help-meta { margin: 0 0 16px; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.help-meta--page { margin: 0; }
.help-article .help-lead { margin: 0 0 8px; }
.help-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin: 24px 0 8px; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.help-h-meta { color: var(--text-tertiary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); }
.help-ul { margin: 0; padding: 0 0 0 20px; list-style: disc; }
.help-ul > li { margin: 4px 0; }

/* numbered steps: 24 px circles on --bg-muted */
.help-steps { list-style: none; counter-reset: help-s; margin: 0; padding: 0; }
.help-steps > li { counter-increment: help-s; position: relative; margin: 0; padding: 7px 0 7px 36px; border: 0; }
.help-steps > li::before {
  content: counter(help-s); position: absolute; left: 0; top: 6px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--bg-muted); color: var(--gray-700); font: var(--fw-semibold) var(--fs-100)/1 var(--font-ui);
}

.help-callout { margin: 16px 0 0; }
.help-article .help-callout { color: var(--text); }

/* formulas: --bg-subtle box, mono 13 px (not .help-formula: the legacy rule forces padding-left: 0 !important) */
.help-fbox {
  margin: 0; padding: 12px 16px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--bg-subtle); color: var(--gray-800); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-mono);
  overflow-wrap: anywhere;
}
.help-fbox > div + div { margin-top: 4px; }
.help-fbox strong { font-weight: var(--fw-semibold); }
.help-acct, .help-article .help-acct { display: block; margin: 8px 0 0; color: var(--text-secondary); font-size: var(--fs-200); font-style: normal; line-height: var(--lh-200); }

/* "Do it now": secondary button with a trailing arrow */
.help-do { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--border-subtle); }
.help-article p.help-do { max-width: none; margin: 24px 0 0; }
.help-do-lbl { color: var(--text-secondary); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.help-do-btn { min-height: var(--control-md); }
.help-do-btn .ico { margin-left: 0; margin-right: -2px; }
.help-note, .help-article .help-note { color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
.help-related { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 0; }
.help-related > li { margin: 0; }
.help-related .btn-link { text-align: left; white-space: normal; }
.help-updated, .help-article .help-updated { margin: 16px 0 0; color: var(--text-tertiary); font-size: var(--fs-100); line-height: var(--lh-100); text-align: left; }

/* start page: five numbered parts */
.help-parts { list-style: none; counter-reset: help-p; margin: 8px 0 0; padding: 0; }
.help-parts > .help-part { counter-increment: help-p; position: relative; margin: 0; padding: 16px 0 16px 36px; border-top: 1px solid var(--border-subtle); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.help-parts > .help-part:first-child { border-top: 0; padding-top: 0; }
.help-parts > .help-part::before {
  content: counter(help-p); position: absolute; left: 0; top: 16px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-full);
  background: var(--bg-muted); color: var(--gray-700); font: var(--fw-semibold) var(--fs-100)/1 var(--font-ui);
}
.help-parts > .help-part:first-child::before { top: 0; }
.help-part > .help-h { margin: 0 0 8px; }
.help-part .help-do { margin-top: 12px; padding-top: 0; border-top: 0; }
.help-part .help-related { margin-top: 12px; }

/* routine checklists */
.help-routine { margin: 0; padding: 0; border: 0; border-radius: 0; }
.help-routine-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.help-routine-head .help-h { margin-bottom: 8px; }
.help-checks { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.help-check { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 8px 0 12px; border-top: 1px solid var(--border-subtle); }
.help-check:first-child { border-top: 0; }
.help-checks .help-check label { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; min-height: 44px; padding: 10px 0; cursor: pointer; }
.help-check label > span { color: var(--gray-800); }
.help-check input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.help-check input:checked + span { color: var(--text-secondary); text-decoration: line-through; }
.help-go { flex-shrink: 0; }

/* roles */
.help-role { padding: 16px 0 0; margin: 16px 0 0; border-top: 1px solid var(--border-subtle); }
.help-roles > .help-role:first-child { margin-top: 8px; padding-top: 0; border-top: 0; }
.help-role-head { display: flex; align-items: center; gap: 8px; }
.help-role-head .help-h { margin: 0; }
.help-article .help-role-text { margin: 4px 0 0; }
.help-article .help-role-pages { margin: 8px 0 0; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }

/* cheat sheet table (on screen; the printed copy is a .doc and is not styled here) */
.help-tablewrap { margin: 8px 0 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; overflow: clip; }   /* clip: not a scroll box, so the sticky header stops under the top bar (§3.4) */
.help-tablewrap .help-table { min-width: 0; }   /* legacy .card .table { min-width: 620px } on phones */
.help-tablewrap .help-table :is(th, td) { border-top: 0; border-left: 0; border-right: 0; vertical-align: top; }
.help-tablewrap .help-table th { vertical-align: middle; }
.help-tablewrap .help-table td.num { width: 40px; color: var(--text-secondary); }

/* ---- side panel (§3.19): title, close icon, same article typography at 14 px ---- */
.help-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.help-panel-title { flex: 1; min-width: 0; margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-400)/var(--lh-400) var(--font-ui); }
.help-panel-body { padding: 16px 20px 24px; font-size: var(--fs-300); line-height: var(--lh-300); }
.help-panel-body .help-article { max-width: none; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.help-panel-body .help-article :is(p, li) { font-size: var(--fs-300); }
.help-panel-body .help-list { margin: 0 -8px; }
.help-panel-body .help-row { padding: 10px 8px; border-radius: var(--radius-md); }
.help-panel-body .help-h { margin-top: 20px; }
.help-panel-home > .help-q { width: 100%; margin: 0 0 4px; }
.help-panel-home .help-note { margin: 16px 0 0; }
.help-back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: 0 0 4px; padding: 0; border: 0; background: none;
  color: var(--text-secondary); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); text-decoration: none; cursor: pointer;
}
.help-back:hover { color: var(--text); }
.help-back .ico { width: 16px; height: 16px; }

/* ---- phones ---- */
@media (max-width: 800px) {
  .help-article { padding: 16px; }
  .help-wrap .help-article :is(p, li) { font-size: var(--fs-350); line-height: var(--lh-350); }
  .help-panel-body .help-article :is(p, li) { font-size: var(--fs-300); line-height: 22px; }
  .help-wrap .help-row-title { font-size: var(--fs-350); line-height: var(--lh-350); }
  .help-dl--full .help-dl-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .help-do .help-do-btn { min-height: var(--tap); }
  /* the side panel is outside #app: give its controls the §3.6 phone targets (R16) */
  #help-panel .btn:not(.btn-sm, .btn-link) { min-height: var(--tap); }
  #help-panel .btn-sm { position: relative; min-height: 36px; }
  #help-panel .btn-sm::after { content: ""; position: absolute; inset: -4px 0; }
  #help-panel .btn-icon { position: relative; width: 40px; height: 40px; }
  #help-panel .btn-icon::after { content: ""; position: absolute; inset: -2px; }
  #help-panel :is(.btn-link, .help-back) { position: relative; }
  #help-panel :is(.btn-link, .help-back)::after { content: ""; position: absolute; inset: -12px -4px; }
  #help-panel .help-check input[type="checkbox"] { width: 20px; height: 20px; }
}
@media (max-width: 600px) {
  .help-tablewrap { border: 0; border-radius: 0; overflow: visible; }
  .help-tablewrap .help-table, .help-tablewrap .help-table tbody { display: block; width: 100%; min-width: 0; }
  .help-tablewrap .help-table thead { display: none; }
  .help-tablewrap .help-table tr { display: block; margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .help-tablewrap .help-table tr > td:nth-child(n) { display: block; padding: 2px 0; border: 0; background: none; }
  .help-tablewrap .help-table tr > td.num:nth-child(n) { display: none; }
}

/* === end WP-11b === */

/* === WP-12 page styles (Loans) === */
/* Loans (loans.js, §7.11). Page-scoped selectors only; #view / #modal keep these above the generic .table and
   input rules without !important. Tokens only — no raw colours. Legacy .ln-* rules (style.css, legacy layer)
   lose to these; classes whose legacy rule uses !important (.ln-note) are not used any more. */

/* ---- page frame ---- */
.ln-page { gap: 16px; }
@media (max-width: 800px) { .ln-page { gap: 12px; } }

/* ---- stats: three neutral cells in one row; on phones the third one takes the whole second row ---- */
@media (min-width: 801px) { .ln-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .ln-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---- toolbar: [I borrowed | I lent]  [All 3] [Sazzad 2] …  ............  [Search] ---- */
.ln-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-width: 0; }
.ln-toolbar .ln-tabs { flex: 0 0 auto; }
.ln-whochips {
  flex: 1 1 240px; min-width: 0; margin: 0; padding: 4px 0;   /* 4 px: room for the chips' 44 px hit area inside the scroller */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.ln-whochips::-webkit-scrollbar { display: none; }
.ln-whochips .chip { flex-shrink: 0; }
.ln-search {
  flex: 0 0 260px; width: 260px; height: var(--control-md); min-height: var(--control-md); margin: 0 0 0 auto; padding: 0 12px 0 34px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); background-color: var(--bg-surface); box-shadow: none;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
@media (max-width: 800px) {
  .ln-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .ln-whochips { flex: 0 0 auto; margin: 0 -16px; padding: 4px 16px; }
  .ln-search { flex: 0 0 auto; width: 100%; margin: 0; }
}

/* ---- list cards ---- */
.ln-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 800px) { .ln-list { gap: 12px; } }
.ln-head-meta { color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }
.ln-calm { margin: 0; padding: 20px 16px; color: var(--text-secondary); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui); text-align: center; }

/* settled loans: collapsible card */
.ln-done > summary {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; list-style: none; cursor: pointer;
  color: var(--text); font: var(--fw-semibold) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.ln-done > summary::-webkit-details-marker { display: none; }
.ln-done > summary:hover { background: var(--bg-subtle); }
.ln-done > summary:focus-visible { outline-offset: -2px; }
.ln-done > summary .ico { color: var(--icon); transition: transform var(--dur-2) var(--ease-standard); }
.ln-done:not([open]) > summary .ico { transform: rotate(-90deg); }
.ln-done[open] > summary { border-bottom: 1px solid var(--border); }

/* ---- shared text pieces (table, list rows, history) ---- */
.ln-name { display: block; color: var(--text); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); overflow-wrap: anywhere; }
:is(#view, #modal) :is(.ln-c-who, .ln-c-last, .ln-hist-who, .ln-hc-entry) > small {
  display: block; color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/18px var(--font-ui); overflow-wrap: anywhere;
}
.ln-unset, .ln-dash { color: var(--text-tertiary); }
.ln-date { white-space: nowrap; }
.ln-money { display: block; color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ln-money.is-zero { color: var(--text-tertiary); font-weight: var(--fw-regular); }
:is(#view, #modal) .ln-money-lbl { display: block; color: var(--text-secondary); font: var(--fw-regular) var(--fs-100)/var(--lh-100) var(--font-ui); }

/* ---- open / settled loans table (desktop) ---- */
#view .ln-table th.ln-th-act { width: 1%; }
#view .ln-table .ln-c-who { width: 28%; }
#view .ln-table .ln-c-due .ln-date { display: block; }
#view .ln-table .ln-c-due .pill { margin-top: 4px; }
.ln-due-pre { display: none; }
@media (min-width: 801px) {
  #view .ln-table .ln-money-lbl:not(.is-over) { display: none; }   /* the "Left" column head says it; phones show the label */
  /* same column widths in the open and the settled table, so the two line up */
  #view .ln-table :is(.ln-c-total, .ln-c-paid) { width: 11%; }
  #view .ln-table .ln-c-left { width: 12%; }
  #view .ln-table .ln-c-last { width: 16%; }
  #view .ln-table .ln-c-due { width: 14%; }
}
/* narrow laptops / tablets with the sidebar open: drop the columns the history also shows, never clip the card */
@media (min-width: 801px) and (max-width: 1100px) { #view .ln-table .ln-c-last { display: none; } }
@media (min-width: 801px) and (max-width: 960px) { #view .ln-table .ln-c-paid { display: none; } }
@media (min-width: 801px) and (max-width: 880px) { #view .ln-table .ln-c-total { display: none; } }
#view .ln-table--done :is(td, .ln-name, .ln-money) { color: var(--text-secondary); }

/* ---- phones: loans become list rows (R13, §3.16) ----
   [name / "Taken by Sazzad" ........ ৳6,000 / left to repay]
   ["Due 30 Sep 2026" + pill ............... Repay  ⋯ ] */
@media (max-width: 800px) {
  #view .ln-table, #view .ln-table tbody { display: block; width: 100%; min-width: 0; }   /* legacy .card .table { min-width: 620px } */
  #view .ln-table thead { display: none; }
  #view .ln-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who left" "due act";
    align-items: start; gap: 8px 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface);
  }
  #view .ln-table tr:last-child { border-bottom: 0; }
  #view .ln-table tr.clickable:hover { background: var(--bg-subtle); }
  #view .ln-table td { display: block; min-width: 0; padding: 0; border: 0; background: none; }
  #view .ln-table .ln-c-who { grid-area: who; width: auto; }
  #view .ln-table .ln-name { font-size: var(--fs-350); line-height: var(--lh-350); }
  #view .ln-table .ln-c-left { grid-area: left; text-align: right; }
  #view .ln-table .ln-c-left .ln-money { font-size: var(--fs-350); line-height: var(--lh-350); }
  #view .ln-table :is(.ln-c-total, .ln-c-paid, .ln-c-last) { display: none; }
  #view .ln-table .ln-c-due {
    grid-area: due; align-self: center; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
    color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200);
  }
  #view .ln-table .ln-c-due .ln-date { display: inline; }
  #view .ln-table .ln-c-due .pill { margin-top: 0; }
  #view .ln-table .ln-due-pre { display: inline; }
  #view .ln-table .ln-dash { display: none; }
  #view .ln-table td.t-actions { grid-area: act; width: auto; justify-self: end; align-self: center; }
  /* settled: [name / taken by ........ ⋯] — nothing left and no due date to show */
  #view .ln-table--done tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who act"; align-items: center; }
  #view .ln-table--done :is(.ln-c-left, .ln-c-due) { display: none; }
}

/* ---- modals: new loan, repay / borrow more, edit details ---- */
#modal .ln-m { display: flex; flex-direction: column; gap: 16px; }
#modal .ln-m .fld { margin-bottom: 0; }
#modal .ln-m .fx-chips { margin: 0; }
#modal .ln-m .form-grid { gap: 16px; margin: 0; }
#modal .ln-m .form-grid > * { min-width: 0; }                      /* 440 px sheet: two inputs share a row without overflowing */
#modal .ln-m .fld > :is(input, select, textarea) { width: 100%; min-width: 0; }
.ln-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#modal .ln-lbl { margin: 0; color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
#modal .ln-m-info { margin: 0; color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }
#modal .ln-m-info strong { color: var(--text); }
#modal .ln-hint { margin: 0; min-height: 0; color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }
#modal .ln-m > .ln-hint:empty { margin-top: -16px; }                /* empty live region: keep it, take no space */
#modal .ln-hint.red { color: var(--danger-700); font-weight: var(--fw-medium); }
.ln-match:empty { display: none; }

/* big amount field (same look as the pay-staff modal) */
#modal .ln-m .fx-amount {
  width: 100%; height: auto; min-height: 0; margin: 0; padding: 8px 12px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: none;
  color: var(--text); font: var(--fw-semibold) var(--fs-700)/var(--lh-700) var(--font-ui);
  letter-spacing: var(--tracking-tight); text-align: center; font-variant-numeric: tabular-nums;
}
#modal .ln-m .fx-amount:hover:not(:focus) { border-color: var(--gray-500); }
#modal .ln-m .fx-amount:focus { border-color: var(--focus); box-shadow: var(--focus-ring); outline: 2px solid transparent; }
#modal .ln-m .fx-amount[aria-invalid="true"] { border-color: var(--danger-600); }
#modal .ln-m .fx-amount[aria-invalid="true"]:focus { box-shadow: var(--focus-ring-danger); }

/* "Who took it?" chips + "Other…" name field */
.ln-other { border-style: solid; }
#modal .ln-other-in {
  width: 100%; height: var(--control-md); min-height: var(--control-md); margin: 0; padding: 0 12px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: none;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
@media (max-width: 800px) { #modal .ln-other-in { min-height: var(--tap); font-size: var(--fs-400); } }   /* 16 px: no iOS zoom */

/* "Does this change Cash in hand?" — two long answers wrap instead of overflowing a 375 px sheet */
#modal .ln-cash { align-items: stretch; }
#modal .ln-cash > button { height: auto; min-height: 36px; padding: 6px 10px; white-space: normal; line-height: 18px; text-align: center; }
@media (max-width: 800px) { #modal .ln-cash > button { min-height: 40px; } }

/* "Add to the open loan from …" */
#modal .ln-check {
  display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); margin: 0; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-subtle);
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
#modal .ln-check input { flex-shrink: 0; margin: 2px 0 0; }

/* ---- history modal ---- */
.ln-hist-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ln-hist-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ln-hist-bal { flex-shrink: 0; text-align: right; }
.ln-hist-bal .ln-money { font-size: var(--fs-500); line-height: var(--lh-500); letter-spacing: var(--tracking-tight); }
.ln-hist-box { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; overflow: clip; }
#modal .ln-htable th.ln-th-act { width: 1%; }
#modal .ln-htable .ln-hkind { display: block; color: var(--text); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); overflow-wrap: anywhere; }
#modal .ln-htable .ln-hc-left { color: var(--text-secondary); }
#modal .ln-htable tr.is-void td, #modal .ln-htable tr.is-void .ln-hkind { color: var(--text-tertiary); }
#modal .ln-htable tr.is-void :is(.ln-hkind, .ln-hc-amt) { text-decoration: line-through; }
@media (max-width: 600px) {
  .ln-hist-bal .ln-money { font-size: var(--fs-400); line-height: var(--lh-400); }
  #modal .ln-htable, #modal .ln-htable tbody { display: block; width: 100%; min-width: 0; }
  #modal .ln-htable thead { display: none; }
  /* [entry ...... amount] then [date ...... left] (+ ⋯ for admins) */
  #modal .ln-htable tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "entry amt" "date left";
    align-items: baseline; gap: 2px 12px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle);
  }
  #modal .ln-htable.has-act tr { grid-template-columns: minmax(0, 1fr) auto 40px; grid-template-areas: "entry amt act" "date left act"; }
  #modal .ln-htable tr:last-child { border-bottom: 0; }
  #modal .ln-htable td { display: block; min-width: 0; padding: 0; border: 0; background: none; }
  #modal .ln-htable .ln-hc-entry { grid-area: entry; }
  #modal .ln-htable .ln-hc-amt { grid-area: amt; }
  #modal .ln-htable .ln-hc-left { grid-area: left; font-size: var(--fs-200); line-height: var(--lh-200); }
  #modal .ln-htable .ln-hc-left::before { content: "Left "; }
  #modal .ln-htable tr.is-void .ln-hc-left { visibility: hidden; }        /* a voided entry has no running balance */
  #modal .ln-htable td.ln-hc-date { grid-area: date; color: var(--text-secondary); font-size: var(--fs-200); line-height: var(--lh-200); }
  #modal .ln-htable td.t-actions { grid-area: act; align-self: center; width: auto; }
}

/* ---- void reason (inside the confirm dialog) ---- */
.ui-dlg .ln-void-lbl { display: block; margin: 12px 0 6px; color: var(--gray-700); font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui); }
.ui-dlg .ln-void-reason {
  display: block; width: 100%; height: var(--control-md); padding: 0 12px;
  border: 1px solid var(--border-input); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: none;
  color: var(--text); font: var(--fw-regular) var(--fs-300)/var(--lh-300) var(--font-ui);
}
.ui-dlg .ln-void-reason::placeholder { color: var(--text-tertiary); opacity: 1; }
.ui-dlg .ln-void-reason:hover:not(:focus) { border-color: var(--gray-500); }
.ui-dlg .ln-void-reason:focus { border-color: var(--focus); box-shadow: var(--focus-ring); outline: 2px solid transparent; }
.ui-dlg .ln-void-note { margin: 8px 0 0; color: var(--text-secondary); font: var(--fw-regular) var(--fs-200)/var(--lh-200) var(--font-ui); }
@media (max-width: 800px) { .ui-dlg .ln-void-reason { min-height: var(--tap); font-size: var(--fs-400); } }

/* === end WP-12 === */

/* === Narrow desktop, 801-1099 px (small laptop windows, iPhone landscape once full width): wide tables scroll
   sideways inside their card instead of being cut off (cards are overflow:clip on desktop). Not while the stock
   bulk-entry footer is shown, which needs the card to stay non-scrolling to stick to the screen bottom. === */
@media (min-width: 801px) and (max-width: 1099px) {
  #view .card:has(table):not(:has(.inv-bulkfoot)) { overflow-x: auto; --sticky-top: 0px; }
}

/* === New sale quick buttons (v123): colour chips, running total, "on the way" stock === */
.pos-q-colors { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.pos-q-color {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text); cursor: pointer;
  font: var(--fw-medium) var(--fs-200)/var(--lh-200) var(--font-ui);
}
.pos-q-color:hover { border-color: var(--border-strong); }
.pos-q-color[aria-pressed="true"] { border-color: var(--brand-600); box-shadow: inset 0 0 0 1px var(--brand-600); color: var(--brand-700); }
.pos-q-color .color-swatch { width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 50%; flex: none; }
.pos-q-n {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--brand-600); color: #fff;
  font: var(--fw-semibold) var(--fs-100)/18px var(--font-ui); text-align: center;
}
.pos-q-sum { margin-right: auto; color: var(--text-secondary); font: var(--fw-medium) var(--fs-300)/var(--lh-300) var(--font-ui); }
.pos-q-sum:empty { display: none; }
.pos-q-way { color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 600px) {
  .pos-q-color { min-height: var(--tap); }
  .modal-foot > .pos-q-sum { flex: 1 1 100%; margin: 0 0 4px; }
  .modal-foot:has(> .pos-q-sum:not(:empty)) { flex-wrap: wrap; }
}
/* === end New sale quick buttons === */

/* === Safe areas (iPhone notch, Dynamic Island, home indicator) — v123 ===
   index.html now sets viewport-fit=cover, so env(safe-area-inset-*) is live on iPhone
   (before it always read 0 and the bottom bar sat under the home indicator).
   Every rule below is identical to the old value when the insets are 0 (desktop, most Android).
   Must stay at the END of theme.css: several rules only win by source order. */
:root {
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-right: env(safe-area-inset-right, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  --topbar-h: calc(56px + var(--sa-top));          /* --sticky-top, .sidebar-brand and help scroll-margins follow */
}
html { scroll-padding-top: var(--sa-top); scroll-padding-bottom: var(--sa-bottom); }

/* top bar + sidebar */
.topbar { padding-top: var(--sa-top); }
.sidebar-brand { padding-top: var(--sa-top); padding-left: calc(16px + var(--sa-left)); }
#nav { padding-left: calc(8px + var(--sa-left)); }
.sidebar-bottom { padding-left: calc(8px + var(--sa-left)); padding-bottom: calc(8px + var(--sa-bottom)); }
.skip-link { left: calc(8px + var(--sa-left)); }
.skip-link:focus { top: calc(8px + var(--sa-top)); }
.login-screen { padding: max(16px, var(--sa-top)) max(16px, var(--sa-right)) max(16px, var(--sa-bottom)) max(16px, var(--sa-left)); }

@media (min-width: 801px) {                          /* iPhone landscape lands here once the page is full width */
  .sidebar { width: calc(var(--sidebar-w) + var(--sa-left)); }
  .topbar { padding-right: calc(24px + var(--sa-right)); }
  .page-head { padding-right: calc(24px + var(--sa-right)); }
  .view { padding-right: calc(24px + var(--sa-right)); }
  .su-foot { padding-bottom: calc(var(--space-3) + var(--sa-bottom)); }
  .rp-savebar, .inv-bulkfoot { padding-bottom: calc(12px + var(--sa-bottom)); }
}
@media (max-width: 800px) {
  .topbar { height: calc(52px + var(--sa-top)); padding-left: calc(4px + var(--sa-left)); padding-right: calc(4px + var(--sa-right)); }
  .sidebar { width: calc(280px + var(--sa-left)); left: calc(-290px - var(--sa-left)); }   /* .sidebar.open { left: 0 } still wins */
  .page-head { padding-left: calc(16px + var(--sa-left)); padding-right: calc(16px + var(--sa-right)); }
  .view { padding-left: calc(16px + var(--sa-left)); padding-right: calc(16px + var(--sa-right)); }
  .mbar { padding-left: calc(4px + var(--sa-left)); padding-right: calc(4px + var(--sa-right)); }
  /* the setup footer sits on top of .mbar, which already covers the home indicator: count the inset once */
  .su-foot { padding-bottom: 12px; }
  body:is(.kb-open, .modal-open) .su-foot { padding-bottom: calc(12px + var(--sa-bottom)); }   /* .mbar hidden, footer at bottom:0 */
}

/* POS cart (desktop) */
.pos-cart { top: calc(var(--topbar-h) + 16px); }
@media (min-width: 901px) { .pos-cart { max-height: calc(100dvh - 88px - var(--sa-top) - var(--sa-bottom)); } }

/* dialogs and sheets */
@media (min-width: 601px) {
  .modal { padding: calc(24px + var(--sa-top)) max(24px, var(--sa-right)) max(24px, var(--sa-bottom)) max(24px, var(--sa-left)); }
  .modal-box { max-height: calc(100dvh - 48px - var(--sa-top)); }
}
@media (max-width: 600px) {
  .modal-box, .modal-box.modal-sm, .modal-box.modal-lg { max-height: min(92dvh, calc(100dvh - var(--sa-top) - 8px)); }
  .modal-box > .modal-body:last-child { padding-bottom: calc(16px + var(--sa-bottom)); }   /* sheet without a footer */
  #gs-results { padding-bottom: calc(8px + var(--sa-bottom)); }                            /* .gs-foot is hidden on phones */
}

/* help panel: sheet on phones, right-hand side panel from 700px */
.help-panel-body { padding-bottom: calc(24px + var(--sa-bottom)); }
@media (max-width: 699px) {
  .help-panel { top: max(8vh, calc(var(--sa-top) + 8px)); }
  .help-panel-head { padding-left: calc(20px + var(--sa-left)); padding-right: calc(12px + var(--sa-right)); }
  .help-panel-body { padding-left: calc(20px + var(--sa-left)); padding-right: calc(20px + var(--sa-right)); }
}
@media (min-width: 700px) {
  .help-panel { width: calc(420px + var(--sa-right)); padding-top: var(--sa-top); }
  .help-panel-head { padding-right: calc(12px + var(--sa-right)); }
  .help-panel-body { padding-right: calc(20px + var(--sa-right)); }
}
/* === end safe areas === */