/* =========================================================================
   Runlix — sistema di design «strumento di misura»
   =========================================================================

   La pagina chiara è il RAPPORTO DI MISURA. Il tema scuro non è un'inversione
   inventata: sono i valori veri dell'app (App.axaml, MainWindow.axaml), così
   che in scuro il sito È lo strumento. Gli screenshot hanno fondo #0D0D10:
   su pagina chiara risaltano, su pagina scura si fondono con la superficie —
   ed è voluto in entrambi i casi.

   Cantastories (l'altro sito di casa) è scuro #0a0a0f, accento rosso, mesh
   gradient, glassmorphism. Qui non c'è niente di tutto ciò, apposta: prodotto
   diverso, pubblico diverso, promessa diversa.
   ========================================================================= */

:root {
  /* Superfici e testo — chiaro */
  --fondo:        #F6F6F4;
  --superficie:   #FFFFFF;
  --testo:        #101215;
  --secondario:   #5C6066;
  /* #8B9096 stava a 2,97:1 sul fondo chiaro — misurato, non stimato — e questo token
     porta i NUMERI delle misure, la data della misura e le etichette: proprio ciò che la
     pagina esiste per far leggere. #6B6F75 sta a 4,67:1 e passa AA restando il grigio più
     chiaro dei tre. */
  --terziario:    #6B6F75;
  --filetto:      #DCDDD9;
  --filetto-tenue:#E9EAE6;

  /* I tre accenti dell'app (blu #0A84FF, verde #30D158, ambra #FF9F0A),
     scuriti quanto basta a leggersi su fondo chiaro. Continuità vera. */
  --segnale:      #1B4D8F;
  --segnale-tenue:#E8EEF6;
  --verificato:   #1F6B45;
  --verificato-tenue:#E6F1EA;
  --aperto:       #8A5A0B;
  --aperto-tenue: #FAF0DC;
  --negato:       #9A2F2A;
  --negato-tenue: #F8E9E8;

  /* Tipografia */
  --display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --testo-f: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, "Courier New", monospace;

  /* Scala tipografica — rapporto 1.25, ancorata a 17px come l'app */
  --t-xs:   0.75rem;
  --t-s:    0.8125rem;
  --t-base: 1.0625rem;
  --t-m:    1.25rem;
  --t-l:    1.5rem;
  --t-xl:   1.9rem;
  --t-xxl:  2.6rem;

  /* Spazio — passo 4px */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4.5rem;

  /* Misure */
  /* La misura della riga, in `em` e NON in `ch`.
     ⚠️ `ch` è la larghezza dello ZERO, non del carattere medio, e in Inter lo zero è largo
     10,72px dove la prosa vera media 7,94 — misurato sulle pagine di questo sito, non stimato.
     Quindi `1ch` vale 1,35 caratteri, e il vecchio `68ch` dava righe da ~92 caratteri: molto
     oltre il comodo, che sta fra 60 e 75. È il difetto che l'owner sentiva come «un non so che
     di difficoltà di lettura» senza riuscire a nominarlo, il 2026-09-13.
     `em` si risolve sulla dimensione del testo dell'elemento, quindi 32em fa ~68 caratteri
     tanto nel corpo a 17px quanto in una nota a 13px: il conto dei caratteri resta lo stesso,
     che è ciò che conta per l'occhio. */
  --prosa: 32em;
  /* ⚠️ La stessa misura in rem, e serve per una ragione che costa un pomeriggio a chi non
     la sa: `em` è relativo al font dell'ELEMENTO. Su un paragrafo da 17px, 32em fa 544px e
     la misura è giusta; sullo stesso `max-width` messo su un h2 da 30px fa 960px, cioè
     nessun tetto. Il titolo usciva largo quanto la pagina mentre i suoi paragrafi stavano
     in mezzo, e sembrava un difetto di allineamento. */
  --misura: 34rem;
  --largo: 64rem;    /* tabelle, dati, griglie */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Valori presi dall'app, non inventati */
    --fondo:        #0D0D10;
    --superficie:   #12121A;
    --testo:        #F2F2F7;
    --secondario:   #8E8E9C;
    /* #6B6B78 (preso dall'app) stava a 3,7:1 sul fondo scuro. L'app può permetterselo:
       è una finestra vicina, sotto il controllo di chi la usa. Una pagina web no, e questo
       token porta i numeri delle misure. #797986 sta a 4,52:1: è il primo che passa AA
       tenendo la stessa inclinazione di tinta. */
    --terziario:    #797986;
    --filetto:      #20202C;
    --filetto-tenue:#1A1A24;

    --segnale:      #0A84FF;
    --segnale-tenue:#06121E;
    --verificato:   #30D158;
    --verificato-tenue:#071A09;
    --aperto:       #FF9F0A;
    --aperto-tenue: #2A1E06;
    --negato:       #FF453A;
    --negato-tenue: #1C0707;

    color-scheme: dark;
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--testo-f);
  font-size: var(--t-base);
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}

/* Il focus si deve VEDERE: è l'unico modo di usare il sito senza mouse. */
:focus-visible {
  outline: 2px solid var(--segnale);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Tipografia ---------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--t-xxl); letter-spacing: -0.02em; }
h2 { font-size: var(--t-xl);  letter-spacing: -0.015em; margin-top: var(--s7); }
h3 { font-size: var(--t-l);   margin-top: var(--s6); }
h4 { font-size: var(--t-m);   margin-top: var(--s5); }

h2 + p, h3 + p, h4 + p { margin-top: var(--s3); }

p { margin: 0 0 var(--s4); max-width: var(--prosa); }

a { color: var(--segnale); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--filetto-tenue);
  /* Riempimento stretto e niente in verticale: con 0.35em, «mlx-c,» si leggeva come
     «mlx-c ,» — lo sfondo spingeva via la virgola che segue. */
  padding: 0.08em 0.22em;
  border-radius: 3px;
  /* Il colore distingue il codice dal testo meglio di quanto faccia lo sfondo da solo. */
  color: color-mix(in srgb, var(--testo) 82%, var(--segnale));
}

pre {
  font-family: var(--mono);
  font-size: var(--t-s);
  background: var(--filetto-tenue);
  border: 1px solid var(--filetto);
  border-radius: 6px;
  padding: var(--s4);
  overflow-x: auto;   /* il corpo della pagina non scorre MAI in orizzontale */
  line-height: 1.5;
}
pre code { background: none; padding: 0; font-size: inherit; }

ul, ol { max-width: var(--prosa); padding-left: 1.35em; margin: 0 0 var(--s4); }
li { margin-bottom: var(--s2); }

blockquote {
  margin: var(--s5) 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--filetto);
  color: var(--secondario);
  max-width: var(--prosa);
}

hr { border: 0; border-top: 1px solid var(--filetto); margin: var(--s7) 0; }

img { max-width: 100%; height: auto; }

/* L'etichetta maiuscoletta: l'unico posto dove si spazia la lettera. */
.etichetta {
  font-family: var(--testo-f);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--terziario);
}

/* ---------- Impaginazione ----------
   Il difetto della prima stesura: una colonna di prosa larga 68ch dentro un contenitore
   da 64rem, allineata a sinistra. Risultato, metà pagina vuota a destra e nessuna
   struttura — testo servito, non impaginato.

   Qui la pagina è UNA COLONNA centrata, e non più una griglia a tre tracce con l'indice
   delle sezioni a sinistra. Quell'indice è sparito il 2026-09-15: è una convenzione della
   documentazione, non di un sito che si legge, e rubava un terzo della larghezza per
   stringere il testo in una gola.                                                       */

.guscio { display: flex; flex-direction: column; min-height: 100vh; }
.contenuto { flex: 1; }

.colonna {
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: var(--s5);
}


.impianto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }


/* I blocchi che hanno bisogno di larghezza vera — le misure, i verdetti, le quattro anime —
   non stanno nella misura della prosa: schiacciati lì dentro diventavano due card strette
   per riga, ed è il difetto per cui questa pagina sembrava fatta male. */
.impianto.aperto { grid-template-columns: minmax(0, 1fr); }


/* Il contenuto vero e proprio: tutto dentro resta sulla misura della prosa, ma i blocchi
   larghi (tabelle, misure, griglie) possono sfondare a destra fino al margine. */
.testo { min-width: 0; }

/* Un blocco «largo» non ha più bisogno di sfondare: la colonna è già larga, ed è il testo
   a stare in mezzo. */
.testo .largo { width: 100%; max-width: none; }

/* ⚠️ L'apertura NON prende la griglia col binario sulle pagine a colonna. Quel binario
   esiste per le pagine a bande, dove sotto ci sono i titoli di sezione a cui allinearsi;
   qui sotto non c'è più niente, e restava un rientro senza ragione con mezza riga vuota
   a sinistra del titolo. */


/* ---------- Testata ----------
   Appiccicosa e con un fondo semitrasparente: il testo scorre sotto e resta leggibile,
   e la navigazione non si perde su una pagina da millecinquecento parole.              */

