/* red-plate.css — THE APPROVED MMD PORTAL DESIGN, as a design-system layer.
   ============================================================================
   Provenance, so this never has to be guessed at again:

     Ben froze this design 2026-08-27 12:36 UTC, amended the buttons flatter at
     14:38, and locked it in as the portal's design system on 2026-08-28 02:25.
     Until 2026-08-29 it had never been written into the design system at all —
     it existed only as one generated page in a /private/tmp session scratchpad.
     That page and its generator are now in the repo at design/approved/, and
     every rule below is lifted from it verbatim, not reinterpreted.

   Ben, 2026-08-29: "its red, grey and black. with 4px radius and very slight
   3d only." That is what this file is. No beige, no cream: the desk is grey,
   the chrome is silver, the ink is near-black, and red appears once per view.

   The token block below is the frozen source's own :root, copied value for
   value. It is the palette of record for the portal.
   ============================================================================ */

/* The --rp-* primitives this whole file (and every other consumer in the
   design system) relies on -- palette, radius/ctl geometry, gradient stops
   and tints -- now live ONCE in portal-core.css's single palette block
   (moved there 2026-09-02, MMDB-2431 central-DS consolidation: this exact
   :root block used to be duplicated here). portal-core.css loads first, so
   every name is already defined by the time this file's rules run; nothing
   below needs to change to pick that up. */

/* ============================================================================
   1. The merged top bar. One strip: band + app tabs + tools -- never a
   second copy of the SAME bar (the "two status/nav bars" duplication Ben
   asked collapsed 2026-08-27). A section sub-menu strip (.gsp-menubar, see
   section 8 below) sits directly under this bar as of 2026-08-31 -- that is
   a genuinely different, subordinate row (which screen in the selected app),
   not a duplicate of this one (which app), the same split OM/Procurement/
   Master Data already carry between their own titlebar and menubar.
   Ben, 2026-08-30: "the red bar on top should be black, actually... always
   the active window should be red, the others black or grey." That amendment
   made the band above black (--rp-black-* tokens) for about three days.
   REVERTED 2026-09-02 (Ben, live): the band is the reference band again --
   red gradient, matching design/approved/build.mjs's `.topbar` and
   rollout-preview.html verbatim (the canonical frozen snapshot from
   2026-08-27/28, never itself edited): `linear-gradient(180deg,#D4213F 0%,
   var(--red) 55%,#A50D26 100%)`. The --rp-red-lift/--rp-red/--rp-red-sink
   tokens below are that exact same gradient by value (#D4213F/#C8102E/
   #A50D26) -- they were already sitting in the consolidated palette,
   unused by this rule, the whole time the 08-30 amendment was live. Red
   stays reserved for the ACTIVE app tab (white plate, red top edge) and the
   front window's title bar too -- both unrelated to this band's own colour,
   which is chrome, not a focus state -- so this is not "three reds
   competing", it is one accent colour used consistently by three different
   chrome elements. If Ben changes his mind again, change this one gradient
   back to the --rp-black-* tokens (section 3 below) and nothing else.
   ========================================================================= */
/* REVERTED TO BLACK AGAIN (MMDB-2684, Ben 2026-09-05: "top bar black
   please"), superseding the 2026-09-02 revert-to-red note above -- same
   --rp-black-* gradient and bevel the window/app titlebars already use for
   their own back-window state (.ds-window-titlebar, .olp .gsp-titlebar
   below), so this is one already-approved black, not a new one. Ink stays
   white/silver (color: var(--rp-white), unchanged); the active section tab
   is unaffected -- it is its own white plate with a red top edge either
   way (`.ds-tb-tab.active` below), never the band's own colour. If this
   flips again, change only this one gradient + box-shadow pair back to the
   red-lift/red/red-sink block two commits up and nothing else. */
.ds-topbar {
  display: flex; align-items: stretch; height: 42px; flex: none;
  position: relative; z-index: 30; color: var(--rp-white);
  background: linear-gradient(180deg, var(--rp-black-lift) 0%, var(--rp-black-1) 10%, var(--rp-black) 55%, var(--rp-black) 88%, var(--rp-black-foot) 100%);
  box-shadow: inset 0 1px 0 var(--rp-black-chrome-hi),
              inset 0 -1px 0 var(--rp-black-chrome-lo);
  border-bottom: 1px solid var(--rp-black);
}
/* MMDB-2682: the brand is now a real Link (PortalDesk.tsx), not a plain
   div -- text-decoration/cursor stated explicitly rather than relying on
   the browser's default anchor look, same as every other clickable chrome
   element in this file. */
.ds-tb-brand { display: flex; align-items: center; gap: 9px; padding: 0 16px; flex: none;
  border-right: 1px solid rgba(255,255,255,.24); text-decoration: none; cursor: pointer; }
/* MMDB-2683 (Ben, 2026-09-05: "make the logo larger, it's currently tiny"):
   14px read as a sliver against a 42px bar. 30px sits inside the same
   42px band with 6px of clearance top and bottom -- comfortably inside the
   28-32px Ben asked for, no bar height change needed. */
.ds-tb-brand .ds-tb-mark { height: 30px; width: auto; fill: var(--rp-white); flex: none; display: block; }
.ds-tb-brand .ds-tb-app-name { font-family: var(--ds-font-window); font-weight: 700; font-size: 12px; letter-spacing: -0.01em; }
/* MMDB-2684 (Ben, 2026-09-05: "top bar black please"): the wordmark span
   sets no colour of its own, so it inherited straight off its own <a>
   element -- shell.css's global `a{color:var(--ink)}` -- not off .ds-topbar's
   white (inheritance only reaches past an element that sets nothing itself;
   a direct rule on the <a> always wins over a colour merely inherited from
   an ancestor). Result: near-black ink text on the now-black band, next to
   the MMD mark's own explicit `fill: var(--rp-white)` two lines up --
   effectively invisible (see MMDB-2684 evidence, f1-finance.png/
   f5-procurement2.png). Scoped to .ds-topbar rather than the bare
   .ds-tb-app-name class: the same class also renders in the design-system
   gallery (design-system/components/page.tsx) outside any .ds-topbar
   ancestor, on a light card, where the inherited dark ink is correct and
   must stay untouched. rgba(255,255,255,.86) is not a new value -- it is
   the exact "muted white on black" already carried by .ds-tb-tab (inactive
   tabs) and .ds-tb-who on this same bar, one step below the mark's full
   white. Specificity (0,3,0) beats both this file's own rule above and
   components.css's identical (0,2,0) copy regardless of load order. */
.ds-topbar .ds-tb-brand .ds-tb-app-name { color: rgba(255, 255, 255, .86); }
/* Ben: "its cut off." Nine sections (HR / Lead to Cash / Strategy /
   Procurement / Finance / Master Data / Reporting / IT / General) plus
   search/user/Sign-out no longer fit one row at 1280px viewport
   width once every section has a tab. components.css (loaded before this
   sheet) ALREADY carries a working
   `.ds-tb-apps{overflow-x:auto;flex:1 1 0;min-width:0}` from the earlier
   letterpress conversion -- this red-plate.css override was the
   regression: `overflow:hidden` (no flex-basis override) beat it in the
   cascade (red-plate.css loads last) and silently clipped both the tab
   strip and the tools after it. Restoring overflow-x:auto here (with
   flex:1 1 0, matching components.css) makes the strip scrollable, but the
   total tab content and the available box width sit only ~30-40px apart at
   this viewport, which is JUST enough overflow for a scrollbar to appear
   but NOT enough scroll range for the last tab (General) to ever be fully
   revealed -- confirmed live on portal-test (verified with a genuinely
   fresh, uncached Camofox profile, not a caching artifact): three
   different scroll-targeting strategies in PortalDesk.tsx (scrollIntoView
   nearest/center, then explicit rect math) all converged on the exact same
   clamped scrollLeft, because the browser has nowhere further to scroll to
   -- the fix has to add scrollable range, not aim more precisely within a
   range that is already maxed out. The 96px right-padding below is pure
   buffer past the last tab so the true max scroll always has room to
   spare; PortalDesk.tsx's reveal effect still does the job of scrolling a
   newly-active tab into that now-adequate range. */
.ds-tb-apps { display: flex; align-items: stretch; gap: 2px; padding: 0 96px 0 6px;
  flex: 1 1 0; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.4) transparent; }
.ds-tb-apps::-webkit-scrollbar { height: 4px; }
.ds-tb-apps::-webkit-scrollbar-track { background: transparent; }
.ds-tb-apps::-webkit-scrollbar-thumb { background: rgba(255,255,255,.4); border-radius: 2px; }
/* Ben, 2026-08-30 annotated review: "align middle and match design". The
   wrap inherited components.css's inline-block, so each tab was only as
   tall as its own text and sat against the TOP of the 42px bar while the
   active plate (margin 6px, full height) sat centred -- two baselines in
   one row. The wrap stretches to the bar now and the tab fills it, so
   every label centres on the same line as the active plate. */
