/* ============================================================
   MaestraAI — Design System "Aurora"
   Tema chiaro/scuro via [data-theme] sull'elemento <html>.
   ============================================================ */

/* ---------- Il carattere, servito da CASA NOSTRA ----------
   Prima arrivava da fonts.googleapis.com: significa che a OGNI visita il browser
   di ogni maestra andava a chiedere il file a Google, e Google ne vedeva
   l'indirizzo IP. In Germania sono arrivate sanzioni proprio per questo, ed era
   una voce in piu' da dichiarare nell'informativa privacy (13-LEGALE.md §6.1).
   Ora i due file stanno in wwwroot/fonts: 46 KB in tutto, nessuna richiesta fuori.

   Outfit e' un carattere "variabile": un solo file copre tutti gli spessori da
   300 a 800, percio' non servono file separati per grassetto e compagnia.

   I due blocchi sono divisi per alfabeto, come li divide Google: il browser
   scarica "latin-ext" SOLO se in pagina compaiono caratteri che lo richiedono.
   Il percorso e' relativo apposta (senza "/" iniziale): sotto IIS l'app vive in
   una sottocartella, e un percorso assoluto punterebbe fuori. */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fonts/outfit-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('fonts/outfit-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --font: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --radius: 22px;
    --radius-sm: 14px;

    --brand-1: #7c5cf0;
    --brand-2: #4f9cf7;
    --brand-3: #f26daa;
    --grad-brand: linear-gradient(120deg, var(--brand-1) 0%, var(--brand-2) 100%);
    --grad-warm: linear-gradient(120deg, var(--brand-3) 0%, var(--brand-1) 100%);

    --bg: #f3f1fc;
    --ink: #262045;
    --ink-soft: #6f6a92;
    --surface: rgba(255, 255, 255, 0.62);
    --surface-strong: rgba(255, 255, 255, 0.88);
    --stroke: rgba(124, 92, 240, 0.14);
    --shadow: 0 24px 60px -28px rgba(84, 62, 190, 0.35);
    --blob-opacity: 0.55;

    /* Colori del "giusto/sbagliato": erano ripetuti a mano decine di volte.
       Cambiare qui cambia soluzioni, spunte e celebrazioni ovunque. */
    --ok: #22b573;
    --ok-ink: #17915c;
    --ok-glow: #35e39b;
    --ko: #c93b5b;
    --ko-soft: #ff7d9c;
}

[data-theme="dark"] {
    /* Contrasto alzato: testo quasi bianco e secondario più chiaro (WCAG AA su tutte le superfici) */
    --bg: #0f0e20;
    --ink: #f7f5ff;
    --ink-soft: #c3bde6;
    --brand-1: #a68dff;
    --brand-2: #74b6ff;
    --brand-3: #ff92c2;
    --surface: rgba(40, 36, 78, 0.68);
    --surface-strong: rgba(48, 43, 92, 0.94);
    --stroke: rgba(255, 255, 255, 0.16);
    --shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
    --blob-opacity: 0.32;

    /* Sul fondo scuro il verde scuro non si leggerebbe: qui valgono le versioni chiare. */
    --ok-ink: #52d99a;
    --ko-soft: #ff8aa5;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* Fa adattare al tema anche i controlli nativi: tendine select, scrollbar, caret */
    color-scheme: light;
    /* Lo spazio della barra di scorrimento e' SEMPRE riservato, anche dove non serve.
       Senza, le pagine lunghe (che scorrono) sono 15 pixel piu' strette di quelle corte,
       e passando da una voce all'altra del menu tutto il contenuto si sposta di lato.
       Misurato prima della correzione: Archivio 946 px, Bacheca 961 px.

       Servono TUTTE E DUE le righe: "scrollbar-gutter" ha effetto solo su un elemento
       che scorre davvero, e con "overflow-y: visible" (il valore predefinito) veniva
       ignorata in silenzio. Con "auto" lo spazio e' riservato senza disegnare la barra
       dove non serve. I browser che non conoscono la regola la ignorano: si torna al
       comportamento di prima, non si rompe nulla. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}

[data-theme="dark"] { color-scheme: dark; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;   /* fallback per i browser integrati delle lavagne */
    min-height: 100dvh;
    transition: background 0.4s ease, color 0.4s ease;
    -webkit-font-smoothing: antialiased;
}

/* Touch delle lavagne interattive (SMART Board, Promethean) e dei tablet:
   niente ritardo di 300 ms, niente zoom da doppio tocco, niente riquadro grigio. */
button, a, .lim-option, .lim-blank, .regia-key, .regia-team, select, input, textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

::selection { background: color-mix(in srgb, var(--brand-1) 30%, transparent); }

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-2) 65%, transparent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Blazor sposta il focus sul primo <h1> a ogni cambio pagina (componente
   FocusOnNavigate in Routes.razor): serve a chi usa un lettore di schermo,
   ma i browser disegnano comunque il contorno di messa a fuoco anche se
   il focus arriva da script e non da tastiera. Il titolo non è cliccabile:
   il contorno visivo non serve a chi vede, il focus per l'accessibilità resta. */
h1:focus { outline: none; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- Sfondo animato (aurora + blob) ---------- */

.app-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background:
        radial-gradient(60% 50% at 8% 0%, color-mix(in srgb, var(--brand-1) 14%, transparent), transparent 70%),
        radial-gradient(50% 45% at 100% 20%, color-mix(in srgb, var(--brand-2) 13%, transparent), transparent 70%),
        radial-gradient(45% 45% at 40% 110%, color-mix(in srgb, var(--brand-3) 11%, transparent), transparent 70%),
        var(--bg);
    transition: background 0.4s ease;
}

.blob {
    position: absolute;
    width: 44vmax;
    height: 44vmax;
    border-radius: 50%;
    filter: blur(90px);
    opacity: var(--blob-opacity);
    animation: blob-float 26s ease-in-out infinite alternate;
}

.blob-1 { top: -18vmax; left: -12vmax; background: radial-gradient(circle, #a58bff, transparent 65%); }
.blob-2 { top: 4vmax; right: -16vmax; background: radial-gradient(circle, #6db4ff, transparent 65%); animation-delay: -8s; }
.blob-3 { bottom: -20vmax; left: 22vw; background: radial-gradient(circle, #ff9ecb, transparent 65%); animation-delay: -16s; }

@keyframes blob-float {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(5vmax, 4vmax, 0) scale(1.12); }
}

/* ---------- Utility ---------- */

.glass {
    background: var(--surface);
    backdrop-filter: blur(18px) saturate(1.35);
    -webkit-backdrop-filter: blur(18px) saturate(1.35);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--brand-1) 12%, transparent);
    color: color-mix(in srgb, var(--brand-1) 80%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--brand-1) 22%, transparent);
    white-space: nowrap;
}

.chip-phase {
    background: color-mix(in srgb, var(--brand-3) 13%, transparent);
    color: color-mix(in srgb, var(--brand-3) 75%, var(--ink));
    border-color: color-mix(in srgb, var(--brand-3) 25%, transparent);
}

.reveal { animation: reveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal:nth-of-type(2) { animation-delay: 0.08s; }
.reveal:nth-of-type(3) { animation-delay: 0.16s; }
.reveal:nth-of-type(4) { animation-delay: 0.24s; }

@keyframes reveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Struttura ---------- */

.app-shell {
    display: flex;
    gap: 1.4rem;
    padding: 1.4rem;
    max-width: 1500px;
    margin: 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    min-width: 0;
}

.page {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    padding-bottom: 2rem;
}

/* Piè di pagina con il diritto d'autore: discreto per scelta — deve esserci,
   non deve rubare attenzione al lavoro dell'insegnante. "margin-top: auto"
   lo tiene in fondo anche sulle pagine corte, senza inseguire il contenuto. */
/* Su un rigo solo quando ci sta, su due quando non ci sta: e' "flex-wrap" a
   deciderlo, non una scelta fissa. I due gruppi vanno a capo interi, e lo stacco
   fra le righe e' piu' stretto di quello fra i gruppi affiancati, cosi' su due
   righe si legge come un blocco unico invece che come due frasi separate. */
/* Il collegamento all'informativa, nei due piè di pagina (dentro l'app e sulla
   pagina di accesso). Sottolineato: in un piè di pagina grigio un link non
   sottolineato non si distingue dal testo, e questo deve trovarsi. */
.footer-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-link:hover { color: var(--brand-1); }

/* ---------- Riquadro delle Indicazioni Nazionali (Programmazione) ---------- */

.indicazioni-box {
    padding: 1.2rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Le cinque classi con il documento che vale per ciascuna: si leggono a colpo d'occhio */
.indicazioni-classi { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.indicazioni-link { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---------- Pagine legali (Privacy, e domani i Termini) ---------- */

.legal-page {
    padding: 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    line-height: 1.65;
}

.legal-page h2 {
    margin-top: 1.1rem;
    font-size: 1.15rem;
    color: var(--brand-1);
}

.legal-page p { margin: 0; }
.legal-page ul { margin: 0; padding-left: 1.3rem; }
.legal-page li { margin-bottom: 0.35rem; }

/* La tabella dei dati raccolti: su schermo stretto scorre da sola invece di
   sfondare la pagina (regola 10 applicata a una tabella). */
.legal-table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 0.4rem 0;
    font-size: 0.95rem;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--stroke);
    vertical-align: top;
}

.legal-table th { color: var(--ink); font-weight: 700; }
.legal-table td { color: var(--ink-soft); }

.legal-updated { margin-top: 1.2rem; font-style: italic; }

.app-footer {
    margin-top: auto;
    padding: 1.2rem 1rem 1.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.1rem 0.45rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--ink-soft);
    opacity: 0.75;
    text-align: center;
}

/* "Legge 633/1941" da sola non dice nulla a chi non la conosce: il tratteggio
   segnala che passandoci sopra si legge di che legge si tratta. */
.app-footer abbr {
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}

/* Sotto i 900px la barra in basso copre il fondo pagina: serve spazio, o il
   piè di pagina finisce sotto le icone e non si legge. */
@media (max-width: 900px) {
    .app-footer { padding-bottom: 5.5rem; }
}

/* ---------- Sidebar ---------- */

.sidebar {
    width: 258px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.1rem;
    position: sticky;
    top: 1.4rem;
    height: calc(100vh - 2.8rem);
    height: calc(100dvh - 2.8rem);

    /* ⚠️ RETE DI SICUREZZA, non la soluzione.
       L'altezza è fissa: senza questa riga tutto ciò che non ci sta viene TAGLIATO e
       diventa irraggiungibile — non si può nemmeno scorrere per arrivarci.
       Misurato su un portatile "HD ready" (1366×768): con la finestra vera del browser
       (~660px utili) la barra sbordava di 134px e la voce "Statistiche" spariva.
       Il rimedio vero è farla STARE (vedi il blocco @media qui sotto): questo serve a
       schermi ancora più bassi, o quando un domani si aggiungerà una voce di menu. */
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Barra di scorrimento sottile: su una barra laterale stretta quella di sistema
       si mangerebbe lo spazio delle icone. */
    scrollbar-width: thin;
}

/* Il rimedio VERO (far entrare le voci senza scorrere) sta in fondo al file, fra le
   regole responsive: qui verrebbe sovrascritto da .brand/.nav/.nav-link, definiti più
   sotto — a parità di specificità in CSS vince l'ultima regola scritta. */


.brand {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0.5rem 1.4rem;
    /* Il nome e' la prima cosa che si vede aprendo l'app: deve guidare l'occhio,
       non stare alla pari con le voci di menu. Sta su due righe per scelta
       ("Teacher" sopra, "Annalisa" sotto), quindi puo' crescere parecchio senza
       sbordare dai 258px della barra. */
    font-size: 1.95rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

/* Avatar di Teacher Annalisa: sidebar e pagina di accesso */
.brand-avatar {
    /* Cresciuto insieme al nome: l'avatar e' il volto del marchio, se resta
       piccolo accanto a un titolo grande sembra un ripensamento. */
    width: 66px;
    height: 66px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid transparent;
    background: var(--grad-brand) border-box;
    box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease;
}

.brand:hover .brand-avatar { transform: scale(1.06) rotate(-3deg); }

.brand-avatar-lg {
    width: 76px;
    height: 76px;
    border-width: 3px;
}

@supports not (background: linear-gradient(red, red) border-box) {
    .brand-avatar { border-color: #7c5cf0; }
}

.brand-ai {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nav { display: flex; flex-direction: column; gap: 0.35rem; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.78rem 0.95rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--ink-soft);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover {
    background: color-mix(in srgb, var(--brand-1) 9%, transparent);
    color: var(--ink);
    transform: translateX(3px);
}

.nav-link.active {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--brand-1) 85%, transparent);
}

.nav-icon { font-size: 1.25rem; width: 1.6rem; text-align: center; }

/* Il pallino con le richieste di accesso in attesa, sulla voce "Utenti".
   "margin-left: auto" lo spinge in fondo alla riga, staccato dal testo: si legge come una
   notifica e non come parte del nome della voce. Tondo anche con due cifre grazie a
   min-width + padding, cosi' "1" e "12" restano della stessa famiglia. */
.nav-badge {
    margin-left: auto;
    min-width: 1.45rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: var(--grad-brand);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.45rem;
    text-align: center;
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--brand-1) 85%, transparent);
}

/* Sulla voce ATTIVA lo sfondo e' gia' la sfumatura del marchio: il pallino sparirebbe
   dentro. Li' si inverte — pieno bianco, testo colorato — restando lo stesso oggetto. */
.nav-link.active .nav-badge {
    background: #fff;
    color: var(--brand-1);
    box-shadow: none;
}

/* Il collegamento alla pagina Facebook, in fondo alla barra laterale.
   "margin-top: auto" lo tiene in basso qualunque sia la lunghezza del menu. */
.sidebar-footer { margin-top: auto; padding: 0.9rem 0.4rem 0.2rem; }

.social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--ink-soft);
    text-decoration: none;
    /* Misurato: con le due icone ai lati, oltre gli 0.82rem la scritta va a capo
       e la riga perde l'equilibrio fra la "f" e l'avatar. */
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.social-link:hover { background: var(--surface-strong); color: var(--ink); }

.social-link:focus-visible { outline: 3px solid var(--brand-1); outline-offset: 2px; }

/* Il tondo blu di Facebook: e' il colore ufficiale, e si riconosce da lontano.
   Fuori dal passaggio del mouse resta un po' spento, per non tirare l'occhio
   piu' delle voci di menu vere. */
.social-icon {
    width: 1.45rem;
    height: 1.45rem;
    flex: none;
    color: #1877F2;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-link:hover .social-icon { opacity: 1; transform: scale(1.08); }

/* Il testo si prende lo spazio in mezzo: cosi' la "f" resta attaccata a
   sinistra e l'avatar in fondo a destra, in equilibrio fra loro. */
.social-label { flex: 1; }

/* L'avatar, speculare alla "f": stessa misura, stessa forma tonda, e il bordo
   sfumato del marchio come nell'intestazione della barra. */
.social-avatar {
    width: 1.45rem;
    height: 1.45rem;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid transparent;
    background: var(--grad-brand) border-box;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-link:hover .social-avatar { opacity: 1; transform: scale(1.08); }

/* ---------- Topbar ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.4rem;
}

.topbar-date {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    color: var(--ink-soft);
}

.topbar-actions { display: flex; align-items: center; gap: 0.8rem; }

.theme-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--stroke);
    background: var(--surface-strong);
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle:hover { transform: translateY(-2px) rotate(12deg); box-shadow: var(--shadow); }

.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline; }
[data-theme="dark"] .theme-icon-light { display: none; }

/* ---------- Hero ---------- */

.hero { padding: 1.2rem 0.4rem 0; }

.hero-title { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; }

/* La manina che saluta accanto al "Buongiorno".
   Il carattere per le emoji e' dichiarato apposta: l'elenco dei font della pagina
   inizia con Outfit, che di emoji non ne ha, e senza un ripiego esplicito alcuni
   browser disegnano un riquadro vuoto al posto della mano. Stessa famiglia di
   problemi delle bandiere (vedi il componente Icona): il testo e' identico
   ovunque, ma non lo e' il carattere che lo disegna.
   "background: none" e' cintura di sicurezza: nessuno deve poterci mettere
   un fondo dietro per sbaglio. */
.emoji, .wave {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
    font-variant-emoji: emoji;
    background: none;
    line-height: 1;
}

.wave { display: inline-block; animation: wave 2.4s ease-in-out infinite; transform-origin: 70% 70%; }

@keyframes wave {
    0%, 55%, 100% { transform: rotate(0); }
    60%, 75% { transform: rotate(18deg); }
    68%, 82% { transform: rotate(-10deg); }
}

.hero-sub {
    margin: 0.6rem 0 0;
    max-width: 46rem;
    font-size: 1.08rem;
    color: var(--ink-soft);
    line-height: 1.55;
}

/* Nella Guida il testo di apertura occupa tutta la larghezza: è una pagina che si
   legge, non una vetrina, e la colonna stretta lasciava mezzo schermo vuoto. */
.hero-sub-wide { max-width: none; }

.hero-link { display: inline-block; margin-top: 0.4rem; font-weight: 700; color: var(--brand-1); }
.hero-link:hover { text-decoration: underline; }

/* ---------- Bento grid ---------- */

.bento {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 1.1rem;
}

.bento-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.5rem 1.4rem;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.bento-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: var(--grad-brand);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.bento-tile:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -24px color-mix(in srgb, var(--brand-1) 45%, transparent); }
.bento-tile:hover::after { opacity: 1; }

.bento-emoji {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    font-size: 1.7rem;
    border-radius: 17px;
    background: color-mix(in srgb, var(--brand-1) 10%, transparent);
}

.bento-title { font-size: 1.22rem; }
.bento-desc { margin: 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.5; flex: 1; }

/* Testo giustificato: allinea entrambi i margini, come in un libro. Si usa solo
   sui paragrafi lunghi e distesi — su una colonna stretta il giustificato apre
   "buchi" bianchi fra le parole. La sillabazione li riduce dove il browser la sa
   fare, e "text-wrap: pretty" evita di lasciare una parola sola sull'ultima riga. */
.bento-desc-giustificato {
    text-align: justify;
    hyphens: auto;
    text-wrap: pretty;
}
.bento-tile .chip { align-self: flex-start; }

/* ---------- Materie ---------- */

.section-title { font-size: 1.25rem; padding: 0.2rem 0.4rem; }

.subject-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.7rem;
}

.subject-chip {
    --sc: #888;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Nessun nome di materia deve uscire dal riquadro, per lungo che sia (regola 10) */
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.75rem 0.95rem;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.93rem;
    color: var(--ink);
    background: color-mix(in srgb, var(--sc) 12%, var(--surface-strong));
    border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

/* In tema scuro i colori materia vanno schiariti per restare leggibili sul bordo/sfondo */
[data-theme="dark"] .subject-chip,
[data-theme="dark"] .lesson-card {
    background: color-mix(in srgb, var(--sc) 18%, var(--surface-strong));
    border-color: color-mix(in srgb, var(--sc) 55%, transparent);
}

.subject-chip:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--sc) 60%, transparent);
}

