/* La regia (passo 7, 2026-09-24): la riga delle 9, UN Gantt con la colonna delle etichette fissa,
   gli aggiornamenti accanto. Solo i gettoni di app.css. Il fucsia (allerta) segna solo un ritardo
   vero o un blocco; la stima e' inchiostro tratteggiato. Kickoff e Consegna sono parentesi nel
   colore del marchio, il pagamento un rombo (e arriva solo a chi vede i soldi). */

/* ── La riga delle 9 ── */
.tl-topbar-mod .tl-topbar-head {margin-bottom:10px;}
.rg-testa {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px;}
.rg-testa:empty {display:none;}
.rg-riga {margin:0; flex:1 1 420px; min-width:0; font-size:var(--t-18); line-height:1.35; color:var(--ink-2);}
.rg-riga b {font-weight:600; color:var(--ink);}
.rg-allerta {color:var(--allerta); font-weight:600;}
.rg-stimato {color:var(--ink); text-decoration:underline dotted var(--bordo-ctl); text-underline-offset:4px; cursor:help;}
.rg-come {display:inline-flex; align-items:center; gap:2px; font-size:var(--t-12); color:var(--ink-3);}
.rg-come span {margin-right:6px;}
.rg-come button {padding:4px 10px; border:1px solid var(--linea); background:transparent; color:var(--ink-2); font:inherit;
  cursor:pointer;}
.rg-come button:first-of-type {border-radius:var(--r-ctl) 0 0 var(--r-ctl);}
.rg-come button:last-of-type {border-radius:0 var(--r-ctl) var(--r-ctl) 0; margin-left:-1px;}
.rg-come button[aria-pressed="true"] {background:var(--accento-tinta); color:var(--ink); border-color:var(--bordo-ctl);}
.rg-come button:focus-visible {outline:2px solid var(--accento); outline-offset:2px;}

/* ── Il corpo: Gantt e aggiornamenti ── */
.rg-corpo {display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,300px); gap:14px; align-items:start; min-width:0;}
.rg-corpo.rg-solo {grid-template-columns:minmax(0,1fr);}
.tl-ws-v3[style*="400px"] .rg-corpo {grid-template-columns:minmax(0,1fr);}

/* ── Il Gantt ── */
.tlgrid-wrap.rg-gantt {--rg-col:minmax(230px,300px); overflow-x:auto; overflow-y:hidden; background:var(--piano);
  border:1px solid var(--linea-2); border-radius:var(--r-piano); overscroll-behavior-x:contain;}
.rg-gantt .tlgrid-body {min-width:600px;}
.rg-gantt .tlgrid-row.rg-row {grid-template-columns:var(--rg-col) minmax(0,1fr); border-bottom:1px solid var(--linea-2);}
.rg-gantt .tlgrid-row.rg-row:hover, .rg-gantt .tlgrid-row.rg-row:hover .rg-etichetta {background:var(--piano-2);}
.rg-gantt .rg-etichetta {position:sticky; left:0; z-index:2; align-items:center; gap:8px; padding:6px 10px;
  background:var(--piano); border-right:1px solid var(--linea-2);}
.rg-gantt .tlgrid-row-exp > .rg-etichetta, .rg-gantt .tlgrid-row-sel > .rg-etichetta {background:var(--piano-2);}
.rg-gantt .tlgrid-ms-title {font-size:var(--t-13); line-height:1.3;}
.rg-gantt .tlgrid-ms-date {gap:2px 8px; margin-top:1px;}
.rg-date {font:var(--t-12) var(--cifre); color:var(--ink-3); white-space:nowrap;}
.rg-pct {min-width:34px; text-align:right; font:600 var(--t-13) var(--cifre); color:var(--ink); flex-shrink:0;}
.rg-gantt .tlgrid-row-past .rg-pct {color:var(--ink-3);}
.rg-gantt .tlgrid-chevron {align-self:center; margin:0;}
.rg-gantt .tlgrid-gruppo {position:sticky; left:0; width:max-content; padding:10px 10px 4px;}
.rg-gantt .tlgrid-archive-hdr {position:sticky; left:0; max-width:var(--rg-vista, 100%);}

/* la corsia: tutto e' posizionato sullo stesso asse del righello */
.rg-corsia.tlgrid-right {position:relative; min-height:40px; padding:0;}
.rg-barra {position:absolute; top:50%; height:14px; margin-top:-7px; box-sizing:border-box; border-radius:3px; overflow:hidden;
  background:var(--piano-2); box-shadow:inset 0 0 0 1px var(--linea);}
.rg-barra::before {content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--tipo);}
.rg-barra i {position:absolute; left:0; bottom:0; height:11px; background:repeating-linear-gradient(135deg, var(--ink-3) 0 1px, transparent 1px 4px);}
.rg-barra.rg-corso {box-shadow:inset 0 0 0 1.5px var(--ink);}
.rg-barra.rg-fatta {background:var(--linea); box-shadow:none; opacity:.75;}
.rg-barra.rg-rit {box-shadow:inset 0 0 0 1px var(--allerta);}
.rg-sforo {position:absolute; top:50%; height:5px; margin-top:9px; background:repeating-linear-gradient(135deg, var(--allerta) 0 1.5px, transparent 1.5px 6px);}
.rg-sforo span {position:absolute; left:calc(100% + 5px); top:-4px; white-space:nowrap; font:700 var(--t-11)/1 var(--cifre); color:var(--allerta);}
.rg-stima {position:absolute; top:50%; height:14px; margin-top:-7px; box-sizing:border-box; border:1.5px dashed var(--ink-2); border-radius:3px; cursor:help;}
.rg-stima i {position:absolute; top:-4px; bottom:-4px; width:0; border-left:1.5px solid var(--ink);}
.rg-cardine {position:absolute; top:6px; bottom:6px; width:7px; box-sizing:border-box; border:2.5px solid var(--marchio);}
.rg-cardine.inizio {border-right:0;}
.rg-cardine.fine {border-left:0; transform:translateX(-7px);}
.rg-soldi {position:absolute; top:50%; width:9px; height:9px; margin:-5px 0 0 -5px; background:var(--fase-pagamento); transform:rotate(45deg);}
.rg-soldi.is-fatto {opacity:.45;}
.rg-soldi.is-rit, .rg-cardine.is-rit {outline:2px solid var(--allerta); outline-offset:2px;}
.rg-oggi {position:absolute; top:0; bottom:0; width:0; border-left:1.5px solid var(--marchio); pointer-events:none;}
.rg-senza {position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:var(--t-12); color:var(--ink-3);}

