/* =====================================================   MMD Employee Portal — shared design tokens + primitives.
   Extracted from /mmd-helpdesk-portal-mockup/index.html so the
   portal looks like the same product family.
   ============================================================ */
:root {
  /* palette */
  /* ---- Red Plate, frozen spec (MMDB-1688/2395, Ben design-freeze
     2026-08-27). Canonical primitives (--rp-*) are defined ONCE, here --
     moved 2026-09-02 from red-plate.css's own :root (which duplicated this
     exact block) as part of the central-DS consolidation (MMDB-2431:
     "consolidate MMD Employee Portal styling into ONE central design
     system"). Every semantic alias below, and every consumer anywhere in
     the design system, points at these seven colours + white/black --
     there is exactly one place the Red Plate palette is authored. -------- */
  --rp-white:         #FFFFFF;
  --rp-desk:          #D4D0C6;  /* the desk windows sit on */
  --rp-ink:           #23221E;  /* primary text, black chrome */
  --rp-ink-soft:      #3C3A34;
  --rp-ink-mute:      #767368;
  --rp-ink-floor:     #6B6A64;
  --rp-silver:        #F1F1EC;  /* window chrome, table heads, task bar */
  --rp-silver-2:      #F7F7F3;
  --rp-line:          #E6E5DF;
  --rp-line-2:        #D7D6CE;
  --rp-line-3:        #C7C6BD;
  --rp-border-strong: #B9B8AE;
  --rp-red:           #C8102E;  /* the accent. Once per view. */
  --rp-red-deep:      #8E0B20;
  --rp-page-bg:       #EDEAE0;
  --rp-paper:         #FAFAF6;  /* the sheet INSIDE a window */
  --rp-hairline:      #D6CFB6;
  --rp-page-ink:      #15140F;
  --rp-page-mute:     #6E6B62;
  --rp-radius: 4px;
  --rp-ctl: 24px;   /* window control hit area */
  /* MMDB-2688 (Ben, 2026-09-05: "add proper padding to all pages"): the ONE
     padding value a plain framed screen gets around its content, so it
     never sits flush at the frame edge -- the same horizontal number
     `.page-inner`'s own 95 consumers carry (a `.page-inner.page-inner`
     override further down this file forces that, see its own comment --
     shell.css independently declares the same selector at the same
     specificity and would otherwise win on load order alone, which is
     exactly why Finance measured a much wider inset than this token
     before that override existed), so a page opting into either
     mechanism reads as the same width of breathing room right and left.
     See `.portal-shell-standalone > .body` below for where this applies (and
     where it deliberately does not, for apps that already pad themselves). */
  --rp-page-pad: 22px 26px 40px;
  --rp-red-lift: #D4213F;
  --rp-red-sink: #A50D26;
  --rp-black-lift: #1f1f1f;
  --rp-black-1: #050505;
  --rp-black-foot: #0a0a0a;
  /* MMDB-2684 (Ben, 2026-09-05: "top bar black please"): the same faint
     top highlight / bottom shadow every black-chrome bar in this design
     already carries (.ds-window-titlebar, .olp/.plp .gsp-titlebar below),
     named once so the desk top bar's own black band references it instead
     of repeating the literal -- and the highlight doubles as the legible
     hover tint Ben also asked for on that same black. */
  --rp-black-chrome-hi: rgba(255,255,255,.10);
  --rp-black-chrome-lo: rgba(0,0,0,.65);
  /* Toolbar button hover on the dark bar (Yarnball button) -- one step up
     from the button's own resting rgba(255,255,255,.16)/.32 fill/border. */
  --rp-tb-hover-fill: rgba(255,255,255,.26);
  --rp-tb-hover-line: rgba(255,255,255,.5);
  --rp-toolbar: #FAFAF8;
  --rp-danger-bg: #FDF4F5;
  --rp-attention-bg: #FDEDEF;
  --rp-black:         #000000;

  /* Semantic aliases every component actually consumes. Each now POINTS at
     a --rp-* primitive instead of duplicating its hex -- one source of
     truth, byte-identical to the values every consumer already rendered
     (portal-core's own semantic set was numerically already Red Plate;
     --baobab-2 is the one correction, see the PR body's token table). */
  --paper:      var(--rp-white);
  --paper-2:    var(--rp-silver);
  --paper-3:    var(--rp-silver);      /* was a duplicate literal in components.css's own :root; folded in here */
  --paper-stamp: #EDEFEA;              /* muted neutral stamp background — no --rp- primitive at this exact tone */
  --ink:        var(--rp-ink);
  --ink-soft:   var(--rp-ink-soft);
  --ink-mute:   var(--rp-ink-mute);
  --ink-faint:  #9C9A90;               /* no --rp- primitive at this lightness */
  --ink-header: #1C1E1B;
  --hairline:   var(--rp-line-2);
  --hairline-dark: var(--rp-border-strong); /* was a literal amber-brown #B5AD94 in components.css/red-plate-modules.css — folded in here */
  --hairline-on-ink: rgba(250, 250, 246, 0.16);
  --baobab:     var(--rp-red);
  --baobab-2:   var(--rp-red-deep);    /* was #9E0A23 (pre-freeze hover red); the frozen spec's own deep red is --rp-red-deep #8E0B20 */
  --baobab-bg:  #FBE9EC;
  --baobab-on:  var(--rp-white);       /* was #FAFAF6 (pre-freeze near-white); text on baobab red, now the sheet white */
  --signal-amber: #B7791F;
  --signal-amber-bg: #FBF0D6;
  --signal-grass: #2F6B43;
  --signal-grass-bg: #E2EEDA;
  --signal-info: #3D6B94;
  --signal-info-bg: #E4EDF4;

  /* Four tokens components.css referenced everywhere but that were NEVER
     DEFINED anywhere in the stylesheet set (root-cause found 2026-08-31,
     red-plate-modules.css's Section A) -- a custom property with no
     definition and a var() fallback renders the FALLBACK, which for these
     four was always an amber/yellow/blue literal, never Red Plate. Mapped
     once, here, for every consumer at once (replaces red-plate-modules.css
     Section A, now folded in and that file deleted). See the PR body's
     token-mapping table for the read on each. */
  --paper-manila: var(--rp-silver);    /* manila/section-head fill: same silver as every other chrome surface */
  --paper-card:   var(--rp-white);     /* inset chip/card fill: the sheet white */
  --paper-sheet:  var(--rp-white);     /* modal/record sheet fill: the sheet white */
  --royal-blue:   var(--rp-red);       /* the one remaining "accent" semantic: active nav/tab state, ink-stamp colour. Red Plate has exactly one accent -- red. */

  /* Shadow physics (moved from components.css's own duplicate :root block,
     "PAPER OPERATIONS & DISPATCH STYLE SYSTEM", 2026-08-15 -- values
     unchanged, this is the token layer, so it owns them). */
  --shadow-slip: 0 1px 3px rgba(14, 14, 12, 0.06), 0 2px 5px rgba(14, 14, 12, 0.04), 0 0 0 1px rgba(214, 207, 182, 0.6);
  --shadow-slip-hover: 0 6px 14px rgba(14, 14, 12, 0.10), 0 2px 4px rgba(14, 14, 12, 0.06), 0 0 0 1px var(--hairline-dark);
  --shadow-drag: 0 18px 36px rgba(14, 14, 12, 0.24), 0 8px 16px rgba(14, 14, 12, 0.14);
  --shadow-sheet-window: 0 24px 50px rgba(14, 14, 12, 0.22), 0 6px 16px rgba(14, 14, 12, 0.12), 0 0 0 1px var(--hairline-dark);
  --shadow-sheet-focus: 0 28px 64px rgba(14, 14, 12, 0.28), 0 0 0 1.5px var(--ink);
  --shadow-inset-hairline: inset 0 -1px 0 rgba(0, 0, 0, 0.18); /* bottom-edge inset on a filled bar/chip, e.g. .ds-gantt-bar */
  --shadow-lift-1: 0 -2px 6px rgba(14, 14, 12, 0.06); /* upward lift on a bottom-pinned sticky surface, e.g. .ds-form-actionbar--pinned */
  --shadow-dial-1: 0 1px 2px rgba(14, 14, 12, 0.3); /* small drop shadow on a raised control knob, e.g. .ds-switch-thumb */
  --shadow-dialog: 0 4px 18px rgba(14, 14, 12, 0.3); /* .gsp-dialog drop shadow, letterpress-*.css */
  --shadow-progress-inset: inset 0 1px 3px rgba(0, 0, 0, 0.4); /* .hrp-progress-track inset shadow, module-hr-people.css */
  --shadow-progress-glow: 0 0 12px rgba(59, 130, 246, 0.6); /* .hrp-progress-fill glow, module-hr-people.css -- same blue as --ds-c-blue-14 */
  --font-serif: "Fraunces", Georgia, serif;

  /* type */
  --mmd-font-display: -apple-system,"SF Pro Display","SF Pro Text",system-ui,"Helvetica Neue",sans-serif;
  --mmd-font-ui:      -apple-system,"SF Pro Text","SF Pro Display",system-ui,"Helvetica Neue",sans-serif;
  --mmd-font-mono:    "JetBrains Mono", ui-monospace, monospace;
  --font-display: var(--mmd-font-display);
  --font-ui:      var(--mmd-font-ui);
  --font-mono:    var(--mmd-font-mono);

  /* shape */
  --radius-sm: 4px;
  --radius:    6px;
  --hairline-1: 1px solid var(--hairline);
  --hairline-ink: 1px solid var(--ink);

  /* table-head chrome (2026-09-03 batch-1 review): the mono-uppercase
     column-header spec (10.5px / 700 / 0.06em tracking) was a hand-typed
     literal repeated verbatim across 11 selector blocks in components.css,
     portal-core.css and red-plate.css -- three of them also drifted to
     weight 600. One token trio, so the next ruling on this spec is a
     one-line change here, not an 11-site find-and-replace. */
  --rp-fs-th: 10.5px;
  --rp-fw-th: 700;
  --rp-ls-th: 0.06em;

  /* appearance (PORTAL-R-007): font-scale multiplier, default = 1 (no-op) */
  --fs-scale: 1;
  /* measured live by HomeBookmarks.tsx (PORTAL-R-021/022); this is only the
     first-paint fallback before that measurement runs. */
  --home-band-h: 216px;

  /* Home rework (2026-07-21 round-2): CoFlow is a fixed right-side dock.
     --cowork-dock-w is written ONLY by the DS-owned CoworkDock component
     (0 when absent/hidden); the shell body reserves that width. */
  --sb-w: 240px;                 /* proven literal, was hardcoded in .shell */
  --cowork-dock-w: 0px;
}

/* =====================================================   Appearance — dark theme (PORTAL-R-007). One token remap governs
   every surface; components only ever consume the tokens above, never
   a raw hex, so this single block themes the whole shell.
   ============================================================ */
html[data-theme="dark"] {
  --paper:      #1C1B18;
  --paper-2:    #121210;
  --ink:        #F3F0E6;
  --ink-soft:   #D4D0C4;
  --ink-mute:   #948F82;
  --ink-faint:  #5E5B52;
  --hairline:   #322F29;
  --baobab-bg:  #3A1017;
  --signal-amber-bg: #362A0C;
  --signal-grass-bg: #14261C;
}
/* The left rail is a permanent dark surface in BOTH themes by design (its own
   identity, not a themeable content surface) — re-anchor the tokens it
   consumes back to the light-mode values so it never inverts. */
html[data-theme="dark"] .sb {
  --paper:      #FAFAF6;
  --paper-2:    #F3F0E6;
  --ink:        #0E0E0C;
  --ink-soft:   #2B2A26;
  --ink-mute:   #6E6B62;
  --ink-faint:  #A6A39A;
  --hairline:   #E5E2D8;
}
/* Font-size control (PORTAL-R-007): every font-size in this stylesheet is
   authored as calc(NNpx * var(--fs-scale, 1)) — see the scaled type ramp
   below — so these three states are the ONLY place a size is chosen. */
html[data-font-scale="sm"] { --fs-scale: 0.9; }
html[data-font-scale="lg"] { --fs-scale: 1.18; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* -------------------------------------------------------------
   Shell scroll discipline — ONLY the center frame scrolls.
   Sidebar (left), bot rail (right), and the topbar inside the
   main column all stay put when the user scrolls.
   ------------------------------------------------------------- */
html, body { height: 100vh; overflow: hidden; }
.shell { height: 100vh; }
.shell > .sb {
  height: 100vh;
  overflow-y: auto;           /* internal scroll only if the column's own content is taller than the viewport */
  overscroll-behavior: contain;
}
.shell > .body {
  height: 100vh;
  overflow-y: auto;           /* this is the one scrolling region */
  overscroll-behavior: contain;
}
/* Pages that ARE a canvas rather than a page containing one. The studio at
   /app/diagrams is the second of these: it hosts a drawing tool that owns its
   own chrome, so the shell's 28/44/64 page padding and the bot-rail margin
   would only frame it in dead paper. */
.shell > .body:has(> .remote-canvas-frame),
.shell > .body:has(> .ds-diagrams-studio) {
  padding: 0;
  overflow: hidden;
  background: var(--paper-2);
  display: flex;
  flex-direction: column;
}
.shell:not(.no-bot) > .body:has(> .ds-diagrams-studio) {
  margin-right: 0;
}
.shell > .body:has(> .ds-diagrams-studio) > .ds-diagrams-studio {
  flex: 1 1 auto;
  min-height: 0;
}
.shell > .body:has(> .remote-canvas-frame) > .remote-canvas-frame {
  width: 100%;
  /* Fill ONLY the space left below the sticky crumb topbar. height:100vh here
     made topbar + iframe taller than the 100vh body, clipping the iframe bottom
     (and the embedded app's bottom composer) off-screen. */
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.shell:has(> .body > .remote-canvas-frame) > .bot-launcher.pos-top-right,
.shell:has(> .body > .ds-diagrams-studio) > .bot-launcher.pos-top-right {
  top: auto;
  bottom: 24px;
}

/* .topbar/.crumbs (public/_design-system/shell.css) is authored as the
   standalone-page FIXED 72px bar (position:fixed;left:0;right:0;z-index:50) —
   correct for a true full-bleed page with no persistent sidebar. A handful of
   native in-shell pages (IT > Infrastructure, IT service request, Leave,
   News, Operations) reuse it for a lightweight crumb strip instead of writing
   their own. Rendered inside `.shell`'s persistent-sidebar grid, that fixed
   rule ignores the grid and paints a full-viewport-width black bar over the
   top of the 240px sidebar column (hiding the MMD brand/logo) — this is the
   "weird stuff at the top, breaking the navigation" defect reported 2026-07-10.
   Remote fragments already get an equivalent nested/static treatment (see
   `[data-remote-fragment] .topbar` in components.css); generalize the same
   treatment to every .topbar nested inside the app shell, native or remote. */
.shell .topbar {
  position: static;
  height: auto;
  background: transparent;
  border-bottom: 0;
  z-index: auto;
  padding: 0;
  margin: 0 0 16px;
}
.shell .topbar .crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.shell .topbar .crumbs b { color: var(--ink); font-weight: 600; }
.shell .topbar .crumbs .sep { color: var(--ink-faint); }

body {
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: calc(14px * var(--fs-scale, 1));
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--baobab); color: var(--paper); }
a { color: inherit; }
button { font-family: inherit; }
.mmd-shield { text-decoration: none; }
.caret-muted { opacity: 0.5; }
.contents-row { display: contents; }
.handoff-text { font-size: calc(12.5px * var(--fs-scale, 1)); margin-top: 4px; }
.stroke-current { stroke: currentColor; }

/* FlowMaster shared atom host styles for module-federated remotes. */
[data-slot="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: var(--ds-radius-sm);
  background: var(--baobab);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: calc(13px * var(--fs-scale, 1));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
[data-slot="button"][data-variant="secondary"],
[data-slot="button"][data-variant="outline"] {
  background: var(--paper);
  color: var(--ink);
}
[data-slot="button"][data-variant="ghost"],
[data-slot="button"][data-variant="tableLink"] {
  min-height: 32px;
  justify-content: flex-start;
  padding: 4px 0;
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}
[data-slot="button"]:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
[data-slot="input"],
[data-slot="textarea"] {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: calc(14px * var(--fs-scale, 1));
}
[data-slot="input"] {
  min-height: 36px;
  padding: 8px 10px;
}
[data-slot="textarea"] {
  min-height: 88px;
  padding: 10px;
  resize: vertical;
}
[data-slot="label"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: calc(13px * var(--fs-scale, 1));
  font-weight: 700;
}
[data-slot="badge"] {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: calc(11px * var(--fs-scale, 1));
  font-weight: 700;
}
[data-slot="table-container"] {
  width: 100%;
  overflow-x: auto;
}
[data-slot="table"] {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(13px * var(--fs-scale, 1));
}
[data-slot="table-header"] {
  border-bottom: 1px solid var(--ink);
  text-align: left;
}
[data-slot="table-row"] {
  border-bottom: 1px solid var(--hairline);
}
[data-slot="table-head"],
[data-slot="table-cell"] {
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
}
[data-slot="hover-preview"] {
  position: relative;
  display: block;
}
[data-slot="hover-preview-content"] {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 60;
  display: none;
  min-width: 240px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 18px 48px rgba(14, 14, 12, 0.16);
}
[data-slot="hover-preview"]:hover [data-slot="hover-preview-content"],
[data-slot="hover-preview"]:focus-within [data-slot="hover-preview-content"] {
  display: block;
}
[data-slot="hover-preview-title"] {
  display: block;
  font-weight: 700;
}
[data-slot="hover-preview-description"] {
  display: block;
  color: var(--ink-mute);
}
[data-slot="floating-window"] {
  position: fixed;
  display: grid;
  width: min(420px, calc(100vw - 48px));
  max-height: calc(100vh - 112px);
  overflow: auto;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 72px rgba(14, 14, 12, 0.22);
}
[data-slot="floating-window-header"] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
  cursor: move;
}
[data-slot="floating-window-body"] {
  display: grid;
  gap: 16px;
  padding: 16px;
}
[data-slot="remote-status"] {
  display: inline-flex;
  max-width: 720px;
  padding: 12px 14px;
  border-left: 4px solid var(--baobab);
  border-radius: var(--ds-radius-sm);
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: 0 1px 0 rgba(14, 14, 12, 0.08);
  font-size: calc(13px * var(--fs-scale, 1));
  font-weight: 600;
}
.new-flag {
  font-family: var(--font-mono);
  font-size: calc(8px * var(--fs-scale, 1));
  letter-spacing: 0.14em;
  color: var(--baobab);
  margin-left: 4px;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }
h1 { font-size: clamp(40px, 5.5vw, 76px); line-height: 0.98; }
h2 { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.05; }
h3 { font-size: calc(20px * var(--fs-scale, 1)); line-height: 1.2; }
p  { margin: 0; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "ss01" 1; }
.ui-sm { font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.10em; text-transform: uppercase; font-weight: 500; }
.eyebrow { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.lede { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: calc(20px * var(--fs-scale, 1)); line-height: 1.35; letter-spacing: -0.015em; color: var(--ink-soft); }

/* =====================================================   MMD shield (logo lock-up)
   ============================================================ */
.mmd-shield {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  line-height: 1;
}
.mmd-shield .mmd-mark { width: 24px; height: 24px; flex: none; }
.mmd-shield .mmd-logo { width: 118px; height: auto; display: block; flex: none; }
.mmd-shield.mmd-official-lockup { flex-direction: column; align-items: flex-start; gap: 5px; padding: 8px 10px; }
.mmd-shield .mmd-word { font-family: var(--font-ui); font-weight: 800; font-size: calc(15px * var(--fs-scale, 1)); letter-spacing: -0.02em; color: var(--ink); }
.mmd-shield .entity-sub { display: block; font-family: var(--font-mono); font-size: calc(8px * var(--fs-scale, 1)); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; }
.mmd-shield.mmd-shield-dark { background: var(--ink); border-color: var(--ink); }
.mmd-shield.mmd-shield-dark .entity-sub { color: var(--ink-faint); }
/* =====================================================   App shell (sidebar + body + bot rail)
   ============================================================ */
.shell {
  display: grid;
  grid-template-columns: var(--sb-w) minmax(0, 1fr);
  min-height: 100vh;
}
.shell.no-bot { grid-template-columns: var(--sb-w) minmax(0, 1fr); }

/* Popped-out module window (?standalone=1 / ?popup=1): no rail, no bottom bar,
   the module fills the window. These six declarations used to be an inline
   style object on the frame in ShellFrame.tsx, including a hardcoded #0f172a;
   moved here so app code hands no style values to the DOM and the dark ground
   comes from the theme token instead of a literal (2026-08-17). */
.portal-shell-standalone {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  background: var(--ink);
  margin: 0;
  padding: 0;
}
.portal-shell-standalone > .body {
  width: 100%;
  flex: 1;
  margin: 0;
  /* MMDB-2688: was a flat 0 -- every screen PortalDesk frames
     (`?standalone=1&lp=1`, ShellFrame's isStandalone branch, this exact
     wrapper) rendered its real page content flush against the iframe
     edge. `.page-inner`'s own 95 consumers already carry their own
     padding at these same values (portal-core.css's `.page-inner` rule),
     so this default only ever reaches a page that opts into neither that
     nor a full-bleed app frame -- see the :has() resets directly below,
     which keep this at 0 for exactly those two cases so nothing doubles up. */
  padding: var(--rp-page-pad);
  display: flex;
  flex-direction: column;
}
/* Full-bleed app desktops that own their own edge-to-edge chrome
   (OmAppFrame's olp or slp wrapper -- Order Management, Master Data,
   Strategy; ProcDesktop's `.plp` -- Procurement2; Reporting's own
   `[data-eid="reporting-section"]` wrapper) and any page that already
   opts into `.page-inner`'s own padding (95 consumers portal-wide,
   including Finance) stay at zero HERE: the outer padding above would sit
   OUTSIDE a titlebar/toolbar built to reach the true frame edge, or stack
   a second padding ring on top of `.page-inner`'s own -- doubling it, not
   fixing it (Ben, MMDB-2688: "do not double-pad apps that already pad").
   MMDB-2688 (Ben, 2026-09-05: "add proper padding to all pages"): the
   four full-bleed wrappers used to stay at a flat zero everywhere too, so
   their own titlebar, toolbar and table sat flush against the portal
   frame on every edge -- Strategy, Master Data, Procurement2 and the
   Reporting hub all measured a 0px left inset. That gutter now lives on
   each wrapper directly, in the rule right below this one -- `.body`
   itself still stays at zero for them here, for the same doubling reason
   as `.page-inner` above, just applied one level lower. */
.portal-shell-standalone > .body:has(> .olp),
.portal-shell-standalone > .body:has(> .plp),
.portal-shell-standalone > .body:has(> .slp),
.portal-shell-standalone > .body:has(> [data-eid="reporting-section"]),
.portal-shell-standalone > .body:has(> .page-inner) {
  padding: 0;
}
/* The gutter itself for the four full-bleed frames above, carried on the
   wrapper each one already is -- not a second padding value, the SAME
   --rp-page-pad token the .body default above uses. A workbench table
   inside still fills the full width it is handed within this now-padded
   frame; only the frame's own distance from the portal edge changes, not
   any table's internal padding.
   The `:not(:has(...))` guards on the reporting-section selector carve
   out the one case where that SAME wrapper hosts a full-bleed embed
   instead of a dense report page: /app/reporting/cinematic renders a
   remote-canvas-frame WebGL iframe (The Cabinet) directly under this
   wrapper, and a diagrams-studio-style embed would be the same shape if
   reporting ever grew one. Those need the true frame edge, exactly like
   the remote-canvas-frame and diagrams-studio contract already carved out
   of the (unrelated) `.shell > .body` selectors elsewhere in this file --
   so this wrapper gets the gutter ONLY when it is not hosting one of
   those, never unconditionally. */
.portal-shell-standalone > .body > .olp,
.portal-shell-standalone > .body > .plp,
.portal-shell-standalone > .body > .slp,
.portal-shell-standalone > .body > [data-eid="reporting-section"]:not(:has(> .remote-canvas-frame)):not(:has(> .ds-diagrams-studio)) {
  padding: var(--rp-page-pad);
}

/* Sidebar (dark, persistent) */
.sb {
  background: var(--ink);
  color: var(--paper);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--ink);
  min-height: 0; overflow-y: auto;
}
/* Brand lockup: the white MMD logo on the rail's black, with "Employee Portal"
   centered underneath. The CoFlow wordmark was removed on Ben's instruction,
   2026-07-26. Centered as a block so it stays centered at every rail width. */
.sb .sb-brand { padding: 22px 14px 16px; border-bottom: 1px solid var(--sb-hair); }
.sb .sb-brand .mmd-shield {
  width: 100%;
  background: transparent;
  border-color: transparent;
  padding: 0;
  align-items: center;
  gap: 8px;
}
.sb .sb-brand .mmd-shield .mmd-logo { width: 100%; max-width: 146px; margin: 0 auto; }
.sb .sb-brand .mmd-shield .entity-sub {
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: calc(11px * var(--fs-scale, 1));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
  margin-top: 0;
}
.sb .entity-switch {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 18px 14px; padding: 8px 10px;
  border: 1px solid rgba(250,250,246,0.12);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
}
.sb .entity-switch .nm { font-size: calc(12px * var(--fs-scale, 1)); font-weight: 600; }
.sb .entity-switch .meta { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.sb .entity-switch .caret { color: var(--ink-faint); }

/* ------------------------------------------------------------------
   Left nav rail — ONE type role and ONE colour role, everywhere.
   Ben, 2026-07-26: "have all fonts and colors the same ... should all be more
   consistent, less variation is better."

   The whole rail uses var(--font-ui) at one size (--sb-type) and one weight.
   There are exactly two deliberate exceptions, both requested:
     - section headers are uppercase + bold, so the sections stand out;
     - unavailable items are grey.
   No mono type, no second size, no accent colour anywhere in the rail except
   the open-section spine and the active row's count.
   ------------------------------------------------------------------ */
:root {
  --sb-type: calc(14px * var(--fs-scale, 1));
  --sb-indent-1: 22px;
  --sb-indent-2: 22px;
  --sb-hair: rgba(250,250,246,0.10);
}

/* Sub-group labels inside an open section (Procurement > "Master data",
   "Processes"; IT > "Administration"). Same family and size as everything
   else — only the uppercase/bold folder treatment marks them as a grouping. */
.sb-group-label {
  font-family: var(--font-ui);
  font-size: var(--sb-type);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 14px 12px 6px var(--sb-indent-1);
}

.sb-nav { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; }
/* Collapsed section bodies. .sb-nav is always mounted (Loop-3 accordion fix,
   2026-07-18) and relies on the [hidden] attribute to collapse. The display:flex
   above outranks the UA [hidden]{display:none} default, so without this override
   EVERY folder body rendered open at once on desktop and the accordion looked
   broken (the equivalent override existed only inside the mobile-drawer block in
   the central components.css). Root cause of Ben's 2026-07-26 report that opening
   one section does not close the others. */
.sb-nav[hidden] { display: none; }

/* Every nav row — level 1, level 2, link, disabled, group header — is the same
   type. Depth is carried by indentation alone. */
.sb-nav a,
.sb-nav .mmd-side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px var(--sb-indent-1);
  text-decoration: none;
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--sb-type);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 4px;
  line-height: 1.3;
}
.sb-nav a .count {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: var(--sb-type);
  font-weight: 500;
  color: var(--ink-faint);
  font-feature-settings: "tnum" 1;
}
.sb-nav a:hover { background: rgba(250,250,246,0.08); }
.sb-nav a.active { background: var(--paper); color: var(--ink); }
.sb-nav a.active .count { color: var(--baobab); }

/* Unavailable items (no backend yet, or out of scope for this user): grey, and
   nothing else different. The grey IS the "not available" signal — there is no
   badge (Ben, 2026-07-26). */
.sb-nav .mmd-side-item.is-soon { color: var(--ink-mute); cursor: default; }
/* Group-only subsection headers (NavItem.href undefined, e.g. IT >
   Administration) — a label, not a control: grey, no hover, so it never reads
   as clickable when it is not. */
.sb-nav .mmd-side-item.mmd-side-group {
  color: var(--ink-faint);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding-top: 14px;
  cursor: default;
}

/* S0 stage nav — country scope <select class="ds-select"> sitting inside the
   procurement folder's .sb-nav rail (PLAN-gap-closure-20260709.md WS-U U1). */
.sb-nav select.ds-select {
  width: auto;
  font-family: var(--font-ui);
  font-size: var(--sb-type);
  padding: 7px 10px;
  margin: 4px 10px 8px var(--sb-indent-1);
}

/* Level-2 rows hang off a hairline rail one indent step further in. */
.sb-nav .sb-nav {
  padding: 0 0 0 var(--sb-indent-2);
  margin: 1px 0 3px;
  border-left: 1px solid var(--sb-hair);
}
.sb-nav .sb-nav a,
.sb-nav .sb-nav .mmd-side-item { padding-left: 12px; font-weight: 500; }
.sb-nav .sb-nav .sb-nav { padding-left: 14px; }

/* ------------------------------------------------------------------
   Sections as folders (accordion, one open at a time). Each section is a real
   container with its own edge, so the rail reads as a stack of folders rather
   than one long list (Ben, 2026-07-26: "add more separation / folder feel").
   ------------------------------------------------------------------ */
.sb-folders { display: flex; flex-direction: column; gap: 6px; padding: 4px 10px 10px; }
.sb-section {
  border: 1px solid var(--sb-hair);
  border-radius: 6px;
  overflow: hidden;
}
.sb-section[data-open="1"] {
  border-color: rgba(250,250,246,0.20);
  background: rgba(250,250,246,0.04);
}
.sb-folder {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; cursor: pointer; text-align: left;
  border: 0; border-left: 3px solid transparent;
  font-family: var(--font-ui);
  font-size: var(--sb-type);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 11px 12px 11px 9px;
  line-height: 1.3;
}
.sb-folder:hover { color: var(--paper); background: rgba(250,250,246,0.06); }
.sb-section[data-open="1"] .sb-folder {
  color: var(--paper);
  border-left-color: var(--baobab);
  border-bottom: 1px solid var(--sb-hair);
}
.sb-folder .sb-folder-label { flex: 1; }
.sb-folder .chev { width: 13px; height: 13px; flex: none; opacity: 0.6; transform: rotate(-90deg); transition: transform 0.15s ease; }
.sb-section[data-open="1"] .sb-folder .chev { transform: rotate(0deg); opacity: 1; }
/* Section body sits inside its own folder. Direct-child selector on purpose: a
   plain `.sb-section .sb-nav` also matches the nested level-2 rails above and,
   being later in the file at equal specificity, would flatten their indent. */
.sb-section > .sb-nav { padding: 6px 0 8px; }

/* ------------------------------------------------------------------
   Collapsible SUBsection header (Lead to Cash > Order to Cash): the same fold
   affordance as the main .sb-folder headers, one level down — slightly smaller
   type, no own border box, chevron flips with data-open on .sb-subsection.
   ------------------------------------------------------------------ */
