/* Demo di Flow Kanban: si appoggia a demo.css (lettore, didascalie, barra) e aggiunge i pannelli della linea */
body.flowlab #brand .logo .boat { font-size: 1.5rem; filter: drop-shadow(0 1px 4px var(--sc-tav-nero-a40)); }
.bigboat { font-size: 4.2rem; line-height: 1; margin: .4rem auto .8rem; }
#loader .bigboat { margin: 0 auto; }

/* la testata dell'operatore, come in flowkanban.html: livello e round, timer, chi sono */
.fhead { position: absolute; left: 50%; top: 3.6rem; translate: -50% 0; display: flex; align-items: center; gap: 1rem; padding: .5rem 1.1rem; border-radius: 99px; white-space: nowrap;
  background: var(--sc-demo-vetro); border: 1px solid var(--sc-demo-bordo); box-shadow: 0 10px 30px var(--sc-tav-nero-a35); animation: pnlIn .5s both; font-size: 1rem; }
.flogo b { font-size: 1.05rem; }
.flev { font-weight: 850; font-size: 1.15rem; letter-spacing: .02em; }
.ftim { font-variant-numeric: tabular-nums; font-weight: 850; font-size: 1.5rem; color: var(--sc-azione); }
.fme { display: flex; align-items: center; gap: .45rem; }
.fme em { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: .8rem; color: var(--sc-tav-nero); background: var(--c); }
.fme small { color: var(--sc-testo-secondario); }

