/* Matera Sport · calcio — identita' visiva.
   Impostazione «blocchi pieni», scelta il 29 agosto 2026: testata blu scuro,
   fascia di colore attorno al risultato, intestazioni di tabella su fondo
   pieno, oro come unico accento. Sostituisce il registro tenue di SPEC.md §8,
   che e' stato riscritto di conseguenza.

   Tre regole che tengono insieme le pagine:
   1. le colonne di numeri si incolonnano, sempre, con le cifre tabulari;
   2. le liste di definizioni sono griglie a due colonne, cosi' i valori
      partono tutti dalla stessa verticale;
   3. il colore pieno segna i confini: testata, fasce, teste di tabella.
      Dentro i blocchi si torna al bianco, perche' i dati si leggono su carta. */

/* I @font-face stanno in /stile/caratteri.css, generato da bin/scarica-caratteri.php
   e collegato prima di questo foglio: un @import qui ritarderebbe il testo. */

/* ------------------------------------------------------------------ token */

:root {
  --blu-900:  #0A2540;   /* testata, teste di tabella */
  --blu-700:  #0B5FD0;   /* fascia del risultato, link */
  --blu-100:  #EEF4FB;   /* righe alterne */
  --oro:      #E8B23A;   /* accento, filo sotto la testata */
  --oro-scuro:#9A7418;   /* oro leggibile su bianco */
  --carta:    #FFFFFF;
  --carta-2:  #EEF3F8;
  --inchiostro: #0E141A;
  --grigio:   #41505F;
  --filo:     #C6D3E0;

  --fondo:         var(--carta);
  --fondo-2:       var(--carta-2);
  --testo:         var(--inchiostro);
  --testo-2:       var(--grigio);
  --tenue:         #5D6C7B;
  --primario:      var(--blu-700);
  --titolo:        var(--blu-900);
  --accento:       var(--oro);
  --accento-testo: var(--oro-scuro);
  --bordo:         var(--filo);
  --riga:          var(--blu-100);
  --riga-nostra:   #DCEAF9;   /* la riga del Matera nelle tabelle */
  --riga-tocco:    #FBEFD2;   /* la riga che si accende sotto il dito o il mouse */
  --riga-hover:    #D6E4F5;   /* riga sotto il puntatore: deve staccare dal fondo */

  /* I pulsanti hanno un fondo pieno, quindi vogliono un colore proprio: preso
     da --titolo finivano bianchi su bianco nel tema scuro, dove il titolo è
     bianco per definizione. */
  --bottone-fondo: var(--blu-700);
  --bottone-testo: #FFFFFF;

  /* I tre esiti, usati ovunque si parli di come è andata: pallini della forma,
     righe del registro, fascia della gara, salite e discese nella storia. */
  --esito-su:   #1F8A4C;   /* vittoria, e salita di categoria */
  --esito-pari: #B98A17;   /* pareggio */
  --esito-giu:  #C0392B;   /* sconfitta, e discesa di categoria */

  --testata-fondo: var(--blu-900);
  --testata-testo: #FFFFFF;
  --fascia-fondo:  var(--blu-700);
  --fascia-testo:  #FFFFFF;
  --th-fondo:      var(--blu-900);
  --th-testo:      #FFFFFF;

  --titoli: 'Archivo', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --sans:   'Source Sans 3', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  --misura: 68ch;
  --largo:  72rem;
  --etichetta: 10rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo:         #0E1419;
    --fondo-2:       #161F27;
    --testo:         #EAF0F6;
    --testo-2:       #B3C0CD;
    --tenue:         #93A1AF;
    --primario:      #5FB3EC;
    --titolo:        #FFFFFF;
    --accento-testo: var(--oro);
    --bordo:         #26333F;
    --riga:          #141D25;
    --riga-nostra:   #15293C;
    --riga-tocco:    #33291A;
    --riga-hover:    #1E2E3D;
    --bottone-fondo: #2E7BD6;
    --bottone-testo: #FFFFFF;
    --esito-su:   #33A867;
    --esito-pari: #E0B646;
    --esito-giu:  #D95546;
    --testata-fondo: #070C10;
    --fascia-fondo:  #123A63;
    --th-fondo:      #1B2836;
    --th-testo:      var(--oro);
  }
}

/* ------------------------------------------------------------------ base */

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

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

