/* Stessa palette "turno di notte" dell'applicazione: chi arriva qui e poi entra
   nel simulatore deve riconoscere lo stesso posto. */
:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --panel-alt: #eef1f5;
  --text: #171c23;
  --muted: #626b78;
  --border: #dde2e9;
  --accent: #0b5fa5;
  --accent-chiaro: #e4eefa;
  --accent-testo: #08436f;
  --critico: #b3341a;
  --critico-chiaro: #fbe9e5;
  --ok: #1f7a4d;
  --ok-chiaro: #e3f4ea;
  --scena: #1d232c;
  --scena-testo: #e8ecf1;
  /* Ambra, non rosso, e gli stessi valori dell'applicazione: il percorso
     infermiere non e' rotto, e' costruito su una fonte incompleta. E un codice
     di invio giallo va stampato giallo. */
  --beta-chiaro: #fbf0d8;
  --beta-testo: #7f5405;
  --radius: 10px;
  --font-testo: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1319;
    --panel: #171d25;
    --panel-alt: #1e252f;
    --text: #e6eaf0;
    --muted: #97a1af;
    --border: #2a323d;
    --accent: #4d9bea;
    --accent-chiaro: #10293f;
    --accent-testo: #a8cff5;
    --critico: #f0785c;
    --critico-chiaro: #381a13;
    --beta-chiaro: #382a10;
    --beta-testo: #edc073;
    --ok: #4cbb87;
    --ok-chiaro: #10301f;
    --scena: #0a0e13;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-testo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.contenitore { max-width: 860px; margin: 0 auto; padding: 0 20px; }

/* Navigazione ------------------------------------------------------------ */
/* Due righe, e la distinzione fra le due e' il punto. Prima erano una sola:
   le sezioni della pagina corrente e il link all'altra pagina avevano lo
   stesso aspetto, la barra era identica su index e su guida ma l'elenco
   cambiava sotto, e chi passava dall'una all'altra non aveva modo di sapere
   dove fosse finito.

   Riga 1: dove sei, e vale su tutte e due le pagine allo stesso modo.
   Riga 2: le sezioni di QUESTA pagina, e basta. */
