/* Valutatore YAVENO: foglio di stile del porting (29/09/2026).
   Direzione approvata dal founder il 28-29/09 (prototipo v4, tavolozza C «Più colore»): docs/reviews/valutatore-redesign-20260928/.
   Fondamenta, ingresso in due passi, ricerca, scelta dell'attività, avvisi di servizio, il foglio (attesa e arrivo), la lettura,
   la proposta a lettera, la barra, l'anteprima con accesso via email; le pagine privacy leggono gli stessi token. Nessuna regola del
   vecchio risultato resta. */

/* ---- Caratteri: Mazius per le parole dei titoli, Ronzino per testo e numeri (licenza OFL accanto, in brand/) ---- */
@font-face {
  font-family: "Mazius";
  src: url("./brand/mazius-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Ronzino";
  src: url("./brand/ronzino-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Ronzino";
  src: url("./brand/ronzino-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Ronzino";
  src: url("./brand/ronzino-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --superficie: #FFFFFF;
  --inchiostro: #1C1917;
  --secondario: #57534E;
  --sbiadito: #78716C;
  --bordo: #E7E5E4;
  --azione: #2563EB;
  --azione-sopra: #1D4ED8;
  --tinta: #DBEAFE;
  --colore-penna: #2563EB;
  --verdetto-sfondo: #1C1917;
  --verdetto-segno: #FB923C; /* non più usato: anche la miniatura .stage segue i colori a stato (30/09) */
  --ok: #166534;
  --ok-segno: #15803D;
  --ok-bg: #DCFCE7;
  --grigio: #57534E;
  --grigio-bg: #F5F5F4;
  --raggio: 14px;
  --raggio-scheda: 16px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  font-family: "Ronzino", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--inchiostro);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--tinta); color: var(--inchiostro); }
input, textarea, select { caret-color: var(--azione); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--azione); }

.sr-only,
.sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 60;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--inchiostro);
  color: #fff;
}
.skip:focus { top: 12px; }

/* Titoli: Mazius solo sulle parole; i numeri restano in Ronzino con le cifre allineate. */
h1 {
  margin: 0;
  font-family: "Mazius", Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 8.2vw, 58px);
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}
.hero h1:focus { outline: none; }
#cand-title,
.search-wait h2 {
  margin: 0;
  font-family: "Mazius", Georgia, serif;
  font-weight: 400;
  font-size: clamp(27px, 6.4vw, 36px);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}
#cand-title:focus { outline: none; }

/* ---- Pagina e testata ---- */
.shell {
  width: min(1120px, calc(100% - 64px));
  margin: 0 auto;
  padding: 0 0 56px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 0 6px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  color: var(--inchiostro);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  text-decoration: none;
}
.brand .bmark { width: 1em; height: 1em; flex: none; fill: currentColor; }
.yaveno-wordmark { font-weight: 500; }
.yaveno-dot { margin: 0; }
.topbar-links { display: flex; align-items: center; gap: 18px; }
.header-contact,
.lang-link {
  color: var(--inchiostro);
  font-size: 15px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.demo-tag {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: 5px 12px;
  border: 1px dashed var(--bordo);
  border-radius: 999px;
  color: var(--secondario);
  font-size: 13px;
}

/* ---- Ingresso: titolo, un campo grande alla volta, tratto di penna «1 di 2» ---- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding: 18px 0 6px;
}
.hero > .intro { min-width: 0; max-width: 640px; }
.lead {
  text-wrap: pretty;
  max-width: 58ch;
  margin: 14px 0 0;
  color: var(--secondario);
  font-size: 19px;
  line-height: 1.5;
}
.entry-card { max-width: 560px; margin-top: 22px; }
.passo-riga {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--secondario);
  font-size: 14px;
}
.step-caption { font-variant-numeric: lining-nums tabular-nums; }
.tratto { display: block; width: 150px; height: 10px; overflow: visible; }
.tratto path {
  fill: none;
  stroke: var(--colore-penna);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.tratto.ridisegna path { animation: tratto-scrivi 420ms var(--ease-in-out) both; }
@keyframes tratto-scrivi {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
.entry-card fieldset { min-width: 0; margin: 6px 0 0; padding: 0; border: 0; }
.entry-card fieldset.entra { animation: passo-entra 260ms var(--ease-out) both; }
/* Entra da destra di soli 12 px: dentro il margine della pagina, cosi' a 320 px non nasce nessuno scorrimento laterale. */
@keyframes passo-entra {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
.entry-card label {
  display: block;
  margin: 14px 0 6px;
  font-size: 17px;
  font-weight: 500;
}
.ristorante { margin: 0 0 2px; color: var(--secondario); font-size: 15px; overflow-wrap: anywhere; }
.entry-card input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 12px 16px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 20px;
  transition: border-color 160ms ease-out;
}
.entry-card input::placeholder { color: var(--secondario); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .entry-card input:hover { border-color: var(--azione); }
}
.entry-card input:focus { border-color: var(--azione); }
.entry-card input[aria-invalid="true"] { border-color: var(--azione); box-shadow: inset 0 0 0 1px var(--azione); }
.errore { margin: 6px 0 0; color: #92400E; font-size: 15px; }
.entry-card #to-location { margin-top: 14px; }
.step-nav { display: flex; min-width: 0; align-items: center; gap: 12px; margin-top: 14px; }
.step-nav #entry-submit { flex: 1 1 auto; }
.hint { margin: 4px 0 0; color: var(--secondario); font-size: 14px; text-wrap: pretty; }
.entry-card .hint { max-width: 58ch; margin-top: 14px; }

/* Bottoni: l'azione è blu con testo bianco; il secondario ha il bordo e nient'altro. */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 22px;
  border: 1px solid var(--azione-sopra);
  border-radius: 10px;
  background: var(--azione);
  color: #FFFFFF;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):hover { background: var(--azione-sopra); }
}
button:active { transform: scale(.98); }
button:disabled { opacity: .55; cursor: not-allowed; }
/* Salvataggio in corso (2g): come `disabled` ma il fuoco resta sul bottone. */
button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
button.ghost {
  border-color: var(--bordo);
  background: var(--superficie);
  color: var(--inchiostro);
}
@media (hover: hover) and (pointer: fine) {
  button.ghost:not(:disabled):hover { background: var(--tinta); }
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--azione);
  outline-offset: 2px;
}

