/* Immershop - tema Etna.
 *
 * Mobile-first non come slogan: le regole base SONO quelle del telefono, e i
 * media query aggiungono spazio quando c'e'. L'ordine inverso - desktop prima,
 * poi si stringe - produce sempre una pagina che sul telefono sembra un
 * ripiego, perche' lo e'.
 *
 * La pietra lavica e' la base, la lava e' l'accento. L'arancio compare dove
 * c'e' un'azione o qualcosa che sta accadendo, mai come decorazione: se
 * illumina tutto non indica piu' niente. Il bagliore e' volutamente sotto la
 * soglia dell'effetto: serve a far sembrare calda una superficie, non a
 * sembrare un videogioco.
 *
 * Contrasto prima della decorazione: il testo sta sopra 7:1 sul fondo, il
 * testo attenuato sopra 4.5:1. Un pannello si guarda al sole, in piedi, con
 * una mano sola.
 */

:root {
  /* Pietra */
  --fondo: #0e0f12;
  --superficie: #17191e;
  --superficie-alta: #1e2128;
  --superficie-premuta: #23262e;
  --bordo: #2a2e37;
  --bordo-tenue: #21242b;

  /* Testo */
  --testo: #ecebe9;
  --testo-tenue: #a3a9b4;
  --testo-debole: #767c88;

  /* Lava */
  --lava: #ff6a1a;
  --lava-cupa: #d93d12;
  --brace: #ffb057;
  --lava-velo: rgba(255, 106, 26, 0.13);
  --lava-bordo: rgba(255, 106, 26, 0.34);

  /* Stati */
  --ok: #3fb27f;
  --ok-velo: rgba(63, 178, 127, 0.13);
  --allarme: #ffc44d;
  --allarme-velo: rgba(255, 196, 77, 0.13);
  --critico: #ff5f56;
  --critico-velo: rgba(255, 95, 86, 0.13);

  --raggio: 14px;
  --raggio-piccolo: 9px;
  --barra-bassa: 58px;
  --ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Lo spazio in fondo lascia respirare l'ultima scheda sopra la barra di
     navigazione, notch compreso. */
  padding-bottom: calc(var(--barra-bassa) + env(safe-area-inset-bottom, 0px) + 12px);
  overflow-x: hidden;
}

a { color: var(--brace); text-decoration: none; }

/* ---------- intestazione ---------- */

.testata {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: rgba(14, 15, 18, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--bordo-tenue);
}

.testata h1 { font-size: 17px; font-weight: 650; margin: 0; letter-spacing: -.01em; }
.testata .sotto { font-size: 12px; color: var(--testo-debole); margin: 0; }
.testata .spinta { margin-left: auto; }

.marchio {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(150deg, var(--lava) 0%, var(--lava-cupa) 70%);
  box-shadow: 0 0 14px rgba(255, 106, 26, .32);
  position: relative;
}
.marchio::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .5), transparent 55%);
  border-radius: inherit;
}

main { padding: 14px 14px 8px; max-width: 1100px; margin: 0 auto; }

/* ---------- schede ---------- */

.scheda {
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio);
  padding: 14px;
  margin-bottom: 12px;
}

.scheda > h2 {
  font-size: 13px; font-weight: 620; text-transform: uppercase;
  letter-spacing: .06em; color: var(--testo-debole);
  margin: 0 0 10px;
}

.titolo-sezione {
  font-size: 13px; font-weight: 620; text-transform: uppercase;
  letter-spacing: .06em; color: var(--testo-debole);
  margin: 20px 2px 8px;
}

/* ---------- griglia di numeri ---------- */

.numeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 620px) { .numeri { grid-template-columns: repeat(4, 1fr); } }

.numero {
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio);
  padding: 12px 13px;
  min-height: 78px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.numero .valore { font-size: 25px; font-weight: 660; letter-spacing: -.02em; line-height: 1.1; }
.numero .etichetta { font-size: 11.5px; color: var(--testo-debole); margin-top: 5px; }
.numero.acceso { border-color: var(--lava-bordo); background: linear-gradient(160deg, var(--lava-velo), transparent 62%); }
.numero.acceso .valore { color: var(--brace); }
.numero .valore.assente { font-size: 16px; color: var(--testo-debole); font-weight: 500; }