.ds-tb-apps .mlp-menu-wrap { flex: none; display: flex; align-items: stretch; }

.ds-tb-tab { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 100%;
  font-family: var(--ds-font-window); font-size: 11.5px;
  color: rgba(255,255,255,.86); white-space: nowrap; }
.ds-tb-tab .n { font-family: var(--font-mono); font-size: 8.5px; padding: 0 4px;
  line-height: 13px; border: 1px solid rgba(255,255,255,.55);
  color: var(--rp-white); border-radius: var(--rp-radius); }
/* The active app reads as a white plate with a red top edge — the same
   treatment the front window's title bar gets, so the two rhyme. */
.ds-tb-tab.active {
  /* the plate keeps its 6px inset inside the now full-height tab */
  height: calc(100% - 12px);
  margin: 6px 3px; padding: 0 12px; border-radius: var(--rp-radius);
  font-weight: 700; color: var(--rp-ink);
  background: linear-gradient(180deg, var(--rp-white) 0%, var(--rp-white) 62%, var(--rp-silver) 100%);
  border-top: 3px solid var(--rp-red);
  box-shadow: 0 1px 3px rgba(0,0,0,.20), inset 0 -1px 0 rgba(35,34,30,.08);
}
.ds-tb-tab.active .n { border-color: var(--rp-ink); color: var(--rp-ink); background: var(--rp-silver); }
/* MMDB-2684: "hover states legible" -- an inactive tab had no hover
   feedback at all against either the old red or the new black band. A
   soft white overlay reads clearly on both. */
.ds-tb-tab:not(.active):hover { color: var(--rp-white); background: var(--rp-black-chrome-hi); }

.ds-tb-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 14px; flex: none; }
.ds-tb-btn { height: 24px; padding: 0 10px; display: flex; align-items: center;
  border-radius: var(--rp-radius); font-family: var(--ds-font-window); font-size: 10.5px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); color: var(--rp-white); }
.ds-tb-btn:not(:disabled):hover { background: var(--rp-tb-hover-fill); border-color: var(--rp-tb-hover-line); }
.ds-tb-who { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(255,255,255,.86); }
.ds-tb-signout { font-size: 10px; color: var(--rp-white); text-decoration: underline; text-underline-offset: 2px; }

/* Topbar avatar + account menu (Ben, 2026-08-30: "replace [email] w/
   avatar"). Reuses .ds-menu/.ds-menu-card/.directory-photo* verbatim from
   Sidebar.tsx's own avatar menu -- only the popover's anchor direction
   changes (topbar opens downward, the sidebar's opens upward). */
.ds-tb-user-wrap { position: relative; flex: none; }
.ds-tb-avatar { height: 26px; width: 26px; padding: 0; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ds-tb-avatar:hover { border-color: rgba(255,255,255,.60); }
.ds-tb-user-menu { top: 100%; bottom: auto; left: auto; right: 0;
  margin-top: 8px; margin-bottom: 0; width: 240px; }

/* ============================================================================
   2. The desk and its task bar.
   ========================================================================= */
.mlp-desk { position: relative; background: var(--rp-desk); flex: 1; min-height: 0; overflow: hidden; }
/* The bottom .mlp-taskbar "Open" chip row is removed, 2026-08-31 -- every
   open screen is already a floating window with its own titlebar, and the
   section sub-menu strip (section 8 below) is now the tab surface, so a
   second list of the same open screens at the bottom of the page was
   redundant. See PortalDesk.tsx for the honest removal. */

/* MMDB-2431 QC fix (2026-09-02): `.gsp-taskbar`/`.gsp-taskbar-settings`
   (gsp-structural.css) are a DIFFERENT, still-live taskbar -- ProcDesktop.tsx
   (Procurement2)'s bottom bar for detached record popups -- and were never
   reconciled to Red Plate at all: gsp-structural.css's own rules paint them
   with the old XP blue gradient (--ds-c-blue-*), one of the "no blue chrome"
   violations Ben's 2026-09-02 chrome-correction pass called out (matching
   design/approved/build.mjs's `.s-task` -- silver ground, hairline top rule,
   plain white/ink action tile, no blue). The chips inside are already plain
   `.gsp-tool` buttons and already correct -- only the bar itself and its
   floating Settings button needed this. */
.gsp-taskbar { background: var(--rp-silver); border-top: 1px solid var(--rp-line-2); }
.gsp-taskbar-settings {
  font: inherit; color: var(--rp-ink);
  background: var(--rp-white); border: 1px solid var(--rp-line-3); border-radius: var(--rp-radius);
}
.gsp-taskbar-settings:hover { background: var(--rp-silver-2); border-color: var(--rp-border-strong); }

/* ============================================================================
   3. Windows. Two families: black-ink for a back window, red-topped white
      for the front one. Slight 3D on the title bar only — never the button.
   ========================================================================= */
.ds-window { background: var(--rp-white); border: 1px solid var(--rp-border-strong);
  display: flex; flex-direction: column; border-radius: var(--rp-radius);
  overflow: hidden; box-shadow: 0 1px 2px rgba(35,34,30,.14); }
.mlp-float-host[data-focused="true"] .ds-window { border-color: var(--rp-ink-mute); box-shadow: 0 6px 16px rgba(35,34,30,.26); }

.ds-window-titlebar {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 6px 0 12px;
  flex: none; color: var(--rp-white);
  background: linear-gradient(180deg, var(--rp-black-lift) 0%, var(--rp-black-1) 10%, var(--rp-black) 55%, var(--rp-black) 88%, var(--rp-black-foot) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.65);
  border-bottom: 1px solid var(--rp-black);
}
.mlp-float-host[data-focused="true"] .ds-window-titlebar {
  height: 41px; color: var(--rp-ink);
  border-top: 3px solid var(--rp-red); border-bottom: 1px solid var(--rp-line-2);
  background: linear-gradient(180deg, var(--rp-white) 0%, var(--rp-white) 62%, var(--rp-silver) 100%);
  box-shadow: inset 0 1px 0 var(--rp-white), inset 0 -2px 0 rgba(35,34,30,.10);
}
.ds-window-titlebar .ds-window-title { font-family: var(--ds-font-window); font-weight: 600; font-size: 12.5px; }
.mlp-float-host[data-focused="true"] .ds-window-titlebar .ds-window-title { font-weight: 700; }

.ds-ctl-btn { width: var(--rp-ctl); height: var(--rp-ctl); display: flex;
  align-items: center; justify-content: center; border-radius: var(--rp-radius);
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.42); }
.mlp-float-host[data-focused="true"] .ds-window-titlebar .ds-ctl-btn { background: rgba(0,0,0,.03);
  box-shadow: inset 0 -1px 0 rgba(35,34,30,.14);
  border: 1px solid rgba(35,34,30,.22); }
.ds-ctl-btn svg { display: block; }
.ds-ctl-btn-close:hover { background: var(--rp-red); border-color: var(--rp-red); color: var(--rp-white); }

.ds-window-body { flex: 1; min-height: 0; overflow: auto; background: var(--rp-white); }

/* ============================================================================
   4. Buttons. FLAT — Ben, 2026-08-27: "lets flatten the buttons a bit pls.
      its a bit too retro like that." Solid fill, 1px border, and a hairline
      inset bottom edge. The 3D stays on title bars.
   ========================================================================= */
.ds-button, .btn { padding: 4px 12px; font-family: var(--ds-font-window); font-size: 10.5px;
  font-weight: 600; border-radius: var(--rp-radius); line-height: 1.6;
  display: inline-flex; align-items: center; cursor: pointer; }
.ds-button-primary, .btn.primary { background: var(--rp-red); color: var(--rp-white);
  border: 1px solid var(--rp-red); box-shadow: inset 0 -1px 0 rgba(0,0,0,.18); }
.ds-btn-primary-ink { background: var(--rp-black); color: var(--rp-white);
  border: 1px solid var(--rp-black); box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }
.ds-button-secondary, .btn.ghost { background: var(--rp-silver-2); color: var(--rp-ink);
  border: 1px solid var(--rp-line-3); font-weight: 500;
  box-shadow: inset 0 -1px 0 rgba(35,34,30,.10); }
.ds-button-danger, .btn.danger { background: var(--rp-danger-bg); color: var(--rp-red-deep);
  border: 1px solid var(--rp-red-deep); font-weight: 500;
  box-shadow: inset 0 -1px 0 rgba(142,11,32,.12); }
