/* Deskrune — contrast fixes layer
   Loaded last in the cascade. Targets dark-mode invisibility bugs where
   --white was redefined to a dark navy (#1A2540) for card backgrounds,
   which broke every button using `background: var(--navy); color: var(--white);`
   because both became near-identical dark values.

   Fix: re-pin button text to true white in dark mode. Same trick for
   navy-mid quote cards and the floating re-entry pill that share the bug.
   2026-05-08 */

:root[data-theme="dark"] .signup button,
:root[data-theme="dark"] .signup-box button,
:root[data-theme="dark"] .tool-actions button,
:root[data-theme="dark"] .signal-submit,
:root[data-theme="dark"] .flagship-card .buy,
:root[data-theme="dark"] .pricing-col.flagship .pricing-cta.primary,
:root[data-theme="dark"] .reentry-pill-cta {
  color: #FFFFFF !important;
  background: #0F172A !important;
}

:root[data-theme="dark"] .signup button:hover,
:root[data-theme="dark"] .signup-box button:hover,
:root[data-theme="dark"] .tool-actions button:hover,
:root[data-theme="dark"] .signal-submit:hover,
:root[data-theme="dark"] .flagship-card .buy:hover {
  background: #E8735A !important;
  color: #FFFFFF !important;
}

/* Quote cards — navy-mid bg with white text. In dark mode, --white
   resolves to dark navy. Force true white text. */
:root[data-theme="dark"] .section.navy .quote-cards .quote-card,
:root[data-theme="dark"] .section.navy .quote-cards .quote-card blockquote,
:root[data-theme="dark"] .pricing-col.flagship,
:root[data-theme="dark"] .pricing-col.flagship .pricing-name,
:root[data-theme="dark"] .pricing-col.flagship .pricing-price {
  color: #FFFFFF !important;
}

/* Re-entry floating pill — same fix */
:root[data-theme="dark"] .reentry-pill {
  color: #FFFFFF !important;
}
/* Removed 2026-05-08: .reentry-pill-context / .reentry-pill-tag dead — actual
   children injected by re-entry-bookmark.js are .reentry-pill-icon/-body/-label/-cta/-close */

/* Sale banner — was already light-on-coral but ensure the hover state
   on its inline link stays readable when dark-mode adds a wash. */
:root[data-theme="dark"] .deskrune-sale-banner a {
  color: #fff5ec !important;
}

/* xref ribbon flips to a LIGHT pink in dark mode (--accent-dark = #FFB09F).
   White text becomes dark navy via --white redefinition — that's actually
   readable on light pink. But low-opacity-white labels (eyebrow, code)
   become near-invisible. Restore as muted dark ink for AA contrast. */
:root[data-theme="dark"] .afm-xref-ribbon .xref-eyebrow,
:root[data-theme="dark"] .afm-xref-ribbon .xref-chip-code {
  color: rgba(15, 23, 42, 0.78) !important;
}
:root[data-theme="dark"] .afm-xref-ribbon .xref-chip {
  background: rgba(15, 23, 42, 0.08) !important;
  border-color: rgba(15, 23, 42, 0.22) !important;
}
:root[data-theme="dark"] .afm-xref-ribbon .xref-chip:hover {
  background: rgba(15, 23, 42, 0.14) !important;
  border-color: rgba(15, 23, 42, 0.42) !important;
}

/* Light-mode safety: the homepage inline-styled hero CTA card uses
   #fff8ef (very pale cream) as background. Anywhere a child element
   inherits white text it'll vanish. Force inherited body color so any
   future white-text descendant of .hero-cta gets the dark ink. */
.hero-cta { color: #1f1c18; }

/* Reduce em-dash in copy is a brand rule, not CSS; nothing to do. */

/* Print-mode safety — drop any background images and force black text.
   Not directly tied to the bug, but several pages were ghosting in print. */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .deskrune-sale-banner, .deskrune-proof-toast, .reentry-pill,
  .deskrune-scroll-line, nav, footer.minimal { display: none !important; }
}

/* ===========================================================
   2026-05-08 — WCAG 2.2 AA contrast audit fixes (review batch)
   Source: /Users/shanesuehr/Desktop/hustler-ai/reviews/contrast-2026-05-08.md
   =========================================================== */

/* --- 1) The "coral on cream" body-text problem ---------------------------
   #c9613f / #E8735A as TEXT against light bg fails AA body (3.7-4.0:1 vs 4.5).
   Bump to #A84F31 (5.21:1 on cream, 5.49:1 on white). PASS body AA.
   Applies to: amazon page chips/eyebrows/CTAs, comeback-coach numbers/labels,
   sale-conversion exit cards, accent text in core css.
   Override at the inline-style level via [style*="..."] is impossible, so the
   amazon/comeback-coach pages redirect to .accent-text-darken below. We also
   patch the most common selectors directly. */

/* Core css selectors using `color: var(--accent)` for SMALL text on light bg
   Removed 2026-05-08: .citation h3, .gauge-row .gauge-fill (commented as
   "NOT text — skip"), .lib-card .lib-card-tag — none exist in HTML/JS. */
:root:not([data-theme="dark"]) .signup h2,
:root:not([data-theme="dark"]) .product .price,
:root:not([data-theme="dark"]) .audienceLabel,
:root:not([data-theme="dark"]) .quiz-result h2,
:root:not([data-theme="dark"]) .timer-stage h3,
:root:not([data-theme="dark"]) .pricing-col .pricing-tier,
:root:not([data-theme="dark"]) .lead-magnet-card .tag {
  color: #A84F31 !important; /* was var(--accent)=#E8735A or #c9613f, ratio 2.84-3.99 → now 5.21+ */
}

/* Amazon page: hardcoded #c9613f text colors -> bump to #A84F31 */
:root:not([data-theme="dark"]) .az-eyebrow,
:root:not([data-theme="dark"]) .az-card-cat,
:root:not([data-theme="dark"]) .az-card-cta,
:root:not([data-theme="dark"]) .az-detail-cat {
  color: #A84F31 !important; /* was #c9613f on #faf9f5 = 3.73 → 5.21 */
}

/* Comeback-coach: small accent text */
:root:not([data-theme="dark"]) .cc-eyebrow,
:root:not([data-theme="dark"]) .cc-foot-text a,
:root:not([data-theme="dark"]) .cc-blocks .num,
:root:not([data-theme="dark"]) .cc-controls button.danger {
  color: #A84F31 !important; /* was #c9613f / #b8542c (passes but uniform) on cream */
}

/* The countdown numerals at clamp(54px,9vw,84px) — already large-text AA at 3.0:1
   but raise anyway since hover states on smaller siblings expect uniformity */
:root:not([data-theme="dark"]) .cc-time {
  color: #A84F31 !important;
}

/* --- 2) Sale-banner gradient: first stop fails AA on white text ---------
   #c9613f -> #b8542c with #faf9f5 text starts at 3.79:1.
   Shift gradient to #A84F31 -> #8E3F22 (5.21 -> 7.55). Visual change is minor —
   the banner keeps its coral identity but text clears AA body.  */