.testata {
  border-bottom: 1px solid var(--filetto);
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.testata > .colonna {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 4.5rem;
}

.marchio {
  display: flex; align-items: center; gap: var(--s3);
  text-decoration: none; color: var(--testo); font-weight: 600;
}
/* Il marchio prende il colore del segnale: è l'unico punto di colore della testata,
   e regge il peso che altrimenti dovrebbe reggere un bottone. */
.marchio svg { width: 24px; height: 24px; display: block; flex: none; color: var(--segnale); }
.marchio .nome { font-size: 1.05rem; letter-spacing: -0.015em; line-height: 1; display: block; }
.marchio .sotto {
  display: block;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 400;
  color: var(--terziario); letter-spacing: 0.02em; margin-top: 3px;
}

.nav { display: flex; gap: var(--s5); margin-left: auto; align-items: center; }
.nav a { color: var(--secondario); text-decoration: none; font-size: var(--t-s); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--testo); }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav .btn { padding: 0.45em 0.9em; }
.nav .btn:hover { color: #fff; }

@media (prefers-color-scheme: dark) { .nav .btn.primario:hover { color: #06121E; } }
@media (max-width: 980px) { .nav { gap: var(--s4); } .nav .secondari { display: none; } }
/* `.nav > a` e non `.nav a`: le voci del menù delle lingue stanno anch'esse dentro la
   navigazione, e su telefono sparivano insieme alle voci della barra — lasciando un menù
   che si apre vuoto proprio dove serve di più. */
@media (max-width: 720px) { .nav > a:not(.btn) { display: none; } .marchio .sotto { display: none; } }

.nav > a { white-space: nowrap; }

/* Il marchio non va a capo. Con il bottone della lingua in più, attorno ai 1000px il
   sottotitolo si spezzava in «AI locale / sul tuo Mac» e la testata diventava alta il doppio:
   sotto i 1180px il sottotitolo lascia il posto invece di schiacciarsi. */
.marchio { flex: none; }
.marchio .sotto { white-space: nowrap; }
@media (max-width: 1180px) { .marchio .sotto { display: none; } }

/* ---------- La lingua: menù a tendina ----------
   Il bottone sta in fondo alla barra, e il menù cade sotto di lui allineato a destra. Il
   popover vive nel livello superiore del browser, quindi non eredita la posizione dal
   bottone: la si ricostruisce dalla testata, alta 4.5rem, e dal bordo destro della colonna. */

.lingua-scelta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--filetto);
  border-radius: 8px;
  background: transparent;
  color: var(--secondario);
  font: 500 var(--t-xs)/1 var(--testo-f);
  letter-spacing: 0.04em;
  cursor: pointer;
}
.lingua-scelta:hover, .lingua-scelta:focus-visible { color: var(--testo); border-color: var(--terziario); }
.lingua-scelta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.lingua-scelta .freccia { width: 12px; height: 12px; stroke-width: 1.6; transition: transform 0.15s; }
.lingua-scelta:has(+ .lingua-menu:popover-open) { color: var(--testo); border-color: var(--terziario); }
.lingua-scelta:has(+ .lingua-menu:popover-open) .freccia { transform: rotate(180deg); }

.lingua-menu {
  position: fixed;
  inset: auto;
  top: calc(4.5rem - 0.25rem);
  right: max(var(--s5), calc((100vw - 78rem) / 2 + var(--s5)));
  margin: 0;
  min-width: 12rem;
  padding: var(--s2);
  border: 1px solid var(--filetto);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--testo);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
}
.lingua-menu a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s4);
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  color: var(--secondario);
  text-decoration: none;
  font-size: var(--t-s);
}
.lingua-menu a:hover, .lingua-menu a:focus-visible { background: var(--filetto-tenue); color: var(--testo); }
.lingua-menu a[aria-current="true"] { color: var(--testo); font-weight: 600; }
.lingua-menu .codice { font-family: var(--mono); font-size: 0.68rem; color: var(--terziario); }
.lingua-menu a[aria-current="true"] .codice { color: var(--segnale); }

/* ---------- Piede ---------- */

.piede {
  border-top: 1px solid var(--filetto);
  margin-top: var(--s8);
  padding-block: var(--s7) var(--s6);
  font-size: var(--t-s);
  color: var(--secondario);
}
.piede .colonna { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.piede h2 {
  font-family: var(--testo-f); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--terziario);
  margin: 0 0 var(--s3); border: 0; padding: 0;
}
.piede ul { list-style: none; padding: 0; margin: 0; max-width: none; }
.piede li { margin-bottom: var(--s2); }
.piede a { color: var(--secondario); text-decoration: none; }
.piede a:hover { color: var(--testo); text-decoration: underline; }
.piede .coda {
  border-top: 1px solid var(--filetto-tenue);
  margin-top: var(--s6); padding-top: var(--s4);
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: baseline;
  font-size: var(--t-xs); color: var(--terziario);
}
.piede .coda p { margin: 0; max-width: 52ch; }

.lingue { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.lingue a[aria-current="true"] { color: var(--testo); font-weight: 600; }

/* ---------- Apertura ----------
   Non un hero alto una schermata: un'apertura che sta nella prima inquadratura insieme
   all'inizio del testo, perché è il testo la cosa per cui si è arrivati.               */

.apertura {
  padding-block: var(--s7) var(--s6);
  border-bottom: 1px solid var(--filetto);
  margin-bottom: var(--s6);
}
.apertura .occhiello {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--terziario);
  margin-bottom: var(--s4);
}
.apertura .occhiello::after {
  content: ""; flex: 1; height: 1px; background: var(--filetto);
}
.apertura h1 { max-width: 18ch; }
.apertura .sommario {
  font-size: var(--t-m);
  line-height: 1.5;
  color: var(--secondario);
  max-width: 52ch;
  margin: var(--s4) 0 0;
}

/* ⚠️ Sulle pagine a colonna l'apertura NON prende la griglia col binario. Quel binario
   esiste per le pagine a bande, dove sotto ci sono i titoli di sezione a cui allinearsi;
   qui sotto non c'è più niente, e restava un rientro senza ragione.

   E si centra col PADDING, non centrando i figli uno per uno: centrare ogni figlio li
   allinea ciascuno sulla PROPRIA larghezza — l'occhiello «Legal» largo 44px, il titolo 492,
   il sommario 656 — quattro elementi centrati e nessun bordo comune, che è precisamente
   l'aria disordinata che c'era da togliere. Col padding il bordo sinistro è uno solo, e il
   filetto sotto resta largo quanto la pagina.

   La selettività è `.lettura > .apertura:not(.principale)` e non basta `.colonna >
   .apertura`: a parità di peso vince chi viene dopo, e la regola della griglia sta più
   sotto in questo foglio. La prima stesura perdeva in silenzio. */
@media (min-width: 56rem) {
  .lettura > .apertura:not(.principale) { display: block; }
  .lettura > .apertura:not(.principale) .occhiello { margin-bottom: var(--s4); padding-top: 0; }
}

/* ⚠️ **L'apertura sta sulla STESSA griglia delle sezioni.**

   L'occhiello va nel binario di sinistra, esattamente dove poi staranno i titoli di sezione,
   e titolo e sommario nella colonna della prosa. Prima l'apertura era un blocco a sé, largo
   quanto voleva, e sotto cominciava un impaginato diverso: due composizioni nella stessa
   pagina non sono una composizione. Con l'occhiello nel binario l'allineamento corre
   dall'alto in basso, e l'occhio ha un bordo su cui appoggiarsi per tutta la lettura.

   Sotto i 62rem la griglia non c'è e tutto torna in colonna: su un telefono un binario da
   tredici rem sarebbe metà schermo sprecato. */
@media (min-width: 56rem) {
  .apertura:not(.principale) {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    column-gap: var(--s6);
    align-items: start;
  }
  .apertura:not(.principale) .occhiello { grid-column: 1; grid-row: 1; margin-bottom: 0; padding-top: 0.55rem; }
  /* Il filetto dell'occhiello sparisce: nel binario finirebbe contro il bordo della colonna
     invece di attraversare la pagina, che è l'unico motivo per cui esisteva. */
  .apertura:not(.principale) .occhiello::after { display: none; }
  .apertura:not(.principale) h1 { grid-column: 2; grid-row: 1; max-width: 20ch; }
  .apertura:not(.principale) .sommario { grid-column: 2; grid-row: 2; }
}

/* L'apertura della home è l'unica che si prende più spazio: è la pagina il cui lavoro
   è fare una promessa, non spiegare una cosa. */
.apertura.principale { padding-block: var(--s8) var(--s7); border-bottom: 0; }
.apertura.principale h1 { font-size: clamp(2.6rem, 6.2vw, 4rem); max-width: 15ch; }
.apertura.principale .sommario { font-size: 1.35rem; max-width: 46ch; }

/* ---------- Ritmo fra le sezioni, nell'impianto a colonna ----------
   Un filetto sopra ogni h2 e molto spazio: è ciò che separa un documento da un muro.

   Il filetto sta sulla sezione DOPO la prima e non su ogni h2: da quando il corpo è spezzato
   in `<section>`, ogni h2 è il primo figlio del suo blocco, e `h2:first-child` — che prima
   voleva dire «il titolo in cima alla pagina» — era diventato «tutti i titoli».           */

