/* Cadence editorial core — the SHARED editorial design layer.
   Opt-in per tenant via theme.skin:"editorial" → body[data-skin="editorial"]. CSS-only: no nav
   restructuring, no module assumptions, safe for PACE (WD/Mfg) and AFA tenants alike.
   FV's full editorial shell (body[data-shell="editorial"] in cadence-editorial.css) is a superset
   built earlier; this file is the extraction of its tenant-agnostic layer with the effective
   (last-wins) token values collapsed to one declaration. Authority: docs/design/brand-contract.md
   + decisions/2026-08-11-rabbit-editorial-fleet.md. */

/* ---- Tokens ------------------------------------------------------------------------------- */
body[data-skin="editorial"] {
  --cp-ink: #111827;
  --cp-paper: #fafafa;
  --cp-surface: #ffffff;
  --cp-muted: #6b7280;
  --cp-rule: #e5e7eb;
  --cp-soft: #f3f4f6;
  --cp-cadence: #542477;
  --cp-accent: var(--cp-cadence);
  --cp-tenant-accent: var(--tenant-accent, var(--cp-cadence));
  --cp-positive: #147a5a;
  --cp-warning: #a14e14;
  --cp-risk: #b23a48;
  /* ledger ramp */
  --mfp-paper: #fafafa;
  --mfp-cell: #ffffff;
  --mfp-label: #f5f6f8;
  --mfp-surface: #f3f4f6;
  --mfp-rule: #e5e7eb;
  --mfp-rule-strong: #d1d5db;
  /* Canon token (decisions/2026-08-31-principal-flagship-shell.md): plum authority #302437. */
  --mfp-head: #302437;
  --mfp-head-deep: #241c2b;
  --mfp-head-ink: #e9dfcd;
  --mfp-ink: #111827;
  --mfp-ink-2: #374151;
  --mfp-ink-3: #6b7280;
  --mfp-ink-4: #938c81;
  --mfp-pos: #03684a;
  --mfp-neg: #8a2f10;
  --font-serif: "Instrument Serif", Georgia, serif;
  /* UI-accent token (links, carets, active tabs/filters) — plum here; semantic greens untouched. */
  --accent-ui: var(--cp-accent);
  --bg: var(--cp-paper);
  --brand-mark-w: 24px;
  --brand-mark-gap: 10px;
  background: var(--cp-paper);
  color: var(--cp-ink);
  font-family: "Instrument Sans", Arial, sans-serif;
}

/* ---- Chrome: white bar, hairline, plum two-tone wordmark ---------------------------------- */
body[data-skin="editorial"] .sidebar {
  background: #fffdfa;
  border-bottom: 1px solid var(--cp-rule);
  --chrome-line: var(--cp-rule);
  --chrome-text: var(--cp-ink);
  --chrome-dim: var(--cp-muted);
  --chrome-hover: var(--cp-soft);
  --chrome-card: var(--cp-surface);
}
body[data-skin="editorial"] .sidebar::after { display: none; }
body[data-skin="editorial"] .sidebar-brand img.brand-mark {
  width: var(--brand-mark-w); height: var(--brand-mark-w);
  object-fit: contain; display: block; opacity: 1; background: none; border: 0; border-radius: 0;
  filter: none;
}
/* CANON = the marketing site: Newsreader 720, SINGLE colour #17141d, every surface. The retired
   jewel-letter treatment must not resurface here. !important beats the legacy inverted-chrome rules
   in retail-afa-v2.css while they still exist. */