/* ---------- pastiglie di stato ---------- */

.pastiglia {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 560; padding: 3px 9px;
  border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.pastiglia .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pastiglia.ok { color: var(--ok); background: var(--ok-velo); border-color: rgba(63,178,127,.28); }
.pastiglia.allarme { color: var(--allarme); background: var(--allarme-velo); border-color: rgba(255,196,77,.28); }
.pastiglia.critico { color: var(--critico); background: var(--critico-velo); border-color: rgba(255,95,86,.3); }
.pastiglia.neutra { color: var(--testo-tenue); background: var(--superficie-alta); border-color: var(--bordo); }
.pastiglia.lava { color: var(--brace); background: var(--lava-velo); border-color: var(--lava-bordo); }

/* ---------- richiede attenzione ---------- */

.attenzione { display: flex; flex-direction: column; gap: 9px; }

.avviso {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 13px; border-radius: var(--raggio);
  border: 1px solid var(--bordo); background: var(--superficie);
  color: inherit;
}
.avviso.critico { border-color: rgba(255,95,86,.38); background: linear-gradient(160deg, var(--critico-velo), transparent 68%); }
.avviso.attenzione { border-color: rgba(255,196,77,.32); background: linear-gradient(160deg, var(--allarme-velo), transparent 68%); }
.avviso .segno { font-size: 17px; line-height: 1.2; flex: none; }
.avviso > span:last-child { display: block; min-width: 0; }
.avviso .titolo { display: block; font-weight: 600; font-size: 14.5px; }
.avviso .dettaglio { display: block; font-size: 12.5px; color: var(--testo-tenue);
  margin-top: 3px; line-height: 1.4; }

.tutto-bene {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border-radius: var(--raggio);
  border: 1px solid rgba(63,178,127,.26); background: var(--ok-velo);
  font-size: 14px; color: var(--ok);
}

/* ---------- progresso: la lava che scorre ---------- */

.lavoro {
  background: var(--superficie);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio);
  padding: 13px; margin-bottom: 10px;
}
.lavoro .intestazione { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.lavoro .nome { font-weight: 600; font-size: 14.5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lavoro .quota { font-variant-numeric: tabular-nums; font-weight: 660; color: var(--brace); font-size: 15px; }

.condotto {
  height: 9px; border-radius: 999px; overflow: hidden;
  background: var(--superficie-premuta);
  border: 1px solid var(--bordo-tenue);
  position: relative;
}

.magma {
  height: 100%; border-radius: inherit; position: relative;
  background: linear-gradient(90deg, var(--lava-cupa), var(--lava) 45%, var(--brace));
  background-size: 220% 100%;
  box-shadow: 0 0 11px rgba(255, 106, 26, .45);
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
  animation: scorrimento-lava 2.6s linear infinite;
}

@keyframes scorrimento-lava {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}

/* Fase senza percentuale: non si finge un avanzamento, si mostra che sta
   accadendo qualcosa. Una striscia che va e viene dice "in corso" senza
   affermare "a meta'". */
.condotto.indeterminato .magma {
  width: 38% !important;
  animation: va-e-vieni 1.7s ease-in-out infinite, scorrimento-lava 2.6s linear infinite;
}
@keyframes va-e-vieni {
  0%   { transform: translateX(-105%); }
  100% { transform: translateX(268%); }
}

.fasi { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }

.fase {
  font-size: 11px; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--bordo); color: var(--testo-debole);
  background: var(--superficie-alta); white-space: nowrap;
}
.fase.fatta { color: var(--ok); border-color: rgba(63,178,127,.3); background: var(--ok-velo); }
.fase.attiva {
  color: #fff; border-color: transparent;
  background: linear-gradient(120deg, var(--lava-cupa), var(--lava));
  animation: pulsazione-lava 2s ease-in-out infinite;
}
.fase.rotta { color: var(--critico); border-color: rgba(255,95,86,.34); background: var(--critico-velo); }

@keyframes pulsazione-lava {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 106, 26, .48); }
  55%      { box-shadow: 0 0 14px 3px rgba(255, 106, 26, .16); }
}

/* Eruzione: quando una fase si chiude, un piccolo scoppio. Dura poco e non
   sposta nulla nel flusso della pagina - un'animazione che fa saltare il
   testo mentre lo si legge e' peggio di nessuna animazione. */
