/* =====================================================================
   state-tools-theme.css  —  one shared asset for the state tool family.

   WHY THIS FILE EXISTS
   The state tool pages (industry ROI calculators, health insurance cost
   calculators, cost projectors, workers' comp calculators, ICHRA and
   level-funded comparisons, state health plan pages) were each exported
   with their own inline stylesheet that defines its colour palette on
   :root with DARK values only. site-theme.css flips the page background
   to cream in light mode, but nothing ever reassigns those page-level
   variables, so the copy keeps painting near-white ink on a cream page.
   Measured on 2026-08-31: 68 to 203 real text nodes per page below the
   WCAG minimum in light mode, including H1s painted in exactly the
   background colour.

   These same variable names (--txt, --navy, --bg, --text) are used by
   roughly 300 pages OUTSIDE this family, so the overrides here are
   deliberately scoped to body[data-bf-template="..."] rather than being
   applied globally in site-theme.css. Only accent/brand variables are
   left untouched: each template keeps its own accent hue.

   Scoping pattern follows the already-live cobra-calculator-theme.css.
   ===================================================================== */

/* ---------- shared light palette for the family ----------
   Defined on EVERY marked body, including the related-only opt-in
   pages, because the related-tools rules below reference these
   custom properties. Declaring a custom property repaints nothing
   on its own; the rules that actually repaint the page are guarded. */
:root[data-theme="light"] body[data-bf-template] {
  --bf-lt-page: #f8f7f4;
  --bf-lt-surface: #ffffff;
  --bf-lt-surface-2: #f2f5f4;
  --bf-lt-ink: #0a1628;
  --bf-lt-ink-2: rgba(10, 22, 40, 0.80);
  --bf-lt-ink-3: rgba(10, 22, 40, 0.66);
  --bf-lt-border: rgba(10, 22, 40, 0.12);
  --bf-lt-border-soft: rgba(10, 22, 40, 0.08);
}

/* =====================================================================
   1. Industry ROI calculators   body[data-bf-template="roi"]
   Page palette: --bg --txt --t2 --t3 --brd (+ --gold* accents, kept).
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template="roi"] {
  --bg: var(--bf-lt-surface-2);
  --txt: var(--bf-lt-ink);
  --t2: var(--bf-lt-ink-2);
  --t3: var(--bf-lt-ink-3);
  --brd: var(--bf-lt-border);
  background: var(--bf-lt-page) !important;
  background-image: none !important;
  color: var(--bf-lt-ink) !important;
}
:root[data-theme="light"] body[data-bf-template="roi"]::before {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08), transparent 70%) !important;
}

/* =====================================================================
   2. Health insurance cost calculators  data-bf-template="health-cost"
   Page palette: --navy --navy-mid --txt --txt2 --txt3 --brd --glass.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template="health-cost"],
:root[data-theme="light"] body[data-bf-template="level-funded"] {
  --navy: var(--bf-lt-page);
  --navy-mid: var(--bf-lt-surface-2);
  --txt: var(--bf-lt-ink);
  --txt2: var(--bf-lt-ink-2);
  --txt3: var(--bf-lt-ink-3);
  --brd: var(--bf-lt-border);
  --glass: var(--bf-lt-surface);
  --glass-brd: var(--bf-lt-border);
  background: var(--bf-lt-page) !important;
  background-image: none !important;
  color: var(--bf-lt-ink) !important;
}

/* =====================================================================
   3. Health insurance cost projectors  data-bf-template="projector"
   Page palette: --bih-navy --bih-navy-mid --bih-slate --bih-txt
   --bih-t2 --bih-t3 --bih-brd  (--bih-gold* accents kept).
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template="projector"] {
  --bih-navy: var(--bf-lt-page);
  --bih-navy-mid: var(--bf-lt-surface-2);
  --bih-slate: var(--bf-lt-surface);
  --bih-txt: var(--bf-lt-ink);
  --bih-t2: var(--bf-lt-ink-2);
  --bih-t3: var(--bf-lt-ink-3);
  --bih-brd: var(--bf-lt-border);
  background: var(--bf-lt-page) !important;
  background-image: none !important;
  color: var(--bf-lt-ink) !important;
}

/* =====================================================================
   4. ICHRA comparison calculators  data-bf-template="ichra"
   Page palette: --bg --bg2 --card --border --text --muted.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template="ichra"] {
  --bg: var(--bf-lt-page);
  --bg2: var(--bf-lt-surface-2);
  --card: var(--bf-lt-surface);
  --border: var(--bf-lt-border);
  --text: var(--bf-lt-ink);
  --muted: var(--bf-lt-ink-2);
  background: var(--bf-lt-page) !important;
  background-image: none !important;
  color: var(--bf-lt-ink) !important;
}

/* =====================================================================
   5. Shared page chrome variables. Several templates carry the same
   --bf-chrome-* set for the breadcrumb / trust strip / footer chrome.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) {
  --bf-chrome-navy: var(--bf-lt-page);
  --bf-chrome-navy-2: var(--bf-lt-surface-2);
  --bf-chrome-border: var(--bf-lt-border);
  --bf-chrome-text: var(--bf-lt-ink);
  --bf-chrome-soft: var(--bf-lt-ink-2);
  --bf-chrome-faint: var(--bf-lt-ink-3);
}

/* =====================================================================
   6. DUPLICATE LEGACY NAV.  Several of these pages ship a React bundle
   (app.min.js) that renders its own position:fixed <nav class="bih-nav">
   on top of the canonical global header <nav class="nav" id="mainNav">
   that is already in the served HTML. The result is two headers stacked
   at y=0 and the BENEFITRA wordmark ghosting twice, in both themes.
   Reported by Abid 2026-08-31 with screen captures.

   The canonical header is kept: it is the site standard and it carries
   the theme toggle. Only the injected duplicate is suppressed, and it is
   suppressed for assistive tech too rather than just visually hidden.
   ===================================================================== */
body[data-bf-template] nav.bih-nav {
  display: none !important;
}

