/* ====================================================================================================
   skin-modern.css — CashflowReviewer "MODERN" calc skin v2: FULL DARK (matches the landing hero card)
   ----------------------------------------------------------------------------------------------------
   ARCHITECTURE (read before editing):
   • PURE CSS SKIN. Zero calc.js / markup changes. Every rule is scoped under body.ff-modern —
     removing that one body class restores today's look ("classic") byte-for-byte, because nothing
     here can apply without the class.
   • All calc surfaces (#calc-overlay, every calc-* modal, #heron-pull-modal, toasts, pills) are
     appended directly to document.body, so body.ff-modern reaches everything.
   • PRIMARY MECHANISM = token re-pointing (v1 architecture, kept). calc.js's own base rules AND the
     always-on #calc-overlay.calc-skin-new !important overrides consume var(--surface-card)/
     var(--radius-lg)/var(--color-primary)/--calc-* etc. Redefining those tokens at higher
     specificity re-skins dozens of components WITHOUT !important. The overlay root's inline
     background is background:var(--bg-app) — the dark page gradient flows in token-only.
   • SECONDARY MECHANISM (new in v2) = the INLINE-HEX REMAP LAYER (sections 18-22; 21 extends the
     layer to the eleven body-appended panels the three main containers miss — AI panel, AR corpus/
     miner/keywords, team report, reco review, heron alerts, deals-send, pdf progress, funding
     finder, drop hint — and 22 darkens a few solid chip hues one shade for AA). calc.js emits
     ~1,185 inline style="" attributes with light-theme hexes (dark text, white/tint backgrounds).
     [style*="…"] attribute selectors + !important remap them onto the dark surfaces. EVERY
     !important in that layer exists for one reason: an inline style attribute must be beaten —
     that is the entire mechanism (per-rule comments only where a rule does something extra).
   • TEXT-REMAP ANCHORING (critical): calc.js also writes inline border-color:#HEX longhands
     (e.g. border-color:#2563eb on solid buttons). A naive [style*="color:#2563eb"] substring-matches
     "border-color:#2563eb" and would repaint white button text light-blue. Every text remap is
     therefore anchored: [style^="color:#HEX"] (attr starts with it) OR [style*=";color:#HEX"]
     (a semicolon right before). Verified against calc.js: 135 style attrs start with color:#,
     714 carry ;color:#, zero carry a space variant ("color: #") and zero background-color:#.
   • CHART ISLAND: the Daily Balance chart is inline SVG (#calc-bal-svg in #calc-bal-wrap) painted
     with fill=/stroke= PRESENTATION ATTRIBUTES for a light background. Its wrapper becomes a light
     framed island (section 17); the SVG internals are untouchable by this file BY CONSTRUCTION:
     no rule here targets svg/text elements, and [style*=] selectors cannot match presentation
     attributes (the SVG nodes carry no style="color:…"/"background:…" strings). The offscreen
     offer copy-image canvas (_drawOfferCanvas) is unreachable by CSS entirely.
     GOTCHA kept from the scan: #0d6e56 (canvas logo) vs #0f6e56 (DOM badge) — neither is targeted.
   • HARD SAFETY RULES honored throughout: no display:none / visibility:hidden / pointer-events:none /
     opacity:0 / zero-size anywhere; no position/top/transform changes on JS-managed elements
     (#calc-hdr, #calc-tabs, #calc-summary-toc, .calc-txnctl, #calc-totop); no max-height clamps;
     the .calc-amtsel selection paint (inline background/box-shadow written by JS) is never targeted.
   • WCAG AA verified ARITHMETICALLY (59-pair script, all pass; key pairs):
       #e2e8f0 on #111a33 card ......... 13.97:1   body/heading text
       #cbd5e1 on #111a33 .............. 11.60:1   secondary text
       #94a3b8 on #111a33 / #16203d .... 6.72 / 6.26:1   muted text / table th
       #f87171 on #111a33 .............. 6.23:1   red semantic text
       #4ade80 on #111a33 .............. 9.88:1   green semantic text
       #fbbf24 on #111a33 .............. 10.32:1  amber semantic text
       #c4b5fd on #111a33 .............. 9.33:1   violet · #93c5fd blue 9.55 · #5eead4 teal 11.64
       #fde68a on #3a2f14 .............. 10.56:1  yellow editable input
       #fca5a5 on #2a1214 .............. 9.26:1   red tint pill (f87171 pair 6.35)
       #6ee7b7 on #0f2a1d .............. 10.06:1  green tint (4ade80 pair 8.80)
       #93c5fd on #12233f .............. 8.70:1   blue tint · #c4b5fd on #221c44 8.63
       #fff on #243356 btn ............. 12.48:1  default button
       #0b1120 on #818cf8 .............. 6.31:1   active chip
       #818cf8 on #0d1730 .............. 5.95:1   active tab
       #a5b4fc focus vs #111a33/#0d1730  8.64 / 8.91:1 (>=3:1 non-text)
   ==================================================================================================== */

/* ====================================================================================================
   1. DESIGN TOKENS — DARK. Defined twice: on body.ff-modern (inherits into every body-appended
   calc modal/toast) and on body.ff-modern #calc-overlay (specificity (1,1,1) — beats the always-on
   #calc-overlay.calc-skin-new (1,1,0) token block inside the overlay).
   Shell-safety: index.html's shell uses its own token namespace (--line/--muted/--ink/--card/--bg)
   — zero collision with these names except --radius, which stays scoped below (v1 audit fix kept).
   ==================================================================================================== */
body.ff-modern,
body.ff-modern #calc-overlay {
  /* surfaces — the landing hero card palette: navy page, #111a33 cards, hairline slate borders */
  --bg-app: linear-gradient(180deg, #0b1120 0%, #0d1730 100%);  /* sole consumer = #calc-overlay root's inline background:var(--bg-app) */
  --surface-card: #111a33;
  --surface-soft: #16203d;
  --surface-sunken: #1c2742;
  --border: rgba(148, 163, 184, 0.16);
  --border-card: rgba(148, 163, 184, 0.14);
  --border-strong: #33415e;
  /* accent — indigo family, LIGHT tier for dark surfaces. NOTE: --color-primary is consumed by
     .calc-chip.on as a BACKGROUND (with --text-on-dark #fff text = 2.98:1 fail) — section 9
     re-asserts dark ink on active chips. As TEXT (.calc-tab.on) #818cf8 = 5.95:1 on the dark bar. */
  --color-primary: #818cf8;
  --color-primary-hover: #a5b4fc;
  --color-primary-soft: rgba(99, 102, 241, 0.16);
  --color-primary-tint: rgba(99, 102, 241, 0.26);
  /* text — light neutral ramp (AA on card/soft/sunken, see header table) */
  --text: #e2e8f0;
  --text-strong: #f1f5f9;
  --text-body: #cbd5e1;
  --text-muted: #94a3b8;
  --text-faint: #8b98b5;   /* 5.95:1 on #111a33 (faint tier still AA-normal) */
  /* geometry — landing radii. --radius itself deliberately NOT set here: index.html's :root
     defines --radius(14px) for the SHELL sign-in/credits .modal and body.ff-modern (0,1,1) would
     beat :root and leak into them — it is set on calc surfaces only, right below (v1 audit fix). */
  --radius-md: 12px;
  --radius-lg: 16px;
  /* elevation — deep navy throws (dark UI needs darker, longer shadows to read) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 12px 30px -16px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 3px 8px rgba(0, 0, 0, 0.35), 0 18px 40px -18px rgba(0, 0, 0, 0.60);
  --shadow-hover: 0 14px 32px -10px rgba(99, 102, 241, 0.35), 0 2px 4px rgba(0, 0, 0, 0.40);
  --shadow-modal: 0 40px 90px -22px rgba(0, 0, 0, 0.75);
  --shadow-dropdown: 0 18px 44px -12px rgba(0, 0, 0, 0.70);
  --hero-grad: linear-gradient(135deg, #0b1120 0%, #131f3d 100%);
  --hero-accent: #818cf8;
  /* focus */
  --focus-ring: rgba(129, 140, 248, 0.28);
  --focus-outline: #a5b4fc;
  /* font — the landing's Inter (already loaded by index.html Google Fonts) */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  /* --calc-* family consumed by the Active-Funders modern table (_activeFundersHtmlNew) */
  --calc-ink: #e2e8f0;
  --calc-line: #263350;
  --calc-head-1: #16203d;
  --calc-head-2: #121b36;
  --calc-accent: #5eead4;          /* money-positive teal from the landing card, 11.64:1 on card */
  --calc-muted: #94a3b8;
  --calc-link: #93c5fd;            /* 9.55:1 on card */
  --calc-danger: #fb7185;          /* 6.40:1 on card */
  --calc-violet: #c4b5fd;          /* 9.33:1 on card */
  --calc-foot: #94a3b8;
  --calc-faint: #8b98b5;
  --calc-btn-idle: #64748b;        /* stays a solid button bg with #fff text (4.76:1) */
  /* tentative/warn tints — same amber information, dark-tint equivalents (9px label text pairs:
     #fdba74 on #2f2410 = 9.02:1) */
  --calc-tentative: #fdba74;
  --calc-tentative-bg: #2f2410;
  --calc-row-warn: #2f2410;
  --calc-row-stop: #2a1214;
  --calc-row-pend: #2b2410;
  /* status pill bg/fg PAIRS (base theme maps them to light --red-100-style tints; each dark pair
     re-verified: bounce 9.26, closed 11.49, legal 9.38, watch 10.55, adjusted 10.91, plan 8.70,
     good 10.06, other 8.63) */
  --status-bounce-bg: #2a1214;   --status-bounce-fg: #fca5a5;
  --status-closed-bg: #3b0f12;   --status-closed-fg: #fecaca;
  --status-legal-bg: #33101f;    --status-legal-fg: #f9a8d4;
  --status-watch-bg: #2f2410;    --status-watch-fg: #fcd34d;
  --status-adjusted-bg: #3a2c0d; --status-adjusted-fg: #fde68a;
  --status-plan-bg: #12233f;     --status-plan-fg: #93c5fd;
  --status-good-bg: #0f2a1d;     --status-good-fg: #6ee7b7;
  --status-other-bg: #221c44;    --status-other-fg: #c4b5fd;
}
/* --radius on CALC surfaces only (see the token-block note: bare body.ff-modern would leak 10px
   into the shell's .modal, which reads :root's --radius:14px). Covers the overlay + every
   body-appended calc-* modal (deals/paste/kwbrain/roadmap/…) + the Heron modal.
   ALSO: color-scheme:dark here (calc surfaces only, never the light shell) so native widgets —
   date pickers, select popups, form controls, UA scrollbars — render dark. */
body.ff-modern #calc-overlay,
body.ff-modern [id^="calc-"][id$="-modal"],
body.ff-modern #heron-pull-modal {
  --radius: 10px;
  color-scheme: dark;
}

/* ====================================================================================================
   2. TYPOGRAPHY — bring Inter into the calc.
   ==================================================================================================== */
