/* ============================================================
   report-theme.css — dark-theme override for all listing reports.
   Loaded AFTER each report's inline <style>, so !important rules
   here defeat the original light-theme inline rules.
   Palette matches the landing-page hero (Cloudflare client view).
   ============================================================ */

:root {
  --bg:        #0f1115;
  --bg-elev:   #14171c;
  --card:      #1a1d24;
  --line:      #2a2e38;
  --txt:       #e8e9ed;
  --mut:       #9aa0ab;
  --acc:       #e08a3c;
  --acc-dim:   #b16e2d;
  --link:      #4a90e2;
  --ok:        #6fcf97;
  --warn:      #e8b568;
  --bad:       #ff8a7a;
  --info:      #4a90e2;
  --ok-bg:     #1e3a2a;
  --ok-bg-sft: #182a1f;
  --warn-bg:   #3a3320;
  --warn-bg-sft:#2a261a;
  --bad-bg:    #3a1f1f;
  --info-bg:   #1a2738;
  --mono-bg:   #2a2e38;
}

/* ----- Base ----------------------------------------------------- */

html { background: var(--bg) !important; }
body {
  background: var(--bg) !important;
  color: var(--txt) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif !important;
  /* DO NOT override body's max-width / margin / padding here — two layouts coexist:
     • LEGACY layout (no .wrap): body has inline `max-width: 960px; margin: 0 auto;
       padding: 32px`. We push it right of the fixed sidebar via the rule below.
     • NEW layout (.wrap > nav.toc + main): body has inline `margin: 0` and the
       inner .wrap (max-width: 1280px) does the centering. Sidebar is inside flex. */
  overflow-wrap: break-word !important;
}

/* LEGACY body: when wide-viewport sidebar is showing, shift body right of the
   240px fixed sidebar so they don't overlap. We override the inline `margin: 0 auto`
   with `margin-left: 280px` (240px sidebar + 40px gap). Body keeps its `max-width: 960px`
   constraint, so content still has a sensible column. */
@media (min-width: 1100px) {
  body:has(> nav.toc) {
    margin-left: 280px !important;
    margin-right: auto !important;
  }
  /* MODIFIED-LEGACY .wrap (no main child): same shift — the fixed sidebar sits
     to the left of viewport, .wrap shifts right so its centred 960px column
     doesn't sit underneath the sidebar. */
  .wrap:not(:has(> main)) {
    margin-left: 280px !important;
    margin-right: auto !important;
  }
}
/* Below 1100px viewport, collapse modified-legacy sidebar to inline card
   (same fallback as true legacy). */
@media (max-width: 1099px) {
  .wrap:not(:has(> main)) > nav.toc {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    border-radius: 6px !important;
    margin: 14px 0 24px !important;
  }
  .wrap:not(:has(> main)) > nav.toc a { display: inline-block !important; margin-right: 10px !important; }
}

p, li, dd, dt, td, th, span, div { color: inherit; }
strong, b { color: var(--txt) !important; }
em, i { color: inherit; }

a { color: var(--acc) !important; text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--acc); color: var(--bg); }

/* ----- Layout: TWO structures supported, BOTH get a left sidebar - */
/*
   LEGACY structure (most published reports use this):
     <body max-width:960px centered>
       <nav class="toc">…</nav>     ← fixed left sidebar (position:fixed)
       <h1>, <h2>, <section>…       ← centered content column
     </body>

   NEW structure (sidebar+main, post-2026-05-26 reports):
     <body margin:0>
       <div class="wrap">           ← flex container, max-width 1280px
         <nav class="toc">…</nav>   ← 240px sticky sidebar inside flex
         <main>…</main>             ← flex:1, content column
       </div>
     </body>

   Both produce a left sidebar on viewports ≥ 1100px. Below that, the sidebar
   collapses to a card-at-top so it doesn't overlap centered content.

   For LEGACY we use `position: fixed` (sidebar pinned to viewport edge,
   doesn't disturb body's `max-width: 960px; margin: 0 auto` centering).
   For NEW we keep `position: sticky` (sidebar lives inside flex parent).
*/

/* `.wrap` has TWO usage patterns:
   1. sidebar+main flex (has <main> child) → flex container, 1280px wide
   2. modified-legacy block centring (no <main> child) → block, 960px wide
   Discriminate via :has(> main).

   NOTE on margin handling: we deliberately DON'T set `margin` shorthand with !important
   on the no-main case here — the per-viewport @media rules above (line ~53/60) need to
   win on source order, and a later `margin: 0 auto !important` shorthand would override
   their `margin-left: 280px !important` longhand. Centering on narrow viewports happens
   via the @media (max-width: 1099px) block at the bottom of this section. */
