/* Riguardati — l'applicazione dell'assistito.

   Stessa identità del sito pubblico: `tokens.css` è lo stesso file, copiato e
   non reinventato, e i caratteri sono serviti da qui — nessuna richiesta verso
   terzi da un'applicazione che tratta dati sanitari (RG-08), e nessuna
   dipendenza di rete per chi ha una linea lenta.

   **L2, non negoziabile**: corpo minimo 18px e pulsante di conferma 56px. Chi
   tocca quel pulsante ogni mattina ha ottant'anni, spesso con il testo di
   sistema già ingrandito. Tutte le misure di testo sono in rem, così quella
   preferenza funziona davvero (WCAG 1.4.4).

   Nessuna informazione affidata al solo colore: verde e pesca hanno fra loro
   un contrasto di 2,31 in tritanopia. Dove il colore dice qualcosa, accanto
   c'è una parola. */

/* I gettoni arrivano da un <link> proprio, versionato: un `@import` qui
   dentro non si può versionare, e il browser lo scarica solo dopo aver
   letto questo file. */
@import url('font/font.css');

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

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

body {
  margin: 0;
  background: var(--rg-crema);
  color: var(--rg-blu);
  font-family: var(--rg-font-testo);
  font-size: var(--rg-testo-base);        /* 18px */
  line-height: var(--rg-interlinea);
  -webkit-font-smoothing: antialiased;
  /* La barra di sistema di iOS non si mangia il contenuto. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── impianto ───────────────────────────────────────────────────────── */
.schermata {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--rg-sp-5) var(--rg-sp-4) var(--rg-sp-8);
}

header.testata {
  display: flex; align-items: center; gap: var(--rg-sp-4);
  padding: var(--rg-sp-4) var(--rg-sp-4) 0;
  max-width: 34rem; margin: 0 auto;
}
header.testata img { height: 30px; width: auto; }
header.testata .avanti { margin-left: auto; }

h1 {
  font-family: var(--rg-font-display);
  font-weight: 800;
  font-size: var(--rg-titolo);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 var(--rg-sp-4);
}
h2 {
  font-family: var(--rg-font-display);
  font-weight: 700;
  font-size: var(--rg-testo-grande);
  margin: var(--rg-sp-6) 0 var(--rg-sp-3);
}
p { margin: 0 0 var(--rg-sp-4); max-width: 40ch; }
.nota { font-size: var(--rg-testo-piccolo); color: var(--rg-grigio); }

/* ── comandi ────────────────────────────────────────────────────────── */
/* Il pulsante è alto 56px e largo quanto lo schermo: un bersaglio che non si
   sbaglia, e che non chiede di mirare. */
button, .bottone {
  display: block; width: 100%;
  min-height: var(--rg-bersaglio-conferma);
  margin: 0 0 var(--rg-sp-3);
  padding: var(--rg-sp-3) var(--rg-sp-5);
  font: inherit; font-weight: 600;
  text-align: center; text-decoration: none;
  color: var(--rg-bianco);
  background: var(--rg-verde-scuro);
  border: 2px solid var(--rg-verde-scuro);
  border-radius: var(--rg-raggio);
  cursor: pointer;
}
button.secondario {
  color: var(--rg-verde-scuro);
  background: var(--rg-bianco);
}
button.piano {
  color: var(--rg-blu-medio);
  background: transparent;
  border-color: transparent;
  min-height: var(--rg-bersaglio-min);
  text-decoration: underline;
}
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--rg-blu);
  outline-offset: 2px;
}

/* Il gesto per cui esiste tutto il resto. Verde pieno, alto, e da solo in
   mezzo allo schermo: la mattina non deve esserci nient'altro da capire. */
button.sto-bene {
  min-height: 84px;
  font-size: var(--rg-testo-grande);
  margin-top: var(--rg-sp-5);
}

/* ── campi ──────────────────────────────────────────────────────────── */
label { display: block; font-weight: 600; margin-bottom: var(--rg-sp-2); }

input[type=text], input[type=tel], input[type=date], input[type=time],
input[type=email], select, textarea {
  width: 100%;
  min-height: var(--rg-bersaglio-conferma);
  padding: var(--rg-sp-3);
  font: inherit;
  color: var(--rg-blu);
  background: var(--rg-bianco);
  border: 2px solid var(--rg-linea);
  border-radius: var(--rg-raggio);
  margin-bottom: var(--rg-sp-4);
}
input:focus, select:focus, textarea:focus { border-color: var(--rg-verde-scuro); }

/* La risposta libera di un questionario: si scrive, quindi ha bisogno di
   spazio. Cresce in verticale e non si restringe mai sotto le quattro righe. */
textarea {
  min-height: 6.5em;
  line-height: var(--rg-interlinea);
  resize: vertical;
}

/* Il codice a sei cifre: grande, spaziato, e con la tastiera numerica. */
input.codice {
  font-family: var(--rg-font-mono);
  font-size: 1.75rem;
  letter-spacing: .3em;
  text-align: center;
}

/* Due bottoni grandi al posto di un menu a tendina, quando le scelte sono due:
   una tendina su un telefono è un bersaglio piccolo dentro un bersaglio piccolo. */
.scelte { display: grid; gap: var(--rg-sp-3); margin-bottom: var(--rg-sp-4); }

/* L3 · l'intestazione di un gruppo di scelte. Era una <label> senza campo a
   cui riferirsi: sullo schermo si vedeva, e un lettore di schermo la leggeva
   come un'etichetta orfana — cioè la annunciava e poi non diceva di che cosa.
   Ora è il titolo dichiarato del gruppo (aria-labelledby). */