.eruzione { position: relative; }
.eruzione::after {
  content: ""; position: absolute; inset: -3px; border-radius: 999px;
  border: 2px solid var(--brace); opacity: 0; pointer-events: none;
  animation: scoppio .62s ease-out;
}
@keyframes scoppio {
  0%   { opacity: .85; transform: scale(.82); }
  100% { opacity: 0;   transform: scale(1.5); }
}

.riga-tempi {
  display: flex; gap: 14px; margin-top: 9px;
  font-size: 12px; color: var(--testo-debole);
  font-variant-numeric: tabular-nums;
}

/* ---------- video ---------- */

.griglia-video { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .griglia-video { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .griglia-video { grid-template-columns: repeat(4, 1fr); } }

.carta-video {
  background: var(--superficie); border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio); overflow: hidden; display: block; color: inherit;
}
.carta-video:active { background: var(--superficie-premuta); }

.anteprima {
  aspect-ratio: 9 / 16; background: #0a0b0d; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.anteprima video { width: 100%; height: 100%; object-fit: cover; display: block; }
.anteprima .senza-file {
  color: var(--testo-debole); font-size: 11.5px; text-align: center; padding: 10px;
}
.anteprima .durata {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(0,0,0,.72); color: #fff; font-size: 10.5px;
  padding: 2px 6px; border-radius: 5px; font-variant-numeric: tabular-nums;
}
.corpo-carta { padding: 9px 10px 11px; }
.corpo-carta .titolo {
  font-size: 13px; font-weight: 570; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.corpo-carta .meta { font-size: 11px; color: var(--testo-debole); margin-top: 5px; }
.piattaforme { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 7px; }
.piattaforma {
  font-size: 10px; padding: 2px 6px; border-radius: 5px;
  background: var(--superficie-alta); border: 1px solid var(--bordo);
  color: var(--testo-tenue);
}
.piattaforma.pubblicato { color: var(--ok); border-color: rgba(63,178,127,.3); background: var(--ok-velo); }
.piattaforma.errore { color: var(--critico); border-color: rgba(255,95,86,.3); background: var(--critico-velo); }

/* ---------- dettaglio video ---------- */

.lettore {
  width: 100%; border-radius: var(--raggio); background: #000;
  aspect-ratio: 9 / 16; max-height: 62vh; display: block; margin: 0 auto;
}
@media (min-width: 700px) { .lettore { max-height: 70vh; } }

.coppie { display: grid; gap: 0; }
.coppia {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--bordo-tenue);
  font-size: 13.5px;
}
.coppia:last-child { border-bottom: 0; }
.coppia .chiave { color: var(--testo-debole); flex: none; }
.coppia .valore { text-align: right; word-break: break-word; font-variant-numeric: tabular-nums; }
.coppia .valore.assente { color: var(--testo-debole); font-style: italic; }

/* ---------- metriche social ----------
 * Righe di icone e numeri, non tabelle. Su un telefono una tabella con
 * intestazioni o si stringe fino a diventare illeggibile o scorre in
 * orizzontale, e in entrambi i casi si smette di guardarla. */

.metriche { display: flex; flex-wrap: wrap; gap: 8px; }

.metrica {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 7px 11px; border-radius: var(--raggio-piccolo);
  background: var(--superficie-alta); border: 1px solid var(--bordo);
  font-variant-numeric: tabular-nums;
}
.metrica .icona { font-size: 13px; line-height: 1; }
.metrica .cifra { font-size: 16px; font-weight: 640; letter-spacing: -.01em; }

/* La variazione dall'ultima rilevazione. Esiste solo fra due misure
 * riuscite: da un'assenza a un numero non e' una crescita. */
.scarto { font-size: 11px; font-weight: 600; }
.scarto.su { color: var(--ok); }
.scarto.giu { color: var(--testo-debole); }

.classifica { display: flex; flex-direction: column; gap: 8px; }
.classifica .posto {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: var(--raggio);
  background: var(--superficie); border: 1px solid var(--bordo-tenue);
  color: inherit;
}
.classifica .numero-posto {
  width: 22px; height: 22px; flex: none; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 660;
  background: var(--superficie-alta); color: var(--testo-debole);
}
.classifica .posto:first-child .numero-posto {
  background: linear-gradient(140deg, var(--lava), var(--lava-cupa)); color: #fff;
}
/* I figli sono span: senza display esplicito restano in linea e il titolo si
 * attacca alla riga sotto. E' lo stesso difetto che avevano gli avvisi. */
.classifica .contenuto { flex: 1; min-width: 0; display: flex;
  flex-direction: column; gap: 2px; }
.classifica .titolo { display: block; font-size: 13.5px; font-weight: 560;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.classifica .sotto { display: block; font-size: 11.5px; color: var(--testo-debole); }
.classifica .valore-posto {
  font-size: 17px; font-weight: 660; color: var(--brace);
  font-variant-numeric: tabular-nums; flex: none;
}

/* ---------- azioni ---------- */

.azioni { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 12px; }
@media (min-width: 560px) { .azioni { grid-template-columns: repeat(3, 1fr); } }

.bottone {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 11px 14px; border-radius: var(--raggio-piccolo);
  border: 1px solid var(--bordo); background: var(--superficie-alta);
  color: var(--testo); font: inherit; font-size: 14px; font-weight: 560;
  cursor: pointer; text-align: center; width: 100%;
}
.bottone:active { background: var(--superficie-premuta); }
.bottone.principale {
  background: linear-gradient(140deg, var(--lava), var(--lava-cupa));
  border-color: transparent; color: #fff;
  box-shadow: 0 0 16px rgba(255, 106, 26, .24);
}
.bottone[disabled], .bottone.spento {
  opacity: .42; cursor: not-allowed; background: var(--superficie);
  color: var(--testo-debole); box-shadow: none;
}

.nota-staging {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--raggio-piccolo);
  background: var(--allarme-velo); border: 1px solid rgba(255,196,77,.3);
  color: var(--allarme); font-size: 12.5px; line-height: 1.45;
}

/* ---------- ricerca e filtri ---------- */

.ricerca { display: flex; gap: 8px; margin-bottom: 11px; }
.ricerca input {
  flex: 1; min-width: 0; padding: 11px 13px; font: inherit; font-size: 16px;
  background: var(--superficie); border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo); color: var(--testo);
}
.ricerca input::placeholder { color: var(--testo-debole); }
.ricerca input:focus { outline: 2px solid var(--lava-bordo); outline-offset: -1px; border-color: var(--lava-bordo); }

