/**
 * calligrafia.css — 书法 Calligrafia, quarta scheda di 写汉字
 * (partials/scrivi-calligrafia.php, assets/js/calligrafia.js). Si appoggia a
 * scrivi-caratteri.css (schede, tessere, pulsante d'ascolto) e a tema.css.
 */

.calli {
    background: #fff;
    border: 1px solid var(--c-bordo);
    border-radius: 16px;
    padding: 1rem 1.1rem 1.2rem;
}

/* --- Barra degli strumenti --- */
.calli-barra {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.2rem;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: .6rem;
}
.calli-gruppo { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.calli-gruppo legend {
    float: left;
    width: 100%;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--c-pietra);
    margin: 0 0 .15rem;
}
.calli-gruppo label { position: relative; margin: 0; cursor: pointer; }
.calli-gruppo input[type="radio"] { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.calli-gruppo input[type="radio"] + span {
    display: inline-block;
    padding: .35rem .7rem;
    border: 1px solid var(--c-bordo);
    border-radius: 999px;
    font-size: .85rem;
    background: #fff;
    color: var(--c-inchiostro);
}
.calli-gruppo input[type="radio"] + span b { font-weight: 600; color: #b03a2e; margin-right: .15rem; }
.calli-gruppo input[type="radio"]:checked + span { background: #fdf5f2; border-color: #b03a2e; box-shadow: inset 0 0 0 1px #b03a2e; }
.calli-gruppo input[type="radio"]:focus-visible + span { outline: 2px solid var(--c-giada-scuro); outline-offset: 2px; }
.calli-regolazioni label { display: flex; flex-direction: column; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-pietra); gap: .15rem; }
.calli-regolazioni select { font-size: .9rem; padding: .25rem .4rem; border: 1px solid var(--c-bordo); border-radius: 8px; text-transform: none; letter-spacing: 0; }
.calli-regolazioni input[type="range"] { width: 7.5rem; accent-color: #b03a2e; }

/* --- Penna rilevata o consiglio --- */
.calli-penna {
    margin: 0 auto .8rem;
    max-width: 46rem;
    font-size: .84rem;
    text-align: center;
    color: var(--c-pietra);
    padding: .4rem .8rem;
    border-radius: 10px;
    background: var(--c-nebbia);
}
.calli-penna.attiva { background: #e9f7ef; color: #1f6b44; }
.calli-penna.avviso { background: #fff6e8; color: #6b5214; }

/* --- Foglio e modello --- */
.calli-layout {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    align-items: flex-start;
}
.calli-modello { margin: 3.4rem 0 0; width: 190px; flex: none; text-align: center; }
.calli-modello canvas { width: 100%; aspect-ratio: 1; border-radius: 4px; box-shadow: 0 4px 12px rgba(31, 43, 42, .1); display: block; }
.calli-modello figcaption { font-size: .78rem; color: var(--c-pietra); margin-top: .3rem; }
.calli-centro { flex: 1 1 auto; max-width: 560px; text-align: center; }

.calli-parola { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-bottom: .6rem; }
.calli-parola-caratteri { font-size: 1.9rem; color: var(--c-pietra); }
.calli-parola-caratteri .adesso { color: #b03a2e; }
.calli-parola-info { display: flex; flex-direction: column; text-align: left; }

.calli-foglio {
    position: relative;
    width: min(100%, 560px);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(31, 43, 42, .14);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}
.calli-foglio canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-calli-inchiostro] { cursor: crosshair; touch-action: none; }
[data-calli-sopra], [data-calli-guida], [data-calli-carta] { pointer-events: none; }

.calli-messaggio { min-height: 1.5em; margin: .6rem 0 .4rem; }
.calli-comandi, .calli-salva { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; align-items: center; }
.calli-comandi .lezione-freccia, .calli-salva .lezione-freccia { margin: 0; }
.calli-comandi [aria-pressed="true"] { background: #fdf5f2; border-color: #b03a2e; color: #b03a2e; }
.calli-salva { margin-top: .6rem; }
.calli-salva .lezione-freccia { background: #b03a2e; border-color: #b03a2e; }
.calli-sigillo { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--c-pietra); margin: 0 0 0 .3rem; cursor: pointer; }
.calli-sigillo canvas { width: 40px; height: 40px; }
.calli-nota { font-size: .76rem; color: var(--c-pietra); margin: .5rem 0 0; }

/* --- I caratteri della lezione --- */
.calli-caratteri { display: flex; align-items: center; gap: .4rem; margin-top: 1rem; }
.calli-caratteri ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
}
.calli-caratteri .scrivi-tessera { width: 3rem; font-size: 1.4rem; padding: .3rem 0; }
.calli-caratteri .scrivi-tessera.scritto { background: #fdf5f2; border-color: #e5b2a6; }
.calli-caratteri .scrivi-tessera.adesso { box-shadow: 0 0 0 2px #b03a2e; }
.calli-freccia {
    width: 2.4rem; height: 2.4rem;
    border-radius: 50%;
    border: 1px solid var(--c-bordo);
    background: #fff;
    color: var(--c-inchiostro);
    flex: none;
}
.calli-freccia:hover, .calli-freccia:focus-visible { border-color: #b03a2e; color: #b03a2e; }

@media (max-width: 820px) {
    .calli-layout { flex-direction: column; align-items: center; }
    .calli-modello { margin: 0; width: 130px; }
    .calli-centro { width: 100%; }
}
@media (max-width: 560px) {
    .calli { padding: .8rem .6rem 1rem; }
    .calli-barra { gap: .5rem .8rem; }
    .calli-gruppo input[type="radio"] + span { padding: .3rem .55rem; font-size: .8rem; }
}

/* Ciò che lo script nasconde resta nascosto anche se un'altra regola gli dà un display. */
.calli [hidden] { display: none !important; }