/* Pagina «in-arrivo» (/in-arrivo/, /en/coming-soon/): stili propri del gruppo in-arrivo-contatti, con il prefisso .in-arrivo- .
   Vale il contratto di style.css: nessuna risorsa esterna, animazioni e transizioni solo in @media (prefers-reduced-motion: no-preference),
   stati nascosti solo sotto html.js. */

/* ---------- Intro: testo e legenda delle etichette a sinistra, il quadro degli interruttori a destra ---------- */
.in-arrivo-intro .lead { margin-bottom: var(--space-6); }
.in-arrivo-legenda { display: grid; gap: var(--space-3); max-width: 58ch; }
.in-arrivo-legenda li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; color: var(--text-muted); font-size: .9375rem; line-height: 1.5; }
.in-arrivo-legenda .badge { margin-top: 2px; min-width: 7.5em; justify-content: center; }

/* Il quadro degli interruttori (decorativo): una finestra del pannello con lo stato vero di ogni funzione, oggi.
   I colori non sono mai soli: accanto a ogni interruttore c'e' il testo dello stato. */
.in-arrivo-quadro { margin: 0; }
.in-arrivo-pannello { padding: var(--space-4) var(--space-6) var(--space-4); font-size: .875rem; line-height: 1.4; }
.in-arrivo-pannello-titolo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-2); font-weight: 700; font-size: 1rem; color: var(--text); }
.in-arrivo-pannello-titolo span { font-weight: 500; font-size: .8125rem; color: var(--text-muted); }
.in-arrivo-interruttori li { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--space-4); align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.in-arrivo-nome { grid-column: 1; grid-row: 1; font-weight: 600; color: var(--text); }
.in-arrivo-esito { grid-column: 1; grid-row: 2; font-size: .8125rem; color: var(--text-muted); }
.in-arrivo-toggle { grid-column: 2; grid-row: 1 / span 2; position: relative; display: block; width: 46px; height: 28px; border-radius: 999px; background: var(--border); }
.in-arrivo-toggle i { position: absolute; top: 3px; left: 3px; display: block; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(8, 23, 61, .35); }
.in-arrivo-interruttori .acceso .in-arrivo-toggle { background: var(--success); }
.in-arrivo-interruttori .richiesta .in-arrivo-toggle { background: var(--primary); }
.in-arrivo-interruttori .acceso .in-arrivo-toggle i, .in-arrivo-interruttori .richiesta .in-arrivo-toggle i { transform: translateX(18px); }
.in-arrivo-interruttori .acceso .in-arrivo-esito { color: var(--success); font-weight: 600; }
.in-arrivo-interruttori .richiesta .in-arrivo-esito { color: var(--primary); font-weight: 600; }

/* ---------- Schede: una per funzione, con l'etichetta nel titolo, lo stato di oggi e le tre tappe ---------- */
.in-arrivo-schede .card { display: flex; flex-direction: column; }
.in-arrivo-schede h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.in-arrivo-schede .badge { flex: none; }
.card .in-arrivo-oggi { color: var(--text); background: var(--surface-alt); border-radius: var(--radius-s); padding: var(--space-3) var(--space-4); font-size: .9375rem; margin-bottom: var(--space-4); }
.in-arrivo-oggi strong { color: var(--primary); }

/* Le tre tappe (nel codice, provato, acceso): una linea con tre punti; il punto pieno con la spunta e' «fatto», quello mezzo pieno «in parte»,
   quello vuoto «non ancora»; il testo di ogni tappa dice da solo a che punto e'. */
.in-arrivo-tappe { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: auto; padding-top: var(--space-2); font-size: .8125rem; line-height: 1.3; }
.in-arrivo-tappe li { position: relative; padding: 26px var(--space-2) 0 0; color: var(--text-muted); }
.in-arrivo-tappe li::before { content: ""; position: absolute; left: 9px; right: -9px; top: 8px; height: 3px; background: var(--border); }
.in-arrivo-tappe li:last-child::before { display: none; }
.in-arrivo-punto { position: absolute; left: 0; top: 0; display: block; width: 19px; height: 19px; border-radius: 50%; border: 3px solid var(--border); background: var(--surface); }
.in-arrivo-tappe .ok, .in-arrivo-tappe .parz { color: var(--text); font-weight: 600; }
.in-arrivo-tappe .ok::before { background: var(--success); }
.in-arrivo-tappe .ok .in-arrivo-punto { background: var(--success); border-color: var(--success); }
.in-arrivo-tappe .ok .in-arrivo-punto::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid var(--success-soft); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.in-arrivo-tappe .parz::before { background: linear-gradient(90deg, var(--success), var(--border)); }
.in-arrivo-tappe .parz .in-arrivo-punto { border-color: var(--success); background: linear-gradient(90deg, var(--success) 50%, var(--surface) 50%); }
@media (max-width: 419.98px) {
  .in-arrivo-tappe { grid-template-columns: 1fr; gap: var(--space-2); }
  .in-arrivo-tappe li { padding: 0 0 0 28px; min-height: 19px; }
  .in-arrivo-tappe li::before { left: 8px; right: auto; top: 19px; width: 3px; height: 14px; }
  .in-arrivo-tappe li:last-child::before { display: none; }
}

/* ---------- Movimento (solo chi non chiede di ridurlo): gli interruttori si accendono quando il quadro entra in vista ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .in-arrivo-quadro .acceso .in-arrivo-toggle, html.js .in-arrivo-quadro .richiesta .in-arrivo-toggle { animation: in-arrivo-accendi .5s ease .6s both; animation-play-state: paused; }
  html.js .in-arrivo-quadro .acceso .in-arrivo-toggle i, html.js .in-arrivo-quadro .richiesta .in-arrivo-toggle i { animation: in-arrivo-scorri .5s cubic-bezier(.2, .7, .2, 1) .6s both; animation-play-state: paused; }
  html.js .in-arrivo-quadro.vista .in-arrivo-toggle, html.js .in-arrivo-quadro.vista .in-arrivo-toggle i,
  html.js .in-arrivo-quadro.gioca .in-arrivo-toggle, html.js .in-arrivo-quadro.gioca .in-arrivo-toggle i { animation-play-state: running; }
  .in-arrivo-interruttori li:nth-child(2) .in-arrivo-toggle, .in-arrivo-interruttori li:nth-child(2) .in-arrivo-toggle i { animation-delay: .85s; }
  .in-arrivo-interruttori li:nth-child(3) .in-arrivo-toggle, .in-arrivo-interruttori li:nth-child(3) .in-arrivo-toggle i { animation-delay: 1.1s; }
  html.js .in-arrivo-schede > [data-rivela]:nth-child(2n) { transition-delay: .12s; }
  html.js .in-arrivo-schede > [data-rivela]:nth-child(2n + 1) { transition-delay: 0s; }
  .in-arrivo-tappe .ok .in-arrivo-punto::after { animation: in-arrivo-spunta .4s ease both; }
}
@keyframes in-arrivo-scorri { from { transform: translateX(0); } to { transform: translateX(18px); } }
@keyframes in-arrivo-accendi { from { background-color: var(--border); } }
@keyframes in-arrivo-spunta { from { transform: rotate(45deg) scale(.4); } to { transform: rotate(45deg) scale(1); } }