/* !important: #calc-overlay and #calc-deals-modal both set font-family INLINE (style attribute). */
body.ff-modern #calc-overlay,
body.ff-modern #calc-deals-modal {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* form controls don't inherit font by default — opt them in everywhere in the calc surfaces */
body.ff-modern #calc-overlay button,
body.ff-modern #calc-overlay input,
body.ff-modern #calc-overlay select,
body.ff-modern #calc-overlay textarea,
body.ff-modern #calc-deals-modal button,
body.ff-modern #calc-deals-modal input,
body.ff-modern #calc-deals-modal select,
body.ff-modern #calc-deals-modal textarea,
body.ff-modern [id^="calc-"][id$="-modal"] button,
body.ff-modern [id^="calc-"][id$="-modal"] input,
body.ff-modern [id^="calc-"][id$="-modal"] select,
body.ff-modern [id^="calc-"][id$="-modal"] textarea {
  font-family: inherit;
}

/* ====================================================================================================
   3. CALC HEADER CHROME (#calc-hdr) — the landing's dark-navy hero with indigo/emerald glows.
   (Kept from v1 — this chrome already matched the owner's reference.)
   NEVER touch position/top/transform/padding here: the header hide-on-scroll writes inline
   transform, and the <=680px layer owns padding.
   ==================================================================================================== */
/* !important: inline background:#0f172a on #calc-hdr AND calc-skin-new re-paints it with a
   hex-hardcoded !important teal gradient — both must be beaten. */
body.ff-modern #calc-overlay #calc-hdr {
  background:
    radial-gradient(900px 220px at 85% -40%, rgba(99, 102, 241, 0.34), transparent 60%),
    radial-gradient(620px 200px at 8% -30%, rgba(52, 211, 153, 0.20), transparent 55%),
    linear-gradient(180deg, #0b1120 0%, #0d1730 100%) !important;
  color: #e2e8f0 !important;                                  /* !important: calc-skin-new sets color !important */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; /* !important: calc-skin-new border !important */
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.55) !important;  /* !important: calc-skin-new shadow !important */
}
/* brand title — the landing's teal→indigo gradient wordmark (emoji keeps its own color glyph) */
body.ff-modern #calc-overlay #calc-hdr > div:first-child {
  background: linear-gradient(120deg, #5eead4, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
/* header text inputs (deal name / open-another) — ghost glass fields like .lp-btn.ghost */
/* !important: both inputs carry inline background/border/border-radius */
body.ff-modern #calc-dealname,
body.ff-modern #calc-openother {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
}
body.ff-modern #calc-dealname::placeholder,
body.ff-modern #calc-openother::placeholder {
  color: #8b9bb4; /* ~6:1 on the navy chrome */
}
/* header buttons WITHOUT inline colors become ghost buttons; inline-colored ones (blue/red/violet…)
   keep their semantic hue (inline style wins over these non-!important rules — by design). */
body.ff-modern #calc-hdr .calc-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;   /* NOT #e2e8f0: this color also lands on the inline-COLORED buttons (their
                       inline style only sets background/border) — white keeps classic parity:
                       ✕ Close #dc2626 4.83:1, 📄 violet 5.70:1, vs 3.92/4.62 with #e2e8f0 */
  box-shadow: none;
}
body.ff-modern #calc-hdr .calc-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* ====================================================================================================
   4. ⋯ MORE DROPDOWN (#calc-more-menu) — landing dark-card treatment (kept from v1).
   ==================================================================================================== */
/* !important: the menu carries inline border/border-radius/box-shadow */
body.ff-modern #calc-more-menu {
  background: linear-gradient(180deg, #0f1a33, #0c1428) !important; /* !important: inline background:#0b1220 */
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.65) !important;
}
body.ff-modern #calc-more-menu .calc-more-item {
  box-shadow: none;           /* undo the skin's base button shadow on flat menu rows */
  border-radius: 8px;
}
body.ff-modern #calc-more-menu .calc-more-item:hover {
  background: rgba(99, 102, 241, 0.20);
}

/* ====================================================================================================
   5. TABS BAR (#calc-tabs) — frosted DARK bar (v2: was white). Active state colors come free from
   the --color-primary/--text tokens (calc-skin-new's own !important rules consume them):
   idle #94a3b8 = 6.93:1, active #818cf8 = 5.95:1 on this navy.
   NEVER touch position/top: JS re-anchors top on every header hide/show.
   ==================================================================================================== */
/* !important: calc-skin-new paints the bar #ffffff/border/shadow with !important */
body.ff-modern #calc-overlay #calc-tabs {
  background: rgba(13, 23, 48, 0.88) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.60) !important;
}
body.ff-modern #calc-overlay #calc-tabs .calc-tab {
  letter-spacing: -0.005em;
}

/* ====================================================================================================
   6. BUTTONS (.calc-btn) — landing button language on dark: 10px radius, Inter 700, lift on hover.
   Semantic inline hues (danger red, violet, teal, greens…) are information and stay untouched —
   inline styles win over these non-!important base rules by design (#fff text on them: 2563eb
   5.17:1, b45309 5.02:1 — pre-existing classic ratios, unchanged).
   ==================================================================================================== */
body.ff-modern .calc-btn {
  border-radius: 10px;
  background: #243356;                    /* raised navy for un-colored buttons on dark cards; #fff text 12.48:1 */
  border-color: rgba(148, 163, 184, 0.28);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
body.ff-modern .calc-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.70);
}
body.ff-modern .calc-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}
/* PRIMARY remap — the app's primary-blue actions (📂 Calc Dashboard, 📋 Paste statement, ✨ New…)
   get the landing's signature teal→indigo gradient. AA-safe darker ends:
   #fff on #047857 = 5.48:1, #fff on #4f46e5 = 6.29:1. */
/* !important: these buttons hard-code background:#2563eb;border-color:#2563eb INLINE. */
body.ff-modern .calc-btn[style*="background:#2563eb"] {
  background: linear-gradient(135deg, #047857 0%, #4f46e5 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 8px 22px -8px rgba(79, 70, 229, 0.55);
}
body.ff-modern .calc-btn[style*="background:#2563eb"]:hover {
  box-shadow: 0 14px 30px -10px rgba(99, 102, 241, 0.60);
}

/* ====================================================================================================
   7. CARDS, SECTION HEADERS
   .calc-card / .calc-kpi go dark via tokens (calc-skin-new's !important card rule consumes
   var(--border-card)/var(--radius-lg)/var(--shadow-card) → our dark values; background rides
   var(--surface-card) = #111a33). Only polish here.
   ==================================================================================================== */
body.ff-modern #calc-overlay .calc-card,
body.ff-modern #calc-deals-modal .calc-card {
  transition: box-shadow 0.15s ease;
}
/* Summary section headers (.calc-dash-sec) — landing "kicker" style, light indigo on the navy page
   (9.45:1). MUST stay block-level and visible: the Jump-to bar builds itself from these nodes. */
body.ff-modern #calc-overlay .calc-dash-sec {
  color: #a5b4fc;
  font-size: 11px;
  letter-spacing: 0.11em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 2px 8px;
}
body.ff-modern #calc-overlay .calc-dash-sec::before {
  content: "";
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #6366f1);
  flex: 0 0 auto;
}

/* ====================================================================================================
   8. DATA TABLES (.calc-tbl) — dark, airy, tabular numerals, indigo row hover.
   th keeps its base position:sticky;top:0 (never touched).
   ==================================================================================================== */
body.ff-modern .calc-tbl {
  font-variant-numeric: tabular-nums;
}
body.ff-modern .calc-tbl th {
  background: #16203d;                     /* beats the injected '.calc-tbl th{background:#f8fafc}' (0,2,1 vs 0,1,1) */
  color: #94a3b8;                          /* 6.26:1 on #16203d */
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #263350;
}
body.ff-modern .calc-tbl td {
  border-bottom: 1px solid #1e2a47;
}
/* calc-skin-new hardcodes '.calc-tbl td{border-bottom-color:#eef3f5}' at (1,2,1) — that light
   divider would glow on the dark cards; re-assert at (1,2,2). (th's calc-skin-new variant already
   consumes var(--border-card) = dark.) */
body.ff-modern #calc-overlay .calc-tbl td {
  border-bottom-color: #1e2a47;
}
/* row hover — painted on the TD so a row's inline funder tint (tr-level) stays visible beneath;
   the .calc-amtsel selection paint is INLINE on the td and therefore always wins (feedback safe). */
body.ff-modern #calc-overlay .calc-tbl tbody tr:hover td,
body.ff-modern [id^="calc-"][id$="-modal"] .calc-tbl tbody tr:hover td {
  background: rgba(129, 140, 248, 0.07);
}
/* re-assert the variants my (0,2,2) th/td rules above would otherwise out-specific: */
body.ff-modern .calc-tbl.redhead th {
  background: #b91c1c;                     /* missed-payments red header is information — kept */
  color: #ffffff;
  border-bottom-color: #7f1d1d;
}
body.ff-modern .calc-tbl.calc-grid th,
body.ff-modern .calc-tbl.calc-grid td {
  border: 1px solid var(--border);         /* keep the full grid (zebra rides var(--surface-soft) =
                                              #16203d "a shade lighter", hover rides
                                              var(--color-primary-soft) — both re-pointed dark) */
}

/* ====================================================================================================
   9. INPUTS / SELECTS / CHIPS — dark fields; the .calc-yellow editable highlight stays visibly
   AMBER (information: "you can type here") as a dark-amber field.
   ==================================================================================================== */
body.ff-modern .calc-in {
  border-radius: 9px;
  background: #0f1a36;
  border-color: #33415e;
  color: #e2e8f0;                          /* 13.95:1 on #0f1a36 */
}
body.ff-modern .calc-in::placeholder {
  color: #94a3b8;                          /* 6.71:1 on #0f1a36 */
}
/* .calc-yellow — the editable-cell highlight (funder Funded override, payment, schedule, offer
   fields). Classic = #fef9c3 yellow; dark = amber field + amber border + amber text (10.56:1),
   clearly editable and clearly distinct from read-only cells. Placed AFTER .calc-in (same 0,2,1
   specificity — source order wins) so the highlight beats the plain dark field. */
body.ff-modern .calc-yellow {
  background: #3a2f14;
  border-color: #8a6d00;
  color: #fde68a;
  caret-color: #fde68a;
}
body.ff-modern .calc-chip {
  border-radius: 999px;
  background: #16203d;
  border-color: #33415e;
  color: #cbd5e1;                          /* 10.81:1 on #16203d */
}
/* the .on ACTIVE state — calc.js's `.calc-chip.on` sets background var(--color-primary) (#818cf8
   re-pointed) with color var(--text-on-dark) #fff = 2.98:1 FAIL; dark navy ink = 6.31:1. My (0,3,1)
   beats calc.js's (0,2,0); chips carrying their own inline color pairs still win (inline > CSS). */
body.ff-modern .calc-chip.on {
  border-color: var(--color-primary);
  color: #0b1120;
}
/* secondary "on2" chip state — classic #bfdbfe/#1e3a8a light-blue pill → dark blue tint (8.70:1) */
body.ff-modern .calc-chip.on2 {
  background: #12233f;
  border-color: #1e40af;
  color: #93c5fd;
}
/* native select popups — explicit dark (color-scheme:dark helps, this guarantees it) */
body.ff-modern #calc-overlay select option,
body.ff-modern [id^="calc-"][id$="-modal"] select option,
body.ff-modern #heron-pull-modal select option {
  background: #0d1730;
  color: #e2e8f0;
}

