/* ── Tessera del club ──────────────────────────────────────────────
   Il filetto oro corre tutto attorno alla card su angoli arrotondati.
   Assomiglia al pattern che DESIGN.md vieta ("niente bordi-accento
   colorati su angoli arrotondati"), ed è un'eccezione voluta: lì la
   regola parla dell'accento di stato su un elemento di lista, qui è il
   bordo di una carta fisica. La regola resta valida ovunque altrove.

   Nota sui token --ink*: in design-tokens.css --ink è un hex
   (#f5f2ec) e --ink-muted/--ink-dim sono già rgba() compiuti, non
   triple HSL come --gold/--surface-*. Vanno usati diretti (var(--ink))
   o via color-mix() per opacità arbitrarie: hsl(var(--ink)) sarebbe
   CSS non valido (proprietà scartata, testo che eredita il colore
   dell'antenato invece di quello voluto). */

/* La tessera ha una misura sua, non quella del contenitore: è un oggetto
   fisico, e una carta che su tablet diventa il doppio che su desktop smette
   di sembrarlo. 408px è la larghezza della colonna sticky del profilo
   (.prof-grid), quindi su desktop non cambia niente; sotto i 1240px, dove
   la griglia diventa a colonna singola, la card resta di quella misura
   invece di allargarsi fino al bordo. Il min(100%) serve solo ai telefoni
   più stretti di 408px + margini, dove restare rigida vorrebbe dire
   sfondare la pagina. */
.club-card {
    perspective: 1300px;
    display: block;
    inline-size: min(100%, 408px);
    margin-inline: auto;
    border: 0;
    padding: 0;
    background: none;
}

.club-card--flippable {
    cursor: pointer;
}

.club-card__inner {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 1.586 / 1;          /* proporzione ISO/IEC 7810 ID-1 */
    transform-style: preserve-3d;
    transition: transform var(--dur-slow) var(--ease-out);
    transform: rotateX(var(--club-card-tilt-x, 0deg)) rotateY(var(--club-card-tilt-y, 0deg));
}

.club-card__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid hsl(var(--gold) / 0.38);
    box-shadow: 0 28px 60px -20px rgb(0 0 0 / 0.85);
    display: flex;
    flex-direction: column;
}

.club-card__face--front {
    background:
        radial-gradient(90% 120% at 100% 0%, hsl(var(--gold) / 0.14), transparent 55%),
        radial-gradient(70% 100% at 0% 100%, hsl(var(--gold) / 0.08), transparent 50%),
        linear-gradient(115deg, hsl(var(--surface-3)), hsl(var(--surface-1)) 48%, hsl(var(--surface-3)));
    justify-content: space-between;
    padding: 20px 24px;
}

/* Retro: due colonne affiancate, QR a sinistra e il resto a destra. Il
   padding è quello del fronte, così il QR "quasi a tutta altezza" resta
   dentro il margine ottico della card invece di toccarne il bordo. */
.club-card__face--back {
    background: linear-gradient(115deg, hsl(var(--surface-3)), hsl(var(--surface-1)) 50%, hsl(var(--surface-3)));
    transform: rotateY(180deg);
    flex-direction: row;
    align-items: stretch;
    gap: 18px;
    padding: 16px 20px;
}

.club-card__sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, color-mix(in srgb, var(--ink) 7%, transparent) 47%, hsl(var(--gold) / 0.16) 52%, transparent 60%);
    background-size: 220% 100%;
    background-position: var(--club-card-sheen, 50%) 0;
    transition: background-position var(--dur-base) var(--ease-out);
}

.club-card__head,
.club-card__number-block,
.club-card__foot {
    position: relative;   /* sopra lo sheen */
}

.club-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

/* I due esecutivi sono già bianchi su trasparente: nessun filtro, nessun
   currentColor — sono <img>, non SVG inline. La scritta è allineata alla
   linea ottica del pittogramma, non al suo bordo superiore. */
.club-card__wordmark {
    display: block;
    inline-size: min(160px, 44%);
    block-size: auto;
    margin-block-start: 5px;
}

.club-card__mark {
    display: block;
    block-size: 46px;
    inline-size: auto;
}

.club-card__label {
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: hsl(var(--gold-soft) / 0.8);
}

