/* Il lavoro: elementi e griglia (passo 3, 2026-09-25). Solo i gettoni di app.css. Densa e allineata:
   una riga per elemento, colonne fisse, filetti sottili. Lo stato e' la forma dei segni di «Oggi»
   (.og-st, oggi.css); il fucsia (allerta) segna soltanto i blocchi. La griglia scorre dentro il suo
   riquadro, con la colonna dei codici ferma: la pagina non scorre mai di lato. */

.el {display:flex; flex-direction:column; gap:10px; min-width:0;}
.el-muto {margin:0; font-size:var(--t-12); color:var(--ink-3);}
.el-vuoto {margin:6px 0; padding:14px 12px; font-size:var(--t-13); color:var(--ink-2); border:1px dashed var(--linea);
  border-radius:var(--r-segno);}
.el-allerta {color:var(--allerta); font-weight:600;}

/* La barra: tipo di elemento, filtri, azioni di chi cura. */
.el-barra {display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
.el-seg {display:inline-flex; border:1px solid var(--linea); border-radius:var(--r-ctl); overflow:hidden; max-width:100%;
  overflow-x:auto;}
.el-seg button {display:inline-flex; align-items:baseline; gap:6px; padding:5px 10px; border:0; border-right:1px solid var(--linea-2);
  background:none; font:inherit; font-size:var(--t-13); color:var(--ink-2); cursor:pointer; white-space:nowrap;}
.el-seg button:last-child {border-right:0;}
.el-seg button[aria-pressed=true] {background:var(--piano-2); color:var(--ink); font-weight:600;}
.el-n {font:600 var(--t-11) var(--cifre); color:var(--ink-3);}
.el-filtro {display:inline-flex; align-items:center; gap:6px; font-size:var(--t-12); color:var(--ink-2);}
.el-filtro .input {width:auto; min-height:30px; padding:3px 8px; font-size:var(--t-13);}
.el-azioni {display:flex; flex-wrap:wrap; gap:6px; margin-left:auto;}
.el-quieto {color:var(--ink-2);}
.el-seg button:focus-visible, .el-apri:focus-visible, .el-codice:focus-visible, .el-cella:focus-visible,
.el-piu:focus-visible, .el-mini:focus-visible, .el-scorre:focus-visible {outline:2px solid var(--accento); outline-offset:1px;}

/* La griglia nel suo riquadro. */
.el-scorre {max-width:100%; overflow-x:auto; overflow-y:visible; border:1px solid var(--linea-2); border-radius:var(--r-piano);
  background:var(--piano);}
.el-griglia {--el-cosa:minmax(140px, 220px); border-collapse:separate; border-spacing:0; width:100%; min-width:max-content;
  font-size:var(--t-13);}
.el-griglia th, .el-griglia td {padding:0; border-bottom:1px solid var(--linea-2); text-align:left; vertical-align:middle;}
.el-griglia thead th {position:sticky; top:0; z-index:2; padding:7px 10px; background:var(--piano); font-size:var(--t-12);
  font-weight:600; color:var(--ink-2); white-space:nowrap; border-bottom:1px solid var(--linea);}
.el-griglia td {width:132px; min-width:132px; max-width:132px;}
.el-di {margin-left:6px; font:600 var(--t-11) var(--cifre); color:var(--ink-3);}

/* La prima colonna resta ferma quando la griglia scorre. */
.el-cosa {position:sticky; left:0; z-index:1; background:var(--piano); border-right:1px solid var(--linea-2);
  width:200px; min-width:150px; max-width:240px;}
.el-griglia thead .el-cosa {z-index:3;}
.el-in {display:flex; align-items:baseline; gap:8px; padding:4px 10px; white-space:nowrap; overflow:hidden;}
.el-codice {padding:0; border:0; background:none; font:600 var(--t-13) var(--cifre); color:var(--ink); cursor:pointer;}
.el-codice:hover {text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--bordo-ctl);}
.el-dur {min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:var(--t-12); color:var(--ink-3);}
.el-era {font-size:var(--t-11); color:var(--ink-3); font-style:italic;}

/* La riga della scena: il nome a sinistra, una bobina per colonna. */
.el-gruppo > * {background:var(--piano-2);}
.el-testa .el-in {align-items:center; padding:3px 6px 3px 4px;}
.el-apri {display:inline-flex; align-items:baseline; gap:7px; min-width:0; padding:4px 4px; border:0; background:none;
  font:inherit; color:var(--ink); cursor:pointer; text-align:left;}
.el-apri b {font:600 var(--t-13) var(--cifre);}
.el-freccia {width:10px; color:var(--ink-3);}
.el-num {font:var(--t-11) var(--cifre); color:var(--ink-3); min-width:22px;}
.el-nome {min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:var(--t-12); color:var(--ink-2);}
.el-conto {margin-left:auto; font:var(--t-12) var(--cifre); color:var(--ink-2); flex-shrink:0;}
.el-apri {flex-shrink:1; overflow:hidden;}
.el-piu {padding:0 6px; border:0; background:none; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer;}
.el-piu:hover {color:var(--ink);}
.el-c-bobina {padding:0 10px !important;}
.el-c-bobina {white-space:nowrap;}
.el-bobina {display:inline-flex; gap:1px; width:calc(100% - 16px); height:8px; vertical-align:middle;}
.el-bobina.is-vuota {border-bottom:1px dotted var(--linea);}
.el-pz {flex-basis:0; min-width:2px; box-sizing:border-box; border:1px solid var(--ink-3); border-radius:1px;}
.el-pz-backlog {border-style:dotted;}
.el-pz-ready {background:transparent;}
.el-pz-active {border-color:var(--ink); background:linear-gradient(90deg, var(--ink) 50%, transparent 50%);}
.el-pz-review {border-color:var(--ink); background:repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px);}
.el-pz-done {border-color:var(--ink-2); background:var(--ink-2);}
.el-pz-senza {border-color:transparent; border-bottom:1px solid var(--linea-2); border-radius:0;}
.el-blocchi {display:inline-block; width:12px; margin-left:4px; font:700 var(--t-11) var(--cifre); color:var(--allerta);
  vertical-align:middle;}
