/* ============================================================================
   L'AREA RISERVATA — IL SISTEMA. Si legge prima di toccare un tag.
   ============================================================================

   PERCHE' ESISTE. Il 19/09/2026 Francesco ha chiesto che la qualita' grafica
   dell'area migliorasse «drasticamente». Aperte tutte e sedici le schermate a
   1440 e a 390, il difetto non era il CSS di una pagina: era che il guscio non
   esisteva come oggetto. Quattro testate diverse per una sola area — il
   portfolio con barra nera e pastiglia di ruolo, l'onboarding con una barra
   bianca minima, `account.php` con IL MENU DEL SITO PUBBLICO addosso a un
   utente gia' dentro, l'admin con la sua — e millecinquecento righe di stile
   sparse in sedici file piu' 149 attributi `style=`. Ogni pagina si
   ridisegnava da capo, e nessuna sapeva che cosa fossero il rosso o il grigio.

   Tanto che `assets/auth.css` dichiarava in cima «i valori sono
   approssimazioni — calibrare sui colori brand reali»: l'accento dell'area era
   `#b18454`, un MARRONE, mentre il rosso del marchio, misurato in `css/`, e'
   `rgb(180 1 1)`. E in `onboarding.php` ne viveva un terzo, `#7C2D12`.

   ---------------------------------------------------------------------------
   1. LA DIREZIONE
   ---------------------------------------------------------------------------

   TESI VISIVA — il dossier riservato che un advisor mette in mano
   all'investitore: carta, inchiostro, filetti sottili. Le cifre si leggono
   come in un bilancio, non come in un cruscotto, e la marcatura rossa del
   marchio compare UNA volta per schermata, dove si agisce.

   DIREZIONE — editoriale. Il testo ha una misura (66ch), i titoli sono in
   Playfair, le cifre sono in Playfair e allineate in colonna con
   `tabular-nums`, le sezioni si separano con un filetto e con lo spazio.

   LA COSA CHE NON FAREMO — NIENTE RIQUADRI E NIENTE PASTIGLIE PIENE.
   Nessuna card bianca bordata su fondo grigio: era la forma dominante
   dell'area e il segno piu' affidabile che nessuno aveva composto niente.
   Nessun badge pieno colorato: lo stato si dice con una parola e un pallino.
   Chi ha bisogno di un riquadro per far capire che due cose stanno insieme
   non ha ancora provato con lo spazio.

   ---------------------------------------------------------------------------
   2. IL ROSSO FA UN MESTIERE SOLO
   ---------------------------------------------------------------------------

   Misurato sul portfolio prima di questo file: il rosso era addosso al logo,
   alla pastiglia del ruolo, al bottone d'azione, alla scheda attiva, al
   prezzo, all'occhiello di categoria, al pin della regione e al badge di
   stato. Otto mestieri: un accento che tocca tutto non accenta niente.

   Da qui in avanti il rosso e' AZIONE E POSIZIONE, e basta: il fondo del
   pulsante primario, il filetto sotto la voce di menu corrente, il richiamo
   di cio' che aspetta una decisione. Le cifre sono inchiostro. Gli occhielli
   sono grigi. Gli stati sono parole.
   ========================================================================= */

/* I TOKEN STANNO IN assets/token.css, e questo foglio NON li ridichiara.
   Sono in un file loro perche' index.php — la porta dell'area — li usa e non
   puo' caricare questo foglio: porterebbe con se' `main { padding }` e
   `.container-x`, che sulla pagina pubblica litigano con site-header.css.
   Una pagina che carica area.css DEVE caricare anche token.css: lo fanno
   guscio.php e recover.php, che sono le due sole sedi che collegano i fogli. */


/* ═══════════════════════════════════════════════════════════════════════
   FONDAMENTA
   ═══════════════════════════════════════════════════════════════════════ */

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

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  color: var(--c-inchiostro);
  background: var(--c-carta);
  font-size: var(--t-corpo);
  line-height: 1.6;
  margin: 0;
}

/*
 * I titoli. Il selettore parte da `body` per un motivo preciso, non per
 * abitudine: Tailwind arriva dal CDN e inietta il suo preflight in un
 * <style> in fondo al <head>, cioe' DOPO questo foglio. Il preflight azzera
 * `h1 { font-size: inherit; font-weight: inherit }`, e a parita' di peso
 * vince chi arriva dopo: «Registro degli accessi» usciva a 16 px, grande
 * come il testo sotto. Un elemento in piu' nel selettore basta, e si vede
 * quale regola vince senza contare gli !important.
 */
body h1, body h2, body h3, body h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  /*
   * `inherit` E NON `var(--c-inchiostro)`, ed e' la differenza fra una
   * schermata leggibile e una no (20/09/2026).
   *
   * Era una regola DIRETTA sull'h1, e batteva il colore EREDITATO da un
   * contenitore: in admin/opportunity-edit.php la testata scura scriveva
   * `color:#fff` su se stessa e contava sull'ereditarieta', e il nome della
   * struttura usciva NERO SU NERO — 1,1:1, il titolo della schermata
   * illeggibile. Nessuna prova lo vedeva: il markup c'era, il testo c'era,
   * il contrasto no.
   * Con `inherit` il corpo resta inchiostro (lo eredita da `body`) e un
   * contenitore che sceglie un colore se lo tiene.
   */
  color: inherit;
  line-height: 1.15;
  margin: 0;
}

body h1 { font-size: var(--t-h1); }
body h2 { font-size: var(--t-h2); }
body h3 { font-size: var(--t-h3); }

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

/* La misura di riga. E' il singolo cambiamento che si sente di piu': prima
   le note dell'admin correvano per 1.320 px, cioe' 170 caratteri. */
.misura  { max-width: var(--misura); }
.attacco { max-width: var(--misura-lead); font-size: var(--t-attacco); color: var(--c-grigio); line-height: 1.65; }

.container-x { width: 100%; max-width: var(--colonna); margin: 0 auto; padding: 0 var(--s5); box-sizing: border-box; }
.container-stretto { max-width: 760px; }
/* La colonna del passo dell'onboarding: piu' larga della stretta perche'
   ci sta dentro anche il visore dell'accordo, piu' stretta della piena
   perche' e' una schermata che si LEGGE. Era un `style="max-width:900px"`
   addosso al contenitore: un numero che il sistema non conosceva. */
.container-passo { max-width: 900px; }

/* ═══════════════════════════════════════════════════════════════════════
   IL GUSCIO — uno solo, per l'admin e per chi non lo e'.
   ═══════════════════════════════════════════════════════════════════════ */