.testo .sezione + .sezione > h2 {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--filetto);
}
.testo .sezione > h2:first-child { margin-top: 0; }
.testo h2 { scroll-margin-top: 5.5rem; }  /* l'ancora non finisce sotto la testata appiccicosa */
.testo h3 { scroll-margin-top: 5.5rem; }
.sezione { scroll-margin-top: 5.5rem; }

/* ---------- L'impianto a bande: vetrina e pagine prodotto ----------
   Qui non c'è una colonna di prosa dentro una griglia: ci sono FASCE a piena larghezza che
   si alternano di fondo, e dentro ognuna il testo torna sulla sua misura.

   È la differenza fra una pagina che si consulta e una che si guarda, ed è la correzione
   del difetto per cui il sito «sembrava un'accozzaglia di documentazione»: non mancava
   rifinitura, mancava che le sezioni fossero qualcosa invece che paragrafi di fila.        */

.eroe { border-bottom: 1px solid var(--filetto); }
.eroe > .colonna { padding-block: var(--s8) var(--s7); display: grid; gap: var(--s7); }

/* Sulla vetrina il testo e l'applicazione stanno affiancati: è l'unico punto del sito in cui
   si vede il prodotto prima di leggerne una riga, e la metà destra vuota che c'era prima era
   la cosa che faceva sembrare la home un documento con un titolo grosso. */
@media (min-width: 1000px) {
  .eroe--vetrina > .colonna {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: var(--s8);
  }
}

.eroe .occhiello {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--terziario);
  margin: 0 0 var(--s4);
}
.eroe .occhiello::after { content: ""; flex: 1; height: 1px; background: var(--filetto); }
.eroe h1 { max-width: 17ch; }

.eroe-date {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  margin: var(--s4) 0 0;
  font-family: var(--mono); font-size: var(--t-xs);
  color: var(--terziario); line-height: 1.6;
}
.eroe-date b { color: var(--secondario); font-weight: 400; }
/* Nel binario vanno una sotto l'altra: affiancate in 10rem si spezzerebbero a metà parola. */
@media (min-width: 56rem) { .eroe:not(.eroe--vetrina) .eroe-date { flex-direction: column; gap: var(--s1); margin-top: var(--s3); } }

/* ⚠️ **L'apertura di una pagina prodotto sta sulla STESSA griglia delle sue fasce.**

   L'occhiello entra nel binario di sinistra, esattamente dove sotto staranno i titoli di
   sezione; titolo e sommario nella colonna della prosa. Prima l'apertura era un blocco a sé e
   sotto cominciava un impaginato diverso — due composizioni nella stessa pagina non sono una
   composizione, ed è metà del motivo per cui il sito sembrava «cose buttate lì».

   Non tocca la VETRINA: lì la griglia è testo contro schermata dell'applicazione, che è il
   lavoro di quella pagina, e ci si sovrapporrebbe.

   Sotto i 62rem tutto torna in colonna: su un telefono un binario da tredici rem sarebbe
   metà schermo sprecato. */
@media (min-width: 56rem) {
  .eroe:not(.eroe--vetrina) > .colonna > .eroe-testo {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    column-gap: var(--s6);
    align-items: start;
  }
  .eroe:not(.eroe--vetrina) .eroe-testo > .occhiello {
    grid-column: 1; grid-row: 1;
    margin: 0; padding-top: 0.7rem;
  }
  /* Il filetto sparisce: nel binario finirebbe contro il bordo della colonna invece di
     attraversare la pagina, che è l'unica ragione per cui esisteva. */
  .eroe:not(.eroe--vetrina) .eroe-testo > .occhiello::after { display: none; }
  .eroe:not(.eroe--vetrina) .eroe-testo > h1 { grid-column: 2; grid-row: 1; max-width: 20ch; }
  /* Le date sotto l'occhiello, nel binario: è il posto della provenienza. In mezzo alla
     pagina erano una striscia che interrompeva la lettura nel punto peggiore. */
  .eroe:not(.eroe--vetrina) .eroe-testo > .eroe-date { grid-column: 1; grid-row: 2; align-self: start; }
  .eroe:not(.eroe--vetrina) .eroe-testo > * { grid-column: 2; }
}
.eroe--vetrina h1 { font-size: clamp(2.5rem, 5.6vw, 3.9rem); max-width: 14ch; }
.eroe .sommario {
  font-size: var(--t-m); line-height: 1.5; color: var(--secondario);
  max-width: 48ch; margin: var(--s4) 0 0;
}
.eroe--vetrina .sommario { font-size: 1.3rem; max-width: 44ch; }

.eroe-figura { margin: 0; }
.eroe-figura img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--filetto);
  border-radius: 12px;
  /* L'ombra è l'unica di tutto il sito: serve a staccare una finestra scura da un fondo
     scuro, che è il caso vero, non a fare profondità per decorazione. */
  box-shadow: 0 18px 50px -20px rgb(0 0 0 / 0.55);
}


/* Le fasce. L'alternanza di fondo è ciò che dà il ritmo: senza, dieci sezioni di fila sono
   di nuovo un muro, solo più largo. */
.bande > .sezione {
  padding-block: var(--s8);
  border-bottom: 1px solid var(--filetto-tenue);
}
.bande > .sezione:nth-of-type(even) { background: var(--superficie); }
.bande > .sezione.attacco { padding-block: var(--s7); }
.bande > .sezione:last-child { border-bottom: 0; }

/* Dentro una fascia il testo torna sulla misura della prosa; i blocchi che dicono qualcosa
   con la forma — figure, tabelle, misure, verdetti — prendono la larghezza larga.

   Il rientro sta sulla FASCIA e non sui figli, e centrarli era sbagliato: l'apertura allinea
   il titolo al margine sinistro della colonna, e un corpo centrato ripartiva da un'altra
   ascissa. Due margini sinistri diversi nella stessa pagina si vedono anche senza saperli
   nominare. Questo calcolo è lo stesso di `.colonna`, scritto come rientro invece che come
   larghezza massima, così il fondo della fascia arriva comunque ai bordi dello schermo. */
.bande > .sezione {
  padding-inline: max(var(--s5), calc((100% - 78rem) / 2 + var(--s5)));
}

/* ⚠️ **La fascia è una griglia a due colonne, non una colonna sola.**

   Prima ogni sezione era una pila di paragrafi larga 32em incollata al bordo sinistro, con
   il 60% della tela vuoto a destra a 1440px. L'owner l'ha detto tre volte, e le prime due
   volte ho corretto la cosa sbagliata: la prima il TIPO di pagina, la seconda la misura della
   riga. Il difetto vero era che non c'era una composizione — solo un binario di testo.

   Ora il titolo della sezione sta in una colonna sua a sinistra e la prosa accanto: l'occhio
   ha due punti d'appoggio invece di uno, si scorre per titoli senza leggere, e lo spazio a
   destra smette di essere vuoto perché è lì che vive il testo. È l'impaginato dei siti di
   documentazione e di prodotto fatti bene, e non costa una riga di JavaScript.

   La colonna del titolo è `13.5rem` come l'indice delle pagine `Documento`: due impianti
   diversi che condividono la stessa griglia non sembrano due siti. */
/* ⚠️ **La soglia era 62rem, cioè 992px, e a 960 la pagina tornava esattamente com'era prima.**
   L'owner ha aperto engine in incognito e non ha visto alcuna differenza: aveva ragione, perché
   la sua finestra stava sotto la soglia. Una finestra non massimizzata su un portatile sta
   quasi sempre fra 900 e 1100px, cioè proprio nella fascia che avevo escluso.

   Il conto vero: binario 13,5rem + spazio 2rem + prosa 32em fanno 47,5rem ≈ 760px, più i
   margini di pagina. Da 56rem (896px) ci sta comodo, e sotto i 68rem il binario si stringe a
   10rem perché lì 13,5 mangerebbe troppa larghezza alla prosa. */
@media (min-width: 56rem) and (max-width: 68rem) {
  .bande > .sezione,
  .eroe:not(.eroe--vetrina) > .colonna > .eroe-testo,
  .apertura:not(.principale) { grid-template-columns: 10rem minmax(0, 1fr) !important; }
}

@media (min-width: 56rem) {
  .bande > .sezione {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    column-gap: var(--s6);
    align-items: start;
  }
  .bande > .sezione > * { grid-column: 2; }
  .bande > .sezione > h2 {
    grid-column: 1;
    grid-row: 1 / span 99;      /* il titolo affianca TUTTA la sezione, non la prima riga */
    align-self: start;
    position: sticky;
    top: 5.5rem;                /* resta visibile mentre si legge la sezione lunga */
  }
  /* L'attacco non ha titolo, e resta comunque nella colonna della prosa: il binario di
     sinistra vuoto NON è un buco, è il margine che tiene allineate tutte le righe di testo
     della pagina — titolo compreso. Mandarlo a piena larghezza, come faceva la prima stesura,
     spostava l'attacco a sinistra di tredici rem rispetto al titolo che gli sta sopra: uno
     scalino visibile proprio nel punto in cui si comincia a leggere. */
  .bande > .sezione.attacco > * { grid-column: 2; }
}

