/*
 * TRP Pulse — Stage 1 visual-token override
 * Design source: https://github.com/angelperalez-arch/trp-pulse-next
 * Loaded after the legacy inline styles so this layer is fully reversible.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=IBM+Plex+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --color-bg: #f3f0e8;
  --color-surface: #fffcf6;
  --color-elevated: #ece8de;
  --color-fg: #2c2a26;
  --color-muted: #6a655c;
  --color-subtle: #8f8a80;
  --color-accent: #3d5348;
  --color-accent-fg: #f7f4ee;
  --color-border: color-mix(in oklab, #2c2a26 10%, transparent);
  --color-border-strong: color-mix(in oklab, #2c2a26 16%, transparent);
  --color-up: #4a7a64;
  --color-down: #9a6e66;
  --color-warn: #9a7d4e;
  --color-ring: #3d5348;
  --color-paper: #f3f0e8;
  --color-ink: #2c2a26;
  --color-ink-muted: #6a655c;
  --color-rule: color-mix(in oklab, #2c2a26 12%, transparent);
  --color-paper-mark: color-mix(in oklab, #9a7d4e 14%, #f3f0e8);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-border: 0 1px 2px color-mix(in oklab, #2c2a26 5%, transparent), 0 0 0 1px color-mix(in oklab, #2c2a26 8%, transparent);
  --shadow-border-hover: 0 2px 8px color-mix(in oklab, #2c2a26 8%, transparent), 0 0 0 1px color-mix(in oklab, #2c2a26 14%, transparent);

  /* Legacy dashboard aliases: point existing component tokens at the paper system. */
  --trp-bg: var(--color-bg);
  --trp-bg-muted: var(--color-elevated);
  --trp-surface: var(--color-surface);
  --trp-surface-hover: var(--color-elevated);
  --trp-text: var(--color-ink);
  --trp-text-primary: var(--color-ink);
  --trp-text-secondary: var(--color-muted);
  --trp-text-muted: var(--color-subtle);
  --trp-border: var(--color-border);
  --trp-border-strong: var(--color-border-strong);
  --trp-navy: var(--color-ink);
  --trp-blue: var(--color-accent);
  --trp-blue-hover: var(--color-accent);
  --trp-brand-600: var(--color-accent);
  --trp-info-fg: var(--color-accent);
}

/* Global paper shell, including the legacy dark-mode switches. */
html,
html[data-theme="dark"],
html body,
html body.dark-mode {
  color-scheme: light;
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
}

html body,
html body button,
html body input,
html body select,
html body textarea {
  font-family: var(--font-sans) !important;
}

html body :is(h1, h2, h3, .section-title, .page-title, .card-title, .panel-title) {
  font-family: var(--font-display) !important;
  color: var(--color-ink) !important;
}

html body :is(code, pre, kbd, samp, .mono, .numeric, .number, .metric-value, .kpi-value, .kpi-number, .currency, .amount, [class*="-amt"], [class*="-num"], [class*="-value"]) {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* Shared shell and surface treatment. These selectors intentionally out-rank legacy inline style blocks. */
html body :is(header, main, footer, aside, nav, .sidebar, .app-sidebar, .side-nav, .main-content, .content, .page, .page-content, .dashboard, .app-shell, .shell, .layout, [id^="page-"]) {
  border-color: var(--color-border);
}

html body :is(.card, .panel, .modal, .dialog, .popover, .dropdown, .menu, .table-card, .chart-card, .kpi-card, .section, .surface, .widget, .drawer, .toast, #headerKebabMenu) {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-ink);
  box-shadow: var(--shadow-border);
}

html body :is(header, .sidebar, .app-sidebar, .side-nav, nav, .topbar, .header, .header-actions, .sub-tab-bar, .cs-subtab-bar, .ar-subtabs, .tabs, .tab-bar) {
  background-color: var(--color-elevated) !important;
  border-color: var(--color-border) !important;
  color: var(--color-ink) !important;
}

/* Dynamic inline styles and common dark utility treatment. */
html body :is(
  [style*="background:#0D2340" i], [style*="background: #0D2340" i],
  [style*="background:#0f172a" i], [style*="background: #0f172a" i],
  [style*="background:#111827" i], [style*="background: #111827" i],
  [style*="background:#1e293b" i], [style*="background: #1e293b" i],
  [style*="background:rgb(13,35,64)" i], [style*="background: rgb(13, 35, 64)" i],
  [style*="background:rgb(15,23,42)" i], [style*="background: rgb(15, 23, 42)" i],
  [style*="background:rgb(17,24,39)" i], [style*="background: rgb(17, 24, 39)" i],
  [style*="background:rgb(30,41,59)" i], [style*="background: rgb(30, 41, 59)" i]
) {
  background-color: var(--color-surface) !important;
  background-image: none !important;
}

html body :is(
  [style*="color:#0D2340" i], [style*="color: #0D2340" i],
  [style*="color:#0f172a" i], [style*="color: #0f172a" i],
  [style*="color:#111827" i], [style*="color: #111827" i],
  [style*="color:#1e293b" i], [style*="color: #1e293b" i],
  [style*="color:rgb(13,35,64)" i], [style*="color: rgb(13, 35, 64)" i],
  [style*="color:rgb(15,23,42)" i], [style*="color: rgb(15, 23, 42)" i],
  [style*="color:rgb(17,24,39)" i], [style*="color: rgb(17, 24, 39)" i],
  [style*="color:rgb(30,41,59)" i], [style*="color: rgb(30, 41, 59)" i]
) { color: var(--color-ink) !important; }

html body :is(
  [style*="border:#0D2340" i], [style*="border: #0D2340" i],
  [style*="border:#0f172a" i], [style*="border: #0f172a" i],
  [style*="border:#111827" i], [style*="border: #111827" i],
  [style*="border:#1e293b" i], [style*="border: #1e293b" i],
  [style*="border-color:#0D2340" i], [style*="border-color:#0f172a" i],
  [style*="border-color:#111827" i], [style*="border-color:#1e293b" i]
) { border-color: var(--color-border) !important; }

/* Accent, status, and focus preserve information hierarchy in the paper palette. */
html body :is(.btn-primary, .primary, .active, .is-active, .selected, [aria-selected="true"], [aria-current="page"]) {
  border-color: var(--color-accent);
}

html body :is(.btn-primary, .primary, .active, .is-active, .selected, [aria-selected="true"], [aria-current="page"]) :is(svg, path) { stroke: currentColor; }

html body :is(.positive, .success, .up, .gain, [data-status="success"], [data-direction="up"]) { color: var(--color-up) !important; }
html body :is(.negative, .danger, .down, .loss, [data-status="danger"], [data-direction="down"]) { color: var(--color-down) !important; }
html body :is(.warning, .warn, [data-status="warning"]) { color: var(--color-warn) !important; }

html body :focus-visible {
  outline: 2px solid var(--color-ring) !important;
  outline-offset: 2px;
}

html body :is(.btn-primary, .primary-action, .header-login-btn, .header-investor-btn, #navSignInBtn, #trpFpSubmit) {
  background-color: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
}

html body :is(
  [style*="background:#2563eb" i], [style*="background: #2563eb" i],
  [style*="background:#3b82f6" i], [style*="background: #3b82f6" i],
  [style*="background:#1d4ed8" i], [style*="background: #1d4ed8" i],
  [style*="background:rgb(37,99,235)" i], [style*="background: rgb(37, 99, 235)" i],
  [style*="background:rgb(59,130,246)" i], [style*="background: rgb(59, 130, 246)" i],
  [style*="background:rgb(29,78,216)" i], [style*="background: rgb(29, 78, 216)" i]
) { background-color: var(--color-accent) !important; }
html body :is(
  [style*="color:#2563eb" i], [style*="color: #2563eb" i],
  [style*="color:#3b82f6" i], [style*="color: #3b82f6" i],
  [style*="color:#1d4ed8" i], [style*="color: #1d4ed8" i],
  [style*="color:rgb(37,99,235)" i], [style*="color: rgb(37, 99, 235)" i],
  [style*="color:rgb(59,130,246)" i], [style*="color: rgb(59, 130, 246)" i],
  [style*="color:rgb(29,78,216)" i], [style*="color: rgb(29, 78, 216)" i]
) { color: var(--color-accent) !important; }

/*
 * Stage 2 — app chrome
 * The dashboard's navigation and page frames are generated and rearranged by
 * existing inline scripts. Keep those hooks intact and layer the Pulse Next
 * shell solely through stable chrome selectors.
 */

/* Top bar (mobile / sidebar-disabled presentation). */
html body > #appRoot > header {
  position: sticky !important;
  top: 0;
  z-index: 300;
  min-height: 56px;
  padding: 8px 18px !important;
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-rule) !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
}