.wrap:has(> main)       { display: flex  !important; max-width: 1280px !important; margin: 0 auto !important; }
.wrap:not(:has(> main)) { display: block !important; max-width: 960px  !important; padding: 32px 32px 80px !important; }
/* Narrow-viewport fallback: center the wrap when sidebar collapses to inline card */
@media (max-width: 1099px) {
  .wrap:not(:has(> main)) { margin: 0 auto !important; }
}

/* `.layout` is the makeup-sponges template's grid container (280px sidebar + 1fr main).
   Override the inline `background: #fff` it inherits from body, and let the grid handle layout. */
.layout {
  display: grid !important;
  grid-template-columns: 240px 1fr !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  background: var(--bg) !important;
}
.layout > main { background: var(--bg) !important; }

/* Shared sidebar look (legacy + new + makeup-sponges nav#toc) */
nav.toc, nav#toc {
  background: var(--bg-elev) !important;
  border: none !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 0 !important;
  width: 240px !important;
  min-width: 240px !important;
  padding: 28px 14px 28px 18px !important;
  height: 100vh !important;
  overflow-y: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* LEGACY: nav.toc is a direct child of body — pin it to the viewport */
body > nav.toc {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* NEW: nav.toc inside .wrap WITH main sibling — sticky sidebar in flex container */
.wrap:has(> main) > nav.toc {
  position: sticky !important;
  top: 0 !important;
}

/* MODIFIED-LEGACY: nav.toc inside .wrap WITHOUT main sibling — fixed left sidebar,
   same treatment as true-legacy `body > nav.toc`. Keeps user-preferred sidebar look
   for ALL report structures. The .wrap below shifts its content right of the sidebar
   via margin-left, so they don't overlap. */
.wrap:not(:has(> main)) > nav.toc {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* makeup-sponges: nav#toc is inside .layout grid — sticky within the grid cell */
.layout > nav#toc, nav#toc {
  position: sticky !important;
  top: 0 !important;
}

/* Narrow viewport fallback: when there's not enough room for a 240px sidebar
   alongside a centered 960px body, collapse the sidebar to a card-at-top.
   Threshold 1100px ≈ 960 (body) + ~140 (breathing room). Below this the
   fixed sidebar would overlap the centered body content. */
@media (max-width: 1099px) {
  nav.toc {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    border: 1px solid var(--line) !important;
    border-right: 1px solid var(--line) !important;
    border-radius: 6px !important;
    padding: 14px 18px !important;
    margin: 14px 0 24px !important;
  }
  body > nav.toc { position: static !important; }
}

nav.toc h4, nav#toc h3, nav#toc h4 { color: var(--acc) !important; margin: 0 0 10px !important; }
nav.toc ul,
nav.toc ol,
nav#toc ul,
nav#toc ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 8px !important;
  /* Defeat legacy templates that set `columns: 2` for a wide-block TOC.
     The sidebar is only 240px wide; multi-column wraps items badly. */
  columns: 1 !important;
  column-gap: 0 !important;
  -webkit-columns: 1 !important;
  -moz-columns: 1 !important;
}
nav.toc li, nav#toc li { margin: 2px 0 !important; }
nav.toc a, nav#toc a, nav#toc ol li a {
  color: var(--mut) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 10pt !important;
  line-height: 1.35 !important;
  background: transparent !important;
}
/* Sidebar TOC links: block layout (one per line) for BOTH structures */
nav.toc a, nav#toc a { display: block !important; margin-right: 0 !important; }
/* Narrow viewport fallback: TOC collapses to a top card with inline links */
@media (max-width: 1099px) {
  nav.toc a { display: inline-block !important; margin-right: 10px !important; }
}
nav.toc a:hover, nav#toc a:hover, nav#toc ol li a:hover {
  background: var(--card) !important;
  color: var(--acc) !important;
  text-decoration: none;
}
nav.toc a.active, nav#toc a.active, nav#toc ol li a.active {
  background: var(--acc) !important;
  color: var(--bg) !important;
}
/* makeup-sponges template uses numeric counters on TOC items — re-tint to muted */
nav#toc ol li a::before { color: var(--mut) !important; }
nav.toc a.active { background: var(--acc) !important; color: var(--bg) !important; }

