/* ============================================================================
   LYFERA — I MODULI DELLA SOGLIA, IMPLEMENTAZIONE UNICA
   ----------------------------------------------------------------------------
   Attività DA.1 · 2026-08-05 · docs/design/TASK-DA.1-design.md (DEC-052a).

   Le pagine di soglia (checkout, signup, pagamento, start, verify, login)
   vivono in vetrina/ ma sono nate in account/: il guscio, i campi, la scelta
   e i passi erano scritti in account/assets/account.css. Qui ci sono UNA volta,
   e le due superfici li condividono.

   COME SI CARICA — l'ordine è parte del contratto:
   · pagine account:  tokens → cromo → QUESTO → account.css
     (il foglio locale viene dopo e può contestualizzare, mai ridefinire)
   · pagine di soglia: tokens → cromo → lyfera.css → QUESTO
     (qui l'ordine è invertito DI PROPOSITO: lyfera.css porta la base della
     testata e le sue @media, ma i registri della soglia — .control, .cells,
     .display — devono vincere sui loro omonimi di persuasione, e a parità di
     specificità vince chi parla per ultimo)

   ⚠️ LA REGOLA CHE QUESTO FILE NON VIOLA MAI (DEC-052c, dalla regressione di
   D0.2): una variante non si separa dalla base che modifica. Ogni gruppo qui
   dentro è INTERO — .choice con .choice__opt, .control con .control--brand,
   .step con .step--done. Chi sposta una riga sposta il suo gruppo.
   ========================================================================= */

/* ==========================================================================
   IL GUSCIO — una colonna, una cosa da fare
   ====================================================================== */

.gate { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; }
.gate__body { display: grid; align-content: center; justify-items: stretch; padding-block: clamp(48px, 9vw, 96px); }
.gate__foot { padding-block: var(--s8); border-top: var(--border-dashed); }
.gate__foot-in { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; justify-content: space-between; }

/* Sulla soglia la testata è il blocco flottante del sito (position: fixed,
   fuori dal flusso), non la fascia .chrome dell'account: la prima riga della
   griglia non esiste e il respiro in alto lo dà --chrome-h, la stessa costante
   che ogni pagina della vetrina usa in .below-chrome (lyfera.css §9). */
.gate--soglia { grid-template-rows: 1fr auto; }
.gate--soglia .gate__body { padding-block: calc(var(--chrome-h, 128px) + var(--s12)) clamp(48px, 9vw, 96px); }

/* Le due divergenze che la soglia eredita dall'account, con le stesse ragioni
   (account.css, blocco delle divergenze dichiarate): il display contenuto —
   qui si accompagna, non si grida — e la colonna di lettura a 62ch. Scoped sul
   guscio, non su :root: fuori dal guscio la vetrina resta la vetrina.

   ⚠️ SI RIDICHIARANO ENTRAMBI I NOMI, e non è ridondanza. Gli alias corti sono
   dichiarati su :root (tokens.css §alias) come `--t-display: var(--text-display)`:
   quel var() si risolve LÌ, su :root, e i discendenti ereditano il valore già
   calcolato. Ridefinire il solo nome lungo quaggiù non lo ricalcola — l'override
   sembrerebbe scritto e non farebbe niente. È la stessa classe di difetto di
   DEC-052(c) (la variante separata da ciò che la risolve), trovata dal controllo
   R2 e non visibile a `verifica-aderenza.py`, per cui ogni nome risulta definito. */
.gate {
  --text-display: clamp(2rem, 4.5vw, 3.0625rem); /* 32px..49px — 90% di 35.2..54.4, al 18/09/2026 */
  --max-width-read: 62ch;
  --t-display: clamp(2rem, 4.5vw, 3.0625rem); /* 32px..49px — alias davvero usato da .display: era rimasto al 100% */
  --max-read: 62ch;
}

.stack { display: grid; gap: var(--s6); }
.stack--tight { gap: var(--s4); }

/* ==========================================================================
   TIPOGRAFIA — due registri, come nella famiglia
   ====================================================================== */