html body > #appRoot > header .header-title {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.035em !important;
}

html body > #appRoot > header .tab-btn {
  min-height: 36px;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--color-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  transition: background-color 150ms ease, color 150ms ease;
}

html body > #appRoot > header .tab-btn:hover {
  background: var(--color-elevated) !important;
  color: var(--color-ink) !important;
}

html body > #appRoot > header .tab-btn.active {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  box-shadow: none !important;
}

html body > #appRoot > header .tab-group {
  padding: 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-elevated) !important;
}

html body > #appRoot > header .tab-group-label {
  color: var(--color-subtle) !important;
  font-family: var(--font-sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
}

html body > #appRoot > header :is(.header-action-btn, .header-icon-btn, #globalRefreshBtn, #glossaryToggle) {
  min-height: 34px;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  box-shadow: var(--shadow-border) !important;
  font-family: var(--font-sans) !important;
}

html body > #appRoot > header :is(.header-action-btn, .header-icon-btn, #globalRefreshBtn, #glossaryToggle):hover {
  background: var(--color-elevated) !important;
  box-shadow: var(--shadow-border-hover) !important;
}

html body > #appRoot > header :is(.header-investor-btn, #uploadBtn, .header-login-btn) {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  box-shadow: none !important;
}

/* Desktop left rail: a quiet linen column with one clear sage current state. */
@media (min-width: 901px) {
  html.trp-sb body {
    margin-left: 244px !important;
    background: var(--color-bg) !important;
    transition: margin-left 250ms ease;
  }

  html.trp-sb.trp-sb-min body {
    margin-left: 72px !important;
  }

  html.trp-sb body > #appRoot > header {
    position: fixed !important;
    inset: 0 auto 0 0;
    width: 244px;
    min-height: 0;
    padding: 14px 12px 16px !important;
    background: var(--color-bg) !important;
    border: 0 !important;
    border-right: 1px solid var(--color-rule) !important;
    box-shadow: none !important;
  }

  html.trp-sb.trp-sb-min body > #appRoot > header {
    width: 72px;
    padding: 14px 8px 16px !important;
  }

  html.trp-sb body > #appRoot > header .header-left-group {
    min-height: 24px;
  }

  html.trp-sb body > #appRoot > header .header-title {
    margin: 0 28px 12px 4px;
    padding: 0 0 13px !important;
    border-bottom: 1px solid var(--color-rule) !important;
    color: var(--color-ink) !important;
    font-size: 20px !important;
    line-height: 1.1 !important;
  }

  html.trp-sb body > #appRoot > header #dashboardTabs {
    gap: 4px !important;
  }

  html.trp-sb body > #appRoot > header #dashboardTabs .tab-btn {
    display: block;
    width: 100%;
    min-height: 34px;
    padding: 8px 10px !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-muted) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: left;
    text-transform: none;
  }

  html.trp-sb body > #appRoot > header #dashboardTabs .tab-btn:hover {
    background: var(--color-elevated) !important;
    color: var(--color-ink) !important;
  }

  html.trp-sb body > #appRoot > header #dashboardTabs .tab-btn.active {
    background: var(--color-accent) !important;
    color: var(--color-accent-fg) !important;
    font-weight: 600 !important;
  }

  html.trp-sb body > #appRoot > header #dashboardTabs .tab-group {
    gap: 3px;
    padding: 6px 0 4px !important;
    margin: 6px 0 2px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  html.trp-sb body > #appRoot > header #dashboardTabs .tab-group-label {
    display: block !important;
    padding: 6px 10px 4px !important;
    color: var(--color-subtle) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
  }

  html.trp-sb body > #appRoot > header #dashboardTabs .tab-btn::before {
    color: currentColor;
  }

  html.trp-sb body > #appRoot > header .header-actions {
    padding: 14px 0 0 !important;
    border-top: 1px solid var(--color-rule) !important;
  }

  html.trp-sb body > #appRoot > header #trpSbCtl {
    top: 16px;
    right: 10px;
    transform: none;
  }

  html.trp-sb body > #appRoot > header #trpSbCtl button {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--color-elevated);
    color: var(--color-muted);
  }

  html.trp-sb body > #appRoot > header #trpSbCtl button:hover {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  html.trp-sb.trp-sb-min body > #appRoot > header #dashboardTabs .tab-btn {
    padding: 10px 0 !important;
  }

  html.trp-sb.trp-sb-min body > #appRoot > header #dashboardTabs .tab-group-label {
    border-top-color: var(--color-rule) !important;
  }

  html.trp-sb.trp-sb-hidden body {
    margin-left: 40px !important;
  }

  html.trp-sb #trpSbShow {
    background: var(--color-elevated) !important;
    color: var(--color-muted) !important;
    border: 1px solid var(--color-rule) !important;
    border-left: 0 !important;
    box-shadow: var(--shadow-border) !important;
  }

  html.trp-sb #trpSbShow:hover {
    background: var(--color-surface) !important;
    color: var(--color-ink) !important;
  }
}

