/* ---------------------------------------------------------------------------
   Kinky Connection APS: eventi e iscrizioni.

   Lo stile e' quello del sito (kinkyconnection-sito, la home): stesso tema e
   stessi componenti, riscritti qui in CSS semplice perche' questo progetto non
   ha Tailwind. Dove un blocco riprende un componente del sito, il commento ne
   dice il nome (Bottone, Link, Etichetta, Occhiello, RigaEvento...): se cambia
   la', va cambiato anche qui.

   Colori: i valori del brand book, copiati a mano come fa il sito in brand.css
   (i sei colori base sono ancora "da-brief"). Filo, raggi, fondo alterno e
   ombra sono i RIPIEGHI DICHIARATI del sito (global.css): forme e ombre nel
   brand non sono decise. RIPIEGO anche il carattere: quello di sistema, finche'
   il brand non sceglie una famiglia (brand/06-tipografia.md).

   Scala chiusa come nel sito: quattro corpi (3xl, base, sm e il display, che
   qui non serve) e tre pesi (400, 600, 700).
   --------------------------------------------------------------------------- */
:root {
  /* dal brand */
  --accent: #DB2631;
  --bg: #FFFFFF;
  --surface: #FBFBFB;
  --ink: #000000;
  --err: #B3261E;
  --ok: #1E7A34;
  --ink-2: #757575;
  --ink-3: #949494;
  --accent-soft: #FCEBEC;
  --surface-2: #EBEBEB;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ripieghi del sito */
  --filo: #E4E4E4;
  --raggio-lg: 10px;
  --raggio-md: 7px;
  --fondo-alterno: #F3F3F3;
  /* il fondo del biglietto e il grigio dei testi lunghi: scelti qui, non sono
     del brand. --accent-soft come fondo di pagina viene troppo carico sotto
     l'illustrazione, e --ink-2 troppo chiaro per un paragrafo intero. */
  --rosato: #FDF4F4;
  --ink-testo: #4A4A4A;
  --ink-2-su-alterno: #666666;  /* #757575 sul fondo alterno sta sotto la soglia del testo */
  --ombra: color-mix(in srgb, var(--ink) 10%, transparent);
  /* l'ombra unica del sito (shadow-sm): la luce dall'alto e il contatto col piano */
  --ombra-sm: 0 1px 3px 0 var(--ombra), 0 1px 2px -1px var(--ombra);

  /* tema del sito */
  --carattere: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --testo-3xl: 1.875rem;
  --testo-base: 1rem;
  --testo-sm: 0.875rem;
  --interlinea-sm: calc(1.25 / 0.875);
  --sito: 1160px;
  --margine-pagina: clamp(20px, 5vw, 56px);

  /* la freccia del sito (Freccia.astro), usata come maschera: prende il colore del testo */
  --freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E");
}

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

/* `hidden` deve valere anche dove il blocco ha un `display` suo: e' cosi' che
   si spengono i campi che valgono solo in certi casi (il nome della serie
   scritto a mano, i campi della data che non c'entrano con la precisione). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--carattere);
  font-size: var(--testo-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0 0 12px; font-weight: 700; }
h1, h2 { font-size: var(--testo-3xl); line-height: 1.15; letter-spacing: -0.02em; }
h3, h4 { font-size: var(--testo-base); line-height: 1.5; }
p { margin: 0 0 12px; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* chi naviga da tastiera vede sempre dove si trova */
a:focus-visible,
button:focus-visible,
summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

