@charset "UTF-8";
/* ---------------------------------------------------------------------------
   Cloud Native Pills - NEEN
   Stessa palette e stessa tipografia di cloudnativeschool, che a sua volta
   segue neen.it:
     arancio  #F84900   grigio  #6C6F70   testo  #252526
     fondo alt #F5F4F4  blocco #EBEBEB    linea  #DCDCDC   font Montserrat
   Nessun CDN: zero chiamate esterne.
--------------------------------------------------------------------------- */

/* Montserrat è SELF-HOSTATO: caricarlo dal CDN di Google trasmetterebbe l'IP dei
   visitatori a Google, cosa già giudicata una violazione del GDPR in sede europea
   e inopportuna per un percorso destinato a un cliente finance.
   I file vengono dal pacchetto ufficiale di Fontsource (Google Fonts
   ripacchettato, licenza SIL OFL, copiata in fonts/LICENSE-Montserrat.txt) e si
   reimportano con produzione/tools/importa_font.py. Sottoinsieme latino: copre
   l'italiano, accenti compresi.
   font-display: swap - il testo si legge subito col carattere di sistema e viene
   sostituito quando il font è pronto: meglio di una pagina bianca per 200 ms. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/montserrat-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/montserrat-500.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/montserrat-700.woff2') format('woff2')}

:root{
  --orange:#F84900;
  --grey:#6C6F70;
  --ink:#252526;
  --alt:#F5F4F4;
  --block:#EBEBEB;
  --line:#DCDCDC;
  --white:#FFFFFF;
  --ok:#1F8A53;
  /* Aggiunti in W1. Erano scritti a mano nei componenti: #fff in cinque punti
     della navbar, i quattro grigi del blocco scuro .teach e i due colori
     dell'errore di login. Un colore ripetuto a mano e' un colore che al primo
     cambio di brand si aggiorna in cinque posti su sei. */
  --su-orange:#FFFFFF;        /* testo sopra il fondo arancio */
  --linea-su-orange:rgba(255,255,255,.6);
  --bordo-su-orange:rgba(255,255,255,.25);
  --scuro:var(--scuro);            /* fondo del blocco docente */
  --scuro-code:#3A3B3C;
  --scuro-testo:#BFC1C2;
  --scuro-linea:#4A4B4C;
  --avviso:#B8791A;           /* le azioni che cambiano stato senza distruggere */
  --avviso-testo:#8A5A11;
  --err-bg:#FCEFEE;
  --err-linea:#C0392B;
  --nero:#000000;             /* lo sfondo del player, che nero deve essere */
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','Cascadia Mono',Consolas,'DejaVu Sans Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);margin:0;padding:0;
  background:var(--white);color:var(--ink);
  font-size:15px;line-height:24px;font-weight:400;
}
.container{max-width:1200px;width:95%;margin:0 auto}
a{color:var(--orange)}

/* ------------------------------- NAVBAR ---------------------------------- */
/* MOBILE FIRST, convertita in W1: era l'ultimo componente desktop-first del
   foglio, e quello con del JavaScript attaccato. La base descrive il telefono -
   menu chiuso, burger visibile - e la @media (min-width:821px) in fondo apre il
   menu in orizzontale. Prima era il contrario, e la conseguenza era che su
   telefono il menu si mostrava per un istante prima che la @media lo chiudesse. */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;
  background:var(--orange);color:var(--su-orange)}
.navbar .container{display:flex;justify-content:space-between;align-items:center;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px;color:var(--su-orange);text-decoration:none}
.brand .logo{height:22px;width:auto;display:block;fill:currentColor}
.brandtxt{font-size:12px;text-transform:uppercase;font-weight:700;letter-spacing:.06em}
.menu{position:absolute;top:100%;left:0;width:100%;background:var(--orange);
  display:none;flex-direction:column;align-items:flex-start;gap:0;padding:0 5%}
.menu.open{display:flex}
.menu a,.menu .who,.menu .signout{padding:11px 0;width:100%;
  border-bottom:1px solid var(--bordo-su-orange)}
