.relazioni-toolbar-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 1rem 3rem 0;
}
.relazioni-howto-btn {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.relazioni-howto-btn:hover { border-color: var(--accent); color: var(--accent); }

/* spiegazione della pagina, prima sempre in vista in cima (occupava
   spazio anche per chi la conosce gia', richiesto dal vivo) - ora un
   vero <dialog>, apre/chiude col pulsante "❓ How to" qui sopra */
.relazioni-howto-dialog {
  width: min(560px, 92vw);
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem 1.4rem;
}
.relazioni-howto-dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.relazioni-howto-dialog h2 {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: var(--accent);
  margin: 0 0 0.8rem;
}
.relazioni-howto-dialog p {
  color: var(--text-dim);
  font-size: 0.86rem;
  line-height: 1.6;
  margin: 0;
}
.relazioni-howto-dialog p strong { color: var(--text); }

/* legenda dei 3 colori (stesso significato della tendina "Colore" nel
   profilo di un personaggio) - un pallino colorato per voce, come i
   pallini gia' usati li' */
.relazioni-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.relazioni-legend-item { display: flex; align-items: center; gap: 0.4rem; }
.relazioni-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.relazioni-legend-dot--rosso { background: var(--cat-morte); }
.relazioni-legend-dot--verde { background: var(--cat-luogo); }
.relazioni-legend-dot--grigio { background: #b3aa9c; }
.relazioni-legend-protagonist {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  flex: 0 0 auto;
}

#graph-root {
  position: relative;
  height: calc(100vh - 200px);
  min-height: 420px;
  margin-top: 0.6rem;
  cursor: grab;
}
#graph-root:active { cursor: grabbing; }
#graph-root .loading, #graph-root .error {
  padding: 1rem 3rem;
  color: var(--text-dim);
  font-family: var(--font-ui);
}

.rel-svg { display: block; }

/* --- filtri (Associazione/Luogo/Colore relazione, in alto a destra) ----
   "fixed" rispetto alla FINESTRA (non ad #graph-root, che resta a tutta
   larghezza anche a pannello aperto: "absolute" ci finiva sotto, bug
   segnalato dal vivo) - "right" si sposta quando il pannello di
   dettaglio si apre (vedi .rel-filters-bar--panel-open, attaccata/tolta
   in showDetail/closePanel), stessa transizione di apertura del pannello
   stesso (.detail-panel in theme.css) cosi' si "spostano" insieme */
.rel-filters-bar {
  position: fixed;
  top: 78px;
  right: 0.8rem;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
  transition: right 0.28s ease;
}
.rel-filters-bar--panel-open { right: calc(320px + 0.8rem); }
.rel-filter { position: relative; }
.rel-filter-btn {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.rel-filter-btn:hover { border-color: var(--accent); color: var(--text); }
.rel-filter-btn--active { border-color: var(--accent); color: var(--accent); }
/* compare solo quando c'e' almeno uno spostamento non ancora salvato
   (vedi pendingPositions/updateSaveBtnVisibility in relazioni.js) -
   colore "pieno" apposta, per distinguerlo a colpo d'occhio dai filtri
   (che sono azioni "toggle", questo e' un'azione vera e propria) */
.rel-save-positions-btn {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
}
.rel-save-positions-btn:hover:not(:disabled) { filter: brightness(1.08); }
.rel-save-positions-btn:disabled { opacity: 0.6; cursor: default; }
/* checkbox "Sposta i nodi" - bloccati di default, richiesto dal vivo
   (capitava di spostarne uno per sbaglio) */
.rel-lock-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-dim);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
}
.rel-lock-toggle:hover { border-color: var(--accent); color: var(--text); }
/* stato della selezione multipla (Ctrl/Cmd+click sui nodi, o Shift+
   trascina un'area vuota - vedi selectedNodes in relazioni.js) - compare
   solo con 2 o piu' selezionati, stesso trattamento "azione vera" del
   pulsante Salva posizioni qui sopra */