code { font-family: var(--mono); font-size: 0.9em; }
button { font: inherit; cursor: pointer; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nascosto { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Contenitore: la colonna della pagina ------------------------------ */

.contenitore { max-width: var(--sito); margin: 0 auto; padding-inline: var(--margine-pagina); }

/* titolo che serve solo a chi legge con lo screen reader */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
main.contenitore { padding-block: 48px 80px; }
/* la dashboard e' sempre larga quanto la finestra, testata compresa */
body.admin .contenitore { max-width: none; }
/* La dashboard è uno strumento, non una pagina da leggere: margini più stretti
   di quelli del sito, e al lavoro resta più spazio. La testata usa lo stesso
   margine, così il marchio resta in riga con il contenuto. */
body.admin { --margine-pagina: clamp(16px, 2.5vw, 24px); }
body.admin main.contenitore { padding-block: 24px 40px; }

/* La pagina a due colonne (body.larga) riempie la finestra sotto la testata:
   i margini stanno dentro le colonne, cosi' la linea che le divide va da cima a fondo. */
body.larga { display: flex; flex-direction: column; min-height: 100vh; }
/* `margin-inline: 0` annulla l'«auto» del contenitore: dentro un flex in colonna
   i margini automatici tolgono lo stretch, e il main si stringerebbe al contenuto. */
body.larga main.contenitore { display: flex; flex-direction: column; flex: 1; margin-inline: 0; padding: 0; }

/* --- Occhiello: il nome sopra un titolo o un gruppo ---------------------- */

.occhiello,
.blocco > h3,
.fatti dt,
.tabella thead th,
.cal-intestazione div {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--testo-sm);
  line-height: var(--interlinea-sm);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* --- Bottone: sempre in inchiostro, al passaggio il bordo raddoppia ------ */

.bottone,
.bottone-primario,
.bottone-pericolo {
  display: inline-block;
  padding: 9px 22px;
  border: 1.5px solid var(--ink);
  border-radius: 9999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.bottone-primario { background: var(--ink); color: var(--bg); }
.bottone:hover,
.bottone-primario:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.bottone-pericolo { border-color: var(--err); color: var(--err); }
.bottone-pericolo:hover { box-shadow: 0 0 0 1.5px var(--err); }

.bottone-testo {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bottone-testo:hover { text-decoration-thickness: 2px; }
.bottone-testo:disabled { color: var(--ink-3); text-decoration: none; cursor: default; }
.bottone-testo.pericolo { color: var(--err); }

.azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 8px; }

/* --- Link: porta da un'altra parte, con la freccia ----------------------- */

.freccia,
.link-freccia::after,
.indietro a::before {
  content: "";
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: var(--freccia) no-repeat center / contain;
  mask: var(--freccia) no-repeat center / contain;
}
.link-freccia { font-weight: 600; text-underline-offset: 4px; }
.link-freccia::after { margin-left: 0.35em; }

.indietro { margin-bottom: 24px; }
.indietro a { font-weight: 600; text-underline-offset: 4px; }
.indietro a::before { margin-right: 0.35em; transform: scaleX(-1); }

/* --- Etichetta: dice una condizione, e non si clicca --------------------- */

.etichetta-stato,
.stato {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 9999px;
  font-size: var(--testo-sm);
  line-height: var(--interlinea-sm);
  font-weight: 400;
  white-space: nowrap;
  color: var(--ink-2);
}
.etichetta-stato.aperte { color: var(--ink); }
/* iscrizioni che apriranno: si sa gia' quando, ma non e' ancora il momento */
.etichetta-stato.non-ancora,
.stato-attesa { border-style: dashed; color: var(--ink-2); }
.stato-aperto { color: var(--ok); }
.stato-chiuso { color: var(--ink); }
/* tratteggiata, come nel sito per le cose ancora da fissare */
.stato-nessuno { border-style: dashed; }
/* «Solo soci», accanto allo stato delle iscrizioni */
.etichetta-soci {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 9999px;
  font-size: var(--testo-sm);
  line-height: var(--interlinea-sm);
  white-space: nowrap;
  color: var(--ink-2);
}
.conteggio { font-size: var(--testo-sm); color: var(--ink-2); white-space: nowrap; }
/* una spiegazione breve dentro l'etichetta di un'opzione, senza andare a capo */
.aiuto-inline { color: var(--ink-2); font-weight: 400; }

/* --- avvisi -------------------------------------------------------------- */

.avviso,
.conferma,
.errore-modulo {
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-md);
  background: var(--bg);
}
.avviso { border-color: var(--fondo-alterno); background: var(--fondo-alterno); }
.conferma { border-color: var(--ok); color: var(--ok); font-weight: 600; box-shadow: inset 3px 0 0 var(--ok); }
.errore-modulo { border-color: var(--err); color: var(--err); font-weight: 600; box-shadow: inset 3px 0 0 var(--err); }
.errore-modulo p:last-child { margin-bottom: 0; }

/* --- Testata ------------------------------------------------------------- */

.testata { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--filo); }
.testata-riga { display: flex; align-items: center; flex-wrap: wrap; gap: 0 24px; min-height: 72px; }
/* nella dashboard e' piu' bassa, come i suoi margini: se cambia, va cambiato
   anche lo scroll-margin-top del pannello */
body.admin .testata-riga { min-height: 56px; }
/* Sulla pagina di un evento la testata porta a sinistra la via per tornare
   indietro, e allora il marchio sta in mezzo. Qui non resta appesa in cima:
   il biglietto e' una cosa sola, e scorre tutto insieme. E' larga quanto la
   finestra, non quanto la colonna del sito: la via per tornare sta
   nell'angolo in alto a sinistra della pagina. */
.testata:has(.testata-centrata) { position: static; }
.testata-centrata { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 16px; max-width: none; }
.testata-centrata .marchio { grid-column: 2; justify-self: center; }
.testata-indietro { grid-column: 1; margin: 0; font-size: var(--testo-sm); }
@media (max-width: 560px) {
  .testata-centrata { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding-block: 12px; }
  .testata-centrata .marchio { grid-column: 1; }
  .testata-indietro { justify-self: start; }
}
.marchio { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marchio img { display: block; height: 30px; width: auto; }
/* le voci stanno accanto al marchio; a destra resta solo chi e' entrato */
.nav-admin { display: flex; gap: 22px; margin-right: auto; font-size: var(--testo-sm); }
.nav-admin a { display: block; padding: 12px 0; text-decoration: none; text-underline-offset: 6px; }
.nav-admin a:hover { text-decoration: underline; }
.nav-admin a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.esci { display: flex; align-items: center; gap: 12px; font-size: var(--testo-sm); }
.chi { color: var(--ink-2); }

/* --- blocchi comuni ------------------------------------------------------ */

.intro { margin-bottom: 32px; }
.intro h1 { margin-bottom: 0; }
/* Sottotitolo */
.intro p { max-width: 620px; margin: 12px 0 0; color: var(--ink-2); }
.intro p strong { color: var(--ink); }
.intro-azioni { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.intro-azioni .bottone-primario { flex: none; }

/* --- Riepilogo: i tre numeri della pagina d'ingresso -------------------- */

.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 900px; margin: 0; padding: 0; list-style: none; }
.numero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 16px;
  padding: 24px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-lg);
  text-decoration: none;
  transition: border-color 0.15s;
}
.numero:hover { border-color: var(--ink); }
.numero-cifra { grid-column: 1 / -1; font-size: var(--testo-3xl); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.numero-nome { color: var(--ink-2); }
.numero .freccia { color: var(--ink-2); transition: transform 0.15s, color 0.15s; }
.numero:hover .freccia { transform: translateX(3px); color: var(--ink); }

.secondario { color: var(--ink-2); }
/* «Non c'e' ancora niente»: un messaggio che respira sopra e sotto. I testi
   che si scrivono al clic portano la stessa classe finche' sono vuoti, e a
   loro quel respiro non serve: li farebbe alti tre righe invece di una. */
.vuoto:not(.modificabile) { padding: 24px 0; color: var(--ink-2); }
.sezione { margin-top: 48px; }
.sezione > h2 + .secondario { margin-bottom: 16px; }

.payoff {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--filo);
  font-size: var(--testo-3xl);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}
/* Accento: il rosso una volta sola, sulla seconda meta' della frase */
.payoff em { font-style: normal; color: var(--accent); }

/* --- ListaEventi e RigaEvento -------------------------------------------- */

.lista-eventi {
  container: lista / inline-size;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-lg);
  background: var(--bg);
  box-shadow: var(--ombra-sm);
}
.lista-eventi > li + li { border-top: 1px solid var(--filo); }

/* Tutta la riga porta all'evento: al passaggio si accende un filetto a sinistra
   e la freccia fa un passo avanti. Stretta, la data scende sotto il resto. */