.guscio-barra {
  background: #0A0A0A;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
/* UN'ANCORA NON FINISCE SOTTO LA BARRA. La barra e' fissa in cima, e una pagina
   che si apre su `#grado`, `#accesso` o `#v-5.3` metteva il titolo della sezione
   SOTTO di lei: si arrivava su un modulo senza sapere di chi fosse. Trovato il
   20/09 guardando dove atterrava il rimando dopo un salvataggio. Le due misure
   sono quelle della barra, MISURATE con getBoundingClientRect (a occhio, su una
   fotografia, avevo letto 146 e il titolo restava coperto di 6 px): 104 px a
   schermo largo, 168 sul telefono dove le voci vanno su tre righe, piu' 16. */
:target { scroll-margin-top: 120px; }
/* SUL TELEFONO LA BARRA NON RESTA IN CIMA (20/09/2026, scelta di Francesco).
   E' alta 177 px: il 31% di un iPhone SE e il 21% di un iPhone 15, e appiccicata
   se li teneva su ogni schermata. Nove voci admin a 11 px non stanno in meno di
   tre righe, e lo scorrimento orizzontale era gia' stato scartato — nascondeva
   cinque voci senza dirlo (il perche' e' scritto sopra `@media (max-width:860px)`).
   Cosi' la barra c'e' dove serve, in cima alla pagina, e il contenuto ha tutto
   lo schermo. Sul tablet resta appiccicata: li' e' il 14%.

   E LE ANCORE SEGUONO. Il margine di 184 px esisteva perche' la barra copriva
   il titolo: senza barra fissa quel margine lascerebbe il titolo 184 px piu' in
   basso del punto in cui si arriva, cioe' lo stesso difetto al contrario. Le
   due righe si muovono insieme, o non si muove nessuna. */
@media (max-width: 720px) {
  .guscio-barra { position: static; }
  :target { scroll-margin-top: var(--s4); }
}
/* LA FASCIA DI MEZZO, che non copriva nessuno. Fra 721 e 860 px la barra resta
   appiccicata E le voci vanno su due righe: e' alta 142, non 113, e il margine
   da 120 lasciava il titolo coperto di 4 px. Misurato a 768 — un iPad in
   verticale — dopo aver tolto l'appiccico al telefono: prima il difetto stava
   li' lo stesso e nessuno lo guardava. 142 piu' 16 di aria. */
@media (min-width: 721px) and (max-width: 860px) { :target { scroll-margin-top: 158px; } }
/* E IL FOGLIO «MENU» SCORRE PER CONTO SUO (revisione del 01/10). Dal 01/10 la barra e' una riga sola, e il
   foglio si apre dentro di lei: fra 721 e 860 la barra e' appiccicata, e su un telefono in orizzontale
   (844x390) le voci in fondo al foglio non si raggiungevano, perche' scorrendo la pagina la barra restava li'. */
@media (min-width: 721px) and (max-width: 860px) {
  .guscio-tutto.is-aperto { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; }
}

.guscio-barra a { color: inherit; text-decoration: none; }

.guscio-testa {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 56px;
  padding: var(--s3) 0;
}

.guscio-marchio { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }
.guscio-marchio img { height: 26px; display: block; filter: brightness(0) invert(1); }

/* Il nome dell'area sta accanto al logo, separato da un filetto verticale:
   non e' una pastiglia rossa: quella era una delle otto cose rosse. */
.guscio-dove {
  padding-left: var(--s3);
  border-left: var(--filetto) solid rgba(255,255,255,.22);
  font-size: var(--t-occhiello);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
}

/*
 * Chi sei e come esci. E' l'unica parte elastica della riga: quando lo
 * schermo stringe deve cedere LEI, non la barra allargare il documento.
 * Misurato a 390 px prima di questa regola: il pulsante «Esci» finiva a
 * 412, cioe' 22 pixel fuori dal telefono, e tutte e dieci le schermate
 * dell'admin scorrevano in orizzontale.
 */
.guscio-chi {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  flex: 0 1 auto;
}

.guscio-chi .chi-mail {
  font-size: var(--t-didascalia);
  color: rgba(255,255,255,.66);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28ch;
  min-width: 0;
  flex: 0 1 auto;
}

/* «Esci» era alto 35 px: il bersaglio piu' piccolo dell'area, e l'unico che
   sta su OGNI schermata — 225 misure su 243 lo accusavano, dal telefono da
   320 al tablet in orizzontale. 44 px e' la stessa soglia che i pulsanti del
   sistema hanno gia' («il bersaglio da premere, anche su desktop»), e serve
   `inline-flex` perche' con un `min-height` su un `button` il testo resta
   attaccato in alto. Misurato il 20/09. */
.guscio-esci {
  background: none;
  border: var(--filetto) solid rgba(255,255,255,.28);
  color: rgba(255,255,255,.9);
  font: inherit;
  font-size: var(--t-occhiello);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: var(--s2) var(--s3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease-out, color .18s ease-out;
}
.guscio-esci:hover { background: #fff; color: #0A0A0A; }
.guscio-esci:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- LE VOCI A GRUPPI (01/10/2026, Francesco: «un menù di navigazione più
       sofisticato»; forma scelta: barra a gruppi con tendine, admin e Partner).
       Una fila di link diretti e di gruppi; un gruppo apre il suo PANNELLO
       sotto di se': carta bianca sul nero della barra, ogni voce col nome e
       una riga che dice a cosa serve. Raggio zero come tutta l'area, un'ombra
       sola (il pannello e' l'unica cosa che sta sopra la pagina), il rosso
       solo per «sei qui» e per «c'e' qualcosa da fare». Niente numeri nella
       barra (Francesco, 27/09). -------------------------------------------- */
.guscio-voci { border-top: var(--filetto) solid rgba(255,255,255,.12); }
.guscio-lista { display: flex; gap: var(--s6); margin: 0; padding: 0; list-style: none; align-items: stretch; }
.guscio-elemento { position: relative; display: flex; }
.guscio-voce {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: var(--t-didascalia);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,.62);
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease-out, border-color .18s ease-out;
}
/* `.guscio-barra a { color: inherit }` pesa (0,1,1) e batte `.guscio-voce`
   (0,1,0): il bianco al 62% va riscritto con la barra davanti (trovato il
   20/09 leggendo il colore CALCOLATO). */
.guscio-barra .guscio-voce { color: rgba(255,255,255,.62); }
.guscio-barra .guscio-voce:hover,
.guscio-barra .guscio-gruppo[aria-expanded="true"] { color: #fff; }
.guscio-voce:hover,
.guscio-gruppo[aria-expanded="true"] { border-bottom-color: rgba(255,255,255,.55); }
/* «Sei qui»: la voce, o il gruppo che la contiene, rossa col filetto rosso. */
.guscio-barra .guscio-voce[aria-current="page"],
.guscio-barra .guscio-gruppo.is-corrente { color: var(--c-rosso-su-nero); border-bottom-color: var(--c-rosso-su-nero); }
/* «C'e' qualcosa da fare»: solo il TESTO rosso, il filetto resta di «sei qui». */
.guscio-barra .guscio-voce--avviso,
.guscio-barra .guscio-gruppo--avviso { color: var(--c-rosso-su-nero); }
.guscio-voce:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.guscio-gruppo svg { flex: 0 0 auto; transition: transform .15s ease-out; }
.guscio-gruppo[aria-expanded="true"] svg { transform: rotate(180deg); }
.guscio-gruppo-titolo { display: none; }

/* Il pannello si apre col SOLO aria-expanded del suo pulsante, non con l'attributo `hidden`: il Tailwind
   dell'area dichiara `[hidden] { display: none !important }`, e sul telefono, dove i pannelli devono stare
   tutti aperti nel foglio, nessuna regola riusciva a riaprirli (visto nella prima fotografia a 390). */
.guscio-pannello { display: none; }
.guscio-gruppo[aria-expanded="true"] ~ .guscio-pannello { display: block; }
.guscio-pannello {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--s4));
  z-index: 60;
  min-width: 340px;
  background: var(--c-carta);
  color: var(--c-inchiostro);
  border: var(--filetto) solid var(--c-filo);
  border-top: 2px solid var(--c-inchiostro);
  box-shadow: 0 16px 40px rgba(20,20,15,.18);
  padding: var(--s2) 0;
}
.guscio-pannello ul { list-style: none; margin: 0; padding: 0; }
.guscio-sottovoce {
  display: grid;
  gap: 2px;
  padding: var(--s3) var(--s5) var(--s3) var(--s4);
  border-left: 2px solid transparent;
  transition: background .15s ease-out;
}
.guscio-sottovoce__nome { font-size: var(--t-corpo); font-weight: 500; line-height: 1.3; }
.guscio-sottovoce__cosa { font-size: var(--t-didascalia); color: var(--c-grigio); line-height: 1.4; }
.guscio-sottovoce:hover { background: var(--c-velo); }
.guscio-sottovoce:focus-visible { outline: 2px solid var(--c-rosso); outline-offset: -2px; }
.guscio-sottovoce[aria-current="page"] { border-left-color: var(--c-rosso); }
.guscio-sottovoce[aria-current="page"] .guscio-sottovoce__nome,
.guscio-sottovoce--avviso .guscio-sottovoce__nome { color: var(--c-rosso); }

/* Account accanto all'email: e' tuo, non del lavoro. */
.guscio-io-voce { font-size: var(--t-didascalia); white-space: nowrap; border-bottom: 1px solid transparent; }
/* Con la barra davanti, o `.guscio-barra a { color: inherit }` (0,1,1) lo lascia bianco pieno. */
.guscio-barra .guscio-io-voce { color: rgba(255,255,255,.66); }
.guscio-barra .guscio-io-voce:hover { color: #fff; border-bottom-color: rgba(255,255,255,.55); }
.guscio-barra .guscio-io-voce[aria-current="page"] { color: var(--c-rosso-su-nero); border-bottom-color: var(--c-rosso-su-nero); }
.guscio-io-voce:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.guscio-menu, .guscio-io { display: none; }

/* LA LINGUA (08/10/2026): due sigle accanto ad «Account». La corrente e' bianca e sottolineata, l'altra
   grigia come le voci a riposo; niente rosso, che resta di «sei qui» e di «c'e' qualcosa da fare». Il
   bersaglio e' alto 44 px come «Esci»: la sottolineatura sta sul testo, non sul bordo del pulsante. */
.guscio-lingua { display: flex; gap: var(--s1); margin: 0; }
.guscio-lingua button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 32px;
  padding: 0 var(--s1); background: none; border: 0; font: inherit; font-size: var(--t-didascalia);
  font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.5); cursor: pointer;
  text-decoration: underline 1px transparent; text-underline-offset: 5px;
  transition: color .18s ease-out, text-decoration-color .18s ease-out;
}
.guscio-lingua button:hover { color: #fff; }
.guscio-lingua button[aria-pressed="true"] { color: #fff; text-decoration-color: #fff; cursor: default; }
.guscio-lingua button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .guscio-lingua button { transition: none; } }
@media (prefers-reduced-motion: reduce) { .guscio-gruppo svg, .guscio-sottovoce, .guscio-voce { transition: none; } }

/*
 * LA NOTA BETA (22/09/2026, Francesco: «elegante e discreta, in ogni pagina»).
 * Una fascia sotto la barra, non un riquadro e non un avviso giallo: un
 * occhiello e una riga in grigio, come la didascalia di un dossier. Non e'
 * appiccicata: si legge una volta e scorre via con la pagina. Il collegamento
 * e' l'unica cosa in inchiostro, con la sottolineatura chiara a riposo e
 * piena al passaggio: in una riga grigia un link senza sottolineatura non
 * si vede, e il rosso qui non serve, perche' non e' ne' azione ne' posizione.
 * La disegna guscio_barra(), quindi sta in tutte le schermate col guscio.
 */
.guscio-beta {
  background: var(--c-carta-2);
  border-bottom: var(--filetto) solid var(--c-filo);
  color: var(--c-grigio);
  font-size: var(--t-piccolo);
  line-height: 1.5;
}
.guscio-beta p { margin: 0 auto; padding-top: var(--s2); padding-bottom: var(--s2); }
.guscio-beta__occhiello {
  font-size: var(--t-occhiello);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-right: var(--s2);
  white-space: nowrap;
}
.guscio-beta a {
  color: var(--c-inchiostro);
  text-decoration: underline;
  text-decoration-color: var(--c-filo-3);
  text-underline-offset: 2px;
}
.guscio-beta a:hover { text-decoration-color: var(--c-inchiostro); }
.guscio-beta a:focus-visible { outline: 2px solid var(--c-inchiostro); outline-offset: 2px; }
/* Nel recupero password la scheda E' la pagina: la nota la chiude, col
   filetto sopra invece che sotto, senza fascia, centrata come il resto. */
.guscio-beta--scheda {
  background: none;
  border-bottom: 0;
  border-top: var(--filetto) solid var(--c-filo);
  margin: var(--s5) 0 0;
  padding: var(--s4) 0 0;
  text-align: center;
}
/* Nella scheda l'occhiello resta IN LINEA anche sul telefono: la scheda ha
   circa 300 px utili, e a blocco aggiungeva una riga lasciando «scrivici»
   orfano sulla quarta (visto a 390). Peso (0,2,0): vince sulla regola del
   telefono qui sotto, che pesa (0,1,0), in qualunque ordine stiano. */
.guscio-beta--scheda .guscio-beta__occhiello { display: inline; margin: 0 var(--s2) 0 0; }

/*
 * QUELLO CHE SI ASCOLTA E NON SI VEDE — e che non deve spostare niente.
 *
 * Mancava `left`, e senza `left` un elemento in posizione assoluta resta
 * dove lo avrebbe messo il flusso. Misurato il 20/09 sul registro accessi a
 * 390 px: uno di questi span da UN PIXEL stava a x 402, e il documento
 * usciva a 404. Nessun elemento visibile era fuori — la tabella larga sta in
 * un contenitore che scorre, e il rilevatore la accusava a torto — e il
 * numero cambiava fra una corsa e l'altra, perche' la posizione statica la
 * decide il contenuto della riga. Con `left: 0` il documento torna a 390
 * esatti.
 *
 * Il resto della ricetta (`margin: -1px`, `clip-path`) e' quello standard:
 * `clip` e' deprecato ma serve ancora, `clip-path` e' il suo seguito.
 */
.solo-voce {
  position: absolute;
  left: 0;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* SOTTO I 860 PX LE VOCI STANNO DIETRO «MENU» (01/10/2026). Prima andavano su
   quattro righe di maiuscole spaziate, alte 175 px a 390: un muro sopra ogni
   schermata. Adesso la barra e' una riga sola, e «Menu» apre un foglio con
   tutte le voci, i gruppi come titoletti e la riga che dice a cosa servono. */
@media (max-width: 860px) {
  .guscio-menu {
    display: inline-flex; align-items: center; min-height: 44px; padding: var(--s2) var(--s3);
    background: #fff; color: #0A0A0A; border: 0; font: inherit; font-size: var(--t-occhiello);
    letter-spacing: .18em; text-transform: uppercase; font-weight: 700; cursor: pointer;
  }
  .guscio-menu[aria-expanded="true"] { background: var(--c-rosso-su-nero); color: #fff; }
  .guscio-menu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .guscio-chi .chi-mail, .guscio-chi .guscio-io-voce, .guscio-chi .guscio-lingua { display: none; }
  .guscio-tutto { display: none; padding-bottom: var(--s5); }
  .guscio-tutto.is-aperto { display: block; }
  .guscio-lista { flex-direction: column; gap: 0; }
  .guscio-elemento { display: block; }
  .guscio-gruppo { display: none; }
  .guscio-gruppo-titolo {
    display: block; padding: var(--s5) 0 var(--s1); font-size: var(--t-occhiello); letter-spacing: .2em;
    text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.5);
  }
  .guscio-pannello { display: block; position: static; min-width: 0; background: none; color: #fff; border: 0; box-shadow: none; padding: 0; }
  .guscio-sottovoce { padding: var(--s2) 0 var(--s2) var(--s3); }
  .guscio-sottovoce__cosa { color: rgba(255,255,255,.55); }
  .guscio-sottovoce:hover { background: rgba(255,255,255,.06); }
  .guscio-sottovoce[aria-current="page"] { border-left-color: var(--c-rosso-su-nero); }
  .guscio-sottovoce[aria-current="page"] .guscio-sottovoce__nome,
  .guscio-sottovoce--avviso .guscio-sottovoce__nome { color: var(--c-rosso-su-nero); }
  .guscio-sottovoce:focus-visible { outline-color: #fff; }
  .guscio-elemento--link .guscio-voce {
    display: flex; padding: var(--s3) 0 var(--s2) var(--s3); border-bottom: 0; border-left: 2px solid transparent;
    font-size: var(--t-corpo); font-weight: 500; letter-spacing: 0; text-transform: none; color: #fff;
  }
  .guscio-barra .guscio-elemento--link .guscio-voce { color: #fff; }
  /* Il bianco qui sopra pesa (0,3,0) e batteva il rosso del richiamo (0,2,0): «Il tuo percorso» usciva bianca. */
  .guscio-barra .guscio-elemento--link .guscio-voce--avviso { color: var(--c-rosso-su-nero); }
  /* «Menu» contiene tutto: se una voce ha qualcosa da fare lo dice lui, con un filetto rosso (il fondo rosso
     resta di «aperto»). */
  .guscio-menu--avviso { box-shadow: inset 0 -3px 0 var(--c-rosso-su-nero); }
  .guscio-barra .guscio-elemento--link .guscio-voce[aria-current="page"] { color: var(--c-rosso-su-nero); border-left-color: var(--c-rosso-su-nero); }
  .guscio-io {
    display: flex; gap: var(--s3); align-items: baseline; justify-content: space-between; margin: var(--s5) 0 0;
    padding-top: var(--s3); border-top: var(--filetto) solid rgba(255,255,255,.12);
    font-size: var(--t-didascalia); color: rgba(255,255,255,.66);
  }
  .guscio-io span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .guscio-io a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .guscio-io a[aria-current="page"] { color: var(--c-rosso-su-nero); }
  /* La lingua sotto email e «Account», nello stesso blocco: niente secondo filetto. first-of-type, non
     first-child: il primo figlio del modulo e' il gettone nascosto (misurato a 390 l'08/10). */
  .guscio-io--lingua { margin-top: 0; padding-top: var(--s1); border-top: 0; justify-content: flex-start; }
  .guscio-io--lingua .guscio-lingua button:first-of-type { padding-left: 0; justify-content: flex-start; }
}


@media (max-width: 720px) {
  .container-x { padding: 0 var(--s4); }
  /* La nota beta sul telefono: l'occhiello va su una riga sua, cosi' la frase
     sta in due righe e «scrivici» non resta orfano sulla terza (visto a 390). */
  .guscio-beta__occhiello { display: block; margin: 0 0 var(--s1); }
  .guscio-testa { gap: var(--s3); min-height: 48px; }
  .guscio-marchio img { height: 22px; }
  /* Il nome dell'area sparisce prima dell'identita': sul telefono la barra
     delle voci dice gia' dove sei, l'indirizzo con cui sei entrato no. */
  .guscio-dove { display: none; }
  .guscio-chi .chi-mail { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LA PAGINA — testata, sezioni, corsia delle etichette.
   ═══════════════════════════════════════════════════════════════════════ */

/* 96 px sotto l'ultima riga di ogni schermata erano uno schermo di telefono
   speso a non dire niente: chi arriva in fondo ha gia' capito che e' finita.
   Restano 64, che e' piu' dello stacco fra due sezioni (72 meno il filetto)
   e quindi si legge ancora come «qui finisce». */
main { display: block; padding: var(--s7) 0 var(--s8); }

.pagina-testa { margin-bottom: var(--s6); }

.occhiello {
  display: block;
  font-size: var(--t-occhiello);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-grigio);
  margin-bottom: var(--s2);
}

body .pagina-testa h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.pagina-testa .attacco { margin-top: var(--s3); }

/* Le azioni della testata stanno a destra del titolo, e vanno sotto sul
   telefono invece di stringere il titolo a una parola per riga. */
.pagina-testa-riga { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.pagina-testa-azioni { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/*
 * LA SEZIONE, che ha preso il posto della card.
 *
 * `.panel` era una scatola bianca bordata su fondo grigio, ripetuta
 * diciannove volte: e' il modo piu' veloce per far sembrare una schermata
 * un modulo amministrativo comprato altrove. Qui resta il nome — diciannove
 * chiamanti non si rinominano per gusto — ma la forma e' un filetto in alto
 * e dello spazio sotto. Il raggruppamento lo legge lo spazio, non il bordo.
 */
.panel,
.sezione {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--c-inchiostro);
  padding: var(--s4) 0 var(--s6);
  margin: 0 0 var(--s5);
}

/*
 * DUE SPAZI CHE FANNO LO STESSO MESTIERE NE FANNO UNO TROPPO GRANDE.
 * Era `padding: 24 0 48` PIU' `margin-bottom: 32`: fra la fine di una
 * sezione e il filetto della successiva c'erano 80 pixel, e con un `mt-5`
 * addosso al chiamante diventavano 100. Su una schermata con otto sezioni
 * corte — il registro onboarding — sono 800 pixel di scorrimento per
 * niente, ed e' la forma piu' comune dello «spreco di spazio»: non una
 * schermata vuota, una schermata giusta tirata in lungo.
 * Adesso 16 sopra, 32 sotto, 24 di stacco: 72 fra una sezione e l'altra,
 * che resta piu' dello spazio DENTRO il gruppo (16-24) — la regola che fa
 * leggere un raggruppamento senza disegnarci un bordo attorno.
 */

body .panel > h2,
body .sezione > h2 {
  font-size: var(--t-h3);
  margin: 0 0 var(--s5);
}

/* La testata di una sezione: etichetta piccola a sinistra, e un filetto
   sottile che corre fino a destra. E' l'unico ornamento che ci concediamo. */
.sezione-testa {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  border-top: 2px solid var(--c-inchiostro);
  padding-top: var(--s3);
  margin-bottom: var(--s4);
}
.sezione-testa .occhiello { margin: 0; }
.sezione-testa .a-destra { margin-left: auto; font-size: var(--t-piccolo); color: var(--c-grigio); }

/* La corsia. Etichetta a sinistra, contenuto nella colonna larga; sul
   telefono la corsia si scioglie e l'etichetta va sopra. */
.corsia { display: grid; grid-template-columns: var(--corsia) 1fr; gap: var(--s5); align-items: start; }
.corsia + .corsia { border-top: var(--filetto) solid var(--c-filo); padding-top: var(--s5); margin-top: var(--s5); }

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

/* ═══════════════════════════════════════════════════════════════════════
   LE CIFRE — si leggono come in un bilancio.
   ═══════════════════════════════════════════════════════════════════════ */

.cifre { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.cifra {
  padding: var(--s4) var(--s5) var(--s4) 0;
  border-right: var(--filetto) solid var(--c-filo);
}
.cifra:last-child { border-right: 0; }
/* La seconda cifra non comincia SUL filetto della prima. Visto il 20/09 su
   «Condizioni», il primo posto dove due cifre di questo foglio stanno accanto:
   «IN ARRIVO» toccava la riga verticale (admin/index.php se le ridisegna, e
   da solo lo stacco ce l'aveva gia'). */
.cifra + .cifra { padding-left: var(--s5); }

.cifra .etichetta { display: block; font-size: var(--t-occhiello); letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--c-grigio); margin-bottom: var(--s2); }
.cifra .valore    { font-family: 'Playfair Display', Georgia, serif; font-size: var(--t-cifra); line-height: 1; font-variant-numeric: lining-nums tabular-nums; display: block; }
.cifra .sotto     { display: block; font-size: var(--t-piccolo); color: var(--c-grigio); margin-top: var(--s2); }

/* Zero non e' un allarme: e' grigio, cosi' l'occhio va dove c'e' qualcosa. */
.cifra .valore.a-zero { color: var(--c-filo-3); }

@media (max-width: 720px) {
  .cifre { grid-template-columns: 1fr 1fr; }
  .cifra { border-right: 0; border-bottom: var(--filetto) solid var(--c-filo); padding-right: var(--s4); }
  .cifra + .cifra { padding-left: 0; }
  /* Una cifra SOLA non sta in mezza colonna: «Non pubblicate» andava a capo e il
     filetto sotto si fermava a meta' schermo. Visto a 390 px il 20/09.
     Vale per QUALUNQUE cifra dispari rimasta sola in fondo, non solo per il
     caso di una sola: in «Opportunita'» le cifre sono tre, la terza andava a
     capo da sola e il suo filetto si fermava a 190 px su 358. Una cifra sola
     e' `last-child` e in posizione dispari, quindi questa regola la comprende. */
  .cifra:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cifra .valore { font-size: 1.75rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   AZIONI
   ═══════════════════════════════════════════════════════════════════════ */

.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: inherit;
  font-size: var(--t-didascalia);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border: var(--filetto) solid transparent;
  border-radius: var(--raggio);
  padding: 12px 20px;
  min-height: 44px;           /* il bersaglio da premere, anche su desktop */
  box-sizing: border-box;
  cursor: pointer;
  transition: background-color .18s ease-out, color .18s ease-out, border-color .18s ease-out;
}

.btn-primary   { background: var(--c-rosso); color: #fff; }
.btn-primary:hover { background: var(--c-rosso-2); }

.btn-secondary { background: transparent; color: var(--c-inchiostro); border-color: var(--c-filo-2); }
.btn-secondary:hover { border-color: var(--c-inchiostro); }

.btn-ghost     { background: transparent; color: var(--c-grigio); padding-left: var(--s2); padding-right: var(--s2); }
.btn-ghost:hover { color: var(--c-inchiostro); }

.btn-danger    { background: transparent; color: var(--c-guasto); border-color: var(--c-guasto); }
.btn-danger:hover { background: var(--c-guasto); color: #fff; }

/* L'anello di focus. Era stato spento con `outline:none` in tre pagine —
   account, portfolio, modifica opportunita' — cioe' le tre piu' usate, e chi
   arriva col tastierino ci passava sopra senza vedere dove fosse. */
.btn-primary:focus-visible, .btn-secondary:focus-visible,
.btn-ghost:focus-visible, .btn-danger:focus-visible {
  outline: 2px solid var(--c-rosso);
  outline-offset: 2px;
}

.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: .45; cursor: not-allowed; }

/* Un pulsante dentro una griglia si stira per tutta la cella: `self-start`
   governa l'altra direzione e non basta. Un'azione larga 700 pixel non e'
   piu' visibile, e' solo piu' grande. */
.grid > .btn-primary, .grid > .btn-secondary, form.grid > .btn-primary,
.modulo > .btn-primary, .modulo > .btn-secondary, .modulo > button { justify-self: start; }

/* Un collegamento di testo dentro il contenuto. */
.rinvio { color: var(--c-inchiostro); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-filo-3); }
.rinvio:hover { text-decoration-color: var(--c-rosso); }
.rinvio:focus-visible { outline: 2px solid var(--c-rosso); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   CAMPI
   ═══════════════════════════════════════════════════════════════════════ */

.field-block { margin-bottom: var(--s4); }

.field-label {
  display: block;
  font-size: var(--t-occhiello);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-grigio);
  margin-bottom: var(--s2);
}

.field-input, input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"], select, textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  /* 16px pieni: sotto i 16 iOS ingrandisce la pagina al fuoco, e da li' in
     poi la schermata resta larga piu' del telefono. */
  font-size: 16px;
  color: var(--c-inchiostro);
  background: var(--c-carta);
  border: var(--filetto) solid var(--c-filo-2);
  border-radius: var(--raggio);
  padding: 11px 14px;
  min-height: 44px;
  transition: border-color .18s ease-out;
}

.field-input:hover, input:hover, select:hover, textarea:hover { border-color: var(--c-filo-3); }

.field-input:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--c-rosso);
  outline-offset: 1px;
  border-color: var(--c-rosso);
}

.field-input:disabled, input:disabled, select:disabled, textarea:disabled {
  background: var(--c-velo); color: var(--c-grigio); cursor: not-allowed;
}

.field-input::placeholder, input::placeholder, textarea::placeholder { color: #8A8A85; }

.field-aiuto { display: block; font-size: var(--t-didascalia); color: var(--c-grigio); margin-top: var(--s1); }

/* UN CAMPO DATA E' ALTO QUANTO GLI ALTRI. Misurato il 20/09 su «Pubblica»:
   la tendina accanto era 44 px, la data 50, e le due basi non si allineavano.
   Chrome da' ai pezzi interni della data (giorno, mese, anno) un'altezza
   propria, e `min-height` la lascia crescere: qui serve `height`. */
input[type="date"] { height: 44px; }

/* LA CONFERMA — una casella con la frase che si sottoscrive. La casella
   nativa e' 13 px attaccata al testo: troppo piccola da toccare e troppo
   leggera per un atto che non si annulla. Tutta la riga e' il bersaglio. */
.conferma { display: flex; align-items: center; gap: var(--s3); min-height: 44px; max-width: var(--misura); cursor: pointer; }
.conferma input[type="checkbox"] { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; accent-color: var(--c-rosso); cursor: pointer; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   MESSAGGI — un filetto a sinistra, nessun fondo colorato acceso.
   ═══════════════════════════════════════════════════════════════════════ */

/* Quattro e non tre: la nota neutra — «questo campo non c'e', ed e' normale»
   — non e' un errore ne' un'attesa, e ogni pagina che ne aveva bisogno se
   l'era disegnata in linea con un fondo e un filetto scelti a occhio. */
.msg-ok, .msg-err, .msg-attesa, .msg-nota {
  border-left: 3px solid;
  padding: var(--s3) var(--s4);
  font-size: var(--t-piccolo);
  margin-bottom: var(--s4);
  background: var(--c-carta-2);
}
.msg-ok     { border-color: var(--c-ok);     color: var(--c-ok); }
.msg-err    { border-color: var(--c-guasto); color: var(--c-guasto); }
.msg-attesa { border-color: var(--c-attesa); color: var(--c-attesa); }
.msg-nota   { border-color: var(--c-filo-3); color: var(--c-grigio); }
.msg-ok strong, .msg-err strong, .msg-attesa strong, .msg-nota strong { color: inherit; }

/* ═══════════════════════════════════════════════════════════════════════
   STATO — una parola e un pallino. Non una pastiglia piena.
   ═══════════════════════════════════════════════════════════════════════ */

.stato {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-didascalia);
  color: var(--c-grigio);
  white-space: nowrap;
}
.stato::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
/* Il `nowrap` e' giusto per la forma breve — «una parola e un pallino» — ma
   in «Onboarding» lo stato porta anche la versione dell'accordo, e a 320 px
   quella riga era larga 330 in un contenitore da 288: la pagina sbordava fino
   a 359. Sullo schermo stretto la riga va a capo; il pallino resta attaccato
   alla prima riga perche' e' `flex: 0 0 auto`. */
@media (max-width: 720px) { .stato { white-space: normal; } }
.stato-ok     { color: var(--c-ok); }
.stato-attesa { color: var(--c-attesa); }
.stato-spento { color: var(--c-filo-3); }
.stato-guasto { color: var(--c-guasto); }

/* Il ruolo e' un'etichetta, non un distintivo: era una pastiglia nera piena
   accanto a ogni nome, otto volte nella stessa schermata. */
.ruolo {
  font-size: var(--t-occhiello);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-grigio);
  white-space: nowrap;
}
.ruolo-admin { color: var(--c-rosso); }

/* ═══════════════════════════════════════════════════════════════════════
   TABELLE — da bilancio: filetti, niente zebra, numeri allineati.
   ═══════════════════════════════════════════════════════════════════════ */

.tabella { width: 100%; border-collapse: collapse; font-size: var(--t-piccolo); }

.tabella th {
  text-align: left;
  font-size: var(--t-occhiello);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-grigio);
  padding: 0 var(--s4) var(--s2) 0;
  border-bottom: var(--filetto) solid var(--c-filo-3);
  white-space: nowrap;
}

.tabella td { padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: var(--filetto) solid var(--c-filo); vertical-align: top; }
.tabella tr:hover td { background: var(--c-carta-2); }
.tabella .num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.tabella th:last-child, .tabella td:last-child { padding-right: 0; }

/* Una tabella larga non deve poter allargare la PAGINA: scorre lei. */
.tabella-scorre { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ═══════════════════════════════════════════════════════════════════════
   LO STATO VUOTO — e' una frase, non un riquadro con un'icona grigia.
   ═══════════════════════════════════════════════════════════════════════ */

/* Il filetto corre per tutta la colonna; e' il TESTO che ha una misura.
   Con `max-width` sul contenitore la riga si fermava a meta' schermo e
   sembrava un bordo rotto, non l'inizio di una sezione. */
.vuoto { border-top: 2px solid var(--c-inchiostro); padding: var(--s7) 0; }
body .vuoto h2 { font-size: var(--t-h3); margin-bottom: var(--s2); }
.vuoto p  { color: var(--c-grigio); font-size: var(--t-piccolo); max-width: var(--misura-lead); }

/* Un elenco di dati letti, non modificabili: etichetta sopra, valore sotto,
   e lo stacco fra due voci maggiore di quello fra etichetta e valore — e'
   cosi' che si legge una coppia senza disegnarci attorno un riquadro. */
.dati-conto { margin: 0; }
.dati-conto dd { margin: 0 0 var(--s4); }
.dati-conto dd:last-child { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════════════════
   LA LARGHEZZA DI UN CAMPO — la decide il contenuto, non il contenitore.
   ═══════════════════════════════════════════════════════════════════════

   Misurato il 20/09/2026 su «I tuoi dati e la visura»: il campo della
   Partita IVA era largo 852 pixel per undici cifre, identico a quello
   dell'indirizzo della sede. Non e' una questione di gusto: la larghezza di
   un campo e' una promessa su quanto ci si aspetta che tu scriva, e cinque
   rettangoli uguali sopra contenuti lunghi undici e quaranta caratteri non
   promettono niente. E' l'allineamento «privo di senso» piu' diffuso
   dell'area: non che le cose siano storte, e' che sono tutte lunghe uguale.

   Si usano SOLO su campi il cui contenuto ha una lunghezza nota. Un campo
   libero resta largo quanto la sua colonna: una riga corta dove ci si puo'
   scrivere a lungo e' lo stesso difetto, al contrario. */

/* `width` e non `max-width`, e il selettore doppiato: due trappole misurate
   il 20/09, tutte e due invisibili nel codice.
     — con `max-width` il campo dentro un contenitore flessibile non ha una
       base: la «Ragione sociale» aveva max-width 342 px e ne rendeva 205,
       perche' il riquadro si restringeva sul contenuto vuoto.
     — `input[type="email"]` vale (0,1,1) e batte `.campo-lungo` (0,1,0):
       la PEC restava larga 852 px con la classe addosso. Il grep la
       trovava, il browser la ignorava.
   Un `ch` qui vale 9,8 px misurati, non stimati: 16ch tengono «IT 12345678901». */
.campo-breve, input.campo-breve, select.campo-breve { width: 16ch;  max-width: 100%; }
.campo-medio, input.campo-medio, select.campo-medio { width: 34ch;  max-width: 100%; }
.campo-lungo, input.campo-lungo, select.campo-lungo { width: 52ch;  max-width: 100%; }

/* Due campi corti stanno accanto, non uno sotto l'altro: incolonnarli
   costringe l'occhio a scendere per leggere due cose da undici caratteri. */
.campi-affiancati { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); align-items: flex-start; }
/* `flex-shrink: 1` NON basta: un figlio flessibile ha `min-width: auto`, che
   vale il suo min-content, e sotto quello non scende per quanto glielo si
   chieda. A 320 px i campi di «Onboarding» restavano larghi 343 in un
   contenitore da 288, e la pagina sbordava fino a 359. `min-width: 0` e' la
   riga che toglie quel pavimento; `max-width: 100%` senza di lei non serve a
   niente. Misurato il 20/09. */
.campi-affiancati > * { flex: 0 1 auto; min-width: 0; }
/* Campi e pulsante sulla stessa riga: il pulsante si allinea alla BASE
   dei campi, non alla loro cima, o resta a mezz'aria sopra la tendina.
   E' una variante della stessa fila, non un'altra fila: da qui prende
   anche il `min-width: 0`, che e' cio' che le serviva. */
.campi-affiancati--basso { align-items: flex-end; }
/* Tre campi brevi sulla stessa riga (la pagina Account, 21/09/2026): si
   dividono la larghezza in parti uguali e vanno a capo sotto i 200 px l'uno,
   cioe' sul telefono tornano in colonna da soli, senza una media query. */
.campi-affiancati--tre > * { flex: 1 1 200px; }
/* Il pulsante e la riga d'aiuto che lo accompagna: sulla stessa riga, l'aiuto
   al centro del pulsante e non in cima. */
.conto-piede { align-items: center; }
.conto-piede > .field-aiuto { margin: 0; flex: 1 1 240px; }
/* Chi sei, su una riga sotto il titolo: non e' una sezione, non si cambia da qui. */
.conto-chi { margin: var(--s2) 0 0; color: var(--c-grigio); overflow-wrap: anywhere; }
.conto-chi strong { color: var(--c-inchiostro); font-weight: 500; }

/* IL MODULO E' UNA COLONNA, E LA COLONNA NON SI ALLARGA COL CAMPO PIU' LARGO.
   Misurato a 390 px il 20/09, subito dopo aver dato ai campi una larghezza
   propria: il documento usciva a 540 px. Non sbordava un campo — `max-width:
   100%` li teneva tutti — sbordava la GRIGLIA che li conteneva. Una traccia
   `auto` si dimensiona sul max-content dei suoi figli, e `width: 52ch` e' il
   max-content della PEC: la colonna cresceva a 524 px e il «100%» dei campi
   si misurava su quella. `minmax(0, 1fr)` toglie alla traccia il diritto di
   crescere, e i campi tornano a stare dentro il telefono. */
.modulo { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }

/* L'occhiello di una sezione e l'etichetta di un campo sono due maiuscoletti
   spaziati quasi identici: attaccati uno sull'altro — «CHI SEI» e sotto
   «INDIRIZZO» — si leggono come una riga sola andata a capo. Fra i due ci
   vuole lo stesso stacco che c'e' fra due gruppi. */
.sezione > .occhiello:first-child,
.panel > .occhiello:first-child { margin-bottom: var(--s4); }

/* ═══════════════════════════════════════════════════════════════════════
   IL DEPOSITO — un documento che si carica, o che c'e' gia'.
   ═══════════════════════════════════════════════════════════════════════

   PERCHE' ESISTE. Il 20/09/2026, aperte le schermate una per una, l'area
   aveva OTTO `<input type="file">` senza uno stile addosso — il controllo
   di sistema, grigio, con gli angoli stondati e la scritta «Nessun file
   selezionato» — dentro un riquadro largo come un campo di testo. E ne
   aveva un nono diverso, la zona tratteggiata con la nuvola rossa di
   `admin/opportunity-edit.php`. Due modi di caricare un file nello stesso
   prodotto, e sette punti su otto che non somigliano a niente del resto.

   Il difetto vero non era lo stile: era che mancava lo STATO. Nessuno degli
   otto sapeva dire «il documento c'e' gia', si chiama cosi', pesa cosi',
   l'hai mandato il tale giorno» — e un partner che aveva gia' caricato la
   visura rivedeva un campo vuoto identico a prima, senza sapere se fosse
   arrivata.

   FORMA. Un filetto, l'etichetta, il pulsante e la regola sotto. Niente
   riquadro, niente tratteggio: la direzione di questo foglio dice che il
   raggruppamento lo legge lo spazio, e un documento non fa eccezione.

   NIENTE JAVASCRIPT, ed e' una scelta. Il nome del file lo scrive il
   browser, dentro il controllo nativo: un nome disegnato da noi puo'
   raccontare un file diverso da quello che partira' davvero, e su una
   visura camerale non e' un dettaglio. `::file-selector-button` veste il
   pulsante e lascia al sistema operativo tutto il resto — scelta da
   tastiera, lettore di schermo, trascinamento. */

.deposito {
  border-top: var(--filetto) solid var(--c-filo-2);
  padding-top: var(--s3);
  margin-bottom: var(--s5);
  /* Dentro una riga flessibile la scatola non scendeva sotto la larghezza della
     casella del file (326 px), e il `max-width:100%` della casella non aveva
     niente contro cui misurarsi: a 320 px la pagina della firma sbordava di 22
     (21/09/2026, misurato sul passo CORRENTE, che la sonda mobile non apre). */
  max-width: 100%;
  min-width: 0;
}
.deposito > .field-label { margin-bottom: var(--s3); }
/* ACCANTO a un altro campo il deposito perde filetto e stacco: da solo in
   colonna sono la sua forma, affiancato a un campo di testo lo facevano partire
   12 px piu' in basso e con una riga sopra che il vicino non ha — due etichette
   sulla stessa riga a due altezze diverse (visto sulla fotografia, 20/09). */
.campi-affiancati > .deposito { border-top: 0; padding-top: 0; margin-bottom: 0; }
.campi-affiancati > .deposito > .field-label { margin-bottom: var(--s2); }

.deposito-file {
  font: inherit;
  font-size: var(--t-piccolo);
  color: var(--c-grigio);
  width: auto;
  max-width: 100%;
  border: 0;
  background: none;
  padding: 0;
  min-height: 0;
}

.deposito-file::file-selector-button {
  font-family: inherit;
  font-size: var(--t-didascalia);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--c-inchiostro);
  background: transparent;
  border: var(--filetto) solid var(--c-filo-2);
  border-radius: var(--raggio);
  padding: 11px 18px;
  margin-right: var(--s3);
  min-height: 44px;
  cursor: pointer;
  transition: border-color .18s ease-out, color .18s ease-out;
}
.deposito-file:hover::file-selector-button { border-color: var(--c-inchiostro); }
.deposito-file:disabled::file-selector-button { opacity: .45; cursor: not-allowed; }

/* Il documento che c'e' gia'. Il nome in inchiostro, il peso e la data in
   grigio e in cifre tabellari: due documenti uno sotto l'altro si
   confrontano per colonna, come in un estratto conto. */
.deposito-presente { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); }
.deposito-nome { font-size: var(--t-corpo); color: var(--c-inchiostro); word-break: break-word; }
.deposito-meta { font-size: var(--t-didascalia); color: var(--c-grigio); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.deposito-azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.deposito-sostituisci { margin-top: var(--s5); }

/* ═══════════════════════════════════════════════════════════════════════
   ACCESSIBILITA' E MOVIMENTO
   ═══════════════════════════════════════════════════════════════════════ */

/* Il salto al contenuto: la barra ha fino a dieci voci, e senza questo chi
   naviga col tastierino le ripercorre a ogni pagina. */
.salta {
  position: absolute; left: var(--s4); top: -100px; z-index: 100;
  background: #fff; color: var(--c-inchiostro); padding: var(--s3) var(--s4);
  border: 2px solid var(--c-rosso); font-size: var(--t-piccolo); font-weight: 700;
  transition: top .15s ease-out;
}
.salta:focus { top: var(--s3); }

:focus-visible { outline: 2px solid var(--c-rosso); outline-offset: 2px; }

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

/* ==========================================================================
   I NOVE STEP E L'AREA PERSONALE (21/09/2026 sera).

   Il testo di un passo, il foglio dell'Accordo in sola lettura, e i componenti
   nuovi: le tavole dei gradi, il richiamo a fondo scuro, i documenti
   incorporati, il modulo di registrazione, l'elenco delle opportunita'.
   Stanno qui e non nella pagina del percorso perche' li mostrano anche
   Documenti, Registra e Le tue opportunita'. Solo token: nessun colore nuovo.
   ========================================================================== */

/*
 * LA MISURA. Il difetto piu' grave di questa schermata, e nessuna
 * sonda lo segnalava: il testo correva per tutta la larghezza del
 * riquadro — misurato a 1440 px, 827 pixel di riga, cioe' circa 105
 * caratteri. La regola tipografica sta fra 45 e 75: oltre, l'occhio
 * che torna a capo sbaglia riga, e queste sono schermate che un
 * partner deve LEGGERE, non scorrere.
 *
 * 68ch e' dentro la banda e lascia il titolo a tutta larghezza: la
 * colonna di lettura piu' stretta del suo contenitore e' la forma
 * editoriale, non un riquadro venuto male.
 */
/*
 * IL TESTO DI UN PASSO E' UNA PAGINA, NON UNA LETTERA (21/09/2026).
 *
 * Due richieste di Francesco nello stesso giorno: «piu' compatto», e poi,
 * guardando il risultato, «cosi' sembra una email». La prima era aria:
 * interlinea da 1,7 a 1,5 e MEZZA riga fra i paragrafi. La seconda era
 * struttura: i titoli veri al posto di quelli che l'email fingeva col
 * grassetto. Tre cose, tutte coi due soli
 * caratteri del marchio:
 *   l'attacco     — il primo paragrafo, piu' grande e in grigio: apre;
 *   il capitoletto — Playfair, con un filetto sopra: la pagina ha sezioni;
 *   il risalto    — la frase che era tutta in grassetto, in corsivo serif;
 * Il grassetto nel corpo scende a 500: a 700 ogni paragrafo aveva tre
 * parole che gridavano, ed e' cosi' che si sottolinea in una email.
 * La misura resta 68ch: provata a 66, due righe andavano a capo per una
 * parola sola.
 */
.testo { max-width: 68ch; }
.testo :where(p, ul, ol) { margin: 0 0 var(--s3); line-height:1.5; }
.testo > :first-child { margin-top: 0; }
.testo > :last-child { margin-bottom: 0; }
.testo strong { font-weight: 500; }

.testo .attacco { max-width: var(--misura-lead); margin-bottom: var(--s5);
  font-size: var(--t-attacco); line-height: 1.55; color: var(--c-grigio); }
.testo .attacco strong { color: var(--c-inchiostro); }

/* Piu' aria SOPRA il capitoletto che sotto: la vicinanza dice a chi appartiene. */
body .testo h3 { margin: var(--s6) 0 var(--s2); padding-top: var(--s4);
  border-top: var(--filetto) solid var(--c-filo); font-weight: 500; line-height: 1.3; }

.testo .risalto { margin: var(--s5) 0; font-family: 'Playfair Display', serif; font-style: italic;
  font-size: var(--t-attacco); line-height: 1.45; }

/* Il trattino al posto del pallino: e' l'elenco di un testo italiano a
   stampa, e il preflight di Tailwind i pallini li aveva gia' tolti. */
.testo :where(ul) { list-style: none; padding-left: 0; }
.testo :where(ul) > li { position: relative; padding-left: var(--s5); }
.testo :where(ul) > li::before { content: '\2014'; position: absolute; left: 0; color: var(--c-filo-3); }
.testo :where(ol) { list-style: decimal; padding-left: 1.4rem; }
.testo li { margin-bottom: var(--s1); }
/* La riga che introduce un elenco gli sta addosso, non a mezza strada. */
.testo p:has(+ ul), .testo p:has(+ ol) { margin-bottom: var(--s2); }


/* Il corsivo e' una voce, non un'inclinazione: la domanda che chiude
   «valutazione» si legge come una citazione. */
.testo em { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 1.0625em; }

/* Il pulsante che nell'email chiudeva il testo: torna un'azione, secondaria
   — la primaria della schermata e' «Ho letto, vai avanti». */
.testo .invito { margin-top: var(--s5); }
.testo .invito a { text-decoration: none; }

/*
 * I TITOLI A MARGINE (21/09/2026 sera, «va formattato molto meglio»).
 *
 * Su schermo largo il testo non e' piu' una colonna sola con i titoli in
 * mezzo: e' l'impaginato di un dossier, col titolo della sezione appeso
 * nel margine sinistro e il suo testo accanto. Chi torna a cercare «Cosa
 * non devi fare» scorre il margine, non il testo. Il filetto passa sopra
 * tutte e due le colonne perche' lo portano sia il titolo sia il blocco
 * che gli sta accanto, e la colonna non ha stacco: due bordi vicini fanno
 * una riga sola.
 *
 * E' la griglia a mettere il testo accanto al titolo, senza markup in piu':
 * un elemento che chiede la colonna 2 dopo uno in colonna 1 resta sulla
 * STESSA riga; uno che chiede la 1 dopo uno in 2 va a capo.
 * In una griglia i margini non collassano: si azzerano, e lo stacco lo
 * da' `row-gap`. Sotto i 900 px torna la colonna sola, qui sopra.
 */
@media (min-width: 900px) {
  .testo:has(> h3) { max-width: none; display: grid; grid-template-columns: 13rem minmax(0, 1fr); row-gap: var(--s3); }
  .testo:has(> h3) > * { grid-column: 2; margin: 0; }
  .testo:has(> h3) > .attacco { margin-bottom: var(--s3); }
  body .testo:has(> h3) > h3 { grid-column: 1; margin: 0; padding-right: var(--s5);
    font-size: var(--t-attacco); line-height: 1.3; }
  body .testo:has(> h3) > h3, .testo:has(> h3) > h3 + * {
    margin-top: var(--s4); padding-top: var(--s4); border-top: var(--filetto) solid var(--c-filo); }
  .testo:has(> h3) > .risalto { margin: var(--s3) 0; }
  .testo:has(> h3) > .invito { margin-top: var(--s3); }
}
.testo a { color:var(--c-inchiostro); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--c-filo-3); }
.testo img { max-width:100%; height:auto; }

/* L'ACCORDO DA COMPILARE (21/09/2026). Un foglio, non un modulo: il testo
 e' quello del contratto, e gli spazi del Partner sono righe di scrittura
 dentro la frase. Alto quanto basta per leggerlo davvero, e scorre da solo:
 sotto restano il pulsante e il caricamento del firmato, che chi torna a
 ricaricarlo deve trovare senza scorrere dodici pagine. */
/* `position: relative` NON e' decorativo (21/09/2026). Il testo porta voci
   nascoste per la sintesi vocale in posizione assoluta (misurato: lo .sr-only
   dentro .acc-a-mano, vicino alla tabella delle firme). Senza un blocco
   contenitore qui sfuggivano al ritaglio dello scorrimento e trascinavano il
   documento fino a dove starebbero nel contratto intero: Documenti era alta
   18.120 px con <main> finito a 4.047; 31.365 sul telefono, quasi tutto bianco. */
.acc-doc { position:relative; max-height:min(72vh, 780px); overflow-y:auto; overscroll-behavior:contain;
         background:var(--c-carta); border:1px solid var(--c-filo);
         padding:var(--s7) var(--s6); color:var(--c-inchiostro);
         font-size:var(--t-corpo); line-height:1.65; }
.acc-doc:focus-visible { outline:2px solid var(--c-rosso); outline-offset:2px; }
/* La misura in rem e non in ch: un ch vale la larghezza dello zero DEL
 CARATTERE, e 68ch di Playfair a 14 px sono piu' stretti di 68ch di DM Sans
 a 16 — i capi uscivano rientrati, col filetto piu' corto del testo. */
.acc-doc > * { max-width:44rem; margin-left:auto; margin-right:auto; }
.acc-doc p { margin-top:0; margin-bottom:var(--s3); }
.acc-doc strong { font-weight:600; }
.acc-titolo { font-family:'Playfair Display',serif; font-size:var(--t-h2); font-weight:600;
            letter-spacing:.06em; text-align:center; margin-top:0; margin-bottom:var(--s7); }
.acc-capo { font-size:var(--t-piccolo); font-weight:700; letter-spacing:.04em; line-height:1.4;
          margin-top:var(--s6); margin-bottom:var(--s3); padding-top:var(--s4);
          border-top:1px solid var(--c-filo); }
.acc-sezione { font-size:var(--t-piccolo); font-weight:700; line-height:1.4;
             margin-top:var(--s5); margin-bottom:var(--s2); }
.acc-rientro { padding-left:var(--s5); }
.acc-tabella-scorre { overflow-x:auto; margin-top:var(--s4); margin-bottom:var(--s5); }
.acc-tabella { width:100%; border-collapse:collapse; font-size:var(--t-piccolo); line-height:1.45;
             font-variant-numeric:lining-nums tabular-nums; }
.acc-tabella th, .acc-tabella td { text-align:left; vertical-align:top; padding:var(--s2) var(--s4) var(--s2) 0; }
.acc-tabella th { font-weight:600; border-bottom:1px solid var(--c-inchiostro); }
.acc-tabella td { border-bottom:1px solid var(--c-filo); }
/* Il riquadro delle firme: etichetta, spazio per firmare, linea. */
.acc-tabella:has(.acc-firma) th, .acc-tabella:has(.acc-firma) td { border-bottom:0; width:50%; }
.acc-firma::after { content:''; display:block; height:var(--s8); margin-right:var(--s6);
                  border-bottom:1px solid var(--c-inchiostro); }

/* Lo spazio di KW Hospitality che resta a mano: una riga, come sulla carta. */
.acc-a-mano { display:inline-block; width:12ch; height:1em; vertical-align:baseline;
            border-bottom:1px solid var(--c-filo-3); }
@media (max-width: 860px) {
.acc-doc { max-height:70vh; padding:var(--s5) var(--s4); }
.acc-rientro { padding-left:var(--s3); }
}

/* Dentro un passo il foglio dell'Accordo sta in un .testo, e `body .testo h3`
   (il capitoletto col filetto) pesa piu' di .acc-titolo: il titolo del
   contratto usciva col filetto sopra e a peso 500. */
body .acc-doc .acc-titolo { margin-top: 0; padding-top: 0; border-top: 0; font-weight: 600; }

/* --- L'evidenza (§5.1): il richiamo a fondo scuro, per i passaggi che non
       devono sfuggire. Un filo rosso a sinistra, del rosso che regge sul nero. */
.evidenza { margin: var(--s5) 0; padding: var(--s5) var(--s6); background: var(--c-inchiostro); color: #fff;
  border-left: 2px solid var(--c-rosso-su-nero);
  font-family: 'Playfair Display', Georgia, serif; font-size: var(--t-attacco); line-height: 1.5; }
.evidenza p { margin: 0; }
.evidenza p + p { margin-top: var(--s3); }
.evidenza strong { font-weight: 600; color: #fff; }

/* --- Le tavole dei gradi: cifre allineate in Playfair, il grado di chi legge
       segnato dal filo rosso a margine (il rosso e' POSIZIONE). */
.tavola-scorre { overflow-x: auto; margin: var(--s4) 0 var(--s5); }
.tavola { width: 100%; max-width: 34rem; border-collapse: collapse; font-size: var(--t-piccolo);
  font-variant-numeric: lining-nums tabular-nums; }
.tavola th { text-align: left; font-weight: 500; color: var(--c-grigio); padding: 0 var(--s4) var(--s2) var(--s3);
  border-bottom: var(--filetto) solid var(--c-inchiostro); }
.tavola td { padding: var(--s3) var(--s4) var(--s3) var(--s3); border-bottom: var(--filetto) solid var(--c-filo); vertical-align: baseline; }
.tavola .num { text-align: right; padding-right: 0; white-space: nowrap; }
/* Il numero resta intero, l'intestazione no: «Anzianità minima nel grado
   precedente» senza a capo allargava la tavola oltre i 390 px, e «3 mesi»
   usciva tagliato dal suo contenitore che scorre (visto sulla fotografia, 21/09). */
.tavola th.num { white-space: normal; }
.tavola td.num { font-family: 'Playfair Display', Georgia, serif; font-size: var(--t-attacco); }
.tavola__n { display: inline-block; min-width: 1.5em; color: var(--c-grigio); }
.tavola .e-tuo td { background: var(--c-carta-2); }
.tavola .e-tuo td:first-child { box-shadow: inset 2px 0 0 var(--c-rosso); }
.tavola__tuo { margin-left: var(--s2); font-size: var(--t-didascalia); color: var(--c-rosso); white-space: nowrap; }

/* --- Le pagine dei servizi: il nome porta dentro l'area, l'indirizzo pubblico
       resta scritto accanto perche' e' quello che si manda a una controparte. */
.testo .pagine, .pagine { list-style: none; padding: 0; margin: var(--s3) 0 var(--s5); border-top: var(--filetto) solid var(--c-filo); }
.testo .pagine > li { padding-left: 0; margin: 0; }
.testo .pagine > li::before { content: none; }
.pagine > li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: var(--s1) var(--s4); padding: var(--s3) 0; border-bottom: var(--filetto) solid var(--c-filo); }
.pagine a { font-weight: 500; }
.pagine__indirizzo { font-size: var(--t-didascalia); color: var(--c-grigio); }

/* --- I documenti incorporati: un <details>, aperto quando il testo dice «qui
       sotto», chiuso quando e' un riferimento da riaprire. */
.risorsa { margin: var(--s6) 0 var(--s4); border-top: var(--filetto) solid var(--c-inchiostro); }
.risorsa > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3);
  padding: var(--s4) 0; cursor: pointer; list-style: none; }
.risorsa > summary::-webkit-details-marker { display: none; }
.risorsa > summary::after { content: 'Apri'; margin-left: auto; font-size: var(--t-occhiello); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-rosso); }
.risorsa[open] > summary::after { content: 'Chiudi'; }
.risorsa > summary:hover .risorsa__titolo { text-decoration: underline; text-decoration-color: var(--c-filo-3); text-underline-offset: 3px; }
.risorsa > summary:focus-visible { outline: 2px solid var(--c-rosso); outline-offset: 2px; }
.risorsa__titolo { font-family: 'Playfair Display', Georgia, serif; font-size: var(--t-attacco); }
.risorsa__nota { font-size: var(--t-didascalia); color: var(--c-grigio); }
.risorsa__corpo { padding-bottom: var(--s4); }
.risorsa__azioni { margin: var(--s3) 0 0; font-size: var(--t-piccolo); }

