/* =============================================================================
   Federico Boggia Academy · la parte che il sito pubblico non ha.

   I colori, i caratteri e i bottoni arrivano da `wiki/wiki.css`, che è caricato
   prima: qui c'è solo la roba della piattaforma (barra, tabelle, avanzamento,
   la lezione a due colonne). Se un token serve, si prende da là.
   ============================================================================= */

.ac-body {
    background: var(--wiki-bg);
    color: var(--wiki-text);
    font-family: 'DM Sans', sans-serif;
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- Il menu laterale ---- */
/* (2026-08-20, su una schermata portata da Federico: «il menu sopra non va bene,
   deve essere laterale tipo così»).

   Com'è fatto: una colonna scura fissa a sinistra — logo, le voci con l'icona, e in
   fondo chi sei — e il contenuto che scorre a destra. Il colore è `--wiki-dark`, che
   è lo stesso slate del sito: il rail è scuro, il contenuto resta chiaro, e non c'è
   nessun tema nuovo da mantenere.

   ⚠️ Tre cose che sembrano dettagli e sono decisioni:

   1. **il rail ce l'ha solo chi è entrato.** Sulle pagine pubbliche (accesso, il
      collegamento della mail, la verifica di un certificato) resta la barra sottile
      in cima: un menu di sezioni riservate mostrato a chi non è dentro è un elenco
      di porte chiuse;
   2. **si apre e si chiude senza JavaScript**, con `#ac-lato-stato`. La stessa
      spunta vale due cose secondo la larghezza: sopra i 900px strizza il rail a
      sole icone, sotto lo apre sopra il contenuto. Vedi la nota in `lib/layout.php`;
   3. **le icone sono SVG scritti nel PHP**, non una libreria: dietro l'accesso le
      pagine si aprono una dopo l'altra, e uno script da CDN si paga ogni volta. */

.ac-body--app { display: block; }

.ac-lato-stato { position: absolute; opacity: 0; pointer-events: none; }

.ac-guscio { display: flex; min-height: 100vh; align-items: stretch; }

.ac-lato {
    --ac-lato-larghezza: 15.5rem;
    width: var(--ac-lato-larghezza);
    flex: 0 0 var(--ac-lato-larghezza);
    background: var(--wiki-dark);
    color: rgba(255, 255, 255, .82);
    display: flex;
    flex-direction: column;
    /* Il rail resta fermo mentre il contenuto scorre: `sticky` e non `fixed`, così
       non serve compensare con un margine sul contenuto. */
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 400;
    transition: width .18s ease, flex-basis .18s ease;
}

.ac-lato-testa {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.1rem 1rem 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* ⚠️ Il nome è «Federico Boggia Academy», non «Academy» (2026-08-20, scelta di
   Federico), e in una colonna da 15,5rem non ci sta su una riga: va a capo dopo il
   nome, con il `<br>` che sta nel markup. Quindi `white-space: normal` e non
   `nowrap`, riga stretta, e un filo più piccolo. */
.ac-lato-logo {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff;
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.2;
    text-decoration: none;
    overflow: hidden;
}
.ac-lato-logo img { border-radius: 7px; flex: 0 0 28px; }

/* La maniglia: è una `<label>`, quindi non serve JavaScript. Tonda come nella
   schermata, e ruota quando il rail è strizzato. */
.ac-lato-maniglia {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .75);
    cursor: pointer;
    transition: background .15s, transform .18s;
}
.ac-lato-maniglia:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.ac-i { width: 18px; height: 18px; flex: 0 0 18px; }

.ac-lato-voci { display: flex; flex-direction: column; gap: .15rem; padding: .9rem .7rem; overflow-y: auto; }
.ac-lato-voci a,
.ac-lato-minore,
.ac-lato-io {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    color: rgba(255, 255, 255, .8);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.ac-lato-voci a:hover,
.ac-lato-minore:hover,
.ac-lato-io:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* La voce di adesso: il rosso del sito, con la barretta a sinistra. Non basta il
   grassetto — in una colonna di dieci voci non si vede. */
.ac-lato-voci a.qui,
.ac-lato-minore.qui,
.ac-lato-io.qui {
    background: rgba(194, 0, 28, .16);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--fb-red-soft);
}

/* In fondo: chi sei, la gestione se sei tu, e l'uscita. `margin-top: auto` lo
   incolla in basso qualunque sia il numero di voci. */
.ac-lato-piede {
    margin-top: auto;
    padding: .7rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.ac-lato-minore { font-size: .85rem; color: rgba(255, 255, 255, .55); }
.ac-lato-io { padding: .6rem .7rem; }
.ac-lato-tondo {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fb-gradient);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* ⚠️ `min-width: 0` e non `auto`: dentro un flex una colonna di testo non si
   restringe sotto la larghezza del suo contenuto, e un'email lunga allargherebbe
   tutto il rail invece di farsi tagliare. */
.ac-lato-chi { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ac-lato-chi strong { font-size: .88rem; color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ac-lato-chi small { font-size: .74rem; color: rgba(255, 255, 255, .5); overflow: hidden; text-overflow: ellipsis; }

.ac-colonna { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* La riga col panino: c'è solo su schermo piccolo. */
.ac-testa-piccola { display: none; }
.ac-lato-velo { display: none; }

/* ---- Strizzato: solo icone (sopra i 900px) ---- */
@media (min-width: 901px) {
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato { --ac-lato-larghezza: 4.4rem; }
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-logo span,
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-voci span,
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-minore span,
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-chi { display: none; }
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-testa { padding: 1.1rem .8rem 1rem; flex-direction: column; gap: .7rem; }
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-maniglia { margin-left: 0; transform: rotate(180deg); }
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-voci a,
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-minore,
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-io { justify-content: center; padding: .65rem 0; }
}

/* ---- Su schermo piccolo il rail esce da sinistra ---- */
@media (max-width: 900px) {
    .ac-guscio { display: block; }
    .ac-lato {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 40px rgba(15, 23, 42, .35);
    }
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato { transform: none; }
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 390;
        background: rgba(15, 23, 42, .45);
    }
    .ac-testa-piccola {
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: .7rem 1.1rem;
        background: var(--wiki-dark);
        color: #fff;
        position: sticky;
        top: 0;
        z-index: 380;
    }
    .ac-testa-piccola .ac-logo { color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; }
    /* ⚠️ Il `margin-left: auto` serve alla maniglia quando sta nel rail, dove deve
       stare all'estremo destro. Qui dentro spingeva a destra il panino e, dietro di
       lui, tutta la barra. */
    .ac-testa-piccola .ac-lato-maniglia { margin-left: 0; }
}

/* ---- Tabelle e codice dentro una lezione ---- */
/* Arrivate col testo dei cinque libri (21 agosto 2026): 698 righe di tabelle e i
   prompt da copiare. Le scrive `html_da_md()` in `importa.php`. */

/* ⚠️ La tabella sta in un contenitore che scorre da solo: una tabella larga dentro
   una colonna di testo è il modo classico di far scorrere di lato tutta la pagina
   sul telefono. Lo stesso trucco che sistemò le lezioni dei corsi in corsi.css. */
.ac-tabella-scroll { overflow-x: auto; margin: 1.4rem 0; }
.ac-tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ac-tabella th, .ac-tabella td {
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--wiki-glass-border);
    text-align: left;
    vertical-align: top;
}
.ac-tabella th { background: var(--wiki-glass-bg); font-weight: 700; color: var(--wiki-dark); white-space: nowrap; }
.ac-tabella tr:last-child td { border-bottom: 0; }

/* Il codice e i prompt da copiare: `pre` e non `code` inline, quindi gli spazi in
   testa alla riga contano e le righe non si uniscono. */
.ac-codice {
    margin: 1.4rem 0;
    padding: 1rem 1.1rem;
    background: var(--wiki-dark);
    color: #e2e8f0;
    border-radius: 12px;
    overflow-x: auto;
    font-size: .86rem;
    line-height: 1.6;
    /* ⚠️ `pre-wrap` no: un prompt lungo va a capo e si perde l'indentazione, che in
       un blocco di codice è informazione. Scorre. */
    white-space: pre;
}
.ac-codice code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: none; padding: 0; color: inherit; }

/* ---- Le aree, con dentro il materiale ---- */
.ac-area { margin: 0 0 2.75rem; }
.ac-area-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .3rem 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--wiki-glass-border);
}
.ac-area-testa h2 { margin: 0; font-size: 1.3rem; }
.ac-area-testa p { margin: .15rem 0 0; font-size: .92rem; color: var(--wiki-text-muted); }
.ac-area-conta { font-size: .85rem; font-weight: 600; color: var(--fb-red); white-space: nowrap; }

