/* ==========================================================================
   YOTEKA - FOGLIO DI STILE DEL SITO ONLINE
   --------------------------------------------------------------------------
   QUESTO e' il file. Si modifica qui, a mano, e basta: non viene piu' generato
   da niente e nessun comando lo riscrive.

   DA DOVE VIENE
   Nasce da wip/style.css, il foglio di stile di tutto il sito, tenendo solo le
   regole che le pagine pubblicate usano davvero (erano 16.000 righe, qui sono
   circa 5.700: fuori sono rimasti hub, ripassi, mining e cinese). In fondo, da
   "STILI DELLA VERSIONE ONLINE" in giu', ci sono le regole che valgono solo per
   il sito pubblicato: stando per ultime vincono su tutto quello che sta sopra.

   QUANDO PUBBLICHERAI UNA PARTE NUOVA
   Il suo stile sta in wip/style.css e qui dentro non c'e': va portato a mano.
   Si cerca la classe la' dentro e si incollano le sue regole qui, possibilmente
   nella sezione che c'entra.

   ATTENZIONE ALLE MODIFICHE CONDIVISE
   Se cambi una cosa che esiste anche nel laboratorio (un colore del tema, la
   barra in alto, un font), il laboratorio non lo sa: va cambiata anche in
   wip/style.css, altrimenti i due si allontanano e non si capisce piu' quale
   dei due sia quello buono.
   ========================================================================== */

/* I FONT NON SI CHIAMANO PIU' DA QUI.
   Qui c'era un @import che li chiedeva a Google. Era la strada piu' lenta
   possibile: il browser deve prima scaricare tutto questo foglio di stile,
   e solo alla fine scopre che gli servono anche i font, quindi li chiede in
   un secondo momento invece che subito. E siccome ogni pagina ne chiedeva
   gia' un pezzo per conto suo, Nunito e Outfit arrivavano due volte.
   Adesso la richiesta e' UNA SOLA e sta nel <head> di ogni pagina, dove il
   browser la vede appena apre il file. Se aggiungi un font qui dentro,
   ricordati di aggiungerlo la' (e nel modello in strumenti/genera-lezioni.py,
   altrimenti le lezioni rigenerate non ce l'hanno).
   Tolto anche Noto Sans SC: e' il font per il cinese, che online non c'e'. */



:root { --font-cjk: "Noto Sans JP", "Yu Gothic", "Hiragino Sans", "MS Gothic", "Meiryo", "SimSun-ExtB", "HanaMinA", "HanaMinB", sans-serif; }

[data-lang="cn"] { --font-cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "SimSun", "SimSun-ExtB", "HanaMinA", "HanaMinB", sans-serif; }

[data-lang="cn"] { --font-pinyin: "Segoe UI", "Noto Sans", system-ui, Arial, sans-serif; }

/* Pinyin (cinese) con font latino: i font CJK disallineano il macron del 1° tono (ā).
   Coprire TUTTE le classi che mostrano una lettura pinyin (non i caratteri hanzi). */

/* ==========================================================================
   ANIMAZIONI
   ========================================================================== */

/* ==========================================================================
   VARIABILI E TEMI
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────
   TEMA — un'unica fonte di verità
   • Per LINGUA cambiano SOLO --primary e --secondary
   • Per MODALITÀ (dark / light) i neutri sono fissi e identici per le due lingue
   • Tutto il resto è derivato da queste variabili
   ────────────────────────────────────────────────────────────────────── */

/* >>> Colori di brand: gli UNICI che cambiano tra le due lingue <<< */

.theme-jp {
    --primary:       #8971D1;        /* viola glicine */
    --primary-rgb:   137, 113, 209;
    --secondary:     #8971D1;        /* stesso viola del primario */
    --secondary-rgb: 137, 113, 209;
}

.theme-cn {
    --primary:       #E11D48;        /* rosso ciliegia */
    --primary-rgb:   225, 29, 72;
    --secondary:     #F43F5E;        /* corallo */
    --secondary-rgb: 244, 63, 94;
}

/* >>> Neutri FISSI — DARK MODE (default) <<< */

:root {
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --side-margin: 90px;

    --bg-page:      #0F1013;
    --bg-card:      #141519;
    --bg-nav:       rgba(15, 16, 19, 0.8);
    --navbar-bg:    #202023;         /* navbar classica: sempre scura */
    --border-color: rgba(255, 255, 255, 0.05);
    --border-nav:   rgba(255, 255, 255, 0.03);
    --text-main:    #FFFFFF;
    --text-muted:   rgba(255, 255, 255, 0.9);
    --card-shadow:  0 20px 40px rgba(0, 0, 0, 0.25);

    /* Accento testuale: in dark è il secondario (più chiaro, leggibile sul nero) */
    --accent-text:  var(--secondary);

    /* Tocchi di colore derivati dal brand (stessa struttura per le due lingue) */
    --bg-secondary:    rgba(255, 255, 255, 0.06);
    --tag-bg:          transparent;
    --btn-sub-hover:   rgba(var(--primary-rgb), 0.04);
    --glow-color-1:    rgba(127, 99, 212, 0.242);
    --glow-color-2:    rgba(var(--secondary-rgb), 0.08);
    --glow-color-sec:  rgba(var(--primary-rgb), 0.08);

    /* Ranghi SRS — li legge js/study.js (getRank) e finiscono sulle MEDAGLIE
       (badge in alto nella sessione, icona sulle card di grammatica e
       vocabolario, sigla del rango negli elenchi caratteri).
       Restano i metalli: qui la tinta è il messaggio, ed è la sola famiglia
       di colore fuori dal brand insieme a ok/ko/warn.
       NON entrano nei grafici: le barre per livello e la ciambella usano
       tonalità di --primary e --tipo-*, e devono restare così.
       Questi valori sono per il fondo SCURO. */
    --rank-nuovo:    #5B8DD9;
    --rank-bronzo:   #CD7F32;
    --rank-argento:  #C0C0C0;
    --rank-oro:      #FFD700;
    --rank-platino:  #E5E4E2;
    --rank-diamante: #B9F2FF;

    /* Colori di SIGNIFICATO: gli unici estranei al brand ammessi, perché
       giusto/sbagliato/attenzione non si possono dire con la tinta del brand.
       Prima erano quattro verdi e quattro rossi diversi sparsi nel file. */
    --ok:    #2ECC71;
    --ko:    #E74C3C;
    --warn:  #F1C40F;
    --curio: #E67E22;
}

/* >>> Neutri FISSI — LIGHT MODE <<< */

[data-theme="light"] {
    /* Nessuna superficie è bianco puro: la pagina è un grigio freddo appena
       accennato e le card stanno un gradino SOTTO, non sopra. Serve sia a non
       abbagliare sia a far risaltare le card, che qui si staccano perché più
       scure dello sfondo (nel tema scuro vale l'opposto, come è giusto). */
    --bg-page:      #F5F6F9;
    --bg-card:      #EEEFF3;
    --bg-nav:       rgba(245, 246, 249, 0.8);
    --navbar-bg:    #29292D;         /* navbar classica: resta scura anche in light */
    --border-color: rgba(0, 0, 0, 0.08);
    --border-nav:   rgba(0, 0, 0, 0.03);
    --text-main:    #1C1C1C;
    --text-muted:   rgba(22, 22, 22, 0.9);
    --card-shadow:  0 8px 24px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);

    /* Accento testuale: in light è il primario (più scuro, leggibile sul bianco) */
    --accent-text:  var(--primary);

    --tag-bg:         rgba(var(--primary-rgb), 0.06);
    --glow-color-1:   rgba(var(--primary-rgb), 0.07);
    --glow-color-2:   rgba(233, 236, 241, 0);
    --glow-color-sec: rgba(var(--primary-rgb), 0.035);
    --bg-secondary:   rgba(15, 23, 42, 0.06);

    /* Ranghi SRS in chiaro: gli stessi metalli, scuriti. I valori del tema
       scuro qui darebbero da 1,2:1 (Diamante, Platino) a 1,7:1 di contrasto,
       cioè medaglie invisibili proprio ai ranghi alti. Questi stanno tutti
       sopra 4:1 sia sulle card sia sullo sfondo pagina, mantenendo la stessa
       distanza percettiva reciproca della serie chiara (dE minimo 13). */
    --rank-nuovo:    #35659E;
    --rank-bronzo:   #96591F;
    --rank-argento:  #6B7280;
    --rank-oro:      #8F6A0A;
    --rank-platino:  #46566B;
    --rank-diamante: #0E7C8A;

    /* Colori di significato, versione per fondo chiaro: verde e rosso del tema
       scuro qui sarebbero troppo squillanti e poco contrastati. Il giallo fa
       eccezione e resta identico allo scuro, come da nuovo design: su fondo
       chiaro contrasta poco, ma tinge solo il bordo e la lampadina delle note
       "Attenzione", mai del testo. */
    --ok:    #1E9E56;
    --ko:    #C0392B;
    --warn:  #F1C40F;
    --curio: #E67E22;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Transizione dei colori SOLO durante il cambio tema (classe temporanea su <body>).
   Prima era su `*` e animava OGNI cambio di colore/sfondo/bordo a 0.5s,
   rallentando ogni interazione (es. avanzamento sessione). */

body.theme-switching,
body.theme-switching * {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}

body,
header {
    background-color: var(--bg-page)
}

body {
    font-family: "Montserrat", sans-serif;
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden
}

h2 { scroll-margin-top: 120px }

h3 { scroll-margin-top: 100px }

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition)
}

ul { list-style: none }

/* ==========================================================================
   HEADER & NAVBAR
   ========================================================================== */

header {
    padding: 20px var(--side-margin) 0;
    position: sticky;
    top: 0;
    z-index: 9999;
    height: 90px
}

.navbar {
    width: 100%;
    height: 70px;
    background-color: var(--navbar-bg);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    gap: 20px
}

/* Logo */

/* Link centrali (navbar con accesso) */

/* Sezione destra (navbar con accesso) */

/* Selettore lingua */

/* nav-links: navbar pubblica (index/login/registrazione) */

.nav-links {
    display: flex;
    align-items: center;
    gap: 10px;
    list-style: none
}

.nav-links li { margin: 0 }

.nav-links a {
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: underline;
    transition: var(--transition)
}

.nav-links a:hover { color: var(--primary) }

/* Pulsante tema nella navbar pubblica */

/* Auth buttons */

.btn-login-nav {
    border: 1px solid rgba(255,255,255,0.25);
    padding: 6px 14px;
    border-radius: 7px;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.82rem;
    transition: var(--transition);
    background: transparent;
    text-decoration: none
}

.btn-login-nav:hover {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08)
}

.btn-reg-nav {
    background-color: var(--primary);
    border: none;
    padding: 6px 14px;
    border-radius: 7px;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.82rem;
    transition: var(--transition);
    text-decoration: none
}

.btn-reg-nav:hover { opacity: 0.85 }

/* Mobile hamburger */

.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    cursor: pointer;
    z-index: 10001
}

.menu-toggle .bar {
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 10px;
    transition: all .3s ease
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer {
    padding: 30px var(--side-margin);
    background-color: var(--bg-page);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Bagliore primary largo che sale dal basso del footer */

footer::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: min(1460px, 92vw);
    height: 350px;
    background: radial-gradient(ellipse at 50% 100%, rgba(var(--primary-rgb), 0.24) 0%, rgba(var(--primary-rgb), 0.09) 45%, rgba(var(--primary-rgb), 0) 72%);
    pointer-events: none;
    z-index: 0;
}

/* Niente bagliore in tema chiaro */

[data-theme="light"] footer::before { display: none; }

/* --- FOOTER DEL SITO (multi-colonna) --- */

@media (max-width: 700px) {
    footer { padding: 30px 20px; }

/* Bagliore ancorato in basso: raggio orizz. < larghezza footer così sfuma
       prima dei bordi (niente taglio ai lati) e più alto verticalmente. */

    footer::before {
        background: radial-gradient(ellipse 75% 380px at 50% 100%, rgba(var(--primary-rgb), 0.24) 0%, rgba(var(--primary-rgb), 0.09) 46%, rgba(var(--primary-rgb), 0) 74%);
    }
}

/* ==========================================================================
   HERO (INDEX)
   ========================================================================== */

.highlight-h1 {
    color: var(--primary);
    font-weight: 700
}

/* ==========================================================================
   AUTENTICAZIONE — ACCEDI E REGISTRATI
   --------------------------------------------------------------------------
   Un blocco solo per le due pagine: campi, pulsanti e messaggi sono identici,
   cambia soltanto l'involucro che li contiene.

   Larghezze (le stesse del resto del sito):
   - Registrati usa i 1200px dei contenitori centrati (come .hub-grid), divisi
     in due colonne: i campi a sinistra, la presentazione a destra.
   - Accedi si ferma a 420px: sono due campi, allargarli non aiuta a leggerli;
     un modulo stretto e centrato si compila tutto d'un fiato.
   Sotto i 760px la registrazione diventa una colonna sola, con la
   presentazione portata sopra ai campi; sotto i 460px anche le coppie di
   campi affiancati (nome/cognome, password/conferma) si incolonnano.
   ========================================================================== */

/* La larghezza segue quella del resto del sito: i lati si fermano sempre a
   --side-margin, come .lesson-main e l'indice delle lezioni (16px sotto i
   768px). Il tetto di 1200px vale solo sugli schermi molto larghi, dove
   allargare ancora un modulo lo renderebbe solo più scomodo da compilare. */

.auth-wrap {
    width: min(1200px, 100% - 2 * var(--side-margin));
    margin: 20px auto;
}

.auth-wrap--login {
    width: min(420px, 100% - 2 * var(--side-margin));
    margin: 20px auto;
}

/* --- Involucri ---------------------------------------------------------- */

/* Accedi: una scheda sola. */

.auth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 34px 30px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Registrati: due schede affiancate e indipendenti, non più una sola divisa a
   metà. Lo scheletro qui sotto tiene solo la griglia; il fondo, il bordo e gli
   angoli stanno su ciascuna delle due. */

.auth-shell {
    display: grid;
    grid-template-columns: 5fr 3fr;
    gap: 25px;
}

/* Il bordo colorato è solo su questa: è la scheda che chiede di agire. */

.auth-main {
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: 25px;
    padding: 28px 32px 28px;
}

/* --- Testata ------------------------------------------------------------ */

/* Stessa forma del titolo di sezione delle lezioni (.content-center h2):
   Outfit in nero, barretta colorata a sinistra, nessuna riga sotto. */

.auth-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--text-main);
    margin: 0 0 4px;
    padding-left: 14px;
    border-left: 4px solid var(--primary);
    line-height: 1.25;
    letter-spacing: -0.3px;
}

.auth-sub {
    color: var(--text-muted);
    margin: 0 0 22px;
    font-size: .93rem;
}

/* Il titolo è un <h1>, quindi più avanti nel foglio raccoglie anche le regole
   del titolone della landing (1.8rem, e 1.9rem sotto i 576px, che su questa
   pagina non c'entrano nulla). Le riscriviamo qui con la stessa specificità
   del selettore che le porta, così vince questa. */

body.landing-page .auth-title {
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -0.3px;
    margin: 0 0 25px;
}

/* Nella scheda dell'accesso il testo è centrato come il modulo, e il titolo
   perde la barretta: a sinistra di un testo centrato non avrebbe nulla a cui
   agganciarsi. */

.auth-card .auth-title,
.auth-card .auth-sub {
    text-align: center;
}

.auth-card .auth-title,
body.landing-page .auth-card .auth-title {
    font-size: 1.55rem;
    padding-left: 0;
    border-left: none;
}

.auth-card .auth-sub {
    margin-bottom: 24px;
}

/* --- Campi -------------------------------------------------------------- */

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Due campi affiancati (nome/cognome, password/conferma). */

.auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-field label {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .82rem;
    color: var(--text-main);
}

/* La parte "— facoltativo" dell'etichetta, in tono minore. */

.auth-field .opt {
    color: var(--text-muted);
    font-weight: 600;
    font-size: .74rem;
}

.auth-field input,
.auth-field select {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-page);
    color: var(--text-main);
}

/* Il bordo sparisce sotto il contorno di messa a fuoco: due righe di colore
   una dentro l'altra si vedrebbero come un bordo sdoppiato. */

.auth-field input:focus,
.auth-field select:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: transparent;
}

/* --- Pulsante di invio -------------------------------------------------- */

/* Pillola come gli altri pulsanti del sito (vedi .btn-reg-nav della barra in
   alto): larga quanto la scritta e allineata a sinistra sotto al modulo. */

.auth-submit {
    align-self: flex-start;
    margin-top: 6px;
    border: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    background: var(--primary);
    color: #fff;
    padding: 9px 24px;
    border-radius: 50px;
    transition: filter .15s;
}

/* Nell'accesso il modulo è stretto: il pulsante lo chiude per intero. */

.auth-card .auth-submit {
    align-self: stretch;
    padding: 11px 0;
}

.auth-submit:hover { filter: brightness(1.08); }

/* Durante l'invio il pulsante viene bloccato: si spegne e perde la manina. */

.auth-submit:disabled { opacity: .6; cursor: default; }

/* --- Accettazione dei termini ------------------------------------------- */

.auth-terms {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin-top: 4px;
    font-family: 'Nunito', sans-serif;
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* `flex: none` tiene la casella quadrata: senza, si schiaccerebbe quando il
   testo accanto va a capo su più righe. */

.auth-terms input {
    margin-top: 2px;
    accent-color: var(--primary);
    flex: none;
}

.auth-terms a,
.auth-swap a {
    color: var(--accent-text);
    font-weight: 700;
    text-decoration: none;
}

.auth-terms a:hover,
.auth-swap a:hover { text-decoration: underline; }

/* --- Rimando all'altra pagina ------------------------------------------- */

.auth-swap {
    margin: 16px 0 0;
    font-size: .88rem;
    color: var(--text-muted);
    font-family: 'Nunito', sans-serif;
}

.auth-card .auth-swap {
    margin-top: 18px;
    text-align: center;
}

/* --- Messaggi (errore, conferma, attesa) -------------------------------- */

.auth-msg {
    margin-top: 16px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: .88rem;
    font-family: 'Nunito', sans-serif;
    line-height: 1.4;
}

/* Messaggio neutro: nessuna delle due classi, per esempio "Attendi...". */

.auth-msg:not(.auth-msg--error):not(.auth-msg--ok) {
    background: var(--bg-secondary);
    color: var(--text-muted);
}

/* --- Colonna di presentazione (solo Registrati) ------------------------- */

.auth-aside {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 34px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 25px;
}

/* Stessa forma del titolo della scheda accanto, barretta compresa. */

.auth-aside h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.75rem;
    color: var(--text-main);
    margin: 0;
    padding-left: 14px;
    border-left: 4px solid var(--primary);
    line-height: 1.25;
    letter-spacing: -0.3px;
}

.auth-aside p {
    color: var(--text-muted);
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
}

.auth-benefits {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-benefits li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-size: .92rem;
}

.auth-benefits svg {
    flex: none;
    margin-top: 2px;
    color: var(--primary);
}

/* --- Rimando all'accesso, in fondo alla colonna di destra --------------- */

.auth-aside-login {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 28px 0 0;
}

.auth-aside-login h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    color: var(--text-main);
    margin: 0;
}

/* Il pulsante bordato è lo stesso "Accedi" della barra in alto, ma qui sta
   accanto a "Registrati" e deve essergli pari: stessa altezza, stesso testo,
   stessi angoli. Il riempimento verticale è di 1px più basso perché questo ha
   il bordo e l'altro no — così i due riquadri finiscono uguali.
   La barra in alto non è toccata: la regola vale solo dentro questa colonna.
   Il `body.landing-page` davanti non è decorativo: le misure del pulsante
   arrivano da un selettore che ce l'ha, e senza questa vincerebbe quello. */

body.landing-page .auth-aside .btn-login-nav,
.auth-aside .btn-login-nav {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 40px;
    padding: 0 24px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
}

/* --- Schermi stretti ---------------------------------------------------- */

/* --- Schermi stretti: le due schede una sopra l'altra -------------------
   Il modulo resta sempre per primo: la scheda di presentazione è alta quanto
   uno schermo intero e mandarla in cima vorrebbe dire far scorrere tutto quel
   testo prima di arrivare al primo campo, mentre chi apre questa pagina di
   solito ha già deciso di registrarsi.

   La soglia è 1100px e non 760. Le due schede si dividono lo spazio 5 a 3, e
   perché la colonna di destra resti leggibile le serve almeno un 270px di
   testo: contando i 34px di riempimento per lato, i 25px fra le due schede e
   i 90px di margine del sito, il conto torna appunto intorno ai 1100px di
   finestra. Sotto quella soglia la colonna di destra scendeva a 220px scarsi
   — tre parole per riga — e i campi affiancati a metà di quel che serve. */