.club-card__number {
    margin-block-start: 3px;
    font-family: var(--font-display);
    font-size: 34px;
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--ink);
}

.club-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.club-card__holder {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
}

.club-card__since {
    margin-block-start: 3px;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.club-card__tier {
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: hsl(var(--gold-soft));
}

/* Il QR prende il 90% dell'altezza utile e resta quadrato: è l'aspect-ratio
   a dargli la larghezza, così la colonna di destra prende quello che avanza
   senza numeri magici. Quel 10% lasciato lì non è decorativo — è la
   larghezza che serve al testo accanto per non finire a sei parole per riga
   sugli schermi stretti. Fondo trasparente e moduli bianchi arrivano da
   QrCode::svg($url, …, '#ffffff', null): la quiet zone la fa la superficie
   della card, che sotto al QR è uniforme. */
.club-card__qr {
    flex: none;
    block-size: 90%;
    align-self: center;
    aspect-ratio: 1;
}

.club-card__qr svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.club-card__back-side {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    text-align: end;
}

.club-card__back-top {
    min-inline-size: 0;
}

/* Questa riga la si legge col telefono in mano, non a schermo intero: era
   troppo piccola e troppo spenta. La colonna qui a destra del QR è larga
   ~125px sulla card da 408 — il corpo può crescere di poco, il contrasto
   invece si può alzare parecchio, ed è quello che si nota. */
.club-card__use {
    margin: 0;
    font-size: 10.5px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--ink) 88%, transparent);
}

.club-card__terms {
    margin: 7px 0 0;
    font-size: 9.5px;
    line-height: 1.45;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
}

/* Il ritaglio degli occhi in basso a destra. Il PNG è già tagliato sul lato
   inferiore e il margine negativo in basso lo fa uscire dalla faccia, che
   con overflow:hidden chiude il taglio: il marchio finisce contro il bordo
   inferiore invece di sembrare un'icona posata lì.
   Di lato no: il margine destro lascia un filo di respiro fra il ritaglio e
   il bordo della card (il padding della faccia è 20px, qui se ne riprendono
   10). Margini negativi e non position:absolute perché resta un elemento del
   flusso: il testo sopra non ci finisce mai sotto, a qualsiasi larghezza.
   Il PNG porta la propria opacità (bianco al 70%): qui non se ne aggiunge. */
.club-card__eyes {
    display: block;
    inline-size: min(104px, 100%);
    block-size: auto;
    margin-block-start: 8px;
    margin-block-end: -16px;
    margin-inline-end: -10px;
}

/* Sotto i 360px di schermo la card scende sotto i 290px e la colonna di
   destra non regge più il corpo maggiorato: l'ultima riga verrebbe tagliata
   dal bordo inferiore. Lì si torna alla misura di prima — su uno schermo
   così stretto anche la card è più piccola, quindi il testo resta comunque
   in proporzione. */
@media (max-width: 359px) {
    .club-card__use { font-size: 9.5px; }
    .club-card__terms { font-size: 9px; }
}

.club-card.is-flipped .club-card__inner {
    transform: rotateX(var(--club-card-tilt-x, 0deg)) rotateY(calc(180deg + var(--club-card-tilt-y, 0deg)));
}

.club-card--flippable:focus-visible {
    outline: 2px solid hsl(var(--gold));
    outline-offset: 6px;
    border-radius: 20px;
}