/* CDS unification pass (2026-09-02, Ben: "why do they all look the same" --
   the answer was duplication, not a rendering bug: .btn is the SAME
   general-purpose action button as .ds-button under a second name (337
   uses/77 files vs 662 uses/163 files -- git grep, 2026-09-02), but this
   file -- the approved layer loaded LAST so its button rules win
   (src/lib/designSystems.ts) -- never targeted .btn at all. .btn's base
   look came from components.css (already red-plate-flavoured), but its
   .primary/.ghost/.danger modifiers fell through to portal-core.css's
   older editorial palette (var(--ink)/var(--baobab) hover only) -- a real
   color-token bug, not just a naming duplicate. The three grouped
   selectors above are the fix: pure selector-list additions, zero property
   changes to .ds-button's own rules, so .ds-button is visually byte-for-
   byte unchanged and .btn now resolves to the exact same Red Plate skin.
   .ds-button stays the one canonical name for new code; .btn keeps working
   for its 77 existing consumer files with no migration required. Full
   app-level migration off .btn is NOT done in this pass (77 files is too
   large a blast radius for one unattended sweep) -- tracked as a backlog
   follow-up, not a silent gap.
   .ds-btn (components.css) and .gsp-tool (this file, section 4b below)
   were investigated and are genuinely NOT duplicates: .ds-btn is a
   deliberately quiet, single-consumer inline-retry control (see its own
   comment in components.css, P2-40.1), and .gsp-tool is the toolbar/ribbon
   tool-button family (compact, lives inside .gsp-toolbar/.ds-ribbon), a
   different layout context from a form/action .ds-button. Neither is
   merged here -- see the gallery's Buttons section for the stated
   reasoning next to each. */

/* ============================================================================
   5. Tables. Silver head, mono uppercase labels, hairline grid, dense rows.
   ========================================================================= */
.ds-table { width: 100%; border-collapse: collapse; font-size: 11.5px; color: var(--rp-ink-soft); }
.ds-table th { font-family: var(--font-mono); font-size: var(--rp-fs-th); font-weight: var(--rp-fw-th);
  letter-spacing: var(--rp-ls-th); text-transform: uppercase; text-align: left;
  padding: 5px 9px; white-space: nowrap; background: var(--rp-silver); color: var(--rp-ink);
  border-bottom: 1px solid var(--rp-line-2); border-right: 1px solid var(--rp-line); }
.ds-table th.ds-num, .ds-table td.ds-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table td { padding: 5px 9px; border-bottom: 1px solid var(--rp-line);
  border-right: 1px solid var(--rp-line); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.ds-table tr.is-marked td:first-child { box-shadow: inset 3px 0 0 var(--rp-red); }

/* Status pills: grey by default, because red is reserved. */
.ds-pill { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: var(--rp-radius);
  background: var(--rp-silver); color: var(--rp-ink-soft); border: 1px solid var(--rp-line-3); }
.ds-pill--warn { background: var(--rp-attention-bg); color: var(--rp-red-deep); border-color: var(--rp-red-deep); }

/* ============================================================================
   6. Record sheets inside a window — the paper the data sits on.
   ========================================================================= */
.ds-review-block { background: var(--rp-paper); padding: 14px 16px; }
.ds-infolist-row { display: flex; gap: 14px; padding: 5px 0; border-bottom: 1px solid var(--rp-line); }
.ds-infolist-row .ds-infolist-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--rp-ink-mute); width: 120px; flex: none; }
.ds-infolist-row .ds-review-value { font-size: 12px; color: var(--rp-ink); }
.ds-input { font-family: var(--ds-font-window); font-size: 11.5px; padding: 5px 8px;
  border: 1px solid var(--rp-line-3); border-radius: var(--rp-radius);
  background: var(--rp-white); color: var(--rp-ink); }

/* ============================================================================
   6. /app itself shows the plain grey desk.
   The approved source has no index screen — it only ever shows the grey desk
   with windows on it (.s-desk, background var(--desk)). The portal used to
   paint a full-bleed white "index" sheet of every section's items over that
   desk (PortalIndex.tsx); that sheet, its class rules and its component are
   removed 2026-08-31 (Ben: "do not show the index sheet") -- /app now
   renders exactly what the approved source does, the bare desk, with the
   section sub-menu strip (section 8 below) as the only navigation surface.
   ========================================================================= */
.mlp .mlp-work { background: var(--rp-desk); }
.mlp .mlp-screen-body { background: transparent; }

/* ============================================================================
   7. Order Management — the approved chrome bound to the classes the module
      actually renders (.olp .gsp-*). Ben, 2026-08-30: "i want just 2 screens
      changed now." The module is one parent window (black ink title bar)
      holding a silver tab strip over the grey desk; every floating window is
      the front window (red-topped white) while focused and black ink when
      not. letterpress-order-mgmt.css carries !important on the title bars,
      table heads and filter bar, so the matching rules here do too — this
      sheet loads last and must win.
   ========================================================================= */
.gsp-app {
  font-family: var(--ds-font-window); font-size: 12px; color: var(--rp-ink); background: var(--rp-desk);
}
.gsp-app > .gsp-window { border: 0; border-radius: 0; background: var(--rp-desk); }
.gsp-matrix { background: var(--rp-desk); }
.gsp-window {
  border: 1px solid var(--rp-border-strong); background: var(--rp-white);
  border-radius: var(--rp-radius); overflow: hidden;
}
.olp [data-window-kind] > .gsp-window { box-shadow: 0 1px 2px rgba(35,34,30,.14); }
.olp [data-window-kind] > .gsp-window[data-focused="true"] {
  border-color: var(--rp-ink-mute); box-shadow: 0 6px 16px rgba(35,34,30,.26);
}

/* Title bars: black ink by default (parent window, back windows) ... */
.olp .gsp-titlebar, .olp [data-window-id] .gsp-titlebar {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 6px 0 12px !important;
  font-family: var(--ds-font-window) !important; font-weight: 600; font-size: 12.5px; letter-spacing: 0;
  color: var(--rp-white) !important;
  background: linear-gradient(180deg, var(--rp-black-lift) 0%, var(--rp-black-1) 10%, var(--rp-black) 55%, var(--rp-black) 88%, var(--rp-black-foot) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.65);
  border-bottom: 1px solid var(--rp-black);
}
/* ... and the red-topped white plate on the window that has focus. */
.olp [data-window-kind] > .gsp-window[data-focused="true"] > .gsp-titlebar {
  height: 41px; color: var(--rp-ink) !important; font-weight: 700;
  border-top: 3px solid var(--rp-red); border-bottom: 1px solid var(--rp-line-2);
  background: linear-gradient(180deg, var(--rp-white) 0%, var(--rp-white) 62%, var(--rp-silver) 100%) !important;
  box-shadow: inset 0 1px 0 var(--rp-white), inset 0 -2px 0 rgba(35,34,30,.10);
}
/* The app-level frame (Order Management, Master Data, ...) is the ROOT of
   its own page -- it never sits behind a sibling to be "unfocused" against,
   because the [data-focused="true"] contrast only exists one level down,
   between windows sharing a matrix. Left on the plain rule above, this bar
   stayed permanently black -- correct for a back window, wrong for the only
   window on the page, and it read as a stray second nav bar under the
   portal's own red top bar rather than as a window title. It gets the same
   red-topped white plate unconditionally. */
.olp.gsp-app > .gsp-window > .gsp-titlebar {
  height: 41px; color: var(--rp-ink) !important; font-weight: 700;
  border-top: 3px solid var(--rp-red); border-bottom: 1px solid var(--rp-line-2);
  background: linear-gradient(180deg, var(--rp-white) 0%, var(--rp-white) 62%, var(--rp-silver) 100%) !important;
  box-shadow: inset 0 1px 0 var(--rp-white), inset 0 -2px 0 rgba(35,34,30,.10);
}
.olp.gsp-app > .gsp-window > .gsp-titlebar .gsp-headcell {
  background: var(--rp-silver); color: var(--rp-ink-soft); border-color: var(--rp-line-3);
}
.olp.gsp-app > .gsp-window > .gsp-titlebar .ds-ctl-btn {
  background: rgba(0,0,0,.03); box-shadow: inset 0 -1px 0 rgba(35,34,30,.14); border: 1px solid rgba(35,34,30,.22);
}
/* The approved title bar carries a mono crumb, not an icon square. */
.olp .gsp-titlebar-icon {
  width: auto; height: auto; background: transparent; border: 0; border-radius: 0;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: inherit; opacity: .72;
}
.olp .gsp-titlebar .gsp-headcell {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--rp-radius); font-weight: 600;
  background: rgba(255,255,255,.14); color: inherit; border: 1px solid rgba(255,255,255,.35);
}
.olp .gsp-window[data-focused="true"] > .gsp-titlebar .gsp-headcell {
  background: var(--rp-silver); color: var(--rp-ink-soft); border-color: var(--rp-line-3);
}
.olp .gsp-titlebar .ds-ctl-btn { color: inherit; }
.olp .gsp-window[data-focused="true"] > .gsp-titlebar .ds-ctl-btn {
  background: rgba(0,0,0,.03); box-shadow: inset 0 -1px 0 rgba(35,34,30,.14); border: 1px solid rgba(35,34,30,.22);
}

