/* Amministrazione → Connessioni (pezzo 1, direzione A «Cabina buia», owner 3-10). Il buio vuol dire che va: una riga che
   funziona è spenta, in inchiostro tenue ma leggibile; si accende solo ciò che chiede te. Profondità dalla luce: il fondo
   (le righe, senza scatole), il piano (la frase quando chiede te, la riga scelta), il foglio di lato. Stato = forma + parola.
   Raggi per livello: 2 i segni, 7 i comandi, 8 i piani, 12 il foglio. Movimento solo come risposta a un gesto, sotto i
   300 ms, fermo con «riduci movimento». Prefisso `cx-`; i colori dai gettoni del Manager (app.css), più la piccola
   tavolozza del modulo qui sotto, nei due temi (scuro di base, chiaro con [data-theme="light"]). */
.cx {
  --cx-foglio: #2d2d33;           /* il foglio che galleggia: un passo sopra il piano */
  --cx-ink-3-foglio: #a09dab;     /* il tenue dentro il foglio scuro: 5,2:1 */
  --cx-pozzo: #232328;            /* i pozzi dentro il foglio: il comando da copiare */
  --cx-tratteggio: #46444f;       /* i fili dopo il fermo */
  --cx-vetro: rgba(24, 24, 28, .78);
  --cx-luce: inset 0 1px 0 rgba(255, 255, 255, .06);   /* nello scuro: un filo di luce sul bordo alto dei piani accesi */
  --cx-ombra: 0 0 0 0 transparent;                      /* l'unica ombra vive solo nel chiaro */
  --cx-foglio-w: clamp(340px, 34vw, 420px);
  --cx-testa-top: 56px;           /* la barra in alto del Manager */
  /* niente `container` qui: farebbe da blocco contenitore anche al foglio fisso. Le query stanno sulla lista. */
  position: relative;
  color: var(--ink);
  font: 400 13px/1.5 var(--testo);
}
[data-theme="light"] .cx {
  --cx-foglio: #ffffff;
  --cx-ink-3-foglio: #6d6a78;
  --cx-pozzo: #eeedf2;
  --cx-tratteggio: #c9c8d2;
  --cx-vetro: rgba(244, 244, 246, .8);
  --cx-luce: inset 0 0 0 0 transparent;
  --cx-ombra: 0 16px 40px rgba(24, 24, 28, .12);
  --cx-foglio-w: clamp(340px, 34vw, 420px);
  --cx-testa-top: 56px;
}
.cx h1, .cx h2, .cx h3, .cx p, .cx ol, .cx ul, .cx dl, .cx dd { margin: 0; }
.cx ol, .cx ul { padding: 0; list-style: none; }
/* i bottoni del modulo prendono il testo della pagina; quelli del Manager (.btn) restano i suoi */
.cx button:not(.btn) { font: inherit; color: inherit; }
.cx :focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.cx [hidden] { display: none !important; }
.cx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cx-n { font-family: var(--cifre); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cx-cod { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0; overflow-wrap: anywhere; }
.cx-muto { color: var(--ink-3); }
.cx-carico { padding: 40px 0; color: var(--ink-2); }
.cx-vai { display: inline; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 500; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--bordo-ctl); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cx-vai:hover { text-decoration-color: var(--ink); }
/* il nome di una riga e la sua punteggiatura non si separano a capo */
.cx-insieme { white-space: nowrap; }
.cx kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--linea);
  border-bottom-width: 2px; border-radius: 4px; font: 500 11px/1 var(--cifre); color: var(--ink-2); background: var(--piano); }
.cx .btn { min-height: 32px; padding: 0 12px; justify-content: center; white-space: nowrap; }
.cx .btn:disabled { opacity: 1; cursor: default; color: var(--ink-3); border-color: var(--linea); background: transparent; filter: none; }
.cx-costo { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--linea); border-radius: var(--r-segno);
  font: 400 11px/1 var(--cifre); color: var(--ink-2); white-space: nowrap; }