.barra {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.barra-doc .contenitore {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 46px;
}
.marchio {
  font-size: 0.95rem; font-weight: 650; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.marchio:hover { color: var(--accent); }

/* Il selettore delle due pagine: un interruttore, non una voce di menu. */
.documenti {
  display: flex; gap: 3px; flex: none;
  background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px;
}
.documento {
  font-size: 0.85rem; font-weight: 600; white-space: nowrap;
  padding: 4px 14px; border-radius: 999px;
  color: var(--muted); text-decoration: none;
  border: 1px solid transparent;
}
a.documento:hover { color: var(--accent); }
/* Tinta e bordo, non riempimento pieno: sul blu di accento del tema scuro il
   testo bianco starebbe a 2,9:1. */
.documento.attivo {
  background: var(--accent-chiaro); color: var(--accent-testo);
  border-color: var(--accent); font-weight: 700;
}

.barra-sezioni { border-top: 1px solid var(--border); }
.sezioni {
  display: flex; gap: 18px; align-items: center;
  min-height: 38px; overflow-x: auto; white-space: nowrap;
  scrollbar-width: none; -ms-overflow-style: none;
}
.sezioni::-webkit-scrollbar { display: none; }
.sezioni a {
  color: var(--muted); text-decoration: none;
  font-size: 0.86rem; white-space: nowrap;
  padding: 2px 0; border-bottom: 2px solid transparent;
}
.sezioni a:hover { color: var(--accent); }
/* Calcolata dallo script, non scritta a mano: scritta a mano diceva sempre la
   prima sezione, anche quando eri in fondo alla pagina. */
.sezioni a.attivo { color: var(--text); font-weight: 650; border-bottom-color: var(--accent); }

/* Senza questo, cliccare una voce porta il titolo esattamente sotto la barra:
   misurato, top 0 con la barra alta 55px. Lo script tiene il valore vero. */
h2[id], h3[id] { scroll-margin-top: var(--altezza-barra, 100px); }

/* Testata ---------------------------------------------------------------- */
.testata { padding: 64px 0 40px; }
.occhiello {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 14px;
}
h1 {
  font-size: clamp(2rem, 5.5vw, 2.9rem);
  line-height: 1.12; letter-spacing: -0.025em;
  margin: 0 0 18px; font-weight: 700;
}
.sommario { font-size: 1.13rem; color: var(--muted); margin: 0; max-width: 62ch; }

h2 {
  font-size: 1.42rem; letter-spacing: -0.018em; font-weight: 650;
  margin: 52px 0 14px; padding-top: 8px;
}
h3 { font-size: 1.05rem; font-weight: 650; margin: 28px 0 8px; }
p { margin: 0 0 15px; }
p:last-child { margin-bottom: 0; }
a { color: var(--accent); }
strong { font-weight: 650; }
em { color: var(--text); }

/* Numeri ----------------------------------------------------------------- */
.numeri {
  display: grid; gap: 1px; background: var(--border);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; margin: 34px 0 8px;
}
.numeri div { background: var(--panel); padding: 18px 16px; }
.numeri b { display: block; font-size: 1.7rem; line-height: 1.1; letter-spacing: -0.03em; }
.numeri span { display: block; font-size: 0.83rem; color: var(--muted); margin-top: 4px; }

/* Pannelli --------------------------------------------------------------- */
.pannello {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px; margin: 18px 0;
}
.pannello h3:first-child, .pannello p:first-child { margin-top: 0; }

.nota {
  border-left: 3px solid var(--accent); background: var(--accent-chiaro);
  color: var(--accent-testo);
  padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 20px 0; font-size: 0.95rem;
}
.attenzione {
  border-left: 3px solid var(--critico); background: var(--critico-chiaro);
  color: var(--text);
  padding: 14px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 20px 0; font-size: 0.95rem;
}

/* Passi ------------------------------------------------------------------ */
.passi { counter-reset: passo; list-style: none; padding: 0; margin: 22px 0; }
.passi > li {
  counter-increment: passo; position: relative;
  padding: 0 0 22px 52px; border-left: 2px solid var(--border);
  margin-left: 15px;
}
.passi > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.passi > li::before {
  content: counter(passo);
  position: absolute; left: -16px; top: -2px;
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 0.85rem; font-weight: 700;
  display: grid; place-items: center;
}
.passi h3 { margin: 0 0 6px; }

/* Due colonne ------------------------------------------------------------ */
.due { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 20px 0; }

/* Tabella ---------------------------------------------------------------- */
.tabella { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; min-width: 460px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 650; }
tbody tr:last-child td { border-bottom: none; }
.si { color: var(--ok); font-weight: 650; }
.no { color: var(--critico); font-weight: 650; }

/* Scheda di missione ----------------------------------------------------- */
.scheda {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); overflow: hidden; margin: 20px 0;
  font-family: var(--font-mono); font-size: 0.83rem;
}
.scheda-testa {
  background: var(--panel-alt); padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-weight: 650; letter-spacing: 0.02em;
}
/* Colonne fisse e non auto-fit: con sei voci l'auto-fit ne mette cinque in
   riga e lascia la sesta da sola dentro mezza scheda vuota, che sembra un
   errore di rendering. Due per riga, tre da 620px in su: sempre piene. */
.scheda-griglia {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--border); margin: 0;
}
@media (min-width: 620px) {
  .scheda-griglia { grid-template-columns: repeat(3, 1fr); }
}
.scheda-griglia > div { background: var(--panel); padding: 10px 16px; }
.scheda-griglia dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin: 0 0 3px; }
.scheda-griglia dd { margin: 0; font-weight: 650; }
.scheda-filtro { border-top: 1px solid var(--border); padding: 12px 16px; }
.scheda-filtro p { margin: 0 0 6px; }
.scheda-filtro p:last-child { margin-bottom: 0; }
.scheda-filtro .dom { color: var(--muted); }
/* Il codice di invio e' un colore che vuol dire qualcosa: stamparlo in rosso
   mentre dice GIALLO e' l'errore che questo pubblico nota al primo sguardo. */
.codice-invio { color: var(--beta-testo); font-weight: 700; }

/* Dialogo ---------------------------------------------------------------- */
.dialogo { margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.battuta { padding: 12px 16px; border-radius: var(--radius); font-size: 0.95rem; }
.b-tu { background: var(--accent-chiaro); color: var(--accent-testo); align-self: flex-end; max-width: 82%; }
.b-scena { background: var(--scena); color: var(--scena-testo); max-width: 88%; }
.b-eco {
  align-self: center; font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--muted); background: var(--panel-alt);
  border: 1px dashed var(--border); padding: 6px 12px;
}
.chi { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.65; margin-bottom: 4px; }

/* Etichette -------------------------------------------------------------- */
.tag {
  display: inline-block; font-size: 0.74rem; font-weight: 650;
  padding: 2px 9px; border-radius: 20px; margin: 0 4px 5px 0;
  background: var(--panel-alt); color: var(--muted); border: 1px solid var(--border);
}

.etichetta-beta {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 2px 9px; border-radius: 999px; vertical-align: 2px;
  background: var(--beta-chiaro); color: var(--beta-testo);
}
.beta-perche {
  border-left: 2px solid var(--beta-testo); padding-left: 12px;
  color: var(--muted); font-size: 0.94rem;
}

ul, ol { margin: 0 0 15px; padding-left: 22px; }
li { margin-bottom: 7px; }
li:last-child { margin-bottom: 0; }

/* Figure ----------------------------------------------------------------- */
.figura {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); padding: 20px 22px; margin: 24px 0;
}
.figura-tit {
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0 0 18px;
}
.figura-nota { font-size: 0.88rem; color: var(--muted); margin: 18px 0 0; }
.figura-nota:last-child { margin-bottom: 0; }