/* Page title blocks carry the reference’s editorial title / lede / rule rhythm. */
html body .trp-page-h1 {
  margin: 20px 0 18px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--color-rule) !important;
}

html body .trp-page-h1 h1 {
  margin: 0 !important;
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 2.3vw, 32px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
}

html body .trp-page-h1 .sub {
  max-width: 760px;
  margin-top: 7px !important;
  color: var(--color-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

html body :is(#page-reports .container > div:first-child, #page-admin-ops-settings .container > div:first-child) > :is(h1, h2),
html body .bdsc-title {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

html body .bdsc-subtitle {
  margin-top: 6px !important;
  color: var(--color-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

html body #page-reports .container > div:first-child,
html body #page-admin-ops-settings .container > div:first-child,
html body .bdsc-header {
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--color-rule);
}

/* Segmented period, basis, and view switches. */
html body :is(#ovViewTabs, .filter-bar, .source-toggle-group, .phs-source-toggle, .bdsc-chipset, .ar-subtabs, .cs-subtab-bar, .sub-tab-bar) {
  gap: 3px !important;
  padding: 4px !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-elevated) !important;
  box-shadow: var(--shadow-border) !important;
}

html body :is(#ovViewTabs, .filter-bar) {
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 14px 16px 0 !important;
}

html body :is(.filter-btn, .source-btn, .ov-view-btn, .bdsc-chip, .ar-subtab-btn, .cs-subtab-btn, .sub-tab-btn) {
  min-height: 34px;
  padding: 7px 12px !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: transparent !important;
  color: var(--color-muted) !important;
  box-shadow: none !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body :is(.filter-btn, .source-btn, .ov-view-btn, .bdsc-chip, .ar-subtab-btn, .cs-subtab-btn, .sub-tab-btn):hover {
  background: color-mix(in oklab, var(--color-surface) 80%, transparent) !important;
  color: var(--color-ink) !important;
}

html body :is(.filter-btn.active, .source-btn.active, .ov-view-btn.active, .bdsc-chip.active, .ar-subtab-btn.active, .cs-subtab-btn.active, .sub-tab-btn.active) {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  box-shadow: var(--shadow-border) !important;
}

html body :is(.header-action-btn, .refresh-btn, .export-btn, .bdsc-btn):not(.header-investor-btn):not(.header-login-btn):not(.bdsc-btn-primary) {
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  box-shadow: var(--shadow-border) !important;
}

html body :is(.btn-primary, .primary-action, .bdsc-btn-primary) {
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  html body > #appRoot > header {
    min-height: 52px;
    padding: 6px 12px !important;
  }

  html body > #appRoot > header .header-left-group {
    min-width: auto;
  }

  html body > #appRoot > header .header-title {
    font-size: 16px !important;
  }

  html body > #appRoot > header .tab-buttons {
    gap: 2px !important;
  }

  html body > #appRoot > header .tab-btn {
    min-height: 34px;
    padding: 7px 9px !important;
    font-size: 11px !important;
  }

  html body .trp-page-h1 {
    margin: 16px 0 !important;
    padding-bottom: 12px !important;
  }

  html body .trp-page-h1 h1,
  html body :is(#page-reports .container > div:first-child, #page-admin-ops-settings .container > div:first-child) > :is(h1, h2),
  html body .bdsc-title {
    font-size: 28px !important;
  }
}

/* --------------------------------------------------------------------------
 * Stage 3 — KPI cards, report surfaces, tables, charts, and waterfalls
 * CSS only: Chart.js canvas pixels retain their data-owned palette until a
 * later JavaScript chart-config pass; the surrounding chart scaffolding here
 * deliberately establishes the Pulse Next paper hierarchy.
 * -------------------------------------------------------------------------- */

/* KPI cards: quiet paper surfaces, editorial values, and compact delta pills. */
html body :is(.kpi-card, .ov-kpi-tile, .ar-kpi, .ops-fc-tile, .ox-kpi, .trp-kpi-card, .inv-pres-kpi, .bdsc-kpi) {
  background: var(--color-surface) !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-border) !important;
  color: var(--color-ink) !important;
}

html body :is(.kpi-card, .ov-kpi-tile, .ar-kpi, .ops-fc-tile, .ox-kpi, .trp-kpi-card, .inv-pres-kpi, .bdsc-kpi):hover {
  box-shadow: var(--shadow-border-hover) !important;
  transform: translateY(-1px);
}

