/* Product / studio route themes. Applied via html[data-theme]. First paint is
   correct on direct loads — no JS required for colors or logo visibility. */

html[data-theme="studio"] {
  --theme-bg: #F4EDE9;
  --theme-surface: #FFFFFF;
  --theme-text: #15171A;
  --theme-muted: #5E636B;
  --theme-accent: #3E6EA8;
  --theme-nav: #15171A;
  --theme-footer: #15171A;
  --theme-footer-muted: #5E636B;
  --theme-hair: rgba(21, 23, 26, 0.08);
  --theme-pill-bg: #3E6EA8;
  --theme-pill-fg: #FFFFFF;
  --theme-color: #F4EDE9;
}

html[data-theme="docmastro"] {
  --theme-bg: #000000;
  --theme-surface: #12151A;
  --theme-text: #E8EAED;
  --theme-muted: #A7ADB6;
  --theme-accent: #2EC4C6;
  --theme-nav: #E8EAED;
  --theme-footer: #E8EAED;
  --theme-footer-muted: #A7ADB6;
  --theme-hair: rgba(200, 205, 212, 0.14);
  --theme-pill-bg: rgba(46, 196, 198, 0.16);
  --theme-pill-fg: #E8EAED;
  --theme-color: #000000;
  --porcelain: #000000;
  --porcelain-rgb: 0, 0, 0;
  --ink: #E8EAED;
  --graphite: #A7ADB6;
  --muted: #A7ADB6;
  --deep: #2EC4C6;
  --deep-hover: #3AD4D6;
  --mist: rgba(46, 196, 198, 0.22);
  --haze: #12151A;
  --hair: 1px solid rgba(200, 205, 212, 0.14);
  --row: 1px solid rgba(200, 205, 212, 0.1);
  --field: 1px solid rgba(200, 205, 212, 0.18);
  --edge: 0 0 0 1px rgba(200, 205, 212, 0.08);
}

html {
  background: var(--theme-bg, var(--porcelain));
  color: var(--theme-text, var(--ink));
}

body {
  background: var(--theme-bg, var(--porcelain));
}