@media (max-width: 1100px) {
    .auth-shell {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}

/* Sul telefono la scheda dell'accesso si mette al centro dello schermo, in
   altezza: sono due campi in croce, e lasciarli appiccicati sotto alla barra
   in alto con mezzo schermo vuoto sotto faceva sembrare la pagina incompleta.
   Il piè di pagina resta sotto, si raggiunge scorrendo — come nella pagina di
   benvenuto, che usa lo stesso accorgimento. */

@media (max-width: 600px) {
    body:has(.auth-wrap--login) main {
        min-height: calc(100vh - 80px);
        min-height: calc(100dvh - 80px);
        display: flex;
        align-items: center;
    }

    .auth-wrap--login { width: min(420px, 100% - 2 * var(--side-margin)); }
}

/* Sotto i 600px si comprime anche il contenuto: meno respiro interno, titoli
   più piccoli, campi affiancati uno sotto l'altro. La soglia è 600 e non 760
   perché fra i due valori la scheda è ancora larga 600-700px: lì i campi in
   coppia stanno comodi (oltre 250px l'uno) e stringere i bordi non serve. */

@media (max-width: 600px) {
    .auth-shell { gap: 20px; }

/* Le due schede stanno in una colonna larga quanto lo schermo meno i
       margini del sito: dentro serve meno respiro, o resta poco spazio ai
       campi. */

    .auth-main,
.auth-aside,
.auth-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .auth-aside-login { padding-top: 20px; }

/* Sotto questa larghezza i due campi in coppia scenderebbero attorno ai
       250px l'uno, e un "Conferma password" lì dentro non si legge più. */

    .auth-row { grid-template-columns: 1fr; }

    body.landing-page .auth-title,
.auth-aside h2 {
        font-size: 1.5rem;
        padding-left: 11px;
        border-left-width: 3px;
    }
}

/* ==========================================================================
   SEZIONE COMMENTI (in fondo alla lezione)
   --------------------------------------------------------------------------
   Un riquadro solo, largo quanto la lezione: titolo, casella per scrivere e
   l'elenco dei commenti. Le risposte rientrano sotto al commento a cui si
   riferiscono, collegate da una linea a gomito.
   ========================================================================== */

.commenti {
    /* Le due misure da cui dipende tutto il disegno del filo delle risposte:
       a che distanza dal bordo passa la riga verticale (in asse col centro
       della faccina) e di quanto rientra ogni risposta. Il rientro è scritto
       sulle risposte perché cambia da un livello all'altro; il gomito le legge
       tutt'e due e si dimensiona da sé, così cambiando il rientro non c'è
       nient'altro da ritoccare. */
    --filo-x: 19px;

    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 15px;
    padding: 30px 38px 38px;
    margin-top: 80px;
}

/* Riga di separazione fra la lezione e i commenti: chiude il testo e annuncia
   che quello che viene dopo non è più roba scritta da noi.
   È fatta come quella sotto al titolo della lezione: un bordo inferiore su una
   scatola con gli angoli arrotondati, così agli estremi la riga si incurva
   verso l'alto invece di finire di netto. */

.commenti::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -50px;
    height: 10px;
    border-bottom: 1px solid var(--border-color);
    border-radius: 10px;
}

/* Stesso titolo delle sezioni della lezione: barretta colorata e Outfit. */

.commenti-titolo {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: var(--text-main);
    margin: 0 0 25px;
    padding-left: 14px;
    border-left: 4px solid var(--primary);
}

/* --- Casella per scrivere ----------------------------------------------- */

/* `field-sizing` fa crescere la casella da sola mentre si scrive, dove il
   browser lo conosce; altrove restano le due righe di `rows`. */

/* Casella e pulsante sulla stessa riga; `align-items: flex-start` tiene il
   pulsante in alto quando la casella si allunga scrivendo. */

.commenti-scrivi {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.commenti-scrivi textarea {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    min-height: 38px;
    field-sizing: content;
    resize: vertical;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-page);
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    letter-spacing: -0.3px;
    line-height: 1.5;
}

.commenti-scrivi textarea::placeholder {
    color: var(--text-muted);
    opacity: .45;
}

.commenti-scrivi textarea:focus {
    outline: 1px solid var(--primary);
    border-color: transparent;
}

/* Il pulsante è alto quanto la casella vuota, così di partenza le due cose
   formano una riga sola. Resta spento finché non c'è niente da pubblicare. */

.commenti-pubblica {
    flex: none;
    height: 42px;
    padding: 0 24px;
    border: none;
    border-radius: 50px;
    background: var(--primary);
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: filter .15s, opacity .15s;
}

.commenti-pubblica:hover { filter: brightness(1.08); }

.commenti-pubblica:disabled {
    opacity: .45;
    cursor: default;
    filter: none;
}

/* Invito ad accedere, al posto della casella, per chi non è connesso. */

/* --- Elenco ------------------------------------------------------------- */

.commenti-lista {
    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-top: 30px;
}

.commenti-vuoto {
    font-family: 'Nunito', sans-serif;
    color: var(--text-muted);
    opacity: .7;
    margin: 30px 0 0;
}

/* Il commento è una griglia di due colonne: la faccina a sinistra, tutto il
   resto a destra, così testo e pulsanti restano allineati sotto al nome. */

.commento {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 15px;
    position: relative;
}

.commento-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.25);
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.commento-corpo { min-width: 0; }

/* Nome e data stanno a metà altezza della faccina che hanno accanto. */

.commento-testa {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.commento-nome {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.3px;
    color: var(--text-main);
}

.commento-quando {
    font-family: 'Nunito', sans-serif;
    font-size: .875rem;
    letter-spacing: -0.3px;
    color: var(--text-muted);
    opacity: .65;
    white-space: nowrap;
}

.commento-testo {
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: var(--text-main);
    margin: 4px 0 0;
    /* Un utente può incollare una parola lunghissima senza spazi: senza questo
       allargherebbe il riquadro invece di andare a capo. */
    overflow-wrap: anywhere;
}

/* --- Pulsanti sotto al commento ----------------------------------------- */

.commento-azioni {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

.commento-azione {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-weight: 500;
    font-size: 0.7rem;
    transition: opacity .15s, color .15s;
}

.commento-azione:hover { opacity: 1; }

.commento-azione svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Voto già dato: il pollice si accende del colore della lingua. */

.commento-azione.is-attiva {
    color: var(--primary);
    opacity: 1;
}

/* --- Aprire e chiudere una discussione ---------------------------------- */

/* La freccetta sta in testa alla riga del nome, prima di tutto il resto. */

.commento-piega {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -4px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, transform .15s;
}

.commento-piega svg { width: 15px; height: 15px; display: block; }

.commento-piega:hover {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--text-main);
}

/* Chiuso: la freccia punta a destra e del commento resta la sola riga del nome,
   con quante risposte sono nascoste. Le tre righe qui sotto usano il figlio
   diretto (`>`) perché una discussione chiusa non deve piegare anche quelle
   che ha dentro: riaprendola le ritrovi come le avevi lasciate. */

.commento-gruppo.is-chiuso > .commento .commento-piega {
    transform: rotate(-90deg);
}

.commento-gruppo.is-chiuso > .commento .commento-testo,
.commento-gruppo.is-chiuso > .commento .commento-azioni,
.commento-gruppo.is-chiuso > .commento-risposte {
    display: none;
}

/* Il filo non ha più niente da collegare, e sparisce con le risposte. Il
   `:has()` non è un vezzo: senza, questa regola e quella che disegna il filo
   peserebbero uguale, e vincerebbe l'altra perché scritta più in basso. */

.commento-gruppo.is-chiuso:has(> .commento-risposte)::before { content: none; }

/* Il conteggio si vede solo a discussione chiusa. */

.commento-chiuse {
    display: none;
    font-family: 'Nunito', sans-serif;
    font-size: .875rem;
    letter-spacing: -0.3px;
    color: var(--accent-text);
    font-weight: 700;
}

.commento-gruppo.is-chiuso > .commento .commento-chiuse { display: inline; }

/* --- I tre pallini e il suo menu ---------------------------------------- */

.commento-altro-guscio { position: relative; }

.commento-altro {
    letter-spacing: 2px;
    line-height: 1;
    padding: 0 2px;
}

/* Il menu si apre sotto ai pallini. `position: absolute` dentro al guscio, che
   è l'unico antenato posizionato: così segue il pulsante ovunque sia. */

.commento-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 5;
    min-width: 190px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
}

/* Il menu nasce chiuso: lo apre e lo chiude il JS mettendo e togliendo
   l'attributo `hidden`. Questa riga non è di troppo — `hidden` da solo vale
   `display: none` alla forza più bassa che esista, e la riga qui sopra, che è
   una classe, lo scavalcava: il menu restava sempre aperto. */

.commento-menu[hidden] {
    display: none;
}

.commento-menu button {
    background: none;
    border: none;
    text-align: left;
    padding: 9px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    color: var(--text-main);
}

.commento-menu button:hover { background: rgba(var(--primary-rgb), 0.10); }

/* L'unica voce che cancella qualcosa si distingue dalle altre. */

.commento-menu button.pericolo { color: #e11d48; }

.commento-menu button.pericolo:hover { background: rgba(225, 29, 72, 0.10); }

/* --- Rispondere a un commento ------------------------------------------- */

.commento-risposta-form {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
}

.commento-risposta-form textarea {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    min-height: 42px;
    field-sizing: content;
    resize: vertical;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-page);
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-size: .95rem;
    line-height: 1.5;
}

.commento-risposta-form textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
    border-color: transparent;
}

.commento-risposta-form .commenti-pubblica { height: 42px; padding: 0 18px; font-size: .95rem; }

.commento-annulla {
    flex: none;
    height: 42px;
    padding: 0 14px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-muted);
}

.commento-annulla:hover { color: var(--text-main); }

/* --- Risposte ----------------------------------------------------------- */

/* Commento padre e sue risposte stanno insieme in un gruppo: serve a dare al
   filo che li collega un appiglio che parte dal padre e arriva all'ultima
   risposta. */

.commento-gruppo {
    display: flex;
    flex-direction: column;
    gap: 26px;
    position: relative;
}

/* Il filo parte poco sotto la faccina del commento padre (la faccina finisce a
   40, il filo attacca a 44: un filo di stacco) e scende in asse con il suo
   centro (40 / 2 = 20, meno metà spessore della riga). */

.commento-gruppo:has(> .commento-risposte)::before {
    content: "";
    position: absolute;
    left: var(--filo-x);
    top: 44px;
    bottom: 0;
    border-left: 2px solid var(--primary);
}

.commento-risposte {
    /* Un gradino solo, uguale a ogni livello. Il tetto lo fa la profondità
       massima delle risposte (otto livelli): a 44px il rientro complessivo è
       di 308px, che sul riquadro largo ~1130px lascia comunque più di 700px
       di testo al commento più interno. */
    --rientro: 44px;

    display: flex;
    flex-direction: column;
    gap: 26px;
    margin-left: var(--rientro);
}

/* Il gomito: SOLO la curva e il tratto orizzontale, niente pezzo dritto.
   Il tratto dritto lo fa già il filo del gruppo, e disegnarlo due volte era il
   difetto di prima: dove le due righe si sovrapponevano il colore raddoppiava
   (è semitrasparente) e si vedeva più chiaro.
   L'altezza è uguale al raggio (12), quindi il bordo sinistro è tutto curva:
   comincia esattamente dove il filo finisce e se ne va verso destra.
   Orizzontalmente parte dove passa il filo del commento sopra e si ferma poco
   prima della faccina della risposta: i 6px di respiro sono quelli che le
   impediscono di sembrarci appiccicata. I conti valgono a qualsiasi rientro. */

.commento-risposte > .commento-gruppo > .commento::before {
    content: "";
    position: absolute;
    left: calc(var(--filo-x) - var(--rientro));
    top: 8px;
    width: calc(var(--rientro) - var(--filo-x) - 6px);
    height: 12px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    border-bottom-left-radius: 12px;
    /* Sta sopra alla macchia che copre la coda del filo (vedi qui sotto):
       senza, la macchia cancellava i primi pixel della curva e la linea si
       vedeva spezzata proprio nel punto di giunzione. */
    z-index: 1;
}

/* Dopo l'ultima risposta il filo non ha più niente da raggiungere: la coda
   viene coperta con il colore del riquadro, a partire dal punto esatto in cui
   la curva se ne va (8). Prima partiva da 20, ed è per questo che un pezzo di
   riga dritta sbucava sotto la curva. */

.commento-risposte > .commento-gruppo:last-child::after {
    content: "";
    position: absolute;
    left: calc(var(--filo-x) - var(--rientro) - 1px);
    top: 8px;
    bottom: -2px;
    width: 4px;
    background: var(--bg-card);
    z-index: 0;
}

/* --- Schermi stretti ---------------------------------------------------- */

@media (max-width: 600px) {
    .commenti {
        padding: 22px 18px 26px;
        margin-top: 45px;
    }

/* Il divisore segue il riquadro, che qui è più vicino al testo sopra. */

    .commenti::before { top: -32px; }

/* Il menu dei tre pallini si apre verso sinistra invece che verso destra:
       ancorato a sinistra sfondava fuori dallo schermo, soprattutto quando i
       pallini sono quelli di una risposta, che parte già rientrata. */

    .commento-menu {
        left: auto;
        right: 0;
    }

/* Su schermo stretto la casella e il pulsante non ci stanno affiancati:
       il pulsante va sotto, allineato a destra. */

/* Casella e pulsante restano sulla stessa riga anche qui: prima il
       pulsante andava a capo e si portava via un'altra riga di schermo. Ci
       stanno perché il pulsante si stringe — bordi più stretti e testo un
       filo più piccolo — e la casella si prende quello che resta. */

    .commenti-pubblica {
        height: 38px;
        padding: 0 14px;
        font-size: .9rem;
    }

/* Il modulo di risposta invece ha DUE pulsanti: tenendo tutto su una riga
       alla casella resterebbero 96px, dove non si scrive niente. Qui la casella
       si prende la riga e i pulsanti vanno sotto, a destra. */

    .commento-risposta-form { flex-wrap: wrap; justify-content: flex-end; }

    .commento-risposta-form textarea { flex-basis: 100%; }

    .commento-risposta-form .commenti-pubblica { height: 38px; padding: 0 16px; }

    .commento-annulla { height: 38px; padding: 0 10px; font-size: .9rem; }

    .commenti-titolo { font-size: 1.5rem; padding-left: 11px; border-left-width: 3px; }

/* "Ancora nessun commento" stava a 60px dalla casella: i 30 dell'elenco
       più i 30 suoi. Qui bastano quelli dell'elenco. */

    .commenti-vuoto { margin-top: 0; }

/* Faccina più piccola e rientro delle risposte dimezzato: su 320px di
       larghezza ogni livello di rientro toglie spazio al testo. */

    .commento { grid-template-columns: 32px 1fr; column-gap: 10px; }

    .commento-avatar { width: 32px; height: 32px; font-size: .85rem; }

    .commento-testa { min-height: 32px; gap: 8px; flex-wrap: wrap; }

    .commento-nome { font-size: 1.05rem; }

/* Faccina da 32: il filo scende in asse col suo centro (16) e il gomito si
       stacca da lì (34 − 19 = 15), chiudendo al centro della faccina della
       risposta (16). Stessa costruzione: curva alta quanto il raggio, filo
       coperto da dove la curva se ne va. */

/* Faccina da 32: il filo scende in asse col suo centro (16). Gomito e
       maschera si riposizionano da soli. */

    .commenti { --filo-x: 15px; }

    .commento-gruppo:has(> .commento-risposte)::before { top: 36px; }

/* Sul telefono il gradino è per forza più stretto: il riquadro è largo
       ~310px, e a otto livelli ogni pixel di rientro va via dal testo. */

    .commento-risposte { --rientro: 26px; }

    .commento-risposte > .commento-gruppo > .commento::before { top: 4px; height: 12px; }

    .commento-risposte > .commento-gruppo:last-child::after { top: 4px; }
}

/* ==========================================================================
   HUB LINGUE
   ========================================================================== */

/* ==========================================================================
   GRAMMATICA — INDICE LEZIONI
   ========================================================================== */

/* ==========================================================================
   GRAMMATICA — PAGINA LEZIONE
   ========================================================================== */

.lesson-banner {
    margin: 20px 0 40px;
    height: 200px;
    background: var(--bg-card);
    border-radius: 10px;
    display: flex;
    padding: 25px;
    justify-content: center;
    align-items: center;
    color: var(--text-main)
}

/* Rimosse due regole legacy solo-cinese: servivano a coprire i vecchi banner
   con immagine di sfondo. Oggi il banner è trasparente come nel giapponese,
   e quello sfondo creava un riquadro visibile dietro al titolo. */

#lesson-title {
    font-size: 58px;
    font-weight: 600;
    text-align: center;
    line-height: 1.5
}

.lesson-main {
    margin: 0 var(--side-margin) 50px
}

.lesson-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px
}

.content-center h2,
.content-center h3 {
    padding-bottom: 0;
    color: var(--primary);
    text-transform: uppercase;
    font-weight: 700
}

.content-center h2 {
    font-size: 1.8rem;
    margin: 50px 0 20px;
    border-bottom: 2px solid var(--primary)
}

.content-center h3 {
    font-size: 1.2rem;
    margin: 40px 0 10px
}

.content-center p {
    margin-bottom: 1rem;
    display: block;
    line-height: 1.8
}

.content-center ul li:only-child {
    list-style: none;
    background-color: var(--bg-card);
    padding: 15px 25px;
    margin-left: 0;
    margin-top: 25px;
    margin-bottom: 25px !important;
    border-radius: 5px;
    line-height: 1.9;
    border: 1px var(--primary) solid;
    color: var(--text-main);
    position: relative
}

.content-center ul li:only-child::before {
    content: "\f0eb";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
    color: var(--primary);
    font-style: normal
}

/* Nota "Attenzione": il primary (bordo + icona) diventa giallo */

.content-center ul li:only-child.nota-attenzione {
    border-color: var(--warn);
}

.content-center ul li:only-child.nota-attenzione::before {
    color: var(--warn);
}

/* Nota "Curiosita'": stesso riquadro dell'Attenzione, ma arancione */

.content-center ul li:only-child.nota-curiosita {
    border-color: var(--curio);
}

.content-center ul li:only-child.nota-curiosita::before {
    color: var(--curio);
}

.content-center ul li {
    list-style: none;
    position: relative
}

.content-center ul li:not(:only-child) {
    list-style: disc;
    margin-left: 25px;
    margin-bottom: 10px
}

.example-box ul li:not(:only-child) {
    list-style: none
}

.example {
    background-color: var(--bg-card);
    background-image: none;
    padding: 15px;
    border-radius: 5px;
    margin: 20px 0 0;
    text-align: center
}

.meaning {
    font-size: .9em;
    color: var(--text-main)
}

.example-box {
    background-color: var(--bg-card);
    border-left: 5px solid var(--primary);
    padding: 25px 20px 25px 0;
    margin: 20px 0;
    border-radius: 4px 10px 10px 4px
}

.content-center li {
    margin-left: 25px;
    margin-bottom: 10px !important
}

.example-box li {
    margin-bottom: 15px !important;
    position: relative
}

.example-box li:last-child {
    margin-bottom: 0 !important
}

/* ==========================================================================
   SIDEBAR LEZIONE
   ========================================================================== */

.sidebar {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px;
    position: sticky;
    top: 120px;
    height: calc(100vh - 150px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent
}

.sidebar::-webkit-scrollbar { width: 4px }

.sidebar::-webkit-scrollbar-track { background: 0 0 }

.sidebar::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 10px;
    transition: background-color .3s ease
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary)
}

.sidebar-box {
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
}

.sidebar-box:first-child {
    border-top: none;
    padding-top: 0;
}

.sidebar-box h3 {
    font-size: 1rem;
    color: var(--primary);
    border-bottom: 1px solid var(--primary);
    display: inline-block;
    text-transform: uppercase;
    margin-bottom: 10px
}

.toc-list a {
    display: block;
    padding: 4px 10px;
    color: var(--text-main);
    border-left: 2px solid transparent;
}

.toc-list a:hover {
    border-left-color: var(--primary);
    color: var(--primary)
}

.floating-back-btn:hover {
    background-color: var(--primary);
    color: #fff
}