.menu a{color:var(--su-orange);text-decoration:none;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em}
.menu a:hover,.menu a.active{text-decoration:underline;text-underline-offset:4px}
.menu .who{font-size:11px;opacity:.85;text-transform:none;font-weight:500;letter-spacing:0}
/* L'uscita e' un form in POST con token CSRF, non un collegamento: un logout in
   GET si forza dall'esterno, perche' SameSite=Lax non blocca la navigazione
   top-level. Il bottone e' vestito come le altre voci, quindi la differenza si
   vede solo nel sorgente. */
.menu .signout{border:0}
.menu .out{font-family:inherit;background:none;color:var(--su-orange);cursor:pointer;
  border:1px solid var(--linea-su-orange);padding:5px 10px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.menu .out:hover{background:var(--ink);border-color:var(--ink)}
/* IL PROGRAMMA DEL CORSO IN UNA VOCE SOLA (20/08/2026).
   Prima le parti erano voci sorelle nella barra: su un corso con cinque parti dai nomi
   lunghi la barra andava a capo tre volte. Adesso stanno dentro un <details>, che si apre
   da se' - niente JavaScript, che la Content Security Policy di questo portale vieta
   inline. Qui la forma da telefono, dentro il menu del burger: una fisarmonica. */
.menu .parti{width:100%;border-bottom:1px solid var(--bordo-su-orange)}
.menu .parti>summary{padding:11px 0;color:var(--su-orange);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;cursor:pointer;list-style:none}
.menu .parti>summary::-webkit-details-marker{display:none}
/* Il segno di apertura e' testo e non un'immagine: una freccia in SVG qui sarebbe una
   richiesta in piu' per due caratteri. */
.menu .parti>summary::after{content:' \25be';font-size:10px}
.menu .parti[open]>summary::after{content:' \25b4'}
.menu .parti .voci{display:flex;flex-direction:column}
.menu .parti .voci a{padding-left:14px;font-weight:500;text-transform:none;
  border-bottom:0;opacity:.9}
.burger{display:block;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:20px;height:2px;background:var(--su-orange);margin:4px 0}

/* -------------------------------- HERO ----------------------------------- */
.hero{background:var(--white);padding:96px 0 0}
.hero-inner{max-width:900px;margin:0 auto;background:var(--block);padding:34px 40px}
.hero .crumbs{margin:0 0 12px}
.hero h1{text-align:left;font-size:30px;line-height:38px;font-weight:700;color:var(--ink);margin:0 0 14px}
.hero .lead{font-size:18px;line-height:26px;font-weight:500;color:var(--ink);margin:0 0 16px}

/* ------------------------------- PILLOLE --------------------------------- */
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.pill{display:inline-block;font-size:11px;font-weight:500;text-transform:uppercase;
  letter-spacing:.04em;background:var(--white);border:1px solid var(--line);padding:5px 10px}
.pill b{color:var(--orange);font-weight:700}
.badge{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;background:var(--orange);color:#fff;padding:3px 8px;vertical-align:middle}

/* ------------------------------ SEZIONI ---------------------------------- */
.section{padding:52px 0}
.section:nth-of-type(even){background:var(--alt)}
.section h2{font-size:30px;line-height:38px;font-weight:700;margin:0 0 8px}
.section .sub{max-width:820px;color:var(--grey);margin:0 0 26px}
.note{background:var(--white);border-left:3px solid var(--orange);padding:14px 18px;margin:18px 0 0;font-size:14px}
.note b{color:var(--ink)}
code{font-family:var(--mono);font-size:.92em;background:var(--block);padding:1px 5px}

/* -------------------------------- GRIGLIA -------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.card{background:var(--white);border:1px solid var(--line);padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.section:nth-of-type(even) .card{background:var(--white)}
.card.watched{border-left:3px solid var(--ok)}
.card.pending{background:var(--alt);border-style:dashed}
.cardtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.code{font-family:var(--mono);font-size:13px;font-weight:700;color:#fff;background:var(--orange);padding:3px 8px}
.code.large{font-size:clamp(15px,3.6vw,20px);padding:6px 11px}
.pos{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey)}
.dur{margin-left:auto;font-family:var(--mono);font-size:13px;color:var(--ink)}
.dur.pending{font-family:var(--font);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey)}
.card h3{font-size:18px;line-height:25px;font-weight:700;margin:0}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--orange)}
.card .desc{margin:0;font-size:14px;line-height:21px;color:var(--grey)}
.topics{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:5px}
.topics li{font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--grey);
  background:var(--alt);border:1px solid var(--line);padding:3px 7px}
.cardfoot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Le schede dei CORSI, sul catalogo. Riusano .card e cambiano tre cose: sono piu
   larghe (un corso ha una descrizione, non tre chip), il titolo pesa di piu, e
   il bordo superiore arancione le distingue a colpo d'occhio dalle schede delle
   lezioni, che hanno la stessa forma un livello piu sotto. */
.grid.courses{grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr))}
.card.course{border-top:3px solid var(--orange);padding:22px 24px}
.card.course h3{font-size:21px;line-height:28px}
.card.course .desc b{color:var(--ink);font-weight:700}
.card.course .cardfoot{align-items:flex-start;flex-direction:column}

