/* TINA — il foglio di stile, riscritto sui gettoni di colori.css (docs/linea-grafica.md).
 *
 * Prima il telefono: una colonna, e le schede una sotto l'altra. **Nessun esadecimale qui**, nessuna
 * spaziatura fuori dalla scala --s1…--s8, un raggio solo. Ogni coppia testo/sfondo usata qui è una
 * riga della tabella del §7; prove/test_contrasto.py lo controlla.
 *
 * Il terracotta si guarda (pulsanti, voce attiva, marchio), il petrolio si legge (titoli, numeri,
 * testo forte). Il crema è il fondo della barra e delle fasce, non della pagina.
 */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 14.5px/1.5 var(--corpo);
  color: var(--testo);
  background: var(--pagina);
}

main { max-width: 760px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }
main:has(.piano), main:has(table.registro) { max-width: none; }
main:has(table.elenco) { max-width: 1080px; }

/* --- tipografia (§6) ------------------------------------------------------------------------- */
h1 { font: 600 23px/1.25 var(--titolo); color: var(--inchiostro); margin: 0 0 var(--s1); }
h2 { font: 600 17px/1.3 var(--titolo); color: var(--inchiostro); margin: var(--s6) 0 var(--s3); }
h3 { font: 600 15px/1.4 var(--corpo); color: var(--inchiostro); margin: var(--s4) 0 var(--s2); }
h2 small, h3 small { font: 400 12.5px/1.4 var(--corpo); color: var(--tenue); }
p { margin: 0 0 var(--s3); }
a { color: var(--inchiostro); text-underline-offset: 2px; }
strong { font-weight: 600; }

.occhiello { color: var(--tenue); font-size: 12.5px; margin: 0 0 var(--s5); }
.tenue { color: var(--tenue); }
.etichetta { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
/* Ogni ora, data, conteggio va in cifre tabulari: in una griglia di orari le cifre che ballano
   si leggono come errori. */
time, .ora, .conto, .numero, td, dd, /* **Il codice che si legge al telefono.** Grande, spaziato, a cifre di larghezza uguale: chi
   lo detta non deve indovinare se quello è uno zero o una o, e chi ascolta non deve farlo
   ripetere. Le cifre tabellari sono l'unica ragione del carattere a larghezza fissa qui. */
.codice-dettato {
  font: 600 30px/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: .14em;
  color: var(--inchiostro); background: var(--crema);
  border-radius: var(--raggio); padding: var(--s4); margin: 0 0 var(--s4);
  text-align: center;
}
.pastiglia { font-variant-numeric: tabular-nums; }

/* --- superfici (§4): la scheda, senza ombra ----------------------------------------------------- */
.scheda {
  background: var(--superficie);
  border: 1px solid var(--filo);
  border-radius: var(--raggio);
  overflow: hidden;
  margin: 0 0 var(--s4);
}
.scheda > .cima {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--filo);
}
.scheda > .cima h2, .scheda > .cima h3 { margin: 0; }
.scheda > .corpo { padding: var(--s3) var(--s4); }
.fascia { background: var(--crema); border-radius: var(--raggio); padding: var(--s3) var(--s4); margin: var(--s4) 0; }
/* Le due righe tranquille della fascia di stato (8 ottobre 2026). Non portano un colore loro:
   la fascia ha già il suo fondo, e dentro una fascia **una riga in più non è una riga più forte**.
   `--tenue` su `--crema` fa 4,7 : 1 — sopra la soglia del testo corrente, e la guardia lo misura. */
/* La prima riga della fascia: il conteggio degli incontri. Porta il peso del testo normale,
   non un colore suo — dentro una fascia una riga in più non è una riga più forte. */
.fascia > .appuntamenti { margin: 0; }
.fascia > .chiusura,
.fascia > .in-attesa { color: var(--tenue); margin: var(--s2) 0 0; }
/* L'ora della chiusura in cifre tabulari, come ogni altra ora del prodotto. */
.fascia > .chiusura strong { font-variant-numeric: tabular-nums; color: var(--testo); }

