/* I fili aperti (lotto 8, parte 1; proposta approvata il 26-09): il riquadro «Lavorazioni» della Dashboard
   e la sezione «Fili aperti» della Regia. Solo i gettoni di app.css, nessun colore nuovo.
   Monocromo + fucsia: il marchio segna oggi e il prossimo cardine; i tipi hanno i colori della Timeline
   (cliente = condivisione, revisione, soldi = pagamento; lavoro e fasi neutri); oltre la soglia si AGGIUNGE
   un anello d'allerta, il colore del tipo non cambia mai. Inter per le parole, B612 solo per le cifre.
   Il riquadro si adatta alla SUA larghezza (M o L, telefono), non a quella della finestra. */

.fl-riquadro {container-type:inline-size; container-name:fili; display:flex; flex-direction:column; min-width:0;
  --fl-colonne:minmax(0,16fr) 184px minmax(0,20fr) 118px;}
.fl-num {font-family:var(--cifre); font-variant-numeric:tabular-nums;}

/* i tipi */
.fl-t-cliente {--fl-tipo:var(--fase-condivisione);}
.fl-t-revisione {--fl-tipo:var(--fase-revisione);}
.fl-t-lavoro {--fl-tipo:var(--ink-2);}
.fl-t-fase {--fl-tipo:var(--ink);}
.fl-t-soldi {--fl-tipo:var(--fase-pagamento);}
.fl-segno {display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--fl-tipo, var(--ink-2)); flex:none;}
.fl-oltre, .fl-anello {outline:1.5px solid var(--allerta); outline-offset:1.5px;}
.fl-anello {background:transparent;}

/* la testa: la scala del filo */
.fl-scala {display:grid; grid-template-columns:var(--fl-colonne); gap:0 14px; padding:0 4px 6px 13px;
  border-bottom:1px solid var(--linea-2); font-size:var(--t-11); color:var(--ink-3);}
.fl-asse-testa {display:flex; justify-content:space-between;}
.fl-asse-testa b {color:var(--marchio); font-weight:600;}
.fl-scala-cardine {text-align:right;}

/* una riga, una lavorazione: tinta del cliente a sinistra, come le altre righe della Dashboard */
.fl-voce {border-bottom:1px solid var(--linea-2);}
.fl-riga {display:grid; grid-template-columns:var(--fl-colonne); gap:0 14px; align-items:center; width:100%; min-width:0;
  box-sizing:border-box; padding:8px 4px 8px 10px; background:none; border:0; border-left:3px solid var(--tinta, transparent);
  color:var(--ink); font:inherit; text-align:left; cursor:pointer;}
.fl-riga:hover, .fl-riga[aria-expanded="true"] {background:var(--piano-2);}
.fl-riga:focus-visible {outline:2px solid var(--accento); outline-offset:-2px;}
.fl-lav {display:grid; gap:1px; min-width:0;}
.fl-lav strong {font-size:var(--t-13); font-weight:600; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fl-lav small {display:flex; gap:8px; align-items:center; min-width:0; font-size:var(--t-12); color:var(--ink-2); white-space:nowrap; overflow:hidden;}
.fl-lav small > * {flex:none;}
/* stretta, cede prima il cliente, poi il nome della fase; le cifre mai */
.fl-lav small > .fl-cliente {flex:0 3 auto; min-width:28px; overflow:hidden; text-overflow:ellipsis;}
.fl-lav small > .fl-fase {display:inline-flex; align-items:center; gap:5px; flex:0 1 auto; min-width:0;}
.fl-fase span {min-width:0; overflow:hidden; text-overflow:ellipsis;}
.fl-fase i {width:8px; height:8px; border-radius:var(--r-segno); background:var(--fl-fase); flex:none;}

/* il filo: da -14 a +14 giorni, oggi al centro */
.fl-colonna-filo {min-width:0;}
.fl-filo {position:relative; display:block; height:26px;}
.fl-asse {position:absolute; left:0; right:0; top:50%; height:1px; background:var(--linea);}
.fl-tratto {position:absolute; top:50%; height:2px; margin-top:-1px; background:var(--ink-3);}
.fl-oggi {position:absolute; left:50%; top:3px; bottom:3px; width:0; border-left:1.5px solid var(--marchio);}
.fl-nodo {position:absolute; top:50%; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--fl-tipo);}
.fl-rombo {position:absolute; top:50%; width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--marchio); transform:rotate(45deg);}
.fl-rombo.fuori {background:transparent; box-shadow:inset 0 0 0 1.5px var(--marchio);}
.fl-lontano {position:absolute; left:11px; top:0; font-size:var(--t-11); line-height:1; font-weight:400; color:var(--ink-3);}