.floating-back-btn {
    position: fixed;
    bottom: 30px;
    left: 25px;
    width: 50px;
    height: 50px;
    background-color: var(--bg-page);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

/* ==========================================================================
   HUB VOCABOLARIO & DECK
   ========================================================================== */

/* ==========================================================================
   SRS — BARRA SUPERIORE E STRUTTURA PAGINA
   ========================================================================== */

/* ── SESSION LOADING OVERLAY ──────────────────────────────────────────────── */

/* ==========================================================================
   SRS — BOTTONI E ICONE
   ========================================================================== */

/* Top bar sessione: pulsanti icona identici a quelli della navbar generale */

/* Badge livello: pillola in stile navbar */

/* Barra inferiore: pulsanti coerenti con la navbar */

/* ── Font nuovi nella sessione (Nunito testo, Outfit titoli).
   Gli elementi CJK mantengono var(--font-cjk) perché lo impostano esplicitamente. ── */

/* Niente immagine (banner-jp/cn.png) dietro la parola: resta solo il colore primary */

/* Letter-spacing su tutte le label della sessione */

/* ==========================================================================
   SRS — FRONTE CARTA
   ========================================================================== */

/* Transizione fronte↔retro più smooth: fade sul lato che diventa visibile.
   Solo opacità (niente transform): i lati contengono la toolbar position:fixed,
   e un transform sull'antenato la sposterebbe. */

/* Pagina di passaggio tra fase "impara" e fase "esercizio":
   occupa solo la zona centrale, lasciando visibili top bar e barra inferiore. */

/* ==========================================================================
   SRS — WRAPPER E GRIGLIA RETRO (LAYOUT STANDARD)
   ========================================================================== */

/* Su desktop JP il banner word box non va a capo:
   il font-size viene scalato uniformemente da JS in base alla lunghezza della parola */

/* ── Ombre dei box della sessione: SOLO in modalità chiara ───────────────
   Sul fondo scuro i box si staccano già da soli (sono più chiari dello
   sfondo); su fondo chiaro sono più chiari di pochissimo, quindi senza
   ombra galleggiano. `data-theme` sta su <html>, non dentro <body>. */

/* Lo scroll avviene sul .meaning-container; margin-right negativo
   porta la scrollbar a filo del bordo destro del box */

/* Box esempio: flex column, frecce ancorate all'intero box */

/* Frecce ancorate al box intero, centrate verticalmente su tutta l'altezza */

/* example-nav: layout flex senza posizionamento proprio */

/* Padding laterale per non sovrapporsi alle frecce */

/* ==========================================================================
   SRS — POS TAG
   ========================================================================== */

/* Fuori dalla sessione i tag della parte del discorso sono una pastiglia
   neutra in contorno: 14 colori pieni erano troppo rumore per pagine dove
   i tag compaiono in elenchi lunghi. DENTRO la sessione invece i colori
   restano (blocco più sotto), perché lì il tag è uno o due per carta e il
   colore aiuta a riconoscere al volo la parte del discorso. */

/* ── Colori dei tag: SOLO dentro la sessione ─────────────────────────────
   `body.srs-page` è la classe della pagina session.html. Il contorno neutro
   va tolto, altrimenti resta un bordo chiaro attorno alla pastiglia piena. */

/* Il tag "categorie" resta in contorno anche nella sessione: non è una parte
   del discorso, quindi non deve competere con le pastiglie piene. */

/* Tag di registro/uso (uk, colloquiale, onorifico...): pillola meta, contorno tratteggiato */

/* ==========================================================================
   SRS — KANJI BREAKDOWN
   ========================================================================== */

/* ==========================================================================
   SRS — SIGNIFICATI
   ========================================================================== */

/* ==========================================================================
   SRS — NAVIGAZIONE ESEMPI
   ========================================================================== */

/* Barra audio+contatore fissa in cima al box esempio */

/* ==========================================================================
   SRS — LAYOUT VERSIONE B (CON IMMAGINE CUSTOM)
   ========================================================================== */

/* Il .meaning-container fa lo scroll e usa margin-right negativo
   per portare la scrollbar a filo del bordo destro del box padre */

/* ==========================================================================
   RESPONSIVE — 1200px (deck grid)
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE — 1100px (hero e lezione)
   ========================================================================== */

@media (max-width: 1100px) {
    .lesson-grid { grid-template-columns: 1fr }

    .sidebar {
        position: static;
        height: auto
    }
}

/* ==========================================================================
   RESPONSIVE — 1024px (SRS)
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE — 768px (mobile generale)
   ========================================================================== */

@media (max-width: 768px) {
    :root { --side-margin: 16px }

/* ==========================================================
       NAVBAR — INDEX / LOGIN / REGISTRAZIONE (slide-in classica)
    ========================================================== */

    header {
        padding: 15px var(--side-margin);
        height: 85px
    }

    .content-center h2 {
        margin-top: 30px;
    }

    .lesson-grid {
        gap: 20px;
    }

    .navbar {
        height: 70px
    }

    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        cursor: pointer;
        
        flex-shrink: 0
    }

    .menu-toggle .bar {
        width: 100%;
        height: 2px;
        background-color: #fff;
        border-radius: 10px;
        transition: all .3s ease
    }

    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg) }

    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0 }

    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg) }

/* ── OVERLAY MENU MOBILE ─────────────────────────────── */

/* Navbar pubblica (index/login): overlay a tutta pagina */

    .nav-links {
        position: fixed;
        inset: 0;
        background: var(--navbar-bg);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 28px;
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease
    }

    .nav-links.active {
        opacity: 1;
        pointer-events: all
    }

    .nav-links li { margin-left: 0 }

    .nav-links a { font-size: 1.4rem }

    .nav-links .btn-login-nav,
.nav-links .btn-reg-nav { font-size: 1rem; padding: 10px 28px }

/* Navbar con accesso: nav-center + nav-right
       formano un unico overlay centrato, tutto insieme */

/* nav-center: overlay a tutta pagina (sopra la navbar) */

/* nav-right nella parte bassa dello stesso overlay */

/* Logo e hamburger sopra l'overlay */

    .menu-toggle { z-index: 9999; position: relative }

    body.nav-open { overflow: hidden }

/* Voci e pulsanti più grandi e toccabili */

/* Separatore visivo tra link e icone */

/* ==========================================================
       SRS — TOP BAR
    ========================================================== */

/* Al fronte blocca lo scroll — la carta non deve scorrere */

/* Wrapper: su mobile height auto per permettere scroll nel retro kanji */

/* Nel retro: body e wrapper scrollano liberamente */

/* .srs-front-only occupa esattamente lo spazio tra top bar e toolbar */

/* Niente barra di progressione nella top bar su mobile */

/* Box vocabolo (fronte) a larghezza piena su mobile */

/* ==========================================================
       SRS — WRAPPER E GRIGLIE
    ========================================================== */

/* Le due barre fisse sono alte 70px uguali: con 85 sopra e 75 sotto tutta
       l'area utile risultava spostata di 10px verso il basso, e con essa ogni
       contenuto centrato — non solo la grammatica. Somma invariata (160). */

/* Fronte */

/* Griglia standard */

/* Griglia con immagine */

/* ==========================================================
       PAGINA LEZIONE
    ========================================================== */

    .lesson-banner { height: auto; margin-bottom: 20px; }

    .lesson-main { margin: 0 var(--side-margin) 30px }
}

/* ==========================================================================
   DECK EDITOR & CARD EDITOR — BASE
   ========================================================================== */

/* Deck editor: topbar sticky — nessun padding-top sul main, la topbar parte subito */

/* Card editor: nessuna topbar superiore, parte da 20px sotto la navbar */

/* ==========================================================================
   CARD EDITOR — GRIGLIA DUE COLONNE
   ========================================================================== */

/* Nessun box — le colonne sono solo layout, niente sfondo o bordo */

/* Colonna sinistra sticky — nessuna scrollbar, altezza libera */

.btn-primary-editor {
    background-color: var(--primary);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: "Montserrat", sans-serif
}

.btn-primary-editor:hover { opacity: 0.85 }

/* ==========================================================================
   DECK EDITOR — BARRA RICERCA (standalone dentro topbar)
   ========================================================================== */

/* ==========================================================================
   DECK EDITOR — LISTA PAROLE
   ========================================================================== */

/* Larghezze fisse per allineamento colonne */

/* ==========================================================================
   CARD EDITOR — CAMPI
   ========================================================================== */

.field-hint {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
    margin-left: 8px
}

/* Significato: stessa struttura di vocabulary-review */

.field-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--bg-card);
    color: var(--text-main);
    font-family: "Montserrat", sans-serif;
    font-size: 0.9rem;
    transition: var(--transition)
}

.field-input:focus {
    outline: none;
    border-color: var(--primary)
}

/* ==========================================================================
   CARD EDITOR — BLOCCO ESEMPIO
   ========================================================================== */

/* ==========================================================================
   CARD EDITOR — ANTEPRIMA IMMAGINE
   ========================================================================== */

/* ==========================================================================
   CARD EDITOR — TOOLBAR FISSA IN BASSO
   ========================================================================== */

/* Bottone indietro sopra la toolbar in card-editor */

/* ==========================================================================
   RESPONSIVE EDITOR
   ========================================================================== */

/* ==========================================================================
   BULK IMPORT MODALE
   ========================================================================== */

/* Upload area */

/* Progress */

/* Step 3: risultati */

/* Step 4: done */

/* btn-bulk abilitato */

/* ==========================================================================
   BULK IMPORT — RESPONSIVE MOBILE
   ========================================================================== */

/* 。invisibile nelle frasi esempio SRS */

/* Nasconde 。tramite font trick non possibile in CSS puro —
   gestiamo via JS nel renderEsempio */

/* ==========================================================================
   RESPONSIVE — 480px (telefoni piccoli)
   ========================================================================== */

@media (max-width: 480px) {
    .navbar { padding: 4px 20px }
}

/* ==========================================================================
   LETTURA PROGRESSIVA — caratteri sostituiti con kana/pinyin
   ========================================================================== */

/* ==========================================================================
   SRS — POPUP OPZIONI
   ========================================================================== */

/* ==========================================================================
   SRS — FRONTE MODALITÀ 2 (COMPLETA LA FRASE)
   ========================================================================== */

/* Fronte 2: nascosto di default con classe, mostrato da JS */

/* ==========================================================================
   SRS SETTINGS — TOGGLE + DIVIDER
   ========================================================================== */

/* ==========================================================================
   SRS — SEEKBAR FLUIDA
   ========================================================================== */

/* ==========================================================================
   SRS MODALITÀ 2 — RESPONSIVE MOBILE
   ========================================================================== */

/* ==========================================================================
   KANJI REVIEW — FRONTE
   ========================================================================== */

/* Colonna verticale centrata: badge → kanji → input */

/* Badge tipo in cima */

/* Box kanji grande — occupa la parte centrale visiva */

/* Input sotto il box, larghezza uguale */

/* ==========================================================================
   KANJI REVIEW — RETRO
   ========================================================================== */

/* Riga superiore 44% altezza
   Colonne: kanji quadrato (larghezza = altezza riga) | significato 40% resto | storia 60% resto */

/* Riga inferiore 56% altezza
   Colonne: componenti 40% | letture 30% | esempi 30% */

/* ── MARGINE DI RITAGLIO PER LE OMBRE ────────────────────────────────────
   Tutti i layout della sessione mettono i box a filo dei bordi del loro
   contenitore, che ritaglia con `overflow: hidden`. L'ombra dei box (attiva
   in modalità chiara) sporge 18px sotto e 14px ai lati, quindi veniva
   tranciata su ogni lato esterno.
   `overflow: clip` + `overflow-clip-margin` allargano la sola zona di
   PITTURA: il contenuto continua a essere contenuto esattamente come prima,
   ma l'ombra ha lo spazio per uscire. 20px = i 18 che servono più un margine.
   I browser che non conoscono `clip` scartano queste dichiarazioni e
   mantengono l'`overflow: hidden` scritto nelle regole qui sopra. */

/* Base comune: label centrata in alto (25px), contenuto flex column */

/* Label centrata per tutte le celle */

/* --- Kanji hero: quadrato perfetto ---
   La colonna è "auto" — il box impone la propria larghezza tramite aspect-ratio.
   L'altezza è 100% della riga; aspect-ratio 1/1 fa sì che la larghezza = altezza. */

/* --- Significato: testo centrato orizzontalmente e verticalmente --- */

/* --- Storia: testo centrato verticalmente, allineato a sinistra --- */

/* **testo** — sfondo rosso + grassetto */

/* *testo* — grassetto + sottolineato rosso, nessun corsivo */

/* --- Componenti: box kanji propri, simili a vocabolario ma più piccoli --- */

/* Box kanji specifici per kanji-review (diversi da vocab) */

/* --- Letture: centrate verticalmente --- */

/* --- Esempi: 3 righe visibili, scroll invisibile dal 4° ---
   Altezza riga ~46px × 3 = 138px circa come altezza visibile */

/* Nella pagina kanji, il srs-card-container non ha gap visibile
   perché il retro occupa tutto (il fronte è display:none) */

/* ==========================================================================
   KANJI REVIEW — RESPONSIVE MOBILE
   ========================================================================== */

/* ── TABLET (≤1024px) ───────────────────────────────────────────────────── */

/* ── MOBILE (≤768px) ─────────────────────────────────────────────────────── */

/* ── TELEFONI PICCOLI (≤480px) ────────────────────────────────────────────── */

/* ==========================================================================
   NAVBAR — DROPDOWN CARATTERI (Kanji / Radicali)
   ========================================================================== */

/* ── DESKTOP: dropdown Caratteri integrato nella navbar ── */

/* Il wrapper deve essere position:relative per ancorare il dropdown */

.navbar {
    position: relative
}

/* ── MOBILE: dropdown col tap ── */

/* ==========================================================================
   RADICALI REVIEW — RETRO (box kanji a tutta larghezza)
   ========================================================================== */

/* Riga inferiore radicali: un unico box a tutta larghezza */

/* Box kanji radicali: più grandi, classe propria */

/* Mobile: 8 elementi in colonna singola */

/* Mobile */

/* ==========================================================================
   ALL CHARACTERS PAGE (GRIGLIA COMPLETA)
   ========================================================================== */

/* ==========================================================================
   CHARACTERS & RADICALS GRID LAYOUT
   ========================================================================== */

/* ==========================================================================
   GRAMMATICA — INDICE LEZIONI (ISOLATO)
   ========================================================================== */

/* --- Header row --- */

.gi-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
}

/* E' un <h1>: senza margin: 0 il margine di serie del titolo scucirebbe la
   riga (qui dentro e' un contenitore flex allineato al centro, insieme alla
   ricerca e ai filtri). */
.gi-header-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--primary);
    white-space: nowrap;
}

.gi-search {
    flex: 1;
    min-width: 180px;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
}

.gi-search:focus {
    border-color: var(--primary);
}

.gi-filtri-btn {
    padding: 10px 22px;
    border-radius: 8px;
    border: 1px solid var(--primary);
    background: var(--bg-card);
    color: var(--text-main);
    font-family: inherit;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.gi-filtri-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* --- Filter popup --- */

.gi-filtri-wrapper {
    position: relative;
}

.gi-filter-popup {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 18px;
    z-index: 999;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.gi-filter-popup.open {
    display: block;
}

.gi-filter-section {
    margin-bottom: 16px;
}

.gi-filter-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-color);
}

.gi-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gi-chip {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.gi-chip input {
    display: none;
}

.gi-chip span {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-main);
    opacity: 0.6;
    transition: all 0.15s ease;
    cursor: pointer;
}

.gi-chip input:checked + span {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    opacity: 1;
}

.gi-filter-actions {
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.gi-filter-reset {
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.gi-filter-reset:hover {
    background: rgba(128,128,128,0.1);
}

/* --- Level section --- */

.gi-level-section {
    margin-bottom: 10px;
}

.gi-level-title {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    margin-top: 30px;
}

/* --- Category section --- */

.gi-cat-section {
    margin-bottom: 30px;
}

.gi-cat-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 10px;
}

/* --- Lesson grid --- */

.gi-lesson-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* --- Lesson card --- */

.gi-lesson-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 22px 24px;
    text-decoration: none;
    color: var(--text-main);
    transition: border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    min-height: 200px;
    min-width: 0;
    overflow: hidden;
    position: relative;
}

.gi-lesson-card.gi-card--read { opacity: 0.6; }

/* Pulsante-checkbox "già letto" in alto a destra */

.gi-card-read {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    background: transparent;
    color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gi-card-read:hover { border-color: var(--primary); }

.gi-card-read svg { width: 15px; height: 15px; }

.gi-card-read.is-read {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

[data-theme=dark] .gi-lesson-card {
    background: var(--navbar-bg);
}

.gi-lesson-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
}

.gi-card-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
    font-family: "Montserrat", sans-serif;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 32px;
}

/* srs-rank-badge usato dalla grammar index (stile condiviso con vocabulary) */

/* --- Responsive --- */