/* ⚠️ Un'area vuota si vede spenta, non sparisce: è la mappa di dove si sta andando,
   e una mappa con metà delle stanze cancellate non lo dice a nessuno. */
.ac-area--vuota .ac-area-testa { border-bottom-style: dashed; }
.ac-area--vuota h2, .ac-area--vuota p { opacity: .5; }

/* Un corso che chiede l'accademia si vede, ma si vede che è chiuso: nasconderlo
   vorrebbe dire che nessuno sa che esiste, e quindi che nessuno lo compra. */
.ac-scheda--chiusa { opacity: .62; }
.ac-scheda--chiusa:hover { opacity: .85; }

.ac-aree-vuote { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .5rem; }
.ac-aree-vuote li {
    padding: .7rem .9rem;
    border: 1px dashed var(--wiki-glass-border);
    border-radius: 12px;
    font-size: .9rem;
    color: var(--wiki-text-muted);
}
.ac-aree-vuote strong { color: var(--wiki-text); }
.ac-aree-vuote span { display: block; font-size: .85rem; }

/* ---- Il livello nel rail, e i traguardi ---- */
/* La riga «a che punto sei» in fondo al menu, sopra la pastiglia di chi sei: è il
   posto dove nella schermata portata da Federico c'erano i punti. Qui i due numeri
   sono veri e calcolati (vedi `lib/traguardi.php`). */
.ac-lato-livello {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 .7rem .2rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    text-decoration: none;
    background: rgba(255, 255, 255, .05);
    transition: background .15s;
}
.ac-lato-livello:hover { background: rgba(255, 255, 255, .1); }
.ac-lato-liv-n {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--fb-gradient);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* ⚠️ `min-width: 0`, sennò un nome di livello lungo allarga il rail invece di
   farsi tagliare: è lo stesso motivo della pastiglia di chi sei qui sotto. */
