/**
 * Impronta — Bodygraph Theme
 * DARK = default (no selector). LIGHT = [data-theme="light"].
 * Unica fonte per i colori del bodygraph SVG — nessun duplicato.
 */

/* Colori della dissolvenza dei canali sospesi (bodygraph.js,
   _renderHangingFade): variabili CSS, non stringhe fisse calcolate in JS,
   cosi' seguono da sole il cambio tema (come tutto il resto qui) -- senza
   bisogno di ri-renderizzare il bodygraph al toggle light/dark. */
:root {
  --fade-hanging-p: rgb(221,212,184);
  --fade-hanging-d: rgb(168,60,48);
  --fade-hanging-b: rgb(181,144,58);
}
[data-theme="light"] {
  --fade-hanging-p: #1B1C1E;
  --fade-hanging-d: #A83C30;
  --fade-hanging-b: #B89038;
}

/* ── Figura e tipografia ──────────────────────────────────────────────────── */
[id^="bodygraph"], [id^="mini-bg"] { font-family: 'Plus Jakarta Sans', sans-serif; }
#figure { opacity: .18; pointer-events: none; mix-blend-mode: luminosity; }
[data-theme="light"] #figure { opacity: .05; }

/* ════════════════════════════════════════════════════════════
   DARK (default)
   ════════════════════════════════════════════════════════════ */

/* Centri */
.hd-center path { fill: rgba(200,180,140,.03); stroke: rgba(200,180,140,.14); stroke-width: 2.5; transition: fill .35s, stroke .35s; }
.hd-center.def-p path, .hd-center.def-d path, .hd-center.def-both path { fill: rgba(90,128,96,.10); stroke: rgba(90,128,96,.40); stroke-width: 2.5; }
.hd-center.hov path { stroke-width: 4 !important; }
.hd-center .cname, .hd-center .cname path { stroke: none !important; fill: rgba(200,180,140,.55); }
.hd-center.def-p .cname, .hd-center.def-p .cname path,
.hd-center.def-d .cname, .hd-center.def-d .cname path,
.hd-center.def-both .cname, .hd-center.def-both .cname path { fill: rgba(90,128,96,.75); }
.clbl { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 28px; font-weight: 400; fill: rgba(200,180,140,.12); text-anchor: middle; dominant-baseline: central; pointer-events: none; letter-spacing: .18em; text-transform: uppercase; }
.hd-center.def-p .clbl, .hd-center.def-d .clbl, .hd-center.def-both .clbl { fill: rgba(90,128,96,.55); }

/* Canali */
.hd-ch { fill: none; stroke: rgba(200,180,140,.18); stroke-width: 1.2; stroke-linecap: round; }
.hd-ch.ap { fill: rgba(221,212,184,.65); stroke: none; filter: drop-shadow(0 0 6px rgba(221,212,184,.30)); opacity: 1; }
.hd-ch.ad { fill: rgba(168, 60, 48,.72); stroke: none; filter: drop-shadow(0 0 6px rgba(168, 60, 48,.32)); opacity: 1; }
.hd-ch.ab { fill: rgba(181,144, 58,.78); stroke: none; filter: drop-shadow(0 0 7px rgba(181,144, 58,.38)); opacity: 1; }
.hd-ch.hl { opacity: 1 !important; filter: brightness(1.25) drop-shadow(0 0 10px currentColor) !important; }
.hd-ch.hl-undef { fill: rgba(200,180,140,.40) !important; stroke: none !important; filter: drop-shadow(0 0 6px rgba(200,180,140,.5)) !important; opacity: 1 !important; }
.hd-ch.hs { fill: none; stroke: rgba(200,180,140,.45); stroke-width: 2; stroke-dasharray: 6 8; }
/* Colore del gate sospeso abbinato (P/D/B) */
.hd-ch.hs.hs-p { stroke: rgba(221,212,184,.70); }
.hd-ch.hs.hs-d { stroke: rgba(168, 60, 48,.75); }
.hd-ch.hs.hs-b { stroke: rgba(181,144, 58,.80); }
.hd-ch.hs.hl, .hd-ch.hs.hl-undef { stroke: rgba(200,180,140,.70) !important; stroke-width: 2.5 !important; stroke-dasharray: 8 6 !important; opacity: 1 !important; filter: none; }
/* Il tratteggio dei sospesi sfuma verso il capo opposto al gate: bodygraph.js
   (_renderHangingDashFade) applica al canale una <mask> costruita a fette lungo
   la centerline. Quando il canale e' evidenziato serve pero' vederlo INTERO —
   e' l'informazione "il potenziale arriva fin li'" — quindi la maschera va
   neutralizzata. Basta il CSS: una dichiarazione batte l'attributo di
   presentazione mask="url(...)", senza toccare il DOM. */