main {
  flex: 1 1 0 !important;
  /* `min-width: 0` is the critical bit — a default flex item has min-width: auto,
     which means it can't shrink below its intrinsic content width. Long h1s or
     wide tables would then push the column out past the sidebar. Setting min-width: 0
     lets main shrink to fit the available viewport. */
  min-width: 0 !important;
  padding: 32px 40px !important;
  max-width: 1000px !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}

/* ----- Headings ------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: auto;
  /* Long product titles with em-dashes / unbreakable runs would overflow without this. */
}
h1 {
  color: var(--acc) !important;
  border-bottom: 3px solid var(--acc) !important;
  padding-bottom: 10px !important;
}
h2 {
  color: var(--txt) !important;
  background: var(--card) !important;
  border-left: 4px solid var(--acc) !important;
  padding: 10px 14px !important;
}
h3 { color: var(--acc) !important; }
h4 { color: var(--txt) !important; }
h5, h6 { color: var(--mut) !important; }

/* ----- Tables: contain wide tables in a scroll container ------- */

main table {
  /* Tables with many columns or long cell text would push main wider than the
     viewport. `max-width: 100%` and `table-layout: auto` keep them contained;
     for genuinely overflowing tables, wrap in a div with `overflow-x: auto`
     in the source (the table itself can't have overflow-x). */
  max-width: 100% !important;
  table-layout: auto !important;
  word-break: break-word !important;
}
main td, main th {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  /* Don't let single long cell tokens (URLs, em-dashed phrases) blow out column widths. */
}

main pre, main code, main .copy, main .prompt-box, main .prompt-block {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: pre-wrap !important;
  /* Prompt blocks and code blocks frequently contain long unbroken strings.
     Force them to wrap inside the column rather than overflowing right. */
}

/* Long product names in sub-headings (.sub) also need wrapping */
.sub, .meta { overflow-wrap: break-word !important; word-wrap: break-word !important; }

/* ----- Meta / note / footnote / small --------------------------- */

.meta, .meta-row, .note, .small { color: var(--mut) !important; }
.footnote {
  color: var(--mut) !important;
  border-top: 1px solid var(--line) !important;
  padding-top: 12px !important;
}
hr { border: none !important; border-top: 1px dashed var(--line) !important; }

/* ----- Tables --------------------------------------------------- */

table { border-collapse: collapse !important; }
th {
  background: var(--card) !important;
  color: var(--acc) !important;
  border: 1px solid var(--line) !important;
}
td {
  background: transparent !important;
  color: var(--txt) !important;
  border: 1px solid var(--line) !important;
}
tr:nth-child(even) td { background: var(--bg-elev) !important; }

/* ----- Status cells (override .ok/.warn/.info/.bad !important) -- */

td.ok,       .ok        { background: var(--ok-bg)      !important; color: var(--ok)   !important; }
td.okSoft,   .okSoft    { background: var(--ok-bg-sft)  !important; color: var(--ok)   !important; }
td.warn,     .warn      { background: var(--warn-bg)    !important; color: var(--warn) !important; }
td.warnSoft, .warnSoft  { background: var(--warn-bg-sft)!important; color: var(--warn) !important; }
td.info,     .info      { background: var(--info-bg)    !important; color: var(--info) !important; }
td.bad,      .bad       { background: var(--bad-bg)     !important; color: var(--bad)  !important; }

/* makeup-sponges template table row tints (amber/green/blue/total) */
table tr.amber td { background: var(--warn-bg-sft) !important; color: var(--warn) !important; }
table tr.green td { background: var(--ok-bg-sft)   !important; color: var(--ok)   !important; }
table tr.blue  td { background: var(--info-bg)     !important; color: var(--info) !important; }
table tr.total td { background: var(--warn-bg)     !important; color: var(--warn) !important; font-weight: 700 !important; }

/* Misc inline classes from makeup-sponges template */
.img-source { color: var(--mut) !important; }
.quote { border-left-color: var(--acc) !important; color: var(--mut) !important; background: var(--bg-elev) !important; }