html body :is(.kpi-card, .ov-kpi-tile, .ar-kpi, .ops-fc-tile, .ox-kpi, .trp-kpi-card, .inv-pres-kpi) {
  padding: 20px 22px !important;
}

html body :is(.kpi-card, .ov-kpi-tile)::before {
  display: none !important;
}

html body :is(.kpi-label, .ov-kpi-label, .ar-kpi-label, .ops-fc-tile .lbl, .ox-kpi .l, .trp-kpi-card > :first-child, .inv-pres-kpi .label, .bdsc-kpi-label) {
  margin: 0 0 8px !important;
  color: var(--color-subtle) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

html body :is(.kpi-value, .ov-kpi-value, .ar-kpi-value, .ops-fc-tile .val, .ox-kpi .n, .trp-kpi-card > :nth-child(2), .inv-pres-kpi .value, .bdsc-kpi-value) {
  margin: 0 !important;
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(32px, 2.5vw, 40px) !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
}

html body :is(.kpi-change, .ov-kpi-delta, .ar-kpi .sub, .ops-fc-tile .sub, .inv-pres-kpi .delta, .inv-pres-kpi .sub, .bdsc-kpi-delta, .bdsc-kpi-sub) {
  margin-top: 10px !important;
  color: var(--color-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.25 !important;
}

html body :is(.kpi-change.positive, .ov-kpi-delta span[style*="color:#10b981" i], .ov-kpi-delta span[style*="color: #10b981" i], .ov-kpi-delta span[style*="color:#0F766E" i], .ov-kpi-delta span[style*="color: #0F766E" i], .inv-pres-kpi .delta.pos) {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-up) 13%, var(--color-surface)) !important;
  color: var(--color-up) !important;
}

html body :is(.kpi-change.negative, .ov-kpi-delta span[style*="color:#dc2626" i], .ov-kpi-delta span[style*="color: #dc2626" i], .inv-pres-kpi .delta.neg) {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-down) 13%, var(--color-surface)) !important;
  color: var(--color-down) !important;
}

/* Shared report cards: a consistently framed title/body reading order. */
html body :is(.table-card, .chart-card, .ox-card, .ops-fc-card, .inv-pres-chart-card, .bdsc-card, .report-canvas) {
  background: var(--color-surface) !important;
  border: 0 !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-border) !important;
  color: var(--color-ink) !important;
}

html body :is(.table-card, .chart-card, .ox-card, .ops-fc-card, .inv-pres-chart-card, .bdsc-card) {
  padding: 20px 22px !important;
  margin-bottom: 20px;
}

html body :is(.table-card, .chart-card, .ox-card, .ops-fc-card, .inv-pres-chart-card, .bdsc-card):hover {
  box-shadow: var(--shadow-border-hover) !important;
}

html body :is(.table-title, .chart-title, .ox-h h3, .ops-fc-card > h3, .inv-pres-chart-card h4, .bdsc-card-head) {
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--color-rule) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}

html body :is(.table-title, .chart-title, .ox-h h3, .ops-fc-card > h3, .inv-pres-chart-card h4, .bdsc-card-head) :is(.sub, .ox-sub, small) {
  color: var(--color-muted) !important;
  font-family: var(--font-sans) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

/* Report pattern: center the paper body and retain a generous section cadence. */
html body :is(#page-reports .container, #investor-dashboard, #revenue-dashboard, #operations-dashboard) {
  max-width: 1120px;
  padding-top: 24px;
}

html body :is(.inv-pres-panel, .report-canvas) {
  background: var(--color-paper) !important;
  border: 0 !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-border-hover) !important;
}

html body .inv-pres-header {
  background: var(--color-elevated) !important;
  border-bottom: 1px solid var(--color-rule) !important;
  color: var(--color-ink) !important;
}

html body :is(.inv-pres-title, .report-canvas .report-title) {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
}

html body :is(.inv-pres-eyebrow, .inv-pres-subtitle, .inv-pres-footer, .report-canvas .report-date) {
  color: var(--color-muted) !important;
  font-family: var(--font-sans) !important;
}

html body .inv-pres-body {
  max-width: 1120px;
  padding: 32px 36px 48px !important;
  background: var(--color-paper) !important;
}

html body .inv-pres-section {
  margin-bottom: 32px !important;
}

html body .inv-pres-section-title {
  margin-bottom: 14px !important;
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.025em !important;
}

