/* La pagina scorre con il documento, non dentro un riquadro interno: il browser
   continua a portare in vista il campo a fuoco quando si apre la tastiera, a
   ritirare la barra degli indirizzi e a ricordare la posizione al ritorno.
   Le due barre sono incollate (sticky) ai bordi della colonna principale:
   restano ferme come se fossero fisse, ma occupano il loro spazio nel flusso,
   così l'ultimo campo non può finire sotto quella inferiore. */
.vcp-struttura {
    --vcp-struttura-altezza: 100vh;
    --vcp-struttura-ingombro-testata: calc(var(--vcp-altezza-68) + var(--vcp-spazio-16));
    --vcp-struttura-ingombro-barra: calc(var(--vcp-altezza-52) + var(--vcp-spazio-48));

    display: flex;
    flex-direction: column;
    background: var(--vcp-colore-sfondo);
}

@supports (height: 100dvh) {
    .vcp-struttura {
        --vcp-struttura-altezza: 100dvh;
    }
}

.vcp-struttura--riquadro {
    --vcp-struttura-altezza: 40rem;

    height: var(--vcp-struttura-altezza);
    overflow: auto;
    border-radius: var(--vcp-raggio-16);
}

.vcp-struttura__laterale {
    display: none;
}

.vcp-struttura__principale {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: var(--vcp-struttura-altezza);
}

.vcp-struttura__testata {
    position: sticky;
    top: 0;
    z-index: var(--vcp-livello-testata);
}

.vcp-struttura__contenuto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-12);
    width: 100%;
    max-width: var(--vcp-pagina-larghezza-massima);
    margin: 0 auto;
    padding: var(--vcp-spazio-20) var(--vcp-spazio-16) var(--vcp-spazio-28);
}

/* Quando il browser porta in vista un controllo che riceve il fuoco, questo
   margine lo tiene fuori dall'ombra delle due barre incollate. */
:where(.vcp-struttura__contenuto) :where(input, select, textarea, button, a, [tabindex]) {
    scroll-margin-block: var(--vcp-struttura-ingombro-testata) var(--vcp-struttura-ingombro-barra);
}

.vcp-struttura__barra {
    position: sticky;
    bottom: 0;
    z-index: var(--vcp-livello-barra);
}

.vcp-struttura__marchio {
    display: block;
    padding: 0 var(--vcp-spazio-8);
}

.vcp-struttura__marchio-immagine {
    display: block;
    width: auto;
    height: var(--vcp-altezza-44);
}

.vcp-struttura__avanzamento {
    padding: 0 var(--vcp-spazio-8);
}

.vcp-struttura__salvataggio {
    margin-top: auto;
}

.vcp-struttura__collegamenti {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-2);
}

.vcp-struttura__collegamento {
    display: flex;
    align-items: center;
    gap: var(--vcp-spazio-10);
    padding: var(--vcp-spazio-8) var(--vcp-spazio-10);
    border-radius: var(--vcp-raggio-10);
    font-size: var(--vcp-testo-13);
    font-weight: var(--vcp-peso-medio);
    text-decoration: none;
    color: var(--vcp-colore-testo-etichetta);
}

.vcp-struttura__collegamento:hover {
    background: var(--vcp-colore-superficie-tenue);
    color: var(--vcp-colore-testo);
}

.vcp-struttura__collegamento i {
    width: var(--vcp-spazio-16);
}

.vcp-struttura__ricomincia {
    width: 100%;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.vcp-struttura__ricomincia[hidden] {
    display: none;
}

.vcp-scheda {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-scheda-distanza);
    padding: var(--vcp-scheda-margine);
    border: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo);
    border-radius: var(--vcp-raggio-20);
    background: var(--vcp-colore-superficie);
}

.vcp-scheda--filo {
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.vcp-scheda__testata {
    display: flex;
    flex-direction: column;
    gap: var(--vcp-spazio-4);
}

.vcp-scheda__titolo {
    margin: 0;
    font-size: var(--vcp-testo-16);
    font-weight: var(--vcp-peso-semigrassetto);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo);
}

.vcp-scheda__nota {
    margin: 0;
    font-size: var(--vcp-testo-13);
    line-height: var(--vcp-interlinea);
    color: var(--vcp-colore-testo-secondario);
    text-wrap: pretty;
}

.vcp-griglia-campi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--vcp-griglia-colonna-minima), 1fr));
    gap: var(--vcp-campi-distanza);
}

.vcp-griglia-campi__intero {
    grid-column: 1 / -1;
}

@media (min-width: 860px) {
    .vcp-struttura {
        --vcp-struttura-ingombro-testata: var(--vcp-spazio-16);

        display: grid;
        grid-template-columns: var(--vcp-barra-laterale-larghezza) minmax(0, 1fr);
        align-items: start;
    }

    .vcp-struttura__laterale {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        gap: var(--vcp-spazio-24);
        height: var(--vcp-struttura-altezza);
        padding: var(--vcp-spazio-24) var(--vcp-spazio-16);
        overflow: auto;
        border-right: var(--vcp-bordo-sottile) solid var(--vcp-colore-bordo);
        background: var(--vcp-colore-superficie);
    }

    /* Il selettore doppio vince sul display del componente messo in questa
       posizione, qualunque sia l'ordine in cui i fogli di stile sono caricati. */
    .vcp-struttura .vcp-struttura__testata {
        display: none;
    }

    .vcp-struttura__contenuto {
        gap: var(--vcp-spazio-16);
        padding: var(--vcp-spazio-40) var(--vcp-spazio-48) var(--vcp-spazio-48);
    }
}