/* ciofimario.it - foglio di stile unico. Font di sistema, nessuna risorsa esterna. */

:root {
  --carta: #F2F5F6;       /* sfondo pagina */
  --foglio: #FFFFFF;      /* superfici */
  --onda: #DDEEEF;        /* fascia strumenti, dal blu-verde del logo BlackBox */
  --inchiostro: #15243A;  /* testo */
  --tenue: #475768;       /* testo secondario */
  --linea: #C3CFD6;
  --mare: #0B6670;        /* colore principale */
  --mare-forte: #084F57;
  --su-mare: #FFFFFF;
  --ambo: #1F7A44;        /* verde ambo, come nelle schede BlackBox */
  --su-ambo: #FFFFFF;
  --ambata: #F1C643;      /* giallo ambata */
  --su-ambata: #15243A;
  --errore: #9E2A2A;
  --fondo-errore: #FBECEC;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", P052, Georgia, serif;
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --larghezza: 72rem;
  --largo: 86rem;         /* apertura e strumenti */
  /* scala "quanto" (ritardo, frequenza): un solo tono di mare, dal chiaro allo scuro; livello 0 = palla neutra.
     Verificata con validate_palette.js --ordinal sul bianco e sul fondo scuro. */
  --liv1: #77C0C7; --liv2: #3F9EA8; --liv3: #16767F; --liv4: #084F57;
  --su-liv1: #15243A; --su-liv2: #0E1A22; --su-liv3: #FFFFFF; --su-liv4: #FFFFFF;
  --barra: #3F9EA8; --traccia: #E3EEF0;
  --gutter: clamp(1rem, 3.5vw, 2.25rem);
  /* misure dell'impaginazione: tutto il sito usa queste, per restare coerente */
  --h1: clamp(2rem, 1.2rem + 1.9vw, 3rem);
  --h2: clamp(1.55rem, 1.2rem + 1.3vw, 2.05rem);
  --h3: 1.2rem;
  --sp-sezione: clamp(2rem, 5vw, 3.5rem);     /* spazio sopra e sotto le sezioni */
  --sp-riquadro: clamp(.85rem, 2vw, 1.35rem); /* spazio interno di riquadri e strumenti */
  --controllo: 2.75rem;                        /* altezza dei controlli principali: 44px */
  --palla: 2.1em;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --carta: #0E1A22;
    --foglio: #152530;
    --onda: #11303A;
    --inchiostro: #E6EDF0;
    --tenue: #A7B6C0;
    --linea: #2E4350;
    --mare: #6FCAD1;
    --mare-forte: #9ADDE2;
    --su-mare: #0E1A22;
    --ambo: #2A8C52;
    --ambata: #E9BE3F;
    --errore: #FFB0A8;
    --fondo-errore: #3A1D1D;
    --liv1: #2A6670; --liv2: #3A8C96; --liv3: #5DB5BD; --liv4: #9ADDE2;
    --su-liv1: #E6EDF0; --su-liv2: #0E1A22; --su-liv3: #0E1A22; --su-liv4: #0E1A22;
    --barra: #5DB5BD; --traccia: #1E3440;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  font-size: 100%; /* 16px di base */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Testo che cresce con lo schermo: 18px fino a 1600px, poi fino a 21px sui 2560px. */
@media (min-width: 100rem) { html { font-size: clamp(100%, 0.5rem + 0.5vw, 112.5%); } } /* fino a 18px sui 2560px */

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--sans);
  line-height: 1.5;
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--mare); text-underline-offset: .18em; }
a:hover { color: var(--mare-forte); }

:focus-visible {
  outline: 3px solid var(--mare);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -.005em;
}
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-weight: 700; margin-top: 1.5rem; }
p, ul, ol, dl { margin: 0 0 .8rem; }
.testo { max-width: 38em; }
.testo-largo { max-width: 46em; }
strong { font-weight: 700; }

.vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.salta {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  background: var(--foglio); padding: .6rem 1rem; border: 2px solid var(--mare);
}
.salta:focus { top: 1rem; }

.contenitore {
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenitore.largo { max-width: var(--largo); }

/* ---------- Testata e menu ---------- */

.testata {
  position: sticky; top: 0; z-index: 10;
  background: var(--carta);
  border-bottom: 1px solid var(--linea);
}
.testata-riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 3.25rem;
}
.marchio { display: block; padding-block: .3rem; flex: none; }
.marchio img { height: 2rem; width: auto; } /* logo storico: 56px di sorgente, nitido fino a 2x */
@media (max-width: 40rem) { .marchio img { height: 2.9rem; } } /* versione a due righe */
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.menu a {
  display: inline-block; padding: .5rem 0; color: var(--inchiostro);
  text-decoration: none; font-size: .95rem;
  border-bottom: 2px solid transparent;
}
.menu a:hover { border-bottom-color: var(--mare); color: var(--inchiostro); }

.menu-btn {
  display: none;
  font: inherit; font-weight: 600; color: var(--inchiostro);
  background: var(--foglio); border: 2px solid var(--inchiostro); border-radius: 6px;
  padding: .4rem .9rem; min-height: var(--controllo); cursor: pointer;
}
.menu-btn::after { content: " +"; }
.menu-btn[aria-expanded="true"]::after { content: " \2212"; }

@media (max-width: 80rem) { /* sotto questa larghezza logo e menu non stanno su una riga */
  .js .menu-btn { display: block; }
  .testata-riga { flex-wrap: wrap; }
  .menu { flex-basis: 100%; }
  .js .menu-btn[aria-expanded="false"] + .menu { display: none; }
  .menu ul { flex-direction: column; gap: 0; padding-bottom: .75rem; }
  .menu a { display: block; padding: .7rem 0; font-size: 1.05rem; border-bottom: 1px solid var(--linea); }
}

