/**
 * Chart SVG Styling
 * =====================
 * Visuele styling voor chart_figure.svg
 * Wireframe defaults + activatiestaten (.design, .personality, .both, .defined)
 *
 * Kleuren:
 * - Design (rood):      brown
 * - Personality (zwart): #121212
 * - Both (blauw):       #6182A0
 * - Wireframe stroke:   #ccedff (channels), #385872 (centers/gates)
 * - Wireframe fill:     #e9f5ff (centers/gates)
 */

/* ==========================================================================
   Container
   ========================================================================== */

.eidae-chart {
    max-width: 800px;
    margin: 10px auto;
    position: relative;
}

.eidae-chart svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   Wireframe Defaults — alles faded tot geactiveerd
   ========================================================================== */

/* Channels: lichtblauwe lijnen, faded */
#eidae-figure .bg-ch path,
#eidae-figure .bg-ch line {
    transition: opacity 0.3s ease, stroke 0.3s ease;
}

/* Centers: lichtblauwe fill + outline, faded */
#eidae-figure .bg-ctr > path {
    transition: opacity 0.3s ease, fill 0.3s ease;
}

/* Gates: ellipse + tekst, faded */
#eidae-figure .bg-gt ellipse {
    transition: opacity 0.3s ease, fill 0.3s ease;
}

#eidae-figure .bg-gt text {
    transition: opacity 0.3s ease, fill 0.3s ease;
}

/* Skeleton: zwarte outlines, subtiel */
#eidae-figure .bg-skeleton {
    opacity: 0.4;
}

/* ==========================================================================
   Center Activatie — .defined class
   ========================================================================== */

#eidae-figure .bg-ctr.defined > path {
    opacity: 1;
}

/* Traditionele Human Design center kleuren (fill op de center shape) */
#eidae-figure #head.defined > path {
    fill: #9b6bfa; 
}

#eidae-figure #ajna.defined > path {
    fill: var(--c-indigo, #4b0082);
}

#eidae-figure #throat.defined > path {
    fill: var(--c-blue, #4682b4); 
}

#eidae-figure #identity.defined > path {
    fill: teal; 
}

#eidae-figure #heart.defined > path {
    fill: #556B2F; 
}

#eidae-figure #spleen.defined > path {
    fill: darkgoldenrod; 
}

#eidae-figure #solplex.defined > path {
    fill: darkgoldenrod; 
}

#eidae-figure #sacral.defined > path {
    fill: coral; 
}

#eidae-figure #root.defined > path {
    fill: #800000;
}


/* ==========================================================================
   Gate Activatie — .design / .personality / .both
   ========================================================================== */

/* Design (rood) */
#eidae-figure .bg-gt.design ellipse {
    fill: brown;
    stroke: brown;
    opacity: 1;
}

#eidae-figure .bg-gt.design text {
    fill: var(--c-white, #ffffff);
    opacity: 1;
}

/* Personality (zwart) */
#eidae-figure .bg-gt.personality ellipse {
    fill: #121212;
    stroke: #121212;
    opacity: 1;
}

#eidae-figure .bg-gt.personality text {
    fill: var(--c-white, #ffffff);
    opacity: 1;
}

/* Both (blauw) */
#eidae-figure .bg-gt.both ellipse {
    fill: #6182A0;
    stroke: #6182A0;
    opacity: 1;
}

#eidae-figure .bg-gt.both text {
    fill: var(--c-white, #ffffff);
    opacity: 1;
}

/* ==========================================================================
   Channel Activatie — per-path segment kleuring
   Classes worden op individuele path/line elementen gezet (niet op de <g>).
   Elk half-channel krijgt de kleur van de gate die het verbindt.
   ========================================================================== */

/* Design (rood) */
#eidae-figure .bg-ch path.design,
#eidae-figure .bg-ch line.design {
    stroke: brown;
    opacity: 1;
}

/* Personality (zwart) */
#eidae-figure .bg-ch path.personality,
#eidae-figure .bg-ch line.personality {
    stroke: palegoldenrod;
    opacity: 1;
}

/* Both (blauw) */
#eidae-figure .bg-ch path.both,
#eidae-figure .bg-ch line.both {
    stroke: #6182A0;
    opacity: 1;
}

/* ==========================================================================
   Hover & Interactie
   ========================================================================== */

