/* Kit grafico di veiora, versione 1 — https://<dominio dell'app>/_veiora/v1/veiora.css
   Colori, caratteri, componenti e passaggi fluidi comuni a veiora.it, alle pagine di accesso e alle app.
   Guida: /_veiora/v1/guida/ e, nella sandbox, /srv/veiora/veiora-stile.md. Nessuna risorsa esterna.

   Tre livelli:
   1. variabili (--v-*) e caratteri: sempre disponibili, non cambiano nulla da soli;
   2. componenti con prefisso v- (.v-btn, .v-scheda, ...): si usano dove servono, anche insieme ad altri framework;
   3. stile di base della pagina (fondo, testi, link, fuoco): solo con la classe "v" su <html>. */

@font-face { font-family: "Unbounded"; src: url("fonts/unbounded-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("fonts/unbounded-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
/* carattere di sistema allargato come Space Grotesk: quando arriva quello vero i testi non vanno a capo diversamente */
@font-face { font-family: "Space Grotesk ripiego"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"), local("Liberation Sans"); size-adjust: 109.4%; }

/* ------------------------------------------------------------------ 1. variabili */
:root {
  /* fondo e superfici: luce nel buio */
  --v-nero: #04050a;
  --v-fondo: #070912;
  --v-superficie: rgba(14, 17, 32, 0.62);
  --v-superficie-forte: rgba(12, 14, 28, 0.9);
  --v-velo: rgba(4, 5, 10, 0.52);
  --v-linea: rgba(150, 170, 255, 0.18);
  --v-linea-forte: rgba(150, 170, 255, 0.32);
  /* testo (contrasto su --v-nero: testo 17:1, tenue 9:1, spento 5,5:1 — spento solo per note e didascalie) */
  --v-testo: #e9ecff;
  --v-tenue: #a3abcf;
  --v-spento: #7c84a8;
  /* la famiglia di nove colori delle forme della homepage */
  --v-ciano: #5ef2ff;
  --v-acqua: #5fffd7;
  --v-cielo: #38bdf8;
  --v-pervinca: #7c9cff;
  --v-viola: #8b5cf6;
  --v-lavanda: #b388ff;
  --v-magenta: #ff5fd2;
  --v-rosa: #ff6fae;
  --v-ambra: #ffcf7a;
  /* stati */
  --v-ok: #47cd89;
  --v-errore: #ff6b7d;
  --v-attenzione: #ffcf7a;
  /* triade di veiora; ogni app puo' sceglierne una sua dalla famiglia (vedi la guida) ridefinendo --v-a1/2/3 */
  --v-a1: var(--v-ciano);
  --v-a2: var(--v-viola);
  --v-a3: var(--v-magenta);
  --v-grad: linear-gradient(115deg, var(--v-a1), var(--v-a2) 50%, var(--v-a3));
  --v-grad-veiora: linear-gradient(115deg, var(--v-ciano), var(--v-viola) 50%, var(--v-magenta));
  /* caratteri */
  --v-display: "Unbounded", "Space Grotesk", system-ui, sans-serif;
  --v-corpo: "Space Grotesk", "Space Grotesk ripiego", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --v-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* forme e movimento */
  --v-r-s: 12px;
  --v-r-m: 18px;
  --v-r-l: 24px;
  --v-curva: cubic-bezier(.2, .8, .2, 1);
  --v-rapido: .25s;
  --v-medio: .45s;
  --v-lento: .8s;
  /* misure della testata: il marchio sta nello stesso punto su veiora.it, sulle pagine di accesso e nelle app */
  --v-testata-alto: 16px;
  --v-testata-lato: clamp(16px, 4vw, 44px);
  /* colori dei componenti (qui quelli della notte; la carta li rifa', vedi sotto) */
  --v-forte: #fff;                 /* il testo piu' acceso (al passaggio del puntatore) */
  --v-su-colore: #05060c;          /* testo sopra i colori pieni (pulsanti) */
  --v-ombra: #000;
  --v-linea-tinta: #96aaff;
  --v-orb-fondo: #1a1040;
  --v-attenzione-testo: #ffe7b8;
  --v-rischio: #ff466e;
  --v-rischio-b: #ff3d7f;
  --v-pannello-a: #161a34;
  --v-pannello-b: #080914;
  --v-pannello-c: #1a1434;
  --v-menu-fondo: #0a0c18;
  --v-scheda-a: #1a1e3c;
  --v-scheda-b: #060710;
}

/* ------------------------------------------------------------------ 3. base della pagina (solo con html.v) */
html.v { color-scheme: dark; background: var(--v-nero); }
html.v body { margin: 0; min-height: 100vh; background: var(--v-nero); color: var(--v-testo);
  font: 16px/1.6 var(--v-corpo); -webkit-font-smoothing: antialiased; }
html.v a { color: var(--v-a1); text-decoration-thickness: 1px; text-underline-offset: 3px; }
html.v a:hover { color: var(--v-forte); }
html.v ::selection { background: color-mix(in srgb, var(--v-a2) 45%, transparent); color: var(--v-forte); }
html.v :focus-visible { outline: 2px solid var(--v-a1); outline-offset: 3px; border-radius: 6px; }
html.v h1, html.v h2, html.v h3 { font-family: var(--v-display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
html.v h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 .6em; }
html.v h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 1.6em 0 .6em; }
html.v h3 { font-size: 1.15rem; margin: 1.4em 0 .5em; }
html.v code, html.v pre { font-family: var(--v-mono); font-size: .92em; }

/* ------------------------------------------------------------------ 2. componenti */
.v-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* testata e marchio: stesso punto di veiora.it (in alto a sinistra, centrato su una riga di 46 px: la testata e' alta
   84 px margini compresi, 66 px sui telefoni in orizzontale). Anche la copertura dei passaggi (ponte.js) la usa, cosi'
   il marchio non salta tra una pagina e l'altra */
.v-testata { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  box-sizing: border-box; min-height: 84px; padding: var(--v-testata-alto) var(--v-testata-lato) 22px; }
@media (max-height: 500px) and (orientation: landscape) {
  .v-testata { min-height: 66px; padding-top: 8px; padding-bottom: 12px; }
}
.v-testata.v-fissa { position: fixed; top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--v-nero) 94%, transparent), color-mix(in srgb, var(--v-nero) 80%, transparent) 62%, color-mix(in srgb, var(--v-nero) 0%, transparent)); }
.v-marchio { display: inline-flex; align-items: center; gap: 10px; font: 700 1.05rem/1 var(--v-display); letter-spacing: 0.08em;
  color: var(--v-testo); text-decoration: none; }
a.v-marchio:hover { color: var(--v-forte); }
.v-marchio i { width: 10px; height: 10px; border-radius: 50%; background: var(--v-ciano); box-shadow: 0 0 12px var(--v-ciano), 0 0 30px var(--v-viola); }
/* nome dell'app accanto al marchio: "veiora / mnemosyn" */
.v-marchio .v-app { font: 500 0.95rem/1 var(--v-corpo); letter-spacing: 0.02em; color: var(--v-tenue); }
.v-marchio .v-app::before { content: "/"; margin: 0 10px 0 2px; color: var(--v-spento); }
/* il colore del marchio vince sul colore dei link della pagina (html.v a): "veiora" e' lo stesso ovunque */
html.v a.v-marchio { color: var(--v-testo); }
html.v a.v-marchio:hover { color: var(--v-forte); }

/* SUPERATO (resta per le app che lo usano ancora): il selettore a sigle IT / EN, la lingua attiva con
   aria-current="true" su fondo ciano, sul telefono solo l'altra lingua. Al suo posto .v-lingua, qui sotto */
.v-lingue { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--v-linea);
  background: var(--v-superficie); }
.v-lingue > a, .v-lingue > button { display: inline-grid; place-items: center; min-width: 34px; min-height: 28px; padding: 0 8px;
  border: 0; border-radius: 999px; background: none; cursor: pointer; font: 500 0.72rem/1 var(--v-mono); letter-spacing: 0.14em;
  color: var(--v-tenue); text-decoration: none; transition: color var(--v-rapido), background-color var(--v-rapido); }
.v-lingue [aria-hidden="true"] { text-box: trim-both cap alphabetic; margin-right: -0.14em; }
html.v .v-lingue > a { color: var(--v-tenue); }
.v-lingue > a:hover, .v-lingue > button:hover { color: var(--v-forte); }
html.v .v-lingue > [aria-current="true"], .v-lingue > [aria-current="true"] { color: var(--v-su-colore); background: var(--v-ciano);
  box-shadow: 0 0 14px color-mix(in srgb, var(--v-ciano) 35%, transparent); }
