/* =============================================================================
 * login.css — Login e onboarding (Notion §34). Solo token esistenti di
 * styles.css: stesso prodotto, chiaro e scuro. Glass LEGGERO: la card resta
 * quasi opaca (≥ 86%) perché la leggibilità viene prima; nessun glow.
 * ============================================================================= */
.auth-page { min-height: 100vh; background:
    radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--blue) 9%, transparent), transparent 60%),
    radial-gradient(50rem 28rem at 110% 110%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    var(--bg); }
.auth-tools { position: absolute; top: 46px; right: 16px; display: flex; gap: 8px; align-items: center; z-index: 2; }
.auth-main { display: grid; place-items: center; min-height: calc(100vh - 34px); padding: 72px 16px 32px; box-sizing: border-box; outline: none; }
.auth-card { width: min(100%, 420px); box-sizing: border-box; padding: 28px; border-radius: 18px;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--line) 85%, var(--ink) 5%);
    box-shadow: var(--shadow); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
.auth-card.is-wide { width: min(100%, 560px); }
.auth-brand { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; font-size: .9rem; color: var(--ink); }
.auth-brand .brand-mark { width: 34px; height: 34px; }
.auth-card h1 { margin: 0 0 6px; font-size: 1.45rem; line-height: 1.2; letter-spacing: -.01em; }
.auth-card .auth-sub { margin: 0 0 20px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.auth-provider { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; margin-bottom: 10px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--ink); font: inherit; font-weight: 650; cursor: pointer; }
.auth-provider:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.auth-provider .auth-glyph { width: 20px; text-align: center; font-weight: 800; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); font-size: .78rem; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.auth-field { display: grid; gap: 6px; margin-bottom: 12px; font-size: .84rem; font-weight: 600; color: var(--ink); }
.auth-field input { min-height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-weight: 400; }
.auth-field textarea { min-height: 96px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; font-weight: 400; resize: vertical; }  /* profilazione: stesso stile del campo */
.auth-field input:focus-visible, .auth-provider:focus-visible, .auth-primary:focus-visible, .auth-link:focus-visible, .auth-choice:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }
.auth-primary { width: 100%; min-height: 46px; border: 0; border-radius: 10px; background: var(--ink); color: var(--panel); font: inherit; font-weight: 700; cursor: pointer; }
.auth-primary[disabled] { opacity: .5; cursor: not-allowed; }
.auth-link { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.auth-foot { margin: 18px 0 0; font-size: .82rem; color: var(--muted); text-align: center; }
.auth-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--soft); color: var(--muted); font-size: .78rem; line-height: 1.45; }
.auth-error { margin: 0 0 12px; color: var(--critical); font-size: .84rem; }
.auth-list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.auth-choice { display: flex; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; }
.auth-choice input { accent-color: var(--ink); }
.auth-choice small { display: block; color: var(--muted); font-size: .76rem; }
.auth-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.auth-chips legend { width: 100%; margin-bottom: 8px; font-size: .84rem; font-weight: 600; }
.auth-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); font-size: .82rem; cursor: pointer; }
.auth-chip:has(input:checked) { border-color: var(--ink); background: var(--soft); font-weight: 650; }
.auth-chip input { accent-color: var(--ink); }
.auth-progress { display: flex; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.auth-progress li { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.auth-progress li.is-done { background: var(--ink); }
.auth-steps-label { margin: 0 0 6px; font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.auth-actions { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-top: 8px; }
.auth-actions .auth-primary { width: auto; padding: 0 22px; }
.auth-demo-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--ink); font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
@media (max-width: 480px) { .auth-card { padding: 22px 18px; } .auth-tools { top: 44px; } }
/* ---- Email + password (§34): una decisione per schermata ---------------------- */
.auth-back { display: inline-flex; gap: 6px; align-items: center; margin: -6px 0 14px; padding: 4px 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; }
.auth-back:hover { color: var(--ink); }
.auth-back:focus-visible, .auth-eye:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.auth-field label { font-size: .84rem; font-weight: 600; }
.auth-pw { position: relative; display: grid; }
.auth-pw input { padding-right: 48px; }
.auth-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.auth-eye:hover, .auth-eye[aria-pressed="true"] { color: var(--ink); background: var(--soft); }
.auth-hint { color: var(--muted); font-size: .76rem; font-weight: 400; }
.auth-chip-email { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; padding: 8px 12px; border-radius: 10px; background: var(--soft); font-size: .86rem; overflow-wrap: anywhere; }
.auth-chip-email span { font-weight: 600; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 14px 0 0; font-size: .86rem; }
.auth-ok { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--good) 12%, var(--panel)); color: var(--ink); font-size: .84rem; }
.auth-provider .auth-demo-tag { margin-left: 4px; font-weight: 600; }
.auth-primary + .auth-or, form + .auth-or { margin-top: 18px; }
/* Contrasto WCAG AA (≥ 4,5:1) misurato dal QA: il blu del sistema sulla card
 * quasi bianca arrivava a 4,38:1. Nei link del login si scurisce con il token
 * --ink (stesso colore, solo più profondo); il tema scuro resta invariato. */