/* Gate hover — licht highlight */
#eidae-figure .bg-gt:hover ellipse {
    opacity: 0.8;
    cursor: pointer;
}

#eidae-figure .bg-gt:hover text {
    opacity: 0.8;
}

/* Actieve gate hover — iets lichter */
#eidae-figure .bg-gt.design:hover ellipse,
#eidae-figure .bg-gt.personality:hover ellipse,
#eidae-figure .bg-gt.both:hover ellipse {
    filter: brightness(1.2);
}

/* Channel hover — alleen voor actieve kanalen (.ch-active gezet via JS) */
#eidae-figure .bg-ch.ch-active:hover path,
#eidae-figure .bg-ch.ch-active:hover line {
    opacity: 0.7;
}

#eidae-figure .bg-ch.ch-active:hover path.design,
#eidae-figure .bg-ch.ch-active:hover line.design,
#eidae-figure .bg-ch.ch-active:hover path.personality,
#eidae-figure .bg-ch.ch-active:hover line.personality,
#eidae-figure .bg-ch.ch-active:hover path.both,
#eidae-figure .bg-ch.ch-active:hover line.both {
    opacity: 1;
    filter: brightness(1.2);
    cursor: pointer;
}

/* ==========================================================================
   Chart Layout — planeet-tabellen + SVG + info
   ========================================================================== */

.eidae-chart-layout {
  display: inline-grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px;
  width: fit-content;
  background-color: #021b33;
  border-radius: 20px;
  display:none;
}
.eidae-chart-layout.DisInGr {display: inline-grid;}
.article.eidae {
  display: grid;
  justify-content: center;
}

.eidae-planet-col:first-child {
  grid-column: 1;
  justify-self: end;   /* 👉 tegen het midden aan */
  text-align: right;   /* 👉 tekst netjes rechts */
}

.eidae-planet-col:last-child {
  grid-column: 3;
  justify-self: start; /* 👉 tegen het midden aan */
  text-align: left;
}

.eidae-chart {
  grid-column: 2;
  justify-self: center;
}

.pt.pt-design svg, .pt.pt-personality svg {
  transform: scale(1.8);
}
.pt.pt-design svg{
  fill: pink;
}
.pt.pt-personality svg{
  fill: palegoldenrod;
}

/* ==========================================================================
   Planeet-tabellen
   ========================================================================== */

.pt { border-collapse: collapse; font-size: 11.5px; min-width: 90px; 
    font-family: 'Dauphin Consteia'; font-size:20px; }
.pt th { text-align: center; padding: 3px 4px 5px; font-size: 30px;
         letter-spacing: .6px;}
.pt td { padding: 2px 5px; vertical-align: middle; }
.pt .sym { font-size: 13px; font-family: serif; }
.pt .gv  { font-family: 'Dauphin Consteia'; font-size: 30px; width:70px; }
.pt-design td {text-align: right; }
.pt-design .sym { text-align: right; }
.pt-personality td { text-align: left; }
.pt-personality .sym { text-align: left; }
.pt-design { margin-right: 6px; color: pink;
    cursor: pointer;}
.pt-personality { margin-left: 6px;  color: palegoldenrod;
    cursor: pointer;}

/* ==========================================================================
   Info Panel — channels & gates badges
   ========================================================================== */