/* -------------------------------- BOTTONI -------------------------------- */
.btn{display:inline-block;font-family:inherit;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;background:var(--orange);color:#fff;border:0;padding:8px 14px;
  text-decoration:none;cursor:pointer}
.btn:hover{background:var(--grey)}
.btn.off{background:var(--line);color:var(--grey);cursor:not-allowed}
.mark{font-family:inherit;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  background:none;border:1px solid var(--line);color:var(--grey);padding:7px 11px;cursor:pointer}
.mark:hover{border-color:var(--orange);color:var(--orange)}
.mark.on{border-color:var(--ok);color:var(--ok)}
.mark.on::before{content:'\2713\00a0'}
.tick{margin:0 0 0 auto}
.link{font-size:12px;font-weight:500;color:var(--grey);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--orange)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* -------------------------------- LEZIONE -------------------------------- */
.lesson{padding:96px 0 52px}
.crumbs{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);margin:0 0 18px}
.crumbs a{color:var(--grey);text-decoration:none}
.crumbs a:hover{color:var(--orange)}
/* MOBILE FIRST. La base descrive il telefono, e la @media (min-width) piu sotto
   aggiunge quello che serve al desktop. E' l'opposto del resto del foglio, che e'
   scritto desktop-first con `max-width`: la conversione si fa un componente alla
   volta, e questo e' il primo. Vedi la nota in fondo al file. */
.lesson-head{display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  margin:0 0 20px}
/* `clamp` toglie una breakpoint: fra 22 e 30 px il titolo scala da se' con la
   larghezza, e non serve una regola per ogni taglia di schermo. */
.lesson-head h1{font-size:clamp(22px,5.2vw,30px);line-height:1.26;font-weight:700;
  margin:0 0 8px}
.lesson-head .lead{font-size:clamp(15px,3.4vw,17px);line-height:1.47;color:var(--grey);
  margin:0 0 8px}
.meta-row{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);margin:0}

.player{background:var(--nero);width:100%;aspect-ratio:16/9;max-height:76vh}
.player video{display:block;width:100%;height:100%;background:var(--nero)}
.pending-box{background:var(--alt);border:1px dashed var(--line);padding:26px 28px}
.pending-box b{display:block;margin-bottom:6px}
.pending-box p{margin:0;color:var(--grey);font-size:14px}

.remember{background:var(--block);border-left:3px solid var(--orange);padding:18px 22px;margin:24px 0 0}
.remember .label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--orange);margin-bottom:6px}
.remember p{margin:0;font-size:19px;line-height:27px;font-weight:500}

.actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:24px 0 0;
  padding-top:16px;border-top:1px solid var(--line)}
.actions form{margin:0}