.deskrune-sale-banner {
  background: linear-gradient(90deg, #A84F31 0%, #8E3F22 100%) !important;
}

/* --- 3) Success-green token #2da44e fails AA body (3.05-3.22:1) ---------
   Used on the comeback-coach STOP block. Darken to #1F7A3A (5.07:1 on cream).
   Removed 2026-05-08: .deskrune-exit-card .badge (overlay never injected to DOM)
   and .deskrune-coupon-success (no HTML/JS occurrences). */
:root:not([data-theme="dark"]) .cc-stop strong {
  color: #1F7A3A !important; /* was #2da44e, 3.05 -> 5.07 */
}

/* --- 4) Eyebrow tinted background dilutes coral text further -----------
   .az-eyebrow uses bg rgba(201,97,63,0.04) which lifts the cream slightly,
   dropping #c9613f text to 3.71:1. Combined fix: above color override
   (handled) + slightly darker tint background. */
:root:not([data-theme="dark"]) .az-eyebrow {
  background: rgba(168, 79, 49, 0.06) !important;
  border-color: rgba(168, 79, 49, 0.32) !important;
}

/* --- 5) Universal placeholder text contrast ------------------------------
   No global rule existed; some inputs inherited browser defaults that on
   warm cream gradients (Pinterest scenario) become near-invisible.
   Force a single readable token. */
input::placeholder,
textarea::placeholder {
  color: #6F6A60 !important; /* light mode: 5.03 on cream */
  opacity: 1; /* Firefox defaults to 0.54 */
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #9A9285 !important; /* dark mode: 6.31 on dark bg */
  opacity: 1;
}

/* --- 6) Disabled-button safety ------------------------------------------
   .tool-actions button:disabled used opacity:0.5 only. Browser opacity
   preserves contrast ratio (it's a uniform alpha blend), but it makes the
   button look identical to a low-priority element. Pin a textured pattern:
   strong border + reduced contrast text, but still 3:1+ for non-text UI.  */
button:disabled,
button[aria-disabled="true"],
.btn:disabled,
.cta:disabled,
[role="button"][aria-disabled="true"] {
  opacity: 1 !important;
  background: #E8E2D7 !important; /* --ds-rule */
  color: #5A5650 !important;       /* 7.06 on bg, 6.92 on E8E2D7 */
  border-color: #CFC6B6 !important;
  cursor: not-allowed !important;
}
:root[data-theme="dark"] button:disabled,
:root[data-theme="dark"] button[aria-disabled="true"],
:root[data-theme="dark"] .btn:disabled,
:root[data-theme="dark"] .cta:disabled,
:root[data-theme="dark"] [role="button"][aria-disabled="true"] {
  background: #2F2A24 !important;
  color: #9A9285 !important; /* 4.5+ on #2F2A24 */
  border-color: #4A4540 !important;
}

/* --- 7) Universal :focus-visible ring on every interactive element ------
   Some elements only expose a 1px outline of var(--accent)=#E8735A which
   fails 3:1 contrast against light cream (2.84:1). Replace with a thicker,
   double-border ring that meets WCAG SC 2.4.11 (focus-not-obscured) and
   1.4.11 (non-text contrast 3:1). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #A84F31 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(168, 79, 49, 0.22) !important;
}
:root[data-theme="dark"] a:focus-visible,
:root[data-theme="dark"] button:focus-visible,
:root[data-theme="dark"] input:focus-visible,
:root[data-theme="dark"] select:focus-visible,
:root[data-theme="dark"] textarea:focus-visible,
:root[data-theme="dark"] summary:focus-visible {
  outline-color: #F4A589 !important; /* dark accent-hover, 8+ on dark bg */
  box-shadow: 0 0 0 4px rgba(244, 165, 137, 0.28) !important;
}

/* --- 8) Underlined link contrast vs surrounding text -------------------
   Body links use `color: var(--accent-dark)=#B0432A` + 1px underline.
   The link itself passes (5.34:1 on cream) but the underline is barely
   visible at 1px. Bump to 2px so the link/non-link distinction is obvious
   for low-vision users (WCAG 1.4.1: don't use color alone). */
:root:not([data-theme="dark"]) a:not([class]),
:root:not([data-theme="dark"]) p a,
:root:not([data-theme="dark"]) li a,
:root:not([data-theme="dark"]) .prose a {
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* --- 9) Dark-mode rule-strong-as-text fail -----------------------------
   --ds-rule-strong = #4A4540 (intended as a border) was being used as text
   color on .reentry-pill .reentry-pill-close hover state and similar — 2.05:1
   on dark bg = invisible. Lift to ink-faint when used as text color. */
:root[data-theme="dark"] .reentry-pill-close {
  color: #9A9285 !important;
}

/* --- 10) RTL locales (e.g. /ar/) — ensure reading direction doesn't pin
   underline to wrong side and that placeholder color still applies. ----- */
