/*
 * Linguaggio visivo condiviso con SMAI Board.
 * I quattro colori applicativi restano definiti dal branding nel layout Razor;
 * qui si descrivono soltanto struttura, tipografia e valori derivati.
 */
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
        U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
        U+A720-A7FF;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 2rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    font-family: "Archivo", "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    background:
        radial-gradient(
            1100px 620px at 50% -8%,
            color-mix(in srgb, var(--primary) 7%, var(--bg)) 0%,
            transparent 60%
        ),
        linear-gradient(180deg, color-mix(in srgb, var(--bg) 94%, white), var(--bg));
}

[hidden] {
    display: none !important;
}

.card {
    width: 100%;
    max-width: 30rem;
    padding: 2.5rem 2.25rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid rgba(16, 63, 100, 0.1);
    border: 1px solid color-mix(in srgb, var(--text) 12%, var(--surface));
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(16, 63, 100, 0.04),
        0 18px 48px -24px rgba(16, 63, 100, 0.35);
    box-shadow:
        0 1px 2px color-mix(in srgb, var(--primary) 4%, transparent),
        0 18px 48px -24px color-mix(in srgb, var(--primary) 35%, transparent);
}

.logo {
    margin-bottom: 1.5rem;
    text-align: center;
}

.logo img {
    display: block;
    width: auto;
    max-width: min(100%, 15rem);
    max-height: 74px;
    margin-inline: auto;
    object-fit: contain;
}

h1,
h2,
p {
    margin-top: 0;
}

h1,
h2 {
    color: var(--text);
    color: color-mix(in srgb, var(--primary) 45%, var(--text));
}

h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(1.5rem, 5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.025em;
    text-align: center;
}

h2 {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 700;
}

p {
    margin-bottom: 1rem;
    line-height: 1.55;
}

/*
 * Riga d'apertura: la frase che spiega la pagina, subito sotto il titolo.
 *
 * Nasce dal recupero password, dove quella frase usava `.info` — la classe delle note di servizio —
 * e restava quindi allineata a sinistra e larga quanto la card, sotto un titolo centrato e sopra
 * campi e pulsanti a piena larghezza: l'unico elemento fuori asse della card. Qui è centrata come il
 * titolo, con una MISURA più corta della colonna (una riga lunga quanto la card si legge male, ed è
 * la seconda metà dello stesso difetto) e un colore attenuato che la tiene un gradino sotto il
 * titolo nella gerarchia.
 */
.lead {
    max-width: 24rem;
    /* Il rientro negativo la avvicina al titolo: spiega QUELLO, e la coppia si legge come un blocco
       solo invece che come due paragrafi distanti uguali. */
    margin: -0.5rem auto 1.75rem;
    color: var(--text);
    color: color-mix(in srgb, var(--text) 62%, var(--surface));
    font-size: 0.9375rem;
    line-height: 1.6;
    text-align: center;
    /* Righe di lunghezza simile invece di una lunga e una con due parole: su un blocco centrato
       di due o tre righe la differenza si vede tutta. Dove non è supportato, si va a capo come
       sempre — non c'è nulla da sostituire. */
    text-wrap: balance;
}

/*
 * I collegamenti dentro la card. Il colore è quello del MARCHIO: il blu di default del browser era
 * l'unico colore della pagina a non venire dal branding, e su una card brandizzata si vedeva.
 * La sottolineatura resta — è ciò che rende un link riconoscibile a chi non distingue il colore —
 * ma attenuata, e torna piena al passaggio del puntatore.
 */
a {
    color: var(--primary);
    text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent);
    text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
    text-decoration-color: currentColor;
}

/*
 * La riga di navigazione in fondo al form: «hai dimenticato la password?», «torna all'accesso».
 * Centrata sull'asse della card, più piccola del corpo del testo, staccata dal pulsante sopra.
 */
.forgot,
.back-link {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    text-align: center;
}

form {
    width: 100%;
}