/* ====================================================================================================
   10. STICKY BARS — Jump-to (#calc-summary-toc) + Transactions filter bar (.calc-txnctl).
   Their `top` is JS-written every scroll flip — visuals only here, top/position NEVER set.
   ==================================================================================================== */
/* !important: the Jump-to bar carries inline background/border-bottom/box-shadow in its cssText */
body.ff-modern #calc-summary-toc {
  background: rgba(13, 23, 48, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, 0.70) !important;
}
body.ff-modern #calc-overlay .calc-txnctl {
  background: rgba(13, 23, 48, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ====================================================================================================
   11. CALC DASHBOARD (#calc-deals-modal) — full-screen surface: navy toolbar over a DARK work area.
   ==================================================================================================== */
/* !important: the modal root carries inline background:#f1f5f9 */
body.ff-modern #calc-deals-modal {
  background: linear-gradient(180deg, #0b1120 0%, #0d1730 100%) !important;
}
/* !important: the toolbar carries inline background:#0f172a */
body.ff-modern #calc-deals-modal > div:first-child {
  background:
    radial-gradient(900px 220px at 85% -40%, rgba(99, 102, 241, 0.30), transparent 60%),
    linear-gradient(180deg, #0b1120 0%, #0d1730 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.ff-modern #calc-deals-modal > div:first-child > div:first-child {
  background: linear-gradient(120deg, #5eead4, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.01em;
}
/* toolbar controls — ghost glass (search / sort / date range) */
/* !important: each carries inline background:#1e293b + border:#334155 + border-radius */
body.ff-modern #calc-deals-search,
body.ff-modern #calc-deals-sort,
body.ff-modern #calc-deals-from,
body.ff-modern #calc-deals-to {
  background: rgba(255, 255, 255, 0.07) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 10px !important;
}
body.ff-modern #calc-deals-search::placeholder {
  color: #8b9bb4;
}
body.ff-modern #calc-deals-from,
body.ff-modern #calc-deals-to {
  color-scheme: dark;                      /* native calendar icon stays visible on the navy bar */
}
/* the sort <select> popup list needs explicit dark colors (native popup won't inherit the glass) */
body.ff-modern #calc-deals-sort option {
  background: #0d1730;
  color: #f1f5f9;
}
/* toolbar ghost buttons (uncolored ones); inline-colored (Excel/PDF/New/Close…) keep their hues */
body.ff-modern #calc-deals-modal > div:first-child .calc-btn {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;   /* NOT #e2e8f0 — also lands on inline-colored ⬇ Excel #15803d (5.01:1 white
                       vs 4.07:1) and ⬇ PDF #b91c1c (6.47:1) — see the #calc-hdr note */
  box-shadow: none;
}
body.ff-modern #calc-deals-modal > div:first-child .calc-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}
/* deals table — whisper zebra + indigo hover, both painted on TDs at near-transparent alpha so
   inline row/status tints (information) stay visible beneath */
body.ff-modern #calc-deals-modal tbody tr:nth-child(even) td {
  background: rgba(148, 163, 184, 0.035);
}
body.ff-modern #calc-deals-modal tbody tr:hover td {
  background: rgba(129, 140, 248, 0.07);
}

/* ====================================================================================================
   12. DIALOG MODALS — panels re-skin via tokens (inline background:var(--surface-card);
   border-radius:var(--radius-lg);box-shadow:var(--shadow-modal) all consume our dark values).
   Here: deepen the veils. Background-only — display is JS-owned.
   ==================================================================================================== */
/* !important: each veil carries an inline rgba(0,0,0,.5)-family background */
body.ff-modern #calc-paste-modal,
body.ff-modern #calc-funder-modal,
body.ff-modern #calc-tagmca-modal,
body.ff-modern #calc-tagcoll-modal,
body.ff-modern #calc-linkfnd-modal,
body.ff-modern #calc-relink-modal,
body.ff-modern #calc-scope-modal,
body.ff-modern #calc-funky-modal,
body.ff-modern #calc-fndpick-modal,
body.ff-modern #calc-accttxn-modal,
body.ff-modern #calc-aimap-modal,
body.ff-modern #calc-reco-modal,
body.ff-modern #heron-pull-modal {
  background: rgba(3, 7, 18, 0.72) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* NOT veils: 🧠 Brain Keywords + 🗺 Roadmap are full-screen OPAQUE work surfaces (inline
   background:#f1f5f9, flex-column — same species as the Calc Dashboard). v2: they go DARK like
   every other work surface; their light-styled internals are covered by the remap layer. */
/* !important: both roots carry inline background:#f1f5f9 */
body.ff-modern #calc-kwbrain-modal,
body.ff-modern #calc-roadmap-modal {
  background: linear-gradient(180deg, #0b1120 0%, #0d1730 100%) !important;
}

/* ====================================================================================================
   13. TOASTS (kept from v1 — already dark-family)
   ==================================================================================================== */
/* shell toast (#toast in index.html) — landing dark-card look; .err red re-asserted (information) */
body.ff-modern #toast {
  background: linear-gradient(135deg, #0b1120, #131f3d);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  font-weight: 600;
}
body.ff-modern #toast.err {
  background: #7f1d1d;
  border-color: rgba(255, 255, 255, 0.14);
}
/* calc.js fallback toast — an id-less body-appended div; matched narrowly by its cssText signature.
   Background is NOT touched (info=navy vs error=red is information). Shape/shadow polish only. */
/* !important: border-radius + box-shadow are inline in its cssText */
body.ff-modern > div[style*="z-index:9999"][style*="translateX(-50%)"][style*="bottom:20px"] {
  border-radius: 12px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: 600;
}

/* ====================================================================================================
   14. SaaS FLOATING TOOLBAR (#ff-bar) — same chrome family as the calc header (kept from v1).
   ==================================================================================================== */
body.ff-modern #ff-bar {
  background: linear-gradient(180deg, rgba(11, 17, 32, 0.96), rgba(13, 23, 48, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.55);
}
body.ff-modern #ff-bar button {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  font-family: inherit;
}
body.ff-modern #ff-bar button:hover {
  background: rgba(255, 255, 255, 0.15);
  filter: none;
}
body.ff-modern #ff-bar button.buy {
  background: linear-gradient(135deg, #047857 0%, #4f46e5 100%); /* primary action = brand gradient */
}

/* ====================================================================================================
   15. SCROLLBARS — slim, rounded, dark. (The mobile chipbar keeps its own display:none hide.)
   ==================================================================================================== */
body.ff-modern #calc-overlay,
body.ff-modern #calc-deals-modal,
body.ff-modern .calc-tblwrap,
body.ff-modern #calc-paste-ta {
  scrollbar-width: thin;
  scrollbar-color: #33415e transparent;
}
body.ff-modern #calc-overlay::-webkit-scrollbar,
body.ff-modern #calc-overlay *::-webkit-scrollbar,
body.ff-modern #calc-deals-modal *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.ff-modern #calc-overlay::-webkit-scrollbar-thumb,
body.ff-modern #calc-overlay *::-webkit-scrollbar-thumb,
body.ff-modern #calc-deals-modal *::-webkit-scrollbar-thumb {
  background: #33415e;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.ff-modern #calc-overlay::-webkit-scrollbar-thumb:hover,
body.ff-modern #calc-overlay *::-webkit-scrollbar-thumb:hover,
body.ff-modern #calc-deals-modal *::-webkit-scrollbar-thumb:hover {
  background: #4c5a75;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.ff-modern #calc-overlay::-webkit-scrollbar-track,
body.ff-modern #calc-overlay *::-webkit-scrollbar-track,
body.ff-modern #calc-deals-modal *::-webkit-scrollbar-track {
  background: transparent;
}

/* ====================================================================================================
   16. ADA ESSENTIALS
   ==================================================================================================== */
/* visible focus for every interactive element on the DARK calc surfaces — light indigo #a5b4fc
   (8.64:1 vs card, 8.91:1 vs page; >=3:1 non-text requirement). Scoped to calc surfaces + #ff-bar:
   the light SHELL keeps its own UA/site focus styles (a light outline there would fail on white). */
body.ff-modern #calc-overlay a:focus-visible,
body.ff-modern #calc-overlay button:focus-visible,
body.ff-modern #calc-overlay input:focus-visible,
body.ff-modern #calc-overlay select:focus-visible,
body.ff-modern #calc-overlay textarea:focus-visible,
body.ff-modern #calc-overlay summary:focus-visible,
body.ff-modern #calc-overlay [tabindex]:focus-visible,
body.ff-modern [id^="calc-"][id$="-modal"] a:focus-visible,
body.ff-modern [id^="calc-"][id$="-modal"] button:focus-visible,
body.ff-modern [id^="calc-"][id$="-modal"] input:focus-visible,
body.ff-modern [id^="calc-"][id$="-modal"] select:focus-visible,
body.ff-modern [id^="calc-"][id$="-modal"] textarea:focus-visible,
body.ff-modern [id^="calc-"][id$="-modal"] [tabindex]:focus-visible,
body.ff-modern #heron-pull-modal button:focus-visible,
body.ff-modern #heron-pull-modal input:focus-visible,
body.ff-modern #heron-pull-modal select:focus-visible,
body.ff-modern #ff-bar button:focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}
/* selection tint in-family (visual only — the amount-select feature paints its own inline styles) */
body.ff-modern #calc-overlay ::selection,
body.ff-modern [id^="calc-"][id$="-modal"] ::selection {
  background: rgba(129, 140, 248, 0.30);
}
/* reduced motion: neutralize every transition/animation in the skin's scope.
   !important: must also beat JS-written inline transitions (header slide, back-to-top FAB) —
   an accessibility override, all behavior still lands instantly (nothing is hidden or disabled). */
