/* «Oggi» (passo 1, 2026-09-24): la prima pagina di chi lavora. Solo i gettoni di app.css.
   Lo stato e' una FORMA, non un colore: vuoto = pronta, mezzo pieno = in corso, punto = da
   rivedere, pieno = fatta, tratteggiato = da definire; la barra fucsia (allerta) = bloccata. */

.og-pagina {max-width:1240px; margin:0 auto; color:var(--ink);}
.og-testa {display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap;}
.og-testa h1 {margin:0; font-size:var(--t-26); font-weight:600; letter-spacing:-.3px;}
.og-muto {color:var(--ink-2); font-size:var(--t-13); font-weight:400;}
.og-spiega {margin:6px 0 var(--s4); max-width:820px; font-size:var(--t-13); color:var(--ink-2); line-height:1.5;}
.og-avviso {margin:0 0 var(--s3); padding:8px 12px; border-left:3px solid var(--marchio); background:var(--piano);
  font-size:var(--t-13); color:var(--ink-2); border-radius:0 var(--r-segno) var(--r-segno) 0;}
.og-vuota {padding:var(--s6) var(--s4); text-align:center;}

.og-gruppo {margin-top:var(--s4);}
.og-gruppo h2 {display:flex; gap:var(--s2); align-items:baseline; margin:0 0 var(--s2); font-size:var(--t-15); font-weight:600;}
.og-gruppo > .og-muto {margin:0;}
.og-riquadro {background:var(--piano); border:1px solid var(--linea-2); border-radius:var(--r-piano);}

/* Colonne fisse: passo, numeri e azioni restano in colonna da un gruppo all'altro. */
.og-riga {display:grid; grid-template-columns:64px minmax(0,1fr) 132px 92px 176px; gap:var(--s3); align-items:center;
  padding:10px 14px; border-top:1px solid var(--linea-2);}
.og-riga:first-child {border-top:0;}
.og-fotogramma {width:64px; height:36px; border-radius:var(--r-segno); background:var(--piano-2); display:flex;
  align-items:center; justify-content:center; font:600 var(--t-12) var(--cifre); color:var(--ink-2); overflow:hidden;}
.og-cosa {min-width:0;}
.og-titolo {display:block; max-width:100%; padding:0; border:0; background:none; font:inherit; font-size:var(--t-15);
  font-weight:600; color:var(--ink); text-align:left; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.og-titolo:hover {text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--bordo-ctl);}
.og-titolo:focus-visible {outline:2px solid var(--accento); outline-offset:2px;}
.og-cosa > small {display:block; font-size:var(--t-12); color:var(--ink-2); line-height:1.4;}
.og-allerta {color:var(--allerta); font-weight:600;}
.og-nota {margin-top:6px; padding:6px 10px; border-left:2px solid var(--ink-3); background:var(--piano-2);
  font-size:var(--t-13); line-height:1.45; border-radius:0 var(--r-segno) var(--r-segno) 0; overflow-wrap:anywhere;}
.og-nota b {margin-right:4px;}
.og-versione {margin-top:6px; font-size:var(--t-13); color:var(--ink-2); overflow-wrap:anywhere;}
.og-versione small {margin-left:6px; font-size:var(--t-12); color:var(--ink-3);}
.og-ref {font-family:var(--cifre); font-size:var(--t-12); color:var(--ink); user-select:all;}
a.og-ref {text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--bordo-ctl);}
.og-passo {display:inline-flex; gap:7px; align-items:center; min-width:0; font-size:var(--t-12); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.og-num {font-size:var(--t-12); color:var(--ink-3); white-space:nowrap;}
.og-az {display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap;}

.og-st {width:11px; height:11px; box-sizing:border-box; border-radius:var(--r-segno); border:1.5px solid var(--ink-3); flex-shrink:0;}
.og-st-backlog {border-style:dotted;}
.og-st-active {border-color:var(--ink); background:linear-gradient(90deg, var(--ink) 50%, transparent 50%);}
.og-st-review {border-color:var(--ink); background:radial-gradient(circle, var(--ink) 0 2px, transparent 2.5px);}
.og-st-done {border-color:var(--ink-2); background:var(--ink-2);}
.og-st-bloccata {border-color:var(--allerta);
  background:linear-gradient(135deg, transparent 42%, var(--allerta) 42% 58%, transparent 58%);}

.og-form {display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px;}
.og-form .input {width:auto; min-height:32px; padding:5px 8px; font-size:var(--t-13);}
.og-form .og-largo {flex:1 1 220px; min-width:160px;}
.og-form textarea.og-largo {resize:vertical;}
.og-a-chi {font-size:var(--t-12); color:var(--ink-2);}
.og-nascosta {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

@media (max-width:820px) {
  .og-riga {grid-template-columns:52px minmax(0,1fr);}
  .og-passo, .og-num, .og-az {grid-column:2;}
  .og-az {justify-content:flex-start;}
  .og-fotogramma {width:52px;}
}