.further{margin:40px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.further h2{font-size:22px;line-height:30px;margin:0 0 6px}
.further ol{margin:16px 0 0;padding:0;list-style:none;counter-reset:ap}
.further li{counter-increment:ap;display:flex;align-items:baseline;gap:14px;
  padding:12px 0;border-top:1px solid var(--line)}
.further li::before{content:counter(ap);font-family:var(--mono);font-size:12px;
  font-weight:700;color:var(--orange);min-width:18px}
.further a{flex:1;font-size:16px;font-weight:500;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)}
.further a:hover{color:var(--orange);text-decoration-color:var(--orange)}
.further .domain{font-family:var(--mono);font-size:12px;color:var(--grey);white-space:nowrap}
@media (max-width:600px){.further li{flex-wrap:wrap}.further .domain{width:100%;padding-left:32px}}

.transcript{margin:44px 0 0;padding-top:28px;border-top:1px solid var(--line)}
.transcript h2{font-size:22px;line-height:30px;margin:0 0 6px}
.transcript h3{font-size:15px;text-transform:uppercase;letter-spacing:.05em;color:var(--orange);margin:26px 0 8px}
.transcript h4{font-size:14px;margin:20px 0 6px}
.transcript p{max-width:820px;margin:0 0 12px}
.transcript .direction{font-size:13px;color:var(--grey);border-left:2px solid var(--line);padding-left:12px}

/* La nota sotto il pulsante del PowerPoint: riga propria, corpo piccolo. */
.file-note{display:block;margin-top:8px;font-size:12px;line-height:1.5;
  color:var(--grey)}

/* Salti rapidi sotto il video: testo, non riquadri. I riquadri stanno in fondo
   alla pagina (.arrows) e servono a un altro momento della lettura. */
/* Una riga sola, a tutte le larghezze: il precedente a sinistra, il successivo
   a destra. Su telefono i titoli non ci stanno per intero, e invece di mandarli
   a capo si troncano con i puntini - il codice della lezione, che e' la parte
   che identifica, sta all'inizio ed e' sempre visibile.
   `min-width:0` non e' decorativo: senza, un figlio flex non scende sotto la
   larghezza del suo contenuto e `text-overflow` non scatta mai. */
.jumps{display:flex;align-items:baseline;gap:12px;
  margin:26px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.jumps a{color:var(--grey);text-decoration:none;min-width:0;flex:1 1 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jumps a:hover{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.jumps .next{text-align:right}
/* Se manca il precedente, il successivo resta comunque a destra. */
.jumps .next:only-child{margin-left:auto}

/* MOBILE FIRST: una colonna. */
.arrows{display:grid;grid-template-columns:1fr;gap:14px;margin:44px 0 0}
.arrows a{display:block;border:1px solid var(--line);padding:14px 18px;text-decoration:none;color:var(--ink)}
.arrows a:hover{border-color:var(--orange)}
.arrows span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--grey);margin-bottom:4px}
.arrows b{font-size:14px;font-weight:700}


/* ------------------------------- DOCENTE --------------------------------- */
.teach{background:var(--ink)!important;color:#fff}
.teach h2,.teach .note b{color:var(--su-orange)}
.teach .sub{color:var(--scuro-testo)}
.teach .note{background:var(--scuro);border-left-color:var(--orange)}
.teach .pill{background:transparent;border-color:var(--scuro-linea);color:var(--su-orange)}
.teach code{background:var(--scuro-code);color:var(--su-orange)}

/* -------------------------------- FOOTER --------------------------------- */
.footer{background:var(--alt);border-top:1px solid var(--line);padding:30px 0;text-align:center}
.footer .logo{height:20px;width:auto;fill:var(--orange);margin:0 auto 10px;display:block}
.footer p{margin:0;font-size:12px;color:var(--grey)}

/* --------------------------------- LOGIN --------------------------------- */
.loginbody{background:var(--alt)}
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.loginbox{background:var(--white);border:1px solid var(--line);padding:36px 34px;width:100%;max-width:400px}
.loginlogo .logo{height:26px;width:auto;fill:var(--orange);display:block;margin-bottom:20px}
.loginbox h1{font-size:22px;line-height:30px;font-weight:700;margin:0 0 6px}
.loginsub{font-size:13px;color:var(--grey);margin:0 0 22px}
.loginbox label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--grey);margin:14px 0 5px}
.loginbox input{width:100%;font-family:inherit;font-size:15px;padding:10px 12px;
  border:1px solid var(--line);background:var(--white);color:var(--ink)}
