/* ══════════════════════════════════════════════════════════════════════
   LA CUENTA — la pastilla de la cabecera, su menú y la ventana de entrar
   ──────────────────────────────────────────────────────────────────────
   Va en su propio archivo y no en styles.css por lo mismo que js/
   account-menu.js está separado de js/main.js: esto se carga en las
   dieciséis páginas, y las dieciséis tienen su hoja de estilos propia.
   Metido en styles.css habría que copiarlo en product.css, en groups.css,
   en ranking.css y en schools.css — cinco copias del mismo material y
   cinco sitios donde puede quedarse desincronizado.

   El material es el de la cabecera: los tokens `--dock-*` para las
   pastillas y `--glass-*` para las superficies elevadas. Aquí no se declara
   ni un color: todos salen de css/liquid-glass.css, que es lo que hace que
   el tema oscuro funcione sin una sola regla duplicada.

   ── LO QUE SE ESCRIBE EN LÓGICO Y NO EN IZQUIERDA/DERECHA ────────────
   El sitio va en catorce idiomas y uno es el árabe, que se lee al revés.
   `inset-inline-end` y `padding-inline` colocan el menú al final de la
   línea —a la derecha en trece idiomas, a la izquierda en árabe— sin una
   regla `[dir="rtl"]` de más. Donde no hay propiedad lógica que valga (la
   sombra, el gradiente) es porque el efecto es simétrico y da igual.
   ══════════════════════════════════════════════════════════════════════ */

/* El hueco de la cabecera. `position: relative` es lo que ancla el menú
   desplegable, que va absoluto respecto de aquí y no de la página: así
   sigue a la pastilla cuando la cabecera se reorganiza en un móvil. */
.account-menu {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── Mientras se pregunta quién eres ──────────────────────────────────
   Ocupa lo que va a ocupar la pastilla y NO parpadea con un texto falso:
   el brillo que lo cruza dice «esto está llegando» sin escribir nada que
   luego haya que desmentir. 78 px es el ancho de «Sign in» con sus
   márgenes — medido, no estimado: si sobra o falta, la cabecera da el
   salto que este bloque existe para evitar. */
.acct-skeleton {
  display: block;
  width: 78px;
  height: 38px;
  border-radius: 9999px;
  background:
    linear-gradient(
      100deg,
      rgb(var(--c-ink) / 0.05) 30%,
      rgb(var(--c-ink) / 0.11) 50%,
      rgb(var(--c-ink) / 0.05) 70%
    );
  background-size: 220% 100%;
  animation: acct-sheen 1.4s var(--lg-ease) infinite;
}

@keyframes acct-sheen {
  from { background-position: 180% 0; }
  to   { background-position: -80% 0; }
}

/* ── Sin sesión: entrar ───────────────────────────────────────────────
   Hereda `.nav-pill` entera (styles.css): mismo alto, mismo material y
   mismo redondeo que el selector de idioma y que Instagram, para que la
   fila de la cabecera se lea como una sola y no como tres controles
   sueltos. Aquí solo se corrige lo que un <button> no hereda de un <a>. */
.acct-signin {
  cursor: pointer;
  font-family: inherit;
}

/* ── Con sesión: tú ───────────────────────────────────────────────────
   La pastilla se ensancha por la izquierda para hacerle sitio al avatar y
   mantiene los 38 px de alto de sus vecinas. El nombre se recorta con
   puntos suspensivos en vez de empujar: en una cabecera, un nombre largo
   no puede tirar del logo. */
.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 38px;
  max-width: min(11rem, 42vw);
  padding-inline: 0.3rem 0.8rem;
  border: none;
  border-radius: 9999px;
  color: var(--dock-ink-hover);
  background: linear-gradient(180deg, var(--dock-top), var(--dock-bottom));
  -webkit-backdrop-filter: blur(7px) saturate(170%);
  backdrop-filter: blur(7px) saturate(170%);
  box-shadow: var(--dock-shadow);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.3s var(--lg-ease),
    box-shadow 0.3s var(--lg-ease);
}

