/* rizoma-graph.css — port 1:1 del prototipo "Grafo Rizomatico".
   Tutto è confinato sotto .rz: le variabili hanno prefisso --rz-, le misure
   in rem del prototipo sono convertite in px (html a 16px) così il CSS del
   sito non può alterarle. */
.rz{
  --rz-bg: #15111e;
  --rz-bg-2: #1c1729;
  --rz-panel: #1f1a2c;
  --rz-border: #4a3f68;
  --rz-border-soft: #332b49;
  --rz-ink: #e9e4f2;
  --rz-ink-dim: #a89bc4;
  --rz-ink-faint: #6f6390;
  --rz-lineage: #b39ddb;
  --rz-lineage-soft: #6b5c94;
  --rz-jump: #e0a86f;
  --rz-jump-soft: #8a6a4a;
  --rz-focus: #f2e9ff;
  display:flex;
  flex-direction:column;
  gap:16px;
  font-family:"Public Sans", system-ui, sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:normal;
  letter-spacing:normal;
  color:var(--rz-ink);
  text-align:left;
}
.rz, .rz *{ box-sizing:border-box; }

.rz .rz-meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-family:"IBM Plex Mono", monospace;
  font-size:11.52px;
  color:var(--rz-ink-faint);
  letter-spacing:0.03em;
}
.rz .rz-meta span{
  border:1px solid var(--rz-border-soft);
  border-radius:999px;
  padding:3px 10px;
  background:rgba(255,255,255,0.02);
}

.rz .rz-stage{
  position:relative;
  margin:0;
  padding:0;
  border:1px solid var(--rz-border);
  border-radius:14px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(179,157,219,0.06), transparent 65%),
    var(--rz-bg-2);
  overflow:hidden;
}
.rz svg.rz-svg{
  display:block;
  width:100%;
  max-width:none;
  height:min(72vh, 620px);
  margin:0;
  cursor:grab;
  background:none;
  border:0;
}
.rz svg.rz-svg:active{ cursor:grabbing; }

.rz .link{ fill:none; }
.rz .link.lineage{ stroke:var(--rz-lineage-soft); stroke-width:1.6; }
.rz .link.jump{ stroke:var(--rz-jump-soft); stroke-width:1.3; stroke-dasharray:2 5; stroke-linecap:round; }
.rz .link.dim{ opacity:0.12; }
.rz .link.lit.lineage{ stroke:var(--rz-lineage); stroke-width:2.2; }
.rz .link.lit.jump{ stroke:var(--rz-jump); stroke-width:1.8; }

