/* ============================================================================
 * Marcus OS — Mother SPA sticky banner (Static, v3)
 *
 * Banner stays at its natural size, anchored at the top of the viewport.
 * Only the content below scrolls. No logo shrink, no title scale, no
 * subtitle fade. Per Rafa: "estuviera estético, que no se moviera el banner
 * de arriba y que se acomodaran las cosas inteligentemente".
 *
 * Sub-nav strips inside SPA pages (Test Console subnav, etc.) stay sticky
 * directly under the banner so secondary navigation never disappears.
 *
 * Refs: ADR-054, project_voice_studio_test_console_invariants.md.
 * ============================================================================ */

/* ── Voice Studio banner + main tabs ─────────────────────────────────── */
.vs-header {
  position: sticky;
  top: 0;
  z-index: 91;
  background: var(--neutral-bg, #faf6ec);
}
.vs-tabs {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--neutral-bg, #faf6ec);
}

/* Sub-nav inside Test Console (Generate / A/B / Sample / Pronunciation / ...) */
.vs-tc-subnav {
  position: sticky;
  top: 0;
  z-index: 89;
  background: var(--neutral-bg, #faf6ec);
}

/* ── Brand Assets banner ─────────────────────────────────────────────── */
.am-header {
  position: sticky;
  top: 0;
  z-index: 91;
  background: var(--neutral-bg, #faf6ec);
}

/* ── Subtle elevation when content slips under the banner ────────────── */
body.mc-scrolled .app-header,
body.mc-scrolled .vs-header,
body.mc-scrolled .am-header {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* ── WCAG focus-visible ──────────────────────────────────────────────── */
.vs-back-link:focus-visible,
.am-back-link:focus-visible,
.vs-tab:focus-visible,
.vs-tc-tab:focus-visible,
.app-header a:focus-visible,
.app-header button:focus-visible {
  outline: 2px solid var(--accent, #d4be95);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Pane visibility (carries forward from Voice Studio Pro) */
.vs-tc-pane[hidden] { display: none !important; }