.riga-evento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: baseline;
  gap: 3px 16px;
  padding: 18px 20px;
  color: var(--ink);
  text-decoration: none;
}
.riga-evento:hover { box-shadow: inset 3px 0 0 var(--ink); }
.riga-evento:focus-visible { outline-offset: -3px; }
.riga-nome { grid-column: 1; grid-row: 1; font-weight: 700; }
.riga-descrizione { grid-column: 1; grid-row: 2; color: var(--ink-2); }
.riga-note { grid-column: 1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.riga-data { grid-column: 1; grid-row: 4; margin-top: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.riga-data::first-letter { text-transform: uppercase; }
.riga-orario { display: block; font-weight: 400; color: var(--ink-2); }
.riga-evento .freccia {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  justify-self: end;
  width: 18px;
  height: 18px;
  color: var(--ink-2);
  transition: transform 150ms, color 150ms;
}
.riga-evento:hover .freccia { transform: translateX(3px); color: var(--ink); }
.riga-evento.passato,
.riga-evento.passato .riga-data { color: var(--ink-2); }
/* l'evento aperto a destra, nella dashboard */
.riga-evento[aria-current="true"] {
  --ink-2: var(--ink-2-su-alterno);
  background: var(--fondo-alterno);
  box-shadow: inset 3px 0 0 var(--ink);
}

@container lista (min-width: 560px) {
  .riga-evento { grid-template-columns: minmax(0, 1fr) auto 20px; column-gap: 28px; }
  .riga-data { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; text-align: right; }
  .riga-orario { max-width: 26ch; margin-left: auto; }
  .riga-evento .freccia { grid-column: 3; grid-row: 1 / span 3; }
}

/* --- Biglietto: la card dell'evento -------------------------------------
   Vale sia sulla pagina pubblica sia nell'anteprima della dashboard, dove gli
   stessi buchi sono campi che si scrivono al clic (vedi .modificabile).
   Fondo rosato sotto, biglietto bianco sopra: lo strappo e' una riga
   tratteggiata con due mezzelune scavate ai lati, che sono buchi sul fondo. */

body.pubblico .biglietto-pagina { --fondo-biglietto: var(--rosato); }
body.fondo-rosato { background: var(--rosato); }
.biglietto-pagina {
  --fondo-biglietto: var(--bg);
  margin-inline: auto;
  container: biglietto / inline-size;
  position: relative;
  display: grid;
  row-gap: 24px;
  max-width: 640px;
}

.serie { text-align: center; }
.serie-nome { margin: 0; font-size: var(--testo-3xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.serie-testo { max-width: 46ch; margin: 10px auto 0; color: var(--ink-testo); }

/* L'illustrazione sta in alto a sinistra e scende dietro al biglietto: e'
   stampata su carta bianca, e con `darken` resta solo il disegno. Il bordo
   da cui parte e' quello del blocco che la contiene: nell'anteprima il
   riquadro rosato largo tutto il pannello. */
.illo {
  position: absolute;
  z-index: -1;
  top: -32px;
  left: 0;
  width: min(690px, 84%);
  height: auto;
  opacity: 0.4;
  mix-blend-mode: darken;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 35%, transparent 90%);
  pointer-events: none;
}
/* Sulla pagina pubblica il disegno si appoggia al bordo della finestra, non
   della colonna: la colonna e' centrata, quindi meta' della sua larghezza meno
   meta' della finestra e' esattamente la distanza dal bordo. Il blocco che la
   contiene resta la colonna (il contenimento di `container` lo impone), per
   questo non basta un `left: 0`. */
body.pubblico .illo {
  left: calc(50% - 50vw);
  width: min(580px, 76vw);
}

.biglietto {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 14px;
}
.biglietto-corpo { padding: 22px 24px; }

/* il titolo e il testo di questa serata, e a destra la data, storta come un
   timbro battuto a mano */
.biglietto-testa {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.biglietto-sommario { margin: 4px 0 0; color: var(--ink-testo); }
.biglietto-titolo { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.biglietto-testo {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--filo);
  color: var(--ink-testo);
}
.biglietto-testo p { margin: 0 0 12px; }
.biglietto-testo p:last-child { margin-bottom: 0; }
.biglietto-testo a { word-break: break-word; }

.data-piastrella {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 72px;
  margin: 0;
  padding: 12px 0;
  line-height: 1;
  border-radius: 14px;
  transform: rotate(3deg);
  background: var(--accent);
  color: var(--bg);
}
.data-piastrella .giorno { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
.data-piastrella .mese {
  font-family: var(--mono);
  font-size: var(--testo-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-soft);
}
/* senza giorno non c'e' niente da stampare: tratteggio, come tutto quello che
   e' ancora da fissare */
.data-piastrella.da-fissare { background: none; color: var(--ink-3); border: 1px dashed var(--ink-3); }
.data-piastrella.da-fissare .mese { color: var(--ink-3); }

/* dove, quando e a che ora: al posto dell'etichetta scritta, un'iconcina */
.fatti-riga { list-style: none; margin: 0; padding: 0; }
.fatti-riga li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--filo);
}
.fatti-riga li:last-child { border-bottom: 0; }
.fatti-riga .dato { font-weight: 600; white-space: pre-wrap; }
/* i contatti stanno su piu' righe: la riga li lascia crescere */
.fatti-riga .dato-lungo { flex: 1 1 auto; min-width: 0; }
.ico { flex: none; width: 20px; height: 20px; color: var(--ink-2); }
.a-destra {
  margin-left: auto;
  padding-left: 12px;
  font-family: var(--mono);
  font-size: var(--testo-sm);
  letter-spacing: 0.05em;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Le regole della serata: un riquadro a sé fra il corpo e la matrice, staccato
   dallo stesso strappo. Sono un patto, e si leggono prima di iscriversi. */
.biglietto-regole { padding: 22px 24px; color: var(--ink-testo); }
.titolo-regole { margin: 0 0 16px; color: var(--ink); }
.biglietto-regole p { margin: 0 0 12px; }
.biglietto-regole p:last-child { margin-bottom: 0; }
.biglietto-regole a { word-break: break-word; }
/* nell'anteprima, finché sono vuote il riquadro sta in pagina ma non ci andrà */
.biglietto-regole.senza-regole { opacity: 0.65; }
/* la spunta che accetta le regole chiude il riquadro, dentro un contorno suo */
.campo-regole { margin: 18px 0 0; }
.biglietto-regole .campo-regole .opzione { align-items: flex-start; }

.strappo { position: relative; height: 0; border-top: 2px dashed var(--filo); }
.strappo::before,
.strappo::after {
  content: "";
  position: absolute;
  top: -11px;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--fondo-biglietto);
}
.strappo::before { left: -11px; clip-path: inset(0 0 0 50%); }
.strappo::after { right: -11px; clip-path: inset(0 50% 0 0); }

/* la matrice: qui si dice se e come ci si iscrive, e quando ci si iscrive
   davvero e' qui che sta il modulo, che perde bordo e ombra: la cornice ce
   l'ha gia' il biglietto */
.biglietto-coda { padding: 26px 24px; }
.biglietto-coda .iscrizione {
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.biglietto-coda .iscrizione h2 { margin-top: 0; }
/* «Iscriviti» apre la matrice, anche quando il modulo non c'e' ancora; sotto,
   l'avviso per chi deve prima farsi la tessera, e poi le domande */
.titolo-iscriviti { margin: 0 0 20px; }
.biglietto-coda .iscrizione > .avviso-soci:first-of-type { margin-top: 0; }
.matrice { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; font-weight: 600; }

/* Una domanda, le risposte in fila: chi puo' venire, e com'e' fissata la data.
   Stanno dentro al biglietto ma tratteggiate come tutto quello che al pubblico
   non arriva. La scelta si segna in inchiostro pieno. */
.scelta-accesso,
.scelta-quando {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 6px;
  border: 1px dashed var(--ink-3);
  border-radius: 9999px;
}
.scelta-accesso { margin-bottom: 20px; }
.segmento { flex: 1 1 auto; }
.segmento input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.segmento span {
  display: block;
  padding: 8px 16px;
  border-radius: 9999px;
  color: var(--ink-2);
  font-size: 0.94rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.segmento span:hover { background: var(--accent-soft); color: var(--ink); }
.segmento input:checked + span { background: var(--ink); color: var(--bg); }
.segmento input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
/* quella della data e' piu' piccola: sta accanto alla piastrella */
.scelta-quando { padding: 4px; }
.scelta-quando .segmento span { padding: 5px 12px; font-size: var(--testo-sm); }

/* Quando aprono, quando chiudono, quanti posti: le regole dell'iscrizione,
   tratteggiate anche loro, perche' al pubblico arriva solo l'esito. */
.regole-iscrizione:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px 20px;
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px dashed var(--ink-3);
  border-radius: var(--raggio-md);
}
.regole-iscrizione .campo { margin: 0; }

/* Un comando che non e' pagina: tratteggiato, in grigio, con la sua iconcina. */
.comando-tratteggiato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px dashed var(--ink-3);
  border-radius: 9999px;
  background: var(--bg);
  color: var(--ink-2);
  font-size: var(--testo-sm);
  font-weight: 600;
}
.comando-tratteggiato:hover { border-color: var(--ink); color: var(--ink); }
.comando-tratteggiato .ico { width: 16px; height: 16px; }
.comando-piccolo { margin-top: 4px; padding: 3px 10px; font-size: 0.8rem; }

/* Serata dei soci: in fondo alla matrice, la via per diventarlo. Il fondo
   rosato lo stacca dal modulo senza farne un allarme: e' un invito, non un
   divieto. */
.avviso-soci {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: var(--raggio-md);
  background: var(--accent-soft);
}
.titolo-iscriviti + .avviso-soci { margin-top: 0; margin-bottom: 24px; }
.matrice + .avviso-soci { margin-top: 20px; }
.avviso-soci-testo { flex: 1 1 260px; }
.avviso-soci p { margin: 0; font-weight: 600; }
.avviso-soci-quota { margin-top: 6px !important; color: var(--ink-testo); font-size: 0.92rem; font-weight: 400 !important; }
.avviso-soci .bottone { flex: none; }

/* Il pagamento: in fondo al modulo, prima del bottone che lo manda, staccato
   dalle domande con lo stesso strappo delle regole. Lo strappo sta dentro al
   form, e per arrivare ai bordi del biglietto esce dal rientro della matrice. */
.pagamento .strappo { margin: 28px -24px 26px; }
.pagamento-dati { margin: 0 0 12px; }
.pagamento-dati > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--filo);
}
.pagamento-dati > div:first-child { padding-top: 0; border-top: 0; }
.pagamento-dati dt {
  font-family: var(--mono);
  font-size: var(--testo-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.pagamento-dati dd { margin: 0; font-weight: 600; }
/* l'importo, e a destra per che cosa, come sulla riga del prezzo del biglietto */
.pagamento-importo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.pagamento-per {
  font-family: var(--mono);
  font-size: var(--testo-sm);
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}
/* IBAN e causale si copiano: il testo intero si seleziona con un clic anche
   senza JavaScript, e il bottone sta a destra, o sotto quando non c'e' posto */
.da-copiare { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.da-copiare :is(code, .da-selezionare) { min-width: 0; overflow-wrap: anywhere; user-select: all; }
.da-copiare code { font-size: 0.95rem; }
.bottone-copia { flex: none; padding: 3px 14px; font-size: var(--testo-sm); }
.bottone-copia.copiato { background: var(--ink); color: var(--bg); }
.pagamento > .aiuto { margin: 0 0 4px; }
/* nell'anteprima, senza IBAN, lo dice una nota: non e' pagina */
.nota-tratteggiata {
  display: inline-block;
  padding: 4px 10px;
  border: 1px dashed var(--ink-3);
  border-radius: var(--raggio-md);
  color: var(--ink-2);
  font-size: var(--testo-sm);
  font-weight: 400;
}
@container biglietto (max-width: 520px) {
  .pagamento-dati > div { grid-template-columns: minmax(0, 1fr); }
}

@container biglietto (max-width: 380px) {
  .biglietto-testa { grid-template-columns: 1fr; justify-items: start; }
  .fatti-riga li { flex-wrap: wrap; }
  .fatti-riga .a-destra { margin-left: 32px; padding-left: 0; }
}

/* --- l'anteprima della dashboard: il biglietto si scrive al clic --------
   Stesso biglietto della pagina pubblica: i campi non hanno un bordo, si
   scrivono dove si leggono. Quello che nel biglietto non si vede (la data, che
   li' e' gia' scritta in italiano) sta nei campi normali qui sopra. */

/* Nel pannello il fondo rosato prende tutta la larghezza che trova, e il
   biglietto ci sta in mezzo: piu' largo che sulla pagina pubblica, ma non
   tanto da rendere illeggibile il testo lungo. */
.modulo-evento .biglietto-pagina {
  --fondo-biglietto: var(--rosato);
  max-width: none;
  margin: 0 0 20px;
  padding: 28px clamp(16px, 4%, 44px);
  border-radius: var(--raggio-lg);
  background: var(--rosato);
}
.modulo-evento .biglietto { max-width: 820px; margin-inline: auto; }
.modulo-evento .serie { max-width: 820px; margin-inline: auto; }
/* Il fondo rosato qui e' del riquadro, non della pagina: un disegno a z-index
   negativo ci finirebbe sotto. Parte dall'angolo in alto a sinistra e resta
   dietro al biglietto, come sulla pagina pubblica. */
.modulo-evento .illo {
  top: 0;
  z-index: 0;
}

.modificabile {
  border-radius: 5px;
  outline: 0;
  cursor: text;
  white-space: pre-wrap;
}
.modificabile:hover { box-shadow: 0 0 0 4px var(--surface-2); background: var(--surface-2); }
.modificabile:focus {
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--ink);
}
.modificabile.vuoto::before { content: attr(data-vuoto); color: var(--ink-3); font-weight: 400; }

/* select e campi liberi dentro il biglietto: nudi, prendono il testo di dove
   stanno e si fanno vedere solo al passaggio */
.campo-nudo {
  max-width: 100%;
  padding: 2px 4px;
  border: 0;
  border-radius: 5px;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
.campo-nudo:hover { background: var(--surface-2); }
.campo-nudo:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
/* la serie si legge come un titolo, non come un menu: niente cornice e niente
   freccina, si scopre al passaggio e si cambia al clic */
select.campo-nudo {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: none;
  box-shadow: none;
  outline-offset: 2px;
}
select.campo-nudo::-ms-expand { display: none; }
.campo-serie-libera:not([hidden]) { display: block; margin: 4px auto 0; text-align: center; }
.fatti-riga [data-apre] { cursor: text; border-radius: 5px; }
.fatti-riga [data-apre]:hover { box-shadow: 0 0 0 4px var(--surface-2); background: var(--surface-2); }
.fatti-riga .campo-nudo { font-weight: 600; }
.ore-campi:not([hidden]),
.quando-campi:not([hidden]) { display: inline-flex; align-items: center; gap: 4px; }
/* la scelta di come e' fissata la data sta dove la pagina pubblica dice
   «fra 9 giorni»: e' un comando, e resta tratteggiato */
.a-destra .scelta-quando { margin: -4px 0; }
.serie-nome select.campo-nudo { text-align: center; text-align-last: center; }

/* L'immagine del biglietto si cambia dall'angolo in alto a destra
   dell'anteprima: il comando e' tratteggiato, il menu mostra i disegni gia'
   caricati e quello di sempre, che e' il primo. */
.scelta-immagine { position: absolute; z-index: 4; top: 10px; right: 10px; }
.menu-immagini {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 0;
  width: min(380px, 78vw);
  padding: 14px 16px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-lg);
  background: var(--bg);
  box-shadow: 0 10px 30px var(--ombra), var(--ombra-sm);
}
.menu-immagini .aiuto { margin-top: 0; }
.griglia-immagini {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  max-height: 46vh;
  margin: 0 0 12px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.voce-immagine {
  display: block;
  width: 100%;
  padding: 5px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-md);
  background: var(--bg);
  text-align: left;
}
.voce-immagine:hover { border-color: var(--ink); }
.voce-immagine.scelta { border-color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.voce-anteprima { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--fondo-alterno); }
.voce-anteprima img { display: block; width: 100%; height: 100%; object-fit: contain; }
.voce-nome { display: block; margin-top: 4px; overflow: hidden; font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
/* i disegni del brand da una parte, le immagini caricate dall'altra */
.titolo-griglia {
  grid-column: 1 / -1;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: var(--testo-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* «Carica una nuova»: e' una label che apre il dialogo dei file, e deve
   comportarsi come un bottone, fuoco compreso */
.carica-al-volo { display: inline-block; cursor: pointer; }
.carica-al-volo:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --- dettaglio evento ---------------------------------------------------- */

.indietro,
.dettaglio,
.iscrizione,
body.pubblico .avviso { max-width: 720px; }

.dettaglio { margin-bottom: 40px; }
.fatti { margin: 24px 0; border-top: 1px solid var(--filo); }
.fatti > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--filo);
}
.fatti dd { margin: 0; font-weight: 600; }
.descrizione { max-width: 620px; }
.descrizione a { word-break: break-word; }

.iscrizione {
  padding: 28px 24px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-lg);
  background: var(--bg);
  box-shadow: var(--ombra-sm);
}
.posti { font-weight: 600; }

/* Il modulo di iscrizione, dentro al biglietto: a sinistra la domanda con la
   sua spiegazione, a destra il campo da riempire. Anche le scelte stanno in un
   riquadro, come fosse un campo. */
.biglietto-coda .modulo .campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 4px 24px;
  /* lo spazio fra una domanda e l'altra e' solo il padding, uguale sopra e
     sotto: il margine dei campi dei form normali qui non serve */
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--filo);
}
.biglietto-coda .modulo .campo > .etichetta { grid-column: 1; grid-row: 1; margin: 0; }
/* Lo spazio sopra e sotto la domanda lo fa il padding del campo, uguale da
   tutte e due le parti: i margini di chiusura della spiegazione lo
   sbilanciavano verso il basso. */
.biglietto-coda .modulo .campo > .aiuto { grid-column: 1; grid-row: 2; margin: 2px 0 0; }
.biglietto-coda .modulo .campo > input,
.biglietto-coda .modulo .campo > textarea,
.biglietto-coda .modulo .campo > [role="group"],
.biglietto-coda .modulo .campo > .opzioni { grid-column: 2; grid-row: 1 / span 2; }
.biglietto-coda .modulo .campo > .errore-campo { grid-column: 1 / -1; grid-row: 3; }
/* Le spunte da accettare (il consenso, le regole) non sono una domanda con la
   sua risposta accanto: sono una frase da leggere, e prendono tutta la riga. */
.biglietto-coda .modulo .campo:has(> .opzione) > * { grid-column: 1 / -1; }
.biglietto-coda .modulo .opzioni {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-md);
  background: var(--bg);
}
.biglietto-coda .modulo .campo:first-of-type { border-top: 0; }