/* --- il nastro dell'ambiente ------------------------------------------------------------------ */
.nastro {
  margin: 0;
  padding: var(--s1) var(--s4);
  background: var(--inchiostro);
  color: var(--bianco);
  font-size: 12.5px;
  text-align: center;
}

.stato { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s4); margin: 0 0 var(--s4); }
.stato dt { color: var(--tenue); }
.stato dd { margin: 0; }

/* --- messaggi: l'avviso è una delle tre corsie ammesse (4px terracotta) ------------------------ */
.messaggi { margin: 0 0 var(--s4); }
.avviso {
  color: var(--testo); background: var(--superficie);
  border: 1px solid var(--filo); border-left: 4px solid var(--marchio); border-radius: var(--raggio);
  padding: var(--s3) var(--s4); margin: 0 0 var(--s3);
}
.fatto {
  color: var(--inchiostro); background: var(--superficie);
  border: 1px solid var(--filo); border-radius: var(--raggio);
  padding: var(--s3) var(--s4); margin: 0 0 var(--s3);
}
/* La riga che compare dopo il cambio lingua: un invito, non un allarme. */
.messaggi .lingua {
  color: var(--inchiostro); background: var(--superficie);
  border: 1px solid var(--filo); border-radius: var(--raggio);
  padding: var(--s3) var(--s4); margin: 0 0 var(--s3);
}

/* Ciò che richiede attenzione: velo d'ocra, bordo d'ocra, testo ocra scura.
   `.senza-script` è stata tolta il 20 ottobre 2026 insieme al <noscript> della
   pagina d'accesso: una regola che non veste più niente è peso che si legge. */
.attenzione {
  color: var(--ocra-scura); background: var(--velo-ocra);
  border: 1px solid var(--attenzione); border-radius: var(--raggio);
  padding: var(--s3) var(--s4); margin: 0 0 var(--s4);
}
/* **Il codice che si legge al telefono.** Grande, spaziato, a cifre di larghezza uguale: chi
   lo detta non deve indovinare se quello è uno zero o una o, e chi ascolta non deve farlo
   ripetere. Le cifre tabellari sono l'unica ragione del carattere a larghezza fissa qui. */
.codice-dettato {
  font: 600 30px/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: .14em;
  color: var(--inchiostro); background: var(--crema);
  border-radius: var(--raggio); padding: var(--s4); margin: 0 0 var(--s4);
  text-align: center;
}
.pastiglia {
  display: inline-block; min-width: 20px; text-align: center;
  background: var(--attenzione); color: var(--inchiostro);
  border-radius: 999px; padding: 0 var(--s2);
  font-size: 12.5px; font-weight: 600; line-height: 20px;
}

footer {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s4);
  border-top: 1px solid var(--filo);
  color: var(--tenue);
  font-size: 12.5px;
}
footer p { margin: 0 0 var(--s2); }
.lingue { display: flex; gap: var(--s2); }
.lingue button[aria-current] { color: var(--inchiostro); border-color: var(--inchiostro); font-weight: 600; }

/* --- moduli ----------------------------------------------------------------------------------- */
label { display: block; margin: var(--s4) 0 var(--s1); font-weight: 600; color: var(--testo); }
label small { font-weight: 400; color: var(--tenue); }
input, textarea, select {
  width: 100%; font: inherit; padding: var(--s3);
  color: var(--testo); background: var(--superficie);
  border: 1px solid var(--filo-forte); border-radius: var(--raggio);
}
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--inchiostro); outline-offset: 2px;
}
fieldset { border: 1px solid var(--filo); border-radius: var(--raggio); margin: var(--s4) 0 0; padding: var(--s3) var(--s4); }
legend { font-weight: 600; color: var(--inchiostro); padding: 0 var(--s1); }
label.scelta { display: flex; gap: var(--s2); align-items: center; font-weight: 400; margin: var(--s1) 0; }
label.scelta input { width: auto; }
/* Una casella o un pallino non si allargano mai a tutta riga, anche senza la classe. */
input[type="radio"], input[type="checkbox"] { width: auto; accent-color: var(--inchiostro); }
.modulo { margin: 0 0 var(--s5); }
details summary { cursor: pointer; color: var(--inchiostro); font-weight: 600; margin: var(--s2) 0; }
progress { width: 100%; height: 12px; accent-color: var(--inchiostro); }