@media (max-width: 1100px) {
    .gi-lesson-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .gi-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .gi-search {
        width: 100%;
    }

    .gi-filtri-wrapper {
        width: 100%;
    }

    .gi-filtri-btn {
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .gi-filter-popup {
        right: auto;
        left: 0;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 650px) {
    .gi-lesson-grid {
        grid-template-columns: 1fr;
    }

    .gi-cat-section {
        margin-bottom: 24px;
    }

    .gi-level-section {
        margin-bottom: 36px;
    }
}

/* ==========================================================================
   CHARACTERS & RADICALS GRID LAYOUT
   ========================================================================== */

/* Sezione livello: titolo semplice + griglia di card quadrate */

/* Telefono: 3 colonne e card più compatte (con 2 sole colonne le schede
   diventavano altissime e si scorreva all'infinito). */

/* Schermi molto stretti: 2 colonne, ma sempre compatte */

/* ==========================================================================
   CHARS & RADICALS HEADER (STILE DECK EDITOR)
   ========================================================================== */

/* ==========================================================================
   CARATTERI & RADICALI — allineamento alla nuova grafica
   Font Nunito/Outfit (iniettati da ensureLandingFonts) e barra di ricerca
   nello stesso stile dell'indice grammatica. I caratteri CJK non sono
   toccati: usano var(--font-cjk) esplicita.
   ========================================================================== */

/* Popup dettagli: stessa tipografia della sessione (body.srs-page) —
   Outfit sulle etichette e sul significato principale, Nunito per il resto,
   con la stessa spaziatura delle lettere sulle label. */

/* Titolo di livello ("Livello 01") — identico a quello dell'indice grammatica:
   barra verticale nel colore della lingua a sinistra, testo in Outfit. */

/* Barra sticky: vetro come la navbar, agganciata sotto di essa (80px) */

/* Titolo in stile editoriale (niente maiuscoletto spaziato) */

/* Campo di ricerca a pillola, con spazio per l'icona (prima ci finiva sotto) */

/* Pulsante "Studia" a pillola, coerente col resto */

@media (max-width: 768px) {
    .btn-primary-editor {
        padding: 6px 14px;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   CHAR MODAL (POP-UP DETTAGLI)
   ========================================================================== */

/* Adattamenti specifici per il layout review dentro il modal */

/* Scrollbar per la lista esempi nel modal */

/* --------------------------------------------------------------------------
   RESPONSIVE MOBILE (Uniformato a bulk-modal)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   HUB DASHBOARD (Bunpro/WaniKani Style)
   ========================================================================== */

/* Pulsante Ingranaggio Dashboard */

/* Griglia Impostazioni Modale */

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 10px 0;
}

/* Rimuove frecce per Chrome, Safari, Edge, Opera */

/* Compattazione header e box modale */

@media (max-width: 650px) {
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Mobile responsive */

/* ==========================================================================
   NOTIFICHE TOAST
   ========================================================================== */

/* Avvisi: stessa materia delle schede del sito (--bg-card, bordo, ombra),
   con una sola barretta colorata a sinistra a dire com'è andata. Prima era
   un blocco blu ardesia fisso, uguale in tema chiaro e scuro. */

.toast-container {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: min(430px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px 13px 18px;
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    font-family: "Montserrat", sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    animation: slideUpFade 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

/* Barretta di stato: errore di base, verde quando è andata bene */

.toast::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ko);
}

.toast.success::before {
    background: var(--ok);
}

.toast i {
    flex-shrink: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ko);
}

.toast.success i {
    color: var(--ok);
}

.toast span {
    min-width: 0;
    word-break: break-word;
}

@keyframes slideUpFade {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- LANG SELECTOR (hub.html) --- */

/* --- SETTINGS MODAL BACKUP SECTION (hub.html) --- */

/* --- CARD EDITOR (card-editor.html) --- */

/* === PROFILO HUB (hub.html) === */

/* ==========================================================================
   STATISTICHE HUB (hub.html)
   ========================================================================== */

/* Layout righe */

/* Mini card OGGI — stile identico a dash-card */

/* Card base — flex column per allineamento verticale uniforme */

/* Label identica a .dash-label */

/* --- OGGI --- */

/* --- STREAK --- */

/* --- ATTIVITÀ SETTIMANALE --- */

/* --- FORECAST BARS --- */

/* --- LEVEL PROGRESS --- */

/* Responsive statistiche */

/* ── SCHERMI PICCOLI (≤ 480px) ───────────────────────── */

/* --- CARD EDITOR: TRANSLATION BUTTON (Facilmente rimovibile) --- */

/* --- FINE STILI TRADUZIONE --- */

/* Modalita Riconoscimento (Sentence-centric) Bulk Import */

/* ==========================================================================
   YOTEKA LANDING PAGE STYLES
   ========================================================================== */

/* I colori della landing sono ora ereditati dal sistema temi unificato in
   cima al file: per-lingua cambiano solo --primary/--secondary, i neutri sono
   fissi per dark/light e i token (--viola-*, --tag-*, --glow-*) ne derivano. */

/* Stili generali della landing page per evitare di appesantire gli HTML */

html.theme-jp body.landing-page,
html.theme-cn body.landing-page {
  position: relative;
  font-family: 'Nunito', sans-serif;
  background-color: var(--bg-page);
  color: var(--text-main);
  overflow-x: hidden; /* Blocca scorrimento orizzontale spurio */
  transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
              color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page header {
  height: 80px;
  padding: 0 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-nav);
  z-index: 999;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.landing-page .logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text-main);
}

body.landing-page .logo-name {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  font-family: 'Nunito', sans-serif;
}

body.landing-page .yoteka-logo-svg {
  width: 28px;
  height: 28px;
  color: var(--primary);
  transition: color 0.2s ease;
}

/* Luce ambientale: fixed → resta ferma nel viewport e fa da sfondo costante
   su tutta la pagina mentre si scorre (prima era absolute e "compariva"
   solo in un punto del documento). */

/* Luce ambientale: fixed nel viewport (copre tutta la pagina) ma con un
   lento movimento continuo, così è dinamica invece che immobile. */

body.landing-page .glow-ambient-bg {
  position: fixed;
  top: -10%;
  left: -8%;
  width: 60vw;
  height: 60vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle, var(--glow-color-1) 0%, var(--glow-color-2) 45%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  will-change: transform;
  animation: glow-drift-1 26s ease-in-out infinite;
}

body.landing-page .glow-ambient-bg-secondary {
  position: fixed;
  bottom: -12%;
  right: -10%;
  width: 55vw;
  height: 55vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle, var(--glow-color-sec) 0%, transparent 68%);
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  will-change: transform;
  animation: glow-drift-2 34s ease-in-out infinite;
}

/* ── Bagliori spenti in modalità chiara ──────────────────────────────────
   Gli aloni sfocati sono nati per il fondo scuro, dove una macchia di colore
   diffusa dà profondità. Su fondo chiaro diventano una velatura sporca.
   Qui spariscono del tutto: le due macchie ambientali della landing e
   l'alone dietro al titolo delle lezioni.
   ATTENZIONE al selettore: `data-theme` sta su <html>, quindi va scritto
   `html[data-theme="light"] body...` e non `body ... [data-theme="light"]`. */

html[data-theme="light"] body.landing-page .glow-ambient-bg,
html[data-theme="light"] body.landing-page .glow-ambient-bg-secondary {
  display: none;
}

html[data-theme="light"] body.landing-page .lesson-banner::before {
  content: none;
}

@keyframes glow-drift-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(9vw, 7vh) scale(1.12); }
  66%  { transform: translate(4vw, -5vh) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Sul telefono gli aloni si muovono di poco: bastano pochi punti percentuali
   per non farli sembrare disegnati sul fondo, e costano molto meno di uno
   spostamento ampio (sono macchie enormi e sfocate: ogni pixel di movimento
   il telefono lo ridisegna). */

@keyframes glow-drift-piccolo-1 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4vw, 3vh) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes glow-drift-piccolo-2 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-4vw, -3vh) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes glow-drift-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-8vw, -6vh) scale(1.1); }
  66%  { transform: translate(-3vw, 5vh) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Rispetta chi preferisce meno animazioni */

@media (prefers-reduced-motion: reduce) {
    body.landing-page .glow-ambient-bg,
body.landing-page .glow-ambient-bg-secondary {
    animation: none;
  }
}

body.landing-page .nav-links {
  display: flex;
  gap: 25px;
  list-style: none;
  align-items: center;
}

body.landing-page .nav-links a.nav-item {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

body.landing-page .nav-links a.nav-item:hover {
  color: var(--text-main);
}

body.landing-page .btn-login-nav {
  background: transparent;
  border: 1.5px solid var(--primary);
  padding: 4px 20px;
  border-radius: 30px;
  color: var(--text-main) !important;
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none;
}

body.landing-page .btn-login-nav:hover {
  background: var(--btn-sub-hover);
}

body.landing-page .btn-reg-nav {
  background: var(--primary);
  border: none;
  padding: 4px 20px;
  border-radius: 30px;
  color: #FFFFFF !important;
  font-size: 0.9rem;
  transition: opacity 0.3s;
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}

body.landing-page .btn-reg-nav:hover {
  opacity: 0.9;
}

body.landing-page .theme-toggle-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 300;
  font-size: 1.2rem;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page .theme-toggle-btn:hover {
  border-color: var(--primary);
}

body.landing-page h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1px;
  margin-bottom: 25px;
  color: var(--text-main);
}

/* `:not(.active)` è necessario: questo selettore è più specifico di
   `.journey-time-btn.active`, quindi senza l'esclusione cancellerebbe lo
   sfondo pieno del pulsante attivo lasciando il testo bianco su chiaro. */

/* responsive queries */

@media (max-width: 768px) {
    body.landing-page header {
    padding: 0 5%;
    height: 70px;
  }

    body.landing-page header .nav-item {
    display: none;
  }

/* La pagina lezione è landing-page ma usa la premium-nav: la navbar deve essere
     identica al resto del sito interno. Neutralizziamo qui le regole navbar delle
     landing che altrimenti si applicherebbero sopra (link nascosti, gap, ecc.). */

    body.landing-page header .premium-nav .nav-item {
    display: inline-flex;
  }

    body.landing-page header .premium-nav .nav-links {
    gap: 26px;
  }

    body.landing-page header .btn-reg-nav,
body.landing-page header .btn-login-nav {
    display: none;
  }

/* Nella premium-nav i due pulsanti fanno parte del menu a tendina mobile */

    body.landing-page header .premium-nav .btn-reg-nav,
body.landing-page header .premium-nav .btn-login-nav {
    display: inline-flex;
  }

    body.landing-page .nav-links {
    gap: 0;
  }

    body.landing-page h1 {
    line-height: 1.1;
  }

/* I due aloni ambientali restano accesi anche sul telefono: al buio sono
     quelli che danno profondità al fondo, e senza la pagina diventa piatta.
     (In modalità chiara spariscono comunque, per la regola più in alto.)

     Sullo schermo piccolo però si vedevano appena: le misure sono in vw,
     quindi rimpicciolivano insieme allo schermo, e con 100px di sfocatura su
     225px di macchia il colore si perdeva. Qui diventano quasi larghe quanto
     lo schermo, con meno sfocatura e il colore che arriva più lontano prima di
     spegnersi. Il movimento è quello ridotto: si accorge l'occhio, non la
     batteria. */

    body.landing-page .glow-ambient-bg {
    width: 96vw;
    height: 96vw;
    max-width: none;
    max-height: none;
    filter: blur(70px);
    background: radial-gradient(circle, var(--glow-color-1) 0%, var(--glow-color-2) 52%, transparent 76%);
    animation: glow-drift-piccolo-1 30s ease-in-out infinite;
  }

    body.landing-page .glow-ambient-bg-secondary {
    width: 92vw;
    height: 92vw;
    max-width: none;
    max-height: none;
    filter: blur(75px);
    background: radial-gradient(circle, var(--glow-color-sec) 0%, transparent 74%);
    animation: glow-drift-piccolo-2 36s ease-in-out infinite;
  }
}

@media (max-width: 576px) {
    body.landing-page h1 {
    font-size: 1.9rem;
  }
}

/* ==========================================================================
   NAVBAR PREMIUM — pagine interne con lo stile della landing page.
   Riusa i pulsanti/funzioni esistenti (dropdown Caratteri, selettore lingua,
   impostazioni, segnala errore, tema) ma con l'aspetto della landing.
   ========================================================================== */

/* Identica all'header della landing (body.landing-page header):
   sticky in cima, sfondo semitrasparente sfocato → il contenuto si sfoca
   sotto la barra quando si scorre. */

/* Lo sticky va sull'<header> (figlio diretto del body, alto quanto la pagina),
   non sulla barra: così resta agganciato in cima mentre scorri e il contenuto
   si sfoca sotto. Identico al comportamento della landing. */

body:not(.landing-page) > header:has(.premium-nav) {
    position: sticky;
    top: 0;
    z-index: 999;
    display: block;
    background: none;
    padding: 0;
    margin: 0;
    height: auto;
    overflow: visible;
}

.premium-nav {
    height: 80px;
    border-radius: 0;
    background: var(--bg-nav);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-nav);
    padding: 0 var(--side-margin);
    gap: 24px;
    font-family: 'Nunito', sans-serif;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.premium-nav .nav-item,
.premium-nav .theme-toggle-btn {
    font-family: 'Nunito', sans-serif;
}

.premium-nav .logo-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-main);
    flex-shrink: 0;
}

.premium-nav .logo-name {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    font-family: 'Nunito', sans-serif;
}

.premium-nav .yoteka-logo-svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
    transition: color 0.2s ease;
}

.premium-nav .nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.premium-nav .nav-links > li {
    display: flex;
    align-items: center;
    margin: 0;
}

.premium-nav .nav-item {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    transition: color 0.25s ease;
}

.premium-nav .nav-item:hover { color: var(--text-main); }

.premium-nav .theme-toggle-btn {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    font-family: inherit;
    padding: 0;
    transition: all 0.25s ease;
}

.premium-nav .theme-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.premium-nav .nav-warn-btn { cursor: default; }

/* I tre pulsanti azione restano vicini tra loro (gap ridotto rispetto ai link) */

.premium-nav .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Pulsanti Accedi / Registrati (pagine pubbliche) — identici alla landing */

.premium-nav .btn-login-nav {
    background: transparent;
    border: 1.5px solid var(--primary);
    padding: 7px 22px;
    border-radius: 30px;
    color: var(--text-main) !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    transition: all 0.3s;
}

.premium-nav .btn-login-nav:hover { background: var(--btn-sub-hover); }

.premium-nav .btn-reg-nav {
    background: var(--primary);
    border: none;
    padding: 8px 24px;
    border-radius: 30px;
    color: #fff !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    transition: opacity 0.3s;
}

.premium-nav .btn-reg-nav:hover { opacity: 0.9; }

/* ── MOBILE: menu a tutta pagina (struttura come la vecchia navbar) ──
   Soglia a 900px e non 768: la navbar estesa (logo + 4 voci + lingua + 3
   comandi) ha bisogno di circa 860px, sotto i quali sbordava dallo schermo
   e la pagina scorreva in orizzontale. */

@media (max-width: 900px) {
/* Il panino serve anche fra 769 e 900px, dove prima non compariva */

    .premium-nav .menu-toggle {
        display: flex;
    }

    .premium-nav {
        padding: 0 20px;
    }

/* La barra mantiene l'effetto vetro (dal desktop). Lo togliamo SOLO mentre il
       menu è aperto: il backdrop-filter crea un containing block che intrappolerebbe
       l'overlay fixed dentro la navbar. A menu aperto l'overlay opaco copre la barra,
       quindi la perdita del vetro non si vede. */

    body.nav-open .premium-nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .premium-nav .menu-toggle .bar { background: var(--text-main); }

    .premium-nav .nav-links {
        position: fixed;
        inset: 0;
        background: var(--bg-page);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 26px;
        padding: 80px 20px;
        z-index: 9998;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .premium-nav .nav-links.active {
        opacity: 1;
        pointer-events: all;
    }

    .premium-nav .nav-links > li { margin: 0; }

    .premium-nav .btn-login-nav,
.premium-nav .btn-reg-nav { padding: 12px 34px; }

    .premium-nav .nav-actions { gap: 16px; margin-top: 6px; }

    .premium-nav .theme-toggle-btn { width: 46px; height: 46px; }

    .premium-nav .logo-wrap { z-index: 9999; position: relative; }

    .premium-nav .menu-toggle { z-index: 9999; position: relative; }
}

/* ==========================================================================
   STILI PREMIUM PER LE LEZIONI DI GRAMMATICA (YOTEKA LESSON)
   ========================================================================== */

/* Azzeramento del doppio sfondo dell'header se contiene la navbar premium */

body.landing-page > header:has(.premium-nav) {
  background: none;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  height: auto;
}

/* Layout principale */

body.landing-page .lesson-main {
  margin: 40px var(--side-margin) 60px;
  position: relative;
  z-index: 2;
}

/* Banner / Testata della lezione */

body.landing-page .lesson-banner {
  background: transparent;
  height: auto;
  min-height: auto;
  padding: 50px 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;       /* Centrato! */
  justify-content: center;   /* Centrato! */
  text-align: center;        /* Centrato! */
  color: var(--text-main);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 40px;
  position: relative;
  box-sizing: border-box;
}

/* Alone luminoso soft centrato ed ingrandito dietro il titolo (glow).

   La larghezza non è più 1600px fissi. La testata è larga quanto la pagina
   meno i margini laterali, quindi `100% + 2 × margine` è esattamente la
   finestra: l'alone arriva ai due bordi e non oltre. Con i 1600px fissi
   sporgeva, e la pagina si poteva scorrere di lato di un centinaio di pixel.
   I 1600px restano come tetto per gli schermi molto larghi.

   Le altre strade non funzionavano: tagliare l'eccesso sulla testata mangiava
   un pezzo di alone ancora visibile (la testata è più stretta dello schermo),
   e tagliarlo sul bordo della finestra staccava il riquadro laterale dallo
   scorrimento — provate e misurate tutt'e tre. */

body.landing-page .lesson-banner::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centrato! */
  width: min(1600px, calc(100% + 2 * var(--side-margin)));
  height: 500px;                     /* Ingrandito! */
  background: radial-gradient(circle, var(--glow-color-1) 0%, rgba(15, 16, 19, 0) 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
}

body.landing-page #lesson-title {
  font-family: 'Outfit', sans-serif;
  font-size: 4rem;
  font-weight: 600;
  text-align: center; /* Centrato! */
  line-height: 1.2;
  margin-top: 0;
  color: var(--text-main);
  letter-spacing: -0.5px;
  max-width: 800px;
}

/* Griglia e Contenuto */

body.landing-page .lesson-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 50px;
}

body.landing-page .content-center {
  font-family: 'Nunito', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-muted);
}

/* Nuovo stile per il titolo H2 (Bordo sinistro e nessun bordo inferiore) */

body.landing-page .content-center h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
  margin: 60px 0 20px;
  padding-left: 14px;
  border-left: 4px solid var(--primary);
  border-bottom: none;
  line-height: 1.25;
  letter-spacing: -0.3px;
  text-transform: none;
}

body.landing-page .content-center h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 40px 0 12px;
  text-transform: none;
}

body.landing-page .content-center p {
  margin-bottom: 20px;
  color: var(--text-muted);
}

body.landing-page .content-center strong {
  color: var(--text-main);
  font-weight: 700;
}

/* Liste ed Elementi Note */

body.landing-page .content-center ul {
  margin-bottom: 20px;
}

body.landing-page .content-center ul li:not(:only-child) {
  margin-left: 20px;
  margin-bottom: 12px;
  color: var(--text-muted);
  list-style: none;
  position: relative;
  padding-left: 5px;
}

body.landing-page .content-center ul li:not(:only-child)::before {
  content: "•";
  color: var(--primary);
  font-weight: bold;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 1.2rem;
  vertical-align: middle;
}

/* Box info / Nota (li:only-child) */

body.landing-page .content-center ul li:only-child {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary);
  padding: 20px 24px;
  margin: 25px 0;
  border-radius: 8px;
  color: var(--text-main);
  line-height: 1.7;
}

body.landing-page .content-center ul li:only-child::before {
  content: "\f0eb";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 10px;
  color: var(--accent-text);
  font-size: 1.1rem;
  font-style: normal;
}

/* Nota "Attenzione" (pagine lezione): il primary (bordo + icona) diventa giallo */

body.landing-page .content-center ul li:only-child.nota-attenzione {
  border-left-color: var(--warn);
}

body.landing-page .content-center ul li:only-child.nota-attenzione::before {
  color: var(--warn);
}

/* Nota "Curiosita'": stesso riquadro, bordo e lampadina arancioni */

body.landing-page .content-center ul li:only-child.nota-curiosita {
  border-left-color: var(--curio);
}

body.landing-page .content-center ul li:only-child.nota-curiosita::before {
  color: var(--curio);
}


/* Box Esempi pratici (Nuovo stile minimalista ed ordinato a bordo completo) */

body.landing-page .example-box {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 8px 24px;
  margin: 0px 0 20px;
  border-radius: 10px;
}

body.landing-page .example-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.landing-page .example-box li {
  padding: 12px 0;
  margin: 0 !important;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main) !important;
  font-size: 1rem;
  list-style: none !important;
}

body.landing-page .example-box li::before {
  display: none !important;
}

body.landing-page .example-box li:last-child {
  border-bottom: none;
}

/* Box della Struttura Grammaticale (.example) — "formula in evidenza":
   barra colorata a sinistra, etichetta piccola, formula grande su fascia
   tinta col primario, significato sotto. In primo piano per tipografia. */

/* Un solo rettangolo tinto col colore della lingua: dentro la formula e,
   sotto, il significato. Nessun contenitore esterno. */

body.landing-page .example {
  position: relative;
  display: block;
  border: 1px solid rgba(var(--primary-rgb));
  border-radius: 12px;
  padding: 25px 22px;
  margin: 25px 0 15px;
  text-align: center;
  box-shadow: none;
}

/* Nessuna etichetta: il contenuto del box parla da sé */

body.landing-page .example::before {
  content: none;
}

/* Il vecchio badge sospeso non serve più */

body.landing-page .example::after {
  content: none;
}

/* La formula: protagonista */

body.landing-page .example .structure {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--text-main) !important;
  text-align: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 8px;
}

body.landing-page .example .structure strong {
  color: var(--accent-text) !important;
}

/* Il significato, sotto la formula, nello stesso rettangolo */

body.landing-page .example .meaning {
  font-size: 0.98rem;
  color: var(--text-muted);
  font-weight: 400;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* ── Carosello delle strutture alternative (stesso box) ── */

body.landing-page .example .ex-slide {
  display: none;
}

body.landing-page .example .ex-slide.is-active {
  display: block;
  animation: ex-slide-in 0.25s ease;
}

@keyframes ex-slide-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

body.landing-page .example .ex-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

body.landing-page .example .ex-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;  background: transparent;
  color: var(--text-main);
  font-size: 1.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px 7px;
  font-family: 'Outfit', sans-serif;
  transition: background 0.2s ease, border-color 0.2s ease;
    border: 1px solid var(--border-color);

}

body.landing-page .example .ex-arrow:hover {
  color: rgba(var(--primary-rgb));
  border-color: var(--primary-rgb);
}

body.landing-page .example .ex-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.landing-page .example .ex-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
}

body.landing-page .example .ex-dot.is-active {
  width: 18px;
  border-radius: 4px;
  background: var(--text-main);
}

@media (prefers-reduced-motion: reduce) {
    body.landing-page .example .ex-slide.is-active { animation: none; }
}

/* L'ultimo elemento del testo si porta dietro il suo margine di distacco, e
   quel margine allunga la colonna oltre il riquadro che si vede. Siccome il
   riquadro di destra è agganciato allo scorrimento e si stacca quando finisce
   la colonna, si staccava una ventina di pixel più in basso dell'ultimo
   riquadro di sinistra: qui il margine di coda viene tolto, così le due
   colonne finiscono sulla stessa riga. */

/* Il margine va tolto anche all'ultima voce dentro all'ultimo elenco: essendo
   dichiarato `!important` altrove, e non essendoci bordi o riempimenti che lo
   trattengano, scavalca l'elenco e spinge in basso il fondo della colonna. */

body.landing-page .content-center > :last-child,
body.landing-page #lesson-content > :last-child,
body.landing-page #lesson-content > :last-child > :last-child {
  margin-bottom: 0 !important;
}

/* Sidebar Lezione */

body.landing-page .sidebar {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  position: sticky;
  top: 100px;
  height: auto;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  box-sizing: border-box;
}

body.landing-page .sidebar-box {
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
}

body.landing-page .sidebar-box:first-child {
  border-top: none;
  padding-top: 0;
}

body.landing-page .sidebar-box h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-main);
  text-transform:capitalize;
  border-bottom: none;
  margin-bottom: 14px;
  display: block;
}

body.landing-page .sidebar-box p {
  color: var(--text-muted);
  margin-bottom: 8px;
}

body.landing-page .sidebar-box p strong {
  color: var(--text-main);
}

/* Indice dei Contenuti (TOC) */

body.landing-page .toc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.landing-page .toc-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.landing-page .toc-list li::before {
  display: none !important;
}

body.landing-page .toc-list a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
  display: block;
}

body.landing-page .toc-list a:hover {
  color: var(--primary);
  border-left-color: var(--primary);
  background-color: var(--tag-bg);
  border-radius: 0 4px 4px 0;
}

/* Vedi anche (Correlati) */

/* Floating Back Button */

body.landing-page .floating-back-btn {
  background-color: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}

body.landing-page .floating-back-btn:hover {
  background-color: var(--primary);
  color: #FFFFFF !important;
  border-color: var(--primary);
  transform: scale(1.05);
}

/* Responsive Lezione */

@media (max-width: 992px) {
    body.landing-page .lesson-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

    body.landing-page .sidebar {
    position: static;
    max-height: none;
    height: auto;
    margin-top: 20px;
  }

    body.landing-page .lesson-main {
    margin: 30px 5% 50px;
  }
}

@media (max-width: 768px) {
    body.landing-page #lesson-title {
    font-size: 2.2rem;
  }

    body.landing-page .lesson-banner {
    padding: 30px 0 15px;
  }

    body.landing-page .lesson-banner::before {
    width: 300px;
    height: 1000px;
  }

    body.landing-page .example {
    padding: 16px 18px;
  }

    body.landing-page .example .structure {
    max-width: 100%;
    font-size: 1.25rem;
  }

    body.landing-page .content-center h2 {
    margin: 50px 0 20px;
  }

    body.landing-page .content-center h3 {
    font-size: 1.15rem;
  }

    body.landing-page .example .meaning {
    line-height: 1.4;
  }
}

@media (max-width: 576px) {
    body.landing-page .lesson-main {
    margin: 20px 4% 40px;
  }

    body.landing-page .example {
    padding: 14px 16px;
    margin: 15px 0;
  }

    body.landing-page .example .structure {
    font-size: 1.12rem;
  }

    body.landing-page .example-box {
    padding: 6px 16px;
  }

    body.landing-page .floating-back-btn {
    width: 44px;
    height: 44px;
    bottom: 20px;
    left: 15px;
  }
}

/* ==========================================================================
   STILI PREMIUM PER L'INDICE DELLE LEZIONI (YOTEKA GRAMMAR INDEX)
   ========================================================================== */

/* Spaziature principali — l'indice grammatica non ha margine in alto:
   la barra sticky si aggancia direttamente sotto la navbar. */

