/* ==========================================================================
   Tema comune delle lezioni · direzione G+I (vedi design/ROUND-2-CONTEXT.md)
   Si carica dopo lo stile interno di ogni lezione e lo sovrascrive.
   - Colonna stretta a sinistra per testo e istruzioni, metà destra per lo strumento.
   - Heros Cn per struttura e testo; Adventor solo per le consegne crescenti (.grow).
   - Colori dell'identità del sito; un solo accento rosso.
   - Niente angoli arrotondati, ombre o sfumature.
   ========================================================================== */
@font-face{font-family:"Heros Cn";src:url("../assets/fonts/texgyre/texgyreheroscn-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Heros Cn";src:url("../assets/fonts/texgyre/texgyreheroscn-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --nero:#2a0e09;          /* bruno: testo, righi, bordi */
  --servizio:#6e4b40;      /* bruno chiaro: testate, piedi, testo di servizio */
  --rosso:#c7381f;         /* l'unico accento: titoli, culmine delle consegne, azione principale */
  --crema:#fff4e4;         /* fondo */
  --carta:#fffbf5;         /* superfici di lavoro: righi, tastiere, griglie */
  --grigio:var(--crema);
  --chiaro:#f2dcbd;        /* passaggio del puntatore, evidenziazioni leggere */
  --arancione:#e79e3a;     /* solo per stati funzionali (tasto suonato, battito attivo) */
  --font:"Heros Cn","Century Gothic","Trebuchet MS",system-ui,sans-serif;
}
*{border-radius:0 !important;box-shadow:none !important}
body{background:var(--crema);color:var(--nero)}

/* testata e piede */
.top{background:var(--crema)}
.brand{font-weight:700}
.crumb,.home{text-transform:uppercase;letter-spacing:.12em;color:var(--servizio)}
.crumb{font-size:clamp(11px,.95vw,15px);opacity:1}
.home{font-size:clamp(11px,.9vw,14px);background:transparent;border-color:var(--servizio)}
.chip{text-transform:uppercase;letter-spacing:.1em;font-size:clamp(11px,.95vw,15px)}
.chip[data-ph="a"]{background:var(--servizio)}
.chip[data-ph="b"]{background:var(--nero);color:var(--crema)}
.chip[data-ph="d"]{background:var(--nero)}
#timer{color:var(--servizio)}
.navbtn{background:transparent}
.dots button{background:transparent;border-color:var(--servizio)}
.dots button.on{transform:scale(1.25)}

/* slide: la colonna */
.slide{padding:3vh 5vw 3vh 6vw}
.kicker{font-size:clamp(12px,1vw,16px);color:var(--servizio);letter-spacing:.12em}
h1,h2{font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--nero)}
h1{font-size:clamp(48px,8.4vw,132px);line-height:.92}
h2{font-size:clamp(28px,3.9vw,58px);line-height:1}
h1 em,h2 em{color:var(--rosso)}
.sub{font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(18px,2.2vw,32px)}
.slide > .big,.slide > ul.big,.cols .big,.twocol .big,.breath .big{max-width:46ch}
.big{font-size:clamp(18px,1.9vw,28px);line-height:1.38}
.hint{color:var(--servizio);opacity:1}
.note-line{font-weight:700}
.note-line em{color:var(--rosso)}

/* superfici di lavoro (metà destra o sotto la colonna) */
.canvas,.rlbox,.staffbox,.card,.kb .white{background:var(--carta)}
.canvas,.rlbox,.staffbox,.card{border-color:var(--nero)}

/* controlli: azione principale in rosso, stato attivo in bruno */
.btn{background:transparent;color:var(--nero);border-color:var(--nero);font-weight:700}
.btn:hover{background:var(--chiaro)}
.btn.primary{background:var(--rosso);border-color:var(--rosso);color:var(--crema)}
.btn.primary:hover{background:#a92e19}
.btn.on{background:var(--nero);border-color:var(--nero);color:var(--crema)}
.btn.primary.on{background:var(--nero);border-color:var(--nero);color:var(--crema)}
input[type=range]{accent-color:var(--rosso)}

/* sezioni del coro come filtri: accesa = piena con ✓, spenta = tratteggiata con + ; il rigo spento si attenua */
.btn.sx{background:var(--nero);border:2px solid var(--nero);color:var(--crema);opacity:1;text-decoration:none}
.btn.sx::before{content:"✓\00a0"}
.btn.sx:hover{background:#4a2a22}
.btn.sx.off{background:transparent;color:var(--servizio);border:2px dashed var(--servizio);opacity:1;text-decoration:none}
.btn.sx.off::before{content:"+\00a0"}
.btn.sx.off:hover{background:var(--chiaro)}
.pr.muted svg,.sect.muted .rlbox,.pr.muted b{opacity:.25;transition:opacity .2s}

/* sintesi */
.card.r{background:var(--rosso);border-color:var(--rosso);color:var(--crema)}
.card.o{background:var(--nero);border-color:var(--nero);color:var(--crema)}
.card h3{font-weight:700;text-transform:uppercase;letter-spacing:.01em}

/* consegne che crescono (fiato, tempo): righe sempre più grandi, l'ultima esce dalla colonna */
.grow{font-family:"Adventor","Century Gothic",sans-serif;line-height:1.04;margin:2vh 0 1vh}
.grow span{display:block;white-space:nowrap}
.grow .g1{font-size:clamp(16px,1.6vw,24px);color:var(--servizio)}
.grow .g2{font-size:clamp(22px,2.6vw,40px)}
.grow .g3{font-size:clamp(30px,4vw,62px);font-weight:700;color:var(--rosso)}

/* fuoco visibile da tastiera (accessibilità: confine fisso, non stile) */
:focus-visible{outline:3px solid var(--rosso);outline-offset:2px}