/* =====================================================================
   7. Related-tools block. The inline export hard-codes a dark navy band
   with bare inline links. In light mode that band stayed dark; in dark
   mode the links never became cards, so the two themes disagreed.
   This gives the same card treatment in BOTH themes, differing only in
   palette. Carried over from florida-linked-tools-theme.css, which this
   file replaces.
   ===================================================================== */
body[data-bf-template] .related-tools .rt-grid {
  gap: 10px 16px !important;
}
body[data-bf-template] .related-tools .rt-grid a,
body[data-bf-template] .related-tools .rt-grid a:visited {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none !important;
  transition: background-color .15s, border-color .15s, color .15s;
}
body[data-bf-template] .related-tools .rt-grid a::after {
  content: "\2192";
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  opacity: .75;
}

/* dark theme cards */
:root[data-theme="dark"] body[data-bf-template] .related-tools .rt-grid a,
:root[data-theme="dark"] body[data-bf-template] .related-tools .rt-grid a:visited {
  border: 1px solid rgba(248, 250, 252, 0.16) !important;
  background: rgba(248, 250, 252, 0.04) !important;
  color: rgba(248, 250, 252, 0.88) !important;
}
:root[data-theme="dark"] body[data-bf-template] .related-tools .rt-grid a:hover {
  border-color: #10b981 !important;
  background: rgba(16, 185, 129, 0.12) !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] body[data-bf-template] .related-tools .rt-grid a:focus-visible {
  outline: 3px solid #34d399 !important;
  outline-offset: 2px !important;
}

/* light theme cards, on a cream band */
:root[data-theme="light"] body[data-bf-template] .related-tools {
  background: #eef4f0 !important;
  border-top: 1px solid #cbd9d2 !important;
  color: var(--bf-lt-ink) !important;
}
:root[data-theme="light"] body[data-bf-template] .related-tools .rt-h {
  color: var(--bf-lt-ink) !important;
}
:root[data-theme="light"] body[data-bf-template] .related-tools .rt-grid a,
:root[data-theme="light"] body[data-bf-template] .related-tools .rt-grid a:visited {
  border: 1px solid #cbd9d2 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}
:root[data-theme="light"] body[data-bf-template] .related-tools .rt-grid a:hover {
  border-color: #059669 !important;
  background: #f0fdf7 !important;
  color: #04503a !important;
}
:root[data-theme="light"] body[data-bf-template] .related-tools .rt-grid a:focus-visible {
  outline: 3px solid #059669 !important;
  outline-offset: 2px !important;
}

/* =====================================================================
   8. LIGHT-MODE INK FOR THE REACT-RENDERED BODY.
   These pages render their content with Tailwind utility classes and,
   in the static sections, with inline style="color:#..." declarations.
   Neither follows the page variables, so overriding the variables alone
   left 68 text nodes failing. Measured on 2026-08-31: the exact set is
   text-white (and its /40 /50 /60 /70 /80 opacity variants), text-gray-400,
   text-slate-300/400, text-emerald-300/400, and five inline hex values.

   An !important author rule DOES outrank a non-important inline style,
   which is why the [style*="..."] selectors below work at all.

   The footer and the related-tools band stay dark by design in light
   mode (site-theme.css keeps footer ink white on navy), so both are
   re-asserted after this block rather than excluded with :not(), which
   keeps the cascade easy to reason about.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-white,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="text-white/8"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="text-white/7"] {
  color: var(--bf-lt-ink) !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="text-white/6"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="text-white/5"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="text-white/4"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="text-white/3"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-gray-400,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-gray-300,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-slate-300,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-slate-400 {
  color: var(--bf-lt-ink-3) !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-emerald-400,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-emerald-300,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-green-400 {
  color: #047857 !important;
}

/* inline colours emitted by the static sections of the export */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#cbd5e1"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color: #cbd5e1"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#e2e8f0"] {
  color: var(--bf-lt-ink-2) !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#94a3b8"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color: #94a3b8"] {
  color: var(--bf-lt-ink-3) !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#F8F7F4"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#f8f7f4"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#fff"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#ffffff"] {
  color: var(--bf-lt-ink) !important;
}
/* brand green as small text needs to go darker than #059669 to clear 4.5:1
   on cream; #34d399 is a dark-mode accent and fails outright at 1.79. */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#34d399"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#059669"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="color:#10b981"] {
  color: #04503a !important;
}

/* =====================================================================
   9. TRANSLUCENT PANELS NEED A REAL LIGHT SURFACE.
   The glass panels are rgba(255,255,255,.05-.14) over dark navy. Over a
   cream page they resolve to the page colour itself, so 72 of the 73
   failures measured on the trial page sat on the bare page rather than
   on a card. Giving them an opaque light surface restores the card
   hierarchy the dark design has.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .glass-card,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="bg-white/1"] {
  background: var(--bf-lt-surface) !important;
  border: 1px solid var(--bf-lt-border) !important;
}
/* The faintest tier (bg-white/5) is used for chips nested INSIDE a card.
   Painting those white too made the inner boundaries vanish on a white
   card, so they get a recessed surface instead and the hierarchy the
   dark design has is preserved. */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="bg-white/0"] {
  background: var(--bf-lt-surface-2) !important;
  border: 1px solid var(--bf-lt-border-soft) !important;
}

/* ---- re-assert the surfaces that stay dark in light mode ---- */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) footer .text-white,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) footer [class*="text-white/"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) footer [style*="color:#F8F7F4"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) footer [style*="color:#fff"] {
  color: rgba(255, 255, 255, 0.88) !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) footer .glass-card,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) footer [class*="bg-white/1"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) footer [class*="bg-white/0"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}

/* =====================================================================
   10. DARK-MODE ACCENT THAT IS NAVY ON NAVY.
   The page's Tailwind config maps `bih-green` to #0a1628, which is the
   dark page background itself, so any .text-bih-green link renders at a
   1.0 contrast ratio in dark mode. Measured on the trial page: the
   inline "BENEFITRA" link in the body copy was completely invisible.
   ===================================================================== */