[dir="rtl"] input::placeholder,
[dir="rtl"] textarea::placeholder {
  text-align: right;
}

/* ===========================================================
   2026-05-08 v2 — second sweep
   Failures found in this pass: hero-cinematic eyebrow + hover (3.79),
   sale-conversion social proof toast strong (3.79), price-now (3.79),
   sticky-buy dark mode CTA (3.99), every quiz/qi/dfi/fs eyebrow,
   inline-styled tags on tools/index, plus all light-mode `var(--accent)`
   text usages we missed in the first pass. The pattern is the same:
   #c9613f / #E8735A as TEXT (not fill) on cream. Single rule.
   =========================================================== */

/* --- 11) Universal coral-text-on-cream catch-all ----------------------
   Sweep every selector that uses #c9613f as TEXT color in inline page CSS.
   Light mode only. Targets the four tool pages with inline coral, the
   sale-conversion toast/price/exit-card, hero-cinematic eyebrow + hover.
   Border-color / background uses are NOT touched (they pass 3:1 non-text). */
:root:not([data-theme="dark"]) .hero-cine-content .eyebrow,
:root:not([data-theme="dark"]) .hero-cine-content .hero-action.secondary:hover,
:root:not([data-theme="dark"]) .deskrune-proof-toast strong,
:root:not([data-theme="dark"]) .live-price.on-sale .price-now,
:root:not([data-theme="dark"]) .fs-eyebrow,
:root:not([data-theme="dark"]) .fs-row .val,
:root:not([data-theme="dark"]) .dfi-eyebrow,
:root:not([data-theme="dark"]) .dfi-row .dfi-buttons button:hover,
:root:not([data-theme="dark"]) .dfi-score,
:root:not([data-theme="dark"]) .qi-eyebrow,
:root:not([data-theme="dark"]) .qi-tag,
:root:not([data-theme="dark"]) .qi-arrow,
:root:not([data-theme="dark"]) .quiz-eyebrow,
:root:not([data-theme="dark"]) .quiz-back:hover,
:root:not([data-theme="dark"]) .quiz-result-eyebrow,
:root:not([data-theme="dark"]) .quiz-cta-secondary:hover,
:root:not([data-theme="dark"]) .quiz-share button:hover,
:root:not([data-theme="dark"]) .az-chip:hover,
:root:not([data-theme="dark"]) .az-compare-toggle:hover,
:root:not([data-theme="dark"]) .az-cta-secondary:hover,
:root:not([data-theme="dark"]) .cc-controls button:hover,
:root:not([data-theme="dark"]) .cc-next-stack .secondary:hover {
  color: #A84F31 !important; /* was #c9613f, 3.79 → 5.21 (PASS AA body) */
}

/* --- 12) Sticky-buy bar dark-mode CTA: #f08160 fill with default text ---
   On dark navy bg this needs white text not the default dark ink to clear AA.
   sale-conversion.js inserts a runtime style that uses #16110e text — fine in
   most contexts but the sticky-buy bar is on a dark navy bg → invisible. */
:root[data-theme="dark"] .deskrune-sticky-buy {
  background: #C24A2A !important; /* lock to a single readable value */
  color: #FFFFFF !important;       /* 5.49 on bg → PASS AA */
}

/* --- 13) Sale banner mobile link: #fff5ec on #c9613f tint = 3.71 fail ---
   We already shifted the gradient to #A84F31 → #8E3F22 in fix #2.
   On mobile the link gets an additional rgba(255,255,255,0.14) wash bg
   which slightly muddles the contrast. Force white text + slightly darker
   inner bg so the chip-style link reads cleanly on small screens. */
@media (max-width: 640px) {
  .deskrune-sale-banner a {
    color: #FFFFFF !important;
    background: rgba(0, 0, 0, 0.18) !important;
  }
}

