/* ==========================================================================
   Kefero — form dei dati di nascita

   Tre campi in una stanza buia. L'esperienza visiva arriva dopo il
   pagamento ed è la sorpresa: un assaggio qui la brucerebbe. Quello che
   serve adesso è che l'utente compili senza incertezze.
   ========================================================================== */

.entry {
    max-width: 480px;
    margin: 0 auto;
    padding: var(--space-24) var(--space-6) var(--space-16);
}

.entry-head {
    text-align: center;
    margin-bottom: var(--space-12);
}

.entry-title {
    font-family: var(--type-family-display);
    font-size: var(--type-2xl);
    font-weight: var(--type-weight-light);
    line-height: var(--type-leading-tight);
    letter-spacing: var(--type-tracking-tight);
    margin: 0;
}

.birth-form { display: grid; gap: var(--space-6); }

.field { position: relative; }

.field label {
    display: block;
    font-family: var(--type-family-utility);
    font-size: var(--type-xs);
    letter-spacing: var(--type-tracking-wide);
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: var(--space-2);
}/* ── PERCHÉ `:not(.segment__box)` ─────────────────────────────────────────
   Questa regola vale per i campi a riga intera (luogo, fuso, lingua). Le
   caselle segmentate di data e ora hanno bisogno di misure proprie, e senza
   questa esclusione NON POTEVANO OTTENERLE: `.field input` pesa più di
   `.segment__box` nel calcolo della specificità (una classe + un elemento
   contro una classe sola), quindi vinceva su ogni proprietà dichiarata in
   entrambe — a partire dal padding.

   Il risultato si vedeva a schermo ed era grave: caselle larghe 36px con
   32px di padding lasciavano DUE PIXEL al testo. Si scriveva e non compariva
   niente. Non era un difetto di misura, era una regola che non è mai entrata
   in vigore — il tipo di errore che si trova solo guardando la pagina, o
   misurandola in un browser vero. */


.field input:not(.segment__box),
.field select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
    font: inherit;
    /* ── PERCHÉ ESATTAMENTE 16px E NON UN TOKEN ──────────────────────────
       Safari su iPhone e iPad INGRANDISCE la pagina quando si tocca un campo
       il cui testo è sotto i 16px, e poi non la rimpicciolisce più: da lì in
       poi il cassetto è più largo dello schermo e si scorre di lato per
       leggere. È il «si muove tutto» del layout mobile. Sedici pixel esatti
       sono la soglia: sotto, il browser interviene; a partire da lì, no. */
    font-size: 16px;
    /* Altezza minima da polpastrello (le linee guida dicono 44px). */
    min-height: 46px;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .18s ease, background .18s ease;
}/* La freccia del menu a tendina: `appearance:none` toglie anche quella, e
   senza il campo sembra un riquadro di testo che non si apre. */