.mono {
  font-family: var(--mono); font-size: var(--t-xs); font-weight: var(--w-regular);
  text-transform: uppercase; letter-spacing: var(--tr-wider);
  color: var(--n500); line-height: 1.5;
}
p.mono { margin: 0; }
.mono--brand { color: var(--brand); }
.mono--strong { color: var(--n900); }
.mono--acc { color: var(--accent); }

.mark-label {
  display: inline-block; font-family: var(--mono); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: var(--tr-wider); color: var(--n600);
  border-bottom: 2px solid var(--brand-rule); padding-bottom: var(--s1);
}

.display { font-weight: var(--w-light); font-size: var(--t-display); line-height: 1.06; letter-spacing: var(--tr-tight); margin: 0; text-wrap: balance; }
.h2 { font-weight: var(--w-light); font-size: var(--t-xl); line-height: 1.15; letter-spacing: var(--tr-tight); margin: 0; }
.h3 { font-weight: var(--w-light); font-size: var(--t-md); line-height: 1.25; letter-spacing: var(--tr-normal); margin: 0; }

.prose { max-width: var(--max-read); font-weight: var(--w-light); line-height: 1.7; color: var(--n700); }
.prose p { margin: 0 0 var(--s4); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: var(--w-medium); color: var(--n900); }
.hint { font-weight: var(--w-light); font-size: var(--t-sm); color: var(--n600); margin: 0; }

/* ==========================================================================
   COMANDI — la pillola. Riempimento pieno = attivo, mai predefinito.
   ====================================================================== */

.control {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--tr-wide); color: var(--n600);
  background: transparent; border: 1px solid var(--n200);
  border-radius: var(--radius-control); padding: var(--s3) var(--s6);
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
  white-space: nowrap;
}
.control:hover { color: var(--n900); border-color: var(--n300); }
.control--active { color: var(--surface); background: var(--n900); border-color: var(--n900); font-weight: var(--w-medium); }
.control--brand { color: var(--on-brand); background: var(--brand-fill); border-color: var(--brand-fill); font-weight: var(--w-medium); }
.control--brand:hover { color: var(--on-brand); background: var(--brand-hover); border-color: var(--brand-hover); }
.control--danger { color: var(--error); border-color: var(--error); }   /* distruttivo = contorno, mai pieno */
.control--danger:hover { color: var(--error); border-color: var(--error); background: var(--error-tint); }
.control--lg { padding: var(--s4) var(--s10); font-size: var(--t-sm); }
.control--block { width: 100%; }
.control:disabled,
.control[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   CONTENITORI SQUADRATI
   ====================================================================== */

.shell { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.shell--narrow { max-width: 560px; }
.shell--mid { max-width: 840px; }

.panel { border: 1px solid var(--n200); background: var(--surface-subtle); }
.panel__pad { padding: clamp(20px, 3vw, 32px); }
.panel + .panel { margin-top: -1px; }

.cells { display: grid; gap: 1px; background: var(--n200); border: 1px solid var(--n200); }
.cells > * { background: var(--surface); padding: var(--s5) var(--s6); }
.cells--2 { grid-template-columns: repeat(2, 1fr); }
.cells--3 { grid-template-columns: repeat(3, 1fr); }

.rule { border: 0; border-top: var(--border-dashed); margin: var(--s8) 0; }

/* ==========================================================================
   CAMPI — squadrati, perché un campo è un contenitore, non un comando.
   È l'unica precisazione che l'account aggiunge alla regola della forma unica.
   ====================================================================== */

.field { display: grid; gap: var(--s2); }
.field + .field { margin-top: var(--s5); }
.field__label { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--tr-wider); color: var(--n600); }
.field__note { font-size: var(--t-sm); font-weight: var(--w-light); color: var(--n500); }

.input {
  width: 100%;
  font-family: var(--sans); font-size: var(--t-base); font-weight: var(--w-light);
  letter-spacing: var(--tr-normal); color: var(--n900);
  background: var(--surface-muted);
  border: 1px solid var(--n200);
  border-radius: 0;
  padding: var(--s3) var(--s4);
  transition: border-color var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
/* ~~--n400~~ → --n600 — V-22, 2026-08-06. Il suggerimento dentro un campo è
   testo, e spesso è l'UNICO esempio del formato atteso: chiede 4,5:1.
   Il fondo del campo è --surface-muted, il più scuro dei tre a tema chiaro e
   il più chiaro dei tre a tema scuro, cioè il caso peggiore in entrambi:
   --n400 faceva 2,84 chiaro / 3,16 scuro. --n500 non basterebbe (4,29 / 4,44):
   qui serve --n600, che fa 6,17 / 6,35, e 6,70 / 6,84 sul fondo del campo a
   fuoco. Resta nettamente più chiaro del testo digitato (--n900, 13,58 / 13,99):
   un suggerimento non si confonde con una risposta. */
.input::placeholder { color: var(--n600); }
.input:hover { border-color: var(--n300); }
/* ~~outline: none~~ → tolto — V-21, 2026-08-06.
   Il bordo da 1px che lo sostituiva è --brand-rule su --surface-subtle: 1,80:1
   a tema chiaro, cioè MENO dell'anello che aveva spento (1,94:1), e sotto i 3:1
   di WCAG 2.2 SC 1.4.11. In tema scuro faceva 8,28:1 e quindi non lo vedeva
   nessuno. Un campo a fuoco senza anello è la tastiera che perde il segno.
   Tolta la riga, torna a valere l'anello canonico (base.css §anello, e le sue
   due copie): 4,12:1 chiaro / 8,65:1 scuro, su --surface-subtle 3,84 / 8,28.
   Il bordo e il fondo restano come SECONDO segnale — non erano sbagliati:
   erano soli. */
.input:focus { border-color: var(--brand-rule); background: var(--surface-subtle); }
.input[aria-invalid="true"] { border-color: var(--error); }

.field__error { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--error); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }

/* scelta a due celle: il tipo di conto */
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--n200); border: 1px solid var(--n200); }
.choice__opt {
  background: var(--surface); padding: var(--s5) var(--s6); text-align: left;
  display: grid; gap: var(--s2); align-content: start;
  transition: background-color var(--d-fast) var(--ease-out);
}
.choice__opt:hover { background: var(--surface-subtle); }
.choice__opt[aria-checked="true"] { background: var(--surface-muted); box-shadow: inset 2px 0 0 var(--brand-rule); }
.choice__name { font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--tr-wider); color: var(--n900); }
.choice__opt[aria-checked="true"] .choice__name { color: var(--brand); }
.choice__what { font-size: var(--t-sm); font-weight: var(--w-light); color: var(--n600); line-height: 1.5; }

