/* ============================================================
   Tricotta — Component library (CSS)
   Richiede tokens.css. Classi semantiche riusabili nei template
   Django; le utility Tailwind restano per il layout dei one-off.
   Comportamenti in components.js. Icone in icons.svg.
   ============================================================ */

/* ============================================================
   REGOLA SITE-WIDE · Il contratto di base (vale per OGNI pagina)
   Non-negoziabili di responsiveness che ogni superficie eredita,
   qualunque sia la sua postura. Dettaglio: docs/03-5-responsive-e-dispositivi.md
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-width: 0;
  overflow-x: clip;                 /* mai scroll orizzontale del body */
  background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--s-0); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* i media si adattano, non sfondano la colonna */
img, svg, video, canvas { max-width: 100%; height: auto; }
/* i contenuti larghi (tabelle, chart, disegno tecnico) scrollano DENTRO di sé */
.scroll-x { max-width: 100%; overflow-x: auto; }
/* target touch comodi di default; ENHANCED (≥44px) dove si lavora a mani occupate:
   marca il ramo di esecuzione con .exec sull'antenato (modalità lavorazione) */
button, [role="button"], a.btn, .tap { min-height: var(--tap-min); }
.exec button, .exec [role="button"], .exec .tap { min-height: var(--tap-exec); }

/* icona standalone: <svg class="ic"><use href="#i-nome"/></svg> */
.ic { width:1.15em; height:1.15em; display:inline-block; vertical-align:-.15em; }
/* i18n: tronca con ellissi le etichette che devono restare su una riga
   (richiede min-width:0 sul contenitore flex). Le azioni primarie NON si troncano. */
.truncate { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- bottoni ---------- */
.btn { --h:38px; height:var(--h); font:inherit; font-size:var(--s--1); font-weight:600; border-radius:var(--r);
  padding:0 15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  border:1px solid transparent; white-space:nowrap; transition:background .14s, border-color .14s, transform .1s, color .14s; }
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
.btn svg { width:16px; height:16px; }
.btn.sm { --h:30px; font-size:var(--s--2); padding:0 11px; border-radius:var(--r-sm); }
.btn.lg { --h:44px; padding:0 20px; font-size:var(--s-0); }
.btn.primary { background:var(--primary); color:var(--on-primary); }
.btn.primary:hover { background:color-mix(in srgb, var(--primary) 86%, var(--ink)); }
.btn.secondary { background:var(--surface); color:var(--ink); border-color:var(--border-2); }
.btn.secondary:hover { background:var(--surface-2); border-color:var(--ink-3); }
.btn.soft { background:var(--primary-soft); color:var(--primary-ink); }
.btn.soft:hover { background:color-mix(in srgb, var(--primary) 20%, var(--surface)); }
.btn.subtle { background:transparent; color:var(--ink-2); }
.btn.subtle:hover { background:var(--surface-2); color:var(--ink); }
.btn.danger { background:var(--danger); color:#fff; }
.btn.danger:hover { background:color-mix(in srgb, var(--danger) 86%, #000); }
.btn.ghost-danger { background:transparent; color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%, transparent); }
.btn.ghost-danger:hover { background:var(--danger-soft); }
.btn[disabled] { opacity:.45; pointer-events:none; }
.btn .spin { width:15px; height:15px; border-radius:50%; border:2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color:currentColor; animation:tk-spin .7s linear infinite; }
@keyframes tk-spin { to { transform:rotate(1turn); } }

/* ---------- icon button ---------- */
.iconbtn { width:38px; height:38px; border-radius:var(--r-sm); border:1px solid transparent; background:transparent; color:var(--ink-2); cursor:pointer; display:grid; place-items:center; transition:background .13s, color .13s; }
.iconbtn:hover { background:var(--surface-2); color:var(--ink); }
.iconbtn:focus-visible { outline:2px solid var(--ring); outline-offset:1px; }
.iconbtn.on { background:var(--primary); color:var(--on-primary); }
.iconbtn svg { width:19px; height:19px; }

/* ---------- segmented / button group ---------- */
.seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r); padding:3px; gap:2px; }
.seg button { font:inherit; font-size:var(--s--1); font-weight:600; color:var(--ink-2); background:transparent; border:0; border-radius:var(--r-sm); padding:6px 13px; cursor:pointer; transition:background .13s, color .13s; display:inline-flex; align-items:center; gap:7px; }
.seg button:hover { color:var(--ink); }
.seg button.on { background:var(--surface); color:var(--primary-ink); box-shadow:var(--sh-1); }
.seg button svg { width:15px; height:15px; }

.btngroup { display:inline-flex; border:1px solid var(--border-2); border-radius:var(--r); overflow:hidden; background:var(--surface); }
.btngroup > button { font:inherit; font-size:var(--s--1); font-weight:600; color:var(--ink); background:transparent; border:0; border-inline-end:1px solid var(--border); padding:8px 14px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; }
.btngroup > button:last-child { border-inline-end:0; }
.btngroup > button:hover { background:var(--surface-2); }
.btngroup svg { width:16px; height:16px; }

/* ---------- toolbar / rail ---------- */
.toolbar { display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:8px 10px; box-shadow:var(--sh-1); flex-wrap:wrap; }
.toolbar .vdiv { width:1px; height:26px; background:var(--border); margin:0 4px; }
.toolbar .name { font-size:var(--s--1); color:var(--ink-2); font-weight:600; padding:0 6px; }
.toolbar .name b { color:var(--ink); }
.toolbar .grow { flex:1; }

.rail { display:inline-flex; flex-direction:column; gap:3px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:8px 7px; box-shadow:var(--sh-2); }
.rail .hdiv { height:1px; background:var(--border); margin:5px 4px; }

/* ---------- campi / form ---------- */
.field { display:flex; flex-direction:column; gap:6px; }
.field > label { font-size:var(--s--1); font-weight:600; color:var(--ink-2); }
.input { height:38px; display:flex; align-items:center; background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r); padding:0 12px; gap:8px; transition:border-color .14s, box-shadow .14s; }
.input:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
.input input { border:0; outline:0; background:transparent; font:inherit; color:var(--ink); width:100%; min-width:0; }
.input .unit { font-family:var(--mono); font-size:var(--s--1); color:var(--ink-2); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-xs); padding:2px 7px; cursor:pointer; user-select:none; }
.input .unit:hover { color:var(--primary-ink); border-color:var(--primary); }
/* select nativo dentro un wrapper .input: azzera l'aspetto nativo (bordo/sfondo/freccia)
   e ridisegna la freccia custom, così non affiora un dropdown di sistema dentro il bordo. */
