/* Shared second navigation tier and page motion, derived from Pricing.
 * Titles/links are page data; layout, timing, accessibility and logo/header stay shared.
 */
html:root { --page-nav-h: 52px; }
body[data-page-nav-mode="none"] { --page-nav-h: 0px; }
#site-page-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 77;
  height: var(--page-nav-h);
  padding: 0 var(--site-nav-gutter, clamp(24px, 4vw, 80px));
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  color: #1d1d1f;
  font: 400 12px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 500ms ease-in-out, visibility 0s 500ms;
}
#site-page-nav.is-visible {
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
/* Like the Apple Store reference, the global header scrolls out with the
   document; the local tier slides down into the vacated viewport edge.
   Reserved header space stays stable across the handoff. */
body[data-page-shell]:not([data-page-nav-mode="none"]):not([data-page-nav-mode="stacked"]) #site-nav {
  position: absolute;
}
/* Keep an active global search or keyboard focus in view until released. */
body[data-page-shell] #site-nav:focus-within,
body[data-page-shell] #site-nav.nav--sheet { position: fixed; }
body.page-nav-takeover #site-nav { visibility: hidden; pointer-events: none; }
body[data-page-shell] main [id] { scroll-margin-top: calc(var(--page-nav-h) + 20px); }
/* Full-height applications keep both tiers in flow; never insert a third menu. */
body[data-page-nav-mode="stacked"] #site-page-nav {
  position: sticky;
  inset: auto;
  top: var(--nav-h);
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
#site-page-nav *, #site-page-nav *::before, #site-page-nav *::after { box-sizing: border-box; }
#site-page-nav .page-nav-inner {
  display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 20px;
  width: 100%; max-width: none; margin: 0; border: 0;
}
#site-page-nav { animation: none; }
#site-page-nav * { animation: none; transition: none; }
#site-page-nav a { color: #1d1d1f; text-decoration: none; white-space: nowrap; }
#site-page-nav .page-nav-title { font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; flex-shrink: 0; }
#site-page-nav .page-nav-links {
  display: flex; flex-direction: row; align-items: center; gap: 24px; font-size: 12px;
  position: static; min-width: 0; max-width: 100%; overflow-x: auto;
  padding: 0; margin: 0; background: none; border: 0; scrollbar-width: none;
  overscroll-behavior-x: contain;
}
#site-page-nav .page-nav-links::-webkit-scrollbar { display: none; }
#site-page-nav .page-nav-links a { display: flex; align-items: center; min-height: 44px; padding: 0; flex-shrink: 0; }
/* Every second-tier link stays neutral, including titles and selected/interactive states. */
#site-page-nav a:visited, #site-page-nav a:hover,
#site-page-nav a:active, #site-page-nav a:focus-visible,
#site-page-nav a[aria-current], #site-page-nav a.active { color: #1d1d1f; }
#site-page-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
body[data-page-nav-mode="none"] main [id] { scroll-margin-top: calc(var(--nav-h) + 20px); }
body[data-page-nav-mode="stacked"] main [id] { scroll-margin-top: calc(var(--nav-h) + var(--page-nav-h) + 20px); }
body[data-page-nav-mode="stacked"] .ide { height: calc(100dvh - var(--nav-h) - var(--page-nav-h)); }
/* Gate only the initial workspace paint; preserve geometry for local setup.
   A failed script reveals content after 3s, and no-JS documents stay visible. */
html[data-workspace-loading] .ide:not([data-workspace-ready]) {
  animation: workspace-wait 3s step-end forwards;
}
@keyframes workspace-wait {
  from { visibility: hidden; }
  to { visibility: visible; }
}
/* One entrance for page content. Header/menu remain steady during fixed-bar motion. */
[data-workspace-enter] { animation: site-page-enter 320ms cubic-bezier(.2,.7,.2,1); }
[data-page-enter] { animation: site-page-enter 320ms cubic-bezier(.2,.7,.2,1); }
@keyframes site-page-enter {
  from { opacity: .35; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
[data-page-reveal] { opacity: 0; transform: translateY(10px); transition: opacity 320ms ease-out, transform 320ms cubic-bezier(.2,.7,.2,1); }
[data-page-reveal].in, [data-page-reveal]:focus-within { opacity: 1; transform: none; }
[data-page-reveal]:focus-within { transition: none; }
@media (max-width: 600px) {
  #site-page-nav .page-nav-links a[data-page-nav-desktop] { display: none; }
  #site-page-nav .page-nav-inner { gap: 12px; }
  #site-page-nav .page-nav-title { font-size: 19px; max-width: 48%; overflow: hidden; text-overflow: ellipsis; }
  #site-page-nav .page-nav-links { gap: 14px; flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
  #site-page-nav, #site-page-nav.is-visible, #site-page-nav a { transition: none; }
  [data-page-enter], [data-workspace-enter] { animation: none; }
  [data-page-reveal] { opacity: 1; transform: none; transition: none; }
}
@media print {
  #site-page-nav { display: none; }
  [data-page-enter], [data-workspace-enter] { animation: none; }
  [data-page-reveal] { opacity: 1; transform: none; }
}