/* Galleggiamento: solo se il movimento è gradito. */
@media (prefers-reduced-motion: no-preference) {
    .club-card--flippable .club-card__inner {
        animation: clubCardFloat 7s ease-in-out infinite;
    }
    @keyframes clubCardFloat {
        0%, 100% { translate: 0 0; }
        50%      { translate: 0 -6px; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .club-card__inner,
    .club-card__sheen {
        transition: none;
    }
}

/* ── Tessera a schermo pieno ─────────────────────────────────────── */
.tessera-fullscreen {
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 28px 22px 56px;
    text-align: center;
}

.tessera-fullscreen__back {
    align-self: flex-start;
}

/* Nessuna misura qui: la impone .club-card, che è la stessa su tutte le
   pagine. Questo è solo il contenitore che la centra. */
.tessera-fullscreen__card {
    inline-size: 100%;
}

.tessera-fullscreen__qr {
    background: hsl(0 0% 100%);
    border-radius: 14px;
    padding: 10px;
    line-height: 0;
}

.tessera-fullscreen__code {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 0.1em;
    color: var(--ink);
}

.tessera-fullscreen__hint {
    margin: 0;
    max-inline-size: 34ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* ── Profilo socio ─────────────────────────────────────────────────
   Nota sui token: --gold/--surface-* sono triple HSL (si avvolgono,
   hsl(var(--surface-2))); --ink/--ink-muted/--ink-dim e
   --border-soft/--border-strong sono già colori diretti (var(--ink),
   var(--border-soft)) — avvolgerli in hsl() li rende CSS non valido
   e la dichiarazione viene scartata in silenzio. Vedi la nota in cima
   a questo file per --ink*, vale identica per --border-*. */

.prof-grid {
    display: grid;
    grid-template-columns: 408px 1fr;
    gap: 34px;
    align-items: start;
}

.prof-club {
    position: sticky;
    inset-block-start: 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sotto i 1240px la colonna sticky non ha più senso: la board diventa
   una sola colonna, nella stessa sequenza del mock mobile. */
@media (max-width: 1239px) {
    .prof-grid { grid-template-columns: 1fr; }
    .prof-club { position: static; }
}

.prof-panel {
    padding: 18px 20px;
    background: hsl(var(--surface-2));
    border: 1px solid var(--border-soft);
    border-radius: 14px;
}

.prof-panel__title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 50%, transparent);
}

.prof-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 14px;
}
.prof-panel__head .prof-panel__title { margin: 0; }
/* Testata con più di due pezzi (pillola di stato + "Modifica"): senza questo
   il space-between li sparpaglia, con la pillola a mezz'aria in centro. Quelli
   a destra restano insieme, il titolo resta a sinistra. */
.prof-panel__head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Identità: avatar + nome */
.prof-identity {
    display: flex;
    align-items: center;
    gap: 16px;
}
@media (max-width: 1239px) {
    .prof-identity {
        flex-direction: column;
        text-align: center;
    }
}

.prof-avatar {
    position: relative;
    flex: none;
}
.prof-avatar__edit {
    position: absolute;
    inset-block-end: -2px;
    inset-inline-end: -2px;
}
.prof-avatar--inline {
    margin-block-end: 16px;
}

/* Esito del caricamento foto: la riga la inserisce lo script della pagina
   subito dopo .prof-avatar, così il socio sa se la foto è andata o no.
   Prima non c'era, e un formato rifiutato spariva senza dire niente. */
.prof-avatar-status {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-muted);
    max-width: 34ch;
}
.prof-avatar-status--error {
    color: hsl(var(--status-rejected));
}
@media (max-width: 1239px) {
    .prof-avatar-status {
        text-align: center;
        margin-inline: auto;
    }
}

.prof-identity__name {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 23px;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0;
}

/* Didascalia sotto la tessera: due varianti, una per dispositivo (non per
   stato), scelte in CSS con @media (hover: hover). */
.prof-card-hint {
    margin: 12px 0 0;
    text-align: center;
    font-size: 11px;
    color: color-mix(in srgb, var(--ink) 38%, transparent);
}
.prof-card-hint--pointer { display: none; }
.prof-card-hint--touch { display: inline; }
@media (hover: hover) {
    .prof-card-hint--pointer { display: inline; }
    .prof-card-hint--touch { display: none; }
}

/* Wallet: unica azione rimasta sotto la tessera, da quando il pannello
   "Codice iscritto" è stato tolto (ripeteva il QR che sta sul retro). */
.prof-card-wallet {
    display: flex;
    justify-content: center;
    margin-block-start: 12px;
}

/* Socio senza tessera: unica azione di conversione della pagina, unico
   .btn--gold ammesso. */
.prof-no-card {
    text-align: center;
}
.prof-no-card__lede {
    margin: 10px 0 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-muted);
}