.input select { appearance:none; -webkit-appearance:none; border:0; outline:0; background:transparent; font:inherit; color:var(--ink); width:100%; min-width:0; cursor:pointer; padding-inline-end:18px; }
.input:has(select) { position:relative; }
.input:has(select)::after { content:""; position:absolute; inset-inline-end:12px; inset-block-start:50%; width:8px; height:8px; border-inline-end:1.5px solid var(--ink-3); border-block-end:1.5px solid var(--ink-3); transform:translateY(-65%) rotate(45deg); pointer-events:none; }
/* Lista di opzioni del <select>: il popup lo disegna il browser, ma rispetta
   background/colore/padding sulle <option> — così ha il respiro del DS invece del box
   nudo di sistema. (Chiaro/scuro lo porta già `color-scheme` nei token.) */
.input select option, select.sel option { background:var(--surface); color:var(--ink); padding:8px 12px; }
.input select optgroup, select.sel optgroup { background:var(--surface); color:var(--ink-2); font-weight:600; }

/* ---------- select CUSTOM (enhance progressivo del <select> nativo) ----------
   Il popup di un <select> nativo NON accetta padding/margine sulle <option>
   (limite storico di Blink/WebKit) → in tema chiaro la lista sembra «di sistema»,
   senza respiro a sinistra. Soluzione: js/components.js affianca al select nativo
   — che resta la fonte del form e degli script — una UI DOM completamente
   stilabile. Il popup è appeso al <body> ed entra nel TOP LAYER (Popover), così
   non lo ritaglia l'overflow:hidden del modale né lo copre lo scrim dell'overlay. */
.input.is-sel > select.sel-native {           /* nativo = solo valore: invisibile ma presente e sottomesso */
  position:absolute; inset:0; opacity:0; pointer-events:none; }