html body .inv-pres-section-title::before {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* Tables: paper-page headers, calm dividers, and monospaced numeric columns. */
html body :is(.table-card, .chart-card, .ox-card, .inv-pres-chart-card, .bdsc-card, .report-canvas) table {
  width: 100%;
  border-color: var(--color-rule) !important;
  color: var(--color-ink) !important;
}

html body :is(.table-card, .chart-card, .ox-card, .inv-pres-chart-card, .bdsc-card, .report-canvas) thead,
html body :is(.ar-table, .waterfall-table, .results-table, .data-table, .charge-table, .config-table, .bdsc-table, .bdsc-mini-table) thead {
  background: var(--color-elevated) !important;
  border-bottom: 1px solid var(--color-rule) !important;
}

html body :is(.table-card, .chart-card, .ox-card, .inv-pres-chart-card, .bdsc-card, .report-canvas) th,
html body :is(.ar-table, .waterfall-table, .results-table, .data-table, .charge-table, .config-table, .bdsc-table, .bdsc-mini-table) th {
  background: var(--color-elevated) !important;
  border-color: var(--color-rule) !important;
  color: var(--color-subtle) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
}

html body :is(.table-card, .chart-card, .ox-card, .inv-pres-chart-card, .bdsc-card, .report-canvas) td,
html body :is(.ar-table, .waterfall-table, .results-table, .data-table, .charge-table, .config-table, .bdsc-table, .bdsc-mini-table) td {
  background: var(--color-surface) !important;
  border-color: var(--color-rule) !important;
  color: var(--color-ink) !important;
  font-size: 13px !important;
}

html body :is(.table-card, .chart-card, .ox-card, .inv-pres-chart-card, .bdsc-card, .report-canvas) :is(th.num, td.num, th[class*="num"], td[class*="num"], th[class*="amount"], td[class*="amount"], th[class*="value"], td[class*="value"], th[class*="pct"], td[class*="pct"]) {
  text-align: right !important;
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

html body :is(.table-card, .chart-card, .ox-card, .inv-pres-chart-card, .bdsc-card, .report-canvas) tbody tr:hover > td {
  background: var(--color-paper-mark) !important;
}

/* Keep totals legible and distinct without legacy blue/navy treatments. */
html body :is(.waterfall-table, .ar-table, .results-table) :is(tr.total-row, tr.total, tr.wf-total-row, tr.wf-totals-row) > td,
html body #invPresWfHost tr.wf-total-row > td {
  background: var(--color-ink) !important;
  border-color: var(--color-ink) !important;
  color: var(--color-accent-fg) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
}

/* Waterfall: eliminate hard-coded blue group bands in favor of the paper ramp. */
html body .waterfall-table :is(th, td) {
  border-color: var(--color-rule) !important;
}

html body .waterfall-table :is(.col-gross, .col-net) {
  background: var(--color-elevated) !important;
}

html body .waterfall-table :is(.col-total, .col-pct) {
  background: color-mix(in oklab, var(--color-up) 14%, var(--color-surface)) !important;
  color: var(--color-ink) !important;
}

html body .waterfall-table .col-balance {
  background: color-mix(in oklab, var(--color-warn) 13%, var(--color-surface)) !important;
}

html body :is(.waterfall-subtitle, .waterfall-caption) {
  color: var(--color-muted) !important;
  font-family: var(--font-sans) !important;
}

html body .waterfall-subtitle {
  margin: 24px 0 10px !important;
  padding-bottom: 9px !important;
  border-bottom: 1px solid var(--color-rule) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
}

/* Future-compatible SVG waterfall hooks. Target currently renders waterfall data as tables. */
html body [data-wf-role="up"], html body .wf-up { fill: var(--color-up) !important; background-color: var(--color-up) !important; }
html body [data-wf-role="down"], html body .wf-down { fill: var(--color-down) !important; background-color: var(--color-down) !important; }
html body [data-wf-role="total"], html body .wf-total { fill: var(--color-ink) !important; background-color: var(--color-ink) !important; }
html body [data-wf-role="connector"], html body .wf-connector { stroke: var(--color-rule) !important; border-color: var(--color-rule) !important; }

/* Chart scaffolding: CSS can frame the canvas but cannot recolor Chart.js pixels. */
html body :is(.chart-grid, .inv-pres-chart-row) {
  gap: 24px !important;
  margin-bottom: 32px;
}

html body :is(.chart-container, .inv-pres-chart-card .wrap, .tca-chartwrap, .bdg-chartwrap, .ccchart-wrap) {
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* Heatmap / volume cells use a linen-to-sage scale, with warn reserved for outliers. */
html body :is(.heatmap-cell, .ops-heatmap-cell, .volume-heatmap-cell, [data-heat-value]) {
  background: color-mix(in oklab, var(--color-accent) 16%, var(--color-surface)) !important;
  border-color: var(--color-rule) !important;
  color: var(--color-ink) !important;
}

html body :is(.heatmap-cell.high, .ops-heatmap-cell.high, .volume-heatmap-cell.high, [data-heat-level="high"]) {
  background: color-mix(in oklab, var(--color-accent) 62%, var(--color-surface)) !important;
  color: var(--color-accent-fg) !important;
}

html body :is(.heatmap-cell.outlier, .ops-heatmap-cell.outlier, .volume-heatmap-cell.outlier, [data-heat-level="outlier"]) {
  background: color-mix(in oklab, var(--color-warn) 28%, var(--color-surface)) !important;
}

@media (max-width: 900px) {
  html body :is(.kpi-card, .ov-kpi-tile, .ar-kpi, .ops-fc-tile, .ox-kpi, .trp-kpi-card, .inv-pres-kpi, .table-card, .chart-card, .ox-card, .ops-fc-card, .inv-pres-chart-card, .bdsc-card) {
    padding: 18px !important;
  }

  html body :is(.kpi-value, .ov-kpi-value, .ar-kpi-value, .ops-fc-tile .val, .ox-kpi .n, .trp-kpi-card > :nth-child(2), .inv-pres-kpi .value, .bdsc-kpi-value) {
    font-size: 32px !important;
  }

  html body .inv-pres-panel { margin: 10px !important; }
  html body .inv-pres-body { padding: 24px 18px 32px !important; }
  html body :is(#page-reports .container, #investor-dashboard, #revenue-dashboard, #operations-dashboard) { padding-top: 16px; }
}

/* Existing Operations KPI deltas carry fixed IDs rather than semantic classes. */
html body :is(#coo-kpi-1-change, #coo-kpi-2-change) {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-down) 13%, var(--color-surface)) !important;
  color: var(--color-down) !important;
}

html body :is(#coo-kpi-3-change, #coo-kpi-4-change) {
  display: inline-flex;
  width: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--color-up) 13%, var(--color-surface)) !important;
  color: var(--color-up) !important;
}

/* Collections queue tables have their own component classes, not .table-card. */
html body :is(.piw-tbl, .tw-tbl, .cc-table, .cs-table, .pic-table, .tga-table, .agp-table, .adm-table, .bdm-table) {
  border-color: var(--color-rule) !important;
  color: var(--color-ink) !important;
}

html body :is(.piw-tbl, .tw-tbl, .cc-table, .cs-table, .pic-table, .tga-table, .agp-table, .adm-table, .bdm-table) thead,
html body :is(.piw-tbl, .tw-tbl, .cc-table, .cs-table, .pic-table, .tga-table, .agp-table, .adm-table, .bdm-table) th {
  background: var(--color-elevated) !important;
  border-color: var(--color-rule) !important;
  color: var(--color-subtle) !important;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

html body :is(.piw-tbl, .tw-tbl, .cc-table, .cs-table, .pic-table, .tga-table, .agp-table, .adm-table, .bdm-table) td {
  background: var(--color-surface) !important;
  border-color: var(--color-rule) !important;
  color: var(--color-ink) !important;
}

html body :is(.piw-tbl, .tw-tbl, .cc-table, .cs-table, .pic-table, .tga-table, .agp-table, .adm-table, .bdm-table) :is(.num, [class*="num"], [class*="amount"], [class*="value"], [class*="pct"]) {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

html body :is(.piw-tbl, .tw-tbl, .cc-table, .cs-table, .pic-table, .tga-table, .agp-table, .adm-table, .bdm-table) tbody tr:hover > td {
  background: var(--color-paper-mark) !important;
}

/*
 * Stage 4 — operational modules and Collections v6.
 * CSS only: all selectors below are existing render hooks. This is deliberately
 * an additive final layer so no collections, role, or data behavior is changed.
 */

/* 3a — Operations: volume, utilization, and throughput only. */
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-card, .ox-card, .coo-volume, .coo-table) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-rule) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-border) !important;
}
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-card, .ox-card) {
  padding: 20px !important;
}
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-grid, .ox-kpis) { gap: 10px !important; }
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-tile, .ox-kpi) {
  background: var(--color-elevated) !important;
  border: 1px solid var(--color-rule) !important;
  border-left: 3px solid var(--color-accent) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-tile .val, .ox-kpi .n, #coo-kpi-1, #coo-kpi-2, #coo-kpi-3, #coo-kpi-4) {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  letter-spacing: -0.035em;
}
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-freshness, .ops-validation-banner) {
  background: color-mix(in oklab, var(--color-warn) 12%, var(--color-surface)) !important;
  border: 1px solid color-mix(in oklab, var(--color-warn) 28%, var(--color-surface)) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-warn) !important;
}
html body :is(#operations-dashboard, #page-operations) .ops-fc-freshness.ok {
  background: color-mix(in oklab, var(--color-up) 12%, var(--color-surface)) !important;
  border-color: color-mix(in oklab, var(--color-up) 28%, var(--color-surface)) !important;
  color: var(--color-up) !important;
}
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-action-row, .ox-cal-row) {
  border-color: var(--color-rule) !important;
  background: transparent !important;
  border-radius: var(--radius-xs) !important;
}
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-action-row .doctor, .ox-h h3, .ox-card h3) {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
}
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-action-row .reason, .ox-sub, .ops-fc-action-row .rec) { color: var(--color-muted) !important; }
html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-action-row .flag-pill, .ox-pill) {
  background: color-mix(in oklab, var(--color-warn) 14%, var(--color-surface)) !important;
  border: 1px solid color-mix(in oklab, var(--color-warn) 26%, var(--color-surface)) !important;
  color: var(--color-warn) !important;
}
html body :is(#operations-dashboard, #page-operations) :is(.ox-cal-bar, .ox-mix-seg) { background: var(--color-accent) !important; }
html body :is(#operations-dashboard, #page-operations) :is(.ox-tbl, .coo-table) :is(th, td) { border-color: var(--color-rule) !important; }
html body :is(#operations-dashboard, #page-operations) :is(.ox-tbl, .coo-table) th {
  background: var(--color-elevated) !important;
  color: var(--color-muted) !important;
}
html body :is(#operations-dashboard, #page-operations) :is(.ox-tbl, .coo-table) td { background: var(--color-surface) !important; }
html body :is(#operations-dashboard, #page-operations) :is(.ox-tbl, .coo-table) tr:hover td { background: var(--color-paper-mark) !important; }

/* 3b — Investor: quiet read-only report surfaces and reconciled paper panels. */
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) {
  color: var(--color-ink) !important;
}
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) :is(.inv-pres-panel, .inv-pres-section, .inv-pres-chart-card, .inv-pres-kpi) {
  background: var(--color-surface) !important;
  border-color: var(--color-rule) !important;
  box-shadow: var(--shadow-border) !important;
}
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) :is(.inv-pres-header, .inv-pres-footer) {
  background: var(--color-elevated) !important;
  border-color: var(--color-rule) !important;
}
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) :is(.inv-pres-title, .inv-pres-section-title) {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  letter-spacing: -0.035em;
}
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) :is(.inv-pres-eyebrow, .inv-pres-source-label, .inv-pres-asof) {
  color: var(--color-muted) !important;
  letter-spacing: .1em !important;
}
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) :is(.inv-pres-kpi .value, .inv-pres-kpi .label, .inv-pres-narrative) { color: var(--color-ink) !important; }
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) :is(.inv-pres-source-switch, .inv-pres-entity-picker) {
  background: var(--color-elevated) !important;
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-sm) !important;
}
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) :is(.inv-pres-src-btn, .inv-pres-entity-current, .inv-pres-entity-option) {
  background: transparent !important;
  color: var(--color-muted) !important;
  border-color: transparent !important;
}
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) :is(.inv-pres-src-btn.active, .inv-pres-src-btn[aria-selected="true"], .inv-pres-entity-option[aria-selected="true"]) {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  box-shadow: var(--shadow-border) !important;
}
html body :is(#investor-dashboard, #investorPresModal, .inv-pres-modal) .inv-pres-btn.primary {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  border-color: var(--color-accent) !important;
}