/* I Principi: nove voci numerate, la cifra Playfair a margine. */
.principi__occhiello { margin: 0 0 var(--s3); font-size: var(--t-occhiello); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-grigio); }
.principi, .testo .principi { list-style: none; counter-reset: principio; padding: 0; margin: 0; }
.principi > li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--s3);
  padding: var(--s4) 0; margin: 0; border-top: var(--filetto) solid var(--c-filo); counter-increment: principio; }
.principi > li::before { content: counter(principio); grid-row: 1 / span 2; font-family: 'Playfair Display', Georgia, serif;
  font-size: var(--t-h3); line-height: 1; color: var(--c-grigio); font-variant-numeric: lining-nums; }
.principi h4 { grid-column: 2; margin: 0 0 var(--s1); font-size: var(--t-corpo); font-weight: 500; }
.principi p { grid-column: 2; margin: 0; }

/* La scheda dei criteri, dentro lo step 4 e in Documenti. */
.scheda { margin: var(--s5) 0; padding-left: var(--s5); border-left: 2px solid var(--c-inchiostro); }
.scheda > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.scheda__dove { margin: var(--s4) 0 0; font-size: var(--t-didascalia); color: var(--c-grigio); }

/* --- Il modulo di registrazione. Prima il lato, poi i suoi campi: il CSS li
       mostra (:has), cosi' funziona anche senza JavaScript. */
