/* ═══════════════════════════════════════════════════════════════════
   Le pagine dei clienti (entra, registrati, area, regolamento, privacy).

   Sono la stessa casa della parete (sito/tools/landing-parete.template.html):
   stessa tinta crema a gradini, stessa scrittura blu, Fraunces per i
   titoli e Karla per il resto, filetti da 1 px, il pieno blu (--acceso)
   solo su quello che si sceglie o si conferma.

   Il fondo è il gradino più chiaro della parete (#F7F4EE, il suo
   --incasso), non il suo --mare: sul telefono il fondo della parete
   sembrava «troppo beige» (30 ottobre 2026). Gli altri gradini scalano
   di uno: pannelli #EFEAE1 e #E6E0D4, mensole #DCD4C4; i campi e i
   tagliandi prendono #FCFAF6, lo spigolo in luce delle mensole della
   parete. Il bianco pieno resta solo per il cartoncino del QR.

   Si aprono sul telefono, spesso al banco con poca luce: corpo a 17 px
   in Karla 400 (la parete usa il 300, qui serve più nero), bersagli da
   48 px. Il QR sta su bianco pieno con il suo margine: un QR su fondo
   colorato o scuro molti lettori in cassa non lo leggono.

   Niente script in linea, niente CDN: i caratteri si servono da sé.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── i caratteri: gli stessi file della parete (sito/tools/tipi, copiati
   in pagine/tipi perché il container account prende solo gestionale/account).
   Fraunces e Karla sono sotto SIL Open Font License 1.1: si possono
   ridistribuire, e copyright e licenza stanno nella tabella dei nomi di
   ogni file. Si servono da /tipi/… (avvio.js, STATICI). ─── */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;
  src:url("tipi/fraunces-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400;font-display:swap;
  src:url("tipi/fraunces-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Karla";font-style:normal;font-weight:300 500;font-display:swap;
  src:url("tipi/karla-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Karla";font-style:normal;font-weight:300 500;font-display:swap;
  src:url("tipi/karla-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C4,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* i gradini della parete, uno più in su (30 ottobre 2026): il fondo è il
     loro --incasso. Contrasti della scrittura (WCAG 2.1):
       --segno  13,8:1 sul fondo, 12,7 pannello, 11,5 pannello-2, 10,3 ripiano
       --segno-38  5,5:1 sul fondo, 5,3 pannello, 5,1 pannello-2, 4,8 ripiano
       --acceso con --sopra-acceso 7,7:1; --allarme 11,9:1 sul campo */
  --fondo:#F7F4EE;       /* la pagina */
  --pannello:#EFEAE1;    /* un pelo sotto: i conti, la pista del selettore */
  --pannello-2:#E6E0D4;  /* il passaggio del dito sulle voci del selettore */
  --ripiano:#DCD4C4;     /* la mensola delle bottiglie */
  --luce:#FCFAF6;        /* lo spigolo in luce delle mensole */
  --campo:var(--luce);   /* i campi da riempire, i tagliandi, gli errori */
  --bianco:#FFFFFF;      /* solo il QR */

  --segno:#06293A;              /* la scrittura: 13,8:1 sul fondo */
  --segno-60:rgba(6,41,58,.88); /* testo secondario */
  --segno-38:rgba(6,41,58,.70); /* etichette e note: 5,5:1 sul fondo, 5,3:1 sul pannello */
  --bordo:rgba(6,41,58,.28);    /* filetti */
  --acceso:#08536D;             /* il pieno di quello che si sceglie: 7,7:1 col suo chiaro */
  --sopra-acceso:#E8F6FC;
  --allarme:#5C2205;            /* gli errori, come gli avvisi della parete */

  /* tre raggi, e solo tre. Le mensole e i filetti restano a filo,
     come sulla parete: si arrotonda solo quello che si tocca o si tiene in mano. */
  --r-campo:14px;     /* campi, messaggi, riquadri vuoti */
  --r-foglio:20px;    /* conti, tagliandi, cartoncino del QR */
  --r-pillola:999px;  /* tasti, selettore, badge */

  --display:"Fraunces",Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --testo:"Karla","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--fondo);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--segno);
  font:400 17px/1.55 var(--testo);-webkit-font-smoothing:antialiased}
::selection{background:var(--acceso);color:var(--sopra-acceso)}
:focus-visible{outline:2px solid var(--segno);outline-offset:3px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img{display:block;max-width:100%}

.testata,main,footer{max-width:34rem;margin:0 auto;padding-left:20px;padding-right:20px}

/* ─── la testata: il marchio della parete, e l'uscita ─── */
.testata{display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:72px;border-bottom:1px solid var(--bordo)}
.marchio{display:inline-flex;align-items:center;gap:11px;text-decoration:none;min-height:48px}
.corona{width:36px;height:auto;flex:none;fill:var(--segno)}
.marchio__parola{display:block;line-height:1}
.marchio__parola b{display:block;font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.15em}
.marchio__parola small{display:block;font-size:13px;font-weight:500;color:var(--segno-38);margin-top:4px}
.testata form{margin:0}

/* ─── titoli ─── */
h1{font-family:var(--display);font-weight:400;font-size:2.125rem;line-height:1.08;
  letter-spacing:-.02em;margin:36px 0 10px;text-wrap:balance}
.sotto{margin:0 0 8px;color:var(--segno-60);max-width:36ch}
h2{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:400;
  font-size:1.625rem;line-height:1.15;letter-spacing:-.01em;margin:0 0 6px;
  padding-bottom:10px;border-bottom:1px solid var(--segno)}
h2 .conta{font-family:var(--testo);font-size:14px;font-weight:500;color:var(--segno-38);letter-spacing:0}
h3{font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.2;margin:0}
section{margin:48px 0 0}
p{margin:0 0 12px}
.nota,p small,label small{font-size:14px;line-height:1.5;color:var(--segno-38)}
p small{display:block}

/* ─── i messaggi dopo un'azione ─── */
.errore,.fatto{margin:20px 0 0;padding:14px 18px;font-weight:500;border-radius:var(--r-campo)}
.errore{color:var(--allarme);background:var(--campo);border:1px solid var(--allarme)}
.fatto{background:var(--acceso);color:var(--sopra-acceso)}
.errore:empty,.fatto:empty{display:none}

/* ─── i tasti: quelli della parete, a 48 px ─── */
button,.bottone{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 22px;font:500 15px/1.2 var(--testo);letter-spacing:.01em;
  border:1px solid var(--segno);border-radius:var(--r-pillola);background:transparent;color:var(--segno);
  cursor:pointer;text-decoration:none;transition:background-color .2s,color .2s}
button:hover{background:var(--acceso);border-color:var(--acceso);color:var(--sopra-acceso)}
button:active{transform:translateY(1px)}
button[type=submit]:not(.secondario):not(.stella){background:var(--acceso);border-color:var(--acceso);color:var(--sopra-acceso)}
button[type=submit]:not(.secondario):not(.stella):hover{background:var(--segno);border-color:var(--segno)}
button.secondario{background:transparent;color:var(--segno);border-color:var(--segno)}
button.nudo{border-color:var(--bordo);color:var(--segno-60);padding:0 16px;font-size:14px}
button:disabled,button:disabled:hover{background:transparent;color:var(--segno-38);
  border-color:var(--bordo);border-style:dashed;cursor:not-allowed;transform:none}

/* ─── moduli ─── */
form{margin:0}
form.modulo{display:flex;flex-direction:column;gap:18px;margin-top:28px}
form.modulo > button{width:100%;margin-top:6px}
label{display:flex;flex-direction:column;gap:7px;font-size:14px;font-weight:500;color:var(--segno-60)}
.coppia{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type=text],input:not([type]),input[type=email],input[type=password],input[type=number]{
  font:400 17px/1.3 var(--testo);color:var(--segno);min-height:48px;width:100%;padding:10px 14px;
  background:var(--campo);border:1px solid var(--segno-38);border-radius:var(--r-campo);appearance:none}
input:focus{outline:2px solid var(--segno);outline-offset:0;border-color:var(--segno)}
label small{font-weight:400}

/* il filetto sta sulla legenda e non sul fieldset: sul fieldset la
   legenda ci si siederebbe sopra, a cavallo della riga */
fieldset{border:0;padding:0;margin:8px 0 0;min-width:0}
legend{display:block;width:100%;padding:16px 0 0;margin:0 0 6px;border-top:1px solid var(--bordo);
  font-size:14px;font-weight:500;color:var(--segno)}
legend small{display:block;font-weight:400;color:var(--segno-38);font-size:14px}
label.casella{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;
  min-height:48px;padding:10px 0;font-size:14px;font-weight:400;line-height:1.5;color:var(--segno-60)}
label.casella input{width:24px;height:24px;margin:0;accent-color:var(--acceso);cursor:pointer}
.informativa{margin-top:28px;padding-top:16px;border-top:1px solid var(--bordo)}
.informativa small{font-size:13px}
.altro{margin:28px 0 0;font-size:15px;color:var(--segno-60)}
.altro a{color:var(--segno);font-weight:500}

/* ═══════ l'area ═══════ */

/* il codice: un cartoncino bianco con il margine del QR attorno.
   La larghezza la decide il telefono, fino a 280 px di codice. */
.tessera{margin-top:28px;background:var(--bianco);border:1px solid var(--bordo);border-radius:var(--r-foglio);
  padding:20px 20px 18px;text-align:center}
.qr{display:flex;justify-content:center;margin:0}
.qr img{width:min(72vw,264px);height:auto;image-rendering:pixelated}
.tessera__nome{margin:12px 0 2px;font-family:var(--display);font-size:1.25rem;line-height:1.2}
.tessera__uso{margin:0;font-size:15px;color:var(--segno-60)}
/* rigenerare il codice: si fa di rado, sta chiuso. <details> va senza JavaScript. */
details.rigenera{margin-top:12px;font-size:15px}
details.rigenera summary{display:flex;align-items:center;min-height:48px;cursor:pointer;
  color:var(--segno-60);list-style:none}
details.rigenera summary::-webkit-details-marker{display:none}
details.rigenera summary::before{content:"+";display:inline-block;width:20px;font-size:18px;color:var(--segno)}
details.rigenera[open] summary::before{content:"–"}
details.rigenera summary span{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
details.rigenera form{padding:4px 0 8px 20px}

/* i conti: un foglio per serata, un gradino sotto il fondo */
.conto{background:var(--pannello);padding:18px 18px 6px;margin:14px 0 0;border-radius:var(--r-foglio)}
.conto header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;
  padding-bottom:10px}
.conto header p{margin:0;font-size:14px;color:var(--segno-38)}
.conto .vuoto{font-size:15px;color:var(--segno-60);margin:0 0 12px}
ul.pezzi,ul.collezione,ul.promozioni{list-style:none;margin:0;padding:0}
ul.pezzi li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;
  min-height:64px;padding:8px 0;border-top:1px solid var(--bordo)}
.pezzo{flex:1 1 9rem;min-width:0;line-height:1.3}
.pezzo b{display:block;font-weight:500;font-size:17px}
.pezzo small{display:block;margin-top:3px;font-size:14px;color:var(--segno-38)}
.pezzo small.mio{color:var(--acceso);font-weight:500}
small.preso{font-size:14px;color:var(--segno-38)}
form.prendi{display:flex;align-items:center;gap:8px;margin-left:auto}
form.prendi button{min-width:96px}
label.quanti{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--segno-60)}
label.quanti input{width:4.2em;text-align:center;padding:10px 6px;font-variant-numeric:tabular-nums}

/* la collezione: le bottiglie in piedi su una mensola, come sulla parete */
ul.collezione li{display:grid;grid-template-columns:96px 1fr;grid-template-rows:1fr auto;column-gap:14px;align-items:end;
  padding-top:14px}
ul.collezione li + li{margin-top:6px}
.bottiglia{grid-row:1 / span 2;height:168px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
/* le foto della parete sono quadrate, con la bottiglia in piedi sul
   bordo di sotto e in scala vera: si ingrandiscono e si taglia l'aria ai lati */
.bottiglia img{height:168px;width:168px;max-width:none;flex:none;object-fit:contain;object-position:bottom}
.bottiglia--senza{height:168px}
ul.collezione .gin{align-self:end;line-height:1.25;padding-bottom:4px}
ul.collezione .gin a{font-family:var(--display);font-size:1.25rem;text-decoration:none}
ul.collezione .gin a:hover{text-decoration:underline}
ul.collezione .gin small{display:block;margin-top:4px;font-size:14px;color:var(--segno-38)}
/* la mensola: un piano chiaro con il filo di luce sopra e l'ombra sotto */
ul.collezione li::after{content:"";grid-column:1 / -1;height:8px;
  background:var(--ripiano);border-top:2px solid var(--luce);border-bottom:1px solid var(--bordo)}

/* le stelle: cinque bersagli da 44 px, piene fino al voto */
form.stelle{display:flex;align-items:center;gap:0;margin-left:-11px}
button.stella{min-width:44px;min-height:44px;padding:0;border:0;background:none;
  color:var(--segno);font-size:0;line-height:1}
/* la stella è un svg nel tasto (non il carattere ★, che Karla non ha e
   ogni telefono disegna a modo suo): vuota è il contorno, piena il pieno */
button.stella svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
button.stella.piena svg{fill:currentColor}
button.stella:hover,button.stella:focus-visible{background:none;color:var(--acceso)}
.senza-voto{display:block;font-size:14px;color:var(--segno-38);margin:2px 0 0}

/* le promozioni: un biglietto per ognuna */
ul.promozioni li{margin:14px 0 0;padding:18px 18px 18px;background:var(--pannello);
  font-family:var(--display);font-size:1.25rem;line-height:1.3}

/* consensi e account */
form.consensi{display:flex;flex-direction:column;gap:2px;margin-top:8px}
form.consensi button{align-self:flex-start;margin-top:10px}
.account p{margin-top:12px}

footer{margin-top:64px;padding-top:18px;padding-bottom:40px;border-top:1px solid var(--bordo);
  font-size:14px;color:var(--segno-38)}
footer p{margin:0 0 6px}
footer nav{display:flex;gap:4px 0;flex-wrap:wrap}
footer nav a{display:inline-flex;align-items:center;min-height:44px;margin-right:22px;color:var(--segno);font-weight:500}

@media (max-width:360px){
  .marchio__parola small{display:none}
  .coppia{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.nascosto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
ul.collezione .voto{grid-column:2;padding-bottom:4px}

/* gli stati vuoti tengono la loro cornice: un riquadro tratteggiato
   dove arriveranno i conti e le promozioni, una mensola vuota dove
   arriveranno le bottiglie */
.vuoto-riquadro{margin:14px 0 0;padding:16px 18px;border:1px dashed var(--segno-38);border-radius:var(--r-campo);font-size:15px;color:var(--segno-60)}
.mensola-vuota{margin:14px 0 0;padding-top:20px;font-size:15px;color:var(--segno-60)}
.mensola-vuota::after{content:"";display:block;height:8px;margin-top:12px;
  background:var(--ripiano);border-top:2px solid var(--luce);border-bottom:1px solid var(--bordo)}

/* ═══════ l'insegna: entra e registrati ═══════
   Il momento di marca è la parete stessa: il marchio grande come
   sull'insegna e una fila di bottiglie vere della carta sulla mensola.
   Poi il modulo, subito: sul telefono il primo campo resta nel primo schermo. */
.insegna{display:flex;flex-direction:column;align-items:center;text-align:center;
  max-width:34rem;margin:0 auto;padding:28px 20px 0;text-decoration:none}
.insegna .corona{width:56px}
.insegna b{display:block;margin:10px 0 0 .2em;font-family:var(--display);font-weight:400;
  font-size:44px;line-height:1;letter-spacing:.2em}
.insegna small{display:block;margin-top:8px;font-size:14px;font-weight:500;color:var(--segno-38)}
.fila{max-width:34rem;margin:22px auto 0;padding:0 20px}
.fila__bottiglie{display:flex;justify-content:center;align-items:flex-end;height:128px;overflow:hidden}
/* le foto sono quadrate con la bottiglia al centro: si accavallano
   le parti trasparenti, così le bottiglie stanno vicine come sulla parete */
.fila__bottiglie img{height:128px;width:128px;max-width:none;flex:none;margin:0 -40px;
  object-fit:contain;object-position:bottom}
.mensola{display:block;height:10px;background:var(--ripiano);border-top:2px solid var(--luce);border-bottom:1px solid var(--bordo)}
.mensola + .didascalia{margin:8px 0 0;font-size:13px;color:var(--segno-38);text-align:center}
h1.grande{font-size:2.5rem;line-height:1.02;letter-spacing:-.025em;margin:32px 0 10px}
.altro--tasto{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.altro--tasto .bottone{width:100%}
.bottone:hover{background:var(--acceso);border-color:var(--acceso);color:var(--sopra-acceso)}
.legenda-nota{display:block;font-weight:400;color:var(--segno-38);font-size:14px;margin-top:2px}

/* ═══════ il selettore delle viste ═══════
   Sono link (/area?vista=conti), non schede in JavaScript: funzionano
   senza script e dopo un POST il redirect torna sulla vista giusta.
   Cinque celle uguali dentro una cornice sola, come «Raggruppa per»
   della parete: quella scelta si riempie di blu. Sta in alto e resta lì. */
.viste{position:sticky;top:0;z-index:5;background:var(--fondo);padding:12px 16px 10px}
/* la pista è il gradino --pannello della parete, con un filo per vederla
   anche al buio; la vista scelta è una pillola piena dentro la pista */
.viste ul{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;max-width:32rem;margin:0 auto;padding:4px;
  list-style:none;background:var(--pannello);border:1px solid var(--bordo);border-radius:var(--r-pillola)}
.viste a{position:relative;border-radius:var(--r-pillola);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;min-height:56px;padding:6px 0;font-size:13px;font-weight:500;line-height:1;
  color:var(--segno-60);text-decoration:none;white-space:nowrap}
.viste a:hover{background:var(--pannello-2);color:var(--segno)}
.viste svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.viste a[aria-current="page"]{background:var(--acceso);color:var(--sopra-acceso)}

.numero{position:absolute;top:4px;left:calc(50% + 5px);min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pillola);
  background:var(--acceso);color:var(--sopra-acceso);font-size:12px;font-weight:500;line-height:19px;
  text-align:center;font-variant-numeric:tabular-nums}
.viste a[aria-current="page"] .numero{background:var(--sopra-acceso);color:var(--acceso)}
.testata .ciao{font-size:15px;color:var(--segno-60)}

h1.vista{font-size:2rem;margin:28px 0 8px}
h1.vista .conta{font-family:var(--testo);font-size:15px;font-weight:500;color:var(--segno-38);letter-spacing:0;margin-left:8px}
main > .nota:first-of-type{max-width:40ch}

/* la tessera: cosa c'è da fare, sotto il codice */
.da-fare{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--bordo)}
.da-fare a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;
  border-bottom:1px solid var(--bordo);text-decoration:none;font-weight:500}
.da-fare a:hover{background:var(--pannello)}
.da-fare a span{color:var(--segno-38);font-weight:400;font-size:15px}
.da-fare svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}

/* ═══════ le promozioni: tagliandi ═══════
   Un biglietto da strappare: sopra quello che offre, sotto la matrice
   con la scadenza e come si usa, divise da una perforazione con le due
   tacche ai lati (cerchi del colore del fondo, niente sfumature). */
ul.tagliandi{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.tagliando{position:relative;background:var(--campo);border:1px solid var(--segno-38);border-radius:var(--r-foglio)}
.tagliando__corpo{padding:20px 20px 18px}
.tagliando__titolo{margin:0;font-family:var(--display);font-size:1.75rem;line-height:1.08;letter-spacing:-.015em}
.tagliando__testo{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--segno-60)}
.tagliando--libero .tagliando__testo{margin:0;font-family:var(--display);font-size:1.3rem;line-height:1.3;color:var(--segno)}
.tagliando__matrice{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;
  padding:14px 20px;border-top:1px dashed var(--segno-38);font-size:14px;color:var(--segno-60)}
.tagliando__matrice b{font-weight:500;color:var(--segno)}
.tagliando__matrice::before,.tagliando__matrice::after{content:"";position:absolute;top:-10px;width:20px;height:20px;
  border-radius:50%;background:var(--fondo);border:1px solid var(--segno-38)}
.tagliando__matrice::before{left:-11px;clip-path:inset(0 0 0 50%)}
.tagliando__matrice::after{right:-11px;clip-path:inset(0 50% 0 0)}
.tagliando--vuoto{border-style:dashed;background:transparent}
.tagliando--vuoto .tagliando__titolo{color:var(--segno-60)}

/* ═══════ il profilo ═══════ */
dl.dati{margin:20px 0 0;border-top:1px solid var(--bordo)}
dl.dati div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--bordo)}
dl.dati dt{font-size:14px;color:var(--segno-38)}
dl.dati dd{margin:0;text-align:right;font-weight:500;overflow-wrap:anywhere}
.profilo section{margin-top:40px}
.profilo h2{font-size:1.375rem}
form.esci button{width:100%}
dl.dati div{align-items:baseline}
.fatto + .nota,.fatto + p{margin-top:16px}