:root[data-theme="dark"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-bih-green,
:root[data-theme="dark"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="text-bih-green"] {
  color: #34d399 !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .text-bih-green,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="text-bih-green"] {
  color: #04503a !important;
}

/* =====================================================================
   11. PER-TEMPLATE LIGHT PALETTES, COMPLETED.
   Sections 1 to 5 mapped the variables I found in each page's first
   :root block. Measuring afterwards showed each template paints through
   more names than that: workers' comp carries a full --text-primary /
   --text-secondary / --text-muted / --*-light set, and ICHRA and
   level-funded carry semantic accents. The names are NOT consistent in
   meaning across templates: --green is #10b981 on ICHRA, #0a1628 (navy)
   on the health cost calculator, and #C9A14A (gold) on level-funded.
   That is why accents are remapped per template and never globally.
   ===================================================================== */

/* ---- workers' compensation calculators ---- */
:root[data-theme="light"] body[data-bf-template="workers-comp"] {
  --navy: var(--bf-lt-page);
  --navy-mid: var(--bf-lt-surface-2);
  --navy-light: var(--bf-lt-surface-2);
  --glass-bg: var(--bf-lt-surface);
  --text-primary: var(--bf-lt-ink);
  --text-secondary: var(--bf-lt-ink-2);
  --text-muted: var(--bf-lt-ink-3);
  --border: var(--bf-lt-border);
  --green-bright: #047857;
  --red: #b91c1c;
  --red-light: #b91c1c;
  --amber: #b45309;
  --amber-light: #b45309;
  --blue: #1d4ed8;
  --blue-light: #1d4ed8;
  background: var(--bf-lt-page) !important;
  background-image: none !important;
  color: var(--bf-lt-ink) !important;
}

/* ---- ICHRA comparison: accents on top of the surfaces set earlier ---- */
:root[data-theme="light"] body[data-bf-template="ichra"] {
  --accent: #047857;
  --accent2: #04503a;
  --green: #047857;
  --red: #b91c1c;
  --gold: #8a6a12;
  --blue: #1d4ed8;
  --purple: #6d28d9;
}

/* ---- level-funded vs fully-insured: --green here is a GOLD ---- */
:root[data-theme="light"] body[data-bf-template="level-funded"] {
  --green: #7a5c0a;
  --green-l: #7a5c0a;
  --red: #b91c1c;
  --gold: #8a6a12;
  --blue: #1d4ed8;
  --purple: #6d28d9;
}

/* ---- health cost calculator and projector: blue insight panels ----
   These two hard-code the tailwind blue-300/blue-400 ramp inside their
   insight boxes, which is legible on navy and fails at 1.68 on cream. */
:root[data-theme="light"] body:is([data-bf-template="health-cost"], [data-bf-template="projector"]) .insight-box,
:root[data-theme="light"] body:is([data-bf-template="health-cost"], [data-bf-template="projector"]) .insight-box strong,
:root[data-theme="light"] body:is([data-bf-template="health-cost"], [data-bf-template="projector"]) .insight-text,
:root[data-theme="light"] body:is([data-bf-template="health-cost"], [data-bf-template="projector"]) [style*="color:#60a5fa"],
:root[data-theme="light"] body:is([data-bf-template="health-cost"], [data-bf-template="projector"]) [style*="color:#93c5fd"],
:root[data-theme="light"] body:is([data-bf-template="health-cost"], [data-bf-template="projector"]) [style*="color:#3b82f6"] {
  color: #1d4ed8 !important;
}
:root[data-theme="light"] body:is([data-bf-template="health-cost"], [data-bf-template="projector"]) [style*="color:#64748b"],
:root[data-theme="light"] body:is([data-bf-template="health-cost"], [data-bf-template="projector"]) [style*="color:#94a3b8"] {
  color: var(--bf-lt-ink-3) !important;
}
:root[data-theme="light"] body[data-bf-template="projector"] {
  --bih-gold-l: #047857;
}

/* =====================================================================
   12. FAINT WHITE TIERS THAT FAIL IN DARK MODE TOO.
   These are NOT light-mode regressions: measured against production on
   2026-08-31, rgba(255,255,255,0.25) footer text sits at 2.22:1 on the
   navy page and .quote-by at 0.45 alpha sits at 4.49:1, i.e. under the
   4.5 minimum, in DARK mode. The same faint tiers are unreadable in
   light mode for the opposite reason. Both themes are corrected.
   ===================================================================== */
:root[data-theme="dark"] body[data-bf-template] .footer-text,
:root[data-theme="dark"] body[data-bf-template] .quote-by,
:root[data-theme="dark"] body[data-bf-template] [class*="text-white/2"],
:root[data-theme="dark"] body[data-bf-template] [class*="text-white/3"],
:root[data-theme="dark"] body[data-bf-template] [class*="text-white/4"],
:root[data-theme="dark"] body[data-bf-template] [class*="text-white/5"],
:root[data-theme="dark"] body[data-bf-template] [style*="rgba(255,255,255,0.25)"],
:root[data-theme="dark"] body[data-bf-template] [style*="rgba(255,255,255,0.35)"],
:root[data-theme="dark"] body[data-bf-template] [style*="rgba(255, 255, 255, 0.25)"],
:root[data-theme="dark"] body[data-bf-template] [style*="rgba(255, 255, 255, 0.35)"] {
  color: rgba(255, 255, 255, 0.72) !important;
}
/* The footer band is NOT dark on every template. On the health cost
   calculator the footer is a plain .footer-area div with no background,
   so its text sits on the cream page and must be ink; on the ROI export
   it is a real <footer> element that site-theme.css keeps navy, so its
   text stays white. Both cases below, most specific last. */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .footer-text,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .footer-area,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .footer-area p,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .footer-area div,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .footer-area span,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .footer-area li,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .footer-area h4 {
  color: var(--bf-lt-ink-2) !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .footer-area a {
  color: #04503a !important;
}
:root[data-theme="light"] body[data-bf-template] footer .footer-text {
  color: rgba(255, 255, 255, 0.72) !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .quote-by,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="rgba(255,255,255,0.35)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="rgba(255, 255, 255, 0.35)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="rgba(255,255,255,0.45)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="rgba(255, 255, 255, 0.45)"] {
  color: var(--bf-lt-ink-3) !important;
}

/* =====================================================================
   13. WHITE TEXT ON A GOLD OR AMBER FILL.
   Measured in DARK mode on the level-funded pages: the primary CTA is
   white on #C9A14A at 2.42:1. Gold is a light fill in both themes, so
   the label has to be ink in both themes, not white.
   ===================================================================== */
body[data-bf-template="level-funded"] a[style*="background:#C9A14A"],
body[data-bf-template="level-funded"] button[style*="background:#C9A14A"],
body[data-bf-template="level-funded"] a[style*="background: #C9A14A"],
body[data-bf-template="level-funded"] button[style*="background: #C9A14A"],
body[data-bf-template="level-funded"] .btn-gold,
body[data-bf-template="level-funded"] .cta-gold {
  color: #241a00 !important;
}

/* =====================================================================
   14. LAST RESIDUES, EACH MEASURED INDIVIDUALLY.
   ===================================================================== */

/* Workers' comp hero and form labels hard-code faint white and sit on
   the cream page in light mode, not inside a dark band. Measured at
   1.03:1 to 1.04:1. */
:root[data-theme="light"] body[data-bf-template="workers-comp"] .calc-hero p,
:root[data-theme="light"] body[data-bf-template="workers-comp"] .step-desc,
:root[data-theme="light"] body[data-bf-template="workers-comp"] .input-label,
:root[data-theme="light"] body[data-bf-template="workers-comp"] .state-info-label,
:root[data-theme="light"] body[data-bf-template="workers-comp"] .result-detail {
  color: var(--bf-lt-ink-2) !important;
}

/* The level-funded pages carry the same blue insight panel as the health
   cost calculator, plus an inline gold heading. */
:root[data-theme="light"] body[data-bf-template="level-funded"] .insight-box,
:root[data-theme="light"] body[data-bf-template="level-funded"] .insight-box strong,
:root[data-theme="light"] body[data-bf-template="level-funded"] .insight-text,
:root[data-theme="light"] body[data-bf-template="level-funded"] [style*="color:#60a5fa"],
:root[data-theme="light"] body[data-bf-template="level-funded"] [style*="color:#93c5fd"] {
  color: #1d4ed8 !important;
}
:root[data-theme="light"] body[data-bf-template="level-funded"] [style*="color:#D4AF37"],
:root[data-theme="light"] body[data-bf-template="level-funded"] [style*="color:#C9A14A"],
:root[data-theme="light"] body[data-bf-template="level-funded"] [style*="color:#d4af37"] {
  color: #7a5c0a !important;
}

/* The lead-form submit button is a solid gold fill in both themes, so a
   white label measured 2.42:1. Gold is a light surface; the label is ink. */
/* Dark theme keeps the light gold fill #C9A14A, so the label must be ink.
   Light theme darkens gold to #7a5c0a so the accent is legible as text,
   which flips the button: on that darker fill the label must be white.
   Getting this wrong the first time produced ink-on-dark-gold at 2.75:1. */
:root[data-theme="dark"] body[data-bf-template="level-funded"] .lead-form button,
:root[data-theme="dark"] body[data-bf-template="level-funded"] .lead-form button[type="submit"] {
  color: #241a00 !important;
}
:root[data-theme="light"] body[data-bf-template="level-funded"] .lead-form button,
:root[data-theme="light"] body[data-bf-template="level-funded"] .lead-form button[type="submit"] {
  color: #ffffff !important;
}

/* ICHRA's --accent (#059669) on its own card surface measured 4.38:1 in
   dark mode, just under the minimum. The dark-mode accent is brighter. */
:root[data-theme="dark"] body[data-bf-template="ichra"] {
  --accent: #10b981;
  --green: #10b981;
}

/* =====================================================================
   15. UNSTYLED OXYGEN LINKS ON THE STATE HEALTH PLANS PAGES.
   19 <a class="ct-link"> elements on each of these pages carry no colour
   rule at all, so they render in the browser default #0000EE. Those
   links wrap whole cards, so in dark mode the entire card copy rendered
   navy-blue on navy at 1.93:1 and was invisible. Measured 2026-08-31.

   The fix is `inherit`, not a brand colour: the anchor wraps body copy,
   not a single link label, so the card text should simply follow the
   theme's ink. No !important, so any deliberate per-element colour from
   the page builder still wins.
   ===================================================================== */
body[data-bf-template="health-plans"] a.ct-link,
body[data-bf-template="health-plans"] a.ct-link-button,
body[data-bf-template="health-plans"] a.ct-link-text {
  color: inherit;
}

/* =====================================================================
   16. FAINT FOOTER CHROME THAT FAILS IN DARK MODE.
   The exported footer sets its brand wordmark, column headings and
   bottom line between 0.20 and 0.45 alpha white, which measures 2.2:1
   to 3.2:1 on the navy page. That is a pre-existing DARK-mode failure,
   not something light mode introduced.
   ===================================================================== */
:root[data-theme="dark"] body[data-bf-template] .footer-area span,
:root[data-theme="dark"] body[data-bf-template] .footer-area p,
:root[data-theme="dark"] body[data-bf-template] .footer-brand p,
:root[data-theme="dark"] body[data-bf-template] .footer-col h4,
:root[data-theme="dark"] body[data-bf-template] .footer-col a,
:root[data-theme="dark"] body[data-bf-template] .footer-bottom,
:root[data-theme="dark"] body[data-bf-template] .footer-trust {
  color: rgba(255, 255, 255, 0.74) !important;
}

/* =====================================================================
   17. ICHRA PRIMARY CTA.
   White on the emerald fill measured 2.54:1 with the dark-mode accent
   and 3.75:1 with the original #059669, so this label was already
   failing before any change here. The emerald fill is a light surface
   in both themes; the label is ink.
   ===================================================================== */
/* Same theme flip as the level-funded CTA: the accent fill is a LIGHT
   emerald in dark mode and a DARK emerald in light mode, so the label
   has to invert with it rather than being fixed to one value. */
:root[data-theme="dark"] body[data-bf-template="ichra"] button:not([class]) {
  color: #04231a !important;
}
:root[data-theme="light"] body[data-bf-template="ichra"] button:not([class]) {
  color: #ffffff !important;
}

/* The warning tag reads red-500 on the card surface at 4.38:1 in dark
   mode. red-400 clears the minimum and keeps the semantic colour. */
:root[data-theme="dark"] body[data-bf-template="ichra"] .tag-warn,
:root[data-theme="dark"] body[data-bf-template="ichra"] .tag.tag-warn {
  color: #f87171 !important;
}

/* =====================================================================
   18. MOBILE MENU CTA, INVISIBLE IN DARK MODE ON EVERY ROI PAGE.
   Found by sweeping mobile viewports, not desktop. The button paints
   itself with the page's --gold token, which on these exports is
   #0a1628, the navy page colour, and its label is slate-800. So the
   opened mobile menu showed a 1.24:1 button: a solid navy block with
   navy text. Verified with the menu actually opened, not just present
   in the DOM. Emerald fill with a white label matches the global
   header's "Schedule a Consultation" CTA and clears 5.5:1.
   ===================================================================== */
body[data-bf-template] .mobile-overlay-cta,
body[data-bf-template] a.mobile-overlay-cta {
  background: #047857 !important;
  background-image: none !important;
  border-color: #047857 !important;
  color: #ffffff !important;
}

/* =====================================================================
   19. IN-CONTENT BENEFITRA WORDMARK IS THE DARK-BACKGROUND VARIANT.
   Abid's captures had a red arrow on a faint BENEFITRA wordmark sitting
   just above the H1. It is not a duplicate header: the React bundle
   injects benefitra-logo-darkbg-2026-05-25@2x.png, which is the WHITE
   wordmark meant for a navy background, so on the cream page it reads as
   a ghost. A contrast gate that only measures text cannot see this.

   Both assets are 4.014:1 (578x144 and 289x72) and these images are
   sized with an inline `height` and `width:auto`, so replacing the
   source cannot change the rendered box.

   Scoped away from .nav-logo and .mobile-menu-logo: the mobile menu
   overlay stays dark in light mode, so its logo must stay the white one.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) a:not(.nav-logo):not(.mobile-menu-logo) > img[src*="benefitra-logo-darkbg"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) div > img[src*="benefitra-logo-darkbg"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) p > img[src*="benefitra-logo-darkbg"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) span > img[src*="benefitra-logo-darkbg"] {
  content: url("/assets/brand/benefitra-logo-light-nav@2x.png");
  object-fit: contain;
}

/* =====================================================================
   20. THE DOCUMENT ROOT ITSELF STAYS DARK IN LIGHT MODE.
   Five templates set `html{background:#0f1520}` (or #0a1628) in their own
   inline stylesheet. `body` is flipped to cream, so it looks fine until
   the viewport is taller than the content or the user overscrolls, and
   then a navy band appears under a cream page. Nothing measures this,
   because there is no text on `html`.
   ===================================================================== */
:root[data-theme="light"]:has(> body[data-bf-template]:not([data-bf-template="related-only"])) {
  background-color: var(--bf-lt-page) !important;
  background-image: none !important;
}

/* =====================================================================
   21. FORM CONTROL VALUES WERE NEVER THEMED AT ALL.
   Abid's workers' comp capture: every typed value and every selected
   option rendered invisible in light mode. Cause: `.input-field{color:
   white}` is a LITERAL, not a variable, so remapping the page palette in
   section 3 could not reach it. Measured on production before this rule:
   `color:#ffffff` on a cream field at 1.06:1 to 1.07:1 for 12 controls on
   workers' comp, plus grey-slab fields at 2.61:1 to 3.73:1 on the
   projector, the health cost calculator and level funded.

   WHY A TEXT-NODE CONTRAST GATE CANNOT SEE THIS. An `<input>` value is
   not a child text node, and a `<select>`'s rendered label comes from an
   `<option>` with no box of its own, so a TreeWalker over SHOW_TEXT
   walks straight past every one of them. The gate that passed 64 page
   states was blind to this whole category, not wrong about the ones it
   measured. `codex-work/gate_controls.mjs` now covers it.

   Verified first: no state tool page has any input, select or textarea
   inside nav, header, footer or the mobile menu, so scoping to the body
   marker cannot reach the chrome that deliberately stays dark.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) select,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) textarea {
  background-color: var(--bf-lt-surface) !important;
  background-image: none !important;
  color: var(--bf-lt-ink) !important;
  -webkit-text-fill-color: var(--bf-lt-ink) !important;
  border-color: rgba(10, 22, 40, 0.22) !important;
}

/* The dropdown popup is painted by the platform from the option itself. */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) select option,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) select optgroup {
  background-color: var(--bf-lt-surface) !important;
  color: var(--bf-lt-ink) !important;
}