.reg { display: grid; gap: var(--s5); max-width: 44rem; margin-top: var(--s5); }
.reg fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.reg-lato { display: grid; gap: var(--s3); }
.reg-lato legend { margin-bottom: var(--s2); }
.reg-scelta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start;
  padding: var(--s4); border: var(--filetto) solid var(--c-filo-2); cursor: pointer; background: var(--c-carta);
  transition: border-color .15s ease-out, box-shadow .15s ease-out; }
.reg-scelta:hover { border-color: var(--c-inchiostro); }
.reg-scelta:has(input:checked) { border-color: var(--c-inchiostro); box-shadow: inset 2px 0 0 var(--c-rosso); }
.reg-scelta:has(input:focus-visible) { outline: 2px solid var(--c-rosso); outline-offset: 2px; }
.reg-scelta input { width: 18px; height: 18px; margin: .15em 0 0; accent-color: var(--c-rosso); }
.reg-scelta__nome { display: block; font-weight: 500; }
.reg-scelta__spiega { display: block; font-size: var(--t-piccolo); color: var(--c-grigio); }
.reg-campi, .reg-comuni { display: none; }
.reg:has(input[name="lato"][value="vendor"]:checked) .reg-campi[data-lato="vendor"],
.reg:has(input[name="lato"][value="buyer"]:checked) .reg-campi[data-lato="buyer"],
.reg:has(input[name="lato"]:checked) .reg-comuni { display: grid; gap: var(--s4); }
.reg-campo { min-width: 0; }
.reg-facoltativo { font-weight: 400; color: var(--c-grigio); text-transform: none; letter-spacing: 0; }

