/* ============================================================
   photoaicompany BLACK & WHITE FORCE THEME
   Loaded LAST on every page. Every rule uses !important so it
   beats page styles and inline styles alike.
   User directive: ALL text -> white, ALL buttons/backgrounds/
   backdrops -> black. Photos (img/video/url backgrounds) kept.
   ============================================================ */

/* Base: pure black canvas, white text */
html, body {
  background: #000 !important;
  color: #fff !important;
}

/* EVERY text element -> white */
body, body *,
h1, h2, h3, h4, h5, h6,
p, a, span, li, ul, ol, dl, dt, dd,
td, th, label, small, strong, b, em, i,
figcaption, blockquote, code, pre, kbd, samp,
legend, output, summary, cite, q, time, mark {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important; /* kills gradient-clipped text */
  text-shadow: none !important;
}
a, a:visited, a:hover, a:active { color: #fff !important; }
mark { background: #fff !important; color: #000 !important;
  -webkit-text-fill-color: #000 !important; } /* readable highlight */

/* Structural surfaces -> black.
   V2: UNIVERSAL — every element gets a black background, because the
   element-list approach missed span/li/ol/ul/a/i/em (purple badges,
   white legend cards, pills all survived). url() photos still paint
   over background-color, so photographic backgrounds are unaffected.
   2026-10-07: photographic background selectors (.pg-backdrop,
   .tool-hero-band, .thb-scrim) are excluded — including their ::before/
   ::after — so translucent legibility scrims are not flattened into
   opaque black veils over the photos (filmstrip lesson).
   2026-10-24: .price-card.hot + .btn.ghost carved out — Pro plan
   2026-10-29: .pact-bars carved out - pricing storage bars keep authored white fills (main ruling)
   2026-10-24: .ig-dash carved out — telemetry bars/line chart keep authored white accents (universal bg blacked out the bars)
   emphasis and ghost-CTA affordance use filled dark-gray surfaces
   with white text (main ruling 2026-10-24); fills live in site.css. */
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.tool-hero-band):not(.thb-scrim):not(.thb-inner):not(.pg-backdrop-cap):not(img):not(video):not(canvas):not(svg):not(.billing-toggle):not(.billing-toggle *):not(.mock-rail span):not(.price-card.hot):not(.price-card.hot *):not(.btn.ghost):not(.ig-dash):not(.ig-dash *):not(.pact-bars):not(.pact-bars *),
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.tool-hero-band):not(.thb-scrim):not(.thb-inner):not(.pg-backdrop-cap):not(img):not(video):not(canvas):not(svg):not(.billing-toggle):not(.billing-toggle *):not(.mock-rail span):not(.price-card.hot):not(.price-card.hot *):not(.btn.ghost):not(.ig-dash):not(.ig-dash *):not(.pact-bars):not(.pact-bars *)::before,
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.tool-hero-band):not(.thb-scrim):not(.thb-inner):not(.pg-backdrop-cap):not(img):not(video):not(canvas):not(svg):not(.billing-toggle):not(.billing-toggle *):not(.mock-rail span):not(.price-card.hot):not(.price-card.hot *):not(.btn.ghost):not(.ig-dash):not(.ig-dash *):not(.pact-bars):not(.pact-bars *)::after {
  background-color: #000 !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Kill gradient / colored background-images, KEEP photographic ones.
   Known photo selectors are excluded from the kill.
   2026-10-07: .pg-backdrop (414 site-wide photographic bands) and
   .tool-hero-band/.thb-scrim (95 tool-page heroes) were missing here —
   every one of them rendered as a black void. */
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.tool-hero-band):not(.thb-scrim),
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.tool-hero-band):not(.thb-scrim)::before,
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.tool-hero-band):not(.thb-scrim)::after {
  background-image: none !important;
}
/* Neutralize gradient-clipped text leftovers */
body * {
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* Data-viz exception: telemetry chart bars read as white on black panels.
   (audit 2026-10-08: homepage + pricing "LIVE TELEMETRY" breakdown bars and
   metric accent strips rendered invisible black-on-black; values floated
   with no bars.) Tooltips keep the dark treatment so their white text
   stays readable.
   2026-10-08 11:35 REGRESSION NOTE: a plain-selector (0,2,0) version of this
   rule LOSES the !important tie against the universal kill (0,9,5) — the
   08:55 run's fix was silently reverted and the bars stayed black live.
   This mirrors the universal :not() chain so the exception anchors at
   (0,11,5) and wins. NEVER downgrade this to a plain selector. */
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.tool-hero-band):not(.thb-scrim):not(.thb-inner):not(.pg-backdrop-cap):not(img):not(video):not(canvas):not(svg).ig-dash .ig-bar,
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.tool-hero-band):not(.thb-scrim):not(.thb-inner):not(.pg-backdrop-cap):not(img):not(video):not(canvas):not(svg).ig-dash .ig-live i {
  background-color: #fff !important;
  background-image: none !important;
}

