/* diritti.css — la pagina "Scrivi la richiesta" nel sistema Quadro (issue 045,
   DESIGN.md "Foglio della lettera" e "Stepper del percorso"). Solo ciò che
   stile.css e guscio.css non hanno: palette, campi, bottoni e carta restano
   quelli di stile.css, nessun colore scritto a mano. Nessun attributo style
   nell'HTML né nei template: la CSP del portale lo blocca. */

/* ---- Intestazione e scelta della lettera ---------------------------------- */

.intestazione { margin-bottom: 32px; }

/* La scelta è il primo passo e sta nella carta del passo (passi.css): niente
   cornice da fieldset. Il titolo visibile è quello della carta; la legenda c'è
   per i lettori di schermo (.solo-lettori). */
.scelta-lettera { border: 0; margin: 0; padding: 0; min-width: 0; }

.carte-scelta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

/* La carta è la label del radio nativo: tutta la carta si tocca. Il radio resta
   visibile, così lo stato non dipende solo dal colore. */
.scelta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  background: var(--surface);
  border-radius: var(--r-riquadro);
  box-shadow: var(--sh1);
  cursor: pointer;
  transition: transform var(--normale) var(--ease), box-shadow var(--normale) var(--ease);
}
.scelta input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; }
/* La scelta fatta è lo stato attivo: l'anello petrolio, come il passo corrente
   dello stepper. */
.scelta:has(input:checked) { box-shadow: inset 0 0 0 2px var(--p), var(--sh1); }
@media (prefers-reduced-motion: no-preference) {
  .scelta:hover { transform: translateY(-2px); }
}

/* Le colonne (la carta del passo e il vassoio con il foglio) stanno in
   passi.css, dalla issue 057. */

/* ---- Campi ---------------------------------------------------------------- */

.da-analisi {
  display: flex;
  gap: 10px;
  margin: 0 0 20px;
  padding: 12px 14px;
  color: var(--ink);
  background: var(--ok-soft);
  border-radius: var(--r-riquadro);
}
.da-analisi .ic { margin-top: 2px; color: var(--ok); }

.campo { margin-top: 16px; }
.campo:first-child { margin-top: 0; }
.campo label { margin-top: 0; }
/* La riga dell'etichetta: etichetta a sinistra, "Da completare" a destra. Se non
   ci stanno (etichetta lunga, telefono) la nota va a capo, da sola, sotto
   l'etichetta e sopra il campo. */
.campo-testata {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: 12px;
}
/* Da completare: bordo e fondo d'avviso e la nota, finché la lettera mostra il
   segnaposto di questo campo. Specificità sopra a ".carta :is(input, select)"
   di stile.css, che dà il fondo della pagina ai campi dentro una carta. */
.carta .campo-da-completare :is(input, select) {
  background: var(--warn-soft);
  border-color: var(--warn);
}
/* Invisibile, non assente: la nota tiene il suo spazio fin dall'apertura, così
   quando compare nessun campo si sposta (con display: none, o sotto il campo,
   i campi sotto scenderebbero al primo tasto). */
.campo-nota {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--warn);
  visibility: hidden;
}
.campo-da-completare .campo-nota { visibility: visible; }

/* ---- Il vassoio e il foglio ------------------------------------------------ */

.vassoio {
  min-width: 0;
  padding: 16px;
  background: var(--surface2);
  border-radius: var(--r-carta);
}

.barra-foglio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 14px;
}
/* Avviso finché ci sono parti da completare, conferma quando sono zero. */
.conteggio {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  color: var(--warn);
}
.conteggio.fatto { color: var(--ok); }
.conteggio > span:first-child { display: grid; }
.azioni-lettera { display: flex; flex-wrap: wrap; gap: 8px; }

/* Il sollecito non si può ancora mandare: è un avviso, non un errore. */
.blocco-sollecito {
  margin: 0 0 12px;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: var(--r-riquadro);
}
.blocco-sollecito:empty { display: none; }
/* La copia del blocco nel passo delle date sta sotto le date su ogni schermo:
   sul telefono il foglio è nascosto, e sul computer, nel passo 4, scorre ad
   altre parti e il blocco accanto al foglio può finire fuori vista. Non va mai
   nascosta (test/diritti-pagina.test.mjs lo controlla sul sorgente). */
.blocco-passo { margin: 16px 0 0; }

/* Resta nell'albero di accessibilità anche da vuoto (è una regione che si
   annuncia): lo spazio lo prende solo quando ha un testo. */
.esito-copia { margin: 0; font-size: 14px; font-weight: 600; color: var(--ok); }
.esito-copia:not(:empty) { margin-bottom: 12px; }

