/* L'aspetto dei nodi sul piano e di «Riordina» (owner 1-10: S1, S4, S5; mockup del 2-10). Dal 3-10 (SB1, D1-A) i
   generatori sono il nodo grande del 12-09 (board_nodes.css, .bs-grande); qui restano gli altri nodi, compatti fino a SB4.
   Misure gemelle di CARD e COLUMNS in board_studio.js (nodo 232 × 74, porte ogni 24 px, colonne a 24 px dal bordo e
   40 px fra loro, nodi da 92 px sotto la testata dell'area): si cambiano insieme. Solo gettoni --bs-* della board,
   in chiaro e in scuro. I gesti non dipendono da queste classi, le prove si: data-block-id, .bs-card, .bs-node-*. */

/* Il nodo compatto: miniatura | tipo, titolo su due righe, una riga che dice cosa contiene. */
#board-studio .bs-card.bs-compact {display:grid;grid-template-columns:74px minmax(0,1fr);grid-template-rows:var(--bs-body,74px);
  align-items:start;border-radius:10px;overflow:hidden;background:var(--bs-panel);box-shadow:0 2px 6px #00000008}
#board-studio .bs-card.bs-compact.bs-no-mini {grid-template-columns:minmax(0,1fr)}
#board-studio .bs-card.bs-compact.bs-note {border-top:1px solid var(--bs-line);box-shadow:inset 3px 0 0 color-mix(in srgb,var(--bs-accent) 55%,var(--bs-line))}
#board-studio .bs-compact .bs-mini {grid-column:1;grid-row:1;position:relative;width:74px;height:74px;display:flex;align-items:center;
  justify-content:center;overflow:hidden;background:var(--bs-soft);color:var(--bs-muted);border-right:1px solid var(--bs-line)}
#board-studio .bs-compact .bs-mini img {display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;background:none}
#board-studio .bs-compact .bs-mini svg {width:22px;height:22px;opacity:.6}
#board-studio .bs-compact .bs-mini-empty {width:62px;height:62px;margin:6px;border:1px dashed var(--bs-line);border-radius:7px;background:transparent}
#board-studio .bs-compact .bs-mini-play {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;
  border-radius:50%;background:#17171dcc;color:#fff;font-size:10px;line-height:24px;text-align:center;padding-left:2px}
#board-studio .bs-compact .bs-body {grid-row:1;grid-column:2;min-width:0;padding:7px 30px 6px 10px;display:flex;flex-direction:column;gap:1px}
#board-studio .bs-compact.bs-no-mini .bs-body {grid-column:1;padding-left:12px}
#board-studio .bs-compact .bs-card-top {position:static;display:block;padding:0;margin:0;background:none;
  font-size:11px;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--bs-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board-studio .bs-compact .bs-card-top svg {display:inline-block;width:12px;height:12px;margin-right:5px;vertical-align:-2px}
/* Visita del pezzo 5: con la miniatura il tipo si vede gia', e l'iconcina lascia il posto al nome intero («Immagine · keyframe»). */
#board-studio .bs-compact:not(.bs-no-mini) .bs-card-top {font-size:10.5px}
#board-studio .bs-compact:not(.bs-no-mini) .bs-card-top svg {display:none}
#board-studio .bs-card.bs-compact h3 {margin:0;padding:0;height:auto;font-size:13px;line-height:1.25;font-weight:600;letter-spacing:-.01em;
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;cursor:inherit}
#board-studio .bs-compact .bs-card-foot {position:static;inset:auto;display:block;margin:0;
  overflow:hidden;font-size:11px;line-height:1.35;color:var(--bs-muted);white-space:nowrap;text-overflow:ellipsis}
#board-studio .bs-compact .bs-card-foot svg {width:11px;height:11px;margin-right:3px;vertical-align:-1px}
#board-studio .bs-compact .bs-cost {color:var(--bs-ink);font-weight:600}
#board-studio .bs-compact .bs-card-more {top:4px;right:4px}