.field select {
    padding-right: var(--space-8);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
                      linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
    background-position: calc(100% - 19px) center, calc(100% - 13px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.field input:focus,
.field select:focus {
    outline: none;
    border-color: var(--accent);
}/* ── I campi data/ora non sono più type="date"/type="time" ────────────────
   Erano il selettore nativo, che su mobile si apre a tutto schermo e
   obbliga a scegliere invece di scrivere. Ora sono testo mascherato (vedi
   birth-form.js), quindi qui non serve più correggere l'icona del vecchio
   selettore — non esiste più. */



.field-note {
    font-size: var(--type-xs);
    color: var(--text-faint);
    margin: var(--space-2) 0 0;
    line-height: var(--type-leading-normal);
}

.field-warning {
    font-size: var(--type-xs);
    color: var(--warn);
    margin: var(--space-2) 0 0;
}/* ── IL CAMPO CHE NON VA DEVE DIRLO ──────────────────────────────────────
   Prima il modulo controllava SOLO le coordinate: con la data vuota si
   passava al controllo audio, partiva il filmato, e l'errore arrivava a
   esperienza già iniziata. Ora ogni campo può portare il proprio messaggio,
   e il messaggio compare accanto al campo che lo riguarda. */


.field-error {
    display: none;
    font-family: var(--type-family-utility);
    font-size: var(--type-xs);
    line-height: 1.4;
    color: var(--error);
    margin: var(--space-2) 0 0;
}

.field[data-invalid='true'] .field-error { display: block; }

.field[data-invalid='true'] input:not(.segment__box),
.field[data-invalid='true'] select {
    border-color: var(--error);
    background: color-mix(in srgb, var(--error) 8%, var(--surface));
}/* ==========================================================================
   LE CASELLE DI DATA E ORA

   `GG│MM│AAAA` e `HH│MM`: la stessa forma che i browser danno ai campi data
   nativi quando possono renderli scrivibili. Qui sono rifatte a mano perché
   su iOS il campo nativo diventa una rotella a tutto schermo, e far scorrere
   quarant'anni col pollice non è un modo di inserire una data di nascita.

   ── UNA SOLA GRAMMATICA PER TUTTI I NUMERI ───────────────────────────────
   Data e ora condividono ogni regola qui sotto. Non è economia di codice: è
   che un modulo sembra «fatto bene» quando le cose che si comportano allo
   stesso modo si assomigliano. Due campi numerici disegnati diversamente si
   notano prima di qualunque rifinitura.

   ── MOBILE FIRST ─────────────────────────────────────────────────────────
   Le misure qui sotto sono quelle del telefono, che è dove si compila questo
   modulo. Il desktop arriva dopo, in fondo, come miglioramento — non il
   contrario.
   ========================================================================== *//* ── UN'ALTEZZA SOLA, DICHIARATA UNA VOLTA ───────────────────────────────
   La usano la casella e il separatore accanto. Tenerla in una variabile non
   è pignoleria: il separatore deve stare al CENTRO della casella, e senza un
   numero condiviso l'unico modo è ricopiarlo — cioè disallinearli al primo
   ritocco del padding. Era il difetto che si vedeva: le barre `/` appoggiate
   in cima ai riquadri invece che in mezzo. */




.segments { --segment-height: 3.25rem; }

.segments {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}/* ── L'ORA NON OCCUPA TUTTA LA RIGA ──────────────────────────────────────
   La data ha tre caselle e riempie la riga naturalmente. L'ora ne ha due: a
   riga intera diventerebbero due rettangoli enormi con due cifre perse in
   mezzo, e sembrerebbero un campo diverso invece della stessa cosa. Si
   fermano alla misura che serve, allineate a sinistra sotto la loro
   etichetta. */


.field-time .segments { max-width: 15rem; }/* I separatori (`/` e `:`) sono decorazione: dicono che le caselle vanno
   lette insieme. Un lettore di schermo li salta (`aria-hidden`), e il dito
   non deve poterli afferrare per sbaglio al posto di una casella. */


.segments__sep {
    /* Alto quanto la casella e centrato dentro quell'altezza: è così che il
       separatore si allinea alle cifre invece che al bordo di sopra. Le
       sigle sotto le caselle non lo riguardano — non ha nulla da spiegare. */
    display: flex;
    align-items: center;
    min-height: var(--segment-height);
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: var(--type-lg);
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

.segment {
    /* ── LE CASELLE SI DIVIDONO LA RIGA ──────────────────────────────────
       `flex: 1 1 0` le fa partire tutte da zero e spartire lo spazio
       disponibile in proporzione: riempiono la riga su ogni schermo, senza
       una sola misura fissa da rincorrere.

       Prima la base era `3.5ch`, cioè una STIMA della larghezza di tre
       caratteri e mezzo — calcolata per giunta sul font del contenitore, non
       su quello della casella. Stimare una larghezza quando si può
       semplicemente dividere lo spazio è come misurare a occhio una cosa che
       si può pesare. */
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}/* L'anno ha il doppio delle cifre: gliene tocca circa il doppio. Non
   esattamente, perché il padding non raddoppia insieme al contenuto. */


.segment--year { flex-grow: 1.8; }

.segment__box {
    width: 100%;
    /* Padding stretto di proposito: qui dentro ci sono due o quattro cifre
       centrate, non una frase. Lo spazio va al TESTO, non ai margini. */
    padding: var(--space-3) var(--space-1);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
    font: inherit;
    /* ── SEDICI PIXEL ESATTI ─────────────────────────────────────────────
       Safari su iPhone e iPad INGRANDISCE la pagina quando si tocca un campo
       il cui testo è sotto i 16px, e poi non la rimpicciolisce più: da lì in
       avanti il cassetto è più largo dello schermo e si scorre di lato per
       leggere. Sedici è la soglia esatta: sotto, il browser interviene. */
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    /* Altezza da polpastrello — le linee guida dicono almeno 44px — e la
       stessa che segue il separatore qui sopra. */
    min-height: var(--segment-height);
    appearance: none;
    -webkit-appearance: none;
    transition: border-color .18s ease, background .18s ease;
}/* ── IL SEGNAPOSTO DENTRO LA CASELLA E LA SIGLA SOTTO ────────────────────
   Il segnaposto (`GG`, `HH`) sparisce alla prima cifra battuta: è utile solo
   finché la casella è vuota. La sigla sotto resta SEMPRE, ed è quella che
   permette a chi si è fermato a metà — o è tornato indietro a correggere —
   di sapere quale casella stia guardando senza doverla svuotare per
   scoprirlo.

   Costa una riga di testo piccolo. Vale la pena: è l'unica cosa che rende
   impossibile scambiare il giorno per il mese in una carta che poi non si
   potrà più correggere. *//* ── LA SIGLA E IL SEGNAPOSTO NON DEVONO DIRSI ADDOSSO ───────────────────
   A casella vuota il segnaposto dentro dice già `GG`: ripeterlo sotto è
   rumore, e si vedeva — due volte la stessa sigla, una sopra l'altra.

   A casella PIENA il segnaposto sparisce, ed è lì che la sigla serve: è
   l'unica cosa che dice se quel `05` è il mese o il giorno, a chi si è
   fermato a metà o è tornato indietro a correggere. Questo è il punto per
   cui esiste — non decorare la casella vuota.

   `visibility` e non `display`: lo spazio resta occupato in entrambi i casi,
   quindi le caselle non ballano su e giù mentre si scrive. */



.segment__hint {
    visibility: hidden;
    display: block;
    margin-top: var(--space-1);
    text-align: center;
    font-family: var(--type-family-utility);
    font-size: var(--type-xs);
    letter-spacing: var(--type-tracking-wide);
    color: var(--text-faint);
    user-select: none;
}

.segment__box:not(:placeholder-shown) + .segment__hint { visibility: visible; }

.segment__box::placeholder {
    color: var(--text-faint);
    opacity: 0.55;
}

.segment__box:focus {
    outline: none;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}/* La casella col fuoco dice anche sotto quale sia: su uno schermo stretto,
   con la tastiera aperta, il bordo acceso è a volte l'unica parte visibile. */


.segment__box:focus + .segment__hint { color: var(--accent); }/* Il testo selezionato deve VEDERSI: toccare una casella piena la seleziona
   tutta (vedi birth-form.js), e senza un contrasto netto sembra soltanto che
   non sia successo niente. */


.segment__box::selection {
    background: var(--accent);
    color: var(--text-inverse);
}/* Quando il campo non va, sono tutte le sue caselle a dirlo: evidenziarne
   una sola farebbe cercare l'errore nella casella sbagliata. */


.field[data-invalid='true'] .segment__box {
    border-color: var(--error);
    background: color-mix(in srgb, var(--error) 8%, var(--surface));
}/* ── L'ETICHETTA DEL GRUPPO NON È UNA `<label>` ──────────────────────────
   Una `<label>` punta a UN campo. Qui i campi sono tre, e una label che ne
   nomina uno solo direbbe il falso agli altri due. L'etichetta è quindi uno
   `<span>` collegato al gruppo con `aria-labelledby`, e ogni casella porta
   il proprio nome — «Data di nascita, giorno». */


.field-label {
    display: block;
    font-family: var(--type-family-utility);
    font-size: var(--type-xs);
    letter-spacing: var(--type-tracking-wide);
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: var(--space-2);
}/* Il formato dell'ora si DICHIARA: è ciò che impedisce a chi ha in mente le
   9:30 di sera di scrivere 09:30. Sta nell'etichetta, non in una nota sotto,
   perché va letto PRIMA di scrivere e non dopo. */


.field-label__hint {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 2px var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    /* Non c'è un gradino sotto `--type-xs` nella scala (tokens.css), e non
       ne va inventato uno solo per questa pastiglia: si usa il più piccolo
       che esiste. Una scala tipografica con un valore fuori scala smette di
       essere una scala. */
    font-size: var(--type-xs);
    letter-spacing: var(--type-tracking-wide);
    color: var(--text-faint);
    text-transform: none;
}/* ── SCHERMI STRETTI ─────────────────────────────────────────────────────
   Sotto i 360px — telefoni piccoli, e ce ne sono ancora — cinque caselle
   con i separatori non ci stanno a larghezza piena. Si stringe l'aria
   attorno, mai il bersaglio: l'altezza resta quella del polpastrello. */


@media (max-width: 359px) {
    .segments { gap: 2px; }
    .segments__sep { padding: 0; font-size: var(--type-base); }
    .segment__box { padding-left: var(--space-1); padding-right: var(--space-1); }
}/* ── DA TABLET IN SU ─────────────────────────────────────────────────────
   Con lo spazio disponibile le caselle respirano e i separatori tornano
   leggibili. Il puntatore, a differenza del dito, è preciso: si può
   evidenziare la casella sotto il cursore senza rischiare falsi positivi. */


@media (min-width: 640px) {
    /* ── LE CASELLE NON SI STIRANO ALL'INFINITO ──────────────────────────
       Su desktop il pannello è largo 560px: senza un tetto, la casella
       dell'anno arriva a 211px per contenere quattro cifre. Un campo molto
       più grande di ciò che contiene non sembra generoso, sembra sbagliato.
       Si fermano a una misura comoda e restano allineate a sinistra, come
       ogni altra cosa nel modulo. */
    .field-date .segments { max-width: 24rem; }
    .field-time .segments { max-width: 14rem; }

}

@media (hover: hover) {
    .segment__box:hover { border-color: var(--text-faint); }
}/* --------------------------------------------------------------------------
   Ricerca del luogo

   L'elenco è sovrapposto, non nel flusso: se spingesse in basso i campi
   successivi, la pagina salterebbe a ogni tasto premuto.
   -------------------------------------------------------------------------- */



.place-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--layer-overlay);
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    /* ── PERCHÉ NON PIÙ `40vh` ───────────────────────────────────────────
       `vh` misura lo schermo INTERO, tastiera compresa. Con la tastiera
       aperta — cioè sempre, visto che questo elenco compare mentre si sta
       scrivendo — l'elenco diventava più alto dello spazio rimasto e le
       ultime voci finivano sotto i tasti: si vedeva che c'erano altri
       risultati e non c'era modo di toccarli.

       `--vvh` è lo spazio che resta davvero (la scrive machine.js). Il
       ripiego `100svh` vale sui browser che non espongono l'API, dove si
       torna al comportamento di prima. */
    max-height: min(260px, calc(var(--vvh, 100svh) * 0.45));
    overflow-y: auto;
    /* Come per il cassetto: finito l'elenco, il gesto non deve proseguire
       sulla pagina dietro. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9);
}

.place-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.place-results li:last-child .place-option { border-bottom: 0; }/* ── SCHERMI DAVVERO BASSI: L'ELENCO SI ACCORCIA ─────────────────────────
   Sotto i 420px utili — telefono in orizzontale con la tastiera aperta —
   l'elenco non deve mangiarsi tutto lo spazio: due voci visibili e il resto
   raggiungibile scorrendo valgono più di cinque voci che coprono il campo in
   cui si sta ancora scrivendo. */


@media (max-height: 420px) {
    .place-results { max-height: min(150px, calc(var(--vvh, 100svh) * 0.5)); }
}

.place-option:hover,
.place-option:focus-visible,
.place-option[aria-selected='true'] {
    background: var(--void-700);
    outline: none;
}

.place-option[aria-selected='true'] {
    box-shadow: inset 3px 0 0 var(--accent);
}/* Bersaglio comodo al dito anche qui: due voci vicine su un telefono si
   toccano per sbaglio. */


.place-option { min-height: 52px; }

.place-name { display: block; font-size: var(--type-base); }/* L'indirizzo completo serve a distinguere due luoghi omonimi — Denver
   Colorado da Denver Iowa, che hanno fusi diversi — ma non deve competere
   con il nome. */


.place-detail {
    display: block;
    font-size: var(--type-xs);
    color: var(--text-faint);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}/* ── GLI STATI DELL'ELENCO ───────────────────────────────────────────────
   Tre situazioni che NON sono un risultato: sto cercando, non ho trovato
   nulla, non ho potuto cercare. Prima erano una sola classe (`place-empty`)
   con lo stesso testo per tutte e tre, e chi le incontrava non aveva modo di
   sapere quale delle tre stesse guardando.

   Righe alte come una voce vera: l'elenco non deve saltare quando l'attesa
   diventa un risultato. */


.place-state {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--type-sm);
    line-height: var(--type-leading-normal, 1.5);
    color: var(--text-faint);
}/* L'attesa pulsa piano: dice «sto lavorando» senza la ruota che gira, che a
   schermo scuro è più rumorosa di quanto informi. */


.place-state--pending {
    color: var(--text-dim);
    animation: kefero-pulse var(--motion-duration-calm) ease-in-out infinite;
}/* Un guasto non è un risultato mancante: si vede che è un'altra cosa. */


.place-state--failed {
    color: var(--warn);
    box-shadow: inset 3px 0 0 var(--warn);
}

@keyframes kefero-pulse {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .place-state--pending { animation: none; opacity: 1; }
}/* Quando il luogo non è stato scelto dall'elenco il campo lo segnala:
   senza coordinate il calcolo non può partire. *//* ── L'AVVISO CEDE IL PASSO ALL'ERRORE ───────────────────────────────────
   Il bordo ambra dice «manca ancora la scelta dall'elenco»: è un promemoria
   mentre si compila, non un rifiuto. Quando il campo va davvero in errore il
   colore deve diventare rosso, come in ogni altro campo del modulo.

   Senza `:not([data-invalid])` le due regole hanno lo stesso peso e vince
   l'ultima scritta — cioè questa. Si vedeva: cornice gialla e sotto un
   messaggio rosso, due segnali diversi per lo stesso campo nello stesso
   istante. */



.birth-form[data-located='false'] .field-place:not([data-invalid='true']) input {
    border-color: var(--warn);
}/* --------------------------------------------------------------------------
   Fuso orario

   Compare solo dopo la scelta del luogo. Quando la zona è incerta il bordo
   lo dice: chi è nato vicino a un confine interno deve accorgersene senza
   che glielo si urli.
   -------------------------------------------------------------------------- */



.timezone-row[data-confidence='uncertain'] select,
.timezone-row[data-confidence='guess'] select {
    border-color: var(--warn);
}/* --------------------------------------------------------------------------
   Invio
   -------------------------------------------------------------------------- */



.submit {
    padding: var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--text-inverse);
    font: inherit;
    font-size: var(--type-base);
    font-weight: var(--type-weight-semibold);
    cursor: pointer;
    margin-top: var(--space-2);
}