/* --- 14) Mobile-fixes accent-dark fallback (#d97706) fails 3.02 ----------
   The fallback color literal in mobile-fixes.css (`var(--accent-dark, #d97706)`)
   was the legacy amber. var(--accent-dark) resolves to #B0432A in light mode
   (passes 5.34) so we never hit the fallback in normal use. But if the cascade
   is interrupted (e.g. theme.css fails to load), the fallback shows. Force a
   passing fallback at the only place it could matter: any element computing to
   the bare amber. Use attribute targeting on the inline outlines. */
:root:not([data-theme="dark"]) .signup input:focus-within,
:root:not([data-theme="dark"]) .signup-box input:focus-within {
  outline-color: #A84F31 !important;
}

/* --- 15) Light-mode `:focus-visible` from sale-conversion.css used coral
   #c9613f at 2.84:1 — wins specificity in some pages because sale-conversion
   loads after style.css. Override at body level. (fix #7 already covers this,
   but add an explicit override at .skip-to-content for the highest-specificity
   competitor.) */
.skip-to-content:focus {
  outline-color: #A84F31 !important;
}

/* --- 16) Library/research pSEO `inline color: var(--accent)` fallback ---
   `q/*` pages put `<a style="color:var(--accent)">` or `<span style="color:var(--accent)">`
   inline. var(--accent) = #E8735A (light) → 2.79:1 = AA fail.
   Inline styles win every cascade. Patch via `[style*="var(--accent)"]`.
   This is a fragile selector but it's the only way to catch inline use. */
:root:not([data-theme="dark"]) [style*="var(--accent)"]:not(svg):not(path):not(line):not(rect):not(circle) {
  color: #A84F31 !important;
}

/* --- 17) Pricing column inline `color: var(--accent)` for tier label ----
   Already partially fixed in #1 via `.pricing-col .pricing-tier`. Now also
   handle the .pricing-col.flagship .pricing-tier specifically (selector wars). */
:root:not([data-theme="dark"]) .pricing-col.flagship .pricing-tier,
:root:not([data-theme="dark"]) .pricing-col .pricing-name .tier {
  color: #A84F31 !important;
}

/* --- 18) Caption / eyebrow / tag — every selector ending in -eyebrow,
   -tag, -cat, -tier, -caption, -kicker that we didn't catch above ------- */
:root:not([data-theme="dark"]) [class$="-eyebrow"],
:root:not([data-theme="dark"]) [class$="-kicker"],
:root:not([data-theme="dark"]) [class*="eyebrow"][class*="coral"],
:root:not([data-theme="dark"]) [class$="-cta-text"][style*="#c9613f"] {
  /* Only override if currently coral; we can't read the value back so we
     blanket the universe of small-text accent labels. Body weights 600-700
     at 11-13px are the worst offenders. */
  color: #A84F31 !important;
}

/* --- 19) Dark-mode --accent (#FF8E78) on dark navy bg #0A1224
   passes (5.4) but check #f08160 on default dark ink #0e0c0a (7.4) — fine.
   Risk is light-mode --accent fallback (#E8735A) inheriting in dark via
   browser fallback if theme.css fails. Pin a passing dark accent. */
:root[data-theme="dark"] .signup h2,
:root[data-theme="dark"] .product .price,
:root[data-theme="dark"] .audienceLabel,
:root[data-theme="dark"] .citation h3,
:root[data-theme="dark"] .quiz-result h2,
:root[data-theme="dark"] .timer-stage h3,
:root[data-theme="dark"] .pricing-col .pricing-tier,
:root[data-theme="dark"] .lib-card .lib-card-tag,
:root[data-theme="dark"] .lead-magnet-card .tag {
  color: #F4A589 !important; /* 9.78:1 on dark bg = AAA */
}

/* --- 20) Dark-mode coral-text on dark navy/cards (#1A2540) -------------
   The "white" token in dark mode is redefined to #1A2540 (a dark navy card bg),
   so any element with `color: #c9613f` on a card becomes 1.7:1 = invisible.
   Force readable accent on cards specifically. */