.acct-chip:hover {
  background: linear-gradient(180deg, var(--dock-hover-top), var(--dock-hover-bottom));
  box-shadow: var(--dock-hover-shadow);
}

.acct-chip:focus-visible,
.acct-signin:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.acct-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-chip__chevron {
  width: 12px;
  height: 12px;
  flex: none;
  opacity: 0.5;
  transition: transform 0.3s var(--lg-spring);
}

.acct-chip[aria-expanded="true"] .acct-chip__chevron {
  transform: rotate(180deg);
}

/* ── El avatar ────────────────────────────────────────────────────────
   Las iniciales sobre un color que sale del correo (ver `hue` en
   js/account-menu.js), así que es SIEMPRE el mismo para la misma cuenta.
   En HSL con la saturación y la luminosidad fijas: girando solo el tono,
   los 360 colores posibles pesan lo mismo en pantalla y ninguno sale
   chillón ni apagado. El texto va blanco en los dos temas —el fondo es
   de color en los dos— y por eso no usa `--accent-on`, que se da la
   vuelta en oscuro. */
.acct-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: hsl(var(--acct-hue, 210) 58% 42%);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

.acct-avatar--lg {
  width: 40px;
  height: 40px;
  font-size: 0.95rem;
}

/* ── El menú desplegable ──────────────────────────────────────────────
   Superficie elevada de verdad —sólida y con sombra—, no vidrio: aquí se
   lee texto pequeño (un correo) sobre lo que haya debajo, y el vidrio de
   la cabecera dejaría pasar una foto del pase de la portada justo por
   detrás de las letras.

   `transform-origin` arriba y al final de la línea: crece desde la
   pastilla que lo ha abierto, que es de donde el ojo espera que salga. */
.acct-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  width: min(17rem, calc(100vw - 2rem));
  padding: 0.4rem;
  border-radius: 1.1rem;
  background: rgb(var(--c-elevated));
  box-shadow:
    0 1px 0 0 var(--hairline) inset,
    0 18px 45px rgba(15, 23, 42, 0.18);
  transform-origin: top var(--acct-origin, right);
  opacity: 0;
  transform: scale(0.94) translateY(-6px);
  transition:
    opacity 0.18s var(--lg-ease),
    transform 0.28s var(--lg-spring);
}

[dir="rtl"] .acct-menu {
  --acct-origin: left;
}

.acct-menu.is-open {
  opacity: 1;
  transform: none;
}

.acct-menu[hidden] {
  display: none;
}

.acct-menu__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 0.75rem 0.85rem;
}

.acct-menu__who {
  display: grid;
  min-width: 0;
}

.acct-menu__who strong {
  color: rgb(var(--c-ink));
  font-size: 0.9rem;
  font-weight: 700;
}

/* El correo entero no cabe y no hace falta que quepa: lo que tiene que
   hacer es confirmar CUÁL de tus cuentas es ésta. */
.acct-menu__who strong,
.acct-menu__who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct-menu__who span {
  color: rgb(var(--c-muted));
  font-size: 0.76rem;
}

.acct-menu__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.62rem 0.75rem;
  border: none;
  border-radius: 0.75rem;
  background: none;
  color: rgb(var(--c-body));
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: background 0.2s var(--lg-ease), color 0.2s var(--lg-ease);
}

.acct-menu__item svg {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.55;
}

.acct-menu__item:hover {
  background: var(--hover-soft);
  color: rgb(var(--c-ink));
}

.acct-menu__item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.acct-menu__item--out {
  color: var(--c-danger);
}

.acct-menu__item--out svg {
  opacity: 0.7;
}

.acct-menu__item--out:hover {
  background: rgb(var(--c-danger-rgb) / 0.08);
  color: var(--c-danger);
}

.acct-menu__sep {
  height: 1px;
  margin: 0.35rem 0.4rem;
  background: var(--hairline);
}

/* ── El correo sin confirmar ──────────────────────────────────────────
   Arriba del todo y en ámbar, porque es lo que le falta a esa cuenta para
   poder publicar nada — y el sitio donde alguien lo va a buscar es aquí. */
.acct-menu__notice {
  margin: 0 0.15rem 0.35rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.8rem;
  background: rgb(var(--c-warn-rgb) / 0.10);
}