/* Una scelta che non si può più cambiare deve SEMBRARE ferma. Senza questa
   regola le due celle cambiavano fondo al passaggio del mouse e non facevano
   niente: `.control` aveva il suo stato spento, `.choice__opt` no. Sta qui e non
   nel foglio locale perché una variante non si separa dalla base (DEC-052c).
   Trovato dal controllo R2 su DB.1, dove il tipo di conto si blocca dopo la
   prima fattura. */
.choice__opt[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.choice__opt[aria-disabled="true"]:hover { background: var(--surface); }
.choice__opt[aria-checked="true"][aria-disabled="true"]:hover { background: var(--surface-muted); }

/* ==========================================================================
   BADGE E STATI — pallino + tinta all'8%, mai blocchi pieni
   ====================================================================== */

.badge {
  border-radius:var(--radius-sm);
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: var(--tr-wide); padding: var(--s1) var(--s3);
  border: 1px solid; white-space: nowrap;
}
.badge--brand { color: var(--brand); border-color: var(--brand); background: transparent; }
.badge--acc   { color: var(--accent); border-color: var(--accent); background: transparent; }
.badge--ok    { color: var(--success); border-color: var(--success); background: transparent; }
.badge--warn  { color: var(--warning); border-color: var(--warning); background: transparent; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 5px; }

/* passi del percorso — la numerazione porta informazione: dice quanto manca */
.steps { display: flex; flex-wrap: wrap; gap: var(--s5); }
/* ~~--n400~~ → --n500 — V-22, 2026-08-06. Il passo NON ANCORA fatto non è un
   comando spento: è l'informazione che dice quanto manca, ed è il motivo per
   cui la numerazione esiste (riga sopra). Su --surface, il fondo di tutte e sei
   le pagine di soglia: 3,31 chiaro / 3,55 scuro → 5,00 / 5,00.
   La scala dei tre stati resta intera e nello stesso ordine:
   n500 (da fare) → n600 (--done) → n900 (--now). */
.step { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--tr-wide); color: var(--n500); }
.step--done { color: var(--n600); }
.step--done .dot { background: var(--success); }
.step--now { color: var(--n900); }
.step--now .dot { background: var(--brand-rule); }