.sb-subsection { margin-top: 4px; border-top: 1px solid var(--sb-hair); }
.sb-subfolder {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; cursor: pointer; text-align: left;
  border: 0; border-left: 3px solid transparent;
  font-family: var(--font-ui);
  font-size: calc(var(--sb-type) - 1px);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-faint);
  padding: 9px 12px 9px 9px;
  line-height: 1.3;
}
.sb-subfolder:hover { color: var(--paper); background: rgba(250,250,246,0.06); }
.sb-subsection[data-open="1"] .sb-subfolder { color: var(--paper); border-left-color: var(--baobab); }
.sb-subfolder .sb-folder-label { flex: 1; }
.sb-subfolder .chev { width: 12px; height: 12px; flex: none; opacity: 0.6; transform: rotate(-90deg); transition: transform 0.15s ease; }
.sb-subsection[data-open="1"] .sb-subfolder .chev { transform: rotate(0deg); opacity: 1; }

/* ------------------------------------------------------------------
   Rail width + hide (Ben, 2026-07-26: "allow the nav bar to be resized and
   hidden by slider"). The width is chosen here, one rule per step, and selected
   by <html data-rail-w> — the same server-stamped mechanism as data-theme and
   data-font-scale — so app code never hands a style value to the DOM.
   ------------------------------------------------------------------ */
html[data-rail-w="180"] { --sb-w: 180px; }
html[data-rail-w="200"] { --sb-w: 200px; }
html[data-rail-w="220"] { --sb-w: 220px; }
html[data-rail-w="240"] { --sb-w: 240px; }
html[data-rail-w="260"] { --sb-w: 260px; }
html[data-rail-w="280"] { --sb-w: 280px; }
html[data-rail-w="300"] { --sb-w: 300px; }
html[data-rail-w="330"] { --sb-w: 330px; }
html[data-rail-w="360"] { --sb-w: 360px; }
html[data-rail-w="400"] { --sb-w: 400px; }
/* No zero-width state: Ben, 2026-08-17 — the left rail is always visible and
   cannot be fully collapsed, so 180px (the first step above) is the floor. The
   former html[data-rail-hidden="1"] rules are deliberately gone; a stale
   data-rail-hidden attribute on an old cached page now styles nothing. */

/* The slider itself: a full-height grab strip on the rail's right edge. Drag to
   resize between the narrowest and widest step; there is no hide. */
.sb-resizer {
  position: fixed;
  top: 0; bottom: 0;
  left: var(--sb-w);
  width: 10px;
  margin-left: -5px;
  z-index: 60;
  cursor: col-resize;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  touch-action: none;
}
.sb-resizer:hover .sb-resizer-grip,
.sb-resizer:focus-visible .sb-resizer-grip,
.sb-resizer[data-dragging="1"] .sb-resizer-grip { opacity: 1; }
.sb-resizer-grip {
  display: block;
  width: 4px;
  height: 46px;
  border-radius: 2px;
  background: var(--baobab);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.sb-who-wrap { margin-top: auto; position: relative; }
.sb-who {
  width: 100%;
  padding: 18px 22px;
  border: 0;
  border-top: 1px solid rgba(250,250,246,0.07);
  display: flex; align-items: center; gap: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sb-who:hover { background: rgba(250,250,246,0.05); }
.sb-who .meta { min-width: 0; display: flex; flex-direction: column; }
.sb-who .meta .name { font-family: var(--font-ui); font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-who .meta .role { font-family: var(--font-ui); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* On-dark fallback disc: the default .directory-photo background is --ink,
   which is the same as the sidebar's own background — an ink-on-ink monogram
   would vanish, so the sidebar keeps the original baobab-red disc treatment. */
.sb-who .directory-photo {
  width: 32px; height: 32px;
  background: var(--baobab);
  box-shadow: 0 0 0 1px rgba(250,250,246,0.18);
}
.sb-who .directory-photo-fallback { color: var(--paper); font-size: calc(12px * var(--fs-scale, 1)); }

/* ds-menu is canonically defined in public/_design-system/components.css (PORTAL-R-007) */

/* Body */
.body { padding: 28px 44px 64px; background: var(--paper-2); min-width: 0; }
.shell:not(.no-bot) > .body {
  padding-right: 132px;
}
/* .remote-canvas-frame base lives in the design system (components.css). */
.remote-canvas {
  padding: 8px 0 88px;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}
.remote-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 40px;
  align-items: start;
  padding: 34px 0 28px;
  border-bottom: 1px solid var(--hairline);
}
.remote-hero h1 {
  max-width: 820px;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1;
}
.remote-summary {
  max-width: 820px;
  margin-top: 18px;
  font-size: calc(16px * var(--fs-scale, 1));
  line-height: 1.65;
  color: var(--ink-soft);
}
.remote-spec {
  margin: 0;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.remote-spec div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--hairline);
}
.remote-spec div:last-child { border-bottom: 0; }
.remote-spec dt {
  font-family: var(--font-mono);
  font-size: calc(9px * var(--fs-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.remote-spec dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--fs-scale, 1));
  color: var(--ink);
  overflow-wrap: anywhere;
}
.remote-notice { margin: 20px 0 0; }
.remote-grid {
  display: grid;
  gap: 28px;
  margin-top: 28px;
}
.remote-panel {
  min-width: 0;
}
.helpdesk-live-panel .headline {
  margin-top: 28px;
}
@media (min-width: 1180px) {
  .remote-canvas[data-remote-key="helpdesk"] .remote-notice {
    margin-right: 380px;
  }
  .helpdesk-live-panel {
    padding-right: 300px;
  }
}
.support-form {
  display: grid;
  gap: 14px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.support-form label {
  display: grid;
  gap: 7px;
}
.support-form label span {
  font-family: var(--font-mono);
  font-size: calc(9px * var(--fs-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.support-form input,
.support-form textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--ds-radius-sm);
  padding: 10px 12px;
  font: inherit;
}
.support-form input:focus,
.support-form textarea:focus {
  outline: 2px solid var(--baobab-bg);
  border-color: var(--baobab);
}
.mmd-table tr.selected td {
  background: var(--baobab-bg);
}
.records tbody tr.selected {
  background: var(--baobab-bg);
}
.records tbody tr.selected:hover {
  background: var(--baobab-bg);
}
.ticket-detail {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.ticket-detail h2 {
  margin: 0 0 10px;
  font-size: calc(20px * var(--fs-scale, 1));
  line-height: 1.2;
  letter-spacing: 0;
}
.ticket-detail p {
  color: var(--ink-mute);
  line-height: 1.55;
  white-space: pre-wrap;
}
.ticket-detail dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}
.ticket-detail dt {
  font-family: var(--font-mono);
  font-size: calc(9px * var(--fs-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ticket-detail dd {
  margin: 4px 0 0;
  color: var(--ink);
}
.ticket-followups {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.ticket-followups article {
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  padding: 12px;
  background: var(--paper);
}
.remote-records th,
.remote-records td {
  min-width: 120px;
}
.remote-records td.ttl {
  width: auto;
}
.remote-req-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  margin-right: 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  color: var(--ink-mute);
}

/* Sub-nav (under topbar, per-module tabs) */
.subnav {
  display: flex; align-items: center; gap: 0;
  padding: 14px 0 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
}
.subnav a {
  text-decoration: none; color: var(--ink-mute);
  font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.10em; text-transform: uppercase; font-weight: 500;
  padding: 10px 14px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--ink); }
.subnav a.active { color: var(--ink); border-bottom-color: var(--ink); }
.subnav .spacer { flex: 1; }
/* Sub-nav variants: a wrapping row for longer tab sets, thin group
   separators inside the row, and a button that behaves like a tab link
   (for panel toggles that live in the same row as the links). */
.subnav.subnav-wrap { flex-wrap: wrap; }
.subnav .subnav-sep { width: 1px; height: 14px; background: var(--hairline); margin: 0 6px; align-self: center; }
.subnav button.subnav-item {
  appearance: none; background: none; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent;
  color: var(--ink-mute);
  font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.10em; text-transform: uppercase; font-weight: 500;
  padding: 10px 14px;
  margin-bottom: -1px;
}
.subnav button.subnav-item:hover { color: var(--ink); }
.subnav button.subnav-item.active { color: var(--ink); border-bottom-color: var(--ink); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--ds-radius-sm);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: calc(12px * var(--fs-scale, 1));
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer; text-decoration: none;
  transition: all 0.15s ease;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--baobab); border-color: var(--baobab); }
.btn.danger { background: var(--baobab); color: var(--paper); border-color: var(--baobab); }
.btn.ghost { border-color: var(--hairline); color: var(--ink-mute); }
.btn.ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }
.btn .plus { font-family: var(--font-display); font-weight: 500; font-size: calc(16px * var(--fs-scale, 1)); line-height: 1; }

/* Editorial headline */
.headline {
  padding: 32px 0 28px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: end;
  border-bottom: 1px solid var(--hairline);
}
.headline h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 0.94;
  letter-spacing: -0.025em;
}
.headline h1 em { font-style: normal; font-weight: 900; color: var(--baobab); }
.headline .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; border-left: 1px solid var(--hairline); padding-left: 28px; }
.headline .stat .n { font-family: var(--font-display); font-weight: 900; font-size: calc(36px * var(--fs-scale, 1)); line-height: 1; letter-spacing: -0.03em; font-feature-settings: "tnum" 1; }
.headline .stat .l { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-mute); margin-top: 6px; }

/* =====================================================   Start page: signed-in name (PORTAL-R-021) + bookmarks (PORTAL-R-022).
   Compact single-column headline variant + a dense bookmarks block, both
   sharing the home band above the docked Cowork chat.
   ============================================================ */
/* 2026-08-31 (design-review screenshot yarnball-panel.png, MMDB-2395 lane):
   the launcher tile grid lives inside the PortalDesk background window's
   own nested iframe (`?standalone=1`), whose CSS viewport is meant to
   track the desk's real, dock-aware width via --cowork-dock-w (see
   .mlp.mlp-desk in components.css). The captured screenshot shows the
   2-column grid still drawn at its wide layout and clipped mid-tile at
   exactly the dock's edge (x=860 on a 1280px capture, matching the desk's
   correctly-narrowed 860px box) rather than collapsed to one column, i.e.
   the plain @media rules below — keyed off the DOCUMENT viewport — did not
   fire even though the iframe box itself had genuinely narrowed. A
   container query measures .home-band's own rendered box directly, no
   viewport indirection involved, so it is added below as the authoritative
   source once supported, with the @media rules kept as the same-outcome
   fallback for engines that predate @container. NOT re-verified live in a
   browser after this change — see the PR note. */
.home-band { display: block; container-type: inline-size; container-name: home-band; }
.headline.headline-home {
  grid-template-columns: 1fr;
  padding: 0 0 16px;
  gap: 0;
}
.headline.headline-home h1 { font-size: calc(30px * var(--fs-scale, 1)); line-height: 1.1; }

/* Employee self-service quick actions — dense tile row that replaces the
   removed bookmarks band. Whole-tile clickable links to the real ESS
   surfaces; every tile is drag-referenceable into CoFlow (data-ref). */
.home-ess { display: block; padding-top: 14px; border-top: 1px solid var(--hairline); }
.home-ess-label {
  font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.home-ess-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.home-ess-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.home-ess-tile:hover { border-color: var(--baobab); background: var(--paper-2); }
.home-ess-tile .home-ess-tile-nm {
  font-family: var(--font-display); font-weight: 700; font-size: calc(15px * var(--fs-scale, 1)); letter-spacing: -0.01em;
}
.home-ess-tile .home-ess-tile-sub {
  font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute);
}
.home-ess-tile[draggable="true"] { cursor: grab; }

/* Home tab strip (2026-07-21 rework): the ESS tiles now act as tabs that
   switch a panel underneath (an /embed/* iframe per tab) instead of
   navigating away. Reuses .home-ess-tile's own box/hover styling — only the
   active-state + role="tab" affordances are new. */
.home-band,
.home-tabpanels { max-width: 100%; }

/* MMDB-1823 (Ben, 2026-09-02 redline: "an even tile grid"): 7 launcher tiles
   (me/leave/expenses/travel/approvals/hr/helpdesk) never divide evenly into
   a fixed grid-template-columns count -- the old `repeat(4, minmax(0,1fr))`
   left the last row three tiles wide with an empty fourth cell, a ragged
   trailing gap CSS Grid cannot self-close. Flexbox can: `flex-wrap` plus a
   `flex-basis` on each tile lets the LAST (partial) row's items grow to
   share the full row width instead of leaving a dead column, at every
   breakpoint below, with no per-item-count special-casing needed. */
.home-tabstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}
.home-tabstrip .home-ess-tile {
  flex: 1 1 calc(25% - 6px);
  min-height: 60px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.home-ess-tile-glyphwrap {
  width: 34px; height: 34px; flex: 0 0 34px;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.home-ess-tile.is-active .home-ess-tile-glyphwrap { border-color: var(--baobab); background: var(--baobab-bg); }
.home-tabstrip .home-ess-tile-glyph { width: 16px; height: 16px; }
/* This 1100px step is fully superseded by the 1560px one below (any width
   <=1100px is also <=1560px, and the later rule wins ties) -- it predates
   that later breakpoint and is kept as documentation of the original
   round-3 polish step, not as a live rule. Updated from
   grid-template-columns to flex-basis alongside the base rule above so it
   is not a dead property on a no-longer-grid parent, even though it never
   wins the cascade. */
@media (max-width: 1100px) { .home-tabstrip .home-ess-tile { flex-basis: calc(50% - 4px); } }
.home-ess-tile { cursor: pointer; }
.home-ess-tile[role="tab"] { background: var(--paper); }
.home-ess-tile.is-active {
  border-color: var(--baobab);
  background: var(--baobab-bg);
}
.home-ess-tile.is-active .home-ess-tile-nm { color: var(--baobab-2); }
.home-ess-tile:focus-visible { outline: 2px solid var(--baobab); outline-offset: 2px; }
.home-ess-tile-glyph { color: var(--ink-mute); }
.home-ess-tile.is-active .home-ess-tile-glyph { color: var(--baobab); }

/* Tab panels */
.home-tabpanels { padding-top: 16px; }
.home-tabpanel[hidden] { display: none; }

.home-tabpanel {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 14px 16px;
  min-height: 200px;
}

/* /embed/* bare layout scope (no sidebar/topbar chrome) */
.embed-scope {
  padding: 16px 18px;
  background: var(--paper);
  min-height: 100%;
  box-sizing: border-box;
}
.embed-scope-body { display: flex; flex-direction: column; gap: 14px; }
.embed-status {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--fs-scale, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.embed-status-error { color: var(--baobab); }

/* CoFlow drag-drop catch: a transparent overlay that becomes active only
   while a drag is in progress, so a portal reference can be dropped onto the
   CoFlow window even though its iframe would otherwise swallow the drop. */
.coflow-drop-catch {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  border: 2px dashed var(--baobab);
  font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1));
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--baobab);
  pointer-events: auto;
}

.home-bookmarks { padding-top: 14px; border-top: 1px solid var(--hairline); }
.home-bookmarks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.home-bookmarks-label {
  font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.home-bookmarks-add { display: flex; align-items: center; gap: 8px; }
.home-bookmarks-add .ds-input { min-width: 150px; }
.home-bookmarks-error { color: var(--baobab); font-size: calc(12px * var(--fs-scale, 1)); margin: 6px 0 0; }
.home-bookmarks-empty { color: var(--ink-mute); font-size: calc(12px * var(--fs-scale, 1)); margin: 10px 0 0; }
.home-bookmarks-list {
  margin-top: 10px;
  max-height: 132px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-bookmark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--ds-radius-sm);
}
.home-bookmark-row:hover { background: var(--paper-2); }
.home-bookmark-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--ink);
}
.home-bookmark-title { font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-bookmark-host { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.home-bookmark-remove {
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--ink-faint);
  font-size: calc(15px * var(--fs-scale, 1));
  line-height: 1;
  cursor: pointer;
  border-radius: var(--ds-radius-sm);
}
.home-bookmark-remove:hover { color: var(--baobab); background: var(--baobab-bg); }

/* Directory */
.directory-workbench {
  padding: 34px 0 64px;
}
.directory-workbench-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: end;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--ink);
}
.directory-workbench-head h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  font-weight: 800;
  max-width: 760px;
}
.directory-summary {
  margin-top: 12px;
  max-width: 720px;
  color: var(--ink-soft);
  font-size: calc(15px * var(--fs-scale, 1));
  line-height: 1.55;
}
.directory-source {
  min-width: 170px;
  border-left: 1px solid var(--hairline);
  padding-left: 18px;
}
.directory-source .l,
.directory-source .v,
.directory-metric .l,
.directory-results-head small,
.directory-panel-title small,
.directory-person-main small,
.directory-person-meta small,
.directory-manager-row small,
.directory-me-action {
  display: block;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.directory-source .v {
  margin-top: 6px;
  color: var(--ink);
  font-weight: 700;
}
.directory-warning {
  margin-top: 18px;
}
.directory-hero.directory-compact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: end;
  padding: 34px 0 22px;
  border-bottom: 1px solid var(--ink);
}
.directory-hero.directory-compact-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
  font-weight: 800;
}
.directory-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(74px, 1fr));
  gap: 10px;
  min-width: 300px;
}
.directory-stats .stat {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 14px;
}
.directory-stats .n {
  display: block;
  font-family: var(--font-display);
  font-size: calc(30px * var(--fs-scale, 1));
  line-height: 1;
  font-weight: 800;
}
.directory-stats .l {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.directory-quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.directory-metric {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 14px 16px;
  min-height: 76px;
}
.directory-metric .n {
  display: block;
  font-family: var(--font-display);
  font-size: calc(30px * var(--fs-scale, 1));
  line-height: 1;
  font-weight: 800;
}
.directory-metric .l {
  margin-top: 8px;
}
.directory-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hairline);
}
.directory-filters label {
  display: grid;
  gap: 7px;
}
.directory-filters label span {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.directory-filters select {
  width: 100%;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--ds-radius-sm);
  min-height: 40px;
  padding: 0 12px;
  font: inherit;
}
.directory-filter-reset {
  min-height: 40px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--ds-radius-sm);
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.directory-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(300px, 360px);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}
.directory-results .ds-filterbar,
.directory-results .ds-field-row-2,
.directory-results .ds-table-section {
  margin: 16px;
}
.directory-table {
  table-layout: fixed;
}
.directory-table th,
.directory-table td {
  overflow-wrap: anywhere;
}
.directory-table tbody tr.active {
  background: var(--paper-2);
  box-shadow: inset 3px 0 0 var(--baobab);
}
.directory-table .sub {
  display: block;
  margin-top: 5px;
  color: var(--ink-mute);
  font-size: calc(12px * var(--fs-scale, 1));
  line-height: 1.35;
}
.directory-person-button {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 0;
  cursor: pointer;
}
.directory-org-panel {
  border: 1px solid var(--hairline);
  background: var(--paper);
  border-radius: var(--ds-radius-sm);
}
.directory-results {
  min-height: 0;
}
.directory-results-head,
.directory-panel-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--hairline);
}
.directory-results-head span,
.directory-panel-title span {
  font-weight: 800;
}
.directory-person-list {
  display: flex;
  flex-direction: column;
}
.directory-person-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(120px, 0.6fr);
  gap: 12px;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 13px 16px;
  cursor: pointer;
}
.directory-person-row:hover,
.directory-person-row.active,
.directory-manager-row:hover {
  background: var(--paper-2);
}
.directory-person-row.active {
  box-shadow: inset 3px 0 0 var(--baobab);
}
.directory-person-main,
.directory-person-meta {
  min-width: 0;
}
.directory-person-main strong,
.directory-person-meta small,
.directory-manager-row span {
  overflow-wrap: anywhere;
}
.directory-person-main strong {
  display: block;
  font-size: calc(14px * var(--fs-scale, 1));
}
.directory-person-main small,
.directory-person-meta small {
  margin-top: 4px;
}
.directory-person-panel {
  padding: 18px;
}
.directory-panel-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.directory-panel-head.compact {
  margin-bottom: 20px;
}
.directory-panel-head h2 {
  font-family: var(--font-display);
  font-size: calc(24px * var(--fs-scale, 1));
  line-height: 1.08;
}
.directory-panel-head p {
  margin-top: 5px;
  color: var(--ink-soft);
  line-height: 1.35;
}
.directory-photo {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}
.directory-photo.large {
  width: 58px;
  height: 58px;
}
/* The photo stacks ABOVE the initials (Ben, 2026-08-31: "remove the
   initials from the avatar picture if the user has a picture"). The
   fallback used to carry z-index:1 with the img unstacked, so the letters
   painted over every loaded photo. Order is now: loaded photo covers the
   initials completely (opaque --ink backing, so a transparent-PNG photo
   cannot let them bleed through); a missing/failed photo paints nothing
   (alt="" collapses a broken image) and the initials underneath stay the
   visible fallback. One rule, every consumer: topbar avatar, sidebar,
   account menus, directory. */
.directory-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: var(--ink);
}
.directory-photo-fallback {
  position: relative;
  font-family: var(--font-display);
  font-size: calc(12px * var(--fs-scale, 1));
  font-weight: 800;
}
.directory-photo.large .directory-photo-fallback {
  font-size: calc(18px * var(--fs-scale, 1));
}
.directory-contact-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0;
}
.directory-action-btn {
  min-height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: var(--ds-radius-sm);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: calc(11px * var(--fs-scale, 1));
  letter-spacing: 0.12em;
}
.directory-profile-update,
.directory-me-link {
  color: var(--ink);
  text-decoration: none;
}
.directory-profile-update {
  display: block;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-weight: 700;
}
.directory-me-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  justify-self: end;
}
.directory-me-name {
  display: block;
  font-size: calc(13px * var(--fs-scale, 1));
  font-weight: 800;
}
.directory-org-panel {
  overflow: hidden;
}
.directory-manager-list {
  display: flex;
  flex-direction: column;
}
.directory-manager-row {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 12px 14px;
  cursor: pointer;
}
.directory-empty {
  display: grid;
  gap: 6px;
  padding: 18px;
  color: var(--ink-mute);
  line-height: 1.5;
}
.directory-empty strong {
  color: var(--ink);
}

@media (max-width: 820px) {
  html,
  body {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }
  .portal-shell-frame {
    flex-direction: column;
  }
  .portal-shell-frame > .sb {
    flex: none;
    height: auto;
    max-height: none;
    overflow: visible;
  }
  .portal-shell-frame > .sb .sb-brand {
    padding: 12px 16px;
  }
  .portal-shell-frame > .sb .sb-brand .mmd-shield {
    width: auto;
  }
  .portal-shell-frame > .sb .sb-brand .mmd-shield .mmd-logo {
    width: 118px;
  }
  .portal-shell-frame > .sb .sb-group-label,
  .portal-shell-frame > .sb .sb-nav,
  .portal-shell-frame > .sb .sb-who {
    display: none;
  }
  .portal-shell-frame > .portal-main {
    flex: none;
    width: 100%;
    overflow: visible;
  }
  .shell {
    grid-template-columns: minmax(0, 1fr);
    min-height: 100vh;
  }
  .shell > .sb {
    height: auto;
    max-height: 46vh;
    overflow-y: auto;
  }
  .shell > .body,
  .shell:not(.no-bot) > .body {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding: 0 28px 64px;
  }
  .directory-workbench {
    padding-top: 18px;
  }
  .directory-hero.directory-compact-hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 18px;
  }
  .directory-stats {
    min-width: 0;
  }
  .directory-workbench-head,
  .directory-filters,
  .directory-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .directory-source {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding: 14px 0 0;
  }
  .directory-quick-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .directory-person-row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .directory-person-meta {
    grid-column: 2;
  }
  .directory-me-link {
    justify-self: start;
  }
}

/* Cards (universal block) */
.card-section { margin-top: 32px; }
.card-section .sec-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px;
}
.card-section .sec-hd .ttl { font-family: var(--font-display); font-weight: 700; font-size: calc(18px * var(--fs-scale, 1)); letter-spacing: -0.015em; }
.card-section .sec-hd .ttl .count { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); color: var(--ink-mute); margin-left: 8px; letter-spacing: 0.1em; }
.card-section .sec-hd .more { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; }
.card-section .sec-hd .more:hover { color: var(--baobab); }

/* Universal table (record list) */
.records { width: 100%; border-collapse: collapse; }
.records thead th {
  text-align: left;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: calc(9px * var(--fs-scale, 1));
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
  border-bottom: 1px solid var(--ink);
}
.records tbody td {
  padding: 18px 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.records tbody tr { transition: background 0.12s ease; }
.records tbody tr:hover { background: var(--paper-2); }
.records tbody tr:hover .ttl a { color: var(--baobab); }
.records .id { width: 130px; }
.records .id .mono { font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-mute); }
.records .id .mono .hash { color: var(--baobab); }
.records .id .mod {
  display: inline-block;
  margin-top: 4px;
  font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--hairline);
  padding: 2px 6px; border-radius: 3px;
}
.records .ttl a { color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: calc(16px * var(--fs-scale, 1)); letter-spacing: -0.015em; line-height: 1.2; transition: color 0.15s ease; }
.records .ttl .sub { display: block; margin-top: 5px; color: var(--ink-mute); font-size: calc(12.5px * var(--fs-scale, 1)); line-height: 1.45; max-width: 540px; }
.records .status { width: 130px; }
.records .pri { width: 80px; }
.records .who { width: 180px; }
.records .when { width: 110px; text-align: right; font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); color: var(--ink-mute); }

/* Status badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: calc(9px * var(--fs-scale, 1));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: var(--ds-radius-sm);
  border: 1px solid currentColor;
  white-space: nowrap;
}
.badge .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge.open    { color: var(--baobab); background: var(--baobab-bg); }
.badge.progress{ color: var(--signal-amber); background: var(--signal-amber-bg); }
.badge.waiting { color: var(--ink-mute); background: var(--paper-2); }
.badge.resolved{ color: var(--signal-grass); background: var(--signal-grass-bg); }
.badge.closed  { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.badge.draft   { color: var(--ink-mute); background: var(--paper); }
.badge.pending { color: var(--signal-amber); background: var(--signal-amber-bg); }
.badge.approved{ color: var(--signal-grass); background: var(--signal-grass-bg); }
.badge.rejected{ color: var(--baobab); background: var(--baobab-bg); }
.badge.active  { color: var(--signal-grass); background: var(--signal-grass-bg); }
.badge.inactive{ color: var(--ink-mute); background: var(--paper-2); }

/* Priority */
.pri-pill {
  display: inline-flex; gap: 2px; align-items: center;
  font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.pri-pill .b { width: 3px; height: 12px; background: var(--hairline); }
.pri-pill .b.on { background: var(--baobab); }
.pri-pill .l { margin-left: 6px; }

/* Avatar / assignee */
.who-tag { display: inline-flex; align-items: center; gap: 9px; }
.who-tag .av {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: calc(10px * var(--fs-scale, 1));
}
.who-tag .av.baobab { background: var(--baobab); }
.who-tag .av.cream  { background: var(--paper-2); color: var(--ink); border: 1px solid var(--hairline); }
.who-tag .nm { font-size: calc(12.5px * var(--fs-scale, 1)); font-weight: 500; color: var(--ink); }
.who-tag .role { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); display: block; }

/* Module icons (16px line glyphs) */
.glyph { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* =====================================================   Universal record DETAIL view
   ============================================================ */
.record-detail {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  padding-top: 28px;
}
.record-detail .rd-main { min-width: 0; }
.record-detail .rd-aside { border-left: 1px solid var(--hairline); padding-left: 28px; }

.rd-eyebrow { display: flex; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.rd-eyebrow .mod-tag {
  font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--hairline); padding: 3px 8px; border-radius: var(--ds-radius-sm);
}
.rd-eyebrow .id-tag { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); color: var(--ink-mute); }
.rd-eyebrow .id-tag .hash { color: var(--baobab); }

.rd-title { font-family: var(--font-display); font-weight: 700; font-size: calc(36px * var(--fs-scale, 1)); line-height: 1.05; letter-spacing: -0.025em; max-width: 720px; }
.rd-meta-row { display: flex; gap: 18px; align-items: center; margin-top: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.rd-meta-row .item { display: flex; flex-direction: column; gap: 4px; }
.rd-meta-row .item .l { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.rd-meta-row .item .v { font-size: calc(13px * var(--fs-scale, 1)); font-weight: 500; }

.rd-body { padding: 24px 0; font-size: calc(15px * var(--fs-scale, 1)); line-height: 1.7; color: var(--ink-soft); max-width: 720px; }
.rd-body p + p { margin-top: 12px; }

.rd-attachments {
  border-top: 1px solid var(--hairline);
  padding: 18px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.rd-attachments .att {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
}
.rd-attachments .att .ico { width: 18px; height: 18px; color: var(--ink-mute); }
.rd-attachments .att .nm { font-size: calc(13px * var(--fs-scale, 1)); font-weight: 500; }
.rd-attachments .att .sz { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute); margin-left: auto; }

.rd-conv {
  border-top: 1px solid var(--ink);
  padding-top: 24px;
  margin-top: 18px;
}
.rd-conv .msg { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.rd-conv .msg .av { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: calc(12px * var(--fs-scale, 1)); }
.rd-conv .msg .av.baobab { background: var(--baobab); }
.rd-conv .msg .hd { display: flex; justify-content: space-between; align-items: baseline; }
.rd-conv .msg .hd .nm { font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600; }
.rd-conv .msg .hd .when { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute); }
.rd-conv .msg .txt { font-size: calc(13.5px * var(--fs-scale, 1)); color: var(--ink-soft); line-height: 1.55; margin-top: 6px; }

.rd-particulars { display: flex; flex-direction: column; gap: 16px; }
.rd-particulars .p-row { display: flex; flex-direction: column; gap: 4px; }
.rd-particulars .p-row .l { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.rd-particulars .p-row .v { font-size: calc(14px * var(--fs-scale, 1)); font-weight: 500; }
.rd-particulars .p-row .v.mono { font-family: var(--font-mono); }

.rd-sla {
  margin-top: 24px;
  padding: 16px;
  background: var(--paper-2);
  border-left: 2px solid var(--baobab);
}
.rd-sla .l { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.rd-sla .v { font-family: var(--font-display); font-weight: 700; font-size: calc(22px * var(--fs-scale, 1)); margin-top: 4px; }
.rd-sla .sub { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); color: var(--ink-mute); margin-top: 4px; }

.rd-audit { margin-top: 24px; }
.rd-audit .e {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 12px; padding: 8px 0;
  border-bottom: 1px dashed var(--hairline);
  font-size: calc(12px * var(--fs-scale, 1));
}
.rd-audit .e .when { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute); }
.rd-audit .e .what { color: var(--ink-soft); }
.rd-audit .e .what b { color: var(--ink); }

/* =====================================================   Create form (universal)
   ============================================================ */
.form-grid {
  display: grid; grid-template-columns: 1fr 320px; gap: 48px;
  padding-top: 28px;
}
.form-main .fld { margin-bottom: 22px; }
.form-main .fld .l { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; display: block; }
.form-main .fld input[type=text],
.form-main .fld input[type=number],
.form-main .fld input[type=date],
.form-main .fld select,
.form-main .fld textarea {
  width: 100%;
  font-family: var(--font-ui); font-size: calc(14px * var(--fs-scale, 1));
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--ds-radius-sm);
  color: var(--ink);
  outline: none;
}
.form-main .fld textarea { min-height: 140px; resize: vertical; font-family: var(--font-ui); line-height: 1.6; }
.form-main .fld input:focus, .form-main .fld select:focus, .form-main .fld textarea:focus { border-color: var(--baobab); }
.form-main .fld .hint { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute); margin-top: 4px; }

