/* Sign-in screens in the language of the new dashboard (design/redesign-dashboard/PIANO.md,
   «Linee guida visive per le schermate di accesso»). Loaded after dashboard.css; uses only its
   tokens and those of appearance.css, except the filled purple button and the brand buttons of
   Apple and Google, which follow their own guidelines. Scoped to the sign-in screens. */
.unlock-screen { background: var(--stage); color: var(--ink); gap: 16px; }
.unlock-screen::before { background: radial-gradient(circle, #8e70e82e 0%, #5b4bd012 38%, transparent 70%); filter: blur(24px); }
html[data-theme=light] .unlock-screen::before { opacity: .55; }

/* No cards: every step rests directly on the background, grouped by spacing and type
   (interfaccia senza box, 29/09/2026). Only fields and buttons keep a visible shape. */
.unlock-screen > .auth-form, .unlock-screen .signup-step, .unlock-screen > .security-recovery {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0;
}
.unlock-screen > .auth-form { gap: 14px; }
.unlock-screen .security-recovery { border-top: 1px solid var(--hairline, #ffffff17); padding-top: 4px; }
.unlock-screen .signup-step { flex: 0 0 auto; margin-top: clamp(16px, 6vh, 72px); gap: var(--space-group, 18px); }
.unlock-screen .signup-step .button[type=submit] { margin-top: 14px; }

/* Title on one line, one short line under it. */
.unlock-screen h1, .unlock-screen .signup-step h1 { font-size: clamp(1.875rem, 8vw, 2.125rem); font-weight: 700; letter-spacing: -.04em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
.unlock-screen > p:not(.security-eyebrow):not(.security-error), .unlock-screen .signup-lead { font-size: .9375rem; line-height: 1.45; color: var(--muted); }
.unlock-screen .security-eyebrow { color: var(--muted); }
.unlock-screen label, .unlock-screen .security-recovery summary { color: var(--muted); }
.unlock-screen small { color: var(--muted); }

/* Steps as segments only; the words stay for screen readers. */
.signup-count { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.signup-progress span { height: 4px; background: var(--tint-strong, #ffffff1c); }
.signup-progress span.done { background: var(--primary-fill, linear-gradient(90deg, #a386f2, #6553c2)); }
.signup-back { color: var(--ink); background: none; border: 0; border-radius: 50%; width: 44px; height: 44px; }
.signup-back:hover, .signup-back:focus-visible { background: var(--tint, #ffffff10); }

/* Fields. */
.unlock-screen input:not([type=checkbox]) { min-height: 50px; border-radius: 14px; background: var(--tint, #ffffff10) !important; border: 1px solid transparent !important; color: var(--ink); box-shadow: none; }
.unlock-screen input:not([type=checkbox]):focus { outline: 2px solid var(--accent, var(--brand-hi)); outline-offset: 0; box-shadow: 0 0 0 5px var(--focus-glow); }
.unlock-screen input::placeholder { color: var(--muted); opacity: .7; }
.unlock-screen .signup-code, .unlock-screen .auth-form input[inputmode=numeric] { font-size: 1.5rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }

/* Buttons: filled purple, secondary tile. */
.unlock-screen .button, html[data-theme=light] .unlock-screen .button { min-height: 50px; border-radius: 999px; border: 0; background: var(--primary-fill, linear-gradient(145deg, #a386f2, #6553c2)); color: var(--on-primary, #fff); font-weight: 600; box-shadow: none; }
.unlock-screen .button:disabled { opacity: .55; }
.unlock-screen .button.secondary, html[data-theme=light] .unlock-screen .button.secondary { background: var(--tint, #ffffff10); border: 0; color: var(--ink); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.unlock-screen .button.secondary:hover, .unlock-screen .button.secondary:active { background: var(--tint-strong, #ffffff1c); }
.unlock-screen .text-button { color: var(--accent, var(--brand-hi)); min-height: 44px; }

/* Brand buttons: Apple black (white in the dark theme), Google white with its logo. */
.login-alternatives { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8125rem; max-width: none !important; width: 100%; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline, #ffffff17); }
.unlock-screen .provider-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; }
.provider-button svg { width: 20px; height: 20px; flex: none; }
.unlock-screen .provider-button[data-provider=apple] { background: #fff; color: #000; border: 1px solid #fff; }
html[data-theme=light] .unlock-screen .provider-button[data-provider=apple] { background: #000; color: #fff; border-color: #000; }
.unlock-screen .provider-button[data-provider=google], html[data-theme=light] .unlock-screen .provider-button[data-provider=google] { background: #fff; color: #1f1f1f; border: 1px solid #747775; font-family: Roboto, system-ui, sans-serif; font-weight: 500; }

/* Codes and keys as tiles. */
.unlock-screen .recovery-code, .unlock-screen .auth-recovery-codes code { display: block; padding: 8px 0; background: none; border: 0; border-bottom: 1px solid var(--hairline, #ffffff17); border-radius: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; color: var(--ink); }
.identity-test { padding-left: 12px; border-left: 2px solid var(--brand-hi); }
.turnstile-box:empty { display: none; }
.turnstile-box { display: flex; justify-content: center; }

/* Face ID / key in a 58 px circle, like the shortcuts. */
.unlock-screen .security-emblem { width: 58px; height: 58px; padding: 14px; border-radius: 50%; background: var(--tint, #ffffff10); border: 0; color: var(--brand-hi); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.unlock-screen .security-emblem svg { stroke-width: 1.75; }

/* Motion: short fades only. */
.unlock-screen > * { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .unlock-screen > *, .unlock-screen::before { animation: none; } }

/* Welcome: the second choice as an outline, like the other secondary buttons. */
.welcome .welcome-secondary { background: var(--tint, #ffffff10); border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Wider screens: one calm column, left-aligned steps. */
@media (min-width: 700px) { .unlock-screen .signup-step { max-width: 400px; } }
@media (prefers-contrast: more) { .unlock-screen input:not([type=checkbox]), .unlock-screen .button.secondary, .welcome .welcome-secondary { border: 1px solid var(--ink) !important; } .unlock-screen .security-recovery, .unlock-screen .recovery-code { border-color: var(--ink); } }
@media (forced-colors: active) { .unlock-screen input:not([type=checkbox]), .unlock-screen .button { border: 1px solid ButtonText !important; } }