/* I RIQUADRI (23/09/2026): una domanda a risposta chiusa dei Google Form,
   la domanda in testa e le scelte nel corpo. Stesso filetto della scelta del
   lato, raggio zero, nessuna ombra; il fondo carta-2 e' la fascia di testa,
   non il riquadro. La legenda flotta: cosi' sta DENTRO il bordo, come testa,
   invece di spezzarlo. */
.reg-sezione { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: var(--filetto) solid var(--c-inchiostro);
  font-size: var(--t-occhiello); letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.reg fieldset.reg-domanda { border: var(--filetto) solid var(--c-filo-2); background: var(--c-carta); }
.reg-domanda__testa { float: left; width: 100%; box-sizing: border-box; padding: var(--s3) var(--s4);
  background: var(--c-carta-2); border-bottom: var(--filetto) solid var(--c-filo); font-weight: 500; line-height: 1.35; }
.reg-domanda__testa + * { clear: both; }
.reg-domanda__piu { font-size: var(--t-didascalia); font-weight: 400; color: var(--c-grigio); margin-left: var(--s2); white-space: nowrap; }
.reg-domanda__aiuto { margin: 0; padding: var(--s3) var(--s4) 0; max-width: 60ch; font-size: var(--t-piccolo); color: var(--c-grigio); }
/* Il 40% porta le voci brevi a due colonne sul telefono: le venti regioni in
   una colonna sola erano 880 px da scorrere. Le corte (stelle, scala 0-10)
   stanno in una riga a 1440 e in due sul telefono. */
.reg-domanda__scelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 40%), 1fr)); gap: 0 var(--s4);
  padding: var(--s1) var(--s4) var(--s2); }