.bande > .sezione > * {
  max-width: var(--prosa);
  margin-inline: 0;
}
.bande > .sezione > figure,
.bande > .sezione > table,
.bande > .sezione > .misure,
.bande > .sezione > .anime,
.bande > .sezione > .verdetti,
.bande > .sezione > .largo,
.bande > .sezione > .percorso,
.bande > .sezione > .limiti,
.bande > .sezione > .iscrizione,
.bande > .sezione > .stato-roadmap,
.bande > .sezione > .note-elenco,
.bande > .sezione > .sintesi,
.bande > .sezione > .colonne,
.bande > .sezione > .confronto,
.bande > .sezione > .dati,
.bande > .sezione > .rilievo,
.bande > .sezione > .etichette,
.bande > .sezione > .note-elenco,
.bande > .sezione > form {
  max-width: var(--largo);
}

/* Il titolo di una fascia non porta il filetto: il bordo della fascia fa già quel lavoro,
   e due righe orizzontali a due centimetri l'una dall'altra sono rumore. */
.bande > .sezione > h2 {
  margin-top: 0; padding-top: 0; border-top: 0;
  font-size: var(--t-xl);
  max-width: 26ch;
  margin-bottom: var(--s5);
}
.bande > .sezione > h3 { scroll-margin-top: 5.5rem; }

/* ---------- L'elemento firma #1: la barra di rapporto ----------
   Ogni numero di prestazione è un RAPPORTO contro un riferimento, con la data
   della misura accanto. Non esiste un modo di scrivere «più veloce» dentro
   questo componente: c'è solo una percentuale e una data.                    */

.misure { max-width: var(--largo); margin: var(--s6) 0; }

.misura {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  align-items: center;
  gap: var(--s4);
  padding-block: var(--s3);
  border-top: 1px solid var(--filetto-tenue);
}
.misura:last-child { border-bottom: 1px solid var(--filetto-tenue); }

.misura .nome { font-size: var(--t-s); }

.misura .barra {
  position: relative;
  height: 10px;
  background: var(--filetto-tenue);
  border-radius: 2px;
  overflow: hidden;
}
.misura .barra > span {
  position: absolute; inset-block: 0; left: 0;
  background: var(--segnale);
  border-radius: 2px;
}
/* La tacca del riferimento: dove starebbe il 100%. Senza, una barra all'89%
   sembrerebbe piena. */
.misura .barra::after {
  content: ""; position: absolute; inset-block: -3px; right: 0;
  width: 2px; background: var(--testo); opacity: .45;
}

.misura .valore {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-s);
  font-weight: 500;
  white-space: nowrap;
}

.misura .dettaglio {
  grid-column: 1 / -1;
  font-size: var(--t-xs);
  color: var(--terziario);
  font-family: var(--mono);
  margin-top: calc(var(--s1) * -1);
}

.misure .riferimento {
  font-size: var(--t-xs);
  color: var(--terziario);
  margin-top: var(--s3);
}

@media (max-width: 620px) {
  .misura { grid-template-columns: 1fr auto; }
  .misura .barra { grid-column: 1 / -1; order: 3; }
}

/* ---------- L'elemento firma #2: il verdetto ----------
   La pastiglia a quattro stati della pagina Modelli, coi colori veri dell'app.
   Il verdetto ha SEMPRE una ragione: è il punto.                              */

.verdetto {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-s); font-weight: 500;
  padding: 0.2em 0.65em;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.verdetto::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none;
}
.verdetto.esegue   { color: var(--verificato); background: var(--verificato-tenue); border-color: color-mix(in srgb, var(--verificato) 22%, transparent); }
.verdetto.nonancora { color: var(--aperto);     background: var(--aperto-tenue);     border-color: color-mix(in srgb, var(--aperto) 22%, transparent); }
.verdetto.no       { color: var(--negato);     background: var(--negato-tenue);     border-color: color-mix(in srgb, var(--negato) 22%, transparent); }
/* «non lo so» usa il SECONDARIO e non il terziario: su fondo tenue il terziario
   scendeva a 2,66:1. Un verdetto illeggibile è un verdetto che non c'è. */
.verdetto.ignoto   { color: var(--secondario);  background: var(--filetto-tenue);    border-color: var(--filetto); }

.verdetti { display: grid; gap: var(--s3); margin: var(--s5) 0; max-width: var(--largo); }
.verdetti .riga {
  display: grid; grid-template-columns: minmax(11rem, auto) 1fr; gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s3);
  border-top: 1px solid var(--filetto-tenue);
}
.verdetti .riga:last-child { border-bottom: 1px solid var(--filetto-tenue); }
.verdetti .ragione { font-size: var(--t-s); color: var(--secondario); }

@media (max-width: 620px) {
  .verdetti .riga { grid-template-columns: 1fr; gap: var(--s2); }
}

/* ---------- Le quattro anime ----------
   Quattro blocchi di PARI peso: nessuno è più grande, perché nessuno è più
   importante. Il prodotto è quattro cose, non una con tre accessori.        */

.anime {
  display: grid;
  gap: 1px;                      /* il filetto è lo sfondo che traspare */
  /* DUE per riga, non `auto-fit`: le anime sono quattro, e a 1280px l'auto-fit ne
     metteva tre in fila e una sola sotto. Una riga con un elemento solo dice che la
     griglia ha scelto male, ed è uno dei motivi per cui questa pagina sembrava
     montata a caso. */
  grid-template-columns: 1fr;
  background: var(--filetto);
  border: 1px solid var(--filetto);
  border-radius: 8px;
  overflow: hidden;
  margin: var(--s6) 0;
  max-width: var(--largo);
}
.anima {
  background: var(--superficie);
  padding: var(--s6) var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
  text-decoration: none; color: inherit;
}
.anima:hover { background: var(--segnale-tenue); }

@media (min-width: 700px) { .anime { grid-template-columns: repeat(2, 1fr); } }
.anima h3 { font-size: var(--t-m); margin: 0; }
.anima p  { font-size: var(--t-s); color: var(--secondario); margin: 0; max-width: none; }
.anima .vai { font-size: var(--t-xs); color: var(--segnale); margin-top: auto; padding-top: var(--s3); }

/* ---------- Le forme di sezione, e perché esistono -------------------------------

   Misurato il 2026-09-13: su `models` e `private-ai-mac` OTTO sezioni su otto erano titolo
   più paragrafi; su `api` otto su nove; su `engine` e `chat` sei su sette. La home, che è
   l'unica che l'owner non ha mai chiamata «cose buttate lì», ne aveva due su cinque — perché
   è l'unica che usava `.anime`, `.verdetti` e `.misure`.

   Il difetto non era la grafica delle singole parti: era che OGNI sezione aveva la stessa
   forma, otto volte di fila. Un lettore non distingue un confronto da un avvertimento da un
   elenco di numeri se tutti e tre sono tre paragrafi identici.

   Queste quattro forme mancavano. Regola: una forma si usa quando il contenuto LA È — un
   confronto vero, dei numeri veri — mai per spezzare il ritmo a caso. Una card che contiene
   prosa è una card sbagliata.
   ------------------------------------------------------------------------------- */

/* ---- Confronto a due colonne: «come si fa di solito» contro «come si fa qui» ----
   Il contenuto lo pretende: dire i vantaggi dell'altro impianto PRIMA dei propri è la cosa
   che rende credibile il resto, e in due paragrafi consecutivi quella struttura sparisce. */
.confronto {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--filetto);
  border: 1px solid var(--filetto);
  border-radius: 8px;
  overflow: hidden;
  margin: var(--s6) 0;
  max-width: var(--largo);
}
@media (min-width: 700px) { .confronto { grid-template-columns: repeat(2, 1fr); } }

.confronto > div { background: var(--superficie); padding: var(--s5); }
.confronto h3 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--terziario);
  margin: 0 0 var(--s3);
  font-weight: 500;
}
.confronto ul { margin: 0; padding-left: 1.1em; max-width: none; }
.confronto li { font-size: var(--t-s); color: var(--secondario); margin-bottom: var(--s2); }
.confronto li:last-child { margin-bottom: 0; }
.confronto li strong { color: var(--testo); font-weight: 550; }
/* La colonna «qui» si distingue con un filetto, non con un fondo colorato: il fondo
   trasformerebbe un confronto onesto in una vetrina. */
.confronto > div.qui { border-top: 2px solid var(--segnale); }
@media (min-width: 700px) { .confronto > div.qui { border-top: 0; border-left: 2px solid var(--segnale); } }

/* ---- La sintesi: la prima schermata dice tutto, invece di farlo leggere ----

   ⚠️ La parte ALTA era rimasta l'unica pila di paragrafi — tre di fila prima di qualunque
   altra cosa — ed è la prima che si vede. L'owner l'ha notato dopo che il resto della pagina
   era già affiancato: «lo hai fatto solo per alcune cose, non per la parte iniziale».

   Quattro affermazioni brevi in riga, subito sotto il titolo: chi arriva sa in un colpo
   d'occhio cosa fa e cosa costa, e legge la prosa dopo solo se gli interessa il perché. È
   l'opposto di far scorrere tre paragrafi per scoprire se la pagina lo riguarda.

   Non è `.dati`: quello porta NUMERI misurati, questo porta affermazioni. Confonderli darebbe
   a una frase la dignità tipografica di una misura. */
