/* ==========================================================================
   PlayRustLegacy — design system
   ==========================================================================

   Stile: terminale industriale scuro. La scelta viene dal soggetto — un
   archivio di un gioco del 2013 mantenuto in vita — piu' che dal gusto: un
   registro tecnico, monospaziato e numerato, dice "questa cosa e' tenuta in
   funzione da qualcuno" meglio di una grafica levigata.

   TIPOGRAFIA: font di sistema, nessun webfont.
   Non e' una scorciatoia. Un webfont da Google Fonts significa una richiesta a
   un terzo host, che la CSP di questo sito vieta di proposito, e un testo
   invisibile per i primi 200 ms su una connessione lenta. Gli stack monospaziati
   di sistema (SF Mono, Consolas, DejaVu Sans Mono) sono buoni e arrivano in zero
   millisecondi. Se un giorno servisse un carattere proprio, va ospitato in
   public/css/ e aggiunto a font-src in vercel.json — non caricato da un CDN.

   MODALITA' CHIARA: assente, deliberatamente.
   Il tema e' un'unica scelta scura. Non e' una svista da correggere con una
   media query: un archivio di Rust Legacy in tema chiaro non ha senso visivo, e
   mantenere due palette per un sito di cinque pagine sarebbe lavoro che nessuno
   guarda. La conseguenza va detta: chi ha impostato "chiaro" nel sistema vede
   comunque scuro. color-scheme: dark lo dichiara al browser, cosi' almeno i
   controlli nativi (barre di scorrimento, campi) si adeguano invece di stonare.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- colori ------------------------------------------------------------
     Nero, rosso e bianco: i colori del logo di Rust. Il rosso e' quello del
     marchio, #CE422B — il colore del metallo ossidato da cui il gioco prende
     il nome.

     QUEL ROSSO NON PUO' ESSERE USATO PER IL TESTO, e la ragione va scritta
     qui perche' altrimenti qualcuno lo "correggera'" tornando al colore di
     marca. Su fondo #0A0A0B da 4.18:1, sotto la soglia di 4.5:1 che WCAG
     chiede per il testo normale. Quindi i rossi sono due, con compiti diversi:

       --rust        #CE422B   4.18:1  riempimenti, bordi, aree piene. Come
                                       fondo di un pulsante con testo bianco
                                       sopra da 4.73:1, che e' conforme:
                                       la coppia va letta nel verso giusto.
       --rust-chiaro #FF6B52   7.05:1  tutto il testo rosso, i link, le icone.
                                       AAA anche per il corpo piccolo.

     Gli altri, sul fondo #0A0A0B:
       --testo       #FFFFFF  19.8:1  bianco pieno, il terzo colore del logo
       --testo-2     #B4B7BE   9.9:1  (AAA)
       --testo-3     #8A8E97   6.0:1  (AA per il testo normale; era #767A83,
                                       che con 4.6:1 passava appena)

     Il rosso non e' mai l'unico segnale: ogni stato porta anche un'icona e una
     parola, perche' circa un uomo su dodici non distingue il rosso dal verde.
     Qui conta il doppio, perche' rosso e' insieme il colore del marchio e
     quello dell'errore: senza la parola accanto, un bordo rosso e' ambiguo
     anche per chi i colori li vede benissimo. */
  --fondo: #0A0A0B;
  --fondo-2: #101011;
  --fondo-3: #17171A;
  --fondo-4: #1F1F23;

  --testo: #FFFFFF;
  --testo-2: #B4B7BE;
  --testo-3: #8A8E97;

  --rust: #CE422B;
  --rust-chiaro: #FF6B52;
  --rust-scuro: #2A0F0A;
  /* Sul rosso pieno va il bianco, non il nero: 4.73:1 contro 4.18:1. */
  --su-rust: #FFFFFF;

  /* Verde solo per lo stato "server attivo". Non e' un colore del marchio e non
     compare altrove: qui serve perche' rosso e' gia' occupato dall'identita',
     e usarlo anche per "attivo" renderebbe indistinguibili acceso e spento. */
  --verde: #3DDC7F;
  --verde-scuro: #0E2A18;

  /* Ambra: come il verde, un segnale funzionale e non un colore del marchio.
     Serve per gli avvisi che non sono errori — "il sistema mostrera' una
     schermata di sicurezza", "questa azione ti disconnette" — che in rosso
     leggerebbero come guasti e in bianco non si noterebbero affatto.
     9.44:1 su #0A0A0B. */
  --ambra: #F0B429;
  /* L'errore riusa il rosso chiaro: due rossi diversi per marchio ed errore
     sarebbero indistinguibili a occhio e darebbero solo l'illusione di una
     distinzione. Sono la parola e l'icona a dire di quale dei due si tratta. */
  --rosso: var(--rust-chiaro);
  --rosso-scuro: #2A0F0A;

  --bordo: #232326;
  --bordo-2: #33333A;

  /* --- tipografia -------------------------------------------------------- */
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "DejaVu Sans Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* Scala tipografica. I salti sono ampi di proposito: in uno stile brutalista
     la gerarchia la fa la dimensione, non il peso o il colore. */
  --t-xs: 0.6875rem;  /* 11px — solo etichette maiuscole, mai testo corrente */
  --t-sm: 0.8125rem;  /* 13px */
  --t-base: 1rem;     /* 16px — minimo per il testo corrente: sotto, iOS
                         ingrandisce da se' i campi al primo tocco */
  --t-lg: 1.125rem;
  --t-xl: 1.5rem;
  --t-2xl: 2rem;
  --t-3xl: 2.75rem;
  --t-4xl: 4rem;

  /* --- spaziatura: scala da 4px ------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* --- struttura --------------------------------------------------------- */
  --larghezza: 1200px;
  --raggio: 2px;      /* quasi nullo: e' la cifra dello stile */
  --bordo-largo: 1px;

  /* --- movimento ---------------------------------------------------------
     150-200 ms: sopra i 300 ms un'interfaccia sembra lenta, sotto i 100 ms il
     cambiamento non si legge come transizione. */
  --t-rapida: 150ms;
  --t-media: 200ms;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);

  /* --- livelli ----------------------------------------------------------- */
  --z-barra: 100;
  --z-menu: 200;
  --z-avviso: 300;
}