.rel-selection-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-dim);
  background: var(--bg-elevated);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  white-space: nowrap;
}
.rel-selection-clear {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  cursor: pointer;
}
.rel-selection-clear:hover { border-color: var(--cat-morte); color: var(--cat-morte); }
/* rettangolo mentre si disegna una selezione per area (Shift+trascina) */
.rel-rubberband {
  fill: var(--accent-soft);
  fill-opacity: 0.25;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  pointer-events: none;
}
.rel-filter-menu {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 3;
  min-width: 200px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.rel-filter-menu.hidden { display: none; }
.rel-filter-empty {
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-dim);
  margin: 0.2rem;
}
.rel-filter-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  color: var(--text);
  padding: 0.25rem 0.3rem;
  border-radius: 4px;
  cursor: pointer;
}
.rel-filter-item:hover { background: var(--bg); }

.rel-edge {
  stroke-width: 1.6;
  stroke-opacity: 0.75;
  fill: none;
}
.rel-edge-label {
  font-family: var(--font-ui);
  font-size: 8px;
  fill: var(--text-dim);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
}

.rel-node { cursor: pointer; }
/* "Sposta i nodi" spuntato (vedi rel-lock-toggle in relazioni.js) - solo
   un cambio di cursore, il trascinamento vero e proprio e' gia' filtrato
   in JS (d3.drag().filter(...)) */
#graph-root.rel-drag-enabled .rel-node { cursor: grab; }
#graph-root.rel-drag-enabled .rel-node:active { cursor: grabbing; }
.rel-node--hidden, .rel-edge--hidden, .rel-edge-label--hidden { display: none; }
/* il ritratto/segnaposto sta in un <g> SEPARATO dal nodo esterno (che la
   simulazione sposta ad ogni tick) apposta per questo: transform CSS,
   crescita del 100% al passaggio del mouse, transizione morbida invece
   di scattare di colpo (richiesto dal vivo) */
.rel-node-visual {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.18s ease;
}
/* ".rel-node--hover" (guidata da mouseenter/mouseleave in JS), non solo
   ":hover" - il ":hover" nativo su un <g> SVG e' meno affidabile di
   quello su un elemento HTML dopo che un attributo di un antenato e'
   stato cambiato da JS mentre il puntatore era gia' sopra (il
   trascinamento stesso, o il checkbox "Sposta i nodi") - segnalato dal
   vivo come "l'effetto non si riattiva", vedi renderGraph in relazioni.js */
.rel-node--hover .rel-node-visual, .rel-node:hover .rel-node-visual { transform: scale(2); }
/* un personaggio trascinato dall'elenco "Senza relazioni" sta passando
   sopra questo nodo (vedi dragenter/dragleave in renderGraph) - stesso
   ingrandimento dell'hover, cosi' e' chiaro su quale nodo cadrebbe */
.rel-node--drag-over .rel-node-visual { transform: scale(2); }
.rel-node--drag-over .rel-node-ring,
.rel-node--drag-over .rel-node-placeholder { stroke: var(--accent); }
/* nodo selezionato per lo spostamento di gruppo (vedi selectedNodes in
   relazioni.js) - un secondo anello tratteggiato attorno al ritratto,
   cosi' si distingue sia da un protagonista (anello pieno, sempre
   presente) sia dall'ingrandimento al passaggio del mouse */
.rel-node--selected .rel-node-ring,
.rel-node--selected .rel-node-placeholder {
  stroke: var(--accent);
  stroke-dasharray: 3 2;
}
/* ritratto dentro il <foreignObject> del nodo (vedi renderGraph in
   relazioni.js) - il cerchio si ritaglia qui in CSS (border-radius +
   overflow:hidden), non con un <clipPath> SVG; l'inquadratura/zoom scelti
   con ImagePositionEditor arrivano gia' come stile inline sull'<img>
   stesso (vedi applyImagePosition), qui serve solo l'ingombro/il taglio */