.submit:hover { background: var(--accent-bright); }

.submit:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
}/* La lingua di generazione è indicata perché una lettura comprata in
   francese resta in francese anche con l'interfaccia in italiano: senza
   questa nota sembrerebbe un errore. */


.reading-lang {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 1px 5px;
}
.library-empty .submit { display: inline-block; margin-top: var(--space-6); text-decoration: none; }

.library-logout {
    text-align: center;
    margin-top: var(--space-8);
    font-size: var(--type-sm);
}

.library-logout a { color: var(--text-faint); }/* Errori di invio del form */


.form-error {
    padding: var(--space-3) var(--space-4);
    background: rgba(198, 95, 95, 0.12);
    border: 1px solid rgba(198, 95, 95, 0.3);
    border-radius: var(--radius-md);
    color: var(--error);
    font-size: var(--type-sm);
    margin: 0;
}

.form-legal {
    font-size: var(--type-xs);
    color: var(--text-faint);
    text-align: center;
    margin: var(--space-2) 0 0;
}/* --------------------------------------------------------------------------
   Accesso con Google (vista enter)
   -------------------------------------------------------------------------- */



.enter-error {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md, 10px);
    background: color-mix(in srgb, var(--error, #c0453f) 14%, transparent);
    color: var(--error, #e0857f);
    font-size: var(--type-sm, 0.9rem);
}

.entry-sep {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-5) 0;
    color: var(--text-dim);
    font-size: var(--type-sm, 0.85rem);
    letter-spacing: 0.04em;
}
.entry-sep::before,
.entry-sep::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    width: 100%;
    padding: 0.8em 1em;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--border);
    background: #ffffff;
    color: #1f1f1f;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.btn-google:hover { background: #f5f5f5; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
