/* Subpage nav — DOCS variant. No announcement bar (unlike home).
   Sticky, dark-aware white bar. Wordmark = home quill + serif word
   (byte-for-byte). Right cluster uses the shared button system
   (buttons.css: .an-pill outline + .btn-dark solid, 44px, conveyor
   roll auto-injected by effects.js). Only center links differ from
   the buy variant; the docs page is frame-wide, so the row tracks
   --frame. Breakpoints: 1199 collapses the center links (as
   production does), 767 is the phone treatment. */

.s-docs-nav {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
}

html.dark .s-docs-nav {
  background: rgba(14, 16, 6, 0.85);
}

.s-docs-nav .an-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* row (docs content is frame-wide) */
.s-docs-nav .bn-in {
  max-width: var(--frame);
  margin: 0 auto;
  padding: 0 24px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* wordmark (matches the home nav) */
.s-docs-nav .an-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.s-docs-nav .an-mark {
  width: 34px;
  height: 32px;
  margin-right: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--ink);
}

html.dark .s-docs-nav .an-mark { color: var(--accent); }

.s-docs-nav .an-quill {
  width: 30px;
  height: 19.5px;
  display: block;
}

.s-docs-nav .an-word {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
}

/* center links */
.s-docs-nav .bn-links {
  display: flex;
  align-items: center;
  gap: 30px;
  min-width: 0;
}

.s-docs-nav .bn-links a {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.s-docs-nav .bn-links a:hover { color: var(--ink); }

/* right cluster: $ARROW pill + Launch App (shared button skins) */
.s-docs-nav .bn-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: none;
}

/* ---------- breakpoints ---------- */

@media (max-width: 1439px) {
  .s-docs-nav .an-word { font-size: 22px; }
}

/* production collapses the desktop center links before the tablet edge */
@media (max-width: 1199px) {
  .s-docs-nav .bn-links { display: none; }
}

/* phone: wordmark + $ARROW pill + Launch App (as production docs keeps
   the pill). Drop the price and tighten the button padding so the row
   stays on one line at 360-390px. */
@media (max-width: 767px) {
  .s-docs-nav .bn-in {
    padding: 0 20px;
    gap: 10px;
  }
  .s-docs-nav .bn-right {
    gap: 10px;
  }
  .s-docs-nav .an-pill .an-px { display: none; }
  .s-docs-nav .bn-right .an-pill,
  .s-docs-nav .bn-right .btn-dark { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .s-docs-nav .bn-links a { transition: none; }
}