.form-main .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-aside { border-left: 1px solid var(--hairline); padding-left: 28px; }
.form-aside h4 { font-family: var(--font-display); font-weight: 700; font-size: calc(14px * var(--fs-scale, 1)); letter-spacing: -0.01em; margin-bottom: 10px; }
.form-aside .a-block { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px dashed var(--hairline); font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--ink-soft); line-height: 1.5; }
.form-aside .a-block:last-child { border-bottom: 0; }
.form-aside .a-block .eyebrow { margin-bottom: 6px; }

/* Expenses FlowMaster remote layout */
.expenses-work-grid,
.expenses-claim-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  padding-top: 28px;
}
.expenses-work-main,
.expenses-claim-form {
  min-width: 0;
}
.expenses-work-aside,
.expenses-claim-aside {
  border-left: 1px solid var(--hairline);
  padding-left: 28px;
}
.expenses-work-aside .a-block,
.expenses-claim-aside .a-block {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px dashed var(--hairline);
  font-size: calc(12.5px * var(--fs-scale, 1));
  color: var(--ink-soft);
  line-height: 1.5;
}
.expenses-work-aside .a-block:last-child,
.expenses-claim-aside .a-block:last-child {
  border-bottom: 0;
}
.expenses-claim-form .row-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 860px) {
  .expenses-work-grid,
  .expenses-claim-grid,
  .expenses-claim-form .row-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  .expenses-work-grid,
  .expenses-claim-grid {
    gap: 28px;
  }
  .expenses-work-aside,
  .expenses-claim-aside {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-left: 0;
    padding-top: 22px;
  }
}

/* =====================================================   Bot rail
   ============================================================ */
.bot {
  position: fixed;
  z-index: 40;
  width: min(360px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  background: var(--paper-2);
  border: 1px solid var(--ink);
  box-shadow: 0 18px 54px rgba(14, 14, 12, 0.18);
  display: flex; flex-direction: column;
}
.bot.pos-bottom-right { right: 24px; bottom: 24px; }
.bot.pos-bottom-left { left: 24px; bottom: 24px; }
.bot.pos-top-right { right: 24px; top: 24px; }
.bot.pos-top-left { left: 24px; top: 24px; }
.floating-agent {
  border-radius: var(--radius);
  overflow: hidden;
}
.bot .bot-hd {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; gap: 10px;
}
.bot .bot-hd .av { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: calc(12px * var(--fs-scale, 1)); }
.bot .bot-hd .nm { font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600; }
.bot .bot-hd .role { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.bot .bot-hd .spacer { flex: 1; }
.bot .bot-hd .pop {
  font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
}
.bot .bot-feed { flex: 1; max-height: min(46vh, 440px); padding: 18px 20px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.bot .msg { max-width: 88%; font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.5; }
.bot .msg.bot-msg { align-self: flex-start; background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px 12px 12px 4px; padding: 10px 14px; }
.bot .msg.me-msg  { align-self: flex-end;   background: var(--ink); color: var(--paper); border-radius: 12px 12px 4px 12px; padding: 10px 14px; }
.bot .msg.me-msg .meta { color: rgba(250,250,246,0.55); }
.bot .msg .meta { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; display: block; }

.bot .card {
  align-self: stretch;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--ds-radius-sm);
  overflow: hidden;
}
.bot .card .ch {
  background: var(--ink);
  color: var(--paper);
  padding: 8px 12px;
  font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase;
}
.bot .card.urgent .ch { background: var(--baobab); }
.bot .card .cb { padding: 12px 14px; }
.bot .card .cb h5 { font-family: var(--font-display); font-weight: 700; font-size: calc(15px * var(--fs-scale, 1)); margin: 0 0 6px; letter-spacing: -0.015em; }
.bot .card .cb p { font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--ink-soft); line-height: 1.5; }
.bot .card .cb .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 10px; font-size: calc(12px * var(--fs-scale, 1)); }
.bot .card .cb .kv .k { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.bot .card .cba {
  display: flex; gap: 6px; padding: 10px 14px;
  border-top: 1px solid var(--hairline);
  background: var(--paper-2);
}
.bot .card .cba .btn { font-size: calc(11px * var(--fs-scale, 1)); padding: 6px 10px; }

.bot .bot-input {
  padding: 14px 18px;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
}
.bot .bot-input .row {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 8px 12px;
}
.bot .bot-input input { flex: 1; background: transparent; border: 0; outline: 0; font-family: var(--font-ui); font-size: calc(13px * var(--fs-scale, 1)); color: var(--ink); }
.bot .bot-input input::placeholder { color: var(--ink-faint); }
.bot .bot-input .send {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; border: 0; cursor: pointer;
}
.bot .bot-tools {
  padding: 8px 18px 14px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.bot .bot-tools .tool {
  font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.10em; text-transform: uppercase;
  padding: 4px 8px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink-mute); cursor: pointer;
}
.bot .bot-tools .tool:hover { color: var(--ink); border-color: var(--ink); }
.bot .bot-handoff {
  margin: 10px 18px 16px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px dashed var(--baobab);
  border-radius: var(--ds-radius-sm);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.bot .bot-handoff .l { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.10em; text-transform: uppercase; color: var(--baobab); }
.bot-launcher {
  position: fixed;
  z-index: 41;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px 10px 10px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 999px;
  box-shadow: 0 14px 34px rgba(14, 14, 12, 0.2);
  font-family: var(--font-ui);
  font-size: calc(12px * var(--fs-scale, 1));
  font-weight: 600;
  cursor: pointer;
}
.bot-launcher.pos-bottom-right { right: 24px; bottom: 74px; }
.bot-launcher.pos-bottom-left { left: 24px; bottom: 24px; }
.bot-launcher.pos-top-right { right: 24px; top: 24px; }
.bot-launcher.pos-top-left { left: 24px; top: 24px; }
.shell .portal-pin-resize {
  padding: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
}
.bot-launcher .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--baobab);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 900;
}

/* =====================================================   Dashboard sections (home)
   ============================================================ */
.h-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin-top: 28px;
}
.h-block { border: 1px solid var(--hairline); padding: 22px; background: var(--paper); }
.h-block .hd { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 14px; }
.h-block .hd .ttl { font-family: var(--font-display); font-weight: 700; font-size: calc(17px * var(--fs-scale, 1)); letter-spacing: -0.015em; }
.h-block .hd .ttl .count { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute); margin-left: 6px; }
.h-block .hd .mod-tag { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); border: 1px solid var(--hairline); padding: 2px 6px; border-radius: var(--ds-radius-sm); }
.h-block .item {
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--hairline);
}
.h-block .item:last-child { border-bottom: 0; }
.h-block .item .nm a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: calc(13.5px * var(--fs-scale, 1)); }
.h-block .item .nm a:hover { color: var(--baobab); }
.h-block .item .nm .sub { display: block; font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-mute); margin-top: 2px; }
.h-block .empty { font-family: var(--font-display); font-style: italic; font-size: calc(15px * var(--fs-scale, 1)); color: var(--ink-mute); padding: 12px 0; }

/* =====================================================   Mobile tab bar
   ============================================================ */
.mobile-frame {
  width: 390px; margin: 40px auto;
  border: 1px solid var(--ink);
  background: var(--paper);
  min-height: 844px;
  position: relative;
  display: flex; flex-direction: column;
}
.mobile-tabbar {
  position: sticky; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--ink);
  color: var(--paper);
  margin-top: auto;
}
.mobile-tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 14px;
  text-decoration: none;
  color: rgba(250,250,246,0.55);
  font-family: var(--font-mono); font-size: calc(8px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase;
}
.mobile-tabbar a.active { color: var(--paper); }
.mobile-tabbar a .glyph { width: 18px; height: 18px; stroke-width: 1.5; }

/* =====================================================   Helpers
   ============================================================ */
.row { display: flex; align-items: center; gap: 12px; }
.right { margin-left: auto; }
hr.hl { border: 0; border-top: 1px solid var(--hairline); margin: 28px 0; }

/* Empty placeholder ("future module") */
.placeholder {
  border: 1px dashed var(--ink-faint);
  padding: 32px;
  background: var(--paper-2);
  font-family: var(--font-display); font-style: italic;
  color: var(--ink-mute);
  font-size: calc(16px * var(--fs-scale, 1));
  text-align: center;
}

/* Notification banner */
.notice {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--baobab-bg);
  border-left: 3px solid var(--baobab);
  margin-bottom: 20px;
  font-size: calc(13px * var(--fs-scale, 1));
}
.notice .l { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--baobab); font-weight: 700; }
.notice .v { font-weight: 500; color: var(--ink); }
.notice .btn { margin-left: auto; }

@media (max-width: 1120px) {
  .shell,
  .shell.no-bot {
    grid-template-columns: 220px minmax(0, 1fr);
  }
  .body {
    padding-left: 28px;
    padding-right: 28px;
  }
  .remote-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  html,
  body {
    overflow: auto;
    height: auto;
  }
  .shell,
  .shell.no-bot {
    display: block;
  }
  .shell:has(> .body > .remote-canvas-frame) > .sb {
    position: static;
    top: auto;
    z-index: 30;
    display: none;
  }
  .shell:has(> .body > .remote-canvas-frame) > .body {
    padding: 0;
  }
  .shell > .body:has(> .remote-canvas-frame) > .remote-canvas-frame {
    height: auto;
    min-height: 0;
    flex: 1 1 auto;
  }
  .shell > .sb {
    height: auto;
    max-height: none;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    overflow: visible;
    padding: 10px;
  }
  .sb .sb-brand {
    padding: 0;
    flex: none;
  }
  .sb > div:not(.sb-brand):not(.sb-who) {
    display: none;
  }
  .sb-group-label,
  .sb-who {
    display: none;
  }
  .sb-nav {
    flex-direction: row;
    gap: 6px;
    padding: 0;
  }
  .sb-nav a {
    white-space: nowrap;
  }
  .shell > .body {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .remote-records {
    display: block;
    overflow-x: auto;
  }
  .remote-canvas {
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
  }
  .remote-canvas * {
    max-width: 100%;
  }
  .module-workbench {
    padding-inline: 0;
  }
  .module-workbench-header,
  .module-grid,
  .module-status-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .module-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .module-workbench .ds-records,
  .module-workbench .ds-records tbody,
  .module-workbench .ds-records tr,
  .module-workbench .ds-records td {
    display: block;
    width: 100%;
  }
  .module-workbench .ds-records tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .module-workbench .ds-records td {
    padding: 0;
  }
  .module-workbench .ds-records td + td {
    margin-top: 8px;
  }
  .module-workbench .ds-records-id {
    margin-bottom: 8px;
  }
  .module-workbench .module-row-action {
    margin-top: 12px;
    text-align: left;
  }
  .module-workbench .module-row-action .ds-button,
  .module-workbench .module-row-action .ds-tag {
    width: fit-content;
  }
  .bot,
  .bot-launcher {
    left: auto;
    right: 14px;
    top: auto;
    bottom: 14px;
  }
  .bot {
    top: auto;
    max-height: calc(100vh - 28px);
  }
  .bot-launcher {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }
  .bot-launcher > span:not(.av) {
    display: none;
  }
}

@media (max-width: 860px) {
  .portal-shell-frame {
    display: block;
  }
  /* Phone layout only: the rail becomes the Menu drawer (see the
     .portal-mobile-nav-open rules in the design system) because a 180px column
     on a 360px screen is not a working surface. It is never gone — the Menu
     trigger is fixed on screen at this width and opens the same nav. On every
     larger screen the rail is permanent and cannot be collapsed. */
  .portal-shell-frame > .sb {
    display: none;
  }
  /* Nothing to resize while the nav is a drawer, and the grab strip would
     otherwise sit over the page at the rail's remembered width. */
  .portal-shell-frame > .sb-resizer {
    display: none;
  }
  .portal-shell-frame > .portal-main {
    width: 100%;
    overflow: visible;
  }
  .portal-main > .remote-canvas-frame {
    min-height: calc(100vh - 44px);
  }
}

.me-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: end; padding: 16px 0 14px; border-bottom: 1px solid var(--ink); }
.me-id { display: flex; align-items: center; gap: 15px; }
.me-avatar { flex: none; width: 46px; height: 46px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--font-display); font-weight: 900; font-size: calc(18px * var(--fs-scale, 1)); letter-spacing: -0.02em; border-radius: var(--ds-radius-sm); }
.me-eyebrow { font-family: var(--font-mono); font-size: calc(8.5px * var(--fs-scale, 1)); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px; }
.me-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(23px, 2.5vw, 33px); line-height: 0.98; letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.me-name em { font-style: italic; color: var(--baobab); }
.me-role { font-family: var(--font-ui); font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--ink-soft); margin-top: 6px; }
.me-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 24px; margin: 0; }
.me-fact { border-left: 1px solid var(--hairline); padding-left: 12px; min-width: 0; }
.me-fact dt { font-family: var(--font-mono); font-size: calc(8.5px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px; }
.me-fact dd { margin: 0; font-family: var(--font-ui); font-size: calc(12px * var(--fs-scale, 1)); font-weight: 500; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.me-balances { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.me-balance { border: 1px solid var(--hairline); background: var(--paper); padding: 11px 13px; }
.me-balance-label { font-family: var(--font-mono); font-size: calc(8.5px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.me-balance-n { font-family: var(--font-display); font-weight: 900; font-size: calc(26px * var(--fs-scale, 1)); line-height: 1; letter-spacing: -0.03em; color: var(--ink); margin: 6px 0 8px; font-feature-settings: "tnum" 1; }
.me-balance-unit { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); font-weight: 400; letter-spacing: 0.04em; color: var(--ink-mute); }
.me-meter { height: 3px; background: var(--paper-2); border-radius: 2px; overflow: hidden; }
.me-meter > i { display: block; height: 100%; background: var(--ink); border-radius: 2px; }
.me-meter > i.lvl-0   { width: 2%; background: var(--baobab); }
.me-meter > i.lvl-10  { width: 10%; }
.me-meter > i.lvl-20  { width: 20%; }
.me-meter > i.lvl-30  { width: 30%; }
.me-meter > i.lvl-40  { width: 40%; }
.me-meter > i.lvl-50  { width: 50%; }
.me-meter > i.lvl-60  { width: 60%; }
.me-meter > i.lvl-70  { width: 70%; }
.me-meter > i.lvl-80  { width: 80%; }
.me-meter > i.lvl-90  { width: 90%; }
.me-meter > i.lvl-100 { width: 100%; background: var(--signal-grass); }

.me-quick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
.me-tile { display: flex; flex-direction: column; gap: 9px; padding: 12px; min-height: 64px; border: 1px solid var(--hairline); background: var(--paper); text-decoration: none; color: var(--ink); font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; justify-content: space-between; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease; }
.me-tile .glyph { width: 18px; height: 18px; stroke-width: 1.4; color: var(--baobab); }
.me-tile:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); }
.me-tile:hover .glyph { color: var(--paper); }

/* Card grid — compact (h-grid/h-block are HR-only) */
.h-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.h-block { border: 1px solid var(--hairline); padding: 14px 16px; background: var(--paper); }
.h-block .hd { padding-bottom: 8px; margin-bottom: 9px; }
.h-block .item { padding: 7px 0; }
.h-block .item .nm .me-strong { font-weight: 600; font-size: calc(13px * var(--fs-scale, 1)); color: var(--ink); display: block; }
.me-profile-meter { padding: 2px 0 9px; }

@media (max-width: 1120px) {
  .me-hero { grid-template-columns: 1fr; gap: 16px; align-items: start; }
  .me-balances { grid-template-columns: repeat(2, 1fr); }
  .me-quick { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .me-balances { grid-template-columns: 1fr 1fr; }
  .me-quick { grid-template-columns: 1fr 1fr; }
  .me-facts { grid-template-columns: 1fr; }
}

/* === Directory org chart (vertical tree) — 2026-06-21 rebuild. Self-contained:
   defines every directory class the new DirectoryBrowser uses, appended last so it
   wins over the legacy directory CSS above. Central DS tokens only, no inline styles. === */
.directory-topbar { grid-template-columns: auto minmax(260px, 1fr) auto; }
.directory-command input { width: 100%; }
.directory-me-link { border: 0; background: transparent; cursor: pointer; font: inherit; }
.directory-me-link:disabled { cursor: default; opacity: 0.6; }

.directory-head { padding: 30px 0 18px; border-bottom: 1px solid var(--hairline); }
.directory-head h1 { margin: 10px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.directory-intro { max-width: 70ch; margin: 14px 0 0; color: var(--ink-soft); font-size: calc(15px * var(--fs-scale, 1)); line-height: 1.6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.directory-source-tag { display: inline-flex; align-items: center; height: 22px; margin-right: 44px; padding: 0 9px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--paper); color: var(--ink-mute); font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; }

.directory-orgchart { display: grid; gap: 16px; min-width: 0; }
.directory-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.directory-toolbar .ds-field { min-width: 180px; }

.directory-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: 0; }
.directory-tree-root { margin-top: 2px; }
.directory-tree .directory-tree { margin: 2px 0 2px 17px; padding-left: 15px; border-left: 1px solid var(--hairline); }
.directory-tree-item { margin: 0; min-width: 0; }
.directory-node { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; min-width: 0; }
.directory-node:hover { background: var(--paper); }
.directory-node.active { background: var(--paper); border-color: var(--ink); }
.directory-node-me { box-shadow: inset 3px 0 0 var(--baobab); }
.directory-node-match { background: var(--baobab-bg); }
.directory-node-toggle { width: 24px; height: 24px; display: inline-grid; place-items: center; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink-mute); cursor: pointer; border-radius: var(--ds-radius-sm); font-family: var(--font-mono); font-size: calc(13px * var(--fs-scale, 1)); line-height: 1; padding: 0; }
.directory-node-toggle:hover { color: var(--baobab); border-color: var(--baobab); }
.directory-node-spacer { display: inline-block; width: 24px; height: 24px; }
.directory-node-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; min-width: 0; padding: 0; font: inherit; }
.directory-node-text { display: grid; gap: 1px; min-width: 0; }
.directory-node-name { font-family: var(--font-ui); font-weight: 700; font-size: calc(14px * var(--fs-scale, 1)); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-node-meta { font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-node-reports { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); white-space: nowrap; padding-left: 8px; }

.directory-detail { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow: auto; border: 1px solid var(--ink); background: var(--paper); padding: 16px; }
.directory-contact-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.directory-disabled-action { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--hairline); color: var(--ink-mute); font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.08em; }
.directory-link-button { border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: underline; cursor: pointer; padding: 0; }
.directory-link-button:hover { color: var(--baobab); }
.directory-reporting, .directory-profile-panel { display: grid; gap: 12px; border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 14px; }
.directory-reporting-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.directory-reporting-head b { color: var(--ink); }
.directory-report-list { display: grid; gap: 6px; }
.directory-report-row { display: grid; gap: 3px; width: 100%; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); padding: 9px 10px; text-align: left; cursor: pointer; border-radius: 4px; }
.directory-report-row:hover { background: var(--paper-2); }
.directory-report-row span { font-weight: 700; }
.directory-report-row small { color: var(--ink-mute); }
.directory-profile-fields { display: grid; gap: 10px; }
.directory-profile-status { font-size: calc(12px * var(--fs-scale, 1)); color: var(--signal-grass); }
.directory-profile-error { font-size: calc(12px * var(--fs-scale, 1)); color: var(--baobab); }

@media (max-width: 1100px) {
  .directory-layout { grid-template-columns: minmax(0, 1fr); }
  .directory-detail { position: static; max-height: none; }
}
@media (max-width: 820px) {
  .directory-node-reports { display: none; }
  .directory-tree .directory-tree { margin-left: 12px; padding-left: 11px; }
}

/* Directory org chart — reporting-lines / by-function sections (2026-06-21). */
.directory-section { display: grid; gap: 6px; }
.directory-section + .directory-section { margin-top: 22px; }
.directory-section-head { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); padding: 0 0 6px; border-bottom: 1px solid var(--hairline); }
.directory-group .directory-group-main { cursor: pointer; }
.directory-group-name { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink); }
.directory-group .directory-node-reports { color: var(--ink); }

.cowork-rail .cowork-frame {
  flex: 1 1 auto; min-height: 0; width: 100%;
  border: 0; display: block; background: var(--paper);
}
.cowork-launcher .av { background: var(--baobab); }

/* === Directory org chart v7 — collapsed-by-default hero + comb grid (2026-06-21).
   Start collapsed (hero only); reveal one level per click; teams as a centred
   6-per-row comb grid, never a 29-wide row. Overrides v5/v6. Tokens only. === */
.oc-scroll {
  overflow: auto;
  height: auto;
  min-height: 480px;
  max-height: calc(100vh - 210px);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background-color: var(--paper);
  background-image: radial-gradient(var(--hairline) 1px, transparent 1.4px);
  background-size: 26px 26px;
  background-position: -1px -1px;
  padding: 40px 24px 56px;
  margin-top: 10px;
}
.oc-canvas-inner { display: flex; flex-direction: column; align-items: center; min-width: 100%; }

/* hero (company root) */
.oc-company { display: flex; flex-direction: column; align-items: center; position: relative; }
.oc-hero { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 380px; max-width: 84vw; padding: 22px 26px; border: 1.5px solid var(--ink); border-radius: 5px; background: var(--paper-2); cursor: pointer; font: inherit; text-align: center; }
.oc-hero:hover { background: var(--paper); }
.oc-hero-eyebrow { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.oc-hero-name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: calc(30px * var(--fs-scale, 1)); line-height: 1; color: var(--ink); }
.oc-hero-stats { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale, 1)); letter-spacing: 0.06em; color: var(--ink-mute); }
.oc-hero-pill { margin-top: 12px; }

/* the +N / collapse pill */
.oc-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 12px; border: 1px solid var(--baobab); color: var(--baobab); background: transparent; border-radius: 12px; font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale, 1)); line-height: 1; cursor: pointer; }
.oc-pill:hover { background: var(--baobab); color: var(--paper); }
.oc-pill[aria-expanded="true"] { border-color: var(--hairline); color: var(--ink-mute); }
.oc-pill[aria-expanded="true"]:hover { background: var(--paper-2); color: var(--ink); }
/* person/team box pill sits at the box bottom-centre */
.oc-team .oc-pill, .oc-person .oc-pill { position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); z-index: 2; }

/* collapsed-state stub + hint */
.oc-stub-hint { display: flex; flex-direction: column; align-items: center; }
.oc-stub { width: 0; height: 40px; border-left: 1px solid var(--hairline); margin-top: 6px; }
.oc-hint-text { margin: 14px 0 0; font-family: var(--font-display); font-style: italic; font-size: calc(15px * var(--fs-scale, 1)); color: var(--ink-mute); text-align: center; }

/* expanded tree */
.oc-tree { display: flex; flex-direction: column; align-items: center; width: 100%; }
.oc-teamgrid { display: flex; flex-direction: column; align-items: center; gap: 0; }
.oc-teamrow { display: flex; justify-content: center; gap: 30px; position: relative; padding-top: 48px; }
.oc-teamrow::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 24px; border-left: 1px solid var(--hairline); }
.oc-teamrow::after { content: ""; position: absolute; top: 24px; left: 14%; right: 14%; border-top: 1px solid var(--hairline); }
.oc-team-cell { display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 22px; }
.oc-team-cell::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 22px; border-left: 1px solid var(--hairline); }

/* boxes */
.oc-node { position: relative; display: inline-flex; }
.oc-box { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 220px; padding: 11px 14px; border: 1px solid var(--hairline); background: var(--paper); border-radius: 4px; cursor: pointer; font: inherit; text-align: left; transition: border-color 0.12s ease; }
.oc-box:hover { border-color: var(--ink-soft); }
.oc-node.active > .oc-box { border-color: var(--baobab); box-shadow: inset 3px 0 0 var(--baobab); }
.oc-team > .oc-box { align-items: center; text-align: center; border-color: var(--ink); background: var(--paper); }
.oc-eyebrow { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.oc-team .oc-name { font-family: var(--font-ui); font-weight: 700; font-size: calc(16px * var(--fs-scale, 1)); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 192px; }
.oc-team .oc-count { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.06em; color: var(--ink-mute); }
.oc-person .oc-name { font-family: var(--font-ui); font-weight: 600; font-size: calc(14px * var(--fs-scale, 1)); color: var(--ink); display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 192px; }
.oc-person .oc-sub { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.04em; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 192px; }
.oc-you { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--baobab); border: 1px solid var(--baobab); border-radius: 3px; padding: 0 4px; }

/* people column under a team */
.oc-people { list-style: none; margin: 0; padding: 18px 0 0; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative; }
.oc-people::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 18px; border-left: 1px solid var(--hairline); }
.oc-person-li { display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 10px; }
.oc-person-li::before { content: ""; position: absolute; top: -10px; left: 50%; width: 0; height: 20px; border-left: 1px solid var(--hairline); }
.oc-person-li:first-child::before { top: -18px; height: 28px; }

.oc-collapse-all { border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); border-radius: 4px; padding: 6px 12px; font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.oc-collapse-all:hover { border-color: var(--baobab); color: var(--baobab); }

@media (max-width: 1100px) { .oc-teamrow { gap: 18px; } .oc-box, .oc-hero { width: 180px; } }
@media (max-width: 820px) { .directory-head { display: none; } .oc-scroll { padding: 24px 10px 36px; } .oc-teamrow { flex-wrap: wrap; } }
/* Dense workbench header for queue/list work surfaces (opt-in modifier; tames the marketing-size H1). */
.module-workbench-dense .module-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.06; letter-spacing: -0.02em; }
.module-workbench-dense .module-workbench-header { align-items: center; }
/* === Directory org chart v8 — personal reporting tree (2026-06-21).
   Rooted on the signed-in user (focus on me), top-down, real manager lines,
   SMALL boxes, NO side panel, search to focus anyone. Overrides v5–v7. === */
.rt-shell { margin-top: 4px; }
.rt-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
/* Ben, 2026-08-31: "giant oversized search input" -- shrunk to the DS input
   size (padding/border/font match .ds-input). This is the in-page people
   search, still fully functional -- not the removed topbar search. */
.rt-search { flex: 1; display: flex; align-items: center; gap: 6px; border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 5px 9px; background: var(--paper); }
.rt-search .glyph { width: 13px; height: 13px; color: var(--ink-mute); flex: none; }
.rt-search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink); outline: none; }
.rt-clear { border: 0; background: transparent; color: var(--ink-mute); font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.rt-clear:hover { color: var(--baobab); }

.rt-results-wrap { border: 1px solid var(--hairline); border-radius: 8px; background: var(--paper); padding: 6px; max-height: calc(100vh - 230px); overflow: auto; }
.rt-results { list-style: none; margin: 0; padding: 0; }
.rt-result { display: flex; align-items: baseline; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-left: 2px solid transparent; background: transparent; cursor: pointer; font: inherit; text-align: left; border-radius: 3px; }
.rt-result:hover { background: var(--paper-2); border-left-color: var(--baobab); }
.rt-more, .rt-empty, .rt-note { padding: 14px; font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.04em; color: var(--ink-mute); text-align: center; }
.rt-note { font-family: var(--font-display); font-style: italic; font-size: calc(14px * var(--fs-scale, 1)); }

/* framed canvas — content-driven height, dotted grid, no dead space */
.rt-canvas { overflow: auto; min-height: 360px; max-height: calc(100vh - 230px); border: 1px solid var(--hairline); border-radius: 8px; background-color: var(--paper); background-image: radial-gradient(var(--hairline) 1px, transparent 1.4px); background-size: 26px 26px; background-position: -1px -1px; padding: 18px 20px 36px; }
.rt-nav { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rt-up { border: 1px solid var(--hairline); background: var(--paper); color: var(--ink); border-radius: 4px; padding: 5px 10px; font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.rt-up:hover { border-color: var(--baobab); color: var(--baobab); }

/* top-down connector tree */
.rt-tree, .rt-tree ul { list-style: none; margin: 0; padding: 0; }
.rt-tree { display: flex; justify-content: center; min-width: max-content; padding-top: 6px; }
.rt-tree ul { display: flex; justify-content: center; padding-top: 22px; position: relative; }
.rt-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 7px 0; }
.rt-tree li::before, .rt-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 1px solid var(--hairline); }
.rt-tree li::after { right: auto; left: 50%; border-left: 1px solid var(--hairline); }
.rt-tree li:only-child::before, .rt-tree li:only-child::after { display: none; }
.rt-tree li:only-child { padding-top: 22px; }
.rt-tree li:first-child::before, .rt-tree li:last-child::after { border: 0; }
.rt-tree li:last-child::before { border-right: 1px solid var(--hairline); }
.rt-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 22px; border-left: 1px solid var(--hairline); }
.rt-tree > li { padding-top: 0; }
.rt-tree > li::before, .rt-tree > li::after { display: none; }

/* boxes */
.rt-node { position: relative; display: inline-flex; }
.rt-box { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 168px; padding: 6px 10px; border: 1px solid var(--hairline); background: var(--paper); border-radius: 4px; }
.rt-name-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.rt-name { font-family: var(--font-ui); font-weight: 600; font-size: calc(13px * var(--fs-scale, 1)); color: var(--ink); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rt-role { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.03em; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rt-name-btn:hover .rt-name { color: var(--baobab); }
.rt-you { font-family: var(--font-mono); font-size: calc(8.5px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--ink-mute); border-radius: 3px; padding: 0 4px; }

/* the focused root box: a touch larger, ink border, with contact actions */
.rt-root .rt-box { width: 232px; padding: 11px 14px; border: 1.5px solid var(--ink); background: var(--paper-2); }
.rt-root .rt-name { font-size: calc(15px * var(--fs-scale, 1)); }
.rt-root .rt-role { font-size: calc(11px * var(--fs-scale, 1)); }
.rt-actions { display: flex; gap: 6px; margin-top: 8px; }
.rt-act { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--hairline); border-radius: 3px; padding: 3px 8px; text-decoration: none; background: var(--paper); }
.rt-act:hover { border-color: var(--baobab); color: var(--baobab); }
/* Red once per view (MMDB-2395): the active view tab carries the sole red;
   the "me" node reads as identity via a neutral ink accent instead. */
.rt-me:not(.rt-root) .rt-box { box-shadow: inset 3px 0 0 var(--ink-soft); }

/* expand pill on a report that has its own reports -- neutral chip
   treatment (matches .ds-chip/.ds-badge), red reserved for the active tab. */
.rt-pill { position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%); min-width: 22px; height: 20px; padding: 0 8px; border: 1px solid var(--ink-mute); color: var(--ink-soft); background: var(--paper); border-radius: 10px; font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); line-height: 1; cursor: pointer; z-index: 2; }
.rt-pill:hover { background: var(--baobab); color: var(--paper); }
.rt-pill[aria-expanded="true"] { border-color: var(--hairline); color: var(--ink-mute); }
.rt-pill[aria-expanded="true"]:hover { background: var(--paper-2); color: var(--ink); }

@media (max-width: 820px) { .directory-head { display: none; } .rt-canvas { padding: 14px 10px 28px; } }

/* === Directory org chart v9 — focused person + comb grid of reports (2026-06-21).
   Root (focused person) at top-centre; direct reports wrap into a 6-per-row comb
   grid so a wide team never pushes the root off-screen. Overrides v8 rt-tree. === */