/* S4: i nomi delle colonne quando la Seed Board e' in colonne, col «+» che aggiunge in quella colonna. */
#board-studio .bs-columns {position:absolute;left:0;right:0;top:56px;height:28px;pointer-events:none}
#board-studio .bs-column-head {position:absolute;top:0;height:28px;display:flex;align-items:center;gap:6px;pointer-events:auto;
  border-bottom:1px solid color-mix(in srgb,var(--bs-group) 30%,var(--bs-line));font-size:11px;color:var(--bs-muted)}
#board-studio .bs-column-name {font-weight:600;color:var(--bs-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board-studio .bs-column-count {font-variant-numeric:tabular-nums}
#board-studio .bs-column-add {margin-left:auto;width:26px;height:26px;padding:0}
#board-studio .bs-column-add svg {width:14px;height:14px}

/* S4: l'anteprima di Riordina. I nodi tratteggiati sono dove andranno; quelli che si spostano si schiariscono. */
#board-studio .bs-ghost {position:absolute;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 12px;
  border:1.5px dashed var(--bs-accent);border-radius:10px;background:color-mix(in srgb,var(--bs-panel) 75%,transparent);pointer-events:none}
#board-studio .bs-ghost-kind {font-size:11px;color:var(--bs-muted)}
#board-studio .bs-ghost-title {font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board-studio .bs-ghost-area {position:absolute;border:1.5px dashed var(--bs-muted);border-radius:12px;pointer-events:none}
/* Controllo SB1 (B3): i gruppi che si spostano per fare posto, col loro nome dove andranno; quelli di adesso si schiariscono. */
/* Controllo di SB7 (C4): nell'anteprima della storia la vista inquadra tutta la Seed Board (29%) e i nomi dei gruppi tratteggiati,
   13 unita' del piano, erano di circa 4 px. Ora sono a misura di schermo (12 px: --bs-inv = 1/zoom; al piu' 64 unita'), su un
   fondo che li fa leggere sopra i nodi di adesso, tagliati coi puntini alla larghezza del gruppo. */
#board-studio .bs-ghost-area-name {position:absolute;left:14px;top:10px;max-width:calc(100% - 28px);font-size:min(calc(12px * var(--bs-inv,1)),64px);
  line-height:1.5;font-weight:600;color:var(--bs-muted);padding:0 .5em;border-radius:.35em;background:var(--bs-panel);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Quarto giro (C1 del controllo delle correzioni di SB7): nei gruppi stretti il nome e' la sigla (board_studio.js, nomiAnteprima).
   Quella di uno shot («SH-…8B21») al 18% chiede piu' posto della cornice (318 unita'): parte dal bordo, con meno margine, e puo'
   uscire a destra nello stacco fra le colonne (80 unita', ne usa al piu' 40): il codice corto si legge intero. */
#board-studio .bs-ghost-area-name[data-detto="sigla"] {left:0;max-width:none;padding:0 .25em}
#board-studio.bs-previewing .bs-area.bs-moving {opacity:.45}
#board-studio .bs-columns-preview {position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
#board-studio .bs-columns-preview .bs-column-head {height:24px;border-bottom:1.5px dashed var(--bs-accent);pointer-events:none}
#board-studio.bs-previewing .bs-card {pointer-events:none}
#board-studio.bs-previewing .bs-card.bs-moving {opacity:.4}
#board-studio.bs-previewing .bs-notice {display:none}
#board-studio .bs-preview-bar {position:absolute;left:50%;bottom:72px;transform:translateX(-50%);z-index:11;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:min(760px,calc(100% - 32px));padding:10px 12px 10px 16px;background:var(--bs-panel);border:1px solid var(--bs-line);
  border-radius:10px;box-shadow:0 8px 30px #0002}
#board-studio .bs-preview-text {flex:1;min-width:0;font-size:12px;line-height:1.45;white-space:normal}
#board-studio .bs-preview-bar button {flex:none;border-color:var(--bs-line)}
#board-studio .bs-preview-bar .bs-primary {background:var(--bs-accent);border-color:var(--bs-accent);color:var(--bs-panel)}
#board-studio .bs-preview-bar .bs-primary:hover {background:var(--bs-accent);opacity:.9}