@media (max-width: 480px) {
  .v-lingue { padding: 0; border-color: transparent; background: none; }
  .v-lingue > [aria-current="true"] { display: none; }
  .v-lingue > a, .v-lingue > button { border: 1px solid var(--v-linea); }
}
/* lingua di veiora, come su veiora.it (la costruisce VeioraLingua.selettore, ponte.js): in testata la bandiera della
   lingua in uso, tonda come le perle e cerchiata di luce, con la sigla (sui telefoni la sola bandiera, in un tasto
   tondo); al clic il menu delle lingue dell'app, ognuna con bandiera e nome, quella in uso col segno di spunta.
   <details class="v-lingua"><summary>bandiera, sigla, nome in .v-sr</summary><div class="v-lingua-menu">pulsanti</div>
   Bandiere in bandiere/<lingua>.svg (it, en = Regno Unito, de, es, fr, hu); per le altre lingue una perla di veiora */
.v-lingua { position: relative; }
.v-lingua > summary { display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1px solid var(--v-linea); background: var(--v-superficie); list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; font: 500 0.72rem/1 var(--v-mono); letter-spacing: 0.14em;
  color: var(--v-testo); transition: border-color .3s, box-shadow .3s, color .2s; }
.v-lingua > summary::-webkit-details-marker { display: none; }
.v-lingua > summary::after { content: ""; width: 5px; height: 5px; margin: -3px 0 0 1px; border: solid var(--v-tenue); border-width: 0 1.4px 1.4px 0;
  transform: rotate(45deg); transition: transform .25s, margin .25s, border-color .2s; }
.v-lingua > summary:hover, .v-lingua[open] > summary { border-color: color-mix(in srgb, var(--v-ciano) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--v-ciano) 25%, transparent); color: var(--v-forte); }
.v-lingua > summary:hover::after, .v-lingua[open] > summary::after { border-color: var(--v-ciano); }
.v-lingua[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.v-lingua > summary:focus-visible { border-radius: 999px; }
.v-lingua .v-sigla { text-box: trim-both cap alphabetic; margin-right: -0.14em; }
.v-bandiera { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; background: center / cover no-repeat;
  background-image: radial-gradient(circle at 30% 30%, #fff, var(--v-ciano) 30%, var(--v-viola) 70%, var(--v-orb-fondo)); }
.v-bandiera::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle, color-mix(in srgb, var(--v-nero) 0%, transparent) 55%, color-mix(in srgb, var(--v-nero) 40%, transparent)); }
.v-bandiera[data-lingua="it"] { background-image: url("bandiere/it.svg"); }
.v-bandiera[data-lingua="en"] { background-image: url("bandiere/en.svg"); }
.v-bandiera[data-lingua="de"] { background-image: url("bandiere/de.svg"); }
.v-bandiera[data-lingua="es"] { background-image: url("bandiere/es.svg"); }
.v-bandiera[data-lingua="fr"] { background-image: url("bandiere/fr.svg"); }
.v-bandiera[data-lingua="hu"] { background-image: url("bandiere/hu.svg"); }
.v-lingua > summary .v-bandiera { width: 22px; height: 22px; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--v-ciano) 85%, transparent), 0 0 12px color-mix(in srgb, var(--v-ciano) 50%, transparent); }
.v-lingua-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 30; display: grid; gap: 2px; min-width: 184px; padding: 6px;
  border-radius: var(--v-r-m); border: 1px solid var(--v-linea); background: color-mix(in srgb, var(--v-menu-fondo) 96%, transparent);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--v-ombra) 50%, transparent); transform-origin: calc(100% - 30px) 0;
  animation: v-entra-lingua .24s var(--v-curva); }
.v-lingua.v-verso-destra .v-lingua-menu { right: auto; left: 0; transform-origin: 30px 0; }   /* selettore a sinistra (ponte.js) */
.v-lingua-menu::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; opacity: 0.7; background: var(--v-grad-veiora); }
@keyframes v-entra-lingua { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.v-lingua-menu > button { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: var(--v-r-s);
  background: none; cursor: pointer; text-align: left; font: 500 0.95rem var(--v-corpo); letter-spacing: 0; color: var(--v-testo);
  transition: background-color .2s, color .2s; }
.v-lingua-menu > button:hover { background: color-mix(in srgb, var(--v-ciano) 8%, transparent); color: var(--v-forte); }
.v-lingua-menu > button:focus-visible { border-radius: var(--v-r-s); outline-offset: -2px; }
.v-lingua-menu > button[aria-current="true"] { background: color-mix(in srgb, var(--v-ciano) 6%, transparent); cursor: default; }
.v-lingua-menu > button[aria-current="true"] .v-bandiera { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--v-ciano) 85%, transparent), 0 0 10px color-mix(in srgb, var(--v-ciano) 45%, transparent); }
.v-lingua-menu > button[aria-current="true"]::after { content: ""; width: 10px; height: 5px; margin: -3px 3px 0 auto; border: solid var(--v-ciano);
  border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--v-ciano) 70%, transparent)); }
@media (max-width: 480px) {   /* sui telefoni un tasto tondo con la sola bandiera */
  .v-lingua > summary { width: 46px; padding: 0; justify-content: center; }
  .v-lingua > summary::after, .v-lingua .v-sigla { display: none; }
  .v-lingua > summary .v-bandiera { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) { .v-lingua-menu { animation: none; } }
/* il segno dell'app (segno.js): la sua lettera di perle, subito prima del nome, alta quanto la riga del marchio */
.v-marchio .v-app { display: inline-flex; align-items: center; }
/* (la tela sborda di --v-segno-margine per lato: li' si spegne il suo alone; i margini negativi la riportano a 22 px) */
.v-marchio .v-segno { --v-segno-margine: 8px; width: calc(var(--v-segno, 22px) + 16px); height: calc(var(--v-segno, 22px) + 16px);
  flex: none; display: block; margin: -12px -1px -12px -8px; pointer-events: none; }

/* testi di servizio */
.v-sopratitolo { font: 500 0.78rem/1.4 var(--v-mono); letter-spacing: 0.35em; text-transform: uppercase; color: var(--v-a1);
  text-shadow: 0 0 18px color-mix(in srgb, var(--v-a1) 60%, transparent); }
.v-titolo { font: 700 clamp(1.9rem, 4.2vw, 3.3rem)/1.08 var(--v-display); letter-spacing: -0.01em; margin: 10px 0 16px; }
.v-titolo-grad { background: var(--v-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v-nota { color: var(--v-tenue); font-size: 0.9rem; }
.v-etichetta { display: inline-block; font: 500 0.72rem var(--v-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-testo);
  padding: 6px 11px; border-radius: 999px; border: 1px solid var(--v-linea-forte); background: color-mix(in srgb, var(--v-nero) 45%, transparent); }

/* pulsanti */
.v-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; font: 600 1rem/1.2 var(--v-corpo);
  color: var(--v-su-colore); background: var(--v-grad); background-size: 160% 100%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 10px 36px color-mix(in srgb, var(--v-a2) 35%, transparent);
  transition: background-position .6s, box-shadow .3s, transform var(--v-rapido) var(--v-curva); }
.v-btn:hover { background-position: 100% 0; color: var(--v-su-colore);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 12px 46px color-mix(in srgb, var(--v-a1) 42%, transparent); }
.v-btn:active { transform: translateY(1px) scale(0.99); }
.v-btn:disabled, .v-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.v-btn.v-fantasma { background: rgba(255, 255, 255, 0.03); color: var(--v-testo); box-shadow: 0 0 0 1px var(--v-linea) inset; }
.v-btn.v-fantasma:hover { color: var(--v-forte); box-shadow: 0 0 0 1px color-mix(in srgb, var(--v-a1) 60%, transparent) inset, 0 0 30px color-mix(in srgb, var(--v-a1) 18%, transparent); }
.v-btn.v-pericolo { background: linear-gradient(115deg, var(--v-errore), var(--v-rischio-b)); color: #fff; box-shadow: 0 10px 36px color-mix(in srgb, var(--v-rischio) 35%, transparent); }
.v-btn.v-pieno { width: 100%; }
.v-btn.v-piccolo { padding: 8px 16px; font-size: 0.9rem; }
/* pulsanti fatti con un link: il colore dei link della pagina (html.v a) non vale, il testo resta leggibile */
html.v a.v-btn, html.v a.v-btn:hover { color: var(--v-su-colore); }
html.v a.v-btn.v-fantasma { color: var(--v-testo); }
html.v a.v-btn.v-fantasma:hover { color: var(--v-forte); }
html.v a.v-btn.v-pericolo, html.v a.v-btn.v-pericolo:hover { color: #fff; }
.v-link { background: none; border: 0; padding: 0; color: var(--v-a1); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.v-link:hover { color: var(--v-forte); }

/* Riquadri. Sopra lo sciame niente vetro opaco o sfocato: le particelle devono restare visibili.
   .v-velo = testo trasparente con un velo scuro morbido e due angoli luminosi (come i capitoli della homepage);
   .v-scheda = riquadro leggero per contenuti e liste; .v-scheda.v-solida = moduli e finestre (leggibilita' prima). */
.v-velo { position: relative; isolation: isolate; padding: 30px 30px 26px; }
.v-velo::after { content: ""; position: absolute; inset: -14% -10%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--v-nero) 52%, transparent), color-mix(in srgb, var(--v-nero) 30%, transparent) 58%, transparent); }
.v-velo::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.9;
  background:
    linear-gradient(var(--v-a1), var(--v-a1)) left top / 26px 1px no-repeat,
    linear-gradient(var(--v-a1), var(--v-a1)) left top / 1px 26px no-repeat,
    linear-gradient(var(--v-a3), var(--v-a3)) right bottom / 26px 1px no-repeat,
    linear-gradient(var(--v-a3), var(--v-a3)) right bottom / 1px 26px no-repeat;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--v-a1) 70%, transparent)); }