.rt-chart { display: flex; flex-direction: column; align-items: center; min-width: max-content; padding: 4px 0 8px; }
.rt-grid { display: flex; flex-direction: column; align-items: center; }
.rt-row { display: flex; justify-content: center; gap: 24px; position: relative; padding-top: 46px; }
.rt-row::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 23px; border-left: 1px solid var(--hairline); }
.rt-row::after { content: ""; position: absolute; top: 23px; left: 13%; right: 13%; border-top: 1px solid var(--hairline); }
.rt-cell { display: flex; flex-direction: column; align-items: center; position: relative; padding-top: 22px; }
.rt-cell::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 22px; border-left: 1px solid var(--hairline); }
.rt-cell .rt-grid { margin-top: 4px; }

/* root has no incoming connector */
.rt-chart > .rt-root { margin-bottom: 0; }

/* === Directory org chart v10 — design polish (2026-06-21).
   Calmer canvas, refined type, cleaner connectors, compact non-clipping grid,
   staggered reveal. Within Letterbox DS. Overrides v8/v9. === */
/* Ben, 2026-08-31: "huge empty whitespace below a tiny org tree" -- a
   360/320px min-height reserved most of a viewport-tall box even for a
   2-3-row tree. The tree now sits at the top with normal padding; a genuinely
   deep tree still scrolls inside max-height, it just no longer pads a small
   one out with dead desk-coloured space below it. */
.rt-canvas {
  background-image: none;                 /* drop the busy dotted grid */
  background: var(--paper);
  min-height: 140px;
  max-height: calc(100vh - 260px);
  padding: 14px 16px 18px;
}
.rt-chart { padding: 6px 0 12px; }

/* compact boxes that fit 5-per-row without horizontal clipping */
.rt-box { width: 150px; padding: 7px 11px; border-radius: 5px; border-color: var(--hairline); transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease; }
.rt-name-btn:hover { transform: none; }
.rt-node:not(.rt-root):hover .rt-box { border-color: var(--ink-soft); box-shadow: 0 2px 0 rgba(14,14,12,0.04); }
.rt-name { font-family: var(--font-ui); font-weight: 600; font-size: calc(13px * var(--fs-scale, 1)); letter-spacing: -0.005em; }
.rt-role { font-family: var(--font-ui); font-weight: 400; font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0; color: var(--ink-mute); text-transform: none; }

/* focused root — Fraunces display name, a scarce baobab top hairline */
.rt-root .rt-box { width: 248px; padding: 13px 16px 12px; border: 1px solid var(--ink); border-top: 2px solid var(--baobab); background: var(--paper); box-shadow: 0 6px 22px -16px rgba(14,14,12,0.5); }
.rt-root .rt-name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: calc(19px * var(--fs-scale, 1)); letter-spacing: -0.01em; }
.rt-root .rt-role { font-size: calc(11.5px * var(--fs-scale, 1)); margin-top: 1px; }
.rt-actions { margin-top: 10px; gap: 7px; }
.rt-act { font-size: calc(9.5px * var(--fs-scale, 1)); padding: 4px 9px; border-radius: 3px; }

/* connectors — align rail to first/last cell centres (cell box 150) */
.rt-row { gap: 22px; padding-top: 44px; }
.rt-row::before { height: 22px; }
.rt-row::after { top: 22px; left: 75px; right: 75px; }
.rt-cell { padding-top: 22px; }
.rt-cell::before { height: 22px; }
.rt-cell .rt-grid { margin-top: 6px; }

/* selected/me accents stay scarce -- red once per view (MMDB-2395): the
   active tab carries the sole red, "me" reads via a neutral ink accent. */
.rt-me:not(.rt-root) .rt-box { box-shadow: inset 3px 0 0 var(--ink-soft); }

/* staggered reveal on load / expand */
@keyframes rt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rt-chart .rt-node { animation: rt-rise .30s cubic-bezier(.2,.7,.2,1) both; }
.rt-row > .rt-cell:nth-child(1) > .rt-node { animation-delay: .03s; }
.rt-row > .rt-cell:nth-child(2) > .rt-node { animation-delay: .07s; }
.rt-row > .rt-cell:nth-child(3) > .rt-node { animation-delay: .11s; }
.rt-row > .rt-cell:nth-child(4) > .rt-node { animation-delay: .15s; }
.rt-row > .rt-cell:nth-child(5) > .rt-node { animation-delay: .19s; }
@media (prefers-reduced-motion: reduce) { .rt-chart .rt-node { animation: none; } }

/* === Directory org chart v11 — fit 5/row without edge clipping (2026-06-21). === */
.rt-box { width: 142px; }
.rt-root .rt-box { width: 248px; }
.rt-row { gap: 18px; }
.rt-row::after { left: 71px; right: 71px; }

/* === Directory org chart v12 — interactivity pass (2026-06-21):
   photos, hover spotlight + blur, pan, numbering, Teams/Cowork actions,
   softer palette, smaller roles. Overrides v8–v11. === */

/* softer palette — no harsh near-black on paper */
.rt-name { color: var(--ink-soft); }
.rt-box { width: 150px; padding: 7px 9px; position: relative; border-color: var(--hairline); }
.rt-root .rt-box { width: 270px; border: 1px solid var(--ink-soft); border-top: 2px solid var(--baobab); background: var(--paper); }
.rt-canvas { cursor: grab; }
.rt-canvas.is-panning { cursor: grabbing; }
.rt-canvas.is-panning * { cursor: grabbing !important; }

/* name button with avatar */
.rt-name-btn { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.rt-text { display: flex; flex-direction: column; min-width: 0; }
.rt-name { font-family: var(--font-ui); font-weight: 600; font-size: calc(12.5px * var(--fs-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rt-role { font-family: var(--font-ui); font-weight: 400; font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* node numbering (tracking) */
.rt-num { position: absolute; top: 3px; right: 6px; font-family: var(--font-mono); font-size: calc(8px * var(--fs-scale, 1)); letter-spacing: 0.04em; color: var(--ink-faint); }

/* focused root box */
.rt-root-head { display: flex; align-items: center; gap: 11px; }
.rt-root .rt-name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: calc(19px * var(--fs-scale, 1)); color: var(--ink-soft); }
.rt-root .rt-role { font-size: calc(11px * var(--fs-scale, 1)); }

/* contact + cowork actions */
.rt-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.rt-act { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-weight: 600; font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-soft); border: 1px solid var(--hairline); border-radius: 14px; padding: 4px 9px; text-decoration: none; background: var(--paper); cursor: pointer; }
.rt-act:hover { border-color: var(--baobab); color: var(--baobab); }
.rt-act-i { font-size: calc(11px * var(--fs-scale, 1)); line-height: 1; }
.rt-act-cowork .rt-act-i { font-family: var(--font-display); font-style: italic; font-weight: 800; color: var(--baobab); }

/* hover-hold spotlight: zoom focus, blur the rest */
.rt-canvas.is-spotlight .rt-node { transition: filter .18s ease, opacity .18s ease, transform .18s ease; }
.rt-node.rt-dim { filter: blur(2.5px); opacity: 0.38; }
.rt-node.rt-spot { transform: scale(1.10); z-index: 4; }
.rt-node.rt-spot .rt-box { border-color: var(--baobab); box-shadow: 0 10px 34px -14px rgba(14,14,12,0.5); }

/* connector rail aligned to 150px cells */
.rt-row { gap: 16px; }
.rt-row::after { left: 75px; right: 75px; }

/* === Directory v13 — view tabs, Map tab, drag-to-Cowork (2026-06-21). === */
.rt-tabs { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); overflow: hidden; }
.rt-tab { border: 0; background: var(--paper); color: var(--ink-mute); font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 13px; cursor: pointer; }
.rt-tab + .rt-tab { border-left: 1px solid var(--hairline); }
.rt-tab.is-active { background: var(--ink-soft); color: var(--paper); }

/* boxes are draggable to Cowork */
.rt-box { cursor: grab; }
.rt-box:active { cursor: grabbing; }

/* Cowork launcher / rail drop affordance */
.cowork-launcher.is-dropover, .cowork-rail.is-dropover { outline: 2px dashed var(--baobab); outline-offset: 3px; }

/* === Directory v14 — real zoom + pan controls (2026-06-21). === */
/* Zoom is a continuous, user-controlled value (buttons step by 0.2; ctrl/cmd-wheel is continuous) —
   driven through a single CSS custom property rather than an ad-hoc inline style, so there is one
   documented DS mechanism for it instead of scattered style= usage. */
.rt-chart { transform-origin: top center; zoom: var(--rt-zoom, 1); }
.rt-zoom { position: absolute; top: 12px; right: 14px; z-index: 6; display: inline-flex; align-items: stretch; border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; background: var(--paper); box-shadow: 0 2px 10px -6px rgba(14,14,12,0.3); }
.rt-zoom button { border: 0; background: var(--paper); color: var(--ink-soft); font-family: var(--font-mono); font-size: calc(13px * var(--fs-scale, 1)); line-height: 1; padding: 6px 10px; cursor: pointer; }
.rt-zoom button + button { border-left: 1px solid var(--hairline); }
.rt-zoom button:hover { color: var(--baobab); }
.rt-zoom-val { font-size: calc(10px * var(--fs-scale, 1)) !important; min-width: 42px; letter-spacing: 0.04em; }
.rt-canvas { position: relative; }

/* === Directory v15 — reliable connectors, manager+peers, smaller tiles, context
   menu, hover actions, map all-countries+pan/zoom, prominent left tabs (2026-06-21). === */

/* prominent view tabs on the LEFT -- compact DS toggle sizing (Ben,
   2026-08-31: "Map/Org-chart toggle as compact DS toggles"), same padding/
   font scale as .gsp-tool / .ds-button-secondary elsewhere. Colours
   untouched -- today's pass is layout/typography density, not recolouring
   an already-reviewed accent. */
.rt-bar { display: flex; align-items: center; gap: 10px; }
.rt-tabs { order: -1; border: 1px solid var(--ink-soft); border-radius: var(--ds-radius-sm); overflow: hidden; flex: none; }
.rt-tab { border: 0; background: var(--paper); color: var(--ink-mute); font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 12px; cursor: pointer; }
.rt-tab + .rt-tab { border-left: 1px solid var(--ink-soft); }
.rt-tab.is-active { background: var(--baobab); color: var(--paper); }

/* reliable classic nested connectors (override the comb grid) */
.rt-tree, .rt-tree ul { list-style: none; margin: 0; padding: 0; }
.rt-tree { display: flex; justify-content: center; min-width: max-content; padding-top: 8px; }
.rt-tree ul { display: flex; justify-content: center; padding-top: 26px; position: relative; }
.rt-tree li { position: relative; display: flex; flex-direction: column; align-items: center; padding: 26px 9px 0; }
.rt-tree li::before, .rt-tree li::after { content: ""; position: absolute; top: 0; right: 50%; width: 50%; height: 26px; border-top: 1px solid var(--ink-mute); }
.rt-tree li::after { right: auto; left: 50%; border-left: 1px solid var(--ink-mute); }
.rt-tree li:only-child::before, .rt-tree li:only-child::after { display: none; }
.rt-tree li:only-child { padding-top: 26px; }
.rt-tree li:first-child::before, .rt-tree li:last-child::after { border: 0; }
.rt-tree li:last-child::before { border-right: 1px solid var(--ink-mute); }
.rt-tree ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 26px; border-left: 1px solid var(--ink-mute); }
.rt-tree > li { padding-top: 0; }
.rt-tree > li::before, .rt-tree > li::after { display: none; }

/* smaller tiles */
.rt-node { position: relative; display: inline-flex; }
.rt-box { width: 130px; padding: 6px 8px; border: 1px solid var(--hairline); background: var(--paper); border-radius: 5px; position: relative; cursor: grab; }
.rt-box:active { cursor: grabbing; }
/* red once per view (MMDB-2395): the active tab carries the sole red; the
   focused node reads via a neutral ink border instead of a second red. */
.rt-focus > .rt-box { border: 1.5px solid var(--ink-soft); box-shadow: 0 4px 16px -10px rgba(14,14,12,0.5); }
.rt-name-btn { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.rt-text { display: flex; flex-direction: column; min-width: 0; }
.rt-name { font-family: var(--font-ui); font-weight: 600; font-size: calc(11.5px * var(--fs-scale, 1)); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
.rt-role { font-family: var(--font-ui); font-weight: 400; font-size: calc(9px * var(--fs-scale, 1)); color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 88px; }
.rt-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--paper-2); overflow: hidden; display: inline-grid; place-items: center; flex: none; border: 1px solid var(--hairline); }
.rt-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rt-avatar-fb { font-family: var(--font-mono); font-size: calc(8px * var(--fs-scale, 1)); font-weight: 600; color: var(--ink-mute); }
.rt-avatar-lg { width: 46px; height: 46px; }
.rt-avatar-lg .rt-avatar-fb { font-size: calc(14px * var(--fs-scale, 1)); }
.rt-num { position: absolute; top: 2px; right: 5px; font-family: var(--font-mono); font-size: calc(7.5px * var(--fs-scale, 1)); color: var(--ink-faint); }
.rt-you { font-family: var(--font-mono); font-size: calc(7.5px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--ink-mute); border-radius: 3px; padding: 0 3px; margin-left: 4px; }

/* hover spotlight: zoom + blur others + show action popover */
.rt-canvas.is-spotlight .rt-node { transition: filter .18s ease, opacity .18s ease, transform .18s ease; }
.rt-node.rt-dim { filter: blur(2.5px); opacity: 0.32; }
.rt-node.rt-spot { transform: scale(1.16); z-index: 20; }
.rt-node.rt-spot > .rt-box { border-color: var(--baobab); box-shadow: 0 12px 36px -12px rgba(14,14,12,0.55); }
.rt-actions { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 7px; display: flex; gap: 4px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 18px; padding: 3px 5px; box-shadow: 0 6px 20px -10px rgba(14,14,12,0.5); z-index: 30; }
.rt-act { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; background: transparent; border-radius: 50%; font-size: calc(12px * var(--fs-scale, 1)); text-decoration: none; cursor: pointer; line-height: 1; }
.rt-act:hover { background: var(--paper-2); }
.rt-act-cowork { font-family: var(--font-display); font-style: italic; font-weight: 800; color: var(--baobab); font-size: calc(13px * var(--fs-scale, 1)); }

/* right-click context menu */
.rt-menu { position: fixed; z-index: 1000; min-width: 196px; background: var(--paper); border: 1px solid var(--ink-soft); border-radius: 8px; box-shadow: 0 14px 44px -12px rgba(14,14,12,0.5); padding: 5px; }
.rt-menu-hd { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); padding: 6px 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.rt-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; font: inherit; font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-soft); padding: 7px 10px; border-radius: var(--ds-radius-sm); cursor: pointer; }
.rt-menu button:hover { background: var(--paper-2); color: var(--baobab); }

/* ===== Map (all countries, pan/zoom) ===== */
.rt-canvas-map { padding: 0; overflow: hidden; position: relative; }
.map-wrap { display: flex; flex-direction: column; height: 100%; min-height: 480px; }
.map-hint { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.06em; color: var(--ink-faint); padding: 8px 12px 0; text-transform: uppercase; }
.map-svg { flex: 1; width: 100%; min-height: 440px; display: block; cursor: grab; touch-action: none; }
.map-svg.is-panning { cursor: grabbing; }
.map-country { fill: var(--paper-2); stroke: var(--hairline); stroke-linejoin: round; opacity: 0.6; }
.map-country.is-mmd { fill: var(--baobab-bg); stroke: var(--ink-soft); opacity: 1; }
.map-country.is-mmd.is-active { stroke: var(--ink); }
.map-label { fill: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.06em; opacity: 0.45; }
.map-label.is-active { fill: var(--ink-mute); opacity: 1; }
.map-ava-ring { stroke: var(--ink-soft); }
.map-me .map-ava-ring { stroke: var(--baobab); }
.map-person { cursor: pointer; }
.map-person:hover .map-ava-ring { stroke: var(--baobab); }
.map-ava-fb { fill: var(--ink-mute); font-family: var(--font-mono); font-weight: 600; }

/* =====================================================   PORTAL-R-026/R-027 — Floating window manager + central-DS chrome.
   z-index budget: .win-layer sits at 80 (matches the pre-existing
   .portal-pin-layer precedent so remotes stay below it); each window adds
   its own --win-z on top so multiple windows stack correctly relative to
   each other while everything else in the shell (topbar/sidebar/bot rail,
   all <= 42) stays under the layer.
   ============================================================ */
.win-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}
.win-slot { pointer-events: none; }
.win-slot .ds-window { pointer-events: auto; }

/* ds-window base and titlebar primitives are canonically defined in public/_design-system/components.css (PORTAL-R-026/R-027) */

/* The floating launcher dock (sticky note / Outlook preview / Teams preview
   / Yarnball toggle -- .win-launcher-dock/.win-launcher-btn*) is removed,
   2026-08-31: LauncherDock.tsx itself was already deleted (Ben, 2026-08-30,
   "remove" the dock; Yarnball's opener moved into PortalDesk.tsx's topbar).
   These rules had nothing left to style; the matching red-plate.css section
   9 and components.css .win-launcher-sticky-icon rules are removed with
   them. */

/* ---- Sticky note content ---- */
.ds-window-note-text {
  width: 100%;
  height: 100%;
  border: 0;
  resize: none;
  outline: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: calc(12.5px * var(--fs-scale, 1));
  color: var(--ink);
}

/* ---- Pinned contact / context content ---- */
.ds-window-contact-card { display: flex; flex-direction: column; gap: 10px; }
.ds-window-contact-head { display: flex; gap: 10px; align-items: center; }
.ds-window-contact-photo { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 12px; flex: 0 0 auto; }
.ds-window-contact-name { font-weight: 600; font-size: calc(13px * var(--fs-scale, 1)); }
.ds-window-contact-title { font-size: calc(11px * var(--fs-scale, 1)); color: var(--ink-mute); }
.ds-window-contact-actions { display: flex; gap: 6px; }
.ds-window-contact-email { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); color: var(--ink-mute); }
.ds-window-context-body { display: flex; flex-direction: column; gap: 8px; }
.ds-window-context-text { margin: 0; white-space: pre-wrap; }
.ds-window-context-link { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); color: var(--baobab); }
.ds-window-context-route { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); color: var(--ink-mute); }

/* ---- CoFlow frame content ---- */
.ds-window-coflow-body { position: relative; display: flex; flex-direction: column; height: 100%; }
.ds-window-coflow-toolbar { display: flex; justify-content: flex-end; padding: 4px 6px; border-bottom: 1px solid var(--hairline); background: var(--paper-2); flex: 0 0 auto; }
.ds-window-coflow-maximize { border: 1px solid var(--hairline); background: var(--paper); color: var(--ink-mute); font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; cursor: pointer; border-radius: 3px; }
.ds-window-coflow-maximize:hover { color: var(--ink); border-color: var(--ink); }
.ds-window-coflow-frame { flex: 1; border: 0; width: 100%; height: 100%; }

/* ---- Outlook/Teams preview list content ---- */
.ds-window-list { display: flex; flex-direction: column; gap: 0; height: 100%; overflow: auto; }
.ds-window-list-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 4px; border: 0; border-bottom: 1px dashed var(--hairline); background: transparent; text-align: left; cursor: pointer; width: 100%; }
.ds-window-list-row:hover { background: var(--paper-2); }
.ds-window-list-row--static { cursor: default; }
.ds-window-list-row--static:hover { background: transparent; }
.ds-window-list-meta { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.ds-window-list-title { font-weight: 600; font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink); }
.ds-window-list-sub { font-size: calc(11.5px * var(--fs-scale, 1)); color: var(--ink-soft); }
.ds-window-list-empty { padding: 16px 4px; font-style: italic; color: var(--ink-mute); font-family: var(--font-display); }
.ds-window-preview-loading,
.ds-window-preview-gap { padding: 14px 4px; display: flex; flex-direction: column; gap: 8px; font-size: calc(12px * var(--fs-scale, 1)); }
.ds-window-preview-gap-detail { color: var(--ink-mute); font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); }


/* ---- ds-workqueue: live transaction work-queue table (expenses, unified
   inbox). Added 2026-07-06 to retire the last 27 inline-style ratchet
   violations — extend HERE, never with per-page style= props. ---- */
.ds-workqueue { width: 100%; border-collapse: collapse; }
.ds-workqueue th {
  padding: 10px 14px; border-bottom: 2px solid var(--hairline);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-mute); text-align: left;
}
.ds-workqueue td { padding: 10px 14px; border-bottom: 1px solid var(--hairline); font-size: 13px; }
.ds-workqueue tbody tr:nth-child(even) { background: var(--paper-2); }
.ds-workqueue-id { font-family: var(--font-mono); font-size: 12px; }
.ds-workqueue-sub { font-size: 12px; color: var(--ink-soft); }
.ds-workqueue-meta { font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); }
.ds-workqueue-source {
  font-size: 11px; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; color: var(--ink-soft);
}
.ds-workqueue-status {
  font-size: 11px; font-family: var(--font-mono); font-weight: 600;
  text-transform: uppercase;
}
.ds-workqueue-status.is-action { color: var(--baobab); }
.ds-workqueue-status.is-done { color: var(--signal-grass); }
.ds-workqueue-status.is-muted { color: var(--ink-mute); }
.ds-workqueue-status.is-progress { color: var(--signal-amber); }
.ds-workqueue-loading { padding: 32px 16px; color: var(--ink-mute); font-family: var(--font-mono); }
.ds-workqueue-empty { padding: 32px 16px; color: var(--ink-soft); }
.ds-workqueue-foot { padding: 12px 16px; border-top: 1px solid var(--hairline); font-size: 11px; color: var(--ink-mute); }
.ds-workqueue-row-link { cursor: pointer; }
.ds-workqueue-row-link:hover { background: var(--paper-2); }
.ds-workqueue-row-link:focus-visible { outline: 2px solid var(--baobab); outline-offset: -2px; }
.ds-actions-row { display: flex; gap: 8px; }
/* ds-leave-table — MMDB-1825 (2026-09-02): explicit column-width hint for
   the home start page's leave-request table (Type / Dates / Status). Plain
   auto table layout let Status's variable-length text (a chip can read
   "Your turn: <step name>") pull the three columns' shared widths around
   from row to row; a stable, predictable split fixes that without touching
   the shared .ds-workqueue rules other tables (inbox, /app/me/leave) use. */
.ds-leave-table th:nth-child(1), .ds-leave-table td:nth-child(1) { width: 22%; }
.ds-leave-table th:nth-child(2), .ds-leave-table td:nth-child(2) { width: 32%; }
.ds-leave-table th:nth-child(3), .ds-leave-table td:nth-child(3) { width: 46%; }


/* =====================================================   REFINED DESIGN SYSTEM — portal-wide  (2026-07-07, approved by Ben)
   One five-role type ladder · right-sized display headings ·
   modern form fields (hairline + rounded + focus ring) ·
   banded (zebra) data tables kept · opt-in hover row-actions.
   Appended at EOF so it governs over earlier / duplicated blocks;
   every selector matches the specificity of the rule it supersedes.
   Reversible: delete this block to restore the prior look.
   ============================================================ */

/* --- 1. Type ladder — bring oversized display headings down to size.
   Display role tops out ~34px instead of 64–76px. Everything else on
   the page (section 16px Fraunces, mono 10px labels, 14px body, tabular
   numbers) is already in the base sheet; this only removes the giants. */
h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.08; }
.headline h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.headline.headline-home h1 { font-size: calc(27px * var(--fs-scale, 1)); line-height: 1.15; }
/* directory org-chart / map heading — dense window-title size, not a display
   role at all (was clamp 34-56, then clamp 26-34). #directory-title ID
   selector is the one thing that beats the universal `h1{...!important}` /
   `main.body h1{...!important}` shell heading caps further down this file
   (both out-specified by class alone) -- so this is the true control point,
   not the .directory-head h1 class rule, which stays only as documented
   intent. Ben, 2026-08-31: this exact window's tall header + oversized
   title is what "our values page is broken, and so are many pages" pointed
   at; components.css's .directory-head is the compact replacement. */
.directory-head h1 { font-size: 15px; line-height: 1.3; }
#directory-title { font-size: 15px !important; line-height: 1.3 !important; }

/* opt-in type-ladder utilities (the five roles, for pages that need them) */
.t-display { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: calc(24px * var(--fs-scale, 1)); letter-spacing: -0.01em; line-height: 1.12; color: var(--ink); }
.t-section { font-family: var(--font-display); font-weight: 700; font-size: calc(16px * var(--fs-scale, 1)); letter-spacing: -0.01em; color: var(--ink); }
.t-label   { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-mute); }
.t-body    { font-family: var(--font-ui); font-weight: 500; font-size: calc(14px * var(--fs-scale, 1)); color: var(--ink); }
.t-num     { font-family: var(--font-ui); font-weight: 600; font-size: calc(14px * var(--fs-scale, 1)); font-variant-numeric: tabular-nums; color: var(--ink); }

/* --- 2. Modern form fields — replace the heavy black 1px-ink border with
   a hairline, round the corners, and add a clear focus ring. Applies to
   the universal create form used across the portal. --- */
.form-main .fld input[type=text],
.form-main .fld input[type=number],
.form-main .fld input[type=date],
.form-main .fld input[type=email],
.form-main .fld input[type=tel],
.form-main .fld select,
.form-main .fld textarea {
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  background: var(--paper);
}
.form-main .fld input:focus,
.form-main .fld select:focus,
.form-main .fld textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--baobab-bg);
}

/* --- 3. Banded (zebra) data tables — kept per Ben, now applied to every
   central table. Even rows get a light band; hover reads clearly above it. */
.records tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, var(--paper)); }
.records tbody tr:hover           { background: var(--paper-2); }
.ds-records tbody tr { transition: background 0.12s ease; }
.ds-records tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, var(--paper)); }
.ds-records tbody tr:hover           { background: var(--paper-2); }
.ds-records-compact tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, var(--paper)); }
.ds-records-compact tbody tr:hover           { background: var(--paper-2); }
.ds-workqueue tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, var(--paper)); }
.ds-workqueue tbody tr:hover,
.ds-workqueue-row-link:hover { background: var(--paper-2); }

/* --- 4. Opt-in hover row-actions — the row is the target; secondary
   actions (edit / history / retire) stay hidden until row hover/focus,
   so tables stop carrying a wall of per-row buttons. --- */
.row-actions { display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.12s ease; }
tr:hover .row-actions, tr:focus-within .row-actions { opacity: 1; }
.row-kebab {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--ink-faint); font-size: 16px; line-height: 1; cursor: pointer;
}
.row-kebab:hover { color: var(--ink); border-color: var(--hairline); background: var(--paper); }

/* REFINED DS — heading caps v2 (2026-07-08): cap remaining oversized shell
   headings (settings/profile .remote-hero, directory workbench/hero) to the
   display ceiling so no shell page escapes the type ladder. */
.remote-hero h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; }
.directory-workbench-head h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; }
.directory-hero.directory-compact-hero h1 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; }

/* =====================================================   REFINED DESIGN SYSTEM v2 — fixes from live cross-route verification
   (2026-07-07). Appended after v1 so it wins. Reversible.
   ============================================================ */

/* 1. Right-size EVERY in-shell hero heading. Bespoke wrappers
   (.directory-head h1, .te-title, .remote-hero h1, .directory-hero h1,
   .directory-workbench-head h1, .module-title) out-specified the base
   h1 rule, leaving 48–76px heroes on directory/learning/travel/settings.
   Cap all headings inside the app content column. */
main.body h1, .portal-main h1, main.body .module-title, .portal-main .module-title {
  font-size: clamp(26px, 2.6vw, 34px) !important;
  line-height: 1.12 !important;
}
/* 2. Visible banded (zebra) rows on EVERY data-table class (v1's
   color-mix band was too faint to read; use a solid paper band). */
.records tbody tr:nth-child(even),
.ds-records tbody tr:nth-child(even),
.ds-records-compact tbody tr:nth-child(even),
.ds-workqueue tbody tr:nth-child(even),
.md-table tbody tr:nth-child(even),
.ec-table tbody tr:nth-child(even),
.lines-table tbody tr:nth-child(even),
.ib-table tbody tr:nth-child(even),
.hb-raci tbody tr:nth-child(even),
.te-table tbody tr:nth-child(even),
.directory-table tbody tr:nth-child(even) { background: var(--paper-2); }
.records tbody tr:hover,
.ds-records tbody tr:hover,
.ds-records-compact tbody tr:hover,
.ds-workqueue tbody tr:hover,
.md-table tbody tr:hover,
.ec-table tbody tr:hover,
.lines-table tbody tr:hover,
.ib-table tbody tr:hover,
.hb-raci tbody tr:hover,
.te-table tbody tr:hover,
.directory-table tbody tr:hover { background: color-mix(in srgb, var(--paper-2) 72%, var(--ink) 9%); }

/* 3. Mono-uppercase column headers on the table classes still rendering
   serif/proportional (lines-table, hb-raci, te-table, directory-table).
   MMDB-2431 QC fix (2026-09-02): ds-records-compact/md-table/ec-table/
   ib-table removed from this list -- they now carry the full Red Plate
   header spec (silver fill, ink text, mono 9px/600/0.08em) at their own
   source definition in components.css, so a second, weaker typography-only
   definition for the same selector here would be a conflicting duplicate. */
.ds-records thead th,
.lines-table thead th,
.hb-raci thead th,
.te-table thead th,
.directory-table thead th {
  font-family: var(--font-mono);
  font-size: calc(var(--rp-fs-th) * var(--fs-scale, 1));
  letter-spacing: var(--rp-ls-th);
  text-transform: uppercase;
  font-weight: var(--rp-fw-th);
  color: var(--ink-mute);
}

/* 4. Master Data rows: reveal Edit / History / Retire on row hover so
   the row is the target and doesn't carry a permanent button wall. */
.md-row .row-actions { display: inline-flex; align-items: center; gap: 4px; opacity: 0; transition: opacity 0.12s ease; }
.md-row:hover .row-actions, .md-row:focus-within .row-actions { opacity: 1; }


/* =====================================================   REFINED DESIGN SYSTEM v3 — structure-agnostic table + heading fixes
   (2026-07-07). Some tables are component-scoped styled-jsx (e.g.
   Master Data md-table) or lack thead/tbody (finance ds-records-compact),
   so v2's `thead th` / `tbody tr:nth-child` selectors missed them and
   styled-jsx scope out-specified the globals. v3 targets `td`/`th`
   directly with !important to win regardless of structure or scoping.
   Appended last. Reversible.
   ============================================================ */

/* 1. Universal heading cap — beats every bespoke .te-title / remote-hero /
   module-title / directory-* h1 regardless of wrapper (learning 38px,
   travel 44px were under a non-.body wrapper). */
h1 { font-size: clamp(26px, 2.6vw, 34px) !important; line-height: 1.12 !important; }

/* 2. Banded (zebra) rows — even-row td cells, structure-agnostic, keeps
   selected/active row highlights. !important to beat styled-jsx scope. */