.sel-face {                                    /* la faccia visibile (mostra l'opzione scelta) */
  flex:1; min-width:0; display:flex; align-items:center; font:inherit; color:var(--ink);
  background:transparent; border:0; outline:0; padding:0; padding-inline-end:16px;
  cursor:pointer; text-align:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sel-face.is-placeholder { color:var(--ink-3); }

.sel-pop {                                     /* la lista, nel top layer (fallback: z alto sopra l'overlay) */
  display:none; position:fixed; margin:0; inset:auto; z-index:var(--z-pop);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh-3); padding:6px; min-width:180px; max-height:min(320px, 56vh); overflow-y:auto; }
.sel-pop.open { display:block; }
.sel-pop::backdrop { background:transparent; }
.sel-grp {                                     /* etichetta <optgroup>: micro-caption tracked del DS */
  font-size:var(--s--2); font-weight:600; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.04em; padding:9px 12px 3px; }
.sel-opt {                                     /* ← QUI il respiro a sinistra che il nativo non dà */
  display:flex; align-items:center; gap:8px; width:100%; text-align:start; font:inherit;
  font-size:var(--s-0); color:var(--ink); background:transparent; border:0; border-radius:var(--r-sm);
  padding:8px 12px; cursor:pointer; }
.sel-opt:hover, .sel-opt.active { background:var(--surface-2); }
.sel-opt[aria-selected="true"] { color:var(--primary-ink); font-weight:600; }
.sel-opt[aria-selected="true"]::after { content:"✓"; margin-inline-start:auto; color:var(--primary); }
.sel-opt[aria-disabled="true"] { color:var(--ink-3); cursor:default; }
.sel-opt[aria-disabled="true"]:hover { background:transparent; }

.input.err { border-color:var(--danger); }
.input.err:focus-within { box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 30%, transparent); }
.hint { font-size:var(--s--2); color:var(--ink-3); }
.hint.err { color:var(--danger); }
.stepper { display:flex; align-items:center; }
.stepper button { width:26px; height:26px; border:1px solid var(--border-2); background:var(--surface); color:var(--ink-2); cursor:pointer; display:grid; place-items:center; font-size:14px; }
.stepper button:first-child { border-start-start-radius:var(--r-xs); border-end-start-radius:var(--r-xs); }
.stepper button:last-child { border-start-end-radius:var(--r-xs); border-end-end-radius:var(--r-xs); border-inline-start:0; }
.stepper button:hover { background:var(--surface-2); color:var(--ink); }
textarea.ta { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r); padding:10px 12px; resize:vertical; min-height:74px; outline:0; }
textarea.ta:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }
select.sel { font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--border-2); border-radius:var(--r); height:38px; padding:0 12px; outline:0; cursor:pointer; }
select.sel:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--ring); }

/* ---------- slider ---------- */
.rng { -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:4px;
  background:linear-gradient(90deg, var(--primary) var(--p,50%), var(--border-2) var(--p,50%)); outline:0; margin:0; }
.rng::-webkit-slider-thumb { -webkit-appearance:none; width:17px; height:17px; border-radius:50%; background:var(--surface); border:2.5px solid var(--primary); cursor:pointer; box-shadow:var(--sh-1); transition:transform .1s; }
.rng::-webkit-slider-thumb:active { transform:scale(1.15); }
.rng::-moz-range-thumb { width:17px; height:17px; border-radius:50%; background:var(--surface); border:2.5px solid var(--primary); cursor:pointer; }
.rng[disabled] { opacity:.5; }
.rng[disabled]::-webkit-slider-thumb { border-color:var(--ink-3); }
.slider-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; font-size:var(--s--1); }
.slider-row .v { font-family:var(--mono); color:var(--primary-ink); font-weight:600; background:var(--primary-soft); border-radius:var(--r-xs); padding:1px 8px; }
.ticks { display:flex; justify-content:space-between; font-size:var(--s--2); color:var(--ink-3); margin-top:5px; }

