/* ==========================================================================
   QUOMYA — AUTH / ACCESO / ARRANQUE V1
   Ola S4.9. Todo el archivo está acotado a `.qy-auth-screen`.

   Estas superficies se pintan FUERA del router: `app.js` las escribe
   directamente en `#view-root` al resolver la sesión. Por eso el ámbito
   oscuro viaja en la propia <section> que emite cada renderizador, nunca en
   :root ni en <body>. Es el mecanismo acotado de S4.1 aplicado donde S4.1
   deliberadamente no llegó, no una inversión global.

   Esta hoja solo presenta las superficies de autenticación y acceso. Los
   contratos de Auth, admisión e invitaciones permanecen en sus módulos
   JavaScript y nunca se duplican en CSS.

   NO se reviste el diálogo legal. `initLegalDocumentDialog()` lo traslada a
   `document.body` a propósito, para escapar de cualquier contexto de
   apilamiento, así que después de inicializar ya NO es descendiente de
   `.qy-auth-screen` y ninguna regla de este archivo lo alcanza. Se deja tal
   cual: es el mismo diálogo que usa la puerta legal global, su contraste ya
   está verificado en claro y su comportamiento está protegido por
   `test-legal-beta-pack-v15-18-5`.
   ========================================================================== */

.qy-auth-screen,
.qy-auth-screen * {
  box-sizing: border-box;
}

/*
 * Columna centrada y acotada. `.screen` legacy trae anchura completa; aquí se
 * limita para que a 1440 el formulario no quede flotando en un campo vacío,
 * que es el fallo típico de una pantalla de acceso estirada.
 */
.qy-auth-screen {
  display: grid;
  gap: var(--qy-space-5);
  align-content: start;
  justify-items: stretch;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding-block: var(--qy-space-8) var(--qy-space-6);
  color: var(--qy-color-text-primary);
  overflow: visible;
}

/* ---- tarjetas -------------------------------------------------------------
   `styles.css`, `closed-beta-access-v15-17-a.css` y
   `account-security-v15-18-6.css` pintan estas superficies en claro con
   literales, no con tokens, así que se sobreescriben con la misma prioridad. */

.qy-auth-screen .card {
  padding: var(--qy-space-6);
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-1) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-xl) !important;
  box-shadow: var(--qy-elevation-card) !important;
}

.qy-auth-screen h2 {
  margin: 0 0 var(--qy-space-2);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-headline-lg);
  letter-spacing: var(--qy-tracking-tight);
}

.qy-auth-screen h3 {
  margin: 0 0 var(--qy-space-2);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-headline-md);
}

.qy-auth-screen p {
  margin: 0;
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-body-md);
}

.qy-auth-screen small {
  color: var(--qy-color-text-tertiary) !important;
  font: var(--qy-text-label-md);
}

/* ---- cabecera de marca ---------------------------------------------------
   El logotipo horizontal a color ya es legible sobre Deep Ink: es el mismo
   activo local que usa el armazón. No se introduce ninguna imagen nueva. */

.qy-auth-screen .auth-hero,
.qy-auth-screen .email-verification-card,
.qy-auth-screen .beta-access-card {
  display: grid;
  gap: var(--qy-space-3);
  justify-items: start;
  text-align: left;
}

/*
 * `closed-beta-access-v15-17-a.css` capa el contenedor a 178 px mientras
 * `quomya-visual-system.css` fuerza `width: clamp(176px, 24vw, 264px)` y
 * `max-height: 58px` con `!important` sobre la imagen. El resultado medido era
 * un logotipo de 261 px desbordando una caja de 178. Se reajusta con la misma
 * prioridad y se deja que la altura mande.
 */
/*
 * El propio SVG lleva una placa `<rect fill="#071A26" rx="48">` bajo el
 * logotipo: es el lockup para fondo oscuro y está pensado para apoyarse en
 * Deep Ink. Sobre `surface-1` esa placa se recortaba como un rectángulo más
 * oscuro a media tarjeta. En vez de pelearse con el activo, se le da el fondo
 * que espera y el recorte pasa a ser un chip de marca deliberado.
 */
.qy-auth-screen .auth-brand-lockup,
.qy-auth-screen .beta-access-brand {
  display: inline-flex;
  align-items: center;
  align-self: start;
  max-width: none;
  margin: 0 0 var(--qy-space-1);
  padding: var(--qy-space-2) var(--qy-space-3);
  background: var(--qy-color-bg);
  border: 1px solid var(--qy-color-border);
  border-radius: var(--qy-radius-md);
}