.loginbox input:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)}
.loginbox button{width:100%;margin-top:22px;font-family:inherit;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;background:var(--orange);color:#fff;
  border:0;padding:12px;cursor:pointer}
.loginbox button:hover{background:var(--grey)}
.loginbox button:disabled{background:var(--line);color:var(--grey);cursor:not-allowed}
.msg{background:var(--block);padding:10px 12px;font-size:13px;margin:0 0 6px}
.err{background:var(--err-bg);border-left:3px solid var(--err-linea);padding:10px 12px;font-size:13px;margin:0 0 6px}

/* ------------------------------- RESPONSIVE ------------------------------ */
/* MOBILE FIRST, e ora vale per tutto il foglio: la base descrive il TELEFONO e
   la `@media (min-width:821px)` aggiunge quello che serve al desktop. Non esiste
   piu nessuna `@media (max-width:820px)`, e non va reintrodotta: due direzioni
   nello stesso foglio erano la ragione per cui il menu appariva per un istante
   prima di chiudersi.
   Convertiti il 6 agosto 2026: `.lesson-head`, `.jumps`, `.arrows`.
   Convertita in W1, il 17 agosto 2026: la barra di navigazione con il suo menu. */

/* Da qui in su c'e' spazio: header su una riga, con la sigla accanto al titolo. */
@media (min-width:821px){
  /* Da qui in su il menu sta su una riga e il burger non serve. */
  .burger{display:none}
  .menu{position:static;width:auto;background:none;display:flex;flex-direction:row;
    align-items:center;gap:18px;padding:0}
  .menu a,.menu .who,.menu .signout{padding:0;width:auto;border-bottom:0}
  /* Da qui in su la voce sta sulla riga e il pannello si apre SOPRA la pagina: un pannello
     che spingesse il contenuto in basso sposterebbe cio' che si sta leggendo. */
  .menu .parti{position:relative;width:auto;border-bottom:0}
  .menu .parti>summary{padding:0}
  .menu .parti .voci{position:absolute;top:calc(100% + 14px);left:-16px;min-width:270px;
    background:var(--orange);border:1px solid var(--bordo-su-orange);padding:2px 16px;
    z-index:1001}
  .menu .parti .voci a{padding:10px 0;padding-left:0;width:auto;
    border-bottom:1px solid var(--bordo-su-orange)}
  .menu .parti .voci a:last-child{border-bottom:0}
  .lesson-head{flex-direction:row;gap:18px;margin:0 0 24px}
  .lesson-head .code.large{padding:8px 14px}
  .jumps{gap:24px}
  .arrows{grid-template-columns:1fr 1fr}
  .arrows .next{text-align:right}
}


/* ----------------------------- GESTIONE (W5) -----------------------------
   MOBILE FIRST, come `.lesson-head`: la base descrive il telefono e la @media in
   fondo aggiunge il desktop.

   La scelta che vale la pena spiegare e' la tabella. Su un telefono una tabella
   a sei colonne si puo' trattare in tre modi: rimpicciolire il testo (illeggibile),
   farla scorrere in orizzontale (si perde la prima colonna, cioe' chi e' la riga),
   oppure smettere di essere una tabella. Qui succede la terza: sotto gli 821px
   ogni riga diventa una scheda e ogni cella porta la sua etichetta in un
   `data-et`, stampata dal CSS con `::before`. L'intestazione, che a quel punto
   non ha piu' senso, si nasconde.

   Per questo le celle sono `<span data-et="...">` e non `<td>`: e' l'unico modo
   di avere l'etichetta accanto al valore senza scriverla due volte nell'HTML. */