.v-scheda { position: relative; padding: 22px 24px; border-radius: var(--v-r-l); color: var(--v-testo);
  background: linear-gradient(160deg, color-mix(in srgb, var(--v-scheda-a) 28%, transparent), color-mix(in srgb, var(--v-scheda-b) 55%, transparent)); border: 1px solid var(--v-linea);
  box-shadow: 0 30px 70px color-mix(in srgb, var(--v-ombra) 30%, transparent); }
a.v-scheda { display: block; text-decoration: none; transition: box-shadow .35s, border-color .35s; }
a.v-scheda:hover { color: var(--v-testo); border-color: color-mix(in srgb, var(--v-a1) 45%, transparent);
  box-shadow: 0 30px 90px color-mix(in srgb, var(--v-a2) 30%, transparent); }
.v-scheda.v-solida { background: linear-gradient(165deg, color-mix(in srgb, var(--v-pannello-a) 92%, transparent), color-mix(in srgb, var(--v-pannello-b) 95%, transparent)); border: 0;
  box-shadow: 0 40px 120px color-mix(in srgb, var(--v-ombra) 55%, transparent), 0 0 0 1px var(--v-linea); }
.v-scheda.v-solida::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--v-grad); opacity: 0.85; }
.v-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }

/* campi dei moduli */
.v-campo { display: block; margin: 16px 0; }
.v-campo > span, .v-campo > label { display: block; font-weight: 500; margin: 0 0 6px; color: var(--v-testo); }
.v-input, .v-campo input:not([type=checkbox]):not([type=radio]), .v-campo textarea, .v-campo select {
  width: 100%; padding: 12px 14px; border-radius: var(--v-r-s); font: inherit; color: var(--v-testo);
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--v-linea); transition: border-color .2s, box-shadow .2s; }
.v-campo textarea { min-height: 7em; resize: vertical; }
.v-input:focus, .v-campo input:focus, .v-campo textarea:focus, .v-campo select:focus { outline: none;
  border-color: color-mix(in srgb, var(--v-a1) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-a1) 18%, transparent); }
.v-campo .v-errore-campo { color: var(--v-errore); font-size: 0.9rem; margin: 6px 0 0; }
.v-check { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 12px 14px; border-radius: var(--v-r-s);
  border: 1px solid color-mix(in srgb, var(--v-a1) 25%, transparent); background: color-mix(in srgb, var(--v-a1) 5%, transparent); font-size: 0.93rem; cursor: pointer; }
.v-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--v-a1); flex: none; }

/* avvisi */
.v-avviso { margin: 14px 0; padding: 12px 16px; border-radius: 0 var(--v-r-s) var(--v-r-s) 0; border-left: 3px solid var(--v-a1);
  background: color-mix(in srgb, var(--v-a1) 6%, transparent); }
.v-avviso.v-ok { border-color: var(--v-ok); background: color-mix(in srgb, var(--v-ok) 8%, transparent); }
.v-avviso.v-errore { border-color: var(--v-errore); background: color-mix(in srgb, var(--v-errore) 8%, transparent); }
.v-avviso.v-attenzione { border-color: var(--v-attenzione); background: color-mix(in srgb, var(--v-attenzione) 7%, transparent); color: var(--v-attenzione-testo); }

/* Servizi esterni (obbligatorio prima di inviare contenuti a un'intelligenza artificiale o ad altri servizi esterni,
   vedi GUIDA-TEAM): cosa viene inviato, a chi, dove, con i collegamenti alle informative */
.v-esterno { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 12px 16px; border-radius: var(--v-r-s);
  border: 1px solid color-mix(in srgb, var(--v-lavanda) 35%, transparent); background: color-mix(in srgb, var(--v-viola) 7%, transparent); font-size: 0.92rem; color: var(--v-testo); }
.v-esterno::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--v-lavanda);
  box-shadow: 0 0 10px var(--v-lavanda); }
.v-esterno p { margin: 0; }
.v-esterno a { color: var(--v-lavanda); }
/* l'avviso in forma compatta (§5.7): l'indicatore resta sempre visibile nella pagina di lavoro, il testo completo e' a
   un clic. Tasto (testata o barra degli strumenti) + pannello: <button class="v-esterno-tasto" popovertarget="x">
   e <div class="v-esterno" id="x" popover>; .v-nuovo fa respirare il punto finche' la persona non lo apre */
.v-esterno-tasto { display: inline-flex; align-items: center; gap: 8px; font: 500 0.72rem/1 var(--v-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--v-tenue); padding: 7px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--v-lavanda) 35%, transparent);
  background: color-mix(in srgb, var(--v-nero) 45%, transparent); cursor: pointer; transition: color var(--v-rapido), border-color var(--v-rapido); }
.v-esterno-tasto::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--v-lavanda);
  box-shadow: 0 0 8px var(--v-lavanda); }
.v-esterno-tasto.v-nuovo::before { animation: v-respiro 2.4s ease-in-out infinite; }
.v-esterno-tasto:hover, .v-esterno-tasto[aria-expanded="true"] { color: var(--v-testo); border-color: color-mix(in srgb, var(--v-lavanda) 60%, transparent); }
/* il pannello del tasto: si apre sopra la pagina (come una finestra, la apre la persona) sotto la testata, a destra;
   Esc o un clic fuori lo chiudono. Nei browser senza popover resta visibile: meglio un avviso in piu' che uno in meno */
.v-esterno[popover] { position: fixed; inset: auto; top: 84px; right: 16px; margin: 0; width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 100px); overflow: auto; box-sizing: border-box; font-size: 0.86rem; line-height: 1.5; color: var(--v-testo);
  background: linear-gradient(165deg, color-mix(in srgb, var(--v-pannello-c) 97%, transparent), color-mix(in srgb, var(--v-pannello-b) 98%, transparent)); box-shadow: 0 24px 70px color-mix(in srgb, var(--v-ombra) 60%, transparent); }
.v-esterno[popover]:not(:popover-open) { display: none; }
/* la barra: una riga accanto alla funzione (fornitore e "anche fuori dall'UE" gia' visibili), il resto si apre sotto.
   <details class="v-esterno-barra"><summary>Le domande vanno a <strong>Fornitore</strong>, anche fuori dall'UE</summary>
   <p>testo completo e collegamenti</p></details> */
.v-esterno-barra { margin: 12px 0; border-radius: var(--v-r-s); border: 1px solid color-mix(in srgb, var(--v-lavanda) 28%, transparent); background: color-mix(in srgb, var(--v-viola) 5%, transparent);
  font-size: 0.86rem; line-height: 1.5; color: var(--v-tenue); }
.v-esterno-barra > summary { display: block; position: relative; padding: 8px 96px 8px 32px; cursor: pointer; list-style: none; border-radius: inherit; }
.v-esterno-barra > summary::-webkit-details-marker { display: none; }
.v-esterno-barra > summary::before { content: ""; position: absolute; left: 14px; top: calc(8px + 0.75em - 4px); width: 8px; height: 8px;
  border-radius: 50%; background: var(--v-lavanda); box-shadow: 0 0 8px var(--v-lavanda); }
.v-esterno-barra > summary::after { content: "dettagli"; position: absolute; right: 14px; top: 8px; line-height: 1.29rem;
  font: 500 0.68rem/1.29rem var(--v-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--v-lavanda); }
