/* nav.css — the ONE stylesheet for the shared site navbar. The markup twin is
   partials/nav.html, expanded into every public page by scripts/build-nav.mjs.
   Tokens are scoped to the nav element (not :root) so pages with different
   palettes (docs blueprint paper vs app slate) still render the identical
   navbar without inheriting these values into their own content. */

nav {
  --bg: #f8f9fb; --surface: #f1f5f9; --surface-2: #ffffff;
  --border: #e2e8f0; --border-2: #cbd5e1;
  --text: #0f172a; --text-2: #475569; --text-3: #94a3b8;
  --ink: #16181d; --paper: #faf9f6;
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --r-md: 10px;
  --shadow-md: 0 4px 24px rgba(15,23,42,.12);

  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(248,249,251,.94); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font); line-height: 1.6;
}
.nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 40px;
  height: 60px; display: flex; align-items: center; position: relative;
}
.nav-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.nav-mark {
  width: 28px; height: 28px; display: flex; align-items: center;
  justify-content: center; color: var(--text);
}
.nav-mark img {
  width: 100%; height: 100%; display: block;
}
.nav-word { font-size: 15px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.nav-link {
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  padding: 6px 14px; border-radius: var(--r-md);
  text-decoration: none; transition: color .15s; white-space: nowrap;
}
.nav-link:hover { color: var(--text); }
/* Sign in starts the right-hand action cluster (Sign in, Get started);
   margin-left: auto pushes it away from the left group (logo, Docs)
   regardless of that group's width. */
.nav-signin { margin-left: auto; }
/* Language dropdown: a native <details> disclosure needs no JS for
   open/close or click-outside — the browser handles both. Absolutely
   centered on the nav bar (nav-inner is the positioned ancestor) so it
   sits dead-center regardless of how wide the left/right groups are;
   taken out of flex flow, so it doesn't fight the auto-margin above. */
.nav-lang-dd {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.nav-lang-dd summary {
  display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--text-2);
  padding: 6px 10px; border-radius: var(--r-md); border: 1px solid var(--border);
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.nav-lang-dd summary::-webkit-details-marker { display: none; }
.nav-lang-dd summary:hover,
.nav-lang-dd[open] summary { color: var(--text); border-color: var(--border-2); }
.nav-lang-caret { width: 9px; height: 9px; transition: transform .15s; }
.nav-lang-dd[open] .nav-lang-caret { transform: rotate(180deg); }
.nav-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 130px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 5px; z-index: 200;
}
.nav-lang-menu a {
  display: block; padding: 7px 10px; border-radius: 8px; font-size: 13.5px;
  color: var(--text-2); text-decoration: none; transition: background .15s, color .15s;
}
.nav-lang-menu a:hover { background: var(--surface); color: var(--text); }
.nav-lang-menu a[aria-current="true"] { color: var(--text); font-weight: 600; background: var(--surface); }
.nav-cta {
  font-family: var(--font); font-size: 13.5px; font-weight: 700;
  background: var(--ink); color: var(--paper);
  padding: 8px 18px; border-radius: var(--r-md);
  text-decoration: none; border: none; cursor: pointer;
  transition: background .15s; margin-left: 8px; white-space: nowrap;
}
.nav-cta:hover { background: #000; }

@media (max-width: 900px) {
  .nav-inner { padding: 0 24px; }
}
@media (max-width: 640px) {
  /* Docs link is reachable from page content and footer; drop it first so
     Sign in + Get started never wrap or get pushed off-screen at phone widths. */
  .nav-extra { display: none; }
  /* True centering needs room to breathe; at phone widths there isn't enough,
     so the dropdown rejoins the flex flow right before Sign in. */
  .nav-lang-dd { position: static; transform: none; margin-left: auto; }
  .nav-signin { margin-left: 0; }
}