section[id], [id].strumento { scroll-margin-top: 4.25rem; }

/* ---------- Pulsanti ---------- */

.pulsante {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--controllo); padding: .5rem 1.15rem;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
  border-radius: 6px; border: 2px solid var(--mare);
  background: var(--mare); color: var(--su-mare);
  text-decoration: none; cursor: pointer;
}
.pulsante:hover { background: var(--mare-forte); border-color: var(--mare-forte); color: var(--su-mare); }
.pulsante.secondario { background: transparent; color: var(--mare); }
.pulsante.secondario:hover { background: var(--foglio); color: var(--mare-forte); }
.pulsante:disabled { opacity: .55; cursor: not-allowed; }
.pulsante.compatto { min-height: 2.5rem; padding: .35rem .9rem; font-size: .95rem; }

/* ---------- Apertura: testo a sinistra, tabellone dell'ultima estrazione a destra ---------- */

.apertura { padding-block: clamp(1.25rem, 3vw, 1.75rem) 1.5rem; }
.apertura-griglia { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 70rem) { .apertura-griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
.apertura h1 {
  font-size: var(--h1);
  line-height: 1.05; margin-bottom: .5em; letter-spacing: -.015em;
}
.apertura h1 span { display: block; text-wrap: balance; }
.apertura .sottotitolo { font-size: clamp(1.05rem, 1rem + .3vw, 1.15rem); max-width: 32em; margin-bottom: 1.1rem; }
.azioni { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
@media (max-width: 46rem) { .azioni .pulsante { flex: 1 1 14rem; } }

/* ---------- Sezioni ---------- */

.sezione { padding-block: var(--sp-sezione); border-top: 1px solid var(--linea); }
.sezione.fascia { background: var(--onda); border-top: 0; }
.sottotitolo { color: var(--tenue); font-size: 1.05rem; margin-bottom: 1.25rem; }
.testa .sottotitolo { margin-top: -.2rem; }

.due-colonne {
  display: grid; gap: 1.5rem 2.5rem;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
}
@media (max-width: 52rem) { .due-colonne { grid-template-columns: minmax(0, 1fr); } }

.lastra { /* immagini con sfondo bianco: restano leggibili anche nel tema scuro */
  background: #fff; border: 1px solid var(--linea); border-radius: 6px; padding: .75rem;
}
.logo-sezione { width: 13rem; margin: 0 0 1rem; }

/* Chi è: scheda orizzontale compatta. La foto fa da bordo sinistro e decide l'altezza della scheda;
   titolo e testo sono divisi da una riga sottile, come le colonne del tabellone. Sezione con metà dello spazio verticale. */
.sezione.compatta { padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(.5rem, 1.5vw, 1rem); } /* sotto si somma il margine di 1rem del pannello che segue */
.chi-e {
  display: grid; grid-template-columns: 9rem minmax(0, 19rem) minmax(0, 1fr); align-items: center;
  background: var(--foglio); border: 1px solid var(--linea); border-radius: 10px; overflow: hidden;
}
.chi-e-foto { margin: 0; align-self: stretch; display: flex; align-items: flex-end; background: #C4DFE3; } /* fondo del ritratto scontornato, uguale nei due temi */
.chi-e-foto img { display: block; width: 100%; height: auto; padding-top: .75rem; }
.chi-e-testa { padding: 1rem 1.5rem; }
.chi-e-testa h2 { margin: 0 0 .35rem; text-wrap: balance; }
.chi-e-sotto { margin: 0; color: var(--tenue); font-family: var(--serif); font-size: 1.1rem; line-height: 1.35; text-wrap: balance; }
.chi-e-testo { margin: 1rem 1.5rem 1rem 0; padding-left: 1.5rem; border-left: 1px solid var(--linea); max-width: 40em; }
@media (max-width: 52rem) { /* su telefono foto e titolo affiancati, il testo sotto nella stessa scheda */
  .chi-e { grid-template-columns: 6.5rem minmax(0, 1fr); }
  .chi-e-testa { padding: .85rem 1rem; }
  .chi-e-sotto { font-size: 1.02rem; }
  .chi-e-testo { grid-column: 1 / -1; margin: 0; padding: .85rem 1rem 1rem; border-left: 0; border-top: 1px solid var(--linea); }
}

/* Sviluppo della quartina SiNG, rifatto in HTML */
.sviluppo {
  margin: 1.1rem 0 1.4rem; padding: 1rem; max-width: 40rem;
  background: var(--foglio); border: 1px solid var(--linea); border-radius: 8px;
}
.sviluppo dl { display: grid; grid-template-columns: auto 1fr; gap: .9rem 1.25rem; margin: 0; align-items: center; }
.sviluppo dt { font-weight: 700; white-space: nowrap; }
.sviluppo dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.sviluppo .gruppo { display: inline-flex; gap: .25rem; align-items: center; }
.sviluppo .nota-riga { color: var(--tenue); font-size: .95rem; }
.sviluppo figcaption { margin-top: 1rem; font-size: .9rem; color: var(--tenue); }
.jolly { font-size: .8rem; color: var(--tenue); margin-left: .2rem; }

.esempio { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: start; }
@media (max-width: 52rem) { .esempio { grid-template-columns: minmax(0, 1fr); } }
.esempio figure { margin: 0; }
.esempio figcaption, .galleria figcaption { font-size: .9rem; color: var(--tenue); margin-top: .5rem; }

.funzioni { padding-left: 1.2rem; columns: 2 20rem; column-gap: 3rem; max-width: 52rem; }
.funzioni li { break-inside: avoid; margin-bottom: .4rem; }

.galleria { margin: 1.25rem 0 0; }
.galleria ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.galleria li.alta { grid-row: span 3; align-self: start; justify-self: center; max-width: 18rem; }
.galleria li img { width: 100%; }

/* ---------- Palle dei numeri ---------- */

.palla {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--palla); height: var(--palla); border-radius: 50%;
  border: 2px solid var(--linea); background: var(--foglio);
  font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.palla.primo { border: 3px solid var(--mare); } /* il pieno mare ora vuol dire "molto in ritardo": il primo estratto ha solo il bordo */
.palla.ambo { background: var(--ambo); border-color: var(--ambo); color: var(--su-ambo); }
.palla.ambata { background: var(--ambata); border-color: var(--ambata); color: var(--su-ambata); }
.palla.spenta { color: var(--tenue); font-weight: 400; }

/* ---------- Strumenti ---------- */


.stato {
  padding: .7rem .9rem; border-radius: 6px; margin: 0 0 1.25rem;
  background: var(--foglio); border-left: 5px solid var(--mare);
}
.stato.errore, .errore-box { border-left-color: var(--errore); background: var(--fondo-errore); }
.stato p { margin: 0 0 .5rem; }
.stato p:last-child { margin-bottom: 0; }
.dettaglio { font-size: .9rem; color: var(--tenue); }

.strumento {
  background: var(--foglio); border: 1px solid var(--linea); border-radius: 10px;
  padding: var(--sp-riquadro); margin-bottom: 1rem;
}
.strumento > h3:first-child { margin-top: 0; font-size: 1.45rem; font-weight: 400; }
.uscita { margin-top: 1rem; }
.in-attesa { color: var(--tenue); font-style: italic; }

form.riga { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; margin-bottom: 1rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo label, .etichetta { font-weight: 600; }
.aiuto { font-size: .9rem; color: var(--tenue); font-weight: 400; }
select, input[type="date"], input[type="number"], input[type="text"] {
  font: inherit; color: var(--inchiostro); background: var(--foglio);
  border: 2px solid var(--tenue); border-radius: 6px;
  min-height: var(--controllo); padding: .3rem .6rem; max-width: 100%;
}
input[type="text"] { width: min(22rem, 100%); }
input[type="number"] { width: 7rem; }

fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.scelte { display: flex; flex-wrap: wrap; gap: .4rem .5rem; align-items: center; }
.scelte label {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  padding: .3rem .65rem; min-height: 2.5rem;
  border: 1px solid var(--linea); border-radius: 6px; background: var(--carta);
}
.scelte input { width: 1.25rem; height: 1.25rem; accent-color: var(--mare); margin: 0; }

.griglia90 {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: .3rem; max-width: 34rem; margin-top: .5rem;
}
.griglia90 button {
  aspect-ratio: 1; min-height: 1.9rem; padding: 0;
  font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem;
  color: var(--inchiostro); background: var(--carta);
  border: 1px solid var(--linea); border-radius: 50%; cursor: pointer;
}
.griglia90 button[aria-pressed="true"] { background: var(--mare); border-color: var(--mare); color: var(--su-mare); }
@media (max-width: 30rem) { .griglia90 button { font-size: .8rem; } .griglia90 { gap: .2rem; } }

.messaggio-errore { color: var(--errore); font-weight: 600; min-height: 1.6em; margin: .5rem 0; }

.periodo { font-size: .98rem; }
.periodo strong { font-variant-numeric: tabular-nums; }

/* Tabelle */
.scorre { overflow-x: auto; max-width: 100%; position: relative; } /* relative: i testi .vh assoluti restano dentro */
table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption { text-align: left; font-weight: 700; padding-bottom: .6rem; caption-side: top; }
th, td { padding: .22rem .45rem; text-align: left; vertical-align: middle; }
thead th { font-size: .85rem; font-weight: 600; color: var(--tenue); border-bottom: 2px solid var(--linea); }
tbody th { font-weight: 600; white-space: nowrap; }
tbody tr + tr > * { border-top: 1px solid var(--linea); }
td.num, th.num { text-align: right; }

table.ruote td, table.archivio-ruota td { padding: .25rem .2rem; text-align: center; }
table.ruote thead th:not(:first-child), table.archivio-ruota thead th:not(:first-child) { text-align: center; }
table.ruote tbody.nazionale tr:first-child > * { border-top: 3px double var(--linea); }
td.assente { color: var(--tenue); }
tr.evidenzia > *, table.evidenzia caption { background: color-mix(in srgb, var(--ambata) 30%, transparent); }

.griglia-estrazioni { display: grid; gap: 1.5rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr)); }
.griglia-estrazioni table { width: 100%; }
.griglia-estrazioni caption { font-size: .95rem; }
.griglia-estrazioni tbody th { font-size: .9rem; padding-inline: .25rem; }
.griglia-estrazioni td { padding: .2rem .1rem !important; }
.griglia-estrazioni .palla { width: 1.75rem; height: 1.75rem; font-size: .85rem; }

.paginazione { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.25rem; }

.classifiche { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin: 1.25rem 0; }
.classifiche table { width: 100%; }
.dati-tabella { width: 100%; }

details.completa { margin-top: 1rem; }
details > summary { cursor: pointer; font-weight: 600; padding: .6rem 0; color: var(--mare); }
details > summary:hover { color: var(--mare-forte); }


.nota-sotto { font-style: italic; }
.avviso-strumenti {
  margin-top: 1.25rem; padding: .8rem 1rem; border-radius: 8px;
  background: var(--foglio); border: 1px solid var(--linea);
}
.avviso-strumenti p:last-child { margin: 0; font-size: .9rem; color: var(--tenue); }

table.esiti td:nth-child(3) { white-space: nowrap; }
table.esiti .palla { width: 2.05em; height: 2.05em; margin-right: .15rem; }
.piccolo { font-size: .88rem; color: var(--tenue); font-weight: 400; }

/* ---------- Archivio storico ---------- */

.legenda-colori { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; }
.legenda-colori li { display: flex; align-items: center; gap: .55rem; }
.campione { width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 2px solid var(--linea); background: var(--foglio); flex: none; }
.campione.ambo { background: var(--ambo); border-color: var(--ambo); }
.campione.ambata { background: var(--ambata); border-color: var(--ambata); }

.avvertenza { border-left: 4px solid var(--tenue); padding-left: 1rem; }

.schede { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.schede figure { margin: 0; }
.schede img { width: 100%; border-radius: 6px; border: 1px solid var(--linea); }
.schede figcaption { font-size: .95rem; margin-top: .4rem; font-weight: 600; }

/* ---------- Domande frequenti ---------- */

.faq { max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--linea); }
.faq details:first-child { border-top: 1px solid var(--linea); }
.faq summary { font-family: var(--serif); font-size: 1.1rem; color: var(--inchiostro); padding: .7rem 2.5rem .7rem 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: .55rem; font-family: var(--sans); font-size: 1.5rem; color: var(--mare); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 .9rem; max-width: 40em; }

/* ---------- Piede ---------- */

/* fondo pagina: misure fissate dal proprietario (circa 10px), non vanno più cambiate */
.piede { border-top: 1px solid var(--linea); padding-block: .68rem .95rem; font-size: .625rem; line-height: 1.4; color: var(--tenue); }
.piede p { margin: 0 0 .22rem; max-width: 54rem; }
.piede p:last-child { margin: 0; }
.piede strong, .piede .firma { color: var(--inchiostro); }
.piede .firma { font-weight: 600; }
.piede a { color: inherit; }
/* Il cellulare è un'immagine (non testo) per non farlo raccogliere dai programmi automatici; segue la dimensione del testo intorno. */
.contatto img { display: inline; height: 1.35em; width: auto; vertical-align: -0.27em; }

@media print {
  .testata, .indice-strumenti, form, .paginazione, .azioni, .comandi { display: none !important; }
  body { background: #fff; color: #000; }
}

.riga-pulsanti { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
#v-form > .riga { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; margin-bottom: .5rem; }
#v-form > .campo { margin-bottom: 1.25rem; }
@media (max-width: 30rem) {
  .sviluppo dl { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .sviluppo dd { margin-bottom: .6rem; }
  .sviluppo .palla { width: 2.1em; height: 2.1em; }
}
.sviluppo .gruppo { padding: .2rem; border-radius: 999px; background: var(--carta); }
@media (max-width: 30rem) {
  .strumento { padding: .85rem .65rem; border-radius: 8px; }
  table.ruote td, table.archivio-ruota td { padding: .2rem 1px; }
  table.ruote th, table.archivio-ruota th { padding-left: .25rem; padding-right: .25rem; }
  table.ruote .palla, table.archivio-ruota .palla { width: 2.05rem; height: 2.05rem; font-size: .9rem; }
  table.esiti .palla { width: 1.9rem; height: 1.9rem; font-size: .85rem; }
}

/* =========================================================================
   Consegna 1: tabellone in apertura, schede, strumenti con indice laterale
   ========================================================================= */

/* ---------- Tabellone dell'ultima estrazione ---------- */
.tabellone {
  position: relative; /* la nota di caricamento sta sopra la sagoma e non occupa spazio */
  background: var(--foglio); border: 1px solid var(--linea); border-radius: 12px;
  padding: .8rem 1.1rem .7rem; box-shadow: 0 18px 40px -30px rgb(21 36 58 / .5);
}
.tabellone-testa {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .1rem 1rem;
  border-bottom: 2px solid var(--inchiostro); padding-bottom: .5rem; margin-bottom: .35rem;
}
.tabellone-testa h2 { font-size: 1.35rem; margin: 0; }
.tabellone-data { margin: 0; font-family: var(--serif); font-size: 1.05rem; flex: 1 1 auto; text-align: right; } /* riquadro fisso: la data che arriva non lo sposta */
.tabellone-data:empty::before { content: "\00a0"; } /* la riga della data occupa spazio anche prima dei dati */
#tab-out { min-height: 25.4rem; } /* altezza del tabellone pronto (11 righe): niente salto quando arrivano i dati */
.tab-oggi { width: 100%; }
.tab-oggi thead th { font-size: .8rem; padding-block: .3rem; }
.tab-oggi th, .tab-oggi td { padding: .1rem .16rem; }
.tab-oggi tbody th { font-weight: 600; padding-right: .6rem; }
.tab-oggi .palla { width: 1.85rem; height: 1.85rem; font-size: .9rem; }
.tab-oggi .centro { text-align: center; }
.tab-oggi .sep { padding-left: 1.1rem; border-left: 1px solid var(--linea); }
.tab-oggi tr.nz > * { border-top: 3px double var(--linea); }
.tab-oggi.in-caricamento tr { height: 2.1rem; }
.riga-vuota { display: block; height: 1.6rem; border-radius: 999px; background: var(--traccia); }
.coppia { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-size: .9rem; color: var(--tenue); }
.coppia strong { color: var(--inchiostro); font-size: 1rem; }
.palla.piccola { width: 1.6rem; height: 1.6rem; font-size: .8rem; border-width: 2px; }
.tabellone-nota { position: absolute; left: 0; right: 0; top: 50%; margin: 0; text-align: center; font-size: .9rem; color: var(--tenue); }
#top-rit, #top-freq { min-height: 13.9rem; } /* sei barre e la riga sotto */
@media (min-width: 64rem) { #cur-out { min-height: 29.7rem; } } /* su due colonne l'altezza la decide la tabella delle 11 ruote */
#tab-out.tab-errore { min-height: 0; margin: 1rem 0 .5rem; padding: 1rem 1.1rem; border-left: 5px solid var(--errore); background: var(--fondo-errore); border-radius: 0 6px 6px 0; }
.tab-errore p { margin: 0 0 .6rem; }
.tab-errore strong { color: var(--errore); }
.solo-stretto { display: none; }
.riga-extra td { padding: 0 .2rem .45rem !important; font-size: .85rem; color: var(--tenue); }
.riga-extra td > span { display: inline-flex; align-items: center; gap: .35rem; margin-right: .9rem; }
tbody tr.riga-extra > * { border-top: 0; }
@media (max-width: 44rem) {
  .tabellone { padding: .9rem .7rem .7rem; }
  .tabellone-testa h2 { font-size: 1.35rem; }
  .tabellone-data { font-size: 1rem; text-align: left; }
  #tab-out { min-height: 67.75rem; } /* su telefono ogni ruota ha la riga in più */
  .tab-oggi.in-caricamento tr { height: 6.1rem; }
  .tab-oggi .solo-largo { display: none; }
  .tab-oggi tr.solo-stretto { display: table-row; }
  .tab-oggi tbody th { padding-right: .25rem; font-size: .92rem; }
  .tab-oggi td { padding: .16rem 1px; }
  .tab-oggi .palla { width: 1.95rem; height: 1.95rem; font-size: .88rem; }
  .tab-oggi .palla.piccola { width: 1.6rem; height: 1.6rem; font-size: .78rem; }
  .riga-extra .coppia { font-size: .82rem; }
}

/* ---------- Schede sotto l'apertura ---------- */
.fascia-schede { padding-block: 0 2rem; }
.schede3 { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .schede3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scheda-verifica { grid-column: 1 / -1; } }
@media (min-width: 70rem) { .schede3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .scheda-verifica { grid-column: auto; } }
.curiosita { grid-column: 1 / -1; }
.scheda-dato { background: var(--foglio); border: 1px solid var(--linea); border-radius: 10px; padding: .8rem 1rem .9rem; min-width: 0; }
.scheda-dato > h2 { margin: 0 0 .1rem; font-size: 1.2rem; }
.scheda-sotto { font-size: .88rem; color: var(--tenue); margin: 0 0 .65rem; }
.scheda-piede { margin: .8rem 0 0; font-size: .85rem; color: var(--tenue); }
.verifica-rapida { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem .8rem; align-items: center; }
.verifica-rapida label { font-weight: 600; }
.verifica-rapida input, .verifica-rapida select { width: 100%; }
.verifica-rapida .pulsante { grid-column: 2; justify-self: start; }
.scheda-verifica .messaggio-errore { min-height: 0; margin: .5rem 0 0; }
.scheda-verifica .messaggio-errore:empty { display: none; }

.curiosita-griglia { display: grid; gap: 1.25rem 2.5rem; grid-template-columns: minmax(0, 1fr); }
.curiosita > h2 { margin-bottom: .85rem; } /* lo spazio sta sul titolo: il contenuto che arriva non sposta il riquadro */
@media (min-width: 64rem) { .curiosita-griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.curiosita h3 { font-family: var(--sans); font-size: 1rem; font-weight: 700; margin: 0 0 .6rem; }
.su-piu { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr)); }
.su-piu li { display: flex; align-items: center; gap: .55rem; line-height: 1.3; font-size: .95rem; }
.su-piu .palla { flex: none; width: 2.1rem; height: 2.1rem; font-size: .92rem; }
.tab-cur { width: 100%; font-size: .92rem; }
.tab-cur caption { font-size: 1rem; }
.tab-cur td:nth-child(n+4) { white-space: nowrap; }
.tab-cur .palla { width: 1.6rem; height: 1.6rem; font-size: .8rem; }
.curiosita h4 { font-size: .92rem; font-weight: 600; color: var(--tenue); margin: .6rem 0 .35rem; }
.tenue { color: var(--tenue); }

/* ---------- Barre orizzontali: una tinta, valore scritto accanto, segno della media attesa ---------- */
.barre { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: auto minmax(2.5rem, 1fr) auto; gap: .2rem .65rem; }
.barre li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; }
.barre-chi { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.barre .palla { width: 1.8rem; height: 1.8rem; font-size: .85rem; flex: none; }
.barre-ruota { font-weight: 600; }
.barre-traccia { position: relative; height: .7rem; background: var(--traccia); border-radius: 4px; }
.barre-pieno { display: block; height: 100%; background: var(--barra); border-radius: 4px; }
.barre-atteso { position: absolute; top: -.25rem; bottom: -.25rem; width: 2px; margin-left: -1px; background: var(--inchiostro); }
.barre-val { font-variant-numeric: tabular-nums; font-size: .95rem; white-space: nowrap; }
.barre-gruppi .barre-val .piccolo { display: block; line-height: 1.1; }
@media (max-width: 30rem) { .barre-val .piccolo { display: block; line-height: 1.1; } }

/* ---------- Strumenti: indice a sinistra, area di lavoro a destra ---------- */
.strumenti-testa { margin-bottom: 1rem; }
.strumenti-testa h2 { margin: 0 0 .25rem; }
.strumenti-testa .sottotitolo { margin: 0; max-width: 40em; }
.strumenti-griglia { display: grid; gap: 1rem 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.indice-strumenti { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.indice-strumenti a {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: var(--controllo); padding: .4rem .7rem .4rem .85rem; line-height: 1.2;
  font-weight: 600; font-size: .95rem; color: var(--inchiostro); text-decoration: none;
  background: var(--foglio); border: 1px solid var(--linea); border-bottom-width: 3px; border-radius: 8px;
}
.indice-strumenti a::after { /* piccola freccia: è un pulsante che apre lo strumento */
  content: ""; flex: none; width: .42rem; height: .42rem; margin-right: .15rem;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); opacity: .55;
}
.indice-strumenti a:hover { border-color: var(--mare); color: var(--inchiostro); background: color-mix(in srgb, var(--mare) 9%, var(--foglio)); }
.indice-strumenti a:hover::after { opacity: 1; }
.indice-strumenti a:focus-visible { outline: 3px solid var(--mare); outline-offset: 2px; }
.indice-strumenti a[aria-current] { background: var(--mare); border-color: var(--mare-forte); color: var(--su-mare); }
.indice-strumenti a[aria-current]::after { opacity: 1; }
.binario .stato { margin: .9rem 0 0; font-size: .85rem; padding: .6rem .8rem; }
@media (min-width: 60rem) {
  .strumenti-griglia { grid-template-columns: 14rem minmax(0, 1fr); }
  .binario { position: sticky; top: 4.5rem; }
  .indice-strumenti { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
}
.banco { min-width: 0; }
.banco .strumento { container-type: inline-size; margin: 0; }
.strumento > h3:first-child:focus { outline: none; }
.strumento > h3:first-child:focus-visible { outline: 3px solid var(--mare); }

.comandi { display: flex; flex-direction: column; gap: .6rem; margin: .75rem 0 1rem; }
.comandi-riga { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; }
.ruote-pulsanti { display: flex; flex-wrap: wrap; gap: .35rem; }
.ruote-pulsanti button, .colora button {
  font: inherit; font-size: .92rem; min-height: var(--controllo); padding: .25rem .75rem; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--carta); color: var(--inchiostro);
}
.ruote-pulsanti button:hover, .colora button:hover { border-color: var(--mare); }
.ruote-pulsanti button[aria-pressed="true"], .colora button[aria-pressed="true"] { background: var(--mare); border-color: var(--mare); color: var(--su-mare); font-weight: 600; }
.colora { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.colora > span { font-weight: 600; margin-right: .3rem; }
.campo.in-linea { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.interruttore {
  display: inline-flex; align-items: center; gap: .6rem; align-self: flex-start; min-height: var(--controllo); padding: .25rem .8rem;
  font-weight: 600; cursor: pointer; border: 1px solid var(--linea); border-radius: 8px; background: var(--carta);
}
.interruttore input { width: 1.35rem; height: 1.35rem; margin: 0; accent-color: var(--mare); }
.titoletto { font-family: var(--sans); font-size: 1rem; margin: 1.1rem 0 .5rem; }
.definizioni { font-size: .88rem; color: var(--tenue); max-width: 60em; margin: .25rem 0 1rem; }
.definizioni strong { color: var(--inchiostro); }

/* legenda della scala: una riga, parole e non formule */
.legenda-scala { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: .9rem 0 .35rem; font-size: .88rem; }
.legenda-titolo { font-weight: 600; }
.legenda-voce { display: inline-flex; align-items: center; gap: .4rem; }
.campione2 { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--linea); background: var(--foglio); flex: none; }
.campione2.liv1, .palla.liv1 { background: var(--liv1); border-color: var(--liv1); }
.campione2.liv2, .palla.liv2 { background: var(--liv2); border-color: var(--liv2); }
.campione2.liv3, .palla.liv3 { background: var(--liv3); border-color: var(--liv3); }
.campione2.liv4, .palla.liv4 { background: var(--liv4); border-color: var(--liv4); }
.palla.liv1 { color: var(--su-liv1); }
.palla.liv2 { color: var(--su-liv2); }
.palla.liv3 { color: var(--su-liv3); }
.palla.liv4 { color: var(--su-liv4); }

/* griglia dei 90 */
.banco-griglia { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@container (min-width: 46rem) { .banco-griglia { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.novanta { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .25rem .15rem; }
.cella { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .15rem 0; background: none; border: 2px solid transparent; border-radius: 8px; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
.cella:hover { border-color: var(--linea); }
.cella[aria-pressed="true"] { border-color: var(--inchiostro); background: var(--carta); }
.cella .palla { width: 2.05rem; height: 2.05rem; font-size: .9rem; }
.cella-val { font-size: .75rem; color: var(--tenue); font-variant-numeric: tabular-nums; line-height: 1.1; }
.novanta .cella:nth-child(n+31):nth-child(-n+40), .novanta .cella:nth-child(n+61):nth-child(-n+70) { margin-top: .4rem; } /* tre blocchi da 30, come sulla schedina */
@container (max-width: 30rem) {
  .cella .palla { width: 1.75rem; height: 1.75rem; font-size: .8rem; border-width: 1px; }
  .cella-val { font-size: .7rem; }
}

/* scheda del numero */
.scheda-numero { background: var(--carta); border: 1px solid var(--linea); border-radius: 10px; padding: .8rem .9rem; min-width: 0; scroll-margin-top: 5rem; }
.scheda-testa { display: flex; gap: 1rem; align-items: center; margin-bottom: .75rem; }
.scheda-testa h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; margin: 0 0 .15rem; }
.scheda-testa p { margin: 0; font-size: .92rem; }
.palla.grande { width: 3.4rem; height: 3.4rem; font-size: 1.4rem; flex: none; border: 3px solid var(--mare); }
.etichetta-gemello { font-family: var(--sans); font-size: .8rem; vertical-align: middle; padding: .1rem .5rem; border: 1px solid var(--linea); border-radius: 999px; color: var(--tenue); }
.scheda-dati { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .9rem; font-size: .92rem; margin: 0 0 .9rem; }
.scheda-dati dt { font-weight: 700; }
.scheda-dati dd { margin: 0; }
.piccolo-box { padding: .6rem .8rem; border-radius: 8px; background: var(--foglio); border: 1px dashed var(--linea); margin-bottom: .9rem; font-size: .9rem; }
.piccolo-box p { margin: 0 0 .5rem; }
.scheda-tab { width: 100%; font-size: .88rem; }
.scheda-tab caption { font-size: .95rem; }
.scheda-tab th, .scheda-tab td { padding: .16rem .35rem; }
.scheda-tab thead th { font-size: .75rem; }
.scheda-tab tr.attiva > * { background: color-mix(in srgb, var(--mare) 14%, transparent); }
.scheda-tab tr[data-nz] > *, .tab-record tr[data-nz] > * { border-top: 3px double var(--linea); }
.scheda-tab td.rit { white-space: nowrap; width: 6.5rem; }
.mini { display: inline-block; width: 3rem; height: .5rem; background: var(--traccia); border-radius: 3px; margin-right: .4rem; vertical-align: middle; overflow: hidden; }
.mini span { display: block; height: 100%; background: var(--barra); }
.striscia { display: block; min-width: 6rem; }
.striscia line { stroke: var(--linea); stroke-width: 1; }
.striscia rect { fill: var(--mare); }
@container (max-width: 30rem) { .scheda-tab td.rit { width: auto; } .mini { display: none; } }

.classifiche2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem 2.5rem; margin: 1.4rem 0 .75rem; padding-top: 1.1rem; border-top: 1px solid var(--linea); }
@container (min-width: 40rem) { .classifiche2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.classifiche2 h4, .tre-gruppi h4 { font-family: var(--sans); font-size: 1.05rem; margin: 0 0 .6rem; }

/* tabellone dei ritardi e ritardo per posizione: celle colorate, valore sempre scritto */
.tab-rit-griglia { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 46rem) { .tab-rit-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 30rem) { .tab-rit-griglia.stretta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tab-rit { width: 100%; font-size: .82rem; }
.tab-rit caption { font-size: .95rem; }
.tab-rit th, .tab-rit td { padding: .1rem .2rem; text-align: center; }
.tab-rit thead th { font-size: .78rem; color: var(--inchiostro); }
.tab-rit abbr { text-decoration: none; }
.tab-rit tbody tr + tr > * { border-top: 2px solid var(--foglio); } /* uno stacco del colore della pagina tra le celle colorate */
.tab-rit td + td { border-left: 2px solid var(--foglio); }
.tab-rit .nz { border-left: 4px double var(--linea) !important; }
.tab-rit td.liv1 { background: var(--liv1); color: var(--su-liv1); }
.tab-rit td.liv2 { background: var(--liv2); color: var(--su-liv2); }
.tab-rit td.liv3 { background: var(--liv3); color: var(--su-liv3); }
.tab-rit td.liv4 { background: var(--liv4); color: var(--su-liv4); }
.tab-rit td.massimo { box-shadow: inset 0 0 0 3px var(--inchiostro), inset 0 0 0 5px var(--foglio); font-weight: 700; }
.tab-rit tbody th, .tab-rit thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--foglio); }
.apri-numero {
  font: inherit; font-weight: 700; min-width: 2.2rem; min-height: 1.6rem; padding: 0 .3rem; cursor: pointer;
  border: 1px solid var(--linea); border-radius: 999px; background: var(--carta); color: var(--inchiostro);
}
.apri-numero:hover { border-color: var(--mare); }
.solo-gemelli tbody tr:not(.gemello) { display: none; }
.tab-pos { font-size: .9rem; }
.tab-pos th, .tab-pos td { padding: .15rem .3rem; }
.massimi { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); font-size: .92rem; }
.massimi li { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.massimi-ruota { font-weight: 600; min-width: 5.5rem; }
.barre-larghe { max-width: 48rem; }

/* decine, cadenze e figure */
.tre-gruppi { display: grid; gap: 1.25rem 1.75rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 44rem) { .tre-gruppi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.barre-gruppi { gap: .45rem .6rem; }
.barre-gruppi .barre-ruota { font-weight: 600; font-variant-numeric: tabular-nums; }

/* verifica, puntate, calcolo vincita */
.verifica-griglia { display: grid; gap: 0 2.5rem; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 46rem) { .verifica-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.verifica-griglia .riga { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-end; margin-bottom: 1rem; }
#v-form .campo { margin-bottom: 1rem; }
#v-form .riga .campo { margin-bottom: 0; }
details.puntate { margin: 0 0 1rem; padding: .2rem .9rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--carta); }
details.puntate fieldset { margin: .25rem 0 .8rem; }
.puntate-campi { display: grid; gap: .6rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
.puntate-campi .campo { margin: 0 !important; }
.puntate-campi label { font-weight: 600; font-size: .95rem; }
.euro { display: inline-flex; align-items: center; gap: .35rem; }
.euro input { width: 6rem !important; }
.campo.spento { opacity: .5; }
#cv-form .riga { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-end; margin-bottom: 1.25rem; }
#cv-form .messaggio-errore:empty, #v-form .messaggio-errore:empty { min-height: 0; margin: 0; }
.esito-riepilogo { font-size: 1.02rem; }
.tab-vincita { width: 100%; max-width: 46rem; }
dl.cifre { display: flex; flex-wrap: wrap; gap: .75rem 2.25rem; margin: 1rem 0; }
dl.cifre dt { font-size: .88rem; color: var(--tenue); }
dl.cifre dd { margin: 0; font-family: var(--serif); font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.vincita-riepilogo { padding: .9rem 1.1rem; border: 1px solid var(--linea); border-radius: 8px; background: var(--carta); margin: 1rem 0 1.25rem; }
.vincita-riepilogo > p:first-child { margin-bottom: 0; }
.fonte { font-size: .9rem; color: var(--tenue); margin: .5rem 0 0; max-width: 46em; }

/* strumenti che usano l'archivio dal 1871 */
.carica-completo .messaggio-errore:empty { display: none; }
.tab-record { width: 100%; max-width: 46rem; }
.tab-record .palla { width: 1.8rem; height: 1.8rem; font-size: .85rem; }
.record-oggi { list-style: none; padding: 0; display: grid; gap: .5rem; }
.record-oggi li { display: flex; align-items: center; gap: .65rem; }

@media (max-width: 30rem) {
  .scheda-dato { padding: .95rem .85rem 1rem; }
  .ruote-pulsanti button, .colora button { padding: .3rem .7rem; font-size: .92rem; }
  .scheda-numero { padding: .85rem .7rem; }
  .palla.grande { width: 3.3rem; height: 3.3rem; font-size: 1.35rem; }
  .scheda-dati { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .scheda-dati dd { margin-bottom: .45rem; }
}
@container (min-width: 46rem) { .suggerimento-scorri { display: none; } }

.diciotto-mini { display: inline-block; padding: 0 .4em; border: 1px solid currentColor; border-radius: 999px; font-weight: 700; color: var(--inchiostro); }
.piede [id] { scroll-margin-top: 4.25rem; }

/* ---------- Sezioni a pannello (Metodo SiNG, BlackBox, Archivio storico): chiuse all'apertura della pagina ---------- */
.sezione-pannello { padding-block: 1rem; border-top: 0; }
.sezione-pannello + .sezione-pannello { padding-top: 0; }
.pannello { background: var(--foglio); border: 1px solid var(--linea); border-bottom-width: 3px; border-radius: 10px; scroll-margin-top: 4.25rem; }
.pannello[open] { border-color: color-mix(in srgb, var(--mare) 45%, var(--linea)); }
.pannello > summary {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.5rem;
  min-height: 4.25rem; padding: .65rem 1rem .65rem 1.15rem; cursor: pointer; list-style: none; border-radius: 9px;
}
.pannello > summary::-webkit-details-marker { display: none; }
.pannello > summary:hover { background: color-mix(in srgb, var(--mare) 7%, var(--foglio)); }
.pannello > summary:focus-visible { outline: 3px solid var(--mare); outline-offset: 2px; }
.pannello[open] > summary { border-radius: 9px 9px 0 0; border-bottom: 1px solid var(--linea); }
.pannello-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 1rem; min-width: 0; }
.pannello-testa h2 { font-size: 1.45rem; margin: 0; }
.pannello-riassunto { color: var(--tenue); font-size: .98rem; }
/* il controllo ha l'aspetto dei pulsanti del menu Strumenti: contorno da chiuso, pieno da aperto */
.pannello-azione {
  flex: none; display: inline-flex; align-items: center; gap: .55rem; min-height: var(--controllo); padding: .3rem .85rem .3rem 1rem;
  font-weight: 600; font-size: .95rem; color: var(--mare); background: var(--foglio);
  border: 1px solid var(--mare); border-bottom-width: 3px; border-radius: 8px;
}
.pannello-azione::after {
  content: ""; width: .45rem; height: .45rem; margin: -.2rem .1rem 0 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease;
}
.pannello > summary:hover .pannello-azione { background: color-mix(in srgb, var(--mare) 10%, var(--foglio)); }
.pannello[open] .pannello-azione { background: var(--mare); color: var(--su-mare); border-color: var(--mare-forte); }
.pannello[open] .pannello-azione::after { transform: rotate(-135deg); margin-top: .25rem; }
.pannello:not([open]) .se-aperto, .pannello[open] .se-chiuso { display: none; }
.pannello-corpo { padding: var(--sp-riquadro) var(--sp-riquadro) calc(var(--sp-riquadro) * 1.3); }
@media (prefers-reduced-motion: reduce) { .pannello-azione::after { transition: none; } }
@media (max-width: 40rem) {
  .pannello > summary { padding: .6rem .7rem .6rem .85rem; gap: .6rem; }
  .pannello-testa { display: block; }
  .pannello-testa h2 { font-size: 1.25rem; margin-bottom: .1rem; }
  .pannello-riassunto { display: block; font-size: .9rem; line-height: 1.35; }
  .pannello-azione { padding: .3rem .65rem .3rem .8rem; }
}
@media print {
  .pannello::details-content { content-visibility: visible; display: block; } /* in stampa i pannelli sono aperti */
  .pannello-azione { display: none; }
}