:root {
  --bg: #fbfaf7;
  --panel: #ffffff;
  --panel-2: #f3f2ee;
  --text: #161616;
  --muted: #706f6a;
  --faint: #9b9a95;
  --border: rgba(22, 22, 22, 0.1);
  --border-strong: rgba(22, 22, 22, 0.18);
  --green: #007a5e;
  --green-dark: #053f34;
  --blue: #155f72;
  --amber: #ba7517;
  --red: #b91c1c;
  --shadow: 0 12px 28px rgba(20, 20, 20, 0.07);
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--text); background: var(--bg); letter-spacing: 0; }
button, input, select { font: inherit; letter-spacing: 0; }
button { cursor: pointer; }
.shell-actions { display: none; }
.shell-context-nav { display: none; }
/* Active state for secondary-button view toggles (was a hardcoded inline cobalt). */
.secondary-btn.on { background: #1E5BA8; color: #fff; border-color: #1E5BA8; }
/* Export dropdown — menu always in the DOM, shown by the .open class so toggling never re-renders the
   screen (that full render replayed the chart animation: the "grid bounce"). Absolutely positioned, so
   opening it never pushes the grid. Shared by every screen's Export button. */
.g-export { position: relative; display: inline-block; }
.g-export-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--cp-surface, var(--card, #fff)); border: 1px solid var(--cp-rule, var(--line, #d7dbe0)); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.13); z-index: 60; min-width: 150px; overflow: hidden; padding: 3px 0; }
.g-export.open .g-export-menu { display: block; }
.g-export.open .g-export-btn { border-color: var(--cp-tenant-accent, var(--cp-accent, var(--accent))); color: var(--cp-tenant-accent, var(--cp-accent, var(--accent))); }
.g-export-item { display: block; width: 100%; text-align: left; padding: 8px 15px; font-size: 12.5px; background: none; border: none; cursor: pointer; color: var(--cp-ink, var(--ink, #1a1f28)); }
.g-export-item:hover { background: color-mix(in srgb, var(--cp-ink, #1a1f28) 6%, transparent); }

/* Per-column filter: the SPO funnel pattern, shared by every grid header. */
th .cad-funnel { display: inline-block; margin-left: 5px; opacity: .35; cursor: pointer; vertical-align: -1px; }
th .cad-funnel:hover { opacity: .9; }
th .cad-funnel.on { opacity: 1; }
th .cad-funnel svg { width: 10px; height: 10px; fill: currentColor; stroke: none; }
.cad-flt-pop { position: fixed; z-index: 300; min-width: 240px; max-width: 280px; background: var(--panel, #fff); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 18px 44px rgba(20, 20, 20, .18); font-size: 13px; }
.cad-flt-h { padding: 10px 14px 6px; font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cad-flt-row { display: flex; gap: 7px; padding: 6px 14px; align-items: center; }
.cad-flt-row select, .cad-flt-row input { font-family: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--panel, #fff); color: var(--text); min-width: 0; }
.cad-flt-row input { flex: 1; }
.cad-flt-list { max-height: 240px; overflow: auto; padding: 4px 8px; }
.cad-flt-list label { display: flex; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.cad-flt-list label:hover { background: rgba(0, 0, 0, .04); }
.cad-flt-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 8px 14px 12px; }
.cad-flt-clear { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; }
.cad-flt-apply { border: 0; border-radius: 7px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 650; background: var(--accent-ui, var(--green)); color: #fff; cursor: pointer; }

/* The lockup is ALWAYS rabbit left of the words on one line (Will, 2026-08-11) — at mid widths
   the mark was wrapping above the wordmark inside the <strong>. */
body[data-layout="topbar"] .sidebar-brand .wordmark { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* The flex gap IS the spacing — the base rule's 8px margin-right was doubling it (Will: too big). */
body[data-layout="topbar"] .sidebar-brand .wordmark .brand-mark { margin-right: 0; }

/* Order Workbench filter row — the class was emitted with NO rule anywhere, so it rendered as raw
   text labels and free-wrapping dropdowns. Same grammar as .rwm-pov: small-caps labels, tight row. */
.rwm-wb-filters { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin: 2px 0 4px; }
.rwm-wb-filters .pv button { min-width: 0; padding-left: 8px; padding-right: 8px; }
.rwm-wb-filters .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #5b6675; font-weight: 700; }
/* POV pills carry their label INSIDE one bordered container (label-outside double-encoded the
   dimension and taxed ~35% of the row width — 2026-08-11 header critique). The inner picker
   button goes borderless; the .pv is the control. */
.rwm-wb-filters input[type="search"] { height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 12px; width: 250px; font-size: 12.5px; background: var(--panel); }
.rwm-wb-filters .pv { display: inline-flex; align-items: center; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; padding-left: 10px; min-height: 34px; }
.rwm-wb-filters .pv .lbl { margin: 0; }
.rwm-wb-filters .pv button { border: 0; background: transparent; box-shadow: none; min-height: 30px; }
/* Stats + the single primary action sit flush with the grid they describe. */
.rwm-wb-gridbar { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin: 2px 0 4px; }
.rwm-wb-gridbar .wbst label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #5b6675; font-weight: 700; margin-right: 6px; }
.rwm-wb-gridbar .wbst b { font-size: 13px; color: #1c2733; font-variant-numeric: tabular-nums; font-weight: 750; }
.rwm-wb-gridbar .wbst-staged { padding-left: 16px; border-left: 1px solid var(--border); }

/* Topbar narrow-width behavior: keep every tab and the full wordmark; compact and let the nav
   scroll horizontally instead of amputating labels. Kicks in for zoomed/scaled displays too. */
@media (max-width: 1120px) {
  body[data-layout="topbar"] .sidebar { padding: 0 12px; gap: 10px; }
  body[data-layout="topbar"] .sidebar-brand { white-space: nowrap; }
  body[data-layout="topbar"] .sidebar-brand #brand-sub,
  body[data-layout="topbar"] .sidebar-brand > span { display: none; }
  body[data-layout="topbar"] .sidebar-nav {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -ms-overflow-style: none;
  }
  body[data-layout="topbar"] .sidebar-nav::-webkit-scrollbar { display: none; }
  body[data-layout="topbar"] .nav-group-label,
  body[data-layout="topbar"] .nav-item-top { font-size: 12px; padding: 6px 7px; white-space: nowrap; }
}
.tenant-badge { display: flex; gap: 10px; align-items: center; margin-bottom: 28px; }
.tenant-badge > span, .workspace-card > span, .user-card > span { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0f766e, #38bdf8); font-weight: 760; font-size: 12px; }
.tenant-badge strong, .workspace-card strong, .user-card strong { display: block; font-size: 13px; }
.tenant-badge small, .workspace-card small, .user-card small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

/* ------------- APP SHELL ------------- */
.app-shell { display: none; min-height: 100vh; grid-template-columns: 224px minmax(0, 1fr); }
.app-shell.active { display: grid; }
/* Forest chrome convergence — the sidebar rail is Cadence's constant signature
   (--chrome-* from cadence-design.css). Content surfaces below stay light/tenant. */
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--chrome-bg); border-right: 1px solid var(--chrome-line); display: flex; flex-direction: column; }
.sidebar-brand { padding: 20px 18px 18px; }
.sidebar-brand strong { display: block; font-family: "Newsreader", Georgia, serif; font-size: 21px; line-height: 1.05; letter-spacing: -0.018em; font-weight: 720; white-space: nowrap; }
.sidebar-brand .wordmark .wm-1 { display: inline; font-size: 21px; color: var(--chrome-bright); }
.sidebar-brand .wordmark .wm-2 { display: inline; font-size: 21px; color: var(--chrome-bright); }   /* single-colour: match wm-1 */
.sidebar-brand > span { display: block; margin-top: 7px; color: var(--chrome-dim); font-size: 11px; font-weight: 650; }
.sidebar-nav { padding: 6px 10px; display: grid; gap: 12px; overflow-y: auto; }
.nav-group { display: grid; gap: 2px; }
.nav-group-items { display: contents; } /* transparent in the left rail; a dropdown panel in top-nav */
.nav-group-label { padding: 0 8px 5px; color: var(--chrome-dim); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.nav-item { position: relative; display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; border: 0; border-radius: var(--radius); padding: 8px 10px; background: transparent; color: var(--chrome-text); text-align: left; font-size: 14px; line-height: 1.2; }
.nav-item:hover { background: var(--chrome-hover); color: var(--chrome-bright); }
.nav-item.active { background: var(--chrome-active); color: var(--chrome-bright); font-weight: 700; }
.nav-icon { width: 4px; height: 18px; border-radius: 999px; background: currentColor; opacity: 0; flex: 0 0 auto; }
/* explicit, consistent keyboard focus ring (best practice; :focus-visible = keyboard only, no ring on mouse click) */
:where(button, a, input, select, textarea, summary, [tabindex], .nav-item, .nav-item-top, .nav-group-label):focus-visible { outline: 2px solid var(--accent, #047857); outline-offset: 2px; border-radius: 4px; }
.nav-item.active .nav-icon { opacity: 1; background: var(--chrome-mint); }
.sidebar-footer { margin-top: auto; padding: 10px; border-top: 1px solid var(--chrome-line); display: grid; gap: 8px; }
.workspace-card { display: flex; align-items: center; gap: 9px; border: 0; border-radius: var(--radius); background: var(--chrome-card); padding: 8px; min-width: 0; }
.workspace-card > span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #0f766e, #38bdf8); font-weight: 760; font-size: 11px; }
.workspace-card strong { display: block; font-size: 12px; color: var(--chrome-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.workspace-card small { display: block; margin-top: 1px; color: var(--chrome-dim); font-size: 10px; }
.user-card { display: flex; align-items: center; gap: 9px; border: 0; border-radius: var(--radius); background: transparent; padding: 8px; min-width: 0; cursor: pointer; transition: background 0.12s; }
.user-card:hover { background: var(--chrome-card); }
.user-card > span { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #047857, #10B981); font-weight: 760; font-size: 11px; flex: none; }
.user-card > div { min-width: 0; flex: 1; }
.user-card .user-name { display: block; font-size: 12px; color: var(--chrome-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card .user-role { display: block; margin-top: 1px; color: var(--chrome-dim); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card::after { content: '\22EF'; color: var(--chrome-dim); font-size: 16px; line-height: 1; flex: none; padding: 0 2px; }

.main { min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 56px; display: grid; grid-template-columns: 1fr minmax(280px, 460px) auto; gap: 14px; align-items: center; background: rgba(251,250,247,0.94); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); padding: 9px 24px; }
.topbar-context { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.topbar h1 { margin: 0; font-size: 18px; line-height: 1.2; }
.topbar p { margin: 3px 0 0; color: var(--faint); font-size: 12px; }
.command-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel); color: var(--muted); padding: 8px 14px; font-size: 12px; }
.command-bar:hover { border-color: var(--border-strong); color: var(--text); }
.command-bar span { font-weight: 500; }
kbd { border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; color: var(--faint); background: var(--panel-2); font-size: 10px; }
.status-pills { display: flex; align-items: center; gap: 8px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 9px; background: var(--panel); color: var(--muted); font-size: 11px; white-space: nowrap; }
/* Shared AI insight strip (matches the Bachmans workbench band) */
.ai-strip { display: flex; align-items: center; gap: 11px; padding: 11px 14px; margin: 14px 0; background: linear-gradient(90deg, rgba(0,122,94,0.07), rgba(0,122,94,0.02)); border: 1px solid rgba(0,122,94,0.18); border-radius: var(--radius); font-size: 13px; color: var(--text); line-height: 1.45; }
.ai-strip .ai-spark { width: 24px; height: 24px; border-radius: 7px; background: linear-gradient(135deg, #007a5e, #10b981); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; }
.ai-strip .ai-text { flex: 1; min-width: 0; }
.ai-strip .ai-text strong { color: var(--green); font-weight: 700; }
.ai-strip .ai-text em { font-style: normal; color: var(--muted); }
.status-pill.ai-active { color: var(--green); border-color: rgba(0,122,94,0.3); background: rgba(0,122,94,0.05); font-weight: 600; }
.status-pill.ok { color: var(--green); background: rgba(0,122,94,0.08); border-color: rgba(0,122,94,0.22); }
.status-pill.warn { color: var(--amber); background: rgba(186,117,23,0.08); border-color: rgba(186,117,23,0.22); }

.global-search { display: none; position: fixed; top: 76px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); z-index: 40; }
.global-search.open { display: block; }
.global-search input { width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.command-results { margin-top: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.command-row { width: 100%; border: 0; background: var(--panel); padding: 11px 14px; display: flex; justify-content: space-between; gap: 12px; text-align: left; }
.command-row:hover { background: rgba(0,122,94,0.06); }
.command-row strong { display: block; }
.command-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }

.view { padding: 20px 24px 42px; max-width: none; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.page-head h2 { margin: 0; font-size: 24px; line-height: 1.1; }
.page-head p { margin: 5px 0 0; color: var(--muted); max-width: 760px; line-height: 1.4; font-size: 13px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.primary-btn, .secondary-btn { border: 1px solid transparent; border-radius: var(--radius); padding: 9px 12px; font-size: 13px; font-weight: 600; }
.page-head-slim { min-height: 0; }
.primary-btn { background: var(--green-dark); color: #fff; }
.secondary-btn { background: var(--panel); border-color: var(--border-strong); color: var(--text); }
.secondary-btn.compact { padding: 6px 10px; font-size: 12px; }
.link-btn { border: 0; background: transparent; color: var(--accent-ui, var(--green)); padding: 0; font-weight: 600; }

/* ------------- SOURCE BADGES (NEW v2) ------------- */
.src { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px; vertical-align: middle; line-height: 1.3; margin-left: 6px; white-space: nowrap; }
.src.live { color: var(--green); background: rgba(0,122,94,0.1); }
.src.staged { color: var(--amber); background: rgba(186,117,23,0.12); }
.src.seeded { color: var(--blue); background: rgba(21,95,114,0.1); }
.src.design { color: var(--faint); background: var(--panel-2); }
.src-legend { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); }
.src-legend .src { margin-left: 0; }
.faint { color: var(--faint); }
.tr-total td { border-top: 2px solid var(--border); background: var(--panel-2); }
table.cat-grid th, table.cat-grid td { white-space: nowrap; }
tr.cat-head td { background: var(--panel-2); color: var(--muted); font-size: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
/* Time-phased Style Supply Plan grid (accounts x weeks, styles stacked) */
.sp-wrap { overflow-x: auto; }
table.sp-grid { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
table.sp-grid th, table.sp-grid td { padding: 4px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; text-align: right; }
table.sp-grid .sp-acct { position: sticky; left: 0; background: var(--panel); text-align: left; min-width: 200px; z-index: 1; }
table.sp-grid thead th { position: sticky; top: 0; background: var(--panel); color: var(--muted); font-weight: 600; z-index: 1; }
table.sp-grid thead .sp-acct { z-index: 2; }
table.sp-grid tr.sp-style td { background: var(--panel-2); font-weight: 600; border-top: 2px solid var(--border); }
table.sp-grid tr.sp-style .sp-acct { background: var(--panel-2); }
table.sp-grid tr.sp-style .sp-style-name { color: var(--muted); font-weight: 400; margin-left: 4px; }
table.sp-grid tr.sp-bold td { font-weight: 700; }
.scope-select.period { background: rgba(21,95,114,0.06); border-color: rgba(21,95,114,0.3); }
.scope-select.period label { color: var(--blue); }

/* ------------- WORKING-SET CONTEXT (NEW v2) ------------- */
.scope-context { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 12px; }
.scope-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.scope-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 12px; color: var(--text); }
.scope-chip strong { font-weight: 700; color: var(--text); }
.scope-chip span { color: var(--muted); font-size: 11px; }
.scope-select { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,122,94,0.06); border: 1px solid rgba(0,122,94,0.3); border-radius: var(--radius); padding: 4px 8px 4px 12px; min-height: 36px; }
.scope-select label { font-size: 10px; color: var(--accent-ui, var(--green)); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.scope-select select { border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--text); padding: 3px 4px; cursor: pointer; }

/* ── cadTreeSel — canonical hierarchical multi-select POV picker (brand-correct, tenant-accent) ── */
.cadtree-field { display: inline-flex; align-items: center; gap: 9px; background: var(--cp-surface, #fffdfa); border: 1px solid var(--cp-rule, #d8d1ca); border-radius: 9px; padding: 4px 11px 4px 12px; min-height: 38px; position: relative; }
.cadtree-field:hover { border-color: color-mix(in srgb, var(--cp-tenant-accent, var(--cp-accent, #1e3a5f)) 40%, var(--cp-rule, #d8d1ca)); }
.cadtree-eyebrow { font-size: 10px; color: var(--cp-muted, #706a70); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
.cadtree-btn { border: 0; background: transparent; color: var(--cp-ink, #211d22); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 3px 2px; }
.cadtree-btn-lab { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadtree-btn-car { color: var(--faint, #9b9a95); font-size: 11px; }
.cadtree-pop { position: absolute; top: calc(100% + 6px); left: 0; width: 366px; max-height: 464px; overflow: auto; background: var(--cp-surface, #fffdfa); border: 1px solid var(--cp-rule, #d8d1ca); border-radius: 12px; box-shadow: 0 16px 40px rgba(22, 22, 22, 0.16); z-index: 60; }
.cadtree-head { position: sticky; top: 0; z-index: 4; background: var(--cp-surface, #fffdfa); padding: 11px 12px 9px; border-bottom: 1px solid var(--cp-rule, #d8d1ca); }
.cadtree-search { width: 100%; font: inherit; font-size: 12.5px; padding: 7px 11px; border: 1px solid var(--cp-rule, #d8d1ca); border-radius: 8px; outline: none; color: var(--cp-ink, #211d22); background: #fff; box-sizing: border-box; }
.cadtree-search:focus { border-color: var(--cp-tenant-accent, var(--cp-accent, #1e3a5f)); box-shadow: 0 0 0 3px rgba(33, 29, 34, 0.09); }
.cadtree-count { font-size: 10.5px; color: var(--faint, #9b9a95); padding: 6px 3px 0; letter-spacing: 0.02em; }
.cadtree-total { display: flex; align-items: center; gap: 9px; padding: 8px 12px; font-size: 12.5px; font-weight: 650; color: var(--cp-ink, #211d22); cursor: pointer; border-bottom: 1px solid var(--cp-rule, #d8d1ca); background: var(--cp-surface, #fffdfa); }
.cadtree-total:hover { background: #f4f1ec; }
.cadtree-total.is-sel { background: var(--cp-soft, #eee9e3); }
.cadtree-row { display: flex; align-items: center; gap: 9px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; color: var(--cp-ink, #211d22); border-bottom: 1px solid transparent; text-transform: none; letter-spacing: normal; font-weight: 400; transition: background 0.12s ease; }
.cadtree-row:hover { background: #f4f1ec; }
.cadtree-row.is-sel { background: var(--cp-soft, #eee9e3); font-weight: 600; }
.cadtree-row.lvl0 { font-weight: 650; background: #f3efe9; border-top: 1px solid var(--cp-rule, #d8d1ca); border-bottom: 1px solid var(--cp-rule, #d8d1ca); padding: 6px 12px; }
.cadtree-row.lvl0.is-sel { background: #e9e3db; }
.cadtree-row.lvl1 { font-weight: 550; }
.cadtree-lab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cadtree-car { display: inline-block; width: 14px; text-align: center; color: var(--faint, #9b9a95); cursor: pointer; font-size: 11px; flex: none; }
.cadtree-sp { display: inline-block; width: 14px; flex: none; }
.cadtree-guide { display: inline-block; width: 15px; flex: none; align-self: stretch; }   /* one indent cell per level */
.cadtree-cb { width: 15px; height: 15px; accent-color: var(--cp-tenant-accent, var(--cp-accent, #1e3a5f)); cursor: pointer; flex: none; margin: 0; }
.cadtree-dem { margin-left: auto; padding-left: 12px; color: var(--text2, #63625d); font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }
.cadtree-foot { position: sticky; bottom: 0; background: var(--cp-surface, #fffdfa); border-top: 1px solid var(--cp-rule, #d8d1ca); padding: 8px 12px; display: flex; justify-content: flex-end; }
.cadtree-clear { border: 0; background: transparent; color: var(--cp-tenant-accent, var(--cp-accent, #1e3a5f)); font-weight: 600; font-size: 12px; cursor: pointer; padding: 0; }
.cadtree-empty { padding: 11px 13px; color: var(--faint, #9b9a95); font-size: 12px; }
.cadtree-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px; border-bottom: 1px solid var(--cp-rule, #d8d1ca); background: var(--cp-surface, #fffdfa); }
.cadtree-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; background: var(--cp-soft, #eee9e3); color: var(--cp-ink, #211d22); border: 1px solid var(--cp-rule, #d8d1ca); border-radius: 6px; padding: 2px 4px 2px 8px; font-size: 11.5px; font-weight: 550; }
.cadtree-chip .cadtree-chip-lab { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadtree-chip-x { border: 0; background: transparent; color: var(--cp-muted, #706a70); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; }
.cadtree-chip-x:hover { color: var(--cp-risk, #b23a48); }
.cadtree-result { padding: 6px 12px; align-items: center; }
.cadtree-rlab { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cadtree-path { font-size: 10.5px; color: var(--faint, #9b9a95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cadtree-shint { font-size: 10.5px; color: var(--faint, #9b9a95); padding: 7px 12px 3px; letter-spacing: 0.02em; }
/* multi-select facet dropdown (replaces single-value <select> facets) */
.facet-dd.scope-select { display: inline-block; position: relative; padding: 0; cursor: pointer; }
.facet-dd > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 5px 10px; min-height: 34px; }
.facet-dd > summary::-webkit-details-marker { display: none; }
.facet-dd .facet-sum { font-size: 13px; font-weight: 600; color: var(--text); }
.facet-dd .facet-caret { font-size: 10px; color: var(--accent-ui, var(--green)); font-style: normal; margin-left: auto; padding-left: 4px; }
.facet-dd[open] .facet-caret { transform: rotate(180deg); }
.facet-list { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 190px; max-height: 290px; overflow-y: auto; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15,23,42,0.16); padding: 6px; }
.facet-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12.5px; color: var(--text); border-radius: 6px; cursor: pointer; white-space: nowrap; }
.facet-opt:hover { background: rgba(0,122,94,0.08); }
.facet-opt input { width: 14px; height: 14px; accent-color: var(--accent-ui, var(--green)); cursor: pointer; }
.facet-all { border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 7px; font-weight: 600; }
.scope-summary-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
/* Distribute the KPIs across the strip instead of clustering them on the right (which left a big void
   between the scope label and the numbers on wide screens). flex:1 takes the space after the label;
   space-between spreads the stats to fill it. */
.scope-context .scope-totals { display: flex; gap: 18px; align-items: center; flex: 1; justify-content: space-between; margin-left: clamp(24px, 4vw, 64px); }
.scope-totals .stat { display: flex; flex-direction: column; align-items: flex-end; }
.scope-totals .stat label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.scope-totals .stat strong { font-size: 17px; font-variant-numeric: tabular-nums; }

/* Inline-editable grid cells (Golden scheduling workbench) — invisible until hover/focus */
.gt-cell-num, .gt-cell-sel, .gt-cell-date { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid transparent; border-radius: 6px; background: rgba(4,120,87,0.05); color: var(--text); cursor: pointer; max-width: 100%; }
th[data-sorted] { background: rgba(4,120,87,0.06); }
.gt-cell-num { width: 54px; text-align: right; }
.gt-cell-date { width: 130px; }
.gt-cell-num:hover, .gt-cell-sel:hover, .gt-cell-date:hover { border-color: var(--border); background: var(--surface2, #f4f5f7); }
.gt-cell-num:focus, .gt-cell-sel:focus, .gt-cell-date:focus { outline: none; border-color: var(--accent); background: var(--surface, #fff); cursor: text; }
.gt-peg-link { color: var(--accent); cursor: pointer; font-weight: 700; border-bottom: 1px dotted var(--accent); }
.gt-peg-link:hover { opacity: 0.75; }
.gt-stock-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; cursor: pointer; border: 1px solid; white-space: nowrap; }
.gt-stock-tag.out { color: #C74634; background: #FBE9E7; border-color: #F4C7BE; }
.gt-stock-tag.ss { color: #8a6d3b; background: var(--surface2, #f4f5f7); border-color: var(--border); font-weight: 600; }
.gt-stock-tag:hover { opacity: 0.8; }

/* Production calendar (Gantt board) — lines down the side, days across the top */
.gantt-wrap { overflow-x: auto; }
.gantt { min-width: 720px; }
.gantt-row { display: grid; grid-template-columns: 120px repeat(5, minmax(120px, 1fr)); }
.gantt-head .gantt-day, .gantt-corner { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.gantt-lane-label { padding: 8px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.gantt-lane-label strong { font-size: 13px; }
.gantt-cap { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.gantt-cap.over { color: #C74634; font-weight: 700; }
.gantt-cell { min-height: 62px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 4px; display: flex; flex-direction: column; gap: 3px; position: relative; transition: background 0.12s; }
.gantt-cell.gantt-cell-over { background: rgba(4,120,87,0.08); outline: 2px dashed var(--accent); outline-offset: -2px; }
.gantt-cell-load { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; align-self: flex-end; }
.gantt-cell-load.over { color: #C74634; font-weight: 700; }
.gantt-block { background: var(--surface2, #f4f5f7); border-radius: 4px; padding: 3px 6px; font-size: 11px; cursor: grab; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.gantt-block:hover { background: var(--surface, #fff); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.gantt-block:active { cursor: grabbing; }
.gcl-bar { display: block; width: 44px; height: 3px; background: var(--border); border-radius: 2px; margin-top: 2px; margin-left: auto; overflow: hidden; }
.gcl-fill { display: block; height: 100%; background: var(--accent); }
.gb-model { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-qty { color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* WIP / routing kanban — station columns, draggable per-WO traveler cards */
.wip-filters { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 12px; }
.wip-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wip-filter-l { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin-right: 2px; }
.wip-board { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; align-items: stretch; }
.wip-col { flex: 0 0 196px; background: var(--surface2, #f4f5f7); border: 1px solid var(--border); border-radius: 10px; padding: 10px; transition: background 0.12s, box-shadow 0.12s; }
.wip-col-slim { flex: 0 0 34px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 4px; }
.wip-slim-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); white-space: nowrap; }
.wip-slim-zero { font-size: 10px; color: var(--faint); font-variant-numeric: tabular-nums; }
.wip-col.wip-col-over { background: rgba(4,120,87,0.07); box-shadow: inset 0 0 0 2px var(--accent); }
.wip-col-h { font-size: 12px; font-weight: 700; color: var(--text); padding: 2px 4px 10px; display: flex; justify-content: space-between; align-items: center; }
.wip-col-h .wip-count { font-size: 11px; color: var(--faint); font-weight: 600; background: var(--surface, #fff); border-radius: 10px; padding: 1px 8px; }
.wip-col.wip-done .wip-col-h { color: var(--green); }
.wip-col-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.wip-empty { font-size: 11px; color: var(--faint); padding: 10px 6px; text-align: center; border: 1px dashed var(--border); border-radius: 6px; }
.wip-card { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 7px; padding: 9px 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); cursor: grab; transition: box-shadow 0.12s, transform 0.06s; }
.wip-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.10); }
.wip-card:active { cursor: grabbing; transform: scale(0.99); }
.wip-card-top { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.wip-card-top strong { font-size: 12px; }
.wip-card-top .wip-qty { font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.wip-card-sub { font-size: 10px; color: var(--faint); margin: 3px 0 7px; }
.wip-ops { display: flex; gap: 2px; }
.wip-op { flex: 1; height: 6px; border-radius: 2px; background: var(--border); }
.wip-op.done { background: var(--green); }
.wip-op.active { background: #B45309; }
.wip-card-foot { font-size: 10px; color: var(--text2); margin-top: 7px; display: flex; justify-content: space-between; align-items: center; }
.wip-legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 11px; color: var(--text2); padding: 2px 2px 12px; }
.wip-legend .wip-step { background: var(--surface2, #f4f5f7); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; font-weight: 600; }

/* Capacity planning — work-center x day load heat grid */
.wcap-grid { display: grid; grid-template-columns: 130px repeat(5, minmax(72px, 1fr)); min-width: 560px; }
.wcap-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: center; }
.wcap-lane { padding: 9px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); font-weight: 600; font-size: 13px; display: flex; align-items: center; }
.wcap-cell { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 9px 4px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }

/* Multi-select customer chips (Demand Exceptions / WD baseline) */
.dmx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 12px; }
.dmx-chips-label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-right: 2px; }
.dmx-chip { border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; font-size: 12px; background: var(--panel); color: var(--muted); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.dmx-chip:hover { border-color: var(--accent, #047857); color: var(--text); }
.dmx-chip.on { background: var(--accent-soft, #ECFDF5); border-color: var(--accent, #047857); color: var(--accent-text, #065F46); font-weight: 600; }

/* ------------- COMPACT FILTER CHIPS (NEW v2) ------------- */
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filter-chips .chip-search { flex: 1 1 240px; min-width: 200px; }
.filter-chips .chip-search input { width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; background: var(--panel); min-height: 36px; }
.filter-chips select { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 8px 10px; background: var(--panel); min-height: 36px; font-size: 13px; min-width: 140px; }
.filter-chips .chip-more { color: var(--accent-ui, var(--green)); background: transparent; border: 0; padding: 8px 6px; font-size: 12px; font-weight: 600; }
.more-filters { display: none; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; }
.more-filters.open { display: flex; }
.more-filters .field { display: grid; gap: 4px; }
.more-filters .field label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.more-filters select, .more-filters input { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 7px 10px; background: var(--panel); min-height: 34px; font-size: 13px; }

/* ------------- MULTI-PICKER (NEW v2) ------------- */
.mpicker { position: relative; display: inline-block; }
.mpicker-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 6px 10px 6px 12px; min-height: 36px; font-size: 13px; color: var(--text); white-space: nowrap; min-width: 140px; }
.mpicker-btn:hover { border-color: var(--text); }
.mpicker-btn.has-selection { border-color: var(--green); background: rgba(0,122,94,0.04); }
.mpicker-btn .mpicker-lbl { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.mpicker-btn .mpicker-val { font-weight: 600; color: var(--text); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.mpicker-btn .mpicker-caret { color: var(--muted); font-size: 11px; margin-left: 2px; }
.mpicker-pop { position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: 320px; background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 30; }
.mpicker-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--muted); }
.mpicker-clear { background: transparent; border: 0; color: var(--accent-ui, var(--green)); font-size: 11px; font-weight: 600; padding: 0; }
.mpicker-list { max-height: 320px; overflow-y: auto; padding: 4px 0; }
.mpicker-opt { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.mpicker-opt:hover { background: rgba(0,122,94,0.05); }
.mpicker-opt input { margin: 0; cursor: pointer; }
.mpicker-opt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpicker-group { padding: 8px 12px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); }
/* Period multi-picker sits in the scope bar — tint it like the other scope selectors */
.mpicker.period-picker .mpicker-btn { background: rgba(21,95,114,0.06); border-color: rgba(21,95,114,0.3); }
.mpicker.period-picker .mpicker-btn .mpicker-lbl { color: var(--blue); }
.mpicker.period-picker .mpicker-btn.has-selection { border-color: var(--blue); background: rgba(21,95,114,0.1); }

/* ------------- WORK QUEUE (NEW v2) ------------- */
.queue-group { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.queue-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.queue-group-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.queue-group-head .group-meta { color: var(--muted); font-size: 12px; }
.queue-list { display: grid; gap: 6px; }
.queue-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 110px 110px 140px 140px 80px; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); text-align: left; cursor: pointer; transition: border-color 0.12s; }
.queue-row:hover { border-color: rgba(0,122,94,0.4); background: rgba(0,122,94,0.025); }
.queue-row .sev { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.queue-row .sev.high { background: var(--red); }
.queue-row .sev.med { background: var(--amber); }
.queue-row .sev.low { background: var(--green); }
.queue-row .title { min-width: 0; }
.queue-row .title strong { display: block; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-row .title small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-row .meta { font-size: 12px; color: var(--muted); }
.queue-row .meta strong { display: block; color: var(--text); font-size: 12px; font-weight: 600; }
.queue-row .meta small { display: block; margin-top: 1px; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.queue-row .go { text-align: right; color: var(--green); font-size: 12px; font-weight: 600; }
.queue-quickfilters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.queue-quickfilters button { border: 1px solid var(--border-strong); background: var(--panel); border-radius: 999px; padding: 6px 12px; font-size: 12px; color: var(--muted); }
.queue-quickfilters button.active { background: var(--accent-ui, var(--green)); color: #fff; border-color: var(--accent-ui, var(--green)); }

/* ------------- KPI / METRIC (kept) ------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; min-width: 0; }
.kpi.featured { background: var(--green); border-color: var(--green); color: #fff; }
.kpi label { display: block; color: var(--faint); font-size: 10px; font-weight: 760; letter-spacing: 0.07em; text-transform: uppercase; }
.kpi.featured label { color: rgba(255,255,255,0.78); }
.kpi strong { display: block; margin-top: 8px; font-size: 25px; font-weight: 760; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
.kpi small { display: block; margin-top: 7px; color: var(--muted); line-height: 1.3; }
.kpi.featured small { color: rgba(255,255,255,0.85); }

.two-col { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr); gap: 14px; align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,0.02); min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.panel-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.panel-head span { color: var(--faint); font-size: 12px; }

/* ------------- TABLES (kept) ------------- */
.table-wrap { overflow-x: auto; overflow-y: auto; max-width: 100%; padding-bottom: 8px; scrollbar-gutter: stable; }
/* The thumb's border fakes an inset by matching the track behind it, so both have to come
   from the surface token - hardcoded #f8f7f3 put a cold grey gutter on the editorial skin's
   warm ground and inverted badly in dark. */
.table-wrap { scrollbar-width: thin; scrollbar-color: rgba(22,22,22,0.28) transparent; }
.table-wrap::-webkit-scrollbar { height: 12px; width: 12px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: rgba(22,22,22,0.26); border-radius: 999px;
  border: 3px solid var(--surface, #f8f7f3); background-clip: padding-box;
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(22,22,22,0.42); background-clip: padding-box; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-corner { background: transparent; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 2; color: var(--faint); background: #f8f7f3; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
td.wrap { white-space: normal; line-height: 1.35; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: rgba(0,122,94,0.05); }
tr.selected td { background: rgba(0,122,94,0.07); }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 8px; background: var(--panel-2); color: var(--muted); font-size: 10px; font-weight: 760; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.pill.ok { color: var(--green); background: rgba(0,122,94,0.1); }
.pill.warn { color: var(--amber); background: rgba(186,117,23,0.12); }
.pill.red { color: var(--red); background: rgba(185,28,28,0.1); }
.delta-down { color: var(--red); }
.delta-up { color: var(--green); }

/* ------------- ITEM CARD GRID (NEW v2 Line Plan) ------------- */
.item-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.item-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 0; text-align: left; min-width: 0; cursor: pointer; overflow: hidden; transition: border-color 0.12s, transform 0.12s; }
.item-card:hover, .item-card.active { border-color: rgba(0,122,94,0.5); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,122,94,0.08); }
.item-card.active { border-width: 2px; padding: -1px; }
.item-card .card-img { aspect-ratio: 1 / 1; background: var(--panel-2); object-fit: cover; width: 100%; display: block; }
.item-card .card-img-placeholder { aspect-ratio: 1 / 1; background: var(--panel-2); display: grid; place-items: center; color: var(--faint); font-size: 11px; }
.item-card .card-body { padding: 10px 12px 12px; display: grid; gap: 4px; min-height: 110px; }
.item-card .card-body strong { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.item-card .card-body small { color: var(--muted); font-size: 11px; }
.item-card .card-stats { display: flex; gap: 10px; margin-top: auto; padding-top: 6px; }
.item-card .card-stats div { font-size: 11px; color: var(--muted); }
.item-card .card-stats strong { font-size: 12px; color: var(--text); display: block; font-variant-numeric: tabular-nums; }
.item-card .card-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--border); background: rgba(0,0,0,0.015); }
.item-card .card-foot .sku { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; color: var(--faint); }

/* ------------- SELECTED-STYLE DRAWER (NEW v2) ------------- */
.style-drawer { position: sticky; bottom: 0; margin-top: 18px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; box-shadow: 0 -4px 16px rgba(0,0,0,0.04); }
.style-drawer img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--panel-2); border-radius: var(--radius); }
.style-drawer .drawer-body { display: flex; flex-direction: column; min-width: 0; }
.style-drawer .drawer-title { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.style-drawer .drawer-title h3 { margin: 0; font-size: 20px; line-height: 1.2; }
.style-drawer .drawer-title p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.style-drawer .drawer-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.style-drawer .drawer-metric { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.style-drawer .drawer-metric label { color: var(--faint); font-size: 10px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; }
.style-drawer .drawer-metric strong { display: block; margin-top: 4px; font-size: 19px; font-variant-numeric: tabular-nums; }
.style-drawer .drawer-attrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.style-drawer .drawer-attrs .attr { font-size: 12px; }
.style-drawer .drawer-attrs label { display: block; color: var(--faint); font-size: 10px; text-transform: uppercase; font-weight: 700; }
.style-drawer .drawer-attrs strong { display: block; margin-top: 3px; font-size: 12px; color: var(--text); }
.style-drawer .drawer-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ------------- SCENARIO STRIP (NEW v2 Demand Review) ------------- */
.scenario-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.scenario-cell { border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); padding: 10px 12px; }
.scenario-cell label { display: block; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.scenario-cell strong { display: block; margin-top: 4px; font-size: 18px; font-variant-numeric: tabular-nums; }
.scenario-cell small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }

/* ------------- TAB STRIP (NEW v2 — Supply Review packet) ------------- */
.tab-strip { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tab-strip button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; position: relative; }
.tab-strip button:hover { color: var(--text); }
.tab-strip button.active { color: var(--accent-ui, var(--green)); border-bottom-color: var(--accent-ui, var(--green)); }
.tab-strip button .tab-badge { display: inline-block; margin-left: 6px; background: var(--panel-2); border-radius: 999px; padding: 1px 8px; font-size: 10px; color: var(--muted); font-weight: 700; }
.tab-strip button.active .tab-badge { background: rgba(0,122,94,0.12); color: var(--green); }
.tab-strip button.warn .tab-badge { background: rgba(186,117,23,0.14); color: var(--amber); }

/* ------------- PACKET SUMMARY (NEW v2 — Supply Review banner) ------------- */
.packet-summary { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--amber); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 14px; }
.packet-summary.ok { border-left-color: var(--green); }
.packet-summary.alert { border-left-color: var(--red); }
.packet-summary .ps-icon { width: 32px; height: 32px; border-radius: 50%; background: rgba(186,117,23,0.12); color: var(--amber); display: grid; place-items: center; font-weight: 800; font-size: 16px; flex: 0 0 32px; }
.packet-summary.ok .ps-icon { background: rgba(0,122,94,0.1); color: var(--green); }
.packet-summary.alert .ps-icon { background: rgba(185,28,28,0.1); color: var(--red); }
.packet-summary .ps-body { flex: 1; min-width: 0; }
.packet-summary .ps-body strong { display: block; font-size: 14px; margin-bottom: 2px; }
.packet-summary .ps-body span { display: block; color: var(--muted); font-size: 12px; }
.packet-summary .ps-actions { display: flex; gap: 8px; flex: 0 0 auto; }

/* ------------- ACTION RAIL (NEW v2 — Line Plan + drawer) ------------- */
.action-rail { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.action-pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border-strong); background: var(--panel); border-radius: 999px; padding: 5px 11px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.action-pill:hover { color: var(--text); border-color: var(--text); }
.action-pill.active.watch { color: var(--blue); background: rgba(21,95,114,0.08); border-color: rgba(21,95,114,0.4); }
.action-pill.active.include { color: var(--green); background: rgba(0,122,94,0.1); border-color: rgba(0,122,94,0.4); }
.action-pill.active.cut { color: var(--red); background: rgba(185,28,28,0.08); border-color: rgba(185,28,28,0.4); }

.decision-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
.decision-tag.watch { color: var(--blue); background: rgba(21,95,114,0.1); }
.decision-tag.include { color: var(--green); background: rgba(0,122,94,0.1); }
.decision-tag.cut { color: var(--red); background: rgba(185,28,28,0.1); }

/* ------------- RECENTLY OPENED (NEW v2 — command bar) ------------- */
.recent-row { display: flex; gap: 6px; padding: 8px 14px; background: var(--panel-2); border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.recent-row label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }
.recent-row button { background: var(--panel); border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px; font-size: 11px; color: var(--text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.recent-row button:hover { border-color: var(--green); color: var(--green); }

/* ------------- DATA TRUST PAGE (NEW v2) ------------- */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 18px; }
.trust-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.trust-card label { display: block; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; margin-bottom: 8px; }
.trust-card strong { display: block; font-size: 17px; line-height: 1.3; margin-bottom: 6px; word-break: break-word; }
.trust-card small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.trust-card .trust-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 6px; background: var(--faint); }
.trust-card.live .trust-dot { background: var(--green); }
.trust-card.warn .trust-dot { background: var(--amber); }
.trust-card.alert .trust-dot { background: var(--red); }
.trust-stat { display: flex; gap: 18px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; }
.trust-stat div span { display: block; color: var(--faint); font-size: 10px; text-transform: uppercase; font-weight: 700; }
.trust-stat div strong { display: block; margin-top: 2px; font-size: 14px; font-variant-numeric: tabular-nums; }

/* ------------- WEEKLY VARIANCE BAR (NEW v2 — Demand Review) ------------- */
.weekly-bars { display: flex; gap: 3px; align-items: flex-end; height: 80px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); margin-bottom: 14px; }
.weekly-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.weekly-bar .bar { width: 100%; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--green); position: relative; }
.weekly-bar .bar.neg { background: var(--red); }
.weekly-bar .bar.flat { background: var(--faint); height: 2px; }
.weekly-bar .label { font-size: 9px; color: var(--faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ------------- SIZE CURVE (NEW v2) ------------- */
.curve-row { display: grid; grid-template-columns: 180px 80px 80px 80px 80px 80px 80px 80px 80px 100px 90px; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.curve-row.head { background: #f8f7f3; color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.curve-row .size-cell { text-align: right; font-variant-numeric: tabular-nums; }
.curve-row .style-cell strong { display: block; font-size: 12px; }
.curve-row .style-cell small { display: block; color: var(--muted); font-size: 10px; }
.curve-exception { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px; background: var(--panel-2); color: var(--muted); }
.curve-exception.miss { color: var(--red); background: rgba(185,28,28,0.08); }
.curve-exception.broken { color: var(--amber); background: rgba(186,117,23,0.12); }
.curve-exception.lowconf { color: var(--blue); background: rgba(21,95,114,0.1); }
.curve-exception.override { color: var(--green); background: rgba(0,122,94,0.1); }

/* ------------- VIEW TOGGLE (segmented) ------------- */
.segmented { display: inline-flex; border: 1px solid var(--border); background: var(--panel-2); border-radius: var(--radius); padding: 3px; gap: 2px; }
.segmented button { border: 0; background: transparent; border-radius: 6px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
.segmented button.active { background: var(--panel); color: var(--accent-ui, var(--green)); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ------------- LINE PLAN TABLE (dense view) ------------- */
.line-plan-table table { min-width: 1100px; }
.table-thumb { width: 40px; height: 40px; border-radius: 5px; object-fit: cover; background: var(--panel-2); flex: 0 0 auto; display: block; }
.table-thumb-empty { width: 40px; height: 40px; border-radius: 5px; background: var(--panel-2); display: block; }
.thumb-cell { width: 50px; padding: 6px 10px !important; }

/* ------------- LEGACY (kept) ------------- */
.queue-card { border-left: 3px solid var(--green); padding: 12px 14px; display: grid; gap: 5px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); border-left-width: 3px; }
.queue-card.warn { border-left-color: var(--amber); }
.queue-card.red { border-left-color: var(--red); }
.queue-card strong { font-size: 14px; }
.queue-card span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.empty { padding: 22px; color: var(--muted); text-align: center; }
.loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 320px; padding: 48px; color: var(--muted); font-size: 14px; }
.loading-state .spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--green); animation: cad-spin 0.7s linear infinite; }
@keyframes cad-spin { to { transform: rotate(360deg); } }

@media (max-width: 1120px) {
  /* Icon-rail collapse is a LEFT-SIDEBAR concept. On the topbar layout these hides amputated the
     wordmark and every flat tab (found 2026-08-11 at 140% browser zoom on a scaled display) —
     topbar narrow behavior lives in its own block below. */
  body:not([data-layout="topbar"]) .app-shell { grid-template-columns: 78px minmax(0, 1fr); }
  body:not([data-layout="topbar"]) .sidebar-brand span,
  body:not([data-layout="topbar"]) .nav-item span:not(.nav-icon),
  body:not([data-layout="topbar"]) .nav-group-label,
  body:not([data-layout="topbar"]) .sidebar-footer { display: none; }
  .topbar { grid-template-columns: 1fr; align-items: start; }
  .command-bar { display: none; }
  .kpi-grid, .scenario-strip, .three-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col, .style-drawer { grid-template-columns: 1fr; }
  .queue-row { grid-template-columns: 22px minmax(0, 1fr) 100px 90px; }
  .queue-row .meta:nth-child(n+5) { display: none; }
  .style-drawer .drawer-metrics, .style-drawer .drawer-attrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .kpi-grid, .scenario-strip { grid-template-columns: 1fr; }
  .filter-chips { flex-direction: column; align-items: stretch; }
  .filter-chips select { width: 100%; }
  .view { padding: 18px 14px 36px; }
  .scope-context { flex-direction: column; align-items: flex-start; gap: 10px; }
  .scope-context .scope-totals { flex: none; justify-content: flex-start; margin-left: 0; gap: 22px; flex-wrap: wrap; }
}

/* ---- In-app glossary / "How this works" slide-over ---- */
.help-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .42); backdrop-filter: blur(2px); display: none; z-index: 1000; }
.help-overlay.open { display: flex; justify-content: flex-end; }
.help-panel { width: min(440px, 92vw); height: 100%; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--border); box-shadow: -10px 0 36px rgba(0, 0, 0, .16); padding: 26px 26px 40px; animation: helpSlide .18s ease; }
@keyframes helpSlide { from { transform: translateX(26px); opacity: .4; } to { transform: none; opacity: 1; } }
.help-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.help-kicker { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font-weight: 700; }
.help-head h3 { margin: 3px 0 0; font-size: 19px; color: var(--text); }
.help-close { border: 0; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 2px; }
.help-close:hover { color: var(--text); }
.help-what { color: var(--text); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.help-terms { margin: 0; }
.help-terms dt { font-weight: 700; font-size: 13px; color: var(--text); margin-top: 15px; }
.help-terms dd { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.help-terms dd strong { color: var(--text); }
.help-foot { margin-top: 24px; padding-top: 15px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); line-height: 1.5; }
.help-empty { color: var(--muted); font-style: italic; font-size: 13px; }

/* ---- Forecast Lab: per-item explainability slide-over ---- */
.exp-panel { width: min(480px, 94vw); }
.exp-why { font-weight: 600; white-space: nowrap; }
.exp-sub { display: block; margin-top: 7px; font-size: 12px; color: var(--muted); }
.exp-sub code { font-size: 11px; }
.exp-narr { font-size: 14px; line-height: 1.6; color: var(--text); margin: 4px 0 20px; padding: 13px 15px; background: var(--accent-soft); border: 1px solid var(--border); border-radius: 10px; }
.exp-narr strong { color: var(--text); }
.exp-sec { margin: 0 0 22px; }
.exp-sec-h { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin-bottom: 9px; }
.exp-body { font-size: 13px; line-height: 1.55; color: var(--text); margin: 0 0 10px; }
.exp-body strong { color: var(--text); }
.exp-blend { display: flex; height: 26px; border-radius: 7px; overflow: hidden; font-size: 11px; font-weight: 700; color: #fff; }
.exp-blend-ml { background: var(--accent); display: flex; align-items: center; justify-content: center; min-width: 0; }
.exp-blend-tr { background: #94a3b8; display: flex; align-items: center; justify-content: center; min-width: 0; }
.exp-decomp-nums { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.exp-decomp-nums > div { display: flex; flex-direction: column; gap: 2px; }
.exp-decomp-nums label { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.exp-decomp-nums strong { font-size: 16px; color: var(--text); }
.exp-op { font-size: 16px; color: var(--muted); padding-bottom: 2px; font-weight: 600; }
.exp-chart { position: relative; height: 84px; display: flex; align-items: flex-end; gap: 3px; padding: 4px 0; }
.exp-bar { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.exp-bar i { display: block; width: 100%; border-radius: 2px 2px 0 0; }
.exp-bar i.up { background: var(--accent); }
.exp-bar i.down { background: #cbd5e1; }
.exp-base { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--muted); z-index: 1; }
.exp-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; margin: 9px 0 0; }
.exp-facs { list-style: none; margin: 0; padding: 0; }
.exp-fac { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.exp-fac:last-child { border-bottom: 0; }
.exp-fac-ic { font-size: 11px; line-height: 1.5; margin-top: 1px; }
.exp-fac.up .exp-fac-ic { color: var(--green); }
.exp-fac.down .exp-fac-ic { color: var(--red); }
.exp-fac.neutral .exp-fac-ic { color: var(--muted); }
.exp-fac strong { display: block; font-size: 13px; color: var(--text); }
.exp-fac span { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 1px; }
.exp-drv { margin: 0 0 10px; }
.exp-drv-head { display: flex; align-items: baseline; gap: 7px; font-size: 13px; }
.exp-drv-head strong { color: var(--text); font-weight: 600; }
.exp-drv-share { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.exp-drv-dir { font-size: 10px; line-height: 1; }
.exp-drv-dir.up { color: var(--green); }
.exp-drv-dir.down { color: var(--red); }
.exp-drv-bar { height: 6px; border-radius: 3px; background: var(--border); margin-top: 4px; overflow: hidden; }
.exp-drv-bar i { display: block; height: 100%; border-radius: 3px; }
.exp-drv-bar i.up { background: var(--green); }
.exp-drv-bar i.down { background: var(--red); }

/* ---- Forecast Value Add (the trust stairstep) ---- */
.fva-ladder { margin: 18px 0 8px; display: flex; flex-direction: column; gap: 12px; }
.fva-row { display: grid; grid-template-columns: 220px 1fr 200px; align-items: center; gap: 16px; }
.fva-row-label strong { display: block; font-size: 14px; color: var(--text); }
.fva-row-label span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.fva-bar-wrap { background: var(--border); border-radius: 7px; height: 30px; overflow: hidden; }
.fva-bar { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; color: #fff; font-weight: 700; font-size: 13px; border-radius: 7px; transition: width .25s ease; min-width: 40px; }
.fva-bar.fva-naive { background: #94a3b8; }
.fva-bar.fva-trend { background: var(--amber, #f59e0b); }
.fva-bar.fva-cadence { background: var(--accent); }
.fva-row-fva { font-size: 13px; color: var(--text); }
.fva-sec { margin: 22px 0 0; }
.fva-sec-h { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--muted); margin-bottom: 9px; }
.fva-movers { display: flex; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.fva-half { flex: 1 1 320px; min-width: 0; }
@media (max-width: 760px) { .fva-row { grid-template-columns: 1fr; gap: 6px; } .fva-row-fva { margin-top: 2px; } }

/* ---- Demand / Supply Analytics (Chart.js dashboards) ---- */
.da-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.da-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 16px; min-width: 0; }
.da-card.da-wide { grid-column: 1 / -1; }
.da-card-h strong { font-size: 14px; color: var(--text); font-weight: 600; }
.da-card-h span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.da-canvas-wrap { position: relative; height: 260px; margin-top: 10px; }
.da-wide .da-canvas-wrap { height: 300px; }

/* ---- Demand Composition reference-screen polish. The horizon control, the frozen grid columns, the
   total-row weight and the header treatment are the pieces we carry to the other forms. ---- */
/* Form toolbar: the POV row's right end carries the horizon control + the form's Export/Refresh actions. */
.wd-filter-row .wd-filter-right { margin-left: auto; display: inline-flex; align-items: center; gap: 18px; }
.dc-actions { display: inline-flex; align-items: center; gap: 8px; }
/* Horizon = a real segmented control (a track with one filled segment), not four bordered boxes. */
.dc-hz { display: inline-flex; align-items: center; gap: 9px; }
.dc-hz-lab { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.dc-hz-seg { display: inline-flex; background: var(--cp-surface, #fffdf8); border: 1px solid var(--cp-rule, var(--border)); border-radius: 9px; padding: 2px; }
.dc-hz-btn { border: 0; background: transparent; color: var(--cp-muted, var(--muted)); font-size: 11.5px; font-weight: 600; padding: 4px 12px; cursor: pointer; border-radius: 7px; font-variant-numeric: tabular-nums; transition: background .14s ease, color .14s ease; }
.dc-hz-btn.on { background: var(--cp-tenant-accent, var(--cp-accent, var(--accent))); color: #fff; box-shadow: 0 1px 2px rgba(20,20,20,.14); }
.dc-hz-btn:hover:not(.on) { color: var(--cp-ink, var(--text)); }

/* ---- Demand Composition top-of-page: two tiers (secondary nav + ONE command/context surface), and the
   Codex flagship palette — white chrome, one warm workspace band, plum authority, cool-neutral data
   (Will, 2026-08-31). The shell/canvas parts key on :has(.dc-toolbar) so only the refactored screen adopts
   them until the other Principal forms follow the same pattern. ---- */
body[data-skin="editorial"]:not([data-shell="editorial"]) .view { padding-top: 8px; }
/* white chrome: global top nav + secondary tab rail — GLOBAL for the tenant (crisp, divided, not another
   beige band), so the chrome stays consistent across screens rather than flickering per route. */
body[data-skin="editorial"]:not([data-shell="editorial"]) #shell { background: #FFFFFF; border-bottom: 1px solid #E2DED6; }
/* Profile badge: plum, not the legacy green — it's the only strong colour top-right, so it should be
   the authority plum, not a leftover brand green. */
body[data-skin="editorial"]:not([data-shell="editorial"]) .user-card > span,
body[data-skin="editorial"]:not([data-shell="editorial"]) .shell-user > span { background: linear-gradient(135deg, #5A3470, #7A4E96) !important; color: #fff; }
/* The actual painted top-bar layers were warm off-whites (.sidebar #FFFDFA, .topbar #FBFAF7) that read
   as a separate beige system against the cooler canvas — whiten them so the chrome is one clean white,
   separated from the canvas by the border, not a yellower fill. */
body[data-skin="editorial"]:not([data-shell="editorial"]) .sidebar,
body[data-skin="editorial"]:not([data-shell="editorial"]) .topbar { background: #FFFFFF; }
body[data-skin="editorial"]:not([data-shell="editorial"]) #shell-context-nav { background: #FFFFFF; border-bottom: 1px solid #E2DED6; box-shadow: none; }
/* plum active underline on the secondary tab rail (was the tenant navy) — plum = authority/selection */
body[data-skin="editorial"]:not([data-shell="editorial"]) .shell-context-link.active { color: #302437; border-bottom-color: #5A3470; }
/* Top nav keeps the PACE per-phase hues (Will wants them — kept). No plum override here: the active
   phase reads in its own PACE colour + underline; plum stays the authority for in-phase selection
   (the switcher, active states, the table header), a distinct colour language from the phase taxonomy. */
/* Let the subnav "More" dropdown escape the tab row's horizontal-scroll clip (5 tabs + More fit fine). */
body[data-skin="editorial"]:not([data-shell="editorial"]) .shell-context-links { overflow: visible !important; }
/* App canvas — a greyish warm off-white (Claude-app-like, NOT yellow beige). The whole ground reads as
   one quiet canvas: body/main/view all share it so there's no dark-beige bottom fill. Scoped to the
   refactored screen. The warmth lives here + the forecast bars, never in a control container. */
body[data-skin="editorial"]:not([data-shell="editorial"]),
body[data-skin="editorial"]:not([data-shell="editorial"]) .main,
body[data-skin="editorial"]:not([data-shell="editorial"]) .view { background: #F6F5F1; }
/* Data cards are the white surfaces that do the work — they lift off the quiet canvas. Tenant-wide now
   (go-live: every Principal form gets the flagship ground + white cards). */
body[data-skin="editorial"]:not([data-shell="editorial"]) .da-card,
body[data-skin="editorial"]:not([data-shell="editorial"]) .fdg-card,
body[data-skin="editorial"]:not([data-shell="editorial"]) .cad-card { background: #FFFFFF; border-color: #E2DED6; border-radius: 6px; }
/* Precise, gridded surfaces — tighter corners, not soft SaaS cards (Will, 2026-08-31): cards 6px,
   inputs/buttons 6px, popovers 8px; the horizon segmented pill stays rounded because it's a control.
   Not sharp — just no soft dashboard-card feel. */
body[data-skin="editorial"]:not([data-shell="editorial"]):has(.dc-toolbar) .cadtree-field { border-radius: 6px; }
body[data-skin="editorial"]:not([data-shell="editorial"]):has(.dc-toolbar) .dc-actions .secondary-btn { border-radius: 6px; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-pop { border-radius: 8px; }
/* White control inputs floating on the canvas, subtle grey borders (Auburn-style filters). */
body[data-skin="editorial"]:not([data-shell="editorial"]):has(.dc-toolbar) .cadtree-field,
body[data-skin="editorial"]:not([data-shell="editorial"]):has(.dc-toolbar) .dc-hz-seg { background: #FFFFFF; border-color: #E2DED6; }
/* Tighter toolbar row (~6px): shorter picker fields + less bottom margin. */
body[data-skin="editorial"]:not([data-shell="editorial"]):has(.dc-toolbar) .cadtree-field { min-height: 34px; padding-top: 3px; padding-bottom: 3px; }

/* (1) The filter row is NOT a container — no fill, no border, no rounded box. The controls (white inputs)
   float directly on the canvas, exactly like Auburn's filters. It's chrome, so it disappears; the only
   thing that reads is the white pickers on the quiet ground. One baseline for every control. */
.dc-toolbar { display: flex; align-items: center; gap: 16px; background: transparent; border: 0; border-radius: 0; padding: 0; margin: 2px 2px 8px; }
.dc-cmd-pov { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-cmd-tools { display: flex; align-items: center; gap: 16px; margin-left: auto; }
/* Compact grouped page switcher — replaces the full-width secondary nav rail (Will, 2026-08-31). A quiet
   breadcrumb ("Plan / Demand Composition ▾"), NOT another filter button, opening a narrow dense grouped
   popover (Planning / Analysis / Master Data). Sits low next to the filters. */
body[data-skin="editorial"]:not([data-shell="editorial"]):has(.dc-switcher) #shell-context-nav { display: none !important; }
.dc-switcher { position: relative; display: inline-flex; }
.dcsw-btn { display: inline-flex; align-items: baseline; gap: 7px; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 3px 9px 3px 8px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
/* Refined hover: a soft warm-gray fill with a hairline, not a flat block. */
.dcsw-btn:hover { background: #F1EFEA; border-color: #E6E2DB; }
.dc-switcher.open .dcsw-btn { background: #F1EFEA; border-color: #DCD5E0; }
.dcsw-phase { font-size: 12px; font-weight: 500; color: #7A756E; }
.dcsw-sep { font-size: 12px; color: #C0B9AF; }
.dcsw-cur { font-size: 12.5px; font-weight: 650; color: #302437; }
.dcsw-caret { font-size: 9px; color: #8A847C; align-self: center; }
/* Three-column command-popover, NOT a tall vertical drawer: the groups sit side by side so the menu is
   short (overlays little of the chart) rather than a side panel. Tight rows, crisp border, snug shadow. */
.dcsw-menu { display: none; position: absolute; top: calc(100% + 5px); left: 0; background: #FFFFFF; border: 1px solid #E2DED6; border-radius: 8px; box-shadow: 0 10px 26px rgba(40,30,45,0.12); padding: 7px 5px; z-index: 70; }
.dc-switcher.open .dcsw-menu { display: flex; gap: 3px; align-items: stretch; }
.dcsw-sec { display: flex; flex-direction: column; min-width: 124px; padding: 0 1px; }
.dcsw-sec + .dcsw-sec { border-left: 1px solid #F0ECE5; padding-left: 7px; margin-left: 1px; }
.dcsw-sec-h { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #B2ABA1; padding: 1px 8px 4px; }
.dcsw-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 4px 7px; border: 0; border-radius: 6px; background: transparent; color: #3A3540; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; line-height: 1.28; }
.dcsw-item:hover { background: #F6F5F1; color: #302437; }
/* Refined selected: plum text + check, a whisper of lavender, and a crisp plum left accent. */
.dcsw-item.active { background: color-mix(in srgb, #5A3470 5%, #fff); color: #302437; font-weight: 600; box-shadow: inset 2px 0 0 #5A3470; }
.dcsw-tick { color: #5A3470; font-size: 10px; }

/* ---- Principal POV picker (cadTreeSel): premium DENSITY pass (Will, 2026-08-31). Same interaction
   model, calmer and right-sized (the prior pass over-shrank to cramped). Targets: ~36px rows, ~38px
   search, child text 14/450, parent 15/semibold (not bold), muted tabular counts, thin guide lines,
   small plum check, small chip, popover ~16% narrower. ---- */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-pop { background: #FFFFFF; border-color: #E2DED6; box-shadow: 0 12px 30px rgba(40,30,45,0.12); width: 308px; max-height: 560px; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-head,
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-total,
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-foot,
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-chips { background: #FFFFFF; border-color: #EDEAE4; }
/* search ~38px, integrated */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-head { padding: 9px 11px 8px; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-search { padding: 9px 11px; font-size: 13.5px; border-color: #E2DED6; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-search:focus { border-color: #5A3470; box-shadow: 0 0 0 3px rgba(90,52,112,0.10); }
/* rows ~35px, child text 14/450; hover warm-gray only */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-row { padding: 8px 12px 8px 8px; font-size: 14px; font-weight: 450; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-lab { line-height: 1.25; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-row:hover,
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-total:hover { background: #F6F5F1; }
/* parent (lvl0) = 15px semibold, quiet header — hairline separators, no fill, not huge */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-row.lvl0 { background: transparent; border-top: 1px solid #EDEAE4; border-bottom: 1px solid #EDEAE4; padding: 8px 12px; font-size: 15px; font-weight: 600; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-row.lvl1 { font-weight: 450; }
/* selected: plum, sparingly — plum text + a whisper of lavender; the total-row bg even subtler */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-row.is-sel { background: color-mix(in srgb, #5A3470 5%, #fff); color: #302437; font-weight: 600; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-row.lvl0.is-sel { background: color-mix(in srgb, #5A3470 5%, #fff); }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-total { padding: 8px 12px; font-size: 14px; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-total.is-sel { background: color-mix(in srgb, #5A3470 4%, #fff); color: #302437; }
/* small plum check */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-cb { accent-color: #5A3470; width: 14px; height: 14px; }
/* thin guide lines */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-guide { border-left: 1px solid #F0EDE7; }
/* counts: muted, tabular, a touch smaller than the label */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-dem { color: #A7A099; font-size: 13px; }
/* small, low-padded selected chip */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-chips { padding: 6px 10px; gap: 4px; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-chip { background: color-mix(in srgb, #5A3470 6%, #fff); border-color: #E3DCEA; padding: 1px 3px 1px 6px; font-size: 10.5px; }
/* Per-picker sizing: Location stays compact (slightly wider to avoid truncation, anchored under its
   control); Item is wider + taller — it holds thousands of SKUs and needs a visible searchable tree. */
#cadtree-field-dc-loc .cadtree-pop { left: 0; width: 336px; max-height: 480px; }
#cadtree-field-dc-item .cadtree-pop { width: 432px; max-height: 600px; }
/* Softer row dividers + subtler selected tint (let the plum checkbox carry selection). */
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-row.lvl0 { border-top-color: #F1EEE8; border-bottom-color: #F1EEE8; }
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-row.is-sel,
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-total.is-sel,
body[data-skin="editorial"]:not([data-shell="editorial"]) .cadtree-row.lvl0.is-sel { background: color-mix(in srgb, #5A3470 3%, #fff); }
/* (2) Chart-card header = one deliberate line: title + legend as a LEFT cluster, KPI chips as a tight
   metric group on the RIGHT. No big blank middle (the legend fills the centre); chart begins right under. */
.dc-chart-h { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; row-gap: 6px; margin-bottom: 6px; }
.dc-chart-hl { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.dc-chart-hl > strong { font-size: 15px; white-space: nowrap; }
.dc-chart-hl .da-legend { margin: 0; gap: 14px; flex-wrap: wrap; }         /* legend inline in the header, tight */
.dc-kpichips { display: inline-flex; align-items: baseline; gap: 18px; flex: none; }
.dc-kpi { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.dc-kpi-l { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8D8880; }  /* ~5% quieter */
.dc-kpi-v { font-size: 15.5px; font-weight: 720; color: #201B26; font-variant-numeric: tabular-nums; }               /* ~5% stronger */
/* chart begins close to the header */
.da-card:has(#dc-comp) .da-card-h { margin-bottom: 6px; }
.da-card:has(#dc-comp) .da-canvas-wrap { margin-top: 2px; }
/* (3) subnav "More" menu — an in-place dropdown for the lower-frequency tabs */
.ctx-more { position: relative; display: inline-flex; align-items: center; }
.ctx-more-btn { gap: 3px; }
.ctx-more-caret { font-size: 8px; opacity: 0.7; }
.ctx-more-menu { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: #FFFFFF; border: 1px solid #E2DED6; border-radius: 8px; box-shadow: 0 12px 30px rgba(40,30,45,0.14); padding: 5px; z-index: 60; }
.ctx-more.open .ctx-more-menu { display: block; }
.ctx-more-item { display: block; width: 100%; text-align: left; padding: 7px 12px; border: 0; border-radius: 7px; background: transparent; color: #4A4048; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.ctx-more-item:hover { background: color-mix(in srgb, #5A3470 8%, transparent); color: #302437; }

/* NOTE: the .dc-grid freeze/total-row/header overrides live at the END of this file — they have to win
   over the shared .afa-grid rules (defined later here), so they must come after them. */

/* Shorter chart — the data lives in a narrow band, so a tall plot just adds empty air. */
.da-card:has(#dc-comp) .da-canvas-wrap { height: 234px; }

/* Horizon/FY badge: a warm-neutral chip, not the cool green "live" pill. */
.src.dc-hzbadge { color: var(--cp-ink, var(--text)); background: color-mix(in srgb, var(--cp-tenant-accent, #1E3A5F) 10%, transparent); text-transform: none; letter-spacing: .02em; font-weight: 600; }
.da-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.da-legend span { display: inline-flex; align-items: center; gap: 5px; }
.da-swatch { display: inline-block; width: 12px; height: 10px; border-radius: 2px; }
@media (max-width: 900px) { .da-grid { grid-template-columns: 1fr; } }

/* ---- Forecast Adjustment cockpit ---- */
.aq-banner { background: var(--accent-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: var(--text); margin: 12px 0; }
.aq-banner i { font-style: normal; font-weight: 700; }
.aq-queued { background: var(--accent-soft); }
.aq-adopt { font-weight: 600; }
.aq-adopt.on { color: var(--green); }
.dmx-chip.disabled { opacity: .45; cursor: default; }
/* ---- Forecast Adjustment cockpit: filters + edit→apply→commit grid ---- */
.aq-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 12px; }
.aq-table th .aq-sub { font-size: 9px; color: var(--faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.aq-table td.aq-cad { color: var(--muted); font-variant-numeric: tabular-nums; }
.aq-table td.aq-fc-td { min-width: 132px; }
.aq-fc { display: flex; flex-direction: column; gap: 3px; }
.aq-fc-input { width: 78px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; background: var(--card); color: var(--text); }
.aq-fc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.aq-fc-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.aq-fc-quick { display: inline-flex; gap: 3px; }
.aq-fc-quick button { width: 20px; height: 20px; line-height: 1; padding: 0; border: 1px solid var(--border); border-radius: 5px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.aq-fc-quick button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.aq-nudge { font-size: 10.5px; line-height: 1.25; max-width: 200px; margin-top: 1px; }
.aq-nudge.down { color: #A32D2D; }
.aq-nudge.big { color: #BA7517; }
.aq-reason { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; background: var(--card); color: var(--text); max-width: 140px; }
.aq-reason.need { border-color: #BA7517; box-shadow: 0 0 0 2px rgba(186,117,23,.14); }
.aq-committed { color: var(--green); font-weight: 700; font-size: 11.5px; }
.aq-pending-row { background: rgba(186,117,23,.06); }
.aq-committed-row { background: var(--accent-soft); }
.aq-committed-row td.aq-cad { text-decoration: line-through; opacity: .6; }
.aq-subnote { font-size: 11.5px; color: var(--muted); margin: -6px 0 12px; }
.aq-est { color: var(--faint); font-weight: 700; cursor: help; }
.aq-table td .aq-est { margin-left: 1px; }
/* CBMF netting */
.cbmf-conf { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.cbmf-conf.excess { background: var(--green-soft, #E3F1EA); color: var(--green, #1D9E75); }
.cbmf-conf.onhand { background: #F2EEE3; color: #92702A; }
.cbmf-tag { font-size: 10px; font-weight: 700; color: #92702A; background: #F2EEE3; border-radius: 4px; padding: 0 4px; }
.cbmf-line { font-size: 12px; line-height: 1.5; }
.cbmf-line + .cbmf-line { margin-top: 1px; }
/* Capable-to-Promise status */
.ctp-stat { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; white-space: nowrap; }
.ctp-stat.short { background: #F6E2DF; color: #A32D2D; }
.ctp-stat.build { background: #F2EEE3; color: #92702A; }
/* Forecast Why — quick facts chips */
.exp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.exp-fact { background: var(--band, #F4F6F8); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; min-width: 0; }
.exp-fact label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.exp-fact b { font-size: 12.5px; color: var(--text); font-weight: 700; }
/* Forecast deep dive — full-screen */
.fcl-deep-ov { position: fixed; inset: 0; z-index: 200; background: rgba(15,23,42,0.55); display: none; padding: 24px; overflow: auto; }
.fcl-deep-ov.open { display: block; }
.fcl-deep-panel { max-width: 1140px; margin: 0 auto; background: var(--surface, #fff); border-radius: 14px; box-shadow: 0 24px 70px rgba(15,23,42,0.35); padding: 22px 26px 28px; }
.fdg-head { display: flex; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 16px; }
.fdg-head h2 { margin: 2px 0 4px; font-size: 20px; color: var(--text); }
.fdg-head > div:first-child { flex: 1; }
.fdg-tags { font-size: 12px; color: var(--muted); }
.fdg-tags code { background: var(--band,#F4F6F8); padding: 1px 6px; border-radius: 5px; }
.fdg-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.fdg-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fdg-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.fdg-card-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--green); margin-bottom: 8px; }
.fdg-ai-card { background: var(--accent-soft); border-color: rgba(0,122,94,0.25); }
.fdg-ai { font-size: 13.5px; line-height: 1.55; color: var(--text); }
.fdg-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.fdg-metric label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.fdg-metric strong { font-size: 15px; color: var(--text); }
.fdg-fva-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--border); }
.fdg-fva-row span { flex: 1; color: var(--muted); }
.fdg-fva-row.best { font-weight: 700; }
/* #112 routing & safety-stock evidence card */
.fev-axes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.fev-ax { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.fev-ax label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.fev-ax strong { font-size: 18px; color: var(--text); font-variant-numeric: tabular-nums; }
.fev-ax span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.fev-route { font-size: 12.5px; line-height: 1.5; color: var(--text); margin: 6px 0 0; }
.fev-flag { font-size: 11.5px; line-height: 1.45; color: #BA7517; margin: 6px 0 0; }
.fev-divider { border-top: 1px solid var(--border); margin: 12px 0 10px; }
.fev-ss-h { font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 7px; }
.fev-sl-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fev-sl { padding: 4px 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.fev-sl:hover { border-color: var(--accent); color: var(--accent); }
.fev-sl.rec { border-color: var(--accent); color: var(--accent); }
.fev-sl.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.fev-ss-val { margin-left: auto; font-size: 13px; color: var(--text); }
.fev-ss-val strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.fdg-fva-row i { font-style: normal; font-size: 11px; }
@media (max-width: 820px) { .fdg-grid { grid-template-columns: 1fr; } }
/* Global AI copilot (chatbot) */
.cadchat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 150; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--violet, #643192); color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 8px 22px rgba(100,49,146,0.42); }
.cadchat-fab:hover { filter: brightness(1.08); }
.cadchat-panel { position: fixed; right: 22px; bottom: 84px; z-index: 150; width: 372px; max-width: calc(100vw - 28px); height: 480px; max-height: calc(100vh - 120px); background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,0.30); display: none; flex-direction: column; overflow: hidden; }
.cadchat-panel.open { display: flex; }
.cadchat-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--violet, #643192); color: #fff; font-weight: 700; font-size: 14px; }
.cadchat-x { background: transparent; border: 0; color: #fff; font-size: 18px; cursor: pointer; line-height: 1; }
.cadchat-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.cadchat-empty { color: var(--muted); font-size: 13px; line-height: 1.55; }
.cadchat-msg { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.cadchat-msg.me { align-self: flex-end; background: var(--violet, #643192); color: #fff; border-bottom-right-radius: 4px; }
.cadchat-msg.ai { align-self: flex-start; background: var(--band, #F4F6F8); color: var(--text); border-bottom-left-radius: 4px; }
.cadchat-msg.busy { color: var(--muted); font-style: italic; }
.cadchat-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); }
.cadchat-input textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 8px; padding: 8px; font: inherit; font-size: 13px; max-height: 90px; box-sizing: border-box; }
.cadchat-send { border: 0; background: var(--violet, #643192); color: #fff; border-radius: 8px; padding: 0 14px; font-weight: 700; cursor: pointer; }

/* ---- Auburn transplant support: legacy cad-* tokens + KPI/card/table/mono rules ----
   The transplanted P&M / Cost Scenario / Sales Reporting markup uses the legacy shell's
   global cad-* classes; v2 never loaded that stylesheet. Self-contained copy (values
   inlined from the legacy tokens) so the KPI cards and tables render as designed. */
:root {
  --cad-navy:#0B2A4A; --cad-blue:#1E5BA8; --cad-ink:#15171A; --cad-muted:#5A6473;
  --cad-faint:#8A93A0; --cad-line:#E6E9EE; --cad-line-soft:#EEF1F5;
  --cad-surface:#FFFFFF; --cad-tint:#F2F5F9; --cad-accent:#1E5BA8;
  --cad-radius:11px; --cad-radius-sm:8px;
  --violet:#643192;   /* Ask Cadence + the Coordinate nav group */
  --cad-shadow:0 1px 2px rgba(16,32,56,0.05);
}
.cad-kpis { display:flex; gap:12px; flex-wrap:wrap; }
.cad-kpi { flex:1; min-width:150px; background:var(--cad-surface); border:1px solid var(--cad-line); border-radius:var(--cad-radius); padding:14px 16px; box-shadow:var(--cad-shadow); position:relative; overflow:hidden; }
.cad-kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cad-accent); opacity:0; transition:opacity .15s; }
.cad-kpi:hover::before { opacity:.8; }
.cad-kpi-l { font-size:9.5px; font-weight:700; color:var(--cad-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.cad-kpi-v { font-size:23px; font-weight:700; color:var(--cad-navy); line-height:1; font-variant-numeric:tabular-nums; }
.cad-kpi-s { font-size:10.5px; color:var(--cad-faint); margin-top:5px; }
.cad-card { background:var(--cad-surface); border:1px solid var(--cad-line); border-radius:var(--cad-radius); box-shadow:var(--cad-shadow); overflow:hidden; }
.cad-table { width:100%; border-collapse:collapse; }
.cad-table thead th { background:var(--cad-tint); padding:8px 11px; text-align:left; font-size:9px; font-weight:700; color:var(--cad-muted); text-transform:uppercase; letter-spacing:.05em; position:sticky; top:0; z-index:2; }
.cad-table thead th.num { text-align:right; }
.cad-table tbody td { padding:9px 11px; font-size:11.5px; color:var(--cad-ink); border-bottom:1px solid var(--cad-line-soft); }
.cad-table tbody tr:last-child td { border-bottom:none; }
.cad-table tbody tr:hover td { background:var(--cad-tint); }
.cad-table .num { text-align:right; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
.cad-mono { font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }


/* ===== LAYOUT VARIANT: top horizontal nav (body[data-layout="topbar"]) =====================
   A config-driven alternative to the default left sidebar — the whole chrome flips to a deep
   forest-green horizontal top bar (the same chrome the left rail uses, rotated) with a mint
   active-underline. Scoped entirely under the attribute so no other tenant is affected; module
   renderers are layout-agnostic (they render into #view either way). */
body[data-layout="topbar"] .app-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
body[data-layout="topbar"] .sidebar {
  position: sticky; top: 0; z-index: 30; height: auto; width: 100%;
  flex-direction: row; align-items: stretch; gap: 6px; padding: 0 22px;
  border-right: none; border-bottom: 1px solid rgba(0,0,0,0.28);
  background: linear-gradient(90deg, #0d2b1f 0%, #124a34 100%);
  box-shadow: 0 1px 5px rgba(0,0,0,0.20);
  /* deep-forest re-skin of the chrome tokens, local to the bar (matches the left-rail chrome) */
  --chrome-bg: transparent; --chrome-line: rgba(255,255,255,0.12); --chrome-text: #b8cfc2;
  --chrome-bright: #f2f1ea; --chrome-dim: #6e9c85; --chrome-hover: rgba(255,255,255,0.08);
  --chrome-active: rgba(255,255,255,0.10); --chrome-card: rgba(255,255,255,0.06);
}
body[data-layout="topbar"] .sidebar-brand { display: flex; flex-direction: column; justify-content: center; padding: 10px 22px 10px 0; margin-right: 6px; border-right: 1px solid rgba(255,255,255,0.14); flex: 0 0 auto; }
body[data-layout="topbar"] .sidebar-brand strong,
body[data-layout="topbar"] .sidebar-brand .wordmark .wm-1 { font-size: 18px; color: #f2f1ea; }
body[data-layout="topbar"] .sidebar-brand .wordmark .wm-2 { font-size: 18px; }
body[data-layout="topbar"] .sidebar-brand > span { margin-top: 2px; font-size: 10.5px; color: #8fb3a2; }
/* the nav is a row of group tabs; overflow:visible so dropdown panels escape the bar. Grouping keeps
   the top-level tab count small (~4-6) so the bar itself never needs to scroll. */
body[data-layout="topbar"] .sidebar-nav {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 2px;
  padding: 0; overflow: visible; flex: 1 1 0%; min-width: 0;
}
body[data-layout="topbar"] .nav-group { position: relative; display: flex; align-items: stretch; }
/* group label = the top-level tab trigger, with a dropdown caret */
body[data-layout="topbar"] .nav-group-label {
  display: inline-flex; align-items: center; gap: 6px; height: 100%; margin: 0; padding: 0 14px;
  cursor: pointer; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: #b8cfc2; border-bottom: 2.5px solid transparent;
}
body[data-layout="topbar"] .nav-group-label::after {
  content: none; width: 11px; height: 11px; flex: none; border: 0;
  background: currentColor; opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .17s cubic-bezier(.4,0,.2,1), opacity .17s ease;
}
body[data-layout="topbar"] .nav-group:hover > .nav-group-label,
body[data-layout="topbar"] .nav-group.open > .nav-group-label,
body[data-layout="topbar"] .nav-group:focus-within > .nav-group-label { color: #f2f1ea; }
body[data-layout="topbar"] .nav-group:hover > .nav-group-label::after,
body[data-layout="topbar"] .nav-group.open > .nav-group-label::after { transform: rotate(180deg); opacity: 0.8; }
/* active group — the one holding the current module */
body[data-layout="topbar"] .nav-group:has(.nav-item.active) > .nav-group-label {
  color: #ffffff; border-bottom-color: var(--tenant-accent-bright, #7ee2b0);
}
/* single-module group → a direct top-level tab (no dropdown) */
body[data-layout="topbar"] .nav-item-top {
  min-height: 0; height: 100%; width: auto; white-space: nowrap; border-radius: 0; padding: 0 14px;
  align-items: center; border-bottom: 2.5px solid transparent; font-size: 13px; font-weight: 600;
  color: #b8cfc2; background: transparent;
}
body[data-layout="topbar"] .nav-item-top:hover { background: rgba(255,255,255,0.08); color: #f2f1ea; }
body[data-layout="topbar"] .nav-item-top.active {
  background: rgba(255,255,255,0.06); color: #ffffff; font-weight: 700;
  border-bottom-color: var(--tenant-accent-bright, #7ee2b0);
}
/* dropdown panel of the group's modules — opens on hover/focus, escapes the bar */
body[data-layout="topbar"] .nav-group-items {
  display: flex; position: absolute; top: calc(100% + 5px); left: 0; z-index: 60;
  min-width: 210px; padding: 6px; flex-direction: column; gap: 2px;
  background: #0f3527; border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,0.38);
  visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* invisible hover bridge across the gap so moving onto the panel doesn't snap it shut */
body[data-layout="topbar"] .nav-group-items::before { content: ""; position: absolute; top: -9px; left: 0; right: 0; height: 9px; }
body[data-layout="topbar"] .nav-group:hover > .nav-group-items,
body[data-layout="topbar"] .nav-group.open > .nav-group-items,
body[data-layout="topbar"] .nav-group:focus-within > .nav-group-items {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
}
/* module rows inside the dropdown */
body[data-layout="topbar"] .nav-group-items .nav-item {
  min-height: 34px; width: 100%; border-radius: 7px; padding: 7px 11px; border-bottom: 0;
  font-size: 13px; font-weight: 600; color: #cfe3d8; white-space: nowrap;
}
body[data-layout="topbar"] .nav-group-items .nav-item:hover { background: rgba(255,255,255,0.09); color: #ffffff; }
body[data-layout="topbar"] .nav-group-items .nav-item.active { background: rgba(126,226,176,0.16); color: #ffffff; }
/* dark bar = monochrome wordmark (brand contract): "Plan" muted cream, color lives in the chip */
body[data-layout="topbar"] .sidebar-brand .wordmark .wm-2 { color: #f2f1ea; font-weight: 500; }
body[data-layout="topbar"] .nav-icon { display: none; }
/* top-nav: the account control (avatar + Profile/Preferences/Shortcuts/Sign out menu) moves to the
   right end of the bar — the standard top-right spot. Compact to an avatar + caret so it doesn't
   fight the horizontal nav for width; the tenant name still lives in the brand at top-left. */
body[data-layout="topbar"] .sidebar-footer {
  display: flex; align-items: center; flex: 0 0 auto; margin: 0 0 0 6px; padding: 0; border-top: 0;
}
body[data-layout="topbar"] .user-card { padding: 6px; gap: 0; border-radius: 8px; }
body[data-layout="topbar"] .user-card:hover { background: transparent; }
body[data-layout="topbar"] .user-card:hover > span { box-shadow: 0 0 0 3px rgba(4,120,87,0.18); }
body[data-layout="topbar"] .user-card > div { display: none; }
/* cleaner account control: circular avatar with a subtle lift, drop the floating ellipsis (the avatar IS the trigger) */
body[data-layout="topbar"] .user-card::after { content: none; }
body[data-layout="topbar"] .user-card > span { border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,0.06); transition: box-shadow .14s ease; }
body[data-chrome="inverted"] .user-card > span { box-shadow: 0 0 0 1px rgba(0,0,0,0.06); }
body[data-layout="topbar"] .user-card::after { color: #b8cfc2; padding-left: 4px; }
/* the page-title bar stays a light secondary bar under the green nav (content area is light) */
body[data-layout="topbar"] .topbar { border-bottom: 1px solid var(--border); background: #fbfaf7; }

/* Brand mark chip (jewel bars on light tile) in the wordmark lockups */
.wordmark .brand-mark {
  display: inline-block;
  vertical-align: -4px;
  margin-right: 8px;
  border-radius: 5px;
}
/* dark bar: soften the glyph tile from a stark white sticker to a frosted chip so it reads as
   part of the bar, not a badge stuck on it (Will 7/17). Inverted (white bar) still hides it. */
body[data-layout="topbar"] .sidebar-brand .brand-mark rect:first-child { fill: rgba(255, 255, 255, 0.12); }

/* The lockup mark is a raster PNG of the rabbit in dark plum ink, drawn for a WHITE bar. On a dark
   forest top bar it renders as a dark smudge on dark green. The reversed asset already ships in
   /brand/ and was referenced by nothing. NOTE this is the LEGACY .wordmark lockup, which is what
   10 of the 13 dark-bar tenants actually render (auburn, dhi, fv, ml, oliverbonas, purehockey,
   acp, demodev, dhidev, auburnv2) -- only afademo/afademo2/sof reach the .cp-lockup rules below,
   because that emitter is gated on skin/shell === 'editorial'. The wordmark needs nothing here:
   .wm-1/.wm-2 are already #f2f1ea above. */
body[data-layout="topbar"]:not([data-chrome="inverted"]) .sidebar-brand .brand-mark {
  content: url("/brand/mark-rabbit-friendlier-mono-cream-trim.png");
}

/* Canon wordmark, measured off Principal's LIVE stylesheet (.cp-lockup-wm): Newsreader 720,
   19px, -0.018em, single colour. Auburn/dhi/ml/oliverbonas render the LEGACY .wordmark -- they
   never reach .cp-lockup -- so canon has to be restated for that markup or they keep falling
   back to sans. Colour stays cream: canon's #17141d is the WHITE-bar treatment, this bar is dark.
   The mark stays 22px; canon's 28px would move the bar's geometry, which is not what was asked. */
body[data-layout="topbar"]:not([data-chrome="inverted"]) .sidebar-brand .wordmark,
body[data-layout="topbar"]:not([data-chrome="inverted"]) .sidebar-brand .wordmark .wm-1,
body[data-layout="topbar"]:not([data-chrome="inverted"]) .sidebar-brand .wordmark .wm-2 {
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 19px; font-weight: 720; letter-spacing: -0.018em; line-height: 1.15;
}

/* BRAND CONTRACT (docs/brand-contract.md): jewel letters exist ONLY on white surfaces.
   On dark surfaces the wordmark is monochrome (wm-2 muted) and the chip carries the color —
   the .wp spans inherit wm-2's color here on purpose. Never reintroduce tinted derivatives. */

/* .pr-tab / .pr-exp base styles — these lived only in the pricing module's embedded <style>, so
   sales/other modules rendered NATIVE unstyled buttons when visited before Pricing mounted.
   Promoted here so every module gets them; the embedded copy stays and wins ties harmlessly. */
.pr-tab { padding: 9px 17px; border: none; background: none; font-family: inherit; font-size: 13px; color: #6b6b67; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; transition: color 0.12s; }
.pr-tab:hover { color: #0B2A4A; }
.pr-tab.on { color: #0B2A4A; border-bottom-color: #0B2A4A; font-weight: 700; }
.pr-exp { padding: 7px 13px; border: 1px solid #d4d4d4; border-radius: 7px; background: #fff; font-family: inherit; font-size: 12px; color: #3a3a3a; cursor: pointer; white-space: nowrap; transition: all 0.12s; }
.pr-exp:hover { border-color: #0B2A4A; color: #0B2A4A; background: #f7f9fb; }
.pr-top-filter { padding: 7px 10px; border: 1px solid #d4d4d4; border-radius: 8px; background: #fff; font-family: inherit; font-size: 12.5px; color: #1a1a18; min-width: 132px; cursor: pointer; }

/* ===== CHROME VARIANT: inverted (body[data-chrome="inverted"], composes with layout=topbar) ====
   The marketing homepage as an app: white top bar carrying the raw-jewel lockup, deep forest
   canvas behind it, white cards floating on the canvas. The canvas is a tenant token (--canvas,
   set from theme.canvas) so a client who wants a different workspace color is a config value,
   not a fork. Appended last so equal-specificity overrides of the topbar block win. */

/* --- the bar: white, ink text --- */
body[data-chrome="inverted"] .sidebar {
  background: #ffffff;
  border-bottom: 1px solid #dfe6ee;
  box-shadow: 0 1px 4px rgba(16, 32, 24, 0.05);
  --chrome-line: #e3e8ee; --chrome-text: #5b6673; --chrome-bright: #17212b;
  --chrome-dim: #8a94a0; --chrome-hover: rgba(23, 33, 43, 0.05);
  --chrome-active: rgba(4, 120, 87, 0.08); --chrome-card: rgba(23, 33, 43, 0.05);
}
body[data-chrome="inverted"] .sidebar-brand { border-right-color: #e6ebf1; }
body[data-chrome="inverted"] .sidebar-brand strong,
body[data-chrome="inverted"] .sidebar-brand .wordmark .wm-1 { color: #17212b; }
body[data-chrome="inverted"] .sidebar-brand > span { color: #5b6673; }
/* raw marketing jewels on the WHITE BAR ONLY — the login screen's forest-gradient lockup
   keeps the light dark-surface tints (raw jewels are illegible on forest) */
body[data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 .wp1,
body[data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 .wp2,
body[data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 .wp3,
body[data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 .wp4 { color: #17141d; }   /* canon single-colour, jewels retired */
/* bare bars on the white bar — the light tile chip disappears against white, so hide it and
   scale the bars up to hold the same visual weight (transform doesn't reflow the lockup) */
body[data-chrome="inverted"] .sidebar-brand .brand-mark rect:first-child { opacity: 0; }
body[data-chrome="inverted"] .sidebar-brand .brand-mark { transform: scale(1.3); }
/* nav tabs: slate -> ink, active = tenant-green underline + wash */
body[data-chrome="inverted"] .nav-group-label { color: #5b6673; }
body[data-chrome="inverted"] .nav-group:hover > .nav-group-label,
body[data-chrome="inverted"] .nav-group:focus-within > .nav-group-label { color: #17212b; }
/* PACE PILOT (Will 7/17): on the white bar each stage carries its brand jewel via --nav-accent
   (set per group in tenants.json) with a persistent colored underline; Today stays neutral ink.
   The wordmark drops to monochrome so the four colors live once, in PACE, not twice. */
body[data-chrome="inverted"] .nav-group[style*="--nav-accent"] > .nav-group-label,
body[data-chrome="inverted"] .nav-group[style*="--nav-accent"] .nav-item-top { color: var(--nav-accent); border-bottom-color: var(--nav-accent); }
body[data-chrome="inverted"] .nav-group[style*="--nav-accent"]:hover > .nav-group-label,
body[data-chrome="inverted"] .nav-group[style*="--nav-accent"].open > .nav-group-label,
body[data-chrome="inverted"] .nav-group[style*="--nav-accent"]:focus-within > .nav-group-label { color: var(--nav-accent); }
body[data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 .wp1,
body[data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 .wp2,
body[data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 .wp3,
body[data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 .wp4 { color: #4a5361; }
/* pilot palette on the golden (inverted) bar: the bottom jewel strip tracks the deeper PACE set
   (nav label colors come from --nav-accent in config; this keeps the strip in sync). Golden-scoped. */
body[data-chrome="inverted"] .sidebar::after { background: linear-gradient(90deg, #047857 0 25%, #3967c1 0 50%, #643192 0 75%, #e03935 0 100%); }
/* glyph bars track the PACE palette on the golden bar (bar 1 green is unchanged; recolor 2-4).
   Golden-scoped override — the shared SVG in retail-afa-v2.html stays on the old jewels for other
   tenants until the brand sweep. rect:first-child is the tile (hidden on inverted). */
body[data-chrome="inverted"] .sidebar-brand .brand-mark rect:nth-child(3) { fill: #3967c1; }
body[data-chrome="inverted"] .sidebar-brand .brand-mark rect:nth-child(4) { fill: #643192; }
body[data-chrome="inverted"] .sidebar-brand .brand-mark rect:nth-child(5) { fill: #e03935; }
/* active tab = the section's OWN colour on the label + its underline. No fill — a green wash on
   every active tab buried the PACE colours (Act read green, not blue) and over-greened the bar. */
body[data-chrome="inverted"] .nav-group:has(.nav-item.active) > .nav-group-label {
  background: transparent; font-weight: 700;
  color: var(--nav-accent, #17212b);
  border-bottom-color: var(--nav-accent, #17212b);
}
body[data-chrome="inverted"] .nav-item-top { color: #5b6673; }
body[data-chrome="inverted"] .nav-item-top:hover { background: rgba(23, 33, 43, 0.05); color: #17212b; }
body[data-chrome="inverted"] .nav-item-top.active {
  background: transparent; color: var(--nav-accent, #17212b); font-weight: 700;
  border-bottom-color: var(--nav-accent, #17212b);
}
/* dropdown panel goes light */
body[data-chrome="inverted"] .nav-group-items {
  background: #ffffff; border: 1px solid #dfe6ee; box-shadow: 0 14px 34px rgba(15, 30, 22, 0.18);
}
body[data-chrome="inverted"] .nav-group-items .nav-item { color: #33404c; }
body[data-chrome="inverted"] .nav-group-items .nav-item:hover { background: rgba(23, 33, 43, 0.06); color: #17212b; }
body[data-chrome="inverted"] .nav-group-items .nav-item.active { background: rgba(23, 33, 43, 0.07); color: #17212b; font-weight: 700; }
body[data-chrome="inverted"] .user-card:hover { background: transparent; }
body[data-chrome="inverted"] .user-card::after { color: #8a94a0; }

/* --- the canvas: the one consistent beige room (C2a, settled with Will 2026-07-12) ---
   The dark-canvas experiment (forest body, then banded fades) is retired: the room never
   changes; brand mass lives in the bar, the hairline, and the forest grid headers. The
   inverted chrome is now ONLY the white-bar treatment — the body inherits the default
   --bg beige like every other chrome. */

/* the jewel hairline strip under the top bar — both bar chromes, all topbar tenants */
body[data-layout="topbar"] .sidebar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.5px; z-index: 1;
  background: linear-gradient(90deg, #047857 0 25%, #1e47c4 0 50%, #7522bb 0 75%, #ad1f1f 0 100%);
}


/* RWM PACE NAV POLISH: color is the stage cue, not the whole label. */
body[data-layout="topbar"][data-chrome="inverted"] .sidebar {
  padding: 0 18px;
  border-bottom-color: #d9e1ea;
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.045);
}
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand {
  padding: 8px 18px 8px 0;
  margin-right: 10px;
  border-right-color: #e8edf3;
}
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand strong,
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand .wordmark .wm-1,
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 {
  font-size: 17px;
  letter-spacing: 0;
}
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand .wordmark .wm-1 { font-weight: 760; }
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 { font-weight: 520; }
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand > span { margin-top: 1px; font-size: 10.5px; }
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand .brand-mark { transform: scale(1.16); }
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-nav { gap: 6px; }
body[data-layout="topbar"][data-chrome="inverted"] .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-item-top {
  color: #4b5563 !important;
  border-bottom-color: transparent !important;
  font-size: 13px;
  font-weight: 650;
  gap: 7px;
  padding-inline: 11px;
}
body[data-layout="topbar"][data-chrome="inverted"] .nav-group[style*="--nav-accent"] > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-group[style*="--nav-accent"] .nav-item-top {
  color: #4b5563 !important;
  border-bottom-color: transparent !important;
}
body[data-layout="topbar"][data-chrome="inverted"] .nav-group[style*="--nav-accent"] > .nav-group-label::before,
body[data-layout="topbar"][data-chrome="inverted"] .nav-group[style*="--nav-accent"] .nav-item-top::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--nav-accent);
  flex: none;
}
body[data-layout="topbar"][data-chrome="inverted"] .nav-group:hover > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-group.open > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-group:focus-within > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-item-top:hover {
  color: #111827 !important;
  background: rgba(15, 23, 42, 0.04);
}
body[data-layout="topbar"][data-chrome="inverted"] .nav-group:has(.nav-item.active) > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-item-top.active {
  color: #111827 !important;
  font-weight: 760;
  border-bottom-color: var(--nav-accent, #111827) !important;
  background: transparent;
}
body[data-layout="topbar"][data-chrome="inverted"] .nav-group:has(.nav-item.active) > .nav-group-label::before,
body[data-layout="topbar"][data-chrome="inverted"] .nav-item-top.active::before {
  transform: scale(1.15);
}
body[data-layout="topbar"][data-chrome="inverted"] .sidebar::after {
  height: 2px;
  background: linear-gradient(90deg, #047857 0 25%, #3967c1 0 50%, #643192 0 75%, #e03935 0 100%);
  opacity: 0.95;
}


/* RWM PACE NAV RESET: keep colored labels; remove dot experiment. */
body[data-layout="topbar"][data-chrome="inverted"] .nav-group[style*="--nav-accent"] > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-group[style*="--nav-accent"] .nav-item-top {
  color: var(--nav-accent) !important;
  border-bottom-color: transparent !important;
}
body[data-layout="topbar"][data-chrome="inverted"] .nav-group[style*="--nav-accent"] > .nav-group-label::before,
body[data-layout="topbar"][data-chrome="inverted"] .nav-group[style*="--nav-accent"] .nav-item-top::before {
  content: none !important;
  display: none !important;
}
body[data-layout="topbar"][data-chrome="inverted"] .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-item-top {
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
body[data-layout="topbar"][data-chrome="inverted"] .nav-group:hover > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-group.open > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-group:focus-within > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-item-top:hover {
  background: transparent;
}
body[data-layout="topbar"][data-chrome="inverted"] .nav-group:has(.nav-item.active) > .nav-group-label,
body[data-layout="topbar"][data-chrome="inverted"] .nav-item-top.active {
  color: var(--nav-accent, #111827) !important;
  font-weight: 700;
  border-bottom-color: var(--nav-accent, #111827) !important;
}
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand .wordmark .wm-1 { font-weight: 700; }
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand .wordmark .wm-2 { font-weight: 500; }

/* NAR prospect polish: workbook MRP as a connected planning story */
.nar-hero { display:flex; justify-content:space-between; align-items:stretch; gap:24px; padding:22px 24px; border-left:4px solid #b91c1c; background:linear-gradient(135deg,#ffffff 0%,#fff7f7 100%); }
.nar-hero h3 { margin:4px 0 8px; font-size:24px; line-height:1.12; color:#111827; letter-spacing:0; }
.nar-hero p { margin:0; max-width:780px; font-size:13.5px; line-height:1.62; color:#4b5563; }
.nar-story-steps { min-width:230px; display:grid; gap:7px; align-content:center; }
.nar-story-steps span { display:flex; align-items:center; gap:8px; border:1px solid #f1c9c9; background:#fff; border-radius:8px; padding:8px 10px; font-size:12px; font-weight:700; color:#7f1d1d; }
.nar-story-steps span::before { content:""; width:7px; height:7px; border-radius:50%; background:#b91c1c; flex:none; }
.nar-story strong { display:block; font-size:28px; color:#111827; margin:5px 0 2px; }
.nar-story p { margin:0 0 12px; font-size:12.5px; line-height:1.55; color:#566171; }
.nar-location-rail { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:14px 0; }
.nar-location-rail > div { background:#111827; color:#fff; border-radius:8px; padding:12px 14px; min-height:86px; }
.nar-location-rail span { display:block; font-size:11px; color:#fca5a5; text-transform:uppercase; font-weight:800; letter-spacing:.04em; }
.nar-location-rail strong { display:block; margin-top:5px; font-size:23px; }
.nar-location-rail small { display:block; margin-top:3px; color:#d1d5db; font-size:11.5px; }
.nar-bars { height:72px; display:flex; align-items:end; gap:3px; padding:9px 8px; border:1px solid #e6eaf0; border-radius:8px; background:linear-gradient(180deg,#fff,#f8fafc); }
.nar-bars i { flex:1; min-width:3px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#ef4444,#991b1b); opacity:.84; }
.nar-item-card { display:flex; flex-direction:column; min-height:258px; border-top:3px solid #b91c1c; }
.nar-item-top { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.nar-item-top h3 { margin:2px 0 0; font-size:19px; color:#111827; }
.nar-item-card p { min-height:48px; margin:10px 0 8px; font-size:12.5px; line-height:1.42; color:#374151; }
.nar-item-vendor { font-size:11.5px; font-weight:800; color:#7f1d1d; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.nar-order-rules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.nar-order-rules div { border:1px solid #e6eaf0; border-radius:8px; padding:10px; background:#fbfdff; }
.nar-order-rules strong { display:block; font-size:12.5px; color:#111827; margin-bottom:4px; }
.nar-order-rules span { display:block; font-size:12px; line-height:1.45; color:#566171; }
.nar-forecast-card p { min-height:40px; margin:0 0 10px; font-size:12.5px; color:#566171; line-height:1.45; }
.nar-field-chips { display:flex; flex-wrap:wrap; gap:7px; }
.nar-field-chips span { border:1px solid #e5e7eb; background:#f9fafb; color:#374151; border-radius:999px; padding:6px 10px; font-size:11.5px; font-weight:700; }
.nar-role-chip { display:inline-flex; border-radius:999px; padding:3px 8px; font-size:10.5px; font-weight:800; }
.nar-role-manual { background:#fef3c7!important; color:#92400e!important; }
.nar-role-extracted { background:#e0f2fe!important; color:#075985!important; }
.nar-role-calculated { background:#dcfce7!important; color:#166534!important; }
.nar-guide-table td { vertical-align:top; }
.nar-why-panel { width:980px; max-width:96vw; }
@media (max-width: 860px) {
  .nar-hero { flex-direction:column; }
  .nar-location-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .nar-order-rules { grid-template-columns:1fr; }
}

.nar-workbook-legend { display:flex; gap:8px; flex-wrap:wrap; margin:2px 0 10px; }
.nar-workbook-legend span { border-radius:999px; padding:4px 9px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.nar-why-panel .table-wrap table th,
.nar-why-panel .table-wrap table td { font-size:12px; }
.nar-hero .nar-field-chips span { background:#fff; }

/* ---- AFA flagship (Northwind Apparel) scaffold ---- */
.afa-scaffold { display:flex; flex-direction:column; gap:16px; }
.afa-scaffold-hero {
  background:var(--panel); border:1px solid var(--border); border-left:4px solid var(--green);
  border-radius:var(--radius); padding:20px 22px; box-shadow:0 2px 8px rgba(0,0,0,0.02);
}
.afa-scaffold-hero.moat { border-left-color:var(--red); }
.afa-scaffold-badge {
  display:inline-block; font-size:10px; font-weight:760; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--muted); background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:3px 10px;
}
.afa-scaffold-hero h3 { margin:12px 0 4px; font-size:20px; font-weight:760; color:var(--text); }
.afa-scaffold-hero p { margin:0; color:var(--muted); font-size:13px; line-height:1.45; max-width:70ch; }
.afa-scaffold-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; padding:16px; }
.afa-scaffold-grid label { display:block; color:var(--faint); font-size:10px; font-weight:760; letter-spacing:0.07em; text-transform:uppercase; margin-bottom:6px; }
.afa-scaffold-grid strong { font-size:14px; font-weight:600; color:var(--text); }

/* ---- AFA · Line Plan ---- */
.afa-lp-bar { display:flex; align-items:center; gap:12px; margin:2px 0 14px; }
.afa-lp-bar .seg { display:inline-flex; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px; }
.seg-btn { border:0; background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:600; padding:6px 14px; border-radius:7px; cursor:pointer; }
.seg-btn:hover { color:var(--text); }
.seg-btn.active { background:var(--green); color:#fff; }
.afa-lp-kpis { margin-bottom:16px; }
.afa-src { display:inline-flex; align-items:center; }
.afa-lp-table { width:100%; border-collapse:collapse; font-size:13px; }
.afa-lp-table thead th { text-align:left; font-size:10px; font-weight:760; letter-spacing:0.06em; text-transform:uppercase; color:var(--faint); padding:8px 12px; border-bottom:1px solid var(--border); }
.afa-lp-table th.num, .afa-lp-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.afa-lp-table td { padding:8px 12px; border-bottom:1px solid var(--border); color:var(--text); }
.afa-lp-table tbody tr:hover td { background:var(--bg); }
.afa-lp-style { font-weight:600; }
.afa-lp-foot td { border-top:2px solid var(--border); border-bottom:0; font-weight:700; color:var(--muted); }
.afa-lp-foot td:first-child { color:var(--faint); font-weight:600; }

/* ---- AFA · Item Master search + shared cells ---- */
.afa-im-search { flex:1; display:flex; justify-content:flex-end; }
.afa-im-search input {
  width:280px; max-width:100%; padding:7px 12px; font:inherit; font-size:13px;
  border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text);
}
.afa-im-search input:focus { outline:none; border-color:var(--green); }
.afa-lp-table td.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--muted); }

/* ---- AFA · Work Queue cards ---- */
.afa-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:16px; }
.afa-card { background:var(--panel); border:1px solid var(--border); border-left:3px solid var(--green); border-radius:var(--radius); padding:14px 16px; box-shadow:0 2px 8px rgba(0,0,0,0.02); }
.afa-card.warn { border-left-color:var(--amber); }
.afa-card.alert { border-left-color:var(--red); }
.afa-card .n { font-size:24px; font-weight:760; color:var(--text); line-height:1.1; }
.afa-card .lbl { font-size:12px; font-weight:700; color:var(--text); margin-top:4px; }
.afa-card .sub { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.4; }

/* ---- AFA · Size Curves ---- */
.afa-sc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.afa-sc-card { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px 12px; box-shadow:0 2px 8px rgba(0,0,0,0.02); }
.afa-sc-head { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; }
.afa-sc-head span { font-size:11px; font-weight:600; color:var(--muted); }
.afa-sc-cols { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; height:120px; }
.afa-sc-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.afa-sc-col .pct { font-size:10px; color:var(--muted); margin-bottom:4px; }
.afa-sc-col .bar { width:70%; background:var(--green); border-radius:4px 4px 0 0; min-height:2px; }
.afa-sc-col .sz { font-size:11px; font-weight:600; color:var(--text); margin-top:6px; }

/* ---- AFA · OTB ---- */
.afa-otb-table td.afa-otb-tot, .afa-otb-table th:last-child { font-weight:700; border-left:1px solid var(--border); background:var(--bg); }
.afa-otb-table tbody tr td:first-child { font-weight:600; }

/* ===== AFA module frame (UI Production Standard) ===== */
.afa-bar { align-items:center; }
.afa-bar-spacer { flex:1 1 auto; }
.afa-decision { margin:12px 0 14px; }
.primary-btn.compact, .secondary-btn.compact { padding:6px 14px; font-size:12px; border-radius:8px; }
.afa-decision .primary-btn { border:0; cursor:pointer; font-weight:600; }

/* one continuous Excel-grade grid with sticky header + group rows */
.afa-grid-wrap { border:1px solid var(--border); border-radius:var(--radius); overflow:auto; max-height:calc(100vh - 340px); background:var(--panel); box-shadow:0 2px 8px rgba(0,0,0,0.02); }
.afa-grid { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.afa-grid thead th { position:sticky; top:0; z-index:3; background:var(--panel); text-align:left; font-size:10px; font-weight:760; letter-spacing:0.06em; text-transform:uppercase; color:var(--faint); padding:9px 12px; border-bottom:1px solid var(--border-strong); }
.afa-grid th.num, .afa-grid td.num { text-align:right; font-variant-numeric:tabular-nums; }
.afa-grid td { padding:8px 12px; border-bottom:1px solid var(--border); color:var(--text); }
.afa-grid tbody tr:hover td { background:var(--bg); }
.afa-grid .afa-lp-style { font-weight:600; }
.afa-grid .afa-grp td { background:var(--bg); font-weight:700; font-size:12px; color:var(--text); padding:8px 12px; }
.afa-grid .afa-grp td span { float:right; font-weight:600; color:var(--muted); font-size:11px; }
.afa-grid .afa-grp:hover td { background:var(--bg); }
.afa-grid .afa-sub td { font-weight:700; color:var(--muted); border-bottom:2px solid var(--border-strong); }
.afa-grid .afa-sub td:first-child { color:var(--faint); font-weight:600; }
.afa-grid .afa-sub:hover td { background:transparent; }

/* designed empty state (P2) */
.afa-empty { text-align:center; padding:56px 20px; color:var(--muted); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); }
.afa-empty-ic { font-size:30px; color:var(--faint); margin-bottom:10px; }
.afa-empty p { margin:0 0 12px; font-size:14px; }

/* focus-visible rings (P7 / WCAG 2.4.7) */
.afa-bar .mpicker-btn:focus-visible, .afa-bar .chip-search input:focus-visible, .afa-bar .chip-more:focus-visible,
.afa-decision .primary-btn:focus-visible, .afa-empty button:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

/* ===== AFA Line Plan v2 (Cards⇄Sheet, exceptions, buy sheet) ===== */
.page-head .actions .afa-view-seg { margin-right:2px; }
/* decision strip: totals left, exception chips right */
.afa-decision { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; margin:12px 0 14px; box-shadow:0 2px 8px rgba(0,0,0,0.02); }
.afa-decision .scope-totals { display:flex; gap:26px; flex-wrap:wrap; }
.afa-exc-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.afa-exc { border:1px solid var(--border); background:var(--bg); border-radius:999px; padding:5px 12px; font:inherit; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
.afa-exc strong { color:var(--text); }
.afa-exc.alert { border-left:3px solid var(--red); }
.afa-exc.warn { border-left:3px solid var(--amber); }
.afa-exc:hover { border-color:var(--border-strong); }
.afa-exc.on { background:var(--green); color:#fff; border-color:var(--green); }
.afa-exc.on strong { color:#fff; }
.afa-review-clean { font-size:12px; color:var(--faint); }

/* cards lens */
.afa-cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(184px,1fr)); gap:14px; }
.afa-card { text-align:left; padding:0; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); overflow:hidden; cursor:pointer; font:inherit; color:var(--text); box-shadow:0 2px 8px rgba(0,0,0,0.02); transition:box-shadow .12s, transform .12s, border-color .12s; display:flex; flex-direction:column; }
.afa-card:hover { box-shadow:0 8px 22px rgba(0,0,0,0.09); transform:translateY(-2px); border-color:var(--border-strong); }
.afa-card:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.afa-card-img { aspect-ratio:1/1; background-size:cover; background-position:center; background-color:var(--bg); }
/* Label ink defaults live on the PARENT so the renderer's inline luminance-picked color can win —
   a color on the span itself out-specifies any inline style on the div (the white-on-White bug). */
.afa-card-swatch { display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.92); text-shadow:0 1px 2px rgba(0,0,0,0.35); }
.afa-card-swatch span { font-size:11px; font-weight:700; color:inherit; text-shadow:inherit; letter-spacing:.02em; }
.afa-card-body { padding:10px 12px 12px; }
.afa-card-name { font-size:13px; font-weight:700; line-height:1.25; }
.afa-card-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.afa-card-stats { display:flex; gap:10px; margin-top:9px; font-size:11px; color:var(--muted); flex-wrap:wrap; }
.afa-card-stats b { color:var(--text); font-variant-numeric:tabular-nums; }
.afa-row-click { cursor:pointer; }

/* buy sheet drawer */
.afa-buy-ov { position:fixed; inset:0; background:rgba(15,23,20,0.34); opacity:0; pointer-events:none; transition:opacity .15s; z-index:60; }
.afa-buy-ov.open { opacity:1; pointer-events:auto; }
.afa-buy-panel { position:absolute; top:0; right:0; height:100%; width:min(720px,92vw); background:var(--panel); box-shadow:-8px 0 30px rgba(0,0,0,0.18); display:flex; flex-direction:column; transform:translateX(12px); transition:transform .15s; overflow:hidden; }
.afa-buy-ov.open .afa-buy-panel { transform:translateX(0); }
.afa-buy-head { display:flex; align-items:flex-start; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--border); }
.afa-buy-head h3 { margin:0; font-size:18px; font-weight:760; }
.afa-buy-head p { margin:3px 0 0; font-size:12px; color:var(--muted); }
.afa-buy-x { border:0; background:transparent; font-size:16px; color:var(--muted); cursor:pointer; padding:4px 8px; border-radius:6px; }
.afa-buy-x:hover { background:var(--bg); color:var(--text); }
.afa-buy-body { padding:18px 22px 28px; overflow:auto; display:flex; flex-direction:column; gap:16px; }
/* Item Master — record drawer */
.afa-item-panel, .afa-buy-panel.afa-im-panel { width:min(880px,95vw); }
.afa-im-hero { width:100%; height:230px; border-radius:12px; background-size:cover; background-position:center; background-color:var(--bg); border:1px solid var(--border); margin-bottom:14px; }
.afa-im-attrs { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px 18px; margin-bottom:14px; }
.afa-im-attr { display:flex; flex-direction:column; gap:2px; }
.afa-im-attr label { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.afa-im-attr span { font-size:13px; font-weight:600; color:var(--text); }
.afa-im-tiles { display:flex; flex-wrap:wrap; gap:10px; }
.afa-im-tile { flex:1 1 92px; border:1px solid var(--border); border-radius:10px; padding:10px 12px; background:var(--panel); }
.afa-im-tile label { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:3px; }
.afa-im-tile strong { font-size:17px; font-weight:740; color:var(--text); }
.afa-im-tile.alert { border-color:#dc2626; } .afa-im-tile.alert strong { color:#dc2626; }
.afa-im-tile.warn { border-color:#d97706; } .afa-im-tile.warn strong { color:#b45309; }
.afa-im-sub { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:12px 0 6px; font-weight:640; }
.afa-im-loading { font-size:12.5px; color:var(--muted); padding:14px 4px; }
.afa-im-bar { flex-wrap:wrap; gap:8px; align-items:center; }
.afa-im-filter { font-size:12px; padding:6px 10px; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); cursor:pointer; max-width:190px; }
.afa-im-filter:hover { border-color:var(--muted); }
/* MFP Topline */
.mfp-kpis { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.mfp-kpi { flex:1 1 140px; border:1px solid var(--border); border-radius:10px; padding:10px 14px; background:var(--panel); }
.mfp-kpi label { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.mfp-kpi strong { font-size:20px; font-weight:760; color:var(--text); display:block; margin:2px 0; }
.mfp-kpi span { font-size:11.5px; font-weight:600; }
.mfp-grid { font-variant-numeric:tabular-nums; }
.mfp-grid th, .mfp-grid td { white-space:nowrap; }
.mfp-grid .mfp-mcol { text-align:left; font-weight:600; position:sticky; left:0; background:var(--panel); z-index:1; min-width:150px; }
.mfp-grid thead th { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.mfp-grid .mfp-season { background:rgba(148,163,184,0.10); }
.mfp-grid .mfp-fy { background:rgba(148,163,184,0.18); font-weight:700; }
.mfp-grid .mfp-otb-row td { border-top:2px solid var(--accent,#DB2777); font-weight:640; }
.mfp-grid .mfp-otb-row .mfp-mcol { color:var(--accent,#DB2777); }
.mfp-pos { color:#059669; } td.mfp-pos { background:rgba(5,150,105,0.09); }
.mfp-neg { color:#dc2626; } td.mfp-neg { background:rgba(220,38,38,0.09); }
.mfp-flat { color:var(--muted); }
.mfp-src { font-size:11px; color:var(--muted); margin-top:10px; }
/* Topline planning grid — dense, sticky label col, version/var stacks */
.mfp-grid td, .mfp-grid th { padding:2px 8px; font-size:11.5px; height:22px; text-align:right; }
.mfp-grid .mfp-rlabel { text-align:left; position:sticky; left:0; background:var(--panel); z-index:1; min-width:150px; padding-left:18px; color:var(--muted); font-weight:500; }
.mfp-grid .mfp-roll { background:rgba(148,163,184,0.10); }
.mfp-grid .mfp-fy { background:rgba(148,163,184,0.18); font-weight:700; }
.mfp-mhead td { background:var(--bg); border-top:1px solid var(--border); font-weight:740; font-size:12px; text-align:left; position:sticky; left:0; color:var(--text); padding:7px 8px 3px; }
.mfp-editbadge { font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--accent,#DB2777); border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle; }
.mfp-editbadge.derived { background:var(--muted); }
.mfp-wp .mfp-rlabel { color:var(--text); font-weight:740; }
.mfp-wp td { font-weight:640; }
.mfp-seed .mfp-rlabel { color:#7c3aed; font-style:italic; }
.mfp-seed td { color:#7c3aed; }
.mfp-varrow td { font-size:10.5px; color:var(--muted); }
.mfp-varrow .mfp-rlabel { padding-left:26px; font-style:italic; }
.mfp-var.mfp-neg, .mfp-neg { color:#dc2626 !important; }
.mfp-pos { color:#059669; }
.mfp-in-td { padding:1px 2px !important; }
.mfp-in { width:74px; text-align:right; font-size:11.5px; font-variant-numeric:tabular-nums; border:1px solid transparent; border-radius:4px; padding:2px 5px; background:transparent; color:var(--text); font-weight:640; }
.mfp-in:hover { border-color:var(--border); }
.mfp-in:focus { border-color:var(--accent,#DB2777); background:var(--panel); outline:none; box-shadow:0 0 0 2px rgba(219,39,119,.12); }
.mfp-in-roll { font-style:italic; }

/* Per-metric color identity + block separation (breaks up the white; each metric set its own hue) */
.mfp-grid tbody.mfp-blk { --mh:148,163,184; }
.mfp-grid tbody.mfp-blk:nth-of-type(1) { --mh:99,102,241; }   /* Sales — indigo */
.mfp-grid tbody.mfp-blk:nth-of-type(2) { --mh:13,148,136; }   /* ASP — teal */
.mfp-grid tbody.mfp-blk:nth-of-type(3) { --mh:217,119,6; }    /* Units — amber */
.mfp-grid tbody.mfp-blk:nth-of-type(4) { --mh:225,29,72; }    /* GM$ — rose */
.mfp-grid tbody.mfp-blk:nth-of-type(5) { --mh:124,58,237; }   /* GM% — violet */
.mfp-grid tbody.mfp-blk .mfp-mhead td { background:rgba(var(--mh),.09); box-shadow:inset 3px 0 0 rgb(var(--mh)); border-top:1px solid rgba(var(--mh),.35); }
.mfp-grid tbody.mfp-blk .mfp-mlabel { color:rgb(var(--mh)); font-size:12.5px; font-weight:760; }
.mfp-grid tbody.mfp-blk td:not(.mfp-rlabel):not(.mfp-mcol):not(.mfp-roll):not(.mfp-fy) { background-color:rgba(var(--mh),.03); }
.mfp-editbadge { background:rgb(var(--mh)); }
.mfp-editbadge.derived { background:var(--muted); }
/* Editable (WP input) row — obviously different */
.mfp-grid tbody.mfp-blk .mfp-editrow td:not(.mfp-rlabel):not(.mfp-mcol):not(.mfp-roll):not(.mfp-fy) { background-color:rgba(var(--mh),.14)!important; }
.mfp-grid tbody.mfp-blk .mfp-editrow td { box-shadow:inset 0 -1px 0 rgba(var(--mh),.25), inset 0 1px 0 rgba(var(--mh),.25); }
.mfp-editrow .mfp-rlabel { color:var(--text)!important; font-weight:760!important; }
.mfp-editrow .mfp-rlabel::after { content:" ✎"; color:rgb(var(--mh)); font-size:10px; }
.mfp-editrow .mfp-in { border-color:rgba(var(--mh),.4); background:var(--panel); }
.mfp-editrow .mfp-in:hover { border-color:rgb(var(--mh)); }
.mfp-editrow .mfp-in:focus { border-color:rgb(var(--mh)); box-shadow:0 0 0 2px rgba(var(--mh),.18); }
/* Why pill */
.mfp-why { margin-left:10px; border:1px solid var(--border); background:var(--panel); color:var(--muted); border-radius:20px; font-size:10.5px; font-weight:660; padding:2px 10px; cursor:pointer; vertical-align:middle; }
.mfp-why:hover, .mfp-why.open { color:rgb(var(--mh)); border-color:rgba(var(--mh),.55); background:rgba(var(--mh),.06); }
.mfp-why span { font-size:8px; margin-left:2px; }
/* Deep-dive drill panel */
.mfp-drill-row td { position:sticky; left:0; background:var(--panel); padding:0!important; }
.mfp-drill-inner { max-width:1100px; padding:14px 16px; border-left:3px solid rgb(var(--mh)); background:linear-gradient(90deg, rgba(var(--mh),.05), rgba(var(--mh),0) 60%); }
.mfp-drill-h { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.mfp-drill-h strong { font-size:13.5px; color:var(--text); } .mfp-drill-h span { font-size:11px; color:var(--muted); }
.mfp-drill-cols { display:flex; gap:26px; flex-wrap:wrap; margin-bottom:6px; }
.mfp-drill-col { flex:1 1 300px; min-width:280px; } .mfp-drill-col.mfp-drill-wide { flex:1 1 100%; }
.mfp-drill-col h5 { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0 0 7px; font-weight:700; }
.mfp-drill-note { font-size:11px; color:var(--muted); margin-top:8px; line-height:1.5; }
.mfp-drill-note b { color:var(--text); }
/* mini WP/LY bars */
.mfp-mini { display:flex; flex-direction:column; gap:5px; }
.mfp-mini-row { display:grid; grid-template-columns:88px 1fr 78px 46px; align-items:center; gap:8px; font-size:11.5px; }
.mfp-mini-solo .mfp-mini-row { grid-template-columns:110px 1fr 96px; }
.mfp-mini-lbl { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mfp-mini-track { position:relative; height:16px; display:flex; flex-direction:column; justify-content:center; gap:3px; }
.mfp-mini-track i { display:block; height:6px; border-radius:4px; min-width:2px; transition:width .25s ease; }
.mfp-mini-track i.wp { background:rgb(var(--mh, 4,120,87)); } .mfp-mini-track i.ly { background:rgba(148,163,184,.45); }
.mfp-mini-val { text-align:right; font-variant-numeric:tabular-nums; color:var(--text); font-weight:640; }
.mfp-mini-d { text-align:right; font-weight:640; font-size:11px; }
/* mini margin/cost waterfall */
.mfp-wf { display:flex; align-items:flex-end; gap:6px; flex-wrap:wrap; }
.mfp-wf-step { display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:8px 10px; border-radius:8px; background:var(--panel); border:1px solid var(--border); min-width:92px; }
.mfp-wf-step.first { background:rgba(var(--mh),.10); } .mfp-wf-step.total { background:rgba(var(--mh),.18); }
.mfp-wf-step b { font-size:14px; font-weight:760; color:var(--text); } .mfp-wf-step em { font-style:normal; font-size:12px; font-weight:680; }
.mfp-wf-step span { font-size:10px; color:var(--muted); }
.mfp-wf-bar { height:5px; border-radius:3px; display:block; margin-bottom:1px; }
.mfp-wf-bar.pos { background:#34d399; } .mfp-wf-bar.neg { background:#f87171; }

.mfp-wi { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:8px 12px; margin:10px 0; font-size:12px; }
.mfp-wi-lbl { font-weight:700; color:var(--text); }
.mfp-wi-x { color:var(--muted); }
.mfp-wi-pct { width:64px; padding:5px 8px; border:1px solid var(--border); border-radius:8px; font-size:12px; background:var(--bg); color:var(--text); }
.mfp-wi-active { background:rgba(219,39,119,.10); color:var(--accent,#DB2777); border-radius:20px; padding:3px 10px; font-weight:640; }
.mfp-wi-spacer { flex:1; }
.mfp-chart { margin-top:16px; border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--panel); }
.mfp-chart-legend { font-size:12px; color:var(--muted); margin-bottom:8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mfp-chart-legend b { color:var(--text); font-weight:700; }
.mfp-leg-wrap { display:flex; gap:12px; flex-wrap:wrap; margin-left:auto; }
.mfp-leg { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--muted); font-weight:600; }
.mfp-leg i { width:12px; height:3px; border-radius:2px; display:inline-block; }
.mfp-chart-svg { width:100%; height:150px; display:block; }
/* Rebuilt line chart — crisp: no stretch, real axes, hairline grid, WP area + endpoint */
.mfp-cx-svg { width:100%; height:auto; max-height:300px; display:block; }
.mfp-cx-grid { stroke:var(--line,#e3e8ef); stroke-width:1; shape-rendering:crispEdges; }
.mfp-cx-yt, .mfp-cx-xt { fill:var(--faint,#94a3b8); font-size:10.5px; font-variant-numeric:tabular-nums; }
.mfp-cx-end { fill:#047857; font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums; }
/* Cadence (clean seasonal) view */
.mfp-view-seg { margin-right:6px; }
.mfp-cad td, .mfp-cad th { padding:9px 14px; font-size:12.5px; }
.mfp-cad .mfp-cad-lbl { font-size:13px; color:var(--text); font-weight:640; }
.mfp-cad-v { font-weight:720; font-size:14px; color:var(--text); }
.mfp-cad-d { font-size:10.5px; margin-top:1px; }
.mfp-cad-row:hover td { background:rgba(148,163,184,0.07); }
.mfp-cad .mfp-fy { background:rgba(148,163,184,0.14); }
.mfp-leg-snap i { border-top:2px dashed currentColor; background:transparent!important; height:0; border-radius:0; }

/* Exception engine */
.mfp-exc-strip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0; font-size:12px; }
.mfp-exc-tag { font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:10px; color:var(--muted,#6b7280); }
.mfp-exc-clean { color:#047857; background:rgba(4,120,87,.07); border:1px solid rgba(4,120,87,.18); border-radius:8px; padding:7px 12px; font-weight:600; }
.mfp-exc-count { font-weight:740; color:var(--text); background:rgba(148,163,184,.16); border-radius:20px; padding:3px 10px; }
.mfp-exc-count.high { color:#8a6d2e; background:rgba(193,138,62,.14); }
.mfp-exc-chip { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--panel); color:var(--text); border-radius:20px; padding:4px 11px; font-size:11.5px; cursor:pointer; font-weight:560; }
.mfp-exc-chip:hover { border-color:var(--accent,#DB2777); }
/* Exceptions are "off-plan vs LY" — a +34% beat is not an error. Direction is carried by a muted dot
   (sage up / brick down), severity by a soft ring; the chip itself stays neutral, never alarm-red. */
.mfp-exc-cdot { width:6px; height:6px; border-radius:50%; flex:none; background:#94897f; }
.mfp-exc-chip.up .mfp-exc-cdot { background:#4a7c59; }
.mfp-exc-chip.down .mfp-exc-cdot { background:#a5493d; }
.mfp-exc-chip.high.up .mfp-exc-cdot { box-shadow:0 0 0 3px rgba(74,124,89,.18); }
.mfp-exc-chip.high.down .mfp-exc-cdot { box-shadow:0 0 0 3px rgba(165,73,61,.18); }
.mfp-exc-chip.high { border-color:var(--border); color:var(--text); background:var(--panel); font-weight:600; }
.mfp-exc-more { color:var(--muted); font-size:11px; }
.mfp-exc-queue { border:1px solid var(--border); border-radius:12px; background:var(--panel); padding:6px; margin:10px 0; }
.mfp-exc-qhead { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; padding:6px 8px 8px; display:flex; align-items:center; gap:8px; }
.mfp-exc-row { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; border-top:1px solid var(--border); background:transparent; color:var(--text); padding:9px 10px; cursor:pointer; font-size:12.5px; }
.mfp-exc-row:first-of-type { border-top:0; }
.mfp-exc-row:hover { background:rgba(148,163,184,.08); }
.mfp-exc-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.mfp-exc-dot.up { background:#4a7c59; } .mfp-exc-dot.down { background:#a5493d; }
.mfp-exc-row.high .mfp-exc-dot { box-shadow:0 0 0 3px rgba(148,137,127,.20); }
.mfp-exc-txt { flex:1; } .mfp-exc-row.high .mfp-exc-txt { font-weight:640; }
.mfp-exc-go { color:var(--accent,#DB2777); font-size:11px; font-weight:640; opacity:0; }
.mfp-exc-row:hover .mfp-exc-go { opacity:1; }
@keyframes mfpFlash { 0%,100% { box-shadow:none; } 30% { box-shadow:inset 0 0 0 2px var(--accent,#DB2777), 0 0 0 3px rgba(219,39,119,.25); } }
.mfp-flash { animation:mfpFlash 2.2s ease; background:rgba(219,39,119,.08)!important; }

/* AI seed explain */
.mfp-ai { border:1px solid var(--border); border-radius:10px; background:var(--panel); margin:10px 0; overflow:hidden; }
.mfp-ai-toggle { width:100%; text-align:left; border:0; background:transparent; color:var(--text); padding:9px 12px; font-size:12px; font-weight:680; cursor:pointer; display:flex; align-items:center; gap:8px; }
.mfp-ai-tag { font-size:10px; font-weight:600; color:#6d28d9; background:rgba(124,58,237,.10); border-radius:20px; padding:2px 8px; text-transform:uppercase; letter-spacing:.03em; }
.mfp-ai-body { padding:4px 12px 12px; }
.mfp-ai-row { border-top:1px solid var(--border); padding:9px 0; }
.mfp-ai-h { display:flex; align-items:center; gap:10px; font-size:12.5px; }
.mfp-ai-h strong { min-width:170px; } .mfp-ai-yr { font-weight:720; }
.mfp-ai-h .chip-more { margin-left:auto; }
.mfp-ai-why { font-size:11px; color:var(--muted); margin:3px 0 5px; }
.mfp-ai-bars { display:flex; flex-wrap:wrap; gap:5px 12px; }
.mfp-ai-fac { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--muted); }
.mfp-ai-fac i { height:6px; background:#34d399; border-radius:3px; display:inline-block; min-width:2px; }
.mfp-ai-fac i.neg { background:#f87171; }
.mfp-ai-foot { font-size:10.5px; color:var(--muted); margin-top:8px; font-style:italic; }

/* Plan bridge */
.mfp-bridge { margin-top:16px; border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--panel); }
.mfp-br-svg { width:100%; height:auto; max-height:220px; display:block; }
.mfp-br-tot { font-weight:700; margin-left:6px; font-variant-numeric:tabular-nums; }
.mfp-br-tot.mfp-pos { color:#059669; } .mfp-br-tot.mfp-neg { color:#dc2626; }
.mfp-br-lbl { font-size:10.5px; fill:var(--muted); text-anchor:middle; }
.mfp-br-val { font-size:10.5px; fill:var(--text); text-anchor:middle; font-weight:650; font-variant-numeric:tabular-nums; }
.mfp-br-anchor { fill:#cbd5e1; } .mfp-br-total { fill:#047857; }
.mfp-br-pos { fill:#34d399; } .mfp-br-neg { fill:#f87171; }
.mfp-br-conn { stroke:var(--faint,#94a3b8); stroke-width:1; stroke-dasharray:3 3; opacity:.7; }
@media (prefers-color-scheme:dark){ .mfp-br-anchor { fill:#475569; } }

/* Snapshot compare bar */
.mfp-snapbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0; font-size:11.5px; }
.mfp-snap-lbl { font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-size:10.5px; }
.mfp-snap-item { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:20px; padding:4px 6px 4px 10px; background:var(--panel); }
.mfp-snap-item i { width:9px; height:9px; border-radius:50%; }
.mfp-snap-item em { font-style:normal; font-weight:660; }
.mfp-snap-x { color:var(--muted)!important; padding:2px 6px!important; }

/* Topline area — tab bar (Plan / Dashboard / upcoming areas) */
.mfp-tabs { display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--border); margin:6px 0 14px; overflow-x:auto; }
.mfp-tab { border:0; background:transparent; color:var(--muted); font-size:13px; font-weight:640; padding:9px 16px; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.mfp-tab:hover { color:var(--text); }
.mfp-tab.active { color:var(--accent,#DB2777); border-bottom-color:var(--accent,#DB2777); }
.mfp-tab.soon { color:var(--faint,#9aa7b4); cursor:default; display:inline-flex; align-items:center; gap:6px; }
.mfp-tab.soon i { font-style:normal; font-size:8.5px; text-transform:uppercase; letter-spacing:.05em; background:rgba(148,163,184,.18); color:var(--muted); border-radius:20px; padding:1px 6px; }

/* Dashboard tab — cards */
.mfp-dash { display:flex; flex-direction:column; gap:16px; }
.mfp-dash-row { display:flex; gap:16px; flex-wrap:wrap; }
.mfp-card { border:1px solid var(--border); border-radius:14px; background:var(--panel); padding:16px 18px; box-shadow:0 1px 2px rgba(15,42,74,.04); }
.mfp-card-half { flex:1 1 440px; min-width:340px; }
.mfp-card > h4 { margin:0 0 10px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.mfp-card .mfp-bridge, .mfp-card .mfp-chart { border:0; padding:0; margin:0; background:transparent; }
.mfp-card .mfp-exc-strip { margin:0; }

/* Why — compact inline teaser + deep-dive button */
.mfp-teaser { display:flex; align-items:center; gap:14px; padding:11px 14px; border-left:3px solid rgb(var(--mh,148,163,184)); background:linear-gradient(90deg, rgba(var(--mh,148,163,184),.06), rgba(var(--mh,148,163,184),0) 70%); flex-wrap:wrap; }
.mfp-teaser-stat { font-size:15px; font-weight:760; color:var(--text); } .mfp-teaser-stat em { font-style:normal; font-size:12px; font-weight:640; color:var(--muted); margin-left:4px; }
.mfp-teaser-line { font-size:12px; color:var(--muted); flex:1; min-width:180px; }
.mfp-deepdive { border:1px solid rgba(var(--mh,148,163,184),.5); background:var(--panel); color:rgb(var(--mh,148,163,184)); border-radius:20px; font-size:11.5px; font-weight:660; padding:5px 13px; cursor:pointer; }
.mfp-deepdive:hover { background:rgba(var(--mh,148,163,184),.10); }

/* Why deep-dive drawer (DHI-style) */
.mfp-wd-scrim { position:fixed; inset:0; background:rgba(11,42,74,.28); z-index:79; }
.mfp-wd { position:fixed; top:0; right:0; height:100vh; width:560px; max-width:94vw; background:var(--panel,#fff); box-shadow:-12px 0 40px rgba(11,42,74,.20); z-index:80; overflow:auto; padding:22px 24px 32px; font-size:13px; }
.mfp-wd-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.mfp-wd-eyebrow { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.mfp-wd-title { font-size:19px; font-weight:760; line-height:1.25; margin-top:4px; color:var(--text); }
.mfp-wd-scope { margin-top:5px; font-size:12px; color:var(--muted); }
.mfp-wd-x { border:0; background:transparent; font-size:19px; color:var(--muted); cursor:pointer; line-height:1; }
.mfp-wd-narr { background:rgba(4,120,87,.07); border:1px solid rgba(4,120,87,.20); border-radius:9px; padding:12px 14px; margin-top:14px; line-height:1.55; color:var(--text); }
.mfp-wd-tiles { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.mfp-wd-tile { flex:1 1 118px; background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:9px 12px; }
.mfp-wd-tl { font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.mfp-wd-tv { font-size:15px; font-weight:740; margin-top:2px; color:var(--text); }
.mfp-wd-ts { font-size:10.5px; color:var(--muted); }
.mfp-wd-body { margin-top:8px; }
.mfp-wd-body .mfp-drill-inner { max-width:none; border-left:0; background:transparent; padding:14px 0 0; }
.mfp-wd-body .mfp-drill-h { display:none; }
.mfp-wd-body .mfp-drill-cols { gap:16px; }
.mfp-wd-body .mfp-drill-col { min-width:220px; }

/* Why drawer — generative AI analyst read */
.mfp-wd-ai { margin-top:16px; border:1px solid rgba(var(--mh),.30); border-radius:12px; padding:14px 16px; background:linear-gradient(180deg, rgba(var(--mh),.08), rgba(var(--mh),.02)); }
.mfp-wd-ai-top { display:flex; align-items:center; gap:8px; }
.mfp-wd-ai-badge { font-size:11px; font-weight:800; letter-spacing:.02em; color:#fff; background:rgb(var(--mh)); border-radius:20px; padding:3px 10px; }
.mfp-wd-ai-sub { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; flex:1; }
.mfp-wd-ai-refresh { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:14px; }
.mfp-wd-ai-refresh:hover { color:rgb(var(--mh)); }
.mfp-wd-ai-headline { font-size:16px; font-weight:760; color:var(--text); margin:10px 0 6px; line-height:1.3; }
.mfp-wd-ai-read { font-size:13px; line-height:1.6; color:var(--text); }
.mfp-wd-ai-bullets { list-style:none; padding:0; margin:11px 0 0; display:flex; flex-direction:column; gap:6px; }
.mfp-wd-ai-bullets li { position:relative; padding:7px 11px 7px 30px; border-radius:8px; font-size:12px; line-height:1.45; background:var(--panel); border:1px solid var(--border); }
.mfp-wd-ai-bullets li::before { position:absolute; left:10px; top:7px; font-size:11px; }
.mfp-wd-ai-bullets li.ok::before { content:'▲'; color:#059669; }
.mfp-wd-ai-bullets li.warn::before { content:'●'; color:#d97706; }
.mfp-wd-ai-foot { font-size:10px; color:var(--muted); margin-top:10px; font-style:italic; }
.mfp-wd-ai-acthead { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:rgb(var(--mh)); font-weight:800; margin:13px 0 6px; }
.mfp-wd-ai-actions { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
.mfp-wd-ai-actions li { font-size:12px; line-height:1.45; color:var(--text); }
.mfp-wd-ai-actions li::marker { color:rgb(var(--mh)); font-weight:800; }
.mfp-wd-back { border:0; background:transparent; color:rgb(var(--mh)); cursor:pointer; font-size:11px; font-weight:700; padding:0; text-transform:none; letter-spacing:0; }
.mfp-wd-back:hover { text-decoration:underline; }
.mfp-mini-drill { color:rgb(var(--mh,148,163,184))!important; cursor:pointer; font-weight:640; }
.mfp-mini-drill:hover { text-decoration:underline; }

/* Daily Pulse */
.pulse-today { display:inline-block; font-size:12px; font-weight:640; color:var(--muted); background:rgba(148,163,184,.12); border-radius:20px; padding:4px 12px; margin-bottom:12px; }
.pulse-ai { margin-top:0; margin-bottom:16px; }
.pulse-cards { display:flex; gap:12px; flex-wrap:wrap; margin:16px 0; }
.pulse-card { flex:1 1 150px; border:1px solid var(--border); border-radius:12px; padding:13px 16px; background:var(--panel); }
.pulse-card.big { flex:1 1 100%; border-color:rgba(219,39,119,.35); background:linear-gradient(180deg, rgba(219,39,119,.06), rgba(219,39,119,.01)); }
.pulse-card label { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.pulse-card strong { display:block; font-size:22px; font-weight:770; color:var(--text); margin:3px 0; }
.pulse-card.big strong { font-size:30px; }
.pulse-card span { font-size:12px; font-weight:660; }
.pulse-card em { display:block; font-style:normal; font-size:11px; color:var(--muted); margin-top:2px; }
.pulse-spark { width:100%; height:auto; max-height:220px; display:block; }
.pulse-bars { display:flex; flex-direction:column; gap:7px; }
.pulse-bar-row { display:grid; grid-template-columns:110px 1fr 90px 48px; align-items:center; gap:9px; font-size:12px; }
.pulse-bar-n { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pulse-bar-tk { height:10px; background:rgba(148,163,184,.15); border-radius:5px; overflow:hidden; }
.pulse-bar-tk i { display:block; height:10px; background:var(--accent,#DB2777); border-radius:5px; }
.pulse-bar-v { text-align:right; font-weight:640; font-variant-numeric:tabular-nums; color:var(--text); }
.pulse-bar-d { text-align:right; font-weight:640; }
.pulse-bar-drill { color:var(--accent,#DB2777)!important; cursor:pointer; font-weight:600; }
.pulse-bar-drill:hover { text-decoration:underline; }
.pulse-filters { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 4px; }
.pulse-filters-spacer { flex:1; }
.pulse-pseg-lbl { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.pulse-pseg { }
.pulse-scope { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:640; color:var(--accent,#DB2777); background:rgba(219,39,119,.08); border-radius:20px; padding:4px 6px 4px 12px; margin-bottom:10px; }
.pulse-scope button { border:0; background:var(--panel); color:var(--muted); border-radius:20px; font-size:10.5px; padding:2px 9px; cursor:pointer; }
.pulse-card { cursor:pointer; transition:box-shadow .1s; }
.pulse-card:hover { box-shadow:0 2px 8px rgba(15,42,74,.10); }
.pulse-card.active { border-color:var(--accent,#DB2777); box-shadow:inset 0 0 0 1px var(--accent,#DB2777); }
.pulse-back { border:0; background:transparent; color:var(--accent,#DB2777); cursor:pointer; font-size:11px; font-weight:700; margin-left:8px; text-transform:none; letter-spacing:0; }
.pulse-back:hover { text-decoration:underline; }

.mfp-wd-ai-load { display:flex; gap:6px; margin:14px 0 6px; }
.mfp-wd-ai-load i { flex:1; height:8px; border-radius:4px; background:rgba(var(--mh),.14); animation:mfpShim 1.1s ease-in-out infinite; }
.mfp-wd-ai-load i:nth-child(2) { animation-delay:.18s; } .mfp-wd-ai-load i:nth-child(3) { animation-delay:.36s; }
.mfp-wd-ai-loadtxt { font-size:11.5px; color:var(--muted); }
@keyframes mfpShim { 0%,100% { opacity:.4; } 50% { opacity:1; } }
.mfp-wd-ai-err { font-size:12px; color:var(--muted); margin-top:10px; }
/* drawer sections */
.mfp-wd-sec { margin-top:20px; }
.mfp-wd-sec h5 { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; margin:0 0 9px; }
.mfp-wd-spark { width:100%; height:auto; max-height:150px; display:block; }
.mfp-wd-sparklab { display:flex; gap:14px; font-size:10.5px; color:var(--muted); margin-top:4px; }
.mfp-wd-sparklab i { display:inline-block; width:12px; height:3px; border-radius:2px; margin-right:4px; vertical-align:middle; }
.mfp-wd-sparklab span:last-child { margin-left:auto; }
.mfp-wd-drv { display:grid; grid-template-columns:96px 1fr 92px; align-items:center; gap:9px; margin-bottom:6px; font-size:12px; }
.mfp-wd-drv-n { color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mfp-wd-drv-bar { height:9px; background:rgba(148,163,184,.15); border-radius:5px; overflow:hidden; }
.mfp-wd-drv-bar i { display:block; height:9px; border-radius:5px; }
.mfp-wd-drv-bar i.pos { background:#34d399; } .mfp-wd-drv-bar i.neg { background:#f87171; }
.mfp-wd-drv-v { text-align:right; font-weight:640; font-variant-numeric:tabular-nums; }
.mfp-wd-flag { position:relative; font-size:12px; line-height:1.45; padding:9px 12px 9px 12px; border-radius:9px; margin-bottom:7px; border:1px solid; }
.mfp-wd-flag.opp { background:rgba(5,150,105,.06); border-color:rgba(5,150,105,.25); }
.mfp-wd-flag.risk { background:rgba(217,119,6,.07); border-color:rgba(217,119,6,.28); }
.mfp-wd-flag-tag { display:inline-block; font-size:8.5px; font-weight:800; letter-spacing:.05em; border-radius:4px; padding:1px 6px; margin-right:8px; vertical-align:middle; }
.mfp-wd-flag.opp .mfp-wd-flag-tag { background:#059669; color:#fff; } .mfp-wd-flag.risk .mfp-wd-flag-tag { background:#d97706; color:#fff; }

/* By Channel */
.mfp-chan-bar { display:flex; align-items:center; gap:12px; margin:4px 0 14px; flex-wrap:wrap; }
.mfp-chan-lbl { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; white-space:nowrap; }
.mfp-mixbar { flex:1; min-width:260px; display:flex; height:26px; border-radius:7px; overflow:hidden; }
.mfp-mixseg { display:flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:640; white-space:nowrap; overflow:hidden; }
.mfp-chan-share { margin-left:12px; font-size:11px; font-weight:600; color:var(--muted); }
.mfp-grid .mfp-chan-mrow td { background:rgba(var(--mh,148,163,184),.05); border-top:1px solid rgba(var(--mh,148,163,184),.18); padding-top:5px; }
.mfp-chan-mlbl { font-weight:700!important; color:rgb(var(--mh,148,163,184))!important; font-size:11px!important; }
.mfp-chan-check .mfp-mhead td { background:rgba(148,163,184,.12); box-shadow:inset 3px 0 0 var(--muted); }
.mfp-chan-check .mfp-mlabel { color:var(--text); }

/* Item Hierarchy — Dept > Category > Sub-Category drill */
.mfp-hier-bar { display:flex; align-items:center; gap:12px; margin:4px 0 12px; }
.mfp-hier-spacer { flex:1; }
.mfp-hier th, .mfp-hier td { padding:6px 12px; font-size:12px; height:26px; }
.mfp-hier thead th { font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:700; text-align:right; }
.mfp-hier thead th.mfp-hier-name { text-align:left; }
.mfp-hier-name { text-align:left!important; position:sticky; left:0; background:var(--panel); z-index:1; min-width:260px; }
.mfp-hier-row { cursor:default; }
.mfp-hier-row.lvl0, .mfp-hier-row.lvl1 { cursor:pointer; }
.mfp-hier-row:hover td { background:rgba(148,163,184,.07); }
.mfp-hier-row.lvl0 > .mfp-hier-name { font-weight:720; color:var(--text); padding-left:14px; }
.mfp-hier-row.lvl1 > .mfp-hier-name { font-weight:600; color:var(--text); padding-left:34px; }
.mfp-hier-row.lvl2 > .mfp-hier-name { color:var(--muted); padding-left:56px; font-size:11.5px; }
.mfp-hier-row.lvl0 td { border-top:1px solid var(--border); }
.mfp-hier-tot td { font-weight:740; background:rgba(148,163,184,.10); border-bottom:2px solid var(--border); }
.mfp-hier-caret { display:inline-block; width:14px; color:var(--muted); font-size:9px; margin-right:4px; }
.mfp-hier-leaf { display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--border); margin:0 9px 1px 4px; }
.mfp-hier-wp { font-weight:700; color:var(--text); }
.mfp-hier-mix { white-space:nowrap; }
.mfp-hier-mixbar { display:inline-block; width:46px; height:6px; border-radius:3px; background:rgba(148,163,184,.2); margin-right:6px; vertical-align:middle; overflow:hidden; }
.mfp-hier-mixbar i { display:block; height:6px; background:var(--accent,#DB2777); border-radius:3px; }
.mfp-hier-mixh { text-align:right; }
.mfp-hier .mfp-hier-wp.mfp-in-td { padding:1px 4px!important; }
.mfp-hier .mfp-hier-wp .mfp-in { width:104px; border-color:rgba(15,118,110,.25); font-weight:700; }
.mfp-hier .mfp-hier-wp .mfp-in:hover { border-color:var(--accent,#0F766E); }
.mfp-hier-edited .mfp-in { background:rgba(15,118,110,.10); border-color:rgba(15,118,110,.5)!important; }
.mfp-hier-editcount { font-size:11px; font-weight:640; color:#0F766E; background:rgba(15,118,110,.10); border-radius:20px; padding:3px 10px; margin-right:4px; }

/* Item hierarchy — Level 1/2/3 mix breakdown (channel-style blocks, drilled) */
.mfp-item .mfp-item-h { cursor:pointer; }
.mfp-item .mfp-item-h:hover td { filter:brightness(0.98); }
.mfp-item-blk.lvl0 .mfp-mhead td { padding-left:12px; }
.mfp-item-blk.lvl1 .mfp-mhead td { padding-left:32px; }
.mfp-item-blk.lvl2 .mfp-mhead td { padding-left:52px; }
.mfp-item-blk.lvl1 .mfp-chan-mlbl, .mfp-item-blk.lvl1 .mfp-rlabel { padding-left:40px; }
.mfp-item-blk.lvl2 .mfp-chan-mlbl, .mfp-item-blk.lvl2 .mfp-rlabel { padding-left:60px; }
.mfp-item-blk.lvl1 .mfp-mlabel { font-size:12px; }
.mfp-item-blk.lvl2 .mfp-mlabel { font-size:11.5px; font-weight:640; }
.mfp-item-tl .mfp-mhead td { background:rgba(148,163,184,.14)!important; box-shadow:inset 3px 0 0 var(--muted); font-weight:740; }
.mfp-item-tl .mfp-mlabel { color:var(--text)!important; }
.mfp-item-lvl { display:inline-block; font-size:9px; font-weight:800; letter-spacing:.03em; color:#fff; background:rgb(var(--mh,148,163,184)); border-radius:4px; padding:1px 5px; margin-right:7px; vertical-align:middle; }
.mfp-item .mfp-hier-caret { font-size:12px; color:rgb(var(--mh,148,163,184)); }
.mfp-item-h.has-kids .mfp-mcol { position:relative; }
.mfp-item-drill { margin-left:12px; font-size:10.5px; font-weight:660; color:rgb(var(--mh,148,163,184)); background:rgba(var(--mh,148,163,184),.10); border:1px solid rgba(var(--mh,148,163,184),.35); border-radius:20px; padding:2px 10px; }
.mfp-item-h.has-kids:hover .mfp-item-drill { background:rgb(var(--mh,148,163,184)); color:#fff; }
.mfp-item-h.has-kids:hover td { background:rgba(var(--mh,148,163,184),.14); }

/* Month → week column drill */
.mfp-wk-caret { display:inline-block; cursor:pointer; color:var(--muted); font-size:9px; margin-right:4px; padding:0 2px; border-radius:3px; }
.mfp-wk-caret:hover { color:var(--accent,#DB2777); background:rgba(219,39,119,.12); }
.mfp-grid th.mfp-wk { background:rgba(37,99,235,.07); }
.mfp-grid td.mfp-wk { background:rgba(37,99,235,.05); font-style:italic; color:var(--muted); }
.mfp-grid .mfp-wp td.mfp-wk { color:var(--text); font-style:normal; }
.mfp-wk-end { display:block; font-size:10.5px; font-weight:700; color:var(--text); }
.mfp-wk-num { display:block; font-size:8.5px; font-weight:600; color:var(--muted); text-transform:none; letter-spacing:0; }

/* Three-way reconciliation */
.recon-grid th .recon-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.recon-tri { display:inline-flex; align-items:flex-end; gap:2px; height:22px; width:34px; vertical-align:middle; }
.recon-tri i { flex:1; display:block; border-radius:1px 1px 0 0; min-height:8px; }
.recon-rec { font-weight:740; color:var(--text); background:rgba(15,118,110,.07); }
.recon-picked { box-shadow:inset 0 0 0 1px rgba(15,118,110,.35); background:rgba(15,118,110,.06); }
.recon-review { color:#b45309; background:rgba(180,83,9,.10); border-radius:20px; padding:2px 9px; font-size:11px; font-weight:640; }
.mfp-kpi-rec { border-color:rgba(15,118,110,.4); background:rgba(15,118,110,.05); }
.recon-grid td, .recon-grid th { white-space:nowrap; }

/* Store Allocation — editable policy-lever cells */
.afa-cell-select { border: 1px solid var(--border, #d8dee5); border-radius: 6px; background: var(--surface, #fff); font-size: 12px; font-weight: 600; color: var(--text, #1a2733); padding: 3px 6px; min-width: 74px; }
.afa-cell-select:hover { border-color: var(--accent, #0F766E); }
.afa-cell-select:focus { outline: none; border-color: var(--accent, #0F766E); box-shadow: 0 0 0 2px rgba(15,118,110,.15); }
tr.afa-row-edited td { background: rgba(15,118,110,.06); }
tr.afa-row-edited td:first-child { box-shadow: inset 3px 0 0 var(--accent, #0F766E); }
.afa-bar-spacer { flex: 1 1 auto; }

/* Store Allocation — policy sub-nav + number cells */
.afa-policy-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.afa-policy-pill { border: 1px solid var(--border, #d8dee5); background: var(--surface, #fff); color: var(--text, #1a2733); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.afa-policy-pill:hover { border-color: var(--accent, #0F766E); }
.afa-policy-pill.active { background: var(--accent, #0F766E); border-color: var(--accent, #0F766E); color: #fff; }
.afa-policy-pill.pending { color: var(--faint, #8a97a3); }
.afa-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: #d4a017; display: inline-block; }
.afa-cell-num { width: 84px; border: 1px solid var(--border, #d8dee5); border-radius: 6px; background: var(--surface, #fff); font-size: 12px; font-weight: 600; color: var(--text, #1a2733); padding: 3px 8px; text-align: right; }
.afa-cell-num:focus { outline: none; border-color: var(--accent, #0F766E); box-shadow: 0 0 0 2px rgba(15,118,110,.15); }
.afa-num-col { max-width: 130px; }

/* Store Allocation — Manage TOs workbench */
.afa-insight { font-size: 12.5px; color: var(--muted, #56626e); margin: -4px 0 12px; padding: 0 2px; }
.afa-insight strong { color: var(--text, #1a2733); }
.afa-insight strong.warn { color: #b45309; }
.afa-chip-group { display: inline-flex; align-items: center; gap: 4px; }
.afa-chip-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint, #8a97a3); font-weight: 600; margin-right: 2px; }
.afa-chip { border: 1px solid var(--border, #d8dee5); background: var(--surface, #fff); color: var(--text, #1a2733); border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.afa-chip:hover { border-color: var(--accent, #0F766E); }
.afa-chip.active { background: var(--accent, #0F766E); border-color: var(--accent, #0F766E); color: #fff; }
.afa-chip-n { opacity: .65; font-weight: 500; }
.afa-chip.active .afa-chip-n { opacity: .85; }
.afa-fill { display: inline-block; min-width: 42px; text-align: center; border-radius: 5px; padding: 1px 6px; font-size: 11.5px; font-weight: 700; }
.afa-fill-ok { color: #047857; background: rgba(4,120,87,.10); }
.afa-fill-warn { color: #b45309; background: rgba(180,83,9,.10); }
.afa-fill-alert { color: #b91c1c; background: rgba(185,28,28,.10); }
tr.afa-row-short td { background: rgba(180,83,9,.045); }
tr.afa-row-short td:first-child { box-shadow: inset 3px 0 0 #d4a017; }
.afa-src-cell { font-size: 11.5px; color: var(--muted, #56626e); white-space: nowrap; }
.afa-src-full { color: var(--text, #1a2733); }
.afa-src-part { color: var(--faint, #8a97a3); font-size: 11px; margin-left: 4px; }

/* Store Allocation — resolution chips + in-transit + Why drawer */
.afa-row-click { cursor: pointer; }
.afa-intransit { color: #2563eb; font-weight: 600; font-size: 11px; }
.afa-reso { font-weight: 600; font-size: 11.5px; white-space: nowrap; }
.afa-reso-po { color: #1d4ed8; }
.afa-reso-sis { color: #047857; }
.afa-reso-buy { color: #b91c1c; }
.afa-dw-scrim { position: fixed; inset: 0; background: rgba(15,23,32,.28); z-index: 90; }
.afa-dw { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; background: var(--surface, #fff); box-shadow: -8px 0 28px rgba(15,23,32,.18); z-index: 91; display: flex; flex-direction: column; }
.afa-dw-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px 18px 12px; border-bottom: 1px solid var(--border, #e5e9ee); }
.afa-dw-title { font-size: 16px; font-weight: 700; color: var(--text, #1a2733); }
.afa-dw-region { font-size: 11px; font-weight: 600; color: var(--faint, #8a97a3); border: 1px solid var(--border, #d8dee5); border-radius: 999px; padding: 1px 7px; margin-left: 6px; vertical-align: middle; }
.afa-dw-sub { font-size: 12px; color: var(--muted, #56626e); margin-top: 3px; font-family: 'IBM Plex Mono', monospace; }
.afa-dw-x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--faint, #8a97a3); cursor: pointer; padding: 0 2px; }
.afa-dw-body { padding: 6px 18px 24px; overflow-y: auto; }
.afa-dw-sec { padding: 12px 0; border-bottom: 1px solid var(--border-soft, #eef1f4); }
.afa-dw-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint, #8a97a3); font-weight: 700; margin-bottom: 7px; }
.afa-dw-math { font-size: 12.5px; line-height: 1.65; color: var(--muted, #56626e); }
.afa-dw-math strong { color: var(--text, #1a2733); }
.afa-dw-reso { background: rgba(29,78,216,.05); margin: 6px -18px 0; padding: 12px 18px; border-bottom: none; border-left: 3px solid #1d4ed8; }
.afa-dw-reso .afa-dw-h { color: #1d4ed8; }
.afa-dw-reso div { font-size: 13px; line-height: 1.55; color: var(--text, #1a2733); }
.afa-dw-leg { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.afa-dw-leg-wh { font-weight: 700; color: var(--text, #1a2733); min-width: 40px; }
.afa-dw-leg-av { color: var(--muted, #56626e); }
.afa-dw-leg-po { margin-left: auto; font-size: 11.5px; color: #1d4ed8; font-weight: 600; }
.afa-dw-kv { display: flex; justify-content: space-between; font-size: 12.5px; padding: 3px 0; color: var(--muted, #56626e); }
.afa-dw-kv strong { color: var(--text, #1a2733); }
.afa-dw-muted { font-size: 12.5px; color: var(--faint, #8a97a3); }

/* Store Allocation — Manage TOs: POV bar, Cadence/Sheet toggle */
.afa-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.afa-bar-top { margin-bottom: 8px; }
.afa-bar-pov { padding: 8px 10px; background: var(--surface-2, #f7f9fb); border: 1px solid var(--border-soft, #eef1f4); border-radius: 8px; margin-bottom: 12px; }
.afa-bar-spacer { flex: 1 1 auto; }
.afa-view-toggle { flex: 0 0 auto; }
.afa-size-chip { font-size: 10px; font-weight: 700; color: var(--accent, #0F766E); background: rgba(15,118,110,.09); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: middle; }
.afa-asof { color: var(--faint, #8a97a3); font-size: 11.5px; }
tr.afa-row-appr td:first-child { box-shadow: inset 3px 0 0 #047857; }

/* Store Allocation — Sheet view (NSPB Manage TO, mirrored, Excel-on-web) */
.afa-sheet-note { font-size: 11.5px; color: var(--muted, #56626e); margin: 2px 0 8px; }
.afa-sheet-note strong { color: var(--text, #1a2733); }
.afa-sheet-wrap { position: relative; max-height: calc(100vh - 320px); overflow: auto; border: 1px solid var(--border, #d7dde5); border-radius: 8px; background: #fff; }
.afa-sheet { border-collapse: separate; border-spacing: 0; font-size: 12px; width: max-content; min-width: 100%; }
.afa-sheet th { position: sticky; top: 0; z-index: 6; background: #eef2f5; color: #243244; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0; text-align: right; padding: 0 6px; height: 26px; white-space: nowrap; border-bottom: 1px solid #c9d3dc; border-right: 1px solid #e1e6ec; }
.afa-sheet th.afa-edit-h { background: #e7f4f0; color: #0f5c53; }
.afa-sheet td { padding: 0 6px; height: 23px; line-height: 23px; text-align: right; white-space: nowrap; border-bottom: 1px solid #eef1f4; border-right: 1px solid #f1f4f7; font-variant-numeric: tabular-nums; color: #1c2733; background: #fff; }
.afa-sheet th.num, .afa-sheet td.num { min-width: 44px; }
.afa-sheet th:not(.num):not(.afa-edit-h), .afa-sheet td:not(.num):not(.afa-edit) { text-align: left; }
.afa-sheet tbody tr:hover td { background: #f6faf9; }
.afa-sheet .mono { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; }
.afa-sheet .afa-frz { position: sticky; left: 0; z-index: 7; min-width: 124px; max-width: 124px; overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 #e1e6ec; }
.afa-sheet .afa-frz2 { position: sticky; left: 124px; z-index: 7; min-width: 96px; max-width: 118px; overflow: hidden; text-overflow: ellipsis; box-shadow: 1px 0 0 #e1e6ec; }
.afa-sheet thead .afa-frz, .afa-sheet thead .afa-frz2 { z-index: 9; }
.afa-sheet tbody .afa-frz, .afa-sheet tbody .afa-frz2 { background: #fff; }
.afa-sheet tbody tr:hover .afa-frz, .afa-sheet tbody tr:hover .afa-frz2 { background: #f6faf9; }
.afa-propcol { cursor: pointer; color: var(--accent, #0F766E); font-weight: 700; text-align: center !important; min-width: 58px; }
.afa-prop { background: #fbfcfd; color: #56626e; font-size: 11px; }
.afa-muted { color: #a3adb8; }
.afa-sheet td.afa-edit { padding: 0; background: #fffdf3; }
.afa-sheet th.afa-edit-h.num, .afa-sheet td.afa-edit { min-width: 58px; max-width: 74px; }
.afa-sheet-edit { width: 100%; height: 23px; box-sizing: border-box; border: none; background: transparent; font: inherit; font-size: 11.5px; text-align: right; padding: 0 6px; color: #1c2733; outline: none; }
.afa-sheet-edit:focus { background: #fff; box-shadow: inset 0 0 0 2px var(--accent, #0F766E); }
.afa-sheet-sel { text-align: left; cursor: pointer; min-width: 62px; }
.afa-flag { width: 100%; height: 23px; border: none; background: transparent; font: inherit; font-size: 11.5px; font-weight: 700; color: #b0b8c1; cursor: pointer; }
.afa-flag.on { color: #047857; background: rgba(4,120,87,.10); }
.afa-flag.off { color: #94a3b0; }
/* Policy-grid engine (matrix policy forms) */
.afa-sheet.afa-pg th.afa-pg-group { text-align: center; background: #e6ebf0; color: #364656; border-bottom: 1px solid #cdd6df; }
.afa-sheet.afa-pg thead tr:first-child th { border-bottom: 1px solid #d5dde5; }
.afa-sheet.afa-pg td.afa-edit { min-width: 52px; }
.afa-pg-note { font-size: 11.5px; color: var(--muted, #56626e); }
.afa-flag-warn { color: #b45309; font-weight: 700; }
.afa-sheet-constr td { background: rgba(180,83,9,.05); }
.afa-sheet-constr .afa-frz, .afa-sheet-constr .afa-frz2 { background: #fdf7ef; }
.afa-sheet-appr .afa-frz { box-shadow: 1px 0 0 #e1e6ec, inset 3px 0 0 #047857; }

/* Store Allocation — Cadence table density (kill the airy column gaps): fixed layout, one column absorbs slack */
.afa-cad table { table-layout: fixed; width: 100%; }
.afa-cad thead th { font-size: 10.5px; padding-top: 6px; padding-bottom: 6px; }
.afa-cad tbody td { padding-top: 5px; padding-bottom: 5px; }
.afa-cad th:nth-child(1), .afa-cad td:nth-child(1) { width: 132px; }                 /* SKU */
.afa-cad th:nth-child(2), .afa-cad td:nth-child(2) { width: 258px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* Name */
.afa-cad th:nth-child(3), .afa-cad td:nth-child(3) { width: 156px; }                 /* Store */
.afa-cad th:nth-child(4), .afa-cad td:nth-child(4) { width: 58px; }                  /* Region */
.afa-cad th.num, .afa-cad td.num { width: 64px; }                                    /* AWS WOS On-hand Uncons Total Fill */
.afa-cad th:last-child, .afa-cad td:last-child { width: auto; white-space: nowrap; } /* Sourcing / action absorbs the remainder */

/* ===== Store Allocation — deeper visual polish pass (Refactoring UI: hierarchy, density, de-emphasis) ===== */
/* KPI strip is secondary chrome — tighten it so the work surface (table) leads */
.afa-kpis { gap: 10px; margin-bottom: 14px; }
.afa-kpis .kpi { padding: 10px 14px; border-radius: 9px; }
.afa-kpis .kpi label { font-size: 9.5px; letter-spacing: .06em; }
.afa-kpis .kpi strong { margin-top: 4px; font-size: 22px; }
/* Name cell: truncate the name but ALWAYS show the size chip (was getting ellipsis-cut) */
.afa-cad td.afa-nm-cell { overflow: visible; }
.afa-cad .afa-nm { display: inline-block; max-width: 208px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.afa-cad .afa-size-chip { vertical-align: middle; }
/* widen the text columns a touch to use the space + shrink the right gap */
.afa-cad th:nth-child(2), .afa-cad td:nth-child(2) { width: 300px; }
.afa-cad th:nth-child(3), .afa-cad td:nth-child(3) { width: 178px; }
/* row affordance */
.afa-cad tbody tr { transition: background .08s; }
.afa-cad tbody tr:hover td { background: #f5faf8; }
.afa-cad tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent, #0F766E); }
/* tighten the vertical rhythm above the table */
.afa-bar-top { margin-bottom: 7px; }
.afa-insight { margin: 2px 0 10px; }
/* Sheet: a hair more depth on the frozen edge + calmer constrained tint */
.afa-sheet .afa-frz { box-shadow: 2px 0 0 #dbe1e8; }
.afa-sheet-constr td { background: rgba(190,110,30,.055); }
.afa-sheet thead th { box-shadow: 0 1px 0 #c9d3dc; }
/* editable focus ring (WCAG-visible) already on inputs; make the flag buttons focus-visible too */
.afa-flag:focus-visible, .afa-sheet-sel:focus-visible { outline: 2px solid var(--accent, #0F766E); outline-offset: -2px; }

/* Per-user density preference (account menu → Preferences). Compact tightens the vertical rhythm. */
body[data-density="compact"] .view{padding-top:8px}
body[data-density="compact"] .pr-tbl td,body[data-density="compact"] .pr-tbl th{padding-top:4px;padding-bottom:4px}
body[data-density="compact"] .cad-table td,body[data-density="compact"] .cad-table th{padding-top:5px;padding-bottom:5px}
body[data-density="compact"] .module-header{padding-bottom:2px;margin-bottom:6px}
body[data-density="compact"] .cad-kpi{padding:9px 11px}

/* ---- MFP Sheet (Univer) + Summary visualization ---- */
.mfp-uv-note{font-size:12px;color:#5b6675;padding:8px 10px;background:#f6f8fb;border:1px solid #e3e8ef;border-radius:6px;margin:8px 0}
.mfp-uv-note b{color:#1f2a37}
.mfp-uv-box{height:calc(100vh - 330px);min-height:420px;border:1px solid #d7dde5;border-radius:6px;overflow:hidden;background:#fff}
.mfp-uv-loading{padding:36px;text-align:center;color:#5b6675;font-size:12.5px}
.mfp-sum-viz{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.mfp-sum-viz .mfp-card-half{margin:0}
@media (max-width:1100px){.mfp-sum-viz{grid-template-columns:1fr}}

/* ---- Vendor Scorecard ---- */
.av-wrap{margin-top:10px}
.av-table{width:100%;border-collapse:collapse;font-size:12.5px}
.av-table th{text-align:left;padding:7px 9px;border-bottom:2px solid #e3e8ef;color:#5b6675;font-weight:600;white-space:nowrap;position:sticky;top:0;background:#fff;z-index:1}
.av-table th.num{text-align:right}
.av-table td{padding:7px 9px;border-bottom:1px solid #eef2f6;vertical-align:middle}
.av-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.av-row{cursor:pointer}
.av-row:hover{background:#f6f9fc}
.av-row.av-sel{background:#f2f9f6}
.av-dept{display:block;font-size:10.5px;color:#94a3b8;font-weight:500;margin-top:1px}
.av-sub{color:#94a3b8;font-size:10.5px}
.av-comp{white-space:nowrap}
.av-comp b{margin-left:6px;font-variant-numeric:tabular-nums}
.av-cbar{display:inline-block;width:56px;height:7px;border-radius:4px;background:#eef2f6;overflow:hidden;vertical-align:middle}
.av-cbar i{display:block;height:100%;border-radius:4px}
.av-cbar.av-g i{background:#059669}.av-cbar.av-b i{background:#1e47c4}.av-cbar.av-a i{background:#d97706}.av-cbar.av-r i{background:#dc2626}
.av-rag{display:inline-block;padding:2px 7px;border-radius:11px;font-weight:600;font-size:11.5px;font-variant-numeric:tabular-nums}
.av-rag.av-g{background:#dcfce7;color:#15803d}.av-rag.av-a{background:#fef3c7;color:#b45309}.av-rag.av-r{background:#fee2e2;color:#b91c1c}
.av-tier{display:inline-block;padding:2px 8px;border-radius:5px;font-weight:700;font-size:11px;letter-spacing:.01em;white-space:nowrap}
.av-tier.av-g{background:#065f46;color:#fff}.av-tier.av-b{background:#1e47c4;color:#fff}.av-tier.av-a{background:#b45309;color:#fff}.av-tier.av-r{background:#b91c1c;color:#fff}
.av-onord{color:#5b6675}
.av-trend{width:120px}.av-spark{width:120px;height:26px;display:block}
.av-drill{color:#94a3b8;text-align:center;font-size:13px}
.av-detail{margin-top:14px}
.av-detail-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:12px}
@media (max-width:1050px){.av-detail-grid{grid-template-columns:1fr}}
.av-score{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:6px}
.av-score th{text-align:left;padding:6px 8px;border-bottom:1px solid #e3e8ef;color:#5b6675;font-weight:600}
.av-score th.num,.av-score td.num{text-align:right;font-variant-numeric:tabular-nums}
.av-score td{padding:6px 8px;border-bottom:1px solid #f1f4f8}
.av-score-tot td{border-top:2px solid #e3e8ef;background:#f8fafc}
.av-signal{padding:9px 11px;background:#f6f8fb;border:1px solid #e3e8ef;border-radius:6px;font-size:12.5px;color:#1f2a37;line-height:1.5}
.av-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:11px}
.av-fact{background:#fafbfc;border:1px solid #eef2f6;border-radius:6px;padding:7px 9px}
.av-fact label{display:block;font-size:10.5px;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.av-fact strong{font-size:14px;color:#1f2a37;font-variant-numeric:tabular-nums}
.av-md{margin-top:10px;font-size:12.5px;font-weight:600}
.av-otblink{margin-top:12px}

/* ---- OTB hero row + basis toggle ---- */
.mfp-basis-seg{display:inline-flex;margin-left:6px}
.mfp-basis-seg .seg-btn{padding:3px 12px}
.mfp-otb-hero td{background:#f2f7ff !important;font-weight:600}
.mfp-otb-hero .mfp-otb-lbl{color:#1e47c4}
.mfp-otb-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;background:#1e47c4;color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle}
.mfp-otb-over{background:#fee2e2 !important;color:#b91c1c !important;font-weight:700}

/* ---- Business Health (exec landing) ---- */
.hl-score{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:11px;margin:6px 0 4px}
.hl-big{background:linear-gradient(135deg,#047857,#065f46);color:#fff;border-radius:13px;padding:16px 18px;display:flex;flex-direction:column;justify-content:center}
.hl-big .hl-lab{font-size:11px;font-weight:600;opacity:.82;letter-spacing:.02em}
.hl-big .hl-val{font-size:33px;font-weight:800;letter-spacing:-.025em;margin:5px 0 3px;font-variant-numeric:tabular-nums}
.hl-big .hl-bvs{font-size:12.5px;font-weight:600;opacity:.95}
.hl-big .hl-bvs b{background:rgba(255,255,255,.2);padding:1px 7px;border-radius:20px}
.hl-kpi{background:var(--panel,#f7f9fc);border:1px solid var(--line,#e3e8ef);border-radius:13px;padding:14px 15px 12px}
.hl-kpi .hl-lab{font-size:11px;color:var(--muted,#5b6675);font-weight:600}
.hl-kval{font-size:23px;font-weight:750;letter-spacing:-.02em;margin:5px 0 3px;font-variant-numeric:tabular-nums}
.hl-vs{font-size:11.5px;font-weight:600}
.hl-vs.up{color:#059669}.hl-vs.down{color:#dc2626}.hl-vs.flat{color:#b45309}
.hl-two{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;margin-top:12px}
.hl-three{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:12px;margin-top:12px}
.hl-csub{color:var(--muted,#5b6675);font-size:12px;margin:-4px 0 12px}
.hl-chart{width:100%;height:auto;max-height:250px;display:block}
.hl-legend{display:flex;gap:16px;margin-top:8px;font-size:11.5px;color:var(--muted,#5b6675)}
.hl-legend i{display:inline-block;width:16px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.hl-mixbar{display:flex;height:32px;border-radius:8px;overflow:hidden;margin:2px 0 12px}
.hl-mixseg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11.5px;font-weight:700;min-width:2px}
.hl-mixrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line,#e3e8ef);font-size:13px}
.hl-mixrow:first-of-type{border-top:0}
.hl-mixrow .nm{font-weight:600;display:flex;align-items:center;gap:8px}
.hl-sw{width:9px;height:9px;border-radius:3px}
.hl-mixrow .r{display:flex;gap:14px;align-items:baseline}
.hl-mixrow .amt{font-weight:700;font-variant-numeric:tabular-nums}
.hl-mixrow .up{color:#059669;font-weight:700;font-size:12px}.hl-mixrow .down{color:#dc2626;font-weight:700;font-size:12px}
.hl-catrow{display:grid;grid-template-columns:96px 1fr 60px 52px;gap:11px;align-items:center;padding:8px 0;border-top:1px solid var(--line,#e3e8ef);font-size:13px}
.hl-catrow:first-of-type{border-top:0}
.hl-catrow .nm{font-weight:600}
.hl-bar{height:8px;border-radius:5px;background:var(--panel-2,#eef2f6);overflow:hidden}
.hl-bar i{display:block;height:100%;border-radius:5px}
.hl-bar i.b{background:#1e47c4}.hl-bar i.good{background:#059669}.hl-bar i.crit{background:#dc2626}
.hl-catrow .amt{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.hl-catrow .yoy{text-align:right;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.hl-catrow .yoy.up{color:#059669}.hl-catrow .yoy.down{color:#dc2626}
.hl-hrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line,#e3e8ef);font-size:13px}
.hl-hrow:first-of-type{border-top:0}
.hl-hrow .hv{font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px}
.hl-pill{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:5px}
.hl-pill.g{background:#dcfce7;color:#15803d}.hl-pill.a{background:#fef3c7;color:#b45309}.hl-pill.r{background:#fee2e2;color:#b91c1c}
.hl-aibadge{font-size:10px;font-weight:700;letter-spacing:.03em;color:#fff;background:linear-gradient(90deg,#7522bb,#1e47c4);padding:2px 7px;border-radius:5px;margin-right:6px}
.hl-brief p{margin:0 0 9px;font-size:13px}.hl-brief .lead{font-weight:650}
.hl-watch{list-style:none;padding:0;margin:4px 0 0;display:flex;flex-direction:column;gap:7px}
.hl-watch li{display:flex;gap:9px;font-size:12.5px;color:var(--muted,#5b6675);align-items:flex-start}
.hl-watch li::before{content:"";width:6px;height:6px;border-radius:50%;background:#047857;margin-top:6px;flex:none}
@media (max-width:1050px){.hl-score{grid-template-columns:1fr 1fr}.hl-two,.hl-three{grid-template-columns:1fr}}

.mfp-sum{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.mfp-sum .mfp-dash-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:1000px){.mfp-sum .mfp-dash-row{grid-template-columns:1fr}}

.mfp-hier-lbl{font-size:11px;font-weight:600;color:var(--muted,#5b6675);text-transform:uppercase;letter-spacing:.03em;margin:0 5px 0 12px}
.mfp-hier-lbl:first-child{margin-left:0}

.mfp-br-zoom{margin-left:auto;font-size:10.5px;color:var(--faint,#94a3b8);font-style:italic;}

/* ---- Topline Summary: growth-vs-trend, read, phasing ---- */
.mfp-csub{color:var(--muted,#5b6675);font-size:12px;margin:-2px 0 12px}
.mfp-tr-head,.mfp-tr-row{display:grid;grid-template-columns:150px 1fr 84px 96px 92px 150px;align-items:center;gap:12px}
.mfp-tr-head{padding:0 0 7px;border-bottom:1px solid var(--line,#e3e8ef);font-size:10.5px;color:var(--faint,#94a3b8);font-weight:700;text-transform:uppercase;letter-spacing:.03em;text-align:right}
.mfp-tr-head em{font-weight:500;text-transform:none;letter-spacing:0;font-size:10px;font-style:normal}
.mfp-tr-row{padding:9px 0;border-bottom:1px solid var(--line,#eef2f6);font-size:13px}
.mfp-tr-row:last-child{border-bottom:0}
.mfp-tr-name{font-weight:650;color:var(--text,#1b2431);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mfp-tr-bar{height:8px;border-radius:5px;background:var(--panel-2,#eef2f6);overflow:hidden}
.mfp-tr-bar i{display:block;height:100%;border-radius:5px;background:#047857}
.mfp-tr-val,.mfp-tr-n{text-align:right;font-variant-numeric:tabular-nums;font-weight:650}
.mfp-tr-n{font-size:12.5px}
.mfp-tr-plan{color:var(--muted,#5b6675)}
.mfp-tr-flag{text-align:right}
.mfp-gapchip{display:inline-block;padding:2px 8px;border-radius:11px;font-size:10.5px;font-weight:700;white-space:nowrap}
.mfp-gapchip.over{background:#fee2e2;color:#b91c1c}
.mfp-gapchip.under{background:#e0f2fe;color:#0369a1}
.mfp-read{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.mfp-read li{position:relative;padding-left:16px;font-size:13px;line-height:1.5;color:var(--text,#1b2431)}
.mfp-read li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%}
.mfp-read li.seed::before{background:#7522bb}.mfp-read li.risk::before{background:#dc2626}
.mfp-read li.opp::before{background:#0369a1}.mfp-read li.conc::before{background:#94a3b8}
.mfp-read li.ok::before{background:#059669}
.mfp-ph{display:flex;flex-direction:column;gap:9px}
.mfp-ph-row{display:grid;grid-template-columns:64px 1fr 46px 84px;align-items:center;gap:10px;font-size:12.5px}
.mfp-ph-n{font-weight:650}
.mfp-ph-track{display:flex;flex-direction:column;gap:3px}
.mfp-ph-track i{display:block;height:6px;border-radius:4px;min-width:2px}
.mfp-ph-track i.wp{background:#047857}.mfp-ph-track i.ly{background:rgba(148,163,184,.45)}
.mfp-ph-v{text-align:right;font-weight:650;font-variant-numeric:tabular-nums}
.mfp-ph-d{text-align:right;font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums}
.mfp-flat{color:var(--faint,#94a3b8)}
@media (max-width:1100px){.mfp-tr-head,.mfp-tr-row{grid-template-columns:120px 1fr 70px 78px 78px 110px;gap:8px}}

.mfp-tr-head .mfp-tr-bar{background:none}

.pulse-rng{font-weight:500;color:var(--faint,#94a3b8);text-transform:none;letter-spacing:0;margin-left:4px}

.mfp-otb-past{color:var(--faint,#94a3b8) !important;opacity:.55}

.recon-systemic{margin:12px 0 0;padding:11px 14px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a;font-size:13px;line-height:1.55}
.recon-systemic b{color:#1e3a8a}
@media (prefers-color-scheme:dark){.recon-systemic{background:#16233a;border-color:#28406b;color:#c7dbff}.recon-systemic b{color:#c7dbff}}

/* ---- Pulse: period toggle + quadrant deep dives ---- */
.hl-pseg{margin-right:8px}
.hl-pseg .seg-btn{padding:5px 12px;font-size:12.5px}
.mfp-card h4{display:flex;align-items:center;gap:8px}
.hl-deep-btn{margin-left:auto;border:1px solid var(--line,#e3e8ef);background:transparent;color:var(--muted,#5b6675);
  font-size:11.5px;font-weight:650;padding:3px 9px;border-radius:6px;cursor:pointer;white-space:nowrap}
.hl-deep-btn:hover{background:var(--panel-2,#eef2f6);color:var(--text,#1b2431);border-color:var(--line-2,#d7dde5)}
.hl-deep-top{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.hl-deep-top h3{margin:0;font-size:17px;font-weight:750;letter-spacing:-.01em}
.hl-deep-read{padding:11px 14px;border-radius:9px;background:var(--panel,#f7f9fc);border:1px solid var(--line,#e3e8ef);
  font-size:13px;line-height:1.55;margin-bottom:12px}
.hl-dtable{width:100%;border-collapse:collapse;font-size:12.5px}
.hl-dtable th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--line,#e3e8ef);color:var(--faint,#94a3b8);
  font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.hl-dtable th.num,.hl-dtable td.num{text-align:right;font-variant-numeric:tabular-nums}
.hl-dtable td{padding:8px 10px;border-bottom:1px solid var(--line,#eef2f6)}
.hl-dtable tbody tr:hover{background:var(--panel,#f7f9fc)}
.hl-dc-n{font-weight:650;white-space:nowrap}
.hl-dc-bar{width:170px}
.hl-dc-tk{display:flex;flex-direction:column;gap:3px}
.hl-dc-tk i{display:block;height:6px;border-radius:4px;min-width:2px}
.hl-dc-tk i.ty{background:#047857}.hl-dc-tk i.ly{background:rgba(148,163,184,.45)}
.hl-dim{color:var(--faint,#94a3b8)}
.hl-tag{font-size:10px;font-weight:700;color:var(--faint,#94a3b8);text-transform:uppercase;letter-spacing:.03em}

.hl-rng{font-weight:500;opacity:.75;letter-spacing:0;margin-left:5px}

/* Later-phase nav groups: visible as roadmap, greyed and not clickable */
.nav-soon .nav-group-label{opacity:.42;cursor:default}
.nav-item-soon{display:flex;align-items:center;gap:8px;opacity:.42;cursor:not-allowed;pointer-events:none;padding:6px 10px;font-size:13px}
.nav-group-flat.nav-soon .nav-item-top{opacity:.42;cursor:not-allowed;pointer-events:none}
.nav-soon{pointer-events:none}

/* ---- Grid stickiness: header row AND the row-label column stay put while scrolling ---- */
/* Opaque backgrounds + a deliberate z-order, so block header rows can't paint over the column
   headers, and the label column doesn't scroll away on wide (1800px+) grids. */
.mfp-grid thead th { position:sticky; top:0; z-index:6; background:var(--panel); box-shadow:0 1px 0 var(--border-strong); }
.mfp-grid .mfp-mcol, .mfp-grid .mfp-rlabel { position:sticky; left:0; z-index:4; background:var(--panel); }
.mfp-grid thead th.mfp-mcol { z-index:7; }
.mfp-grid tbody tr.mfp-mhead > td { position:sticky; left:0; z-index:5; background:var(--panel-2, #eef2f6); }
/* editable rows keep their tint on the frozen label cell */
.mfp-grid tr.mfp-editrow .mfp-rlabel { background:var(--panel); }
.av-table thead th { position:sticky; top:0; z-index:5; background:var(--panel); }
.hl-dtable thead th { position:sticky; top:0; z-index:5; background:var(--panel); }

/* ---- Week drill: read as a group belonging to the expanded month ---- */
/* Neutral tint (the old blue was arbitrary against the brand), a clear left/right boundary so the
   weeks visibly bracket their month, and no italics — italic numbers read as "provisional". */
.mfp-grid th.mfp-wk { background:rgba(4,120,87,.055); }
.mfp-grid td.mfp-wk { background:rgba(4,120,87,.04); font-style:normal; color:var(--muted); }
.mfp-grid .mfp-wp td.mfp-wk { color:var(--text); }
.mfp-grid th.mfp-wk-f, .mfp-grid td.mfp-wk-f { border-left:2px solid rgba(4,120,87,.28); }
.mfp-grid th.mfp-wk-l, .mfp-grid td.mfp-wk-l { border-right:2px solid rgba(4,120,87,.28); }
.mfp-wk-end { font-size:10.5px; font-weight:700; }
.mfp-wk-num { font-size:9px; opacity:.75; }
.mfp-wk-caret:hover { color:#047857; background:rgba(4,120,87,.12); }
/* view-mode hint */
.mfp-viewnote{margin:8px 0 10px;padding:9px 12px;border-radius:8px;background:var(--panel-2,#eef2f6);
  border:1px solid var(--line,#e3e8ef);font-size:12.5px;color:var(--muted,#5b6675)}
.mfp-linkbtn{background:none;border:0;padding:0;color:#1e47c4;font-weight:650;font-size:12.5px;cursor:pointer;text-decoration:underline}

/* ---- Cell audit panel: change history + notes (right-click a plan cell) ---- */
.mfp-cp-scrim{position:fixed;inset:0;background:rgba(15,23,42,.28);z-index:60}
.mfp-cp{position:fixed;top:0;right:0;bottom:0;width:392px;max-width:94vw;background:var(--panel,#fff);
  border-left:1px solid var(--line,#e3e8ef);box-shadow:-8px 0 28px rgba(20,32,54,.14);z-index:61;
  display:flex;flex-direction:column;overflow:auto}
.mfp-cp-top{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line,#e3e8ef)}
.mfp-cp-top h4{margin:0;font-size:15px;font-weight:750}
.mfp-cp-sub{color:var(--muted,#5b6675);font-size:12px;margin-top:2px}
.mfp-cp-x{margin-left:auto;border:0;background:none;font-size:15px;color:var(--muted,#5b6675);cursor:pointer;padding:2px 6px;border-radius:6px}
.mfp-cp-x:hover{background:var(--panel-2,#eef2f6)}
.mfp-cp-sec{padding:14px 18px;border-bottom:1px solid var(--line,#eef2f6)}
.mfp-cp-sec h5{margin:0 0 9px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint,#94a3b8)}
.mfp-cp-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.mfp-cp-list li{display:flex;flex-direction:column;gap:2px;font-size:12.5px}
.mfp-cp-val{font-variant-numeric:tabular-nums}
.mfp-cp-note{white-space:pre-wrap;line-height:1.45}
.mfp-cp-meta{font-size:11px;color:var(--faint,#94a3b8)}
.mfp-cp-empty{color:var(--faint,#94a3b8);font-style:italic}
.mfp-cp-add{display:flex;flex-direction:column;gap:7px;margin-bottom:11px}
.mfp-cp-add textarea{width:100%;border:1px solid var(--line-2,#d7dde5);border-radius:7px;padding:8px 10px;
  font:inherit;font-size:12.5px;resize:vertical}
.mfp-cp-add button{align-self:flex-start}
.mfp-cp-foot{padding:12px 18px;font-size:11.5px;color:var(--faint,#94a3b8)}
/* a cell that already carries history/notes gets a corner tick */
.mfp-has-audit{position:relative}
.mfp-has-audit::after{content:"";position:absolute;top:2px;right:2px;width:0;height:0;
  border-top:6px solid #1e47c4;border-left:6px solid transparent}

/* ---- Why: full-page mode (same content, room to breathe) ---- */
.mfp-wd-full{margin-left:auto;border:1px solid var(--line-2,#d7dde5);background:transparent;color:var(--muted,#5b6675);
  font-size:11.5px;font-weight:650;padding:4px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;margin-right:8px}
.mfp-wd-full:hover{background:var(--panel-2,#eef2f6);color:var(--text,#1b2431)}
.mfp-wd.mfp-wd-page{position:static;width:auto;max-width:none;height:auto;box-shadow:none;border-left:0;
  border:1px solid var(--line,#e3e8ef);border-radius:12px;margin-top:12px;overflow:visible}
.mfp-wd.mfp-wd-page .mfp-wd-head{position:static}
/* two columns of analysis when there's room */
@media (min-width:1200px){
  .mfp-wd.mfp-wd-page .mfp-wd-body{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .mfp-wd.mfp-wd-page .mfp-wd-tiles{grid-template-columns:repeat(4,1fr)}
}

/* OTB comparison rows (LY, Projected/Planned EOM) sit behind the plan rows */
.mfp-grid tr.mfp-dimrow td{color:var(--faint,#94a3b8);font-size:12px}
.mfp-grid tr.mfp-dimrow .mfp-otb-lbl{color:var(--muted,#5b6675);font-weight:600}

/* OTB week drill — month-end-only rows (Planned/Projected EOM, OTB) render a muted dot on the
   intra-month weeks: those are month-end concepts and inventing a weekly value would be fabrication. */
.mfp-grid td.mfp-wk-mute { color:var(--muted); opacity:.42; font-weight:600; }
/* Seed provenance badge — marks a row whose value is derived (LY x factor), not sourced or saved. */
.mfp-seedbadge { display:inline-block; font-size:8.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  padding:1px 5px; border-radius:3px; background:rgba(120,113,108,.14); color:#78716c; vertical-align:middle; margin-left:4px; }

/* Vendor scorecard — real-data states. "not rated" and em-dash cells are deliberate: a vendor with too
   few receipts is shown honestly rather than given a manufactured score. */
.av-na { color:var(--muted); opacity:.6; font-weight:600; font-size:11.5px; }
.av-caveat { margin:10px 0 14px; padding:10px 14px; border-left:3px solid #b45309; background:rgba(180,83,9,.07);
  border-radius:0 6px 6px 0; font-size:12.5px; line-height:1.55; color:var(--text); }
.av-caveat.av-sample { border-left-color:var(--plum,#33143f); background:rgba(51,20,63,.055); color:var(--ink,#241a27); }
.av-unmeas { margin-top:10px; padding:10px 14px; background:rgba(120,113,108,.07); border-radius:6px; font-size:12px; color:var(--muted); }
.av-unmeas strong { color:var(--text); }
.av-unmeas ul { margin:6px 0 0; padding-left:18px; }
.av-unmeas li { margin:2px 0; }
/* Cover target defaults to FV's live actual cover; this note says so until a planner overrides it. */
.mfp-auto-note { font-style:normal; font-size:10.5px; font-weight:700; color:#047857; background:rgba(4,120,87,.10);
  padding:1px 6px; border-radius:3px; margin-left:6px; }

/* ---- Guide panel: the sections a training audience actually asks for ------------------------------
   A guide that only lists what a screen contains is useless when someone asks "where did this number
   come from?". These carry the formula, the provenance and the gotchas. */
.help-panel { width: min(560px, 96vw); }
.help-sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.help-sec h4 { margin: 0 0 10px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.help-sec .help-terms dt:first-of-type { margin-top: 0; }
.help-formulas dd code { display: inline-block; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px; background: rgba(4,120,87,.07); color: #047857; border: 1px solid rgba(4,120,87,.16);
  border-radius: 5px; padding: 2px 7px; margin-top: 2px; }
.help-formulas .help-note { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.help-src-list, .help-watch ul { margin: 0; padding-left: 17px; }
.help-src-list li, .help-watch li { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0 0 7px; }
.help-src-list li strong, .help-watch li strong { color: var(--text); }
.help-src-list code, .help-foot code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
  background: rgba(120,113,108,.12); border-radius: 4px; padding: 1px 4px; }
.help-watch { border-top-color: rgba(180,83,9,.3); }
.help-watch h4 { color: #b45309; }
.help-watch li::marker { color: #b45309; }
.help-foot em { font-style: normal; font-weight: 700; color: var(--text); }

/* Plan save state — a planner has to be able to see that what they typed is actually kept. */
.plan-save { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 9px;
  border-radius:20px; letter-spacing:.01em; margin-right:2px; }
.plan-save:empty { display:none; }
.plan-save.ok { color:#047857; background:rgba(4,120,87,.10); }
.plan-save.ok::before { content:''; width:6px; height:6px; border-radius:50%; background:#047857; }
.plan-save.saving { color:#1e47c4; background:rgba(30,71,196,.10); }
.plan-save.dirty { color:#b45309; background:rgba(180,83,9,.12); }
.plan-save.err { color:#b91c1c; background:rgba(185,28,28,.12); }

/* Plan version control — flip the whole planning surface between Working Plan and a sandbox.
   A sandbox is visually distinct on purpose: the numbers look identical, so the ONLY thing telling a
   planner they are not editing the real plan is this control. */
.plan-ver { display:inline-flex; align-items:center; gap:6px; padding:3px 4px 3px 10px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface); margin-right:6px; }
.plan-ver-lbl { font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.plan-ver-sel { border:0; background:transparent; font-family:inherit; font-size:12.5px; font-weight:700;
  color:var(--text); cursor:pointer; outline:none; max-width:200px; }
.plan-ver-act { border:1px solid transparent; background:transparent; color:var(--muted); font-family:inherit;
  font-size:11.5px; font-weight:600; padding:3px 7px; border-radius:5px; cursor:pointer; }
.plan-ver-act:hover { background:rgba(4,120,87,.10); color:#047857; }
.plan-ver-act.danger:hover { background:rgba(185,28,28,.10); color:#b91c1c; }
.plan-ver.sandbox { border-color:rgba(180,83,9,.45); background:rgba(180,83,9,.07); }
.plan-ver.sandbox .plan-ver-lbl { color:#b45309; }
.plan-ver.sandbox .plan-ver-sel { color:#b45309; }

/* The line that tells a client this screen is not late — it is not built. Set apart from the purpose
   line above it, because the two say different things and reading them as one paragraph makes the
   screen look broken rather than unfinished. */
.afa-scaffold-note {
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid var(--rule, rgba(0,0,0,.09));
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  max-width:70ch;
}

/* ============================================================================
   SUPPLY PLAN Row B — screen-header contract. Pickers (bms multi-selects, the
   model-tree button) ride INSIDE a .scope-select pill; the pill is the control,
   so the inner widget goes borderless. Chips sit inline at the row's end.
   ========================================================================= */
.wd-filter-row .sp-pill .bms-btn,
.wd-filter-row .sp-pill .secondary-btn {
  border: 0 !important; background: transparent !important; box-shadow: none;
  min-width: 0; min-height: 30px; padding: 0 2px; font-size: 12.5px; font-weight: 600;
}
.wd-filter-row .sp-pill input { border: 0; background: transparent; font-size: 12.5px; font-weight: 600; width: 110px; }
.wd-filter-row .sp-pill .bms { display: inline-flex; align-items: center; }

/* Quiet nav cross-links in Row A: present, not shouting beside the primary controls. */
.page-head .actions .nav-xlink {
  border-color: transparent; background: transparent; box-shadow: none;
  color: var(--muted, #5b6673); font-weight: 600;
}
.page-head .actions .nav-xlink:hover { color: var(--text, #1c2733); background: rgba(0,0,0,.045); }

/* ============================================================================
   CANONICAL BRAND LOCKUP — .cp-lockup. THE one definition (Fix: the lockup had
   competing implementations in base topbar CSS, login CSS, and an editorial-core
   !important stack, and drifted on every touch). Structure does the alignment:
   grid = [rabbit] | [wordmark / subtitle], so the subtitle is flush under the
   wordmark's C by construction — never by a measured padding-left.
   Emitted by applyTenant() for editorial tenants (topbar + login).
   ========================================================================= */
.cp-lockup {
  display: inline-grid; grid-template-columns: auto auto; column-gap: 9px; row-gap: 0;
  align-items: center; justify-content: start;
}
.cp-lockup .cp-lockup-mark {
  grid-column: 1; grid-row: 1 / span 2; width: 28px; height: 28px; transform: translateY(-4.4px);
  object-fit: contain; display: block; opacity: 1; border: 0; border-radius: 0; background: none; filter: none;
}
.cp-lockup .cp-lockup-wm {
  grid-column: 2; grid-row: 1; display: flex; align-items: baseline; white-space: nowrap;
  position: relative; top: 4.5px;
  font-family: "Newsreader", Georgia, "Times New Roman", serif;   /* CANON = marketing site (cadenceplan.com) */
  font-size: 19px; font-weight: 720; letter-spacing: -0.018em; line-height: 1.15; color: #17141d;
}
.cp-lockup .cp-wm-1 { color: #17141d; }
.cp-lockup .cp-wm-2 { margin-left: 3.5px; color: #17141d; }   /* single-colour: no two-tone */
.cp-lockup .cp-lockup-sub {
  grid-column: 2; grid-row: 2; margin-top: 1px; white-space: nowrap;
  font-size: 10px; font-weight: 600; line-height: 1.2; letter-spacing: .01em;
  color: var(--cp-muted, #756d68);
}
.cp-lockup .cp-lockup-sub:empty { display: none; }
/* The legacy .sidebar-brand strong rules (font-size 17-21px, letter-spacing 0) outrank the canon
   at (0,3-4,1) and were breaking every tenant that didn't get the golden-only injector — Tree Top
   worst of all. Restate the wordmark canon at (0,4,2) so it wins for ALL layouts/chromes, one mark. */
body .sidebar-brand strong.cp-lockup-wm,
body[data-layout="topbar"] .sidebar-brand strong.cp-lockup-wm,
body[data-chrome="inverted"] .sidebar-brand strong.cp-lockup-wm,
body[data-layout="topbar"][data-chrome="inverted"] .sidebar-brand strong.cp-lockup-wm {
  font-size: 19px; font-weight: 720; letter-spacing: -0.018em; line-height: 1.15; color: #17141d;
}

/* ---- Dark/forest top bars: reverse the canonical lockup -------------------------------------
   The rules above restate the canon for ALL layout/chrome combos, including non-inverted ones,
   so #17141d ink landed on the dark green/forest bars of every topbar tenant that is NOT
   chrome="inverted" (auburn, dhi, fv, ml, oliverbonas, purehockey, acp, sof...). Same lockup,
   reversed for the surface: cream wordmark + 66% subtitle, matching the brand contract's
   dark-surface rule. The mark itself swaps to the mono-cream rabbit in applyTenant().
   Specificity (0,4,2) beats the (0,3,2) topbar rule above regardless of order. */
body[data-layout="topbar"]:not([data-chrome="inverted"]) .sidebar-brand strong.cp-lockup-wm,
body[data-layout="topbar"]:not([data-chrome="inverted"]) .sidebar-brand .cp-lockup .cp-wm-1,
body[data-layout="topbar"]:not([data-chrome="inverted"]) .sidebar-brand .cp-lockup .cp-wm-2 {
  color: #f2f1ea;
}
body[data-layout="topbar"]:not([data-chrome="inverted"]) .sidebar-brand .cp-lockup .cp-lockup-sub {
  color: rgba(242, 241, 234, 0.66);
}

/* Supply Plan critic pass (2026-08-14): make the narrow-width wrap read DESIGNED.
   When the filter row breaks, the Show chips take the right edge of their line
   instead of trailing an orphaned pill; nav cross-links get a hairline group
   separator from the primary controls; KPI values share one baseline. */
.wd-filter-row.sp-filters .dmx-chips { margin-left: auto; }
.page-head .actions .nav-xlink + .seg { margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--border, #d9d4c9); }
.sp-strip .scope-totals { align-items: end; }
.sp-strip .stat { display: grid; align-content: end; justify-items: end; }

/* ===== Admin · Data refresh panel (hosted materializer tenants) ===============================
   Editorial-premium settings surface. Reference lineage: Height (warm hairlines, tinted shadow,
   pastel status), Linear/Geist (border-as-elevation, weight ceiling 600, mono machine-data),
   Stripe (rationed status colour). One accent — the Cadence plum — reserved for on/focus/links;
   a single near-black primary; everything else warm neutral. */
/* Admin/Users design tokens live on :root so body-appended overlays (invite modal, toast) inherit them too. */
:root {
  --adm-accent: var(--cp-tenant-accent, #361a4c);
  --adm-accent-soft: color-mix(in srgb, var(--adm-accent) 12%, #fff);
  --adm-accent-ink: color-mix(in srgb, var(--adm-accent) 78%, #2b2130);
  --adm-ink:#1c1813; --adm-ink-2:#6b6254; --adm-ink-3:#968b79;
  --adm-card:#fffdfa; --adm-border:#e7e0d3; --adm-border-strong:#d7cebc; --adm-hair:#efe9dd;
  --adm-fill-2:#f6f2ea; --adm-fill-3:#faf7f1;
  --adm-shadow:0 1px 2px rgba(38,30,18,.05); --adm-radius:13px;
  --adm-mono: ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,monospace;
}
.adm-fill { min-height:calc(100vh - 132px); }
/* One centered content column so header, cards and table share a width (right edges line up) and the
   page stays balanced on wide monitors — there's no sidebar to justify a flush-left anchor. */
.adm-wrap { max-width:860px; margin-inline:auto; }
.adm-mono { font-family:var(--adm-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.adm-head { margin-bottom:26px; }
.adm-head-title { font-family:"Instrument Serif",Georgia,serif; font-size:29px; font-weight:400; color:var(--adm-ink); letter-spacing:-.005em; line-height:1.05; }
.adm-head-sub { font-size:13.5px; color:var(--adm-ink-2); margin-top:5px; line-height:1.5; max-width:60ch; }
.adm-sec { font-size:11px; font-weight:600; color:var(--adm-ink-3); text-transform:uppercase; letter-spacing:.09em; margin:0 0 13px; }
.adm-sec-gap { margin-top:48px; }
.adm-sec-desc { font-size:12.5px; color:var(--adm-ink-3); margin:-7px 0 14px; line-height:1.5; }
.adm-dr { display:flex; flex-direction:column; gap:14px; }
/* Card language: warm hairline does the elevation, tinted whisper-shadow lifts it a hair off the ground. */
.adm-dr-hero, .adm-dr-sched, .adm-dr-alerts, .adm-runs-card, .adm-runs-empty, .adm-dr-err {
  background:var(--adm-card); border:1px solid var(--adm-border); border-radius:var(--adm-radius); box-shadow:var(--adm-shadow);
}
.adm-dr-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 26px; }
.adm-dr-eyebrow { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.adm-dr-src { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; color:var(--adm-ink-3); }
.adm-dr-asof { font-family:"Instrument Serif",Georgia,serif; font-size:28px; font-weight:400; color:var(--adm-ink); letter-spacing:0; line-height:1.08; }
.adm-dr-meta { font-size:12.5px; color:var(--adm-ink-2); margin-top:7px; }
.adm-dr-meta .adm-mono { color:var(--adm-ink); }
/* Status: pastel tint + saturated dot + same-hue ink. Muted, never a loud fill. */
.adm-dr-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 9px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.01em; }
.adm-dr-chip-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.adm-dr-chip-fresh { color:#3f6b4e; background:#e9f2ea; }
.adm-dr-chip-aging { color:#8a6320; background:#f8f0df; }
.adm-dr-chip-missing { color:#7c7264; background:#f2ede4; }   /* "no data / never" is a not-yet state, stay neutral */
.adm-dr-chip-stale { color:#b4531b; background:#f9ece0; }     /* data went >48h stale — the nightly has stopped, flag it */
.adm-dr-chip-failed { color:#b42318; background:#fbeceb; }    /* a genuine run failure — red is reserved for exactly this */
.adm-dr-chip-running { color:var(--adm-accent-ink); background:var(--adm-accent-soft); }
.adm-dr-chip-running .adm-dr-chip-dot { animation:admPulse 1.4s ease-in-out infinite; }
@keyframes admPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* Run-history table — same card, uppercase taupe header, ~48px rows, mono machine-data, hover. */
.adm-runs-card { overflow:hidden; }
.adm-runs-table { width:100%; border-collapse:collapse; font-size:13px; }
.adm-runs-table thead th { text-align:left; padding:12px 16px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--adm-ink-3); border-bottom:1px solid var(--adm-hair); background:var(--adm-fill-3); white-space:nowrap; }
.adm-runs-table th.num, .adm-runs-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.adm-runs-table th:first-child, .adm-runs-table td:first-child { padding-left:18px; }
.adm-runs-table th:last-child, .adm-runs-table td:last-child { padding-right:18px; }
.adm-runs-row { cursor:pointer; transition:background .12s ease; }
.adm-runs-row:hover { background:var(--adm-fill-3); }
.adm-runs-row td { padding:0 16px; height:52px; color:var(--adm-ink-2); border-top:1px solid var(--adm-hair); }
.adm-runs-row:first-child td { border-top:none; }
.adm-runs-row td.adm-mono { color:var(--adm-ink-2); font-size:12.5px; }
.adm-runs-name { font-weight:600; color:var(--adm-ink); width:1%; white-space:nowrap; }
.adm-runs-env { font-family:var(--adm-mono); font-size:11px; color:var(--adm-ink-2); background:var(--adm-fill-2); border-radius:5px; padding:2px 7px; }
.adm-runs-caret { display:inline-block; margin-right:6px; color:var(--adm-ink-2); font-size:11px; transition:transform .14s ease; }
.adm-runs-fail { color:#b42318; font-weight:600; }
.adm-runs-detail td { padding:0 18px 14px; background:var(--adm-fill-3); height:auto; }
.adm-runs-detail-body { padding:12px 4px; font-size:12px; color:var(--adm-ink-2); }
.adm-runs-empty { padding:34px 20px; font-size:13px; color:var(--adm-ink-2); text-align:center; }
/* Run drill-down: per-dataset jobs — same warm/mono/muted language as the parent table. */
.adm-jobs-table { width:100%; border-collapse:collapse; font-size:12px; }
.adm-jobs-table thead th { text-align:left; padding:6px 10px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--adm-ink-3); white-space:nowrap; }
.adm-jobs-table th.num, .adm-jobs-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.adm-jobs-table tbody tr { border-top:1px solid var(--adm-hair); }
.adm-jobs-table td { padding:7px 10px; color:var(--adm-ink-2); vertical-align:middle; }
.adm-jobs-stage { color:var(--adm-ink-3); }
.adm-jobs-name { color:var(--adm-ink); font-weight:600; }
.adm-jobs-num { font-family:var(--adm-mono); color:var(--adm-ink-2); }
.adm-jobs-err { color:#b42318; }
.adm-jobs-note { font-size:12px; color:var(--adm-ink-3); padding:4px 2px; }
/* One near-black primary — the single brightest action on the page. */
.adm-dr-run { display:inline-flex; align-items:center; gap:8px; padding:11px 19px; border:none; border-radius:9px; background:var(--adm-ink); color:#fff; font:inherit; font-size:13.5px; font-weight:500; cursor:pointer; white-space:nowrap; transition:background .15s ease; flex:none; }
.adm-dr-run:hover { background:#000; }
.adm-dr-run:focus-visible { outline:none; box-shadow:0 0 0 2px var(--adm-card), 0 0 0 4px var(--adm-accent); }
.adm-dr-run:disabled { background:#b8afa0; cursor:default; }
.adm-dr-run-i { font-size:15px; line-height:1; }
.adm-dr-spin { width:13px; height:13px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:admDrSpin .7s linear infinite; }
@keyframes admDrSpin { to { transform:rotate(360deg); } }
.adm-dr-sched, .adm-dr-alerts { padding:20px 24px; }
/* Label+description left, control on the right rail — the Notion/Linear settings row. */
.adm-dr-sched-top { display:flex; align-items:flex-start; justify-content:space-between; gap:28px; }
.adm-dr-sched-title { font-size:15px; font-weight:600; color:var(--adm-ink); letter-spacing:-.005em; }
.adm-dr-sched-desc { font-size:12.5px; color:var(--adm-ink-2); margin-top:4px; max-width:52ch; line-height:1.5; }
.adm-dr-switch { position:relative; display:inline-block; width:42px; height:24px; flex:none; cursor:pointer; }
.adm-dr-switch input { position:absolute; opacity:0; width:0; height:0; }
.adm-dr-switch-track { position:absolute; inset:0; background:var(--adm-border-strong); border-radius:999px; transition:background .18s ease; }
.adm-dr-switch-track::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 2px rgba(38,30,18,.28); transition:transform .18s ease; }
.adm-dr-switch input:checked + .adm-dr-switch-track { background:color-mix(in srgb, var(--adm-accent) 84%, #fff); }
.adm-dr-switch input:checked + .adm-dr-switch-track::after { transform:translateX(18px); }
.adm-dr-switch input:focus-visible + .adm-dr-switch-track { box-shadow:0 0 0 2px var(--adm-card), 0 0 0 4px var(--adm-accent); }
.adm-dr-time { display:flex; align-items:center; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid var(--adm-hair); font-size:13px; color:var(--adm-ink-2); flex-wrap:wrap; transition:opacity .15s ease; }
.adm-dr-time.is-off { opacity:.4; pointer-events:none; }
.adm-dr-time-lbl { color:var(--adm-ink-2); }
.adm-dr-num { width:50px; padding:8px 8px; border:1px solid var(--adm-border-strong); border-radius:8px; font-family:var(--adm-mono); font-size:14px; text-align:center; font-variant-numeric:tabular-nums; color:var(--adm-ink); background:#fff; }
.adm-dr-num:focus { outline:none; border-color:var(--adm-accent); box-shadow:0 0 0 3px var(--adm-accent-soft); }
.adm-dr-colon { color:var(--adm-ink-3); font-weight:600; }
.adm-dr-utc { font-family:var(--adm-mono); font-size:10.5px; font-weight:600; color:var(--adm-ink-3); letter-spacing:.03em; background:var(--adm-fill-2); border-radius:5px; padding:2px 6px; }
.adm-dr-local { font-size:12px; color:var(--adm-ink-3); }
/* Schedule body: Repeat (daily/weekly) + day chips + time, stacked as label/control fields. */
.adm-dr-schedbody { margin-top:18px; padding-top:18px; border-top:1px solid var(--adm-hair); display:flex; flex-direction:column; gap:15px; transition:opacity .15s ease; }
.adm-dr-schedbody.is-off { opacity:.4; pointer-events:none; }
.adm-dr-field { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:13px; color:var(--adm-ink-2); }
.adm-dr-field-lbl { color:var(--adm-ink-2); width:52px; flex:none; }
.adm-dr-seg { display:inline-flex; border:1px solid var(--adm-border-strong); border-radius:9px; overflow:hidden; background:#fff; }
.adm-dr-seg button { padding:7px 17px; border:none; background:transparent; font:inherit; font-size:12.5px; font-weight:600; color:var(--adm-ink-2); cursor:pointer; transition:background .12s ease, color .12s ease; }
.adm-dr-seg button + button { border-left:1px solid var(--adm-border-strong); }
.adm-dr-seg button.on { background:var(--adm-ink); color:#fff; }
.adm-dr-days { display:inline-flex; gap:6px; flex-wrap:wrap; }
.adm-dr-day { min-width:38px; height:34px; padding:0 4px; border:1px solid var(--adm-border-strong); border-radius:8px; background:#fff; font:inherit; font-size:12px; font-weight:600; color:var(--adm-ink-2); cursor:pointer; transition:background .12s ease, border-color .12s ease, color .12s ease; }
.adm-dr-day:hover { border-color:var(--adm-ink-3); }
.adm-dr-day.on { background:var(--adm-accent); border-color:var(--adm-accent); color:#fff; }
.adm-dr-day:focus-visible { outline:none; box-shadow:0 0 0 2px var(--adm-card), 0 0 0 4px var(--adm-accent); }
/* Secondary commit action — legible but quieter than the primary. */
.adm-dr-save { margin-left:auto; padding:8px 15px; border:1px solid var(--adm-border-strong); border-radius:8px; background:var(--adm-fill-2); color:var(--adm-ink); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:background .12s ease, border-color .12s ease; }
.adm-dr-save:hover { background:#efe9df; border-color:var(--adm-ink-3); }
.adm-dr-save:focus-visible { outline:none; box-shadow:0 0 0 2px var(--adm-card), 0 0 0 4px var(--adm-accent); }
.adm-dr-schmsg { font-size:12px; color:var(--adm-accent-ink); font-weight:600; }
.adm-dr-err { padding:16px 18px; color:#9a5a12; font-size:13px; }
.adm-dr-alerts-row { display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:18px; border-top:1px solid var(--adm-hair); flex-wrap:wrap; }
.adm-dr-emails { flex:1 1 280px; min-width:220px; padding:9px 12px; border:1px solid var(--adm-border-strong); border-radius:8px; font:inherit; font-size:13px; color:var(--adm-ink); background:#fff; }
.adm-dr-emails::placeholder { color:var(--adm-ink-3); }
.adm-dr-emails:focus { outline:none; border-color:var(--adm-accent); box-shadow:0 0 0 3px var(--adm-accent-soft); }
.adm-dr-onfail { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--adm-ink-2); white-space:nowrap; cursor:pointer; }
.adm-dr-onfail input { margin:0; accent-color:var(--adm-accent); }
.adm-dr-preview { margin-top:16px; font-size:12.5px; color:var(--adm-ink-3); }
.adm-dr-preview a { color:var(--adm-accent); font-weight:600; text-decoration:none; }
.adm-dr-preview a:hover { text-decoration:underline; }
/* ===== Users (members + roles) — same warm/editorial language as the admin ===================== */
.usr-tabs { display:flex; gap:26px; margin:0 0 22px; border-bottom:1px solid var(--adm-border); }
.usr-tab { background:none; border:none; font:inherit; font-size:13px; font-weight:500; color:var(--adm-ink-2); padding:0 1px 12px; cursor:pointer; position:relative; top:1px; }
.usr-tab.on { color:var(--adm-ink); border-bottom:2px solid var(--adm-accent); font-weight:600; }
.usr-cardhead { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; border-bottom:1px solid var(--adm-hair); }
.usr-count { font-size:13px; color:var(--adm-ink-2); } .usr-count b { color:var(--adm-ink); font-weight:600; }
.usr-table td { height:60px; }
.usr-member { display:flex; align-items:center; gap:12px; }
.usr-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:600; flex:none; }
.usr-avatar.ring { background:transparent; border:1.5px dashed var(--adm-border-strong); color:var(--adm-ink-3); }
.usr-name { color:var(--adm-ink); font-weight:600; line-height:1.25; }
.usr-pending-name { color:var(--adm-ink-3); font-weight:500; }
.usr-you { font-size:10.5px; font-weight:600; color:var(--adm-accent-ink); background:var(--adm-accent-soft); border-radius:5px; padding:1px 6px; margin-left:4px; vertical-align:1px; }
.usr-email { color:var(--adm-ink-3); font-size:12px; line-height:1.3; }
.usr-role { appearance:none; -webkit-appearance:none; border:1px solid var(--adm-border-strong); border-radius:8px; background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23968b79' stroke-width='1.4'/></svg>") no-repeat right 10px center; padding:7px 28px 7px 12px; font:inherit; font-size:12.5px; font-weight:500; color:var(--adm-ink); cursor:pointer; }
.usr-role:focus { outline:none; border-color:var(--adm-accent); box-shadow:0 0 0 3px var(--adm-accent-soft); }
.usr-last { color:var(--adm-ink-2); }
.usr-row.dim td { opacity:.72; } .usr-row.off .usr-name { color:var(--adm-ink-3); }
.usr-actions { position:relative; text-align:right; }
.usr-kebab { border:none; background:transparent; color:var(--adm-ink-3); font-size:18px; line-height:1; cursor:pointer; padding:4px 8px; border-radius:7px; }
.usr-kebab:hover { background:var(--adm-fill-2); color:var(--adm-ink); }
.usr-menu { display:none; position:absolute; right:14px; top:44px; z-index:30; min-width:168px; background:var(--adm-card); border:1px solid var(--adm-border); border-radius:10px; box-shadow:0 8px 24px rgba(38,30,18,.13); padding:5px; }
.usr-menu.open { display:block; }
.usr-menu button { display:block; width:100%; text-align:left; background:none; border:none; font:inherit; font-size:12.5px; color:var(--adm-ink); padding:8px 10px; border-radius:7px; cursor:pointer; }
.usr-menu button:hover { background:var(--adm-fill-2); }
.usr-menu button.danger { color:#b42318; }
.usr-legend { margin-top:14px; font-size:12px; color:var(--adm-ink-3); line-height:1.5; } .usr-legend b { color:var(--adm-ink-2); }
.usr-roles { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.usr-role-card { background:var(--adm-card); border:1px solid var(--adm-border); border-radius:var(--adm-radius); box-shadow:var(--adm-shadow); padding:18px 20px; }
.usr-role-name { font-size:15px; font-weight:600; color:var(--adm-ink); margin-bottom:6px; }
.usr-role-desc { font-size:12.5px; color:var(--adm-ink-2); line-height:1.55; }
/* Invite modal */
.usr-modal-wrap { position:fixed; inset:0; z-index:60; background:rgba(38,30,18,.32); display:flex; align-items:center; justify-content:center; padding:20px; }
.usr-modal { background:var(--adm-card); border:1px solid var(--adm-border); border-radius:16px; box-shadow:0 24px 60px rgba(38,30,18,.28); padding:24px 26px; width:min(480px,100%); }
.usr-modal-h { font-family:"Instrument Serif",Georgia,serif; font-size:23px; color:var(--adm-ink); }
.usr-modal-sub { font-size:12.5px; color:var(--adm-ink-2); line-height:1.5; margin:6px 0 18px; }
.usr-field-lbl { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--adm-ink-3); margin-bottom:7px; }
.usr-inv-emails { width:100%; border:1px solid var(--adm-border-strong); border-radius:9px; padding:10px 12px; font:inherit; font-size:13px; color:var(--adm-ink); resize:vertical; }
.usr-inv-emails:focus { outline:none; border-color:var(--adm-accent); box-shadow:0 0 0 3px var(--adm-accent-soft); }
.usr-inv-row { display:flex; align-items:center; gap:12px; margin-top:16px; }
.usr-inv-msg { min-height:16px; font-size:12px; margin-top:10px; color:var(--adm-ink-3); } .usr-inv-msg.err { color:#b42318; }
.usr-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
.usr-toast { position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--adm-ink); color:#fff; font-size:13px; font-weight:500; padding:11px 18px; border-radius:10px; box-shadow:0 8px 24px rgba(38,30,18,.28); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:80; }
.usr-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Multi-select filter — the checkbox popover behind `type: 'multi'` in gtFilBar.
   A planner filtering a plan almost never wants exactly one plant or exactly one
   component type, and every one of these controls used to be single-choice. Options
   can carry a group, which renders as a heading that selects the whole group. */
.wip-multi { position: relative; }
.wip-mbtn {
  font: inherit; font-size: 12px; padding: 5px 9px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface, #fff); color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 230px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wip-mbtn:hover { border-color: var(--accent); }
.wip-mbtn.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.wip-mcar { color: var(--faint); font-size: 10px; }
.wip-mpop {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 60; min-width: 232px;
  max-width: 330px; background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: 9px; box-shadow: 0 12px 30px rgba(22, 22, 22, 0.14); overflow: hidden;
}
.wip-mhead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 11px; border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--faint);
}
.wip-mlist { max-height: 292px; overflow: auto; padding: 4px 0; }
.wip-mgrp {
  padding: 7px 11px 3px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--faint);
}
.wip-mgrp .link-btn { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.wip-mopt {
  display: flex; align-items: center; gap: 9px; padding: 6px 11px;
  font-size: 12.5px; color: var(--text); cursor: pointer;
}
.wip-mopt:hover { background: rgba(22, 22, 22, 0.04); }
.wip-mopt input { margin: 0; }

/* ---------- Layered demand plan ----------
   Rows are the layers of the forecast, so the row header carries as much meaning as the
   numbers: what the layer is, where it came from, and — where a planner can change it — the
   reason that travels with the edit. See docs/design/decisions/2026-08-25-layered-demand-grid.md */
.dp-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }

.dp-guard {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding: 12px 16px; margin: 0 0 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; background: var(--surface, #fff);
}
.dp-guard-warn { border-left-color: #9a5b08; }
.dp-guard-hot { border-left-color: #c81e1e; }
.dp-guard-l { display: flex; flex-direction: column; gap: 3px; min-width: 320px; flex: 1; }
.dp-guard-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--faint);
}
.dp-guard-l strong { font-size: 14.5px; }
.dp-guard-note { font-size: 12.5px; color: var(--muted); line-height: 1.45; max-width: 62ch; }
.dp-guard-r { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dp-gcount { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.dp-gcount b { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }

.dp-tbl td, .dp-tbl th { white-space: nowrap; }
.dp-rowhead { min-width: 210px; white-space: normal; }
.dp-label { font-weight: 600; }
.dp-hint { display: block; font-size: 11px; color: var(--faint); margin-top: 1px; }
.dp-reason {
  display: block; margin-top: 5px; font: inherit; font-size: 11px;
  padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px;
  background: transparent; color: var(--muted); max-width: 196px;
}

/* A closed month is history: shown, never edited. */
.dp-locked { color: var(--muted); }
/* Derived rows are read-outs of the rows above them, so they sit back. */
.dp-derived td { color: var(--muted); }
/* The three layers a planner owns. */
.dp-edit td.dp-cell { padding: 3px 4px; }
.dp-in {
  width: 100%; min-width: 62px; font: inherit; font-size: 12px; text-align: right;
  padding: 5px 6px; border: 1px solid transparent; border-radius: 5px;
  background: rgba(31, 94, 67, 0.05); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.dp-in:hover { border-color: var(--border); }
.dp-in:focus { outline: none; border-color: var(--accent); background: var(--surface, #fff); }
.dp-cell-locked { color: var(--faint); }
/* The number the plan carries. */
.dp-final td { font-weight: 700; background: rgba(22, 22, 22, 0.035); }
.dp-final td.dp-rowhead { font-weight: 700; }
.dp-lastedit { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.dp-promos { margin-top: 16px; }

/* ---------- Trade Promo Management ----------
   Laid out like the shipped TPM form: the event id anchors the row, its own fields are the
   columns, and unallocated member slots sit blank at the bottom rather than being hidden. */
.tpm-id { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tpm-sub { font-size: 11px; color: var(--faint); margin-top: 1px; }
.tpm-muted { color: var(--faint); }
.tpm-blank td { height: 30px; }
.tpm-blank .tpm-id { color: var(--faint); }
.tpm-status {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.tpm-committed { color: #14532e; background: rgba(20, 83, 46, 0.11); }
.tpm-planned { color: #46566b; background: rgba(70, 86, 107, 0.12); }
.tpm-closed { color: var(--faint); background: rgba(22, 22, 22, 0.06); }
.tpm-tbl td { vertical-align: top; }

/* ---------- Planning item master ----------
   Their master data and what the planning system holds, side by side, with the gaps named. */
/* A real grid, not a flex row of content-width pills. Nine facets sized to their own labels
   gave a ragged two-line row where MAKE / BUY carried dead space and CATEGORY carried none.
   Label sits ABOVE its value rather than beside it - the same shape as the KPI stats, and it
   removes the horizontal contest that was truncating "DEMAND CLASS" mid-word.
   Scoped to this screen: .scope-select is house furniture every tenant uses, and the editorial
   skin styles it at body[data-skin] specificity from a stylesheet that loads after this one,
   so these overrides are deliberately doubled rather than accidentally weaker. */

/* The multi-select button is the value, so it fills the pill and loses its own chrome. */

.im-sub { font-size: 10.5px; color: var(--faint); margin-top: 1px; }
.im-gap { color: var(--faint); }
.im-ok { color: #14532e; font-weight: 700; }
.im-gapct {
  display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #9a5b08; background: rgba(154, 91, 8, 0.13); cursor: help;
}
.im-in {
  font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid transparent;
  border-radius: 5px; background: transparent; color: var(--text); max-width: 110px;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
/* The affordance appears on the row, not on every cell at rest. */
tr:hover .im-in { background: rgba(31, 94, 67, 0.07); }
tr:hover .im-in:hover { border-color: var(--border); }
.im-in:focus { outline: none; border-color: var(--accent); background: var(--surface, #fff); }
.im-abc { max-width: 58px; }
.im-same { color: var(--faint); }
.im-diff { color: #9a5b08; font-weight: 700; }
.im-st, .im-life {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
}
.im-st-active { color: #14532e; background: rgba(20, 83, 46, 0.11); }
.im-st-phaseout { color: #9a5b08; background: rgba(154, 91, 8, 0.13); }
.im-st-onhold { color: #c81e1e; background: rgba(200, 30, 30, 0.11); }
.im-st-prelaunch { color: #46566b; background: rgba(70, 86, 107, 0.12); }
.im-life-steady { color: var(--faint); background: rgba(22, 22, 22, 0.06); }
.im-life-phasein { color: #46566b; background: rgba(70, 86, 107, 0.12); }
.im-life-reviewforphaseout { color: #9a5b08; background: rgba(154, 91, 8, 0.13); }
.im-life-phasingout { color: #c81e1e; background: rgba(200, 30, 30, 0.11); }

.im-ready {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; padding: 12px 16px; margin: 0 0 12px;
  border: 1px solid var(--border); border-left: 3px solid #9a5b08;
  border-radius: 8px; background: var(--surface, #fff);
}
.im-ready-l { display: flex; flex-direction: column; gap: 3px; min-width: 340px; flex: 1; }
.im-ready-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.im-ready-l strong { font-size: 14.5px; }
.im-ready-note { font-size: 12.5px; color: var(--muted); line-height: 1.45; max-width: 64ch; }
.im-ready-r { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
/* Same component as the KPI stats in the band above, so the two read as one system. */
.im-miss { display: flex; flex-direction: column; align-items: flex-end; }
.im-miss b { line-height: 1.15; }
.im-miss > span { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; white-space: nowrap; }
.im-miss b { font-size: 17px; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }
.im-tbl td { vertical-align: top; }

/* The filter bar's "showing N of M" tail is pushed right with margin-left:auto. Without a
   wrap and a zero min-width it can sit a few pixels past the viewport, and a 4px overhang
   scrolls the whole page sideways — which reads as a broken layout, not a rounding error. */
.wip-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; max-width: 100%; }
.wip-filters > .wip-filter { min-width: 0; }
.wip-filters > .wip-filter:last-child { flex-shrink: 1; }

/* ---- Column sort and filter affordance. Applied by cadence-grid.js to every grid that does not
   opt out, so the look has to survive every skin and every existing thead in the app. It sits
   INSIDE the header cell's own padding rather than adding to it: a caret that changes a column's
   width on hover moves the whole grid sideways when you reach for it. ---- */
table.cad-enh th.cad-enh-th {
  cursor: pointer; position: relative; user-select: none;
  padding-right: 20px; white-space: nowrap;
}
table.cad-enh th.cad-enh-th:hover { color: var(--ink, #171717); }
/* The caret is the sort state. Reserved space at rest, so nothing shifts when it appears. */
table.cad-enh th.cad-enh-th::after {
  content: ''; position: absolute; right: 9px; top: 50%; margin-top: -2px;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  opacity: 0; transition: opacity .12s;
}
table.cad-enh th.cad-enh-th[data-dir="asc"]::after { border-bottom: 4px solid currentColor; opacity: .85; }
table.cad-enh th.cad-enh-th[data-dir="desc"]::after { border-top: 4px solid currentColor; opacity: .85; }
table.cad-enh th.cad-enh-th:hover:not(.cad-sorted)::after { border-bottom: 4px solid currentColor; opacity: .3; }
table.cad-enh th.cad-sorted { color: var(--accent, #1f5e43); }

/* The funnel is a second target in the same cell, so it only appears when the pointer is in the
   header. An always-visible control on every column reads as chrome, not as a tool. */
table.cad-enh th.cad-enh-th > button.cad-enh-f {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 16px; padding: 0; line-height: 14px;
  border: 0; background: none; border-radius: 3px;
  font-size: 9px; color: inherit; opacity: 0; cursor: pointer;
  transition: opacity .12s, background .12s;
}
table.cad-enh thead tr:hover th.cad-enh-th > button.cad-enh-f { opacity: .45; }
table.cad-enh th.cad-enh-th > button.cad-enh-f:hover { opacity: 1; background: rgba(0, 0, 0, .09); }
/* A column that IS filtered has to say so whether or not anyone is hovering it. */
table.cad-enh th.cad-filtered > button.cad-enh-f { opacity: 1; color: var(--accent, #1f5e43); }
table.cad-enh th.cad-filtered::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent, #1f5e43);
}
/* Where a header cell is sticky, the caret and funnel have to ride above the cells it covers. */
table.cad-enh th.cad-enh-th { z-index: 2; }

/* One line above the grid saying how much of it you are looking at, and the way back. Only ever
   present while a column filter is on - a permanent row count is noise. */
.cad-enh-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; font-size: 12px; color: var(--muted, #6b6b6b);
}
.cad-enh-bar strong { color: var(--ink, #171717); font-weight: 650; }
.cad-enh-bar .cad-enh-clear {
  border: 1px solid var(--border-strong, #d6d3cd); background: none; cursor: pointer;
  border-radius: 999px; padding: 2px 10px; font: inherit; font-size: 11px;
  color: var(--accent, #1f5e43);
}
.cad-enh-bar .cad-enh-clear:hover { background: rgba(31, 94, 67, .08); }

/* ============================================================================
   Item Master (2026-08-26): the grid is the hero. Compact meta strip (dense
   stats, not tiles), one slim readiness line, and a sticky-header scroller that
   cadGridFit sizes to fill the viewport. Prev/Next and the footer blurb retired.
   ============================================================================ */
.im-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 2px 0 8px; }
.im-meta-l { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.im-count { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.im-lens { display: inline-flex; align-items: center; gap: 6px; }
.im-lens-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--faint); }
.im-meta-r { display: flex; align-items: baseline; gap: 20px; }
.im-mv { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.im-mv > span { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--faint); }
.im-mv b { font-size: 14px; font-weight: 700; color: var(--text); }
.im-readyline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.im-readyline strong { color: var(--text); font-variant-numeric: tabular-nums; }
.im-dot { width: 7px; height: 7px; border-radius: 50%; background: #c98a1a; flex: 0 0 auto; }
.im-readymiss { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.im-rm { color: var(--muted); font-variant-numeric: tabular-nums; }
.im-rm b { color: var(--text); }
/* Sticky funnel/sort header for the one-grid scroller. */
.im-tbl thead th { position: sticky; top: 0; z-index: 3; }

/* Sales Orders line-detail drawer (2026-08-26): SO line + the WOs/POs covering the item. */
.wdso-scrim { position: fixed; inset: 0; background: rgba(20, 22, 20, .28); z-index: 400; }
.wdso-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 700px; max-width: 96vw; background: var(--panel, #fff); border-left: 1px solid var(--border-strong, #d6d3cd); box-shadow: -18px 0 44px rgba(20, 20, 20, .16); z-index: 401; overflow: auto; padding: 18px 22px 28px; }
.wdso-trend { background: var(--panel, #fff); border: 1px solid var(--border, #e6e3dc); border-radius: 8px; padding: 8px 10px 4px; }
.wdso-legend { display: flex; gap: 16px; font-size: 11px; color: var(--muted); padding: 4px 2px 2px; }
.wdso-legend i { display: inline-block; width: 14px; height: 0; border-top: 2px solid #2D6A4F; vertical-align: middle; margin-right: 5px; }
.wdso-legend .lg-fc { border-top-style: dashed; border-top-color: #46566b; }
/* Item deep-dive: demand-by-customer bars (reads the open SO book) */
.wdd-mix { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; align-items: center; gap: 10px; padding: 3px 0; font-size: 12.5px; }
.wdd-mix-l { color: var(--text2, #3d3a34); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdd-mix-bar { height: 8px; background: var(--track, #eee9df); border-radius: 5px; overflow: hidden; }
.wdd-mix-bar i { display: block; height: 100%; background: #2D6A4F; border-radius: 5px; }
.wdd-mix b { font-variant-numeric: tabular-nums; color: var(--text, #23201d); font-weight: 600; }
.wdso-dh { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wdso-drow { margin: 8px 0 4px; font-size: 12.5px; color: var(--muted); }
.wdso-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin: 10px 0 4px; }
.wdso-stat { display: flex; flex-direction: column; gap: 1px; }
.wdso-stat label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--faint); }
.wdso-stat b { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--text); }
.wdso-sech { margin: 18px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--text2, #4f5d6d); border-bottom: 1px solid var(--border, #e6e3dc); padding-bottom: 5px; }
.wdso-gate { margin: 12px 0 4px; padding: 9px 12px; border-radius: 8px; background: #fbe9e3; border: 1px solid #f0cfc4; font-size: 12.5px; color: #7a2a12; }
.wdso-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.wdso-tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); font-weight: 700; padding: 4px 8px; border-bottom: 1px solid var(--border, #e6e3dc); }
.wdso-tbl th.num, .wdso-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.wdso-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--border, #eee); color: var(--text); }
.wdso-kind { display: inline-block; min-width: 26px; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; background: var(--accent-soft, #e2efe9); color: var(--accent, #1f5e43); }

/* Sales Orders Summary (quadrant dashboard). */
.wdso-summary { margin-top: 4px; }
.wdso-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.wdso-kpi { flex: 1 1 150px; background: var(--panel, #fff); border: 1px solid var(--border, #e6e3dc); border-radius: 10px; padding: 12px 14px; }
.wdso-kpi-v { font-size: 24px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.wdso-kpi-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 700; margin-top: 3px; }
.wdso-kpi-s { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.wdso-quads { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wdso-qcard { background: var(--panel, #fff); border: 1px solid var(--border, #e6e3dc); border-radius: 10px; padding: 14px 16px; }
.wdso-qh { font-size: 12.5px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.wdso-bars { display: flex; flex-direction: column; gap: 9px; }
.wdso-barrow { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.wdso-barlbl { color: var(--text2, #4f5d6d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wdso-bartrack { height: 12px; background: var(--label, #f0ece3); border-radius: 6px; overflow: hidden; }
.wdso-barfill { display: block; height: 100%; border-radius: 6px; }
.wdso-barval { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; white-space: nowrap; }
.wdso-exp { display: flex; gap: 26px; margin-bottom: 12px; }
.wdso-exp-v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wdso-exp-l { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 700; }
.wdso-gatelist { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border, #eee); padding-top: 10px; }
.wdso-gaterow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; font-size: 12.5px; }

/* ===== Consensus Forecast (S&OP layered build) ===== */
.cons-legend { display:flex; flex-wrap:wrap; gap:14px; padding:8px 4px 2px; }
.cons-lg { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted,#6b675f); }
.cons-lg i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.cons-lg i.cons-ring { background:none; border:2px solid; border-radius:50%; width:11px; height:11px; }
.cons-grid-wrap { overflow-x:auto; }
.cons-grid { border-collapse:separate; border-spacing:0; width:100%; font-size:12.5px; font-variant-numeric:tabular-nums; }
.cons-grid th, .cons-grid td { padding:7px 10px; border-bottom:1px solid #eee9df; white-space:nowrap; text-align:right; }
/* Two-tone by design: a dark rail of layer names + header, light data cells. Forced past the app's
   global th theming so the labels stay readable. */
/* Light, airy grid so the composition chart stays the hero — a quiet supporting detail table. */
.cons-grid thead th { position:sticky; top:0; background:#f6f3ec !important; color:#9a9184 !important; text-transform:uppercase; letter-spacing:.05em; font-size:10px; font-weight:700; z-index:1; border-bottom:1px solid #e6e0d4; }
.cons-grid thead th.cons-lyr-col { text-align:left; z-index:2; }
.cons-grid .cons-lyr-col { text-align:left; min-width:232px; position:sticky; left:0; background:#fbfaf6 !important; z-index:1; display:flex; align-items:center; gap:9px; border-bottom:1px solid #eee9df; }
.cons-grid .cons-lyr-col span { font-weight:600; color:#3d3a34 !important; }
.cons-grid .cons-lyr-col em { font-style:normal; color:#a89f93 !important; font-size:10.5px; margin-left:auto; }
.cons-grid tbody td { background:#fffdf8; color:#3d3a34; }
.cons-grid .cons-yr { background:#f6f3ec; font-weight:600; }
.cons-sw { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }
.cons-sw-ring { background:none; border:2px solid #b7b0a4; border-radius:50%; }
.cons-grid tr.cons-total-row td { background:#eef3ec !important; color:#17301f !important; border-top:1.5px solid #3B7A5E; border-bottom:1.5px solid #3B7A5E; font-weight:700; }
.cons-grid tr.cons-total-row .cons-lyr-col { background:#e6efe6 !important; border-top:1.5px solid #3B7A5E; border-bottom:1.5px solid #3B7A5E; }
.cons-grid tr.cons-total-row .cons-lyr-col span { color:#17301f !important; font-weight:800; }
.cons-grid tr.cons-peer-row td { background:#faf8f2; color:#8a847a; }
.cons-grid tr.cons-peer-row .cons-lyr-col { background:#f4f1ea !important; }
.cons-grid tr.cons-peer-row .cons-lyr-col span { color:#8a847a !important; font-weight:600; }
.cons-grid tr.cons-divider td { height:8px; padding:0; border:0; background:transparent !important; }

/* Undo/redo toolbar buttons (shared) */
.cad-hist { display:inline-flex; gap:3px; margin-right:5px; }
.cad-hist-btn { min-width:30px; padding:5px 8px !important; font-size:15px !important; line-height:1 !important; }
.cad-hist-btn:disabled { opacity:.38; cursor:default; }

/* ===== Model scenario composer (Forecast Adjustments) ===== */
.rwm-scen { background:#fffdf8; border:1px solid #e3ddd0; border-radius:11px; padding:16px 18px; margin:12px 0 14px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.rwm-scen-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.rwm-scen-kick { font-family:"Newsreader",Georgia,serif; font-size:19px; font-weight:600; color:#17301f; }
.rwm-scen-sub { font-size:12px; color:#8a847a; margin-top:2px; max-width:640px; }
.rwm-scen-x { border:0; background:transparent; font-size:20px; line-height:1; color:#a39d92; cursor:pointer; }
.rwm-scen-in { display:flex; gap:8px; margin-top:12px; }
.rwm-scen-in input { flex:1; padding:9px 12px; border:1px solid #d7dde5; border-radius:8px; font:inherit; font-size:13px; color:#17202b; background:#fff; }
.rwm-scen-in input:focus { outline:none; border-color:#2D6A4F; box-shadow:0 0 0 2px rgba(45,106,79,.14); }
.rwm-scen-err { font-size:12px; color:#b3362a; margin-top:8px; }
.rwm-scen-chips { margin-top:12px; }
.rwm-scen-chip { display:inline-block; background:#eef3ec; color:#17301f; border:1px solid #cfe0d3; border-radius:999px; padding:4px 12px; font-size:12px; font-weight:600; }
.rwm-scen-impact { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; max-width:560px; }
.rwm-scen-tile { background:#f6f3ec; border-radius:9px; padding:9px 12px; }
.rwm-scen-tile label { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:#8a847a; font-weight:700; }
.rwm-scen-tile b { font-size:19px; font-variant-numeric:tabular-nums; color:#23201d; }
.rwm-scen-read { margin-top:12px; font-size:12.5px; line-height:1.5; color:#3d3a34; background:#f2efe7; border-radius:9px; padding:11px 13px; max-width:720px; }
.rwm-scen-read-k { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color:#2D6A4F; margin-bottom:4px; }
.rwm-scen-foot { display:flex; align-items:center; gap:10px; margin-top:14px; }
.rwm-scen-note { font-size:11.5px; color:#a39d92; }
.rwm-scen-applied { background:#eef3ec; border:1px solid #cfe0d3; border-radius:9px; padding:9px 13px; margin:0 0 12px; font-size:12.5px; color:#17301f; }

/* Closed (actualised) months on Forecast Adjustments — not editable */
.rwm-adj-grid td.rwm-adj-closed { background:#f4f2ed !important; color:#b3ac9f; }
.rwm-adj-grid .rwm-adj-lock { color:#c3bdb0; }
.rwm-adj-grid th.rwm-adj-closed-h { color:#9a9184 !important; }
.rwm-adj-lockmark { color:#b8b0a3; font-size:9px; vertical-align:middle; }

/* Forecast Adjustments — total-at-top block + two adjustment lines */
.rwm-adj-grid tr.rwm-adj-tot-row td, .rwm-adj-grid tr.rwm-adj-tot-row th { background:#f3f1ea; }
.rwm-adj-grid .rwm-adj-totcol { vertical-align:top; }
.rwm-adj-grid .rwm-adj-totcol strong { font-size:13px; color:#17301f; letter-spacing:.02em; }
.rwm-adj-grid .rwm-adj-totcol span { display:block; font-size:11px; color:#8a847a; margin-top:2px; }
.rwm-adj-grid tr.rwm-adj-consensus-row td, .rwm-adj-grid tr.rwm-adj-consensus-row th { background:#eef3ec !important; border-top:2px solid #2D6A4F; border-bottom:2px solid #2D6A4F; font-weight:700; color:#17301f; }
.rwm-adj-grid tr.rwm-adj-td-row .rwm-adj-account { color:#4C6272; }
.rwm-adj-input-td { background:#f1eefb !important; }

/* Bill of Materials */
.ttbom-list, .ttbom-tree { border-collapse:separate; border-spacing:0; width:100%; font-size:12.5px; font-variant-numeric:tabular-nums; }
.ttbom-list th, .ttbom-tree th { position:sticky; top:0; background:#faf8f3; color:#8a847a; text-transform:uppercase; letter-spacing:.05em; font-size:10px; font-weight:700; text-align:left; padding:8px 12px; border-bottom:1px solid #e4dfd4; }
.ttbom-list th.num, .ttbom-tree th.num { text-align:right; }
.ttbom-list td, .ttbom-tree td { padding:8px 12px; border-bottom:1px solid #eee9df; }
.ttbom-list tbody tr:hover { background:#faf8f2; }
.ttbom-dot { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:7px; vertical-align:middle; }
.ttbom-tree .ttbom-l0 > td:first-child { font-weight:600; }
.ttbom-tree .ttbom-l1 { background:#fcfbf7; }
.ttbom-tree .ttbom-l2 { background:#faf8f2; }
.ttbom-tree .ttbom-l3 { background:#f7f4ec; }
.ttbom-cat { display:grid; grid-template-columns:minmax(150px,26%) 1fr auto; align-items:center; gap:12px; padding:4px 0; font-size:12.5px; }
.ttbom-cat-l { display:inline-flex; align-items:center; gap:7px; color:var(--text2,#3d3a34); }
.ttbom-cat-l i { width:11px; height:11px; border-radius:3px; }
.ttbom-cat-bar { height:9px; background:#eee9df; border-radius:5px; overflow:hidden; }
.ttbom-cat-bar b { display:block; height:100%; border-radius:5px; }
.ttbom-cat-v { font-weight:600; color:#23201d; }

/* Cost Scenario */
.cso-grid { display:grid; grid-template-columns:320px 1fr; gap:14px; margin-bottom:14px; align-items:start; }
@media(max-width:1100px){ .cso-grid { grid-template-columns:1fr; } }
.cso-levers { position:sticky; top:12px; }
.cso-lever { margin:10px 0 14px; }
.cso-lever-h { display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; font-weight:600; color:#2c2a26; }
.cso-lever-h b { font-size:15px; color:#2D6A4F; }
.cso-lever input[type=range] { width:100%; margin:6px 0 2px; accent-color:#2D6A4F; }
.cso-lever-hint { font-size:11px; color:#a39d92; }
.cso-catgroup { margin-bottom:10px; }
.cso-catgroup-h { display:flex; align-items:center; gap:7px; font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:#8a847a; margin:12px 0 6px; }
.cso-catgroup-h i { width:10px; height:10px; border-radius:3px; }
.cso-comp { display:grid; grid-template-columns:minmax(220px,34%) 1fr auto; align-items:center; gap:16px; padding:7px 0; border-bottom:1px solid #f0ece3; }
.cso-comp-l { display:flex; align-items:center; gap:9px; }
.cso-comp-l strong { font-size:12.5px; color:#2c2a26; display:block; }
.cso-comp-l span { font-size:11px; color:#a39d92; }
.cso-comp-slider { width:100%; accent-color:#B26E63; }
.cso-comp-r { text-align:right; min-width:96px; }
.cso-comp-r b { display:block; font-size:13px; font-variant-numeric:tabular-nums; }
.cso-comp-r span { font-size:11px; color:#a39d92; }

/* ====================================================================================================
   Demand Composition grid overrides — MUST be last. These win over the shared .afa-grid rules (defined
   earlier) by source order; !important is used where the base rule ties on specificity. Reference-screen
   pieces we carry to the other forms: frozen row-label + Horizon columns, a real total row, matched header.
   ==================================================================================================== */
.fdg-card-h.dc-grid-h { text-transform: none !important; color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; }
/* Freeze the row-label column (left) and the Horizon total column (right). A soft shadow shows the week
   columns scrolling under them; backgrounds match header / body / total-row so nothing bleeds through. */
.dc-grid .dcfz-l, .dc-grid .dcfz-r { position: sticky !important; z-index: 2; background: var(--cp-surface, #fffdf8); }
.dc-grid .dcfz-l { left: 0; box-shadow: 7px 0 9px -8px rgba(20,20,20,.30); }
.dc-grid .dcfz-r { right: 0; box-shadow: -7px 0 9px -8px rgba(20,20,20,.30); text-align: right; }
.dc-grid thead .dcfz-l, .dc-grid thead .dcfz-r { z-index: 4; background: #302437; }
/* Plum table header (Auburn-neutral shell, but plum is the authority colour) — override editorial-core's
   #2f2536 on the week header cells too so the whole header row is one plum. */
body[data-skin="editorial"] .table-wrap .dc-grid thead th { background: #302437; }
.dc-grid .afa-sub .dcfz-l, .dc-grid .afa-sub .dcfz-r { background: #f9f3e8; }
/* Consensus total row reads as a total: dark ink, bold, a rule above (not the muted grey it was). */
.dc-grid .afa-sub td, .dc-grid .afa-sub td:first-child { color: var(--cp-ink, #211d22) !important; font-weight: 700 !important; border-top: 1.5px solid var(--border-strong) !important; border-bottom: 0 !important; }
.dc-grid, .dc-grid th, .dc-grid td { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* THE actual "week header goes black on hover" bug: cadence-grid.js enhances every grid (adds
   .cad-enh + sortable .cad-enh-th headers), and its hover rule darkens the header text to var(--ink,
   #171717). That's right on cad-enh's default LIGHT header, but the editorial skin paints the header
   dark (--mfp-head #2f2536), so hover turned the text black-on-dark. Brighten on hover instead so the
   affordance reads and the text stays legible. Fixes it on every editorial dark-header grid, not just
   this one. */
body[data-skin="editorial"] .table-wrap th.cad-enh-th:hover,
body[data-skin="editorial"] .ph-tbl th.cad-enh-th:hover { color: #fff; }
/* Keep the row-hover highlight consistent across the frozen columns too (editorial-core hovers the data
   cells; make the frozen cells follow so there's no seam on hover). */
.dc-grid tbody tr:hover .dcfz-l, .dc-grid tbody tr:hover .dcfz-r { background: var(--mfp-label, #f3ecdd); }
/* Cool-neutral data scaffolding (Codex flagship): the demand grid zebra moves off editorial-core's warm
   cream (#f9f3e8) toward a cool near-white gray-taupe, and the rules lighten to match. Data reads as
   neutral scaffolding, distinct from the warm workspace band above. */
.dc-grid tbody tr:nth-child(even) td { background: #F8F8F5 !important; }
.dc-grid tbody tr:nth-child(even) .dcfz-l, .dc-grid tbody tr:nth-child(even) .dcfz-r { background: #F8F8F5 !important; }
.dc-grid td, .dc-grid th.num { border-color: #ECE7DD !important; }