.sintesi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4) var(--s5);
  margin: var(--s5) 0 var(--s6);
  padding-top: var(--s4);
  border-top: 1px solid var(--filetto);
  max-width: var(--largo);
}
@media (min-width: 40rem) { .sintesi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .sintesi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.sintesi > div { min-width: 0; }
.sintesi strong {
  display: block;
  font-size: var(--t-base);
  color: var(--testo);
  font-weight: 600;
  margin-bottom: var(--s1);
  line-height: 1.3;
}
.sintesi span { display: block; font-size: var(--t-s); color: var(--terziario); line-height: 1.5; }

/* ---- Argomenti AFFIANCATI dentro una fascia sola ----

   ⚠️ La forma che mancava, e che rende una pagina lunga una pagina densa. Ogni argomento
   occupava una fascia a piena altezza, quindi sette argomenti facevano sette schermate di
   scorrimento: la pagina restava «una lista di cose» anche dopo aver sistemato impaginato e
   forme, perché una lista verticale resta una lista per quanto si curi ogni voce.

   Due o tre temi brevi che stanno sullo stesso piano — «cosa si rifiuta di fare» e «qual è il
   costo», i quattro modi di verificare — vanno affiancati: si leggono in parallelo, si
   confrontano con l'occhio, e la pagina si accorcia di altrettante schermate.

   La regola: si affiancano cose dello STESSO livello. Un argomento principale accanto a un
   dettaglio non è una colonna, è un errore di gerarchia. */
.colonne {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6) var(--s6);
  margin: var(--s5) 0;
  max-width: var(--largo);
}
@media (min-width: 48rem) { .colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* ⚠️ A 76rem le tre colonne scattavano solo sopra i 1216px, e a 1180 uscivano due più una
   sola a capo — «una riga con un elemento solo dice che la griglia ha scelto male», che è la
   stessa frase scritta accanto alle card della home. Da 68rem ci stanno tre colonne da ~250px,
   strette ma giuste per testi brevi come questi. */
@media (min-width: 68rem) { .colonne.tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.colonne > div { min-width: 0; }
.colonne h3 {
  font-family: var(--display);
  font-size: var(--t-m);
  line-height: 1.25;
  margin: 0 0 var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--filetto);
}
.colonne p { font-size: var(--t-s); color: var(--secondario); margin: 0 0 var(--s3); max-width: none; }
.colonne p:last-child { margin-bottom: 0; }
.colonne p strong { color: var(--testo); }
.colonne code { font-size: 0.92em; }

/* ---- Riga di numeri: quelli che rispondono a «cosa fa alla mia macchina» ---- */
.dati {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--s5);
  margin: var(--s6) 0;
  padding: var(--s5) 0;
  border-block: 1px solid var(--filetto);
  max-width: var(--largo);
}
.dato .numero {
  display: block;
  font-family: var(--display);
  font-size: var(--t-xl);
  line-height: 1.1;
  color: var(--testo);
  font-variant-numeric: tabular-nums;
}
.dato .cosa { display: block; font-size: var(--t-s); color: var(--secondario); margin-top: var(--s2); max-width: 22em; }

/* ---- Rilievo: la cosa che chi legge deve portarsi via anche se salta il resto ----
   UNA per pagina. Due rilievi in una pagina sono zero rilievi. */
.rilievo {
  border-left: 3px solid var(--segnale);
  /* ⚠️ Nessun fondo colorato. Provate e scartate due versioni: il token «tenue» (in scuro è un
     fondo pieno) e una velatura all'8% sull'accento. Su fondo scuro entrambe fanno fango —
     l'ambra diventava un blocco marrone che pesava più del testo che conteneva. Il rilievo si
     stacca ALZANDO la superficie, e il colore resta solo nel filetto: una cosa sola porta
     l'accento, ed è la più sottile. */
  background: var(--superficie);
  padding: var(--s5) var(--s5) var(--s5) var(--s6);
  border-radius: 0 8px 8px 0;
  margin: var(--s6) 0;
  max-width: var(--largo);
}
.rilievo > :first-child { margin-top: 0; }
.rilievo > :last-child { margin-bottom: 0; }
.rilievo p { max-width: var(--prosa); }
.rilievo.attenzione { border-left-color: var(--aperto); }

/* ---- Etichette in fila: un elenco corto di nomi propri che non merita un paragrafo ---- */
.etichette { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 var(--s5); padding: 0; list-style: none; max-width: var(--largo); }
.etichette li {
  font-family: var(--mono);
  font-size: var(--t-xs);
  padding: 0.3em 0.7em;
  border: 1px solid var(--filetto);
  border-radius: 999px;
  color: var(--secondario);
  margin: 0;
}

/* ---------- Tabelle ---------- */

.tabella { overflow-x: auto; margin: var(--s5) 0; max-width: var(--largo); }
table { border-collapse: collapse; width: 100%; font-size: var(--t-s); }
th, td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--filetto-tenue); vertical-align: top; }
th { font-weight: 600; color: var(--secondario); border-bottom-color: var(--filetto); white-space: nowrap; }
td:has(> code), .num { font-variant-numeric: tabular-nums; }

/* ---------- Note e avvisi ---------- */

.nota {
  border-left: 3px solid var(--filetto);
  padding: var(--s1) 0 var(--s1) var(--s4);
  margin: var(--s5) 0;
  color: var(--secondario);
  font-size: var(--t-s);
  max-width: var(--prosa);
}
.nota.attenzione { border-left-color: var(--aperto); }
.nota.attenzione strong { color: var(--aperto); }

/* ---------- Bottoni ---------- */

.btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: inherit; font-size: var(--t-s); font-weight: 500;
  padding: 0.6em 1.1em;
  border-radius: 7px;                 /* 9px nell'app; qui il testo è più piccolo */
  border: 1px solid var(--filetto);
  background: var(--superficie);
  color: var(--testo);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { border-color: var(--terziario); }
.btn.primario {
  background: var(--segnale); border-color: var(--segnale);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .btn.primario { color: #06121E; }   /* su blu acceso il bianco abbaglia */
}
.btn.primario:hover { filter: brightness(1.08); }

.azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }
.eroe .azioni { margin: var(--s6) 0 0; }
.eroe .btn { font-size: var(--t-base); padding: 0.7em 1.3em; }

/* ---------- Figure e schermate ---------- */

figure { margin: var(--s6) 0; max-width: var(--largo); }
figure img {
  display: block; width: 100%;
  border: 1px solid var(--filetto);
  border-radius: 10px;               /* 14 nell'app; scalato alla pagina */
}
figcaption {
  font-size: var(--t-xs); color: var(--terziario);
  margin-top: var(--s3); max-width: var(--prosa);
}

/* ---------- Il percorso delle fasi ----------
   Una linea che scende, con le tappe numerate che si alternano ai suoi lati. Nasce da
   un'immagine che l'owner ha mandato il 2026-09-15 — un nastro che serpeggia con sopra le
   tappe — e da un vincolo che quell'immagine non ha: qui ogni fase porta tre righe di
   descrizione, e un serpente orizzontale le ridurrebbe a colonne da quattro parole. Il
   percorso scende invece di attraversare, e resta un percorso.

   ⚠️ Prima erano righe con una barra di avanzamento, riusando il componente delle misure
   perché «è la stessa idea: una quantità contro un intero». Non lo era: su una misura la
   quantità è il punto, su una roadmap il punto è dove si è arrivati, e il risultato
   sembrava un cruscotto. La linea cambia colore lungo la discesa, ed è l'unica cosa
   decorativa qui dentro.                                                                */

.percorso {
  --linea: 2px;
  max-width: var(--largo);
  position: relative;
  list-style: none;
  margin: var(--s6) 0 var(--s5);
  padding: 0;
  display: grid;
  gap: var(--s6);
}

/* La linea. Su schermo stretto sta a sinistra e le tappe le stanno accanto; da 62rem passa
   in mezzo e le tappe si alternano. */
.percorso::before {
  content: "";
  position: absolute;
  top: 0.9rem; bottom: 0.9rem;
  left: calc(1.1rem - var(--linea) / 2);
  width: var(--linea);
  border-radius: var(--linea);
  background: linear-gradient(to bottom,
              var(--segnale) 0%, #7B4BD8 34%, #D6478F 62%, var(--aperto) 100%);
}

.tappa {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  gap: var(--s4);
}

.segno {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: var(--fondo);
  border: var(--linea) solid var(--filetto);
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--terziario);
  font-variant-numeric: tabular-nums;
  /* L'anello del fondo interrompe la linea pulita, invece di lasciarla passare dietro. */
  box-shadow: 0 0 0 4px var(--fondo);
  z-index: 1;
}

/* Una tappa fatta ha il segno pieno — e la scheda porta anche la parola, perché il colore
   da solo non è una marcatura leggibile da tutti. */