.btn-google__g { flex: none; }/* Pulsante secondario "mandami un link" sotto l'accesso con password. */


.link-btn {
    display: block;
    width: 100%;
    margin-top: var(--space-3);
    padding: 0.5em;
    background: none;
    border: 0;
    color: var(--text-dim);
    font-size: var(--type-sm, 0.85rem);
    text-decoration: underline;
    cursor: pointer;
}
.link-btn:hover { color: var(--text); }/* --------------------------------------------------------------------------
   Regalo: pagina "regalo pronto" + pulsante nella library
   -------------------------------------------------------------------------- */


.gift-ready { text-align: center; }
.gift-link { display: flex; gap: var(--space-2); margin: var(--space-5) 0 var(--space-4); }
.gift-link__url {
    flex: 1;
    min-width: 0;
    padding: 0.7em 0.9em;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--border);
    background: var(--surface, rgba(255, 255, 255, 0.04));
    color: var(--text);
    font-family: var(--type-family-utility, monospace);
    font-size: 0.95rem;
}
.gift-link__copy {
    flex: none;
    padding: 0.7em 1.1em;
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--accent-warm, #c8a24a);
    background: var(--accent-warm, #c8a24a);
    color: #1a1710;
    font-weight: 600;
    cursor: pointer;
}
.gift-share { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-bottom: var(--space-8); }
.gift-share__btn {
    padding: 0.6em 1.2em;
    border-radius: var(--radius-full, 999px);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.gift-share__wa { border-color: #25D366; color: #25D366; }
.gift-share__btn:hover { background: rgba(255, 255, 255, 0.06); }/* ============================================================================
   Campo password con occhio mostra/nascondi + link secondari accesso/registrazione
   ========================================================================== */


.pw-field { position: relative; }

.pw-field input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    padding-right: calc(var(--space-8) + var(--space-2));
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text);
    font: inherit;
    font-size: var(--type-base);
    box-sizing: border-box;
}
.pw-field input:focus { outline: none; border-color: var(--accent); }

.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: calc(var(--space-8) + var(--space-2));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color .15s ease;
}
.pw-toggle:hover { color: var(--text); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-md); }
.pw-eye { display: block; }
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle[data-on='1'] .pw-eye-on { display: none; }
.pw-toggle[data-on='1'] .pw-eye-off { display: block; }

.entry-sub {
    margin: var(--space-3) 0 0;
    color: var(--text-dim);
    font-size: var(--type-sm);
}

.entry-alt {
    margin: var(--space-6) 0 0;
    text-align: center;
    font-size: var(--type-sm);
}
.entry-alt a { color: var(--accent); text-decoration: none; }
.entry-alt a:hover { text-decoration: underline; }/* ==========================================================================
   LA PAGINA DI UN LINK REGALO

   Una moneta, un numero, un pulsante. È la prima cosa che vede chi riceve il
   link: deve dire in un colpo d'occhio cosa c'è dentro, senza far leggere
   niente. Tutto il resto — il nome di chi regala, una dedica — sta fuori di
   proposito: il link può passare da una chat di gruppo.
   ========================================================================== */



.gift-landing {
    display: grid;
    place-items: center;
    min-height: 100svh;
    padding: var(--space-8) var(--space-6);
}

.gift-landing__card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    width: min(460px, 100%);
    padding: var(--space-12) var(--space-8);
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-strong));
    background:
        radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
        var(--surface);
    box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.95);
    text-align: center;
}/* La moneta respira piano: è l'unico movimento della pagina, e dice «questo
   oggetto è per te» meglio di qualsiasi frase. */


.gift-landing__coin {
    width: 140px;
    height: 140px;
    display: block;
    filter: drop-shadow(0 10px 40px color-mix(in srgb, var(--accent) 55%, transparent));
    animation: gift-coin-breathe 3.4s ease-in-out infinite;
}

@keyframes gift-coin-breathe {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-8px) rotate(3deg); }
}

@media (prefers-reduced-motion: reduce) {
    .gift-landing__coin { animation: none; }
}

.gift-landing__count {
    margin: 0;
    font-family: var(--type-family-utility);
    font-size: var(--type-lg);
    letter-spacing: var(--type-tracking-wide);
    color: var(--accent-bright);
}

.gift-landing__title {
    margin: 0;
    font-family: var(--type-family-display);
    font-size: var(--type-xl);
    font-weight: var(--type-weight-light);
    line-height: var(--type-leading-tight);
    color: var(--text);
}

.gift-landing__body {
    margin: 0;
    max-width: 34ch;
    font-size: var(--type-sm);
    line-height: 1.65;
    color: var(--text-dim);
}

.gift-landing__cta {
    margin-top: var(--space-4);
    padding: 0.9em 2.2em;
    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-base);
    font-weight: var(--type-weight-semibold);
    cursor: pointer;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--accent) 45%, transparent);
    transition: transform .15s ease, filter .2s ease;
}

.gift-landing__cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.gift-landing__cta:active { transform: translateY(0); }

.gift-landing__note {
    margin: 0;
    font-family: var(--type-family-utility);
    font-size: var(--type-xs);
    color: var(--text-faint);
}