.admin{padding:96px 0 52px}
.admin h1{font-size:clamp(22px,5.2vw,30px);line-height:1.26;font-weight:700;margin:0 0 18px}
.admin .msg,.admin .err{margin:0 0 20px;max-width:820px}

.block{margin:34px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.block h2{font-size:clamp(18px,4vw,22px);line-height:1.3;margin:0 0 6px}
.block .sub{max-width:820px;color:var(--grey);font-size:14px;line-height:21px;margin:0 0 18px}

/* I riquadri della pagina d'ingresso: numeri che fanno fare qualcosa. */
.admin-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.admin-grid .card{gap:4px}
.admin-grid .label{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--orange)}
.admin-grid .figure{font-size:34px;line-height:1.1;font-weight:700;margin:2px 0 4px}
.admin-grid .desc{font-size:13px;line-height:19px}

/* --- form ---------------------------------------------------------------- */
.form{display:flex;flex-wrap:wrap;gap:14px 18px;align-items:flex-end;
  background:var(--white);border:1px solid var(--line);padding:20px 22px}
.form.filters{background:var(--alt);margin:0 0 20px}
.field{display:flex;flex-direction:column;gap:5px;flex:1 1 100%;min-width:0}
.field label{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--grey)}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;
  padding:9px 11px;border:1px solid var(--line);background:var(--white);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--orange);
  outline-offset:0;border-color:var(--orange)}
.field.choice label{display:flex;align-items:center;gap:8px;font-size:13px;
  text-transform:none;letter-spacing:0;font-weight:500;color:var(--ink)}
.field.choice input{width:auto}
.field .fixed{margin:0;font-size:15px;padding:9px 0}
.form-actions{flex-direction:row;align-items:center;gap:16px}

/* --- tabella che su telefono diventa un elenco di schede ------------------ */
.table{display:flex;flex-direction:column;gap:12px}
.table .head{display:none}
.table .tr{display:flex;flex-direction:column;gap:6px;background:var(--white);
  border:1px solid var(--line);padding:14px 16px}
.table .tr.dimmed{background:var(--alt);color:var(--grey)}
.table .tr>span{font-size:14px;line-height:20px;min-width:0;overflow-wrap:anywhere}
.table .tr>span::before{content:attr(data-et) ': ';font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--grey);display:block}
.table .mono{font-family:var(--mono);font-size:12.5px;color:var(--grey)}
.table .pos{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey)}
.row-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.row-actions form{margin:0}

/* --- elenchi brevi (inviti da mandare, corsi fantasma) ------------------- */
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  background:var(--white);border:1px solid var(--line);padding:12px 14px;font-size:14px}
.list li form{margin:0 0 0 auto}
.list .mono{font-family:var(--mono);font-size:12.5px;color:var(--grey)}
.list .pos{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey)}

@media (min-width:821px){
  /* Da qui in su c'e' spazio: le righe tornano righe, con l'intestazione. */
  .table{gap:0;border:1px solid var(--line);background:var(--white)}
  .table .tr{display:grid;grid-template-columns:2fr 1.4fr 1fr 1fr 1.6fr;
    gap:14px;align-items:start;border:0;border-top:1px solid var(--line);padding:12px 16px}
  .table .tr:first-child{border-top:0}
  .table .head{display:grid;background:var(--alt)}
  .table .head span{font-size:10.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.05em;color:var(--grey)}
  .table .tr>span::before{display:none}
  .table.people .tr{grid-template-columns:2.2fr 1.2fr .9fr 1fr .9fr 1.8fr}
  .table.assignments .tr{grid-template-columns:1.6fr 1.8fr 1.3fr 1.2fr 1.6fr}
  .field{flex:1 1 210px}
  .field.wide{flex:1 1 100%}
  .form-actions{flex:0 0 auto}
}

/* --- pulsanti icona (W6) -------------------------------------------------
   Al posto dei pulsanti a tutta larghezza nelle righe degli elenchi.

   Sotto i 640px l'ETICHETTA RESTA VISIBILE accanto all'icona, e non e' una
   concessione: su un telefono nessuno passa il mouse per scoprire cosa fa un
   simbolo, e `title` non si vede al tocco. Da 640px in su l'etichetta sparisce e
   resta il simbolo, con `title` e `aria-label` che dicono la stessa cosa a chi
   passa il mouse e a un lettore di schermo. */
