/* Tower · copia invariata di bundle.css di Terracotta (13/10/2026): i pezzi di famiglia. I pezzi della Tower si aggiungono in fondo quando si congelano. */
/* Rilievo · il vestito «Terracotta» · bundle.css = pezzi.css di enrico252/rilievo (main@8764924), con davanti quello che tokens.json
   non può tenere: i caratteri pronti (--f-…), le famiglie (--famiglia-…), le misure derivate (var/calc) e la regola del dito.
   Colori, spazi, raggi, misure e durate arrivano da tokens.json (tokens.css della pagina). Si cambia nel repository, non qui. */
:root, [data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }
:root {
  --famiglia-interfaccia: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --famiglia-sigle: "Geist Mono", ui-monospace, Menlo, Consolas, monospace;
  --famiglia-carta: Helvetica, Arial, "Liberation Sans", sans-serif;   /* i testi del disegno (0.9.3): le lettere della carta, quelle del PDF */
  --f-carta: 400 16px/1.2 var(--famiglia-carta);                    /* il campo invisibile dove si scrive un testo (16 px: Safari non ingrandisce) */
  --f-pagina: 600 20px/26px var(--famiglia-interfaccia);            /* solo nelle pagine che si leggono */
  --f-titolo-pannello: 600 15px/20px var(--famiglia-interfaccia);   /* il titolo di un pannello, il nome del progetto */
  --f-titolo: 600 13px/18px var(--famiglia-interfaccia);            /* una sezione, il nome del comando in corso */
  --f-testo: 400 13px/18px var(--famiglia-interfaccia);             /* il contenuto: voci, valori, nomi dei Layer */
  --f-tasto: 500 13px/18px var(--famiglia-interfaccia);             /* la parola su un tasto, il segmento scelto */
  --f-piccolo: 400 12px/16px var(--famiglia-interfaccia);           /* dettagli, conteggi, «presto» */
  --f-suggerimento: 500 12px/16px var(--famiglia-interfaccia);      /* la targhetta col nome */
  --f-sigla: 500 11.5px/14px var(--famiglia-sigle);                 /* la sigla del comando */
  --f-numero: 500 13px/18px var(--famiglia-sigle);                  /* i numeri dei campi e delle coordinate */
  --f-schermo: 500 24px/28px var(--famiglia-sigle);                 /* il numero sullo schermo del tastierino */
  --f-tasto-numero: 500 19px/22px var(--famiglia-sigle);            /* i tasti del tastierino */
  --f-misura: 600 18px/22px var(--famiglia-sigle);                  /* la distanza della Misura vicino al cursore (10/10) */
  --f-numero-piccolo: 400 12px/16px var(--famiglia-sigle);          /* ΔX, ΔY, l'angolo; tratto e totale del Percorso (10/10) */
  --f-lettera: 600 12px/16px var(--famiglia-interfaccia);           /* la lettera da scrivere di un'opzione nella riga (0.9.0) */
  --riga-alta: var(--riga);     /* quella che vale: col puntatore grosso (il dito) diventa --riga-dito, qui sotto */
  --riga-tasto: calc(var(--riga-alta) - 6px);   /* l'altezza di un tasto o di un'opzione dentro la riga */
  --riga-freccina-larga: var(--riga-freccina);
  --voce-riga-dito: var(--campo-alto);
  --voce-riga-alta: var(--voce-riga);
  --comando-alto: calc(var(--campo-alto) + 2 * var(--bordo-lastra) + 2px);   /* la barra del comando, una riga */
  --pannelli-basso: calc(var(--comando-basso) + var(--comando-alto) + var(--spazio-2));   /* dove finiscono i pannelli della colonnina: sopra la barra del comando */
  --barra-basso: calc(var(--riga-alta) + var(--spazio-2));
  --comando-basso: calc(var(--barra-basso) + 2 * var(--cella) + var(--tra-celle) + 2 * var(--bordo-lastra) + 2px + var(--spazio-2));
}
@media (pointer: coarse) { :root { --riga-alta: var(--riga-dito); --riga-freccina-larga: var(--riga-freccina-dito); --voce-riga-alta: var(--voce-riga-dito); } }


/* Rilievo · il vestito «Terracotta» · i pezzi (8 ottobre 2026).
   Come sono fatti i pezzi dell'interfaccia. I valori stanno in token.css: qui si usano solo per nome.
   Nessuna pagina inventa uno stile: se manca un pezzo, prima si aggiunge qui e al catalogo (catalogo.html).
   Le regole vengono da quaderni/fondamenta-2026-10-08/CONSEGNA-VESTITO-2026-10-08.md: il numero tra parentesi
   quadre dice la sezione e la voce, per esempio [1.3] = sezione 1, voce 3.
   Gli stati li dà il codice, con le classi: .acceso · .sopra · .preso (vedi pezzi.js). */

/* ================================================================ la base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--carta); color: var(--testo); font: var(--f-testo); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
[data-theme] { color: var(--testo); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--selezione); outline-offset: 1px; }
.etichetta { color: var(--testo-tenue); }
.sigla { font: var(--f-sigla); color: var(--testo-tenue); white-space: nowrap; }
.presto-parola { font: var(--f-piccolo); color: var(--testo-tenue); }

/* ================================================================ l'icona: due strati [1.2]
   Sotto il tratto, sopra l'inchiostro. Di base a una tinta; il tratto prende il colore da --tratto.
   Spigoli vivi. Lo spessore è il token --tratto-icona (valore di servizio: lo decide Enrico). */
.icona { width: var(--lato-icona); height: var(--lato-icona); display: block; flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: var(--tratto-icona); stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; }
.icona .tratto { stroke: var(--tratto, currentColor); transition: stroke var(--velo) var(--morbido); }
.manca { width: var(--lato-icona); height: var(--lato-icona); display: block; flex: none; border: 1px dashed var(--testo-spento); border-radius: var(--raggio-xs); }

/* ================================================================ la lastra */
.lastra { background: var(--lastra); color: var(--testo); border: 1px solid var(--filo); border-radius: var(--raggio-m); box-shadow: var(--ombra-lastra); }
.stacco { width: 1px; align-self: stretch; flex: none; margin: var(--spazio-1); background: var(--filo); }

/* ================================================================ la cella e i quattro stati di un'icona [1.3]
   A riposo: una tinta.
   Acceso (.acceso): solo il tratto. Un modo attivo (Snap, Orto) o la modalità attiva di un comando.
   Ci sei sopra (.sopra): il velo, e il tratto che respira.
   Preso (.preso): il velo e il tratto acceso, fermo. L'icona non si sposta e non cresce [3.1, 3.3]: qui non c'è
   nessuna trasformazione, e non va aggiunta. Niente pieno d'inchiostro [3.4]. */
.cella { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--cella); height: var(--cella);
  padding: 0; border: 0; border-radius: var(--raggio-s); background: transparent; color: var(--icona);
  transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido); }
.cella.larga { width: var(--cella-larga); height: var(--cella-larga); }
@media (hover: hover) { .cella:hover { background: var(--rialzo); } }
.cella.acceso { --tratto: var(--accento); }
.cella.sopra { --tratto: var(--accento); background: var(--rialzo); }
.cella.sopra .tratto { animation: respira var(--respiro) ease-in-out infinite alternate; }
.cella.preso { --tratto: var(--accento); background: var(--rialzo); color: var(--testo); }
.cella.preso .tratto { animation: none; }
/* le celle quiete (occhio, lucchetto nelle liste): solo il velo. Poco terracotta per zona. */
.cella.quieta.sopra { --tratto: currentColor; }
.cella.quieta.sopra .tratto { animation: none; }
/* «presto»: quello che non è ancora costruito. Non risponde, e la targhetta lo dice. */
.cella.presto, .cella:disabled { color: var(--testo-spento); background: transparent; cursor: default; --tratto: currentColor; }
.cella.presto .tratto, .cella:disabled .tratto { animation: none; }
@keyframes respira { from { opacity: 1; } to { opacity: var(--respiro-fondo); } }

/* ================================================================ la targhetta col nome [1.5]
   Il nome (e la sigla) di un'icona: compare quando ci sei sopra col mouse o col fuoco della tastiera.
   È scritta in data-n sulla cella. Una riga, mai una frase. */
.cella[data-n]::after { content: attr(data-n); position: absolute; z-index: 9; left: 50%; bottom: calc(100% + var(--spazio-2)); transform: translateX(-50%);
  padding: var(--spazio-1) var(--spazio-2); border-radius: var(--raggio-xs); background: var(--suggerimento); color: var(--su-suggerimento);
  font: var(--f-suggerimento); white-space: nowrap; box-shadow: var(--ombra-menu); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity var(--velo) var(--morbido), visibility 0s linear var(--velo); }
/* col mouse esce se ti fermi sull'icona (--attesa); col fuoco della tastiera subito */
@media (hover: hover) { .cella[data-n]:hover::after { opacity: 1; visibility: visible; transition: opacity var(--velo) var(--morbido) var(--attesa), visibility 0s linear var(--attesa); } }
.cella[data-n]:focus-visible::after, .cella[data-n].dice-il-nome::after { opacity: 1; visibility: visible; transition: opacity var(--velo) var(--morbido), visibility 0s; }
/* nella riga di sotto della barra grande la targhetta sale sopra tutta la barra, così non copre la riga di sopra */
.cella.giu[data-n]::after { bottom: calc(100% + var(--cella) + var(--tra-celle) + var(--spazio-2)); }
/* nella colonnina sta di lato */
.cella.di-lato[data-n]::after { left: calc(100% + var(--spazio-2)); bottom: auto; top: 50%; transform: translateY(-50%); }
/* sotto: per le celle in alto sullo schermo */
.cella.di-sotto[data-n]::after { bottom: auto; top: calc(100% + var(--spazio-2)); }

/* ================================================================ la barra grande [1.4, 1.6, 2.6]
   Un pezzo solo: gruppi di quattro, sempre. Un gruppo si allarga dalla freccina, verso destra.
   Il posto è fermo e la barra ci sta attaccata a sinistra: cresce solo a destra, così l'icona presa non scappa
   da sotto il dito. Accanto al gruppo non si apre niente [1.5, 3.5]. */
.posto-barra { position: relative; display: inline-block; vertical-align: bottom; pointer-events: none; }
.posto-barra > .barra { pointer-events: auto; }
.posto-barra.misurato > .barra { position: absolute; left: 0; bottom: 0; }
.barra { display: inline-flex; align-items: stretch; padding: var(--bordo-lastra); }
.barra > .cella.scegli { height: calc(2 * var(--cella) + var(--tra-celle)); }
/* dalla 0.9.0 (Enrico, 10/10): il passo delle icone di un gruppo è lo stesso nei due versi (cella + tra-celle = 30 px), mai
   passi diversi; tra un gruppo e l'altro lo stacco ha più aria, così il gruppo si legge */
.barra > .stacco { margin-inline: var(--spazio-2); }
.gruppo { display: flex; align-items: stretch; }
.quattro { display: grid; grid-template-columns: repeat(2, var(--cella)); grid-template-rows: repeat(2, var(--cella)); gap: var(--tra-celle); }
.altri { width: 0; margin-left: 0; opacity: 0; visibility: hidden; overflow: hidden;
  transition: width var(--allarga) var(--morbido), margin-left var(--allarga) var(--morbido), opacity var(--velo) var(--morbido), visibility 0s linear var(--allarga); }
.altri > .dentro { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, var(--cella)); grid-auto-columns: var(--cella); gap: var(--tra-celle); width: max-content; }
.altri .cella { opacity: 0; transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido), opacity var(--velo) var(--morbido); }
.gruppo.aperto > .altri { width: calc(var(--colonne, 1) * var(--cella) + (var(--colonne, 1) - 1) * var(--tra-celle)); margin-left: var(--tra-celle); opacity: 1; visibility: visible;
  transition: width var(--allarga) var(--morbido), margin-left var(--allarga) var(--morbido), opacity var(--velo) var(--morbido), visibility 0s; }
.gruppo.aperto > .altri .cella { opacity: 1; transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido), opacity var(--allarga) var(--morbido) calc(var(--i, 0) * var(--passo)); }
/* finito di allargarsi, le targhette possono uscire dal bordo */
.gruppo.aperto.fermo > .altri { overflow: visible; }
.freccina { display: grid; place-items: center; flex: none; width: var(--largo-freccina); margin-left: var(--spazio-mezzo); padding: 0; border: 0;
  border-radius: var(--raggio-cella-piccola); background: transparent; color: var(--testo-tenue);
  transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido); }
.freccina .icona { width: var(--lato-freccina); height: var(--lato-freccina); transition: transform var(--allarga) var(--morbido); }
@media (hover: hover) { .freccina:hover { background: var(--rialzo); } }
.gruppo.aperto > .freccina { color: var(--accento); }
.gruppo.aperto > .freccina .icona { transform: rotate(180deg); }
/* I tre modi della barra grande [1.6, cautela 3]: intera · una-riga · nascosta, scelti da un'opzione (data-modo).
   Oggi è costruito solo «intera». Gli altri due hanno qui il loro posto: quando si costruiscono si scrivono dentro
   queste due regole, senza toccare il resto. Fino ad allora pezzi.js non li accetta e dice «presto». */
.barra[data-modo="intera"] { display: inline-flex; }
.barra[data-modo="una-riga"] { /* presto */ }
.barra[data-modo="nascosta"] { /* presto */ }
/* la freccina di un gruppo che non si può stringere adesso (ci lavora un comando dei suoi) */
.freccina[aria-disabled="true"] { cursor: default; }
/* la coda della barra (0.9.0): Annulla e Ripeti dopo uno stacco, una sull'altra, grandi come le altre celle: si usano di continuo.
   Non sono comandi: non si prendono mai */
.barra > .coda { display: grid; grid-template-rows: repeat(2, var(--cella)); gap: var(--tra-celle); }

/* ================================================================ la barra del comando [1.5, 1.6, 2.1–2.5]
   Sta in piedi da sola: ha il suo posto e non si muove se la barra grande cambia (cautela 1).
   Dentro, in fila: il nome · le modalità · cosa toccare · Esc · Fine.
   Le modalità sono icone piccole: un livello sotto il comando. Quella attiva ha solo il tratto acceso e
   l'inchiostro pieno; le altre l'inchiostro tenue. Niente velo fisso, nessun filo, nessun altro colore. */
.posto-comando { display: flex; justify-content: center; pointer-events: none; }
.comando { display: inline-flex; align-items: center; gap: var(--spazio-3); padding: var(--bordo-lastra) var(--bordo-lastra) var(--bordo-lastra) var(--bordo-pannello);
  color: var(--icona); pointer-events: auto; opacity: 0; visibility: hidden; transform: translateY(var(--spazio-2));
  transition: opacity var(--velo) var(--morbido), transform var(--allarga) var(--morbido), visibility 0s linear var(--allarga); }