/* ---------- switch / check / radio ---------- */
.switch { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--s-0); user-select:none; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .track { width:40px; height:23px; border-radius:var(--r-pill); background:var(--border-2); position:relative; transition:background .16s; flex:none; }
.switch .track::after { content:""; position:absolute; inset-block-start:2px; inset-inline-start:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:var(--sh-1); transition:inset-inline-start .16s; }
.switch input:checked + .track { background:var(--primary); }
.switch input:checked + .track::after { inset-inline-start:19px; }
.switch input:focus-visible + .track { outline:2px solid var(--ring); outline-offset:2px; }
.opt { display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:var(--s-0); user-select:none; }
.opt input { position:absolute; opacity:0; }
.opt .box { width:19px; height:19px; border:1.5px solid var(--border-2); border-radius:var(--r-xs); background:var(--surface); display:grid; place-items:center; transition:.14s; }
.opt.radio .box { border-radius:50%; }
.opt input:checked + .box { background:var(--primary); border-color:var(--primary); }
.opt .box svg { width:13px; height:13px; color:#fff; opacity:0; }
.opt input:checked + .box svg { opacity:1; }
.opt.radio .box::after { content:""; width:8px; height:8px; border-radius:50%; background:#fff; opacity:0; }
.opt.radio input:checked + .box::after { opacity:1; }
.opt input:focus-visible + .box { outline:2px solid var(--ring); outline-offset:2px; }

/* ---------- tabs ---------- */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); }
.tabs button { font:inherit; font-size:var(--s--1); font-weight:600; color:var(--ink-2); background:transparent; border:0; padding:10px 14px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs button:hover { color:var(--ink); }
.tabs button.on { color:var(--primary-ink); border-bottom-color:var(--primary); }
.tabpane { display:none; padding:18px 2px; font-size:var(--s-0); color:var(--ink-2); }
.tabpane.on { display:block; }

/* ---------- chip / badge / status ---------- */
.pill { font-size:var(--s--1); font-weight:600; padding:5px 11px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); }
.pill .d { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }
.pill.good { background:var(--primary-soft); color:var(--primary-ink); border-color:transparent; }
.pill.good .d { background:var(--primary); }
.pill.live { background:var(--mint-soft); color:var(--primary-ink); border-color:transparent; }
.pill.live .d { background:var(--mint); box-shadow:0 0 0 3px color-mix(in srgb, var(--mint) 28%, transparent); }
.pill.warn { background:var(--warn-soft); color:color-mix(in srgb, var(--warn) 72%, var(--ink)); border-color:transparent; }
.pill.warn .d { background:var(--warn); }
.pill.danger { background:var(--danger-soft); color:color-mix(in srgb, var(--danger) 74%, var(--ink)); border-color:transparent; }
.pill.danger .d { background:var(--danger); }

/* ---------- difficoltà: indicatore ad AGHI (ago a linguetta) ---------- */
/* N aghi pieni su 4; i vuoti restano flebili ma visibili. All'hover/focus gli
   aghi SCENDONO ruotando via e dall'alto cala la parola i18n — una rotazione
   verticale, come un tabellone split-flap. Grid-stack: aghi e parola condividono
   la cella (larghezza = la maggiore), così il ribaltamento non muove il layout. */
.diff { position:relative; display:inline-grid; place-items:center; vertical-align:middle;
  line-height:1; perspective:220px; }
.diff > * { grid-area:1 / 1; transition:transform .28s cubic-bezier(.2,.7,.2,1), opacity .22s ease;
  transform-origin:center; backface-visibility:hidden; }
.diff-needles { display:inline-flex; align-items:center; gap:1px; }
.diff-n { inline-size:8px; block-size:16px; color:var(--ink-2); flex:none; }
.diff-n.off { opacity:.2; }                       /* flebile ma presente */
.diff-word { white-space:nowrap; font-weight:600; font-size:var(--s--2); letter-spacing:.01em;
  color:var(--ink-2); pointer-events:none;
  opacity:0; transform:translateY(-70%) rotateX(75deg); }   /* in attesa, sopra e inclinata */
.diff:hover .diff-needles, .diff:focus-visible .diff-needles {
  opacity:0; transform:translateY(70%) rotateX(-75deg); }   /* gli aghi scendono ruotando via */
.diff:hover .diff-word, .diff:focus-visible .diff-word {
  opacity:1; transform:translateY(0) rotateX(0); }          /* la parola cala in posa */
.diff:focus-visible { outline:none; }
/* variante BADGE: chip translucido per leggibilità sopra le immagini (card capo) */
.diff.badge { background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--border);
  border-radius:var(--r-pill); padding:3px 8px; backdrop-filter:blur(3px); }