.ac-lato-liv-testo { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ac-lato-liv-testo strong { font-size: .82rem; color: #fff; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-lato-liv-testo small { font-size: .72rem; color: rgba(255, 255, 255, .5); }

/* Un traguardo non preso non si nasconde: si vede spento, perché è quello che dice
   cosa si può ancora fare. */
.ac-traguardo { opacity: .5; }
.ac-traguardo--preso { opacity: 1; border-left: 3px solid var(--fb-red); }

/* Col rail strizzato resta solo il numero del livello. */
@media (min-width: 901px) {
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-liv-testo { display: none; }
    .ac-lato-stato:checked ~ .ac-guscio .ac-lato-livello { justify-content: center; margin: 0 .5rem .2rem; }
}

/* ---- La striscia dei numeri e la fascia dal vivo (dashboard) ---- */
/* Due blocchi aggiunti il 2026-08-20 con la richiesta «ottimizza UX/UI»: chi entra
   vuole sapere in due secondi **quanto c\'è dentro** e **cosa non è materiale**. */

.ac-fatti {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.75rem;
    margin: 0 0 1.75rem;
    padding: .9rem 1.15rem;
    list-style: none;
    background: var(--wiki-card-bg);
    border: 1px solid var(--wiki-glass-border);
    border-radius: var(--wiki-radius, 16px);
    font-size: .9rem;
    color: var(--wiki-text-muted);
}
.ac-fatti strong { color: var(--wiki-dark); font-weight: 700; }

/* La fascia dell\'accademia: è l\'unica cosa dal vivo, quindi non è una scheda come
   le altre. Il fondo è il gradiente del sito, e il testo bianco sopra. */
.ac-vivo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin: 1.75rem 0;
    padding: 1.4rem 1.6rem;
    border-radius: var(--wiki-radius, 16px);
    background: var(--fb-gradient);
    color: #fff;
}
.ac-vivo h3 { margin: .3rem 0 .4rem; font-size: 1.25rem; color: #fff; }
/* ⚠️ `max-width` sul paragrafo e non sul contenitore: senza, su schermo largo la
   riga arriva a novanta caratteri e non si legge più. */
.ac-vivo p { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .92); max-width: 52ch; }
.ac-vivo strong { color: #fff; }
.ac-vivo-tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
}
/* Il pulsante dentro la fascia si gira: bianco pieno su fondo colorato, perché il
   rosso su rosso non si vede. */
.ac-vivo .ac-btn {
    background: #fff;
    border-color: #fff;
    color: var(--fb-red) !important;
}
.ac-vivo .ac-btn:hover { background: rgba(255, 255, 255, .88); border-color: rgba(255, 255, 255, .88); }

/* ---- La barra in cima (solo sulle pagine pubbliche) ---- */
/* Lo stesso trattamento della barra del sito: il vetro su uno strato dietro, e non
   sull'elemento appiccicato. Vedi la nota lunga in `wiki/wiki.css` (bug di WebKit
   con `sticky` + `backdrop-filter`). */
.ac-barra {
    background: rgba(255, 255, 255, .97);
    border-bottom: 1px solid var(--wiki-glass-border);
    position: sticky;
    top: 0;
    z-index: 500;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ac-barra { background: transparent; isolation: isolate; }
    .ac-barra::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(160%) blur(10px);
        -webkit-backdrop-filter: saturate(160%) blur(10px);
    }
}
.ac-barra-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .6rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.ac-logo {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--wiki-dark);
    text-decoration: none;
    flex-shrink: 0;
}
.ac-nav { display: flex; align-items: center; gap: 1.25rem; flex: 1; flex-wrap: wrap; }
.ac-nav a {
    color: var(--wiki-text);
    text-decoration: none;
    font-size: .88rem;
    font-weight: 500;
    padding-bottom: 2px;
}
.ac-nav a:hover { color: var(--fb-red); }
.ac-nav a.attiva { color: var(--wiki-dark); font-weight: 600; border-bottom: 2px solid var(--fb-red); }
.ac-io { display: flex; align-items: center; gap: .9rem; flex-shrink: 0; }
.ac-io-nome { font-size: .85rem; font-weight: 600; color: var(--wiki-dark); text-decoration: none; }
.ac-esci { font-size: .82rem; color: var(--wiki-text-muted); text-decoration: none; }
.ac-esci:hover { color: var(--fb-red); }

@media (max-width: 720px) {
    .ac-barra-inner { flex-wrap: wrap; gap: .75rem 1rem; }
    .ac-nav { order: 3; width: 100%; gap: 1rem; }
    .ac-io { margin-left: auto; }
}

/* ---- Il corpo ---- */
.ac-main {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
}
.ac-testa { margin-bottom: 2rem; }
.ac-testa h1 {
    font-size: clamp(1.85rem, 3.6vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--wiki-dark);
    margin: 0;
}
.ac-sotto { margin: .6rem 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--wiki-text-muted); max-width: 62ch; }
.ac-briciole { display: flex; align-items: center; gap: .4rem; font-size: .82rem; margin-bottom: .7rem; flex-wrap: wrap; }
.ac-briciole a { color: var(--fb-red); text-decoration: none; }
.ac-briciole a:hover { text-decoration: underline; }
.ac-briciole span { color: #cbd5e1; }

.ac-main h2 {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--wiki-dark);
    margin: 2.5rem 0 1rem;
}
.ac-main h2:first-child { margin-top: 0; }

/* ---- Avvisi ---- */
.ac-avviso {
    margin: 0 0 1.75rem;
    padding: .9rem 1.2rem;
    border-radius: 14px;
    border-left: 4px solid;
    font-size: .95rem;
    line-height: 1.55;
}
.ac-avviso--ok { background: rgba(4, 120, 87, .08); border-color: #047857; color: #065f46; }
.ac-avviso--errore { background: var(--fb-red-light); border-color: var(--fb-red); color: var(--fb-red-dark); }
.ac-avviso--attenzione { background: rgba(180, 83, 9, .09); border-color: #b45309; color: #92400e; }

/* ---- Schede e griglie ---- */
.ac-griglia { display: grid; gap: 1.1rem; }
.ac-griglia--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ac-griglia--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.ac-scheda {
    background: var(--wiki-card-bg);
    border: 1px solid var(--wiki-glass-border);
    border-radius: 18px;
    padding: 1.4rem 1.5rem;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
a.ac-scheda:hover {
    transform: translateY(-2px);
    border-color: var(--fb-red);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .07);
}
.ac-scheda h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .35rem; color: var(--wiki-dark); letter-spacing: -.01em; }
.ac-scheda p { margin: 0; font-size: .94rem; line-height: 1.6; color: var(--wiki-text-muted); }
.ac-scheda-tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fb-red);
    margin-bottom: .5rem;
}
.ac-scheda-piede { margin-top: 1rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* ---- La striscia dei numeri in cima alla gestione ----
   Sei numeri in fila, quelli che si guardano entrando: quanti iscritti, come sono
   divisi fra i due piani, quanti sono arrivati nell'ultima settimana, quanti sono
   tornati dentro, e i codici. Griglia e non flex, così le colonne restano larghe
   uguali anche quando un numero diventa a quattro cifre. */
.ac-numeri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--wiki-glass-border);
    border: 1px solid var(--wiki-glass-border);
    border-radius: var(--wiki-radius-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.ac-numero { background: var(--wiki-card-bg); padding: 1.1rem 1.2rem; }
.ac-numero b {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--wiki-dark);
}
.ac-numero span {
    display: block;
    margin-top: .25rem;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--wiki-text-muted);
}
/* Quando nell'ultima settimana è arrivato qualcuno, il numero è rosso: è l'unica
   cosa di questa striscia che cambia da sola, ed è quella che si va a cercare. */