.reg-domanda__scelte--corte { grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); column-gap: var(--s3); }
.reg-domanda__scelte--lunghe { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.reg-opzione { display: flex; gap: var(--s2); align-items: flex-start; min-height: 44px; box-sizing: border-box;
  padding: 11px 0; line-height: 1.35; cursor: pointer; }
.reg-opzione input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--c-rosso); cursor: pointer; }
.reg-opzione:hover > span { text-decoration: underline; text-decoration-color: var(--c-filo-3); text-underline-offset: 3px; }
.reg-opzione:has(input:checked) > span { font-weight: 500; }
.reg-opzione:has(input:focus-visible) { outline: 2px solid var(--c-rosso); outline-offset: 2px; }
.reg-opzione input:focus-visible { outline: none; }   /* l'anello sta sull'opzione intera, qui sopra */
.reg-opzione:has(input:disabled) { cursor: not-allowed; color: var(--c-grigio); }
.reg-altro { padding: 0 var(--s4) var(--s4); }
.reg-domanda:not(:has(input[value="altro"]:checked)) .reg-altro { display: none; }
/* In errore il riquadro, non il pallino: il fondo rosa dei campi di testo
   dietro un radio era un quadrato attorno a un cerchio. */
.reg fieldset.reg-domanda:has([aria-invalid="true"]) { border-color: var(--c-guasto); }
.reg fieldset.reg-domanda:has([aria-invalid="true"]) > .reg-domanda__testa { color: var(--c-guasto); }
.reg .reg-opzione input[aria-invalid="true"] { background: transparent; }
/* La sezione «da costruire» del Google Form: solo per cio' che e' da costruire. */
.reg:not(:has(input[name="vendor_stato_attivita"][value="da_costruire"]:checked))
  [data-se="vendor_stato_attivita=da_costruire"] { display: none; }