/* Lo scambio fra il codice e il modello --------------------------------- */
.scambio { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: stretch; }
/* Colonna centrale a larghezza fissa: con `auto` le due etichette delle
   frecce si stendevano su una riga sola e schiacciavano i due lati, che sono
   il contenuto. */
@media (min-width: 720px) { .scambio { grid-template-columns: 1fr 186px 1fr; } }

.lato { border-radius: var(--radius); padding: 14px 16px; }
.lato h4 {
  margin: 0 0 9px; font-size: 0.8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
}
.lato ul { margin: 0; padding-left: 17px; font-size: 0.89rem; }
.lato li { margin-bottom: 3px; }
/* Bordo pieno contro tratteggiato, non solo verde contro rosso: misurati, i
   due si separano di ΔE 6,8 in deuteranopia, sotto la soglia di 8. Qui il
   colore e' il terzo indizio, dopo il nome e il tratto. */
.lato-codice { border: 2px solid var(--ok); background: var(--ok-chiaro); }
.lato-codice h4 { color: var(--ok); }
.lato-modello { border: 2px dashed var(--critico); background: var(--critico-chiaro); }
.lato-modello h4 { color: var(--critico); }

.frecce { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.freccia { font-size: 0.78rem; color: var(--muted); line-height: 1.45; text-align: center; margin: 0; }
.freccia .punta {
  display: block; font-size: 1.35rem; color: var(--accent);
  line-height: 1; margin-bottom: 2px;
}
.freccia-va .punta::before { content: "\2193"; }
.freccia-torna .punta::before { content: "\2191"; }
@media (min-width: 720px) {
  .freccia-va .punta::before { content: "\2192"; }
  .freccia-torna .punta::before { content: "\2190"; }
}

/* I tempi verso gli ospedali -------------------------------------------- */
.tempi { display: grid; gap: 16px; }
.tempo-testa {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
}
.tempo-nome { font-weight: 650; font-size: 0.95rem; }
.tempo-val { font-size: 0.86rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tempo-pista { height: 12px; border-radius: 3px; background: var(--panel-alt); overflow: hidden; }
.tempo-barra { display: block; height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.tempo-volo {
  height: 12px; border-radius: 3px;
  border: 1px dashed var(--border);
  background: repeating-linear-gradient(135deg, var(--border) 0 4px, transparent 4px 9px);
}
.tempo-che { font-size: 0.86rem; color: var(--muted); margin: 7px 0 0; }

/* I voti del debrief ----------------------------------------------------- */
/* Largo quanto serve e non piu': con le tacche a filo del bordo destro e il
   nome a sinistra, su schermo largo l'occhio perde la riga. */
.voti { display: grid; gap: 10px; max-width: 540px; }
.voto { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.voto-nome { font-size: 0.89rem; }
.tacche { display: flex; gap: 3px; align-items: center; }
.tacca { width: 20px; height: 10px; border-radius: 2px; background: var(--panel-alt); border: 1px solid var(--border); }
.tacca.piena { background: var(--accent); border-color: var(--accent); }
.voto-num { font-size: 0.8rem; color: var(--muted); margin-left: 8px; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  .voto { grid-template-columns: 1fr; gap: 4px; }
  .tacca { width: 26px; }
}

/* Come si riempie il registro ------------------------------------------- */
.confronto { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .confronto { grid-template-columns: 1fr 1fr; } }
.caso-scritto {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; background: var(--panel);
  display: flex; flex-direction: column; gap: 12px;
}
.caso-scritto .frase {
  background: var(--accent-chiaro); color: var(--accent-testo);
  border-radius: var(--radius); padding: 10px 13px; font-size: 0.9rem; margin: 0;
}
.caso-scritto .esito { font-size: 0.78rem; color: var(--muted); margin: 0; }
.registro { display: flex; flex-wrap: wrap; gap: 5px; }
.voce-registro {
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--muted); background: var(--panel-alt);
  border: 1px dashed var(--border); border-radius: 4px;
  padding: 3px 7px;
}
.conta { font-weight: 700; font-size: 0.95rem; font-family: var(--font-testo); }
.conta-poco { color: var(--critico); }
.conta-tanto { color: var(--ok); }

/* Chiusura --------------------------------------------------------------- */
.bottone {
  display: inline-block; background: var(--accent); color: #fff;
  text-decoration: none; font-weight: 600; font-size: 0.95rem;
  padding: 11px 22px; border-radius: var(--radius); margin: 4px 8px 4px 0;
}
.bottone:hover { filter: brightness(1.08); }
.bottone-secondario { background: transparent; color: var(--accent); border: 1px solid var(--border); }

.piede {
  margin-top: 68px; padding: 28px 0 44px;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.86rem;
}
.piede p { margin-bottom: 8px; }