/* ----- Defensive: catch INLINE-STYLED light backgrounds ---------- */
/* Many skill outputs (amazon-listing-rewrite, amazon-aplus-content, amazon-image-ai-prompts,
   amazon-kw-research competitor.html) emit raw `<div style="background:#XXXXXX">` blocks
   with NO class. Class-based selectors can't reach them — attribute selectors can.
   ALSO catches the `style="background:var(--xxx-bg)"` form where the skill defines
   pastel CSS variables in its inline `<style>` block.
   We catch every pastel hex code and CSS variable seen in the wild and override. */

/* Neutral light backgrounds → dark elev + light text + accent rail */
[style*="background:#F8F8F8"], [style*="background:#f8f8f8"],
[style*="background: #F8F8F8"], [style*="background: #f8f8f8"],
[style*="background:#F8FAFC"], [style*="background:#f8fafc"],
[style*="background: #F8FAFC"], [style*="background: #f8fafc"],
[style*="background:#FAFBFC"], [style*="background:#fafbfc"],
[style*="background: #FAFBFC"], [style*="background: #fafbfc"],
[style*="background:#FFFFFF"], [style*="background:#ffffff"],
[style*="background:#FFF"], [style*="background:#fff"],
[style*="background: #fff"], [style*="background: #FFF"],
[style*="background:white"], [style*="background: white"],
[style*="background:var(--very-light)"], [style*="background:var(--stripe)"],
[style*="background:var(--bg-elev)"] {
  background: var(--bg-elev) !important;
  color: var(--txt) !important;
  border-left: 4px solid var(--acc) !important;
  border-radius: 6px !important;
}

/* GREEN tinted callouts (success / our-ASIN / v2-suggestion) */
[style*="background:#C6EFCE"], [style*="background:#c6efce"],
[style*="background:#E2EFDA"], [style*="background:#e2efda"],
[style*="background:#E8F5E8"], [style*="background:#e8f5e8"],
[style*="background:#DCFCE7"], [style*="background:#dcfce7"],
[style*="background:#D4EDDA"], [style*="background:#d4edda"],
[style*="background:var(--green-bg)"], [style*="background:var(--green)"],
[style*="background:var(--green2)"], [style*="background:var(--ok-bg)"] {
  background: var(--ok-bg) !important; color: var(--ok) !important;
  border-left: 4px solid var(--ok) !important;
  border-radius: 6px !important;
}

/* YELLOW / amber tinted callouts (warning / info / Spanish-cluster row) */
[style*="background:#FFEB9C"], [style*="background:#ffeb9c"],
[style*="background:#FFF2CC"], [style*="background:#fff2cc"],
[style*="background:#FEF3C7"], [style*="background:#fef3c7"],
[style*="background:#FEF9E7"], [style*="background:#fef9e7"],
[style*="background:#FFF7EA"], [style*="background:#fff7ea"],
[style*="background:#FFFBEB"], [style*="background:#fffbeb"],
[style*="background:var(--yellow-bg)"], [style*="background:var(--yellow)"],
[style*="background:var(--yellow2)"], [style*="background:var(--amber-bg)"],
[style*="background:var(--warn-bg)"] {
  background: var(--warn-bg) !important; color: var(--warn) !important;
  border-left: 4px solid var(--warn) !important;
  border-radius: 6px !important;
}

/* RED / pink tinted callouts (error / banned-claim / competitor-row) */
[style*="background:#FCE4D6"], [style*="background:#fce4d6"],
[style*="background:#FAD2D2"], [style*="background:#fad2d2"],
[style*="background:#FEE2E2"], [style*="background:#fee2e2"],
[style*="background:#FECACA"], [style*="background:#fecaca"],
[style*="background:#F8D7DA"], [style*="background:#f8d7da"],
[style*="background:var(--red-bg)"], [style*="background:var(--red)"],
[style*="background:var(--pink-bg)"], [style*="background:var(--bad-bg)"] {
  background: var(--bad-bg) !important; color: var(--bad) !important;
  border-left: 4px solid var(--bad) !important;
  border-radius: 6px !important;
}

/* BLUE tinted callouts (info / hint / link-cluster) */
[style*="background:#DDEBF7"], [style*="background:#ddebf7"],
[style*="background:#DBEAFE"], [style*="background:#dbeafe"],
[style*="background:#E0F2FE"], [style*="background:#e0f2fe"],
[style*="background:#CCE5FF"], [style*="background:#cce5ff"],
[style*="background:var(--blue-bg)"], [style*="background:var(--blue)"],
[style*="background:var(--info-bg)"] {
  background: var(--info-bg) !important; color: var(--info) !important;
  border-left: 4px solid var(--info) !important;
  border-radius: 6px !important;
}