button, .pulsante {
  font: 600 14.5px/1.3 var(--corpo); padding: var(--s3) var(--s4); border-radius: var(--raggio);
  border: 1px solid var(--filo-forte); background: var(--superficie); color: var(--inchiostro);
  text-decoration: none; display: inline-block; min-height: 44px; cursor: pointer;
}
/* Bianco su terracotta fa 4,6 : 1: basta, ma mai sotto i 14,5 px (§7). */
button.primario, .pulsante {
  background: var(--marchio); border-color: var(--marchio); color: var(--bianco);
  font-size: 15px;
}
button.primario { margin: var(--s4) 0 0; width: 100%; }
button.sobrio {
  font-weight: 400; min-height: 0; padding: var(--s1) var(--s3);
  border-color: var(--filo); color: var(--testo); background: var(--superficie);
}
.elenco-scelte button { display: block; width: 100%; margin: var(--s2) 0; text-align: left; }
form.modulo > button { margin: var(--s2) 0 0; }
.in-linea { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: var(--s1) 0; }
.in-linea label { margin: 0; }
.in-linea input[type=file] { width: auto; border: none; padding: 0; background: none; }
form.in-linea { display: inline-flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin: 0; }
details.tocco summary { margin: 0; }

/* --- il guscio: una navigazione sola (§5) ----------------------------------------------------- */
.laterale { background: var(--crema); }
.menu-interruttore { position: absolute; opacity: 0; width: 1px; height: 1px; }
.marchio-riga { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.marchio { display: flex; align-items: center; gap: var(--s2); text-decoration: none; }
.marchio .nome { font: 600 19px/1 var(--titolo); color: var(--marchio); letter-spacing: .04em; }
.marchio .parole { display: flex; flex-direction: column; }
/* La riga sotto il nome (Stefano, 14 settembre): nella barra laterale e sulla copertina. */
.sottotitolo { font-size: 12px; line-height: 1.3; color: var(--tenue); }
main > .sottotitolo { font-size: 14.5px; margin: 0 0 var(--s2); }
.simbolo { width: 30px; height: 30px; flex: none; }
.simbolo .tavolo { fill: var(--marchio-tenue); stroke: var(--marchio); stroke-width: 1.5; }
.simbolo .lato { fill: var(--inchiostro); }
.simbolo .capo { fill: var(--marchio); }
.simbolo .nodo { fill: var(--attenzione); }
.menu-pulsante {
  margin: 0; font-weight: 600; color: var(--inchiostro); cursor: pointer;
  padding: var(--s2) var(--s3); border: 1px solid var(--filo-forte); border-radius: var(--raggio); background: var(--superficie);
}
.evento-in-corso {
  background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio);
  padding: var(--s3); margin: var(--s4) 0;
}
.evento-in-corso p { margin: 0; }
.evento-nome { font: 600 15px/1.35 var(--titolo); color: var(--inchiostro); }
.evento-in-corso .tenue { font-size: 12.5px; margin: var(--s1) 0 0; }
.voci { display: flex; flex-direction: column; }
.voci .etichetta { margin: var(--s4) 0 var(--s1); padding: 0 var(--s3); }
.voci a {
  display: block; padding: var(--s2) var(--s3); color: var(--inchiostro); text-decoration: none;
  border-left: 3px solid transparent; border-radius: 0 var(--raggio) var(--raggio) 0;
}
/* La voce attiva: la prima corsia ammessa (3px terracotta). */
.voci a /* **Il codice che si legge al telefono.** Grande, spaziato, a cifre di larghezza uguale: chi
   lo detta non deve indovinare se quello è uno zero o una o, e chi ascolta non deve farlo
   ripetere. Le cifre tabellari sono l'unica ragione del carattere a larghezza fissa qui. */
