/* Shared product navigation — the 7-tab bar across the authenticated product.
   Rendered by /js/product-nav.js into <nav id="product-nav" data-active="...">.
   Relies on the editorial :root tokens each page defines inline
   (--card, --line, --muted, --ink, --green, --ease). */

.nav {
  position: sticky;
  top: 60px;
  z-index: 30;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.nav-in {
  display: flex;
  gap: 2px;
  justify-content: center;
  justify-content: safe center; /* center when it fits; fall back to start (no clipping) when it overflows on narrow screens */
  padding: 0 20px;
  max-width: 1320px;
  margin: 0 auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-in::-webkit-scrollbar {
  display: none;
}
.navlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 14px;
  font-size: 13.5px;
  font-weight: 600;
  /* --ink-2 (#41506C) matches the dashboard nav's text-muted-foreground exactly;
     the old --muted (#6B7A94 text-tertiary) read as a weak washed-out gray next
     to the dashboard's darker navy. Hover already resolves to --ink (navy). */
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s var(--ease);
}
.navlink svg {
  width: 15px;
  height: 15px;
}
.navlink:hover {
  color: var(--ink);
}
.navlink.active {
  color: var(--green);
  border-bottom-color: var(--green);
}
.navlink:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: -2px;
  border-radius: 4px;
}
.navlink-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 1px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  background: var(--tint, #EEE9DC);
  border: 1px solid #ECD9B8;
  border-radius: 3px;
}