/* =========================================
   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;
}

/* Premium SVG sizing/transform: see .chakra-graph-wrapper.chakra-graph--premium rules below only.
   (Old width:100%/max-width:560 here fought the unified --cg-* transform and caused a horizontal snap.) */

/* ========= 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;
}

/* 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 — full-size illustration) */
.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;
}

/* Premium blueprint hero (flex row): stable graph column beside insight cards */
.cr-hero .cr-hero-graph .chakra-graph-wrapper.chakra-graph--premium {
  min-width: min(520px, 100%);
  flex: 0 0 auto;
  box-sizing: border-box;
}

/* ================================
   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;
}

/* Consistent thickness for all line paths */
.cg-line-main,
.cg-line-outline {
  vector-effect: non-scaling-stroke;
}

/* Top overlay: visible, on top of everything */
svg g[data-cg-layer="lines-core-overlay-top"] {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
}
svg g[data-cg-layer="lines-core-overlay-top"] .cg-active-line {
  stroke-width: 4px !important;
}
svg g[data-cg-layer="lines-core-overlay-top"] path {
  vector-effect: non-scaling-stroke !important;
}

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

/* =========================================
   Debug v2 product preview (chakra_graph_debug_v2)
   Match CD Blueprint template (page-cd-blueprint.php): --cream #F9F6F1,
   warm borders (#e8e4de). No cool-slate graph panel — same as live report.
   ========================================= */

.cg-v2-debug-product {
  max-width: 1120px;
  margin: 16px auto 0;
  padding: 12px 14px 16px;
  background: #f9f6f1;
  border: 1px solid rgba(28, 28, 26, 0.12);
  border-radius: 12px;
  text-align: left;
  box-sizing: border-box;
}

.cg-v2-debug-product__intro {
  margin: 0 0 12px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.45;
  color: #4a4845;
}

/* Do not restyle premium graph wrapper — partial + base .chakra-graph--premium rules only */

.cg-v2-debug-product .cr-report {
  max-width: 1080px !important;
  padding: 0 8px !important;
  margin: 0 auto !important;
}

.cg-v2-debug-product .cr-success {
  padding: 8px 12px !important;
  margin-bottom: 10px !important;
}

.cg-v2-debug-product .cr-header {
  margin-bottom: 10px !important;
}

.cg-v2-debug-product .cr-hero {
  gap: 12px !important;
  margin-bottom: 14px !important;
  align-items: flex-start !important;
}

.cg-v2-debug-product .cr-chakra-summary {
  gap: 10px !important;
  margin-bottom: 14px !important;
}

/* PDF block below blueprint */
.cg-v2-debug-product__pdf {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fafaf8;
  border: 1px solid #e8e4de;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.04);
}

.cg-v2-debug-product__pdf-title {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1c1c1a;
}

.cg-v2-debug-product__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b5b3a;
  background: #f0e6d4;
  border-radius: 4px;
  vertical-align: middle;
}

.cg-v2-debug-product__pdf-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #8a8884;
}

.cg-v2-debug-product__pdf-note a {
  color: #8b7355;
  font-weight: 600;
}

.cg-v2-debug-product__pdf-frame {
  width: 100%;
  min-height: 680px;
  border: 1px solid #e4e0d8;
  border-radius: 8px;
  background: #f9f6f1;
}

/* Technical tables section */
.cg-v2-debug-panels-wrap {
  max-width: 1120px;
  margin: 14px auto 28px;
  padding: 12px 14px 16px;
  background: #f1ede5;
  border: 1px solid rgba(28, 28, 26, 0.12);
  border-radius: 10px;
  box-sizing: border-box;
}

.cg-v2-debug-panels-wrap__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1a;
  text-align: center;
}

.cg-v2-debug-panels-wrap__sub {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.4;
  color: #8a8884;
  text-align: center;
}

/* Raw astrology (Sheratan sidereal vs tropical) — debug shortcode */
.cg-v2-debug-astro-wrap {
  max-width: 1120px;
  margin: 0 auto 28px;
  padding: 14px 16px 18px;
  background: #fafaf8;
  border: 1px solid #e8e4de;
  border-radius: 10px;
  box-sizing: border-box;
}

.cg-v2-debug-astro-wrap__title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: #1c1c1a;
  text-align: center;
}

.cg-v2-debug-astro-wrap__sub {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: #8a8884;
  text-align: center;
}

.cg-v2-debug-astro-wrap__ref {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 11px;
  line-height: 1.5;
  color: #4a4845;
}

.cg-v2-debug-astro-wrap__usage {
  margin: 0 0 12px;
  padding: 8px 10px;
  background: #f9f6f1;
  border-radius: 6px;
  font-size: 10px;
  line-height: 1.45;
  color: #4a4845;
}

.cg-v2-debug-astro-wrap__usage-k {
  display: inline-block;
  min-width: 11em;
  font-weight: 600;
  color: #6b6358;
}

.cg-v2-debug-astro-wrap__table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.cg-v2-debug-astro-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #1c1c1a;
}

.cg-v2-debug-astro-table th,
.cg-v2-debug-astro-table td {
  border: 1px solid #e4e0d8;
  padding: 6px 8px;
  text-align: left;
}

.cg-v2-debug-astro-table th {
  background: #f1ede5;
  font-weight: 600;
  white-space: nowrap;
}

.cg-v2-debug-astro-table__num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: 11px;
}

.cg-v2-debug-astro-table__tag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a7355;
  background: #ede3d3;
  border-radius: 3px;
  vertical-align: middle;
}