/* Osservatorio — tema "spazio" sopra Pico.css, come Conferenze
   (Principio II della costituzione; spec 002, FR-001, FR-002, research R1).

   Prima il telefono (da 360 px), poi gli schermi larghi. Tema chiaro e scuro
   secondo l'impostazione del dispositivo, entrambi curati. Palette presa da
   ../conferenze/static/css/conferenze.css: le app del server sono una famiglia.

   Contrasti del testo (WCAG AA = almeno 4,5:1), calcolati sui valori sotto
   rispetto alla scheda (e allo sfondo della pagina, tra parentesi):
     chiaro — testo 16,9 (15,6) · attenuato 6,9 (6,4) · primario 11,2 (10,3) ·
              fonti: GCAT 11,2, LL2 6,0, CelesTrak 7,0 · serie 4 7,9 ·
              chiuso 5,9 · avviso 5,5 e errore 5,7 sul loro sfondo ·
              bianco su primario 11,2
     scuro  — testo 13,5 (15,5) · attenuato 7,3 (8,3) · primario 7,7 (8,8) ·
              fonti: GCAT 7,7, LL2 7,9, CelesTrak 8,6 · serie 4 6,1 ·
              chiuso 5,3 · avviso 8,0 e errore 8,6 sul loro sfondo ·
              scheda su primario 7,7 · testo su ambra 9,1
   Il segno di una fonte ha sempre fondo bianco: il bollino "GCAT" usa il blu
   del tema chiaro (11,2). Ogni informazione data dal colore è anche testo. */

:root:not([data-theme="dark"]) {
  --oss-sfondo: #eaeef4;
  --oss-scheda: #ffffff;
  --oss-scheda-2: #eef2f8;
  --oss-bordo: #d5ddea;
  --oss-testo: #0f1d33;
  --oss-attenuato: #4b5b74;
  --oss-primario: #1d3a6e;
  --oss-primario-forte: #2a5296;
  --oss-su-primario: #ffffff;
  --oss-titolo: #1d3a6e;
  --oss-ambra: #a14a05;
  --oss-su-ambra: #ffffff;
  --oss-verde: #17663f;
  --oss-chiuso: #5b6578;
  --oss-gcat: #1d3a6e;
  --oss-ll2: #a14a05;
  --oss-celestrak: #17663f;
  --oss-serie-1: #1d3a6e;
  --oss-serie-2: #a14a05;
  --oss-serie-3: #17663f;
  --oss-serie-4: #9d174d;
  --oss-avviso: #a14a05;
  /* Affidabilità (contrasto non testuale ≥ 3:1 sulla scheda). */
  --oss-aff-alta: #15803d;
  --oss-aff-media: #a16207;
  --oss-aff-bassa: #dc2626;
  --oss-avviso-sfondo: #fff4e5;
  --oss-errore: #b42318;
  --oss-errore-sfondo: #fdecea;
  --oss-ombra: 0 6px 20px rgba(15, 29, 51, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --oss-sfondo: #0b1426;
    --oss-scheda: #13213b;
    --oss-scheda-2: #0f1a30;
    --oss-bordo: #24375a;
    --oss-testo: #e6ecf5;
    --oss-attenuato: #9fb0c8;
    --oss-primario: #8ab4ff;
    --oss-primario-forte: #b3ceff;
    --oss-su-primario: #13213b;
    --oss-titolo: #e6ecf5;
    --oss-ambra: #f5a524;
    --oss-su-ambra: #1a1204;
    --oss-verde: #5fd39a;
    --oss-chiuso: #8796ad;
    --oss-gcat: #8ab4ff;
    --oss-ll2: #f5a524;
    --oss-celestrak: #5fd39a;
    --oss-serie-1: #8ab4ff;
    --oss-serie-2: #f5a524;
    --oss-serie-3: #5fd39a;
    --oss-serie-4: #f472b6;
    --oss-avviso: #f5a524;
    --oss-aff-alta: #4ade80;
    --oss-aff-media: #facc15;
    --oss-aff-bassa: #f87171;
    --oss-avviso-sfondo: #2a1e0b;
    --oss-errore: #ff9b8f;
    --oss-errore-sfondo: #2c1214;
    --oss-ombra: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

/* `:root:root` pesa quanto il `:root:not([data-theme])` del tema scuro di Pico e
   viene dopo: così le variabili di Pico prendono sempre i nostri token. */
:root:root {
  --oss-raggio: 0.75rem;
  --oss-raggio-piccolo: 0.5rem;
  /* Revisione 2026-10-26 (research R10): riquadri quasi quadrati, angoli morbidi,
     senza bordi né ombre su fondo grigio; la scelta attiva è una tinta tenue. */
  --oss-raggio-controllo: 0.75rem;
  --oss-raggio-riquadro: 1rem;
  --oss-tinta: color-mix(in srgb, var(--oss-primario) 16%, var(--oss-scheda));
  --oss-spazio: 1rem;
  --oss-spazio-piccolo: 0.5rem;
  --oss-tocco: 2.75rem; /* 44 px: bersaglio minimo */
  --oss-larghezza: 72rem;
  --pico-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --pico-background-color: var(--oss-sfondo);
  --pico-color: var(--oss-testo);
  --pico-muted-color: var(--oss-attenuato);
  --pico-muted-border-color: var(--oss-bordo);
  --pico-card-background-color: var(--oss-scheda);
  --pico-card-sectioning-background-color: var(--oss-scheda-2);
  --pico-primary: var(--oss-primario);
  --pico-primary-background: var(--oss-primario);
  --pico-primary-border: var(--oss-primario);
  --pico-primary-hover: var(--oss-primario-forte);
  --pico-primary-hover-background: var(--oss-primario-forte);
  --pico-primary-inverse: var(--oss-su-primario);
  --pico-primary-focus: color-mix(in srgb, var(--oss-primario) 35%, transparent);
  --pico-primary-underline: color-mix(in srgb, var(--oss-primario) 50%, transparent);
  --pico-h1-color: var(--oss-titolo);
  --pico-h2-color: var(--oss-testo);
  --pico-h3-color: var(--oss-testo);
  --pico-form-element-background-color: var(--oss-scheda);
  --pico-form-element-border-color: var(--oss-bordo);
  --pico-table-border-color: var(--oss-bordo);
  --pico-spacing: var(--oss-spazio);
  --pico-typography-spacing-vertical: 1rem;
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--oss-sfondo);
  color: var(--oss-testo);
  overflow-x: hidden;
  font-size: 1rem;
}

body > main {
  flex: 1 0 auto;
}

:focus-visible {
  outline: 3px solid var(--oss-primario);
  outline-offset: 2px;
}

.contenitore {
  width: 100%;
  max-width: var(--oss-larghezza);
  margin-inline: auto;
  padding-inline: var(--oss-spazio);
}

/* ---------- Testata e navigazione (spec 002, FR-003, research R2) ---------- */

/* Una riga: marchio a sinistra, sezioni distese da 768 px, ☰ sotto. */
/* Pico dà margini verticali a `body > header`: qui la testata è una riga. */
body > header.testata {
  padding-block: 0;
}

.testata {
  background: var(--oss-sfondo);
}

.testata .contenitore {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--oss-spazio);
  min-height: 3rem;
  padding-block: 0.25rem;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--oss-tocco);
  color: var(--oss-testo);
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
}

