/* LO STILE DI CASA — le regole votate nel laboratorio, in un posto solo.
 *
 * Va linkato **dopo** il <style> di ogni pagina: qui non c'è niente di nuovo da
 * inventare, ci sono le otto scelte del round 2 applicate sopra a quel che c'era.
 * Il perché di ognuna sta in STILE.md.
 *
 *   A4  titoli di servizio in maiuscoletto spaziato
 *   B2  ritmo compatto
 *   B3  a fasce alternate
 *   D4  bottoni di solo testo sottolineato
 *   E3  campi a pillola piena
 *   G2  l'attesa è uno scheletro
 *   H5  il numero grande è colorato
 *   I5  il movimento è con la molla
 */

:root{
  --molla: cubic-bezier(.34, 1.4, .5, 1);
  --fascia: color-mix(in srgb, var(--rule-soft) 55%, transparent);
}

/* ─── A4 · i titoli di servizio ───────────────────────────────────────────
   Solo i titoli di *sezione*: l'h1 di copertina resta il serif grande, e il
   nome di una persona o di una gara dentro un foglio pure. Qui si fa da parte
   la scaffalatura, non il contenuto. */
section h2,
.mdg-fam h3{
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.6;
  margin-bottom:10px;
}
section h2 em,
.mdg-fam h3 em{font-style:normal;color:var(--dawn-ink)}

/* ─── B2 + B3 · compatto, e a fasce ───────────────────────────────────────
   Le due scelte vanno insieme: fitto si legge solo se l'occhio ha un appiglio.
   La fascia è tenue apposta — a righe strette una zebra vera stanca. */
table.dati td{padding:5px 8px 5px 0}
table.dati tbody tr:nth-child(odd) td{background:var(--fascia)}
table.dati tbody tr:nth-child(odd) td:first-child{border-radius:6px 0 0 6px}
table.dati tbody tr:nth-child(odd) td:last-child{border-radius:0 6px 6px 0}
table.dati td{border-bottom:0}

.riga{padding:6px 8px;border-bottom:0;border-radius:7px}
#elenco > .riga:nth-child(odd){background:var(--fascia)}
.riga .pt b{font-size:1.15rem}

.pal td{padding:6px 8px 6px 0}
.foglio table td{padding:6px 8px 6px 0}

/* ─── D4 · i bottoni sono testo sottolineato ──────────────────────────────
   Niente scatole: è un sito da leggere. Restano scatole solo i filtri, che
   sono interruttori e non azioni, e la X che chiude un foglio. */
.piu,
.lk a,
.pagina,
.mdg-tutte,
.albo .tutti{
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:8px 2px !important;
  min-height:38px;
  width:auto !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start !important;
  color:var(--dawn-ink) !important;
  font-weight:700;
  border-bottom:2px solid color-mix(in srgb, var(--dawn) 55%, transparent) !important;
  text-decoration:none;
}
.piu:hover,
.lk a:hover,
.pagina:hover,
.mdg-tutte:hover,
.albo .tutti:hover{color:var(--ink) !important;border-bottom-color:var(--ink) !important}
.lk{gap:20px}
.piu{margin:14px 0 34px}
.pagina{margin-top:16px}

/* ─── E3 · i campi sono pillole piene ─────────────────────────────────────
   Il fondo pieno dice "qui si scrive" meglio di un contorno sottile. */
.cerca input,
.filtro input,
input.cx,
.menu select{
  background:var(--rule-soft);
  border:1px solid transparent;
  border-radius:999px;
  padding-left:17px;
  padding-right:17px;
}
.cerca input:focus,
.filtro input:focus,
input.cx:focus,
.menu select:focus{background:#fff;border-color:var(--rule)}

/* ─── G2 · l'attesa è uno scheletro ───────────────────────────────────────
   Barre nella forma di quel che sta arrivando, invece di una frase. */
@keyframes onda{0%{background-position:100% 0}100%{background-position:-100% 0}}
.scheletro{margin:6px 0 2px}
.scheletro i{
  display:block;height:12px;border-radius:6px;margin-bottom:8px;
  background:linear-gradient(90deg,var(--rule-soft) 30%,#fff 50%,var(--rule-soft) 70%);
  background-size:200% 100%;
  animation:onda 1.4s linear infinite;
}
.scheletro i:nth-child(1){width:64%}
.scheletro i:nth-child(2){width:92%}
.scheletro i:nth-child(3){width:78%}
.scheletro i:nth-child(4){width:88%}
.scheletro i:nth-child(5){width:52%}

/* ─── H5 · il numero grande è colorato ────────────────────────────────────
   I numeri sono il contenuto di questo sito: che si vedano. */
.num .v,
.riga .pt b,
.mdg-testa b,
.mdg-fam .ft span b,
.rec .c .tm,
.foglio .sq b{color:var(--dawn-ink)}
.num .v small{color:var(--ink-3)}

/* ─── I5 · il movimento è con la molla ────────────────────────────────────
   Una curva sola per tutto il sito, e le righe che arrivano a cascata. */
@keyframes su-molla{from{opacity:0;transform:translateY(10px) scale(.985)}}
.foglio{animation:su-molla .42s var(--molla) both !important}
.velo.on .foglio{animation:su-molla .42s var(--molla) both}

#corpoRighe tr,
#listaFed > .fedele,
.mdg-fam{animation:su-molla .34s var(--molla) both}
#corpoRighe tr:nth-child(1){animation-delay:0s}
#corpoRighe tr:nth-child(2){animation-delay:.03s}
#corpoRighe tr:nth-child(3){animation-delay:.06s}
#corpoRighe tr:nth-child(4){animation-delay:.09s}
#corpoRighe tr:nth-child(5){animation-delay:.12s}
#corpoRighe tr:nth-child(n+6){animation-delay:.15s}
.mdg-fam:nth-child(1){animation-delay:0s}
.mdg-fam:nth-child(2){animation-delay:.05s}
.mdg-fam:nth-child(3){animation-delay:.1s}
.mdg-fam:nth-child(n+4){animation-delay:.15s}

@media(prefers-reduced-motion:reduce){
  .foglio,.velo.on .foglio,#corpoRighe tr,#listaFed > .fedele,.mdg-fam{animation:none !important}
  .scheletro i{animation:none}
}