/* Inline border-left colours in light hex on these blocks → remap to dark-palette */
[style*="border-left:6px solid #1F4E78"], [style*="border-left: 6px solid #1F4E78"],
[style*="border-left:6px solid #1f4e78"], [style*="border-left: 6px solid #1f4e78"],
[style*="border-left:4px solid #1F4E78"], [style*="border-left:4px solid #1f4e78"] {
  border-left-color: var(--acc) !important;
}
[style*="border-left:6px solid #1f5a2c"], [style*="border-left:4px solid #1f5a2c"],
[style*="border-left: 6px solid #1f5a2c"] { border-left-color: var(--ok) !important; }
[style*="border-left:6px solid #C28F00"], [style*="border-left:4px solid #C28F00"],
[style*="border-left:6px solid #c28f00"], [style*="border-left:4px solid #c28f00"] {
  border-left-color: var(--warn) !important;
}
/* Override common inline text colours that pair with the light backgrounds */
[style*="color:#222"], [style*="color: #222"],
[style*="color:#111"], [style*="color: #111"],
[style*="color:#333"], [style*="color: #333"] { color: var(--txt) !important; }
[style*="color:#1F4E78"], [style*="color: #1F4E78"],
[style*="color:#1f4e78"], [style*="color: #1f4e78"] { color: var(--acc) !important; }
[style*="color:#1f5a2c"], [style*="color: #1f5a2c"] { color: var(--ok) !important; }
[style*="color:#7a5a00"], [style*="color: #7a5a00"] { color: var(--warn) !important; }
[style*="color:#7a2c1c"], [style*="color: #7a2c1c"] { color: var(--bad) !important; }

/* ----- Cards / call-out blocks ---------------------------------- */
/* Naming convention varies across report templates:
   • rewrite.html         → .copyblock / .bullet-card / .qa-card / .callout / .masthead
   • aplus / image-audit  → .copy-block / .bullet-row / .qa-block
   Both name styles are dark-themed here so the light-background source HTML
   doesn't leak white panels with light-text-on-white inside dark reports. */

/* Universal "deliverable card / callout" selector list — every report template
   uses a slightly different class name for the same intent (light bg + left rail
   = "important block"). Enumerate them all here so dark-theme overrides fire.
   NOTE: `.card` is intentionally excluded from this group — landing index.html
   uses `.card` for its own (already dark-themed) report-selection cards. We
   handle `.card` separately below with landing-page exclusion. */
.copy-block, .bullet-row, .qa-block,
.copyblock, .bullet-card, .qa-card, .callout, .masthead,
.box, .bullet, .faq, .copy, .action-card,
.slot-card, .module-card, .preview, .preview-col, .preview-frame,
.qa-mini, .qa, .prompt-card, .prompt-block,
.ref-placeholder, .desc-para, .findings, .copy-block, .desc-block, .product-desc {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--acc) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}

/* `.card` — used by BOTH landing (already dark) AND report templates (need theming).
   Discriminate via `:has(.landing-wrap)` on body. */
body:not(:has(.landing-wrap)) .card {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-left: 4px solid var(--acc) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
/* Landing's own .card — keep its existing inline look (just confirm dark) */
.landing-wrap .card {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--txt) !important;
}
/* Inner headers of these cards (slot-header / module-header / card-img / prompt block
   inside a card) inherit dark-elev too, slightly differentiated for visual hierarchy. */
.slot-header, .module-header, .card-img,
.bullet-card .lead, .qa-card .q, .qa-block .q, .bullet-row .header {
  background: var(--card) !important;
  color: var(--acc) !important;
  border-bottom: 1px solid var(--line) !important;
}
.mock-img-slot {
  background: var(--bg-elev) !important;
  border: 1px dashed var(--line) !important;
  color: var(--mut) !important;
}
/* Mid-listing pills used by image-audit slot risk markers */
.pill-risk-high { background: var(--bad-bg)  !important; color: var(--bad)  !important; }
.pill-risk-med  { background: var(--warn-bg) !important; color: var(--warn) !important; }
.pill-risk-low  { background: var(--ok-bg)   !important; color: var(--ok)   !important; }

