/* =====================================================================
   IL PASS DEL PARTECIPANTE (task-711)
   ---------------------------------------------------------------------
   Mobile-first e basta: una colonna, sempre. Su schermo largo la colonna
   si centra a 420px invece di diventare una griglia — un secondo impianto
   di layout è un secondo posto dove sbagliare, per una pagina che nel 95%
   dei casi si apre su un telefono in fila al banco.

   Tavolozza: i token `--rr-*` e `--pass-*` di design-system/aliases.css,
   cioe' il vocabolario `--admin-*` del club (task-932).
   ===================================================================== */

/* task-932: i tre toni di stato (`--pass-ok`, `--pass-attesa`,
   `--pass-critico`, i `-soft`, `--pass-linea`, `--pass-grigio`, `--pass-fondo`)
   sono alias del livello 2 in design-system/aliases.css
   (`--admin-success`, `--admin-warning`, `--admin-danger`, …), caricato da
   portal/base.html insieme a tokens.css e al blocco del marchio del club. */

.ps-page,
.ps-page *,
.ps-page *::before,
.ps-page *::after {
    /* La pagina e' autonoma: non eredita il reset del sito, e senza questo
       `width:100%` piu' padding fa uscire ogni input dalla sua scheda. */
    box-sizing: border-box;
}

.ps-page {
    margin: 0;
    background: var(--pass-fondo);
    color: var(--rr-ink);
    font-family: var(--rr-text);
    /* 16px pieni sugli input: sotto questa soglia iOS ingrandisce la pagina al
       primo tocco, e la persona si ritrova un modulo storto senza aver sbagliato
       niente. */
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.ps {
    max-width: 420px;
    margin: 0 auto;
    padding: 0 16px calc(32px + env(safe-area-inset-bottom));
}

/* ── il marchio sulle porte d'ingresso (task-936) ───────────────────── */
.ps__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 20px 4px 0;
}
.ps__brand-logo { display: block; max-height: 44px; max-width: 200px; width: auto; height: auto; }
.ps__brand-name {
    font-family: var(--admin-font-heading);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--admin-primary);
}
.ps__brand + .ps__top { padding-top: 16px; }

/* ── l'invito a installare (task-936) ───────────────────────────────── */
.ps__install {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    z-index: 20;
    max-width: 420px;
    margin: 0 auto;
    padding: 12px 14px;
    background: var(--admin-surface);
    border: 1px solid var(--admin-border);
    border-left: 3px solid var(--admin-primary);
    border-radius: 10px;
    box-shadow: var(--admin-shadow-3);
}
.ps-page--nav .ps__install { bottom: calc(76px + env(safe-area-inset-bottom)); }
.ps__install-text { margin: 0 0 10px; font-size: 14px; color: var(--admin-ink); }
.ps__install-actions { display: flex; gap: 8px; }
.ps__btn--small { min-height: 40px; padding: 8px 14px; font-size: 14px; }

/* ── testata ───────────────────────────────────────────────────────── */
.ps__top { padding: 28px 4px 18px; }
.ps__eyebrow {
    margin: 0;
    font-family: var(--rr-display);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--rr-accent);
}
.ps__name {
    margin: 6px 0 0;
    font-family: var(--rr-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--rr-ink);
}

.ps__flash {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--rr-accent-soft);
    border-left: 3px solid var(--rr-accent);
    border-radius: 0 var(--rr-radius-btn) var(--rr-radius-btn) 0;
    font-size: 14px;
}
.ps__flash p { margin: 0; }

/* ── la scheda di un'iscrizione ────────────────────────────────────── */
.ps__card {
    background: var(--rr-paper);
    border: 1px solid var(--pass-linea);
    border-radius: var(--rr-radius-card);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(30, 58, 95, .05), 0 10px 24px rgba(30, 58, 95, .05);
}
.ps__event {
    margin: 0 0 12px;
    font-family: var(--rr-display);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pass-grigio);
}
.ps__welcome { margin: 0 0 14px; font-size: 15px; }
.ps__lead { margin: 0 0 16px; font-size: 15px; color: var(--pass-grigio); }
.ps__empty {
    background: var(--rr-paper);
    border: 1px solid var(--pass-linea);
    border-radius: var(--rr-radius-card);
    padding: 18px 16px;
    font-size: 15px;
    color: var(--pass-grigio);
}
.ps__empty p { margin: 0; }

