/* ====================================================================
   IL QUESTIONARIO DEI BETA TESTER — .qb-*

   Non e' una schermata nuova: e' il modulo di segnalazione allungato, e
   usa il suo vestito (.overlay, .modal, .sg-campo, .sg-gravita,
   .sg-allegato, .sg-azioni). Qui c'e' solo quello che il modulo corto non
   aveva — ventitre domande invece di tre, quindi un corpo che scorre da
   se' e i bottoni che restano fermi in fondo.

   E una sola cosa e' colorata: le domande che pesano. Non e' decorazione
   — sono quelle che dicono DOVE si perde qualcuno, e in una lista lunga
   una domanda che non si distingue e' una domanda saltata. Il colore e'
   quello dell'accento del prodotto, non uno dei tre ranghi: non e' una
   tua decisione, non sei tu, non e' quello che il club ti chiede.

   Una larghezza sola per telefono e computer, perche' un modulo e' una
   colonna a qualunque misura: qui non servono due viste.
   ==================================================================== */

.qb-modal { display: flex; flex-direction: column; max-height: min(90vh, 860px); overflow: hidden; }
/* il corpo scorre, cosi' "Scarica il file" non scappa in fondo a ventitre domande */
.qb-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; }
/* la guida sta DENTRO il corpo che scorre: si legge una volta e poi se ne va.
   Ferma in alto si prendeva un quarto di un telefono per sempre. */
.qb-guida { margin: 0 0 4px; color: var(--text-secondary); font-size: var(--type-nota); line-height: 1.6; }
.qb-guida b { color: var(--text-primary); }

.qb-blocco {
  display: flex; align-items: center; gap: 8px;
  margin: 22px 0 12px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary); font: 700 var(--type-corpo) var(--font-display-ui);
}
.qb-blocco:first-child { margin-top: 0; }
.qb-blocco i { font-style: normal; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.qb-d > label { text-transform: none; letter-spacing: 0; font-size: var(--type-nota); line-height: 1.45; }
/* le domande che pesano: si vedono prima di essere lette */
.qb-chiave { padding-left: 10px; border-left: 2px solid var(--accent-brand); }
.qb-chiave > label { color: var(--text-primary); font-weight: 700; }

/* quattro opzioni lunghe non stanno su una riga: vanno a capo e si tengono
   la loro larghezza, invece di stringersi fino a non leggersi piu' */
.qb-scelte { flex-wrap: wrap; }
.qb-scelte button { flex: 0 1 auto; }
.qb-scala { flex-wrap: wrap; align-items: center; }
.qb-scala button { flex: 0 0 42px; }
/* la legenda sta a fianco quando ci sta, sotto quando non ci sta */
.qb-scala small { flex: 1 1 96px; color: var(--text-muted); font-size: var(--type-etichetta); }

.qb-modal .sg-azioni { padding-top: 14px; border-top: 1px solid var(--border-subtle); }