/* =========================================================
   documenti.css — informativa privacy, informativa cookie,
   condizioni d'uso.

   Tre pagine autonome: si aprono anche senza il resto dell'app,
   funzionano su telefono e su schermo grande, seguono il tema chiaro
   o scuro. I colori arrivano tutti da css/app.css, che queste pagine
   caricano prima di questo foglio; qui non se ne inventa nessuno.

   Il criterio della composizione è uno solo: si deve poter leggere.
   Riga corta (66 caratteri circa), interlinea larga, titoli che si
   distinguono, tabelle che scorrono da sole invece di far scorrere la
   pagina. Un'informativa che nessuno riesce a leggere non informa
   nessuno, e la legge chiede che sia comprensibile, non soltanto
   completa.
   ========================================================= */

body.doc{
  background:var(--bg);
  color:var(--text);
  overscroll-behavior-y:auto;   /* è una pagina lunga: si scorre */
}

/* =========================================================
   Barra in alto
   ========================================================= */
.doc-topbar{
  position:sticky; top:0; z-index:20;
  padding:calc(var(--safe-t) + 12px) max(18px,var(--safe-l)) 12px max(18px,var(--safe-r));
  background:var(--glass);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.doc-topbar-row{
  max-width:44rem; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.doc-brand{
  font-family:var(--font-display); font-size:21px; font-weight:600;
  letter-spacing:-.02em; text-decoration:none; color:var(--text);
}
.doc-brand em{font-style:italic;color:var(--accent)}
.doc-torna{
  font-size:14px; color:var(--text-2); text-decoration:none;
  border:1px solid var(--line); border-radius:11px;
  padding:8px 13px; min-height:36px;
  display:inline-flex; align-items:center; white-space:nowrap;
}
.doc-torna:hover{border-color:var(--line-strong);color:var(--text)}

/* =========================================================
   Corpo
   ========================================================= */
.doc{
  max-width:44rem;
  margin:0 auto;
  padding:26px max(18px,var(--safe-l)) 90px max(18px,var(--safe-r));
  font-size:16.5px;
  line-height:1.65;
}
.doc h1{
  font-family:var(--font-display);
  font-size:30px; line-height:1.2; font-weight:600;
  margin:6px 0 10px;
}
.doc h2{
  font-family:var(--font-display);
  font-size:22px; line-height:1.28; font-weight:600;
  margin:38px 0 12px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.doc h3{
  font-size:17px; font-weight:650;
  margin:26px 0 8px;
}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc li{margin:0 0 8px}
.doc a{color:var(--accent);text-underline-offset:2px}
.doc strong{font-weight:650}
.doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;
  background:var(--card-2); border:1px solid var(--line);
  border-radius:6px; padding:1px 5px;
}

/* Sottotitolo e versione, subito sotto il titolo */
.doc-meta{
  color:var(--text-2); font-size:14px;
  margin:0 0 24px;
  display:flex; flex-wrap:wrap; gap:6px 16px;
}
.doc-meta b{color:var(--text);font-weight:600}

/* =========================================================
   Riquadri
   ========================================================= */
.riquadro{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);
  padding:15px 17px;
  margin:0 0 22px;
  font-size:15.5px;
}
.riquadro p:last-child{margin-bottom:0}
.riquadro h3{margin-top:0}

/* Il riquadro che chiede di non fidarsi ciecamente di questi testi.
   Colore diverso apposta: deve saltare all'occhio di chi pubblica,
   non passare per una nota di servizio. */
.riquadro.avviso{
  border-left-color:var(--gold);
  background:var(--card-2);
}
.riquadro.sintesi{
  border-left-color:var(--accent-2);
}

/* Segnaposto da riempire prima di pubblicare. Deve essere impossibile
   non vederli: se uno di questi arriva in produzione, l'informativa è
   incompleta e non vale niente. */
.dacompilare{
  display:inline;
  background:rgba(201,154,63,.22);
  border:1px dashed var(--gold);
  border-radius:5px;
  padding:1px 6px;
  color:var(--text);
  font-size:.94em;
  font-weight:600;
}

/* =========================================================
   Indice
   ========================================================= */
.doc-indice{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:15px 17px;
  margin:0 0 30px;
}
.doc-indice b{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-2)}
.doc-indice ol{margin:10px 0 0;padding-left:20px;font-size:15.5px}
.doc-indice li{margin:0 0 6px}

/* =========================================================
   Tabelle — scorrono da sole, non trascinano la pagina
   ========================================================= */
.tabella-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:0 0 22px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.doc table{
  border-collapse:collapse;
  width:100%;
  min-width:34rem;
  font-size:14.5px;
}
.doc th,.doc td{
  text-align:left;
  vertical-align:top;
  padding:10px 13px;
  border-bottom:1px solid var(--line);
}
.doc th{
  background:var(--card-2);
  font-weight:650;
  white-space:nowrap;
}
.doc tbody tr:last-child td{border-bottom:0}

/* =========================================================
   Piede
   ========================================================= */
.doc-piede{
  max-width:44rem;
  margin:0 auto;
  padding:26px max(18px,var(--safe-l)) calc(34px + var(--safe-b)) max(18px,var(--safe-r));
  border-top:1px solid var(--line);
  color:var(--text-2);
  font-size:14px;
}
.doc-piede nav{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  margin-bottom:12px;
}
.doc-piede a{color:var(--accent)}
.doc-piede p{margin:0}

@media (min-width: 760px){
  .doc{font-size:17px;padding-top:34px}
  .doc h1{font-size:34px}
}

/* =========================================================
   Tre classi che servono alla guida, e che le altre pagine
   possono usare quando ne hanno bisogno.
   ========================================================= */

/* Il inciso a margine: vero e utile, ma non indispensabile alla
   prima lettura. Più piccolo e più chiaro, così chi ha fretta lo salta
   senza perdersi niente di essenziale. */
.nota-piccola{
  font-size:14px;color:var(--text-3);line-height:1.6;
  border-left:2px solid var(--line-strong);padding-left:12px;margin:0 0 16px;
}

/* Elenco che racconta una sequenza nel tempo: i numeri contano davvero,
   e devono vedersi. */
.doc ol.passi{padding-left:24px}
.doc ol.passi > li{margin-bottom:12px}
.doc ol.passi > li::marker{color:var(--accent);font-weight:700}

/* Un codice, un comando, una parola da ricopiare esattamente. */
.chiave{
  display:inline-block;padding:1px 7px;border-radius:6px;
  background:var(--card-2);border:1px solid var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;color:var(--text);
}

/* Il chiosco a fine riga di tabella: dice cosa significa quel numero
   senza allungare la colonna. */
.nota-inline{color:var(--text-3);font-size:.9em}