/* L'AREA DI ACCESSO DI ARES — un solo foglio per tutte le pagine auth.
 *
 * PERIMETRO. Questo foglio veste `src/templates/auth/*.html` e nient'altro.
 * Non tocca la shell dell'applicazione, non tocca `dashboard.css`, e non
 * dichiara un solo colore scritto a mano: ogni valore viene dai token di
 * `design/tokens.css`, che e' l'unico foglio che li dichiara.
 *
 * PERCHE' UN FOGLIO NUOVO E NON UN BLOCCO IN `dashboard.css`.
 * `dashboard.css` e' collegato da sei pagine e cambia di rado: farlo cambiare
 * per un restyling dell'accesso costringerebbe a far salire la sua `?v=` e a
 * invalidare la cache di TUTTA la piattaforma per una superficie che pesa
 * quattro template. Un foglio nuovo ha un indirizzo nuovo, quindi nessun
 * browser puo' servirsene una copia vecchia: e' il caso in cui il difetto del
 * 2026-08-25 (stesso indirizzo, contenuto diverso) non puo' esistere.
 *
 * PERCHE' `dashboard.css` RESTA COLLEGATO SOTTO DI LUI.
 * Non per pigrizia: `tests/test_versione_dei_fogli.py::
 * UnaPaginaCARICA_I_TOKEN_CHE_CONSUMA_Test` pretende ALMENO TRE pagine che
 * colleghino `dashboard.css` — e' il polo positivo che impedisce al suo
 * confronto di essere vuoto e verde. Le pagine di auth sono quattro delle sei:
 * toglierlo di qui lascerebbe due pagine e farebbe arrossire quel polo, e
 * abbassare il tre sarebbe indebolire una prova per far entrare un ramo.
 * Conseguenza operativa, misurata e non supposta: `dashboard.css` dichiara
 * `button { width: 100%; padding: 15px 18px }` GLOBALE, e in questo programma
 * quella regola ha gia' prodotto tre difetti diversi. Ogni controllo di questo
 * foglio dichiara quindi ANCHE il proprio `padding`, non solo la larghezza.
 *
 * PERCHE' NESSUN `var(--token, ripiego)`.
 * Un ripiego dietro un nome che non esiste vince per sempre: e' verde oggi e
 * verde tra un anno, e nessuna prova lo vede. Qui i nomi consumati sono quelli
 * VERI del tema, e `tests/test_auth_visual_r1.py` li rilegge uno per uno
 * dentro `design/tokens.css`.
 *
 * PERCHE' IL TEMA E' FISSATO A SCURO.
 * `auth/*.html` dichiara `data-ares-theme="dark"` sull'elemento radice. Le
 * pagine di accesso non caricano `design/js/theme.js` e non hanno un
 * interruttore: senza l'attributo il risultato sarebbe comunque il blocco
 * `:root` (scuro), ma sarebbe un esito per omissione invece che una scelta.
 * Dichiararlo rende la tavolozza deterministica anche se un domani qualcuno
 * portasse qui l'interruttore, e permette alle prove di contrasto di misurare
 * i valori che la pagina serve davvero invece di due ipotesi.
 */

/* ------------------------------------------------------------------ *
 * 1. La scena                                                         *
 * ------------------------------------------------------------------ */

body.ares-auth {
  margin: 0;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: none;
  color: var(--text);
  /* Era `Inter, "Segoe UI", Arial`, cioe' una pila DIVERSA da quella
   * dell'applicazione: l'accesso e il prodotto cadevano su due caratteri.
   * Ora la fonte e' una sola. */
  font-family: var(--ares-font-sans);
  -webkit-font-smoothing: antialiased;
}

/* Il fondo e' DECORATIVO e sta sotto tutto: `pointer-events: none` perche'
 * un livello a schermo intero che intercetti il puntatore e' il modo classico
 * di rendere un form inutilizzabile senza che nulla sembri rotto. */
