/* tokens.css */
/* Hyfecta design tokens (DESIGN_SYSTEM.md, sections 2 to 9). This is the only file that holds colour values: every other
   stylesheet, script and page uses these custom properties (test/design-system.test.mjs checks it). Tokens are named by
   role, never by hue, except the raw brand scale. Linked first on every page, before every other stylesheet.

   Themes: :root holds the light set and color-scheme "light dark", so native controls, scrollbars and date pickers follow.
   The dark set is written twice with the same values, once for System mode on a dark operating system and once for a
   viewer who chose Dark (data-theme on <html>; <body> carries only data-app). Both are screen-only, so print always uses
   the light set.

   Density (11.5): tables are roomy unless data-density="compact" is on <html>; report statement tables and any
   table.compact are always compact. */

:root {
  color-scheme: light dark;

  /* 2.2 Brand scale (the same in both themes) */
  --teal-950: #0b2329;
  --teal-900: #102e36;
  --teal-850: #0d272e;
  --teal-800: #173c45;
  --teal-700: #21505b;
  --mint-400: #8fd6b8;
  --mint-300: #a5e0c6;
  --mint-100: #e2f4ec;
  --mint-50: #f0f9f5;
  --green-700: #0b5a46;
  --green-600: #0e6a53;
  --green-500: #14876a;

  /* 2.3 Roles (light) */
  --bg: #f4f6f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f7f9f9;
  --surface-hover: #f1f5f4;
  --selected: #e9f5f0;
  --text: #132328;
  --text-2: #3b4f55;
  --text-3: #556a70;
  --text-inverse: #ffffff;
  --border: #dfe6e7;
  --border-strong: #c5d0d2;
  --border-control: #7b8d92;
  --divider: #ebf0f0;
  --action: #0e6a53;
  --action-hover: #0b5a46;
  --action-text: #ffffff;
  --action-soft-bg: #e2f4ec;
  --action-soft-text: #0b5a46;
  --link: #0c6650;
  --focus: #0e6a53;
  --danger-action: #b0261c;
  --danger-action-text: #ffffff;
  --overlay: rgba(11, 35, 41, .48);
  --skeleton: #e8eded;
  --illus-halo: #f0f9f5;
  /* L3.1: the frame behind a two-step sign-in QR code, white in both themes so any phone camera reads it. */
  --qr-frame: #ffffff;
  /* L3.5: the logo on a light surface (the client portal's bar): the ink wordmark in light, the white one in dark. */
  --logo-on-surface: url(/images.svg?v=fbc2034a9f49#logo-ink);
  --bulk-bg: #173c45;
  --bulk-text: #ffffff;
  --tooltip-bg: #173c45;
  --tooltip-text: #ffffff;

  /* 2.4 Shell, the top bar (dark in both themes) */
  --shell-bg: #102e36;
  --shell-bg-2: #0d272e;
  --shell-line: rgba(255, 255, 255, .12);
  --shell-text: #ffffff;
  --shell-muted: #b2c8cb;
  --shell-hover: rgba(255, 255, 255, .08);
  --shell-pressed: rgba(255, 255, 255, .14);
  --shell-field: rgba(255, 255, 255, .07);
  --shell-accent: #a5e0c6;
  --shell-accent-text: #0b2329;
  --shell-focus: #a5e0c6;

  /* 2.5 Status tones: pale background, text, dot. --<tone> is short for the tone's text colour. */
  --success-bg: #e6f5ec;
  --success-text: #0b6a3c;
  --success-dot: #1f9d5c;
  --warning-bg: #fdf3e1;
  --warning-text: #8a4b00;
  --warning-dot: #c27a0e;
  --danger-bg: #fdeceb;
  --danger-text: #b0261c;
  --danger-dot: #d93d32;
  --info-bg: #e9f1fd;
  --info-text: #1b59b5;
  --info-dot: #3b7be0;
  --violet-bg: #f1edfc;
  --violet-text: #5634b8;
  --violet-dot: #7d5ae0;
  --neutral-bg: #eef2f2;
  --neutral-text: #45585e;
  --neutral-dot: #7b8d92;
  --success: var(--success-text);
  --warning: var(--warning-text);
  --danger: var(--danger-text);
  --info: var(--info-text);
  --violet: var(--violet-text);
  --neutral: var(--neutral-text);
  /* Fixed in both themes */
  --count-bg: #c42b30;
  --count-text: #ffffff;
  --demo-bg: #f6d27a;
  --demo-text: #3d2a00;

  /* 2.6 Charts */
  --chart-1: #14876a;
  --chart-2: #c8650f;
  --chart-3: #173c45;
  --chart-4: #4c63c8;
  --chart-5: #7653c2;
  --chart-6: #c1446f;
  --chart-grid: #e3e9e9;
  --chart-zero: #7b8d92;
  --chart-area: rgba(20, 135, 106, .14);

  /* 2.7 App colours (a white glyph on each, in both themes) */
  --app-home: #21505b;
  --app-accounts: #12775d;
  --app-jobs: #4c63c8;
  --app-people: #b83a66;
  --app-payroll: #a85e08;
  --app-companies: #1f6fae; /* 0.21c: Company Management takes Group & intercompany's colour (COMPANIES_DESIGN.md 2.1) */
  --app-group: #1f6fae;
  --app-structure: #7653c2;
  --app-approvals: #1a7a4a;
  --app-settings: #55686e;
  --app-workspace: #2b6a87;
  --app-portal: #8a5a1e;
  --app-glyph: #ffffff;

  /* 11.22 Avatar tones (dark has its own low tints since the review of part 2): teal, indigo, rose, amber, sky, violet */
  --avatar-t1-bg: #d5efe5;
  --avatar-t1-text: #0b5a46;
  --avatar-t2-bg: #e1e6fb;
  --avatar-t2-text: #33489e;
  --avatar-t3-bg: #fbe3ec;
  --avatar-t3-text: #9a2c53;
  --avatar-t4-bg: #fbecd5;
  --avatar-t4-text: #7a4300;
  --avatar-t5-bg: #ddeefa;
  --avatar-t5-text: #1d5a8a;
  --avatar-t6-bg: #ebe4fb;
  --avatar-t6-text: #5634b8;

  /* 3 Type */
  --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --fs-12: 12px;
  --lh-12: 16px;
  --fs-13: 13px;
  --lh-13: 18px;
  --fs-14: 14px;
  --lh-14: 20px;
  --fs-16: 16px;
  --lh-16: 24px;
  --fs-20: 20px;
  --lh-20: 28px;
  --fs-24: 24px;
  --lh-24: 32px;
  --fs-32: 32px;
  --lh-32: 40px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-figure: -.01em;
  --measure: 68ch;

  /* 4 Spacing (a 4 px grid) and layout */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --page-pad: 32px;
  --page-max: 1440px;
  --page-max-form: 1200px;
  --card-pad: 20px;
  --card-gap: 24px;
  --bar-h: 56px;
  --menu-h: 44px;
  --tabbar-h: 56px;
  --control-h: 36px;
  --control-h-compact: 32px;
  --target: 44px;
  /* L3.1, 11.25: the sign-in and account card, and the wider card of the two-step set-up. */
  --auth-card-w: 400px;
  --auth-card-wide-w: 480px;

  /* 11.4 and 11.5 Table rows (roomy) */
  --row-h: 48px;
  --cell-py: 12px;
  --cell-px: 16px;
  --cell-fs: 14px;
  --cell-lh: 20px;
  --row-btn-h: 32px;

  /* 5 Radii */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* 6 Shadows (light) */
  --sh-1: 0 1px 2px rgba(16, 46, 54, .06), 0 1px 3px rgba(16, 46, 54, .04);
  --sh-2: 0 6px 16px rgba(16, 46, 54, .10), 0 2px 4px rgba(16, 46, 54, .05);
  --sh-3: 0 20px 48px rgba(16, 46, 54, .22);

  /* 7 Z-layers (a modal <dialog> sits in the top layer and needs none) */
  --z-base: 0;
  --z-sticky: 10;
  --z-actionbar: 20;
  --actionbar-h: 64px;
  --bulk-h: 64px;
  --z-shell: 30;
  --z-popover: 40;
  --z-toast: 50;
  --z-tooltip: 60;

  /* 8 Motion */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
}

/* 2.1 A viewer's own choice wins over the operating system; print is always light. */
:root[data-theme="light"] { color-scheme: light; }
@media print {
  :root { color-scheme: light; }
}

/* 11.5 Compact rows: chosen on <html>, or always (statement tables, table.compact) */
:root[data-density="compact"], .statement-table, table.compact {
  --row-h: 36px;
  --cell-py: 6px;
  --cell-px: 12px;
  --cell-fs: 13px;
  --cell-lh: 18px;
  --row-btn-h: 28px;
}

/* 4 and 9: the side gutter and bar height by width; controls on touch screens (44 px rows buttons in both densities) */
@media (max-width: 1023.98px) {
  :root { --page-pad: 24px; --card-gap: 16px; --cell-px: 12px; }
}
@media screen and (max-width: 767.98px) {
  :root { --page-pad: 16px; --card-pad: 16px; --card-gap: 12px; --bar-h: 52px; --bulk-h: 176px; }
}
/* A phone on its side: a 48 px bottom menu, icons beside labels (9; review of part 1, RT-6). */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 767.98px) {
  :root { --tabbar-h: 48px; }
}
/* A phone on its side: the sticky action bars are 52 px (11.19). */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --actionbar-h: 52px; }
}
@media (pointer: coarse) {
  :root { --control-h: 44px; --control-h-compact: 44px; }
  :root, :root[data-density="compact"], .statement-table, table.compact { --row-btn-h: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-2: 120ms; --dur-3: 120ms; }
}

/* 2.1 Dark set, for System mode on a dark operating system. Keep it identical to the next block. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1a1e;
    --surface: #11242a;
    --surface-raised: #152b32;
    --surface-sunken: #0e2025;
    --logo-on-surface: url(/images.svg?v=fbc2034a9f49#logo);
    --surface-hover: #163038;
    --selected: #153a35;
    --text: #e5eef0;
    --text-2: #bccbce;
    --text-3: #93a8ad;
    --text-inverse: #0b2329;
    --border: #22393f;
    --border-strong: #314c53;
    --border-control: #5f7a81;
    --divider: #1b3036;
    --action: #8fd6b8;
    --action-hover: #a5e0c6;
    --action-text: #0b2329;
    --action-soft-bg: #153a35;
    --action-soft-text: #a5e0c6;
    --link: #8fd6b8;
    --focus: #8fd6b8;
    --danger-action: #ff8a80;
    --danger-action-text: #2a0b08;
    --overlay: rgba(0, 0, 0, .62);
    --skeleton: #1b3036;
    --illus-halo: #163038;
    --bulk-bg: #1d3d45;
    --bulk-text: #e5eef0;
    --tooltip-bg: #d9e6e8;
    --tooltip-text: #0b2329;
    --shell-bg: #0a1d22;
    --shell-bg-2: #08181c;
    --shell-line: rgba(255, 255, 255, .10);
    --success-bg: #12362a;
    --success-text: #8fe0b4;
    --success-dot: #3fbf7f;
    --warning-bg: #3a2a10;
    --warning-text: #f5c470;
    --warning-dot: #e0a030;
    --danger-bg: #3d1a18;
    --danger-text: #ffaaa2;
    --danger-dot: #f06a5f;
    --info-bg: #142a48;
    --info-text: #a6c6ff;
    --info-dot: #6a9cf0;
    --violet-bg: #2a2148;
    --violet-text: #c9b8ff;
    --violet-dot: #a58cf0;
    --neutral-bg: #1b3036;
    --neutral-text: #bccbce;
    --neutral-dot: #7b9399;
    --chart-1: #3fbf98;
    --chart-2: #f0a050;
    --chart-3: #d9e6e8;
    --chart-4: #8b9cf0;
    --chart-5: #b59cf0;
    --chart-6: #f08fb0;
    --chart-grid: #1f353b;
    --chart-zero: #5f7a81;
    --chart-area: rgba(63, 191, 152, .18);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .30);
    --sh-2: 0 8px 20px rgba(0, 0, 0, .40);
    --sh-3: 0 20px 48px rgba(0, 0, 0, .55);
    /* Review of part 2 (V3): the six avatar tones as low tints with light initials, so they do not glare on dark surfaces. */
    --avatar-t1-bg: #194640;
    --avatar-t1-text: #a8e3cc;
    --avatar-t2-bg: #263a5a;
    --avatar-t2-text: #c3cdf6;
    --avatar-t3-bg: #453041;
    --avatar-t3-text: #f5c2d5;
    --avatar-t4-bg: #45412b;
    --avatar-t4-text: #f4d6a8;
    --avatar-t5-bg: #1e4258;
    --avatar-t5-text: #b9dcf6;
    --avatar-t6-bg: #33365c;
    --avatar-t6-text: #d6c8f7;
  }
}

/* 2.1 Dark set, for a viewer who chose Dark. Keep it identical to the block above. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b1a1e;
    --surface: #11242a;
    --surface-raised: #152b32;
    --surface-sunken: #0e2025;
    --logo-on-surface: url(/images.svg?v=fbc2034a9f49#logo);
    --surface-hover: #163038;
    --selected: #153a35;
    --text: #e5eef0;
    --text-2: #bccbce;
    --text-3: #93a8ad;
    --text-inverse: #0b2329;
    --border: #22393f;
    --border-strong: #314c53;
    --border-control: #5f7a81;
    --divider: #1b3036;
    --action: #8fd6b8;
    --action-hover: #a5e0c6;
    --action-text: #0b2329;
    --action-soft-bg: #153a35;
    --action-soft-text: #a5e0c6;
    --link: #8fd6b8;
    --focus: #8fd6b8;
    --danger-action: #ff8a80;
    --danger-action-text: #2a0b08;
    --overlay: rgba(0, 0, 0, .62);
    --skeleton: #1b3036;
    --illus-halo: #163038;
    --bulk-bg: #1d3d45;
    --bulk-text: #e5eef0;
    --tooltip-bg: #d9e6e8;
    --tooltip-text: #0b2329;
    --shell-bg: #0a1d22;
    --shell-bg-2: #08181c;
    --shell-line: rgba(255, 255, 255, .10);
    --success-bg: #12362a;
    --success-text: #8fe0b4;
    --success-dot: #3fbf7f;
    --warning-bg: #3a2a10;
    --warning-text: #f5c470;
    --warning-dot: #e0a030;
    --danger-bg: #3d1a18;
    --danger-text: #ffaaa2;
    --danger-dot: #f06a5f;
    --info-bg: #142a48;
    --info-text: #a6c6ff;
    --info-dot: #6a9cf0;
    --violet-bg: #2a2148;
    --violet-text: #c9b8ff;
    --violet-dot: #a58cf0;
    --neutral-bg: #1b3036;
    --neutral-text: #bccbce;
    --neutral-dot: #7b9399;
    --chart-1: #3fbf98;
    --chart-2: #f0a050;
    --chart-3: #d9e6e8;
    --chart-4: #8b9cf0;
    --chart-5: #b59cf0;
    --chart-6: #f08fb0;
    --chart-grid: #1f353b;
    --chart-zero: #5f7a81;
    --chart-area: rgba(63, 191, 152, .18);
    --sh-1: 0 1px 2px rgba(0, 0, 0, .30);
    --sh-2: 0 8px 20px rgba(0, 0, 0, .40);
    --sh-3: 0 20px 48px rgba(0, 0, 0, .55);
    /* Review of part 2 (V3): the six avatar tones as low tints with light initials, so they do not glare on dark surfaces. */
    --avatar-t1-bg: #194640;
    --avatar-t1-text: #a8e3cc;
    --avatar-t2-bg: #263a5a;
    --avatar-t2-text: #c3cdf6;
    --avatar-t3-bg: #453041;
    --avatar-t3-text: #f5c2d5;
    --avatar-t4-bg: #45412b;
    --avatar-t4-text: #f4d6a8;
    --avatar-t5-bg: #1e4258;
    --avatar-t5-text: #b9dcf6;
    --avatar-t6-bg: #33365c;
    --avatar-t6-text: #d6c8f7;
  }
}

/* Each app's tile: its colour and its solid white glyph (sections 2.7 and 13), for any element marked data-app-id: the bar's
   app button, the All apps cards, the bottom menu and the Home tiles (moved here from shell.css in L1.5, so every stylesheet
   reads them as tokens). */
[data-app-id] { --app-c: var(--app-home); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-home); }
[data-app-id="accounts"] { --app-c: var(--app-accounts); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-accounts); }
[data-app-id="jobs"] { --app-c: var(--app-jobs); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-jobs); }
[data-app-id="people"] { --app-c: var(--app-people); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-people); }
[data-app-id="payroll"] { --app-c: var(--app-payroll); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-payroll); }
[data-app-id="companies"] { --app-c: var(--app-companies); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-companies); }
[data-app-id="group"] { --app-c: var(--app-group); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-group); }
[data-app-id="structure"] { --app-c: var(--app-structure); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-structure); }
[data-app-id="approvals"] { --app-c: var(--app-approvals); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-approvals); }
[data-app-id="settings"] { --app-c: var(--app-settings); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-settings); }
[data-app-id="workspace"] { --app-c: var(--app-workspace); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-workspace); }
[data-app-id="portal"] { --app-c: var(--app-portal); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-portal); }
/* 0.21c task 2.5: My account (profile.html, its own page since L3.3 drew it inside Settings) has a person on its tile. */
[data-app-id="account"] { --app-c: var(--app-settings); --app-i: url(/images.svg?v=fbc2034a9f49#i-app-account); }

/* base.css */
/* Hyfecta base (DESIGN_SYSTEM.md 3, 11.1 to 11.8, 11.14, 11.16, 11.17 and 17): the reset, type, links, focus, buttons,
   fields, checkboxes, tables and their density and phone-card layouts, dialogs and phone sheets, notices, status pills and
   empty states. Linked second on every page, after tokens.css and before every other stylesheet. Colours, sizes and
   timings come only from tokens.css.

   Element rules sit inside :where(), so they weigh nothing: any class rule in a later stylesheet (the shell, the
   components, a page) wins over them without a fight. The variant classes (.secondary, .danger, .quiet and so on) are
   plain classes, so they win over the element defaults here and lose to a more particular rule later. */

/* ---------- Reset and page ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:root { font-synthesis: none; }
body {
  margin: 0;
  /* Review of part 1 (RT-1): a guard, so nothing can widen a phone page past the screen (the page itself never scrolls sideways). */
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--action-soft-bg); color: var(--action-soft-text); }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type (3) ---------- */
:where(h1, h2, h3, h4) { color: var(--text); font-weight: var(--fw-semibold); }
:where(h1) {
  margin: 0 0 var(--s-1);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  letter-spacing: var(--tracking-figure);
}
:where(h2) { margin: 0 0 var(--s-4); font-size: var(--fs-16); line-height: var(--lh-16); }
:where(h3) { font-size: var(--fs-14); line-height: var(--lh-14); }
:where(h4) { font-size: var(--fs-13); line-height: var(--lh-13); }
:where(b, strong) { font-weight: var(--fw-semibold); }
:where(small) { font-size: var(--fs-12); line-height: var(--lh-12); }
:where(code, kbd, samp, pre) { font-family: var(--font-mono); font-size: .92em; }
:where(kbd) {
  display: inline-block;
  min-width: 20px;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--fs-12);
  line-height: 16px;
  text-align: center;
}
.muted { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.hint { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
:where(.num, td, output) { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------- Links and focus (17) ---------- */
:where(a) { color: var(--link); text-underline-offset: 2px; text-decoration-thickness: 1px; }
:where(a:hover) { text-decoration-thickness: 2px; }
.text-link { color: var(--link); font-weight: var(--fw-medium); }
:where(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
:where(summary) { cursor: pointer; }

/* ---------- Buttons (11.1) ---------- */
/* Primary is the default look of every button and .button-link; the classes below change it. */
:where(button, .button-link, input[type="submit"], input[type="button"], input[type="reset"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--control-h);
  margin: 0;
  padding: 7px var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--action);
  color: var(--action-text);
  font: inherit;
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-medium);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
:where(button:not(:disabled):hover, .button-link:hover, input[type="submit"]:not(:disabled):hover, input[type="button"]:not(:disabled):hover) {
  background: var(--action-hover);
  color: var(--action-text);
  text-decoration: none;
}
:where(button:disabled, button[aria-disabled="true"], .button-link[aria-disabled="true"], input[type="submit"]:disabled, input[type="button"]:disabled) {
  opacity: .55;
  cursor: not-allowed;
}
/* Busy: the label stays and a small turning ring follows it; the button takes no more clicks. */
:where(button[aria-busy="true"], .button-link[aria-busy="true"]) { cursor: progress; pointer-events: none; }
:where(button[aria-busy="true"], .button-link[aria-busy="true"])::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hy-spin .8s linear infinite;
}

/* Secondary: a white button with a fine outline and a lift. Its label names it, so the outline only decorates (fields,
   which have no label inside, keep the 3:1 control outline). */
.secondary { border-color: var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.secondary:where(:not(:disabled):hover) { border-color: var(--border-control); background: var(--surface-hover); color: var(--text); }

/* Danger: the secondary look in the danger tone; .danger-solid after a confirmation. */
.danger { border-color: var(--danger-text); background: var(--surface); color: var(--danger-text); }
.danger:where(:not(:disabled):hover) { border-color: var(--danger-text); background: var(--danger-bg); color: var(--danger-text); }
.danger-solid { border-color: var(--danger-action); background: var(--danger-action); color: var(--danger-action-text); }
.danger-solid:where(:not(:disabled):hover) { border-color: var(--danger-action); background: var(--danger-action); color: var(--danger-action-text); filter: brightness(.94); }

/* Quiet: no fill, link colour, an underline on hover. .link-button and .mfa-switch are its inline forms. */
.quiet { border-color: transparent; background: transparent; color: var(--link); padding-inline: var(--s-2); }
.quiet:where(:not(:disabled):hover) { background: var(--surface-hover); color: var(--link); text-decoration: underline; }
.link-button, .mfa-switch {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--link);
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--fw-medium);
  text-align: left;
}
.link-button:where(:not(:disabled):hover), .mfa-switch:where(:hover) { background: none; color: var(--link); text-decoration: underline; }
.link-button::before { content: "▸ "; color: var(--text-3); }
.link-button[aria-expanded="true"]::before { content: "▾ "; }
.link-button:disabled { color: var(--text-3); text-decoration: none; cursor: default; opacity: 1; }
.mfa-switch { justify-self: start; text-decoration: underline; }

/* Sizes: small (and every button in a table row), large, icon only. */
.small-button, :where(td) :where(button, .button-link) {
  min-height: var(--row-btn-h);
  padding: calc((var(--row-btn-h) - 20px) / 2) var(--s-3);
  font-size: var(--fs-13);
  line-height: 18px;
}
.button-lg { min-height: 44px; padding: 11px var(--s-5); font-size: var(--fs-16); line-height: var(--lh-16); }
.icon-button { width: var(--control-h); padding: 0; }

/* Split: a primary button and a chevron button joined, with a fine line between. */
.split { display: inline-flex; }
.split > :where(button):first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.split > :where(button) + :where(button) {
  width: var(--control-h);
  padding: 0;
  border-left-color: var(--action-soft-bg);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Button rows. A form is a grid, so its buttons keep their own width instead of stretching (on phones they fill the row). */
.form-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
:where(form) > :where(button, .button-link, input[type="submit"]) { justify-self: start; }
.pair > :is(button, .button-link) { flex: 0 0 auto; align-self: flex-end; }

/* ---------- Text fields, selects and text areas (11.2) ---------- */
:where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="hidden"]), select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: var(--control-h);
  margin: 0;
  padding: 7px var(--s-3);
  border: 1px solid var(--border-control);
  border-radius: var(--r-md);
  background-color: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  transition: border-color var(--dur-1) var(--ease-out);
}
:where(input, textarea)::placeholder { color: var(--text-3); opacity: 1; }
:where(input:hover, select:hover, textarea:hover):where(:not(:disabled, [readonly], :focus)) { border-color: var(--text-3); }
:where(input:focus, select:focus, textarea:focus):where(:not([type="checkbox"], [type="radio"], [type="file"])) {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}
:where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], input:user-invalid, select:user-invalid, textarea:user-invalid) {
  border-color: var(--danger-text);
}
:where(input[readonly], textarea[readonly]) { background-color: var(--surface-sunken); color: var(--text-2); }
:where(input:disabled, select:disabled, textarea:disabled) { background-color: var(--surface-sunken); opacity: .55; cursor: not-allowed; }
:where(select:not([multiple], [size])) {
  appearance: none;
  padding-right: 36px;
  background-image: url(/images.svg?v=fbc2034a9f49#i-chevron-select);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  cursor: pointer;
  text-overflow: ellipsis;
}
:where(textarea) {
  min-height: 96px;
  max-height: calc(12 * var(--lh-14) + 16px);
  resize: vertical;
  field-sizing: content;
}
:where(input[type="number"]) { font-variant-numeric: tabular-nums; }
:where(input[type="file"]) { max-width: 100%; color: var(--text-2); font: inherit; font-size: var(--fs-13); }
:where(input[type="file"])::file-selector-button {
  min-height: 32px;
  margin: 0 var(--s-3) 0 0;
  padding: 5px var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: var(--fw-medium);
  cursor: pointer;
}
:where(input[type="file"]):hover::file-selector-button { background: var(--surface-hover); }

/* Labels sit above their field; a .check label is a row. */
:where(label) {
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: var(--fw-medium);
}
:where(form) { display: grid; gap: var(--s-4); }
:where(fieldset) { min-width: 0; margin: 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); }
:where(legend) { padding: 0 6px; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-semibold); }

/* ---------- Checkboxes and radios (11.3) ---------- */
:where(input[type="checkbox"], input[type="radio"]) {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--action);
  cursor: pointer;
  justify-self: start;
}
label.check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--text);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
}
label.check input { flex: none; margin: 0; }

/* Segmented control: period switches, theme and density (.density-switch). */
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.segmented > :where(button) {
  min-height: 30px;
  padding: 4px var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
}
.segmented > :where(button:not(:disabled):hover) { background: transparent; color: var(--text); }
/* Review of part 1 (A11Y-4): the chosen segment carries a 2 px ring in the action colour, over 3:1 on the track (1.4.11). */
.segmented > :where(button[aria-pressed="true"], button[aria-checked="true"]) {
  background: var(--action-soft-bg);
  color: var(--action-soft-text);
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 0 0 2px var(--action);
}

/* ---------- Second-level tabs (11.11): underlined, never pills (review of part 1, V11) ---------- */
.accounting-nav { display: flex; gap: var(--s-1); margin: 0 0 var(--s-6); padding: 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.accounting-nav::-webkit-scrollbar { display: none; }
.accounting-nav > :where(button, a) {
  flex: none;
  min-height: 40px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.accounting-nav > :where(button:not(:disabled):hover, a:hover) { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.accounting-nav > [aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); box-shadow: inset 0 -2px 0 var(--action); }
.accounting-nav > :focus-visible { outline-offset: -2px; }
@media (pointer: coarse) { .accounting-nav > :where(button, a) { min-height: var(--target); } }

/* ---------- Tables (11.4), density (11.5) ---------- */
/* Review of part 1 (RT-1): a scroll box is the containing block of what it holds, so a hidden label inside a table can never
   widen the page. */
.scroll { position: relative; overflow: auto; overscroll-behavior-x: contain; }
.scroll-tall { max-height: min(70vh, 720px); }
:where(table) { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--cell-fs); line-height: var(--cell-lh); }
:where(th) {
  height: 40px;
  padding: var(--s-2) var(--cell-px);
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-3);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-medium);
  text-align: left;
  vertical-align: middle;
}
:where(.scroll thead th) { position: sticky; top: 0; z-index: var(--z-sticky); }
:where(tbody th) { height: var(--row-h); background: transparent; color: var(--text); font-size: var(--cell-fs); line-height: var(--cell-lh); border-bottom-color: var(--divider); }
:where(td) {
  height: var(--row-h);
  padding: var(--cell-py) var(--cell-px);
  border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
/* A cell laid out as a row of buttons is a flex box, where height is exact rather than a minimum. */
:where(td.action-buttons) { height: auto; min-height: var(--row-h); align-items: center; }
:where(tbody tr:hover) > :where(td, th) { background: var(--surface-hover); }
:where(tr[aria-selected="true"], tr.is-selected) > :where(td, th) { background: var(--selected); }
:where(tr[aria-selected="true"], tr.is-selected) > :where(td, th):first-child { box-shadow: inset 3px 0 0 var(--action); }
th.num, td.num { text-align: right; white-space: nowrap; }
:where(tfoot td, tfoot th, tr.total-row > td, tr.total-row > th) {
  border-top: 1px solid var(--border-strong);
  background: var(--surface-sunken);
  color: var(--text);
  font-weight: var(--fw-semibold);
}
:where(td) > :where(ul) { margin: 0; padding-left: var(--s-4); }

/* ---------- Phone card layout for lists (11.6): a table opts in with .cards-on-phone ---------- */
@media screen and (max-width: 767.98px) {
  table.cards-on-phone, .cards-on-phone > tbody, .cards-on-phone > tbody > tr, .cards-on-phone > tbody > tr > td { display: block; }
  .cards-on-phone > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cards-on-phone > tbody > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px var(--s-3);
    padding: var(--s-4);
    border-bottom: 1px solid var(--divider);
  }
  .cards-on-phone > tbody > tr > td {
    grid-column: 1 / -1;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-2);
    font-size: var(--fs-13);
    line-height: var(--lh-13);
    text-align: left;
    white-space: normal;
  }
  .cards-on-phone > tbody > tr > td[data-label]::before { content: attr(data-label) ": "; color: var(--text-3); }
  .cards-on-phone > tbody > tr > td.col-title { grid-column: 1; grid-row: 1; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
  .cards-on-phone > tbody > tr > td.num { grid-column: 2; grid-row: 1; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); text-align: right; }
  .cards-on-phone > tbody > tr > td.num ~ td.num { grid-column: 1 / -1; grid-row: auto; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-regular); text-align: left; }
  .cards-on-phone > tbody > tr > td:is(.col-title, .col-status, .col-actions)::before,
  .cards-on-phone > tbody > tr > td.num:not(td.num ~ td.num)::before { content: none; }
  .cards-on-phone > tbody > tr > td.col-status { margin-top: var(--s-1); }
  .cards-on-phone > tbody > tr > td.col-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
  .cards-on-phone > tbody > tr > td:is(.col-hide-phone, :empty) { display: none; }
  .cards-on-phone > tbody > tr:hover > td { background: none; }
  .cards-on-phone > tbody > tr:where([aria-selected="true"], .is-selected) { background: var(--selected); box-shadow: inset 3px 0 0 var(--action); }
  .cards-on-phone > tbody > tr:where([aria-selected="true"], .is-selected) > td { background: none; box-shadow: none; }
}

/* ---------- Dialogs (11.14): centred on desktop, a bottom sheet on a phone ---------- */
:where(dialog) {
  --dialog-w: 480px;
  width: min(var(--dialog-w), calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 48px);
  overflow: auto;
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--sh-3);
  overscroll-behavior: contain;
}
:where(dialog.mfa-dialog) { --dialog-w: 440px; }
:where(#approval-request-dialog) { --dialog-w: 620px; }
:where(dialog.access-dialog) { --dialog-w: 720px; }
:where(#send-dialog) { --dialog-w: 760px; }
:where(#detail-dialog) { --dialog-w: 780px; }
:where(dialog.wide-dialog) { --dialog-w: 880px; }
:where(dialog[open]) { animation: hy-dialog-in var(--dur-3) var(--ease-out); }
:where(dialog)::backdrop { background: var(--overlay); animation: hy-fade var(--dur-3) var(--ease-out); }
:where(dialog) > :where(h2:first-child, form:first-child > h2:first-child) { margin-bottom: var(--s-2); }
:where(dialog) :where(h3) { margin: var(--s-5) 0 var(--s-2); }
:where(dialog) :where(.form-actions) { margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--divider); }

/* ---------- Notices (11.16) ---------- */
/* Each notice draws its icon with a mask in the text colour, so it needs no markup and follows the theme. */
.notice, .warning-note, #message:not(:empty), .form-error:not(:empty), #payment-error:not(:empty), #credit-error:not(:empty), #correction-error:not(:empty) {
  position: relative;
  padding: var(--s-3) var(--s-4) var(--s-3) 44px;
  border-radius: var(--r-md);
  overflow-wrap: anywhere;
}
.notice::before, .warning-note::before, #message:not(:empty)::before, .form-error:not(:empty)::before,
#payment-error:not(:empty)::before, #credit-error:not(:empty)::before, #correction-error:not(:empty)::before, .legal-note::before {
  content: "";
  position: absolute;
  left: var(--s-4);
  top: 14px;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat;
}
.notice { margin: var(--s-4) 0 0; background: var(--info-bg); color: var(--info-text); font-size: var(--fs-14); line-height: var(--lh-14); }
.notice.tone-success { background: var(--success-bg); color: var(--success-text); }
.notice.tone-success::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-check-circle); mask-image: url(/images.svg?v=fbc2034a9f49#i-check-circle); }
.notice.tone-warning { background: var(--warning-bg); color: var(--warning-text); }
.notice.tone-danger { background: var(--danger-bg); color: var(--danger-text); }
.notice.tone-warning::before, .notice.tone-danger::before, .warning-note::before, .form-error:not(:empty)::before,
#payment-error:not(:empty)::before, #credit-error:not(:empty)::before, #correction-error:not(:empty)::before {
  -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-warning);
  mask-image: url(/images.svg?v=fbc2034a9f49#i-warning);
}
.warning-note { margin: 0; background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.warning-note::before { top: 13px; }
/* The status line: one per page, info tone (a toast on phones arrives with the shell). */
#message:not(:empty) { margin-bottom: var(--s-4); padding-top: 10px; padding-bottom: 10px; background: var(--info-bg); color: var(--info-text); font-size: var(--fs-13); line-height: var(--lh-13); }
#message:not(:empty)::before { top: 11px; }
/* Errors: danger-tone notices under the form they belong to. */
.form-error, #payment-error, #credit-error, #correction-error { margin: var(--s-3) 0 0; color: var(--danger-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.form-error:not(:empty), #payment-error:not(:empty), #credit-error:not(:empty), #correction-error:not(:empty) {
  padding-top: var(--s-2);
  padding-bottom: var(--s-2);
  padding-left: 36px;
  background: var(--danger-bg);
}
.form-error:not(:empty)::before, #payment-error:not(:empty)::before, #credit-error:not(:empty)::before, #correction-error:not(:empty)::before { left: var(--s-3); top: 9px; }
.form-error:empty, #payment-error:empty, #credit-error:empty, #correction-error:empty { display: none; }
/* Legal and safety notes: small, quiet, always there. */
.legal-note { position: relative; padding-left: 22px; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.legal-note::before { left: 0; top: 1px; width: 14px; height: 14px; }
/* The scope banner on forms (pinned: class="hint scope-banner", the form's first child). */
.hint.scope-banner {
  justify-self: start;
  margin: 0;
  padding: var(--s-1) 10px;
  border-radius: var(--r-sm);
  background: var(--info-bg);
  color: var(--info-text);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
}
/* "More about this": a quiet fold for any explanation longer than a line. */
details.more > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--link);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: var(--fw-medium);
  list-style: none;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
details.more[open] > summary::after { transform: rotate(180deg); }
details.more > :not(summary) { max-width: var(--measure); margin: var(--s-2) 0 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }

/* ---------- Status pills, tags and counts (11.8) ---------- */
/* The words carry the meaning; the dot is a second cue, in the tone's dot colour. A bare pill is neutral. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  background: var(--neutral-bg);
  color: var(--neutral-text);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  vertical-align: middle;
}
.status-badge::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--neutral-dot); }
.badge-ok, .tone-success { background: var(--success-bg); color: var(--success-text); }
.status-badge:is(.badge-ok, .tone-success)::before { background: var(--success-dot); }
.badge-warning, .tone-warning { background: var(--warning-bg); color: var(--warning-text); }
.status-badge:is(.badge-warning, .tone-warning)::before { background: var(--warning-dot); }
.badge-blocking, .tone-danger { background: var(--danger-bg); color: var(--danger-text); }
.status-badge:is(.badge-blocking, .tone-danger)::before { background: var(--danger-dot); }
.badge-info, .tone-info { background: var(--info-bg); color: var(--info-text); }
.status-badge:is(.badge-info, .tone-info)::before { background: var(--info-dot); }
.tone-violet { background: var(--violet-bg); color: var(--violet-text); }
.status-badge.tone-violet::before { background: var(--violet-dot); }
.tone-neutral { background: var(--neutral-bg); color: var(--neutral-text); }
.status-badge.tone-neutral::before { background: var(--neutral-dot); }
.tone-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--border-control); color: var(--text-2); }
.status-badge.tone-outline::before { background: var(--neutral-dot); }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--neutral-bg);
  color: var(--neutral-text);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  vertical-align: middle;
}
.tag.tone-warning { background: var(--warning-bg); color: var(--warning-text); }
.tag.tone-demo { background: var(--demo-bg); color: var(--demo-text); }
/* 0.21c (COMPANIES_DESIGN.md 10.4; the owner's decision 3): a sandbox organisation and its companies, in a tone of their own. */
.tag.tone-sandbox { background: var(--violet-bg); color: var(--violet-text); }
.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--count-bg);
  color: var(--count-text);
  font-size: var(--fs-12);
  line-height: 1;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* ---------- Empty states (11.17) ---------- */
/* The illustration is a background on a halo disc, chosen by data-art (public/illustrations/, section 14). */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-4);
  text-align: center;
}
.empty-state[data-art]::before {
  content: "";
  width: 120px;
  height: 120px;
  margin-bottom: var(--s-2);
  border-radius: 50%;
  background-color: var(--illus-halo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100px auto;
}
.empty-title { margin: 0; color: var(--text); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-semibold); }
.empty-text { max-width: var(--measure); margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.empty-state > :where(button, .button-link) { margin-top: var(--s-2); }
:where(td) > .empty-state { padding-block: var(--s-6); }

/* ---------- Touch screens (9): 44 px targets and 16 px field text, so phones never zoom on focus ---------- */
@media (pointer: coarse) {
  :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="hidden"]), select, textarea) {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: var(--fs-16);
    line-height: var(--lh-16);
  }
  :where(textarea) { max-height: calc(12 * var(--lh-16) + 20px); }
  label.check { min-height: var(--target); }
  .segmented > :where(button) { min-height: var(--target); }
  .link-button { padding-block: var(--s-2); }
  :where(input[type="file"])::file-selector-button { min-height: var(--target); }
  :where(kbd) { display: none; }
  /* Review of part 1 (RT-3): folds open from a 44 px row. */
  :where(summary) { padding-block: 12px; }
  details.more > summary { min-height: var(--target); padding-block: 0; }
}

/* ---------- Tables that scroll sideways, below 1024 px (11.4; review of part 1, RT-4 and RT-7) ---------- */
/* The first column stays in view while the rest scrolls, and a soft shadow at either edge shows there is more to see. */
@media (max-width: 1023.98px) {
  .scroll {
    background:
      linear-gradient(to right, var(--surface), transparent) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--surface), transparent) right center / 24px 100% no-repeat local,
      linear-gradient(to right, var(--border-strong), transparent) left center / 10px 100% no-repeat scroll,
      linear-gradient(to left, var(--border-strong), transparent) right center / 10px 100% no-repeat scroll;
  }
  :where(.scroll > table:not(.cards-on-phone)) > :where(tbody, tfoot) > tr > :where(td, th):first-child,
  :where(.scroll > table:not(.cards-on-phone)) > thead > tr > th:first-child { position: sticky; left: 0; z-index: 1; background-color: var(--surface); }
  :where(.scroll > table:not(.cards-on-phone)) > thead > tr > th:first-child { z-index: calc(var(--z-sticky) + 1); background-color: var(--surface-sunken); }
  :where(.scroll > table:not(.cards-on-phone)) > tfoot > tr > :where(td, th):first-child,
  :where(.scroll > table:not(.cards-on-phone)) > tbody > tr.total-row > :where(td, th):first-child { background-color: var(--surface-sunken); }
  :where(.scroll > table:not(.cards-on-phone)) > tbody > tr:hover > :where(td, th):first-child { background-color: var(--surface-hover); }
  :where(.scroll > table:not(.cards-on-phone)) > tbody > tr:where([aria-selected="true"], .is-selected) > :where(td, th):first-child { background-color: var(--selected); }
}
@media (max-width: 1023.98px) {
  /* On a tablet or phone a list that is not shown as cards keeps readable columns and scrolls, instead of crushing each one. */
  :where(.scroll) > :where(table:not(.cards-on-phone)) { min-width: max-content; }
}

/* ---------- Tablet and phone (9) ---------- */
@media screen and (max-width: 767.98px) {
  :where(h1) { font-size: var(--fs-20); line-height: var(--lh-20); }
  :where(form) > :where(button, .button-link, input[type="submit"]) { justify-self: stretch; }
  .pair > :is(button, .button-link) { align-self: stretch; }
  .form-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .form-actions > :only-child { grid-column: 1 / -1; }
  /* Dialogs become bottom sheets: the same element, pinned to the bottom, with a grab handle. */
  :where(dialog) {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    padding: var(--s-5) var(--s-4) calc(var(--s-5) + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  :where(dialog)::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    margin: calc(var(--s-2) * -1) auto var(--s-4);
    border-radius: var(--r-full);
    background: var(--border-strong);
  }
  :where(dialog[open]) { animation-name: hy-sheet-in; }
  /* Review of part 1 (RT-5): a sheet's closing button (its last child) stays at the bottom while the sheet scrolls. */
  :where(dialog) > button.secondary:last-child {
    position: sticky;
    bottom: calc((var(--s-5) + env(safe-area-inset-bottom)) * -1);
    z-index: 1;
    width: 100%;
    box-shadow: 0 0 0 var(--s-4) var(--surface-raised), 0 calc(-1 * var(--s-4) - 1px) 0 0 var(--divider);
  }
  :where(dialog) :where(.form-actions) {
    position: sticky;
    bottom: calc((var(--s-5) + env(safe-area-inset-bottom)) * -1);
    margin-inline: calc(var(--s-4) * -1);
    padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
    background: var(--surface-raised);
  }
  .empty-state[data-art]::before { width: 96px; height: 96px; background-size: 80px auto; }
}
/* Phones on their side: dialogs take the full height and scroll inside. */
@media (max-height: 500px) and (orientation: landscape) {
  :where(dialog) { max-height: 100dvh; margin-block: 0; border-radius: 0; }
  /* Review of part 1 (RT-5): the closing button stays in reach while the dialog scrolls. */
  :where(dialog) > button.secondary:last-child { position: sticky; bottom: calc(var(--s-6) * -1); z-index: 1; box-shadow: 0 0 0 var(--s-6) var(--surface-raised), 0 calc(-1 * var(--s-6) - 1px) 0 0 var(--divider); }
  :where(dialog) :where(.form-actions) { position: sticky; bottom: calc(var(--s-6) * -1); padding-block: var(--s-3); background: var(--surface-raised); }
}

/* ---------- Motion (8) ---------- */
@keyframes hy-spin { to { transform: rotate(360deg); } }
@keyframes hy-fade { from { opacity: 0; } }
@keyframes hy-dialog-in { from { opacity: 0; transform: scale(.98); } }
@keyframes hy-sheet-in { from { transform: translateY(100%); } }
@keyframes hy-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  :where(dialog[open]), :where(dialog)::backdrop { animation: hy-fade var(--dur-1) linear; }
  :where(button[aria-busy="true"], .button-link[aria-busy="true"])::after { animation: hy-pulse 1.4s linear infinite; }
  :where(*, *::before, *::after) { transition-duration: 0s !important; }
}

/* ---------- Forced colours (17): outlines come back, and mask icons draw in the system text colour ---------- */
@media (forced-colors: active) {
  .status-badge, .tag, .count-badge, .notice, .warning-note, #message:not(:empty), .form-error:not(:empty) { outline: 1px solid CanvasText; }
  .status-badge::before { forced-color-adjust: none; background: CanvasText; }
  .notice::before, .warning-note::before, #message:not(:empty)::before, .form-error:not(:empty)::before,
  #payment-error:not(:empty)::before, #credit-error:not(:empty)::before, #correction-error:not(:empty)::before,
  .legal-note::before, details.more > summary::after { forced-color-adjust: none; background-color: CanvasText; }
  :where(tr[aria-selected="true"], tr.is-selected) > :where(td, th):first-child { outline: 1px solid CanvasText; }
}

/* shell.css */
/* Hyfecta app frame (DESIGN_SYSTEM.md 10; task L1.4). Linked third on every page: tokens.css, base.css, shell.css, then
   style.css. It holds the top bar built by shell.js (row 1: logo, app button and the All apps cards, organisation,
   company / view / currency, + New, Help, Needs your attention, the user menu; row 2: the app's own menu), the slim page
   title row, the page frame (main, footer), the phone bottom menu and the sheets its menus become on a phone. The bars of
   My workspace, the client portal and the account pages (.topbar without .shell-bar) take the same band and logo.

   Rules of the frame (section 7 and 16): the band carries no transform, filter or contain, so nothing inside it is placed
   against it by accident; icons are CSS masks on pseudo-elements (no markup, no text added); every colour is a token. */

/* ---- Icons (section 13): a mask over currentColor, chosen with --icon ---------------------------------------------- */
.shell-bar .shell-icon::before, .shell-tab-icon, .shell-popup a::before, .shell-help-item::before, .shell-sign-out::before,
.shell-segmented button::before, .shell-field::before, .shell-field::after, .shell-caret, .shell-org-button::before,
.shell-org-label::before, .shell-menu > a.external::after {
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  background-color: currentColor;
}

.shell-app-button[data-app-id]::before, .shell-popup a[data-app-id]::before, .shell-tab[data-app-id] .shell-tab-icon {
  -webkit-mask: none;
  mask: none;
  background: var(--app-c) var(--app-i) center / 62% no-repeat;
}

/* ---- The band ------------------------------------------------------------------------------------------------------ */
.topbar {
  --bar-pad: max(var(--page-pad), env(safe-area-inset-left), calc((100% - var(--page-max)) / 2 + var(--page-pad)));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--s-2);
  min-height: var(--bar-h);
  padding: 0 var(--bar-pad);
  background: var(--shell-bg);
  color: var(--shell-text);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
}
/* The shell's bar is a grid: logo, app button, organisation and the tools on row 1 (the app button and the organisation give
   way, with an ellipsis, before anything wraps), the app's menu on row 2 and the consolidated note under it. */
/* Review of part 1 (V2): the shell's bar spans the whole window, so a wide screen gives its names room rather than empty band. */
.shell-bar {
  --bar-pad: max(var(--page-pad), env(safe-area-inset-left));
  display: grid;
  grid-template-columns: auto minmax(0, max-content) minmax(0, max-content) minmax(max-content, 1fr);
  grid-template-rows: var(--bar-h);
  grid-auto-rows: auto;
  position: sticky;
  top: 0;
  z-index: var(--z-shell);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.shell-bar.is-scrolled { box-shadow: var(--sh-2); }
/* In dark mode the band ends with a hairline, so it stays apart from the dark page. */
:root[data-theme="dark"] .shell-bar { border-bottom: 1px solid var(--shell-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .shell-bar { border-bottom: 1px solid var(--shell-line); } }
.shell-bar > .brand { grid-column: 1; grid-row: 1; }
.shell-bar > .shell-apps { grid-column: 2; grid-row: 1; min-width: 0; }
.shell-bar > .shell-org, .shell-bar > .shell-org-label { grid-column: 3; grid-row: 1; min-width: 0; }
.shell-bar > .shell-org .shell-org-button { max-width: 100%; }
.shell-bar > .shell-tools { grid-column: 4; grid-row: 1; justify-self: end; }
/* Rows 2 and 3 take the full width without sizing the columns of row 1 (width 0, then at least the whole row). */
.shell-bar > .shell-menu, .shell-bar > .shell-context { grid-column: 1 / -1; width: 0; min-width: 100%; }
.shell-bar > .shell-menu { min-width: calc(100% + 12px); grid-row: 2; }
.shell-bar > .shell-context { grid-row: 3; }
.shell-apps .shell-app-button { max-width: 100%; }
.shell-bar :focus-visible, .topbar :focus-visible { outline: 2px solid var(--shell-focus); outline-offset: 2px; }
.topbar .build-tag { margin-left: auto; font-size: var(--fs-12); color: var(--shell-muted); white-space: nowrap; }
/* The version is in Help and the footer, not in the bar (10.1); the element stays for build-info.js. */
.shell-bar .build-tag { display: none; }

/* The logo (10.2): the brand link keeps its text for nothing but layout; the logo file is its background. */
.topbar .brand {
  flex: none;
  display: block;
  width: 124px;
  height: 32px;
  margin: 12px var(--s-2) 12px 0;
  border-radius: var(--r-sm);
  background: url(/images.svg?v=fbc2034a9f49#logo) left center / 124px 32px no-repeat;
  color: transparent;
  font-size: 0;
  line-height: 0;
  text-decoration: none;
  overflow: hidden;
}
.topbar .brand span { display: none; }
.shell-bar .brand { margin-right: var(--s-3); }
.shell-bar .brand + .shell-apps { padding-left: var(--s-3); border-left: 1px solid var(--shell-line); }

/* Buttons in the band: quiet by default (base.css makes buttons primary), white text, a soft fill on hover. */
.shell-bar button {
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--shell-text);
  box-shadow: none;
  font-weight: var(--fw-medium);
}
.shell-bar button:hover { background: var(--shell-hover); color: var(--shell-text); }
.shell-bar button[aria-expanded="true"] { background: var(--shell-pressed); }
.shell-dropdown { position: relative; }
.shell-dropdown[hidden] { display: none; }
.shell-caret {
  --icon: url(/images.svg?v=fbc2034a9f49#i-chevron-down);
  flex: none;
  width: 16px;
  height: 16px;
  font-size: 0;
  color: var(--shell-muted);
}

/* App button (10.3): the app's tile, its name and a chevron. */
.shell-apps .shell-app-button {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-2) 0 var(--s-1);
  border-radius: var(--r-md);
  font: var(--fw-semibold) var(--fs-16) / var(--lh-16) var(--font-display);
  white-space: nowrap;
}
.shell-apps .shell-app-button::before { content: ""; flex: none; width: 28px; height: 28px; border-radius: 7px; }
.shell-apps .shell-app-button > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

/* Organisation chip (10.4): a building, the name and the Demo tag. */
.shell-org-button, .shell-org-label {
  --icon: url(/images.svg?v=fbc2034a9f49#i-building);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  height: 36px;
  min-width: 0;
  max-width: 240px;
  padding: 0 var(--s-2) 0 10px;
  border-radius: var(--r-md);
  background: var(--shell-field);
  box-shadow: inset 0 0 0 1px var(--shell-line);
  color: var(--shell-text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}
.shell-bar .shell-org-button { background: var(--shell-field); }
.shell-org-label { padding-right: 10px; }
.shell-org-button::before, .shell-org-label::before { content: ""; flex: none; width: 16px; height: 16px; color: var(--shell-muted); }
.shell-org-label[hidden] { display: none; }
.shell-org-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-badge {
  flex: none;
  min-height: 0;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--demo-bg);
  color: var(--demo-text);
  font-size: var(--fs-12);
  line-height: 18px;
  font-weight: var(--fw-semibold);
}
.org-badge::before { content: none; }

/* The right-hand tools. */
.shell-tools { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; min-width: 0; }
.shell-bar .shell-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-md); position: relative; }
.shell-bar .shell-icon::before { content: ""; width: 20px; height: 20px; }
.shell-help { --icon: url(/images.svg?v=fbc2034a9f49#i-help); }
.shell-bell { --icon: url(/images.svg?v=fbc2034a9f49#i-bell); }
.shell-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: var(--count-bg);
  color: var(--count-text);
  font-size: var(--fs-12);
  line-height: 18px;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.shell-bell .shell-count { position: absolute; top: 2px; right: 0; box-shadow: 0 0 0 2px var(--shell-bg); }
.shell-count[hidden] { display: none; }

/* Company, Branch, View and Currency as one joined cluster (10.4). The labels stay for screen readers; an icon stands in. */
.shell-scope {
  display: flex;
  align-items: center;
  height: 36px;
  min-width: 0;
  border-radius: var(--r-md);
  background: var(--shell-field);
  box-shadow: inset 0 0 0 1px var(--shell-line);
}
.shell-scope[hidden] { display: none; }
.shell-field {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 0;
  height: 100%;
  padding-left: 10px;
  margin: 0;
  color: var(--shell-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
}
.shell-field[hidden] { display: none; }
.shell-field:not([hidden]) ~ .shell-field:not([hidden]) { border-left: 1px solid var(--shell-line); }
.shell-field > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.shell-field::before { content: ""; flex: none; width: 16px; height: 16px; color: var(--shell-muted); --icon: url(/images.svg?v=fbc2034a9f49#i-building); }
.shell-branch::before { --icon: url(/images.svg?v=fbc2034a9f49#i-branch); }
.shell-view::before { --icon: url(/images.svg?v=fbc2034a9f49#i-layers); }
.shell-currency::before { --icon: url(/images.svg?v=fbc2034a9f49#i-coins); }
.shell-field::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; pointer-events: none; color: var(--shell-muted); --icon: url(/images.svg?v=fbc2034a9f49#i-chevron-down); }
.shell-field select {
  appearance: none;
  min-width: 0;
  width: auto;
  max-width: 240px;
  height: 34px;
  min-height: 0;
  padding: 0 28px 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--shell-text);
  font: inherit;
  text-overflow: ellipsis;
  cursor: pointer;
}
.shell-field select:focus-visible { outline: 2px solid var(--shell-focus); outline-offset: -2px; border-radius: var(--r-sm); }
.shell-field option { color: var(--text); background: var(--surface); }
.shell-view select { max-width: 170px; }
@media (max-width: 1599.98px) { .shell-field:not(.shell-view, .shell-currency, .shell-branch) select { max-width: 200px; } .shell-view select { max-width: 150px; } }
.shell-currency select { max-width: 92px; }

/* The scope button (below 1024 px) stands for the cluster: the company's initials and the currency. */
.shell-bar .shell-scope-button {
  display: none;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--s-2) 0 10px;
  border-radius: var(--r-md);
  background: var(--shell-field);
  box-shadow: inset 0 0 0 1px var(--shell-line);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
}
.shell-scope-initials:empty, .shell-scope-name:empty { display: none; }
.shell-scope-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.shell-scope-currency { color: var(--shell-muted); font-weight: var(--fw-semibold); }
.shell-scope-name + .shell-scope-currency::before { content: "· "; }
.shell-scope-name:empty + .shell-scope-currency::before { content: none; }
.shell-scope-initials {
  display: none;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  border-radius: var(--r-sm);
  background: var(--shell-pressed);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

/* + New (10.5): a mint button; the "+" stays in its text. */
.shell-bar .shell-new {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--shell-accent);
  color: var(--shell-accent-text);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.shell-bar .shell-new:hover, .shell-bar .shell-new[aria-expanded="true"] { background: var(--mint-400); color: var(--shell-accent-text); }

/* The avatar (10.9, 11.22): one of six tones from the email. */
.shell-bar .shell-user {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  margin-left: var(--s-1);
  border-radius: 50%;
  background: var(--avatar-t1-bg);
  color: var(--avatar-t1-text);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}
.shell-bar .shell-user:hover, .shell-bar .shell-user[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--shell-text); }
/* 0.21c task 2.5 (COMPANIES_DESIGN.md 6.4): the person's photo over their initials, in the same circle. */
.shell-bar .shell-user > * { grid-area: 1 / 1; }
.shell-bar .shell-user > .shell-user-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.shell-bar .shell-user.avatar-t1 { background-color: var(--avatar-t1-bg); color: var(--avatar-t1-text); }
.shell-bar .shell-user.avatar-t2 { background-color: var(--avatar-t2-bg); color: var(--avatar-t2-text); }
.shell-bar .shell-user.avatar-t3 { background-color: var(--avatar-t3-bg); color: var(--avatar-t3-text); }
.shell-bar .shell-user.avatar-t4 { background-color: var(--avatar-t4-bg); color: var(--avatar-t4-text); }
.shell-bar .shell-user.avatar-t5 { background-color: var(--avatar-t5-bg); color: var(--avatar-t5-text); }
.shell-bar .shell-user.avatar-t6 { background-color: var(--avatar-t6-bg); color: var(--avatar-t6-text); }

/* ---- Row 2: the app's own menu (10.10) ----------------------------------------------------------------------------- */
.shell-bar .shell-menu {
  display: flex;
  flex-basis: 100%;
  align-items: stretch;
  gap: var(--s-1);
  height: var(--menu-h);
  margin: 0 0 0 -12px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  background: var(--shell-bg-2);
  box-shadow: 0 0 0 100vmax var(--shell-bg-2);
  clip-path: inset(0 -100vmax);
}
.shell-bar .shell-menu::-webkit-scrollbar { display: none; }
/* L3.3: Settings and My account have a left menu on the page (is-left), so their row 2 is never shown. */
.shell-bar .shell-menu[hidden], .shell-bar .shell-menu.is-left { display: none; }
.shell-menu > button, .shell-menu > a {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  flex: none;
  height: 100%;
  min-height: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--shell-muted);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  scroll-snap-align: start;
}
.shell-menu > [hidden] { display: none; }
.shell-bar .shell-menu > button:hover, .shell-menu > a:hover { background: var(--shell-hover); color: var(--shell-text); text-decoration: none; }
.shell-menu > [aria-current="page"] { color: var(--shell-text); font-weight: var(--fw-semibold); }
.shell-menu > [aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--shell-accent);
}
.shell-menu > a.external::after { content: ""; width: 12px; height: 12px; --icon: url(/images.svg?v=fbc2034a9f49#i-external); }
/* A count after a label (10.10), where the page already holds the figure: "Waiting for me 4" on Approvals (L3.2). */
.shell-menu .menu-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--shell-line); color: var(--shell-text); font-size: var(--fs-12); line-height: 1; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.shell-menu > [aria-current="page"] .menu-count { background: var(--shell-accent); color: var(--shell-accent-text); }
.shell-menu > :focus-visible { outline-offset: -3px; }

/* The consolidated view's note, a slim band under row 2. */
.shell-context {
  flex-basis: 100%;
  margin: 0;
  padding: var(--s-2) 0;
  background: var(--info-bg);
  box-shadow: 0 0 0 100vmax var(--info-bg);
  clip-path: inset(0 -100vmax);
  color: var(--info-text);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
}
.shell-context[hidden] { display: none; }

/* The bars of My workspace, the client portal and the account pages: the same band, their links as a quiet row. */
.topbar:not(.shell-bar) nav { display: flex; align-items: center; gap: var(--s-1); margin: 0; overflow-x: auto; scrollbar-width: none; }
.topbar:not(.shell-bar) nav a, .topbar:not(.shell-bar) nav strong {
  display: flex;
  align-items: center;
  height: var(--bar-h);
  padding: 0 12px;
  position: relative;
  color: var(--shell-muted);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
}
.topbar:not(.shell-bar) nav a:hover { color: var(--shell-text); background: var(--shell-hover); }
.topbar:not(.shell-bar) nav strong { color: var(--shell-text); font-weight: var(--fw-semibold); }
.topbar:not(.shell-bar) nav strong::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--shell-accent); }
.topbar:not(.shell-bar) nav [hidden] { display: none; }

/* ---- Menus (popovers; sheets on a phone) --------------------------------------------------------------------------- */
.shell-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-popover);
  min-width: 260px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 80px);
  overflow-y: auto;
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--sh-2);
  color: var(--text);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  text-align: left;
  animation: shell-pop-in var(--dur-2) var(--ease-out);
}
.shell-popup[hidden] { display: none; }
.shell-popup-left { left: 0; right: auto; }
.shell-popup :focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.shell-popup ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.shell-popup a, .shell-bar .shell-popup button, .shell-tabbar .shell-popup button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: var(--s-2) 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-14);
  text-align: left;
  text-decoration: none;
}
.shell-popup a:hover, .shell-bar .shell-popup button:hover, .shell-tabbar .shell-popup button:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.shell-popup a[aria-current="page"], .shell-popup button[aria-current="page"], .shell-bar .shell-popup button[aria-current="true"] { background: var(--selected); color: var(--action-soft-text); }
.shell-popup small { display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-regular); }
.shell-popup-title { margin: var(--s-1) 10px var(--s-2); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.shell-popup-empty { margin: var(--s-2) 10px var(--s-3); color: var(--text-2); font-size: var(--fs-13); }
.shell-menu-label, .shell-menu-group { margin: var(--s-2) 10px var(--s-1); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-semibold); }
@keyframes shell-pop-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes shell-sheet-in { from { transform: translateY(100%); } }

/* All apps (10.3): a grid of app cards; the current app is marked. */
.shell-apps .shell-popup { width: 440px; padding: var(--s-3); }
.shell-popup .shell-app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
.shell-popup .shell-app-grid a {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 2px;
  height: 100%;
  padding: 10px;
  border-radius: 10px;
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: var(--fw-semibold);
}
.shell-popup .shell-app-grid a::before { content: ""; width: 40px; height: 40px; margin-bottom: 6px; border-radius: 10px; }
.shell-popup .shell-app-grid small { margin-top: 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.shell-popup .shell-app-grid a[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--action); }

/* Organisations. */
.shell-org .shell-popup { width: 320px; }
.shell-popup .shell-org-item { flex-wrap: wrap; gap: 2px var(--s-2); }
.shell-popup .shell-org-item small { flex-basis: 100%; }
/* 0.21c (COMPANIES_DESIGN.md 10.4): a sandbox's tag beside its name (in the menu and on the button), and "New organisation"
   after the organisations, on a divider, with a plus before it. */
.shell-org-button .org-sandbox, .shell-org-label .org-sandbox { flex: none; min-height: 0; padding: 0 6px; line-height: 18px; font-weight: var(--fw-semibold); }
.shell-bar .shell-popup .shell-org-new {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
  margin-top: var(--s-2);
  box-shadow: 0 calc(-1 * var(--s-1)) 0 calc(-1 * var(--s-1) + 1px) var(--divider);
}
.shell-bar .shell-popup .shell-org-new::before {
  content: "";
  grid-row: 1 / span 2;
  align-self: center;
  width: 18px;
  height: 18px;
  background-color: var(--text-2);
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat;
}
.shell-bar .shell-popup .shell-org-new small { grid-column: 2; }
/* The practice banner inside a sandbox (10.4): a thin band under the bar on every page, never dismissed. */
.sandbox-banner {
  display: block;
  margin: 0;
  padding: 6px max(var(--page-pad), env(safe-area-inset-left));
  border-bottom: 1px solid var(--border);
  background: var(--violet-bg);
  color: var(--violet-text);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  text-align: center;
  text-wrap: balance;
}
.sandbox-banner[hidden] { display: none; }
.sandbox-banner::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: var(--s-2); vertical-align: -3px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-sandbox) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-sandbox) center / contain no-repeat; }
.sandbox-banner > strong { font-weight: var(--fw-semibold); }
/* "New organisation": one choice (Sandbox) as a selected option card, the name, what happens next, the server's refusal. */
.shell-new-org-form { display: grid; gap: var(--s-4); }
.shell-new-org-intro, .shell-new-org-after { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.shell-new-org-kinds { min-width: 0; margin: 0; padding: 0; border: 0; }
.shell-new-org-kind { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--action); border-radius: var(--r-lg); background: var(--selected); cursor: pointer; }
.shell-new-org-kind > input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--action); }
.shell-new-org-kind-words { display: grid; gap: 2px; }
.shell-new-org-kind-words > strong { color: var(--text); font-weight: var(--fw-semibold); }
.shell-new-org-kind-words > small { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.shell-new-org-name > input { max-width: 360px; }
.shell-new-org-form > .form-error:empty { display: none; }

/* + New (10.5): groups in two columns, an icon before each item and its key after. */
.shell-new-box .shell-popup { width: 520px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-3); padding: var(--s-2) var(--s-3) var(--s-3); }
.shell-new-box .shell-popup[hidden] { display: none; }
.shell-new-box .shell-popup.shell-new-one { width: 300px; grid-template-columns: 1fr; }
/* Review of part 1 (V8): the full-width third group is set apart by a rule, so New journal never reads as a purchase. */
.shell-new-group:nth-child(3) { grid-column: 1 / -1; margin-top: var(--s-2); padding-top: var(--s-1); border-top: 1px solid var(--divider); }
.shell-new-group:nth-child(3) ul { grid-template-columns: 1fr 1fr; column-gap: var(--s-3); }
.shell-new-one .shell-new-group ul { grid-template-columns: 1fr; }
.shell-popup a[data-new]::before { content: ""; flex: none; width: 18px; height: 18px; color: var(--text-2); }
.shell-popup a[data-new]::after {
  content: attr(data-key);
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-sunken);
  color: var(--text-3);
  font-size: var(--fs-12);
  line-height: 18px;
  font-weight: var(--fw-medium);
  text-align: center;
}
a[data-new="new-invoice"] { --icon: url(/images.svg?v=fbc2034a9f49#i-invoice); }
a[data-new="record-payment"] { --icon: url(/images.svg?v=fbc2034a9f49#i-payment); }
a[data-new="new-customer"] { --icon: url(/images.svg?v=fbc2034a9f49#i-customer); }
a[data-new="new-bill"] { --icon: url(/images.svg?v=fbc2034a9f49#i-bill); }
a[data-new="new-expense"] { --icon: url(/images.svg?v=fbc2034a9f49#i-expense); }
a[data-new="new-supplier"] { --icon: url(/images.svg?v=fbc2034a9f49#i-supplier); }
a[data-new="new-job"] { --icon: url(/images.svg?v=fbc2034a9f49#i-job); }
a[data-new="new-journal"] { --icon: url(/images.svg?v=fbc2034a9f49#i-journal); }

/* Needs your attention (10.8). */
.shell-attention .shell-popup { width: 360px; }
/* Review of part 1 (V12): each row starts with its tone icon, as on Home (data-tone and data-icon come from ATTENTION_LOOK). */
.shell-attention-list a, .shell-attention-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 0 var(--s-3); }
.shell-attention-list .shell-attention-label { grid-column: 2; }
.shell-attention-list small { grid-column: 2; }
.shell-attention-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; position: relative; width: 28px; height: 28px; border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); }
.shell-attention-icon::before { content: ""; position: absolute; inset: 7px; background-color: currentColor; -webkit-mask: var(--icon, url(/images.svg?v=fbc2034a9f49#i-bell)) center / contain no-repeat; mask: var(--icon, url(/images.svg?v=fbc2034a9f49#i-bell)) center / contain no-repeat; }
[data-tone="warning"] > .shell-attention-icon { background: var(--warning-bg); color: var(--warning-text); }
[data-tone="danger"] > .shell-attention-icon { background: var(--danger-bg); color: var(--danger-text); }
[data-tone="success"] > .shell-attention-icon { background: var(--success-bg); color: var(--success-text); }
.shell-attention-icon[data-icon="clock"] { --icon: url(/images.svg?v=fbc2034a9f49#i-clock); }
.shell-attention-icon[data-icon="calendar"] { --icon: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.shell-attention-icon[data-icon="customer"] { --icon: url(/images.svg?v=fbc2034a9f49#i-customer); }
.shell-attention-icon[data-icon="invoice"] { --icon: url(/images.svg?v=fbc2034a9f49#i-invoice); }
.shell-attention-icon[data-icon="coins"] { --icon: url(/images.svg?v=fbc2034a9f49#i-coins); }
.shell-attention-icon[data-icon="layers"] { --icon: url(/images.svg?v=fbc2034a9f49#i-layers); }
.shell-attention-icon[data-icon="flag"] { --icon: url(/images.svg?v=fbc2034a9f49#i-flag); }
.shell-attention-icon[data-icon="building"] { --icon: url(/images.svg?v=fbc2034a9f49#i-building); }
.shell-attention-icon[data-icon="shield-check"] { --icon: url(/images.svg?v=fbc2034a9f49#i-shield-check); }
.shell-attention-icon[data-icon="bank"] { --icon: url(/images.svg?v=fbc2034a9f49#i-bank); }
.shell-attention-icon[data-icon="mail"] { --icon: url(/images.svg?v=fbc2034a9f49#i-mail); }
.shell-attention-icon[data-icon="check-circle"] { --icon: url(/images.svg?v=fbc2034a9f49#i-check-circle); }
.shell-attention-icon[data-icon="users"] { --icon: url(/images.svg?v=fbc2034a9f49#i-users); }
.shell-attention-count {
  grid-column: 3;
  grid-row: 1 / span 2;
  min-width: 24px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: var(--fs-12);
  line-height: 20px;
  font-weight: var(--fw-semibold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.shell-attention-row { padding: var(--s-2) 10px; }
.shell-popup .shell-attention-list a::before { content: none; }

/* The user menu (10.9; the owner's second review: personal only). */
.shell-user-box .shell-popup { width: 300px; }
.shell-user-head { padding: var(--s-2) 10px var(--s-3); margin-bottom: var(--s-1); border-bottom: 1px solid var(--divider); }
.shell-popup .shell-user-email { margin: 0; color: var(--text); font-size: var(--fs-14); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
/* 0.21c task 2.5: the person's name, once given, above the sign-in email, which then reads as the line under it. */
.shell-popup .shell-user-name { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.shell-popup .shell-user-name + .shell-user-email { margin-top: 2px; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-regular); }
.shell-user-org { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.shell-popup a.shell-my-account::before, .shell-popup .shell-help-item::before, .shell-popup .shell-sign-out::before { content: ""; flex: none; width: 18px; height: 18px; color: var(--text-2); }
.shell-popup a.shell-my-account { --icon: url(/images.svg?v=fbc2034a9f49#i-user); }
.shell-help-item { --icon: url(/images.svg?v=fbc2034a9f49#i-help); }
.shell-sign-out { --icon: url(/images.svg?v=fbc2034a9f49#i-logout); }
.shell-bar .shell-popup .shell-sign-out { margin-top: var(--s-1); border-top: 1px solid var(--divider); border-radius: 0 0 var(--r-md) var(--r-md); }
.shell-theme { padding: var(--s-1) 0 var(--s-2); }
.shell-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0 10px;
  padding: 2px;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  box-shadow: inset 0 0 0 1px var(--border);
}
.shell-bar .shell-segmented button {
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 6px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: var(--fs-13);
}
.shell-segmented button::before { content: ""; flex: none; width: 15px; height: 15px; }
.shell-theme-light { --icon: url(/images.svg?v=fbc2034a9f49#i-sun); }
.shell-theme-dark { --icon: url(/images.svg?v=fbc2034a9f49#i-moon); }
.shell-theme-system { --icon: url(/images.svg?v=fbc2034a9f49#i-monitor); }
/* Review of part 1 (A11Y-4): the chosen theme is marked by a 2 px ring in the action colour (over 3:1 on the track, 1.4.11). */
.shell-bar .shell-segmented button[aria-checked="true"] { background: var(--action-soft-bg); color: var(--action-soft-text); box-shadow: inset 0 0 0 2px var(--action); font-weight: var(--fw-semibold); }

/* Help (10.7). */
.shell-help-dialog { --dialog-w: 460px; }
.shell-keys { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
/* Review of part 1 (V9): the same small sans-serif key caps as + New, at the top of their row. */
.shell-keys dt { display: flex; flex-wrap: wrap; align-items: center; align-self: start; gap: 4px; color: var(--text-3); }
.shell-keys kbd {
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-sunken);
  color: var(--text-2);
  font: var(--fw-medium) var(--fs-12) / 18px var(--font);
  text-align: center;
}
.shell-keys dd { align-self: start; padding-top: 1px; }
.shell-shortcuts-switch { margin-top: var(--s-3); }
.shell-keys dd { margin: 0; color: var(--text-2); }
.shell-help-version { color: var(--text-2); }
.shell-help-dialog > button { margin-top: var(--s-4); }

/* ---- The page frame and the title row (10.11) ---------------------------------------------------------------------- */
main {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--s-6) max(var(--page-pad), env(safe-area-inset-right)) var(--s-12) max(var(--page-pad), env(safe-area-inset-left));
}
main > header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  margin: 0 0 var(--s-6);
}
main > header > div { min-width: 0; }
main > header .eyebrow {
  margin: 0 0 2px;
  color: var(--text-3);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
}
main > header h1 { margin: 0; font: var(--fw-semibold) var(--fs-24) / var(--lh-24) var(--font-display); letter-spacing: var(--tracking-figure); }
/* Review of part 1 (V10): the intro gets a wider measure in the title row and never leaves one word alone on a line. */
main > header .muted { margin: var(--s-1) 0 0; max-width: 120ch; text-wrap: pretty; }
/* Review of part 1 (V3): a card heading that only repeats the page title (shell.js titleRow) is for screen readers only. */
main h2.title-echo {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The subtitle that only repeats the company the bar shows, and the environment pill (shown in Help), are not repeated. */
main > header #page-company {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
main > header .pill { display: none; }
main > footer { margin: var(--s-10) 0 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
html { scroll-padding-top: calc(var(--bar-h) + var(--menu-h) + var(--s-4)); }
/* Payroll and Group: their sections are in the top menu, so their own buttons are not shown twice. */
nav.accounting-nav[data-mirrored] { display: none; }

/* ---- The phone bottom menu (10.12) and the dimmed backdrop --------------------------------------------------------- */
.shell-tabbar, .shell-scrim { display: none; }

/* ---- Laptop, 1024 to 1439 px --------------------------------------------------------------------------------------- */
/* The company, view and currency cluster becomes the scope button and its panel (a deviation from 9: at 1024 px the
   cluster, the app and the organisation did not fit on one row). Review of part 1 (V2): from 1440 px down, not 1280, so
   the app's name and the organisation are shown in full on a 1280 or 1366 laptop. */
@media (max-width: 1279.98px) {
  .shell-bar .shell-help { display: none; }
  .shell-apps .shell-app-button > span:first-child { max-width: 200px; }
  .shell-org-button, .shell-org-label { max-width: 220px; }
  /* Review of part 1 (V2): a shorter company name in the scope button leaves the app and the organisation more room. */
  .shell-scope-name { max-width: 110px; }
}
@media (max-width: 1439.98px) {
  .shell-bar .shell-scope-button:not([hidden]) { display: flex; }
  .shell-scope {
    display: none;
    position: absolute;
    top: calc(var(--bar-h) - 4px);
    right: var(--bar-pad);
    z-index: var(--z-popover);
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    width: 320px;
    height: auto;
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface-raised);
    box-shadow: var(--sh-2);
    color: var(--text);
  }
  .shell-bar.scope-open .shell-scope:not([hidden]) { display: flex; animation: shell-pop-in var(--dur-2) var(--ease-out); }
  .shell-field { display: grid; gap: 6px; height: auto; padding: 0; color: var(--text); }
  .shell-field:not([hidden]) ~ .shell-field:not([hidden]) { border-left: 0; }
  .shell-field > span { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--text-2); }
  .shell-field::before { display: none; }
  .shell-field::after { top: auto; bottom: 11px; right: 12px; margin: 0; color: var(--text-3); }
  .shell-field select, .shell-view select, .shell-currency select {
    width: 100%;
    max-width: none;
    height: var(--control-h);
    padding: 0 32px 0 12px;
    border: 1px solid var(--border-control);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
  }
  .shell-field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
}

/* ---- Tablet, 768 to 1023 px ---------------------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .shell-bar .brand { width: 32px; background-image: url(/images.svg?v=fbc2034a9f49#logo-mark); background-size: 32px 32px; }
  .shell-org-button, .shell-org-label { max-width: 170px; }
  .shell-apps .shell-app-button > span:first-child { max-width: 170px; }
  /* The scope button: the company's initials and the currency (9). */
  .shell-scope-name { display: none; }
  .shell-scope-name + .shell-scope-currency::before { content: none; }
  .shell-scope-initials:not(:empty) { display: grid; }
  .shell-bar .shell-new { width: 40px; padding: 0; font-size: 0; position: relative; }
  .shell-bar .shell-new::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat;
    mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat;
  }
}

/* Review of part 1 (RT-7): below 1024 px the end of row 2 fades, a sign that the menu scrolls sideways to more items. */
@media (max-width: 1023.98px) {
  .shell-bar.has-menu::after {
    content: "";
    grid-column: -2 / -1;
    grid-row: 2;
    justify-self: end;
    z-index: 1;
    width: 32px;
    height: var(--menu-h);
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--shell-bg-2));
  }
}

/* ---- Phone, under 768 px ------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  .topbar { gap: 0 6px; min-height: 52px; }
  .topbar .brand { width: 32px; margin: 10px 4px 10px 0; background-image: url(/images.svg?v=fbc2034a9f49#logo-mark); background-size: 32px 32px; }
  .shell-bar .brand + .shell-apps { padding-left: 0; border-left: 0; }
  /* The app button and + New live in the bottom menu; their menus stay here, shown as sheets. */
  .shell-apps .shell-app-button, .shell-bar .shell-new { display: none; }
  .shell-org-button, .shell-org-label { max-width: 150px; height: 34px; }
  .shell-tools { gap: 2px; }
  .shell-bar { grid-template-rows: 52px; column-gap: 6px; }
  .shell-scope-currency { display: none; }
  /* Review of part 1: on Home the button stands for the currency alone, so it shows it. */
  .shell-scope-initials:empty ~ .shell-scope-currency { display: inline; }
  .shell-org-button::before, .shell-org-label::before { display: none; }
  .shell-org-button, .shell-org-label { padding-left: var(--s-2); }
  .shell-scope-initials:not(:empty) { display: grid; }
  .shell-bar .shell-scope-button { padding: 0 6px 0 8px; gap: 4px; }
  .shell-bar .shell-icon { width: 40px; height: 40px; }
  .shell-bar .shell-menu { height: 44px; margin-left: -12px; }
  .shell-menu > button, .shell-menu > a { padding: 0 12px; }
  main { padding-top: var(--s-5); }
  main > header { margin-bottom: var(--s-5); }
  main > header h1 { font-size: var(--fs-20); line-height: var(--lh-20); }
  html.shell-has-tabbar main { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-6)); }
  html { scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-4)); }

  /* Every menu of the frame is a sheet from the bottom, over a dimmed page. */
  .shell-popup, .shell-apps .shell-popup, .shell-new-box .shell-popup, .shell-new-box .shell-popup.shell-new-one, .shell-user-box .shell-popup,
  .shell-attention .shell-popup, .shell-org .shell-popup, .shell-scope {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: 85dvh;
    padding: var(--s-5) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));
    border: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--sh-3);
    overflow-y: auto;
    animation: shell-sheet-in var(--dur-3) var(--ease-out);
  }
  .shell-popup::before, .shell-scope::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
  .shell-new-box .shell-popup { grid-template-columns: 1fr; }
  .shell-new-group:nth-child(3) ul { grid-template-columns: 1fr; }
  .shell-popup .shell-app-grid a { padding: var(--s-2) 6px; justify-items: center; text-align: center; }
  .shell-popup .shell-app-grid a::before { width: 44px; height: 44px; border-radius: 12px; }
  .shell-popup a, .shell-bar .shell-popup button, .shell-tabbar .shell-popup button { min-height: var(--target); }
  html.shell-popup-open .shell-scrim, html.shell-scope-open .shell-scrim { display: block; }
  .shell-scrim { position: fixed; inset: 0; z-index: calc(var(--z-shell) - 2); background: var(--overlay); animation: shell-fade var(--dur-2) var(--ease-out); }

  .shell-tabbar:not([hidden]) {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-shell) - 1);
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 0 max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    background: var(--surface-raised);
    border-top: 1px solid var(--border);
    box-shadow: var(--sh-2);
  }
  html.shell-typing .shell-tabbar { display: none; }
  .shell-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    position: relative;
    height: var(--tabbar-h);
    min-height: 0;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-2);
    font-size: var(--fs-12);
    line-height: var(--lh-12);
    font-weight: var(--fw-medium);
    text-decoration: none;
  }
  .shell-tab[hidden] { display: none; }
  .shell-tab:hover { background: transparent; color: var(--text); text-decoration: none; }
  .shell-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: var(--r-md); }
  .shell-tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shell-tab-icon { display: block; width: 24px; height: 24px; }
  .shell-tab[data-app-id] .shell-tab-icon { border-radius: 7px; background-size: 64%; }
  .shell-tab-home .shell-tab-icon { --icon: url(/images.svg?v=fbc2034a9f49#i-home); }
  .shell-tab-approvals .shell-tab-icon { --icon: url(/images.svg?v=fbc2034a9f49#i-shield-check); }
  .shell-tab-apps .shell-tab-icon { --icon: url(/images.svg?v=fbc2034a9f49#i-grid); }
  .shell-tab-new .shell-tab-icon { --icon: url(/images.svg?v=fbc2034a9f49#i-plus); }
  .shell-tab[aria-current="page"], .shell-tab.is-current { color: var(--action-soft-text); font-weight: var(--fw-semibold); }
  .shell-tab[aria-current="page"]:not([data-app-id]) .shell-tab-icon { background-color: var(--action-soft-text); border-radius: 8px; }
  .shell-tab[aria-current="page"]:not([data-app-id])::before, .shell-tab.is-current::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 48px;
    height: 30px;
    margin-left: -24px;
    border-radius: var(--r-full);
    background: var(--action-soft-bg);
    z-index: -1;
  }
  /* The raised circle takes no more room than the other icons, so New lines up with the labels (RT-9). */
  .shell-tab-new .shell-tab-icon {
    position: relative;
    width: 32px;
    height: 32px;
    margin-block: -8px 0;
    border-radius: 50%;
    background-color: var(--action);
    -webkit-mask: none;
    mask: none;
  }
  .shell-tab-new .shell-tab-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 18px;
    height: 18px;
    background-color: var(--action-text);
    -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat;
    mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat;
  }
  .shell-tab-new .shell-tab-label { margin-top: 0; }
  .shell-tab .shell-count { position: absolute; top: 4px; left: calc(50% + 6px); box-shadow: 0 0 0 2px var(--surface-raised); }
  .shell-tabbar { isolation: isolate; }
}
@keyframes shell-fade { from { opacity: 0; } }

/* ---- Small phones, under 400 px: the Demo tag becomes a dot, so the organisation's name gets the room (RT-8) ------------- */
@media screen and (max-width: 399.98px) {
  .shell-org-button .org-badge, .shell-org-label .org-badge { width: 8px; min-width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--demo-bg); font-size: 0; line-height: 0; overflow: hidden; }
  .shell-org-button .org-sandbox, .shell-org-label .org-sandbox { width: 8px; min-width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--violet-dot); font-size: 0; line-height: 0; overflow: hidden; }
  .shell-org-button, .shell-org-label { gap: 6px; }
}

/* ---- Narrow phone, under 360 px ------------------------------------------------------------------------------------ */
@media screen and (max-width: 359.98px) {
  .shell-org-button, .shell-org-label { max-width: 108px; }
  .shell-org-label .org-badge, .shell-org-button .org-badge, .shell-org-label .org-sandbox, .shell-org-button .org-sandbox { display: none; }
}

/* ---- Phones and tablets on their side: the bar scrolls away, so the page gets its height back ---------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .shell-bar { position: relative; }
}
/* Review of part 1 (RT-6): a phone on its side has a 48 px bottom menu, each icon beside its label. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 767.98px) {
  .shell-tab { flex-direction: row; gap: var(--s-2); }
  .shell-tab-icon { width: 20px; height: 20px; }
  .shell-tab-new .shell-tab-icon { width: 32px; height: 32px; margin-block: 0; }
  .shell-tab-new .shell-tab-icon::after { width: 18px; height: 18px; }
  .shell-tab[aria-current="page"]:not([data-app-id])::before, .shell-tab.is-current::before { top: 9px; height: 30px; width: 96px; margin-left: -48px; }
  .shell-tab .shell-count { top: 2px; left: auto; right: 8px; }
}

/* ---- Touch screens: 44 px targets ---------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .shell-popup a[data-new]::after { display: none; }
  .shell-bar .shell-icon, .shell-bar .shell-user { min-width: 44px; min-height: 44px; }
  /* Review of part 1 (RT-3): every control of the bar is 44 px tall on a touch screen; the logo keeps its 32 px mark centred. */
  .shell-bar .brand { min-width: 44px; height: 44px; margin-block: 4px; background-position: center; }
  .shell-apps .shell-app-button, .shell-org-button, .shell-org-label, .shell-bar .shell-scope-button, .shell-bar .shell-new { height: 44px; min-height: 44px; }
  .shell-bar .shell-new { min-width: 44px; }
  /* A tablet's menus are dropdowns, not sheets: their rows and the theme switch are 44 px too (L3.7). */
  .shell-popup a, .shell-bar .shell-popup button, .shell-tabbar .shell-popup button, .shell-bar .shell-segmented button { min-height: var(--target); }
  .shell-bar .shell-user { width: 44px; height: 44px; background-clip: content-box; padding: 6px; }
  /* Review of part 1: the hover fill of the bar's buttons would reset the clip and paint the whole 44 px target. */
  .shell-bar .shell-user:hover, .shell-bar .shell-user[aria-expanded="true"] { background-clip: content-box; box-shadow: none; outline: 2px solid var(--shell-text); outline-offset: -4px; }
}

/* ---- Reduced motion and forced colours ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .shell-popup, .shell-scope, .shell-scrim, .shell-bar { animation-duration: 1ms !important; transition: none; }
}
@media (forced-colors: active) {
  .shell-bar .shell-icon::before, .shell-tab-icon, .shell-popup a::before, .shell-caret, .shell-field::before, .shell-field::after { background-color: CanvasText; }
  .shell-menu > [aria-current="page"]::before { background: Highlight; }
  .shell-popup { border: 1px solid CanvasText; }
}

@media print {
  .shell-tabbar, .shell-scrim, .shell-help-dialog { display: none !important; }
}

/* components.css */
/* Hyfecta shared components (DESIGN_SYSTEM.md 11 and 15; task L1.5): cards and their headers, the home page and dashboard
   layout, the app tiles, the figure strip and stat tiles, chart cards and the chart marks, the cash, balance sheet and
   staff cards, the attention list, the money summary (cards on a phone), the rate and honest notes, and Getting started.
   Linked fourth on every page: tokens.css, base.css, shell.css, components.css, then style.css. Colours, sizes and weights
   come only from tokens.css. Every rule keeps to the classes and ids the pages and scripts already use, plus new classes
   beside them. */

/* ---- Cards and their headers (11.12) ------------------------------------------------------------------------------- */
.card {
  margin-bottom: var(--s-5);
  padding: var(--card-pad);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-4); }
.section-title > div { min-width: 0; }
.section-title h2, .section-title h3 { margin: 0; }
.section-title .muted, .section-title > div > .muted { display: block; margin: 2px 0 0; }
.section-title > .muted { margin: 2px 0 0; white-space: nowrap; }
.section-title > :is(.button-link, button, .status-badge) { flex: none; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin: 0 0 var(--s-4); }
.card-head h2, .card-head h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-semibold); }
.card-sub { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.columns > * { min-width: 0; }

/* ---- The home page and the dashboards: a 12-column grid (11.12) ---------------------------------------------------- */
/* The snapshot and the launcher's money and attention cards are wrappers the scripts show and hide as one; on screen
   their cards take part in one grid, so the balance sheet can sit beside the money summary. DOM order is reading order. */
.home-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--card-gap); align-items: stretch; margin: 0 0 var(--card-gap); }
.home-grid > .home-snapshot, .home-grid > .launcher-columns { display: contents; }
.home-grid > *, .home-snapshot > *, .home-grid > .launcher-columns > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
.home-grid .home-wide { grid-column: span 8; }
.home-grid .home-side { grid-column: span 4; }
/* Without the owners' snapshot, the money summary and the attention list share the row. */
.home-grid:has(> #owner-overview[hidden]) .home-wide { grid-column: span 6; }
.home-section-head { align-items: flex-end; margin: var(--s-2) 0 calc(var(--s-1) - var(--card-gap) + var(--s-3)); }
.home-section-head h2 { font-size: var(--fs-16); line-height: var(--lh-16); }

/* The title row of Home: the greeting, the date and organisation, and on the right the company the apps open in and the
   currency of the money (DESIGN_SYSTEM.md 18, 2.2; the owner's second review, point a). The breadcrumb only repeats the
   bar's "Home", so it is kept for screen readers alone. */
body[data-app="launcher"] main > header { align-items: flex-end; }
body[data-app="launcher"] main > header .eyebrow {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
body[data-app="launcher"] main > header .muted { color: var(--text-2); }
/* Review of part 1 (V4): the company the app tiles open in is chosen beside "Your apps", with a plain label; the currency
   of the money is in the bar, as on every app. */
.toolbar.launcher-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-3); margin: 0; }
.toolbar.launcher-toolbar label { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); white-space: nowrap; }
.launcher-toolbar select { width: auto; max-width: 320px; height: 36px; min-height: 36px; padding-block: 0; }
@media (pointer: coarse) { .launcher-toolbar select { height: 44px; min-height: 44px; } }
.home-apps .section-title > div > .muted { display: block; margin-top: 2px; }
.home > .card.narrow { margin-inline: 0; }

/* ---- App tiles (Home; the owner's order puts them first) ------------------------------------------------------------ */
.home-apps { margin: 0 0 var(--s-6); }
.home-apps .section-title { align-items: baseline; margin-bottom: var(--s-3); }
.home-apps h2 { font-size: var(--fs-16); line-height: var(--lh-16); }
.app-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.app-tile {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: var(--s-3);
  min-height: 68px;
  padding: var(--s-3) var(--s-8) var(--s-3) var(--s-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.app-tile[data-app-id]::before {
  content: "";
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--app-c) var(--app-i) center / 60% no-repeat;
}
/* Each app opens in its own tab: a small external mark, top right. */
.app-tile::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  background-color: var(--text-3);
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-external) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-external) center / contain no-repeat;
}
.app-tile strong { align-self: end; overflow: hidden; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.app-tile .app-tile-text { align-self: start; overflow: hidden; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); text-overflow: ellipsis; white-space: nowrap; }
.app-tile:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); color: var(--text); text-decoration: none; }
.app-tile:active { transform: translateY(1px); }
.app-tile-count { position: absolute; top: 8px; right: 30px; }
.app-tiles > p { grid-column: 1 / -1; margin: 0; }

/* ---- The figure strip and stat tiles (11.9) ------------------------------------------------------------------------- */
.figure-card { padding: 0; overflow: hidden; }
/* One card, six figures divided by 1 px lines: the gap shows the divider colour behind the tiles. */
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--divider); }
.kpi-grid > p { grid-column: 1 / -1; margin: 0; padding: var(--card-pad); background: var(--surface); }
/* Review of part 1 (V5): one honest line when nothing is posted this month (or this year), in place of a caption per figure. */
.kpi-grid > p.kpi-note { padding: 10px var(--card-pad); color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.kpi {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-1);
  min-width: 0;
  margin: 0;
  padding: var(--s-5) var(--s-6);
  background: var(--surface);
}
.kpi .kpi-label { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.kpi .kpi-value {
  overflow-wrap: anywhere;
  color: var(--text);
  font: var(--fw-semibold) var(--fs-24) / var(--lh-24) var(--font-display);
  letter-spacing: var(--tracking-figure);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.kpi .kpi-sub { display: grid; gap: 2px; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.kpi.is-negative .kpi-value { color: var(--danger-text); }
/* How one figure leads to the next (desktop, six across): Revenue − … − Tax = Net profit. */
@media (min-width: 1280px) {
  .kpi + .kpi::before {
    content: "−" / "";
    position: absolute;
    top: 21px;
    left: -11px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-3);
    font-size: var(--fs-12);
    line-height: 1;
    font-weight: var(--fw-semibold);
  }
  .kpi[data-kpi="netProfit"]::before { content: "=" / ""; }
}
.figure-foot { display: grid; gap: var(--s-2); padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--divider); }
.figure-foot:empty { display: none; }
.figure-foot > * { margin: 0; }
.figure-foot details.more > summary { font-size: var(--fs-12); }

/* Stat tiles: the dashboard's counts and the totals strips of other pages share one look. */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.metrics > article { display: grid; align-content: start; gap: var(--s-1); min-width: 0; margin: 0; padding: var(--s-4) var(--s-5); }
.metrics p { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.metrics strong { overflow-wrap: anywhere; font: var(--fw-semibold) var(--fs-24) / var(--lh-24) var(--font-display); letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums; }
.metrics article > span { display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.home-grid > .stat-row { margin: 0; }

/* ---- Chart cards and the chart marks (11.10; charts.js sets only classes and SVG attributes) ----------------------- */
.chart-card { display: flex; flex-direction: column; }
.chart-box { min-width: 0; min-height: 120px; }
.chart { margin: 0; }
.chart-svg { display: block; width: 100%; max-width: 100%; height: auto; overflow: visible; }
.chart-gridline { stroke: var(--chart-grid); stroke-width: 1; }
.chart-zero { stroke: var(--chart-zero); stroke-width: 1; }
.chart-tick { fill: var(--text-3); font-size: var(--fs-12); font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart-empty { fill: var(--text-3); font-size: var(--fs-13); font-family: var(--font); }
.chart-s0 { fill: var(--chart-1); stroke: var(--chart-1); }
.chart-s1 { fill: var(--chart-2); stroke: var(--chart-2); }
.chart-s2 { fill: var(--chart-3); stroke: var(--chart-3); }
.chart-s3 { fill: var(--chart-4); stroke: var(--chart-4); }
.chart-bar { stroke: none; }
.chart-line { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-point { r: 3px; stroke: var(--surface); stroke-width: 1.5; }
.chart-hit { fill: transparent; pointer-events: all; }
.chart-hit:hover { fill: var(--text); fill-opacity: .045; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.chart-legend li { display: flex; align-items: center; gap: 6px; }
.chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.chart-swatch.is-line { width: 16px; height: 3px; border-radius: 2px; }
.chart-swatch.chart-s0 { background: var(--chart-1); }
.chart-swatch.chart-s1 { background: var(--chart-2); }
.chart-swatch.chart-s2 { background: var(--chart-3); }
.chart-swatch.chart-s3 { background: var(--chart-4); }
/* The table view stays in the page for every reader; on screen it is a quiet link under the chart. */
.chart-table { margin-top: var(--s-2); }
.chart-table > summary { display: inline-block; color: var(--link); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); cursor: pointer; }
.chart-table > summary:hover { text-decoration: underline; }
.chart-table table { margin-top: var(--s-2); }
.chart-placeholder { flex: 1; justify-content: center; padding-block: var(--s-6); }
.empty-state[data-art="empty-report"]::before { background-image: url(/illustrations/empty-report.svg?v=fbc2034a9f49); }
.empty-state[data-art="inbox-clear"]::before { background-image: url(/illustrations/inbox-clear.svg?v=fbc2034a9f49); }
.chart-box-small { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.chart-box-small .chart-placeholder { padding-block: var(--s-3); }
.chart-box-small .chart-placeholder::before { width: 72px; height: 72px; background-size: 60px auto; }

/* Notes under a chart or a figure strip: the honest note when data is thin (11.21) and the rate a conversion used. */
.data-note, .rate-note { position: relative; margin: var(--s-3) 0 0; padding-left: 20px; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.data-note::before, .rate-note::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat;
}
.rate-note::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-coins); mask-image: url(/images.svg?v=fbc2034a9f49#i-coins); }

/* ---- Cash in bank, the balance sheet and staff working today ------------------------------------------------------- */
.hero-figure {
  margin: 0 0 var(--s-3);
  color: var(--text);
  font: var(--fw-bold) var(--fs-32) / var(--lh-32) var(--font-display);
  letter-spacing: var(--tracking-figure);
  font-variant-numeric: tabular-nums;
}
.company-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.company-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 10px 0; border-top: 1px solid var(--divider); }
.company-row > .tag:empty { display: none; }
.company-row:has(> .tag:empty) { grid-template-columns: minmax(0, 1fr) auto; }
.company-row-name { min-width: 0; color: var(--text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.company-row-figure { display: grid; justify-items: end; color: var(--text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.company-row-figure small { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-regular); }
dl.figure-list.details { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; margin: 0; }
.figure-list dt, .figure-list dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--divider); font-size: var(--fs-14); line-height: var(--lh-14); }
.figure-list dt:first-of-type, .figure-list dt:first-of-type + dd { border-top: 0; padding-top: 0; }
.figure-list dt { color: var(--text-2); }
.figure-list dd { text-align: right; color: var(--text); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.figure-list .is-total { border-top-color: var(--border-strong); color: var(--text); font-weight: var(--fw-semibold); }
.staff-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0 0 var(--s-3); }
.staff-figure { display: grid; gap: 2px; margin: 0; }
.staff-figure strong { font: var(--fw-semibold) var(--fs-32) / var(--lh-32) var(--font-display); letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums; }
.staff-figure span { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
/* The balance sheet bar: net assets in chart colour 1 on a track of chart colour 2, the liabilities (both 3:1 on the card). */
.bs-bar { display: block; width: 100%; height: 10px; margin: var(--s-4) 0 var(--s-2); overflow: hidden; border: 0; border-radius: var(--r-full); background: var(--chart-2); -webkit-appearance: none; appearance: none; }
.bs-bar::-webkit-progress-bar { background: var(--chart-2); border-radius: var(--r-full); }
.bs-bar::-webkit-progress-value { background: var(--chart-1); border-radius: var(--r-full); }
.bs-bar::-moz-progress-bar { background: var(--chart-1); border-radius: var(--r-full); }
.bs-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.bs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bs-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--chart-1); }
.bs-legend .bs-key-owed::before { background: var(--chart-2); }
#overview-staff > .muted { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--divider); }
/* Review of part 1 (V7): with nothing recorded today the staff card shows its empty state and the way to Work Management, and
   the balance sheet card keeps its own height instead of stretching to the money summary beside it. */
#overview-staff > .staff-empty { padding: var(--s-4) 0 0; border-top: 1px solid var(--divider); }
.home-grid > .home-snapshot > .home-side:has(#overview-bs) { align-self: start; }

/* ---- Needs your attention (11.13) ---------------------------------------------------------------------------------- */
.home-attention .section-title > .status-badge { margin-top: 2px; }
.attention-list { display: grid; margin: 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); padding: 0; list-style: none; }
.attention-list > li + li { border-top: 1px solid var(--divider); }
.attention-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: var(--s-3) var(--card-pad);
  color: var(--text);
  text-decoration: none;
}
.attention-list > li:last-child .attention-item { border-radius: 0 0 var(--r-lg) var(--r-lg); }
a.attention-item:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.attention-icon { position: relative; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); }
.attention-icon::before {
  content: "";
  position: absolute;
  inset: 8px;
  background-color: currentColor;
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-bell) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-bell) center / contain no-repeat;
}
[data-tone="warning"] > .attention-icon { background: var(--warning-bg); color: var(--warning-text); }
[data-tone="danger"] > .attention-icon { background: var(--danger-bg); color: var(--danger-text); }
[data-tone="success"] > .attention-icon { background: var(--success-bg); color: var(--success-text); }
.attention-icon[data-icon="clock"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); }
.attention-icon[data-icon="calendar"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.attention-icon[data-icon="customer"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-customer); mask-image: url(/images.svg?v=fbc2034a9f49#i-customer); }
.attention-icon[data-icon="invoice"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-invoice); mask-image: url(/images.svg?v=fbc2034a9f49#i-invoice); }
.attention-icon[data-icon="coins"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-coins); mask-image: url(/images.svg?v=fbc2034a9f49#i-coins); }
.attention-icon[data-icon="layers"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-layers); mask-image: url(/images.svg?v=fbc2034a9f49#i-layers); }
.attention-icon[data-icon="flag"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-flag); mask-image: url(/images.svg?v=fbc2034a9f49#i-flag); }
/* 0.21c task S4: a company's set-up items still to record (companies_setup). */
.attention-icon[data-icon="building"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-building); mask-image: url(/images.svg?v=fbc2034a9f49#i-building); }
.attention-icon[data-icon="shield-check"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-shield-check); mask-image: url(/images.svg?v=fbc2034a9f49#i-shield-check); }
.attention-icon[data-icon="bank"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-bank); mask-image: url(/images.svg?v=fbc2034a9f49#i-bank); }
.attention-icon[data-icon="mail"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-mail); mask-image: url(/images.svg?v=fbc2034a9f49#i-mail); }
.attention-icon[data-icon="check-circle"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-check-circle); mask-image: url(/images.svg?v=fbc2034a9f49#i-check-circle); }
.attention-icon[data-icon="users"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-users); mask-image: url(/images.svg?v=fbc2034a9f49#i-users); }
.attention-text { display: grid; gap: 2px; min-width: 0; }
.attention-label { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
.attention-company { overflow: hidden; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); text-overflow: ellipsis; white-space: nowrap; }
.attention-action {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  color: var(--text);
  font-size: var(--fs-13);
  line-height: 1;
  font-weight: var(--fw-medium);
}
a.attention-item:hover .attention-action { border-color: var(--border-control); }
.attention-clear { padding-block: var(--s-6); }

/* ---- The money summary: a table, and a card per company on a phone (11.6) ------------------------------------------- */
.home-money .section-title > div > .muted { white-space: normal; }
.money-table { width: 100%; }
.money-table td.col-title { min-width: 200px; }
.money-company { display: block; color: var(--text); font-weight: var(--fw-medium); }
.money-table .num { text-align: right; }
.money-table td .contact-address { text-align: inherit; }
.home-money .scroll, #dashboard-money .scroll { margin: 0 calc(-1 * var(--card-pad)); }
.home-money .money-table :is(th, td):first-child, #dashboard-money .money-table :is(th, td):first-child { padding-left: var(--card-pad); }
.home-money .money-table :is(th, td):last-child, #dashboard-money .money-table :is(th, td):last-child { padding-right: var(--card-pad); }
#dashboard-money .warning-note, #money-summary .warning-note { margin-top: var(--s-3); }

/* ---- Getting started (12.2): the release story, the tour and the demo job, in demo organisations only --------------- */
.getting-started-link { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: var(--s-5); margin: 0; }
.getting-started-link h2 { margin: 0; }
.getting-started-link .muted { margin: 2px 0 0; }
.getting-started-art { width: 96px; height: 72px; border-radius: var(--r-lg); background: var(--illus-halo) url(/illustrations/getting-started.svg?v=fbc2034a9f49) center / 88px auto no-repeat; }
details.getting-started { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
details.getting-started > summary {
  position: relative;
  display: grid;
  gap: 2px;
  padding: var(--s-4) var(--s-12) var(--s-4) var(--card-pad);
  border-radius: var(--r-lg);
  cursor: pointer;
  list-style: none;
}
details.getting-started > summary::-webkit-details-marker { display: none; }
details.getting-started > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--card-pad);
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background-color: var(--text-3);
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat;
  transition: transform var(--dur-2) var(--ease-out);
}
details.getting-started[open] > summary::after { transform: rotate(180deg); }
details.getting-started > summary:hover { background: var(--surface-hover); }
.getting-started-title { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-semibold); }
.getting-started-sub { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.getting-started-body { display: grid; gap: var(--s-5); padding: 0 var(--card-pad) var(--card-pad); }
.getting-started-body > * { margin: 0; }
.welcome-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: var(--s-6); padding: var(--s-5) var(--s-6); border-radius: var(--r-lg); background: var(--action-soft-bg); color: var(--action-soft-text); }
.welcome-card .getting-started-art { width: 120px; height: 90px; background-color: var(--surface); background-size: 104px auto; }
.welcome-card h2 { margin: 0 0 var(--s-1); color: var(--text); font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); }
.welcome-card p { max-width: var(--measure); margin: 0 0 var(--s-3); color: var(--text-2); }
.job-story { margin: 0; box-shadow: none; }
.job-story .section-title .card-sub { margin: 0 0 2px; }
.job-story h3 { font-size: var(--fs-16); line-height: var(--lh-16); }
.job-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
.job-flow > div { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
.job-flow span { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.job-flow strong { color: var(--text); font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); font-variant-numeric: tabular-nums; }
.job-flow > div:last-child { border-color: var(--border-strong); background: var(--action-soft-bg); }
.job-flow > div:last-child strong { color: var(--action-soft-text); }
.job-flow:empty, .cost-summary:empty { display: none; }
.cost-summary { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); padding-top: var(--s-3); border-top: 1px solid var(--divider); }
.cost-summary p { display: grid; gap: 2px; margin: 0; }
.cost-summary span { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cost-summary strong { font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); font-variant-numeric: tabular-nums; }
.tour h3 { margin: 0 0 var(--s-3); }
.tour-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.tour-grid :is(a, button) {
  display: grid;
  align-content: start;
  gap: var(--s-1);
  height: auto;
  min-height: 0;
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: none;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  font-weight: var(--fw-regular);
  white-space: normal;
}
.tour-grid :is(a, button):hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); text-decoration: none; }
.tour-grid :is(a, button) span { color: var(--action-soft-text); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-semibold); }
.tour-grid :is(a, button) strong { font-size: var(--fs-14); line-height: var(--lh-14); }
.tour-grid :is(a, button) small { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.release-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
.release-grid h3 { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-13); }
.release-grid p { margin: 0; }
details.demo-notice { margin: 0; }

/* ---- Laptop, 1024 to 1279 px: the figure strip 3 × 2 ---------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { padding: var(--s-4) var(--s-5); }
  /* The tiles are narrower: the name and its line wrap rather than lose words. */
  .app-tile strong, .app-tile .app-tile-text { white-space: normal; }
}

/* ---- Tablet, 768 to 1023 px ---------------------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .home-grid .home-wide, .home-grid:has(> #owner-overview[hidden]) .home-wide { grid-column: 1 / -1; }
  .home-grid .home-side { grid-column: span 6; }
  .home-grid #overview-staff-card, .dash-grid .home-side { grid-column: 1 / -1; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The tiles stand up: the icon above the name, the line left out. */
  .app-tile { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-content: start; row-gap: var(--s-2); min-height: 0; padding: var(--s-3); }
  .app-tile[data-app-id]::before { grid-row: auto; width: 36px; height: 36px; }
  .app-tile strong { white-space: normal; }
  .app-tile .app-tile-text { display: none; }
  .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Phone, under 768 px: one column, in the same order ------------------------------------------------------------ */
@media screen and (max-width: 767.98px) {
  .card { margin-bottom: var(--s-3); }
  .home-grid .home-side, .home-grid .home-wide { grid-column: 1 / -1; }
  .home-section-head { flex-wrap: wrap; align-items: flex-start; }
  .launcher-toolbar { width: 100%; justify-content: stretch; }
  .toolbar.launcher-toolbar { flex-wrap: nowrap; }
  .toolbar.launcher-toolbar label { flex: 1 1 0; }
  .home-apps .section-title { flex-wrap: wrap; align-items: flex-start; }
  .toolbar.launcher-toolbar label { white-space: normal; }
  .launcher-toolbar select { flex: 1 1 0; width: 100%; min-width: 0; max-width: none; }
  .home-apps { margin-bottom: var(--s-5); }
  .app-tiles { gap: var(--s-2); }
  .app-tile { justify-items: center; padding: var(--s-3) 2px var(--s-2); text-align: center; box-shadow: none; }
  .app-tile[data-app-id]::before { width: 44px; height: 44px; border-radius: 12px; }
  .app-tile::after { display: none; }
  .app-tile strong { font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); hyphens: auto; }
  .app-tile-count { top: 6px; right: 6px; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: var(--s-4); }
  .kpi .kpi-value { font-size: var(--fs-20); line-height: var(--lh-20); }
  .hero-figure { font-size: var(--fs-24); line-height: var(--lh-24); }
  .metrics strong { font-size: var(--fs-20); line-height: var(--lh-20); }
  .attention-item { grid-template-columns: 32px minmax(0, 1fr); align-items: start; }
  .attention-action { grid-column: 2; justify-self: start; height: 28px; }
  .getting-started-link { grid-template-columns: 72px minmax(0, 1fr); }
  .getting-started-link .getting-started-art { width: 72px; height: 56px; background-size: 64px auto; }
  .getting-started-link > .button-link { grid-column: 1 / -1; justify-self: stretch; }
  .welcome-card { grid-template-columns: minmax(0, 1fr); }
  .welcome-card .getting-started-art { display: none; }
  .tour-grid, .release-grid { grid-template-columns: minmax(0, 1fr); }
  .job-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The money summary as one card per company: each figure on its own line with its label, the total last. */
  .home-money .scroll, #dashboard-money .scroll { margin: 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tbody > tr { padding: var(--s-3) var(--card-pad); }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tbody > tr > td.col-title { grid-column: 1 / -1; margin-bottom: var(--s-1); }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tbody > tr > td.num,
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tbody > tr > td.num ~ td.num {
    display: flex;
    grid-column: 1 / -1;
    grid-row: auto;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--s-3);
    color: var(--text);
    font-size: var(--fs-13);
    line-height: var(--lh-13);
    font-weight: var(--fw-medium);
    text-align: right;
  }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tbody > tr > td.num::before,
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tbody > tr > td.num ~ td.num::before { content: attr(data-label); margin-right: auto; color: var(--text-3); font-weight: var(--fw-regular); }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tbody > tr > td.num .contact-address { flex-basis: 100%; margin: 0; }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tfoot, :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tfoot > tr { display: block; }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tfoot > tr > td { display: flex; justify-content: space-between; height: auto; padding: 6px var(--card-pad); border: 0; }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tfoot > tr > td:first-child { padding-top: var(--s-3); border-top: 1px solid var(--border-strong); }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tfoot > tr > td:last-child { padding-bottom: var(--s-3); }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tfoot > tr > td.num::before { content: attr(data-label); color: var(--text-3); font-weight: var(--fw-regular); }
  .money-table td.col-title { min-width: 0; }
  :is(#money-summary, #dashboard-money) .money-table.cards-on-phone > tbody > tr > td { padding-left: 0; padding-right: 0; }
  .home-money .rate-note, .home-money .warning-note, #dashboard-money .rate-note { margin-top: var(--s-3); }
}
@media screen and (max-width: 767.98px) {
  .home-money .scroll + .rate-note, #dashboard-money .scroll + .rate-note { margin-top: calc(var(--card-pad) + var(--s-3)); }
}

/* ---- Narrow phone, under 360 px ------------------------------------------------------------------------------------ */
@media screen and (max-width: 359.98px) {
  .app-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-grid, .metrics, .staff-figures { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Touch: 44 px targets (9) ---------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .attention-action { height: 36px; }
  /* Review of part 1 (RT-3): a 44 px row on a touch screen. */
  .chart-table > summary { display: inline-flex; align-items: center; min-height: var(--target); padding: 0; }
}

/* ---- Reduced motion, forced colours and print (8, 17, 11.24) ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .app-tile, details.getting-started > summary::after { transition: none; }
  .app-tile:active { transform: none; }
}
@media (forced-colors: active) {
  .card, .app-tile, details.getting-started, .kpi { border: 1px solid CanvasText; }
  .app-tile::after, .attention-icon::before, .data-note::before, .rate-note::before { background-color: CanvasText; }
}
@media print {
  .home-apps, .getting-started-link, details.getting-started, .launcher-toolbar, .attention-action { display: none !important; }
  .home-grid { display: block; }
  .home-grid .card, .figure-card { margin: 0 0 12px; break-inside: avoid; }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi::before { display: none; }
}

/* ==== Lists and documents (L2.1; DESIGN_SYSTEM.md 11.4 to 11.8, 11.17 to 11.19 and 18, row 2.4) ==================== */
/* The parts public/ui.js builds and every list page reuses: the title row's actions, the money bar, status tabs with
   counts, the list toolbar and its search, full-bleed list cards, the row menu, the totals row, phone cards for lists,
   empty-state art, the stage bar, the document editor with its sticky action bar and side panel, and sparklines. */

/* ---- The title row's actions (10.11): secondary first, the one primary last; icons drawn by masks ------------------- */
.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.page-actions[hidden] { display: none; }
:is(.icon-plus, .icon-download, .icon-paperclip, .add-line, .search-field)::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat;
}
.icon-download::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-download); mask-image: url(/images.svg?v=fbc2034a9f49#i-download); }
.icon-paperclip::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-paperclip); mask-image: url(/images.svg?v=fbc2034a9f49#i-paperclip); }

/* ---- The money bar (18, 2.4): four figures in one card, each a filter for the list below ------------------------- */
.money-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; padding: 0; overflow: hidden; background: var(--divider); }
.money-seg {
  display: grid;
  align-content: start;
  justify-content: stretch;
  justify-items: stretch;
  gap: 2px;
  min-width: 0;
  min-height: 0;
  padding: var(--s-4) var(--s-5);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  color: var(--text);
  text-align: left;
}
.money-seg:where(:not(:disabled):hover) { background: var(--surface-hover); color: var(--text); }
/* A pressed segment has a 2 px inset ring in the action colour as well as the tint (review of part 2, A11Y-5: the tint alone was 1.1:1). */
.money-seg[aria-pressed="true"] { background: var(--selected); box-shadow: inset 0 0 0 2px var(--action); }
.money-seg:focus-visible { outline-offset: -2px; }
.seg-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.seg-count { color: var(--text-2); font-variant-numeric: tabular-nums; }
.seg-amt { overflow-wrap: anywhere; font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums; }
.seg-line { display: block; height: 4px; margin-top: var(--s-2); border-radius: 2px; background: var(--neutral-dot); }
.money-seg[data-tone="info"] .seg-line { background: var(--info-dot); }
.money-seg[data-tone="danger"] .seg-line { background: var(--danger-dot); }
.money-seg[data-tone="success"] .seg-line { background: var(--success-dot); }
.money-seg[data-tone="danger"]:not([data-empty]) .seg-amt { color: var(--danger-text); }

/* ---- List cards (11.12): the table runs edge to edge; the card's padding is for its head, tabs, toolbar and foot ----- */
.list-card { padding: 0; overflow: hidden; }
.list-card > .list-head { margin: 0; padding: var(--card-pad) var(--card-pad) var(--s-2); }
.list-card > .list-head:has(> h2.title-echo:only-child) { display: none; }
.list-card > .scroll { border-top: 1px solid var(--border); }
.list-card :is(th, td):first-child { padding-left: var(--card-pad); }
.list-card :is(th, td):last-child { padding-right: var(--card-pad); }
.list-card > .scroll > table > :is(thead, tbody, tfoot) > tr:last-child > td { border-bottom: 0; }
.card-foot { display: grid; gap: var(--s-1); padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--divider); }
.card-foot > * { margin: 0; }
.card-foot details.more > summary { font-size: var(--fs-12); }

/* ---- Status tabs with counts (11.7, 11.11) ------------------------------------------------------------------------- */
.status-tabs { display: flex; gap: var(--s-1); padding: 0 var(--s-3); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); }
.status-tabs::-webkit-scrollbar { display: none; }
.status-tabs:empty { display: none; }
.status-tab {
  flex: none;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.status-tab:where(:not(:disabled):hover) { background: var(--surface-hover); color: var(--text); }
.status-tab[aria-pressed="true"] { color: var(--text); font-weight: var(--fw-semibold); box-shadow: inset 0 -2px 0 var(--action); }
.status-tab:focus-visible { outline-offset: -2px; }
.tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--neutral-bg);
  color: var(--neutral-text);
  font-size: var(--fs-12);
  line-height: 1;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.status-tab[aria-pressed="true"] .tab-count { background: var(--action-soft-bg); color: var(--action-soft-text); }

/* ---- The list toolbar (11.7): the search, a spacer, then the density switch -------------------------------------- */
.toolbar.list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--s-2) var(--s-3); margin: 0; padding: var(--s-3) var(--card-pad); }
.toolbar.list-toolbar label { min-width: 0; }
.toolbar-spacer { flex: 1 1 0; }
.search-field { position: relative; display: block; flex: 0 1 320px; }
.search-field::before { position: absolute; top: 50%; left: 12px; z-index: 1; margin-top: -8px; color: var(--text-3); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-search); mask-image: url(/images.svg?v=fbc2034a9f49#i-search); pointer-events: none; }
.search-field input { padding-left: 36px; }
.density-switch { display: flex; align-items: center; gap: var(--s-2); color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.density-switch .segmented > button { min-height: 28px; padding: 0 var(--s-3); font-size: var(--fs-13); }

/* ---- Rows of a list: the number opens it, the due date says how late, figures line up --------------------------- */
.doc-number { color: var(--text); font-weight: var(--fw-semibold); white-space: nowrap; }
.doc-number::before, .side-head .link-button::before, .doc-note-box .link-button::before { content: none; }
.doc-number:where(:not(:disabled):hover) { color: var(--link); }
.due-note { display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.due-note.is-late { color: var(--danger-text); font-weight: var(--fw-medium); }
.doc-table td:nth-child(3), .doc-table td:nth-child(4) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-table td.col-status .hint { display: block; margin-top: 2px; font-size: var(--fs-12); line-height: var(--lh-12); }
.contact-name { display: block; color: var(--text); font-weight: var(--fw-semibold); }
.contacts-table td:first-child { min-width: 220px; }
:where(tfoot) .total-label { color: var(--text-2); font-weight: var(--fw-medium); }
tr.empty-row:hover > td { background: none; }

/* ---- The row menu (11.4, 11.15): one action in view and "⋯" for the rest ----------------------------------------- */
.row-actions { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
td.action-buttons > .row-actions { margin: 0; }
td.col-actions, .doc-table td:last-child { text-align: right; white-space: nowrap; }
.row-more {
  width: var(--row-btn-h);
  min-width: var(--row-btn-h);
  padding: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
}
.row-more::before {
  content: "";
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-more) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-more) center / contain no-repeat;
}
.row-more:where(:not(:disabled):hover), .row-more[aria-expanded="true"] { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text); }
.row-more.is-anchor { anchor-name: --row-menu; }
.row-menu {
  min-width: 220px;
  max-width: min(320px, calc(100vw - 32px));
  margin: 0;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-raised);
  box-shadow: var(--sh-2);
  color: var(--text);
  text-align: left;
}
.row-menu:popover-open, .row-menu:not([popover]):not([hidden]) { display: grid; gap: 2px; }
.row-menu:not([popover]) { position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--z-popover); }
.row-actions:has(> .row-menu:not([popover])) { position: relative; }
@supports (anchor-name: --row-menu) {
  .row-menu[popover] { position: fixed; inset: auto; top: anchor(--row-menu bottom); right: anchor(--row-menu right); margin-top: 4px; position-try-fallbacks: flip-block; }
}
.row-menu .row-menu-item {
  justify-content: flex-start;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 0 var(--s-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}
.row-menu .row-menu-item:where(:hover, :focus-visible) { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.row-menu .row-menu-item:focus-visible { outline-offset: -2px; }
.row-menu .row-menu-item.text-link::after { content: ""; width: 14px; height: 14px; margin-left: auto; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-external) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-external) center / contain no-repeat; }

/* ---- Empty states' art (14) ---------------------------------------------------------------------------------------- */
.empty-state[data-art="empty-invoices"]::before { background-image: url(/illustrations/empty-invoices.svg?v=fbc2034a9f49); }
.empty-state[data-art="empty-contacts"]::before { background-image: url(/illustrations/empty-contacts.svg?v=fbc2034a9f49); }
.empty-state[data-art="empty-search"]::before { background-image: url(/illustrations/empty-search.svg?v=fbc2034a9f49); }
.empty-state[data-art="empty-bills"]::before { background-image: url(/illustrations/empty-bills.svg?v=fbc2034a9f49); }
.empty-state[data-art="empty-bank"]::before { background-image: url(/illustrations/empty-bank.svg?v=fbc2034a9f49); }

/* ---- The stage bar (11.18): chevron segments; the phone shows "Step 1 of 4 · Draft" over a segmented line -------- */
.stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.stage-bar { display: flex; margin: 0; padding: 0; list-style: none; }
.stage-bar > li {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-left: -6px;
  padding: 0 var(--s-4) 0 var(--s-5);
  background: var(--surface-sunken);
  color: var(--text-3);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.stage-bar > li:first-child { margin-left: 0; padding-left: var(--s-4); border-radius: var(--r-sm) 0 0 var(--r-sm); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); }
.stage-bar > li[data-state="done"] { background: var(--action-soft-bg); color: var(--action-soft-text); }
.stage-bar > li[data-state="done"]::before { content: ""; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.stage-bar > li[data-state="current"] { background: var(--action); color: var(--action-text); font-weight: var(--fw-semibold); }
.stage.is-void .stage-bar > li { background: var(--surface-sunken); color: var(--text-3); }
.stage.is-void .stage-bar > li::before { display: none; }
.stage-compact { display: none; margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.doc-stage:empty { display: none; }
#detail-stage { margin: var(--s-1) 0 var(--s-3); }

/* ---- The document editor (18, 2.4): the sheet and, beside it on wide screens, the customer at a glance ---------- */
.doc-editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--card-gap); }
.doc-editor[hidden] { display: none; }
.doc-editor > .card { margin: 0; }
.doc-sheet { padding: 0; }
.doc-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--divider); }
.doc-title h2 { margin: 0; font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); }
.doc-title .muted { margin: 2px 0 0; }
.doc-form { gap: 0; }
.doc-form > .hint.scope-banner { margin: var(--s-4) var(--s-6) 0; }
.doc-header { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-5) var(--s-8); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--divider); }
.doc-party, .doc-facts { display: grid; align-content: start; gap: var(--s-4); }
.doc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-due { display: grid; gap: 6px; }
.doc-due .hint, .doc-contact-line { margin: 0; font-size: var(--fs-12); line-height: var(--lh-12); }
.doc-contact-line { margin-top: -10px; }
.doc-contact-line:empty, #due-hint:empty { display: none; }
.doc-lines { padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--divider); }
.doc-lines-title { margin: 0 0 var(--s-3); font-size: var(--fs-14); line-height: var(--lh-14); }
/* The lines grid: description, quantity, price, account, tax (and SAC), amount, remove. */
#line-head, .document-line { display: grid; grid-template-columns: minmax(150px, 1.5fr) 72px 112px minmax(170px, 1.4fr) minmax(130px, 1fr) 96px 36px; gap: var(--s-2); align-items: center; }
#line-head.with-sac, .document-line.with-sac { grid-template-columns: minmax(150px, 1.5fr) 72px 112px minmax(170px, 1.4fr) minmax(130px, 1fr) 72px 96px 36px; }
#line-head { padding: 0 0 var(--s-2); border-bottom: 1px solid var(--border); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
#line-head > :nth-child(2), #line-head > :nth-child(3), .line-amount-head { text-align: right; }
.document-line { margin: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--divider); }
.document-line > :is([data-field="quantity"], [data-field="unitPrice"]) { text-align: right; font-variant-numeric: tabular-nums; }
.line-amount { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.line-remove { width: 36px; min-width: 36px; padding: 0; border-color: transparent; background: transparent; box-shadow: none; color: var(--text-3); }
.line-remove::before { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-trash) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-trash) center / contain no-repeat; }
.line-remove:where(:not(:disabled):hover) { background: var(--danger-bg); color: var(--danger-text); }
.doc-lines-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.doc-lines-foot details.more { flex: 1 1 260px; }
.doc-lines-foot details.more > summary { font-size: var(--fs-12); }
.doc-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); align-items: start; gap: var(--s-5) var(--s-8); padding: var(--s-5) var(--s-6); }
.doc-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
/* An information panel, so a plain border and a sunken fill: the dashed border is kept for drop zones (review of part 2, V29). */
.doc-note-box { display: grid; align-content: start; gap: var(--s-2); min-width: 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
.doc-note-box[hidden] { display: none; }
.doc-note-box h3 { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.doc-note-box p { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.doc-note-text { color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.doc-note-box :is(button, .link-button) { justify-self: start; }
.doc-totals { display: grid; gap: var(--s-2); }
.doc-totals dl { display: grid; margin: 0; }
.doc-totals dl > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 6px 0; }
.doc-totals dt { color: var(--text-2); }
.doc-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.doc-totals .is-total { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border-strong); }
.doc-totals .is-total :is(dt, dd, strong) { color: var(--text); font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); letter-spacing: var(--tracking-figure); }
/* Why there is no total yet: beside Add item, where the quantities and prices are typed, so it adds no height under the
   totals and the sticky action bar never covers it (its own polite live region). */
.total-note { flex: 0 1 auto; min-width: 0; }
.total-note > .hint { display: flex; gap: var(--s-2); margin: 0; padding: 6px var(--s-3); border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.total-note > .hint::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat; }
.total-note > .hint[hidden] { display: none; }

/* ---- The sticky action bar (11.19) ---------------------------------------------------------------------------------- */
.form-actions.sticky {
  position: sticky;
  bottom: 0;
  z-index: var(--z-actionbar);
  min-height: 64px;
  margin: 0;
  padding: var(--s-3) var(--s-6);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--surface);
  box-shadow: 0 -4px 12px -8px var(--border-strong);
}
.doc-actions-start { display: flex; align-items: center; gap: var(--s-3); margin-right: auto; }
/* Review of part 2 (A11Y-1, WCAG 2.4.11): while an editor or a payroll run with a sticky bar is shown, a focused field is
   scrolled clear of the bar (and of the bottom menu on a phone), not under it. */
html:has(#document-editor:not([hidden]), #expense-card:not([hidden]), #run-detail:not([hidden]) #run-action-bar:not([hidden])) { scroll-padding-bottom: calc(var(--actionbar-h) + var(--s-6)); }
@media screen and (max-width: 767.98px) {
  html:has(#document-editor:not([hidden]), #expense-card:not([hidden]), #run-detail:not([hidden]) #run-action-bar:not([hidden])) { scroll-padding-bottom: calc(var(--actionbar-h) + var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-6)); }
}

/* ---- The customer at a glance ------------------------------------------------------------------------------------ */
.doc-side { display: grid; gap: var(--card-gap); position: sticky; top: calc(var(--bar-h) + var(--menu-h) + var(--s-4)); }
.doc-side > .card { margin: 0; }
.side-card h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.side-card > .muted { margin: var(--s-2) 0 0; }
.side-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }
.side-head .link-button { font-size: var(--fs-13); }
.side-facts { display: grid; margin: 0; }
.side-facts > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--divider); font-size: var(--fs-13); line-height: var(--lh-13); }
.side-facts dt { color: var(--text-2); }
.side-facts dd { margin: 0; color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; text-align: right; }
.side-facts > .is-late dd { color: var(--danger-text); }
.side-contact { display: grid; gap: 2px; margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--divider); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); overflow-wrap: anywhere; }

/* ---- The contact dialog on the two-column form grid (11.14) -------------------------------------------------------- */
#contact-dialog form { gap: var(--s-4); }
#contact-dialog .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
/* A label whose words run on after its field name ("Address * (one line per row, up to 5)") reads as one line. */
#contact-dialog form > label:has(> textarea) { display: block; }
#contact-dialog form > label:has(> textarea) > textarea { margin-top: 6px; }

/* ---- Sparklines on the figure tiles (11.9) --------------------------------------------------------------------------- */
.kpi .sparkline { display: block; width: 100%; height: 32px; margin-top: var(--s-2); overflow: visible; }
.spark-line { fill: none; stroke: var(--chart-1); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.spark-area { fill: var(--chart-1); fill-opacity: .12; stroke: none; }
.spark-zero { stroke: var(--chart-zero); stroke-width: 1; stroke-dasharray: 2 3; }
.kpi.is-negative .spark-line { stroke: var(--danger-text); }
.kpi.is-negative .spark-area { fill: var(--danger-text); }

/* ---- Wide screens: the lines grid fits beside the side panel only from 1440 px when it has the SAC column -------- */
@media (max-width: 1439.98px) {
  .doc-editor:has(.document-line.with-sac) { grid-template-columns: minmax(0, 1fr); }
  .doc-editor:has(.document-line.with-sac) .doc-side { position: static; }
}
@media (min-width: 1280px) {
  .doc-editor:not(:has(.document-line.with-sac)) .doc-contact-line { display: none; }
}
/* ---- Laptop, under 1280 px: the side panel drops below the sheet (9); the list leaves out the issue date ---------- */
@media (max-width: 1279.98px) {
  .doc-table :is(th, td).col-hide-phone { display: none; }
  .doc-editor { grid-template-columns: minmax(0, 1fr); }
  .doc-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .money-bar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .money-seg { padding: var(--s-3) var(--s-4); }
  .seg-amt { font-size: var(--fs-16); line-height: var(--lh-16); }
}
/* ---- Tablet, under 1024 px: lines stack as small cards; the header is one column ----------------------------------- */
@media (max-width: 1023.98px) {
  .money-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-header { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .doc-foot { grid-template-columns: minmax(0, 1fr); }
  #line-head, #line-head.with-sac { display: none; }
  .document-line, .document-line.with-sac {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) 0;
  }
  .document-line > [data-field="description"] { grid-row: 1; grid-column: 1 / -1; }
  /* Quantity and Net unit price are captioned over their fields (the line's own ::before and ::after, RT2-2). */
  .document-line::before, .document-line::after { grid-row: 2; margin-bottom: calc(var(--s-1) * -1); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
  .document-line::before { content: "Quantity"; grid-column: 1 / span 3; }
  .document-line::after { content: "Net unit price"; grid-column: 4 / span 3; text-align: right; }
  .document-line > [data-field="quantity"] { grid-row: 3; grid-column: 1 / span 3; }
  .document-line > [data-field="unitPrice"] { grid-row: 3; grid-column: 4 / span 3; }
  .document-line > [data-field="accountCode"] { grid-row: 4; grid-column: 1 / span 3; }
  .document-line > [data-field="taxCode"] { grid-row: 4; grid-column: 4 / span 3; }
  .document-line > [data-field="sac"] { grid-row: 5; grid-column: 1 / span 2; }
  .document-line > .line-amount { grid-row: 5; grid-column: 1 / span 5; text-align: left; }
  .document-line.with-sac > .line-amount { grid-column: 3 / span 3; }
  .document-line > .line-amount::before { content: "Amount "; color: var(--text-3); font-weight: var(--fw-regular); }
  .document-line > .line-remove { grid-row: 5; grid-column: -2 / -1; justify-self: end; }
}
/* ---- Tablet, 768 to 1023 px: a list that is a card on a phone keeps readable columns and scrolls, with its first
   column in view (as the other tables do since the review of part 1, RT-4) ---------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .scroll > table.cards-on-phone { min-width: max-content; }
  .scroll > table.cards-on-phone > :is(thead, tbody) > tr > :first-child { position: sticky; left: 0; z-index: 1; background-color: var(--surface); }
  .scroll > table.cards-on-phone > thead > tr > th:first-child { z-index: calc(var(--z-sticky) + 1); background-color: var(--surface-sunken); }
  .scroll > table.cards-on-phone > tbody > tr:hover > :first-child { background-color: var(--surface-hover); }
  .scroll > table.cards-on-phone > tbody > tr.empty-row > td:first-child { position: static; }
  .scroll > table.cards-on-phone .contact-address { white-space: normal; }
  /* Review of part 2 (RT2-3): the row's actions and its "⋯" stay in view on the right while the columns scroll. */
  .scroll > table.cards-on-phone > :is(thead, tbody, tfoot) > tr > .col-actions { position: sticky; right: 0; z-index: 1; background-color: var(--surface); box-shadow: inset 1px 0 0 var(--divider); }
  .scroll > table.cards-on-phone > thead > tr > th.col-actions { z-index: calc(var(--z-sticky) + 1); background-color: var(--surface-sunken); }
  .scroll > table.cards-on-phone > tfoot > tr > td.col-actions { background-color: var(--surface-sunken); }
  .scroll > table.cards-on-phone > tbody > tr:hover > .col-actions { background-color: var(--surface-hover); }
  /* Payroll › Employees: the name leads (with the code under it), so it is the column kept in view. */
  .scroll > table.employees-table > :is(thead, tbody) > tr > :first-child { display: none; }
  .scroll > table.employees-table > :is(thead, tbody) > tr > :nth-child(2) { position: sticky; left: 0; z-index: 1; background-color: var(--surface); }
  .scroll > table.employees-table > thead > tr > th:nth-child(2) { z-index: calc(var(--z-sticky) + 1); background-color: var(--surface-sunken); }
  .scroll > table.employees-table > tbody > tr:hover > :nth-child(2) { background-color: var(--surface-hover); }
}
/* ---- Phone, under 768 px -------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  .density-switch { display: none; }
  .page-actions { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .money-seg { padding: var(--s-3) var(--s-4); }
  .seg-label { font-size: var(--fs-12); line-height: var(--lh-12); }
  .status-tabs { padding: 0 var(--s-1); }
  .toolbar.list-toolbar { padding: var(--s-3) var(--card-pad); }
  .search-field { flex: 1 1 100%; }
  .toolbar-spacer { display: none; }
  /* Only the phone cards lose the cells' side padding (the card has its own); a table that still scrolls keeps it
     (review of part 2, RT2-4). */
  .list-card table.cards-on-phone :is(th, td):first-child { padding-left: 0; }
  .list-card table.cards-on-phone :is(th, td):last-child { padding-right: 0; }
  .list-card > .scroll > table.cards-on-phone > tbody > tr { padding: var(--s-4) var(--card-pad); }
  .cards-on-phone > tbody > tr > td.col-title .doc-number { font-size: var(--fs-16); }
  .cards-on-phone > tbody > tr > td.col-actions { justify-content: flex-start; }
  .cards-on-phone > tbody > tr > td.col-actions > .row-actions { justify-content: flex-start; width: 100%; }
  .cards-on-phone > tbody > tr > td.col-actions .row-more { margin-left: auto; }
  .cards-on-phone > tbody > tr.empty-row { display: block; padding: 0; }
  .cards-on-phone > tbody > tr.empty-row > td { display: block; }
  /* The totals row as one line under the cards. */
  table.cards-on-phone > tfoot { display: block; }
  table.cards-on-phone > tfoot > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--border-strong); background: var(--surface-sunken); }
  table.cards-on-phone > tfoot > tr > td { display: block; height: auto; padding: 0; border: 0; background: none; font-size: var(--fs-13); line-height: var(--lh-13); }
  table.cards-on-phone > tfoot > tr > td.total-label { grid-column: 1 / -1; }
  table.cards-on-phone > tfoot > tr > td.num { text-align: left; }
  table.cards-on-phone > tfoot > tr > td.num::before { content: attr(data-label) " "; color: var(--text-3); font-weight: var(--fw-regular); }
  table.cards-on-phone > tfoot > tr > td:empty { display: none; }
  .row-menu[popover] { position: fixed; inset: auto 0 0 0; top: auto; right: 0; width: 100%; max-width: none; padding: var(--s-5) var(--s-3) calc(var(--s-3) + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-3); }
  .row-menu[popover]::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
  .row-menu[popover]::backdrop { background: var(--overlay); }
  .row-menu .row-menu-item { min-height: var(--target); }
  .doc-title { padding: var(--s-4); }
  .doc-header, .doc-lines, .doc-foot { padding: var(--s-4); }
  .doc-form > .hint.scope-banner { margin: var(--s-3) var(--s-4) 0; }
  .doc-facts, .doc-notes { grid-template-columns: minmax(0, 1fr); }
  .stage-bar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; width: 100%; }
  .stage-bar > li { height: 4px; margin: 0; padding: 0; border-radius: 2px; clip-path: none; font-size: 0; }
  .stage-bar > li:first-child { padding: 0; border-radius: 2px; clip-path: none; }
  .stage-bar > li::before { display: none; }
  .stage-bar > li .stage-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .stage-compact { display: block; }
  .stage { width: 100%; }
  /* Cancel, then the two saves side by side; Preview is in the row menu's PDF on a phone. */
  .form-actions.sticky { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: auto; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: 0; }
  .form-actions.sticky > #draft-preview { display: none; }
  .form-actions.sticky > button { padding-inline: var(--s-2); white-space: nowrap; }
  .form-actions.sticky > .doc-actions-start { margin: 0; }
  .form-actions.sticky > .doc-actions-start > button { width: 100%; }
  html.shell-typing .form-actions.sticky { bottom: 0; }
  .doc-side { grid-template-columns: minmax(0, 1fr); }
  #contact-dialog .form-grid { grid-template-columns: minmax(0, 1fr); }
}
/* ---- Phones on their side: a shorter action bar (9) ------------------------------------------------------------------ */
@media (max-height: 500px) and (orientation: landscape) {
  .form-actions.sticky { min-height: 52px; padding-block: var(--s-2); }
}
/* ---- Touch: 44 px targets (9) ---------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .status-tab { min-height: var(--target); }
  .row-more, .line-remove { width: var(--target); min-width: var(--target); }
  .density-switch .segmented > button { min-height: var(--target); }
  /* Review of part 2 (RT2-5): row links, drill-downs and lone links are 44 px tall on touch. */
  .link-button, .template-links a, #profiles-import-card .text-link { display: inline-flex; align-items: center; min-height: var(--target); }
  .row-menu .row-menu-item { min-height: var(--target); }
}
@media (forced-colors: active) {
  .stage-bar > li { border: 1px solid CanvasText; }
  .stage-bar > li[data-state="current"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .row-more::before, .line-remove::before, :is(.icon-plus, .icon-download, .icon-paperclip, .add-line, .search-field)::before, .stage-bar > li[data-state="done"]::before { background-color: CanvasText; }
  .money-seg[aria-pressed="true"], .status-tab[aria-pressed="true"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}
@media print {
  .money-bar, .status-tabs, .list-toolbar, .row-more, .row-menu, .doc-actions, .line-remove, .add-line { display: none !important; }
  .list-card { overflow: visible; }
  .cards-on-phone > tbody > tr { break-inside: avoid; }
}

/* ==== Bills, expenses and bank (L2.2; DESIGN_SYSTEM.md 18, rows 2.5 to 2.7, and 11.2, 11.9) ======================== */
/* Stat tiles in one strip, the drop zone and file chips, the expense editor, the date filter in a list toolbar, the
   bank accounts list, the reconcile card (tiles, import fold, toolbar, statement lines with suggested matches as chips,
   ledger entries not on the statement) and the payment, receipts and bank entry dialogs. */

/* ---- Icons on buttons: Record a payment ---------------------------------------------------------------------------- */
.icon-payment::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-payment) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-payment) center / contain no-repeat; }
.list-head .link-button::before { content: none; }
.list-head .muted .link-button { font-size: inherit; line-height: inherit; }

/* ---- Stat tiles in one strip (11.9): one card, the figures divided by 1 px lines ------------------------------------ */
.stat-strip { gap: 1px; margin: 0 0 var(--card-gap); overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--divider); box-shadow: var(--sh-1); }
.stat-strip > article.card { margin: 0; padding: var(--s-4) var(--s-5); border: 0; border-radius: 0; box-shadow: none; }
.stat-strip > article.is-attention > strong { color: var(--warning-text); }
.stat-strip > article.is-attention > p { text-wrap: balance; }
.stat-strip > article.is-attention > p::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: var(--s-2); border-radius: var(--r-full); background: var(--warning-dot); vertical-align: 1px; }
/* Review of part 2 (V25): over budget is red in the job's tile as in the jobs list. */
.stat-strip > article.is-danger > strong { color: var(--danger-text); }
.stat-strip > article.is-danger > p::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: var(--s-2); border-radius: var(--r-full); background: var(--danger-dot); vertical-align: 1px; }
.metrics.stat-strip.recon-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; box-shadow: none; }
.metrics.stat-strip.recon-tiles > article.card { padding: var(--s-3) var(--s-4); }
.metrics.stat-strip.recon-tiles strong { font-size: var(--fs-20); line-height: var(--lh-20); }

/* ---- Drop zones (11.2): the label holds the file input, so a click or Enter still opens the picker -------------------- */
label.drop-zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-1);
  padding: var(--s-5) var(--s-4);
  border: 1.5px dashed var(--border-control);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
label.drop-zone:hover, label.drop-zone.is-over { border-color: var(--action); background: var(--action-soft-bg); }
label.drop-zone.is-over { border-style: solid; }
label.drop-zone:has(.drop-zone-input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.drop-zone-art { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-1); border-radius: var(--r-full); background: var(--surface); box-shadow: var(--sh-1); color: var(--action); }
.drop-zone-art::before { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-upload) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-upload) center / contain no-repeat; }
.drop-zone-text { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-regular); }
.drop-zone-text strong { font-weight: var(--fw-semibold); }
.drop-zone-link { color: var(--link); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 2px; }
.drop-zone-hint { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-regular); }
.drop-zone-input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; opacity: 0; clip-path: inset(50%); }
.touch-only { display: none; }

/* ---- File chips: chosen files, and the files kept with an expense or a bill ---------------------------------------- */
.file-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.file-chip { display: flex; align-items: center; gap: var(--s-3); min-width: 0; margin: 0; padding: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.file-tag { flex: none; display: grid; place-items: center; width: 36px; height: 40px; border-radius: var(--r-sm); background: var(--neutral-bg); color: var(--neutral-text); font-size: var(--fs-12); line-height: 1; font-weight: var(--fw-bold); letter-spacing: 0; }
.file-tag.tag-pdf { background: var(--danger-bg); color: var(--danger-text); }
.file-tag:is(.tag-png, .tag-jpg) { background: var(--info-bg); color: var(--info-text); }
.file-tag.tag-csv { background: var(--success-bg); color: var(--success-text); }
.file-chip-body { display: grid; flex: 1 1 auto; min-width: 0; }
.file-name { overflow: hidden; color: var(--text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.file-meta { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.file-actions { display: flex; flex: none; gap: 2px; }
.file-empty { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
:is(.file-action, .file-remove) {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  box-shadow: none;
  color: var(--text-2);
  text-decoration: none;
}
:is(.file-action, .file-remove)::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-x) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-x) center / contain no-repeat; }
.file-action.icon-eye::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-eye); mask-image: url(/images.svg?v=fbc2034a9f49#i-eye); }
.file-action.icon-download::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-download); mask-image: url(/images.svg?v=fbc2034a9f49#i-download); }
.file-action.icon-trash::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-trash); mask-image: url(/images.svg?v=fbc2034a9f49#i-trash); }
:is(.file-action, .file-remove):where(:not(:disabled):hover) { border-color: var(--border); background: var(--surface-hover); color: var(--text); text-decoration: none; }
:is(.file-action.icon-trash, .file-remove):where(:not(:disabled):hover) { border-color: transparent; background: var(--danger-bg); color: var(--danger-text); }

/* ---- The receipts dialog: the files kept, then the drop zone and Upload ------------------------------------------- */
#attachments-dialog .attachment-list { margin: var(--s-3) 0 var(--s-4); }
#attachment-form { gap: var(--s-3); margin: 0 0 var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
#attachment-form .form-actions { position: static; margin: 0; padding: 0; border: 0; background: none; }
#attachment-form .form-error:empty, .inline-panel .form-error:empty, #bank-entry-error:empty { display: none; }

/* ---- The expense list: dates and figures line up; net and VAT leave the list below 1280 px ---------------------------- */
:is(th, td).fig { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(.expense-table, #payments-table, .recon-table, #recon-unmatched-table) td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.expense-table td.col-status .due-note { margin-top: 2px; }
.due-note.is-missing { color: var(--warning-text); }
.date-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
:is(.date-filter, .recon-period) label { display: flex; align-items: center; gap: var(--s-2); min-width: 0; white-space: nowrap; }
:is(.date-filter, .recon-period) input[type="date"] { width: 156px; }
.recon-period select { width: auto; min-width: 170px; }

/* ---- The expense editor: the document sheet of 2.4 with expense lines, receipts and the totals ------------------------ */
.expense-sheet { margin: 0; }
.doc-fact-wide { grid-column: 1 / -1; }
.expense-line { display: grid; grid-template-columns: minmax(180px, 1.5fr) minmax(210px, 1.5fr) minmax(130px, 1fr) 132px 36px; gap: var(--s-2); align-items: center; margin: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--divider); }
.line-head.expense-line { padding: 0 0 var(--s-2); border-bottom-color: var(--border); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.expense-line > [data-field="amount"], .line-head.expense-line > .line-amount-head { text-align: right; font-variant-numeric: tabular-nums; }
.receipt-box { display: grid; align-content: start; gap: var(--s-3); min-width: 0; }
.receipt-box h3 { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.receipt-box .file-chips { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.doc-legal { display: grid; gap: var(--s-1); padding: 0 var(--s-6) var(--s-5); }
.doc-legal > * { margin: 0; }
.doc-error { margin: 0 var(--s-6) var(--s-4); }
.doc-error:empty { display: none; }

/* ---- Bank accounts: an inline panel to add one; the selected account's row is marked ------------------------------- */
.inline-panel { gap: var(--s-4); margin: 0 var(--card-pad) var(--s-5); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
.inline-panel h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.inline-panel .hint { margin: 0; }
.inline-panel .form-grid { align-items: end; }
/* A row with one action and no "⋯" keeps its button in line with the rows that have one. */
@media (min-width: 768px) {
  :is(.expense-table, .bank-table) td.col-actions > button:only-child { margin-right: calc(var(--row-btn-h) + var(--s-2)); }
}
:is(.bank-table, .recon-table) td.col-status, #payments-table td.col-title { white-space: nowrap; }

/* ---- The reconcile card ---------------------------------------------------------------------------------------------- */
.card-kicker { margin: 0 0 2px; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-semibold); letter-spacing: .02em; }
.recon-head { align-items: flex-end; }
.recon-head .inline-select { width: 300px; max-width: 100%; }
.recon-body { display: grid; gap: var(--s-4); padding: var(--s-2) var(--card-pad) var(--s-5); }
details.import-box { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
details.import-box > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-4); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); list-style: none; }
details.import-box > summary::-webkit-details-marker { display: none; }
details.import-box > summary::before { content: ""; flex: none; width: 16px; height: 16px; background-color: var(--action); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-upload) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-upload) center / contain no-repeat; }
details.import-box > summary::after { content: ""; flex: none; width: 16px; height: 16px; margin-left: auto; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; transition: transform var(--dur-2) var(--ease-out); }
details.import-box[open] > summary { border-bottom: 1px solid var(--divider); }
details.import-box[open] > summary::after { transform: rotate(180deg); }
details.import-box > summary:hover { background: var(--surface-hover); }
details.import-box > summary:focus-visible { outline-offset: -2px; }
details.import-box > form { gap: var(--s-4); margin: 0; padding: var(--s-4); }
details.import-box > form > .hint, #statement-result { margin: 0; }
#statement-result:empty, #statement-error:empty { display: none; }
details.import-box .form-actions { justify-content: flex-start; }
.mapping { display: grid; gap: var(--s-3); }
.mapping h3 { margin: var(--s-1) 0 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.map-role { display: block; margin-top: 2px; color: var(--link); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-semibold); }
.preview-table td { white-space: nowrap; }
form.recon-period { margin: 0; border-top: 1px solid var(--border); }
.recon-table td.col-actions { min-width: 320px; text-align: left; white-space: normal; }
.money-in { color: var(--success-text); }
.money-out { color: var(--text); }
.suggestions { display: grid; gap: var(--s-2); margin: 0 0 var(--s-2); padding: 0; list-style: none; }
.suggestion-chip { display: flex; align-items: center; gap: var(--s-3); min-width: 0; padding: 6px 6px 6px var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: inset 3px 0 0 var(--info-dot); }
.suggestion-text { display: grid; flex: 1 1 auto; min-width: 0; }
.suggestion-what { overflow: hidden; color: var(--text); font-size: var(--fs-13); line-height: var(--lh-13); text-overflow: ellipsis; white-space: nowrap; }
.suggestion-meta { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }
.suggestion-chip > .chip-match { flex: none; margin: 0; }
.recon-actions, .recon-actions > .row-actions { justify-content: flex-start; }
.recon-ledger { padding: var(--s-5) var(--card-pad) var(--s-3); border-top: 1px solid var(--border); }
.recon-ledger h3 { display: flex; align-items: center; gap: var(--s-2); margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); }
.recon-ledger .tab-count:empty { display: none; }
.recon-ledger .hint { margin: 2px 0 0; }
#recon-unmatched-table { font-size: var(--fs-13); }

/* ---- Dialogs on the two-column form grid (11.14) ------------------------------------------------------------------- */
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(#payment-dialog, #bank-record-card, #bank-entry-dialog) .legal-note { margin: 0; }

/* ---- Laptop, under 1280 px ------------------------------------------------------------------------------------------ */
@media (max-width: 1279.98px) {
  .expense-table :is(th, td).fig { display: none; }
  .metrics.stat-strip.recon-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The toolbar keeps the search, the dates and the density switch on one row; the payments list leaves out Direction (the
     amount's sign and colour say it). */
  .list-toolbar:has(.date-filter) .search-field { flex-basis: 220px; }
  #payments-table :is(th, td):nth-child(4) { display: none; }
}
/* ---- Tablet, under 1024 px: expense lines stack as small cards ------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .line-head.expense-line { display: none; }
  .expense-line { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; }
  .expense-line > [data-field="description"] { grid-column: 1 / -1; }
  .expense-line > :is([data-field="accountCode"], [data-field="taxCode"]) { grid-column: span 3; }
  .expense-line > [data-field="amount"] { grid-column: 1 / span 5; text-align: left; }
  .expense-line > .line-remove { grid-column: -2 / -1; justify-self: end; }
  .bank-metrics.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.date-filter, .recon-period) input[type="date"] { width: 140px; }
  .recon-period select { min-width: 150px; }
  .recon-table td.col-actions { min-width: 280px; }
}
/* ---- Phone, under 768 px ---------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  .list-toolbar .date-filter { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .date-filter > button { grid-column: 1 / -1; }
  .expense-line > [data-field="accountCode"] { grid-column: 1 / -1; }
  .expense-line > [data-field="taxCode"] { grid-column: 1 / span 3; }
  .expense-line > [data-field="amount"] { grid-column: span 2; text-align: right; }
  .metrics.stat-strip.recon-tiles strong { font-size: var(--fs-16); line-height: var(--lh-16); }
  :is(.date-filter, .recon-period) label { display: grid; gap: 4px; }
  :is(.date-filter, .recon-period) input[type="date"] { width: 100%; }
  form.recon-period.list-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  form.recon-period select { min-width: 0; width: 100%; }
  .recon-head .inline-select { width: 100%; }
  .stat-strip > article.card { padding: var(--s-3) var(--s-4); }
  .stat-strip strong { font-size: var(--fs-20); line-height: var(--lh-20); }
  .recon-body { padding-inline: var(--s-4); }
  .recon-table td.col-actions { min-width: 0; }
  .doc-legal { padding: 0 var(--s-4) var(--s-4); }
  .doc-error { margin: 0 var(--s-4) var(--s-3); }
  .inline-panel { margin-inline: var(--s-4); padding: var(--s-4); }
  .form-grid.two-col { grid-template-columns: minmax(0, 1fr); }
  .file-chips, .receipt-box .file-chips { grid-template-columns: minmax(0, 1fr); }
  .recon-ledger { padding-inline: var(--s-4); }
  #attachment-form .form-actions { display: flex; }
  #attachment-form .form-actions > button { flex: 1 1 auto; }
}
/* ---- Touch: there is nothing to drop on a phone or tablet, so the zone says what a tap does; 44 px targets ---------- */
@media (pointer: coarse) {
  .drop-only { display: none; }
  .touch-only { display: inline; }
  :is(.file-action, .file-remove) { width: var(--target); min-width: var(--target); height: var(--target); min-height: var(--target); }
  details.import-box > summary { min-height: var(--target); }
}
@media (pointer: coarse) and (min-width: 768px) {
  :is(.expense-table, .bank-table) td.col-actions > button:only-child { margin-right: calc(var(--target) + var(--s-2)); }
}
@media (forced-colors: active) {
  :is(.file-action, .file-remove, .drop-zone-art, .icon-payment)::before, details.import-box > summary::before, details.import-box > summary::after { forced-color-adjust: none; background-color: CanvasText; }
  .stat-strip > article.card { border: 1px solid CanvasText; }
  .suggestion-chip { border-color: CanvasText; }
}
@media print {
  .drop-zone, #attachment-form, details.import-box, form.recon-period, .recon-actions, .suggestions .chip-match { display: none !important; }
}

/* ==== Reports, Accounts settings and the Accounts dialogs (L2.3; DESIGN_SYSTEM.md 18, rows 2.8 to 2.10, and 11.4, 11.11,
   11.14, 11.24) ======================================================================================================== */
/* The reports toolbar in one row, statement tables with their drill-downs and totals, the trial balance, journals and
   audit, print; the settings left menu, the chart of accounts list, titled form sections and the logo drop zone; dialogs
   on the two-column grid with their errors inside the form and their actions in reach. */

/* ---- Icons on buttons: Print, and the settings menu's line icons ---------------------------------------------------- */
.icon-print::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-print) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-print) center / contain no-repeat; }
.print-only { display: none; }

/* ---- The reports toolbar (2.8): Period, From, To, Compare, then Show report, Download CSV and Print ---------------- */
.report-toolbar { padding: var(--s-4) var(--card-pad); }
form.report-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.report-controls > label { flex: 0 0 auto; width: 164px; min-width: 0; }
.report-controls > .report-preset { width: 196px; }
.report-controls > #report-compare-field { width: 200px; }
.report-period-field { display: none; }
.report-period-field .field-label { display: block; margin: 0 0 6px; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.report-periods { display: flex; height: var(--control-h); }
.report-periods > button { min-height: 0; white-space: nowrap; }
.report-buttons { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); margin-left: auto; }
.report-buttons > :is(#report-csv, #report-print) { gap: var(--s-2); }
#report-period-note { margin: var(--s-2) 0 0; }
#report-period-note:empty { display: none; }
@media (min-width: 1440px) {
  .report-period-field { display: block; }
  .report-controls > .report-preset { display: none; }
}

/* ---- Report sheets and statement tables (11.4): compact, tabular, full bleed, drill-downs, totals ---------------- */
.report-sheet > .section-title { align-items: baseline; }
.report-sheet .report-period { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); font-variant-numeric: tabular-nums; }
.report-sheet > .report-hint { margin: calc(var(--s-2) * -1) 0 var(--s-4); }
.report-sheet > details.report-hint { margin-top: calc(var(--s-3) * -1); }
.report-body > .scroll { margin: 0 calc(-1 * var(--card-pad)); border-top: 1px solid var(--border); }
.report-body > .scroll:last-child { margin-bottom: calc(-1 * var(--card-pad)); }
.report-body > h3 { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-16); line-height: var(--lh-16); }
.report-body > :is(.hint, .warning-note, .rate-note, details.more) { margin: var(--s-4) 0 0; }
.statement-table { font-variant-numeric: tabular-nums; }
.statement-table :is(th, td):first-child { padding-left: var(--card-pad); }
.statement-table :is(th, td):last-child { padding-right: var(--card-pad); }
.statement-table th.num, .statement-table td.num { width: 1%; min-width: 150px; white-space: nowrap; }
.statement-table td:first-child { min-width: 220px; color: var(--text); }
.statement-table tr.sub-line > td:first-child { padding-left: calc(var(--card-pad) + var(--s-5)); }
.statement-table tr.account-row > td { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.statement-table tr.account-row > td:first-child { padding-left: calc(var(--card-pad) + var(--s-10)); }
.statement-table tr.is-zero > td { color: var(--text-3); }
.statement-table tr.total-row > td { font-weight: var(--fw-semibold); }
.statement-table tr.total-row > td .link-button { font-weight: var(--fw-semibold); }
.statement-table .inline-badge { margin-left: var(--s-2); vertical-align: 1px; }
/* The drill-down: the line's name is a quiet link with a chevron that turns when its accounts are shown. */
.link-button.drill { display: inline-flex; align-items: center; gap: 6px; color: var(--link); font-weight: var(--fw-medium); text-align: left; }
.link-button.drill::before { content: ""; flex: none; width: 14px; height: 14px; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; transition: transform var(--dur-2) var(--ease-out); }
.link-button.drill[aria-expanded="true"]::before { transform: rotate(90deg); }
.statement-table tr.total-row .link-button.drill { color: var(--text); }
.aged-table td, .aged-table th { white-space: nowrap; }
.aged-table th.num, .aged-table td.num { min-width: 112px; }
.rate-list { margin: var(--s-2) 0 0; padding-left: var(--s-5); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.rate-list li + li { margin-top: var(--s-1); }

/* ---- Trial balance, journals and audit history ----------------------------------------------------------------- */
.metrics.stat-strip.tb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trial-table td:first-child { min-width: 260px; }
#sub-trial-balance .columns { align-items: start; }
:is(#sub-trial-balance, #sub-journals) .report-sheet .scroll { margin: 0 calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); border-top: 1px solid var(--border); }
:is(#sub-trial-balance, #sub-journals) .report-sheet :is(th, td):first-child { padding-left: var(--card-pad); }
:is(#sub-trial-balance, #sub-journals) .report-sheet :is(th, td):last-child { padding-right: var(--card-pad); }
:is(#lock-card, #journal-card) form { margin-top: var(--s-2); }
#lock-card .hint { margin: 0; }
.pair-spacer { visibility: hidden; }
.journal-table td.date-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.journal-table td:last-child { color: var(--text-2); }
#sub-audit > .section-title { align-items: flex-end; }
.inline-select { display: flex; align-items: center; gap: var(--s-2); }
.inline-select > select { width: auto; min-width: 180px; }
/* Review of part 2 (V5): the audit history as a compact table, full bleed in its card. */
#sub-audit > .scroll { margin: var(--s-2) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); border-top: 1px solid var(--border); }
.audit-table :is(th, td):first-child { padding-left: var(--card-pad); }
.audit-table :is(th, td):last-child { padding-right: var(--card-pad); }
.audit-table td { font-size: var(--fs-13); line-height: var(--lh-13); vertical-align: top; }
.audit-table td.audit-when { width: 1%; color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.audit-table td.audit-what { min-width: 200px; color: var(--text); font-weight: var(--fw-medium); }
.audit-table td.audit-detail { min-width: 240px; color: var(--text-2); overflow-wrap: anywhere; }
.audit-table td.audit-by { width: 1%; color: var(--text-3); white-space: nowrap; }

/* ---- Accounts › Settings (2.9): the left menu on desktop and laptop; underlined tabs below 1024 px ------------------ */
.settings-menu > [data-sub]::before { content: ""; flex: none; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-journal) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-journal) center / contain no-repeat; }
.settings-menu > [data-sub="org-chart"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-branch); mask-image: url(/images.svg?v=fbc2034a9f49#i-branch); }
.settings-menu > [data-sub="report-settings"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.settings-menu > [data-sub="vat"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-scale); mask-image: url(/images.svg?v=fbc2034a9f49#i-scale); }
.settings-menu > [data-sub="invoice-settings"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-invoice); mask-image: url(/images.svg?v=fbc2034a9f49#i-invoice); }
@media (min-width: 1024px) {
  .settings-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 var(--s-6); align-items: start; }
  .settings-layout > .settings-menu {
    grid-column: 1;
    grid-row: 1 / span 12;
    position: sticky;
    top: calc(var(--bar-h) + var(--menu-h) + var(--s-4));
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: var(--s-2);
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--sh-1);
  }
  .settings-layout > :not(.settings-menu) { grid-column: 2; min-width: 0; }
  .settings-menu > [data-sub] { justify-content: flex-start; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-md); color: var(--text-2); text-align: left; white-space: normal; }
  .settings-menu > [data-sub]::before { background-color: var(--text-3); }
  .settings-menu > [aria-current="page"] { background: var(--selected); color: var(--text); box-shadow: inset 3px 0 0 var(--action); }
  .settings-menu > [aria-current="page"]::before { background-color: var(--action-soft-text); }
}
.settings-card > h2 { margin: 0; }
.settings-card > h2 + .muted { margin: var(--s-1) 0 var(--s-4); }
.settings-card > .hint:empty, .settings-card > p:empty { display: none; }
.settings-card > details.more { margin: calc(var(--s-2) * -1) 0 var(--s-4); }
.form-grid.settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.form-grid > .span-2 { grid-column: 1 / -1; }
/* Titled sections: the legend reads as a section heading, with a fine line above each section after the first. */
fieldset.form-section { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; }
fieldset.form-section > :not(legend) + :not(legend) { margin-top: var(--s-4); }
fieldset.form-section > legend { float: left; width: 100%; margin: 0 0 var(--s-3); padding: 0; color: var(--text); font: var(--fw-semibold) var(--fs-14) / var(--lh-14) var(--font); }
fieldset.form-section > legend + * { clear: both; }
fieldset.form-section + fieldset.form-section { padding-top: var(--s-5); border-top: 1px solid var(--divider); }
fieldset.form-section > details.more { margin-bottom: 0; }
/* One column that never grows past the card: a fold's long line must not widen the form on a phone. */
/* Review of part 2 (V27): the whole form (its sections, dividers, folds and actions) keeps one width, so a card has one
   right edge. */
.settings-card form { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.settings-card form > .form-actions { margin-top: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.settings-card .legal-note { margin: 0; }
#tax-status:empty { display: none; }

/* ---- The chart of accounts: a list card with its filters, density and phone cards -------------------------------- */
.chart-filters .toolbar-select { flex: 0 1 180px; }
.chart-filters .search-field { flex-basis: 260px; }
.coa-table td:is(:nth-child(3), :nth-child(6)) { white-space: nowrap; }
.chart-filters label.check { flex: none; min-height: var(--control-h); }
.list-card > .list-count { margin: 0; padding: 0 var(--card-pad) var(--s-3); }
.list-card > #chart-follow { margin: 0 var(--card-pad) var(--s-3); }
.coa-table td.account-code { color: var(--text-2); font-weight: var(--fw-medium); white-space: nowrap; font-variant-numeric: tabular-nums; }
.coa-table .account-code-tag { display: none; }
.coa-table .account-name { display: block; color: var(--text); font-weight: var(--fw-medium); }
.coa-table td:nth-child(2) { min-width: 320px; }
.coa-table td:nth-child(4) { min-width: 160px; }
.coa-table tr.is-off > td { color: var(--text-3); }
.coa-table tr.is-off .account-name { color: var(--text-2); }
/* One line of description under the name (review of part 2, V13), so the rows keep one height. */
.coa-table td .contact-address { max-width: 60ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#chart-add-card form { gap: var(--s-4); }
.org-chart-table td:is(:first-child, :nth-child(3), :last-child) { white-space: nowrap; }
.org-chart-table td:last-child { text-align: right; }
#org-link .notice { margin: 0 0 var(--s-3); }
#org-link ul { max-height: 280px; overflow: auto; margin: var(--s-3) 0 0; padding-left: var(--s-5); font-size: var(--fs-13); line-height: var(--lh-13); }

/* ---- Invoice settings and the logo: the logo beside the form on wide screens, with its drop zone ---------------- */
@media (min-width: 1280px) {
  #sub-invoice-settings { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--card-gap); align-items: start; }
  #sub-invoice-settings > .card { margin: 0; }
  #sub-invoice-settings .logo-card { position: sticky; top: calc(var(--bar-h) + var(--menu-h) + var(--s-4)); }
}
.logo-preview { display: grid; place-items: center; min-height: 120px; margin: 0 0 var(--s-4); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
.logo-preview > .hint { margin: 0; }
.logo-preview > #settings-logo { max-width: 100%; max-height: 120px; margin: 0; padding: 0; border: 0; border-radius: var(--r-sm); background: none; }
#logo-controls { display: grid; gap: var(--s-3); }
#logo-controls .form-actions { margin: 0; }
#logo-controls .file-chips { grid-template-columns: minmax(0, 1fr); }

/* ---- Dialogs (2.10, 11.14): two-column forms, errors inside the form, the actions in reach at every width -------- */
dialog .form-grid.two-col { gap: var(--s-4); }
dialog .form-grid .field-date { max-width: 220px; }
dialog form > :is(.form-error, .hint, .legal-note) { margin: 0; }
dialog > .muted { margin: 0 0 var(--s-4); }
dialog form > .dialog-section { margin: var(--s-2) 0 0; font-size: var(--fs-14); line-height: var(--lh-14); }
/* A long dialog keeps its action row, or its Close, at the foot while its body scrolls (on every width since L2.3). */
dialog > form > .form-actions:last-child { position: sticky; bottom: calc(var(--s-6) * -1); z-index: 1; margin-bottom: calc(var(--s-6) * -1); padding-bottom: var(--s-6); background: var(--surface-raised); }
dialog > button.secondary:last-child { display: block; margin-left: auto; position: sticky; bottom: calc(var(--s-6) * -1); z-index: 1; margin-top: var(--s-4); box-shadow: 0 var(--s-6) 0 var(--s-6) var(--surface-raised); }
#credit-lines { display: grid; border-top: 1px solid var(--divider); }
#credit-lines:empty { display: none; }
.credit-line { display: grid; grid-template-columns: minmax(0, 1fr) 140px; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--divider); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-regular); }
.credit-line-meta { color: var(--text-3); font-size: var(--fs-13); white-space: nowrap; font-variant-numeric: tabular-nums; }
.credit-line > input { text-align: right; font-variant-numeric: tabular-nums; }
#detail-dialog > .scroll { margin: var(--s-4) calc(-1 * var(--s-6)) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
:is(#detail-dialog, #send-dialog) > .scroll :is(th, td):first-child { padding-left: var(--s-6); }
:is(#detail-dialog, #send-dialog) > .scroll :is(th, td):last-child { padding-right: var(--s-6); }
#detail-dialog > .scroll tbody tr:last-child > td { border-bottom: 0; }
.detail-foot { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-6); align-items: start; margin-top: var(--s-4); }
.detail-foot > .hint { margin: 0; padding-top: 6px; }
.detail-foot > .hint:empty { display: none; }
.detail-foot > .doc-totals { grid-column: -2; }
#detail-context { margin-bottom: 0; }
/* Review of part 2 (V18): the sent history comes first, then the form with its one footer; the lone Close shows only when
   there is no form (history only, or after sending), and the receipts dialog's likewise. */
#send-dialog > h3 { margin: 0 0 var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); }
#send-dialog > .scroll { margin: 0 calc(-1 * var(--s-6)) var(--s-5); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
#send-dialog > .scroll tbody tr:last-child > td { border-bottom: 0; }
#send-form:not([hidden]) ~ #close-send, #attachment-form:not([hidden]) ~ #close-attachments-view { display: none; }
#send-dialog .form-actions { border-top: 0; padding-top: 0; }
#send-notice { margin: 0 0 var(--s-4); }

/* ---- Download CSV and Print as icon buttons at every width, with their names kept (review of part 2, V2: the page is
   capped at 1440 px, so the labelled buttons never had room) ---------------------------------------------------------- */
.report-buttons > :is(#report-csv, #report-print) { width: var(--control-h); padding: 0; justify-content: center; }
.report-buttons .button-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1279.98px) {
  .report-controls > label { width: 148px; }
  .report-controls > :is(.report-preset, #report-compare-field) { width: 180px; }
}

/* ---- Tablet, under 1024 px ------------------------------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  /* Statement tables with one or two figures fit the screen and their line names wrap; the aged reports scroll with the
     contact in view. */
  .scroll > table.statement-table:not(.aged-table) { min-width: 0; }
  .statement-table:not(.aged-table) td:first-child { min-width: 0; }
  .statement-table:not(.aged-table) :is(th, td).num { min-width: 112px; }
  /* Review of part 2 (RT2-1): a 1% figure column held at 112 px made the aged table 11,200 px wide here. */
  .aged-table :is(th, td).num { width: auto; }
  .settings-layout > .settings-menu { margin-bottom: var(--s-5); }
  .detail-foot { grid-template-columns: minmax(0, 1fr); }
  .detail-foot > .doc-totals { grid-column: auto; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .metrics.stat-strip.tb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-filters .toolbar-select { flex: 1 1 160px; }
}

/* ---- Phone, under 768 px -------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  form.report-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .report-controls > :is(label, .report-preset, #report-compare-field) { width: auto; }
  .report-controls > :is(.report-preset, #report-compare-field, #report-country-field, .report-buttons) { grid-column: 1 / -1; }
  #report-from-field[hidden] + label { grid-column: 1 / -1; }
  .report-buttons { margin-left: 0; }
  .report-buttons > #report-show { flex: 1 1 auto; }
  .report-buttons > #report-show[hidden] + * { margin-left: auto; }
  .report-sheet > .section-title { gap: var(--s-1); }
  .statement-table:not(.aged-table) :is(th, td).num { min-width: 0; padding-left: var(--s-2); }
  .statement-table td:first-child { overflow-wrap: anywhere; }
  .statement-table tr.sub-line > td:first-child { padding-left: calc(var(--card-pad) + var(--s-3)); }
  .statement-table tr.account-row > td:first-child { padding-left: calc(var(--card-pad) + var(--s-6)); }
  .metrics.stat-strip.tb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics.stat-strip.tb-tiles strong { font-size: var(--fs-16); line-height: var(--lh-16); }
  .trial-table td:first-child { min-width: 0; }
  /* The aged reports scroll sideways: the contact column gives way so the first figures show beside it. */
  .aged-table :is(th, td):first-child { width: 168px; min-width: 168px; max-width: 168px; white-space: normal; }
  .aged-table :is(th, td).num { width: auto; min-width: 96px; }
  #sub-audit > .section-title { align-items: stretch; }
  .inline-select { flex-wrap: wrap; width: 100%; }
  .inline-select > select { flex: 1 1 auto; }
  .form-grid.settings-grid { grid-template-columns: minmax(0, 1fr); }
  .chart-filters .toolbar-select { flex: 1 1 calc(50% - var(--s-3)); }
  .chart-filters label.check { flex: 1 1 100%; }
  .coa-table .account-code-tag { display: inline; margin-right: var(--s-2); color: var(--text-3); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
  .coa-table .account-name { display: inline; }
  .coa-table td:is(:nth-child(2), :nth-child(4)) { min-width: 0; }
  /* A phone card is the code, the name and its category: the description leaves the card (review of part 2, RT2-8). */
  .coa-table td .contact-address { display: none; }
  .settings-card form > .form-actions { border-top: 0; padding-top: 0; }
  .credit-line { grid-template-columns: minmax(0, 1fr) 112px; }
  .credit-line-meta { white-space: normal; }
  :is(#detail-dialog, #send-dialog) > .scroll { margin-inline: calc(-1 * var(--s-4)); }
  :is(#detail-dialog, #send-dialog) > .scroll :is(th, td):first-child { padding-left: var(--s-4); }
  :is(#detail-dialog, #send-dialog) > .scroll :is(th, td):last-child { padding-right: var(--s-4); }
}

/* ---- Touch: 44 px targets (9) ---------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .report-periods { height: var(--target); }
  .settings-menu > [data-sub] { min-height: var(--target); }
  .report-buttons > :is(#report-csv, #report-print) { width: var(--target); }
}

/* ---- Reduced motion and forced colours ------------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .link-button.drill::before { transition: none; }
}
@media (forced-colors: active) {
  .icon-print::before, .link-button.drill::before, .settings-menu > [data-sub]::before { forced-color-adjust: none; background-color: CanvasText; }
  .settings-menu > [aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}

/* ---- Print (11.24): a report prints as a document, light, with the logo, the company and the period --------------- */
@media print {
  main > header::before { content: ""; display: block; width: 124px; height: 32px; margin: 0 0 var(--s-2); background: url(/images.svg?v=fbc2034a9f49#logo-ink) left center / 124px 32px no-repeat; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  main:has(#reports-panel:not([hidden])) > header { margin: 0 0 var(--s-1); }
  main:has(#reports-panel:not([hidden])) > header > div { display: none; }
  .print-only { display: block; }
  .report-company { margin: 0 0 var(--s-4); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
  .accounting-nav, .report-toolbar, .report-sheet details.more, .inline-select, .settings-menu { display: none !important; }
  .report-sheet { margin: 0 0 var(--s-4); padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .report-sheet > .section-title { margin: 0 0 var(--s-3); }
  .report-sheet h2 { font-size: var(--fs-20); line-height: var(--lh-20); }
  .report-body > .scroll, :is(#sub-trial-balance, #sub-journals) .report-sheet .scroll { margin: 0; overflow: visible; border-top: 1px solid var(--border-strong); }
  .statement-table { font-size: 10.5pt; line-height: 1.35; }
  .statement-table :is(th, td) { height: auto; padding-block: 3px; }
  .statement-table :is(th, td):first-child { padding-left: 0; }
  .statement-table :is(th, td):last-child { padding-right: 0; }
  .statement-table :is(tr.total-row > td, tfoot td) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .link-button.drill { color: var(--text); }
  .link-button.drill::before { display: none; }
  .tb-tiles { box-shadow: none; }
}

/* ==== Payroll (L2.4; DESIGN_SYSTEM.md 18, row 2.12, and 11.4 to 11.9, 11.16 to 11.20) ================================== */
/* The run as a document: a stepper from its status, stat tiles with the change against the month before, the lines with
   a totals row, the "Before you approve" checklist, the approval trail, the month's statutory payments and its files beside
   them, and the run's actions in a sticky bar. Employees as a list with tabs, avatars, tags and a row menu; Setup as titled
   sections; the CSV and register imports as drop zones; the privacy note as one quiet line with a fold. */

/* ---- Icons on buttons and links -------------------------------------------------------------------------------------- */
:is(.icon-refresh, .icon-check, .back-link)::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-refresh) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-refresh) center / contain no-repeat; }
.icon-check::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-check); mask-image: url(/images.svg?v=fbc2034a9f49#i-check); }
.back-link::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-left); mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-left); }
a.text-link.icon-download { display: inline-flex; align-items: center; gap: 6px; }
.payslip-link::after { content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-external) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-external) center / contain no-repeat; }
/* Show beside a masked value carries the eye (13); the pinned word "Show" stays the button's text. */
.masked-field > button::before { content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-eye) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-eye) center / contain no-repeat; }
.empty-state[data-art="empty-payroll"]::before { background-image: url(/illustrations/empty-payroll.svg?v=fbc2034a9f49); }
.empty-state[data-art="empty-people"]::before { background-image: url(/illustrations/empty-people.svg?v=fbc2034a9f49); }

/* ---- The page: the company bar gives way to the shell's; the privacy note is one quiet line with a fold ------------- */
body[data-app="payroll"].shell-has-company #company-bar { display: none; }
.page-legal { display: grid; gap: var(--s-1); margin: var(--s-6) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.page-legal > * { margin: 0; }

/* ---- Switched off, and set up: one centred card with the payslip art -------------------------------------------------- */
.setup-card { display: grid; justify-items: center; gap: var(--s-3); max-width: 720px; margin: var(--s-6) auto; padding: var(--s-10) var(--s-8); text-align: center; }
.setup-card[hidden] { display: none; }
.setup-card > * { margin: 0; }
.setup-card > h2 { font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); }
.setup-card > .muted { max-width: 62ch; color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-14); }
.setup-card > .warning-note { text-align: left; }
.setup-art { width: 120px; height: 120px; border-radius: var(--r-full); background: var(--illus-halo) url(/illustrations/empty-payroll.svg?v=fbc2034a9f49) center / 100px auto no-repeat; }

/* ---- Setup: the statutory form in titled sections, the accounts beside it, the components list ------------------------ */
.setup-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--card-gap); align-items: start; margin: 0 0 var(--card-gap); }
.setup-layout > .card { margin: 0; }
.setup-layout > .settings-card { grid-column: 1; grid-row: 1; }
.setup-layout > .accounts-card { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--bar-h) + var(--menu-h) + var(--s-4)); }
.accounts-card > h2 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.accounts-status { position: relative; margin: var(--s-3) 0; padding-left: 24px; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.accounts-status::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; background-color: var(--success-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check-circle) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check-circle) center / contain no-repeat; }
.accounts-status.is-missing::before { background-color: var(--warning-text); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); }
.accounts-status:empty { display: none; }
.settings-card fieldset.form-section > .hint { margin-bottom: 0; }
details.advanced-fold { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
details.advanced-fold > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-semibold); list-style: none; }
details.advanced-fold > summary::-webkit-details-marker { display: none; }
details.advanced-fold > summary::after { content: ""; flex: none; width: 16px; height: 16px; margin-left: auto; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; transition: transform var(--dur-2) var(--ease-out); }
details.advanced-fold[open] > summary::after { transform: rotate(180deg); }
details.advanced-fold > summary:focus-visible { outline-offset: -2px; }
.advanced-body { display: grid; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }
.advanced-body > .hint { margin: 0; overflow-wrap: anywhere; }
.advanced-body textarea { font-family: var(--font-mono); font-size: var(--fs-13); line-height: var(--lh-13); }
.list-card > details.list-more { margin: 0 var(--card-pad) var(--s-3); }
/* The components, compare and bonus tables are compact (11.4), with the first column in view while they scroll sideways. */
.components-table :is(th, td), .compare-table :is(th, td), .bonus-table :is(th, td) { height: 36px; padding-block: var(--s-1); font-size: var(--fs-13); line-height: var(--lh-13); white-space: nowrap; }
.components-table td.component-code { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.components-table td.component-name { color: var(--text); }
.components-table td.is-no, .components-table tr.is-off > td { color: var(--text-3); }
:is(.components-table, .compare-table, .bonus-table) > :is(thead, tbody, tfoot) > tr > :first-child { position: sticky; left: 0; z-index: 1; background-color: var(--surface); }
:is(.components-table, .compare-table, .bonus-table) > thead > tr > th:first-child { z-index: calc(var(--z-sticky) + 1); background-color: var(--surface-sunken); }
:is(.components-table, .compare-table, .bonus-table) > tbody > tr:hover > :first-child { background-color: var(--surface-hover); }
:is(.components-table, .compare-table, .bonus-table) > tbody > tr:is(.empty-row, .empty-line) > td:first-child { position: static; }

.tag.tone-info { background: var(--info-bg); color: var(--info-text); }
.tag.tone-danger { background: var(--danger-bg); color: var(--danger-text); }

/* ---- People: avatars and the person cell ----------------------------------------------------------------------------- */
.avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-full); background: var(--avatar-t1-bg); color: var(--avatar-t1-text); font-size: var(--fs-12); line-height: 1; font-weight: var(--fw-semibold); vertical-align: middle; }
.avatar::before { content: attr(data-initials); }
.avatar-t2 { background: var(--avatar-t2-bg); color: var(--avatar-t2-text); }
.avatar-t3 { background: var(--avatar-t3-bg); color: var(--avatar-t3-text); }
.avatar-t4 { background: var(--avatar-t4-bg); color: var(--avatar-t4-text); }
.avatar-t5 { background: var(--avatar-t5-bg); color: var(--avatar-t5-text); }
.avatar-t6 { background: var(--avatar-t6-bg); color: var(--avatar-t6-text); }
.avatar.avatar-empty { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
td.person-cell { white-space: nowrap; }
td.person-cell > .avatar { margin-right: var(--s-3); }
.person-body { display: inline-grid; vertical-align: middle; white-space: normal; }
.person-name { color: var(--text); font-weight: var(--fw-medium); }
.person-sub { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-variant-numeric: tabular-nums; }

/* ---- Employees: tabs, the search and Show on this screen, the list -------------------------------------------------- */
.employees-card .list-toolbar #employees-summary { margin: 0; }
#employees-summary:empty { display: none; }
#employees-tools .show-all { margin: 0; }
#employees-tools .show-all > .hint:empty { display: none; }
.employees-table td.employee-code { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.employees-table td:nth-child(3) { min-width: 150px; }
.employees-table td.num .masked-field { justify-content: flex-end; }
.employees-table td.badges { min-width: 180px; }
.employees-table td.badges > :is(.tag, .status-badge) { margin: 2px 4px 2px 0; }
@media (min-width: 1024px) { .employees-table .person-sub { display: none; } }

/* ---- Imports: the drop zones, Paste instead, the result ------------------------------------------------------------- */
#profiles-import-card > .section-title { align-items: center; }
#profiles-import-card > .section-title > .text-link { flex: none; font-size: var(--fs-13); line-height: var(--lh-13); }
#profiles-import-card > details.more { margin: calc(var(--s-2) * -1) 0 var(--s-4); }
:is(#profiles-picked, #zoho-picked) { margin: var(--s-3) 0 0; }
#profiles-form { gap: var(--s-3); margin-top: var(--s-4); }
#profiles-form > .form-actions, #zoho-form > .form-actions { justify-content: flex-start; }
details.paste-fold > summary { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--link); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); list-style: none; }
details.paste-fold > summary::-webkit-details-marker { display: none; }
details.paste-fold > summary::after { content: ""; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; transition: transform var(--dur-2) var(--ease-out); }
details.paste-fold[open] > summary::after { transform: rotate(180deg); }
details.paste-fold > label { margin-top: var(--s-3); }
details.paste-fold textarea { font-family: var(--font-mono); font-size: var(--fs-13); line-height: var(--lh-13); }
.import-result { display: grid; gap: var(--s-2); margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.import-result:empty { display: none; }
.import-result > p { margin: 0; }
.import-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--card-gap); align-items: start; margin: 0 0 var(--card-gap); }
.import-layout > .card { margin: 0; }
#zoho-form { gap: var(--s-3); margin-top: var(--s-4); }
.imports-table td.file-cell { min-width: 160px; overflow-wrap: anywhere; }
.list-toolbar > .inline-form { margin: 0; }
.list-toolbar > .inline-form .bare { gap: var(--s-2) var(--s-3); }
.list-toolbar > .inline-form label { min-width: 150px; }
.compare-summary { margin: 0; padding: 0 var(--card-pad) var(--s-3); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.compare-summary:empty { display: none; }
.compare-table td.compare-cell span { line-height: var(--lh-13); }
.compare-table td.compare-cell span:not(.diff, .same) { color: var(--text-3); }
.compare-table td:last-child { min-width: 260px; white-space: normal; }
/* Before a comparison there is nothing to head: the table shows once it has rows. */
.compare-card > .scroll:has(> table > tbody:empty) { display: none; }
/* A compact table that holds only its empty state shows it at the card's width, without the headings it has no rows for. */
.scroll > table:is(.components-table, .bonus-table):has(> tbody > tr.empty-row) { min-width: 0; }
:is(.components-table, .bonus-table):has(> tbody > tr.empty-row) > thead { display: none; }

/* ---- Payroll runs: the list; an open run takes its place ------------------------------------------------------------- */
.runs-head { align-items: flex-start; flex-wrap: wrap; }
.runs-head #run-form { margin: 0; }
.runs-head #run-form .bare { flex-wrap: nowrap; }
.runs-head #run-form label { min-width: 0; width: 180px; }
#runs-accounts-note { margin: 0 var(--card-pad) var(--s-3); }
.runs-table td.run-month { color: var(--text); font-weight: var(--fw-semibold); white-space: nowrap; }
.run-detail { display: grid; gap: var(--card-gap); }
.run-detail[hidden] { display: none; }
.run-detail > *, .run-layout .card { margin: 0; }
.run-head { display: grid; gap: var(--s-1); }
.run-head > p { margin: 0; max-width: 92ch; }
.run-head > p:empty { display: none; }
.back-link { justify-self: start; min-height: 32px; padding-inline: 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.run-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.run-title-row h2 { margin: 0; font: var(--fw-semibold) var(--fs-24) / var(--lh-24) var(--font-display); }
.run-access { position: relative; padding-left: 22px; }
.run-access::before { content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-lock) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-lock) center / contain no-repeat; }

/* ---- The run stepper: Inputs, Calculate, Check, Approve, Release ----------------------------------------------------- */
.run-progress { padding: var(--s-5) var(--s-6); }
.run-progress[hidden] { display: none; }
.run-stepper { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.run-stepper > li { position: relative; display: grid; align-content: start; gap: var(--s-2); min-width: 0; padding-right: var(--s-4); }
.run-stepper > li::after { content: ""; position: absolute; top: 13px; left: 38px; right: var(--s-2); height: 2px; border-radius: 1px; background: var(--border); }
.run-stepper > li:last-child::after { display: none; }
.run-stepper > li[data-state="done"]::after { background: var(--action); }
.step-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--border-strong); border-radius: var(--r-full); background: var(--surface); color: var(--text-3); font-size: var(--fs-12); line-height: 1; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.run-stepper > li[data-state="done"] .step-mark { border-color: var(--action); background: var(--action); color: transparent; font-size: 0; }
.run-stepper > li[data-state="done"] .step-mark::before { content: ""; width: 14px; height: 14px; background-color: var(--action-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.run-stepper > li[data-state="current"] .step-mark { border-color: var(--warning-dot); color: var(--warning-text); box-shadow: 0 0 0 4px var(--warning-bg); }
.step-body { display: grid; gap: 2px; min-width: 0; }
.step-name { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.run-stepper > li[data-state="todo"] .step-name { color: var(--text-2); font-weight: var(--fw-medium); }
.run-stepper > li[data-state="current"] .step-name { color: var(--warning-text); }
.step-note { overflow: hidden; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); text-overflow: ellipsis; white-space: nowrap; }
#run-stepper-compact { margin: var(--s-2) 0 0; }

/* ---- Stat tiles: the run's five figures; the change against the month before; every total in a fold ---------------- */
#run-totals.stat-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; }
#run-totals:empty { display: none; }
#run-totals > article.card { padding: var(--s-4) var(--s-5); }
#run-totals strong { font-size: var(--fs-24); line-height: var(--lh-24); }
.tile-change { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.tile-change:is(.is-up, .is-down)::before { content: ""; flex: none; width: 12px; height: 12px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-arrow-up) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-arrow-up) center / contain no-repeat; }
.tile-change.is-down::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-down); mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-down); }
.run-figures-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-top: calc(var(--card-gap) / -2); }
.run-figures-foot > * { margin: 0; }
#run-compared:empty { display: none; }
#run-totals-more { margin-left: auto; }
#run-totals-more[open] { flex: 1 1 100%; }
#run-totals-more > dl.totals-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--s-6); max-width: none; margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.totals-list > div { display: flex; justify-content: space-between; gap: var(--s-3); padding: 6px 0; border-bottom: 1px solid var(--divider); }
.totals-list dt { color: var(--text-2); }
.totals-list dd { margin: 0; color: var(--text); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; text-align: right; }

/* ---- The run's lines, the checklist, the trail, dues and files --------------------------------------------------------- */
.run-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); align-items: start; }
.run-main, .run-side { display: grid; align-content: start; gap: var(--card-gap); min-width: 0; }
/* The lines take the full width (eleven columns) at every width, and the side cards sit under them, side by side (review
   of part 2, V1: the page is capped at 1440 px, so a side column beside the lines left the table no room on any screen). */
.run-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.run-lines-card > .list-head h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.run-table :is(td, th) { padding-inline: var(--s-3); white-space: nowrap; font-size: var(--fs-13); line-height: var(--lh-13); font-variant-numeric: tabular-nums; }
.run-table td.person-cell { min-width: 200px; }
.run-table td.badges { min-width: 170px; white-space: normal; }
.run-table td.num { color: var(--text); font-weight: var(--fw-semibold); }
.run-table tfoot td.total-label { white-space: nowrap; }
.run-table td.action-buttons { text-align: right; white-space: nowrap; }
/* The employee stays in view while the eleven columns scroll sideways (a laptop at 1024 px, a tablet). */
@media (min-width: 768px) {
  .run-table > :is(thead, tbody, tfoot) > tr > :first-child { position: sticky; left: 0; z-index: 1; background-color: var(--surface); }
  .run-table > thead > tr > th:first-child { z-index: calc(var(--z-sticky) + 1); background-color: var(--surface-sunken); }
  .run-table > tfoot > tr > td:first-child { background-color: var(--surface-sunken); }
  .run-table > tbody > tr:hover > td:first-child { background-color: var(--surface-hover); }
  /* Review of part 2 (V1): the actions stay in view on the right while the figures scroll between the two. */
  .run-table > :is(thead, tbody, tfoot) > tr > :last-child { position: sticky; right: 0; z-index: 1; background-color: var(--surface); box-shadow: inset 1px 0 0 var(--divider); }
  .run-table > thead > tr > th:last-child { z-index: calc(var(--z-sticky) + 1); background-color: var(--surface-sunken); }
  .run-table > tfoot > tr > td:last-child { background-color: var(--surface-sunken); }
  .run-table > tbody > tr:hover > td:last-child { background-color: var(--surface-hover); }
  .run-table > tbody > tr.empty-row > td { position: static; box-shadow: none; }
}
.side-card > h3 { margin: 0 0 var(--s-3); }
.side-head > h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
#run-warnings-count:empty { display: none; }
.warning-list.check-list { display: grid; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.check-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--divider); }
.check-item:first-child { padding-top: 0; border-top: 0; }
.check-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-md); background: var(--warning-bg); color: var(--warning-text); }
.check-icon::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-warning) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-warning) center / contain no-repeat; }
.check-item.is-danger .check-icon { background: var(--danger-bg); color: var(--danger-text); }
.check-item.is-info .check-icon { background: var(--info-bg); color: var(--info-text); }
.check-item.is-info .check-icon::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-info); mask-image: url(/images.svg?v=fbc2034a9f49#i-info); }
.check-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.check-text > strong { color: var(--text); font-weight: var(--fw-semibold); }
.check-item > .tag { margin-top: 2px; }
.check-empty { display: flex; align-items: center; gap: var(--s-2); color: var(--text-3); }
.check-empty.is-clear { color: var(--success-text); }
.check-empty.is-clear::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check-circle) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check-circle) center / contain no-repeat; }
/* The approval trail (11.20, from direction C): vertical in the side column, done in the action colour, waiting ringed. */
#run-actors.trail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.trail-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s-3); padding-bottom: var(--s-4); }
.trail-step:last-child { padding-bottom: 0; }
.trail-step:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 36px; bottom: 4px; border-left: 2px solid var(--action); }
.trail-step[data-state="current"]:not(:last-child)::after, .trail-step[data-state="todo"]:not(:last-child)::after { border-left: 2px dashed var(--border-strong); }
.trail-step > .avatar { grid-row: 1 / span 2; }
/* Review of part 2 (V22): a done step is a solid check (as the run stepper draws it), a step to do a neutral dot, and only
   the step waiting has the warning ring; the person is named beside each. */
.trail-step[data-state="done"] > .avatar { background: var(--action); color: var(--action-text); }
.trail-step:is([data-state="done"], [data-state="todo"]) > .avatar::before { content: none; }
.trail-step[data-state="done"] > .avatar::after { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.trail-step[data-state="todo"] > .avatar { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.trail-step[data-state="todo"] > .avatar::after { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--border-strong); }
.trail-step[data-state="current"] > .avatar { box-shadow: inset 0 0 0 2px var(--warning-dot), 0 0 0 3px var(--warning-bg); }
.trail-step > dt { margin: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.trail-step > dd { margin: 2px 0 0; color: var(--text); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.trail-step[data-state="current"] > dd { color: var(--warning-text); font-weight: var(--fw-semibold); }
.trail-step[data-state="todo"] > dd { color: var(--text-3); font-weight: var(--fw-regular); }
#run-duty { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
#run-duty:empty { display: none; }
#run-duty .warning-note { margin: 0; }
.dues-card .side-facts dt { display: grid; justify-items: start; gap: 2px; }
.dues-card .side-facts dt .status-badge { margin-top: 2px; }
.dues-card .side-facts > div:first-child { border-top: 0; padding-top: 0; }
.dues-card > .legal-note { margin: var(--s-3) 0 0; }
.files-card > .hint { margin: 0 0 var(--s-3); }
#run-files.file-buttons { display: grid; gap: var(--s-2); margin: 0; }
#run-files > button { justify-content: flex-start; width: 100%; }
#run-files > .hint { margin: 0; }
/* Correcting a run is rare and undoes postings, so it waits in a closed fold under the run's cards. */
details.run-correction { padding: 0; }
details.run-correction > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: 0 var(--card-pad); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); list-style: none; }
details.run-correction > summary::-webkit-details-marker { display: none; }
details.run-correction > summary::after { content: ""; flex: none; width: 16px; height: 16px; margin-left: auto; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; transition: transform var(--dur-2) var(--ease-out); }
details.run-correction[open] > summary { border-bottom: 1px solid var(--divider); }
details.run-correction[open] > summary::after { transform: rotate(180deg); }
details.run-correction > summary:focus-visible { outline-offset: -2px; }
details.run-correction > .hint { margin: var(--s-4) var(--card-pad) 0; max-width: 92ch; }
details.run-correction > form { margin: var(--s-4) var(--card-pad) var(--card-pad); }
#run-history-block > h3 { margin: 0 0 var(--s-2); font-size: var(--fs-16); line-height: var(--lh-16); }
.warning-list.history-list { display: grid; gap: var(--s-2); margin: 0; padding-left: var(--s-5); line-height: var(--lh-13); }

/* ---- The run's actions: one sticky bar, showing only the step the run is at (11.19) ---------------------------------- */
#run-action-bar.run-actions { position: sticky; bottom: var(--s-3); z-index: var(--z-actionbar); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-end; gap: var(--s-3); min-height: 64px; margin: 0; padding: var(--s-3) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-2); }
#run-action-bar[hidden] { display: none; }
#run-action-bar:not([data-step="prepare"]) > :is(#compute-set, #approve-set), #run-action-bar:not([data-step="post"]) > #post-form, #run-action-bar:not([data-step="pay"]) > #run-pay-open { display: none; }
/* Review of part 2 (V9): the payment date and reference are in their own dialog, so the bar stays one row. */
#run-action-bar > #run-pay-open { align-self: center; }
#pay-dialog fieldset.pay-fields { display: grid; gap: var(--s-4); margin: 0; }
#pay-dialog .legal-note, #pay-dialog .form-error { margin: 0; }
.run-next { align-self: center; margin: 0 auto 0 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
#run-action-bar > fieldset { margin: 0; }
#run-action-bar > form { display: grid; justify-items: end; gap: var(--s-2); margin: 0; }
#run-action-bar > form > .hint.scope-banner { justify-self: end; }
#run-action-bar > form .bare { flex-wrap: nowrap; gap: var(--s-3); }
#run-action-bar > form label { min-width: 0; width: 164px; }

/* ---- Bonus ----------------------------------------------------------------------------------------------------------- */
.bonus-card .list-toolbar { padding-top: 0; }
.bonus-checks { padding: 0 var(--card-pad) var(--s-3); }
.bonus-table td input:not([type="checkbox"]) { width: 120px; min-height: var(--row-btn-h); padding-block: 4px; text-align: right; font-variant-numeric: tabular-nums; }
.bonus-table td.is-strong { color: var(--text); font-weight: var(--fw-semibold); }
.bonus-table td:last-child { min-width: 240px; white-space: normal; color: var(--text-2); }
.card-foot.bonus-apply { gap: var(--s-2); padding: var(--s-5) var(--card-pad); }
.bonus-apply > h3 { font-size: var(--fs-14); line-height: var(--lh-14); }
.bonus-apply > form { margin-top: var(--s-2); }

/* ---- Statutory and HMRC: payments recorded as rows, due dates as legal notes ----------------------------------------- */
.form-actions.start { justify-content: flex-start; }
:is(#tab-statutory, #tab-hmrc) .card > form { margin-top: var(--s-4); }
:is(#tab-statutory, #tab-hmrc) .card > details.more { margin: calc(var(--s-2) * -1) 0 var(--s-4); }
:is(#tab-statutory, #tab-hmrc) .card > .form-actions { margin-top: var(--s-4); }
:is(#tab-statutory, #tab-hmrc) .card > .legal-note { margin: var(--s-4) 0 0; }
.due-line { margin: 0; }
.due-line:empty { display: none; }
.hmrc-note { margin: 0 0 var(--s-4); }
.remittance-list:empty { display: none; }
.remit-title { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); }
.remit-items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.remit-item { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--divider); }
.remit-what { display: grid; gap: 2px; min-width: 0; }
.remit-what > strong { color: var(--text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-semibold); }
.remit-meta { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); overflow-wrap: anywhere; }
.remit-amount { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- The payroll dialogs: titled sections, the privacy note quiet, Show above the form ------------------------------ */
dialog > .legal-note { margin: 0 0 var(--s-4); }
dialog > details.more { margin: calc(var(--s-2) * -1) 0 var(--s-4); }
.profile-show { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.profile-show:empty, #profile-bank-change:empty, #uk-profile-bank-change:empty { display: none; }
.profile-show > .hint { margin: 0; }
dialog form > fieldset.form-section { margin: var(--s-2) 0 0; }
dialog form > fieldset.form-section + fieldset.form-section { padding-top: var(--s-4); }
dialog form > fieldset.form-section > details.more { margin-top: var(--s-3); }
#structure-mode-hint:empty { display: none; }

/* ---- Laptop, under 1280 px: the side columns drop below ------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .setup-layout { grid-template-columns: minmax(0, 1fr); }
  .setup-layout > .accounts-card { grid-column: 1; grid-row: auto; position: static; }
  #run-totals > article.card { padding: var(--s-3) var(--s-4); }
  #run-totals strong { font-size: var(--fs-20); line-height: var(--lh-20); }
}
/* ---- Tablet, under 1024 px -------------------------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .import-layout { grid-template-columns: minmax(0, 1fr); }
  #run-totals.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #run-totals > .tile-cost { grid-column: 1 / -1; }
  .run-progress { padding: var(--s-4); }
  .step-note { white-space: normal; }
  #run-action-bar.run-actions { bottom: 0; }
}
/* ---- Phone, under 768 px -------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  .setup-card { padding: var(--s-6) var(--s-4); }
  .runs-head #run-form, .runs-head #run-form .bare { width: 100%; }
  .runs-head #run-form .bare { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .runs-head #run-form label { width: auto; }
  .run-title-row h2 { font-size: var(--fs-20); line-height: var(--lh-20); }
  /* The stepper as "Step 4 of 5 · Approve" over a segmented line (11.18). */
  .run-stepper { gap: 4px; }
  .run-stepper > li { padding: 0; gap: 0; }
  .run-stepper > li::after { display: none; }
  .run-stepper .step-mark, .run-stepper > li[data-state] .step-mark { width: auto; height: 4px; border: 0; border-radius: 2px; background: var(--border); box-shadow: none; font-size: 0; }
  .run-stepper > li[data-state="done"] .step-mark { background: var(--action); }
  .run-stepper > li[data-state="done"] .step-mark::before { display: none; }
  .run-stepper > li[data-state="current"] .step-mark { background: var(--warning-dot); }
  .run-stepper .step-body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  #run-stepper-compact { display: block; margin: 0 0 var(--s-2); }
  .run-progress { display: flex; flex-direction: column-reverse; }
  #run-totals strong { font-size: var(--fs-16); line-height: var(--lh-16); }
  .run-figures-foot { margin-top: 0; }
  #run-totals-more { margin-left: 0; }
  .run-side { grid-template-columns: minmax(0, 1fr); }
  .run-table td.person-cell { min-width: 0; }
  .run-table td.person-cell > .avatar { width: 28px; height: 28px; margin-right: var(--s-2); }
  table.cards-on-phone > tfoot > tr > td.col-hide-phone { display: none; }
  .run-table td.action-buttons { text-align: left; }
  /* The action bar sits above the bottom menu, full width, its fields side by side and the button under them. */
  #run-action-bar.run-actions { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); display: flex; margin: 0 calc(var(--page-pad) * -1); padding: var(--s-3) var(--s-4); border-width: 1px 0 0; border-radius: 0; }
  html.shell-typing #run-action-bar.run-actions { bottom: 0; }
  .run-next { flex: 1 1 100%; }
  #run-action-bar > fieldset { flex: 1 1 0; }
  #run-action-bar > fieldset > button { width: 100%; }
  #run-action-bar > form { flex: 1 1 100%; justify-items: stretch; }
  #run-action-bar > form > .hint.scope-banner { justify-self: start; }
  #run-action-bar > form .bare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #run-action-bar > form .bare > button { grid-column: 1 / -1; }
  :is(#run-action-bar > form, .list-toolbar > .inline-form) .bare > label:only-of-type { grid-column: 1 / -1; }
  #run-action-bar > form label { width: auto; }
  #run-action-bar > #run-pay-open { flex: 1 1 100%; }
  .list-toolbar > .inline-form, .list-toolbar > .inline-form .bare { width: 100%; }
  .list-toolbar > .inline-form .bare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .list-toolbar > .inline-form .bare > button { grid-column: 1 / -1; }
  .list-toolbar > .inline-form label { min-width: 0; }
  .employees-card .list-toolbar #employees-tools { flex: 1 1 100%; }
  .check-item { grid-template-columns: 28px minmax(0, 1fr); }
  .check-icon { width: 28px; height: 28px; }
  .check-item > .tag { grid-column: 2; justify-self: start; margin: 0; }
  .remit-item { align-items: flex-start; }
  #profiles-import-card > .section-title { flex-direction: column; align-items: flex-start; }
  .bonus-apply .inline-form .bare { display: grid; grid-template-columns: minmax(0, 1fr); }
}
/* ---- Phones on their side: a shorter action bar (9) ------------------------------------------------------------------ */
@media (max-height: 500px) and (orientation: landscape) {
  #run-action-bar.run-actions { min-height: 52px; padding-block: var(--s-2); }
  #run-action-bar > form > .hint.scope-banner { display: none; }
}
/* ---- Touch: 44 px targets (9) ---------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  details.advanced-fold > summary, details.paste-fold > summary, details.run-correction > summary { min-height: var(--target); }
  .back-link { min-height: var(--target); }
  .bonus-table td input:not([type="checkbox"]) { min-height: var(--target); }
}
@media (prefers-reduced-motion: reduce) {
  details.advanced-fold > summary::after, details.paste-fold > summary::after, details.run-correction > summary::after { transition: none; }
}
@media (forced-colors: active) {
  :is(.icon-refresh, .icon-check, .back-link, .masked-field > button, .run-access, .accounts-status, .check-icon, .check-empty.is-clear, .tile-change, .step-mark)::before,
  .payslip-link::after, details.run-correction > summary::after, details.advanced-fold > summary::after, details.paste-fold > summary::after, .trail-step[data-state="done"] > .avatar::after { forced-color-adjust: none; background-color: CanvasText; }
  .run-stepper > li[data-state="current"] .step-mark, .trail-step[data-state="current"] > .avatar { outline: 2px solid CanvasText; }
  .avatar { border: 1px solid CanvasText; }
}
@media print {
  #run-action-bar, .back-link, .run-correction, #run-dues-record, details.advanced-fold, .page-legal details { display: none !important; }
  .run-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ==== Work Management and People Management (L2.5; DESIGN_SYSTEM.md 18, rows 3.1 and 3.2, and 11.4 to 11.9, 11.14, 11.17) ==== */
/* The jobs as a list with stage pills and a progress line against the budget; a job's own view (tiles, time entries,
   billing); the four job forms as dialogs. People & costs in sections with compact tables, the directory as people rows,
   the overhead accounts as a grouped checklist; Leave & holidays with request cards, the month's roster, the allowances,
   team cards with day chips and the holiday calendar. */

/* ---- Icons on buttons, and the new empty-state art (14) ---------------------------------------------------------------- */
:is(.icon-clock, .icon-calendar, .roster-prev, .roster-next)::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-clock) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-clock) center / contain no-repeat; }
.icon-calendar::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.roster-prev::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-left); mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-left); }
.roster-next::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-left); mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-left); transform: scaleX(-1); }
.empty-state[data-art="empty-jobs"]::before { background-image: url(/illustrations/empty-jobs.svg?v=fbc2034a9f49); }
.empty-state[data-art="empty-leave"]::before { background-image: url(/illustrations/empty-leave.svg?v=fbc2034a9f49); }
.empty-state[data-art="empty-companies"]::before { background-image: url(/illustrations/empty-companies.svg?v=fbc2034a9f49); }

/* ---- The scope banner (12.3): not shown where the bar already shows the same company; it stays for screen readers ------ */
body:is([data-app="jobs"], [data-app="people"]).shell-has-company .hint.scope-banner { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- Compact tables (11.4): 40 px rows and 13 px text whatever the density, for tables of figures --------------------- */
.compact-table :is(th, td) { height: 40px; padding-block: 6px; padding-inline: var(--s-3); font-size: var(--fs-13); line-height: var(--lh-13); font-variant-numeric: tabular-nums; }
.compact-table td.num { white-space: nowrap; }
.compact-table thead th { height: 36px; }
.list-card .compact-table :is(th, td):first-child { padding-left: var(--card-pad); }
.list-card .compact-table :is(th, td):last-child { padding-right: var(--card-pad); }
td.is-quiet, .is-quiet { color: var(--text-3); }
td.is-negative { color: var(--danger-text); }
td.is-strong { color: var(--text); font-weight: var(--fw-semibold); }

/* ---- Jobs: the list --------------------------------------------------------------------------------------------------- */
#jobs-card > .notice { margin: 0 var(--card-pad) var(--s-3); }
#job-list > .empty-state { padding: var(--s-8) var(--card-pad); border-top: 1px solid var(--border); }
.jobs-table td.col-title { min-width: 240px; }
.job-name { text-align: left; white-space: normal; }
.job-customer { display: block; margin-top: 2px; color: var(--text-3); font-weight: var(--fw-regular); font-size: var(--fs-12); line-height: var(--lh-12); }
.jobs-table td.num { white-space: nowrap; }
.jobs-table td.num .fig { display: block; color: var(--text); font-weight: var(--fw-medium); }
.jobs-table td.num .due-note { margin-top: 2px; }
.job-progress {
  display: block;
  width: 88px;
  height: 4px;
  margin: var(--s-1) 0 0 auto;
  border: 0;
  border-radius: 2px;
  background: var(--surface-sunken);
  color: var(--action);
  -webkit-appearance: none;
  appearance: none;
  overflow: hidden;
}
.job-progress::-webkit-progress-bar { border-radius: 2px; background: var(--surface-sunken); }
.job-progress::-webkit-progress-value { border-radius: 2px; background: var(--action); }
.job-progress::-moz-progress-bar { border-radius: 2px; background: var(--action); }
.job-progress.is-over::-webkit-progress-value { background: var(--danger-dot); }
.job-progress.is-over::-moz-progress-bar { background: var(--danger-dot); }
.jobs-table td.job-rate { color: var(--text-2); }

/* ---- Jobs: a job's own view, in the list's place ------------------------------------------------------------------------ */
.job-detail { display: grid; gap: var(--card-gap); }
.job-detail[hidden] { display: none; }
.job-detail > *, .job-layout > .card { margin: 0; }
.job-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.job-head > .run-head { min-width: 0; }
.job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.job-actions:empty { display: none; }
.job-actions > a.text-link { display: inline-flex; align-items: center; min-height: var(--control-h); }
.metrics.stat-strip.job-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.job-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--card-gap); align-items: start; }
@media (min-width: 1280px) { .job-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
.entries-table td.entry-date { white-space: nowrap; color: var(--text); font-weight: var(--fw-medium); }
.entries-table td.entry-note { min-width: 220px; white-space: normal; }
.job-billing { display: grid; align-content: start; gap: var(--s-3); }
.job-billing > h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
#job-billing { display: grid; gap: var(--s-3); }
#job-billing > * { margin: 0; }
.job-facts { margin: 0; }
.job-evidence { padding: var(--s-2) var(--s-3); border-left: 3px solid var(--border-strong); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-sunken); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.request-status { display: grid; justify-items: start; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }

/* ---- Jobs: the dialogs (11.14) ----------------------------------------------------------------------------------------- */
:where(#job-approval-card, #job-time-dialog) { --dialog-w: 620px; }
.form-grid.three-col { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
dialog .form-grid.two-col, dialog .form-grid.three-col { align-items: end; }
.request-amount { margin: 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.request-amount:empty { display: none; }

/* ---- People & costs ---------------------------------------------------------------------------------------------------- */
.people-sections > .columns.people-columns { grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: var(--card-gap); align-items: start; margin-bottom: var(--s-5); }
.people-columns > .card { margin: 0; }
.month-card > .section-title { align-items: flex-end; }
.month-field { flex: none; width: 200px; }
#people-summary { display: grid; gap: var(--s-3); margin-bottom: var(--s-3); }
#people-summary > * { margin: 0; }
.metrics.stat-strip.people-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); box-shadow: none; }
.cost-state.is-complete { justify-self: start; }
#cost-tools { flex: none; }
#cost-tools .show-all { margin: 0; }
#cost-tools .show-all > .hint:empty { display: none; }
.cost-table td.person-cell, .attendance-table td.person-cell { min-width: 200px; }
.cost-table td.num .masked-field { justify-content: flex-end; }
.compact-table td.person-cell > .avatar { width: 28px; height: 28px; margin-right: var(--s-2); font-size: var(--fs-12); }
.profit-table td.job-cell { min-width: 220px; color: var(--text); font-weight: var(--fw-medium); white-space: normal; }
.profit-table td.col-status { min-width: 220px; white-space: normal; }
.profit-table td.col-status .due-note { margin-top: 2px; }
/* The directory: a person per row, then the inline Add employee. */
.person-list { display: grid; border-top: 1px solid var(--border); }
.person-list > p.person-row { display: flex; align-items: center; gap: var(--s-3); margin: 0; padding: var(--s-2) var(--card-pad); border-bottom: 1px solid var(--divider); }
.person-list > .empty-state { padding: var(--s-6) var(--card-pad); }
form.inline-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; align-items: end; gap: var(--s-3); margin: 0; padding: var(--s-4) var(--card-pad); border-top: 1px solid var(--divider); background: var(--surface-sunken); }
form.inline-add > button { justify-self: start; }
form.attendance-add { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.6fr) auto; }
/* The overhead accounts: a filter and the live count, then a fold per category. */
.checklist-form { gap: var(--s-3); }
.checklist-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.checklist-tools .search-field { flex: 1 1 240px; }
.checklist-count { flex: none; padding: 2px var(--s-3); border-radius: var(--r-full); background: var(--action-soft-bg); color: var(--action-soft-text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.checklist-count:empty { display: none; }
/* Review of part 2 (V31): the checklist grows with the page (its groups are folds), so no row is cut at its foot. */
.checklist { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.check-group { border-bottom: 1px solid var(--divider); }
.check-group:last-child { border-bottom: 0; }
.check-group[hidden] { display: none; }
.check-group > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3); background: var(--surface); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
.check-group > summary::-webkit-details-marker { display: none; }
.check-group > summary::before { content: ""; flex: none; width: 14px; height: 14px; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; transition: transform var(--dur-1) var(--ease-out); }
.check-group[open] > summary::before { transform: rotate(90deg); }
.check-group > summary:hover { background: var(--surface-hover); }
.group-name { flex: 1 1 auto; min-width: 0; }
.group-count { flex: none; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.check-group.has-chosen .group-count { color: var(--action-soft-text); font-weight: var(--fw-semibold); }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 var(--s-4); padding: 0 var(--s-3) var(--s-2) calc(var(--s-3) + 22px); }
.check-grid > label.check { min-height: 32px; gap: var(--s-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.check-grid > label.check[hidden] { display: none; }
.check-code { flex: none; min-width: 4.8em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.check-name { min-width: 0; }
/* The clock import: the template links in a row, the drop zone, Paste instead, the review. */
.template-links { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-3); font-size: var(--fs-13); line-height: var(--lh-13); }
#clock-card > details.more { margin: 0 0 var(--s-4); }
#clock-picked { margin: var(--s-3) 0 0; }
#clock-preview-form { gap: var(--s-3); margin-top: var(--s-4); }
#clock-preview-form > .form-actions { justify-content: flex-start; }
#clock-preview:empty { display: none; }
#clock-preview { margin-top: var(--s-4); }
.review-title { margin: 0 0 var(--s-2); color: var(--text); font-weight: var(--fw-semibold); }
.review-list { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-md); }
.review-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--divider); font-size: var(--fs-13); line-height: var(--lh-13); }
.review-list > li:last-child { border-bottom: 0; }
.review-what { color: var(--text); font-weight: var(--fw-medium); }
.review-figures { color: var(--text-2); font-variant-numeric: tabular-nums; text-align: right; }
.review-note { grid-column: 1 / -1; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.review-list > li.is-change .review-note { color: var(--warning-text); }
#clock-commit { margin-top: var(--s-3); }

/* ---- Leave & holidays: the requests ----------------------------------------------------------------------------------- */
#leave-requests-card > .notice { margin: 0 var(--card-pad) var(--s-3); }
.request-list { display: grid; border-top: 1px solid var(--border); }
.request-list > .empty-state { padding: var(--s-8) var(--card-pad); }
.request-list > p.hint { margin: 0; padding: var(--s-4) var(--card-pad); }
.request-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: var(--s-2) var(--s-6); padding: var(--s-4) var(--card-pad); border-bottom: 1px solid var(--divider); }
.request-card:last-child { border-bottom: 0; }
.request-card.is-pending { box-shadow: inset 3px 0 0 var(--warning-dot); }
.request-card > * { grid-column: 1; margin: 0; }
.request-who { display: flex; align-items: center; gap: var(--s-3); }
.request-who > .person-body { flex: 1 1 auto; min-width: 0; }
.request-who > .status-badge { flex: none; }
.request-when { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.request-reason { padding-left: 44px; color: var(--text); }
.request-note, .request-card > .hint { padding-left: 44px; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.request-decide { grid-column: 2; grid-row: 1 / span 4; display: grid; gap: var(--s-2); }
.request-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
/* ---- Leave & holidays: the roster ------------------------------------------------------------------------------------- */
.roster-head { align-items: center; }
.roster-nav { display: flex; flex: none; align-items: center; gap: var(--s-2); }
.roster-month { min-width: 9.5em; color: var(--text); font-weight: var(--fw-semibold); text-align: center; }
.roster-nav .icon-button { width: var(--control-h); min-width: var(--control-h); padding: 0; }
#leave-roster > .empty-state { padding: var(--s-6) var(--card-pad); border-top: 1px solid var(--border); }
.roster-table { border-collapse: separate; border-spacing: 0; }
.roster-table :is(th, td) { height: 36px; padding: 0; border-bottom: 1px solid var(--divider); font-size: var(--fs-12); line-height: var(--lh-12); text-align: center; }
.roster-table thead th { height: 44px; background: var(--surface-sunken); color: var(--text-3); font-weight: var(--fw-medium); }
.roster-table th.roster-day { width: 30px; min-width: 30px; }
.roster-day > span { display: block; }
.roster-d { color: var(--text-2); font-variant-numeric: tabular-nums; }
.roster-table th.roster-name { position: sticky; left: 0; z-index: 2; min-width: 200px; padding: 0 var(--s-3) 0 var(--card-pad); background: var(--surface); text-align: left; white-space: nowrap; }
.roster-table thead th.roster-name { z-index: 3; background: var(--surface-sunken); }
.roster-table tbody th.roster-name { color: var(--text); font-size: var(--fs-13); font-weight: var(--fw-medium); }
.roster-table tbody th.roster-name > .avatar { width: 24px; height: 24px; margin-right: var(--s-2); font-size: var(--fs-12); }
.roster-table td.roster-cell { border-left: 1px solid var(--divider); }
.roster-table td.roster-cell.is-off, .roster-table th.roster-day.is-holiday, .roster-table td.roster-cell.is-holiday { background: var(--surface-sunken); }
.roster-table td.roster-cell.is-holiday { box-shadow: inset 0 -3px 0 var(--info-dot); }
.roster-table td.roster-cell.is-away { background: var(--action); box-shadow: inset 0 0 0 3px var(--surface); }
.roster-table td.roster-cell.is-pending { background: repeating-linear-gradient(135deg, var(--warning-bg) 0 4px, var(--warning-dot) 4px 6px); box-shadow: inset 0 0 0 3px var(--surface); }
.roster-table th.roster-day.is-today { box-shadow: inset 0 -2px 0 var(--action); }
.roster-table th.roster-day.is-today .roster-d { color: var(--action-soft-text); font-weight: var(--fw-bold); }
.roster-table .roster-total { min-width: 72px; padding: 0 var(--card-pad) 0 var(--s-3); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.roster-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--divider); list-style: none; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.roster-legend > li { display: inline-flex; align-items: center; gap: var(--s-2); }
.roster-legend > li::before { content: ""; width: 14px; height: 14px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-sunken); }
.roster-legend > .key-away::before { border-color: var(--action); background: var(--action); }
.roster-legend > .key-pending::before { border-color: var(--warning-dot); background: repeating-linear-gradient(135deg, var(--warning-bg) 0 3px, var(--warning-dot) 3px 5px); }
.roster-legend > .key-holiday::before { box-shadow: inset 0 -3px 0 var(--info-dot); }
#leave-roster-card:has(#leave-roster > .empty-state) > .roster-legend { display: none; }
/* ---- Leave & holidays: allowances, teams and holidays ---------------------------------------------------------------- */
#leave-balances > .empty-state { padding: var(--s-6) var(--card-pad); border-top: 1px solid var(--border); }
#leave-balances > p.hint { margin: 0; padding: var(--s-4) var(--card-pad); border-top: 1px solid var(--border); }
.balances-table td.year-cell { color: var(--text-2); font-variant-numeric: tabular-nums; }
.team-list { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
.team-list > .empty-state { padding: var(--s-4) 0; }
.team-card { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.team-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-3); }
.team-head > h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.team-meta { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.day-chips, .member-list { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.day-chip { display: inline-grid; place-items: center; min-width: 40px; height: 26px; padding: 0 var(--s-2); border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text-3); font-size: var(--fs-12); line-height: 1; font-weight: var(--fw-medium); }
.day-chip.is-on { border-color: transparent; background: var(--action-soft-bg); color: var(--action-soft-text); font-weight: var(--fw-semibold); }
.member { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--s-3) 2px 2px; border-radius: var(--r-full); background: var(--surface-sunken); color: var(--text); font-size: var(--fs-13); line-height: var(--lh-13); }
.member > .avatar { width: 24px; height: 24px; font-size: var(--fs-12); }
details.add-fold { padding-top: var(--s-3); border-top: 1px solid var(--divider); }
details.add-fold:has(> form[hidden]) { display: none; }
details.add-fold > summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); padding: 0 var(--s-4); border: 1px solid var(--border-control); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
details.add-fold > summary::-webkit-details-marker { display: none; }
details.add-fold > summary::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat; }
details.add-fold > summary:hover { background: var(--surface-hover); }
details.add-fold[open] > summary { margin-bottom: var(--s-4); }
fieldset.chip-field { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset.chip-field > legend { margin-bottom: var(--s-2); padding: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.chip-checks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-checks > p.hint { margin: 0; }
label.check.chip-check { min-height: 32px; padding: 0 var(--s-3); border: 1px solid var(--border-control); border-radius: var(--r-full); background: var(--surface); font-size: var(--fs-13); line-height: var(--lh-13); cursor: pointer; }
label.check.chip-check:has(input:checked) { border-color: var(--action); background: var(--action-soft-bg); color: var(--action-soft-text); font-weight: var(--fw-medium); }
label.check.chip-check:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
label.check.chip-check input { width: 16px; height: 16px; }
.holiday-list { margin-bottom: var(--s-4); }
.holiday-list > p.hint { margin: 0; }
.holiday-rows { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.holiday-rows > li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--divider); }
.holiday-rows > li.is-past { color: var(--text-3); }
.holiday-date { display: grid; }
.holiday-date > strong { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.holiday-day { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
#leave-holidays-card form.inline-add { margin: 0 calc(var(--card-pad) * -1) calc(var(--card-pad) * -1); border-radius: 0 0 var(--r-lg) var(--r-lg); }
:where(#leave-request-card) { --dialog-w: 560px; }

/* ---- Laptop, under 1280 px -------------------------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  form.attendance-add { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  form.attendance-add > .wide-field { grid-column: span 3; }
  /* The rate leaves the job list below 1280 px (it stays in the job’s own view), as the issue date does on Invoices. */
  .jobs-table :is(th, td):nth-child(6) { display: none; }
  .jobs-table td.col-title { min-width: 200px; }
}
/* ---- Tablet, under 1024 px -------------------------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .metrics.stat-strip.job-tiles, .metrics.stat-strip.people-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .request-card { grid-template-columns: minmax(0, 1fr); }
  .request-decide { grid-column: 1; grid-row: auto; padding-left: 44px; }
  .request-buttons { justify-content: flex-start; }
}
/* ---- Phone, under 768 px ---------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  .job-head { align-items: stretch; }
  .job-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .job-actions > :only-child, .job-actions > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .job-progress { margin-left: 0; }
  .cards-on-phone.jobs-table > tbody > tr > td.num ~ td.num :is(.fig, .due-note) { display: inline; }
  .cards-on-phone.jobs-table > tbody > tr > td.num ~ td.num .due-note { margin-left: var(--s-2); }
  .cards-on-phone.jobs-table > tbody > tr > td.num:not(td.num ~ td.num) .job-progress { margin-left: auto; }
  .form-grid.three-col { grid-template-columns: minmax(0, 1fr); }
  .month-card > .section-title { flex-direction: column; align-items: stretch; }
  .month-field { width: 100%; }
  form.inline-add, form.attendance-add { grid-template-columns: minmax(0, 1fr); }
  form.attendance-add > .wide-field { grid-column: auto; }
  form.inline-add > button { justify-self: stretch; }
  .compact-table.cards-on-phone :is(th, td), .list-card .compact-table.cards-on-phone :is(th, td):is(:first-child, :last-child) { height: auto; padding: 0; }
  .cards-on-phone > tbody > tr > td.person-cell { white-space: normal; }
  .cards-on-phone > tbody > tr > td.person-cell > .avatar { display: none; }
  .request-reason, .request-note, .request-card > .hint, .request-decide { padding-left: 0; }
  .request-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .roster-head { flex-direction: column; align-items: stretch; }
  .roster-nav { justify-content: space-between; }
  .roster-table th.roster-name { min-width: 132px; max-width: 132px; padding-left: var(--s-4); overflow: hidden; text-overflow: ellipsis; }
  .roster-table tbody th.roster-name > .avatar { display: none; }
  .check-grid { grid-template-columns: minmax(0, 1fr); padding-left: var(--s-3); }
  .holiday-rows > li { grid-template-columns: 8.5em minmax(0, 1fr); }
  .review-list > li { grid-template-columns: minmax(0, 1fr); }
  .review-figures { text-align: left; }
}
/* ---- Touch: 44 px targets (9) ---------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .check-group > summary, .check-grid > label.check, label.check.chip-check, details.add-fold > summary { min-height: var(--target); }
  .roster-nav .icon-button { width: var(--target); min-width: var(--target); }
}
@media (prefers-reduced-motion: reduce) {
  .check-group > summary::before { transition: none; }
}
@media (forced-colors: active) {
  :is(.icon-clock, .icon-calendar, .roster-prev, .roster-next, .check-group > summary, details.add-fold > summary)::before { forced-color-adjust: none; background-color: CanvasText; }
  .roster-table td.roster-cell:is(.is-away, .is-pending) { forced-color-adjust: none; background: Highlight; }
  .day-chip.is-on, label.check.chip-check:has(input:checked) { outline: 2px solid CanvasText; }
}
@media print {
  .job-actions, #job-back, .roster-nav, details.add-fold, form.inline-add { display: none !important; }
  .job-layout { grid-template-columns: minmax(0, 1fr); }
}


/* ==== Review of part 2 (DESIGN_SYSTEM.md, Build notes, "Review of part 2") ============================================= */
/* Each rule names the finding it answers. */

/* V6: the heading row over the indented parts of current assets and of equity. */
.statement-table tr.group-row > td { padding-top: var(--s-4); color: var(--text); font-weight: var(--fw-semibold); }

/* V14: a list with nothing in it at all shows its empty state alone, and a money bar's empty segment draws an empty track. */
.list-card.is-empty > :is(.status-tabs, .list-toolbar), .list-card.is-empty table > :is(thead, tfoot) { display: none; }
.money-seg[data-empty] .seg-line { background: var(--border); }

/* V4: a stage reached in part (half filled, named "Part paid"), and a stage passed with nothing recorded (a dash). */
.stage-bar > li[data-state="partial"] { background: linear-gradient(90deg, var(--action-soft-bg) 0 55%, var(--surface-sunken) 55% 100%); color: var(--action-soft-text); font-weight: var(--fw-semibold); }
.stage-bar > li[data-state="skipped"] { color: var(--text-3); }
.stage-bar > li[data-state="skipped"]::before { content: ""; width: 10px; height: 2px; border-radius: 1px; background-color: currentColor; }

/* V12: while a document, an expense, a job or a payroll run takes the list's place, its own title is the page's title:
   the section heading and its intro are kept for screen readers only (the breadcrumb names the section), and the
   Invoices sub-tabs are not shown over a document. */
main:has(#document-editor:not([hidden]), #expense-card:not([hidden]), #job-detail:not([hidden]), #run-detail:not([hidden])) > header :is(h1, #page-company, #page-intro) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
:is(#invoices-panel, #bills-panel):has(#document-editor:not([hidden])) > .sub-nav { display: none; }

/* V17: with no logo yet, the drop zone is the whole card (no empty preview box over it). */
.logo-card:not(.has-logo):has(#logo-controls:not([hidden])) .logo-preview { display: none; }

/* V24: the organisation chart's rows in the chart of accounts' weights. */
.org-chart-table td.account-code { color: var(--text-2); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.org-chart-table .account-name { display: block; color: var(--text); font-weight: var(--fw-medium); }
.org-chart-table tr.is-off > td { color: var(--text-3); }

/* V21: an as-at report shows its date only, not the period choice of a range report. */
.report-controls.is-as-at > :is(.report-period-field, .report-preset) { display: none; }

/* V13: the chart's Show more under its table. */
#chart-more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-3); padding: var(--s-4) var(--card-pad); border-top: 1px solid var(--divider); }
#chart-more[hidden] { display: none; }

/* V26: the payroll runs card head: the scope banner on its own line under the subtitle, Create run at the card's right
   edge (the form's children join the head's grid; the form and its banner stay as they are). */
.list-head.runs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-2) var(--s-4); }
.runs-head > #run-form { display: contents; }
.runs-head > #run-form > .hint.scope-banner { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; }
.runs-head > #run-form > fieldset { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.inline-form > .hint.scope-banner { margin-bottom: var(--s-2); }

/* V29: money and other decimal fields line up on the right in tabular figures. */
input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
/* V31: a field's note sits under it, so side-by-side fields start level. */
label > .field-hint { display: block; margin-top: var(--s-1); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-regular); }

/* V30: a statement line with a suggestion keeps the chip and its "⋯" on one line. */
.recon-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.recon-cell > .suggestions { flex: 1 1 260px; margin: 0; }
.recon-cell > .recon-actions { flex: none; }

@media screen and (max-width: 767.98px) {
  /* RT2-6: on a phone card, a masked amount in the amount slot keeps its name above the dots. */
  .cards-on-phone > tbody > tr > td.num:not(td.num ~ td.num):has(.masked-field)::before { content: attr(data-label); display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-regular); }
  .list-head.runs-head { grid-template-columns: minmax(0, 1fr); }
  .runs-head > #run-form > .hint.scope-banner { grid-row: auto; }
  .runs-head > #run-form > fieldset { grid-column: 1; grid-row: auto; }
}
@media (forced-colors: active) {
  .stage-bar > li[data-state="partial"] { forced-color-adjust: none; background: Canvas; color: CanvasText; outline: 2px dashed CanvasText; outline-offset: -2px; }
  .money-seg[aria-pressed="true"] { box-shadow: none; }
}
@media print {
  #chart-more, .list-status { display: none !important; }
}

/* ==== Sign-in and the account pages (L3.1; DESIGN_SYSTEM.md 11.25 and 18, rows 2.1 and 3.8) ========================= */
/* A split screen: the brand panel on the left (5 of 12 columns), the card on the page background on the right (7). The home
   page wears it while its sign-in card or its two-step set-up is shown (CSS :has, so app.js and the markup the tests pin are
   unchanged); account.html wears it always (main.auth). The home page's own header is its brand panel, so "Your business,
   connected" stays the page's heading until the greeting replaces it; on account.html the heading is the card's title and
   the panel (.auth-brand) is decorative. The bar of either page sits over the top of the panel, with no band of its own. */
:is(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden]), > main > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) {
  --auth-pad: max(var(--s-12), calc((100vw * 5 / 12 - 30rem) / 2));
}
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  /* The first row clears the bar over the page (24 px, the 36 px links, 24 px) before the card may start. */
  grid-template-rows: minmax(calc(var(--s-6) + var(--control-h) + var(--s-6)), 1fr) auto auto minmax(var(--s-8), 1fr) auto;
  align-items: start;
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  /* The panel's colour runs the full height of a long page (the two-step set-up), while its content stays in view. */
  background: linear-gradient(90deg, var(--teal-900) calc(100% * 5 / 12), var(--bg) 0);
}

/* ---- The bar over the panel: the logo where the panel starts; account.html's links at the top of the light side ---- */
:where(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden]), > main > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > .topbar {
  position: absolute;
  inset: 0 0 auto 0;
  /* Above the sticky panel, which comes later in the page. */
  z-index: var(--z-shell);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto;
  align-items: center;
  min-height: 0;
  padding: var(--s-6) 0 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
:where(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden]), > main > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > .topbar > .brand {
  grid-column: 1;
  grid-row: 1;
  width: 124px;
  height: 32px;
  margin: 0 0 0 var(--auth-pad);
  background-image: url(/images.svg?v=fbc2034a9f49#logo);
  background-size: 124px 32px;
}
/* No hairline under the bar here, in either dark mode (the frame draws one under its band). */
body[data-app="launcher"]:has(> main > #login:not([hidden]), > main > #mfa-setup:not([hidden])) > .shell-bar { border-bottom: 0; }
/* Signed out, the shell's bar holds nothing but the logo; its emptied tools and the build tag (the version is in the
   footer) are not drawn. */
:where(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden]), > main > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > .topbar > :not(.brand, nav) { display: none; }
body:has(> main.auth) > .topbar > nav { grid-column: 2; grid-row: 1; justify-self: end; gap: var(--s-1); margin-right: var(--s-6); }
body:has(> main.auth) > .topbar > nav :is(a, strong) { height: var(--control-h); padding: 0 var(--s-3); border-radius: var(--r-md); color: var(--text-2); }
body:has(> main.auth) > .topbar > nav a:hover { color: var(--text); background: var(--surface-hover); }
body:has(> main.auth) > .topbar > nav strong { color: var(--text); }
body:has(> main.auth) > .topbar > nav strong::before { bottom: -2px; background: var(--action); }
body:has(> main.auth) > .topbar > nav :focus-visible { outline-color: var(--focus); }

/* ---- The brand panel: the logo above, the headline, one line, the illustration ---------------------------------------- */
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(header, .auth-brand) {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: start;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  min-height: 100dvh;
  margin: 0;
  padding: calc(var(--s-6) + 32px + var(--s-10)) var(--auth-pad) var(--s-12);
  background: var(--teal-900);
  color: var(--shell-text);
}
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > header .eyebrow {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > header h1,
main.auth > .auth-brand .auth-headline {
  max-width: 30rem;
  margin: 0;
  color: var(--shell-text);
  font: var(--fw-semibold) var(--fs-32) / var(--lh-32) var(--font-display);
  letter-spacing: var(--tracking-figure);
  text-wrap: balance;
}
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > header .muted,
main.auth > .auth-brand .auth-line {
  max-width: 30rem;
  margin: var(--s-3) 0 0;
  color: var(--shell-muted);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
}
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(header, .auth-brand)::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 3 / 2;
  margin-top: var(--s-10);
  background: url(/illustrations/sign-in.svg?v=fbc2034a9f49) left center / contain no-repeat;
}

/* ---- The right side: the status line, the card and the footer, centred ------------------------------------------------ */
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > #message {
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  width: min(var(--auth-card-w), calc(100% - 2 * var(--s-6)));
}
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(#login, #mfa-setup, .auth-card, #activation) {
  grid-column: 2;
  grid-row: 3;
  justify-self: center;
  width: min(var(--auth-card-w), calc(100% - 2 * var(--s-6)));
  max-width: none;
  margin: 0;
  padding: var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > #mfa-setup { width: min(var(--auth-card-wide-w), calc(100% - 2 * var(--s-6))); }
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > footer {
  grid-column: 2;
  grid-row: 5;
  justify-self: center;
  margin: 0;
  padding: var(--s-6) var(--s-6) var(--s-8);
  text-align: center;
}

/* The status line on these pages says what went wrong (a refused password or code, a link that no longer works), so it
   takes the danger tone and the warning mark, as a form error does. */
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) #message:not(:empty) { background: var(--danger-bg); color: var(--danger-text); }
:is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) #message:not(:empty)::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); }

/* ---- Inside the card ---------------------------------------------------------------------------------------------- */
/* The card's title: the sign-in card's own heading, or the account page's h1. The account panels' own headings and the
   page's subheading repeat the title and the panel's first line, so they are kept for screen readers only. */
:is(#login, #mfa-setup, #activation) > h2, .auth-card > header h1 {
  margin: 0;
  color: var(--text);
  font: var(--fw-semibold) var(--fs-24) / var(--lh-24) var(--font-display);
  letter-spacing: var(--tracking-figure);
}
.auth-card > header { display: block; margin: 0 0 var(--s-2); }
.auth-card > header .eyebrow, .auth-card > header #subheading, .auth-card > section > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.auth-card > #message:not(:empty) { margin: var(--s-4) 0 0; }
/* The account panels are the card's body, not cards of their own. */
.auth-card > .card, .auth-card > noscript > .card { max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
:is(#login, #mfa-setup, #activation) > h2 + .muted, .auth-card > section > :is(.muted, #done-text) {
  margin: var(--s-2) 0 var(--s-6);
  color: var(--text-2);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  text-wrap: pretty;
}
:is(#login, #mfa-setup, .auth-card, #activation) form { gap: var(--s-4); }
:is(#login, #mfa-setup, .auth-card, #activation) form input:not([type="checkbox"], [type="radio"]) { min-height: var(--target); font-size: var(--fs-16); }
/* The one place a button is full width on a desktop (11.25): the card's primary action. */
:is(#login, .auth-card, #activation) form > button:last-child { justify-self: stretch; min-height: var(--target); font-size: var(--fs-16); }
/* Review of part 3 (V4): the two-step set-up card's primaries (Start set-up, Turn on two-step sign-in, Done) are the same
   full-width 44 px buttons as every other sign-in card's; Sign out stays a quiet link-button on the divider. */
#mfa-setup-body > .link-row:has(> button:not(.secondary)) { display: grid; gap: var(--s-2); }
#mfa-setup-body > .link-row > button:not(.secondary), #mfa-setup-body > form > button[type="submit"], #mfa-setup-body > button:last-child:not(.secondary) { justify-self: stretch; width: 100%; min-height: var(--target); font-size: var(--fs-16); }
#mfa-setup-body > form { display: grid; }
:is(#login, #mfa-setup, .auth-card, #activation) .hint { margin: 0; }
/* The links under a sign-in form (every page's own sign-in card uses them). */
.form-links { margin: var(--s-5) 0 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
:is(#login, #forgot-panel, #password-panel, #activation) > .form-links { text-align: center; font-size: var(--fs-14); line-height: var(--lh-14); }
#mfa-setup > .form-links { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
/* Review of part 3 (RT3-3): on a touch screen a link that stands alone under a sign-in card, and the logo, are 44 px targets. */
@media (pointer: coarse) {
  .form-links a { display: inline-flex; align-items: center; min-height: var(--target); }
  :where(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden]), > main > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > .topbar > .brand { height: var(--target); background-position: left center; background-repeat: no-repeat; }
}
/* The development hint: a quiet note in a dashed box, plainly not product text (11.25). It ships hidden. */
#login > .hint[data-dev-only] {
  position: relative;
  margin: var(--s-6) 0 0;
  padding: var(--s-2) var(--s-3) var(--s-2) 34px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  color: var(--text-3);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  overflow-wrap: anywhere;
}
#login > .hint[data-dev-only]::before {
  content: "";
  position: absolute;
  left: var(--s-3);
  top: 9px;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat;
}
/* The invitation's facts as a quiet box; the done panel's two ways in, one under the other. */
.auth-card dl.details { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
.auth-card dl.details:empty { display: none; }
.auth-card .link-row { display: grid; gap: var(--s-2); margin-top: var(--s-6); }
.auth-card .link-row > .button-link { justify-content: center; min-height: var(--target); font-size: var(--fs-16); }
.auth-card .notice { margin: var(--s-4) 0 var(--s-3); }
/* A panel that ends on its first line (an invitation that cannot be used) ends there, with no gap. */
#join-panel:has(> #join-form[hidden]) > #join-status { margin-bottom: 0; }
/* An invitation from a sandbox (task F1): the practice banner's violet pair and flask, inside the panel above the facts. */
.join-sandbox { margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--violet-bg); color: var(--violet-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.join-sandbox[hidden] { display: none; }
.join-sandbox::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: var(--s-2); vertical-align: -3px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-sandbox) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-sandbox) center / contain no-repeat; }
.join-sandbox > strong { font-weight: var(--fw-semibold); }

/* ---- Two-step sign-in (mfa.js): the code prompt, the set-up, the QR code, the key and the recovery codes --------------- */
/* The prompt, wherever it opens: a shield tile over the title, the one code field, the actions on a divider. */
dialog.mfa-dialog > h2 { position: relative; margin: 0 0 var(--s-2); padding-top: 56px; font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); }
dialog.mfa-dialog > h2::before { content: ""; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: var(--r-lg); background: var(--action-soft-bg); }
dialog.mfa-dialog > h2::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  background-color: var(--action-soft-text);
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-shield-check) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-shield-check) center / contain no-repeat;
}
dialog.mfa-dialog > .muted { margin: 0 0 var(--s-5); color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-14); text-wrap: pretty; }
dialog.mfa-dialog form { gap: var(--s-3); }
dialog.mfa-dialog .form-error { margin: 0; }
dialog.mfa-dialog .link-row { justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
/* One field (11.25): 44 px, 24 px tabular figures spaced apart, so a pasted code and the phone's one-time-code fill work. */
.mfa-code-input {
  width: 100%;
  max-width: 20rem;
  min-height: var(--target);
  font-size: var(--fs-24);
  line-height: var(--lh-24);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: .3em;
}
dialog.mfa-dialog .mfa-code-input, :is(#login, #mfa-setup, .auth-card, #activation) .mfa-code-input { max-width: none; text-align: center; text-indent: .3em; }
input.mfa-code-input[name="recoveryCode"] { font-family: var(--font-mono); font-size: var(--fs-20); letter-spacing: .1em; text-indent: .1em; text-transform: uppercase; }
.mfa-intro p { margin: 0 0 var(--s-3); }
.mfa-intro p.muted { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.mfa-step { margin: var(--s-6) 0 var(--s-2); font: var(--fw-semibold) var(--fs-16) / var(--lh-16) var(--font-display); }
.mfa-step:first-child { margin-top: 0; }
/* The step heading takes focus from the script so the keyboard follows the steps; it is not a control. */
.mfa-step:focus { outline: none; }
/* The QR code in a white frame in both themes, so a phone camera reads it on a dark page too. */
.mfa-qr {
  box-sizing: content-box;
  display: block;
  width: 200px;
  height: 200px;
  max-width: calc(100% - 2 * var(--s-3));
  margin: var(--s-3) 0 var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--qr-frame);
}
.mfa-key-label { margin: var(--s-4) 0 var(--s-1); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.mfa-key {
  display: block;
  margin: 0 0 var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--fs-16);
  line-height: var(--lh-16);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  user-select: all;
}
/* The ten recovery codes in mono, two columns in a sunken box, numbered. */
.mfa-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: var(--s-2) var(--s-12);
  margin: var(--s-4) 0;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-10);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-14);
  user-select: all;
}
.mfa-codes > li { white-space: nowrap; }
.mfa-codes > li::marker { color: var(--text-3); font-size: var(--fs-12); }
.mfa-area:empty { display: none; }
.mfa-area { margin-top: var(--s-2); }
/* My account › Security (L3.3): the state with a dot (On in the success tone), and the recent sign-ins as quiet rows. */
.mfa-status { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-2); font-size: var(--fs-14); line-height: 22px; }
.mfa-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--neutral-dot); transform: translateY(-1px); }
.mfa-status.is-on::before { background: var(--success-dot); }
.mfa-signins { margin: 0 0 var(--s-2); padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-variant-numeric: tabular-nums; }
.mfa-signins > li { padding: 10px var(--s-4); border-top: 1px solid var(--divider); }
.mfa-signins > li:first-child { border-top: 0; }
#mfa-setup .link-row { margin-top: var(--s-4); }
#mfa-setup label.check { margin-top: var(--s-4); }
#mfa-setup-body > button:last-child { margin-top: var(--s-4); }
/* Review of part 3 (V5): the account and expiry line keeps a step of space under Copy key. */
:is(#mfa-setup, #account-security) .mfa-key ~ .hint:not(:empty) { margin-top: var(--s-2); }

/* On the sign-in and account pages the prompt is the same card (11.25): it opens where the card is, over the page with no
   dim, and the card under it is not drawn while it is open. The keys, focus and Cancel are the dialog's own, unchanged. */
:is(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > dialog.mfa-dialog {
  --dialog-w: var(--auth-card-w);
  inset-inline-start: calc(100% * 5 / 12);
  padding: var(--s-8);
  box-shadow: var(--sh-1);
  animation-name: hy-fade;
}
:is(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > dialog.mfa-dialog::backdrop { background: transparent; }
:is(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > dialog.mfa-dialog .link-row { display: grid; justify-content: stretch; padding-top: 0; border-top: 0; }
:is(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > dialog.mfa-dialog .link-row > button { justify-self: stretch; width: 100%; min-height: var(--target); font-size: var(--fs-16); }
body:has(> dialog.mfa-dialog[open]) > main > :is(#login, .auth-card, #activation) { visibility: hidden; }

/* ---- Tablets: a narrower panel ---------------------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  :is(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden]), > main > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) { --auth-pad: var(--s-8); }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(header, .auth-brand)::after { margin-top: var(--s-8); }
  body:has(> main.auth) > .topbar > nav { margin-right: var(--s-3); gap: 0; }
  body:has(> main.auth) > .topbar > nav :is(a, strong) { padding: 0 var(--s-2); font-size: var(--fs-13); }
  body:has(> main.auth) > .topbar > nav strong::before { left: var(--s-2); right: var(--s-2); }
}

/* ---- Phones on their side: the panel keeps its words and leaves out the illustration -------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(header, .auth-brand) { padding-top: calc(var(--s-6) + 32px + var(--s-6)); padding-bottom: var(--s-6); }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(header, .auth-brand)::after { display: none; }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > header h1,
  main.auth > .auth-brand .auth-headline { font-size: var(--fs-24); line-height: var(--lh-24); }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) { grid-template-rows: calc(var(--s-6) + var(--control-h) + var(--s-4)) auto auto var(--s-4) auto; }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(#login, #mfa-setup, .auth-card, #activation) { padding: var(--s-6); }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > footer { padding-block: var(--s-4); }
  /* The prompt stays a card with its corners, scrolling inside, rather than the full-height panel other dialogs become. */
  :is(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > dialog.mfa-dialog { max-height: calc(100dvh - var(--s-6) - var(--control-h) - var(--s-2) - var(--s-4)); margin-block: calc(var(--s-6) + var(--control-h) + var(--s-2)) var(--s-4); padding: var(--s-6); border-radius: var(--r-xl); }
}

/* ---- Phones: the panel becomes a band under the bar, with the headline and no illustration; the card is full width -- */
@media screen and (max-width: 767.98px) {
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) {
    display: block;
    min-height: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    background: var(--bg);
  }
  :where(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden]), > main > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > .topbar {
    position: relative;
    display: flex;
    min-height: 52px;
    padding: 0 max(var(--s-4), env(safe-area-inset-left));
    background: var(--teal-900);
  }
  :where(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden]), > main > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > .topbar > .brand { margin: 10px var(--s-2) 10px 0; }
  /* account.html's links stay in the band, light on dark, and scroll sideways if they must. */
  body:has(> main.auth) > .topbar > .brand { width: 32px; background-image: url(/images.svg?v=fbc2034a9f49#logo-mark); background-size: 32px 32px; }
  body:has(> main.auth) > .topbar { flex-wrap: nowrap; }
  body:has(> main.auth) > .topbar > nav { min-width: 0; margin: 0 0 0 auto; }
  body:has(> main.auth) > .topbar > nav :is(a, strong) { height: 52px; padding: 0 10px; border-radius: 0; color: var(--shell-muted); font-size: var(--fs-13); }
  body:has(> main.auth) > .topbar > nav a:hover { color: var(--shell-text); background: var(--shell-hover); }
  body:has(> main.auth) > .topbar > nav strong { color: var(--shell-text); }
  body:has(> main.auth) > .topbar > nav strong::before { left: 10px; right: 10px; bottom: 0; background: var(--shell-accent); }
  body:has(> main.auth) > .topbar > nav :focus-visible { outline-color: var(--shell-focus); }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(header, .auth-brand) {
    position: static;
    min-height: 0;
    padding: 0 max(var(--s-4), env(safe-area-inset-left)) var(--s-5);
  }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(header, .auth-brand)::after { display: none; }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > header h1,
  main.auth > .auth-brand .auth-headline { font-size: var(--fs-20); line-height: var(--lh-20); }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > header .muted,
  main.auth > .auth-brand .auth-line { margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-13); }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > #message { justify-self: stretch; width: auto; margin: var(--s-4) var(--s-4) 0; }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(#login, #mfa-setup, .auth-card, #activation) {
    justify-self: stretch;
    width: auto;
    margin: var(--s-4);
    padding: var(--s-6) var(--s-5);
  }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > footer { padding: var(--s-2) var(--s-4) var(--s-8); }
  /* The prompt: the same card under the band, not a sheet. */
  :is(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > dialog.mfa-dialog {
    inset-inline-start: 0;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 2 * var(--s-4));
    margin: auto var(--s-4);
    padding: var(--s-6) var(--s-5);
    border-width: 1px;
    border-radius: var(--r-xl);
  }
  :is(body:has(> main.auth), body[data-app="launcher"]:has(> main > #login:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden]))) > dialog.mfa-dialog::before { display: none; }
  /* Two columns of whole codes on a phone: smaller type and a narrower box, never a code broken over two lines. */
}
/* A narrow phone: the current page needs no link of its own (the card names it), so the two others fit beside the logo. */
@media screen and (max-width: 479.98px) {
  body:has(> main.auth) > .topbar > nav strong { display: none; }
}
/* Phones: the codes in one column, so no code is ever broken or crowded by the next one's number. */
@media screen and (max-width: 479.98px) {
  .mfa-codes { grid-template-columns: minmax(0, max-content); padding-left: var(--s-8); }
}
@media (forced-colors: active) {
  dialog.mfa-dialog > h2::after, #login > .hint[data-dev-only]::before { forced-color-adjust: none; background-color: CanvasText; }
  .mfa-qr { forced-color-adjust: none; }
}
@media print {
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) { display: block; background: none; }
  :is(main.auth, body[data-app="launcher"] > main:has(> #login:not([hidden]), > #mfa-setup:not([hidden])), body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden]))) > :is(header, .auth-brand)::after { display: none; }
}


/* ==== Approvals (L3.2; DESIGN_SYSTEM.md 18, row 2.11, and 11.7, 11.17, 11.20) ============================================ */
/* The queue beside a side column (the queue's figures, "You are covering", "Your own cover"); kind chips with counts; the
   approval cards with their kind tile, facts, "Why you" chips, waiting-time flag, amount and actions; the bulk bar; the
   decision forms; and the cover and delegations register with its form. */

/* ---- The layout: the queue and, from 1280 px, the 320 px side column beside it ------------------------------------------ */
.approvals-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--card-gap); }
.approvals-queue { display: grid; gap: var(--s-3); min-width: 0; }
.approvals-queue > * { margin: 0; }
.approvals-queue > h2 { font-size: var(--fs-16); line-height: var(--lh-16); }
.approvals-status:empty { display: none; }
.approvals-status:not(:empty) { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.approvals-intro { max-width: 92ch; }
.approvals-summary { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.approvals-queue > .empty-state { padding: var(--s-10) var(--card-pad); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.approvals-side { display: grid; gap: var(--card-gap); position: sticky; top: calc(var(--bar-h) + var(--menu-h) + var(--s-4)); min-width: 0; }

/* ---- Kind chips with counts (11.7) -------------------------------------------------------------------------------------- */
.kind-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.kind-chip {
  gap: var(--s-2);
  min-height: 32px;
  padding: 0 var(--s-2) 0 var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  box-shadow: none;
  color: var(--text-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
}
.kind-chip:where(:not(:disabled):hover) { border-color: var(--border-control); background: var(--surface-hover); color: var(--text); }
.kind-chip[aria-pressed="true"] { border-color: var(--action); background: var(--action-soft-bg); color: var(--action-soft-text); box-shadow: inset 0 0 0 1px var(--action); }
.kind-chip[aria-pressed="true"] .tab-count { background: var(--surface); color: var(--action-soft-text); }

/* ---- The bulk bar (11.7): shown once a timesheet entry is ticked, sticky under the bar ----------------------------------- */
form.approval-bulk {
  position: sticky;
  top: calc(var(--bar-h) + var(--menu-h) + var(--s-2));
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  min-height: 48px;
  padding: 6px var(--s-2) 6px var(--s-4);
  border-radius: var(--r-lg);
  background: var(--bulk-bg);
  box-shadow: var(--sh-2);
  color: var(--bulk-text);
}
.approval-bulk > .bulk-count { margin: 0; font-weight: var(--fw-semibold); white-space: nowrap; }
.approval-bulk > .bulk-note { display: flex; align-items: center; gap: var(--s-2); flex: 1 1 260px; min-width: 0; margin: 0; }
/* Review of part 3 (A11Y-L3-5): a short label stays in view beside the note (above it on a phone). */
.approval-bulk > .bulk-note > .bulk-note-tag { flex: none; color: var(--bulk-text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); white-space: nowrap; }
.approval-bulk > .bulk-note > span:not(.bulk-note-tag) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.approval-bulk > .bulk-note > input { flex: 1 1 auto; width: 100%; min-width: 0; }
/* Review of part 3 (A11Y-L3-2): while the bulk bar shows, the page keeps a focused control clear of it. */
html:has(form.approval-bulk:not([hidden])) { scroll-padding-top: calc(var(--bar-h) + var(--menu-h) + var(--bulk-h) + var(--s-4)); }
.approval-bulk > button[type="submit"] { border-color: var(--shell-accent); background: var(--shell-accent); color: var(--shell-accent-text); }
.approval-bulk > button[type="submit"]:where(:not(:disabled):hover) { border-color: var(--shell-accent); background: var(--shell-accent); color: var(--shell-accent-text); filter: brightness(.95); }
.approval-bulk > .bulk-clear { color: var(--bulk-text); }
.approval-bulk > .bulk-clear:where(:not(:disabled):hover) { background: var(--shell-hover); color: var(--bulk-text); }
.approval-bulk :focus-visible { outline-color: var(--shell-focus); }
.approval-bulk > .form-error { flex: 1 0 100%; margin: 0 0 var(--s-1); }

/* ---- The approval card (11.20) ------------------------------------------------------------------------------------------- */
.approval-list { display: grid; gap: var(--s-4); }
.approval-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "icon body" "foot foot" "form form" "hist hist";
  column-gap: var(--s-4);
  margin: 0;
  padding: var(--card-pad) var(--card-pad) 0;
  overflow: hidden;
}
.approval-card.has-figure { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "icon body figure" "foot foot foot" "form form form" "hist hist hist"; }
.approval-card.has-pick { grid-template-columns: 20px 40px minmax(0, 1fr); grid-template-areas: "pick icon body" "foot foot foot" "form form form" "hist hist hist"; }
.approval-card.has-pick.has-figure { grid-template-columns: 20px 40px minmax(0, 1fr) auto; grid-template-areas: "pick icon body figure" "foot foot foot foot" "form form form form" "hist hist hist hist"; }
.approval-pick { grid-area: pick; display: flex; align-items: center; justify-content: center; height: 40px; margin: 0; cursor: pointer; }
.approval-pick > input { width: 18px; height: 18px; margin: 0; }
.approval-card:has(> .approval-pick input:checked) { border-color: var(--action); box-shadow: inset 3px 0 0 var(--action), var(--sh-1); }
.approval-icon { grid-area: icon; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--neutral-bg); color: var(--neutral-text); }
.approval-icon::before { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-journal) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-journal) center / contain no-repeat; }
.approval-card[data-kind="leave"] > .approval-icon { background: var(--violet-bg); color: var(--violet-text); }
.approval-card[data-kind="leave"] > .approval-icon::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.approval-card[data-kind="timesheet"] > .approval-icon { background: var(--warning-bg); color: var(--warning-text); }
.approval-card[data-kind="timesheet"] > .approval-icon::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); }
.approval-card[data-kind="bill"] > .approval-icon { background: var(--info-bg); color: var(--info-text); }
.approval-card[data-kind="bill"] > .approval-icon::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-bill); mask-image: url(/images.svg?v=fbc2034a9f49#i-bill); }
.approval-card[data-kind="payroll"] > .approval-icon { background: var(--success-bg); color: var(--success-text); }
.approval-card[data-kind="payroll"] > .approval-icon::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-coins); mask-image: url(/images.svg?v=fbc2034a9f49#i-coins); }
.approval-body { grid-area: body; display: grid; gap: var(--s-1); min-width: 0; padding-bottom: var(--s-4); }
.approval-body > * { margin: 0; }
.approval-kicker { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.approval-title { color: var(--text); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.approval-facts { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.approval-facts .fact-label { color: var(--text-3); }
.approval-facts .fact-value { color: var(--text); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.approval-why { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2) !important; }
.why-label { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.approval-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-weight: var(--fw-medium);
}
.approval-chip::before { content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat; }
.approval-chip[data-icon="user"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-user); mask-image: url(/images.svg?v=fbc2034a9f49#i-user); }
.approval-chip[data-icon="users"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-users); mask-image: url(/images.svg?v=fbc2034a9f49#i-users); }
.approval-chip[data-icon="job"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-job); mask-image: url(/images.svg?v=fbc2034a9f49#i-job); }
.approval-chip[data-icon="shield-check"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-shield-check); mask-image: url(/images.svg?v=fbc2034a9f49#i-shield-check); }
.approval-chip[data-icon="arrow-up"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-up); mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-up); }
.approval-chip[data-icon="clock"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); }
.approval-chip[data-icon="flag"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-flag); mask-image: url(/images.svg?v=fbc2034a9f49#i-flag); }
.approval-chip.tone-danger { font-weight: var(--fw-semibold); }
.approval-quote { margin-top: var(--s-2) !important; overflow-wrap: anywhere; }
.approval-body > .hint { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.approval-figure { grid-area: figure; margin: 0; padding-left: var(--s-4); text-align: right; }
.approval-amount { display: block; color: var(--text); font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums; white-space: nowrap; }
.approval-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: 0 calc(var(--card-pad) * -1);
  padding: var(--s-3) var(--card-pad);
  border-top: 1px solid var(--divider);
  background: var(--surface-sunken);
}
.approval-foot > .approval-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
.approval-actions > :is(button, .button-link)::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.approval-actions > [data-outcome="reject"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-x); mask-image: url(/images.svg?v=fbc2034a9f49#i-x); }
.approval-actions > [data-outcome="return"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-left); mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-left); }
.approval-actions > [data-outcome="request_info"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-help); mask-image: url(/images.svg?v=fbc2034a9f49#i-help); }
.approval-actions > [data-outcome="delegate"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-users); mask-image: url(/images.svg?v=fbc2034a9f49#i-users); }
.approval-actions > [data-outcome="escalate"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-up); mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-up); }
.approval-actions > .button-link::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-external); mask-image: url(/images.svg?v=fbc2034a9f49#i-external); }
.approval-actions > .history-toggle { color: var(--text-2); }
.approval-actions > .history-toggle::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-chevron-down); mask-image: url(/images.svg?v=fbc2034a9f49#i-chevron-down); }
.approval-actions > .history-toggle[aria-expanded="true"]::before { transform: rotate(180deg); }
.approval-actions > :is(button, .button-link):not(.history-toggle):last-of-type { margin-right: var(--s-2); }
.approval-asked { margin: 0 0 0 auto; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); text-align: right; }
.approval-form { grid-area: form; margin: 0 calc(var(--card-pad) * -1); padding: var(--s-4) var(--card-pad); border-top: 1px solid var(--divider); }
form.decision-form { display: grid; gap: var(--s-3); max-width: 760px; margin: 0; }
form.decision-form > * { margin: 0; }
.decision-what { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
form.decision-form textarea, form.decision-form select { width: 100%; }
/* Review of part 3 (V7): the history is the approval trail (11.20): the rule as its caption, then each step asked (a ring)
   and each action taken (a done disc) on one connector, in the history's own words. */
.approval-history { grid-area: hist; display: grid; gap: 0; margin: 0 calc(var(--card-pad) * -1); padding: var(--s-4) var(--card-pad); border-top: 1px solid var(--divider); list-style: none; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.approval-history > li.trail-line { position: relative; padding: 0 0 var(--s-3) 32px; overflow-wrap: anywhere; }
.approval-history > li.trail-line:last-child { padding-bottom: 0; }
.approval-history > li.trail-line[data-state="rule"] { padding-left: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.approval-history > li.trail-line:not([data-state="rule"])::before { content: ""; position: absolute; top: 0; left: 0; z-index: 1; width: 20px; height: 20px; border-radius: var(--r-full); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.approval-history > li.trail-line[data-state="done"]::before { background: var(--action); box-shadow: none; }
.approval-history > li.trail-line[data-state="done"]::after { content: ""; position: absolute; top: 4px; left: 4px; z-index: 2; width: 12px; height: 12px; background-color: var(--action-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.approval-history > li.trail-line:not([data-state="rule"]):not(:last-child) { background: linear-gradient(var(--border-strong), var(--border-strong)) 9px 22px / 2px calc(100% - 24px) no-repeat; }
.approval-history > li.trail-line[data-state="rule"] { margin-bottom: var(--s-1); }
/* A decided item's outcome pill sits after its kind; its foot then holds only the history, so it is lighter. */
.approval-kicker > .approval-outcome { margin-left: var(--s-2); vertical-align: 1px; }
.approval-card:has(> .approval-body .approval-outcome) > .approval-foot { padding-block: var(--s-2); background: none; }
/* Review of part 3 (FI-2): Waiting for me with nothing in line but items outside it: an attention notice, not "All clear". */
.empty-state.is-attention::before { content: ""; width: 56px; height: 56px; margin-bottom: var(--s-1); border-radius: var(--r-full); background: var(--warning-bg); }
.empty-state.is-attention { position: relative; }
.empty-state.is-attention::after { content: ""; position: absolute; top: calc(var(--s-8) + 14px); left: calc(50% - 14px); width: 28px; height: 28px; background-color: var(--warning-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-shield-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-shield-check) center / contain no-repeat; }
.empty-state.is-attention > .empty-text { max-width: 52ch; text-wrap: balance; }

/* ---- The side column -------------------------------------------------------------------------------------------------- */
.side-card { display: grid; gap: var(--s-3); margin: 0; }
.side-card > * { margin: 0; }
.side-card > h2 { font-size: var(--fs-16); line-height: var(--lh-16); }
.queue-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); margin: 0; }
.queue-figure { display: grid; gap: 2px; min-width: 0; }
.queue-figure > dt { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.queue-figure > dd { margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums; }
.queue-figure.is-danger > dd { color: var(--danger-text); }
.queue-note { padding-top: var(--s-3); border-top: 1px solid var(--divider); font-size: var(--fs-13); line-height: var(--lh-13); }
.cover-rows { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; font-size: var(--fs-13); line-height: var(--lh-13); }
.cover-rows > li > small { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.covering-card { border-color: transparent; background: var(--bulk-bg); color: var(--bulk-text); }
.covering-card > h2 { color: var(--bulk-text); }
.covering-card .cover-rows { font-size: var(--fs-14); line-height: var(--lh-14); }
.side-card > .button-link { justify-self: start; }
.side-card > .button-link.secondary::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-users) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-users) center / contain no-repeat; }
.button-link.on-dark { border-color: var(--shell-line); background: transparent; box-shadow: none; color: var(--bulk-text); }
.button-link.on-dark:hover { border-color: var(--shell-muted); background: var(--shell-hover); color: var(--bulk-text); }
.covering-card :focus-visible { outline-color: var(--shell-focus); }

/* ---- Cover and delegations: the register and its form ----------------------------------------------------------------- */
.cover-card { display: grid; gap: var(--s-3); padding: var(--card-pad) 0 0; }
.cover-card > * { margin: 0 var(--card-pad); }
.cover-card > h2 { font-size: var(--fs-16); line-height: var(--lh-16); }
.cover-card > p[role="status"]:empty { display: none; }
.cover-card > p[role="status"]:not(:empty) { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.cover-intro { max-width: 92ch; }
.cover-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cover-actions > button:first-child::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat; }
.cover-panel:empty { display: none; }
.cover-card > .empty-state { margin: var(--s-2) 0 0; padding: var(--s-8) var(--card-pad); border-top: 1px solid var(--border); }
.cover-group { margin: var(--s-3) 0 0; }
.cover-group:last-child, .cover-card > .cover-panel:last-child { margin-bottom: 0; }
.cover-group-head { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: 0 var(--card-pad) var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.cover-group > .scroll { border-top: 1px solid var(--border); }
.cover-group > .scroll > table > tbody > tr:last-child > td { border-bottom: 0; }
.cover-none { margin: 0; padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--divider); }
.cover-foot { margin: 0; padding: var(--s-3) var(--card-pad) var(--card-pad); border-top: 1px solid var(--divider); }
details.cover-ended { border-top: 1px solid var(--border); }
details.cover-ended > summary { display: flex; align-items: center; padding: var(--s-3) var(--card-pad); cursor: pointer; list-style: none; }
details.cover-ended > summary::-webkit-details-marker { display: none; }
details.cover-ended > summary::after { content: ""; width: 16px; height: 16px; margin-left: var(--s-2); background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; }
details.cover-ended[open] > summary::after { transform: rotate(180deg); }
details.cover-ended > summary > .cover-group-head { padding: 0; }
details.cover-ended > .cover-none { border-top: 0; }
/* Every table of the register shares one set of column widths, so Upcoming, Active and Ended line up. Review of part 3 (V1,
   V15): the widths follow the card's own width (a container query), not the window's, so the register reads the same beside
   the Settings menu, in My account and in the Approvals app. With room, a person and the dates stay on one line and Reason
   takes what is left; with less, How made is left out first, then names and dates may take two lines. The scroll box may
   shrink to the card (min-width 0 on the card's grid items), so the table never runs under the card's edge unseen. */
.cover-card { container: cover / inline-size; }
.cover-card > * { min-width: 0; }
.cover-table td { overflow-wrap: anywhere; }
.cover-table td.cover-person { white-space: nowrap; }
.cover-table td.cover-person > .avatar { width: 28px; height: 28px; margin-right: var(--s-2); }
.cover-table td.cover-dates { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cover-table td.cover-reason { min-width: 180px; }
.cover-table .cover-ends { display: block; margin-top: 2px; font-size: var(--fs-12); line-height: var(--lh-12); }
.cover-table .cover-ends.warning { color: var(--warning-text); font-weight: var(--fw-medium); }
@media (min-width: 768px) {
  .cover-table:has(th:nth-child(8)) { table-layout: fixed; width: 100%; }
  .cover-table:has(th:nth-child(8)) th:is(:nth-child(1), :nth-child(2)) { width: 212px; }
  .cover-table:has(th:nth-child(8)) th:nth-child(4) { width: 196px; }
  .cover-table:has(th:nth-child(8)) th:nth-child(3) { width: 96px; }
  .cover-table:has(th:nth-child(8)) th:nth-child(6) { width: 144px; }
  .cover-table:has(th:nth-child(8)) th:nth-child(7) { width: 112px; }
  .cover-table:has(th:nth-child(8)) th:nth-child(8) { width: 96px; }
  @container cover (max-width: 1259.98px) {
    .cover-table:has(th:nth-child(8)) :is(th, td):nth-child(6) { display: none; }
  }
  @container cover (max-width: 1119.98px) {
    .cover-table:has(th:nth-child(8)) th:is(:nth-child(1), :nth-child(2)) { width: 18%; }
    .cover-table:has(th:nth-child(8)) th:nth-child(3) { width: 10%; }
    .cover-table:has(th:nth-child(8)) th:nth-child(4) { width: 16%; }
    .cover-table:has(th:nth-child(8)) th:nth-child(7) { width: 104px; }
    .cover-table:has(th:nth-child(8)) th:nth-child(8) { width: 84px; }
    .cover-table td:is(.cover-person, .cover-dates) { white-space: normal; }
    .cover-table td.cover-person > span:last-child { display: inline-block; max-width: calc(100% - 40px); vertical-align: middle; }
    .cover-table td.cover-reason { min-width: 0; }
  }
  /* A narrow card (a laptop or tablet beside the menu): the avatars are left out, so Reason keeps a readable width. */
  @container cover (max-width: 859.98px) {
    .cover-table:has(th:nth-child(8)) th:is(:nth-child(1), :nth-child(2)) { width: 15%; }
    .cover-table:has(th:nth-child(8)) th:nth-child(3) { width: 13%; }
    .cover-table:has(th:nth-child(8)) th:nth-child(4) { width: 13%; }
    .cover-table:has(th:nth-child(8)) th:nth-child(7) { width: 96px; }
    .cover-table:has(th:nth-child(8)) th:nth-child(8) { width: 76px; }
    .cover-table td.cover-person > .avatar { display: none; }
    .cover-table td.cover-person > span:last-child { max-width: none; }
  }
  /* A tablet beside the menu: the register scrolls inside its card, End… kept in view at the right edge. */
  @container cover (max-width: 659.98px) {
    .cover-table:has(th:nth-child(8)) { min-width: 700px; }
    .cover-table:has(th:nth-child(8)) th:nth-child(3) { width: 100px; }
    .cover-table:has(th:nth-child(8)) > :is(thead, tbody) > tr > :last-child { position: sticky; right: 0; z-index: 1; background: var(--surface); box-shadow: inset 1px 0 0 var(--divider); }
    .cover-table:has(th:nth-child(8)) > thead > tr > :last-child { background: var(--surface-sunken); }
  }
}
form.end-form { display: grid; gap: var(--s-2); min-width: 260px; margin: var(--s-2) 0 0; text-align: left; white-space: normal; }
form.end-form > * { margin: 0; }
form.delegation-form { display: grid; gap: var(--s-4); max-width: 760px; margin: 0; padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
form.delegation-form > * { margin: 0; }
form.delegation-form > h3 { font-size: var(--fs-16); line-height: var(--lh-16); }
.cover-form-hint { max-width: 80ch; color: var(--text-2); }
.cover-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.cover-grid > label { min-width: 0; margin: 0; }
.cover-grid select, .cover-grid input { width: 100%; }
.cover-panel > form.delegation-form { margin: var(--s-1) 0 var(--s-2); }
.cover-group + .cover-panel { margin: var(--s-3) var(--card-pad) var(--card-pad); }

/* ---- Laptop and tablet: the side column under the queue, its cards side by side ---------------------------------------- */
@media (max-width: 1279.98px) {
  .approvals-layout { grid-template-columns: minmax(0, 1fr); }
  .approvals-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ---- Phones: the card's figure under its title, the actions two by two, the side cards one above the other ------------- */
@media screen and (max-width: 767.98px) {
  .approval-card, .approval-card.has-figure { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon body" "icon figure" "foot foot" "form form" "hist hist"; column-gap: var(--s-3); }
  .approval-card.has-pick, .approval-card.has-pick.has-figure { grid-template-columns: 20px 40px minmax(0, 1fr); grid-template-areas: "pick icon body" "pick icon figure" "foot foot foot" "form form form" "hist hist hist"; }
  .approval-card.has-figure > .approval-body { padding-bottom: var(--s-2); }
  .approval-figure { padding: 0 0 var(--s-4); text-align: left; }
  .approval-foot > .approval-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .approval-actions > :is(button, .button-link) { justify-content: center; width: 100%; margin: 0 !important; }
  .approval-actions > :is(.history-toggle, .button-link) { grid-column: 1 / -1; }
  .approval-actions > .history-toggle { justify-self: start; justify-content: flex-start; width: auto; padding-left: 0; }
  .approval-asked { margin: 0; text-align: left; }
  form.approval-bulk { padding: var(--s-2) var(--s-3); }
  .approval-bulk > .bulk-note { flex: 1 0 100%; flex-wrap: wrap; gap: var(--s-1); order: 0; }
  .approval-bulk > .bulk-note > input { flex-basis: 100%; }
  .kind-chips { flex-wrap: nowrap; margin: 0 calc(var(--page-pad) * -1); padding: 2px var(--page-pad); overflow-x: auto; scrollbar-width: none; }
  .kind-chips::-webkit-scrollbar { display: none; }
  .kind-chip { flex: none; }
  .approvals-side { grid-template-columns: minmax(0, 1fr); }
  .cover-grid { grid-template-columns: minmax(0, 1fr); }
  form.delegation-form { padding: var(--s-4); }
  .cover-table td.cover-person { white-space: normal; }
  form.end-form { min-width: 0; }
}
/* Phones turned sideways: the bar is not sticky there, so the bulk bar sticks to the top of the page. */
@media (max-height: 500px) and (orientation: landscape) {
  form.approval-bulk { top: var(--s-2); }
  .approvals-side { position: static; }
}
@media (pointer: coarse) {
  .kind-chip { min-height: var(--target); }
  .approval-pick { position: relative; }
  .approval-pick::after { content: ""; position: absolute; inset: -12px; }
}
@media (forced-colors: active) {
  .approval-icon, .approval-chip, .kind-chip, form.approval-bulk, .covering-card { border: 1px solid CanvasText; }
  .approval-icon::before, .approval-chip::before, .approval-actions > :is(button, .button-link)::before, .cover-actions > button:first-child::before, .side-card > .button-link.secondary::before, details.cover-ended > summary::after { forced-color-adjust: none; background-color: CanvasText; }
  .kind-chip[aria-pressed="true"] { outline: 2px solid CanvasText; }
}
@media print {
  .approvals-side, form.approval-bulk, .kind-chips, .approval-actions, .approval-form, .cover-actions, .cover-panel, form.end-form { display: none !important; }
  .approvals-layout { grid-template-columns: minmax(0, 1fr); }
  .approval-card, .covering-card { break-inside: avoid; box-shadow: none; }
}

/* ==== My account and the Settings app (L3.3; DESIGN_SYSTEM.md 18, "Part 3: My account and the Settings app") =========== */
/* The shared left menu: 240 px beside the section on a laptop or desktop (icon, name and one-line purpose), 200 px with the
   names only on a tablet, and on a phone the app's first screen, a list whose rows open each section on its own with a
   link back. Since 0.21c task 2.5 My account is its own page (profile.html); its Security and Preferences keep the rules
   below, and its other parts are in the section "My account's page" further down. */

/* ---- The layout and the left menu --------------------------------------------------------------------------------------- */
.left-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 var(--s-8); align-items: start; }
/* Review of part 3 (FI-1): from 1280 px the menu is 272 px, so each purpose reads in full in two or three short lines. */
@media (min-width: 1280px) {
  .left-layout { grid-template-columns: 272px minmax(0, 1fr); }
}
.left-body { min-width: 0; }
.left-menu {
  position: sticky;
  top: calc(var(--bar-h) + var(--s-6));
  padding: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-1);
  max-height: calc(100vh - var(--bar-h) - var(--s-6) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.left-menu > ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.left-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: var(--s-3);
  padding: 10px var(--s-3);
  border-radius: var(--r-md);
  color: var(--text-2);
  text-decoration: none;
}
.left-item::before {
  content: "";
  width: 20px;
  height: 20px;
  background-color: var(--text-3);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.left-item[data-icon="users"] { --icon: url(/images.svg?v=fbc2034a9f49#i-users); }
.left-item[data-icon="layers"] { --icon: url(/images.svg?v=fbc2034a9f49#i-layers); }
.left-item[data-icon="shield-check"] { --icon: url(/images.svg?v=fbc2034a9f49#i-shield-check); }
.left-item[data-icon="check-circle"] { --icon: url(/images.svg?v=fbc2034a9f49#i-check-circle); }
.left-item[data-icon="mail"] { --icon: url(/images.svg?v=fbc2034a9f49#i-mail); }
.left-item[data-icon="building"] { --icon: url(/images.svg?v=fbc2034a9f49#i-building); }
.left-item[data-icon="user"] { --icon: url(/images.svg?v=fbc2034a9f49#i-user); }
.left-item[data-icon="lock"] { --icon: url(/images.svg?v=fbc2034a9f49#i-lock); }
.left-item[data-icon="calendar"] { --icon: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.left-item[data-icon="monitor"] { --icon: url(/images.svg?v=fbc2034a9f49#i-monitor); }
.left-item[data-icon="home"] { --icon: url(/images.svg?v=fbc2034a9f49#i-home); }
.left-item[data-icon="id-card"] { --icon: url(/images.svg?v=fbc2034a9f49#i-id-card); }
.left-item[data-icon="bell"] { --icon: url(/images.svg?v=fbc2034a9f49#i-bell); }
.left-text { display: grid; min-width: 0; }
.left-name { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
/* Review of part 3 (FI-1, a deviation from 18's one line with an ellipsis): the purpose wraps and is read in full. */
.left-purpose { margin-top: 2px; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); text-wrap: pretty; }
.left-item:hover { background: var(--surface-hover); text-decoration: none; }
.left-item:hover::before { background-color: var(--text-2); }
.left-item[aria-current="page"] { background: var(--selected); box-shadow: inset 3px 0 0 var(--action); }
.left-item[aria-current="page"]::before { background-color: var(--action-soft-text); }
.left-item[aria-current="page"] .left-name { font-weight: var(--fw-semibold); }
/* Settings' foot: one quiet line to the person's own things. */
.left-foot { margin: var(--s-2) var(--s-3) var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--divider); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.left-foot a { font-weight: var(--fw-medium); }

/* The title row: the purpose under the section's name; the link back to the list is a phone's only. */
main > header .left-subtitle { max-width: 72ch; }
.left-back { display: none; }
main > header h1:focus:not(:focus-visible) { outline: none; }

/* ---- My account › Security ---------------------------------------------------------------------------------------------- */
#account-email-problems { margin: 0 0 var(--s-5); }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: var(--card-gap); margin-bottom: var(--s-5); }
.account-grid > .card { display: flex; flex-direction: column; margin: 0; }
.account-form-card > :is(h2, h3) { margin: 0 0 var(--s-4); font-size: var(--fs-16); line-height: var(--lh-16); }
/* The form is a column whose action row keeps to the card's foot, so the two cards' buttons line up. */
.account-form-card > form { display: flex; flex: 1; flex-direction: column; gap: var(--s-4); }
.account-form-card > form > .form-actions { margin-top: auto; }
.account-form-card > form > .form-error { margin: 0; }
.account-form-card > form > .form-error:empty { display: none; }
.account-form-card > .notice { margin: var(--s-4) 0 0; }
#account-security > :is(h2, h3) { margin: 0 0 var(--s-3); font-size: var(--fs-16); line-height: var(--lh-16); }
#account-security .warning-note { margin: 0 0 var(--s-3); }
#account-security .link-row { margin: var(--s-4) 0 0; }
#account-security > :is(h3, h4):not(:first-child) { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); }

/* ---- My account › Preferences ------------------------------------------------------------------------------------------- */
.prefs-card > .card-head { margin-bottom: var(--s-2); }
.pref-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); padding: var(--s-4) 0; border-top: 1px solid var(--divider); }
.pref-row:first-child { border-top: 0; }
.pref-row:last-child { padding-bottom: 0; }
.pref-text { flex: 1 1 260px; min-width: 0; }
.pref-name { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
.pref-hint { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.pref-control { flex: none; max-width: 100%; }
.pref-density .density-label { display: none; }
.theme-choice > button { display: inline-flex; align-items: center; gap: 6px; }
.theme-choice > button::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.theme-choice > [data-theme="light"] { --icon: url(/images.svg?v=fbc2034a9f49#i-sun); }
.theme-choice > [data-theme="dark"] { --icon: url(/images.svg?v=fbc2034a9f49#i-moon); }
.theme-choice > [data-theme="system"] { --icon: url(/images.svg?v=fbc2034a9f49#i-monitor); }
.pref-check { white-space: nowrap; }

/* ---- Tablets: the menu at 200 px with the names only; the purpose is the section's subtitle ---------------------------- */
@media (max-width: 1023.98px) {
  .left-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 0 var(--s-6); }
  .left-item { align-items: center; padding: var(--s-2) var(--s-3); }
  .left-purpose { display: none; }
  .left-foot { margin-inline: var(--s-2); }
}

/* ---- Phones: the list is the app's first screen; a section opens on its own, with a link back to the list ---------------- */
@media screen and (max-width: 767.98px) {
  .left-layout { display: block; }
  .left-layout:not(.is-list) > .left-menu { display: none; }
  .left-layout.is-list > .left-body { display: none; }
  .left-menu { position: static; max-height: none; padding: 0; overflow: hidden; }
  .left-menu > ul { gap: 0; }
  .left-menu > ul > li + li { border-top: 1px solid var(--divider); }
  .left-item { grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; min-height: 56px; padding: var(--s-2) var(--s-4); border-radius: 0; }
  .left-item::before { width: 22px; height: 22px; background-color: var(--action-soft-text); }
  .left-item::after {
    content: "";
    width: 16px;
    height: 16px;
    background-color: var(--text-3);
    -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat;
    mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat;
  }
  .left-purpose { display: block; }
  .left-foot { margin: 0; padding: var(--s-3) var(--s-4) var(--s-4); }
  main.left-listing > header .eyebrow, main.left-listing > header .left-subtitle { display: none; }
  main:not(.left-listing) > header:has(.left-back:not([hidden])) .eyebrow { display: none; }
  .left-back {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 32px;
    margin: 0 0 var(--s-1) -4px;
    color: var(--link);
    font-size: var(--fs-14);
    line-height: var(--lh-14);
    font-weight: var(--fw-medium);
    text-decoration: none;
  }
  .left-back::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: currentColor;
    transform: rotate(180deg);
    -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat;
    mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat;
  }
  .pref-control, .pref-control > * { width: 100%; }
  .pref-control .segmented { display: flex; }
  .pref-control .segmented > button { flex: 1 1 0; justify-content: center; }
  .pref-check { white-space: normal; }
  /* A list toolbar leaves its Rows switch out on a phone (its lists are cards); Preferences keeps it, for the tables that scroll. */
  .pref-control > .density-switch.pref-density { display: flex; }
  .pref-density > .segmented { flex: 1 1 auto; }
}
/* Phones turned sideways: the bar scrolls away, so the menu does too. */
@media (max-height: 500px) and (orientation: landscape) {
  .left-menu { position: static; max-height: none; }
}
@media (pointer: coarse) {
  .left-item, .left-back { min-height: var(--target); }
}
@media (forced-colors: active) {
  .left-item::before, .left-item::after, .left-back::before, .theme-choice > button::before { forced-color-adjust: none; background-color: CanvasText; }
  .left-item[aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -2px; }
}
@media print {
  .left-menu, .left-back { display: none !important; }
  .left-layout { display: block; }
}

/* ==== The Settings sections (L3.4; DESIGN_SYSTEM.md 18, row 3.5's component work, inside L3.3's frame) ================= */
/* Users & access (the users table with avatars, role tags and the row menu, the invite card, pending invitations, the
   client portal), "What can this person do?" and the Add access stepper with its short role cards; Roles (role cards and
   the permission matrix, each role a fold with its headings in view); Controls (the status summary, the decisions, the
   folded forms, the duty rules as a compact table with a fold each); Approvals (the checklist's progress, the rules as
   cards, Coverage as a list); Email and background jobs (the counts as tiles, the queue with pills and Retry); Company (the
   profile in titled sections, the rates as rows, the report compact); My account › Security's recent sign-ins. */

/* ---- Shared: a fold under a card's head, person cells, role tags, a list card's subheading ----------------------------- */
.left-body .card > .card-head + details.more { margin: calc(var(--s-2) * -1) 0 var(--s-4); }
.left-body .list-head > details.more { margin: var(--s-2) 0 0; }
.left-body .list-head > :is(.warning-note, .hint, .notice, .form-error:not(:empty)) { margin: var(--s-3) 0 0; }
.left-body .list-head > .form-error:empty { display: none; }
.left-body .card-head .card-sub { max-width: 72ch; }
.tag.tone-action { background: var(--action-soft-bg); color: var(--action-soft-text); }
td.person-cell > .person-email { color: var(--text); font-weight: var(--fw-medium); }
td.person-cell > .inline-badge { margin-left: var(--s-2); }
.list-subhead { margin: 0; padding: var(--s-5) var(--card-pad) var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-14); line-height: var(--lh-14); }
.list-subhead + .scroll { border-top: 1px solid var(--border); }
.form-grid > .scope-banner { grid-column: 1 / -1; justify-self: start; margin: 0; }
.form-grid > :is(h3, .span-2) { grid-column: 1 / -1; }
.form-grid > h3 { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); }
.form-grid > .hint { margin: 0; }

/* ---- Users & access: the users, invitations and client logins --------------------------------------------------------- */
.users-table td.person-cell { min-width: 280px; }
.users-table td.action-buttons, .invites-table td.action-buttons, .clients-table td.action-buttons, .client-invites-table td.action-buttons { width: 1%; white-space: nowrap; text-align: right; }
.users-table td.action-buttons > select { width: auto; min-width: 164px; min-height: var(--row-btn-h); margin: 3px 0; padding: 4px 30px 4px 10px; font-size: var(--fs-13); line-height: 18px; background-position: right 8px center; vertical-align: middle; }
.users-table td.action-buttons > .row-actions { display: inline-flex; margin: 3px 0 3px var(--s-2); vertical-align: middle; }
.invite-columns { align-items: start; }
.left-body .client-invite-columns { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.invites-table td:nth-child(3) { white-space: nowrap; }
.left-body .list-head > h2 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.left-body .list-head > h2 + .card-sub { margin-top: 2px; }
/* Review of part 3 (V12): a card whose heading only repeats the page title shows a short title of its own (an h3). */
.left-body :is(.list-head, .card-head) .card-title { margin: 0; color: var(--text); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-semibold); }
.left-body :is(.list-head, .card-head) .card-title + .card-sub { margin-top: 2px; }
.invite-columns > .card { margin-bottom: var(--s-5); }
form.form-grid.invite-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.invite-form > .form-actions, #client-invite-form > .form-actions { margin: 0; }
/* Review of part 3 (FI-6, V8): the fields fill their columns, so the send button's right edge meets the Role (or Client email)
   field's right edge. */
:is(.invite-form, #client-invite-form) > label > :is(input, select) { width: 100%; }
#member-invite-error:empty, #client-invite-error:empty { display: none; }
#member-invite-error:not(:empty), #client-invite-error:not(:empty) { margin: var(--s-3) 0 0; }
#member-invite-result, #member-invite-share, #client-invite-result { display: grid; gap: var(--s-3); }
#member-invite-result { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
:is(#member-invite-result, #client-invite-result) .notice { margin: 0; }
:is(#member-invite-share, #client-invite-result) > div { display: flex; }
.invites-card .scroll { min-height: 0; }
#clients-card > .client-invite-columns { margin: 0; padding: var(--s-5) var(--card-pad) var(--card-pad); border-top: 1px solid var(--border); background: var(--surface-sunken); }
#client-invite-form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.client-invite-side { max-width: 760px; }
.client-invite-side:not(:has(#client-invite-result:not([hidden]), #client-invite-error:not(:empty))) { display: none; }
#clients-card .clients-table td:nth-child(2), #clients-card .client-invites-table td:nth-child(2) { color: var(--text-2); }

/* ---- What can this person do? ------------------------------------------------------------------------------------------ */
.access-person .person-pick { max-width: 420px; }
.access-person .person-access > .notice { margin: var(--s-4) 0; }
.access-person .person-access > h3 { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); }
.access-person .person-access .scroll { border: 1px solid var(--border); border-radius: var(--r-md); }
.person-actions td:first-child { color: var(--text); font-weight: var(--fw-medium); }
.person-actions td:last-child { color: var(--text-3); }

/* ---- Add access: a vertical stepper (numbered steps, done and current from what is chosen) ---------------------------- */
.access-wizard > form { display: block; }
.wizard-step { position: relative; min-width: 0; margin: 0; padding: 0 0 var(--s-6); border: 0; border-radius: 0; }
.wizard-step::before { content: ""; position: absolute; top: 40px; bottom: var(--s-2); left: 15px; width: 2px; border-radius: 1px; background: var(--border); }
.wizard-step.is-done::before { background: var(--action); }
.wizard-step > legend { float: left; display: flex; align-items: center; gap: var(--s-3); width: 100%; margin: 0 0 var(--s-3); padding: 0; color: var(--text); font: var(--fw-semibold) var(--fs-16) / var(--lh-16) var(--font-display); }
.wizard-step > legend + * { clear: both; }
.wizard-step > :not(legend) { margin-left: 44px; }
.wizard-step > * + :not(legend) { margin-top: var(--s-3); }
.step-lead { flex: none; display: block; line-height: 0; }
.step-num { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-full); background: var(--surface); box-shadow: inset 0 0 0 2px var(--border-control); color: var(--text-2); font: var(--fw-semibold) var(--fs-14) / 1 var(--font); }
.wizard-step.is-current .step-num { background: var(--action); box-shadow: none; color: var(--action-text); }
.wizard-step.is-done .step-num { background: var(--action-soft-bg); box-shadow: none; color: transparent; }
.wizard-step.is-done .step-num::before { content: ""; grid-area: 1 / 1; width: 16px; height: 16px; background-color: var(--action-soft-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.wizard-step:not(.is-current):not(.is-done) .step-name { color: var(--text-2); }
.wizard-step > label { max-width: 420px; }
.wizard-step > .pair { max-width: 560px; }
.wizard-step > .hint { margin-bottom: 0; }
.wizard-step > details.more { margin-top: var(--s-1); }
.wizard-end { display: grid; justify-items: start; gap: var(--s-3); margin-left: 44px; }
.wizard-end > .form-error { margin: 0; }
.wizard-end > .form-error:empty { display: none; }

/* ---- Role cards: an icon, the name and its tags, one line, how many hold it, and "What it allows" folded ------------ */
.role-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-3) 0 0; }
.role-card { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; height: 100%; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.role-card-head { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 2px var(--s-3); }
.role-icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--action-soft-bg); color: var(--action-soft-text); }
.role-icon::before { content: ""; width: 20px; height: 20px; background-color: currentColor; -webkit-mask: var(--icon, url(/images.svg?v=fbc2034a9f49#i-layers)) center / contain no-repeat; mask: var(--icon, url(/images.svg?v=fbc2034a9f49#i-layers)) center / contain no-repeat; }
.role-card-head > :is(h2, h3) { grid-column: 2; margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.role-card-head > :is(h2, h3):last-child { grid-row: 1 / span 2; }
.role-tags { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px; }
.role-line { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.role-count { margin: auto 0 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.role-more { margin: 0; padding-top: var(--s-2); border-top: 1px solid var(--divider); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.role-more > summary { display: inline-flex; align-items: center; gap: 4px; color: var(--link); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
.role-more > summary::-webkit-details-marker { display: none; }
.role-more > summary::after { content: ""; width: 14px; height: 14px; background-color: currentColor; transition: transform var(--dur-2) var(--ease-out); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; }
.role-more[open] > summary::after { transform: rotate(180deg); }
.role-more > :not(summary) { margin: var(--s-2) 0 0; }
.role-more > .card-lines { padding-left: 18px; }
.role-more > .card-lines > li + li { margin-top: 2px; }
.role-more > .card-lines strong { color: var(--text); font-weight: var(--fw-medium); }
.role-card[data-icon="shield-check"] { --icon: url(/images.svg?v=fbc2034a9f49#i-shield-check); }
.role-card[data-icon="journal"] { --icon: url(/images.svg?v=fbc2034a9f49#i-journal); }
.role-card[data-icon="eye"] { --icon: url(/images.svg?v=fbc2034a9f49#i-eye); }
.role-card[data-icon="user"] { --icon: url(/images.svg?v=fbc2034a9f49#i-user); }
.role-card[data-icon="users"] { --icon: url(/images.svg?v=fbc2034a9f49#i-users); }
.role-card[data-icon="customer"] { --icon: url(/images.svg?v=fbc2034a9f49#i-customer); }
.role-card[data-icon="supplier"] { --icon: url(/images.svg?v=fbc2034a9f49#i-supplier); }
.role-card[data-icon="calendar"] { --icon: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.role-card[data-icon="clock"] { --icon: url(/images.svg?v=fbc2034a9f49#i-clock); }
.role-card[data-icon="monitor"] { --icon: url(/images.svg?v=fbc2034a9f49#i-monitor); }
.role-card[data-icon="invoice"] { --icon: url(/images.svg?v=fbc2034a9f49#i-invoice); }
.role-card[data-icon="bill"] { --icon: url(/images.svg?v=fbc2034a9f49#i-bill); }
.role-card[data-icon="coins"] { --icon: url(/images.svg?v=fbc2034a9f49#i-coins); }
.role-card[data-icon="check-circle"] { --icon: url(/images.svg?v=fbc2034a9f49#i-check-circle); }
.role-card[data-icon="bank"] { --icon: url(/images.svg?v=fbc2034a9f49#i-bank); }
.role-card[data-icon="search"] { --icon: url(/images.svg?v=fbc2034a9f49#i-search); }
.role-card[data-icon="layers"] { --icon: url(/images.svg?v=fbc2034a9f49#i-layers); }
/* In the picker the whole card is the choice: the radio sits in its corner, a chosen card has the action edge. */
.role-option { position: relative; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; font-weight: var(--fw-regular); cursor: pointer; }
.role-option > input[type="radio"] { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 1; width: 18px; height: 18px; margin: 0; }
.role-option > .role-card { padding-right: calc(var(--s-4) + 26px); }
.role-option:hover > .role-card { border-color: var(--border-strong); }
.role-option:has(> input:checked) > .role-card { border-color: var(--action); background: var(--selected); box-shadow: inset 0 0 0 1px var(--action); }
.role-option:has(> input:focus-visible) > .role-card { outline: 2px solid var(--focus); outline-offset: 2px; }
.role-option.is-disabled { cursor: not-allowed; }
.role-option.is-disabled > .role-card { background: var(--surface-sunken); }
.role-option.is-disabled > .role-card > :not(.role-more) { opacity: .6; }
.role-option > .not-grantable { margin: 0; padding: 0 var(--s-1); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
/* "More roles" and "Copy a role": a quiet fold under the recommended ones. */
:is(details.more-roles, details.copy-template) { margin-top: var(--s-4); }
:is(details.more-roles, details.copy-template) > summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); padding: 0 var(--s-3); border: 1px solid var(--border-control); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
:is(details.more-roles, details.copy-template) > summary::-webkit-details-marker { display: none; }
:is(details.more-roles, details.copy-template) > summary::after { content: ""; width: 16px; height: 16px; background-color: currentColor; transition: transform var(--dur-2) var(--ease-out); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; }
:is(details.more-roles, details.copy-template)[open] > summary::after { transform: rotate(180deg); }
:is(details.more-roles, details.copy-template) > summary:hover { background: var(--surface-hover); }
details.copy-template > :not(summary) { max-width: 760px; }
details.copy-template > .hint { margin: var(--s-3) 0; }
details.copy-template > form { padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
details.copy-template > form > button { justify-self: start; }
.update-card { margin: 0 0 var(--s-4); }
.update-card h3 { margin: 0 0 var(--s-1); font-size: var(--fs-14); line-height: var(--lh-14); }
.update-card .link-row { margin-top: var(--s-3); }

/* ---- The permission matrix: each role a fold; inside, a compact table whose headings stay in view ---------------------- */
.permission-matrix > .card-head { flex-wrap: wrap; }
.matrix-tools { flex: none; margin: 0; gap: var(--s-2); }
.matrix-tools > :is(button, a) { gap: var(--s-2); }
.matrix-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); }
.matrix-template + .matrix-template { border-top: 1px solid var(--divider); }
.matrix-template > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 2px var(--s-3); padding: var(--s-3) var(--s-4); cursor: pointer; list-style: none; }
.matrix-template > summary::-webkit-details-marker { display: none; }
.matrix-template > summary:hover { background: var(--surface-hover); }
.matrix-template > summary > h3 { grid-column: 1; margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); }
.matrix-template > summary > p { grid-column: 1; margin: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.matrix-template > summary > .matrix-count { grid-column: 2; grid-row: 1 / span 2; }
.matrix-template > summary::after { content: ""; grid-column: 3; grid-row: 1 / span 2; width: 16px; height: 16px; background-color: var(--text-3); transition: transform var(--dur-2) var(--ease-out); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; }
.matrix-template[open] > summary { background: var(--surface-sunken); }
.matrix-template[open] > summary::after { transform: rotate(180deg); }
.matrix-scroll { max-height: min(60vh, 560px); overflow: auto; border-top: 1px solid var(--divider); }
.matrix-table thead th { position: sticky; top: 0; z-index: var(--z-sticky); }
.matrix-table td:first-child { color: var(--text); font-weight: var(--fw-medium); }
.matrix-table td:last-child { color: var(--text-2); white-space: nowrap; }
.matrix-rules > h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); }

/* ---- The duty rules: a compact table, each rule a fold with what it forbids ------------------------------------------- */
.scroll.rule-list { border: 1px solid var(--border); border-radius: var(--r-md); }
.rule-table td:first-child { width: 100%; white-space: normal; }
.rule-table td:last-child { white-space: nowrap; }
.rule-fold > summary { display: flex; align-items: baseline; gap: var(--s-2); color: var(--text); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
.rule-fold > summary::-webkit-details-marker { display: none; }
.rule-fold > summary::before { content: ""; flex: none; width: 14px; height: 14px; background-color: var(--text-3); transform: rotate(-90deg) translateX(-2px); transition: transform var(--dur-2) var(--ease-out); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; }
.rule-fold[open] > summary::before { transform: translateY(2px); }
.rule-id { flex: none; padding: 1px 6px; border-radius: var(--r-sm); background: var(--neutral-bg); color: var(--neutral-text); font: var(--fw-medium) var(--fs-12) / var(--lh-12) var(--font-mono); }
.rule-fold > p { max-width: 76ch; margin: var(--s-2) 0 var(--s-1) 22px; color: var(--text-2); }

/* ---- Controls: the status summary, the decisions, the folded forms, the queue, the bank changes and the reveal log ---- */
.controls-summary { margin: 0 0 var(--card-gap); }
.controls-line { margin: 0 0 var(--s-3); color: var(--text); font: var(--fw-semibold) var(--fs-16) / var(--lh-16) var(--font-display); }
.metrics.stat-strip.controls-tiles, .metrics.stat-strip.queue-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.metrics.stat-strip.queue-tiles { margin-top: var(--s-4); box-shadow: none; }
.metrics.stat-strip:is(.controls-tiles, .queue-tiles) > article > strong { font-size: var(--fs-20); line-height: var(--lh-20); }
.controls-card > h3, .controls-card > .scroll + h3, .controls-card > details + h3 { margin: var(--s-6) 0 var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); }
.controls-card > .card-head + h3 { margin-top: 0; }
.controls-card > .scroll { border: 1px solid var(--border); border-radius: var(--r-md); }
.controls-card > .scroll + .hint, .controls-card > h3 + .hint { margin: 0 0 var(--s-2); }
.controls-card > .button-link { margin-bottom: var(--s-2); }
dl.details.controls-decisions { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: 0; margin: 0 0 var(--s-4); overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); font-size: var(--fs-14); line-height: var(--lh-14); }
dl.controls-decisions > :is(dt, dd) { margin: 0; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--divider); }
dl.controls-decisions > :is(dt, dd):nth-child(-n + 2) { border-top: 0; }
dl.controls-decisions > dt { color: var(--text-2); font-weight: var(--fw-medium); }
dl.controls-decisions > dd { display: flex; align-items: baseline; gap: var(--s-2); color: var(--text); }
dl.controls-decisions > dd::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--success-dot); transform: translateY(-1px); }
dl.controls-decisions > dd.decision-dual::before { background: var(--info-dot); }
dl.controls-decisions > dd.decision-waived { color: var(--warning-text); font-weight: var(--fw-medium); }
dl.controls-decisions > dd.decision-waived::before { background: var(--warning-dot); }
.controls-card > :is(.warning-note, .notice) { margin: 0 0 var(--s-3); }
details.form-fold { margin-top: var(--s-4); }
details.form-fold > summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); padding: 0 var(--s-4); border: 1px solid var(--border-control); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
details.form-fold > summary::-webkit-details-marker { display: none; }
details.form-fold > summary::after { content: ""; width: 16px; height: 16px; background-color: currentColor; transition: transform var(--dur-2) var(--ease-out); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; }
details.form-fold > summary:hover { background: var(--surface-hover); }
details.form-fold[open] > summary { margin-bottom: var(--s-4); }
details.form-fold[open] > summary::after { transform: rotate(180deg); }
details.form-fold > form { max-width: 760px; padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
details.form-fold > form > button[type="submit"], details.form-fold > form > button:last-child { justify-self: start; }
.decide-form fieldset { display: grid; gap: var(--s-2); }
.decide-form fieldset > legend + * { margin-top: 0; }
.decide-form .compulsory { display: grid; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.review-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.review-action > p { flex-basis: 100%; margin: 0; }
.review-action > input { width: auto; min-width: 200px; min-height: var(--row-btn-h); padding: 4px 8px; font-size: var(--fs-13); }
.bank-changes { margin: var(--s-2) 0 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--r-md); }
.bank-changes > li { padding: var(--s-3) var(--s-4); border-top: 1px solid var(--divider); font-size: var(--fs-13); line-height: var(--lh-13); }
.bank-changes > li:first-child { border-top: 0; }
.bank-changes > li > strong { color: var(--text); }
.bank-change { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-1) 0 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.bank-change > p { flex-basis: 100%; margin: 0; }
.bank-change > input { width: auto; min-width: 220px; min-height: var(--row-btn-h); padding: 4px 8px; font-size: var(--fs-13); }
.reveal-filter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: var(--s-3); margin: 0 0 var(--s-3); }
.reveal-filter > label { min-width: 0; }
.reveal-filter + .button-link { margin-bottom: var(--s-2); }

/* ---- Approvals: the checklist's progress, the rules as cards, Coverage as a list --------------------------------------- */
.approval-rules-card > [role="status"]:empty { display: none; }
.checklist-block { margin: 0 0 var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
.checklist-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-3); }
.checklist-head > h3 { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); }
.checklist-head > .checklist-count { padding: 0; border-radius: 0; background: none; color: var(--text-3); font-weight: var(--fw-regular); }
.checklist-bar { display: flex; flex: 1 1 160px; gap: 4px; max-width: 280px; margin-left: auto; }
.checklist-bar > span { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--border-strong); }
.checklist-bar > span.is-done { background: var(--action); }
ul.warning-list.approval-checklist { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
ul.approval-checklist > li > .status-badge { margin-right: var(--s-1); }
ul.approval-checklist > li > .hint { display: block; margin: 2px 0 0; }
.approval-rule-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
article.approval-rule { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-content: start; gap: 0 var(--s-4); min-width: 0; padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
article.approval-rule::before, article.approval-rule::after { content: ""; grid-area: 1 / 1 / span 2 / 2; align-self: start; justify-self: center; }
article.approval-rule::before { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--neutral-bg); }
article.approval-rule::after { width: 20px; height: 20px; margin-top: 10px; background-color: var(--neutral-text); -webkit-mask: var(--icon, url(/images.svg?v=fbc2034a9f49#i-journal)) center / contain no-repeat; mask: var(--icon, url(/images.svg?v=fbc2034a9f49#i-journal)) center / contain no-repeat; }
article.approval-rule[data-kind="leave"] { --icon: url(/images.svg?v=fbc2034a9f49#i-calendar); }
article.approval-rule[data-kind="leave"]::before { background: var(--violet-bg); }
article.approval-rule[data-kind="leave"]::after { background-color: var(--violet-text); }
article.approval-rule[data-kind="timesheet"] { --icon: url(/images.svg?v=fbc2034a9f49#i-clock); }
article.approval-rule[data-kind="timesheet"]::before { background: var(--warning-bg); }
article.approval-rule[data-kind="timesheet"]::after { background-color: var(--warning-text); }
article.approval-rule[data-kind="bill"] { --icon: url(/images.svg?v=fbc2034a9f49#i-bill); }
article.approval-rule[data-kind="bill"]::before { background: var(--info-bg); }
article.approval-rule[data-kind="bill"]::after { background-color: var(--info-text); }
article.approval-rule[data-kind="payroll"] { --icon: url(/images.svg?v=fbc2034a9f49#i-coins); }
article.approval-rule[data-kind="payroll"]::before { background: var(--success-bg); }
article.approval-rule[data-kind="payroll"]::after { background-color: var(--success-text); }
article.approval-rule[data-kind="payment"] { --icon: url(/images.svg?v=fbc2034a9f49#i-bank); }
article.approval-rule > * { grid-column: 2; min-width: 0; }
article.approval-rule > h3 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
article.approval-rule > .approval-sentence { margin: var(--s-1) 0 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); }
article.approval-rule > .hint { margin: var(--s-2) 0 0; font-size: var(--fs-12); line-height: var(--lh-12); }
article.approval-rule > .action-buttons { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
article.approval-rule > .action-buttons > * { margin: 0; }
article.approval-rule > div:not(.action-buttons) { grid-column: 1 / -1; }
/* Review of part 3 (V11): the re-route offer keeps to the card's text column; the sentence starts with a capital on screen. */
article.approval-rule > div.notice { grid-column: 2; }
.approval-sentence > .sentence-rest { display: block; }
.approval-sentence > .sentence-rest::first-letter { text-transform: uppercase; }
/* Review of part 3 (V12): a reader without the rules sees one quiet line above the register, not an untitled card. */
.approval-rules-card.rules-note { padding: 0; border: 0; background: none; box-shadow: none; }
.approval-rules-card.rules-note :is(.card-title, .card-sub), .approval-rules-card.rules-note > details.more { display: none; }
.approval-rules-card.rules-note > .card-head { margin: 0; }
article.approval-rule > div:not(.action-buttons):empty { display: none; }
article.approval-rule > .notice { margin: var(--s-4) 0 0; }
article.approval-rule > .notice > button { margin-top: var(--s-2); }
/* An open edit form takes the whole row, so its fields have room. */
.approval-rule-cards > article.approval-rule:has(form) { grid-column: 1 / -1; }
.approval-settings-form > :not(.action-buttons) { max-width: 760px; }
/* Review of part 3 (V9): each named approver is a row of its own (a step of space between rows), its tick level with its
   limit field; an amount field is as wide as an amount. */
.approval-settings-form fieldset > .pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 168px); align-items: end; gap: var(--s-3); }
.approval-settings-form fieldset > .pair + .pair { margin-top: var(--s-4); }
.approval-settings-form fieldset > .pair > label.check { align-self: end; display: flex; align-items: center; min-width: 0; min-height: var(--control-h); margin: 0; }
.approval-settings-form fieldset > .pair > label.check > span { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.approval-settings-form > label > input[inputmode="decimal"], .approval-settings-form > label > input[type="number"] { max-width: 200px; }
.approval-settings-form { margin-top: var(--s-4); padding: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
.approval-settings-form > h3 { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); }
.approval-settings-form > :is(.hint, .notice) { margin: 0; }
.approval-settings-form .pair { flex-wrap: wrap; align-items: end; }
.coverage-table td { white-space: normal; }
.coverage-table td.person-cell { min-width: 200px; }
.coverage-table td.coverage-warn { min-width: 300px; }
.coverage-table td.coverage-warn > p.warning-note { margin: 0; padding: 6px 10px 6px 32px; font-size: var(--fs-12); line-height: var(--lh-12); }
.coverage-table td.coverage-warn > p.warning-note::before { top: 7px; left: 10px; width: 14px; height: 14px; }
.coverage-table td.coverage-warn > p.warning-note + p.warning-note { margin-top: var(--s-1); }
.coverage-table td.coverage-warn .status-badge.badge-blocking { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.coverage-table td.coverage-warn button { margin-top: var(--s-1); }

/* ---- Email and background jobs: the queue -------------------------------------------------------------------------- */
.queue-card .list-head > .notice { margin-top: var(--s-4); }
.queue-card .list-head > .notice > .action-buttons { margin-top: var(--s-3); }
.queue-table td.job-why { min-width: 200px; max-width: 320px; white-space: normal; }
.queue-table td.job-why > small { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.queue-table td:nth-child(6) { min-width: 112px; white-space: normal; }
.queue-table td.action-buttons { width: 1%; white-space: nowrap; }
.queue-table td.job-why > :is(small, p) { display: block; margin: 2px 0 0; }
.queue-table td:first-child { min-width: 180px; white-space: normal; }
.queue-table td.job-to { overflow-wrap: break-word; white-space: normal; }
.queue-table .job-what { color: var(--text); font-weight: var(--fw-medium); }
.queue-table .job-recipient { display: none; }
.queue-table > tbody > tr[data-state="dead"] > td:first-child { box-shadow: inset 3px 0 0 var(--danger-dot); }
.queue-table :is(th, td).job-attempts { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.left-body label > small.hint { display: block; margin-top: var(--s-1); font-weight: var(--fw-regular); }

/* Review of part 3 (V14): Controls' reviewed items fold like every other fold: no marker, the chevron after the words. */
details.reviewed-fold { margin-top: var(--s-4); }
details.reviewed-fold > summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 32px; color: var(--link); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); cursor: pointer; list-style: none; }
details.reviewed-fold > summary::-webkit-details-marker { display: none; }
details.reviewed-fold > summary::after { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; }
details.reviewed-fold[open] > summary::after { transform: rotate(180deg); }
details.reviewed-fold > .scroll { margin-top: var(--s-2); }
.reviewed-none { margin: var(--s-4) 0 0; }
@media (pointer: coarse) { details.reviewed-fold > summary { min-height: var(--target); } }
@media (forced-colors: active) { details.reviewed-fold > summary::after { forced-color-adjust: none; background-color: CanvasText; } }

/* ---- Company: the profile in titled sections, the rates as rows, the report compact, the link card ------------------- */
.left-body form.settings-grid { max-width: 760px; }
.left-body form.settings-grid > .form-actions { margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.left-body form.settings-grid > fieldset.form-section > .form-grid { margin: 0; }
#entity-form > .form-actions { justify-content: space-between; }
#entity-status { margin: 0; }
#entity-status:empty { visibility: hidden; }
.rate-period { max-width: 760px; margin: 0 0 var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--divider); }
#group-rate-list { max-width: 760px; margin: var(--s-5) 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); }
#group-rate-list:empty { display: none; }
.rate-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-1) var(--s-4); margin: 0; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--divider); font-size: var(--fs-13); line-height: var(--lh-13); }
.rate-row:first-child { border-top: 0; }
.rate-row > strong { color: var(--text); font-variant-numeric: tabular-nums; }
.rate-source { color: var(--text-3); }
#group-summary { margin: var(--s-3) 0 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-variant-numeric: tabular-nums; }
#group-summary:empty { display: none; }
.group-report-table td:first-child { min-width: 220px; color: var(--text); font-weight: var(--fw-medium); white-space: normal; }
.link-card .card-head > .button-link { flex: none; }
.link-card-actions { margin: 0; }
.pair-list:empty { display: none; }
.pair-list > p { margin: 0; padding: var(--s-3) 0; border-top: 1px solid var(--divider); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.pair-list > p:first-child { margin-top: var(--s-3); }

/* ---- My account › Security: the recent sign-ins as rows, when and how ---------------------------------------------- */
.mfa-signins > li { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); align-items: center; gap: var(--s-1) var(--s-4); }
.mfa-signins > li:not([data-method]) { display: block; }
.signin-when { color: var(--text); font-weight: var(--fw-medium); }
.signin-sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signin-how { display: inline-flex; align-items: center; gap: var(--s-2); }
.signin-how::before { content: ""; flex: none; width: 16px; height: 16px; background-color: var(--success-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-shield-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-shield-check) center / contain no-repeat; }
li[data-method="password"] > .signin-how::before { background-color: var(--text-3); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-lock); mask-image: url(/images.svg?v=fbc2034a9f49#i-lock); }

/* ---- Laptop, under 1280 px: role cards two across beside the menu; the queue tiles two by two ---------------------- */
@media (max-width: 1279.98px) {
  .metrics.stat-strip:is(.controls-tiles, .queue-tiles) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approval-rule-cards { grid-template-columns: minmax(0, 1fr); }
  .reveal-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reveal-filter > button { justify-self: start; }
}
/* Review of part 3 (FI-3): Invite a user and Pending invitations are one above the other at every width; side by side
   from 1600 px the pending list had no room for its expiry and Cancel invitation. */
.left-body .invite-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
.invite-card > :is(form, details.more, #member-invite-result) { max-width: 760px; }
/* Beside the menu, a failed email's Retry and Cancel stack, so Cancel is never past the card's edge (L3.7). */
@media (min-width: 768px) and (max-width: 1599.98px) {
  .queue-table td.action-buttons { width: 96px; white-space: normal; }
  .queue-table td.action-buttons > button { margin: 2px 0; }
}
/* ---- Laptop and tablet beside the menu: the short people lists fit their card (no sideways scroll); a person's email
   and their role select may wrap, the select over Change role and its menu ----------------------------------------- */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .left-body .scroll > table:is(.users-table, .invites-table, .clients-table, .client-invites-table) { min-width: 0; }
  .left-body .scroll > table:is(.users-table, .invites-table, .clients-table, .client-invites-table) > :is(thead, tbody, tfoot) > tr > :is(:first-child, .col-actions) { position: static; box-shadow: none; }
  .users-table td.person-cell { min-width: 0; white-space: normal; }
  .users-table td.action-buttons { width: 200px; white-space: normal; text-align: left; }
  .users-table td.action-buttons > select { width: 100%; }
  .users-table td.action-buttons > .row-actions { margin-left: 0; }
  :is(.invites-table, .clients-table, .client-invites-table) td.person-cell { white-space: normal; }
  .invites-table td:nth-child(3) { white-space: normal; }
  :is(.invites-table, .clients-table, .client-invites-table) td.person-cell > .avatar { display: none; }
  :is(.invites-table, .clients-table, .client-invites-table) td.person-cell > .person-email { overflow-wrap: anywhere; }
  .queue-table td:first-child { min-width: 140px; }
  .queue-table :is(th, td):is(:nth-child(2), .job-attempts) { display: none; }
  .queue-table .job-recipient { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-regular); overflow-wrap: anywhere; }
  .queue-table td.job-why { min-width: 0; }
}
/* On a tablet the queue keeps its email (narrow, wrapping) and its actions in view while the middle columns scroll. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .left-body .scroll > table.queue-table { min-width: 0; }
  .queue-table td:first-child { width: 160px; min-width: 160px; white-space: normal; }
  .queue-table td.col-status { white-space: nowrap; }
}
/* On a laptop the queue fits its card; on a tablet it scrolls with its email and actions in view (as part 2's lists do). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .left-body .scroll > table.queue-table { min-width: 0; }
  .left-body .scroll > table.queue-table > :is(thead, tbody) > tr > :first-child { position: static; }
  .left-body .scroll > table.queue-table > :is(thead, tbody) > tr > .col-actions { position: static; box-shadow: none; }
}
/* ---- Tablet, under 1024 px: the role cards one or two across; a person's actions under the name ------------------- */
@media (max-width: 1023.98px) {
  .role-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .users-table td.person-cell { min-width: 220px; }

  .permission-matrix > .card-head { flex-direction: column; }
}
/* ---- Phone, under 768 px ------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  form.form-grid.invite-form, #client-invite-form, .left-body form.settings-grid, .left-body form.settings-grid .form-grid { grid-template-columns: minmax(0, 1fr); }
  .wizard-step > :not(legend), .wizard-end { margin-left: 0; }
  .wizard-step::before { display: none; }
  .wizard-step { padding-bottom: var(--s-5); }
  .wizard-step + .wizard-step, .wizard-end { padding-top: var(--s-5); border-top: 1px solid var(--divider); }
  .wizard-end > button { width: 100%; }
  .role-cards { grid-template-columns: minmax(0, 1fr); }
  .metrics.stat-strip:is(.controls-tiles, .queue-tiles) > article { padding: var(--s-3) var(--s-4); }
  .reveal-filter { grid-template-columns: minmax(0, 1fr); }
  .reveal-filter > button { width: 100%; }
  dl.details.controls-decisions { grid-template-columns: minmax(0, 1fr); }
  dl.controls-decisions > dd { padding-top: 0; border-top: 0; }
  dl.controls-decisions > dt:nth-child(n + 3) { border-top: 1px solid var(--divider); }
  details.form-fold > form, details.copy-template > form, .approval-settings-form { padding: var(--s-4); }
  .checklist-bar { flex-basis: 100%; max-width: none; margin-left: 0; }
  article.approval-rule { padding: var(--s-4); }
  .users-table td.action-buttons > select { width: 100%; min-width: 0; }
  .users-table td.action-buttons > .row-actions { margin-left: 0; }
  .users-table td.action-buttons, .invites-table td.action-buttons, .clients-table td.action-buttons, .client-invites-table td.action-buttons { width: auto; text-align: left; }
  .users-table td.person-cell, .coverage-table td.person-cell, .coverage-table td.coverage-warn, .queue-table td:first-child, .queue-table td.job-why { min-width: 0; }
  .coverage-table td.coverage-warn > p.warning-note { padding-left: 32px; }
  .matrix-template > summary { padding-inline: var(--s-3); }
  .mfa-signins > li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .approval-settings-form fieldset > .pair { grid-template-columns: minmax(0, 1fr); }
  .rate-row { display: grid; }
  .queue-table :is(th, td).job-attempts { text-align: left; }
  .queue-table > tbody > tr[data-state="dead"] > td:first-child { box-shadow: none; }
  .queue-table td.action-buttons > button { margin-right: var(--s-2); }
  .link-card .card-head { flex-direction: column; }
  #entity-form > .form-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
}
@media (pointer: coarse) {
  :is(details.more-roles, details.copy-template, details.form-fold) > summary, .role-more > summary, .rule-fold > summary, .matrix-template > summary { min-height: var(--target); }
  .users-table td.action-buttons > select { min-height: var(--target); }
}
@media (prefers-reduced-motion: reduce) {
  .role-more > summary::after, .matrix-template > summary::after, .rule-fold > summary::before, :is(details.more-roles, details.copy-template, details.form-fold) > summary::after { transition: none; }
}
@media (forced-colors: active) {
  .role-icon::before, article.approval-rule::after, .wizard-step.is-done .step-num::before, .signin-how::before, .role-more > summary::after, .matrix-template > summary::after, .rule-fold > summary::before,
  :is(details.more-roles, details.copy-template, details.form-fold) > summary::after { forced-color-adjust: none; background-color: CanvasText; }
  .role-option:has(> input:checked) > .role-card, .wizard-step.is-current .step-num { outline: 2px solid CanvasText; }
  .checklist-bar > span, dl.controls-decisions > dd::before { forced-color-adjust: none; background: CanvasText; }
  .checklist-bar > span:not(.is-done) { background: GrayText; }
}
/* ---- Print: the permission matrix prints alone, every role and rule open (the Print button opens the folds) --------- */
@media print {
  body.printing-matrix .shell-bar, body.printing-matrix header, body.printing-matrix footer, body.printing-matrix .left-menu, body.printing-matrix .view-panel:not(#roles-panel),
  body.printing-matrix #roles-panel .card:not(.permission-matrix), body.printing-matrix .permission-matrix .link-row { display: none !important; }
  body.printing-matrix .left-layout { display: block; }
  .permission-matrix .matrix-scroll { max-height: none; overflow: visible; }
  .permission-matrix .matrix-table thead th { position: static; }
  .permission-matrix .matrix-template > summary::after, .rule-fold > summary::before { content: none; }
  .permission-matrix table { font-size: 10px; }
  .matrix-template { break-inside: auto; }
  .matrix-template > summary { break-after: avoid; }
}

/* ==== My workspace and the client portal (L3.5; DESIGN_SYSTEM.md 18, rows 3.6 and 3.7) ==================================== */
/* Both pages keep their own bars (no shell mount): My workspace's is the frame's dark band with its links as row 2, the
   person's avatar and Sign out; the client portal's is a lighter one-row bar on the page surface with the client and Sign
   out. Signed out, both wear the L3.1 sign-in layout (their hooks are in that section's selector lists). Signed in, My
   workspace is a two-column grid of cards and the review queues are approval cards (L3.2); the portal has stat tiles, the
   requests as approval cards and its lists as phone cards. */

/* ---- Signed out: the page's own name over the panel's headline; the bar shows the logo alone --------------------------- */
body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden])) > header .eyebrow {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  margin: 0 0 var(--s-3);
  color: var(--shell-accent);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: var(--fw-semibold);
}
body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden])) > header > :is(.header-tools, .header-field) { display: none; }
/* The status line here also says "Please sign in." and "Your account is ready", so it keeps the info tone (the account
   pages' danger tone is for a page that only reports failures). */
body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden])) #message:not(:empty) { background: var(--info-bg); color: var(--info-text); }
body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden])) #message:not(:empty)::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-info); mask-image: url(/images.svg?v=fbc2034a9f49#i-info); }
body:has(> :is(.workspace-bar, .portal-bar)):has(> main > :is(#login, #activation):not([hidden])) > .topbar > nav { display: none; }
/* The invitation's facts and the activation's fold, as on the account pages. */
#activation dl.details { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
#activation dl.details:empty { display: none; }
#activation > details.more { margin: calc(var(--s-2) * -1) 0 var(--s-5); }
#activation .field-group { gap: var(--s-4); padding: 0; border: 0; }

/* ---- My workspace's bar (10.1, 10.10): the band, the person and Sign out on row 1, the page's links as row 2 ----------- */
body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .workspace-bar {
  --bar-pad: max(var(--page-pad), env(safe-area-inset-left));
  position: sticky;
  top: 0;
  z-index: var(--z-shell);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: var(--bar-h) var(--menu-h);
  column-gap: var(--s-3);
}
:root[data-theme="dark"] body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .workspace-bar { border-bottom: 1px solid var(--shell-line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .workspace-bar { border-bottom: 1px solid var(--shell-line); } }
.workspace-bar > .brand { grid-column: 1; grid-row: 1; }
.workspace-bar > .bar-user { grid-column: 3; grid-row: 1; display: flex; align-items: center; gap: var(--s-3); }
.workspace-bar > .build-tag { display: none; }
body:has(> main > #workspace[hidden]) > .workspace-bar > .bar-user { visibility: hidden; }
body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .workspace-bar > nav {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 0;
  min-width: calc(100% + 12px);
  height: var(--menu-h);
  margin-left: -12px;
  background: var(--shell-bg-2);
  box-shadow: 0 0 0 100vmax var(--shell-bg-2);
  clip-path: inset(0 -100vmax);
  scroll-snap-type: x proximity;
}
.topbar.workspace-bar > nav a { height: var(--menu-h); scroll-snap-align: start; }
.topbar.workspace-bar > nav a[aria-current="page"] { color: var(--shell-text); font-weight: var(--fw-semibold); }
.topbar.workspace-bar > nav a[aria-current="page"]::before { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--shell-accent); }
.workspace-bar > nav :focus-visible { outline-offset: -3px; }
.bar-avatar { width: 32px; height: 32px; font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.topbar .bar-signout {
  min-height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--shell-line);
  background: transparent;
  box-shadow: none;
  color: var(--shell-text);
  font-weight: var(--fw-medium);
}
.topbar .bar-signout::before { content: ""; flex: none; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-logout) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-logout) center / contain no-repeat; }
.topbar .bar-signout:where(:not(:disabled):hover) { border-color: var(--shell-muted); background: var(--shell-hover); color: var(--shell-text); }

/* ---- The client portal's bar: one light row (the logo, "Client portal", the client, Sign out) -------------------------- */
body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .portal-bar {
  --bar-pad: max(var(--page-pad), env(safe-area-inset-left));
  position: sticky;
  top: 0;
  z-index: var(--z-shell);
  flex-wrap: nowrap;
  gap: var(--s-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .portal-bar > .brand { background-image: var(--logo-on-surface); }
body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .portal-bar :focus-visible { outline-color: var(--focus); }
.portal-bar > nav { flex: none; }
.topbar.portal-bar > nav strong { height: 24px; padding: 0 0 0 var(--s-3); border-left: 1px solid var(--border); color: var(--text-2); font-weight: var(--fw-medium); }
.topbar.portal-bar > nav strong::before { content: none; }
.portal-bar > .build-tag { display: none; }
.portal-client {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  max-width: 360px;
  height: 32px;
  margin: 0 0 0 auto;
  padding: 0 var(--s-3);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-sunken);
  color: var(--text);
  font-size: var(--fs-13);
  line-height: var(--lh-13);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portal-client::before { content: ""; flex: none; width: 16px; height: 16px; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-building) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-building) center / contain no-repeat; }
.portal-client:empty { display: none; }
.portal-client:empty + .bar-signout { margin-left: auto; }
.portal-bar > .bar-signout { flex: none; border-color: var(--border-control); color: var(--text); }
.portal-bar > .bar-signout:where(:not(:disabled):hover) { border-color: var(--border-control); background: var(--surface-hover); color: var(--text); }
body:has(> main > #portal[hidden]) > .portal-bar > .bar-signout { visibility: hidden; }

/* ---- The title row: the company (and nothing else) on the right ------------------------------------------------------ */
main > header > .header-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
main > header .header-field { min-width: 0; width: 280px; max-width: 100%; }
main > header .header-field select { width: 100%; }

/* ---- My workspace: one grid, two columns of cards from 1024 px ---------------------------------------------------------- */
.workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: var(--card-gap); }
.workspace > *, .workspace-personal > * { grid-column: 1 / -1; min-width: 0; margin: 0; }
.workspace > .workspace-personal { display: contents; }
.workspace-personal > .ws-col { grid-column: auto; display: grid; align-content: start; gap: var(--card-gap); }
.workspace-personal > .ws-col > .card, .workspace-personal > .card { margin: 0; }
.workspace-personal > .ws-payslips, .workspace > .ws-password { grid-column: auto; max-width: none; }
/* Review of part 3 (V17): on the review and manage pages Change my password runs across, its form at the settings width. */
.workspace:has(> #personal[hidden]) > .ws-password { grid-column: 1 / -1; }
.workspace:has(> #personal[hidden]) > .ws-password > form { max-width: 760px; }
/* Review of part 3 (FI-8): no job to book time to: the card's empty state, and no empty "Your submitted time". */
.ws-card > .ws-time-empty { padding: var(--s-4) 0 var(--s-2); }
.ws-card:has(> .ws-time-empty:not([hidden])) > .ws-subhead:has(+ .ws-rows:empty) { display: none; }
.workspace-admin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--card-gap); }
.workspace-admin > * { min-width: 0; margin: 0; }
.workspace-admin > :is(.ws-queue, .ws-roster) { grid-column: 1 / -1; }
.workspace-review { display: grid; gap: var(--s-8); }
.ws-queue { display: grid; gap: var(--s-3); min-width: 0; }
.ws-queue > * { margin: 0; }
.ws-section-head h2 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.ws-queue > .hint { margin: 0; }
.ws-queue > .approval-list { gap: var(--s-3); }
.ws-queue > .approval-list > .empty-state, .ws-queue > .approval-list > .ws-empty { padding: var(--s-8) var(--card-pad); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }

/* A card's head carries a tinted icon tile for what the card is for. */
.ws-card > .card-head { position: relative; min-height: 36px; padding-left: 48px; }
.ws-card > .card-head::before { content: ""; position: absolute; top: 0; left: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--action-soft-bg); }
.ws-card > .card-head::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 18px;
  height: 18px;
  background-color: var(--action-soft-text);
  -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-user) center / contain no-repeat;
  mask: url(/images.svg?v=fbc2034a9f49#i-user) center / contain no-repeat;
}
.ws-card[data-icon="job"] > .card-head::after { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-job); mask-image: url(/images.svg?v=fbc2034a9f49#i-job); }
.ws-card[data-icon="clock"] > .card-head::before { background: var(--warning-bg); }
.ws-card[data-icon="clock"] > .card-head::after { background-color: var(--warning-text); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); }
.ws-card[data-icon="calendar"] > .card-head::before { background: var(--violet-bg); }
.ws-card[data-icon="calendar"] > .card-head::after { background-color: var(--violet-text); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); mask-image: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.ws-card[data-icon="lock"] > .card-head::before { background: var(--neutral-bg); }
.ws-card[data-icon="lock"] > .card-head::after { background-color: var(--neutral-text); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-lock); mask-image: url(/images.svg?v=fbc2034a9f49#i-lock); }
.ws-card > details.more { margin: calc(var(--s-2) * -1) 0 var(--s-4); }

/* The forms: two fields a row, a long field or a note across, the action at the right at its own width. */
form.ws-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--s-4); }
form.ws-form > * { min-width: 0; margin: 0; }
form.ws-form > :is(.ws-wide, .pair, details, .hint, button) { grid-column: 1 / -1; }
form.ws-form > button { justify-self: end; }
form.ws-form > .hint { margin-top: calc(var(--s-2) * -1); }
form.ws-form select, form.ws-form input:not([type="checkbox"], [type="radio"]) { width: 100%; }
#correction-status:empty { display: none; }
#correction-status { margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); font-size: var(--fs-13); line-height: var(--lh-13); }
#cancel-correction { margin-top: var(--s-3); }
.ws-invitation { display: grid; gap: var(--s-2); margin-top: var(--s-4); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
.ws-invitation input { width: 100%; font-family: var(--font-mono); font-size: var(--fs-13); }
.ws-invitation > p { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.ws-password > .form-error:empty { display: none; }
.ws-password > :is(.form-error, .notice) { margin: var(--s-4) 0 0; }

/* Rows of a list: an avatar where there is a person, the title, a quiet line of facts, notes, a pill and the actions. */
.ws-rows { display: grid; }
.ws-rows:empty { display: none; }
.ws-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--divider); }
.ws-row-main { flex: 1 1 220px; display: grid; gap: 2px; min-width: 0; }
.ws-row-main > p { margin: 0; overflow-wrap: anywhere; }
.ws-row-title { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
.ws-row-meta { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); font-variant-numeric: tabular-nums; }
.ws-row-note, .ws-row-main > .hint { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.ws-row > .avatar { margin-top: 2px; }
.ws-row-status { flex: none; margin-top: 1px; }
.ws-row-actions { flex: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ws-row-actions:empty { display: none; }
.ws-row-actions > :is(button, .button-link) { min-height: 32px; padding: 5px var(--s-3); font-size: var(--fs-13); }
.ws-card > .ws-rows, .ws-card > .ws-subhead + .ws-rows { margin-top: var(--s-4); }
.ws-subhead { margin: var(--s-6) 0 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.ws-empty { margin: 0; padding: var(--s-3) 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.ws-card > .ws-rows > .ws-empty { border-top: 1px solid var(--divider); }
.list-card > .ws-rows > :is(.ws-row, .ws-empty) { padding-inline: var(--card-pad); }
.list-card > .ws-rows > .ws-row:first-child { border-top-color: var(--border); }
.list-card > .ws-rows { padding-bottom: var(--s-1); }
.list-card > .ws-rows > .empty-state { padding: var(--s-6) var(--card-pad); border-top: 1px solid var(--border); }
.list-card > details.more { margin: 0 var(--card-pad) var(--s-3); }
:is(.ws-list, .ws-roster, .ws-records, .portal-list) > .list-head h2 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
:is(.ws-list, .ws-roster, .ws-records, .portal-list) > .list-head .card-sub { margin-top: 2px; }
:is(.ws-list, .ws-roster, .portal-list) > .list-head { padding-bottom: var(--s-3); }
.payslip-open::before { content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-external) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-external) center / contain no-repeat; }

/* Questions for you: it asks for an answer, so it carries the warning edge. */
.ws-questions { box-shadow: inset 3px 0 0 var(--warning-dot), var(--sh-1); }
.ws-question { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.ws-question:first-child { padding-top: 0; border-top: 0; }
.ws-question + .ws-question { margin-top: var(--s-4); }
.ws-question > * { margin: 0; }
.ws-question-what { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.ws-question textarea { width: 100%; }
.ws-question > button { justify-self: start; }

/* My dashboard: the four figures as one strip, then the jobs and the latest payslips side by side. */
.ws-dashboard > .metrics.stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--s-5); box-shadow: none; }
.ws-dashboard > .ws-glance { gap: var(--s-6); }
.ws-glance h3 { margin: 0 0 var(--s-1); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.ws-glance .ws-row:first-child, .ws-glance .ws-empty:first-child { border-top: 0; }

/* Leave: the balance over the form. */
.ws-balances { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s-2); margin: 0 0 var(--s-5); }
.ws-balances:empty { display: none; }
.ws-balance { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); }
.ws-balance > strong { color: var(--text); font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums; }
.ws-balance-label { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.ws-balance-meta { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.ws-balances > .ws-empty { padding: 0; }

/* My records: the month on the right of the head, the two tables full bleed and compact. */
.ws-records-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.ws-records-head h2 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.ws-month { width: 200px; }
.ws-month input { width: 100%; }
.ws-table-title { margin: var(--s-4) var(--card-pad) var(--s-2); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.ws-records > .scroll + .ws-table-title { margin-top: var(--s-6); }
.ws-table td.empty-cell { color: var(--text-3); }
.ws-records > .ws-foot { margin: 0; padding: var(--s-3) var(--card-pad) var(--card-pad); border-top: 1px solid var(--divider); }

/* The review queues: approval cards (L3.2) with the decision note and the actions in their foot. */
.portal-approval > .approval-body, .ws-decision > .approval-body { grid-template-columns: minmax(0, 1fr); }
.ws-card-note { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); overflow-wrap: anywhere; }
.approval-body > .ws-card-note:first-of-type { margin-top: var(--s-1); }
/* Review of part 3 (V10): one foot for every approval card: the note (when there is one) above, then the decisions from the
   left in their pinned order, as in the Approvals app. */
.approval-foot.ws-decide { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--s-3); }
.ws-decide-note { min-width: 0; max-width: 760px; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.ws-decide-note > input { width: 100%; }
.ws-decide > .approval-actions { justify-content: flex-start; }
.ws-decide > .approval-actions > :is(button, .button-link):not(.history-toggle):last-of-type { margin-right: 0; }
.ws-teams { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.ws-team { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 10px; border-radius: var(--r-full); background: var(--neutral-bg); color: var(--neutral-text); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.ws-team::before { content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-users) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-users) center / contain no-repeat; }
details.ws-decided { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
details.ws-decided > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--card-pad); cursor: pointer; list-style: none; font-weight: var(--fw-semibold); }
details.ws-decided > summary::-webkit-details-marker { display: none; }
details.ws-decided > summary::after { content: ""; width: 16px; height: 16px; margin-left: auto; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; }
details.ws-decided[open] > summary::after { transform: rotate(180deg); }
details.ws-decided > .ws-rows > .ws-row { padding-inline: var(--card-pad); }

/* ---- The client portal -------------------------------------------------------------------------------------------------- */
#portal-company { display: grid; gap: var(--card-gap); }
#portal-company > * { min-width: 0; margin: 0; }
.metrics.stat-strip.portal-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.portal-summary .summary-values { display: grid; gap: 2px; }
.portal-summary .summary-values strong { overflow-wrap: anywhere; font: var(--fw-semibold) var(--fs-24) / var(--lh-24) var(--font-display); letter-spacing: var(--tracking-figure); font-variant-numeric: tabular-nums; }
.portal-summary .summary-note { margin: var(--s-1) 0 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.portal-summary > article.is-danger .summary-note { color: var(--danger-text); font-weight: var(--fw-medium); }
.portal-summary > article.is-attention .summary-values strong { color: var(--warning-text); }
.portal-summary > article > p.summary-note::after { content: none; }
.portal-approvals { display: grid; gap: var(--s-3); }
.portal-approvals > * { margin: 0; }
.portal-section-head h2 { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.portal-approvals .approval-list > .empty-state { padding: var(--s-8) var(--card-pad); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--sh-1); }
.approval-card[data-kind="hours"] > .approval-icon { background: var(--warning-bg); color: var(--warning-text); }
.approval-card[data-kind="hours"] > .approval-icon::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); mask-image: url(/images.svg?v=fbc2034a9f49#i-clock); }
.approval-amount-note { display: block; margin-top: 2px; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.approval-actions > [data-outcome="fewer"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-down); mask-image: url(/images.svg?v=fbc2034a9f49#i-arrow-down); }
.approval-actions > [data-outcome="dispute"]::before { -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-flag); mask-image: url(/images.svg?v=fbc2034a9f49#i-flag); }
.approval-body > .portal-message { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-left: 3px solid var(--action); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--surface-sunken); }
.portal-message > p { margin: 0; }
.portal-message-from { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.approval-message { margin-top: var(--s-1) !important; color: var(--text); font-size: var(--fs-13); line-height: var(--lh-13); white-space: pre-wrap; overflow-wrap: anywhere; }
.approval-body > .portal-entries { margin-top: var(--s-3); }
.portal-entries > h4 { margin: 0 0 var(--s-2); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.portal-entries > .scroll { border: 1px solid var(--border); border-radius: var(--r-md); }
.portal-entries table > tbody > tr:last-child > td { border-bottom: 0; }
.portal-table td .button-link { min-height: 32px; padding: 5px var(--s-3); font-size: var(--fs-13); white-space: nowrap; }
.portal-table td .button-link::before { content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-download) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-download) center / contain no-repeat; }
.portal-table td:last-child:not(.col-actions) { min-width: 160px; overflow-wrap: anywhere; }
/* Review of part 3 (FI-7, V6): the PDF heading sits over its Download PDF buttons, which are at the right. */
.portal-table:has(td .button-link) th:last-child { text-align: right; }
.portal-table td s { color: var(--text-3); }
/* No client portal access: an empty state; the card's own heading repeats the page's h1, so it is for screen readers only
   (the h1 and the card are only ever shown together). */
#no-access { display: grid; justify-items: center; gap: var(--s-2); max-width: none; margin: 0; padding: var(--s-10) var(--s-8); text-align: center; }
#no-access::before { content: ""; width: 120px; height: 120px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--illus-halo) url(/illustrations/no-access.svg?v=fbc2034a9f49) center / 100px auto no-repeat; }
#no-access > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#no-access > p { max-width: 52ch; margin: 0; color: var(--text-2); text-wrap: balance; }
/* Review of part 3 (V16): a short visible title of its own, as every other empty state has. */
#no-access > p.empty-title { color: var(--text); }
/* The decision dialog: the request in words, the hours (for fewer), the comment, the error, Cancel then the decision. */
#decision-dialog form { display: grid; gap: var(--s-4); }
#decision-dialog form > * { margin: 0; }
#decision-text { color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-14); text-wrap: pretty; }
#decision-dialog textarea { width: 100%; min-height: 96px; }
#decision-dialog .form-error:empty { display: none; }

/* ---- Tablet: one column of cards; the portal's tiles stay three across --------------------------------------------------- */
@media (max-width: 1023.98px) {
  .workspace, .workspace-admin { grid-template-columns: minmax(0, 1fr); }
  .workspace-personal > .ws-payslips, .workspace > .ws-password { grid-column: 1 / -1; }
  .workspace-bar > nav { overflow-x: auto; }
  body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .workspace-bar::after {
    content: "";
    grid-column: -2 / -1;
    grid-row: 2;
    justify-self: end;
    z-index: 1;
    width: 32px;
    height: var(--menu-h);
    pointer-events: none;
    background: linear-gradient(to right, transparent, var(--shell-bg-2));
  }
  body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .portal-bar > .brand { width: 32px; background-image: url(/images.svg?v=fbc2034a9f49#logo-mark); background-size: 32px 32px; }
  body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .workspace-bar > .brand { width: 32px; background-image: url(/images.svg?v=fbc2034a9f49#logo-mark); background-size: 32px 32px; }
}
/* ---- Phone: the bar's row 1 at 52 px, the forms one field a row, the lists and requests full width ---------------------- */
@media screen and (max-width: 767.98px) {
  body:not(:has(> main > :is(#login, #activation):not([hidden]))) > .workspace-bar { grid-template-rows: 52px var(--menu-h); column-gap: var(--s-2); }
  .workspace-bar > .bar-user { gap: var(--s-2); }
  .topbar .bar-signout { padding: 0 10px; }
  .topbar.portal-bar > nav { display: none; }
  .portal-client { max-width: 180px; }
  main > header > .header-tools, main > header > .header-field { width: 100%; }
  main > header .header-field { width: 100%; }
  form.ws-form { grid-template-columns: minmax(0, 1fr); }
  form.ws-form > button { justify-self: stretch; }
  .ws-dashboard > .metrics.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-dashboard > .ws-glance { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .ws-month { width: 100%; }
  body:has(> :is(.workspace-bar, .portal-bar)) > main:has(> :is(#login, #activation):not([hidden])) > header .eyebrow { margin-bottom: var(--s-1); }
  .ws-row-actions { flex-basis: 100%; }
  .ws-row.has-lead > :is(.ws-row-actions, .ws-row-status) { margin-left: calc(32px + var(--s-3)); }
  /* Review of part 3 (RT3-5): on a phone the two decisions are one a row, the primary first, so neither label breaks. */
  .ws-decide > .approval-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ws-decide > .approval-actions > :is(button, .button-link) { width: 100%; }
  .metrics.stat-strip.portal-summary { grid-template-columns: minmax(0, 1fr); }
  .portal-summary > article.card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px var(--s-3); }
  .portal-summary > article > p:first-child { grid-column: 1; }
  .portal-summary .summary-values { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .portal-summary .summary-values strong { font-size: var(--fs-20); line-height: var(--lh-20); }
  .portal-summary .summary-note { grid-column: 1; margin: 0; }
  .portal-approval .approval-foot > .approval-actions > [data-outcome="dispute"] { grid-column: 1 / -1; }
  .portal-table td .button-link { min-height: 36px; }
  #no-access { padding: var(--s-8) var(--s-5); }
  /* Review of part 3 (RT3-5): the decision sheet's Cancel takes its own width and the decision the rest, on one line each. */
  #decision-dialog .form-actions { grid-template-columns: auto minmax(0, 1fr); align-items: stretch; }
}
@media screen and (max-width: 479.98px) {
  .topbar .bar-signout { width: var(--target); padding: 0; font-size: 0; gap: 0; }
  .topbar .bar-signout::before { width: 18px; height: 18px; }
  .portal-client { max-width: none; flex: 0 1 auto; }
}
/* Phones on their side: the bar scrolls away with the page. */
@media (max-height: 500px) and (orientation: landscape) {
  body:not(:has(> main > :is(#login, #activation):not([hidden]))) > :is(.workspace-bar, .portal-bar) { position: relative; }
}
@media (pointer: coarse) {
  .topbar .bar-signout, .ws-row-actions > :is(button, .button-link), .portal-table td .button-link { min-height: var(--target); }
  details.ws-decided > summary { min-height: var(--target); }
}
@media (forced-colors: active) {
  .topbar .bar-signout::before, .portal-client::before, .ws-card > .card-head::after, .ws-team::before, details.ws-decided > summary::after, .payslip-open::before, .portal-table td .button-link::before { forced-color-adjust: none; background-color: CanvasText; }
  .ws-card > .card-head::before, .ws-team, .portal-client { border: 1px solid CanvasText; }
  .topbar.workspace-bar > nav a[aria-current="page"]::before { background: Highlight; }
}
@media print {
  .workspace form, .ws-row-actions, .approval-foot, .ws-password, .header-tools, #company-field, #decision-dialog { display: none !important; }
  .workspace, .workspace-admin { grid-template-columns: minmax(0, 1fr); }
  .ws-card > .card-head::before, .ws-card > .card-head::after { content: none; }
  .ws-card > .card-head { padding-left: 0; }
}

/* ==== My account's page (0.21c task 2.5; COMPANIES_DESIGN.md 6; DESIGN_SYSTEM.md 18, "Part 3: My account and the Settings app") ==== */
/* profile.html: a header that greets the person (6.4: the photo or initials, the date above the greeting, the name, email and
   companies below, the glance chips), then L3.3's left menu and the section, titled at the top of its column. The sections
   are cards of rows (an icon tile, the words, a pill or the row's actions), forms on the two-column grid, and the folds of
   L3.4. Settings' old My account addresses show the moved notice (moved.js), beside Settings' menu or alone (is-solo). */

/* ---- The header ------------------------------------------------------------------------------------------------------------ */
main > header.me-head { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--s-5); margin-bottom: var(--s-8); }
.me-head > .me-who { min-width: 0; }
.me-head .eyebrow { margin-bottom: var(--s-1); }
.avatar.me-face { width: 64px; height: 64px; overflow: hidden; font-size: var(--fs-24); }
.avatar.me-face.avatar-xl { width: 96px; height: 96px; font-size: var(--fs-32); }
.me-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.me-meta { margin: var(--s-1) 0 0; color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-14); overflow-wrap: anywhere; }
.me-meta:empty { display: none; }
.me-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.me-chips:empty { display: none; }

/* ---- The menu's groups and the section's title row ------------------------------------------------------------------------- */
.left-menu > ul > li.left-split { margin-bottom: var(--s-1); padding-bottom: var(--s-1); border-bottom: 1px solid var(--divider); }
/* My account's menu is nine sections long: in a window too short to hold it beside the section, it scrolls with the page
   rather than inside itself, so no section is ever out of sight. */
@media (max-height: 940px) {
  .me-layout > .left-menu { position: static; max-height: none; overflow: visible; }
}
.me-section-head { margin: 0 0 var(--s-5); }
.me-section-head > h2 { margin: 0; font: var(--fw-semibold) var(--fs-20) / var(--lh-20) var(--font-display); letter-spacing: var(--tracking-figure); }
.me-section-head > h2:focus:not(:focus-visible) { outline: none; }
.me-purpose { max-width: 72ch; margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-14); line-height: var(--lh-14); text-wrap: pretty; }
.me-section > :last-child { margin-bottom: 0; }

/* ---- Cards of rows --------------------------------------------------------------------------------------------------------- */
.me-card > .card-head { margin-bottom: var(--s-4); }
.me-card.list-card > .card-head { margin: 0; padding: var(--card-pad) var(--card-pad) var(--s-4); }
.me-card.list-card > :is(.me-rows, .empty-state) { border-top: 1px solid var(--border); }
.me-card.list-card > .empty-state { padding: var(--s-8) var(--card-pad); }
.me-card > .card-head > :is(.status-badge, .tag, .me-more) { flex: none; margin-top: 2px; }
.me-card > .card-head > div > .card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.me-rows { margin: 0; padding: 0; list-style: none; }
.me-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3) var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--divider); }
.me-row:first-child { border-top: 0; padding-top: 0; }
.me-row:last-child { padding-bottom: 0; }
.list-card > .me-rows > .me-row { padding: var(--s-4) var(--card-pad); }
.list-card > .me-rows > .me-row:first-child { border-top: 0; }
.me-row-main { flex: 1 1 240px; min-width: 0; }
.me-row-label { margin: 0 0 2px; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.me-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.me-row-title.is-quiet { color: var(--text-2); }
.me-row-sub, .me-row-text { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); overflow-wrap: anywhere; }
.me-row-text { color: var(--text-2); }
.me-row-text.is-quiet { color: var(--text-3); }
.me-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); flex: none; }
.me-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-1); flex: none; }
.me-row > :is(.status-badge, .tag, .small-button) { flex: none; }
.me-row > :is(.status-badge, .tag) { margin-top: 1px; }
.me-row.me-none { display: block; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.me-row > form { flex: 1 1 100%; max-width: 640px; margin-left: calc(36px + var(--s-4)); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
.me-mono { font-family: var(--font-mono); letter-spacing: .04em; }
.me-reasons { display: grid; gap: var(--s-1); margin: var(--s-1) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.me-reasons > li > .me-reason-where { display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.me-more-row { padding: var(--s-2) var(--card-pad) var(--s-3); border-top: 1px solid var(--divider); }
.me-row:focus:not(:focus-visible) { outline: none; }
.me-foot { margin: var(--s-4) 0 0; }
.list-card > .me-foot { margin: 0; padding: var(--s-3) var(--card-pad) var(--s-4); border-top: 1px solid var(--divider); }
.me-plain { margin: 0; color: var(--text-2); }
.me-legal { margin: var(--s-2) 0 0; }
.me-card > .legal-note { margin: var(--s-4) 0 0; }

/* An icon on a tinted tile (a kind of request, a contact, a part of the overview); its tone from the shared tone classes. */
.me-tile { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: var(--r-md); }
.me-tile::before { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.me-tile[data-icon="building"] { --icon: url(/images.svg?v=fbc2034a9f49#i-building); }
.me-tile[data-icon="calendar"] { --icon: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.me-tile[data-icon="check-circle"] { --icon: url(/images.svg?v=fbc2034a9f49#i-check-circle); }
.me-tile[data-icon="shield-check"] { --icon: url(/images.svg?v=fbc2034a9f49#i-shield-check); }
.me-tile[data-icon="mail"] { --icon: url(/images.svg?v=fbc2034a9f49#i-mail); }
.me-tile[data-icon="phone"] { --icon: url(/images.svg?v=fbc2034a9f49#i-phone); }
.me-tile[data-icon="home"] { --icon: url(/images.svg?v=fbc2034a9f49#i-home); }
.me-tile[data-icon="id-card"] { --icon: url(/images.svg?v=fbc2034a9f49#i-id-card); }
.me-tile[data-icon="flag"] { --icon: url(/images.svg?v=fbc2034a9f49#i-flag); }
.me-tile[data-icon="clock"] { --icon: url(/images.svg?v=fbc2034a9f49#i-clock); }
.me-tile[data-icon="bill"] { --icon: url(/images.svg?v=fbc2034a9f49#i-bill); }
.me-tile[data-icon="journal"] { --icon: url(/images.svg?v=fbc2034a9f49#i-journal); }
.me-tile[data-icon="coins"] { --icon: url(/images.svg?v=fbc2034a9f49#i-coins); }
.me-tile[data-icon="layers"] { --icon: url(/images.svg?v=fbc2034a9f49#i-layers); }
.me-tile[data-icon="users"] { --icon: url(/images.svg?v=fbc2034a9f49#i-users); }
.me-tile[data-icon="user"] { --icon: url(/images.svg?v=fbc2034a9f49#i-user); }
.me-tile[data-icon="monitor"] { --icon: url(/images.svg?v=fbc2034a9f49#i-monitor); }
.me-tile[data-icon="sun"] { --icon: url(/images.svg?v=fbc2034a9f49#i-sun); }

/* A link onward ("Open Approvals ›", "Security ›"). */
.me-more { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); text-decoration: none; }
.me-more:hover { text-decoration: underline; }
.me-more::after { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; }

/* ---- Overview -------------------------------------------------------------------------------------------------------------- */
.me-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); margin-bottom: var(--card-gap); }
.me-glance-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); margin: 0; }
.me-glance-card > .me-tile { margin-bottom: var(--s-1); }
.me-glance-title { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); text-wrap: balance; }
.me-glance-text { flex: 1; margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); text-wrap: pretty; }
.me-glance-card > .me-more { margin-top: var(--s-1); }

/* ---- Profile: the photo, its crop and the names ------------------------------------------------------------------------------ */
.me-photo-row { display: flex; align-items: center; gap: var(--s-6); }
.me-photo-words { display: grid; justify-items: start; gap: var(--s-3); min-width: 0; }
.me-photo-text { max-width: 64ch; margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.me-photo-words > .form-error:empty { display: none; }
.me-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.me-crop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-6); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--divider); }
.me-crop-canvas { flex: none; width: 256px; height: 256px; max-width: 100%; border-radius: var(--r-lg); background: var(--surface-sunken); box-shadow: 0 0 0 1px var(--border); cursor: grab; touch-action: none; }
.me-crop-canvas:active { cursor: grabbing; }
.me-crop-side { display: grid; flex: 1 1 260px; align-content: start; gap: var(--s-4); min-width: 0; }
.me-crop-help { margin: 0; color: var(--text-2); }
.me-crop-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); }
.me-crop-tools input[type="range"] { width: 220px; max-width: 100%; height: var(--control-h); accent-color: var(--action); }
.me-crop-side > .form-actions { justify-content: flex-start; }
.me-crop-side > .hint:empty { display: none; }
.left-body .me-section form.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.left-body .me-section form.form-grid > :is(.form-error:not(:empty), .warning-note) { grid-column: 1 / -1; margin: 0; }
.left-body .me-section form.form-grid > .form-error:empty { display: none; }
.left-body .me-section form.form-grid > .form-actions { grid-column: 1 / -1; justify-content: flex-start; }
.me-name-form > .form-actions { padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.me-greeting-preview { display: flex; grid-column: 1 / -1; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
.me-greeting-words { min-width: 0; }
.me-greeting-line { margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-16) / var(--lh-16) var(--font-display); overflow-wrap: anywhere; }
.me-greeting-words > p:last-child { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }

/* ---- Security: the sign-in email now, and the sessions ----------------------------------------------------------------------- */
.me-current-email { margin: 0 0 var(--s-4); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); overflow-wrap: anywhere; }
.me-current-email > strong { color: var(--text); font-weight: var(--fw-semibold); }
#account-sessions > .card { margin: var(--card-gap) 0 0; }
.me-sessions-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); }
.me-sessions-foot > .hint { margin: 0; }
.me-sessions-foot > [role="status"] { grid-column: 1 / -1; }
.me-sessions-foot > [role="status"]:empty { display: none; }

/* ---- Requests and cover -------------------------------------------------------------------------------------------------------- */
.me-mode-field { display: grid; justify-items: start; gap: 6px; }
.me-handover select:is([name="company"], [name="to"]) { max-width: 372px; }
.me-field-label { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.me-preview { grid-column: 1 / -1; padding: var(--s-4); border-radius: var(--r-md); background: var(--violet-bg); color: var(--violet-text); }
.me-preview.is-refused { background: var(--warning-bg); color: var(--warning-text); }
.me-preview-title { margin: 0; font-weight: var(--fw-semibold); }
.me-preview-text { margin: 2px 0 0; }
.me-preview > .me-reasons { color: inherit; }
.left-body .me-section form.form-grid > .me-handover-foot { align-items: center; justify-content: flex-end; gap: var(--s-2) var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.me-needs-code { position: relative; margin: 0 auto 0 0; padding-left: 22px; }
.me-needs-code::before { content: ""; position: absolute; top: 2px; left: 0; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-lock) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-lock) center / contain no-repeat; }

/* ---- Notifications ------------------------------------------------------------------------------------------------------------- */
.me-notify { display: grid; gap: var(--s-4); }
.me-notify > .form-error:empty { display: none; }
.me-notify > .form-actions { justify-content: flex-start; padding-top: var(--s-4); border-top: 1px solid var(--divider); }
label.check.me-switch { font-weight: var(--fw-medium); }

/* ---- Settings' old My account addresses: the moved notice --------------------------------------------------------------------- */
.left-layout.is-solo { display: block; }
.left-layout.is-solo > .left-menu { display: none; }
.moved-card { max-width: 640px; }
.moved-card > .moved-title { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.moved-card > .moved-title:focus:not(:focus-visible) { outline: none; }
.moved-card > .moved-text { margin: var(--s-2) 0 0; color: var(--text-2); }
.moved-card > .moved-soon { margin: var(--s-2) 0 var(--s-4); }

/* ---- Laptops and tablets: the overview's three cards are rows ----------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .me-glance { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .me-glance-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 2px var(--s-4); }
  .me-glance-card > .me-tile { grid-row: 1 / span 3; margin: 0; }
  .me-glance-card > .me-more { justify-self: start; }
}
/* ---- Phones: the greeting heads the list; a section on its own starts with its link back ---------------------------------------- */
@media screen and (max-width: 767.98px) {
  main > header.me-head { gap: var(--s-4); margin-bottom: var(--s-5); }
  .avatar.me-face { width: 56px; height: 56px; font-size: var(--fs-20); }
  .avatar.me-face.avatar-xl { width: 80px; height: 80px; font-size: var(--fs-24); }
  main.me-main:not(.left-listing) > header.me-head { display: none; }
  .left-menu > ul > li.left-split { margin: 0; padding: 0; border-bottom: 0; }
  .me-photo-row { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .me-crop-canvas { width: 100%; height: auto; aspect-ratio: 1; }
  .left-body .me-section form.form-grid { grid-template-columns: minmax(0, 1fr); }
  .me-row-side { flex-direction: row; align-items: center; }
  .me-row > form { margin-left: 0; }
  .me-sessions-foot { grid-template-columns: minmax(0, 1fr); }
  .me-sessions-foot > button { justify-self: stretch; }
  .left-body .me-section form.form-grid > .me-handover-foot { flex-wrap: wrap; }
  .left-body .me-section form.form-grid > .me-handover-foot > .me-needs-code { flex: 1 1 100%; margin: 0; }
  .left-body .me-section form.form-grid > .me-handover-foot > button { flex: 1 1 100%; }
  .me-mode-field { justify-items: stretch; }
  .me-mode { display: flex; }
  .me-mode > button { flex: 1 1 0; }
}
@media (forced-colors: active) {
  .me-tile::before, .me-more::after, .me-needs-code::before { forced-color-adjust: none; background-color: CanvasText; }
  .me-tile, .me-preview, .me-greeting-preview { outline: 1px solid CanvasText; }
}
@media print {
  .me-actions, .me-crop, .me-row-actions, .me-row-side > button, .me-sessions-foot > button, #account-password-form, #account-email-form { display: none !important; }
}

/* ==== Company Management (COMPANIES_DESIGN.md 2.1, 4.1; the companies and their people) ==================================== */
/* companies.html: the title row with a breadcrumb whose steps back are links; Companies by group (each group a list card, its
   top companies first and the others indented under the company they are placed under), People with their roles, Set-up's
   checklists, and the profile pages: a company's identity card, the apps it opens in, its tabs and cards of rows; a person's
   head, roles, about, residency, numbers (masked until Show), sign-in and contact details. Rows reuse My account's cards of
   rows (.me-rows); nothing here is page-only. */
.cm-head > .cm-head-words { min-width: 0; }
.cm-head h1:focus:not(:focus-visible) { outline: none; }
.cm-crumb-link { color: inherit; text-decoration: none; }
.cm-crumb-link:hover { color: var(--link); text-decoration: underline; }
.cm-sub { margin: var(--s-1) 0 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-sub[hidden], .cm-sub:empty { display: none; }
.cm-view { display: grid; gap: var(--card-gap); min-width: 0; }
.cm-view > *, .cm-panel > *, .cm-col > * { margin: 0; min-width: 0; }
.cm-loading { margin: 0; padding: var(--s-8) 0; color: var(--text-3); text-align: center; }
.cm-quiet { color: var(--text-3); }
.cm-card .card-head { align-items: flex-start; }
.cm-card.list-card > .card-head { margin: 0; padding: var(--card-pad) var(--card-pad) var(--s-4); }
.cm-card.list-card > :is(.me-rows, .scroll, .empty-state, .status-tabs) { border-top: 1px solid var(--border); }
.cm-card.list-card > .empty-state { padding: var(--s-8) var(--card-pad); }
.cm-card.list-card > .me-rows > .me-row { padding: var(--s-4) var(--card-pad); }
.cm-card.list-card > .me-rows > .me-row:first-child { border-top: 0; }
.cm-card > .card-head > :is(.status-badge, .tag, .me-more) { flex: none; margin-top: 2px; }
.cm-card.list-card > .legal-note, .cm-card-note { margin: 0; padding: var(--s-3) var(--card-pad) var(--s-4) calc(var(--card-pad) + 22px); border-top: 1px solid var(--divider); }
.cm-card.list-card > .legal-note::before, .cm-card-note::before { top: calc(var(--s-3) + 1px); left: var(--card-pad); }
.cm-card:not(.list-card) > .cm-card-note { margin: var(--s-4) calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad)); }
.cm-subhead { margin: 0; padding: var(--s-4) var(--card-pad) var(--s-2); border-top: 1px solid var(--border); font-size: var(--fs-14); line-height: var(--lh-14); }
.cm-subhead + .me-rows { border-top: 0 !important; }
.cm-row-link, .cm-title-link { color: var(--text); font-weight: var(--fw-semibold); text-decoration: none; }
.cm-row-link:hover, .cm-title-link:hover { color: var(--link); text-decoration: underline; }
.cm-side-figure { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tag.cm-country { min-width: 32px; justify-content: center; font-family: var(--font-mono); letter-spacing: .04em; }
.me-row > .tag.cm-country { margin-top: 1px; }
.me-tile[data-icon="lock"] { --icon: url(/images.svg?v=fbc2034a9f49#i-lock); }
.me-tile[data-icon="info"] { --icon: url(/images.svg?v=fbc2034a9f49#i-info); }

/* ---- Companies, by group ---------------------------------------------------------------------------------------------- */
.cm-group-card > .card-head .card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cm-notice { position: relative; margin: 0; padding: var(--s-3) var(--card-pad) var(--s-3) calc(var(--card-pad) + 24px); border-top: 1px solid var(--divider); background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-notice::before { content: ""; position: absolute; top: calc(var(--s-3) + 1px); left: var(--card-pad); width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat; }
.cm-card:not(.list-card) > .cm-notice { margin: var(--s-4) calc(-1 * var(--card-pad)) 0; }
.cm-company-row .me-row-sub { color: var(--text-3); }
.cm-position { color: var(--text-2); font-weight: var(--fw-medium); }
.cm-card.list-card > .cm-company-rows > .me-row.cm-depth-1 { padding-left: calc(var(--card-pad) + var(--s-8)); }
.cm-card.list-card > .cm-company-rows > .me-row.cm-depth-2 { padding-left: calc(var(--card-pad) + var(--s-16)); }
.cm-card.list-card > .cm-company-rows > .me-row.cm-depth-3 { padding-left: calc(var(--card-pad) + var(--s-16) + var(--s-8)); }
.cm-company-rows .me-row-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.cm-warnings { margin: 0; padding: var(--s-3) var(--card-pad) var(--s-3) calc(var(--card-pad) + var(--s-5)); border-top: 1px solid var(--divider); color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-foot-note { margin: 0; }
.cm-start { padding-block: var(--s-8); }
.cm-start .empty-text { max-width: 60ch; }

/* ---- People --------------------------------------------------------------------------------------------------------------- */
.cm-people-card > .status-tabs { border-top: 1px solid var(--border); }
.cm-list-hint { margin: 0; padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--divider); color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-people-card > .cm-list-hint + .me-rows { border-top: 1px solid var(--divider); }
.cm-person-row .me-row-sub { color: var(--text-2); }

/* ---- Set-up --------------------------------------------------------------------------------------------------------------- */
.cm-steps { display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; counter-reset: cm-step; }
.cm-steps > li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s-3); counter-increment: cm-step; }
.cm-steps > li::before { content: counter(cm-step); grid-row: 1 / span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--action-soft-bg); color: var(--action-soft-text); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.cm-steps > li > strong { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.cm-steps > li > span { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-setup-start:empty { display: none; }
.cm-setup-start { margin-top: var(--s-5); }
.cm-steps-card > .legal-note { margin: var(--s-5) 0 0; }
.cm-check-card .card-title { font-size: var(--fs-16); }
.cm-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-8); margin: 0; padding: 0; list-style: none; }
.cm-checklist > li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start; gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--divider); }
.cm-checklist > li:nth-child(-n+2) { border-top: 0; }
.cm-check-mark { width: 18px; height: 18px; margin-top: 1px; background-color: var(--success); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check-circle) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check-circle) center / contain no-repeat; }
.cm-checklist > li.is-open > .cm-check-mark { background-color: var(--warning); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); }
.cm-check-text { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); text-decoration: none; }
.cm-check-text:hover { color: var(--link); text-decoration: underline; }
.cm-check-state { font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); white-space: nowrap; }
.cm-check-state.is-done { color: var(--success-text); }
.cm-check-state.is-open { color: var(--warning-text); }
/* The review of the finish (OWF-5): why an item is still to do, under it, in the server's words. */
.cm-check-why { grid-column: 2 / -1; margin: var(--s-1) 0 0; padding: 0 0 0 var(--s-4); list-style: disc; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-check-why > li + li { margin-top: var(--s-1); }
/* The Filings card (OWF-1): each filing's due date and its action at the row's end. */
.cm-filing-row .me-row-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.cf-s89 { margin-top: var(--s-3); }
/* Task R1 (round 3): the earlier filings, made before Hyfecta, in a quiet fold at the card's foot; never counted. */
.cm-filings-none { margin: 0; padding: var(--s-4) var(--card-pad); border-top: 1px solid var(--border); color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-14); }
.cm-earlier { border-top: 1px solid var(--divider); }
.cm-earlier > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-height: var(--control-h); padding: var(--s-3) var(--card-pad); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.cm-earlier > summary::-webkit-details-marker { display: none; }
.cm-earlier > summary::before { content: ""; width: 16px; height: 16px; flex: none; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; transition: transform var(--dur-1) var(--ease-out); }
.cm-earlier[open] > summary::before { transform: rotate(90deg); }
.cm-earlier > summary:hover { background: var(--surface-hover); }
.cm-earlier-count { font-variant-numeric: tabular-nums; }
.cm-earlier-body { display: grid; gap: var(--s-3); padding: 0 var(--card-pad) var(--s-4); }
.cm-earlier-body > .hint { margin: 0; max-width: var(--measure); }
.cm-earlier-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cm-earlier-marked { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-earlier-body > .me-rows > .me-row { padding: var(--s-3) 0; }
.cm-earlier-body > .me-rows > .me-row:first-child { border-top: 0; }
.cm-filing-row.is-earlier .me-row-title { color: var(--text-2); }

/* ---- A company: identity, the apps it opens in, the tabs ------------------------------------------------------------------ */
.cm-identity { display: grid; gap: var(--s-4); }
.cm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cm-tag-text { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.cm-identity-facts { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin: 0; padding: 0; list-style: none; }
.cm-fact { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-14); }
.cm-fact::before { content: ""; flex: none; width: 16px; height: 16px; background-color: var(--text-3); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.cm-fact[data-icon="building"] { --icon: url(/images.svg?v=fbc2034a9f49#i-building); }
.cm-fact[data-icon="id-card"] { --icon: url(/images.svg?v=fbc2034a9f49#i-id-card); }
.cm-fact[data-icon="calendar"] { --icon: url(/images.svg?v=fbc2034a9f49#i-calendar); }
.cm-fact[data-icon="coins"] { --icon: url(/images.svg?v=fbc2034a9f49#i-coins); }
.cm-fact[data-icon="home"] { --icon: url(/images.svg?v=fbc2034a9f49#i-home); }
.cm-fact[data-icon="info"] { --icon: url(/images.svg?v=fbc2034a9f49#i-info); }
.cm-open-in { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-3) var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.cm-open-label { margin: 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.cm-open-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.cm-open-app { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: var(--s-3); height: 100%; padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-lg); color: var(--text); text-decoration: none; }
.cm-open-app:hover { background: var(--surface-hover); text-decoration: none; }
.cm-open-app::before { content: ""; grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: var(--r-md); background-color: var(--app-c); background-image: var(--app-i); background-position: center; background-repeat: no-repeat; background-size: 20px 20px; }
.cm-open-app > strong { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.cm-open-text { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cm-tabs { margin: 0; }
.cm-panel { display: grid; gap: var(--card-gap); min-width: 0; }
.cm-grid { display: grid; gap: var(--card-gap); align-items: start; }
.cm-grid-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.cm-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-col { display: grid; gap: var(--card-gap); min-width: 0; }
.cm-grid-inner.is-single { grid-template-columns: minmax(0, 1fr); }

/* ---- The register of members: who holds what, as a bar and a table --------------------------------------------------------- */
.cm-share-visual { display: grid; gap: var(--s-2); padding: 0 var(--card-pad) var(--s-4); }
.cm-share-bar { display: block; width: 100%; height: 10px; }
.cm-seg-1 { fill: var(--chart-1); background: var(--chart-1); }
.cm-seg-2 { fill: var(--chart-3); background: var(--chart-3); }
.cm-seg-3 { fill: var(--chart-2); background: var(--chart-2); }
.cm-seg-4 { fill: var(--chart-4); background: var(--chart-4); }
.cm-seg-5 { fill: var(--chart-5); background: var(--chart-5); }
.cm-seg-6 { fill: var(--chart-6); background: var(--chart-6); }
.cm-legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.cm-legend > li { display: inline-flex; align-items: center; gap: 6px; }
.cm-dot { width: 10px; height: 10px; border-radius: 3px; }
.cm-table .num { white-space: nowrap; }
.cm-holder-cell { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.cm-holder { display: grid; min-width: 0; }
.cm-holder > a { font-weight: var(--fw-medium); }
.cm-cell-sub { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.me-tile.cm-mini-tile { width: 32px; height: 32px; }

/* ---- Facts (label and value), the group line, masked values ------------------------------------------------------------ */
.cm-facts { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.cm-facts > dt { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--divider); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.cm-facts > dt:first-child { padding-top: 0; border-top: 0; }
.cm-facts > dd { margin: 2px 0 var(--s-3); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); overflow-wrap: anywhere; }
.cm-facts > dd:last-child { margin-bottom: 0; }
.cm-fact-extra { display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cm-group-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-weight: var(--fw-medium); }
.cm-warning { margin: var(--s-3) 0 0; }
.cm-masked { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.cm-masked > .form-error:empty { display: none; }
.cm-masked > .masked-text { font-variant-numeric: tabular-nums; }
.cm-resp-row.is-empty .me-row-title { color: var(--text-2); }
.cm-resp-row.is-empty .me-row-sub { font-style: normal; }
.cm-number-row .me-row-side, .cm-address-row .me-row-side { max-width: 50%; text-align: right; }
.cm-contact-value { overflow-wrap: anywhere; }
.cm-not-asked { margin: 0; padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--divider); }
.cm-not-asked-list { display: grid; gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-not-asked-list strong { color: var(--text); font-weight: var(--fw-medium); }

/* ---- A person ------------------------------------------------------------------------------------------------------------ */
.cm-person-head { display: flex; align-items: center; gap: var(--s-5); }
.avatar.cm-face-xl { width: 72px; height: 72px; font-size: var(--fs-24); }
.avatar.has-photo { overflow: hidden; }
.cm-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cm-person-words { display: grid; gap: var(--s-1); min-width: 0; }
.cm-person-line { margin: 0; color: var(--text-2); font-size: var(--fs-14); line-height: var(--lh-14); overflow-wrap: anywhere; }
.cm-person-words > .me-chips { margin-top: var(--s-2); }

/* ---- Laptops: the side column drops under the main one; three cards become two ------------------------------------------ */
@media (max-width: 1279.98px) {
  .cm-grid-main { grid-template-columns: minmax(0, 1fr); }
  .cm-grid-main > .cm-col:not(.cm-col-wide) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- Tablets: one column of cards; checklists one item a row ---------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .cm-grid-two { grid-template-columns: minmax(0, 1fr); }
  .cm-checklist { grid-template-columns: minmax(0, 1fr); }
  .cm-checklist > li:nth-child(2) { border-top: 1px solid var(--divider); }
  .cm-open-in { grid-template-columns: minmax(0, 1fr); }
}
/* ---- Phones ---------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  .cm-grid-main > .cm-col:not(.cm-col-wide) { grid-template-columns: minmax(0, 1fr); }
  .cm-open-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-open-app { grid-template-columns: 28px minmax(0, 1fr); padding: var(--s-2); }
  .cm-open-app::before { width: 28px; height: 28px; background-size: 18px 18px; }
  .cm-open-text { display: none; }
  .cm-card.list-card > .cm-company-rows > .me-row.cm-depth-1 { padding-left: calc(var(--card-pad) + var(--s-5)); }
  .cm-card.list-card > .cm-company-rows > .me-row.cm-depth-2 { padding-left: calc(var(--card-pad) + var(--s-10)); }
  .cm-card.list-card > .cm-company-rows > .me-row.cm-depth-3 { padding-left: calc(var(--card-pad) + var(--s-12)); }
  .cm-view .me-row:is(:has(> .me-tile), :has(> .avatar), :has(> .tag)) > .me-row-side { flex-basis: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding-left: calc(36px + var(--s-4)); }
  .cm-group-card > .card-head { flex-wrap: wrap; }
  .cm-person-head { align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
  /* Task S6: on a phone the chart link takes its own line under the name, not a narrow column beside it. */
  .cm-person-head > .cm-chart-link { order: 3; flex-basis: 100%; margin-left: 0; white-space: nowrap; }
  .avatar.cm-face-xl { width: 56px; height: 56px; font-size: var(--fs-20); }
  .cm-number-row .me-row-side, .cm-address-row .me-row-side { max-width: none; text-align: left; }
  .cm-checklist > li { grid-template-columns: 18px minmax(0, 1fr); }
  .cm-check-state { grid-column: 2; }
  .cm-check-why { grid-column: 2; }
  .cm-filing-row .me-row-side { justify-content: flex-start; }
}
@media (pointer: coarse) {
  .cm-open-app { min-height: var(--target); }
  .cm-earlier > summary { min-height: var(--target); }
  .cm-crumb-link { display: inline-block; min-height: var(--target); padding-block: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cm-earlier > summary::before { transition: none; } }
@media (forced-colors: active) {
  .cm-fact::before, .cm-check-mark, .cm-notice::before, .cm-earlier > summary::before { forced-color-adjust: none; background-color: CanvasText; }
  .cm-notice { outline: 1px solid CanvasText; }
}
@media print {
  .cm-tabs, .cm-open-in, .cm-show { display: none !important; }
  .cm-grid-main, .cm-grid-two { grid-template-columns: minmax(0, 1fr); }
}

/* ==== The ownership chart and the registers (COMPANIES_DESIGN.md 3, 3.4; 0.21c tasks 4.2 and 3.4's page code) ================ */
/* companies.html's Chart: the set-up line, the board (the chart's card and, from 1280 px, the side panel beside it), the
   toolbar (Owned by, Detailed, Chart or List, More), the chart drawn by chart-ownership.js as one SVG (every position an
   attribute, every colour here), the legend, the List view and the phone list; and Registers: the choices and the sheet,
   which prints light across an A4 page with no frame. Every value is a token. */
.oc-setup { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); }
.oc-setup-words { display: grid; gap: 2px; min-width: 0; }
.oc-setup-title { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.oc-setup-text { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.oc-setup-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.oc-setup-count { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); white-space: nowrap; }
.oc-progress { width: 120px; height: 6px; border: 0; border-radius: var(--r-full); background: var(--neutral-bg); overflow: hidden; -webkit-appearance: none; appearance: none; }
.oc-progress::-webkit-progress-bar { background: var(--neutral-bg); border-radius: var(--r-full); }
.oc-progress::-webkit-progress-value { background: var(--action); border-radius: var(--r-full); }
.oc-progress::-moz-progress-bar { background: var(--action); border-radius: var(--r-full); }
.oc-setup-link { white-space: nowrap; }
.oc-date { display: inline-flex; align-items: center; gap: var(--s-2); }
.oc-date-label { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); white-space: nowrap; }
.oc-date-label::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-calendar) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-calendar) center / contain no-repeat; }
.oc-date > input { width: 160px; }

/* ---- The board: the chart's card and the side panel ------------------------------------------------------------------- */
.oc-board { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--card-gap); align-items: start; }
.oc-card { display: grid; padding: 0; overflow: clip; }
.oc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-4) var(--card-pad); border-bottom: 1px solid var(--border); }
.oc-spacer { flex: 1 1 auto; }
.oc-field { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.oc-field-label { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); white-space: nowrap; }
.oc-field > select { width: auto; min-width: 200px; max-width: 280px; }
.oc-show > button::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.oc-show > button[data-icon="chart"] { --icon: url(/images.svg?v=fbc2034a9f49#i-tree); }
.oc-show > button[data-icon="list"] { --icon: url(/images.svg?v=fbc2034a9f49#i-list); }
/* A switch (11.3): a native checkbox, drawn as a track and a knob; its label says what it does. */
.oc-switch { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); cursor: pointer; }
.oc-switch > input[role="switch"] { position: relative; flex: none; width: 36px; height: 20px; margin: 0; border: 1px solid var(--border-control); border-radius: var(--r-full); background: var(--surface-sunken); -webkit-appearance: none; appearance: none; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out); }
.oc-switch > input[role="switch"]::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--border-control); transition: transform var(--dur-2) var(--ease-out); }
.oc-switch > input[role="switch"]:checked { border-color: var(--action); background: var(--action); }
.oc-switch > input[role="switch"]:checked::before { background: var(--action-text); transform: translateX(16px); }
.oc-switch > input[role="switch"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* More: a panel under its button with the direction, the filters and the export. */
.oc-more-wrap { position: relative; }
.oc-more-button::after { content: ""; width: 14px; height: 14px; margin-left: 2px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; }
.oc-more-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: var(--z-popover); display: grid; gap: var(--s-4); width: 340px; max-height: min(70vh, 560px); overflow: auto; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-raised); box-shadow: var(--sh-2); }
.oc-more-panel[hidden] { display: none; }
.oc-more-group { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.oc-more-group > legend, .oc-more-legend { margin: 0 0 var(--s-1); padding: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-semibold); text-transform: none; }
.oc-more-group > label.check { font-size: var(--fs-14); line-height: var(--lh-14); }
.oc-countries { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.oc-under { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); }
.oc-under > input { width: 72px; }
.oc-export { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.oc-export > .oc-more-legend, .oc-export > .oc-more-hint { grid-column: 1 / -1; }
.oc-export > button { justify-content: center; }
.oc-export > button:nth-of-type(3) { grid-column: 1 / -1; }
.oc-export > button[data-icon]::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.oc-export > button[data-icon="print"] { --icon: url(/images.svg?v=fbc2034a9f49#i-print); }
.oc-export > button[data-icon="download"] { --icon: url(/images.svg?v=fbc2034a9f49#i-download); }
.oc-more-hint { margin: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.oc-body { display: grid; min-width: 0; }
.oc-body > .empty-state { padding: var(--s-10) var(--card-pad); }

/* ---- The canvas: a dotted ground, the SVG, the zoom buttons --------------------------------------------------------------- */
.oc-canvas { position: relative; min-width: 0; background-color: var(--surface-sunken); background-image: radial-gradient(var(--chart-grid) 1px, transparent 1.2px); background-size: 16px 16px; overflow: hidden; touch-action: pan-y; }
.oc-svg { display: block; width: 100%; cursor: grab; -webkit-user-select: none; user-select: none; font-family: var(--font); }
.oc-svg.is-panning { cursor: grabbing; }
.oc-zoom { position: absolute; right: var(--s-3); bottom: var(--s-3); display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-raised); box-shadow: var(--sh-1); overflow: hidden; }
.oc-zoom-button { width: 36px; height: 36px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: var(--surface-raised); }
.oc-zoom-button + .oc-zoom-button { border-top: 1px solid var(--divider); }
.oc-zoom-button::before { content: ""; width: 18px; height: 18px; background-color: var(--text-2); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.oc-zoom-button:hover { background: var(--surface-hover); }
.oc-zoom-button[data-icon="zoom-in"] { --icon: url(/images.svg?v=fbc2034a9f49#i-zoom-in); }
.oc-zoom-button[data-icon="zoom-out"] { --icon: url(/images.svg?v=fbc2034a9f49#i-zoom-out); }
.oc-zoom-button[data-icon="fit"] { --icon: url(/images.svg?v=fbc2034a9f49#i-fit); }
.oc-zoom-button:focus-visible { outline-offset: -2px; }
/* The marks of the chart (chart-ownership.js sets only classes and geometry). */
.oc-node .oc-card { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.oc-node { cursor: pointer; outline: none; }
.oc-node:hover .oc-card { stroke: var(--border-control); }
.oc-node.is-you .oc-card { stroke: var(--action); stroke-width: 1.5; }
.oc-node.is-selected .oc-card { stroke: var(--action); stroke-width: 2.5; }
.oc-node:focus-visible .oc-card { stroke: var(--focus); stroke-width: 3; }
.oc-node.is-unreached .oc-card { fill: var(--surface-sunken); stroke-dasharray: 4 3; }
.oc-name { fill: var(--text); font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.oc-meta { fill: var(--text-3); font-size: var(--fs-12); }
.oc-officers { fill: var(--text-2); font-size: var(--fs-12); }
.oc-nominee { fill: var(--violet-text); font-size: var(--fs-12); }
.oc-flag { fill: var(--warning-text); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.oc-line-mark, .oc-glyph { fill: none; stroke: var(--text-3); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.oc-rule { stroke: var(--divider); stroke-width: 1; }
.oc-tag, .oc-badge { fill: var(--neutral-bg); }
.oc-tag-text { fill: var(--neutral-text); font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .04em; }
.oc-badge-text { fill: var(--neutral-text); font-size: var(--fs-12); font-weight: var(--fw-medium); }
.oc-you { fill: var(--action-soft-bg); }
.oc-you-text { fill: var(--action-soft-text); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.oc-avatar-ring { fill: var(--surface-sunken); }
.oc-initials { font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.oc-avatar.oc-tone-1 { fill: var(--avatar-t1-bg); } .oc-initials.oc-tone-1 { fill: var(--avatar-t1-text); }
.oc-avatar.oc-tone-2 { fill: var(--avatar-t2-bg); } .oc-initials.oc-tone-2 { fill: var(--avatar-t2-text); }
.oc-avatar.oc-tone-3 { fill: var(--avatar-t3-bg); } .oc-initials.oc-tone-3 { fill: var(--avatar-t3-text); }
.oc-avatar.oc-tone-4 { fill: var(--avatar-t4-bg); } .oc-initials.oc-tone-4 { fill: var(--avatar-t4-text); }
.oc-avatar.oc-tone-5 { fill: var(--avatar-t5-bg); } .oc-initials.oc-tone-5 { fill: var(--avatar-t5-text); }
.oc-avatar.oc-tone-6 { fill: var(--avatar-t6-bg); } .oc-initials.oc-tone-6 { fill: var(--avatar-t6-text); }
/* Lines (3.3): shares held solid, not recorded dashed, a group member solid with no chip, offices dotted. */
.oc-edge { fill: none; stroke: var(--border-control); stroke-width: 1.5; stroke-linejoin: round; }
.oc-edge.is-dashed { stroke-dasharray: 6 4; }
.oc-edge.is-dotted { stroke: var(--text-3); stroke-width: 1.25; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.oc-edge-group_member { stroke: var(--info-dot); }
.oc-edge.is-circular { stroke: var(--warning-dot); }
.oc-edge-note { fill: var(--info-text); font-size: 11px; font-weight: var(--fw-semibold); }
.oc-office-note { fill: var(--text-3); font-weight: var(--fw-medium); }
.oc-chip { cursor: pointer; }
.oc-chip-fill { fill: var(--action-soft-bg); stroke: var(--action); stroke-width: 1; }
.oc-chip-text { fill: var(--action-soft-text); font-size: var(--fs-12); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.oc-chip.is-dashed .oc-chip-fill { fill: var(--surface); stroke: var(--border-control); stroke-dasharray: 4 3; }
.oc-chip.is-dashed .oc-chip-text { fill: var(--text-2); font-weight: var(--fw-medium); }
.oc-chip:hover .oc-chip-fill { stroke-width: 2; }
.oc-more .oc-more-fill { fill: var(--surface); stroke: var(--border-control); }
.oc-more-text { fill: var(--link); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
.oc-more { cursor: pointer; outline: none; }
.oc-more:focus-visible .oc-more-fill { stroke: var(--focus); stroke-width: 3; }
/* Group bands (3.5): consolidated in the info tint, a management group in the warning tint with its fixed line. */
.oc-band-fill { fill: var(--info-bg); stroke: var(--info-dot); stroke-width: 1; stroke-opacity: .5; }
.oc-band-title { fill: var(--info-text); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.oc-band-notice { fill: var(--text-2); font-size: var(--fs-12); }
.oc-band-management .oc-band-fill { fill: var(--warning-bg); stroke: var(--warning-dot); stroke-dasharray: 6 4; stroke-opacity: .7; }
.oc-band-management .oc-band-title { fill: var(--warning-text); }
.oc-band-warning { fill: var(--warning-text); font-size: var(--fs-12); }
.oc-band-warning-mark { fill: var(--warning-dot); }
.oc-band-ground { fill: var(--info-bg); }
.oc-band-management .oc-band-ground { fill: var(--warning-bg); }
.oc-ground { fill: var(--surface-sunken); }
.oc-bracket-frame { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-dasharray: 5 5; }
.oc-bracket-label { fill: var(--text-2); font-size: var(--fs-12); font-weight: var(--fw-semibold); }
/* The legend under the chart. */
.oc-legend { display: grid; gap: var(--s-2); padding: var(--s-3) var(--card-pad) var(--s-4); border-top: 1px solid var(--border); }
.oc-legend-list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); }
.oc-legend-list > li { display: inline-flex; align-items: center; gap: var(--s-2); }
.oc-key { flex: none; overflow: visible; }
.oc-legend-note { margin: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.oc-body > .oc-legend-note { padding: var(--s-3) var(--card-pad) var(--s-4); border-top: 1px solid var(--border); }

/* ---- The side panel (3.7) and its sheet -------------------------------------------------------------------------------- */
.oc-panel { position: sticky; top: calc(var(--bar-h) + var(--menu-h) + var(--s-4)); display: grid; gap: 0; max-height: calc(100dvh - var(--bar-h) - var(--menu-h) - var(--s-8)); overflow: auto; padding: 0;
  /* Task S6: a soft shadow at the foot while more of the panel is below (the cover moves with the content and hides it at the end). */
  background: linear-gradient(transparent, var(--surface) 70%) bottom / 100% 40px no-repeat local, radial-gradient(farthest-side at 50% 100%, var(--overlay), transparent) bottom / 100% 14px no-repeat scroll, var(--surface); }
.oc-panel > *, .oc-panel-body > * { margin: 0; }
.oc-panel > .cm-quiet { padding: var(--s-8) var(--card-pad); text-align: center; }
.oc-panel-head { display: grid; gap: var(--s-2); padding: var(--card-pad); border-bottom: 1px solid var(--divider); }
.oc-person-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.oc-person-head > div { display: grid; gap: var(--s-1); justify-items: start; min-width: 0; }
.oc-panel-title { margin: 0; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.oc-panel-title:focus { outline: none; }
.oc-panel-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.oc-panel-line { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.oc-open-profile { justify-self: start; margin-top: var(--s-1); }
.oc-panel-section { display: grid; gap: var(--s-3); padding: var(--s-4) var(--card-pad); border-bottom: 1px solid var(--divider); min-width: 0; }
.oc-panel-subhead { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.oc-panel-hint { margin: 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.oc-panel-note { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.oc-panel-notice { margin: 0 calc(-1 * var(--card-pad)) !important; }
.oc-panel-warning { margin: 0; }
.oc-panel-rows { margin: 0 calc(-1 * var(--card-pad)); }
.oc-panel-rows > .me-row { padding: var(--s-3) var(--card-pad); }
.oc-panel-rows > .me-row:first-child { border-top: 0; }
.oc-panel-section > .cm-open-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oc-apps .cm-open-app { min-height: 52px; }
.oc-figure-word { display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); text-align: right; }
.oc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.oc-person-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 1px solid var(--border); border-radius: var(--r-full); font-size: var(--fs-13); line-height: var(--lh-13); }
.oc-person-chip > strong { font-weight: var(--fw-semibold); }
.oc-chip-role { color: var(--text-3); }
.avatar.oc-face-small { width: 24px; height: 24px; font-size: 10px; }
.avatar.oc-face-large { width: 56px; height: 56px; font-size: var(--fs-20); }
.oc-links { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-14); line-height: var(--lh-14); }
.oc-panel-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-4) var(--card-pad) var(--card-pad); }
.oc-holder { padding: 0; font-weight: var(--fw-medium); text-align: left; }
.oc-holder::before, .oc-row-name::before { content: none; }
.oc-dialog { --dialog-w: 440px; padding: 0; }
.oc-dialog > .oc-panel-body { display: grid; }
.oc-dialog > .oc-close { margin: var(--s-4) var(--card-pad) var(--card-pad); }
.oc-dialog:not([open]) { display: none; }

/* ---- The List view and the phone list -------------------------------------------------------------------------------------- */
.oc-list-scroll { border-top: 0; }
.oc-list { width: 100%; }
.oc-list td { white-space: normal; vertical-align: middle; }
.oc-list td.oc-name-cell { min-width: 220px; }
.oc-list .oc-section-row > th { padding: var(--s-3) var(--cell-px) var(--s-2); background: var(--surface-sunken); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-semibold); text-align: left; }
.oc-list .oc-section-row > th > .tag { margin-left: var(--s-2); }
.oc-name-inner { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.oc-name-words { display: grid; justify-items: start; min-width: 0; }
.oc-row-name { padding: 0; color: var(--text); font-weight: var(--fw-semibold); text-align: left; }
.oc-row-name:hover { color: var(--link); }
.oc-row-sub { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); overflow-wrap: anywhere; }
.oc-toggle { width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; background: none; flex: none; }
.oc-toggle::before { content: ""; width: 14px; height: 14px; background-color: var(--text-3); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-down) center / contain no-repeat; transition: transform var(--dur-2) var(--ease-out); }
.oc-toggle[aria-expanded="false"]::before { transform: rotate(-90deg); }
.oc-toggle-space { flex: none; width: 24px; }
.oc-depth-1 { padding-left: calc(var(--cell-px) + 20px) !important; }
.oc-depth-2 { padding-left: calc(var(--cell-px) + 40px) !important; }
.oc-depth-3 { padding-left: calc(var(--cell-px) + 60px) !important; }
.oc-depth-4 { padding-left: calc(var(--cell-px) + 80px) !important; }
.oc-depth-5, .oc-depth-6 { padding-left: calc(var(--cell-px) + 100px) !important; }
.oc-direct-figure { font-weight: var(--fw-semibold); }
.oc-direct-word { display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.oc-officers-cell { color: var(--text-2); font-size: var(--fs-13); }
.oc-note-row > td { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.oc-note-row > td > span::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: var(--s-2); vertical-align: -2px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-arrow-up) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-arrow-up) center / contain no-repeat; }
.oc-list tr[hidden] { display: none; }

/* ---- Registers: the choices, the sheet --------------------------------------------------------------------------------------- */
.cm-register-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); }
.cm-register-field { display: grid; gap: 6px; }
.cm-field-label { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.cm-register-field > select { min-width: 260px; }
.cm-register-field > input[type="date"] { width: 160px; }
.cm-register-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-left: auto; }
.cm-register-actions > button::before, .cm-csv-link::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.cm-register-actions > button[data-icon="print"] { --icon: url(/images.svg?v=fbc2034a9f49#i-print); }
.cm-register-actions > button[data-icon="download"], .cm-csv-link { --icon: url(/images.svg?v=fbc2034a9f49#i-download); }
.cm-register-sheet { display: grid; gap: var(--s-4); padding: var(--s-6) var(--s-8) var(--s-8); }
.cm-register-sheet > * { margin: 0; }
.cm-register-head { display: grid; gap: var(--s-1); padding-bottom: var(--s-4); border-bottom: 2px solid var(--text); }
.cm-register-head > * { margin: 0; }
.cm-register-kind { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.cm-register-company { font-family: var(--font-display); font-size: var(--fs-24); line-height: var(--lh-24); font-weight: var(--fw-semibold); }
.cm-register-fact, .cm-register-law, .cm-register-at { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-register-title { margin-top: var(--s-3) !important; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-semibold); }
.cm-register-subhead { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.cm-register-scroll { margin: 0 calc(-1 * var(--s-8)); padding: 0 var(--s-8); }
.cm-register-table { width: 100%; font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-register-table th { white-space: normal; vertical-align: bottom; min-width: 88px; }
.cm-register-table td { vertical-align: top; white-space: normal; min-width: 88px; }
.cm-register-table :is(.cm-col-name, .cm-col-member) { min-width: 150px; font-weight: var(--fw-medium); }
.cm-register-table .cm-col-folio { min-width: 44px; width: 44px; }
.cm-register-table .cm-col-address { min-width: 180px; }
.cm-register-table .cm-col-email { min-width: 160px; overflow-wrap: anywhere; }
.cm-register-table td.cm-col-day { white-space: nowrap; }
.cm-register-totals { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.cm-register-gap { margin: 0; }
.cm-register-note { margin: 0; }
.cm-rule-list { display: grid; gap: var(--s-3); margin: var(--s-3) 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-rule-list > li { display: grid; gap: 2px; }
.cm-rule-state { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cm-register-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); flex: none; }
.cm-csv-link { display: inline-flex; align-items: center; gap: 6px; padding: 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-chart-link { margin-left: auto; }
.cm-identity-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.cm-person-head > .cm-chart-link { align-self: flex-start; }
.me-tile[data-icon="warning"] { --icon: url(/images.svg?v=fbc2034a9f49#i-warning); }

/* ---- Laptops, under 1280 px: the panel opens as a sheet ----------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .oc-board { grid-template-columns: minmax(0, 1fr); }
  .oc-board > .oc-panel { display: none; }
}
/* ---- Tablets ---------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .oc-setup { grid-template-columns: auto minmax(0, 1fr); }
  .oc-setup-side { grid-column: 1 / -1; justify-content: flex-start; }
  .oc-list .oc-wide:nth-child(6) { display: none; }
  .cm-register-actions { margin-left: 0; }
}
/* ---- Phones ------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width: 767.98px) {
  .oc-setup { grid-template-columns: minmax(0, 1fr); }
  .oc-setup > .me-tile { display: none; }
  .oc-setup-side { flex-direction: column; align-items: stretch; }
  .oc-setup-side > .oc-progress { width: 100%; }
  .oc-setup-link { justify-content: center; }
  .oc-date { width: 100%; justify-content: space-between; }
  .oc-date > input { flex: 1 1 auto; width: auto; }
  .oc-toolbar { gap: var(--s-3); padding: var(--s-3) var(--s-4); }
  .oc-field { flex: 1 1 100%; width: 100%; }
  .oc-field > select { flex: 1 1 0; width: 0; min-width: 0; max-width: none; }
  /* The phone list (3.8): each row the name and its line, with the direct percentage on the right. */
  .oc-list, .oc-list > thead, .oc-list > tbody { display: block; }
  .oc-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-bottom: 1px solid var(--divider); }
  .oc-list tr > :is(th, td) { border: 0; }
  .oc-list tr > .oc-section, .oc-list .oc-note-row > td { grid-column: 1 / -1; }
  .oc-list-scroll > .oc-list { min-width: 0; width: 100%; }
  .oc-list :is(td, th) { height: auto; }
  .oc-list td.oc-name-cell { min-width: 0; }
  .oc-list td.num { min-width: 64px; text-align: right; }
  .oc-spacer { display: none; }
  .oc-more-panel { position: fixed; inset: auto 0 0 0; top: auto; width: 100%; max-height: 80dvh; padding: var(--s-5) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--sh-3); }
  .oc-list .oc-wide { display: none; }
  .oc-list td, .oc-list th { padding-inline: var(--s-3); }
  .oc-depth-1 { padding-left: calc(var(--s-3) + 12px) !important; }
  .oc-depth-2 { padding-left: calc(var(--s-3) + 24px) !important; }
  .oc-depth-3 { padding-left: calc(var(--s-3) + 36px) !important; }
  .oc-depth-4, .oc-depth-5, .oc-depth-6 { padding-left: calc(var(--s-3) + 48px) !important; }
  .oc-dialog { --dialog-w: 100%; }
  .cm-register-sheet { padding: var(--s-5) var(--s-4); }
  .cm-register-scroll { margin: 0 calc(-1 * var(--s-4)); padding: 0 var(--s-4); }
  .cm-register-form { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .cm-register-field > select { min-width: 0; width: 100%; }
  .cm-register-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-register-kinds { display: flex; }
  .cm-register-kinds > button { flex: 1 1 0; justify-content: center; }
}
@media (pointer: coarse) {
  .oc-zoom-button { width: var(--target); height: var(--target); }
  .oc-toggle { width: var(--target); height: var(--target); }
  .oc-switch { min-height: var(--target); }
  .oc-row-name, .oc-holder { min-height: var(--target); }
}
@media (prefers-reduced-motion: reduce) {
  .oc-switch > input[role="switch"], .oc-switch > input[role="switch"]::before, .oc-toggle::before { transition: none; }
}
@media (forced-colors: active) {
  .oc-node .oc-card, .oc-chip-fill, .oc-band-fill, .oc-bracket-frame, .oc-edge { stroke: CanvasText; }
  .oc-node:focus-visible .oc-card, .oc-node.is-selected .oc-card { stroke: Highlight; }
  .oc-name, .oc-meta, .oc-officers, .oc-chip-text, .oc-band-title, .oc-band-notice, .oc-bracket-label, .oc-tag-text, .oc-badge-text, .oc-initials, .oc-edge-note { fill: CanvasText; }
  .oc-zoom-button::before, .oc-show > button::before, .oc-toggle::before, .oc-date-label::before { forced-color-adjust: none; background-color: CanvasText; }
}
/* Print: the chart whole and flat, or the list, or a register on its own sheet across the page, light and without the frame. */
@page cm-wide { size: A4 landscape; margin: 10mm; }
@media print {
  .oc-toolbar, .oc-zoom, .oc-panel, .oc-dialog, .oc-setup, .oc-toggle, .oc-date, .cm-register-controls, .cm-print-hide, .cm-register-links, .cm-chart-link { display: none !important; }
  .oc-board { display: block; }
  .oc-card { border: 0; }
  .oc-canvas { background: none; overflow: visible; }
  .oc-svg { height: auto !important; max-height: 180mm; }
  .oc-list .oc-wide { display: table-cell !important; }
  .oc-list tr[hidden] { display: table-row !important; }
  main.cm-printing-register > .cm-head { display: none; }
  .cm-register-sheet { page: cm-wide; padding: 0; border: 0; }
  .cm-register-scroll { margin: 0; padding: 0; }
  .cm-register-table { font-size: 8.5pt; }
  .cm-register-table th, .cm-register-table td { min-width: 0; padding: 3pt 4pt; }
}

/* ==== The guided set-up and Add a company (COMPANIES_DESIGN.md 4.1 to 4.10, 10.4; 0.21c task 4.3's screens, S4) ============= */
/* companies-flow.js: a rail of the steps on the left (each done, current or to do, with one line of what it holds), the steps
   done folded into one card of lines with Edit, and the open step as a card of its own (its number, title and line, its
   fields, a sticky footer with Back and Continue). Under 1024 px the rail becomes "Step 4 of 9 · Share capital" over a bar;
   on a phone each step is its own screen with Back and Continue fixed above the bottom menu. Fields, choices, rows of
   holdings and officers, the running share totals, the areas of "Who looks after it", the review's tiles, the one
   confirmation, the invitations and the email preview. Every colour, size and shadow from tokens.css; no page stylesheet. */
.cf-flow { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; gap: var(--card-gap); max-width: 1200px; }
.cf-flow .card { margin: 0; }
.cf-main { display: grid; gap: var(--card-gap); min-width: 0; max-width: 920px; }
html:has(#cf-flow) { scroll-padding-bottom: calc(64px + var(--s-6)); }

/* ---- The rail ------------------------------------------------------------------------------------------------------------- */
.cf-rail { position: sticky; top: calc(var(--bar-h) + var(--s-4)); display: grid; gap: var(--s-3); padding: var(--s-4); }
.cf-rail-head { margin: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-semibold); }
.cf-rail-phone { display: none; }
.cf-rail-list { display: grid; margin: 0; padding: 0; list-style: none; }
.cf-rail-item { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-md); }
.cf-rail-item:not(:last-child)::after { content: ""; position: absolute; top: calc(var(--s-2) + 30px); bottom: calc(-1 * var(--s-2) + 2px); left: calc(var(--s-2) + 13px); width: 2px; border-radius: 1px; background: var(--border); }
.cf-rail-item.is-done:not(:last-child)::after { background: var(--action); }
.cf-rail-item.is-current { background: var(--selected); }
.cf-rail-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-full); background: var(--surface); box-shadow: inset 0 0 0 2px var(--border-control); color: var(--text-2); font-size: var(--fs-13); line-height: 1; font-weight: var(--fw-semibold); }
.cf-rail-item.is-current .cf-rail-mark { background: var(--surface); box-shadow: inset 0 0 0 2px var(--action); color: var(--action-soft-text); }
.cf-rail-item.is-done .cf-rail-mark { background: var(--action); box-shadow: none; color: transparent; font-size: 0; }
.cf-rail-item.is-done .cf-rail-mark::before { content: ""; width: 14px; height: 14px; background-color: var(--action-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.cf-rail-words { display: grid; gap: 2px; min-width: 0; padding-top: 3px; }
.cf-rail-name { justify-self: start; min-height: 0; margin: 0; padding: 0; border: 0; background: none; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); text-align: left; }
button.cf-rail-name:where(:hover) { background: none; color: var(--link); text-decoration: underline; }
.cf-rail-item.is-todo .cf-rail-name { color: var(--text-2); font-weight: var(--fw-medium); }
.cf-rail-line { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); overflow-wrap: anywhere; }
.cf-rail-item.is-current .cf-rail-line { color: var(--action-soft-text); }
.cf-rail-saved { position: relative; margin: 0; padding: var(--s-3) 0 0 22px; border-top: 1px solid var(--divider); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cf-rail-saved::before { content: ""; position: absolute; top: calc(var(--s-3) + 1px); left: 2px; width: 12px; height: 12px; background-color: var(--success); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.cf-rail-saved.is-unsaved::before { background-color: var(--warning); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); }
.cf-rail-now { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.oc-progress.cf-rail-meter { width: 100%; }

/* ---- The steps done, folded ------------------------------------------------------------------------------------------------ */
.cf-folded { padding: var(--s-2) var(--card-pad); }
.cf-folded-list { margin: 0; padding: 0; list-style: none; }
.cf-folded-item { display: grid; grid-template-columns: 22px minmax(150px, 220px) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 44px; padding: var(--s-1) 0; border-top: 1px solid var(--divider); }
.cf-folded-item:first-child { border-top: 0; }
.cf-check { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-full); background: var(--action); }
.cf-check::before { content: ""; width: 12px; height: 12px; background-color: var(--action-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.cf-folded-name { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
.cf-folded-line { min-width: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); overflow-wrap: anywhere; }
.cf-edit { justify-self: end; }

/* ---- The open step ---------------------------------------------------------------------------------------------------------- */
.cf-step { padding: 0; border-color: var(--action); }
.cf-step-head { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: var(--s-5) var(--card-pad) var(--s-4); border-bottom: 1px solid var(--divider); }
.cf-step-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-full); box-shadow: inset 0 0 0 2px var(--action); color: var(--action-soft-text); font-size: var(--fs-14); line-height: 1; font-weight: var(--fw-semibold); }
.cf-step-num.is-done { background: var(--action); box-shadow: none; }
.cf-step-num.is-done::before { content: ""; width: 16px; height: 16px; background-color: var(--action-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.cf-step-words { display: grid; gap: 2px; min-width: 0; padding-top: 4px; }
.cf-step-title { margin: 0; color: var(--text); font: var(--fw-semibold) var(--fs-16) / var(--lh-16) var(--font-display); }
.cf-step-title:focus:not(:focus-visible) { outline: none; }
.cf-step-line { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-step-body { display: grid; gap: var(--s-5); min-width: 0; padding: var(--s-5) var(--card-pad); }
.cf-step-body > * { margin: 0; min-width: 0; }
.cf-step > .cf-step-notice { margin: 0 var(--card-pad) var(--s-4); }
.cf-step > .cf-error { margin: 0 var(--card-pad) var(--s-4); }
.cf-step > .cf-error:empty { display: none; }
.cf-actions { gap: var(--s-2) var(--s-3); padding-inline: var(--card-pad); }
.cf-actions-start { display: flex; align-items: center; gap: var(--s-3); margin-right: auto; }
.cf-saved { position: relative; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-saved.is-saved { padding-left: 20px; }
.cf-saved.is-saved::before { content: ""; position: absolute; top: 2px; left: 0; width: 14px; height: 14px; background-color: var(--success); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check) center / contain no-repeat; }
.cf-blocked { color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }

/* ---- Fields --------------------------------------------------------------------------------------------------------------- */
.cf-grid { display: grid; gap: var(--s-4); }
.cf-grid-1 { grid-template-columns: minmax(0, 1fr); }
.cf-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cf-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cf-grid > .cf-span-2 { grid-column: 1 / -1; }
.cf-field { min-width: 0; align-content: start; }
.cf-field > small { font-weight: var(--fw-regular); }
.cf-field > .form-error, .cf-warn { position: relative; padding-left: 20px; font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-regular); }
.cf-field > .form-error { margin: 0; padding: 0 0 0 20px; background: none; }
.cf-field > .form-error::before, .cf-warn::before { content: ""; position: absolute; top: 1px; left: 0; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-warning) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-warning) center / contain no-repeat; }
.cf-warn { color: var(--warning-text); }
.cf-req { color: var(--text-3); }
.cf-daymonth { display: grid; grid-template-columns: minmax(72px, 1fr) minmax(0, 2fr); gap: var(--s-2); }
.cf-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.cf-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); grid-column: 1 / -1; padding: var(--s-4); }
.cf-dates > legend { padding: 0 6px; }
.cf-dates > small { grid-column: 1 / -1; }
.cf-flag { align-self: end; min-height: var(--control-h); }
.cf-more > summary { width: max-content; }
.cf-more > .cf-grid { margin-top: var(--s-4); }
.cf-legend { margin: 0 0 var(--s-3); padding: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }

/* ---- Choices: a radio on a card (the country, the company, the group and its place) ------------------------------------------ */
.cf-choices { display: grid; gap: var(--s-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.cf-countries { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.cf-choice { display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border-control); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-regular); cursor: pointer; }
.cf-choice:hover { background: var(--surface-hover); }
.cf-choice.is-chosen { border-color: var(--action); background: var(--selected); }
.cf-choice:has(> input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cf-choice:has(> input:disabled) { opacity: .55; cursor: not-allowed; }
.cf-choice > input { margin-top: 1px; }
.cf-country { grid-template-columns: 18px auto minmax(0, 1fr); }
.cf-choice-words { display: grid; gap: 2px; min-width: 0; }
.cf-choice-words > strong { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-weight: var(--fw-semibold); }
.cf-choice-words > small { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-other-country > select { max-width: 360px; }

/* ---- Rows: the share classes, the holdings and the officers ---------------------------------------------------------------- */
.cf-rows { display: grid; gap: var(--s-3); }
.cf-row-wrap { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
.cf-row { display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 1.4fr)) auto; align-items: end; gap: var(--s-3); }
.cf-classes > .cf-row { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); grid-template-columns: minmax(0, 2.4fr) repeat(4, minmax(0, 1fr)) auto; }
.cf-officer { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1.4fr) auto; }
.cf-remove { align-self: end; margin-bottom: 2px; }
.cf-row-more > summary { width: max-content; font-size: var(--fs-13); }
.cf-row-more > .cf-grid { margin-top: var(--s-3); }
.cf-row-note { margin: var(--s-3) 0 0; }
.cf-row-extra { margin-top: var(--s-1); }
.cf-add { justify-self: start; }
.cf-add::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat; }
.cf-total { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 40%); align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--warning-bg); color: var(--warning-text); }
.cf-total.is-done { background: var(--success-bg); color: var(--success-text); }
.cf-total-words { display: grid; gap: 2px; min-width: 0; }
.cf-total-title { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.cf-total-text { margin: 0; font-size: var(--fs-13); line-height: var(--lh-13); }
.oc-progress.cf-total-bar { width: 100%; height: 8px; }
.cf-total:not(.is-done) .oc-progress.cf-total-bar::-webkit-progress-value { background: var(--warning-dot); }
.cf-total:not(.is-done) .oc-progress.cf-total-bar::-moz-progress-bar { background: var(--warning-dot); }
.cf-minimums { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.cf-minimums > li { position: relative; padding-left: 24px; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-minimums > li::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; background-color: var(--success); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-check-circle) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-check-circle) center / contain no-repeat; }
.cf-minimums > li.is-open::before { background-color: var(--warning); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); }
.cf-suggest > ul { margin: var(--s-2) 0 0; padding-left: var(--s-5); }
.cf-suggest-title, .cf-ask-title { margin: 0; font-weight: var(--fw-semibold); }
.cf-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-4); margin: 0; }
.cf-ask > p { grid-column: 1; margin: 0; }
.cf-ask-text { font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-ask-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--s-2); }
.cf-greeting { grid-column: auto; }
.cf-people { border: 1px solid var(--border); border-radius: var(--r-lg); }
.cf-people > .me-row { padding: var(--s-3) var(--s-4); }
.cf-existing { display: grid; gap: var(--s-2); margin: 0; }
.cf-existing > p { margin: 0; }

/* ---- Tax and registrations --------------------------------------------------------------------------------------------------- */
.cf-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-5); }
.cf-number { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: var(--s-2) var(--s-3); min-width: 0; }
.cf-number > .cf-number-field { grid-column: 1; }
.cf-number > .cf-number-state { grid-column: 2; grid-row: 1; width: 168px; }
.cf-number:has(> .cf-number-state) { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) 168px; }
.cf-owner { grid-column: 1 / -1; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cf-owner:empty { display: none; }

/* ---- Who looks after it ------------------------------------------------------------------------------------------------------ */
.cf-areas { display: grid; }
.cf-area { display: grid; grid-template-columns: 180px minmax(0, 1fr); align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--divider); }
.cf-area:first-child { border-top: 0; padding-top: 0; }
.cf-area-name { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.cf-area-main { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: var(--s-3); min-width: 0; }
.cf-area-state { color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-invites { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
.cf-invites-title { position: relative; margin: 0; padding-left: 24px; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.cf-invites-title::before { content: ""; position: absolute; top: 1px; left: 0; width: 16px; height: 16px; background-color: var(--text-2); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-mail) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-mail) center / contain no-repeat; }
.cf-invites-text { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-invite-list { display: grid; margin: var(--s-2) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--divider); }
.cf-invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--divider); }
.cf-invite-who { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.cf-invite-choice { display: grid; gap: 4px; min-width: 0; }
.cf-invite-words { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.cf-folded-item.is-part > .cf-folded-name { color: var(--text-2); }
.cf-invite-name { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); overflow-wrap: anywhere; }

/* ---- Review and the one confirmation ---------------------------------------------------------------------------------------- */
.cf-review { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-6); margin: 0; padding: 0; list-style: none; }
.cf-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--divider); }
.cf-tile:nth-child(-n+2) { border-top: 0; padding-top: 0; }
.cf-tile .me-tile[data-icon="check"] { --icon: url(/images.svg?v=fbc2034a9f49#i-check); }
.cf-tile .me-tile[data-icon="warning"] { --icon: url(/images.svg?v=fbc2034a9f49#i-warning); }
.cf-tile-words { display: grid; gap: 2px; min-width: 0; }
.cf-tile-title { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.cf-tile-text { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); overflow-wrap: anywhere; }
.cf-confirm { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--action); border-radius: var(--r-lg); background: var(--selected); }
.cf-confirm-title { position: relative; margin: 0; padding-left: 26px; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.cf-confirm-title::before { content: ""; position: absolute; top: 0; left: 0; width: 18px; height: 18px; background-color: var(--action-soft-text); -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-shield-check) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-shield-check) center / contain no-repeat; }
.cf-confirm-text { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-confirm > .cf-field > textarea { background: var(--surface); }
.cf-confirm-note { margin: 0; }

/* ---- After Create: what was made, the invitations, the email preview -------------------------------------------------------- */
.cf-made { display: grid; gap: 2px; margin: 0; }
.cf-made > p { margin: 0; }
.cf-made-title { font-weight: var(--fw-semibold); }
.cf-warnings { display: grid; gap: var(--s-1); }
.cf-warnings-title { margin: 0; color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-semibold); }
.cf-warn-list { margin: 0; padding-left: var(--s-5); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-invite-block { display: grid; gap: var(--s-3); }
.cf-sub { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.cf-invite-rows { border: 1px solid var(--border); border-radius: var(--r-lg); }
.cf-invite-row { align-items: center; padding: var(--s-3) var(--s-4); }
.cf-invite-row > input[type="checkbox"] { flex: none; }
.cf-invite-row .me-row-main > input[type="email"] { max-width: 320px; margin-top: var(--s-2); }
.cf-invite-row .me-row-side > select { width: 160px; }
.cf-send-actions { justify-content: flex-start; }
.cf-preview:empty { display: none; }
.cf-mail { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
.cf-mail-head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-1) var(--s-3); margin: 0; padding-bottom: var(--s-3); border-bottom: 1px solid var(--divider); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-mail-head > dt { color: var(--text-3); }
.cf-mail-head > dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.cf-mail-text { display: grid; gap: var(--s-2); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); }
.cf-mail-text > p { margin: 0; overflow-wrap: anywhere; }
.cf-mail-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin: 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-next-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cf-step-done .empty-state, .cf-step-after .empty-state { padding-block: var(--s-4); }

/* ---- The small dialogs: a new person, one invitation --------------------------------------------------------------------- */
.cf-person-dialog { width: min(560px, 90vw); }
.cf-person-form, .cf-invite-form { display: grid; gap: var(--s-4); }
.cf-np-intro { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cf-dupes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cf-dupes:empty { display: none; }
.cf-dupes-title { flex-basis: 100%; margin: 0; color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.cf-person-form > .form-error:empty, .cf-invite-form > .form-error:empty { display: none; }

/* ---- Patch 0.21.4: a person of the draft, edited, removed or opened where the flow names them ------------------------------ */
.cf-people .me-row-side, .cf-review-people .me-row-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.cf-person-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); min-width: 0; }
.cf-person-note { min-width: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); overflow-wrap: anywhere; }
.cf-area-side { display: grid; justify-items: start; gap: var(--s-2); min-width: 0; }
.cf-area-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.cf-review-people { display: grid; gap: var(--s-3); }
.cf-open-profile { font-size: var(--fs-13); line-height: var(--lh-13); }
/* The review of 0.21.4, F7: Open profile on its own line, above the email to give in "Who should sign in?". */
.cf-invite-row .me-row-main > .cf-open-profile { display: block; width: fit-content; margin-top: 2px; }
.cf-remove-uses { display: grid; gap: var(--s-1); margin: 0; padding-left: var(--s-5); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); }
.cf-remove-effect { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
/* The review of 0.21.4, F5: a step done whose check now fails is marked to check, not ticked, on the rail and in the folded
   steps, with why; Review says it each time it is drawn, with the way to Shareholders. */
.cf-rail-item.is-done.is-warn .cf-rail-mark, .cf-folded-item.is-warn > .cf-check { background: var(--warning-bg); box-shadow: inset 0 0 0 2px var(--warning-dot); }
.cf-rail-item.is-done.is-warn .cf-rail-mark::before, .cf-folded-item.is-warn > .cf-check::before { background-color: var(--warning-text); -webkit-mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); mask-image: url(/images.svg?v=fbc2034a9f49#i-warning); }
.cf-rail-item.is-warn .cf-rail-line, .cf-folded-item.is-warn > .cf-folded-line { color: var(--warning-text); }
.cf-review-shares { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-4); }
.cf-review-shares > p { flex: 1 1 280px; margin: 0; }
/* F6: a holding's or an office's row keeps its inputs on one line when a field has words under it (a date's year slip). */
.cf-holders .cf-row, .cf-officers .cf-row { align-items: start; }
.cf-holders .cf-row > .cf-remove, .cf-officers .cf-row > .cf-remove { align-self: start; min-height: var(--control-h); margin: calc(var(--lh-13) + 6px) 0 0; }
/* F10: a "Show as at" year slip, beside the field. */
.cm-asat-slip { position: relative; margin: 0; padding: 0 0 0 20px; color: var(--danger-text); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-regular); }
.cm-asat-slip::before { content: ""; position: absolute; top: 1px; left: 0; width: 14px; height: 14px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-warning) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-warning) center / contain no-repeat; }
.oc-date:has(> .cm-asat-slip) { flex-wrap: wrap; }
.oc-date > .cm-asat-slip { flex-basis: 100%; }

/* ---- The set-up's start, the drafts and the Responsible card's actions ------------------------------------------------------ */
.cm-setup-start:not(:empty) { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.cm-draft-rows .me-row-side { flex-direction: row; align-items: center; }
.cm-resp-row .me-row-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }

/* ---- Under 1280 px: the classes' and holdings' fields wrap two a row ------------------------------------------------------ */
@media (max-width: 1279.98px) {
  .cf-flow { grid-template-columns: 232px minmax(0, 1fr); }
  .cf-classes > .cf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-classes > .cf-row > .cf-col-name { grid-column: span 2; }
  .cf-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---- Under 1024 px: the rail becomes one line over a bar ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .cf-flow { grid-template-columns: minmax(0, 1fr); }
  .cf-main { max-width: none; }
  .cf-rail { position: static; padding: var(--s-3) var(--s-4); }
  .cf-rail-head, .cf-rail-list, .cf-rail-saved { display: none; }
  .cf-rail-phone { display: grid; gap: var(--s-2); }
  .cf-row, .cf-officer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-row > .cf-col-name { grid-column: 1 / -1; }
  .cf-row > .cf-remove { grid-column: 2; justify-self: end; }
  /* The review of 0.21.4, F6: in two columns the row's Remove sits at the foot of its own cell, as before. */
  .cf-holders .cf-row > .cf-remove, .cf-officers .cf-row > .cf-remove { align-self: end; margin: 0 0 2px; }
  .cf-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-area { grid-template-columns: 140px minmax(0, 1fr); }
  .cf-area-main { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .cf-folded-item { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .cf-folded-line { grid-column: 2; grid-row: 2; }
  .cf-folded-item > .cf-edit { grid-row: 1 / span 2; grid-column: 3; }
}
/* ---- Phones: one field a row; each step its own screen with Back and Continue fixed at the bottom ------------------------- */
@media screen and (max-width: 767.98px) {
  html:has(#cf-flow) { scroll-padding-bottom: calc(64px + var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s-6)); }
  /* Each step its own screen (start of 4): the steps done stay in the bar's "Step 4 of 9" and Back, not folded above. */
  .cf-folded { display: none; }
  .cf-grid-2, .cf-grid-3, .cf-grid-4, .cf-countries, .cf-numbers, .cf-review, .cf-dates { grid-template-columns: minmax(0, 1fr); }
  .cf-classes > .cf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-classes > .cf-row > .cf-col-name { grid-column: 1 / -1; }
  .cf-number:has(> .cf-number-state) { grid-template-columns: minmax(0, 1fr); }
  .cf-number > .cf-number-state { grid-column: 1; grid-row: auto; width: auto; }
  .cf-tile:nth-child(2) { border-top: 1px solid var(--divider); padding-top: var(--s-4); }
  .cf-area { grid-template-columns: minmax(0, 1fr); }
  .cf-invite { grid-template-columns: minmax(0, 1fr); }
  .cf-total { grid-template-columns: minmax(0, 1fr); }
  .cf-ask { grid-template-columns: minmax(0, 1fr); }
  .cf-ask-actions { grid-column: 1; grid-row: auto; }
  .cf-step-head { padding-top: var(--s-4); }
  .cf-actions > .cf-actions-start, .cf-actions > .cf-blocked { display: none; }
  .cf-invite-row { flex-wrap: wrap; }
  .cf-invite-row .me-row-side { flex-basis: 100%; padding-left: calc(18px + 36px + var(--s-6)); }
  .cf-invite-row .me-row-side > select { width: 100%; }
  .cf-next-links { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cm-setup-start:not(:empty) { display: grid; }
  /* Patch 0.21.4: the person dialogs (New person, Edit person, Remove) are the phone's full-width sheet, as every dialog is. */
  .cf-person-dialog { width: 100%; }
  .cf-person-line > .cf-person-note { flex-basis: 100%; }
}
/* ---- A landscape phone: the footer bar at 52 px (11.19) --------------------------------------------------------------------- */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .cf-rail { padding-block: var(--s-2); }
  .cf-folded { display: none; }
}
@media (pointer: coarse) {
  .cf-folded-item { min-height: var(--target); }
  .cf-rail-name { min-height: var(--target); }
}
@media (forced-colors: active) {
  .cf-rail-item.is-done .cf-rail-mark::before, .cf-check::before, .cf-saved::before, .cf-rail-saved::before, .cf-minimums > li::before, .cf-add::before,
  .cf-field > .form-error::before, .cf-warn::before, .cf-invites-title::before, .cf-confirm-title::before { forced-color-adjust: none; background-color: CanvasText; }
  .cf-choice.is-chosen, .cf-rail-item.is-current, .cf-total, .cf-confirm { outline: 1px solid CanvasText; }
  .cf-rail-item.is-done.is-warn .cf-rail-mark::before, .cf-folded-item.is-warn > .cf-check::before, .cm-asat-slip::before { forced-color-adjust: none; background-color: CanvasText; }
}
@media print {
  .cf-rail, .cf-actions { display: none !important; }
  .cf-flow { grid-template-columns: minmax(0, 1fr); }
}

/* ==== The moves and the group pages (COMPANIES_DESIGN.md 2.2, 2.3, 5.2 to 5.4, 7; 0.21c task 4.4 and task 5.5's pages) ======= */
/* Accounts › Group (Intercompany, Cost-plus), Reports › Consolidated and the group selector, Exchange rates (Rates, Monthly
   rates, Sources, Revaluation), Cost centres; People Management › Teams & structure; the moved pages (group.html,
   structure.html, Settings › Company); Home's group figures; Company Management's group editor and a company's GST and VAT.
   Every value is a token; nothing here is page-only. */

/* ---- A group's line: its name, its type and a management group's fixed line (5.2), which has nothing to dismiss -------- */
.group-line-box:empty { display: none; }
.group-line-box { margin: 0 0 var(--card-gap); }
.group-line { display: grid; gap: var(--s-2); }
.report-body > .group-line { margin: 0 0 var(--s-4); }
.group-line-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); }
.group-line-head > strong { font-weight: var(--fw-semibold); }
.group-line-facts { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.group-notice { position: relative; margin: 0; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 24px); border-radius: var(--r-md); background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-medium); }
.group-notice::before { content: ""; position: absolute; top: calc(var(--s-3) + 1px); left: var(--s-4); width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-info) center / contain no-repeat; }
.report-body > .group-notice { margin: 0 0 var(--s-4); }

/* ---- Accounts › Group --------------------------------------------------------------------------------------------- */
#group-panel.is-alone > :is(nav, .group-line-box, .sub-panel) { display: none; }
.group-empty { padding-block: var(--s-8); }
.list-head-actions { display: flex; flex: none; align-items: center; gap: var(--s-3); }
.list-head-actions > .tag:empty { display: none; }
.ic-none { margin: 0 var(--card-pad) var(--s-4); }
.ic-table .compare-cell > span { display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.ic-table .compare-cell > span:first-child { color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
.ic-table td.num.compare-cell > span { text-align: right; }
.ic-table td .hint, .ic-table td .warning-note { margin: var(--s-1) 0 0; font-size: var(--fs-12); line-height: var(--lh-12); }
.ic-table td.ic-actions { text-align: right; }
.ic-table td.ic-actions > .action-buttons { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); }
.ic-table td.ic-actions .hint { max-width: 26ch; text-align: left; }
.list-card > .list-foot { margin: 0; padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--divider); }
.costplus-columns { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.costplus-strip, .consolidation-strip { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: var(--s-4) 0; }
.consolidation-strip > article.is-total > strong, .costplus-strip > article.is-total > strong { color: var(--action); }
#costplus-card > .notice, #costplus-card > .legal-note { margin: var(--s-4) 0 0; }
#costplus-result > .warning-list:empty { display: none; }
#markup-card details.more { margin-top: var(--s-4); }

/* ---- Reports › Consolidated, the group selector and the owner's combined view ------------------------------------------ */
.report-subhead { margin: var(--s-6) 0 var(--s-3); font-size: var(--fs-14); line-height: var(--lh-14); }
.report-status { margin: 0 0 var(--s-2); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.report-body details.more > h4 { margin: var(--s-4) 0 var(--s-1); font-size: var(--fs-13); line-height: var(--lh-13); }
#report-group-field select { min-width: min(260px, 100%); max-width: 320px; }
.combined-table th.num > span { display: block; }
.combined-table th.num > .combined-name { color: var(--text); font-weight: var(--fw-semibold); }
.combined-table th:last-child, .combined-table td:last-child { background: var(--surface-sunken); }

/* ---- Exchange rates ------------------------------------------------------------------------------------------------- */
.fx-view { display: grid; gap: var(--card-gap); min-width: 0; }
.fx-view > * { margin: 0; min-width: 0; }
.fx-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--card-gap); align-items: start; }
.fx-grid.fx-grid-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-col { display: grid; gap: var(--card-gap); min-width: 0; }
.fx-col > *, .fx-grid > *, .st-panel > *, .costplus-columns > * { margin: 0; }
.fx-table td:first-child, .fx-table td:nth-child(4) { white-space: nowrap; }
.fx-card.list-card > .me-rows { border-top: 1px solid var(--border); }
.fx-card.list-card > .card-head, .st-card > .card-head { margin: 0; }
.st-card > .card-head > div, .fx-card .card-head > div { flex: 1 1 auto; }
.reval-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.reval-row > label { flex: 0 1 260px; }
.reval-form > .form-error { margin: var(--s-3) 0 0; }
.reval-form > .form-error:empty { display: none; }
.fx-card .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-4); }
.fx-card .card-head > div { min-width: 0; }
.fx-card .card-head > button { flex: none; }
.fx-card .card-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
.fx-card .card-sub { margin: 2px 0 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.fx-card.list-card > .card-head { padding: var(--card-pad) var(--card-pad) var(--s-4); }
.fx-card.list-card > :is(.empty-state, .fx-none, .fx-vat-line) { margin: 0; padding: var(--s-6) var(--card-pad); border-top: 1px solid var(--border); }
.fx-card.list-card > :is(.fx-none, .fx-vat-line) { padding-block: var(--s-4); color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.fx-card.list-card > .fx-vat-line + .scroll { border-top: 1px solid var(--divider); }
.fx-card.list-card > .fx-foot, .fx-card.list-card > details.more { margin: 0; padding: var(--s-3) var(--card-pad) var(--s-4); border-top: 1px solid var(--divider); }
.fx-card.list-card > .legal-note { margin: 0; padding: var(--s-3) var(--card-pad) var(--s-4) calc(var(--card-pad) + 22px); border-top: 1px solid var(--divider); }
.fx-card.list-card > .legal-note::before { top: calc(var(--s-3) + 1px); left: var(--card-pad); }
.fx-status .fx-off-line { margin: var(--s-4) 0 var(--s-1); color: var(--text); font-weight: var(--fw-medium); }
.fx-status > .hint { margin: 0 0 var(--s-4); }
.fx-status > .fx-stale { margin: var(--s-4) 0 0; }
.fx-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.fx-facts > div { display: grid; gap: 2px; min-width: 0; }
.fx-facts dt { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.fx-facts dd { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.fx-facts dd.fx-fact-extra { color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-regular); }
.fx-table td.num strong { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-table .fx-file { font-family: var(--font-mono); font-size: var(--fs-13); white-space: nowrap; }
.fx-table .fx-source { color: var(--text-2); }
.fx-table .fx-reason { display: block; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.fx-table .fx-made { color: var(--text-3); font-size: var(--fs-12); }
.fx-table td.fx-act { text-align: right; }
.fx-table th[scope="row"] { color: var(--text); font-weight: var(--fw-medium); text-align: left; }
.fx-columns { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
#average-rate-card > .legal-note { margin: var(--s-4) 0 0; }
/* The rate chip (7.8): the pair, then where the rate came from; a typed rate in the warning tone, a fetched one neutral. */
.rate-chip { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 24px; padding: 2px var(--s-2); border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rate-chip::before { content: ""; flex: none; width: 12px; height: 12px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-coins) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-coins) center / contain no-repeat; }
.rate-chip.is-typed { border-color: var(--warning-bg); background: var(--warning-bg); color: var(--warning-text); }
.fx-sample { display: grid; gap: var(--s-3); margin: var(--s-4) 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-sunken); }
.fx-sample-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.fx-chips > .hint { margin: var(--s-3) 0 0; }
.fx-source-rows > .me-row { padding: var(--s-4) var(--card-pad); }
.fx-source-rows .me-row-side { flex-direction: row; align-items: center; }
.me-tile[data-icon="bank"] { --icon: url(/images.svg?v=fbc2034a9f49#i-bank); }
.me-tile[data-icon="invoice"] { --icon: url(/images.svg?v=fbc2034a9f49#i-invoice); }
/* The switch: a 44 × 24 track whose knob sits right when on (aria-checked), in the action colour. */
.fx-switch { position: relative; flex: none; width: 44px; min-width: 44px; height: 24px; min-height: 24px; padding: 0; border: 1px solid var(--border-control); border-radius: var(--r-full); background: var(--surface-sunken); }
.fx-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--r-full); background: var(--surface); box-shadow: var(--sh-1); transition: transform var(--dur-2) var(--ease-out); }
.fx-switch[aria-checked="true"] { border-color: var(--action); background: var(--action); }
.fx-switch[aria-checked="true"]::after { transform: translateX(20px); }
.fx-switch:disabled { opacity: .55; }
.fx-effect { margin: 0 0 var(--s-4); color: var(--text); }
#fx-switch-body .fx-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 var(--s-4); padding: 0; border: 0; }
#fx-switch-body .fx-facts dd { font-weight: var(--fw-medium); }
#fx-switch-body > :is(.notice, .hint, .fx-months-head) { margin: 0 0 var(--s-3); }
.fx-months { margin: 0 0 var(--s-4); }

/* ---- Cost centres and Teams & structure (structure.js): trees of dated records, forms in folds ------------------------- */
.structure-host { display: grid; gap: var(--card-gap); min-width: 0; }
.structure-host > * { margin: 0; min-width: 0; }
.st-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2) var(--s-4); }
.st-date { max-width: 200px; }
.st-date-hint { flex: 1 1 320px; margin: 0; padding-bottom: var(--s-2); }
.st-quality { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.st-quality.all-clear { background: var(--success-bg); color: var(--success-text); }
.st-quality[hidden] { display: none; }
.st-quality .quality-line { margin: 0; }
.st-quality .link-button { color: inherit; font-weight: var(--fw-semibold); text-decoration: underline; }
.st-quality .link-button::before { content: none; }
.st-quality .link-button:disabled { text-decoration: none; }
.st-quality-lists > .quality-list { margin: var(--s-1) 0 0; padding-left: var(--s-5); }
.st-panel { display: grid; gap: var(--card-gap); min-width: 0; }
.st-card > .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--card-pad) var(--card-pad) var(--s-4); }
.st-card .card-title { margin: 0; }
.st-card .card-sub { margin: 2px 0 0; max-width: 72ch; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.st-card > .card-head > .tag { flex: none; margin-top: 2px; }
.st-body { padding: var(--s-4) var(--card-pad) var(--card-pad); border-top: 1px solid var(--border); }
.st-body > .empty-state { padding-block: var(--s-6); }
.st-body > .hint { margin: 0 0 var(--s-4); }
.st-tree { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.st-tree.st-branch { margin: var(--s-2) 0 0 var(--s-4); padding-left: var(--s-5); border-left: 2px solid var(--divider); }
.st-node { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.st-node-main { display: grid; gap: 2px; min-width: 0; }
.st-node-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); }
.st-node-title > strong { font-weight: var(--fw-semibold); }
.st-code { color: var(--text-3); font-family: var(--font-mono); font-size: var(--fs-12); }
.st-node-facts { margin: 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.st-node-side { flex: none; }
.st-tree > li > .st-form { margin-top: var(--s-2); }
.st-form { padding: 0; }
.st-form > summary { display: flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: var(--s-3) var(--card-pad); color: var(--link); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.st-form > summary::-webkit-details-marker { display: none; }
.st-form > summary::before { content: ""; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-plus) center / contain no-repeat; }
.st-form[open] > summary { color: var(--text); border-bottom: 1px solid var(--divider); }
.st-form > form { display: grid; gap: var(--s-4); padding: var(--s-4) var(--card-pad) var(--card-pad); }
.st-form > form > :is(.hint, .form-error) { margin: 0; }
.st-form > form > .form-error:empty { display: none; }
.st-table td.st-act { text-align: right; white-space: nowrap; }
.st-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); margin-top: var(--s-2); text-align: left; }
.st-inline > label { min-width: 200px; }
.st-inline > .form-error { flex-basis: 100%; margin: 0; }
.st-inline > .form-error:empty { display: none; }
/* The reporting lines: person cards, each with its avatar, joined down the tree by the same line as the units. */
.st-chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.st-chart:not(.st-branch) > li { min-width: 0; }
.st-chart.st-branch { grid-template-columns: minmax(0, 1fr); }
.st-person { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.st-person-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.st-person-head > h3 { margin: 0; font-size: var(--fs-14); line-height: var(--lh-14); overflow-wrap: anywhere; }
.st-person > ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.st-person li.warning-note { margin: 0; padding: 0; background: none; color: var(--warning-text); font-size: var(--fs-13); }
.st-person li.warning-note::before { display: none; }
.st-import .form-grid textarea { font-family: var(--font-mono); font-size: var(--fs-13); }
.st-import > form { display: grid; gap: var(--s-4); }
.st-result:empty { display: none; }
.st-result { display: grid; gap: var(--s-3); margin-top: var(--s-4); }

/* ---- The moved pages (group.html, structure.html) and Settings › Company's notice ------------------------------------ */
.moved-page { display: grid; place-items: start center; min-height: calc(100dvh - var(--bar-h)); padding: var(--s-16) var(--page-pad) var(--s-12); }
.moved-box { width: min(100%, 640px); }
.moved-card > .button-link { margin-top: var(--s-2); }
.moved-also { margin: var(--s-5) 0 var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--divider); color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); font-weight: var(--fw-medium); }
.moved-links { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.moved-links > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); font-size: var(--fs-14); line-height: var(--lh-14); }
.moved-card > .moved-links:first-of-type { margin-top: var(--s-4); }
.moved-link-text { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
#company-moved:empty { display: none; }
#company-legacy[hidden] { display: none; }

/* ---- Home's group figures (5.4) -------------------------------------------------------------------------------------- */
.group-figures { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.group-figures[hidden] { display: none; }
.group-figures-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.group-figures-covers, .group-figures-sub { margin: 0; color: var(--text-3); font-size: var(--fs-12); line-height: var(--lh-12); }
.group-figures-list { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: 0; padding: 0; list-style: none; font-size: var(--fs-13); line-height: var(--lh-13); }
.group-figures-list > li { display: inline-flex; flex-wrap: wrap; gap: var(--s-2); }
.group-figures-type { color: var(--text-3); }

/* ---- Company Management: the group editor and a company's GST or VAT --------------------------------------------------- */
.cm-group-card > .card-head > .cm-group-edit { flex: none; }
.cm-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); }
.cm-title-row > .card-title { margin: 0; }
.ge-dialog { display: grid; gap: var(--s-5); }
.ge-dialog:not([open]) { display: none; }
.ge-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.ge-top > h2 { margin: 0; }
.ge-dialog > .muted { margin: 0; }
.ge-warn-head { margin: 0; color: var(--warning-text); font-size: var(--fs-13); font-weight: var(--fw-semibold); }
.ge-warnings { margin: 0; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-8); border-radius: var(--r-md); background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.ge-section { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--divider); }
.ge-head { display: grid; gap: 2px; }
.ge-title { margin: 0; font-size: var(--fs-16); line-height: var(--lh-16); }
.ge-sub { margin: 0; color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.ge-when { max-width: 260px; }
.ge-members { display: grid; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); list-style: none; }
.ge-member { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-3) var(--s-4); border-top: 1px solid var(--divider); }
.ge-member:first-child { border-top: 0; }
.ge-member-words { display: grid; gap: 2px; min-width: 0; }
.ge-member-words > strong { font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.ge-member-sub { color: var(--text-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.ge-member-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.ge-member-tools > select { width: 260px; }
.ge-member > .form-error { grid-column: 1 / -1; margin: 0; }
.ge-member > .form-error:empty { display: none; }
.ge-member > .ge-out { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-2); }
.ge-member > .ge-out > label { flex: 1 1 280px; }
.ge-member.is-listed .ge-member-sub { font-style: italic; }
.ge-section > form > .form-error:empty, .ge-end form > .form-error:empty { display: none; }
.ge-end > form { margin-top: var(--s-4); }
.ge-foot { padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.cm-tax-body > .cm-loading { padding: var(--s-4) 0; }
.cm-tax-card .tax-form > .warning-note, .cm-tax-card .tax-form > .form-error { margin: 0; }
.cm-tax-card .tax-form > .form-error:empty { display: none; }

/* ---- The single changes on a profile and a person's page, and what Create did to the group (review of the screens) ------ */
.cm-edit-dialog { width: min(640px, 92vw); }
.cm-edit-dialog > h2 { margin: 0 0 var(--s-2); }
.cm-edit-dialog > form > .form-error:empty { display: none; }
.cm-edit-line { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-card .card-head > .cm-edit, .cm-card .card-head > .cm-own-link { flex: none; }
.cm-head-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2) var(--s-4); }
.cm-card-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: var(--s-3) var(--card-pad) var(--s-4); border-top: 1px solid var(--divider); }
.cm-control-row .me-row-side, .cm-reg-row .me-row-side, .cm-officer-row .me-row-side, .cm-numbers-card .me-row-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.cm-reg-row .me-row-side > .status-badge { max-width: 100%; white-space: normal; text-align: left; }
.cm-confirm-line { display: grid; gap: var(--s-2); justify-items: start; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--divider); }
.cm-confirm-text { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-register-sandbox { padding: var(--s-2) var(--s-3); border: 1px solid var(--warning-dot); border-radius: var(--r-md); background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); font-weight: var(--fw-semibold); }
.group-figures-what { color: var(--text); font-weight: var(--fw-semibold); }
.cf-placed { display: grid; gap: var(--s-2); justify-items: start; }
.cf-placed > p { margin: 0; }
.cf-placed .cf-made-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.ge-member > .ge-from-start { grid-column: 1 / -1; justify-self: end; }
.ge-member > .ge-from-start[hidden] { display: none; }
@media screen and (max-width: 767.98px) {
  .cm-card > .card-head:has(> .cm-edit, > .cm-own-link, > .cm-head-actions) { flex-wrap: wrap; }
  .cm-card > .card-head:has(> .cm-edit, > .cm-own-link, > .cm-head-actions) > div:first-child { flex: 1 1 200px; min-width: 0; }
  .cm-card > .card-head > .cm-head-actions { flex: 1 1 100%; justify-content: flex-start; }
}

/* ---- The register changes and their preview (task F1; registers-change.js), a register tab's Show as at ------------------- */
/* The change dialog: the single-change dialog's frame, wider for a register's fields, the preview under them. */
.rc-dialog { width: min(760px, 94vw); }
.rc-dialog > .rc-intro { margin: 0 0 var(--s-4); }
.rc-dialog .rc-fields { min-width: 0; }
.rc-dialog .form-grid.rc-grid { margin: 0; align-items: start; }
/* A fold of the fields most changes leave alone (12.3). */
.rc-fold { min-width: 0; border-top: 1px solid var(--divider); }
.rc-fold > summary { display: flex; align-items: center; gap: var(--s-2); min-height: var(--control-h); padding: var(--s-2) 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); cursor: pointer; list-style: none; }
.rc-fold > summary::-webkit-details-marker { display: none; }
.rc-fold > summary::before { content: ""; width: 16px; height: 16px; flex: none; background-color: currentColor; -webkit-mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; mask: url(/images.svg?v=fbc2034a9f49#i-chevron-right) center / contain no-repeat; transition: transform var(--dur-1) var(--ease-out); }
.rc-fold[open] > summary::before { transform: rotate(90deg); }
.rc-fold > .rc-grid { padding: var(--s-2) 0 var(--s-2); }
.rc-dialog .rc-reason { margin: 0; color: var(--text-2); font-size: var(--fs-13); line-height: var(--lh-13); }
.rc-dialog .rc-reason > strong { color: var(--text); font-weight: var(--fw-semibold); }
.rc-preview > .rc-preview-line { margin: 0; }
.rc-preview > .rc-what { margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-medium); }
.rc-dialog .rc-subhead { margin: var(--s-2) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--divider); color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.rc-dialog .rc-original { padding: var(--s-2) var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text); }
.rc-dialog .rc-officer-note { padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--info-bg); color: var(--info-text); }
.rc-field { display: grid; gap: var(--s-1); align-content: end; min-width: 0; }
.rc-field > .rc-all { justify-self: start; }
.rc-issued { color: var(--text-2); }
/* The preview: the register on the change's date, before and after; what changes is marked in words, never by colour alone. */
.rc-preview { display: grid; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-4); border: 1px solid var(--action); border-radius: var(--r-lg); background: var(--action-soft-bg); }
.rc-preview[hidden] { display: none; }
.rc-preview > .rc-preview-title { margin: 0; color: var(--text); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-semibold); }
.rc-preview > .rc-preview-title:focus { outline: none; }
.rc-preview > .rc-preview-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rc-preview > .scroll { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.rc-table { width: 100%; }
.rc-table :is(th, td).rc-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-table .rc-holder, .rc-table .cm-cell-sub { display: block; }
.rc-table .cm-cell-sub { font-weight: var(--fw-regular); }
.rc-table tbody tr:not(.is-changed) { color: var(--text-2); }
.rc-table tbody tr.is-changed > td { font-weight: var(--fw-semibold); }
.rc-table .rc-delta { color: var(--action-soft-text); font-weight: var(--fw-semibold); }
.rc-changes { display: grid; gap: var(--s-1); margin: 0; padding: var(--s-3) var(--s-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); list-style: none; font-size: var(--fs-14); line-height: var(--lh-14); }
.rc-changes > li > strong { font-weight: var(--fw-semibold); }
.rc-changes > li > span { color: var(--text-2); }
.rc-preview > .rc-warning, .rc-preview > .rc-from, .rc-preview > .hint { margin: 0; }
.rc-preview > .rc-from { color: var(--text-2); }
/* Task R1 (round 3): the PSC or SBO bands a change crosses, in the preview and on the last stage after it is recorded. */
.rc-crossing-title { margin: var(--s-1) 0 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); font-weight: var(--fw-semibold); }
.rc-crossings { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.rc-crossings > .rc-crossing { margin: 0; }
.rc-preview > .rc-crossing-line { color: var(--text-2); }
.rc-done { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--success-dot); border-radius: var(--r-lg); background: var(--success-bg); }
.rc-done > .rc-done-title { margin: 0; color: var(--success-text); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: var(--fw-semibold); }
.rc-done > .rc-done-title:focus { outline: none; }
.rc-done > .rc-done-title:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rc-done > :is(.rc-what, .hint) { margin: 0; }
.rc-crossing-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.rc-crossing-text { flex: 1 1 280px; margin: 0; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); }
/* Task R1 (round 3): the earlier filings a change marks, or whose mark it withdraws, each ticked (the review of round 3, RV3-3),
   and the filings a preview lists (RV3-5). */
.rc-dialog .rc-filing-count { margin: 0; color: var(--text); font-weight: var(--fw-medium); }
.rc-filing-list { display: grid; gap: var(--s-1); max-height: 280px; margin: 0; padding: var(--s-3) var(--s-4); overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-sunken); list-style: none; font-size: var(--fs-13); line-height: var(--lh-13); }
.rc-filing-list > li { color: var(--text); }
.rc-grid > label.check.rc-filing-pick { align-items: flex-start; font-size: var(--fs-13); line-height: var(--lh-13); }
/* A reversed entry and an appointment entered in error stay in view, struck through, with a pill that says so. */
.cm-event-row.is-reversed .me-row-title, .cm-officer-row.is-reversed .me-row-title a { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.cm-event-row.is-reversal .me-tile { color: var(--text-2); }
.me-tile[data-icon="refresh"] { --icon: url(/images.svg?v=fbc2034a9f49#i-refresh); }
.cm-event-row .me-row-side { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
.cm-row-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s-2); }
/* A register tab's print and CSV, at the card's foot; its changes in the head. */
.cm-register-foot > .cm-register-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
/* Show as at on the Shares, Officers and PSC or SBO tabs. */
.cm-asat-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2) var(--s-4); margin: 0 0 var(--card-gap); }
.cm-asat { display: grid; gap: var(--s-1); }
.cm-asat > input { width: 180px; }
.cm-asat-note { margin: 0; padding: var(--s-2) var(--s-3); border: 1px solid var(--warning-dot); border-radius: var(--r-md); background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-13); line-height: var(--lh-13); }
.cm-asat-note > .text-link { color: inherit; font-weight: var(--fw-semibold); }
/* The chart panel's register changes. */
.oc-panel-changes { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media screen and (max-width: 767.98px) {
  .rc-preview { padding: var(--s-3); }
  .rc-table.cards-on-phone > tbody > tr > td.rc-num { text-align: left; }
  .rc-table.cards-on-phone > tbody > tr > td.rc-after { grid-column: 2; grid-row: 1; color: var(--text); font-size: var(--fs-14); line-height: var(--lh-14); text-align: right; }
  .rc-table.cards-on-phone > tbody > tr > td.rc-after::before { content: none; }
  .cm-asat-bar { align-items: stretch; }
  .cm-asat, .cm-asat > input { width: 100%; }
  .cm-event-row .me-row-side, .cm-row-acts { justify-content: flex-start; }
}

/* ---- Laptop, under 1280 px ------------------------------------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
  .fx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .costplus-columns { grid-template-columns: minmax(0, 1fr); }
}
/* ---- Tablet, under 1024 px ------------------------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .fx-grid.fx-grid-even, .fx-columns { grid-template-columns: minmax(0, 1fr); }
  .ge-member { grid-template-columns: minmax(0, 1fr); }
  .ge-member-tools { justify-content: flex-start; }
}
/* ---- Phone, under 768 px --------------------------------------------------------------------------------------------- */
@media screen and (max-width: 767.98px) {
  .fx-facts, #fx-switch-body .fx-facts { grid-template-columns: minmax(0, 1fr); }
  table.fx-policy, .fx-policy :is(tbody, tr, th, td) { display: block; }
  .fx-policy thead { display: none; }
  .fx-policy tr { padding: var(--s-3) var(--card-pad); border-top: 1px solid var(--divider); }
  .fx-card.list-card .fx-policy tr > :is(th, td) { padding: 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .fx-card.list-card .fx-policy tr > td { margin-top: 2px; color: var(--text-2); }
  .ic-table td { overflow-wrap: anywhere; }
  .fx-card .card-head { flex-wrap: wrap; }
  .list-head-actions { flex-wrap: wrap; width: 100%; }
  .list-head-actions > button { flex: 1 1 auto; }
  .moved-page { padding: var(--s-6) var(--page-pad); }
  .st-node { flex-wrap: wrap; }
  .st-tree.st-branch { margin-left: var(--s-2); padding-left: var(--s-3); }
  .st-date { max-width: none; flex: 1 1 100%; }
  .ge-member-tools > select { flex: 1 1 100%; max-width: none; min-width: 0; }
  #report-group-field select { min-width: 0; }
}
/* ---- Touch: 44 px targets (9) ------------------------------------------------------------------------------------------ */
@media (pointer: coarse) {
  .fx-switch { width: 52px; min-width: 52px; height: 32px; min-height: 32px; }
  .fx-switch::after { width: 26px; height: 26px; }
  .fx-switch[aria-checked="true"]::after { transform: translateX(20px); }
  .st-form > summary { min-height: var(--target); }
}
/* ---- Reduced motion and forced colours (8, 17) -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) { .fx-switch::after { transition: none; } }
@media (forced-colors: active) {
  .group-notice, .st-quality, .ge-warnings, .rate-chip, .st-node, .st-person { border: 1px solid CanvasText; }
  .group-notice::before, .rate-chip::before, .st-form > summary::before { background-color: CanvasText; }
  .fx-switch[aria-checked="true"] { background: Highlight; }
}

/* ==== Print (11.24): every page, last in the components so it settles what the sections above leave open ==============
   A4 in the light set (tokens.css keeps the dark sets to the screen). The phone layouts are for screens only (their queries
   say "screen"), so a printed list is a table, not cards. The bar, menus, buttons, empty fields, actions and dialogs are not
   printed; a row's own link (an invoice number, a drill-down) prints as text. Each section's own print rules are above. */
@media print {
  @page { size: A4; margin: 12mm; }
  html { scroll-padding: 0; }
  body { background: var(--surface); color: var(--text); }
  .topbar, #message, footer, header .pill, .sub-nav, .report-controls, .write-only, #lock-card, #journal-card, dialog, .chart-table,
  .toolbar, .density-switch, .page-actions, .form-actions, .form-error, .link-row,
  main button:not(.link-button), main .button-link, main input[type="file"], main details.more,
  main :is(input, textarea):placeholder-shown { display: none !important; }
  main { max-width: none; padding: 0; }
  main > header { display: block; margin: 0 0 var(--s-5); }
  main > header #page-company { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; margin: var(--s-1) 0 0; }
  .card { box-shadow: none; }
  .scroll { overflow: visible; background: none; }
  .scroll > table { min-width: 0 !important; width: 100%; }
  .scroll > table :is(th, td) { position: static !important; min-width: 0 !important; box-shadow: none !important; }
  table { font-size: 9.5pt; }
  :is(th, td) { white-space: normal !important; }
  thead { display: table-header-group; }
  tr, .kpi-grid, figure.chart { break-inside: avoid; }
  :is(h1, h2, h3, .card-head, .list-head, .section-title) { break-after: avoid; }
  .status-badge, .tag, .pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: var(--text); text-decoration: none; }
  .link-button { color: var(--text); }
  .link-button::before, .link-button::after { display: none; }
}

/* style.css */
/* Hyfecta page styles. The design system's own files come first (tokens.css, base.css; DESIGN_SYSTEM.md 15). This file
   keeps each page's own layouts: the shared components are in components.css since L1.5 and the app frame in shell.css
   since L1.4. It shrinks page by page. Colours, fonts and weights come only from the tokens. */
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:var(--fw-bold);color:var(--text-3);margin-top:28px}
.narrow{max-width:480px}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px}
.toolbar{margin-bottom:24px}
.toolbar label{min-width:280px}
.columns{display:grid;grid-template-columns:1.15fr 1fr;gap:22px}
.pair{display:flex;gap:12px}
.pair>*{flex:1;min-width:0}
@media(max-width:1100px){.columns{grid-template-columns:1fr}}
/* Review of part 1 (REG-2): on a phone a toolbar wraps, so its field keeps a usable width beside a long hint. */
@media screen and (max-width: 700px){.toolbar{flex-wrap:wrap}.toolbar label{min-width:min(100%,12rem);flex:1 1 12rem}.toolbar>.hint{flex-basis:100%}.pair{flex-direction:column}}
/* The in-page sub-menus (.accounting-nav) are underlined tabs in base.css since the review of part 1 (V11, 11.11). */
/* Review of part 1 (RT-10): a table cell is never made a flex box (the browser would merge it with its neighbour into one
   anonymous cell); a cell's buttons and badges sit in a wrapping line with the same gaps instead. */
:not(td).action-buttons{display:flex;gap:6px;flex-wrap:wrap}
td.action-buttons>*{margin:3px 6px 3px 0}
td.action-buttons>:last-child{margin-right:0}
@media screen and (max-width: 700px){.section-title{flex-wrap:wrap}}
/* Account access, users & access, and password forms */
.field-group{border:0;padding:0;margin:0;min-width:0;display:grid;gap:16px}
.details{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;font-size:13px;margin:0 0 20px}
.details dt{color:var(--text-3);font-weight:var(--fw-semibold)}
.details dd{margin:0;overflow-wrap:anywhere}
.link-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.inline-badge{margin-left:8px}
/* India payroll (payroll.html) and the Payroll link in the accounting nav */
#company-bar{flex-wrap:wrap}
#company-bar .hint{margin:0;max-width:560px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;align-items:start}
.bare{border:0;padding:0;margin:0;min-width:0}
.inline-form{display:block}
.inline-form .bare{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.inline-form label{min-width:170px}
.badges:not(td){display:flex;flex-wrap:wrap;gap:4px}
td.badges>*{margin:2px 4px 2px 0}
.warning-list{padding-left:18px;margin:0 0 18px;font-size:13px;line-height:1.9;color:var(--text-2)}
.warning-list .status-badge{margin-right:4px}
.metrics.totals-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));margin-bottom:22px}
.totals-grid .card{margin:0;padding:16px}
.totals-grid strong{font-size:18px}
.compare-cell span{display:block;white-space:nowrap;font-size:12px;line-height:1.7}
.compare-cell .diff{color:var(--danger-text);font-weight:var(--fw-semibold)}
.compare-cell .same{color:var(--success-text)}
@media screen and (max-width: 700px){.inline-form label{min-width:0;flex:1 1 100%}}
/* No company yet (showNoCompany in app.js): Settings shows only 'Create a company' (My account is the user menu's). */
#workspace.no-company .needs-company{display:none!important}
/* Accounts › Group's cost-plus (group.js; Group & intercompany's until 0.21c task 4.4). */
#costplus-company-note button{padding:6px 10px;font-size:11px;margin-left:6px}
#costplus-result{margin-top:20px}
#costplus-result .totals-grid{margin:20px 0}
/* Accounts: a contact's address under its name, and short text areas. */
.contact-address{display:block;margin-top:4px;color:var(--text-3);font-size:12px;font-weight:var(--fw-regular);line-height:1.5}
textarea.short{min-height:76px}
/* Payroll keeps its own company selector, hidden while the top bar's one is shown. */
body.shell-has-company #company-bar>label{display:none}
.sub-nav{margin-bottom:20px}
#page-company{margin:0}
/* The access-change dialog and masked fields with Show (the structure's trees and banner are in components.css since 0.21c task 4.4). */
.access-dialog h3{font-size:14px;margin:14px 0 6px}
.app-list{margin:0 0 8px;padding-left:18px;font-size:13px;line-height:1.6}
.masked-field{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.masked-text{font-variant-numeric:tabular-nums;letter-spacing:.5px}
.restricted{color:var(--text-3);font-style:italic}
.show-all{margin:6px 0 10px;align-items:center}
.row-error td{background:var(--danger-bg)}