/* Photographic hero text exception: .tool-hero-band descendants.
   (audit 2026-10-08 11:35: /datasafety/ .tool-hero-band hero rendered as
   opaque black slabs veiling the photographic backdrop — the universal kill
   hits DESCENDANTS of the band, not just the band itself. The 08:55 run's
   plain-transparent fix was silently reverted; re-applied here as a (0,12,5)
   mirrored exception. Buttons/CTAs inside the band keep the black treatment
   via the :not(.btn):not(.cta):not(button) guard.) */
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.thb-scrim):not(.thb-inner):not(.pg-backdrop-cap):not(img):not(video):not(canvas):not(svg).tool-hero-band :is(.crumb, .breadcrumb, .tool-hero, h1, h2, h3, p, span, a, div, nav):not(.btn):not(.cta):not(button),
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.thb-scrim):not(.thb-inner):not(.pg-backdrop-cap):not(img):not(video):not(canvas):not(svg).tool-hero-band :is(.crumb, .breadcrumb, .tool-hero, h1, h2, h3, p, span, a, div, nav):not(.btn):not(.cta):not(button)::before,
body *:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.thb-scrim):not(.thb-inner):not(.pg-backdrop-cap):not(img):not(video):not(canvas):not(svg).tool-hero-band :is(.crumb, .breadcrumb, .tool-hero, h1, h2, h3, p, span, a, div, nav):not(.btn):not(.cta):not(button)::after {
  background-color: transparent !important;
  background-image: none !important;
}

/* Buttons / CTAs -> black bg, white text, white hairline.
   The [class] boost (0-1-1) beats `!bg-*`/`!text-*` important utilities.
   2026-10-24: .btn.ghost carved out — ghost CTAs get a filled dark-gray
   surface in site.css for affordance (main ruling 2026-10-24). */