.titolo-gruppo {
  display: block;
  font-weight: 600;
  margin-bottom: var(--rg-sp-2);
}
.scelte button { margin: 0; }
.scelte button[aria-pressed=true] {
  background: var(--rg-verde-tenue);
  color: var(--rg-verde-scuro);
  border-color: var(--rg-verde-scuro);
}
/* Lo stato scelto non è solo colore: il segno di spunta lo dice comunque. */
.scelte button[aria-pressed=true]::after { content: ' ✓'; }

/* ── passi dell'iscrizione ──────────────────────────────────────────── */
/* RF-02 · una domanda per schermata, e si vede a che punto si è. Non una
   barra che avanza: i numeri dicono anche quanto manca. */
/* Una riga di prosa sotto il titolo — «Ciao Maria», «Il controllo è acceso».
   Prima usava `.passo`, che è il contatore dell'iscrizione ed è monospaziato:
   il saluto arrivava in caratteri da terminale. */
.introduzione {
  font-size: var(--rg-testo-base);
  color: var(--rg-blu-medio);
  margin: 0 0 var(--rg-sp-4);
}

/* Il contatore dei passi, e solo quello: «Domanda 2 di 5». Qui il
   monospaziato serve, perché i numeri non ballano da un passo all'altro. */
.passo {
  font-family: var(--rg-font-mono);
  font-size: var(--rg-testo-piccolo);
  color: var(--rg-grigio);
  margin: 0 0 var(--rg-sp-3);
}

/* ── il piano ───────────────────────────────────────────────────────── */
.voce {
  display: block; width: 100%; text-align: left;
  background: var(--rg-bianco);
  border: 1px solid var(--rg-linea);
  border-radius: var(--rg-raggio-grande);
  padding: var(--rg-sp-4);
  margin-bottom: var(--rg-sp-3);
  color: inherit; font: inherit; font-weight: 400;
  min-height: var(--rg-bersaglio-conferma);
}
.voce .titolo { font-weight: 700; display: block; margin-bottom: var(--rg-sp-2); }
/* `display: block` e non un margine: erano due elementi in riga e si leggeva
   «05/09/2026da confermare». Una data e uno stato sono due informazioni, e
   vanno su due righe. */
.voce .quando {
  display: block;
  font-size: var(--rg-testo-piccolo);
  color: var(--rg-blu-medio);
}

/* Lo stato di una voce è una parola, non un pallino colorato: «da fare» e
   «rimandata» si leggono anche in tritanopia, e RG-15 vieta le etichette che
   giudicano — non esiste «in ritardo». */
/* 16px e non 13: L2 mette il minimo a 18px per il corpo, e questa è
   un'etichetta — ma è **testo che una persona legge per capire a che punto
   sta una voce del proprio piano**, non una decorazione. Sotto il minimo dei
   token non si scende (`--rg-testo-piccolo`, 16px). */
/* ⚠️ Niente monospaziato: «da confermare» è una parola che una persona legge,
   non un codice. Il monospaziato in questo prodotto sta al codice a sei cifre
   e ai contatori, e usarlo per la prosa la fa sembrare l'output di una
   macchina proprio a chi ha più bisogno che sembri una frase. */
.stato {
  display: inline-block;
  font-size: var(--rg-testo-piccolo);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
  margin-top: var(--rg-sp-2);
}
.stato.proposta { color: var(--rg-ambra-scura); }
.stato.attiva   { color: var(--rg-verde-scuro); }
.stato.rinviata { color: var(--rg-grigio); }

/* ── la scheda di una voce ──────────────────────────────────────────── */
.blocco { margin-bottom: var(--rg-sp-5); }
.blocco h2 { margin-top: 0; }

/* RG-03 · fonte e data di revisione **visibili**, non in fondo in grigio
   chiaro: sono ciò che distingue una raccomandazione da un consiglio. */
.fonte {
  background: var(--rg-verde-tenue);
  border-radius: var(--rg-raggio);
  padding: var(--rg-sp-4);
  font-size: var(--rg-testo-piccolo);
  margin: var(--rg-sp-5) 0;
}
.fonte a { color: var(--rg-verde-scuro); }

.azioni { display: grid; gap: var(--rg-sp-2); margin-top: var(--rg-sp-6); }
.azioni button { margin: 0; }

/* ── esiti e attese ─────────────────────────────────────────────────── */
.avviso {
  padding: var(--rg-sp-4);
  border-radius: var(--rg-raggio);
  margin-bottom: var(--rg-sp-4);
  font-size: var(--rg-testo-piccolo);
}
.avviso.bene { background: var(--rg-verde-tenue); color: var(--rg-verde-scuro); }
.avviso.male { background: var(--rg-pesca-tenue); color: var(--rg-ambra-scura); }

/* Un'attesa che non dice niente sembra un guasto: qui c'è una parola. */
.attesa { color: var(--rg-grigio); font-style: italic; }

.vuoto {
  background: var(--rg-bianco);
  border: 1px dashed var(--rg-linea);
  border-radius: var(--rg-raggio-grande);
  padding: var(--rg-sp-5);
  text-align: center;
  color: var(--rg-grigio);
}

/* Solo per chi legge con uno screen reader: le intestazioni di sezione che
   sullo schermo sono già evidenti dalla forma. */
.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;
}