@media (prefers-reduced-motion: reduce) {
  body.ff-modern #calc-overlay,
  body.ff-modern #calc-overlay *,
  body.ff-modern #calc-overlay *::before,
  body.ff-modern #calc-overlay *::after,
  body.ff-modern #calc-deals-modal,
  body.ff-modern #calc-deals-modal *,
  body.ff-modern [id^="calc-"],
  body.ff-modern [id^="calc-"] *,
  body.ff-modern #heron-alerts-modal,
  body.ff-modern #heron-alerts-modal *,
  body.ff-modern #deals-send-modal,
  body.ff-modern #deals-send-modal *,
  body.ff-modern #ff-bar,
  body.ff-modern #ff-bar * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ====================================================================================================
   17. CHART ISLAND — the Daily Balance chart (#calc-bal-svg inside #calc-bal-wrap) self-paints for
   a LIGHT background (fill=/stroke= presentation attributes: #22c55e area, #0f172a lastMark,
   #94a3b8 axis…). CSS must never repaint its internals, so the WRAPPER becomes a light framed
   island on the dark card. The tooltip (#calc-bal-tip, inline bg #0f172a + light text) and the
   dark hero band above the chart (inline linear-gradient(135deg,#0f172a,#1e293b)) already match
   the dark theme and are deliberately untouched.
   SVG safety: no rule in this file targets svg/text/[fill]/[stroke], and every remap selector in
   sections 18-20 keys on inline style="" text that the SVG nodes do not carry — the island is
   excluded from the remap layer by construction. */
body.ff-modern #calc-overlay #calc-bal-wrap {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 12px;
  padding: 6px;
}

/* ====================================================================================================
   18. INLINE-HEX REMAP LAYER — TEXT COLORS.
   Mechanism: calc.js writes light-theme text hexes into inline style="" attributes (~1,185 attrs,
   both static template hexes and runtime ternaries — the attribute selector matches either).
   Scope = the 3 calc containers ONLY (#calc-overlay / calc-* modals / #heron-pull-modal) so the
   light shell is untouched. Anchored two ways per hex (see header): [style^="color:#HEX"] and
   [style*=";color:#HEX"] — NEVER bare [style*="color:#HEX"], which would substring-match inline
   border-color:#HEX longhands (14x border-color:#2563eb solid buttons etc.) and wreck their
   white-on-color text.
   !important throughout this layer: required to beat the inline style attribute — that is the
   entire mechanism.
   Deliberately NOT remapped (already AA on dark): #94a3b8 #cbd5e1 #e2e8f0 #fff text; hero-band
   accents #93c5fd #7dd3fc #bae6fd #fde68a #fca5a5 #fecaca #6ee7b7 #fbbf24 #10b981 #818cf8 #f59e0b
   #34d399 #fef3c7(text) #dcfce7(text) #eef5f4 #ffe08a/#3a2d00 toast pair.
   ==================================================================================================== */
/* — dark neutrals → light: headings/KPI values/strong td text (#0f172a 13.97:1) — */
body.ff-modern #calc-overlay [style^="color:#0f172a"],
body.ff-modern #calc-overlay [style*=";color:#0f172a"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#0f172a"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#0f172a"],
body.ff-modern #heron-pull-modal [style^="color:#0f172a"],
body.ff-modern #heron-pull-modal [style*=";color:#0f172a"],
body.ff-modern #calc-overlay [style^="color:#1e293b"],
body.ff-modern #calc-overlay [style*=";color:#1e293b"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#1e293b"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#1e293b"],
body.ff-modern #heron-pull-modal [style^="color:#1e293b"],
body.ff-modern #heron-pull-modal [style*=";color:#1e293b"],
body.ff-modern #calc-overlay [style^="color:#1f2937"],
body.ff-modern #calc-overlay [style*=";color:#1f2937"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#1f2937"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#1f2937"],
body.ff-modern #heron-pull-modal [style^="color:#1f2937"],
body.ff-modern #heron-pull-modal [style*=";color:#1f2937"] {
  color: #e2e8f0 !important;
}
/* — secondary text / bold labels (#475569, #334155 → 11.60:1) — */
body.ff-modern #calc-overlay [style^="color:#475569"],
body.ff-modern #calc-overlay [style*=";color:#475569"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#475569"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#475569"],
body.ff-modern #heron-pull-modal [style^="color:#475569"],
body.ff-modern #heron-pull-modal [style*=";color:#475569"],
body.ff-modern #calc-overlay [style^="color:#334155"],
body.ff-modern #calc-overlay [style*=";color:#334155"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#334155"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#334155"],
body.ff-modern #heron-pull-modal [style^="color:#334155"],
body.ff-modern #heron-pull-modal [style*=";color:#334155"] {
  color: #cbd5e1 !important;
}
/* — muted labels / sublines (#64748b → 6.72:1) — */
body.ff-modern #calc-overlay [style^="color:#64748b"],
body.ff-modern #calc-overlay [style*=";color:#64748b"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#64748b"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#64748b"],
body.ff-modern #heron-pull-modal [style^="color:#64748b"],
body.ff-modern #heron-pull-modal [style*=";color:#64748b"] {
  color: #94a3b8 !important;
}
/* — red family → #f87171 (6.23:1 card / 6.35:1 red tint) — */
body.ff-modern #calc-overlay [style^="color:#b91c1c"],
body.ff-modern #calc-overlay [style*=";color:#b91c1c"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#b91c1c"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#b91c1c"],
body.ff-modern #heron-pull-modal [style^="color:#b91c1c"],
body.ff-modern #heron-pull-modal [style*=";color:#b91c1c"],
body.ff-modern #calc-overlay [style^="color:#dc2626"],
body.ff-modern #calc-overlay [style*=";color:#dc2626"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#dc2626"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#dc2626"],
body.ff-modern #heron-pull-modal [style^="color:#dc2626"],
body.ff-modern #heron-pull-modal [style*=";color:#dc2626"],
body.ff-modern #calc-overlay [style^="color:#991b1b"],
body.ff-modern #calc-overlay [style*=";color:#991b1b"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#991b1b"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#991b1b"],
body.ff-modern #heron-pull-modal [style^="color:#991b1b"],
body.ff-modern #heron-pull-modal [style*=";color:#991b1b"],
body.ff-modern #calc-overlay [style^="color:#7f1d1d"],
body.ff-modern #calc-overlay [style*=";color:#7f1d1d"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#7f1d1d"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#7f1d1d"],
body.ff-modern #heron-pull-modal [style^="color:#7f1d1d"],
body.ff-modern #heron-pull-modal [style*=";color:#7f1d1d"],
body.ff-modern #calc-overlay [style^="color:#d9534f"],
body.ff-modern #calc-overlay [style*=";color:#d9534f"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#d9534f"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#d9534f"],
body.ff-modern #heron-pull-modal [style^="color:#d9534f"],
body.ff-modern #heron-pull-modal [style*=";color:#d9534f"],
body.ff-modern #calc-overlay [style^="color:#ef4444"],
body.ff-modern #calc-overlay [style*=";color:#ef4444"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#ef4444"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#ef4444"],
body.ff-modern #heron-pull-modal [style^="color:#ef4444"],
body.ff-modern #heron-pull-modal [style*=";color:#ef4444"] {
  color: #f87171 !important;
}
/* — rose family → #fb7185 (6.40:1) — */
body.ff-modern #calc-overlay [style^="color:#9f1239"],
body.ff-modern #calc-overlay [style*=";color:#9f1239"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#9f1239"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#9f1239"],
body.ff-modern #heron-pull-modal [style^="color:#9f1239"],
body.ff-modern #heron-pull-modal [style*=";color:#9f1239"],
body.ff-modern #calc-overlay [style^="color:#be123c"],
body.ff-modern #calc-overlay [style*=";color:#be123c"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#be123c"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#be123c"],
body.ff-modern #heron-pull-modal [style^="color:#be123c"],
body.ff-modern #heron-pull-modal [style*=";color:#be123c"] {
  color: #fb7185 !important;
}
/* — pink (dynamic-only #ec4899) → #f9a8d4 (9.50:1) — */
body.ff-modern #calc-overlay [style^="color:#ec4899"],
body.ff-modern #calc-overlay [style*=";color:#ec4899"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#ec4899"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#ec4899"],
body.ff-modern #heron-pull-modal [style^="color:#ec4899"],
body.ff-modern #heron-pull-modal [style*=";color:#ec4899"] {
  color: #f9a8d4 !important;
}
/* — green family → #4ade80 (9.88:1 card / 8.80:1 green tint; also brightens the Healthy band-tile
   numbers flagged in the scan's G section) — */