/* la striscia della linea: le 5 fasi con le barchette */
.fstrip { position: absolute; left: 50%; top: 7.4rem; translate: -50% 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; width: min(64rem, 94vw); }
.fstrip.top { top: 3.8rem; }
.fstrip.gone { opacity: 0; transition: opacity .5s; }
.fcell { background: var(--sc-demo-vetro); border: 1px solid var(--sc-demo-bordo); border-radius: .7rem; padding: .5rem .7rem; box-shadow: inset 0 .25rem 0 var(--c), 0 10px 30px var(--sc-tav-nero-a30); display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.fcell b { font-size: 1rem; } .fcell small { color: var(--sc-testo-secondario); font-size: .82rem; }
.fcell span { font-size: 1.15rem; min-height: 1.5rem; }
.fcell.full { border-color: var(--sc-azione-a80); } .fcell.full small { color: var(--sc-azione); font-weight: 800; }
.fcell.broken { background: var(--sc-tav-rosso-a85); }

/* il comando dell'operatore com'è sul banco: l'icona (⏭, ⏸, 🔧, ✓ in SVG, js/flowlab-dock.js) e accanto il riquadro col testo */
.fbar { position: absolute; left: 50%; bottom: 11.4rem; translate: -50% 0; z-index: 4; }
.fpass { display: inline-flex; align-items: center; gap: .7rem; white-space: nowrap; }
.fpass .fico { display: grid; place-items: center; width: 4.2rem; height: 3rem; border-radius: .6rem; background: var(--sc-azione); color: var(--sc-su-azione); box-shadow: 0 10px 30px var(--sc-tav-nero-a40); }
.fpass .fico svg { width: 1.9rem; height: 1.9rem; }
.fpass .ftip { padding: .55rem .9rem; border-radius: .6rem; font-size: 1.15rem; font-weight: 800; background: var(--sc-demo-vetro); border: 1px solid var(--sc-demo-bordo); box-shadow: 0 10px 30px var(--sc-tav-nero-a40); }
.fpass.off .fico { background: var(--sc-tav-blu); color: var(--sc-tav-grigio-chiaro-3); }
.fpass.off .ftip { border-color: var(--sc-azione-a80); }
.fslot { position: relative; display: inline-block; }
.ftap { position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem; border-radius: 50%; background: var(--sc-su-colore-a55); animation: tap .5s ease-out both; }
@keyframes tap { from { transform: scale(.3); opacity: 1; } to { transform: scale(2); opacity: 0; } }

/* gli avvisi della linea (ordine urgente, regole, imprevisti) */
.fban { position: absolute; left: 50%; top: 13rem; translate: -50% 0; max-width: min(60rem, 92vw); padding: .7rem 1.1rem; border-radius: .7rem; font-size: 1.1rem; line-height: 1.35;
  background: var(--sc-tav-grigio-scuro-a92); border: 1px solid var(--sc-demo-bordo); box-shadow: 0 10px 30px var(--sc-tav-nero-a35); }
.fban.red { background: var(--sc-tav-rosso-a92); border-color: var(--sc-tav-rosso-chiaro); }
.fban.warn { background: var(--sc-tav-arancio-scuro-a92); border-color: var(--sc-azione); }

/* capitolo 1: i cinque livelli e le due varianti */
.fmodels { position: absolute; left: 50%; top: 3.8rem; translate: -50% 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; width: min(80rem, 96vw); }
.fmodel { background: var(--sc-demo-vetro); border: 1px solid var(--sc-demo-bordo); border-radius: .8rem; padding: .6rem .9rem; box-shadow: 0 10px 30px var(--sc-tav-nero-a30); }
.fmodel b { font-size: 1.2rem; display: block; } .fmodel span { color: var(--sc-azione); font-weight: 800; } .fmodel small { display: block; color: var(--sc-tav-blu-chiaro-2); font-size: .88rem; }
.fvar { grid-column: 1 / -1; display: flex; gap: 1.2rem; justify-content: center; font-size: .95rem; background: var(--sc-demo-vetro); border-radius: 99px; padding: .4rem 1rem; border: 1px solid var(--sc-demo-bordo); justify-self: center; }
.fvar i { display: inline-block; width: .9rem; height: .9rem; border-radius: .2rem; background: var(--c); margin-right: .4rem; vertical-align: -.1rem; border: 1px solid var(--sc-su-colore-a50); }

/* capitolo 2: la distinta base a destra del banco */
.fbom { position: absolute; right: 1.6rem; top: 7.6rem; width: min(25rem, 38vw); padding: .9rem 1rem; max-height: calc(100vh - 7.6rem - var(--safe)); overflow: hidden; }
.fstep { display: grid; grid-template-columns: 4.2rem 1fr 1.2rem; gap: .6rem; align-items: center; padding: .4rem; border-radius: .6rem; margin-bottom: .35rem; opacity: .6; transition: opacity .3s, background .3s; }
.fstep img, .fstep .noimg { width: 4.2rem; height: 4.2rem; border-radius: .5rem; background: var(--sc-tav-grigio-chiaro-4); object-fit: cover; display: grid; place-items: center; }
.fstep b { display: block; font-size: 1rem; } .fstep small { display: block; color: var(--sc-testo-secondario); font-size: .8rem; }
.fstep em { font-style: normal; color: var(--sc-tav-verde); font-weight: 900; opacity: 0; }
.fstep.on { opacity: 1; background: var(--sc-tav-viola-a22); box-shadow: inset 3px 0 0 var(--sc-tav-viola); }
.fstep.done { opacity: .9; } .fstep.done em { opacity: 1; }
.fmuted { margin: .4rem 0 0; color: var(--sc-testo-secondario); font-size: .85rem; }

/* capitolo 7: l'operatore malato, il Trainer riassegna la fase (come «Assegna» nella linea vera) */
.fassign { position: absolute; left: 1.6rem; top: 17.4rem; width: min(23rem, 36vw); padding: .9rem 1rem; }
.facol { display: grid; gap: .35rem; padding-left: .7rem; box-shadow: inset 3px 0 0 var(--c); }
.facol b { font-size: 1.05rem; }
.fawho { color: var(--sc-testo-secondario); font-weight: 650; }
.fawho.on { color: var(--sc-ok); }
.fadet { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .45rem; border-radius: .5rem; background: var(--sc-su-colore-a5); }
.fasum { color: var(--sc-info); font-weight: 750; margin-right: .2rem; }
.fabox { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: .4rem; background: var(--sc-su-colore-a8); transition: color .3s; }
.fabox i { width: .9rem; height: .9rem; border: 2px solid var(--sc-tav-blu-chiaro-2); border-radius: .2rem; transition: background .3s, border-color .3s; }
.fabox.on { color: var(--sc-azione); font-weight: 750; }
.fabox.on i { background: var(--sc-azione); border-color: var(--sc-azione); }
.fasave { font-style: normal; padding: .25rem .75rem; border-radius: .4rem; background: var(--sc-azione); color: var(--sc-su-azione); font-weight: 800; transition: transform .15s, box-shadow .15s; }
.fasave.press { transform: scale(.93); box-shadow: 0 0 0 .4rem var(--sc-azione-a30); }

/* capitolo 8: il controllo qualità */
.fvaro { min-width: 0; }
.fq { padding: .5rem .6rem; border-radius: .5rem; margin-bottom: .4rem; background: var(--sc-su-colore-a5); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem .6rem; }
.fq.ko { background: var(--sc-tav-rosso-a20); box-shadow: inset 3px 0 0 var(--sc-tav-rosso); } .fq.ok { box-shadow: inset 3px 0 0 var(--sc-board-verde-scuro); }
.fq small { flex-basis: 100%; color: var(--sc-tav-rosso-chiaro-2); font-size: .85rem; }
.fqn { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .7rem; text-align: center; }
.fqn div { background: var(--sc-campo); border-radius: .5rem; padding: .4rem; }
.fqn b { display: block; font-size: 1.8rem; } .fqn small { color: var(--sc-testo-secondario); }
.fqn .ok b { color: var(--sc-tav-verde); } .fqn .ko b { color: var(--sc-danger); }
.fqp div { display: grid; grid-template-columns: 4rem 1fr 1.4rem; align-items: center; gap: .5rem; padding: .2rem 0; font-size: .95rem; }
.fqp i { height: .7rem; border-radius: 99px; background: var(--c); min-width: 2px; }
.fqp b { text-align: right; }

/* capitolo 9: il pannello del Trainer */
.ftr { position: absolute; left: 50%; top: 3.8rem; translate: -50% 0; width: min(66rem, 94vw); background: var(--sc-tav-grigio-scuro); border: 1px solid var(--sc-demo-bordo); max-height: calc(100vh - 3.8rem - var(--safe)); overflow: hidden; }
.ftrh { display: flex; align-items: center; gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--sc-demo-bordo); }
.ftrh b { font-size: 1.2rem; }
.ftab { padding: .35rem .8rem; border-radius: .5rem; color: var(--sc-testo-secondario); font-weight: 700; }
.ftab.on { background: var(--sc-azione-a18); color: var(--sc-azione); }
.fpane { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; }
.fpane[hidden] { display: none; }
.fcol h3 { margin: 0 0 .5rem; font-size: 1.05rem; } .fcol h3 small { color: var(--sc-testo-secondario); font-weight: 500; }
.fbtns, .fmod { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: .7rem; }
.fbtns i, .fmod i, .fimp i, .flim i { font-style: normal; padding: .4rem .75rem; border-radius: .5rem; background: var(--sc-su-colore-a10); font-weight: 700; font-size: .92rem; transition: background .3s, transform .15s; }
.fbtns i.prim { background: var(--sc-azione); color: var(--sc-su-azione); }
.fmod i.on, .flim i.on { background: var(--sc-azione); color: var(--sc-su-azione); }
.fmod .fgo { background: var(--sc-ok); color: var(--sc-su-colore); }
.fgo.press, .fimp i.press { transform: scale(.93); box-shadow: 0 0 0 .4rem var(--sc-ok-a30); }
.fimp { display: flex; justify-content: space-between; align-items: center; padding: .4rem .2rem; border-bottom: 1px solid var(--sc-demo-bordo); font-size: .98rem; }
.fimp i { background: var(--sc-tav-rosso-a35); }
.flim { display: grid; grid-template-columns: 7.5rem repeat(4, 2.4rem); gap: .35rem; align-items: center; padding: .25rem 0; box-shadow: inset 3px 0 0 var(--c); padding-left: .6rem; }
.flim i { text-align: center; padding: .3rem 0; }
.frule { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--sc-demo-bordo); font-size: .95rem; }
.frule b { color: var(--sc-tav-blu-chiaro-2); font-weight: 650; } .frule .sw { color: var(--sc-tav-verde); }

@media (max-width: 900px) {
  .fstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); font-size: .8rem; }
  .fbom { width: min(92vw, 22rem); }
  .fpane { grid-template-columns: 1fr; }
}