.codice-dettato {
  font: 600 30px/1.3 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; letter-spacing: .14em;
  color: var(--inchiostro); background: var(--crema);
  border-radius: var(--raggio); padding: var(--s4); margin: 0 0 var(--s4);
  text-align: center;
}
.pastiglia { float: right; margin: 0 0 0 var(--s2); }
.voci a[aria-current="page"] { background: var(--superficie); border-left-color: var(--marchio); font-weight: 600; }
.chi-sei { border-top: 1px solid var(--filo-forte); margin: var(--s4) 0 0; padding: var(--s3) 0 0; }
.chi-sei p { margin: 0; }
.chi-sei .chi { font-weight: 600; color: var(--inchiostro); }
.chi-sei .tenue { font-size: 12.5px; }
.chi-sei form { margin: var(--s2) 0 0; }
.voci-basse { display: none; }
.testata { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 var(--s4); background: var(--crema); border-bottom: 1px solid var(--filo-forte); }
.testata form { margin: 0; }

/* Le altre pagine della scheda (17 settembre 2026): la scheda raccoglie campi, le azioni stanno
   altrove, e da qui ci si arriva. Collegamenti, non pulsanti: non si invia niente. */
.altre-pagine { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s4) 0; }

/* Due agende della stessa impresa: una sotto l'altra sul telefono, affiancate dove c'è
   spazio. Con una agenda sola questo contenitore non viene nemmeno scritto (§3.3). */
.agende-affiancate { display: grid; gap: var(--s4); }
@media (min-width: 900px) {
  .agende-affiancate { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (min-width: 900px) {
  body.con-barra .guscio { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
  .laterale {
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    border-right: 1px solid var(--filo-forte); padding: var(--s4);
  }
  .menu-pulsante { display: none; }
  .navigazione { display: flex; flex-direction: column; min-height: calc(100% - 48px); }
  .chi-sei { margin-top: auto; }
}
@media (max-width: 899.98px) {
  /* La barra alta compatta: marchio e menu in 56 px. Il menu si apre sotto, nel flusso della
     pagina: non è un pannello che scivola. */
  .laterale { position: sticky; top: 0; z-index: 10; border-bottom: 1px solid var(--filo-forte); }
  .marchio-riga { height: 56px; padding: 0 var(--s4); }
  /* Nella barra alta compatta la riga sotto il nome non entra: resta solo «TINA». */
  .marchio .sottotitolo { display: none; }
  .navigazione { display: none; padding: 0 var(--s4) var(--s4); max-height: calc(100vh - 56px); overflow-y: auto; }
  .menu-interruttore:checked ~ .navigazione { display: block; }
  .menu-interruttore:focus-visible + .marchio-riga .menu-pulsante { outline: 2px solid var(--inchiostro); outline-offset: 2px; }
  .evento-in-corso { margin: 0 0 var(--s2); }
  body.con-voci-basse .contenuto { padding: 0 0 var(--s8); }
  .voci-basse {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; height: 56px;
    background: var(--superficie); border-top: 1px solid var(--filo-forte);
  }
  .voci-basse a {
    display: flex; align-items: center; justify-content: center; text-align: center;
    color: var(--inchiostro); text-decoration: none; font-size: 13px; border-top: 3px solid transparent;
  }
  .voci-basse a[aria-current="page"] { font-weight: 600; border-top-color: var(--marchio); }
}

/* --- pagine iniziali: le relazioni prima dell'agenda ------------------------------------------ */
.relazioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
.relazione {
  background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio);
  padding: var(--s3) var(--s4); color: var(--testo); text-decoration: none;
}
.relazione strong { display: block; font: 600 34px/1.1 var(--titolo); color: var(--inchiostro); font-variant-numeric: tabular-nums; }
.relazione.accesa { background: var(--velo-ocra); border-color: var(--attenzione); }
.relazioni.secondarie .relazione strong { font-size: 23px; }

/* --- agende: da telefono, una riga per quarto d'ora ------------------------------------------ */
.agenda { list-style: none; padding: 0; margin: 0; }
.riga { display: flex; gap: var(--s3); padding: var(--s3) var(--s2); border-bottom: 1px solid var(--filo-tenue); }
.riga .ora { min-width: 104px; color: var(--tenue); }
.riga.incontro { background: var(--crema); }
.riga.incontro .cosa { font-weight: 600; color: var(--inchiostro); }
.riga.neutralizzato { color: var(--tenue); background: var(--pagina); }
.riga.proposte_ricevute .cosa, .riga.invito_mandato .cosa { color: var(--inchiostro); }

/* --- piano della giornata: la tabella larga scorre dentro di sé ------------------------------- */
.scorre { overflow-x: auto; max-width: 100%; }
.giorni { display: flex; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s4); }
.giorni a[aria-current] { font-weight: 600; }
.giorni-mancanti { font: 600 17px/1.3 var(--titolo); color: var(--inchiostro); }
.piano { border-collapse: collapse; font-size: 12px; background: var(--superficie); }
.piano th, .piano td { border: 1px solid var(--filo); padding: 0 var(--s1); white-space: nowrap; }
.piano td { min-width: 22px; height: 22px; padding: 0; }
.piano td a { display: block; min-width: 22px; height: 22px; }   /* tutta la cella è il collegamento */
.piano td.incontro { background: var(--inchiostro); color: var(--bianco); }
.piano td.libero { background: var(--velo-ocra); }   /* i buchi, in evidenza */
.piano td.neutralizzato, .piano td.tavolo_sospeso { background: var(--filo-tenue); }
.piano td.conto { text-align: right; padding: 0 var(--s1); }

/* --- catalogo, schede, inviti ------------------------------------------------------------------ */
.completezza {
  background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio);
  padding: var(--s2) var(--s4); margin: var(--s4) 0;
}
.catalogo { list-style: none; padding: 0; margin: 0; }
.scheda-breve {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s3) 0; border-bottom: 1px solid var(--filo-tenue); color: var(--testo); text-decoration: none;
}
.scheda-breve strong { color: var(--inchiostro); }
.scheda-breve .perche { color: var(--inchiostro); font-size: 13px; }
.suggeriti, .invita { background: var(--crema); border-radius: var(--raggio); padding: var(--s2) var(--s4) var(--s3); margin: var(--s4) 0; }
.logo { max-height: 40px; max-width: 96px; object-fit: contain; }
.logo-grande { max-height: 80px; max-width: 192px; object-fit: contain; margin: var(--s4) 0 0; }
.miniatura { max-width: 128px; max-height: 128px; object-fit: cover; border-radius: var(--raggio); }
.media, .prodotto, .invito { border-top: 1px solid var(--filo-tenue); padding: var(--s3) 0; }
.messaggio-invito { font-style: italic; }
/* Un indirizzo lungo, su un telefono, va a capo invece di uscire dallo schermo. */
.indirizzo, .indirizzo a, dl.stato dd { overflow-wrap: anywhere; }
.galleria { display: flex; flex-wrap: wrap; gap: var(--s2); }
.messaggio { border-top: 1px solid var(--filo); padding: var(--s2) 0 0; }
.messaggio pre { white-space: pre-wrap; color: var(--testo); background: var(--pagina); padding: var(--s3); border-radius: var(--raggio); font-size: 13px; }