.subject-icon { font-size: 1.2rem; flex: none; }

/* Bandiere disegnate (componente Icona): Windows non ha i glifi delle bandiere
   emoji e al loro posto scrive "GB"/"IT". Queste sono SVG, quindi vanno legate
   alla dimensione del testo che le circonda: 1em di altezza e un filo sotto la
   linea di base, cosi' stanno in riga con le parole come farebbe un'emoji. */
.bandiera {
    height: 1em;
    width: auto;
    vertical-align: -0.14em;
    border-radius: 2px;
    /* Le bandiere hanno il bianco: su fondo chiaro serve un bordo, o "sparisce" */
    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.18);
}

/* ---------- Statistiche ---------- */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.1rem; }

.stat-tile { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.2rem; }

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.stat-label { color: var(--ink-soft); font-weight: 600; font-size: 0.9rem; }

/* ---------- Pagine "in arrivo" ---------- */

.coming {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 3.5rem 2rem;
}

.coming-emoji { font-size: 3.6rem; animation: float-soft 3.5s ease-in-out infinite; }

@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.coming-title { font-size: 2rem; }
.coming-desc { margin: 0; max-width: 38rem; color: var(--ink-soft); line-height: 1.6; }
.coming-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 44rem; }

/* ---------- Impostazioni: provider ---------- */

.page-head { padding: 0.6rem 0.4rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.page-head h1 { font-size: 2rem; }
.page-head p { margin: 0; color: var(--ink-soft); }

.provider-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.1rem; }

.provider-card { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.provider-name { font-size: 1.15rem; font-weight: 700; }

/* I badge della card: una riga loro, che va a capo invece di sbordare dal riquadro. */
.provider-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* overflow-wrap e non word-break: "meta-llama/Llama-3.3-70B-Instruct" si spezza solo
   se non ci sta, invece di andare a capo a meta' parola anche quando lo spazio c'e'. */
.provider-meta { color: var(--ink-soft); font-size: 0.88rem; overflow-wrap: anywhere; margin: 0; }

.badge-ok {
    background: color-mix(in srgb, var(--ok) 15%, transparent);
    color: var(--ok-ink);
    border-color: color-mix(in srgb, var(--ok) 30%, transparent);
}

.badge-warn {
    background: color-mix(in srgb, #f59e0b 15%, transparent);
    color: #b47408;
    border-color: color-mix(in srgb, #f59e0b 30%, transparent);
}

[data-theme="dark"] .badge-ok { color: var(--ok-ink); }
[data-theme="dark"] .badge-warn { color: #f7bd58; }

.note { color: var(--ink-soft); font-size: 0.92rem; padding: 0 0.4rem; }

/* L'avviso sotto i campi del Generatore: quel testo parte verso il servizio AI, e la
   maestra deve saperlo PRIMA di scrivere. Un filo piu' marcato di una nota qualsiasi
   (bordo a sinistra), ma senza allarmare: non e' un errore, e' un'informazione. */
.gen-privacy {
    margin: 0.2rem 0 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid color-mix(in srgb, var(--brand-2) 55%, transparent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: color-mix(in srgb, var(--brand-2) 8%, transparent);
    line-height: 1.5;
}

/* ---------- Form (default Blazor) ---------- */

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

/* ---------- Errori Blazor ---------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 0.9rem 1.4rem;
    border-radius: var(--radius-sm);
    background: #3b1f2b;
    color: #ffd9e2;
    box-shadow: var(--shadow);
    font-weight: 600;
}

#blazor-error-ui .reload { text-decoration: underline; margin-left: 0.5rem; }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: 0.75rem; }

.blazor-error-boundary {
    padding: 1rem 1.4rem;
    border-radius: var(--radius-sm);
    background: #b32121;
    color: #fff;
}

.blazor-error-boundary::after { content: "Si è verificato un errore in questo componente."; }

/* ---------- Responsive: tablet e telefono ---------- */

@media (max-width: 900px) {
    .app-shell { flex-direction: column; padding: 1rem 1rem 6.2rem; }

    .sidebar {
        position: fixed;
        bottom: 0.8rem;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        width: min(96vw, 560px);
        height: auto;
        flex-direction: row;
        align-items: center;
        padding: 0.55rem 0.8rem;
        z-index: 100;
    }

    .brand { display: none; }

    .nav { flex-direction: row; flex: 1 1 auto; min-width: 0; justify-content: space-around; gap: 0.1rem; }
    /* L'etichetta si NASCONDE ALLA VISTA ma resta nell'albero di accessibilità:
       con "display: none" i collegamenti del menu si presentavano a un lettore di
       schermo con la sola emoji ("casa con giardino", "stelle scintillanti"…).
       È la tecnica classica del testo solo-per-lettori: fuori flusso, 1×1 pixel,
       ritagliato — invisibile a occhio, letto dalla voce. */
    .nav-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    /* I rientri orizzontali sono in % della larghezza del dock, non fissi: con dieci
       voci (l'amministratrice le ha tutte) più la "f" di Facebook, i 0.8rem fissi
       sommavano più spazio di quanto il telefono ne abbia, e le icone finivano una
       sopra l'altra. Così invece si dividono lo spazio che c'è davvero. */
    .nav-link { padding: 0.7rem min(0.8rem, 1.6%); border-radius: 14px; flex: 0 1 auto; min-width: 0; }
    .nav-link:hover { transform: none; }
    .nav-icon { font-size: 1.45rem; width: auto; }

    /* Nella barra orizzontale non c'e' posto per "Seguimi su Facebook" per esteso:
       white-space: nowrap lo faceva sbordare dal riquadro arrotondato. Resta solo
       la "f", come le altre voci del menu che qui sono già icona-sola. */
    .sidebar-footer { flex: none; margin: 0 0 0 0.2rem; padding: 0; }
    .social-link { padding: 0.7rem; }
    .social-label, .social-avatar { display: none; }

    .topbar { padding: 0.7rem 1rem; }
    .topbar-date { font-size: 0.9rem; }
    .hero-title { font-size: 1.8rem; }
}

@media (max-width: 520px) {
    .chip-year { display: none; }
    .subject-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ============================================================
   Fase 1 — Generatore, form e viste contenuto
   ============================================================ */

/* ---------- Controlli form ---------- */

.input {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--stroke);
    background: var(--surface-strong);
    color: var(--ink);
    font: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus {
    outline: none;
    border-color: var(--brand-1);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-1) 18%, transparent);
}

.input::placeholder { color: var(--ink-soft); opacity: 0.85; }

.select { cursor: pointer; }

/* Restano per i pochi <select> nativi non ancora sostituiti (oggi nessuno) e per le
   tendine del browser che non passano da noi. Colori OPACHI: il menu nativo compone il
   semitrasparente sulla superficie chiara del sistema, non sullo sfondo dell'app. */
.select option { background-color: #fdfcff; color: #262045; }
[data-theme="dark"] .select option { background-color: #2e2958; color: #f7f5ff; }

/* ---------- Tendina disegnata dall'app (componente Tendina) ----------
   Sostituisce il <select> nativo, il cui menu lo disegna il sistema operativo: nessun
   CSS lo raggiungeva e in tema scuro lampeggiava di bianco all'apertura. Qui e' tutto
   HTML normale, quindi segue il tema come il resto della pagina. */

.tendina { position: relative; }

/* Solleva il RIQUADRO che contiene la tendina aperta, non solo il pannello.
   Motivo: ogni ".glass" ha "backdrop-filter", che crea un CONTESTO DI IMPILAMENTO —
   da lì in poi lo z-index del pannello vale solo dentro quel riquadro, e un riquadro
   successivo può disegnarglisi sopra.

   ⚠️ Onestà: cercando di riprodurre la segnalazione "la tendina sta dietro agli oggetti"
   NON sono riuscito a farla accadere (misurato a 1280×720 e 1280×800, in entrambe le
   sezioni: ogni punto del pannello visibile riceveva il clic, con e senza queste righe).
   Il difetto vero e riproducibile era un altro — il pannello si apriva fuori dallo
   schermo, vedi tendina.js. Queste righe restano come difesa: il problema di impilamento
   è reale in teoria e costano niente, ma NON sono la spiegazione di quella segnalazione.
   Se il caso si ripresenta, serve sapere dimensione della finestra e punto della pagina. */
.tendina-aperta { z-index: 95; }

.glass:has(.tendina-aperta),
section:has(.tendina-aperta),
article:has(.tendina-aperta),
.prog-form:has(.tendina-aperta),
.lettura-riga:has(.tendina-aperta) {
    position: relative;
    z-index: 60;
}

/* Eredita ".input select", quindi a riposo e' identica al vecchio campo. */
.tendina-bottone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
    cursor: pointer;
    background-color: var(--surface-strong);
}

.tendina-bottone:disabled { opacity: 0.45; cursor: not-allowed; }

/* Il testo scelto non deve spingere fuori la freccia, per lungo che sia (regola 10). */
.tendina-scelta {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    overflow: hidden;
}

.tendina-scelta .tendina-testo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tendina-segnaposto { color: var(--ink-soft); }

.tendina-icona { flex: none; display: inline-flex; align-items: center; }

.tendina-freccia {
    flex: none;
    color: var(--ink-soft);
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.tendina-bottone[aria-expanded="true"] .tendina-freccia { transform: rotate(180deg); }

/* Copre la pagina per chiudere al clic fuori. Sotto al pannello, sopra al resto. */
.tendina-fondo {
    position: fixed;
    inset: 0;
    z-index: 90;
}

.tendina-pannello {
    position: absolute;
    z-index: 91;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    min-width: 100%;
    max-height: 17rem;
    overflow-y: auto;
    padding: 0.35rem;
    border-radius: var(--radius-sm);
    /* ⚠️ COLORE PIENO, non "glass" e nessuna sfocatura.
       Il commento diceva "opaco" ma il colore non lo era: --surface-strong in tema chiaro
       è rgba(255,255,255,.88), cioè trasparente al 12%. Sopra il piè di pagina si leggeva
       il testo sottostante attraverso le voci (segnalato dall'utente sulla tendina della
       quantità nel Generatore).
       La sfocatura non salvava la situazione: un backdrop-filter dentro un elemento che ne
       ha già uno (i riquadri .glass) non ricompone lo sfondo e in pratica non fa nulla.
       Sono le stesse tinte piene scelte in v0.5.61 per lo stesso motivo: a tendina chiusa
       non cambia niente a vedersi, aperta si legge. */
    background: #fdfcff;
    border: 1.5px solid var(--stroke);
    box-shadow: 0 22px 48px -20px rgba(40, 26, 90, 0.45);
    animation: tendina-entra 0.16s ease;
}

[data-theme="dark"] .tendina-pannello {
    background: #2e2958;
    box-shadow: 0 22px 48px -18px rgba(0, 0, 0, 0.7);
}

/* Apertura verso l'ALTO, quando sotto non c'è spazio: la decide tendina.js, che è
   l'unico a sapere quanti pixel restano davvero sotto il bottone. */
.tendina-pannello-sopra {
    top: auto;
    bottom: calc(100% + 0.35rem);
    animation: tendina-entra-sopra 0.16s ease;
}

@keyframes tendina-entra {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes tendina-entra-sopra {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tendina-voce {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Bersaglio comodo al dito su LIM e iPad (regola 6) */
    min-height: 2.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    color: var(--ink);
    cursor: pointer;
    overflow-wrap: anywhere;
}

/* Una sola evidenziazione, valida sia per il mouse sia per le frecce: il mouse
   muove la stessa variabile della tastiera, cosi' non si accendono due righe. */
.tendina-voce-evidenziata { background: color-mix(in srgb, var(--brand-1) 14%, transparent); }

.tendina-voce-scelta { font-weight: 700; }

.tendina-spunta { margin-left: auto; flex: none; color: var(--ok-ink); font-weight: 700; }

@media (max-width: 600px) {
    /* Sul telefono l'elenco non deve mangiarsi tutto lo schermo */
    .tendina-pannello { max-height: 14rem; }
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.4rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none !important; }

/* L'emoji che apre un pulsante sta in una cassa sua, e dentro quella si centra.

   ⚠️ Non e' un vezzo: senza cassa, emoji ed etichetta sono UN SOLO nodo di testo dentro
   un contenitore flex, e vanno storte due cose insieme.

   La prima e' che il "gap: 0.5rem" dichiarato qui sopra NON si applica mai: con un solo
   pezzo di testo non c'e' niente da separare, e le due restano attaccate a 2,68px — la
   larghezza di uno spazio. Il gap era scritto e non ha mai fatto niente.

   La seconda e' che il pulsante centra l'AVANZO dei glifi, non l'inchiostro. L'emoji si
   porta dietro ~2px di bianco dentro la propria cassa, l'ultima lettera della parola ~0,4px:
   il testo pende a destra. Misurato contando i pixel accesi, non a occhio: 2,0px su
   "✨ Preparala", 3,6px su "🫂 Circle time". Con la cassa il bianco dell'emoji si divide
   sui due lati e la pendenza scende a 0,7px, sotto la soglia in cui l'occhio la vede.

   1,2em e' piu' stretta dell'avanzo dell'emoji (~1,37em): il glifo deborda di un pixel per
   parte, ed e' voluto — e' proprio quel debordare che ridistribuisce il bianco.

   Il carattere e' dichiarato come in .emoji: Outfit di emoji non ne ha, e senza ripiego
   esplicito qualche browser disegna un riquadro vuoto. */
.emoji-cassa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.2em;
    line-height: 1;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif;
    font-variant-emoji: emoji;
    background: none;
    /* Per i genitori che NON sono flex (.seg-btn): li' il gap non esiste, e senza questo
       margine l'emoji si incollerebbe alla parola. */
    margin-right: 0.5rem;
}

/* Dove il genitore e' flex lo spazio lo fa gia' il gap: sommarli darebbe 16px.
   Le chip hanno un gap piu' stretto (0.4rem): sono piccole, e 8px dentro una chip
   sarebbero un buco. */
.btn > .emoji-cassa,
.lim-btn > .emoji-cassa,
.chip > .emoji-cassa { margin-right: 0; }

/* ---------- Il contrappeso ----------

   Scelto dall'utente l'8 settembre 2026, dopo aver guardato le due versioni affiancate:
   «solo i larghi».

   IL PROBLEMA. L'emoji e l'etichetta stanno al centro INSIEME, come un gruppo: quindi la
   parola da sola pende a destra di ~12px, perche' l'emoji le occupa il posto a sinistra.
   Su un pulsante che si stringe sul contenuto non si nota — non c'e' vuoto attorno a cui
   confrontarla. Su un pulsante largo tutta la card si': la parola non e' dove uno se
   l'aspetta.

   LA CURA. Tre colonne, "1fr auto 1fr": l'emoji sta a destra della prima, l'etichetta in
   mezzo, e la terza resta VUOTA. Le due colonne "1fr" si pareggiano da sole, quindi la
   terza pesa esattamente quanto l'emoji e l'etichetta finisce al centro vero.
   All'etichetta non serve un elemento suo: in una griglia un pezzo di testo diventa da
   solo una cella. Il gap va azzerato — in griglia conterebbe due volte — e lo spazio lo
   fa il margine della cassa.

   ⚠️ PERCHE' NON SU TUTTI. Per centrare la parola bisogna aggiungere a destra un vuoto
   grande quanto l'emoji: un pulsante che si stringe passerebbe da 121 a 146px con un buco
   a destra, una chip da 115 a 137. Li' il rimedio si vede piu' del male. Su un pulsante
   gia' largo invece non costa niente: resta 264px, il vuoto c'era gia'.

   ⚠️ IL :has() NON E' UN VEZZO. Sette pulsanti .btn-login non hanno l'emoji (per esempio
   «← Torna all'accesso»): senza la cassa in prima colonna sarebbe l'ETICHETTA a finirci,
   spinta di lato. E se un browser non conoscesse :has(), la regola cade tutta e resta il
   comportamento di oggi: si perde il ritocco, non il pulsante. */
.btn-contrappeso:has(> .emoji-cassa),
.btn-generate:has(> .emoji-cassa),
.btn-login:has(> .emoji-cassa) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
}

.btn-contrappeso:has(> .emoji-cassa) > .emoji-cassa,
.btn-generate:has(> .emoji-cassa) > .emoji-cassa,
.btn-login:has(> .emoji-cassa) > .emoji-cassa { justify-self: end; margin-right: 0.5rem; }

/* La terza colonna: e' tutto qui il contrappeso. */
.btn-contrappeso:has(> .emoji-cassa)::after,
.btn-generate:has(> .emoji-cassa)::after,
.btn-login:has(> .emoji-cassa)::after { content: ""; }

.btn-primary {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--brand-1) 80%, transparent);
}

.btn-primary:not(:disabled):hover { transform: translateY(-2px); }

.btn-ghost {
    background: var(--surface-strong);
    border-color: var(--stroke);
    color: var(--ink);
}

.btn-ghost:not(:disabled):hover { transform: translateY(-2px); border-color: var(--brand-1); }

/* ---------- Wizard generatore ---------- */

.gen-form { padding: 1.6rem; display: flex; flex-direction: column; gap: 1.4rem; }

.field { display: flex; flex-direction: column; gap: 0.6rem; }

.field-label { font-weight: 700; font-size: 1.02rem; }

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
}

.option-btn { cursor: pointer; border: 1.5px solid transparent; font: inherit; text-align: left; }

.option-btn.selected {
    border-color: var(--brand-1);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-1) 20%, transparent);
}

.seg-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.seg-btn {
    padding: 0.6rem 1.05rem;
    border-radius: 999px;
    border: 1.5px solid var(--stroke);
    background: var(--surface-strong);
    color: var(--ink-soft);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.seg-btn.selected {
    background: var(--grad-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--brand-1) 80%, transparent);
}

.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.7rem; }