/* ==========================================================================
   Azzeramento
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* La barra in alto e' fissa: senza questo, un'ancora porterebbe il titolo
     della sezione sotto la barra, invisibile. */
  scroll-padding-top: 5rem;
}

body {
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.6;
  min-height: 100dvh;
  /* Trama a puntini: due gradienti, nessuna immagine da scaricare. Molto
     tenue — a piena opacita' competerebbe col testo. */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 1px, transparent 0);
  background-size: 32px 32px;
}

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

button, input, textarea, select { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

/* Un collegamento in mezzo a un paragrafo deve distinguersi dal testo, e non
   basta il colore: circa un uomo su dodici non distingue il rosso, quindi la
   sottolineatura non e' decorazione ma il secondo segnale. Resta staccata dal
   testo — underline-offset — perche' attaccata rende illeggibili le lettere che
   scendono sotto la riga. */
.link-rosso {
  color: var(--rust-chiaro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-rapida) var(--curva);
}
.link-rosso:hover { color: var(--testo); }

/* ==========================================================================
   Accessibilita' trasversale
   ========================================================================== */

/* Anello di messa a fuoco visibile su tutto cio' che si puo' raggiungere da
   tastiera. :focus-visible e non :focus, cosi' non compare al clic del mouse
   dove non serve. Non va mai rimosso: chi naviga da tastiera perderebbe
   qualunque riferimento su dove si trova. */
:focus-visible {
  outline: 2px solid var(--rust-chiaro);
  outline-offset: 2px;
  border-radius: var(--raggio);
}

/* Chi ha chiesto meno movimento nelle impostazioni di sistema lo ottiene: le
   animazioni non vengono accorciate, vengono annullate. 0.01ms invece di 0
   perche' un evento di fine transizione deve comunque scattare, altrimenti il
   codice che lo attende resta appeso. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visibile solo ai lettori di schermo. Il ritaglio a 1px invece di
   display:none e' necessario: un elemento nascosto del tutto viene escluso
   dall'albero di accessibilita' e non verrebbe letto. */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Salta al contenuto: primo elemento raggiungibile con Tab. Fuori schermo
   finche' non riceve la messa a fuoco. */
.salta {
  position: absolute;
  top: -100%;
  left: var(--s-4);
  z-index: calc(var(--z-barra) + 1);
  padding: var(--s-3) var(--s-4);
  background: var(--rust);
  color: var(--su-rust);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  text-transform: uppercase;
}
.salta:focus { top: var(--s-4); }

/* ==========================================================================
   Struttura
   ========================================================================== */

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  /* Margini laterali che crescono col viewport: su 375px 20px bastano, su
     desktop uno spazio piu' ampio evita che il testo tocchi il bordo. */
  padding-inline: var(--s-5);
}