/* Nome e cognome ed email: in cima a ogni modulo, e non si toccano. Al posto
   dei comandi c'e' un segno tratteggiato che lo dice, a meta' altezza. */
.campi-fissi { margin: 0; padding: 0; list-style: none; }
.biglietto-coda .modulo .campo-fisso { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.biglietto-coda .modulo .campo-fisso > .segno-fisso { grid-column: 2; grid-row: 1 / span 2; }
.segno-fisso {
  padding: 3px 10px;
  border: 1px dashed var(--ink-3);
  border-radius: 9999px;
  color: var(--ink-3);
  font-size: var(--testo-sm);
  white-space: nowrap;
}
/* le domande che si scrivono vengono dopo le fisse: la prima ha il suo filetto */
.campi-fissi + .campi-modulo > .campo:first-of-type { border-top: 1px solid var(--filo); }

/* Le domande: ognuna e' un campo del modulo, con accanto i comandi che in
   pagina non compariranno. Si sbiadiscono finche' non si lavora su quella
   domanda, cosi' l'anteprima resta leggibile come la vedra' chi si iscrive. */
.campi-modulo { margin: 0; padding: 0; list-style: none; }
.introduzione-modulo { margin: 0 0 16px; color: var(--ink-testo); }
/* I comandi stanno attorno alla domanda, non dentro: che domanda e' a sinistra,
   l'ordine e il cestino a destra. Si sbiadiscono finche' non si lavora su
   quella domanda. Il campo da riempire qui non c'e': accanto alla domanda
   restano solo le opzioni delle scelte, e dove non ci sono la domanda si prende
   anche il loro posto.
   Ogni pezzo sta a meta' altezza della riga. Gli spazi fra le colonne sono
   colonne anche loro, perche' non sono tutti uguali: il tipo sta vicino alla
   sua domanda, i comandi vicini alle opzioni. */
.biglietto-coda .modulo .campo-scrivibile {
  grid-template-columns: auto 12px minmax(0, 1fr) 20px minmax(0, 1fr) 16px auto;
  gap: 0;
  align-items: center;
}
.biglietto-coda .modulo .campo-scrivibile > .scelta-tipo { grid-column: 1; grid-row: 1; }
.biglietto-coda .modulo .campo-scrivibile > .campo-domanda { grid-column: 3 / 6; grid-row: 1; }
.biglietto-coda .modulo .campo-scrivibile:has(> .opzioni) > .campo-domanda { grid-column: 3; }
.biglietto-coda .modulo .campo-scrivibile > .opzioni { grid-column: 5; grid-row: 1; }
/* domanda e spiegazione distano quanto sulla pagina pubblica */
.campo-domanda .etichetta { margin: 0; }
.campo-domanda .aiuto { margin: 6px 0 0; }
.campo-comandi {
  grid-column: 7;
  grid-row: 1;
  display: flex;
  align-items: center;
  opacity: 0.45;
  transition: opacity 120ms;
}
/* il cestino sta in disparte: è l'unico che toglie davvero qualcosa */
.comando-togli { margin-left: 10px; }
/* Su e giu' sono un blocchetto solo: tondo in cima e in fondo, diviso a meta'
   dal filetto tratteggiato. Il bordo di sopra del secondo si posa su quello di
   sotto del primo, cosi' il filetto resta uno; passandoci sopra, il bottone
   sale in primo piano e il filetto si scurisce con lui. */
.campo-ordine { display: flex; flex-direction: column; }
.campo-ordine .comando-campo:first-child { border-radius: 9999px 9999px 0 0; }
.campo-ordine .comando-campo:last-child { margin-top: -1px; border-radius: 0 0 9999px 9999px; }
.campo-ordine .comando-campo:hover:not(:disabled),
.campo-ordine .comando-campo:focus-visible { position: relative; z-index: 1; }

/* Obbligatoria o opzionale: si cambia dalla parola, accanto alla domanda. */
.segno-obbligo {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed var(--ink-3);
  background: none;
  font-size: var(--testo-sm);
  line-height: 1.2;
  color: var(--ink-3);
}
.segno-obbligo::before { content: "("; }
.segno-obbligo::after { content: ")"; }
.segno-obbligo:hover { color: var(--ink); border-bottom-color: var(--ink); }
.segno-obbligo.acceso { color: var(--ink-2); border-bottom-style: solid; }
.etichetta .segno-obbligo { margin-left: 6px; font-weight: 400; }

/* Un testo che si scrive su piu' righe: da inline l'evidenziazione si spezzava
   riga per riga e copriva solo la prima. Cosi' e' un rettangolo solo, largo
   quanto il testo. */
.campo-scrivibile .modificabile,
.opzione-scrivibile .modificabile { display: inline-block; max-width: 100%; vertical-align: top; }

/* Quello che e' scritto non deve sembrare un segnaposto: il grigio chiaro resta
   solo a chi deve ancora scrivere. */
.campo-scrivibile .aiuto .modificabile:not(.vuoto) { color: var(--ink-testo); }
.campo-scrivibile:hover .campo-comandi,
.campo-scrivibile:focus-within .campo-comandi,
/* col menu dei tipi aperto i comandi restano pieni, anche se il puntatore esce */
.campo-scrivibile:has(.menu-tipi:not([hidden])) .campo-comandi { opacity: 1; }
.comando-campo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px dashed var(--ink-3);
  border-radius: 9999px;
  background: var(--bg);
  color: var(--ink-2);
}
.comando-campo:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); }
.comando-campo:disabled { opacity: 0.35; cursor: default; }
/* obbligatoria: il segno resta acceso, come un interruttore tirato */
.comando-campo.acceso { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--bg); }
.comando-campo .ico { width: 15px; height: 15px; }
.scelta-tipo { position: relative; display: inline-flex; }
.menu-tipi {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 2px;
  width: max-content;
  padding: 6px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-md);
  background: var(--bg);
  box-shadow: 0 10px 30px var(--ombra), var(--ombra-sm);
}
.voce-tipo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  border: 0;
  border-radius: var(--raggio-md);
  background: none;
  color: var(--ink);
  font-size: var(--testo-sm);
  text-align: left;
  white-space: nowrap;
}
.voce-tipo:hover { background: var(--fondo-alterno); }
.voce-tipo.scelta { font-weight: 700; }
.voce-tipo .ico { flex: none; width: 17px; height: 17px; color: var(--ink-2); }
.voce-tipo.scelta .ico { color: var(--ink); }
.opzione .comando-campo { width: 22px; height: 22px; margin-left: auto; }
.opzione .comando-campo .ico { width: 12px; height: 12px; }
/* la riga dell'opzione si clicca per scriverci, non per spuntarla */
.opzione-scrivibile { align-items: center; cursor: text; }
.opzione-scrivibile .modificabile { flex: 0 1 auto; min-width: 2ch; }
.opzioni .comando-tratteggiato { justify-self: start; }
/* i controlli dell'anteprima si guardano, non si usano */
.finto { pointer-events: none; }
.riga-aggiungi { display: flex; justify-content: center; margin: 4px 0 0; padding: 14px 0 4px; border-top: 1px solid var(--filo); }
/* Le due spunte che si accettano (le regole, il consenso) non sono domande:
   sono un patto, e stanno dentro un contorno che le chiude da tutti i lati. */