/* ── la lista, e lo spazio per il foglio quando è aperto ── */
.cx-pagina { padding-bottom: 24px; transition: padding-right 280ms cubic-bezier(.2, .8, .2, 1); }
.cx-lista { container: lista / inline-size; }
.cx[data-foglio="aperto"] .cx-pagina { padding-right: calc(var(--cx-foglio-w) + 16px); }

/* la testa che resta in alto: il titolo, «Controlla adesso», la barra del controllo (il vetro, in un posto solo) */
.cx-testa { position: sticky; top: var(--cx-testa-top); z-index: 6; margin: 0 -28px; padding: 12px 28px; background: var(--cx-vetro);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25); border-bottom: 1px solid var(--linea-2);
  transition: margin-right 280ms cubic-bezier(.2, .8, .2, 1), padding-right 280ms cubic-bezier(.2, .8, .2, 1); }
.cx[data-foglio="aperto"] .cx-testa { margin-right: calc(-1 * (var(--cx-foglio-w) + 16px) - 28px); padding-right: calc(var(--cx-foglio-w) + 16px + 28px); }
.cx-testa-riga { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; }
.cx-testa h1 { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-azione { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.cx-azione .btn-solid { min-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600; }
.cx-limite { color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.cx-stato-controllo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 22px; margin-top: 8px; color: var(--ink-2); font-size: 12px; }
.cx-stato-controllo:empty { display: none; }
.cx-stato-controllo b { color: var(--ink); font-weight: 600; }
.cx-avanza { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--ink); opacity: 0; transform-origin: left;
  transform: scaleX(.15); transition: opacity 280ms; }
.cx-avanza.cx-su { opacity: 1; animation: cx-scorre 1.4s ease-in-out infinite; }
@keyframes cx-scorre { 0% { transform: translateX(-15%) scaleX(.15); } 100% { transform: translateX(100%) scaleX(.15); } }

/* la frase in testa: la sola cosa accesa quando qualcosa chiede te */
.cx-memo { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px 12px; margin: 14px 0 6px; padding: 16px 18px;
  border-radius: var(--r-piano); border: 1px solid transparent; }
.cx-memo[data-luce="allerta"], .cx-memo[data-luce="ink"] { background: var(--piano); border-color: var(--linea-2); box-shadow: var(--cx-luce); }
.cx-memo[data-luce="quiete"] { padding-inline: 0; }
.cx-memo[data-luce="quiete"] .cx-spia { display: none; }
.cx-memo[data-luce="quiete"] > div { grid-column: 1 / -1; }
.cx-spia { padding-top: 4px; }
.cx-spia .cx-sg { width: 18px; height: 18px; }
.cx-memo h2:focus { outline: none; }
.cx-memo h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; text-wrap: balance; }
.cx-memo[data-luce="quiete"] h2 { font-weight: 500; color: var(--ink-2); }
.cx-memo h2 .cx-vai { font-weight: 600; text-underline-offset: 4px; }
.cx-fatti { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 6px; font-size: 15px; }
.cx-fatti button { min-height: 28px; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 500; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--bordo-ctl); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cx-fatti button:hover { text-decoration-color: var(--ink); }
.cx-meta { margin-top: 8px; color: var(--ink-2); font-size: 12px; }
.cx-meta .cx-n { color: var(--ink); }
.cx-meta .cx-vai { display: inline-flex; align-items: center; min-height: 24px; margin-block: -3px; }
.cx-senza { margin: 4px 0 2px; padding: 0 2px; color: var(--ink-2); font-size: 12px; line-height: 1.55; max-width: 110ch; }
.cx-senza b { color: var(--ink); font-weight: 600; }
.cx-tasti { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0 4px; color: var(--ink-3); font-size: 12px; }
.cx-tasti span { display: inline-flex; align-items: center; gap: 5px; }

