/* Docs header: grey band with a rainbow glow, logo row and folder-style tabs (Figma 377:8706). */
.s-docs-header { position: relative; overflow: hidden; background: var(--docs-header-bg); }
.s-docs-header__glow {
  position: absolute; right: -4%; bottom: -60px; width: 60%; height: 140px; pointer-events: none;
  background:
    radial-gradient(40% 60% at 25% 70%, rgb(255 105 0 / 0.22), transparent 70%),
    radial-gradient(35% 60% at 50% 70%, rgb(253 199 0 / 0.22), transparent 70%),
    radial-gradient(40% 60% at 75% 70%, rgb(0 188 125 / 0.18), transparent 70%);
  filter: blur(14px);
}
.s-docs-header__inner { position: relative; }
.s-docs-header__top { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.s-docs-header__logo { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-logo); font-weight: var(--fw-medium); font-size: var(--logo-size); letter-spacing: -0.02em; color: var(--text-strong); }
.s-docs-header__logo img { width: 33px; height: 33px; }
.s-docs-header__tabs { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--space-4)); }
.s-docs-header__tab {
  display: inline-flex; align-items: center; gap: var(--space-2); flex: none;
  height: 36px; padding-inline: var(--space-4); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: var(--fw-medium); font-size: var(--body-md-size); letter-spacing: var(--body-md-ls); color: var(--text-medium);
  transition: color var(--dur) var(--ease);
}
.s-docs-header__tab svg { width: 16px; height: 16px; }
.s-docs-header__tab:hover { color: var(--text-strong); }
.s-docs-header__tab[aria-current="page"] { background: var(--base-high); color: var(--text-strong); }
/* Small phones: drop the tab icons so all three tabs fit without scrolling */
@media (max-width: 479px) {
  .s-docs-header__tab { gap: 0; padding-inline: var(--space-3); }
  .s-docs-header__tab svg { display: none; }
}
/* 320px phones: tighter tabs so all three still fit */
@media (max-width: 359px) {
  .s-docs-header__tab { padding-inline: var(--space-2); font-size: 12px; }
}
@media (min-width: 1024px) {
  .s-docs-header__top { height: 100px; padding-top: var(--space-2); }
}
/* Figma QC: logo row at y24 with a 28px mark, tabs flush with the logo and touching */
@media (min-width: 1024px) {
  .s-docs-header__top { align-items: flex-start; padding-top: 24px; }
  .s-docs-header__logo { line-height: 28px; }
  .s-docs-header__logo img { width: 28px; height: 28px; }
  .s-docs-header__tabs { margin-inline: 0; gap: 0; }
}

/* Interactions: logo nudge, tab hover wash + press, slow glow drift */
.s-docs-header__logo img { transition: transform var(--dur-slow) var(--ease-spring); }
@media (hover: hover) {
  .s-docs-header__logo:hover img { transform: rotate(-12deg) scale(1.06); }
  .s-docs-header__tab:hover svg { transform: translateY(-1px); }
}
.s-docs-header__tab { position: relative; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.s-docs-header__tab:not([aria-current="page"]):hover { background: var(--black-5); }
.s-docs-header__tab svg { transition: transform var(--dur) var(--ease); }
.s-docs-header__tab:active svg { transform: scale(0.9); }
.s-docs-header__tab:focus-visible { outline-offset: -2px; }
.s-docs-header__glow { animation: docs-glow-drift 14s var(--ease-in-out) infinite alternate; }
@keyframes docs-glow-drift {
  from { transform: translateX(0) scaleY(1); }
  to { transform: translateX(-6%) scaleY(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .s-docs-header__glow { animation: none; }
  .s-docs-header__logo img, .s-docs-header__tab svg { transition: none; }
  .s-docs-header__logo:hover img, .s-docs-header__tab:hover svg { transform: none; }
}

/* Links back into the main site (desktop) + theme switcher mount; phones keep just the CTA */
.s-docs-header__right { display: flex; align-items: center; gap: var(--space-4); }
.s-docs-header__site { display: none; gap: var(--space-5); }
.s-docs-header__site a {
  font-weight: var(--fw-medium); font-size: var(--body-md-size); letter-spacing: var(--body-md-ls); color: var(--text-medium);
  transition: color var(--dur) var(--ease);
}
.s-docs-header__site a:hover { color: var(--orange-500); }
.s-docs-header__theme:empty { display: none; }
@media (max-width: 639px) { .s-docs-header__theme { display: none; } }
@media (min-width: 768px) { .s-docs-header__site { display: flex; } }