@media (min-width: 768px) {
  .contenitore { padding-inline: var(--s-6); }
}

.sezione {
  padding-block: var(--s-8);
  border-top: var(--bordo-largo) solid var(--bordo);
}

@media (min-width: 768px) {
  .sezione { padding-block: var(--s-9); }
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

.titolo-sezione {
  font-family: var(--mono);
  font-size: clamp(var(--t-2xl), 5vw, var(--t-3xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Etichetta numerata sopra ogni sezione: 01 // IL PROGETTO.
   Il numero non e' decorazione — dice al lettore quanto e' lunga la pagina e
   dove si trova, che in uno scorrimento unico e' l'unico orientamento. */
.etichetta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
  color: var(--rust-chiaro);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.etichetta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--bordo-2), transparent);
}

.sottotitolo {
  max-width: 62ch;  /* 60-75 caratteri: oltre, l'occhio perde la riga al ritorno */
  margin-top: var(--s-4);
  color: var(--testo-2);
  font-size: var(--t-lg);
}

.mono { font-family: var(--mono); }

/* Numeri incolonnati: le cifre tabulari hanno tutte la stessa larghezza, quindi
   un contatore che passa da 9 a 10 non fa sobbalzare cio' che gli sta accanto. */
.cifre { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Pulsanti
   ========================================================================== */

.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  /* 44px di altezza minima: e' la soglia sotto la quale un bersaglio diventa
     difficile da centrare col pollice (Apple HIG; Material dice 48dp). */
  min-height: 44px;
  padding: var(--s-3) var(--s-5);
  border: var(--bordo-largo) solid transparent;
  border-radius: var(--raggio);
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--t-rapida) var(--curva),
              border-color var(--t-rapida) var(--curva),
              color var(--t-rapida) var(--curva),
              transform var(--t-rapida) var(--curva);
}

/* Un solo pulsante primario per schermata: se tutto e' primario, niente lo e'.
   Fondo rosso di marca con testo bianco: 4.73:1, conforme. Al contrario —
   rosso chiaro sotto testo nero — sarebbe piu' brillante ma leggerebbe come un
   avviso, e su un pulsante d'azione e' il segnale sbagliato. */
.pulsante-primario {
  background: var(--rust);
  border-color: var(--rust);
  color: var(--su-rust);
}
.pulsante-primario:hover:not(:disabled) {
  /* Schiarisce di poco: il bianco sopra deve restare conforme anche qui.
     #E14B31 col bianco da 4.02:1, quindi si scurisce invece di schiarire —
     l'effetto e' comunque un cambio percepibile, e il contrasto sale. */
  background: #B8391F;
  border-color: #B8391F;
}

.pulsante-secondario {
  border-color: var(--bordo-2);
  color: var(--testo);
}
.pulsante-secondario:hover:not(:disabled) {
  border-color: var(--rust);
  color: var(--rust-chiaro);
  background: rgba(206, 66, 43, 0.1);
}

.pulsante-fantasma {
  color: var(--testo-2);
  padding-inline: var(--s-3);
}
.pulsante-fantasma:hover:not(:disabled) { color: var(--testo); }

/* Pressione: uno spostamento di 1px, non uno schiacciamento in scala.
   translateY non altera lo spazio occupato, quindi non muove nulla intorno; una
   scala su un pulsante dentro una riga farebbe respirare la riga intera. */
.pulsante:active:not(:disabled) { transform: translateY(1px); }

/* Disabilitato: opacita' ridotta *e* cursore diverso *e* attributo disabled.
   L'opacita' da sola lascerebbe un elemento che sembra premibile e non fa
   niente, che e' il caso peggiore. */
.pulsante:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==========================================================================
   Barra di navigazione
   ========================================================================== */