/* Scorrimento orizzontale solo qui dentro, mai sul corpo della pagina. */
.filtri {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.filtri::-webkit-scrollbar { display: none; }
.filtro {
  flex: none; font-size: 12.5px; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--bordo); background: var(--superficie);
  color: var(--testo-tenue); white-space: nowrap;
}
.filtro.scelto { background: var(--lava-velo); border-color: var(--lava-bordo); color: var(--brace); font-weight: 560; }

/* ---------- elenchi ---------- */

.elenco { display: flex; flex-direction: column; gap: 8px; }

.voce {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 13px; border-radius: var(--raggio);
  background: var(--superficie); border: 1px solid var(--bordo-tenue);
  color: inherit;
}
.voce:active { background: var(--superficie-premuta); }
.voce .contenuto { flex: 1; min-width: 0; }
.voce .titolo { font-size: 14px; font-weight: 560; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.voce .sotto { font-size: 12px; color: var(--testo-debole); margin-top: 3px; }
.voce .freccia { color: var(--testo-debole); flex: none; font-size: 17px; }

.vuoto {
  text-align: center; padding: 34px 18px; color: var(--testo-debole); font-size: 13.5px;
}
.vuoto .grande { font-size: 30px; display: block; margin-bottom: 9px; opacity: .5; }

/* Un dato che non si e' potuto leggere non e' un elenco vuoto, e non deve
   somigliargli. */
.non-noto {
  padding: 13px; border-radius: var(--raggio);
  background: var(--allarme-velo); border: 1px solid rgba(255,196,77,.28);
  color: var(--allarme); font-size: 13px;
}

/* ---------- barra di navigazione bassa ---------- */

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(20, 21, 26, .96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--bordo-tenue);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.barra a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: var(--barra-bassa); color: var(--testo-debole);
  font-size: 10.5px; font-weight: 520; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.barra a .icona { font-size: 18px; line-height: 1; }
.barra a.qui { color: var(--brace); }
.barra a.qui::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 26px; height: 2px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--lava-cupa), var(--brace));
  box-shadow: 0 0 9px rgba(255, 106, 26, .55);
}

