/* Pannello "Brief veloce" (layout/componenti/brief.php). Entra da destra: 100% su mobile, 70vw da 48rem, 50vw da 64rem.
   Testata e azioni fisse, scorre solo l'area centrale. */
.brief { --pannello-backdrop: rgb(37 34 31 / .55); --brief-spazio: clamp(1.25rem, 3vw, 2.5rem); --focus-offset: 3px;
    position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; border: 0;
    inline-size: 100%; max-inline-size: none; block-size: 100dvh; max-block-size: 100dvh; overflow: hidden; }
.brief[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.brief [hidden] { display: none !important; }
.brief > script { display: none; }
@media (min-width: 48rem) { .brief { inline-size: 70vw; border-inline-start: 1px solid currentColor; } }
@media (min-width: 64rem) { .brief { inline-size: 50vw; } }

/* Testata: occhiello, titolo, chiudi; sotto, avanzamento con barra. */
.brief__testata { padding: max(1.25rem, env(safe-area-inset-top)) var(--brief-spazio) 1rem; border-block-end: 1px solid currentColor; }
.brief__intestazione { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.brief__intestazione > div { min-inline-size: 0; }
.brief .occhiello { margin-block-end: .5rem; }
.brief .titolo-pannello { --titolo-pannello-dimensione: clamp(1.375rem, 2.4vw, 2rem); letter-spacing: -.02em; }
.brief__chiudi { flex-shrink: 0; display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 1px solid currentColor; border-radius: 50%;
    color: inherit; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: color var(--durata-colore) ease, background-color var(--durata-colore) ease; }
.brief__chiudi:focus-visible { color: var(--colore-fondo); background: var(--colore-testo); }
.brief__avanzamento { display: grid; gap: .5rem; padding-block-start: 1.25rem; }
.brief__progressivo { margin: 0; font-size: .875rem; font-weight: 600; }
.brief__barra { block-size: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 15%, transparent); overflow: hidden; }
.brief__barra span { display: block; block-size: 100%; inline-size: var(--brief-avanzamento, 25%); background: var(--colore-accento); transition: inline-size .35s cubic-bezier(.65, 0, .35, 1); }

/* Area centrale */
.brief__centrale { min-block-size: 0; min-inline-size: 0; padding: 1.75rem var(--brief-spazio) 2rem; overflow-y: auto; overscroll-behavior: contain; overflow-wrap: anywhere; }
.brief__passo { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.brief legend { margin-block-end: 1rem; padding: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 500; line-height: 1.15; letter-spacing: -.03em; }
.brief p { line-height: 1.6; }
.brief__aiuto { margin: 0 0 1rem; font-size: .9375rem; }

/* Opzioni: tasti selezionabili, uno per riga, due colonne da 48rem. */
.brief__opzioni { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) { .brief__opzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.brief__opzione { display: flex; justify-content: space-between; align-items: center; gap: 1rem; inline-size: 100%; min-block-size: 3.5rem; padding: .875rem 1.125rem;
    border: 1px solid currentColor; border-radius: 10px; color: inherit; background: transparent; text-align: start; font-weight: 500; cursor: pointer;
    transition: color var(--durata-colore) ease, background-color var(--durata-colore) ease; }
.brief__spunta { flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; border: 1px solid currentColor; border-radius: 50%; }
.brief__opzione[aria-pressed="true"] { color: var(--colore-fondo); background: var(--colore-testo); }
.brief__opzione[aria-pressed="true"] .brief__spunta { border-color: var(--colore-accento); background: var(--colore-accento);
    box-shadow: inset 0 0 0 3px var(--colore-testo); }
.brief__opzione:focus-visible { outline: var(--focus-spessore) solid currentColor; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .brief__opzione:not([aria-pressed="true"]):hover { background: color-mix(in srgb, currentColor 8%, transparent); }
    .brief__chiudi:hover { color: var(--colore-fondo); background: var(--colore-testo); }
}

/* Contatti */
.brief__campo { display: grid; gap: .5rem; margin-block: 0 1.25rem; font-weight: 600; line-height: 1.5; }
.brief__facoltativo { font-weight: 400; }
.brief .campo-input { border-radius: 10px; font-weight: 400; }
.brief textarea.campo-input { resize: vertical; }
.brief__campo--codice .campo-input { max-inline-size: 12rem; font-size: 1.5rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.brief__errore { font-size: .875rem; font-weight: 400; }
.brief__errore:empty { display: none; }
.brief .campo-input[aria-invalid="true"] { border-width: 2px; }
.brief__riassunto { margin-block: .5rem 1.25rem; padding: 1.25rem; border-radius: 10px; background: color-mix(in srgb, currentColor 6%, transparent); }
.brief__sottotitolo { margin: 0 0 .75rem; font-size: 1rem; }
.brief__riepilogo { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .375rem 1rem; margin: 0; }
.brief__riepilogo dt { font-weight: 600; }
.brief__riepilogo dd { margin: 0; }
.brief__privacy { margin-block-end: .75rem; }
.brief__privacy > span { min-inline-size: 0; }
.brief__reinvio { display: inline; min-inline-size: 0; padding: .625rem 0; border: 0; color: inherit; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.brief__reinvio:disabled { cursor: not-allowed; opacity: .6; }

/* Ripresa, successo, stato */
.brief__ripresa, .brief__successo { display: grid; justify-items: start; gap: 1rem; }
.brief__ripresa p, .brief__successo p, .brief__conferma p { margin: 0; }
.brief__conferma { display: grid; gap: .75rem; }
.brief__comandi { display: flex; flex-wrap: wrap; gap: .75rem; }
.brief__stato { margin: 1rem 0 0; font-weight: 600; }
.brief__stato:empty { display: none; }

/* Azioni in basso: Indietro con bordo, Continua pieno inchiostro, "Verifica e invia" arancione con testo inchiostro. */
.brief__azioni { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 1rem var(--brief-spazio) max(1rem, env(safe-area-inset-bottom)); border-block-start: 1px solid currentColor; }
.brief__pulsante { --pulsante-padding: .75rem 1.375rem; --pulsante-peso: 600; border-radius: 10px; transition: color var(--durata-colore) ease, background-color var(--durata-colore) ease, border-color var(--durata-colore) ease; }
.brief__pulsante--pieno { --pulsante-colore: var(--colore-fondo); --pulsante-fondo: var(--colore-testo); --pulsante-bordo: 1px solid var(--colore-testo); }
.brief__pulsante.brief__invia { --pulsante-colore: var(--ops-inchiostro); --pulsante-fondo: var(--ops-arancione); --pulsante-bordo: 1px solid var(--ops-arancione); }
.brief__pulsante:not(:disabled):focus-visible { --pulsante-colore: var(--colore-fondo); --pulsante-fondo: var(--colore-testo); }
.brief__pulsante--pieno:not(:disabled):focus-visible { --pulsante-colore: var(--colore-testo); --pulsante-fondo: transparent; }
@media (hover: hover) and (pointer: fine) {
    .brief__pulsante:not(:disabled):hover { --pulsante-colore: var(--colore-fondo); --pulsante-fondo: var(--colore-testo); }
    .brief__pulsante--pieno:not(:disabled):hover { --pulsante-colore: var(--colore-testo); --pulsante-fondo: transparent; }
    .brief__pulsante.brief__invia:not(:disabled):hover { --pulsante-colore: var(--colore-fondo); --pulsante-fondo: var(--ops-inchiostro); --pulsante-bordo: 1px solid var(--ops-inchiostro); }
}

/* Movimento ridotto */
@media (prefers-reduced-motion: reduce) { .brief__barra span, .brief__opzione, .brief__pulsante, .brief__chiudi { transition: none; } }
html[data-movimento="ridotto"] :is(.brief__barra span, .brief__opzione, .brief__pulsante, .brief__chiudi) { transition: none; }

/* Modalità di contrasto: niente arancione né trasparenze. */
html:is([data-contrasto="bianco-su-nero"], [data-contrasto="nero-su-bianco"]) .brief__pulsante.brief__invia { --pulsante-colore: var(--colore-fondo); --pulsante-fondo: var(--colore-testo); --pulsante-bordo: 1px solid var(--colore-testo); }
html:is([data-contrasto="bianco-su-nero"], [data-contrasto="nero-su-bianco"]) :is(.brief__riassunto, .brief__barra) { background: transparent; outline: 1px solid currentColor; }
html:is([data-contrasto="bianco-su-nero"], [data-contrasto="nero-su-bianco"]) .brief__barra span { background: currentColor; }