/* Shared navbar (see site-nav.js) */
#mainNav.nav-solid {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: #1e293b;
}
#mainNav:has(#mobileMenu:not([hidden])) {
  background: rgba(2, 6, 23, 0.96);
}
.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  padding: 6px;
  border: 1px solid #1e293b;
  border-radius: 14px;
  background: rgba(2, 6, 23, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.nav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: #e2e8f0;
  white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu a:focus-visible,
.nav-menu a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
[data-dropdown]:last-of-type .nav-menu {
  left: auto;
  right: 0;
}

/* Lock the Vault (dialog lives in the shared navbar) */
/* ---- Lock the Vault ---- */
.vault-card.is-locked { box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.55); }
.vault-card.is-locked .vault-lock { font-size: 0; }
.vault-card.is-locked .vault-lock::after { content: "🔒"; font-size: 1.125rem; }
.vault-dialog { width: min(640px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 0; border-radius: 28px;
  background: #0f172a; color: #e2e8f0; overflow-y: auto; overscroll-behavior: contain;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 40px 120px -20px rgba(0, 0, 0, 0.9); }
.vault-dialog::backdrop { background: rgba(2, 6, 23, 0.8); backdrop-filter: blur(6px); }
.vault-stage { position: relative; overflow: hidden; }
.vault-img { display: block; width: 100%; height: auto; }
.vault-dial { position: absolute; left: 58.1%; top: 50.3%; width: 11.6%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; }
.vault-stamp { position: absolute; inset: auto 0 12% 0; margin: 0 auto; width: max-content; padding: 0.4rem 1rem; border-radius: 999px;
  font: 800 clamp(1rem, 3vw, 1.5rem)/1 ui-monospace, SFMono-Regular, monospace; letter-spacing: 0.12em; color: #fde68a;
  background: rgba(2, 6, 23, 0.82); box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.7); opacity: 0; scale: 1.2; }
.vault-stage.is-locking .vault-dial, .vault-stage.is-locked .vault-dial { opacity: 1; }
.vault-stage.is-locked .vault-stamp { opacity: 1; scale: 1; transition: opacity 200ms ease-out, scale 200ms ease-out; }
.vault-stage.is-locked .vault-img { filter: saturate(0.6) brightness(0.8); transition: filter 400ms ease-out; }
@media (prefers-reduced-motion: no-preference) {
  .vault-stage.is-locking .vault-dial { animation: vault-spin 1400ms cubic-bezier(0.6, 0, 0.2, 1) both; }
  .vault-stage.is-locked .vault-dial { rotate: 540deg; }
  .vault-stage.is-locking { animation: vault-thud 160ms ease-out 1380ms both; }
}
@keyframes vault-spin { from { rotate: 0deg; } to { rotate: 540deg; } }
@keyframes vault-thud { 50% { translate: 0 3px; } }
.vault-status { margin-top: 0.75rem; line-height: 1.6; color: #cbd5e1; min-height: 3.2em; }
.vault-status code { font-family: ui-monospace, SFMono-Regular, monospace; color: #fff; background: rgba(255, 255, 255, 0.08); padding: 0.05rem 0.35rem; border-radius: 6px; }
.vault-ok { color: #d1fae5; }
.vault-warn { color: #fde68a; }
.vault-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; border-radius: 999px; font-weight: 700;
  transition: background-color 150ms ease-out, transform 150ms ease-out; }
.vault-primary { background: #f59e0b; color: #0f172a; }
.vault-primary:hover { background: #fbbf24; }
.vault-ghost { background: rgba(255, 255, 255, 0.08); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16); }
.vault-ghost:hover { background: rgba(255, 255, 255, 0.14); }
@media (prefers-reduced-motion: no-preference) { .vault-btn:active { transform: scale(0.96); } }
.vault-status { display: block; }
.vault-danger { background: #dc2626; color: #fff; }
.vault-danger:hover { background: #b91c1c; }
.vault-confirm { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 14px;
  background: rgba(220, 38, 38, 0.12); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.45); color: #fecaca; font-weight: 600; cursor: pointer; }
.vault-confirm input { width: 1.15rem; height: 1.15rem; accent-color: #dc2626; }
@media (prefers-reduced-motion: no-preference) {
  .vault-shake { animation: vault-shake 400ms ease-out; }
}
@keyframes vault-shake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }