/* ─────────────────────────────────────────────────────────────────────────────
   Area pubblica — Il Circolo, Diano Marina

   Palette e font presi dal sito vetrina del cliente, cosi' chi arriva dal sito
   non ha l'impressione di essere finito da un'altra parte.

   Mobile-first sul serio: la maggior parte degli accessi arriva da telefono, e
   la griglia dei campi deve restare leggibile a 360px di larghezza.

   I font si servono da wwwroot/fonts, MAI da Google Fonts: e' una terza parte che
   riceve l'IP di ogni visitatore, ed e' un problema GDPR gia' sanzionato in UE
   (caso Google Fonts, tribunale di Monaco 2022). I file sono stati scaricati una
   volta e vivono qui dentro: il browser del visitatore non parla con nessuno.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── I caratteri del brand ────────────────────────────────────────────────────
   Montserrat Alternates e Lato, entrambi SIL Open Font License, quindi ospitarli in
   proprio e' consentito.

   ⚠️ I RUOLI SONO SCAMBIATI DAL 7 OTTOBRE 2026, su decisione del committente (la
   grafica nuova, ispirata al kit «Courtly»; DESIGN.md §2). Lato fa il testo, i moduli
   e i pulsanti; Montserrat Alternates SOLO cio' che ha un nome o un numero — titoli,
   nomi dei campi, ore, prezzi grandi, numeri dei giorni. Prima Alternates faceva anche
   il testo corrente, e le sue lettere alternative (la «N» di «Nome») rendevano piu'
   faticosi paragrafi ed etichette di un modulo. Gli stessi quattro file di prima: zero
   byte in piu'.

   DUE PESI PER FAMIGLIA, 400 e 700 (DESIGN.md §2): ogni peso e' un file che
   qualcuno scarica. Il peso 600 che il CSS usava prima e' stato portato a 700 —
   con solo 400 e 700 disponibili il browser lo avrebbe reso grassetto comunque,
   e un CSS che dichiara un peso inesistente e' una bugia che qualcuno prima o poi
   crede.

   OTTO FILE E NON QUATTRO, ed e' un risparmio, non uno spreco: sono sottoinsiemi.
   'latin' copre l'italiano corrente, 'latin-ext' le lettere accentate degli altri
   alfabeti latini. Grazie a unicode-range il browser scarica SOLO il sottoinsieme
   che la pagina usa davvero — in pratica quasi sempre il solo 'latin'. Totale sul
   disco 137 KB; per un visitatore italiano ne viaggiano circa 88.

   Poppins compariva nella descrizione originale ma non e' mai stato usato da
   nessuna regola: non e' stato scaricato.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face {
    font-family: "Montserrat Alternates";
    src: url("../fonts/MontserratAlternates-400-latin.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    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: "Montserrat Alternates";
    src: url("../fonts/MontserratAlternates-400-latin-ext.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    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;
}

@font-face {
    font-family: "Montserrat Alternates";
    src: url("../fonts/MontserratAlternates-700-latin.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
    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: "Montserrat Alternates";
    src: url("../fonts/MontserratAlternates-700-latin-ext.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
    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;
}

@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato-400-latin.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    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: "Lato";
    src: url("../fonts/Lato-400-latin-ext.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    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;
}

@font-face {
    font-family: "Lato";
    src: url("../fonts/Lato-700-latin.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
    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: "Lato";
    src: url("../fonts/Lato-700-latin-ext.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
    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;
}

:root {
    --nero:    #070400;
    --pallina: #D4E24E;  /* il giallo-verde della pallina: l'azione, dal 19 ottobre 2026 */
    --sabbia:  #DCCAAA;
    --grigio:  #ACABAA;
    --testo:   #706F6D;
    --bianco:  #FFFFFF;

    --terra:       #C86B4A;  /* terra rossa: DECORATIVA, 3,71:1 su bianco */
    --terra-testo: #A34A2B;  /* la stessa tinta, ma leggibile: 5,88:1 su bianco */

    --libero:        #EFF7EA;
    --libero-bordo:  #7BB661;
    --occupato:      #F0EEEC;
    --non-prenot:    #FAFAF9;

    --raggio: 10px;
    /* Tre raggi, e ognuno ha il suo mestiere: la pillola dice «questo si preme», il
       raggio normale dice «questo contiene», il raggio grande dice «questo contiene
       cose che hanno già un raggio». È il §3 di DESIGN.md, che l'area pubblica non
       applicava perché non aveva gruppi di scelta: le pastiglie della ricerca sono i
       primi. Il terzo è arrivato con la scheda del circolo, e la sua regola sta qui
       sotto: se un giorno servisse un quarto raggio, serve prima una frase come queste
       che dica che mestiere fa. */
    --pillola: 999px;
    /* ⚠️ IL TERZO RAGGIO, e ha una regola sua: è il raggio di ciò che CONTIENE cose
       che hanno già un raggio. La scheda del circolo tiene dentro il video e sopra le
       righe, che stanno a 10px; un contenitore con lo stesso raggio del suo contenuto
       si legge come un errore di disegno, non come un riquadro. Vale solo lì. */
    --raggio-grande: 18px;

    /* ⚠️ IL QUARTO RAGGIO, dal 7 ottobre 2026, e ha la sua frase come gli altri: è il
       raggio delle ETICHETTE CHE NON SI TOCCANO — il terreno sulla scheda di un campo,
       il cartellino dello stato sulla cartolina, «Disdetta» sul biglietto del
       riepilogo. Un rettangolo appena smussato dice
       «questa si legge»; la pillola direbbe «premimi», e non lo è. Mai su un comando. */
    --raggio-etichetta: 6px;

    --ombra: 0 1px 3px rgb(7 4 0 / 12%);
    /* La seconda ombra del foglio, e solleva una cosa sola: la scheda del circolo.
       Un'ombra da 1px sotto un riquadro di 18px di raggio non si vede come un rilievo,
       si vede come un bordo sporco. */
    --ombra-scheda: 0 6px 20px rgb(7 4 0 / 8%);

    /* Le altezze di DESIGN.md §4: l'azione della schermata, i comandi in linea, le
       caselle da compilare. Erano scritte solo nel gestionale; da quando l'area pubblica
       ha la pillola col gettone e il modulo a 48px servono anche qui. */
    --h-azione: 48px;
    --h-comando: 44px;
    --h-campo: 48px;

    /* La curva di tutto il foglio: parte decisa e si posa. */
    --curva: cubic-bezier(0.16, 1, 0.3, 1);

    /* I RUOLI DEI CARATTERI, dal 7 ottobre 2026 (vedi in cima al foglio):
       --font-nomi per ciò che ha un nome o un numero, --font-testo per tutto il resto.
       --font-titoli e --font-accento restano come sinonimi, perché metà del foglio li
       nomina e il loro mestiere coincide con quello nuovo: i titoli sono nomi, gli
       accenti erano già Lato. */
    --font-nomi:  "Montserrat Alternates", system-ui, sans-serif;
    --font-testo: "Lato", system-ui, sans-serif;
    --font-titoli: var(--font-nomi);
    --font-accento: var(--font-testo);
}

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

body {
    margin: 0;
    font-family: var(--font-testo);
    color: var(--testo);
    background: var(--bianco);
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { font-family: var(--font-titoli); color: var(--nero); line-height: 1.2; }

/* ⚠️ UNA MISURA SOLA PER I TITOLI PRINCIPALI, dal 7 ottobre 2026. Erano tre taglie
   senza regola comune, e su conferma e riepilogo l'h1 usciva a 32px di serie: il testo
   più grande del sito era «Conferma prenotazione», mentre l'azione sotto sussurrava.
   È la misura della scheda del circolo, che resta la sua (vedi .scheda-testo h1); chi
   ha bisogno d'altro — la maniglia della ricerca, la domanda della procedura — lo
   dichiara con la sua classe, che vince su questa. */
h1 {
    margin: 0.25rem 0 0;
    font-size: clamp(1.35rem, 4.5vw, 1.75rem);
    letter-spacing: -0.015em;
}

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

/* La selezione e il cursore di scrittura con i colori del circolo, non quelli del
   sistema: la sabbia sotto il nero fa 12,74:1, e il cursore resta del colore del
   testo che si sta scrivendo. */
::selection { background: var(--sabbia); color: var(--nero); }
input, textarea { caret-color: var(--nero); }

/* ── Intestazione ─────────────────────────────────────────────────────────── */

/* 61px in tutto (8 + 44 + 8 + il filetto), come la tavola «A» del 7 ottobre 2026: erano
   69, e ogni pixel qui sopra è un pixel in meno per il primo orario prenotabile.

   ⚠️ IL BORDO DEL CONTENUTO, NON QUELLO DELLA FINESTRA. Sul computer logo e pulsanti
   stavano ai bordi dello schermo mentre la pagina sotto è una colonna da 1100px: il
   rientro laterale qui li porta sulla stessa linea del contenuto, senza un contenitore
   in più nel markup. Sotto i 1100px vale 1rem, come main. */
.intestazione {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem max(1rem, calc((100% - 1100px) / 2 + 1rem));
    border-bottom: 1px solid var(--sabbia);
    position: sticky;
    top: 0;
    background: var(--bianco);
    z-index: 10;
}

/* Il logo è alto 34px, ma è un LINK: torna alla home ed è la prima cosa che si
   tocca su un telefono. Il bersaglio si porta a 44px senza ingrandire l'immagine. */
.marchio {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.marchio img { height: 34px; width: auto; display: block; }

.azioni-rapide { display: flex; align-items: center; gap: 0.5rem; }

/* PILLOLE, come ogni comando del sito (DESIGN.md §3): erano a raggio 10, cioè la forma
   di un contenitore. Bianco su nero 20,46:1, nero su sabbia 12,74:1. */
.pulsante-telefono,
.pulsante-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--h-comando);
    padding: 0 1rem;
    border-radius: var(--pillola);
    font-family: var(--font-testo);
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.pulsante-telefono { padding-left: 0.875rem; background: var(--nero); color: var(--bianco); }
.pulsante-whatsapp { background: var(--sabbia); color: var(--nero); }

.cornetta { flex: none; display: block; }

/* ⚠️ SU SCHERMO STRETTO RESTA IL TONDO NERO CON LA CORNETTA DISEGNATA, 44×44 (tavola
   «A», 7 ottobre 2026). Prima restava il carattere «☎» del sistema, che ogni telefono
   disegna a modo suo. Il numero non sparisce: lo porta l'etichetta del collegamento,
   e display:none sul numero visibile non tocca quell'etichetta. */
@media (max-width: 420px) {
    .pulsante-telefono { width: 44px; padding: 0; }
    .numero-telefono { display: none; }
}

.pulsante-telefono:hover,
.pulsante-whatsapp:hover { filter: brightness(0.95); }

/* ── Contenuto ────────────────────────────────────────────────────────────── */

/* 12px sopra come la tavola «A», e 48 sotto prima del piede: lo stacco dal piede lo
   dà il contenuto, e il piede non ha più un margine suo. */
main { padding: 0.75rem 1rem 3rem; max-width: 1100px; margin: 0 auto; }

/* ── La prima pagina ──────────────────────────────────────────────────────────
   Qui c'era .richiamo: un riquadro color sabbia con un titolo, due righe e un
   pulsante. È stato tolto il 10 settembre 2026 — la prima pagina non descrive più,
   offre: le prime partite prenotabili sono la prima cosa che si vede, e sono le
   stesse righe della ricerca.

   ⚠️ IL FONDO SABBIA È SPARITO CON LUI, e non è una perdita: conteneva l'unica
   azione della pagina e quindi la incorniciava. Adesso le azioni sono tre o quattro
   e la cornice le renderebbe tutte uguali. */

.avviso {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin: 0 0 1.25rem;
    padding: 0.875rem;
    border: 1px solid var(--terra-testo);
    border-radius: var(--raggio);
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--nero);
}

.avviso svg { flex: 0 0 auto; margin-top: 3px; color: var(--terra-testo); }

/* .apertura e .sottotitolo stavano qui: il titolo della prima pagina e la riga sotto.
   Sono entrati nella scheda del circolo l'10 settembre 2026 e vivono in .scheda-testo,
   in fondo a questo foglio. Non le usava nessun'altra pagina. */

/* ┌───────────────────────────────────────────────────────────────────────────┐
   │ IL PULSANTE GIALLO PALLINA HA IL BORDO NERO, DAPPERTUTTO.                  │
   │                                                                           │
   │ Decisione del committente del 7 ottobre 2026. Una forma sola per l'azione  │
   │ principale, ed è il bordo a distinguerla dalla terra rossa anche per chi   │
   │ confonde i colori. Dal 19 ottobre 2026 il colore è il giallo pallina, e il │
   │ bordo serve ancora di più: sul bianco la pallina fa 1,42:1, e da sola non  │
   │ delimita niente. Il nero sopra fa 14,41:1, MAI il bianco (1,42:1).         │
   │                                                                           │
   │ ⚠️ UNA PER SCHERMATA (DESIGN.md §1). Lo «scelto» dei selettori non è più   │
   │ colorato — è nero pieno con il pallino colorato — proprio perché il colore │
   │ pieno torni a voler dire una cosa sola.                                   │
   └───────────────────────────────────────────────────────────────────────────┘

   .pulsante-principale è la stessa pillola senza il gettone, per i posti dove la
   pagina non ha bisogno del tondo (la scelta della password, «Torna agli orari»). */
.pulsante-principale,
.pillola-gettone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: var(--h-azione);
    padding: 0 1.375rem;
    border: 2px solid var(--nero);
    border-radius: var(--pillola);
    background: var(--pallina);
    color: var(--nero);
    font-family: var(--font-testo);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.18s var(--curva);
}

.pulsante-principale:hover,
.pillola-gettone:hover { filter: brightness(0.95); }

/* LA PILLOLA COL GETTONE (tavola «A» e «B»): il testo a sinistra, a destra un tondo
   nero da 40 con la freccia giallo pallina (14,41:1 sul nero). Il tondo è disegno —
   il bersaglio è tutta la pillola — e sta a 2px dal bordo, come un gettone nella fessura.
   L'altezza è --h-azione: 48 meno i due bordi lasciano 44, e il tondo ci sta con 2px
   sopra e sotto. */
.pillola-gettone {
    justify-content: space-between;
    padding: 0 2px 0 1.375rem;
}

.gettone {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: var(--pillola);
    background: var(--nero);
    color: var(--pallina);
}

.gettone svg { display: block; }

/* A tutta larghezza: l'invio del modulo e l'uscita in fondo al riepilogo. */
.pillola-gettone--larga { display: flex; width: 100%; }

/* ⚠️ MA SOLO SUL TELEFONO (committente, 7 ottobre 2026): sul computer la colonna è
   larga 1068px, e una pillola così è una striscia colorata, non un pulsante. Da 40rem
   torna larga quanto il suo testo, con un minimo perché resti la cosa più grossa del
   modulo, e va a DESTRA, sotto l'ultimo campo: è la fine del percorso, ed è dove punta
   la freccia del gettone. Sul telefono resta piena: è il bersaglio del pollice. */
@media (min-width: 40rem) {
    .pillola-gettone--larga {
        width: fit-content;
        min-width: 16rem;
        margin-left: auto;
    }
}

/* Quando chiude la pagina, dopo una frase o un biglietto. */
.pillola-gettone--sotto { margin-top: 1.5rem; }

/* IL TONDO «VAI», piccolo: un disco nero con la freccia bianca (20,46:1) dentro i
   comandi secondari — «altri 6 orari», «Come arrivare», «Chiama per le lezioni». Mette
   d'accordo tre comandi che prima avevano tre segni diversi: un «→» di sistema, un
   segnaposto sciolto, niente. Come il gettone, è disegno: si tocca tutta la riga. */
.tondo-vai {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--pillola);
    background: var(--nero);
    color: var(--bianco);
}

.tondo-vai svg { display: block; }

/* ⚠️ SECONDARIO, e non è una svista: il giallo della schermata è già speso su «Prenota
   ora!». Un secondo pulsante pieno sarebbe una seconda azione principale, cioè
   nessuna. Pillola bianca col contorno NERO (20,46:1): su un comando la cui unica
   differenza dal testo è il bordo, il bordo è il comando. Il tondo «vai» a destra. */
.pulsante-secondario {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: var(--h-comando);
    margin-top: 0.75rem;
    padding: 0 4px 0 1rem;
    border: 1px solid var(--nero);
    border-radius: var(--pillola);
    background: var(--bianco);
    color: var(--nero);
    font-family: var(--font-testo);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color 0.18s var(--curva);
}

.pulsante-secondario:hover,
.pulsante-secondario:focus-visible { background: var(--libero); }

/* Larga quanto la scheda, nel piede delle tre schede in fondo alla home: la parola a
   sinistra, il tondo a destra, e tutta la riga si tocca. */
.pulsante-secondario--pieno {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 0;
}

/* ── Il listino ───────────────────────────────────────────────────────────────
   Quanto costa un'ora, quanto il doppio, quanto la luce. RIASSUME e non ripete: la
   tariffa di ogni campo sta già sulla sua scheda, qui sopra.

   ⚠️ RIGHE, NON COLONNE, dal 7 ottobre 2026 (la scheda «Quanto costa» della proposta
   A): l'etichetta a sinistra, la cifra a destra, un filo sabbia fra una riga e
   l'altra. Era una striscia di tre cifre in riga, che chiedeva circa 432px filetti
   compresi e andava a capo appena la colonna si stringeva; in una scheda da 19rem le
   righe ci stanno sempre — la più larga, «Doppio» con «18,00–22,00 €», misura circa
   232px sui file veri di Montserrat Alternates e Lato.

   ⚠️ ERA UNA <table>, POI UNA <dl>: vedi il commento nella pagina. Cambia la forma,
   non il legame fra l'etichetta e la sua cifra.

   ⚠️ I CENTESIMI CI SONO SEMPRE — «14,00–16,00 €», mai il «14–16 €» delle anteprime —
   e le cifre sono TABULARI: ognuna largo uguale, così centesimi e «€» delle tre righe
   cadono incolonnati a destra. Montserrat Alternates ha `tnum` nel sottoinsieme latin
   che serviamo (verificato sul file il 7 ottobre 2026).
   ───────────────────────────────────────────────────────────────────────────── */

/* L'etichetta dell'unità del listino: sta SOTTO il titolo «Quanto costa», non sopra
   — un occhiello sopra un titolo è un tic, sotto è il sottotitolo che dice di cosa si
   parla. --testo su bianco: 5,02:1. */
.occhiello-listino,
.occhiello {
    font-family: var(--font-testo);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--testo);
}

.occhiello-listino { margin: 0; }

.listino { margin: 0.25rem 0 0; padding: 0; }

.voce-listino {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.25rem 0;
}

.voce-listino + .voce-listino { border-top: 1px solid var(--sabbia); }

/* L'etichetta è testo, nero: è la cosa che si cerca con gli occhi («il doppio?»), e
   la cifra accanto è la risposta. */
.voce-listino dt {
    font-family: var(--font-testo);
    font-size: 1rem;
    line-height: 1.75rem;
    color: var(--nero);
}

.voce-listino dd { margin: 0; }

.cifra-listino {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: var(--font-nomi);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.75rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: var(--nero);
    white-space: nowrap;
}

/* Il simbolo in piccolo accanto alla cifra: è l'unità, non il numero. */
.cifra-listino small {
    font-family: var(--font-testo);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--testo);
}


/* ── La scaletta: tre domande ─────────────────────────────────────────────────
   Quando? A che ora? Per quanto, e come? Ha sostituito il 10 settembre 2026 le
   quattro strisce di pastiglie, che erano quattro comandi presentati tutti insieme.

   ┌───────────────────────────────────────────────────────────────────────────┐
   │ UN SOLO OGGETTO IN DUE MODALITA'.                                          │
   │                                                                           │
   │ Nella procedura guidata la scaletta E' la pagina: la domanda a cui tocca   │
   │ aperta, quelle gia' risposte richiuse in una riga con la loro matita,      │
   │ quelle dopo spente. Sui risultati la stessa scaletta sta dentro il         │
   │ pannello «Cambia»: tre righe, tre matite, e le proposte restano sotto.     │
   │                                                                           │
   │ Le regole qui sotto valgono per tutte e due — c'e' un solo _Scaletta.cshtml│
   │ — ed e' apposta: due componenti che si somigliano finiscono per divergere, │
   │ e questo, divergendo, mostrerebbe una scelta diversa da quella con cui il  │
   │ server ha cercato.                                                        │
   └───────────────────────────────────────────────────────────────────────────┘ */

/* ── Il passo, solo nella guidata ─────────────────────────────────────────────
   Tre tacche e una frase. La frase e' un TESTO VERO e non un role="progressbar":
   una barra di avanzamento prometterebbe una percentuale che qui non esiste, e i
   passi non sono nemmeno sempre tre — quando la giornata e' finita la domanda
   dell'ora non si fa. --testo su bianco: 5,02:1. */
.passo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.875rem;
    font-family: var(--font-accento);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--testo);
}

.tacche { display: inline-flex; gap: 3px; }

.tacca {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--sabbia);
}

/* La terra e non la pallina: e' un segno piccolo, e --pallina su bianco fa 1,42:1.
   Non e' comunque l'unica informazione — accanto c'e' scritto «Passo 2 di 3». */
.tacca--on { background: var(--terra); }

/* ── La maniglia dei risultati ────────────────────────────────────────────────
   ┌───────────────────────────────────────────────────────────────────────┐
   │ ARRIVA CHIUSA, PERCHE' E' GIA' UNA RISPOSTA.                          │
   │                                                                       │
   │ Le tre scelte hanno gia' tutte il valore giusto — oggi, appena         │
   │ possibile, un'ora in singolo — quindi sui risultati sono rifiniture    │
   │ presentate come tali, non prerequisiti. Aperte occupavano 248px e la   │
   │ prima riga prenotabile cadeva a 470, cioe' al 70% dello schermo        │
   │ davvero visibile su un telefono.                                       │
   │                                                                       │
   │ <details> e' nativo: si apre da tastiera, non chiede una riga di       │
   │ JavaScript (che la CSP non ammetterebbe), e quando e' chiuso il suo    │
   │ contenuto esce anche dal percorso di tabulazione.                      │
   └───────────────────────────────────────────────────────────────────────┘ */

.scelte > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--grigio);
    border-radius: var(--raggio);
    cursor: pointer;
    /* Il triangolino di serie lo disegna il browser a modo suo: qui il segnale è
       «Cambia» più la freccia disegnata, che ruota. */
    list-style: none;
}

.scelte > summary::-webkit-details-marker { display: none; }

/* Il titolo della pagina VIVE dentro la maniglia, e non è un risparmio di spazio:
   è la stessa frase a fare due mestieri — dice cosa stai guardando e apre ciò che
   lo ha deciso. Due elementi separati direbbero la stessa cosa due volte. */
.scelte > summary .frase-ricerca { margin: 0; font-size: 1rem; }

.scelte > summary .cambia {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    font-family: var(--font-accento);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--nero);
}

.scelte > summary .cambia svg { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.scelte[open] > summary .cambia svg { transform: rotate(180deg); }

.scelte[open] > summary { margin-bottom: 0.25rem; }

/* La frase che dice dove ti trovi. Non e' un titolo decorativo: e' lo stato di tre
   comandi richiusi, scritto dove non si puo' non leggerlo. */
.frase-ricerca {
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    margin: 1.25rem 0 0.75rem;
}

/* ── Le righe della scaletta ─────────────────────────────────────────────────
   Un <ol>, e non un <div> con dei numeri disegnati: l'ordine e' un'informazione —
   sono tre domande in sequenza — e scritto cosi' lo sente anche chi la pagina la
   ascolta, senza bisogno di annunciare «passo 2 di 3». */

.scaletta { list-style: none; margin: 0; padding: 0; }

.scaletta > li { border-bottom: 1px solid var(--sabbia); }
.scaletta > li:first-child { border-top: 1px solid var(--sabbia); }

/* ⚠️ LA MANIGLIA E' TUTTA LA RIGA, non la matita.
   Con la matita cliccabile e il valore accanto no, il dito va sul valore — è la
   cosa piu' grande della riga — e non succede niente: si conclude che la riga e'
   bloccata. Un <summary> e' tutto bersaglio, e prende il proprio nome dal testo
   che contiene, quindi «Quando venerdì 11» si legge e si pronuncia come si vede.

   I margini negativi sono quelli della riga delle proposte, per la stessa ragione:
   il velo del tocco si allarga oltre il testo invece di illuminarsi a rettangolo
   dentro di esso. */
.voce > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    margin: 0 -0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--raggio);
    cursor: pointer;
    list-style: none;
    color: var(--nero);
    transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.voce > summary::-webkit-details-marker { display: none; }

.voce > summary:hover, .voce > summary:focus-visible { background: var(--libero); }
.voce > summary:active { background: var(--sabbia); }

/* ⚠️ Nel velo l'etichetta passa a NERO. Il grigio --testo è un colore per il
   bianco: su --libero scende a 4,58:1 e su --sabbia a 3,12:1, cioè sotto soglia.
   È la regola generale del §1 di DESIGN.md, e qui morde perché il fondo cambia. */
.voce > summary:hover .et,
.voce > summary:focus-visible .et,
.voce > summary:active .et { color: var(--nero); }

/* ⚠️ ANCHE LE RIGHE IN ATTESA, che non sono .voce: senza, «Dalle» e «Come» uscivano
   in minuscolo e col carattere del testo accanto alle etichette maiuscole delle righe
   risposte — due voci diverse per lo stesso pezzo della scaletta. */
.voce .et,
.scaletta > li.attesa .et {
    flex: 0 0 4.5rem;
    font-family: var(--font-accento);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--testo);
}

.voce .val {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--nero);
}

/* Nella guidata la domanda aperta E' il titolo della pagina, dentro la maniglia:
   la stessa frase dice cosa ti si sta chiedendo e apre e chiude cio' che lo decide. */
.voce .domanda {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
}

/* Il segno: 44px di bersaglio anche se dentro ne misura 16, come il disco delle
   proposte. ⚠️ Il colore e' quello del testo — nero, 20,46:1 — perche' un'icona
   che porta un significato deve stare sopra 3:1: la pallina ne fa 1,42 e il grigio
   2,26. Il contorno e' --sabbia perche' la riga ha gia' la sua etichetta scritta. */
.voce .segno {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sabbia);
    border-radius: var(--pillola);
    color: var(--nero);
    transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.voce > summary:hover .segno,
.voce > summary:focus-visible .segno { border-color: var(--libero-bordo); }
.voce > summary:active .segno { border-color: var(--nero); }

/* Ruota solo la freccia, mai la matita: una matita capovolta non vuol dire niente. */
.voce .segno--apre svg { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.voce[open] > summary .segno--apre svg { transform: rotate(180deg); }

.voce .risposte { padding: 0.25rem 0 1rem; }

/* La domanda che non e' ancora il suo turno.
   ⚠️ --testo e non --grigio: grigio chiaro su bianco fa 2,26:1, e sarebbe la
   convenzione universale di «non selezionabile» applicata a una riga che invece
   diventera' toccabile fra un attimo. Che non si tocchi lo dicono l'assenza della
   matita e il peso normale, non lo sbiadimento. */
.scaletta > li.attesa {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 56px;
    padding: 0.5rem 0;
    color: var(--testo);
}

.scaletta > li.attesa .val {
    font-family: var(--font-accento);
    font-size: 0.95rem;
    font-weight: 400;
}

/* ── Quando: la griglia dei giorni ───────────────────────────────────────────
   Quindici caselle su tre colonne stanno in cinque righe, cioe' in una schermata:
   ci sono TUTTI i giorni prenotabili e non c'e' niente da scorrere. Erano pastiglie
   in fila, e quindici pastiglie misuravano 1.219px dentro una finestra da 264. */
.giorni {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
    /* Lo spazio del contorno di fuoco: 3px di tratto più 1 di stacco. */
    padding: 0.25rem;
}

/* La tessera del giorno: sigla in Lato maiuscolo, numero in Montserrat Alternates —
   il numero è un contenuto, la sigla un'etichetta (DESIGN.md §2, 7 ottobre 2026). */
.giorno {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 0.4rem;
    border: 1px solid var(--grigio);
    border-radius: var(--raggio);
    background: var(--bianco);
    color: var(--nero);
    font-family: var(--font-testo);
    text-decoration: none;
    transition: background-color 0.18s var(--curva);
}

.giorno .gg {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--testo);
}

.giorno .nn {
    font-family: var(--font-nomi);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.375rem;
}

/* IL PALLINO DELLO SCELTO, sotto il numero. C'è su ogni tessera che si tocca ma si vede
   solo su quella scelta: così accendere un giorno non sposta niente nelle altre, e
   dove c'è lo script il pallino arriva in dissolvenza insieme al cursore invece di
   comparire di colpo. Pallina sul nero, 14,41:1 — ed è un segno in più, non l'unico. */
a.giorno::after {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pallina);
    opacity: 0;
}

.giorno:not(.giorno--on):hover,
.giorno:not(.giorno--on):focus-visible { background: var(--libero); }

.giorno:not(.giorno--on):hover .gg,
.giorno:not(.giorno--on):focus-visible .gg { color: var(--nero); }

/* ┌───────────────────────────────────────────────────────────────────────────┐
   │ LO SCELTO È NERO PIENO CON UN PALLINO COLORATO, dal 7 ottobre 2026.        │
   │                                                                           │
   │ Era arancio col bordo nero, e nella prima schermata della home c'erano     │
   │ cinque macchie arancio: il pulsante e quattro scelte accese con la stessa  │
   │ voce. Adesso il colore pieno è solo dell'azione principale, e lo scelto ha │
   │ la voce che ha già nel gestionale. Bianco sul nero 20,46:1, la sigla in    │
   │ sabbia 12,74:1. Lo stato non lo dice il colore da solo: cambiano il fondo, │
   │ il peso e c'è il pallino (§7).                                             │
   └───────────────────────────────────────────────────────────────────────────┘ */
.giorno--on {
    background: var(--nero);
    border-color: var(--nero);
    color: var(--bianco);
}

.giorno--on .gg { color: var(--sabbia); }

/* Con «a» davanti, come la regola che lo spegne: con la sola classe perdeva in
   specificità contro a.giorno::after, e il pallino restava invisibile anche sullo
   scelto. */
a.giorno.giorno--on::after { opacity: 1; }

/* ── Come: la tavola dei prezzi ──────────────────────────────────────────────
   ┌───────────────────────────────────────────────────────────────────────┐
   │ SEI CASELLE, NON DUE DOMANDE.                                          │
   │                                                                       │
   │ Durata e tipo di partita sono due scelte, e i passaggi sono tre: senza │
   │ JavaScript due domande su una schermata vogliono un <form> e un        │
   │ pulsante «Avanti», cioe' un tocco in piu'. Incrociate in una tavola,   │
   │ ogni casella e' un collegamento solo e un tocco risponde a tutte e due.│
   │                                                                       │
   │ Il prezzo si mostra QUI e in nessun altro passo, perche' e' qui che si │
   │ decide: sono le uniche due scelte che lo cambiano.                     │
   └───────────────────────────────────────────────────────────────────────┘ */
.tavola {
    display: grid;
    grid-template-columns: 5.5rem 1fr 1fr;
    gap: 0.5rem;
    align-items: stretch;
    padding: 0.25rem;
}

.tavola .intest {
    align-self: end;
    padding-bottom: 0.2rem;
    font-family: var(--font-accento);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--testo);
    text-align: center;
}

.tavola .dur {
    display: flex;
    align-items: center;
    font-family: var(--font-accento);
    font-size: 0.85rem;
    line-height: 1.2;
    color: var(--nero);
}

.cella {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-height: 56px;
    border: 1px solid var(--grigio);
    border-radius: var(--raggio);
    background: var(--bianco);
    color: var(--nero);
    font-family: var(--font-testo);
    text-decoration: none;
    transition: background-color 0.18s var(--curva);
}

/* Il prezzo è un numero: Montserrat Alternates, come le cifre delle schede. */
.cella .eur {
    font-family: var(--font-nomi);
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

/* «dalle 20:30»: quella partita comincia a un'ora diversa da quella che si sta
   guardando — piu' tardi se a quest'ora non ci sta, piu' presto se la chiusura non le
   lascia spazio. Senza, la colonna mostrerebbe un prezzo diverso senza dire perche'.
   0,7rem e non 0,68: sotto il minimo di DESIGN.md §2 non si scende. */
.cella .altrora {
    font-size: 0.7rem;
    line-height: 1.1;
    letter-spacing: 0.02em;
    color: var(--testo);
}

/* ⚠️ «Niente» resta un collegamento e resta leggibile: non e' una casella spenta.
   Toccandola si arriva alla schermata che spiega perche' e offre le sue vie
   d'uscita, che e' l'unica risposta utile. Le caselle spente le abbiamo gia' tolte
   una volta da questa pagina, insieme alla griglia. */
.cella--vuota .eur { font-family: var(--font-testo); font-weight: 400; color: var(--testo); }

.cella:not(.cella--on):hover,
.cella:not(.cella--on):focus-visible { background: var(--libero); }

.cella:not(.cella--on):hover .altrora,
.cella:not(.cella--on):focus-visible .altrora,
.cella:not(.cella--on):hover .eur,
.cella:not(.cella--on):focus-visible .eur { color: var(--nero); }

/* Lo scelto nero pieno col pallino, come in tutto il sito dal 7 ottobre 2026 (vedi
   .giorno--on). Sul nero il prezzo è bianco (20,46:1) e «dalle 20:30» sabbia
   (12,74:1): il grigio di corpo è un colore per il bianco. */
.cella--on {
    background: var(--nero);
    border-color: var(--nero);
}

.cella--on .eur { color: var(--bianco); }
.cella--on .altrora { color: var(--sabbia); }

.cella--on .eur::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--pallina);
    vertical-align: 0.2em;
}

.nota-tavola {
    margin: 0.625rem 0 0;
    font-family: var(--font-accento);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--testo);
}

/* ── La via di fuga ──────────────────────────────────────────────────────────
   Non e' una rifinitura: tre passaggi obbligatori a chiunque costerebbero, con un
   abbandono prudente dell'8% a passaggio, il 22% dei visitatori che non arriva a
   vedere una riga prenotabile. Chi ha fretta esce alla prima schermata. */
.salta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.75rem;
    font-family: var(--font-accento);
    font-size: 0.9rem;
    color: var(--nero);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Le pastiglie ─────────────────────────────────────────────────────────────
   Le ore di partenza. Ogni gruppo e' un GRUPPO DI SCELTA, ed e' il caso previsto
   dal §3 di DESIGN.md: pastiglie, con l'attiva piena. La pista chiara che il §3
   nomina qui NON c'e': era una deroga misurata quando l'accesa era arancio (1,40:1
   sulla sabbia), e resta perche' bianco con bordo grigio e' la stessa pista dei
   selettori della home. Dal 7 ottobre 2026 l'accesa e' NERA col pallino colorato: i
   segnali sono tre — riempimento, peso 700, pallino — e il colore non e' mai l'unico
   (§7). */
.pastiglie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* Lo spazio del contorno di fuoco: 3px di tratto più 1 di stacco. */
    padding: 0.25rem;
}

.pastiglia {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--grigio);
    border-radius: var(--pillola);
    background: var(--bianco);
    color: var(--nero);
    font-family: var(--font-testo);
    font-size: 0.9rem;
    text-decoration: none;
    white-space: nowrap;
}

.pastiglia--on {
    background: var(--nero);
    border-color: var(--nero);
    color: var(--bianco);
    font-weight: 700;
}

.pastiglia--on::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--pallina);
}

/* Il contorno di fuoco sta dentro il padding del gruppo (0,25rem = 4px): 3px di
   tratto piu' 1px di stacco. Con i 2px di stacco generali veniva ritagliato. */
.pastiglia:focus-visible,
.giorno:focus-visible,
.cella:focus-visible { outline-offset: 1px; }

/* ── Solo per chi ascolta ─────────────────────────────────────────────────────
   ⚠️ E' un'AGGIUNTA, non una sostituzione. La data per esteso dentro un aria-label
   cancellerebbe il testo che si vede — «Ven 11» — e chi comanda il telefono a voce
   dicendo «tocca Ven 11» non troverebbe piu' niente (§2.5.3). Nascosta dentro la
   casella, invece, il nome accessibile contiene tutti e due.

   clip-path e non display:none: quello la toglierebbe anche ai lettori di schermo,
   che e' l'opposto di quello che serve. */
.solo-voce {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* ── Le proposte ──────────────────────────────────────────────────────────────
   Qui c'era la griglia campi × orari: una tabella con le ore in riga, i campi in
   colonna e 87 caselle di cui 52 spente. È stata sostituita il 9 settembre 2026 da
   un elenco di partite prenotabili.

   Ne è sparito anche il debito §10.3 di DESIGN.md — «lo slot non prenotabile sta a
   1,42:1» — e non perché sia stato corretto: non ci sono più caselle spente da
   leggere. Ogni riga di questa pagina è una partita che si può davvero prenotare. */

/* Il 9 settembre 2026, poche ore dopo, l'elenco è diventato un RACCONTO: le finestre
   raccolte nei tratti in cui non cambia niente, e in mezzo scritto cosa è cambiato.
   Le ventiquattro scatole verdi sono sparite del tutto — nessun bordo, nessun fondo,
   nessuna scheda: l'unica cosa che disegna un contenitore, qui, è il velo del tocco. */

.proposte { margin-bottom: 1rem; }

/* ── La risposta: i campi liberi all'ora chiesta ──────────────────────────────
   Dal 10 settembre 2026 questa pagina risponde prima alla domanda fatta e poi
   propone le alternative. Sopra i campi, sotto il nastro delle altre ore.

   Le alternative non ci sono più dal 7 ottobre 2026: resta la risposta, e l'ora
   si cambia da «Cambia» (vedi «Un'altra ora?» più giù).

   ⚠️ TRE RIGHE, NON TRE SCHEDE, e ci sono arrivato sbagliando prima. Erano schede
   strette, due per riga sul telefono: su un desktop da 1030px restavano larghe 163
   — la misura del telefono — schiacciate a sinistra, con due terzi di pagina vuoti
   a destra. Il difetto non era la larghezza scelta male: era che dentro ci sono DUE
   dati, un nome e un prezzo, e una scheda attorno a due dati pesa più di quello che
   contiene.

   Una riga non ha una larghezza «giusta» da difendere: si allarga e usa lo spazio
   in più per dire qualcosa. Stessa forma a 320px e a 1400, senza media query per la
   disposizione.
   ───────────────────────────────────────────────────────────────────────────── */
.sezione-risposta {
    margin: 0.875rem 0 0.5rem;
    font-size: 1.05rem;
    line-height: 1.25;
    color: var(--nero);
}

.campi-risposta {
    list-style: none;

    /* Poco, e non decide lo stacco: sotto la risposta viene sempre «I campi», e il
       margine di .sezione (2,5rem) si fonde con questo e vince. «Un'altra ora?», che
       stava in mezzo, è stata tolta il 7 ottobre 2026. */
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.riga-campo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    background: var(--bianco);
    border: 1px solid var(--sabbia);
    border-radius: var(--raggio);
    padding: 0.5rem 0.625rem;
    box-shadow: var(--ombra);
}

/* Il campo che costa meno porta il contorno nero: dice «se non hai preferenze,
   questo». Non è un colore in più — è il nero della palette — e la cifra accanto lo
   conferma comunque, perché il colore non è mai l'unica informazione (§7). */
.riga-campo--prima { border-color: var(--nero); }

/* Quadrata e piccola: basta a riconoscere il campo, e costa 52px invece dei 111 di
   una foto 3:2 a piena larghezza. `flex: none` o si schiaccerebbe per far posto al
   testo accanto. */
/* ⚠️ IL FONDO D'ATTESA È LA SABBIA. Era var(--sfondo), che :root non ha mai definito:
   il fondo restava trasparente e, finché la foto pigra non arrivava, nella riga c'era
   un buco bianco. */
.mini-campo {
    flex: none;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--sabbia);
}

/* min-width: 0 è obbligatorio, non decorativo: senza, un elemento flex non scende
   mai sotto la larghezza del suo contenuto, e una riga lunga di caratteristiche
   spingerebbe prezzo e comando fuori dalla scheda. */
.chi-campo { flex: 1 1 auto; min-width: 0; }

/* Il nome del campo è un nome: Montserrat Alternates, anche da quando il testo della
   pagina è in Lato (7 ottobre 2026). */
.chi-campo b {
    display: block;
    font-family: var(--font-nomi);
    font-size: 0.95rem;
    line-height: 1.2;
    color: var(--nero);
}

/* ⚠️ NASCOSTE SOTTO I 30rem, ed è una scelta dichiarata: su un telefono da 375, con
   miniatura, prezzo e comando sulla stessa riga, restano ~110px per il testo — e
   «terra rossa · spogliatoi vicini» andrebbe a capo tre volte spingendo la riga a
   quattro righe di altezza.

   Non è informazione persa: questa stessa pagina le elenca tutte, per esteso e con
   le icone, nella sezione «I campi» in fondo. Qui sono un promemoria per chi ha lo
   spazio per leggerlo. */
.tratti-riga { display: none; }

@media (min-width: 30rem) {
    .tratti-riga {
        display: block;
        margin-top: 0.15rem;
        font-family: var(--font-accento);
        font-size: 0.72rem;
        color: var(--testo);
        text-transform: uppercase;
        letter-spacing: 0.04em;

        /* Una riga sola: se le caratteristiche sono tante, si accorciano con i tre
           puntini invece di far crescere la riga. Qui è legittimo perché l'elenco
           completo sta in fondo alla pagina. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Il prezzo è la ragione per cui si sceglie fra tre campi di terra rossa uguali:
   sta in mezzo, in cifre a larghezza fissa, e non si stringe mai. */
.eur-campo {
    flex: none;
    font-family: var(--font-nomi);
    font-weight: 700;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--nero);
    text-align: right;
    line-height: 1.2;
}

/* 0,7rem e non 0,68: sotto il minimo di DESIGN.md §2 non si scende. */
.eur-campo .con-luce {
    display: block;
    font-family: var(--font-testo);
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--testo);
}

/* ⚠️ COL BORDO NERO, come ogni pulsante pieno del sito dal 7 ottobre 2026. */
.prendi-riga {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--h-comando);
    padding: 0 1rem;
    border: 2px solid var(--nero);
    border-radius: var(--pillola);
    background: var(--pallina);
    color: var(--nero);
    font-family: var(--font-testo);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

/* ⚠️ SOLO LA PRIMA RIGA HA IL PULSANTE PIENO. Tre pulsanti pieni uno sotto
   l'altro sono tre azioni principali, cioè nessuna (§8). Gli altri due hanno lo
   stesso comando col contorno: si vede che si preme, e si vede quale è la scelta
   consigliata. Il contorno resta da 1px: è il pulsante pieno a portare quello da 2. */
.riga-campo:not(.riga-campo--prima) .prendi-riga {
    background: var(--bianco);
    border-width: 1px;
}

.prendi-riga:hover { filter: brightness(0.95); }

/* ── «Un'altra ora?» ───────────────────────────────────────────────────────────
   Qui c'erano il titolo, le fasce («13:30 – 16:30, tutti e tre i campi») e il
   nastro delle altre ore, sotto la risposta. Tolti il 7 ottobre 2026 su richiesta
   del committente, con «Ci sono altri N orari più tardi» e «Dalle 17:00 in poi»:
   l'ora si cambia da «Cambia», in cima, che è il posto dove si sceglie.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Il capitolo ─────────────────────────────────────────────────────────────
   «Tre campi liberi», e accanto le barrette: piene i campi liberi, vuote quelli che
   a quest'ora non ci sono più. Il disegno ripete quello che c'è scritto — il colore
   non è mai l'unica informazione (§7 di DESIGN.md). */

.capo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    /* Più spazio sopra un titolo che sotto: è la regola del ritmo, e qui separa un
       capitolo dall'ultima riga di quello prima. */
    margin: 1.5rem 0 0;
}

.svolta + .capo { margin-top: 1.125rem; }

.capo h2 { margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.2; }

.capo .barrette { flex: 0 0 auto; }

.nota-capo {
    margin: 0.375rem 0 0 1.875rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--testo);
    font-variant-numeric: tabular-nums;
}

/* ── La riga ─────────────────────────────────────────────────────────────────
   Ora grande a sinistra, campi sotto, prezzo a destra, e un disco che porta avanti.
   Il margine negativo serve al velo del tocco: si allarga oltre il testo, così la
   riga si accende tutta invece di illuminarsi a rettangolo dentro il suo testo. */

.lista { margin: 0.75rem 0 0; padding: 0; list-style: none; }

/* ── Le righe staccate ────────────────────────────────────────────────────────
   La morbidezza del kit «hotel booking» applicata alle proposte: ogni riga è un
   riquadro con il suo bordo invece di una voce di elenco a filo.

   ⚠️ SOLO IN PRIMA PAGINA, e la ricerca resta com'è: tre righe staccate si leggono
   come tre offerte, otto righe staccate si leggono come otto rettangoli. Là l'elenco è
   uno strumento e va denso, qui è una vetrina e vuole aria. È una VARIANTE dello stesso
   pezzo — stesso markup, stesse destinazioni, stessi stati — non una seconda riga. */
.lista--schede { display: grid; gap: 0.5rem; margin-top: 0; }

/* Il margine negativo del velo del tocco qui non serve: il riquadro è già più largo
   del testo, ed è lui che si accende.

   ⚠️ Lo spazio orizzontale resta quello di «.riga» (0,75rem) e non sale a 0,875: il
   riquadro toglie già i 24px dei margini negativi, e con quattro pixel in più per lato
   a 320px «21:00 – 22:00» non ci stava e l'ora andava a capo. */
.lista--schede .riga {
    margin: 0;
    padding: 0.875rem 0.75rem;
    background: var(--bianco);
    border: 1px solid var(--sabbia);
    box-shadow: var(--ombra);
}

/* ⚠️ SOTTO I 352px IL RIQUADRO NON CI STA COM'E'. Rispetto alla riga a filo costa 26px
   di larghezza — i due margini negativi che non ha più, più il bordo — ed erano proprio
   quelli che servivano a «21:00 – 22:00»: senza, l'orario di fine andava a capo dopo il
   trattino. Si recuperano dove non tolgono niente: lo spazio interno, la distanza fra le
   colonne, e la colonna del prezzo, che a questa larghezza è più larga del prezzo che
   contiene. Sopra i 352 non serve, e la riga resta identica alla ricerca. */
@media (max-width: 22rem) {
    .lista--schede .riga { padding-left: 0.5rem; padding-right: 0.5rem; gap: 0.5rem; }
    .lista--schede .riga .prezzo { min-width: 4rem; }
}

.riga {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 -0.75rem;
    padding: 0.875rem 0.75rem;
    border-radius: var(--raggio);
    color: var(--nero);
    text-decoration: none;
    transition: background-color 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.riga .lato { flex: 1 1 auto; min-width: 0; }

/* L'ORA È LA COSA CHE SI CERCA, quindi è la più grande della riga. I passi di scala
   sono 0,8 → 0,95 → 1,5rem: tre misure distanti, non tre misure vicine.

   ⚠️ ERANO 2,25rem, cioè 36px, e il committente li ha fatti rimpicciolire il 10
   settembre 2026. Aveva ragione: a quella misura l'ora non era una gerarchia, era un
   grido — su un elenco di otto proposte la pagina diventava una colonna di numeri
   enormi con le informazioni vere in grigio piccolo accanto. A 1,5rem il primato
   dell'ora resta (è ancora una volta e mezza tutto il resto della riga) e la riga si
   accorcia di tredici pixel, che su otto righe è quasi una schermata di telefono. */
.riga .ora {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-accento);
    /* Le cifre in colonna vogliono la larghezza fissa, altrimenti le ore non si
       incolonnano e l'elenco balla. */
    font-variant-numeric: tabular-nums;
}

.riga .ora b {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--nero);
}

.riga .fine { font-size: 0.95rem; font-weight: 400; color: var(--testo); }

.riga .quali { display: block; margin-top: 0.4375rem; font-size: 0.8rem; line-height: 1.35; color: var(--testo); }

.riga .prezzo {
    flex: 0 0 auto;
    min-width: 4.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1875rem;
    text-align: right;
}

/* IL PREZZO PESA DUE VOLTE DIVERSE. Nero pieno quando è una notizia, grigio quando
   ripete la riga sopra: i sei «24,00 €» identici di un pomeriggio diventano una
   colonna muta che l'occhio salta, e i due che contano — il campo che costa meno, il
   salto dei fari — sporgono proprio perché tutto il resto è allineato e spento. */
.riga .cifra {
    font-family: var(--font-nomi);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--nero);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ⚠️ NERO, non grigio. Grigio più peso leggero è la convenzione universale di
   «non selezionabile»: il prezzo che ripete si leggeva come un prezzo spento. Si
   toglie solo il colore e si tiene il peso — da 700 a 400 la differenza di voce
   resta ampia — e il contrasto sale da 5,02 a 20,46:1. */
.riga .cifra.ripete { font-weight: 400; }

.riga .con-luce {
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--terra-testo);   /* 5,88:1 su bianco */
    white-space: nowrap;
}

/* Il disco: 44px anche se il segno dentro ne misura 16. Dal 7 ottobre 2026 è il TONDO
   NERO con la freccia bianca (20,46:1), lo stesso «vai» dei comandi della prima pagina:
   un segno solo per «si va avanti». */
.riga .vai {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--nero);
    border-radius: var(--pillola);
    background: var(--nero);
    color: var(--bianco);
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* UNA SOLA AZIONE PRIMARIA, e un solo pulsante pieno in tutta la schermata: la prima
   finestra, cioè quella che l'ospite ha letteralmente chiesto. Il contorno è NERO da
   2px, come ogni pulsante pieno del sito dal 7 ottobre 2026: la pallina su bianco fa
   1,42:1 e da sola non delimita niente. La freccia sulla pallina è nera (14,41:1). */
.prima .vai {
    background: var(--pallina);
    border: 2px solid var(--nero);
    color: var(--nero);
    box-shadow: var(--ombra);
}

/* ── Gli stati, che prima non c'erano ────────────────────────────────────────
   ⚠️ Nel velo il testo secondario passa a NERO. Il grigio --testo è un colore per il
   bianco: su --libero scende a 4,58:1 e su --sabbia a 3,12:1, cioè sotto soglia. È la
   regola generale del §1 di DESIGN.md, e qui morde davvero perché il fondo cambia. */

.riga:hover, .riga:focus-visible { background: var(--libero); }

.riga:hover .quali, .riga:focus-visible .quali,
.riga:hover .fine, .riga:focus-visible .fine,
.riga:hover .cifra.ripete, .riga:focus-visible .cifra.ripete,
.riga:hover .con-luce, .riga:focus-visible .con-luce { color: var(--nero); }

.riga:hover .vai, .riga:focus-visible .vai { transform: translateX(4px); }

.riga:active { background: var(--sabbia); }

.riga:active .quali, .riga:active .fine,
.riga:active .cifra.ripete, .riga:active .con-luce { color: var(--nero); }

.riga:active .vai { transform: translateX(1px); }
.prima:active .vai { box-shadow: none; }

/* ── La svolta ───────────────────────────────────────────────────────────────
   Il fatto che spiega perché l'elenco cambia. È l'unico posto della pagina dove si
   racconta qualcosa, e sta fra due capitoli perché è lì che succede. */

.svolta {
    display: flex;
    gap: 0.625rem;
    margin: 2.125rem 0 0;
    padding-top: 1.125rem;
    border-top: 1px solid var(--sabbia);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--nero);
    font-variant-numeric: tabular-nums;
}

/* Due fatti sullo stesso confine — due campi che si spengono insieme — sono due frasi,
   ma UN solo stacco: il filetto separa i capitoli, non le righe fra loro. */
.svolta + .svolta {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: none;
}

.svolta svg { flex: 0 0 auto; margin-top: 3px; color: var(--terra-testo); }

/* ── Il movimento: uno solo ──────────────────────────────────────────────────
   Il tocco sulla riga, e basta. La riga si vela e il disco scorre di 4px, insieme:
   la pagina risponde dove è stato messo il dito, non altrove. Ease-out esponenziale,
   parte deciso e si posa.

   ⚠️ Il COLORE del testo non transita mai — cambia di scatto — perché una transizione
   di 220ms farebbe passare il grigio del corpo sopra un fondo tinto per tutto quel
   tempo, cioè sotto soglia mentre l'occhio guarda. */
/* ⚠️ SCRITTO CON L'ASTERISCO, come prescrive il §6 di DESIGN.md, e non con l'elenco
   degli elementi animati: un elenco copre quello che c'è oggi e lascia scoperto il
   primo movimento che qualcuno aggiungerà domani. L'unica cosa che resta nominata è
   la traslazione del disco, perché va azzerata e non accorciata. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .riga:hover .vai, .riga:focus-visible .vai, .riga:active .vai { transform: none; }
}

/* ── Quale campo ─────────────────────────────────────────────────────────────
   La schermata che si apre quando una finestra ha due o tre campi liberi. Usa la
   STESSA riga dell'elenco — .riga, con i suoi stati e il suo disco — perché è lo
   stesso gesto: due componenti che si somigliano finiscono per divergere. */

.scelta-campi { list-style: none; padding: 0; margin: 1.25rem 0 0; }

.campo-scelto strong { display: block; font-family: var(--font-nomi); font-size: 1.25rem; line-height: 1.2; color: var(--nero); }

.campo-scelto .tratti { display: block; margin-top: 0.375rem; }

.campo-scelto .caratteristica {
    font-family: var(--font-accento);
    font-size: 0.7rem;
    color: var(--testo);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.campo-scelto .caratteristica + .caratteristica::before {
    content: " · ";
    color: var(--grigio);
}

/* Il terreno prende il colore della terra anche qui: è la stessa informazione della
   scheda in fondo all'elenco, e cambiarle colore fra due schermate la farebbe
   sembrare un'altra cosa. --terra-testo su bianco: 5,88:1. */
.campo-scelto .caratteristica:first-child { color: var(--terra-testo); }

.campo-scelto .caratteristica img {
    width: 12px;
    height: 12px;
    opacity: 0.55;
    vertical-align: -1px;
    margin-right: 0.2em;
}

/* Solo sul PREMUTO, e non sul velo: --terra-testo su --libero fa 5,37:1 e sta in
   piedi, su --sabbia scende a 3,66 e non ci sta. Il terreno tiene il suo colore
   finché può — è un'informazione, non una decorazione. */
.riga:active .caratteristica { color: var(--nero); }

/* PILLOLA dal 7 ottobre 2026 (tavola «B»), come ogni comando: era a raggio 10, la forma
   di un contenitore. Il contorno resta --testo, 5,02:1: è il bordo a fare il comando. */
.indietro {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--h-comando);
    margin-top: 1.5rem;
    padding: 0 1rem 0 0.75rem;
    border: 1px solid var(--testo);
    border-radius: var(--pillola);
    color: var(--nero);
    font-family: var(--font-testo);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
}

/* Lo stesso velo verde del pulsante secondario: senza, sotto il dito o col Tab un
   collegamento a forma di pulsante non rispondeva in nessun modo. */
.indietro:hover,
.indietro:focus-visible { background: var(--libero); }

/* ── Conferma: il titolo e l'indietro ─────────────────────────────────────────
   Chiesto dal committente il 16 settembre 2026: «Indietro» in alto a destra, accanto a
   «Conferma prenotazione».

   ⚠️ SULLA STESSA RIGA, col titolo su due righe accanto (tavola «B», 7 ottobre 2026).
   Da quando l'h1 ha la misura dei titoli principali e non i 32px di serie, a 360px
   «prenotazione» misura 152px e accanto al pulsante ne restano 202: ci sta. Il titolo
   ha una base di 10rem, e solo sotto quella il flex va a capo — e con wrap-reverse la
   riga che va a capo sale SOPRA: l'indietro resta in alto a destra anche lì. Con un
   wrap normale cadrebbe fra il titolo e il biglietto, cioè a metà pagina.

   Il margine del titolo passa alla riga: dentro, fra titolo e pulsante, decide il gap. */
.testata-conferma {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    margin: 0.25rem 0 0;
}

.testata-conferma h1 { flex: 1 1 10rem; min-width: 0; margin: 0; }

.testata-conferma .indietro {
    flex: none;
    margin: 0 0 0 auto;
}

.freccia-indietro { width: 16px; height: 16px; flex: none; }

/* ── Ricerca: la maniglia e l'indietro ────────────────────────────────────────
   Stessa richiesta della conferma, stesso aspetto: sul computer l'indietro sta a destra
   della maniglia, sul telefono sale sopra di lei, sempre a destra.

   ⚠️ ROW-REVERSE, E NON IL WRAP-REVERSE DELLA CONFERMA. Qui l'indietro deve venire PRIMA
   della maniglia nel sorgente: il pannello aperto contiene fino a diciotto fermate di
   tastiera, e dopo di lui l'indietro — che si vede in cima — arrivava per ultimo. Con
   row-reverse il primo elemento va a destra, e quando la riga va a capo resta sulla
   prima riga, cioè in alto: l'aspetto è identico al pixel, cambia solo l'ordine. (Sulla
   conferma fra titolo e indietro non c'è niente da raggiungere, e lì non serve.)

   ⚠️ LA MANIGLIA SI APRE, e aperta è alta quanto tutte le scelte. Quindi:
   - la sua base è FISSA (24rem) e non il contenuto: con la base automatica, aprendo
     il pannello la striscia dei giorni allungava il contenuto e l'indietro saltava
     sopra la maniglia a ogni tocco su «Cambia»;
   - l'allineamento è in cima, non al centro: al centro, a pannello aperto, l'indietro
     scivolerebbe a metà delle scelte.

   Il pulsante è alto 44px e la maniglia 56 (min-height di .scelte > summary): il
   margine sopra lo centra su di lei quando stanno affiancati, e sopra la maniglia,
   quando è salito, sono sei pixel che non si notano.

   Fra 550 e 650px circa, a pannello aperto, sotto l'indietro resta una colonna vuota e
   le scelte vanno a capo una riga prima. Lasciato apposta: alzare la base a 30rem
   farebbe salire l'indietro in tutta quella fascia, e costerebbe 58px in ogni stato per
   risparmiarne una decina in uno solo. */
.testata-ricerca {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 1rem;
    row-gap: 0.5rem;
    margin-bottom: 1rem;
}

.testata-ricerca .scelte {
    flex: 1 1 24rem;
    min-width: 0;
}

.testata-ricerca .indietro {
    gap: 0.4rem;
    margin: calc((56px - 44px) / 2) 0 0;
}

/* Le vie d'uscita quando non c'è niente: sono scelte, non consigli, quindi sono
   bersagli veri da 44px e non righe di testo con un link dentro. Pillole, come ogni
   comando, dal 7 ottobre 2026. */
.alternative {
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
}

.alternative li + li { margin-top: 0.5rem; }

.alternative a {
    display: flex;
    align-items: center;
    min-height: var(--h-comando);
    padding: 0.5rem 1rem;
    border: 1px solid var(--testo);
    border-radius: var(--pillola);
    color: var(--nero);
    text-decoration: none;
}

/* ── Quando non c'è posto ─────────────────────────────────────────────────────
   Proposta «B» della tavola «Quando è tutto pieno», scelta dal committente il 15
   settembre 2026: un cartello con il titolo, i posti liberi più vicini, e sotto
   i due pulsanti per chiedere al circolo.

   Il RAGGIO GRANDE non è un vezzo: il cartello contiene righe e pulsanti che hanno
   già il loro raggio, ed è esattamente il mestiere di --raggio-grande (vedi :root).
   Nessuna ombra: sta nel flusso della pagina, non sopra. */
.cartello-pieno {
    margin: 0.75rem 0 0;
    padding: 1.1rem 1rem 1rem;
    border: 1px solid var(--sabbia);
    border-radius: var(--raggio-grande);
    background: var(--bianco);
}

.cartello-titolo {
    margin: 0;
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--nero);
    text-wrap: balance;
}

/* --testo su bianco, 5,02:1: è la riga che accompagna, il titolo è la notizia. */
.cartello-testo { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--testo); }

/* I posti vicini hanno il verde di «libero» della griglia perché dicono la stessa
   cosa: qui c'è posto. --nero su --libero fa 18,67:1, e la parola c'è comunque. */
.vicini { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.4rem; }

.vicino {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 52px;
    padding: 0.5rem 0.85rem;
    background: var(--libero);
    border: 1px solid var(--libero-bordo);
    border-radius: var(--raggio);
    color: var(--nero);
    text-decoration: none;
}

.vicino:hover { filter: brightness(0.95); }   /* la misura del §5, non una sua sfumatura */

.vicino-testo { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.vicino-testo b { font-family: var(--font-titoli); font-size: 0.95rem; }
.vicino-testo small { font-family: var(--font-accento); font-size: 0.85rem; color: var(--nero); }
.freccia-vicino { width: 18px; height: 18px; flex: none; }

/* «Oppure chiedi al circolo»: una riga sola sopra i pulsanti, quando sono il ripiego. */
.oppure {
    margin: 1rem 0 0;
    font-family: var(--font-accento);
    font-size: 0.85rem;
    color: var(--testo);
}

/* ── Chiama e WhatsApp (Pages/Shared/_Contatti.cshtml) ───────────────────────────
   AFFIANCATI E CON I COLORI DELLA TESTATA, apposta: bianco su --nero 20,46:1 per
   chiamare, --nero su --sabbia 12,74:1 per scrivere. Sono gli stessi due pulsanti che
   stanno in cima a ogni pagina, e si riconoscono per quello.

   56px e non 44: portano due righe, il nome del gesto e il numero. */
.contatti { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 1rem; }
.oppure + .contatti { margin-top: 0.4rem; }

/* Con un recapito solo, il pulsante prende tutta la riga invece di restare a metà. */
.contatti--uno { grid-template-columns: 1fr; }

/* Pillole come in testata, dal 7 ottobre 2026: il rientro a sinistra è più largo del
   raggio di un contenitore, perché l'icona non finisca sulla curva. */
.contatto {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    min-height: 56px;
    padding: 0.55rem 1rem 0.55rem 1.125rem;
    border-radius: var(--pillola);
    font-family: var(--font-accento);
    line-height: 1.15;
    text-decoration: none;
}

/* ⚠️ Sul pulsante NERO il passaggio del mouse non si vede, e non è un difetto da
   inseguire: brightness(0.95) su #070400 resta #070400. Schiarirlo o tingerlo vorrebbe
   dire un colore fuori palette (§1) per un segnale che sul telefono non esiste. Il
   cursore e il contorno del fuoco dicono già che si preme. */
.contatto:hover { filter: brightness(0.95); }

.contatto span { display: flex; flex-direction: column; min-width: 0; }
.contatto b { font-size: 1rem; }
/* ⚠️ IL NUMERO NON SI TRONCA. Con nowrap ed ellipsis, a 360px un cellulare
   («+39 333 477 0001») usciva come «+39 333 477 0…»: un recapito tagliato è peggio di un
   recapito su due righe, e il pulsante è alto abbastanza per contenerle. Va a capo fra i
   gruppi di cifre; anywhere è la rete di sicurezza per un numero scritto tutto attaccato. */
.contatto small { font-size: 0.8rem; overflow-wrap: anywhere; }

.icona-contatto { width: 20px; height: 20px; flex: none; }

.contatto--telefono { background: var(--nero); color: var(--bianco); }
.contatto--telefono small { color: var(--sabbia); }   /* 12,74:1 su --nero */
.contatto--whatsapp { background: var(--sabbia); color: var(--nero); }

/* Nella procedura i pulsanti vengono dopo l'elenco delle alternative o dopo la frase
   color sabbia: lo stacco lo danno loro, non il margine di chi sta sopra. */
.nessun-libero + .contatti,
.alternative + .contatti { margin-top: 1rem; }

/* ── I campi, in fondo ───────────────────────────────────────────────────────
   Le caratteristiche stavano nelle intestazioni della griglia. Qui i campi non sono
   colonne: si descrivono una volta sola, sotto le proposte. */

/* ⚠️ RESTA SU BIANCO, e non è timidezza: il disegno approvato la voleva su fondo
   scuro, ma su qualunque fondo tinto le voci dovrebbero diventare nere — il grigio di
   corpo fa 3,12:1 su sabbia e --terra-testo ne fa 3,66. Cioè si perderebbe la TERRA
   ROSSA sul terreno, che è una scelta del committente dell'8 settembre. Un fondo in
   cambio di un'informazione è un cattivo scambio. La fine della pagina la dà il titolo
   «I campi» e il piede nero del sito, che viene subito dopo. */
.campi {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--sabbia);
    /* ⚠️ È un <ul>, e si scrive come tale: chi ascolta la pagina deve sentire «elenco
       di tre campi», non tre blocchi di testo di fila. Erano <div> dentro <div>.
       Il pallino si toglie qui, la semantica di elenco la tiene role="list" nel
       markup — su alcuni lettori il list-style tolto porta via anche quella. */
    list-style: none;
}

/* ── Dove comincia e dove finisce una sezione ─────────────────────────────────
   Il committente il 10 settembre 2026: «non si capisce quando inizia e finisce una
   sezione». Era vero: il titolo pesava 0,95rem — cioè quanto il nome di un campo — e
   fra un blocco e l'altro c'era solo dello spazio, uguale allo spazio interno.

   Adesso ogni sezione si apre con lo STESSO segnale, e sono tre insieme: un filetto
   che attraversa la colonna, uno stacco sopra più che doppio di quello sotto, e un
   titolo grande abbastanza da non confondersi con il testo. Il filetto è --sabbia
   come tutti gli altri del foglio: non si aggiunge una linea nuova al vocabolario. */
/* 40px sopra, 20 di rientro e il titolo a 1,25rem: le misure della tavola «A» del 7
   ottobre 2026, che sono le stesse proporzioni di prima un filo più strette. */
.sezione {
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sabbia);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5rem;
}

/* Quello che viene subito dopo il titolo gli sta VICINO: è lo spazio interno, e deve
   essere visibilmente minore di quello che separa una sezione dall'altra. Senza questa
   riga il titolo galleggia a metà fra la sezione che chiude e quella che apre. */
.sezione + * { margin-top: 0.75rem; }

/* Le schede dei campi hanno un filetto loro, che qui sarebbe il secondo di fila. */
.sezione + .campi { padding-top: 0; border-top: none; }

/* .sezione--prima non c'è più: dal 7 ottobre 2026 il titolo della giornata è
   .frase-giornata, sotto i selettori. */

/* Perché non si sta guardando oggi: «per oggi non si comincia più», «oggi è tutto
   prenotato». Sta sotto il titolo della giornata, oppure da sola quando non c'è
   nessuna partita né oggi né domani — e in quel caso è l'unica frase che spiega
   perché la pagina offre un telefono invece di un'ora. */
/* Sta sotto il titolo della giornata e sopra le schede, che hanno il loro margine
   sopra: qui basta lo stacco dal titolo. È lo stato che vede chiunque apra il sito
   dopo l'ultima partenza della giornata, cioè tutte le sere. */
.motivo {
    margin: 0.5rem 0 0;
    font-family: var(--font-testo);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--nero);
}

/* ── Il titolo della giornata ─────────────────────────────────────────────────
   «Domani di mattina» a sinistra, «1 ORA · SINGOLO» a destra: la frase che chiude i
   selettori e apre le schede (tavola «A», 7 ottobre 2026). Prima era un «Oggi» da
   solo, sopra la striscia, che ripeteva la tessera accesa. Le due parti vanno a capo
   l'una sotto l'altra quando non ci stanno — «Mercoledì 30 settembre di pomeriggio»
   sul telefono non ci sta — invece di sovrapporsi. */
.frase-giornata {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
    margin: 1rem 0 0;
    font-size: 1.25rem;
    line-height: 1.5rem;
}

.frase-dettaglio {
    font-family: var(--font-testo);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--testo);   /* 5,02:1 su bianco */
}

/* ── I selettori della home ───────────────────────────────────────────────────
   Proposta «C», scelta dal committente il 14 settembre 2026: la striscia dei giorni,
   poi durata, partita e momento a segmenti. Stessi colori delle pastiglie della
   ricerca — acceso = NERO PIENO con il pallino colorato e il grassetto, dal 7 ottobre
   2026 (era arancio col bordo nero) — perché sono la stessa scelta fatta da un'altra
   pagina.

   ⚠️ STA DOPO .giorni E .giorno, E DEVE: la striscia riusa quelle tessere e ne cambia
   la disposizione con classi della stessa forza. Messo prima nel foglio, vinceva la
   griglia auto-fill della ricerca e le sette tessere andavano su due righe.
   ───────────────────────────────────────────────────────────────────────────── */

/* Il titolo sta sotto l'intestazione appiccicosa: senza questo margine, arrivando
   dall'ancora #partite dopo un tocco, «Oggi» finirebbe nascosto dietro il logo. */
.vetrina { scroll-margin-top: 5rem; }

/* Le misure della tavola «A» del 7 ottobre 2026: 16px dalla scheda del circolo, 8 fra
   una fila e l'altra. In tutto 184px a 375 — striscia 64, durata 52, coppia 52 — e il
   titolo della giornata viene dopo, non prima. */
.selettori {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

/* Le tre scelte sotto la striscia: larghe quanto servono, e al CENTRO. Chiesto dal
   committente il 14 settembre 2026 guardando il desktop: la striscia prende la
   larghezza, i segmenti restano a misura di pollice anche su uno schermo largo. */
.selettori-scelte {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
}

/* ⚠️ SETTE COLONNE E NIENTE SCORRIMENTO DI LATO, anche se la tavola lo disegnava.
   L'area pubblica lo scorrimento laterale l'ha tolto apposta — nasconde più di quanto
   mostri (vedi .campi--schede) — e qui non serve: sette tessere a 360px stanno a
   ~43px di larghezza per 56 di altezza, sopra i 44px d'altezza del §4. Così si vede
   tutta la settimana, compreso il sabato, senza sapere che bisogna trascinare.
   Colonne da minmax(0, 1fr): senza lo zero una sigla lunga allargherebbe la sua
   colonna e spingerebbe l'ultima fuori.

   ⚠️ IL GIORNO SCELTO È PIÙ ALTO DEGLI ALTRI (tavola «A», 7 ottobre 2026): 64px contro
   56, e le altre tessere restano appoggiate in basso. La fila ha l'altezza FISSA della
   tessera scelta, così accendere un altro giorno non sposta niente sotto di lei. */
.giorni.giorni--striscia {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: end;
    gap: 0.25rem;
    height: 64px;
    padding: 0;
    position: relative;
    container-type: inline-size;
}

/* ┌───────────────────────────────────────────────────────────────────────────┐
   │ QUANTI GIORNI SI VEDONO LO DECIDE LA LARGHEZZA, e la pagina li scrive tutti. │
   │                                                                           │
   │ Richiesta del committente del 14 settembre 2026: «metterei i giorni finché │
   │ lo schermo lo permette». Sotto i 35rem di striscia se ne vedono sette, poi │
   │ uno in più ogni 4,45rem — una tessera da 4,2 più lo spazio — fino ai       │
   │ quindici che la home offre (DisponibilitaService.GiorniVetrina). Nel       │
   │ contenitore largo 1100px del sito ci stanno tutti e quindici.              │
   │                                                                           │
   │ ⚠️ CONTAINER QUERY E NON MEDIA QUERY: conta la larghezza della striscia,   │
   │ non quella della finestra — la finestra è larga uguale con o senza la      │
   │ barra laterale di un tablet.                                               │
   │                                                                           │
   │ ⚠️ «of .giorno» NEL nth-child, e non per scrupolo: con lo script acceso il  │
   │ primo figlio della striscia è il CURSORE, e un nth-child semplice avrebbe  │
   │ contato lui e nascosto un giorno di troppo.                               │
   │                                                                           │
   │ ⚠️ display:none E NON overflow:hidden. Una tessera tagliata fuori resta un │
   │ collegamento che la tastiera raggiunge senza vederlo.                     │
   └───────────────────────────────────────────────────────────────────────────┘ */
.giorni--striscia > .giorno:nth-child(n + 8 of .giorno) { display: none; }

@container (min-width: 35.35rem) { .giorni--striscia > .giorno:nth-child(8 of .giorno) { display: flex; } }
@container (min-width: 39.8rem) { .giorni--striscia > .giorno:nth-child(9 of .giorno) { display: flex; } }
@container (min-width: 44.25rem) { .giorni--striscia > .giorno:nth-child(10 of .giorno) { display: flex; } }
@container (min-width: 48.7rem) { .giorni--striscia > .giorno:nth-child(11 of .giorno) { display: flex; } }
@container (min-width: 53.15rem) { .giorni--striscia > .giorno:nth-child(12 of .giorno) { display: flex; } }
@container (min-width: 57.6rem) { .giorni--striscia > .giorno:nth-child(13 of .giorno) { display: flex; } }
@container (min-width: 62.05rem) { .giorni--striscia > .giorno:nth-child(14 of .giorno) { display: flex; } }
@container (min-width: 66.5rem) { .giorni--striscia > .giorno:nth-child(15 of .giorno) { display: flex; } }

/* ⚠️ IL GIORNO SCELTO SI VEDE SEMPRE, anche oltre quelli che la larghezza concede. Un
   collegamento a lunedì 28 mandato da un desktop e aperto su un telefono mostrerebbe
   «Lunedì 28 settembre» come titolo e nessuna tessera accesa sotto: la striscia
   direbbe una cosa e il titolo un'altra. Così ne compare una in più, un po' più
   stretta. La specificità alta serve a battere le regole qui sopra. */
.giorni--striscia > .giorno.giorno--on:nth-child(n of .giorno) { display: flex; }

.giorni--striscia .giorno { height: 56px; min-height: 0; padding: 0 0.1rem; min-width: 0; }

.giorni--striscia .giorno--on { height: 64px; }

/* Oggi, finito. Resta al suo posto — togliere la prima tessera farebbe scivolare tutte
   le altre sotto il dito — ma spento, tratteggiato, e con la parola. */
.giorno--finito {
    background: var(--non-prenot);
    border-style: dashed;
    color: var(--testo);
}

.giorno--finito .nn { font-weight: 400; }

.giorno--finito .finito {
    font-family: var(--font-accento);
    font-size: 0.7rem;
    line-height: 1.1;
}

/* La pista: bianca, bordo grigio, 52px (3 + 44 + 3 e il bordo). Il bordo sta sotto i
   3:1 e va bene così (DESIGN.md §10.5): ogni segmento porta la sua parola.

   ⚠️ FLEX E NON PIÙ GRIGLIA A PARTI UGUALI, dal 7 ottobre 2026 (tavola «A»): nelle due
   coppie ogni segmento prende la larghezza della sua parola più una parte uguale di
   quello che avanza, così «Pomeriggio» ha lo spazio che gli serve e «Mattino» non ne
   spreca. Le durate invece sono alternative dello stesso peso, e restano a parti
   uguali (.segmenti--pari). */
.segmenti {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--grigio);
    border-radius: var(--pillola);
    background: var(--bianco);
}

.segmento {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: var(--h-comando);
    padding: 0 0.3rem;
    border: 1px solid transparent;
    border-radius: var(--pillola);
    color: var(--nero);
    font-family: var(--font-testo);
    font-size: 0.9rem;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.18s var(--curva);
}

.segmenti--pari .segmento { flex: 1 1 0; }

/* Lo scelto nero pieno col pallino colorato PRIMA della parola, come nella tavola: il
   pallino c'è solo sullo scelto, ed è il terzo segnale dopo il fondo e il peso (§7).
   Vedi .giorno--on per la ragione del nero. */
.segmento--on {
    background: var(--nero);
    border-color: var(--nero);
    color: var(--bianco);
    font-weight: 700;
}

.segmento--on::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--pallina);
}

a.segmento:not(.segmento--on):hover,
a.segmento:not(.segmento--on):focus-visible { background: var(--libero); }

.segmento:focus-visible { outline-offset: 1px; }

/* Il mattino di oggi, finito: la parola e sotto «finito», in colonna. --testo sul
   bianco del contenitore: 5,02:1. */
.segmento--spento { flex-direction: column; color: var(--testo); }

.segmento--spento small { font-size: 0.7rem; }

/* ⚠️ DUE PARTI E NON DUE METÀ. «Singolo | Doppio» sono sette lettere al massimo,
   «Mattino | Pomeriggio» dieci: a metà esatta, a 360px, «Pomeriggio» restava con
   ~66px per 71 di testo e usciva dal suo segmento. Le proporzioni sono quelle della
   tavola del 7 ottobre 2026, 150 a 185; misurato con i file veri di Lato, a 360px la
   pista di destra ha 167px utili e «Mattino | ● Pomeriggio» ne vuole 160, quella di
   sinistra 133 e «● Singolo | Doppio» 129. Il rientro dei segmenti (0,3rem) è il
   margine che resta: alzarlo fa uscire le parole. Sotto i 22rem si torna a una
   colonna. */
.coppia-segmenti {
    display: grid;
    grid-template-columns: minmax(0, 150fr) minmax(0, 185fr);
    gap: 0.5rem;
}

@media (max-width: 22rem) {
    .coppia-segmenti { grid-template-columns: 1fr; }
}

/* .altro-momento («Di mattina qualcosa c'è →») non c'è più: dal 15 settembre 2026 è la
   prima riga dei posti vicini, dentro .cartello-pieno. */

/* ── Il cursore che scivola ───────────────────────────────────────────────────
   Esiste SOLO con wwwroot/js/selettori.js, che mette .con-cursore su <html> e un
   <span class="cursore"> dentro ogni gruppo. Senza lo script tutto questo non si
   applica, e la scelta accesa resta vestita dalle sue regole qui sopra.

   ⚠️ IL CURSORE STA SOTTO, NON SOPRA. È lui ad avere il fondo; la scelta accesa
   diventa trasparente e ci resta scritta sopra in grassetto. Messo sopra, coprirebbe
   la parola mentre scivola — cioè proprio mentre si sta guardando dove va.

   ⚠️ LE TESSERE DEI GIORNI DIVENTANO TRASPARENTI TUTTE, non solo quella accesa: su
   fondo bianco non cambia niente, ma una tessera bianca coprirebbe il cursore mentre
   ci passa sotto, e scivolando da lunedì a sabato sparirebbe per quattro tessere.

   ┌───────────────────────────────────────────────────────────────────────────┐
   │ ⚠️ DAL 7 OTTOBRE 2026 IL CURSORE È NERO, E IL TESTO SOPRA CAMBIA COLORE.   │
   │                                                                           │
   │ Con il cursore arancio la parola restava nera su tutti e due i fondi, e    │
   │ poteva cambiare di scatto. Sul nero deve diventare bianca, e cambiata di   │
   │ scatto al tocco sarebbe bianca sul bianco finché il cursore non arriva —   │
   │ cioè sparirebbe proprio la scelta appena fatta. Quindi il colore della     │
   │ parola, della sigla e il pallino seguono il cursore con la STESSA durata e │
   │ la STESSA curva: la parola schiarisce mentre il nero le arriva sotto.      │
   │ È l'unico posto del foglio dove il colore di un testo transita, ed è per   │
   │ restare leggibile, non per decorare. Con meno movimento la durata va a     │
   │ zero insieme a quella del cursore.                                         │
   └───────────────────────────────────────────────────────────────────────────┘
   ───────────────────────────────────────────────────────────────────────────── */
.segmenti { position: relative; }

.cursore {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: var(--nero);
    border: 1px solid var(--nero);
    pointer-events: none;
    /* La stessa curva di tutto il foglio. 0,32s: abbastanza per vedere dove va,
       abbastanza poco da non far aspettare — ed è ATTESA_MINIMA in selettori.js. */
    transition:
        transform 0.32s var(--curva),
        width 0.32s var(--curva),
        height 0.32s var(--curva);
}

.cursore--fermo { transition: none; }
.cursore[hidden] { display: none; }

[data-cursore="segmento"] > .cursore { border-radius: var(--pillola); }
[data-cursore="giorno"] > .cursore { border-radius: var(--raggio); }

.con-cursore [data-cursore] > :not(.cursore) { position: relative; z-index: 1; }

.con-cursore .segmenti .segmento--on { background: transparent; border-color: transparent; }

.con-cursore .giorni--striscia .giorno:not(.giorno--finito) { background: transparent; }
.con-cursore .giorni--striscia .giorno--on { border-color: transparent; }
.con-cursore .giorni--striscia a.giorno:not(.giorno--on):hover,
.con-cursore .giorni--striscia a.giorno:not(.giorno--on):focus-visible { background: var(--libero); }

.con-cursore [data-cursore] > a,
.con-cursore [data-cursore] > a .gg {
    transition: color 0.32s var(--curva), background-color 0.18s var(--curva);
}

.con-cursore [data-cursore] > a.giorno::after { transition: opacity 0.32s var(--curva); }

/* ── Le schede in caricamento ─────────────────────────────────────────────────
   Fra il tocco e l'arrivo della vetrina nuova. Le schede NON spariscono: si
   attenuano, e gli orari diventano pastiglie vuote che luccicano — la forma di quello
   che sta per arrivare, senza le cifre vecchie che sarebbero una risposta sbagliata.

   ⚠️ I SELETTORI NON SI ATTENUANO: sono il comando appena usato, e il cursore sta
   ancora arrivando. Si attenua solo quello che sta per cambiare.
   ───────────────────────────────────────────────────────────────────────────── */
.vetrina--carica .proposte,
.vetrina--carica .motivo,
.vetrina--carica .cartello-pieno,
.vetrina--carica .nota-ricerca,
.vetrina--carica .alternative {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

.vetrina--carica .orario,
.vetrina--carica .orario--luce {
    border-color: var(--sabbia);
    background: linear-gradient(100deg, var(--occupato) 40%, var(--bianco) 50%, var(--occupato) 60%);
    background-size: 200% 100%;
    animation: luccica 0.9s linear infinite;
}

.vetrina--carica .orario * { color: transparent; }

/* Del cartellino in caricamento resta la SAGOMA: il bordo e lo strappo, color sabbia.
   Spariscono le cifre, i pallini e la fascia bianca — che coprirebbe il luccichio. */
.vetrina--carica .orario-tratta::before,
.vetrina--carica .orario-inizio::before,
.vetrina--carica .orario-fine::before { background: transparent; }

.vetrina--carica .orario-prezzo,
.vetrina--carica .orario--luce .orario-prezzo {
    background: transparent;
    border-top-color: var(--sabbia);
}

@keyframes luccica {
    from { background-position: 150% 0; }
    to { background-position: -50% 0; }
}

/* L'arrivo riparte da dove il caricamento si era fermato — 0,55 — invece che da zero:
   la vetrina nuova prende il posto della vecchia, non compare dal nulla. */
.vetrina--nuova .proposte,
.vetrina--nuova .motivo,
.vetrina--nuova .cartello-pieno,
.vetrina--nuova .nota-ricerca,
.vetrina--nuova .alternative {
    animation: arriva 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes arriva {
    from { opacity: 0.55; }
    to { opacity: 1; }
}

/* Con meno movimento: niente scivolamento e niente luccichio, ma l'attenuazione resta —
   è l'unico segnale che la pagina ha ricevuto il tocco e sta lavorando. */
@media (prefers-reduced-motion: reduce) {
    .cursore { transition: none; }
    .vetrina--carica .orario,
    .vetrina--carica .orario--luce { animation: none; background: var(--occupato); }
}

/* ── I campi in riquadri ──────────────────────────────────────────────────────
   ⚠️ NON SCORRONO DI LATO. Nel kit le pastiglie dei luoghi scorrono orizzontalmente;
   qui vanno a capo. Lo scorrimento laterale dall'area pubblica è stato tolto apposta
   misurando che nasconde più di quanto mostri, e un kit non è un motivo per rimetterlo:
   con auto-fill i campi si dispongono su una o due righe e ci sono tutti.

   Il contenuto è lo stesso del partial condiviso — nome, tariffa, luce, caratteristiche
   — perché le caratteristiche le scrive il gestore e una versione «compatta» che le
   butta via è una funzione spenta di nascosto. */
/* ⚠️ auto-FIT e non auto-fill: auto-fill crea comunque tutte le colonne che ci
   stanno, quindi con tre campi su una griglia da quattro posti restava una colonna
   fantasma e 270px di bianco a destra — mentre la ricerca, che gli stessi campi li
   mette in flex, arriva a filo. auto-fit fa collassare le tracce vuote.

   ⚠️ NIENTE margin-top QUI. Lo stacco sotto il titolo lo decide «.sezione + *», ed è
   una misura che vale per tutte le sezioni: scriverlo a zero qui lo annullava, e il
   titolo «I campi» tornava a galleggiare a metà fra la sezione che chiude e quella
   che apre — cioè il difetto che «.sezione + *» esiste per impedire. */
.campi--schede {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    padding: 0;
    border-top: none;
}

.campi--schede .scheda-campo {
    padding: 0.875rem;
    background: var(--bianco);
    border: 1px solid var(--sabbia);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}

/* ── Le proposte della prima pagina: una scheda per campo ─────────────────────
   Dal 10 settembre 2026 le partite libere si raggruppano per campo invece che per
   orario.

   ⚠️ minmax(19rem) E NON UNA COLONNA SOLA. La prima stesura era a colonna singola,
   ragionando sul telefono: su un telefono è giusta — a 375 due colonne farebbero
   170px l'una e le pastiglie andrebbero a una per riga. Ma su uno schermo largo la
   scheda diventava larga 1030px e la foto, che tiene il 3:2, usciva alta 685: mezza
   schermata per un campo. Misurato, non immaginato.

   Con 19rem si scende a una colonna sotto i ~340px utili e si sale a tre su un
   portatile, che è anche il numero dei campi: la stessa disposizione che
   .campi--schede usa già più in basso, quindi la pagina non cambia ritmo fra una
   sezione e l'altra.
   ───────────────────────────────────────────────────────────────────────────── */
.campi-proposte {
    list-style: none;
    margin: 0.625rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0.75rem;

    /* ⚠️ NIENTE `align-items: start`, e prima c'era: le schede si stiravano alla riga
       più alta invece di fermarsi al proprio contenuto. Su richiesta del committente
       del 10 settembre 2026 hanno tutte la stessa altezza — tre campi affiancati con
       tre altezze diverse si leggono come tre cose diverse, mentre sono lo stesso
       oggetto con dentro un numero diverso di orari.

       ⚠️ L'ARIA IN PIÙ RESTA IN FONDO, sotto l'ultima riga di pastiglie. Per qualche
       minuto è stata in mezzo — le pastiglie appoggiate al fondo con un margin-top
       auto, così i blocchi degli orari si allineavano fra una scheda e l'altra — e il
       committente ha scelto il contrario il 10 settembre 2026: il contenuto di ogni
       scheda resta compatto in alto, nel suo ordine, e lo spazio avanza dove avanza.

       Il prezzo di questa scelta è che gli orari non partono più dalla stessa altezza
       da una scheda all'altra. È il compromesso di ogni pareggiamento: o si allineano
       i blocchi interni, o si tiene compatto il contenuto. */
}

/* ┌───────────────────────────────────────────────────────────────────────────┐
   │ LA SCHEDA È NEUTRA, E IL COLORE ENTRA IN TRE PUNTI PICCOLI (tavola «A»,    │
   │ 7 ottobre 2026): l'etichetta del terreno, il verde dei cartellini e il    │
   │ tondo nero di «altri orari». Bianco, filo sabbia e inchiostro per il resto.│
   │                                                                           │
   │ ⚠️ LA FOTO NON ESCE PIÙ AL VIVO IN CIMA: è una miniatura da 56px accanto   │
   │ al nome. Al vivo e in 3:2 erano 227px su schede da 385, e il primo orario  │
   │ prenotabile cadeva a y=1000 su uno schermo da 812. Senza foto in cima la   │
   │ scheda non ha più bisogno di overflow, e il rientro lo dà il contenitore.  │
   │                                                                           │
   │ Raggio GRANDE e nessuna ombra: contiene cose che hanno già un raggio — la  │
   │ miniatura, i cartellini — e sta nel flusso, non sopra.                     │
   └───────────────────────────────────────────────────────────────────────────┘ */
.scheda-partite {
    padding: 0.75rem;
    background: var(--bianco);
    border: 1px solid var(--sabbia);
    border-radius: var(--raggio-grande);

    /* Flex in colonna perché la scheda, stirata all'altezza della riga, possa
       decidere DOVE mettere l'aria in più. Senza, si accumulerebbe tutta in fondo. */
    display: flex;
    flex-direction: column;
}

.scheda-partite .capo-campo {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-height: 56px;
}

/* La miniatura del campo: quadrata, 56px, raggio 10 — un contenitore dentro la scheda,
   e la scheda ha il raggio grande apposta. */
.scheda-partite .mini-campo { width: 56px; height: 56px; border-radius: var(--raggio); }

.capo-testo { flex: 1 1 auto; min-width: 0; }

/* Nome a sinistra, tariffa a destra, sulla stessa linea di base. Vanno a capo se un
   nome lungo non lascia spazio al prezzo, invece di schiacciarlo. */
.capo-riga {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 0.5rem;
}

.scheda-partite h3 {
    margin: 0;
    color: var(--nero);
    font-size: 1.125rem;
    line-height: 1.5rem;
}

/* LA TARIFFA COME NUMERO GRANDE: la cifra in Montserrat Alternates, «l'ora» in Lato
   piccolo e grigio sulla stessa linea di base. ⚠️ NERA: prima ereditava il grigio del
   corpo, mentre la stessa tariffa in «I campi» era nera — lo stesso dato in due colori. */
.tariffa {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0;
    white-space: nowrap;
}

.tariffa b {
    font-family: var(--font-nomi);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: var(--nero);
}

.tariffa span {
    font-family: var(--font-testo);
    font-size: 0.85rem;
    color: var(--testo);   /* 5,02:1 su bianco */
}

/* L'ASPETTO delle caratteristiche non si riscrive qui: colore, corpo, maiuscoletto e
   icona stanno più in basso nel foglio, su un selettore che nomina tutte e due le
   schede. Due copie degli stessi stili prima o poi dicono due cose diverse dello
   stesso campo.

   Quello che cambia è la DISPOSIZIONE, e cambia perché cambia il contenitore — la
   stessa logica di .campi--schede, che veste la stessa scheda in un altro modo.

   IN RIGA FINCHÉ CI STANNO, poi a capo: richiesta del committente del 10 settembre
   2026. Qui la scheda porta anche sei pastiglie, e tre caratteristiche incolonnate le
   rubavano tre righe di altezza per dire nove parole.

   ⚠️ Ogni voce è un inline-flex, non un inline: così una voce lunga come «spogliatoi
   vicini» va a capo INTERA, e la sua icona non resta orfana in fondo alla riga
   precedente. È il difetto che il commento sulla regola condivisa mette in guardia,
   e questa è la forma che lo evita.

   ⚠️ Il gap verticale è 0,25rem e quello orizzontale 0,625: fra due voci sulla stessa
   riga serve più stacco che fra due righe, o «Tribuna Spogliatoi vicini» si legge
   come una voce sola.

   ⚠️ LE DUE REGOLE NON STANNO QUI, dove si leggerebbero meglio: stanno più in basso,
   DOPO quelle condivise. Hanno la stessa specificità — due classi — quindi a decidere
   è l'ordine nel foglio, e scritte qui perdevano contro il `display: block`
   condiviso senza fare assolutamente niente, con la regola in bella vista nel punto
   giusto. Cercale sotto «.scheda-campo .caratteristica img». */

/* ── Le pastiglie degli orari ─────────────────────────────────────────────────
   È lo STESSO oggetto che il gestionale usa nella finestra di prenotazione: ora
   sopra, prezzo sotto, fondo verde chiaro col bordo. Chi lavora al circolo lo
   riconosce, e l'ospite legge il prezzo di QUELLA partita su QUEL campo invece di
   un «da 14,00 €» vero per il campo più economico e falso per gli altri due.

   ⚠️ minmax(5.5rem) E NON 4.5, e il numero l'ha deciso la misura: a 4,5rem su un
   telefono da 375 ne entravano QUATTRO per riga, e gli orari uscivano 4 + 1 — l'ultima
   da sola su una riga tutta sua. A 5,5rem ne entrano TRE, e i sei che la pagina mostra
   (IndexModel.QuantiOrari) fanno due righe piene, col collegamento «altri N» che chiude
   il blocco a tutta larghezza.

   ⚠️ I DUE NUMERI SONO LEGATI: quante ne entrano per riga sta qui, quante se ne
   mostrano sta in IndexModel. Cambiarne uno senza guardare l'altro rimette il buco in
   fondo al blocco.
   ───────────────────────────────────────────────────────────────────────────── */
.orari-campo {
    list-style: none;
    margin: 0.625rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.375rem;
}

/* ── Il cartellino dell'orario ────────────────────────────────────────────────
   Scelto dal committente il 14 settembre 2026 fra quattro proposte disegnate: sopra
   QUANDO, con i due orari uniti da una tratta; sotto uno strappo tratteggiato e QUANTO,
   nero su una fascia bianca. Prima erano tre righe centrate di tre misure diverse, che
   si leggevano come una lista, con il prezzo grigio che si perdeva proprio dove serviva.

   ⚠️ LA LUCE CAMBIA SOLO LA FASCIA DEL PREZZO, non tutta la pastiglia: è il prezzo che
   la luce fa salire. E la dice con una lampadina, non solo con la tinta (DESIGN.md §7).

   ⚠️ DAL 7 OTTOBRE 2026 (tavola «A») IL PREZZO CHE SI RIPETE SI ATTENUA. Sei «16,00 €»
   identici per campo facevano un muro, e niente sporgeva: adesso il prezzo normale è
   grigio di corpo, in tondo (5,02:1 sul bianco), e torna nero e in grassetto solo
   dove cambia — con la luce, accanto alla lampadina. È la regola che la ricerca usa
   già per le cifre che ripetono. L'inizio è in Montserrat Alternates: è un numero.
   72px in tutto: 46 per la tratta, 24 per lo strappo, e il bordo.
   ───────────────────────────────────────────────────────────────────────────── */
.orario {
    display: flex;
    flex-direction: column;
    /* L'altezza della tavola. È un minimo, non un'altezza fissa: con il testo
       ingrandito dal telefono il cartellino cresce invece di tagliare le cifre. */
    min-height: 4.5rem;
    overflow: hidden;
    background: var(--libero);
    border: 1px solid var(--libero-bordo);
    border-radius: var(--raggio);
    color: var(--nero);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    .orario:hover { border-color: var(--nero); }
    .orario:hover .orario-prezzo { border-top-color: var(--nero); }
}

.orario-quando {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

/* ┌───────────────────────────────────────────────────────────────────────────┐
   │ LA TRATTA: un pallino all'inizio, uno alla fine, una linea fra i due.     │
   │                                                                           │
   │ ⚠️ LE INTERLINEE SONO IN rem, SCRITTE, e non «1.1» come altrove. I pallini │
   │ stanno a metà di ogni riga, e la metà di una riga si conosce solo se la   │
   │ riga ha un'altezza fissa: con un'interlinea relativa basterebbe un        │
   │ carattere di ripiego, o un testo ingrandito dal telefono, per staccare i  │
   │ pallini dalle cifre. È il punto che il revisore aveva segnato fragile     │
   │ nella proposta «B», dove i margini erano calcolati da dimensioni e        │
   │ interlinee: qui ogni misura è una sola, e le altre la leggono.            │
   └───────────────────────────────────────────────────────────────────────────┘ */
.orario-tratta {
    --riga-inizio: 1.25rem;
    --riga-fine: 1rem;
    --pallino: 5px;

    position: relative;
    display: grid;
    gap: 0.125rem;
    padding-left: calc(var(--pallino) + 0.3125rem);
}

/* La linea: dal centro della riga d'inizio al centro di quella di fine. */
.orario-tratta::before {
    content: "";
    position: absolute;
    left: calc(var(--pallino) / 2 - 0.5px);
    top: calc(var(--riga-inizio) / 2);
    bottom: calc(var(--riga-fine) / 2);
    width: 1px;
    background: var(--nero);
}

.orario-inizio,
.orario-fine {
    position: relative;
    display: block;
}

.orario-inizio::before,
.orario-fine::before {
    content: "";
    position: absolute;
    left: calc(-1 * (var(--pallino) + 0.3125rem));
    top: 50%;
    width: var(--pallino);
    height: var(--pallino);
    margin-top: calc(var(--pallino) / -2);
    border-radius: 50%;
    background: var(--nero);
}

.orario-inizio {
    font-family: var(--font-nomi);
    font-size: 1rem;
    font-weight: 700;
    line-height: var(--riga-inizio);
}

.orario-fine {
    font-family: var(--font-testo);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: var(--riga-fine);
}

/* Lo strappo e il prezzo, in Lato: qui il prezzo è una riga di servizio sotto l'ora,
   non il numero grande della scheda. Grigio di corpo in tondo quando ripete — è il
   caso normale — e nero in grassetto con la luce, dove cambia (vedi sopra). */
.orario-prezzo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    min-height: 1.5rem;
    padding: 0 0.1875rem;
    background: var(--bianco);
    border-top: 1px dashed var(--libero-bordo);
    font-family: var(--font-testo);
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--testo);
    white-space: nowrap;
}

.orario-lampadina {
    flex: none;
    width: 0.875rem;
    height: 0.875rem;
}

/* Con la luce il prezzo è la notizia: nero (18,61:1 sulla fascia) e in grassetto. La
   fascia resta d'ambra, la tinta della luce; il filetto era arancio ed è sabbia dal 19
   ottobre 2026: il giallo pallina è dell'azione, e qui non c'è niente da premere. */
.orario--luce .orario-prezzo {
    background: #FDF3E3;
    border-top-color: var(--sabbia);
    color: var(--nero);
    font-weight: 700;
}

/* Contrasto elevato di Windows: gli sfondi dei pallini e della linea spariscono, i
   bordi restano. */
@media (forced-colors: active) {
    .orario-tratta::before { background: none; border-left: 1px solid CanvasText; }
    .orario-inizio::before,
    .orario-fine::before { background: none; border: 2.5px solid CanvasText; }
}

.riga-altri { grid-column: 1 / -1; }

/* «altri 6 orari» con il tondo nero: una pillola da 44 col bordo grigio, che regge
   perché il comando ha la sua parola e il suo segno (§10.5). Era un riquadro
   tratteggiato con un «→» di sistema.

   ⚠️ CON IL CONTENITORE NEL SELETTORE, ed è una correzione: la ricerca aveva un
   <p class="altri-orari"> suo («Ci sono altri 12 orari più tardi.», tolto il 7
   ottobre 2026), e questa regola scritta col solo nome della classe vestiva anche
   quella frase da riquadro. Resta così: il nome è generico, e ritornerà. */
.orari-campo .altri-orari {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: var(--h-comando);
    margin: 0;
    padding: 0 4px 0 1rem;
    border: 1px solid var(--grigio);
    border-radius: var(--pillola);
    color: var(--nero);
    text-decoration: none;
    font-family: var(--font-testo);
    font-size: 0.875rem;
    font-weight: 700;
}

.orari-campo .altri-orari:hover { background: var(--libero); }

/* «altri N orari» apre gli orari SOTTO, nella stessa scheda (7 ottobre 2026): è il
   <summary> di un <details>, quindi niente triangolino di serie — la freccia giù nel
   tondo nero dice già «si apre qui». Aperto dice «meno orari» e la freccia si gira. */
.altri-dettaglio > summary { list-style: none; cursor: pointer; }
.altri-dettaglio > summary::-webkit-details-marker { display: none; }

.altri-dettaglio[open] .altri-chiuso,
.altri-dettaglio:not([open]) .altri-aperto { display: none; }

.altri-dettaglio .tondo-vai svg { transition: transform 150ms ease-out; }
.altri-dettaglio[open] .tondo-vai svg { transform: rotate(180deg); }

/* Gli orari aperti sono la stessa griglia dei primi sei: tre per riga sul telefono. */
.orari-campo--altri { margin-top: 0.5rem; }

/* Aprendo, gli orari ENTRANO uno dopo l'altro (committente, 7 ottobre 2026): una
   dissolvenza con uno scivolamento di 6px dall'alto, 180ms ciascuno e 20ms di stacco,
   fermato all'ottavo — in tutto meno di 350ms anche con dieci orari. Si animano solo
   opacity e transform, come vuole il §6 di DESIGN.md: l'altezza della scheda cambia
   di colpo, e sono i cartellini a dire che cosa è comparso. «backwards» li tiene
   invisibili durante l'attesa, invece di mostrarli e poi farli ripartire. */
@keyframes orario-entra {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

.altri-dettaglio[open] .orari-campo--altri > li { animation: orario-entra 180ms ease-out backwards; }
.altri-dettaglio[open] .orari-campo--altri > li:nth-child(2) { animation-delay: 20ms; }
.altri-dettaglio[open] .orari-campo--altri > li:nth-child(3) { animation-delay: 40ms; }
.altri-dettaglio[open] .orari-campo--altri > li:nth-child(4) { animation-delay: 60ms; }
.altri-dettaglio[open] .orari-campo--altri > li:nth-child(5) { animation-delay: 80ms; }
.altri-dettaglio[open] .orari-campo--altri > li:nth-child(6) { animation-delay: 100ms; }
.altri-dettaglio[open] .orari-campo--altri > li:nth-child(7) { animation-delay: 120ms; }
.altri-dettaglio[open] .orari-campo--altri > li:nth-child(n+8) { animation-delay: 140ms; }

/* Chiudendo, gli orari ESCONO (committente, 7 ottobre 2026): lo stesso scivolamento al
   contrario, più rapido — 140ms, perché chi chiude ha già deciso — e con lo stacco
   rovesciato, dall'ultimo al primo, fermato a 90ms. altri-orari.js trattiene la
   chiusura finché il primo orario, che esce per ultimo, non ha finito.

   ⚠️ LE REGOLE PORTANO «.altri-dettaglio» DUE VOLTE, ed è voluto: devono battere quelle
   dell'entrata qui sopra, che hanno [open] e :nth-child e fissano i ritardi. Con la
   stessa forza vincono perché vengono dopo. */
@keyframes orario-esce {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-6px); }
}

.altri-dettaglio.altri-dettaglio--chiude[open] .orari-campo--altri > li {
    animation: orario-esce 140ms ease-in forwards;
    animation-delay: 90ms;
}
.altri-dettaglio.altri-dettaglio--chiude[open] .orari-campo--altri > li:nth-last-child(1) { animation-delay: 0ms; }
.altri-dettaglio.altri-dettaglio--chiude[open] .orari-campo--altri > li:nth-last-child(2) { animation-delay: 15ms; }
.altri-dettaglio.altri-dettaglio--chiude[open] .orari-campo--altri > li:nth-last-child(3) { animation-delay: 30ms; }
.altri-dettaglio.altri-dettaglio--chiude[open] .orari-campo--altri > li:nth-last-child(4) { animation-delay: 45ms; }
.altri-dettaglio.altri-dettaglio--chiude[open] .orari-campo--altri > li:nth-last-child(5) { animation-delay: 60ms; }
.altri-dettaglio.altri-dettaglio--chiude[open] .orari-campo--altri > li:nth-last-child(6) { animation-delay: 75ms; }

/* Mentre escono, il comando dice già come sarà: «altri N orari» e la freccia giù. */
.altri-dettaglio.altri-dettaglio--chiude[open] .altri-chiuso { display: inline; }
.altri-dettaglio.altri-dettaglio--chiude[open] .altri-aperto { display: none; }
.altri-dettaglio.altri-dettaglio--chiude[open] .tondo-vai svg { transform: none; }

/* ⚠️ Con meno movimento niente entrata né uscita, nemmeno accorciate: la regola generale
   porta a zero le durate ma NON i ritardi, e con «backwards» l'ultimo orario resterebbe
   invisibile per 140ms. La chiusura, lì, non la trattiene nemmeno lo script. */
@media (prefers-reduced-motion: reduce) {
    .altri-dettaglio[open] .orari-campo--altri > li,
    .altri-dettaglio.altri-dettaglio--chiude[open] .orari-campo--altri > li { animation: none; }
}

/* Quando una scheda è aperta, le altre NON si stirano con lei (committente, 7 ottobre
   2026): altri-orari.js ferma la loro altezza a quella di prima e accende questa
   classe; senza lo script, ognuna prende la sua altezza naturale. Richiuse tutte, la
   classe se ne va e le schede tornano pari, come chiesto il 10 settembre. */
.campi-proposte--una-aperta { align-items: start; }

.niente-campo {
    margin: 0.625rem 0 0;
    font-size: 0.85rem;
    color: var(--testo);
}

.scheda-campo { flex: 1 1 14rem; }

/* ── La foto del campo ────────────────────────────────────────────────────────
   3/2, e il ritaglio lo fa `cover`: il gestore carica quello che ha, e la fila di
   schede resta allineata comunque. Il file su disco conserva le proporzioni sue —
   il server ridimensiona e non ritaglia — quindi qui si sceglie l'inquadratura, non
   la si decide per sempre.

   ⚠️ Le proporzioni sono DICHIARATE, e servono prima che l'immagine arrivi: con
   loading="lazy" la foto entra mentre si scorre, e senza `aspect-ratio` la riga
   sotto salterebbe di 160px sotto il dito di chi sta leggendo.
   ───────────────────────────────────────────────────────────────────────────── */
.foto-scheda {
    display: block;
    width: 100%;

    /* ⚠️ `height: auto` NON E' DI CONTORNO, tiene in piedi la riga sopra. Gli
       attributi width/height del markup sono suggerimenti di stile a tutti gli
       effetti: senza questa riga vince `height: 213px` dell'attributo, e
       `aspect-ratio` si applica solo quando l'altezza e' auto — quindi veniva
       ignorato. Nella ricerca la foto usciva 309×213 invece di 309×206; in prima
       pagina, dove la larghezza e' auto, il verso si ribaltava e la foto veniva
       calcolata dall'altezza: 319,5px in una scheda da 313, cioe' SBORDAVA di 6px
       oltre il bordo destro. Misurato, non dedotto. */
    height: auto;

    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--raggio);
    margin-bottom: 0.625rem;

    /* Un colore del circolo, non il bianco del browser, nel momento fra il riquadro
       vuoto e i pixel decodificati. ⚠️ Era var(--sfondo), che :root non ha mai
       definito: il fondo restava trasparente, e scorrendo si vedeva un buco bianco. */
    background: var(--sabbia);
}

/* IN PRIMA PAGINA LA FOTO E' IL BORDO SUPERIORE DELLA SCHEDA, non un riquadro
   dentro il riquadro.

   Li' .scheda-campo e' una superficie vera — fondo bianco, contorno sabbia, raggio
   e ombra — e una foto con i suoi angoli tondi appoggiata dentro con l'aria intorno
   sarebbe due contorni per dire una cosa sola: e' la card dentro la card che il §3
   di DESIGN.md vieta e che rende un'interfaccia riconoscibile a colpo d'occhio come
   generata.

   Esce quindi al vivo, mangiandosi il padding con i margini negativi, e tiene il
   raggio solo sopra. `calc(var(--raggio) - 1px)` e non `var(--raggio)`: il raggio
   interno di una scatola con 1px di bordo e' quello esterno meno il bordo, e senza
   la sottrazione resta un filo di bianco negli angoli alti.

   ⚠️ Vale SOLO in .campi--schede. Nella ricerca le schede stanno a filo, senza
   contorno: li' non c'e' nessun bordo in cui sfondare, e la foto resta un elemento
   della colonna. E' la stessa distinzione di forma che .campi--schede fa gia' — la
   scheda e' una, cambia l'abito (vedi SchedeCampi.Aggiunta). */
.campi--schede .foto-scheda {
    /* ⚠️ `width: calc(100% + 1.75rem)` e NON `width: auto`, ed e' la differenza fra
       un <div> e un'immagine. Su un blocco normale `auto` significa «riempi il
       contenitore», e con i margini negativi si allarga da solo; un <img> pero' e'
       un elemento SOSTITUITO, e li' `auto` significa «prendi la larghezza tua»: la
       foto usciva alla sua misura naturale, 1400px dentro una scheda da 313.
       Il calcolo e' 100% della scatola di contenuto piu' i due padding da 0,875rem
       che i margini negativi si mangiano. */
    width: calc(100% + 1.75rem);
    margin: -0.875rem -0.875rem 0.75rem;
    border-radius: calc(var(--raggio) - 1px) calc(var(--raggio) - 1px) 0 0;
}

/* Nome e tariffa sulla stessa riga, ed è una decisione: il prezzo è la cosa che
   sposta la scelta fra il Campo 1 e il Campo 3, e leggerlo qui evita di scoprirlo
   alla conferma. */
.scheda-campo .capo-campo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.scheda-campo h3 { margin: 0; color: var(--nero); font-size: 1rem; }

/* La tariffa di «I campi» è la stessa delle schede delle proposte, numero grande e
   «l'ora» piccolo (vedi .tariffa): qui un passo più piccola, perché la scheda è più
   stretta e il nome le sta accanto. */
.scheda-campo .tariffa b { font-size: 1.125rem; }

.scheda-campo .tratti,
.scheda-partite .tratti { margin: 0.375rem 0 0; padding: 0; list-style: none; }

/* ┌───────────────────────────────────────────────────────────────────────────┐
   │ LE CARATTERISTICHE, dal 7 ottobre 2026 (tavola «A»).                       │
   │                                                                           │
   │ Erano a 0,7rem, maiuscole e grigie, con l'icona da 12px a mezza opacità:   │
   │ quaranta disegni del tennis usati come puntini che non si vedevano. Adesso │
   │ la voce è Lato 0,8rem NERA (20,46:1) con l'icona da 16px piena — i file    │
   │ sono neri e sul bianco vanno bene così.                                    │
   │                                                                           │
   │ BLOCK, non flex, dove stanno in colonna («I campi» della ricerca): su un   │
   │ telefono «spogliatoi vicini» va a capo, e in flex l'icona resterebbe da    │
   │ sola su una riga col testo sotto. Dove stanno in riga (le schede delle     │
   │ proposte, più sotto) ogni voce è un inline-flex, e icona e testo sono due  │
   │ pezzi della stessa scatola che non si separano mai.                        │
   └───────────────────────────────────────────────────────────────────────────┘ */
.scheda-campo .caratteristica,
.scheda-partite .caratteristica {
    display: block;
    font-family: var(--font-testo);
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.375rem;
    color: var(--nero);
}

/* LA PRIMA VOCE È IL TERRENO, e diventa un'ETICHETTA: rettangolo sabbia a raggio 6,
   Lato 700 maiuscolo nero (12,74:1). Il terreno è il campo su cui si gioca, non un
   servizio accanto, e dall'8 settembre 2026 il committente lo vuole vedere per primo;
   prima lo diceva il colore della terra, adesso la forma — che si legge anche senza
   distinguere i colori.

   ⚠️ IL RAGGIO 6 VUOL DIRE «NON SI TOCCA»: la pillola resta dei comandi (§3).

   ⚠️ Il terreno lo mette in testa la scheda del campo (Campi.razor, VociDaSalvare).
   Se il gestore non ne ha scelto uno, l'etichetta tocca alla prima voce libera
   qualunque essa sia — «tribuna» in etichetta. È una forma, non un'informazione
   sbagliata, e nessun altro segnale dipende da questa regola. */
.scheda-campo .caratteristica--terreno,
.scheda-partite .caratteristica--terreno {
    display: flex;
    align-items: center;
    width: fit-content;
    height: 22px;
    padding: 0 0.5rem;
    border-radius: var(--raggio-etichetta);
    background: var(--sabbia);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Le icone sono nere di file e stanno piene accanto alla parola. Le misure stanno
   anche in width/height sul tag, cosi' la riga non salta mentre l'icona arriva. */
.scheda-campo .caratteristica img,
.scheda-partite .caratteristica img {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 5px;
}

/* «I campi» in colonna: un filo d'aria fra l'etichetta e le voci sotto. */
.scheda-campo .caratteristica--terreno { margin-bottom: 0.25rem; }

/* ── Le caratteristiche della scheda proposte: in riga ────────────────────────
   Il ragionamento sta accanto a .scheda-partite, in cima al blocco delle proposte.
   Qui c'è solo la disposizione, ed è QUI e non lassù per una ragione meccanica:
   stessa specificità delle regole condivise appena sopra, quindi vince l'ultima
   scritta. Spostarle più in alto le rende silenziosamente inefficaci.

   Il rientro laterale non serve più: dal 7 ottobre 2026 lo dà la scheda a tutto il
   suo contenuto, e le caratteristiche stanno nella colonna accanto alla miniatura.
   ───────────────────────────────────────────────────────────────────────────── */
.scheda-partite .tratti {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.625rem;
}

/* inline-flex e non inline: icona e testo sono due pezzi della stessa scatola, e una
   voce lunga va a capo intera invece di lasciare l'icona orfana sulla riga di sopra. */
.scheda-partite .caratteristica {
    display: inline-flex;
    align-items: center;
    height: 22px;
}

.scheda-partite .caratteristica img { margin-right: 5px; vertical-align: 0; }

/* Perché quel campo di sera non compare. Non è una nota di servizio: è la ragione
   per cui costa meno. Con il segno disegnato accanto — la lampadina barrata, l'orologio
   — che è decorazione: la frase dice tutto da sola. */
.scheda-campo .senza-fari,
.scheda-partite .senza-fari {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: var(--testo);
}

.scheda-partite .senza-fari {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
}

.scheda-partite .senza-fari svg { flex: none; margin-top: 1px; color: var(--nero); }

/* Nota sotto le proposte: una riga di testo, non un riquadro.
   Aveva il fondo sabbia, e da quando la scheda dei campi ce l'ha davvero erano due
   blocchi color sabbia impilati — cioè due richiami di pari peso, che è come non
   averne nessuno. Qui basta il grigio di corpo su bianco: 5,02:1.

   Si chiamava .nota-griglia e conteneva una .riga-nota per campo senza fari: quelle
   righe stanno nella scheda del campo da quando i campi non sono più colonne. */
.nota-ricerca {
    color: var(--testo);
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* La riga dei fari, con la lampadina accanto: è l'unica nota che dice un prezzo che
   cambia, e il segno la stacca dalle altre senza alzarle la voce. */
.nota-ricerca--luce {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}

.nota-ricerca--luce svg { flex: none; margin-top: 2px; color: var(--nero); }

/* Sopra l'elenco invece che sotto: vedi il commento nella vista. */
.nota-ricerca--su { margin: 0 0 0.25rem; }

/* Due note di fila sono UNA cosa, non due: con lo stacco pieno fra loro sembravano
   due sezioni da mezza riga l'una. */
.nota-ricerca + .nota-ricerca { margin-top: 0.5rem; }

.nessun-libero {
    background: var(--sabbia);
    border-radius: var(--raggio);
    padding: 1rem;
    text-align: center;
    color: var(--nero);   /* fondo colorato → testo nero, vedi .richiamo */
}

/* ── Focus ────────────────────────────────────────────────────────────────────
   Non c'era nessuna regola :focus in tutto il foglio. Niente era rotto — il
   default del browser c'era ancora — ma su un pulsante pieno o sul piede nero
   si vede pochissimo, e chi naviga da tastiera perde il segno. DESIGN.md §5.
   :focus-visible e non :focus, cosi' il contorno non compare al clic del mouse. */

:where(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid var(--nero);
    outline-offset: 2px;
}

/* Sul piede nero un contorno nero sarebbe invisibile. */
.pie :where(a, button):focus-visible { outline-color: var(--sabbia); }

/* ── Il biglietto: conferma e riepilogo ───────────────────────────────────────
   ┌───────────────────────────────────────────────────────────────────────────┐
   │ TAVOLA «B», SCELTA DAL COMMITTENTE IL 7 OTTOBRE 2026.                      │
   │                                                                           │
   │ Prendeva il posto della scheda bianca con le righe etichetta / valore. Un  │
   │ biglietto in due parti, separate da uno strappo fra due tacche:            │
   │  · sopra, la MATRICE in giallo pallina con le righe del campo: il campo in │
   │    grande, il giorno, l'orario. Testo NERO, 14,41:1 — il bianco sulla      │
   │    pallina fa 1,42, e non ci va;                                           │
   │  · sotto, sul NERO: le voci e il totale, che in pallina fa 14,41:1. È      │
   │    l'unico posto dell'area pubblica dove la pallina è un testo.            │
   │                                                                           │
   │ Le righe del campo e la pallina sono disegno: aria-hidden, e nessun testo  │
   │ dipende da loro. La sabbia chiara delle anteprime («#F6F0E6») non c'è: il  │
   │ biglietto non ne ha bisogno, e la palette non si allarga (DESIGN.md §1).   │
   └───────────────────────────────────────────────────────────────────────────┘

   ⚠️ LE TACCHE SONO DEL COLORE ESATTO DEL FONDO PAGINA, --bianco, ed è il motivo per
   cui funzionano: sono due mezzi cerchi di pagina che mordono il biglietto. Il giorno
   che il fondo cambiasse, cambiano con lui.

   NON è una superficie annidata: è UNA superficie in due colori, senza niente dentro
   che abbia il suo bordo. Il raggio è quello grande perché contiene la matrice.

   ⚠️ LA MATRICE ERA IN TERRA ROSSA, ED È GIALLO PALLINA DAL 19 OTTOBRE 2026: il
   committente l'ha scelta fra sei proposte (terra, sabbia, terra chiara, bianco,
   notte, pallina) sul canvas della grafica. È un'ECCEZIONE DICHIARATA a «un solo
   colore pieno per schermata, ed è l'azione» (DESIGN.md §1), scelta sapendo che la
   conferma ha il pulsante dello stesso colore poco sotto. Si distinguono per FORMA:
   il pulsante è una pillola col bordo nero e il gettone, la matrice un rettangolo
   senza bordo dentro il biglietto nero. Non aggiungerle un bordo né un'ombra: la
   farebbero sembrare da premere. */
.biglietto {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    border-radius: var(--raggio-grande);
    background: var(--nero);
    color: var(--bianco);
}

.matrice {
    position: relative;
    overflow: hidden;
    padding: 0.875rem 1.125rem 1rem;
    background: var(--pallina);
    color: var(--nero);
}

/* DUE RACCHETTE INCROCIATE nell'angolo della matrice, in basso a destra, nel vuoto che
   lascia il tipo di partita. Erano una pallina gialla da 14px: sulla matrice diventata
   giallo pallina il 19 ottobre 2026 non si vedeva più, e il committente ha scelto le
   racchette fra quattro proposte lo stesso giorno. Disegno (aria-hidden), nero come il
   testo: stroke currentColor, quindi segue .matrice.

   ⚠️ ANCORATE IN BASSO, non in alto come la pallina (top: 105px): sono alte 30px, e
   contate dall'alto sarebbero finite sull'orario, che arriva quasi al bordo destro sui
   telefoni da 320px. Dal basso stanno sotto la riga dell'orario, accanto a «Singolo» o
   «Doppio», che sono corti; e se il nome del campo va a capo scendono con la matrice. */
.matrice-racchette {
    position: absolute;
    right: 1rem;
    bottom: 0.5rem;
    display: block;
    color: var(--nero);
}

/* «DA CONFERMARE», «CONFERMATA»: lo stato del biglietto, come un timbro. Nero sulla
   pallina, 14,41:1. L'altezza è fissa perché la riga del campo, sotto, parte da lì. */
.matrice-occhiello {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 28px;
    margin: 0;
    font-family: var(--font-testo);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nero);
}

/* DISDETTA SI DICE CON LA PAROLA, in un'etichetta nera: bianco su nero 20,46:1. Il
   colore non è mai l'unica informazione (§7), e qui la parola è proprio la notizia.
   ⚠️ RAGGIO 6 E NON PILLOLA: si legge e non si tocca, e la pillola nell'area pubblica
   vuol dire «premimi» (decisione del 7 ottobre 2026, DESIGN.md §3). */
.stato-disdetta {
    display: inline-flex;
    align-items: center;
    margin-top: -0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--raggio-etichetta);
    background: var(--nero);
    color: var(--bianco);
}

/* Due colonne: il campo a sinistra in una casella da 86px, il quando a destra.

   ⚠️ LA CASELLA DEL CAMPO HA UN TETTO, IL 40%. Il nome lo scrive il gestore: con
   «max-content» un «Campo Centrale» si prendeva 173px su 307 e lasciava al quando 116,
   cioè meno dei 168 dell'orario «09:00 — 10:00», che usciva dal biglietto e veniva
   tagliato. Con fit-content il nome va a capo dentro il suo 40%, e per «Campo 1» non
   cambia niente: la casella resta 86px (il minimo è sulla targa). */
.matrice-griglia {
    position: relative;
    display: grid;
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    column-gap: 1.125rem;
    padding-top: 0.625rem;
}

/* LE RIGHE DEL CAMPO: una linea orizzontale sotto lo stato, una verticale fra la
   casella del campo e il quando — il «T» di una metà campo. Disegnate dalla colonna
   del quando e non da un'immagine fissa, così restano al loro posto qualunque sia la
   larghezza del biglietto e anche quando il nome del campo allarga la sua casella.
   Nere al 18% sulla pallina (erano bianche al 60% sulla terra): decorazione. */
.matrice-quando { position: relative; min-width: 0; }

.matrice-quando::before,
.matrice-quando::after {
    content: "";
    position: absolute;
    left: -1.125rem;
    background: rgb(7 4 0 / 18%);
    pointer-events: none;
}

.matrice-quando::before { top: -0.625rem; bottom: -1rem; left: calc(-1.125rem - 1.5px); width: 3px; }
.matrice-quando::after { top: -0.625rem; right: -1.125rem; height: 2px; }

.matrice-griglia > * { margin: 0; }

.casella-et {
    display: block;
    margin: 0;
    font-family: var(--font-testo);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--nero);
}

.targa {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 5.375rem;   /* la casella da 86px della tavola */
    margin: 0;
    color: var(--nero);
}

.targa-numero {
    font-family: var(--font-nomi);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 2.75rem;
    letter-spacing: -0.02em;
}

/* Un nome che non è «Campo» più un numero resta intero, nella misura di un nome. */
.targa--nome {
    font-size: 1.25rem;
    line-height: 1.5rem;
    overflow-wrap: anywhere;
}

/* L'orario della conferma: l'inizio grande, la fine leggera, la stessa tratta coi due
   pallini del cartellino della prima pagina. Le cifre a larghezza fissa. Va a capo come
   rete, se un nome di campo lungo lascia al quando meno dei suoi 168px: la fine sotto,
   invece che tagliata dal bordo del biglietto. */
.orario-grande {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    min-height: 34px;
    margin: 2px 0 0;
    color: var(--nero);
}

.og-inizio {
    font-family: var(--font-nomi);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 34px;
    font-variant-numeric: tabular-nums;
}

.og-tratta {
    position: relative;
    flex: none;
    width: 24px;
    height: 1.5px;
    background: var(--nero);
}

.og-tratta::before,
.og-tratta::after {
    content: "";
    position: absolute;
    top: -2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nero);
}

.og-tratta::before { left: -2px; }
.og-tratta::after { right: -2px; }

.og-fine {
    font-family: var(--font-testo);
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-variant-numeric: tabular-nums;
}

/* L'ora del riepilogo: una sola, grande. */
.ora-grande {
    display: block;
    margin: 2px 0 0;
    font-family: var(--font-nomi);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 34px;
    color: var(--nero);
    font-variant-numeric: tabular-nums;
}

/* Il tipo di partita si ferma prima della pallina: su un telefono stretto «1 ora e ½,
   doppio, con luce» le arriverebbe addosso, e va a capo invece di passarci sotto. */
.matrice-tipo {
    max-width: calc(100% - 1.5rem);
    margin: 0;
    font-family: var(--font-testo);
    font-size: 0.9375rem;
    line-height: 1.375rem;
    color: var(--nero);
}

/* Lo strappo: un tratteggio bianco fra due tacche, alto zero, così non aggiunge
   altezza fra le due parti. */
.strappo { position: relative; height: 0; z-index: 1; }

.strappo svg {
    position: absolute;
    left: 1.125rem;
    top: -1px;
    width: calc(100% - 2.25rem);
    height: 2px;
}

/* ⚠️ «.strappo .tacca» E NON «.tacca» DA SOLA: «.tacca» è già il segno del passo della
   procedura guidata (le tre lineette sopra la domanda, più in alto nel foglio). Scritta
   col solo nome della classe, questa regola veniva dopo e vinceva: le tre lineette
   diventavano tondi bianchi in posizione assoluta, cioè sparivano dalla guidata. */
.strappo .tacca {
    position: absolute;
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bianco);
}

.strappo .tacca--sx { left: -9px; }
.strappo .tacca--dx { right: -9px; }

/* La parte nera. Sabbia per le voci (12,74:1), pallina per il totale (14,41:1),
   grigio per le etichette piccole (8,92:1): sul nero sono le tre coppie ammesse. */
.biglietto-sotto { position: relative; padding: 1.25rem 1.125rem 1rem; }

/* LO SCONTRINO, dentro il biglietto: le voci da cui viene il totale. Non è cortesia
   — vedi il commento nella conferma — e pesa meno del totale: è la spiegazione. */
.voce-scontrino {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    font-family: var(--font-testo);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--sabbia);
}

.voce-scontrino + .voce-scontrino { margin-top: 0.25rem; }

.totale {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 0.75rem;
    margin: 0.5rem 0 0;
}

.totale span {
    font-family: var(--font-testo);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sabbia);
}

.totale b {
    font-family: var(--font-nomi);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 34px;
    color: var(--pallina);
    font-variant-numeric: tabular-nums;
}

.biglietto-nota {
    margin: 0.625rem 0 0;
    font-family: var(--font-testo);
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--sabbia);
}

/* Il riepilogo: a nome di chi a sinistra, quanto si paga a destra, in basso. */
.biglietto-righe {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.biglietto-righe p { margin: 0; }

.biglietto-chi { min-width: 0; }

.biglietto-sotto .et {
    font-family: var(--font-testo);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--grigio);   /* 8,92:1 sul nero */
}

.biglietto-sotto .val {
    margin-top: 0.25rem;
    font-family: var(--font-testo);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: var(--bianco);
    overflow-wrap: anywhere;
}

.a-destra { text-align: right; }

.biglietto-sotto .val-prezzo {
    margin-top: 2px;
    font-family: var(--font-nomi);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.875rem;
    color: var(--pallina);
    font-variant-numeric: tabular-nums;
}

/* «NIENTE» al posto della cifra, sul biglietto di una prenotazione disdetta (8 ottobre
   2026): sabbia sul nero, come la mail di disdetta. La pallina qui direbbe «c'è una cifra da
   pagare», ed è la cosa che il cliente non deve leggere. */
.biglietto-sotto .val-prezzo--niente { color: var(--sabbia); }

/* Il modulo della conferma: 24px dal biglietto, 16 fra un campo e l'altro (lo dà
   .campo-form). */
.modulo { margin-top: 1.5rem; }

/* La disdetta si riconosce dalla PAROLA, non dal colore: dal 7 ottobre 2026 sta
   nell'occhiello del biglietto (vedi .stato-disdetta). */

/* «Prenotazione disdetta. Il campo è tornato libero.»: una notizia buona, sul verde
   del sì. Come l'esito della posta, senza bordo: il fondo basta (nero su --libero,
   18,67:1). */
.richiamo-esito {
    margin: 1rem 0 0;
    padding: 0.875rem 1rem;
    border-radius: var(--raggio);
    background: var(--libero);
    color: var(--nero);
}

/* Le note sotto il biglietto: grigio di corpo sul bianco, 5,02:1. I numeri di telefono
   dentro restano collegamenti neri. */
.nota-riepilogo {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--testo);
}

.disdetta { margin-top: 1.5rem; }

.disdetta + .nota-riepilogo { margin-top: 0.5rem; }

/* Disdire è un'azione che si rimpiange: non deve somigliare al pulsante principale.
   Bordo rosso su bianco invece di un blocco pieno — si trova, ma non si preme per
   sbaglio scorrendo. #B3261E su bianco 6,54:1. PILLOLA dal 7 ottobre 2026, come ogni
   comando: il pericolo lo dice il colore insieme alla parola, non la forma. */
.pulsante-disdetta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--h-comando);
    padding: 0 1.25rem;
    background: var(--bianco);
    color: #B3261E;
    border: 1.5px solid #B3261E;
    border-radius: var(--pillola);
    font-family: var(--font-testo);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
}

.pulsante-disdetta:hover { filter: brightness(0.95); }

/* ── Dov'è finita la conferma ──────────────────────────────────────────────────

   Compare una volta sola, tornando dal modulo (RiepilogoModel.AppenaPrenotata), e
   sta SOPRA la scheda: è la notizia, la scheda è il dettaglio.

   ⚠️ HA DUE COLORI E NON È DECORAZIONE. Verde quando l'email è partita: notizia
   ricevuta, non c'è niente da fare. Ambra quando non è partita: lì il collegamento
   della pagina è l'unica chiave della prenotazione, e chi chiude la scheda del
   browser resta senza. Sono due messaggi opposti, e con lo stesso vestito il secondo
   verrebbe scorso come il primo.

   Il verde è quello delle caselle libere della griglia: nell'area pubblica è già il
   colore del sì, e non ne serve un secondo.

   Dal 7 ottobre 2026 (tavola «B») ha un'icona a sinistra — la busta, oppure il
   segnalibro quando la posta non è partita — e il verde perde il bordo: il fondo basta
   a dire «riquadro», e un bordo verde intorno a un fondo verde era una linea in più
   per dire la stessa cosa. L'ambra un bordo lo tiene: è una cosa da fare (sabbia dal
   19 ottobre 2026, era arancio).
   ───────────────────────────────────────────────────────────────────────────── */

.esito-posta {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0.875rem 1rem 0.875rem 0.875rem;
    border-radius: var(--raggio);
    background: var(--libero);
    color: var(--nero);
}

.esito-posta__icona { flex: none; display: block; margin-top: 1px; }

.esito-posta__testo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Il gap invece dei margini sui figli: qui dentro i <p> hanno spaziature diverse
       fra loro a seconda di quali compaiono, e i margini adiacenti si fondono. */
    gap: 0.375rem;
}

/* Ambra: il ramo «nessuna email». Era la tinta chiara dell'arancio del marchio, e resta:
   l'ambra dice «attenzione» senza sembrare un errore di sistema, e il giallo pallina è
   dell'azione. Il bordo è sabbia dal 19 ottobre 2026. Nero sopra, 18,76:1. */
.esito-posta--chiave {
    background: #FDF4E6;
    border: 1px solid var(--sabbia);
}

.esito-posta__capo {
    margin: 0;
    font-family: var(--font-testo);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.375rem;
    color: var(--nero);
}

/* L'indirizzo, SU UNA RIGA SUA. Va guardato lettera per lettera — è l'unico modo che
   ha chi legge di accorgersi di un refuso — e in mezzo alla frase non lo si guarda:
   in linea, a 375px, «L'abbiamo mandata a nome.cognome.1995+tag@gmail.com» si spezza
   dopo «gmail.» e l'indirizzo esce dalla riga a pezzi.

   Un filo più piccolo del titolo che lo introduce, così un indirizzo lungo ci sta
   comunque per intero. ⚠️ Dal 7 ottobre 2026 accanto c'è l'icona, e a 375px i px
   utili scendono da 327 a 281: un indirizzo da trenta caratteri ci sta ancora, uno da
   quaranta va a capo — ed è per questo che la riga sotto non si toglie.

   ⚠️ overflow-wrap: anywhere resta, per quelli più lunghi ancora: un indirizzo non ha
   spazi dove andare a capo, e senza uscirebbe dal riquadro portandosi dietro la pagina. */
.esito-posta__dove {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.95rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.esito-posta__riga {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.3125rem;
    color: var(--nero);
}

/* La terza riga: si legge se serve, non compete con le prime due. Più piccola ma
   NERA: il grigio di corpo sul verde sta a 4,58:1, cioè sul filo — e il grigio è un
   colore per il bianco (§1). Il numero dentro è in grassetto e non va a capo. */
.esito-posta__riga--fioca { font-size: 0.875rem; line-height: 1.25rem; }

.esito-posta__riga--fioca a { font-weight: 700; white-space: nowrap; }

/* ── Form ─────────────────────────────────────────────────────────────────── */

.campo-form { margin-bottom: 1rem; }

/* Due campi sulla stessa riga — nome e cognome — e si affiancano SE CI STANNO.

   auto-fit invece di un punto di rottura scritto a mano: sotto i ~300px utili la
   griglia torna a una colonna da sola, e su un telefono stretto due caselle da 130px
   sono peggio di due righe. Lo spazio verticale resta quello di .campo-form, quindi in
   colonna il modulo è identico a prima: qui si aggiunge solo la distanza fra le due
   colonne. */
.campi-affiancati {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    column-gap: 0.75rem;
}
/* Le etichette in Lato 700, nere: dal 7 ottobre 2026 il modulo è tutto in Lato, e la
   «N» alternativa di Montserrat non fa più inciampare «Nome». */
.campo-form label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: var(--nero);
}