/* variante LG: pagina dettaglio, aghi più grandi */
.diff.lg .diff-n { inline-size:11px; block-size:22px; }
.diff.lg .diff-word { font-size:var(--s--1); }
/* Niente giravolte 3D con moto ridotto: solo dissolvenza in posa. */
@media (prefers-reduced-motion:reduce) {
  .diff > * { transition:opacity .16s ease; }
  .diff-word { transform:none; }
  .diff:hover .diff-needles, .diff:focus-visible .diff-needles { transform:none; }
  .diff:hover .diff-word, .diff:focus-visible .diff-word { transform:none; }
}
.chip-x { display:inline-flex; align-items:center; gap:7px; font-size:var(--s--1); font-weight:600; padding-block:5px; padding-inline:11px 6px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--border); color:var(--ink-2); }
.chip-x button { width:18px; height:18px; border:0; background:var(--border); color:var(--ink-2); border-radius:50%; cursor:pointer; display:grid; place-items:center; font-size:12px; line-height:1; }
.chip-x button:hover { background:var(--danger); color:#fff; }

/* ---------- tooltip (top layer, popover — non lo ritaglia nessun overflow) ----------
   Elemento condiviso creato da components.js; posizionato via JS. */
.tooltip { position:fixed; margin:0; inset:auto; z-index:var(--z-toast);
  background:var(--ink); color:var(--bg); font-size:var(--s--2); font-weight:600; line-height:1.3;
  white-space:nowrap; padding:5px 9px; border:0; border-radius:var(--r-sm); box-shadow:var(--sh-2); pointer-events:none; }

/* ---------- menu / dropdown (top layer, popover) ----------
   Markup: <button popovertarget="id">…</button> + <div class="menu" id="id" popover>…</div>
   Chiusura nativa: Esc + clic fuori (popover=auto). Posizione via components.js. */
.menu-wrap { display:inline-block; }
.menu { position:fixed; margin:0; inset:auto; z-index:var(--z-menu); min-width:190px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--sh-3); padding:6px; }
.menu button { width:100%; text-align:start; font:inherit; font-size:var(--s-0); color:var(--ink); background:transparent; border:0; border-radius:var(--r-sm); padding:8px 10px; cursor:pointer; display:flex; align-items:center; gap:10px; }
.menu button:hover { background:var(--surface-2); }
.menu button svg { width:16px; height:16px; color:var(--ink-2); }
.menu button .kbd { margin-inline-start:auto; font-family:var(--mono); font-size:var(--s--2); color:var(--ink-3); }
.menu .mdiv { height:1px; background:var(--border); margin:5px 4px; }
.menu button.danger { color:var(--danger); }
.menu button.danger svg { color:var(--danger); }

/* ---------- overlay / modal / command palette ---------- */
.overlay { position:fixed; inset:0; z-index:var(--z-overlay); background:color-mix(in srgb, var(--scrim) 46%, transparent); backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .18s, visibility .18s; }
.overlay.open { opacity:1; visibility:visible; }
.modal { width:min(440px,100%); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-3); transform:translateY(8px) scale(.99); transition:transform .18s; overflow:hidden; }
.overlay.open .modal { transform:none; }
.modal .mh { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 4px; }
.modal .mh h3 { font-size:var(--s-1); margin:0; }
.modal .mh p { margin:4px 0 0; font-size:var(--s--1); color:var(--ink-2); }
.modal .mb { padding:14px 20px; display:flex; flex-direction:column; gap:14px; }
.modal .mf { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px 18px; border-top:1px solid var(--border); background:var(--surface-2); }
.xbtn { width:30px; height:30px; border:0; background:transparent; color:var(--ink-3); border-radius:var(--r-sm); cursor:pointer; display:grid; place-items:center; flex:none; }
.xbtn:hover { background:var(--inset); color:var(--ink); }
.cmdk { width:min(560px,100%); align-self:start; margin-top:12vh; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-3); overflow:hidden; transform:translateY(8px) scale(.99); transition:transform .18s; }
.overlay.open .cmdk { transform:none; }
.cmdk .search { display:flex; align-items:center; gap:11px; padding:15px 18px; border-bottom:1px solid var(--border); }
.cmdk .search svg { width:19px; height:19px; color:var(--ink-3); }
.cmdk .search input { flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:var(--s-1); color:var(--ink); }
.cmdk .list { padding:8px; max-height:320px; overflow-y:auto; }
.cmdk .list .gl { font-size:var(--s--2); text-transform:uppercase; letter-spacing:.12em; color:var(--ink-3); font-weight:700; padding:8px 10px 4px; }
.cmdk .row { display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:var(--r-sm); cursor:pointer; font-size:var(--s-0); }
.cmdk .row:hover, .cmdk .row.sel { background:var(--primary-soft); }
.cmdk .row svg { width:17px; height:17px; color:var(--ink-2); }
.cmdk .row .kbd { margin-inline-start:auto; font-family:var(--mono); font-size:var(--s--2); color:var(--ink-3); }