.auth-link { color: color-mix(in srgb, var(--blue) 82%, var(--ink)); }
:root[data-theme="dark"] .auth-link { color: var(--blue); }
/* LIVE: la striscia DEMO si toglie con l'attributo hidden; styles.css le dà
 * display:flex, che altrimenti vincerebbe sull'attributo (difetto trovato dal QA). */
.demo-strip[hidden] { display: none; }

/* =============================================================================
 * Login V2 — B2B workspace access (§37) · rifinitura visiva (§37.1).
 * Struttura APPROVATA e congelata: qui cambiano solo bordi, vetro, ombre e
 * tema. UNA superficie in vetro (niente card dentro card); bordo continuo e
 * sottile, leggibile lungo tutto il perimetro (superficie + edge + ombra
 * morbida); gradiente quasi impercettibile; nessun glow. Chiaro e scuro con
 * gli STESSI token semantici: lo scuro riusa esattamente i token dark del
 * prodotto autenticato (styles.css), nessuna palette nuova.
 * ============================================================================= */
.login-v2 {
  /* Chiaro (approvato): crema, bianco caldo, verde/nero del prodotto. */
  --lg-bg: #f6f4ee;
  --lg-surface: rgb(255 255 255 / 62%);
  --lg-field: rgb(255 255 255 / 78%);
  --lg-ink: #15201f;
  --lg-on-ink: #ffffff;
  --lg-muted: #59635f;                     /* ≥ 4,5:1 sul crema */
  --lg-link: #1d4f8c;
  --lg-hairline: rgb(21 32 31 / 8%);
  /* Bordo: continuo e leggibile (inchiostro a bassa opacità) con una variazione minima crema → neutro → verde/grigio. */
  --lg-edge: linear-gradient(135deg, rgb(92 80 52 / 15%) 0%, rgb(21 32 31 / 11%) 50%, rgb(40 78 62 / 14%) 100%);
  --lg-edge-strong: linear-gradient(135deg, rgb(92 80 52 / 20%) 0%, rgb(21 32 31 / 15%) 50%, rgb(40 78 62 / 18%) 100%);
  --lg-highlight: rgb(255 255 255 / 75%); /* filo di luce interno, in alto */
  --lg-shadow: 0 1px 2px rgb(21 32 31 / 4%), 0 14px 32px -20px rgb(21 32 31 / 18%);
  --lg-cta-top: #212c2a; --lg-cta-bottom: #111a19;
  /* Versione C (11/10/2026): alone AZZURRO leggero dal token prodotto --blue, crema caldo in basso. */
  --lg-glow-a: color-mix(in srgb, var(--blue) 14%, transparent); --lg-glow-b: rgb(236 230 216 / 70%);
  --lg-msg-err-bg: #fbeceb; --lg-msg-err: #8f1d14; --lg-msg-ok-bg: #ebf3ee; --lg-msg-ok: #17402c;
  min-height: 100vh; min-height: 100dvh; color: var(--lg-ink);
  background:
    radial-gradient(46rem 26rem at 12% -6%, var(--lg-glow-a), transparent 62%),
    radial-gradient(40rem 24rem at 100% 104%, var(--lg-glow-b), transparent 60%),
    var(--lg-bg);
}
/* Scuro: traduzione diretta con i token dark del prodotto (--bg, --panel, --ink, --muted, --line, --blue). */
:root[data-theme="dark"] .login-v2 {
  --lg-bg: var(--bg);
  --lg-surface: rgb(23 30 28 / 72%);       /* --panel #171e1c, traslucido */
  --lg-field: rgb(31 40 37 / 78%);         /* --soft #1f2825 */
  --lg-ink: var(--ink);
  --lg-on-ink: var(--bg);
  --lg-muted: var(--muted);
  --lg-link: color-mix(in srgb, var(--blue) 82%, var(--ink));
  --lg-hairline: var(--line);
  --lg-edge: linear-gradient(135deg, rgb(243 246 242 / 16%) 0%, rgb(243 246 242 / 10%) 50%, rgb(165 176 172 / 15%) 100%);
  --lg-edge-strong: linear-gradient(135deg, rgb(243 246 242 / 22%) 0%, rgb(243 246 242 / 15%) 50%, rgb(165 176 172 / 20%) 100%);
  --lg-highlight: rgb(243 246 242 / 7%);
  --lg-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 16px 36px -22px rgb(0 0 0 / 70%);
  --lg-cta-top: #f7f9f6; --lg-cta-bottom: #e6ebe7;
  --lg-glow-a: rgb(38 50 46 / 55%); --lg-glow-b: rgb(31 40 37 / 60%);
  --lg-msg-err-bg: rgb(224 82 82 / 14%); --lg-msg-err: #f2a7a3; --lg-msg-ok-bg: rgb(88 205 153 / 12%); --lg-msg-ok: #b9ebd2;
}
/* Utility cluster: [DEMO] [◐] [🌐 IT ▾]. Sotto safe area e barra di stato. */
.login-top { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); display: flex; gap: 6px; align-items: center; z-index: 2; }
.login-lang, .login-theme { display: inline-flex; align-items: center; min-height: 36px; border-radius: 999px; color: var(--lg-muted);
  background: var(--lg-surface); border: 1px solid var(--lg-hairline); }