.hd-ch.hs.hl, .hd-ch.hs.hl-undef, .hd-ch.hs.hov { mask: none !important; }

/* Flow animato */
@keyframes flowAnim { 0% { stroke-dashoffset: 320; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -320; opacity: 0; } }
@keyframes hangPulse { 0% { r: 18; opacity: .7; } 50% { r: 36; opacity: .3; } 100% { r: 50; opacity: 0; } }
@keyframes hangFlow  { 0% { opacity: 0; stroke-dashoffset: 0; } 15% { opacity: .5; } 85% { opacity: .5; } 100% { opacity: 0; stroke-dashoffset: -80; } }
.flow-p-g { fill: none; stroke: rgba(240,230,210,.22); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 44 280; animation: flowAnim 3s   linear infinite; pointer-events: none; }
.flow-d-g { fill: none; stroke: rgba(225,110, 65,.25); stroke-width: 18; stroke-linecap: round; stroke-dasharray: 44 280; animation: flowAnim 3.8s linear infinite; pointer-events: none; }
.flow-b-g { fill: none; stroke: rgba(220,175, 65,.26); stroke-width: 20; stroke-linecap: round; stroke-dasharray: 48 280; animation: flowAnim 2.6s linear infinite; pointer-events: none; }
.flow-p-m { fill: none; stroke: rgba(240,232,215,.55); stroke-width: 7;  stroke-linecap: round; stroke-dasharray: 36 280; animation: flowAnim 3s   linear infinite; pointer-events: none; }
.flow-d-m { fill: none; stroke: rgba(228,118, 72,.58); stroke-width: 7;  stroke-linecap: round; stroke-dasharray: 36 280; animation: flowAnim 3.8s linear infinite; pointer-events: none; }
.flow-b-m { fill: none; stroke: rgba(222,180, 68,.60); stroke-width: 8;  stroke-linecap: round; stroke-dasharray: 40 280; animation: flowAnim 2.6s linear infinite; pointer-events: none; }
.flow-p   { fill: none; stroke: rgba(248,240,225,1);   stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 26 280; animation: flowAnim 3s   linear infinite; pointer-events: none; filter: drop-shadow(0 0 3px rgba(240,230,210,.8)); }
.flow-d   { fill: none; stroke: rgba(235,130, 85,1);   stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 26 280; animation: flowAnim 3.8s linear infinite; pointer-events: none; filter: drop-shadow(0 0 3px rgba(220,100, 60,.8)); }
.flow-b   { fill: none; stroke: rgba(232,190, 80,1);   stroke-width: 4;   stroke-linecap: round; stroke-dasharray: 30 280; animation: flowAnim 2.6s linear infinite; pointer-events: none; filter: drop-shadow(0 0 4px rgba(210,168, 60,.9)); }

