/* ==========================================================================
   Kefero — fondamenta condivise

   ── PERCHÉ QUESTO FILE ESISTE ─────────────────────────────────────────────
   Prima ogni pagina caricava tutti e otto i fogli di stile: la home riceveva
   il foglio della lettura, la lettura riceveva quello della home. Oltre al
   peso (circa 180 KB di CSS non usato per pagina) il problema era la
   COLLISIONE: `html`, `body`, `.eyebrow` e `.site-footer` erano dichiarati in
   due file diversi, e chi vinceva dipendeva dall'ordine dei <link>. Una
   modifica alla home cambiava l'aspetto della lettura senza che nulla lo
   suggerisse.

   Ora ogni pagina carica solo ciò che usa (vedi views/layout.php), e ciò che
   è davvero comune a tutte vive qui, dichiarato UNA volta sola:

     · il reset e il fondo della pagina;
     · la tipografia di base e le etichette maiuscole;
     · il piede del sito;
     · i pulsanti condivisi (regalo, scarica, rivedi) e le card moneta, che
       compaiono identici in home, lettura e archivio.

   Nessun colore letterale: tutto viene da tokens.css.
   ========================================================================== */

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

html {
    background: var(--bg-deep);

    /* ── PERCHÉ `clip` E NON `hidden` ────────────────────────────────────
       Serve tenere fuori la barra di scorrimento orizzontale che nasce dagli
       elementi a piena larghezza. `overflow-x: hidden` lo fa, ma ha un
       effetto collaterale che non si legge dal nome: costringe l'asse
       verticale a diventare `auto`, cioè trasforma l'elemento in un
       CONTENITORE DI SCORRIMENTO. E un antenato che scorre ROMPE
       `position: sticky` dei suoi discendenti — la barra di navigazione della
       lettura semplicemente non si appiccica più, e scorre via con la pagina.

       `overflow: clip` ritaglia allo stesso modo ma NON crea un contenitore
       di scorrimento: la barra resta appiccicata. È esattamente ciò per cui
       questo valore è stato introdotto.

       Il ripiego a `hidden` resta per i browser che non conoscono `clip`: lì
       si perde l'appiccicamento, non la leggibilità. */
    overflow-x: hidden;
    overflow-x: clip;

    /* L'ancora di una sezione non deve finire sotto la barra appiccicata in
       cima: questo margine la tiene sempre visibile. */
    scroll-padding-top: var(--space-24);

    /* Un salto istantaneo da una sezione all'altra fa perdere il filo: con lo
       scorrimento morbido si vede DOVE si sta andando. */
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    overflow-x: hidden;
    overflow-x: clip;
    color: var(--text);
    font-family: var(--type-family-body);
    font-size: var(--type-base);
    line-height: var(--type-leading-normal);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* ── IL FONDO: NEBULOSA PROFONDA ──────────────────────────────────────
       Tre aloni tenui su un gradiente di base. Prima questo blocco viveva in
       coda a reading.css e riscriveva `body` una seconda volta: la
       dichiarazione doppia rendeva impossibile capire quale vincesse. */
    background:
        radial-gradient(1200px 700px at 8% -8%, rgba(90, 120, 255, 0.10), transparent 60%),
        radial-gradient(1100px 720px at 98% 4%, rgba(150, 90, 220, 0.10), transparent 62%),
        radial-gradient(1000px 900px at 50% 120%, rgba(70, 150, 220, 0.08), transparent 60%),
        radial-gradient(ellipse 120% 80% at 50% -10%, var(--void-800) 0%, var(--bg) 55%),
        var(--bg-deep);
    background-attachment: fixed;
}

/* Il pulviscolo di stelle. Fisso dietro tutto, non intercetta il puntatore. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 255, 255, 0.5), transparent 60%),
        radial-gradient(1.5px 1.5px at 75% 18%, rgba(255, 255, 255, 0.4), transparent 60%),
        radial-gradient(1px 1px at 42% 62%, rgba(200, 220, 255, 0.5), transparent 60%),
        radial-gradient(1px 1px at 88% 72%, rgba(255, 255, 255, 0.35), transparent 60%),
        radial-gradient(1.5px 1.5px at 12% 82%, rgba(220, 230, 255, 0.45), transparent 60%),
        radial-gradient(1px 1px at 62% 40%, rgba(255, 255, 255, 0.3), transparent 60%);
    background-repeat: repeat;
    background-size: 620px 620px;
    opacity: 0.7;
}

@media (prefers-reduced-motion: no-preference) {
    body::before { animation: kefero-drift 120s linear infinite; }
}

@keyframes kefero-drift { to { background-position: 620px 620px; } }

a { color: var(--accent); }

img, svg, video, canvas { max-width: 100%; }

/* Il bersaglio del focus è identico ovunque: chi naviga da tastiera non deve
   reimpararlo pagina per pagina. */
:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Testo per i soli lettori di schermo. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Tipografia condivisa

   Le maiuscole spaziate sono la firma del sito: compaiono nelle etichette e
   nei titoletti, mai nel corpo del testo.
   -------------------------------------------------------------------------- */

.eyebrow {
    font-family: var(--type-family-utility);
    font-size: var(--type-xs);
    letter-spacing: var(--type-tracking-wider);
    text-transform: uppercase;
    color: var(--text-dim);
    margin: 0 0 var(--space-2);
}

/* --------------------------------------------------------------------------
   Il marchio

   Il nome del sito ha una voce sua — Cinzel Decorative — e la usa SOLO dove
   dice se stesso: l'occhiello in cima alle pagine, i ritorni alla home, la
   riga del piede. Non è un font da testo: le maiuscole incise sono belle
   nel nome e illeggibili in un paragrafo, per questo esiste una classe
   dedicata invece di un ritocco a `.eyebrow` — che è condiviso con gli
   occhielli delle sezioni, e quelli devono restare monospaziati.

   Il peso è 700. Cinzel Decorative esce in 400/700/900: il 600 non esiste,
   e chiederlo produrrebbe un finto grassetto sintetico — sporco proprio
   sulle grazie, che qui sono tutto il carattere.

   Non tocca né colore né dimensione: li eredita da dove si trova, così lo
   stesso marchio sta bene in cima a una pagina e in fondo al piede.
   -------------------------------------------------------------------------- */

.brandmark {
    font-family: var(--type-family-brand);
    font-weight: 700;
    letter-spacing: var(--type-tracking-wide);
}

/* Sull'occhiello resta la spaziatura larga — la firma tipografica del sito —
   e un filo di corpo in più: le incise a 12px si perdono. */
.eyebrow.brandmark {
    font-size: var(--type-sm);
    letter-spacing: var(--type-tracking-wider);
}

/* --------------------------------------------------------------------------
   Piede del sito
   -------------------------------------------------------------------------- */

.site-footer {
    text-align: center;
    padding: var(--space-12) var(--space-4);
    font-family: var(--type-family-utility);
    font-size: var(--type-xs);
    letter-spacing: var(--type-tracking-wide);
    color: var(--text-faint);
}

/* ==========================================================================
   Pulsanti condivisi

   Regalo, scarica e rivedi compaiono identici in home, lettura e archivio.
   Vivevano in reading.css con un commento che spiegava che quel foglio era
   caricato ovunque: adesso che non lo è più, la loro casa è questa.
   ========================================================================== */

/* Secondario: bordo sottile, nessun riempimento. Non deve rubare l'occhio al
   pulsante primario che gli sta accanto. */
.btn-ghost,
.btn-download,
.btn-replay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.62em 1.3em;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: var(--type-sm);
    font-weight: var(--type-weight-medium);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.btn-ghost:hover,
.btn-download:hover,
.btn-replay:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.btn-replay .reading-replay-icon { font-size: 0.85em; line-height: 1; }

/* Primario: oro come la moneta, con un luccichio che pulsa piano. */
.btn-gift {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    padding: 0.62em 1.35em;
    border: 0;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg,
        var(--accent-bright) 0%,
        var(--accent) 55%,
        var(--accent-dim) 130%);
    color: var(--text-inverse);
    font-family: inherit;
    font-size: var(--type-sm);
    font-weight: var(--type-weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 16px color-mix(in srgb, var(--accent) 42%, transparent);
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
    animation: kefero-gift-shine 2.8s ease-in-out infinite;
}

.btn-gift:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 5px 24px color-mix(in srgb, var(--accent) 60%, transparent);
}

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

.btn-gift__coin {
    width: 1.4em;
    height: 1.4em;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
    transition: transform .5s ease;
}

.btn-gift:hover .btn-gift__coin { transform: rotate(20deg) scale(1.06); }

/* Variante grande per la home. */
.btn-gift--lg { padding: 0.8em 1.7em; font-size: 1.06rem; }