.v-esterno-barra[open] > summary::after { content: "chiudi"; }
/* pagine non in italiano (<html lang>): le etichette del kit in inglese */
:root:not(:lang(it)) .v-esterno-barra > summary::after { content: "details"; }
:root:not(:lang(it)) .v-esterno-barra[open] > summary::after { content: "close"; }
.v-esterno-barra > :not(summary) { margin: 0; padding: 0 14px 12px 32px; color: var(--v-testo); }
.v-esterno-barra a { color: var(--v-lavanda); }
/* risultato prodotto con l'intelligenza artificiale */
.v-generato { display: inline-flex; align-items: center; gap: 6px; font: 500 0.7rem var(--v-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--v-lavanda); padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--v-lavanda) 40%, transparent); }
.v-generato::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

/* finestre (dialog) */
dialog.v-finestra { width: min(480px, calc(100vw - 32px)); padding: 26px 26px 24px; border: 0; border-radius: 26px; color: var(--v-testo);
  background: linear-gradient(165deg, color-mix(in srgb, var(--v-pannello-a) 95%, transparent), color-mix(in srgb, var(--v-pannello-b) 97%, transparent)); box-shadow: 0 40px 120px color-mix(in srgb, var(--v-ombra) 60%, transparent), 0 0 0 1px var(--v-linea); }
dialog.v-finestra::backdrop { background: color-mix(in srgb, var(--v-nero) 62%, transparent); }
dialog.v-finestra[open] { animation: v-entra var(--v-medio) var(--v-curva); }
@keyframes v-entra { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: none; } }

/* tela dello sciame di un'app (forme.js): fissa dietro i contenuti, alta come lo schermo con la barra del browser
   nascosta (niente sobbalzi sul telefono) */
.v-sciame { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; display: block; }

/* ------------------------------------------------------------------ scorrimento: il filo (filo.js) */
/* al posto della barra del browser, come su veiora.it: sul bordo destro un filo di luce, una perla che scorre con la
   pagina, la luce gia' percorsa sopra di lei nei colori dell'app, un nodo per ogni sezione col suo nome (si legge
   arrivando nella sezione e col puntatore sul filo). La barra del browser sparisce solo dove il filo c'e' davvero
   (html.v-con-filo per la pagina, .v-senza-barra per un'area interna): senza filo.js resta quella normale */
html.v-con-filo, .v-senza-barra { scrollbar-width: none; }
html.v-con-filo::-webkit-scrollbar, html.v-con-filo body::-webkit-scrollbar, .v-senza-barra::-webkit-scrollbar { display: none; width: 0; height: 0; }
.v-filo { position: fixed; right: clamp(10px, 1.6vw, 24px); top: 50%; z-index: 15; width: 24px; height: min(56vh, 520px); transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .6s ease; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.v-filo.v-filo-area { top: var(--v-filo-centro, 50%); right: calc(var(--v-filo-destra, 0px) + 6px); height: var(--v-filo-altezza, 50vh); }
.v-filo.v-serve { opacity: 1; pointer-events: auto; }
.v-filo::before { content: ""; position: absolute; left: 50%; top: -14px; bottom: -14px; width: 1px; transform: translateX(-50%);
  background: linear-gradient(transparent, color-mix(in srgb, var(--v-linea-tinta) 22%, transparent) 14%, color-mix(in srgb, var(--v-linea-tinta) 22%, transparent) 86%, transparent); }
.v-filo-luce { position: absolute; left: 50%; top: 0; width: 1px; height: calc(var(--p, 0) * 100%); transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--v-a1) 75%, transparent) 30%, var(--v-a3));
  box-shadow: 0 0 6px color-mix(in srgb, var(--v-a1) 45%, transparent); }
.v-filo-perla { position: absolute; left: 50%; top: calc(var(--p, 0) * 100%); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, color-mix(in srgb, var(--v-a1) 55%, #fff) 38%, transparent 72%);
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--v-a1) 55%, transparent), 0 0 26px 7px color-mix(in srgb, var(--v-a3) 30%, transparent);
  transition: transform .3s; }
.v-filo:hover .v-filo-perla, .v-filo.v-trascina .v-filo-perla { transform: scale(1.35); }
.v-filo.v-trascina { cursor: grabbing; }
/* il nodo: una piccola perla cerchiata; quello della sezione in cui sei si accende nel primo colore dell'app */
.v-filo-nodo { position: absolute; left: 50%; top: calc(var(--q, 0) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px;
  color: color-mix(in srgb, var(--v-tenue) 55%, transparent); transition: color .5s, transform .5s, filter .5s; }
.v-filo-nodo::before { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; border: 1.25px solid currentColor; background: var(--v-nero); }
/* nodo col disegno della sua sezione (opzione disegno di filo.js) al posto del cerchio */
.v-filo-nodo.v-disegno::before { content: none; }
.v-filo-nodo svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.v-filo-nodo em { position: absolute; right: calc(100% + 12px); top: 50%; transform: translate(6px, -50%); font: 500 0.64rem/1 var(--v-mono); font-style: normal;
  letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap; color: var(--v-tenue); opacity: 0; pointer-events: none;
  text-shadow: 0 0 8px color-mix(in srgb, var(--v-nero) 95%, transparent), 0 0 18px color-mix(in srgb, var(--v-nero) 90%, transparent); transition: opacity .45s, transform .45s, color .45s; }
.v-filo-nodo.v-qui { color: var(--v-a1); transform: scale(1.18); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--v-a1) 85%, transparent)); }
.v-filo-nodo.v-qui::before { background: currentColor; }
.v-filo-nodo.v-qui em { color: var(--v-testo); }
.v-filo.v-annuncia .v-filo-nodo.v-qui em { opacity: 0.9; transform: translate(0, -50%); }
.v-filo:hover .v-filo-nodo em, .v-filo.v-trascina .v-filo-nodo em { opacity: 0.8; transform: translate(0, -50%); }
.v-filo-nodo:hover { color: var(--v-forte); }
/* col dito (o su schermi stretti) il filo e' sottile e si vede solo mentre la pagina scorre */
@media (hover: none), (max-width: 720px) {
  .v-filo { right: 4px; width: 7px; height: 44vh; }
  .v-filo.v-filo-area { right: calc(var(--v-filo-destra, 0px) + 2px); }
  .v-filo.v-serve { opacity: 0; pointer-events: none; }
  .v-filo.v-serve.v-scorre { opacity: 0.9; transition-duration: .2s; }
  .v-filo-perla { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
  .v-filo-nodo { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: currentColor; }
  .v-filo-nodo::before, .v-filo-nodo svg, .v-filo-nodo em { display: none; }
}
/* aree piccole che scorrono (menu, elenchi brevi, campi di testo): una barra sottile e scura invece di quella chiara
   del sistema (facoltativa, per le aree che non hanno il filo) */
.v-barra-sottile { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--v-linea-tinta) 28%, transparent) transparent; }
.v-barra-sottile::-webkit-scrollbar { width: 6px; height: 6px; }
.v-barra-sottile::-webkit-scrollbar-thumb { border-radius: 6px; background: color-mix(in srgb, var(--v-linea-tinta) 28%, transparent); }
.v-barra-sottile::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ primo accesso: il tour (tour.js) */
/* la prima volta nell'app: il resto della pagina si vela, la parte di cui si parla resta in luce dentro un anello, un
   filo di luce la lega al riquadro col testo (perle dei passi, Salta, Indietro/Avanti). Sopra testata e filo, sotto la
   copertura dei passaggi. Niente sfocature; sul telefono il riquadro sta in basso (o in alto) a tutta larghezza */