body.ff-modern #calc-overlay [style^="color:#16a34a"],
body.ff-modern #calc-overlay [style*=";color:#16a34a"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#16a34a"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#16a34a"],
body.ff-modern #heron-pull-modal [style^="color:#16a34a"],
body.ff-modern #heron-pull-modal [style*=";color:#16a34a"],
body.ff-modern #calc-overlay [style^="color:#15803d"],
body.ff-modern #calc-overlay [style*=";color:#15803d"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#15803d"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#15803d"],
body.ff-modern #heron-pull-modal [style^="color:#15803d"],
body.ff-modern #heron-pull-modal [style*=";color:#15803d"],
body.ff-modern #calc-overlay [style^="color:#166534"],
body.ff-modern #calc-overlay [style*=";color:#166534"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#166534"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#166534"],
body.ff-modern #heron-pull-modal [style^="color:#166534"],
body.ff-modern #heron-pull-modal [style*=";color:#166534"],
body.ff-modern #calc-overlay [style^="color:#065f46"],
body.ff-modern #calc-overlay [style*=";color:#065f46"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#065f46"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#065f46"],
body.ff-modern #heron-pull-modal [style^="color:#065f46"],
body.ff-modern #heron-pull-modal [style*=";color:#065f46"],
body.ff-modern #calc-overlay [style^="color:#047857"],
body.ff-modern #calc-overlay [style*=";color:#047857"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#047857"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#047857"],
body.ff-modern #heron-pull-modal [style^="color:#047857"],
body.ff-modern #heron-pull-modal [style*=";color:#047857"],
body.ff-modern #calc-overlay [style^="color:#059669"],
body.ff-modern #calc-overlay [style*=";color:#059669"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#059669"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#059669"],
body.ff-modern #heron-pull-modal [style^="color:#059669"],
body.ff-modern #heron-pull-modal [style*=";color:#059669"],
body.ff-modern #calc-overlay [style^="color:#22c55e"],
body.ff-modern #calc-overlay [style*=";color:#22c55e"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#22c55e"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#22c55e"],
body.ff-modern #heron-pull-modal [style^="color:#22c55e"],
body.ff-modern #heron-pull-modal [style*=";color:#22c55e"] {
  color: #4ade80 !important;
}
/* — lime (dynamic-only #65a30d) → #a3e635 (11.42:1) — */
body.ff-modern #calc-overlay [style^="color:#65a30d"],
body.ff-modern #calc-overlay [style*=";color:#65a30d"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#65a30d"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#65a30d"],
body.ff-modern #heron-pull-modal [style^="color:#65a30d"],
body.ff-modern #heron-pull-modal [style*=";color:#65a30d"] {
  color: #a3e635 !important;
}
/* — teal/brand family → #5eead4 (11.64:1, the landing's money-positive teal) — */
body.ff-modern #calc-overlay [style^="color:#0f766e"],
body.ff-modern #calc-overlay [style*=";color:#0f766e"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#0f766e"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#0f766e"],
body.ff-modern #heron-pull-modal [style^="color:#0f766e"],
body.ff-modern #heron-pull-modal [style*=";color:#0f766e"],
body.ff-modern #calc-overlay [style^="color:#0d9488"],
body.ff-modern #calc-overlay [style*=";color:#0d9488"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#0d9488"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#0d9488"],
body.ff-modern #heron-pull-modal [style^="color:#0d9488"],
body.ff-modern #heron-pull-modal [style*=";color:#0d9488"],
body.ff-modern #calc-overlay [style^="color:#0e7490"],
body.ff-modern #calc-overlay [style*=";color:#0e7490"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#0e7490"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#0e7490"],
body.ff-modern #heron-pull-modal [style^="color:#0e7490"],
body.ff-modern #heron-pull-modal [style*=";color:#0e7490"],
body.ff-modern #calc-overlay [style^="color:#0891b2"],
body.ff-modern #calc-overlay [style*=";color:#0891b2"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#0891b2"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#0891b2"],
body.ff-modern #heron-pull-modal [style^="color:#0891b2"],
body.ff-modern #heron-pull-modal [style*=";color:#0891b2"],
body.ff-modern #calc-overlay [style^="color:#14b8a6"],
body.ff-modern #calc-overlay [style*=";color:#14b8a6"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#14b8a6"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#14b8a6"],
body.ff-modern #heron-pull-modal [style^="color:#14b8a6"],
body.ff-modern #heron-pull-modal [style*=";color:#14b8a6"] {
  color: #5eead4 !important;
}
/* — amber family → #fbbf24 (10.32:1 card / 9.11:1 amber tint) — */
body.ff-modern #calc-overlay [style^="color:#92400e"],
body.ff-modern #calc-overlay [style*=";color:#92400e"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#92400e"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#92400e"],
body.ff-modern #heron-pull-modal [style^="color:#92400e"],
body.ff-modern #heron-pull-modal [style*=";color:#92400e"],
body.ff-modern #calc-overlay [style^="color:#b45309"],
body.ff-modern #calc-overlay [style*=";color:#b45309"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#b45309"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#b45309"],
body.ff-modern #heron-pull-modal [style^="color:#b45309"],
body.ff-modern #heron-pull-modal [style*=";color:#b45309"],
body.ff-modern #calc-overlay [style^="color:#d97706"],
body.ff-modern #calc-overlay [style*=";color:#d97706"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#d97706"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#d97706"],
body.ff-modern #heron-pull-modal [style^="color:#d97706"],
body.ff-modern #heron-pull-modal [style*=";color:#d97706"] {
  color: #fbbf24 !important;
}
/* — orange family → #fdba74 (10.21:1) — */
body.ff-modern #calc-overlay [style^="color:#ea580c"],
body.ff-modern #calc-overlay [style*=";color:#ea580c"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#ea580c"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#ea580c"],
body.ff-modern #heron-pull-modal [style^="color:#ea580c"],
body.ff-modern #heron-pull-modal [style*=";color:#ea580c"],
body.ff-modern #calc-overlay [style^="color:#9a3412"],
body.ff-modern #calc-overlay [style*=";color:#9a3412"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#9a3412"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#9a3412"],
body.ff-modern #heron-pull-modal [style^="color:#9a3412"],
body.ff-modern #heron-pull-modal [style*=";color:#9a3412"],
body.ff-modern #calc-overlay [style^="color:#7c2d12"],
body.ff-modern #calc-overlay [style*=";color:#7c2d12"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#7c2d12"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#7c2d12"],
body.ff-modern #heron-pull-modal [style^="color:#7c2d12"],
body.ff-modern #heron-pull-modal [style*=";color:#7c2d12"] {
  color: #fdba74 !important;
}
/* — violet/indigo family → #c4b5fd (9.33:1 card / 8.63:1 indigo tint) — */
body.ff-modern #calc-overlay [style^="color:#7c3aed"],
body.ff-modern #calc-overlay [style*=";color:#7c3aed"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#7c3aed"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#7c3aed"],
body.ff-modern #heron-pull-modal [style^="color:#7c3aed"],
body.ff-modern #heron-pull-modal [style*=";color:#7c3aed"],
body.ff-modern #calc-overlay [style^="color:#6d28d9"],
body.ff-modern #calc-overlay [style*=";color:#6d28d9"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#6d28d9"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#6d28d9"],
body.ff-modern #heron-pull-modal [style^="color:#6d28d9"],
body.ff-modern #heron-pull-modal [style*=";color:#6d28d9"],
body.ff-modern #calc-overlay [style^="color:#5b21b6"],
body.ff-modern #calc-overlay [style*=";color:#5b21b6"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#5b21b6"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#5b21b6"],
body.ff-modern #heron-pull-modal [style^="color:#5b21b6"],
body.ff-modern #heron-pull-modal [style*=";color:#5b21b6"],
body.ff-modern #calc-overlay [style^="color:#3730a3"],
body.ff-modern #calc-overlay [style*=";color:#3730a3"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#3730a3"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#3730a3"],
body.ff-modern #heron-pull-modal [style^="color:#3730a3"],
body.ff-modern #heron-pull-modal [style*=";color:#3730a3"],
body.ff-modern #calc-overlay [style^="color:#4338ca"],
body.ff-modern #calc-overlay [style*=";color:#4338ca"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#4338ca"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#4338ca"],
body.ff-modern #heron-pull-modal [style^="color:#4338ca"],
body.ff-modern #heron-pull-modal [style*=";color:#4338ca"],
body.ff-modern #calc-overlay [style^="color:#4f46e5"],
body.ff-modern #calc-overlay [style*=";color:#4f46e5"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#4f46e5"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#4f46e5"],
body.ff-modern #heron-pull-modal [style^="color:#4f46e5"],
body.ff-modern #heron-pull-modal [style*=";color:#4f46e5"],
body.ff-modern #calc-overlay [style^="color:#6366f1"],
body.ff-modern #calc-overlay [style*=";color:#6366f1"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#6366f1"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#6366f1"],
body.ff-modern #heron-pull-modal [style^="color:#6366f1"],
body.ff-modern #heron-pull-modal [style*=";color:#6366f1"],
body.ff-modern #calc-overlay [style^="color:#9333ea"],
body.ff-modern #calc-overlay [style*=";color:#9333ea"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#9333ea"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#9333ea"],
body.ff-modern #heron-pull-modal [style^="color:#9333ea"],
body.ff-modern #heron-pull-modal [style*=";color:#9333ea"],
body.ff-modern #calc-overlay [style^="color:#a855f7"],
body.ff-modern #calc-overlay [style*=";color:#a855f7"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#a855f7"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#a855f7"],
body.ff-modern #heron-pull-modal [style^="color:#a855f7"],
body.ff-modern #heron-pull-modal [style*=";color:#a855f7"] {
  color: #c4b5fd !important;
}
/* — blue family → #93c5fd (9.55:1 card / 8.70:1 blue tint) — */
body.ff-modern #calc-overlay [style^="color:#2563eb"],
body.ff-modern #calc-overlay [style*=";color:#2563eb"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#2563eb"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#2563eb"],
body.ff-modern #heron-pull-modal [style^="color:#2563eb"],
body.ff-modern #heron-pull-modal [style*=";color:#2563eb"],
body.ff-modern #calc-overlay [style^="color:#1d4ed8"],
body.ff-modern #calc-overlay [style*=";color:#1d4ed8"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#1d4ed8"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#1d4ed8"],
body.ff-modern #heron-pull-modal [style^="color:#1d4ed8"],
body.ff-modern #heron-pull-modal [style*=";color:#1d4ed8"],
body.ff-modern #calc-overlay [style^="color:#1e40af"],
body.ff-modern #calc-overlay [style*=";color:#1e40af"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#1e40af"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#1e40af"],
body.ff-modern #heron-pull-modal [style^="color:#1e40af"],
body.ff-modern #heron-pull-modal [style*=";color:#1e40af"],
body.ff-modern #calc-overlay [style^="color:#1e3a8a"],
body.ff-modern #calc-overlay [style*=";color:#1e3a8a"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#1e3a8a"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#1e3a8a"],
body.ff-modern #heron-pull-modal [style^="color:#1e3a8a"],
body.ff-modern #heron-pull-modal [style*=";color:#1e3a8a"],
body.ff-modern #calc-overlay [style^="color:#3b82f6"],
body.ff-modern #calc-overlay [style*=";color:#3b82f6"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#3b82f6"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#3b82f6"],
body.ff-modern #heron-pull-modal [style^="color:#3b82f6"],
body.ff-modern #heron-pull-modal [style*=";color:#3b82f6"] {
  color: #93c5fd !important;
}
/* — sky family → #7dd3fc (10.33:1) — */
body.ff-modern #calc-overlay [style^="color:#0369a1"],
body.ff-modern #calc-overlay [style*=";color:#0369a1"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#0369a1"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#0369a1"],
body.ff-modern #heron-pull-modal [style^="color:#0369a1"],
body.ff-modern #heron-pull-modal [style*=";color:#0369a1"],
body.ff-modern #calc-overlay [style^="color:#0ea5e9"],
body.ff-modern #calc-overlay [style*=";color:#0ea5e9"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#0ea5e9"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#0ea5e9"],
body.ff-modern #heron-pull-modal [style^="color:#0ea5e9"],
body.ff-modern #heron-pull-modal [style*=";color:#0ea5e9"] {
  color: #7dd3fc !important;
}

/* ====================================================================================================
   19. INLINE-HEX REMAP LAYER — BACKGROUNDS.
   "background:#HEX" is unambiguous (calc.js has zero background-color:# — verified), so no
   anchoring needed. ORDER MATTERS: [style*="background:#fff"] prefix-matches #fffbeb/#fff7ed/
   #fff1f2/#fffafa/#fff7f7 too — the TINT rules come after and win the tie (equal specificity,
   later source order). !important throughout: beats the inline attribute (the mechanism).
   Deliberately NOT remapped: solid saturated button/badge bgs (#2563eb/#7c3aed/#dc2626/#0f766e/…
   — white-text pairs, information); already-dark slates (#0f172a sticky header/tooltips/FAB,
   #1e293b, #0b1220, dark gradients, the update-toast #3a2d00/#ffe08a pair); rgba() veils and
   on-dark white washes; the Summary revenue mini-bar gradient (#10b981→#059669, div-based, reads
   fine on dark).
   ==================================================================================================== */
/* — white / near-white cards, modal bodies, active tab-pills → card navy — */
body.ff-modern #calc-overlay [style*="background:#fff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fff"],
body.ff-modern #heron-pull-modal [style*="background:#fff"],
body.ff-modern #calc-overlay [style*="background:#fafafa"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fafafa"],
body.ff-modern #heron-pull-modal [style*="background:#fafafa"],
body.ff-modern #calc-overlay [style*="background:#f4f7f8"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#f4f7f8"],
body.ff-modern #heron-pull-modal [style*="background:#f4f7f8"] {
  background: #111a33 !important;
}
/* — the one white header gradient — */
body.ff-modern #calc-overlay [style*="linear-gradient(180deg,#ffffff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="linear-gradient(180deg,#ffffff"],
body.ff-modern #heron-pull-modal [style*="linear-gradient(180deg,#ffffff"] {
  background: linear-gradient(180deg, #111a33 0%, #0e1730 100%) !important;
}
/* — table th / subcard footers / total rows / NOTE callout → soft — */
body.ff-modern #calc-overlay [style*="background:#f8fafc"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#f8fafc"],
body.ff-modern #heron-pull-modal [style*="background:#f8fafc"] {
  background: #16203d !important;
}
/* — code chips / "All accounts" total row → sunken — */
body.ff-modern #calc-overlay [style*="background:#f1f5f9"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#f1f5f9"],
body.ff-modern #heron-pull-modal [style*="background:#f1f5f9"] {
  background: #1c2742 !important;
}
/* — pressed chips → raised slate — */
body.ff-modern #calc-overlay [style*="background:#e2e8f0"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#e2e8f0"],
body.ff-modern #heron-pull-modal [style*="background:#e2e8f0"] {
  background: #223052 !important;
}
/* — TINT PACKS (each pairs with its brightened text family; ratios in header) —
   amber warn/stale (#fffbeb/#fef3c7/#fff7ed — the #fff-prefixed ones MUST stay below the white
   rule to win its prefix match): */