.qy-auth-screen .rt-brand-logo {
  width: auto !important;
  height: 30px !important;
  max-width: 100% !important;
  max-height: none !important;
}

.qy-auth-screen .closed-beta-chip {
  padding: 3px var(--qy-space-3);
  color: var(--qy-color-brand-text) !important;
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
  background: var(--qy-color-brand-soft) !important;
  border: 1px solid var(--qy-color-brand) !important;
  border-radius: var(--qy-radius-pill) !important;
}

.qy-auth-screen .auth-beta-availability {
  width: 100%;
  margin: calc(var(--qy-space-3) * -1) 0 var(--qy-space-4);
  padding: var(--qy-space-3) var(--qy-space-4);
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-label-md);
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-md) !important;
}

.qy-auth-screen .auth-beta-availability[data-state="AVAILABLE"] {
  color: var(--qy-color-brand-text) !important;
  background: var(--qy-color-brand-soft) !important;
  border-color: var(--qy-color-brand) !important;
}

.qy-auth-screen .auth-beta-availability[data-state="FULL"],
.qy-auth-screen .auth-beta-availability[data-state="PAUSED"] {
  color: var(--qy-color-pending-text) !important;
  background: var(--qy-color-pending-soft) !important;
  border-color: var(--qy-color-pending) !important;
}

.qy-auth-screen .auth-invite-detected {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: var(--qy-space-3) var(--qy-space-4);
  background: var(--qy-color-brand-soft) !important;
  border: 1px solid var(--qy-color-brand) !important;
  border-left-width: 3px !important;
  border-radius: var(--qy-radius-md) !important;
}

.qy-auth-screen .auth-invite-detected strong {
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-md);
}

.qy-auth-screen .auth-invite-detected span {
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-label-md);
}

/* ---- pestañas entrar / crear cuenta --------------------------------------
   Dos modos reales del MISMO formulario, conmutados por `setAuthMode`. No son
   navegación: se presentan como un conmutador segmentado, y el estado activo
   se distingue por relleno y peso además de por color. */

.qy-auth-screen .auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qy-space-1);
  margin: 0 0 var(--qy-space-5);
  padding: var(--qy-space-1);
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-md) !important;
}

.qy-auth-screen .auth-tab {
  min-height: var(--qy-touch-min);
  padding: 0 var(--qy-space-3);
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-body-md);
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--qy-radius-sm) !important;
  cursor: pointer;
}

.qy-auth-screen .auth-tab.is-active {
  color: var(--qy-color-text-on-brand) !important;
  font-weight: 600;
  background: var(--qy-color-brand) !important;
}

.qy-auth-screen .auth-tab:not(.is-active):hover {
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-hover) !important;
}

/* ---- formularios ---------------------------------------------------------- */

.qy-auth-screen .form-grid {
  display: grid;
  gap: var(--qy-space-4);
}

.qy-auth-screen .form-field {
  display: grid;
  gap: var(--qy-space-1);
  min-width: 0;
}

.qy-auth-screen .form-field > label,
.qy-auth-screen .form-field > span {
  display: flex;
  align-items: baseline;
  gap: var(--qy-space-2);
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-label-md);
  background: transparent !important;
}

/* El "Opcional" del código de invitación es una anotación, no una etiqueta. */
.qy-auth-screen .form-field > label > span {
  color: var(--qy-color-text-tertiary) !important;
  font: var(--qy-text-label-md);
  text-transform: uppercase;
  letter-spacing: var(--qy-tracking-label);
}

.qy-auth-screen input[type="email"],
.qy-auth-screen input[type="password"],
.qy-auth-screen input[type="text"] {
  width: 100%;
  min-height: var(--qy-touch-min);
  padding: 0 var(--qy-space-3);
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-md);
  background: var(--qy-color-surface-1) !important;
  border: 1px solid var(--qy-color-border-interactive) !important;
  border-radius: var(--qy-radius-md) !important;
}

/*
 * El código de invitación se teclea en bloques y se compara de un vistazo con
 * el del correo: numerales tabulares para que las columnas no bailen.
 */
.qy-auth-screen #auth-invite-code,
.qy-auth-screen #beta-invite-code {
  font-variant-numeric: var(--qy-font-numeric);
  letter-spacing: 0.04em;
}

.qy-auth-screen input::placeholder {
  color: var(--qy-color-text-tertiary) !important;
}