.records tr:nth-child(2n):not(.selected):not(.active):not(.is-active) > td,
.ds-records tr:nth-child(2n):not(.selected):not(.active) > td,
.ds-records-compact tr:nth-child(2n):not(.selected):not(.active) > td,
.ds-workqueue tr:nth-child(2n):not(.selected):not(.active) > td,
.md-table tr:nth-child(2n):not(.selected):not(.active) > td,
.ec-table tr:nth-child(2n) > td,
.lines-table tr:nth-child(2n) > td,
.ib-table tr:nth-child(2n) > td,
.hb-raci tr:nth-child(2n) > td,
.te-table tr:nth-child(2n) > td,
.directory-table tr:nth-child(2n):not(.active) > td { background: var(--paper-2) !important; }

/* row hover reads clearly above the band */
.records tr:hover > td,
.ds-records tr:hover > td,
.ds-records-compact tr:hover > td,
.ds-workqueue tr:hover > td,
.md-table tr:hover > td,
.ec-table tr:hover > td,
.lines-table tr:hover > td,
.ib-table tr:hover > td,
.hb-raci tr:hover > td,
.te-table tr:hover > td,
.directory-table tr:hover > td { background: color-mix(in srgb, var(--paper-2) 66%, var(--ink) 10%) !important; }

/* 3. Mono-uppercase column headers on every data-table class (no thead
   requirement; !important to beat styled-jsx).
   MMDB-2431 QC fix (2026-09-02): ds-records-compact/md-table/ec-table/
   ib-table removed -- swept the src tree, none of the four is rendered by
   a component-scoped styled-jsx block (the original 2026-07-07 concern
   this !important existed for), so keeping them here on top of their own
   complete Red Plate header definition in components.css was a second,
   !important-strength conflicting duplicate for the exact same properties.
   lines-table/hb-raci/te-table/directory-table are untouched -- out of
   this fix's scope, no evidence either way on their styled-jsx exposure. */
.records th,
.ds-records th,
.lines-table th,
.hb-raci th,
.te-table th,
.directory-table th {
  font-family: var(--font-mono) !important;
  font-size: calc(var(--rp-fs-th) * var(--fs-scale, 1)) !important;
  letter-spacing: var(--rp-ls-th) !important;
  text-transform: uppercase !important;
  font-weight: var(--rp-fw-th) !important;
  color: var(--ink-mute) !important;
}

/* 4. Master Data hover row-actions — force hide-until-hover over the
   component's own styled-jsx. */
.md-row .row-actions { opacity: 0 !important; transition: opacity 0.12s ease; display: inline-flex; align-items: center; gap: 4px; }
.md-row:hover .row-actions, .md-row:focus-within .row-actions { opacity: 1 !important; }

/* ops map tokens */
.map-wrap { width: 100%; height: 100%; min-height: 460px; display: flex; flex-direction: column; }
.map-svg { flex: 1; width: 100%; height: 100%; min-height: 440px; display: block; }
.map-country { fill: var(--paper-2); stroke: var(--ink-mute); stroke-linejoin: round; }
.map-country.is-mmd { fill: var(--baobab-bg); stroke: var(--ink-mute); }
.map-label { fill: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.map-person { cursor: pointer; }
.map-ava-ring { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 0.4; }
.map-person.map-me .map-ava-ring { stroke: var(--baobab); stroke-width: 0.7; }
.map-person:hover .map-ava-ring { stroke: var(--baobab); }
.map-ava-fb { fill: var(--ink-mute); font-family: var(--font-mono); font-weight: 600; }
.map-empty, .map-unplaced { font-family: var(--font-ui); font-size: 13px; color: var(--ink-mute); padding: 18px; }
.map-empty { display: grid; place-items: center; min-height: 360px; text-align: center; }
.map-unplaced { border-top: 1px solid var(--hairline); }
.map-wrap { display: flex; flex-direction: column; height: 100%; min-height: 480px; }
.map-hint { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; color: var(--ink-faint); padding: 8px 12px 0; text-transform: uppercase; }
.map-svg { flex: 1; width: 100%; min-height: 440px; display: block; cursor: grab; touch-action: none; }
.map-svg.is-panning { cursor: grabbing; }
.map-country { fill: var(--paper-2); stroke: var(--hairline); stroke-linejoin: round; }
.map-country.is-mmd { fill: var(--baobab-bg); stroke: var(--ink-mute); }
.map-country.is-active { fill: var(--baobab-bg); stroke: var(--ink-soft); }
.map-label { fill: var(--ink-faint); font-family: var(--font-mono); letter-spacing: 0.06em; opacity: 0.45; }
.map-label.is-active { fill: var(--ink-mute); opacity: 1; }
.map-ava-ring { stroke: var(--ink-soft); }
.map-me .map-ava-ring { stroke: var(--baobab); }
.map-person { cursor: pointer; }
.map-person:hover .map-ava-ring { stroke: var(--baobab); }
.map-site { cursor: pointer; }
.map-ava-bg { fill: var(--paper-2); }
.map-ava-fb { fill: var(--ink-mute); font-family: var(--font-mono); font-weight: 600; }
.map-select-box { pointer-events: none; }

/* =====================================================   Network map graph (IT > Network) — layered left-to-right diagram, one
   column per node type. Plain: labeled boxes + straight lines, no color
   coding, no decoration (see the house diagram-readability rule).
   ============================================================ */
.netmap-svg { width: 100%; height: auto; font-family: var(--font-mono); }
.netmap-col-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  fill: var(--ink-faint);
}
.netmap-link { stroke: var(--hairline); stroke-width: 1.5; }
.netmap-node-box { fill: var(--paper); stroke: var(--ink-soft); stroke-width: 1; }
.netmap-node-label { font-size: 11px; font-weight: 500; fill: var(--ink); }

/* =====================================================   TA Recruitment kanban board + case modal (feat/ta-board-ux-20260721,
   R2/R5/R6/R7/R8). Dense working surface — bordered columns/cards, no
   dashboard chrome; every element here backs a real interactive control.
   ============================================================ */
.ta-nav { display: flex; flex-direction: column; gap: 10px; }

/* R6 — 12 phase columns (11 live + Completed) wrapping into exactly two
   rows of 6; no horizontal page scroll. The grid itself is owned by the
   canonical, manifest-registered `.ta-kanban` rule in the central design
   system (public/_design-system/components.css) — NOT here. A prior
   fix attempt added a `.kanban-2row` override class in this file, but it
   was never DS-manifest-registered and had the same CSS specificity as
   the DS's own `.ta-kanban` rule, which loads later on the page and kept
   winning the cascade back to a stale 12-col single-row layout (root
   cause found 2026-07-21 via live computed-style measurement). Removed
   the dead override here; see components.css for the real fix + history. */

.ta-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  background: var(--paper);
  overflow: hidden;
}
.ta-col-completed { border-color: var(--ink-soft); }

.ta-col-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: var(--hairline-1);
  background: var(--paper-2);
  flex: 0 0 auto;
}
.ta-col-t {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ta-col-n {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  font-weight: 700;
  color: var(--ink-mute);
  flex: 0 0 auto;
}

.ta-col-b {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
}

/* R2 — card face is the position title only. */
.ta-card {
  display: block;
  padding: 7px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  background: var(--paper);
  text-decoration: none;
  cursor: pointer;
}
.ta-card:hover { border-color: var(--ink-soft); background: var(--paper-2); }
.ta-card-title {
  display: block;
  font-family: var(--font-ui);
  font-size: calc(12px * var(--fs-scale, 1));
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.ta-col-empty {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  color: var(--ink-faint);
  padding: 4px 2px;
}

.ta-col-note-action {
  border: 0;
  border-top: var(--hairline-1);
  background: var(--paper-2);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  padding: 5px 8px;
  cursor: pointer;
  text-align: left;
  flex: 0 0 auto;
}
.ta-col-note-action:hover { color: var(--ink); }

.ta-nav-footer { display: flex; gap: 10px; align-items: center; }
.ta-nav-refresh {
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  background: var(--paper);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: calc(10.5px * var(--fs-scale, 1));
  padding: 5px 10px;
  cursor: pointer;
}
.ta-nav-refresh:hover { color: var(--ink); border-color: var(--ink-soft); }

/* R8 — case detail opens as an in-page modal over the kanban board instead
   of a page navigation; the board stays mounted underneath. z-index sits
   above .win-layer (80) so the modal covers the whole shell, and below
   .rt-menu (1000) so a context menu opened from inside the modal still
   layers on top of it. */
.case-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(14, 14, 12, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 16px;
  overflow-y: auto;
}
.case-modal {
  width: min(1080px, 100%);
  max-height: 94vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -16px rgba(14, 14, 12, 0.45);
  padding: 18px 22px 22px;
}

/* =====================================================   MDM / HR surface — base primitives (foundation fix).
   MasterData.tsx / EmployeesTab.tsx / DomainDrilldown.tsx / DataGrid.tsx
   reference .md-*, .ec-*, .ds-* classes that had never been defined in
   this stylesheet (page rendered as unstyled browser-default widgets).
   Tokens only, no hex, no inline style — same visual language as
   .btn/.badge/.h-block elsewhere in this file.
   ============================================================ */
.eyebrow-on-light { color: var(--ink-mute); }

/* MMDB-2688: this rule's max-width and margin are the live ones (nothing
   later in the cascade sets them again), but shell.css carries its own
   later, identically-specific `.page-inner` padding -- same selector,
   same (0,1,0) specificity, loaded after this file -- so THAT copy, not
   this one, is the padding that actually reaches the 95 consumers: 56px
   top, 32px sides, 96px bottom, a leftover from that file's older
   marketing-page scale, not this token. That is why Finance (which opts
   into .page-inner) measured a 132px left inset in MMDB-2688's evidence
   instead of the 26px every plain page settled on. Fixed two rules down,
   not by editing shell.css (a pre-Red-Plate file this ticket has no other
   reason to open, and whose own colour literals are not otherwise being
   touched here) -- a doubled class selector there beats both copies by
   specificity instead of by cascade order, which is the more durable fix
   given the two files already disagree once by pure load-order luck. */
.page-inner { max-width: 1320px; margin: 0 auto; padding: 22px 26px 40px; }
.page-inner.md { padding-top: 18px; }
/* MMDB-2688: (0,2,0) via the doubled class -- beats this rule above,
   shell.css's competing same-specificity copy, AND Sales & Orders'
   `.page-inner.page-inner--wide` override just below (also (0,2,0),
   later in file order) for horizontal padding specifically, since that
   rule only ever touches max-width and never repeats padding itself.
   Only the horizontal number is forced to the --rp-page-pad token here;
   top/bottom padding, max-width and the centring itself are left exactly
   as each of those two rules already sets them. */
.page-inner.page-inner { padding-left: 26px; padding-right: 26px; }

.md-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.md-head h1 { font-family: var(--font-display); font-weight: 700; font-size: calc(24px * var(--fs-scale, 1)); letter-spacing: -0.015em; margin: 2px 0 4px; }
.md-sub { display: block; font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--ink-mute); }
.md-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* entity tabs */
.md-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); margin-bottom: 16px; flex-wrap: wrap; }
.md-tab {
  font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute); background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 12px; cursor: pointer; transition: color 0.12s ease, border-color 0.12s ease;
}
.md-tab:hover { color: var(--ink); }
/* Red once per view (MMDB-2395): the header's Upload & Ingest button is the
   page's single primary action, so this tab's active state reads neutral. */
.md-tab.on { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

/* buttons */
/* Buttons — refined app-wide (Ben, 2026-08-09: "make the buttons throughout
   the whole app very elegant... a bit more sophisticated"). Editorial
   Industrial: mono uppercase micro-label, generous horizontal padding,
   hairline geometry, quiet 140ms transitions, a 1px lift on hover and a
   flat press. Primary stays ink; baobab appears only on hover/danger. */
.ds-button {
  font-family: var(--font-mono); font-weight: 600; font-size: calc(11px * var(--fs-scale, 1));
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink); border-radius: var(--ds-radius-sm);
  padding: 8px 18px; cursor: pointer; line-height: 1.3; display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease,
              transform 0.14s ease, box-shadow 0.14s ease;
}
.ds-button:hover { background: var(--baobab); border-color: var(--baobab); transform: translateY(-1px); box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 22%, transparent); }
.ds-button:active { transform: translateY(0); box-shadow: none; }
.ds-button:focus-visible { outline: 2px solid var(--baobab); outline-offset: 2px; }
.ds-button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.ds-button-secondary {
  color: var(--ink-soft); background: var(--paper); border: 1px solid var(--hairline);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent);
}
.ds-button-secondary:hover { background: var(--paper-2); border-color: var(--ink); color: var(--ink); }
.ds-button-danger { color: var(--baobab); background: var(--paper); border: 1px solid color-mix(in srgb, var(--baobab) 55%, var(--hairline)); }
.ds-button-danger:hover { background: var(--baobab); border-color: var(--baobab); color: var(--paper); }

/* inputs / selects */
.ds-input, .ds-select, .md-in, .ec-in {
  font-family: var(--font-ui); font-size: calc(13.5px * var(--fs-scale, 1)); color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm);
  padding: 6px 9px; line-height: 1.3;
}
.ds-input:focus, .ds-select:focus, .md-in:focus, .ec-in:focus { outline: none; border-color: var(--baobab); }
.md-ghost, .ec-ghost {
  font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.03em;
  color: var(--ink-mute); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm);
  padding: 6px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.md-ghost:hover, .ec-ghost:hover { color: var(--ink); border-color: var(--ink); }
.md-ghost.on, .ec-ghost.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.md-import-label { cursor: pointer; }

/* badges */
.md-badge, .ec-badge {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--ds-radius-sm); border: 1px solid var(--hairline); color: var(--ink-mute); background: var(--paper-2);
}
.md-badge.active, .ec-badge.active { color: var(--signal-grass); background: var(--signal-grass-bg); border-color: transparent; }
.md-badge.inactive, .ec-badge.inactive { color: var(--signal-amber); background: var(--signal-amber-bg); border-color: transparent; }
.md-badge.retired, .ec-badge.retired { color: var(--paper); background: var(--ink-soft); border-color: transparent; }
.md-badge.dormant, .ec-badge.dormant { color: var(--ink-mute); background: var(--paper-2); }
.md-badge.archived { color: var(--ink-mute); background: var(--paper-2); }
.md-badge.white_collar { color: var(--ink); background: var(--paper-2); }
.md-badge.blue_collar { color: var(--signal-amber); background: var(--signal-amber-bg); border-color: transparent; }
.md-badge.casual_labour { color: var(--ink-mute); background: var(--paper-2); }
.md-badge.national { color: var(--signal-grass); background: var(--signal-grass-bg); border-color: transparent; }
.md-badge.expat { color: var(--baobab); background: var(--baobab-bg); border-color: transparent; }
.md-badge.pending-gateway { color: var(--signal-amber); background: var(--signal-amber-bg); border-color: transparent; }

/* generic forms (MasterData.tsx entity CRUD) */
.md-form, .ec-form { border: 1px solid var(--hairline); background: var(--paper); padding: 16px; margin-bottom: 16px; border-radius: var(--radius); }
.md-form-head, .ec-form-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-family: var(--font-display); font-size: calc(15px * var(--fs-scale, 1)); }
.ec-uid { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); color: var(--ink-mute); }
.md-grid, .ec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
.md-field, .ec-field { display: flex; flex-direction: column; gap: 4px; font-size: calc(13px * var(--fs-scale, 1)); }
.md-field.wide, .ec-field.wide { grid-column: span 3; }
.md-field span:first-child, .ec-field span:first-child { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mute); }
.md-field input, .md-field select, .ec-field input, .ec-field select {
  font-family: var(--font-ui); font-size: calc(13.5px * var(--fs-scale, 1)); color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 7px 10px;
}
.md-field input:focus, .md-field select:focus, .ec-field input:focus, .ec-field select:focus { outline: none; border-color: var(--baobab); }
.md-field input.ro { color: var(--ink-mute); background: var(--paper-2); }
.md-field-pending { color: var(--signal-amber) !important; }
/* Popup/form action rows read as ONE consistent bar: buttons right-aligned,
   uniform ds-button sizing (Ben, 2026-08-08: "buttons are completely random,
   some on the right and some on the left, different sizes"). */
.md-form-actions, .ec-form-actions { display: flex; gap: 8px; margin-top: 14px; justify-content: flex-end; flex-wrap: wrap; }

/* manager picker */
.md-mgr { position: relative; }
.md-mgr-list { display: flex; flex-direction: column; border: 1px solid var(--hairline); background: var(--paper); margin-top: 4px; max-height: 180px; overflow-y: auto; border-radius: var(--ds-radius-sm); }
.md-mgr-item { text-align: left; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; padding: 6px 9px; font-size: calc(12px * var(--fs-scale, 1)); cursor: pointer; }
.md-mgr-item:last-child { border-bottom: 0; }
.md-mgr-item:hover { background: var(--paper-2); }
.md-mgr-cur { display: block; margin-top: 4px; color: var(--ink-mute); font-size: calc(11px * var(--fs-scale, 1)); }
.md-mgr-required .md-mgr-cur { color: var(--ink); }

/* hints / errors */
.ds-hint { color: var(--ink-mute); font-size: calc(12.5px * var(--fs-scale, 1)); }
.ds-hint-error, .md-err, .ec-err { color: var(--baobab); font-size: calc(12.5px * var(--fs-scale, 1)); }
.md-muted, .ec-muted { color: var(--ink-mute); font-style: italic; font-family: var(--font-display); padding: 20px 0; }

/* generic actions row */
.ds-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
/* DXG2 overlay: action bar pinned while a long step form scrolls (`actionbar.root-sticky`). */
.ds-actions-sticky { position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--hairline); padding: 10px 0; margin-bottom: 0; z-index: 5; }
/* DXG2 overlay: line-item row that trips a highlight rule (`form.lineitems-row-warn`). */
.ds-row-warn td { background: var(--signal-amber-bg); }
.ds-actions-end { justify-content: flex-end; }
.ds-actions-row { display: flex; gap: 8px; }

/* breadcrumbs (drilldown) */
.ds-breadcrumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); letter-spacing: 0.04em; text-transform: uppercase; }
.ds-breadcrumbs button { background: transparent; border: 0; color: var(--ink-mute); cursor: pointer; padding: 2px 0; }
.ds-breadcrumbs button:hover:not(:disabled) { color: var(--baobab); }
.ds-breadcrumbs button:disabled { color: var(--ink); cursor: default; font-weight: 700; }
.ds-breadcrumbs-sep { color: var(--ink-faint); }
.ds-breadcrumbs-last { color: var(--ink); font-weight: 700; }
.ds-breadcrumbs-item { color: var(--ink-mute); }

/* drilldown tiles */
.ds-drilldown-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.ds-drilldown-node {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left;
  border: 1px solid var(--hairline); background: var(--paper); padding: 12px 14px; cursor: pointer; border-radius: var(--radius);
  transition: border-color 0.12s ease, background 0.12s ease;
  /* Fixed tile geometry (Ben, 2026-08-09): height never depends on content
     -- long names ellipsize instead of growing the tile and rag-staggering
     the grid rows. */
  height: 64px; overflow: hidden;
}
.ds-drilldown-node > span:first-child { min-width: 0; }
.ds-drilldown-node-nm, .ds-drilldown-node-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-drilldown-node:hover { border-color: var(--ink); background: var(--paper-2); }
.ds-drilldown-node-nm { display: block; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: calc(14px * var(--fs-scale, 1)); color: var(--ink); }
.ds-drilldown-node-sub { display: block; font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 2px; }
.ds-drilldown-node-count { font-family: var(--font-mono); font-size: calc(15px * var(--fs-scale, 1)); font-weight: 700; color: var(--ink-mute); }

/* org tree (departments + reporting structure reuse) */
.md-tree { display: flex; flex-direction: column; gap: 14px; }
.md-tree-country-hd { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); padding-bottom: 4px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.md-tree-node { margin-bottom: 2px; }
.md-tree-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left;
  border: 0; border-bottom: 1px dashed var(--hairline); background: transparent; padding: 7px 4px; cursor: pointer;
  font-size: calc(12.5px * var(--fs-scale, 1));
}
.md-tree-item:hover { background: var(--paper-2); }
.md-tree-nm { font-family: var(--font-display); font-style: italic; color: var(--ink); }
.md-tree-hc { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); color: var(--ink-mute); }
.md-tree-children { padding-left: 20px; border-left: 1px solid var(--hairline); margin-left: 6px; }
.md-tree-cc-chip {
  font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale, 1)); letter-spacing: 0.03em; color: var(--ink-mute);
  border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 1px 6px; margin-left: 8px; background: var(--paper-2);
  cursor: pointer;
}
.md-tree-cc-chip:hover { color: var(--baobab); border-color: var(--baobab); }

/* modals */
.ds-modal-backdrop { position: fixed; inset: 0; background: color-mix(in srgb, var(--ink) 45%, transparent); z-index: 200; }
.ds-modal-body {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 201;
  width: min(640px, 92vw); max-height: 86vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--ink);
  border-radius: var(--radius); box-shadow: 0 18px 48px -12px color-mix(in srgb, var(--ink) 45%, transparent);
}
.ds-modal-lg .ds-modal-body { width: min(920px, 94vw); }
.ds-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--hairline); font-family: var(--font-display); font-size: calc(16px * var(--fs-scale, 1)); }
.ds-modal-body-form { padding: 16px 18px; }
.ds-modal .ds-actions { padding: 0 18px 18px; margin-bottom: 0; }

/* datagrid (used by DataGrid.tsx across search/drilldown/reporting/cost centers) */
.ds-datagrid-wrap { position: relative; overflow-x: auto; }
.ds-datagrid { width: 100%; border-collapse: collapse; font-size: calc(12.5px * var(--fs-scale, 1)); }
.ds-datagrid thead th {
  text-align: left; font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ink-mute); border-bottom: 1px solid var(--hairline); padding: 8px 10px; position: relative;
}
.ds-datagrid-th-label { cursor: default; }
.ds-datagrid-th[data-sortable="true"] .ds-datagrid-th-label { cursor: pointer; }
.ds-datagrid-th[data-sortable="true"] .ds-datagrid-th-label:hover { color: var(--ink); }
.ds-datagrid-th-sort-asc .ds-datagrid-th-label::after { content: " ▲"; font-size: 8px; }
.ds-datagrid-th-sort-desc .ds-datagrid-th-label::after { content: " ▼"; font-size: 8px; }
.ds-datagrid-filter-toggle { background: transparent; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 10px; margin-left: 4px; }
.ds-datagrid-filter-toggle[data-active="true"] { color: var(--baobab); }
.ds-datagrid-filter { position: absolute; top: 100%; left: 0; z-index: 20; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 8px; margin-top: 4px; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ink) 35%, transparent); min-width: 160px; }
.ds-datagrid-filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ds-filter-chip { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); border: 1px solid var(--hairline); background: var(--paper); color: var(--ink-mute); border-radius: var(--ds-radius-sm); padding: 3px 7px; cursor: pointer; }
.ds-filter-chip-active { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.ds-datagrid tbody td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.ds-datagrid-row { cursor: pointer; }
.ds-datagrid-row:hover { background: var(--paper-2); }
.ds-datagrid-empty { padding: 24px 10px; text-align: center; color: var(--ink-mute); font-family: var(--font-display); font-style: italic; }
.ds-hover-preview {
  position: fixed; left: var(--hp-x, 0); top: var(--hp-y, 0); z-index: 220; background: var(--paper); border: 1px solid var(--ink);
  border-radius: var(--ds-radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 220px;
  box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--ink) 40%, transparent); pointer-events: none;
}
.ds-review-field { display: flex; justify-content: space-between; gap: 10px; font-size: calc(11.5px * var(--fs-scale, 1)); }
.ds-review-label { font-family: var(--font-mono); text-transform: uppercase; font-size: calc(9.5px * var(--fs-scale, 1)); letter-spacing: 0.04em; color: var(--ink-mute); }
.ds-review-value { color: var(--ink); text-align: right; }

/* history + CSV import panels */
.md-hist { border: 1px solid var(--hairline); background: var(--paper); padding: 14px 16px; margin-top: 16px; border-radius: var(--radius); }
.md-chg { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale, 1)); }

/* employees tab (EmployeesTab.tsx) chrome */
.ec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ec-sub { font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-mute); }
.ec-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ec-sync { border: 1px solid var(--hairline); background: var(--paper); padding: 12px 14px; margin-bottom: 14px; border-radius: var(--radius); }
.ec-sync-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ec-sync-head b { font-family: var(--font-display); }
.ec-st { white-space: nowrap; }
.module-row-action { display: inline-flex; align-items: center; gap: 4px; }

/* department tree country grouping wrapper reused generically */
.md-tree-country { margin-bottom: 12px; }

/* =====================================================   Employee Master Data — landing / file page / upload / connect.
   New semantic classes (UX spec 2026-07-21). Tokens only.
   ============================================================ */

/* header row wrapping subtabs + the always-reachable Add-employee split
   button (defect fix 2026-07-21 — Add must not be hidden inside one subtab) */
.emp-landing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.emp-landing-head .emp-subtabs { margin-bottom: 0; }

/* subtabs (Browse / Search / Reporting structure / Cost centers) */
.emp-subtabs { display: flex; gap: 2px; margin-bottom: 14px; }
.emp-subtab {
  font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute); background: var(--paper-2); border: 1px solid var(--hairline); border-bottom: 0;
  padding: 7px 12px; cursor: pointer; border-radius: 4px 4px 0 0;
}
.emp-subtab:hover { color: var(--ink); }
/* Red once per view (MMDB-2395): demoted from a red inset rule -- Upload &
   Ingest carries the page's sole red as its single primary action. */
.emp-subtab.on { color: var(--ink); background: var(--paper); font-weight: 700; border-color: var(--hairline); box-shadow: inset 0 2px 0 var(--ink); }

/* search row */
.emp-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 220px; }
.emp-search-in {
  width: 100%; font-family: var(--font-ui); font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 7px 10px 7px 26px;
}
/* Red once per view (MMDB-2395): the search focus ring reads ink, not the
   accent -- Upload & Ingest is this page's one red. */
.emp-search-in:focus { outline: none; border-color: var(--ink); }
.emp-search::before {
  content: "⌕"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--ink-mute);
  font-size: calc(13px * var(--fs-scale, 1));
}
.emp-search-soundex {
  display: inline-block; margin-left: 6px; font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1));
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); background: var(--paper-2);
  border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 1px 5px;
}

/* toolbar row (search + filters + add-split) */
.emp-toolbar { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* compact filters */
.emp-filters { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.emp-filter { display: flex; flex-direction: column; gap: 2px; }
.emp-filter span {
  font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute);
}
.emp-filter-select {
  font-family: var(--font-ui); font-size: calc(11.5px * var(--fs-scale, 1)); color: var(--ink); background: var(--paper);
  border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 5px 6px; width: 132px; height: 28px;
}
.emp-filter-select:focus { outline: none; border-color: var(--baobab); }

/* always-visible add-employee action row (defect fix 2026-07-21 — "New
   employee" must be unambiguous and never hidden behind a caret menu) */
.emp-add-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.emp-add-hiring-link {
  font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.04em; color: var(--ink-mute);
  text-decoration: underline; text-underline-offset: 2px; padding: 0 4px;
}
.emp-add-hiring-link:hover { color: var(--baobab); }

/* result chips inside DataGrid cells */
.emp-chip {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1));
  color: var(--ink-mute); background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 2px 7px;
  cursor: pointer;
}
.emp-chip:hover { color: var(--baobab); border-color: var(--baobab); }
.emp-chip-empty { color: var(--ink-faint); font-style: italic; }
.emp-cc-count-chip { font-weight: 700; }
.emp-name-cell { font-family: var(--font-display); font-style: italic; font-weight: 600; color: var(--ink); }

/* reporting structure search box */
.emp-org-search-row { margin-bottom: 12px; max-width: 340px; }

/* cost centers subtab */
.emp-cc-toolbar { margin-bottom: 12px; max-width: 340px; }

/* upload modal */
.emp-upload-steps { display: flex; gap: 4px; font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
.emp-upload-steps span { padding: 2px 8px; border: 1px solid var(--hairline); border-radius: 3px; }
.emp-upload-steps span.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.emp-upload-drop {
  border: 1px dashed var(--hairline); border-radius: var(--radius); padding: 34px 18px; text-align: center; color: var(--ink-mute);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.emp-upload-drop.is-drag { border-color: var(--baobab); color: var(--baobab); background: var(--baobab-bg); }
.emp-upload-file { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 6px 10px; font-family: var(--font-mono); font-size: calc(11.5px * var(--fs-scale, 1)); margin-top: 10px; }
.emp-upload-file button { border: 0; background: transparent; color: var(--ink-mute); cursor: pointer; font-weight: 700; }
.emp-upload-file button:hover { color: var(--baobab); }
.emp-upload-preview { max-height: 320px; overflow: auto; border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); }
.emp-upload-map { width: 100%; border-collapse: collapse; font-size: calc(12px * var(--fs-scale, 1)); }
.emp-upload-map th { text-align: left; font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); text-transform: uppercase; color: var(--ink-mute); border-bottom: 1px solid var(--hairline); padding: 6px 8px; }
.emp-upload-map td { padding: 5px 8px; border-bottom: 1px solid var(--hairline); }
.emp-upload-map select { width: 100%; font-family: var(--font-ui); font-size: calc(12px * var(--fs-scale, 1)); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 4px 6px; background: var(--paper); color: var(--ink); }
.emp-upload-map-status { font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale, 1)); letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; }
.emp-upload-map-status.matched { color: var(--signal-grass); background: var(--signal-grass-bg); }
.emp-upload-map-status.needs-mapping { color: var(--signal-amber); background: var(--signal-amber-bg); }
.emp-upload-map-status.ignored { color: var(--ink-mute); background: var(--paper-2); }
.emp-upload-map-required { color: var(--baobab); font-weight: 700; margin-left: 4px; }
.emp-upload-result { margin-top: 12px; }

/* connect modal */
.emp-connect-list { display: flex; flex-direction: column; gap: 8px; }
.emp-connect-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 10px 12px; }
.emp-connect-icon { font-family: var(--font-mono); font-weight: 700; width: 26px; height: 26px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 4px; flex: 0 0 auto; }
.emp-connect-name { font-weight: 600; font-size: calc(13px * var(--fs-scale, 1)); flex: 1; }
.emp-connect-status { font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale, 1)); text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 3px; }
.emp-connect-status.connected { color: var(--signal-grass); background: var(--signal-grass-bg); }
.emp-connect-status.not-connected { color: var(--ink-mute); background: var(--paper-2); }
.emp-connect-panel { border-top: 1px dashed var(--hairline); margin-top: 10px; padding-top: 10px; }

/* =====================================================   EMPLOYEE FILE PAGE
   ============================================================ */
.emp-file-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.emp-file-name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: calc(26px * var(--fs-scale, 1)); margin: 0; }
.emp-file-subline { color: var(--ink-mute); font-size: calc(14px * var(--fs-scale, 1)); margin: 2px 0 8px; }
.emp-file-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.emp-file-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: calc(13px * var(--fs-scale, 1)); color: var(--ink-mute); }
.emp-file-meta b { color: var(--ink); font-weight: 600; }