.ib{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:11px;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;
  background:none;border:1px solid var(--line);color:var(--grey);
  padding:6px 9px;cursor:pointer;line-height:1}
.ib:hover{border-color:var(--orange);color:var(--orange)}
.ib .ico{flex:0 0 auto;fill:currentColor;display:block}
.ib.filled{background:var(--orange);border-color:var(--orange);color:#fff}
.ib.filled:hover{background:var(--grey);border-color:var(--grey);color:#fff}
/* IL COLORE DICE COSA FA IL PULSANTE, e le famiglie sono quattro. Il criterio non
   e' decorativo: e' la conseguenza dell'azione.

   .ib          neutro       naviga o apre (scheda, modifica, assegna): non cambia
                             niente, e in un elenco sono la maggioranza
   .ib.filled    arancione    l'azione principale del blocco, una per blocco
   .ib.good    verde        rimette in funzione (riattiva)
   .ib.warn   ocra         cambia stato senza distruggere (sospendi, azzera,
                             invita di nuovo)
   .ib.remove    rosso        cancella o revoca: da qui non si torna

   Il colore pieno resta all'azione principale; le altre famiglie colorano il
   BORDO e l'icona, e riempiono solo al passaggio del mouse. Un elenco con cinque
   pulsanti pieni di cinque colori diversi non fa capire quale sia quello
   pericoloso - che e' esattamente il contrario dello scopo. */
.ib.good{border-color:var(--ok);color:var(--ok)}
.ib.good:hover{background:var(--ok);color:#fff}
.ib.warn{border-color:var(--avviso);color:var(--avviso-testo)}
.ib.warn:hover{background:var(--avviso);color:#fff}
.ib.remove{border-color:var(--err-linea);color:var(--err-linea)}
.ib.remove:hover{background:var(--err-linea);color:#fff}
.ib.outline{border-color:var(--orange);color:var(--orange)}
.ib.outline:hover{background:var(--orange);color:#fff}
form.action{display:inline;margin:0}

@media (min-width:641px){
  .ib .btn-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
    white-space:nowrap}
  .ib{padding:7px 8px}
}

/* --- il ritorno alla gestione ------------------------------------------- */
.back{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--grey);text-decoration:none;
  margin:0 0 14px}
.back:hover{color:var(--orange)}
.back .ico{fill:currentColor}

/* --- il menu delle lingue ---------------------------------------------- */
.langs{display:inline-flex;gap:8px;align-items:center}
.menu .langs a{padding:0;width:auto;border-bottom:0;font-size:11px;opacity:.75}
.menu .langs a.choice{opacity:1;text-decoration:underline;text-underline-offset:3px}
.loginbox .langs{justify-content:center;margin-top:18px}
.loginbox .langs a{font-size:11px;font-weight:700;color:var(--grey);text-decoration:none}
.loginbox .langs a.choice{color:var(--orange);text-decoration:underline;text-underline-offset:3px}

/* --- avanzamento -------------------------------------------------------- */
.bar{display:block;height:6px;background:var(--block);overflow:hidden}
.bar i{display:block;height:100%;background:var(--orange)}
.bar.done i{background:var(--ok)}
.progress{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--grey);
  margin:4px 0 0}
.resume{background:var(--block);border-left:3px solid var(--orange);padding:12px 16px;
  margin:0 0 16px;font-size:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.resume form{margin:0}
/* Se la posizione era a un passo dalla fine il video riparte dall'inizio, e il
   riquadro lo dice invece di lasciar pensare che la ripresa non funzioni. */
.resume[data-finita="1"] span::after{content:' Eri quasi alla fine: si riparte da capo.';
  color:var(--grey)}

@media print{
  .navbar,.footer,.arrows,.jumps,.actions,.player,.burger{display:none!important}
  body{font-size:11pt}
}