body.ff-modern #calc-overlay [style*="background:#fffbeb"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fffbeb"],
body.ff-modern #heron-pull-modal [style*="background:#fffbeb"],
body.ff-modern #calc-overlay [style*="background:#fef3c7"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fef3c7"],
body.ff-modern #heron-pull-modal [style*="background:#fef3c7"],
body.ff-modern #calc-overlay [style*="background:#fff7ed"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fff7ed"],
body.ff-modern #heron-pull-modal [style*="background:#fff7ed"] {
  background: #2f2410 !important;
}
/* yellow editable (the one INLINE background:#fef9c3; the .calc-yellow class case is section 9) */
body.ff-modern #calc-overlay [style*="background:#fef9c3"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fef9c3"],
body.ff-modern #heron-pull-modal [style*="background:#fef9c3"] {
  background: #3a2f14 !important;
}
/* red tint (WATCH callout, MCA chip; #fff1f2 below the white rule on purpose) */
body.ff-modern #calc-overlay [style*="background:#fef2f2"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fef2f2"],
body.ff-modern #heron-pull-modal [style*="background:#fef2f2"],
body.ff-modern #calc-overlay [style*="background:#fee2e2"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fee2e2"],
body.ff-modern #heron-pull-modal [style*="background:#fee2e2"],
body.ff-modern #calc-overlay [style*="background:#fff1f2"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fff1f2"],
body.ff-modern #heron-pull-modal [style*="background:#fff1f2"] {
  background: #2a1214 !important;
}
/* green tint (STRENGTH callout, truerev chip) */
body.ff-modern #calc-overlay [style*="background:#dcfce7"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#dcfce7"],
body.ff-modern #heron-pull-modal [style*="background:#dcfce7"],
body.ff-modern #calc-overlay [style*="background:#f0fdf4"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#f0fdf4"],
body.ff-modern #heron-pull-modal [style*="background:#f0fdf4"],
body.ff-modern #calc-overlay [style*="background:#ecfdf5"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#ecfdf5"],
body.ff-modern #heron-pull-modal [style*="background:#ecfdf5"],
body.ff-modern #calc-overlay [style*="background:#d1fae5"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#d1fae5"],
body.ff-modern #heron-pull-modal [style*="background:#d1fae5"],
body.ff-modern #calc-overlay [style*="background:#f0fdfa"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#f0fdfa"],
body.ff-modern #heron-pull-modal [style*="background:#f0fdfa"] {
  background: #0f2a1d !important;
}
/* blue/sky tint */
body.ff-modern #calc-overlay [style*="background:#eff6ff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#eff6ff"],
body.ff-modern #heron-pull-modal [style*="background:#eff6ff"],
body.ff-modern #calc-overlay [style*="background:#dbeafe"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#dbeafe"],
body.ff-modern #heron-pull-modal [style*="background:#dbeafe"],
body.ff-modern #calc-overlay [style*="background:#f0f9ff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#f0f9ff"],
body.ff-modern #heron-pull-modal [style*="background:#f0f9ff"],
body.ff-modern #calc-overlay [style*="background:#bfdbfe"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#bfdbfe"],
body.ff-modern #heron-pull-modal [style*="background:#bfdbfe"],
body.ff-modern #calc-overlay [style*="background:#bae6fd"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#bae6fd"],
body.ff-modern #heron-pull-modal [style*="background:#bae6fd"] {
  background: #12233f !important;
}
/* indigo/violet tint */
body.ff-modern #calc-overlay [style*="background:#eef2ff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#eef2ff"],
body.ff-modern #heron-pull-modal [style*="background:#eef2ff"],
body.ff-modern #calc-overlay [style*="background:#f5f3ff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#f5f3ff"],
body.ff-modern #heron-pull-modal [style*="background:#f5f3ff"],
body.ff-modern #calc-overlay [style*="background:#ede9fe"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#ede9fe"],
body.ff-modern #heron-pull-modal [style*="background:#ede9fe"],
body.ff-modern #calc-overlay [style*="background:#faf5ff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#faf5ff"],
body.ff-modern #heron-pull-modal [style*="background:#faf5ff"],
body.ff-modern #calc-overlay [style*="background:#f3e8ff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#f3e8ff"],
body.ff-modern #heron-pull-modal [style*="background:#f3e8ff"],
body.ff-modern #calc-overlay [style*="background:#e0e7ff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#e0e7ff"],
body.ff-modern #heron-pull-modal [style*="background:#e0e7ff"] {
  background: #221c44 !important;
}
/* violet wash rgba(124,58,237,.12) → brighter wash for dark */
body.ff-modern #calc-overlay [style*="background:rgba(124,58,237"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:rgba(124,58,237"],
body.ff-modern #heron-pull-modal [style*="background:rgba(124,58,237"] {
  background: rgba(139, 92, 246, 0.16) !important;
}

/* ====================================================================================================
   20. INLINE-HEX REMAP LAYER — BORDERS.
   Selector key = "solid #HEX" (matches border/border-top/…-bottom/-left shorthands) plus the
   inline border-color:#HEX longhands where they exist. border-color:… !important overrides the
   color of every side — SAFE except on the two accent-combo shapes calc.js emits (a base #e2e8f0
   or #f1f5f9 border PLUS a dynamic colored accent side); those are guarded with :not() and get
   per-side rules so the semantic accent (information) survives.
   !important throughout: beats the inline attribute (the mechanism).
   Deliberately NOT remapped: strong semantic accent borders (#2563eb/#dc2626/#0f766e/#7c3aed/
   #b91c1c/#16a34a/#b45309/#0369a1/… full keep-list from the scan) — information, visible on dark.
   ==================================================================================================== */
/* — hairline card/th borders (#e2e8f0) — general case, accent combos excluded — */
body.ff-modern #calc-overlay [style*="solid #e2e8f0"]:not([style*="border-top:3px solid"]):not([style*="border-left:3px solid"]):not([style*="border-left:4px solid"]),
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #e2e8f0"]:not([style*="border-top:3px solid"]):not([style*="border-left:3px solid"]):not([style*="border-left:4px solid"]),
body.ff-modern #heron-pull-modal [style*="solid #e2e8f0"]:not([style*="border-top:3px solid"]):not([style*="border-left:3px solid"]):not([style*="border-left:4px solid"]),
body.ff-modern #calc-overlay [style*="border-color:#e2e8f0"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#e2e8f0"],
body.ff-modern #heron-pull-modal [style*="border-color:#e2e8f0"] {
  border-color: rgba(148, 163, 184, 0.16) !important;
}
/* accent-combo A: base #e2e8f0 border + border-top:3px solid <dynamic status color> (the
   Healthy/Risky/Poor/Negative band tiles) — dark-hairline the three plain sides only; the
   colored top edge (information) is never touched */
body.ff-modern #calc-overlay [style*="solid #e2e8f0"][style*="border-top:3px solid"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #e2e8f0"][style*="border-top:3px solid"] {
  border-left-color: rgba(148, 163, 184, 0.16) !important;
  border-right-color: rgba(148, 163, 184, 0.16) !important;
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}
/* accent-combo B: base #e2e8f0 border + border-left:3/4px solid <dynamic accent> */
body.ff-modern #calc-overlay [style*="solid #e2e8f0"][style*="border-left:3px solid"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #e2e8f0"][style*="border-left:3px solid"],
body.ff-modern #calc-overlay [style*="solid #e2e8f0"][style*="border-left:4px solid"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #e2e8f0"][style*="border-left:4px solid"] {
  border-top-color: rgba(148, 163, 184, 0.16) !important;
  border-right-color: rgba(148, 163, 184, 0.16) !important;
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}
/* — row dividers (#f1f5f9) — same guard shape (one combo: border-bottom divider + dynamic
   border-left:4px rating accent) — */
body.ff-modern #calc-overlay [style*="solid #f1f5f9"]:not([style*="border-left:4px solid"]),
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #f1f5f9"]:not([style*="border-left:4px solid"]),
body.ff-modern #heron-pull-modal [style*="solid #f1f5f9"]:not([style*="border-left:4px solid"]) {
  border-color: #1e2a47 !important;
}
body.ff-modern #calc-overlay [style*="solid #f1f5f9"][style*="border-left:4px solid"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #f1f5f9"][style*="border-left:4px solid"] {
  border-bottom-color: #1e2a47 !important;   /* the divider side; the 4px accent left edge survives */
}
/* — input borders (#cbd5e1) — incl. the inline border-color:#cbd5e1 longhand (funky category
   chips: background:#fff;color:#334155;border-color:#cbd5e1 — bg+text remap, border must follow) */
body.ff-modern #calc-overlay [style*="solid #cbd5e1"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #cbd5e1"],
body.ff-modern #heron-pull-modal [style*="solid #cbd5e1"],
body.ff-modern #calc-overlay [style*="border-color:#cbd5e1"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#cbd5e1"],
body.ff-modern #heron-pull-modal [style*="border-color:#cbd5e1"] {
  border-color: #33415e !important;
}
/* — mid-grey borders (#94a3b8) — */
body.ff-modern #calc-overlay [style*="solid #94a3b8"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #94a3b8"],
body.ff-modern #heron-pull-modal [style*="solid #94a3b8"] {
  border-color: #4c5a75 !important;
}
/* — misc light-grey hairlines — */
body.ff-modern #calc-overlay [style*="solid #eef2f6"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #eef2f6"],
body.ff-modern #calc-overlay [style*="solid #eef2f7"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #eef2f7"],
body.ff-modern #calc-overlay [style*="solid #eef3f5"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #eef3f5"],
body.ff-modern #calc-overlay [style*="solid #e6ebf2"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #e6ebf2"],
body.ff-modern #calc-overlay [style*="solid #e0e7ec"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #e0e7ec"],
body.ff-modern #calc-overlay [style*="solid #c6d1d6"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #c6d1d6"] {
  border-color: rgba(148, 163, 184, 0.16) !important;
}
/* — TINT BORDERS (pair with section 19 tint surfaces) —
   amber: */