/* il primo filo e il prossimo cardine */
.fl-testo {display:grid; gap:1px; min-width:0;}
.fl-primo {font-size:var(--t-13); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.fl-altri {font-size:var(--t-12); color:var(--ink-2);}
.fl-quiete {font-size:var(--t-13); color:var(--ink-3);}
.fl-cardine {display:grid; gap:1px; justify-items:end; min-width:0; text-align:right;}
/* il nome del cardine cede, la data resta */
.fl-cardine b {display:flex; gap:4px; max-width:100%; font-size:var(--t-12); font-weight:600; white-space:nowrap;}
.fl-cardine b > span:first-child {min-width:0; overflow:hidden; text-overflow:ellipsis;}
.fl-cardine b > span + span {flex:none;}
.fl-cardine small {font-size:var(--t-12); color:var(--ink-2); white-space:nowrap;}
.fl-rischio {color:var(--allerta); font-weight:600;}

/* aperta: tutti i fili, con chi toccano e da quando */
.fl-dettaglio {padding:0 4px 10px 13px; background:var(--piano-2);}
.fl-dettaglio[hidden] {display:none;}
.fl-lista {list-style:none; margin:0; padding:0;}
.fl-lista li {display:grid; grid-template-columns:14px minmax(0,1fr) auto; gap:2px 10px; align-items:baseline; padding:7px 0;
  border-top:1px solid var(--linea-2); font-size:var(--t-13); line-height:1.4;}
.fl-lista li:first-child {border-top:0;}
.fl-frase {min-width:0; overflow-wrap:anywhere;}
.fl-meta {display:flex; gap:14px; justify-content:flex-end; font-size:var(--t-12); color:var(--ink-2); white-space:nowrap;}
.fl-tocca {min-width:120px;}
.fl-da {min-width:120px; text-align:right;}
.fl-apri {display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; padding-top:6px;}
.fl-vuoto, .fl-nota {margin:0; padding:10px 0 4px; font-size:var(--t-13); color:var(--ink-3);}
.fl-legenda {display:flex; flex-wrap:wrap; gap:4px 14px; margin:10px 0 0; font-size:var(--t-12); color:var(--ink-3);}
.fl-legenda span {display:inline-flex; align-items:center; gap:6px;}

/* stretto (riquadro M, telefono): lavorazione e cardine in alto, il filo sotto, poi il primo filo */
@container fili (max-width:719px) {
  .fl-scala {display:none;}
  .fl-riga {grid-template-columns:minmax(0,1fr) auto; row-gap:4px;}
  .fl-riga .fl-colonna-filo {grid-column:1 / -1; order:3;}
  .fl-riga .fl-testo {grid-column:1 / -1; order:4;}
  .fl-riga .fl-cardine {order:2; align-self:start;}
  .fl-lista li {grid-template-columns:14px minmax(0,1fr);}
  .fl-meta {grid-column:2; justify-content:flex-start; gap:12px;}
  .fl-tocca, .fl-da {min-width:0; text-align:left;}
  .fl-apri {justify-content:flex-start;}
}

/* La sezione della Regia: compatta, sotto la riga delle 9 */
.rg-fili {margin-top:12px; padding:8px 12px 4px; background:var(--piano); border:1px solid var(--linea-2); border-radius:var(--r-piano);
  container-type:inline-size; container-name:fili;}
.rg-fili[hidden] {display:none;}
.fl-sezione-testa {display:flex; align-items:baseline; gap:8px; margin:0 0 2px;}
.fl-sezione-testa h3 {margin:0; font-size:var(--t-13); font-weight:600; color:var(--ink);}
.fl-sezione-testa .fl-num {font-size:var(--t-12); color:var(--ink-3);}
.fl-compatta li {padding:5px 0;}
.fl-sezione-vuota {margin:0 0 4px; font-size:var(--t-12); color:var(--ink-3);}