.ac-numero--su b { color: var(--fb-red); }

/* ---- Il quiz col punteggio ----
   Ogni domanda è un `<fieldset>`, ogni risposta una `<label>` grande abbastanza da
   prendersi col pollice: il quiz si fa dal telefono, in piedi, e un radio da 13px
   accanto al testo si sbaglia. Dopo l'invio la domanda si colora, e la risposta
   giusta si segna: è lì che il quiz insegna qualcosa. */
.ac-quiz { display: flex; flex-direction: column; gap: 1.2rem; }
.ac-quiz-d {
    margin: 0;
    padding: 1.3rem 1.5rem;
    border: 1px solid var(--wiki-glass-border);
    border-left: 4px solid var(--wiki-glass-border);
    border-radius: var(--wiki-radius-sm);
    background: var(--wiki-card-bg);
}
.ac-quiz-d--si { border-left-color: #059669; }
.ac-quiz-d--no { border-left-color: var(--fb-red); }
.ac-quiz-d legend {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    padding: 0 0 .8rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--wiki-dark);
}
.ac-quiz-n {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wiki-glass-bg);
    font-size: .78rem;
    font-weight: 700;
    color: var(--wiki-text-muted);
}
.ac-quiz-o {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .6rem .7rem;
    border-radius: 10px;
    cursor: pointer;
    line-height: 1.5;
    transition: background .15s;
}
.ac-quiz-o:hover { background: var(--wiki-glass-bg); }
.ac-quiz-o input { margin-top: .28rem; flex-shrink: 0; }
.ac-quiz-o--giusta { background: rgba(5, 150, 105, .09); }
.ac-quiz-o--giusta strong { color: #059669; }

/* ---- La fila dei corsi di un percorso ----
   È una `<ol>` senza i numeri di serie: il numero sta in una pastiglia, e quando
   un corso è finito diventa un segno di spunta. Serve a rispondere a «da dove
   comincio» in un colpo d'occhio. */
.ac-fila { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ac-fila-voce {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid var(--wiki-glass-border);
}
.ac-fila-voce:last-child { border-bottom: none; }
.ac-fila-n {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wiki-glass-bg);
    color: var(--wiki-text-muted);
    font-size: .85rem;
    font-weight: 700;
}
.ac-fila-voce--fatta .ac-fila-n { background: var(--fb-red); color: #fff; }
.ac-fila-testo { display: flex; flex-direction: column; gap: .15rem; }
.ac-fila-testo a { color: var(--wiki-dark); text-decoration: none; }
.ac-fila-testo a:hover { color: var(--fb-red); }

/* ---- Il riquadro della correzione ----
   Il feedback del project work e il certificato pronto: si distinguono dalle
   altre schede con la riga di colore a sinistra, perché sono le due cose che una
   persona è venuta a cercare. */
.ac-feedback { border-left: 4px solid var(--fb-red); }

/* ---- Il certificato ----
   Una pagina che si stampa. Su carta sparisce tutto quello che è interfaccia
   (barra, menu, bottoni) e resta solo il foglio: è per questo che esiste
   `.ac-solo-schermo`. */
.ac-attestato {
    background: var(--wiki-card-bg);
    border: 2px solid var(--wiki-dark);
    border-radius: 4px;
    padding: 3.5rem 3rem;
    text-align: center;
    position: relative;
}
.ac-attestato::before {
    /* Il filo di colore in cima: è la sola cosa che dice «Federico Boggia» senza
       scriverlo, ed è il gradiente del sito. */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--fb-gradient);
}
.ac-attestato-occhio {
    margin: 0 0 2.5rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--fb-red);
}
.ac-attestato-tipo {
    margin: 0 0 .4rem;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wiki-text-muted);
}
.ac-attestato-nome {
    margin: 0 0 1.2rem;
    font-family: var(--wiki-font-serif);
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--wiki-dark);
}
.ac-attestato-testo { margin: 0 0 .4rem; color: var(--wiki-text-muted); }
.ac-attestato-titolo {
    margin: 0 0 2.5rem;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--wiki-dark);
}
.ac-attestato-revoca {
    margin: 0 0 1.5rem;
    padding: .7rem 1rem;
    background: var(--fb-red-light);
    border-radius: 12px;
    color: var(--fb-red-dark);
    font-weight: 600;
}
.ac-attestato-piede {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wiki-glass-border);
    font-size: .78rem;
    line-height: 1.6;
    color: var(--wiki-text-muted);
    text-align: left;
}
.ac-attestato-codice { text-align: right; }
@media (max-width: 560px) {
    .ac-attestato { padding: 2.2rem 1.4rem; }
    .ac-attestato-piede { flex-direction: column; align-items: flex-start; }
    .ac-attestato-codice { text-align: left; }
}
@media print {
    /* Sulla carta resta il foglio e nient'altro. */
    .ac-barra, .ac-piede, .ac-solo-schermo, .ac-avviso, .ac-briciole { display: none !important; }
    .ac-main { padding: 0 !important; max-width: none !important; }
    .ac-attestato { border-color: #000; page-break-inside: avoid; }
}

/* ---- Il lettore: un ebook aperto dentro la piattaforma ----
   È una cornice sul flusso protetto di `scarica`, non una copia del file. L'altezza
   è legata a quella della finestra: un PDF in una cornice bassa si legge due righe
   per volta. */
.ac-lettore {
    background: var(--wiki-glass-bg);
    border: 1px solid var(--wiki-glass-border);
    border-radius: var(--wiki-radius-sm);
    overflow: hidden;
}
.ac-lettore iframe {
    display: block;
    width: 100%;
    height: min(80vh, 1000px);
    border: 0;
}

/* ---- Le domande di autoverifica in fondo a una lezione ----
   Arrivano da `importa.php`, che le legge dalle righe «domanda :: risposta» del
   corso-fonte. Sono `<details>` e non un elenco: la risposta si apre dopo aver
   provato a rispondere, che è l'unico modo in cui una domanda insegna qualcosa.
   Finché i quiz col punteggio non ci sono, questo è il mini-test. */
.ac-domande {
    margin: 2.5rem 0 0;
    padding: 1.4rem 1.5rem;
    background: var(--wiki-glass-bg);
    border-radius: 18px;
}
.ac-domande h4 {
    margin: 0 0 .9rem;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wiki-text-muted);
}
.ac-domanda {
    border-bottom: 1px solid var(--wiki-glass-border);
    padding: .7rem 0;
}
.ac-domanda:last-child { border-bottom: none; padding-bottom: 0; }
.ac-domanda > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--wiki-dark);
    line-height: 1.5;
    /* Il triangolino di serie si sostituisce con il nostro, così sta allineato
       alla prima riga anche quando la domanda va a capo. */
    list-style: none;
    display: flex;
    gap: .6rem;
}
.ac-domanda > summary::-webkit-details-marker { display: none; }
.ac-domanda > summary::before {
    content: '?';
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--fb-red);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
}
.ac-domanda[open] > summary { color: var(--fb-red); }
.ac-domanda > p {
    margin: .6rem 0 0 1.95rem;
    color: var(--wiki-text);
    line-height: 1.65;
}