/* Logo stack: opacity-only swap. Never filter/invert/recolor the PNGs. */
.mark {
  position: relative;
}
.mark-logo {
  display: block;
  width: 72px;
  height: 50px;
  object-fit: contain;
  transition: opacity 350ms var(--ease);
}
.mark-logo-white {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
html[data-theme="docmastro"] .mark-logo-ink { opacity: 0; }
html[data-theme="docmastro"] .mark-logo-white { opacity: 1; }
html[data-theme="studio"] .mark-logo-ink { opacity: 1; }
html[data-theme="studio"] .mark-logo-white { opacity: 0; }

html[data-theme="docmastro"] .top {
  background: var(--theme-bg);
  color: var(--theme-nav);
}
html[data-theme="docmastro"] .nav a {
  color: var(--theme-nav);
}
html[data-theme="docmastro"] .nav a:hover,
html[data-theme="docmastro"] .nav a[aria-current="page"] {
  color: var(--theme-accent);
}
html[data-theme="docmastro"] .nav .pill,
html[data-theme="docmastro"] .nav .pill:hover {
  background: var(--theme-pill-bg);
  color: var(--theme-pill-fg);
  box-shadow: 0 0 0 1px rgba(46, 196, 198, 0.35);
}
html[data-theme="docmastro"] .nav .pill:hover {
  background: rgba(46, 196, 198, 0.28);
}

html[data-theme="docmastro"] .foot {
  color: var(--theme-footer);
  border-top-color: var(--theme-hair);
}
html[data-theme="docmastro"] .foot nav a {
  color: var(--theme-footer);
}
html[data-theme="docmastro"] .foot nav a:hover,
html[data-theme="docmastro"] .foot nav a[aria-current="page"] {
  color: var(--theme-accent);
}
html[data-theme="docmastro"] .foot p {
  color: var(--theme-footer-muted);
}
html[data-theme="docmastro"] .foot p a {
  color: var(--theme-footer);
}

/*
  Settled product: band collapsed. Stay collapsed during leave (veil) until the
  opaque swap opens the studio band — otherwise .bee-space paints a hard cream
  plate and shoves the product hero down before the veil is opaque.
  Only the studio→product slide may open the band (BB exits over cream).
*/
html[data-theme="docmastro"]:not([data-bb-transition="slide"]) .bee-cover,
html[data-bb-hidden="1"]:not([data-bb-transition="slide"]) .bee-cover {
  height: 0 !important;
  min-height: 0 !important;
  pointer-events: none;
  overflow: hidden;
}
html[data-theme="docmastro"]:not([data-bb-transition="slide"]) .bee-space,
html[data-bb-hidden="1"]:not([data-bb-transition="slide"]) .bee-space {
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html[data-theme="docmastro"] {
  /* layout.js may be deferred on product direct loads — keep a header fallback. */
  --header-h: 60px;
  scroll-padding-top: calc(var(--header-h) + 12px);
}
@media (max-width: 759px) {
  html[data-theme="docmastro"] {
    --header-h: 56px;
  }
}

/* Parked: off to the LEFT (side BB exits toward). Never during slide — the
   short -(right+24) transform must win or the return reads as a vanish/pop. */
html[data-bb-parked="1"]:not([data-bb-transition="slide"]) .bee {
  transform: translate3d(calc(-50% - 120vw), 0, 0) !important;
  opacity: 1;
  pointer-events: none;
}

/*
  Theme veil: ONE element. Full viewport.
  Above page content, BB band (10), foot-min (20), and dock (25).
  Below header.top (30 during handoff). Covers the chat dock during enter.
*/
.theme-veil {
  position: fixed;
  inset: 0;
  z-index: 28;
  pointer-events: none;
  opacity: 0;
  background: #000000;
  transition: opacity 350ms linear;
}
.theme-veil.is-dark {
  background: #000000;
}
.theme-veil.is-cream {
  background: #F4EDE9;
}
.theme-veil.is-on {
  opacity: 1;
}
.theme-veil.is-out {
  opacity: 0;
}

/* Header always above the veil during handoff (transition and/or handoff attr). */
html[data-bb-transition] .top,
html[data-bb-handoff] .top {
  z-index: 30;
  transition:
    background-color 350ms var(--ease),
    color 350ms var(--ease);
}
html[data-bb-transition] .nav a,
html[data-bb-transition] .nav .pill,
html[data-bb-handoff] .nav a,
html[data-bb-handoff] .nav .pill {
  transition: color 350ms var(--ease), background 350ms var(--ease), box-shadow 350ms var(--ease);
}

/* Phase B header preview: crossfade to destination theme WITHOUT swapping the page. */
html[data-bb-handoff="to-product"] .top {
  background: #000000;
  color: #E8EAED;
}
html[data-bb-handoff="to-product"] .nav a {
  color: #E8EAED;
}
html[data-bb-handoff="to-product"] .nav a:hover,
html[data-bb-handoff="to-product"] .nav a[aria-current="page"] {
  color: #2EC4C6;
}
html[data-bb-handoff="to-product"] .nav .pill,
html[data-bb-handoff="to-product"] .nav .pill:hover {
  background: rgba(46, 196, 198, 0.16);
  color: #E8EAED;
  box-shadow: 0 0 0 1px rgba(46, 196, 198, 0.35);
}
html[data-bb-handoff="to-product"] .mark-logo-ink { opacity: 0; }
html[data-bb-handoff="to-product"] .mark-logo-white { opacity: 1; }

html[data-bb-handoff="to-studio"] .top {
  background: #F4EDE9;
  color: #15171A;
}
html[data-bb-handoff="to-studio"] .nav a {
  color: #15171A;
}
html[data-bb-handoff="to-studio"] .nav .pill {
  background: #3E6EA8;
  color: #FFFFFF;
  box-shadow: none;
}
html[data-bb-handoff="to-studio"] .mark-logo-ink { opacity: 1; }
html[data-bb-handoff="to-studio"] .mark-logo-white { opacity: 0; }

/*
  Veil (z=15) stays ABOVE the band (bee-cover z=10) and page content.
  Never raise the cream band above the veil — that painted a hard cream/dark
  edge (product-064/072). BB mid-slide is visible in phase A (veil still off);
  during B the darkening veil covers band + BB together. Overflow visible so
  BB can travel past the band edge instead of clipping away.
*/
html[data-bb-transition="slide"] .bee-cover {
  overflow: visible !important;
}
/* Cream band paint only after the studio swap has opened it (slide-in / settle). */
html[data-bb-transition="slide"] .bee-space {
  background: #F4EDE9;
}
html[data-theme="studio"][data-bb-transition="veil"] .bee-cover {
  background: #F4EDE9 !important;
}
html[data-theme="studio"][data-bb-transition="veil"] .bee-space {
  background: #F4EDE9;
}

html[data-theme="docmastro"] main.copy {
  background: var(--theme-bg);
  color: var(--theme-text);
}

html[data-theme="docmastro"] main.chat,
html[data-theme="docmastro"] .dock,
html[data-theme="docmastro"] .dock-space,
html[data-theme="docmastro"] footer.foot-min {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Kill BeeLayout spring during handoff — no scale snap. */
html[data-bb-transition] .bee-cover,
html[data-bb-transition] .bee-space,
html[data-bb-transition] .bee {
  transition: none !important;
}
html[data-bb-transition="slide"] .bee {
  transition: transform 450ms cubic-bezier(0.45, 0, 0.55, 1) !important;
}

/*
  Phase D: new main is fully painted under the opaque veil, then rises 8px
  as the veil lifts. Starting at opacity 0 caused a long pure-black stretch
  (dest bg showing through invisible content) after the veil dropped.
*/
main.is-theme-enter {
  opacity: 1;
  transform: translateY(8px);
}
main.is-theme-enter.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: transform 250ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .mark-logo,
  .theme-veil,
  main.is-theme-enter.is-in,
  html[data-bb-transition] .top,
  html[data-bb-transition="slide"] .bee {
    transition: none !important;
  }
}