.tappa.fatta .segno {
  background: var(--verificato);
  border-color: var(--verificato);
  color: var(--superficie);
}

/* ⚠️ Si chiamava `.scheda`, e più sotto in questo stesso foglio `.scheda` è già una griglia
   a due colonne — la lista di definizioni delle note. Vinceva quella, perché viene dopo, e
   il titolo della fase finiva accanto alla sua descrizione invece che sopra. Nessun errore,
   nessuna prova rossa: due nomi uguali per due cose diverse, viste solo guardando. */
.fermata { min-width: 0; padding-top: 0.15rem; }
.fermata h3 { font-size: var(--t-m); font-weight: 600; margin: 0 0 var(--s2); }
.fermata p { margin: 0; color: var(--secondario); max-width: var(--prosa); }

.bollo {
  display: inline-block;
  margin-top: var(--s3);
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: var(--t-xs);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  background: var(--verificato-tenue);
  color: var(--verificato);
}
.bollo.avanti { background: var(--segnale-tenue); color: var(--segnale); }

@media (min-width: 62rem) {
  .percorso { gap: var(--s7); }
  .percorso::before { left: calc(50% - var(--linea) / 2); }

  .tappa { grid-template-columns: 1fr 2.2rem 1fr; gap: var(--s5); align-items: start; }
  .segno { grid-column: 2; }

  /* Le dispari a sinistra, le pari a destra: è l'alternanza che fa leggere la linea come un
     percorso invece che come un bordo. */
  .tappa:nth-child(odd)  .fermata { grid-column: 1; grid-row: 1; text-align: right; }
  .tappa:nth-child(even) .fermata { grid-column: 3; grid-row: 1; }
  .tappa:nth-child(odd)  .fermata p { margin-left: auto; }
}

/* ---------- I limiti noti ----------
   Le issue etichettate del repository. Due colonne da 48rem in su e non tre: sono frasi da
   leggere, non etichette da contare, e a tre colonne una riga di prosa sta in quattro parole.
   Nessuna cornice intorno a ciascuno: una card direbbe «scheda di prodotto», e questi sono i
   difetti che il prodotto dichiara di avere.                                              */

.limiti {
  display: grid; gap: var(--s5) var(--s6);
  max-width: var(--largo); margin: var(--s6) 0;
}
.limite { padding-left: var(--s4); border-left: 2px solid var(--filetto); }
.limite h3 { font-size: var(--t-s); font-weight: 600; margin: 0 0 var(--s2); }
.limite p { font-size: var(--t-s); color: var(--secondario); margin: 0; max-width: var(--prosa); }

@media (min-width: 48rem) { .limiti { grid-template-columns: 1fr 1fr; } }

/* ---------- L'elenco delle note ----------
   Non sono card: sono voci di un indice, separate da un filetto. Una card intorno a
   ogni nota direbbe «oggetto», e una nota è un testo.                              */

.note { display: grid; margin: var(--s6) 0; max-width: var(--largo); }
.nota-voce {
  display: block;
  padding: var(--s5) 0;
  border-top: 1px solid var(--filetto);
  text-decoration: none;
  color: inherit;
}
.note .nota-voce:last-child { border-bottom: 1px solid var(--filetto); }
.nota-voce h3 { margin: 0 0 var(--s2); font-size: var(--t-l); color: var(--testo); }
.nota-voce:hover h3 { color: var(--segnale); }
.nota-voce p { margin: 0; color: var(--secondario); font-size: var(--t-s); max-width: var(--prosa); }
.nota-voce .quando {
  display: inline-block; margin-top: var(--s3);
  font-family: var(--mono); font-size: var(--t-xs); color: var(--terziario);
}

/* ---------- Il modulo di iscrizione ----------
   È l'unica cosa interattiva del sito, e non ha una riga di JavaScript: è un form che fa
   POST. Le caselle non sono pre-spuntate — un consenso pre-spuntato non è un consenso.   */

.iscrizione {
  border: 1px solid var(--filetto);
  border-radius: 10px;
  padding: var(--s5);
  margin: var(--s6) 0;
  background: var(--superficie);
  max-width: 34rem;
}
.iscrizione fieldset { border: 0; margin: 0 0 var(--s5); padding: 0; }
.iscrizione legend {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--terziario);
  padding: 0; margin-bottom: var(--s3);
}

.scelta {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  align-items: start;
  padding: var(--s2) 0;
  font-size: var(--t-s); line-height: 1.5;
  cursor: pointer;
}
.scelta input { margin-top: 0.25em; accent-color: var(--segnale); width: 1rem; height: 1rem; }
.scelta:hover span { color: var(--testo); }

.riga-email { display: flex; gap: var(--s3); flex-wrap: wrap; }
.riga-email input[type=email] {
  flex: 1 1 14rem; min-width: 0;
  font: inherit; font-size: var(--t-s);
  padding: 0.6em 0.8em;
  border: 1px solid var(--filetto);
  border-radius: 7px;
  background: var(--fondo);
  color: var(--testo);
}
.riga-email input[type=email]::placeholder { color: var(--terziario); }
.riga-email input[type=email]:focus-visible { border-color: var(--segnale); }

.minuta {
  font-size: var(--t-xs); color: var(--terziario);
  margin: var(--s4) 0 0; max-width: none; line-height: 1.55;
}

/* La cancellazione sta staccata dal salvataggio, e non ha l'aria di un'azione primaria:
   è una cosa che si fa apposta, non per errore accanto a «Salva». */
.cancellazione { margin-top: var(--s5); }
.cancellazione .btn { color: var(--negato); border-color: color-mix(in srgb, var(--negato) 35%, var(--filetto)); }
.cancellazione .btn:hover { background: var(--negato-tenue); }

/* ---------- Il titolare del trattamento ---------- */

.titolare {
  border: 1px solid var(--filetto);
  border-radius: 8px;
  padding: var(--s5);
  margin: var(--s6) 0;
  max-width: var(--prosa);
  background: var(--superficie);
}
.titolare .etichetta { margin: 0 0 var(--s3); }
.titolare address { font-style: normal; line-height: 1.7; }
.titolare p:last-child { margin-bottom: 0; }
/* Quando manca, si vede che manca: in sviluppo è l'unico modo di ricordarsene. */
.titolare.vuoto { border-color: var(--aperto); background: var(--aperto-tenue); }
.titolare.vuoto .etichetta { color: var(--aperto); }

/* ---------- Utilità ---------- */

.solo-lettori-schermo {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.salta {
  position: absolute; left: var(--s4); top: calc(var(--s4) * -4);
  background: var(--superficie); color: var(--testo);
  padding: var(--s3) var(--s4); border: 1px solid var(--filetto); border-radius: 6px;
  z-index: 10; transition: top .15s;
}
.salta:focus { top: var(--s4); }

/* ---------- Il pannello riservato ----------
   Non è una pagina pubblica e non finge di esserlo: stessa tipografia e stessi colori, ma
   densità da modulo. Nessuno stile nuovo che il sito non abbia già.                       */

.admin { max-width: 52rem; padding-bottom: var(--s8); }

.modulo-admin fieldset {
  border: 1px solid var(--filetto);
  border-radius: 10px;
  padding: var(--s5);
  margin: 0 0 var(--s5);
  background: var(--superficie);
}
.modulo-admin legend {
  font-family: var(--display);
  font-size: var(--t-m);
  padding-inline: var(--s2);
}
.modulo-admin .nota {
  font-size: var(--t-s);
  color: var(--secondario);
  max-width: 62ch;
  margin-bottom: var(--s5);
}
.modulo-admin label {
  display: block;
  margin-bottom: var(--s4);
}
.modulo-admin label > span {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terziario);
  margin-bottom: var(--s2);
}
.modulo-admin input[type="text"],
.modulo-admin input[type="url"],
.modulo-admin input[type="email"],
.modulo-admin input[type="password"],
.modulo-admin input[type="number"] {
  width: 100%;
  font: inherit;
  font-size: var(--t-s);
  font-family: var(--mono);
  padding: 0.55em 0.7em;
  border: 1px solid var(--filetto);
  border-radius: 6px;
  background: var(--fondo);
  color: var(--testo);
}
.modulo-admin small {
  display: block;
  font-size: var(--t-xs);
  color: var(--terziario);
  margin-top: var(--s1);
}

/* Le righe con la casella: l'etichetta sta accanto, non sopra. */
.modulo-admin label.riga {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-bottom: var(--s2);
}
.modulo-admin label.riga > span {
  display: inline; text-transform: none; letter-spacing: 0;
  font-size: var(--t-base); font-weight: 400; color: var(--testo); margin: 0;
}
.modulo-admin label.riga code { font-size: 0.78em; color: var(--terziario); }

/* Gli avvisi: verde quando è tutto a posto, ambra quando manca qualcosa. Gli stessi due
   colori che il sito usa per i verdetti, perché vogliono dire la stessa cosa. */