/* S1: «Aggiungi nodo» per famiglie, ogni tipo con il suo scopo. */
#board-studio .bs-node-family {margin:14px 0 2px;font-size:11px;font-weight:600;color:var(--bs-muted)}
#board-studio .bs-node-type .bs-node-copy {flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#board-studio .bs-node-type .bs-node-copy strong {font-size:12px;font-weight:600}
#board-studio .bs-node-type .bs-node-copy small {font-size:11px;line-height:1.35;color:var(--bs-muted)}
#board-studio .bs-node-cost {flex:none;padding:1px 6px;border:1px solid var(--bs-line);border-radius:4px;font-size:10px;color:var(--bs-muted)}

/* SB4 (piano dei pezzi, owner 3-10): gli altri nodi della Seed Board come nella proposta. La testata e' quella del
   generatore (board_nodes.css: .bs-node-head, .bs-spia, .bs-stretto); qui la cornice e la parte di ogni forma, a misure
   FISSE, gemelle di ALTRI in board_studio.js (si cambiano insieme): testata 34; Materiale 240, il file nella sua forma
   (altezza in linea) e la riga sotto 24; Inquadratura 270, corpo 8 + «Intenzione» 46 + 6 + prompt 14 + 80 + 10; Prompt
   Designer 320, corpo 8 + prompt 91 + 6 + stato 22 + 6 + gesti 26 + 10 = 169; Copione 300, corpo 8 + 96 + 10 = 114;
   Montaggio 300, caselle 51 a tre per riga e «N s di M» 16. I testi si tagliano coi puntini (il testo intero e' nel title).
   Il nastro delle versioni e' quello del SB3 (.bs-node-versions, 28). Solo gettoni --bs-*, nei due temi. */
#board-studio .bs-card.bs-nodo {display:flex;flex-direction:column;overflow:hidden;border:0;border-radius:10px;background:var(--bs-panel);
  box-shadow:0 0 0 1px var(--bs-line),0 1px 0 #0000000d}
#board-studio .bs-card.bs-nodo:hover {box-shadow:0 0 0 1px var(--bs-line),0 6px 18px #00000014}
#board-studio .bs-card.bs-nodo.bs-dragging {box-shadow:0 0 0 1px var(--bs-line),0 14px 35px #0003}
#board-studio .bs-nodo > * {flex:none}
#board-studio .bs-nodo .bs-card-more {position:static;flex:none;width:26px;height:26px;padding:0;font-size:15px;box-shadow:none;background:none;color:var(--bs-muted)}
#board-studio .bs-nodo .bs-card-more:hover {background:var(--bs-soft);color:var(--bs-ink)}
#board-studio .bs-node-head .bs-codice {font:500 11px/1 var(--cifre,ui-monospace,monospace);color:var(--bs-muted)}
/* Materiale (Riferimento, Girato): il file protagonista; il nodo si trascina anche dal file (l'immagine non prende il
   puntatore), il doppio clic apre il visore. */
#board-studio .bs-nodo-visual {position:relative;overflow:hidden;background:var(--bs-bg);border-bottom:1px solid var(--bs-line);cursor:zoom-in}
#board-studio .bs-nodo-visual img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
#board-studio .bs-nodo-vuoto {position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:12px;
  color:var(--bs-muted);font-size:11.5px;line-height:1.35;text-align:center;
  background:repeating-linear-gradient(135deg,var(--bs-soft) 0 10px,color-mix(in srgb,var(--bs-soft) 55%,var(--bs-panel)) 10px 20px)}
#board-studio .bs-nodo-vuoto svg {width:24px;height:24px;opacity:.7}
#board-studio .bs-nodo-play {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;
  background:#17171dcc;color:#fff;font-size:12px;line-height:30px;text-align:center;padding-left:2px;pointer-events:none}