body {
  margin: 0;
  overflow-x: hidden;   /* le fasce escono dal contenitore: niente barra orizzontale */
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

a { color: var(--primario); font-weight: 600; text-underline-offset: 0.15em; }
a:hover { color: var(--titolo); }

h1, h2, h3 {
  font-family: var(--titoli);
  font-weight: 700;
  color: var(--titolo);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

h1 { font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem); }

/* ogni sezione si apre con un blocchetto d'accento invece che con un filo */
main h2 {
  font-size: 1.3rem;
  margin: 3rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
main h2::before {
  content: '';
  width: 6px;
  height: 1.15em;
  background: var(--accento);
  flex: none;
}
.scheda h2, .varco h2 { margin-top: 0; }

h3 { font-size: 1.05rem; margin-top: 1.75rem; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: 0.35rem; }

.contenitore { max-width: var(--largo); margin: 0 auto; padding: 0 1.5rem; }
.lettura { max-width: var(--misura); }

.salta {
  position: absolute; left: -9999px;
  background: var(--fondo); color: var(--primario);
  padding: 0.5rem 0.75rem; border: 1px solid var(--bordo);
}
.salta:focus { left: 0.5rem; top: 0.5rem; z-index: 10; }

/* Testo che resta nel documento ma non a video: serve dove il disegno dice
   gia' la stessa cosa in forma grafica — il tabellone di una gara — e ripetere
   in lettere sarebbe rumore. Non si usa display:none, che toglierebbe il testo
   anche allo screen reader. */
.fuori-vista {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------- testata */

.testata {
  background: var(--testata-fondo);
  border-bottom: 4px solid var(--oro);
}

.testata .contenitore {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 2rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.marchio {
  font-family: var(--titoli);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--testata-testo);
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.marchio:hover { color: var(--testata-testo); }

.marchio .sezione {
  font-family: var(--sans);
  font-size: 0.6em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--oro);
  margin-left: 0.55rem;
}

/* la dicitura sta anche in testata: piu' il sito somiglia a quello di una
   lega, piu' deve dire subito che ufficiale non e' */
.non-ufficiale {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
  white-space: nowrap;
}

.navigazione {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.navigazione a {
  text-decoration: none;
  color: var(--testata-testo);
  opacity: 0.82;
  padding: 0.2rem 0;
  border-bottom: 3px solid transparent;
}
.navigazione a:hover { opacity: 1; border-bottom-color: rgba(255, 255, 255, 0.35); }
.navigazione [aria-current] { opacity: 1; border-bottom-color: var(--oro); }

/* ------------------------------------------------------------ briciole */

.briciole {
  font-size: 0.82rem;
  color: var(--testo-2);
  padding: 0.8rem 0 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.briciole li { margin: 0; }
.briciole li::after { content: '\203A'; margin-left: 0.35rem; color: var(--bordo); }
.briciole li:last-child::after { content: ''; }

/* ------------------------------------------------------------ contenuto */

main { padding: 1.5rem 0 3.5rem; }

.occhiello {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accento-testo);
  margin: 0 0 0.4rem;
}

.sommario { font-size: 1.1rem; margin-bottom: 2rem; }

/* ---------------------------------------------------------------- fascia */

/* Il blocco che si guarda per primo: esce dal contenitore e prende tutta la
   larghezza della finestra. La misura e' calcolata sul contenitore, non sul
   viewport, cosi' resta centrato a qualunque larghezza. */
.fascia {
  background: var(--fascia-fondo);
  color: var(--fascia-testo);
  margin: 0 calc(50% - 50vw) 2.5rem;
  padding: 1.6rem calc(50vw - 50%) 1.8rem;
}
/* attaccata alla testata: annulla lo spazio in cima al contenuto */
.fascia.attaccata { margin-top: -1.5rem; }

.fascia .comp {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--oro);
  margin: 0 0 1.25rem;
  text-align: center;
}
.fascia .sotto { text-align: center; font-size: 0.95rem; margin: 1.25rem 0 0; opacity: 0.9; }
.fascia .sotto a { color: #FFFFFF; }

.tabellone {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: 46rem;
  margin: 0 auto;
}
.tabellone .squadra { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.tabellone .squadra.ospite { flex-direction: row-reverse; text-align: right; }
.tabellone .squadra img { width: 72px; height: 72px; object-fit: contain; flex: none; }
.tabellone .nome {
  font-family: var(--titoli);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.tabellone .punteggio {
  font-family: var(--titoli);
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  padding: 0 0.5rem;
  white-space: nowrap;
}
/* Com'è finita, sotto le cifre: una parola in colore. Sul fondo blu della
   fascia i tre colori dell'esito sarebbero spenti, quindi lì si schiariscono. */
.tabellone .come-finita {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.45rem;
}
.fascia .esito-vittoria  .come-finita { color: #6FD79B; }
.fascia .esito-pareggio  .come-finita { color: #F0C75A; }
.fascia .esito-sconfitta .come-finita { color: #F2837A; }
.fascia .esito-vittoria  { border-bottom: 3px solid #6FD79B; }
.fascia .esito-pareggio  { border-bottom: 3px solid #F0C75A; }
.fascia .esito-sconfitta { border-bottom: 3px solid #F2837A; }
.fascia .punteggio { padding-bottom: 0.35rem; }

/* il parziale sotto il punteggio: piccolo, non compete con il risultato */
.tabellone .parziale {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.85;
  margin-top: 0.3rem;
}

.tabellone .attesa {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 2px solid currentColor;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .tabellone { grid-template-columns: 1fr; gap: 0.75rem; text-align: center; }
  .tabellone .squadra, .tabellone .squadra.ospite { flex-direction: column; text-align: center; }
  .tabellone .squadra img { width: 56px; height: 56px; }
}

/* --------------------------------------------------------------- banda */

/* Una fotografia sola, come stacco prima dell'archivio storico. */
.banda {
  margin: 2.5rem 0 0;
  border: 1px solid var(--bordo);
  border-radius: 4px;
  overflow: hidden;
  background: var(--fondo-2);
}
.banda img { display: block; width: 100%; height: clamp(140px, 20vw, 220px); object-fit: cover; }
.banda figcaption {
  font-size: 0.78rem;
  color: var(--tenue);
  padding: 0.45rem 0.8rem;
  border-top: 1px solid var(--bordo);
}

/* --------------------------------------------------------------- schede */

.griglia {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  margin: 1.5rem 0 0;
}

/* Una scheda che occupa tutta la riga, qualunque sia il numero di colonne. */
.griglia > .scheda.larga { grid-column: 1 / -1; }
/* Non 68ch come il resto: qui la riga puo' allungarsi, ma non fino ai 105
   caratteri della scheda intera, che non si leggerebbero piu'. */
.griglia > .scheda.larga p { max-width: 88ch; }

.scheda {
  border: 1px solid var(--bordo);
  border-radius: 4px;
  background: var(--fondo);
  overflow: hidden;
}
/* l'occhiello dentro una scheda diventa la sua barra di testa */
.scheda > .occhiello {
  background: var(--th-fondo);
  color: var(--th-testo);
  margin: 0 0 1rem;
  padding: 0.6rem 1rem;
  letter-spacing: 0.12em;
}
.scheda > *:not(.occhiello) { margin-left: 1rem; margin-right: 1rem; }
.scheda > *:last-child { margin-bottom: 1rem; }
.scheda.spenta > .occhiello { background: var(--fondo-2); color: var(--testo-2); }
.scheda .dettagli { --etichetta: 7.5rem; }

.incontro {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  margin: 0.25rem 1rem 1rem;
}
.incontro .lato { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.incontro .lato.ospite { flex-direction: row-reverse; text-align: right; }
.incontro .nome { font-family: var(--titoli); font-weight: 700; font-size: 1.02rem; line-height: 1.2; letter-spacing: -0.01em; }
.incontro img { width: 40px; height: 40px; object-fit: contain; flex: none; }

.punteggio {
  font-family: var(--titoli);
  font-size: 2rem;
  font-weight: 800;
  color: var(--titolo);
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.punteggio.da-giocare {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--testo-2);
}

/* liste di definizioni: griglia a due colonne, valori tutti allineati */
.dettagli { margin: 0; font-size: 1rem; }
.dettagli div {
  display: grid;
  grid-template-columns: var(--etichetta) 1fr;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--bordo);
}
.dettagli div:first-child { border-top: 0; padding-top: 0; }
.dettagli dt { color: var(--testo-2); }
.dettagli dd { margin: 0; }

@media (max-width: 30rem) {
  .dettagli div { grid-template-columns: 1fr; gap: 0; }
  .dettagli dt { font-size: 0.82rem; }
}

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

.tabella-scorrevole { overflow-x: auto; margin: 1.25rem 0 2rem; }

table.dati {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
table.dati caption {
  text-align: left;
  color: var(--testo-2);
  font-size: 0.88rem;
  padding-bottom: 0.75rem;
  max-width: var(--misura);
}
table.dati thead th {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--th-testo);
  background: var(--th-fondo);
  padding: 0.7rem 0.8rem;
  white-space: nowrap;
}
table.dati thead th:first-child { border-top-left-radius: 3px; }
table.dati thead th:last-child { border-top-right-radius: 3px; }
table.dati td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--bordo);
  vertical-align: middle;
}
table.dati tbody tr:hover { background: var(--riga-hover); }

/* La riga richiamata da un'ancora e quella del Matera si segnano con una
   barra sulla prima cella soltanto. Sulla riga intera il box-shadow non si
   disegna nelle tabelle a bordi uniti, e ripetuto su ogni cella diventa una
   grata di trattini oro. */
table.dati tbody tr:target td { background: var(--blu-100); }
table.dati tbody tr:target td:first-child { box-shadow: inset 4px 0 0 var(--oro); }

table.dati .num { text-align: right; font-variant-numeric: tabular-nums; }
table.dati .nota { color: var(--testo-2); }
table.dati th.stretta, table.dati td.stretta { width: 1%; white-space: nowrap; }
table.dati td.stemma { width: 1%; padding-right: 0; }

table.dati.righe-alterne tbody tr:nth-child(even) { background: var(--riga); }
table.dati.righe-alterne tbody tr:nth-child(even):hover { background: var(--riga-hover); }

table.dati.fissa { table-layout: fixed; }
table.dati.fissa td { overflow-wrap: break-word; }

.riga-evento td { color: var(--testo-2); font-style: italic; }

/* Come è finita una stagione: un filo di colore sul fianco e una freccia
   accanto al piazzamento. Il colore non è mai l'unico segno — c'è la freccia,
   e per chi non vede il testo esteso accanto. */
.esito-salita td:first-child  { box-shadow: inset 4px 0 0 var(--esito-su); }
.esito-discesa td:first-child { box-shadow: inset 4px 0 0 var(--esito-giu); }
.esito-evento td:first-child  { box-shadow: inset 4px 0 0 var(--accento); }
.esito-salita .freccia  { color: var(--esito-su); }
.esito-discesa .freccia { color: var(--esito-giu); }
.freccia { font-size: 0.7em; margin-left: 0.2rem; }

/* Le gare nel registro: stesso filo di colore delle stagioni, e il punteggio
   nel colore dell'esito. Il colore non è l'unico segno — accanto al risultato
   c'è la parola, letta dagli screen reader. */
.gara-vittoria  td:first-child { box-shadow: inset 4px 0 0 var(--esito-su); }
.gara-pareggio  td:first-child { box-shadow: inset 4px 0 0 var(--esito-pari); }
.gara-sconfitta td:first-child { box-shadow: inset 4px 0 0 var(--esito-giu); }
.gara-vittoria  .risultato { color: var(--esito-su); font-weight: 700; }
.gara-pareggio  .risultato { color: var(--esito-pari); font-weight: 700; }
.gara-sconfitta .risultato { color: var(--esito-giu); font-weight: 700; }

/* Come è finita la stagione, letto accanto alla posizione invece che in una
   tabella a parte: una barra di colore sulla cella del numero, la stessa che
   torna in legenda. Il colore non è l'unico segno — dentro la cella c'è la
   parola, che gli screen reader leggono e la vista non vede. */
.esito-promossa   td:first-child { box-shadow: inset 4px 0 0 var(--esito-su); }
.esito-playoff    td:first-child { box-shadow: inset 4px 0 0 var(--blu-700); }
.esito-playout    td:first-child { box-shadow: inset 4px 0 0 var(--esito-pari); }
.esito-retrocessa td:first-child { box-shadow: inset 4px 0 0 var(--esito-giu); }
.esito-ripescata  td:first-child { box-shadow: inset 4px 0 0 var(--esito-su); }
.esito-esclusa    td:first-child,
.esito-ritirata   td:first-child { box-shadow: inset 4px 0 0 var(--grigio); }

.legenda-esiti {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  color: var(--grigio);
}
.legenda-esiti li { display: flex; align-items: center; gap: 0.45rem; }
.legenda-esiti li::before { content: ""; width: 4px; height: 1.05em; flex: none; }
.legenda-esiti .esito-promossa::before   { background: var(--esito-su); }
.legenda-esiti .esito-playoff::before    { background: var(--blu-700); }
.legenda-esiti .esito-playout::before    { background: var(--esito-pari); }
.legenda-esiti .esito-retrocessa::before { background: var(--esito-giu); }
.legenda-esiti .esito-ripescata::before  { background: var(--esito-su); }
.legenda-esiti .esito-esclusa::before,
.legenda-esiti .esito-ritirata::before   { background: var(--grigio); }

.riga-nostra td { font-weight: 700; background: var(--riga-nostra); }
.riga-nostra td:first-child { box-shadow: inset 4px 0 0 var(--oro); }

/* La riga del Matera ha già la sua barra oro: quando la stagione le dà anche un
   verdetto, le due convivono — oro fuori, esito dentro. */
.riga-nostra.esito-promossa   td:first-child { box-shadow: inset 4px 0 0 var(--oro), inset 9px 0 0 var(--esito-su); }
.riga-nostra.esito-playoff    td:first-child { box-shadow: inset 4px 0 0 var(--oro), inset 9px 0 0 var(--blu-700); }
.riga-nostra.esito-playout    td:first-child { box-shadow: inset 4px 0 0 var(--oro), inset 9px 0 0 var(--esito-pari); }
.riga-nostra.esito-retrocessa td:first-child { box-shadow: inset 4px 0 0 var(--oro), inset 9px 0 0 var(--esito-giu); }
table.dati.righe-alterne tbody tr.riga-nostra:hover td { background: var(--riga-nostra); }

.con-stemma { display: flex; align-items: center; gap: 0.55rem; }
.con-stemma img { width: 26px; height: 26px; object-fit: contain; flex: none; }
td.stemma img { width: 28px; height: 28px; object-fit: contain; display: block; }

.dettaglio-cella { display: block; color: var(--testo-2); font-size: 0.85rem; }

/* ----------------------------------------------------------- andamento */

/* Il grafico della piramide su /storia/. Due strati: l'SVG disegna griglia e
   linee, lo strato sopra e' fatto di collegamenti veri, uno per stagione,
   messi in percentuale sulle stesse coordinate. Niente JavaScript: la bolla si
   apre con :hover e con :focus-visible, quindi anche con il solo Tab.

   Lo scorrimento orizzontale ha una spaziatura generosa sopra e sotto perche'
   overflow-x: auto rende automatico anche l'asse verticale: senza quel margine
   le bolle dei punti alti verrebbero tagliate. */

.andamento { margin: 1.25rem 0 2rem; }

.andamento-scorrevole { overflow-x: auto; padding: 4rem 0 3.5rem; }

.andamento-riquadro {
  position: relative;
  min-width: 52rem;
}

.andamento-tela { display: block; width: 100%; height: auto; }

.andamento-tela .griglia { stroke: var(--bordo); stroke-width: 1; }
.andamento-tela .griglia-verticale { stroke-dasharray: 2 4; }
.andamento-tela .tacca {
  fill: var(--testo-2);
  font-family: var(--sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.andamento-tela .tacca-y { text-anchor: end; font-weight: 700; }

.andamento-tela .linea {
  fill: none;
  stroke: var(--primario);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* il vuoto si vede che e' un vuoto: tratteggio sottile, colore spento */
.andamento-tela .ponte {
  fill: none;
  stroke: var(--testo-2);
  stroke-width: 1.5;
  stroke-dasharray: 3 5;
  opacity: 0.55;
}

.andamento-punti { position: absolute; inset: 0; }

/* Novantaquattro anni su una riga sola: fra un punto e il successivo ci sono
   sette pixel scarsi. Il riquadro sensibile e' percio' piu' piccolo del minimo
   che si userebbe altrove, e i punti si coprono in parte fra loro. Va bene qui
   perche' subito sotto c'e' la stessa informazione in tabella, con le righe
   grandi e i collegamenti separati: chi non arriva al punto arriva alla riga. */
.punto {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  margin: -0.425rem 0 0 -0.425rem;   /* il riquadro sensibile e' centrato sul punto */
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.punto:hover, .punto:focus-visible { z-index: 3; }
.punto::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--primario);
  border: 2px solid var(--fondo);
  transition: transform 0.12s ease-out;
}
.punto.corrente::before { background: var(--accento-testo); width: 0.7rem; height: 0.7rem; }
.punto:hover::before,
.punto:focus-visible::before { transform: scale(1.6); }
.punto:focus-visible { outline: 2px solid var(--accento-testo); outline-offset: 2px; }

.bolla {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  width: max-content;
  max-width: 15rem;
  padding: 0.5rem 0.7rem;
  /* fondo scuro in tutti e due i temi: --titolo diventa bianco al buio e la
     bolla sparirebbe insieme al suo testo */
  background: var(--testata-fondo);
  color: #FFFFFF;
  border: 1px solid var(--bordo);
  border-radius: 4px;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: left;
  font-weight: 400;
  pointer-events: none;
}
.punto:hover .bolla,
.punto:focus-visible .bolla { display: block; }

.bolla b {
  display: block;
  font-family: var(--titoli);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.bolla em { display: block; font-style: normal; color: var(--accento); }

.punto.a-sinistra .bolla { left: 0; transform: none; }
.punto.a-destra .bolla { left: auto; right: 0; transform: none; }
.punto.in-basso .bolla { bottom: auto; top: 1.5rem; }

.andamento figcaption {
  color: var(--testo-2);
  font-size: 0.9rem;
  max-width: var(--misura);
}

@media (prefers-reduced-motion: reduce) {
  .punto::before { transition: none; }
}

/* -------------------------------------------------------------- flusso */

/* La prima notizia prende tutta la riga, le altre stanno a due a due: l'ultima
   uscita è quella che si legge, le precedenti si scorrono. */
.flusso {
  list-style: none;
  margin: 1.25rem 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
}
/* La prima: riga intera, fondo pieno e filo d'oro sul fianco. Si deve capire
   a colpo d'occhio che è l'ultima uscita, non solo che è più in alto. */
.flusso > li:first-child { grid-column: 1 / -1; }
.flusso > li.in-evidenza {
  grid-template-columns: 1fr;
  gap: 0.35rem;
  background: var(--fondo-2);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--accento);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.flusso > li.in-evidenza .etichetta {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accento-testo);
}
.flusso > li.in-evidenza .titolo { font-size: 1.35rem; line-height: 1.15; }
.flusso > li.in-evidenza .sintesi { font-size: 1.02rem; }
.flusso > li.in-evidenza .quando { order: -1; }
.flusso li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.25rem 1.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--bordo);
  margin: 0;
}
/* Niente bordo di chiusura: a due colonne finirebbe sotto una sola.
   Dalla seconda in poi la colonna è metà pagina: la data va sopra al testo,
   che altrimenti resterebbe schiacciato in poche parole per riga. */
.flusso > li:not(:first-child) { grid-template-columns: 1fr; gap: 0.15rem; }
.flusso .quando { color: var(--testo-2); font-size: 0.9rem; margin: 0; padding-top: 0.15rem; }
.flusso .corpo { margin: 0; max-width: var(--misura); min-width: 0; }
.flusso .titolo { font-family: var(--titoli); font-weight: 700; font-size: 1.05rem; color: var(--titolo); margin: 0 0 0.25rem; letter-spacing: -0.01em; }
.flusso .sintesi { margin: 0 0 0.35rem; }
.flusso .fonte { font-size: 0.88rem; color: var(--testo-2); margin: 0; }

/* Sotto i 52rem due colonne di notizie non stanno in piedi: si torna in fila. */
@media (max-width: 52rem) {
  .flusso { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .flusso li { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* L'ora di una gara spostata rispetto al resto della giornata. */
.calendario .ora-gara {
  display: block;
  font-size: 0.8rem;
  color: var(--testo-2);
  white-space: nowrap;
}

/* Nella cronologia di una gara, la rete dell'avversaria: stesso segno, ma
   il nome in tono spento, così la sequenza si legge per squadra. */
.cronologia li.loro .chi { color: var(--testo-2); font-weight: 600; }
.cronologia li.loro .segno.rete { opacity: 0.55; }

/* ------------------------------------------------------ minitabellino */

/* Sotto il punteggio in home: a sinistra chi giocava in casa, a destra chi era
   in trasferta. Solo reti ed espulsioni — il resto sta nella scheda della gara. */
.minitabellino-riquadro {
  margin: 0.75rem 0 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bordo);
}
table.minitabellino {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.minitabellino td { padding: 0.2rem 0; vertical-align: baseline; }
.minitabellino .chi { width: 40%; }
.minitabellino .chi.destra { text-align: right; }
/* I minuti al centro, incolonnati e in cifre tabulari: sono una sequenza. */
.minitabellino .quando {
  width: 10%;
  color: var(--testo-2);
  font-size: 0.85em;
  white-space: nowrap;
  text-align: right;
  padding-right: 0.5rem;
}
.minitabellino .quando + .quando { text-align: left; padding-right: 0; padding-left: 0.5rem; }
.minitabellino .segno { font-size: 0.8em; margin-right: 0.35rem; }
.minitabellino .destra .segno { margin: 0 0 0 0.35rem; }
.minitabellino .segno.rosso { color: #C0392B; }

@media (prefers-color-scheme: dark) {
  .minitabellino .segno.rosso { color: #D95546; }
}

/* ------------------------------------------------ aggiungi al calendario */

.calendario-pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0.75rem;
}

.bottone {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--bottone-fondo);
  border-radius: 4px;
  background: var(--bottone-fondo);
  color: var(--bottone-testo);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
}
.bottone:hover { filter: brightness(1.1); color: var(--bottone-testo); }
.bottone.secondario {
  background: transparent;
  color: var(--primario);
  border-color: var(--bordo);
}
.bottone.secondario:hover { background: transparent; border-color: var(--primario); color: var(--primario); }

/* Dentro la fascia i pulsanti stanno al centro, sotto la sede: il fondo è
   pieno, quindi diventano chiari su blu invece che blu su bianco. */
.fascia .calendario-pulsanti { justify-content: center; margin: 1.1rem 0 0; }
.fascia .calendario-pulsanti .bottone {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--fascia-testo);
}
.fascia .calendario-pulsanti .bottone:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #fff;
  filter: none;
}
.fascia .indirizzo-calendario { display: none; }   /* l'indirizzo sta in /campionato/ */

.indirizzo-calendario { max-width: var(--misura); margin: 0 0 1.5rem; }
.indirizzo-calendario code {
  display: inline-block;
  background: var(--fondo-2);
  border: 1px solid var(--bordo);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  font-size: 0.85em;
  word-break: break-all;
}

/* Dentro la fascia contano meno del risultato, e si fanno piccoli. Nessun
   margine negativo: quando erano fuori dal colore serviva ad avvicinarli, qui
   li faceva salire sopra la riga della sede. */
.calendario-pulsanti.minuti .bottone { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* --------------------------------------------------------- video gara */

.video-gara {
  position: relative;
  max-width: 44rem;
  aspect-ratio: 16 / 9;
  margin: 1rem 0 0.75rem;
  border: 1px solid var(--bordo);
  border-radius: 4px;
  overflow: hidden;
  background: var(--testata-fondo);
}
.video-gara iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ------------------------------------------------------ forma recente */

/* Cinque caselle per riga di classifica: si leggono da destra (l'ultima
   giocata) verso sinistra (le prossime). Il colore non basta da solo — ogni
   pallino porta il suo testo, e il vuoto delle gare da giocare si distingue
   anche per la forma, non solo per la tinta. */
.forma { white-space: nowrap; }
.forma-testa { font-size: 0.78rem; }

.pallino {
  position: relative;
  display: inline-block;
  width: calc(0.7rem + 4px);
  height: calc(0.7rem + 4px);
  border-radius: 50%;
  margin-right: 0.25rem;
  vertical-align: middle;
}

/* Le gare del Matera portano alla loro scheda: il pallino è un collegamento,
   e lo dice alzandosi appena sotto il puntatore. */
a.pallino { cursor: pointer; }
a.pallino:hover, a.pallino:focus-visible { transform: translateY(-1px); }
a.pallino:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

/* La bolla: nome dell'avversaria, risultato e data sotto. Compare al
   passaggio del mouse e al fuoco da tastiera, senza JavaScript. */
.pallino .bolla {
  position: absolute;
  bottom: calc(100% + 0.45rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: none;
  min-width: 9rem;
  padding: 0.5rem 0.7rem;
  background: var(--testata-fondo);
  color: #fff;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  font-size: 0.82rem;
  line-height: 1.35;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: normal;
}
.pallino .bolla::after {   /* la punta verso il pallino */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--testata-fondo);
}
.pallino .bolla b { display: block; font-family: var(--titoli); letter-spacing: -0.01em; }
.pallino .bolla .dove { display: block; font-size: 0.74rem; opacity: 0.75; }
.pallino .bolla .punteggio { display: block; font-size: 1.05rem; font-weight: 700; margin-top: 0.15rem; }
.pallino .bolla em { display: block; font-style: normal; font-size: 0.74rem; opacity: 0.75; }
.pallino:hover .bolla, .pallino:focus .bolla { display: block; }

/* Le prime righe non hanno spazio sopra: lì la bolla scende sotto. */
.dati tbody tr:nth-child(-n+2) .pallino .bolla { bottom: auto; top: calc(100% + 0.45rem); }
.dati tbody tr:nth-child(-n+2) .pallino .bolla::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--testata-fondo);
}
.pallino.v { background: var(--esito-su); }
.pallino.n { background: var(--esito-pari); }
.pallino.p { background: var(--esito-giu); }
.pallino.da-giocare {
  background: transparent;
  border: 1px solid var(--bordo);
}


/* Sopra i 62rem la classifica ci sta tutta: si toglie lo scorrimento, che
   ritaglierebbe la bolla ai bordi della tabella. Sotto, lo scorrimento serve
   e la bolla resta dentro: su schermi stretti si tocca, non si passa sopra. */
@media (min-width: 62rem) {
  .tabella-scorrevole.con-bolle { overflow: visible; }
}

@media (max-width: 40rem) {
  .pallino { width: calc(0.6rem + 4px); height: calc(0.6rem + 4px); margin-right: 0.2rem; }
}

/* ----------------------------------------------------------- convocati */

.convocati {
  list-style: none;
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  margin: 0 0 1.5rem;
  padding: 0;
}
.convocati li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding: 0.35rem 0;
  border-top: 1px solid var(--bordo);
}
.convocati .numero {
  min-width: 1.6rem;
  color: var(--testo-2);
  font-size: 0.85rem;
  text-align: right;
}

/* ------------------------------------------------------------- sponsor */

.sponsor {
  list-style: none;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  margin: 1.25rem 0 2rem;
  padding: 0;
}
.sponsor li {
  border: 1px solid var(--bordo);
  border-radius: 4px;
  background: var(--fondo);
  padding: 1rem;
  margin: 0;
}
/* Il logo sta dentro un riquadro bianco: molti marchi sono pensati per il
   bianco e su fondo scuro sparirebbero. */
.sponsor picture {
  display: block;
  background: #fff;
  border-radius: 3px;
  padding: 0.75rem;
  margin-bottom: 0.75rem;
}
.sponsor img { display: block; width: 100%; height: auto; }
.sponsor .nome { font-weight: 600; margin: 0 0 0.2rem; }
.sponsor .nota { margin: 0 0 0.2rem; }

/* --------------------------------------------------------- navigazione */

.scorrimento {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--bordo);
  margin-top: 2.5rem;
  padding-top: 1rem;
  font-size: 0.92rem;
}
.scorrimento > :last-child { text-align: right; }
.scorrimento > :nth-child(2) { text-align: center; color: var(--testo-2); }

.varco {
  border: 1px solid var(--bordo);
  border-left: 6px solid var(--oro);
  border-radius: 4px;
  padding: 1.25rem 1.4rem;
  margin: 2.5rem 0 0;
  background: var(--fondo-2);
}

/* ----------------------------------------------------------- provenienza */

.provenienza {
  font-size: 0.88rem;
  color: var(--tenue);
  border-top: 1px solid var(--bordo);
  margin-top: 2.5rem;
  padding-top: 0.8rem;
  max-width: var(--misura);
}

/* ---------------------------------------------------------------- piede */

.piede {
  background: var(--testata-fondo);
  color: rgba(255, 255, 255, 0.82);
  border-top: 4px solid var(--oro);
  margin-top: 3.5rem;
  padding: 1.5rem 0 2.5rem;
  font-size: 0.9rem;
}
.piede p { margin: 0 0 0.4rem; max-width: var(--misura); }
.piede strong { color: #FFFFFF; font-weight: 700; }
.piede a { color: #FFFFFF; }

/* --------------------------------------------------------- commutatore */

/* Tre viste della stessa classifica, commutate con radio e CSS. Niente
   JavaScript: se il foglio di stile non arrivasse, le tre tabelle
   resterebbero tutte visibili una sotto l'altra, che è un ripiego
   accettabile, non una pagina rotta. */
.scelta-vista {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.commutatore {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.5rem 0 0.25rem;
}
.commutatore label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.45rem 1rem;
  border: 2px solid var(--bordo);
  border-radius: 999px;
  color: var(--testo-2);
  background: var(--fondo);
  cursor: pointer;
  user-select: none;
}
.commutatore label:hover { border-color: var(--primario); color: var(--primario); }

/* Le regole non nominano gli id: legano la posizione del radio a quella del
   pulsante e del pannello. Cosi' lo stesso commutatore vale su qualunque
   pagina, e aggiungere una vista non richiede di toccare il foglio di stile.
   `nth-of-type` conta fra gli input, `nth-child` fra i pannelli. */
.scelta-vista:nth-of-type(1):checked ~ .commutatore label:nth-child(1),
.scelta-vista:nth-of-type(2):checked ~ .commutatore label:nth-child(2),
.scelta-vista:nth-of-type(3):checked ~ .commutatore label:nth-child(3),
.scelta-vista:nth-of-type(4):checked ~ .commutatore label:nth-child(4) {
  background: var(--th-fondo);
  border-color: var(--th-fondo);
  color: var(--th-testo);
}

.scelta-vista:nth-of-type(1):focus-visible ~ .commutatore label:nth-child(1),
.scelta-vista:nth-of-type(2):focus-visible ~ .commutatore label:nth-child(2),
.scelta-vista:nth-of-type(3):focus-visible ~ .commutatore label:nth-child(3),
.scelta-vista:nth-of-type(4):focus-visible ~ .commutatore label:nth-child(4) {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
}

.viste .vista { display: none; }
.scelta-vista:nth-of-type(1):checked ~ .viste .vista:nth-child(1),
.scelta-vista:nth-of-type(2):checked ~ .viste .vista:nth-child(2),
.scelta-vista:nth-of-type(3):checked ~ .viste .vista:nth-child(3),
.scelta-vista:nth-of-type(4):checked ~ .viste .vista:nth-child(4) { display: block; }

/* ------------------------------------------------------------ cronologia */

/* Gli eventi della gara in ordine di tempo. Chi non ha un minuto lo dichiara:
   in Eccellenza la cronaca spesso non lo pubblica, e fingerlo sarebbe peggio. */
.cronologia { list-style: none; margin: 1.25rem 0 2rem; padding: 0; }
.cronologia li {
  display: grid;
  grid-template-columns: 4.5rem 1.6rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-top: 1px solid var(--bordo);
  margin: 0;
}
.cronologia li:first-child { border-top: 0; }
.cronologia .quando { font-weight: 700; color: var(--testo-2); font-size: 0.9rem; }
.cronologia .senza-minuto { font-weight: 400; color: var(--tenue); }
.cronologia .segno { font-size: 0.95rem; line-height: 1; }
.cronologia .segno.cartellino { color: var(--oro-scuro); }
.cronologia .segno.cartellino.rosso { color: #9A2B2B; }
.cronologia .chi { font-weight: 600; }
.cronologia .dettaglio { color: var(--testo-2); }
.cronologia .dettaglio::before { content: ' · '; color: var(--bordo); }

/* Gli eventi di cui la fonte non dice il momento: fuori dalla linea del
   tempo, in un elenco che dichiara cosa sono. */
.sospesi { list-style: none; margin: 0.75rem 0 2rem; padding: 0; max-width: var(--misura); }
.sospesi li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-top: 1px dashed var(--bordo);
  margin: 0;
}
.sospesi li:first-child { border-top: 1px solid var(--bordo); }
.sospesi .chi { font-weight: 600; }
.sospesi .dettaglio { color: var(--testo-2); }
.sospesi .segno.cartellino { color: var(--oro-scuro); }
.sospesi .segno.cartellino.rosso { color: #9A2B2B; }

.cronologia li.tappa {
  grid-template-columns: 1fr;
  justify-items: center;
  background: var(--fondo-2);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--testo-2);
  padding: 0.5rem;
}

@media (max-width: 32rem) {
  .cronologia li { grid-template-columns: 3.6rem 1.2rem 1fr; gap: 0.5rem; }
}

/* ------------------------------------------------- testo di una stagione */

.testo-lungo h2 { font-size: 1.15rem; margin: 2rem 0 0.75rem; }
.testo-lungo h2::before { display: none; }
.testo-lungo blockquote {
  margin: 1.25rem 0;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 4px solid var(--accento);
  color: var(--testo-2);
}

/* Una stagione riscritta su fonti primarie esce dal vincolo CC BY-SA:
   dirlo in pagina è ciò che rende l'archivio citabile. */
.verificata {
  font-size: 0.9rem;
  color: var(--testo-2);
  border-left: 4px solid var(--accento);
  padding: 0.35rem 0 0.35rem 0.9rem;
  margin: 1.5rem 0;
}

/* la data accanto al numero di giornata, nel calendario */
/* Rosa e staff: quattro tabelle diverse, una per reparto, ma le colonne
   devono cadere sulla stessa verticale. Con table-layout: fixed le larghezze
   le decide il colgroup e non piu' il contenuto della prima riga, cosi'
   Portieri e Attaccanti si incolonnano. */
table.dati.rosa, table.dati.staff { table-layout: fixed; }
table.dati.rosa td, table.dati.staff td { overflow-wrap: break-word; }
/* Sette colonne: numero, giocatore, ruolo, anno, presenze, reti, note. Il
   numero ne vuole due cifre e basta — prima ereditava la larghezza che era del
   nome, e il ruolo finiva a capo. */
table.dati.rosa col:nth-child(1) { width: 2.8rem; }
table.dati.rosa col:nth-child(2) { width: 24%; }
table.dati.rosa col:nth-child(3) { width: 20%; }
table.dati.rosa col:nth-child(4),
table.dati.rosa col:nth-child(5),
table.dati.rosa col:nth-child(6) { width: 4.5rem; }
table.dati.rosa td:nth-child(3) { white-space: nowrap; }
table.dati.staff col:nth-child(1) { width: 42%; }

/* Calendario: una tabellina per giornata, in colonne. Le trenta giornate in
   fila una sotto l'altra erano un rotolo; affiancate si leggono a colpo
   d'occhio. auto-fill fa il resto: tre colonne sul largo, due sul medio, una
   sul telefono, senza inseguire i breakpoint. */
.turni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18.5rem, 1fr));
  gap: 0.5rem 1.75rem;
  align-items: start;
}
.turno h3 { margin: 1.4rem 0 0; font-size: 1rem; }
.turno .tabella-scorrevole { margin: 0.5rem 0 0; }
table.dati.calendario {
  table-layout: fixed;
  font-size: 0.9rem;
}
table.dati.calendario col:nth-child(1) { width: 1.9rem; }
table.dati.calendario col:nth-child(3) { width: 2.2rem; }
table.dati.calendario col:nth-child(4) { width: 1.6rem; }

/* Il rimando alla scheda: una cella sola per gara, che scavalca le due righe.
   Compare solo dove la pagina esiste davvero, cioe' sulle gare del Matera. */
table.dati.calendario td.verso { padding: 0 0.2rem 0 0; text-align: center; }
table.dati.calendario td.verso a {
  display: block;
  font-size: 1.5rem;
  line-height: 1;
  text-decoration: none;
  color: var(--primario);
}
table.dati.calendario td.verso a:hover { color: var(--accento-testo); }
table.dati.calendario td { padding: 0.3rem 0.4rem; overflow-wrap: break-word; }
table.dati.calendario td.stemma { padding-right: 0; width: auto; }
table.dati.calendario td.stemma img { width: 20px; height: 20px; }
table.dati.calendario .num { font-weight: 700; }

/* La coppia casa/fuori e' una gara sola: il filo si chiude sotto la seconda
   riga, non fra le due. */
table.dati.calendario tr.casa td  { border-bottom: 0; padding-bottom: 0.1rem; }
table.dati.calendario tr.casa td.verso { border-bottom: 1px solid var(--bordo); padding-bottom: 0; }
table.dati.calendario tr.fuori td { padding-top: 0.1rem; }
table.dati.calendario tbody tr:hover { background: none; }
table.dati.calendario tbody tr.casa:hover td,
table.dati.calendario tbody tr.casa:hover + tr.fuori td { background: var(--riga-hover); }
table.dati.calendario tbody tr.fuori:hover td { background: var(--riga-hover); }
table.dati.calendario tbody tr.casa:has(+ tr.fuori:hover) td { background: var(--riga-hover); }
.riga-nostra.fuori td:first-child { box-shadow: inset 4px 0 0 var(--oro); }

.quando-giornata {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--testo-2);
  letter-spacing: 0;
}
main h3 { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }

/* ------------------------------------------------------------- consenso */

/* Barra in fondo, non una finestra che copre la pagina: il lettore deve poter
   leggere anche senza decidere. Compare solo se non ha ancora scelto. */
.consenso {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--testata-fondo);
  color: #FFFFFF;
  border-top: 4px solid var(--oro);
  padding: 1rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 2rem;
}
.consenso p {
  margin: 0;
  font-size: 0.92rem;
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.88);
}
.consenso a { color: #FFFFFF; }

.consenso-pulsanti { display: flex; gap: 0.6rem; flex: none; }
.consenso button {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.5rem 1.1rem;
  border-radius: 3px;
  border: 2px solid var(--oro);
  background: var(--oro);
  color: #14120E;
  cursor: pointer;
}
.consenso button.secondario { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.5); }
.consenso button:hover { filter: brightness(1.08); }
.consenso button.secondario:hover { border-color: #FFFFFF; }

/* stesso aspetto per i comandi nella pagina /cookie/ */
.comandi-consenso { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.5rem; }
.comandi-consenso button {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 3px;
  border: 2px solid var(--primario);
  background: var(--primario);
  color: #FFFFFF;
  cursor: pointer;
}
.comandi-consenso button.secondario { background: transparent; color: var(--primario); }
.stato-consenso { font-weight: 600; }

@media print {
  .navigazione, .salta, .scorrimento, .banda, .consenso { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .testata, .piede, .fascia { background: none !important; color: #000 !important; }
  table.dati thead th { background: none; color: #000; border-bottom: 2px solid #000; }
}

/* I marcatori sotto il punteggio, nel calendario del girone: testo minore e
   grigio, perché la riga che conta resta il risultato. Il trattino che divide
   le due squadre è quello della fonte, non uno che aggiungiamo noi. */
table.dati.calendario tbody tr.reti-gara td {
  padding-top: 0;
  border-top: 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--grigio);
}

/* Marcatori di una gara del girone: un riquadro che si apre passando sulla
   gara, con i gol di casa a sinistra e quelli di fuori a destra. Le gare del
   Matera non ce l'hanno, perché hanno una pagina con il tabellino intero.
   Il pallone è solo il segno che il riquadro c'è; il contenuto è ripetuto in
   chiaro per chi non vede, e la bolla è dichiarata decorativa. */
table.dati.calendario td.verso.con-reti { position: relative; }

.segno-reti {
  font-size: 0.7rem;
  opacity: 0.45;
  cursor: default;
}
table.dati.calendario tr:hover ~ tr td.verso .segno-reti,
td.verso.con-reti:hover .segno-reti { opacity: 1; }

.bolla-reti {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.35rem);
  z-index: 5;
  min-width: 15rem;
  padding: 0.5rem 0.7rem;
  background: var(--fondo);
  border: 1px solid var(--bordo);
  box-shadow: 0 6px 18px rgb(10 37 64 / 18%);
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
}

/* Si apre passando sulla cella, su una delle due righe della gara, o su
   entrambe: in una tabella le due righe sono sorelle, e senza `:has` la riga
   di sotto non potrebbe raggiungere la cella, che appartiene a quella sopra. */
td.verso.con-reti:hover .bolla-reti,
tr.casa:hover td.verso.con-reti .bolla-reti,
tr.casa:has(+ tr.fuori:hover) td.verso.con-reti .bolla-reti { display: block; }

.bolla-reti .incontro {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--bordo);
  font-weight: 600;
  color: var(--titolo);
}
.bolla-reti .incontro b { font-variant-numeric: tabular-nums; }
.bolla-reti table { width: 100%; border-collapse: collapse; }
.bolla-reti td {
  width: 50%;
  padding: 0.1rem 0.5rem 0.1rem 0;
  color: var(--testo-2);
  vertical-align: top;
}
.bolla-reti td:last-child { padding-right: 0; text-align: right; }