@keyframes kefero-gift-shine {
    0%, 100% { box-shadow: 0 2px 16px color-mix(in srgb, var(--accent) 38%, transparent); }
    50%      { box-shadow: 0 2px 22px color-mix(in srgb, var(--accent) 68%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-gift { animation: none; }
    .btn-gift:hover { transform: none; }
    .btn-gift:hover .btn-gift__coin { transform: none; }
}

/* La form della home che contiene il pulsante regalo: centrata. */
.home-gift {
    margin: var(--space-6) 0 0;
    display: flex;
    justify-content: center;
}

/* ==========================================================================
   Le card moneta

   Compra un coin, il pacchetto da tre, regalane uno. Identiche in home e
   archivio: vivevano in home.css, e l'archivio le otteneva solo perché
   caricava quel foglio senza averne bisogno per nient'altro.
   ========================================================================== */

.coin-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    max-width: 680px;
    margin: var(--space-8) auto 0;
}
.coin-card-form { margin: 0; display: flex; }

.coin-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-6) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    text-align: center;
    transition: border-color .18s ease, transform .15s ease, box-shadow .2s ease, background .18s ease;
}
.coin-card:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-raised));
    transform: translateY(-2px);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--accent) 22%, transparent);
}
.coin-card:active { transform: translateY(0); }
.coin-card:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.coin-card__coin {
    width: 56px;
    height: 56px;
    display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
    transition: transform .4s ease;
}
.coin-card:hover .coin-card__coin { transform: rotate(18deg) scale(1.05); }

.coin-card__title {
    font-family: var(--type-family-display);
    font-size: var(--type-lg);
    font-weight: var(--type-weight-light);
    line-height: 1.1;
}
.coin-card__price {
    font-family: var(--type-family-utility);
    font-size: var(--type-sm);
    letter-spacing: var(--type-tracking-wide);
    color: var(--accent);
}

/* La card PACCHETTO (3 coin a prezzo scontato): stesso stile della card
   "compra", con un velo dorato appena percettibile a suggerire il
   risparmio — senza gareggiare visivamente con la card regalo, che resta
   l'unica con il bordo tratteggiato. */
.coin-card--bundle {
    border-color: color-mix(in srgb, #ffcf6b 40%, var(--border-strong));
    background: color-mix(in srgb, #ffcf6b 6%, var(--surface-raised));
}
.coin-card--bundle:hover {
    border-color: #ffcf6b;
    background: color-mix(in srgb, #ffcf6b 12%, var(--surface-raised));
}

/* Le tre monete sovrapposte della card pacchetto: stesso disco, tre
   colorazioni via filtro (nessuna nuova immagine), leggermente ventagliate
   così si leggono come TRE monete e non una sola ripetuta. Lo spazio
   extra ai lati (margin) evita che quelle ai bordi tocchino il testo. */
.coin-card__stack {
    position: relative;
    width: 56px;
    height: 56px;
    margin: 0 var(--space-3);
}
.coin-card__stack .coin-card__coin {
    position: absolute;
    top: 0;
    left: 0;
}
.coin-card__stack .coin-card__coin--a {
    transform: translateX(-13px) rotate(-14deg);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)) hue-rotate(-24deg) saturate(1.1);
    z-index: 1;
}
.coin-card__stack .coin-card__coin--b {
    transform: translateX(0) rotate(0deg);
    z-index: 2;
}
.coin-card__stack .coin-card__coin--c {
    transform: translateX(13px) rotate(14deg);
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45)) hue-rotate(26deg) saturate(1.15);
    z-index: 3;
}
.coin-cards .coin-card--bundle:hover .coin-card__coin--a { transform: translateX(-17px) rotate(-18deg) scale(1.05); }
.coin-cards .coin-card--bundle:hover .coin-card__coin--b { transform: translateX(0) rotate(0deg) scale(1.08); }
.coin-cards .coin-card--bundle:hover .coin-card__coin--c { transform: translateX(17px) rotate(18deg) scale(1.05); }

/* La card REGALO: leggermente diversa da "compra un coin". Un bordo
   tratteggiato e un velo d'accento più caldo suggeriscono il gesto di donare,
   senza staccarsi dallo stile dell'altra card. */
.coin-card--gift {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised));
}
.coin-card--gift:hover {
    border-color: var(--accent-bright);
    background: color-mix(in srgb, var(--accent) 11%, var(--surface-raised));
}
.coin-card__hint {
    font-family: var(--type-family-utility);
    font-size: var(--type-xs, 0.72rem);
    letter-spacing: var(--type-tracking-wide);
    line-height: 1.25;
    color: var(--text-dim);
    max-width: 20ch;
}