.type-card {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--surface-strong);
}

.type-emoji { font-size: 1.6rem; }
.type-name { font-weight: 800; }
.type-desc { color: var(--ink-soft); font-size: 0.85rem; }

.gen-options-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.4fr) 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
}

.btn-generate { font-size: 1.15rem; padding: 1rem 1.6rem; align-self: center; min-width: min(100%, 320px); }

/* ---------- Pannello caricamento ---------- */

.loading-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3.2rem 2rem;
    text-align: center;
}

.loading-emoji { font-size: 3.4rem; animation: loading-bounce 1.1s ease-in-out infinite; }

@keyframes loading-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-14px) scale(1.08); }
}

.loading-msg { margin: 0; font-size: 1.15rem; font-weight: 700; }

.loading-bar {
    width: min(100%, 340px);
    height: 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-1) 14%, transparent);
    overflow: hidden;
}

.loading-bar-fill {
    height: 100%;
    width: 45%;
    border-radius: 999px;
    background: var(--grad-brand);
    animation: loading-slide 1.6s ease-in-out infinite;
}

@keyframes loading-slide {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(320%); }
}

.loading-hint { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

/* ---------- Risultato ---------- */

.gen-result { padding: 1.6rem; display: flex; flex-direction: column; gap: 1.2rem; }

.gen-result-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }

.gen-result-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.gen-notes summary { cursor: pointer; font-weight: 700; color: var(--ink-soft); }
.gen-notes ul { margin: 0.5rem 0 0; color: var(--ink-soft); }

.gen-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; align-items: center; }

.gen-save-title { flex: 1; min-width: 220px; }

/* ---------- Viste contenuto (cv) ---------- */

.cv { display: flex; flex-direction: column; gap: 0.9rem; }

.cv-title { font-size: 1.45rem; }

.cv-instructions { margin: 0; font-weight: 600; color: var(--ink-soft); }

.cv-list { display: flex; flex-direction: column; gap: 1.1rem; margin: 0; padding-left: 1.3rem; }

/* Quando l'elenco mostra già il suo numero nel pallino (.cv-exnum) il marcatore
   dell'elenco sarebbe un doppione: "1. ①". */
.cv-list-own-numbers { list-style: none; padding-left: 0; }
div.cv-list { padding-left: 0; }

.cv-item { border-radius: var(--radius-sm); }

.cv-qtext { margin: 0 0 0.5rem; font-weight: 700; font-size: 1.05rem; }

.cv-exnum {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    margin-right: 0.4rem;
    border-radius: 50%;
    background: var(--grad-brand);
    color: #fff;
    font-size: 0.9rem;
}

.cv-options { display: flex; flex-direction: column; gap: 0.4rem; }

.cv-option {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--stroke);
    background: var(--surface-strong);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.cv-letter {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-1) 12%, transparent);
    font-weight: 800;
    flex-shrink: 0;
}

.cv-correct {
    border-color: var(--ok);
    background: color-mix(in srgb, var(--ok) 12%, var(--surface-strong));
}

.cv-correct .cv-letter { background: var(--ok); color: #fff; }

.cv-explanation {
    margin: 0.5rem 0 0;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-2) 10%, transparent);
    color: var(--ink);
    font-size: 0.95rem;
}

.cv-passage { line-height: 2.1; font-size: 1.08rem; margin: 0; }

.cv-reading p { margin: 0 0 0.7rem; line-height: 1.8; }

.cv-blank {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 5.5rem;
    padding: 0 0.5rem;
    border-bottom: 2.5px solid var(--brand-1);
    font-weight: 700;
    color: var(--brand-1);
    white-space: pre;
}

.cv-blank-solved { color: var(--ok-ink); border-color: var(--ok); white-space: normal; }

.cv-blank-num {
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    background: var(--brand-1);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    align-self: center;
}

.cv-blank-solved .cv-blank-num { background: var(--ok); }

.cv-wordbank {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-3) 8%, transparent);
}

.cv-wordbank-label { font-weight: 700; }

.cv-answerkey { border-top: 1.5px dashed var(--stroke); padding-top: 0.8rem; }
.cv-key-row { margin: 0.2rem 0; color: var(--ink-soft); }

.cv-writelines {
    height: 3.2rem;
    border-radius: 6px;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 1.45rem,
        var(--stroke) 1.45rem,
        var(--stroke) calc(1.45rem + 1.5px)
    );
}

/* ---------- Impostazioni: righe chiave ---------- */

.key-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.key-input { flex: 1; min-width: 0; }

.key-msg { margin: 0; font-size: 0.9rem; font-weight: 600; }
.key-ok { color: var(--ok-ink); }
.key-err { color: var(--ko); }
[data-theme="dark"] .key-ok { color: var(--ok-ink); }
[data-theme="dark"] .key-err { color: var(--ko-soft); }

/* ---------- Login ---------- */

.login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    /* Due righe: il riquadro centrato nello spazio che resta, il piè di pagina in
       fondo MA DENTRO il flusso. Prima il piè di pagina era position:absolute in
       fondo alla shell: col riquadro corto del login filava, ma su Registrati la
       card è più alta dello schermo e il link "🔒 Privacy" le galleggiava SOPRA,
       accavallato al fondo del modulo (misurato: footer a 762px, card fino a 776).
       Rilievo dell'utente, 2026-08-25. */
    grid-template-rows: 1fr auto;
    place-items: center;
    gap: 1rem;
    padding: 1.5rem;
}

.login-footer {
    text-align: center;
    font-size: 0.9rem;
}

/* ---------- Vetrina pubblica (/scopri) ----------
   "Mosaico col riflettore", scelto dall'utente fra due proposte (2026-08-25):
   le 8 funzionalità stanno TUTTE davanti agli occhi, e l'animazione non nasconde
   niente — un riflettore ne accende una alla volta (si solleva e s'illumina),
   facendo il giro del mosaico coi ritardi scalati. Niente JavaScript: passa la
   CSP, gira sul browser di una LIM, e chi ha chiesto al sistema di ridurre le
   animazioni vede il mosaico fermo. */

.vetrina {
    width: min(100%, 1080px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: 1rem 0;
}

/* La testata a due colonne (v0.7.1, idea dell'utente): benvenuto a sinistra,
   modulo d'accesso a destra — la vetrina è anche la porta d'ingresso. */
.vetrina-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
    align-items: center;
    width: 100%;
}

.vetrina-benvenuto { display: flex; flex-direction: column; gap: 0.9rem; }
.vetrina-brand { justify-content: flex-start; }

.vetrina-accesso {
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.vetrina-accesso form { display: flex; flex-direction: column; gap: 0.9rem; }
.vetrina-benvenuta { margin: 0; text-align: center; }

.vetrina-claim { margin: 0; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.25; }
.vetrina-testo { margin: 0; color: var(--ink-soft); line-height: 1.65; max-width: 62ch; font-size: 1.02rem; }

.vetrina-griglia {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    width: 100%;
}

.vetrina-mini {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.1rem 1rem;
    border-radius: var(--radius-sm);
    text-align: left;
    animation: vetrina-riflettore var(--vetrina-durata, 32s) linear infinite;
    animation-delay: calc(var(--i, 0) / var(--vetrina-n, 8) * var(--vetrina-durata, 32s));
}

.vetrina-emoji { font-size: 1.5rem; line-height: 1; }
.vetrina-titolo { font-weight: 700; font-size: 0.98rem; }
.vetrina-riga { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.45; }

.vetrina-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }

/* Il turno di UNA card, in percentuale del giro completo (8 card → 12,5% a testa):
   si accende in fretta, resta accesa quasi tutto il turno, si spegne sul cambio. */
@keyframes vetrina-riflettore {
    0%, 12.5%, 100% { transform: none; border-color: var(--stroke); box-shadow: var(--shadow); }
    2%, 10% {
        transform: translateY(-5px) scale(1.03);
        border-color: color-mix(in srgb, var(--brand-1) 65%, transparent);
        box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--brand-1) 70%, transparent);
    }
}

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

@media (max-width: 860px) {
    .vetrina-hero { grid-template-columns: 1fr; }
    .vetrina-griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .vetrina-griglia { grid-template-columns: 1fr; }
}

/* Il ponte dal login alla vetrina: un invito discreto, non un terzo pulsante. */
.login-scopri { display: block; text-align: center; color: var(--ink-soft); font-size: 0.92rem; text-decoration: none; }
.login-scopri:hover { color: var(--ink); text-decoration: underline; }

.login-card {
    /* min(100%, …) e non min(94vw, …): il 94vw ignorava il padding della shell e a
       375px di schermo la card sbordava di 2px (misurato nell'harness, v0.6.27).
       Il 100% qui è la cella della griglia, che il padding l'ha già scontato. */
    width: min(100%, 420px);
    padding: 2.4rem 2.2rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    justify-content: center;
}

.login-brand-text { color: var(--ink); }

.login-sub { margin: 0; text-align: center; color: var(--ink-soft); }

.login-card form { display: flex; flex-direction: column; gap: 1rem; }

.login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-soft);
    font-weight: 600;
    cursor: pointer;
}

.btn-login { width: 100%; font-size: 1.08rem; padding: 0.9rem; }

/* Il secondo ingresso ("non hai un account?"), staccato dal modulo di accesso.
   Una riga sottile lo separa da "Entra": sono due strade diverse, e devono sembrarlo.
   La domanda sta sopra, piccola; l'azione e' un pulsante a tutta larghezza, come
   "Torna all'accesso" sulla pagina di registrazione — le due pagine si rispondono. */
.login-alt {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
    margin: 0;
    padding-top: 1.2rem;
    border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}

.login-alt-domanda { color: var(--ink-soft); font-size: 0.94rem; }

/* Campo trappola per i programmi automatici (pagina "Chiedi l'accesso"): deve sparire
   agli occhi SENZA sparire dall'HTML, altrimenti i moduli automatici non lo trovano e
   non ci cascano. Per lo stesso motivo non si usa display:none, che alcuni riconoscono:
   resta nel flusso, ma fuori dallo schermo e non raggiungibile. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Utente / logout ---------- */

.user-chip { cursor: pointer; }
.user-chip:hover { filter: brightness(1.1); }

.logout-form { display: inline-flex; margin: 0; }

.btn-small { padding: 0.45rem 0.9rem; font-size: 0.88rem; }

/* ---------- Gestione utenti ---------- */

.users-new-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.7rem;
    align-items: center;
}

.users-list { padding: 0.6rem 1.4rem; }

.users-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 0;
    border-bottom: 1.5px solid var(--stroke);
    flex-wrap: wrap;
}

.users-row:last-child { border-bottom: none; }

.users-info { display: flex; flex-direction: column; }
.users-email { color: var(--ink-soft); font-size: 0.88rem; }
.users-actions { display: flex; align-items: center; gap: 0.6rem; }

.profile-card { max-width: 560px; }
.profile-sep { border: none; border-top: 1.5px dashed var(--stroke); margin: 0.4rem 0; }

/* ---------- Verifica in due passaggi (Profilo e /profilo/2fa) ---------- */

.prof-2fa-stato { margin: 0 0 0.5rem; color: var(--ink-soft); line-height: 1.55; }

.tfa-titolo { margin: 0 0 0.4rem; font-size: 1.25rem; }
.tfa-passi { display: flex; flex-direction: column; gap: 0.9rem; margin: 0.4rem 0 1rem; padding-left: 1.4rem; line-height: 1.6; }

/* Il QR sta su fondo BIANCO anche in tema scuro: le fotocamere leggono il
   contrasto stampato nel PNG, e un riquadro scuro attorno lo mangerebbe. */
.tfa-qr { margin: 0.7rem 0; }
.tfa-qr img { display: block; background: #fff; padding: 0.7rem; border-radius: var(--radius-sm); border: 1.5px solid var(--stroke); }

.tfa-manuale summary { cursor: pointer; color: var(--ink-soft); font-size: 0.92rem; }
.tfa-chiave { display: inline-block; margin-top: 0.4rem; padding: 0.4rem 0.7rem; border: 1.5px dashed var(--stroke); border-radius: var(--radius-sm); letter-spacing: 0.06em; overflow-wrap: anywhere; }

/* I codici di recupero: due colonne larghe, da leggere e ricopiare senza perdersi. */
.tfa-codici { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.4rem; margin: 0.9rem 0 1.2rem; padding: 0; list-style: none; }
.tfa-codici code { display: block; padding: 0.45rem 0.7rem; border: 1.5px solid var(--stroke); border-radius: var(--radius-sm); text-align: center; letter-spacing: 0.08em; }

.tfa-azioni { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.5rem 0; }
.tfa-form-inline { display: inline; }
.tfa-input-codice { max-width: 12rem; letter-spacing: 0.2em; }

.btn-danger-ghost { border-color: color-mix(in srgb, var(--ko) 45%, transparent); color: var(--ko); }
/* Come .key-err: sul fondo scuro il rosso pieno non regge, vale la versione chiara. */
[data-theme="dark"] .btn-danger-ghost { border-color: color-mix(in srgb, var(--ko-soft) 45%, transparent); color: var(--ko-soft); }

.link-indietro { display: inline-block; margin-top: 0.9rem; color: var(--ink-soft); text-decoration: none; }
.link-indietro:hover { text-decoration: underline; }

@media (max-width: 560px) {
    .tfa-codici { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .users-new-row { grid-template-columns: 1fr; }
}

/* ---------- Responsive del generatore ---------- */

@media (max-width: 900px) {
    .gen-options-row { grid-template-columns: 1fr; gap: 1rem; }
    .gen-actions { flex-direction: column; align-items: stretch; }
    .gen-save-title { min-width: 0; }
    .key-row { flex-wrap: wrap; }
}

/* ============================================================
   Fase 2 — Archivio, editor, stampa
   ============================================================ */

.archive-toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.7rem;
    padding: 0.9rem 1.1rem;
    align-items: center;
}

.archive-filter { min-width: 160px; }

.folders-bar { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }

.folder-new { display: inline-flex; gap: 0.4rem; align-items: center; }
.folder-new .input { width: 200px; padding: 0.55rem 0.85rem; }

.lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.1rem;
}

.lesson-card {
    --sc: #888;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.3rem 1.3rem 1.1rem;
    border-top: 4px solid var(--sc);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.lesson-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 50px -22px color-mix(in srgb, var(--sc) 55%, transparent);
}

.lesson-card-top { display: flex; justify-content: space-between; align-items: center; }
.lesson-icon { font-size: 1.7rem; }
.lesson-title { font-size: 1.08rem; margin: 0; }
.lesson-meta { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 0.85rem; }
.lesson-badges { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.chip-mini { font-size: 0.72rem; padding: 0.18rem 0.6rem; }

.back-link { color: var(--ink-soft); font-weight: 700; font-size: 0.9rem; }
.back-link:hover { color: var(--brand-1); }

.lesson-toolbar {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.lesson-toolbar-field { flex: 1; min-width: 200px; }

.btn-danger { color: var(--ko); border-color: color-mix(in srgb, var(--ko) 35%, transparent); }
.btn-danger:not(:disabled):hover { border-color: var(--ko); }
[data-theme="dark"] .btn-danger { color: var(--ko-soft); }

.confirm-box { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; border: 1.5px solid color-mix(in srgb, var(--ko) 40%, transparent); border-radius: var(--radius-sm); }

/* L'elenco di cosa sparisce nella conferma di cancellazione: numeri veri, non "sei sicuro?" */
.confirm-list { margin: 0; padding-left: 1.4rem; color: var(--ink-soft); line-height: 1.7; }
.confirm-list strong { color: var(--ink); }

/* ---------- Editor di rifinitura ---------- */

.editor { padding: 1.3rem; display: flex; flex-direction: column; gap: 1rem; background: color-mix(in srgb, var(--brand-2) 5%, var(--surface)); }

.editor-title { font-size: 1.15rem; }

.editor-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem;
    border-radius: var(--radius-sm);
    border: 1.5px dashed var(--stroke);
}

.editor-block-head { display: flex; justify-content: space-between; align-items: center; }

.editor-option { display: flex; gap: 0.5rem; align-items: center; }

.editor-radio {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid var(--stroke);
    background: var(--surface-strong);
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}

.editor-radio.checked { background: var(--ok); border-color: var(--ok); color: #fff; }

.editor-textarea { min-height: 90px; resize: vertical; font-family: inherit; }
.editor-textarea-tall { min-height: 160px; }

@media (max-width: 900px) {
    .archive-toolbar { grid-template-columns: 1fr; }
    .lesson-toolbar { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   Fase 3 — Modalità LIM: schermo intero, alto contrasto, touch
   ============================================================ */

.lim-stage {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, #141233 0%, #1d1a4a 55%, #241c5e 100%);
    color: #f4f2ff;
    padding: 1.2rem 1.6rem 2rem;
    gap: 1.2rem;
}

.lim-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.lim-header-title { flex: 1; font-weight: 800; font-size: 1.15rem; opacity: 0.9; }
.lim-header-tools { display: flex; gap: 0.5rem; }

.lim-content { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 1150px; width: 100%; margin: 0 auto; }


.lim-center { min-height: 70dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; }

.lim-big { font-size: clamp(1.5rem, 3.5vw, 2.3rem); font-weight: 800; text-align: center; margin: 0; }

.lim-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.5rem;
    min-height: 52px;
    border-radius: 16px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #f4f2ff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease, background 0.15s ease;
}

.lim-btn:not(:disabled):hover { background: rgba(255, 255, 255, 0.16); transform: translateY(-2px); }
.lim-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.lim-btn-primary { background: var(--grad-brand); border-color: transparent; }
.lim-btn-small { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.95rem; }

.lim-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; }
.lim-counter { font-weight: 800; opacity: 0.75; font-size: 1.1rem; }

.lim-progress { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-bottom: 1rem; }
.lim-progress-fill { height: 100%; border-radius: 999px; background: var(--grad-brand); transition: width 0.4s ease; }

/* ---------- Quiz live ---------- */

.lim-score-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.2rem; }

.lim-team {
    --tc: #4f9cf7;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--tc) 25%, transparent);
    border: 2px solid var(--tc);
    font-weight: 800;
}

.lim-team-score { font-size: 1.35rem; min-width: 1.6rem; text-align: center; }
.lim-team-score.pop { animation: score-pop 0.45s ease; }

@keyframes score-pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.7); }
    100% { transform: scale(1); }
}