.v-tour { position: fixed; inset: 0; z-index: 900; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  opacity: 0; transition: opacity var(--v-medio) ease; }
.v-tour.v-aperto { opacity: 1; }
.v-tour-velo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
.v-tour-buio { fill: color-mix(in srgb, var(--v-nero) 72%, transparent); }
.v-tour-filo { stroke-width: 1.2; stroke-linecap: round; }
.v-tour-g1 { stop-color: var(--v-a1); }
.v-tour-g2 { stop-color: var(--v-a3); }
.v-tour-alone { fill: color-mix(in srgb, var(--v-a1) 32%, transparent); }
.v-tour-perla { fill: #fff; }
.v-tour-velo.v-senza-filo .v-tour-filo, .v-tour-velo.v-senza-filo .v-tour-alone, .v-tour-velo.v-senza-filo .v-tour-perla { display: none; }
.v-tour-anello { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 14px; pointer-events: none; transition: opacity .3s;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--v-a1) 85%, transparent), 0 0 26px 3px color-mix(in srgb, var(--v-a1) 30%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--v-a1) 14%, transparent); }
.v-tour-anello::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 34px 6px color-mix(in srgb, var(--v-a3) 26%, transparent); animation: v-respiro 2.4s ease-in-out infinite; }
.v-tour-anello.v-spento { opacity: 0; }
.v-tour-fumetto { position: absolute; left: 0; top: 0; box-sizing: border-box; width: min(360px, calc(100vw - 24px)); max-height: calc(100vh - 24px);
  overflow: auto; padding: 16px 20px 18px; border-radius: 22px; color: var(--v-testo);
  background: linear-gradient(165deg, color-mix(in srgb, var(--v-pannello-a) 97%, transparent), color-mix(in srgb, var(--v-pannello-b) 98%, transparent)); box-shadow: 0 30px 90px color-mix(in srgb, var(--v-ombra) 55%, transparent), 0 0 0 1px var(--v-linea);
  transition: opacity .25s ease, transform .4s var(--v-curva); }
.v-tour-fumetto::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: var(--v-grad); opacity: 0.85; }
.v-tour-fumetto.v-via { opacity: 0; transform: translateY(6px); pointer-events: none; transition-duration: .15s; }
.v-tour-fumetto.v-centro { width: min(420px, calc(100vw - 24px)); }
.v-tour .v-tour-fumetto:focus, .v-tour .v-tour-fumetto:focus-visible { outline: none; border-radius: 22px; }   /* il riquadro prende il fuoco a ogni passo */
.v-tour-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.v-tour-perle { display: flex; gap: 7px; margin: 0; padding: 0; list-style: none; }
.v-tour-perle li { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--v-tenue) 30%, transparent); transition: background .3s, box-shadow .3s, transform .3s; }
.v-tour-perle li.v-fatto { background: color-mix(in srgb, var(--v-a1) 50%, transparent); }
.v-tour-perle li.v-qui { background: var(--v-a1); box-shadow: 0 0 8px var(--v-a1); transform: scale(1.3); }
.v-tour-salta { margin: -10px -6px -10px 0; padding: 12px 6px; border: 0; background: none; cursor: pointer; font: 500 0.66rem/1 var(--v-mono);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--v-tenue); }
.v-tour-salta:hover { color: var(--v-forte); }
.v-tour .v-tour-titolo { margin: 0 0 6px; font: 700 1.05rem/1.3 var(--v-display); letter-spacing: 0; }
.v-tour-testo p { margin: 0 0 8px; font-size: 0.95rem; line-height: 1.55; }
.v-tour-testo p:last-child { margin-bottom: 0; }
.v-tour-azioni { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.v-tour-azioni [hidden] { display: none; }
@media (hover: none) { .v-tour-azioni .v-btn { min-height: 44px; } }
@media (max-width: 560px) and (min-height: 481px) { .v-tour-fumetto, .v-tour-fumetto.v-centro { width: calc(100vw - 24px); } }

/* ------------------------------------------------------------------ la Guida dell'app (guida-app.js) */
/* il tasto «?» in testata, subito prima della lingua: stessa forma del selettore della lingua (sui telefoni tondo) */
.v-aiuto { display: inline-flex; align-items: center; gap: 9px; box-sizing: border-box; min-height: 46px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1px solid var(--v-linea); background: var(--v-superficie); font: 500 0.72rem/1 var(--v-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--v-testo); text-decoration: none; transition: border-color .3s, box-shadow .3s, color .2s; }
html.v a.v-aiuto { color: var(--v-testo); text-decoration: none; }
.v-aiuto:hover, .v-aiuto[aria-current="page"] { border-color: color-mix(in srgb, var(--v-ciano) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--v-ciano) 25%, transparent); }
html.v a.v-aiuto:hover { color: var(--v-forte); }
.v-aiuto:focus-visible { border-radius: 999px; }
.v-aiuto-segno { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 0.76rem/1 var(--v-display); letter-spacing: 0;
  color: var(--v-ciano); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--v-ciano) 85%, transparent), 0 0 12px color-mix(in srgb, var(--v-ciano) 50%, transparent); }
.v-aiuto-nome { text-box: trim-both cap alphabetic; margin-right: -0.14em; }
@media (max-width: 480px) {
  .v-aiuto { width: 46px; padding: 0; justify-content: center; }
  .v-aiuto-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .v-aiuto-segno { width: 24px; height: 24px; }
}
/* l'aiuto sul posto: un piccolo «?» accanto a una funzione, porta alla sua voce della Guida (/guida#voce) */
.v-aiuto-qui { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; margin: 0 0 0 8px; border-radius: 50%;
  vertical-align: 0.1em; font: 700 0.68rem/1 var(--v-display); letter-spacing: 0; color: var(--v-tenue); text-decoration: none;
  box-shadow: 0 0 0 1px var(--v-linea-forte); transition: color .2s, box-shadow .3s; }
.v-aiuto-qui::after { content: ""; position: absolute; inset: -11px; }
html.v a.v-aiuto-qui { color: var(--v-tenue); text-decoration: none; }
html.v a.v-aiuto-qui:hover { color: var(--v-forte); box-shadow: 0 0 0 1px var(--v-a1), 0 0 12px color-mix(in srgb, var(--v-a1) 40%, transparent); }
/* la pagina /guida: apertura sopra lo sciame (velo), poi il sommario a lato e le sezioni su un fondo pieno (si legge a lungo) */
.v-guida { position: relative; z-index: 1; box-sizing: border-box; max-width: 1120px; margin: 0 auto; padding: 8px clamp(16px, 5vw, 48px) 80px; }
.v-guida-testa { max-width: 720px; margin: 0 0 34px; }
.v-guida-testa .v-guida-breve { font-size: 1.08rem; max-width: 62ch; }
.v-guida-stato { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 0; }
.v-guida-tour { margin: 18px 0 0; }
.v-guida-giu { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.v-guida-indice { position: sticky; top: 100px; }
.v-guida-indice summary { list-style: none; padding: 6px 0 12px; font: 500 0.7rem/1 var(--v-mono); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--v-spento); pointer-events: none; }
.v-guida-indice summary::-webkit-details-marker { display: none; }
.v-guida-indice ol { margin: 0; padding: 0; list-style: none; counter-reset: voce; border-left: 1px solid var(--v-linea); }
.v-guida-indice li { counter-increment: voce; }
html.v .v-guida-indice a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 1px solid transparent; color: var(--v-tenue);
  text-decoration: none; font-size: 0.92rem; line-height: 1.35; transition: color .2s, border-color .2s; }
.v-guida-indice a::before { content: counter(voce, decimal-leading-zero); margin-right: 10px; font: 500 0.66rem var(--v-mono); letter-spacing: 0.1em; color: var(--v-spento); }
html.v .v-guida-indice a:hover { color: var(--v-forte); border-left-color: var(--v-a1); }
.v-guida-corpo { position: relative; box-sizing: border-box; max-width: 760px; padding: 4px clamp(18px, 4vw, 40px) 8px; border-radius: var(--v-r-l);
  background: linear-gradient(165deg, color-mix(in srgb, var(--v-pannello-a) 90%, transparent), color-mix(in srgb, var(--v-pannello-b) 94%, transparent)); box-shadow: 0 40px 120px color-mix(in srgb, var(--v-ombra) 50%, transparent), 0 0 0 1px var(--v-linea); }
.v-guida-corpo::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; background: var(--v-grad); opacity: 0.85; }
.v-guida-sezione { padding: 30px 0 24px; scroll-margin-top: 100px; }
.v-guida-sezione + .v-guida-sezione { border-top: 1px solid var(--v-linea); }
.v-guida .v-guida-sezione h2 { margin: 6px 0 14px; font-size: clamp(1.2rem, 2.2vw, 1.45rem); }
.v-guida-sezione p { margin: 0 0 12px; }
.v-guida-sezione ul:not(.v-novita), .v-guida-sezione ol:not(.v-passi) { margin: 0 0 14px; padding-left: 1.3em; }
.v-guida-sezione li { margin: 0 0 6px; }
.v-guida-sezione li::marker { color: var(--v-a1); }
/* primi passi: pochi passi numerati (gli stessi dell'email di benvenuto) */
.v-passi { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.v-passi li { position: relative; margin: 0; padding: 14px 16px 14px 58px; counter-increment: passo; border-radius: var(--v-r-m); border: 1px solid var(--v-linea);
  background: color-mix(in srgb, var(--v-nero) 35%, transparent); }
.v-passi li::before { content: counter(passo, decimal-leading-zero); position: absolute; left: 18px; top: 16px; font: 500 0.72rem/1.4 var(--v-mono);
  letter-spacing: 0.14em; color: var(--v-a1); text-shadow: 0 0 14px color-mix(in srgb, var(--v-a1) 60%, transparent); }
.v-passi strong { display: block; margin: 0 0 4px; font: 700 0.98rem/1.35 var(--v-display); }
.v-passi span { color: var(--v-tenue); }
/* domande frequenti: si aprono una per una */
.v-domanda { border-bottom: 1px solid var(--v-linea); scroll-margin-top: 100px; }
.v-domanda > summary { position: relative; padding: 13px 34px 13px 0; cursor: pointer; list-style: none; font-weight: 500; }
.v-domanda > summary::-webkit-details-marker { display: none; }
.v-domanda > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid var(--v-tenue);
  border-width: 0 1.4px 1.4px 0; transform: rotate(45deg); transition: transform .25s, margin .25s, border-color .2s; }