body[data-skin="editorial"] .wordmark {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600; font-variation-settings: "opsz" 18; letter-spacing: -0.025em; line-height: 1;
}
body[data-skin="editorial"] .wordmark .wm-2 { font-weight: 400; margin-left: .235em; }
body[data-skin="editorial"] .sidebar-brand .wordmark .wm-1 { color: #17141d !important; }
body[data-skin="editorial"] .sidebar-brand .wordmark .wm-2,
body[data-skin="editorial"] .sidebar-brand .wordmark .wm-2 .wp1,
body[data-skin="editorial"] .sidebar-brand .wordmark .wm-2 .wp2,
body[data-skin="editorial"] .sidebar-brand .wordmark .wm-2 .wp3,
body[data-skin="editorial"] .sidebar-brand .wordmark .wm-2 .wp4 {
  color: #17141d !important; -webkit-text-fill-color: #17141d; background: none !important;
}
body[data-skin="editorial"] .sidebar-brand > span { color: var(--cp-muted); }

/* ---- Nav: editorial surfaces, PACE accents preserved -------------------------------------- */
body[data-skin="editorial"] .nav-group-label,
body[data-skin="editorial"] .nav-item-top { color: #4c454c !important; }
body[data-skin="editorial"] .nav-group[style*="--nav-accent"] .nav-group-label,
body[data-skin="editorial"] .nav-group[style*="--nav-accent"] .nav-item-top {
  color: var(--nav-accent) !important;
}
body[data-skin="editorial"] .nav-group.open .nav-group-label,
body[data-skin="editorial"] .nav-group-label:hover,
body[data-skin="editorial"] .nav-item-top:hover { background: var(--cp-soft); }
body[data-skin="editorial"] .nav-item-top.active,
body[data-skin="editorial"] .nav-group[data-active-routes] .nav-group-label {
  border-bottom-color: var(--nav-accent, var(--cp-accent)) !important;
}
body[data-skin="editorial"] .nav-group-items {
  background: var(--cp-surface);
  border: 1px solid var(--cp-rule);
  box-shadow: 0 18px 44px rgba(36, 28, 43, 0.14);
}
body[data-skin="editorial"] .nav-group-items .nav-item { color: var(--cp-ink); }
body[data-skin="editorial"] .nav-group-items .nav-item:hover { background: var(--cp-soft); }
body[data-skin="editorial"] .nav-group-items .nav-item.active {
  background: var(--cp-soft); color: var(--cp-accent);
}

/* ---- Canvas + page head ------------------------------------------------------------------- */
body[data-skin="editorial"] .main { background: var(--mfp-paper); }
body[data-skin="editorial"] .view { background: var(--mfp-paper); }
/* Work-screen titles operate in the sans voice (Will, twice, 2026-08-11: the serif page title
   doesn't land on grids/workbenches). Serif display stays on narrative surfaces (FV shell). */
body[data-skin="editorial"] .page-head h2 {
  font-family: "Instrument Sans", Arial, sans-serif;
  font-weight: 650; font-size: 21px; letter-spacing: -0.01em; color: var(--mfp-ink);
}
body[data-skin="editorial"] .page-head p { color: var(--mfp-ink-3); }

/* ---- Shared controls ---------------------------------------------------------------------- */
body[data-skin="editorial"] .primary-btn {
  background: var(--mfp-head); border-color: var(--mfp-head); color: var(--mfp-head-ink);
}
body[data-skin="editorial"] .primary-btn:hover { background: var(--mfp-head-deep); }
body[data-skin="editorial"] .secondary-btn {
  background: var(--mfp-cell); border: 1px solid var(--mfp-rule-strong); color: var(--mfp-ink-2);
}
body[data-skin="editorial"] .secondary-btn:hover { background: var(--cp-soft); }
body[data-skin="editorial"] .secondary-btn.on {
  background: var(--mfp-head); color: var(--mfp-head-ink); border-color: var(--mfp-head);
}
body[data-skin="editorial"] .seg, body[data-skin="editorial"] .segmented {
  background: var(--mfp-surface); border: 1px solid var(--mfp-rule);
  display: inline-flex; border-radius: 8px; overflow: hidden; gap: 0;
}

/* Inner segments are square — the container's corners do the rounding (Will 2026-08-12:
   "rounded edges with the square box" clash). */
body[data-skin="editorial"] .seg .seg-btn, body[data-skin="editorial"] .segmented button {
  border-radius: 0; margin: 0;
}
body[data-skin="editorial"] .seg .seg-btn, body[data-skin="editorial"] .segmented button {
  color: var(--mfp-ink-3);
}
/* Flush segmented: active = fill + ink only, no ring (the ring read as a square sticker inside
   the rounded track — Will 2026-08-12). Hairline dividers separate the cells. */
body[data-skin="editorial"] .seg .seg-btn.active, body[data-skin="editorial"] .segmented button.active {
  background: var(--mfp-cell); color: var(--mfp-head); box-shadow: none; font-weight: 700;
}
body[data-skin="editorial"] .seg .seg-btn + .seg-btn,
body[data-skin="editorial"] .segmented button + button { border-left: 1px solid var(--mfp-rule); }

/* ---- Cards, panels, tables ---------------------------------------------------------------- */
body[data-skin="editorial"] .panel, body[data-skin="editorial"] .fdg-card,
body[data-skin="editorial"] .kpi {
  background: var(--mfp-cell); border: 1px solid var(--mfp-rule); border-radius: 6px;
}
/* Featured KPI: the fleet rule paints it var(--green) with white ink; the surface rule above
   outranks the background but not the ink, so every skin tenant showed a blank white tile
   (OB Manage TOs, 2026-09-15). Featured = the ledger's plum band, same ink as its headers. */
body[data-skin="editorial"] .kpi.featured {
  background: var(--mfp-head); border-color: var(--mfp-head-deep); color: #eef0f2;
}
body[data-skin="editorial"] .kpi.featured label { color: rgba(238, 240, 242, 0.72); }
body[data-skin="editorial"] .kpi.featured strong, body[data-skin="editorial"] .kpi.featured small { color: #eef0f2; }
body[data-skin="editorial"] .panel-head h3, body[data-skin="editorial"] .fdg-card-h {
  color: var(--mfp-ink-2);
}
body[data-skin="editorial"] .table-wrap { border: 1px solid var(--mfp-rule); border-radius: 6px; }
/* THE grid treatment (Will 2026-08-11/12: one grid style on EVERY grid page). Three table
   families exist — .rwm-tbl (workbenches), .table-wrap (generic), .ph-tbl (the PH Cadence View
   used by golden/purehockey screens) — and all three get the full ledger treatment here. */
body[data-skin="editorial"] .table-wrap th,
body[data-skin="editorial"] .ph-tbl th {
  /* Header label ink: a clean, cool off-white on the plum band. The cream read yellow (Will
     2026-09-03, twice); #e9dfcd -> #f4eee1 was still warm, so #eef0f2 takes the yellow out. */
  background: var(--mfp-head); color: #eef0f2; border-bottom: 1px solid var(--mfp-head-deep);
  border-right: 0;   /* no vertical rules in the header: padding separates columns (Will 2026-09-20) */
}
body[data-skin="editorial"] .table-wrap tbody tr:hover td,
body[data-skin="editorial"] .ph-tbl tbody tr:hover td { background: var(--mfp-label); }
body[data-skin="editorial"] .ph-tbl td { background: var(--mfp-cell); border-color: var(--mfp-rule); }
body[data-skin="editorial"] .table-wrap td { background: var(--mfp-cell); }
body[data-skin="editorial"] .ph-tbl tbody tr:nth-child(even) td,
body[data-skin="editorial"] .table-wrap tbody tr:nth-child(even) td { background: #fcfcfd; }
body[data-skin="editorial"] .ph-tbl tbody tr:hover td { background: var(--mfp-label); }
body[data-skin="editorial"] .gtcv-scroll { border: 1px solid var(--mfp-rule-strong); }
/* Sort caret reads in the band's own ink, not the tenant accent (was blue-on-plum). */
body[data-skin="editorial"] .gt-cv .ph-tbl th .gtcv-arrow { color: var(--mfp-head-ink); }
/* Funnels live in the band: quiet cream, full cream when active. Popover on ledger surfaces. */
body[data-skin="editorial"] th .cad-funnel { color: var(--mfp-head-ink); }
body[data-skin="editorial"] .cad-flt-pop { background: var(--mfp-cell); border-color: var(--mfp-rule-strong); }
body[data-skin="editorial"] .cad-flt-row select, body[data-skin="editorial"] .cad-flt-row input { background: var(--mfp-cell); border-color: var(--mfp-rule-strong); }
body[data-skin="editorial"] .cad-flt-apply { background: var(--mfp-head); color: var(--mfp-head-ink); }
body[data-skin="editorial"] .cad-flt-list label:hover { background: var(--mfp-label); }
/* Slimmer, lighter scrollbars (Will 2026-09-03: "way too chunky" on the SO book, which is the
   editorial CV grid). 9px dark-thumb-on-visible-track read heavy; now 7px, quiet translucent
   thumb, no track band. */
body[data-skin="editorial"] .gtcv-scroll::-webkit-scrollbar,
body[data-skin="editorial"] .table-wrap::-webkit-scrollbar { width: 7px; height: 7px; }
body[data-skin="editorial"] .gtcv-scroll::-webkit-scrollbar-thumb,
body[data-skin="editorial"] .table-wrap::-webkit-scrollbar-thumb { background: rgba(22,22,22,0.22); border-radius: 999px; border: 1px solid var(--mfp-cell); background-clip: padding-box; }
body[data-skin="editorial"] .gtcv-scroll::-webkit-scrollbar-thumb:hover,
body[data-skin="editorial"] .table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(22,22,22,0.38); background-clip: padding-box; }
body[data-skin="editorial"] .gtcv-scroll::-webkit-scrollbar-track,
body[data-skin="editorial"] .table-wrap::-webkit-scrollbar-track { background: transparent; }
body[data-skin="editorial"] .table-wrap td { border-bottom: 1px solid var(--mfp-rule); }
body[data-skin="editorial"] .status-pill {
  background: var(--mfp-surface); color: var(--mfp-ink-2); border: 1px solid var(--mfp-rule);
}

/* ---- gt-look token remap (Today-board cards etc. read --t-*) ------------------------------ */
body[data-skin="editorial"] .gt-look-minimal, body[data-skin="editorial"] .gt-look-dense,
body[data-skin="editorial"] .gt-look-crisp, body[data-skin="editorial"] .gt-look-bi {
  /* Dense ("Command center") keeps its density traits — tight radius, mono numerals, all-caps
     labels — but loses the old dark slab: on paper, dense means denser, not darker. */
  --t-bg: transparent;
  --t-cardbd: var(--mfp-rule);
  --t-card: var(--mfp-cell);
  --t-ink: var(--mfp-ink);
  --t-muted: var(--mfp-ink-3);
  --t-faint: var(--mfp-ink-4);
  --t-line: var(--mfp-rule);
  --t-num: var(--mfp-ink);
  --t-ok: var(--mfp-pos);
  --t-hot: var(--cp-risk);
  --t-track: var(--mfp-surface);
  --t-radius: 6px;
  /* Chart fills: the cool slate/gray SaaS palette is the old skin's biggest tell on paper.
     Emphasis bars go plum, the rest warm neutral; heatmap tints warm to match. */
  --t-clive: var(--mfp-head);
  /* Canon neutral data fill: gray-taupe, cool not tan (2026-08-31 shell canon). */
  --t-cn: #bebdb8;
  --t-barok: #a9a8a3;
  --t-barrad: 4px;
  --t-terr: #ecd5c9;
  --t-mint: #e4e6d8;
  --t-accent: var(--cp-accent);
}
/* All-clear tiles hug their one line instead of stretching to their tall siblings' height. */
body[data-skin="editorial"] .gt-tile-zero { align-self: flex-start; }
body[data-skin="editorial"] .gt-look .gt-card { border: 1px solid var(--mfp-rule); }
/* Run board table sits inside a card — one rounded border, not a border within a border. */
body[data-skin="editorial"] .gt-look .fdg-card .table-wrap { border: 0; border-radius: 0; }
/* View toggle joins the segmented-control system instead of the stock cool-gray pill. */
body[data-skin="editorial"] .gt-tabs {
  background: var(--mfp-surface); border: 1px solid var(--mfp-rule); border-radius: 8px;
}
body[data-skin="editorial"] .gt-tab { color: var(--mfp-ink-3); }
body[data-skin="editorial"] .gt-tab.on {
  background: var(--mfp-cell); color: var(--mfp-head);
  box-shadow: inset 0 0 0 1px var(--mfp-rule-strong);
}

/* NAR landing chart tracks (bespoke .nartoday classes, injected at runtime). */
body[data-skin="editorial"] .nartoday .ntrack { background: var(--mfp-surface); }

/* ---- Explainability drawer ("Why this forecast") — warm the old accent family ------------- */
body[data-skin="editorial"] .exp-narr { background: var(--mfp-label); border-color: var(--mfp-rule-strong); }
body[data-skin="editorial"] .exp-bar i.up { background: var(--mfp-head); }
body[data-skin="editorial"] .exp-bar i.down { background: var(--mfp-rule-strong); }
body[data-skin="editorial"] .exp-blend-ml { background: var(--mfp-head); }
body[data-skin="editorial"] .exp-blend-tr { background: var(--mfp-ink-4); }
body[data-skin="editorial"] .exp-fact { background: var(--mfp-label); border-color: var(--mfp-rule); }
body[data-skin="editorial"] .help-head h3 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; }

/* ---- THE grid style (candidate standard, applied to workbench grids): FV's ledger tone ----
   Deep plum header band with cream ink, warm rules, cream cells. */
body[data-skin="editorial"] .rwm-tbl thead th {
  background: var(--mfp-head); color: var(--mfp-head-ink);
  border-bottom: 1px solid var(--mfp-head-deep);
}
body[data-skin="editorial"] .rwm-tbl thead th small { color: var(--mfp-head-ink); opacity: .75; }
body[data-skin="editorial"] .rwm-tbl tbody tr:hover td { background: var(--mfp-label); }

/* ---- rwm surfaces (runtime-injected plain classes; this scope out-ranks them) ------------- */
body[data-skin="editorial"] .rwm-card {
  background: var(--mfp-cell); border-color: var(--mfp-rule);
}
body[data-skin="editorial"] .rwm-tbl th { background: var(--mfp-label); color: var(--mfp-ink-2); }
body[data-skin="editorial"] .rwm-tbl td { border-color: var(--mfp-rule); background: var(--mfp-cell); }
/* Lane chips keep their semantic hues but at the editorial temperature — the cobalt/cool tints
   were the loudest old-skin survivors in the grid body. */
body[data-skin="editorial"] .rwm-chip.fill { background: #e7ebdd; color: #03684a; }
body[data-skin="editorial"] .rwm-chip.pull { background: #e9e3ef; color: #542477; }
body[data-skin="editorial"] .rwm-chip.partial { background: #f3ecdd; color: #8a5a10; }
body[data-skin="editorial"] .rwm-chip { background: var(--mfp-surface); border-color: var(--mfp-rule); }
body[data-skin="editorial"] .rwm-pov { background: var(--mfp-cell); border-color: var(--mfp-rule); }
body[data-skin="editorial"] .rwm-foot { color: var(--mfp-ink-4); }
body[data-skin="editorial"] .rwm-wb-filters .lbl, body[data-skin="editorial"] .rwm-pov .lbl { color: var(--mfp-ink-3); }
/* One picker grammar: the filter row mixed two widget systems (gray .bms-btn pills beside white
   tree-picker buttons). Same surface, border, height for every picker in a POV/filter row. */
body[data-skin="editorial"] .rwm-pov .bms-btn,
body[data-skin="editorial"] .rwm-pov .mpicker-btn {
  background: var(--mfp-cell); border: 1px solid var(--mfp-rule-strong); color: var(--mfp-ink-2);
  border-radius: 6px; min-height: 32px; font-size: 12.5px;
}
body[data-skin="editorial"] .rwm-wb-filters input[type="search"],
body[data-skin="editorial"] .rwm-wb-filters .pv {
  background: var(--mfp-cell); border-color: var(--mfp-rule-strong);
}
body[data-skin="editorial"] .rwm-wb-filters .pv button { color: var(--mfp-ink-2); background: transparent; border: 0; }
body[data-skin="editorial"] .rwm-wb-gridbar .wbst label { color: var(--mfp-ink-3); }
body[data-skin="editorial"] .rwm-wb-gridbar .wbst b { color: var(--mfp-ink); }
body[data-skin="editorial"] .rwm-wb-gridbar .wbst-staged { border-left-color: var(--mfp-rule-strong); }

/* ---- Grid feel: one scroll surface, sticky identity, less "delicate" ----------------------- */
/* On full-height grid screens the canvas padding becomes a dead band under the scrollbar —
   the grid runs to the window edge instead (the sizer reads this computed value). */
body[data-skin="editorial"] .view:has(.rwm-workbench-grid) { padding-bottom: 6px; }
body[data-skin="editorial"] .rwm-grid { max-height: calc(100vh - 236px); border: 1px solid var(--mfp-rule-strong); }
body[data-skin="editorial"] .rwm-grid::-webkit-scrollbar { width: 9px; height: 9px; }
body[data-skin="editorial"] .rwm-grid::-webkit-scrollbar-thumb { background: var(--mfp-rule-strong); border-radius: 6px; border: 2px solid var(--mfp-cell); }
body[data-skin="editorial"] .rwm-grid::-webkit-scrollbar-track { background: var(--mfp-label); }
body[data-skin="editorial"] .rwm-tbl { font-size: 12.5px; }
body[data-skin="editorial"] .rwm-tbl tbody tr:nth-child(even) td { background: #fcfcfd; }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl th:nth-child(-n+4),
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl td:nth-child(-n+4) { position: sticky; }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl th:nth-child(1),
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl td:nth-child(1) { left: 0; }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl th:nth-child(2),
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl td:nth-child(2) { left: var(--wb-l2, 36px); }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl th:nth-child(3),
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl td:nth-child(3) { left: var(--wb-l3, 166px); }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl th:nth-child(4),
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl td:nth-child(4) { left: var(--wb-l4, 400px); border-right: 1px solid var(--mfp-rule-strong); }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl td:nth-child(-n+4) { z-index: 2; }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl th:nth-child(-n+4) { z-index: 4; }

/* ONE Why affordance on every grid (Will 2026-08-12): quiet plum text button, hover chip —
   the workbench's bordered blue chip and Foresight's link were two costumes for one concept. */
body[data-skin="editorial"] .rwm-why-btn, body[data-skin="editorial"] .exp-why {
  border: 0; background: transparent; color: var(--cp-accent);
  font-weight: 650; font-size: 12px; padding: 2px 7px; border-radius: 6px; cursor: pointer;
}
body[data-skin="editorial"] .rwm-why-btn:hover, body[data-skin="editorial"] .exp-why:hover {
  background: var(--mfp-label); border-color: transparent;
}

/* ---- "Why this order" drawer joins the system ---------------------------------------------- */
body[data-skin="editorial"] .rwm-why-narr { background: var(--mfp-label); border-color: var(--mfp-rule-strong); }
body[data-skin="editorial"] .rwm-why-seg button.on { background: var(--mfp-head); border-color: var(--mfp-head); }
body[data-skin="editorial"] .rwm-why-fact { background: var(--mfp-cell); border-color: var(--mfp-rule); }
body[data-skin="editorial"] .rwm-why-impact { background: var(--mfp-surface); }
body[data-skin="editorial"] .rwm-why-impact .need { background: var(--mfp-head); }
body[data-skin="editorial"] .rwm-why-impact .cover { background: var(--mfp-ink-4); }
body[data-skin="editorial"] .rwm-why-list .ic { color: var(--cp-accent); }
body[data-skin="editorial"] .rwm-tx-card, body[data-skin="editorial"] .rwm-tx-list { background: var(--mfp-cell); border-color: var(--mfp-rule); }
body[data-skin="editorial"] .rwm-tx-card-h { background: var(--mfp-label); border-bottom-color: var(--mfp-rule); }
body[data-skin="editorial"] .rwm-tx-type { color: var(--cp-accent); }
body[data-skin="editorial"] .rwm-tx-status { background: var(--mfp-surface); color: var(--mfp-ink-3); }
body[data-skin="editorial"] .rwm-tx-status.ok { background: #e7ebdd; color: #03684a; }

/* ============================================================================
   Why drawers & deep dives — one editorial treatment for every explanation
   surface (.help-panel/.exp-panel foresight+accuracy, .rwm-why-drawer workbench,
   .fcl-deep-panel/.rwm-deep-panel/.nar-why-panel deep dives). Dual-scoped:
   data-skin (wave-1 tenants) and data-shell (FV-lineage shell tenants).
   The workbench drawer's own rules are JS-injected with hardcoded hex
   (rwmCss); these selectors out-specify them.
   ========================================================================= */
body[data-skin="editorial"] .help-panel, body[data-shell="editorial"] .help-panel,
body[data-skin="editorial"] .rwm-why-drawer, body[data-shell="editorial"] .rwm-why-drawer {
  background: var(--mfp-cell, #fffdf8);
  color: var(--cp-ink, #211d22);
  border-left: 1px solid var(--mfp-rule, #e0d7c4);
  box-shadow: -18px 0 40px rgba(33, 29, 34, .18);
}
body[data-skin="editorial"] .help-panel::before, body[data-shell="editorial"] .help-panel::before,
body[data-skin="editorial"] .rwm-why-drawer::before, body[data-shell="editorial"] .rwm-why-drawer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--cp-accent, #542477);
}
body[data-skin="editorial"] .help-head h3, body[data-shell="editorial"] .help-head h3,
body[data-skin="editorial"] .rwm-why-drawer .hd h3, body[data-shell="editorial"] .rwm-why-drawer .hd h3 {
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-weight: 400; font-size: 24px; letter-spacing: 0; color: var(--cp-ink, #211d22);
}
body[data-skin="editorial"] .help-kicker, body[data-shell="editorial"] .help-kicker {
  color: var(--cp-accent, #542477); letter-spacing: .12em;
}
body[data-skin="editorial"] .rwm-why-drawer .hd, body[data-shell="editorial"] .rwm-why-drawer .hd {
  background: var(--mfp-label, #f3ecdd); border-bottom: 1px solid var(--mfp-rule, #e0d7c4);
}
/* Narrative panel (the tinted summary box) — warm label tint, plum rule, serif voice */
body[data-skin="editorial"] .exp-narr, body[data-shell="editorial"] .exp-narr,
body[data-skin="editorial"] .rwm-why-narr, body[data-shell="editorial"] .rwm-why-narr,
body[data-skin="editorial"] .fdg-ai, body[data-shell="editorial"] .fdg-ai {
  background: var(--mfp-label, #f3ecdd);
  border: 1px solid var(--mfp-rule, #e0d7c4);
  border-left: 3px solid var(--cp-accent, #542477);
  color: var(--cp-ink, #211d22); border-radius: 8px;
}
/* Section headers — the small-caps ledger label voice */
body[data-skin="editorial"] .exp-sec-h, body[data-shell="editorial"] .exp-sec-h,
body[data-skin="editorial"] .rwm-why-sec-h, body[data-shell="editorial"] .rwm-why-sec-h,
body[data-skin="editorial"] .fdg-card-h, body[data-shell="editorial"] .fdg-card-h {
  color: var(--mfp-ink-3, #6d6558); text-transform: uppercase;
  letter-spacing: .11em; font-size: 10.5px; font-weight: 700;
}
/* Fact tiles */
body[data-skin="editorial"] .exp-fac, body[data-shell="editorial"] .exp-fac,
body[data-skin="editorial"] .fdg-metric, body[data-shell="editorial"] .fdg-metric,
body[data-skin="editorial"] .rwm-why-fact, body[data-shell="editorial"] .rwm-why-fact {
  background: var(--mfp-surface, #fffdfa);
  border: 1px solid var(--mfp-rule, #e0d7c4); border-radius: 8px;
  color: var(--cp-ink, #211d22);
}
body[data-skin="editorial"] .rwm-why-fact label, body[data-shell="editorial"] .rwm-why-fact label {
  color: var(--mfp-ink-3, #6d6558);
}
/* Blend bar: ML share wears the accent, trend guardrail stays warm gray */
body[data-skin="editorial"] .exp-blend-ml, body[data-shell="editorial"] .exp-blend-ml { background: var(--cp-accent, #542477); }
body[data-skin="editorial"] .exp-blend-tr, body[data-shell="editorial"] .exp-blend-tr { background: #c2b69f; color: #3a352d; }
/* Decomposition / evidence bars */
body[data-skin="editorial"] .exp-bar i, body[data-shell="editorial"] .exp-bar i { background: var(--mfp-head, #2f2536); }
body[data-skin="editorial"] .exp-bar i.down, body[data-shell="editorial"] .exp-bar i.down { background: #a63d33; }
body[data-skin="editorial"] .exp-base, body[data-shell="editorial"] .exp-base { border-color: var(--mfp-ink-3, #6d6558); }
/* Deep-dive panels */
body[data-skin="editorial"] .fcl-deep-panel, body[data-shell="editorial"] .fcl-deep-panel,
body[data-skin="editorial"] .rwm-deep-panel, body[data-shell="editorial"] .rwm-deep-panel,
body[data-skin="editorial"] .nar-why-panel, body[data-shell="editorial"] .nar-why-panel {
  background: var(--cp-paper, #efede9); color: var(--cp-ink, #211d22);
  border: 1px solid var(--mfp-rule, #e0d7c4);
}
body[data-skin="editorial"] .fdg-head, body[data-shell="editorial"] .fdg-head,
body[data-skin="editorial"] .rwm-deep-head, body[data-shell="editorial"] .rwm-deep-head {
  background: var(--mfp-label, #f3ecdd); border-bottom: 1px solid var(--mfp-rule, #e0d7c4);
}
body[data-skin="editorial"] .fdg-card, body[data-shell="editorial"] .fdg-card,
body[data-skin="editorial"] .fdg-ai-card, body[data-shell="editorial"] .fdg-ai-card {
  background: var(--mfp-cell, #fffdf8); border: 1px solid var(--mfp-rule, #e0d7c4);
}
/* Workbench drawer internals that rwmCss paints green/navy */
body[data-skin="editorial"] .rwm-why-seg button.on, body[data-shell="editorial"] .rwm-why-seg button.on {
  background: var(--mfp-cell, #fffdf8); color: var(--mfp-head, #2f2536);
  border-color: var(--mfp-rule, #e0d7c4); font-weight: 700;
}
body[data-skin="editorial"] .rwm-why-impact .cover, body[data-shell="editorial"] .rwm-why-impact .cover { color: var(--green, #03684a); }
body[data-skin="editorial"] .rwm-why-list .ic, body[data-shell="editorial"] .rwm-why-list .ic { color: var(--cp-accent, #542477); }

/* ============================================================================
   WD filter controls — the screen-header contract's Row B, applied to every
   screen still using .scope-select / .dmx-chips (Foresight, Inventory Health,
   In-Stock, Accuracy, Adjustment queue…). Label INSIDE the bordered control,
   cream fill, hairline rule — retires the pre-editorial mint-green tints.
   ========================================================================= */
body[data-skin="editorial"] .wd-filter-row, body[data-shell="editorial"] .wd-filter-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 10px;
}
body[data-skin="editorial"] .scope-select, body[data-shell="editorial"] .scope-select {
  background: var(--mfp-cell, #fffdf8) !important;
  border: 1px solid var(--mfp-rule, #e0d7c4) !important;
  border-radius: 6px !important; box-shadow: none !important;
  min-height: 34px; padding: 0 10px !important;
  display: inline-flex; align-items: center; gap: 7px;
}
body[data-skin="editorial"] .scope-select label, body[data-shell="editorial"] .scope-select label {
  color: var(--mfp-ink-3, #6d6558) !important; text-transform: uppercase;
  letter-spacing: .09em; font-size: 10px; font-weight: 700; margin: 0 !important;
}
body[data-skin="editorial"] .scope-select select, body[data-shell="editorial"] .scope-select select,
body[data-skin="editorial"] .scope-select input, body[data-shell="editorial"] .scope-select input {
  background: transparent !important; border: 0 !important; color: var(--cp-ink, #211d22) !important;
  font-weight: 600;
}
body[data-skin="editorial"] .dmx-chips-label, body[data-shell="editorial"] .dmx-chips-label {
  color: var(--mfp-ink-3, #6d6558); text-transform: uppercase; letter-spacing: .09em;
  font-size: 10px; font-weight: 700;
}
body[data-skin="editorial"] .dmx-chip, body[data-shell="editorial"] .dmx-chip {
  background: var(--mfp-cell, #fffdf8); border: 1px solid var(--mfp-rule, #e0d7c4);
  color: var(--cp-ink, #211d22); border-radius: 6px;
}
body[data-skin="editorial"] .dmx-chip.on, body[data-shell="editorial"] .dmx-chip.on {
  background: var(--mfp-head, #2f2536); border-color: var(--mfp-head, #2f2536);
  color: var(--mfp-head-ink, #e9dfcd); font-weight: 700;
}

/* Header economy: the grid owns the page. Slim title row, one filter row (chips inline),
   and the stat strip collapses from a card to a flush bar. */
body[data-skin="editorial"] .view .page-head, body[data-shell="editorial"] .view .page-head {
  margin-bottom: 6px;
}
body[data-skin="editorial"] .wd-filter-row .dmx-chips, body[data-shell="editorial"] .wd-filter-row .dmx-chips {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 4px;
}
body[data-skin="editorial"] .scope-context, body[data-shell="editorial"] .scope-context {
  padding: 0 2px !important; margin: 0 0 12px !important;
  border: 0; border-radius: 0;
  background: transparent; box-shadow: none !important;
}
body[data-skin="editorial"] .scope-context .stat strong, body[data-shell="editorial"] .scope-context .stat strong {
  font-size: 15px;
}

/* Principal/demo canon: pickers inherit the white control system, not the old green/tan skin. */
body[data-skin="editorial"] .mpicker-btn {
  background: var(--mfp-cell) !important;
  border-color: var(--mfp-rule) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
body[data-skin="editorial"] .mpicker-btn:hover { border-color: var(--mfp-rule-strong) !important; }
body[data-skin="editorial"] .mpicker-btn.has-selection,
body[data-skin="editorial"] .mpicker.period-picker .mpicker-btn,
body[data-skin="editorial"] .mpicker.period-picker .mpicker-btn.has-selection {
  background: var(--mfp-cell) !important;
  border-color: var(--mfp-rule) !important;
}
body[data-skin="editorial"] .mpicker-btn .mpicker-lbl,
body[data-skin="editorial"] .mpicker.period-picker .mpicker-btn .mpicker-lbl {
  color: var(--mfp-ink-3) !important;
}
body[data-skin="editorial"] .mpicker-pop {
  background: var(--mfp-cell);
  border: 1px solid var(--mfp-rule);
  border-radius: 8px;
  box-shadow: 0 22px 60px rgba(36, 28, 43, 0.16);
}
body[data-skin="editorial"] .mpicker-head {
  border-bottom-color: var(--mfp-rule);
  color: var(--mfp-ink-3);
}
body[data-skin="editorial"] .mpicker-opt:hover { background: var(--mfp-label); }
body[data-skin="editorial"] .mpicker-opt input { accent-color: var(--cp-accent); }
/* Skin editorial context nav: collapse sibling routes into the same page-switcher urn. */
/* Not for tenants that ALSO run the editorial shell (Seviroli, Northwind Optical): that shell keeps the
   strip sticky under its topbar, and forcing relative here left its 48px offset in place, so the strip
   dropped over the first row of every screen (filters and chips unclickable since 2026-08-31). */
body[data-layout="topbar"][data-skin="editorial"]:not([data-shell="editorial"]) .shell-context-nav {
  position: relative;
  z-index: 25;
  min-height: 54px;
  padding: 0 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--mfp-paper);
  border-bottom: 1px solid var(--mfp-rule);
}
body[data-layout="topbar"][data-skin="editorial"] .shell-context-nav[hidden] { display: none !important; }
body[data-skin="editorial"] .shell-context-picker {
  position: relative;
  display: inline-flex;
}
/* Quiet breadcrumb, not a control box (Will 2026-09-02): the switcher is wayfinding chrome,
   so it sits bare on the strip; the caret and hover wash carry the affordance. */
body[data-skin="editorial"] .shell-context-trigger {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--mfp-ink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
body[data-skin="editorial"] .shell-context-trigger:hover,
body[data-skin="editorial"] .shell-context-picker.open .shell-context-trigger {
  background: var(--mfp-surface);
}
body[data-skin="editorial"] .shell-context-phase,
body[data-skin="editorial"] .shell-context-slash,
body[data-skin="editorial"] .shell-context-caret {
  color: var(--mfp-ink-3);
  font-weight: 500;
}
body[data-skin="editorial"] .shell-context-trigger strong {
  color: var(--mfp-ink);
  font-weight: 750;
}
body[data-skin="editorial"] .shell-context-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  min-width: 310px;
  max-width: min(420px, calc(100vw - 52px));
  display: none !important;
  padding: 10px;
  background: var(--mfp-cell) !important;
  border: 1px solid var(--mfp-rule) !important;
  border-radius: 8px !important;
  box-shadow: 0 22px 60px rgba(36, 28, 43, 0.16) !important;
}
body[data-skin="editorial"] .shell-context-picker.open .shell-context-menu { display: block !important; }
body[data-skin="editorial"] .shell-context-section + .shell-context-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--mfp-rule);
}
body[data-skin="editorial"] .shell-context-section-label {
  padding: 3px 8px 6px;
  color: var(--mfp-ink-4);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
body[data-skin="editorial"] .shell-context-menu-item {
  width: 100%;
  min-height: 34px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--mfp-ink) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  text-align: left;
}
/* Hover tints the row and keeps the ink; the current screen reads in the accent, no glyph (Will 2026-09-20). */
body[data-skin="editorial"] .shell-context-menu-item:hover { background: var(--mfp-label) !important; }
body[data-skin="editorial"] .shell-context-menu-item.active { color: var(--cp-accent) !important; font-weight: 700 !important; }
/* Editorial RWM canon: workbench screens use the same shell/control/grid grammar as Demand Composition. */
body[data-skin="editorial"] .rwm-pov,
body[data-skin="editorial"] .rwm-wb-toolbar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px !important;
}
body[data-skin="editorial"] .rwm-wb-filters {
  gap: 8px !important;
  margin: 0 !important;
}
body[data-skin="editorial"] .rwm-wb-filters input[type="search"],
body[data-skin="editorial"] .rwm-wb-filters .pv,
body[data-skin="editorial"] .rwm-pov .secondary-btn,
body[data-skin="editorial"] .rwm-pov .bms-btn,
body[data-skin="editorial"] .rwm-pov .mpicker-btn,
body[data-skin="editorial"] .rwm-wb-tools input {
  min-height: 36px !important;
  background: var(--mfp-cell) !important;
  border: 1px solid var(--mfp-rule) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  color: var(--mfp-ink) !important;
}
body[data-skin="editorial"] .rwm-wb-filters input[type="search"],
body[data-skin="editorial"] .rwm-wb-tools input {
  width: min(360px, 32vw);
  padding: 0 12px !important;
}
body[data-skin="editorial"] .rwm-wb-filters input[type="search"]::placeholder,
body[data-skin="editorial"] .rwm-wb-tools input::placeholder {
  color: var(--mfp-ink-4);
}
body[data-skin="editorial"] .rwm-wb-filters .pv,
body[data-skin="editorial"] .rwm-pov .scope-pill {
  padding: 0 10px !important;
}
body[data-skin="editorial"] .rwm-wb-filters .pv button,
body[data-skin="editorial"] .rwm-pov .secondary-btn {
  font-size: 13px !important;
  font-weight: 700 !important;
}
body[data-skin="editorial"] .rwm-pov .secondary-btn[style],
body[data-skin="editorial"] .rwm-pov .secondary-btn.has-selection {
  border-color: var(--cp-accent) !important;
  color: var(--cp-accent) !important;
  background: var(--mfp-cell) !important;
}
body[data-skin="editorial"] #gms-scroll {
  background: var(--mfp-cell) !important;
  border: 1px solid var(--mfp-rule) !important;
  border-radius: 8px !important;
  box-shadow: 0 22px 60px rgba(36, 28, 43, 0.16) !important;
}
body[data-skin="editorial"] #gms-scroll [style*="background:#e7edf3"],
body[data-skin="editorial"] #gms-scroll [style*="background:#eef2f6"] {
  background: var(--mfp-label) !important;
  color: var(--mfp-ink-3) !important;
}
body[data-skin="editorial"] #gms-scroll [style*="background:#f4f7fa"] {
  background: var(--mfp-cell) !important;
  color: var(--mfp-ink) !important;
}
body[data-skin="editorial"] #gms-scroll input {
  accent-color: var(--cp-accent);
}
body[data-skin="editorial"] .rwm-card,
body[data-skin="editorial"] .rwm-tx-card,
body[data-skin="editorial"] .rwm-tx-list,
body[data-skin="editorial"] .rwm-deep-card {
  background: var(--mfp-cell) !important;
  border-color: var(--mfp-rule) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
body[data-skin="editorial"] .rwm-grid,
body[data-skin="editorial"] .rwm-adj-grid-wrap {
  background: var(--mfp-cell) !important;
  border-color: var(--mfp-rule) !important;
  border-radius: 6px !important;
}
body[data-skin="editorial"] .rwm-tbl th,
body[data-skin="editorial"] .rwm-adj-grid thead th,
body[data-skin="editorial"] .rwm-deep-table th {
  background: var(--mfp-head) !important;
  color: var(--mfp-head-ink) !important;
  border-color: var(--mfp-head-deep) !important;
}
body[data-skin="editorial"] .rwm-tbl td,
body[data-skin="editorial"] .rwm-adj-grid td,
body[data-skin="editorial"] .rwm-deep-table td {
  background: var(--mfp-cell) !important;
  border-color: var(--mfp-rule) !important;
}
body[data-skin="editorial"] .rwm-tbl tbody tr:nth-child(even) td,
body[data-skin="editorial"] .rwm-adj-grid tbody tr:nth-child(even) td,
body[data-skin="editorial"] .rwm-deep-table tbody tr:nth-child(even) td {
  background: #fcfcfd !important;
}
body[data-skin="editorial"] .rwm-tbl tbody tr:hover td,
body[data-skin="editorial"] .rwm-tbl tbody tr.rwm-exp-row td,
body[data-skin="editorial"] .rwm-adj-grid tbody tr:hover td,
body[data-skin="editorial"] .rwm-deep-table tbody tr:hover td {
  background: var(--mfp-label) !important;
}
body[data-skin="editorial"] .rwm-chip {
  background: var(--mfp-label) !important;
  border: 1px solid var(--mfp-rule) !important;
  border-radius: 6px !important;
  color: var(--mfp-ink-2) !important;
}
body[data-skin="editorial"] .rwm-chip.fill {
  background: #edf3ee !important;
  border-color: #d9e6de !important;
  color: #17624a !important;
}
body[data-skin="editorial"] .rwm-chip.pull {
  background: #f1edf5 !important;
  border-color: #ded4e8 !important;
  color: #542477 !important;
}
body[data-skin="editorial"] .rwm-chip.partial {
  background: #f6f1e8 !important;
  border-color: #e8dcc9 !important;
  color: #7c5a22 !important;
}
body[data-skin="editorial"] .rwm-chip.order {
  background: #f6ecea !important;
  border-color: #ead5d1 !important;
  color: #8e332c !important;
}
body[data-skin="editorial"] .rwm-chip.ok {
  background: var(--mfp-label) !important;
  border-color: var(--mfp-rule) !important;
  color: var(--mfp-ink-3) !important;
}
body[data-skin="editorial"] .rwm-wb-gridbar {
  margin: 0 0 10px !important;
}
/* Topbar lockup: retired from this file. The lockup is now ONE canonical structure —
   .cp-lockup in retail-afa-v2.css, emitted by applyTenant() — with alignment done by
   grid structure, not measured paddings. No lockup overrides belong here. */

/* ============================================================================
   Control-chrome fixes (2026-08-26): a filter pill and the view toggle read as
   "a box inside a box" / "a square peg in a round track". Both are here.
   ============================================================================ */

/* A .bms multi-select (or model-tree picker) dropped inside a .scope-select was
   the control's own gray box sitting inside the pill's cream box. The pill IS the
   control, so flatten the inner button the same way select/input already are.
   Fixes every editorial screen that filters with .scope-select (Item Master,
   Foresight, Inventory Health, In-Stock, Accuracy, Adjustment queue…). */
body[data-skin="editorial"] .scope-select .bms-btn,
body[data-skin="editorial"] .scope-select .mpicker-btn,
body[data-shell="editorial"] .scope-select .bms-btn,
body[data-shell="editorial"] .scope-select .mpicker-btn {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; min-height: 0 !important; padding: 3px 2px !important;
  color: var(--cp-ink, #211d22) !important; font-weight: 600;
}

/* The editorial view toggle rounds its own corners via overflow:hidden, so the
   first segment must sit flush against the track's edge. When the toggle follows a
   nav link (Item Master's "Demand plan →"), .nav-xlink + .seg added a 12px left
   gutter + a divider, pushing the first segment off the rounded corner and leaving
   a square white corner in the tan track. Reset that gutter under editorial. */
body[data-skin="editorial"] .page-head .actions .nav-xlink + .seg,
body[data-shell="editorial"] .page-head .actions .nav-xlink + .seg {
  padding-left: 0 !important; border-left: 0 !important; margin-left: 8px;
}