.ares-auth-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1100px 620px at 14% -10%, var(--c-b-056-a22-bg), transparent 62%),
    radial-gradient(900px 520px at 92% 8%, var(--c-b-064-a16-bg), transparent 58%),
    radial-gradient(1200px 700px at 50% 118%, var(--c-b-048-a14-bg), transparent 60%);
}

/* La griglia geometrica: due sole righe di CSS, nessuna immagine, nessuna
 * animazione. La maschera la fa sparire ai bordi, cosi' non diventa una
 * texture di sfondo ma una profondita'. */
.ares-auth-field::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--c-n-064-a10-ln) 1px, transparent 1px),
    linear-gradient(to bottom, var(--c-n-064-a10-ln) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(760px 560px at 50% 34%, #000 0%, transparent 78%);
  mask-image: radial-gradient(760px 560px at 50% 34%, #000 0%, transparent 78%);
}

.ares-auth-stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 48px 24px 28px;
}

/* AREE E NON SOLO COLONNE. Le tre parti — identita', carta, assicurazioni —
 * hanno un ordine diverso sul desktop e sul telefono, e `grid-template-areas`
 * e' il modo di dirlo una volta invece di duplicare il markup. Su schermo
 * stretto le assicurazioni finiscono SOTTO la carta: annidate dentro
 * l'identita' spingevano il campo «Nome utente» a meta' pagina e il comando
 * fuori dalla prima schermata, misurato a 390x844. */
.ares-auth-panel {
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "carta"
    "claims";
  gap: 28px;
  align-items: center;
  justify-items: stretch;
}

.ares-auth-intro { grid-area: intro; }
.ares-auth-card { grid-area: carta; }
.ares-auth-claims { grid-area: claims; }

/* ------------------------------------------------------------------ *
 * 2. Il marchio                                                       *
 * ------------------------------------------------------------------ */

/* LA PIASTRA E' LA STESSA DELLA SHELL, e non per gusto.
 * `--c-n-084-fill` (`#cbd5e1`) e' uno dei token che valgono lo STESSO valore
 * nei due temi: e' un `fill`, cioe' «una carta chiara e' gia' una carta
 * chiara». L'inchiostro del marchio e' `RGB(17,51,91)`: su questa piastra da'
 * 8.58:1, sopra AAA. Sul fondo `--bg` del tema scuro (`#020617`) lo stesso
 * inchiostro darebbe 1.58:1, cioe' il marchio NON SI VEDE. La piastra non e'
 * un vezzo grafico: e' la condizione perche' il logo esista. */
.ares-auth-plate {
  display: block;
  width: 268px;
  max-width: 100%;
  padding: 18px 22px;
  border-radius: 8px;
  background: transparent;
  border-bottom: 3px solid var(--c-b-028-fill);
  /* stessa ragione del foglio del gate: l'ombra disegna la sagoma della
   * piastra, cioe' il rettangolo che deve sparire. */
  box-shadow: none;
}

/* IL LOGO E' UNO SFONDO, NON UN `img`.
 * Il rapporto e' dichiarato due volte: `aspect-ratio: 771 / 214` sono le
 * dimensioni VERE del file (3.6028), e `background-size: contain` e' la
 * seconda difesa — se un giorno la scatola cambiasse forma, l'immagine ci
 * starebbe dentro intera invece di essere stirata. `cover` la taglierebbe. */
/* IL MARCHIO occupa la scatola esattamente come la occupava lo sfondo:
 * larghezza piena della piastra, altezza dal rapporto naturale del file.
 * `brightness(0) invert(1)` dipinge di bianco l'inchiostro -- misurato sul
 * file vero: 84% trasparente, luminanza media 43 su 255, cioe' ~1.3:1 sul
 * fondo di questa pagina -- e lascia trasparente il resto. Nessuna seconda
 * superficie, proporzioni originali, e se il file non arrivasse non
 * resterebbe nulla da guardare. */
.ares-auth-marchio {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}

.ares-auth-logo {
  display: block;
  width: 100%;
  aspect-ratio: 771 / 214;
  background-image: url("/static/design/brand/ares-logo.png?v=brand-1");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------ *
 * 3. La colonna d'identita'                                           *
 * ------------------------------------------------------------------ */

.ares-auth-intro {
  display: grid;
  gap: 20px;
  justify-items: start;
  min-width: 0;
}

.ares-auth-kicker {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.ares-auth-title {
  margin: 0;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--text);
  text-wrap: balance;
}

.ares-auth-lead {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Le tre righe dicono SOLTANTO cose che il sistema fa davvero, e la prova
 * `tests/test_auth_visual_r1.py::LaMicrocopiaDiSicurezzaEVERA` le lega
 * al codice che le realizza: verifica in due passaggi via email
 * (`create_login_2fa_code` + `send_login_2fa_email`), registrazione degli
 * accessi e dei tentativi (`audit_log`, che fa una INSERT vera in
 * `app_audit_log`), limite ai tentativi ripetuti (`is_login_allowed` +
 * `register_login_failure`). Una promessa di sicurezza che il prodotto non
 * mantiene e' peggio di nessuna promessa. */
.ares-auth-claims {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  width: 100%;
}

/* Il pallino in FLUSSO e non in `position: absolute`: su una pastiglia che va
 * a capo l'ancoraggio assoluto lo lasciava fuori asse, ed e' visibile solo in
 * un browser. */
.ares-auth-claims li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

.ares-auth-claims li::before {
  content: "";
  flex: 0 0 auto;
  margin-top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--c-b-056-a18-ln);
}

/* ------------------------------------------------------------------ *
 * 4. La carta                                                         *
 * ------------------------------------------------------------------ */

.ares-auth-card {
  width: 100%;
  min-width: 0;
  padding: 34px 32px 30px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background-color: var(--surface-elevated);
  /* Profondita' con UN solo rilievo, non con il vetro: la leggibilita' viene
   * prima degli effetti, e un `backdrop-filter` su una carta che porta un
   * modulo di accesso e' esattamente il posto sbagliato per metterlo. */
  background-image: linear-gradient(var(--c-n-096-a08-bg), transparent 180px);
  box-shadow: var(--shadow-strong);
}

.ares-auth-card-eyebrow {
  display: block;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ares-auth-card h2 {
  margin: 0 0 8px;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 800;
  color: var(--text);
}

.ares-auth-card-note {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

.ares-auth-card-note:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * 5. Il modulo                                                        *
 * ------------------------------------------------------------------ */

.ares-auth-form {
  display: grid;
  gap: 18px;
  margin: 0;
}

.ares-auth-field-row {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ares-auth-label {
  display: block;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}

.ares-auth-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 16px; /* 16px: sotto questa misura iOS ingrandisce da solo la pagina */
  line-height: 1.3;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.ares-auth-input::placeholder {
  color: var(--input-placeholder);
  opacity: 1;
}

.ares-auth-input:hover {
  border-color: var(--border-strong);
}

.ares-auth-input:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--c-b-056-a18-ln);
}

.ares-auth-input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ares-auth-input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* Il campo con l'interruttore mostra/nascondi. Il bottone sta DENTRO la
 * scatola del campo e il campo si riserva lo spazio con il padding a destra:
 * cosi' il testo non finisce mai sotto l'icona. */
.ares-auth-secret {
  position: relative;
  display: block;
  min-width: 0;
}

.ares-auth-secret .ares-auth-input {
  padding-right: 58px;
}

/* `width` E `padding` dichiarati: `dashboard.css` porta un
 * `button { width: 100%; padding: 15px 18px }` globale, e questo bottone
 * senza le due righe qui sotto si prenderebbe l'intera riga del campo. */
.ares-auth-peek {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.ares-auth-peek:hover {
  background: var(--c-n-096-a08-bg);
  color: var(--text);
}

.ares-auth-peek:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.ares-auth-peek svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  pointer-events: none;
}

.ares-auth-peek .ares-auth-peek-off { display: none; }
.ares-auth-peek[aria-pressed="true"] .ares-auth-peek-on { display: none; }
.ares-auth-peek[aria-pressed="true"] .ares-auth-peek-off { display: block; }

/* Il codice a sei cifre. `letter-spacing` su un campo centrato sposta il testo
 * di mezza spaziatura verso destra: `text-indent` la restituisce. */
.ares-auth-code {
  min-height: 64px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
}

.ares-auth-turnstile {
  display: flex;
  justify-content: center;
  min-height: 65px;
  margin: 0;
}

.ares-auth-turnstile iframe {
  max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * 6. Il comando                                                       *
 * ------------------------------------------------------------------ */

.ares-auth-submit {
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  padding: 15px 20px;
  border: 0;
  border-radius: 8px;
  /* MISURATO, non scelto a occhio. Il testo del comando e' `--on-solid`
   * (bianco) e il fondo e' un gradiente: il contrasto va misurato
   * nell'estremo PIU' CHIARO, che e' il punto peggiore. `--c-b-056`
   * (`#2f6feb`) dava 4.57:1 — sopra 4.5, ma con 0.07 di margine su un
   * testo di 15px che NON e' «testo grande» ai sensi di WCAG. `--accent`
   * (`#2563eb`) da' 5.17:1 e l'altro estremo `--c-b-048` da' 6.70:1.
   * Il margine non e' un vezzo: e' cio' che impedisce a un ritocco futuro
   * di far scendere sotto la soglia senza che nessuno se ne accorga, ed e'
   * `IlContrastoDellAreaAuthEMISURATO` a tenere il pavimento. */
  background-image: linear-gradient(135deg, var(--accent), var(--c-b-048));
  background-color: var(--accent);
  color: var(--on-solid);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
  box-shadow: 0 1px 2px var(--c-b-056-a34-ln);
}

.ares-auth-submit:hover {
  filter: brightness(1.08);
  box-shadow: 0 1px 2px var(--c-b-056-a34-ln);
}

.ares-auth-submit:active {
  transform: translateY(1px);
  box-shadow: 0 6px 16px var(--c-b-056-a34-ln);
}

.ares-auth-submit:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.ares-auth-submit[disabled] {
  cursor: progress;
  filter: saturate(0.6) brightness(0.9);
}

/* ------------------------------------------------------------------ *
 * 7. Gli avvisi                                                       *
 * ------------------------------------------------------------------ */

/* SOLO LA PRESENTAZIONE CAMBIA. Il testo e' quello che il server manda, parola
 * per parola: e' il server a decidere quanto dire, e riscriverlo qui vorrebbe
 * dire riaprire una decisione di sicurezza in un foglio di stile. */
.ares-auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--c-r-064-a36-ln);
  background: var(--c-r-064-a16-bg);
  color: var(--danger-text);
  font-size: 14px;
  line-height: 1.5;
}

.ares-auth-alert::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background:
    linear-gradient(currentColor, currentColor) center 3px / 2px 7px no-repeat,
    linear-gradient(currentColor, currentColor) center 12px / 2px 2px no-repeat;
}

.ares-auth-notice {
  margin: 0 0 20px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--c-g-048-a30-ln);
  background: var(--c-g-048-a16-bg);
  color: var(--success-text);
  font-size: 14px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * 8. Coda della carta e striscia                                      *
 * ------------------------------------------------------------------ */

.ares-auth-aside {
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-muted);
}