/* Coloured pills used by Stress-Ball / Foam-Play-Mat templates (pastel hex codes) */
.pill-green  { background: var(--ok-bg)   !important; color: var(--ok)   !important; }
.pill-yellow { background: var(--warn-bg) !important; color: var(--warn) !important; }
.pill-red    { background: var(--bad-bg)  !important; color: var(--bad)  !important; }
.pill-blue   { background: var(--info-bg) !important; color: var(--info) !important; }

/* Status / colored info blocks (Stress-Ball image-audit + rewrite + prompts) */
.green-block, .qc-list      { background: var(--ok-bg)   !important; color: var(--ok)   !important; border-left: 4px solid var(--ok)   !important; border-radius: 6px !important; }
.red-block, .overlay-block  { background: var(--warn-bg) !important; color: var(--warn) !important; border-left: 4px solid var(--warn) !important; border-radius: 6px !important; }
.rec-block, .backend-block  { background: var(--info-bg) !important; color: var(--info) !important; border-left: 4px solid var(--info) !important; border-radius: 6px !important; }
.old-block                  { background: var(--bad-bg)  !important; color: var(--bad)  !important; border-left: 4px solid var(--bad)  !important; border-radius: 6px !important; }
.specs, .faq-block          { background: var(--bg-elev) !important; color: var(--txt)  !important; border: 1px solid var(--line) !important; border-radius: 6px !important; }
.slot-no-img                { background: var(--bg-elev) !important; color: var(--mut)  !important; border: 1px dashed var(--line) !important; }
.preview-desktop, .preview-mobile {
  background: var(--bg-elev) !important;
  background-image: none !important;  /* override the linear-gradient */
  border: 1px solid var(--line) !important;
  color: var(--mut) !important;
}
/* Defeat inline backgrounds inside these too */
.green-block *, .red-block *, .rec-block *, .old-block *, .overlay-block *,
.specs *, .faq-block *, .qc-list *, .backend-block *,
.preview-desktop *, .preview-mobile * { background-color: transparent !important; }
/* But preserve the .copy-block green-tint variant used by Stress-Ball rewrite
   (which uses .copy-block with a green background to signal "new copy") — let it
   inherit our generic deliverable-card look (bg-elev + accent rail). Already handled. */
/* `header.doc-header` is the makeup-sponges section title block (page top).
   It's a section header, not a callout — bottom border, no left rail.
   `header.product-head` is the LANDING page hero (already dark-themed inline);
   don't touch it here. */
header.doc-header, .doc-header {
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--txt) !important;
  padding-bottom: 14px !important;
}
header.doc-header h1, .doc-header h1,
header.doc-header h2, .doc-header h2,
header.doc-header h3, .doc-header h3 { color: var(--acc) !important; border: 0 !important; }
header.doc-header p.meta, .doc-header p.meta,
header.doc-header .meta, .doc-header .meta { color: var(--mut) !important; }
.copy-block.title-box { color: var(--txt) !important; }
.copy-block p, .qa-block .a, .bullet-row .body { color: var(--txt) !important; }
.bullet-row .header { color: var(--acc) !important; }
.qa-block .q       { color: var(--acc) !important; }

/* rewrite.html-specific inner elements */
.copyblock           { color: var(--txt) !important; white-space: pre-wrap !important; }
.bullet-card .lead   { color: var(--acc) !important; }
.bullet-card         { color: var(--txt) !important; }
.qa-card .q          { color: var(--acc) !important; }
.qa-card             { color: var(--txt) !important; }
.callout             { color: var(--txt) !important; }
.masthead            { color: var(--txt) !important; }
.masthead h1, .masthead h2, .masthead h3 { color: var(--acc) !important; border: 0 !important; }
.masthead .meta      { color: var(--mut) !important; }

/* Defeat any inline white/light backgrounds that appear inside these blocks.
   (Note: .card * is excluded — handled separately below with landing-page guard.) */
.copyblock *, .bullet-card *, .qa-card *, .callout *, .masthead *,
.copy-block *, .bullet-row *, .qa-block *,
.box *, .bullet *, .faq *, .copy *, .action-card *,
.slot-card *, .module-card *, .preview *, .preview-col *, .preview-frame *,
.qa-mini *, .qa *, .prompt-card *, .prompt-block *,
.desc-para *, .findings *, .desc-block *, .product-desc * {
  background-color: transparent !important;
}
body:not(:has(.landing-wrap)) .card * { background-color: transparent !important; }