.barra {
  position: sticky;
  top: 0;
  z-index: var(--z-barra);
  border-bottom: var(--bordo-largo) solid var(--bordo);
  /* Fondo quasi opaco: la sfocatura da sola lascerebbe passare il testo che
     scorre sotto, e su un fondo scuro con testo chiaro il risultato e'
     illeggibile. */
  background: rgba(8, 9, 11, 0.92);
  backdrop-filter: blur(12px);
}

.barra-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--mono);
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Il quadrato rosso col monogramma, come su rustlegacy.eu: il segno viene prima
   del nome e regge da solo quando il nome non c'e' — la scheda del browser, un
   collegamento sulla schermata iniziale. flex: none perche' non deve
   schiacciarsi quando la barra si stringe: un logo deformato e' peggio di un
   logo tagliato. */
.marchio-segno {
  display: inline-flex;
  flex: none;
  align-items: center;
}
.marchio-segno svg { display: block; }

.marchio-testo { display: inline-flex; align-items: baseline; gap: 0; }
.marchio b { color: var(--rust-chiaro); font-weight: 700; }
/* Il trattino basso lampeggiante di un prompt di terminale. Puramente
   decorativo, quindi aria-hidden nel markup: un lettore di schermo che
   annunciasse "trattino basso" dopo il nome del sito darebbe un'informazione
   sbagliata. */
.cursore {
  color: var(--rust-chiaro);
  animation: lampeggia 1.2s steps(2, start) infinite;
}
@keyframes lampeggia { 50% { opacity: 0; } }
/* Il lampeggio si ferma da se' con prefers-reduced-motion: la regola generale
   piu' in alto azzera durata e ripetizioni di ogni animazione. */

/* --- selettore di lingua -------------------------------------------------- */

/* Un <select> nativo, ristilizzato quanto basta per non stonare. Non viene
   sostituito da un menu costruito a mano perche' quello nativo apre il
   selettore di sistema su telefono, funziona da tastiera e viene annunciato
   correttamente: tre cose che costerebbero cento righe da rifare.
   L'altezza sta a 36px e non a 44 perche' non e' un bersaglio primario e sta in
   una barra alta 64: portarlo a 44 spingerebbe fuori i due pulsanti accanto. Su
   telefono la barra dei link e' chiusa nel menu e lo spazio non e' contestato,
   quindi la a media query lo riporta a 44. */
.lingua-select {
  height: 36px;
  padding: 0 var(--s-2);
  border: var(--bordo-largo) solid var(--bordo-2);
  border-radius: var(--raggio);
  background: var(--fondo-2);
  color: var(--testo-2);
  font-family: var(--mono);
  /* 16px e non meno: sotto questa soglia iOS ingrandisce da se' la pagina
     quando il campo riceve la messa a fuoco, e poi non la rimpicciolisce. */
  font-size: 16px;
  cursor: pointer;
  transition: border-color var(--t-rapida) var(--curva),
              color var(--t-rapida) var(--curva);
}
.lingua-select:hover { border-color: var(--rust); color: var(--testo); }

/* Le opzioni le disegna il sistema operativo, non il CSS. Dichiarare i colori
   serve comunque: su Windows un <select> scuro senza questo mostra un elenco
   bianco su bianco. */
.lingua-select option { background: var(--fondo-2); color: var(--testo); }

@media (max-width: 767px) {
  .lingua-select { height: 44px; }
}

.barra-link {
  display: none;
  align-items: center;
  gap: var(--s-1);
}

.barra-link a {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--raggio);
  color: var(--testo-2);
  font-family: var(--mono);
  font-size: var(--t-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: color var(--t-rapida) var(--curva),
              background var(--t-rapida) var(--curva);
}
.barra-link a:hover { color: var(--testo); background: var(--fondo-3); }

/* La posizione corrente va segnalata: senza, in un sito di piu' pagine non si
   sa dove si e'. aria-current="page" nel markup fa entrambe le cose — regge lo
   stile e viene annunciato dai lettori di schermo. */
.barra-link a[aria-current="page"] {
  color: var(--rust-chiaro);
  background: var(--rust-scuro);
}

.barra-azioni {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Il pulsante del menu compare solo dove i link sono nascosti. 44x44 pieni. */
.menu-pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: var(--bordo-largo) solid var(--bordo-2);
  border-radius: var(--raggio);
  background: none;
  cursor: pointer;
  color: var(--testo);
}