.comando.vivo { opacity: 1; visibility: visible; transform: none; transition: opacity var(--allarga) var(--morbido), transform var(--allarga) var(--morbido), visibility 0s; }
.comando > .nome { font: var(--f-titolo); color: var(--testo); white-space: nowrap; }
.comando > .modi { display: flex; align-items: center; gap: var(--spazio-3); }
.comando > .modi[hidden] { display: none; }
.opzioni { display: flex; align-items: center; gap: var(--spazio-mezzo); }
/* da un comando all'altro, senza passare da Scegli: il contenuto rientra piano */
.comando.cambia > .nome, .comando.cambia > .modi, .comando.cambia > .frasi { animation: appare var(--allarga) var(--morbido); }
@keyframes appare { from { opacity: 0; } to { opacity: 1; } }
.cella.modino { width: var(--cella-modo); height: var(--cella-modo); border-radius: var(--raggio-cella-piccola); color: var(--testo-tenue); }
.cella.modino .icona { width: var(--lato-icona-modo); height: var(--lato-icona-modo); }
.cella.modino.acceso { color: var(--testo); }
.cella.modino.acceso .tratto { animation: none; }
/* le frasi di un comando stanno una sull'altra: la barra tiene la larghezza della più lunga e le modalità
   restano ferme quando la frase cambia */
.frasi { display: grid; align-items: center; }
.frasi > .frase { grid-area: 1 / 1; white-space: nowrap; color: var(--testo-tenue); opacity: 0; visibility: hidden;
  transition: opacity var(--velo) var(--morbido), visibility 0s linear var(--velo); }
.frasi > .frase.viva { opacity: 1; visibility: visible; transition: opacity var(--allarga) var(--morbido), visibility 0s; }
.frase b { font: var(--f-titolo); color: var(--testo); }
.pillola { display: inline-flex; align-items: center; gap: var(--spazio-2); height: var(--campo-alto); padding: 0 var(--spazio-3); border: 0;
  border-radius: var(--raggio-s); background: var(--rialzo); color: var(--testo-tenue); font: var(--f-testo); white-space: nowrap; }
.pillola b { font: var(--f-testo); color: var(--testo); }
.tasto-pieno { height: var(--campo-alto); padding: 0 var(--bordo-pannello); border: 0; border-radius: var(--raggio-s); background: var(--accento);
  color: var(--su-accento); font: var(--f-tasto); white-space: nowrap; }

/* ================================================================ i posti in basso sullo schermo (cautele 1 e 2)
   Le barre stanno appoggiate sopra la tela, che non cambia misura. Ognuna ha il suo posto fisso:
   quello del comando non dipende dall'altezza della barra grande. */
.posto-barra.sullo-schermo { position: absolute; left: 0; right: 0; bottom: var(--barra-basso); margin-inline: auto; }
.posto-barra.sullo-schermo:not(.misurato) { display: flex; justify-content: center; }
.posto-comando.sullo-schermo { position: absolute; left: var(--spazio-3); right: var(--spazio-3); bottom: var(--comando-basso); }

/* ================================================================ la colonnina e il pannello */
.colonnina { display: inline-flex; flex-direction: column; gap: var(--spazio-1); padding: var(--bordo-lastra); }
.pannello { width: var(--pannello); max-width: 100%; padding: var(--bordo-pannello); }
.pannello > .testa { display: flex; align-items: baseline; gap: var(--bordo-lastra); margin-bottom: var(--spazio-2); padding: 0 var(--bordo-lastra); }
.pannello > .testa > .titolo { font: var(--f-titolo-pannello); }
.pannello > .testa > .conto { color: var(--testo-tenue); }
.pannello > .vuoto, .pannello > .corpo > .vuoto { padding: var(--bordo-lastra); }
/* 0.9.2: il corpo del pannello scorre dentro di sé, la testa resta ferma (il pannello ha un'altezza massima dal suo posto) */
.pannello { display: flex; flex-direction: column; }
.pannello > .testa { flex: none; }
.pannello > .corpo { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pannello.entra { animation: entra var(--allarga) var(--morbido); }
@keyframes entra { from { opacity: 0; transform: translateX(calc(-1 * var(--spazio-2))); } to { opacity: 1; transform: none; } }

/* ---- la riga di un Layer. Lo stato lo dicono l'inchiostro e il grigio; la terracotta segna solo il Layer
   corrente, con la spunta che si disegna. */
.righe { display: flex; flex-direction: column; gap: var(--spazio-mezzo); }
.riga-layer { display: flex; align-items: center; gap: var(--spazio-2); height: var(--campo-alto); padding: 0 var(--spazio-1) 0 var(--bordo-lastra); border-radius: var(--raggio-s);
  border: 1px solid transparent; transition: background-color var(--velo) var(--morbido), border-color var(--velo) var(--morbido); }
/* 0.9.2: la riga del Layer corrente ha anche il bordo terracotta di 1 px tutt'intorno (oltre al grassetto e alla spunta) */
.riga-layer.corrente { border-color: var(--accento); }
@media (hover: hover) { .riga-layer:hover { background: var(--rialzo); } }
.striscia { width: var(--spazio-1); height: var(--spazio-4); flex: none; border-radius: var(--spazio-mezzo); background: var(--colore, var(--testo)); }
.riga-layer > .nome { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: var(--spazio-2); padding: 0; border: 0; background: none;
  font: var(--f-testo); color: inherit; text-align: left; transition: color var(--velo) var(--morbido); }
.riga-layer > .nome > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-layer.corrente > .nome { font: var(--f-titolo); }
.riga-layer.nascosto > .nome { color: var(--testo-spento); }
.spunta { width: var(--bordo-pannello); height: var(--bordo-pannello); flex: none; overflow: visible; fill: none; stroke: var(--accento); stroke-width: var(--tratto-icona);
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--posa) var(--morbido); }
.riga-layer.corrente .spunta { stroke-dashoffset: 0; }
.cella.mini { width: var(--cella-mini); height: var(--cella-mini); border-radius: var(--raggio-cella-piccola); }
.cella.mini .icona { width: var(--lato-icona-mini); height: var(--lato-icona-mini); }
.cella.mini.spento { color: var(--testo-spento); }

/* ================================================================ le proprietà: etichetta tenue, campo o segmenti */
.proprieta { width: var(--pannello-proprieta); max-width: 100%; padding: var(--bordo-pannello) var(--bordo-pannello) var(--spazio-4); }
.proprieta > .testa { padding: 0; margin-bottom: var(--spazio-3); }
.griglia-proprieta { display: grid; grid-template-columns: var(--etichetta-larga) minmax(0, 1fr); gap: var(--spazio-2) var(--spazio-3); align-items: center; }
.campo { display: flex; align-items: center; gap: var(--spazio-2); min-width: 0; height: var(--campo-alto); padding: 0 var(--spazio-3); border-radius: var(--raggio-s); background: var(--rialzo); white-space: nowrap; }
.campo > .unita { margin-left: auto; color: var(--testo-tenue); }
.segmento { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: var(--campo-alto); padding: var(--spazio-mezzo); border-radius: var(--raggio-s); background: var(--rialzo); }
.segmento > button { min-width: 0; padding: 0 var(--spazio-3); border: 0; border-radius: var(--raggio-cella-piccola); background: transparent; color: var(--testo-tenue); font: var(--f-testo); white-space: nowrap;
  transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido); }
.segmento > button[aria-pressed="true"] { background: var(--rialzo-forte); color: var(--testo); font: var(--f-tasto); box-shadow: var(--ombra-segmento); }
.segmento > button:disabled { color: var(--testo-spento); cursor: default; }

/* ================================================================ come disegni: Snap, Orto, Annulla, Ripeti, la scala (dalla 0.9.0 il programma
   non la usa: i suoi interruttori stanno nella riga in basso, 29) */
.come { display: inline-flex; align-items: center; gap: var(--spazio-1); padding: var(--bordo-lastra); }
.scala { display: flex; flex-direction: column; align-items: center; gap: var(--spazio-mezzo); padding: 0 var(--spazio-2) 0 var(--spazio-1); font: var(--f-tasto); color: var(--testo); white-space: nowrap; }
.scala > i { display: block; width: var(--lungo, 72px); height: var(--bordo-lastra); border-right: 1px solid currentColor; opacity: .8;
  background: linear-gradient(90deg, currentColor 1px, transparent 1px) 0 0 / var(--spazio-3) 100%, linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* ================================================================ il nome del progetto */
.progetto { display: inline-flex; align-items: center; gap: var(--spazio-1); padding: var(--bordo-lastra) var(--bordo-lastra) var(--bordo-lastra) var(--bordo-pannello); }
.progetto > .scritte { margin-right: var(--spazio-2); min-width: 0; }
.progetto > .scritte > b { display: block; font: var(--f-titolo-pannello); white-space: nowrap; }
.progetto > .scritte > small { display: block; font: var(--f-piccolo); color: var(--testo-tenue); white-space: nowrap; }

/* ================================================================ il bollino delle icone provvisorie [consegna 7]
   Un'icona che l'officina non ha ancora disegnato: il disegno di servizio, col bollino. */
.cella.provvisoria::before { content: ""; position: absolute; top: var(--spazio-mezzo); right: var(--spazio-mezzo); width: var(--bollino); height: var(--bollino);
  border-radius: 50%; background: var(--controllo); pointer-events: none; }

/* ================================================================ 14 · le parole [consegna 7.2, 7.3]
   Le modalità che in AutoCAD sono parole (un'opzione dentro il comando): affiancate, quella attiva sottolineata
   col tratto terracotta. Lo stesso segnale delle icone, un livello sotto il comando. */
.parole { display: flex; align-items: center; gap: var(--spazio-1); }
.parole > .etichetta { font: var(--f-piccolo); margin-right: var(--spazio-1); white-space: nowrap; }
.parola { position: relative; height: var(--cella-modo); padding: 0 var(--spazio-1); border: 0; border-radius: var(--raggio-xs); background: transparent;
  color: var(--testo-tenue); font: var(--f-tasto); white-space: nowrap; transition: color var(--velo) var(--morbido); }
.parola::after { content: ""; position: absolute; left: var(--spazio-1); right: var(--spazio-1); bottom: var(--spazio-mezzo); height: var(--sottolineo);
  border-radius: var(--sottolineo); background: var(--accento); opacity: 0; transition: opacity var(--velo) var(--morbido); }
@media (hover: hover) { .parola:hover { color: var(--testo); } }
.parola[aria-pressed="true"] { color: var(--testo); }
.parola[aria-pressed="true"]::after { opacity: 1; }
.parola:disabled { color: var(--testo-spento); cursor: default; }

/* ================================================================ 15 · il tasto con la parola
   Un'azione dentro la barra del comando o un attrezzo di un plugin: la parola (e, se serve, la sua icona).
   .pieno è il tasto che manda avanti (Termina, Avanti), come Fine; .nudo senza fondo; .presto non risponde. */
.tasto-parola { display: inline-flex; align-items: center; gap: var(--spazio-2); height: var(--campo-alto); padding: 0 var(--spazio-3); border: 0;
  border-radius: var(--raggio-s); background: var(--rialzo); color: var(--testo); font: var(--f-tasto); white-space: nowrap;
  transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido); }
.tasto-parola .icona { width: var(--lato-icona-modo); height: var(--lato-icona-modo); color: var(--icona); }
@media (hover: hover) { .tasto-parola:hover { background: var(--filo); } }
.tasto-parola[aria-pressed="true"] { --tratto: var(--accento); background: var(--rialzo-forte); box-shadow: var(--ombra-segmento); }
.tasto-parola.nudo { background: transparent; color: var(--testo-tenue); }
@media (hover: hover) { .tasto-parola.nudo:hover { background: var(--rialzo); color: var(--testo); } }
.tasto-parola.pieno, .tasto-pieno { display: inline-flex; align-items: center; gap: var(--spazio-2); background: var(--accento); color: var(--su-accento); font: var(--f-tasto); }
@media (hover: hover) { .tasto-parola.pieno:hover { background: var(--accento); } }
.tasto-parola.pieno .icona { color: currentColor; }
.tasto-parola.presto, .tasto-parola:disabled { background: transparent; color: var(--testo-spento); cursor: default; }
.tasto-parola.presto::after { content: "presto"; font: var(--f-piccolo); color: var(--testo-spento); }

/* ================================================================ 16 · i campi: il numero, il nome, la tendina
   Il campo del numero apre il tastierino (mai la tastiera del sistema). Quello che si sta scrivendo ha il bordo
   terracotta. */
.campo-comando { display: inline-flex; align-items: center; gap: var(--spazio-2); font: var(--f-piccolo); color: var(--testo-tenue); white-space: nowrap; }
.campo-num, .campo-testo, .tendina { min-width: var(--campo-largo); height: var(--campo-alto); padding: 0 var(--spazio-3); border: 1px solid transparent;
  border-radius: var(--raggio-s); background: var(--rialzo); color: var(--testo); font: var(--f-numero); text-align: left; white-space: nowrap;
  transition: border-color var(--velo) var(--morbido); }
.campo-testo { width: var(--campo-testo); font: var(--f-testo); }
.tendina { font: var(--f-testo); }
.campo-num.corto { min-width: var(--campo-corto); }
.campo-num.vuoto { color: var(--testo-tenue); }
.campo-num[aria-expanded="true"], .campo-testo:focus { border-color: var(--accento); outline: none; }
.controllo-parola { color: var(--controllo); }

/* ================================================================ 17 · il misuratore
   Quanto torna un lavoro (le misure di un vano, la rete, la prospettiva di una foto): il titolo, il valore, una
   barretta che si riempie, sotto in piccolo cosa fare. Toccandolo si vede il dettaglio. */
.misuratore { display: inline-flex; flex-direction: column; justify-content: center; gap: var(--spazio-mezzo); width: var(--misuratore); height: calc(var(--campo-alto) + var(--spazio-3));
  padding: 0 var(--spazio-3); border: 0; border-radius: var(--raggio-s); background: var(--rialzo); color: var(--testo); text-align: left; font: var(--f-piccolo);
  transition: background-color var(--velo) var(--morbido); }
