/* Il foglio delle pagine del produttore: «Produttore», «Privacy», «Termini».
   Era scritto TRE volte, identico, dentro le tre pagine (misurato: stesso md5 del blocco <style> in tutte e tre):
   tre copie di una tavolozza divergono al primo riparo, esattamente come divergerebbero due dizionari i18n.
   Qui sta una volta, e le due tavolozze — chiara e scura — si scrivono una accanto all'altra come in `stile.css`:
   chi arriva da una chat scura non deve prendere una pagina bianca in faccia. I valori del tema scuro sono quelli
   di `stile.css`, perché è lo stesso prodotto. */

:root {
  color-scheme: light dark;
  --sfondo: #ffffff;
  --sfondo-2: #f7f6f4;
  --bordo: #8a8783;   /* come stile.css: ≥ 3:1 su sfondo e sfondo-2 (WCAG 1.4.11) */
  --testo: #1c1917;
  --testo-2: #6b655e;
  --accento: #0f766e;
  --ambra: #b45309;
  --raggio: .6rem;
}

[data-tema="scuro"] {
  --sfondo: #16161a;
  --sfondo-2: #1e1e23;
  --bordo: #6e6e77;
  --testo: #edeae5;
  --testo-2: #a09a92;
  --accento: #2dd4bf;
  --ambra: #fbbf24;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
       color: var(--testo); background: var(--sfondo); line-height: 1.55;
       -webkit-text-size-adjust: 100%; }
.tavola { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.barra { max-width: 46rem; margin: 0 auto; padding: .9rem 1rem; display: flex; align-items: center; gap: .6rem;
         border-bottom: 1px solid var(--bordo); }
.barra .marchio { font-weight: 700; margin-right: auto; }
.barra a { color: var(--accento); text-decoration: none; font-size: .85rem; }
.bottone-lingua { background: none; border: 1px solid var(--bordo); border-radius: .35rem; padding: .25rem .6rem;
                  cursor: pointer; color: var(--testo-2); }
.bozza { border: 1px solid var(--ambra); border-left: 4px solid var(--ambra); border-radius: var(--raggio);
         padding: .7rem .9rem; margin: 0 0 1.5rem; background: var(--sfondo-2); font-size: .9rem; }
h1 { font-size: 1.5rem; margin: 1.25rem 0 .25rem; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
.muto { color: var(--testo-2); font-size: .9rem; }
code { background: var(--sfondo-2); border: 1px solid var(--bordo); border-radius: .3rem; padding: 0 .3rem; }
ul { margin: .5rem 0; padding-left: 1.3rem; }
footer { max-width: 46rem; margin: 0 auto; padding: .9rem 1rem 2rem; border-top: 1px solid var(--bordo);
         font-size: .8rem; color: var(--testo-2); }
footer a { color: var(--accento); text-decoration: none; }
[hidden] { display: none !important; }

/* La pagina Guida (Passo 17): un elenco di definizioni per schermata, e i tasti come tasti. Il resto della pagina
   usa la cornice delle altre tre — stessa barra, stessa tavola, stesso piede: è lo stesso prodotto. */
h3 { font-size: .98rem; margin: 1.1rem 0 .3rem; }
#sommario-nav { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: .2rem .9rem .9rem;
                margin: 1.2rem 0; background: var(--sfondo-2); }
#sommario-nav h2 { font-size: .9rem; }
#sommario ul { margin: .2rem 0 0; }
#sommario a { color: var(--accento); text-decoration: none; }
dl.voci { margin: .4rem 0 0; }
dl.voci dt { font-weight: 600; margin-top: .7rem; }
dl.voci dd { margin: .15rem 0 0; color: var(--testo-2); }
dl.voci dd .muto { margin: .25rem 0 0; font-size: .82rem; }
kbd { font: inherit; font-size: .82rem; background: var(--sfondo-2); border: 1px solid var(--bordo);
      border-radius: .3rem; padding: 0 .35rem; color: var(--testo-2); white-space: nowrap; }
#le-schermate section { border-top: 1px solid var(--bordo); padding-top: .2rem; }
/* L'aiuto in linea: la stessa icona «?» e la stessa bolla della chat. Servono qui perché le quattro pagine caricano
   `aiuto.js` (per le sue voci) e il «?» sul pulsante della lingua va disegnato, non lasciato testo sciolto accanto al
   pulsante. `stile.css` non è caricato da queste pagine: la tavolozza è questa, e qui `--sfondo-3` non esiste — lo
   sfondo del «?» è `--sfondo-2`. */
.aiuto-punto {
  position: absolute;
  width: 1rem; height: 1rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; line-height: 1; font-weight: 700;
  color: var(--accento);
  background: var(--sfondo-2);
  border: 1px solid var(--bordo);
  border-radius: 50%;
  pointer-events: none;      /* solo un segno: l'aiuto si apre sull'elemento, non sul punto */
  z-index: 2;
}
#aiuto-bolla {
  position: fixed;
  z-index: 40;
  max-width: 20rem;
  padding: .6rem .75rem;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--sfondo-2);
  color: var(--testo);
  font-size: .82rem;
  line-height: 1.45;
  box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .18);
  pointer-events: none;      /* la bolla non ruba il passaggio del mouse all'elemento sotto */
}
#aiuto-bolla strong { display: block; font-size: .9rem; margin-bottom: .2rem; }
#aiuto-bolla p { margin: 0; color: var(--testo-2); }
#aiuto-bolla .scorciatoia {
  display: block; margin-top: .4rem; font-size: .76rem;
  color: var(--accento); font-variant-numeric: tabular-nums;
}
@media print {
  .barra, #sommario-nav, footer { display: none; }
  body { background: #fff; color: #000; }
}