/* Traffic fine check: one column for the phone, light and dark like the phone, the same build as Busta Giusta (cards,
   line icons, soft shadows) with the deep blue of the road signs. Every text keeps a contrast of 4.5:1. */
:root {
  --bg: #f2f4f9;
  --superficie: #ffffff;
  --superficie-2: #f7f8fc;
  --testo: #111a33;
  --testo-2: #3f4a66;
  --tenue: #56607a;
  --bordo: #dfe3ee;
  --bordo-forte: #c5cbdc;
  --marca: #1e3a8a;
  --marca-2: #2a4db3;
  --marca-tenue: #e6ebf8;
  --su-marca: #ffffff;
  --verde: #15803d;
  --giallo: #b45309;
  --rosso: #b91c1c;
  --grigio: #5b6672;
  --errore-testo: #8c1d13;
  --errore-sfondo: #fdecea;
  --ombra-1: 0 1px 2px rgba(17, 26, 51, 0.06), 0 1px 1px rgba(17, 26, 51, 0.04);
  --ombra-2: 0 10px 28px rgba(17, 26, 51, 0.12);
  --raggio: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020;
    --superficie: #131a2e;
    --superficie-2: #0f1526;
    --testo: #e8ecf8;
    --testo-2: #b6bfd6;
    --tenue: #939db8;
    --bordo: #242d47;
    --bordo-forte: #33405f;
    --marca: #9db5ff;
    --marca-2: #bccdff;
    --marca-tenue: #1a2547;
    --su-marca: #0b1530;
    --verde: #4ade80;
    --giallo: #fbbf24;
    --rosso: #f87171;
    --grigio: #a3acbd;
    --errore-testo: #f4b8b0;
    --errore-sfondo: #3a1b17;
    --ombra-1: none;
    --ombra-2: 0 10px 28px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--testo);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sprite { display: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icona { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }

.testata {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px; background: var(--marca); color: var(--su-marca);
}
.marchio { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.lingua { display: flex; align-items: center; gap: 6px; }
.lingua select {
  background: transparent; color: inherit; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 10px;
  padding: 6px 8px; font: inherit; font-size: 15px;
}
@media (prefers-color-scheme: dark) { .lingua select { border-color: rgba(11, 21, 48, 0.4); } }
.lingua option { color: #111a33; }

main { max-width: 560px; margin: 0 auto; padding: 20px 16px max(32px, env(safe-area-inset-bottom)); }
.schermata { display: flex; flex-direction: column; gap: 16px; }
h1 { font-size: 28px; line-height: 1.2; margin: 4px 0 0; }
h2 { font-size: 19px; line-height: 1.3; margin: 0; display: flex; align-items: center; gap: 8px; }
h3 { font-size: 16px; line-height: 1.3; margin: 0; display: flex; align-items: center; gap: 8px; }
p { margin: 0; }
.lead { font-size: 17px; color: var(--testo-2); }
.aiuto { font-size: 14px; color: var(--tenue); display: flex; gap: 8px; align-items: flex-start; }
.aiuto .icona { width: 18px; height: 18px; margin-top: 1px; }

.card { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-1); padding: 16px; }
.consigli ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; color: var(--testo-2); }

.bottone {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 18px;
  border-radius: 14px; border: 1px solid transparent; font: inherit; font-weight: 650; font-size: 17px; cursor: pointer;
  text-align: center; text-decoration: none;
}
.bottone.primario { background: var(--marca); color: var(--su-marca); box-shadow: var(--ombra-2); }
.bottone.primario:disabled { opacity: 0.45; box-shadow: none; cursor: default; }
.bottone.secondario { background: var(--marca-tenue); color: var(--marca); border-color: var(--bordo-forte); }
.bottone.testo { background: none; color: var(--marca); min-height: 44px; }
.bottone.piccolo { min-height: 44px; font-size: 15.5px; padding: 8px 14px; }
.indietro { align-self: flex-start; padding-left: 0; }
.aggiungi input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bottone:focus-visible, .lingua select:focus-visible, textarea:focus-visible, input:focus-visible {
  outline: 3px solid var(--marca-2); outline-offset: 2px;
}

/* The fines on the home screen: each with its pages. */
.multe { display: grid; gap: 12px; }
.multa { display: grid; gap: 10px; }
.multa .intesta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.multa .intesta h3 { color: var(--testo-2); }
.multa .togli { background: none; border: none; color: var(--tenue); font: inherit; font-size: 14px; cursor: pointer; padding: 6px; }
.pagine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pagine:empty { display: none; }
.pagine li { position: relative; background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: 12px; overflow: hidden; }
.pagine img, .pagine .pdf { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pagine .pdf { display: flex; align-items: center; justify-content: center; color: var(--marca); background: var(--marca-tenue); }
.pagine .pdf .icona { width: 40px; height: 40px; }
.pagine .etichetta { display: block; padding: 4px 8px; font-size: 13px; color: var(--tenue); }
.pagine button {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: rgba(17, 26, 51, 0.72); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pagine button .icona { width: 18px; height: 18px; }

.nota { display: grid; gap: 6px; font-weight: 600; }
textarea, .campo input {
  width: 100%; border: 1px solid var(--bordo-forte); border-radius: 12px; padding: 10px 12px; font: inherit; font-weight: 400;
  background: var(--superficie); color: var(--testo);
}
textarea { resize: vertical; }
.errore { background: var(--errore-sfondo); color: var(--errore-testo); border-radius: 12px; padding: 10px 12px; }
.privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--tenue); }

.rotella {
  width: 48px; height: 48px; margin: 24px auto 4px; border-radius: 50%;
  border: 4px solid var(--marca-tenue); border-top-color: var(--marca); animation: gira 1s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rotella { animation-duration: 3s; } }
#attesa h2 { justify-content: center; text-align: center; }
.passi { margin: 0 auto; padding-left: 22px; color: var(--tenue); display: grid; gap: 6px; }
.passi li.fatto { color: var(--testo); }
.passi li.fatto::marker { color: var(--verde); }

/* Questions: on their own screen when the result needs them, inside the result when they are optional. */
.elenco-domande { display: grid; gap: 18px; }
.gruppo-domande { display: grid; gap: 14px; }
.gruppo-domande > h3 { color: var(--testo-2); }
.domanda { display: grid; gap: 10px; }
.domanda .testo { font-weight: 650; font-size: 17px; }
.domanda .aiuto { display: block; }
.domanda .letti { margin: 0; padding-left: 18px; color: var(--testo-2); font-size: 15px; }
.scelte { display: flex; flex-wrap: wrap; gap: 8px; }
.scelte button {
  flex: 1 1 30%; min-height: 48px; border-radius: 12px; border: 1px solid var(--bordo-forte); background: var(--superficie);
  color: var(--testo); font: inherit; font-weight: 600; cursor: pointer;
}
.scelte button[aria-pressed="true"] { background: var(--marca); color: var(--su-marca); border-color: var(--marca); }
.domanda input[type="date"] {
  width: 100%; min-height: 48px; border: 1px solid var(--bordo-forte); border-radius: 12px; padding: 8px 12px; font: inherit;
  background: var(--superficie); color: var(--testo);
}
.link { color: var(--marca); font-weight: 600; }

/* The result: one card per fine. */
.conteggio { font-weight: 650; color: var(--testo-2); }
.verbali { display: grid; gap: 16px; }
.verbale { display: grid; gap: 14px; }
.verbale .intesta { display: flex; gap: 10px; align-items: flex-start; }
.verbale .intesta .icona { width: 26px; height: 26px; color: var(--marca); margin-top: 2px; }
.verbale .intesta .cosa { font-weight: 700; font-size: 17px; }
.verbale .intesta .dove { font-size: 14px; color: var(--tenue); }
.verdetto { display: flex; gap: 10px; align-items: center; padding: 14px 14px; border-radius: 12px; color: #fff; font-size: 19px; font-weight: 700; line-height: 1.3; }
.verdetto .icona { width: 28px; height: 28px; }
/* A traffic light (Luca, 3/11/2026): red when the verbale can be contested, yellow when one can try, green when it
   looks right, grey while it cannot say yet. */
.verdetto.contestabile { background: #b91c1c; }
.verdetto.si_puo_tentare { background: #b45309; }
.verdetto.da_verificare { background: #5b6672; }
.verdetto.regolare { background: #15803d; }
.verdetto.non_controllabile { background: #5b6672; }
.consiglio { font-size: 16.5px; font-weight: 600; }
.voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.voci li { display: flex; gap: 10px; align-items: flex-start; }
.voci li > .icona { margin-top: 2px; }
.voci li.forte > .icona { color: var(--rosso); }
.voci li.discussa > .icona { color: var(--giallo); }
.voci li.info > .icona { color: var(--grigio); }
.voci .titolo { font-weight: 650; }
.voci .forza { font-size: 13px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; }
.voci li.forte .forza { color: var(--rosso); }
.voci li.discussa .forza { color: var(--giallo); }
.voci .dettaglio { font-size: 14.5px; color: var(--testo-2); }
.tabella { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; font-size: 15px; }
.tabella dt { color: var(--testo-2); }
.tabella dd { margin: 0; font-weight: 650; text-align: right; }
.tabella dd .quando { display: block; font-size: 13px; font-weight: 500; color: var(--tenue); }
.tabella dd.scaduto, .tabella dd.scaduto .quando { color: var(--tenue); text-decoration: line-through; }
.sezione { display: grid; gap: 8px; }
.sezione > h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tenue); }
.opzionali { display: grid; gap: 14px; border-top: 1px solid var(--bordo); padding-top: 14px; }
.documenti { display: grid; gap: 8px; }
.scelta-ricorso { font-size: 14px; color: var(--testo-2); display: grid; gap: 4px; margin: 0; padding-left: 18px; }
.non-controllato, .avviso { font-size: 13.5px; color: var(--tenue); }

/* The document: the form for the person's data, then the text and the PDF. */
.modulo { display: grid; gap: 14px; }
.campi { display: grid; gap: 12px; }
.campo { display: grid; gap: 4px; font-weight: 600; font-size: 15px; }
.campo .aiuto { font-weight: 400; display: block; }
.campo.genere .scelte button { flex: 1 1 40%; }
.istruzioni { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; color: var(--testo-2); }
.testo-documento {
  margin: 0; white-space: pre-wrap; word-break: break-word; font: 15px/1.5 "Times New Roman", Times, "Noto Serif", serif; background: var(--superficie);
  border: 1px solid var(--bordo); border-radius: 12px; padding: 14px; max-height: 60vh; overflow: auto;
}
.pronto { display: grid; gap: 14px; }

/* Block 3, as in Busta Giusta: the notices, the documents to open with a code or a payment, the private link, the
   checks of this phone and the legal links. */
.avviso-info { background: var(--marca-tenue); color: var(--marca); border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.sblocco { border: 2px solid var(--marca); box-shadow: var(--ombra-2); display: grid; gap: 10px; }
.testa-sblocco { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prezzo { flex: none; color: var(--marca); font-size: 24px; font-weight: 800; line-height: 1.1; white-space: nowrap; }
.sotto { font-size: 15px; color: var(--testo-2); }
.stato { color: var(--marca); font-weight: 600; }
.nota-pagamento { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--tenue); }
.nota-pagamento .icona { width: 18px; height: 18px; }
.sblocco .bottone.testo { justify-self: center; }
.modulo-codice { display: grid; gap: 6px; }
.modulo-codice label { font-weight: 600; font-size: 15px; }
.riga-codice { display: flex; gap: 8px; }
.riga-codice input {
  flex: 1; min-width: 0; min-height: 48px; border: 1px solid var(--bordo-forte); border-radius: 12px; padding: 8px 12px;
  font: inherit; letter-spacing: 0.04em; background: var(--superficie); color: var(--testo);
}
.riga-codice .bottone { min-height: 48px; }
.link-privato { display: grid; gap: 10px; }
.link-privato p { color: var(--testo-2); font-size: 15px; }
.storico { display: grid; gap: 8px; margin-top: 8px; }
.storico ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.storico button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--bordo); border-radius: 14px; color: var(--testo); font: inherit;
}
.storico .testo { flex: 1; display: grid; }
.storico .testo span { font-size: 14px; color: var(--tenue); }
.storico li.v-contestabile > button > .icona:first-child { color: var(--rosso); }
.storico li.v-si_puo_tentare > button > .icona:first-child { color: var(--giallo); }
.storico li.v-regolare > button > .icona:first-child { color: var(--verde); }
.storico li.v-da_verificare > button > .icona:first-child, .storico li.v-non_controllabile > button > .icona:first-child { color: var(--grigio); }
.legale { text-align: center; font-size: 13.5px; color: var(--tenue); }
.legale a { color: var(--marca); }
.legale .link {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 4px; cursor: pointer;
  color: var(--marca); font: inherit; text-decoration: underline;
}
.legale .link .icona { width: 16px; height: 16px; }
.bottone:disabled { cursor: default; }
.riga-codice input:focus-visible, .storico button:focus-visible, .legale .link:focus-visible { outline: 3px solid var(--marca-2); outline-offset: 2px; }