.marchio svg {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.menu-largo {
  display: none;
}

.menu-largo ul,
.menu-telefono ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-largo li,
.menu-telefono li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-largo ul {
  display: flex;
  gap: 0.25rem;
}

.menu-largo a {
  display: inline-flex;
  align-items: center;
  min-height: var(--oss-tocco);
  padding: 0 0.7rem;
  border-radius: var(--oss-raggio-controllo);
  color: var(--oss-attenuato);
  font-weight: 600;
  text-decoration: none;
}

.menu-largo a:hover {
  color: var(--oss-testo);
}

.menu-largo a[aria-current="page"],
.menu-telefono a[aria-current="page"] {
  color: var(--oss-primario);
  background: var(--oss-tinta);
}

.menu-telefono {
  position: relative;
  margin: 0;
}

.menu-telefono > summary {
  list-style: none;
  justify-content: center;
  width: var(--oss-tocco);
  height: var(--oss-tocco);
  border-radius: 50%;
  background: var(--oss-scheda);
  font-size: 1.3rem;
  color: var(--oss-testo);
}

.menu-telefono > summary::-webkit-details-marker {
  display: none;
}

.menu-telefono > summary::after {
  display: none;
}

.menu-telefono > nav {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 10;
  min-width: 14rem;
  padding: 0.25rem 0;
  background: var(--oss-scheda);
  border: 0;
  border-radius: var(--oss-raggio-riquadro);
  box-shadow: var(--oss-ombra);
}

.menu-telefono > nav ul {
  display: block;
  flex: 1 1 auto;
}

.menu-telefono li {
  display: block;
}

.menu-telefono a {
  display: flex;
  align-items: center;
  min-height: var(--oss-tocco);
  padding: 0 1rem;
  color: var(--oss-testo);
  text-decoration: none;
}

@media (min-width: 768px) {
  .menu-largo {
    display: block;
  }

  .menu-telefono {
    display: none;
  }
}

main.contenitore {
  padding-block: 0.5rem 1.5rem;
}

h1 {
  font-size: 1.25rem;
  line-height: 1.25;
  margin-bottom: 0;
  color: var(--oss-titolo);
}

h2 {
  font-size: 1.1rem;
  margin: 1.25rem 0 0.5rem;
}

@media (min-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.2rem;
  }
}

h3 {
  font-size: 1.1rem;
}

/* ---------- Schede ---------- */

.scheda {
  background: var(--oss-scheda);
  border: 0;
  border-radius: var(--oss-raggio-riquadro);
  box-shadow: none;
  padding: var(--oss-spazio);
  margin-bottom: var(--oss-spazio);
}

.scheda > :last-child {
  margin-bottom: 0;
}

/* ---------- Selettori ---------- */

.rapido {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--oss-tocco);
  margin: 0;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--oss-raggio-controllo);
  background: var(--oss-scheda);
  color: var(--oss-testo);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

/* Acceso = tinta tenue del colore primario, spento = bianco (R10). */
.rapido.attivo,
.rapido[aria-current="true"] {
  background: var(--oss-tinta);
  color: var(--oss-primario);
}

/* ---------- Numeri e tabelle definizioni × fonti ---------- */

