/* JoeSING — pannello delle impostazioni del testo. */

.js-pannello {
    position: fixed;
    inset: 0;
    /* Sopra la ruota dentata (120) perché è la ruota ad aprirlo, e sopra il palco a schermo intero (100). */
    z-index: 130;
    display: flex;
    justify-content: flex-end;
}

.js-pannello__velo {
    position: absolute;
    inset: 0;
    background: rgb(6 4 14 / 55%);
    backdrop-filter: blur(3px);
}

.js-pannello__foglio {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    max-height: 100%;
    background: var(--js-scheda);
    border-left: 1px solid var(--js-bordo-forte);
    box-shadow: var(--js-ombra);
    animation: js-foglio-entra 200ms ease-out;
}

@keyframes js-foglio-entra {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* La ricerca sopra il palco Apple: stesso foglio, più largo, perché le righe dei brani portano tre pulsanti. */
.js-pannello--cerca .js-pannello__foglio { width: min(520px, 100%); }

.js-pannello__testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--js-passo-4);
    border-bottom: 1px solid var(--js-bordo);
}

.js-pannello__titolo {
    margin: 0;
    font-family: var(--js-font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.js-pannello__corpo {
    flex: 1;
    overflow-y: auto;
    padding: var(--js-passo-4);
    /* Spazio in fondo: su telefono la barra del browser copre l'ultimo controllo. */
    padding-bottom: var(--js-passo-8);
}

/* Tre righe, non una. */
.js-anteprima {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--js-passo-2);
    min-height: 150px;
    margin: var(--js-passo-4);
    padding: var(--js-passo-4) var(--js-passo-3);
    border-radius: var(--js-raggio-m);
    background-image: var(--js-gradiente-palco);
    background-color: var(--js-t-sfondo-colore, var(--js-fondo));
    overflow: hidden;
    text-align: var(--js-t-allineamento, center);
}

.js-anteprima::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% 40%, transparent 30%,
            rgb(0 0 0 / calc(var(--js-t-vignettatura, 40) * 1%)) 100%),
        rgb(10 8 20 / calc(var(--js-t-velo, 45) * 1%));
}

.js-anteprima__riga {
    position: relative;
    margin: 0;
    font-family: var(--js-t-font, var(--js-font-display));
    text-transform: var(--js-t-maiuscolo, none);
    line-height: calc(var(--js-t-interlinea, 125) / 100);
    transition: opacity var(--js-transizione);
}

.js-anteprima__prima,
.js-anteprima__dopo {
    font-size: calc(0.8rem * var(--js-t-corpo, 100) / 100);
    font-weight: 600;
    color: var(--js-testo-tenue);
    opacity: calc(var(--js-t-contesto, 55) / 100);
}

.js-anteprima__corrente {
    font-size: calc(1.25rem * var(--js-t-corpo, 100) / 100);
    font-weight: var(--js-t-peso, 700);
    letter-spacing: calc(var(--js-t-spaziatura, 0) / 1000 * 1em);
    color: var(--js-t-colore, var(--js-testo));
    text-shadow: var(--js-t-effetto, none);
}

.js-schede {
    display: flex;
    gap: 2px;
    padding: 0 var(--js-passo-4);
    overflow-x: auto;
    border-bottom: 1px solid var(--js-bordo);
    scrollbar-width: none;
}

.js-schede::-webkit-scrollbar { display: none; }

.js-scheda {
    flex: 0 0 auto;
    padding: var(--js-passo-3) var(--js-passo-4);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--js-testo-tenue);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--js-transizione), border-color var(--js-transizione);
}

.js-scheda:hover { color: var(--js-testo); }

.js-scheda.e-attivo {
    color: var(--js-testo);
    border-bottom-color: var(--js-primario);
}

.js-campo-gruppo { margin-bottom: var(--js-passo-5); }

.js-campo-gruppo .js-etichetta {
    display: flex;
    align-items: center;
    gap: var(--js-passo-2);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--js-testo);
}