.campo-regole,
.campo-consenso,
/* dentro al modulo i campi hanno il loro filetto sopra e nessun rientro ai
   lati: la spunta del consenso e' un campo, quindi va riscritta piu' forte */
.biglietto-coda .modulo .campo-consenso {
  padding: 14px 16px;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-md);
}
/* il contorno la stacca gia' dal campo di sopra, ma non dal suo filetto; e
   sotto, dove i campi del biglietto non hanno margine, il bottone le stava
   attaccato: lo stesso spazio che lascia la verifica di Turnstile */
.biglietto-coda .modulo .campo-consenso { margin: 16px 0 20px; }
.campo-consenso .obbl { white-space: nowrap; }
.campo-consenso .aiuto { margin: 8px 0 0 30px; }

@container biglietto (max-width: 520px) {
  .biglietto-coda .modulo .campo { grid-template-columns: minmax(0, 1fr); }
  .biglietto-coda .modulo .campo > input,
  .biglietto-coda .modulo .campo > textarea,
  .biglietto-coda .modulo .campo > [role="group"],
  .biglietto-coda .modulo .campo > .opzioni { grid-column: 1; grid-row: auto; }
}

/* --- moduli -------------------------------------------------------------- */

.modulo { margin-top: 20px; }
.campo { margin-bottom: 22px; }
.etichetta { display: block; margin: 0 0 6px; font-weight: 600; }
.obbl { font-size: var(--testo-sm); font-weight: 400; color: var(--ink-2); }
.aiuto { margin: -2px 0 8px; font-size: var(--testo-sm); line-height: var(--interlinea-sm); color: var(--ink-2); }