/* Colonna dati */
.prof-col-data {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Abbonamento */
.prof-sub__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.prof-sub__plan {
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
}
.prof-sub__meta {
    font-size: 12.5px;
    color: var(--ink-muted);
    margin-block-start: 4px;
}

/* Dati personali / Indirizzi: griglia di campi con toggle sola-lettura ↔
   modifica. .prof-toggle-group riceve .is-editing dal piccolo script in
   fondo a user-settings.php; i campi restano sempre nel DOM in entrambi
   gli stati, quindi il salvataggio (form vero, niente fetch) funziona a
   prescindere da quale stato era visibile. */
.prof-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 30px;
    margin-block-start: 2px;
}
.prof-field {
    padding: 11px 0 12px;
    border-block-end: 1px solid var(--border-soft);
}
.prof-field:nth-last-child(-n+2) { border-block-end: 0; }

.prof-field__label {
    display: block;
    font-size: 11.5px;
    color: var(--ink-muted);
}
.prof-field__value {
    margin-block-start: 3px;
    font-size: 14px;
    color: var(--ink);
}
/* Specificità: `.prof-panel .prof-field__input` (0,2,0) e non solo
   `.prof-field__input` (0,1,0) di proposito — style.css ha una regola
   "shadcn" globale, `input[type="text"], ..., select` (0,1,1), che vincerebbe
   su una singola classe e rimetterebbe display:flex sull'input anche fuori
   dallo stato "Modifica". Vista al primo giro dell'harness di verifica. */
.prof-panel .prof-field__input {
    display: none;
    width: 100%;
    margin-block-start: 5px;
    background: hsl(var(--surface-3));
    border: 1px solid var(--border-strong);
    color: var(--ink);
    padding: 8px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}
.prof-toggle-group.is-editing .prof-field__value { display: none; }
.prof-toggle-group.is-editing .prof-field__input { display: block; }

.prof-fields__actions {
    display: flex;
    justify-content: flex-end;
    margin-block-start: 16px;
}

/* Sotto i 600px i campi tornano riga singola, etichetta a sinistra e
   valore/input a destra: stessa sequenza del mock mobile. */
@media (max-width: 599px) {
    .prof-fields { grid-template-columns: 1fr; }
    .prof-fields .prof-field:nth-last-child(-n+2) { border-block-end: 1px solid var(--border-soft); }
    .prof-fields .prof-field:last-child { border-block-end: 0; }
    .prof-fields .prof-field {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    .prof-fields .prof-field__label { flex: none; }
    .prof-fields .prof-field__value { margin-block-start: 0; text-align: end; }
    .prof-fields .prof-field__input { margin-block-start: 0; width: auto; flex: 1; max-width: 62%; text-align: end; }
}

/* Indirizzi: oggi un solo riquadro (users.address), a griglia responsive
   per quando in futuro se ne aggiungerà un secondo (spedizione/fatturazione)
   senza dover riscrivere il markup. */
.prof-addr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-block-start: 14px;
}
.prof-addr__item {
    padding: 14px;
    background: hsl(var(--surface-3));
    border: 1px solid var(--border-soft);
    border-radius: 11px;
}
.prof-addr__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 9px;
    color: hsl(var(--gold-soft));
}
.prof-addr__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.prof-addr .prof-field__value { margin-block-start: 0; font-size: 13.5px; line-height: 1.55; }
.prof-addr .prof-field__input { margin-block-start: 0; }

/* Uscita + copyright, in fondo alla colonna dati. */
.prof-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 2px 0;
}
.prof-foot__copy {
    font-size: 10px;
    color: color-mix(in srgb, var(--ink) 25%, transparent);
    letter-spacing: 0.08em;
}

/* ── Biglietto da visita (Task 10) ──────────────────────────────────
   La vetrina pubblica dietro il QR: colonna centrata, sobria di
   default — nome, iniziali e "Socio ISDS dal ..." finché il socio non
   accende dei campi da /settings. Stessi token della sezione Profilo
   sopra: --gold e --surface-N sono triple HSL (si avvolgono in hsl()),
   --ink... e --border... sono già colori diretti (var(--ink)). */

.biglietto {
    max-inline-size: 480px;
    margin: 48px auto 64px;
    padding: 40px 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    background: hsl(var(--surface-2));
    border: 1px solid var(--border-soft);
    border-radius: 18px;
}