/* Module tab strip: silver, the current screen as a white plate with the red top edge. */
.gsp-menubar {
  background: var(--rp-silver); border-bottom: 1px solid var(--rp-line-2);
  padding: 5px 8px 0; gap: 2px; align-items: flex-end;
}
.gsp-menubar-scope { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; align-items: flex-end; }
.gsp-menubar-sep { background: var(--rp-line-2); }
.gsp-menu {
  font-family: var(--ds-font-window); font-size: 11.5px; color: var(--rp-ink-soft);
  padding: 5px 12px 6px; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
}
.gsp-menu[data-active="true"] {
  background: var(--rp-white); color: var(--rp-ink); font-weight: 700;
  border-color: var(--rp-line-2); border-top: 3px solid var(--rp-red); padding-top: 3px;
  box-shadow: 0 -1px 2px rgba(35,34,30,.08);
}
/* Record tabs (Ben, 2026-08-31: records default to a tab, same strip as
   the screens, "make it tab that can be disconnected"). Same silver /
   white-plate / red-top-edge language as every other tab here -- `[data-
   active="true"]` above already applies unchanged, this only tightens the
   padding a plain screen tab does not need, to leave room for the inline
   close x. Explicit here (not left to gsp-structural.css's own `.gsp-menu-
   record`) because this selector's specificity already wins that padding. */
.gsp-menu-record { padding: 5px 3px 6px 12px; gap: 4px; }
.gsp-menu-record-label { padding: 0; }

/* Toolbar and its flat buttons. */
.gsp-toolbar { background: var(--rp-toolbar); border-bottom: 1px solid var(--rp-line-2); padding: 6px 10px; gap: 8px; }
.gsp-toolbar-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rp-ink-mute); }
.gsp-toolbar-note { color: var(--rp-ink-mute); font-size: 11px; }
.gsp-toolbar-sep { background: var(--rp-line-2); }
.gsp-tool {
  font-family: var(--ds-font-window); font-size: 10.5px; font-weight: 500; line-height: 1.6;
  padding: 3px 12px; border-radius: var(--rp-radius);
  background: var(--rp-silver-2); color: var(--rp-ink); border: 1px solid var(--rp-line-3);
  box-shadow: inset 0 -1px 0 rgba(35,34,30,.10);
}
.gsp-tool:hover { background: var(--rp-white); border-color: var(--rp-border-strong); }
.gsp-tool[data-on="true"] { background: var(--rp-ink); color: var(--rp-white); border-color: var(--rp-ink); box-shadow: inset 0 -1px 0 rgba(0,0,0,.35); }
.gsp-tool[data-primary="true"] { background: var(--rp-red); color: var(--rp-white); border-color: var(--rp-red); font-weight: 600; box-shadow: inset 0 -1px 0 rgba(0,0,0,.18); }
.gsp-tool[data-primary="true"]:hover { background: var(--rp-red-deep); border-color: var(--rp-red-deep); }
.gsp-tool:disabled, .gsp-tool:disabled:hover { background: var(--rp-silver-2); color: var(--rp-ink-mute); border-color: var(--rp-line-2); box-shadow: none; opacity: .7; }

/* Filter bar: silver with mono labels, never a black band. */
.gsp-section-head {
  background: var(--rp-silver) !important; color: var(--rp-ink) !important;
  border: 0; border-bottom: 1px solid var(--rp-line-2); padding: 5px 10px; gap: 8px; align-items: center;
  font-family: var(--ds-font-window); font-size: 11px;
}
.gsp-section-head-note {
  color: var(--rp-ink-mute) !important; font-family: var(--font-mono); font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.gsp-input, .gsp-select, .gsp-textarea {
  font-family: var(--ds-font-window); font-size: 11px; padding: 3px 8px;
  border: 1px solid var(--rp-line-3); border-radius: var(--rp-radius);
  background: var(--rp-white); color: var(--rp-ink); box-shadow: none;
}
.gsp-input:focus, .gsp-select:focus, .gsp-textarea:focus { border-color: var(--rp-ink-mute); outline: 0; }
.gsp-select-tight { font-size: 10.5px; padding: 2px 6px; }

/* Tables: silver head, mono uppercase labels, hairline grid, no zebra.
   MMDB-2431 QC fix (2026-09-02): this used to be a bare `thead th, .gsp-grid
   th` rule with !important -- ungating .olp/.plp made it apply to EVERY
   <thead><th> in the portal, forcing this fill onto .ds-records-compact,
   .ib-table, .ec-table, .md-table and .ds-financial-matrix regardless of
   their own styling (52+ consumer files, none of them .gsp-grid tables).
   The design intent (silver heads portal-wide) was correct; the mechanism
   was not. Each of those families now carries the same Red Plate header
   spec at its OWN source definition in components.css instead, and this
   rule is scoped to .gsp-grid (the class the markup actually carries), no
   !important needed once it is no longer fighting a bare element selector. */
.gsp-grid { font-size: 11.5px; color: var(--rp-ink-soft); }
.gsp-grid th {
  background: var(--rp-silver); color: var(--rp-ink);
  border: 0; border-bottom: 1px solid var(--rp-line-2); border-right: 1px solid var(--rp-line);
  font-family: var(--font-mono); font-size: var(--rp-fs-th); font-weight: var(--rp-fw-th); letter-spacing: var(--rp-ls-th); text-transform: uppercase;
  padding: 5px 9px; text-align: left;
}
.gsp-grid td.ds-num, .gsp-grid th.ds-num { text-align: right; font-variant-numeric: tabular-nums; }
.gsp-grid td { padding: 5px 9px; border-right: 1px solid var(--rp-line); border-bottom: 1px solid var(--rp-line); background: var(--rp-white); }
.gsp-grid tr:nth-child(even) td { background: var(--rp-white); }
.gsp-grid tbody tr[data-click="true"]:hover td { background: var(--rp-silver-2); }
.gsp-grid tr[data-click="true"] td:first-child::before { content: none; }
.gsp-grid tr[data-ref="true"] td { box-shadow: inset 3px 0 0 var(--rp-red); background: var(--rp-white); }
.gsp-pane-body { background: var(--rp-white); }
.gsp-muted { color: var(--rp-ink-mute); }

/* Status bar: silver strip, grey mono pills; the window chip carries the red edge only while it is the one in front. */
.gsp-statusbar { background: var(--rp-silver); border-top: 1px solid var(--rp-line-2); color: var(--rp-ink-mute); padding: 4px 8px; gap: 6px; }
.gsp-statusbar-cell, .gsp-statusbar-evidence {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--rp-radius);
  background: var(--rp-white); color: var(--rp-ink-soft); border: 1px solid var(--rp-line-3);
}
.gsp-statusbar > .gsp-tool {
  background: var(--rp-white); color: var(--rp-ink-soft); border: 1px solid var(--rp-line-3);
  border-radius: var(--rp-radius); padding: 2px 10px; box-shadow: none;
}
.gsp-statusbar > .gsp-tool:hover { border-color: var(--rp-border-strong); }
.gsp-statusbar > .gsp-tool[data-on="true"] {
  background: var(--rp-white); color: var(--rp-ink); font-weight: 700;
  border-color: var(--rp-line-3); box-shadow: inset 3px 0 0 var(--rp-red);
}

/* Buttons inside record windows: flat, red only for the default action. */
.gsp-btn {
  font-family: var(--ds-font-window); font-size: 10.5px; font-weight: 500; line-height: 1.6;
  padding: 4px 12px; border-radius: var(--rp-radius);
  background: var(--rp-silver-2); color: var(--rp-ink); border: 1px solid var(--rp-line-3);
  box-shadow: inset 0 -1px 0 rgba(35,34,30,.10);
}
.gsp-btn:hover { background: var(--rp-white); border-color: var(--rp-border-strong); }
.gsp-btn[data-default="true"], .gsp-btn[data-default="true"]:hover {
  background: var(--rp-red); color: var(--rp-white); border-color: var(--rp-red); font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.18);
}
.gsp-btnrow { border-top: 1px solid var(--rp-line-2); background: var(--rp-toolbar); }

/* ============================================================================
   7b. Procurement — ONE tab row, bound to the classes the module actually
       renders (.plp .proc-tab-row / .proc-screen-tab / .proc-record-tab /
       .proc-tab-launcher). Ben, 2026-09-01 (round 6, on the screenshot):
       "3 tabs looks confusing" -- superseding the 2026-08-31 shape directly
       below (a five-category row PLUS that category's own screens as a
       second row). One strip now: `.proc-tab-launcher` (category access,
       ProcDesktop.tsx's `ProcTabLauncher` -- a `.gsp-menu-drop` flyout, see
       section-generic rules in gsp-structural.css, no new dropdown
       mechanics here) followed by every OPEN screen tab and open record
       tab, same white-plate/red-top-edge language section 7 above gives
       Order Management's own module tabs -- not procurement's black .plp
       skin (letterpress-procurement.css), which still owns the black title
       bars and black table heads elsewhere on the same screens, untouched
       by this section. No second colour system: every value below is an
       existing --rp-* token, none new.
   ========================================================================= */
