/* home-v5 · variante B «Lavagna in classe» · striscia come scena (M2). Tutto piatto: una sola ombra, nessun gradiente, nessun filtro. */
@font-face{font-family:"Patrick Hand";font-style:normal;font-weight:400;font-display:swap;
  src:url("font/patrick-hand-latin-400-normal.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;}

.striscia-b{
  --ardesia:#2F3538; --gesso:#F2EFE6; --gesso-giallo:#F2DC7A;
  --legno:#7A4E2D; --legno-chiaro:#9C6A3F; --legno-scuro:#4E301A;
  --cornice:10px;
  background:var(--cm-glicine);
  overflow:visible; /* l'unica ombra dell'ardesia non va tagliata a filo della striscia */
  hyphens:none;-webkit-hyphens:none;
}
.striscia-b .striscia-in{height:100%;display:flex;flex-direction:column;gap:6px;padding-top:10px;padding-bottom:6px;}
.striscia-b .anteprima{flex:none;padding-left:2px;}

/* l'ardesia: rettangolo piatto, cornice di legno piatto, una sola ombra */
.striscia-b .ardesia{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--ardesia);color:var(--gesso);
  border:var(--cornice) solid var(--legno);border-radius:12px;
  box-shadow:0 10px 30px rgba(35,26,53,.25);}

/* la frase di gesso: unico testo in Patrick Hand della pagina; sottolineatura a mano con border-bottom */
.striscia-b .gesso-titolo{flex:none;align-self:center;margin:8px 0 8px;padding:0 6px 1px;
  font-family:"Patrick Hand","Comic Sans MS","Segoe Print",cursive;font-weight:400;
  font-size:1.75rem;line-height:1.1;letter-spacing:0;color:var(--gesso);text-align:center;
  border-bottom:3px solid var(--gesso);border-radius:0 0 40% 40% / 0 0 5px 5px;}

/* la fascia: sotto i 1024 px solo il fonometro, a tutta larghezza */
.striscia-b .fascia{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;
  padding:0 12px 14px;}
.striscia-b .scheda-b{position:relative;min-width:0;min-height:0;overflow:hidden;box-sizing:border-box;
  background:var(--cm-scheda);border-radius:var(--cm-raggio-g);padding:10px 14px;
  container-type:inline-size;display:flex;color:var(--cm-inchiostro);}
.striscia-b .scheda-ora,.striscia-b .scheda-timer{display:none;}

/* fonometro: colonna viola, linea inchiostro, parola LAVORO, barra LAVORO/RESET senza X */
.striscia-b .scheda-fono{flex-direction:row;align-items:center;justify-content:center;gap:16px;}
.striscia-b .fono-colonna{flex:0 1 auto;height:100%;width:auto;max-width:34%;display:block;}
.striscia-b .fono-colonna .f-fondo{fill:var(--cm-glicine);}
.striscia-b .fono-colonna .f-livello{fill:var(--cm-viola);}
.striscia-b .fono-colonna .f-tacca{stroke:var(--cm-muto);stroke-width:1.6;stroke-linecap:round;}
.striscia-b .fono-colonna .f-linea{stroke:var(--cm-inchiostro);stroke-width:3;stroke-linecap:round;}
.striscia-b .fono-testo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px;}
.striscia-b .fono-parola{margin:0;font-family:var(--cm-font-titoli);font-weight:700;text-transform:uppercase;
  font-size:1.75rem;line-height:1;letter-spacing:.01em;color:var(--cm-inchiostro);}
.striscia-b .fono-barra{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.8125rem;letter-spacing:.05em;
  color:var(--cm-inchiostro);}
.striscia-b .fono-binario{flex:1 1 auto;min-width:24px;height:16px;border-radius:8px;background:var(--cm-glicine);
  border:1px solid var(--cm-linea);}
@supports (font-size:1cqw){
  .striscia-b .fono-parola{font-size:clamp(1.5rem,11cqw,2.75rem);}
}

/* orologio e timer (da 1024 px) */
.striscia-b .scheda-ora{flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;}
.striscia-b .ora{display:block;font-family:var(--cm-font-titoli);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;line-height:1;font-size:3rem;color:var(--cm-inchiostro);}
.striscia-b .ora-etichetta{color:var(--cm-muto);font-size:.9375rem;line-height:1.2;}
@supports (font-size:1cqw){
  .striscia-b .ora{font-size:clamp(2rem,38cqw,6rem);}
}
.striscia-b .scheda-timer{flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;}
.striscia-b .timer-disco{flex:1 1 0;min-height:0;width:100%;display:block;}
.striscia-b .timer-disco .t-disco{fill:var(--cm-viola);}
.striscia-b .timer-disco .t-settore{fill:var(--cm-glicine);}
.striscia-b .timer-parola{flex:none;color:var(--cm-muto);font-size:.9375rem;line-height:1.2;}
.striscia-b .timer-barra{flex:none;align-self:stretch;height:6px;border-radius:3px;background:var(--cm-viola);}

/* la mensola: legno piatto in fondo all'ardesia, due gessetti e un cancellino, semplici forme colorate */
.striscia-b .mensola{flex:none;position:relative;height:10px;background:var(--legno-chiaro);}
.striscia-b .mensola span{position:absolute;bottom:100%;display:block;}
.striscia-b .m-gessetto{left:12%;width:34px;height:6px;border-radius:3px;background:var(--gesso);}
.striscia-b .m-gessetto-giallo{left:calc(12% + 42px);width:28px;background:var(--gesso-giallo);}
.striscia-b .m-cancellino{right:10%;width:46px;height:11px;border-radius:3px 3px 0 0;background:var(--legno-scuro);}

@media (min-width:700px){
  .striscia-b{--cornice:12px;}
  .striscia-b .gesso-titolo{font-size:2rem;}
}

/* da 1024 px: tre colonne, il fonometro largo una volta e mezza le laterali, dentro la cornice dell'ardesia */
@media (min-width:1024px){
  .striscia-b .striscia-in{padding-top:14px;padding-bottom:8px;}
  .striscia-b .gesso-titolo{margin:14px 0 12px;font-size:clamp(2.5rem,1.2rem + 1.4vw,3.25rem);border-bottom-width:4px;}
  .striscia-b .fascia{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:16px;padding:0 20px 22px;}
  .striscia-b .scheda-ora,.striscia-b .scheda-timer{display:flex;}
  .striscia-b .scheda-b{padding:14px 16px;}
  .striscia-b .mensola{height:12px;}
  .striscia-b .m-gessetto{width:44px;height:8px;left:10%;}
  .striscia-b .m-gessetto-giallo{left:calc(10% + 54px);width:36px;}
  .striscia-b .m-cancellino{width:64px;height:14px;}
  .striscia-b .fono-barra{font-size:.9375rem;}
}