.v-domanda[open] > summary::after { margin-top: -1px; transform: rotate(-135deg); border-color: var(--v-a1); }
.v-domanda > summary:hover { color: var(--v-forte); }
.v-domanda > div { padding: 0 0 12px; color: var(--v-tenue); }
.v-domanda > div > :last-child { margin-bottom: 0; }
/* novita': la data in monospazio, il testo accanto */
.v-novita { margin: 0; padding: 0; list-style: none; }
.v-novita li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 2px 18px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--v-linea); }
.v-novita li:last-child { border-bottom: 0; }
.v-novita time { font: 500 0.72rem/1.9 var(--v-mono); letter-spacing: 0.08em; color: var(--v-a1); }
.v-novita div > :last-child { margin-bottom: 0; }
.v-guida-figura { margin: 6px 0 16px; }
.v-guida-figura img { display: block; max-width: 100%; height: auto; border-radius: var(--v-r-m); box-shadow: 0 0 0 1px var(--v-linea); }
.v-guida-figura figcaption { margin-top: 8px; }
@media (max-width: 960px) {
  .v-guida-giu { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .v-guida-indice { position: static; }
  .v-guida-indice details { border: 1px solid var(--v-linea); border-radius: var(--v-r-m); background: var(--v-superficie); }
  .v-guida-indice summary { position: relative; padding: 15px 16px; cursor: pointer; pointer-events: auto; color: var(--v-tenue); }
  .v-guida-indice summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid var(--v-tenue);
    border-width: 0 1.4px 1.4px 0; transform: rotate(45deg); transition: transform .25s, margin .25s; }
  .v-guida-indice details[open] summary::after { margin-top: -1px; transform: rotate(-135deg); }
  .v-guida-indice ol { padding: 0 8px 10px; border-left: 0; }
  html.v .v-guida-indice a { margin: 0; padding: 10px 8px; border-left: 0; }
  .v-guida-corpo { max-width: none; }
}
@media (max-width: 560px) {
  .v-novita li { grid-template-columns: minmax(0, 1fr); }
  .v-passi li { padding-left: 50px; }
  .v-passi li::before { left: 15px; }
}

/* ------------------------------------------------------------------ la voce degli utenti (voce.js) */
/* il tasto «Scrivici» in testata, prima del «?» della Guida: stessa forma (sui telefoni tondo) */
.v-voce-tasto { display: inline-flex; align-items: center; gap: 9px; box-sizing: border-box; min-height: 46px; padding: 0 16px 0 12px; border-radius: 999px;
  border: 1px solid var(--v-linea); background: var(--v-superficie); font: 500 0.72rem/1 var(--v-mono); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--v-testo); text-decoration: none; transition: border-color .3s, box-shadow .3s, color .2s; }
html.v a.v-voce-tasto { color: var(--v-testo); text-decoration: none; }
.v-voce-tasto:hover { border-color: color-mix(in srgb, var(--v-lavanda) 60%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--v-lavanda) 28%, transparent); }
html.v a.v-voce-tasto:hover { color: var(--v-forte); }
.v-voce-tasto:focus-visible { border-radius: 999px; }
.v-voce-tasto-segno { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--v-lavanda); }
.v-voce-tasto-segno svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--v-lavanda) 55%, transparent)); }
.v-voce-tasto-segno .v-voce-perla { fill: currentColor; stroke: none; }
.v-voce-tasto-nome { text-box: trim-both cap alphabetic; margin-right: -0.14em; }
@media (max-width: 480px) {
  .v-voce-tasto { width: 46px; padding: 0; justify-content: center; }
  .v-voce-tasto-nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* la finestra: sopra la pagina, i tre generi come schede da scegliere, ognuna col suo colore */
dialog.v-voce { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 24px 26px 22px; overflow: auto;
  overflow-x: hidden; overscroll-behavior: contain;
  --v-voce-c: var(--v-a1); }
dialog.v-voce[data-genere="errore"] { --v-voce-c: var(--v-errore); }
dialog.v-voce[data-genere="idea"] { --v-voce-c: var(--v-ambra); }
dialog.v-voce[data-genere="grazie"] { --v-voce-c: var(--v-ciano); }
.v-voce .v-voce-errore { --c: var(--v-errore); }
.v-voce .v-voce-idea { --c: var(--v-ambra); }
.v-voce .v-voce-grazie { --c: var(--v-ciano); }
.v-voce-testa { position: relative; padding-right: 44px; }
.v-voce-testa .v-sopratitolo { margin: 0; }
.v-voce .v-voce-titolo { margin: 8px 0 18px; font: 700 1.28rem/1.25 var(--v-display); letter-spacing: -0.005em; }
.v-voce-chiudi { position: absolute; top: -6px; right: -8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent;
  color: var(--v-tenue); font: 1rem/1 var(--v-corpo); cursor: pointer; }
.v-voce-chiudi:hover { color: var(--v-forte); background: rgba(255, 255, 255, 0.06); }
.v-voce-generi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.v-voce-scegli { padding: 0; margin: 0 0 8px; font-weight: 500; }
.v-voce-genere { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 8px 12px; border-radius: 16px;
  border: 1px solid var(--v-linea); background: rgba(255, 255, 255, 0.025); text-align: center; font-size: 0.9rem; font-weight: 500; line-height: 1.25;
  cursor: pointer; transition: border-color .25s, box-shadow .25s, background-color .25s, transform var(--v-rapido) var(--v-curva); }
.v-voce-genere input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.v-voce-nome { text-wrap: balance; }
.v-voce-genere:hover { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.v-voce-genere:active { transform: scale(0.98); }
.v-voce-genere:has(input:checked) { border-color: var(--c); background-color: color-mix(in srgb, var(--c) 10%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--c) 24%, transparent), 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent) inset; }
.v-voce-genere:has(input:focus-visible) { outline: 2px solid var(--v-a1); outline-offset: 3px; }
.v-voce-segno { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--c);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 70%, transparent), 0 0 16px color-mix(in srgb, var(--c) 30%, transparent); transition: box-shadow .3s; }
.v-voce-segno svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.v-voce-genere:has(input:checked) .v-voce-segno { box-shadow: 0 0 0 1.5px var(--c), 0 0 22px color-mix(in srgb, var(--c) 60%, transparent); }
.v-voce-campo { margin: 18px 0 0; position: relative; }
.v-voce-campo textarea { box-sizing: border-box; width: 100%; min-height: 8.5em; }
.v-voce-campo > .v-voce-conta { display: block; margin: 6px 2px 0; text-align: right; color: var(--v-spento); font: 400 0.72rem var(--v-mono); }
.v-voce-campo > .v-voce-conta.v-voce-quasi { color: var(--v-attenzione); }
.v-voce-tecnici { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin: 8px 0 0; }
.v-voce-tecnici .v-check, .v-voce-avvisami { margin: 6px 0; padding: 0; border: 0; background: none; }
.v-voce-quali { font-size: 0.86rem; }
.v-voce-elenco { flex-basis: 100%; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; max-height: 170px; overflow: auto;
  margin: 6px 0 4px; padding: 10px 12px; border-radius: var(--v-r-s); border: 1px solid var(--v-linea); background: color-mix(in srgb, var(--v-nero) 40%, transparent); font-size: 0.82rem;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--v-linea-tinta) 28%, transparent) transparent; }