/* ── i blocchi ─────────────────────────────────────────────────────── */
.ps__block {
    border-top: 1px solid var(--pass-linea);
    padding: 14px 0 4px;
}
.ps__block:first-of-type { border-top: 0; padding-top: 0; }
.ps__block-title {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
}
.ps__block-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--pass-grigio);
}
.ps__block-sub--attesa { color: var(--pass-attesa); }
.ps__block-sub--critico { color: var(--pass-critico); }

/* Lo stato è l'unico blocco che si colora: se tutto è colorato, niente lo è. */
.ps__block--status { padding: 12px; border-radius: var(--rr-radius-btn); border-top: 0; }
.ps__block--ok      { background: var(--pass-ok-soft); }
.ps__block--attesa  { background: var(--pass-attesa-soft); }
.ps__block--critico { background: var(--pass-critico-soft); }
.ps__block--ok .ps__block-title      { color: var(--pass-ok); }
.ps__block--attesa .ps__block-title  { color: var(--pass-attesa); }
.ps__block--critico .ps__block-title { color: var(--pass-critico); }

.ps__status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ps__bib { text-align: right; }
.ps__bib-label {
    display: block;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--pass-grigio);
}
.ps__bib-num {
    font-family: var(--rr-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--rr-ink);
}

/* ── QR ────────────────────────────────────────────────────────────── */
.ps__block--qr { text-align: center; }
.ps__qr {
    display: block;
    width: 220px;
    height: 220px;
    max-width: 100%;
    margin: 12px auto 8px;
    /* Sempre bianco, anche in scuro: un QR su fondo notte non si legge al banco. */
    background: var(--admin-white);
    border-radius: var(--rr-radius-btn);
}
.ps__code {
    margin: 0 0 12px;
    font-family: var(--rr-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
.ps__actions { display: grid; gap: 10px; justify-items: center; }
/* task-921 — i gesti del blocco «Modifiche»: uno sotto l'altro, a tutta larghezza. */
.ps__actions--stack { justify-items: stretch; margin-top: 10px; }

/* ── controlli ─────────────────────────────────────────────────────── */
.ps__form { display: grid; gap: 8px; }
.ps__label { font-size: 13px; font-weight: 600; }
.ps__input {
    width: 100%;
    /* 44px pieni: è il minimo che un pollice colpisce senza guardare. */
    min-height: 48px;
    padding: 10px 12px;
    font-size: 16px;
    font-family: inherit;
    color: var(--rr-ink);
    background: var(--rr-paper);
    border: 1px solid var(--pass-linea);
    border-radius: var(--rr-radius-btn);
}
.ps__input:focus-visible { outline: 2px solid var(--rr-accent); outline-offset: 1px; }
.ps__input--code {
    font-family: var(--rr-display);
    font-size: 26px;
    letter-spacing: .3em;
    text-align: center;
}
.ps__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    color: var(--admin-primary-ink);
    background: var(--rr-accent);
    border: 1px solid var(--rr-accent);
    border-radius: var(--rr-radius-btn);
    text-decoration: none;
    cursor: pointer;
}
.ps__btn:hover { background: var(--rr-accent-deep); border-color: var(--rr-accent-deep); }
.ps__btn--ghost {
    color: var(--rr-accent-deep);
    background: var(--rr-accent-soft);
}
.ps__btn--ghost:hover { background: var(--rr-accent-soft); }
.ps__link { color: var(--rr-accent-deep); font-size: 14px; }
/* task-878 — misurato a 390 px: i link del Pass erano righe alte 17–22 px.
   Le AZIONI (biglietto, cambio distanza, link da condividere, carica il
   certificato) diventano bottoni a tutta larghezza; i link che restano link
   («Tutte le iscrizioni», «Programma e informazioni») prendono un'area di
   tocco da 44 px senza cambiare aspetto. */
.ps__btn--wide { display: flex; width: 100%; box-sizing: border-box; }
.ps__link--tap {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
}
/* La riga del ritiro pettorale, sotto lo stato: dove e quando, e basta. */
.ps__pickup {
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--rr-ink);
}
.ps__link-btn {
    background: none;
    border: 0;
    padding: 12px;
    font: inherit;
    font-size: 14px;
    color: var(--pass-grigio);
    text-decoration: underline;
    cursor: pointer;
}
.ps__hint { margin: 12px 0 0; font-size: 13px; color: var(--pass-grigio); }
.ps__out { text-align: center; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* ── blocchi facoltativi (task-715) ───────────────────────────────── */
.ps__code--inline {
    font-size: 18px;
    margin: 8px 0 4px;
    cursor: pointer;
}

.ps__list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 6px;
    font-size: 14px;
}

