/* Shared public-site header. The landing page and every live demo load this
 * stylesheet so their navigation cannot drift in height, spacing or breakpoints. */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 60px;
  padding: 12px 28px;
  border-bottom: 1px solid transparent;
  background: rgba(8, 7, 13, 0.6);
  color: #f4f2fb;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  backdrop-filter: blur(14px);
  transition: border-color 0.3s;
}
.nav.scrolled { border-color: rgba(255, 255, 255, 0.09); }
.nav .logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 9px;
  color: #f4f2fb;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
}
.nav .logo img { width: 26px; height: 26px; flex: 0 0 auto; }
.nav .links {
  display: flex;
  min-width: 0;
  margin-left: auto;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.nav .links > * { flex: 0 0 auto; min-width: 0; }
.nav .links > a { color: #a7a2bd; text-decoration: none; white-space: nowrap; }
.nav .links > a:hover { color: #f4f2fb; }
.nav .links a.btn.primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 12px;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  box-shadow: 0 6px 24px rgba(124, 58, 237, 0.35);
  color: #fff !important;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.nav .links a.btn.primary:hover {
  border-color: rgba(167, 139, 250, 0.5);
  box-shadow: 0 10px 32px rgba(124, 58, 237, 0.5);
  transform: translateY(-1px);
}
.gh-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: #f4f2fb !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.gh-badge:hover { border-color: rgba(167, 139, 250, 0.5); }
.gh-badge svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
.gh-badge .stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
  color: #fbbf24;
}
.gh-badge .stars svg { width: 13px; height: 13px; fill: #fbbf24; }
.release-downloads {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  min-width: 104px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  color: #a7a2bd !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.release-downloads:hover,
.release-downloads:focus-visible { border-color: rgba(167, 139, 250, 0.5); color: #f4f2fb !important; }
.release-downloads:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.release-downloads > svg,
.release-downloads > span:not(.download-tooltip) { flex: 0 0 auto; }
.release-downloads > svg { width: 15px; height: 15px; }
.release-downloads[data-state='loading'] .download-value { opacity: 0.55; }
.release-downloads[data-state='error'] { opacity: 0.72; }
.download-tooltip {
  position: absolute;
  z-index: 60;
  top: calc(100% + 9px);
  right: 0;
  width: max-content;
  max-width: min(310px, 80vw);
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  background: #0e0c17;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  color: #f4f2fb;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-3px);
  transition: opacity 0.15s, transform 0.15s;
}
.release-downloads:hover .download-tooltip,
.release-downloads:focus-visible .download-tooltip { opacity: 1; transform: translateY(0); }
.lang-picker { position: relative; flex: 0 0 auto; }
.lang-trigger {
  display: inline-flex;
  width: 146px;
  min-width: 146px;
  height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  color: #f4f2fb;
  cursor: pointer;
  font: 600 12.5px/1 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.lang-trigger:hover,
.lang-trigger[aria-expanded='true'] { border-color: rgba(167, 139, 250, 0.52); background: rgba(139, 92, 246, 0.1); }
.lang-trigger:focus-visible { outline: 3px solid rgba(139, 92, 246, 0.25); outline-offset: 2px; }
.lang-flag { flex: 0 0 auto; font-size: 17px; line-height: 1; filter: saturate(0.92); }
.lang-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-chevron { width: 14px; height: 14px; flex: 0 0 auto; margin-left: auto; color: #a7a2bd; transition: transform 0.2s; }
.lang-trigger[aria-expanded='true'] .lang-chevron { transform: rotate(180deg); }
.lang-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 9px);
  right: 0;
  width: 242px;
  max-height: min(430px, calc(100vh - 84px));
  padding: 7px;
  overflow-y: auto;
  border: 1px solid rgba(167, 139, 250, 0.24);
  border-radius: 15px;
  background: #12101d;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(18px);
  transform-origin: top right;
  animation: lang-menu-in 0.16s ease-out;
}
.lang-menu[hidden] { display: none; }
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-5px) scale(0.98); } to { opacity: 1; transform: none; } }
.lang-option {
  display: grid;
  width: 100%;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #c8c3d8;
  cursor: pointer;
  font: 600 12.5px/1.25 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  text-align: left;
}
.lang-option:hover,
.lang-option:focus-visible { outline: none; background: rgba(139, 92, 246, 0.12); color: #f4f2fb; }
.lang-option[aria-selected='true'] { background: rgba(139, 92, 246, 0.18); color: #ddd6fe; }
.lang-option .lang-flag { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, 0.055); }
.lang-check { width: 15px; height: 15px; opacity: 0; color: #a78bfa; }
.lang-option[aria-selected='true'] .lang-check { opacity: 1; }

/* Wiki keeps the public navigation and adds documentation controls inside the
 * same header surface. */
.wiki-nav .nav-secondary { display: none; }
.wiki-menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 9px;
  place-content: center;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #f4f2fb;
  cursor: pointer;
}
.wiki-menu-toggle span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.wiki-search-wrap {
  position: relative;
  display: flex;
  min-width: 220px;
  max-width: 520px;
  flex: 1 1 420px;
  align-items: center;
}
.wiki-search-wrap > svg {
  position: absolute;
  left: 13px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #a7a2bd;
  stroke-width: 2;
  pointer-events: none;
}
.wiki-search-wrap input {
  width: 100%;
  height: 39px;
  padding: 0 58px 0 40px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  outline: none;
  background: rgba(255, 255, 255, 0.045);
  color: #f4f2fb;
  font: 500 13px/1.4 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.wiki-search-wrap input:focus { border-color: rgba(167, 139, 250, 0.68); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.12); }
.wiki-search-wrap kbd { position: absolute; right: 9px; padding: 2px 6px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; background: rgba(255, 255, 255, 0.04); color: #a7a2bd; font: 10.5px/1.4 'Inter', sans-serif; }
.wiki-search-wrap .search-results { top: calc(100% + 9px); }
body.wiki-page { padding-top: 65px; }

/* The demo frame starts immediately below the same fixed header used by the
 * landing page. This preserves the full demo canvas without a second header row. */
body.demo-page { padding-top: 65px; grid-template-rows: 1fr; }

@media (max-width: 1320px) {
  .nav { gap: 16px; padding-right: 16px; padding-left: 16px; }
  .nav .links { gap: 10px; font-size: 13px; }
  .nav .links a.btn.primary { padding-right: 13px; padding-left: 13px; }
}
@media (max-width: 1180px) {
  .nav .links a.nav-secondary { display: none; }
  .wiki-nav .gh-badge .lbl,
  .wiki-nav .release-downloads .download-word { display: none; }
  .wiki-nav .release-downloads { min-width: 58px; padding-right: 10px; padding-left: 10px; }
}
@media (max-width: 980px) {
  .nav .links a.hideS,
  .gh-badge .lbl,
  .release-downloads .download-word { display: none; }
  .release-downloads { min-width: 58px; padding-right: 10px; padding-left: 10px; }
}
@media (max-width: 760px) {
  .nav .links a.btn.primary { display: none; }
  .wiki-nav { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .wiki-nav .wiki-menu-toggle { display: grid; }
  .wiki-nav .wiki-search-wrap { order: 4; min-width: 100%; max-width: none; flex-basis: 100%; }
  .wiki-nav .links { margin-left: auto; }
  body.wiki-page { padding-top: 110px; }
}
@media (max-width: 620px) {
  .nav { gap: 12px; padding: 12px 16px; }
  .nav .links { gap: 12px; }
  .lang-trigger { width: 46px; min-width: 46px; padding: 0; justify-content: center; }
  .lang-trigger .lang-name,
  .lang-trigger .lang-chevron { display: none; }
  .lang-menu { position: fixed; top: 65px; right: 12px; width: min(250px, calc(100vw - 24px)); }
}
@media (max-width: 420px) {
  .nav { height: 58px; min-height: 58px; gap: 8px; padding: 10px; }
  .nav .logo { gap: 0; font-size: 0; }
  .nav .links { gap: 8px; }
  .nav #faq-nav-link { display: none; }
  .gh-badge { padding-right: 10px; padding-left: 10px; }
  body.demo-page { padding-top: 58px; }
  .wiki-nav { height: auto; min-height: 110px; }
  .wiki-nav .logo { gap: 9px; font-size: 17px; }
  body.wiki-page { padding-top: 110px; }
}