/*
 * Audience switcher — shared CSS for the fixed vertical pill that
 * lets the reader toggle between Tech (default, dark theme) and
 * Business (light theme).
 *
 * Mechanics:
 *   - <html.dark> is the dark-theme gate.  JS toggles the class
 *     based on audience selection.  Tokens in _ds/theme.css flip
 *     automatically.
 *   - body[data-audience="bu"] drives the sliding purple indicator
 *     via CSS-only transform.
 *   - [data-audience-tech] / [data-audience-bu] mark which copy
 *     variants belong to each audience.  JS sets [hidden] on the
 *     non-active variant; the !important override below forces
 *     display: none even when class-defined display rules conflict.
 *
 * Pages that want the switcher need to:
 *   1. @import this file (after _ds + chrome).
 *   2. Render the <aside class="audience-switch" data-audience-switch>
 *      block (see _shared/audience-switcher.html for the canonical
 *      markup, or copy from /pricing/index.html).
 *   3. Load _shared/audience-switcher.js.
 *   4. Author copy variants with [data-audience-tech] / [data-audience-bu]
 *      siblings; the BU one defaults to [hidden].
 *
 * Existing per-page inline copies of this CSS in /home, /products,
 * /products/{cli,mcp,monitor} are intentionally left in place — they
 * work; deduping them is a follow-up.
 */

/* Strong override.  Class-defined display rules (.compose-card
   { display: flex }, .act7-agent-prompt etc.) win over the UA's
   [hidden] = display:none.  Force-hide every audience-tagged
   element when hidden, regardless of its class-defined display
   value. */
[data-audience-tech][hidden],
[data-audience-bu][hidden] { display: none !important; }

/* ── Typography in BU light ──
   In BU mode the display face is Mq12 (loaded in fonts.css), NOT
   Rawest.  Override --font-display at the html level so every
   selector using var(--font-display) — and there are many across
   the site — flips automatically.  --font-base stays Manrope in
   both themes.  This is the single source of truth for the
   "BU = Mq12 + Manrope only, no Rawest" rule (CLAUDE.md +
   DESIGN.md). */
html:not(.dark) {
  --font-display: 'Mq12', system-ui, sans-serif;

  /* Border tokens in BU.  The DS defaults resolve
     --border-subtle to var(--zen-gray-3) = #F1F0EE in light mode
     — but most pages recess the body bg to that same zen-gray-3,
     making hairline borders invisible.  Bump both border tokens
     two steps so they contrast against both the recessed body bg
     (gray-3) AND lighter card surfaces (gray-1).  Pablo flagged
     borders reading too subtle on 2026-06-14. */
  --border-subtle: var(--zen-gray-5);
  --border: var(--zen-gray-5);
  --border-default: var(--zen-gray-6);
  --border-subtle-hover: var(--zen-gray-6);
  --border-default-hover: var(--zen-gray-7);
}

.audience-switch {
  position: fixed;
  top: 50%;
  right: 16px;
  z-index: 250;
  /* Grid with equal rows so TECH (4 chars) and BUSINESS (8 chars)
     buttons get identical height even though their vertical text
     length differs.  Flex column would size each to its content,
     producing unequal heights that misalign the sliding indicator. */
  display: grid;
  grid-template-rows: 1fr 1fr;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  will-change: transform;
  transform: translateY(-50%) translateZ(0);
  backface-visibility: hidden;
}

/* Sliding indicator — a purple pill that animates between the two
   segments instead of crossfading.  Sits behind both buttons (z-0)
   so the labels (z-1) read on top.  Position is driven by
   body[data-audience] so a click triggers the slide via CSS only. */
.audience-switch::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  background: #7C4FE8;
  z-index: 0;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
body[data-audience="bu"] .audience-switch::before {
  transform: translateY(100%);
}

.audience-switch-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 16px 11px;
  cursor: pointer;
  font-family: var(--font-code, var(--font-mono), "IBM Plex Mono", monospace);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
  writing-mode: vertical-rl;
}
.audience-switch-btn[aria-pressed="true"] {
  color: #FFFFFF;
}
.audience-switch-btn:hover:not([aria-pressed="true"]) {
  color: var(--text-secondary);
}

/* Mobile — switch to a compact horizontal pill anchored bottom-right
   (FAB-style).  The vertical right-edge placement overlaps the hero
   text on narrow viewports.  Indicator now slides horizontally
   between segments. */