body.ff-modern #calc-overlay [style*="solid #fde68a"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #fde68a"],
body.ff-modern #heron-pull-modal [style*="solid #fde68a"],
body.ff-modern #calc-overlay [style*="solid #fcd34d"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #fcd34d"],
body.ff-modern #heron-pull-modal [style*="solid #fcd34d"],
body.ff-modern #calc-overlay [style*="border-color:#fcd34d"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#fcd34d"] {
  border-color: #8a6d00 !important;
}
/* red: */
body.ff-modern #calc-overlay [style*="solid #fca5a5"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #fca5a5"],
body.ff-modern #heron-pull-modal [style*="solid #fca5a5"],
body.ff-modern #calc-overlay [style*="solid #fecaca"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #fecaca"],
body.ff-modern #heron-pull-modal [style*="solid #fecaca"],
body.ff-modern #calc-overlay [style*="solid #fecdd3"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #fecdd3"],
body.ff-modern #calc-overlay [style*="solid #fee2e2"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #fee2e2"],
body.ff-modern #heron-pull-modal [style*="solid #fee2e2"],
body.ff-modern #calc-overlay [style*="border-color:#fca5a5"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#fca5a5"],
body.ff-modern #calc-overlay [style*="border-color:#fecaca"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#fecaca"] {
  border-color: #7f1d1d !important;
}
/* green: */
body.ff-modern #calc-overlay [style*="solid #bbf7d0"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #bbf7d0"],
body.ff-modern #heron-pull-modal [style*="solid #bbf7d0"],
body.ff-modern #calc-overlay [style*="solid #a7f3d0"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #a7f3d0"],
body.ff-modern #calc-overlay [style*="solid #86efac"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #86efac"],
body.ff-modern #calc-overlay [style*="solid #6ee7b7"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #6ee7b7"],
body.ff-modern #calc-overlay [style*="border-color:#86efac"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#86efac"] {
  border-color: #14532d !important;
}
/* teal: */
body.ff-modern #calc-overlay [style*="solid #99f6e4"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #99f6e4"],
body.ff-modern #calc-overlay [style*="border-color:#99f6e4"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#99f6e4"] {
  border-color: #115e59 !important;
}
/* indigo/violet: */
body.ff-modern #calc-overlay [style*="solid #ddd6fe"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #ddd6fe"],
body.ff-modern #heron-pull-modal [style*="solid #ddd6fe"],
body.ff-modern #calc-overlay [style*="solid #c7d2fe"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #c7d2fe"],
body.ff-modern #calc-overlay [style*="solid #e9d5ff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #e9d5ff"],
body.ff-modern #calc-overlay [style*="solid #e0e7ff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #e0e7ff"],
body.ff-modern #calc-overlay [style*="border-color:#c7d2fe"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#c7d2fe"] {
  border-color: #3b3480 !important;
}
/* blue/sky: */
body.ff-modern #calc-overlay [style*="solid #bae6fd"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #bae6fd"],
body.ff-modern #calc-overlay [style*="solid #93c5fd"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #93c5fd"],
body.ff-modern #calc-overlay [style*="solid #bfdbfe"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #bfdbfe"],
body.ff-modern #calc-overlay [style*="border-color:#bfdbfe"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#bfdbfe"] {
  border-color: #1e40af !important;
}
/* orange: */
body.ff-modern #calc-overlay [style*="solid #fed7aa"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="solid #fed7aa"] {
  border-color: #7c2d12 !important;
}
/* — the ONE border-color:#fff (collab banner "Load latest": background:#fff;color:#7f1d1d;
   border-color:#fff — bg remaps to card navy, text to #f87171; the white ring would glow) — */
body.ff-modern #calc-overlay [style*="border-color:#fff"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="border-color:#fff"] {
  border-color: rgba(148, 163, 184, 0.28) !important;
}

/* ====================================================================================================
   21. REMAP-LAYER SCOPE EXTENSION — eleven BODY-APPENDED calc surfaces that none of the three main
   scopes match (found in the adversarial audit): #calc-ai-panel (AI Review side panel, root itself
   is background:#fff), #calc-reco-review + #calc-team-report (owner report panels),
   #heron-alerts-modal + #deals-send-modal (ids don't start with "calc-"), #calc-pdf-progress,
   #calc-funding-finder, #calc-arcorpus / #calc-armine / #calc-arkw (AR suite), #calc-drop-hint.
   All carry the SAME light-theme inline hexes as the main surfaces — the full remap families are
   re-declared here over :is(<roots>). Deliberately NOT added (already dark, self-consistent):
   #calc-server-busy (#3a2d00/#ffe08a amber toast pair), #calc-fund-peek (#0f172a tooltip),
   #calc-kill-overlay (#0f172a full-screen), the id-less fallback toast (section 13).
   Dark chrome INSIDE these panels (#0f172a sticky headers, #b91c1c alert header, the arcorpus
   #0369a1→#0e7490 gradient, rgba(255,255,255,.x) ghost buttons) is untouched — theme-matching.
   !important throughout: beats the inline style attribute (the layer's mechanism).
   ==================================================================================================== */
/* base: dark-scheme native widgets (armine checkboxes, deals-send input) + light INHERITED text for
   the few uncolored nodes (arcorpus Total-$ cells etc). Non-!important — inline colors still win. */
body.ff-modern #calc-ai-panel,
body.ff-modern #calc-drop-hint,
body.ff-modern #calc-reco-review,
body.ff-modern #calc-team-report,
body.ff-modern #heron-alerts-modal,
body.ff-modern #deals-send-modal,
body.ff-modern #calc-pdf-progress,
body.ff-modern #calc-funding-finder,
body.ff-modern #calc-arcorpus,
body.ff-modern #calc-armine,
body.ff-modern #calc-arkw {
  color: var(--text);
  color-scheme: dark;
}
/* focus parity with section 16 */
body.ff-modern :is(#calc-ai-panel, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}
/* — TEXT REMAPS (same families + anchors as section 18) — */
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#0f172a"], [style*=";color:#0f172a"], [style^="color:#1e293b"], [style*=";color:#1e293b"], [style^="color:#1f2937"], [style*=";color:#1f2937"]) {
  color: #e2e8f0 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#475569"], [style*=";color:#475569"], [style^="color:#334155"], [style*=";color:#334155"]) {
  color: #cbd5e1 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#64748b"], [style*=";color:#64748b"]) {
  color: #94a3b8 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#b91c1c"], [style*=";color:#b91c1c"], [style^="color:#dc2626"], [style*=";color:#dc2626"], [style^="color:#991b1b"], [style*=";color:#991b1b"], [style^="color:#7f1d1d"], [style*=";color:#7f1d1d"], [style^="color:#d9534f"], [style*=";color:#d9534f"], [style^="color:#ef4444"], [style*=";color:#ef4444"]) {
  color: #f87171 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#9f1239"], [style*=";color:#9f1239"], [style^="color:#be123c"], [style*=";color:#be123c"]) {
  color: #fb7185 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#ec4899"], [style*=";color:#ec4899"]) {
  color: #f9a8d4 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#16a34a"], [style*=";color:#16a34a"], [style^="color:#15803d"], [style*=";color:#15803d"], [style^="color:#166534"], [style*=";color:#166534"], [style^="color:#065f46"], [style*=";color:#065f46"], [style^="color:#047857"], [style*=";color:#047857"], [style^="color:#059669"], [style*=";color:#059669"], [style^="color:#22c55e"], [style*=";color:#22c55e"]) {
  color: #4ade80 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#65a30d"], [style*=";color:#65a30d"]) {
  color: #a3e635 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#0f766e"], [style*=";color:#0f766e"], [style^="color:#0d9488"], [style*=";color:#0d9488"], [style^="color:#0e7490"], [style*=";color:#0e7490"], [style^="color:#0891b2"], [style*=";color:#0891b2"], [style^="color:#14b8a6"], [style*=";color:#14b8a6"]) {
  color: #5eead4 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#92400e"], [style*=";color:#92400e"], [style^="color:#b45309"], [style*=";color:#b45309"], [style^="color:#d97706"], [style*=";color:#d97706"]) {
  color: #fbbf24 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#ea580c"], [style*=";color:#ea580c"], [style^="color:#9a3412"], [style*=";color:#9a3412"], [style^="color:#7c2d12"], [style*=";color:#7c2d12"]) {
  color: #fdba74 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#7c3aed"], [style*=";color:#7c3aed"], [style^="color:#6d28d9"], [style*=";color:#6d28d9"], [style^="color:#5b21b6"], [style*=";color:#5b21b6"], [style^="color:#3730a3"], [style*=";color:#3730a3"], [style^="color:#4338ca"], [style*=";color:#4338ca"], [style^="color:#4f46e5"], [style*=";color:#4f46e5"], [style^="color:#6366f1"], [style*=";color:#6366f1"], [style^="color:#9333ea"], [style*=";color:#9333ea"], [style^="color:#a855f7"], [style*=";color:#a855f7"]) {
  color: #c4b5fd !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#2563eb"], [style*=";color:#2563eb"], [style^="color:#1d4ed8"], [style*=";color:#1d4ed8"], [style^="color:#1e40af"], [style*=";color:#1e40af"], [style^="color:#1e3a8a"], [style*=";color:#1e3a8a"], [style^="color:#3b82f6"], [style*=";color:#3b82f6"]) {
  color: #93c5fd !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style^="color:#0369a1"], [style*=";color:#0369a1"], [style^="color:#0ea5e9"], [style*=";color:#0ea5e9"]) {
  color: #7dd3fc !important;
}
/* — BACKGROUND REMAPS (same families/order as section 19; root-self variant included because
   #calc-ai-panel's own cssText is background:#fff and #calc-drop-hint's is the violet wash) — */
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="background:#fff"], [style*="background:#fafafa"], [style*="background:#f4f7f8"]),
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw):is([style*="background:#fff"], [style*="background:#fafafa"], [style*="background:#f4f7f8"]) {
  background: #111a33 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="linear-gradient(180deg,#ffffff"] {
  background: linear-gradient(180deg, #111a33 0%, #0e1730 100%) !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#f8fafc"] {
  background: #16203d !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#f1f5f9"] {
  background: #1c2742 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#e2e8f0"] {
  background: #223052 !important;
}
/* the ONE light-bg button with NO inline color (deals-send Cancel): UA buttontext would be black
   on the remapped #223052 — give it a light face (non-!important: a future inline color wins) */
body.ff-modern #deals-send-modal button[style*="background:#e2e8f0"] {
  color: #f1f5f9;
}
/* tints (AFTER the #fff prefix rule, same as section 19) */
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="background:#fffbeb"], [style*="background:#fef3c7"], [style*="background:#fff7ed"]) {
  background: #2f2410 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#fef9c3"] {
  background: #3a2f14 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="background:#fef2f2"], [style*="background:#fee2e2"], [style*="background:#fff1f2"]) {
  background: #2a1214 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="background:#dcfce7"], [style*="background:#f0fdf4"], [style*="background:#ecfdf5"], [style*="background:#d1fae5"], [style*="background:#f0fdfa"]) {
  background: #0f2a1d !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="background:#eff6ff"], [style*="background:#dbeafe"], [style*="background:#f0f9ff"], [style*="background:#bfdbfe"], [style*="background:#bae6fd"]) {
  background: #12233f !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="background:#eef2ff"], [style*="background:#f5f3ff"], [style*="background:#ede9fe"], [style*="background:#faf5ff"], [style*="background:#f3e8ff"], [style*="background:#e0e7ff"]) {
  background: #221c44 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:rgba(124,58,237"],
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw)[style*="background:rgba(124,58,237"] {
  background: rgba(139, 92, 246, 0.16) !important;
}
/* — BORDER REMAPS (same families/guards as section 20) — */
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="solid #e2e8f0"]:not([style*="border-top:3px solid"]):not([style*="border-left:3px solid"]):not([style*="border-left:4px solid"]),
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="border-color:#e2e8f0"],
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="solid #eef2f6"], [style*="solid #eef2f7"], [style*="solid #eef3f5"], [style*="solid #e6ebf2"], [style*="solid #e0e7ec"], [style*="solid #c6d1d6"]) {
  border-color: rgba(148, 163, 184, 0.16) !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="solid #e2e8f0"][style*="border-top:3px solid"] {
  border-left-color: rgba(148, 163, 184, 0.16) !important;
  border-right-color: rgba(148, 163, 184, 0.16) !important;
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="solid #e2e8f0"][style*="border-left:3px solid"], [style*="solid #e2e8f0"][style*="border-left:4px solid"]) {
  border-top-color: rgba(148, 163, 184, 0.16) !important;
  border-right-color: rgba(148, 163, 184, 0.16) !important;
  border-bottom-color: rgba(148, 163, 184, 0.16) !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="solid #f1f5f9"]:not([style*="border-left:4px solid"]) {
  border-color: #1e2a47 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="solid #f1f5f9"][style*="border-left:4px solid"] {
  border-bottom-color: #1e2a47 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="solid #cbd5e1"], [style*="border-color:#cbd5e1"]) {
  border-color: #33415e !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="solid #94a3b8"] {
  border-color: #4c5a75 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="solid #fde68a"], [style*="solid #fcd34d"], [style*="border-color:#fcd34d"]) {
  border-color: #8a6d00 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="solid #fca5a5"], [style*="solid #fecaca"], [style*="solid #fecdd3"], [style*="solid #fee2e2"], [style*="border-color:#fca5a5"], [style*="border-color:#fecaca"]) {
  border-color: #7f1d1d !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="solid #bbf7d0"], [style*="solid #a7f3d0"], [style*="solid #86efac"], [style*="solid #6ee7b7"], [style*="border-color:#86efac"]) {
  border-color: #14532d !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="solid #99f6e4"], [style*="border-color:#99f6e4"]) {
  border-color: #115e59 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="solid #ddd6fe"], [style*="solid #c7d2fe"], [style*="solid #e9d5ff"], [style*="solid #e0e7ff"], [style*="border-color:#c7d2fe"]) {
  border-color: #3b3480 !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="solid #bae6fd"], [style*="solid #93c5fd"], [style*="solid #bfdbfe"], [style*="border-color:#bfdbfe"]) {
  border-color: #1e40af !important;
}
body.ff-modern :is(#calc-ai-panel, #calc-drop-hint, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="solid #fed7aa"] {
  border-color: #7c2d12 !important;
}