.reg-ora { margin: 0; max-width: 56ch; font-size: var(--t-piccolo); color: var(--c-grigio); }
.reg [aria-invalid="true"] { border-color: var(--c-guasto); background: #FBEDEC; }
.reg button[aria-disabled="true"] { opacity: .7; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .reg-scelta { transition: none; } }

/* --- Le opportunita' registrate: una riga per ciascuna, lo stato in parola. */
.reg-elenco, .testo .reg-elenco { list-style: none; padding: 0; margin: var(--s4) 0; border-top: var(--filetto) solid var(--c-inchiostro); }
.reg-elenco__voce, .testo .reg-elenco__voce { padding: var(--s4) 0; margin: 0; border-bottom: var(--filetto) solid var(--c-filo); }
.reg-elenco__lato { margin: 0; font-size: var(--t-didascalia); color: var(--c-grigio); }
body .reg-elenco__titolo, body .testo .reg-elenco__titolo { margin: var(--s1) 0; padding: 0; border: 0;
  font-family: 'Playfair Display', Georgia, serif; font-size: var(--t-h3); font-weight: 500; line-height: 1.3; }
.reg-elenco__stato { margin: 0; font-size: var(--t-piccolo); }
.reg-elenco__parola { font-weight: 600; margin-right: var(--s2); }
.reg-elenco__voce--attesa .reg-elenco__parola { color: var(--c-attesa); }
.reg-elenco__voce--accettata .reg-elenco__parola { color: var(--c-ok); }
.reg-elenco__voce--respinta .reg-elenco__parola { color: var(--c-guasto); }
.reg-elenco__voce--archiviata .reg-elenco__parola { color: var(--c-grigio); }
.reg-elenco__quando { margin: var(--s1) 0 0; font-size: var(--t-didascalia); color: var(--c-grigio); }
.reg-elenco__dettaglio > summary { margin-top: var(--s2); font-size: var(--t-piccolo); cursor: pointer; width: fit-content; }
.reg-elenco__dettaglio > summary:focus-visible { outline: 2px solid var(--c-rosso); outline-offset: 2px; }
.reg-elenco__dettaglio dl { display: grid; gap: var(--s2); margin: var(--s3) 0 0; }
.reg-elenco__dettaglio dt { font-size: var(--t-didascalia); color: var(--c-grigio); }
.reg-elenco__dettaglio dd { margin: 0; overflow-wrap: anywhere; }
.reg-elenco__vuota { color: var(--c-grigio); }

/* DOVE STA UN'OPPORTUNITA' (22/09/2026, feedback sullo step 6). Una tacca
   per fase: piene le passate, rossa quella in corso, di filo le altre. Il
   rosso e' posizione, come nel resto dell'area; il numero lo dice il testo. */
.reg-tacche, .testo .reg-tacche { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px;
  max-width: 20rem; margin: var(--s2) 0 0; padding: 0; list-style: none; }
.reg-tacche > li, .testo .reg-tacche > li { height: 4px; margin: 0; padding: 0; background: var(--c-filo); }
.testo .reg-tacche > li::before { content: none; }
.reg-tacche > li.fatta, .testo .reg-tacche > li.fatta { background: var(--c-inchiostro); }
.reg-tacche > li.qui, .testo .reg-tacche > li.qui { background: var(--c-rosso); }

/* Le fasi in fila, nello step 6: numero, nome, che cosa succede. Una riga
   per fase sullo schermo largo; sul telefono il nome sopra la spiegazione. */
.reg-fasi, .testo .reg-fasi { list-style: none; padding: 0; margin: var(--s2) 0 0;
  border-top: var(--filetto) solid var(--c-inchiostro); }
.reg-fasi > li, .testo .reg-fasi > li, .reg-fasi__uscita, .testo .reg-fasi__uscita {
  display: grid; grid-template-columns: 2.25rem 14rem minmax(0, 1fr); column-gap: var(--s3); align-items: baseline;
  margin: 0; padding: var(--s3) 0; border-bottom: var(--filetto) solid var(--c-filo); }
.testo .reg-fasi > li::before { content: none; }
.reg-fasi__n { font-size: var(--t-didascalia); color: var(--c-grigio); font-variant-numeric: tabular-nums; }
.reg-fasi__nome { font-weight: 500; }
.reg-fasi__cosa { color: var(--c-grigio); font-size: var(--t-piccolo); }
.reg-fasi__uscita, .testo .reg-fasi__uscita { margin-bottom: var(--s3); }
.reg-fasi__uscita .reg-fasi__nome { color: var(--c-grigio); }
@media (max-width: 640px) {
  .reg-fasi > li, .testo .reg-fasi > li, .reg-fasi__uscita, .testo .reg-fasi__uscita { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .reg-fasi__cosa { grid-column: 2; }
}
/* Dalla parte dell'admin (admin/registrazioni.php): la stessa riga, piu' il
   termine, la bandierina dei doppioni e le decisioni. */
.reg-elenco__oltre { color: var(--c-guasto); font-weight: 600; }
.reg-elenco__doppioni { margin: var(--s2) 0 0; font-size: var(--t-piccolo); color: var(--c-attesa); }
/* Accetta su una riga sua, e sotto il motivo con Non valida: sulla stessa riga
   il campo del motivo sembrava di Accetta (visto sulla fotografia, 21/09). */
/* L'esito (24/09/2026): un riquadro come quelli del modulo del partner, un bordo sinistro solo — etichetta,
   motivo, nota e i due pulsanti sulla stessa riga, alti uguali. */
.reg-esito { margin-top: var(--s5); border: var(--filetto) solid var(--c-filo-2); background: var(--c-carta); }
.reg-esito__testa { margin: 0; padding: var(--s3) var(--s4); background: var(--c-carta-2);
  border-bottom: var(--filetto) solid var(--c-filo); font-weight: 500; }
.reg-esito__corpo { padding: var(--s4); }
.reg-esito__azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.reg-esito__secondo { margin-top: var(--s4); }
/* La proposta sui criteri pubblicati (13/10/2026): un parere a margine della decisione, nelle righe a filetto della
   scheda. Il colore sta sulla parola, come negli stati: un semaforo di pallini sembrerebbe una decisione gia' presa. */
.reg-proposta { margin-bottom: var(--s5); }
.reg-proposta__sintesi { margin: 0 0 var(--s3); font-size: var(--t-attacco); }
.reg-proposta__punti { display: block; margin-top: var(--s1); font-size: var(--t-piccolo); color: var(--c-grigio); }
.reg-proposta > .field-aiuto { margin-top: var(--s3); }
/* Il modo d'invio delle email ai Partner (24/09/2026): una riga, il testo a sinistra e il pulsante a destra. */
.reg-modo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5);
  margin: 0 0 var(--s5); padding: var(--s3) var(--s4); border: var(--filetto) solid var(--c-filo-2); background: var(--c-carta-2); }
.reg-modo__testo { margin: 0; flex: 1 1 24rem; font-size: var(--t-piccolo); }
/* Le impostazioni delle email ai Partner (13/10/2026): una fascia sola, una riga per impostazione e un filetto fra le
   due. Il collegamento della videochiamata: l'etichetta sopra, il campo e il pulsante sulla stessa riga, l'aiuto sotto. */
.reg-impostazioni { margin: 0 0 var(--s5); border: var(--filetto) solid var(--c-filo-2); background: var(--c-carta-2); }
.reg-impostazioni > .reg-modo { margin: 0; border: 0; background: none; }
.reg-impostazioni > .reg-modo + .reg-modo { border-top: var(--filetto) solid var(--c-filo); }
.reg-modo--campo { display: block; }
.reg-modo__riga { display: flex; flex-wrap: wrap; gap: var(--s3); }
.reg-modo__riga > .field-input { flex: 1 1 22rem; width: auto; }
.reg-modo--campo > .field-aiuto { max-width: var(--misura); }
/* Il prossimo passo suggerito per la fase (13/10/2026): una riga in testa all'avanzamento, l'etichetta in neretto come
   «Motivo» e «Commento» in cima alla scheda; sotto, in grigio, se il Partner ha di che prenotare la videochiamata. */
.reg-passo { margin: 0 0 var(--s4); max-width: var(--misura); font-size: var(--t-piccolo); }
.reg-passo__nota { display: block; margin-top: var(--s1); color: var(--c-grigio); }
/* Dalla parte del Partner, dopo l'accettazione: per che cosa, che cosa manca, e la prenotazione. Testo nella voce, come
   lo stato; il pulsante a filetto e' l'unica azione della voce. Dentro uno step `.testo a` sottolineerebbe il pulsante. */