/*
 * S4.11A: el borde de foco pasa al ROL DE TEXTO de la marca. En oscuro es el
 * mismo valor (el rol resuelve al ancla), así que no cambia un pixel; en
 * claro, el ancla mide 2.33:1 sobre blanco y el rol 6.41:1. El indicador de
 * foco real sigue siendo el anillo, que nunca dependió de este borde.
 */
.qy-auth-screen input:focus {
  border-color: var(--qy-color-brand-text) !important;
  outline: none !important;
  box-shadow: var(--qy-focus-ring) !important;
}

.qy-auth-screen input:disabled {
  color: var(--qy-color-text-tertiary) !important;
  background: var(--qy-color-surface-3) !important;
  border-color: var(--qy-color-border) !important;
  cursor: not-allowed;
}

.qy-auth-screen .auth-invite-field small {
  color: var(--qy-color-text-tertiary) !important;
}

/* ---- enlace de contraseña olvidada --------------------------------------
   Botón real (`data-auth-reset-password`), no un enlace. Se subraya para que
   no dependa solo del color de marca. */

.qy-auth-screen .auth-password-actions {
  display: flex;
  justify-content: flex-end;
}

.qy-auth-screen .auth-text-button,
.qy-auth-screen .legal-inline-link {
  min-height: var(--qy-touch-min);
  padding: 0 var(--qy-space-2);
  color: var(--qy-color-brand-text) !important;
  font: var(--qy-text-body-md);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
}

.qy-auth-screen .auth-text-button:disabled {
  color: var(--qy-color-text-tertiary) !important;
  text-decoration: none;
  cursor: progress;
}

/* ---- casillas legales ----------------------------------------------------
   Tres consentimientos reales y obligatorios para registrarse. No se toca su
   texto ni su semántica jurídica: solo el revestimiento. */

.qy-auth-screen .auth-legal-fields {
  display: grid;
  gap: var(--qy-space-2);
  padding: var(--qy-space-4);
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-lg) !important;
}

.qy-auth-screen .check-row {
  display: flex;
  align-items: flex-start;
  gap: var(--qy-space-3);
  min-height: var(--qy-touch-min);
  padding: var(--qy-space-2) 0;
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-body-md);
  background: transparent !important;
  cursor: pointer;
}

.qy-auth-screen .check-row input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--qy-color-brand);
}

.qy-auth-screen .check-row strong {
  color: var(--qy-color-text-primary) !important;
}

.qy-auth-screen .check-row:focus-within span {
  color: var(--qy-color-text-primary) !important;
}

.qy-auth-screen .auth-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qy-space-2);
  margin: var(--qy-space-2) 0 0;
}

/* ---- botones -------------------------------------------------------------- */

.qy-auth-screen .primary-btn,
.qy-auth-screen .secondary-btn {
  width: 100%;
  min-height: var(--qy-touch-min);
  padding: 0 var(--qy-space-4);
  font: var(--qy-text-body-md);
  font-weight: 600;
  border-radius: var(--qy-radius-md) !important;
  cursor: pointer;
}

.qy-auth-screen .primary-btn {
  color: var(--qy-color-text-on-brand) !important;
  background: var(--qy-color-brand) !important;
  border: 1px solid var(--qy-color-brand) !important;
}

.qy-auth-screen .primary-btn:hover:not(:disabled) {
  background: var(--qy-color-brand-hover) !important;
  border-color: var(--qy-color-brand-hover) !important;
}

.qy-auth-screen .secondary-btn {
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-3) !important;
  border: 1px solid var(--qy-color-border-interactive) !important;
}

.qy-auth-screen .secondary-btn:hover:not(:disabled) {
  background: var(--qy-color-hover) !important;
}

/*
 * Estado ocupado real: `handleAuthSubmit` deshabilita el botón y le cambia el
 * texto a "Entrando…" / "Creando solicitud…". El texto ya comunica el estado;
 * el color solo lo acompaña.
 */
.qy-auth-screen .primary-btn:disabled,
.qy-auth-screen .secondary-btn:disabled {
  color: var(--qy-color-text-tertiary) !important;
  background: var(--qy-color-surface-3) !important;
  border-color: var(--qy-color-border-strong) !important;
  cursor: progress;
}

/*
 * `!important` medido, no por costumbre: `styles.css` fija
 * `box-shadow: none` sobre `.primary-btn`, y sin elevar la prioridad el anillo
 * de foco quedaba en `none` justo en el botón de entrar. Se comprobó
 * recorriendo la pantalla con Tab real, no con `.focus()` por script, que en
 * Chromium no activa `:focus-visible`.
 */
.qy-auth-screen button:focus-visible {
  outline: none !important;
  box-shadow: var(--qy-focus-ring) !important;
}