@media (max-width: 640px) {
    .coin-cards { grid-template-columns: 1fr; max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
    .coin-card:hover { transform: none; }
    .coin-card:hover .coin-card__coin { transform: none; }
    .coin-cards .coin-card--bundle:hover .coin-card__coin--a { transform: translateX(-13px) rotate(-14deg); }
    .coin-cards .coin-card--bundle:hover .coin-card__coin--b { transform: translateX(0) rotate(0deg); }
    .coin-cards .coin-card--bundle:hover .coin-card__coin--c { transform: translateX(13px) rotate(14deg); }
}

/* --------------------------------------------------------------------------
   Il selettore di lingua

   Vive nel piede, quindi su ogni pagina. Discreto: chi è già nella lingua
   giusta non deve accorgersene, chi non lo è deve trovarlo senza cercarlo.
   La voce corrente resta visibile ma spenta — dice «sei qui», non è un
   comando.
   -------------------------------------------------------------------------- */

.lang-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.lang-switch__item {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-family: var(--type-family-utility);
    font-size: var(--type-xs);
    letter-spacing: var(--type-tracking-wide);
    color: var(--text-faint);
    text-decoration: none;
    transition: color .18s ease, background .18s ease;
}

.lang-switch__item:hover {
    color: var(--text);
    background: var(--void-800);
}

.lang-switch__item[aria-current='true'] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    /* La lingua corrente non porta da nessuna parte: toglierle il puntatore
       lo dice prima che qualcuno la provi. */
    cursor: default;
}

.site-footer__line { margin: 0; }

/* --------------------------------------------------------------------------
   I canali di impronta

   Compare in due posti molto diversi: la scheda in fondo alla lettura (fondo
   chiaro-scuro del sito, accenti oro) e i titoli di coda dell'esperienza
   (fondo nero, tinte proprie). Sta in `base.css` — che ogni pagina carica —
   e non in uno dei due fogli, perché duplicarlo significherebbe ritoccarlo
   due volte e vederlo divergere alla prima modifica.

   ── PERCHÉ `currentColor` E NON UN COLORE PROPRIO ────────────────────────
   Il collegamento prende la tinta dal testo che lo circonda. Nella scheda è
   quindi coerente con la scheda, nei titoli di coda con i titoli di coda, e
   il giorno che una delle due cambia sfondo le icone lo seguono da sole. Un
   colore fissato qui avrebbe funzionato in un posto e stonato nell'altro.
   -------------------------------------------------------------------------- */

.social-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.social-row__label {
    font-family: var(--type-family-utility);
    font-size: var(--type-xs);
    letter-spacing: var(--type-tracking-wider);
    text-transform: uppercase;
    opacity: 0.6;
}

.social-row__links {
    display: flex;
    gap: var(--space-3);
}

.social-row__link {
    /* ── QUARANTATRÉ PIXEL, NON VENTIDUE ─────────────────────────────────
       Il disegno dentro è di 22px, ma il BERSAGLIO deve restare quello di un
       polpastrello. Tre icone piccole e vicine in fondo a una pagina sono il
       posto classico in cui si tocca quella sbagliata — e qui il tocco porta
       fuori dal sito, quindi sbagliare costa un ritorno indietro. */
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 1px solid currentColor;
    color: inherit;
    text-decoration: none;
    opacity: 0.55;
    transition: opacity .2s ease, transform .15s ease, background-color .2s ease;
}

/* Il cerchio è appena accennato finché non lo si guarda: la scheda ha già il
   suo pulsante principale, e tre bordi pieni gli ruberebbero la scena. */
.social-row__link:hover,
.social-row__link:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Il contorno del fuoco resta: chi naviga da tastiera deve vedere dov'è, e
   `outline: none` su un collegamento è il modo più rapido di renderlo
   irraggiungibile senza mouse. */
.social-row__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.social-row__link svg { display: block; }

@media (prefers-reduced-motion: reduce) {
    .social-row__link:hover,
    .social-row__link:focus-visible { transform: none; }
}

/* Nei titoli di coda il fondo è nero e il testo attorno è freddo: le icone
   prendono la stessa tinta calda del marchio, così la riga appartiene al
   blocco di impronta e non ai pulsanti sotto. */
.opening-thanks .social-row,
.opening-end .social-row {
    color: #d8c9a8;
    margin-top: var(--space-2);
}

/* ── I COLLEGAMENTI LEGALI NEL PIEDE ───────────────────────────────────────
   Privacy, cookie, termini, avvertenze, contatti.

   ── PERCHE' STANNO IN `base.css` ──────────────────────────────────────────
   Perché il piede di pagina c'è su OGNI pagina, e uno stile che vive nel
   foglio di una sola sezione lascia le altre senza. Erano in `legale.css`:
   sulle pagine legali si vedevano giusti, ovunque altro prendevano lo stile
   generico dei collegamenti — oro, sottolineati, attaccati l'uno all'altro.

   ── E PERCHE' SONO DISCRETI ───────────────────────────────────────────────
   Devono esserci, non farsi guardare. Nessuno arriva su Kefero per leggere i
   termini di servizio: chi li cerca li trova perché sa dove guardare, e
   chiunque altro non deve nemmeno accorgersene. Un piede di pagina che grida
   toglie attenzione a ciò che sta sopra. */