.plp .proc-tab-row {
  background: var(--rp-silver); border-bottom: 1px solid var(--rp-line-2);
  padding: 5px 8px 0; gap: 2px; align-items: flex-end;
}
.plp .proc-screen-tab, .plp .proc-record-tab {
  font-family: var(--ds-font-window); font-size: 11.5px; color: var(--rp-ink-soft);
  padding: 5px 12px 6px; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--rp-radius) var(--rp-radius) 0 0; background: transparent;
}
.plp .proc-screen-tab:hover, .plp .proc-record-tab:hover {
  background: var(--rp-silver-2); color: var(--rp-ink);
}
.plp .proc-screen-tab[data-active="true"], .plp .proc-record-tab[data-active="true"] {
  background: var(--rp-white); color: var(--rp-ink); font-weight: 700;
  border-color: var(--rp-line-2); border-top: 3px solid var(--rp-red); padding-top: 3px;
  box-shadow: 0 -1px 2px rgba(35,34,30,.08);
}
.plp .proc-screen-tab[data-active="true"]:hover, .plp .proc-record-tab[data-active="true"]:hover {
  background: var(--rp-white);
}
/* Record tabs (Ben, 2026-08-31: records default to a tab, same strip as the
   screens, "make it tab that can be disconnected"). `.proc-record-tab`
   above already carries the shared silver/white-plate/red-edge look; this
   only tightens the right-hand padding a plain screen tab does not need,
   to leave room for the inline close x. */
.plp .proc-record-tab { padding: 5px 3px 6px 12px; display: inline-flex; align-items: center; gap: 4px; }
.plp .proc-record-tab .gsp-menu-record-label { padding: 0; color: inherit; font: inherit; }

/* The launcher (round 6, 2026-09-01): one compact plain-text control, NOT a
   full white-plate tab -- it stays visually smaller than the tabs beside it
   on purpose, so it reads as "open the menu" rather than "a screen". A
   silver/white pill (same idiom section 7's own `.olp .gsp-statusbar >
   .gsp-tool[data-on="true"]` already uses for an active toggle: a plain
   pill, red only as a left-edge stripe when engaged) rather than a second
   white-plate-red-top-edge tab -- one accent language per row, not two. */
.plp .proc-tab-launcher {
  font-family: var(--ds-font-window); font-size: 11px; font-weight: 600;
  color: var(--rp-ink-soft); background: var(--rp-white); border: 1px solid var(--rp-line-3);
  border-radius: var(--rp-radius); padding: 4px 10px; margin: 0 6px 5px 0; cursor: pointer;
}
.plp .proc-tab-launcher:hover { border-color: var(--rp-border-strong); color: var(--rp-ink); }
.plp .proc-tab-launcher[data-open="true"] {
  color: var(--rp-ink); border-color: var(--rp-border-strong);
  box-shadow: inset 3px 0 0 var(--rp-red);
}

/* ============================================================================
   8. The section sub-menu strip — the SAME tab language Order Management
      uses for its own screens (section 7's ".olp .gsp-menubar/.gsp-menu",
      reused verbatim rather than reinvented): a silver bar, the selected
      item as a white plate with the red top edge. Scoped to `.mlp` because
      PortalDesk renders it inside the portal shell root (class "mlp"), not
      inside an ".olp" module frame -- same class names as section 7, same
      cascade layer, different ancestor. Replaces the topbar's old dropdown
      panel entirely (Ben, 2026-08-31: "only show the items from the
      selected section as sub-menu").
   ========================================================================= */
.mlp .gsp-menubar {
  background: var(--rp-silver); border-bottom: 1px solid var(--rp-line-2);
  padding: 5px 8px 0; gap: 2px; align-items: flex-end;
}
.mlp .gsp-menu {
  font-family: var(--ds-font-window); font-size: 11.5px; color: var(--rp-ink-soft);
  padding: 5px 12px 6px; border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
}
.mlp .gsp-menu[data-active="true"] {
  background: var(--rp-white); color: var(--rp-ink); font-weight: 700;
  border-color: var(--rp-line-2); border-top: 3px solid var(--rp-red); padding-top: 3px;
  box-shadow: 0 -1px 2px rgba(35,34,30,.08);
}
/* Muted (disabled / "soon") item: grey ink is the ONLY signal, same
   convention as Sidebar.tsx's own rows ("no soon badge... the grey IS the
   signal", Ben 2026-07-26) -- no separate text note inside the tab plate. */
.mlp .gsp-menu[data-muted="true"] { color: var(--rp-ink-mute); cursor: default; }

/* --- 2026-08-30 second pass, from the signed-in render of the two screens --- */
/* No icon square in a title bar: the approved bar is crumb + title + controls.
   This was written as `.olp .gsp-titlebar-icon` (drop the icon everywhere),
   which also deleted the app-level bar's own crumb -- the ONE titlebar that
   still needs a crumb, having no icon square to begin with (rule above:
   .gsp-titlebar-icon renders as text, not a square, already). Scoped to the
   per-screen windows in the matrix, where the icon square this rule was
   written against actually lives. */
.olp [data-window-kind] .gsp-titlebar-icon { display: none; }
/* Group rows inside the grid are silver, not the old cream. */
.olp .gsp-grid tr[data-group="true"] td { background: var(--rp-silver); color: var(--rp-ink); font-weight: 700; }
.olp .gsp-group-hint { color: var(--rp-ink-mute); font-weight: 400; }
/* Stage chips are the approved grey mono pill; red is reserved for stop/red tones. */
.olp .gsp-chip {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--rp-radius);
  background: var(--rp-silver); color: var(--rp-ink-soft); border: 1px solid var(--rp-line-3);
}
/* Ben, 2026-08-30 hand-annotation: "stage pills smaller" — every stage/
   status pill in Order Management is this one rule (`OmChip`, _lib/xp.tsx,
   is the only thing that renders `.gsp-chip`), so shrinking it here is the
   whole change across Orders, Dealers, Catalogue, Stock and Commercial at
   once. A pill this small clips real words, so `OmChip` now always carries
   its own text on `title` — the full word is a hover away, never lost. */
.olp .gsp-chip {
  font-size: 8px; padding: 1px 6px; max-width: 128px;
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.olp .gsp-chip[data-tone="amber"], .olp .gsp-chip[data-tone="green"], .olp .gsp-chip[data-tone="blue"] {
  background: var(--rp-silver); color: var(--rp-ink-soft); border-color: var(--rp-line-3);
}
.olp .gsp-chip[data-tone="red"], .olp .gsp-chip[data-tone="stop"] {
  background: var(--rp-attention-bg); color: var(--rp-red-deep); border-color: var(--rp-red-deep);
}
/* --- 2026-08-30 third screen (Dealers & credit), from the signed-in render --- */
/* Notices are silver sheets with a hairline, never cream. */
.olp .gsp-note { border: 1px solid var(--rp-line-3); background: var(--rp-silver-2); color: var(--rp-ink); border-radius: var(--rp-radius); padding: 4px 8px; margin: 4px 6px; }
.olp .gsp-note[data-tone="info"] { border-color: var(--rp-line-3); background: var(--rp-silver); color: var(--rp-ink); }
.olp .gsp-note[data-tone="stop"] { border-color: var(--rp-red-deep); background: var(--rp-attention-bg); color: var(--rp-red-deep); }
/* Pinned columns stay white on every row; hover matches the rest of the row. */
.olp .gsp-col-pin, .olp .gsp-grid tr:nth-child(even) td.gsp-col-pin { background: var(--rp-white); }
.olp .gsp-grid tbody tr[data-click="true"]:hover td.gsp-col-pin { background: var(--rp-silver-2); }
.olp .gsp-col-pin-id, .olp .gsp-col-pin-title { border-right-color: var(--rp-line-2); }
/* Density: the toolbar keeps to one line where it can, rows sit tight. */
.olp .gsp-toolbar { gap: 6px; padding: 5px 8px; flex-wrap: wrap; }
.olp .gsp-toolbar label { font-size: 11px; }
.olp .gsp-grid td { line-height: 1.3; padding: 4px 9px; }
.olp thead th, .olp .gsp-grid th { padding: 4px 9px; }

/* --- 2026-08-31 Orders toolbar, from the annotated live render ---
   Ben, 2026-08-30 hand-annotation: "make these symbols with hover" — Show
   Work/History/All, New request and Refresh are icon-only `.gsp-tool`
   buttons now (`data-icon="true"`), the glyph off the shared DS sprite. Same
   flat button underneath (hover/on/primary/disabled all still apply — this
   only tightens the box around a 16px icon instead of a text label) so the
   pressed Show button keeps exactly the contrast the plain rule above
   already gives `[data-on="true"]`. */
.olp .gsp-tool[data-icon="true"] {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 9px; line-height: 1;
}
.olp .gsp-tool[data-icon="true"] .glyph { width: 15px; height: 15px; stroke-width: 1.5; }

/* Section 9 (the launcher dock — sticky note / Outlook / Teams / Yarnball
   toggle plate) is removed, 2026-08-31: LauncherDock.tsx itself was already
   deleted (Ben, 2026-08-30, "remove" the floating bottom-right dock;
   Yarnball's opener moved into the topbar). These `.win-launcher-*` rules had
   nothing left to style; the matching dead rules in components.css and
   portal-core.css are removed with them. */

/* ============================================================================
   9. Procurement (.plp) — the same Red Plate bindings the .olp (Order
      Management) blocks above already carry, applied to procurement's use of
      the SAME gsp-* structural classes. Found live 2026-09-01 on the round-6
      verify pass: the record bodies (demand call, direct purchase, RFP…)
      still rendered the pre-freeze skin — blue-gradient title bars, black
      grid heads, royal-blue chips and legends, manila .gsp-note banners.
      Declarations mirror the .olp rules; no new values.
   ========================================================================= */
.plp .gsp-titlebar, .plp [data-window-id] .gsp-titlebar {
  display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 6px 0 12px !important;
  font-family: var(--ds-font-window) !important; font-weight: 700; font-size: 12.5px; letter-spacing: 0;
  color: var(--rp-ink) !important;
  border-top: 3px solid var(--rp-red); border-bottom: 1px solid var(--rp-line-2);
  background: linear-gradient(180deg, var(--rp-white) 0%, var(--rp-white) 62%, var(--rp-silver) 100%) !important;
  box-shadow: inset 0 1px 0 var(--rp-white), inset 0 -2px 0 rgba(35,34,30,.10);
}
.plp .gsp-titlebar-icon {
  width: auto; height: auto; background: transparent; border: 0; border-radius: 0;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  color: inherit; opacity: .72;
}
.plp .gsp-titlebar .gsp-headcell {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--rp-radius); font-weight: 600;
  background: var(--rp-silver); color: var(--rp-ink-soft); border: 1px solid var(--rp-line-3);
}
.plp .gsp-titlebar .ds-ctl-btn {
  color: inherit;
  background: rgba(0,0,0,.03); box-shadow: inset 0 -1px 0 rgba(35,34,30,.14); border: 1px solid rgba(35,34,30,.22);
}
/* .gsp-grid th: identical rule already defined once, in section 7 above
   (this file's own duplicate, from before .plp was ungated here, is
   removed). */