.avviso {
  border-left: 3px solid var(--filetto);
  padding: var(--s4) var(--s5);
  border-radius: 0 8px 8px 0;
  margin-bottom: var(--s5);
}
.avviso p:last-child, .avviso ul:last-child { margin-bottom: 0; }
.avviso.fatto { border-left-color: var(--verificato); background: var(--verificato-tenue); }
.avviso.manca { border-left-color: var(--aperto); background: var(--aperto-tenue); }
/* L'area riservata spenta, vista da chi amministra. Stesso peso di «manca»: entrambi dicono
   «quello che vedi non e` quello che vede il pubblico». */
.avviso.anteprima { border-left-color: var(--aperto); background: var(--aperto-tenue); }
/* Qualcuno sta aspettando una risposta da una persona: e` l'unica cosa nel pannello che ha
   dall'altra parte qualcuno che aspetta, e si vede. */
.avviso.attesa { border-left-color: var(--segnale); background: var(--segnale-tenue); }

/* ---------- L'area riservata: impianto a vetro ----------------------------------

   L'impianto viene da cantastories — «Liquid Glass»: pannelli traslucidi con blur, bordi
   luminosi, raggi generosi, ombre con alone — su richiesta dell'owner (2026-09-13). È la
   stessa divisione che fa quel progetto: sito pubblico sobrio e server-rendered, applicazione
   con un guscio suo dietro noindex.

   ⚠️ Il commento in cima a questo foglio dice che qui glassmorphism non ce n'è «apposta», e
   resta vero: parla del SITO PUBBLICO, e il vetro sta solo sotto `body.riservata`. Nessuna di
   queste regole tocca una pagina indicizzabile.

   I colori restano di Runlix. Il vetro si costruisce con `color-mix` sui token esistenti
   invece che con rgba fissi: così funziona in chiaro E in scuro senza una seconda palette da
   tenere allineata — di là non serviva, perché di là è scuro e basta.
   ------------------------------------------------------------------------------- */

body.riservata {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}

/* Il fondo vivo: due aloni fermi, non un mesh a quattro colori come di là. Di là l'alone è
   l'identità del prodotto; qui deve solo staccare il vetro dal fondo, e un fondo che grida
   dietro una tabella di build è un fondo che disturba il lavoro. */
body.riservata::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 15% -10%, color-mix(in srgb, var(--segnale) 12%, transparent), transparent 70%),
    radial-gradient(50rem 35rem at 110% 10%, color-mix(in srgb, var(--verificato) 9%, transparent), transparent 70%);
}

/* ---- La testata ---- */

.vetro-testata {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s5);
  padding: var(--s3) var(--s5);
  background: color-mix(in srgb, var(--fondo) 72%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--filetto);
}

.vetro-marchio {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  color: var(--testo);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.vetro-marchio svg { width: 1.5rem; height: 1.5rem; }

.vetro-nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.vetro-nav a {
  text-decoration: none;
  color: var(--secondario);
  font-size: var(--t-s);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.vetro-nav a:hover { color: var(--testo); }
/* Filetto e non solo colore: il colore da solo sparisce per chi non lo distingue. */
.vetro-nav a.qui { color: var(--testo); border-bottom-color: var(--segnale); }

.vetro-fuori { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
/* L'indirizzo si accorcia prima dei bottoni: chi sei è utile, ma non deve spingere fuori
   schermo il modo di uscire. */
.vetro-chi {
  font-size: var(--t-s);
  color: var(--terziario);
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vetro-fuori form { margin: 0; }

/* ---- Il secondo livello di schede ----
   Sta sotto la testata e non dentro il corpo: è navigazione, non contenuto, e deve restare
   alla stessa altezza quando si passa da una scheda all'altra. */

.vetro-schede {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5);
  padding: 0 var(--s5);
  border-bottom: 1px solid var(--filetto);
  background: color-mix(in srgb, var(--fondo) 60%, transparent);
}
.vetro-schede a {
  text-decoration: none;
  color: var(--terziario);
  font-size: var(--t-s);
  padding: var(--s3) 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.vetro-schede a:hover { color: var(--testo); }
.vetro-schede a.qui { color: var(--testo); border-bottom-color: var(--segnale); }

/* ---- Il corpo ---- */

.vetro-corpo { flex: 1; padding: var(--s7) var(--s5) var(--s8); }
.vetro-colonna { max-width: var(--largo); margin: 0 auto; }

.vetro-apertura { margin-bottom: var(--s6); }
.vetro-apertura h1 {
  font-family: var(--display);
  font-size: var(--t-xxl);
  line-height: 1.1;
  margin: var(--s2) 0 var(--s3);
}
.vetro-sommario {
  margin: 0;
  color: var(--secondario);
  font-size: var(--t-m);
  max-width: 44rem;
}

/* ---- I pannelli: l'unità di costruzione di tutta l'area ---- */

.vetro-pannello {
  background: color-mix(in srgb, var(--superficie) 72%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--filetto);
  border-radius: 16px;
  padding: var(--s5);
  box-shadow: 0 8px 32px color-mix(in srgb, var(--testo) 8%, transparent);
  margin-bottom: var(--s5);
}
.vetro-pannello > :first-child { margin-top: 0; }
.vetro-pannello > :last-child { margin-bottom: 0; }

.vetro-pannello h2 {
  font-family: var(--display);
  font-size: var(--t-l);
  margin: 0 0 var(--s4);
}
.vetro-pannello h3 { font-size: var(--t-m); margin: 0 0 var(--s2); }

/* Un pannello che è l'azione principale della pagina: si stacca, non urla. */
.vetro-pannello.rilievo {
  border-color: color-mix(in srgb, var(--segnale) 45%, var(--filetto));
  box-shadow: 0 12px 40px color-mix(in srgb, var(--segnale) 14%, transparent);
}

.vetro-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--s4);
}

/* ---- Il modulo: largo, non una riga in mezzo alla prosa ---- */

.vetro-modulo { display: flex; flex-direction: column; gap: var(--s4); max-width: 26rem; }
.vetro-modulo label { font-size: var(--t-s); color: var(--secondario); display: block; margin-bottom: var(--s1); }
.vetro-modulo input[type="email"],
.vetro-modulo textarea {
  width: 100%;
  font: inherit;
  color: var(--testo);
  background: color-mix(in srgb, var(--fondo) 60%, transparent);
  border: 1px solid var(--filetto);
  border-radius: 10px;
  padding: var(--s3) var(--s4);
}
.vetro-modulo input[type="email"]:focus-visible,
.vetro-modulo textarea:focus-visible {
  outline: 2px solid var(--segnale);
  outline-offset: 1px;
  border-color: transparent;
}

/* ---- I moduli dentro i pannelli ----
   Le caselle in fila sono illeggibili: a schermo largo scorrono tutte sulla stessa riga e la
   frase «Aprire il pannello di amministrazione admin.pannello Scaricare le build alpha
   download.alpha …» diventa un blocco di testo in cui non si distingue una voce dall'altra.
   Una per riga, il codice a destra in monospaziato: si legge come un elenco perché è un elenco. */

.vetro-pannello .riga {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--filetto-tenue);
}
.vetro-pannello .riga:last-of-type { border-bottom: 0; }
.vetro-pannello .riga code { margin-left: auto; color: var(--terziario); font-size: var(--t-xs); }
.vetro-pannello .riga input[type="checkbox"] { flex: none; }

.vetro-pannello .ruolo { margin-bottom: var(--s5); }
.vetro-pannello .ruolo h3 { margin-bottom: var(--s2); }
.vetro-pannello .ruolo button { margin-top: var(--s3); }

/* La riga «aggiungi»: campo che si allarga, bottone che non si stringe. */
.vetro-pannello .riga-aggiungi { display: flex; gap: var(--s3); align-items: center; }
.vetro-pannello .riga-aggiungi input[type="text"],
.vetro-pannello .riga-aggiungi input[type="email"] {
  flex: 1;
  font: inherit;
  color: var(--testo);
  background: color-mix(in srgb, var(--fondo) 60%, transparent);
  border: 1px solid var(--filetto);
  border-radius: 10px;
  padding: var(--s2) var(--s3);
}
.vetro-pannello .riga-aggiungi .btn { flex: none; }

/* I campi del modulo di configurazione, dentro il vetro. */
.vetro-pannello .modulo-admin label,
.vetro-pannello > form label { display: block; }
.vetro-pannello input[type="text"],
.vetro-pannello input[type="email"],
.vetro-pannello input[type="url"],
.vetro-pannello input[type="number"],
.vetro-pannello input[type="password"],
.vetro-pannello textarea,
.vetro-pannello select {
  font: inherit;
  color: var(--testo);
  background: color-mix(in srgb, var(--fondo) 60%, transparent);
  border: 1px solid var(--filetto);
  border-radius: 10px;
  padding: var(--s2) var(--s3);
}

/* ---- Le tabelle dentro i pannelli ----
   Tre difetti visti guardando le schermate del pannello, non dedotti dal codice. */

/* 1. «Sospendi» e «Cancella» andavano a capo uno sotto l'altro e raddoppiavano l'altezza di
      ogni riga: il pannello di vetro è più stretto della colonna di prima, e il `flex-end`
      ereditato non bastava a tenerli in linea. */
.vetro-pannello .azioni-riga {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s2);
  justify-content: flex-end;
  white-space: nowrap;
}
.vetro-pannello .azioni-riga form { margin: 0; }
.vetro-pannello .azioni-riga .btn { font-size: var(--t-xs); padding: 0.35em 0.7em; }