:root[data-theme="dark"] .signup,
:root[data-theme="dark"] .signup-box,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .pricing-col,
:root[data-theme="dark"] .product,
:root[data-theme="dark"] .product-rich,
:root[data-theme="dark"] .lib-card,
:root[data-theme="dark"] .lead-magnet-card,
:root[data-theme="dark"] .citation,
:root[data-theme="dark"] .quote-card,
:root[data-theme="dark"] .qi-card,
:root[data-theme="dark"] .quiz-result {
  color: #F0E9DC !important; /* default body text on cards = 14.6+ on #1A2540 */
}
:root[data-theme="dark"] .signup h2,
:root[data-theme="dark"] .citation h3,
:root[data-theme="dark"] .quiz-result h2,
:root[data-theme="dark"] .timer-stage h3 {
  color: #F4A589 !important; /* dark accent for headings */
}

/* --- 21) Hover-state coral text on cards in light mode ----------------- */
:root:not([data-theme="dark"]) .qi-card:hover .qi-tag,
:root:not([data-theme="dark"]) .qi-card:hover .qi-arrow,
:root:not([data-theme="dark"]) .quiz-option:hover,
:root:not([data-theme="dark"]) .az-card:hover .az-card-cat,
:root:not([data-theme="dark"]) .az-card:hover .az-card-cta,
:root:not([data-theme="dark"]) .az-card:hover .az-detail-cat {
  color: #A84F31 !important;
}

/* --- 22) Tooltip readability — ensure every [data-tooltip], [title]'s
   browser-rendered tooltip has high contrast (browsers default to OS but
   we don't control that). Provide a CSS tooltip alternative if one exists. */
[data-tooltip]::after,
[data-tip]::after,
.tooltip-content {
  background: #1A1814 !important;
  color: #FFFFFF !important; /* 16.5 on dark = AAA */
}

/* --- 23) Image-overlay text (e.g. testimonial cards with photo bg) -----
   If any element has an image background AND text inside, force a
   semi-opaque dark scrim so text always meets 4.5:1. Pattern matches
   `.bg-image`, `.has-bg-image`, `[style*="background-image"]`. */
:root:not([data-theme="dark"]) [style*="background-image"] {
  position: relative;
}
/* (We don't add a ::before scrim because that would break visual layout —
   instead, individual image-bg sections already have their own scrim or
   solid-color text-bg. Flagged for visual-only review at this point.) */

/* --- 24) Coral price-now box-shadow border (#c9613f at 0.18 = invisible)
   Used in .live-price.on-sale .price-now::after. Bump opacity to 0.4 for
   3:1 non-text contrast. */
.live-price.on-sale .price-now::after {
  border-color: rgba(168, 79, 49, 0.42) !important;
}

/* --- 25) Hero-cinematic primary CTA hover state in LIGHT mode ----------
   Original sets `background: #c9613f` on hover with `color: var(--bg)=#faf9f5`.
   3.79:1 = fail body. Force darker hover. */
:root:not([data-theme="dark"]) .hero-cine-content .hero-action.primary:hover {
  background: #A84F31 !important;
  color: #FFFFFF !important; /* 5.49 on #A84F31 */
}

/* --- 26) Sale banner expired state: bg #141413 with no explicit text color
   inherits cream — passes (16.6) but the .deskrune-countdown still has
   rgba(0,0,0,0.18) bg on a #141413 banner — the chip becomes pure black,
   the digits inherit cream — passes. No change. */

/* --- 27) Force `var(--accent)` token override for the few elements that
   used the literal `#E8735A` accent value. Keep underlines visible. ----- */
:root:not([data-theme="dark"]) {
  /* If anything on the page resolves to var(--accent) as text, ensure the
     base is darkened. We cannot redefine --accent itself without breaking
     fills/borders, so we only redirect downstream `color: var(--accent)`. */
  /* Achieved via the rule blocks above — this is documentation only. */
}

/* --- 28) Locale-page footer microcopy (small <p> tags) — verified:
   light-mode footer text is var(--ink-gray)=#1F2937 on warm bg #f8f6f2 → 14.5
   AAA. Dark-mode footer is #E5DDD0 on #0F0D0A → 13.6 AAA. No fix needed. */