/* il righello */
.rg-righello-riga {display:grid; grid-template-columns:var(--rg-col) minmax(0,1fr); border-bottom:1px solid var(--linea);}
.rg-righello-riga .rg-vuota {position:sticky; left:0; z-index:2; background:var(--piano); border-right:1px solid var(--linea-2);}
.rg-righello {position:relative; height:26px;}
.rg-righello i {position:absolute; bottom:0; width:1px; height:5px; background:var(--linea);}
.rg-righello i span {position:absolute; bottom:7px; left:3px; font:var(--t-11)/1 var(--cifre); color:var(--ink-3); white-space:nowrap;}
.rg-righello i.rg-mese {height:12px; background:var(--ink-3);}
.rg-righello i.rg-mese span {bottom:3px; left:4px; color:var(--ink-2); font-weight:600;}
.rg-oggi-segno {position:absolute; bottom:0; height:100%; border-left:1.5px solid var(--marchio); padding:2px 0 0 4px;
  font:600 var(--t-11)/1 var(--testo); color:var(--marchio); background:linear-gradient(90deg, var(--piano) 0 30px, transparent 30px);}

/* il pannello della fase (passo 2), aperto sotto la sua riga, largo quanto la parte visibile */
.rg-pannello {grid-column:1 / -1; position:sticky; left:0; width:var(--rg-vista, 100%); max-width:100%; box-sizing:border-box;
  padding:0 10px 10px; cursor:default;}
.rg-pannello .tlgrid-expanded.fz {margin-top:0;}

/* ── Gli aggiornamenti ── */
.rg-feed {display:flex; flex-direction:column; min-width:0; background:var(--piano); border:1px solid var(--linea-2);
  border-radius:var(--r-piano); padding:10px 12px;}
.rg-feed[hidden] {display:none;}
.rg-feed-titolo {margin:0 0 4px; font-size:var(--t-13); font-weight:600; color:var(--ink);}
.rg-voci {list-style:none; margin:0; padding:0; max-height:520px; overflow-y:auto;}
.rg-voce {display:grid; grid-template-columns:58px minmax(0,1fr); gap:8px; padding:7px 0; border-top:1px solid var(--linea-2);
  font-size:var(--t-13); line-height:1.4; overflow-wrap:anywhere;}
.rg-voce:first-child {border-top:0;}
.rg-voce time {font:var(--t-11)/1.6 var(--cifre); color:var(--ink-3);}
.rg-voce b {font-weight:600; color:var(--ink);}
.rg-voce-persona .rg-voce-testo {color:var(--ink);}
.rg-voce-fatto .rg-voce-testo {color:var(--ink-2);}
.rg-voce small {display:block; font-size:var(--t-11); color:var(--ink-3);}
.rg-vuoto {margin:6px 0; font-size:var(--t-12); color:var(--ink-3);}
.rg-altri {align-self:flex-start; margin:6px 0 2px;}
.rg-scrivi {display:flex; gap:6px; margin-top:8px; padding-top:10px; border-top:1px solid var(--linea-2);}
.rg-scrivi .input {flex:1; min-width:0; min-height:30px; padding:4px 8px; font-size:var(--t-13);}

@media (max-width:1100px) {
  .rg-corpo {grid-template-columns:minmax(0,1fr);}
}
@media (max-width:650px) {
  .rg-riga {font-size:var(--t-15); flex-basis:100%;}
  .tlgrid-wrap.rg-gantt {--rg-col:170px;}
  /* l'etichetta stretta: segno, nome e date a sinistra; avanzamento e azioni impilati a destra */
  .rg-gantt .rg-etichetta {display:grid; grid-template-columns:3px minmax(0,1fr) auto; grid-template-rows:auto auto;
    align-items:start; column-gap:6px;}
  .rg-gantt .rg-etichetta > .tlgrid-segno {grid-row:1 / 3;}
  .rg-gantt .rg-etichetta > .tlgrid-ms-info {grid-row:1 / 3;}
  .rg-gantt .rg-etichetta > .rg-pct {grid-column:3; grid-row:1; min-width:0;}
  .rg-gantt .rg-etichetta > .tl-phase-menu {grid-column:3; grid-row:2;}
  .rg-gantt .tlgrid-body {min-width:520px;}
  .rg-gantt .tlgrid-row.rg-row, .rg-righello-riga {grid-template-columns:var(--rg-col) minmax(0,1fr);}
  .rg-gantt .tlgrid-right.rg-corsia {padding:0;}
  .rg-gantt .tlgrid-chevron {display:none;}
  .rg-gantt .rg-etichetta {padding:6px 8px;}
}
@media (prefers-reduced-motion:no-preference) {
  .rg-feed .rg-voce:first-child {animation:rgEntra .25s ease-out;}
  @keyframes rgEntra {from {opacity:0;} to {opacity:1;}}
}