@media (max-width: 480px) {
    .gift-landing__card { padding: var(--space-8) var(--space-5); }
    .gift-landing__coin { width: 110px; height: 110px; }
    .gift-landing__cta { width: 100%; }
}/* Un regalo già speso non deve luccicare come se fosse pronto: la moneta si
   ferma e arretra, e la card perde il suo alone dorato. La differenza si vede
   prima di leggere una parola. */


.gift-landing__card[data-spent='true'] {
    border-color: var(--border-strong);
    background: var(--surface);
}

.gift-landing__card[data-spent='true'] .gift-landing__coin {
    animation: none;
    filter: grayscale(1) brightness(0.7);
    opacity: 0.55;
}

.gift-landing__card[data-spent='true'] .gift-landing__count { display: none; }

.gift-landing__card[data-spent='true'] .gift-landing__cta {
    background: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text-dim);
    box-shadow: none;
    text-decoration: none;
    display: inline-block;
}/* La rassicurazione sotto il pulsante: due parole, niente icona. Deve togliere
   un dubbio in un'occhiata — non farsi leggere, non farsi guardare. Una spunta
   e una frase intera la trasformavano in un secondo messaggio che competeva
   con il pulsante che sta sopra. */


.gift-landing__reassure {
    margin: var(--space-1) 0 0;
    font-family: var(--type-family-utility);
    font-size: var(--type-sm);
    line-height: 1.4;
    color: var(--ok, var(--accent-alt));
}/* Su un regalo già speso non c'è più nulla da avviare: la promessa sparisce
   con il pulsante che la reggeva. */


.gift-landing__card[data-spent='true'] .gift-landing__reassure { display: none; }/* ==========================================================================
   IL CONTO E L'ACCOUNT
   --------------------------------------------------------------------------
   L'area personale mostrava email, saldo ed elenco letture. Nessuno storico,
   nessun modo di cambiare lingua o password, nessuna via d'uscita: una
   persona non poteva né sapere cosa aveva speso né andarsene.
   ========================================================================== */



.conto {
    max-width: 34rem;
    margin: var(--space-8) auto 0;
    padding-top: var(--space-6);
    border-top: 1px solid var(--void-600);
}/* ══ REGALARE UNA LETTURA ══════════════════════════════════════════════════
   Non passa dal pagamento: si spende un gettone che si ha già. Sta nel conto
   e non fra le card d'acquisto, perché è l'unica delle quattro cose che non
   chiede soldi. */