/* ── i gruppi e le righe: una riga sola, sempre allineata ── */
.cx-gruppo { margin-top: 26px; }
.cx-testate, .cx-riga { grid-template-columns: 16px minmax(150px, 230px) 118px minmax(0, 1fr) minmax(0, 150px) 76px; }
.cx-testate { display: grid; column-gap: 12px; padding: 0 10px; margin-top: 14px; color: var(--ink-3); font-size: 12px; }
.cx-testate span:last-child { text-align: right; }
.cx-gruppo > header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 0 0 6px 10px; }
.cx-gruppo > header h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.cx-gruppo > header p { color: var(--ink-3); font-size: 12px; }
.cx-nota { margin: 6px 10px 0; color: var(--ink-3); font-size: 12px; max-width: 90ch; }
.cx-r { position: relative; }
.cx-riga { display: grid; align-items: center; column-gap: 12px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--r-ctl);
  background: transparent; color: var(--ink-2); text-align: left; cursor: pointer; transition: background 120ms; }
.cx-riga:hover { background: var(--piano-2); }
.cx-riga[aria-current="true"] { background: var(--piano); box-shadow: inset 0 0 0 1px var(--linea), var(--cx-luce); }
.cx-riga:focus-visible { outline: 2px solid var(--accento); outline-offset: -2px; }
.cx-nome { min-width: 0; color: var(--ink-2); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-parola { min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); }
.cx-mt { min-width: 0; display: grid; }
.cx-motivo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); }
.cx-avviso { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-avviso::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; vertical-align: 1px; border: 1px solid currentColor; transform: rotate(45deg); }
.cx-dove { min-width: 0; color: var(--ink-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-tempo { color: var(--ink-3); font: 400 12px/1.2 var(--cifre); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; transition: opacity 120ms; }
/* acceso: ciò che chiede te, o che non è normale */
.cx-r.cx-accesa .cx-nome { color: var(--ink); font-weight: 500; }
.cx-r.cx-accesa .cx-parola { font-weight: 600; }
.cx-r.cx-accesa .cx-motivo { color: var(--ink-2); }
.cx-r[data-s="rotta"] .cx-parola { color: var(--allerta); }
.cx-r[data-s="attivare"] .cx-parola, .cx-r[data-s="dubbio"] .cx-parola { color: var(--ink); }
.cx-r[data-s="nonso"] .cx-parola, .cx-r[data-s="spenta"] .cx-parola, .cx-r[data-s="controllo"] .cx-parola { color: var(--ink-2); }
.cx-r[data-s="nonso"] .cx-nome, .cx-r[data-s="spenta"] .cx-nome { color: var(--ink-2); }
/* «Controlla» compare col mouse e col fuoco, solo dove la riga ha un controllo gratuito; copre l'ora, mai la parola */
.cx-ctl { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; min-height: 28px; padding: 0 10px;
  background: var(--piano); border-color: var(--linea); transition: opacity 120ms; }
.cx-r:hover > .cx-ctl, .cx-r:focus-within > .cx-ctl { opacity: 1; pointer-events: auto; }
.cx-r:has(> .cx-ctl):hover .cx-tempo, .cx-r:has(> .cx-ctl):focus-within .cx-tempo { opacity: 0; }
/* il motivo di un gesto rifiutato, sulla riga, per 3 secondi: copre la fine della riga, mai il nome e lo stato */
.cx-msg { position: absolute; z-index: 5; right: 8px; top: 50%; transform: translateY(-50%); width: max-content;
  max-width: min(460px, calc(100% - 390px)); min-width: min(220px, calc(100% - 16px)); padding: 5px 10px; border: 1px solid var(--bordo-ctl);
  border-radius: var(--r-ctl); background: var(--cx-foglio); color: var(--ink); font-size: 12px; line-height: 1.35;
  box-shadow: var(--cx-luce), var(--cx-ombra); pointer-events: none; }
.cx-msg.cx-entra { animation: cx-msg-entra 180ms cubic-bezier(.2, .8, .2, 1); }
@keyframes cx-msg-entra { from { opacity: 0; transform: translateY(-50%) translateX(6px); } }
.cx[data-foglio="aperto"] .cx-ctl { display: none; }
.cx[data-foglio="aperto"] .cx-r .cx-tempo { opacity: 1; }
.cx-riga.cx-arrivo { animation: cx-arriva 900ms ease-out; }
@keyframes cx-arriva { from { background: var(--accento-tinta); } }
/* le corsie sotto la riga madre */
.cx-sotto .cx-riga { min-height: 30px; padding-block: 3px; font-size: 12px; cursor: default; }
.cx-sotto .cx-riga:hover { background: transparent; }
.cx-sotto .cx-nome { font-weight: 400; padding-left: 18px; position: relative; }
.cx-sotto .cx-nome::before { content: ""; position: absolute; left: 4px; top: -8px; height: 16px; width: 8px; border-left: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea); border-bottom-left-radius: 3px; }
.cx-sotto .cx-sg { width: 12px; height: 12px; }

/* ── i segni: sette forme, la parola è sempre accanto ── */
.cx-sg { width: 16px; height: 16px; flex: none; overflow: visible; display: block; }
.cx-sg * { transition: fill 180ms, stroke 180ms, opacity 180ms, transform 180ms cubic-bezier(.2, .8, .2, 1); }
.cx-sg .cx-an { fill: none; stroke: transparent; stroke-width: 3; }
.cx-sg .cx-pi { fill: transparent; transform-box: fill-box; transform-origin: center; }
.cx-sg .cx-bo { fill: none; stroke: transparent; stroke-width: 1.3; }
.cx-sg .cx-me { fill: transparent; }
.cx-sg .cx-ba { stroke: transparent; stroke-width: 1.3; stroke-linecap: round; }
.cx-sg .cx-pu { fill: transparent; }
.cx-sg[data-s="funziona"] .cx-pi { fill: var(--ink-3); transform: scale(.55); }
.cx-sg[data-s="attivare"] .cx-pi { fill: var(--ink); }
.cx-sg[data-s="rotta"] .cx-pi { fill: var(--allerta); }
.cx-sg[data-s="rotta"] .cx-an { stroke: var(--allerta-tinta); }
.cx-sg[data-s="dubbio"] .cx-bo { stroke: var(--ink); }
.cx-sg[data-s="dubbio"] .cx-me { fill: var(--ink); }
.cx-sg[data-s="nonso"] .cx-bo { stroke: var(--ink-2); stroke-dasharray: 2.4 1.7; }
.cx-sg[data-s="nonso"] .cx-pu { fill: var(--ink-2); }
.cx-sg[data-s="mai"] .cx-bo { stroke: var(--ink-3); stroke-dasharray: .01 2.25; stroke-linecap: round; stroke-width: 1.5; }
.cx-sg[data-s="spenta"] .cx-bo, .cx-sg[data-s="spenta"] .cx-ba { stroke: var(--ink-2); }
.cx-sg[data-s="controllo"] .cx-bo { stroke: var(--ink-2); }
.cx-sg[data-s="controllo"] { animation: cx-polso 900ms ease-in-out infinite; }
@keyframes cx-polso { 50% { opacity: .35; } }
/* la prova spie: al «Controlla adesso» tutte le spie si accendono per un attimo, poi si spengono con le risposte */
.cx.cx-prova-spie .cx-sg[data-s="controllo"] .cx-pi { fill: var(--ink); transform: none; }
.cx.cx-prova-spie .cx-sg[data-s="controllo"] { animation: none; }
/* i nodi della catena e le case usano lo stesso disegno */
.cx-sg[data-s="ok"] .cx-pi { fill: var(--ink-2); }
.cx-sg[data-s="ferma"] .cx-bo { stroke: var(--allerta); stroke-width: 2; }
.cx-sg[data-s="ferma"] .cx-an { stroke: var(--allerta-tinta); }
.cx-sg[data-s="non"] .cx-bo { stroke: var(--ink-3); }
.cx-sg[data-s="dichiarata"] .cx-pi { fill: var(--ink); }
.cx-sg[data-s="casa"] .cx-bo { stroke: var(--ink-2); }

/* ── dove stanno le chiavi ── */
.cx-mappa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 32px; }
.cx-luogo h3 { margin: 4px 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cx-casa .cx-riga { grid-template-columns: 16px minmax(0, 1fr) auto; align-items: start; min-height: 0; padding-block: 8px; }
.cx-casa .cx-sg { margin-top: 2px; }
.cx-casa .cx-nome { white-space: normal; }
.cx-tiene { display: block; color: var(--ink-3); font-size: 12px; font-weight: 400; margin-top: 2px; white-space: normal; }
.cx-conto { font: 400 12px/1.4 var(--cifre); color: var(--ink-3); text-align: right; white-space: nowrap; }
.cx-casa[data-tipo="dichiarata"] .cx-nome { color: var(--ink); }
.cx-mappa-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 10px 6px; color: var(--ink-3); font-size: 12px; }
.cx-mappa-leg span { display: inline-flex; align-items: center; gap: 5px; }
.cx-mappa-leg .cx-sg { width: 12px; height: 12px; }
.cx-altre { display: none; }