@media (hover: hover) { .misuratore:hover { background: var(--filo); } }
.misuratore[aria-pressed="true"] { --tratto: var(--accento); background: var(--rialzo-forte); box-shadow: var(--ombra-segmento); }
.misuratore .testa { display: flex; justify-content: space-between; gap: var(--spazio-2); white-space: nowrap; }
.misuratore .testa b { font: var(--f-titolo); }
.misuratore .barretta { display: block; height: var(--barretta); border-radius: var(--barretta); background: var(--lastra); overflow: hidden; }
.misuratore .barretta i { display: block; height: 100%; width: 0; background: var(--testo-tenue); transition: width var(--allarga) var(--morbido); }
.misuratore[data-tono="ok"] .barretta i { background: var(--via); }
.misuratore[data-tono="allarme"] .barretta i { background: var(--allarme); }
.misuratore[data-tono="controllo"] .barretta i { background: var(--controllo); }
.misuratore small { display: block; color: var(--testo-tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.misuratore small.allarme { color: var(--allarme); }
.misuratore small.controllo { color: var(--controllo); }

/* ================================================================ 18 · il menu al cursore
   Si apre dove sei (il tasto destro, il tocco lungo, il misuratore): una lista, la sigla a destra. */
.menu { position: absolute; z-index: 7; display: flex; flex-direction: column; min-width: var(--menu-largo); padding: var(--spazio-1);
  background: var(--lastra); border: 1px solid var(--filo); border-radius: var(--raggio-m); box-shadow: var(--ombra-menu); animation: appare var(--velo) var(--morbido); }
.menu button { display: flex; align-items: center; gap: var(--spazio-2); height: var(--campo-alto); padding: 0 var(--spazio-3); border: 0; border-radius: var(--raggio-s);
  background: transparent; color: var(--testo); font: var(--f-testo); text-align: left; white-space: nowrap; transition: background-color var(--velo) var(--morbido); }
@media (hover: hover) { .menu button:hover { background: var(--rialzo); } }
.menu button:disabled { color: var(--testo-spento); cursor: default; }
.menu button kbd { margin-left: auto; padding-left: var(--spazio-3); font: var(--f-sigla); color: var(--testo-tenue); }
.menu button[role="menuitemradio"]::before { content: ""; width: var(--bollino); height: var(--bollino); border-radius: 50%; flex: none; }
.menu button[aria-checked="true"] { font: var(--f-titolo); }
.menu button[aria-checked="true"]::before { background: var(--accento); }
.menu h4 { margin: var(--spazio-1) var(--spazio-3) var(--spazio-mezzo); font: var(--f-piccolo); color: var(--testo-tenue); }
.menu hr { margin: var(--spazio-1) 0; border: 0; border-top: 1px solid var(--filo); }
.menu p { max-width: var(--pannello-largo); margin: var(--spazio-1) var(--spazio-3); font: var(--f-testo); color: var(--testo); }

/* ================================================================ 19 · il tastierino
   I numeri si scrivono qui, mai con la tastiera del sistema: accanto a quello che si misura. Tasti alti per il dito. */
.tastierino { position: fixed; z-index: 8; display: flex; flex-direction: column; gap: var(--spazio-2); width: var(--tastierino); padding: var(--spazio-3);
  background: var(--lastra); border: 1px solid var(--filo); border-radius: var(--raggio-m); box-shadow: var(--ombra-menu);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; animation: appare var(--allarga) var(--morbido); }
.tastierino.largo { left: var(--spazio-2); right: var(--spazio-2); bottom: var(--spazio-2); top: auto; width: auto; }
.tastierino header { display: flex; justify-content: space-between; align-items: center; gap: var(--spazio-2); min-height: var(--cella-modo); font: var(--f-piccolo); color: var(--testo-tenue); }
.tastierino header .titolo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tastierino .segmento { height: var(--cella-modo); }
.tastierino .segmento > button { padding: 0 var(--spazio-2); font: var(--f-sigla); }
.tastierino .schermo { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: calc(var(--tasto-alto) + var(--spazio-1));
  padding: var(--spazio-1) var(--spazio-3); border-radius: var(--raggio-s); background: var(--rialzo); }
.tastierino .schermo b { font: var(--f-schermo); color: var(--testo); }
.tastierino .schermo b.vuoto { color: var(--testo-tenue); }
.tastierino .schermo small { min-height: var(--spazio-4); font: var(--f-piccolo); color: var(--testo-tenue); }
.tastierino .schermo.errore { animation: scuoti var(--allarga) var(--morbido); }
.tastierino .tasti { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spazio-1); }
.tastierino .tasto { display: flex; align-items: center; justify-content: center; gap: var(--spazio-1); height: var(--tasto-alto); border: 0; border-radius: var(--raggio-s);
  background: var(--rialzo); color: var(--testo); font: var(--f-tasto-numero); transition: background-color var(--velo) var(--morbido); }
@media (hover: hover) { .tastierino .tasto:hover { background: var(--filo); } }
.tastierino .tasto:active { background: var(--filo); }
.tastierino .tasto.lieve { background: transparent; color: var(--testo-tenue); }
.tastierino .tasto.ok { background: var(--accento); color: var(--su-accento); font: var(--f-tasto); }
.tastierino .tasto .icona { width: var(--lato-icona-modo); height: var(--lato-icona-modo); }
@keyframes scuoti { 0%, 100% { transform: none; } 25% { transform: translateX(calc(-1 * var(--spazio-1))); } 75% { transform: translateX(var(--spazio-1)); } }

/* ================================================================ 20 · l'avviso
   Una riga che dice cosa è successo, sopra la barra del comando, e se ne va da sola. */
.avviso { position: absolute; z-index: 8; left: var(--spazio-3); right: var(--spazio-3); bottom: calc(var(--comando-basso) + var(--campo-alto) + var(--spazio-6));
  width: fit-content; max-width: calc(100% - 2 * var(--spazio-3)); margin-inline: auto; padding: var(--spazio-2) var(--spazio-4); border-radius: var(--raggio-m);
  background: var(--suggerimento); color: var(--su-suggerimento); font: var(--f-testo); box-shadow: var(--ombra-menu);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; opacity: 0; transition: opacity var(--allarga) var(--morbido); }
.avviso.vivo { opacity: 1; }

/* ================================================================ 21 · la porta
   L'ingresso: si crea un progetto, punto. Poi riprendi l'ultimo lavoro o apri un file. */
.porta { position: absolute; inset: 0; z-index: 10; display: grid; place-items: center; background: var(--fondo-porta); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.porta .carta { display: flex; flex-direction: column; gap: var(--spazio-4); width: min(var(--porta), calc(100% - 2 * var(--spazio-4))); padding: var(--spazio-6); }
.porta h1 { margin: 0; font: var(--f-pagina); color: var(--testo); }
.porta h1 small { display: block; font: var(--f-testo); color: var(--testo-tenue); }
.porta p { margin: 0; font: var(--f-testo); color: var(--testo-tenue); }
.porta .vie { display: flex; flex-wrap: wrap; gap: var(--spazio-2); }
.porta .vie .tasto-pieno { height: var(--tasto-alto); padding: 0 var(--spazio-6); border: 0; border-radius: var(--raggio-s); }
.porta .vie .tasto-parola { height: var(--tasto-alto); }
.porta .piede { font: var(--f-piccolo); color: var(--testo-tenue); }

/* ================================================================ 22 · le righe dei pannelli del programma
   La voce di un pannello (icona, nome, sigla), la sezione, la scelta con la spunta, l'albero dei Layer. */
.pannello.largo { width: var(--pannello-largo); }
.pannello h3 { margin: var(--spazio-3) 0 var(--spazio-1); padding: 0 var(--bordo-lastra); font: var(--f-piccolo); color: var(--testo-tenue); }
.pannello > p, .pannello > .corpo > p, .pannello .nota { margin: 0 0 var(--spazio-2); padding: 0 var(--bordo-lastra); font: var(--f-piccolo); color: var(--testo-tenue); }
.pannello > .testa .chiudi { margin-left: auto; }
.voce { display: flex; align-items: center; gap: var(--spazio-2); width: 100%; height: var(--campo-alto); padding: 0 var(--bordo-lastra); border: 0; border-radius: var(--raggio-s);
  background: transparent; color: var(--testo); font: var(--f-testo); text-align: left; white-space: nowrap; transition: background-color var(--velo) var(--morbido); }
.voce .icona { width: var(--lato-icona-modo); height: var(--lato-icona-modo); color: var(--icona); }
@media (hover: hover) { .voce:hover { background: var(--rialzo); } }
.voce kbd, .spuntina kbd { margin-left: auto; font: var(--f-sigla); color: var(--testo-tenue); }
.voce[aria-pressed="true"] { --tratto: var(--accento); background: var(--rialzo); }
.voce.presto, .voce:disabled { color: var(--testo-spento); cursor: default; }
.voce.presto::after { content: "presto"; margin-left: auto; font: var(--f-piccolo); }
.righe-campi { display: grid; grid-template-columns: var(--etichetta-larga) minmax(0, 1fr); gap: var(--spazio-2) var(--spazio-3); align-items: center; padding: 0 var(--bordo-lastra); }
.righe-campi > .etichetta { font: var(--f-piccolo); }
.righe-campi > .riga-campo { display: flex; align-items: center; gap: var(--spazio-2); min-width: 0; }
/* la scelta con la spunta: uno Snap, un interruttore. Accesa ha la spunta terracotta. */
.spuntina { display: flex; align-items: center; gap: var(--spazio-2); width: 100%; min-height: var(--campo-alto); padding: 0 var(--bordo-lastra); border: 0; border-radius: var(--raggio-s);
  background: transparent; color: var(--testo); font: var(--f-testo); text-align: left; transition: background-color var(--velo) var(--morbido); }
@media (hover: hover) { .spuntina:hover { background: var(--rialzo); } }
.spuntina small { color: var(--testo-tenue); font: var(--f-piccolo); }
.spuntina .spunta { stroke: var(--testo-spento); stroke-dashoffset: 0; }
.spuntina .casella { width: var(--bordo-pannello); height: var(--bordo-pannello); flex: none; border: 1px solid var(--testo-spento); border-radius: var(--raggio-xs); display: grid; place-items: center; }
.spuntina .casella .spunta { stroke: var(--accento); stroke-dashoffset: 1; }
.spuntina[aria-pressed="true"] .casella { border-color: var(--accento); }
.spuntina[aria-pressed="true"] .casella .spunta { stroke-dashoffset: 0; }
.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spazio-mezzo); }
/* l'albero dei Layer: «Vani», i gruppi, un sottolivello per vano; la freccina chiude e apre */
.albero { display: flex; flex-direction: column; gap: var(--spazio-mezzo); }
.riga-layer[data-livello="1"] { padding-left: calc(var(--bordo-lastra) + var(--rientro)); }
.riga-layer[data-livello="2"] { padding-left: calc(var(--bordo-lastra) + 2 * var(--rientro)); }
.riga-layer[data-livello="3"] { padding-left: calc(var(--bordo-lastra) + 3 * var(--rientro)); }
.riga-layer[data-livello="4"] { padding-left: calc(var(--bordo-lastra) + 4 * var(--rientro)); }
.riga-layer[aria-current="true"] .nome-layer { font: var(--f-titolo); }
.riga-layer[data-spento="true"] .nome-layer { color: var(--testo-spento); }
.riga-layer .nome-layer { flex: 1; min-width: 0; height: var(--cella-mini); padding: 0 var(--spazio-1); border: 1px solid transparent; border-radius: var(--raggio-xs);
  background: transparent; color: inherit; font: var(--f-testo); }
.riga-layer .nome-layer:focus { border-color: var(--accento); background: var(--lastra); outline: none; }
.riga-layer .conta { min-width: var(--spazio-6); text-align: right; font: var(--f-sigla); color: var(--testo-tenue); }
.riga-layer .apri .icona { transition: transform var(--allarga) var(--morbido); transform: rotate(90deg); }
.riga-layer .apri[aria-expanded="false"] .icona { transform: none; }
.riga-layer .apri.vuoto { visibility: hidden; }
/* il colore del Layer: il quadratino pieno (decisione 13.2 dell'officina: il colore non è un'icona) */
.riga-layer input[type="color"] { width: var(--bordo-pannello); height: var(--bordo-pannello); flex: none; padding: 0; border: 0; border-radius: var(--raggio-xs); background: transparent; cursor: pointer; }
.riga-layer input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.riga-layer input[type="color"]::-webkit-color-swatch { border: 0; border-radius: var(--raggio-xs); }
.riga-layer input[type="color"]::-moz-color-swatch { border: 0; border-radius: var(--raggio-xs); }
.pannello .piede { display: flex; flex-wrap: wrap; gap: var(--spazio-1); margin-top: var(--spazio-2); }
.pannello .versione { margin-top: var(--spazio-3); padding: 0 var(--bordo-lastra); font: var(--f-sigla); color: var(--testo-tenue); }
/* le foto del progetto, nella fascia del plugin Foto */
.striscia-foto { display: inline-flex; gap: var(--spazio-1); max-width: min(420px, 56vw); overflow-x: auto; scrollbar-width: none; }
.striscia-foto:empty { display: none; }
.miniatura { flex: none; width: calc(var(--campo-alto) * 1.6); height: var(--campo-alto); padding: 0; overflow: hidden; display: grid; place-items: center;
  border: 1px solid var(--filo); border-radius: var(--raggio-xs); background: var(--rialzo); color: var(--testo-tenue); transition: border-color var(--velo) var(--morbido); }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura[aria-current="true"] { border-color: var(--accento); }

/* ================================================================ 24 · il disto (0.6.3, spia leggibile dalla 0.6.4)
   Il tasto del distanziometro in «come disegni»: la cella con la spia dello stato (data-stato sulla cella), acceso
   (solo il tratto) quando lo strumento è collegato. Il suo menu sta sopra il tasto, col pezzo del menu (18).
   Nel tastierino, con lo strumento collegato, il tastino «Misura» prende una riga intera.
   0.6.4 (Enrico, 10/10: «i colori sono poco visibili»): un segnale solo. Il tasto Disto non porta il bollino delle
   provvisorie (l'icona resta da fare: promemoria nell'officina); la spia sta in alto a destra, grande, col bordo della
   lastra; quando lo strumento risponde tutto il tasto prende l'anello del suo colore; col laser acceso la spia lampeggia. */
.cella > .spia { position: absolute; top: var(--spazio-mezzo); right: var(--spazio-mezzo); width: var(--spia); height: var(--spia); border-radius: 50%;
  box-shadow: 0 0 0 var(--anello-spia) var(--lastra); background: var(--testo-spento); pointer-events: none; transition: background-color var(--velo) var(--morbido); }
