/* =========================================
   ChakraGraph MODE WRAPPERS
   ========================================= */

/* --- DEBUG MODE (your test page) --- */
body.page-id-12923 .chakra-graph,
body.page-id-12923 .chakra-graph-wrapper,
.chakra-graph--debug .chakra-graph,
.chakra-graph--debug .chakra-graph-wrapper {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

body.page-id-12923 .chakra-graph,
.chakra-graph--debug .chakra-graph {
  display: flex !important;
  justify-content: flex-start !important;
}

/* your chosen size */
body.page-id-12923 .chakra-graph svg,
.chakra-graph--debug .chakra-graph svg {
  transform-origin: top left !important;
  transform: translateX(-110px) scale(0.60) !important; /* Much smaller: reduced from 1.48 */
  width: 600px !important;
  max-width: 600px !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}

/* kill any accidental scrollbars inside debug wrapper */
body.page-id-12923 .chakra-graph *,
body.page-id-12923 .chakra-graph-wrapper *,
.chakra-graph--debug * {
  max-height: none !important;
  overflow: visible !important;
}

/* --- FREE MODE (2-column page) --- */
.chakra-graph-wrapper.chakra-graph--free {
  overflow: visible !important;
  width: 100% !important;
  max-width: none !important;
}

.chakra-graph-wrapper.chakra-graph--free .chakra-graph {
  overflow: visible !important;
  width: 100% !important;
  max-width: none !important;
}

/* --- PREMIUM MODE (centered) --- */
.chakra-graph--premium .chakra-graph {
  display: flex;
  justify-content: center;
  overflow: visible;
}

.chakra-graph--premium .chakra-graph svg {
  width: 100%;
  max-width: 560px; /* slightly larger than free */
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ========= ChakraGraph Mode Scaling ========= */

.chakra-graph-wrapper.chakra-graph--debug .chakra-graph svg {
  transform-origin: top left !important;
  transform: translateX(-110px) scale(0.60) !important; /* Much smaller: reduced from 1.48 */
  width: 600px !important;
  max-width: 600px !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}

/* Free page: BIGGER + no column clamp */
.chakra-graph-wrapper.chakra-graph--free .chakra-graph svg {
  transform-origin: top left !important;
  transform: translateX(-85px) scale(1.42) !important; /* bigger */
  width: 620px !important;  /* fixed target width */
  max-width: none !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}

/* Premium page: between free + debug */
.chakra-graph-wrapper.chakra-graph--premium .chakra-graph svg {
  transform-origin: top left !important;
  transform: translateX(-80px) scale(1.32) !important;
  width: min(720px, 100%) !important;
  height: auto !important;
  display: block !important;
  margin: 0 !important;
}

/* Base: never clamp the SVG (modes control size) */
.chakra-graph svg {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
}

/* prevent clipping */
.chakra-graph-wrapper,
.chakra-graph {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* ==========================================================
   ChakraGraph MODE SYNC (debug / free / premium)
   One renderer rule + per-mode variables
   ========================================================== */

/* Default values (safe fallback) */
.chakra-graph-wrapper {
  --cg-width: 620px;
  --cg-scale: 1.42;
  --cg-tx: -85px;
}

/* Debug */
.chakra-graph-wrapper.chakra-graph--debug {
  --cg-width: 620px;
  --cg-scale: 1.42;
  --cg-tx: -85px;
}

/* Free (two-column) */
.chakra-graph-wrapper.chakra-graph--free {
  --cg-width: 620px;
  --cg-scale: 1.42;
  --cg-tx: -85px;
}

/* Premium (make it match free for now — we can fine-tune later) */
.chakra-graph-wrapper.chakra-graph--premium {
  --cg-width: 620px;
  --cg-scale: 1.42;
  --cg-tx: -85px;
}

/* Ensure containers don't clamp */
.chakra-graph-wrapper,
.chakra-graph-wrapper .chakra-graph {
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

/* The ONE rule that actually sizes the SVG */
.chakra-graph-wrapper .chakra-graph svg {
  transform-origin: top left !important;
  transform: translateX(var(--cg-tx)) scale(var(--cg-scale)) !important;
  width: var(--cg-width) !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  display: block !important;
}

/* ==========================================================
   FINAL OVERRIDE (Premium) — must be LAST in the file
   If premium ever becomes small again, do not edit earlier blocks.
   Edit ONLY values here.
   ========================================================== */

.chakra-graph-wrapper.chakra-graph--premium {
  --cg-width: 620px !important;
  --cg-scale: 1.42 !important;
  --cg-tx: -85px !important;
}

.chakra-graph-wrapper.chakra-graph--premium .chakra-graph svg {
  width: var(--cg-width) !important;
  max-width: none !important;
  height: auto !important;
  transform-origin: top left !important;
  transform: translateX(var(--cg-tx)) scale(var(--cg-scale)) !important;
  margin: 0 !important;
  display: block !important;
}

/* ================================
   ChakraGraph: number styling
   Safe: affects only SVG text, no layout/clamps
================================ */

/* All number text inside chakra circles */
.chakra-graph-wrapper .chakra-graph svg [data-cg-layer="numbers"] text {
  fill: #ffffff !important;
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(0,0,0,0.25);
  stroke-width: 1px;
}

/* Slightly softer for crown/ajna if desired (optional) */
/*
.chakra-graph-wrapper .chakra-graph svg [data-cg-layer="numbers"] text[data-cg-chakra-key="crown"],
.chakra-graph-wrapper .chakra-graph svg [data-cg-layer="numbers"] text[data-cg-chakra-key="ajna"] {
  opacity: 0.95;
}
*/

/* Subtle glow like sacred UI (optional, still safe) */
.chakra-graph-wrapper .chakra-graph svg [data-cg-layer="numbers"] text {
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.25));
}

/* Slightly soften the inner ring so the outer ring reads first */
.chakra-graph-wrapper svg g[data-cg-layer="numbers"] text[data-cg-ring="1"] {
  opacity: 0.92;
}

/* Premium typography: tighter letter spacing for less "blobby" look */
.chakra-graph-wrapper svg g[data-cg-layer="numbers"] text {
  letter-spacing: -0.2px;
}

/* ==========================================================
   ChakraGraph: Line/Channel Color Classes
   ========================================================== */

/* Ensure all paths have no fill (lines only) */


/* marker: 2026-01-08-lines-outline-01 */

/* Stroke-based line rendering (Raju style) */
.chakra-graph g[data-cg-layer="lines"] path {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* marker: 2026-01-10-lines-classic-fill-outline-01 */

/* Base look for all line paths */
.chakra-graph [data-cg-layer="lines"] path {
  /* The "inside" */
  fill-opacity: 0.24;                 /* tweak: 0.22–0.30 */
  /* The outline */
  stroke-opacity: 0.72;               /* tweak: 0.60–0.80 */
  stroke-width: 1.1;                  /* tweak: 0.8–1.6 */
  stroke-linecap: round;
  stroke-linejoin: round;

  /* Keeps outline thickness consistent even if svg scales */
  vector-effect: non-scaling-stroke;
}

/* marker: 2026-01-11-opaque-lines-fix-01 */
/* Channel colors (fill + stroke) - full opacity fills */
.chakra-graph .white_channel {
  fill: #ffffff !important;
  stroke: rgba(255,255,255,1) !important;
}

.chakra-graph .grey_channel {
  fill: #000000 !important;
  stroke: rgba(0,0,0,1) !important;
}

.chakra-graph .black_channel {
  fill: #000000 !important;
  stroke: rgba(0,0,0,1) !important;
}

/* marker: 2026-01-09-lineTune-css-01 */
.chakra-graph [data-cg-layer="lines"] path.cg-line-selected {
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.9));
  opacity: 1 !important;
}

/* marker: 2026-01-09-lineTune-pointerevents-01 */
.chakra-graph [data-cg-layer="lines"],
.chakra-graph [data-cg-layer="lines"] path {
  pointer-events: all !important;
}

.chakra-graph [data-cg-layer="lines"] path {
  cursor: grab;
}

.chakra-graph [data-cg-layer="lines"] path.cg-line-selected {
  cursor: grabbing;
}

/* marker: 2026-01-10-lines-stroke-mode-01 */
.chakra-graph .cg-lines-stroke path {
  fill: none !important;
  stroke: rgba(255,255,255,0.35) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
}

/* marker: 2026-01-10-inner-dotted-css-01 */
.chakra-graph .cg-inner-dotted {
  fill: none !important;
  stroke: rgba(255,255,255,0.65) !important;
  stroke-width: 1.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
  opacity: 1 !important;
  pointer-events: none; /* do not interfere with thick line dragging */
}

/* marker: 2026-01-11-refined-lines-style-01 */
/* marker: 2026-01-11-opaque-lines-fix-01 */
.chakra-graph [data-cg-layer="lines"] path {
  /* interior (the existing fill color from the channel classes) */
  fill-opacity: 1 !important;

  /* subtle outline */
  stroke: rgba(0,0,0,0.35) !important;
  stroke-width: 0.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;

  /* prevent any forced thick appearance */
  filter: none !important;
}

.chakra-graph [data-cg-layer="lines"] path.white_channel {
  stroke: rgba(0,0,0,0.32) !important;
}

.chakra-graph [data-cg-layer="lines"] path.grey_channel {
  stroke: rgba(0,0,0,0.38) !important;
}

.chakra-graph [data-cg-layer="lines"] path.black_channel {
  stroke: rgba(0,0,0,0.45) !important;
}

/* Match core lines to regular line styling */
.chakra-graph [data-cg-layer="lines-core"] path {
  fill-opacity: 1 !important;
  stroke: rgba(0,0,0,0.35) !important;
  stroke-width: 0.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
  filter: none !important;
}

.chakra-graph [data-cg-layer="lines-core"] path.white_channel {
  stroke: rgba(0,0,0,0.32) !important;
}

.chakra-graph [data-cg-layer="lines-core"] path.grey_channel {
  stroke: rgba(0,0,0,0.38) !important;
}

.chakra-graph [data-cg-layer="lines-core"] path.black_channel {
  stroke: rgba(0,0,0,0.45) !important;
}

/* marker: 2026-01-13-non-scaling-stroke-01 */
.chakra-graph svg [data-cg-layer="lines"] path {
  vector-effect: non-scaling-stroke !important;
}

/* Lines must ALWAYS be visible (normal, free report, paid report) - no editor gate */
.chakra-graph-wrapper:not(.chakra-graph--editor) .chakra-graph [data-cg-layer="lines"] {
  display: inline !important;
}

/* ✅ FINAL: Visible layer line thickness + no fill */
.chakra-graph [data-cg-layer="lines-core-overlay"] path.cg-line-main,
.chakra-graph [data-cg-layer="lines-core-overlay"] path.cg-line-outline,
.chakra-graph [data-cg-layer="lines-core-target"] path.cg-line-main,
.chakra-graph [data-cg-layer="lines-core-target"] path.cg-line-outline,
.chakra-graph [data-cg-layer="lines-core-between"] path.cg-line-main,
.chakra-graph [data-cg-layer="lines-core-between"] path.cg-line-outline {
  stroke-width: 7px !important;
  fill: none !important;
  vector-effect: non-scaling-stroke !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Line 21-8: styling done via JS (inline) only - no CSS fill/stroke to avoid affecting other lines */

/* Ensure channel classes never add fills to overlay line paths */
.chakra-graph [data-cg-layer="lines-core-overlay"] path.cg-line-main.white_channel,
.chakra-graph [data-cg-layer="lines-core-overlay"] path.cg-line-main.grey_channel,
.chakra-graph [data-cg-layer="lines-core-overlay"] path.cg-line-main.black_channel,
.chakra-graph [data-cg-layer="lines-core-overlay"] path.cg-line-outline.white_channel,
.chakra-graph [data-cg-layer="lines-core-overlay"] path.cg-line-outline.grey_channel,
.chakra-graph [data-cg-layer="lines-core-overlay"] path.cg-line-outline.black_channel,
.chakra-graph [data-cg-layer="lines-core-target"] path.cg-line-main.white_channel,
.chakra-graph [data-cg-layer="lines-core-target"] path.cg-line-main.grey_channel,
.chakra-graph [data-cg-layer="lines-core-target"] path.cg-line-main.black_channel,
.chakra-graph [data-cg-layer="lines-core-target"] path.cg-line-outline.white_channel,
.chakra-graph [data-cg-layer="lines-core-target"] path.cg-line-outline.grey_channel,
.chakra-graph [data-cg-layer="lines-core-target"] path.cg-line-outline.black_channel,
.chakra-graph [data-cg-layer="lines-core-between"] path.cg-line-main.white_channel,
.chakra-graph [data-cg-layer="lines-core-between"] path.cg-line-main.grey_channel,
.chakra-graph [data-cg-layer="lines-core-between"] path.cg-line-main.black_channel,
.chakra-graph [data-cg-layer="lines-core-between"] path.cg-line-outline.white_channel,
.chakra-graph [data-cg-layer="lines-core-between"] path.cg-line-outline.grey_channel,
.chakra-graph [data-cg-layer="lines-core-between"] path.cg-line-outline.black_channel {
  fill: none !important;
}

/* SAFETY: lines must always be visible */
svg g[data-cg-layer="lines"],
svg g.cg-hit-layer[data-cg-layer="lines"]{
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Active lines must be clearly visible */
svg .cg-active-line{
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}

/* Make overlay active lines thicker to match old style */
svg g[data-cg-layer="lines-core-overlay"] .cg-active-line,
svg g[data-cg-layer="lines-core-target"] .cg-active-line,
svg g[data-cg-layer="lines-core-between"] .cg-active-line {
  stroke-width: 4px !important;
}

/* Line 21-8 heart: active state uses same var */
svg g[data-cg-layer="line-21-8-heart"] .cg-active-line {
  stroke-width: var(--cg-line-w, 3px) !important;
}

/* Inactive chakra covers (white overlays) - non-interactive */
svg [data-cg-chakra-cover="1"]{
  pointer-events: none;
}