/* ---- I filtri dell'hub: area e livello ----
   Due righe di pastiglie sopra un elenco (corsi, articoli). Sono link e non
   bottoni: il filtro sta nell'indirizzo, quindi si torna indietro col tasto del
   browser e si manda per email. Le aree senza niente dentro restano visibili ma
   spente: l'elenco delle dieci aree è anche il modo di dire cosa ci sarà, e una
   che compare e sparisce fa sembrare l'hub più povero di quello che è. */
.ac-filtri {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin: 0 0 1.6rem;
}
.ac-filtri-riga {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}
.ac-filtri-etichetta {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wiki-text-muted);
    /* Fisso: così le pastiglie delle due righe partono incolonnate. */
    width: 4.6rem;
    flex-shrink: 0;
}
.ac-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .34rem .8rem;
    border: 1px solid var(--wiki-glass-border);
    border-radius: 30px;
    background: var(--wiki-card-bg);
    color: var(--wiki-text);
    font-size: .82rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, background .2s, color .2s;
}
.ac-pill:hover { border-color: var(--fb-red); color: var(--fb-red); }
.ac-pill--on {
    background: var(--fb-red);
    border-color: var(--fb-red);
    color: #fff;
    font-weight: 600;
}
.ac-pill--on:hover { color: #fff; }
.ac-pill--spenta { opacity: .5; }
.ac-pill-n {
    font-size: .7rem;
    font-weight: 700;
    color: var(--wiki-text-muted);
}
.ac-pill--on .ac-pill-n { color: rgba(255, 255, 255, .8); }
@media (max-width: 640px) {
    /* Su telefono l'etichetta va sopra e le pastiglie scorrono di lato: dieci
       aree a capo su tre righe mangiano mezzo schermo prima del contenuto. */
    .ac-filtri-riga { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ac-filtri-riga::-webkit-scrollbar { display: none; }
    .ac-filtri-etichetta { width: auto; }
}

/* ---- Avanzamento ---- */
.ac-avanz { display: inline-flex; align-items: center; gap: .6rem; }
.ac-avanz-barra {
    display: block;
    width: 130px;
    height: 7px;
    border-radius: 30px;
    background: var(--wiki-glass-border);
    overflow: hidden;
}
.ac-avanz-barra > span { display: block; height: 100%; background: var(--fb-red); border-radius: 30px; }
.ac-avanz-txt { font-size: .8rem; font-weight: 600; color: var(--wiki-text-muted); white-space: nowrap; }

/* ---- L'elenco delle lezioni ---- */
.ac-modulo { margin-top: 2rem; }
.ac-modulo > h3 {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wiki-text-muted);
    margin: 0 0 .75rem;
}
.ac-lezioni { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wiki-glass-border); }
.ac-lezioni li { border-bottom: 1px solid var(--wiki-glass-border); }
.ac-lezioni a {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .95rem .35rem;
    text-decoration: none;
    color: var(--wiki-dark);
    font-size: .98rem;
}
.ac-lezioni a:hover { color: var(--fb-red); }
/* Il pallino: pieno se la lezione è fatta. Non è solo colore, cambia forma. */
.ac-spunta {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--wiki-glass-border);
    display: grid;
    place-items: center;
    font-size: .7rem;
    line-height: 1;
    color: #fff;
}
.ac-spunta--fatta { background: #047857; border-color: #047857; }
.ac-lezioni .ac-durata { margin-left: auto; font-size: .8rem; color: var(--wiki-text-muted); white-space: nowrap; }
.ac-lezioni .ac-bozza { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #b45309; }

/* ---- La lezione ---- */
.ac-lezione { max-width: 74ch; }
.ac-lezione h2 { font-size: 1.45rem; margin: 2.2rem 0 .9rem; }
.ac-lezione h3 { font-size: 1.15rem; margin: 1.8rem 0 .7rem; color: var(--wiki-dark); }
.ac-lezione p, .ac-lezione li { font-size: 1.05rem; line-height: 1.75; color: var(--wiki-text); }
.ac-lezione ul, .ac-lezione ol { padding-left: 1.4rem; }
.ac-lezione li { margin-bottom: .5rem; }
.ac-lezione img { max-width: 100%; height: auto; border-radius: 14px; margin: 1.5rem 0; }
.ac-lezione pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1.1rem 1.3rem;
    border-radius: 14px;
    overflow-x: auto;
    font-size: .9rem;
    line-height: 1.6;
}
.ac-lezione code { font-size: .92em; }
.ac-lezione :not(pre) > code {
    background: var(--wiki-glass-bg);
    border: 1px solid var(--wiki-glass-border);
    padding: .12rem .35rem;
    border-radius: 6px;
}
.ac-lezione blockquote {
    margin: 1.5rem 0;
    padding: .3rem 0 .3rem 1.2rem;
    border-left: 3px solid var(--fb-red);
    color: var(--wiki-text-muted);
}
.ac-lezione table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.ac-lezione th, .ac-lezione td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--wiki-glass-border); }

