/* Shared header for the documentation and dashboard. */
.docs-topbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--vx-space-4); padding: var(--vx-space-4) var(--vx-space-8); border-bottom: 1px solid var(--vx-color-border); background: var(--vx-black); }
.docs-brand { flex-shrink: 0; display: inline-flex; align-items: center; gap: var(--vx-space-2); font-weight: var(--vx-font-bold); font-size: var(--vx-text-xl); color: var(--vx-color-text); text-decoration: none; letter-spacing: .06em; }
.docs-logo { display: block; width: clamp(7rem, 12vw, 10.5rem); height: auto; padding: var(--vx-space-1) var(--vx-space-2); background: var(--vx-black); }
.docs-brand span { color: var(--vx-color-primary); }
@media (max-width: 52rem) {
  .docs-topbar { padding: var(--vx-space-3) var(--vx-space-4); flex-wrap: wrap; gap: var(--vx-space-2); }
  .docs-topbar > .vx-badge { display: none; }
}
/* Product navigation and theme control share the same header across catalogs. */
.docs-topbar.vx-navbar { background: var(--vx-color-bg); border-bottom: 1px solid var(--vx-color-border-subtle); gap: 1.5rem; flex-wrap: nowrap; }
.docs-topbar .docs-brand { margin: 0; }
.docs-header-actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
@media (max-width: 620px) {
  .docs-topbar.vx-navbar { flex-wrap: wrap; gap: .75rem; }
  .docs-topbar .vx-product-nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; }
  .docs-topbar .vx-product-link { flex: 1; padding-inline: .5rem; }
  .docs-header-actions { margin-left: auto; }
}