/* currentColor keeps the placeholder tied to the field's own ink, so it
   stays readable without this rule needing to know the surface. */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) input::placeholder,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) textarea::placeholder {
  color: currentColor !important;
  opacity: 0.62 !important;
}

/* Number steppers sit in their own wrapper that carries the field fill. */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .inf-stepper,
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) .input-field {
  background-color: var(--bf-lt-surface) !important;
  background-image: none !important;
  color: var(--bf-lt-ink) !important;
  border-color: rgba(10, 22, 40, 0.22) !important;
}

/* =====================================================================
   22. TRANSLUCENT DARK PANELS COMPOSITE INTO GREY SLABS ON CREAM.
   These cards are filled with navy at partial alpha, for example
   `.step-section{background:rgba(15,31,56,.45)}` and
   `select{background:rgba(15,31,56,.3)}`. On navy that reads as a subtle
   raised panel. On cream the same fill composites to mid grey around
   rgb(105,114,128), so the page shows grey boxes and the ink inside them
   drops to 3.7:1. Confirmed by screenshotting the field's own pixels
   rather than trusting the computed backdrop, because a translucent
   ancestor makes the composite unreliable.

   Every class below came out of `collect_dark_surfaces.mjs`, which walks
   all nine templates in light mode and reports any element whose own
   background is dark, so this is a named list rather than a blanket
   force. Deliberately NOT included: `.step-num`, `.toggle-btn.active`,
   `.tier-pill.active` and the modal backdrop, which are solid dark
   badges carrying white text and are correct on cream.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) :is(
  .step-section, .faq-item, .glance-box, .result-card, .commentary-section,
  .lead-section, .side-card, .scenario-card, .risk-meter, .chart-container,
  .auth-card, .section-card, .toggle-group, .tier-group
) {
  background-color: rgba(10, 22, 40, 0.04) !important;
  background-image: none !important;
  border-color: var(--bf-lt-border) !important;
}

/* The projector wraps each disclosure in a translucent navy <details>. */
:root[data-theme="light"] body[data-bf-template="projector"] details {
  background-color: rgba(10, 22, 40, 0.04) !important;
  border-color: var(--bf-lt-border) !important;
}