.ares-auth-link {
  display: inline-block;
  padding: 2px 0;
  color: var(--accent-text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.ares-auth-link:hover {
  border-bottom-color: var(--accent-text);
}

.ares-auth-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}

.ares-auth-reset-link {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 600;
}

/* La striscia: una riga, non un cartello legale. */
.ares-auth-footer {
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  max-width: 1120px;
  padding-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * 9. Adattamento                                                      *
 * ------------------------------------------------------------------ */

/* Sopra i 1080px la pagina si apre in due colonne: l'identita' a sinistra,
 * il modulo a destra. Sotto NON si stringe soltanto la carta — la colonna
 * d'identita' si ricompone sopra di lei e le tre righe diventano una riga
 * che va a capo. */
@media (min-width: 1080px) {
  .ares-auth-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 452px);
    grid-template-areas:
      "intro carta"
      "claims carta";
    column-gap: 72px;
    row-gap: 26px;
    align-content: center;
  }

  .ares-auth-intro { align-self: end; }
  .ares-auth-claims { align-self: start; }
  .ares-auth-card { align-self: center; }

  .ares-auth-stage {
    padding: 56px 40px 32px;
  }
}

@media (max-width: 1079px) {
  .ares-auth-panel {
    max-width: 520px;
    gap: 22px;
  }

  .ares-auth-intro {
    justify-items: center;
    text-align: center;
    gap: 14px;
  }

  .ares-auth-lead {
    max-width: 46ch;
    font-size: 15px;
  }

  .ares-auth-claims {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 10px;
  }

  .ares-auth-claims li {
    align-items: center;
    gap: 8px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 12.5px;
  }

  .ares-auth-claims li::before {
    margin-top: 0;
    width: 8px;
    height: 8px;
    box-shadow: none;
  }
}