/* --gi-side è il margine laterale dell'indice: lo usano SIA il contenitore SIA
   la barra sticky (con margini negativi) per uscire dai lati. Devono combaciare
   esattamente, altrimenti compare uno scorrimento orizzontale di pochi pixel.
   Per questo è un valore in px, mai una percentuale. */

body.landing-page .lesson-main:has(#grammar-container) {
  --gi-side: var(--side-margin);
  margin-top: 0;
  margin-left: var(--gi-side);
  margin-right: var(--gi-side);
}

@media (max-width: 992px) {
    body.landing-page .lesson-main:has(#grammar-container) { --gi-side: 40px; }
}

@media (max-width: 768px) {
    body.landing-page .lesson-main:has(#grammar-container) { --gi-side: 20px; }
}

@media (max-width: 600px) {
    body.landing-page .lesson-main:has(#grammar-container) { --gi-side: 16px; }
}

/* Header di ricerca e filtri */

body.landing-page .gi-header {
  display: flex;
  align-items: center;
  gap: 20px;
  /* Verticale simmetrico; orizzontale = allinea alle card.
     I margini negativi la fanno uscire dai lati del contenitore così lo
     sfondo copre tutta la larghezza dello schermo. */
  padding: 20px var(--gi-side);
  margin: 0 calc(-1 * var(--gi-side));
  border-bottom: 1px solid var(--border-nav);
  box-sizing: border-box;
  position: sticky;                /* resta fissa in alto durante lo scroll */
  top: 80px;                       /* si aggancia subito sotto la navbar (h 80px) */
  z-index: 50;
  /* Stesso effetto vetrato della navbar */
  background: var(--bg-nav);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.landing-page .gi-header-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: none;
  color: var(--text-main);
  line-height: 1.2;
  /* Il margine va azzerato DI NUOVO qui, anche se .gi-header-title lo fa gia'
     piu' su: da quando il titolo e' un <h1>, `body.landing-page h1` gli passa
     un margin-bottom di 25px, ed e' piu' forte del solo nome di classe.
     Con quel margine il titolo scendeva di 12 px rispetto alla ricerca. */
  margin: 0;
}

/* Parola evidenziata nel titolo, come in "Lista Radicali" */

body.landing-page .gi-header-title .highlight-h1 {
  color: var(--primary);
  font-weight: inherit;
}

/* Barra di ricerca premium */

body.landing-page .gi-search {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 12px 20px;
  border-radius: 30px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.95rem;
  transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page .gi-search::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

body.landing-page .gi-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

/* Pulsante filtri */

/* `inline-flex` e non `inline-block`: l'icona è un SVG in linea (lo scrive
   lezioni.js) e, lasciata sulla riga di base come una lettera, stava con il
   piede sulla base del testo e il centro tre pixel sopra quello di "Filtri".
   Nel flex icona e scritta si centrano fra loro; lo spazio fra le due lo fa il
   `gap`, quindi lo spazio bianco che c'è nel markup non conta. */
body.landing-page .gi-filtri-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-main);
  padding: 12px 24px;
  border-radius: 30px;
  font-family: 'Nunito', sans-serif;
  text-transform: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.25s ease;
}

body.landing-page .gi-filtri-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

body.landing-page .gi-filtri-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
}

/* Popup filtri */

body.landing-page .gi-filter-popup {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3), var(--card-shadow);
  top: calc(100% + 12px);
  min-width: 280px;
}

body.landing-page .gi-filter-label {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}

/* Chip per la selezione del livello e dello stato */

body.landing-page .gi-chip span {
  font-family: 'Nunito', sans-serif;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  opacity: 0.8;
  transition: all 0.2s ease;
}

body.landing-page .gi-chip span:hover {
  color: var(--text-main);
  border-color: var(--primary);
}

body.landing-page .gi-chip input:checked + span {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #FFFFFF !important;
  opacity: 1;
}

body.landing-page .gi-filter-reset {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-text);
  padding: 6px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

body.landing-page .gi-filter-reset:hover {
  background: rgba(var(--primary-rgb), 0.08);
}

body.landing-page .gi-filter-actions {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

/* Intestazione di livello (es: "N5 · JLPT") — stile editoriale con linea sotto */

body.landing-page .gi-level-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  position: relative;
  margin-top: 30px;
  margin-bottom: 20px;
  border-left: 3px solid var(--primary);         /* spazio in basso per la linea */
  font-family: 'Outfit', sans-serif;
  line-height: 1;
  /* annulla la vecchia pillola piena della regola base */
  background: transparent;
  border-radius: 0;
  text-transform: none;
}

/* Livello e sigla con un unico stile uniforme */

body.landing-page .gi-level-code,
body.landing-page .gi-level-label {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-main);
  flex-shrink: 0;
}

/* Titoli delle categorie */

body.landing-page .gi-cat-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

body.landing-page .gi-level-section {
  margin-bottom: 20px;
}

/* Fra l'ultima scheda di un livello e il titolo del livello dopo. I margini
   qui intorno si sommano solo in apparenza: quello dell'ultima categoria
   (20), quello della sezione (20) e quello del titolo (30) COLLASSANO in uno
   solo, e restava il più grande, 30px — troppo poco per capire che si
   cambia livello. Il selettore prende solo i titoli dal secondo livello in
   poi: il primo sta sotto la barra di ricerca e va bene com'è. */
body.landing-page .gi-level-section + .gi-level-section .gi-level-title {
  margin-top: 56px;
}

body.landing-page .gi-cat-section {
  margin-bottom: 40px;
}

body.landing-page .gi-cat-section:last-child {
    margin-bottom: 20px;
}

/* Griglia delle card lezioni */

body.landing-page .gi-lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card delle lezioni — layout minimale: titolo + rango */

body.landing-page .gi-lesson-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 22px 24px;
  transition: border-color 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
              box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1),
              opacity 0.25s ease;
  min-height: 0;                 /* spazio tra titolo e badge rango */
  justify-content: space-between;
}

body.landing-page .gi-lesson-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -5px rgba(0, 0, 0, 0.15), var(--card-shadow);
}

body.landing-page .gi-lesson-card.gi-card--read {
  opacity: 0.82;
  border-color: var(--border-color);
}

body.landing-page .gi-lesson-card.gi-card--read .gi-card-title {
  color: var(--text-muted);
}

/* Checkbox circolare per segnare come letto */

body.landing-page .gi-card-read {
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: transparent;
  color: transparent;
  width: 22px;
  height: 22px;
  top: 20px;
  right: 20px;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body.landing-page .gi-card-read:hover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.08);
}

body.landing-page .gi-card-read.is-read {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}

body.landing-page .gi-card-read svg {
  width: 11px;
  height: 11px;
  stroke-width: 4px; /* Rende la spunta più visibile */
}

/* Titolo della card — protagonista, va a capo fino a 2 righe (niente troncamento a 1) */

body.landing-page .gi-card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 5px;
  padding-right: 28px;
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Sottotitolo della card — fino a 3 righe */

body.landing-page .gi-card-subtitle {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}

/* Badge rango della lezione — stessa pillola arrotondata della sessione */

/* Divisore tra sottotitolo e badge */

/* Due caratteristiche sotto il badge: prossima revisione + recuperi */

/* Responsive Index */

@media (max-width: 1200px) {
    body.landing-page .gi-lesson-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
    body.landing-page .gi-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px var(--gi-side);
    top: 80px;                     /* combacia con l'altezza reale della navbar mobile */
  }

    body.landing-page .gi-header-title {
    font-size: 1.5rem;
    text-align: center;
  }

    body.landing-page .gi-search {
    width: 100%;
    font-size: 0.9rem;
    padding: 10px 18px;
  }

    body.landing-page .gi-filtri-wrapper {
    width: 100%;
  }

    body.landing-page .gi-filtri-btn {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 0.9rem;
  }

    body.landing-page .gi-filter-popup {
    left: 0;
    width: 100%;
    box-sizing: border-box;
  }

    body.landing-page .gi-level-title {
    margin-top: 20px;
    margin-bottom: 14px;
  }

    /* Il cambio di livello si vede anche qui, ma con meno aria del computer. */
    body.landing-page .gi-level-section + .gi-level-section .gi-level-title {
    margin-top: 44px;
  }

    body.landing-page .gi-cat-title {
    font-size: 1.3rem;
    margin-bottom: 10px;
  }
}

@media (max-width: 600px) {
    body.landing-page .gi-lesson-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

    body.landing-page .gi-lesson-card {
    min-height: auto;
    padding: 20px;
  }

/* Barra sticky più compatta: titolo su una riga, ricerca + Filtri sulla riga sotto */

    body.landing-page .gi-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 18px var(--gi-side);
  }

    body.landing-page .gi-header-title {
    flex-basis: 100%;
    font-size: 1.5rem;
    text-align: left;
  }

    body.landing-page .gi-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

    body.landing-page .gi-filtri-wrapper {
    width: auto;
    flex-shrink: 0;
  }

    body.landing-page .gi-filtri-btn {
    width: auto;
    padding: 10px 16px;
  }

/* Popup filtri: ancorato al bordo destro, largo al massimo quanto lo schermo */

    body.landing-page .gi-filter-popup {
    left: auto;
    right: 0;
    width: min(280px, calc(100vw - 32px));
    box-sizing: border-box;
  }

/* Tag livello e titoli un filo più piccoli sul telefono */

    body.landing-page .gi-level-code,
body.landing-page .gi-level-label {
    font-size: 1.8rem;
  }

    body.landing-page .gi-card-title {
    font-size: 1.2rem;
  }

    body.landing-page .gi-cat-title {
    font-size: 1.2rem;
  }
}

/* --- Impostazioni: ordine dei tipi nelle sessioni --- */

/* ==========================================================================
   GRAMMATICA — ESERCIZI IN SESSIONE
   Cinque tipi di esercizio dentro session.html. Lo scheletro HTML è fisso
   nella pagina, il JavaScript (js/grammar.js) lo riempie e mostra solo le
   parti che servono al tipo corrente.

   DOVE SI CAMBIANO LE DIMENSIONI DEL TESTO: qui sotto, una regola per elemento.
   In fondo alla sezione ci sono due blocchi che le RIPETONO più piccole, per
   finestre strette (sotto 768px di larghezza) e basse (sotto 660px di altezza).
   Se una modifica non ha effetto, è uno di quei due che sta vincendo.
   ========================================================================== */

/* Area utile: quella fra la top bar e la toolbar. Se il contenuto la supera
   scorre al suo interno invece di finire sotto la toolbar. */

/* Corpo dell'esercizio: occupa lo spazio libero e vi si centra. È il pezzo
   che permette di avere insieme le due cose che servono — esercizio al centro
   e spiegazione in fondo — senza che l'una escluda l'altra. */

/* I margini di serie non contano: le distanze le decidono i blocchi per
   esercizio, in fondo a questa sezione. */

/* ── Badge sopra l'esercizio ─────────────────────────────────────────────── */

/* Stile suo, diverso dai tre badge già usati nella sessione: tinta tenue del
   colore della lingua, testo nello stesso colore, nessun bordo. */

/* ── Frase con il buco ───────────────────────────────────────────────────── */

/* Parola base da coniugare e significato, alla stessa dimensione della frase */

/* ── Opzioni: scelta multipla e vero/falso ───────────────────────────────── */

/* Dopo la risposta le opzioni che non c'entrano si spengono: restano accese
   solo quella scelta e quella giusta. */

/* Vero/falso: pulsanti stretti e tondi, testo italiano quindi font di testo.
   Sotto i 768px vanno uno per riga (regola in fondo alla sezione), quindi
   questa larghezza è anche quella del singolo pulsante: abbassala per
   stringerli. */

/* Devono stare dopo .gr-opt.selected, altrimenti quella li vince */

/* ── Riordino delle parole ───────────────────────────────────────────────── */

/* La riga di composizione è il riquadro dove si posano le parole: mentre
   componi sono riquadri anche loro, a risposta data diventano una frase. */

/* Il riquadro serve a dire "posa qui": appena c'è dentro qualcosa il posto è
   riconoscibile da solo e il bordo se ne va, lasciando la frase. Al suo posto
   si accende il fondo, che resta finché la frase non è completa: è il segno
   che manca ancora qualcosa. */

/* Solo mentre trascini si accende un appoggio, per capire dove cade la parola */

/* A esercizio chiuso il clic serve solo a passare fra la propria frase e
   quella corretta, quindi deve arrivare alla riga e non alla singola parola. */

/* Frase sbagliata: si clicca per vedere quella giusta, e lo si capisce dallo
   stesso segno che porta la soluzione dentro la frase (.gr-fill-toggle). */

/* A risposta data i riquadri lasciano il posto alla frase: le parole si
   accostano e restano solo il testo e il colore. */

/* Segnaposto che indica dove cadrà la parola trascinata */

/* ── Teoria: domanda e risposta ──────────────────────────────────────────── */

/* Stesso riquadro della spiegazione */

/* ── Riscontro dentro l'esercizio ────────────────────────────────────────── */

/* La soluzione inserita nella frase prende il colore dell'esito: verde se la
   risposta era giusta, rosso se sbagliata. */

/* Risposta sbagliata: si clicca per vedere quella corretta e tornare indietro */

/* Esito a parole: compare sempre, ed è l'ultima cosa in fondo */

/* ── Comparsa senza sobbalzi ───────────────────────────────────────────────
   Esito e riquadro della spiegazione occupano il loro spazio fin da subito:
   quando compaiono cambia solo la visibilità, così la parte centrale resta
   ferma invece di ricentrarsi. Se la spiegazione è più lunga dello spazio
   prenotato, da lì in poi l'esercizio si sposta — ma solo per la parte in
   eccesso. La dissolvenza rende l'apparizione meno brusca. */

/* Spazio prenotato per la spiegazione quando resta nel flusso: serve solo
   quando l'area è troppo bassa per contenerla senza spostare l'esercizio. */

/* Quando c'è spazio a sufficienza il riscontro esce dal flusso e si appoggia
   in fondo: così non toglie altezza al corpo e l'esercizio resta esattamente
   al centro dell'area. È `js/grammar.js` a decidere quale dei due casi vale,
   perché dipende da quanto sono alti contenuto e spiegazione — una cosa che
   il CSS da solo non può sapere. */

/* Sta dentro il corpo dell'esercizio, subito sotto la frase: il distacco
   sopra lo stacca dalla risposta. */

/* ── Spiegazione in popup (scelta multipla) ────────────────────────────────
   Con quattro opzioni l'area è già piena: il riquadro nel flusso costringeva
   a scorrere. Qui la spiegazione si apre da un richiamo accanto all'esito. */

/* Nella scelta multipla la spiegazione vive nel popup: il riquadro in fondo
   non serve e non deve nemmeno prenotare spazio, altrimenti l'area continua a
   dover scorrere proprio nel caso che volevamo alleggerire. */

/* ==========================================================================
   GRAMMATICA — DISTANZE, UN BLOCCO PER ESERCIZIO
   Ogni riga è "elemento { distanza sotto }". Cambiare un numero tocca solo
   quell'esercizio. L'ordine è quello in cui gli elementi appaiono a schermo.
   ========================================================================== */

/* ── Scelta multipla ─────────────────────────────────────────────────────── */

/* ── Completamento ───────────────────────────────────────────────────────── */

/* ── Riordino ────────────────────────────────────────────────────────────── */

/* ── Vero o falso ────────────────────────────────────────────────────────── */

/* ── Domanda aperta ──────────────────────────────────────────────────────── */

/* ── Riscontro, uguale per tutti ─────────────────────────────────────────── */

/* ── Schermi stretti: opzioni in colonna e distanze ridotte ──────────────── */

/* ── Finestre basse: testo più compatto, così il contenuto entra ───────────
   ATTENZIONE: qui le dimensioni del testo sono RIPETUTE. Se cambi un corpo qui
   sopra e non vedi effetto, è perché la finestra è più bassa di 660px e vince
   questo blocco: allora il valore va cambiato in tutti e due i posti.
   La soglia è 659px perché l'esercizio più alto (scelta multipla sbagliata)
   occupa 480px e l'area utile è "altezza finestra − 180": sopra i 660px ci sta
   con i corpi normali, sotto no. */

/* ==========================================================================
   GRAMMATICA — AGGIUNTA DELLA LEZIONE ALLO STUDIO
   Riquadro "Info Lezione" nella barra laterale di lesson.html.
   ========================================================================== */

/* ==========================================================================
   HUB — REBRAND (nuova grafica)
   Copertina a tutta larghezza che passa anche dietro la navbar, schede in
   stile nuovo e grafici ridisegnati. Sta in fondo al foglio per vincere sulle
   regole storiche a pari specificità.
   ========================================================================== */

/* Il contenuto parte in cima: la copertina deve toccare la navbar */

/* ── COPERTINA ───────────────────────────────────────────────────────────── */

/* Esce dai margini laterali e risale sotto la navbar (alta 80px), così
   l'immagine occupa tutta la larghezza e prosegue dietro la barra. */

/* Un solo velo, in alto: serve a tenere leggibile la navbar sopra qualsiasi
   foto. In fondo la copertina finisce netta, senza sfumature. */

/* ── NAVBAR SOPRA LA COPERTINA ───────────────────────────────────────────
   In cima alla pagina la barra sparisce e resta solo il velo della
   copertina: niente vetro, niente riquadro. Testo e comandi diventano
   bianchi (in tema chiaro sarebbero scuri su fondo scuro, illeggibili).
   Appena si scorre torna la barra vetrata di sempre. */

/* Riga di identità sopra il fondo della copertina */

/* Foto profilo: stesso ritaglio di prima, cornice adatta alla copertina.
   align-self:flex-end mette il suo bordo inferiore sulla stessa linea del nome. */

/* ── FASCIA SESSIONE ─────────────────────────────────────────────────────
   Un solo pannello largo: anello con il totale di oggi, conteggi e azioni. */

/* Due percorsi distinti: il ripasso resta appena più ampio e prioritario. */

/* Ciambella sopra e legenda sotto, su due colonne: nella colonna del 40%
   affiancarle non ci starebbe e il testo uscirebbe dalla scheda. */

/* ── RIQUADRO CON CARATTERE ──────────────────────────────────────────────
   Segnaposto della colonna destra: 復 per il ripasso, 学 per lo studio. */

/* ── CIAMBELLA PER TIPO + LEGENDA (non in uso: il markup è stato tolto
   dall'hub, si può ripristinare rimettendo svg + ul nella scheda) ────────
   Gli spicchi mostrano quanti elementi ci sono per ciascun tipo, il totale
   sta al centro. Disegnata da dashboard.js. */

:root {
  --tipo-vocaboli:   #7C3AED;
  --tipo-kanji:      #22C1C3;
  --tipo-radicali:   #F59E0B;
  --tipo-grammatica: #EC4899;
}


/* ==========================================================================
   STILI DELLA SOLA VERSIONE ONLINE
   --------------------------------------------------------------------------
   Da qui in giù ci sono le regole che valgono solo per il sito pubblicato e
   che nel laboratorio non esistono. Stanno in fondo apposta: a parità di
   forza, in CSS vince l'ultima scritta, quindi quello che c'è qui sotto
   corregge tutto quello che sta sopra.

   Se scrivi una regola nuova che deve valere solo online, mettila qui e non
   più su, così resta chiaro quali sono le differenze rispetto al laboratorio.
   ========================================================================== */


/* --- ICONA DELLE NOTE (lampadina) --------------------------------------
   style.css disegna la lampadina dei riquadri-nota con un carattere del font
   Font Awesome. Quel font pesa quasi mezzo megabyte e su queste tre pagine
   servirebbe per una sola icona: senza di lui al suo posto comparirebbe un
   quadratino vuoto. Qui la stessa lampadina è disegnata a mano e colorata con
   il colore che il foglio principale assegna all'icona (compreso il giallo
   delle note "Attenzione"), così non cambia nulla a vedersi. */
.content-center ul li:only-child::before,
body.landing-page .content-center ul li:only-child::before {
    content: "";
    display: inline-block;
    width: 1.05em;
    height: 1.05em;
    vertical-align: -0.18em;
    background-color: currentColor;
    -webkit-mask: var(--ic-lampadina) no-repeat center / contain;
    mask: var(--ic-lampadina) no-repeat center / contain;
}

:root {
    --ic-lampadina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3Cpath d='M15.09 14c.18-.98.65-1.74 1.41-2.5A4.65 4.65 0 0 0 18 8 6 6 0 0 0 6 8c0 1 .23 2.23 1.5 3.5A4.61 4.61 0 0 1 8.91 14'/%3E%3C/svg%3E");
}


/* --- CARATTERI GIAPPONESI NEI TITOLI E NEI TESTI -------------------------
   Outfit, Nunito e Montserrat sono font latini: non contengono i caratteri
   giapponesi. Dove il testo li mescola — e nei titoli delle lezioni succede
   sempre — il browser prende la parte latina dal font giusto e per il
   giapponese ripiega su un font di sistema qualsiasi, che stona con il resto.

   Basta chiudere ogni pila di font con var(--font-cjk), cioè Noto Sans JP:
   il browser sceglie font per font, carattere per carattere, quindi il latino
   resta com'è e il giapponese prende il font che il sito usa già altrove.
   (La variabile passa da sola al cinese quando la pagina dichiara data-lang="cn".) */
body.landing-page #lesson-title,
body.landing-page .content-center h2,
body.landing-page .content-center h3,
body.landing-page .example .structure,
body.landing-page .gi-card-title {
    font-family: 'Outfit', var(--font-cjk);
}