.cella[data-stato="assente"] > .spia, .cella[data-stato="bloccato"] > .spia { display: none; }
.cella[data-stato="cerco"] > .spia, .cella[data-stato="collego"] > .spia, .cella[data-stato="scollegato"] > .spia { background: var(--controllo); }
.cella[data-stato="collegato"] > .spia { background: var(--via); }
.cella[data-stato="laser"] > .spia { background: var(--allarme); animation: lampeggia var(--respiro) ease-in-out infinite alternate; }   /* col passo del respiro: niente durata nuova */
.cella[data-stato="scollegato"] { box-shadow: inset 0 0 0 var(--anello-spia) var(--controllo); }
.cella[data-stato="collegato"] { box-shadow: inset 0 0 0 var(--anello-spia) var(--via); }
.cella[data-stato="laser"] { box-shadow: inset 0 0 0 var(--anello-spia) var(--allarme); }
@keyframes lampeggia { from { opacity: 1; } to { opacity: var(--respiro-fondo); } }
@media (prefers-reduced-motion: reduce) { .cella[data-stato="laser"] > .spia { animation: none; } }
.tastierino .tasto.disto { grid-column: 1 / -1; font: var(--f-tasto); color: var(--accento-testo); }

/* ================================================================ 25 · il risultato della Misura (passo 0 di Annota e Stampa, 10/10)
   Vicino al cursore, sulla tela: il programma lo mette con left e top in px dentro la zona della tela.
   <button class="risultato-misura"> con <b> la distanza, poi una o più <small> (ΔX, ΔY, angolo; nel Percorso tratto e totale).
   Un tocco porta il numero nel campo aperto: per questo, sopra, prende il bordo terracotta come il campo che si scrive.
   Senza un campo aperto (aria-disabled="true") resta leggibile ma non invita al tocco. Niente frecce. */
.risultato-misura { position: absolute; z-index: 6; display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--spazio-mezzo);
  padding: var(--spazio-2) var(--spazio-3); border: 1px solid var(--filo); border-radius: var(--raggio-s); background: var(--lastra); color: var(--testo);
  box-shadow: var(--ombra-lastra); text-align: left; white-space: nowrap; pointer-events: auto; animation: appare var(--velo) var(--morbido);
  transition: background-color var(--velo) var(--morbido), border-color var(--velo) var(--morbido); }
.risultato-misura > b { font: var(--f-misura); font-variant-numeric: tabular-nums; color: var(--testo); }
.risultato-misura > small { display: block; font: var(--f-numero-piccolo); font-variant-numeric: tabular-nums; color: var(--testo-tenue); }
/* nel Percorso l'ultima riga è il totale: si legge come il valore */
.risultato-misura[data-modo="percorso"] > small:last-of-type { color: var(--testo); }
@media (hover: hover) { .risultato-misura:hover { background: var(--rialzo); border-color: var(--accento); } }
.risultato-misura:focus-visible { border-color: var(--accento); }
.risultato-misura[aria-disabled="true"] { cursor: default; }
@media (hover: hover) { .risultato-misura[aria-disabled="true"]:hover { background: var(--lastra); border-color: var(--filo); } }

/* ================================================================ 26 · l'anteprima di stampa (passo 0 di Annota e Stampa, 10/10)
   Una stanza a tutto schermo sopra il programma: in alto la barra dell'anteprima, sotto il vetro grigio col foglio.
   z-index 7: sopra le barre (4 e 5), sotto il tastierino e l'avviso (8), che servono anche qui.
   Il foglio è carta: resta bianco anche in scuro, con l'inchiostro scuro (--foglio, --su-foglio). */
.anteprima { position: fixed; inset: 0; z-index: 7; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--carta); color: var(--testo);
  animation: appare var(--allarga) var(--morbido); }
.anteprima-barra { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-1) var(--spazio-2);
  padding: var(--bordo-lastra) var(--spazio-3); background: var(--lastra); border-bottom: 1px solid var(--filo); box-shadow: var(--ombra-segmento); }
/* un gruppo della barra: l'etichetta e le sue scelte; tra un gruppo e l'altro lo .stacco */
.anteprima-gruppo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-1) var(--spazio-2); min-width: 0; }
.anteprima-gruppo > .etichetta { font: var(--f-piccolo); white-space: nowrap; }
.anteprima-barra > .stacco { margin: var(--spazio-1) var(--spazio-mezzo); }
/* Chiudi va per ultimo nella barra: sta in fondo a destra */
.anteprima-chiudi { margin-left: auto; }
.anteprima-vetro { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; background: var(--vetro);
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.anteprima-vetro:active, .anteprima-vetro.sposta { cursor: grabbing; }
.anteprima-foglio { position: relative; flex: none; background: var(--foglio); color: var(--su-foglio); box-shadow: var(--ombra-foglio); color-scheme: light; }
.anteprima-foglio > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.anteprima-foglio .tenue { color: var(--su-foglio-tenue); }
/* il pannellino che si apre da un tasto della barra (Cosa si stampa): il pezzo del menu (18), appeso sotto il suo tasto */
.con-tendina { position: relative; display: inline-flex; }
.con-tendina > .menu { top: calc(100% + var(--spazio-1)); left: 0; }
.tasto-parola[aria-expanded="true"] { --tratto: var(--accento); background: var(--rialzo-forte); box-shadow: var(--ombra-segmento); }

/* ================================================================ 27 · la fila delle scale (passo 0 di Annota e Stampa, 10/10)
   <div class="fila-scale"> con <button aria-pressed> «1:50», «1:100»… in ordine. La premuta come nel segmento.
   .utente: la scala aggiunta dall'utente, nel suo colore (--scala-utente), con <i class="togli">×</i> per toglierla.
   .piu: il «+»; cliccato diventa il campo piccolo (.piu input) dove si scrive il denominatore: «1:» lo mette il pezzo. */
.fila-scale { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-mezzo); max-width: 100%; padding: var(--spazio-mezzo);
  border-radius: var(--raggio-s); background: var(--rialzo); }
.fila-scale > button, .fila-scale > .piu { display: inline-flex; align-items: center; gap: var(--spazio-1); height: calc(var(--campo-alto) - 2 * var(--spazio-mezzo));
  padding: 0 var(--spazio-2); border: 0; border-radius: var(--raggio-cella-piccola); background: transparent; color: var(--testo-tenue);
  font: var(--f-numero); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido); }
@media (hover: hover) { .fila-scale > button:hover { color: var(--testo); } }
.fila-scale > button[aria-pressed="true"] { background: var(--rialzo-forte); color: var(--testo); box-shadow: var(--ombra-segmento); }
.fila-scale > button.utente { color: var(--scala-utente); }
.fila-scale > button:disabled { color: var(--testo-spento); cursor: default; }
.fila-scale .togli { display: inline-grid; place-items: center; width: var(--spazio-4); height: var(--spazio-4); margin-right: calc(-1 * var(--spazio-1));
  border-radius: var(--raggio-xs); font: var(--f-piccolo); font-style: normal; color: var(--testo-tenue); cursor: pointer;
  transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido); }
@media (hover: hover) { .fila-scale .togli:hover { background: var(--filo); color: var(--testo); } }
.fila-scale > .piu:has(input) { gap: var(--spazio-mezzo); padding-right: var(--spazio-mezzo); color: var(--testo); }
.fila-scale > .piu:has(input)::before { content: "1:"; }
.fila-scale .piu input { width: var(--campo-scala); height: calc(var(--campo-alto) - 4 * var(--spazio-mezzo)); padding: 0 var(--spazio-1); border: 1px solid var(--accento);
  border-radius: var(--raggio-xs); background: var(--lastra); color: var(--testo); font: var(--f-numero); font-variant-numeric: tabular-nums; text-align: right;
  outline: none; -moz-appearance: textfield; appearance: textfield; }
.fila-scale .piu input::-webkit-inner-spin-button, .fila-scale .piu input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* ================================================================ 28 · gli interruttori di cosa si stampa (passo 0 di Annota e Stampa, 10/10)
   <div class="interruttori"> con righe <label><input type="checkbox" role="switch"><span>Diagonali</span></label>.
   Acceso, l'interruttore è terracotta (la terracotta dice lo stato). Sta da solo o dentro il menu (.menu.interruttori)
   che si apre dalla barra dell'anteprima (.con-tendina). */
.interruttori { display: flex; flex-direction: column; gap: var(--spazio-mezzo); min-width: var(--interruttori); }
.interruttori > h4 { margin: var(--spazio-1) var(--spazio-3) var(--spazio-mezzo); font: var(--f-piccolo); color: var(--testo-tenue); }
.interruttori > label { display: flex; align-items: center; gap: var(--spazio-2); min-height: var(--campo-alto); padding: 0 var(--spazio-3) 0 var(--spazio-2);
  border-radius: var(--raggio-s); color: var(--testo); font: var(--f-testo); white-space: nowrap; cursor: pointer; transition: background-color var(--velo) var(--morbido); }
@media (hover: hover) { .interruttori > label:hover { background: var(--rialzo); } }
.interruttori > label > small { margin-left: auto; padding-left: var(--spazio-3); font: var(--f-piccolo); color: var(--testo-tenue); }
/* la manopola è un tondo disegnato nel fondo (va in tutti i browser, anche dove un input non ha ::before) */
.interruttori input[role="switch"] { flex: none; width: var(--interruttore-largo); height: var(--interruttore-alto); margin: 0; border: 0;
  border-radius: var(--interruttore-alto); -webkit-appearance: none; appearance: none; cursor: pointer;
  background-color: var(--testo-spento); background-repeat: no-repeat; background-size: var(--interruttore-alto) var(--interruttore-alto); background-position: left center;
  background-image: radial-gradient(circle, var(--lastra) calc(var(--manopola) / 2), transparent calc(var(--manopola) / 2 + 1px));
  transition: background-color var(--velo) var(--morbido), background-position var(--velo) var(--morbido); }
.interruttori input[role="switch"]:checked { background-color: var(--accento); background-position: right center; }
.interruttori input[role="switch"]:focus-visible { outline: 2px solid var(--selezione); outline-offset: 2px; }
.interruttori > label:has(input:disabled) { color: var(--testo-spento); cursor: default; }
.interruttori input[role="switch"]:disabled { opacity: .5; cursor: default; }

/* ================================================================ 23 · i posti del programma (cautele 1 e 2)
   La tela prende tutto lo schermo e non cambia misura; i pezzi ci stanno appoggiati sopra, ognuno al suo posto:
   in alto a sinistra il nome del progetto, sotto la colonnina; in basso al centro la barra grande e sopra la barra
   del comando; in fondo, a tutta larghezza, la riga (29); a destra, a metà altezza, la zona della vista (30). I plugin
   accesi stanno in alto al centro. Dalla 0.9.0 «come disegni» in basso a destra non c'è più: è nella riga. */
.programma { position: relative; height: 100%; overflow: hidden; background: var(--carta); }
html:has(.programma), body:has(.programma) { height: 100%; overflow: hidden; }
.programma > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: default;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.programma > canvas.disegna { cursor: crosshair; }
.programma > canvas.prendi { cursor: move; }
.programma > canvas.foto { cursor: grab; }
.programma > canvas.sposta, .programma > canvas.foto.sposta { cursor: grabbing; }
/* 0.9.4 (pezzo 34): il mirino è disegnato sulla tela; col mouse il puntatore del sistema sparisce (resta mentre si sposta la vista) */
.programma > canvas.mirino:not(.sposta) { cursor: none; }
/* 0.9.2 (SOLUZIONI, Interfaccia 6, anche in altezza): il posto in alto a sinistra finisce sopra la barra del comando
   (--pannelli-basso), così il pannello aperto non va sotto le lastre di sotto; il pannello è alto al massimo quanto il suo
   posto e scorre dentro di sé, con la testa ferma */
.posto-alto-sinistra { position: absolute; z-index: 4; top: var(--spazio-3); left: var(--spazio-3); bottom: var(--pannelli-basso); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spazio-2); pointer-events: none; }
.posto-alto-sinistra > * { pointer-events: auto; }
.posto-alto-sinistra .sotto { flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-start; gap: var(--spazio-2); pointer-events: none; }
.posto-alto-sinistra .sotto > * { pointer-events: auto; }
.posto-alto-sinistra .pannello { max-height: 100%; overflow: hidden; }
/* la scheda del nome (0.9.2): solo il nome, che si cambia sul posto; il campo ha la stessa misura e lo stesso carattere */
.posto-alto-sinistra .progetto { min-height: calc(var(--cella-larga) + 2 * var(--bordo-lastra)); padding: var(--bordo-lastra) var(--bordo-pannello); }
.posto-alto-sinistra .progetto > .scritte { margin-right: 0; }
.posto-alto-sinistra .progetto .scritte b[role="button"] { cursor: text; }
.nome-campo { display: block; height: var(--nome-campo-alto); max-width: var(--pannello-largo); margin: 0; padding: 0 var(--spazio-1); border: 1px solid var(--accento); border-radius: var(--raggio-xs);
  background: var(--lastra); color: var(--testo); font: var(--f-titolo-pannello); outline: none; field-sizing: content; }
/* il pallino col colore del Layer attivo sul tasto Layer della colonnina, in basso a destra (0.9.2) */
.cella > .pallino { position: absolute; right: var(--spazio-1); bottom: var(--spazio-1); width: var(--pallino); height: var(--pallino); border-radius: 50%;
  background: var(--colore, var(--testo)); box-shadow: 0 0 0 var(--pallino-bordo) var(--lastra); pointer-events: none; transition: background-color var(--velo) var(--morbido); }
/* le Opzioni (0.9.2): i sette gruppi uno sotto l'altro coi titoli; quelli non ancora costruiti dicono «presto» */
.gruppo-opzioni > h3 { font: var(--f-titolo); color: var(--testo); }
.gruppo-opzioni > .presto-parola { margin: 0; padding: 0 var(--bordo-lastra); }
/* 34 · le Opzioni, i sette gruppi (0.9.4): righe con l'etichetta e la scelta (segmento, numero col tastierino, spuntina, colore),
   la nota in piccolo, l'anteprima della croce, le copie di sicurezza, i tasti che chiedono conferma col secondo tocco */