/* MISURATO, non stimato: a 360x800 il comando finiva a 809px, cioe' NOVE
 * pixel sotto la piega. Il cancello `CTA_NELLA_PRIMA_SCHERMATA` l'ha detto,
 * e i pixel si sono presi dove costavano meno — il respiro della carta e la
 * distanza fra il titolo del modulo e il primo campo — non dall'altezza dei
 * campi ne' da quella del comando, che sono i due numeri che rendono la
 * pagina usabile con un pollice. */
@media (max-width: 600px) {
  .ares-auth-stage {
    padding: 20px 16px 20px;
    gap: 16px;
  }

  .ares-auth-card {
    padding: 22px 18px 22px;
    border-radius: 8px;
  }

  .ares-auth-card h2 {
    font-size: 21px;
  }

  .ares-auth-card-note {
    margin-bottom: 18px;
  }

  .ares-auth-plate {
    width: 196px;
    padding: 12px 15px;
  }

  .ares-auth-title {
    font-size: clamp(24px, 7.4vw, 32px);
  }
}

/* Uno schermo basso — 1366x768 e 1024x768 sono due delle otto misure di
 * accettazione — non deve costringere a scorrere per arrivare al pulsante:
 * la scena smette di centrare e ricomincia dall'alto. */
@media (max-height: 780px) and (min-width: 1080px) {
  .ares-auth-stage {
    justify-content: flex-start;
    padding-top: 34px;
  }
}