/* ---------- menu secondario ---------- */

.foglio {
  position: fixed; inset: 0; z-index: 40; display: none;
  background: rgba(0, 0, 0, .55);
}
.foglio:target, .foglio.aperto { display: block; }
.foglio .pannello {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--superficie); border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--bordo);
  padding: 8px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  animation: sali .22s ease-out;
}
@keyframes sali { from { transform: translateY(100%); } to { transform: translateY(0); } }
.foglio .maniglia {
  width: 36px; height: 4px; border-radius: 2px; background: var(--bordo);
  margin: 8px auto 14px;
}
.foglio .voce { margin-bottom: 8px; }

/* ---------- tabelle che su telefono non sono tabelle ---------- */

.scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scorrevole table { border-collapse: collapse; width: 100%; font-size: 13px; }
.scorrevole th, .scorrevole td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--bordo-tenue);
  white-space: nowrap;
}
.scorrevole th { color: var(--testo-debole); font-weight: 560; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .05em; }

/* ---------- login ---------- */

.accesso {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 22px; gap: 16px;
}
.accesso .marchio { width: 54px; height: 54px; border-radius: 16px; }
.accesso h1 { font-size: 21px; margin: 0; font-weight: 640; }
.accesso form { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 11px; }
.accesso input {
  padding: 14px; font: inherit; font-size: 16px; border-radius: var(--raggio-piccolo);
  background: var(--superficie); border: 1px solid var(--bordo); color: var(--testo);
}
.accesso input:focus { outline: 2px solid var(--lava-bordo); outline-offset: -1px; }
.accesso .errore { color: var(--critico); font-size: 13.5px; text-align: center; }

/* ---------- desktop ---------- */

@media (min-width: 860px) {
  body { padding-bottom: 24px; }
  .barra { display: none; }
  main { padding: 20px 24px; }
  .lato { display: flex; gap: 20px; align-items: flex-start; }
  .lato > nav {
    position: sticky; top: 74px; flex: none; width: 196px;
    display: flex; flex-direction: column; gap: 3px;
  }
  .lato > nav a {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-radius: var(--raggio-piccolo); color: var(--testo-tenue); font-size: 14px;
  }
  .lato > nav a.qui {
    background: var(--lava-velo); color: var(--brace); font-weight: 560;
  }
  .lato > .contenuto { flex: 1; min-width: 0; }
}

@media (max-width: 859px) { .lato > nav { display: none; } }

/* ---------- moto ridotto ----------
 * Non "meno animazioni": nessuna. Chi attiva questa preferenza spesso lo fa
 * per disturbi vestibolari, e un movimento attenuato resta un movimento. La
 * barra continua a mostrare l'avanzamento, semplicemente sta ferma; quella
 * indeterminata diventa una striscia trasparente, che dice "non so quanto"
 * senza muoversi. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .magma { animation: none; box-shadow: none; }
  .condotto.indeterminato .magma {
    width: 100% !important; transform: none;
    background: repeating-linear-gradient(
      110deg, var(--lava-cupa) 0 9px, var(--superficie-premuta) 9px 18px);
    opacity: .65;
  }
  .fase.attiva { animation: none; }
  .eruzione::after { display: none; }
}

/* --- Scheda Sorgenti ---------------------------------------------------
   Tre righe, una per sorgente. Su telefono restano righe: la colonna di
   destra e' il link, e mandarla a capo la separerebbe dall'etichetta a cui
   appartiene. Il target tattile e' l'intera riga da 44 px, non il testo del
   link, perche' 44 px sono la misura sotto la quale un pollice sbaglia. */