/* Sotto la lezione: fatto, e avanti/indietro. */
.ac-passi {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--wiki-glass-border);
}
.ac-passi .ac-avanti { margin-left: auto; }

/* ---- Bottoni e form ---- */
.ac-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--fb-red);
    color: #fff !important;
    border: 2px solid var(--fb-red);
    border-radius: 30px;
    padding: .7rem 1.5rem;
    font-size: .95rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, transform .2s;
}
.ac-btn:hover { background: var(--fb-red-dark); border-color: var(--fb-red-dark); transform: translateY(-1px); }
.ac-btn--vuoto { background: none; color: var(--wiki-dark) !important; border-color: var(--wiki-glass-border); }
.ac-btn--vuoto:hover { background: none; border-color: var(--wiki-dark); }
.ac-btn--piccolo { padding: .45rem 1rem; font-size: .85rem; border-width: 1.5px; }
.ac-btn--fatta { background: #047857; border-color: #047857; }
.ac-btn--fatta:hover { background: #065f46; border-color: #065f46; }
.ac-btn[disabled] { opacity: .55; cursor: default; transform: none; }

.ac-form { max-width: 34rem; }
.ac-form--larga { max-width: none; }
.ac-campo { margin-bottom: 1.2rem; }
.ac-campo label { display: block; font-size: .88rem; font-weight: 600; color: var(--wiki-dark); margin-bottom: .35rem; }
.ac-campo input, .ac-campo select, .ac-campo textarea {
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    color: var(--wiki-dark);
    background: var(--wiki-card-bg);
    border: 1.5px solid var(--wiki-glass-border);
    border-radius: 12px;
    padding: .7rem .9rem;
}
.ac-campo input:focus, .ac-campo select:focus, .ac-campo textarea:focus {
    outline: none;
    border-color: var(--fb-red);
}
.ac-campo textarea { min-height: 16rem; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92rem; }
.ac-campo .ac-aiuto { margin: .35rem 0 0; font-size: .82rem; line-height: 1.5; color: var(--wiki-text-muted); }
.ac-riga { display: flex; gap: 1rem; flex-wrap: wrap; }
.ac-riga > * { flex: 1; min-width: 12rem; }
.ac-azioni { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }

.ac-scatola {
    background: var(--wiki-card-bg);
    border: 1px solid var(--wiki-glass-border);
    border-radius: 18px;
    padding: 1.75rem;
    max-width: 30rem;
    margin: 2rem auto;
}
.ac-scatola h1 { font-size: 1.6rem; margin: 0 0 .5rem; }

/* ---- Tabelle di gestione ---- */
.ac-tabella-scroll { overflow-x: auto; }
.ac-tabella { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ac-tabella th {
    text-align: left;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--wiki-text-muted);
    padding: .6rem .7rem;
    border-bottom: 1.5px solid var(--wiki-glass-border);
    white-space: nowrap;
}
.ac-tabella td { padding: .75rem .7rem; border-bottom: 1px solid var(--wiki-glass-border); vertical-align: middle; }
.ac-tabella tr:hover td { background: var(--wiki-glass-bg); }
.ac-tabella .ac-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem; }
.ac-tabella form { display: inline; }

.ac-etichetta {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .18rem .6rem;
    border-radius: 30px;
    white-space: nowrap;
}
.ac-etichetta--ok { background: rgba(4, 120, 87, .1); color: #047857; }
.ac-etichetta--no { background: rgba(100, 116, 139, .12); color: #64748b; }
.ac-etichetta--attesa { background: rgba(180, 83, 9, .1); color: #b45309; }
.ac-etichetta--rosso { background: var(--fb-red-light); color: var(--fb-red); }

.ac-vuoto {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--wiki-text-muted);
    background: var(--wiki-glass-bg);
    border: 1px dashed var(--wiki-glass-border);
    border-radius: 18px;
    font-size: .96rem;
    line-height: 1.6;
}

/* ---- Il piede ---- */
.ac-piede {
    border-top: 1px solid var(--wiki-glass-border);
    padding: 1.75rem 1.25rem 2.5rem;
    text-align: center;
    font-size: .85rem;
    color: var(--wiki-text-muted);
}
.ac-piede p { margin: 0 0 .3rem; }
.ac-piede a { color: var(--fb-red); text-decoration: none; }
.ac-piede-nota { font-size: .8rem; }

/* ---- Il video di una lezione ----
   Sta in cima alla lezione. `aspect-ratio` e non un'altezza fissa: un 16:9
   scritto in pixel si sfonda alla prima larghezza diversa da quella provata. */
.ac-video {
    position: relative;
    aspect-ratio: 16 / 9;
    margin: 0 0 1.75rem;
    background: #0f172a;
    border-radius: 18px;
    overflow: hidden;
}
.ac-video iframe,
.ac-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ---- I materiali di una lezione ---- */
.ac-materiali {
    margin-top: 2rem;
    padding: 1.35rem 1.5rem;
    background: var(--wiki-glass-bg);
    border: 1px solid var(--wiki-glass-border);
    border-radius: 18px;
}
.ac-materiali h3 { margin: 0 0 .9rem; font-size: 1.05rem; }
.ac-materiali ul { list-style: none; margin: 0; padding: 0; }
.ac-materiali li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .8rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--wiki-glass-border);
}
.ac-materiali li:last-child { border-bottom: 0; }
.ac-materiali a { color: var(--fb-red); font-weight: 600; text-decoration: none; }
.ac-materiale-peso { font-size: .8rem; color: var(--wiki-text-muted); }
.ac-materiale-nota { flex: 1 0 100%; font-size: .85rem; color: var(--wiki-text-muted); }

/* ---- La rata dell'accademia ----
   Il promemoria delle tre rate bimestrali, in cima alla dashboard e dentro la
   pagina dell'accademia. Il colore lo decide l'urgenza, e le tre varianti non
   sono un vezzo: un riquadro sempre rosso, dopo due settimane, non lo guarda
   più nessuno, e allora il giorno che la rata è davvero scaduta non si distingue
   da tutti gli altri giorni. Il piede (importo + pulsante) scende sotto i 700px,
   come nelle schede delle date dei workshop. */
.ac-rata {
    margin: 0 0 1.75rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    background: var(--wiki-card-bg);
    border: 1px solid var(--wiki-glass-border);
    border-left: 4px solid var(--wiki-text-muted);
    border-radius: 18px;
}
.ac-rata-tag {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wiki-text-muted);
    margin-bottom: .35rem;
}
.ac-rata-quando { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.ac-rata-quando strong { font-size: 1.2rem; }
.ac-rata .ac-aiuto { margin: .35rem 0 0; }
.ac-rata .ac-azioni { flex-shrink: 0; }

.ac-rata--vicina { border-left-color: #b45309; background: rgba(180, 83, 9, .06); }
.ac-rata--vicina .ac-rata-tag { color: #92400e; }
.ac-rata--scaduta { border-left-color: var(--fb-red); background: var(--fb-red-light); }
.ac-rata--scaduta .ac-rata-tag { color: var(--fb-red-dark); }

@media (max-width: 700px) {
    .ac-rata { flex-direction: column; align-items: stretch; }
}

/* Le rate dentro la pagina dell'accademia: una riga per rata, quella pagata
   spenta e barrata come le serate passate. */
.ac-rate-elenco { list-style: none; margin: 1.1rem 0 0; padding: 0; }
.ac-rate-elenco li {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--wiki-glass-border);
    font-size: .95rem;
}
.ac-rate-elenco li:last-child { border-bottom: 0; }
.ac-rate-elenco .ac-rata-num {
    font-weight: 700;
    color: var(--wiki-text-muted);
    min-width: 5.5rem;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.ac-rate-elenco .ac-rata-cifra { font-weight: 700; min-width: 5rem; }
.ac-rate-elenco .ac-rata-pagata { opacity: .55; }
.ac-rate-elenco .ac-rata-pagata .ac-rata-cifra { text-decoration: line-through; }

/* ---- Le serate in diretta ----
   Il riquadro sta in cima al corso e sulla dashboard: la sera della lezione è la
   prima cosa che si cerca, e il collegamento deve trovarsi in due secondi. */
.ac-diretta {
    margin: 0 0 2rem;
    padding: 1.4rem 1.6rem;
    background: var(--wiki-card-bg);
    border: 1px solid var(--wiki-glass-border);
    border-left: 3px solid var(--fb-red);
    border-radius: 18px;
}
.ac-diretta h3 { margin: 0 0 .7rem; font-size: 1.05rem; }
.ac-diretta--stretta { margin-bottom: 1.5rem; }
.ac-diretta-quando { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; }
.ac-diretta .ac-aiuto { margin-top: .7rem; }
.ac-serate { margin-top: 1.1rem; }
.ac-serate summary { cursor: pointer; font-size: .9rem; color: var(--wiki-text-muted); }
.ac-serate ol { margin: .9rem 0 0; padding-left: 1.4rem; font-size: .92rem; line-height: 1.9; }
.ac-serate li::first-letter { text-transform: uppercase; }
.ac-serata--passata { opacity: .5; text-decoration: line-through; }
.ac-serata-tit { color: var(--wiki-text-muted); }
.ac-serata-tit::before { content: ' · '; }

/* ---- Quello che il proprio piano non comprende ----
   Si vede, col lucchetto: nascosto sembrerebbe non esistere, e quello che non si
   sa che esiste non si compra. */
.ac-scheda--chiusa { opacity: .72; }
.ac-lucchetto {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--wiki-text-muted);
}
.ac-chiuso {
    padding: 1.75rem;
    background: var(--wiki-glass-bg);
    border: 1px dashed var(--wiki-glass-border);
    border-radius: 20px;
}
.ac-chiuso-tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 1rem;
    padding: .3rem .8rem;
    background: var(--fb-red-light);
    color: var(--fb-red);
    border-radius: 30px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ---- Una lezione che deve ancora aprirsi ----
   Si vede il titolo e quando esce, ma non è un collegamento: sapere che la
   settimana prossima arriva qualcosa è metà del motivo per tornare. */
.ac-lezioni li.ac-chiusa {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    color: var(--wiki-text-muted);
    border-bottom: 1px solid var(--wiki-glass-border);
}
.ac-lezioni li.ac-chiusa:last-child { border-bottom: 0; }
.ac-spunta--chiusa { background: transparent; border-color: transparent; font-size: .8rem; }
.ac-lezioni li.ac-chiusa .ac-durata { margin-left: auto; white-space: nowrap; }

/* ---- Le pubblicazioni portate dentro (regole da pubblicazioni/articolo.css) ----
 *
 * I riquadri degli articoli lunghi e dei paper (`sec`, `callout`, `lab`, `infobox`,
 * `keypoints`, `pull`, `verse`) hanno nomi di classe di una parola sola. Fuori stanno
 * in un foglio loro; caricare quel foglio qui dentro romperebbe mezza piattaforma,
 * perché `.container`, `.wrap` e `.meta` esistono anche qui. Quindi le regole che
 * servono sono ricopiate qui, chiuse dentro `.ac-lezione`, che è il contenitore del
 * testo sia di una lezione sia di un articolo.
 *
 * ⚠️ I nomi dei colori sono rimappati sui token del sito: fuori quei paper hanno il
 * viola e l'arancio, dentro la piattaforma comanda il rosso. Un articolo importato
 * che si porta dietro la sua tavolozza si vede subito che è un pezzo incollato. */
.ac-lezione {
    --serif: 'Instrument Sans', system-ui, sans-serif;
    --mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --ink: var(--wiki-text, #0f172a);
    --v: var(--fb-red, #c2001c);
    --grad: var(--fb-gradient, linear-gradient(135deg, #c2001c, #7f0013));
}
.ac-lezione .ins { background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:600 }
.ac-lezione .standfirst .ins { font-weight:600 }
.ac-lezione .lead-drop::first-letter { font-family:var(--serif);font-weight:900;float:left;font-size:78px;line-height:.78; padding:8px 12px 0 0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent; }
.ac-lezione h2.sec { font-family:var(--serif);font-weight:600;font-size:clamp(28px,4.4vw,38px);line-height:1.08;letter-spacing:-.015em; margin:54px 0 8px;scroll-margin-top:24px;color:var(--ink); }
.ac-lezione h2.sec .n { font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--v);display:block;margin-bottom:12px }
.ac-lezione h2.sec + p { margin-top:18px }
.ac-lezione h3.sub { font-family:var(--serif);font-weight:600;font-size:clamp(21px,3vw,26px);line-height:1.15;letter-spacing:-.01em;margin:34px 0 6px;color:var(--ink) }
.ac-lezione .examples { margin:30px 0;padding:28px 30px;border-left:3px solid transparent; border-image:var(--grad) 1;background:linear-gradient(90deg,rgba(157,0,255,.045),rgba(255,140,0,.02));border-radius:0 12px 12px 0; }
.ac-lezione .examples p { font-family:var(--serif);font-size:clamp(20px,3vw,26px);line-height:1.22;margin:0 0 16px }
.ac-lezione .examples p:last-child { margin-bottom:0 }
.ac-lezione .examples .neg { color:var(--ink-faint) }
.ac-lezione .keypoints { margin:30px 0;padding:26px 30px;background:var(--stage);border:1px solid var(--rule);border-radius:14px;box-shadow:0 8px 30px -24px rgba(23,21,28,.5) }
.ac-lezione .keypoints h4 { font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin:0 0 14px }
.ac-lezione .keypoints ul { margin:0;padding:0;list-style:none }
.ac-lezione .keypoints li { position:relative;padding-left:28px;margin:0 0 12px;font-size:16.5px;line-height:1.55;color:var(--ink-soft) }
.ac-lezione .keypoints li:last-child { margin-bottom:0 }
.ac-lezione .keypoints li::before { content:"";position:absolute;left:2px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--grad) }
.ac-lezione .infobox { margin:30px 0;padding:24px 28px;background:linear-gradient(90deg,rgba(157,0,255,.05),rgba(255,140,0,.025));border:1px solid var(--rule);border-radius:14px }
.ac-lezione .infobox h4 { font-family:var(--serif);font-weight:600;font-size:20px;margin:0 0 10px;color:var(--ink) }
.ac-lezione .infobox p { font-size:16.5px;line-height:1.65;color:var(--ink-soft);margin:0 0 10px }
.ac-lezione .infobox p:last-child { margin-bottom:0 }
.ac-lezione blockquote.q { margin:36px 0;padding:6px 0 6px 30px;border-left:3px solid transparent;border-image:var(--grad) 1 }
.ac-lezione blockquote.q .verse { font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,4.2vw,36px);line-height:1.12;letter-spacing:-.01em;color:var(--ink) }
.ac-lezione blockquote.q .verse .ins { font-style:italic }
.ac-lezione blockquote.q cite { display:block;font-style:normal;font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--ink-mute);margin-top:18px }
.ac-lezione blockquote.q.fr .verse { font-size:clamp(18px,2.5vw,23px);font-weight:400;line-height:1.4 }
.ac-lezione blockquote.pull { margin:36px 0;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(22px,3.4vw,30px);line-height:1.2;color:var(--ink);border-left:3px solid transparent;border-image:var(--grad) 1;padding-left:28px }
.ac-lezione .callout { margin:34px 0;padding:24px 28px;background:var(--ink);color:#fff;border-radius:16px;position:relative;overflow:hidden }
.ac-lezione .callout::before { content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad) }
.ac-lezione .callout .lab { font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#FFB861;margin-bottom:10px }
.ac-lezione .callout p { font-size:17px;line-height:1.6;margin:0 0 10px;color:#EDEAF2 }
.ac-lezione .callout p:last-child { margin-bottom:0 }
.ac-lezione .callout p .ins { font-weight:600 }
.ac-lezione .callout a { color:#FFB861;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px }
.ac-lezione .callout a:visited { color:#FFB861 }
.ac-lezione .callout a:hover { color:#fff }
.ac-lezione .callout a strong { color:inherit }
.ac-lezione .table-wrap { margin:30px 0;overflow-x:auto;border:1px solid var(--rule);border-radius:14px }
.ac-lezione .table-wrap table { border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px }
.ac-lezione .table-wrap th, .ac-lezione .table-wrap td { text-align:left;padding:14px 18px;border-bottom:1px solid var(--rule);line-height:1.45;color:#231F2A }
.ac-lezione .table-wrap thead th { font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);background:var(--rule-soft);font-weight:700 }
.ac-lezione .table-wrap tbody tr:last-child td { border-bottom:0 }
.ac-lezione .table-wrap td:first-child { font-weight:600;color:var(--ink) }
.ac-lezione .slides h2 .ins { font-style:normal }
.ac-lezione .slides .hint { font-family:var(--mono);font-size:12.5px;color:#7E7989;letter-spacing:.03em }
.ac-lezione .slides .hint kbd { background:#26222E;border:1px solid #3A3543;border-radius:5px;padding:1px 7px;font-family:var(--mono);font-size:11.5px;color:#CFC9D6 }

/* ---- Il testo che arriva da fuori, sul telefono ----
 *
 * Le pagine importate dal sito hanno 75 articoli con tabelle e 75 lezioni con blocchi
 * di codice, scritti per una colonna larga. Su un telefono una tabella di sei colonne
 * allarga la PAGINA, e allora scorre tutto in orizzontale: è il bug che in questo sito
 * è già tornato tre volte. Qui la tabella diventa un blocco che scorre da sé e la
 * pagina sta ferma. `overflow-wrap` serve agli indirizzi lunghi, che altrimenti
 * spingono il testo fuori invece di andare a capo.
 */
.ac-lezione { overflow-wrap: break-word; }

@media (max-width: 760px) {
    .ac-lezione table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}