.lim-team-plus {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--tc);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.lim-team-plus:hover { transform: scale(1.12); }

.lim-question-box { animation: lim-slide 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }

@keyframes lim-slide {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: none; }
}

.lim-question { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; line-height: 1.35; margin: 0 0 1.4rem; }

.lim-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 0.9rem; }

.lim-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.3rem;
    min-height: 68px;
    border-radius: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.07);
    color: #f4f2ff;
    font: inherit;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lim-option:hover { background: rgba(255, 255, 255, 0.14); }

.lim-option-letter {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    font-weight: 800;
    font-size: 1.2rem;
}

.lim-option.selected { border-color: #6db4ff; background: rgba(109, 180, 255, 0.2); }
.lim-option.correct { border-color: var(--ok-glow); background: rgba(53, 227, 155, 0.22); animation: correct-glow 0.7s ease; }
.lim-option.wrong { border-color: var(--ko-soft); background: rgba(255, 125, 156, 0.16); opacity: 0.85; }
.lim-option-check { margin-left: auto; font-size: 1.6rem; color: var(--ok-glow); }

@keyframes correct-glow {
    0% { box-shadow: 0 0 0 0 rgba(53, 227, 155, 0.7); }
    100% { box-shadow: 0 0 0 26px rgba(53, 227, 155, 0); }
}

.lim-explain {
    margin-top: 1.3rem;
    padding: 1rem 1.3rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    font-size: clamp(1.05rem, 1.8vw, 1.35rem);
    line-height: 1.5;
    animation: lim-slide 0.4s ease;
}

.lim-explain-happy { background: rgba(53, 227, 155, 0.15); }

.lim-celebrate { display: inline-block; font-size: 1.7rem; margin-right: 0.5rem; animation: celebrate 0.9s ease; }

@keyframes celebrate {
    0% { transform: scale(0) rotate(-40deg); }
    60% { transform: scale(1.6) rotate(15deg); }
    100% { transform: scale(1) rotate(0); }
}

/* ---------- Cloze live ---------- */

.lim-instructions { font-size: 1.15rem; opacity: 0.85; margin: 0 0 1rem; }

.lim-wordbank { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }

.lim-word {
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.lim-word.used { opacity: 0.35; text-decoration: line-through; }

.lim-cloze-text { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 2.2; margin: 0; }

.lim-blank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 48px;
    margin: 0 0.3rem;
    padding: 0.2rem 0.9rem;
    border-radius: 12px;
    border: 2.5px dashed rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.lim-blank:hover { background: rgba(255, 255, 255, 0.14); }
.lim-blank.open { border-style: solid; border-color: var(--ok-glow); background: rgba(53, 227, 155, 0.18); color: #7dffc8; animation: correct-glow 0.6s ease; }

.lim-blank-num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 1rem;
}

/* ---------- Lettura e scheda live ---------- */

.lim-passage { font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.9; }
.lim-passage p { margin: 0 0 1.1rem; }

.lim-exnum {
    display: inline-grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-right: 0.7rem;
    border-radius: 50%;
    background: var(--grad-brand);
    color: #fff;
    font-size: 1.3rem;
}

/* ---------- Overlay strumenti (timer, ruota, dado) ---------- */

.lim-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: rgba(10, 8, 30, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: reveal 0.25s ease;
}

.lim-modal {
    position: relative;
    width: min(94vw, 560px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 2.2rem;
    border-radius: 26px;
    background: #221e50;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8);
    color: #f4f2ff;
}

.lim-modal-title { font-size: 1.5rem; margin: 0; }
.lim-modal-emoji { font-size: 4rem; animation: celebrate 0.9s ease; }

.lim-modal-close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #f4f2ff;
    font-size: 1.1rem;
    cursor: pointer;
}

.lim-tool-row { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }

.lim-timer-display {
    font-size: clamp(3.5rem, 12vw, 6rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.lim-timer-warn { color: #ffb84d; animation: timer-pulse 1s ease infinite; }
.lim-timer-done { color: var(--ko-soft); animation: timer-pulse 0.5s ease infinite; }

@keyframes timer-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.lim-wheel-display {
    min-height: 90px;
    display: grid;
    place-items: center;
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 800;
    text-align: center;
}

.lim-wheel-display.winner { color: #7dffc8; animation: celebrate 0.8s ease; }

.lim-dice-display { font-size: clamp(6rem, 18vw, 9rem); line-height: 1; }
.lim-dice-display.rolling { animation: dice-roll 0.3s linear infinite; }

@keyframes dice-roll {
    0% { transform: rotate(-12deg) scale(0.95); }
    50% { transform: rotate(12deg) scale(1.05); }
    100% { transform: rotate(-12deg) scale(0.95); }
}

.lim-textarea {
    width: 100%;
    min-height: 200px;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #f4f2ff;
    font: inherit;
    font-size: 1.1rem;
    resize: vertical;
}

.lim-note { margin: 0; opacity: 0.75; font-size: 1rem; text-align: center; }

/* Il nome della voce in uso: è un'informazione di servizio, deve leggersi da vicino
   senza rubare spazio alla parola gigante che i bambini devono guardare. */
.lim-note-small { font-size: 0.85rem; opacity: 0.6; }

/* L'avviso sui nomi dei bambini nella ruota: deve farsi leggere, non sparire fra le
   note. Riquadro discreto, allineato a sinistra perche' e' un testo da leggere. */
.lim-note-privacy {
    text-align: left;
    opacity: 1;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

/* ---------- Pagina Guida (About) ---------- */

.about-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* Le card della guida hanno lunghezze molto diverse: a colonne si incastrano senza
   lasciare buchi, mentre in griglia le più corte si stiravano fino all'altezza della riga. */
.about-grid { columns: 2; column-gap: 1.2rem; }

.about-card {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    break-inside: avoid;
}

.about-grid .about-card { margin-bottom: 1.2rem; }

/* Dentro le card della guida il testo NON deve stirarsi (in Home invece serve,
   perché spinge il chip in fondo alla tile). */
.about-card .bento-desc { flex: none; font-size: 0.98rem; line-height: 1.6; }

.about-card .bento-title { margin: 0; }

/* Icona e titolo sulla stessa riga: la scheda si legge in un colpo d'occhio
   e si guadagna una riga di altezza su ognuna. */
.about-card-head { display: flex; align-items: center; gap: 0.85rem; }
.about-card-head .bento-emoji { flex: none; }
.about-card-head .bento-title { min-width: 0; overflow-wrap: anywhere; }

.about-list { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.6; }
.about-list strong { color: var(--ink); }
.about-list .chip { display: inline-flex; }

/* L'emoji iniziale fa già da segnaposto: il pallino in più era solo rumore.
   Il rientro sospeso allinea le righe successive sotto il testo, non sotto l'emoji. */
ul.about-list { list-style: none; padding-left: 0; }
ul.about-list > li { padding-left: 1.9rem; text-indent: -1.9rem; }

/* ⚠️ Le voci che COMINCIANO con un badge non vogliono il rientro sospeso.
   Quel rientro serve alle voci che iniziano con un'emoji (la fa sporgere a sinistra
   e allinea il testo che va a capo), ma su un badge fa un danno: il text-indent
   negativo TOGLIE 30px di larghezza alla pillola, che e' esattamente il suo padding.
   Risultato: la pillola si disegna stretta quanto il testo, il testo tocca i bordi e
   sembra uscire (misurato: naturale 114px, compressa 84px, mancano 30px = 30,4px di
   rientro). Rilievo dell'utente sul tema scuro, 2026-08-19. */
ul.about-list > li:has(> .chip:first-child) { padding-left: 0; text-indent: 0; }

ol.about-list { padding-left: 1.4rem; }
ol.about-list > li { padding-left: 0.2rem; }

/* Card di chiusura a tutta larghezza. Il testo occupava una colonna da 66ch e a
   schermo largo sembrava tagliato a metà card: l'utente ha chiesto la larghezza
   piena (2026-08-25), e col giustificato regge bene anche su righe lunghe. */
.about-closing .bento-desc { max-width: none; }

@media (max-width: 1000px) {
    .about-grid { columns: 1; }
}

/* ---------- Dettato vocale ---------- */

.lim-dictation-counter { font-size: 1.3rem; opacity: 0.8; margin: 0 0 1rem; text-align: center; }

.lim-dictation-display {
    min-height: 180px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    padding: 1.4rem;
    transition: all 0.3s ease;
}

.lim-dictation-display.speaking { border-color: #6db4ff; box-shadow: 0 0 40px -8px rgba(109, 180, 255, 0.6); }

.lim-dictation-ear { font-size: 4.5rem; animation: float-soft 2.6s ease-in-out infinite; }

.lim-dictation-text { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.6; text-align: center; margin: 0; }

/* ---------- Regia: codice sulla LIM ---------- */

.lim-regia-code {
    font-size: clamp(3.2rem, 10vw, 5rem);
    font-weight: 800;
    letter-spacing: 0.35em;
    padding-left: 0.35em;
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- Regia: telecomando (iPad/telefono) ---------- */

.regia-join { align-items: center; }

.regia-code-input {
    max-width: 260px;
    text-align: center;
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 0.4em;
}

.regia-position { font-size: 1.15rem; font-weight: 700; color: var(--brand-1); }

.regia-pad {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 0.8rem;
    padding: 1rem;
}

.regia-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 110px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--stroke);
    background: var(--surface-strong);
    color: var(--ink);
    font: inherit;
    font-size: 2rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease;
}

.regia-key span { font-size: 0.95rem; }
.regia-key:active { transform: scale(0.94); }

.regia-key-main {
    background: var(--grad-brand);
    color: #fff;
    border-color: transparent;
}

.regia-teams { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; padding: 1rem; }

.regia-team {
    --tc: #4f9cf7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.9rem;
    border-radius: var(--radius-sm);
    border: 2.5px solid var(--tc);
    background: color-mix(in srgb, var(--tc) 12%, var(--surface-strong));
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.regia-team:active { transform: scale(0.94); }
.regia-team-score { font-size: 1.9rem; }
.regia-team-plus { font-size: 0.9rem; color: color-mix(in srgb, var(--tc) 80%, var(--ink)); }

.regia-tools { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 1rem; }

/* Schermi grandi (LIM, Smartboard, monitor touch da 65-86"): sfruttiamo la larghezza
   e ingrandiamo tutto, così si legge anche dall'ultimo banco.
   NOTA: questo blocco deve restare DOPO le regole base .lim-*, altrimenti viene sovrascritto. */
@media (min-width: 1500px) {
    .lim-content { max-width: 1600px; }
    /* Massimo 2 colonne di risposte: con 3 si legge a zig-zag */
    .lim-options { grid-template-columns: repeat(2, 1fr); }
    .lim-question { font-size: clamp(2.2rem, 2.9vw, 3.2rem); }
    .lim-option { font-size: clamp(1.5rem, 1.9vw, 2.1rem); min-height: 92px; padding: 1.3rem 1.6rem; }
    .lim-option-letter { width: 60px; height: 60px; font-size: 1.6rem; }
    .lim-explain { font-size: clamp(1.4rem, 1.7vw, 1.9rem); }
    .lim-cloze-text { font-size: clamp(2rem, 2.5vw, 2.8rem); }
    .lim-passage { font-size: clamp(1.8rem, 2.2vw, 2.5rem); }
    .lim-dictation-text { font-size: clamp(2.1rem, 2.7vw, 3rem); }
    .lim-word { font-size: 1.45rem; padding: 0.6rem 1.3rem; }
    .lim-btn { font-size: 1.25rem; min-height: 64px; padding: 1rem 1.8rem; }
    .lim-team { font-size: 1.25rem; }
    .lim-team-score { font-size: 1.8rem; }
    .lim-counter { font-size: 1.4rem; }
    .lim-instructions { font-size: 1.5rem; }
}

@media (max-width: 700px) {
    .lim-stage { padding: 0.9rem 0.9rem 1.4rem; }
    .lim-header-title { order: 3; width: 100%; }
}

/* ---------- Compatibilità lavagne interattive con browser datati ----------
   I display SMART/Promethean meno recenti non supportano color-mix():
   forniamo colori pieni equivalenti per gli elementi essenziali. */

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .chip { background: rgba(124, 92, 240, 0.14); color: #6a4fd8; border-color: rgba(124, 92, 240, 0.3); }
    [data-theme="dark"] .chip { color: #cdc4ff; }
    .chip-phase { background: rgba(242, 109, 170, 0.15); color: #d54f8c; border-color: rgba(242, 109, 170, 0.3); }
    [data-theme="dark"] .chip-phase { color: #ffb9d5; }
    .badge-ok { background: rgba(34, 181, 115, 0.15); color: var(--ok-ink); }
    .badge-warn { background: rgba(245, 158, 11, 0.15); color: #b47408; }
    .subject-chip, .lesson-card { background: var(--surface-strong); border-color: var(--sc); }
    .bento-emoji, .cv-letter { background: rgba(124, 92, 240, 0.14); }
    .cv-correct { background: rgba(34, 181, 115, 0.14); }
    .cv-explanation { background: rgba(79, 156, 247, 0.12); }
    .cv-wordbank { background: rgba(242, 109, 170, 0.1); }
    .editor { background: var(--surface); }
    .regia-team { background: var(--surface-strong); }
    .lim-team { background: rgba(255, 255, 255, 0.12); }
    .loading-bar { background: rgba(124, 92, 240, 0.16); }
    :focus-visible { outline-color: #4f9cf7; }
    ::selection { background: rgba(124, 92, 240, 0.35); }
}

/* ============================================================
   Fase 4 — Programmazione: la mappa degli argomenti
   ============================================================ */

.prog-nuovo, .prog-gruppo, .prog-vuota { padding: 1.3rem 1.5rem; margin-top: 1.1rem; }

.prog-vuota { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }

/* Il riquadro d'inserimento: quattro campi in riga che diventano due su schermo stretto
   e uno solo sul telefono. Le date accanto alla materia perche' si compilano insieme. */
.prog-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.8rem;
    margin-top: 0.9rem;
}

.prog-campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.prog-campo-largo { margin-top: 0.8rem; }

.prog-label { font-weight: 600; font-size: 0.88rem; color: var(--ink-soft); }

.prog-testo { font-family: inherit; resize: vertical; min-height: 5.5rem; }

.prog-azioni { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }

.prog-aiuto { margin: 0.7rem 0 0; color: var(--ink-soft); font-size: 0.88rem; }

.prog-errore { margin: 0.8rem 0 0; color: var(--ko); font-weight: 600; }

.prog-conferma { margin: 0.8rem 0 0; color: var(--ok-ink); font-weight: 600; }

.prog-riepilogo, .prog-filtri {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.9rem 0.4rem 0;
    align-items: center;
}

.prog-elenco { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.7rem; }

/* ---------- Revisione degli argomenti letti da un documento ---------- */

.lettura-elenco { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.9rem 0; }

/* Titolo largo, i due mesi stretti e affiancati. Sotto i 700px la riga si spezza:
   su un tablet in verticale quattro colonne diventerebbero illeggibili. */
.lettura-riga {
    display: grid;
    grid-template-columns: auto 1fr 10rem 10rem;
    gap: 0.6rem;
    align-items: center;
}

@media (max-width: 700px) {
    .lettura-riga { grid-template-columns: auto 1fr; }
}

.lettura-tenere { display: flex; align-items: center; cursor: pointer; }
.lettura-tenere input { width: 1.15rem; height: 1.15rem; cursor: pointer; }

/* La riga scartata resta VISIBILE ma spenta: sparire di colpo farebbe pensare a una
   cancellazione, e togliere la spunta dev'essere un gesto che si può rifare. */
.lettura-riga-scartata { opacity: 0.45; }
.lettura-riga-scartata .input { text-decoration: line-through; }

.prog-riga {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.4rem;
    border-bottom: 1.5px solid var(--stroke);
}

.prog-riga:last-child { border-bottom: none; }

/* Quello che e' fatto resta leggibile ma si fa da parte: sbiadito, non barrato.
   Il testo barrato su una riga intera diventa faticoso da rileggere. */
.prog-svolta { opacity: 0.62; }

/* La spunta e' grande abbastanza per un dito sul tablet (regola 6): 32px sono il
   minimo sotto cui si sbaglia bersaglio. */
.prog-spunta {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 2px solid var(--stroke);
    background: var(--surface-strong);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.prog-spunta:hover { border-color: var(--brand-1); transform: scale(1.08); }

.prog-spunta-on { background: var(--ok); border-color: var(--ok); }

.prog-riga-testo { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Nessun argomento deve uscire dal riquadro, per lungo che sia (regola 10) */
.prog-titolo { font-weight: 700; overflow-wrap: anywhere; }

.prog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.prog-materia { display: inline-flex; align-items: center; gap: 0.25rem; }

/* Stato + pulsanti: un blocco solo, cosi' su schermo stretto vanno a capo insieme
   invece di essere schiacciati uno contro l'altro. "flex-wrap" serve al blocco stesso:
   con l'etichetta piu' lunga ("Materiale pronto") il cestino usciva dallo schermo. */
.prog-riga-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; flex: none; }

/* ---------- La settimana in Home ---------- */

.settimana { padding: 1.3rem 1.5rem; }

.settimana .hero-link { margin-top: 0.8rem; }

@media (max-width: 600px) {
    /* Su telefono la riga si spezza in due: sopra la spunta con l'argomento,
       sotto stato e pulsanti allineati a destra. Il blocco dei comandi prende la
       riga intera (flex-basis 100%), altrimenti resterebbe stretto accanto al testo
       e le parole uscirebbero dai bottoni. */
    .prog-riga { flex-wrap: wrap; }
    .prog-riga-azioni { flex: 1 1 100%; justify-content: flex-end; }
    .prog-riga-azioni .btn { flex: 0 1 auto; }
}

/* ---------- Ricorrenze in Home ---------- */

.ricorrenze { padding: 1.3rem 1.5rem; }

.ricorrenze-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.7rem; }

.ricorrenza-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.6rem 0.4rem;
    border-bottom: 1.5px solid var(--stroke);
}

.ricorrenza-row:last-child { border-bottom: none; }

.ricorrenza-emoji { font-size: 1.8rem; flex-shrink: 0; }

.ricorrenza-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.ricorrenza-nome { font-weight: 700; }

.ricorrenza-quando { color: var(--ink-soft); font-size: 0.85rem; }

@media (max-width: 600px) {
    .ricorrenza-row { flex-wrap: wrap; }
    .ricorrenza-row .btn { width: 100%; }

    /* ⚠️ Il contrappeso di «✨ Attività a tema» vive QUI DENTRO, e non insieme agli altri,
       perche' e' solo qui che questo pulsante e' largo: sopra i 600px si stringe sul
       contenuto, e centrare la parola vorrebbe dire allargarlo per niente. Stessa regola,
       altro posto — il posto e' l'informazione. */
    .ricorrenza-row .btn:has(> .emoji-cassa) {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 0;
    }

    .ricorrenza-row .btn:has(> .emoji-cassa) > .emoji-cassa {
        justify-self: end;
        margin-right: 0.5rem;
    }

    .ricorrenza-row .btn:has(> .emoji-cassa)::after { content: ""; }
}

/* ---------- "Ripeti dopo di me" ---------- */

.lim-modal-wide { width: min(94vw, 700px); }

.lim-pronuncia-display {
    width: 100%;
    min-height: 140px;
    display: grid;
    place-items: center;
    padding: 1rem 1.4rem;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.15);
    font-size: clamp(2rem, 6vw, 3.4rem);
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
    transition: all 0.3s ease;
}

.lim-pronuncia-display.speaking {
    border-color: #6db4ff;
    box-shadow: 0 0 40px -8px rgba(109, 180, 255, 0.6);
}

.lim-btn-danger {
    background: rgba(255, 125, 156, 0.2);
    border-color: var(--ko-soft);
}

/* ---------- Statistiche ---------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.1rem;
}

.stats-table { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.6rem; }

.stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 0.6rem;
    padding: 0.55rem 0.3rem;
    border-bottom: 1px solid var(--stroke);
    font-size: 0.9rem;
    align-items: center;
}

.stats-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ⚠️ Una tabella a CINQUE colonne dentro un terzo di pagina non ci sta: nel riquadro
   dei provider (355px) ogni colonna riceveva 60px, e uscivano "Go..." e "Git...", coi
   token già tagliati da prima. Chi legge non impara niente da una tabella troncata.
   Questa riga la fa occupare tutta la larghezza, e le sue colonne prendono la misura
   dal contenuto invece che a fette uguali. Su telefono le stesse colonne
   restano in fila e la tabella scorre di lato (vedi più sotto). */
.stats-card-larga { grid-column: 1 / -1; }

.stats-card-larga .stats-row { grid-template-columns: minmax(11rem, 1.6fr) repeat(2, minmax(6rem, 1fr)) minmax(7.5rem, 1fr) minmax(7rem, 1fr); }

/* ⚠️ La tabella del costo ha TRE colonne, non quattro: la quarta era uno <span> vuoto
   che si prendeva 1.4fr (il 40% della riga) per non mostrare niente, e intanto
   "Media per contenuto" e "Ultimi 30 giorni" uscivano tagliati. */
.stats-row-costo { grid-template-columns: minmax(8.6rem, 1.5fr) minmax(3.5rem, 1fr) minmax(4.5rem, 1fr); }

/* La tabella "chi ha creato che cosa" ha più colonne delle altre */
.stats-row-utenti { grid-template-columns: 1.2fr 1.6fr 1fr 0.7fr 0.8fr 0.9fr 1fr; }

@media (max-width: 900px) {
    /* Su schermo stretto l'email è la colonna più sacrificabile: c'è già in Utenti */
    .stats-row-utenti { grid-template-columns: 1.2fr 1fr 0.6fr 0.8fr 0.9fr 1.2fr; }
    .stats-col-email { display: none; }
}

.stats-row-head {
    font-weight: 800;
    color: var(--ink-soft);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--stroke);
}

.stats-good { color: var(--ok-ink); font-weight: 700; }
.stats-bad { color: var(--ko); font-weight: 700; }
[data-theme="dark"] .stats-good { color: var(--ok-ink); }
[data-theme="dark"] .stats-bad { color: var(--ko-soft); }

.stats-bar-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.9fr) 2fr auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.4rem 0;
}

.stats-bar-label { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.stats-bar-track {
    height: 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-1) 10%, transparent);
    overflow: hidden;
}

.stats-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--grad-brand);
    transition: width 0.5s ease;
}

.stats-bar-count { font-weight: 800; min-width: 2ch; text-align: right; }

@media (max-width: 700px) {
    /* ⚠️ Prima queste tabelle si ripiegavano su due colonne: i titoli finivano tutti
       da una parte e i valori dall'altra, e non si capiva più quale numero fosse quale
       ("PROVIDER SUCCESSO DURATA MEDIA" sopra, "Google Gemini 15 87%" sotto).
       Su telefono la tabella scorre di lato: ogni colonna resta sotto il suo titolo,
       come su un foglio. */
    .stats-table { overflow-x: auto; }
    .stats-row { width: 39rem; }
    .stats-card-larga .stats-row { width: 45rem; }
    .stats-row-utenti { width: 50rem; }
    /* Tre colonne corte: nel telefono ci stanno già, niente scorrimento. */
    .stats-row-costo { width: auto; }
}

/* ---------- Impostazioni: la dotazione condivisa e i serbatoi ---------- */

/* La dotazione della scuola: righe di sola lettura, presente/assente e basta.
   Le chiavi condivise NON si mostrano e non si toccano da qui (riprogettazione
   30/08/2026, chiesta dall'utente: tre chiavi su cinque erano finite nel
   serbatoio sbagliato perche' le due famiglie si confondevano). */
.dotazione-riga {
    display: grid; grid-template-columns: minmax(10rem, 1.4fr) auto minmax(7rem, 1fr); gap: 0.8rem;
    align-items: center; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--stroke);
}
.dotazione-riga:last-child { border-bottom: none; }
.dotazione-nome { font-weight: 700; }
.dotazione-ruolo { text-align: right; }

@media (max-width: 700px) {
    .dotazione-riga { grid-template-columns: 1fr auto; }
    .dotazione-ruolo { display: none; }
}

/* I consumi divisi per serbatoio: "solo io" e "tutte insieme". */
.consumo-gruppo { margin-top: 1.2rem; }
.consumo-gruppo h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.consumo-spenti { margin-top: 1.1rem; }
.etichetta-serbatoio {
    display: inline-block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.05em; padding: 0.15rem 0.55rem; border-radius: 999px; margin-left: 0.4rem;
    vertical-align: middle;
}
.serb-mio { background: rgba(52, 199, 89, 0.16); color: #1d7a3d; }
.serb-tutte { background: rgba(255, 159, 10, 0.16); color: #a05a00; }
[data-theme="dark"] .serb-mio { color: #7ee2a0; }
[data-theme="dark"] .serb-tutte { color: #ffc069; }

/* ---------- Quote AI ---------- */

.quota-alert {
    padding: 0.9rem 1.3rem;
    border: 1.5px solid color-mix(in srgb, #f59e0b 45%, transparent);
    background: color-mix(in srgb, #f59e0b 12%, var(--surface));
    font-weight: 600;
}

.quota-list { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 0.7rem; }

.quota-row { display: flex; flex-direction: column; gap: 0.4rem; }

.quota-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }

.quota-name { font-weight: 700; font-size: 1.02rem; }

.quota-bar-track {
    height: 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-1) 10%, transparent);
    overflow: hidden;
}

.quota-bar-fill { height: 100%; border-radius: 999px; transition: width 0.6s ease; }
.quota-ok { background: linear-gradient(90deg, var(--ok), var(--ok-glow)); }
.quota-attenzione { background: linear-gradient(90deg, #f59e0b, #ffc46b); }
.quota-critico { background: linear-gradient(90deg, var(--ko), var(--ko-soft)); }

.quota-detail {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--ink-soft);
    font-size: 0.86rem;
    font-weight: 600;
}

.quota-reset { font-style: italic; }

.quota-note { margin: 0; color: var(--ink-soft); font-size: 0.82rem; }

/* ---------- Grafico andamento ---------- */

.timeline-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.35rem;
    height: 170px;
    margin-top: 0.9rem;
    padding-bottom: 1.4rem;
}

.timeline-col {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.timeline-bar {
    width: 100%;
    min-height: 3px;
    border-radius: 6px 6px 0 0;
    background: var(--grad-brand);
    transition: height 0.6s ease;
}

.timeline-label {
    position: absolute;
    bottom: -1.3rem;
    font-size: 0.68rem;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* ---------- Cruciverba (vista scheda) ---------- */

.xw-grid {
    display: grid;
    grid-template-columns: repeat(var(--xw-cols), minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    max-width: min(100%, calc(var(--xw-cols) * 46px));
    margin: 1rem 0 1.4rem;
}

.xw-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--ink-soft);
    border-radius: 4px;
    background: var(--surface-strong);
    font-weight: 800;
    font-size: clamp(0.8rem, 2vw, 1.15rem);
    text-transform: uppercase;
}

.xw-cell-off { border: none; background: transparent; }

.xw-num {
    position: absolute;
    top: 1px;
    left: 3px;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--ink-soft);
    line-height: 1;
}

.xw-letter { color: var(--brand-1); }

.xw-clues { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1.2rem; }

.xw-clue-head { margin: 0 0 0.5rem; font-size: 1.02rem; }

.xw-clue-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; }

.xw-clue-list li { line-height: 1.45; }

.xw-solution {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: rgba(34, 181, 115, 0.16);
    color: var(--ok-ink);
    font-weight: 800;
    letter-spacing: 0.06em;
}

[data-theme="dark"] .xw-solution { color: var(--ok-ink); }

/* ---------- Parole intrecciate (vista scheda) ---------- */

.ws-grid {
    display: grid;
    grid-template-columns: repeat(var(--ws-cols), minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    max-width: min(100%, calc(var(--ws-cols) * 42px));
    margin: 1rem 0 1.4rem;
}

.ws-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--surface);
    font-weight: 700;
    font-size: clamp(0.75rem, 1.9vw, 1.05rem);
    letter-spacing: 0.02em;
}

.ws-cell-found {
    background: rgba(34, 181, 115, 0.22);
    color: var(--ok-ink);
    font-weight: 900;
}

[data-theme="dark"] .ws-cell-found { color: #7dffc8; }

.ws-word-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 0.5rem;
}

.ws-word { display: flex; flex-direction: column; gap: 0.1rem; }

.ws-word-text { font-weight: 800; letter-spacing: 0.08em; }

.ws-word-clue { color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- Caccia al tesoro (vista scheda) ---------- */

.th-intro {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1.5px dashed var(--stroke);
    margin-bottom: 1.2rem;
}

.th-intro p { margin: 0; line-height: 1.65; }

.th-intro-icon { font-size: 1.5rem; }

.th-stage { padding-bottom: 0.6rem; }

.th-story { margin: 0 0 0.5rem; font-style: italic; color: var(--ink-soft); }

.th-question { margin: 0 0 0.6rem; font-weight: 700; }

.th-hint { margin: 0.4rem 0 0; color: var(--ink-soft); font-size: 0.9rem; }

.th-code {
    margin-left: 0.5rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: var(--grad-warm);
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
}

.th-treasure {
    margin-top: 1.2rem;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1.5px solid var(--stroke);
}

.th-treasure p { margin: 0.3rem 0 0; }

.th-final { font-size: 1.05rem; letter-spacing: 0.1em; }

/* ---------- Problemi di matematica ---------- */

.mp-problem { padding-bottom: 0.5rem; }

.mp-data {
    display: flex;
    gap: 0.7rem;
    align-items: baseline;
    padding: 0.6rem 0.9rem;
    margin: 0.5rem 0;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1.5px solid var(--stroke);
}

.mp-data-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-1); }
.mp-data ul { margin: 0; padding-left: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; }

.mp-question { margin: 0.5rem 0; font-weight: 700; }

.mp-answer-line { margin: 0.7rem 0 0; font-weight: 600; display: flex; align-items: baseline; gap: 0.5rem; }
.mp-answer-space { flex: 1; border-bottom: 1.5px solid var(--stroke); min-width: 8rem; }

.mp-solution {
    margin-top: 0.6rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    background: rgba(34, 181, 115, 0.09);
    border: 1.5px solid rgba(34, 181, 115, 0.3);
}

.mp-solution-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ok-ink); }

.mp-steps { margin: 0.4rem 0 0.6rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.mp-steps li { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; align-items: baseline; }

.mp-step-desc { color: var(--ink-soft); }

.mp-operation {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.mp-unit { color: var(--ink-soft); font-weight: 600; margin-left: 0.3rem; }

.mp-operation-edit { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.mp-num { width: 6.5rem; }
.mp-op { width: 4.5rem; }
.mp-unit-edit { width: 6rem; }
.mp-equals { font-weight: 800; }

.mp-result {
    min-width: 4rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    background: rgba(34, 181, 115, 0.16);
    color: var(--ok-ink);
    font-weight: 800;
    text-align: center;
}

[data-theme="dark"] .mp-result,
[data-theme="dark"] .mp-solution-label { color: var(--ok-ink); }

/* ---------- Flashcard ---------- */

.fc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0.9rem; }

.fc-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 2px dashed var(--stroke);
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 118px;
}

.fc-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 0.7rem 0.6rem; text-align: center; }

/* La linea di mezzo è la piega: la carta si ritaglia e si piega lì */
.fc-back { border-left: 2px dotted var(--stroke); background: var(--surface); }

.fc-emoji { font-size: 1.9rem; line-height: 1; }
.fc-word { font-weight: 800; font-size: 1.02rem; overflow-wrap: anywhere; }
.fc-meaning { font-weight: 700; overflow-wrap: anywhere; }
.fc-example { font-size: 0.8rem; color: var(--ink-soft); font-style: italic; line-height: 1.35; }
.fc-hidden { color: var(--ink-soft); letter-spacing: 0.3em; }

.fc-emoji-edit { width: 5rem; text-align: center; font-size: 1.2rem; }

/* ---------- Esperimento ---------- */

.ex-question {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-sm);
    background: var(--grad-brand);
    color: #fff;
    margin-bottom: 0.9rem;
}