/* Inline background styles: section 3 remapped inline `color` but never
   inline `background`, which is how these survived the first pass. */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background:rgba(22,22,74"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background: rgba(22,22,74"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background:rgba(15,31,56"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background:rgba(30,58,95"] {
  background-color: rgba(10, 22, 40, 0.04) !important;
  background-image: none !important;
}

/* The ROI wizard greys out the steps you have not unlocked yet with
   Tailwind's `bg-gray-600/50`. That is a legitimate disabled state, but
   at 50% over cream it lands as a heavy slate bar that reads as broken
   rather than as locked. Keep the disabled signal, lose the slab. */
:root[data-theme="light"] body[data-bf-template="roi"] .bg-gray-600\/50 {
  background-color: rgba(10, 22, 40, 0.05) !important;
  border-color: var(--bf-lt-border) !important;
}

/* =====================================================================
   23. `[class*="-cta"]` WAS TOO GREEDY AND PAINTED A LAYOUT ROW.
   The per-page light block gives every class containing "-cta" a
   `#f7fafc` panel fill. That is right for `.final-cta` and `.sidebar-cta`,
   which are panels, and wrong for `.hero-cta-row`, which is only a flex
   row holding the two hero buttons. On navy the stray fill is invisible;
   on cream it renders as two pale slabs flanking the buttons, which is
   exactly the pair of boxes Abid outlined on the health plan hero.
   `.nav-cta` and `.featured-cta` also match the pattern but are already
   overridden correctly further down the cascade, verified before
   narrowing this, so they are left alone.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template] .hero-cta-row,
:root[data-theme="light"] body[data-bf-template] .cta-row {
  background-color: transparent !important;
  background-image: none !important;
}

/* =====================================================================
   24. INLINE GRADIENT PANELS THAT ARE DARK NAVY IN LIGHT MODE.
   The projector page wraps its "Benefits Health Score" info grid in a
   container whose only background is an inline gradient image:
   `background-image: linear-gradient(135deg, rgb(15,31,56), rgb(15,31,56))`.
   The cards inside it use `.bg-white/5` and `.text-white/90`, so in light
   mode the whole region reads as a dark slab with barely visible text.
   Strip the gradient and tint the surface like the other panels.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background-image:linear-gradient"][style*="rgb(15, 31, 56)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background-image: linear-gradient"][style*="rgb(15, 31, 56)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background-image:linear-gradient"][style*="rgb(15, 21, 32)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background-image: linear-gradient"][style*="rgb(15, 21, 32)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background-image:linear-gradient"][style*="rgb(10, 22, 40)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background-image: linear-gradient"][style*="rgb(10, 22, 40)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background:linear-gradient"][style*="rgb(15, 31, 56)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background: linear-gradient"][style*="rgb(15, 31, 56)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background:linear-gradient"][style*="rgb(15, 21, 32)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background: linear-gradient"][style*="rgb(15, 21, 32)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background:linear-gradient"][style*="rgb(10, 22, 40)"],
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [style*="background: linear-gradient"][style*="rgb(10, 22, 40)"] {
  background-image: none !important;
  background-color: rgba(10, 22, 40, 0.04) !important;
  border-color: var(--bf-lt-border) !important;
}

/* =====================================================================
   25. TAILWIND SEMI-TRANSPARENT WHITE UTILITIES ARE DARK-MODE ONLY.
   Exported components use `.text-white/90`, `.text-white/55`,
   `.text-white/30` and `.bg-white/5` as if the page is always navy.
   In light mode the white text is invisible on cream and the 5% white
   panel is too faint. Remap them to the light palette, but only the
   translucent variants; solid `.text-white` is still needed for emerald
   buttons and active toggles.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) :is(
  .text-white\/90, .text-white\/80, .text-white\/75, .text-white\/70,
  .text-white\/60, .text-white\/55, .text-white\/50, .text-white\/40,
  .text-white\/30, .text-white\/25, .text-white\/20, .text-white\/10
) {
  color: var(--bf-lt-ink) !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) :is(
  .text-white\/90, .text-white\/80, .text-white\/75, .text-white\/70
) {
  opacity: 1 !important;
}
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) :is(
  .text-white\/60, .text-white\/55, .text-white\/50, .text-white\/40,
  .text-white\/30, .text-white\/25, .text-white\/20, .text-white\/10
) {
  color: var(--bf-lt-ink-2) !important;
}

/* The translucent white panels that carry those text classes. */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) :is(
  .bg-white\/5, .bg-white\/10, .bg-white\/15
) {
  background-color: rgba(10, 22, 40, 0.04) !important;
  border-color: var(--bf-lt-border) !important;
}