.site-footer__legale {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.25rem 0;
    margin-bottom: var(--space-3);
}

.site-footer__legale a {
    padding: 0.2rem 0.75rem;
    color: var(--text-faint, var(--text-dim));
    text-decoration: none;
    font-family: var(--type-family-utility);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0.7;
    transition: color 160ms ease, opacity 160ms ease;
}

/* Un filo verticale fra una voce e l'altra, non un punto: separa senza
   aggiungere un carattere da leggere. Non prima della prima, e non dopo
   l'ultima quando vanno a capo — `:not(:first-child)` se ne occupa da sé. */
.site-footer__legale a + a {
    border-left: 1px solid var(--void-600);
}

.site-footer__legale a:hover,
.site-footer__legale a:focus-visible {
    color: var(--text);
    opacity: 1;
}

@media (max-width: 560px) {
    /* Su schermo stretto vanno a capo, e un filo a inizio riga sembra un
       errore: si toglie e resta la sola spaziatura. */
    .site-footer__legale a {
        padding: 0.25rem 0.6rem;
        font-size: 0.7rem;
    }

    .site-footer__legale a + a { border-left: 0; }
}

/* ==========================================================================
   L'AVVISO DI ESITO
   --------------------------------------------------------------------------
   Compare al ritorno dal pagamento, e quando un collegamento non è più
   valido. Sta in `base.css` e non nel foglio di una pagina perché atterra su
   quattro viste diverse — atrio, le due macchine, archivio — e quei quattro
   fogli non hanno nessun antenato in comune oltre a questo.

   Vedi `views/partials/esito.php` per il perché è fisso in alto.
   ========================================================================== */

.esito {
    position: fixed;
    top: max(var(--space-3), env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    /* ── PERCHÉ NON `--layer-toast` NUDO ─────────────────────────────────
       Perché il pannello d'acquisto (`.acquisto`, in `home.css`) sta a 60,
       cioè SOPRA il livello degli avvisi. E i due si incontrano davvero: se
       i gettoni finiscono fra una scheda e l'altra, si dice cos'è successo
       e si apre il pannello nello stesso gesto — con `--layer-toast` nudo,
       il messaggio finiva dietro il pannello e non lo leggeva nessuno.
       Un avviso è l'ultima cosa che si copre. */
    z-index: calc(var(--layer-toast) + 20);

    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: min(38rem, calc(100vw - var(--space-6)));
    padding: var(--space-3) var(--space-4);

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    /* Un fondo pieno, non traslucido: sotto ci può essere il cielo stellato
       o il legno della macchina, e su entrambi un velo semitrasparente rende
       il testo illeggibile proprio dove va letto. */
    background: var(--surface-raised);
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.75);

    font-family: var(--type-family-body);
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--text);
}

.esito__testo {
    margin: 0;
    flex: 1;
}

/* Il colore dice il tipo, il testo dice la cosa: chi non distingue i colori
   non perde niente, perché la frase è già completa da sola. */
.esito--ok     { border-left: 3px solid var(--signal-ok); }
.esito--attesa { border-left: 3px solid var(--signal-warn); }
.esito--errore { border-left: 3px solid var(--signal-error); }

.esito__chiudi {
    flex: none;
    margin: -0.15rem -0.25rem 0 0;
    padding: 0 0.35rem;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--text-dim);
    font-size: 1.35rem;
    line-height: 1.1;
    transition: color 160ms ease;
}

.esito__chiudi:hover { color: var(--text); }

.esito__chiudi:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ── MENTRE IL FILMATO GIRA, L'AVVISO NON C'È ─────────────────────────────
   L'avviso sta sopra ogni altro livello della pagina, compreso quello a cui
   la cornice della macchina va a tutto schermo: senza questa regola un
   messaggio resterebbe a galleggiare sopra il video del gettone, cioè sopra
   l'unico momento della pagina che deve essere pulito. */
body[data-machine] .esito {
    /* `visibility` e non `opacity`: l'avviso ha un pulsante di chiusura, e
       l'opacita' a zero lo lascerebbe raggiungibile col tabulatore mentre il
       filmato scorre. Nessuna dissolvenza da rispettare, qui. */
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 560px) {
    .esito {
        width: calc(100vw - var(--space-4));
        font-size: 0.88rem;
    }
}