.gsp-grid td { background: var(--rp-white); }
.gsp-grid tr:nth-child(even) td { background: var(--rp-white); }
.gsp-pane-body { background: var(--rp-white); }
.gsp-chip {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: var(--rp-radius); max-width: 128px;
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
  background: var(--rp-silver); color: var(--rp-ink-soft); border: 1px solid var(--rp-line-3);
}
.gsp-chip[data-tone="amber"], .gsp-chip[data-tone="green"], .gsp-chip[data-tone="blue"] {
  background: var(--rp-silver); color: var(--rp-ink-soft); border-color: var(--rp-line-3);
}
.gsp-chip[data-tone="red"], .gsp-chip[data-tone="stop"] {
  background: var(--rp-attention-bg); color: var(--rp-red-deep); border-color: var(--rp-red-deep);
}
.gsp-note { border: 1px solid var(--rp-line-3); background: var(--rp-silver-2); color: var(--rp-ink); border-radius: var(--rp-radius); padding: 4px 8px; margin: 4px 6px; }
.gsp-note[data-tone="info"] { border-color: var(--rp-line-3); background: var(--rp-silver); color: var(--rp-ink); }
.gsp-note[data-tone="stop"] { border-color: var(--rp-red-deep); background: var(--rp-attention-bg); color: var(--rp-red-deep); }
.gsp-fieldset legend { color: var(--rp-ink); }
/* Record lead strip (the record's one-line summary band): silver sheet with
   a hairline, never the manila --ds-c-yellow-05 the structural default
   carries. Same treatment PR #852 gave the .olp record leads. */
.gsp-record-lead { background: var(--rp-silver-2); border-color: var(--rp-line-3); color: var(--rp-ink); }
.gsp-record-lead[data-tone="warn"] { background: var(--rp-silver); border-color: var(--rp-line-3); }
.gsp-record-lead[data-tone="alert"] { background: var(--rp-attention-bg); border-color: var(--rp-red-deep); }

/* ============================================================================
   Sections below (originally red-plate-modules.css, MMDB sweep 2026-08-31 /
   round-6 harmonize 2026-09-01) folded in here 2026-09-02 as part of the
   central-DS consolidation (MMDB-2431: "consolidate MMD Employee Portal
   styling into ONE central design system") -- red-plate-modules.css loaded
   immediately after this file with nothing between (src/lib/designSystems.ts
   cssFiles), so this append is exactly cascade-equivalent to before: same
   source order, same specificity, same winners, one file instead of two.
   The original file's Section A (root token remediation for --paper-manila/
   -card/-sheet/--hairline-dark) is dropped -- portal-core.css's single
   palette block now defines those four tokens unconditionally (see this
   file's own top -- wait, portal-core.css, not this one -- for the mapping).
   Section E (.gsp-muted outside .olp) is dropped too -- section 7 above is
   now ungated/bare, so .gsp-muted already reaches every wrapper. Every other
   section (B, C, D, F, G, H) is unchanged from the original file. ==========
   ============================================================================ */
/* ============================================================================
   B. Lead-to-Cash suite — the legacy ferri-oms-3 family (Order Management
      menu item: /app/ferri-oms-3, -supervisor, -warehouse, -gate, -cashier,
      /app/oms-dealer) and the Sales CRM screens (/app/sales/pipeline, leads,
      opportunities, customers, people) that share OmsFrame.tsx's combined
      navigation bar and the same ds-oms-*, ds-pf-*, ds-doc-*, ds-paper-folder,
      ds-kanban-*, ds-modal--doc component family (confirmed by grep: these
      classes have no other consumers). Section A above already fixed every
      amber/cream background reachable through --paper-manila/--paper-card/
      --paper-sheet/--hairline-dark; this section fixes what a token alias
      cannot -- the accent colour written directly as var(--royal-blue) (an
      undefined token, #2E4756 fallback -- not part of the Red Plate palette
      at all), the underline-style active-tab treatment (Red Plate's own
      convention, matching .gsp-menu[data-active] in red-plate.css section 7,
      is a red-topped white plate, never an underline), and literal non-4px
      radii on the specific classes this sweep touches.
   ========================================================================= */

/* OmsFrame.tsx's combined nav bar: silver body, ink-on-white tabs, red top
   edge on the active section -- same idiom as the app-level window titlebar
   and the in-window menu tab in red-plate.css sections 3 and 7. */
.ds-oms-modulebar { border-color: var(--rp-line-3); }
.ds-oms-modulebar .topnav-link,
.ds-oms-modulebar .topnav-link-active {
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
}
.ds-oms-modulebar .topnav-link {
  background: var(--rp-silver-2);
  color: var(--rp-ink-soft);
  border-color: var(--rp-line-3);
}
.ds-oms-modulebar .topnav-link:hover {
  background: var(--rp-white);
  color: var(--rp-ink);
}
.ds-oms-modulebar .topnav-link-active {
  background: var(--rp-white);
  color: var(--rp-ink);
  border-color: var(--rp-line-3);
  border-top: 2.5px solid var(--rp-red);
}
.ds-oms-modulebar-subrow { background: var(--rp-white); border-top-color: var(--rp-line-2); }
.ds-oms-subnav-link { color: var(--rp-ink-mute); }
.ds-oms-subnav-link:hover { color: var(--rp-ink); }
.ds-oms-subnav-link--active { color: var(--rp-ink); font-weight: 800; border-bottom-color: var(--rp-red); }
/* Dealer Workspace outbound link: same flat-secondary treatment as every
   other DS button, not a one-off blue outline. */
.ds-oms-nav-external {
  color: var(--rp-ink-soft);
  background: var(--rp-white);
  border-color: var(--rp-line-3);
  box-shadow: none;
}
.ds-oms-nav-external:hover { background: var(--rp-silver-2); border-color: var(--rp-border-strong); }

/* In-screen view tabs (OVERVIEW / ALL CASES / APPROVALS / COMMERCIAL /
   DEALERS & CREDIT / CATALOGUE / WAREHOUSE / GATE / PAYMENTS, and the Sales
   pipeline/leads/opportunities view switcher): silver strip, red-topped
   white plate for the active tab -- never an underline. */
.ds-oms-tabs { background: var(--rp-silver); border-bottom-color: var(--rp-line-2); }
.ds-oms-tab {
  border-bottom: 0;
  color: var(--rp-ink-mute);
}
.ds-oms-tab:hover { color: var(--rp-ink); }
.ds-oms-tab-active {
  border-bottom: 0;
  margin-bottom: -1px;
  padding-top: 3px;
  background: var(--rp-white);
  color: var(--rp-ink);
  font-weight: 700;
  border-top: 3px solid var(--rp-red);
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
  box-shadow: 0 -1px 2px rgba(35,34,30,.08);
}

