/* ============================================================================
   The nav. One definition for every page that shows it: search, preferences,
   checkout, resources and the guides. scripts/nav.js writes the markup; this
   file is the only place it is styled. Pages carry no nav rules of their own.

   Before 2026-09-13 there were five copies (main, dashboard, checkout,
   profile, nav-auth.js), each with its own padding and pill. Measured at
   1440px they disagreed, so the account pill and the links shifted between
   pages. The values below are main.html's COMPUTED desktop values from that
   measurement, not its source (it carried three conflicting .nav-inner rules).

   Colors are fixed, not page tokens, so the bar is pixel-identical on every
   page. The blue is the landing blue (#38bdf8, styles/style.css).

   Load this AFTER the page's own <style> so it settles the argument.
   ========================================================================= */

.nav-bar {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Stated outright, never inherited. Pages once disagreed on the font, so the
   same credit number measured 58.6px on one page and 60.4px on another, and
   that 1.8px moved the whole right-hand side of the bar. */
.nav-bar, .mob-drawer { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
.nav-bar *, .mob-drawer * { box-sizing: border-box; }
.nav-bar [hidden], .mob-drawer [hidden] { display: none !important; }

.nav-inner {
  max-width: 64rem;      /* 1024px */
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
  row-gap: 0;
}

/* Tailwind's preflight sets html { line-height: 1.5 }. Inherited into the nav,
   that alone once made the bar 4px taller on the one Tailwind page. Pin the
   reference value so no page-level reset can skew the bar. */
.nav-inner, .nav-dropdown, .mob-drawer { line-height: normal; }

.nav-inner > a:first-child { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.nav-logo { height: auto; width: 144px; object-fit: contain; display: block; }

/* ---- tabs -------------------------------------------------------------- */

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
}

.nav-link {
  font-size: 13px;
  font-weight: 600;
  color: #eceef3;
  padding: 7px 16px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: rgba(255, 255, 255, 0.06); }
.nav-link.active { background: rgba(56, 189, 248, 0.14); color: #38bdf8; }
.nav-link:focus-visible { outline: 2px solid #38bdf8; outline-offset: 2px; }

/* ---- signed in vs signed out ------------------------------------------- */
/* A zero-width flex item is still a flex item: under space-between it earns
   its own gap (a leftover wrapper once dragged the links 46px left). So each
   state hides the other's pieces with display:none, never width:0. The hook
   is body.nav-authed, which nav.js sets; :empty cannot work here. */

.nav-acct-root { display: none; }
.mob-strip { display: none; }
body.nav-authed .nav-acct-root { display: flex; }
body.nav-authed .nav-login-btn { display: none; }

.nav-login-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #06121c;
  background: #38bdf8;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.nav-login-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }

/* ---- the account pill -------------------------------------------------- */
/* Every declaration below decides a width. A 2px padding difference here is
   what moved the whole right-hand side of the bar between pages. */

.nav-acct-root {
  position: relative;
  align-items: center;
  flex-shrink: 0;
}

.nav-acct-pill {
  display: flex;
  align-items: center;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.nav-credits-seg {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #38bdf8;
  text-decoration: none;
  transition: color 0.15s;
  font-variant-numeric: tabular-nums;
}
.nav-credits-seg svg { flex-shrink: 0; }
.nav-credits-seg:hover { color: #bae6fd; }

.nav-pill-sep {
  width: 1px;
  height: 14px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
}

.nav-acct-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.nav-acct-btn:hover { color: #38bdf8; }

.nav-user-label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #9ca3af;
  transition: transform 0.2s;
}
.nav-acct-btn:hover .nav-chevron { color: #38bdf8; }
.nav-acct-btn[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

/* ---- dropdown ---------------------------------------------------------- */

.nav-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(10, 12, 20, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(56, 189, 248, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 100;
}
.nav-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-dd-hdr { padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.nav-dd-hdr-label { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin: 0 0 2px; }
.nav-dd-email { font-size: 14px; font-weight: 500; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0; }
.nav-dd-body { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.nav-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #d1d5db;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color 0.15s, background 0.15s;
}
.nav-dd-item svg { flex-shrink: 0; color: #6b7280; }
.nav-dd-item:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav-dd-item.danger:hover { color: #f87171; background: rgba(248, 113, 113, 0.05); }

/* ---- phones: credits pill + hamburger, then the drawer ----------------- */

.mob-strip { align-items: center; gap: 8px; flex-shrink: 0; }
.mob-credits-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: #7dd3fc;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.mob-ham-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  padding: 0;
}
.ham-bars { display: flex; flex-direction: column; justify-content: center; gap: 4px; width: 12px; }
.ham-bar { display: block; height: 1px; width: 12px; border-radius: 999px; background: #d1d5db; transition: all 0.2s; transform-origin: center; }
.mob-ham-btn[aria-expanded="true"] #hb-top { transform: translateY(5px) rotate(45deg); }
.mob-ham-btn[aria-expanded="true"] #hb-mid { opacity: 0; transform: scaleX(0); }
.mob-ham-btn[aria-expanded="true"] #hb-bot { transform: translateY(-5px) rotate(-45deg); }

.mob-drawer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(10, 12, 17, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
}
.mob-drawer.open { grid-template-rows: 1fr; }
.mob-drawer-inner { overflow: hidden; }
.mob-drawer-list { max-width: 64rem; margin: 0 auto; padding: 8px 16px; display: flex; flex-direction: column; }
.mob-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: color 0.15s, background 0.15s;
}
.mob-nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.mob-nav-item.active { color: #38bdf8; background: rgba(56, 189, 248, 0.08); }
.mob-nav-item svg { color: #6b7280; }
.mob-nav-item.active svg { color: #38bdf8; }
.mob-nav-item.danger { color: #f87171; }
.mob-nav-item.danger:hover { color: #fca5a5; background: rgba(248, 113, 113, 0.05); }
.mob-nav-divider { margin: 8px 0; border: none; border-top: 1px solid rgba(255, 255, 255, 0.08); }

@media (max-width: 860px) {
  .nav-inner { flex-wrap: wrap; row-gap: 12px; padding: 14px 16px; }
  .mob-strip, .nav-login-btn { order: 2; }
  .nav-links { order: 3; width: 100%; justify-content: center; }
  .nav-link { flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 4px; font-size: 12px; letter-spacing: -0.01em; }
}

@media (max-width: 639px) {
  body.nav-authed .nav-acct-root { display: none; }
  body.nav-authed .mob-strip { display: flex; }
}

@media (min-width: 640px) {
  .mob-drawer { display: none; }
}

@media (max-width: 400px) {
  .nav-link { font-size: 11px; padding: 8px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bar *, .mob-drawer, .mob-drawer * { transition: none !important; }
}