/* ═══════════════════════════════════════════════════════════════════════════
   Dark theme
   ───────────────────────────────────────────────────────────────────────────
   The design ships as inline `style=` attributes with literal colours, so the
   theme works by overriding each exact property+colour pair under
   [data-theme="dark"]. Pairs matter, not colours alone: #F6F3EF is both the
   page background AND the text colour on red panels — only one should invert.

   Fails safe: if a selector stops matching after a design re-export, that
   element simply keeps its light colour rather than breaking. Light mode is
   completely untouched — no rule here applies without the data-theme attribute.

   Palette (warm near-black, matching the paper-white original):
     bg        #F6F3EF -> #16181a
     surface   #eae9e9 -> #202325
     panel     #ffffff -> #1a1d20
     ink       #171717 -> #ece9e7
     accent    #EF3340 -> #FF3355   (lifted for contrast on dark)
     accent-lo #96001C -> #FF8497
   ═══════════════════════════════════════════════════════════════════════ */

:root { color-scheme: light; }
/* paint the root dark immediately — <body> may not cover the viewport before
   the runtime renders, which would flash white behind it */
[data-theme="dark"] { color-scheme: dark; background: #16181a; }

/* ── surfaces ──────────────────────────────────────────────────────────── */
[data-theme="dark"] body                       { background: #16181a !important; color: #ece9e7 !important; }
[data-theme="dark"] [style*="background: rgb(246, 243, 239)"] { background: #16181a !important; }
[data-theme="dark"] [style*="background: rgb(234, 233, 233)"] { background: #202325 !important; }
/* both #fff and #ffffff in the source serialise to the same rgb() form */
[data-theme="dark"] [style*="background: rgb(255, 255, 255)"] { background: #1a1d20 !important; }
[data-theme="dark"] [style*="background: rgb(23, 23, 23)"] { background: #000 !important; }

/* ── text ──────────────────────────────────────────────────────────────── */
[data-theme="dark"] [style*="color: rgb(23, 23, 23)"]            { color: #ece9e7 !important; }
[data-theme="dark"] [style*="color: rgba(23, 23, 23, 0.8)"] { color: rgba(236,233,231,0.80) !important; }
[data-theme="dark"] [style*="color: rgba(23, 23, 23, 0.75)"]{ color: rgba(236,233,231,0.75) !important; }
[data-theme="dark"] [style*="color: rgba(23, 23, 23, 0.7)"] { color: rgba(236,233,231,0.70) !important; }
[data-theme="dark"] [style*="color: rgba(23, 23, 23, 0.65)"]{ color: rgba(236,233,231,0.65) !important; }
[data-theme="dark"] [style*="color: rgba(23, 23, 23, 0.6)"] { color: rgba(236,233,231,0.62) !important; }
[data-theme="dark"] [style*="color: rgba(23, 23, 23, 0.55)"]{ color: rgba(236,233,231,0.58) !important; }

/* `color: #F6F3EF` is text sitting ON the red panels — it must stay light,
   so it is deliberately NOT inverted here. */

/* ── accent ────────────────────────────────────────────────────────────── */
[data-theme="dark"] [style*="color: rgb(239, 51, 64)"]      { color: #FF3355 !important; }
[data-theme="dark"] [style*="color: rgb(150, 0, 28)"]      { color: #FF8497 !important; }
[data-theme="dark"] [style*="background: rgb(239, 51, 64)"] { background: #D4002A !important; }
[data-theme="dark"] [style*="background: rgb(193, 0, 36)"] { background: #B00020 !important; }
[data-theme="dark"] a                               { color: #FF8497 !important; }
[data-theme="dark"] [style*="background: rgba(239, 51, 64, 0.1)"]  { background: rgba(255,51,85,0.16) !important; }
[data-theme="dark"] [style*="background: rgba(239, 51, 64, 0.12)"] { background: rgba(255,51,85,0.18) !important; }
[data-theme="dark"] [style*="background: rgba(239, 51, 64, 0.08)"] { background: rgba(255,51,85,0.14) !important; }
[data-theme="dark"] [style*="background: rgba(239, 51, 64, 0.28)"] { background: rgba(255,51,85,0.32) !important; }
[data-theme="dark"] ::selection { background: rgba(255,51,85,0.35); }
[data-theme="dark"] :focus-visible { outline-color: #FF3355 !important; }

/* ── rules and borders ─────────────────────────────────────────────────── */
[data-theme="dark"] [style*="background: rgba(23, 23, 23, 0.4)"]        { background: rgba(236,233,231,0.26) !important; }
[data-theme="dark"] [style*="border: 2px solid rgba(23, 23, 23, 0.4)"]  { border-color: rgba(236,233,231,0.26) !important; }
[data-theme="dark"] [style*="border-top: 2px solid rgba(23, 23, 23, 0.4)"]    { border-top-color: rgba(236,233,231,0.26) !important; }
[data-theme="dark"] [style*="border-bottom: 2px solid rgba(23, 23, 23, 0.4)"] { border-bottom-color: rgba(236,233,231,0.26) !important; }
[data-theme="dark"] [style*="border: 1px solid rgba(23, 23, 23, 0.4)"]  { border-color: rgba(236,233,231,0.26) !important; }
[data-theme="dark"] [style*="border-top: 2px solid rgba(23, 23, 23, 0.18)"]    { border-top-color: rgba(236,233,231,0.14) !important; }
[data-theme="dark"] [style*="border-bottom: 2px solid rgba(23, 23, 23, 0.18)"] { border-bottom-color: rgba(236,233,231,0.14) !important; }
[data-theme="dark"] [style*="border: 1px solid rgba(23, 23, 23, 0.6)"]  { border-color: rgba(236,233,231,0.34) !important; }
[data-theme="dark"] [style*="1px solid rgba(23, 23, 23, 0.75)"]         { border-color: rgba(236,233,231,0.42) !important; }
[data-theme="dark"] [style*="border: 2px solid rgb(23, 23, 23)"]             { border-color: rgba(236,233,231,0.55) !important; }

/* ── hover states ──────────────────────────────────────────────────────────
   The runtime compiles every `style-hover` attribute into a generated class
   in a stylesheet it injects at runtime — `.scp3:hover { background: rgb(234,
   233, 233) !important }` and friends. Those are !important AND come after
   this file, so equal-specificity rules lose. These selectors are deliberately
   heavier (html + attribute + element + :hover) to outrank them.

   Without this the case-study cards flip to a light background on hover while
   the text stays light — unreadable. */
html[data-theme="dark"] article:hover { background: #202325 !important; }

/* hover text that turns the dark accent (#96001C) is illegible on a dark
   surface; lift it. Scoped to elements whose resting colour is the ink, so the
   light-on-red buttons keep their own colour. */
html[data-theme="dark"] [style*="color: rgb(23, 23, 23)"]:hover { color: #FF8497 !important; }

/* ── media: take the glare off bright screenshots without washing them out ── */
[data-theme="dark"] img,
[data-theme="dark"] video { filter: brightness(0.88) contrast(1.02); }

/* ═══ the toggle ═══════════════════════════════════════════════════════ */
#theme-toggle {
  position: fixed; right: 20px; bottom: 20px; z-index: 900;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: #F6F3EF; color: #171717;
  border: 2px solid rgba(23,23,23,0.4); border-radius: 0;
  cursor: pointer; padding: 0; line-height: 0;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
#theme-toggle:hover { border-color: #EF3340; background: rgba(239,51,64,0.1); }
#theme-toggle:focus-visible { outline: 2px solid #EF3340; outline-offset: 2px; }
#theme-toggle svg { width: 19px; height: 19px; display: block; }
#theme-toggle .icon-moon { display: none; }
[data-theme="dark"] #theme-toggle {
  background: #202325; color: #ece9e7; border-color: rgba(236,233,231,0.3);
}
[data-theme="dark"] #theme-toggle:hover { border-color: #FF3355; background: rgba(255,51,85,0.16); }
[data-theme="dark"] #theme-toggle .icon-sun  { display: none; }
[data-theme="dark"] #theme-toggle .icon-moon { display: block; }

@media (max-width: 620px) {
  #theme-toggle { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}
@media print { #theme-toggle { display: none; } }


/* bhios Precision: use brand red for identity; a darker red for small text
   and button fills to keep white labels legible. */
:root { --bhios-red: #EF3340; --bhios-ink: #171717; --bhios-paper: #F6F3EF; --bhios-action: #BF2435; }
body { background: var(--bhios-paper); color: var(--bhios-ink); }
.bhios-home { display:flex; align-items:center; gap:16px; color:inherit; text-decoration:none; flex-shrink:0; }
.bhios-logo { width:120px; height:40px; display:block; object-fit:contain; filter:none !important; }
:root { --bhios-logo-ink: #171717; }
html[data-theme="dark"] { --bhios-logo-ink: #FFFFFF; }
.bhios-identity { display:flex; flex-direction:column; gap:4px; color:var(--bhios-ink); font-size:12px; line-height:1.3; }
.bhios-identity strong { font-size:13px; }
[data-theme="dark"] .bhios-identity { color:#ece9e7; }
.pm-eyebrow { color:#96001C; font-size:12px; font-weight:800; letter-spacing:.1em; margin:0 0 20px; }
.pm-card-role { font-size:12px; font-weight:600; margin:0 0 14px; color:#96001C; }
[data-theme="dark"] .pm-eyebrow, [data-theme="dark"] .pm-card-role { color:#FF8497; }
html:not([data-theme="dark"]) [style*="background: rgb(239, 51, 64)"] { background:var(--bhios-action) !important; }
html:not([data-theme="dark"]) [style*="color: rgb(239, 51, 64)"] { color:var(--bhios-action) !important; }
@media (max-width: 800px) { .bhios-identity { display:none !important; } }
@media (max-width: 620px) { .bhios-logo { width:108px; height:36px; } .pm-eyebrow { font-size:10px; letter-spacing:.06em; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto !important; } *, *::before, *::after { animation:none !important; transition:none !important; } }

/* Keep the identity neutral even when global link hover rules apply. */
html .bhios-home, html .bhios-home:hover { text-decoration: none !important; }
html .bhios-logo { filter: none !important; color: var(--bhios-logo-ink) !important; }


/* Product stories: readable evidence, complete screens and honest measurement. */
.product-preview { margin:0; }
.product-preview img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; background:#eae9e9; filter:none !important; }
.product-preview figcaption { font-size:12px; line-height:1.5; margin-top:12px; opacity:.8; }
.product-card-decision { font-size:15px; line-height:1.6; margin:0 0 20px; max-width:48ch; }
.product-card-decision strong { display:block; font-size:11px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; color:#96001C; }
.product-brief { margin:40px 0; border-top:2px solid currentColor; border-bottom:1px solid currentColor; }
.product-brief-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:22px 0; }
.product-brief-heading h2 { font-size:26px; letter-spacing:-.02em; margin:0; }
.product-brief-heading span { font-size:12px; opacity:.8; }
.product-brief-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 48px; padding:24px 0 30px; }
.product-brief h3 { margin:0 0 10px; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:#96001C; }
.product-brief p, .product-brief li { font-size:16px; line-height:1.65; margin:0; max-width:66ch; }
.product-brief ul { margin:12px 0 0; padding-left:20px; }
.product-brief li { margin-bottom:8px; }
.product-bet, .product-evidence { border-top:1px solid #aaa; padding:22px 0; }
.product-brief .measurement-note { font-size:12px; opacity:.75; }
.product-hero { margin:36px 0 28px; }
.product-hero img { display:block; width:100%; height:auto; max-height:760px; object-fit:contain; background:#eae9e9; filter:none !important; }
.product-hero figcaption { display:flex; gap:16px; justify-content:space-between; flex-wrap:wrap; margin-top:12px; font-size:12px; line-height:1.5; }
html[data-theme="dark"] .product-card-decision strong, html[data-theme="dark"] .product-brief h3 { color:#FF8497; }
html[data-theme="dark"] .product-preview img, html[data-theme="dark"] .product-hero img { background:#202325; }
@media(max-width:620px) {
  .product-brief-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .product-brief-grid { grid-template-columns:1fr; gap:24px; }
  .product-preview img { aspect-ratio:auto; }
}

/* Preserve source sharpness and expose complete product screens. */
.case-image { margin:32px 0 0; }
.case-image-stage { display:flex; justify-content:center; align-items:flex-start; background:#eae9e9; padding:24px; border:1px solid #bdb9b5; }
html .case-image img { display:block; width:100%; height:auto; object-fit:contain; filter:none !important; }
.case-image figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin-top:12px; font-size:12px; line-height:1.6; }
.case-image figcaption span { max-width:80ch; opacity:.8; }
html[data-theme="dark"] .case-image-stage { background:#202325; border-color:#505050; }
@media(max-width:620px) { .case-image-stage { padding:8px; } }