/* --- verifica delle destinazioni prima di neutralizzare ---------------------------------------- */
table { border-collapse: collapse; }
table.verifica { margin: var(--s2) 0 var(--s4); background: var(--superficie); }
table.verifica th, table.verifica td { border: 1px solid var(--filo); padding: var(--s1) var(--s2); text-align: left; }
table.verifica tr.occupata td { background: var(--velo-marchio); }

/* --- la giornata ------------------------------------------------------------------------------- */
.presenze { list-style: none; padding: 0; margin: 0; }
.presenza {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline;
  padding: var(--s2) 0; border-bottom: 1px solid var(--filo-tenue);
}
.presenza .tavolo { font-weight: 600; min-width: 36px; color: var(--inchiostro); }
.presenza .assente { text-decoration: line-through; color: var(--tenue); }
dl.numeri { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin: var(--s4) 0; }
dl.numeri div { background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio); padding: var(--s3) var(--s4); }
dl.numeri dt { color: var(--tenue); font-size: 12.5px; }
dl.numeri dd { margin: 0; font: 600 34px/1.1 var(--titolo); color: var(--inchiostro); }
table.report { background: var(--superficie); }
table.report th, table.report td { border: 1px solid var(--filo-tenue); padding: var(--s1) var(--s3); text-align: right; }
table.report th:first-child { text-align: left; }
table.report th { color: var(--inchiostro); font-weight: 600; }
ol.stati-evento { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); padding: 0; margin: 0 0 var(--s4); list-style: none; }
ol.stati-evento li + li::before { content: "→ "; color: var(--tenue); }
ol.stati-evento li.attuale { font-weight: 600; color: var(--inchiostro); text-decoration: underline; }
.avviso-esportazione {
  color: var(--testo); background: var(--velo-ocra);
  border: 1px solid var(--attenzione); border-radius: var(--raggio);
  padding: var(--s3) var(--s4); margin: 0 0 var(--s4);
}