/* Gate */
.hd-gate { cursor: pointer; }
.hd-gate circle { r: 17; fill: rgba(200,180,140,.07); stroke: rgba(200,180,140,.28); stroke-width: 1; transition: all .25s; }
.hd-gate text { font-size: 15px; fill: rgba(200,180,140,.38); dominant-baseline: central; text-anchor: middle; pointer-events: none; }
.hd-gate path:not([id]) { fill: rgba(214,198,150,.7); pointer-events: none; }
/* Attivi */
.hd-gate.gp circle { fill: #ddd4b8; stroke: #c8b890; }
.hd-gate.gp text, .hd-gate.gp path:not([id]) { fill: #1e1608; font-weight: 600; font-size: 14px; }
.hd-gate.gd circle { fill: #A83C30; stroke: #c05040; }
.hd-gate.gd text, .hd-gate.gd path:not([id]) { fill: #fdf0e0; font-weight: 600; font-size: 14px; }
.hd-gate.gb circle { fill: #b89038; stroke: #c8a850; }
.hd-gate.gb text, .hd-gate.gb path:not([id]) { fill: #1e1608; font-weight: 600; font-size: 14px; }
/* Sospesi puri */
.hd-gate.gh:not(.gp):not(.gd):not(.gb) circle { fill: rgba(120,106,144,.20); stroke: #b0a0d8; stroke-width: 1.5; }
.hd-gate.gh:not(.gp):not(.gd):not(.gb) text, .hd-gate.gh:not(.gp):not(.gd):not(.gb) path:not([id]) { fill: #c8b8e8; }
/* Sospesi+attivi: fill pieno P/D/B */
.hd-gate.gp.gh circle { fill: #ddd4b8; stroke: rgba(232,223,200,.9); stroke-width: 2.5; }
.hd-gate.gp.gh text, .hd-gate.gp.gh path:not([id]) { fill: #1e1608; font-weight: 600; }
.hd-gate.gd.gh circle { fill: #A83C30; stroke: rgba(200,80,60,.9); stroke-width: 2.5; }
.hd-gate.gd.gh text, .hd-gate.gd.gh path:not([id]) { fill: #fdf0e0; font-weight: 600; }
.hd-gate.gb.gh circle { fill: #b89038; stroke: rgba(210,170,60,.9); stroke-width: 2.5; }
.hd-gate.gb.gh text, .hd-gate.gb.gh path:not([id]) { fill: #1e1608; font-weight: 600; }
/* Hover */
.hd-gate.hov circle { r: 22 !important; }
.hd-gate.hvp circle { fill: rgba(181,144,58,.12) !important; stroke: #c8a850 !important; }
.hd-gate.hovered circle { stroke: #e8c45a !important; stroke-width: 3 !important; filter: drop-shadow(0 0 6px rgba(181,144,58,.9)); }
.hd-gate.hovered-partner circle { stroke: rgba(200,168,80,.7) !important; stroke-width: 2 !important; }

/* Focus mode */
.bg-focus #figure, .bg-focus #flow-layer { opacity: 0 !important; transition: opacity .25s; }
.bg-focus .hd-ch { opacity: .05 !important; }
.bg-focus .hd-gate:not(.hovered) { opacity: .06 !important; }
.bg-focus .hd-center:not(.hov) { opacity: .1 !important; }

/* Filtri dark */
.flt-personality .hd-gate.gb circle { fill: #ddd4b8; stroke: #c8b890; }
.flt-personality .hd-gate.gb text, .flt-personality .hd-gate.gb path:not([id]) { fill: #1e1608; }
.flt-personality .hd-ch.ab { fill: rgba(221,212,184,.65); stroke: none; filter: drop-shadow(0 0 6px rgba(221,212,184,.30)); }
.flt-design .hd-gate.gb circle { fill: #A83C30; stroke: #c05040; }
.flt-design .hd-gate.gb text, .flt-design .hd-gate.gb path:not([id]) { fill: #fdf0e0; }
.flt-design .hd-ch.ab { fill: rgba(168,60,48,.72); stroke: none; filter: drop-shadow(0 0 6px rgba(168,60,48,.32)); }

/* ════════════════════════════════════════════════════════════
   LIGHT
   ════════════════════════════════════════════════════════════ */

/* Centri */
[data-theme="light"] .hd-center path { fill: rgba(58,46,30,.04); stroke: rgba(58,46,30,.18); stroke-width: 1.8; }
[data-theme="light"] .hd-center.def-p path, [data-theme="light"] .hd-center.def-d path, [data-theme="light"] .hd-center.def-both path { fill: rgba(237,234,224,.82); stroke: #B8B4A8; stroke-width: 2; }
[data-theme="light"] .clbl { fill: rgba(58,46,30,.22); }
[data-theme="light"] .hd-center.def-p .clbl, [data-theme="light"] .hd-center.def-d .clbl, [data-theme="light"] .hd-center.def-both .clbl { fill: rgba(58,46,30,.45); }
[data-theme="light"] .hd-center .cname, [data-theme="light"] .hd-center .cname path { fill: rgba(58,46,30,.50); }
[data-theme="light"] .hd-center.def-p .cname, [data-theme="light"] .hd-center.def-p .cname path,
[data-theme="light"] .hd-center.def-d .cname, [data-theme="light"] .hd-center.def-d .cname path,
[data-theme="light"] .hd-center.def-both .cname, [data-theme="light"] .hd-center.def-both .cname path { fill: rgba(58,46,30,.65); }

/* Canali */
[data-theme="light"] .hd-ch { fill: none; stroke: rgba(58,46,30,.14); stroke-width: 1.2; }
[data-theme="light"] .hd-ch.ap { fill: #1B1C1E; stroke: none; filter: none; }
[data-theme="light"] .hd-ch.ad { fill: #A83C30; stroke: none; filter: none; }
[data-theme="light"] .hd-ch.ab { fill: #B89038; stroke: none; filter: none; }
[data-theme="light"] .hd-ch.hl { filter: brightness(1.15) !important; }
[data-theme="light"] .hd-ch.hl-undef { fill: rgba(58,46,30,.20) !important; stroke: none !important; filter: none !important; }
[data-theme="light"] .hd-ch.hs { fill: none; stroke: rgba(58,46,30,.30); stroke-width: 2.5; stroke-dasharray: 6 8; animation: none; }
/* Colore del gate sospeso abbinato (P/D/B) */
[data-theme="light"] .hd-ch.hs.hs-p { stroke: rgba(27, 28, 30,.60); }
[data-theme="light"] .hd-ch.hs.hs-d { stroke: rgba(168, 60, 48,.75); }
[data-theme="light"] .hd-ch.hs.hs-b { stroke: rgba(184,144, 56,.80); }
[data-theme="light"] .hd-ch.hs.hl, [data-theme="light"] .hd-ch.hs.hl-undef { stroke: rgba(58,46,30,.55) !important; filter: none; }

/* Flow shimmer */
[data-theme="light"] .flow-p-g { stroke: rgba(255,255,255,.28); }
[data-theme="light"] .flow-d-g { stroke: rgba(255,210,180,.32); }
[data-theme="light"] .flow-b-g { stroke: rgba(255,240,160,.30); }
[data-theme="light"] .flow-p-m { stroke: rgba(255,255,255,.50); }
[data-theme="light"] .flow-d-m { stroke: rgba(255,200,160,.55); }
[data-theme="light"] .flow-b-m { stroke: rgba(255,235,130,.55); }
[data-theme="light"] .flow-p   { stroke: rgba(255,255,255,.90); filter: drop-shadow(0 0 2px rgba(255,255,255,.60)); }
[data-theme="light"] .flow-d   { stroke: rgba(255,200,160,.90); filter: drop-shadow(0 0 2px rgba(255,190,150,.60)); }
[data-theme="light"] .flow-b   { stroke: rgba(255,230,120,.90); filter: drop-shadow(0 0 3px rgba(240,210, 80,.60)); }

/* Gate */
[data-theme="light"] .hd-gate circle { fill: rgba(58,46,30,.06); stroke: rgba(58,46,30,.35); }
[data-theme="light"] .hd-gate text, [data-theme="light"] .hd-gate path:not([id]) { fill: rgba(58,46,30,.50); }
/* Attivi */
[data-theme="light"] .hd-gate.gp circle { fill: #1B1C1E; stroke: #1B1C1E; }
[data-theme="light"] .hd-gate.gp text, [data-theme="light"] .hd-gate.gp path:not([id]) { fill: #FFFFFF; font-weight: 600; font-size: 14px; }
[data-theme="light"] .hd-gate.gd circle { fill: #A83C30; stroke: #A83C30; }
[data-theme="light"] .hd-gate.gd text, [data-theme="light"] .hd-gate.gd path:not([id]) { fill: #FDF0E0; font-weight: 600; font-size: 14px; }
[data-theme="light"] .hd-gate.gb circle { fill: #B89038; stroke: #B89038; }
[data-theme="light"] .hd-gate.gb text, [data-theme="light"] .hd-gate.gb path:not([id]) { fill: #1B1C1E; font-weight: 600; font-size: 14px; }
/* Sospesi puri */
[data-theme="light"] .hd-gate.gh:not(.gp):not(.gd):not(.gb) circle { fill: rgba(58,46,30,.08); stroke: rgba(58,46,30,.55); stroke-width: 2; }
[data-theme="light"] .hd-gate.gh:not(.gp):not(.gd):not(.gb) text, [data-theme="light"] .hd-gate.gh:not(.gp):not(.gd):not(.gb) path:not([id]) { fill: rgba(58,46,30,.70); }
/* Sospesi+attivi */
[data-theme="light"] .hd-gate.gp.gh circle { fill: #1B1C1E; stroke: rgba(30,28,28,.9); stroke-width: 2.5; }
[data-theme="light"] .hd-gate.gp.gh text, [data-theme="light"] .hd-gate.gp.gh path:not([id]) { fill: #FFFFFF; }
[data-theme="light"] .hd-gate.gd.gh circle { fill: #A83C30; stroke: rgba(200,70,55,.9); stroke-width: 2.5; }
[data-theme="light"] .hd-gate.gd.gh text, [data-theme="light"] .hd-gate.gd.gh path:not([id]) { fill: #FDF0E0; }
[data-theme="light"] .hd-gate.gb.gh circle { fill: #B89038; stroke: rgba(210,170,50,.9); stroke-width: 2.5; }
[data-theme="light"] .hd-gate.gb.gh text, [data-theme="light"] .hd-gate.gb.gh path:not([id]) { fill: #1B1C1E; }

/* Filtri light */
[data-theme="light"] .flt-personality .hd-ch.ab { fill: #1B1C1E; stroke: none; filter: none; }
[data-theme="light"] .flt-design .hd-ch.ab { fill: #A83C30; stroke: none; filter: none; }

/* Demo guida in light (fondo scuro fisso → colori dark) */
[data-theme="light"] .learn-inline-demo .hd-center path,
[data-theme="light"] .learn-transit-demo__svg .hd-center path,
[data-theme="light"] .learn-detail-svg .hd-center path,
[data-theme="light"] .learn-center-card__svg .hd-center path,
[data-theme="light"] .learn-nav-card__icon .hd-center path { fill: rgba(200,180,140,.03); stroke: rgba(200,180,140,.14); stroke-width: 2.5; }
[data-theme="light"] .learn-inline-demo .hd-center.def-p path, [data-theme="light"] .learn-inline-demo .hd-center.def-d path, [data-theme="light"] .learn-inline-demo .hd-center.def-both path,
[data-theme="light"] .learn-transit-demo__svg .hd-center.def-p path, [data-theme="light"] .learn-transit-demo__svg .hd-center.def-d path, [data-theme="light"] .learn-transit-demo__svg .hd-center.def-both path,
[data-theme="light"] .learn-detail-svg .hd-center.def-p path, [data-theme="light"] .learn-detail-svg .hd-center.def-d path, [data-theme="light"] .learn-detail-svg .hd-center.def-both path,
[data-theme="light"] .learn-center-card__svg .hd-center.def-p path, [data-theme="light"] .learn-center-card__svg .hd-center.def-d path, [data-theme="light"] .learn-center-card__svg .hd-center.def-both path,
[data-theme="light"] .learn-nav-card__icon .hd-center.def-p path, [data-theme="light"] .learn-nav-card__icon .hd-center.def-d path, [data-theme="light"] .learn-nav-card__icon .hd-center.def-both path { fill: rgba(90,128,96,.10); stroke: rgba(90,128,96,.40); stroke-width: 2.5; }
[data-theme="light"] .learn-inline-demo .hd-ch, [data-theme="light"] .learn-transit-demo__svg .hd-ch, [data-theme="light"] .learn-detail-svg .hd-ch, [data-theme="light"] .learn-center-card__svg .hd-ch, [data-theme="light"] .learn-nav-card__icon .hd-ch { fill: none; stroke: rgba(200,180,140,.18); }
[data-theme="light"] .learn-inline-demo .hd-gate:not(.gp):not(.gd):not(.gb):not(.gh) circle, [data-theme="light"] .learn-transit-demo__svg .hd-gate:not(.gp):not(.gd):not(.gb):not(.gh) circle, [data-theme="light"] .learn-detail-svg .hd-gate:not(.gp):not(.gd):not(.gb):not(.gh) circle, [data-theme="light"] .learn-center-card__svg .hd-gate:not(.gp):not(.gd):not(.gb):not(.gh) circle, [data-theme="light"] .learn-nav-card__icon .hd-gate:not(.gp):not(.gd):not(.gb):not(.gh) circle { fill: rgba(200,180,140,.07); stroke: rgba(200,180,140,.28); }
[data-theme="light"] .learn-inline-demo .hd-center .cname, [data-theme="light"] .learn-inline-demo .hd-center .cname path, [data-theme="light"] .learn-detail-svg .hd-center .cname, [data-theme="light"] .learn-detail-svg .hd-center .cname path, [data-theme="light"] .learn-center-card__svg .hd-center .cname, [data-theme="light"] .learn-center-card__svg .hd-center .cname path, [data-theme="light"] .learn-nav-card__icon .hd-center .cname, [data-theme="light"] .learn-nav-card__icon .hd-center .cname path { fill: rgba(200,180,140,.55); }

/* Mandala in light (raggi e numeri su pannello chiaro) */
[data-theme="light"] .mandala-wrap .ma-lines, [data-theme="light"] .combo-viewport .ma-lines { opacity: 0.40; }
[data-theme="light"] .mandala-wrap .ma-lines line, [data-theme="light"] .combo-viewport .ma-lines line { stroke: rgba(58,46,30,1); }
[data-theme="light"] .mandala-wrap .ma-lines-gate, [data-theme="light"] .combo-viewport .ma-lines-gate { opacity: 0.14; }
[data-theme="light"] .mandala-wrap .ma-lines-gate line, [data-theme="light"] .combo-viewport .ma-lines-gate line { stroke: rgba(58,46,30,1); }
[data-theme="light"] .mandala-wrap .ma-n, [data-theme="light"] .combo-viewport .ma-n { fill: rgba(58,46,30,0.55) !important; }
[data-theme="light"] .mandala-wrap .ma-n:hover, [data-theme="light"] .combo-viewport .ma-n:hover { fill: rgba(58,46,30,0.95) !important; }
[data-theme="light"] .mandala-wrap .ma-pm text, [data-theme="light"] .combo-viewport .ma-pm text { fill: rgba(58,46,30,0.90); }