/* 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: #211d22;
  --cp-paper: #efede9;
  --cp-surface: #fffdfa;
  --cp-muted: #706a70;
  --cp-rule: #d8d1ca;
  --cp-soft: #eee9e3;
  --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: #ece5d7;
  --mfp-cell: #fffdf8;
  --mfp-label: #f3ecdd;
  --mfp-surface: #eae1cf;
  --mfp-rule: #e0d7c4;
  --mfp-rule-strong: #c2b69f;
  --mfp-head: #2f2536;
  --mfp-head-deep: #241c2b;
  --mfp-head-ink: #e9dfcd;
  --mfp-ink: #16130f;
  --mfp-ink-2: #3a352d;
  --mfp-ink-3: #6b655c;
  --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;
}
/* Wordmark per brand-contract.md: "Cadence" ink + "Plan" deep plum, every surface. The retired
   jewel-letter treatment must not resurface here. !important mirrors the legacy inverted-chrome
   rules this must beat while they still exist in retail-afa-v2.css. */
body[data-skin="editorial"] .wordmark {
  font-family: "Aptos Display", "Segoe UI Variable Display", "Avenir Next", Arial, sans-serif;
  font-weight: 620; letter-spacing: 0; line-height: 1;
}
/* Selector weight matters: the legacy inverted-chrome jewel-letter rules in retail-afa-v2.css run
   at (0,4,1); these run heavier so the plum two-tone wins on any chrome. */
body[data-skin="editorial"] .sidebar-brand .wordmark .wm-1 { color: #18131d !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: #3c1e5b !important; -webkit-text-fill-color: #3c1e5b; 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: 10px;
}
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: 10px; }
/* 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 {
  background: var(--mfp-head); color: var(--mfp-head-ink); border-bottom: 1px solid var(--mfp-head-deep);
  border-right-color: var(--mfp-head-deep);
}
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: #f9f3e8; }
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); }
body[data-skin="editorial"] .gtcv-scroll::-webkit-scrollbar,
body[data-skin="editorial"] .table-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
body[data-skin="editorial"] .gtcv-scroll::-webkit-scrollbar-thumb,
body[data-skin="editorial"] .table-wrap::-webkit-scrollbar-thumb { background: var(--mfp-rule-strong); border-radius: 6px; border: 3px solid var(--mfp-cell); }
body[data-skin="editorial"] .gtcv-scroll::-webkit-scrollbar-track,
body[data-skin="editorial"] .table-wrap::-webkit-scrollbar-track { background: var(--mfp-label); }
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: 10px;
  /* 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);
  --t-cn: var(--mfp-rule-strong);
  --t-barok: var(--mfp-ink-4);
  --t-barrad: 4px;
  --t-terr: #ecd5c9;
  --t-mint: #e4e6d8;
  --t-accent: var(--cp-accent);
}
/* Login under the skin: paper canvas, plum strip, two-tone lockup. The rabbit mark itself now
   lives in the shared markup for every tenant; this block only rewarms the surfaces. */
body[data-skin="editorial"] .login-screen { background: var(--cp-paper); }
body[data-skin="editorial"] .login-strip { background: var(--mfp-head); }
body[data-skin="editorial"] .login-lockup .wordmark .wm-1 { color: #18131d; }
body[data-skin="editorial"] .login-lockup .wordmark .wm-2,
body[data-skin="editorial"] .login-lockup .wm-2 .wp1, body[data-skin="editorial"] .login-lockup .wm-2 .wp2,
body[data-skin="editorial"] .login-lockup .wm-2 .wp3, body[data-skin="editorial"] .login-lockup .wm-2 .wp4 {
  color: #3c1e5b; -webkit-text-fill-color: #3c1e5b;
}
body[data-skin="editorial"] .login-panel { border: 1px solid var(--mfp-rule); box-shadow: 0 24px 60px rgba(36, 28, 43, 0.12); }
body[data-skin="editorial"] .login-panel h2 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; }
/* 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: 8px; 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: 12px; height: 12px; }
body[data-skin="editorial"] .rwm-grid::-webkit-scrollbar-thumb { background: var(--mfp-rule-strong); border-radius: 6px; border: 3px 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: #f9f3e8; }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl th:nth-child(-n+3),
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl td:nth-child(-n+3) { 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); border-right: 1px solid var(--mfp-rule-strong); }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl td:nth-child(-n+3) { z-index: 2; }
body[data-skin="editorial"] .rwm-workbench-grid .rwm-tbl th:nth-child(-n+3) { 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); }