/* ─── campi con l'etichetta dentro ───
   Il riquadro è la label: sopra il nome del campo in piccolo, sotto
   quello che si scrive. Funziona senza JavaScript e il bersaglio è
   tutto il riquadro (62 px). Al fuoco il filo diventa la scrittura. */
form.modulo > label,form.modulo .coppia > label{position:relative;gap:0;padding:8px 16px 5px;
  background:var(--campo);border:1px solid var(--segno-38);border-radius:var(--r-campo);
  font-size:13px;font-weight:500;color:var(--segno-60);cursor:text;transition:border-color .15s,box-shadow .15s}
form.modulo > label input,form.modulo .coppia > label input{min-height:30px;padding:0;border:0;border-radius:0;
  background:transparent;font-size:17px}
form.modulo > label input:focus,form.modulo .coppia > label input:focus{outline:none}
form.modulo > label:focus-within,form.modulo .coppia > label:focus-within{border-color:var(--segno);box-shadow:0 0 0 1px var(--segno)}
form.modulo > label:hover{border-color:var(--segno)}
.aiuto{margin:-10px 0 0 16px;font-size:14px;color:var(--segno-38)}
form.modulo{gap:12px}
form.modulo fieldset{margin-top:14px}

/* l'area: i titoli dei conti stanno sotto l'h1 della vista, quindi sono h2,
   ma hanno la misura piccola dei titoli del foglio */