/* --- relazioni e opportunità -------------------------------------------------------------------- */
.azione { padding: var(--s2) 0; }
.azione.scaduta { background: var(--velo-ocra); border: 1px solid var(--attenzione); border-radius: var(--raggio); padding: var(--s2) var(--s3); }
.opportunita {
  background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio);
  padding: var(--s2) var(--s4) var(--s3); margin: var(--s4) 0;
}
.opportunita.aperta { border-color: var(--attenzione); }
.opportunita h3 { margin: var(--s2) 0 var(--s1); }
.storia { list-style: none; padding: 0; margin: 0; }
.storia li { border-top: 1px solid var(--filo-tenue); padding: var(--s1) 0; }

/* --- impostazione ------------------------------------------------------------------------------ */
table.elenco { background: var(--superficie); width: 100%; }
table.elenco td, table.elenco th { text-align: left; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--filo-tenue); }
table.elenco th { color: var(--inchiostro); font-weight: 600; }
code.segreto {
  font-size: 16px; word-break: break-all; background: var(--pagina);
  padding: var(--s1) var(--s2); border: 1px solid var(--filo); border-radius: var(--raggio);
}
form.regole fieldset { margin: 0 0 var(--s3); }

/* --- i candidati del recupero, uno per riga ----------------------------------------------------- */
form.candidato {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s4);
  padding: var(--s3) 0; border-bottom: 1px solid var(--filo-tenue);
}

/* --- le pagine rivestite (punto 4): regole che valgono dentro una scheda ------------------------ */
/* Una tabella dentro una scheda si allarga alla scheda e perde i bordi esterni. */
.scheda table { width: 100%; background: none; }
.scheda table th, .scheda table td { border: 0; border-bottom: 1px solid var(--filo-tenue); padding: var(--s2) var(--s4); }
.scheda table thead th { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.scheda table tr:last-child > * { border-bottom: 0; }
.scheda tr.totale > * { font-weight: 600; color: var(--inchiostro); border-top: 1px solid var(--filo); }
.scheda > p.corpo { margin: 0; border-top: 1px solid var(--filo); }

/* Il commutatore: cambia la vista della stessa pagina (giornata, Nessuno/Pochi). Non è una navigazione. */
.commutatore { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--filo-forte); border-radius: var(--raggio); overflow: hidden; margin: 0 0 var(--s4); background: var(--superficie); }
.commutatore a { padding: var(--s2) var(--s4); color: var(--inchiostro); text-decoration: none; border-left: 1px solid var(--filo); }
.commutatore a:first-child { border-left: 0; }
.commutatore a[aria-current="page"] { background: var(--inchiostro); color: var(--bianco); font-weight: 600; }
/* Gli elenchi, gli inviti, i moduli e i riquadri a scomparsa che stanno da soli nella pagina sono
   schede: fondo bianco, bordo --filo, un raggio. Dentro una scheda perdono il bordo. */
ul.cruscotto { list-style: none; margin: 0 0 var(--s4); padding: 0; background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio); }
ul.cruscotto li { padding: var(--s2) var(--s4); border-bottom: 1px solid var(--filo-tenue); }
ul.cruscotto li:last-child { border-bottom: 0; }
.scheda ul.cruscotto { border: 0; border-radius: 0; margin: 0; }
main > article.invito, main > form.modulo, main > details, main > .scorre > table.registro, main > .scorre > table.elenco {
  background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio);
}
main > article.invito { padding: var(--s3) var(--s4); margin: 0 0 var(--s3); }
main > dl.stato { background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio); padding: var(--s3) var(--s4); }
main > form.modulo { padding: var(--s2) var(--s4) var(--s4); margin: 0 0 var(--s4); }
main > details { padding: var(--s1) var(--s4); margin: 0 0 var(--s3); }
main > details[open] { padding: var(--s1) var(--s4) var(--s4); }
.scheda > .cima > :last-child:not(h2):not(h3) { margin: 0 0 0 auto; }
.cima > span.conto { color: var(--tenue); font-weight: 600; }