/* 2. Il valore in monospaziato e la sua nota erano appiccicati — «@azienda.ittutti i
      dipendenti» — perché fra un <code> e uno <small> non c'è spazio che tenga. */
.vetro-pannello td code + small,
.vetro-pannello td small { margin-left: var(--s2); color: var(--terziario); }

.vetro-pannello table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.vetro-pannello th {
  text-align: left;
  font-weight: 500;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--terziario);
  padding: 0 var(--s3) var(--s2) 0;
  border-bottom: 1px solid var(--filetto);
}
.vetro-pannello td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--filetto-tenue);
  vertical-align: middle;
}
.vetro-pannello tr:last-child td { border-bottom: 0; }

/* 3. I campi corti — porta, durate, prezzo — occupavano una riga intera ciascuno, e una
      scheda di sei impostazioni diventava un rotolo verticale. */
.vetro-pannello input[type="number"] { max-width: 12rem; }

/* ---- Le schede dei dati: coppie etichetta/valore, non tabelle di prosa ---- */

.vetro-dati { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); margin: 0; }
.vetro-dati dt {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--terziario);
  align-self: baseline;
}
.vetro-dati dd { margin: 0; }

/* ---- Le build da scaricare: ognuna è una card, non una riga di tabella ---- */

.vetro-build {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--filetto-tenue);
}
.vetro-build:last-child { border-bottom: 0; padding-bottom: 0; }
.vetro-build .quale { flex: 1 1 16rem; min-width: 0; }
.vetro-build .quale strong { display: block; font-size: var(--t-m); }
.vetro-build .quale small { color: var(--terziario); font-family: var(--mono); font-size: var(--t-xs); }

.vetro-etichetta {
  display: inline-block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.vetro-etichetta.alpha { color: var(--aperto); }
.vetro-etichetta.beta { color: var(--segnale); }
.vetro-etichetta.stabile { color: var(--verificato); }

/* ---- L'avviso dell'anteprima ---- */

.vetro-avviso {
  border: 1px solid var(--aperto);
  border-left-width: 3px;
  border-radius: 12px;
  padding: var(--s4) var(--s5);
  margin-bottom: var(--s6);
  background: color-mix(in srgb, var(--aperto) 8%, transparent);
}
.vetro-avviso p { margin: 0 0 var(--s1); font-size: var(--t-s); color: var(--secondario); }
.vetro-avviso p:last-child { margin: 0; }
.vetro-avviso strong { color: var(--aperto); }
.vetro-avviso.fatto { border-color: var(--verificato); background: color-mix(in srgb, var(--verificato) 8%, transparent); }
.vetro-avviso.fatto strong { color: var(--verificato); }

/* ---- Il piede ---- */

.vetro-piede {
  padding: var(--s5);
  border-top: 1px solid var(--filetto);
  color: var(--terziario);
  font-size: var(--t-s);
}
.vetro-piede p { margin: 0; }

/* ---- Il bottone fantasma, che di là si chiama .btn--ghost ---- */

.btn.fantasma {
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  color: var(--testo);
  border: 1px solid var(--filetto);
}
.btn.fantasma:hover { border-color: var(--secondario); }

@media (max-width: 46rem) {
  .vetro-testata { flex-wrap: wrap; gap: var(--s3); }
  .vetro-schede { gap: var(--s4); padding: 0 var(--s4); overflow-x: auto; }
  .vetro-fuori { margin-left: 0; }
  .vetro-corpo { padding: var(--s5) var(--s4) var(--s7); }
  .vetro-dati { grid-template-columns: 1fr; gap: var(--s1) 0; }
  .vetro-dati dd { margin-bottom: var(--s3); }
}

/* Chi ha chiesto meno movimento non deve subire il blur, che su schermi lenti è movimento
   percepito quando la pagina scorre sotto la testata. */
@media (prefers-reduced-motion: reduce) {
  .vetro-testata, .vetro-pannello { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .vetro-testata { background: var(--fondo); }
  .vetro-pannello { background: var(--superficie); }
}

/* ---------- La testata del pannello ---------- */
/* Quattro pagine invece di una: senza una navigazione stabile sarebbero quattro pagine
   sconnesse, che e` peggio di una lunga. */

.pannello-testata {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s3) var(--s5);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--filetto);
  background: var(--fondo-tenue, transparent);
}
.pannello-marchio {
  font-weight: 650;
  text-decoration: none;
  color: var(--testo);
  letter-spacing: -0.01em;
}
.pannello-marchio span { font-weight: 400; color: var(--terziario); }

.pannello-nav { display: flex; flex-wrap: wrap; gap: var(--s4); }
.pannello-nav a {
  text-decoration: none;
  color: var(--secondario);
  font-size: var(--t-s);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.pannello-nav a:hover { color: var(--testo); }
/* La voce attiva si riconosce dal filetto, non solo dal colore: il colore da solo sparisce
   per chi non lo distingue. */
.pannello-nav a.qui { color: var(--testo); border-bottom-color: var(--segnale); }

.pannello-fuori {
  margin-left: auto;
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  font-size: var(--t-s);
}
.pannello-fuori a { color: var(--secondario); text-decoration: none; }
.pannello-fuori a:hover { color: var(--testo); }
.pannello-fuori form { margin: 0; }
.pannello-fuori button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--secondario);
  cursor: pointer;
}
.pannello-fuori button:hover { color: var(--testo); }

/* ---------- Gli elenchi del pannello ---------- */

.admin-elenco { margin-top: var(--s8); }
.admin-elenco h2 { font-size: var(--t-l); margin-bottom: var(--s4); }
.admin-elenco table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.admin-elenco th {
  text-align: left; font-weight: 600; font-size: var(--t-xs);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--terziario);
  border-bottom: 1px solid var(--filetto); padding: var(--s2) var(--s3) var(--s2) 0;
}
.admin-elenco td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-bottom: 1px solid var(--filetto-tenue);
  vertical-align: baseline;
}
.admin-elenco td small { display: block; color: var(--terziario); }
.admin-elenco .quando { font-family: var(--mono); font-size: var(--t-xs); color: var(--terziario); }

/* Le azioni di riga sono form separati: senza flex si impilerebbero, perché un form è un
   blocco. */
.admin-elenco .azioni-riga { display: flex; gap: var(--s2); justify-content: flex-end; }
.admin-elenco .azioni-riga .btn { font-size: var(--t-xs); padding: 0.35em 0.7em; }

/* Un'azione che cancella non deve somigliare a una che salva. */
.btn.pericolo { border-color: var(--negato); color: var(--negato); }
.btn.pericolo:hover { background: var(--negato-tenue); }

.riga-aggiungi { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.riga-aggiungi input { flex: 1 1 12rem; }
.modulo-admin select, .riga-aggiungi input {
  font: inherit; font-size: var(--t-s); font-family: var(--mono);
  padding: 0.55em 0.7em; border: 1px solid var(--filetto); border-radius: 6px;
  background: var(--fondo); color: var(--testo);
}
.modulo-admin select { width: 100%; }

/* ---------- Le build nell'area riservata ---------- */

.build article {
  border: 1px solid var(--filetto);
  border-radius: 10px;
  padding: var(--s5);
  margin-bottom: var(--s5);
  background: var(--superficie);
}
.build h2 { font-size: var(--t-l); margin: 0 0 var(--s3); border: 0; padding: 0; }
.build .dettagli {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: var(--t-xs); color: var(--terziario);
  margin-bottom: var(--s4);
}
.build .note { color: var(--secondario); }

/* L'impronta si mostra perché venga confrontata: va per intero e deve poter essere
   selezionata tutta, quindi non si spezza e scorre da sola se non ci sta. */
.build .impronta {
  margin: var(--s4) 0 0;
  font-size: var(--t-xs);
  color: var(--terziario);
}
.build .impronta code {
  display: block;
  margin-top: var(--s1);
  overflow-x: auto;
  white-space: nowrap;
  background: none;
  padding: 0;
}

.uscita { margin-top: var(--s7); }
.admin-elenco .ritirata td { opacity: 0.55; }
.admin-elenco .assegna { display: flex; gap: var(--s2); align-items: center; }
.admin-elenco .ruolo {
  border: 1px solid var(--filetto); border-radius: 8px;
  padding: var(--s4); margin-bottom: var(--s4);
}
.admin-elenco .ruolo h3 { margin: 0 0 var(--s3); font-size: var(--t-m); }

/* ---------- Il profilo ---------- */

.scheda { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s5); margin: 0 0 var(--s6); }
.scheda dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--terziario); }
.scheda dd { margin: 0; }

/* La cancellazione sta staccata e non ha l'aria di un'azione primaria. */
.cancellazione { margin-top: var(--s5); }
.cancellazione .riga { display: flex; gap: var(--s3); align-items: baseline; margin-bottom: var(--s3); }
.cancellazione button { margin-top: var(--s3); }

.uscita { display: flex; gap: var(--s3); align-items: center; margin-top: var(--s7); }