/* Locked wizard steps also carry `opacity: .5`; raise it so the row does
   not disappear on cream, but keep the not-allowed cursor. */
:root[data-theme="light"] body[data-bf-template]:not([data-bf-template="related-only"]) [class*="cursor-not-allowed"][class*="bg-white\/"] {
  opacity: 1 !important;
}

/* =====================================================================
   26. RANGE SLIDERS WERE USING THE BROWSER DEFAULT ACCENT COLOR.
   In light mode the thumb is a dark circle on a barely visible track;
   in dark mode it is the system blue and often lost against navy.
   Set an explicit accent colour for both themes so the control is
   visible and matches the surrounding palette.
   ===================================================================== */
:root[data-theme="light"] body[data-bf-template] input[type="range"] {
  accent-color: var(--bf-lt-ink) !important;
}
:root[data-theme="dark"] body[data-bf-template] input[type="range"] {
  accent-color: #ffffff !important;
}

/* WebKit / Blink track and thumb for a consistent look across browsers. */
:root[data-theme="light"] body[data-bf-template] input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(10, 22, 40, 0.25) !important;
  height: 6px !important;
  border-radius: 3px !important;
}
:root[data-theme="light"] body[data-bf-template] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  background: var(--bf-lt-ink) !important;
  border-radius: 50% !important;
  margin-top: -6px !important;
  border: 2px solid var(--bf-lt-surface) !important;
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.22) !important;
}
:root[data-theme="light"] body[data-bf-template] input[type="range"]::-moz-range-track {
  background: rgba(10, 22, 40, 0.25) !important;
  height: 6px !important;
  border-radius: 3px !important;
}
:root[data-theme="light"] body[data-bf-template] input[type="range"]::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  background: var(--bf-lt-ink) !important;
  border-radius: 50% !important;
  border: 2px solid var(--bf-lt-surface) !important;
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.22) !important;
}