.regalo {
    margin-top: var(--space-6);
    padding: var(--space-4);
    border: 1px dashed var(--void-600);
    border-radius: 0.9rem;
}/* Le card d'acquisto stanno in fondo: si separano da ciò che viene prima. */


.coin-cards {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--void-600);
}/* ══ IL CIELO ══════════════════════════════════════════════════════════════
   Un fondo piatto sotto una pagina che parla di carte e di stelle è
   un'occasione persa. Le stelle sono disegnate: due strati di gradienti
   ripetuti, uno fitto e uno rado, che scorrono a velocità diverse. Nessuna
   immagine da scaricare, e la parallasse nasce dal fatto che i due strati non
   viaggiano insieme.

   Sta dietro a tutto (`z-index: -1`) e non intercetta niente. */


.cielo {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(120% 80% at 50% 0%,
            color-mix(in srgb, var(--accent) 7%, transparent) 0%,
            transparent 55%),
        var(--bg-deep);
}

@keyframes cielo-deriva {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-260px, -180px, 0); }
}

@keyframes magia-respiro {
    0%, 100% { opacity: 0.42; }
    50%      { opacity: 0.85; }
}

@keyframes magia-lampo {
    from { transform: translateX(0); }
    to   { transform: translateX(350%); }
}/* ══ IL REGALO DICE COSA CONTIENE ═════════════════════════════════════════
   In cima a questa pagina c'era la moneta, sempre. Adesso c'e' la figura
   della macchina per cui il regalo e' stato fatto: cinque arcani a ventaglio
   per i tarocchi, il mandala per la carta natale. La moneta resta per gli
   omaggi che non indicano una macchina, dove e' la figura giusta. *//* ── IL VENTAGLIO ────────────────────────────────────────────────────────
   Cinque carte che il mazzo ha gia', ruotate attorno a un perno BASSO: e' il
   modo in cui si tiene una mano di carte, e ruotare attorno al centro le
   farebbe sembrare sparpagliate invece che tenute.

   `--i` arriva dalla vista, da 0 a 4: la carta centrale (2) resta dritta, le
   altre si aprono simmetriche. Il conto e' `(--i - 2)`, cosi' aggiungere o
   togliere una carta non richiede di riscrivere nessun angolo. */




.gift-landing__ventaglio {
    position: relative;
    height: 215px;
    margin: 0 auto var(--space-5);
    display: flex;
    justify-content: center;
    align-items: flex-start;

    /* Le carte si sovrappongono: senza questo la larghezza sarebbe quella di
       cinque carte affiancate, e su un telefono uscirebbe dallo schermo. */
    width: 100%;
    max-width: 330px;
}

.gift-landing__carta {
    position: absolute;
    top: 0;
    width: 120px;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);

    /* Il perno sta sotto la carta, non al suo centro. */
    transform-origin: 50% 145%;
    transform:
        rotate(calc((var(--i) - 2) * 11deg))
        translateY(calc(abs(var(--i) - 2) * 3px));
}/* `abs()` e' recente. Dove non c'e', la riga sopra viene ignorata e resta il
   ventaglio senza il piccolo abbassamento delle carte esterne: si vede lo
   stesso, semplicemente e' un filo meno curvo. */


@supports not (width: abs(1px)) {
    .gift-landing__carta { transform: rotate(calc((var(--i) - 2) * 11deg)); }
}/* ── IL MANDALA ──────────────────────────────────────────────────────────
   Nessuna rotazione e nessuna animazione: e' un disegno denso, e farlo girare
   lo renderebbe illeggibile proprio mentre si cerca di capire cos'e'. */


.gift-landing__figura {
    display: block;
    width: 220px;
    height: auto;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
}/* Su schermo stretto il ventaglio si stringe: le carte restano leggibili
   perche' si sovrappongono di piu', invece di rimpicciolirsi. */


@media (max-width: 420px) {
    .gift-landing__ventaglio { height: 185px; max-width: 280px }
    .gift-landing__carta     { width: 104px }
    .gift-landing__figura    { width: 180px }
}