/*
 * Social sign-in buttons (Google / Apple), used together with /js/auth.js
 *
 *   <div class="auth-buttons">
 *     <a class="auth-btn" data-auth-provider="google"></a>
 *     <a class="auth-btn" data-auth-provider="apple"></a>
 *   </div>
 *
 * Everything stays hidden until auth.js learns from the app which providers are enabled.
 * Self contained: every theme variable has a fallback, so it works on pages without css/variables.css.
 * Override the look from the page itself, e.g. `.auth-btn { background: #fff; color: #000; }`.
 */
.auth-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md, 16px);
  margin-top: var(--spacing-lg, 24px);
}

.auth-buttons--start {
  justify-content: flex-start;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm-plus, 12px);
  min-width: 220px;
  padding: var(--spacing-sm-plus, 12px) var(--spacing-lg, 24px);
  border: 1px solid var(--color-white-transparent, rgba(255, 255, 255, 0.16));
  border-radius: var(--border-radius-md, 12px);
  background: var(--color-black-light-50, #1d1e23);
  color: var(--color-white, #fff);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.auth-btn:hover {
  background: var(--color-black-light-75, #292b2f);
  border-color: var(--color-white-thin, #505862);
}

.auth-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.auth-btn__icon {
  display: inline-flex;
}

/* Keep visibility gates after the base display rules. */
.auth-buttons:not(.is-ready),
.auth-btn:not(.is-enabled) {
  display: none;
}

/* A sign-up trigger while auth-modal.js checks for a live session
   (POST /api/auth/refresh, up to 2 s) before opening the dialog. */
[data-auth-open][aria-busy="true"],
a[aria-busy="true"].is-checking {
  cursor: progress;
  opacity: 0.72;
}