label {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text);
    color: color-mix(in srgb, var(--text) 78%, var(--surface));
    font-size: 0.875rem;
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
    width: 100%;
    min-height: 2.75rem;
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(31, 45, 61, 0.18);
    border: 1px solid color-mix(in srgb, var(--text) 18%, var(--surface));
    border-radius: 10px;
    outline: none;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input::placeholder {
    color: #788796;
    color: color-mix(in srgb, var(--text) 45%, var(--surface));
    opacity: 1;
}

input:focus,
select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.18);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/*
 * Il campo password col pulsante «mostra» DENTRO la casella.
 *
 * Il contenitore lo crea password-visibility.js, non il markup: senza lo script queste regole non
 * hanno un elemento su cui applicarsi e la casella resta quella normale — e' il motivo per cui il
 * margine si SPOSTA sul contenitore invece di essere toccato sull'input.
 *
 * Prima di queste regole il pulsante usciva con la classe `password-toggle` che nessun foglio di
 * stile definiva: stile di default del browser, in flusso normale, sotto la casella. Le due cose —
 * la classe emessa dallo script e la regola che la disegna — vivono in file diversi, e questa e' la
 * coppia che va tenuta insieme.
 */
.password-field {
    position: relative;
    display: block;
    margin: 0 0 1rem;
}

.password-field input {
    /* La spaziatura la governa il contenitore, e lo spazio a destra e' quello del pulsante: senza,
       una password lunga scorrerebbe SOTTO l'icona. */
    margin-bottom: 0;
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    /* Alto quanto la casella: l'area cliccabile e' tutta la spalla destra del campo, non i 16px
       dell'icona — su un telefono e' la differenza fra centrarlo e non centrarlo. */
    height: 100%;
    width: 2.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0 10px 10px 0;
    color: #6b7787;
    color: color-mix(in srgb, var(--text) 48%, var(--surface));
    background: transparent;
    cursor: pointer;
    transition: color 0.15s ease;
}

.password-toggle:hover,
.password-toggle[aria-pressed="true"] {
    color: var(--primary);
}

.password-toggle:focus-visible {
    outline: 2px solid var(--primary);
    /* Verso l'INTERNO: un contorno esterno cadrebbe fuori dal bordo arrotondato della casella. */
    outline-offset: -3px;
    border-radius: 10px;
}

.password-toggle svg {
    display: block;
    width: 1.2rem;
    height: 1.2rem;
}

/*
 * La cornice del CAPTCHA.
 *
 * Il widget è un iframe del fornitore, di misura dichiarata: 65px d'altezza, e in larghezza 300px
 * fissi («normal») oppure il 100% del contenitore («flexible», che è quella che chiede la pagina).
 * Dentro l'iframe il nostro CSS non entra: da qui si governa solo la cornice — la posizione nella
 * colonna e lo spazio intorno — e senza di essa il widget restava ancorato a sinistra, largo 300px,
 * incollato al campo sopra e al pulsante sotto.
 *
 * `text-align: center` e non un contenitore flex: l'iframe è un elemento inline, quindi così resta
 * centrato in misura «normal» e non interferisce con la larghezza al 100% della misura «flexible» —
 * la regola vale per entrambe, anche se il fornitore cambia il default.
 *
 * L'altezza è RISERVATA: il widget arriva dalla rete, e senza spazio prenotato il pulsante «invia le
 * istruzioni» si sposta di 65px verso il basso proprio mentre la persona lo sta puntando.
 */
.captcha {
    min-height: 65px;
    margin: 0 0 1.25rem;
    text-align: center;
}

.btn {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: white;
    background: var(--primary);
    box-shadow: 0 8px 24px -12px rgba(25, 118, 210, 0.7);
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--primary) 70%, transparent);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease,
        border-color 0.15s ease;
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(0.92);
    box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--primary) 78%, transparent);
}

.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.btn:active {
    transform: translateY(0);
}

.btn-secondary {
    margin-top: 0.75rem;
    color: var(--primary);
    background: var(--surface);
    border-color: color-mix(in srgb, var(--primary) 68%, var(--surface));
    box-shadow: none;
}

.btn-secondary:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
    box-shadow: none;
    filter: none;
}