/* ====================================================================================================
   22. AA POLISH — solid saturated chip/button/badge hues whose 9-13px WHITE text is < 4.5:1
   (#16a34a 3.29, #0891b2 3.68, #059669 3.76, #0d9488 3.75, #d97706 3.18, #ea580c 3.56,
   #f59e0b 2.15, #0ea5e9 2.77 — classic carries the same ratios, but the dark skin is held to AA):
   ONE shade darker in the SAME hue family, border follows the face. Naked progress-bar fills
   (background:#16a34a;border-radius / background:#0891b2;") carry NO ";border-color" / ";color:#fff"
   signature and keep their bright classic hue — bars have no text and read better bright on dark.
   The two light-ended gradient headers (AR miner amber, AR keywords green) get darker stops.
   ==================================================================================================== */
body.ff-modern :is(#calc-overlay, [id^="calc-"][id$="-modal"], #heron-pull-modal, #calc-ai-panel, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) :is([style*="background:#16a34a;border-color"], [style*="background:#16a34a;color:#fff"]) {
  background: #15803d !important;   /* #fff 5.02:1 */
  border-color: #15803d !important;
}
body.ff-modern :is(#calc-overlay, [id^="calc-"][id$="-modal"], #heron-pull-modal, #calc-ai-panel, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#0891b2;border-color"] {
  background: #0e7490 !important;   /* #fff 5.36:1 */
  border-color: #0e7490 !important;
}
body.ff-modern :is(#calc-overlay, [id^="calc-"][id$="-modal"], #heron-pull-modal, #calc-ai-panel, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#059669;color:#fff"] {
  background: #047857 !important;   /* #fff 5.49:1 */
}
body.ff-modern :is(#calc-overlay, [id^="calc-"][id$="-modal"], #heron-pull-modal, #calc-ai-panel, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#0d9488;border-color"] {
  background: #0f766e !important;   /* #fff 5.48:1 */
  border-color: #0f766e !important;
}
body.ff-modern :is(#calc-overlay, [id^="calc-"][id$="-modal"], #heron-pull-modal, #calc-ai-panel, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#ea580c;border-color"] {
  background: #c2410c !important;   /* #fff 5.19:1 */
  border-color: #c2410c !important;
}
body.ff-modern :is(#calc-overlay, [id^="calc-"][id$="-modal"], #heron-pull-modal, #calc-ai-panel, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#d97706;border-color"] {
  background: #b45309 !important;   /* #fff 5.02:1 */
  border-color: #b45309 !important;
}
body.ff-modern :is(#calc-overlay, [id^="calc-"][id$="-modal"], #heron-pull-modal, #calc-ai-panel, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#f59e0b;border-color"] {
  background: #b45309 !important;   /* #fff 5.02:1 */
  border-color: #b45309 !important;
}
body.ff-modern :is(#calc-overlay, [id^="calc-"][id$="-modal"], #heron-pull-modal, #calc-ai-panel, #calc-reco-review, #calc-team-report, #heron-alerts-modal, #deals-send-modal, #calc-pdf-progress, #calc-funding-finder, #calc-arcorpus, #calc-armine, #calc-arkw) [style*="background:#0ea5e9"] {
  background: #0369a1 !important;   /* presence badge, #fff 5.93:1 */
}
body.ff-modern :is(#calc-arcorpus, #calc-armine, #calc-arkw) [style*="linear-gradient(135deg,#b45309,#f59e0b)"] {
  background: linear-gradient(135deg, #92400e 0%, #b45309 100%) !important;  /* #fff 7.53/5.02, #fef3c7 sub 4.51+ */
}
body.ff-modern :is(#calc-arcorpus, #calc-armine, #calc-arkw) [style*="linear-gradient(135deg,#15803d,#16a34a)"] {
  background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;  /* #fff 7.15/5.02, #dcfce7 sub 4.57+ */
}

/* ============ FIX #1488 MOBILE (Meir's phone screenshot: funder-table columns overlapping at ~400px) ============
 * The Active-Funders fit-no-hscroll design squeezes columns until inline-width inputs overlap on phones. On small
 * screens the modern skin lets wide tables keep their natural width and SCROLL inside their card instead. */
@media (max-width: 700px) {
  body.ff-modern #calc-body .calc-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.ff-modern #calc-body .calc-card table { min-width: 840px; }
  body.ff-modern #calc-deals-modal table { min-width: 720px; }
  body.ff-modern #calc-deals-modal > div { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ==================================================================================================
   FIX #1497 COMFORT PASS (Meir: 'hard to see / not comfortable to read' — screenshots: Deal-Rating
   pillar tiles washed out, classify chips dim). Appended last so it wins equal-specificity ties.
   ROOT CAUSE 1: calc.js's own --slate-* tokens were never re-pointed — tiles kept LIGHT #f8fafc
   backgrounds (var(--slate-50)) while their inline text was remapped LIGHT -> light-on-light.
   ================================================================================================== */
body.ff-modern,
body.ff-modern #calc-overlay,
body.ff-modern [id^="calc-"][id$="-modal"],
body.ff-modern #heron-pull-modal {
  --slate-50: #1c2742;            /* tile / sunken surfaces (was #f8fafc) — dark, one step off the card */
  --slate-100: #223052;           /* hover / zebra (was #f1f5f9) */
  --slate-200: rgba(148,163,184,.24);   /* hairline borders (was #e2e8f0) */
  --slate-300: rgba(148,163,184,.38);   /* stronger borders (was #cbd5e1) */
  --slate-600: #a8b6cd;           /* secondary TEXT (was #475569 — unreadable on dark) */
  --slate-700: #cbd5e1;           /* strong secondary TEXT (was #334155) */
}
/* ROOT CAUSE 2: inactive classify/filter chips were dim slate-on-navy. Clear pill: readable text,
   visible border, faint fill; hover brightens. (.on re-asserted below — the v1 audit's fix wins.) */
body.ff-modern .calc-chip {
  color: #cbd5e1 !important;                        /* beats inline dim colors on the chip */
  border-color: rgba(148,163,184,.4) !important;
  background: rgba(148,163,184,.09);
}
body.ff-modern .calc-chip:hover { color: #f1f5f9 !important; border-color: rgba(148,163,184,.65) !important; }
body.ff-modern .calc-chip.on {
  background: var(--color-primary, #818cf8) !important;
  border-color: var(--color-primary, #818cf8) !important;
  color: #0b1120 !important;                        /* 6.3:1 on #818cf8 (white would fail) */
  font-weight: 800;
}
/* Muted 9-11px micro-labels (#64748b inline) one step brighter for small-size readability. */
body.ff-modern #calc-overlay [style^="color:#64748b"],
body.ff-modern #calc-overlay [style*=";color:#64748b"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#64748b"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#64748b"] { color: #a5b3c9 !important; }

/* ==================================================================================================
   FIX #1498 COVERAGE PASS — static hex audit of calc.js inline styles vs this skin's remaps.
   Every dark 'color:#' and light 'background:#' hex with 5+ occurrences was ALREADY covered by the
   existing blocks (verified 2026-07-09: 0 misses at the 5+ threshold). The holes below are the
   remaining sub-threshold ones that actually break on dark (near-white card glare / dark-on-dark
   text); same scopes + [style^=]/[style*=";..."] pattern as the main blocks.
   ================================================================================================== */
/* near-white red-tinted warning cards (escrow-flag calc-card #fffafa x2, sticky rail #fff7f7 x1) —
   fold into the existing red-tint dark family (#2a1214, same as #fef2f2/#fee2e2/#fff1f2). */
body.ff-modern #calc-overlay [style*="background:#fffafa"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fffafa"],
body.ff-modern #heron-pull-modal [style*="background:#fffafa"],
body.ff-modern #calc-overlay [style*="background:#fff7f7"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#fff7f7"],
body.ff-modern #heron-pull-modal [style*="background:#fff7f7"] {
  background: #2a1214 !important;
}
/* dark teal text #0f6e56 (COMPUTED offer card, x2) — unreadable on navy; join the teal text
   family (#0f766e/#0d9488 -> #5eead4). */
body.ff-modern #calc-overlay [style^="color:#0f6e56"],
body.ff-modern #calc-overlay [style*=";color:#0f6e56"],
body.ff-modern [id^="calc-"][id$="-modal"] [style^="color:#0f6e56"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*=";color:#0f6e56"],
body.ff-modern #heron-pull-modal [style^="color:#0f6e56"],
body.ff-modern #heron-pull-modal [style*=";color:#0f6e56"] {
  color: #5eead4 !important;
}


/* ====================================================================================================
   #1500 FORM-CONTROL PASS (Meir: "design still not easy" — the white "— set status —" dropdowns).
   calc.js writes inline background:#fff on two status <select>s and leaves the dashboard row <select>
   on the UA default (white). The inline color:#hex is already remapped light by the blocks above, which
   made LIGHT text on a WHITE pill. Dark the control itself; inline status-tinted border/color still win.
   ==================================================================================================== */
body.ff-modern #calc-overlay select,
body.ff-modern #calc-deals-modal select,
body.ff-modern [id^="calc-"][id$="-modal"] select,
body.ff-modern #heron-pull-modal select {
  background: #1c2742 !important;
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, .38);
}
/* the unrated dashboard grade dot: inline background:#cbd5e1 pill with a white glyph — invisible-on-light */
body.ff-modern #calc-overlay [style*="background:#cbd5e1"],
body.ff-modern #calc-deals-modal [style*="background:#cbd5e1"],
body.ff-modern [id^="calc-"][id$="-modal"] [style*="background:#cbd5e1"] {
  background: #3b4a6b !important;
}