/* Colonna a destra da computer (D3): la miniatura statica del foglio, con dati di fantasia dichiarati. */
.stage { display: none; min-width: 0; }
.stage-label { display: block; margin: 0 0 10px; color: var(--secondario); font-size: 13px; }
.stage-caption { margin: 12px 0 0; color: var(--secondario); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.stage .foglio-esempio {
  padding: 14px 16px 4px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-scheda);
  background: var(--superficie);
  font-variant-numeric: lining-nums tabular-nums;
}
.stage .fe-testa {
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bordo);
  color: var(--secondario);
  font-size: 13px;
}
.stage .fe-verdetto {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FBBF24; /* stesso stato «da sistemare» del verdetto vero */
  color: var(--inchiostro);
}
.stage .fe-numero {
  position: relative;
  flex: none;
  display: inline-block;
  min-width: 56px;
  color: var(--inchiostro);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
.stage .fe-cerchio {
  position: absolute;
  inset: -10px -12px;
  width: calc(100% + 24px);
  height: calc(100% + 20px);
  overflow: visible;
  pointer-events: none;
}
.stage .fe-cerchio path {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 3.5;
  stroke-linecap: round;
}
.stage .fe-testo { display: flex; flex-direction: column; gap: 2px; }
.stage .fe-testo strong { font-size: 17px; font-weight: 700; }
.stage .fe-testo span { color: var(--inchiostro); font-size: 14px; font-weight: 500; }
.stage .fe-righe { margin: 0; padding: 0; list-style: none; }
.stage .fe-riga {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px 0;
}
.stage .fe-riga { margin-top: 4px; padding: 11px 10px; border-radius: 10px; }
.stage .fe-riga[data-esito="da"] { background: #FEF3C7; }
.stage .fe-riga[data-esito="ok"] { background: #DCFCE7; }
.stage .fe-riga[data-esito="ok"] .fatto { color: #166534; }
.stage .fe-riga[data-esito="no"] { background: #F5F5F4; }
.stage .fe-riga strong { display: block; font-size: 16px; font-weight: 500; }
.stage .fe-riga .fatto { font-size: 14px; }

/* Segno del foglio: casella a mano con spunta (va bene), punto esclamativo (da sistemare) o trattino (non verificato). */
.casella { width: 28px; height: 28px; flex: none; }
.casella rect { fill: none; stroke: var(--sbiadito); stroke-width: 2; }
.casella .segno { fill: none; stroke: var(--sbiadito); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fatto { display: block; color: var(--secondario); font-size: 15px; }
[data-esito="ok"] rect,
[data-esito="ok"] .segno { stroke: var(--ok-segno); }
[data-esito="ok"] .fatto { color: var(--ok); }
[data-esito="da"] rect,
[data-esito="da"] .segno { stroke: #B45309; }
[data-esito="da"] .fatto { color: #92400E; font-weight: 500; }
[data-esito="sapere"] .fatto { color: #44403C; }
[data-esito="no"] .segno { stroke: var(--sbiadito); }
[data-esito="no"] .fatto { color: #44403C; }

/* Ricerca in corso e foglio dell'attesa: la zona sotto l'ingresso (nessuna card: il foglio ha il suo bordo). */
.progress-card { max-width: 720px; margin-top: 24px; }
.search-wait { display: grid; gap: 14px; }
.search-wait > p { margin: 0; color: var(--secondario); font-size: 15px; max-width: 58ch; }
.foglio-ricerca {
  padding: 6px 18px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-scheda);
  background: var(--superficie);
}
.righe { margin: 0; padding: 0; list-style: none; }
.riga {
  position: relative;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 13px 0;
}
.riga-testo { min-width: 0; }
.riga-testo strong { display: block; font-size: 17px; font-weight: 500; overflow-wrap: anywhere; }
/* La penna sta solo sulla prima riga in attesa (`data-corrente`), va e torna e non dice quanto manca. */
.pennino {
  display: none;
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 0;
  width: 15px;
  height: 21px;
  color: var(--colore-penna);
  pointer-events: none;
}
.riga[data-corrente] .pennino { display: block; animation: pennino-va-e-torna 2400ms var(--ease-in-out) infinite alternate; }
.pennino svg { display: block; width: 100%; height: 100%; }
@keyframes pennino-va-e-torna {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100cqw - 15px)); }
}

/* ---- Il foglio: attesa e arrivo (passo 2). Stesso oggetto dall'attesa alla lettura: titolo, testata, verdetto, quattro righe. ---- */
.foglio-scena { display: grid; gap: 14px; }
.foglio-titolo {
  margin: 0;
  font-family: "Mazius", Georgia, serif;
  font-weight: 400;
  font-size: clamp(27px, 6.4vw, 36px);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* Il sottolineo a penna c'e' solo all'arrivo; la base e' gia' finale, l'animazione lo scrive una volta. */
.sottolinea { display: none; width: min(320px, 80%); height: 12px; overflow: visible; margin-top: 2px; }
.foglio-titolo.pronta .sottolinea { display: block; }
.sottolinea path {
  fill: none;
  stroke: var(--colore-penna);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.foglio-titolo.pronta.anima .sottolinea path { animation: tratto-scrivi 420ms var(--ease-in-out) both; }
/* Il sottolineo all'arrivo prende il colore dello stato (data-stato sulla scena, da app.mjs); prima resta penna blu. */
.foglio-scena[data-stato="sistemare"] .sottolinea path { stroke: #D97706; }
.foglio-scena[data-stato="bene"] .sottolinea path { stroke: #16A34A; }
.foglio-scena[data-stato="nessuno"] .sottolinea path { stroke: #78716C; }
.foglio {
  padding: 18px 18px 6px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-scheda);
  background: var(--superficie);
  font-variant-numeric: lining-nums tabular-nums;
}
.foglio-testa {
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bordo);
  color: var(--secondario);
  font-size: 13px;
  overflow-wrap: anywhere;
}
/* Righe del foglio tinte per esito (come un antivirus: il colore dice com'è andata prima di leggere). */
.foglio .riga { border-radius: 10px; padding-left: 10px; padding-right: 10px; margin-left: -10px; margin-right: -10px; }
.foglio .righe .riga + .riga { border-top: 0; margin-top: 4px; }
.foglio .riga[data-esito="da"] { background: #FEF3C7; }
.foglio .riga[data-esito="ok"] { background: #DCFCE7; }
.foglio .riga[data-esito="sapere"] { background: #F4F4F5; }
.foglio .riga[data-esito="no"] { background: #F5F5F4; }
.foglio .fatto { min-height: 1.55em; overflow-wrap: anywhere; }
.foglio .casella .segno { stroke-dasharray: 100; stroke-dashoffset: 0; }
[data-esito="sapere"] .segno { stroke: var(--inchiostro); }
/* Una riga si scrive solo quando passa da «in attesa» a chiusa: il segno a penna, poi il fatto da sinistra a destra. */
.riga.si-scrive .segno { animation: tratto-scrivi 340ms var(--ease-in-out) var(--ritardo, 0ms) both; }
.riga.si-scrive .fatto { animation: fatto-scrivi 500ms var(--ease-out) var(--ritardo, 0ms) both; }
@keyframes fatto-scrivi {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}
/* Nota a margine: i punti da sistemare emersi finora (solo mentre il foglio si scrive). */
.nota-margine {
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--bg);
  color: var(--inchiostro);
  font-size: 15px;
  transition: opacity 200ms var(--ease-out);
}
.nota-margine strong { font-weight: 500; color: #92400E; }
.nota-margine.entra { animation: nota-entra 260ms var(--ease-out) both; }
.nota-margine.via { opacity: 0; }
@keyframes nota-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* Verdetto: riquadro nel colore pieno dello stato (come un antivirus), testo, numero e cerchio a penna in inchiostro. */
@property --conta {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.verdetto {
  margin: 4px 0 6px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FBBF24;
  color: #1C1917;
}
.verdetto[data-stato="sistemare"] { background: #FBBF24; }
.verdetto[data-stato="bene"] { background: #86EFAC; }
.verdetto[data-stato="nessuno"],
.verdetto.spento { background: #D6D3D1; }
.verdetto.arriva { animation: verdetto-arriva 240ms var(--ease-out) both; }
@keyframes verdetto-arriva {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.verdetto-riga { display: flex; align-items: center; gap: 14px; margin: 10px 0; }
.numero-cerchio { position: relative; display: inline-block; flex: none; }
.numero {
  position: relative;
  display: inline-block;
  min-width: 96px;
  color: #1C1917;
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}
/* Il conteggio 0 -> N e' decorativo: il numero nel DOM e' gia' quello finale (lo legge chiunque), lo disegna ::after solo per i
   600 ms dell'animazione; a conteggio finito la pagina toglie la classe e resta il testo vero, inchiostro. */
.numero.conta {
  color: transparent;
  --conta: var(--finale);
  animation: conta-numero 600ms var(--ease-out) both;
}
.numero.conta::after {
  content: counter(numero-verdetto);
  counter-reset: numero-verdetto var(--conta);
  position: absolute;
  inset: 0;
  color: #1C1917;
  text-align: center;
}
@keyframes conta-numero {
  from { --conta: 0; }
}
.cerchio {
  position: absolute;
  inset: -12px -14px;
  width: calc(100% + 28px);
  height: calc(100% + 24px);
  overflow: visible;
  pointer-events: none;
}
.cerchio path {
  fill: none;
  stroke: #1C1917;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.verdetto.arriva .cerchio path { animation: tratto-scrivi 480ms var(--ease-in-out) 600ms both; }
.trattino-verdetto { display: inline-block; width: 96px; flex: none; }
.trattino-verdetto svg { display: block; width: 100%; height: 20px; overflow: visible; }
.trattino-verdetto path { fill: none; stroke: #57534E; stroke-width: 4; stroke-linecap: round; }
.verdetto-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 19px; color: #1C1917; }
.verdetto-testo strong { font-weight: 700; overflow-wrap: anywhere; }
.verdetto-ok { color: #1C1917; font-size: 15px; font-weight: 500; }
.verdetto.spento .verdetto-ok { color: #1C1917; } /* senza verdetto la riga resta inchiostro sul grigio */
.verdetto-nota { max-width: 58ch; margin: 8px 0 0; color: #292524; font-size: 15px; }
.verdetto button { width: 100%; margin-top: 12px; }
.verdetto button:focus-visible { outline-color: #1C1917; }
/* Note di attesa (30 s, 90 s) e pulsante del moto sotto il foglio. */
.wait-notes .wait-note { max-width: 58ch; }
.motion-toggle { justify-self: start; min-height: 44px; padding: 8px 16px; font-size: 15px; }
.wait-pause {
  display: grid;
  gap: 12px;
  justify-items: start;
  margin: 4px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--bordo);
}
.foglio .port-notice {
  margin: 4px 0 8px;
  padding: 14px 0 0;
  border: 0;
  border-top: 1px solid var(--bordo);
  border-radius: 0;
  background: none;
}
.foglio .port-notice.bad { border-top-color: #B45309; }
/* Guasto senza dati e link scaduto: nessun foglio, un titolo in Mazius e il pulsante (stessa voce del titolo del foglio). */
#result .titolo-stato {
  margin: 0;
  font-family: "Mazius", Georgia, serif;
  font-weight: 400;
  font-size: clamp(27px, 6.4vw, 36px);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
}
#result .titolo-stato:focus { outline: none; }
.wait-pause .wait-note.warn { padding: 0; border: 0; background: none; font-size: 16px; }

/* Avvisi di servizio: una nota sul foglio, stessi testi e stesso pulsante di prima. */
.wait-note { margin: 0; color: var(--secondario); font-size: 15px; }
.wait-note.keep,
.wait-note.warn {
  padding: 10px 14px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--inchiostro);
}
.port-notice {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 18px 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-scheda);
  background: var(--superficie);
}
.port-notice .wait-note.warn { padding: 0; border: 0; background: none; font-size: 17px; }
.port-notice.bad { border-color: #B45309; }
.port-notice.bad .wait-note.warn { color: #92400E; }
.port-notice .hint { margin: 0; }

/* ---- Scelta dell'attività: la scheda è un foglio, ogni riga ha lo stesso segno-casella ---- */
.cand-wrap {
  display: grid;
  gap: 14px;
  max-width: 720px;
  margin-top: 24px;
  padding: 22px 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-scheda);
  background: var(--superficie);
}
.cand-wrap > p { margin: 0; color: var(--secondario); max-width: 58ch; }
.cand-wrap [role="radiogroup"] { display: grid; gap: 10px; min-width: 0; }
.cand-wrap > label:not(.cand) { display: grid; gap: 8px; min-width: 0; font-size: 17px; font-weight: 500; }
.cand-wrap input:not([type="radio"]):not([type="checkbox"]) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  transition: border-color 160ms ease-out;
}
.cand-wrap input:not([type="radio"]):not([type="checkbox"]):focus { border-color: var(--azione); }
@media (hover: hover) and (pointer: fine) {
  .cand-wrap input:not([type="radio"]):not([type="checkbox"]):hover { border-color: var(--azione); }
}
.cand {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 14px;
  align-items: start;
  padding: 14px 16px;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  background: var(--superficie);
  cursor: pointer;
}
.cand > input { grid-row: 1 / span 2; }
.cand > strong,
.cand > span { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.cand > strong { font-weight: 500; }
.cand > span { color: var(--secondario); font-size: 15px; line-height: 1.5; white-space: pre-line; }
.cand:has(input:checked) { border-color: var(--azione); box-shadow: inset 0 0 0 1px var(--azione); }
.cand input[type="radio"],
.cand input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  margin: 0;
  border: 2px solid var(--sbiadito);
  border-radius: 7px;
  background: var(--superficie) center / 100% 100% no-repeat;
}
.cand input[type="radio"]:checked,
.cand input[type="checkbox"]:checked {
  border-color: var(--azione);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M7 14.5 L12 19.5 L21.5 8.5' fill='none' stroke='%232563EB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cand-wrap > button { justify-self: start; }
.cand-wrap #cand-no-site { margin: 0; }
.cand-challenge { min-width: 0; }
.cand-challenge:empty { display: none; }
.cand-checking { margin: -6px 0 0; color: var(--inchiostro); font-size: 14px; line-height: 1.5; }

/* ---- Sfida di sicurezza (29/09): il riquadro sta accanto al pulsante che lo richiede, in ogni passo ---- */
.entry-card > iframe,
.cand-challenge > iframe,
.proposta-card > iframe,
.email-access > iframe { display: block; width: 300px; max-width: 100%; scroll-margin: 12px 0 24px; }
.cand-challenge > iframe { scroll-margin: 12px 0 130px; }
.email-access > iframe { margin-top: 16px; }
.sfida-stato { margin: 12px 0 0; color: inherit; font-size: 14px; line-height: 1.5; }
.sfida-stato + iframe { margin-top: 8px; }

/* Ingresso compatto quando il lavoro è partito: resta il titolo, il resto lascia posto al foglio. */
html[data-state]:not([data-state="idle"]):not([data-state="searching"]):not([data-state="tester_active"]) .hero {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 12px 0 0;
}
/* Lavoro partito: il titolo dell'ingresso e' una riga di contesto, piu' piccola e piu' quieta del titolo del foglio (Mazius grande: «Stiamo guardando…», «Ecco cosa abbiamo trovato.»). */
html[data-state]:not([data-state="idle"]):not([data-state="searching"]):not([data-state="tester_active"]) .hero h1 {
  color: var(--secondario);
  font-size: clamp(22px, 2.4vw, 26px);
}
html[data-state]:not([data-state="idle"]):not([data-state="searching"]):not([data-state="tester_active"]) .lead,
html[data-state]:not([data-state="idle"]):not([data-state="searching"]):not([data-state="tester_active"]) .entry-card,
html[data-state]:not([data-state="idle"]):not([data-state="searching"]):not([data-state="tester_active"]) .stage,
html[data-state]:not([data-state="idle"]):not([data-state="searching"]):not([data-state="tester_active"]) .hero-sub { display: none; }

/* Scenario dimostrativo: solo in demo, discreto sotto l'ingresso (nel runtime sparisce). */
.hero-sub { display: grid; gap: 14px; max-width: 560px; padding: 18px 0 4px; }
.scenario-row { display: grid; gap: 6px; }
.scenario-row label { color: var(--secondario); font-size: 13px; }
#scenario {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 16px;
}

.footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--bordo);
  color: var(--secondario);
  font-size: 14px;
}
.footer p { max-width: 62ch; margin: 0 0 8px; }
.footer a { color: var(--azione-sopra); text-underline-offset: 3px; }
#foot-legal { margin: 6px 0 0; }

/* Pagine privacy: la piccola indicazione del documento sopra il titolo (le pagine leggono gli stessi token del valutatore). */
.legal-doc .eyebrow { color: var(--secondario); font-size: 14px; letter-spacing: 0; text-transform: none; }

@media (min-width: 900px) {
  .hero h1 { font-size: clamp(40px, 4.4vw, 58px); }
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
    padding-top: clamp(24px, 5vh, 52px);
  }
  .stage { display: block; margin-top: 8px; }
  .foglio { padding: 24px 26px 8px; }
}
/* Da telefono e tablet (candidato del 30/09/2026): la miniatura sta SOTTO il modulo. Chi arriva da un annuncio arriva
   dal telefono e prima vedeva solo il modulo: così vede com'è fatto il risultato prima di scrivere. Il modulo resta la
   prima cosa. La miniatura c'è solo a pagina ferma: sparisce appena parte la ricerca (una scelta alla volta) e ogni
   volta che sotto l'ingresso si apre una scheda — avanzamento, avviso d'errore, scelta dell'attività, rapporto,
   proposta — perché quella scheda deve leggersi senza scorrere. Serve `:has()`: dove manca, la miniatura non si
   mostra (come prima del 30/09). Da computer resta a destra, regola per stato più su. */
@media (max-width: 899px) {
  @supports selector(:has(*)) {
    .stage { display: block; max-width: 560px; }
    html[data-state]:not([data-state="idle"]) .stage,
    html:has(#progress:not([hidden]), #candidates:not([hidden]), #result:not([hidden]), #proposta:not([hidden])) .stage { display: none; }
  }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .shell { width: calc(100% - 40px); padding-bottom: 40px; }
  .topbar { padding-top: 14px; }
  .brand { font-size: 24px; }
  .entry-card input { font-size: 18px; }
  .entry-card #to-location { width: 100%; }
  .cand-wrap { padding: 18px 14px; }
  .cand-wrap > button { justify-self: stretch; }
  /* Cima nel primo schermo da telefono (giro 3): a lavoro partito il titolo e' una riga piccola, la prima cosa da sistemare resta sopra la piega. */
  html[data-state]:not([data-state="idle"]):not([data-state="searching"]):not([data-state="tester_active"]) .hero { padding-top: 8px; }
  html[data-state]:not([data-state="idle"]):not([data-state="searching"]):not([data-state="tester_active"]) .hero h1 { font-size: 22px; }
}
@media (max-width: 360px) {
  .shell { width: calc(100% - 28px); }
  .step-nav { flex-wrap: wrap; }
}

/* Movimento ridotto: tutto già scritto, nessuna animazione (anche col pulsante «Riduci le animazioni»). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .pennino { display: none !important; }
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-motion="reduce"] .pennino { display: none !important; }

/* ---- Passo 3: la lettura, la proposta a lettera, la barra, l'anteprima con accesso via email ---- */

/* Il foglio compatto: dopo «Leggi il rapporto» resta in alto, una riga per riga, senza il pulsante. */
.foglio.mini { padding: 14px 16px 6px; }
.foglio.mini .riga { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 7px 0; }
.foglio.mini .casella { width: 22px; height: 22px; }
.foglio.mini .riga-testo strong,
.foglio.mini .fatto { display: inline; min-height: 0; font-size: 15px; }
.foglio.mini .fatto:not(:empty)::before { content: " — "; color: var(--secondario); font-weight: 400; }
/* Nel foglio compatto la frase e' in linea e va a capo: niente ritaglio d'animazione (il ritaglio prende solo la prima riga). */
.foglio.mini .riga.si-scrive .fatto { animation: none; clip-path: none; }
.foglio.mini .verdetto { margin: 2px 0 4px; padding: 10px 14px; }
.foglio.mini .verdetto-riga { margin: 4px 0; }
.foglio.mini .numero { min-width: 64px; font-size: 44px; }
.foglio.mini #btn-rapporto,
.foglio.mini .pennino { display: none; }

/* Testi di servizio della pagina. */
.meta { color: var(--secondario); font-size: 14px; }
.eyebrow { margin: 0 0 8px; color: var(--secondario); font-size: 14px; letter-spacing: 0; text-transform: none; }
.notice {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--tinta);
  color: var(--inchiostro);
  font-size: 15px;
}
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.result-actions .ghost { width: fit-content; }
.field-error { margin: 0; color: #92400E; font-size: 15px; }

/* Richiamo compatto al contatto, solo mentre la raccolta continua (sotto il foglio, fuori dal rapporto). */
.result-next {
  display: grid;
  gap: 6px;
  justify-items: start;
  max-width: 720px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-scheda);
  background: var(--superficie);
}
.result-next strong { font-size: 17px; font-weight: 500; }
.result-next p { margin: 0; color: var(--secondario); font-size: 15px; max-width: 58ch; }
.result-next a { color: var(--azione-sopra); font-size: 16px; font-weight: 500; text-underline-offset: 3px; }

/* ---- La lettura ---- */
.lettura { max-width: 720px; margin-top: 30px; font-variant-numeric: lining-nums tabular-nums; }
#result-title {
  margin: 0;
  font-family: "Mazius", Georgia, serif;
  font-weight: 400;
  font-size: clamp(27px, 6.4vw, 36px);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
#result-title:focus { outline: none; }
.lettura-stato { margin: 6px 0 0; color: var(--secondario); font-size: 14px; }
.sommario { max-width: 58ch; margin: 14px 0 0; font-size: 18px; }
.sommario strong { font-weight: 700; }
.lettura .sintesi { max-width: 58ch; margin: 12px 0 0; font-weight: 500; }
.lettura .chiusura {
  max-width: 58ch;
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--ok-bg);
  border-radius: 10px;
  background: var(--ok-bg);
  color: var(--ok);
}
.guardato {
  max-width: 58ch;
  margin: 16px 0 0;
  padding: 8px 16px;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  background: var(--superficie);
}
.guardato summary { padding: 6px 0; font-weight: 500; cursor: pointer; }
.guardato ul { margin: 6px 0 6px; padding-inline-start: 20px; color: var(--secondario); font-size: 15px; }
.guardato li + li { margin-top: 4px; }
.guardato li strong { color: var(--inchiostro); font-weight: 500; }
.lettura section { margin-top: 36px; }
.lettura h3 { margin: 0 0 10px; font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }

/* Priorita': nell'ordine del core, il numero d'ordine porta significato (01 e' la piu' importante). */
.priorita { margin: 0; padding: 0; list-style: none; }
.priorita li { padding: 18px 0; border-top: 1px solid var(--bordo); }
.priorita li:first-child { border-top: 0; padding-top: 6px; }
.priorita .num { display: block; color: #B45309; font-size: 40px; font-weight: 500; line-height: 1; }
.priorita h4 {
  margin: 8px 0;
  max-width: 30rem;
  font-size: clamp(21px, 5vw, 27px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.priorita p { max-width: 58ch; margin: 8px 0; overflow-wrap: anywhere; }
.priorita .trovato strong,
.priorita .perche strong,
.priorita .intervento strong { font-weight: 700; color: var(--inchiostro); }
.priorita .limite { color: var(--secondario); font-size: 13px; }

/* Il quadro completo: una riga per area, con lo stesso segno del foglio. */
.aree { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bordo); }
.aree li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--bordo);
}
.segno-riga { display: block; width: 28px; height: 28px; }
.area-testo { min-width: 0; }
.area-riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.area-riga strong { margin-inline-end: auto; font-weight: 500; overflow-wrap: anywhere; }
.area-frase { margin: 4px 0 0; color: var(--secondario); font-size: 15px; overflow-wrap: anywhere; }
/* Il motivo di un controllo non verificato: grigio e piccolo, mai rosso (non e' un problema del sito). */
.area-motivo { margin: 6px 0 0; color: var(--sbiadito); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.etichetta {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 10px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  color: var(--secondario);
  font-size: 13px;
  font-weight: 500;
}
.etichetta[data-gruppo="sistemare"] { border-color: #B45309; background: #FEF3C7; color: #92400E; font-weight: 600; }
.etichetta[data-gruppo="funziona"] { border-color: #15803D; background: #DCFCE7; color: #166534; font-weight: 600; }
.etichetta[data-gruppo="non_verificato"],
.etichetta[data-gruppo="non_incluso"] { border-color: #A8A29E; background: #E7E5E4; color: #44403C; font-weight: 600; }

/* Tutti i controlli, uno per uno, dietro «Vedi tutti i controlli». */
#quadro { margin-top: 16px; }
#gruppi { display: grid; gap: 12px; margin-top: 14px; min-width: 0; }
#conteggi { margin: 0; }
#non-controllato { margin: 0; }
.motivi-nv { display: grid; margin: 0; padding: 0; list-style: none; min-width: 0; }
.motivi-nv li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--bordo); min-width: 0; }
.motivi-nv .voce-area { min-width: 0; overflow-wrap: anywhere; }
.motivo-nv { min-width: 0; color: var(--sbiadito); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
details.gruppo { padding: 10px 16px; border: 1px solid var(--bordo); border-radius: 12px; background: var(--superficie); min-width: 0; }
details.gruppo > summary { padding: 4px 0; font-size: 18px; font-weight: 500; cursor: pointer; }
.gruppo-voci { display: grid; margin-top: 6px; min-width: 0; }
div.voce.voce-semplice,
details.voce { padding: 12px 0; border-top: 1px solid var(--bordo); min-width: 0; }
.voce-titolo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; line-height: 1.5; }
details.voce > summary.voce-titolo { position: relative; padding-inline-end: 26px; cursor: pointer; }
details.voce > summary.voce-titolo::after {
  content: "";
  position: absolute;
  inset-inline-end: 6px;
  inset-block-start: .5em;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--secondario);
  border-bottom: 2px solid var(--secondario);
  transform: rotate(45deg);
  transition: transform 160ms var(--ease-out);
}
details.voce[open] > summary.voce-titolo::after { transform: rotate(-135deg); }
.voce-pallino { flex: none; align-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--colore-penna); }
.voce-testo { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.voce-area { flex: none; color: var(--secondario); font-size: 13px; }
.voce-dettaglio { display: grid; gap: 8px; margin-top: 8px; font-size: 15px; }
.voce-dettaglio > p { max-width: 58ch; margin: 0; overflow-wrap: anywhere; }
.voce-perche strong { font-weight: 700; }
details.voce[open] .voce-dettaglio { animation: voce-apri 180ms var(--ease-out) both; }
@keyframes voce-apri { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Cosa ha risposto l'assistente: una riga per domanda, sempre visibile. */
.lettura .chatgpt-observations > .meta { max-width: 58ch; margin: 0 0 8px; }
.chatgpt-status { margin: 0; padding: 10px 0; border-top: 1px solid var(--bordo); color: var(--inchiostro); font-size: 16px; }
.chatgpt-status:last-child { border-bottom: 1px solid var(--bordo); }
#report-metodo { max-width: 58ch; margin: 28px 0 0; }

/* Le sezioni si rivelano una volta sola, quando entrano in vista (solo opacita' e 12 px; la pagina le arma solo se non sono gia' in vista). */
.rv.armata { opacity: 0; transform: translateY(12px); }
.rv.armata.dentro {
  opacity: 1;
  transform: none;
  transition: opacity 240ms var(--ease-out) var(--rv-ritardo, 0ms), transform 240ms var(--ease-out) var(--rv-ritardo, 0ms);
}
@media (prefers-reduced-motion: reduce) { .rv.armata { opacity: 1; transform: none; } }
html[data-motion="reduce"] .rv.armata { opacity: 1; transform: none; }

/* ---- La proposta, a lettera: titolo, il perche', il prezzo del core, il modulo ---- */
.lettera {
  max-width: 720px;
  margin-top: 36px;
  padding: 24px 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-scheda);
  background: var(--superficie);
}
.lettera h2 {
  margin: 0 0 12px;
  font-family: "Mazius", Georgia, serif;
  font-weight: 400;
  font-size: clamp(27px, 6.4vw, 36px);
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.lettera h2:focus { outline: none; }
.offer { display: grid; gap: 8px; max-width: 58ch; margin: 0; }
.offer p { margin: 0; overflow-wrap: anywhere; }
.offer-perche { font-size: 19px; font-weight: 500; line-height: 1.45; }
.offer-prezzo { color: var(--azione-sopra); font-size: 17px; font-weight: 500; }
.proposta-testo { max-width: 58ch; margin: 10px 0 0; color: var(--secondario); font-size: 15px; }
.prices-link { margin: 8px 0 0; }
.prices-link a,
.privacy-note a { color: var(--azione-sopra); text-underline-offset: 3px; }
.proposta-card { display: grid; gap: 14px; max-width: 560px; margin-top: 22px; min-width: 0; }
.proposta-card label { display: grid; gap: 6px; font-size: 17px; font-weight: 500; }
.proposta-card .meta { margin: -6px 0 0; font-size: 14px; }
.lettera input:not([type="checkbox"]),
.lettera textarea,
.email-access input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  padding: 12px 16px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 18px;
  font-weight: 400;
  transition: border-color 160ms ease-out;
}
.lettera textarea { min-height: 120px; font-size: 16px; resize: vertical; }
.lettera input::placeholder,
.lettera textarea::placeholder { color: var(--secondario); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .lettera input:not([type="checkbox"]):hover,
  .lettera textarea:hover,
  .email-access input:hover { border-color: var(--azione); }
}
.lettera input:not([type="checkbox"]):focus,
.lettera textarea:focus,
.email-access input:focus { border-color: var(--azione); }
.lettera input[aria-invalid="true"] { border-color: var(--azione); box-shadow: inset 0 0 0 1px var(--azione); }
.proposta-card .contact-choice { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; font-weight: 400; line-height: 1.5; }
.contact-choice input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; }
.demo-only { color: var(--secondario); font-size: 13px; font-weight: 400; }
.demo-only select {
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--bordo);
  border-radius: 8px;
  background: var(--superficie);
  color: var(--inchiostro);
  font: inherit;
  font-size: 15px;
}
.privacy-note { margin: 0; color: var(--secondario); font-size: 14px; line-height: 1.5; }
.proposta-card > button[type="submit"] { justify-self: start; }
.proposta-dopo { margin: 0; color: var(--secondario); font-size: 14px; line-height: 1.5; }
.proposta-dopo strong { font-weight: 700; color: var(--inchiostro); }
.proposta-card > .proposta-dopo + .proposta-dopo { margin-top: -8px; }
.esito {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--bordo);
  border-radius: 10px;
  background: var(--grigio-bg);
  color: var(--inchiostro);
  font-size: 16px;
}
.esito[data-esito="ricevuta"] { border-color: var(--ok-bg); background: var(--ok-bg); color: var(--ok); }
.esito .meta { color: inherit; }

/* ---- Barra «Richiedi la proposta»: solo sotto i 900 px, sparisce con la proposta in vista ---- */
#barra-proposta { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; background: var(--verdetto-sfondo); color: #FAFAF9; transition: none !important; }
#barra-proposta[hidden] { display: none !important; }
#barra-proposta[data-nascosta-vista="1"] { display: none !important; }
@media (min-width: 900px) { #barra-proposta { display: none !important; } }
#barra-proposta .barra-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 10px 0; }
/* Il testo va a capo invece di sparire (prova di zoom 200% e 320 px); il nome del locale compare solo dove c'e' posto. */
#barra-testo { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: baseline; min-width: 0; font-size: 14px; line-height: 1.3; }
#barra-nome { min-width: 0; }
#barra-sep { flex: none; }
#barra-punti { flex: 0 1 auto; min-width: 0; }
@media (max-width: 700px) { #barra-nome, #barra-sep { display: none; } }
#barra-proposta a#barra-cta {
  display: inline-flex;
  flex: none;
  margin-inline-start: auto;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--colore-penna);
  border-radius: 10px;
  background: var(--azione);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { #barra-proposta a#barra-cta:hover { background: var(--azione-sopra); } }
#barra-proposta a#barra-cta:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* ---- Anteprima con accesso via email: un riscontro vero, poi il codice ---- */
.report-head { display: grid; gap: 6px; }
.report-head .meta { max-width: 58ch; margin: 0; }
#result-business-location { color: var(--secondario); font-size: 17px; }
#preview-summary { margin-top: 16px; }
#preview-summary .sintesi { max-width: 58ch; margin: 0; font-weight: 400; }
#preview-summary .sintesi h3 { font-size: 18px; }
.summary-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0; }
.summary-stat strong { font-size: 20px; font-weight: 700; }
.summary-confirm { margin: 6px 0 0; color: var(--secondario); font-size: 14px; }
.preview-scope { margin-top: 12px; font-size: 15px; }
.preview-scope summary { padding: 6px 0; cursor: pointer; }
.preview-scope ul { margin: 6px 0; padding-inline-start: 20px; color: var(--secondario); }
.preview-content { margin-top: 24px; }
.preview-content > h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; }
.preview-content > .meta { margin-top: 14px; max-width: 58ch; }
.finding { margin: 0; padding: 12px 0; border-top: 1px solid var(--bordo); }
.finding p { max-width: 58ch; margin: 6px 0; overflow-wrap: anywhere; }
.finding > p:first-child { margin-top: 0; font-size: 18px; }
.finding-consequence strong { font-weight: 700; }
.natura {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  color: var(--secondario);
  font-size: 13px;
  font-weight: 500;
}
#preview-access { margin-top: 24px; }
.email-access {
  max-width: 560px;
  padding: 22px 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-scheda);
  background: var(--superficie);
}
.email-access h3 { margin: 4px 0 8px; font-size: 24px; line-height: 1.2; }
.email-access form { display: grid; gap: 12px; margin: 16px 0 0; }
.email-access label { display: grid; gap: 6px; font-size: 17px; font-weight: 500; }
.email-access input.access-code { font-size: 26px; letter-spacing: .3em; }
.email-access button { width: 100%; }
.email-access .ghost { white-space: normal; }
.email-access .privacy-note { margin-top: 18px; }
.access-recipient { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 560px) {
  .lettera { padding: 20px 14px; }
  .email-access { padding: 18px 14px; }
}
@media (max-width: 360px) {
  .lettera { padding: 18px 12px; }
  .proposta-card { min-width: 0; }
  .guardato,
  details.gruppo { padding-inline: 12px; }
}

/* «Salva il rapporto»: azione di servizio. In alto solo testo, in fondo un bottone secondario come il vicino. */
.salva-riga { margin: 8px 0 0; font-size: 15px; }
button.link-azione {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--azione-sopra);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  button.link-azione:not(:disabled):hover { background: none; color: var(--azione); }
}
button.link-azione:active { transform: none; }
button.link-azione .ico,
button.salva .ico { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.salva-esito { max-width: 58ch; margin: 8px 0 0; color: var(--secondario); font-size: 15px; }
/* Area toccabile del collegamento in alto: almeno 24 px anche con la riga ereditata (controllo nel browser). */
button.link-azione { min-height: 24px; }

/* Stampa (rilascio 16): sulla carta il foglio col verdetto, il rapporto e l'intestazione della proposta. */
@media print {
  body { background: #FFFFFF; font-size: 12pt; }
  .shell, .lettera, .foglio, .guardato, details.gruppo { box-shadow: none !important; }
  .skip, .topbar-links, .hero, .hero-sub, #candidates, #barra-proposta,
  #salva-riga, .salva-esito, .result-actions, .proposta-card, .footer { display: none !important; }
  .solo-schermo { display: none !important; }
  /* Rapporto aperto (2g): il contenuto dei controlli si vede anche se l'utente
     non l'ha mai aperto; i comandi per aprire e chiudere no. I `summary`
     restano come righe di testo (i titoli delle voci sono lì dentro), senza il
     triangolo cliccabile; il bottone «Vedi tutti i controlli» non si stampa. */
  #vedi-tutti { display: none !important; }
  #gruppi[hidden] { display: block !important; }
  #result details > summary { cursor: default !important; }
  #result details > summary::marker { content: ""; }
  #result details > summary::-webkit-details-marker { display: none; }
  details.voce > summary.voce-titolo { padding-inline-end: 0 !important; }
  details.voce > summary.voce-titolo::after { display: none !important; }
}