/* =============================================================================
   stile.css — l'aspetto della guida
   =============================================================================
   Qui NON ci sono colori scritti a mano: tutti arrivano dal tema del museo
   (assets/tema.css, generato dalla costruzione). Se qui comparisse un colore
   fisso, sfuggirebbe al controllo del contrasto — ed è proprio il controllo che
   rende impossibile pubblicare una guida illeggibile.

   Le regole che questo foglio rispetta e che non si toccano:
   · misure in rem, mai in pixel fissi: il testo si ingrandisce e tutto lo segue;
   · le parole lunghe vanno a capo invece di spingere la pagina di lato
     (misurato: senza, al 200% di ingrandimento la pagina sbordava di 100 px);
   · il fuoco della tastiera si vede sempre, e non resta mai nascosto sotto
     l'intestazione;
   · niente da toccare più piccolo di 44 px (il minimo di legge è 24);
   · chi ha chiesto al telefono di ridurre le animazioni non ne vede nessuna.
   ========================================================================== */

* { box-sizing: border-box; }

/* Quello che è nascosto deve sparire DAVVERO.
   Senza questa riga, un elemento con un «display» suo (per esempio il pulsante
   d'avvio, che è flex) resta visibile anche quando il programma lo nasconde:
   il visitatore si troverebbe due comandi sovrapposti. Trovato dalle prove il
   29/07/2026, non a occhio. */
[hidden] { display: none !important; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* Il fuoco non deve finire sotto l'intestazione quando si arriva da tastiera. */
  scroll-padding-top: 4.5rem;
}

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--carattere);
  font-size: var(--dimensione-base);
  line-height: 1.6;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ------------------------------------------------------ salto al contenuto */

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accento);
  color: var(--testo-su-accento);
  padding: 0.85rem 1.1rem;
  font-weight: 700;
  z-index: 100;
}
.salta:focus { left: 0; }

/* ---------------------------------------------------------------- testata */

.testata {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--bordo);
  background: var(--sfondo-tenue);
}
.testata-nome {
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
  color: var(--accento);
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.testata-nome:hover { text-decoration: underline; }

/* --------------------------------------------------------------- impianto */

.contenuto {
  /* Una riga troppo lunga si perde: 38rem sono circa 70 caratteri, la
     larghezza in cui si legge meglio. */
  max-width: 38rem;
  margin: 0 auto;
  padding: 1.5rem 1.1rem 3rem;
}

/* ------------------------------------------------------------- tipografia */

/* I titoli non si sillabano: «2. La sala e il suo raccon-to» si legge male e
   confonde chi ha difficoltà di lettura. Le parole lunghissime vanno comunque
   a capo intere, senza spingere la pagina di lato. */
h1, h2, h3, h4 { hyphens: none; }

h1 {
  font-size: 1.8rem;
  line-height: 1.2;
  margin: 0.3rem 0 1.1rem;
  color: var(--accento);
  letter-spacing: -0.01em;
}
h2 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 2.2rem 0 0.7rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--bordo);
}
h3 { font-size: 1.1rem; line-height: 1.35; margin: 1.4rem 0 0.4rem; }
h4 { font-size: 1rem; margin: 1.1rem 0 0.3rem; }

p { margin: 0 0 1rem; }

a { color: var(--collegamento); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--collegamento);
  outline-offset: 3px;
  border-radius: 3px;
}

ul, ol { padding-left: 1.5rem; margin: 0 0 1.1rem; }
li { margin-bottom: 0.5rem; }

/* ------------------------------------------------------ cose da toccare */

/* Il minimo di legge è 24 px: qui stiamo al doppio, perché una guida da museo
   si usa in piedi, spesso con una mano sola e con la borsa nell'altra. */
nav a, .bottone-grande, .briciole a {
  display: inline-block;
  min-height: 44px;
  padding: 0.6rem 0.15rem;
  line-height: 1.5;
  /* Senza questo limite il riquadro prende la larghezza che vorrebbe il testo
     e spinge la pagina di lato invece di andare a capo. Misurato: un link di
     navigazione sbordava di 5px a 320px con il testo al 200%. */
  max-width: 100%;
}

.bottone-grande {
  background: var(--accento);
  color: var(--testo-su-accento);
  text-decoration: none;
  padding: 1.05rem 0.8rem;
  border-radius: 0.5rem;
  font-weight: 700;
  width: 100%;
  max-width: 100%;
  text-align: center;
}
.bottone-grande:hover { text-decoration: underline; }

.inizia { margin: 1.4rem 0 2rem; }

/* ------------------------------------------------- il pulsante d'avvio */

/* Grande mezzo schermo, e non per estetica: chi non vede non può centrare un
   bersaglio piccolo. Tocca a caso e deve partire.
   I colori sono quelli del pulsante principale, gli unici due che il controllo
   del contrasto misura come coppia: nessun colore nuovo entra da qui. */
