/* quaderno.css — stili del generatore di quaderno delle password.
   Tenuto fuori da style.css perche' e' quasi tutto CSS di stampa, che
   serve a una pagina sola: caricarlo ovunque sarebbe peso inutile.

   Due mondi separati in questo file:
   1) lo schermo: pannello opzioni + anteprima ridotta
   2) la stampa: solo i fogli, tutto il resto sparisce
*/

/* ---------- schermo ---------- */

.hero-privacy {
  color: var(--secondary);
  font-weight: 600;
}

.qd-layout {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (max-width: 860px) {
  .qd-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

.qd-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  position: sticky;
  top: 90px;
}

@media (max-width: 860px) {
  .qd-panel {
    position: static;
  }
}

.qd-panel-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  margin: 0 0 18px;
}

.qd-field {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
  padding: 18px 0 4px;
}

.qd-field:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Il <legend> per impostazione predefinita si incastra DENTRO il bordo
   del fieldset e lo interrompe: la linea ripartiva attaccata all'ultima
   lettera del titolo, sembrando un errore di impaginazione. Con
   float + larghezza piena il titolo torna a essere una riga normale e
   il bordo superiore resta intero. */
.qd-field legend {
  float: left;
  width: 100%;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0;
  margin-bottom: 10px;
}

/* Il float va chiuso, altrimenti le opzioni salgono accanto al titolo. */
.qd-field::after {
  content: "";
  display: table;
  clear: both;
}

.qd-radio,
.qd-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.45;
}

.qd-radio:hover,
.qd-check:hover {
  background: var(--accent-2);
}

.qd-radio input,
.qd-check input {
  margin-top: 3px;
  accent-color: var(--secondary);
  flex: none;
}

.qd-radio small {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  margin-top: 2px;
}

.qd-text {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  background: var(--bg);
}

.qd-field-nota {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 8px 0 0;
}

.qd-actions {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

/* .button.primary arriva da style.css: qui si aggiunge solo cio' che
   serve perche' sia un <button> a piena larghezza invece di un link. */
.qd-actions .button {
  width: 100%;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
}

.qd-actions-note {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 10px 0 0;
  text-align: center;
}

.qd-preview-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 14px;
}

/* L'anteprima e' il foglio vero rimpicciolito con transform: cosi' non
   esiste una seconda versione del layout da tenere allineata a mano. */
.qd-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  overflow: hidden;
}

.qd-preview .qd-sheet {
  transform-origin: top left;
  box-shadow: 0 6px 24px rgba(18, 59, 70, 0.1);
}

/* ---------- gate email ---------- */

.qd-modal[hidden] {
  display: none;
}

.qd-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.qd-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 59, 70, 0.55);
}

.qd-modal-box {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 32px;
  width: min(460px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(18, 59, 70, 0.28);
}

/* Titoli dell'interfaccia (finestra e pannelli): sono <p> e non <h2>
   perche' non fanno parte della struttura del documento. Gli h2 della
   pagina devono essere i titoli dei contenuti, o la gerarchia che
   leggono i motori di ricerca e i lettori di schermo risulta falsata
   da etichette come "Anteprima" e "Fatto, controlla la posta". */
.qd-modal-titolo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.qd-modal-text {
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 20px;
}

.qd-modal-text span {
  color: var(--text);
  font-weight: 600;
}

.qd-modal-x {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
}

.qd-modal-form input[type="email"] {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  background: var(--bg);
}

.qd-consent {
  margin: 14px -10px;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.45;
}

.qd-modal-form .button {
  width: 100%;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
}

.qd-modal-mittente {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 12px 0 0;
  text-align: center;
}

.qd-modal-alt {
  border-top: 1px solid var(--line);
  margin: 22px 0 0;
  padding-top: 16px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

/* Chi non vuole lasciare l'email deve poter uscire senza sentirsi in
   trappola: un'uscita chiara costa qualche indirizzo ma evita che la
   pagina venga percepita come un tranello (e che lo diventi). */
.qd-link-button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

#qd-modal-step-fatto .button {
  width: 100%;
  border: 0;
  font-size: 1rem;
  cursor: pointer;
}

/* ---------- il foglio (stesso markup a schermo e in stampa) ---------- */

.qd-sheet {
  background: #fff;
  color: #1e2a2e;
  position: relative;
  overflow: hidden;
}

/* Altezza volutamente 1mm sotto il foglio reale (296 invece di 297).
   A misura esatta i browser arrotondano per eccesso e ogni foglio
   sborda sulla pagina successiva: verificato in stampa, uscivano 54
   pagine invece di 27, una su due bianca. */
.qd-sheet.is-a4 {
  width: 210mm;
  height: 296mm;
  padding: 14mm 16mm;
}

.qd-sheet.is-a5 {
  width: 148mm;
  height: 209mm;
  padding: 10mm 12mm;
}

.qd-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 2px solid #1e2a2e;
  padding-bottom: 4mm;
  margin-bottom: 6mm;
}