#board-studio .bs-nodo-meta {display:block;padding:0 11px;font-size:10.5px;line-height:24px;color:var(--bs-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Il corpo dei nodi di testo e del montaggio: alto quanto dice ALTRI (in linea), niente esce. */
#board-studio .bs-nodo-corpo {display:flex;flex-direction:column;padding:8px 11px 10px;min-width:0;overflow:hidden}
#board-studio .bs-nodo .bs-nodo-etichetta {display:block;flex:none;height:14px;font-size:10px;line-height:14px;font-weight:500;color:var(--bs-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board-studio .bs-nodo .bs-nodo-testo {flex:none;margin:0;padding:0;font-size:11.5px;line-height:16px;color:var(--bs-ink);white-space:normal;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
/* Inquadratura: «Intenzione» su due righe, poi il testo che va al modello su cinque. */
#board-studio .bs-nodo-intenzione {flex:none;height:46px;margin-bottom:6px;overflow:hidden}
#board-studio .bs-nodo .bs-nodo-intenzione .bs-nodo-testo {height:32px;-webkit-line-clamp:2}
#board-studio .bs-nodo-inquadratura .bs-nodo-corpo > .bs-nodo-testo {height:80px;-webkit-line-clamp:5}
/* Copione: il testo su sei righe. */
#board-studio .bs-nodo-copione .bs-nodo-corpo > .bs-nodo-testo {height:96px;-webkit-line-clamp:6}
/* Prompt Designer: il prompt (che va al modello) in un riquadro, poi lo stato e da dove arriva, poi i due gesti. */
#board-studio .bs-nodo-prompt-blocco {flex:none;height:91px;display:flex;flex-direction:column;gap:3px;padding:6px 8px;border:1px solid var(--bs-line);
  border-left:2px solid var(--bs-k-testo);border-radius:6px;background:var(--bs-bg);overflow:hidden}
#board-studio .bs-nodo .bs-nodo-prompt-blocco .bs-nodo-testo {height:60px;font-size:11px;line-height:15px;-webkit-line-clamp:4}
#board-studio .bs-nodo-riga {flex:none;display:flex;align-items:center;gap:8px;height:22px;margin-top:6px;min-width:0}
#board-studio .bs-nodo-stato {flex:none;display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px 0 6px;border:1px solid var(--bs-line);
  border-radius:999px;font-size:10.5px;color:var(--bs-ink);white-space:nowrap}
#board-studio .bs-nodo-stato::before {content:'';width:6px;height:6px;border-radius:50%;background:var(--bs-s-grigio)}
#board-studio .bs-nodo-stato[data-stato="verde"]::before {background:var(--bs-s-ok)}
#board-studio .bs-nodo-stato[data-stato="ambra"]::before {background:var(--bs-s-ambra)}
#board-studio .bs-nodo-stato[data-stato="rossa"]::before {background:var(--bs-s-rosso)}
#board-studio .bs-nodo-riga .bs-prompt-origin {flex:1;min-width:0;justify-content:flex-start;font-size:10.5px;line-height:22px;text-align:left}
#board-studio .bs-nodo-azioni {flex:none;display:flex;align-items:center;gap:6px;height:26px;margin-top:6px;min-width:0}
#board-studio .bs-nodo-azione {flex:none;height:26px;padding:0 10px;border:1px solid var(--bs-line);border-radius:6px;background:var(--bs-soft);
  color:var(--bs-ink);font-size:11px;white-space:nowrap}
#board-studio .bs-nodo-azione:hover {border-color:var(--bs-muted)}
#board-studio .bs-conferma-usa {border-color:var(--bs-ink);font-weight:650}
#board-studio .bs-nodo-azione:disabled {opacity:.45;cursor:default}
#board-studio .bs-nodo .bs-node-versions {display:flex;align-items:center;padding:0 10px;border-top:1px solid var(--bs-line);min-width:0;overflow:hidden}
#board-studio .bs-nodo .bs-node-versions .bs-versioni {flex:1}
#board-studio .bs-nodo.bs-mostra-versione {box-shadow:0 0 0 1px var(--bs-ink),0 2px 6px #00000014}
/* Montaggio: le caselle degli shot (la locandina, il codice), tre per riga; tratteggiate se vuote, da generare o non
   montate; l'ultima dice quanti altri. */