.ps__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ps__tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--rr-radius-chip);
    white-space: nowrap;
}

.ps__tag--ok { background: var(--pass-ok-soft); color: var(--pass-ok); }
.ps__tag--attesa { background: var(--pass-attesa-soft); color: var(--pass-attesa); }

/* ── password facoltativa (task-716) ──────────────────────────────── */
.ps__card--quiet {
    background: transparent;
    border-style: dashed;
    box-shadow: none;
}

.ps__optional {
    font-weight: 400;
    color: var(--pass-grigio);
}

/* ── il risultato (EPIC-015) ──────────────────────────────────────── */
.ps__time {
    margin: 8px 0 2px;
    font-family: var(--rr-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--rr-accent-deep);
}

/* ── le foto (task-719) ───────────────────────────────────────────── */
.ps__photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 10px 0;
}

.ps__photo {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--rr-radius-btn);
    background: var(--pass-fondo);
}

.ps__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── i blocchi di contenuto (task-778) ─────────────────────────────── */
.ps__rich { font-size: 15px; color: var(--rr-ink); }
.ps__rich p { margin: 0 0 8px; }
.ps__rich p:last-child { margin-bottom: 0; }
.ps__rich ul, .ps__rich ol { margin: 0 0 8px; padding-left: 20px; }
.ps__rich h3, .ps__rich h4 { margin: 10px 0 4px; font-size: 15px; font-weight: 600; }
.ps__rich a { color: var(--rr-accent-deep); }

.ps__faq { border-top: 1px solid var(--pass-linea); }
.ps__faq:first-of-type { border-top: 0; }
.ps__faq-q {
    /* 44px: si preme col pollice in fila al banco */
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.ps__faq-q::-webkit-details-marker { display: none; }
.ps__faq-q::after { content: '+'; margin-left: auto; color: var(--rr-accent-deep); font-size: 18px; }
.ps__faq[open] .ps__faq-q::after { content: '\2212'; }
.ps__faq-a { padding: 0 0 10px; color: var(--pass-grigio); }

.ps__countdown-n {
    margin: 4px 0 2px;
    font-family: var(--rr-display);
    font-size: 30px;
    line-height: 1.1;
    color: var(--rr-accent-deep);
}
.ps__countdown-n strong { font-size: 40px; font-variant-numeric: tabular-nums; }

/* task-840 — la password dietro una voce che si apre: la pagina d'ingresso
   e' «email → codice», e la password e' un'eccezione per chi l'ha voluta.
   task-981 — con la password aperta, il bottone codice sparisce: due CTA
   primarie sullo stesso schermo sembravano «manda il codice» anche a chi
   voleva solo digitare la password. */
.ps__details { margin-top: 14px; }
.ps__details > summary { cursor: pointer; list-style: none; text-decoration: underline; }
.ps__details > summary::-webkit-details-marker { display: none; }
.ps__details[open] > summary { margin-bottom: 8px; }
.ps__details .ps__btn { margin-top: 8px; }
.ps__door:has(.ps__details[open]) .ps__door-code { display: none; }
.ps__hint--reset { margin-top: 12px; }

/* task-958 — «Trovami col mio selfie»: un riquadro suo sotto le foto, con
   lo stato nel chip. Livello 2 (`--admin-*`), come chiede la guardia per il
   CSS nuovo; il resto del foglio parla ancora gli alias `--rr-*`/`--pass-*`. */
.ps__face {
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--admin-primary-soft);
    border-left: 3px solid var(--admin-primary);
    border-radius: 0 var(--admin-radius-md) var(--admin-radius-md) 0;
}
.ps__face-head { display: flex; align-items: flex-start; gap: 10px; }
/* task-1034: era un'emoji dimensionata con `font-size`. Un SVG senza
   misure prende la larghezza del contenitore: 20px, e fine. */