:root[data-theme="dark"] body[data-bf-template] input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 255, 255, 0.25) !important;
  height: 6px !important;
  border-radius: 3px !important;
}
:root[data-theme="dark"] body[data-bf-template] input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  margin-top: -6px !important;
  border: 2px solid rgb(15, 31, 56) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
:root[data-theme="dark"] body[data-bf-template] input[type="range"]::-moz-range-track {
  background: rgba(255, 255, 255, 0.25) !important;
  height: 6px !important;
  border-radius: 3px !important;
}
:root[data-theme="dark"] body[data-bf-template] input[type="range"]::-moz-range-thumb {
  width: 18px !important;
  height: 18px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  border: 2px solid rgb(15, 31, 56) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}

/* =====================================================================
   27. HERO GRADIENT TEXT HAS A DARK STOP IN DARK MODE.
   The ROI export wraps the state/industry phrase in <em> and fills it
   with `linear-gradient(135deg, var(--gold), var(--gold-l))`. On these
   pages `--gold` is #0a1628, so the first half of the phrase renders
   navy-on-navy. The health-cost export uses a `.grad` span with a
   blue-to-emerald gradient whose emerald stop is too dark for the navy
   page. Replace both with light, readable gradients while keeping the
   clipped-text effect.
   ===================================================================== */