.conto h2{display:block;font-size:1.25rem;line-height:1.2;margin:0;padding:0;border:0;letter-spacing:0}
.tessera__nome{overflow-wrap:anywhere}

/* ═══════ regolamento e informativa: un documento lungo ═══════ */
main.documento h1{margin-top:28px}
main.documento h2{display:block;font-size:1.25rem;margin:36px 0 8px;padding-bottom:6px}
main.documento ul,main.documento ol{padding-left:1.25em;margin:0 0 12px}
main.documento li{margin:0 0 6px}
main.documento .bozza{margin:20px 0 0}

/* ═══════ la testata dell'area: una riga sola ═══════
   Il saluto a sinistra, il marchio piccolo a destra, poi subito il
   selettore e il QR: a 375×667 il codice sta nel primo schermo senza
   scorrere (30 ottobre 2026, su richiesta dell'utente). */
.testata--area{min-height:56px;gap:12px}
.testata--area .ciao{min-width:0;font-family:var(--display);font-size:1.25rem;line-height:1.2;color:var(--segno);overflow-wrap:anywhere}
.testata--area .marchio{flex:none;gap:7px}
.testata--area .corona{width:26px}
.testata--area .marchio__parola b{font-size:17px}
.testata--area .marchio__parola small{display:none}
.testata--area + .viste{padding-top:8px}
.vista-tessera .tessera{margin-top:8px}
/* «Collezione» è la voce più lunga: a 390 px, in Karla vera, a 13 px
   toccava i bordi della pillola. Un punto in meno e la pista più larga. */