.rel-node-portrait {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.rel-node-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rel-node-ring {
  fill: none;
  stroke: var(--border);
  stroke-width: 2;
}
.rel-node--protagonist .rel-node-ring { stroke: var(--accent); stroke-width: 3; }
.rel-node-placeholder {
  fill: var(--bg-elevated);
  stroke: var(--border);
  stroke-width: 2;
}
.rel-node--protagonist .rel-node-placeholder { stroke: var(--accent); stroke-width: 3; }
.rel-node-initial {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  fill: var(--text-dim);
  text-anchor: middle;
  pointer-events: none;
}
.rel-node-label {
  font-family: var(--font-ui);
  font-size: 9px;
  fill: var(--text-dim);
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
}
.rel-node--protagonist .rel-node-label { fill: var(--text); font-weight: 600; }
.rel-node--hover .rel-node-label, .rel-node:hover .rel-node-label { fill: var(--text); }

/* --- "Personaggi senza relazioni" / "Relazioni nascoste": due pannelli a
   scomparsa a sinistra (richiesto dal vivo, stesso spirito di
   .detail-panel a destra in theme.css ma scritto qui in proprio - li'
   scorre da destra, qui deve scorrere dall'altro lato) - le due linguette
   restano impilate in verticale in un'unica colonna sempre visibile e
   cliccabile (vedi toggleSideSidebar in relazioni.js: aprirne una chiude
   l'altra), la colonna intera si sposta insieme al bordo del pannello
   aperto ------------------------------------------------------------- */
.rel-tabs-stack {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: left 0.28s ease;
}
.rel-side-tab {
  writing-mode: vertical-rl;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 8px 8px 0;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  padding: 0.8rem 0.4rem;
  cursor: pointer;
}
.rel-side-tab:hover { color: var(--accent); border-color: var(--accent); }
/* linguetta del pannello attualmente aperto (vedi toggleSideSidebar in
   relazioni.js) - stesso trattamento di .rel-filter-btn--active qui
   sopra, per riconoscere a colpo d'occhio quale dei due e' in vista */
.rel-side-tab--active { color: var(--accent); border-color: var(--accent); }
.rel-tabs-stack--open { left: 280px; }

.rel-side-sidebar {
  position: fixed;
  top: 68px;
  left: 0;
  bottom: 0;
  width: 280px;
  z-index: 5;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  padding: 1.3rem 1.1rem;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform 0.28s ease, visibility 0s linear 0s;
}
.rel-side-sidebar.hidden {
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0s linear 0.28s;
}
.rel-side-sidebar h2 {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 0.5rem;
}
.unconnected-hint {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 1rem;
}
.unconnected-empty {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
}
#unconnected-list, #hidden-rels-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.unconnected-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem 0.3rem 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: grab;
}
.unconnected-item:hover { color: var(--text); border-color: var(--accent); text-decoration: none; }
/* variante "Relazioni nascoste" (vedi renderSideList in relazioni.js): un
   <button> vero, non trascinabile - clic apre subito il pannello di
   dettaglio invece di proporre una relazione nuova - reset dell'aspetto
   nativo del bottone, il resto lo eredita identico da .unconnected-item */
