/* =========================================================================
 * inoltre-theme — LE RIFINITURE (1.0.0)
 * =========================================================================
 *
 * Quattro segni piccoli, richiesti il 18/10/2026 per la versione finale:
 *
 *   1. i due filetti laterali che incorniciano la colonna del giornale;
 *   2. l'indicatore di lettura degli articoli, con la percentuale;
 *   3. la barra di scorrimento del browser nel rosso della testata;
 *   4. il colore della selezione del testo.
 *
 * Sono segni di carta, non effetti: si devono notare solo se li si cerca.
 * Tutti i valori vengono dai token di tokens.css.
 */

/* ---------------------------------------------- 1. i filetti laterali */

/* LA CORNICE DELLA PAGINA.
 *
 * Due filetti verticali di un pixel, dall'alto al piede, a meta' del margine
 * che separa la colonna del giornale dal bordo della finestra: la colonna e'
 * la stessa di testata, barra e articoli (--in-larghezza-piena). La testata,
 * che ha il fondo pieno e sta sopra, li copre in cima; il piede scuro li
 * chiude in fondo. Il risultato e' una pagina incorniciata fra testata e
 * piede, come un foglio di giornale.
 *
 * Solo sugli schermi larghi: sotto i 75rem il margine e' troppo stretto e i
 * filetti finirebbero addosso al bordo della finestra. */
@media (min-width: 75rem) {
    body {
        position: relative;
    }

    body::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline: calc(max(var(--in-margine-laterale), calc((100% - var(--in-larghezza-piena)) / 2)) - var(--in-margine-laterale) / 2);
        border-inline: 1px solid var(--in-bordo);
        pointer-events: none;
    }

    /* Il piede passa sopra i filetti: la cornice finisce dove comincia lui. */
    .in-piede {
        position: relative;
        z-index: 1;
    }
}

/* ------------------------------------------- 2. l'indicatore di lettura */

/* SOLO NEGLI ARTICOLI. La marcatura la crea assets/js/lettura.js dentro la
 * testata, che e' sticky: la linea resta appoggiata al suo bordo inferiore
 * mentre si scorre. E' larga quanto la colonna, come il doppio filetto della
 * barra, e cresce da sinistra.
 *
 * LA CIFRA accompagna la punta della linea, appena sotto, allineata a destra
 * sulla punta: piccola, in cifre tabulari (non ballano mentre cambiano), nel
 * rosso della testata su un ritaglio di carta bianca.
 *
 * Compare quando comincia il testo, e dopo il 100% svanisce. */
.in-lettura {
    --in-lettura: 0;

    position: absolute;
    left: max(var(--in-margine-laterale), calc((100% - var(--in-larghezza-piena)) / 2));
    right: max(var(--in-margine-laterale), calc((100% - var(--in-larghezza-piena)) / 2));
    bottom: -1px;
    height: 2px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.in-lettura.is-attiva { opacity: 1; }

.in-lettura-linea {
    position: absolute;
    inset: 0;
    background: var(--in-marchio);
    transform: scaleX(var(--in-lettura));
    transform-origin: left center;
}

.in-lettura-cifra {
    position: absolute;
    top: 100%;
    /* La cifra non esce mai dalla colonna: a sinistra la ferma la sua stessa
     * larghezza, a destra la punta. */
    left: max(2.75rem, calc(var(--in-lettura) * 100%));
    translate: -100% 0;
    margin-top: 0.3125rem;
    padding: 0.125rem 0.375rem 0.1875rem;
    background: var(--in-fondo);
    box-shadow: 0 1px 0 var(--in-bordo);
    color: var(--in-marchio);
    font-family: var(--in-interfaccia);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Il simbolo della percentuale un filo piu' piccolo e piu' tenue: si legge il
 * numero, non il segno. */
.in-lettura-cifra small {
    margin-left: 0.08em;
    font-size: 0.8em;
    font-weight: 500;
    opacity: 0.7;
}

/* Sul telefono la cifra si nasconde: resta la linea, che basta. */
@media (max-width: 40rem) {
    .in-lettura-cifra { display: none; }
}

@media print {
    .in-lettura { display: none; }
}

/* ------------------------------ 3. la barra di scorrimento del browser */

/* Sottile, il cursore nel rosso della testata, il binario invisibile. Il
 * modo standard (scrollbar-color) vale per Chrome, Edge, Firefox e Safari
 * recenti; le regole -webkit- servono ai Safari piu' vecchi, e i browser che
 * conoscono il modo standard le ignorano. */
html {
    scrollbar-color: var(--in-marchio) transparent;
    scrollbar-width: thin;
}

html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--in-marchio); border: 2px solid var(--in-fondo); }
html::-webkit-scrollbar-thumb:hover { background: var(--in-marchio-vivo); }

/* ----------------------------------------------- 4. la selezione */

/* Chi seleziona una frase per citarla la vede in una velatura del rosso
 * della testata, non nell'azzurro del sistema. Nel piede scuro, l'accento
 * caldo del piede. */
::selection {
    background: color-mix(in srgb, var(--in-marchio) 16%, var(--in-fondo));
    color: var(--in-testo);
}

.in-piede ::selection {
    background: var(--in-piede-accento);
    color: var(--in-fondo-forte);
}