:root[data-theme="dark"] body[data-bf-template="roi"] .bssb-header h1 em,
:root[data-theme="dark"] body[data-bf-template="roi"] h1 em {
  background: linear-gradient(135deg, #ffffff, #34d399) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
:root[data-theme="dark"] body[data-bf-template] h1 .grad,
:root[data-theme="dark"] body[data-bf-template] h1 span.grad {
  background: linear-gradient(135deg, #7cb0ff, #34d399) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* =====================================================================
   28. COST-PROJECTION BARS PAINTED NAVY IN DARK MODE.
   site-theme.css uses a broad `[class*="chart"]{background:#0f1f38 !important}`
   to flip light chart panels in dark mode. That selector also matches
   `.chart-bar-fill`, so the coloured bars are replaced with the card
   surface and the chart appears empty in dark mode. Restore each bar's
   own colour by matching its inline `background:#hex` declaration or its
   `background:var(--green-l)` CSS-variable declaration.
   The PEO bar uses #3d6098 which is too dark against navy, so it is
   brightened to #60a5fa while keeping the same hue.
   ===================================================================== */
:root[data-theme="dark"] body[data-bf-template] .chart-bar-fill[style*="background:#ef4444"] { background: #ef4444 !important; }
:root[data-theme="dark"] body[data-bf-template] .chart-bar-fill[style*="background:#3b82f6"] { background: #3b82f6 !important; }
:root[data-theme="dark"] body[data-bf-template] .chart-bar-fill[style*="background:#8b5cf6"] { background: #8b5cf6 !important; }
:root[data-theme="dark"] body[data-bf-template] .chart-bar-fill[style*="background:#3d6098"] { background: #60a5fa !important; }
:root[data-theme="dark"] body[data-bf-template] .chart-bar-fill[style*="background:#f59e0b"] { background: #f59e0b !important; }
:root[data-theme="dark"] body[data-bf-template] .chart-bar-fill[style*="var(--green-l)"] { background: #f0d878 !important; }


/* =====================================================================
   29. WORKERS' COMP CARDS, TABLES AND CHARTS.
   The workers-comp calculators use .card and .bar-chart-wrap with
   near-transparent white backgrounds and white-alpha table borders.
   In light mode the card background disappears on the cream page and
   table borders are invisible, so the tables look like floating text.
   The PEO-path chart legend uses --green, which is navy on these pages,
   rendering a black square in both themes. In dark mode the EMR value
   labels use --red-light (#f87171) and are too faint against the navy
   card. Fix all of this in the shared theme file.
   ===================================================================== */

/* Light mode: give cards and chart wraps a real surface and visible border */
:root[data-theme="light"] body[data-bf-template="workers-comp"] .card,
:root[data-theme="light"] body[data-bf-template="workers-comp"] .bar-chart-wrap {
  background: var(--bf-lt-surface) !important;
  border-color: var(--bf-lt-border) !important;
}

/* Light mode: table borders that are visible on cream */
:root[data-theme="light"] body[data-bf-template="workers-comp"] .comp-table th,
:root[data-theme="light"] body[data-bf-template="workers-comp"] .proj-table th {
  border-bottom-color: var(--bf-lt-border) !important;
}
:root[data-theme="light"] body[data-bf-template="workers-comp"] .comp-table td,
:root[data-theme="light"] body[data-bf-template="workers-comp"] .proj-table td {
  border-bottom-color: var(--bf-lt-border-soft) !important;
}

/* PEO-path legend square: --green is navy on workers-comp, so force real green */
:root[data-theme="light"] body[data-bf-template="workers-comp"] .bar-chart-wrap div[style*="background:var(--green)"],
:root[data-theme="dark"] body[data-bf-template="workers-comp"] .bar-chart-wrap div[style*="background:var(--green)"] {
  background: var(--green-bright) !important;
}

/* Dark mode: brighter EMR bar value labels above the bars */
:root[data-theme="dark"] body[data-bf-template="workers-comp"] .emr-bar-val {
  color: #fca5a5 !important;
}

/* =====================================================================
   30. LIGHT-MODE MINT ACCENTS AND DARK-BLUE CARD SURFACES.
   Several templates (ROI, projector, related-only) hard-code Tailwind
   mint greens (#d1fae5, #a7f3d0, #6ee7b7) and dark-blue translucent
   card backgrounds (rgba(22,22,74,0.08), rgba(30,58,95,0.2),
   rgba(22,22,74,0.25)). Those colors are meant for the navy page and
   become nearly invisible on the cream light-mode page. Remap them to
   dark green ink and a light surface in light mode only.
   ===================================================================== */

/* Mint text → dark emerald so it reads on cream/white cards */
:root[data-theme="light"] body[data-bf-template] [style*="color:#d1fae5"],
:root[data-theme="light"] body[data-bf-template] [style*="color:#a7f3d0"],
:root[data-theme="light"] body[data-bf-template] [style*="color:#6ee7b7"] {
  color: #065f46 !important;
}

/* Dark-blue translucent card backgrounds → light ink-tinted surface */
:root[data-theme="light"] body[data-bf-template] [style*="background:rgba(22,22,74,0.08)"],
:root[data-theme="light"] body[data-bf-template] [style*="background:rgba(30,58,95,0.2)"],
:root[data-theme="light"] body[data-bf-template] [style*="background:rgba(22,22,74,0.25)"] {
  background: rgba(10, 22, 40, 0.06) !important;
}

/* ------------------------------------------------------------------
   MOBILE TABLES on state tool pages. 2026-09-01.
   Same defect and same fix as the block appended to site-theme.css, repeated
   here because the state tool template loads ONLY this sheet and never loads
   site-theme.css. Verified on
   /north_carolina-level-funded-vs-fully-insured-calculator/, where a "$144"
   cell rendered 58px wide by 97px tall at 390px and the computed min-width of
   the cell was 0px, proving the site-theme rule never reached the page.
   Giving cells a floor makes the table's content wider than its container so
   the existing overflow-x:auto has something to scroll. Small tables are
   narrower than the viewport and are left alone.
   ------------------------------------------------------------------ */
@media (max-width:640px){
  :root table{
    display:block !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    max-width:100% !important;
  }
  :root table th,
  :root table td{
    min-width:120px !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word;
    hyphens:none !important;
  }
  :root table th.num, :root table td.num,
  :root table th[align="right"], :root table td[align="right"]{
    min-width:96px !important;
  }
}

/* Scroll affordance for mobile tables. 2026-09-01.
   With the cell floor in place a wide table scrolls, but the last column is
   cut at the viewport edge with no cue, which reads as broken data rather
   than "swipe for more" (seen on /locum-tenens-salary-2025/, where the salary
   column showed only the "$").

   TRIED AND REJECTED: an edge gradient painted with background-image plus
   background-attachment:scroll. It measured as safe because the table and its
   cells both computed background-color rgba(0,0,0,0), but that reading was
   taken on one page in one theme. Screenshotted at 390px it was invisible in
   BOTH themes, because the row and cell fills paint above the table's own
   background. A rule that renders nothing is worse than no rule.

   WHAT ACTUALLY WORKS: the table is the scroll container, so its BORDER sits
   on the border box and does not scroll, and cell backgrounds paint inside
   the padding box and therefore cannot cover it. A right border is pinned to
   the edge in both themes regardless of row colour. currentColor keeps it
   legible on light and dark without knowing the surface.
   Gated behind :has() on a third column, because a 1 or 2 column table is
   narrower than the viewport, has nothing to scroll, and must not be marked.
   The :not([style*="display:none"]) matters: 50 public pages (the workers-comp
   and level-funded calculators) declare 4 headers but keep columns 3 and 4
   inline display:none until the user turns on the PEO comparison. Those tables
   render as 2 columns, fit inside the viewport and do not scroll, so without
   this guard they would carry a scroll marker that means nothing. */
@media (max-width:640px){
  :root table:has(> thead > tr > th:nth-child(3):not([style*="display:none"])),
  :root table:has(> tbody > tr > td:nth-child(3):not([style*="display:none"])),
  :root table:has(> tr > td:nth-child(3):not([style*="display:none"])){
    border-right:2px solid !important;
    border-right-color:color-mix(in srgb, currentColor 34%, transparent) !important;
  }
  /* Some templates (the case studies) leave the table at display:table and
     scroll it through a wrapper div instead. There the table's own border sits
     at the far end of the content, off screen, so the cue has to go on the
     wrapper that is actually doing the scrolling. */
  :root div[style*="overflow-x"]:has(> table),
  :root .table-wrap:has(> table),
  :root .overflow-x-auto:has(> table){
    border-right:2px solid color-mix(in srgb, currentColor 34%, transparent);
  }
}