.riga-origine {
  color: var(--testo-tenue);
  font-size: 13px;
  margin: 0 0 10px;
}
.sorgente {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  border-top: 1px solid var(--bordo);
}
.sorgente:first-of-type { border-top: none; }
.sorgente .icona { font-size: 17px; line-height: 1; flex: 0 0 auto; }
.sorgente .etichetta {
  flex: 1 1 auto;
  min-width: 0;
  /* Il nome della sorgente si accorcia; il link no. Un link tagliato a
     meta' non si capisce piu' dove porti. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sorgente .apri {
  flex: 0 0 auto;
  color: var(--lava);
  text-decoration: none;
  font-weight: 600;
  padding: 10px 0 10px 12px;
}
.sorgente .apri:hover { text-decoration: underline; }
.sorgente .non-noto { flex: 0 0 auto; font-size: 13px; }

/* --- Nuovo lavoro ------------------------------------------------------
   Pensata per un telefono tenuto con una mano. Tre regole:
   - il campo che si usa sempre sta in cima e si tocca senza mirare;
   - tutto il resto sta dentro un accordion chiuso, cosi' la pagina resta
     corta e AVVIA resta raggiungibile senza scorrere;
   - ogni bersaglio tattile misura almeno 44 px, che e' la soglia sotto la
     quale un pollice sbaglia. */
.nuovo-lavoro { display: flex; flex-direction: column; gap: 14px; }

.campo-grande { display: block; }
.campo-grande[hidden] { display: none; }
.etichetta-campo {
  display: block;
  font-size: 13px;
  color: var(--testo-tenue);
  margin-bottom: 6px;
}
.campo-grande input {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 14px 16px;
  font-size: 16px; /* sotto i 16 px iOS ingrandisce la pagina al focus */
  color: inherit;
  background: var(--superficie-alta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}
.campo-grande input:focus {
  outline: none;
  border-color: var(--lava);
  box-shadow: 0 0 0 3px var(--lava-velo);
}

.riga-preset {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.riga-preset label { color: var(--testo-tenue); font-size: 13px; }
.riga-preset select {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 15px;
  color: inherit;
  background: var(--superficie-alta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-piccolo);
}

.opzioni {
  background: var(--superficie-alta);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
}
.opzioni > summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.opzioni > summary::-webkit-details-marker { display: none; }
.titolo-opzioni { font-weight: 600; }
/* Il riepilogo sta su una riga e si accorcia con i puntini: mandarlo a capo
   farebbe crescere la testata dell'accordion proprio quando e' chiusa. */
.riepilogo {
  font-size: 12px;
  color: var(--testo-tenue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.opzioni[open] > summary { border-bottom: 1px solid var(--bordo); }
.gruppo { padding: 12px 16px; border-top: 1px solid var(--bordo-tenue); }
.gruppo:first-of-type { border-top: none; }
.gruppo h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--testo-tenue);
}
.gruppo .nota {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--testo-tenue);
}

/* Tutta la riga e' il bersaglio, non il pallino: un pallino misura sedici
   pixel, e sedici non bastano. */
.scelta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  cursor: pointer;
}
.scelta input { position: absolute; opacity: 0; width: 0; height: 0; }
.segno {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--bordo);
  border-radius: 50%;
  transition: border-color .15s, background .15s;
}
.segno.quadro { border-radius: 6px; }
.scelta input:checked + .segno {
  border-color: var(--lava);
  background: var(--lava);
  box-shadow: inset 0 0 0 3px var(--superficie-alta);
}
.scelta input:focus-visible + .segno { box-shadow: 0 0 0 3px var(--lava-velo); }

.avvia {
  width: 100%;
  min-height: 56px;
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(180deg, var(--lava), var(--lava-cupa));
  border: 1px solid var(--lava-bordo);
  border-radius: var(--raggio);
  cursor: pointer;
}
.avvia:active { transform: translateY(1px); }

.avviso {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--testo-tenue);
  background: var(--superficie-premuta);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio-piccolo);
}
.avviso.critico { color: var(--critico); border-color: var(--critico); }

.scheda.urgente { border-color: var(--allarme); background: var(--allarme-velo); }
.voce.attenzione { min-height: 56px; }
.azioni-intervento {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.azioni-intervento .bottone { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  .segno { transition: none; }
  .avvia:active { transform: none; }
}

/* Una casella spenta perche' il backend non la onora ancora. Visibile e
   inerte: nasconderla farebbe sembrare che la funzione non esista. */
.scelta.spenta { opacity: .45; cursor: not-allowed; }
.scelta.spenta input { cursor: not-allowed; }