.acct-menu__notice p {
  margin: 0;
  color: var(--c-warn);
  font-size: 0.76rem;
  line-height: 1.45;
}

.acct-menu__resend {
  margin-top: 0.4rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--c-warn);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.acct-menu__resend:disabled {
  opacity: 0.5;
  cursor: default;
}

.acct-menu__resendDone {
  margin-top: 0.35rem !important;
  color: rgb(var(--c-muted)) !important;
}

.acct-menu__resendDone.is-bad {
  color: var(--c-danger) !important;
}

/* ══════════════════════════════════════════════════════════════════════
   LA VENTANA DE ENTRAR
   ══════════════════════════════════════════════════════════════════════ */

.acct-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 4vw, 2rem);
}

.acct-modal[hidden] {
  display: none;
}

/* Mientras está abierta, la página de detrás no se mueve: si no, al cerrar
   se vuelve a otro punto del scroll que el dedo no había pedido. Es lo
   mismo que hace `body.has-lightbox` en las fichas de producto. */
body.acct-locked {
  overflow: hidden;
}

.acct-modal__veil {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 16, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  opacity: 0;
  transition: opacity 0.25s var(--lg-ease);
}

.acct-modal.is-open .acct-modal__veil {
  opacity: 1;
}

/* La tarjeta. Sólida y no de vidrio, por lo mismo que el menú: aquí se
   escribe una contraseña, y un formulario translúcido sobre una foto es
   bonito en una captura y difícil de leer en un móvil al sol.

   `max-height` + scroll interno para la vista de alta, que es la más
   alta: en un teléfono apaisado con el teclado abierto no queda pantalla,
   y sin esto el botón de crear la cuenta se sale por abajo sin remedio. */
.acct-modal__card {
  position: relative;
  width: min(26rem, 100%);
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2rem);
  border-radius: 1.5rem;
  background: var(--panel-solid);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.5) inset,
    0 30px 80px rgba(6, 9, 16, 0.35);
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  transition:
    opacity 0.25s var(--lg-ease),
    transform 0.4s var(--lg-spring);
}

.acct-modal.is-open .acct-modal__card {
  opacity: 1;
  transform: none;
}

.acct-modal__x {
  position: absolute;
  top: 0.85rem;
  inset-inline-end: 0.85rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: none;
  color: rgb(var(--c-muted));
  cursor: pointer;
  transition: background 0.2s var(--lg-ease), color 0.2s var(--lg-ease);
}

.acct-modal__x svg {
  width: 16px;
  height: 16px;
}

.acct-modal__x:hover {
  background: var(--hover-soft);
  color: rgb(var(--c-ink));
}

.acct-modal__title {
  margin: 0 2rem 0.4rem 0;
  color: rgb(var(--c-ink));
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

[dir="rtl"] .acct-modal__title {
  margin: 0 0 0.4rem 2rem;
}

.acct-modal__lead {
  margin: 0 0 1.35rem;
  color: rgb(var(--c-muted));
  font-size: 0.86rem;
  line-height: 1.55;
}

.acct-modal__lead[hidden] {
  display: none;
}

/* ── Los campos ───────────────────────────────────────────────────────
   Mismo material que el resto de formularios del sitio (`.form-group` en
   styles.css): superficie sólida sobre el panel, cápsula, y el aro de foco
   del acento. Se reescribe aquí en lugar de reutilizar la clase porque
   styles.css no está en las dieciséis páginas — que es la razón de que
   este archivo exista. */
.acct-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.acct-field > span,
.acct-field__row > span {
  color: rgb(var(--c-muted));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-inline-start: 0.2rem;
}

.acct-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.acct-field input {
  width: 100%;
  border: none;
  border-radius: 2.5rem;
  padding: 0.85rem 1.15rem;
  background: rgb(var(--c-elevated));
  color: rgb(var(--c-ink));
  font-family: inherit;
  /* 16 px justos y ni uno menos: por debajo de eso, Safari en iPhone hace
     zoom sobre el campo al tocarlo y deja la ventana descuadrada. */
  font-size: 1rem;
  box-shadow: var(--fieldgroup-shadow);
  transition: box-shadow 0.25s var(--lg-ease);
}

.acct-field input:focus {
  outline: none;
  box-shadow: var(--fieldgroup-shadow), var(--accent-ring);
}

/* El campo trampa. Fuera de la pantalla y sin alto: `display: none` lo
   esquivan los robots que rellenan formularios, y esto no. */
.acct-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.acct-hint {
  margin: -0.45rem 0 0.9rem;
  padding-inline-start: 0.2rem;
  color: rgb(var(--c-subtle));
  font-size: 0.75rem;
}

/* ── El botón ─────────────────────────────────────────────────────── */

.acct-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.95rem 1.5rem;
  border: none;
  border-radius: 2.5rem;
  background: var(--accent);
  color: var(--accent-on);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: var(--accent-shadow);
  transition:
    transform 0.45s var(--lg-spring),
    background 0.3s var(--lg-ease),
    box-shadow 0.3s var(--lg-ease);
}