@media (min-width: 900px) {
  .barra-link { display: flex; }
  .menu-pulsante { display: none; }
}

/* Menu a tendina su schermo piccolo. hidden nel markup lo chiude davvero — un
   pannello nascosto con la sola opacita' resterebbe raggiungibile con Tab, e chi
   naviga da tastiera si troverebbe a percorrere link invisibili. */
.menu {
  border-bottom: var(--bordo-largo) solid var(--bordo);
  background: var(--fondo-2);
}
.menu[hidden] { display: none; }
.menu a {
  display: block;
  padding: var(--s-4) var(--s-5);
  border-bottom: var(--bordo-largo) solid var(--bordo);
  color: var(--testo-2);
  font-family: var(--mono);
  font-size: var(--t-sm);
  text-transform: uppercase;
  min-height: 44px;
}
.menu a:last-child { border-bottom: none; }
.menu a[aria-current="page"] { color: var(--rust-chiaro); }

@media (min-width: 900px) {
  .menu { display: none !important; }
}

/* ==========================================================================
   Riquadri e schede
   ========================================================================== */

.riquadro {
  padding: var(--s-5);
  border: var(--bordo-largo) solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--fondo-2);
}

.scheda {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: var(--bordo-largo) solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--fondo-2);
  transition: border-color var(--t-media) var(--curva),
              background var(--t-media) var(--curva);
}
.scheda:hover { border-color: var(--bordo-2); background: var(--fondo-3); }