/* riga di quota — mai un contatore che scende, una riga di stato */
.quota {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5);
  border: 1px solid var(--n200); background: var(--surface-subtle);
  padding: var(--s3) var(--s5);
}
.quota__n { font-family: var(--mono); font-size: var(--t-sm); color: var(--n900); letter-spacing: var(--tr-wide); }

/* ==========================================================================
   ADATTAMENTO — solo dei moduli che vivono qui. Il resto resta locale.
   ====================================================================== */

@media (max-width: 720px) {
  .pair, .choice, .cells--2, .cells--3 { grid-template-columns: 1fr; }
}

/* Su telefono la testata del sito scende in basso (lyfera.css §13, .below-chrome
   fa lo stesso): sopra la soglia non resta nulla da scavalcare. */
@media (max-width: 860px) {
  .gate--soglia .gate__body { padding-block: var(--s10) clamp(48px, 9vw, 96px); }
}

/* Compact account command variants, approved DESIGN-P1-90. */
.account-system:is(.studio-shell,.help-center,.account-feedback) .control {
  min-height: var(--space-12); padding: var(--space-3) var(--space-6);
  gap: var(--space-2); border-width: 1px; border-style: solid;
  border-radius: var(--radius-control); font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: var(--weight-regular);
  line-height: 1.5; letter-spacing: var(--tracking-wide);
  white-space: normal; text-align: center;
}
.account-system:is(.studio-shell,.help-center,.account-feedback) .control--lg { min-height: calc(var(--space-12) + var(--space-2)); }
.account-system:is(.studio-shell,.help-center,.account-feedback) .control--danger { color: var(--color-error); border-color: var(--color-error); }
.account-system:is(.studio-shell,.help-center,.account-feedback) .control:is(:disabled,[aria-disabled=true]) {
  opacity: 1; color: var(--color-neutral-600); background: var(--color-surface-subtle);
  border-color: var(--color-neutral-500); box-shadow: none;
}
.account-system:is(.studio-shell,.help-center,.account-feedback) .control { max-width:100%; }
.account-system .control { color:var(--color-neutral-900); border-color:var(--color-brand); background:transparent; }
.account-system .control--brand { color:var(--color-brand-on); background:var(--color-brand-fill); border-color:var(--color-brand-fill); }
.account-system .control--active { color:var(--color-neutral-900); background:var(--color-brand-light); border-color:var(--color-brand); }
.account-system .control:not(:disabled):not([aria-disabled=true]):hover { background:var(--color-brand-light); color:var(--color-neutral-900); }
.account-system .control--brand:not(:disabled):hover { background:var(--color-brand-fill); color:var(--color-brand-on); }

/* Icon commands also serve authentication forms. */
.iconctl {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-12); height: var(--space-12);
  padding: 0;
  background: transparent;
  color: var(--color-neutral-600);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.iconctl:hover { color: var(--color-neutral-900); border-color: var(--color-neutral-300); background: var(--color-surface-muted); }
.iconctl[aria-pressed="true"] { color: var(--color-neutral-900); background: var(--color-brand-light); border-color: var(--color-brand); }
.iconctl:disabled, .iconctl[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.plate .iconctl, .pick__plate .iconctl {
  color: var(--on-plate);
  border-color: var(--color-border-inverse-subtle);
  background: var(--color-overlay-dark);
}
.plate .iconctl:hover, .pick__plate .iconctl:hover { color: var(--on-plate); border-color: var(--on-plate-mut); }

/* A photo cannot provide a predictable contrast background. */
.iconctl--photo { background:var(--color-surface); color:var(--color-neutral-900); border-color:var(--color-neutral-500); }
.iconctl--photo:hover { background:var(--color-surface-muted); color:var(--color-neutral-900); border-color:var(--color-neutral-600); }