.acct-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  background: var(--accent-hover);
  box-shadow: var(--accent-shadow-hover);
}

.acct-submit:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition: transform 0.13s var(--lg-ease);
}

.acct-submit:disabled {
  opacity: 0.65;
  cursor: default;
}

/* Trabajando. El rótulo se queda —quitarlo encoge el botón y da un salto—
   y encima gira el aro. */
.acct-submit.is-busy {
  color: transparent;
  position: relative;
}

.acct-submit.is-busy::after {
  content: '';
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid rgb(var(--accent-on-rgb) / 0.35);
  border-top-color: var(--accent-on);
  border-radius: 50%;
  animation: acct-spin 0.7s linear infinite;
}

@keyframes acct-spin {
  to { transform: rotate(360deg); }
}

/* ── Google ───────────────────────────────────────────────────────── */

.acct-oauth[hidden] {
  display: none;
}

/* El «o» con su filete a cada lado, hecho con dos pseudoelementos y no con
   tres cajas: la línea tiene que llegar exactamente hasta la palabra sea
   cual sea el idioma, y en japonés («または») esa palabra mide otra cosa. */
.acct-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0;
  color: rgb(var(--c-subtle));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.acct-or::before,
.acct-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}

.acct-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.85rem 1.25rem;
  border-radius: 2.5rem;
  background: rgb(var(--c-elevated));
  color: rgb(var(--c-ink));
  font-size: 0.85rem;
  font-weight: 600;
  box-shadow: var(--fieldgroup-shadow);
  transition: background 0.25s var(--lg-ease), transform 0.35s var(--lg-spring);
}

.acct-google:hover {
  background: rgb(var(--c-elevated-hover));
  transform: translateY(-1px);
}

.acct-google svg {
  flex: none;
}

/* ── Avisos, errores y pie ───────────────────────────────────────── */

.acct-flash {
  margin: 0 0 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0.8rem;
  font-size: 0.8rem;
  line-height: 1.5;
}

.acct-flash[hidden] {
  display: none;
}

.acct-flash--error {
  background: rgb(var(--c-danger-rgb) / 0.10);
  color: var(--c-danger);
}

.acct-flash--warn {
  background: rgb(var(--c-warn-rgb) / 0.12);
  color: var(--c-warn);
}

/* El error del campo va PEGADO al botón y no flotando arriba: quien acaba
   de pulsar «entrar» está mirando el botón, y ahí es donde tiene que
   aparecer el «esa contraseña no es». */
.acct-error {
  margin: -0.2rem 0 0.6rem;
  padding-inline-start: 0.2rem;
  color: var(--c-danger);
  font-size: 0.78rem;
  line-height: 1.45;
}

.acct-error[hidden] {
  display: none;
}

.acct-foot {
  margin: 1.15rem 0 0;
  color: rgb(var(--c-muted));
  font-size: 0.82rem;
  text-align: center;
}