body.landing-page .content-center,
body.landing-page .gi-card-subtitle {
    font-family: 'Nunito', var(--font-cjk);
}

/* Le voci dell'indice riprendono i titoli delle sezioni, giapponese compreso;
   il font latino qui è quello di base della pagina. */
body.landing-page .toc-list a {
    font-family: 'Montserrat', var(--font-cjk);
}


/* --- PIÈ DI PAGINA ------------------------------------------------------
   Stesso vetro smerigliato della barra in alto: stesso colore di fondo, stessa
   sfocatura, e la riga di separazione sopra invece che sotto. Sparisce anche
   l'alone viola che saliva dal basso, che la barra in alto non ha. */
footer {
    background-color: var(--bg-nav);
    border-top: 1px solid var(--border-nav);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

footer::before {
    display: none;
}


/* --- PAGINA DI BENVENUTO ------------------------------------------------
   La scritta occupa tutto lo schermo sotto la barra in alto (alta 80px a ogni
   dimensione): aprendo il sito si vede solo lei, il piè di pagina arriva
   scorrendo. `dvh` invece di `vh` perché sui telefoni l'altezza utile cambia
   quando la barra degli indirizzi si ritira: con `vh` la scritta finirebbe
   leggermente fuori schermo. */
.benvenuto {
    min-height: calc(100vh - 80px);
    min-height: calc(100dvh - 80px);
    display: flex;
    flex-direction: column;   /* il testo va SOTTO il titolo, non di fianco */
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    position: relative;
    z-index: 2;
}

.benvenuto h1 {
    font-family: 'Outfit', 'Nunito', sans-serif;
    font-weight: 800;
    color: var(--text-main);
    text-align: center;
    font-size: 3.2rem !important;
    margin: 0 0 32px;
    letter-spacing: -0.02em;
}
/* --- SCHEDE DELL'ELENCO LEZIONI ----------------------------------------
   Senza account non ci sono ripassi da mostrare: le schede hanno solo titolo
   e sottotitolo. Il margine sotto il sottotitolo serviva a staccarlo dal grado
   SRS, che qui non c'è: senza, la scheda si chiude subito dopo il testo. */
body.landing-page .gi-card-subtitle {
    margin-bottom: 0;
}


/* --- STATO CONNESSO NELLA BARRA IN ALTO --------------------------------
   Quando l'utente è connesso, la voce "Accedi" diventa nome utente + Esci. */
#nav-auth {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
/* L'attributo `hidden` deve vincere sul `display` delle regole qui sotto:
   senza questo, il pulsante impostazioni resterebbe visibile da scollegato e i
   pulsanti Registrati/Accedi resterebbero visibili da connesso. */
#nav-auth[hidden],
.theme-toggle-btn[hidden],
.notif-btn[hidden],
.notif-wrap[hidden] {
    display: none !important;
}


/* --- CAMPANELLA NOTIZIE / AVVISI ---------------------------------------
   Pulsante rotondo nella barra in alto; al clic apre un popup ancorato sotto. */
.notif-wrap {
    position: relative;
    display: inline-flex;
}
.notif-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}
.notif-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.notif-popup {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 350px;
    max-width: 78vw;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    z-index: 200;
}
.notif-head {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--text-main);
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}
.notif-body { padding: 22px 16px; }
.notif-empty {
    margin: 0;
    text-align: center;
    color: var(--text-muted);
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
}


/* --- FINESTRELLE (voto stelle e segnalazione) ---------------------------
   Stesso guscio per entrambe: velo scuro e riquadro al centro. */
.voto-overlay,
.segnala-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.voto-box,
.segnala-box {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 18px 26px 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
}

/* La crocetta in alto a destra della finestrella. Il riquadro le fa da
   riferimento (`position: relative`), altrimenti si aggancerebbe alla pagina. */
.voto-box,
.segnala-box { position: relative; }

.voto-chiudi-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s, color .15s;
}

.voto-chiudi-x:hover {
    background: rgba(var(--primary-rgb), 0.10);
    color: var(--text-main);
}

.voto-chiudi-x svg {
    width: 18px;
    height: 18px;
    display: block;
}

.voto-titolo,
.segnala-titolo {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.8rem;
    color: var(--text-main);
    margin: 0 0;
}
.voto-domanda {
    font-family: 'Nunito', sans-serif;
    font-size: .92rem;
    color: var(--text-muted);
    margin: 10px 0 2px;
}

/* --- Le cinque stelle --- */
.voto-stelle {
    display: flex;
    justify-content: center;
}

.voto-stella {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    line-height: 0;
}

.voto-stella svg {
    width: 40px;
    height: 40px;
    fill: var(--border-color);
    transition: fill .12s ease, transform .12s ease;
}

.voto-stella:hover svg { transform: scale(1.12); }
.voto-stella.is-piena svg { fill: rgba(var(--primary-rgb)); }
.voto-stella:disabled { cursor: default; }

.voto-salta,
.segnala-annulla {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: .9rem;
    color: var(--text-muted);
}

.voto-salta:hover,
.segnala-annulla:hover { color: var(--text-main); text-decoration:underline}

/* --- Segnalazione --- */
.segnala-box { text-align: left; max-width: 460px; }

.segnala-testo {
    font-family: 'Nunito', sans-serif;
    font-size: .93rem;
    color: var(--text-muted);
    margin: 10px 0 18px;
    line-height: 1.5;
}

.segnala-area {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-page);
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-size: .95rem;
    line-height: 1.5;
    resize: vertical;
}

.segnala-area:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.segnala-azioni {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* Nella finestrella per chi non ha l'account i due pulsanti stanno a sinistra,
   sotto al testo, che è allineato a sinistra anche lui. */
.segnala-azioni--sinistra { justify-content: flex-start; gap: 14px; }

.segnala-invia {
    border: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--primary);
    color: #fff;
    padding: 4px 20px;
    border-radius: 30px;
    transition: filter .15s;
}

.segnala-invia:hover { filter: brightness(1.08); }
.segnala-invia:disabled { opacity: .5; cursor: default; }

/* Il triangolo di segnalazione è cliccabile (nella wip era solo decorativo) */
.premium-nav .nav-warn-btn { cursor: pointer; }


/* --- AVVISI DENTRO LA CAMPANELLA ---------------------------------------- */
.notif-body .avviso {
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.notif-body .avviso:first-child { padding-top: 0; }
.notif-body .avviso:last-child { border-bottom: none; padding-bottom: 0; }

.avviso-titolo {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-main);
    text-decoration: none;
}

a.avviso-titolo:hover { color: var(--primary); text-decoration: underline; }

.avviso-testo {
    font-family: 'Nunito', sans-serif;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 4px 0;
}

.avviso-quando {
    font-family: 'Nunito', sans-serif;
    font-size: .76rem;
    color: var(--text-muted);
    opacity: .7;
}

/* Pallino rosso quando c'è qualcosa che non si è ancora aperto */
.notif-btn.ha-novita { position: relative; }

.notif-btn.ha-novita::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e11d48;
    border: 2px solid var(--bg-card);
}


/* --- COMMENTI: rientro delle risposte -----------------------------------
   Il rientro è lo stesso a ogni livello (sta in style.css, `--rientro`): un
   gradino uguale per tutti, come su Reddit. Il caso speciale che dimezzava il
   rientro dal secondo livello in giù è stato tolto, perché faceva scalini di
   misura diversa. */


/* --- COMMENTI CHIUSI A CHI NON HA UN ACCOUNT ----------------------------
   Sotto il velo ci sono solo sagome finte: i commenti veri non vengono
   nemmeno chiesti al server. */
.commenti-bloccati { position: relative; }

.commenti-bloccati .commenti-lista {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}

.commento-finto {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 15px;
    margin-bottom: 26px;
}

.finto-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-secondary);
}

.finto-corpo { display: flex; flex-direction: column; gap: 9px; padding-top: 8px; }

.finto-riga {
    height: 11px;
    border-radius: 6px;
    background: var(--bg-secondary);
    width: 70%;
}

.finto-riga--nome { width: 130px; height: 14px; }

.commenti-velo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.commenti-velo-box {
    text-align: center;
    max-width: 520px;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 26px 28px;
}

.commenti-velo-box h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--text-main);
    margin: 0 0 8px;
}

.commenti-velo-box p {
    font-family: 'Nunito', sans-serif;
    font-size: .93rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0 0 18px;
}

.commenti-velo-azioni {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.commenti-velo-accedi {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .92rem;
    color: var(--text-muted);
    text-decoration: none;
}

.commenti-velo-accedi:hover { color: var(--text-main); text-decoration: underline; }


/* --- PULSANTE "SEGNA COME LETTA" NELLA COLONNA DELLA LEZIONE ------------- */
.lettura-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    border-radius: 30px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-main);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .93rem;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.lettura-btn svg { width: 17px; height: 17px; flex: none; font-weight: 300; }
.lettura-btn:hover { border-color: var(--primary); color: var(--primary); }
.lettura-btn:hover svg { opacity: .8; }

.lettura-btn.is-letta {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.lettura-btn.is-letta svg { opacity: 1; }
.lettura-btn:disabled { opacity: .6; cursor: default; }

/* Le due scelte dell'invito a registrarsi, affiancate al centro. Lo stacco
   dal testo sta qui e non su .voto-domanda, che è condivisa con la finestra
   del voto: lì sotto ci sono le stelle, che hanno già aria loro. */
.voto-invito-azioni {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 18px 0 6px;
}


/* --- AVVISI: il collegamento è staccato dal titolo ---------------------- */
.avviso-link {
    display: inline-block;
    margin: 0 0 6px;
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: .84rem;
    color: var(--accent-text);
    text-decoration: none;
}

.avviso-link:hover { text-decoration: underline; }

.avviso-quando { display: block; }


/* --- NOTIFICHE A COMPARSA ------------------------------------------------
   Lo stile del toast sta in style.css e colora l'icona tramite `.toast i`:
   dentro quell'<i> qui c'è un SVG invece del carattere di Font Awesome. */
.toast i svg {
    display: block;
    width: 17px;
    height: 17px;
}


/* --- PAGINE DI TESTO (termini, privacy) --------------------------------- */
.doc-legale {
    max-width: 76ch;
    margin: 44px auto 60px;
    padding: 0 24px;
    font-family: 'Nunito', sans-serif;
    color: var(--text-main);
    line-height: 1.65;
}

.doc-legale h1 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}

.doc-data {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0 0 28px;
}

.doc-legale h2 {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--text-main);
    margin: 34px 0 12px;
    padding-left: 12px;
    border-left: 3px solid var(--primary);
}

.doc-legale p { margin: 0 0 14px; }
.doc-legale ul { margin: 0 0 16px; padding-left: 22px; }
.doc-legale li { margin-bottom: 8px; }
.doc-legale a { color: var(--accent-text); font-weight: 700; }
.doc-torna {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--border-color);
}


/* --- LEZIONE: la nota subito sotto al riquadro degli esempi ---------------
   Nelle lezioni la sequenza è: riquadro della struttura, riquadro degli
   esempi, e a volte una nota (un elenco con una voce sola, tipo "Attenzione").
   Fra struttura ed esempi lo stacco è 15px, mentre la nota se ne prendeva 25
   e sembrava staccata dal gruppo: qui i due stacchi diventano uguali.

   Vanno toccati tutt'e due i margini, non uno: fra due elementi vince il più
   grande dei due (i margini verticali si "fondono"), quindi lasciandone uno a
   20 o 25 il conto non sarebbe cambiato. */
body.landing-page .example-box:has(+ ul > li:only-child) {
    margin-bottom: 15px;
}

body.landing-page .example-box + ul > li:only-child {
    margin-top: 15px;
}


/* ==========================================================================
   VERSIONE MOBILE DI POPUP E FINESTRELLE
   ========================================================================== */

/* --- Avvisi: il popup della campanella ---------------------------------
   Sotto i 900px la campanella finisce dentro al menu a panino, cioè in mezzo
   allo schermo. Il popup le si aggancia a destra e, essendo largo quasi 300px,
   sbordava a sinistra di 139px: metà elenco fuori dallo schermo (misurato).
   Qui smette di inseguire la campanella e si mette da solo sotto la barra in
   alto, largo quanto lo schermo meno i margini. */
@media (max-width: 900px) {
    .notif-popup {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        max-height: 72vh;
        max-height: 72dvh;
        overflow-y: auto;
        border-radius: 24px 24px 0 0;
        border-bottom: none;
        box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.35);
        padding-bottom: env(safe-area-inset-bottom);
        animation: foglietto-su 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Lo sfondo scurito dietro al pannello: lo mette e lo toglie core.js, come
       fanno le finestrelle con il loro velo. Serve anche da bersaglio: un tocco
       qui sopra chiude il pannello. */
    .notif-sfondo {
        position: fixed;
        inset: 0;
        z-index: 199;
        background: rgba(0, 0, 0, 0.5);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        animation: foglietto-velo 0.3s ease forwards;
    }
}

/* --- Finestrelle: invito, voto in stelle, segnalazione ------------------
   Sullo schermo del telefono i bordi interni da 26px si mangiavano un sesto
   della larghezza, e i pulsanti affiancati andavano a capo in modo storto
   (uno sopra l'altro ma allineati a destra). Qui i bordi si stringono, il
   titolo scende di un paio di misure e i pulsanti diventano larghi quanto la
   finestrella, uno sotto l'altro: si toccano senza mirare. */
@media (max-width: 600px) {
    /* Le finestrelle non stanno più in mezzo allo schermo: salgono dal basso e
       ci restano attaccate, con gli angoli arrotondati solo di sopra. È il
       modello che la wip usa da sempre per le sue finestre — il pollice arriva
       ai pulsanti senza dover attraversare lo schermo, e l'animazione dice da
       dove è arrivata la finestrella e dove tornerà. */
    .voto-overlay,
    .segnala-overlay {
        align-items: flex-end;
        padding: 0;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    .voto-box,
    .segnala-box {
        width: 100%;
        max-width: none;
        border-radius: 24px 24px 0 0;
        border-bottom: none;
        /* `env(safe-area-inset-bottom)` è la striscia che i telefoni senza
           tasto fisico si tengono in fondo: senza, l'ultimo pulsante ci
           finisce sotto. */
        padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -14px 44px rgba(0, 0, 0, 0.4);
        animation: foglietto-su 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .voto-titolo,
    .segnala-titolo { font-size: 1.45rem; }

    .voto-chiudi-x { top: 10px; right: 10px; }

    /* Il titolo non deve finire sotto alla crocetta. */
    .voto-titolo { padding-right: 34px; }

    /* "Registrati" e "Ho già un account" restano affiancati anche qui (prima
       andavano uno sotto l'altro, larghi quanto la finestrella): sono corti,
       ci stanno anche a 320px, e la finestrella resta più bassa. Vale sia per
       l'invito a registrarsi sia per la segnalazione senza account. */

    /* Le stelle stanno in una riga sola anche a 320px. */
    .voto-stelle { gap: 6px; }

    /* Sotto la domanda del voto ci vuole più aria prima delle stelle. Per
       l'invito invece lo stacco lo mette già .voto-invito-azioni: qui si
       azzera il suo, altrimenti si sommerebbero. */
    .voto-domanda{
        margin: 5px 0 20px;
    }

    .voto-invito-azioni { margin-top: 0; }
}

/* Il foglietto entra scorrendo dal bordo inferiore; il velo dietro si accende
   sfumando. Stesse curve e stessi tempi delle finestre della wip. */
@keyframes foglietto-su {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes foglietto-velo {
    from { opacity: 0; }
    to   { opacity: 1; }
}


/* ==========================================================================
   PAGINA IMPOSTAZIONI
   --------------------------------------------------------------------------
   Stava dentro impostazioni.html, in un blocco <style> di quattrocento righe:
   l'unica pagina del sito a portarsi lo stile addosso, e l'unica a non poterlo
   mettere in cache. Spostato qui senza cambiare una riga, e nello stesso punto
   della cascata in cui stava prima (in fondo a tutto).
   ========================================================================== */

  /* ── Tipografia della nuova grafica (font iniettati da core.js) ── */
  body.settings-body { font-family: 'Nunito', sans-serif; }
  .settings-body h1,
  .settings-body h2,
  .settings-body h3,
  .settings-body .settings-subhead {
      font-family: 'Outfit', sans-serif;
  }

  /* La pagina scorre normalmente (una sola scrollbar, come le altre pagine).
     La sidebar resta in alto con sticky; il contenuto a destra è senza box. */
  .settings-page-wrapper {
      /* Allineata agli stessi margini laterali della navbar; 20px sopra */
      margin: 20px var(--side-margin);
      padding: 0;
      animation: fadeIn 0.5s ease;
  }
  /* Layout a 2 colonne 28/72.
     min-height = altezza della sidebar fissa: così anche con pannelli corti
     il footer resta sotto la piega (niente sollevamento anomalo della sidebar). */
  .settings-layout {
      display: flex;
      align-items: flex-start;
      gap: 30px;
      min-height: calc(100vh - 120px);
  }
  /* Spacer: occupa la colonna sinistra nel flusso (28%) */
  .settings-nav-spacer { flex: 0 0 28%; align-self: stretch; }
  .settings-nav {
      /* Fissa come la navbar: ferma durante lo scroll, si solleva solo a fine
         pagina (gestito via JS). top = 80px navbar + 20px; 20px dal fondo.
         left/width sono impostati da JS per combaciare con lo spacer. */
      position: fixed;
      top: 100px;
      height: calc(100vh - 120px);
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 16px;
      padding: 12px;
      z-index: 50;
  }
  .settings-nav-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      text-align: left;
      padding: 12px 16px;
      border: none;
      border-radius: 12px;
      background: transparent;
      color: var(--text-muted);
      font-family: 'Nunito', sans-serif;
      font-size: 0.98rem;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s ease, color 0.2s ease;
  }
  .settings-nav-item i,
  .settings-nav-item svg {
      width: 20px;
      text-align: center;
      opacity: 0.7;
  }
  .settings-nav-item:hover {
      background: rgba(var(--primary-rgb), 0.08);
      color: var(--text-main);
  }
  .settings-nav-item.active {
      background: var(--primary);
      color: #fff;
  }
  .settings-nav-item.active i,
  .settings-nav-item.active svg {
      opacity: 1;
  }
  /* Colonna destra: nessun box, scorre con la pagina */
  .settings-content {
      flex: 1 1 72%;
      min-width: 0;
  }
  /* Pannelli: uno visibile alla volta */
  .settings-panel { display: none; }
  .settings-panel.active {
      display: block;
      animation: fadeIn 0.3s ease;
  }
  /* Intestazione di sezione: titolo in Outfit sul colore del testo,
     icona nel colore della lingua (come i titoli delle altre pagine). */
  .section-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 20px;
      margin-bottom: 15px;
      color: var(--text-main);
  }
  .section-header h2 {
      font-size: 1.8rem;
      font-weight: 800;
      letter-spacing: -0.5px;
      line-height: 1.2;
  }
  /* Dal secondo titolo in poi serve più respiro: stacca il nuovo blocco
     da quello precedente. Il primo resta attaccato in alto. */
  .settings-panel .section-header ~ .section-header {
      margin-top: 50px;
  }
  .section-icon {
      font-size: 1.35rem;
      color: var(--primary);
  }
  .help-tip:hover .help-tip-content,
  .settings-divider {
      border-top: 1px solid var(--border-color);
      margin: 20px 0;
  }
  /* Griglia campi: max 2 per riga */
  .settings-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px 25px;
  }
  .field-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
  }
  .field-group .setting-label {
      font-weight: 600;
  }
  .field-group .field-input,
  .field-group .settings-select {
      width: 100%;
  }
  .field-group .field-hint {
      margin-top: 0;
  }
  /* Campi e select: stesso trattamento della nuova grafica
     (angoli morbidi, bordo tenue, alone colorato al focus) */
  .settings-body .field-input,
  .settings-select {
      padding: 11px 16px;
      border-radius: 12px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-main);
      font-family: 'Nunito', sans-serif;
      font-size: 0.95rem;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .settings-body .field-input::placeholder {
      color: var(--text-muted);
      opacity: 0.7;
  }
  .settings-body .field-input:focus,
  .settings-select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
  }
  /* Sotto-titolo di gruppo dentro un pannello */
  .settings-subhead {
      font-size: 0.95rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      opacity: 0.65;
      margin: 0 0 16px;
  }
  .settings-actions {
      border-top: 1px solid var(--border-color);
      margin-top: 20px;
      padding-top: 30px;
      display: flex;
      justify-content: flex-start;
  }
  /* Pulsante neutro (logout, reset) — a pillola come nel resto del sito */
  .settings-btn-outline {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 22px;
      border-radius: 30px;
      border: 1px solid var(--border-color);
      background: var(--bg-card);
      color: var(--text-main);
      font-family: 'Nunito', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      cursor: pointer;
      transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  }
  .settings-btn-outline:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: rgba(var(--primary-rgb), 0.06);
  }

  /* Pulsante principale (salva) */
  .settings-body .btn-primary-editor {
      font-family: 'Nunito', sans-serif;
      border-radius: 30px;
      padding: 11px 24px;
      font-size: 0.95rem;
      font-weight: 700;
      background-color: var(--primary);
  }
  /* Riquadro azioni distruttive */
  .danger-box {
      background: rgba(255, 0, 0, 0.05);
      padding: 20px;
      border-radius: 14px;
      border: 1px dashed rgba(255, 0, 0, 0.25);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
  }
  .danger-box + .danger-box { margin-top: 18px; }
  .field-hint {
      font-size: 0.82rem;
      color: var(--text-muted);
      opacity: 0.85;
      margin-top: 5px;
  }
  /* Responsive: sotto i 760px la sidebar va sopra, in orizzontale */
  @media (max-width: 760px) {
      .settings-layout {
          flex-direction: column;
          min-height: 0;
          /* In colonna, con align-items:flex-start (ereditato dal desktop) il
             menù prenderebbe la larghezza del suo contenuto e sborderebbe
             dallo schermo invece di scorrere al proprio interno. */
          align-items: stretch;
          /* Stessa distanza sopra (margine del wrapper) e sotto il menù */
          gap: 20px;
      }
      .settings-nav-spacer { display: none; }

      /* Menù a pillole su una riga sola, che scorre lateralmente col dito.
         Prima le 5 voci andavano a capo su 3 righe di larghezze diverse. */
      .settings-nav {
          position: sticky;
          /* 80px di navbar + 12px di stacco: scorrendo non si incolla alla barra */
          top: 92px;
          height: auto;
          width: auto !important;
          max-width: 100%;        /* mai più larga dello schermo: scorre dentro */
          min-width: 0;
          box-sizing: border-box;
          left: auto !important;
          transform: none !important;
          flex-direction: row;
          flex-wrap: nowrap;
          gap: 8px;
          padding: 10px;
          border-radius: 30px;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;          /* Firefox */
          scroll-snap-type: x proximity;
      }
      .settings-nav::-webkit-scrollbar { display: none; }
      .settings-nav-item {
          width: auto;
          flex: 0 0 auto;                 /* larghezza sul contenuto, niente stiramenti */
          justify-content: center;
          white-space: nowrap;
          padding: 9px 16px;
          border-radius: 30px;
          font-size: 0.9rem;
          scroll-snap-align: center;
      }
      .settings-nav-item i,
  .settings-nav-item svg { width: auto; }
      .settings-content { width: 100%; }
      .settings-grid { grid-template-columns: 1fr; }
      /* Stacco fra i blocchi ridotto: su schermo stretto 50px sono troppi */
      .settings-panel .section-header ~ .section-header { margin-top: 36px; }
      .section-header h2 { font-size: 1.45rem; }
  }

  /* ── Ritocchi della def ─────────────────────────────────────────────
     Nella wip le icone sono caratteri di Font Awesome, qui sono disegni
     SVG: quel font pesa mezzo megabyte e su questa pagina servirebbe per
     cinque icone. Le due righe qui sotto danno agli SVG lo spazio fisso
     che il font si prendeva da solo. */
  .settings-nav-item svg,
  .section-icon { flex: none; }

  /* Campo che occupa tutta la riga (nella wip è scritto a mano volta per
     volta con uno stile in linea). */
  .field-group.full { grid-column: 1 / -1; }


  /* --- Zona pericolo --- */
  .settings-subhead--pericolo {
      color: #e11d48; opacity: 1;
      font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.95rem;
      text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 14px;
  }
  .danger-box {
      display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
      padding: 20px; border-radius: 14px;
      background: rgba(225, 29, 72, 0.05);
      border: 1px dashed rgba(225, 29, 72, 0.28);
  }
  .danger-btn {
      border: none; cursor: pointer;
      font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.95rem;
      background: #e11d48; color: #fff; padding: 11px 22px; border-radius: 30px;
      transition: filter 0.15s;
  }
  .danger-btn:hover { filter: brightness(1.08); }
  .danger-btn:disabled { opacity: 0.5; cursor: default; }