.js-campo-gruppo .js-etichetta [data-eco] {
    margin-left: auto;
    color: var(--js-testo-tenue);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.js-pillole {
    display: flex;
    flex-wrap: wrap;
    gap: var(--js-passo-2);
}

.js-pillola {
    padding: var(--js-passo-2) var(--js-passo-4);
    border: 1px solid var(--js-bordo-forte);
    border-radius: var(--js-raggio-pillola);
    background: transparent;
    color: var(--js-testo-tenue);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--js-transizione), color var(--js-transizione), border-color var(--js-transizione);
}

.js-pillola:hover { color: var(--js-testo); border-color: var(--js-testo-tenue); }

.js-pillola.e-attivo {
    background: var(--js-primario);
    border-color: var(--js-primario);
    color: var(--js-su-primario);
}

.js-pillola:focus-visible,
.js-cursore:focus-visible,
.js-scheda:focus-visible {
    outline: 2px solid var(--js-accento);
    outline-offset: 2px;
}

.js-cursore {
    width: 100%;
    margin-top: var(--js-passo-2);
    accent-color: var(--js-primario);
    cursor: pointer;
}

.js-colore {
    width: 100%;
    height: 40px;
    margin-top: var(--js-passo-2);
    padding: 2px;
    border: 1px solid var(--js-bordo-forte);
    border-radius: var(--js-raggio-s);
    background: var(--js-superficie);
    cursor: pointer;
}

.js-interruttore {
    display: flex;
    align-items: center;
    gap: var(--js-passo-3);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.js-interruttore input { accent-color: var(--js-primario); width: 18px; height: 18px; }

/* Le funzioni Pro restano **visibili e cliccabili**: toccarle apre la spiegazione. */
.js-riservato { opacity: 0.55; }
.js-riservato .js-pillola,
.js-riservato .js-cursore,
.js-riservato input { cursor: not-allowed; }

.js-lucchetto {
    font-size: 0.75rem;
    color: var(--js-primario-chiaro);
}

.js-preset {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--js-passo-3) var(--js-passo-4);
    margin-bottom: var(--js-passo-2);
    border: 1px solid var(--js-bordo);
    border-radius: var(--js-raggio-m);
    background: color-mix(in oklab, var(--js-superficie) 60%, transparent);
    color: var(--js-testo);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--js-transizione), background var(--js-transizione);
}

.js-preset:hover { border-color: var(--js-bordo-forte); }

.js-preset.e-attivo {
    border-color: var(--js-primario);
    background: color-mix(in oklab, var(--js-primario) 16%, transparent);
}

.js-preset__nome { font-weight: 700; font-size: 0.95rem; }
.js-preset__nota { color: var(--js-testo-tenue); font-size: 0.8rem; }

.js-tema {
    display: flex;
    align-items: center;
    gap: var(--js-passo-2);
    margin-bottom: var(--js-passo-2);
}

.js-tema__nome {
    flex: 1;
    padding: var(--js-passo-3) var(--js-passo-4);
    border: 1px solid var(--js-bordo);
    border-radius: var(--js-raggio-m);
    background: color-mix(in oklab, var(--js-superficie) 60%, transparent);
    color: var(--js-testo);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.js-tema__nome:hover { border-color: var(--js-primario); }

.js-tema__togli {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: 1px solid var(--js-bordo);
    border-radius: var(--js-raggio-s);
    background: transparent;
    color: var(--js-testo-tenue);
    cursor: pointer;
}

.js-tema__togli:hover {
    color: var(--js-pericolo);
    border-color: color-mix(in oklab, var(--js-pericolo) 60%, transparent);
}

@media (max-width: 700px) {
    .js-pannello { align-items: flex-end; justify-content: center; }

    .js-pannello__foglio {
        width: 100%;
        max-height: 88vh;
        border-left: 0;
        border-top: 1px solid var(--js-bordo-forte);
        border-radius: var(--js-raggio-l) var(--js-raggio-l) 0 0;
        animation: js-foglio-sale 220ms ease-out;
    }

    @keyframes js-foglio-sale {
        from { transform: translateY(28px); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .js-pannello__foglio { animation: none; }
}