:is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
    input[type="datetime-local"], input[type="time"], input[type="password"], select, textarea) {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink-3);
  border-radius: var(--raggio-md);
}
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
    input[type="datetime-local"], input[type="time"], input[type="password"], select, textarea):hover { border-color: var(--ink-2); }
/* a fuoco il bordo raddoppia, come il Bottone al passaggio */
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"],
    input[type="datetime-local"], input[type="time"], input[type="password"], select, textarea):focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--ink);
}
textarea { resize: vertical; }
select { appearance: auto; }

input[type="file"] { font: inherit; font-size: var(--testo-sm); }
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 9999px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { box-shadow: 0 0 0 1.5px var(--ink); }

.opzioni { display: grid; gap: 8px; }
.opzione { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.opzione input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }

.con-errore :is(input, textarea, select) { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.errore-campo { margin: 6px 0 0; font-size: var(--testo-sm); font-weight: 600; color: var(--err); }
.errore-campo::before { content: "Da sistemare: "; }

.cf-turnstile { margin-bottom: 20px; }

fieldset.sezione { margin: 0 0 28px; padding: 20px 20px 4px; border: 1px solid var(--filo); border-radius: var(--raggio-lg); }
fieldset.sezione legend { padding: 0 8px; font-weight: 700; }
.campi-affiancati { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 20px; }
/* Un campo largo e la sua coda corta: «Ogni quanto» e l'ordine. */
.campi-affiancati.campi-coda { grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr); }