.tabbar { display: flex; gap: 2px; border-bottom: 1px solid var(--hairline); margin-bottom: 18px; flex-wrap: wrap; }
.tabbar-tab {
  position: relative; font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-mute); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 11px; cursor: pointer;
}
.tabbar-tab:hover { color: var(--ink); }
.tabbar-tab.on { color: var(--ink); border-bottom-color: var(--baobab); font-weight: 700; }
.tabbar-tab.dirty::after { content: ""; position: absolute; top: 6px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--baobab); }

.emp-doc-list, .emp-degree-list, .emp-dependent-list, .emp-permit-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 12px; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.emp-doc-item, .emp-permit-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--hairline); font-size: calc(12.5px * var(--fs-scale, 1));
}
.emp-doc-item:last-child, .emp-permit-row:last-child { border-bottom: 0; }
.emp-degree-row, .emp-dependent-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 10px 12px; border-bottom: 1px solid var(--hairline);
}
.emp-degree-row:last-child, .emp-dependent-row:last-child { border-bottom: 0; }
.emp-degree-row .md-field, .emp-dependent-row .md-field { min-width: 130px; flex: 1 1 130px; }
.emp-row-empty { padding: 18px; text-align: center; color: var(--ink-mute); font-family: var(--font-display); font-style: italic; }
.emp-row-archived { opacity: 0.5; text-decoration: line-through; }

.emp-insurance-grid, .emp-bank-grid, .emp-payroll-grid { display: flex; flex-direction: column; gap: 18px; }
.emp-insurance-block-title { font-family: var(--font-display); font-weight: 700; font-size: calc(13.5px * var(--fs-scale, 1)); margin-bottom: 8px; }

.emp-readonly-block { display: flex; flex-direction: column; gap: 18px; }
.emp-readonly-section-title { font-family: var(--font-display); font-weight: 700; font-size: calc(13.5px * var(--fs-scale, 1)); margin-bottom: 6px; }
.emp-readonly-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--hairline); font-size: calc(12.5px * var(--fs-scale, 1)); }
.emp-readonly-empty { color: var(--ink-mute); font-family: var(--font-display); font-style: italic; padding: 10px 0; }

.emp-save-bar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  background: var(--paper); border-top: 1px solid var(--hairline); padding: 10px 4px; margin-top: 14px;
}
.emp-save-bar-msg { margin-right: auto; font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-mute); }
.emp-field-pending-note { font-family: var(--font-mono); font-size: calc(9px * var(--fs-scale, 1)); color: var(--signal-amber); margin-left: 6px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---- Sign-off v5 (2026-07-22): Roles & Profiles rework ---- */
/* Click-to-sort table headers -- every md-table column sorts asc/desc. */
.md-th-sort { cursor: pointer; user-select: none; }
.md-th-sort:hover { color: var(--ink); }
.md-th-sort.asc::after { content: " \25B2"; font-size: 8px; color: var(--baobab); }
.md-th-sort.desc::after { content: " \25BC"; font-size: 8px; color: var(--baobab); }
/* EN/FR/PT language toggle -- one record, three labels. */
.rp-langtog { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); overflow: hidden; }
.rp-lang { font-family: var(--font-mono); font-size: 9.5px; padding: 5px 9px; background: var(--paper); border: 0; cursor: pointer; color: var(--ink-mute); }
.rp-lang.on { background: var(--ink); color: var(--paper); }
/* Talent-types block under Contract & Talent. */
.rp-talent { margin-top: 22px; }

/* ---- Sign-off v5 (2026-07-22): reporting-structure org chart ---- */
/* Boxes + connector lines (classic nested-ul chart). Horizontal scroll
   stays inside .rsc-wrap so wide teams never stretch the page. */
.rsc-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rsc-unassigned { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); text-transform: uppercase; letter-spacing: 0.04em; padding: 7px 12px; border-radius: 2px; cursor: pointer; background: var(--paper); color: var(--baobab); border: 1px solid var(--baobab); }
.rsc-unassigned:hover { background: var(--baobab); color: var(--paper); }
.rsc-wrap { overflow-x: auto; padding: 6px 0 14px; }
.rsc-tree, .rsc-ul { display: flex; justify-content: center; padding-top: 18px; position: relative; list-style: none; margin: 0; }
.rsc-tree { padding-top: 0; }
.rsc-li { display: flex; flex-direction: column; align-items: center; padding: 18px 6px 0; position: relative; }
.rsc-li::before, .rsc-li::after { content: ""; position: absolute; top: 0; right: 50%; border-top: 1px solid var(--ink-faint); width: 50%; height: 18px; }
.rsc-li::after { right: auto; left: 50%; border-left: 1px solid var(--ink-faint); }
.rsc-li:only-child::before, .rsc-li:only-child::after { display: none; }
.rsc-li:only-child { padding-top: 0; }
.rsc-li:first-child::before, .rsc-li:last-child::after { border: 0; }
.rsc-li:last-child::before { border-right: 1px solid var(--ink-faint); }
.rsc-tree > .rsc-li { padding-top: 0; }
.rsc-tree > .rsc-li::before, .rsc-tree > .rsc-li::after { display: none; }
.rsc-ul::before { content: ""; position: absolute; top: 0; left: 50%; border-left: 1px solid var(--ink-faint); width: 0; height: 18px; }
.rsc-box { display: flex; flex-direction: column; align-items: center; background: var(--paper); border: 1px solid var(--hairline); border-top: 2px solid var(--baobab); border-radius: 2px; padding: 7px 12px; cursor: pointer; text-align: center; min-width: 130px; }
.rsc-box:hover { border-color: var(--baobab); }
.rsc-nm { font-weight: 600; font-size: calc(12.5px * var(--fs-scale, 1)); white-space: nowrap; }
.rsc-role { font-size: calc(10.5px * var(--fs-scale, 1)); color: var(--ink-mute); white-space: nowrap; }
.rsc-cnt { font-family: var(--font-mono); font-size: 9px; color: var(--ink-mute); margin-top: 3px; background: var(--paper-2); border: 1px solid var(--hairline); border-radius: 8px; padding: 1px 7px; cursor: pointer; }
.rsc-cnt:hover { color: var(--baobab); border-color: var(--baobab); }

/* ---- Sign-off v5 popups (2026-07-22): employee file + handbook/access ---- */
.emp-file-modal { max-height: calc(100vh - 60px); overflow-y: auto; padding: 4px 18px 18px; }
.hrmd-popup-body { height: min(88vh, 900px); display: flex; flex-direction: column; }
.hrmd-popup-scroll { overflow-y: auto; padding: 14px 18px 18px; }
/* =====================================================   CoFlow right dock (2026-07-21 round-2). Snapped to the right window
   edge, full height, resizable from the left edge; width owned by the
   CoworkDock DS component via --cowork-dock-w. The chat iframe inside is
   keep-mounted: collapse/route-hide only hide it visually.
   ============================================================ */
.shell > .body { margin-right: var(--cowork-dock-w, 0px); }
.cowork-dock {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--cowork-dock-w, 0px);
  background: var(--paper);
  border-left: 1px solid var(--hairline);
  z-index: 60;
  display: flex;
  pointer-events: auto;
}
.cowork-dock.is-route-hidden { visibility: hidden; }
.cowork-dock-surface { flex: 1; display: flex; min-width: 0; padding-top: 34px; }
.cowork-dock-surface .ds-window-coflow-body { flex: 1; display: flex; position: relative; min-width: 0; }
.cowork-dock-surface .cowork-frame { flex: 1; width: 100%; height: 100%; border: 0; }
.cowork-dock.is-collapsed .cowork-dock-surface { visibility: hidden; }
.cowork-dock-resize {
  position: absolute; left: -3px; top: 0; bottom: 0; width: 7px;
  cursor: col-resize; z-index: 61;
}
.cowork-dock-resize:hover { background: var(--baobab-bg); }
.cowork-dock.is-collapsed .cowork-dock-resize { display: none; }
.cowork-dock-toggle {
  position: absolute; left: 6px; top: 6px; z-index: 62;
  border: 1px solid var(--hairline);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: calc(11px * var(--fs-scale, 1));
  width: 24px; height: 24px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cowork-dock-toggle:hover { border-color: var(--baobab); color: var(--baobab); }

/* =====================================================   STANDING CDS RULE (Ben, 2026-07-21): tables never show per-row action
   buttons — every row opens its record in the row popup on click, and
   actions live inside the popup. .ds-rowclick marks compliant tables.
   ============================================================ */
.row-popup-backdrop {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.row-popup {
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 16px 18px;
  max-height: 82vh; overflow-y: auto;
}
.ds-rowclick tbody tr { cursor: pointer; }
.ds-rowclick tbody tr:hover { background: var(--paper-2); }
.ds-rowclick tbody tr:focus-visible { outline: 2px solid var(--baobab); outline-offset: -2px; }
.ds-rowclick tbody tr.ds-row-static { cursor: default; }
.ds-rowclick tbody tr.ds-row-static:hover { background: transparent; }
/* Sensitive input with an explicit Reveal/Hide control (bank account etc.) */
.ds-input-reveal { display: flex; gap: 8px; align-items: center; }
.ds-input-reveal .ds-input { flex: 1; }
.row-popup { width: min(560px, 92vw); }
.row-popup-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.row-popup-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(16px * var(--fs-scale, 1)); letter-spacing: -0.01em;
}
.row-popup-body { display: flex; flex-direction: column; gap: 8px; }
.row-popup-field { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: baseline; }
.row-popup-field-l {
  font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1));
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute);
}
.row-popup-field-v { font-size: calc(14px * var(--fs-scale, 1)); color: var(--ink); }
.row-popup-actions { margin-top: 14px; }
.row-popup-md { width: min(640px, 92vw); }
.row-popup-lg { width: min(920px, 94vw); }

/* Personal IT hub density */
.it-hub { gap: 16px; }
.it-hub .ds-table-header { margin-bottom: 4px; }

/* ---- Sign-off v5 round 2 (2026-07-22): popup polish ---- */
/* Employee-file popup: near-fullscreen working surface, its own scroll.
   The inner content renders WITHOUT page chrome via emp-file-popup-shell. */
.emp-file-modal { width: min(1100px, 96vw); height: min(88vh, 900px); overflow-y: auto; padding: 6px 20px 18px; }
.emp-file-popup-shell { display: block; }
.emp-file-popup-shell .emp-file-head { margin-top: 4px; }

/* R5 black horizontal top nav -- the ONLY navigation. Equal-width section
   tabs (icon over label) on a solid ink bar; record prev/next/close as small
   knockout icon buttons on the right. Sticks to the top of the scroll area. */
.emp-topnav {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: stretch;
  background: var(--ink); border-radius: var(--ds-radius-sm); overflow: hidden; margin-bottom: 8px;
}
.emp-tabs { display: flex; flex: 1 1 auto; min-width: 0; }
.emp-tab {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale, 1)); letter-spacing: 0.04em;
  text-transform: uppercase; color: color-mix(in srgb, var(--paper) 62%, transparent);
  background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 7px 4px 6px; cursor: pointer;
  position: relative; white-space: nowrap;
}
.emp-tab .glyph { width: 15px; height: 15px; stroke-width: 1.6; }
.emp-tab span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.emp-tab:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }
.emp-tab.on { color: var(--paper); border-bottom-color: var(--baobab); }
.emp-tab.dirty::after { content: ""; position: absolute; top: 5px; right: calc(50% - 20px); width: 5px; height: 5px; border-radius: 50%; background: var(--baobab); }
.emp-recnav { display: flex; align-items: center; gap: 2px; padding: 0 6px; border-left: 1px solid color-mix(in srgb, var(--paper) 16%, transparent); }
.emp-recbtn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  color: color-mix(in srgb, var(--paper) 72%, transparent); background: transparent; border: 0; border-radius: var(--ds-radius-sm); cursor: pointer;
}
.emp-recbtn .glyph { width: 15px; height: 15px; stroke-width: 1.6; }
.emp-recbtn:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 12%, transparent); }

/* Compact identity strip -- one line of name, then one line of facts. No
   giant serif block eating a third of the popup (Ben r5). Same UI font as
   everything else -- no display face here. */
.emp-ident { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--hairline); }
.emp-ident-name {
  font-family: var(--font-ui); font-weight: 700; font-size: calc(19px * var(--fs-scale, 1));
  letter-spacing: -0.01em; margin: 0 0 4px; color: var(--ink);
}
.emp-ident-facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--ink-mute);
}
.emp-ident-facts b { color: var(--ink); font-weight: 600; }
.emp-ident-dot { color: var(--ink-faint); }

/* R5 density: the popup form spreads to four columns across the full width
   and rows are tight, so a whole tab fits without scrolling for details. */
.emp-file-popup-shell .ec-grid { grid-template-columns: repeat(4, 1fr); gap: 6px 12px; }
.emp-file-popup-shell .ec-field.wide { grid-column: span 4; }
.emp-file-popup-shell .ec-field { gap: 2px; }
.emp-file-popup-shell .ec-field span:first-child { font-size: calc(10px * var(--fs-scale, 1)); }
.emp-file-popup-shell .ec-field input, .emp-file-popup-shell .ec-field select { padding: 4px 8px; }
.emp-file-popup-shell .emp-mgr-picker { margin-bottom: 6px; }
/* r4: the popup carries the SAME breadcrumb top bar as the standalone route.
   Inside the modal it is a plain in-flow strip (the page-level sticky/offset
   chrome would misplace it). */
.emp-file-popup-shell .topbar {
  position: static; margin: 0 0 6px; padding: 0 0 8px; border-bottom: 1px solid var(--hairline);
  min-height: 0; background: transparent;
}
.emp-file-popup-shell .crumbs span:not(.sep) { color: var(--ink-mute); }

/* Employee-file header controls (Ben, 2026-08-08): prev/next/close are one
   compact, uniform group top-right -- same component, same size, never a
   bare unstyled ghost next to sized buttons. */
.emp-file-actions { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.emp-file-nav-btn { font-size: calc(12.5px * var(--fs-scale, 1)); padding: 5px 12px; }

/* Payroll lock (Ben, 2026-08-08): stay in the design system -- no re-theme,
   no colour swap. The payroll form structure renders BLURRED (empty form,
   no salary values in the DOM) behind a centered unlock card that stays
   pinned while scrolling. Biometric unlock is a planned addition. */
.emp-payroll-lockwrap { position: relative; min-height: 340px; }
.emp-payroll-blur { filter: blur(7px); pointer-events: none; user-select: none; }
.emp-lock-overlay { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; }
.emp-lock-card {
  position: sticky; top: 120px; margin-top: 56px;
  width: min(340px, 92%);
  background: var(--paper); border: 1px solid var(--hairline); border-top: 2px solid var(--baobab);
  padding: 22px 26px; text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
.emp-lock-title { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: calc(17px * var(--fs-scale, 1)); }
.emp-lock-sub { margin: 0; color: var(--ink-mute); font-size: calc(12.5px * var(--fs-scale, 1)); }
.emp-lock-in {
  padding: 9px 12px; border: 1px solid var(--hairline); background: var(--paper-2); color: var(--ink);
  font-family: var(--font-mono); font-size: calc(15px * var(--fs-scale, 1)); text-align: center; letter-spacing: 0.35em;
}
.emp-lock-in:focus { outline: 2px solid var(--baobab); outline-offset: -1px; }
.emp-lock-err { margin: 0; font-size: calc(12px * var(--fs-scale, 1)); }
.emp-lock-status {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--signal-grass-bg); border: 1px solid var(--signal-grass);
  padding: 7px 12px; margin-bottom: 14px; font-size: calc(12.5px * var(--fs-scale, 1));
}

/* Employee-file popup footer (Ben, 2026-07-22): destructive record actions
   (Disable/Retire) live at the BOTTOM, never top-right next to Close. */
.emp-file-footer { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.emp-file-footer-spacer { flex: 1; }
/* Real file upload control -- the input rides inside the button label. */
.emp-upload-label { position: relative; overflow: hidden; display: inline-flex; align-items: center; cursor: pointer; }
.emp-upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* =====================================================   HRMD r6 (MMDB-1630..1639) — Employee File Status/Documents/Degrees/
   Dependents/Insurance/Work permits/Bank accounts/Ingest tabs.
   ============================================================ */

/* R3 — typed "delete" confirm, reused for every sub-entity delete. */
.emp-delete-confirm { border: 1px solid var(--baobab); background: var(--baobab-bg); border-radius: var(--ds-radius-sm); padding: 10px 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.emp-delete-confirm-label { font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--ink); margin: 0; }
.emp-delete-confirm-in { max-width: 220px; }

/* R9 — per-tab upload control + AI suggestion card. */
.emp-upload-suggest { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--hairline); }
/* Same control as a plain action-row member (Documents tab): no rule, no
   block spacing -- the tab keeps ONE action row. */
.emp-upload-suggest-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.emp-upload-suggest-inline .emp-suggest-card { flex-basis: 100%; }
.emp-suggest-card { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--paper); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.emp-suggest-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.emp-suggest-kind { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: calc(13.5px * var(--fs-scale, 1)); }
.emp-suggest-summary { margin: 0; color: var(--ink-mute); font-size: calc(12.5px * var(--fs-scale, 1)); }
.emp-suggest-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.emp-ingest-summary { color: var(--ink-mute); font-size: calc(11.5px * var(--fs-scale, 1)); }

/* R10 — Ingest tab: mailbox source chips, search, message list, per-message
   attachment expand. */
.emp-ingest { display: flex; flex-direction: column; gap: 12px; }
.emp-ingest-sources { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.emp-ingest-source {
  font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--paper); color: var(--ink-mute); cursor: pointer;
}
.emp-ingest-source:hover { color: var(--ink); }
.emp-ingest-source.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.emp-ingest-search { min-width: 260px; }
.emp-ingest-list { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.emp-ingest-msg { border-bottom: 1px solid var(--hairline); }
.emp-ingest-msg:last-child { border-bottom: 0; }
.emp-ingest-msg-row { display: grid; grid-template-columns: 110px 200px 1fr 130px; gap: 10px; align-items: center; padding: 8px 12px; font-size: calc(12.5px * var(--fs-scale, 1)); }
.emp-ingest-msg-row.has-att { cursor: pointer; }
.emp-ingest-msg-row.has-att:hover { background: var(--paper-2); }
.emp-ingest-msg-date { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); color: var(--ink-mute); }
.emp-ingest-msg-from { color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-ingest-msg-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-ingest-msg-att { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); color: var(--ink-mute); text-align: right; }
.emp-ingest-attachments { padding: 8px 12px 12px 24px; background: var(--paper-2); display: flex; flex-direction: column; gap: 8px; }
.emp-ingest-attachment { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: calc(12px * var(--fs-scale, 1)); }

/* Read-only static chip list (coverage / covered persons) — deliberately
   distinct from the clickable .emp-chip so it never reads as an action. */
.emp-subchip-list { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.emp-subchip {
  font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale, 1)); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; background: var(--paper-2); color: var(--ink-mute); border: 1px solid var(--hairline);
}

/* R5/R6 multi-select checkbox groups inside sub-entity popups. */
.emp-checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }
.emp-checkbox-opt { display: inline-flex; align-items: center; gap: 5px; font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink); }
.emp-checkbox-field { flex-direction: row !important; align-items: center; gap: 8px !important; }

/* R4/R7 attach-document control inside the Degree/Permit popups. */
.emp-attach-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--hairline); }
.emp-attach-status { font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-mute); }

/* R6 — dependants with no policy coverage. */
.emp-uncovered-line { font-size: calc(12px * var(--fs-scale, 1)); color: var(--signal-amber); margin: 6px 0 14px; }

/* R7 — expiring-soon date highlight inside the permits table. */
.emp-expiring { color: var(--signal-amber); font-weight: 600; }

/* Badge variants added for R9 (confidence) / R3 (ingested yes/no). */
.md-badge.yes { color: var(--signal-grass); background: var(--signal-grass-bg); border-color: transparent; }
.md-badge.no { color: var(--ink-mute); background: var(--paper-2); }
.md-badge.high { color: var(--signal-grass); background: var(--signal-grass-bg); border-color: transparent; }
.md-badge.medium { color: var(--signal-amber); background: var(--signal-amber-bg); border-color: transparent; }
.md-badge.low { color: var(--ink-mute); background: var(--paper-2); }

/* Round-3 (2026-07-22): dock seam + header, launcher offset, IT quadrants,
   dashboard density. */
.cowork-dock {
  box-shadow: -10px 0 28px color-mix(in srgb, var(--ink) 10%, transparent);
}
.cowork-dock { flex-direction: column; }
.cowork-dock-head {
  height: 40px; flex: 0 0 40px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-2);
}
.cowork-dock-title {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* 2026-08-31: groups expand + pop-out + collapse together at the head's
   right end -- .cowork-dock-head is `justify-content:space-between` with
   exactly two children (title, this group), so the three controls sit as
   ONE cluster rather than being spread apart by that rule. */
.cowork-dock-controls { display: flex; align-items: center; gap: 4px; }
.cowork-dock-toggle {
  position: static;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink-soft);
  width: 24px; height: 24px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cowork-dock-toggle .glyph { width: 12px; height: 12px; transform: rotate(-90deg); }
.cowork-dock.is-collapsed .cowork-dock-toggle .glyph { transform: rotate(90deg); }
.cowork-dock.is-collapsed .cowork-dock-head { padding: 0; justify-content: center; border-bottom: none; }
.cowork-dock.is-collapsed .cowork-dock-title { display: none; }
.cowork-dock-surface { padding-top: 0; }
/* Large mode (2026-08-31, Ben: "popped out as full screen / large own
   window"): width is the live viewport, not the remembered drag width, so
   the drag handle has nothing meaningful to drag -- hidden the same way it
   already is while collapsed. */
.cowork-dock.is-expanded .cowork-dock-resize { display: none; }

.it-quad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.it-quad-cell {
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.it-quad-cell .ds-table-header { margin-bottom: 0; }
@media (max-width: 1100px) { .it-quad { grid-template-columns: 1fr; } }

.me-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) { .me-grid { grid-template-columns: 1fr; } }

/* Dashboard density: compact rows inside the home panels, no page-wide
   sprawl for single-column content. */
.home-tabpanel { padding: 12px 14px; }
.home-tabpanels .ds-records-compact td { padding: 6px 10px; }
.home-tabpanels .ds-workqueue td, .home-tabpanels .ds-workqueue th { padding: 6px 10px; }
[data-eid="home-leave"], [data-eid="home-hr"] { max-width: 860px; }

/* Round-3 polish: tiles wrap to 2x2 before labels clip; label sizing.
   MMDB-1823 (2026-09-02): the authoritative breakpoints below, same as the
   base rule above, now set flex-basis rather than grid-template-columns
   (.home-tabstrip is flex now — see the "even tile grid" comment above the
   base rule) so a partial trailing row still grows to fill the full width
   at every step instead of leaving a dead cell. */
.home-tabstrip .home-ess-tile .home-ess-tile-nm { font-size: calc(13px * var(--fs-scale, 1)); line-height: 1.25; }
@media (max-width: 1560px) { .home-tabstrip .home-ess-tile { flex-basis: calc(50% - 4px); } }
@media (max-width: 900px) { .home-tabstrip .home-ess-tile { flex-basis: 100%; } }
/* Container-query authoritative source — see the .home-band comment above.
   Placed after the @media fallback so it wins the cascade wherever
   @container is supported; ignored entirely (falling back to @media)
   where it is not. */
@container home-band (max-width: 1560px) { .home-tabstrip .home-ess-tile { flex-basis: calc(50% - 4px); } }
@container home-band (max-width: 900px) { .home-tabstrip .home-ess-tile { flex-basis: 100%; } }

/* Round-4: IT action tiles + two-column band */
.it-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.it-action-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  cursor: pointer;
  color: var(--ink);
  text-align: left;
}
.it-action-tile:hover { border-color: var(--baobab); background: var(--paper-2); }
.it-action-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: calc(12.5px * var(--fs-scale, 1)); letter-spacing: -0.01em;
}
.it-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) { .it-two-col { grid-template-columns: 1fr; } .it-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Round-5: disabled action tiles (grayed until Ben specifies targets),
   ticket pager, tighter IT panel density. */
.it-action-tile.is-disabled {
  color: var(--ink-faint);
  background: var(--paper-2);
  cursor: not-allowed;
}
.it-action-tile.is-disabled .home-ess-tile-glyphwrap { border-color: var(--hairline); background: var(--paper); color: var(--ink-faint); }
.it-action-tile.is-disabled:hover { border-color: var(--hairline); background: var(--paper-2); }
.it-pager { align-items: center; gap: 10px; }
.it-pager-label { font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute); }
.it-dense { gap: 10px; }
.it-dense .it-quad-cell { padding: 8px 12px; gap: 6px; }
.it-dense .ds-table-header { padding: 0; }
.home-tabpanel { padding: 10px 12px; }
.it-tickets-table td { padding: 5px 8px; }
.me-docs-tile { min-width: 180px; }

/* =====================================================   MMD Talent Acquisition (MMDB-1815..1820) — internal parallel TA lane.
   Pool bulk-upload result strip + row popup action blocks. Tokens only,
   same vocabulary as the ta-* / emp-upload-* rules above.
   ============================================================ */
.mmdta-bulk-result { margin-bottom: 10px; display: flex; flex-direction: column; gap: 4px; }
.mmdta-bulk-reject-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mmdta-needs-review-tag { margin-left: 8px; }
.mmdta-candidate-actions-block { border-top: 1px solid var(--hairline); padding-top: 14px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }

/* =====================================================   MMD OMS Redesign (Ferri-OMS-3) — Central Design System Extensions
   ============================================================ */
.ds-oms-card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.ds-oms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(12.5px * var(--fs-scale, 1));
}
.ds-oms-table th {
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(11px * var(--fs-scale, 1));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 10;
}
.ds-oms-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  vertical-align: middle;
}
.ds-oms-table tr:hover td {
  background: var(--paper-2);
}
.ds-table-viewport, .ds-table-scroll {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  background: var(--paper);
}
.ds-oms-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  margin-bottom: 12px;
}
.ds-oms-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-oms-stat-label {
  font-size: calc(10.5px * var(--fs-scale, 1));
  color: var(--ink-mute);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.ds-oms-stat-value {
  font-family: var(--font-mono);
  font-size: calc(14px * var(--fs-scale, 1));
  font-weight: 700;
  color: var(--ink);
}
.ds-tabbar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 12px;
  padding-bottom: 2px;
}
.ds-tabbar-item {
  padding: 6px 12px;
  font-size: calc(12px * var(--fs-scale, 1));
  font-weight: 600;
  color: var(--ink-mute);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.ds-tabbar-item:hover {
  color: var(--ink);
}
.ds-tabbar-item.is-active {
  color: var(--baobab);
  border-bottom-color: var(--baobab);
}
.ds-disclosure {
  border: 1px solid var(--hairline);
  border-radius: var(--ds-radius-sm);
  padding: 8px 12px;
  background: var(--paper-2);
  margin-top: 8px;
}
.ds-infolist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 14px;
  margin-bottom: 10px;
}
.ds-range-red::-webkit-slider-thumb, .ds-range-red::-moz-range-thumb {
  background: var(--baobab);
}
.ds-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}



/* === OMS nav redesign (2026-08-08) — quiet header utilities + table discipline === */
/* Quiet select: mono micro-label register for rarely-touched controls (country/
   operating unit). Hairline underline only — never competes with the title. */
.ds-select-quiet {
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: calc(10px * var(--fs-scale, 1));
  padding: 4px 2px;
  min-width: 0;
  cursor: pointer;
}
.ds-select-quiet:hover, .ds-select-quiet:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }
/* Single-line datagrids: a row is one line, overflow reads via the row popup. */
.ds-datagrid--nowrap th, .ds-datagrid--nowrap td { white-space: nowrap; }
.ds-datagrid--nowrap td { overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
/* Wide grids scroll inside their own viewport — columns are never cut dead,
   and a wide table never stretches the page full-bleed. */
.ds-table-viewport, .ds-datagrid-wrap { overflow-x: auto; max-width: 100%; min-width: 0; }
/* One-line cell with ellipsis — full value via title attribute / row popup. */
.ds-cell-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }

/* module-workbench is display:grid in the central DS with an implicit auto
   track: a wide single-line datagrid grows the track and stretches the whole
   page full-bleed instead of scrolling inside its wrap. Same defect and same
   fix as [data-eid="reporting-section"] (components.css) — scoped to the OMS
   family here. */
[data-eid^="ferri-oms-3"].module-workbench { grid-template-columns: minmax(0, 1fr); }
/* The earlier `.page-inner:has(> [data-eid^="ferri-oms-3"]) { max-width: none }`
   rule was removed 2026-08-10: `.page-inner.page-inner--wide` below has the same
   specificity (0,2,0) and sits later in this file, so the :has rule could never
   fire again. One width rule, not two that race on source order. */

.shell [data-oms-frame].topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  background: var(--ink);
  z-index: 50;
  border-bottom: 1px solid var(--hairline-on-ink);
  margin: 0;
  padding: 0;
}
/* The quiet elapsed/actual time toggle sits inside the one-line viewbar
   controls row now (moved out of the old page header, Ben round-6) — it
   must never wrap to a second line the way a free-flowing inline button
   does when the flex row gets tight. */
.ds-oms-viewbar-controls .ds-quiet-toggle { white-space: nowrap; flex: none; }
/* .ds-oms-tab was authored for <a> tags (no default border). The Dealer
   Workspace's lifecycle tabs are local view-state, not routes, so they render
   as <button>s — reset the UA button chrome so only the class's own
   border-bottom survives (Ben round-6: buttons were rendering as boxed
   pills instead of underline tabs). */
button.ds-oms-tab {
  appearance: none;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
}
/* =====================================================   HRMD round-2 (Ben, 2026-08-09 — MMDB-2037..2042)
   ============================================================ */
/* Browse toolbar: breadcrumbs left, tile/list switcher right. */
.ds-browse-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px;
  /* Sticky (Ben, 2026-08-09 r3): the Tiles/List switcher must stay reachable
     however far the grid scrolls -- it "disappeared after the first rows". */
  position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 6px 0;
}
.ds-browse-bar .ds-breadcrumbs { margin-bottom: 0; }
.ds-viewswitch { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); overflow: hidden; }
.ds-viewswitch button {
  font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute); background: var(--paper); border: 0; padding: 5px 12px; cursor: pointer;
}
.ds-viewswitch button + button { border-left: 1px solid var(--hairline); }
.ds-viewswitch button.on { color: var(--paper); background: var(--ink); }