/* ==========================================================================
   SCHERMI GRANDI — LARGHEZZA DI LETTURA
   --------------------------------------------------------------------------
   Fino al portatile la pagina si regola da sola con i margini laterali. Su un
   monitor grande no: il testo si allargava fino a righe da oltre 150 caratteri,
   e a quel punto l'occhio, arrivato in fondo alla riga, fatica a ritrovare
   l'inizio di quella dopo.

   Il tetto e' sul contenitore, non sul solo testo: cosi' il riquadro laterale
   resta accanto all'articolo invece di allontanarsene, e titolo, contenuto e
   commenti restano incolonnati sullo stesso asse.

   1280px meno la colonna di destra (320) e il suo stacco (50) lasciano al
   testo circa 910px. Per stringere o allargare basta cambiare questo numero:
   e' l'unico punto da toccare.

   `min()` fa si' che sotto i ~1460px non cambi niente rispetto a prima: vince
   la seconda misura, che e' quella di sempre (schermo meno i due margini). */
:root {
    --larghezza-lettura: 1280px;
}

body.landing-page .lesson-main,
body.landing-page .lesson-main:has(#grammar-container) {
    width: min(var(--larghezza-lettura), 100% - 2 * var(--side-margin));
    margin-left: auto;
    margin-right: auto;
}

/* La testata dell'indice delle lezioni resta agganciata in alto mentre si
   scorre, e per coprire tutta la larghezza sconfina dai lati del contenitore
   con due margini negativi. Da quando il contenitore ha un tetto, quello
   sconfinamento non arriva piu' ai bordi dello schermo: si fermava a mezz'aria,
   come una fascia sospesa. Oltre la soglia del tetto la testata rientra nei
   ranghi e resta larga quanto il contenuto. */
@media (min-width: 1460px) {
    body.landing-page .gi-header {
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }
}


/* --- La barra in alto segue la stessa larghezza del contenuto -------------
   La fascia resta larga quanto lo schermo — sfondo e riga di fondo devono
   arrivare ai bordi — ma quello che ci sta dentro (logo a sinistra, voci a
   destra) si incolonna con il testo della pagina.

   Prima i suoi bordi interni erano una percentuale (8%), che a ogni larghezza
   dava un numero diverso da quello del contenuto: il logo cadeva sempre un po'
   piu' in la' o un po' piu' in qua rispetto al titolo sotto. Ora la barra usa
   lo stesso conto delle pagine, quindi combaciano a qualsiasi dimensione. */
body.landing-page header {
    padding-left: 0;
    padding-right: 0;
}

/* Attenzione a COME si stringe: il colore della fascia (fondo semitrasparente
   e sfocatura) non sta sull'intestazione, che e' trasparente, ma su .navbar.
   Stringendo .navbar si stringeva la fascia stessa, e ai lati del logo e dei
   pulsanti compariva un gradino netto fra la parte colorata e il fondo della
   pagina. La barra quindi resta larga quanto lo schermo, e a rientrare e' solo
   quello che ci sta dentro, tramite i bordi interni.

   `max()` sceglie da solo fra le due situazioni: sugli schermi grandi vale il
   primo conto, che incolonna logo e voci con il testo della pagina; sotto la
   soglia vale il margine di sempre. Un solo conto, nessuna soglia scritta a
   mano. */
body.landing-page header .navbar {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: max(var(--side-margin), calc((100% - var(--larghezza-lettura)) / 2));
    padding-right: max(var(--side-margin), calc((100% - var(--larghezza-lettura)) / 2));
}


/* ==========================================================================
   PAGINA DI BENVENUTO — LA HOME
   --------------------------------------------------------------------------
   La prima pagina del sito: una fascia alta quanto lo schermo con il fondale
   di caratteri, e sotto tre sezioni che raccontano che cos'è Yoteka.

   Il fondale non è un'immagine ma testo: caratteri giapponesi tenuti quasi
   invisibili, con qualcuno acceso nel colore del sito. Non c'è nessun file da
   scaricare, resta nitido a qualsiasi schermo e segue da solo il tema chiaro
   e scuro. A costruirlo è `costruisciTramaHome()` in core.js.
   ========================================================================== */


/* --- I colori della trama ------------------------------------------------
   L'inchiostro NON è un `opacity` sul blocco intero: con l'opacità sul
   contenitore verrebbero spenti anche i caratteri accesi, che invece devono
   restare più forti degli altri. Quindi la trasparenza sta nel colore, e vale
   carattere per carattere. */
:root {
    --trama-inchiostro: rgba(255, 255, 255, 0.075);
    --trama-acceso:     0.5;
    --velo-rgb:         15, 16, 19;        /* uguale a --bg-page scuro */
}

[data-theme="light"] {
    --trama-inchiostro: rgba(20, 20, 25, 0.09);
    --trama-acceso:     0.42;
    --velo-rgb:         245, 246, 249;     /* uguale a --bg-page chiaro */
}


/* --- Gli aloni di luce, confinati nella fascia di apertura ---------------
   Nascono `position: fixed`, cioè agganciati allo schermo: restavano visibili
   dietro a tutta la pagina mentre si scorreva. Ora i due riquadri stanno
   dentro la fascia di apertura e qui diventano `absolute`, così l'`overflow:
   hidden` della fascia li taglia e sotto non se ne vede più traccia.

   Il secondo alone nasce ancorato in basso (`bottom: -12%`) e, dentro un
   riquadro molto più corto dello schermo, verrebbe tagliato a metà lasciando
   una riga netta sul confine. Qui viene rialzato e rimpicciolito: si spegne
   da solo prima di arrivare al bordo. */
body.landing-page .home-hero .glow-ambient-bg,
body.landing-page .home-hero .glow-ambient-bg-secondary {
    position: absolute;
}

body.landing-page .home-hero .glow-ambient-bg-secondary {
    bottom: auto;
    top: 8%;
    width: 46vw;
    height: 46vw;
    max-width: 560px;
    max-height: 560px;
}


/* --- La fascia di apertura ----------------------------------------------
   Alta quanto lo schermo meno la barra in alto (80px), con un tetto perché su
   un monitor molto alto una fascia da 1200px sarebbe assurda. `dvh` e non
   `vh`: sui telefoni l'altezza utile cambia quando la barra degli indirizzi si
   ritira, e con `vh` il pulsante finirebbe sotto il bordo. */
body.landing-page .home-hero {
    position: relative;
    overflow: hidden;                      /* taglia la trama, che sborda apposta */
    min-height: min(calc(100vh - 80px), 780px);
    min-height: min(calc(100dvh - 80px), 780px);
    display: flex;
    align-items: center;
}

/* Il fondale sta dietro a tutto e fuori dalla portata del mouse: è decorazione,
   non deve poter essere selezionato né cliccato. */
.home-fondale {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

/* Il velo è quello che rende leggibile il titolo: pieno a sinistra, dove
   stanno le parole, e via via trasparente verso destra, dove la trama si vede
   per intero. Senza, il testo cadrebbe sopra i caratteri. */
.home-velo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Due strati. Il primo, scritto per primo perché sta sopra, scioglie la
       trama nel colore della pagina sul fondo della fascia: senza, i caratteri
       finivano tagliati di netto sul confine con la sezione dopo. È misurato in
       pixel dal basso (`calc(100% - 190px)`) e non in percentuale, così la
       sfumatura resta alta uguale su qualsiasi schermo.
       Il secondo è il velo di sempre, quello che copre la zona del testo a
       sinistra e lascia scoperta la trama a destra.
       La partenza è `rgba(--velo-rgb, 0)` e non `transparent`: sono lo stesso
       colore ma `transparent` è nero trasparente, e sfumando verso una tinta
       chiara lascerebbe una banda grigiastra in mezzo. */
    background:
        linear-gradient(
            180deg,
            rgba(var(--velo-rgb), 0) calc(100% - 190px),
            var(--bg-page) 100%
        ),
        linear-gradient(
            100deg,
            var(--bg-page) 0%,
            rgba(var(--velo-rgb), 0.96) 30%,
            rgba(var(--velo-rgb), 0.6) 52%,
            rgba(var(--velo-rgb), 0) 78%
        );
}

/* Le righe sono più larghe e più numerose di quanto lo schermo richieda:
   inclinate, i quattro angoli resterebbero scoperti. Quello che avanza lo
   taglia .home-fondale. */
.home-trama {
    position: absolute;
    inset: -22% -20%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.35em;
    /* IL FONT DELLA TRAMA E' NOTO SANS JP, MA NON QUELLO DEL <head>.
       La home non chiede piu' il font giapponese intero nel <head> (356 KB di
       CSS che bloccavano il disegno della pagina, piu' 442 KB di file, per
       uno sfondo). Al suo posto, `caricaFontTrama()` in core.js ne chiede a
       Google una versione con dentro SOLO i 153 caratteri della trama: 1,8 KB
       di CSS e 43 KB di file, aggiunti dopo che la pagina si e' gia' disegnata.
       Percio' "Noto Sans JP" sta in testa: appena arriva, la trama lo usa.
       Dietro ci sono i font giapponesi gia' installati (Hiragino su Mac e
       iPhone, Yu Gothic su Windows, Noto Sans CJK su Android e Linux): sono
       quello che si vede nell'attimo prima che il font arrivi, e quello che
       resterebbe se Google non rispondesse. In nessun caso quadratini vuoti.
       NON usare qui `var(--font-cjk)`: e' la stessa pila ma senza i nomi di
       sistema in ordine utile, e sulla home Noto Sans JP e' SOLO il ritaglio
       da 153 caratteri (peso 600, quello dichiarato qui sotto). */
    font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                 "Yu Gothic UI", "Yu Gothic", Meiryo, "MS Gothic",
                 "Noto Sans CJK JP", sans-serif;
    font-size: clamp(2rem, 3.4vw, 3.1rem);
    font-weight: 600;
    line-height: 1.15;
    color: var(--trama-inchiostro);
    white-space: nowrap;
    transform: rotate(8deg);
}

/* I caratteri accesi: uno ogni otto circa, nel viola del sito. Sono quelli che
   fanno leggere la trama come una scelta e non come un disturbo. */
.home-trama .acceso {
    color: rgba(var(--primary-rgb), var(--trama-acceso));
}

/* `width: max-content` non è un dettaglio: senza, la riga è un blocco largo
   quanto il contenitore mentre il testo ne misura cinque o sei volte tanto, e
   lo scorrimento del 50% sposterebbe metà del CONTENITORE invece che metà del
   TESTO — cioè a ogni giro si vedrebbe un salto. Con max-content la scatola
   misura esattamente il testo, e il 50% cade sulla fine della prima delle due
   copie identiche che il javascript scrive. */
.home-trama-riga {
    display: block;
    width: max-content;
    letter-spacing: 0.34em;
    animation: trama-scorri 300s linear infinite;
}

/* Righe alterne nel verso opposto e ancora più lente: da fermo sembra
   immobile, e solo restando sulla pagina ci si accorge che qualcosa si muove. */
.home-trama-riga:nth-child(even) {
    animation-direction: reverse;
    animation-duration: 400s;
}

@keyframes trama-scorri {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* La regola che ferma la trama per chi ha chiesto meno animazioni sta più
   giù, DOPO il blocco degli schermi stretti: quello cambia `animation-name`
   e, venendo dopo, l'avrebbe riaccesa sul telefono. */


/* --- Il testo dell'apertura ----------------------------------------------
   Stessa larghezza e stesso incolonnamento del resto del sito: è il conto di
   .lesson-main, che a sua volta combacia con la barra in alto. Così il titolo
   della home, il logo e il testo delle lezioni cadono tutti sulla stessa riga
   verticale, a qualsiasi dimensione di schermo. */
body.landing-page .home-hero-contenuto {
    position: relative;
    z-index: 2;
    width: min(var(--larghezza-lettura), 100% - 2 * var(--side-margin));
    margin-left: auto;
    margin-right: auto;
}

body.landing-page .home-hero-contenuto {
    padding: 64px 0;
}

/* Il testo non arriva mai fin dove il velo si apre: oltre i 560px finirebbe
   sopra la parte scoperta della trama. */
.home-hero-testo {
    max-width: 560px;
}

.home-badge {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-text);
    border: 1px solid rgba(var(--primary-rgb));
    border-radius: 999px;
    padding: 6px 15px;
    margin-bottom: 15px;
}

/* Il prefisso `body.landing-page` serve a battere la regola generale
   `body.landing-page h1` di più su, che fissa il titolo a 1.8rem: senza, il
   titolo della home resterebbe piccolo. */
/* La frase grande dell'apertura. NON e' un h1 (l'h1 e' l'etichetta sopra,
   vedi index.html): queste regole erano attaccate al tag, ora stanno sulla
   classe, e la frase si vede esattamente come prima. */
body.landing-page .home-hero .home-hero-titolo {
    font-family: 'Outfit', var(--font-cjk);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--text-main);
    line-height: 1.2;
    margin: 0 0 20px;
}

body.landing-page .home-hero .home-hero-titolo em {
    font-style: normal;
    color: var(--primary);
}

.home-hero-desc {
    font-family: 'Nunito', var(--font-cjk);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 52ch;
    margin: 0 0 25px;
}

/* I due pulsanti sono gli stessi della barra in alto — stessa classe, stesso
   colore, stesso comportamento al passaggio del mouse — solo più grandi: qui
   sono l'invito principale della pagina, lassù due voci di menu. */
.home-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

body.landing-page .home-cta .btn-reg-nav,
body.landing-page .home-cta .btn-login-nav {
    padding: 5px 22px;
    font-size: 1rem;
}

/* La pillola piena ha un bordo dello stesso colore del suo fondo, che a
   vedersi non c'è. Serve a farla alta esattamente quanto quella bordata
   accanto: senza, i due pulsanti differivano di 3px e il flex li pareggiava
   stirando la pillola piena, con tutto lo spazio in più che finiva SOTTO la
   scritta — "Registrati" sembrava seduto troppo in alto. */
body.landing-page .home-cta .btn-reg-nav {
    border: 1.5px solid var(--primary);
}


/* --- Schermi stretti ------------------------------------------------------
   Sul telefono il testo occupa tutta la larghezza, quindi la trama non può più
   stare di lato: si sposta sotto. La fascia si costruisce così: il testo parte
   in alto e in fondo alla sezione c'è un'altezza fissa riservata ai caratteri
   (il `padding-bottom`). Il velo copre di tinta piena tutto quello che sta
   sopra quella fascia — cioè esattamente la zona del testo — e sfuma soltanto
   dentro di essa.

   I fermi del velo sono scritti come `calc(100% - Npx)` e non in percentuale
   apposta: il testo va a capo diversamente a seconda del telefono, quindi la
   sua altezza cambia da un apparecchio all'altro. Misurando dal fondo, la parte
   coperta resta agganciata alla fascia dei caratteri e il testo si legge sempre
   su fondo pulito, qualunque sia lo schermo. */
@media (max-width: 900px) {
    body.landing-page .home-hero {
        /* Niente altezza minima: la sezione è alta quanto il testo più la
           fascia. Con una misura fissa, su un telefono corto il testo veniva
           schiacciato e su uno lungo restava un vuoto in mezzo. */
        min-height: 0;
        align-items: flex-start;      /* il testo parte in alto, non a metà */
        padding-bottom: 250px;        /* la fascia dei caratteri */
    }

    body.landing-page .home-hero-contenuto {
        padding: 25px 0 0;
    }

    .home-hero-testo {
        max-width: none;
    }

    /* Sul telefono le righe diventano COLONNE: ogni riga è scritta dall'alto
       in basso (`writing-mode: vertical-rl`) e le venti stanno una accanto
       all'altra, centrate. Lo scorrimento cambia asse — su e giù invece che
       destra e sinistra — con il suo `@keyframes` qui sotto.
       `align-items: flex-start` non è un dettaglio: in una riga flex le
       colonne verrebbero stirate all'altezza del contenitore, e il 50% dello
       scorrimento tornerebbe a misurare il contenitore invece del testo (lo
       stesso salto a fine giro descritto sopra per `width: max-content`).
       `width: auto` toglie il `max-content` della regola generale, che qui
       varrebbe sull'asse sbagliato. */
    .home-trama {
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
    }

    .home-trama-riga {
        writing-mode: vertical-rl;
        width: auto;
        animation-name: trama-scorri-verticale;
    }

    /* Il velo punta al centro della fascia: i caratteri si vedono in mezzo e
       si sciolgono nel fondo verso i lati, verso l'alto (dove c'è il testo,
       che resta su fondo pieno) e verso il basso (dove comincia la sezione
       dopo). È un'ellisse centrata sulla fascia dei caratteri — 125px dal
       fondo, cioè a metà dei 250px di `padding-bottom` — e non un velo da un
       lato all'altro come sul computer. Le due misure sono legate: se cambia
       il `padding-bottom` della fascia, va spostato anche il centro. */
    .home-velo {
        background:
            radial-gradient(
                60% 135px at 50% calc(100% - 125px),
                rgba(var(--velo-rgb), 0) 0%,
                rgba(var(--velo-rgb), 0.3) 40%,
                rgba(var(--velo-rgb), 0.8) 75%,
                var(--bg-page) 100%
            );
    }
}