.scheda.quarto { margin: 0 0 var(--s4); }
.scheda.quarto .presenze li { padding: var(--s2) var(--s4); }
.scheda.quarto > details.corpo { border-top: 1px solid var(--filo); }
/* Il quarto d'ora in corso: la seconda corsia ammessa (3px petrolio). */
.quarto.in-corso > .cima h2 { border-left: 3px solid var(--inchiostro); padding: 0 0 0 var(--s2); }

.scheda > .corpo > :last-child { margin-bottom: 0; }
/* Una tabella che scorre dentro il corpo di una scheda arriva ai suoi bordi. */
.scheda > .corpo > .scorre { margin: 0 calc(-1 * var(--s4)); }
.scheda > .corpo > .scorre + p { margin-top: var(--s3); }

table.registro { width: 100%; }
table.registro th, table.registro td { text-align: left; vertical-align: top; padding: var(--s2) var(--s3); border-bottom: 1px solid var(--filo-tenue); }
table.registro thead th, table.elenco thead th { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
table.registro td small { color: var(--tenue); }

table.elenco th:first-child { min-width: 200px; }
table.elenco td, table.elenco th { vertical-align: top; }

.scheda.giornata .riga { padding: var(--s3) var(--s4); }
.scheda.giornata .riga:last-child { border-bottom: 0; }
details.annulla summary { font-weight: 400; margin: var(--s1) 0 0; }

.scheda.pila > article.invito { padding: var(--s3) var(--s4); border-top: 0; border-bottom: 1px solid var(--filo-tenue); }
.scheda.pila > article.invito:last-child { border-bottom: 0; }
.scheda.pila > article.invito form { margin: 0; }
.scheda.pila > article.invito button.primario { width: auto; margin: 0; }
ul.catalogo { background: var(--superficie); border: 1px solid var(--filo); border-radius: var(--raggio); }
ul.catalogo .scheda-breve { padding: var(--s3) var(--s4); }
ul.catalogo li:last-child .scheda-breve { border-bottom: 0; }

.scheda.storia-relazione .storia li { padding: var(--s2) var(--s4); }
.scheda.storia-relazione .storia li:first-child { border-top: 0; }

.completezza > .fatto { border: 0; background: none; padding: var(--s2) 0; margin: 0; font-weight: 600; }

main > form + p { margin-top: var(--s4); }

/* --- l'agenda stampata: solo l'agenda ----------------------------------------------------------- */
@media print {
  .nastro, .barra, .laterale, .barra-alta, .voci-basse, footer, form, details, .messaggi, nav.giorni { display: none !important; }
  body { background: var(--superficie); }
  .riga { break-inside: avoid; }
}

/* Gli atti della finestra nella pagina dell'evento: un elenco di fatti, non di azioni.
   Le spaziature stanno nella scala --s1…--s8: un valore fuori scala si vede, e la guardia
   lo prende. */
.atti-finestra { margin: 8px 0 0; padding-left: 16px; }
.atti-finestra > li { margin: 4px 0; }

/* Le imprese che non possono entrare: un elenco corto e azionabile, non un conto. */
.restano-fuori { margin: 8px 0 0; padding-left: 16px; }
.restano-fuori > li { margin: 4px 0; }

/* Le ore di ogni giornata: un riquadro per giornata, e l'elenco che le riassume. */
.ore-delle-giornate { margin: 8px 0 0; padding-left: 16px; }
.ore-delle-giornate > li { margin: 4px 0; }
fieldset.una-giornata { border: 1px solid var(--filo-forte); border-radius: var(--raggio); padding: 12px; margin: 0 0 12px; }
fieldset.una-giornata > legend { font-weight: 600; padding: 0 4px; }