/* ============================================================
   nav-auth — signed-in header (avatar + dropdown)
   Companion to js/nav-auth.js. Pulled out of styles.css to keep
   the design-system file from sprawling past its soft-limit.
============================================================ */

.nav-auth {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-auth__trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 6px;
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.nav-auth__trigger:hover { border-color: var(--border-2); background: var(--paper-3); }

.nav-auth__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nav-auth__name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-auth__chev {
  color: var(--ink-muted);
  transition: transform 120ms ease;
}
.nav-auth[data-open="true"] .nav-auth__chev { transform: rotate(180deg); }

.nav-auth__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 6px;
  display: none;
  z-index: 50;
}
.nav-auth[data-open="true"] .nav-auth__menu { display: block; }

.nav-auth__menu a,
.nav-auth__menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.nav-auth__menu a:hover,
.nav-auth__menu button:hover { background: var(--paper-3); }
.nav-auth__menu button[disabled] { opacity: 0.6; cursor: wait; }

.nav-auth__list-cta {
  /* Match the existing .nav__cta look — used as the always-visible List CTA
     while signed in (alongside the avatar dropdown). */
  padding: 8px 16px;
  background: var(--brand);
  color: #ffffff !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: background-color 120ms ease;
}
.nav-auth__list-cta:hover { background: var(--brand-deep); }

/* Mobile sign-out — matches the existing mobile nav link rhythm */
.nav__signout {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 24px;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}