/* ---------- toast ---------- */
.toasts { position:fixed; inset-inline-end:20px; inset-block-end:20px; z-index:var(--z-toast); display:flex; flex-direction:column; gap:10px; }
.toast { display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--border); border-inline-start:3px solid var(--primary); border-radius:var(--r); box-shadow:var(--sh-3); padding:12px 15px; font-size:var(--s--1); min-width:230px; transform:translateX(120%); transition:transform .32s cubic-bezier(.2,.9,.3,1); }
.toast.show { transform:none; }
.toast .ic.ok { width:22px; height:22px; border-radius:50%; background:var(--primary-soft); color:var(--primary-ink); display:grid; place-items:center; flex:none; }
.toast .ic.ok svg { width:14px; height:14px; }

/* ---------- chrome di dominio (canvas) ---------- */
.zoomctl { display:inline-flex; align-items:center; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:3px; box-shadow:var(--sh-1); }
.zoomctl button { width:30px; height:30px; border:0; background:transparent; color:var(--ink-2); border-radius:50%; cursor:pointer; display:grid; place-items:center; }
.zoomctl button:hover { background:var(--surface-2); color:var(--ink); }
.zoomctl button svg { width:17px; height:17px; }
.zoomctl .val { font-family:var(--mono); font-size:var(--s--1); font-weight:600; color:var(--ink); min-width:52px; text-align:center; }
.zoomctl .div { width:1px; height:18px; background:var(--border); margin:0 4px; }

.panel { width:270px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.panel .pg { padding:15px 16px; border-bottom:1px solid var(--border); }
.panel .pg:last-child { border-bottom:0; }
.panel .pg > h4 { font-size:var(--s--2); text-transform:uppercase; letter-spacing:.13em; color:var(--ink-3); margin:0 0 12px; }
.prop { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:var(--s--1); }
.prop:last-child { margin-bottom:0; }
.prop .k { color:var(--ink-2); }
.prop .vfield { font-family:var(--mono); font-size:var(--s--1); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-xs); padding:3px 9px; color:var(--ink); }
.prop .vfield b { color:var(--primary-ink); }