.biglietto__name {
    margin: 6px 0 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* Pillola oro del biglietto pubblico. */
.biglietto__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: hsl(var(--gold) / 0.1);
    border: 1px solid hsl(var(--gold) / 0.3);
    color: hsl(var(--gold));
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.biglietto__fields {
    inline-size: 100%;
    margin: 10px 0 4px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.biglietto__field {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    text-align: start;
}

.biglietto__field dt {
    flex: none;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.biglietto__field dd {
    margin: 0;
    font-size: 14px;
    color: var(--ink);
    text-align: end;
    word-break: break-word;
}

.biglietto .btn {
    margin-block-start: 8px;
}

@media (max-width: 599px) {
    .biglietto {
        margin: 28px 16px 48px;
        padding: 32px 20px 26px;
    }
    .biglietto__field {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .biglietto__field dd {
        text-align: start;
    }
}

/* ── Interruttori del biglietto + rigenerazione QR (Task 11) ────────
   Stessi token della sezione Profilo qui sopra. */

.prof-panel__lede {
    margin: 4px 0 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-muted);
}

/* Il form stesso è la griglia: gli input hidden (_csrf) sono display:none
   di default e non occupano celle, il bottone "Salva" chiude la griglia
   su tutta la larghezza. */
.prof-visibility {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 16px;
}

.prof-visibility__row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    font-size: 13.5px;
    color: var(--ink);
    cursor: pointer;
}

.prof-visibility__row input[type="checkbox"] {
    flex: none;
    inline-size: 16px;
    block-size: 16px;
    accent-color: hsl(var(--gold));
    cursor: pointer;
}

/* Anteprima e Salva occupano insieme l'ultima riga della griglia degli
   interruttori, agli estremi: l'anteprima a sinistra sotto la colonna delle
   caselle, Salva a destra dove finiscono le azioni dei pannelli. Sono due cose
   diverse — una apre una pagina, l'altra scrive — e la distanza lo dice.
   Erano su due righe perché l'anteprima stava fuori dal form. */
.prof-visibility__actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-block-start: 12px;
}

@media (max-width: 599px) {
    .prof-visibility { grid-template-columns: 1fr; }
}

/* ── Sicurezza dell'account (2FA) ──────────────────────────────────
   /settings/sicurezza. La pagina riusa i pannelli del profilo qui sopra
   (.prof-panel, .prof-panel__head, .prof-panel__title, .prof-panel__lede):
   sotto ci sono solo i pezzi che il profilo non ha. Stessi token e stesse
   regole di avvolgimento della sezione Profilo: hsl() sulle triple
   (--gold, --surface-N), mai sui colori già diretti (--ink..., --border...).

   Nessun bordo colorato sui pannelli arrotondati: l'accento sulle note
   importanti è una barra verticale dritta a sinistra (.sec-note--alert),
   non un contorno oro su angoli tondi. */

/* Colonna singola: la pagina non ha la tessera a sinistra, quindi senza un
   tetto la riga di testo diventa illeggibile sui monitor larghi. */
.sec-col {
    max-inline-size: 720px;
}

/* Configurazione: QR a sinistra, istruzioni e chiave a destra. */
.sec-setup {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    flex-wrap: wrap;
}

/* Cornice bianca attorno al QR. L'SVG di QrCode::svg porta già il proprio
   fondo bianco fino alla zona di quiete: qui serve solo a non far finire il
   bordo chiaro contro la superficie scura del pannello. */
.sec-setup__qr {
    flex: none;
    padding: 12px;
    background: hsl(0 0% 100%);
    border-radius: 12px;
    line-height: 0;
}
.sec-setup__qr svg {
    display: block;
    inline-size: 200px;
    block-size: 200px;
}

.sec-setup__body {
    flex: 1;
    min-inline-size: 250px;
}

.sec-steps {
    margin: 0 0 14px;
    padding-inline-start: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--ink-muted);
}
.sec-steps li + li { margin-block-start: 4px; }

/* Chiave da trascrivere a mano quando la fotocamera non è un'opzione:
   monospaziato e a gruppi di quattro (il raggruppamento lo fa la view). */
.sec-secret {
    display: inline-block;
    margin-block-start: 6px;
    padding: 9px 12px;
    background: hsl(var(--surface-3));
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    letter-spacing: 0.06em;
    color: var(--ink);
    word-break: break-all;
}

/* Form a riga singola: campo elastico + bottone allineato in basso. */
.sec-form {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 14px;
}
.sec-field {
    flex: 1;
    min-inline-size: 200px;
}
.sec-field__label {
    display: block;
    margin-block-end: 5px;
    font-size: 11.5px;
    color: var(--ink-muted);
}