#board-studio .bs-striscia {flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:51px;gap:4px;min-width:0}
#board-studio .bs-striscia-pezzo {position:relative;overflow:hidden;border:1px dashed var(--bs-line);border-radius:4px;background:var(--bs-soft)}
#board-studio .bs-striscia-pezzo[data-stato="pronto"] {border-style:solid}
#board-studio .bs-striscia-pezzo[data-stato="non_montato"] {opacity:.6}
#board-studio .bs-striscia-pezzo[data-stato="mancante"] {border-color:var(--bs-s-ambra)}
#board-studio .bs-striscia-pezzo img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
#board-studio .bs-striscia-codice {position:absolute;left:4px;right:4px;bottom:2px;font:600 9.5px/1.3 var(--cifre,ui-monospace,monospace);color:var(--bs-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board-studio .bs-striscia-pezzo:has(img) .bs-striscia-codice {color:#fff;text-shadow:0 1px 2px #000}
#board-studio .bs-striscia-altri {display:grid;place-items:center;border-style:solid;font-size:12px;font-weight:600;color:var(--bs-muted)}
#board-studio .bs-striscia.bs-striscia-vuota {display:grid;place-items:center;grid-template-columns:1fr;border:1px dashed var(--bs-line);border-radius:6px;
  font-size:11px;color:var(--bs-muted)}
#board-studio .bs-nodo .bs-nodo-durata {flex:none;display:block;height:16px;margin:6px 0 0;padding:0;font-size:10.5px;line-height:16px;color:var(--bs-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:none}
/* «Confronta col brief» (il riquadro del SB3, .bs-confronto): il brief e il prompt uno sopra l'altro, il controllo sotto. */
#board-studio .bs-confronto-titoletto {margin:4px 0 0;font-size:11px;font-weight:600;color:var(--bs-muted)}
#board-studio .bs-confronto-brief {white-space:pre-wrap;overflow-wrap:anywhere;max-height:160px;overflow:auto;padding:8px 10px;border-radius:7px;
  background:var(--bs-bg);user-select:text;-webkit-user-select:text}
#board-studio .bs-confronto-avviso {color:var(--bs-danger-ink)}
/* Controllo di SB4 (C1): sotto il 100% le porte (a misura di schermo: 10 px di raggio piu' 2 di alone) coprivano le prime
   lettere dei testi (da 1 a 4 px al 56%, 70% e 85%: «na tazza fumante…», «ompt · va al modello»). Il corpo dei nodi di testo
   ha 24 di margine ai lati: al 55%, dove il testo c'e' ancora, la porta arriva a 22; piu' lontano resta il titolo, che
   comincia dopo l'icona del tipo. */
#board-studio .bs-nodo.bs-testuale .bs-nodo-corpo {padding-left:24px;padding-right:24px}
/* Controllo di SB4 (C6): al telefono (fino a 760 px) e col dito (pointer:coarse) i bottoni sui nodi sono alti almeno 32
   (erano 20-26): «…», «Confronta col brief», «Conferma e usa», «Da: …», le versioni e «Cosa è cambiato», il ▾ dei tentativi,
   la «Guida», il brief e le reference del generatore, il suo piede, la task e i codici degli elementi. Le misure dei nodi
   non cambiano: lo spazio viene dai margini interni (il nastro delle versioni sale di 4 sul margine sotto il corpo, sul
   generatore sul margine del piede; il Prompt Designer stringe di 4 il riquadro del prompt e di 8 gli stacchi; la «Guida»
   sporge di 2 sopra e sotto, e la riga del modello resta alta 28: i comandi dell'immagine tengono una riga di campi). */
