/* ═══════════════════════════════════════════════════════════════
   asparagus.shop — Shared Navigation & Design System
   ═══════════════════════════════════════════════════════════════ */

/* ── Standard nav ─────────────────────────────────────────────── */
.asp-nav {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 18px;
  gap: 2px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}

/* Accent stripe — top edge */
.asp-nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    rgba(var(--accent-rgb), .4) 30%,
    transparent 60%);
  opacity: .7;
}

/* Logo */
.asp-logo {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e2e8f0);
  text-decoration: none;
  letter-spacing: -.2px;
  margin-right: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity .15s;
}
.asp-logo .shop { color: #22c55e; }
.asp-logo:hover { opacity: .8; }

/* Nav links */
.asp-nav-link {
  font-size: 11.5px;
  font-family: 'JetBrains Mono','Fira Code','Consolas',monospace;
  color: var(--text-dim);
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 5px;
  transition: color .12s, background .12s;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .1px;
}
.asp-nav-link:hover {
  color: var(--text);
  background: rgba(255,255,255,.06);
}
.asp-nav-link.active {
  color: var(--accent);
  background: rgba(var(--accent-rgb), .12);
  font-weight: 600;
}

/* Separator */
.asp-nav-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 10px;
}

/* Right slot */
.asp-nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Grower type badge ────────────────────────────────────────── */
.type-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 17px; padding: 0 6px; border-radius: 3px;
  font-size: 9px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; cursor: default;
  position: relative; flex-shrink: 0;
}
.type-badge::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 5px); left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a; color: #e2e8f0;
  padding: 4px 8px; border-radius: 4px;
  font-size: 10px; font-weight: 500; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.type-badge:hover::after { opacity: 1; }
.type-grower { background: rgba(34,197,94,.13);  color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.type-trader { background: rgba(14,165,233,.13);  color: #38bdf8; border: 1px solid rgba(14,165,233,.3); }
.type-both   { background: rgba(251,191,36,.12);  color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }

/* ── Page badge (bottom-left accent label) ────────────────────── */
.asp-page-badge {
  position: absolute;
  right: 18px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(var(--accent-rgb), .45);
  pointer-events: none;
}