/* Drill list view (same data as tiles, dense rows). */
.ds-drilldown-list { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.ds-drilldown-list-row {
  display: grid; grid-template-columns: minmax(180px, 1.4fr) 1fr auto; gap: 12px; align-items: center;
  text-align: left; background: var(--paper); border: 0; border-bottom: 1px solid var(--hairline);
  padding: 8px 14px; cursor: pointer;
}
.ds-drilldown-list-row:last-child { border-bottom: 0; }
.ds-drilldown-list-row:hover { background: var(--paper-2); }
.ds-drilldown-list-nm { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: calc(14px * var(--fs-scale, 1)); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inline-editable sub-entity lists (degrees/dependents/insurance/permits/
   bank): a real table whose cells ARE the inputs — no per-row popup form.
   The trailing row is always empty and typing into it starts a new record. */
.emp-inline-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.emp-inline-table th {
  font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--hairline); font-weight: 500;
}
.emp-inline-table td { padding: 3px 4px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.emp-inline-table tr:last-child td { border-bottom: 0; }
.emp-inline-table input, .emp-inline-table select {
  width: 100%; font-family: var(--font-ui); font-size: calc(13px * var(--fs-scale, 1)); color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: var(--ds-radius-sm); padding: 6px 8px;
}
.emp-inline-table input:hover, .emp-inline-table select:hover { border-color: var(--hairline); }
.emp-inline-table input:focus, .emp-inline-table select:focus { outline: none; border-color: var(--baobab); background: var(--paper); }
.emp-inline-table input::placeholder { color: var(--ink-faint); }
.emp-inline-row-new td { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.emp-inline-fixedlabel { font-size: calc(13px * var(--fs-scale, 1)); color: var(--ink); padding: 6px 8px; white-space: nowrap; }
.emp-inline-clear {
  font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute);
  background: transparent; border: 0; cursor: pointer; padding: 4px 6px;
}
.emp-inline-clear:hover { color: var(--baobab); }
.emp-inline-check { display: flex; justify-content: center; }
.emp-inline-subrow td { padding: 0 8px 8px; border-bottom: 1px solid var(--hairline); }

/* Explicit "+ Add line" control row (r4): a visible add-a-line button under
   every sub-entity table, not only the type-into trailing row. */
.emp-inline-addrow td { padding: 6px 4px 2px; border-bottom: 0; }
.emp-inline-addrow .ds-iconbtn { font-size: calc(11px * var(--fs-scale, 1)); padding: 5px 10px; }

/* Scalar Field | Value table (r4 Insurance all-tables): a row-header column
   plus a value input, reusing the inline-table look so a tab is one visual
   language throughout. */
.emp-scalar-table th[scope="row"] {
  text-transform: none; letter-spacing: 0; font-family: var(--font-ui);
  font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--ink-soft); font-weight: 500;
  width: 46%; white-space: normal; vertical-align: middle;
}
.emp-scalar-table td { width: 54%; }

/* Empty-but-present list row (r4 Documents "show a list even if empty"). */
.md-row-empty { cursor: default; }
.md-row-empty:hover { background: transparent; }
.md-empty-cell { color: var(--ink-mute); font-style: italic; padding: 12px 8px; }

/* Per-tab action row (Ben, 2026-08-09 r5): NOT a sticky bottom band -- that
   read as a second navigation. A compact right-aligned row of small icon
   buttons that sits just under the dense content. */
.emp-tab-bar {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
  border-top: 1px solid var(--hairline); padding: 8px 0 0; margin-top: 10px; flex-wrap: wrap;
}
.emp-tab-bar .ds-iconbtn { font-size: calc(11px * var(--fs-scale, 1)); padding: 5px 10px; }
.emp-tab-bar-msg { margin-right: auto; font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-mute); }

/* Mailbox-ingestion icon button (opens the ingest overlay). */
.emp-ingest-iconbtn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm);
  padding: 8px 12px; cursor: pointer;
}
.emp-ingest-iconbtn:hover { border-color: var(--ink); color: var(--ink); }
.emp-ingest-iconbtn .glyph { width: 14px; height: 14px; stroke-width: 1.6; }

/* Attachment preview + parse-confirm overlays (nested above the popup). */
.emp-preview-body { display: flex; flex-direction: column; gap: 10px; min-height: 300px; }
.emp-preview-frame { width: 100%; height: min(62vh, 640px); border: 1px solid var(--hairline); background: var(--paper-2); }
.emp-preview-img { max-width: 100%; max-height: min(62vh, 640px); object-fit: contain; border: 1px solid var(--hairline); background: var(--paper-2); }
.emp-preview-unsupported { padding: 40px 20px; text-align: center; color: var(--ink-mute); font-size: calc(13px * var(--fs-scale, 1)); border: 1px dashed var(--hairline); }
.emp-parse-summary { display: flex; flex-direction: column; gap: 6px; }
.emp-parse-row { display: grid; grid-template-columns: 180px 1fr; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--hairline); }
.emp-parse-row:last-child { border-bottom: 0; }
.emp-parse-l { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-mute); }
.emp-parse-v { font-size: calc(13.5px * var(--fs-scale, 1)); color: var(--ink); }

/* Payroll display-only rows (no inputs — changes go through a process). */
.emp-payroll-view { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px; }
.emp-payroll-item { display: flex; flex-direction: column; gap: 3px; border-bottom: 1px solid var(--hairline); padding-bottom: 7px; }
.emp-payroll-item-l { font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.emp-payroll-item-v { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: calc(17px * var(--fs-scale, 1)); color: var(--ink); font-variant-numeric: tabular-nums; }
.emp-payroll-note { display: flex; align-items: center; gap: 10px; justify-content: space-between; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hairline); font-size: calc(12.5px * var(--fs-scale, 1)); color: var(--ink-mute); }

/* Manager-required note: compact inline hint on the label line — never a
   full-width red row that shifts the grid (Ben, 2026-08-09). */
.md-mgr-required-inline { font-family: var(--font-mono); font-size: calc(9.5px * var(--fs-scale, 1)); letter-spacing: 0.05em; text-transform: uppercase; color: var(--baobab); margin-left: 8px; }

/* Legacy Employees tab tile cards, brought onto the design system
   (2026-08-09 — replaces the inline-styled blue-avatar cards). */
.emp-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 14px; }
.emp-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 16px; background: var(--paper); display: flex; flex-direction: column; gap: 10px; }
.emp-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.emp-card-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600;
}
.emp-card-id { min-width: 0; display: flex; flex-direction: column; }
.emp-card-nm { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: calc(15px * var(--fs-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-card-title { font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-card-meta { font-size: calc(13px * var(--fs-scale, 1)); color: var(--ink-soft); display: flex; flex-direction: column; gap: 3px; }
.emp-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid var(--hairline); }
.emp-card-actions { display: inline-flex; gap: 6px; }


/* =====================================================   HRMD round-3 (Ben, 2026-08-09 — MMDB-2056..2061)
   ============================================================ */
/* Icon action buttons: one family for Mail / Upload / New / similar. */
.ds-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-mono); font-size: calc(10.5px * var(--fs-scale, 1)); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-soft); background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm);
  padding: 8px 12px; cursor: pointer; text-decoration: none; line-height: 1;
}
.ds-iconbtn:hover { border-color: var(--ink); color: var(--ink); }
.ds-iconbtn .glyph { width: 14px; height: 14px; stroke-width: 1.6; }
.ds-iconbtn.primary { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.ds-iconbtn.primary:hover { background: var(--baobab); border-color: var(--baobab); }

/* Hover preview card: name header + dense field rows (MMDB-2056). */
.ds-hovercard-nm { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: calc(14px * var(--fs-scale, 1)); margin-bottom: 6px; border-bottom: 1px solid var(--hairline); padding-bottom: 5px; }

/* Org chart by country (MMDB-2058). Reuses rsc box/line primitives. */
.rsc-panels { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1100px) { .rsc-panels { grid-template-columns: 1.4fr 1fr; } }
.rsc-panel-title { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin: 4px 0 8px; border-bottom: 1px solid var(--hairline); padding-bottom: 5px; }
.rsc-grouphead { display: inline-flex; flex-direction: column; align-items: center; background: var(--ink); color: var(--paper); border-radius: 2px; padding: 8px 16px; }
.rsc-grouphead .rsc-nm { color: var(--paper); }
.rsc-grouphead .rsc-role { color: color-mix(in srgb, var(--paper) 70%, transparent); }
.rsc-badge-group { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--baobab); border: 1px solid color-mix(in srgb, var(--baobab) 45%, transparent); border-radius: var(--ds-radius-sm); padding: 0 6px; margin-top: 3px; }
.rsc-dept-strip { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.rsc-dept { display: flex; flex-direction: column; align-items: center; border: 1px dashed var(--hairline); border-radius: 2px; padding: 6px 12px; background: var(--paper-2); }
.rsc-dept-nm { font-weight: 600; font-size: calc(12px * var(--fs-scale, 1)); }
.rsc-dept-cnt { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-mute); }
.fm-org-list { display: flex; flex-direction: column; gap: 4px; }
.fm-org-domain { font-weight: 600; font-size: calc(12.5px * var(--fs-scale, 1)); margin-top: 8px; }
.fm-org-dept { display: grid; grid-template-columns: minmax(160px, 1.2fr) 1fr auto; gap: 10px; font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-soft); border-bottom: 1px solid var(--hairline); padding: 3px 2px; }

/* Per-column filter row (MMDB-2060). */
.ds-colfilters th { padding: 2px 6px 6px; }
.ds-colfilters input, .ds-colfilters select {
  width: 100%; font-family: var(--font-ui); font-size: calc(11.5px * var(--fs-scale, 1)); color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--hairline); border-radius: var(--ds-radius-sm); padding: 4px 6px;
}
.ds-colfilters input:focus, .ds-colfilters select:focus { outline: none; border-color: var(--baobab); }

/* Positions tree (MMDB-2061). */
.pos-tree { display: flex; flex-direction: column; gap: 2px; }
.pos-tree-dept { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: calc(14px * var(--fs-scale, 1)); margin: 10px 0 4px; }
.pos-tree-row { display: grid; grid-template-columns: minmax(220px, 1.6fr) 110px 1fr 90px 90px; gap: 10px; align-items: baseline; border-bottom: 1px solid var(--hairline); padding: 4px 2px; font-size: calc(12.5px * var(--fs-scale, 1)); cursor: pointer; }
.pos-tree-row:hover { background: var(--paper-2); }
.pos-tree-meta { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale, 1)); color: var(--ink-mute); }
.pos-fact-line { font-size: calc(12px * var(--fs-scale, 1)); color: var(--ink-mute); border-bottom: 1px solid var(--hairline); padding-bottom: 8px; margin-bottom: 4px; }

/* ==========================================================================
   Sales & Orders — scoped uplift (2026-08-10)
   Every rule below is additive and lives under .page-inner--wide or
   .ds-scope-sales, classes that ONLY the 11 Sales & Orders surfaces carry.
   No existing selector or token is edited, so HR / Expenses / Learning / IT /
   Reporting / TA render byte-identically.
   ========================================================================== */

/* One width for the whole area. Double class (0,2,0) beats the design system's
   .page-inner (0,1,0) regardless of stylesheet order. */
.page-inner.page-inner--wide { max-width: 1440px; }

/* Programmatic-only text: visible to screen readers, zero pixels on screen —
   lets every OMS surface own an h1 without breaking the no-visible-h1 rule. */
.ds-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Contrast. Measured failures were 2.21:1 and 2.41:1 against #F3F0E6 /
   #FAFAF6 where 4.5:1 is required; the amber marker was 3.48:1.
   --ink-quiet  #6E6B62 = 4.67:1 on #F3F0E6 (computed)
   --signal-amber-text #8A5A12 = 5.19:1 on #F3F0E6 (computed)
   Quiet text stays quiet — it just becomes legally legible. */
.ds-scope-sales {
  --ink-quiet: #6E6B62;
  --signal-amber-text: #8A5A12;
}
.ds-scope-sales .ds-crm-ratenote { color: var(--ink-quiet); font-size: 11px; }
.ds-scope-sales .ds-kanban-empty { color: var(--ink-quiet); }
/* N1, 2026-08-10: this rule carried NO variant exclusion, so at (0,2,0) it
   beat every (0,1,0) variant rule in the shared design system: the -chip lost
   its --paper-on---ink pairing and rendered amber at 3.27:1, -ok lost its
   green, -stage lost its 10px. Restrict it to the plain pill -- the class is
   exactly ds-kanban-card-marker, so it cannot contain the variant prefix. */
.ds-scope-sales .ds-kanban-card-marker:not([class*="ds-kanban-card-marker-"]) { color: var(--signal-amber-text); font-size: 9px; }
.ds-scope-sales .ds-kanban-closedbar-count,
.ds-scope-sales .ds-kanban-closedbar-chev { color: var(--ink-quiet); }
.ds-scope-sales .ds-datagrid-filter-toggle { color: var(--ink-quiet); }
.ds-scope-sales .ds-datagrid-pager-nav,
.ds-scope-sales .ds-datagrid-pager-nav:disabled { color: var(--ink-quiet); }
.ds-scope-sales .ds-th-sort-mark { color: var(--ink-quiet); }
.ds-scope-sales .ds-hint { color: var(--ink-quiet); }

/* --- Hit targets. Expand the touchable area without changing a single
   rendered pixel, so desktop density is untouched. */
.ds-scope-sales .ds-datagrid-filter-toggle,
.ds-scope-sales .ds-th-sort { position: relative; }
.ds-scope-sales .ds-datagrid-filter-toggle::after,
.ds-scope-sales .ds-th-sort::after {
  content: ""; position: absolute; inset: -8px;
}
.ds-scope-sales .ds-datagrid-pager-nav { min-width: 28px; min-height: 28px; }
/* N2, 2026-08-10. Measured, not guessed. At 390px the genuine page-level
   overflow is 29 elements on Pipeline (+54px), 7 on Opportunities (+29px),
   and a nowrap control row on the dealer workspace. Customers has ZERO --
   its 152 "overflowing" nodes all sit inside .ds-datagrid-wrap, which scrolls
   by design. Gate's only offenders are the global CoworkDock button (+11px)
   and its icon, outside this scope and not ours to fix here. The critique
   counted 6 routes; 2 of those were scroll containers doing their job.

   The cause is NOT the dead-rule pattern that explained N3 -- every offender
   is inside .ds-scope-sales, so the rules reach them. .ds-page-head is
   display:flex with NO flex-wrap, so its children cannot fall to a second
   line; the rest are flex items left at min-width:auto, which refuses to
   shrink below content. Both are only wrong when the viewport is narrower
   than the content, so this is bound to that case instead of applied
   globally. */

/* 2026-08-31 design review (sales-pipeline BLOCKER): the N2 fix above was
   gated to <=480px, but the actual overflow was captured at a plain 1280px
   desktop viewport -- kicker + italic title + open-count + the currency
   switch + ds-crm-headvalue ("OPEN PIPELINE" + its 26px display-italic
   figure) is genuinely wider than the row at that width, and with no wrap
   and no shrink allowed above 480px the tail (headvalue's own figure) was
   pushed past the 1280px edge and read as sliced. Same fix, applied
   unconditionally instead of mobile-only: wrapping is a no-op whenever the
   row already fits, so this cannot regress any width where N2's own
   before/after screenshots were taken. */
.ds-scope-sales .ds-page-head {
  flex-wrap: wrap;
  row-gap: 4px;
}
.ds-scope-sales .ds-page-head > * {
  min-width: 0;
}
.ds-scope-sales .ds-crm-headvalue,
.ds-scope-sales .ds-crm-curswitch {
  flex: none;
}

@media (max-width: 480px) {
  .ds-scope-sales .ds-page-head { flex-wrap: wrap; }
  .ds-scope-sales .ds-page-head > *,
  .ds-scope-sales .ds-crm-headvalue,
  .ds-scope-sales .ds-filterbar-group { min-width: 0; }
  .ds-scope-sales .ds-filterbar-group { flex-wrap: wrap; }
  /* Measured live on the deployed build: .ds-oms-viewbar-controls is a
     flex-wrap:nowrap row 526px wide inside a parent that DOES wrap, so it
     alone put the Overview 181px past a 390px viewport. The controls it
     holds are a select and text toggles that read fine stacked. */
  .ds-scope-sales .ds-oms-viewbar-controls { flex-wrap: wrap; }
  /* Wrapping the row was necessary and NOT sufficient, measured on the
     deployed build: with flex-wrap:wrap applied, `select.ds-select` was still
     527px wide on its own against a 390px viewport, because a select sizes to
     its widest option and a flex item at min-width:auto will not shrink below
     its content. The row wrapped; the child could not fit on any line.
     min-width:0 restores shrinking, max-width caps it at the row. */
  /* min-width:auto has to be cleared at EVERY level of a nested flex chain --
     clearing it on the children alone left the controls row itself unable to
     shrink, so the page still scrolled 179px sideways with every child
     shrinkable. Verified by injecting this exact rule into the deployed page
     before shipping it: Overview 2 in-scope offenders -> 0, dealer 3 -> 0. */
  .ds-scope-sales .ds-oms-viewbar,
  .ds-scope-sales .ds-oms-viewbar > *,
  .ds-scope-sales .ds-oms-viewbar-controls,
  .ds-scope-sales .ds-oms-viewbar-controls > * { min-width: 0; max-width: 100%; }
}

@media (pointer: coarse) {
  /* N3/N4, 2026-08-10. The 44px rules below already existed and did NOT
     reach the module bar: OmsFrame carries no ds-scope-sales and WRAPS the
     scoped surface, so every one of these descendant selectors was dead on
     the frame chrome -- the currency option measured 37.9x26 with a 44px
     rule written for it. The class is now on the frame root; these families
     are the remaining measured offenders. min-height only, so nothing
     reflows on a fine pointer. */
  .ds-scope-sales .ds-oms-tab,
  .ds-scope-sales .ds-btn,
  .ds-scope-sales select,
  .ds-scope-sales input:not([type=checkbox]):not([type=radio]) { min-height: 44px; }
  .ds-scope-sales .ds-datagrid-filter-toggle::after,
  .ds-scope-sales .ds-th-sort::after { inset: -16px; }
  .ds-scope-sales .ds-datagrid-pager-nav,
  .ds-scope-sales .ds-quiet-toggle,
  .ds-scope-sales .ds-oms-currency-opt { min-width: 44px; min-height: 44px; }
}

/* --- Focus. Board rows are the operator's primary action; they must show
   where the keyboard is. */
.ds-scope-sales .ds-row-click:focus-visible,
.ds-scope-sales .ds-oms-tab:focus-visible,
.ds-scope-sales .ds-crm-curswitch-btn:focus-visible,
.ds-scope-sales .ds-datagrid-filter-toggle:focus-visible,
.ds-scope-sales .ds-quiet-toggle:focus-visible {
  outline: 2px solid var(--baobab, var(--ds-c-red-16));
  outline-offset: -2px;
}

/* --- Loading. Skeleton rows replace a single "Loading cases…" line so the
   shape of the answer is visible before the answer is. */
.ds-skel-row td { padding: 6px 10px; }
.ds-skel-bar {
  display: block; height: 12px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.11) 37%, rgba(0,0,0,0.06) 63%);
  background-size: 400% 100%;
  animation: ds-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes ds-skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .ds-skel-bar { animation: none; }
}

/* --- Sales surface workbench layout & action alignment (Defect F) --- */
.ds-scope-sales.module-workbench .module-workbench-header,
.ds-scope-sales .module-workbench-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding-top: 4px !important;
  padding-bottom: 12px !important;
  padding-right: 0 !important;
}
@media (min-width: 981px) {
  .ds-scope-sales.module-workbench .module-workbench-header,
  .ds-scope-sales .module-workbench-header {
    padding-right: 0 !important;
  }
}
.ds-scope-sales .module-title-block {
  flex: 0 0 auto !important;
  max-width: none !important;
}
.ds-scope-sales .module-actions {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-end !important;
}

/* --- Sales folder card status tab (Defect D: eliminates negative-top overhang) --- */
.ds-scope-sales .ds-paper-folder-tab,
.ds-paper-folder-tab {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  height: 15px !important;
  padding: 0 6px !important;
  margin-bottom: 2px !important;
  background: var(--ink, var(--ds-c-neutral-23)) !important;
  color: var(--paper, var(--paper)) !important;
  font-family: var(--font-mono, monospace) !important;
  font-weight: 600 !important;
  font-size: 8px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: var(--ds-radius-sm)!important;
  line-height: 1 !important;
}

.ds-scope-sales .ds-paper-folder-head,
.ds-paper-folder-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 2px !important;
  gap: 12px !important;
}
.ds-scope-sales .ds-paper-folder-head .ds-paper-folder-tab,
.ds-paper-folder-head .ds-paper-folder-tab {
  margin-bottom: 0 !important;
}
.ds-scope-sales .ds-paper-folder-meta,
.ds-paper-folder-meta {
  font-family: var(--font-mono, monospace) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  color: var(--ink-mute, var(--ink-mute)) !important;
  text-align: right !important;
  white-space: nowrap !important;
  margin-left: auto !important;
  letter-spacing: 0.02em !important;
}

/* --- Sales review strip & field/value alignment (Full width row distribution) --- */
.ds-scope-sales .ds-paper-folder .ds-review-strip,
.ds-scope-sales .ds-review-strip,
.ds-paper-folder .ds-review-strip {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 4px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-top: 1px !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-field,
.ds-scope-sales .ds-review-field,
.ds-paper-folder .ds-review-field {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 1px !important;
  padding: 0 !important;
  flex: 1 1 0px !important;
  min-width: 100px !important;
  border-bottom: 0 !important;
  text-align: left !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-label,
.ds-scope-sales .ds-review-label,
.ds-paper-folder .ds-review-label {
  display: block !important;
  text-align: left !important;
  font-family: var(--font-mono, monospace) !important;
  text-transform: uppercase !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
  color: var(--ink-mute, var(--ink-mute)) !important;
  width: 100% !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-value,
.ds-scope-sales .ds-paper-folder .ds-review-value.ds-mono-num,
.ds-scope-sales .ds-review-value,
.ds-scope-sales .ds-review-value.ds-mono-num,
.ds-paper-folder .ds-review-value,
.ds-paper-folder .ds-review-value.ds-mono-num {
  display: block !important;
  text-align: left !important;
  color: var(--ink, var(--ds-c-neutral-23)) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  width: 100% !important;
}

/* --- DataGrid card mode filter & sort control toolbar --- */
.ds-datagrid-card-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px 16px !important;
  padding: 6px 10px !important;
  margin-bottom: 8px !important;
  background: var(--paper, var(--paper)) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--ds-radius-sm, 2px) !important;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ds-datagrid-card-bar-group {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 8px !important;
}
.ds-datagrid-card-bar-label {
  font-family: var(--font-mono, monospace) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink-mute, var(--ink-mute)) !important;
  margin-right: 2px !important;
}
.ds-datagrid-filter-chips-row,
.ds-datagrid-sort-chips-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 5px !important;
}
.ds-datagrid-filter-pill-wrap {
  position: relative !important;
}
.ds-filter-pill-btn,
.ds-sort-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 2px 7px !important;
  height: 22px !important;
  font-family: var(--font-ui, sans-serif) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink, var(--ds-c-neutral-23)) !important;
  background: var(--paper-2, var(--paper-2)) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--ds-radius-sm, 2px) !important;
  cursor: pointer !important;
  transition: all var(--ds-motion-fast, 0.15s) ease !important;
  line-height: 1 !important;
}
.ds-filter-pill-btn:hover,
.ds-sort-pill-btn:hover {
  background: var(--paper, var(--paper)) !important;
  border-color: var(--ink-mute, var(--ink-mute)) !important;
}
.ds-filter-pill-btn-active,
.ds-sort-pill-btn-active {
  background: var(--ink, var(--ds-c-neutral-23)) !important;
  color: var(--paper, var(--paper)) !important;
  border-color: var(--ink, var(--ds-c-neutral-23)) !important;
  font-weight: 600 !important;
}
.ds-filter-pill-btn-active:hover,
.ds-sort-pill-btn-active:hover {
  background: var(--ink-soft, var(--ds-c-neutral-16)) !important;
  color: var(--paper, var(--paper)) !important;
}
.ds-filter-pill-arrow,
.ds-sort-pill-dir {
  font-size: 8.5px !important;
  opacity: 0.8 !important;
}
.ds-sort-pill-dir-dim {
  opacity: 0.35 !important;
}
.ds-filter-pill-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 13px !important;
  height: 13px !important;
  padding: 0 3px !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  background: var(--baobab) !important;
  color: var(--ds-c-white-01) !important;
  border-radius: var(--ds-radius-sm)!important;
}
.ds-filter-pill-clear {
  padding: 2px 5px !important;
  font-size: 10px !important;
  font-family: var(--font-ui, sans-serif) !important;
  color: var(--ink-mute, var(--ink-mute)) !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.ds-filter-pill-clear:hover {
  color: var(--ink, var(--ds-c-neutral-23)) !important;
}
.ds-datagrid-filter-popover {
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  z-index: 50 !important;
  min-width: 180px !important;
  max-width: 280px !important;
  padding: 8px !important;
  background: var(--paper, var(--paper)) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--ds-radius-sm, 2px) !important;
  box-shadow: 0 4px 12px rgba(26, 26, 26, 0.12) !important;
}

/* --- Sales card containment & box model in DataGrid --- */
.ds-scope-sales .ds-datagrid,
.ds-scope-sales .ds-datagrid tbody {
  border: 0 !important;
}
.ds-scope-sales .ds-datagrid tbody tr,
.ds-scope-sales .ds-datagrid tbody tr+tr,
.ds-scope-sales .ds-datagrid tbody tr:has(.ds-paper-folder),
.ds-scope-sales .ds-datagrid tbody tr+tr:has(.ds-paper-folder) {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.ds-scope-sales .ds-datagrid tbody tr:hover,
.ds-scope-sales .ds-datagrid tbody tr:has(.ds-paper-folder):hover {
  background: transparent !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
.ds-scope-sales .ds-datagrid tbody td,
.ds-scope-sales .ds-datagrid tbody td:has(> .ds-paper-folder) {
  padding: 2px 16px 14px 16px !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
/* 2026-08-31 design review (sales-customers/opportunities/people MAJOR,
   "zebra striping reads as cream not silver"): the folder itself already
   grounded correctly (--paper-2 IS the Red Plate silver, #F1F1EC) but its
   own fanned "sheet peek" pseudo-elements below did not -- see the ::before/
   ::after fix a few rules down for why those, not this element, were what
   pixel-sampled as #F8F6EE/#ECE7D9. */
.ds-scope-sales .ds-datagrid tbody tr:nth-child(even) .ds-paper-folder {
  background: var(--paper-2) !important;
}
/* Was --ds-c-amber-04 (#ece7d9) / --ds-c-amber-09 (#e5dfcf) / --ds-c-amber-10
   (#ded7c4) -- an amber/cream family with no relation to the Red Plate
   palette. Replaced with the silver-grey hairline tokens already used
   throughout red-plate.css (--rp-line-2 #D7D6CE, --rp-line-3 #C7C6BD,
   --rp-border-strong #B9B8AE) so an even-row card's fanned peek reads as a
   step darker on the SAME silver family the folder itself already uses,
   not a shift into a different, off-palette hue. */
.ds-scope-sales .ds-datagrid tbody tr:nth-child(even) .ds-paper-folder::before {
  background: var(--rp-line-2) !important;
}
.ds-scope-sales .ds-datagrid tbody tr:nth-child(even) .ds-paper-folder::after {
  background: var(--rp-line-3) !important;
  box-shadow:
    -3px 4px 0 0 var(--rp-border-strong),
    -3px 4px 0 1px rgba(26, 26, 26, 0.09),
    0 4px 14px -2px rgba(26, 26, 26, 0.08),
    0 1px 4px rgba(26, 26, 26, 0.04) !important;
}

/* --- Pipeline Kanban layout & card stacking (Defect E: prevents card overlap & breakout) --- */
.ds-scope-sales .ds-kanban-col-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  /* Top padding widened 4px -> 10px, 2026-08-31 design review: the uniform
     column head's own box-sizing (content-box by default) let its declared
     height:60px grow past 60px once its 12px of vertical padding was added
     on top, leaving only ~6px of real clearance before the first card --
     tight enough that the head's own total-line text (bottom of its 2nd
     grid row) and the first card's top edge read as touching/overlapping in
     the captured screenshot. box-sizing:border-box below locks the head's
     rendered height at exactly 60px; this wider padding is the belt to that
     braces, so head and card are never adjacent by less than 10px either
     way the box model resolves. */
  padding: 10px 10px 14px 10px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
/* The uniform column head (Pipeline-only: ds-kanban-uniform has no other
   consumer, confirmed by grep) declares a fixed height:60px + overflow:
   hidden so its total-value line never grows the head -- but that box is
   content-box by default, so the 6px+6px vertical padding the same rule
   carries was added ON TOP of the declared 60px instead of being taken out
   of it, shrinking the real clearance below to the ~6px this defect was
   measured at. border-box keeps the head's rendered height at exactly 60px
   as the uniform-board design contract (MMDB-2009) intends. */
.ds-scope-sales .ds-kanban-uniform .ds-kanban-col-head {
  box-sizing: border-box !important;
}
.ds-scope-sales .ds-kanban-card {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 2px 8px 14px 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  text-align: left !important;
  align-items: flex-start !important;
}
.ds-scope-sales.ds-kanban-uniform .ds-kanban-card,
.ds-scope-sales .ds-kanban-uniform .ds-kanban-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: stretch !important;
  padding: 2px 8px 14px 8px !important;
  border: 0 !important;
  border-left: 0 !important;
  text-align: left !important;
}
.ds-scope-sales .ds-paper-folder {
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: 2px !important;
  /* Was var(--paper, var(--ds-c-yellow-01)) -- --paper is always defined at
     :root (portal-core.css line 15) so the cream fallback never actually
     fired here; the literal is removed rather than left dead. */
  background: var(--paper) !important;
  border: 1px solid rgba(26, 26, 26, 0.12) !important;
  border-radius: 2px !important;
  padding: 6px 12px 6px 12px !important;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.04), 0 4px 14px -2px rgba(26, 26, 26, 0.07) !important;
  cursor: pointer !important;
  text-align: left !important;
  /* Was flex-start, 2026-08-31 design review (sales-opportunities BLOCKER,
     "Ben2w ago" with no separator): flex-start on a column flex container
     shrink-wraps every direct child's WIDTH to its own content instead of
     stretching it to the folder's full width. ".ds-paper-folder-hangtab"
     and ".ds-paper-folder-sheet" (Pipeline/Opportunities/Leads cards) carry
     no width overrides of their own, so they collapsed to content width --
     and once ".ds-paper-folder-sheet" is content-width, its own descendant
     ".ds-paper-folder-foot { justify-content: space-between }" has no spare
     width left to distribute, so "Ben" and "2w ago" render back to back
     with zero gap between them. stretch (the flex default) restores full
     width on every direct child; it is provably safe for the OTHER
     ".ds-paper-folder" consumer (Customers/People's cardRender) because
     that markup already forces "width: 100% !important" on its own
     ".ds-review-strip"/"-field" rows a few rules below regardless of what
     the parent's align-items resolves to. */
  align-items: stretch !important;
  transform-origin: 14px 14px !important;
  transition: transform var(--ds-motion-fast, 0.15s) ease, box-shadow var(--ds-motion-fast, 0.15s) ease !important;
  margin-bottom: 0 !important;
}
.ds-scope-sales .ds-paper-folder:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 0 2px 6px rgba(26, 26, 26, 0.06), 0 6px 16px rgba(26, 26, 26, 0.10) !important;
}
.ds-scope-sales .ds-paper-folder::before,
.ds-scope-sales .ds-paper-folder::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 2px !important;
  pointer-events: none !important;
}
/* 2026-08-31 design review (sales-pipeline/opportunities/customers/people
   BLOCKER+MAJOR, "grounds on cream #F8F6EE/#ECE7D9 instead of the portal's
   silver"): --ds-c-yellow-04/-10 and --ds-c-amber-06 below are a genuine
   amber/cream palette family (pixel-identical to the reviewers' measured
   #F8F6EE / #ECE7D9), not a var(--x, cream-fallback) that merely LOOKED
   unused -- these are literal, always-defined cream tokens, used directly.
   Every ".ds-paper-folder" on every sales screen is one of these two
   "sheets fanned out beneath the top sheet" -- the visual effect the design
   review's pixel sampling actually caught, not the card's own (already
   correct) white/silver fill a few rules up. Replaced with the silver-grey
   hairline family red-plate.css already defines and uses for chrome
   (--rp-silver-2 #F7F7F3, --rp-line #E6E5DF, --rp-line-2 #D7D6CE) so the
   fanned peek reads as two steps of silver, not a shift into a different,
   off-palette hue. */