.accesso { max-width: 400px; margin: 40px auto 0; }

/* --- tabelle ------------------------------------------------------------- */

.tabella-scorre {
  overflow-x: auto;
  border: 1px solid var(--filo);
  border-radius: var(--raggio-lg);
  background: var(--bg);
  box-shadow: var(--ombra-sm);
}
.tabella { width: 100%; border-collapse: collapse; }
.tabella th,
.tabella td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--filo); }
.tabella thead th { background: var(--fondo-alterno); color: var(--ink-2-su-alterno); white-space: nowrap; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.col-data { white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-azioni { white-space: nowrap; text-align: right; }
.col-azioni a { margin-left: 12px; }
.col-azioni form { display: inline; }
.col-spunta { text-align: center; }
.col-spunta input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); cursor: pointer; }
/* con JavaScript la spunta si salva da sola, e il bottone della riga non serve */
.salva-da-sola .salva-stato { display: none; }
/* il codice della causale: quattro segni, da cercare nell'estratto conto */
.col-codice { font-family: var(--mono); white-space: nowrap; }
/* i posti erano finiti, ma la persona aveva gia' pagato */
.etichetta-oltre {
  display: block;
  width: max-content;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 9999px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: var(--testo-sm);
  font-weight: 600;
}

/* --- dashboard: eventi a sinistra, evento scelto a destra ---------------- */

.dashboard-colonne { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.colonna-eventi { container: eventi / inline-size; min-width: 0; padding: 24px 24px 40px var(--margine-pagina); }
.pannello { min-width: 0; padding: 24px var(--margine-pagina) 40px 24px; border-left: 1px solid var(--filo); scroll-margin-top: 57px; }

/* Da schermo largo le due colonne scorrono ognuna per conto suo, sotto la
   testata che resta ferma. Sotto i 1100px si impilano, e scorre la pagina. */
@media (min-width: 1101px) {
  body.larga { height: 100vh; min-height: 0; overflow: hidden; }
  body.larga main.contenitore { min-height: 0; }
  .dashboard-colonne { min-height: 0; }
  .colonna-eventi,
  .pannello { overflow-y: auto; overscroll-behavior: contain; }
  /* il respiro in fondo lo fa il bottone, che e' sempre l'ultima cosa */
  .colonna-eventi,
  .pannello { padding-bottom: 0; }
  /* Perche' «Salva l'evento» resti incollato in fondo come il suo gemello a
     sinistra, la colonna dei contenuti deve arrivare fino in fondo: il pannello,
     il blocco e il form si allungano, e la riga del bottone scende per ultima. */
  .pannello,
  .pannello > .blocco-primo,
  .pannello .modulo-evento { display: flex; flex-direction: column; }
  .pannello > .blocco-primo,
  .pannello .modulo-evento { flex: 1; }
  .pannello .fab-riga-pannello { margin-top: auto; padding-bottom: 24px; }
}

/* Il bottone che crea: in basso a destra della colonna, sempre a portata di
   pollice. `margin-top: auto` lo spinge in fondo quando la lista e' corta,
   `sticky` lo tiene li' quando invece e' lunga. */
.colonna-eventi { display: flex; flex-direction: column; }
.colonna-eventi > .elenco,
.colonna-eventi > .calendario { flex: none; }
/* la pillola Lista/Calendario resta della sua larghezza, non si stira */
.colonna-eventi > .switch-vista { align-self: flex-start; }
.fab-riga {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding: 24px 0;
  /* la lista scorre dietro al bottone: la sfumatura la fa sparire sotto */
  background: linear-gradient(to top, var(--bg) 55%, transparent);
  pointer-events: none;
}
.fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  color: var(--bg);
  font-weight: 700;
  text-decoration: none;
  background: var(--ink);
  border-radius: 9999px;
  box-shadow: 0 6px 20px var(--ombra), 0 2px 6px var(--ombra);
  pointer-events: auto;
}
.fab:hover { text-decoration: none; transform: translateY(-1px); }
.fab-segno { font-size: 22px; line-height: 1; }
button.fab { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
/* appena salvato: il bottone lo dice lui, in verde, per due secondi */
.fab-fatto { background: var(--ok); }

/* Lo stesso bottone dall'altra parte, in fondo al pannello: salva l'evento
   dove a sinistra se ne crea uno nuovo. */
.fab-riga-pannello { align-items: center; gap: 16px; margin-top: 8px; padding-bottom: 8px; }
.fab-nota { margin: 0 auto 0 0; text-align: right; }
.pannello-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 28px; }
/* Pannello senza titolo: resta solo il «Chiudi», in alto a destra. */
.pannello-testa.senza-titolo { justify-content: flex-end; margin-bottom: 12px; }
.pannello-testa h2 { margin: 8px 0 0; }
.pannello-testa > h2:first-child { margin-top: 0; }
.pannello-link { display: flex; flex: none; gap: 16px; margin: 4px 0 0; font-size: var(--testo-sm); }
.pannello-vuoto { padding-top: 8px; }

.blocco { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--filo); }
.blocco-primo { margin-top: 0; padding-top: 0; border-top: 0; }
.blocco > h3 { margin-bottom: 16px; }
.blocco .modulo { margin-top: 0; }
.pannello .zona-pericolo { margin-top: 40px; }
.pannello .zona-pericolo + .zona-pericolo { margin-top: 24px; }
.ripreso { margin-bottom: 20px; }