@keyframes trama-scorri-verticale {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

/* Chi ha chiesto meno animazioni al sistema operativo vede la trama ferma.
   Sta qui in fondo apposta: deve venire dopo TUTTE le regole che accendono
   lo scorrimento, compresa quella del telefono qui sopra. */
@media (prefers-reduced-motion: reduce) {
    .home-trama-riga { animation: none; }
}


/* ==========================================================================
   HOME — LA SEZIONE GRAMMATICA
   --------------------------------------------------------------------------
   Due fasce sovrapposte. In ciascuna il testo sta incolonnato con il resto del
   sito e l'immagine esce dai margini fino a toccare il bordo dello schermo:
   nella prima a destra, nella seconda a sinistra, così la pagina non pende
   tutta da una parte.
   ========================================================================== */

/* Il margine della pagina è una COLONNA della griglia e non un `padding`, e
   non è un dettaglio: dentro `grid-template-columns` la percentuale si misura
   sulla larghezza della sezione — che è larga quanto la pagina — mentre in un
   padding si misurerebbe sulla cella, cioè su metà pagina, e il conto
   verrebbe sbagliato di preciso a metà. È lo stesso `max()` della barra in
   alto, quindi il titolo di ogni fascia cade esattamente sotto la Y del logo,
   a qualunque dimensione di schermo.

   L'immagine non ha bisogno di nessun trucco per uscire dai margini (niente
   `100vw`, niente margini negativi): è semplicemente l'ultima colonna, e
   l'ultima colonna finisce dove finisce la pagina. Nessun rischio di far
   comparire la barra di scorrimento orizzontale. */
/* Le due misure da cui dipende tutto il resto. Stanno qui, sulla fascia, e non
   dentro le celle: le percentuali dentro `grid-template-columns` si misurano
   sulla larghezza della sezione — che è larga quanto la pagina — mentre in un
   padding si misurerebbero sulla cella, cioè su metà pagina. */
body.landing-page .home-blocco {
    /* Il margine della pagina: lo stesso `max()` della barra in alto, quindi il
       titolo di ogni fascia cade sotto la Y del logo a ogni dimensione. */
    --bordo: max(var(--side-margin), calc((100% - var(--larghezza-lettura)) / 2));
    /* Lo stacco fra il testo e l'immagine. */
    --stacco: clamp(32px, 4vw, 72px);

    display: grid;
    align-items: center;

    /* [margine] [testo] [immagine fino al bordo dello schermo].
       L'immagine è mezza pagina meno mezzo stacco: è questa misura che tiene
       in riga le due fasce. Con l'immagine a `1fr` la seconda fascia partiva
       spostata di un margine rispetto alla prima, e l'occhio se ne accorgeva.
       Così invece il bordo interno dell'immagine di sopra e l'inizio del testo
       di sotto cadono sulla stessa riga verticale, e testi e immagini hanno la
       stessa larghezza nelle due fasce.

       L'immagine non ha bisogno di nessun trucco per uscire dai margini
       (niente `100vw`, niente margini negativi): è l'ultima colonna, e
       l'ultima colonna finisce dove finisce la pagina. Nessun rischio di far
       comparire la barra di scorrimento orizzontale. */
    grid-template-columns:
        var(--bordo)
        minmax(0, 1fr)
        calc(50% - var(--stacco) / 2);
}

/* La fascia rovesciata: le stesse tre misure allo specchio, l'immagine a
   sinistra e il margine vuoto a destra. Nel file HTML l'ordine resta sempre
   testo-immagine, anche qui: è la griglia a scambiarli di posto, così chi
   ascolta la pagina con un lettore di schermo sente sempre prima la
   spiegazione. */
body.landing-page .home-blocco--rovescio {
    grid-template-columns:
        calc(50% - var(--stacco) / 2)
        minmax(0, 1fr)
        var(--bordo);
}

.home-blocco-testo { grid-column: 2; grid-row: 1; }
.home-blocco-img   { grid-column: 3; grid-row: 1; }

.home-blocco--rovescio .home-blocco-img { grid-column: 1; }

/* Lo stacco sta nel padding del testo e non in un `gap`, altrimenti il gap si
   aggiungerebbe anche fra la colonna del margine e il testo, spostando il
   titolo fuori dall'incolonnamento. */
.home-blocco-testo { padding-right: var(--stacco); }
.home-blocco--rovescio .home-blocco-testo { padding-right: 0; padding-left: var(--stacco); }

body.landing-page .home-blocco h2 {
    font-family: 'Outfit', var(--font-cjk);
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--text-main);
    margin: 0 0 16px;
}

body.landing-page .home-blocco h2 em {
    font-style: normal;
    color: var(--primary);
}

.home-blocco-testo p {
    font-family: 'Nunito', var(--font-cjk);
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 14px;
    max-width: 52ch;
}

.home-blocco-testo p:last-child { margin-bottom: 0; }

/* Il pulsante sotto al testo, che porta alla pagina di cui parla la fascia.
   È la pillola bordata del sito e non quella piena: il pieno resta alla fascia
   di apertura, dove c'è l'invito principale: due pulsanti pieni sulla stessa
   pagina si toglierebbero forza a vicenda.
   Il contenitore riusa `.home-cta`, così misura e distanze sono le stesse dei
   pulsanti dell'apertura senza doverle riscrivere. */
.home-blocco-azione { margin-top: 26px; }

/* Una delle due lezioni si chiama だ e です: i font latini non contengono i
   kana, quindi la pila si chiude con var(--font-cjk) come nel resto del sito.
   Senza, il browser pescherebbe i due caratteri da un font di sistema a caso e
   stonerebbero con la scritta accanto. */
.home-blocco-azione .btn-login-nav { font-family: 'Nunito', var(--font-cjk); }

/* Il riquadro dell'immagine. `aspect-ratio` invece di un'altezza fissa: la
   fascia si adatta alla larghezza dello schermo senza che l'immagine si
   schiacci. `object-fit: cover` ritaglia lo screenshot invece di deformarlo,
   quindi i file possono avere proporzioni un po' diverse fra loro. */
.home-blocco-img {
    /* Segue le proporzioni degli screenshot, che sono strisce larghe (circa
       2,3 a 1 da quando la barra in alto è stata ritagliata via). Con un
       riquadro più alto il ritaglio si mangerebbe un quarto della larghezza,
       cioè i filtri e la colonna di destra. */
    aspect-ratio: 21 / 15;
    overflow: hidden;
    background: var(--bg-card);
    /* Arrotondati solo gli angoli interni: dall'altra parte l'immagine è
       tagliata dal bordo dello schermo e un raggio lì si vedrebbe come un
       errore. Per lo stesso motivo sparisce il bordo sul lato tagliato. */
    border-radius: 18px 0 0 18px;
    border-right: 0;
}

.home-blocco--rovescio .home-blocco-img {
    border-radius: 0 18px 18px 0;
    border-left: 0;
}

/* --- Gli screenshot -------------------------------------------------------
   Stanno qui e non nell'HTML perché sono DUE per riquadro: una versione per il
   tema scuro e una per quello chiaro. Con due `<img>` nel file, il browser
   scaricherebbe tutte e quattro le immagini per mostrarne due; messe come
   sfondo, scarica solo quelle del tema in uso — circa metà del peso. Il
   riquadro nel file HTML resta vuoto e porta `role="img"` con la descrizione,
   così chi ascolta la pagina sente comunque che cosa raffigura.

   Gli indirizzi partono da questa cartella (css/), quindi il `../` davanti.
   Per cambiare uno screenshot si sostituisce il file: qui non c'è niente da
   toccare, a meno che non cambi anche il nome. */
.home-blocco-img {
    background-repeat: no-repeat;
    background-size: cover;
    /* Ancorato a sinistra e non al centro: gli screenshot sono più larghi del
       riquadro e qualcosa va tagliato per forza. Tagliando a destra si perde
       la parte vuota della pagina, mentre centrando si mangerebbe mezzo logo
       sul lato sinistro. */
    background-position: left center;
}

.home-img--elenco  { background-image: url("../img/gram-dark.webp"); }
.home-img--lezione { background-image: url("../img/les-dark.webp"); }

[data-theme="light"] .home-img--elenco  { background-image: url("../img/gram-light.webp"); }
[data-theme="light"] .home-img--lezione { background-image: url("../img/les-light.webp"); }


/* --- La velatura sulle immagini ------------------------------------------
   Gli screenshot sono scuri come la pagina e ci si sciolgono dentro: senza
   niente sopra, il riquadro non si stacca dal fondo. Questa velatura fa due
   cose insieme. Il primo strato è una tinta del colore del sito che cresce
   verso il lato tagliato: lega l'immagine al resto della pagina e le dà una
   direzione. Il secondo è una vignettatura che scurisce gli angoli e lascia
   pulito il centro, così l'occhio va dove c'è il contenuto e il bordo del
   riquadro si legge come un bordo.

   Sta in un `::after` e non fra gli sfondi del riquadro perché altrimenti
   andrebbe ripetuta in tutte e quattro le regole delle immagini qui sopra. */
.home-blocco-img { position: relative; }

.home-blocco-img::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(260deg, rgba(var(--primary-rgb), 0) 8%, rgba(var(--primary-rgb), 0.06) 100%),
        radial-gradient(130% 110% at 0% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.34) 100%);
}

/* Nella fascia rovesciata l'immagine è tagliata dall'altra parte, quindi la
   tinta e l'ombra vanno specchiate: sempre più cariche verso il bordo dello
   schermo, sempre pulite verso il testo. */
.home-blocco--rovescio .home-blocco-img::after {
    background:
        linear-gradient(100deg, rgba(var(--primary-rgb), 0) 8%, rgba(var(--primary-rgb), 0.06) 100%),
        radial-gradient(130% 110% at 0% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.34) 100%);
}

/* In tema chiaro la velatura è la stessa identica dello scuro — stessi angoli,
   stessi fermi, stessa vignettatura — con una sola differenza: la tinta non è
   il viola del sito ma un grigio. Il grigio è 107 114 128, cioè lo stesso che
   il foglio usa già in chiaro per il grado Argento: non è un colore inventato
   per l'occasione.
   Per alzare o abbassare la velatura basta il numero finale di ogni riga:
   0.06 la tinta, 0.34 la vignettatura. */
[data-theme="light"] .home-blocco-img::after {
    background:
        linear-gradient(260deg, rgba(107, 114, 128, 0) 8%, rgba(107, 114, 128, 0.06) 100%),
        radial-gradient(130% 110% at 0% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.0) 100%);
}

[data-theme="light"] .home-blocco--rovescio .home-blocco-img::after {
    background:
        linear-gradient(100deg, rgba(107, 114, 128, 0) 8%, rgba(107, 114, 128, 0.0) 100%),
        radial-gradient(130% 110% at 0% 50%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.06) 100%);
}

/* Distanze fra le fasce e dalla sezione precedente. */
body.landing-page .home-grammatica {
    position: relative;
    z-index: 2;
    padding: clamp(64px, 4vw, 118px) 0;
}

body.landing-page .home-blocco + .home-blocco {
    margin-top: clamp(48px, 2vw, 96px);
}


/* --- Schermi stretti ------------------------------------------------------
   Le due colonne diventano una: prima la spiegazione, poi l'immagine sotto,
   sempre da bordo a bordo. Niente angoli arrotondati, perché qui l'immagine
   tocca lo schermo da tutti e due i lati. */
@media (max-width: 900px) {
    body.landing-page .home-blocco,
    body.landing-page .home-blocco--rovescio {
        grid-template-columns: 1fr;
    }

    .home-blocco-testo,
    .home-blocco--rovescio .home-blocco-testo {
        grid-column: 1;
        grid-row: 1;
        padding: 0 var(--side-margin);
    }

    .home-blocco-img,
    .home-blocco--rovescio .home-blocco-img {
        grid-column: 1;
        grid-row: 2;
        margin: 30px 0 20px;
        aspect-ratio: 16 / 10;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    /* Sopra: un po' più d'aria fra la fascia dei caratteri e l'etichetta
       "Organizzazione". Sotto: 38px + i 20px di margine dell'ultima immagine
       fanno 58px, gli stessi che la sezione dopo mette fra la sua riga di
       separazione e il titolo. Prima erano 74 sopra la riga e 58 sotto, e la
       riga sembrava fuori posto. Se cambia il margine dell'immagine qui
       sopra o il padding di .home-sviluppo, il conto va rifatto. */
    body.landing-page .home-grammatica {
        padding: 70px 0 38px;
    }
}


/* ==========================================================================
   HOME — LE DUE SEZIONI FINALI
   --------------------------------------------------------------------------
   Dopo l'apertura e le due fasce della grammatica, che toccano i bordi dello
   schermo, queste rientrano nella colonna del testo: la pagina si richiude e
   si capisce che sta per finire. Sono anche diverse fra loro — una linea del
   tempo e un riquadro — così non sembrano due elenchi uno sotto l'altro.
   ========================================================================== */

/* Stessa colonna e stesso incolonnamento del resto del sito, come per il testo
   dell'apertura. La riga sopra allo sviluppo stacca dalle fasce con le
   immagini: è larga quanto il testo e non quanto la pagina, di proposito. */
body.landing-page .home-sviluppo,
body.landing-page .home-account {
    position: relative;
    z-index: 2;
    width: min(var(--larghezza-lettura), 100% - 2 * var(--side-margin));
    margin-left: auto;
    margin-right: auto;
    padding: clamp(58px, 4vw, 104px) 0;
}

/* Una riga di separazione sopra a ciascuna delle due: divide lo sviluppo dalle
   fasce della grammatica e l'account dallo sviluppo. È larga quanto il testo e
   non quanto la pagina, di proposito: accompagna l'incolonnamento invece di
   tagliare lo schermo in due. */
body.landing-page .home-sviluppo,
body.landing-page .home-account {
    border-top: 1px solid var(--border-color);
}

body.landing-page .home-sviluppo h2,
body.landing-page .home-account h2 {
    font-family: 'Outfit', var(--font-cjk);
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.12;
    color: var(--text-main);
    margin: 0 0 14px;
}

body.landing-page .home-sviluppo h2 em,
body.landing-page .home-account h2 em {
    font-style: normal;
    color: var(--primary);
}

.home-sviluppo-intro {
    font-family: 'Nunito', var(--font-cjk);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 60ch;
    margin: 0 0 46px;
}


/* --- IL PERCORSO A TRE TAPPE ---------------------------------------------
   Tre colonne con una linea che le attraversa e un pallino per ciascuna. Non
   è una decorazione: la linea parte piena dal colore del sito e si spegne
   verso destra, e solo il primo pallino è pieno. Si legge a colpo d'occhio
   dove siamo adesso e che quello che viene dopo è meno definito — che è
   esattamente quello che questa sezione deve dire. */
.home-tappe {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px;
}

.home-tappe::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: linear-gradient(
        90deg,
        var(--primary) 0%,
        rgba(var(--primary-rgb), 0.35) 46%,
        var(--border-color) 100%
    );
}

.home-tappa {
    position: relative;
    padding-top: 40px;
}

/* Il pallino sta sopra la linea e ha il fondo pieno del colore della pagina,
   altrimenti la linea gli passerebbe attraverso. */
.home-tappa::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bg-page);
    border: 2px solid rgba(var(--primary-rgb), 0.45);
}

.home-tappa--adesso::before {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.16);
}

.home-tappa-quando {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.6;
    margin-bottom: 10px;
}

/* La tappa di adesso è l'unica etichetta a colori: le altre due restano in
   tono minore perché non sono ancora vere. */
.home-tappa--adesso .home-tappa-quando {
    color: var(--accent-text);
    opacity: 1;
}

body.landing-page .home-tappa h3 {
    font-family: 'Outfit', var(--font-cjk);
    font-size: 1.14rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
}

.home-tappa p {
    font-family: 'Nunito', var(--font-cjk);
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--text-muted);
    margin: 0;
}


/* --- IL RIQUADRO DELL'ACCOUNT --------------------------------------------
   L'ultima cosa prima del piè di pagina: un riquadro solo, centrato, con
   dentro le tre cose che l'account fa davvero e i due pulsanti. Qui il
   pulsante pieno ci torna: è la fine della pagina, ed è il momento in cui si
   chiede di agire. */
.home-account-riquadro {
    background: var(--bg-card);
    border: 1px solid var(--primary);
    border-radius: 20px;
    padding: clamp(25px, 4vw, 25px);
    text-align: center;
}

/* Le tre cose che l'account fa stanno dentro questa frase e non più in un
   elenco puntato: in un riquadro corto e centrato tre spunte sotto al titolo
   pesavano più del titolo stesso. */
.home-account-intro {
    font-family: 'Nunito', var(--font-cjk);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-muted);
    max-width: 92ch;
    margin: 0 auto 32px;
}

.home-account .home-cta {
    justify-content: center;
}


/* --- Schermi stretti ------------------------------------------------------
   Le tre tappe si incolonnano e la linea del tempo si rimette in piedi: da
   orizzontale diventa verticale, con i pallini lungo il fianco sinistro. */
@media (max-width: 900px) {
    .home-tappe {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .home-tappe::before {
        top: 8px;
        bottom: 8px;
        left: 7px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(
            180deg,
            var(--primary) 0%,
            rgba(var(--primary-rgb), 0.35) 46%,
            var(--border-color) 100%
        );
    }

    .home-tappa {
        padding-top: 0;
        padding-left: 34px;
    }

    .home-sviluppo-intro {
        margin-bottom: 34px;
    }
}


/* --- PRECEDENTE / SUCCESSIVO (riquadro "Azioni") --------------------------
   I due pulsanti li scrive strumenti/genera-lezioni.py dentro il riquadro
   "Azioni", sotto a "Segna come letta". Sono collegamenti veri, gia' presenti
   nel file: servono al lettore e sono anche le uniche uscite che una lezione
   ha nel sorgente verso il resto del sito. La scritta e' fissa ("Precedente",
   "Successivo"); il titolo della lezione di arrivo sta nel `title=` e compare
   passandoci sopra.

   `grid-auto-flow: column` invece di due colonne fisse: quando ce n'e' uno
   solo (la prima e l'ultima lezione) si prende tutta la larghezza invece di
   restare mezzo vuoto. */
.lez-scorri {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
    margin-top: 10px;
}

/* Stessa pillola di "Segna come letta" qui sopra, con freccia e scritta
   centrate. Il bordo al passaggio del mouse cambia colore e non sparisce:
   con `border: none` il pulsante si restringeva di un pixel per lato. */
.lez-scorri-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 10px;                    /* alti quanto "Segna come letta" (44px) */
    border: 1px solid var(--border-color);
    border-radius: 30px;
    background: var(--bg-card);
    color: var(--text-main);
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.lez-scorri-btn:hover,
.lez-scorri-btn:focus-visible {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* La freccia non si stringe mai: a restringersi dev'essere la scritta. */
.lez-scorri-freccia {
    flex: none;
}

.lez-scorri-titolo {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


/* --- VEDI ANCHE (riquadro "Correlati") ------------------------------------
   Riportate da wip/style.css: erano state tolte dallo sfoltimento perche' in
   quel momento nessuna lezione aveva `related`, quindi le due classi non
   comparivano in nessuna pagina di def. Il riquadro lo scrive comunque
   strumenti/genera-lezioni.py, e senza queste regole uscirebbe spoglio.
   Qui servono solo le versioni `body.landing-page`: tutte le pagine che
   possono avere un riquadro correlati sono pagine di lezione, e quelle hanno
   sempre quella classe sul body. */
body.landing-page .related-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Fondo uguale a quello della colonna (`--bg-card`), cosi' il collegamento
   non pesa come un riquadro dentro al riquadro: a distinguerlo bastano il
   bordo e la riga viola a sinistra. Misura e peso del testo sono quelli
   dell'indice qui sopra (1rem, normale). */
body.landing-page .related-link {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary);
  color: var(--text-main);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 400;
  transition: all 0.2s ease;
  margin-bottom: 0;
}

body.landing-page .related-link:hover {
  background-color: var(--primary);
  color: #FFFFFF !important;
  transform: translateX(4px);
}


/* --- PAGINA 404 -----------------------------------------------------------
   Stessa impalcatura della fascia di apertura (alta quanto lo schermo meno la
   barra, e con l'overflow che taglia la trama, che sborda apposta), ma senza
   velo sfumato e senza aloni: qui non c'e' un testo lungo da rendere leggibile
   su una meta' sola, c'e' solo il numero al centro.
   La via d'uscita e' la barra in alto: logo e "Grammatica" sono li'. */
body.landing-page .pagina-404 {
    position: relative;
    overflow: hidden;
    min-height: min(calc(100vh - 80px), 780px);
    min-height: min(calc(100dvh - 80px), 780px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* `position: relative` non e' cosmetico: il fondale e' `absolute` e viene
   prima nel file, quindi senza una posizione anche il numero gli finirebbe
   sotto. */
body.landing-page .errore-404 {
    position: relative;
    max-width: 30rem;
    margin: 0 var(--side-margin);
    padding: 30px 34px;
    text-align: center;
    /* Il riquadro serve anche a leggere: sotto ci scorre la trama di
       caratteri, e senza un fondo pieno il testo piccolo ci si confonderebbe. */
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
}

body.landing-page .errore-404-numero {
    margin: 0 0 10px;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2.6rem, 7vw, 3.6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text-main);
}

/* La spiegazione: cosa e' successo e dove andare. Piccola di proposito, il
   numero sopra dice gia' tutto a chi sa leggerlo. */
body.landing-page .errore-404-testo {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-muted);
}

body.landing-page .errore-404-testo a {
    color: var(--primary);
    font-weight: 700;
}


/* --- L'ETICHETTA E' L'H1 DELLA HOME ---------------------------------------
   Essendo diventata un <h1>, la pillola si prende addosso tutte le regole di
   `body.landing-page h1` (Outfit, 1.8rem, peso 800, interlinea 1.05, margine
   sotto 25px, colore del testo), che e' piu' specifica del solo `.home-badge`
   e la stravolgerebbe. Qui si rimette ogni cosa al suo posto: verificato che
   misura, carattere, colore e spaziatura restano identici a quando era uno
   <span>. Se un giorno si tocca `.home-badge`, va guardata anche questa. */
body.landing-page .home-hero h1.home-badge {
    font-family: 'Nunito', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--accent-text);
    margin: 0 0 15px;
}