/* ---------- shared site nav (all routes) ---------- */
/* Single source of truth for <SiteNav />. Loaded via <link> in each route's
   head(). Selectors are scoped to .nav-wrap so they outrank the time-space.css
   nav rules that still style the standalone tool pages. Var fallbacks mirror
   raccoon-sound.css :root so service pages (which don't load that stylesheet)
   render identically. */
.nav-wrap{position:fixed;top:22px;left:0;right:0;z-index:900;display:flex;justify-content:center;padding:0 20px}
.nav-wrap nav{display:flex;align-items:center;gap:8px;background:var(--panel,rgba(16,18,20,.72));backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border:1px solid var(--line,rgba(229,228,226,.09));border-radius:999px;padding:8px 8px 8px 24px}
.nav-wrap .nav-logo{font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;letter-spacing:.14em;font-weight:500;margin-right:16px;
  color:var(--ink,#e5e4e2);text-decoration:none}
.nav-wrap .nav-logo em{font-style:normal;color:var(--green,#6fc23d)}
.nav-wrap .nav-links{display:flex;align-items:center;gap:4px;font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.nav-wrap .nav-links a{color:var(--dim,#9aa5ad);padding:11px 16px;border-radius:999px;transition:color .3s,background .3s;text-decoration:none}
.nav-wrap .nav-links a:hover{color:var(--ink,#e5e4e2);background:rgba(242,244,238,.06)}
.nav-wrap .nav-contact{background:var(--green,#6fc23d);color:#0b0e08;padding:11px 22px;border-radius:999px;font-family:var(--mono,'JetBrains Mono',monospace);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:background .3s;text-decoration:none}
.nav-wrap .nav-contact:hover{background:var(--green-hi,#8fd64e)}
@media(max-width:760px){
  .nav-wrap nav{padding:6px 6px 6px 14px;gap:4px}
  .nav-wrap .nav-links{gap:0}
  .nav-wrap .nav-links a{padding:10px 8px;font-size:10px;letter-spacing:.08em}
  .nav-wrap .nav-contact{padding:10px 14px;font-size:10px;letter-spacing:.08em}
  .nav-wrap .nav-logo{margin-right:6px}
}
@media(max-width:400px){
  .nav-wrap{padding:0 10px}
  .nav-wrap .nav-logo em{display:none}
  .nav-wrap .nav-logo{margin-right:2px}
  .nav-wrap nav{padding:6px 6px 6px 12px;gap:2px}
  .nav-wrap .nav-links a{padding:10px 6px;font-size:9.5px;letter-spacing:.06em}
  .nav-wrap .nav-contact{padding:10px 12px}
}

/* ---------- tools dropdown ---------- */
.nav-wrap .nav-drop{position:relative;display:flex;align-items:center}
.nav-wrap .nav-drop-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);
  display:flex;flex-direction:column;min-width:190px;padding:6px;gap:2px;
  background:var(--panel,rgba(16,18,20,.72));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line,rgba(229,228,226,.09));border-radius:14px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s}
.nav-wrap .nav-drop:hover .nav-drop-menu,.nav-wrap .nav-drop:focus-within .nav-drop-menu,.nav-wrap .nav-drop.is-open .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-wrap .nav-drop-menu a{white-space:nowrap;text-align:left}
@media(max-width:760px){.nav-wrap .nav-drop-menu{min-width:160px}}