/* 3c — BD: a briefing desk, with its existing universe control retained. */
html body #page-bd :is(.bdsc-header, .bdsc-card-head) { border-color: var(--color-rule) !important; }
html body #page-bd :is(.bdsc-title, .bdsc-card-head, .bdsc-modal-head) {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em;
}
html body #page-bd :is(.bdsc-subtitle, .bdsc-sub, .bdsc-kpi-sub, .bdsc-kpi-sublbl) { color: var(--color-muted) !important; }
html body #page-bd :is(.bdsc-card, .bdsc-kpi, .bdsc-modal-panel, .bdsc-popover) {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-rule) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-border) !important;
}
html body #page-bd :is(.bdsc-kpi-icon, .bdsc-rep-avatar) {
  background: color-mix(in oklab, var(--color-accent) 13%, var(--color-surface)) !important;
  color: var(--color-accent) !important;
}
html body #page-bd :is(.bdsc-chipset, .bdsc-subtabs, .bdsc-filters) {
  background: var(--color-elevated) !important;
  border-color: var(--color-rule) !important;
  border-radius: var(--radius-sm) !important;
}
html body #page-bd :is(.bdsc-chip, .bdsc-mainsubtab, .bdsc-subtab) {
  background: transparent !important;
  color: var(--color-muted) !important;
  border-radius: var(--radius-xs) !important;
}
html body #page-bd :is(.bdsc-chip.active, .bdsc-mainsubtab.active, .bdsc-subtab.active, .bdsc-chip[aria-selected="true"]) {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  box-shadow: var(--shadow-border) !important;
}
html body #page-bd :is(.bdsc-btn, .bdsc-select, .bdsc-search-wrap, .bdsc-field input, .bdsc-field select) {
  background: var(--color-surface) !important;
  border-color: var(--color-rule) !important;
  color: var(--color-ink) !important;
}
html body #page-bd .bdsc-btn-primary { background: var(--color-accent) !important; border-color: var(--color-accent) !important; color: var(--color-accent-fg) !important; }
html body #page-bd :is(.bdsc-table, .bdsc-mini-table) :is(th, td) { border-color: var(--color-rule) !important; }
html body #page-bd :is(.bdsc-table, .bdsc-mini-table) th { background: var(--color-elevated) !important; color: var(--color-muted) !important; }
html body #page-bd :is(.bdsc-table, .bdsc-mini-table) tr:hover td { background: var(--color-paper-mark) !important; }
html body #page-bd :is(.bdsc-score-pill, .bdsc-stage-chip, .bdsc-chip-pill) {
  background: color-mix(in oklab, var(--color-accent) 12%, var(--color-surface)) !important;
  border-color: color-mix(in oklab, var(--color-accent) 22%, var(--color-surface)) !important;
  color: var(--color-accent) !important;
}

