/* Il mio account (Chi sei, verifica in due passaggi), login con il codice, Utenti › verifica e primo avvio.
   Solo token della piattaforma (style.css): chiaro e scuro restano coerenti. Telefono prima di tutto. */

/* ---------------------------------------------------------------- pezzi comuni della verifica */
.tf-head { display: flex; align-items: flex-start; gap: .75rem; min-width: 0; }
.tf-head > div { display: grid; gap: .15rem; min-width: 0; }
.tf-head strong { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md); letter-spacing: -.01em; }
.tf-ico { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.tf-ico svg { width: var(--ic-md); height: var(--ic-md); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tf-ico.ok { background: color-mix(in srgb, var(--mint) 16%, var(--surface)); color: var(--mint-ink);
  border-color: color-mix(in srgb, var(--mint) 30%, transparent); }
.tf-pill { flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); font-weight: 650;
  padding: .2rem .65rem; border-radius: var(--radius); white-space: nowrap; }
.tf-pill::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.tf-pill.on { background: color-mix(in srgb, var(--mint) 16%, transparent); color: var(--mint-ink); }
.tf-pill.off { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--warn); }
.tf-input { font-family: var(--mono); font-size: var(--fs-xl); letter-spacing: .18em; text-align: center; font-variant-numeric: tabular-nums; }
.tf-input::placeholder { letter-spacing: .12em; opacity: .45; }
.tf-how { margin: 0; padding: 0; list-style: none; counter-reset: tf; display: grid; gap: .4rem; }
.tf-how li { counter-increment: tf; display: grid; grid-template-columns: 1.55rem 1fr; gap: .55rem; align-items: start;
  font-size: var(--fs-base); line-height: 1.4; }
.tf-how li::before { content: counter(tf); display: grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%;
  font-size: var(--fs-xs); font-weight: 700; background: var(--accent); color: var(--accent-ink, #fff); }
.tf-qr { display: grid; place-items: center; }
.tf-qr svg { display: block; width: min(13rem, 66vw); height: auto; background: #fff; padding: .55rem; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--e2, none); }
.tf-secret { display: block; font-family: var(--mono); font-size: var(--fs-md); letter-spacing: .06em; line-height: 1.5;
  padding: .55rem .7rem; border-radius: var(--radius); background: var(--surface-2); border: 1px dashed var(--line-strong);
  overflow-wrap: anywhere; user-select: all; }
.tf-manual summary { cursor: pointer; font-size: var(--fs-sm); color: var(--accent); font-weight: 600; }
.tf-manual p { margin: .4rem 0; }
.tf-codes { list-style: none; margin: 0; padding: .6rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .4rem;
  border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line); counter-reset: rc; }
.tf-codes li { counter-increment: rc; display: flex; align-items: center; gap: .45rem; padding: .35rem .5rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.tf-codes li::before { content: counter(rc); font-size: var(--fs-2xs); color: var(--muted); width: .9rem; text-align: right; flex: none; }
.tf-codes code { white-space: nowrap; font-family: var(--mono); font-size: var(--fs-md); letter-spacing: .04em; background: none; padding: 0; user-select: all; }
.tf-codes-acts { align-items: center; }
.tf-codes-acts .grow { flex: 1; }
.tf-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); font-weight: 600; padding: .15rem .55rem;
  border-radius: var(--radius); white-space: nowrap; }
.tf-chip svg { width: var(--ic-xs); height: var(--ic-xs); fill: none; stroke: currentColor; stroke-width: 2; }
.tf-chip.on { background: color-mix(in srgb, var(--mint) 15%, transparent); color: var(--mint-ink); }
.tf-chip.off { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }

/* ---------------------------------------------------------------- login */
.lg-step { display: grid; gap: .65rem; }
.lg-code { gap: .55rem; }
.lg-code .tf-head { margin-bottom: .2rem; }
.lg-code .link-btn, #login-back { justify-self: center; }
.lg-setup { display: grid; gap: .7rem; }
.lg-setup .tf-qr svg { width: min(12.5rem, 62vw); }
#login-codes .tf-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.login-card .tf-head .meta { line-height: 1.4; }

/* ---------------------------------------------------------------- Il mio account › Chi sei */
.acc-who-top { padding-bottom: .2rem; }
.acc-who-top .us-av { width: 3rem; height: 3rem; font-size: var(--fs-lg); }
.acc-who-top .us-id strong { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); letter-spacing: -.01em; }
.acc-areas:empty { display: none; }
.acc-areas { display: grid; gap: .3rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.acc-areas p { margin: 0; }

/* ---------------------------------------------------------------- Il mio account › Verifica in due passaggi */
.tf-panel { gap: .8rem; }
.tf-status { display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
.tf-status > div { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.tf-status strong { font-weight: 650; }
.tf-status.on { background: color-mix(in srgb, var(--mint) 8%, var(--surface)); border-color: color-mix(in srgb, var(--mint) 30%, var(--line)); }
.tf-status.on .tf-ico { background: color-mix(in srgb, var(--mint) 16%, var(--surface)); color: var(--mint-ink);
  border-color: color-mix(in srgb, var(--mint) 30%, transparent); }
.tf-panel .hint { margin: 0; }
#acc-tf-actions button svg { width: var(--ic-sm); height: var(--ic-sm); fill: none; stroke: currentColor; stroke-width: 1.8; }
.tf-setup, .tf-codes-box, .tf-proof { display: grid; gap: .8rem; padding: .9rem; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); background: color-mix(in srgb, var(--accent) 4%, var(--surface)); }
.tf-codes-box p { margin: 0; }
.tf-setup-grid { display: grid; gap: 1rem; align-items: start; }
.tf-side { display: grid; gap: .5rem; min-width: 0; }
.tf-side .btn-row { margin-top: .2rem; }
.tf-panel { container-type: inline-size; }
@container (min-width: 560px) {
  .tf-setup-grid { grid-template-columns: auto minmax(0, 1fr); }
  .tf-setup-grid .tf-qr svg { width: 12rem; }
}
#login-codes .tf-codes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .tf-status .tf-pill { display: none; } }

/* ---------------------------------------------------------------- Impostazioni › Utenti: chi ha la verifica */
.us-tf { display: grid; gap: .6rem; align-content: start; grid-column: 1 / -1; }
.us-tf-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.us-tf-head > div { display: grid; gap: .1rem; flex: 1 1 14rem; min-width: 0; }
.us-tf .hint { margin: 0; }
.us-tf-switch { color: var(--ink); font-weight: 600; }
.us-tf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.us-tf-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .6rem;
  border-radius: var(--radius); background: var(--surface-2); min-width: 0; }
.us-tf-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- primo avvio */
.su-card { gap: .85rem; }
.su-card .setup-head h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; font-size: var(--fs-2xl); }
.su-progress { height: .3rem; border-radius: var(--radius); background: var(--surface-2); overflow: hidden; }
.su-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2F6BFF, #38BDF8);
  transition: width .35s ease; }