button, .btn:not(.ghost), [role="button"],
input[type="submit"], input[type="button"], input[type="reset"],
.cta, a.btn:not(.ghost), a.cta,
button[class], .btn[class]:not(.ghost), a.btn[class]:not(.ghost) {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
button:hover, .btn:hover, a.btn:hover,
input[type="submit"]:hover {
  background-color: #1a1a1a !important;
  border-color: #fff !important;
}
button:disabled, .btn:disabled { opacity: .45 !important; }

/* Inputs -> black, white text */
input, textarea, select {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #fff !important;
  outline: 2px solid rgba(255,255,255,.6) !important;
  outline-offset: 1px;
}
::placeholder { color: rgba(255,255,255,.55) !important; -webkit-text-fill-color: rgba(255,255,255,.55) !important; }
select option { background: #000 !important; color: #fff !important; }

/* Modals / backdrops / overlays -> near-black */
.modal, .dialog, .backdrop, .overlay, .scrim,
[role="dialog"], .popup, .sheet {
  background-color: rgba(0,0,0,.94) !important;
  background-image: none !important;
}

/* Icon SVGs -> white (figure + .ig-dash infographics keep authored stroke/fill) */
svg:not(figure svg):not(.ig-dash svg), svg:not(figure svg):not(.ig-dash svg) * {
  fill: #fff !important;
  stroke: #fff !important;
}
/* ...but never hide strokes that were explicitly none */
svg:not(figure svg):not(.ig-dash svg) *[stroke="none"], svg:not(figure svg):not(.ig-dash svg)[stroke="none"] {
  stroke: none !important;
}

/* Text selection stays readable */
::selection { background: #fff !important; color: #000 !important;
  -webkit-text-fill-color: #000 !important; }

/* Kill colored glows / shadows site-wide */
body * { box-shadow: none !important; }

/* ---- Support widget (sw-*) -> B/W ---- */
[class*="sw-"] {
  background-color: #000 !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
[class*="sw-"] button {
  background-color: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.5) !important;
}

/* Never touch motion media (canvas/video). Owned marketing photos are
   grayscaled by the B/W theme R2 block in site.css (main ruling
   2026-10-24: owned imagery is in-scope for black/white). */
video, canvas, picture, source { filter: none !important; }

/* Scrollbars to match */
::-webkit-scrollbar { background: #000 !important; }
::-webkit-scrollbar-thumb { background: #333 !important; border: 1px solid #555 !important; }
* { scrollbar-color: #333 #000 !important; }

/* The filmstrip's shimmer wash (::after) must not paint at all — the
   universal black-background rule above would otherwise turn this
   translucent decorative sweep into an OPAQUE black veil covering the
   entire template marquee (bw-verify 2026-10-06: the whole filmstrip
   rendered as an empty black band). display isn't contested by the
   universal rule, so plain specificity wins. */
.filmstrip::after { display: none !important; }

/* Background-drawn icon glyphs stay white (2026-10-06 upgrade audit).
   The universal black-background rule above paints background-colored
   spans invisible on the black chrome. The mobile hamburger
   (.nav-toggle span, background:currentColor) is the live instance:
   without this exception the menu button renders as an empty box on
   every page at <=760px. The :not() chain mirrors the universal rule so
   this selector (0,14,3) beats it (0,13,1); both are !important. */
body button.nav-toggle:not(.hero-band):not(.price-hero):not(.cta-band):not(.hero-lux):not(.pg-backdrop):not(.tool-hero-band):not(.thb-scrim):not(.thb-inner):not(.pg-backdrop-cap):not(img):not(video):not(canvas):not(svg) span {
  background-color: #fff !important;
  background-image: none !important;
  border-color: transparent !important;
}

/* SVG infographics: force black cards + white text (2026-10-06 bw-verify).
   The infographics.mjs generator emits light fills (#f8f6fd/#fff cards) and
   purple accents (#7d2ae8) as SVG presentation attributes; CSS fill/stroke
   with !important beats presentation attributes. Charts stay legible:
   white text/lines on black, strokes as white at low alpha. <image> (photos)
   untouched. */
.ig svg rect[fill]:not([fill="none"]) { fill: #0a0a0a !important; }
.ig svg circle[fill]:not([fill="none"]) { fill: #0a0a0a !important; }
.ig svg path[fill]:not([fill="none"]) { fill: #0a0a0a !important; }
.ig svg text { fill: #fff !important; }
.ig svg [stroke]:not([stroke="none"]) { stroke: rgba(255,255,255,.28) !important; }
.ig svg line[stroke]:not([stroke="none"]),
.ig svg polyline[stroke]:not([stroke="none"]),
.ig svg polygon[stroke]:not([stroke="none"]) { stroke: rgba(255,255,255,.85) !important; }

/* Decorative interface borders only. Preserve artwork, chart and icon geometry. */
body,body *:not(svg):not(svg *):not(canvas):not(img):not(video),body *::before,body *::after{border-width:0!important;border-style:none!important;outline:none!important;box-shadow:none!important}
body :is(a,button,input,select,textarea,[tabindex]):focus-visible{background-color:#333!important;text-decoration:underline!important;text-underline-offset:4px!important;outline:none!important}
body :is(a,button,input,select,textarea,[tabindex]):focus-visible:focus-visible:focus-visible:focus-visible:focus-visible:focus-visible:focus-visible:focus-visible:focus-visible:focus-visible:focus-visible:focus-visible:focus-visible:focus-visible{background-color:#333!important;text-decoration:underline!important;text-underline-offset:4px!important}

body *:not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(svg):not(svg *):not(canvas):not(img):not(video),body *:not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(svg):not(svg *):not(canvas):not(img):not(video)::before,body *:not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(#photoai-borderless-unmatch):not(svg):not(svg *):not(canvas):not(img):not(video)::after{border-width:0!important;border-style:none!important;outline:none!important;box-shadow:none!important}

/* 2026-10-19 - visibility exemptions (parent-approved, fill/contrast only, no borders):
   the billing-toggle knob and the mock-rail active dot carry their meaning through
   a light fill; the universal black-background rule had made both invisible.
   The background chain above now excludes them, and the active labels get dark
   text for contrast on the light fill. */
body .billing-toggle button.on { color: #000 !important; -webkit-text-fill-color: #000 !important; background-color: transparent !important; }

/* 2026-10-24: act-stage SVG <image> cutouts (choreographed marketing demo
   artwork, e.g. px-34155027.jpg) — same monochrome policy as <img>; the
   img rules never reach SVG-embedded raster. */
/* photoai-image-color-20261029: images retain their default color (grayscale removed) */

/* 2026-10-24 (main review): the .ig-dash carve-out restored AUTHORED
   navy/purple telemetry surfaces (#12101d/#1a1729/#26223d) — violates the
   whole-site monochrome rule. Scope explicit grayscale chart surfaces while
   keeping bars/line/dots meaningful (white accents on gray panels). */
.ig-dash { background:#141414 !important; border-color:#2a2a2a !important; box-shadow:0 24px 60px rgba(0,0,0,.35) !important; }
.ig-dash .ig-metric, .ig-dash .ig-panel { background:#1d1d1d !important; border-color:#2e2e2e !important; }
.ig-dash .ig-tabs { background:#242424 !important; }
.ig-dash .ig-tabs button { color:#fff !important; }
.ig-dash .ig-tabs button.on { background:#3d3d3d !important; color:#fff !important; }
.ig-dash .ig-gridln line { stroke:#333 !important; }
.ig-dash .ig-live { color:#fff !important; }
.ig-dash .ig-dash-k, .ig-dash .ig-dash-head p, .ig-dash .ig-suffix,
.ig-dash .ig-metric-l, .ig-dash .ig-panel-h, .ig-dash .ig-bar-l { color:#fff !important; }
.ig-dash .ig-bar-v { color:#fff !important; }

/* 2026-10-24 (main review): the .ig-metric-bar 3px accent strips under the
   four metric cards render as bright white rules and violate the no-strokes
   UI. They are decorative accents, not data - removed. Meaningful chart
   marks (.ig-bar, .ig-path, gridlines, dots) are untouched. */
.ig-dash .ig-metric-bar { background: none !important; }