.login-lang { gap: 4px; padding: 0 4px 0 8px; }
.login-theme { justify-content: center; width: 36px; padding: 0; font: inherit; font-size: .95rem; color: var(--lg-ink); cursor: pointer; }
.login-theme:hover { border-color: color-mix(in srgb, var(--lg-ink) 22%, transparent); }
.login-theme:focus-visible { outline: 2px solid var(--lg-link); outline-offset: 2px; }
.login-lang select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--lg-ink); font: inherit; font-size: .8rem; font-weight: 650;
  letter-spacing: .04em; padding: 8px 18px 8px 2px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 9px) 52%, calc(100% - 5px) 52%; background-size: 4px 4px; background-repeat: no-repeat; }
.login-lang select option { color: #15201f; background: #fff; }
.login-lang:focus-within { outline: 2px solid var(--lg-link); outline-offset: 2px; }
.login-demo-tag { padding: 3px 8px; border-radius: 999px; font-size: .66rem; font-weight: 750; letter-spacing: .08em; color: var(--lg-muted);
  background: var(--lg-surface); border: 1px solid var(--lg-hairline); }
.login-diag { position: fixed; inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px; z-index: 5; padding: 8px 12px; border-radius: 10px; background: #312a15; color: #fff7d5; font: 12px/1.4 ui-monospace, Menlo, monospace; }
/* Viewport dinamico (barra Safari, tastiera): altezza dvh, safe area, scroll naturale; nessuna altezza fissa. */
.login-main { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; min-height: 100dvh;
  padding: calc(max(60px, 8vh) + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(56px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  box-sizing: border-box; outline: none; }
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: clamp(20px, 4vh, 36px); }
.login-logo .brand-mark { width: 52px; height: 52px; border-radius: 15px; font-size: 1rem; background: var(--lg-ink); color: var(--lg-on-ink);
  box-shadow: 0 1px 0 var(--lg-highlight) inset, 0 8px 22px -10px rgb(21 32 31 / 35%); }
.login-wordmark { font-size: .92rem; color: var(--lg-ink); letter-spacing: .01em; }
.login-wordmark b { font-weight: 750; }
/* Superficie principale: vetro + bordo continuo + filo di luce interno + ombra morbida. */
.login-surface { width: min(100%, 400px); box-sizing: border-box; padding: 26px 24px 22px; border-radius: 22px;
  border: 1px solid transparent;
  background: linear-gradient(var(--lg-surface), var(--lg-surface)) padding-box, var(--lg-edge-strong) border-box;
  backdrop-filter: blur(16px) saturate(1.08); -webkit-backdrop-filter: blur(16px) saturate(1.08);
  box-shadow: 0 1px 0 var(--lg-highlight) inset, var(--lg-shadow); }
.login-surface h1 { margin: 0; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.02em; text-align: center; }
.login-lead { margin: 6px 0 2px; text-align: center; font-size: 1rem; font-weight: 600; color: var(--lg-ink); }
.login-sub { margin: 0 0 20px; text-align: center; font-size: .86rem; line-height: 1.45; color: var(--lg-muted); }
.login-field { display: grid; gap: 6px; margin-bottom: 12px; }
.login-field label { font-size: .82rem; font-weight: 650; color: var(--lg-ink); }
/* Campi: parte della superficie (stesso vetro, stesso bordo), non card indipendenti. */
.login-input { position: relative; display: grid; border-radius: 12px; border: 1px solid transparent;
  background: linear-gradient(var(--lg-field), var(--lg-field)) padding-box, var(--lg-edge) border-box;
  box-shadow: 0 1px 0 var(--lg-highlight) inset; }
.login-input input { min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--lg-ink); font: inherit; font-size: 1rem; }
.login-input input:focus { outline: none; }
.login-input:focus-within { box-shadow: 0 0 0 2px var(--lg-link); }
.login-input .auth-eye { color: var(--lg-muted); }
.login-input .auth-eye:hover, .login-input .auth-eye[aria-pressed="true"] { color: var(--lg-ink); background: color-mix(in srgb, var(--lg-ink) 7%, transparent); }
.login-input.has-eye input { padding-right: 48px; }
.login-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin: 2px 0 12px; font-size: .86rem; }
.login-link { background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--lg-link); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.login-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.login-link:focus-visible, .login-provider:focus-visible, .login-primary:focus-visible, .login-check input:focus-visible { outline: 2px solid var(--lg-link); outline-offset: 2px; }
.login-check { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; min-height: 32px; font-size: .86rem; color: var(--lg-ink); cursor: pointer; }
.login-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--lg-ink); }
/* CTA: verde/nero profondo (chiaro) o inchiostro chiaro (scuro), gradiente quasi impercettibile, bordo discreto. */
.login-primary { position: relative; width: 100%; min-height: 50px; border: 1px solid color-mix(in srgb, var(--lg-ink) 85%, transparent); border-radius: 12px; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; color: var(--lg-on-ink);
  background-color: var(--lg-ink);                                       /* base (anche senza gradiente) */
  background-image: linear-gradient(180deg, var(--lg-cta-top) 0%, var(--lg-ink) 50%, var(--lg-cta-bottom) 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 12%) inset, 0 8px 18px -12px rgb(21 32 31 / 55%); transition: transform .08s ease, filter .12s ease; }