.v-voce-elenco[hidden] { display: none; }
.v-voce-elenco dt { color: var(--v-tenue); }
.v-voce-elenco dd { margin: 0; overflow-wrap: anywhere; font: 0.78rem/1.5 var(--v-mono); }
.v-voce-nota { margin: 12px 0 0; font-size: 0.84rem; }
.v-voce-avviso { margin: 14px 0 0; font-size: 0.92rem; }
.v-voce-avviso[hidden] { display: none; }
.v-voce-azioni { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin: 18px 0 0; }
.v-voce-azioni [hidden] { display: none; }
.v-voce-modulo[hidden], .v-voce-fine[hidden] { display: none; }
.v-voce-svanisce > * { opacity: 0; transition: opacity .35s; }
/* dopo l'invio: le parole diventano perle che si raccolgono in un anello, poi il grazie sotto l'anello */
.v-voce-tela { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .45s ease; }
.v-voce-tela.v-voce-tela-attiva { opacity: 1; }
.v-voce-fine { text-align: center; padding: 8px 6px 4px; animation: v-voce-appare .45s ease both; }
@keyframes v-voce-appare { from { opacity: 0; } }
.v-voce-fine-ferma::before { content: ""; display: block; width: 58px; height: 58px; margin: 6px auto 20px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--v-voce-c), 0 0 26px color-mix(in srgb, var(--v-voce-c) 55%, transparent), inset 0 0 18px color-mix(in srgb, var(--v-voce-c) 35%, transparent); }
.v-voce .v-voce-fine-titolo { margin: 0 0 8px; font: 700 1.5rem/1.2 var(--v-display); }
.v-voce .v-voce-fine-titolo:focus, .v-voce .v-voce-fine-titolo:focus-visible { outline: none; }
.v-voce-fine-testo { margin: 0 auto; max-width: 40ch; color: var(--v-tenue); }
.v-voce-fine .v-voce-azioni { justify-content: center; }
@media (max-width: 560px) {
  /* sui telefoni in alto, cosi' la tastiera non copre il testo che si scrive */
  dialog.v-voce { width: calc(100vw - 20px); margin: max(10px, env(safe-area-inset-top)) auto auto; padding: 20px 18px 18px; border-radius: 22px;
    max-height: calc(100dvh - 20px); }
  .v-voce .v-voce-titolo { font-size: 1.1rem; margin-bottom: 14px; }
  .v-voce-genere { padding: 12px 4px 10px; font-size: 0.8rem; gap: 7px; }
  .v-voce-segno { width: 32px; height: 32px; }
  .v-voce-segno svg { width: 17px; height: 17px; }
  .v-voce-campo textarea { min-height: 6.5em; }
  .v-voce-azioni .v-btn { flex: 1 1 auto; }
}

/* nella Guida (sezione «Ti serve altro?»): il tasto «Scrivici» */
.v-guida-scrivi { margin: 18px 0 0; }

/* ------------------------------------------------------------------ passaggi (ponte.js) */
/* copertura col varco: in partenza compare sopra la pagina, in arrivo c'e' gia' e sfuma sull'app pronta */
.v-ponte { position: fixed; inset: 0; z-index: 2147483000; background: var(--v-nero); opacity: 0; visibility: visible;
  transition: opacity var(--v-medio) ease; }
.v-ponte.v-attiva { opacity: 1; }
.v-ponte.v-sfuma { opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.v-ponte canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh; display: block; }
.v-ponte .v-testata { position: absolute; top: 0; left: 0; right: 0; }
/* testo sotto il varco: stessa distanza che su veiora.it e sulle pagine di accesso */
.v-ponte-testo { position: absolute; left: 16px; right: 16px; top: calc(44vh + min(40vmin, 33.3vh) + 8px); top: calc(44lvh + min(40vmin, 33.3lvh) + 8px);
  margin: 0; text-align: center; font: 500 0.78rem/1.5 var(--v-mono); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--v-ciano); text-shadow: 0 0 18px color-mix(in srgb, var(--v-ciano) 60%, transparent); animation: v-respiro 2.4s ease-in-out infinite; }
@keyframes v-respiro { 50% { opacity: 0.55; } }
/* arrivo: finche' l'app non e' pronta si vede solo il varco (nessun lampo della pagina sotto) */
html.v-arrivo { background: var(--v-nero) !important; }
html.v-arrivo body { visibility: hidden; }
html.v-arrivo .v-ponte { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .v-btn, .v-scheda, .v-ponte, dialog.v-finestra[open], .v-filo, .v-filo *, .v-tour, .v-tour *, .v-domanda > summary::after, .v-voce *, .v-voce-tasto { transition: none !important; animation: none !important; }
  .v-ponte-testo, .v-esterno-tasto.v-nuovo::before { animation: none; }
}

/* ================================================================== aspetto carta (html[data-tema="carta"])
   Veiora alla luce del giorno: la pagina e' carta di un bianco caldo che segue l'ora di chi guarda e le luci diventano
   inchiostri (pigmenti scuri quanto basta per leggersi: almeno 4,5:1 anche sulla carta della sera). Lo attiva tema.js
   (/_veiora/v1/tema.js, nell'intestazione: la scelta e' quella fatta su veiora.it, cookie veiora_tema; senza scelta
   segue il dispositivo). Le variabili sono le stesse della notte, rifatte: un'app che usa le --v-* (e non colori
   scritti a mano) cambia aspetto da sola. Lo sciame (sciame.js) disegna il varco in inchiostro sulla stessa carta. */