/* Specificità doppia classe, stessa ragione di .prof-panel .prof-field__input:
   style.css ha una regola globale su input[type="..."] (0,1,1) che vincerebbe
   su una classe sola. */
.prof-panel .sec-input {
    width: 100%;
    background: hsl(var(--surface-3));
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}
.prof-panel .sec-input:focus {
    border-color: hsla(var(--gold) / 0.55);
}

/* I dieci codici di recupero, visibili una volta sola. */
.sec-codes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 8px;
    margin-block: 4px 12px;
}
.sec-codes__item {
    padding: 10px 8px;
    background: hsl(var(--surface-3));
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    letter-spacing: 0.09em;
    text-align: center;
    color: var(--ink);
    user-select: all;
}

/* Rigenera i codici / Disattiva: due pannelli dietro il "Modifica" della
   testata di "Verifica in due passaggi". A riposo la sezione è stato da
   leggere, non due campi password aperti. Il contenitore rifà la colonna che
   .prof-col-data dava ai pannelli, che ora sono figli suoi: senza, i due si
   attaccherebbero l'uno all'altro. */
.sec-2fa-actions { display: none; }
.sec-2fa-actions.is-editing {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sec-count {
    font-size: 13.5px;
    color: var(--ink);
}

.sec-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-dim);
}
/* Barra dritta a sinistra, angoli squadrati sul lato dell'accento. */
.sec-note--alert {
    padding-inline-start: 12px;
    border-inline-start: 2px solid hsl(var(--gold));
    color: var(--ink-muted);
}

.sec-back {
    padding-block-start: 4px;
}

@media (max-width: 599px) {
    .sec-setup { justify-content: center; }
    .sec-form .btn { inline-size: 100%; }
}

/* ─────────────────────────────────────────────────────────────
   Elenco delle passkey

   Prima ogni passkey stampava due form impilati sotto l'elenco, ciascuno con
   un campo a tutta larghezza: sullo schermo sembravano un modulo per crearne
   una, non le azioni della riga sopra. Qui il dispositivo è una riga — il nome
   è il campo, e si modifica dove si legge — con Salva ed Elimina accanto.
   ───────────────────────────────────────────────────────────── */
.sec-pk-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sec-pk {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
}

.sec-pk__row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Il form del nome si allarga, quello di Elimina resta della sua misura. */
.sec-pk__rename {
    display: none;
    align-items: center;
    gap: 8px;
    flex: 1 1 240px;
    min-inline-size: 0;
}

.sec-pk__del {
    display: none;
    flex: 0 0 auto;
}

.sec-pk__input {
    flex: 1 1 auto;
    min-inline-size: 0;
}

/* Sola lettura ↔ modifica, stesso meccanismo dei "Dati personali": .is-editing
   la mette sull'<ul> il toggle "Modifica" in fondo a user-settings.php. Senza,
   l'elenco era un modulo sempre aperto — un campo di testo e un Elimina per
   ogni riga, anche quando l'utente le sue passkey voleva solo guardarle. */
.sec-pk__name {
    flex: 1 1 240px;
    min-inline-size: 0;
    font-size: 14px;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.prof-toggle-group.is-editing .sec-pk__name { display: none; }
.prof-toggle-group.is-editing .sec-pk__rename { display: flex; }
.prof-toggle-group.is-editing .sec-pk__del { display: block; }

.sec-pk__meta {
    margin: 6px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-dim);
}

/* Lo spazio che mancava fra l'elenco e "Aggiungi una passkey": senza, il
   pulsante sembrava appartenere all'ultima riga invece che alla sezione. */
.sec-pk-add {
    margin-block-start: 16px;
}

/* Bersaglio dell'ancora #sicurezza: senza offset il titolo della prima
   sezione finisce sotto la barra in cima. */
.sec-anchor {
    scroll-margin-block-start: 90px;
}

/* Visibile agli screen reader, non a schermo. */
.sec-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 599px) {
    .sec-pk__rename { flex-basis: 100%; }
    .sec-pk__del { inline-size: 100%; }
    .sec-pk__del .btn { inline-size: 100%; }
}