.info,
.muted {
    color: var(--text);
    color: color-mix(in srgb, var(--text) 68%, var(--surface));
    font-size: 0.9rem;
}

/*
 * L'esito POSITIVO di un'operazione, costruito come `.error` e per la stessa ragione: la tinta
 * semantica (il verde della conferma, il rosso dell'errore) è un letterale, ma arriva a schermo
 * MESCOLATA alla superficie del branding — così il riquadro appartiene alla card su cui sta, invece
 * di essere un rettangolo colorato appoggiato sopra.
 *
 * Sostituisce `.info` sulla conferma di /forgot, dove il messaggio più importante della pagina — è
 * l'unica cosa che resta a schermo dopo l'invio — era reso col grigio delle note a margine.
 */
.notice {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid #bfe0cc;
    border: 1px solid color-mix(in srgb, #2f7d54 30%, var(--surface));
    border-radius: 12px;
    color: #1f5c3d;
    color: color-mix(in srgb, #2f7d54 78%, var(--text));
    background: #f2f9f5;
    background: color-mix(in srgb, #2f7d54 8%, var(--surface));
    font-size: 0.9375rem;
    line-height: 1.55;
    text-align: center;
}

.error {
    margin-bottom: 1rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid #f1c7c4;
    border: 1px solid color-mix(in srgb, #c6403a 32%, var(--surface));
    border-radius: 10px;
    color: #a12622;
    color: color-mix(in srgb, #c6403a 75%, var(--text));
    background: #fff4f3;
    background: color-mix(in srgb, #c6403a 8%, var(--surface));
    font-size: 0.875rem;
    line-height: 1.45;
}

#passkey-status:not(:empty) {
    margin-top: 0.75rem;
    color: color-mix(in srgb, var(--text) 68%, var(--surface));
    font-size: 0.875rem;
    line-height: 1.45;
}

hr {
    height: 1px;
    margin: 1.75rem 0;
    border: 0;
    background: rgba(31, 45, 61, 0.12);
    background: color-mix(in srgb, var(--text) 12%, var(--surface));
}

.qr {
    margin: 1.25rem 0;
    text-align: center;
}

.qr img {
    max-width: 100%;
    height: auto;
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--text) 12%, var(--surface));
    border-radius: 12px;
    background: white;
}

code {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 0.85em;
}

.passkeys {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.passkeys li {
    padding: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--text) 10%, var(--surface));
    border-radius: 10px;
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.passkeys li + li {
    margin-top: 0.75rem;
}

.inline {
    margin-top: 0.5rem;
}

.inline .btn {
    width: auto;
}

fieldset.preview {
    margin: 0;
    padding: 0;
    border: 0;
}

fieldset:disabled .btn,
.btn:disabled {
    transform: none;
    box-shadow: none;
    cursor: default;
    opacity: 0.65;
}

/*
 * Piè di pagina legale (privacy_url, terms_url del branding). Sta dentro la card, dopo il
 * contenuto: un elemento fratello della card cambierebbe l'allineamento del body, che è un
 * flex con un figlio solo. Non compare se il branding non configura almeno un link.
 */
.legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
    justify-content: center;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(16, 63, 100, 0.1);
    border-top: 1px solid color-mix(in srgb, var(--text) 12%, var(--surface));
    font-size: 0.8125rem;
}

.legal a {
    color: rgba(51, 51, 51, 0.65);
    color: color-mix(in srgb, var(--text) 65%, var(--surface));
    text-decoration: none;
}

.legal a:hover,
.legal a:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

@media (max-width: 36rem) {
    body {
        padding: 1rem;
        align-items: flex-start;
    }

    .card {
        margin-block: auto;
        padding: 2rem 1.35rem;
        border-radius: 16px;
    }
}

@media (max-width: 26rem) {
    /*
     * Il CAPTCHA non scende sotto i 300px di larghezza, per costruzione del fornitore: sotto questa
     * soglia la colonna della card è più stretta di così, quindi il widget ESCE dal rientro laterale
     * invece di far scorrere la pagina. Il margine negativo è esattamente il rientro del mobile.
     */
    .captcha {
        margin-inline: -1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}