/**
 * IL MENU — il segno in alto a destra e il pannello che apre
 * =============================================================================
 *
 * ── PERCHE' UN FOGLIO SUO ────────────────────────────────────────────────────
 * Queste regole stavano in `home.css`, insieme al resto dell'insegna. Andava
 * bene finche' il menu viveva solo sulle due macchine; la dashboard carica
 * `form` e `dashboard`, e `home.css` li' non arriva.
 *
 * Le alternative erano copiarlo nel foglio della dashboard — e due copie
 * divergono alla prima modifica, che e' lo stesso motivo per cui il menu e' un
 * frammento solo e non uno per pagina — oppure dargli un foglio suo. Questo.
 *
 * Lo carica chi monta `views/partials/accesso.php`, e nessun altro: vedi la
 * mappa in cima a `views/layout.php`.
 */

/* ══ L'ACCESSO ═════════════════════════════════════════════════════════════
   Accedi, registrati, le tue letture. In alto a destra, dove chiunque abbia
   usato un sito li cerca: non è un gusto, è la convenzione, e una convenzione
   rispettata costa zero attenzione a chi guarda.

   Prima era una riga sotto il pulsante d'acquisto — si leggeva solo se si
   stava già leggendo — e sulla macchina 2 non c'era affatto.

   ── PERCHE' `absolute` E NON `fixed` ──────────────────────────────────────
   Era fisso, per restare raggiungibile anche scorrendo. Ma una macchina si
   guarda, e due parole incollate all'angolo mentre si scorre una pagina
   stanno sempre DAVANTI a qualcosa: su telefono, dove lo schermo è tutto
   quello che c'è, coprono la parte alta del mobile per tutta la lettura.

   Assoluto, sta in cima e se ne va scorrendo. Chi lo cerca torna su, che è il
   gesto che si fa comunque quando si cerca il proprio account. */
.accesso {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.9rem);
    right: calc(env(safe-area-inset-right, 0px) + 1rem);
    z-index: var(--layer-header, 40);

    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--type-family-utility);
    font-size: 0.82rem;
}

/* ── COSA C'ERA QUI, E PERCHE' NON C'E' PIU' ───────────────────────────────
   Due collegamenti sempre a schermo, e il piu' marcato dei due — con il
   contorno — diceva «Registrati». Era l'elemento piu' evidente della pagina, e
   a chi arrivava diceva che per usare il sito serve un account.

   Non e' vero: si paga da ospiti e la mail la chiede PayPal. Ma quella
   precisazione sta sotto il pulsante, in grigio e sotto la piega, mentre il
   bottone col bordo stava in cima. Fra le due vinceva quella vista per prima.

   Restano il segno del menu e, per chi ne ha, il saldo. */

/* ── IL SEGNO DEL MENU ─────────────────────────────────────────────────────
   Tre righe, non il carattere «≡»: quello e' un simbolo matematico e i
   lettori di schermo lo annunciano come tale. Quarantaquattro pixel di lato,
   che e' la misura sotto la quale un pollice sbaglia il bersaglio. */
.menu-segno {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-deep) 55%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: border-color 160ms ease;
}

.menu-segno__riga {
    display: block;
    width: 17px;
    height: 1.5px;
    border-radius: 1px;
    background: var(--text-dim);
    transition: background 160ms ease;
}

.menu-segno:hover,
.menu-segno:focus-visible { border-color: var(--accent-dim) }

.menu-segno:hover .menu-segno__riga,
.menu-segno:focus-visible .menu-segno__riga { background: var(--accent) }

/* ── IL PANNELLO ───────────────────────────────────────────────────────────
   Il `<dialog>` porta con se' il top layer, Esc e la trappola del fuoco. Qui
   restano l'aspetto e la crocetta: una cosa che riempie lo schermo e non si
   capisce come chiudere manda al tasto «indietro», cioe' fuori dalla pagina. */
.menu {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.menu::backdrop { background: rgba(4, 6, 16, 0.92) }

/* Il foglio scende dall'alto a destra, da dove si e' premuto: un pannello che
   compare al centro non si collega al gesto che lo ha aperto. */
.menu__foglio {
    position: absolute;
    top: 0;
    right: 0;
    width: min(20rem, 100vw);
    height: 100%;
    padding: calc(env(safe-area-inset-top, 0px) + 4.5rem) var(--space-6) var(--space-6);
    background: var(--bg-deep);
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.6);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.menu__chiudi {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 0.9rem);
    right: 1rem;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-dim);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.menu__chiudi:hover,
.menu__chiudi:focus-visible { color: var(--accent); border-color: var(--accent-dim) }

.menu__voci {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.menu__voci a {
    display: block;

    /* Righe alte: in un menu si preme al buio, di corsa, con un dito. Una
       riga di testo alta come il testo e' un bersaglio da mancare. */
    padding: 0.85rem 0;
    color: var(--text);
    text-decoration: none;
    font-family: var(--type-family-display);
    font-size: 1.15rem;
    transition: color 160ms ease;
}

.menu__voci a:hover,
.menu__voci a:focus-visible { color: var(--accent) }

/* Il proprio conto e' un gruppo a parte: sopra si sceglie dove andare, sotto
   si fa qualcosa con il proprio account. Una riga li separa senza titoli. */
.menu__voci--conto {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.menu__voci--conto a { font-size: 1rem }

/* «Registrati» e «Scollega» sono la seconda scelta del loro gruppo: chi entra
   sa gia' cosa cerca, e chi esce lo fa di rado. */
.menu__minore { color: var(--text-dim) !important; font-size: 0.9rem !important }

/* Il saldo in alto non c'e' piu': entrambe le pagine che montano questo pezzo
   hanno gia' il contatore di monete SULLA MACCHINA (`.coin-counter`), dove si
   guarda mentre si decide se infilarne una. Averlo anche qui voleva dire lo
   stesso numero in due posti, e i due si sovrapponevano pure. */

/* ── SU TELEFONO RESTA IN ALTO ─────────────────────────────────────────────
   Prima scendeva al centro della pagina, perche' due parole in un angolo di
   trecento pixel si sovrapponevano all'insegna. Un segno da quarantaquattro
   pixel non si sovrappone a niente, e in alto a destra e' dove si cerca.
   Si toglie la vecchia regola che lo spostava. */

/* ── E sparisce quando parte il film ───────────────────────────────────────
   Due parole in un angolo, sopra una cinematica a schermo intero, sono due
   parole di troppo. Si spegne con tutto il resto. */
body[data-machine] .accesso {
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

/* E se il pannello fosse aperto nell'istante in cui il film parte, resterebbe
   comunque a schermo: vive nel top layer, e l'opacita' di `.accesso` non lo
   raggiunge. Non dovrebbe succedere — il film parte da un tocco sulla
   macchina, che col menu aperto e' coperta — ma «non dovrebbe» non e' «non
   puo'». */
body[data-machine] .menu { display: none }