html body #trpWorkbench .wb-primary {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
}

@media (max-width: 720px) {
  html body :is(#operations-dashboard, #page-operations) :is(.ops-fc-card, .ox-card) { padding: 14px !important; }
  html body :is(#operations-dashboard, #page-operations) .ops-fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body #page-bd :is(.bdsc-kpi-grid, .bdsc-card) { min-width: 0; }
}

/* ==========================================================================
   Tuning pass — 2026-08-27
   Fixes surfaced by live verification of trp-pulse.com after Stages 1–4 shipped:
   1. The user-facing sign-in gate still painted teal #0F766E full-screen
      (inline auth-gate CSS not reached by our theme override).
   2. The investor-briefing sign-in gate painted the #0f172a → #0F766E navy/teal
      gradient full-screen.
   3. Several operator surfaces (PI Goal Command, PI Focus workbench, settlement
      call CTAs, export buttons, BD scorecard) retained #0F766E accents from
      their own inline <style> blocks.
   Fix strategy: high-specificity overrides that repaint teal → paper accent
   and gradient → paper background. Zero JS/HTML edits. Reversible in this file.
   ========================================================================== */

/* --- 1. Sign-in / auth gate: full-page paper background, sage submit button --- */
html body #loginOverlay,
html body .login-overlay {
  background: var(--color-bg) !important;
}
html body #loginOverlay .login-card,
html body #loginOverlay > div,
html body .login-overlay .card,
html body .login-overlay > div {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-border) !important;
  border-radius: var(--radius-lg) !important;
}
html body #loginOverlay h1,
html body #loginOverlay h2,
html body #loginOverlay .login-title,
html body .login-overlay h1,
html body .login-overlay h2 {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
}
html body #loginOverlay label,
html body .login-overlay label {
  color: var(--color-subtle) !important;
}
html body #loginOverlay input,
html body .login-overlay input {
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
}
html body #loginOverlay input:focus,
html body .login-overlay input:focus {
  outline: 2px solid var(--color-ring) !important;
  outline-offset: 2px !important;
  border-color: var(--color-accent) !important;
}
html body #loginSubmit,
html body .login-submit,
html body #loginOverlay button[type="submit"],
html body .login-overlay button[type="submit"] {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}
html body #loginSubmit:hover,
html body .login-submit:hover,
html body #loginOverlay button[type="submit"]:hover,
html body .login-overlay button[type="submit"]:hover {
  filter: brightness(0.95) !important;
}
html body #loginOverlay a,
html body .login-overlay a {
  color: var(--color-accent) !important;
}

/* --- 2. Investor briefing gate: kill the navy→teal gradient, paper surface --- */
html body [style*="linear-gradient(135deg, #0f172a"],
html body [style*="linear-gradient(135deg,#0f172a"],
html body [style*="#0f172a 0%, #0F766E"],
html body [style*="#0f172a 0%, #0f766e"] {
  background: var(--color-bg) !important;
}
/* Investor-gate card (usually a centered panel over the gradient) */
html body #investorGate,
html body [id*="investor" i][id*="gate" i],
html body [class*="investor" i][class*="gate" i] {
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
}
html body #investorGate .card,
html body #investorGate > div,
html body [class*="investor" i][class*="gate" i] .card {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-border) !important;
  border-radius: var(--radius-lg) !important;
}
html body #investorGate button[type="submit"],
html body #investorGate .primary-btn,
html body [class*="investor" i][class*="gate" i] button[type="submit"] {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
}

/* --- 3. Surviving teal accents across operator surfaces ---
   Target inline-style rules that use #0F766E directly. Because those rules
   live in <style id="pgcStyles">, <style id="trp-smd-css">, <style id="piw-styles">,
   etc., we override them here so a single file remains the paper-palette source
   of truth. */

/* PI Goal Command — active toggle + call CTAs */
html body #piGoalCmd .pgc-toggle button.on,
html body #piGoalCmd .pgc-call-target-btn,
html body #piGoalCmd button.primary {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  border-color: var(--color-accent) !important;
}
html body #piGoalCmd .pgc-toggle button {
  border-color: var(--color-border-strong) !important;
}