/* La riga che dice a cosa serve un campo. Sta SOTTO la casella e non accanto
   all'etichetta: sopra allungherebbe l'etichetta e la farebbe andare a capo su un
   telefono, e un'etichetta su due righe si legge come due campi. */
.campo-form .aiuto-campo {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    color: var(--testo);
}

/* 48px (--h-campo, DESIGN.md §4): una casella si compila e ci si torna a correggere,
   quindi sta sul gradino alto. ⚠️ IL BORDO È --testo, 5,02:1, e non più --grigio
   (2,29): il bordo è l'unica cosa che dice dov'è la casella su un fondo bianco, e
   sotto i 3:1 al sole non si vede (§1, «Le soglie»). */
.campo-form input, .campo-form select, .campo-form textarea {
    width: 100%;
    min-height: var(--h-campo);
    padding: 0 0.875rem;
    border: 1px solid var(--testo);
    border-radius: var(--raggio);
    background: var(--bianco);
    color: var(--nero);
    font-family: inherit;
    font-size: 1rem;  /* sotto i 16px iOS zooma da solo al focus */
}

.campo-form textarea { padding: 0.75rem 0.875rem; }

.errore { color: #B3261E; font-size: 0.85rem; margin-top: 0.25rem; }

/* L'errore SOTTO un campo, quello che scrive asp-validation-for.
   Mancava del tutto: veniva usato in ScegliPassword e usciva con lo stile del testo di
   corpo — nessun errore, nessun avviso, solo una pagina che sembra non finita. È il
   difetto che nessuno segnala perché non rompe niente.
   Il display: block conta quanto il colore: senza, resta appiccicato al <small>
   che lo precede e si legge come parte della stessa frase. */
.errore-campo {
    display: block;
    color: #B3261E;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Honeypot anti-bot: invisibile e fuori dal flusso di tabulazione per gli umani,
   ma presente nel DOM, quindi i bot che compilano tutto ci cascano. */
.trappola {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ── Piede ────────────────────────────────────────────────────────────────────
   LA LINEA DI FONDO DI UN CAMPO, dal 7 ottobre 2026 (tavola «A»). Nero, testo sabbia
   (12,74:1) e il nome in bianco (20,46:1), una colonna sola invece di tre blocchi coi
   titoli — erano 443px su un telefono per cose già dette sopra. Nell'angolo in basso a
   destra le righe del campo all'8% e la pallina al 35%, tagliate dal bordo. Come
   decorazione la pallina compare solo così — qui, sul biglietto e nel bollo della
   cartolina — e non porta informazioni.
   ───────────────────────────────────────────────────────────────────────────── */

.pie {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1rem 1.25rem;
    background: var(--nero);
    color: var(--sabbia);
    font-size: 0.9375rem;
    line-height: 1.375rem;
}

.pie .filigrana {
    position: absolute;
    right: -70px;
    bottom: -24px;
    width: 260px;
    height: 160px;
    pointer-events: none;
}

/* Stessa larghezza del contenuto (main è a 1100px col suo rientro): senza, il piede va
   a filo schermo mentre la pagina sopra è incolonnata, e si vede che sono due cose. */
.pie-dentro {
    position: relative;
    max-width: calc(1100px - 2rem);
    margin-inline: auto;
}

/* Chi siamo e come ci si parla: uno sotto l'altro sul telefono, affiancati dove c'è
   spazio. */
.pie-capo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
}

.pie a { color: var(--sabbia); }

.pie p { margin: 0; }

.pie-nome {
    font-family: var(--font-nomi);
    font-size: 1rem;
    font-weight: 700;
    color: var(--bianco);
}

/* <address> arriva in corsivo dal browser: qui è un recapito, non una citazione.
   ⚠️ L'INDIRIZZO RESTA nel piede anche se la tavola lo toglieva: la sua rimozione non
   è stata decisa. */
.pie address { font-style: normal; }

/* Con «.pie» davanti: «.pie p» qui sopra azzera i margini dei paragrafi, e da sola la
   classe perderebbe. */
.pie .pie-indirizzo,
.pie .pie-orari { margin-top: 0.25rem; }

.pie-contatti { display: grid; align-content: start; }

/* Telefono ed email nel piede si toccano davvero, da telefono: come link inline
   sarebbero alti 20px, sotto la soglia dei 44 (DESIGN.md §4). L'icona è disegnata,
   del colore del testo. */
.pie-contatto {
    /* flex + fit-content: ognuno va a capo per conto suo, ma il bersaglio
       cliccabile resta largo quanto il testo e non quanto la colonna. */
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--h-comando);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.pie-contatto svg { flex: none; }

/* La riga di servizio: partita IVA e ingresso al gestionale. Separata da un filetto
   perché non è roba per l'ospite. Il filetto è decorativo — l'informazione la porta
   il testo — quindi può stare sotto la soglia di contrasto. */
.pie-basso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgb(172 171 170 / 30%);
}

.pie-legale { color: var(--grigio); font-size: 0.8rem; line-height: 1; }   /* 8,92:1 */

/* Ingresso al gestionale: un bersaglio vero da 44px, ma sobrio. Pillola come ogni
   comando. Sabbia su nero fa 12,74:1, ampiamente sopra soglia (DESIGN.md §1). */
.accesso-gestionale {
    display: inline-flex;
    align-items: center;
    min-height: var(--h-comando);
    padding: 0 1rem;
    border: 1px solid var(--sabbia);
    border-radius: var(--pillola);
    color: var(--sabbia);
    text-decoration: none;
    font-family: var(--font-testo);
    font-weight: 700;
    font-size: 0.8125rem;
}

/* Al passaggio si riempie: il contrasto si inverte e resta a 12,74:1. */
.accesso-gestionale:hover { background: var(--sabbia); color: var(--nero); }

/* ── La fascia in fondo: tre schede ───────────────────────────────────────────
   Quanto costa, le lezioni, dove siamo. Scelta del committente del 7 ottobre 2026
   fra tre proposte (la «A, tre schede»): il perché sta nel commento in fondo a
   Index.cshtml. Prima erano tre colonne sotto un filetto, con la riga delle lezioni
   che sul telefono perdeva il titolo e sul computer lo ritrovava.

   ⚠️ LA STESSA GRIGLIA DELLE SCHEDE DEI CAMPI (.campi-proposte): 19rem, 0,75rem fra
   l'una e l'altra, auto-fit. Tre su un portatile, una sotto l'altra sul telefono, e
   la pagina non cambia ritmo fra i campi e il fondo. Con una scheda in meno — niente
   listino, niente indirizzo — auto-fit allarga quelle che restano invece di lasciare
   un buco. Il min() tiene una colonna sola sotto i 19rem, a 320px.

   Il filo sabbia in testa è quello che apre ogni sezione (.sezione): un segno solo
   per dire «qui comincia un'altra cosa». Senza, sul telefono le tre schede arrivano
   subito dopo quelle dei campi e si leggono come altri campi.
   ───────────────────────────────────────────────────────────────────────────── */
.tre-schede {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sabbia);
}

/* Bianco, filo sabbia, raggio grande e NESSUNA OMBRA: l'ombra solleva una cosa sola,
   la cartolina (vedi --ombra-scheda). Il raggio è quello grande perché dentro ci sono
   pillole, che un raggio l'hanno già (vedi :root). */
.scheda-fondo {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: 1px solid var(--sabbia);
    border-radius: var(--raggio-grande);
    background: var(--bianco);
}

@media (min-width: 40rem) {
    .scheda-fondo { padding: 1.25rem; }
}

/* IL CAPO: il tondo con l'icona e il titolo, alti 44px in tutte e tre, così i titoli
   stanno sulla stessa riga. Il tondo è SABBIA e non nero: il nero pieno è dei comandi
   (il tondo «vai»), e questo non si tocca. Icona nera su sabbia: 12,74:1. */
.capo-scheda {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
}

.tondo-icona {
    flex: none;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--pillola);
    background: var(--sabbia);
}

.tondo-icona img { display: block; width: 24px; height: 24px; }

.capo-scheda h2 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.5rem;
    letter-spacing: -0.01em;
}

.corpo-scheda { margin: 1rem 0 1.25rem; }

/* Il dato grande della scheda: il numero delle lezioni, la via. È un nome o un
   numero, quindi Montserrat Alternates (DESIGN.md §2). Può andare a capo: una via
   più lunga di questa la scrive il gestore, e non deve sfondare la scheda. */
.dato-scheda {
    display: block;
    margin: 0;
    font-family: var(--font-nomi);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: -0.01em;
    color: var(--nero);
    overflow-wrap: anywhere;
}

/* La frase delle lezioni: grigia, perché il dato è il numero sotto; in nero solo la
   promessa, «Ci sono i nostri maestri». --testo su bianco: 5,02:1. */
.frase-scheda {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.375rem;
    color: var(--testo);
}

.frase-scheda strong { color: var(--nero); }

.frase-scheda + .dato-scheda { margin-top: 0.75rem; }

/* L'indirizzo è un recapito, quindi <address>, che di serie è corsivo. */
.dove { margin: 0; font-style: normal; }

.resto-indirizzo {
    display: block;
    font-size: 1rem;
    line-height: 1.5rem;
    color: var(--testo);
}

/* IL PIEDE: in fondo alla scheda (margin-top: auto) e sotto un filo. Dove le schede
   stanno in riga la griglia le stira alla più alta, e i tre piedi cadono alla stessa
   altezza; la nota del listino tiene i 44px della pillola, così anche il suo filo cade
   lì. Sul telefono ogni scheda è alta quanto il suo contenuto, e il piede la chiude. */
.piede-scheda {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--sabbia);
}

.nota-scheda {
    margin: 0;
    min-height: 44px;
    font-size: 0.875rem;
    line-height: 1.375rem;
    color: var(--testo);
}

/* ── La cartolina ─────────────────────────────────────────────────────────────
   Il video del circolo in apertura, chiesto dal committente il 10 settembre 2026.

   ⚠️ ALTA 114px SUL TELEFONO, dal 7 ottobre 2026 (tavola «A»), e non più 21:9 (147 a
   375): sono i 33px che servono, insieme alla foto dei campi scesa a miniatura, a far
   entrare il primo orario prenotabile nella prima schermata. Sale con la larghezza
   fino ai 300px di un portatile, e il ritaglio lo fa object-fit, non un secondo file:
   le riprese dall'alto — la parte che dice «questo posto» — restano al centro.

   Il fondo è --sabbia perché nell'istante prima che il video parta si veda il colore
   del circolo e non un rettangolo nero. */
.cartolina {
    position: relative;
    margin: 0 0 1.25rem;
    height: clamp(114px, 30vw, 300px);
    border-radius: var(--raggio);
    overflow: hidden;
    background: var(--sabbia);
}

.cartolina-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ⚠️ Chi ha chiesto meno animazioni non vede la fascia, e non ne vede una versione
   ferma: un fermo immagine sarebbe comunque un'immagine da scaricare per una
   decorazione che quella persona ha detto di non volere. La pagina comincia dal
   titolo, che è la cosa che serve — e l'orario di oggi lo dice la frase sotto. */
@media (prefers-reduced-motion: reduce) {
    .cartolina { display: none; }
}

/* ┌───────────────────────────────────────────────────────────────────────────┐
   │ SOPRA IL VIDEO, OGGETTI PIENI — dal 7 ottobre 2026, al posto del velo.     │
   │                                                                           │
   │ Il velo sabbia esisteva per far leggere il marchio sopra un fondo che si   │
   │ muove, e spegneva la terra rossa proprio dove doveva accendere la pagina.  │
   │ Adesso sul video non c'è niente di trasparente: il cartellino è bianco     │
   │ pieno, quindi il suo contrasto non dipende da cosa passa sotto (nero su    │
   │ bianco, 20,46:1), e il bollo è pieno. Il marchio è uscito con il           │
   │ velo: senza un fondo suo non si leggeva, e il nome sta già in testata.     │
   └───────────────────────────────────────────────────────────────────────────┘ */

/* «Oggi aperto fino alle 22:30»: un'etichetta che si legge e non si tocca, quindi
   raggio 6 e non pillola. Si scrive solo quando è vero (IndexModel.StatoDiOggi). */
.cartellino-stato {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 30px;
    margin: 0;
    padding: 0.25rem 0.75rem 0.25rem 0.625rem;
    border-radius: var(--raggio-etichetta);
    background: var(--bianco);
    color: var(--nero);
    font-family: var(--font-testo);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.cartellino-stato svg { flex: none; display: block; }

/* IL BOLLO: un tondo giallo pallina con la pallina disegnata, girato di 8 gradi. È
   l'unico gesto giocoso della pagina, ed è decorazione (aria-hidden): non porta
   un'informazione, e la pallina nera sopra è disegno, non testo. Dal 19 ottobre 2026
   ha il colore dell'azione: il giallo decorativo e l'arancio sono diventati uno. */
.bollo {
    position: absolute;
    right: 1rem;
    bottom: 0.875rem;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--pallina);
    transform: rotate(-8deg);
}

.bollo img { display: block; width: 26px; height: 26px; }

/* ── La scheda del circolo ────────────────────────────────────────────────────
   Scelta del committente del 10 settembre 2026, dopo aver visto il kit «hotel
   booking» applicato alla prima pagina.

   ┌───────────────────────────────────────────────────────────────────────────┐
   │ IL VIDEO SMETTE DI ESSERE UNA DECORAZIONE IN CIMA.                        │
   │                                                                           │
   │ Prima la fascia stava sopra, staccata, e sotto ricominciava la pagina:     │
   │ era una copertina. Dentro la scheda diventa la faccia di un riquadro che   │
   │ dice chi siamo, quanto costa un'ora e a che ora si gioca — e il pulsante   │
   │ è lì dentro, non sotto.                                                    │
   └───────────────────────────────────────────────────────────────────────────┘

   ┌───────────────────────────────────────────────────────────────────────────┐
   │ ⚠️ COSTA SPAZIO, e sono i pixel buoni.                                     │
   │                                                                           │
   │ Qui si accetta a UNA condizione — che l'azione stia DENTRO la scheda. Il   │
   │ giorno che il pulsante uscisse di lì, la scheda diventa una copertina e va │
   │ tolta. Dal 7 ottobre 2026 (tavola «A») è alta circa 309px a 375: cartolina │
   │ 114, titolo su due righe, frase su due, piede da 48.                       │
   └───────────────────────────────────────────────────────────────────────────┘ */
.scheda-circolo {
    margin: 0;
    border-radius: var(--raggio-grande);
    overflow: hidden;
    background: var(--bianco);
    border: 1px solid var(--sabbia);
    box-shadow: var(--ombra-scheda);
}

/* Dentro la scheda la fascia non ha più né margine né raggio: la ritaglia il riquadro.
   ⚠️ Con «meno animazioni» la fascia sparisce del tutto (vedi .cartolina) e la scheda
   comincia dal titolo: resta un riquadro con dentro del testo, che è una scheda
   legittima e non un rettangolo vuoto. */
.scheda-circolo .cartolina { margin: 0; border-radius: 0; }

.scheda-testo { padding: 0.75rem 1rem; }

/* ⚠️ FINO A 1,75rem e non ai 2,25 dell'apertura di prima: qui il titolo ha un pulsante
   sotto, dentro lo stesso riquadro. Alla misura di prima si prendeva tre righe su un
   telefono e la scheda da sola diventava una schermata intera. */
.scheda-testo h1 {
    margin: 0;
    font-size: clamp(1.35rem, 4.5vw, 1.75rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.scheda-frase {
    margin: 0.25rem 0 0;
    font-family: var(--font-testo);
    font-size: 0.9375rem;
    line-height: 1.375rem;
    color: var(--testo);
    /* Il testo corrente non supera i 65 caratteri: su un portatile la riga arriverebbe
       a 1.100px, cioè si perde il capo tornando a sinistra. */
    max-width: 44rem;
}

/* Su fondo bianco il grigio di corpo va bene (5,02:1), ma la parola che conta —
   «non serve essere soci» — passa a nero: è la risposta che il turista cerca. */
.scheda-frase strong { color: var(--nero); }

/* Il prezzo a sinistra, l'azione a destra, e vanno a capo insieme quando non ci stanno:
   su 320px «Chiama 0183 882685» da solo è più largo di metà riquadro.

   ⚠️ È UN CONTENITORE (container-type), e serve al numero qui sotto: la sua misura
   dipende dalla larghezza del piede, non della finestra. */
.scheda-piede {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--sabbia);
}

/* «A PARTIRE DA» piccolo, il numero grande: la domanda del turista è quanto costa, e
   la risposta deve stare sopra la piega senza dover leggere il listino in fondo. */
.da-quanto {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* ┌───────────────────────────────────────────────────────────────────────────┐
   │ IL NUMERO GRANDE, CON I CENTESIMI.                                         │
   │                                                                           │
   │ La tavola scriveva «14 €» a 1,75rem, e il committente il 7 ottobre 2026 ha │
   │ scartato il prezzo senza centesimi: «14,00 €». Accanto al pulsante col     │
   │ gettone però non ci sta — misurato con i file veri: a 375 il piede è largo │
   │ 309px, il pulsante ne prende 171, «l'ora» 32 e lo stacco 12 — quindi è la  │
   │ cifra a rimpicciolirsi con la larghezza del piede: 23px a 375, 19 a 360,   │
   │ 28 (la misura della tavola) da 390 in su. Mai i centesimi tolti.           │
   │                                                                           │
   │ La prima riga è la rete per i browser senza unità di contenitore.          │
   └───────────────────────────────────────────────────────────────────────────┘ */
.numero-grande {
    display: flex;
    align-items: baseline;
    gap: 0.3125rem;
    min-height: 2rem;
}

.numero-grande b {
    font-family: var(--font-nomi);
    font-size: 1.25rem;
    font-size: clamp(1.125rem, calc(26cqi - 57px), 1.75rem);
    font-weight: 700;
    line-height: 2rem;
    letter-spacing: -0.01em;
    color: var(--nero);
    white-space: nowrap;
}

.unita {
    font-family: var(--font-testo);
    font-size: 0.875rem;
    color: var(--testo);   /* 5,02:1 su bianco */
}

/* Il pulsante della scheda è la pillola col gettone (vedi .pillola-gettone): giallo
   pallina col bordo nero, l'unico colore pieno della prima schermata.

   ⚠️ ERA NERO, ED È DIVENTATO ARANCIO IL 10 SETTEMBRE 2026, quando il disco arancione
   della prima riga prenotabile è sparito insieme alle righe: l'azione principale era
   rimasta vestita come i comandi di servizio della testata. E dal 7 ottobre 2026 lo
   «scelto» dei selettori non è più arancio, quindi questo pulsante è di nuovo l'unica
   macchia arancio piena della prima schermata — com'era scritto qui, e come dal 14
   settembre, con i selettori arancio, non era più vero. */