.viste{padding-left:12px;padding-right:12px}
.viste a{font-size:12px;letter-spacing:-.005em;padding:6px 2px}

/* ═══════ «Accedi con Google» (account/google.js, 30 ottobre 2026) ═══════
   Il tasto segue le linee guida del marchio di Google, non i nostri
   colori: fondo bianco #FFFFFF, filo #747775, scritta #1F1F1F, la «G» a
   quattro colori intera e non ritoccata, con il suo spazio attorno. Della
   casa prende solo la forma (pillola da 48 px, come gli altri tasti).
   Roboto se il telefono ce l'ha (Android sì), se no Karla: Roboto da
   Google non si scarica, i caratteri vengono solo da qui (font-src 'self'). */
a.google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;margin-top:28px;
  padding:0 22px;background:#FFFFFF;color:#1F1F1F;border:1px solid #747775;border-radius:var(--r-pillola);
  font:500 15px/1.2 "Roboto",var(--testo);letter-spacing:.01em;text-decoration:none;transition:border-color .2s,box-shadow .2s}
a.google svg{width:20px;height:20px;flex:none}
a.google:hover{border-color:var(--segno);box-shadow:0 0 0 1px var(--segno)}
a.google:active{transform:translateY(1px)}
/* «oppure» fra il tasto e il modulo: due filetti e la parola in mezzo */
.oppure{display:flex;align-items:center;gap:14px;margin:22px 0 0;font-size:14px;color:var(--segno-38)}
.oppure::before,.oppure::after{content:"";flex:1;border-top:1px solid var(--bordo)}
.oppure + form.modulo{margin-top:22px}
/* la pagina dei consensi dopo Google: i dati ricevuti, in sola lettura */
dl.dati--google{margin:0}