.ex-question p { margin: 0; font-weight: 700; font-size: 1.06rem; }
.ex-question-icon { font-size: 1.6rem; }

.ex-safety {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: rgba(245, 158, 11, 0.14);
    border: 1.5px solid rgba(245, 158, 11, 0.4);
    font-weight: 600;
}

.ex-materials { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0.4rem; }
.ex-materials li { display: flex; align-items: center; gap: 0.5rem; }

.ex-check {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    border: 1.8px solid var(--ink-soft);
    border-radius: 4px;
}

.ex-steps { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; line-height: 1.55; }

.ex-warning { display: block; margin-top: 0.2rem; font-size: 0.85rem; color: #b45309; font-weight: 600; }
[data-theme="dark"] .ex-warning { color: #fbbf24; }

.ex-explanation { margin: 0.4rem 0 0; line-height: 1.6; }

.users-reset {
    padding: 0.9rem 1.1rem 1.1rem;
    border-bottom: 1px solid var(--stroke);
    background: color-mix(in srgb, var(--brand-1) 6%, transparent);
}

.users-reset .note { margin-bottom: 0.6rem; padding: 0; }

/* ---------- Chiavi API ---------- */

.keys-warning { padding: 0.9rem 1.2rem; }
.keys-warning p { margin: 0; line-height: 1.6; }

.keys-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
}

.keys-cta p { margin: 0; }

/* ---------- Bacheca delle colleghe ---------- */

.board-author { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--brand-1); }

.board-note {
    margin: 0;
    font-size: 0.88rem;
    font-style: italic;
    color: var(--ink-soft);
    line-height: 1.45;
    /* Le presentazioni lunghe non devono sfondare la card: si tagliano a tre righe. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.board-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.3rem; }

.board-sharenote { padding: 0.9rem 1.2rem; }
.board-sharenote p { margin: 0; font-style: italic; color: var(--ink-soft); line-height: 1.6; }

/* ---------- Percorso narrativo (vista scheda) ---------- */

.st-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }

.st-copyright {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1.5px dashed var(--stroke);
}

.st-passage {
    padding: 1.1rem 1.3rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1.5px solid var(--stroke);
    margin-bottom: 1.4rem;
}

.st-passage p { margin: 0 0 0.9rem; line-height: 1.85; font-size: 1.04rem; }
.st-passage p:last-child { margin-bottom: 0; }

.st-block { margin-bottom: 1.5rem; }

.st-vocab { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; }

.st-sequence { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }

.st-sequence-mixed { list-style: none; padding-left: 0; }

.st-seq-box {
    display: inline-block;
    width: 1.7rem;
    height: 1.7rem;
    margin-right: 0.5rem;
    border: 1.8px solid var(--ink-soft);
    border-radius: 6px;
    vertical-align: middle;
}

.st-activities { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0.8rem; }

.st-activity {
    padding: 0.8rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1.5px solid var(--stroke);
}

.st-activity p { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 0.94rem; line-height: 1.55; }

.st-phase {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--brand-1);
}

.st-phase-durante { color: var(--brand-2); }
.st-phase-dopo { color: var(--brand-3); }

.st-extra { display: flex; flex-direction: column; gap: 0.6rem; }
.st-extra p { margin: 0; line-height: 1.6; }

.st-links { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }

.editor-phase { max-width: 210px; }

/* ---------- Racconto alla LIM ---------- */

.st-lim-passage {
    font-size: clamp(1.3rem, 2.5vw, 2.1rem);
    line-height: 1.75;
    max-width: 34ch;
    margin: 0 auto;
    text-align: left;
}

.st-lim-word {
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 900;
    text-align: center;
    margin: 0 0 1rem;
}

.st-lim-meaning {
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
    text-align: center;
    max-width: 40ch;
    margin: 0 auto;
    opacity: 0.9;
}

.st-lim-steps { display: flex; flex-direction: column; gap: 0.6rem; max-width: 900px; margin: 0 auto; width: 100%; }

.st-lim-step {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1.1rem;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font: inherit;
    font-size: clamp(1rem, 1.9vw, 1.35rem);
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    min-height: 56px;
}

.st-lim-step.done { border-color: var(--ok-glow); background: rgba(53, 227, 155, 0.22); animation: correct-glow 0.7s ease; }
.st-lim-step.oops { border-color: var(--ko-soft); background: rgba(255, 125, 156, 0.18); animation: shake 0.5s ease; }

.st-lim-num {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    background: rgba(255, 255, 255, 0.16);
}

.st-lim-step.done .st-lim-num { background: var(--ok-glow); color: #08221a; }

/* ---------- Giochi alla LIM ---------- */

.lim-puzzle { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.lim-xw-grid,
.lim-ws-grid {
    display: grid;
    gap: 3px;
    width: 100%;
    max-width: min(96vw, calc(var(--xw-cols, 12) * 64px));
    margin: 0 auto;
}

.lim-xw-grid { grid-template-columns: repeat(var(--xw-cols), minmax(0, 1fr)); }
.lim-ws-grid { grid-template-columns: repeat(var(--ws-cols), minmax(0, 1fr)); max-width: min(92vh, 96vw); }

.lim-xw-cell,
.lim-ws-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.22);
    font-weight: 800;
    font-size: clamp(0.9rem, 2.4vw, 1.9rem);
    text-transform: uppercase;
    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.lim-xw-cell-off { background: transparent; border-color: transparent; }

.lim-xw-cell.current { border-color: #6db4ff; background: rgba(109, 180, 255, 0.22); }

.lim-xw-cell.solved { border-color: var(--ok-glow); background: rgba(53, 227, 155, 0.25); animation: correct-glow 0.7s ease; }

.lim-xw-num {
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    opacity: 0.65;
    line-height: 1;
}

.lim-ws-cell { cursor: pointer; user-select: none; touch-action: manipulation; }

.lim-ws-cell.marked { border-color: #ffd166; background: rgba(255, 209, 102, 0.28); transform: scale(1.06); }

.lim-ws-cell.found { border-color: var(--ok-glow); background: rgba(53, 227, 155, 0.3); animation: correct-glow 0.7s ease; }

.lim-clue {
    font-size: clamp(1.2rem, 2.6vw, 2rem);
    font-weight: 800;
    text-align: center;
    line-height: 1.35;
    margin: 0;
    min-height: 2.2em;
}

.lim-clue-dir { opacity: 0.7; font-size: 0.7em; margin-right: 0.4rem; }

.lim-word-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

.lim-find-word {
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    font: inherit;
    font-weight: 800;
    letter-spacing: 0.08em;
    min-height: 48px;
    cursor: pointer;
    touch-action: manipulation;
}

.lim-find-word.found { border-color: var(--ok-glow); background: rgba(53, 227, 155, 0.22); text-decoration: line-through; opacity: 0.75; }

/* ---------- Caccia al tesoro alla LIM ---------- */

.lim-th-story {
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    line-height: 1.6;
    text-align: center;
    max-width: 60ch;
    margin: 0 auto 1.2rem;
    opacity: 0.9;
}

.lim-th-stagename { font-size: clamp(1.3rem, 3vw, 2.2rem); font-weight: 900; text-align: center; margin: 0 0 0.6rem; }

.lim-th-codes { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.2rem; }

.lim-th-slot {
    width: 3rem;
    height: 3.6rem;
    border-radius: 10px;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 900;
}

.lim-th-slot.filled {
    border-style: solid;
    border-color: #ffd166;
    background: rgba(255, 209, 102, 0.2);
    animation: code-pop 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes code-pop {
    0% { transform: scale(0.4) rotate(-12deg); opacity: 0; }
    60% { transform: scale(1.18) rotate(4deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}

.lim-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; max-width: 320px; margin: 0 auto; }

.lim-key {
    min-height: 64px;
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.09);
    color: inherit;
    font: inherit;
    font-size: 1.6rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}

.lim-key:active { transform: scale(0.95); }

.lim-th-display {
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: 0.3em;
    text-align: center;
    min-height: 1.4em;
    margin: 0 0 0.8rem;
}

.lim-th-display.wrong { color: var(--ko-soft); animation: shake 0.5s ease; }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

.lim-treasure-open {
    font-size: clamp(4rem, 14vw, 9rem);
    text-align: center;
    animation: treasure-open 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes treasure-open {
    0% { transform: scale(0.2) rotate(-20deg); opacity: 0; }
    55% { transform: scale(1.25) rotate(8deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); }
}

/* ---------- Problemi alla LIM ---------- */

.lim-math-data { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0; }

.lim-math-datum {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.22);
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    font-weight: 700;
    animation: lim-slide 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lim-math-question {
    font-size: clamp(1.3rem, 2.6vw, 2rem);
    font-weight: 800;
    margin: 1rem 0;
    animation: lim-slide 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lim-math-steps { margin: 1rem 0 0; padding-left: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }

.lim-math-steps li { animation: lim-slide 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }

.lim-math-desc { display: block; opacity: 0.75; font-size: clamp(0.95rem, 1.6vw, 1.2rem); }

.lim-math-op {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: clamp(1.3rem, 2.6vw, 2.1rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.03em;
}

/* ---------- Flashcard alla LIM ---------- */

.lim-cards { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.lim-card {
    width: min(680px, 92vw);
    aspect-ratio: 16 / 9;
    max-height: 46vh;
    perspective: 1400px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    touch-action: manipulation;
    /* Un <button> non eredita da solo colore e font: senza queste due righe
       la parola uscirebbe nera sul fondo scuro della LIM. */
    color: inherit;
    font: inherit;
}

.lim-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lim-card.girata .lim-card-inner { transform: rotateY(180deg); }

.lim-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem;
    border-radius: 24px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: inherit;
    text-align: center;
}

.lim-card-back { transform: rotateY(180deg); background: var(--grad-brand); border-color: transparent; }

.lim-card-emoji { font-size: clamp(3rem, 9vw, 6rem); line-height: 1; }
.lim-card-word { font-size: clamp(2rem, 6vw, 4rem); font-weight: 900; overflow-wrap: anywhere; }
.lim-card-meaning { font-size: clamp(1.8rem, 5vw, 3.4rem); font-weight: 900; overflow-wrap: anywhere; }
.lim-card-example { font-size: clamp(1rem, 2.2vw, 1.5rem); font-style: italic; opacity: 0.92; max-width: 30ch; }

/* ---------- Esperimento alla LIM ---------- */

.lim-exp-question { font-size: clamp(1.4rem, 3.2vw, 2.4rem); font-weight: 800; text-align: center; line-height: 1.35; margin: 0 0 1rem; }

.lim-exp-title { font-size: clamp(1.2rem, 2.6vw, 1.9rem); font-weight: 800; text-align: center; margin: 0 0 1rem; }

.lim-exp-step-num { text-align: center; opacity: 0.7; font-weight: 700; margin: 0 0 0.6rem; }

.lim-exp-materials { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }

.lim-exp-material {
    padding: 0.7rem 1.2rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.22);
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-weight: 700;
}

.lim-exp-safety {
    margin-top: 1rem;
    padding: 0.8rem 1.1rem;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.2);
    border: 2px solid rgba(245, 158, 11, 0.5);
    font-size: clamp(1rem, 1.9vw, 1.3rem);
    font-weight: 700;
    text-align: center;
}

.lim-exp-questions {
    margin: 0;
    padding-left: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
    line-height: 1.5;
}

/* ---------- Accessibilità: riduzione movimento ---------- */

@media (prefers-reduced-motion: reduce) {
    .blob, .wave, .coming-emoji, .reveal, .loading-emoji, .loading-bar-fill,
    .lim-question-box, .lim-celebrate, .lim-timer-warn, .lim-timer-done,
    .lim-dice-display.rolling, .lim-modal-emoji,
    .lim-th-slot.filled, .lim-th-display.wrong, .lim-treasure-open,
    .lim-xw-cell.solved, .lim-ws-cell.found,
    .st-lim-step.done, .st-lim-step.oops,
    .lim-math-datum, .lim-math-question, .lim-math-steps li,
    .tendina-pannello { animation: none !important; }
    .lim-card-inner { transition: none !important; }
    * { transition-duration: 0.01ms !important; }
}

/* ---------- Dialogo: scheda stampabile e vista in pagina ---------- */

.dlg-situazione {
    margin: 0.8rem 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-1) 8%, transparent);
    font-weight: 600;
}

.dlg-ruoli { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }

.dlg-ruolo { padding: 0.3rem 0.7rem; border-radius: 999px; font-weight: 700; font-size: 0.9rem; }

/* Due colori diversi per le due parti: un bambino deve trovare le proprie battute
   scorrendo la pagina con l'occhio, senza rileggere ogni riga. */
.dlg-ruolo-a, .dlg-riga-a .dlg-chi { background: color-mix(in srgb, #2563eb 16%, transparent); color: #1d4ed8; }
.dlg-ruolo-b, .dlg-riga-b .dlg-chi { background: color-mix(in srgb, #9333ea 16%, transparent); color: #7e22ce; }

[data-theme="dark"] .dlg-ruolo-a, [data-theme="dark"] .dlg-riga-a .dlg-chi { color: #93c5fd; }
[data-theme="dark"] .dlg-ruolo-b, [data-theme="dark"] .dlg-riga-b .dlg-chi { color: #d8b4fe; }

.dlg-battute { display: flex; flex-direction: column; gap: 0.55rem; }

.dlg-riga { display: flex; gap: 0.7rem; align-items: flex-start; }

.dlg-chi {
    flex: none;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.9rem;
}

.dlg-testo { display: flex; flex-direction: column; gap: 0.1rem; }

/* Il nome sopra la battuta: è la correzione al problema "non capivo chi parlava".
   Piccolo e in maiuscoletto perché non deve competere con la frase, solo etichettarla. */
.dlg-nome {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.65;
}

.dlg-riga-a .dlg-nome { color: #1d4ed8; }
.dlg-riga-b .dlg-nome { color: #7e22ce; }
[data-theme="dark"] .dlg-riga-a .dlg-nome { color: #93c5fd; }
[data-theme="dark"] .dlg-riga-b .dlg-nome { color: #d8b4fe; }

.dlg-frase { font-size: 1.05rem; }

.dlg-traduzione { font-size: 0.86rem; opacity: 0.7; font-style: italic; }

.dlg-suggerimento { margin-top: 0.6rem; }

.dlg-parole { margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* ---------- Dialogo alla LIM ---------- */

.lim-dialogo { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.lim-dlg-situazione { text-align: center; font-size: 1.3rem; opacity: 0.85; margin: 0; }

.lim-dlg-ruoli { display: flex; justify-content: center; gap: 1.2rem; }

.lim-dlg-ruolo { padding: 0.35rem 1rem; border-radius: 999px; font-weight: 700; font-size: 1.05rem; }
.lim-dlg-a { background: color-mix(in srgb, #2563eb 22%, transparent); }
.lim-dlg-b { background: color-mix(in srgb, #9333ea 22%, transparent); }

.lim-dlg-copione {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    max-height: 46vh;
    overflow-y: auto;
    padding: 0.4rem;
}

.lim-dlg-battuta { display: flex; gap: 0.9rem; align-items: flex-start; }

/* Le battute già dette restano visibili ma spente: servono a non perdere il filo,
   non a essere lette. Quella corrente è grande, perché la si legge dal fondo dell'aula. */
.lim-dlg-battuta.passata { opacity: 0.42; font-size: 1.3rem; }
.lim-dlg-battuta.corrente { font-size: 2.1rem; font-weight: 600; }

.lim-dlg-chi {
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 1.2rem;
}

.lim-dlg-batt-a .lim-dlg-chi { background: color-mix(in srgb, #2563eb 25%, transparent); }
.lim-dlg-batt-b .lim-dlg-chi { background: color-mix(in srgb, #9333ea 25%, transparent); }

.lim-dlg-testo { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; }

.lim-dlg-nome {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.6;
}

.lim-dlg-batt-a .lim-dlg-nome { color: #93c5fd; }
.lim-dlg-batt-b .lim-dlg-nome { color: #d8b4fe; }

.lim-dlg-traduzione { font-size: 1.1rem; opacity: 0.7; font-style: italic; }

.lim-dlg-varianti { text-align: center; opacity: 0.9; }
.lim-dlg-varianti h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.lim-dlg-varianti ul { list-style: none; padding: 0; margin: 0; font-size: 1.1rem; }

/* ---------- Linea del tempo: vista in pagina ---------- */

.tl-intro {
    margin: 0.8rem 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-1) 8%, transparent);
    font-style: italic;
}

/* La linea vera è il bordo sinistro continuo: parte dal primo pallino e arriva
   all'ultimo, e i pallini (le emoji) ci stanno sopra a cavallo. */
.tl-linea {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-left: 0.2rem;
    border-left: 3px solid color-mix(in srgb, #2563eb 45%, transparent);
    margin-left: 1rem;
}

.tl-evento { display: flex; gap: 0.8rem; align-items: flex-start; }

.tl-pallino {
    flex: none;
    margin-left: -1.25rem; /* a cavallo della linea */
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, #2563eb 45%, transparent);
    font-size: 1.1rem;
}

.tl-scheda { display: flex; flex-direction: column; gap: 0.15rem; }

.tl-data { font-weight: 800; font-size: 0.95rem; color: #1d4ed8; }
[data-theme="dark"] .tl-data { color: #93c5fd; }

.tl-fatto { font-weight: 700; font-size: 1.05rem; }

.tl-racconto { font-size: 0.95rem; opacity: 0.85; }

/* ---------- Linea del tempo alla LIM ---------- */

.lim-tl { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.lim-tl-intro { text-align: center; font-size: 1.3rem; opacity: 0.85; margin: 0; }

.lim-tl-linea {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-height: 52vh;
    overflow-y: auto;
    padding: 0.4rem 0.4rem 0.4rem 0.2rem;
    border-left: 4px solid color-mix(in srgb, #2563eb 55%, transparent);
    margin-left: 1.4rem;
}

.lim-tl-evento { display: flex; gap: 1rem; align-items: flex-start; }

/* Gli eventi già visti restano visibili ma spenti: la linea costruita fin lì È il
   punto del gioco. Quello corrente è grande, si legge dal fondo dell'aula. */
.lim-tl-evento.passato { opacity: 0.45; font-size: 1.2rem; }
.lim-tl-evento.corrente { font-size: 1.9rem; font-weight: 600; }

.lim-tl-pallino {
    flex: none;
    margin-left: -1.6rem; /* a cavallo della linea */
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, #2563eb 22%, transparent);
    font-size: 1.4rem;
}

.lim-tl-scheda { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; }

.lim-tl-data {
    font-weight: 800;
    font-size: 0.9em;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lim-tl-fatto { font-weight: 700; }

.lim-tl-racconto { font-size: 0.75em; opacity: 0.85; font-weight: 400; }

.lim-tl-domande { text-align: center; opacity: 0.9; }
.lim-tl-domande h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.lim-tl-domande ol { display: inline-block; text-align: left; margin: 0; font-size: 1.1rem; }

/* ---------- Grafico a barre: vista in pagina ---------- */

.dc-intro {
    margin: 0.8rem 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-1) 8%, transparent);
    font-style: italic;
}

.dc-grafico { display: flex; flex-direction: column; gap: 0.7rem; }

.dc-barra-riga { display: flex; align-items: center; gap: 0.7rem; }

.dc-etichetta {
    flex: 0 0 auto;
    width: 8rem;
    text-align: right;
    font-weight: 700;
    font-size: 0.92rem;
    overflow-wrap: break-word;
}

.dc-barra-pista {
    flex: 1 1 auto;
    height: 1.1rem;
    border-radius: 999px;
    background: color-mix(in srgb, #2563eb 10%, transparent);
    overflow: hidden;
}

.dc-barra {
    height: 100%;
    border-radius: 999px;
    background: color-mix(in srgb, #2563eb 65%, transparent);
    transition: width 0.4s ease;
}

.dc-valore {
    flex: 0 0 auto;
    width: 6rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #1d4ed8;
}
[data-theme="dark"] .dc-valore { color: #93c5fd; }

/* ---------- Grafico a barre alla LIM ---------- */

.lim-dc { display: flex; flex-direction: column; gap: 1rem; width: 100%; }

.lim-dc-intro { text-align: center; font-size: 1.3rem; opacity: 0.85; margin: 0; }

.lim-dc-grafico {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 52vh;
    overflow-y: auto;
    padding: 0.4rem;
}

.lim-dc-riga { display: flex; align-items: center; gap: 1rem; }

.lim-dc-riga.passata { opacity: 0.6; }
.lim-dc-riga.corrente { font-weight: 700; }

.lim-dc-etichetta {
    flex: 0 0 auto;
    width: 30%;
    text-align: right;
    font-size: 1.1rem;
    overflow-wrap: break-word;
}

.lim-dc-pista {
    flex: 1 1 auto;
    height: 2rem;
    border-radius: 999px;
    background: color-mix(in srgb, #2563eb 18%, transparent);
    overflow: hidden;
}

.lim-dc-barra {
    height: 100%;
    border-radius: 999px;
    background: color-mix(in srgb, #2563eb 60%, transparent);
    transition: width 0.6s ease;
}

.lim-dc-valore {
    flex: 0 0 auto;
    width: 15%;
    font-size: 1.1rem;
    font-weight: 800;
    color: #93c5fd;
}

.lim-dc-domande { text-align: center; opacity: 0.9; }
.lim-dc-domande h3 { margin: 0 0 0.4rem; font-size: 1.2rem; }
.lim-dc-domande ol { display: inline-block; text-align: left; margin: 0; font-size: 1.1rem; }

/* ---------- Copione: vista in pagina ---------- */

.sc-trama {
    margin: 0.8rem 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-1) 8%, transparent);
    font-style: italic;
}

.sc-personaggi { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }

.sc-personaggio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }

.sc-nome { font-weight: 800; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.02em; }

/* Il conteggio è il numero su cui si assegnano le parti: si vede, ma non urla. */
.sc-battute {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, #2563eb 12%, transparent);
    color: #1d4ed8;
}
[data-theme="dark"] .sc-battute { color: #93c5fd; }

/* Zero battute = un bambino che sta fermo a guardare: deve saltare all'occhio. */
.sc-battute-zero {
    background: color-mix(in srgb, #dc2626 15%, transparent);
    color: #b91c1c;
}
[data-theme="dark"] .sc-battute-zero { color: #fca5a5; }

.sc-descrizione { font-size: 0.9rem; opacity: 0.8; }

.sc-scena { margin-top: 1.2rem; }

.sc-scena-titolo {
    margin: 0 0 0.3rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    font-size: 1rem;
}

.sc-ambiente { margin: 0 0 0.6rem; font-size: 0.88rem; font-style: italic; opacity: 0.75; }

.sc-riga { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.5rem; }

/* Colonna fissa a sinistra: si scorre il margine col dito per trovare le proprie battute. */
.sc-chi {
    flex: 0 0 auto;
    width: 7rem;
    text-align: right;
    font-weight: 800;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #1d4ed8;
    padding-top: 0.15rem;
}
[data-theme="dark"] .sc-chi { color: #93c5fd; }

.sc-testo { display: flex; flex-direction: column; gap: 0.1rem; }

.sc-didascalia { font-size: 0.82rem; font-style: italic; opacity: 0.7; }

.sc-regia { font-style: italic; opacity: 0.9; }

/* ---------- Copione alla LIM (il gobbo del suggeritore) ---------- */

.lim-sc { display: flex; flex-direction: column; gap: 1rem; width: 100%; align-items: center; }

.lim-sc-scena { margin: 0; font-size: 1.2rem; opacity: 0.8; }

.lim-sc-palco {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
    padding: 1.2rem;
    max-width: 90%;
}

.lim-sc-chi {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #93c5fd;
}

.lim-sc-didascalia { font-size: 1.3rem; font-style: italic; opacity: 0.75; }

/* Grande davvero: chi è sul palco la legge alzando gli occhi, da lontano. */
.lim-sc-battuta { font-size: 2.6rem; font-weight: 600; line-height: 1.25; }

.lim-sc-prossima {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.55;
    max-width: 80%;
    text-align: center;
}

/* ---------- Fonte storica: vista in pagina ---------- */

.fs-intro {
    margin: 0.8rem 0;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-1) 8%, transparent);
    font-style: italic;
}

.fs-tipo {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, #b45309 16%, transparent);
    color: #92400e;
    font-weight: 800;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
[data-theme="dark"] .fs-tipo { color: #fbbf24; }

/* Convenzione da libro di storia: una citazione ha un bordo a sinistra, non le virgolette. */
.fs-testo {
    margin: 0.7rem 0;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 3px solid color-mix(in srgb, currentColor 30%, transparent);
    font-style: italic;
    font-size: 1.05rem;
}

.fs-origine { font-size: 0.9rem; opacity: 0.8; }

/* ---------- Fonte storica alla LIM ---------- */

.lim-fs { display: flex; flex-direction: column; gap: 1rem; width: 100%; align-items: center; text-align: center; }

.lim-fs-tipo {
    padding: 0.3rem 1rem;
    border-radius: 999px;
    background: color-mix(in srgb, #b45309 30%, transparent);
    font-weight: 800;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.lim-fs-testo {
    margin: 0;
    max-width: 85%;
    font-style: italic;
    font-size: 1.8rem;
    line-height: 1.4;
    padding: 0 1rem;
    border-left: 4px solid color-mix(in srgb, currentColor 30%, transparent);
    text-align: left;
}

.lim-fs-origine { max-width: 80%; opacity: 0.75; font-size: 1.1rem; margin: 0; }

.lim-fs-domanda { font-size: 1.6rem; font-weight: 600; max-width: 85%; margin: 0.4rem 0; }

/* ---------- 🌍 Italiano L2 nel Generatore ----------
   Un riquadro richiudibile: chi non ha in classe un bambino che sta imparando
   l'italiano non lo apre mai, e il modulo resta corto com'era prima. */

.gen-l2 {
    margin-top: 0.4rem;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--brand-1) 6%, transparent);
}

.gen-l2 summary { color: var(--ink); }

.gen-l2-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
    align-items: start;
    margin-top: 0.7rem;
}

/* ---------- Glossario nella lingua di casa (🌍 Facilita) ---------- */

.glossario {
    margin-top: 1.2rem;
    padding-top: 0.9rem;
    border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.glossario-lingua {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.7;
    text-transform: none;
}

.glossario-voci { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }

.glossario-voce { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; }

.glossario-parola { font-weight: 800; }

/* La traduzione accanto alla parola italiana, non al suo posto: si vede che è un
   appoggio, e l'occhio torna sempre all'italiano, che è l'obiettivo. */
.glossario-traduzione {
    font-style: italic;
    color: #1d4ed8;
    font-size: 0.92rem;
}
[data-theme="dark"] .glossario-traduzione { color: #93c5fd; }

.glossario-spiegazione { flex: 1 1 14rem; font-size: 0.92rem; opacity: 0.88; }

/* ---------- Portatili "HD ready" (1366×768) e schermi bassi ----------
   Sotto gli 820px di finestra si stringe tutto quel tanto che basta a far entrare le
   voci di menu senza scorrere. Si tolgono solo SPAZI, mai testo o icone: una voce più
   piccola resta leggibile, una voce che non si vede è persa.

   ⚠️ SOLO da 901px in su: queste regole sono per la sidebar VERTICALE da scrivania,
   ma ogni telefono è alto meno di 820px — e senza il vincolo di larghezza, "top: 0.8rem"
   e l'altezza a tutto schermo si applicavano anche al dock dei telefoni (che sta in
   basso, con "top: auto" scritto PRIMA nel file), incollandolo in alto sopra il resto:
   era la sovrapposizione "icona Facebook / Teacher Annalisa" vista dall'utente. */
@media (max-height: 820px) and (min-width: 901px) {
    .sidebar { padding: 1rem 0.9rem; top: 0.8rem; height: calc(100vh - 1.6rem); height: calc(100dvh - 1.6rem); }
    .app-shell { padding: 0.8rem; }
    /* Il marchio è la voce più alta della barra: qui si recupera più spazio che altrove.
       Resta grande abbastanza da guidare l'occhio, ma smette di prendersi 1,4rem sotto. */
    .brand { padding: 0.3rem 0.4rem 0.7rem; font-size: 1.15rem; }
    .brand-avatar { width: 46px; height: 46px; }
    .nav { gap: 0.15rem; }
    .nav-link { padding: 0.52rem 0.85rem; }
    .sidebar-footer { padding: 0.5rem 0.4rem 0; }
    .social-label { display: none; } /* resta l'icona: si capisce lo stesso */
}

/* Schermi davvero bassi (netbook, finestra a metà schermo): si stringe ancora. */
@media (max-height: 640px) and (min-width: 901px) {
    .sidebar { padding: 0.7rem 0.8rem; }
    .nav-link { padding: 0.42rem 0.8rem; font-size: 0.95rem; }
    .nav-icon { font-size: 1.1rem; }
}

/* Testata del pannello quote: titolo a sinistra, "aggiornato alle" e pulsante a destra.
   Va a capo INTERA sugli schermi stretti, invece di comprimere il pulsante. */
.quota-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.quota-head-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* L'illustrazione del racconto: come in un libro, si guarda prima di leggere.
   Larghezza contenuta (non deve mangiare lo schermo) e angoli morbidi. */
.illustrazione {
    margin: 0.9rem auto 0.4rem;
    max-width: 420px;
    text-align: center;
}

.illustrazione img {
    width: 100%;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.illustrazione figcaption {
    margin-top: 0.4rem;
    font-size: 0.88rem;
    opacity: 0.75;
    font-style: italic;
}

/* La pagina da colorare nel riquadro Illustra: piu' piccola della scena (e' un'anteprima,
   il foglio vero e' il PDF) e col bordo, perche' e' bianca su bianco e senza non si
   vedrebbe dove finisce. */
.illustrazione.da-colorare { max-width: 240px; margin: 0.2rem 0 0.4rem; }
.illustrazione.da-colorare img {
    background: #fff;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    box-shadow: none;
}

/* Avviso "questa cosa e' lenta": giallo, non rosso — non e' un errore, e' un'attesa. */
.key-warn {
    background: color-mix(in srgb, #f0b429 16%, transparent);
    border: 1px solid color-mix(in srgb, #f0b429 45%, transparent);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
}

/* Il disegno alla LIM: sta sopra il primo paragrafo, senza rubargli spazio.
   Altezza massima in vh, cosi' su una lavagna 86" resta grande ma il testo si vede. */
.lim-illustrazione {
    display: block;
    margin: 0 auto 1rem;
    max-width: min(100%, 520px);
    max-height: 34vh;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* Bollino "in prova" sulle card dei tipi visibili alla sola amministratrice. */
.type-prova { margin-top: 0.35rem; font-size: 0.72rem; }

/* Il confine della "sala macchine" in Impostazioni: una riga sopra, per dire a colpo
   d'occhio che da qui in giu' la pagina cambia padrone (solo amministratrice). */
.admin-divider {
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}

/* ---------- Immagine caricata dall'insegnante (Archivio, riquadro Illustra) ---------- */

.caricamento-immagine {
    margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--stroke);
    display: flex; flex-direction: column; gap: 0.6rem;
}
.caricamento-immagine h4 { margin: 0; font-size: 1rem; }
.caricamento-immagine .input[type="file"] { padding: 0.55rem; }

/* ---------- Generatore: attività filtrate per materia ---------- */

.tipo-filtro-nota { margin: 0 0 0.6rem; }
.tipo-filtro-azioni { margin-top: 0.7rem; }

/* ---------- Home: "Da dove comincio?" (settimana vuota) ---------- */

.primi-passi-classi { margin: 0.9rem 0 1.1rem; }

.primi-passi-elenco {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.9rem;
}

.primo-passo {
    display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-start;
    padding: 0.9rem 1rem; border: 1px solid var(--stroke); border-radius: 14px;
    background: var(--surface);
}
.primo-passo-testa { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.primo-passo-materia { font-weight: 800; }
.primo-passo-argomento { margin: 0; font-size: 1.02rem; line-height: 1.4; }
.primo-passo-perche { margin: 0; }
.primo-passo .btn { margin-top: 0.25rem; }

/* ---------- Calcoli: scheda, editor e LIM ---------- */

/* ⚠️ Le cifre vanno a larghezza fissa: con un carattere normale l'1 e' piu' stretto del 7
   e le colonne delle unita' e delle decine non si allineano — l'errore che si insegna ai
   bambini a non fare. */
.calc-riga-cifre, .calc-operazione, .calc-editor-risultato {
    font-family: "Consolas", "Courier New", monospace;
}

.calc-griglia {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 1.4rem 1rem; margin-top: 0.8rem;
}
.calc-colonna { display: flex; flex-direction: column; align-items: flex-end; }
.calc-colonna .calc-num { align-self: flex-start; font-size: 0.78rem; color: var(--ink-soft); }
.calc-riga-cifre { font-size: 1.25rem; line-height: 1.35; }
.calc-barra { display: block; width: 100%; border-bottom: 2px solid var(--ink); margin: 0.15rem 0 0.2rem; }
.calc-risultato { min-height: 1.7rem; color: var(--ok-ink); font-weight: 700; }

.calc-elenco { margin-top: 0.8rem; line-height: 2.1; }
.calc-operazione { font-size: 1.1rem; }
.calc-risultato-riga { margin-left: 0.4rem; color: var(--ok-ink); font-family: "Consolas", "Courier New", monospace; }
.calc-spazio { margin-left: 0.4rem; color: var(--ink-soft); letter-spacing: 0.1em; }
.calc-garanzia { margin-top: 1.1rem; }

.calc-editor-riga { flex-wrap: wrap; }
.calc-editor-numero { max-width: 7rem; }
.calc-editor-segno { max-width: 4.5rem; }
.calc-editor-uguale { font-weight: 800; }
.calc-editor-risultato { min-width: 5rem; color: var(--ok-ink); }

.lim-calc { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.lim-calc-operazione {
    font-family: "Consolas", "Courier New", monospace;
    font-size: clamp(2.4rem, 9vw, 6rem); font-weight: 800; text-align: center; margin: 0;
}
.lim-calc-risultato { color: var(--ok-ink); }

/* ---------- Grammatica: scheda, editor e LIM ---------- */

.gr-focus {
    display: inline-block; margin: 0.6rem 0 0; padding: 0.25rem 0.7rem;
    border-radius: 999px; background: rgba(124, 92, 240, 0.12);
    color: var(--brand-1); font-size: 0.85rem; letter-spacing: 0.04em;
}

.gr-frasi { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: gr; }
.gr-frase { counter-increment: gr; margin-bottom: 1.5rem; }
.gr-frase::before {
    content: counter(gr) ")"; color: var(--ink-soft); font-size: 0.78rem;
}
/* Interlinea larga: sul foglio e sullo schermo la frase si SOTTOLINEA, e senza aria
   sotto la matita finisce sulla riga dopo. */
.gr-testo { margin: 0.15rem 0 0; font-size: 1.12rem; font-weight: 600; line-height: 2; }

/* La parola trovata non e' un evidenziatore giallo: e' il segno di matita della maestra. */
.gr-trovata {
    background: none; color: var(--ok-ink); font-weight: 800;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.gr-quante { margin: 0.2rem 0 0; font-size: 0.82rem; font-style: italic; color: var(--ink-soft); }

.gr-analisi {
    display: grid; grid-template-columns: minmax(5.5rem, max-content) 1fr;
    gap: 0.5rem 0.9rem; margin-top: 0.6rem; align-items: end;
}
.gr-parola { font-weight: 700; }
/* Senza soluzioni resta la riga su cui il bambino scrive l'analisi: e' la parte che usa lui. */
.gr-categoria { min-height: 1.5rem; border-bottom: 1px dashed var(--stroke); }
.gr-categoria.gr-piena { border-bottom: none; color: var(--ok-ink); }
.gr-garanzia { margin-top: 1.2rem; }

.gr-editor-frase { display: block; }
.gr-editor-testa { display: flex; align-items: center; gap: 0.5rem; }
.gr-editor-riga {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin: 0.4rem 0 0 1.6rem;
}
.gr-editor-parola { max-width: 9rem; font-weight: 700; }
.gr-editor-categoria { max-width: 9.5rem; }
.gr-editor-dettaglio { min-width: 12rem; flex: 1; }
.gr-editor-dettaglio[readonly] { opacity: 0.7; cursor: not-allowed; }
.gr-editor-fuori { border-color: var(--brand-3); }
.gr-editor-avviso { flex-basis: 100%; font-size: 0.8rem; color: var(--brand-3); }

.lim-gr { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lim-gr-focus {
    margin: 0; font-size: clamp(1rem, 2.5vw, 1.6rem); letter-spacing: 0.08em;
    text-transform: uppercase; opacity: 0.75;
}
.lim-gr-frase {
    font-size: clamp(1.6rem, 5vw, 3.4rem); font-weight: 800; text-align: center;
    line-height: 1.6; margin: 0;
}
.lim-gr-quante { margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); opacity: 0.7; }
.lim-gr-analisi { list-style: none; margin: 0; padding: 0; text-align: center; }
.lim-gr-analisi li { font-size: clamp(1.1rem, 2.6vw, 1.8rem); line-height: 1.8; }
.lim-gr-categoria { color: var(--ok-ink); }

/* ---------- Mappa per studiare: scheda, editor e LIM ---------- */

/* Il foglio scorre in orizzontale solo se proprio non ci sta: la mappa nasce per essere
   guardata TUTTA in una volta, e una barra di scorrimento la spezzerebbe in due. */
.mappa-foglio { margin-top: 0.9rem; overflow-x: auto; }
.mappa-svg { display: block; width: 100%; height: auto; min-width: 30rem; }

/* Sullo schermo comanda il CSS, non gli attributi scritti nell'SVG: cosi' il tema scuro
   funziona senza che il codice del disegno sappia niente dei temi. */
.mappa-centro { fill: rgba(124, 92, 240, 0.16); stroke: var(--brand-1); }
.mappa-ramo { fill: var(--surface-strong); stroke: var(--stroke); }
.mappa-filo { stroke: var(--brand-1); opacity: 0.55; }
.mappa-centro-testo { fill: var(--ink); }
.mappa-ramo-testo { fill: var(--brand-1); }
.mappa-nota { fill: var(--ink); }
.mappa-numero { fill: var(--ink-soft); }

.mappa-muta {
    display: inline-block; margin: 0.6rem 0 0; padding: 0.25rem 0.7rem;
    border-radius: 999px; background: rgba(242, 109, 170, 0.14);
    color: var(--brand-3); font-size: 0.85rem;
}
.mappa-garanzia { margin-top: 1.1rem; }
.mappa-editor-nota { flex: 1; min-width: 14rem; }

.lim-mappa { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.lim-mappa-centro {
    margin: 0; font-size: clamp(1rem, 2.4vw, 1.6rem); letter-spacing: 0.08em;
    text-transform: uppercase; opacity: 0.7;
}
.lim-mappa-ramo {
    margin: 0; font-size: clamp(1.8rem, 6vw, 4rem); font-weight: 800; text-align: center;
    line-height: 1.2;
}
.lim-mappa-quanti { margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); opacity: 0.65; }
.lim-mappa-fatti { list-style: none; margin: 0; padding: 0; text-align: center; }
.lim-mappa-fatti li {
    font-size: clamp(1.1rem, 3vw, 2.1rem); line-height: 1.7; color: var(--ok-ink);
}

/* ---------- Coding unplugged: scheda, editor e LIM ---------- */

.cod-comandi { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.7rem 0 0; font-size: 0.9rem; }
.cod-comandi span {
    padding: 0.2rem 0.6rem; border-radius: 999px;
    background: rgba(124, 92, 240, 0.1); color: var(--brand-1);
}

.cod-percorso { margin-top: 1.6rem; }
.cod-consegna { margin: 0 0 0.5rem; font-weight: 600; }
/* Il prato non si stira: resta quadrato, e su schermo stretto scorre nel suo riquadro. */
.cod-foglio { overflow-x: auto; }
.cod-svg { display: block; height: auto; max-width: 26rem; }

/* Sullo schermo comanda il CSS; nel PDF valgono gli attributi scritti nell'SVG. */
.cod-casella { fill: var(--surface-strong); stroke: var(--stroke); }
.cod-muro { fill: rgba(124, 92, 240, 0.18); }
.cod-strada { stroke: var(--brand-1); }
.cod-muso { fill: var(--ok-ink); }

.cod-codice { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0 0; }
.cod-passo {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; border-radius: 8px; font-size: 1.1rem;
    background: rgba(124, 92, 240, 0.12);
}
.cod-risposta .cod-passo, .cod-arrivo.cod-risposta { color: var(--ok-ink); }
.cod-arrivo { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* Le caselle da riempire: una per comando, col numerino in basso come sul foglio. */
.cod-caselle { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.cod-vuota {
    display: inline-flex; align-items: flex-end; justify-content: flex-end;
    width: 2.2rem; height: 2.2rem; padding: 0 0.2rem;
    border: 1px solid var(--stroke); border-radius: 8px;
    font-size: 0.6rem; color: var(--ink-soft);
}
.cod-garanzia { margin-top: 1.2rem; }

.cod-editor-simboli { display: flex; gap: 0.5rem; }
.cod-editor-emoji { max-width: 4.5rem; text-align: center; font-size: 1.2rem; }
.cod-editor-attrezzo { margin-top: 0.6rem; }
.cod-editor-misure { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 0.6rem 0 0 1.6rem; font-size: 0.85rem; }
.cod-editor-numero { max-width: 6.5rem; }
/* Il prato dell'editor: si clicca, non si scrive "col 3, row 1". */
.cod-editor-prato {
    display: grid; grid-template-columns: repeat(var(--cod-colonne), 2.4rem);
    gap: 3px; margin: 0.7rem 0 0 1.6rem;
}
.cod-editor-casella {
    width: 2.4rem; height: 2.4rem; padding: 0; cursor: pointer;
    border: 1px solid var(--stroke); border-radius: 6px;
    background: var(--surface-strong); font-size: 1.1rem; line-height: 1;
}
.cod-editor-casella:hover { border-color: var(--brand-1); }
.cod-editor-passi { margin: 0.5rem 0 0 1.6rem; font-size: 0.85rem; color: var(--ink-soft); }

.lim-cod { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.lim-cod-consegna { margin: 0; font-size: clamp(1.1rem, 3vw, 2rem); font-weight: 700; text-align: center; }
.lim-cod-prato { width: min(100%, 34rem); }
.lim-cod-prato .cod-svg { max-width: none; width: 100%; }
.lim-cod-quanti { margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); opacity: 0.7; }
.lim-cod-codice { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin: 0; }
.lim-cod-passo {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.6rem; height: 2.6rem; border-radius: 10px;
    font-size: clamp(1.2rem, 3vw, 1.8rem); color: var(--ok-ink);
    background: rgba(23, 145, 92, 0.12);
}

/* ---------- Ritmo: scheda, editor e LIM ---------- */

.rit-tempo { margin: 0.7rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.rit-manca {
    display: inline-block; margin: 0.6rem 0 0; padding: 0.25rem 0.7rem;
    border-radius: 999px; background: rgba(242, 109, 170, 0.14);
    color: var(--brand-3); font-size: 0.85rem;
}
/* La riga di ritmo non si stira: se non ci sta, scorre nel suo riquadro. Comprimere le
   figure le farebbe sembrare piu' corte di quanto durano, che in musica e' una bugia. */
.rit-foglio { margin-top: 0.8rem; overflow-x: auto; }
.rit-svg { display: block; height: auto; min-width: 32rem; max-width: 100%; }

/* Sullo schermo comanda il CSS; nel PDF valgono gli attributi scritti nell'SVG. */
.rit-linea { stroke: var(--stroke); }
.rit-testa, .rit-gambo, .rit-coda { stroke: var(--ink); }
.rit-testa[fill="none"] { fill: none; }
.rit-pausa, .rit-travatura, .rit-punto, .rit-stanghetta { fill: var(--ink); stroke: var(--ink); }
.rit-frazione { fill: var(--ink); }
.rit-sillaba { fill: var(--ink-soft); }
.rit-parola { fill: var(--brand-1); }
.rit-buco, .rit-domanda { stroke: var(--brand-3); fill: var(--brand-3); }
.rit-buco { fill: none; }

.rit-soluzioni { margin: 0.7rem 0 0; padding-left: 1.2rem; color: var(--ok-ink); font-size: 0.9rem; }
.rit-promemoria { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; margin: 0.9rem 0 0; }
.rit-promemoria span {
    padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem;
    background: rgba(124, 92, 240, 0.09); color: var(--ink-soft);
}
.rit-garanzia { margin-top: 1.1rem; }

.rit-editor-figure { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.rit-editor-vale { opacity: 0.6; font-size: 0.75rem; }
.rit-editor-conto { font-size: 0.82rem; white-space: nowrap; }
.rit-editor-torna { color: var(--ok-ink); }
.rit-editor-storta { color: var(--brand-3); font-weight: 700; }
.rit-editor-note { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.6rem 0 0 1.6rem; align-items: center; }
.rit-editor-nota {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.25rem 0.45rem; border: 1px solid var(--stroke); border-radius: 10px;
}
.rit-editor-nota small { opacity: 0.6; font-size: 0.68rem; }
.rit-editor-gesto { max-width: 3.2rem; text-align: center; }
.rit-editor-parola { max-width: 5.5rem; }

.lim-rit { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lim-rit-tempo {
    margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: 0.1em; opacity: 0.65;
}
.lim-rit-sillabe { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin: 0; }
.lim-rit-figura {
    display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem;
    min-width: 3.4rem; padding: 0.5rem 0.7rem; border-radius: 14px;
    background: rgba(124, 92, 240, 0.1);
}
.lim-rit-zitto { background: none; border: 1px dashed var(--stroke); opacity: 0.6; }
.lim-rit-gesto { font-size: clamp(1rem, 2.4vw, 1.5rem); }
.lim-rit-ta { font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: 800; }
.lim-rit-parola { font-size: clamp(0.8rem, 1.8vw, 1.1rem); color: var(--brand-1); font-weight: 700; }
.lim-rit-velocita { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; }

/* ---------- Ascolto guidato: scheda, editor e LIM ---------- */

.asc-brano-scheda {
    margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 14px;
    background: rgba(124, 92, 240, 0.1);
}
.asc-brano-titolo { margin: 0; font-weight: 700; font-size: 1.05rem; }
.asc-brano-dati { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
/* L'unica avvertenza che va letta PRIMA della lezione: si vede o non serve a niente. */
.asc-verifica {
    margin: 0.6rem 0 0; padding: 0.5rem 0.8rem; border-radius: 12px;
    background: rgba(242, 109, 170, 0.14); color: var(--brand-3); font-size: 0.88rem;
}

.asc-striscia { margin-top: 1rem; }
.asc-svg { display: block; width: 100%; height: auto; }
/* Sullo schermo comanda il CSS; nel PDF valgono gli attributi scritti nell'SVG. */
.asc-brano { fill: var(--surface-strong); stroke: var(--stroke); }
.asc-momento { stroke: var(--stroke); }
.asc-momento-0 { fill: rgba(124, 92, 240, 0.20); }
.asc-momento-1 { fill: rgba(124, 92, 240, 0.34); }
.asc-numero, .asc-tempo { fill: var(--ink); }

.asc-momenti { list-style: none; margin: 1rem 0 0; padding: 0; }
.asc-momento-riga { display: flex; }
.asc-momenti li { display: flex; gap: 0.8rem; padding: 0.5rem 0; border-top: 1px solid var(--stroke); }
.asc-orario {
    flex: 0 0 5.4rem; font-weight: 700; font-size: 0.85rem; color: var(--brand-1);
    padding-top: 0.15rem;
}
.asc-cosa { flex: 1; }
.asc-emoji { margin-right: 0.35rem; }
.asc-fare { display: block; margin-top: 0.15rem; font-size: 0.87rem; color: var(--ok-ink); }

.asc-dopo { margin: 1.4rem 0 0.3rem; font-size: 1rem; }
.asc-domande { margin: 0; padding-left: 1.2rem; }
.asc-domande li { margin-bottom: 0.5rem; }
/* La riga per rispondere: c'e' solo sul foglio degli alunni. */
.asc-riga { display: block; height: 1.6rem; border-bottom: 1px dashed var(--stroke); }
.asc-garanzia { margin-top: 1.2rem; }

.asc-editor-orario { max-width: 5rem; text-align: center; }
.asc-editor-emoji { max-width: 3.6rem; text-align: center; }
.asc-editor-testi { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0 0 1.6rem; }

.lim-asc { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.lim-asc-brano {
    margin: 0; font-size: clamp(0.95rem, 2.2vw, 1.4rem); opacity: 0.7; text-align: center;
}
/* Il cronometro e' il pezzo forte: si legge dal fondo dell'aula. */
.lim-asc-cronometro {
    margin: 0; font-family: "Consolas", "Courier New", monospace;
    font-size: clamp(2.2rem, 8vw, 5rem); font-weight: 800; line-height: 1;
}
.lim-asc-corre { color: var(--ok-ink); }
.lim-asc-durata { font-size: 0.4em; opacity: 0.55; }
.lim-asc-cosa {
    margin: 0; font-size: clamp(1.2rem, 3.4vw, 2.4rem); font-weight: 700;
    text-align: center; line-height: 1.35;
}
.lim-asc-emoji { margin-right: 0.4rem; }
.lim-asc-fare {
    margin: 0; font-size: clamp(1rem, 2.6vw, 1.7rem); color: var(--ok-ink); text-align: center;
}

/* ---------- Gioco di movimento: scheda, editor e LIM ---------- */

/* Le tre cose che decidono se la lezione si puo' fare, in cima e in fila. */
.mov-testa { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.mov-scheda {
    flex: 1 1 9rem; padding: 0.55rem 0.8rem; border-radius: 12px;
    background: rgba(124, 92, 240, 0.1);
}
.mov-scheda-larga { flex: 2 1 16rem; }
.mov-etichetta {
    display: block; font-size: 0.66rem; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--ink-soft);
}

.mov-orologio { margin-top: 1rem; }
.mov-svg { display: block; width: 100%; height: auto; }
/* Sullo schermo comanda il CSS; nel PDF valgono gli attributi scritti nell'SVG. */
.mov-lezione { stroke: var(--stroke); }
.mov-fase { stroke: var(--stroke); }
.mov-nome, .mov-durata, .mov-orologio-testo { fill: var(--ink); }

.mov-fase-riga { margin-top: 1.1rem; padding-top: 0.7rem; border-top: 1px solid var(--stroke); }
.mov-fase-testa { margin: 0; font-size: 1.05rem; }
.mov-minuti { margin-right: 0.5rem; font-weight: 700; font-size: 0.82rem; color: var(--brand-1); }
.mov-emoji { margin-right: 0.3rem; }
/* La riga verde: quante squadre vengono e che cosa fa chi avanza. */
.mov-squadre { margin: 0.25rem 0 0; font-size: 0.87rem; font-weight: 700; color: var(--ok-ink); }
.mov-cosa { margin: 0.3rem 0 0; }
.mov-variante { margin: 0.2rem 0 0; font-size: 0.87rem; font-style: italic; color: var(--ink-soft); }

.mov-attenzione { margin: 1.4rem 0 0.3rem; font-size: 1rem; }
.mov-sicurezza { margin: 0; padding-left: 1.2rem; font-size: 0.92rem; }
.mov-garanzia { margin-top: 1.2rem; }

.mov-editor-numeri { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 0.6rem; font-size: 0.85rem; }
.mov-editor-numero { max-width: 5.5rem; }
.mov-editor-conto { font-size: 0.82rem; white-space: nowrap; }
.mov-editor-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin: 0.6rem 0 0 1.6rem; }
.mov-editor-gruppo { max-width: 11rem; }

.lim-mov { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.lim-mov-nome { margin: 0; font-size: clamp(1.4rem, 4vw, 2.8rem); font-weight: 800; text-align: center; }
.lim-mov-emoji { margin-right: 0.4rem; }
/* Il conto alla rovescia lo guardano i BAMBINI: lei ha le mani occupate. */
.lim-mov-conto {
    margin: 0; font-family: "Consolas", "Courier New", monospace;
    font-size: clamp(2.6rem, 10vw, 6rem); font-weight: 800; line-height: 1;
}
.lim-mov-corre { color: var(--ok-ink); }
.lim-mov-squadre { margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); color: var(--ok-ink); text-align: center; }
.lim-mov-cosa {
    margin: 0; font-size: clamp(1.1rem, 2.8vw, 1.9rem); text-align: center;
    line-height: 1.4; max-width: 46rem;
}

/* ---------- Circle time: scheda, editor e LIM ---------- */

.cer-tema {
    margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 14px;
    background: rgba(124, 92, 240, 0.1);
}
.cer-tema strong { display: block; font-size: 1.05rem; }
.cer-conto { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--ink-soft); }

.cer-titolo { margin: 1.4rem 0 0.4rem; font-size: 1rem; }
.cer-titolo span { font-weight: 400; font-size: 0.8rem; color: var(--ink-soft); }
/* Le regole stanno in cima e si vedono: si leggono ad alta voce prima di cominciare. */
.cer-regole { margin: 0; padding-left: 1.2rem; font-size: 0.94rem; }
.cer-regole li { margin-bottom: 0.25rem; }

.cer-giro { margin-top: 1.1rem; padding-top: 0.7rem; border-top: 1px solid var(--stroke); }
.cer-giro-testa { margin: 0; font-size: 1.05rem; }
.cer-tutti {
    margin-left: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: rgba(23, 145, 92, 0.12); color: var(--ok-ink); font-size: 0.72rem;
}
.cer-domanda {
    margin: 0.4rem 0 0; padding-left: 0.8rem; font-size: 1.05rem;
    border-left: 3px solid var(--brand-1);
}
.cer-nota { margin: 0.25rem 0 0; font-size: 0.87rem; font-style: italic; color: var(--ink-soft); }
.cer-libero { margin: 0.8rem 0 0; font-size: 0.85rem; font-style: italic; color: var(--ink-soft); }
.cer-rilanci, .cer-cura { margin: 0; padding-left: 1.2rem; font-size: 0.92rem; }
.cer-cura li { color: var(--brand-3); }
.cer-garanzia { margin-top: 1.2rem; }

.cer-editor-conto { margin: 0.6rem 0 0; font-size: 0.85rem; }
.cer-editor-minuti { font-weight: 700; font-size: 0.85rem; color: var(--brand-1); white-space: nowrap; }
.cer-editor-corpo { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.6rem 0 0 1.6rem; }
/* Le quattro essenziali si vedono ma non si toccano: non sono una preferenza. */
.cer-editor-essenziali { margin: 0 0 0.6rem; padding-left: 1.2rem; font-size: 0.88rem; opacity: 0.85; }
.cer-editor-fissa {
    margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px;
    background: rgba(124, 92, 240, 0.12); color: var(--brand-1); font-size: 0.68rem;
}

.lim-cer { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.lim-cer-titolo { margin: 0; font-size: clamp(1.2rem, 3vw, 2rem); font-weight: 800; }
.lim-cer-regole { margin: 0; padding-left: 1.4rem; max-width: 44rem; }
.lim-cer-regole li { font-size: clamp(1.1rem, 2.8vw, 1.9rem); line-height: 1.7; }
.lim-cer-nome { margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: 0.06em; opacity: 0.65; }
/* Sullo schermo c'e' una cosa sola, e dev'essere leggibile dal fondo del cerchio. */
.lim-cer-domanda {
    margin: 0; font-size: clamp(1.6rem, 5vw, 3.4rem); font-weight: 800;
    text-align: center; line-height: 1.35; max-width: 44rem;
}
.lim-cer-tutti { margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); color: var(--ok-ink); }

/* ---------- Schema con le parole: scheda, editor e LIM ---------- */

/* Nella pagina della lezione lo schema e' piu' largo della scena di un racconto: li' il
   disegno E' il contenuto, e le parole scritte dentro devono leggersi. */
.illustrazione.schema { max-width: 760px; }
.illustrazione.schema img { background: #fff; }
.illustrazione.schema figcaption { font-style: normal; }

.sch-nota { margin: 0; }
.sch-parole { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.4rem 0 0; padding-left: 1.4rem; }
.sch-parole li { display: flex; flex-direction: column; gap: 0.1rem; }
.sch-parola { font-weight: 800; letter-spacing: 0.04em; }
.sch-spiegazione { color: var(--ink-soft); }
.sch-titolo { margin: 1rem 0 0.3rem; font-size: 1rem; }
.sch-domande { margin: 0; padding-left: 1.4rem; }
.sch-editor-parola { text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; }

/* Alla LIM il disegno si legge dal fondo dell'aula; sotto, le parole da toccare per
   scoprire che cosa vogliono dire. */
.lim-sch { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.lim-sch-disegno {
    display: block; max-width: min(100%, 1100px); max-height: 58vh;
    border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.lim-sch-parole { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.lim-sch-spiegazione {
    margin: 0; font-size: clamp(1.3rem, 3.4vw, 2.3rem); font-weight: 700;
    text-align: center; line-height: 1.35; max-width: 48rem;
}
.lim-sch-invito { margin: 0; font-size: clamp(1rem, 2.4vw, 1.5rem); opacity: 0.65; }