.avvio {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 40vh;
  margin: 1.4rem 0;
  padding: 1.6rem 1rem;
  border: none;
  border-radius: 0.8rem;
  background: var(--accento);
  color: var(--testo-su-accento);
  font-family: inherit;
  cursor: pointer;
  text-align: center;
}
.avvio-azione {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}
.avvio-dettaglio {
  font-size: 1rem;
  line-height: 1.4;
}

/* La palestra dei comandi, nella pagina «Come si usa»: qui il pulsante non deve
   prendersi mezzo schermo come quello di avvio di una tappa, perché sta dentro
   una pagina che si legge. Resta però grande abbastanza da premerlo senza
   guardare. */
.avvio-piccolo {
  min-height: 0;
  padding: 1.1rem 1rem;
}
.avvio-testo {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}
.avvio-sotto {
  font-size: 0.95rem;
  line-height: 1.4;
}
.prova-esito {
  margin: 0.8rem 0;
  padding: 0.9rem 1rem;
  border: 2px solid var(--accento);
  border-radius: 0.6rem;
  background: var(--sfondo-tenue);
  font-size: 1.25rem;
  font-weight: 700;
}
.prova-storia {
  margin: 0 0 1.4rem;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  color: var(--testo-tenue);
}
.prova-storia li {
  margin: 0.2rem 0;
}

.senza-voce {
  background: var(--sfondo-tenue);
  border: 2px dashed var(--bordo);
  border-radius: 0.6rem;
  padding: 1.1rem 1rem;
  margin: 1.4rem 0;
}

/* ---------------------------------------------------------- il lettore */

.lettore {
  background: var(--sfondo-tenue);
  border: 2px solid var(--accento);
  border-radius: 0.8rem;
  padding: 1.1rem 1rem 1.3rem;
  margin: 1.4rem 0 2rem;
}
.lettore-posizione { margin: 0 0 0.2rem; color: var(--testo-tenue); font-size: 0.95rem; }
.lettore-titolo { font-size: 1.25rem; margin: 0 0 0.8rem; border: none; padding: 0; }
.lettore-tempo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
  color: var(--testo-tenue);
}
.lettore.finito { border-style: dashed; }

/* La barra si guarda, non si trascina: trascinare è difficile con i tremori e
   quasi impossibile con lo screen reader acceso. Per spostarsi ci sono i tre
   comandi qui sotto, che funzionano anche a occhi chiusi. */
progress#avanzamento {
  flex: 1 1 auto;
  min-width: 0;
  height: 0.8rem;
  border: 1px solid var(--bordo);
  border-radius: 0.4rem;
  background: var(--sfondo);
  appearance: none;
  -webkit-appearance: none;
}
progress#avanzamento::-webkit-progress-bar { background: var(--sfondo); border-radius: 0.4rem; }
progress#avanzamento::-webkit-progress-value { background: var(--accento); border-radius: 0.4rem; }
progress#avanzamento::-moz-progress-bar { background: var(--accento); border-radius: 0.4rem; }

/* I tre comandi hanno sempre la stessa dimensione e lo stesso posto: chi non
   vede li ritrova con il dito senza doverli cercare ogni volta.
   Stanno in fila finché ci stanno; quando il testo è molto ingrandito si
   dispongono uno sotto l'altro invece di spingere la pagina di lato (misurato:
   con tre colonne fisse, al 200% su un telefono stretto sbordavano di 170 px). */
.comandi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.comando {
  /* 4,5rem è la misura che fa stare i tre comandi in fila anche sul telefono
     più stretto in commercio (320 px): sotto questa soglia andrebbero a capo
     già a testo normale. */
  flex: 1 1 4.5rem;
  min-width: 0;
  min-height: 4rem;
  padding: 0.8rem 0.3rem;
  border: none;
  border-radius: 0.6rem;
  background: var(--accento);
  color: var(--testo-su-accento);
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.velocita {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--accento);
  border-radius: 0.6rem;
  background: transparent;
  color: var(--testo);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}

/* Il pulsante «Ascolta questo racconto», dentro l'elenco dei testi. */
.ascolta {
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--accento);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--testo);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  max-width: 100%;
}
.racconto-durata { color: var(--testo-tenue); }
.senza-voce-riga { color: var(--testo-tenue); font-style: italic; }
.racconto.in-ascolto { border-left-color: var(--accento); border-left-width: 5px; }

/* Frasi che servono solo a chi ascolta lo schermo: non si vedono, ma esistono
   davvero (nasconderle con display:none le renderebbe mute anche per lui). */
/* Il video in lingua dei segni: largo quanto la colonna, mai più alto dello
   schermo, su fondo scuro perché i video del museo sono verticali e le bande
   laterali non devono abbagliare. I comandi sono quelli nativi del telefono. */