.eidae-info-panel {
    background: #121212;
    border: 1px solid var(--c-grey-20, #333333);
    border-radius: 7px;
    padding: 12px 14px;
    margin: 14px auto 0;
    font-size: 11.5px;
    max-width: 580px;
}

.eidae-info-panel h3 {
    color: #58a6ff;
    font-size: 11px;
    margin-bottom: 7px;
}

.eidae-badges { display: flex; flex-wrap: wrap; gap: 5px; }

.eidae-badge {
    padding: 1px 7px; border-radius: 9px; font-family: monospace;
    font-size: 10.5px; font-weight: bold;
}

.eidae-badge.bd { background: rgba(194,83,84,.2); color: #C25354; border: 1px solid #C25354; }
.eidae-badge.bp { background: rgba(var(--c-ivory-rgb, 255, 255, 240), var(--a-8, 0.08)); color: #e0e0e0; border: 1px solid var(--c-grey-33, #555555); }
.eidae-badge.bb { background: rgba(97,130,160,.2); color: #6182A0; border: 1px solid #6182A0; }

.eidae-gate-badges { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }

.eidae-gate-badge {
    padding: 1px 5px; border-radius: 7px; font-family: monospace;
    font-size: 9.5px; font-weight: bold;
}

.eidae-gate-badge.gd { background: rgba(194,83,84,.15); color: #C25354; border: 1px solid rgba(194,83,84,.4); }
.eidae-gate-badge.gp { background: rgba(18,18,18,.3); color: var(--c-grey-60, #999999); border: 1px solid #555; }
.eidae-gate-badge.gb { background: rgba(97,130,160,.15); color: #6182A0; border: 1px solid rgba(97,130,160,.4); }

/* ==========================================================================
   Tooltip
   ========================================================================== */

#eidae-tooltip {
    position: fixed;
    background: var(--c-grey-13, #222222);
    border: 1px solid var(--c-grey-20, #333333);
    border-radius: 6px;
    padding: 6px 0;
    font-size: 12px;
    color: #c9d1d9;
    pointer-events: none;
    display: none;
    z-index: var(--z-tooltip, 600);
    min-width: 190px;
    max-width: 300px;
}

#eidae-tooltip .tt-channel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
}

#eidae-tooltip .tt-channel + .tt-channel {
    border-top: 1px solid var(--c-grey-20, #333333);
}

#eidae-tooltip .tt-ch-num {
    font-family: monospace;
    font-size: 10px;
    color: var(--c-grey-60, #999999);
    min-width: 34px;
    white-space: nowrap;
}

#eidae-tooltip .tt-ch-name {
    flex: 1;
    font-size: 12px;
    color: #f0f2f5;
    white-space: nowrap;
}

#eidae-tooltip .tt-ch-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

#eidae-tooltip .tt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

#eidae-tooltip .tt-dot.design {
    background: brown;
}

#eidae-tooltip .tt-dot.personality {
    background: palegoldenrod;
}

/* Gate tooltip — simple single line */
#eidae-tooltip .tt-gate {
    padding: 4px 12px;
    white-space: nowrap;
}

/* Pinned state — tooltip stays visible, light blue border */
#eidae-tooltip.pinned {
    border-color: #58a6ff;
    pointer-events: auto;
}

/* Integration channel footer note */
#eidae-tooltip .tt-integration-note {
    border-top: 1px solid var(--c-grey-20, #333333);
    padding: 6px 12px 4px;
    font-size: 10px;
    color: var(--c-grey-60, #999999);
    line-height: 1.5;
    margin-top: 2px;
}

#eidae-tooltip .tt-integration-note strong {
    color: #adb5bd;
    font-size: 10px;
    letter-spacing: 0.03em;
}

#eidae-tooltip .tt-integration-count {
    display: inline-block;
    margin-top: 2px;
    color: var(--c-grey-60, #999999);
}

/* ==========================================================================
   Responsive — planeet-tabellen onder SVG op kleine schermen
   ========================================================================== */

@media (max-width: 479.98px) {
    .eidae-chart-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    }

    .eidae-chart {
    grid-column: 1 / -1; /* full width bovenaan */
    }

    .eidae-planet-col:first-child {
    grid-column: 1;
    grid-row:2;
    text-align: right;
    }

    .eidae-planet-col:last-child {
    grid-column: 2;
    grid-row:2;
    text-align: left;
    }
    #centers text {font-family: Nunito, 'Open Sans';
    font-size: 5px;}
    .pt .gv {
    font-family: ConsteiaCondensed, 'Open Sans Condensed';
    font-size: 11px;
    width:30px;
    }
    .pt.pt-design svg, .pt.pt-personality svg {
    transform: scale(1);
    }
    .pt th {
    text-align: center;
    padding: 1px 2px 3px;
    font-size: 15px;
    letter-spacing: initial;
    }
}
.eidae-planet-col hr {
  margin: 2px;
  width: 100%;
  border: none;
  height: 1px;
  width: 100%;
  background: linear-gradient( to right, rgba(var(--c-ivory-rgb, 255, 255, 240), 0) 0%, palegoldenrod 50%, rgba(var(--c-ivory-rgb, 255, 255, 240), 0) 100% );
}

.eidae-planet-col:first-child hr {
  background: linear-gradient( to right, rgba(var(--c-ivory-rgb, 255, 255, 240), 0) 0%, pink 50%, rgba(var(--c-ivory-rgb, 255, 255, 240), 0) 100% );
}

/* ==========================================================================
   Wheel chart — identieke rules voor geneste chart in .eidae-wheel
   Class-gebaseerde selectors: .eidae-wheel als scope (geen ID-conflict mogelijk)
   Center-kleur selectors: [id$="-center"] attribute selectors
   ========================================================================== */

.eidae-wheel .bg-ch path,
.eidae-wheel .bg-ch line {
    transition: opacity 0.3s ease, stroke 0.3s ease;
}

.eidae-wheel .bg-ctr > path {
    transition: opacity 0.3s ease, fill 0.3s ease;
}

.eidae-wheel .bg-gt ellipse {
    transition: opacity 0.3s ease, fill 0.3s ease;
}

.eidae-wheel .bg-gt text {
    transition: opacity 0.3s ease, fill 0.3s ease;
}

.eidae-wheel .bg-skeleton {
    opacity: 0.4;
}

.eidae-wheel .bg-ctr.defined > path {
    opacity: 1;
}

.eidae-wheel [id$="-head"].defined > path    { fill: #9b6bfa; }
.eidae-wheel [id$="-ajna"].defined > path    { fill: var(--c-indigo, #4b0082); }
.eidae-wheel [id$="-throat"].defined > path  { fill: var(--c-blue, #4682b4); }
.eidae-wheel [id$="-identity"].defined > path { fill: teal; }
.eidae-wheel [id$="-heart"].defined > path   { fill: #556B2F; }
.eidae-wheel [id$="-spleen"].defined > path  { fill: darkgoldenrod; }
.eidae-wheel [id$="-solplex"].defined > path { fill: darkgoldenrod; }
.eidae-wheel [id$="-sacral"].defined > path  { fill: coral; }
.eidae-wheel [id$="-root"].defined > path    { fill: #800000; }

.eidae-wheel .bg-gt.design ellipse {
    fill: brown;
    stroke: brown;
    opacity: 1;
}

.eidae-wheel .bg-gt.design text {
    fill: var(--c-white, #ffffff);
    opacity: 1;
}

.eidae-wheel .bg-gt.personality ellipse {
    fill: #121212;
    stroke: #121212;
    opacity: 1;
}

.eidae-wheel .bg-gt.personality text {
    fill: var(--c-white, #ffffff);
    opacity: 1;
}

.eidae-wheel .bg-gt.both ellipse {
    fill: #6182A0;
    stroke: #6182A0;
    opacity: 1;
}

.eidae-wheel .bg-gt.both text {
    fill: var(--c-white, #ffffff);
    opacity: 1;
}

.eidae-wheel .bg-ch path.design,
.eidae-wheel .bg-ch line.design {
    stroke: brown;
    opacity: 1;
}

.eidae-wheel .bg-ch path.personality,
.eidae-wheel .bg-ch line.personality {
    stroke: palegoldenrod;
    opacity: 1;
}

.eidae-wheel .bg-ch path.both,
.eidae-wheel .bg-ch line.both {
    stroke: #6182A0;
    opacity: 1;
}

.eidae-wheel .bg-gt:hover ellipse {
    opacity: 0.8;
    cursor: pointer;
}

.eidae-wheel .bg-gt:hover text {
    opacity: 0.8;
}

.eidae-wheel .bg-gt.design:hover ellipse,
.eidae-wheel .bg-gt.personality:hover ellipse,
.eidae-wheel .bg-gt.both:hover ellipse {
    filter: brightness(1.2);
}

.eidae-wheel .bg-ch.ch-active:hover path,
.eidae-wheel .bg-ch.ch-active:hover line {
    opacity: 0.7;
}

.eidae-wheel .bg-ch.ch-active:hover path.design,
.eidae-wheel .bg-ch.ch-active:hover line.design,
.eidae-wheel .bg-ch.ch-active:hover path.personality,
.eidae-wheel .bg-ch.ch-active:hover line.personality,
.eidae-wheel .bg-ch.ch-active:hover path.both,
.eidae-wheel .bg-ch.ch-active:hover line.both {
    opacity: 1;
    filter: brightness(1.2);
    cursor: pointer;
}