@media (max-width: 1100px) {
  .dashboard-colonne { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .colonna-eventi { padding: 24px var(--margine-pagina) 40px; }
  .pannello { padding: 24px var(--margine-pagina) 40px; border-left: 0; border-top: 1px solid var(--filo); }
  .pannello-vuoto { display: none; }
  .pannello-vuoto:has(.conferma) { display: block; }
  .pannello-vuoto .secondario { display: none; }
}

/* --- le due schede del pannello ------------------------------------------ */

/* Stanno su una riga sola, divise dal resto da un filo; quella aperta e'
   sottolineata in inchiostro, come le voci del menu della dashboard. */
.schede {
  display: flex;
  gap: 24px;
  margin: 0 0 24px;
  border-bottom: 1px solid var(--filo);
}
.scheda {
  padding: 0 0 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
}
.scheda:hover { color: var(--ink); }
.scheda[aria-current="page"] { border-bottom-color: var(--ink); color: var(--ink); }
/* le due eliminazioni stanno per conto loro, in fondo a destra */
.scheda-pericolo { margin-left: auto; color: var(--err); }
.scheda-pericolo:hover,
.scheda-pericolo[aria-current="page"] { border-bottom-color: var(--err); color: var(--err); }

/* --- switch fra calendario e lista --------------------------------------- */

.switch-vista { display: inline-flex; gap: 2px; margin-bottom: 20px; padding: 3px; border: 1.5px solid var(--ink); border-radius: 9999px; }
.switch-vista a { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 9999px; font-weight: 600; text-decoration: none; }
.switch-vista a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.switch-vista a[aria-current="page"] { background: var(--ink); color: var(--bg); box-shadow: none; }

/* --- lista degli eventi, divisa per mese --------------------------------- */

.elenco > .secondario { margin: 0 0 20px; font-size: var(--testo-sm); }

/* i mesi, uno sotto l'altro, con lo stesso titolo in calendario e in lista */
.mese + .mese { margin-top: 40px; }
.titolo-mese { margin: 0 0 12px; }

/* --- calendario del mese ------------------------------------------------- */

.cal-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 20px; font-size: var(--testo-sm); }
.cal-legenda .cal-evento { display: inline-flex; width: auto; }

.cal-griglia { overflow: hidden; border: 1px solid var(--filo); border-radius: var(--raggio-lg); background: var(--bg); box-shadow: var(--ombra-sm); }
.cal-intestazione,
.cal-settimana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-intestazione div { padding: 8px; color: var(--ink-2-su-alterno); background: var(--fondo-alterno); border-bottom: 1px solid var(--filo); }
.cal-giorno { min-width: 0; min-height: 112px; padding: 6px; border-right: 1px solid var(--filo); border-bottom: 1px solid var(--filo); }
.cal-settimana .cal-giorno:nth-child(7) { border-right: 0; }
.cal-settimana:last-child .cal-giorno { border-bottom: 0; }
.cal-fuori { --ink-2: var(--ink-2-su-alterno); background: var(--fondo-alterno); }
.cal-fuori .cal-numero p { color: var(--ink-2); }
.cal-oggi { box-shadow: inset 0 0 0 1.5px var(--ink); }

.cal-numero { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-bottom: 4px; }
.cal-numero p { margin: 0; font-size: var(--testo-sm); line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-nome-giorno { display: none; }
.cal-etichetta-oggi { margin-left: 4px; font-weight: 600; }
.cal-aggiungi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid transparent;
  border-radius: 9999px;
  color: var(--ink-2);
  font-size: var(--testo-base);
  line-height: 1;
  text-decoration: none;
}
.cal-aggiungi:hover,
.cal-aggiungi:focus-visible { border-color: var(--ink); color: var(--ink); }

.cal-giorno ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
/* La colonna e' stretta: ora e iscritti sulla prima riga, il titolo sotto.
   Lo stato non si legge dal solo colore: aperto ha il filetto verde, chiuso il
   filetto nero e il bordo tratteggiato, senza modulo nessun filetto. */
.cal-evento {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  width: 100%;
  padding: 3px 6px 3px 9px;
  overflow: hidden;
  font-size: var(--testo-sm);
  line-height: var(--interlinea-sm);
  color: var(--ink);
  text-decoration: none;
  background: var(--bg);
  border: 1px solid var(--filo);
  border-radius: var(--raggio-md);
}
.cal-evento:hover { border-color: var(--ink); }
.cal-ora { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-conteggio { flex: none; margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-titolo { order: 1; flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-aperto { box-shadow: inset 3px 0 0 var(--ok); }
.cal-chiuso { border-style: dashed; border-color: var(--ink-3); box-shadow: inset 3px 0 0 var(--ink); }
.cal-passato { color: var(--ink-2); }
.cal-evento.cal-scelto { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.cal-scelto .cal-conteggio { color: inherit; }
.cal-nessun-evento { margin-top: 12px; color: var(--ink-2); }

@container eventi (max-width: 560px) {
  .cal-intestazione { display: none; }
  .cal-settimana { display: block; }
  .cal-giorno { display: grid; grid-template-columns: 64px 1fr; gap: 8px; min-height: 0; padding: 8px; border-right: 0; }
  .cal-giorno.cal-vuoto { display: none; }
  .cal-numero { flex-direction: column; align-items: flex-start; }
  .cal-nome-giorno { display: inline; margin-right: 4px; font-weight: 400; }
  .cal-oggi { box-shadow: inset 3px 0 0 var(--ink); }
}

/* --- libreria immagini --------------------------------------------------- */

.carica-immagini { margin-bottom: 28px; padding: 16px 20px; border: 1px solid var(--filo); border-radius: var(--raggio-lg); background: var(--fondo-alterno); }
.carica-immagini .riga,
.libreria-alt .riga { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.carica-immagini input[type="file"] { flex: 1 1 240px; }

.libreria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.libreria-voce { min-width: 0; padding: 12px; border: 1px solid var(--filo); border-radius: var(--raggio-md); background: var(--bg); box-shadow: var(--ombra-sm); }
.libreria-anteprima { display: block; aspect-ratio: 4 / 3; max-width: 100%; margin-bottom: 10px; overflow: hidden; border-radius: 4px; background: var(--fondo-alterno); }
.libreria-anteprima img { display: block; width: 100%; height: 100%; object-fit: contain; }
.libreria-nome { margin: 0 0 2px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.libreria-voce .secondario { font-size: var(--testo-sm); }
.libreria-alt { margin: 12px 0 6px; }
.libreria-alt .etichetta { font-size: var(--testo-sm); }
.libreria-alt input { flex: 1 1 120px; min-height: 40px; padding: 6px 10px; }

/* --- telefono (fino a 640px, come il sito) ------------------------------- */

@media (max-width: 640px) {
  :root { --testo-3xl: 1.625rem; }
  main.contenitore { padding-block: 32px 64px; }
  .iscrizione { padding: 20px 16px; }
  .fatti > div { grid-template-columns: 1fr; gap: 2px; }
  .campi-affiancati.campi-coda { grid-template-columns: 1fr; }
  .nav-admin { order: 3; width: 100%; margin-left: 0; }
  .esci { margin-left: auto; }
}