.ps__face-icon { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor;
                 color: var(--admin-primary); }
.ps__face-title { margin: 0 8px 0 0; font-weight: 700; font-size: 15px; display: inline; }
.ps__face-text { margin: 8px 0 10px; font-size: 14px; color: var(--admin-ink-muted); }
.ps__face .ps__form { gap: 10px; }
.ps__face-consent { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.ps__face-consent input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--admin-primary); }
.ps__face-consent small { display: block; color: var(--admin-ink-muted); font-size: 12px; line-height: 1.45; margin-top: 4px; }

/* ── tema scuro (task-936) ──────────────────────────────────────────────
   Le stesse assegnazioni di tokens-dark.css della dashboard, per i soli nomi
   che il Pass legge (livello 2 → primitivi): niente esadecimali, il marchio
   e' quello del club alzato di luminosita' (`--admin-brand-primary-lift`).
   Due porte: la scelta esplicita (`data-bs-theme`, scritta da tema.js) vince;
   senza scelta segue il telefono. */
[data-bs-theme="dark"] {
    --admin-canvas: var(--admin-night-800);
    --admin-surface: var(--admin-night-600);
    --admin-surface-raised: var(--admin-night-500);
    --admin-surface-sunken: var(--admin-night-700);
    --admin-border: var(--admin-night-300);
    --admin-border-strong: var(--admin-night-100);
    --admin-ink: var(--admin-gray-200);
    --admin-ink-2: var(--admin-gray-400);
    --admin-ink-muted: var(--admin-gray-500);
    --admin-primary: var(--admin-brand-primary-lift);
    --admin-primary-ink: var(--admin-night-800);
    --admin-brand-primary-deep: var(--admin-brand-primary-lift);
    --admin-accent: var(--admin-brand-accent-lift);
    --admin-success: var(--admin-green-400);
    --admin-success-bg: rgba(5, 150, 105, 0.12);
    --admin-warning: var(--admin-amber-400);
    --admin-warning-bg: rgba(217, 119, 6, 0.12);
    --admin-danger: var(--admin-red-400);
    --admin-danger-bg: rgba(220, 38, 38, 0.12);
    --admin-shadow-3: 0 2px 6px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.2);
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-bs-theme="light"]) {
        --admin-canvas: var(--admin-night-800);
        --admin-surface: var(--admin-night-600);
        --admin-surface-raised: var(--admin-night-500);
        --admin-surface-sunken: var(--admin-night-700);
        --admin-border: var(--admin-night-300);
        --admin-border-strong: var(--admin-night-100);
        --admin-ink: var(--admin-gray-200);
        --admin-ink-2: var(--admin-gray-400);
        --admin-ink-muted: var(--admin-gray-500);
        --admin-primary: var(--admin-brand-primary-lift);
        --admin-primary-ink: var(--admin-night-800);
        --admin-brand-primary-deep: var(--admin-brand-primary-lift);
        --admin-accent: var(--admin-brand-accent-lift);
        --admin-success: var(--admin-green-400);
        --admin-success-bg: rgba(5, 150, 105, 0.12);
        --admin-warning: var(--admin-amber-400);
        --admin-warning-bg: rgba(217, 119, 6, 0.12);
        --admin-danger: var(--admin-red-400);
        --admin-danger-bg: rgba(220, 38, 38, 0.12);
        --admin-shadow-3: 0 2px 6px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.2);
        color-scheme: dark;
    }
}