@media (max-width:760px), (pointer:coarse) {
  #board-studio :is(.bs-nodo,.bs-grande) .bs-card-more {width:32px;height:32px}
  #board-studio .bs-nodo .bs-nodo-corpo {padding-bottom:6px}
  #board-studio .bs-nodo-prompt-blocco {height:87px;padding:4px 8px}
  #board-studio .bs-nodo-riga {height:32px;margin-top:2px}
  #board-studio .bs-nodo-riga .bs-prompt-origin {height:32px;line-height:32px}
  #board-studio .bs-nodo-azioni {height:32px;margin-top:2px}
  #board-studio .bs-nodo-azione {height:32px}
  #board-studio .bs-card .bs-node-versions.bs-testo-versioni {height:32px!important;margin-top:-4px}
  #board-studio .bs-card.bs-grande .bs-node-versions {height:52px!important;margin-top:-4px}
  #board-studio .bs-versioni {height:32px}
  #board-studio .bs-versione, #board-studio .bs-versioni-confronta {height:32px}
  #board-studio .bs-versione-tentativi {width:24px;height:32px}
  #board-studio .bn-guide-toggle {height:32px;margin:-2px 0}
  #board-studio .bs-prompt-preview {min-height:32px}
  #board-studio .bs-reference-thumb {width:32px;height:32px}
  #board-studio .bn-node-footer button {min-height:32px}
  #board-studio .bs-work-actions {height:32px;bottom:5px}
  #board-studio .bs-card.bs-with-labels .bs-work-actions {bottom:37px}
  #board-studio .bs-work-actions > button {min-height:32px}
  #board-studio .bs-labels {height:32px;bottom:0}
  #board-studio .bs-label {height:32px;line-height:30px}
}
/* SB6 (piano dei pezzi della Seed Board, owner 3-10: D6-A): il Personaggio e l'Attore. Misure gemelle di ALTRI.personaggio in
   board_studio.js (si cambiano insieme): largo 240, testata 34, il volto quadrato 240 (altezza in linea), il corpo 86 (in
   linea): 8 sopra, lo stato e il tipo 26, 4, il passaporto 18, 4, il percorso 18, 8 sotto. I testi si tagliano coi
   puntini (interi nel title). Il volto non prende il puntatore: il nodo si trascina anche da li'. Solo gettoni --bs-*. */
#board-studio .bs-nodo-personaggio .bs-volto {position:relative;overflow:hidden;background:var(--bs-bg);border-bottom:1px solid var(--bs-line)}
#board-studio .bs-nodo-personaggio .bs-volto img {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
#board-studio .bs-volto-vuoto {position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:18px;
  color:var(--bs-muted);font-size:11.5px;line-height:1.35;text-align:center;
  background:repeating-linear-gradient(135deg,var(--bs-soft) 0 10px,color-mix(in srgb,var(--bs-soft) 55%,var(--bs-panel)) 10px 20px)}
#board-studio .bs-volto-vuoto svg {width:88px;height:88px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;opacity:.6}
#board-studio .bs-nodo-personaggio .bs-personaggio-corpo {gap:4px;padding:8px 11px}
#board-studio .bs-personaggio-chips {flex:none;display:flex;align-items:center;gap:6px;height:26px;min-width:0}
#board-studio .bs-personaggio-chips .bs-personaggio-stato {flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
#board-studio .bs-personaggio-tipo {flex:none;height:20px;padding:0 7px;border-radius:999px;background:var(--bs-soft);font-size:10.5px;line-height:20px;
  color:var(--bs-muted);white-space:nowrap}
#board-studio .bs-nodo-personaggio .bs-personaggio-passaporto, #board-studio .bs-nodo-personaggio .bs-personaggio-percorso {flex:none;display:block;height:18px;
  margin:0;padding:0;font-size:11px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#board-studio .bs-nodo-personaggio .bs-personaggio-passaporto {color:var(--bs-ink)}
#board-studio .bs-nodo-personaggio .bs-personaggio-percorso {color:var(--bs-muted)}