.gruppo-opzioni { padding-bottom: var(--spazio-2); border-bottom: 1px solid var(--filo); }
.gruppo-opzioni:last-child { border-bottom: 0; }
.gruppo-opzioni > .righe-campi { margin-bottom: var(--spazio-2); }
.gruppo-opzioni > h3.sotto { font: var(--f-piccolo); color: var(--testo-tenue); }
.gruppo-opzioni .riga-campo > .segmento { flex: 1 1 auto; min-width: 0; }
.gruppo-opzioni .segmento > button { padding: 0 var(--spazio-2); }
.gruppo-opzioni .riga-campo > .campo-num { min-width: var(--campo-corto); flex: none; }
.gruppo-opzioni .spuntina { padding: 0 var(--bordo-lastra); }
.gruppo-opzioni .spuntina.presto { color: var(--testo-spento); cursor: default; }
.segmento.campioni, .gruppo-opzioni .riga-campo > .segmento.campioni { flex: none; grid-auto-columns: var(--campo-alto); }
.segmento.campioni > button { display: grid; place-items: center; padding: 0; }
.campione { width: var(--campione); height: var(--campione); border-radius: var(--raggio-xs); background: var(--colore); box-shadow: inset 0 0 0 1px var(--filo); }
.gruppo-opzioni input[type="color"][aria-pressed="true"] { border-color: var(--accento); box-shadow: var(--ombra-segmento); }
.gruppo-opzioni input[type="color"] { width: var(--campo-alto); height: var(--campo-alto); flex: none; padding: 0; border: 1px solid var(--filo); border-radius: var(--raggio-xs); background: transparent; cursor: pointer; }
.gruppo-opzioni > .nota { margin: 0 0 var(--spazio-2); }
.mirino-prova { position: relative; flex: none; width: var(--mirino-prova); height: var(--mirino-prova); overflow: hidden; border: 1px solid var(--filo); border-radius: var(--raggio-xs); background: var(--carta); }
.mirino-prova::before, .mirino-prova::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--tinta, var(--inchiostro)); transform: translate(-50%, -50%); }
.mirino-prova::before { width: var(--croce); height: 1px; }
.mirino-prova::after { width: 1px; height: var(--croce); }
.mirino-prova > .mirino-quadratino { position: absolute; left: 50%; top: 50%; width: var(--lato); height: var(--lato); border: 1px solid var(--tinta, var(--inchiostro)); background: var(--carta); transform: translate(-50%, -50%); z-index: 1; }
.gruppo-opzioni .copie { display: flex; flex-direction: column; gap: var(--spazio-mezzo); }
.gruppo-opzioni .copie > .voce small { margin-left: auto; color: var(--testo-tenue); font: var(--f-piccolo); }
.gruppo-opzioni .tasti { display: flex; flex-wrap: wrap; gap: var(--spazio-1); padding: 0 var(--bordo-lastra); margin-bottom: var(--spazio-2); }
.gruppo-opzioni .conferma { --tratto: var(--accento); background: var(--accento); color: var(--su-accento); }
.posto-alto-destra { position: absolute; z-index: 4; top: var(--spazio-3); right: var(--spazio-3); pointer-events: none; }
.posto-alto-destra > * { pointer-events: auto; }
.posto-alto-destra .pannello { max-height: calc(100vh - 2 * var(--comando-basso)); overflow: auto; }
.posto-plugin { position: absolute; z-index: 3; top: var(--spazio-3); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: var(--spazio-2); pointer-events: none; }
.posto-plugin > * { pointer-events: auto; max-width: calc(100% - 2 * var(--spazio-3)); }
.posto-plugin > :empty { display: none; }
.plugin-righe { display: flex; gap: var(--spazio-1); padding: var(--spazio-1) var(--bordo-lastra); }
.attrezzi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--spazio-1); padding: var(--bordo-lastra); }
.posto-barra.sullo-schermo { z-index: 4; }
.posto-comando.sullo-schermo { z-index: 5; }
.comando { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.comando > .contenuto { display: contents; }
.comando .tt { display: flex; flex-direction: column; min-width: 0; }
.comando .tt > small { font: var(--f-piccolo); color: var(--testo-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--misuratore); }
.comando .frase-comando { white-space: nowrap; color: var(--testo-tenue); overflow: hidden; text-overflow: ellipsis; max-width: min(52ch, 100%); }
.comando .frase-comando b { font: var(--f-titolo); color: var(--testo); margin-right: var(--spazio-1); }
.comando .frase-comando b:empty { display: none; }
.lente { position: absolute; z-index: 7; width: var(--lente); height: var(--lente); border-radius: 50%; border: 2px solid var(--lastra); box-shadow: var(--ombra-menu); background: var(--carta); pointer-events: none; }
.anello { position: absolute; z-index: 7; width: var(--anello); height: var(--anello); margin: calc(var(--anello) / -2) 0 0 calc(var(--anello) / -2); border-radius: 50%; pointer-events: none; display: none; }
.anello.vivo { display: block; background: conic-gradient(var(--accento) var(--p, 0%), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 15px, var(--testo) 16px); mask: radial-gradient(circle, transparent 15px, var(--testo) 16px); }
.lascia { position: absolute; z-index: 9; inset: var(--spazio-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spazio-2);
  border: 2px dashed var(--accento); border-radius: var(--raggio-m); background: var(--fondo-lascia); color: var(--accento-testo); font: var(--f-titolo-pannello); pointer-events: none; }
.lascia .icona { width: calc(var(--lato-icona) * 1.6); height: calc(var(--lato-icona) * 1.6); }
[hidden] { display: none !important; }
button.scala { border: 0; background: transparent; border-radius: var(--raggio-s); cursor: pointer; transition: background-color var(--velo) var(--morbido); }
@media (hover: hover) { button.scala:hover { background: var(--rialzo); } }
.posto-alto-destra { z-index: 5; }
/* sul telefono (scelta di Claude, da confermare): la barra grande scorre di lato; nella riga le coordinate fanno posto e
   gli interruttori restano solo icone */
@media (max-width: 640px) {
  .posto-barra.sullo-schermo { left: 0; right: 0; width: auto !important; height: auto !important; overflow-x: auto; scrollbar-width: none; padding: 0 var(--spazio-3); text-align: center; }
  .posto-barra.sullo-schermo::-webkit-scrollbar { display: none; }
  .posto-barra.sullo-schermo > .barra { position: relative; text-align: left; }
  .riga .coord-riga, .riga .coord-riga + .sep { display: none; }
  .riga .int > span { display: none; }
}

/* ================================================================ 29 · la riga in basso (0.9.0, 10/10)
   A tutta larghezza in fondo allo schermo, come la barra di stato e la riga di comando di AutoCAD: «gli utenti sono abituati
   a guardare in basso». 28 px col mouse, 36 sul tablet (--riga-alta; dalla 0.9.1, prima 24 e 32). La lastra col filo sopra. In fila: la riga di comando
   (la sigla del comando in terracotta, la domanda, le opzioni tra quadre con la lettera da scrivere in terracotta, quello
   che si scrive), le coordinate, gli interruttori (Snap, Orto, Griglia, Disto, Quote: piccoli, icona e nome; sul tablet
   solo l'icona e il nome nella targhetta), la scala col righello. La riga si scrive con la tastiera del computer, mai con
   quella di sistema: non è un campo.
   0.9.1, «niente si sposta mentre si lavora» (SOLUZIONI, Interfaccia 1): le coordinate e la scala hanno larghezza fissa,
   misurata sul valore più lungo, con le cifre tutte larghe uguali; il righello si disegna dentro la sua cella; la spia del
   Disto tiene il suo posto anche spenta; la riga di comando prende lo spazio che resta (flex-basis 0), così una domanda
   lunga non spinge niente. Il segnaposto («scrivi un comando») è un ::before: non è testo vero, e sparisce quando si entra. */
.riga { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: var(--riga-alta); display: flex; align-items: center; gap: var(--spazio-2);
  padding: 0 var(--spazio-3); background: var(--lastra); color: var(--testo); border-top: 1px solid var(--filo); font: var(--f-piccolo); white-space: nowrap; }
.riga .sep { width: 1px; height: 60%; flex: none; background: var(--filo); }
.riga-comando { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: center; gap: var(--spazio-1); overflow: hidden; cursor: text; }
.riga-comando > .sigla { flex: none; font: var(--f-sigla); color: var(--accento-testo); }
.riga-comando > .domanda { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--spazio-1); }
/* se la domanda non ci sta, si accorcia la frase e restano intere le opzioni: sono quelle che si toccano */
.riga-comando > .domanda > .testo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.riga-comando > .domanda > .dopo { flex: none; margin-left: calc(-1 * var(--spazio-1)); }
.riga-comando > .domanda > .opz { flex: none; display: inline-flex; align-items: center; color: var(--testo-tenue); }
.riga-comando .opz > button { height: var(--riga-tasto); padding: 0 var(--spazio-1); border: 0; border-radius: var(--raggio-xs); background: transparent; color: var(--testo);
  font: var(--f-piccolo); white-space: nowrap; transition: background-color var(--velo) var(--morbido); }
@media (hover: hover) { .riga-comando .opz > button:hover { background: var(--rialzo); } }
.riga-comando .opz > button u { text-decoration: none; color: var(--accento-testo); font: var(--f-lettera); }
.riga-comando .opz > button[aria-pressed="true"] { box-shadow: inset 0 calc(-1 * var(--sottolineo)) 0 var(--accento); }
.riga-comando .opz > button.presto, .riga-comando .opz > button.presto u { color: var(--testo-spento); }
.riga-comando > .scritto { flex: none; font: var(--f-sigla); color: var(--testo); }
.riga-comando > .scritto:empty::before { content: attr(data-vuoto); color: var(--testo-spento); font: var(--f-piccolo); }
.riga-comando > .scritto[data-vuoto=""]:empty::before { content: none; }
.riga-comando > .cursore-riga { flex: none; width: 1px; height: 60%; background: var(--accento); animation: lampeggia var(--respiro) steps(2, jump-none) infinite; }
/* la spiegazione lunga del passo (la targhetta e chi legge con la sintesi vocale): non sta nella riga */
.riga-comando > .spiegazione { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.riga .coord-riga { flex: none; width: var(--riga-coord); overflow: hidden; text-overflow: clip; font: var(--f-numero-piccolo); font-variant-numeric: tabular-nums; color: var(--testo-tenue); }
/* in metri e in Est e Nord i numeri sono più lunghi: la cella è più larga, ma fissa (cambia solo se cambia l'unità) */
.riga .coord-riga[data-formato="lungo"] { width: var(--riga-coord-lunga); }
.riga .interruttori-riga { position: relative; flex: none; display: flex; align-items: center; gap: var(--spazio-mezzo); }
.int { position: relative; display: inline-flex; align-items: center; gap: var(--spazio-1); height: var(--riga-tasto); padding: 0 var(--spazio-1); border: 0;
  border-radius: var(--raggio-cella-piccola); background: transparent; color: var(--testo-tenue); font: var(--f-piccolo); white-space: nowrap;
  transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido); }
.int .icona { width: var(--lato-icona-mini); height: var(--lato-icona-mini); }
@media (hover: hover) { .int:hover { background: var(--rialzo); } }
.int.acceso { --tratto: var(--accento); color: var(--testo); background: var(--rialzo); }
.int[data-n]::after { content: attr(data-n); position: absolute; z-index: 9; right: 0; bottom: calc(100% + var(--spazio-2)); padding: var(--spazio-1) var(--spazio-2);
  border-radius: var(--raggio-xs); background: var(--suggerimento); color: var(--su-suggerimento); font: var(--f-suggerimento); white-space: nowrap; box-shadow: var(--ombra-menu);
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--velo) var(--morbido), visibility 0s linear var(--velo); }
@media (hover: hover) { .int[data-n]:hover::after { opacity: 1; visibility: visible; transition: opacity var(--velo) var(--morbido) var(--attesa), visibility 0s linear var(--attesa); } }
.int[data-n]:focus-visible::after { opacity: 1; visibility: visible; }
/* il Disto nella riga: la spia accanto al nome, coi colori dello stato (come la cella, 24) */
.int > .spia { position: static; order: 3; width: calc(var(--spia) - 3px); height: calc(var(--spia) - 3px); border-radius: 50%; background: var(--testo-spento); flex: none; }
.int[data-stato="assente"] > .spia, .int[data-stato="bloccato"] > .spia { visibility: hidden; }   /* tiene il posto: niente si sposta */
.int[data-stato="cerco"] > .spia, .int[data-stato="collego"] > .spia, .int[data-stato="scollegato"] > .spia { background: var(--controllo); }
.int[data-stato="collegato"] > .spia { background: var(--via); }
.int[data-stato="laser"] > .spia { background: var(--allarme); animation: lampeggia var(--respiro) ease-in-out infinite alternate; }
.riga .scala { flex: none; flex-direction: row; gap: var(--spazio-2); height: var(--riga-tasto); padding: 0 var(--spazio-1); font: var(--f-numero-piccolo); font-variant-numeric: tabular-nums; }
.riga .scala > span { width: var(--riga-scala-testo); overflow: hidden; text-align: right; }
/* il righello: la sua cella è larga quanto il righello più lungo; il righello vero (--lungo) si disegna dentro, da sinistra */
.riga .scala > i { position: relative; width: var(--riga-righello); border: 0; background: none; opacity: 1; }
.riga .scala > i::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--lungo, 48px); border-right: 1px solid currentColor; opacity: .8;
  background: linear-gradient(90deg, currentColor 1px, transparent 1px) 0 0 / var(--spazio-3) 100%, linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.riga .scala > i[hidden] { display: block !important; visibility: hidden; }   /* sulla foto il righello non c'è, ma la cella resta */
/* sul tablet: gli interruttori solo con l'icona, il nome nella targhetta. Dalla 0.9.1 anche col mouse sotto i 1100 px (scelta di
   Claude, da confermare): le coordinate e la scala a larghezza fissa prendono posto, e la riga di comando deve tenere intere le
   opzioni della domanda (quelle della Quota a 1024 px) */
@media (pointer: coarse) { .riga .int > span { display: none; } .riga .int { padding: 0 var(--spazio-2); } .riga .int.layer-riga { width: auto; } }
@media (max-width: 1100px) { .riga .int > span { display: none; } .riga .int { padding: 0 var(--spazio-2); } .riga .int.layer-riga { width: auto; } }
/* il tasto del Layer attivo (0.9.2), a sinistra delle coordinate: il quadratino del colore e il nome in una cella a larghezza
   fissa (SOLUZIONI, Interfaccia 1): il nome lungo si taglia coi puntini, intero nella targhetta. Sul tablet solo il quadratino */
.int.layer-riga { width: var(--riga-layer); color: var(--testo); }
.int.layer-riga > .nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.quadratino { width: var(--quadratino); height: var(--quadratino); flex: none; border-radius: var(--raggio-quadratino); background: var(--colore, var(--testo)); box-shadow: inset 0 0 0 1px var(--filo); }
/* l'elenco dei comandi che cominciano così: sopra la riga, a sinistra; il primo è quello che parte con Invio */
.suggerisci { position: absolute; z-index: 7; left: var(--spazio-2); bottom: calc(var(--riga-alta) + var(--spazio-1)); min-width: var(--suggerisci); padding: var(--spazio-1);
  display: flex; flex-direction: column; gap: var(--spazio-mezzo); }