.reg-elenco__punti { margin: var(--s2) 0 0; max-width: var(--misura); font-size: var(--t-piccolo); }
.reg-elenco__prenota { margin: var(--s3) 0; }   /* sotto, la riga della data: a 4 px sembrava la didascalia del pulsante */
.testo .reg-elenco__prenota a { text-decoration: none; }
.reg-anteprima { margin: var(--s3) 0 0; padding: var(--s3); background: var(--c-carta-2); font: inherit; font-size: var(--t-piccolo);
  white-space: pre-wrap; overflow-wrap: anywhere; }

/* L'ELENCO DELLE REGISTRAZIONI (24/09/2026, Francesco: «in una riga, o al massimo in un box»): una
   riga per registrazione nella tabella da bilancio; la scheda (?id=N) ha i dati e la decisione. */
.reg-tabella__quando { white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.reg-tabella__titolo { font-weight: 500; }
.reg-tabella__doppione { font-size: var(--t-didascalia); font-weight: 400; color: var(--c-attesa); white-space: nowrap; }
.reg-tabella__stato { font-weight: 600; }
.reg-tabella__stato--attesa { color: var(--c-attesa); }
.reg-tabella__stato--accettata { color: var(--c-ok); }
.reg-tabella__stato--respinta { color: var(--c-guasto); }
.reg-tabella__stato--archiviata { color: var(--c-grigio); }
.reg-tabella__giorni { color: var(--c-grigio); white-space: nowrap; }
/* Sul telefono una riga di sei colonne non ci sta: diventa un riquadro, etichetta e dato su una riga. */
@media (max-width: 720px) {
  .reg-tabella thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .reg-tabella, .reg-tabella tbody, .reg-tabella tr { display: block; }
  .reg-tabella tr { border: var(--filetto) solid var(--c-filo-2); padding: var(--s2) var(--s4); margin-bottom: var(--s3); }
  .reg-tabella td { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s3); padding: var(--s1) 0; border: 0; }
  .reg-tabella td::before { content: attr(data-etichetta); font-size: var(--t-didascalia); color: var(--c-grigio); }
  .reg-tabella tr:hover td { background: none; }
}
.reg-scheda__torna { margin: 0 0 var(--s4); font-size: var(--t-piccolo); }
.reg-scheda__stato, .reg-scheda__motivo { margin: var(--s2) 0 0; font-size: var(--t-piccolo); }
.reg-scheda__sezione { margin: var(--s7) 0 var(--s3); font-size: var(--t-h3); }
/* Le risposte in due colonne, domanda e risposta, filetto sotto ogni riga: 26 voci in una pagina che si legge. */
.reg-scheda__dati dl { display: grid; grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); margin: 0;
  border-top: var(--filetto) solid var(--c-inchiostro); }
.reg-scheda__dati dl > div { display: contents; }
.reg-scheda__dati dt, .reg-scheda__dati dd { margin: 0; padding: var(--s2) 0; border-bottom: var(--filetto) solid var(--c-filo); }
/* 14 px accanto a 16: 2 px in piu' sopra, e la riga della domanda sta su quella della risposta. */
.reg-scheda__dati dt { padding: calc(var(--s2) + 2px) var(--s4) var(--s2) 0; font-size: var(--t-piccolo); color: var(--c-grigio); }
.reg-scheda__dati dd { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .reg-scheda__dati dl { grid-template-columns: minmax(0, 1fr); }
  .reg-scheda__dati dt { border-bottom: 0; padding-bottom: 0; }
}
/* La fase e il motivo dell'archiviazione affiancati, con le etichette alla
   stessa altezza; il pulsante sotto, non a capo accanto alla tendina. */
.reg-elenco__foglio { margin-top: var(--s5); }
.reg-elenco__foglio-invia { padding: 0; border: 0; background: none; font: inherit; font-size: var(--t-piccolo); cursor: pointer; }
.reg-elenco__foglio-invia:active { color: var(--c-rosso-2); }

/* ═══════════════════════════════════════════════════════════════════════
   LE OPERAZIONI: VISTA, TABELLA E CRUSCOTTO (02/10/2026)
   Spostati qui da private/index.php perche' ora servono anche al pannello
   (admin/opportunities.php, admin/richieste.php, admin/_cruscotto.php).
   ═══════════════════════════════════════════════════════════════════════ */

/* LA VISTA (01/10/2026; dal 02/10 Schede o Dashboard): una per tutte le
   Operazioni, pagina dei partner e pannello. Due pulsanti a filetto; quello
   premuto e' inchiostro pieno. Sul telefono va a capo invece di sbordare. */
.vista { display:inline-flex; border:1px solid var(--c-filo-2); margin:var(--s2) 0; }
.vista-b { background:#fff; border:0; min-height:44px; padding:0 var(--s4); font-family:'DM Sans', sans-serif;
  font-size:var(--t-occhiello); letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--c-grigio);
  cursor:pointer; transition: color .15s ease-out, background-color .15s ease-out; }
.vista-b + .vista-b { border-left:1px solid var(--c-filo-2); }
.vista-b:hover { color:var(--c-inchiostro); background:var(--c-velo); }
.vista-b:active { background:var(--c-velo-3); }
.vista-b[aria-pressed="true"] { background:var(--c-inchiostro); color:#fff; }
.vista-b:focus-visible { outline:2px solid var(--c-rosso); outline-offset:2px; }
/* LA TABELLA (01/10/2026): le stesse schede in righe, per confrontarle.
   Filetti, niente cornici; scorre di lato DENTRO il suo riquadro, mai la
   pagina; il codice resta fermo perche' e' il nome della riga. */
.op-scorre { overflow-x:auto; border-top:1px solid var(--c-inchiostro); background:#fff; }
.op-scorre:focus-visible { outline:2px solid var(--c-rosso); outline-offset:2px; }
.op-tabella { width:100%; min-width:960px; border-collapse:collapse; font-size:var(--t-piccolo); color:var(--c-inchiostro); }
.op-tabella th, .op-tabella td { text-align:left; vertical-align:top; padding:var(--s3) var(--s4); border-bottom:1px solid var(--c-filo); background:#fff; }
/* Le intestazioni vanno a capo: con «Tipologia di struttura» su una riga sola
   la Ricerca, dieci colonne, scorreva gia' a 1440 px (visto il 01/10). */
.op-tabella thead th { font-size:var(--t-occhiello); letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--c-grigio); }
.op-tabella tr > :first-child { position:sticky; left:0; z-index:1; box-shadow: inset -1px 0 0 var(--c-filo); }
/* Il monospazio e' del codice, non dell'intestazione: «CODICE» resta come le altre. */
.op-tabella tbody td:first-child { font-family: ui-monospace, Menlo, monospace; font-size:var(--t-didascalia); color:var(--c-grigio); white-space:nowrap; }
.op-scorri { font-size:var(--t-didascalia); color:var(--c-grigio); margin:0 0 var(--s2); }
.op-tabella tbody th { font-weight:400; min-width:16rem; }
.op-tabella tbody tr { cursor:pointer; }
.op-tabella tbody tr:hover > * { background:var(--c-carta-2); }
/* Nel pannello e' un collegamento al modulo, nella pagina dei partner un pulsante: stesso aspetto. */
.op-apri { background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--c-inchiostro); text-align:left; cursor:pointer; text-decoration:none; }
.op-apri:hover { color:var(--c-rosso); }
.op-ordina { background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.op-ordina:hover, th[aria-sort] .op-ordina { color:var(--c-inchiostro); }
.op-ordina i { font-size:.6rem; }
.op-apri:focus-visible, .op-ordina:focus-visible { outline:2px solid var(--c-rosso); outline-offset:2px; }

/* I NUMERI IN TESTA DEL CRUSCOTTO, e la testata delle due pagine del
   pannello. Le celle valgono quanto cio' che contengono e stanno a sinistra:
   con la griglia di .cifre a 1440 tre numeri prendevano tre celle da 424 px,
   con 448 px di niente fra l'uno e l'altro (misurato il 20/09). Solo sopra i
   720 px: sotto, .cifre passa a due colonne col filetto SOTTO, e un flex li'
   lo fermava a 130 px invece di attraversare la colonna. */
@media (min-width: 721px) { .cifre-strette { display:flex; flex-wrap:wrap; } }

/* Le barre: una per voce, il nome e il numero sopra, la barra sotto. Il nome
   non si stringe accanto alla barra («Friuli-Venezia Giulia», «Operazione
   finanziaria»), e la barra ha tutta la larghezza della colonna. Inchiostro,
   nessun colore: non c'e' una voce da accentare, c'e' una misura. La traccia
   chiara dice dove sarebbe il cento per cento. */
.cruscotto { margin-bottom: var(--s7); }
.cruscotto .cifre { margin-bottom: var(--s7); }
.barre-griglia { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s6) var(--s7); }
.barre-titolo { font-family:'DM Sans', sans-serif; font-size:var(--t-occhiello); letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--c-grigio); padding-bottom:var(--s2); border-bottom:var(--filetto) solid var(--c-inchiostro); margin:0; }
.barre { list-style:none; margin:0; padding:0; }
.barre li { display:grid; grid-template-columns:minmax(0, 1fr) auto; column-gap:var(--s3); row-gap:6px;
  padding:var(--s2) 0 10px; border-bottom:var(--filetto) solid var(--c-filo); }
.barra-nome { font-size:var(--t-piccolo); color:var(--c-inchiostro); overflow-wrap:anywhere; }
.barra-n { grid-column:2; grid-row:1; font-size:var(--t-piccolo); font-weight:600; font-variant-numeric: lining-nums tabular-nums; }
.barra-traccia { grid-column:1 / -1; grid-row:2; height:6px; background:var(--c-velo); }
.barra { display:block; height:100%; min-width:2px; background:var(--c-inchiostro); }
/* «Altre», «Tutta Italia», «Indifferente», «Non indicata» non sono voci ma
   raggruppamenti: in grigio. «Altre 10» in inchiostro era la barra piu' lunga
   delle regioni e si leggeva come la prima regione (visto il 02/10). */
.barre-resto .barra-nome { color:var(--c-grigio); }
.barre-resto .barra { background:var(--c-grigio); }
.cruscotto-tabella { margin-top: var(--s7); }

/* LE SCHEDE DEL PANNELLO, Vendita e Ricerca (da admin/opportunities.php).
   Qui la card E' l'interazione: ogni scheda si modifica, si pubblica e si
   elimina. Stato e codice sono dati di servizio, in cima al corpo, in grigio. */
.scheda-opp { background:#fff; border:1px solid var(--c-filo); display:flex; flex-direction:column; }
.scheda-opp:hover { border-color:var(--c-filo-3); }
.scheda-opp:focus-within { outline:2px solid var(--c-rosso); outline-offset:2px; }
.riga-scheda { display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); }
.codice-scheda { font-family:ui-monospace,Menlo,monospace; font-size:var(--t-occhiello); color:var(--c-grigio); }
.nota-tecnica { border-left:3px solid var(--c-filo-3); background:var(--c-carta-2);
  padding:var(--s3) var(--s4); font-size:var(--t-piccolo); color:var(--c-grigio); margin-bottom:var(--s6); max-width:var(--misura); }
.nota-tecnica strong { color:var(--c-inchiostro); }
.nota-tecnica code { font-family:ui-monospace,Menlo,monospace; font-size:.92em; }
.vista-riga { display:flex; justify-content:flex-end; margin-bottom:var(--s4); }
[data-vista-pannello][hidden] { display:none; }