.yarns { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.yarns .y { width:30px; height:30px; border-radius:var(--r-sm); border:1px solid rgba(0,0,0,.12); cursor:pointer; }
.yarns .y.sel { box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
.yarns .add { width:30px; height:30px; border-radius:var(--r-sm); border:1.5px dashed var(--border-2); background:transparent; color:var(--ink-3); cursor:pointer; display:grid; place-items:center; }
.yarns .add:hover { border-color:var(--primary); color:var(--primary); }

.statusbar { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:8px 14px; font-size:var(--s--1); color:var(--ink-2); box-shadow:var(--sh-1); flex-wrap:wrap; }
.statusbar b { color:var(--ink); }
.statusbar .dot { width:6px; height:6px; border-radius:50%; background:var(--border-2); }

@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* ============================================================
   POSTURE & LAYOUT RESPONSIVE — palmo ≤640 · banco 641–1023 · scrivania ≥1024
   Estende «il contratto di base» (in cima), non lo duplica. Unici breakpoint:
   641px e 1024px, literal che rispecchiano --bp-banco/--bp-scrivania (tokens.css).
   Mobile-first: la base è «palmo», poi si sale.
   ============================================================ */

/* --- visibilità per postura --- */
@media (max-width:640px)  { .hide-palmo { display:none !important; } }
.only-palmo { display:none !important; }
@media (max-width:640px)  { .only-palmo { display:revert-layer; } }
@media (max-width:1023px) { .only-scrivania { display:none !important; } }
@media (min-width:1024px) { .hide-scrivania { display:none !important; } }

/* ---------- SHELL «CREARE» (workspace) ----------
   Rail + canvas + pannello che collassano per postura. Slot: .ws-top/.ws-rail/
   .ws-canvas/.ws-panel. Il rail è UN solo nodo che si riposiziona (niente duplicati). */
.workspace { display:grid; block-size:100dvh; min-block-size:0; background:var(--bg);
  grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top" "canvas" "rail"; }
.ws-top    { grid-area:top; min-inline-size:0; }
.ws-canvas { grid-area:canvas; position:relative; min-inline-size:0; min-block-size:0; overflow:hidden; }
.ws-rail   { grid-area:rail; }
.ws-panel  { display:none; }                       /* persistente solo su scrivania */

@media (min-width:641px) {          /* banco: due zone (rail vert. + canvas), pannello a comparsa */
  .workspace { grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"top top" "rail canvas"; }
}
@media (min-width:1024px) {         /* scrivania: rail + canvas + pannello persistenti */
  .workspace { grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-areas:"top top top" "rail canvas panel"; }
  .ws-panel { grid-area:panel; display:block; }
}

/* su palmo il rail diventa una BARRA orizzontale in basso (thumb zone) */
@media (max-width:640px) {
  .ws-rail.rail, .ws-rail > .rail { flex-direction:row; justify-content:space-around;
    border-radius:0; border-inline:0; border-block-end:0; border-block-start:1px solid var(--border);
    box-shadow:none; padding-block:6px; padding-block-end:max(6px, env(safe-area-inset-bottom)); }
  .ws-rail .hdiv { display:none; }
}

/* ---------- bottom sheet / side drawer (top layer, popover) ----------
   Per il pannello proprietà su banco (drawer) e palmo (sheet), e i menu lunghi.
   Markup: <button popovertarget="id"> + <div class="sheet|drawer" id="id" popover> */
.sheet, .drawer { position:fixed; margin:0; border:0; padding:0; background:var(--surface);
  box-shadow:var(--sh-3); overflow:auto; overscroll-behavior:contain; }
.sheet  { inset:auto 0 0 0; inline-size:100%; max-block-size:88dvh;
  border-start-start-radius:var(--r-xl); border-start-end-radius:var(--r-xl);
  padding-block-end:env(safe-area-inset-bottom); }
.sheet .grip { inline-size:38px; block-size:4px; border-radius:var(--r-pill); background:var(--border-2); margin:10px auto 2px; }
.drawer { inset-block:0; inset-inline-end:0; inline-size:min(320px,86vw); border-inline-start:1px solid var(--border); }
.sheet::backdrop, .drawer::backdrop { background:color-mix(in srgb, var(--scrim) 44%, transparent); }

/* ---------- collassi dei componenti di chrome (palmo) ---------- */
@media (max-width:640px) {
  /* tabs: scorrono in orizzontale, niente a-capo */
  .tabs { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .tabs button { flex:none; white-space:nowrap; }
  /* toolbar: una riga scorrevole */
  .toolbar { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .toolbar::-webkit-scrollbar { display:none; }
  /* modal → bottom sheet a tutta larghezza */
  .overlay { place-items:end center; padding:0; }
  .modal { inline-size:100%; max-inline-size:100%;
    border-end-start-radius:0; border-end-end-radius:0;
    border-start-start-radius:var(--r-xl); border-start-end-radius:var(--r-xl); transform:translateY(100%); }
  .overlay.open .modal { transform:none; }
}

/* ---------- «rimando gentile»: superfici di Creare aperte su palmo ---------- */
.nudge { display:flex; gap:12px; align-items:flex-start; background:var(--primary-soft); color:var(--primary-ink);
  border:1px solid color-mix(in srgb, var(--primary) 22%, transparent); border-radius:var(--r-lg); padding:14px 16px; font-size:var(--s--1); }
.nudge svg { inline-size:20px; block-size:20px; flex:none; color:var(--primary); margin-block-start:1px; }
.nudge b { display:block; color:var(--ink); font-size:var(--s-0); margin-block-end:2px; }
.nudge.palmo-only { display:none; }
@media (max-width:640px) { .nudge.palmo-only { display:flex; } }

/* ============================================================
   MODALITÀ LAVORAZIONE (Eseguire) — due orientamenti
   Metti .exec sull'antenato (target ≥44px) e [data-work][data-wake] (schermo attivo).
   Default = portrait «palmo» (one-thing-per-screen, wireframe 03-4 §4).
   .cockpit (aggiunta da components.js in landscape ≥banco) = evento a sx, controlli a dx.
   ============================================================ */
.work { display:flex; flex-direction:column; min-block-size:100dvh; background:var(--bg); }
.work-head { display:flex; align-items:center; gap:10px; padding:12px 16px; border-block-end:1px solid var(--border); font-size:var(--s--1); color:var(--ink-2); }
.work-head b { color:var(--ink); }
.work-head .prog { margin-inline-start:auto; font-family:var(--mono); }
.work-stage { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px; padding:24px; }
.work-row { font-family:var(--mono); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--ink); font-size:clamp(3.2rem, 20vw, 7rem); }
.work-dir { font-size:var(--s-1); color:var(--ink-2); font-weight:600; }
.work-next { background:var(--mint-soft); color:var(--primary-ink); border:1px solid color-mix(in srgb, var(--mint) 40%, transparent);
  border-radius:var(--r-lg); padding:14px 18px; font-size:var(--s-1); font-weight:600; max-inline-size:32ch; }
.work-controls { display:flex; gap:12px; padding:16px; padding-block-end:max(16px, env(safe-area-inset-bottom));
  border-block-start:1px solid var(--border); background:var(--surface); }
.work-controls .btn { flex:1; }
.work.cockpit { flex-direction:row; }
.work.cockpit .work-head { position:absolute; inset-block-start:0; inset-inline:0; border-block-end:0; background:transparent; }
.work.cockpit .work-controls { flex-direction:column; justify-content:center; inline-size:min(40%,380px);
  border-block-start:0; border-inline-start:1px solid var(--border); }

/* ============================================================
   STAGE — canvas device-aware (comportamento in components.js)
   pinch/pan su touch, rotella+drag su puntatore; contenuto SVG → aspect-ratio
   del campione sempre corretto a ogni scala (vettoriale).
   Markup: <div class="stage" data-stage="id"><svg data-stage-scene>…</svg></div>
   ============================================================ */
.stage { position:relative; inline-size:100%; block-size:100%; overflow:hidden; background:var(--surface);
  touch-action:none; cursor:grab; user-select:none; }
.stage:active { cursor:grabbing; }
/* NB: `will-change:transform` NON qui — lo Stage (components.js) lo attiva solo
   DURANTE il gesto e lo toglie a riposo. Da fermo il layer GPU va evitato: pinna
   la texture alla risoluzione di fit e lo zoom diventa un upscaling del bitmap →
   moiré a certi fattori di scala su contenuti fitti (es. il campo-maglia). */
.stage-scene { position:absolute; inset-block-start:0; inset-inline-start:0; transform-origin:0 0; }


/* ---------- caption (sonda 30 ago: UNA primitiva per il maiuscoletto di gruppo)
   .eyebrow · .sel-grp · .cmdk .gl · .panel .pg>h4 · .ed-tree .lbl · .insp-cap
   sono dialetti storici di QUESTA primitiva: i pannelli nuovi usano .caption. */
.caption { font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); }

/* ---------- toolbar della tela (.tbar) — pulsantiera alla Word/CAD (30 ago)
   Tre taglie di bottone: .sm solo glifo · .md glifo+testo · .lg grande col
   testo sotto. Gruppi separati da .sep; stato attivo .on; valore mono .tb-val. */
.tbar { display:flex; align-items:center; gap:2px; padding:4px 8px; flex-wrap:wrap;
  background:var(--surface); border-bottom:1px solid var(--border); user-select:none; }
.tbar .grp { display:flex; align-items:center; gap:2px; }
.tbar .sep { width:1px; align-self:stretch; margin:4px 6px; background:var(--border); }
.tb-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; background:none; color:var(--ink-2);
  border-radius:var(--r-xs); cursor:pointer; font:inherit; font-size:var(--s--2);
  min-block-size:var(--tap-min); padding:0 6px; }
.tb-btn:hover { background:var(--inset); color:var(--ink); }
.tb-btn.on { background:var(--primary-soft); color:var(--primary-ink);
  border-color:var(--primary-line); }
.tb-btn:disabled { opacity:.4; cursor:not-allowed; }
.tb-btn .ic { font-size:14px; line-height:1; }
.tb-btn .lbl { font-size:10px; }
.tb-btn.sm { padding:0 5px; }
.tb-btn.lg { flex-direction:column; gap:2px; padding:4px 10px; min-inline-size:56px; }
.tb-btn.lg .ic { font-size:18px; }
.tb-val { font-family:var(--font-mono); font-size:11px; color:var(--ink-2);
  min-inline-size:44px; text-align:center; font-variant-numeric:tabular-nums; }