/* Sheet 1 (first discrete sheet fanned beneath top sheet) */
.ds-scope-sales .ds-paper-folder::before {
  background: var(--rp-silver-2) !important;
  border: 1px solid rgba(26, 26, 26, 0.11) !important;
  z-index: -1 !important;
  transform: translate(-3px, 4px) rotate(-0.35deg) !important;
  box-shadow: 0 1px 3px rgba(26, 26, 26, 0.04), 0 4px 10px -2px rgba(26, 26, 26, 0.05) !important;
}
/* Sheet 2 + Sheet 3 (second and third discrete sheets fanned beneath) */
.ds-scope-sales .ds-paper-folder::after {
  background: var(--rp-line) !important;
  border: 1px solid rgba(26, 26, 26, 0.10) !important;
  z-index: -2 !important;
  transform: translate(-6px, 8px) rotate(0.25deg) !important;
  box-shadow:
    -3px 4px 0 0 var(--rp-line-2),
    -3px 4px 0 1px rgba(26, 26, 26, 0.09),
    0 4px 14px -2px rgba(26, 26, 26, 0.08),
    0 1px 4px rgba(26, 26, 26, 0.04) !important;
}
.ds-scope-sales .bd-col-b .ds-paper-folder::before,
.ds-scope-sales .bd-col .ds-paper-folder::before,
.ds-scope-sales .bd-scroll .ds-paper-folder::before,
.ds-scope-sales .ds-kanban-col-body .ds-paper-folder::before,
.ds-scope-sales .ds-kanban-card .ds-paper-folder::before,
.ds-scope-sales .ds-kanban .ds-paper-folder::before {
  transform: translate(-2px, 3px) rotate(-1.4deg) !important;
}
.ds-scope-sales .bd-col-b .ds-paper-folder::after,
.ds-scope-sales .bd-col .ds-paper-folder::after,
.ds-scope-sales .bd-scroll .ds-paper-folder::after,
.ds-scope-sales .ds-kanban-col-body .ds-paper-folder::after,
.ds-scope-sales .ds-kanban-card .ds-paper-folder::after,
.ds-scope-sales .ds-kanban .ds-paper-folder::after {
  transform: translate(-4px, 6px) rotate(1.2deg) !important;
}
/* 2026-08-31 design review (sales-pipeline BLOCKER, "cards paint over the
   column subtotal"): both selectors below were dead on arrival --
   ".ds-kanban-board" is not a class KanbanBoard.tsx renders (the board's own
   wrapper is ".ds-kanban", confirmed by grep against KanbanBoard.tsx; only
   the data-eid carries the string "kanban-board"), and ".ds-paper-folder" is
   never a DIRECT child of ".ds-kanban-col-body" -- it is nested one level
   deeper, inside the <button class="ds-kanban-card"> the board itself
   renders around every card. So the 12px card-to-card gap this "Defect E"
   block already claimed to add had never actually applied; cards ran back
   to back with only the ~6px the column body's own top padding + the
   button's own edge padding gave the FIRST card above the column head's
   total line, which is what let that line read as covered. Corrected to the
   real class name and a descendant (not direct-child) combinator. */
.ds-scope-sales .ds-kanban .ds-paper-folder,
.ds-scope-sales .ds-kanban-col-body .ds-paper-folder {
  margin-bottom: 12px !important;
}
.ds-scope-sales .ds-paper-folder .ds-link-row-title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ink, var(--ds-c-neutral-23)) !important;
  margin-bottom: 2px !important;
  text-align: left !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-strip {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 16px !important;
  margin-top: 2px !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-field {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  gap: 1px !important;
  padding: 0 !important;
  text-align: left !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-field:first-child {
  text-align: left !important;
  align-items: flex-start !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-field:last-child {
  text-align: right !important;
  align-items: flex-end !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-field:last-child .ds-review-label,
.ds-scope-sales .ds-paper-folder .ds-review-field:last-child .ds-review-value {
  text-align: right !important;
  width: 100% !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-label {
  display: block !important;
  font-family: var(--font-mono, monospace) !important;
  text-transform: uppercase !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.1 !important;
  color: var(--ink-mute, var(--ink-mute)) !important;
  width: 100% !important;
}
.ds-scope-sales .ds-paper-folder .ds-review-value,
.ds-scope-sales .ds-paper-folder .ds-review-value.ds-mono-num {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  color: var(--ink, var(--ds-c-neutral-23)) !important;
  width: 100% !important;
}
.ds-scope-sales .ds-paper-folder .ds-kanban-card-title {
  display: block !important;
  text-align: left !important;
  align-self: flex-start !important;
  width: 100% !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--ink, var(--ds-c-neutral-23)) !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow: visible !important;
  text-overflow: clip !important;
  grid-row: auto !important;
  grid-column: auto !important;
}
.ds-scope-sales .ds-paper-folder .ds-kanban-card-sub {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 10.5px !important;
  color: var(--ink-mute, var(--ink-mute)) !important;
  grid-row: auto !important;
  grid-column: auto !important;
}
.ds-scope-sales .ds-paper-folder .ds-kanban-card-value {
  font-family: var(--font-display, Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  line-height: 1.2 !important;
  color: var(--ink, var(--ds-c-neutral-23)) !important;
  text-align: left !important;
  grid-row: auto !important;
  grid-column: auto !important;
}
.ds-scope-sales .ds-paper-folder .ds-kanban-card-weight {
  font-family: var(--font-mono, monospace) !important;
  font-size: 9.5px !important;
  color: var(--ink-mute, var(--ink-mute)) !important;
  letter-spacing: 0.02em !important;
  grid-row: auto !important;
  grid-column: auto !important;
}

/* 2026-08-31 design review (sales-opportunities BLOCKER, "value/quantity
   fields show bare em-dashes and heavy black rules"): OpportunitiesSurface's
   cardRender always renders ".ds-paper-folder-value"/"-weight", falling back
   to a plain "—" when the figure is genuinely unset -- correct per the
   standing rule (an absent value is never a fabricated 0), but that em-dash
   was rendering INSIDE the same 20px bold-italic display treatment real
   money uses (components.css ".ds-paper-folder-value"), which is exactly
   what a heavy black rule/bar looks like at that size. This modifier -- app
   code adds it only when the computed string is the empty-value dash -- asks
   the SAME two classes to fall back to a quiet, normal-weight line instead,
   the same register ".ds-hint"/"ink-mute" text already uses everywhere else
   for "nothing here" facts. Real values (with fmtMoney/fmtDisplayCompact's
   own toLocaleString separators, unchanged) keep the loud treatment. */
.ds-scope-sales .ds-paper-folder-value.ds-paper-folder-figure-empty {
  font-family: var(--font-ui, sans-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  color: var(--ink-mute) !important;
}
.ds-scope-sales .ds-paper-folder-weight.ds-paper-folder-figure-empty {
  font-weight: 400 !important;
  color: var(--ink-faint) !important;
}

/* --- Floating dock bottom clearance (Defect G) --- */
.ds-scope-sales.module-workbench,
.ds-scope-sales.page-inner {
  padding-bottom: 96px !important;
}
.ds-scope-sales .ds-datagrid-wrap {
  padding-bottom: 32px !important;
}
.ds-scope-sales .ds-kanban-fill {
  padding-bottom: 32px !important;
}

/* --- Record detail overlay sheet fill width (FILL annotation) --- */
.ds-modal--doc .ds-paper-file,
.ds-modal--doc-md .ds-paper-file,
.ds-modal--doc .ds-paper-sheet,
.ds-modal--doc-md .ds-paper-sheet,
.ds-modal--doc .ds-paper-desk,
.ds-modal--doc-md .ds-paper-desk {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.ds-paper-desk {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ds-paper-sheet--folded {
  transform: translate(35%, -6%) rotateY(-140deg) !important;
  background: var(--paper-2, var(--paper-2)) !important;
  box-shadow: 0 10px 24px -6px rgba(26, 26, 26, 0.18) !important;
  z-index: 6 !important;
}
.ds-paper-back {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: var(--ds-space-16) !important;
  background: var(--paper-2, var(--paper-2)) !important;
  background-image: repeating-linear-gradient(45deg, var(--paper-3) 0px, var(--paper-3) 7px, var(--paper-2, var(--paper-2)) 7px, var(--paper-2, var(--paper-2)) 14px) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: var(--ds-radius-sm) !important;
  font-family: var(--font-mono, monospace) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ink, var(--ds-c-neutral-23)) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* --- Sales surface wide viewport fill (stops wasting horizontal space) --- */
.ds-scope-sales.page-inner--wide,
.ds-scope-sales.page-inner {
  max-width: min(1680px, calc(100vw - 32px)) !important;
  width: 100% !important;
}


/* --- "As of HH:MM" + Refresh, right-aligned in a board head. */
.ds-line-card-head:has(.ds-oms-asof) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ds-oms-asof { display: inline-flex; align-items: center; gap: 10px; }

/* --- A refusal reason must never be silently elided. The short label stays,
   the full sentence is on the title, and overflow shows an ellipsis instead
   of being invisibly clipped by the nowrap table. */
.ds-scope-sales .ds-oms-verdict-hint {
  display: inline-block;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* --- Verdict glossary: a new gate operator should not have to ask a
   colleague what "Not at release" means. */
.ds-oms-glossary { position: relative; display: inline-block; }
.ds-oms-glossary > summary { cursor: pointer; list-style: none; }
.ds-oms-glossary > summary::-webkit-details-marker { display: none; }
.ds-oms-glossary[open] > summary { text-decoration: underline; }
.ds-oms-glossary-list {
  position: absolute; right: 0; z-index: 30; min-width: 320px; max-width: 420px;
  margin-top: 6px; padding: 12px 14px;
  background: var(--paper, var(--paper));
  border: 1px solid var(--ink, var(--ds-c-neutral-23));
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  text-align: left;
}
.ds-oms-glossary-list > div { display: grid; grid-template-columns: 9em 1fr; gap: 4px 12px; padding: 3px 0; }
.ds-oms-glossary-list dt { font-family: var(--font-mono, monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.ds-oms-glossary-list dd { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-quiet, var(--ink-mute)); }

/* --- MMD Central Design System: Dealer Self-Service Admin Components --- */
/* ds-dealer-admin-wrap moved to public/_design-system/components.css
   (TASK-P2-30.2a, 2026-08-15) -- single source of truth, unscoped, token-based. */

.ds-dealer-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.ds-dealer-stat-card {
  background: var(--paper, var(--paper));
  padding: 16px 20px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--hairline);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.ds-dealer-stat-label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-quiet, var(--ink-mute));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ds-dealer-stat-value {
  font-family: var(--font-mono, monospace);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, var(--ds-c-neutral-23));
  margin-top: 4px;
}

.ds-dealer-stat-value--danger { color: var(--ds-c-red-13); }
.ds-dealer-stat-value--primary { color: var(--baobab); }

.ds-dealer-stat-sub {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

.ds-dealer-stat-sub--good { color: var(--ds-c-green-08); }
.ds-dealer-stat-sub--info { color: var(--rp-ink-mute); }
.ds-dealer-stat-sub--mute { color: var(--ink-quiet, var(--ink-mute)); }

/* ds-dealer-panel, -panel-title, -panel-desc, -form-grid moved to
   public/_design-system/components.css (TASK-P2-30.2a, 2026-08-15). */

.ds-dealer-form-grid--flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ds-dealer-form-actions moved to public/_design-system/components.css
   (TASK-P2-30.2a, 2026-08-15). */

.ds-page-inner-standalone {
  max-width: 100%;
  padding: 16px 24px;
}

.ds-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--paper, var(--ds-c-white-01));
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm, 6px);
  font-size: 12px;
}

.ds-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-mute);
  font-weight: 500;
}

.ds-summary-value {
  color: var(--ink);
  font-weight: 700;
}

.ds-summary-value--primary {
  color: var(--baobab);
}

.ds-summary-value--danger {
  color: var(--ds-c-red-13);
}

.ds-button-danger {
  background: transparent;
  color: var(--ds-c-red-13);
  border: 1px solid var(--ds-c-red-07);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ds-button-danger:hover:not(:disabled) {
  background: var(--ds-c-red-01);
  border-color: var(--ds-c-red-09);
}

.ds-button-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.ds-form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ds-dealer-fullbleed-page, -nav-wrap, -nav-groups moved to
   public/_design-system/components.css (TASK-P2-30.2a, 2026-08-15). */

/* --- Divided Navigation Groups (Transactions vs Account & Admin) --- */
.ds-nav-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ds-nav-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-ink);
  padding: 4px 8px;
  background: var(--rp-silver);
  border-radius: 3px;
  margin-right: 4px;
}

.ds-nav-group-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ds-dealer-tab, -tab--active, -tab-count moved to
   public/_design-system/components.css (TASK-P2-30.2a, 2026-08-15). */

/* --- Status Symbols --- */
.ds-status-waiting-mmd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ds-c-yellow-03-a);
  color: var(--ds-c-amber-24);
  border: 1px solid var(--ds-c-yellow-22);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.ds-status-action-dealer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ds-c-green-01);
  color: var(--ds-c-green-10);
  border: 1px solid var(--ds-c-green-05);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

/* --- Carousel Stepper in Pop-ups --- */
.ds-pop-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--rp-ink);
  color: var(--ds-c-white-01);
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ds-pop-stepper-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-c-white-01);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ds-pop-stepper-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
}

.ds-pop-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* --- Official Pro-Forma PDF Document Preview --- */
.ds-proforma-document {
  background: var(--ds-c-white-01);
  border: 1px solid var(--rp-line-2);
  border-radius: 4px;
  padding: 32px;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--rp-ink);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ds-proforma-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid var(--rp-ink);
  padding-bottom: 16px;
  margin-bottom: 20px;
}

.ds-proforma-title-block h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin: 0 0 4px 0;
  color: var(--ds-c-red-10);
}

.ds-proforma-meta-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 12px;
}

.ds-proforma-meta-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--rp-line-2);
}

.ds-proforma-items-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 12px;
}

.ds-proforma-items-table th {
  background: var(--rp-ink);
  color: var(--ds-c-white-01);
  text-align: left;
  padding: 8px 12px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
}

.ds-proforma-items-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rp-line-2);
}

.ds-proforma-totals-block {
  margin-left: auto;
  width: 300px;
  border-top: 2px solid var(--rp-ink);
  padding-top: 12px;
}

.ds-proforma-total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
}

.ds-proforma-total-row--grand {
  font-size: 14px;
  font-weight: 800;
  color: var(--ds-c-red-10);
  border-top: 1px solid var(--rp-line-2);
  padding-top: 8px;
  margin-top: 4px;
}

/* --- Phone Number Primary Team Styling --- */
.ds-team-phone-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: var(--rp-ink);
  background: var(--rp-silver);
  border: 1px solid var(--rp-line-2);
  padding: 4px 10px;
  border-radius: var(--ds-radius-sm);
}

.ds-auth-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

/* --- Pop-up Dialog Viewport & Screen Fit Optimization --- */
.ds-pop-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  z-index: 2000;
  padding: 16px;
}

.ds-pop.ds-oms-dialog {
  display: flex;
  flex-direction: column;
  max-height: 88vh !important;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  background: var(--ds-c-white-01);
}

.ds-pop-body {
  overflow-y: auto !important;
  max-height: calc(88vh - 110px) !important;
  padding: 14px 18px !important;
}

.ds-proforma-document {
  background: var(--ds-c-white-01);
  border: 1px solid var(--rp-line-2);
  border-radius: 4px;
  padding: 20px 24px;
  font-family: system-ui, -apple-system, sans-serif;
  color: var(--rp-ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* === Lead to Cash & Sales Popups — Viewport sizing, rail fit & anti-clipping (AG3 R3) === */
.ds-modal.ds-modal--dialog.ds-modal--doc,
.ds-modal.ds-modal--dialog.ds-modal--doc-md {
  height: auto !important;
  max-height: min(920px, calc(100vh - 64px)) !important;
}

.ds-modal--doc .ds-modal-dialog-body,
.ds-modal--doc-md .ds-modal-dialog-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 !important;
}

.ds-modal--doc .ds-modal-dialog-foot,
.ds-modal--doc-md .ds-modal-dialog-foot {
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 20 !important;
  background: var(--paper-2) !important;
  border-top: 1px solid var(--hairline) !important;
  padding: 12px 20px !important;
}

.ds-modal--doc .ds-doc-cols {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-items: stretch !important;
}

.ds-modal--doc .ds-doc-sheet {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: var(--paper) !important;
  overflow-y: auto !important;
}

.ds-modal--doc .ds-doc-rail {
  width: 326px !important;
  flex: none !important;
  border-left: 1px solid var(--hairline) !important;
  background: var(--paper-2) !important;
  overflow-y: auto !important;
  gap: 10px !important;
  padding: 12px !important;
}

.ds-modal .ds-paper-file[data-single="true"],
.ds-paper-file[data-single="true"] {
  min-height: 0 !important;
}

.ds-modal .ds-paper-file[data-single="true"] .ds-paper-sheet,
.ds-paper-file[data-single="true"] .ds-paper-sheet {
  position: relative !important;
  inset: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding-right: var(--ds-space-16, 16px) !important;
  padding-bottom: var(--ds-space-24, 24px) !important;
}

.ds-modal .ds-paper-desk {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Customer 360 & PaperShell — Clean sheet-on-ground blend (AG2 R9) */
.ds-paper-desk {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.ds-paper-sheet {
  background: var(--paper, var(--ds-c-white-01)) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: 0 4px 20px -2px rgba(26, 26, 26, 0.10), 0 1px 4px 0 rgba(26, 26, 26, 0.06) !important;
}
/* ============================================================
   DERIVED PALETTE (added 2026-08-29).
   Every colour literal that was written directly into a rule in
   this design system now lives here as a named token, and the rule
   references it through var(). Values are byte-identical to what
   shipped before -- nothing was recoloured. This block plus the
   token block above is the whole palette: replacing them replaces
   the look of the portal, which is what a design system is for.
   ============================================================ */
:root {
  /* amber */
  --ds-c-amber-01: #faf4f2; /* 1 use */
  --ds-c-amber-02: #f4efe3; /* 7 uses */
  --ds-c-amber-03: #e6e4df; /* 7 uses */
  --ds-c-amber-05: #f3ead0; /* 6 uses */
  --ds-c-amber-06: #ece6d5; /* 3 uses */
  --ds-c-amber-07: #ede6d2; /* 9 uses */
  --ds-c-amber-08: #f5e8c9; /* 3 uses */
  --ds-c-amber-09: #e5dfcf; /* 2 uses */
  --ds-c-amber-10: #ded7c4; /* 2 uses */
  --ds-c-amber-11: #d4d0c8; /* 4 uses */
  --ds-c-amber-12: #d8d0c4; /* 3 uses */
  --ds-c-amber-13: #ddd5bf; /* 3 uses */
  --ds-c-amber-14: #d8d1be; /* 2 uses */
  --ds-c-amber-15: #d6cebe; /* 1 use */
  --ds-c-amber-16: #eecf7f; /* 3 uses */
  --ds-c-amber-17: #b3ad9e; /* 1 use */
  --ds-c-amber-18: #b8af98; /* 21 uses */
  --ds-c-amber-19: #a8a08a; /* 2 uses */
  --ds-c-amber-20: #e0a83a; /* 1 use */
  --ds-c-amber-21: #e85e26; /* 1 use */
  --ds-c-amber-22: #ffab00; /* 6 uses */
  --ds-c-amber-23: #b58f2a; /* 7 uses */
  --ds-c-amber-24: #b45309; /* 1 use */
  --ds-c-amber-25: #b78103; /* 3 uses */
  --ds-c-amber-26: #8f6a00; /* 6 uses */
  --ds-c-amber-27: #8a5a00; /* 1 use */
  --ds-c-amber-28: #7a5a00; /* 2 uses */

  /* black */
  --ds-c-black-01: #09090b; /* 2 uses */
  --ds-c-black-02: #000000; /* 74 uses */

  /* blue */
  --ds-c-blue-01: #f0f9ff; /* 1 use */
  --ds-c-blue-02: #f1f5f9; /* 2 uses */
  --ds-c-blue-03: #eef2fb; /* 1 use */
  --ds-c-blue-04: #eaf1fc; /* 3 uses */
  --ds-c-blue-05: #dce6f7; /* 1 use */
  --ds-c-blue-06: #e2e8f0; /* 3 uses */
  --ds-c-blue-07: #d6dff7; /* 8 uses */
  --ds-c-blue-08: #bae6fd; /* 1 use */
  --ds-c-blue-09: #c1d2ee; /* 1 use */
  --ds-c-blue-10: #cbd5e1; /* 2 uses */
  --ds-c-blue-11: #94a3b8; /* 1 use */
  --ds-c-blue-12: #548bf5; /* 2 uses */
  --ds-c-blue-13: #7f9db9; /* 2 uses */
  --ds-c-blue-14: #3b82f6; /* 1 use */
  --ds-c-blue-15: #3f74e8; /* 2 uses */
  --ds-c-blue-16: #4f83d4; /* 4 uses */
  --ds-c-blue-17: #4a80d4; /* 1 use */
  --ds-c-blue-18: #2563eb; /* 3 uses */
  --ds-c-blue-19: #3763d6; /* 2 uses */
  --ds-c-blue-20: #245edb; /* 2 uses */
  --ds-c-blue-21: #316ac5; /* 16 uses */
  --ds-c-blue-22: #64748b; /* 2 uses */
  --ds-c-blue-23: #2a55c0; /* 2 uses */
  --ds-c-blue-24: #0a5bc4; /* 7 uses */
  --ds-c-blue-25: #0284c7; /* 1 use */
  --ds-c-blue-26: #1941a5; /* 2 uses */
  --ds-c-blue-27: #173d8f; /* 1 use */
  --ds-c-blue-28: #0e2b7a; /* 3 uses */
  --ds-c-blue-29: #123b75; /* 16 uses */
  --ds-c-blue-30: #333344; /* 1 use */
  --ds-c-blue-31: #003c74; /* 3 uses */
  --ds-c-blue-32: #0a246a; /* 34 uses */
  --ds-c-blue-33: #0f172a; /* 7 uses */

  /* green */
  --ds-c-green-01: #f0fdf4; /* 1 use */
  --ds-c-green-02: #eef7e8; /* 1 use */
  --ds-c-green-03: #e4eedc; /* 2 uses */
  --ds-c-green-04: #d3ecc9; /* 4 uses */
  --ds-c-green-05: #bbf7d0; /* 1 use */
  --ds-c-green-06: #5f9440; /* 1 use */
  --ds-c-green-07: #3f8f3f; /* 2 uses */
  --ds-c-green-08: #16a34a; /* 1 use */
  --ds-c-green-09: #4a7c2f; /* 6 uses */
  --ds-c-green-10: #15803d; /* 2 uses */
  --ds-c-green-11: #3f6b2a; /* 2 uses */
  --ds-c-green-12: #274d12; /* 6 uses */

  /* neutral */
  --ds-c-neutral-01: #f4f4f5; /* 1 use */
  --ds-c-neutral-02: #eeeeee; /* 1 use */
  --ds-c-neutral-03: #e4e4e7; /* 2 uses */
  --ds-c-neutral-04: #d4d4d8; /* 1 use */
  --ds-c-neutral-05: #a1a1aa; /* 6 uses */
  --ds-c-neutral-06: #919b9c; /* 36 uses */
  --ds-c-neutral-07: #8a857c; /* 1 use */
  --ds-c-neutral-08: #777777; /* 2 uses */
  --ds-c-neutral-09: #71717a; /* 1 use */
  --ds-c-neutral-10: #666666; /* 8 uses */
  --ds-c-neutral-11: #6a675c; /* 9 uses */
  --ds-c-neutral-12: #555555; /* 7 uses */
  --ds-c-neutral-13: #444444; /* 12 uses */
  --ds-c-neutral-14: #3f3f46; /* 4 uses */
  --ds-c-neutral-15: #3e3b34; /* 6 uses */
  --ds-c-neutral-16: #3a3833; /* 1 use */
  --ds-c-neutral-17: #3a3832; /* 1 use */
  --ds-c-neutral-18: #333333; /* 8 uses */
  --ds-c-neutral-19: #2e2d28; /* 3 uses */
  --ds-c-neutral-20: #27272a; /* 6 uses */
  --ds-c-neutral-21: #262626; /* 1 use */
  --ds-c-neutral-22: #222222; /* 28 uses */
  --ds-c-neutral-23: #1a1a1a; /* 13 uses */
  --ds-c-neutral-24: #1c1c18; /* 1 use */
  --ds-c-neutral-25: #18181b; /* 2 uses */
  --ds-c-neutral-26: #141414; /* 1 use */
  --ds-c-neutral-27: #111110; /* 46 uses */

  /* red */
  --ds-c-red-01: #fef2f2; /* 1 use */
  --ds-c-red-02: #fdf2f0; /* 1 use */
  --ds-c-red-03: #fdeeee; /* 1 use */
  --ds-c-red-04: #fbeaea; /* 1 use */
  --ds-c-red-05: #fce4e4; /* 1 use */
  --ds-c-red-06: #f4e4e4; /* 7 uses */
  --ds-c-red-07: #fecaca; /* 1 use */
  --ds-c-red-08: #f4c9c9; /* 6 uses */
  --ds-c-red-09: #fca5a5; /* 1 use */
  --ds-c-red-10: #ef4444; /* 2 uses */
  --ds-c-red-11: #e14a5e; /* 1 use */
  --ds-c-red-12: #c04a4a; /* 1 use */
  --ds-c-red-13: #dc2626; /* 3 uses */
  --ds-c-red-14: #c23b3b; /* 1 use */
  --ds-c-red-15: #de350b; /* 6 uses */
  --ds-c-red-16: #b03a2e; /* 1 use */
  --ds-c-red-17: #aa3333; /* 12 uses */
  --ds-c-red-18: #9e2a2b; /* 2 uses */
  --ds-c-red-19: #8a2a2a; /* 10 uses */
  --ds-c-red-20: #991b1b; /* 1 use */
  --ds-c-red-21: #a00d24; /* 1 use */
  --ds-c-red-22: #aa0000; /* 9 uses */
  --ds-c-red-23: #8a1f11; /* 2 uses */
  --ds-c-red-24: #5a1010; /* 7 uses */
  --ds-c-red-25: #5c150b; /* 2 uses */
  --ds-c-red-26: #660000; /* 4 uses */

  /* teal */
  --ds-c-teal: #00875a; /* 3 uses */

  /* white */
  --ds-c-white-01: #ffffff; /* 114 uses */
  --ds-c-white-01-a85: color-mix(in srgb, var(--ds-c-white-01) 85%, transparent); /* white-01 at 85% alpha, e.g. hover text over a filled/dark row */
  --ds-c-white-02: #fefefe; /* 4 uses */
  --ds-c-white-03: #fff7f7; /* 1 use */

  /* yellow */
  --ds-c-yellow-01: #faf9f5; /* 4 uses */
  --ds-c-yellow-02: #faf8f2; /* 22 uses */
  --ds-c-yellow-03-a: #fffbebf5; /* 1 use */
  --ds-c-yellow-05: #f6f5ef; /* 10 uses */
  --ds-c-yellow-06: #f7f5ee; /* 2 uses */
  --ds-c-yellow-07: #fffbe6; /* 2 uses */
  --ds-c-yellow-08: #f0efe9; /* 2 uses */
  --ds-c-yellow-09: #fff7d6; /* 5 uses */
  --ds-c-yellow-10: #f3efe2; /* 4 uses */
  --ds-c-yellow-11: #ecebe5; /* 3 uses */
  --ds-c-yellow-12: #efece1; /* 1 use */
  --ds-c-yellow-13: #ece9d8; /* 13 uses */
  --ds-c-yellow-14: #eae6d9; /* 1 use */
  --ds-c-yellow-15: #e4e2d8; /* 6 uses */
  --ds-c-yellow-16: #ece6d0; /* 2 uses */
  --ds-c-yellow-17: #e4e0d2; /* 1 use */
  --ds-c-yellow-18: #e2ddcc; /* 1 use */
  --ds-c-yellow-19: #f7e8b5; /* 7 uses */
  --ds-c-yellow-20: #d8d4c8; /* 8 uses */
  --ds-c-yellow-21: #d8d4c4; /* 1 use */
  --ds-c-yellow-22: #fde68a; /* 1 use */
  --ds-c-yellow-23: #c8c2ac; /* 1 use */
  --ds-c-yellow-24: #b8b4a6; /* 3 uses */
  --ds-c-yellow-25: #aca899; /* 11 uses */
  --ds-c-yellow-26: #5c4500; /* 8 uses */
}

/* ============================================================
   REPAIRED ALIASES (2026-08-29).
   These five tokens were referenced by live rules in components.css
   but were never defined anywhere and carried no var() fallback, so
   those declarations were invalid and dropped by the browser -- the
   affected elements rendered with an inherited colour instead of the
   intended one. Each is now defined from an existing token, so the
   rules work and still re-theme with the rest of the system.
   This is the one place in this change where pixels move, and it
   moves them from broken to correct.
   ============================================================ */
:root {
  --baobab-deep:   var(--baobab-2);
  --wash:          var(--paper-2);
  --hairline-soft: color-mix(in srgb, var(--hairline) 55%, var(--paper));
  --amber:         var(--signal-amber);
  --ink-solid:     var(--ink);
  /* Generic aliases the leave and OMS surfaces were already written against
     (they referenced these names with no fallback, so their declarations were
     dropped too). Mapped onto the portal's own tokens rather than new values. */
  --ds-border:       var(--hairline);
  --ds-bg-surface:   var(--paper);
  --ds-text-muted:   var(--ink-mute);
  --ds-text-heading: var(--ink);
}


/* Second pass, same day: colour literals that arrived with the per-module
   sheets. Merged into the palette above by value, so a colour already named
   is not named twice. */
:root {
  --ds-c-neutral-28: #333330;
  --ds-c-yellow-03: #f3f0e6;
}


/* 2026-09-03 batch-2 review: a native <input type="checkbox|radio|range">
   with no .ds-checkbox/.ds-choice/.ds-range class (e.g. a plain checkbox a
   consumer forgot to style) rendered the browser's default blue accent --
   found live on Order Management/Dealers' "Hide dormant" checkbox. ONE
   global default here, not a per-page fix. */
input[type="checkbox"], input[type="radio"], input[type="range"] {
  accent-color: var(--rp-ink);
}

/* Round 7 live-verify fix (2026-09-02): inside the standalone shell the
   .body is a flex COLUMN, and .page-inner's `margin: 0 auto` overrides the
   default stretch — with no explicit width the wrapper shrank to
   min-content (~64px) and the start page's tile grid collapsed into a
   skinny centered column. An explicit width restores the stretch; the
   1320px max-width + auto margins then center it as intended. */
.portal-shell-standalone > .body > .page-inner { width: 100%; }