/* Tessera bloccata: il socio è decaduto ma il numero resta suo.
   Desaturata e leggermente spenta, non nascosta — deve restare leggibile,
   perché il messaggio è "questa è ancora la tua tessera, torna valida al
   rinnovo", non "questa tessera non esiste più". */
.club-card--blocked .club-card__inner {
    filter: grayscale(0.85) brightness(0.78);
}

/* L'avviso sopra la tessera bloccata. Il chip di stato porta già il colore:
   qui nessun bordo colorato, solo separazione e respiro. */
.prof-card-blocked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-block-end: 16px;
}

.prof-card-blocked__lede {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--wardrobe-ink-muted, rgba(245, 242, 236, 0.62));
}

/* La fascia di verifica che vede solo un admin sopra il QR di un socio.
   Deve rispondere da un metro di distanza, col telefono in mano
   all'ingresso di un evento: chip grande, codice in evidenza, nome sotto. */
.card-verify-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-block-end: 20px;
    padding: 14px 16px;
    background: var(--wardrobe-surface-2, rgba(255, 255, 255, 0.04));
}

.card-verify-strip__code {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    font-size: 15px;
}

.card-verify-strip__name {
    font-size: 13px;
    opacity: 0.7;
}

/* ── Tessera in cima al biglietto pubblico ──────────────────────────────────
   La pagina /t/{token} apre con la tessera vera, inclinabile e girabile, e
   sotto tiene la scheda coi campi che l'iscritto ha acceso. Larghezza minore
   di .biglietto (480px): la tessera ha la sua misura, 408px, la stessa che ha
   ovunque nella piattaforma — un oggetto fisico non cambia taglia a seconda
   della pagina in cui lo si guarda. Il wrapper è 448px per lasciarle esatti
   quei 408 dentro i 20px di padding per lato.

   `inline-size` esplicita e non solo `max-inline-size`: il contenitore di
   pagina (.tt-softnav-region) è un flex, quindi un figlio senza larghezza
   dichiarata si restringe al contenuto, e la tessera dentro non avrebbe uno
   spazio definito a cui commisurarsi. */
.card-public-tessera {
    inline-size: min(448px, 100%);
    box-sizing: border-box;
    margin: 48px auto 0;
    padding-inline: 20px;
}

/* Il biglietto sotto perde il suo margine superiore: i due blocchi sono una
   cosa sola, non due schede impilate. */
.card-public-tessera + .biglietto {
    margin-block-start: 28px;
}

/* Stesso motivo di sopra: .biglietto dichiara `max-inline-size: 480px` ma nel
   flex si restringeva al contenuto, rendendo a ~280px invece che ai 480 che
   il suo stile chiede. Ora la larghezza dichiarata è quella effettiva. */
.biglietto {
    inline-size: min(480px, 100%);
    box-sizing: border-box;
}

/* Sotto i 599px .biglietto ha dei margini laterali (16px per lato, vedi la
   regola più in alto): con una larghezza pari al 100% del contenitore quei
   margini finivano FUORI dal bordo destro, e la scheda si vedeva spostata a
   sinistra e tagliata a destra — è il "decentrata" segnalato sul telefono.
   Il gutter lo toglie la larghezza, il centraggio lo fanno i margini auto:
   così non c'è modo che le due cose si contraddicano di nuovo.
   40px, cioè 20 per lato, sono gli stessi che .card-public-tessera riserva
   alla tessera: sul telefono i due blocchi finiscono esattamente della stessa
   larghezza, incolonnati, invece di sfalsarsi di quattro pixel. */
@media (max-width: 599px) {
    .biglietto {
        inline-size: min(480px, calc(100% - 40px));
        margin-inline: auto;
    }
}

/* ── Pagina del biglietto pubblico ─────────────────────────────────────────
   /t/{token} gira su un layout nudo (resources/views/layouts/card.php):
   niente sidebar, header, dock, footer. Qui si rimedia solo a quello che il
   foglio globale dà per scontato — style.css riserva 80px in fondo al body
   sotto i 767px per lasciare spazio al dock, e su questa pagina il dock non
   c'è. Lo spazio in fondo se lo prende il contenuto, quanto gli serve. */
body.card-page {
    padding-block-end: 0;
}

.card-page__main {
    padding-block-end: 32px;
}

@media (max-width: 520px) {
    .card-public-tessera {
        margin-block-start: 28px;
    }
}