.video video {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 75vh;
  background: #000;
  border-radius: 0.5rem;
}
.trascrizione {
  margin-top: 0.75rem;
}
.trascrizione summary {
  cursor: pointer;
  padding: 0.5rem 0;
  min-height: 24px;
  font-weight: 700;
  color: var(--collegamento);
}

.solo-a-voce {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------ registro di diagnostica */

/* Compare solo con «?diagnostica» nell'indirizzo. Serve a capire, in sala e
   sul telefono del visitatore, che cosa sta succedendo davvero. */
.diagnostica {
  max-width: 38rem;
  margin: 2rem auto;
  padding: 1rem 1.1rem 1.4rem;
  border: 2px solid var(--accento);
  border-radius: 0.6rem;
  background: var(--sfondo-tenue);
}
.diagnostica h2 { margin-top: 0; font-size: 1.15rem; }
.diagnostica-nota { font-size: 0.92rem; color: var(--testo-tenue); }
.diagnostica-comandi { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.diagnostica-bottone {
  flex: 1 1 10rem;
  min-height: 44px;
  padding: 0.6rem 0.8rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--accento);
  color: var(--testo-su-accento);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.diagnostica-righe {
  list-style: none;
  margin: 0;
  padding: 0.6rem;
  max-height: 22rem;
  overflow: auto;
  background: var(--sfondo);
  border: 1px solid var(--bordo);
  border-radius: 0.4rem;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
}
.diagnostica-righe li { margin: 0; white-space: pre-wrap; word-break: break-word; }
.diagnostica-righe li.pressione { font-weight: 700; color: var(--accento); }
.diagnostica-righe li.vecchia { color: var(--testo-tenue); }
.diagnostica-righe li.separatore { color: var(--accento); font-weight: 700; margin: 0.35rem 0; }
.diagnostica-testo { width: 100%; margin-top: 0.7rem; font-family: inherit; font-size: 0.85rem; }

/* --------------------------------------------------------------- riquadri */

.briciole { font-size: 0.95rem; margin: 0 0 0.2rem; }
.occhiello { color: var(--testo-tenue); margin-bottom: 1.4rem; }

.dove {
  background: var(--sfondo-tenue);
  border-left: 4px solid var(--accento);
  padding: 0.85rem 1rem;
  border-radius: 0 0.4rem 0.4rem 0;
  margin-bottom: 1.2rem;
}

.avviso-provvisorio {
  background: var(--sfondo-tenue);
  border: 1px dashed var(--bordo);
  padding: 0.8rem 1rem;
  border-radius: 0.4rem;
  font-size: 0.97rem;
  color: var(--testo-tenue);
}

.piano, .stanza-piano, .racconto-posizione, .giro-posizione {
  color: var(--testo-tenue);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------- racconti */

.racconti { list-style: none; padding: 0; counter-reset: racconto; }
.racconto {
  counter-increment: racconto;
  margin-bottom: 1.8rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--bordo);
}
.racconto h3 { margin-top: 0; }
.racconto-posizione { margin-bottom: 0.5rem; }
.racconto-comando { margin-bottom: 0.7rem; }

/* ------------------------------------------------------------ navigazione */

.navigazione-giro, .vicine, .stanza { margin-top: 2.2rem; }
.navigazione-giro { padding-top: 1.2rem; border-top: 2px solid var(--bordo); }

.giro-avanti-indietro { list-style: none; padding: 0; }
.giro-avanti-indietro li { margin-bottom: 0.15rem; }
.giro-avanti-indietro .fine { color: var(--testo-tenue); padding: 0.6rem 0; }

.avvertenze li, .collegamenti li { margin-bottom: 0.7rem; }
.stanze { padding-left: 1.5rem; }
.stanza-elenco { margin-bottom: 1.5rem; }
.stanza-elenco h3 { margin-bottom: 0.3rem; }

.da-compilare { color: var(--testo-tenue); font-style: italic; }

/* ------------------------------------------------------------------ piede */

.piede {
  border-top: 1px solid var(--bordo);
  background: var(--sfondo-tenue);
  padding: 1.4rem 1.1rem 2.5rem;
}
.piede ul { list-style: none; padding: 0; margin: 0 auto; max-width: 38rem; }
.piede li { margin-bottom: 0.1rem; }

/* --------------------------------------------------------- schermi grandi */

@media (min-width: 48rem) {
  body { font-size: calc(var(--dimensione-base) + 0.05rem); }
  .contenuto { padding: 2.2rem 1.5rem 4rem; }
  h1 { font-size: 2.1rem; }
  .bottone-grande { width: auto; min-width: 22rem; }
}

/* ------------------------------------------------------- meno animazioni */

@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;
  }
}

/* ------------------------------------------------------------- in stampa */

@media print {
  .salta, .testata, .navigazione-giro, .vicine, .avvio, .lettore { display: none; }
  body { font-size: 11pt; color: #000; background: #fff; }
  a { color: #000; }
}