.el-blocchi::before {content:"/"; margin-right:1px;}

/* Le caselle: il segno, e il testo solo per le eccezioni. */
.el-c.is-senza {text-align:center;}
.el-nessuna {display:inline-block; width:10px; border-bottom:1px solid var(--linea-2); vertical-align:middle;}
.el-cella {display:flex; align-items:center; gap:6px; width:100%; min-height:28px; padding:3px 10px; border:0;
  background:none; font:inherit; color:var(--ink); text-align:left; cursor:pointer;}
.el-cella:hover {background:var(--bg-hover);}
.el-ecc {min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--t-12); color:var(--ink);}
.el-cella.is-bloccata .el-ecc {color:var(--allerta); font-weight:600;}
.el-chi {margin-left:auto; font:600 var(--t-11) var(--cifre); color:var(--ink-2);}
.el-c.is-spento .el-cella {opacity:.28;}
.is-tagliata .el-codice, .is-tagliata .el-apri b {text-decoration:line-through; color:var(--ink-3);}

.el-altre {align-self:flex-start;}
.el-legenda {display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin:0; font-size:var(--t-12); color:var(--ink-2);}
.el-legenda span {display:inline-flex; align-items:center; gap:6px;}

/* La scheda elemento: pannello laterale (D25). Sul telefono prende lo schermo. */
.el-scheda {position:fixed; top:0; right:0; bottom:0; z-index:900; width:min(400px, 100vw); box-sizing:border-box;
  overflow-y:auto; padding:14px 16px 20px; background:var(--piano); border-left:1px solid var(--linea);
  display:flex; flex-direction:column; gap:8px;}
.el-s-testa {display:flex; align-items:center; justify-content:space-between; gap:8px;}
.el-s-testa h2 {margin:0; font:600 var(--t-18) var(--cifre); color:var(--ink);}
.el-s-nome {margin:0; font-size:var(--t-15); color:var(--ink);}
.el-s-fatti, .el-s-era {margin:0; font-size:var(--t-12); color:var(--ink-2);}
.el-s-era {font-style:italic;}
.el-s-azioni {display:flex; flex-wrap:wrap; gap:6px;}
.el-scheda h3 {margin:8px 0 0; font-size:var(--t-13); font-weight:600; color:var(--ink-2);}
.el-s-task {border-top:1px solid var(--linea-2); padding-top:6px;}
.el-s-riga {display:grid; grid-template-columns:11px auto minmax(0,1fr) auto; gap:4px 8px; align-items:center; font-size:var(--t-13);}
.el-s-riga .btn {grid-column:4; grid-row:1;}
.el-s-passo {font-size:var(--t-12); color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.el-s-chi {grid-column:2 / 4; font-size:var(--t-12); color:var(--ink-3);}
.el-spunte {list-style:none; margin:6px 0 0 19px; padding:0; display:flex; flex-direction:column; gap:2px;}
.el-spunte li {display:flex; align-items:center; gap:6px; min-height:26px; font-size:var(--t-13);}
.el-spunte label {display:flex; align-items:center; gap:8px; flex:1; min-width:0; cursor:pointer;}
.el-spunte input {accent-color:var(--accento); margin:0;}
.el-spunte input:checked + span {color:var(--ink-3); text-decoration:line-through;}
.el-mini {padding:0 4px; border:0; background:none; color:var(--ink-3); cursor:pointer;}
.el-mini:hover {color:var(--ink);}
.el-s-nuova {display:flex; gap:6px; margin:4px 0 0 19px;}
.el-s-nuova .input {flex:1; min-width:0; min-height:30px; padding:3px 8px; font-size:var(--t-13);}
.el-s-piede {margin-top:auto; padding-top:10px;}

/* I dialoghi: menu, schema, import. */
.el-menu {display:flex; flex-direction:column; gap:6px;}
.el-menu .wo-note {margin:-2px 0 4px;}
.el-tipi, .el-tagli {display:flex; flex-wrap:wrap; gap:4px 14px; border:0; padding:0; margin:4px 0;}
.el-tipi legend, .el-tagli legend {font-size:var(--t-12); color:var(--ink-2); margin-bottom:4px;}
.el-tagli label, .el-tipi label {display:inline-flex; align-items:center; gap:6px; font:var(--t-13) var(--cifre);}
.el-diffs {display:flex; flex-direction:column; gap:6px;}
.el-diff summary {cursor:pointer; font-size:var(--t-13); color:var(--ink);}
.el-diff p {margin:4px 0 0; font:var(--t-12) var(--cifre); color:var(--ink-2); overflow-wrap:anywhere; max-height:120px; overflow-y:auto;}
.el-avviso strong {color:var(--allerta);}

@media (max-width: 640px) {
  .el-azioni {margin-left:0;}
  .el-cosa {width:120px; min-width:112px; max-width:140px;}
  .el-riga .el-dur, .el-riga .el-era, .el-gruppo .el-nome, .el-gruppo .el-num, .el-gruppo .el-conto {display:none;}
  .el-griglia td {width:112px; min-width:112px; max-width:112px;}
}
@media (prefers-reduced-motion: reduce) {
  .el-cella {transition:none;}
}