.acct-link {
  padding: 0;
  border: none;
  background: none;
  color: rgb(var(--c-ink));
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.acct-link:hover {
  opacity: 0.7;
}

.acct-link--sm {
  color: rgb(var(--c-muted));
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* ── «Mira el correo» ─────────────────────────────────────────────── */

.acct-view--sent {
  text-align: center;
}

.acct-sent__icon {
  width: 44px;
  height: 44px;
  margin: 0.5rem auto 1rem;
  color: rgb(var(--c-muted));
  opacity: 0.7;
}

.acct-view--sent p {
  margin: 0 0 1.5rem;
  color: rgb(var(--c-body));
  font-size: 0.9rem;
  line-height: 1.6;
}

.acct-view[hidden] {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════
   PANTALLAS PEQUEÑAS
   ──────────────────────────────────────────────────────────────────────
   El nombre desaparece por debajo de 30 rem y queda el avatar solo. No es
   por gusto: ahí la cabecera lleva el logo, el idioma, Instagram y esto en
   la misma fila, y una pastilla con nombre obliga a la fila a partirse. Un
   avatar redondo de 34 px dice «tu cuenta» igual de bien y ocupa lo mismo
   que el enlace de Instagram que tiene al lado.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 30rem) {
  .acct-chip {
    gap: 0;
    max-width: none;
    padding-inline: 0.28rem;
  }

  .acct-chip__name,
  .acct-chip__chevron {
    display: none;
  }

  .acct-skeleton {
    width: 38px;
  }

  /* El menú NO cambia de anclaje aquí, y es una corrección: llegó a estar
     en `position: fixed` con `top: auto` para pegarlo a los cantos de la
     pantalla, y salía descolocado. El motivo es sutil y vale la pena
     dejarlo escrito — `top: auto` sobre un elemento fijo resuelve UNA VEZ
     a su posición estática y ahí se queda, pegado a la ventana; y en un
     móvil js/hub-dock.js desplaza la página nada más cargar para traer la
     baldosa activa a la vista. El menú se quedaba donde estaba el chip
     ANTES de ese desplazamiento, o sea a medio salir por arriba.

     Absoluto —que es lo que ya era— no tiene ese problema: viaja con la
     cabecera. Y cabe: `width: min(17rem, calc(100vw - 2rem))` lo estrecha
     hasta 2 rem menos que la pantalla, así que alineado por su canto
     derecho con el chip todavía le sobra margen por la izquierda. */
}

/* ══════════════════════════════════════════════════════════════════════
   TEMA OSCURO
   ──────────────────────────────────────────────────────────────────────
   Casi todo sale solo de los tokens. Lo que hay que corregir a mano son
   las tres sombras que llevan negro literal: sobre un lienzo negro no se
   ven, y lo que sostiene una superficie elevada ahí es un filete claro por
   dentro, no una sombra por fuera.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  .acct-menu {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 20px 50px rgba(0, 0, 0, 0.6);
  }

  .acct-modal__card {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08) inset,
      0 30px 80px rgba(0, 0, 0, 0.7);
  }

  .acct-modal__veil {
    background: rgba(0, 0, 0, 0.66);
  }

  /* El botón de Google en oscuro NO se pinta de blanco: la marca pide su
     logo sobre superficie clara o su versión oscura, y aquí la superficie
     elevada del tema ya es la correcta. Lo único que le falta es el filete
     que la separa del panel, que en claro se lo daba la sombra. */
  .acct-google {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   QUIEN HA PEDIDO QUE NO SE MUEVA NADA
   ──────────────────────────────────────────────────────────────────────
   Se quitan los MOVIMIENTOS y se dejan las OPACIDADES: aparecer y
   desaparecer sin desplazarse no marea a nadie, y sin ninguna transición
   la ventana daría un corte seco que se lee como un fallo. El aro del
   botón y el brillo del esqueleto se paran del todo: son bucles, que es
   justo lo que esta preferencia pide que no haya.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .acct-menu,
  .acct-modal__card {
    transform: none;
    transition-duration: 0.01s;
  }

  .acct-menu.is-open,
  .acct-modal.is-open .acct-modal__card {
    transform: none;
  }

  .acct-skeleton,
  .acct-submit.is-busy::after {
    animation: none;
  }

  .acct-chip__chevron,
  .acct-google,
  .acct-submit {
    transition: none;
  }
}