/* …but allow nested pills/code/inner-headers to keep their own background */
.copyblock code, .bullet-card code, .qa-card code, .callout code, .masthead code,
.copy-block code, .bullet-row code, .qa-block code,
.box code, .slot-card code, .module-card code, .prompt-card code,
.copyblock .pill, .bullet-card .pill, .qa-card .pill, .callout .pill, .masthead .pill,
.copy-block .pill, .bullet-row .pill, .qa-block .pill,
.box .pill, .slot-card .pill, .module-card .pill, .prompt-card .pill {
  background-color: var(--mono-bg) !important;
}
/* Inner header bars (slot-header/module-header/card-img) keep --card bg even though
   they're descendants of card containers above */
.slot-card .slot-header, .module-card .module-header,
.slot-card .card-img,
body:not(:has(.landing-wrap)) .card .card-img {
  background-color: var(--card) !important;
}
.masthead .pill-green  { background: var(--ok-bg)   !important; color: var(--ok)   !important; }
.masthead .pill-yellow { background: var(--warn-bg) !important; color: var(--warn) !important; }
.masthead .pill-red    { background: var(--bad-bg)  !important; color: var(--bad)  !important; }
.masthead .pill-blue   { background: var(--info-bg) !important; color: var(--info) !important; }

.kpi-grid { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
.kpi {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-left: 6px solid var(--acc) !important;
  color: var(--txt) !important;
  flex: 1 1 200px !important;
}
.kpi .label { color: var(--mut) !important; }
.kpi .value { color: var(--acc) !important; }

/* ----- Pills ---------------------------------------------------- */

.pill          { display: inline-block; }
.pill-high     { background: var(--ok-bg)   !important; color: var(--ok)   !important; }
.pill-med      { background: var(--warn-bg) !important; color: var(--warn) !important; }
.pill-low      { background: var(--bad-bg)  !important; color: var(--bad)  !important; }
.pill-info     { background: var(--info-bg) !important; color: var(--info) !important; }

/* ----- Code / mono --------------------------------------------- */

code, .mono, pre {
  background: var(--mono-bg) !important;
  color: var(--warn) !important;
  border-radius: 3px;
}

/* ----- Report-specific containers (aplus / prompts / image-audit) - */

/* aplus.html — module cards */
.module-card {
  background: var(--card) !important;
  border-left: 6px solid var(--acc) !important;
  border-radius: 8px !important;
  color: var(--txt) !important;
}
.module-card h3 { color: var(--acc) !important; }
.module-card h4 { color: var(--acc) !important; }
.module-card .module-tag {
  background: var(--acc) !important;
  color: var(--bg) !important;
}
.module-card .copy {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.module-card .copy .headline { color: var(--acc) !important; }
.module-card .copy .subline  { color: var(--txt) !important; }
.module-card .copy .body     { color: var(--txt) !important; }
.module-card .image-desc {
  background: var(--bg-elev) !important;
  border-left: 3px solid var(--warn) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.module-card .alt-text {
  background: var(--bg-elev) !important;
  color: var(--mut) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
}
.module-card .alt-text code {
  background: var(--mono-bg) !important;
  color: var(--warn) !important;
  border: 1px solid var(--line) !important;
}

/* aplus.html — Q&A blocks */
.qa {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.qa .q { color: var(--acc) !important; }
.qa .a { color: var(--txt) !important; }

.pill-premium { background: var(--acc) !important; color: var(--bg) !important; }

/* prompts.html — prompt cards */
.prompt-card {
  background: var(--card) !important;
  border-left: 6px solid var(--acc) !important;
  border-radius: 8px !important;
  color: var(--txt) !important;
}
.prompt-card h3 { color: var(--acc) !important; }
.prompt-card h4 { color: var(--acc) !important; }
.prompt-card .slot-tag {
  background: var(--acc) !important;
  color: var(--bg) !important;
}
.prompt-card .slot-tag.aplus {
  background: var(--warn) !important;
  color: var(--bg) !important;
}
.prompt-card .ref-row img {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
}
.prompt-block {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.prompt-block .label       { color: var(--acc) !important; }
.prompt-block .prompt-text { color: var(--txt) !important; }
.prompt-block pre          { color: var(--txt) !important; background: transparent !important; }

.overlay-spec {
  background: var(--bg-elev) !important;
  border-left: 3px solid var(--warn) !important;
  color: var(--txt) !important;
  border-radius: 6px !important;
}
.overlay-spec strong { color: var(--warn) !important; }
.overlay-spec .row   { color: var(--txt) !important; }

.winner { color: var(--ok) !important; }

/* Inline dark-brown color used on A+ slot-tag headlines (style="color:#843C0C") */
[style*="color:#843C0C"], [style*="color: #843C0C"] { color: var(--warn) !important; }
[style*="color:#806000"], [style*="color: #806000"] { color: var(--warn) !important; }
[style*="color:#1E5631"], [style*="color: #1E5631"] { color: var(--ok)   !important; }
[style*="color:#1F4E78"], [style*="color: #1F4E78"] { color: var(--acc)  !important; }
[style*="color:#333"],    [style*="color: #333"]    { color: var(--txt)  !important; }
[style*="color:#555"],    [style*="color: #555"]    { color: var(--txt)  !important; }
[style*="color:#444"],    [style*="color: #444"]    { color: var(--txt)  !important; }
[style*="color:#595959"], [style*="color: #595959"] { color: var(--mut)  !important; }

.pill-risk-zero { background: var(--ok-bg)   !important; color: var(--ok)   !important; }
.pill-risk-low  { background: var(--warn-bg) !important; color: var(--warn) !important; }
.pill-risk-med  { background: var(--bad-bg)  !important; color: var(--bad)  !important; }
.pill-risk-high { background: var(--bad-bg)  !important; color: var(--bad)  !important; }
.pill-zero      { background: var(--ok-bg)   !important; color: var(--ok)   !important; }

/* image-audit.html — slot cards & snapshot */
.slot-card {
  background: var(--card) !important;
  border-left: 6px solid var(--acc) !important;
  color: var(--txt) !important;
  border-radius: 8px !important;
}
.slot-card img {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
}
.snapshot-ok {
  background: var(--ok-bg) !important;
  border: 1px solid var(--ok) !important;
  border-left: 6px solid var(--ok) !important;
  color: var(--ok) !important;
}

/* Catch-all: any inline "background:#fff" / "background:white" style attribute */
[style*="background:#fff"], [style*="background: #fff"],
[style*="background:white"], [style*="background: white"],
[style*="background-color:#fff"], [style*="background-color: #fff"],
[style*="background-color:white"], [style*="background-color: white"] {
  background: var(--bg-elev) !important;
  color: var(--txt) !important;
}

/* ----- Images / figures stay untouched but border ------------- */

img { border-radius: 6px; }

/* ----- Mobile / narrow viewport ---------------------------------
   Bumped the breakpoint up to 1024px: the sidebar (240px) + main (max 1000px)
   wants 1240px. Below that, the main column gets squeezed and long h1s or
   wide tables overflow. Collapse to a single column instead — TOC becomes
   a top bar, main fills the width. */

@media (max-width: 1024px) {
  .wrap { flex-direction: column !important; max-width: 100% !important; }
  nav.toc {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 220px !important;
    position: relative !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    /* Sticky horizontal TOC at the top of narrow viewports */
  }
  nav.toc ul, nav.toc ol {
    /* On narrow viewports, allow the TOC to flow into multiple columns
       (it's now horizontal, not a tall sidebar) */
    columns: 2 !important;
    column-gap: 16px !important;
  }
  main {
    padding: 24px 18px !important;
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  /* On phones: TOC becomes a single column, smaller */
  nav.toc ul, nav.toc ol {
    columns: 1 !important;
  }
  nav.toc { max-height: 160px !important; padding: 14px !important; }
  main { padding: 16px 14px !important; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 16px !important; padding: 8px 10px !important; }
}

/* ----- Print: drop dark theme so paper printouts stay readable - */

@media print {
  body { background: #fff !important; color: #222 !important; }
  nav.toc { display: none !important; }
  .wrap { display: block !important; }
  main { padding: 0 !important; max-width: none !important; }
  h1 { color: #1F4E78 !important; border-bottom-color: #1F4E78 !important; }
  h2 { color: #fff !important; background: #1F4E78 !important; border-left: none !important; }
  h3 { color: #1F4E78 !important; }
  a { color: #1F4E78 !important; }
  td, th { color: #222 !important; background: #fff !important; border-color: #BFBFBF !important; }
  th { background: #1F4E78 !important; color: #fff !important; }
  .copy-block, .bullet-row, .qa-block, .kpi { background: #F8FAFC !important; color: #222 !important; }
  code, .mono { background: #F1F3F5 !important; color: #222 !important; }
}
