/* 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. */

@import url('tokens.css');
@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 {
  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=email], select {
  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 { border-color: var(--rg-verde-scuro); }

/* 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); }
.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. */
.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); }
.voce .quando { 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». */
.stato {
  display: inline-block;
  font-family: var(--rg-font-mono);
  font-size: .8125rem;
  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;
}