html[data-tema="carta"] {
  --carta: rgb(247, 243, 234); --sole: rgba(255, 251, 238, 0.42); --sole-x: 55%; --sole-y: -16%;   /* senza tema.js: mezzogiorno */
  --v-nero: var(--carta);
  --v-fondo: var(--carta);
  --v-superficie: color-mix(in srgb, #fffdf8 72%, transparent);
  --v-superficie-forte: color-mix(in srgb, #fffdf8 94%, transparent);
  --v-velo: color-mix(in srgb, var(--carta) 80%, transparent);   /* sulla carta il velo dietro i testi e' di carta */
  --v-linea: color-mix(in srgb, #2c2640 16%, transparent);
  --v-linea-forte: color-mix(in srgb, #2c2640 30%, transparent);
  --v-testo: #1d1a2e;     /* sulla carta della sera (la piu' scura): 15:1 */
  --v-tenue: #4d475f;     /* 7,2:1 */
  --v-spento: #6b6478;    /* 4,6:1, solo note e didascalie */
  --v-ciano: #0c6f80; --v-acqua: #0b7560; --v-cielo: #13689e; --v-pervinca: #3346b0; --v-viola: #5a37c8;
  --v-lavanda: #6a45bd; --v-magenta: #a8207a; --v-rosa: #ad2e5b; --v-ambra: #8a5a0a;
  --v-ok: #1d7449; --v-errore: #b3263e; --v-attenzione: #8a5a0a;
  --v-forte: #0f0c1d; --v-su-colore: #fff; --v-ombra: #a08a70; --v-linea-tinta: #2c2640; --v-orb-fondo: #2a1f5a;
  --v-attenzione-testo: #6b4708; --v-rischio: #a3205e; --v-rischio-b: #a3205e;
  --v-pannello-a: #fffefa; --v-pannello-b: #f9f4eb; --v-pannello-c: #fffefa; --v-menu-fondo: #fffdf8;
  --v-scheda-a: #fffdf8; --v-scheda-b: #f8f2e8;
  color-scheme: light;
}
/* la pagina: la carta, con la luce del giorno che entra da --sole-x/--sole-y e i bordi appena piu' scuri */
html.v[data-tema="carta"] body { background:
  radial-gradient(70vmax 58vmax at var(--sole-x) var(--sole-y), var(--sole), transparent 70%) fixed,
  radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(74, 52, 30, 0.10) 100%) fixed,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .31 0 0 0 0 .21 0 0 0 .63 -.26'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 200px 200px fixed,
  var(--v-nero); }
html.v[data-tema="carta"] ::selection { background: rgba(90, 55, 200, 0.2); color: var(--v-forte); }
/* niente luci sulla carta: al posto dei bagliori, ombre calde e leggere */
html[data-tema="carta"] .v-btn { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 8px 22px color-mix(in srgb, var(--v-a2) 24%, transparent); }
html[data-tema="carta"] .v-btn:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset, 0 12px 30px color-mix(in srgb, var(--v-a1) 26%, transparent); }
html[data-tema="carta"] .v-btn.v-fantasma { background: color-mix(in srgb, #fffdf8 55%, transparent); }
html[data-tema="carta"] .v-btn.v-fantasma:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--v-a1) 60%, transparent) inset, 0 6px 18px color-mix(in srgb, var(--v-a1) 14%, transparent); }
html[data-tema="carta"] .v-btn.v-pericolo { box-shadow: 0 8px 22px var(--v-rischio-ombra, rgba(163, 32, 70, 0.22)); }
html[data-tema="carta"] .v-lingua > summary:hover, html[data-tema="carta"] .v-lingua[open] > summary, html[data-tema="carta"] .v-aiuto:hover,
html[data-tema="carta"] .v-aiuto[aria-current="page"] {
  border-color: color-mix(in srgb, var(--v-ciano) 45%, transparent); box-shadow: 0 4px 14px rgba(74, 52, 30, 0.12); }
html[data-tema="carta"] .v-bandiera, html[data-tema="carta"] .v-lingua > summary .v-bandiera { box-shadow: 0 0 0 1.5px var(--carta), 0 0 0 3px color-mix(in srgb, var(--v-ciano) 70%, transparent); }
html[data-tema="carta"] .v-marchio i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--v-ciano) 16%, transparent), 0 0 0 6px color-mix(in srgb, var(--v-viola) 7%, transparent); }
/* campi: fogli bianchi sulla carta */
html[data-tema="carta"] .v-input, html[data-tema="carta"] .v-campo input:not([type=checkbox]):not([type=radio]),
html[data-tema="carta"] .v-campo textarea, html[data-tema="carta"] .v-campo select { background-color: #fffdf9; }
/* il filo: inchiostro, niente alone */
html[data-tema="carta"] .v-filo-luce { box-shadow: none; }
html[data-tema="carta"] .v-filo-perla { background: radial-gradient(circle, #fffdf8 0 26%, var(--v-a1) 34% 58%, transparent 64%);
  box-shadow: 0 1px 4px rgba(74, 52, 30, 0.3); }
html[data-tema="carta"] .v-filo-nodo { color: color-mix(in srgb, var(--v-testo) 42%, transparent); }
html[data-tema="carta"] .v-filo-nodo.v-qui { filter: none; }
html[data-tema="carta"] .v-filo-nodo em { text-shadow: 0 0 8px var(--carta), 0 0 3px var(--carta); }
/* il tour: la perla d'inchiostro, il resto della pagina velato di carta */
html[data-tema="carta"] .v-tour-perla { fill: var(--v-a1); }
html[data-tema="carta"] .v-tour-perle li.v-qui { box-shadow: none; }
/* lo sciame dell'app (forme.js): gocce d'inchiostro su una tela bianca che si moltiplica con la pagina */
.v-sciame.v-carta { mix-blend-mode: multiply; }
/* le isole di notte (data-notte) dentro la carta: la copertura dei passaggi verso e dalle app che hanno ancora solo la
   notte (ponte.js, VeioraTema.soloNotte); dentro tornano tutte le variabili della notte */
html[data-tema="carta"] [data-notte] { --v-nero: #04050a; --v-fondo: #070912; --v-superficie: rgba(14, 17, 32, 0.62); --v-superficie-forte: rgba(12, 14, 28, 0.9); --v-velo: rgba(4, 5, 10, 0.52); --v-linea: rgba(150, 170, 255, 0.18); --v-linea-forte: rgba(150, 170, 255, 0.32); --v-testo: #e9ecff; --v-tenue: #a3abcf; --v-spento: #7c84a8; --v-ciano: #5ef2ff; --v-acqua: #5fffd7; --v-cielo: #38bdf8; --v-pervinca: #7c9cff; --v-viola: #8b5cf6; --v-lavanda: #b388ff; --v-magenta: #ff5fd2; --v-rosa: #ff6fae; --v-ambra: #ffcf7a; --v-ok: #47cd89; --v-errore: #ff6b7d; --v-attenzione: #ffcf7a; --v-a1: var(--v-ciano); --v-a2: var(--v-viola); --v-a3: var(--v-magenta); --v-grad: linear-gradient(115deg, var(--v-a1), var(--v-a2) 50%, var(--v-a3)); --v-grad-veiora: linear-gradient(115deg, var(--v-ciano), var(--v-viola) 50%, var(--v-magenta)); --v-forte: #fff; --v-su-colore: #05060c; --v-ombra: #000; --v-linea-tinta: #96aaff; --v-orb-fondo: #1a1040; --v-attenzione-testo: #ffe7b8; --v-rischio: #ff466e; --v-rischio-b: #ff3d7f; --v-pannello-a: #161a34; --v-pannello-b: #080914; --v-pannello-c: #1a1434; --v-menu-fondo: #0a0c18; --v-scheda-a: #1a1e3c; --v-scheda-b: #060710; color-scheme: dark; }
html[data-tema="carta"] [data-notte] .v-marchio i { box-shadow: 0 0 12px var(--v-ciano), 0 0 30px var(--v-viola); }
html[data-tema="carta"] .v-ponte:not([data-notte]) .v-ponte-testo { text-shadow: 0 0 10px var(--carta), 0 0 3px var(--carta); }

/* ------------------------------------------------------------------ il selettore dell'aspetto (tema.js)
   VeioraTema.selettore() lo costruisce: <details class="tema v-tema"><summary> coi tre segni </summary><div class="tema-menu
   v-tema-menu"> tre pulsanti </div></details>. In testata accanto alla lingua; tema.js gestisce le voci (cambio senza
   ricaricare, scelta ricordata per tutto veiora) e mostra nel tasto il segno dell'aspetto scelto */
.v-tema { position: relative; }
.v-tema > summary { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--v-linea);
  background: var(--v-superficie); list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; color: var(--v-testo);
  transition: border-color .3s, box-shadow .3s, color .2s; }
.v-tema > summary::-webkit-details-marker { display: none; }
.v-tema > summary:hover, .v-tema[open] > summary { border-color: color-mix(in srgb, var(--v-ciano) 55%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--v-ciano) 25%, transparent); color: var(--v-forte); }
.v-tema svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v-tema svg .pieno { fill: currentColor; stroke: none; }
.v-tema > summary svg { display: none; }
.v-tema > summary[data-icona="auto"] .i-auto, .v-tema > summary[data-icona="carta"] .i-carta, .v-tema > summary[data-icona="notte"] .i-notte { display: block; }
.v-tema-menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 30; display: grid; gap: 2px; width: 272px; padding: 6px;
  border-radius: var(--v-r-m); border: 1px solid var(--v-linea); background: color-mix(in srgb, var(--v-menu-fondo) 96%, transparent);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--v-ombra) 50%, transparent); transform-origin: calc(100% - 22px) 0;
  animation: v-entra-lingua .24s var(--v-curva); }
.v-tema-menu::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; opacity: 0.7; background: var(--v-grad-veiora); }
.v-tema-menu > button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 12px; width: 100%; margin: 0; padding: 9px 12px;
  border: 0; border-radius: var(--v-r-s); background: none; cursor: pointer; text-align: left; color: var(--v-testo); font: 500 0.95rem/1.25 var(--v-corpo);
  letter-spacing: 0; transition: background-color .2s, color .2s; }
.v-tema-menu > button svg { grid-row: span 2; color: var(--v-tenue); transition: color .2s; }
.v-tema-menu > button small { grid-column: 2; color: var(--v-tenue); font-size: 0.78rem; font-weight: 400; }
.v-tema-menu > button:hover { background: color-mix(in srgb, var(--v-ciano) 8%, transparent); color: var(--v-forte); }
.v-tema-menu > button:hover svg, .v-tema-menu > button[aria-current="true"] svg { color: var(--v-ciano); }
.v-tema-menu > button:focus-visible { border-radius: var(--v-r-s); outline-offset: -2px; }
.v-tema-menu > button[aria-current="true"] { background: color-mix(in srgb, var(--v-ciano) 6%, transparent); cursor: default; }
.v-tema-menu > button[aria-current="true"]::after { content: ""; grid-column: 3; grid-row: 1 / span 2; width: 10px; height: 5px; margin: -3px 3px 0 0;
  border: solid var(--v-ciano); border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
@media (max-width: 480px) { .v-tema { position: static; } .v-tema-menu { right: var(--v-testata-lato); top: 64px; } }
@media (prefers-reduced-motion: reduce) { .v-tema-menu { animation: none; } }
html[data-tema="carta"] .v-tema > summary:hover, html[data-tema="carta"] .v-tema[open] > summary {
  border-color: color-mix(in srgb, var(--v-ciano) 45%, transparent); box-shadow: 0 4px 14px rgba(74, 52, 30, 0.12); }
html[data-tema="carta"] .v-tema-menu, html[data-tema="carta"] .v-lingua-menu { box-shadow: 0 20px 60px rgba(74, 52, 30, 0.18); }
/* il cambio di aspetto: la pagina nuova si allarga in un cerchio dal tasto (tema.js) */
html.tema-cambio::view-transition-old(root), html.tema-cambio::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.tema-cambio::view-transition-new(root) { z-index: 2; }