.suggerisci > button { display: grid; grid-template-columns: 7ch 1fr; gap: var(--spazio-2); align-items: center; height: var(--campo-alto); padding: 0 var(--spazio-2); border: 0;
  border-radius: var(--raggio-cella-piccola); background: transparent; color: var(--testo); font: var(--f-testo); text-align: left; }
.suggerisci > button:first-child { background: var(--rialzo); }
@media (hover: hover) { .suggerisci > button:hover { background: var(--rialzo); } }
.suggerisci > button b { font: var(--f-sigla); color: var(--accento-testo); }
.suggerisci > button small { font: var(--f-piccolo); color: var(--testo-tenue); }
/* i menu della riga (Snap, Griglia, Disto) sono il pezzo 31, sopra il loro tasto */

/* ================================================================ 30 · la zona della vista (0.9.0, 10/10)
   Gli Zoom si usano di continuo mentre si disegna: stanno in una zona a parte, come la barra di navigazione di AutoCAD,
   in colonna sul lato destro dell'area di disegno, a metà altezza. Zoom avanti, Zoom indietro, Zoom finestra, Zoom
   estensioni. Le celle col passo della barra grande; la targhetta esce a sinistra. */
.zona-vista { display: inline-flex; flex-direction: column; gap: var(--tra-celle); padding: var(--bordo-lastra); }
.posto-vista { position: absolute; z-index: 4; right: var(--spazio-3); top: 0; bottom: var(--riga-alta); display: flex; align-items: center; pointer-events: none; }
.posto-vista > * { pointer-events: auto; }
.cella.a-sinistra[data-n]::after { left: auto; right: calc(100% + var(--spazio-2)); bottom: auto; top: 50%; transform: translateY(-50%); }

/* ================================================================ 31 · un tasto della riga con le sue scelte (0.9.1, 10/10 notte)
   Come AutoCAD (SOLUZIONI, Interfaccia 4): il clic sul tasto accende e spegne; la freccina accanto (o il tasto destro, o il
   tocco lungo col dito) apre **sopra il tasto** l'elenco delle sue scelte. Un posto solo: le stesse scelte non stanno in
   un'altra zona. L'elenco è il menu (18) con .menu-riga: le voci da spuntare (role="menuitemcheckbox", la casella con la
   spunta come la .spuntina), le sezioni (h4), una riga di scelte (.segmento) e il campo che apre il tastierino. I tre menu
   della riga (Snap, Griglia, Disto) sono uguali. Col dito le voci e la freccina sono più grandi (--voce-riga-alta,
   --riga-freccina-larga, da @media (pointer: coarse) in token.css). */
.int-scelte { position: relative; flex: none; display: inline-flex; align-items: center; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.freccina-riga { display: grid; place-items: center; width: var(--riga-freccina-larga); height: var(--riga-tasto); padding: 0; border: 0; border-radius: var(--raggio-xs);
  background: transparent; color: var(--testo-tenue); transition: background-color var(--velo) var(--morbido), color var(--velo) var(--morbido); }
.freccina-riga .icona { width: var(--lato-freccina); height: var(--lato-freccina); }
@media (hover: hover) { .freccina-riga:hover { background: var(--rialzo); color: var(--testo); } }
.freccina-riga[aria-expanded="true"] { background: var(--rialzo); color: var(--testo); }
.freccina-riga[data-n]::after { content: attr(data-n); position: absolute; z-index: 9; right: 0; bottom: calc(100% + var(--spazio-2)); padding: var(--spazio-1) var(--spazio-2);
  border-radius: var(--raggio-xs); background: var(--suggerimento); color: var(--su-suggerimento); font: var(--f-suggerimento); white-space: nowrap; box-shadow: var(--ombra-menu);
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--velo) var(--morbido), visibility 0s linear var(--velo); }
@media (hover: hover) { .freccina-riga[data-n]:hover::after { opacity: 1; visibility: visible; transition: opacity var(--velo) var(--morbido) var(--attesa), visibility 0s linear var(--attesa); } }
.freccina-riga[aria-expanded="true"]::after { display: none; }
.menu-riga { z-index: 8; left: 0; bottom: calc(100% + var(--spazio-2)); min-width: var(--menu-riga); max-height: calc(100vh - var(--riga-alta) - 2 * var(--spazio-3)); overflow: auto;
  gap: var(--spazio-mezzo); white-space: normal; }
.menu-riga button { height: var(--voce-riga-alta); padding: 0 var(--spazio-2); }
.menu-riga button[role="menuitemcheckbox"], .menu-riga button[role="menuitemcheckbox"][aria-checked="true"] { font: var(--f-testo); }
.menu-riga .casella { width: var(--bordo-pannello); height: var(--bordo-pannello); flex: none; display: grid; place-items: center; border: 1px solid var(--testo-spento); border-radius: var(--raggio-xs);
  transition: border-color var(--velo) var(--morbido); }
.menu-riga .casella .spunta { stroke-dashoffset: 1; }
.menu-riga [aria-checked="true"] .casella { border-color: var(--accento); }
.menu-riga [aria-checked="true"] .casella .spunta { stroke-dashoffset: 0; }
.menu-riga .due-colonne { gap: 0 var(--spazio-mezzo); }
.menu-riga .tutti { display: flex; gap: var(--spazio-1); }
.menu-riga .tutti > button { flex: 1; justify-content: center; color: var(--testo-tenue); font: var(--f-piccolo); }
.menu-riga .riga-campo { display: flex; align-items: center; gap: var(--spazio-2); padding: var(--spazio-mezzo) var(--spazio-2); }
.menu-riga .riga-campo .segmento { height: var(--voce-riga-alta); }
/* dentro il menu i segmenti e il campo restano loro (il pezzo del menu, 18, non li deve vestire da voci) */
.menu-riga .riga-campo .segmento > button { height: auto; justify-content: center; padding: 0 var(--spazio-2); border-radius: var(--raggio-cella-piccola); color: var(--testo-tenue); font: var(--f-sigla); }
.menu-riga .riga-campo .segmento > button[aria-pressed="true"] { background: var(--rialzo-forte); color: var(--testo); box-shadow: var(--ombra-segmento); }
.menu-riga .riga-campo .campo-num { height: var(--voce-riga-alta); min-width: var(--campo-corto); padding: 0 var(--spazio-2); border: 1px solid transparent; background: var(--rialzo); font: var(--f-numero); }
.menu-riga .riga-campo .campo-num[aria-expanded="true"] { border-color: var(--accento); }
.menu-riga p { font: var(--f-piccolo); color: var(--testo-tenue); }
/* l'elenco dei Layer sopra il tasto del Layer attivo (0.9.2): il quadratino, il nome, la spunta su quello attivo; spenti e
   bloccati si vedono ma non si scelgono */
.menu-riga .voce-layer::before { display: none; }
.menu-riga .voce-layer { font: var(--f-testo); }
.menu-riga .voce-layer > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.menu-riga .voce-layer > small { font: var(--f-piccolo); color: var(--testo-spento); }
.menu-riga .voce-layer > .spunta { margin-left: auto; }
.menu-riga .voce-layer[aria-checked="true"] { font: var(--f-titolo); }
.menu-riga .voce-layer[aria-checked="true"] > .spunta { stroke-dashoffset: 0; }
.menu-riga .voce-layer[aria-disabled="true"] { color: var(--testo-spento); cursor: default; }
.menu-riga .voce-layer[data-livello="1"] { padding-left: calc(var(--spazio-2) + var(--rientro)); }
.menu-riga .voce-layer[data-livello="2"] { padding-left: calc(var(--spazio-2) + 2 * var(--rientro)); }
.menu-riga .voce-layer[data-livello="3"], .menu-riga .voce-layer[data-livello="4"] { padding-left: calc(var(--spazio-2) + 3 * var(--rientro)); }

/* ================================================================ 33 · il campo dove si scrive un testo sulla tela (0.9.3)
   Un campo di testo vero (sul tablet apre la tastiera del sistema: è un testo vero) ma invisibile: le lettere e il cursore
   li disegna la tela, con le larghezze della carta. Sta fermo sul punto del testo, fuori dal flusso della pagina: non sposta
   niente (SOLUZIONI, Interfaccia 1). 16 px perché Safari sull'iPad non ingrandisca la pagina quando prende il fuoco. */
.scrittura-tela { position: fixed; left: 0; top: 0; z-index: 1; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; outline: none;
  resize: none; overflow: hidden; opacity: 0; background: transparent; color: transparent; caret-color: transparent;
  font: var(--f-carta); white-space: pre; pointer-events: none; }

/* ================================================================ la tela, solo per le scene del catalogo
   (nel programma la disegna il Canvas) */