@media (max-width: 720px) {
  .audience-switch {
    top: auto;
    bottom: 20px;
    right: 16px;
    transform: translateZ(0);
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
  .audience-switch::before {
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 50%;
    height: 100%;
  }
  body[data-audience="bu"] .audience-switch::before {
    transform: translateX(100%);
  }
  .audience-switch-btn {
    writing-mode: horizontal-tb;
    padding: 10px 18px;
    font-size: 10px;
  }
}

/* BU light-mode glass override.  The default color-mix(--background,
   88%, transparent) renders near-white against the sunken page bg,
   so the handle barely reads.  Solid contrasted fill + stronger
   border lets the control stand out at the page edge. */
html:not(.dark) .audience-switch {
  background: var(--zen-gray-1);
  border-color: var(--border-default);
  box-shadow: 0 12px 28px -12px rgba(29, 22, 18, 0.18);
}

/* ── Topbar inversion in BU light ──
   When NOT on a saturated brand band (is-on-teal/purple/mesh
   bodies keep the band-canonical chrome), the topbar logo + nav
   text need to flip from white-on-dark to dark-on-light.  These
   rules are scoped to html:not(.dark) so they only fire in BU.

   Mirror of the per-page inline overrides in /products/styles.css
   (line 1303+).  Pages importing this file get the full BU chrome
   without duplicating ~40 lines. */
html:not(.dark) body:not(.is-on-teal):not(.is-on-purple):not(.is-on-mesh) .topbar-brand img { filter: brightness(0); }
html:not(.dark) body:not(.is-on-teal):not(.is-on-purple):not(.is-on-mesh) .nav-link { color: var(--text-secondary); }
html:not(.dark) body:not(.is-on-teal):not(.is-on-purple):not(.is-on-mesh) .nav-item:hover .nav-link,
html:not(.dark) body:not(.is-on-teal):not(.is-on-purple):not(.is-on-mesh) .nav-item--open .nav-link,
html:not(.dark) body:not(.is-on-teal):not(.is-on-purple):not(.is-on-mesh) .nav-item--current .nav-link { color: var(--text-primary); }
html:not(.dark) body:not(.is-on-teal):not(.is-on-purple):not(.is-on-mesh) .nav-item--current .nav-link::after { background: var(--text-primary); }
html:not(.dark) body:not(.is-on-teal):not(.is-on-purple):not(.is-on-mesh) .topbar-burger span { background: var(--text-primary); }
html:not(.dark) body:not(.is-on-teal):not(.is-on-purple):not(.is-on-mesh) .social-pill { color: var(--text-secondary); border-color: var(--border-subtle); }
html:not(.dark) body:not(.is-on-teal):not(.is-on-purple):not(.is-on-mesh) .social-pill:hover { color: var(--text-primary); }

/* Nav popover light variant — flips the dropdown chrome so it
   reads as a white card with dark text on the light topbar.
   Mirror of /products/styles.css line 1315+. */
html:not(.dark) .nav-dropdown {
  background: #FFFFFF;
  border-color: var(--border-subtle);
  box-shadow: 0 28px 56px -20px rgba(29, 22, 18, 0.18);
}
html:not(.dark) .nav-mega-item > a { color: var(--text-secondary); }
html:not(.dark) .nav-mega-item > a:hover,
html:not(.dark) .nav-mega-item > a:focus-visible {
  background: var(--sunken-hover);
  color: var(--text-primary);
}
html:not(.dark) .nav-mega-item.is-active > a {
  background: var(--sunken-active);
  color: var(--text-primary);
}
html:not(.dark) .nav-mega-item > span { color: var(--text-tertiary); }
html:not(.dark) .nav-mega-item.is-active > span {
  background: var(--sunken-active);
  color: var(--text-secondary);
}
html:not(.dark) .nav-mega-group-label { color: var(--text-tertiary); }
/* Use background-color (not the `background` shorthand) so the
   per-[data-key] gradient backgrounds defined in chrome.css
   survive — the shorthand resets background-image to none and
   kills the mesh gradients.
   Fallback bg-color is warm dark, not light: the headline is a
   theme-invariant gradient surface; when no gradient is defined
   for a key (section overviews), we want the headline to still
   look like a dark surface so the white name + path remain
   readable, instead of flipping to light gray and making the
   white text invisible (Pablo flagged 2026-06-15). */
html:not(.dark) .nav-mega-headline {
  background-color: #1D1612;
  border-color: rgba(29, 22, 18, 0.18);
}
/* .nav-mega-headline-name + .nav-mega-headline-path live INSIDE
   the saturated-gradient .nav-mega-headline container — theme-
   invariant chrome (same gradient in both themes), so text stays
   light in BU too.  Only .nav-mega-preview-desc (below the
   gradient, on the white dropdown bg in BU) needs the flip to
   dark text. */
html:not(.dark) .nav-mega-preview-desc { color: var(--text-secondary); }