.qy-auth-screen .auth-beta-help {
  margin: var(--qy-space-4) 0 0;
  color: var(--qy-color-text-tertiary) !important;
  font: var(--qy-text-label-md);
}

.qy-auth-screen .auth-privacy-card {
  background: var(--qy-color-surface-2) !important;
}

/* ==========================================================================
   VERIFICACIÓN DE CORREO
   ========================================================================== */

.qy-auth-screen .email-verification-account,
.qy-auth-screen .beta-access-account {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: var(--qy-space-3) var(--qy-space-4);
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-md) !important;
}

.qy-auth-screen .email-verification-account span,
.qy-auth-screen .beta-access-account span {
  color: var(--qy-color-text-tertiary) !important;
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
}

.qy-auth-screen .email-verification-account strong,
.qy-auth-screen .beta-access-account strong {
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-lg);
  overflow-wrap: anywhere;
}

/*
 * Aviso contextual. El estado sin conexión NO se distingue solo por color:
 * el renderizador ya cambia el título a "Necesitas conexión" y el cuerpo del
 * texto, y además deshabilita las acciones que requieren red.
 */
.qy-auth-screen .email-verification-notice,
.qy-auth-screen .beta-access-notice {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: var(--qy-space-3) var(--qy-space-4);
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  border-left: 3px solid var(--qy-color-brand) !important;
  border-radius: var(--qy-radius-md) !important;
}

.qy-auth-screen .email-verification-notice.is-offline,
.qy-auth-screen .beta-access-notice.is-offline {
  border-left-color: var(--qy-color-pending) !important;
  background: var(--qy-color-pending-soft) !important;
}

.qy-auth-screen .email-verification-notice strong,
.qy-auth-screen .beta-access-notice strong {
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-md);
}

.qy-auth-screen .email-verification-notice span,
.qy-auth-screen .beta-access-notice span {
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-body-md);
}

.qy-auth-screen .email-verification-actions,
.qy-auth-screen .beta-access-actions {
  display: grid;
  gap: var(--qy-space-2);
  width: 100%;
}

/* ==========================================================================
   PUERTA DE ACCESO A LA BETA
   La semántica la decide `accessPolicy.js`; aquí solo se pinta.
   ========================================================================== */

.qy-auth-screen .beta-access-status {
  padding: 3px var(--qy-space-3);
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
  border-radius: var(--qy-radius-pill) !important;
}

/*
 * `is-pending` e `is-blocked` son los dos estados reales que emite el
 * renderizador. Se diferencian por tono Y por texto: la propia etiqueta dice
 * cuál es, y el título cambia entre "Solicitud pendiente" y "Acceso pausado".
 */
.qy-auth-screen .beta-access-status.is-pending {
  color: var(--qy-color-pending-text) !important;
  background: var(--qy-color-pending-soft) !important;
  border: 1px solid var(--qy-color-pending) !important;
}

.qy-auth-screen .beta-access-status.is-blocked {
  color: var(--qy-color-cancelled-text) !important;
  background: var(--qy-color-cancelled-soft) !important;
  border: 1px solid var(--qy-color-cancelled) !important;
}

.qy-auth-screen .beta-invite-redeem {
  display: grid;
  gap: var(--qy-space-3);
  width: 100%;
  padding: var(--qy-space-4);
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-lg) !important;
}

.qy-auth-screen .beta-invite-redeem > div {
  display: grid;
  gap: 2px;
}

.qy-auth-screen .beta-invite-redeem strong {
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-lg);
}

.qy-auth-screen .beta-invite-redeem > div > span {
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-body-md);
}

.qy-auth-screen .beta-access-help {
  color: var(--qy-color-text-tertiary) !important;
}

/* ==========================================================================
   ARRANQUE: CARGA Y ERROR FATAL
   Son las dos primeras pantallas que puede ver un usuario. Si se quedaran en
   claro, el arranque parpadearía de blanco a oscuro en cada sesión.
   ========================================================================== */

.qy-auth-screen.qy-auth-status {
  place-content: center;
  min-height: 60vh;
}

.qy-auth-screen .empty-state {
  display: grid;
  gap: var(--qy-space-3);
  justify-items: center;
  padding: var(--qy-space-8) var(--qy-space-5);
  color: var(--qy-color-text-secondary) !important;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
}

.qy-auth-screen .empty-state h2 {
  font: var(--qy-text-headline-md);
}