/* Settlement Monday panel — the SMD call button */
html body #trpSmd .smd-call {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
}

/* PI Focus workbench brand chrome (piw-styles block) — remap the CSS variables
   the workbench declares locally, so its brand accents follow the paper palette */
html body #trpPiw,
html body [class*="piw-"] {
  --piw-brand: var(--color-accent);
  --piw-brand2: var(--color-up);
}

/* Sidebar prepaint — active tab button was #0F766E, make it sage */
html.trp-sb #dashboardTabs .tab-btn.active,
html body #dashboardTabs .tab-btn.active {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
}

/* Export buttons across ops/investor/reports */
html body .export-btn,
html body button.export,
html body [data-action="export"] {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  border: 0 !important;
}
html body .export-btn:hover,
html body button.export:hover {
  filter: brightness(0.95) !important;
}

/* Focus-visible ring — replace navy with sage ring */
:focus-visible {
  outline-color: var(--color-ring) !important;
}

/* --- Investor briefing gate: correct selector (element is #trpInvGate, not investor-gate) --- */
html body #trpInvGate,
html body #trp-investor-splash {
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
}
html body #trpInvGate .card,
html body #trpInvGate > div:not(#trp-investor-splash),
html body #trpInvGate form {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-border) !important;
  border-radius: var(--radius-lg) !important;
}
html body #trpInvGate .kicker,
html body #trpInvGate small,
html body #trpInvGate p {
  color: var(--color-muted) !important;
}
html body #trpInvGate h1,
html body #trpInvGate h2 {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
}
html body #trpInvGate input,
html body #trpInvGate textarea {
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
}
html body #trpInvGate button,
html body #trpInvGate button[type="submit"],
html body #trpInvGate .primary {
  background: var(--color-accent) !important;
  color: var(--color-accent-fg) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background-image: none !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
}
html body #trpInvGate button:hover {
  filter: brightness(0.95) !important;
}

/* The pending-investor splash background (loading state before gate paints) */
html[data-pending-investor] #trp-investor-splash {
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
  background-image: none !important;
}
html[data-pending-investor] #trp-investor-splash .dot {
  background: var(--color-accent) !important;
}

/* --- Kicker/accent-fg text: replace any surviving teal #0F766E used as color --- */
html body #trpInvGate .kicker,
html body #trpInvGate [class*="kicker" i] {
  color: var(--color-accent) !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0.08em !important;
}
/* Inline color:#0F766E text anywhere on operator surfaces */
html body [style*="color: #0F766E"],
html body [style*="color:#0F766E"],
html body [style*="color: #0f766e"],
html body [style*="color:#0f766e"] {
  color: var(--color-accent) !important;
}
/* PI Focus workbench (piw-styles) — anywhere the brand text token showed */
html body #trpPiw .piw-brand,
html body #trpPiw [class*="brand"],
html body [class*="piw-brand"] {
  color: var(--color-accent) !important;
}
/* PI Goal Command — inline pill borders that were teal */
html body #piGoalCmd [style*="border: 1px solid #0F766E"],
html body #piGoalCmd [style*="border:1px solid #0F766E"] {
  border-color: var(--color-accent) !important;
}

/* ==== Audit batch 1 — 2026-08-27 ==== */

/* 1. Login logo (#loginOverlay .login-logo) still teal #0F766E */
html body #loginOverlay .login-logo {
  color: var(--color-ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
}

/* 2. Investor gate card body renders in Calibri, not Outfit */
html body #trpInvGate,
html body #trpInvGate * {
  font-family: var(--font-sans) !important;
}
html body #trpInvGate h1,
html body #trpInvGate h2,
html body #trpInvGate .title,
html body #trpInvGate [class*="title" i] {
  font-family: var(--font-display) !important;
}

/* 3. Investor gate eyebrow text neon cyan #5EEAD4 → sage */
html body #trpInvGate .kicker,
html body #trpInvGate .eyebrow,
html body #trpInvGate [class*="eyebrow" i],
html body #trpInvGate [style*="rgb(94, 234, 212)"],
html body #trpInvGate [style*="#5EEAD4"],
html body #trpInvGate [style*="#5eead4"] {
  color: var(--color-accent) !important;
}

/* 4. Investor gate helper text slate #94A3B8 and footer #64748B */
html body #trpInvGate p,
html body #trpInvGate small,
html body #trpInvGate .help-text,
html body #trpInvGate [class*="help" i] {
  color: var(--color-muted) !important;
}
html body #trpInvGate .footer,
html body #trpInvGate [class*="footer" i],
html body #trpInvGate [class*="disclaimer" i] {
  color: var(--color-subtle) !important;
}

/* 5. Sign-in inputs still have a subtle blue focus box-shadow rgba(76, 114, 176, 0.15) */
html body #loginOverlay input:focus,
html body #loginOverlay input:focus-visible,
html body #trpInvGate input:focus,
html body #trpInvGate input:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 20%, transparent) !important;
}

/* 6. /mobile route body bg dark navy rgb(11, 18, 32) → paper linen */
/* /mobile standalone route — repaint dark navy to paper */
html body.mobile-body,
html body.trp-mobile,
html body[data-page="mobile"],
html body[data-route="/mobile"] {
  background: var(--color-bg) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-sans) !important;
}
/* Fallback: any element on the /mobile page whose inline style paints #0B1220 or rgb(11,18,32) */
html body [style*="#0B1220"],
html body [style*="#0b1220"],
html body [style*="rgb(11, 18, 32)"],
html body [style*="rgb(11,18,32)"] {
  background: var(--color-bg) !important;
}
/* Mobile tiles/cards — repaint navy card backgrounds */
html body [style*="#13203B"],
html body [style*="#13203b"],
html body [style*="#1E293B"]:not(header):not([id*="header"]),
html body [style*="#1e293b"]:not(header):not([id*="header"]) {
  background: var(--color-surface) !important;
  color: var(--color-ink) !important;
  border-color: var(--color-border) !important;
}