/**
 * Auth buttons — dark theme, matches the SnowPro 50-day editorial palette.
 *
 * Sits in a fixed slot top-right of the landing page. Designed to read as
 * a small polished UI control on the dark surface.
 */

:root {
  --tcg-accent: #29B5E8;
}

.tcg-auth-buttons {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sf-font, 'Figtree', system-ui, sans-serif);
}

/* ─────────────────────────────────────────────────────────
   Buttons (logged-out + logout)
   ───────────────────────────────────────────────────────── */
.tcg-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}

/* Log in (ghost). */
.tcg-auth-btn--login {
  background: transparent;
  color: var(--sf-text, #E4E7EE);
  border-color: var(--sf-border, #232A38);
}

.tcg-auth-btn--login:hover,
.tcg-auth-btn--login:focus-visible {
  background: var(--sf-surface-hover, #1A2030);
  border-color: var(--sf-border-light, #2E3648);
  color: var(--sf-text-bright, #F4F6FA);
  outline: none;
}

/* Sign up free (primary cyan). */
.tcg-auth-btn--signup {
  background: var(--tcg-accent);
  color: #0E1218;  /* sf-bg, dark text on cyan for AA contrast */
}

.tcg-auth-btn--signup:hover,
.tcg-auth-btn--signup:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(41, 181, 232, 0.32);
  outline: none;
}

.tcg-auth-btn--signup:active {
  transform: translateY(0);
}

/* Log out (ghost link, low-emphasis). */
.tcg-auth-btn--logout {
  background: transparent;
  color: var(--sf-muted, #8B93A4);
  font-weight: 500;
}

.tcg-auth-btn--logout:hover,
.tcg-auth-btn--logout:focus-visible {
  color: var(--sf-text-bright, #F4F6FA);
  background: var(--sf-surface-hover, #1A2030);
  outline: none;
}

/* ─────────────────────────────────────────────────────────
   Greeting pill (logged-in)
   ───────────────────────────────────────────────────────── */
.tcg-auth-greeting {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sf-text-bright, #F4F6FA);
  padding: 0.45rem 0.85rem;
  background: var(--sf-surface, #141923);
  border: 1px solid var(--sf-border, #232A38);
  border-radius: 999px;
  white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────
   Context variants
   ───────────────────────────────────────────────────────── */
.tcg-auth-buttons--single .tcg-auth-btn {
  padding: 0.45rem 0.85rem;
  font-size: 0.825rem;
}

/* ─────────────────────────────────────────────────────────
   Mobile
   ───────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tcg-auth-buttons {
    gap: 0.35rem;
  }

  .tcg-auth-btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.825rem;
  }

  .tcg-auth-greeting {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tcg-auth-btn {
    transition: none;
  }
  .tcg-auth-btn--signup:hover,
  .tcg-auth-btn--signup:focus-visible {
    transform: none;
  }
}