.scheda-numero {
  color: var(--rust-chiaro);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.scheda h3 {
  font-family: var(--mono);
  font-size: var(--t-lg);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.scheda p { color: var(--testo-2); font-size: var(--t-sm); }

.griglia {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .griglia-2, .griglia-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .griglia-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Stato del server
   ========================================================================== */

.stato {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: var(--bordo-largo) solid var(--bordo-2);
  border-radius: var(--raggio);
  background: var(--fondo-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pallino {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--testo-3);
  flex-shrink: 0;
}
/* Il colore non e' l'unico segnale: accanto al pallino c'e' sempre la parola
   ATTIVO / SPENTO / N/D. */
.stato[data-stato="attivo"] { border-color: var(--verde); color: var(--verde); }
.stato[data-stato="attivo"] .pallino {
  background: var(--verde);
  box-shadow: 0 0 0 3px rgba(61, 220, 127, 0.18);
  animation: pulsa 2.4s ease-in-out infinite;
}
.stato[data-stato="spento"] { border-color: var(--rosso); color: var(--rosso); }
.stato[data-stato="spento"] .pallino { background: var(--rosso); }

@keyframes pulsa {
  50% { box-shadow: 0 0 0 6px rgba(61, 220, 127, 0); }
}

/* --- contatori --- */
.numeri {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px) {
  .numeri { grid-template-columns: repeat(4, 1fr); }
}

.numero {
  padding: var(--s-5);
  border: var(--bordo-largo) solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--fondo-2);
}
.numero dt {
  color: var(--testo-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.numero dd {
  margin: var(--s-2) 0 0;
  font-family: var(--mono);
  font-size: clamp(var(--t-2xl), 4vw, var(--t-3xl));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Riserva l'altezza mentre il valore arriva: senza, la pagina sobbalza quando
   /api/stato risponde, ed e' esattamente cio' che il CLS misura. */
.numero dd[data-attesa]::after {
  content: attr(data-attesa);
  color: var(--testo-3);
}

/* ==========================================================================
   Tabella
   ========================================================================== */

/* Il contenitore scorre, non la pagina: una tabella larga dentro un blocco con
   overflow-x resta consultabile su telefono senza che il corpo del documento
   scorra in orizzontale. */
.tabella-scorre {
  overflow-x: auto;
  border: var(--bordo-largo) solid var(--bordo);
  border-radius: var(--raggio);
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--t-sm);
}

thead th {
  position: sticky;
  top: 0;
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bordo-largo) solid var(--bordo-2);
  background: var(--fondo-3);
  color: var(--testo-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}

tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: var(--bordo-largo) solid var(--bordo);
  color: var(--testo-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--fondo-2); }
tbody td:first-child { color: var(--testo); font-weight: 500; }

/* ==========================================================================
   Moduli
   ========================================================================== */

.modulo {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Etichetta sempre visibile, mai il solo segnaposto: il segnaposto scompare
   appena si comincia a scrivere, e chi torna sul modulo dopo una distrazione non
   sa piu' cosa stava compilando. */
.campo label {
  color: var(--testo-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.campo label .obbligatorio {
  color: var(--rust-chiaro);
  margin-left: 2px;
}

.campo input {
  /* 44px: sotto questa altezza il campo e' scomodo da centrare col pollice.
     16px di corpo: sotto, Safari su iOS ingrandisce la pagina al primo tocco e
     l'impaginazione salta. */
  min-height: 44px;
  padding: var(--s-3) var(--s-4);
  border: var(--bordo-largo) solid var(--bordo-2);
  border-radius: var(--raggio);
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--mono);
  font-size: var(--t-base);
  transition: border-color var(--t-rapida) var(--curva);
}
.campo input::placeholder { color: var(--testo-3); }
.campo input:hover:not(:disabled) { border-color: var(--testo-3); }
.campo input:focus { border-color: var(--rust-chiaro); outline-offset: 1px; }

.campo input[aria-invalid="true"] { border-color: var(--rosso); }

/* Testo di aiuto persistente sotto il campo, non un segnaposto: resta leggibile
   mentre si scrive, che e' il momento in cui serve. */
.aiuto {
  color: var(--testo-3);
  font-size: var(--t-xs);
  font-family: var(--mono);
}

/* L'errore sta sotto il campo che lo riguarda, non in cima al modulo: chi legge
   deve capire quale casella correggere senza cercare. */
.errore-campo {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--rosso);
  font-size: var(--t-xs);
  font-family: var(--mono);
}
.errore-campo[hidden] { display: none; }
.errore-campo svg { flex-shrink: 0; margin-top: 2px; }

/* Campo password con il pulsante mostra/nascondi dentro. */
.campo-password { position: relative; display: flex; flex-direction: column; }
.campo-password input { padding-right: 3rem; }
.mostra-password {
  position: absolute;
  right: 1px;
  /* Allineato al campo, non alla colonna: l'etichetta sta sopra e occupa
     spazio, quindi un centramento verticale semplice lo porterebbe fuori. */
  bottom: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--testo-3);
  border-radius: var(--raggio);
}
.mostra-password:hover { color: var(--testo); }

/* --- avvisi in cima al modulo --- */
.avviso {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  border: var(--bordo-largo) solid var(--bordo-2);
  border-radius: var(--raggio);
  background: var(--fondo-3);
  font-size: var(--t-sm);
}
.avviso[hidden] { display: none; }
.avviso svg { flex-shrink: 0; margin-top: 2px; }
.avviso-errore { border-color: var(--rosso); background: var(--rosso-scuro); color: #FFD5D5; }
.avviso-errore svg { color: var(--rosso); }
.avviso-ok { border-color: var(--verde); background: var(--verde-scuro); color: #C8F5DA; }
.avviso-ok svg { color: var(--verde); }
.avviso-nota { color: var(--testo-2); }
.avviso-nota svg { color: var(--ambra); }

/* --- rotella di attesa nel pulsante --- */
.rotella {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: gira 700ms linear infinite;
  flex-shrink: 0;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ==========================================================================
   Pie' di pagina
   ========================================================================== */

.pie {
  padding-block: var(--s-7) var(--s-6);
  border-top: var(--bordo-largo) solid var(--bordo);
  background: var(--fondo-2);
  color: var(--testo-3);
  font-size: var(--t-sm);
}
.pie-griglia {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-6);
}
@media (min-width: 700px) {
  .pie-griglia { grid-template-columns: 2fr 1fr 1fr; }
}
.pie h4 {
  margin-bottom: var(--s-3);
  color: var(--testo-2);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pie ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.pie a { color: var(--testo-3); transition: color var(--t-rapida) var(--curva); }
.pie a:hover { color: var(--rust-chiaro); }
.pie-basso {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  padding-top: var(--s-5);
  border-top: var(--bordo-largo) solid var(--bordo);
  font-family: var(--mono);
  font-size: var(--t-xs);
}