/* Kanban column count chip (Pipeline board): was a straight literal amber
   token, not a fallback -- Section A cannot reach it. Grey chip, matching
   every other count/meta chip in the design. */
.ds-kanban-col-head,
.ds-kanban-uniform .ds-kanban-col-head { border-bottom-color: var(--rp-ink); background: var(--rp-silver); }
.ds-kanban-col-count,
.ds-kanban-uniform .ds-kanban-col-count {
  background: var(--rp-silver-2);
  border-color: var(--rp-line-3);
  border-radius: var(--rp-radius);
}

/* Paper-folder hang tab (Warehouse queue folder cards): radius only --
   Section A already fixed its background/border colour. */
.ds-paper-folder-hangtab { border-radius: var(--rp-radius) var(--rp-radius) 0 0; }

/* "ORDER DOCUMENT" popup (ds-modal--doc / ds-modal--doc-md, PaperShell) and
   its Sales-CRM sibling (ds-modal--dialog / ds-modal--record): 4px radius
   throughout, matching Ben's "4px radius everywhere, no exception." Colours
   already resolve correctly through Section A. */
.ds-modal.ds-modal--dialog { border-radius: var(--rp-radius); }
.ds-modal--doc .ds-modal-dialog-dismiss,
.ds-modal--doc-md .ds-modal-dialog-dismiss { border-radius: var(--rp-radius); }
.ds-doc-ref { border-radius: var(--rp-radius); }
.ds-pf-doctype-sub { border-radius: var(--rp-radius); border-color: var(--rp-ink); }
.ds-pf-rowx { border-radius: var(--rp-radius); }

/* ============================================================================
   C. IT Service Desk (src/app/app/it/service-desk/*.tsx, .sd-* classes in
      module-it-service-desk.css). Colours already resolve through Red
      Plate-correct root tokens (--paper/--ink/--hairline/--baobab); the
      status-stage colours (pending/active/passed/done) stay a genuine
      functional signal, not chrome, so pass/done keep the shared portal
      signal-grass green rather than being forced onto red -- consistent
      with how the OM kanban board and Sales pipeline chips already use the
      same signal-grass/-amber pair for real status, not decoration. The
      real drift here is radius: several panels/dialogs sat on 6px against
      the design's flat 4px everywhere.
   ========================================================================= */
.sd-process-console,
.sd-classification-panel,
.sd-exec-log,
.sd-modal-box { border-radius: var(--rp-radius); }

/* ============================================================================
   D. HR People module (module-hr-people.css, .hrp-* classes; owns
      EmployeeBrowseTab.tsx, LeaveList.tsx, UnifiedUploadIngestModal.tsx).
      Two real drifts: a Fraunces-serif section heading (the pre-freeze
      letterbox display face, explicitly out per Ben, 2026-08-29: "no
      letterbox serif display type in chrome"), and a set of panel/card radii
      sitting on 6-9999px against the design's flat 4px.
   ========================================================================= */
.hrp-people-heading { font-family: var(--ds-font-window); font-style: normal; }
.hrp-upload-emp-list,
.hrp-upload-drop,
.hrp-upload-success-banner,
.hrp-upload-file-info,
.hrp-progress-track,
.hrp-progress-fill { border-radius: var(--rp-radius); }

/* ============================================================================
   F. Table heads — round 6 harmonize sweep (MMDB-1802, 2026-09-01). The
      review found FOUR different table-head fills across the portal (solid
      black, pure white, off-white, transparent-desk-with-no-fill) against
      the Red Plate standard (reference: the Order Management orders table,
      already correct via red-plate.css section 7's `.olp thead th` /
      `.olp .gsp-grid th` — silver ground, mono uppercase labels, hairline
      bottom rule). This section extends the SAME standard, `var(--rp-silver)`
      fill only, to every remaining table family in the modules this lane
      owns, scoped so it can never reach sales/finance/procurement2 (other
      lanes' turf this round) or anything outside these routes:
        - `.ds-records-compact`/`.ds-report-table`/`.ds-th-host` (reporting's
          85 report pages, ColumnHeader.tsx's sort/filter header) — scoped to
          `[data-eid="reporting-section"]`, the one ancestor every reporting
          route shares (reporting/layout.tsx).
        - `.ds-datagrid` (DataGrid.tsx) inside Meetings only — scoped to
          `.meetings-surface` (meetingsUi.tsx's MeetingsSurface wrapper,
          meetings' own dedicated shell class, not reused elsewhere).
        - `.ds-records-compact`/`.ds-records`/bare `.ds-records` (which had
          NO thead rule at all) inside the IT admin consoles — scoped per
          page via each page's own `aria-labelledby`, since it/** has no
          single shared layout wrapper to hook instead.
        - `.ds-records-compact`/`.ds-workqueue` inside Employee Self Service
          (`/app/me/*`) — scoped to `.self-service-workbench` (_self-
          service.tsx's SelfServiceHeader partner class, every me/* page).
        - `.ds-datagrid` inside the legacy ferri-oms-3 family — scoped to
          `[data-eid^="ferri-oms-3-"]` (FerriOms3Surface.tsx's own per-mode
          data-eid, identical across every ferri-oms-3-* route). NOTE:
          `.ds-pf-lines` (the same family's paper-folder line tables) is
          already correct — `background:var(--paper-2)` — untouched here.
      None of these tables gets a new class; every selector below already
      exists in the module's own .tsx and design-system.manifest.json's
      allowed_classes. Only the header FILL changes — the mono/uppercase
      type and the hairline rule these table families already carry are
      untouched, they already match the standard. */
[data-eid="reporting-section"] .ds-records-compact thead th,
[data-eid="reporting-section"] .ds-records-compact-sticky thead th,
[data-eid="reporting-section"] .ds-report-table thead th,
[data-eid="reporting-section"] th.ds-th-host {
  background: var(--rp-silver);
}

.meetings-surface .ds-datagrid thead tr {
  background: var(--rp-silver);
}

[aria-labelledby="it-tools-title"] .ds-records-compact thead th,
[aria-labelledby="backlog-title"] .ds-records-compact thead th,
[aria-labelledby="servers-title"] .ds-records-compact thead th,
[aria-labelledby="network-title"] .ds-records-compact thead th,
[aria-labelledby="monitoring-title"] .ds-records-compact thead th,
[aria-labelledby="it-tool-title"] .ds-records-compact thead th,
[aria-labelledby^="infra-title"] .ds-records-compact thead th,
[aria-labelledby="network-title"] .ds-records thead th,
[aria-labelledby="monitoring-title"] .ds-records thead th,
[aria-labelledby^="infra-title"] .ds-records thead th {
  background: var(--rp-silver);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rp-ink);
  border-bottom: 1px solid var(--rp-line-2);
}

.self-service-workbench .ds-records-compact thead th,
.self-service-workbench .ds-workqueue th {
  background: var(--rp-silver);
}

[data-eid^="ferri-oms-3-"] .ds-datagrid thead tr {
  background: var(--rp-silver);
}

/* IT Service Desk (src/app/app/it/service-desk/*.tsx) already fills its
   `.sd-table-head-row` on `var(--paper-2)` (= rp-silver, same colour, older
   token name) — the one real gap against the standard is the label type,
   which was never set to mono at all (inherits the page's UI sans). */
.sd-table-head-row {
  font-family: var(--font-mono);
}

/* ============================================================================
   G. Tab systems — round 6 harmonize sweep (MMDB-1803, 2026-09-01). The
      review found seven different tab idioms across the portal. This
      section converges every module-local tab strip this lane owns onto
      the ONE already-approved Red Plate tab language (red-plate.css
      sections 7/8: `.olp .gsp-menubar`/`.gsp-menu[data-active="true"]`,
      `.mlp .gsp-menubar`/`.gsp-menu[data-active="true"]`) — silver bar,
      white plate with a 3px red top edge for the active tab, silver/
      transparent for inactive. No control is rebuilt: every selector below
      targets a class the module already renders, only the paint changes.
      Two modules in this lane's tab list need NO change here because they
      already carry the approved language from an earlier sweep:
        - Master Data reuses OmAppFrame's own `.olp .gsp-menubar`/`.gsp-menu`
          directly (red-plate.css section 7) — already correct.
        - The legacy ferri-oms-3 family's OWN screen tabs (`.ds-oms-tabs`/
          `.ds-oms-tab-active`, OVERVIEW / ALL CASES / …) and its module bar
          (`.ds-oms-modulebar`/`.topnav-link-active`) were already converged
          in section B above — already correct.
      Reporting, Employee Self Service, the IT Service Desk console and
      Directory's view toggle were NOT touched by any earlier sweep and are
      converged here. */