/* Schermo BASSO e stretto insieme — 1024x768, 768x1024, 360x800 sono quattro
 * delle otto misure di accettazione. Qui non basta smettere di centrare: se
 * l'identita' resta a grandezza piena il comando finisce sotto la piega, e
 * una pagina di accesso in cui bisogna scorrere per trovare «Accedi» e' una
 * pagina peggiore di quella che sostituisce. Si stringe l'IDENTITA', non il
 * modulo. */
@media (max-height: 860px) and (max-width: 1079px) {
  .ares-auth-stage {
    justify-content: flex-start;
    padding-top: 24px;
    gap: 16px;
  }

  .ares-auth-panel {
    gap: 16px;
  }

  .ares-auth-plate {
    width: 196px;
    padding: 12px 15px;
  }

  .ares-auth-intro {
    gap: 10px;
  }

  .ares-auth-title {
    font-size: clamp(23px, 5vw, 30px);
  }

  .ares-auth-lead {
    font-size: 14px;
  }
}

/* Lo zoom al 200% e' un viewport stretto, non un carattere grande: la regola
 * qui sopra a 600px lo copre gia'. Questa toglie l'ultimo residuo di
 * decorazione quando lo spazio verticale non basta piu'. */
@media (prefers-reduced-motion: reduce) {
  .ares-auth-input,
  .ares-auth-submit,
  .ares-auth-peek {
    transition: none;
  }

  .ares-auth-submit:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  .ares-auth-card,
  .ares-auth-input {
    border: 1px solid CanvasText;
  }

  .ares-auth-field {
    display: none;
  }
}