.unconnected-item--button {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
}
.unconnected-item img, .unconnected-placeholder {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.unconnected-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* base condivisa con la Timeline in theme.css - qui solo la larghezza,
   piu' stretta perche' il pannello mostra meno contenuto */
.detail-panel { width: 320px; }

.detail-portrait {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.detail-panel h2 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.detail-open-link {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  margin-bottom: 1rem;
}

/* pulsante "Mostra/Nascondi tutte le relazioni" (vedi
   setAllRelationshipsVisible/showDetail in relazioni.js) - azione di
   massa, quindi un contorno discreto invece del riempimento pieno di
   .detail-add-btn piu' sotto (quella e' l'azione principale del
   pannello, questa solo un comodo raccorciatoio) */
.detail-rels-toggle-all {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
}
.detail-rels-toggle-all:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.detail-rels-toggle-all:disabled { opacity: 0.5; cursor: default; }

/* stato di un'azione del pannello (eliminare una relazione - vedi
   .detail-rels-remove piu' sotto) - riusata anche dal modulo "+ Aggiungi
   relazione" piu' in basso */
.detail-pin-status {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  display: block;
  margin-top: 0.4rem;
}
.detail-pin-status.pending { color: var(--text-dim); }
.detail-pin-status.error { color: var(--cat-morte); }

.detail-rels {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}
.detail-rels li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.detail-rels-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.detail-rels-text { flex: 1 1 auto; }
/* relazione nascosta dalla mappa (occhio chiuso, vedi setRelationshipVisible
   in relazioni.js) ma ancora presente nel dato: resta nell'elenco, solo
   sbiadita, cosi' si vede a colpo d'occhio quali non compaiono sulla mappa
   - stesso trattamento di .profile-relationships-row--hidden in registry.css */
.detail-rels-item--hidden { opacity: 0.55; }
.detail-rels-remove {
  width: 18px;
  height: 18px;
  line-height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.detail-rels-remove:hover { background: var(--cat-morte); color: var(--bg); }
/* occhio per nascondere/rimostrare una relazione sulla mappa senza
   eliminarla (vedi buildEyeIcon/setRelationshipVisible in relazioni.js) -
   stesso trattamento della "×" qui sopra, solo con l'accento al passaggio
   del mouse invece del rosso "elimina" */
.detail-rels-eye {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  flex: 0 0 auto;
}
.detail-rels-eye:hover { color: var(--accent); }

.detail-empty {
  font-size: 0.85rem;
  color: var(--text-dim);
}

.detail-summary {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
}

/* --- "+ Aggiungi relazione" (stesso modello del profilo personaggio,
   vedi buildRelationshipsField in registry-page.js - qui riscritto in
   proprio, niente moduli condivisi in questo sito) ---------------------- */
.detail-add-relationship {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.detail-add-relationship-title {
  flex: 1 0 100%;
  margin: 0 0 0.2rem;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-dim);
}
.detail-add-select, .detail-add-new-input {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  flex: 1 1 auto;
  min-width: 120px;
}
.detail-add-select:focus, .detail-add-new-input:focus { outline: none; border-color: var(--accent); }
.detail-add-new-input.hidden { display: none; }
.detail-add-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.76rem;
  color: var(--text-dim);
}
.detail-add-btn {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text);
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}
.detail-add-btn:hover:not(:disabled) { filter: brightness(1.08); }
.detail-add-btn:disabled { opacity: 0.5; cursor: default; }

/* --- conferma di eliminazione (relazione) - stesso dialog nativo
   <dialog> gia' usato da Personaggi/Luoghi/ecc. (registry.css) e dal
   Calendario, qui ricopiato (questa pagina non carica registry.css) per
   restare comunque coerente nell'aspetto ------------------------------- */
#delete-confirm-dialog {
  width: min(420px, 92vw);
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--cat-morte);
  border-radius: 10px;
  padding: 1.3rem 1.2rem;
}
#delete-confirm-dialog::backdrop { background: rgba(0,0,0,0.6); }
#delete-confirm-text {
  font-family: var(--font-ui);
  font-size: 0.86rem;
  color: var(--text);
  white-space: pre-line;
  margin: 0 0 1rem;
}
.delete-confirm-buttons { display: flex; gap: 0.6rem; justify-content: flex-end; }
.delete-confirm-no {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.delete-confirm-yes {
  font-family: var(--font-ui);
  font-size: 0.82rem;
  background: var(--cat-morte);
  border: 1px solid var(--cat-morte);
  color: var(--bg);
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
}
.delete-confirm-yes:hover { filter: brightness(1.15); }

@media (max-width: 700px) {
  .relazioni-toolbar-top { margin-left: 1.2rem; margin-right: 1.2rem; }
  .detail-panel { width: 100%; }
  /* il pannello copre tutto lo schermo li' - niente spazio per i filtri */
  .rel-filters-bar--panel-open { display: none; }
  .rel-side-sidebar { width: 100%; }
  .rel-tabs-stack--open { left: 0; display: none; } /* stesso discorso: il pannello a tutta larghezza copre anche le linguette */
}