.rz .node{ cursor:pointer; }
.rz .node circle{
  stroke-width:1.4;
  transition:filter 0.15s ease;
}
.rz .node.origin circle{ fill:#2a2140; stroke:var(--rz-focus); stroke-width:2.2; }
.rz .node.origin circle.halo{ fill:none; stroke:var(--rz-focus); opacity:0.16; }
.rz .node.plain circle{ fill:#241d36; stroke:var(--rz-lineage-soft); }
.rz .node.dim circle{ opacity:0.25; }
.rz .node.dim text{ opacity:0.25; }
.rz .node:hover circle{ filter:brightness(1.35); }

.rz .node text{
  font-family:"Fraunces", serif;
  font-size:12.5px;
  font-weight:400;
  font-style:normal;
  fill:var(--rz-ink);
  paint-order:stroke;
  stroke:var(--rz-bg-2);
  stroke-width:3px;
  pointer-events:none;
}
.rz .node.origin text{ font-weight:600; font-size:14px; }

.rz .rz-legend{
  position:absolute;
  left:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:"IBM Plex Mono", monospace;
  font-size:10.88px;
  color:var(--rz-ink-dim);
  background:rgba(21,17,30,0.7);
  border:1px solid var(--rz-border-soft);
  border-radius:10px;
  padding:10px 12px;
  backdrop-filter:blur(2px);
}
.rz .rz-legend-row{ display:flex; align-items:center; gap:8px; }
.rz .rz-legend-swatch{ width:22px; height:0; border-top:2px solid var(--rz-lineage); }
.rz .rz-legend-swatch.jump{ border-top:2px dashed var(--rz-jump); }
.rz .rz-hint{
  position:absolute;
  right:14px;
  bottom:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:"IBM Plex Mono", monospace;
  font-size:10.88px;
  color:var(--rz-ink-dim);
  text-align:left;
  background:rgba(21,17,30,0.7);
  border:1px solid var(--rz-border-soft);
  border-radius:10px;
  padding:10px 12px;
  backdrop-filter:blur(2px);
}
.rz .rz-hint-row{ line-height:normal; }

/* schermo largo: legenda nella meta' sinistra, suggerimenti nella meta' destra;
   nei suggerimenti "cerchio" e "nome" a sinistra, la terza voce a destra,
   centrata fra le due righe */
@media (min-width: 641px){
  .rz .rz-legend{ right:calc(50% + 6px); }
  .rz .rz-hint{
    left:calc(50% + 6px);
    display:grid;
    grid-template-columns:1fr auto;
    column-gap:12px;
    row-gap:6px;
    align-items:center;
  }
  .rz .rz-hint-row:nth-child(3){
    grid-column:2;
    grid-row:1 / span 2;
    text-align:right;
  }
}

.rz .rz-card{
  border:1px solid var(--rz-border-soft);
  border-radius:12px;
  background:var(--rz-panel);
  padding:16px 18px;
}
.rz .rz-card h2{
  margin:0 0 10px;
  padding:0;
  border:0;
  font-family:"IBM Plex Mono", monospace;
  font-size:11.52px;
  line-height:normal;
  text-transform:uppercase;
  letter-spacing:0.09em;
  color:var(--rz-ink-faint);
  font-weight:500;
}
.rz .rz-sel-title{
  font-family:"Fraunces", serif;
  font-size:20px;
  margin:0 0 8px;
  color:var(--rz-focus);
}
.rz .rz-sel-body{ color:var(--rz-ink-dim); font-size:14.08px; line-height:1.6; }
.rz .rz-sel-body .rz-rel-group{ margin-top:10px; }
.rz .rz-sel-body .rz-rel-label{ color:var(--rz-ink-faint); font-family:"IBM Plex Mono", monospace; font-size:10.88px; text-transform:uppercase; letter-spacing:0.06em; }
.rz .rz-sel-body .rz-rel-label{ display:block; margin:0; padding:0; font-weight:400; text-align:left; background:none; border:0; }
.rz .rz-sel-body ul{ margin:4px 0 0; padding-left:18px; list-style:disc; }
.rz .rz-sel-body li{ margin:0 0 2px; padding:0; }
.rz .rz-sel-body .rz-rel-tag{
  margin-left:6px;
  padding:1px 7px;
  border:1px solid var(--rz-jump-soft);
  border-radius:999px;
  font-family:"IBM Plex Mono", monospace;
  font-size:10.24px;
  letter-spacing:0.04em;
  color:var(--rz-jump);
  vertical-align:1px;
  white-space:nowrap;
  text-transform:none;
}

/* ---- aggiunte per il sito (non cambiano la resa su schermo largo) ---- */

/* cerchio di tocco più grande: esiste sempre ma si vede solo sul telefono */
.rz .node circle.hit{ display:none; }
.rz.rz-mobile .node circle.hit{ display:inline; fill:transparent; stroke:none; }
.rz.rz-mobile .node text{ pointer-events:none; }

/* cerchio = apri il rizoma, nome = legami, linea = quel legame */
.rz .node rect.label-hit{ fill:transparent; stroke:none; cursor:pointer; }
.rz .node.navigable circle.dot, .rz .node.navigable circle.hit{ cursor:pointer; }
.rz .node.opening circle.dot{ filter:brightness(1.8); }
.rz .link{ pointer-events:none; }
.rz .link-hit{ fill:none; stroke:transparent; stroke-width:14; cursor:pointer; }
.rz.rz-mobile .link-hit{ stroke-width:24; }

/* link nel pannello: nomi dei rizomi in bianco; al passaggio del mouse (o al
   tocco) lo sfondo viola del sito, senza sottolineatura */
.rz .rz-sel-title a,
.rz .rz-sel-body a{
  color:#fff;
  background:none;
  text-decoration:none;
  border:0;
  padding:0 3px;
  margin:0 -3px;
  outline-offset:2px;
}
.rz .rz-sel-title a:hover, .rz .rz-sel-title a:focus-visible, .rz .rz-sel-title a:active,
.rz .rz-sel-body a:hover, .rz .rz-sel-body a:focus-visible, .rz .rz-sel-body a:active{
  color:#fff;
  background:var(--purple, #927bc1);
  text-decoration:none;
}

/* telefono: riquadro più basso, legenda e suggerimento sotto il disegno */
@media (max-width: 640px){
  .rz svg.rz-svg{ height:min(64vh, 480px); touch-action:none; }
  .rz .rz-legend{
    position:static;
    margin:0 12px;
    backdrop-filter:none;
  }
  .rz .rz-hint{
    position:static;
    margin:8px 12px 12px;
    backdrop-filter:none;
  }
}

/* telefono: meno margine attorno al grafo nel riquadro del sito, ma una
   striscia libera a destra e a sinistra del disegno dove il dito fa scorrere
   la pagina (sul disegno il dito sposta il grafo) */
@media (max-width: 640px){
  details.rel-graph.rz-host{ padding:0 0.35rem 0.5rem; }
  .rz .rz-stage, .rz .rz-card{ margin:0 18px; }
}