/* ── il foglio di lato: la riga aperta (la lista resta visibile) ── */
.cx-foglio { position: fixed; z-index: 45; top: calc(var(--cx-testa-top) + 12px); right: 12px; bottom: 12px; width: var(--cx-foglio-w);
  display: flex; flex-direction: column; background: var(--cx-foglio); border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: var(--cx-luce), var(--cx-ombra); overflow: hidden; --ink-3: var(--cx-ink-3-foglio); }
.cx-foglio.cx-entra { animation: cx-foglio-entra 280ms cubic-bezier(.2, .8, .2, 1); }
.cx-foglio:focus { outline: none; }
@keyframes cx-foglio-entra { from { transform: translateX(16px); opacity: 0; } }
.cx-fs-testa { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 16px 12px 18px; border-bottom: 1px solid var(--linea-2); }
.cx-fs-testa h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.cx-fs-testa h2:focus { outline: none; }
.cx-fs-st { display: flex; align-items: flex-start; gap: 8px; grid-column: 1 / -1; font-weight: 600; }
.cx-fs-st .cx-sg { margin-top: 2px; }
/* la parola di stato non va mai a capo («Mai provata», non «Mai / provata»): a capo va il motivo, allineato alla prima riga */
.cx-fs-parola { flex: none; white-space: nowrap; }
.cx-fs-st[data-s="rotta"] { color: var(--allerta); }
.cx-fs-st .cx-mt { display: block; color: var(--ink-2); font-weight: 400; }
.cx-fs-serve { grid-column: 1 / -1; color: var(--ink-2); line-height: 1.55; }
.cx-fs-comandi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.cx-fs-chiudi { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: var(--r-ctl); background: none; color: var(--ink-2); cursor: pointer; }
.cx-fs-chiudi:hover { background: var(--piano-2); color: var(--ink); }
.cx-fs-chiudi svg, .cx-fs-torna svg { width: 16px; height: 16px; }
.cx-fs-torna { display: none; }
.cx-fs-corpo { overflow: auto; overscroll-behavior: contain; padding: 4px 16px 76px 18px; }
.cx-fs-sez { padding-top: 16px; }
.cx-fs-sez + .cx-fs-sez { margin-top: 4px; border-top: 1px solid var(--linea-2); }
.cx-fs-sez h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; }
.cx-fs-sez h3 small { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.cx-fs-catena li { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding-bottom: 12px; }
.cx-fs-catena li:last-child { padding-bottom: 0; }
.cx-fs-catena li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 19px; bottom: 2px; border-left: 1.5px solid var(--ink-3); }
.cx-fs-catena li.cx-dopo::after, .cx-fs-catena li[data-e="ferma"]::after, .cx-fs-catena li[data-e="nonso"]::after,
.cx-fs-catena li[data-e="mai"]::after, .cx-fs-catena li[data-e="non"]::after { border-left-style: dashed; border-left-color: var(--cx-tratteggio); }
.cx-fs-catena .cx-sg { width: 16px; height: 16px; margin-top: 2px; }
.cx-fs-catena b { font-weight: 600; }
.cx-es { color: var(--ink-2); }
.cx-fs-catena small { display: block; color: var(--ink-3); font-size: 12px; }
.cx-fs-catena li[data-e="ferma"] .cx-es { color: var(--allerta); font-weight: 600; }
.cx-fs-catena li[data-e="attivare"] .cx-es { color: var(--ink); font-weight: 600; }
.cx-qui { display: inline-block; margin-left: 2px; font-size: 11px; font-weight: 600; color: var(--allerta); }
.cx-fs-catena li[data-e="attivare"] .cx-qui { color: var(--ink); }
.cx-fs-proc { display: grid; gap: 8px; counter-reset: cx-p; }
.cx-fs-proc li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.cx-fs-proc li::before { counter-increment: cx-p; content: counter(cx-p); font: 700 12px/20px var(--cifre); color: var(--ink-3); text-align: center; }
.cx-fs-proc label { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; cursor: pointer; }
.cx-fs-proc input { accent-color: var(--ink); width: 16px; height: 16px; margin: 2px 0 0; }
.cx-chi { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cx-tx { color: var(--ink); }
.cx-fs-proc small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.cx-fs-proc li.cx-fatto .cx-tx { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-3); }
.cx-az { display: grid; gap: 4px; }
.cx-az > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cx-az-in { grid-column: 2; padding-left: 26px; margin-top: 4px; }
.cx-fs-dl { display: grid; gap: 8px; }
.cx-fs-dl > div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
.cx-fs-dl dt { color: var(--ink-3); font-size: 12px; padding-top: 1px; }
.cx-fs-dl dd { min-width: 0; overflow-wrap: anywhere; }
.cx-fs-dl dd small { display: block; color: var(--ink-3); font-size: 12px; }
.cx-fs-dl dd .cx-cod { color: var(--ink); }
.cx-fs-modelli { display: grid; gap: 4px; margin-top: 4px; }
.cx-fs-modelli li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 12px; color: var(--ink-2); }
.cx-fs-modelli li .cx-sg { width: 12px; height: 12px; align-self: center; }
.cx-fs-modelli li b { font-weight: 500; color: var(--ink); }
.cx-fs-modelli small { display: block; color: var(--ink-3); }
.cx-fs-cmd { display: grid; gap: 8px; margin-top: 10px; padding: 10px; border-radius: var(--r-ctl); background: var(--cx-pozzo); border: 1px solid var(--linea-2); }
.cx-fs-cmd code { min-width: 0; font: 400 12px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.cx-fs-cmd .btn { justify-self: start; }
.cx-fs-cmd-nota { color: var(--ink-2); font-size: 12px; margin-top: -4px; }
.cx-fs-didascalia { color: var(--ink-3); font-size: 12px; margin: 8px 0 4px; }
.cx-fs-link { margin-top: 8px; }
.cx-fs-fisso { margin-top: 10px; color: var(--ink-2); }
.cx-fs-fisso b { color: var(--ink); }
.cx-fs-vuoto { color: var(--ink-3); }
.cx-fs-usata { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── larghezze strette: la lista si piega, il telefono vede la frase e le righe accese ── */
@container lista (max-width: 860px) {
  .cx-testate, .cx-riga { grid-template-columns: 16px minmax(130px, 200px) 112px minmax(0, 1fr) 70px; }
  .cx-dove, .cx-t-dove { display: none; }
  .cx-msg { max-width: min(460px, calc(100% - 260px)); }
}
@container lista (max-width: 640px) {
  .cx-riga { grid-template-columns: 16px minmax(0, 1fr) auto; row-gap: 2px; }
  .cx-riga .cx-mt { grid-column: 2 / -1; }
  .cx-riga .cx-tempo, .cx-testate { display: none; }
  .cx-casa .cx-riga { grid-template-columns: 16px minmax(0, 1fr) auto; }
  .cx-mappa { grid-template-columns: minmax(0, 1fr); }
  .cx-msg { left: 30px; right: 8px; top: auto; bottom: 3px; transform: none; width: auto; max-width: none; min-width: 0; }
  .cx-msg.cx-entra { animation: none; }
}
@media (max-width: 760px) {
  .cx-testa { margin: 0 -16px; padding: 10px 16px; }
  .cx[data-foglio="aperto"] .cx-testa { margin-right: -16px; padding-right: 16px; }
  .cx[data-foglio="aperto"] .cx-pagina { padding-right: 0; }
  .cx-testa h1 { font-size: 22px; }
  .cx-azione { width: 100%; justify-content: space-between; }
  .cx-azione .btn-solid { min-height: 44px; flex: 1; }
  .cx-testa:has(.cx-stato-controllo:not(:empty)) .cx-azione .cx-costo { display: none; }
  .cx-tasti, .cx-ctl { display: none; }
  .cx-memo { padding: 14px; }
  .cx-memo h2 { font-size: 16px; }
  .cx-fatti { display: grid; gap: 8px; font-size: 13px; }
  .cx-fatti button { min-height: 44px; }
  .cx-meta .cx-vai { min-height: 44px; margin-block: -13px; }
  .cx-riga { min-height: 48px; padding: 8px 10px; }
  .cx-sotto .cx-riga { min-height: 44px; }
  .cx-casa .cx-riga { min-height: 48px; }
  /* al telefono: la frase e le righe accese; le altre con «Mostra le altre» */
  .cx[data-altre="no"] .cx-r:not(.cx-accesa):not(.cx-sotto):not(.cx-casa), .cx[data-altre="no"] .cx-gruppo:not(.cx-ha-accese) { display: none; }
  .cx[data-altre="no"] .cx-sotto:not(.cx-madre-accesa), .cx[data-altre="no"] .cx-nota { display: none; }
  /* un bersaglio da 44 px: `.cx .cx-altre` pesa piu' di `.cx .btn` (32 px al computer) */
  .cx .cx-altre { display: flex; width: 100%; min-height: 44px; margin-top: 18px; }
  /* il foglio diventa lo schermo intero, dall'alto, con «Torna all'elenco»: la barra del Manager scorre via con la pagina,
     e a pagina scorsa sotto un foglio che partisse dalla barra resterebbe scoperta una striscia della lista */
  .cx-foglio { top: 0; right: 0; bottom: 0; left: 0; width: auto; border-radius: 0; border: 0; }
  .cx-fs-chiudi { display: none; }
  .cx-fs-torna { display: inline-flex; grid-column: 1 / -1; justify-self: start; min-height: 44px; margin: -4px 0 4px -6px; padding: 0 10px; border: 0;
    border-radius: var(--r-ctl); background: none; color: var(--ink); font-weight: 600; font-size: 13px; align-items: center; gap: 6px; cursor: pointer; }
  .cx-fs-dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cx-fs-proc input { width: 20px; height: 20px; }
  .cx-foglio .btn { min-height: 44px; }
}
@media (pointer: coarse) {
  .cx-ctl, .cx-tasti { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-sg[data-s="controllo"], .cx-riga.cx-arrivo, .cx-foglio.cx-entra, .cx-msg.cx-entra, .cx-avanza.cx-su { animation: none; }
  .cx-pagina, .cx-testa, .cx-riga, .cx-tempo, .cx-ctl, .cx-sg * { transition: none; }
}