.qy-auth-screen .loader-orb {
  width: 44px;
  height: 44px;
  background: var(--qy-color-brand-soft) !important;
  border: 3px solid var(--qy-color-border-strong) !important;
  border-top-color: var(--qy-color-brand) !important;
  border-radius: 50% !important;
  animation: qy-auth-orb 900ms linear infinite;
}

@keyframes qy-auth-orb {
  to {
    transform: rotate(360deg);
  }
}

/*
 * Sin animación el orbe seguiría siendo un círculo de marca, y el texto
 * "Cargando…" que lo acompaña ya comunica el estado. No se sustituye por nada.
 */
@media (prefers-reduced-motion: reduce) {
  .qy-auth-screen .loader-orb {
    animation: none;
  }
}

.qy-auth-screen .warning-box {
  display: grid;
  gap: 2px;
  width: 100%;
  margin: var(--qy-space-4) 0 0;
  padding: var(--qy-space-3) var(--qy-space-4);
  background: var(--qy-color-error-soft) !important;
  border: 1px solid var(--qy-color-error) !important;
  border-radius: var(--qy-radius-md) !important;
}

.qy-auth-screen .warning-box strong {
  color: var(--qy-color-error-text) !important;
  font: var(--qy-text-body-md);
}

.qy-auth-screen .warning-box span {
  color: var(--qy-color-text-secondary) !important;
  font: var(--qy-text-label-md);
  overflow-wrap: anywhere;
}

.qy-auth-screen .action-row {
  display: grid;
  gap: var(--qy-space-2);
  width: 100%;
  margin-top: var(--qy-space-4);
}

/* ==========================================================================
   ANFITRIÓN DE LA RUTA DE TUTORIAL
   `LEGACY_TUTORIAL_UI_ENABLED` es false, así que hoy esta sección se pinta
   vacía y `initOnboardingScreen()` navega a Hoy inmediatamente. Se le da
   fondo coherente para que ese instante no destelle en blanco.
   ========================================================================== */

.qy-auth-screen.qy-onboarding-host {
  min-height: 40vh;
  place-content: center;
}

.qy-auth-screen .tutorial-route-status {
  color: var(--qy-color-text-secondary) !important;
  text-align: center;
}

/* ---- responsive ----------------------------------------------------------- */

@media (max-width: 559px) {
  .qy-auth-screen {
    gap: var(--qy-space-4);
    padding-block: var(--qy-space-5) var(--qy-space-4);
  }

  .qy-auth-screen .card {
    padding: var(--qy-space-5);
  }

  .qy-auth-screen h2 {
    font: var(--qy-text-headline-md);
  }

  .qy-auth-screen .auth-legal-fields {
    padding: var(--qy-space-3);
  }
}

/*
 * A partir de 900 px la columna se ensancha un poco: el mismo formulario en
 * 480 px sobre una pantalla de escritorio se lee estrecho, pero pasar de
 * ~560 px haría los campos incómodamente largos para un solo dato.
 */
@media (min-width: 900px) {
  .qy-auth-screen {
    max-width: 560px;
    gap: var(--qy-space-6);
    padding-block: var(--qy-space-12) var(--qy-space-8);
  }

  .qy-auth-screen .card {
    padding: var(--qy-space-8);
  }

  .qy-auth-screen .rt-brand-logo {
    height: 34px !important;
  }

  .qy-auth-screen .email-verification-actions,
  .qy-auth-screen .beta-access-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
   * "Cerrar sesión" es la acción de salida y ocupa la fila completa por
   * debajo, para no quedar a un dedo de "Ya he confirmado el correo".
   */
  .qy-auth-screen .email-verification-actions > :last-child {
    grid-column: 1 / -1;
  }
}

.qy-registration-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--qy-space-2);
  margin: 0 0 var(--qy-space-5);
  padding: 0;
  list-style: none;
  color: var(--qy-color-text-secondary);
  font-size: var(--qy-font-size-sm);
  text-align: center;
}

.qy-registration-progress li {
  border-bottom: 3px solid var(--qy-color-border);
  padding-block: var(--qy-space-2);
}

.qy-registration-progress li.is-active {
  border-color: var(--qy-color-brand);
  color: var(--qy-color-text-primary);
  font-weight: 700;
}

.qy-auth-screen .auth-support-link,
.qy-auth-screen .beta-access-support {
  margin: var(--qy-space-4) 0 0;
  text-align: center;
}

.qy-registration-profile select,
.qy-registration-profile input {
  width: 100%;
  min-height: var(--qy-touch-min);
}

.feedback-attachments-field input[type="file"] {
  width: 100%;
}