/* Reporting (`/app/reporting/*`, ReportingNav.tsx: `.ds-repnav` domain row +
   `.ds-subnav2` per-domain report row). Was a solid dark bar (`.ds-repnav{
   background:var(--ink)}`) with a plain white-pill active tab, and an
   underlined link row below it — two idioms, neither the Red Plate one, and
   the dark bar was ALSO its own distinct black (review: "#23221E" vs
   recruiting's "#14161A" — the two-blacks finding). `.ds-repnav`/
   `.ds-subnav2` are also rendered by hub/HubShell.tsx (procurement) and
   plant/PlantSurface.tsx — neither owned by this lane this round — so every
   rule here is scoped to `[data-eid="reporting-section"]`
   (reporting/layout.tsx's own wrapper, the one ancestor every reporting
   route shares) and reaches reporting alone. */
[data-eid="reporting-section"] .ds-repnav {
  background: var(--rp-silver);
  border-bottom: 1px solid var(--rp-line-2);
  padding: 5px 8px 0;
  gap: 2px;
  align-items: flex-end;
}
[data-eid="reporting-section"] .ds-repnav-tab {
  background: transparent;
  color: var(--rp-ink-soft);
  font-family: var(--ds-font-window);
  padding: 5px 12px 6px;
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
}
[data-eid="reporting-section"] .ds-repnav-tab:hover {
  background: var(--rp-silver-2);
  color: var(--rp-ink);
  box-shadow: none;
}
[data-eid="reporting-section"] .ds-repnav-tab-active,
[data-eid="reporting-section"] .ds-repnav-tab-active:hover {
  background: var(--rp-white);
  color: var(--rp-ink);
  font-weight: 700;
  border-top: 3px solid var(--rp-red);
  padding-top: 3px;
  box-shadow: 0 -1px 2px rgba(35, 34, 30, 0.08);
}
[data-eid="reporting-section"] .ds-repnav-link {
  color: var(--rp-ink-mute);
}
[data-eid="reporting-section"] .ds-repnav-link:hover {
  color: var(--rp-ink);
}
[data-eid="reporting-section"] .ds-subnav2 {
  border-bottom: 1px solid var(--rp-line-2);
}
[data-eid="reporting-section"] .ds-subnav2-link {
  color: var(--rp-ink-soft);
}
[data-eid="reporting-section"] .ds-subnav2-link:hover {
  color: var(--rp-ink);
  box-shadow: inset 0 -2px 0 0 var(--rp-red);
}
[data-eid="reporting-section"] .ds-subnav2-link-active {
  color: var(--rp-ink);
  box-shadow: inset 0 -2px 0 0 var(--rp-red);
}

/* Employee Self Service (`/app/me/*`, _self-service.tsx's SelfServiceHeader,
   the ONLY consumer of the bare `.subnav`/`a.active` classes — every other
   module's own sub-nav uses its own prefixed class family). Was an
   underline-on-black-ink tab, the third tab idiom the review found. Rules
   target the nav's own `aria-label` (stable, no ancestor class needed since
   `.subnav` has no other consumer to protect against). */
[aria-label="Self Service sections"] {
  background: var(--rp-silver);
  border-bottom: 1px solid var(--rp-line-2);
  padding: 5px 8px 0;
  gap: 2px;
  align-items: flex-end;
  margin-bottom: 16px;
}
[aria-label="Self Service sections"] a {
  color: var(--rp-ink-soft);
  font-family: var(--ds-font-window);
  font-size: 11.5px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
  padding: 5px 12px 6px;
  margin-bottom: 0;
  border-bottom: 0;
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
}
[aria-label="Self Service sections"] a:hover {
  background: var(--rp-silver-2);
  color: var(--rp-ink);
}
[aria-label="Self Service sections"] a.active {
  background: var(--rp-white);
  color: var(--rp-ink);
  font-weight: 700;
  border-bottom: 0;
  border-top: 3px solid var(--rp-red);
  padding-top: 3px;
  box-shadow: 0 -1px 2px rgba(35, 34, 30, 0.08);
}

/* IT Service Desk (`/app/it/service-desk`, page.tsx's `.sd-tab-row`) — the
   view switcher (Security Alerts / ITSM Tickets / Service Request Catalog)
   was three `.ds-button` action buttons, the active one `ds-button-primary`
   (solid red). That is also BLOCKER #2 from the review: a red "tab" button
   competing with the console's own genuine primary action ("Ingest email &
   execute FlowMaster process") for the one red the bar allows. Restyled as
   tabs, the active state stops being red-filled — the console's ingest
   button becomes the view's only red again, at no JS/markup change (the
   component still toggles `ds-button-primary`/`ds-button-secondary`, this
   just repaints what those two classes mean inside the tab row). */
.sd-tab-row {
  background: var(--rp-silver);
  border: 0;
  border-bottom: 1px solid var(--rp-line-2);
  padding: 5px 8px 0;
  gap: 2px;
  align-items: flex-end;
}
.sd-tab-row .ds-button {
  font-family: var(--ds-font-window);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--rp-ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--rp-radius) var(--rp-radius) 0 0;
  padding: 5px 12px 6px;
  box-shadow: none;
}
.sd-tab-row .ds-button:hover {
  background: var(--rp-silver-2);
  color: var(--rp-ink);
}
.sd-tab-row .ds-button-primary,
.sd-tab-row .ds-button-primary:hover {
  background: var(--rp-white);
  color: var(--rp-ink);
  font-weight: 700;
  border-color: var(--rp-line-2);
  border-top: 3px solid var(--rp-red);
  padding-top: 3px;
  box-shadow: 0 -1px 2px rgba(35, 34, 30, 0.08);
}
.sd-tab-row .ds-button-secondary {
  background: transparent;
  border-color: transparent;
}

/* Directory (`/app/directory`, DirectoryBrowser.tsx's `.rt-tabs`/`.rt-tab` —
   sole consumer of these classes) — the Org chart / Map view toggle. Was a
   solid `var(--baobab)` (red) fill on the active option, one of the six
   reds the review counted on this single screen. Converted to the same
   silver-bar/white-plate/red-top-edge language; the pill's own outer border
   becomes the silver bar, each option becomes a tab. */
.rt-tabs {
  background: var(--rp-silver);
  border: 1px solid var(--rp-line-2);
  border-radius: var(--rp-radius);
  padding: 2px;
  gap: 2px;
}
.rt-tab {
  background: transparent;
  color: var(--rp-ink-soft);
  border-radius: var(--rp-radius);
  padding: 5px 12px;
}
.rt-tab + .rt-tab {
  border-left: 0;
}
.rt-tab:hover {
  background: var(--rp-silver-2);
  color: var(--rp-ink);
}
.rt-tab.is-active {
  background: var(--rp-white);
  color: var(--rp-ink);
  font-weight: 700;
  box-shadow: inset 0 2px 0 0 var(--rp-red);
}

/* ============================================================================
   H. Order Management header row alignment (MMDB-1814, PDF p6 "align with
      other pages", 2026-09-01). Order Management (`/app/order-mgmt`) and
      Master Data (`/app/master-data`) both mount OmAppFrame with its
      default `wrapperClassName="olp"`; Strategy (`/app/strategy`) mounts
      the SAME OmAppFrame component but passes `wrapperClassName="slp"` —
      all three render byte-identical DOM (OmMenubar: one `.gsp-menubar`
      row IS the title row, there is no separate `.gsp-titlebar` once a
      screen runs inside the tabbed desktop — windows.tsx's GspWindow
      itself only renders one standalone, never inside OmAppFrame; see its
      own 2026-08-30 comment). The three skins disagree only on geometry:
      strategy-letterpress.css's `.slp .gsp-menubar{padding:2px 4px}` /
      `.gsp-menu{padding:4px 10px}` sits untouched by the freeze (Strategy
      is not `.olp`, red-plate.css section 7 never reaches it), while
      `.olp`'s row is the later, taller red-plate.css section 7 values
      (`.gsp-menubar{padding:5px 8px 0}` / `.gsp-menu{padding:5px 12px
      6px}`) — a measurable ~4-5px taller row, the mismatch PDF p6 points
      at. Font size already matches (11.5px both sides) and is left alone.
      Brought down here to strategy's tighter vertical rhythm WITHOUT
      touching the red-top-edge active-tab mechanic itself (section 7's own
      approved language, shared by every other `.gsp-menu`/`.proc-*-tab` in
      the portal — regressing it here to chase Strategy's plain underline
      would break consistency everywhere else this round is meant to fix).
      Scoped to bare `.olp` (not `[data-eid=...]`): the only two live
      consumers of `.olp .gsp-menubar` are Order Management and Master
      Data, both owned by this lane (confirmed by grep — no dealer-portal
      or procurement2 consumer exists). */
.olp .gsp-menubar {
  padding: 3px 8px 0;
}
.olp .gsp-menu {
  padding: 4px 12px 5px;
}
.olp .gsp-menu[data-active="true"] {
  padding-top: 2px;
}