.login-primary:hover { filter: brightness(1.06); }
.login-primary:active { transform: translateY(1px); filter: brightness(.94); }
.login-primary[disabled] { cursor: progress; filter: none; opacity: .72; }
.login-primary[aria-busy="true"]::after { content: ""; position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--lg-on-ink) 40%, transparent); border-top-color: var(--lg-on-ink); animation: login-spin .8s linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login-primary[aria-busy="true"]::after { animation: none; } .login-primary { transition: none; } }
.login-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--lg-muted); font-size: .8rem; }
.login-or::before, .login-or::after { content: ""; flex: 1; border-top: 1px solid var(--lg-hairline); }
/* Provider: stessa larghezza, altezza, padding e colonna dell'icona; loghi con i colori ufficiali. */
.login-provider { width: 100%; display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; gap: 12px; min-height: 48px; margin-bottom: 10px; padding: 0 16px;
  border-radius: 12px; border: 1px solid transparent; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 650; color: var(--lg-ink);
  background: linear-gradient(var(--lg-field), var(--lg-field)) padding-box, var(--lg-edge) border-box;
  box-shadow: 0 1px 0 var(--lg-highlight) inset; transition: transform .08s ease; }
.login-provider:hover { background: linear-gradient(var(--lg-surface), var(--lg-surface)) padding-box, var(--lg-edge-strong) border-box; }
.login-provider:active { transform: translateY(1px); }
.login-provider img { width: 20px; height: 20px; justify-self: center; }
.login-provider span { text-align: center; }
/* Glifo Apple: nero sul chiaro, bianco sullo scuro (varianti previste dalle linee guida Apple), stesso asset. */
:root[data-theme="dark"] .login-provider img[src$="apple.png"] { filter: invert(1); }
.login-foot { margin: 16px 0 0; text-align: center; font-size: .88rem; color: var(--lg-muted); }
.login-msg { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: .86rem; line-height: 1.4; }
.login-msg.is-error { background: var(--lg-msg-err-bg); color: var(--lg-msg-err); }
.login-msg.is-info { background: var(--lg-msg-ok-bg); color: var(--lg-msg-ok); }
.login-back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; margin: -8px 0 6px; padding: 0; border: 0; background: none; color: var(--lg-muted); font: inherit; font-size: .86rem; cursor: pointer; }
.login-back:hover { color: var(--lg-ink); }
.login-back:focus-visible { outline: 2px solid var(--lg-link); outline-offset: 2px; }
.login-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 14px; padding: 6px 6px 6px 12px; border-radius: 10px; background: var(--lg-field); border: 1px solid var(--lg-hairline); font-size: .88rem; overflow-wrap: anywhere; }
.login-chip span { font-weight: 650; }
.login-code input { letter-spacing: .35em; font-size: 1.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.login-note { margin: 12px 0 0; font-size: .8rem; color: var(--lg-muted); text-align: center; line-height: 1.45; }
.login-v2 .auth-hint { color: var(--lg-muted); }
.login-v2 .auth-choice, .login-v2 .auth-chip { background: var(--lg-field); border-color: var(--lg-hairline); color: var(--lg-ink); }
.login-v2 .auth-list { margin-top: 4px; }
.login-v2 .auth-steps-label { color: var(--lg-muted); }
@media (max-width: 480px) {
  .login-main { padding-top: calc(62px + env(safe-area-inset-top)); }   /* respiro fra cluster in alto e logo */
  .login-surface { padding: 22px 18px 18px; border-radius: 20px; }
  .login-surface h1 { font-size: 1.45rem; }
}
@media (max-height: 700px) { .login-main { padding-top: calc(54px + env(safe-area-inset-top)); } .login-logo { margin-bottom: 16px; } }
/* Il glifo Apple è otticamente più piccolo a parità di box: +2px per lo stesso peso visivo. */
.login-provider img[src$="apple.png"] { width: 22px; height: 22px; }

/* =============================================================================
 * Versione C (approvata 11/10/2026, docs/design/design-system-login.md §10):
 * stessa identità e stessi token; dimensioni e spaziature da WEB, non i valori
 * Flutter copiati. Smartphone fluido; tablet più arioso; desktop proporzionato
 * allo spazio (niente "smartphone ingrandito"): superficie più ampia, centrata
 * in verticale, provider su una riga.
 * ============================================================================= */
.login-provider .lp-short { display: none; }
.login-link:disabled { color: var(--lg-muted); cursor: not-allowed; text-decoration: none; opacity: .75; }
.login-provider:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.login-provider:disabled:hover { background: linear-gradient(var(--lg-field), var(--lg-field)) padding-box, var(--lg-edge) border-box; }
.login-note-start { margin: -4px 0 12px; text-align: left; }
@media (min-width: 640px) {
  .login-surface { width: min(100%, 440px); padding: 30px 32px 26px; }
}
@media (min-width: 768px) and (min-height: 860px) {
  .login-main { justify-content: center; padding-top: calc(72px + env(safe-area-inset-top)); }
}
@media (min-width: 1024px) {
  .login-main { justify-content: center; padding-top: calc(64px + env(safe-area-inset-top)); padding-bottom: 48px; }
  .login-logo { margin-bottom: 28px; }
  .login-surface { width: clamp(480px, 36vw, 540px); padding: 40px 48px 34px; border-radius: 26px; }
  .login-surface h1 { font-size: 2rem; }
  .login-lead { font-size: 1.08rem; }
  .login-sub { font-size: .92rem; margin-bottom: 24px; }
  .login-providers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .login-providers .login-provider { margin: 0; grid-template-columns: auto auto; justify-content: center; gap: 8px; padding: 0 10px; }
  .login-providers .login-provider i { display: none; }
  .login-provider .lp-long { display: none; }
  .login-provider .lp-short { display: inline; }
}
@media (min-width: 1024px) and (max-height: 760px) { .login-main { justify-content: flex-start; } }

/* Logo della piattaforma nel login e nella shell (vedi styles.css .platform-logo). */
.login-logo .platform-logo { height: clamp(32px, 9vw, 44px); }
.auth-brand .platform-logo { height: 24px; }
.auth-brand .platform-product { color: var(--muted); font-size: .82rem; }
@media (max-width: 420px) { .auth-brand .platform-logo { height: 20px; } .auth-brand .platform-product { font-size: .74rem; } }

/* MFA (012): QR leggibile anche al sole (bianco puro, margine), chiave e codici in monospazio. */
.mfa-steps { margin: 0 0 12px; padding-left: 1.2rem; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.mfa-qr { display: block; width: min(232px, 70vw); height: auto; margin: 4px auto 12px; padding: 10px; background: #fff; border-radius: 12px; }
.mfa-manual { margin: 0 0 12px; font-size: .85rem; color: var(--muted); }
.mfa-manual summary { cursor: pointer; }
.mfa-secret, .mfa-codes { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.mfa-secret { margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); word-break: break-all; user-select: all; }
.mfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 4px 0 14px; padding: 12px 14px; list-style: none;
  border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: .95rem; user-select: all; }
.mfa-step3 { margin: 0 0 8px; }