.qd-letter {
  font-family: var(--font-display), sans-serif;
  font-size: 18mm;
  line-height: 1;
  font-weight: 800;
}

.qd-sheet-brand {
  font-size: 3mm;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5b6b67;
}

/* Linguette: la lettera della pagina e' piena, le altre solo accennate,
   cosi' a quaderno chiuso si vede dove sei (come una rubrica vera). */
.qd-tabs {
  position: absolute;
  top: 14mm;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6mm;
}

.qd-tab {
  width: 6mm;
  height: 5.5mm;
  font-size: 2.6mm;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b9c4c0;
  border: 0.3mm solid #e4e9e7;
  border-right: 0;
  border-radius: 1mm 0 0 1mm;
}

.qd-tab.is-current {
  background: #1e2a2e;
  color: #fff;
  border-color: #1e2a2e;
  font-weight: 700;
}

.qd-cards {
  display: grid;
  gap: 5mm;
}

.qd-card {
  border: 0.4mm solid #1e2a2e;
  border-radius: 2mm;
  padding: 3.5mm 4mm;
}

.qd-row {
  display: flex;
  align-items: baseline;
  gap: 2mm;
  margin-bottom: 3mm;
}

.qd-row:last-child {
  margin-bottom: 0;
}

.qd-row-label {
  font-size: 2.9mm;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5b6b67;
  flex: none;
  width: 24mm;
}

/* 7.5mm non e' un numero estetico: e' l'altezza che fa riempire alle
   schede tutta la pagina invece di mezza (carta sprecata) e che lascia
   spazio per scrivere a mano in stampatello grande, che e' come scrive
   chi ha piu' di sessant'anni. */
.qd-row-line {
  flex: 1;
  border-bottom: 0.3mm dotted #98a5a1;
  height: 7.5mm;
}

.qd-row.is-half .qd-row-line {
  flex: 0 0 34%;
}

.qd-hint {
  font-size: 2.6mm;
  color: #5b6b67;
  font-style: italic;
  margin-left: auto;
}

/* Copertina */
.qd-cover-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.qd-cover-title {
  font-family: var(--font-display), sans-serif;
  font-size: 14mm;
  line-height: 1.1;
  margin: 0 0 4mm;
}

.qd-cover-sub {
  font-size: 4mm;
  color: #5b6b67;
  margin: 0 0 14mm;
}

.qd-cover-rule {
  border: 0.5mm solid #1e2a2e;
  border-radius: 3mm;
  padding: 8mm;
  text-align: left;
}

.qd-cover-rule h2 {
  font-family: var(--font-display), sans-serif;
  font-size: 6mm;
  margin: 0 0 3mm;
}

.qd-cover-rule p {
  font-size: 3.4mm;
  line-height: 1.5;
  color: #5b6b67;
  margin: 0 0 6mm;
}

.qd-cover-line {
  display: block;
  border-bottom: 0.3mm dotted #98a5a1;
  height: 10mm;
  margin-bottom: 6mm;
}

.qd-cover-warn {
  margin-top: 12mm;
  font-size: 3.2mm;
  color: #5b6b67;
  line-height: 1.5;
}

/* ---------- stampa ---------- */
/* Il quaderno NON si stampa piu' dal browser: si ottiene solo dal link
   via email, che serve il PDF generato dal server. Qui resta solo la
   regola che impedisce di stampare per sbaglio l'interfaccia se
   qualcuno preme Ctrl+P sulla pagina. */

@media print {
  .qd-panel,
  .qd-modal,
  .site-header,
  .site-footer {
    display: none !important;
  }
}