/*
 * LE PAGINE LEGALI E I CONTATTI (giro «il cerchio burocratico», 24 ottobre 2026), su /terms, /privacy, /cookies,
 * /contact: sopra landing.css, che da' il carattere, i colori, la barra, i bottoni, la lingua, il piede e l'avviso in
 * basso. Qui il corpo: un testo da leggere, con le righe lunghe al piu' una settantina di caratteri, i titoli, il
 * riquadro «In breve»; e il modulo dei contatti. Niente in linea (la CSP del gioco); niente che si muova.
 */

.pagina-legale {
  min-height: 72svh;
  padding-block: calc(104px + env(safe-area-inset-top, 0px)) clamp(56px, 8vw, 112px);
  background: radial-gradient(110% 60% at 75% 0%, var(--grotta), var(--notte) 70%);
}
.documento { max-width: 760px; }
.documento h1 { font-size: var(--t-titolo); font-stretch: 118%; letter-spacing: -.015em; }
.documento .versione { margin-top: 10px; color: var(--tenue); font-size: var(--t-piccolo); }
.documento .intro { margin-top: 18px; color: #d4cbe4; max-width: 62ch; }
.documento section { margin-top: 38px; }
.documento h2 { font-size: var(--t-medio); font-stretch: 105%; margin-bottom: 12px; }
.documento h3 { font-size: 1.0625rem; margin: 22px 0 6px; color: var(--oro-chiaro); }
.documento p, .documento li, .documento dd { color: #d4cbe4; max-width: 68ch; }
.documento p + p { margin-top: 12px; }
.documento ul { margin: 12px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.documento ul + p { margin-top: 12px; }
.documento a { color: var(--oro-chiaro); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.documento a:hover { color: var(--oro); }
.documento .altri { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--linea); color: var(--tenue); }

/* «In breve»: il riquadro in cima */
.in-breve { margin-top: 28px; padding: 20px 22px; border-radius: 18px; border: 1px solid var(--linea); background: rgba(21, 12, 35, .6); }
.in-breve h2 { font-size: 1.0625rem; margin-bottom: 4px; color: var(--oro-chiaro); }
.in-breve ul { margin-top: 8px; }

/* i nomi tecnici (i cookie, la memoria, le cache): il nome, e sotto a cosa serve */
.voci-tecniche { margin: 14px 0 0; display: grid; gap: 4px 0; }
.voci-tecniche dt { margin-top: 12px; overflow-wrap: anywhere; }
.voci-tecniche dd { margin: 4px 0 0; }
.documento code, .nomi-tecnici code {
  padding: 1px 6px; border-radius: 6px; border: 1px solid var(--linea); background: rgba(7, 4, 13, .7);
  color: var(--testo); font: 500 .84rem/1.6 ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}
.nomi-tecnici { margin-top: 12px; line-height: 2.1; }

/* un valore del file dei custodi che manca (solo in sviluppo: in produzione il server senza non parte) */
mark.da-scrivere { padding: 0 4px; border-radius: 4px; background: #ffd34d; color: #1b1200; font-weight: 700; }

/* ---------------------------------------------------------------- il modulo dei contatti */
.modulo-contatti { margin-top: 30px; display: grid; gap: 18px; max-width: 640px; }
.modulo-contatti[hidden] { display: none; }
.campo-con-nome { display: grid; gap: 6px; }
.campo-con-nome > span, .campo-con-nome > label { font-weight: 600; }
.campo-con-nome small { color: var(--tenue); font-size: .8125rem; }
.modulo-contatti select, .modulo-contatti textarea, .modulo-contatti input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--linea);
  background: rgba(7, 4, 13, .8); color: var(--testo); font: inherit; font-size: 1rem;
}
.modulo-contatti textarea { resize: vertical; min-height: 160px; line-height: 1.5; }
.modulo-contatti select:focus-visible, .modulo-contatti textarea:focus-visible, .modulo-contatti input:focus-visible {
  outline: 2px solid var(--oro); outline-offset: 2px;
}
/* l'esca per i programmi che riempiono tutto: fuori dallo schermo, non nascosta (alcuni programmi saltano i campi nascosti) */
.modulo-contatti .esca { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.nota-modulo { color: var(--tenue); font-size: var(--t-piccolo); }
.gesti-modulo { display: flex; flex-wrap: wrap; gap: 12px; }
.gesti-modulo .bottone { min-height: 48px; }
.gesti-modulo .bottone:disabled { opacity: .7; cursor: progress; }
.esito { min-height: 1.5em; font-weight: 600; }
.esito.bene { color: #8fe3a8; }
.esito.male { color: #ffb37a; }
.senza-modulo { margin-top: 24px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--linea); background: rgba(21, 12, 35, .6); }
.senza-modulo[hidden] { display: none; }
.altre-strade { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--linea); }
.altre-strade p + p { margin-top: 10px; }