/* Nota30 — «Il filo», palette «Blu ardesia» (approvata 03/11/2026). Contrasti verificati WCAG 2.1 AA. */
:root {
  --sfondo:#F5F8FC; --foglio:#FFFFFF; --testo:#263548; --grafite:#55657A; --primario:#405F85; --su-primario:#FFFFFF;
  --secondario:#B7D0E5; --pannello:#E5EFF8; --filo:#D7A78B; --filo-testo:#8A5A3C; --linea:#D6E2EE; --bordo-campo:#7A8CA3;
  --attenzione:#8A4B00; --attenzione-fondo:#FFF4E5; --ok:#2F5E46;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) { :root {
  --sfondo:#121A24; --foglio:#1A2532; --testo:#E4ECF5; --grafite:#A9B8CA; --primario:#9DBBDF; --su-primario:#10202F;
  --secondario:#3E5674; --pannello:#1E2E42; --filo:#D7A78B; --filo-testo:#E2BBA3; --linea:#2A3A4E; --bordo-campo:#6F8299;
  --attenzione:#F2B05E; --attenzione-fondo:#2A2216; --ok:#9ED3B6;
} }
* { box-sizing:border-box; }
html { scroll-padding-bottom:150px; scroll-padding-top:16px; }
body { margin:0; background:var(--sfondo); color:var(--testo); font:17px/1.45 var(--sans); -webkit-text-size-adjust:100%; }
main { max-width:640px; margin:0 auto; padding:12px 16px 32px; }
h1 { font-family:var(--serif); font-size:1.75rem; line-height:1.15; font-weight:600; margin:4px 0 4px; letter-spacing:-.01em; }
h1:focus { outline:none; }
h2 { font-size:.95rem; font-weight:650; color:var(--grafite); margin:0 0 10px; }
h3.campo-titolo { font-size:.9rem; font-weight:600; color:var(--grafite); margin:14px 0 4px; }
p.lead { color:var(--grafite); margin:0 0 16px; font-size:.95rem; }
section { background:var(--foglio); border:1px solid var(--linea); border-radius:14px; padding:16px; margin-bottom:16px; }
label { display:block; font-weight:600; margin:0 0 6px; }
label .meta { font-weight:400; }
select, input, textarea { width:100%; font:inherit; color:var(--testo); background:var(--foglio); border:1px solid var(--bordo-campo); border-radius:10px; }
select, input { min-height:52px; padding:0 12px; }
textarea { min-height:6em; padding:12px; resize:vertical; line-height:1.5; }
#testo, .serif, textarea.serif { font-family:var(--serif); font-size:1.05rem; line-height:1.6; }
#testo { min-height:10em; }
button { font:inherit; min-height:52px; width:100%; border:0; border-radius:12px; background:var(--primario); color:var(--su-primario); font-weight:600; padding:0 16px; cursor:pointer; margin-top:10px; }
button.secondary { background:var(--foglio); color:var(--testo); border:1px solid var(--bordo-campo); font-weight:500; min-height:48px; }
button.collegamento { background:transparent; color:var(--primario); text-decoration:underline; text-underline-offset:4px; min-height:44px; font-weight:500; margin-top:2px; }
button.piccolo { width:auto; min-height:44px; margin-top:0; padding:0 14px; flex-shrink:0; }
button:disabled { opacity:.5; cursor:not-allowed; }
:is(button, select, input, textarea, summary, .riga):focus-visible { outline:3px solid var(--primario); outline-offset:2px; }
/* Testata: indietro sopra il titolo, azione eventuale a destra */
.testata { margin:4px 0 12px; }
.testata .riga-titolo { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.testata h1 { overflow-wrap:anywhere; }
button.indietro { width:auto; min-height:44px; margin:0 0 0 -4px; padding:0 6px; background:transparent; color:var(--primario); font-weight:500; }
/* Barra d'azione fissa in basso, a portata di pollice */
.barra-azione { position:sticky; bottom:0; margin:20px -16px 0; padding:10px 16px max(12px, env(safe-area-inset-bottom)); background:color-mix(in srgb, var(--sfondo) 94%, transparent); border-top:1px solid var(--linea); backdrop-filter:blur(6px); z-index:2; }
.barra-azione button:first-child { margin-top:0; }
#nuova { margin:4px 0 20px; }
.stato { color:var(--grafite); min-height:1.45em; margin-top:8px; font-size:.95rem; }
.warn { color:var(--attenzione); }
.ok { color:var(--ok); font-weight:600; }
.out { white-space:pre-wrap; padding:12px; background:var(--sfondo); border-radius:10px; min-height:3em; margin:10px 0 0; font-family:var(--serif); line-height:1.6; }
.meta { color:var(--grafite); font-size:.9rem; font-weight:400; }
.avviso { border-color:var(--secondario); }
.elenco { list-style:none; margin:0; padding:0; }
.riga { display:flex; justify-content:space-between; align-items:center; gap:12px; background:transparent; color:var(--testo); border:0; border-bottom:1px solid var(--linea); border-radius:0; margin:0; padding:10px 4px; min-height:60px; text-align:left; font-weight:600; }
.elenco li:last-child .riga { border-bottom:0; }
.riga span:first-child { font-family:var(--serif); font-size:1.1rem; overflow-wrap:anywhere; }
/* Blocco della protezione: guida, non allarme */
.da-sistemare { background:var(--attenzione-fondo); border:1px solid var(--attenzione); scroll-margin-bottom:150px; }
.da-sistemare h2 { color:var(--attenzione); font-size:1.05rem; }
.da-sistemare:focus { outline:3px solid var(--attenzione); outline-offset:2px; }
.segnalazioni { padding-left:1.1em; margin:8px 0 0; }
.segnalazioni li { margin-bottom:10px; }
.segnalazioni button { width:100%; }
/* «Da riprendere»: il nodo del filo */
.riprendere { background:var(--pannello); border:0; border-left:3px solid var(--filo); }
.riprendere h2, .riprendere label { color:var(--filo-testo); font-size:.95rem; }
.riprendere h2::before, .riprendere label::before { content:""; display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--filo); margin-right:8px; vertical-align:1px; }
.riprendere ul { font-family:var(--serif); font-size:1.08rem; line-height:1.55; margin:6px 0 0; padding-left:1.2em; }
.riprendere textarea { margin-top:4px; }
/* Il filo: cronologia delle sedute */
ol.filo { list-style:none; margin:0; padding:0; }
ol.filo > li { position:relative; padding:0 0 18px 30px; }
ol.filo > li::before { content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; border:2px solid var(--filo); background:var(--sfondo); box-sizing:border-box; }
ol.filo > li:not(:last-child)::after { content:""; position:absolute; left:7px; top:22px; bottom:0; width:2px; background:var(--filo); opacity:.7; }
ol.filo > li.evidenza::before { background:var(--filo); }
.data-seduta { font-size:.9rem; font-weight:600; color:var(--grafite); margin:0 0 6px; }
.nota { margin-bottom:0; }
.nota.evidenza { border-color:var(--filo); border-width:2px; }
.nota .testo { white-space:pre-wrap; margin:0 0 6px; overflow-wrap:anywhere; font-family:var(--serif); line-height:1.6; }
.nota ul { margin:0; padding-left:1.2em; }
details summary { cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; font-weight:500; color:var(--primario); }
details summary::marker { content:""; }
details summary::before { content:"▸"; transition:transform .15s; }
details[open] summary::before { transform:rotate(90deg); }
.versione { text-align:center; margin-top:24px; font-size:.8rem; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; scroll-behavior:auto !important; } }
/* Spaziature (prima attributi style in linea: rimossi per eliminare 'unsafe-inline' dalla CSP). */
.m0 { margin:0; }
.mt4 { margin:4px 0 0; }
.mt10 { margin-top:10px; }
.mt12 { margin-top:12px; }
.mt14 { margin-top:14px; }
.mt16 { margin-top:16px; }
.mt24 { margin-top:24px; }
.aiuto { margin:-2px 0 8px; }
/* Conferme esplicite in «Da controllare» (area toccabile ≥44 px). */
.controlli { list-style:none; padding:0; margin:10px 0 0; }
.conferma { display:flex; gap:12px; align-items:center; min-height:44px; font-weight:500; margin:4px 0; cursor:pointer; }
.conferma input { width:24px; height:24px; flex:none; margin:0; accent-color:var(--primario); }