/* task-965 — «Non voglio comparire»: un link, non un bottone: è un diritto,
   non un'azione da spingere. */
.ps__optout { margin: 10px 0 0; }
.ps__optout summary { cursor: pointer; list-style: none; color: var(--admin-ink-muted); }
.ps__optout summary::-webkit-details-marker { display: none; }
.ps__optout[open] summary { color: var(--admin-ink); }
.ps__optout .ps__hint { margin: 8px 0 10px; }

/* ── task-1034: la galleria che si guarda volentieri ─────────────────────
   Livello 2 (`--admin-*`): il CSS nuovo del Pass parla solo questo, come
   chiede `check_css_tokens`. Ogni transizione sta sotto i 200 ms e sparisce
   con `prefers-reduced-motion` in fondo al blocco. */
.ps__photos { grid-template-columns: repeat(3, 1fr); gap: 8px; }

.ps__photo {
    position: relative;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.ps__photo:hover,
.ps__photo:focus-visible { transform: scale(1.02); box-shadow: var(--admin-shadow-3); }
.ps__photo:focus-visible { outline: 2px solid var(--admin-primary); outline-offset: 2px; }

/* Lo scheletro: c'e' finche' l'immagine non e' arrivata, e se ne va in
   dissolvenza. Senza, la griglia e' una scacchiera di buchi che saltano. */
.ps__photo.is-loading { background: var(--admin-surface-sunken); }
.ps__photo.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        transparent 20%, var(--admin-surface-raised) 50%, transparent 80%);
    background-size: 220% 100%;
    animation: ps-scheletro 1100ms linear infinite;
}
.ps__photo.is-loading img { opacity: 0; }
.ps__photo img { transition: opacity 180ms ease; }

@keyframes ps-scheletro {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

/* Da dove arriva la foto. «Dal tuo selfie» e' l'unica che la persona ha
   chiesto e puo' ritirare: si distingue, non si nasconde. */
.ps__photo-origine {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-surface);
    color: var(--admin-ink-2);
    opacity: .94;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ps__photo-origine--selfie { background: var(--admin-primary); color: var(--admin-primary-ink); }

/* Lo stato vuoto: una frase che dice cosa succedera', non un vicolo cieco. */
.ps__empty-block {
    margin: 10px 0 0;
    padding: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--admin-ink-muted);
    background: var(--admin-surface-sunken);
    border-radius: var(--admin-radius-md);
}
.ps__empty-title { display: block; font-weight: 700; color: var(--admin-ink); margin-bottom: 2px; }

.ps-area__files[hidden] { display: none; }

/* La barra «sta girando»: non misura niente e non finge di farlo. */
.ps__face-barra {
    height: 3px;
    margin: 0 0 12px;
    overflow: hidden;
    border-radius: var(--admin-radius-sm);
    background: var(--admin-surface-sunken);
}
.ps__face-barra span {
    display: block;
    width: 40%;
    height: 100%;
    background: var(--admin-primary);
    animation: ps-avanza 1400ms ease-in-out infinite;
}
@keyframes ps-avanza {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}
.ps__face-text--attesa { color: var(--admin-warning); }

/* Il selfie scelto nel Pass: anteprima prima di inviare. */
.ps__selfie { margin-bottom: 12px; }
.ps__selfie-anteprima { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
/* `[hidden]` dell'UA ha la stessa specificita' di una classe e perde perche'
   arriva prima: senza queste righe cio' che il copione «nasconde» resta li'. */
.ps__selfie-anteprima[hidden] { display: none; }
.ps__selfie-img {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: var(--admin-radius-md);
    border: 1px solid var(--admin-border);
    background: var(--admin-surface-sunken);
}
.ps__selfie-nome {
    margin: 0 0 2px;
    font-size: 13px;
    color: var(--admin-ink-muted);
    overflow-wrap: anywhere;
}
.ps__btn[disabled] { opacity: .5; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    .ps__photo,
    .ps__photo img { transition: none; }
    .ps__photo:hover, .ps__photo:focus-visible { transform: none; }
    .ps__photo.is-loading::after,
    .ps__face-barra span { animation: none; }
}