/* Il pannello della fase (passo 2, 2026-09-24): la fase si legge dalle sue task. Solo i gettoni di
   app.css. Niente schede dentro schede: un foglio unico, righe fitte, filetti sottili.
   La BOBINA e' l'avanzamento: un pezzo per task, largo quanto il suo impegno previsto; pieno =
   fatta, tratteggio fine = in corso, punteggiato = in review, vuoto = da fare. Il fucsia (allerta) segna solo
   un blocco. Lo stato delle righe usa i segni di «Oggi» (.og-st, oggi.css). */

.tlgrid-expanded.fz {margin-top:6px; padding:10px 12px 8px; background:var(--piano); border:1px solid var(--linea-2);
  border-radius:var(--r-segno); display:flex; flex-direction:column; gap:10px; cursor:default;}

.fz-testa {display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; font-size:var(--t-13); color:var(--ink-2);}
.fz-tipo {display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-weight:600;}
.fz-tipo::before {content:""; width:3px; height:12px; border-radius:1px; background:var(--tipo);}
.fz .is-allerta {color:var(--allerta); font-weight:600;}
.fz-testa .fz-link {margin-left:auto;}

.fz-link {padding:0; border:0; background:none; font:inherit; font-size:var(--t-12); color:var(--ink-2); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--bordo-ctl); white-space:nowrap;}
.fz-link:hover {color:var(--ink);}
.fz-link:focus-visible, .fz-titolo:focus-visible, .fz-icona:focus-visible {outline:2px solid var(--accento); outline-offset:2px;}
.fz-muto {margin:0; font-size:var(--t-12); color:var(--ink-3);}

/* La bobina e i conti. */
.fz-avanz {display:flex; flex-direction:column; gap:5px;}
.fz-bobina {display:flex; gap:2px; height:8px;}
.fz-pz {flex-basis:0; min-width:3px; box-sizing:border-box; border:1px solid var(--ink-3); border-radius:1px; background:transparent;}
.fz-pz-backlog {border-style:dotted;}
.fz-pz-active {border-color:var(--ink); background:repeating-linear-gradient(135deg, var(--ink-3) 0 1px, transparent 1px 4px);}
.fz-pz-review {border-color:var(--ink); background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px);}
.fz-pz-done {border-color:var(--ink-2); background:var(--ink-2);}
.fz-pz.is-bloccata {border-color:var(--allerta); box-shadow:inset 0 -3px 0 var(--allerta);}
.fz-conti {display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; font-size:var(--t-12); color:var(--ink-2);}
.fz-conti b {font:600 var(--t-13) var(--cifre); color:var(--ink);}

/* Le task: una riga ciascuna, colonne fisse perche' l'occhio scenda dritto. */
.fz-task {list-style:none; margin:0; padding:0; border-top:1px solid var(--linea-2);}
.fz-riga {display:grid; grid-template-columns:11px minmax(0,1fr) minmax(0,120px) 26px 48px 52px; gap:10px; align-items:center;
  padding:5px 0; border-bottom:1px solid var(--linea-2); font-size:var(--t-13);}
.fz-titolo {min-width:0; padding:0; border:0; background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fz-titolo:hover {text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--bordo-ctl);}
.fz-passo {min-width:0; font-size:var(--t-12); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fz-chi {font:600 var(--t-11) var(--cifre); color:var(--ink-2); text-align:center; border:1px solid var(--linea); border-radius:var(--r-segno);
  line-height:18px;}
.fz-scade {font:var(--t-12) var(--cifre); color:var(--ink-3); white-space:nowrap;}
.fz-riga > .fz-link {justify-self:end;}
.fz-riga.is-annullata .fz-titolo {color:var(--ink-3); text-decoration:line-through;}
.fz-riga .og-st-cancelled {border-style:dashed; opacity:.6;}

.fz-sposta {grid-column:2 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:4px 0 2px;}
.fz-sposta .input {width:auto; max-width:100%; min-height:30px; padding:4px 8px; font-size:var(--t-13);}
.fz-diff {font-size:var(--t-12); color:var(--ink);}
.fz-errore {flex-basis:100%; font-size:var(--t-12); color:var(--allerta);}

.fz-approva {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px 12px; font-size:var(--t-13); color:var(--ink-2);}
.fz-approva.is-pronta {justify-content:space-between; padding:6px 10px; background:var(--piano-2); border-radius:var(--r-segno);}

/* Da consegnare: piccola, a parte. */
.fz-consegne {display:flex; flex-direction:column; gap:2px;}
.fz-sez {font-size:var(--t-12); font-weight:600; color:var(--ink-2);}
.fz-sez span {font-weight:400; color:var(--ink-3); margin-left:6px;}
.fz-consegna {display:flex; align-items:center; gap:6px; min-height:26px;}
.fz-consegna label {display:flex; align-items:center; gap:8px; flex:1; min-width:0; cursor:pointer;}
.fz-consegna input[type=checkbox] {accent-color:var(--accento); margin:0; flex-shrink:0;}
.fz-consegna .tlgrid-deliv-text {font-size:var(--t-13);}
.fz-icona {padding:0 2px; border:0; background:none; color:var(--ink-3); cursor:pointer; opacity:0;}
.fz-icona .ms {font-size:14px;}
.fz-consegna:hover .fz-icona, .fz-icona:focus-visible {opacity:1;}
.fz-icona:hover {color:var(--ink);}
.fz-aggiungi {width:100%; box-sizing:border-box; margin-top:2px; padding:4px 0; border:0; border-bottom:1px dashed var(--linea);
  background:none; font:inherit; font-size:var(--t-13); color:var(--ink);}
.fz-aggiungi:focus {outline:none; border-bottom-color:var(--accento);}

.fz-note-wrap {position:relative;}
.fz-note {width:100%; box-sizing:border-box; min-height:44px; padding:6px 8px; resize:vertical; border:1px solid var(--linea-2);
  border-radius:var(--r-segno); background:var(--piano-2); font:inherit; font-size:var(--t-13); color:var(--ink);}
.fz-note:focus {outline:none; border-color:var(--accento);}
.fz-salvato {position:absolute; right:8px; bottom:6px; font-size:var(--t-11); color:var(--ink-3); pointer-events:none;}
.fz-note-lettura {margin:0; font-size:var(--t-13); color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere;}
.fz-elimina {align-self:flex-start; color:var(--ink-3);}
.fz-elimina:hover {color:var(--allerta);}

@media (max-width:650px) {
  .fz-riga {grid-template-columns:11px minmax(0,1fr) auto; row-gap:2px;}
  .fz-riga > .og-st {grid-area:1 / 1;}
  .fz-titolo {grid-area:1 / 2;}
  .fz-chi {grid-area:1 / 3;}
  .fz-passo {grid-area:2 / 2;}
  .fz-scade {grid-area:2 / 3; justify-self:end;}
  .fz-riga > .fz-link {grid-area:3 / 2; justify-self:start;}
  .fz-sposta {grid-column:1 / -1;}
  .fz-riga > span:empty:not(.og-st) {display:none;}
  .fz-testa .fz-link {margin-left:0;}
}
@media (prefers-reduced-motion:no-preference) {
  .fz-pz {transition:flex-grow .2s ease;}
}