/* passi.css — il percorso a passi (issue 057, decisione 034), comune a lettere e
   reclamo. Solo la struttura del componente passi.js: la carta del passo, il
   foglio accanto, la barra dell'avanzamento, la striscia del telefono. Palette,
   campi e bottoni restano quelli di stile.css; nessun attributo style, la CSP
   del portale lo blocca (le pagine cambiano classi e hidden). */

/* ---- Avanzamento ------------------------------------------------------------ */

/* Un segmento per passo di compilazione; i segmenti li crea passi.js. */
.avanzamento {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  margin-bottom: 24px;
}
.avanzamento span {
  height: 6px;
  border-radius: var(--r-pillola);
  background: var(--line);
}
.avanzamento .fatto { background: var(--p-fill); }
.avanzamento .ora { background: color-mix(in srgb, var(--p-fill) 45%, var(--line)); }
@media (prefers-reduced-motion: no-preference) {
  .avanzamento span { transition: background-color var(--lento) var(--ease); }
}

/* ---- La carta del passo e il foglio accanto -------------------------------------- */

.zona-passi {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
/* Senza foglio (il passo della scelta) o con il foglio intero (l'ultimo) la
   zona è una colonna sola. */
.senza-foglio .zona-passi,
.passo-ultimo .zona-passi { grid-template-columns: minmax(0, 1fr); }

/* scroll-margin-top: lo scorrimento a "nearest" di passi.js non deve lasciare la
   carta sotto la barra del portale. */
.carta-passo { min-width: 0; scroll-margin-top: 92px; }
.carta-passo .kick { margin: 0 0 6px; }
/* Un passo può non avere kicker (il primo del reclamo, che ripeterebbe il titolo). */
.carta-passo .kick:empty { display: none; }
.titolo-passo { margin: 0 0 20px; }
/* Il fuoco arriva qui dall'ultimo passo, che non ha campi: un titolo non è un
   controllo e non vuole l'anello. */
.titolo-passo:focus { outline: none; }

/* Sul computer la carta resta in vista mentre il foglio scorre fino alle parti
   del passo. 92 px: la barra del portale (guscio.css) e il suo respiro. */
.passi-radice:not(.senza-foglio):not(.passo-ultimo) .carta-passo {
  position: sticky;
  top: 92px;
}

.comandi-passo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
/* Senza Indietro (primo passo) Avanti resta a destra. */
.comandi-passo .btn-p { margin-left: auto; }

/* L'ultimo passo: il foglio intero, largo ma non quanto la pagina (righe di
   110 caratteri non si leggono). La carta non ha più campi: diventa una riga,
   con il titolo a sinistra e Indietro a destra. */
.passo-ultimo .vassoio { max-width: 880px; }
.passo-ultimo .carta-passo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: center;
}
.passo-ultimo .titolo-passo { margin: 0; }
.passo-ultimo .comandi-passo {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  padding: 0;
  border-top: 0;
}

/* Le parti del foglio che il passo corrente compila. Tutte, compilate o no: il
   segnaposto ha già il suo fondo, il valore ha la sottolineatura a puntini.
   Gli altri paragrafi non si attenuano (034, punto 2). */
.parte-del-passo {
  border-radius: var(--r-chip);
  box-shadow: 0 0 0 2px var(--p);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---- Striscia e foglio a tutta pagina (schermo stretto) ----------------------------- */

.striscia,
.chiudi-foglio { display: none; }

@media (max-width: 1099.98px) {
  .zona-passi { grid-template-columns: minmax(0, 1fr); }

  /* Il foglio non sta accanto alla domanda: nei passi di compilazione è
     nascosto, e si apre con la striscia. All'ultimo passo è nel flusso. */
  .passi-radice:not(.passo-ultimo) .vassoio:not(.aperto) { display: none; }
  /* Posto per la striscia, che altrimenti coprirebbe Avanti. */
  .passi-radice:not(.passo-ultimo):not(.senza-foglio) .zona-passi { padding-bottom: 88px; }

  .striscia {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    inset: auto 12px 12px;
    z-index: 9;
    min-height: 56px;
    padding: 12px 18px;
    font: inherit;
    font-weight: 600;
    text-align: left;
    color: var(--ink);
    background: var(--paper);
    border: 0;
    border-radius: var(--r-carta);
    box-shadow: var(--sh2);
    cursor: pointer;
  }
  .striscia > span:last-child { color: var(--warn); }
  .striscia.fatto > span:last-child { color: var(--ok); }
  .striscia:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }

  /* Il foglio aperto: tutta la pagina, sopra la barra e la tab bar. */
  .vassoio.aperto {
    position: fixed;
    inset: 0;
    z-index: 20;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 0;
    padding: 12px 12px 24px;
  }
  .vassoio.aperto .chiudi-foglio {
    display: inline-flex;
    margin-bottom: 4px;
  }
}

/* Sopra la tab bar (guscio.css, sotto i 760 px). */
@media (max-width: 759.98px) {
  .striscia { bottom: calc(70px + env(safe-area-inset-bottom) + 8px); }
  .passi-radice:not(.passo-ultimo):not(.senza-foglio) .zona-passi { padding-bottom: 150px; }
}