/* Shared sign-in and sign-up pieces for Varial Energy and Varial X: the
   Log in / Create account switch and the Microsoft and passkey buttons. Varial X
   recolours these for its dark card in varial_x.css. */

.auth-tabs {
  display: flex;
  gap: .25rem;
  margin: 0 0 1.25rem;
  padding: .25rem;
  border: 1px solid var(--varial-border, #E3E5DE);
  border-radius: .45rem;
  background: var(--varial-bg-subtle, #F1F3EE);
}
.auth-tabs .auth-tab {
  flex: 1;
  padding: .55rem .5rem;
  border-radius: .25rem;
  color: var(--varial-gray-400, #6E6A63);
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.auth-tabs .auth-tab.is-active {
  background: var(--varial-white, #fff);
  color: var(--varial-gray-800, #211F1C);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
@media (hover: hover) {
  .auth-tabs .auth-tab:not(.is-active):hover { color: var(--varial-gray-800, #211F1C); }
}

.auth-alt-stack { display: grid; gap: .5rem; }
.auth-alt-stack form { margin: 0; }
.auth-alt-stack #passkey-verification-placeholder { display: block; }
.auth-alt-stack #passkey-verification-status-message:empty { display: none; }
.auth-alt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  min-height: 2.75rem;
}
/* Provider buttons are neutral; the passkey button keeps the brand outline. */
.btn-outline-secondary.auth-alt-btn {
  --bs-btn-bg: var(--varial-white, #fff);
  --bs-btn-color: var(--varial-gray-800, #211F1C);
  --bs-btn-border-color: var(--varial-gray-400, #6E6A63);
  --bs-btn-hover-bg: var(--varial-bg-subtle, #F1F3EE);
  --bs-btn-hover-color: var(--varial-gray-800, #211F1C);
  --bs-btn-hover-border-color: var(--varial-gray-800, #211F1C);
  --bs-btn-active-bg: var(--varial-bg-subtle, #F1F3EE);
  --bs-btn-active-color: var(--varial-gray-800, #211F1C);
}
.auth-alt-btn .auth-ms-logo { flex: none; }
/* Touch screens keep :hover after a tap, which left the button stuck coloured. */
@media (hover: none) {
  .auth-alt-btn:hover,
  .auth-alt-btn.btn-outline-primary:hover {
    background: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color);
  }
}