/* ==========================================================================
   ToolsVale — Header auth widget
   Reuses tokens from tokens.css. Positioned inside .tv-site-header__actions
   next to the search trigger and burger.
   ========================================================================== */

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

/* ---------- Anonymous: sign-in link ---------- */
.tv-auth__signin {
  display: inline-flex;
  align-items: center;
  gap: var(--tv-space-2);
  height: 42px;
  padding-inline: var(--tv-space-4);
  border: 1px solid var(--tv-border-strong);
  border-radius: var(--tv-radius-sm);
  color: var(--tv-text);
  background: var(--tv-surface);
  font-size: var(--tv-fs-base);
  font-weight: var(--tv-fw-medium);
  transition: var(--tv-transition);
  text-decoration: none;
}

.tv-auth__signin:hover {
  color: var(--tv-primary);
  border-color: var(--tv-primary);
}

.tv-auth__signin svg { flex: 0 0 auto; }

@media (max-width: 640px) {
  .tv-auth__signin { padding-inline: var(--tv-space-3); }
  .tv-auth__signin-label { display: none; }
}

/* ---------- Authed: avatar button ---------- */
.tv-auth__me { position: relative; }

.tv-auth__avatar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--tv-border-strong);
  border-radius: 50%;
  background: var(--tv-surface);
  cursor: pointer;
  overflow: hidden;
  transition: var(--tv-transition);
}

.tv-auth__avatar-btn:hover { border-color: var(--tv-primary); }
.tv-auth__avatar-btn:focus-visible {
  outline: none;
  border-color: var(--tv-primary);
  box-shadow: var(--tv-focus-ring);
}

.tv-auth__avatar {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.tv-auth__avatar--lg { width: 40px; height: 40px; }

/* ---------- Dropdown menu ---------- */
.tv-auth__menu {
  position: absolute;
  top: calc(100% + var(--tv-space-2));
  right: 0;
  min-width: 240px;
  padding: var(--tv-space-3);
  background: var(--tv-surface);
  border: 1px solid var(--tv-border-strong);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow-lg);
  z-index: var(--tv-z-dropdown, 100);
}

.tv-auth__menu-head {
  display: flex;
  align-items: center;
  gap: var(--tv-space-3);
  padding: var(--tv-space-2) var(--tv-space-3) var(--tv-space-3);
  border-bottom: 1px solid var(--tv-border);
  margin-bottom: var(--tv-space-2);
}

.tv-auth__menu-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tv-auth__menu-id strong {
  font-size: var(--tv-fs-base);
  color: var(--tv-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.tv-auth__menu-id span {
  font-size: var(--tv-fs-small);
  color: var(--tv-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.tv-auth__menu-item {
  display: block;
  padding: var(--tv-space-3);
  border-radius: var(--tv-radius-sm);
  font-size: var(--tv-fs-base);
  color: var(--tv-text);
  text-decoration: none;
  transition: var(--tv-transition);
}

.tv-auth__menu-item:hover {
  background: var(--tv-surface-sunken);
  color: var(--tv-primary);
}