.tela { position: relative; background-color: var(--carta);
  background-image: linear-gradient(var(--griglia-forte) 1px, transparent 1px), linear-gradient(90deg, var(--griglia-forte) 1px, transparent 1px), linear-gradient(var(--griglia) 1px, transparent 1px), linear-gradient(90deg, var(--griglia) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; }

/* ================================================================ il movimento [1.7, 2.8]
   Leggero: si muove una cosa alla volta, niente dura più di mezzo secondo, si ripete solo il respiro.
   Con «riduci movimento» acceso nel sistema niente si muove: resta tutto acceso e fermo.
   .senza-movimento fa lo stesso su un pezzo di pagina (il catalogo lo usa per farlo vedere). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.senza-movimento, .senza-movimento *, .senza-movimento *::before, .senza-movimento *::after { animation: none !important; transition: none !important; }

/* ================================================================ Tower · il tasto pieno d'inchiostro (14 bis, 13/10/2026)
   Il solo tasto pieno della Tower è d'inchiostro, come in Claude: fondo accento-pieno, testo su-accento-pieno.
   Il viola del marchio (accento) resta per i tratti, le spunte e le righe. */
.tasto-parola.pieno, .tasto-pieno { background: var(--accento-pieno); color: var(--su-accento-pieno); }
@media (hover: hover) { .tasto-parola.pieno:hover { background: var(--icona); } }
.gruppo-opzioni .conferma { background: var(--accento-pieno); color: var(--su-accento-pieno); }

/* ================================================================ Tower · i pezzi congelati (13/10/2026; i caratteri, il 320 e tre correzioni il 13/10, Tower 0.3.1)
   Scelti da Enrico il 13/10/2026 (le proposte di Claude): guscio B + M2, ingresso P2, zone Z1, persona P1, cartellino C1,
   scelta Sì/No S1, cartellino di stato T1, riquadro di progetto R1, riga dell'elenco E2, riquadro per scrivere W1,
   discorso D2, scheda a voci K1; senza scelta: testo da leggere, tasti, tabella, consumi, vuoto/attesa/errore.
   Solo markup e classi: il comportamento (chiudere le colonne, annullare un Sì, il microfono) arriva in bundle.js quando
   si costruisce. Le tavole di scelta restano in Componenti come memoria. Gli stati li dà il codice con le classi. */
:root {
  /* I caratteri della Tower (Enrico, 13/10/2026, dalla tavola «Tower · i caratteri»: B · Instrument Sans, grandezza
     Proposta). La Tower si legge, non si disegna: la scala è più grande di quella fitta del COD, che resta la sua.
     Questi valori coprono quelli di famiglia in cima al file solo nella Tower. */
  --famiglia-interfaccia: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-pagina: 600 22px/28px var(--famiglia-interfaccia);               /* solo nelle pagine che si leggono */
  --f-titolo-pannello: 600 17px/24px var(--famiglia-interfaccia);      /* il titolo di un pannello */
  --f-titolo: 600 15px/20px var(--famiglia-interfaccia);               /* una sezione */
  --f-testo: 400 15px/22px var(--famiglia-interfaccia);                /* il contenuto: voci, cartellini */
  --f-tasto: 500 14px/20px var(--famiglia-interfaccia);                /* la parola su un tasto */
  --f-piccolo: 400 13px/18px var(--famiglia-interfaccia);              /* dettagli, orari, «presto» */
  --f-suggerimento: 500 13px/18px var(--famiglia-interfaccia);         /* la targhetta col nome */
  --f-lettera: 600 13px/18px var(--famiglia-interfaccia);              /* la lettera di un'opzione */
  --f-sigla: 500 12.5px/16px var(--famiglia-sigle);                    /* la sigla, in Geist Mono */
  --famiglia-lettura: "Newsreader", "Tiempos Text", Georgia, serif;   /* la grazia: oggi Newsreader, poi Tiempos Text */
  --f-grande: 500 34px/40px var(--famiglia-lettura);                   /* il giorno in «Oggi», il nome di una zona in testa */
  --f-lettura-titolo: 600 20px/26px var(--famiglia-lettura);           /* il titolo di una scheda, di un cartellino aperto */
  --f-lettura: 400 17px/26px var(--famiglia-lettura);                  /* il discorso, gli appunti, le schede */
  --f-citazione: italic 400 17px/26px var(--famiglia-lettura);         /* una frase riportata */
  --f-porta: 500 56px/60px var(--famiglia-lettura);                    /* «Tower» sulla porta (solo l'ingresso) */
  --f-dedica: 500 26px/32px var(--famiglia-lettura);                   /* la frase della dedica (solo l'ingresso) */
  --zone-largo: 168px;                                                 /* la colonna delle zone, aperta */
  --dettaglio-largo: 320px;                                            /* il dettaglio, 320 in tutte le zone (Enrico, 13/10/2026) */
  --dettaglio-medio: var(--dettaglio-largo);                           /* anche sul tablet: da 1024 il centro resta 662 */
  --lettura-largo: 540px;                                              /* la riga più lunga da leggere, circa 70 battute */
}

/* ---------------------------------------------------------------- 1 · il guscio (B, M2)
   Una lastra sola, colonne divise da un filo, le zone sulla carta. Largo: tre colonne. .medio (tablet): due; quando il
   dettaglio si apre (.medio.con-dettaglio) le zone si stringono alla colonnina: niente si copre.
   .zone-chiuse: la colonna delle zone diventa la colonnina. .senza-dettaglio: il centro si allarga. */
.guscio { display: grid; grid-template-columns: var(--zone-largo) minmax(0, 1fr) var(--dettaglio-largo); min-height: 0; overflow: hidden;
  background: var(--lastra); color: var(--testo); font: var(--f-testo); }
.guscio.senza-dettaglio { grid-template-columns: var(--zone-largo) minmax(0, 1fr); }
.guscio.zone-chiuse { grid-template-columns: var(--cella-larga) minmax(0, 1fr) var(--dettaglio-largo); }
.guscio.zone-chiuse.senza-dettaglio { grid-template-columns: var(--cella-larga) minmax(0, 1fr); }
.guscio.medio { grid-template-columns: var(--zone-largo) minmax(0, 1fr); }
.guscio.medio.con-dettaglio { grid-template-columns: var(--cella-larga) minmax(0, 1fr) var(--dettaglio-medio); }
.guscio > * { min-width: 0; min-height: 0; }
.guscio > * + * { border-left: 1px solid var(--filo); }
.guscio-zone { display: flex; flex-direction: column; gap: var(--spazio-mezzo); padding: var(--spazio-2); background: var(--carta); }
.guscio-centro { display: flex; flex-direction: column; gap: var(--spazio-4); padding: var(--spazio-6) var(--spazio-6) var(--spazio-4); overflow: auto; }
.guscio-dettaglio { display: flex; flex-direction: column; gap: var(--spazio-3); padding: var(--spazio-4) var(--spazio-3); overflow: auto; }
.guscio-centro > .testa-zona { display: flex; align-items: flex-end; gap: var(--spazio-3); }
.guscio-centro > .testa-zona h1 { margin: 0; flex: 1; font: var(--f-grande); }
.guscio-centro > .testa-zona small { font: var(--f-piccolo); color: var(--testo-tenue); }
.guscio-dettaglio > .testa-dettaglio { display: flex; align-items: flex-start; gap: var(--spazio-2); }
.guscio-dettaglio > .testa-dettaglio h2 { margin: 0; flex: 1; font: var(--f-lettura-titolo); }
.sezione-zona { display: flex; flex-direction: column; gap: var(--spazio-2); }
.sezione-zona > h2 { margin: 0; display: flex; align-items: baseline; gap: var(--spazio-2); font: var(--f-titolo); }
.sezione-zona > h2 small { font: var(--f-piccolo); color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.tasto-chiudi { display: grid; place-items: center; width: 24px; height: 24px; flex: none; padding: 0; border: 0; border-radius: var(--raggio-cella-piccola);
  background: transparent; color: var(--testo-tenue); }
.tasto-chiudi .icona { width: 16px; height: 16px; }
@media (hover: hover) { .tasto-chiudi:hover { background: var(--rialzo); color: var(--testo); } }
/* il centro in tre modi: elenco e scheda breve, tabella larga, scheda a tutta pagina con le linguette */
.cerca-campo { display: flex; align-items: center; gap: var(--spazio-2); height: var(--campo-alto); padding: 0 var(--spazio-2); border-radius: var(--raggio-s);
  background: var(--rialzo); color: var(--testo-tenue); font: var(--f-testo); }
.cerca-campo .icona { width: 16px; height: 16px; }
.cerca-campo > span { flex: 1; }
.linguette { display: flex; gap: var(--spazio-4); border-bottom: 1px solid var(--filo); font: var(--f-testo); color: var(--testo-tenue); }
.linguette > a, .linguette > button { padding: 0 0 var(--spazio-2); border: 0; background: none; color: inherit; text-decoration: none; }
.linguette > .attiva { color: var(--testo); font-weight: 500; box-shadow: inset 0 -2px 0 var(--accento); }
.indietro { display: inline-flex; align-items: center; gap: var(--spazio-1); font: var(--f-piccolo); color: var(--testo-tenue); text-decoration: none; }
.indietro .icona { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- 3 · le zone (Z1)
   La zona attiva ha il velo rialzo e la parola un filo più scura; il mouse sopra lo stesso velo. Due gruppi: il lavoro,
   l'archivio. I nuovi in un tondino d'inchiostro, i conteggi in grigio. Nella colonnina restano solo le icone. */
.zone-testa { display: flex; align-items: center; gap: var(--spazio-2); height: var(--campo-alto); padding: 0 var(--spazio-1) 0 var(--spazio-2); margin-bottom: var(--spazio-1); }
.zone-testa img { width: 20px; height: 20px; flex: none; }
.zone-testa b { flex: 1; font: var(--f-titolo-pannello); }
.zone-gruppo { padding: var(--spazio-2) var(--spazio-2) var(--spazio-1); font: var(--f-piccolo); color: var(--testo-tenue); }
.zona { display: flex; align-items: center; gap: var(--spazio-2); height: var(--campo-alto); padding: 0 var(--spazio-2); border-radius: var(--raggio-s);
  color: var(--icona); text-decoration: none; font: var(--f-testo); transition: background-color var(--velo) var(--morbido); }
.zona .icona, .zona .manca { width: 18px; height: 18px; }
.zona > span { flex: 1; min-width: 0; color: var(--testo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zona > small { font: var(--f-piccolo); color: var(--testo-tenue); font-variant-numeric: tabular-nums; }
.zona > small.nuovi { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--testo); color: var(--carta); font: 600 11px/18px var(--famiglia-interfaccia); text-align: center; }
.zona.sopra { background: var(--rialzo); }
@media (hover: hover) { .zona:hover { background: var(--rialzo); } }
.zona.attiva { background: var(--rialzo); }
.zona.attiva > span { font-weight: 500; }
.zona.presto, .zona.presto > span, .zona.presto > small { color: var(--testo-spento); }
.zone-piede { margin-top: auto; padding-top: var(--spazio-2); border-top: 1px solid var(--filo); }
.zone-chiuse .guscio-zone, .guscio.medio.con-dettaglio .guscio-zone { align-items: center; padding: var(--spazio-1); }
.zone-chiuse .zone-testa, .guscio.medio.con-dettaglio .zone-testa { justify-content: center; padding: 0; height: var(--cella-larga); }
.zone-chiuse .zona, .guscio.medio.con-dettaglio .zona { width: var(--cella-larga); height: var(--cella-larga); padding: 0; justify-content: center; }
.zone-chiuse :is(.zona > span, .zona > small, .zone-testa b, .zone-gruppo, .guscio-zone .persona .nome, .guscio-zone .persona .stato),
.guscio.medio.con-dettaglio :is(.zona > span, .zona > small, .zone-testa b, .zone-gruppo, .guscio-zone .persona .nome, .guscio-zone .persona .stato) { display: none; }
/* solo la persona nella colonna delle zone perde nome e stato: quelle del centro e del dettaglio («Chi c'è») restano */

/* ---------------------------------------------------------------- 4 · la persona (P1)
   Le iniziali in un tondo rialzo con filo; «tu» col tondo rialzo-forte e la riga velata. Online: il pallino via
   sull'angolo del tondo; assente: il pallino vuoto. Il reparto è una parola in testo-tenue, mai un colore. */
.tondo { position: relative; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--rialzo); border: 1px solid var(--filo); font: 600 11px/1 var(--famiglia-interfaccia); color: var(--testo); }
.tondo.tu { background: var(--rialzo-forte); }
.tondo.grande { width: 56px; height: 56px; font-size: 19px; }
.tondo.piccolo { width: 20px; height: 20px; font-size: 9px; }
.tondo > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tondo > .presenza { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--via); box-shadow: 0 0 0 2px var(--lastra); }
.tondo > .presenza.assente { background: var(--lastra); border: 1.5px solid var(--testo-spento); }
.tondo.grande > .presenza { width: 12px; height: 12px; right: 1px; bottom: 1px; }
.persona { display: flex; align-items: center; gap: var(--spazio-2); min-height: 40px; padding: 0 var(--spazio-2); border-radius: var(--raggio-s); }
.persona .nome { display: flex; flex-direction: column; min-width: 0; font: 400 13px/16px var(--famiglia-interfaccia); color: var(--testo); }
.persona .nome small { font: var(--f-piccolo); color: var(--testo-tenue); }
.persona .stato { margin-left: auto; font: var(--f-piccolo); color: var(--testo-tenue); white-space: nowrap; }
.persona.tu { background: var(--rialzo); }
.persona-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--spazio-2) 0 2px; border-radius: 12px; background: var(--rialzo); font: var(--f-suggerimento); color: var(--testo); }

/* ---------------------------------------------------------------- 5 · il cartellino (C1)
   Righe a filo, come la posta. Nuovo: il pallino viola e la riga in grassetto; urgente: la parola «urgente» in allarme;
   letto: grigio. «Aspetta te» in accento-testo. Aperto: il titolo e il testo in grazia. */
.cartellini { display: flex; flex-direction: column; }
.cartellino { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--spazio-1) var(--spazio-3); align-items: start;
  padding: var(--spazio-3); border-bottom: 1px solid var(--filo); color: var(--testo); text-decoration: none; transition: background-color var(--velo) var(--morbido); }
.cartellino .cosa { font: var(--f-testo); color: var(--testo); }
.cartellino .chi { font: var(--f-piccolo); color: var(--testo-tenue); }
.cartellino .aspetta { display: flex; align-items: center; gap: var(--spazio-2); margin-top: 2px; font: var(--f-suggerimento); color: var(--accento-testo); }
.cartellino .quando { font: var(--f-piccolo); color: var(--testo-tenue); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cartellino.nuovo .cosa { font-weight: 600; }
.cartellino.nuovo::before { content: ""; position: absolute; left: -4px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--accento); }
.cartellino.letto .cosa { color: var(--testo-tenue); }
.cartellino.urgente .quando { color: var(--allarme); font-weight: 500; }
.cartellino.sopra, .cartellino.aperto-qui { background: var(--rialzo); }
@media (hover: hover) { a.cartellino:hover { background: var(--rialzo); } }
.cartellino-aperto { display: flex; flex-direction: column; gap: var(--spazio-3); max-width: var(--lettura-largo); }
.cartellino-aperto h2 { margin: 0; font: var(--f-lettura-titolo); }
.cartellino-aperto p { margin: 0; font: var(--f-lettura); color: var(--testo); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-1) var(--spazio-4); font: var(--f-piccolo); color: var(--testo-tenue); }
.link-esce { display: inline-flex; align-items: center; gap: var(--spazio-1); font: var(--f-tasto); color: var(--accento-testo); text-decoration: none; }
.link-esce .icona { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- 6 · la scelta Sì/No (S1)
   Due tasti: «Sì» pieno e «No» secondario, un tocco e via; la nota è una parola sotto e si apre solo se serve.
   Deciso: la scelta resta scritta (chi, quando); il sì in via con la spunta, il no in inchiostro (non è un errore). */
.scelta-sino { display: flex; flex-direction: column; gap: var(--spazio-3); padding: var(--spazio-4); }
.scelta-sino .domanda { margin: 0; font: 500 16px/24px var(--famiglia-lettura); color: var(--testo); }
.scelta-sino .da { display: flex; align-items: center; gap: var(--spazio-2); font: var(--f-piccolo); color: var(--testo-tenue); }
.scelta-sino .tasti { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-2); }
.scelta-sino .aggiungi-nota { margin-left: var(--spazio-2); padding: 0; border: 0; background: none; font: var(--f-piccolo); color: var(--testo-tenue); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--filo); }
.esito { display: flex; align-items: center; gap: var(--spazio-2); font: var(--f-tasto); }
.esito .icona { width: 18px; height: 18px; }
.esito.si { color: var(--via); }
.esito.no { color: var(--testo); }
.esito small { font: var(--f-piccolo); color: var(--testo-tenue); }
.esito-nota { margin: 0; padding-left: var(--spazio-3); border-left: 2px solid var(--filo); font: italic 400 15px/22px var(--famiglia-lettura); color: var(--testo-tenue); }

/* ---------------------------------------------------------------- 7 · il cartellino di stato (T1)
   La parola in inchiostro, il colore in un pallino accanto. Quattro tinte sole (decisione 3), data-tinta:
   grigio (idea, scheda, bozza, parcheggiata, nuova) · accento (via, costruzione, capita, in riparazione) · via (fatta,
   chiusa) · controllo (prova, da riprovare) · allarme (blocca il lavoro: la parola in grassetto). */
.stato-lavoro { display: inline-flex; align-items: center; gap: 6px; font: var(--f-suggerimento); color: var(--testo); white-space: nowrap; }
.stato-lavoro::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--t, var(--testo-tenue)); flex: none; }
.stato-lavoro[data-tinta="grigio"] { --t: var(--testo-tenue); }
.stato-lavoro[data-tinta="accento"] { --t: var(--accento-testo); }
.stato-lavoro[data-tinta="via"] { --t: var(--via); }
.stato-lavoro[data-tinta="controllo"] { --t: var(--controllo); }
.stato-lavoro[data-tinta="allarme"] { --t: var(--allarme); font-weight: 600; }

/* ---------------------------------------------------------------- 8 · il riquadro di progetto (R1)
   Nome, stato, una riga, chi aspetta. «Aspetta te» (.tocca) accende il bordo e la parola in viola: una sola cosa viola
   per riquadro. Fermo (.fermo) va in grigio. Ne stanno quattro in fila. */
.progetti { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spazio-3); }
.riquadro-progetto { display: flex; flex-direction: column; gap: var(--spazio-2); padding: var(--spazio-3) var(--spazio-4);
  background: var(--lastra); border: 1px solid var(--filo); border-radius: var(--raggio-m); color: var(--testo); text-decoration: none; }
.riquadro-progetto .testa { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spazio-2); }
.riquadro-progetto b { font: var(--f-lettura-titolo); color: var(--testo); }
.riquadro-progetto .linea { margin: 0; font: var(--f-testo); color: var(--testo); }
.riquadro-progetto .aspetta { display: flex; align-items: center; gap: var(--spazio-2); font: var(--f-suggerimento); color: var(--testo-tenue); }
.riquadro-progetto.tocca { border-color: var(--accento); }
.riquadro-progetto.tocca .aspetta { color: var(--accento-testo); }
.riquadro-progetto.fermo b, .riquadro-progetto.fermo .linea { color: var(--testo-tenue); }

/* ---------------------------------------------------------------- 9 · la riga dell'elenco (E2)
   A riposo, sopra (il velo), scelta (si alza: rialzo-forte con l'ombra del segmento: quella aperta nel dettaglio),
   spenta. La selezione blu di famiglia resta per la tela, non per le liste. */
.elenco { display: flex; flex-direction: column; gap: var(--spazio-mezzo); }
.riga-elenco { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: var(--spazio-2); align-items: center; min-height: var(--campo-alto);
  padding: 6px var(--spazio-2); border-radius: var(--raggio-s); color: var(--icona); text-decoration: none; transition: background-color var(--velo) var(--morbido); }