.numero {
  display: inline-block;
  min-height: var(--oss-tocco);
  min-width: var(--oss-tocco);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: var(--oss-tocco);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.numero:hover {
  text-decoration: underline;
}

.dettaglio {
  display: block;
  color: var(--oss-attenuato);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.non-disponibile {
  color: var(--oss-attenuato);
  font-size: 0.9rem;
  font-style: italic;
}

.fonte-gcat {
  color: var(--oss-gcat);
}

.fonte-ll2 {
  color: var(--oss-ll2);
}

.fonte-celestrak {
  color: var(--oss-celestrak);
}

/* Bollini (R15): pillole tenui senza bordo, leggibili su fondo bianco e grigio. */
.nota-fonte {
  display: inline-block;
  margin-top: 0.15rem;
  padding: 0.05rem 0.5rem;
  border-radius: var(--oss-raggio-controllo);
  background: color-mix(in srgb, var(--oss-attenuato) 12%, transparent);
  border: 0;
  color: var(--oss-attenuato);
  font-size: 0.75rem;
  font-weight: 600;
}

.tabella-scorre {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.matrice {
  width: 100%;
  margin-bottom: 0;
}

table.matrice th,
table.matrice td {
  vertical-align: top;
  padding: 0.7rem 0.75rem;
}

table.matrice thead th {
  background: var(--oss-scheda-2);
}

table.matrice tbody th {
  font-weight: 600;
  min-width: 10rem;
}

@media (min-width: 640px) {
  table.matrice {
    table-layout: fixed;
  }

  table.matrice thead th:first-child {
    width: 24%;
  }
}

/* Sotto 640 px la tabella diventa una scheda per riga (definizione), con le
   fonti una sotto l'altra (research R11). */
@media (max-width: 639.98px) {
  table.matrice,
  table.matrice tbody,
  table.matrice tr,
  table.matrice th,
  table.matrice td {
    display: block;
    width: 100%;
  }

  table.matrice thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  table.matrice tr {
    border: 1px solid var(--oss-bordo);
    border-radius: var(--oss-raggio-piccolo);
    margin-bottom: var(--oss-spazio);
    background: var(--oss-scheda);
  }

  table.matrice tbody th {
    background: var(--oss-scheda-2);
    border-bottom: 1px solid var(--oss-bordo);
  }

  table.matrice td {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: 0.5rem;
    border-bottom: 1px solid var(--oss-bordo);
  }

  table.matrice td:last-child {
    border-bottom: 0;
  }

  table.matrice td::before {
    content: attr(data-etichetta);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--oss-attenuato);
  }
}

/* ---------- Classifiche ---------- */

.classifica {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: posizione;
}

.classifica li {
  list-style: none;
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--oss-tocco);
  border-bottom: 1px solid var(--oss-bordo);
  margin: 0;
  counter-increment: posizione;
}

.classifica li::before {
  content: counter(posizione);
  color: var(--oss-attenuato);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.classifica a {
  display: inline-flex;
  align-items: center;
  min-height: var(--oss-tocco);
}

.classifica .valore {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---------- Categorie ---------- */

.categoria {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

/* Affidabilità della categoria di un singolo satellite (spec 003, feedback del
   2026-10-27): un pallino verde, giallo o rosso accanto al nome, la parola solo per i
   lettori di schermo. Le categorie non hanno colori. */
.pallino-affidabilita {
  display: inline-block;
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.4rem;
  border-radius: 50%;
  background: var(--oss-aff-bassa);
}

.pallino-affidabilita.aff-alta {
  background: var(--oss-aff-alta);
}

.pallino-affidabilita.aff-media {
  background: var(--oss-aff-media);
}

/* Blocchi ISR e Non ISR (spec 003, FR-008): titolo del blocco, poi il totale in
   tinta e le sottocategorie. */
.blocco-categorie + .blocco-categorie {
  margin-top: 0.5rem;
}

.titolo-blocco {
  margin: 0.25rem 0 0.5rem;
  color: var(--oss-testo);
  font-size: 1.05rem;
  font-weight: 650;
}

.riquadro.riquadro-info.totale-macro {
  background: var(--oss-tinta);
}

.affidabilita {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: var(--oss-raggio-controllo);
  background: color-mix(in srgb, var(--oss-attenuato) 12%, transparent);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--oss-attenuato);
}

/* ---------- Grafici SVG ---------- */

.grafico {
  width: 100%;
  overflow: hidden;
}

.grafico > svg {
  display: block;
  width: 100%;
  height: auto;
}

.grafico .asse,
.grafico .griglia-linee {
  stroke: var(--oss-bordo);
}

.grafico text {
  fill: var(--oss-attenuato);
  font-size: 12px;
}

.serie-gcat { color: var(--oss-gcat); }
.serie-ll2 { color: var(--oss-ll2); }
.serie-celestrak { color: var(--oss-celestrak); }
.serie-1 { color: var(--oss-serie-1); }
.serie-2 { color: var(--oss-serie-2); }
.serie-3 { color: var(--oss-serie-3); }
.serie-4 { color: var(--oss-serie-4); }

.grafico polyline {
  stroke: currentColor;
  fill: none;
}

.grafico circle {
  fill: currentColor;
}

.grafico text {
  font-size: 17px;
}

.grafico figcaption {
  margin-bottom: 0.5rem;
}

.etichetta-serie-legenda {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.campione-serie {
  flex: none;
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

.legenda li {
  list-style: none;
  margin: 0;
}

/* ---------- Messaggi e stati ---------- */

.avviso,
.errore {
  border-radius: var(--oss-raggio-piccolo);
  padding: 0.75rem 1rem;
  margin-bottom: var(--oss-spazio);
  border: 1px solid currentColor;
}

.avviso {
  color: var(--oss-avviso);
  background: var(--oss-avviso-sfondo);
}

.errore {
  color: var(--oss-errore);
  background: var(--oss-errore-sfondo);
}

.avviso p,
.errore p {
  margin: 0;
  color: inherit;
}

.stato-vuoto {
  text-align: center;
  padding: calc(var(--oss-spazio) * 2) var(--oss-spazio);
  color: var(--oss-attenuato);
}

.stato-vuoto strong {
  display: block;
  color: var(--oss-testo);
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.caricamento {
  display: none;
  color: var(--oss-attenuato);
  font-size: 0.9rem;
}

.htmx-request .caricamento,
.htmx-request.caricamento {
  display: inline-block;
}

#vista {
  transition: opacity 0.15s ease;
}

#vista.htmx-request,
.htmx-request #vista {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  #vista {
    transition: none;
  }
}

/* ---------- Elenchi ---------- */

/* Elenchi a schede (R12): niente tabella che scorre di lato; una scheda per riga
   sul telefono, più colonne da 768 px. Data ed esito in alto, poi il nome. */
.voci-elenco {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .voci-elenco {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  }
}

.voce {
  min-width: 0;
  margin: 0;
  padding: 0.55rem 0.75rem;
  list-style: none;
  background: var(--oss-scheda);
  border-radius: var(--oss-raggio-riquadro);
}

.scheda .voce {
  background: var(--oss-sfondo);
}

.voce-testa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 0.5rem;
  color: var(--oss-attenuato);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.voce-titolo {
  margin: 0.1rem 0 0;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.voce-titolo a {
  display: inline-flex;
  align-items: center;
  min-height: var(--oss-tocco);
}

.voce-dettagli {
  margin: 0.1rem 0 0;
  color: var(--oss-attenuato);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.voce .etichette {
  margin-top: 0.15rem;
}

.esito {
  font-weight: 600;
}

.esito-fallimento {
  color: var(--oss-errore);
}

.esito-parziale,
.esito-sconosciuto {
  color: var(--oss-avviso);
}

.escluso {
  color: var(--oss-attenuato);
}

.etichette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* ---------- Piè di pagina ---------- */

.piede {
  border-top: 1px solid var(--oss-bordo);
  background: var(--oss-scheda);
  color: var(--oss-attenuato);
  font-size: 0.8rem;
  padding-block: 0.75rem;
}

/* Attribuzioni delle fonti (licenze): tutte, ma di seguito, non in elenco. */
.piede p {
  margin: 0 0 0.25rem;
}

.piede ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.piede li {
  margin: 0;
  list-style: none;
}

.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: absolute;
  left: -9999px;
}

.salta:focus {
  left: var(--oss-spazio);
  top: var(--oss-spazio);
  z-index: 10;
  padding: 0.5rem 1rem;
  background: var(--oss-scheda);
  border-radius: var(--oss-raggio-piccolo);
}

.tabella-scorre:focus-visible {
  outline-offset: 4px;
}

/* ---------- Indice e sezioni a scomparsa ---------- */

summary {
  display: flex;
  align-items: center;
  min-height: var(--oss-tocco);
  font-weight: 600;
  cursor: pointer;
}

.avviso-fonte {
  color: var(--oss-avviso);
  background: var(--oss-avviso-sfondo);
}

/* ---------- Componenti della spec 002: ⓘ, segni delle fonti, avvisi brevi ---------- */

/* Le ⓘ si aprono in un riquadro sotto la riga del titolo, largo quanto la
   colonna dei contenuti (il contenitore è il riferimento). */
main.contenitore {
  position: relative;
}

details.info {
  display: inline;
  margin: 0;
}

details.info > summary {
  display: inline-flex;
  justify-content: center;
  width: var(--oss-tocco);
  height: var(--oss-tocco);
  min-height: 0;
  margin: -0.6rem -0.35rem -0.6rem -0.2rem;
  vertical-align: middle;
  list-style: none;
  color: var(--oss-primario);
  font-size: 1rem;
  font-weight: 400;
}

details.info > summary::-webkit-details-marker {
  display: none;
}

details.info > summary::after {
  display: none;
}

details.info .testo-info {
  position: absolute;
  z-index: 5;
  left: var(--oss-spazio);
  right: var(--oss-spazio);
  max-width: 36rem;
  margin-top: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: var(--oss-scheda);
  color: var(--oss-testo);
  border: 1px solid var(--oss-bordo);
  border-radius: var(--oss-raggio-piccolo);
  box-shadow: var(--oss-ombra);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}

/* Segno della fonte: sempre su fondo bianco (l'arco nero di CelesTrak
   sparirebbe sul tema scuro); bollino di testo per GCAT. */
.segno-fonte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--oss-bordo);
  vertical-align: middle;
  overflow: hidden;
}

.segno-fonte img {
  display: block;
  width: 100%;
  height: 100%;
}

.segno-fonte.fonte-celestrak img {
  width: 82%;
  height: 82%;
}

.bollino-fonte {
  color: #1d3a6e;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* GCAT non ha un logo: il bollino di testo è il suo segno, senza il nome
   accanto (spec 002, FR-002a), quindi più largo e leggibile degli altri. */
.segno-fonte.fonte-gcat {
  width: auto;
  padding: 0 0.45rem;
  border-radius: 999px;
}

.segno-fonte.fonte-gcat .bollino-fonte {
  font-size: 0.7rem;
}

.segno-fonte.fonte-gcat.grande .bollino-fonte {
  font-size: 0.8rem;
}

.segno-fonte.grande {
  width: 2.25rem;
  height: 2.25rem;
}

.segno-fonte.grande .bollino-fonte {
  font-size: 0.62rem;
}

.segno-fonte.fonte-gcat.grande {
  width: auto;
}

.legenda-fonti {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.legenda-fonti li {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  list-style: none;
}

.nome-fonte {
  font-weight: 600;
}

.avviso-breve {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--oss-attenuato);
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.avviso-breve.grave,
.avviso-breve.grave a {
  color: var(--oss-avviso);
}

/* ---------- Testate e pannello dei filtri (spec 002, FR-004–FR-007, R3) ---------- */

.testa-pagina {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0.5rem;
}

.contesto-pagina {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  margin: 0 0 0.5rem;
  color: var(--oss-attenuato);
  font-size: 0.9rem;
}

.pannello-filtri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}

.altri-filtri {
  margin: 0;
}

.altri-filtri[open] {
  flex-basis: 100%;
}

.altri-filtri > summary[role="button"] {
  display: inline-flex;
  width: auto;
  gap: 0.35rem;
  min-height: var(--oss-tocco);
  margin: 0;
  padding: 0.25rem 0.75rem;
  border: 0;
  border-radius: var(--oss-raggio-controllo);
  background: var(--oss-scheda);
  color: var(--oss-testo);
  font-size: 0.85rem;
}

.altri-filtri > summary[role="button"]::after {
  display: none;
}

.altri-filtri[open] > summary[role="button"] {
  margin-bottom: 0.5rem;
}

/* "Altri paesi" e "Altri anni" (spec 003, R9): un menu e "Mostra". */
.modulo-altri {
  display: grid;
  gap: 0 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--oss-scheda);
  border-radius: var(--oss-raggio-riquadro);
}

.modulo-altri select {
  min-height: var(--oss-tocco);
  margin-bottom: 0.5rem;
}

.modulo-altri button[type="submit"] {
  min-height: var(--oss-tocco);
  margin: 0;
  border-radius: var(--oss-raggio-controllo);
}

@media (min-width: 640px) {
  .modulo-altri {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .modulo-altri select {
    margin-bottom: 0;
  }
}

/* Filtri rapidi: una riga che scorre di lato (mai la pagina). */
/* `position: relative`: anche i testi per i lettori di schermo (assoluti)
   restano dentro il contenitore che scorre, invece di allargare la pagina. */
/* Prima riga: i quattro paesi rapidi, larghi uguali (R16). */
.filtri-rapidi {
  position: relative;
  flex: 1 1 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.filtri-rapidi::-webkit-scrollbar {
  display: none;
}

.filtri-rapidi ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filtri-rapidi li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.filtri-rapidi li {
  flex: 1 1 0;
  min-width: 0;
}

/* Pico fa di `nav` un contenitore flex: la lista deve prendere tutta la riga. */
nav.filtri-rapidi > ul {
  flex: 1 1 auto;
  width: 100%;
}

/* Un nome lungo ("Stati Uniti") va a capo dentro il tasto invece di uscirne. */
.filtri-rapidi .rapido {
  justify-content: center;
  width: 100%;
  padding: 0.2rem 0.25rem;
  font-size: 0.8rem;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

/* Da 768 px i tasti tornano larghi quanto il nome. */
@media (min-width: 768px) {
  .filtri-rapidi li {
    flex: none;
  }

  nav.filtri-rapidi > ul {
    flex: 0 1 auto;
    width: auto;
  }

  .filtri-rapidi .rapido {
    padding: 0 0.75rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }
}

/* Seconda riga: "Altri filtri" e, a destra, le pillole dei filtri attivi. */
#filtri-attivi {
  flex: 1 1 0;
  min-width: 0;
}

.altri-filtri[open] ~ #filtri-attivi {
  flex-basis: 100%;
}

#filtri-attivi:empty,
#filtri-attivi:not(:has(li)) {
  display: none;
}

/* Pillole: vanno a capo, niente scorrimento orizzontale della pagina. */
.filtri-attivi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filtri-attivi li {
  margin: 0;
  list-style: none;
}

.pillola,
.togli-tutti {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--oss-tocco);
  padding: 0 0.75rem;
  border: 1px solid transparent;
  border-radius: var(--oss-raggio-controllo);
  background: var(--oss-scheda);
  color: var(--oss-testo);
  font-size: 0.85rem;
  text-decoration: none;
}

.pillola span {
  color: var(--oss-attenuato);
  font-size: 1.1rem;
  line-height: 1;
}

.togli-tutti {
  border: 1px dashed var(--oss-bordo);
  color: var(--oss-primario);
}

/* ---------- Vista a schede (spec 002, FR-008, research R4) ---------- */

.titolo-sezione {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 1rem 0 0.5rem;
}

.titolo-sezione h2 {
  margin: 0;
}

.sezione-paese + .sezione-paese {
  margin-top: 1.5rem;
}

/* Scelta della vista: un controllo a segmenti, una riga che scorre di lato. */
.scelta-vista {
  position: relative;
  margin: 0 0 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.scelta-vista::-webkit-scrollbar {
  display: none;
}

.scelta-vista ul {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0.2rem;
  list-style: none;
  background: var(--oss-scheda);
  border-radius: var(--oss-raggio-riquadro);
}

.scelta-vista li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.scelta-vista a {
  display: inline-flex;
  align-items: center;
  min-height: var(--oss-tocco);
  padding: 0 0.7rem;
  border-radius: var(--oss-raggio-controllo);
  color: var(--oss-attenuato);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.scelta-vista a[aria-current="true"] {
  background: var(--oss-tinta);
  color: var(--oss-primario);
}

/* Sul telefono le viste (tre per i satelliti, quattro per i lanci, spec 003)
   sono tasti larghi uguali che coprono tutta la riga (R14). */
@media (max-width: 767.98px) {
  .scelta-vista.piena ul {
    display: flex;
    width: 100%;
  }

  .scelta-vista.piena li {
    flex: 1 1 0;
    min-width: 0;
  }

  .scelta-vista.piena a {
    justify-content: center;
    width: 100%;
    padding: 0 0.35rem;
  }
}

/* Riquadri delle definizioni (spec 003, R10): un riquadro per informazione, con
   le fonti una sotto l'altra come nella panoramica. Uno per riga sul telefono, 2
   da 640 px, 3 da 1024 px, 4 da 1280 px; "sei" (le sei definizioni dei satelliti)
   al massimo 3. I riquadri di una riga sono alti uguali (stretch). */
.gruppi-definizioni {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .gruppi-definizioni {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .gruppi-definizioni {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .gruppi-definizioni:not(.sei) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.riquadro.riquadro-info {
  min-height: 0;
  gap: 0.15rem;
}

.testa-riquadro-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-height: var(--oss-tocco);
  margin: -0.35rem -0.35rem 0 0;
}

.testa-riquadro-info h3 {
  margin: 0;
  color: var(--oss-testo);
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Riga di una fonte: segno, dettaglio piccolo che va a capo se serve, numero a
   destra su una riga sola. */
.numeri-fonti .riga-fonte {
  min-height: var(--oss-tocco);
}

.dettaglio-fonte {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.4rem;
  min-width: 0;
}

.dettaglio-fonte .riga-riquadro {
  display: inline;
  white-space: nowrap;
}

.gruppo-definizione {
  margin: 0;
}

.note-fonti {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  margin: -0.5rem 0 0.15rem;
  color: var(--oss-attenuato);
  font-size: 0.8rem;
}

/* Nota di pagina (es. "Launch Library 2 n.d." nei satelliti): una riga, non un paragrafo. */
.note-fonti.note-pagina {
  margin: 0 0 0.25rem;
}

.nota-assente {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.note-fonti .avviso-breve {
  display: inline-flex;
  flex-wrap: nowrap;
}

/* Due riquadri per riga, tre se le fonti con il numero sono tre: con due fonti
   (es. satelliti: LL2 n.d.) le righe piccole stanno su una riga sola. I riquadri
   di una riga sono alti uguali (stretch), anche se uno ha una riga in più. */

.riquadro {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 6.5rem;
  margin: 0;
  padding: 0.6rem 0.65rem 0.65rem;
  background: var(--oss-scheda);
  border: 0;
  border-radius: var(--oss-raggio-riquadro);
  box-shadow: none;
}

/* La ⓘ del riquadro in un cerchio, come l'indicatore in alto a destra del riferimento. */

.riquadro .numero {
  min-height: var(--oss-tocco);
  color: var(--oss-testo);
  font-size: 1.75rem;
  font-weight: 650;
  line-height: var(--oss-tocco);
}

.riga-riquadro {
  display: block;
  color: var(--oss-attenuato);
  font-size: 0.72rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

a.riga-riquadro.attenzione {
  color: var(--oss-avviso);
}

.dettaglio.in-linea {
  display: inline;
}

.cella .dettaglio {
  font-size: 0.8rem;
  line-height: 1.35;
}

.differenze {
  display: inline-flex;
  align-items: center;
  min-height: var(--oss-tocco);
  font-size: 0.85rem;
}

.intestazione-fonte {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
}

/* Pico dà margini negativi a `nav ul:first-of-type` e ai link dentro `nav`, e
   spazi a `nav li`: qui no, altrimenti le voci attive coprono le vicine. */
nav.menu-largo > ul,
.menu-telefono > nav > ul,
nav.scelta-vista > ul,
nav.filtri-rapidi > ul {
  margin: 0;
}

nav.menu-largo li,
.menu-telefono > nav li,
nav.scelta-vista li,
nav.filtri-rapidi li {
  padding: 0;
}

nav.menu-largo a,
nav.scelta-vista a,
nav.filtri-rapidi a {
  margin: 0;
}

/* Voci del menu ☰: larghe quanto il riquadro, la voce attiva in tinta con un
   piccolo margine, così non tocca i bordi. */
.menu-telefono > nav a {
  margin: 0 0.25rem;
  border-radius: var(--oss-raggio-controllo);
}

nav.scelta-vista > ul {
  padding: 0.15rem;
}

/* ---------- Panoramica: contatori e classifiche (spec 002, FR-011–FR-013, R5) ---------- */

/* Pagina iniziale per paese (R11): due riquadri per riga sul telefono, da 768 px
   tutti su una riga finché c'è posto; in ogni riquadro i numeri delle fonti. */
.sezione-home + .sezione-home {
  margin-top: 0.5rem;
}

.griglia-paesi {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .griglia-paesi {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

.sezione-home .vedi-tutta {
  margin-bottom: 0;
}

.riquadro-paese {
  aspect-ratio: auto;
}

.riquadro-paese h3 {
  display: flex;
  align-items: center;
  min-height: var(--oss-tocco);
  margin: -0.35rem 0 0;
  color: var(--oss-testo);
  font-size: 0.95rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.riquadro-paese h3::after {
  content: "\00a0›";
  color: var(--oss-attenuato);
}

/* Il riquadro intero è il link (spec 003, FR-001): niente sottolineature,
   evidenza al passaggio e al focus da tastiera. */
a.riquadro-paese {
  color: var(--oss-testo);
  text-decoration: none;
}

a.riquadro-paese:hover {
  background: color-mix(in srgb, var(--oss-primario) 8%, var(--oss-scheda));
}

a.riquadro-paese:focus-visible {
  outline: 2px solid var(--oss-primario);
  outline-offset: 2px;
}

/* Una riga per fonte: segno a sinistra, numero a destra. Qualunque numero ci
   sta (anche 13.108 a 360 px) e i riquadri restano tutti uguali. */
.numeri-fonti {
  display: grid;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.numeri-fonti li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  list-style: none;
}

.numeri-fonti li + li {
  border-top: 1px solid var(--oss-sfondo);
}

.numeri-fonti .segno-fonte {
  width: 1.4rem;
  height: 1.4rem;
}

.numeri-fonti .segno-fonte.fonte-gcat {
  width: auto;
  padding: 0 0.3rem;
}

.numeri-fonti .segno-fonte.fonte-gcat .bollino-fonte {
  font-size: 0.55rem;
}

/* Numero e, sotto, "di cui ISR" (spec 003, FR-001a), allineati a destra. */
.valori-fonte {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 0;
}

.di-cui-isr {
  color: var(--oss-attenuato);
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}

.numeri-fonti .numero {
  color: var(--oss-testo);
  font-size: 1.3rem;
  font-weight: 650;
  text-align: right;
  white-space: nowrap;
}

.scegli-paesi {
  margin: 0.5rem 0 0;
}

/* Impostazioni (R11): sei menu a tendina, due per riga da 640 px. */
.modulo-impostazioni fieldset {
  margin: 0;
}

.posti-paesi {
  display: grid;
  gap: 0 0.75rem;
}

@media (min-width: 640px) {
  .posti-paesi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.azioni-impostazioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.azioni-impostazioni button {
  width: auto;
  margin: 0;
}

.classifica a,
.contesto-pagina {
  overflow-wrap: anywhere;
}

/* Linguette: radio + etichette, solo HTML e CSS. Sotto 768 px si vede solo la
   fonte scelta; senza `:has()` restano tutte visibili, una sotto l'altra. */

.vedi-tutta {
  margin: 0.25rem 0 0;
  text-align: right;
}

.tutta-classifica {
  display: inline-flex;
  align-items: center;
  min-height: var(--oss-tocco);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- Paginazione (spec 002, US4) ---------- */

.paginazione {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.paginazione li {
  margin: 0;
  list-style: none;
}

/* ---------- Stampa (spec 002, casi limite; research R6) ---------- */

/* ---------- Aggiornamento delle fonti in fondo, avvisi in cima (R15) ---------- */

.titolo-legenda {
  margin: 1.5rem 0 0.25rem;
  color: var(--oss-attenuato);
  font-size: 0.85rem;
  font-weight: 600;
}

.legenda-fonti.in-fondo {
  margin-bottom: 0;
}

/* ---------- Pagine di dettaglio: righe etichetta / valore (R15) ---------- */

.testa-scheda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin-bottom: 0.25rem;
}

.testa-scheda h2,
.testa-scheda h3 {
  margin: 0;
  font-size: 1rem;
}

.stato-oggetto {
  padding: 0.1rem 0.6rem;
  border-radius: var(--oss-raggio-controllo);
  background: var(--oss-tinta);
  color: var(--oss-primario);
  font-size: 0.8rem;
  font-weight: 600;
}

.voci-dettaglio {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  margin: 0.5rem 0 0;
}

.voci-dettaglio dt,
.voci-dettaglio dd {
  margin: 0;
  padding: 0.45rem 0;
  border-top: 1px solid var(--oss-sfondo);
}

.voci-dettaglio dt {
  padding-right: 0.75rem;
  color: var(--oss-attenuato);
  font-size: 0.8rem;
  font-weight: 400;
}

.voci-dettaglio dd {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.voci-dettaglio dd .dettaglio {
  font-size: 0.78rem;
}

.scheda h3.sottotitolo {
  margin: 0.9rem 0 0.4rem;
  font-size: 0.9rem;
}

/* ---------- Metodo a moduli (R17) ---------- */

/* `nav.` per battere i margini negativi e il flex che Pico dà a `nav ul`. */
nav.indice-moduli > ul {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

nav.indice-moduli li {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.indice-moduli a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--oss-tocco);
  margin: 0;
  padding: 0.2rem 0.4rem;
  line-height: 1.15;
  border-radius: var(--oss-raggio-controllo);
  background: var(--oss-scheda);
  color: var(--oss-testo);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.sezione-metodo {
  margin: 0 0 1.5rem;
  scroll-margin-top: 1rem;
}

.sezione-metodo h2 {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
}

.sezione-metodo h2.sottotitolo-metodo {
  margin-top: 1rem;
  font-size: 1rem;
}

.moduli {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .moduli {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .moduli {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.modulo {
  min-width: 0;
  margin: 0;
  padding: 0.7rem 0.85rem;
  background: var(--oss-scheda);
  border-radius: var(--oss-raggio-riquadro);
}

.modulo h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
}

.modulo p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.modulo p + p {
  margin-top: 0.25rem;
}

.modulo p.dettaglio {
  font-size: 0.78rem;
}

.testa-modulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.25rem;
}

.testa-modulo h3 {
  margin: 0;
}

.categorie-metodo {
  margin: 0 0 0.5rem;
}

.elenco-metodo {
  margin: 0.75rem 0 0;
}

.elenco-metodo > summary {
  display: flex;
  align-items: center;
  min-height: var(--oss-tocco);
  padding: 0 0.85rem;
  border-radius: var(--oss-raggio-riquadro);
  background: var(--oss-scheda);
  font-size: 0.9rem;
  font-weight: 600;
}

.elenco-metodo[open] > summary {
  margin-bottom: 0.5rem;
}

@media print {
  .menu-telefono,
  .menu-largo,
  .pannello-filtri,
  .scelta-vista,
  .salta {
    display: none;
  }

  /* Tutte le fonti delle classifiche, anche quelle nascoste dalle linguette. */
  

  /* I testi delle ⓘ si stampano, nel flusso del testo. */
  details.info::details-content {
    content-visibility: visible;
    display: contents;
  }

  details.info > summary {
    display: none;
  }

  details.info .testo-info {
    position: static;
    display: block;
    margin: 0.25rem 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    color: var(--oss-attenuato);
    font-size: 0.85rem;
  }

  .scheda,
  .riquadro,
  .contatori {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* ---------- Accesso e amministrazione (spec 003, US2) ---------- */

.pagina-accesso {
  max-width: 26rem;
  margin: 1rem auto 0;
}

.modulo-accesso,
.modulo-password {
  display: grid;
  gap: 0.25rem;
}

.modulo-accesso button[type="submit"],
.modulo-password button[type="submit"] {
  min-height: var(--oss-tocco);
  border-radius: var(--oss-raggio-controllo);
}

.errore-accesso {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--oss-raggio-controllo);
  background: color-mix(in srgb, var(--oss-avviso) 14%, var(--oss-scheda));
  color: var(--oss-testo);
}

.errore-campo {
  margin: -0.5rem 0 0.75rem;
  color: var(--oss-avviso);
  font-size: 0.85rem;
}

/* Campo password con l'occhio a destra, dentro il bordo del campo. */
.campo-password {
  position: relative;
  display: block;
}

.campo-password input {
  padding-right: calc(var(--oss-tocco) + 0.25rem);
}

.campo-password .mostra-password {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--oss-tocco);
  height: var(--oss-tocco);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--oss-attenuato);
}

.campo-password .mostra-password svg {
  width: 1.3rem;
  height: 1.3rem;
}

.campo-password .mostra-password[aria-pressed="true"] .barra {
  display: none;
}

/* "Esci": un pulsante che sembra una voce del menu. */
.modulo-esci {
  margin: 0;
}

button.esci {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--oss-tocco);
  margin: 0;
  padding: 0 0.75rem;
  border: 0;
  border-radius: var(--oss-raggio-controllo);
  background: transparent;
  color: var(--oss-attenuato);
  font: inherit;
}

button.esci:hover {
  color: var(--oss-testo);
}

.avviso.conferma {
  border-color: transparent;
}

.scelte-periodo {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.scelte-periodo label {
  display: inline-flex;
  align-items: center;
  min-height: var(--oss-tocco);
}

.date-periodo {
  display: grid;
  gap: 0 0.75rem;
}

@media (min-width: 640px) {
  .date-periodo,
  .gruppi-definizioni.due-colonne {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.gruppi-definizioni.due-colonne {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .gruppi-definizioni.due-colonne {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.esito-accesso.non-riuscito {
  color: var(--oss-avviso);
}

/* Classifica completa a riquadri (spec 003, FR-020): la griglia della
   panoramica, una lista numerata. */
ol.classifica-riquadri {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

ol.classifica-riquadri > li {
  display: flex;
  margin: 0;
  list-style: none;
}

ol.classifica-riquadri > li > a {
  flex: 1 1 auto;
  min-width: 0;
}

.riquadro-paese .posizione {
  margin-right: 0.25rem;
  color: var(--oss-attenuato);
  font-variant-numeric: tabular-nums;
}

/* Differenze tipiche tra le fonti nella ⓘ (spec 003, FR-018). */
.testo-info p {
  margin: 0 0 0.4rem;
}

.titolo-differenze {
  display: block;
  margin-top: 0.25rem;
  font-weight: 600;
}

.differenze-fonti {
  margin: 0.2rem 0 0;
  padding-left: 1.1rem;
}

.differenze-fonti li {
  margin: 0 0 0.2rem;
  list-style: disc;
}

/* Delimitatori (spec 003, feedback del 2026-10-27, R10): riquadri grandi in
   trasparenza che raccolgono i riquadri di una parte, così è chiaro di che cosa
   sono il dettaglio (blocchi ISR e Non ISR, parti Satelliti e Lanci). */
.delimitatore {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.6rem 0.6rem;
  border-radius: calc(var(--oss-raggio-riquadro) * 1.25);
  background: color-mix(in srgb, var(--oss-primario) 7%, transparent);
}

.delimitatore > .gruppi-definizioni,
.delimitatore > .griglia-paesi {
  margin-bottom: 0;
}

.delimitatore .titolo-blocco,
.delimitatore > .titolo-sezione {
  margin-top: 0;
}

.sezione-home.delimitatore + .sezione-home.delimitatore {
  margin-top: 0;
}

.delimitatore .vedi-tutta {
  margin: 0.4rem 0 0;
}

/* Viste per voce (Categorie, Costellazioni, Vettori, Basi): sul telefono due
   riquadri per riga come la panoramica; i dettagli piccoli vanno a capo. */
@media (max-width: 639.98px) {
  .gruppi-definizioni.per-voce {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .per-voce .numeri-fonti .riga-fonte {
    gap: 0.3rem;
  }

  .per-voce .dettaglio-fonte .riga-riquadro {
    white-space: normal;
  }
}