/* La lista di spunte (D41, 26-09): il formato riusabile (lista_spunte.js). Solo i gettoni di app.css:
   monocromo + fucsia. La spunta e' il marchio; una voce fatta si barra e si spegne, ma resta leggibile. */

.ls {min-width:0;}
.ls-lista {list-style:none; margin:0; padding:0;}
.ls-voce {display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s2); align-items:center;
  min-height:36px; padding:3px 0; border-top:1px solid var(--linea-2);}
.ls-voce input[type=checkbox] {width:16px; height:16px; margin:0; accent-color:var(--marchio); cursor:pointer;}
.ls-cosa {display:flex; align-items:baseline; gap:var(--s2); min-width:0; padding:4px 0; cursor:pointer;
  font-size:var(--t-13); line-height:1.4; color:var(--ink);}
.ls-testo {flex:1; min-width:0; overflow-wrap:anywhere;}
.ls-quando {flex-shrink:0; font-size:var(--t-12); color:var(--ink-2); white-space:nowrap;}
.ls-cifre {font-family:var(--cifre);}
.ls-fatta .ls-testo {color:var(--ink-3); text-decoration:line-through; text-decoration-color:var(--ink-3);}
.ls-fatta .ls-quando {color:var(--ink-3);}
.ls-via {opacity:.45;}      /* sta andando via: la risposta arriva e la riga sparisce */
.ls-togli {display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0;
  border:0; border-radius:var(--r-ctl); background:none; color:var(--ink-3); cursor:pointer;}
.ls-togli .ms {font-size:16px;}
.ls-togli:hover {color:var(--ink); background:var(--piano-2);}
.ls-voce input[type=checkbox]:focus-visible, .ls-togli:focus-visible {outline:2px solid var(--accento); outline-offset:2px;}
.ls-vuota {margin:0; padding:8px 0 4px; border-top:1px solid var(--linea-2); font-size:var(--t-13); color:var(--ink-2);}

/* Il testo ha la sua riga; sotto, l'ora (facoltativa) e «Aggiungi», uno accanto all'altro. */
.ls-nuova {display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s2);}
.ls-nuova .input {width:auto; min-height:32px; padding:5px 8px; font-size:var(--t-13);}
.ls-nuova [name="testo"] {flex:1 1 100%; min-width:0;}
.ls-nuova .ls-ora {flex:0 0 auto; width:108px; font-family:var(--cifre); color-scheme:dark;}   /* l'orologio si vede */
[data-theme="light"] .ls-nuova .ls-ora {color-scheme:light;}
.ls-nota {margin:6px 0 0; font-size:var(--t-12); color:var(--ink-3);}
.ls-errore {margin:6px 0 0; font-size:var(--t-12); font-weight:600; color:var(--allerta);}
.ls-errore:empty {margin:0;}   /* vuoto non occupa spazio, ma resta nella pagina: gli annunci arrivano */
.ls-nascosta {position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}