/* Il foglio (DESIGN.md): carta su ombra elevata, a capo come nel testo. */
.foglio {
  padding: 56px 64px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--paper-ink);
  background: var(--paper);
  border-radius: var(--r-riquadro);
  box-shadow: var(--sh2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Un valore inserito: sottolineato a puntini, nel colore del testo. */
.valore {
  text-decoration: underline dotted;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 4px;
}

/* Un segnaposto: evidenziato e cliccabile, in linea con la frase (va a capo
   con lei: box-decoration-break ripete bordo e angoli a ogni riga). Il filetto
   interno c'è anche senza il colore: si vede pure a chi non distingue i
   verdi. */
.segnaposto {
  padding: 1px 6px;
  color: var(--mark-ink);
  background: var(--mark);
  border-radius: var(--r-chip);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p) 55%, transparent);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: pointer;
}
.segnaposto:hover { box-shadow: inset 0 0 0 2px var(--p); }
/* Un valore del passo corrente (quello con l'anello) si tocca per andare al suo
   campo, come un segnaposto. */
.valore.parte-del-passo { cursor: pointer; }
.segnaposto:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
/* Un segnaposto che è anche del passo corrente tiene il suo filetto interno e
   aggiunge l'anello di passi.css (che da solo lo sostituirebbe). */
.segnaposto.parte-del-passo { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p) 55%, transparent), 0 0 0 2px var(--p); }
.segnaposto.parte-del-passo:hover { box-shadow: inset 0 0 0 2px var(--p), 0 0 0 2px var(--p); }

.vassoio textarea { margin-top: 0; line-height: 1.65; }
.vassoio .btn-t { margin-top: 8px; }
.nota { margin: 8px 0 0; font-size: 14px; color: var(--ink2); }
.nota-modifica { margin: 0 0 12px; }

/* ---- Il percorso dopo l'invio ---------------------------------------------- */

.dopo-invio { margin-top: 72px; }
.dopo-invio > h2 { margin-bottom: 8px; }
.dopo-invio > p { max-width: 64ch; margin-bottom: 28px; color: var(--ink2); }
/* Per il sollecito la riga sta subito sotto il titolo. */
.dopo-invio > h2 + p { margin-top: 0; }

.passi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.passo {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 20px;
  background: var(--surface);
  border-radius: var(--r-carta);
  box-shadow: var(--sh1);
}
/* Il passo corrente porta l'anello petrolio. Un passo che non c'è ancora è una
   carta trasparente con il filetto interno (DESIGN.md), non sbiadita: oggi
   nessun passo lo è, il reclamo c'è dalla issue 040. */
.passo-corrente { box-shadow: inset 0 0 0 2px var(--p), var(--sh1); }
.passo-presto { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* La tessera sta in stile.css (40 px); i passi del percorso la vogliono da
   38 px. */
.passo .tessera {
  width: 38px;
  height: 38px;
}
.passo-presto .tessera { color: var(--ink3); background: var(--surface2); }
.passo-quando {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink3);
}
.passo-corrente .passo-quando { color: var(--p); }
.passo h3 { margin: 0; }
.passo p { margin: 0; font-size: 14px; color: var(--ink2); }

/* ---- Il riquadro "Ricordamelo" (issue 055b) ---------------------------------
   Blocco autonomo, tutte classi .ricordamelo*: chi lo sposta (issue 057) porta
   con sé solo questa sezione. Campi, bottone e .nota sono quelli di stile.css e
   di sopra. */

.ricordamelo { max-width: 560px; margin-top: 48px; }
.ricordamelo h2 { margin-bottom: 8px; }
.ricordamelo-intro { margin: 0; color: var(--ink2); }
.ricordamelo .nota { margin-top: 6px; }
.ricordamelo-azioni { margin-top: 24px; }
/* Resta nell'albero di accessibilità anche da vuoto (è una regione che si
   annuncia): lo spazio lo prende solo quando ha un testo. */
.ricordamelo-esito { margin: 0; font-weight: 600; color: var(--ok); }
.ricordamelo-esito:not(:empty) { margin-top: 12px; }
.ricordamelo-esito.errore { color: var(--danger); }

/* Per i lettori di schermo e basta: il titolo del foglio c'è nella struttura
   della pagina, ma la sezione è già riconoscibile da conteggio e bottoni. */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Larghezze --------------------------------------------------------------
   Sotto i 1100 px le colonne diventano una (passi.css): a 1000 px il foglio
   avrebbe 330 px di testo. Sotto i 1000 le carte della scelta passano a due per
   riga, sotto i 760 (soglia del telefono, DESIGN.md) a una. */

@media (max-width: 999.98px) {
  .carte-scelta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foglio { padding: 40px 44px; }
}

@media (max-width: 759.98px) {
  .intestazione { margin-bottom: 24px; }
  .carte-scelta { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vassoio { padding: 10px; }
  .foglio { padding: 28px 22px; }
  .azioni-lettera { flex-direction: column; width: 100%; }
  .azioni-lettera .btn { width: 100%; }
  .passi { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dopo-invio { margin-top: 48px; }
}