.riga-elenco.senza-icona { grid-template-columns: minmax(0, 1fr) auto; }
.riga-elenco .icona, .riga-elenco .manca { width: 18px; height: 18px; }
.riga-elenco > span { font: var(--f-testo); color: var(--testo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.riga-elenco > span small { margin-left: var(--spazio-2); font: var(--f-piccolo); color: var(--testo-tenue); }
.riga-elenco > small { font: var(--f-piccolo); color: var(--testo-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.riga-elenco.sopra { background: var(--rialzo); }
@media (hover: hover) { a.riga-elenco:hover { background: var(--rialzo); } }
.riga-elenco.scelta { background: var(--rialzo-forte); box-shadow: var(--ombra-segmento), inset 0 0 0 1px var(--filo); }
.riga-elenco.scelta > span { font-weight: 500; }
.riga-elenco.spenta, .riga-elenco.spenta > span, .riga-elenco.spenta small { color: var(--testo-spento); }

/* ---------------------------------------------------------------- 10 · il testo da leggere
   In grazia; righe al massimo --lettura-largo. Nelle liste e nei pannelli resta Geist. */
.lettura { max-width: var(--lettura-largo); }
.lettura .grande { margin: 0 0 var(--spazio-3); font: var(--f-grande); }
.lettura h2, .lettura h3 { margin: 0 0 var(--spazio-2); font: var(--f-lettura-titolo); }
.lettura p { margin: 0 0 var(--spazio-3); font: var(--f-lettura); color: var(--testo); }
.lettura blockquote { margin: 0 0 var(--spazio-3); padding-left: var(--spazio-4); border-left: 2px solid var(--filo); font: var(--f-citazione); color: var(--testo-tenue); }
.lettura ul, .lettura ol { margin: 0 0 var(--spazio-3); padding-left: 22px; font: var(--f-lettura); }
.lettura li { margin: 0 0 4px; }
.lettura li::marker { color: var(--testo-tenue); }
.lettura > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- 11 · il riquadro per scrivere (W1)
   Il microfono è un tasto del riquadro, accanto all'allegato e all'invio, come la casella di Claude. Il campo che si sta
   scrivendo ha il bordo accento; l'errore il bordo allarme e una frase; mentre ascolta il microfono è pieno e l'onda si muove. */
.scrivi { display: flex; flex-direction: column; gap: var(--spazio-2); padding: var(--spazio-3); background: var(--lastra); border: 1px solid var(--filo); border-radius: var(--raggio-m); }
.scrivi.attivo { border-color: var(--accento); }
.scrivi.errore { border-color: var(--allarme); }
.scrivi.spento { background: var(--rialzo); }
.scrivi-testo { min-height: 48px; margin: 0; font: var(--f-lettura); color: var(--testo); }
.scrivi-testo.vuoto { color: var(--testo-spento); font-style: italic; }
.scrivi-testo.ascolto { color: var(--testo-tenue); }
.scrivi-piede { display: flex; align-items: center; gap: var(--spazio-2); }
.scrivi-piede .detto { flex: 1; font: var(--f-piccolo); color: var(--testo-tenue); }
.scrivi-piede .detto.allarme { color: var(--allarme); }
.tasto-icona { display: grid; place-items: center; width: var(--campo-alto); height: var(--campo-alto); flex: none; padding: 0; border: 0; border-radius: var(--raggio-s); background: transparent; color: var(--icona); }
.tasto-icona .icona, .tasto-icona .manca { width: 18px; height: 18px; }
.tasto-icona.su { background: var(--rialzo); }
@media (hover: hover) { .tasto-icona:hover { background: var(--rialzo); } }
.tasto-icona.ascolta { background: var(--accento-pieno); color: var(--su-accento-pieno); --tratto: currentColor; }
.tasto-icona.invia { background: var(--accento-pieno); color: var(--su-accento-pieno); --tratto: currentColor; }
.tasto-icona.invia.no { background: var(--rialzo); color: var(--testo-spento); }
.onda { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.onda i { width: 3px; border-radius: 2px; background: var(--accento); }

/* ---------------------------------------------------------------- 12 · il discorso (D2)
   Come Claude: tutti a sinistra, uno sotto l'altro; solo il tuo ha il velo. Il testo in grazia, il nome e l'ora in Geist
   grigio. Claude ha un segno provvisorio (si decide con l'officina). «Claude sta lavorando»: tre punti che respirano. */
.discorso { display: flex; flex-direction: column; gap: var(--spazio-4); max-width: 640px; }
.battuta { display: flex; flex-direction: column; gap: var(--spazio-1); }
.battuta .chi { display: flex; align-items: center; gap: var(--spazio-2); font: var(--f-suggerimento); color: var(--testo-tenue); }
.battuta .chi time { font-weight: 400; }
.battuta p { margin: 0; font: var(--f-lettura); color: var(--testo); }
.battuta.tua p { padding: var(--spazio-2) var(--spazio-3); border-radius: var(--raggio-m); background: var(--rialzo); }
.segno-claude { display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 4px; background: var(--testo); color: var(--carta); font: 700 10px/1 var(--famiglia-interfaccia); }
.lavora { display: inline-flex; align-items: center; gap: var(--spazio-2); font: var(--f-testo); color: var(--testo-tenue); }
.lavora i { width: 6px; height: 6px; border-radius: 50%; background: var(--accento); animation: tower-respira var(--respiro) ease-in-out infinite alternate; }
.lavora i:nth-child(2) { animation-delay: 150ms; }
.lavora i:nth-child(3) { animation-delay: 300ms; }
@keyframes tower-respira { from { opacity: .25; } to { opacity: 1; } }

/* ---------------------------------------------------------------- 13 · la scheda a voci (K1)
   L'etichetta grigia a sinistra, il valore in grazia a destra. Vuota: «Da scrivere». Scritta da Claude (.claude): in
   corsivo grigio finché non la confermi col «Va bene» (il solo tasto pieno) o la cambi. */
.scheda-voci { display: flex; flex-direction: column; }
.scheda-voci > h2 { margin: 0 0 var(--spazio-3); font: var(--f-lettura-titolo); }
.voce-scheda { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--spazio-3); padding: var(--spazio-2) 0; border-top: 1px solid var(--filo); }
.voce-scheda > small { font: 400 12px/22px var(--famiglia-interfaccia); color: var(--testo-tenue); }
.voce-scheda > div { display: flex; flex-direction: column; gap: var(--spazio-1); font: 400 15px/22px var(--famiglia-lettura); color: var(--testo); }
.voce-scheda .da-scrivere { font: italic 400 15px/22px var(--famiglia-lettura); color: var(--testo-spento); }
.voce-scheda.claude > div > span { font-style: italic; color: var(--testo-tenue); }
.da-claude { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spazio-2); font: var(--f-piccolo); color: var(--testo-tenue); }
.da-claude .segno-claude { width: 14px; height: 14px; font-size: 9px; }

/* ---------------------------------------------------------------- 14 · i tasti
   Il solo tasto pieno di una zona è d'inchiostro (14 bis, V2); i secondari sul rialzo; il nudo per le azioni piccole.
   Alti 32, 44 dove serve il dito (.alto). Il fuoco da tastiera è l'anello blu della selezione. In attesa si spegne e
   respira; quello che non si annulla chiede il secondo tocco (.conferma), senza finestre del browser. */
.tasto-tower { display: inline-flex; align-items: center; justify-content: center; gap: var(--spazio-2); height: var(--campo-alto); padding: 0 var(--spazio-3);
  border: 0; border-radius: var(--raggio-s); font: var(--f-tasto); white-space: nowrap; text-decoration: none; transition: background-color var(--velo) var(--morbido); }
.tasto-tower .icona { width: 16px; height: 16px; }
.tasto-tower.pieno { background: var(--accento-pieno); color: var(--su-accento-pieno); --tratto: currentColor; }
.tasto-tower.secondo { background: var(--rialzo); color: var(--testo); }
.tasto-tower.nudo { background: transparent; color: var(--testo-tenue); }
@media (hover: hover) { .tasto-tower.pieno:hover { background: var(--icona); } .tasto-tower.secondo:hover { background: var(--filo); } .tasto-tower.nudo:hover { background: var(--rialzo); color: var(--testo); } }
.tasto-tower.spento, .tasto-tower:disabled { background: var(--rialzo); color: var(--testo-spento); cursor: default; }
.tasto-tower.attesa { background: var(--rialzo); color: var(--testo-tenue); cursor: progress; }
.tasto-tower.attesa .respiro { width: 14px; height: 2px; border-radius: 1px; background: var(--accento); animation: tower-respira var(--respiro) ease-in-out infinite alternate; }
.tasto-tower.conferma { background: var(--allarme); color: var(--carta); }
.tasto-tower:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--carta), 0 0 0 4px var(--selezione); }
.tasto-tower.alto { height: var(--tasto-alto); padding: 0 var(--spazio-6); }

/* ---------------------------------------------------------------- 15 · la tabella
   La testa in grigio piccolo; la colonna ordinata in inchiostro con la freccina viola; righe divise da fili; numeri a
   destra, cifre larghe uguali («1 102 000», «96,10 €»). Vuota: una riga che dice perché. */
.tabella { width: 100%; border-collapse: collapse; table-layout: fixed; font: var(--f-testo); }
.tabella th { height: var(--campo-alto); padding: 0 var(--spazio-3); text-align: left; font: var(--f-suggerimento); color: var(--testo-tenue); border-bottom: 1px solid var(--filo); white-space: nowrap; }
.tabella th.ordinata { color: var(--testo); }
.tabella th .freccia { display: inline-block; margin-left: 4px; color: var(--accento-testo); }
.tabella td { height: 36px; padding: 0 var(--spazio-3); border-bottom: 1px solid var(--filo); color: var(--testo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabella td.n, .tabella th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabella td.tenue { color: var(--testo-tenue); }
.tabella tr.sopra td, .tabella tr.aperta td { background: var(--rialzo); }
.tabella td.vuota { height: 120px; text-align: center; color: var(--testo-tenue); }

/* ---------------------------------------------------------------- 16 · i consumi
   Il numero grande in grazia, la barretta, la tacca del tetto. Sotto il tetto grigia; vicino controllo; sopra allarme.
   Una frase dice sempre cosa succede (data-tono: sotto · vicino · sopra). */
.consumo { display: flex; flex-direction: column; gap: var(--spazio-2); padding: var(--spazio-3) var(--spazio-4); }
.consumo .testa { display: flex; justify-content: space-between; align-items: baseline; font: var(--f-piccolo); color: var(--testo-tenue); }
.consumo .numero { font: var(--f-grande); color: var(--testo); font-variant-numeric: tabular-nums; }
.consumo .numero small { margin-left: var(--spazio-1); font: var(--f-testo); color: var(--testo-tenue); }
.consumo .barra { position: relative; height: 6px; border-radius: 3px; background: var(--rialzo); }
.consumo .barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--testo-tenue); }
.consumo .barra b { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--testo); }
.consumo[data-tono="vicino"] .barra i { background: var(--controllo); }
.consumo[data-tono="sopra"] .barra i { background: var(--allarme); }
.consumo .detto { font: var(--f-piccolo); color: var(--testo-tenue); }
.consumo[data-tono="vicino"] .detto { color: var(--controllo); }
.consumo[data-tono="sopra"] .detto { color: var(--allarme); }

/* ---------------------------------------------------------------- 17 · vuoto, attesa, errore
   Il vuoto dice cosa fare e ha il tasto per farlo; l'attesa mostra la forma di quello che arriva; l'errore dice cosa
   non va in parole semplici, cosa succede adesso e come riprovare. Niente codici, niente finestre. */
.stato-zona { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spazio-2); min-height: 200px; padding: var(--spazio-6); text-align: center; }
.stato-zona .icona, .stato-zona .manca { width: 24px; height: 24px; color: var(--testo-tenue); }
.stato-zona b { font: var(--f-lettura-titolo); color: var(--testo); }
.stato-zona p { margin: 0; max-width: 260px; font: var(--f-testo); color: var(--testo-tenue); }
.stato-zona.errore .icona { color: var(--allarme); }
.scheletro { display: flex; flex-direction: column; gap: var(--spazio-3); }
.scheletro i { display: block; height: 12px; border-radius: 4px; background: var(--rialzo); animation: tower-respira var(--respiro) ease-in-out infinite alternate; }

/* ---------------------------------------------------------------- 2 · l'ingresso (P2)
   Divisa in due: a sinistra sulla carta il solo anello GEC, «Tower» grande e la dedica al team; a destra sulla lastra la
   porta col solo tasto pieno «Entra con Google». Qui la dedica è ferma, già scritta (come con «riduci movimento»): la
   scena a tempo di musica sta nella tavola dell'Ingresso e si costruisce in bundle.js.
   Stati della metà destra: fermo · .attesa («Aspetto Google…») · .rifiutato («Non sei tra gli invitati»). */
.ingresso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100%; background: var(--carta); color: var(--testo); }
.ingresso-dedica { position: relative; display: flex; flex-direction: column; gap: var(--spazio-2); padding: 64px 64px 112px; }
.ingresso-dedica img.anello { position: static; z-index: auto; display: block; width: 56px; height: 56px; margin: 0 0 var(--spazio-6); }
/* img.anello: la classe di famiglia .anello (il cerchio di avanzamento del COD) è nascosta e assoluta; qui torna nel flusso */
.ingresso-dedica .nome-porta { margin: 0 0 var(--spazio-4); font: var(--f-porta); letter-spacing: -.01em; }
.ingresso-dedica .riga-dedica { margin: 0; font: 400 19px/28px var(--famiglia-lettura); color: var(--testo); }
.ingresso-dedica .riga-dedica.grazie { margin-top: var(--spazio-3); font: italic 500 25px/34px var(--famiglia-lettura); letter-spacing: -.005em; }
.ingresso-dedica .riga-dedica.inizio { margin-top: var(--spazio-4); font: 500 38px/46px var(--famiglia-lettura); letter-spacing: -.01em; }
.ingresso-dedica .riga-dedica.inizio .punto { color: var(--accento); margin-left: .06em; font-size: 1.15em; }
.ingresso-dedica .firma { margin: var(--spazio-6) 0 0; font: italic 400 17px/26px var(--famiglia-lettura); color: var(--testo-tenue); }
.ingresso-dedica .firma .cuore { display: inline-block; width: 15px; height: 15px; vertical-align: -1px; color: var(--accento); }
.ingresso-dedica .slogan { position: absolute; left: 64px; right: 64px; bottom: 40px; margin: 0; padding-top: var(--spazio-3); border-top: 1px solid var(--filo);
  font: 400 14px/20px var(--famiglia-lettura); letter-spacing: .02em; color: var(--testo-tenue); }
.ingresso-porta { display: grid; place-items: center; padding: 64px; background: var(--lastra); border-left: 1px solid var(--filo); }
.ingresso-porta .dentro { display: flex; flex-direction: column; gap: var(--spazio-4); width: 100%; max-width: 320px; }
.ingresso-porta h2 { margin: 0; font: var(--f-lettura-titolo); }
.ingresso-porta p { margin: 0; font: var(--f-testo); color: var(--testo-tenue); }
.ingresso-porta .tasto-tower.alto { width: 100%; }
.segno-google { width: 18px; height: 18px; border: 1px dashed currentColor; border-radius: 50%; opacity: .7; }