.su-steps li { transition: background .2s, color .2s; }
.su-now { margin: -.2rem 0 0; font-weight: 600; color: var(--muted); }
.su-pane { gap: .65rem; }
.su-say { position: relative; display: grid; gap: .35rem; padding: .85rem 1rem .85rem 1.05rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line)); }
.su-say::before { content: ""; position: absolute; left: 0; top: .9rem; bottom: .9rem; width: 3px; border-radius: var(--radius);
  background: linear-gradient(180deg, #2F6BFF, #38BDF8); }
.su-say p { margin: 0; line-height: 1.5; }
.su-pane .fb-row { gap: .7rem; }
.su-pane .field { min-width: 0; }
.su-pane label { justify-content: flex-start !important; }
.su-learn { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.su-learn p { margin: 0; flex: 1 1 14rem; }
.su-learn button svg { width: var(--ic-sm); height: var(--ic-sm); fill: none; stroke: currentColor; stroke-width: 1.8; }
.su-more { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .8rem; }
.su-more[open] { display: grid; gap: .45rem; padding-bottom: .8rem; }
.su-more summary { cursor: pointer; font-weight: 600; font-size: var(--fs-md); }
.su-more label { display: flex; align-items: center; justify-content: space-between !important; gap: .5rem; flex-wrap: wrap; }
.su-note { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .85rem; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); }
.su-note svg { flex: none; width: var(--ic-md); height: var(--ic-md); margin-top: .1rem; fill: none; stroke: var(--accent); stroke-width: 1.8; }
.su-note p { margin: 0; font-size: var(--fs-base); line-height: 1.45; }
.su-tones { display: grid; gap: .55rem; }
.su-tone { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: .2rem; text-align: left; justify-items: start; padding: .85rem 1rem; min-height: 0; height: auto;
  border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  font: inherit; white-space: normal; }
.su-tone b { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lg); }
.su-tone span { font-size: var(--fs-base); color: var(--muted); line-height: 1.4; }
.su-tone:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.su-tone.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
@media (min-width: 640px) { .su-tones { grid-template-columns: repeat(3, minmax(0, 1fr)); } .su-tone { align-content: start; } }
.su-recap { margin: 0; display: grid; gap: .1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.su-recap > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .6rem; padding: .6rem .8rem; background: var(--surface-2); }
.su-recap dt { color: var(--muted); font-size: var(--fs-sm); }
.su-recap dd { margin: 0; overflow-wrap: anywhere; }
.su-recap dd .su-site { display: block; font-size: var(--fs-sm); }
.su-h { margin: .3rem 0 0; font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md); }
.su-next { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.su-next li { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.su-ni { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }
.su-ni svg { width: var(--ic-sm); height: var(--ic-sm); fill: none; stroke: currentColor; stroke-width: 1.8; }
.su-nt { display: grid; flex: 1; min-width: 0; }
@media (max-width: 600px) {
  .su-card { display: flex; flex-direction: column; min-height: 100dvh; border-radius: 0; border: 0;
    padding: 1rem 16px calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .su-card > * { flex: none; }
  .su-card .setup-head h2 { font-size: var(--fs-xl); }
  .su-steps li { justify-content: center; padding: .4rem; }
  .su-recap > div { grid-template-columns: 1fr; gap: .1rem; }
  .su-next li { flex-wrap: wrap; }
  .su-next li .su-nt { flex: 1 1 10rem; }
  .su-card .setup-foot { position: sticky; bottom: calc(-1rem - env(safe-area-inset-bottom, 0px)); background: var(--surface);
    padding: .7rem 0 .2rem; margin-top: auto; border-top: 1px solid var(--line); z-index: 1; }
}