/* ==========================================================================
   chart.css — octagram SVG styling (blueprint §4.2 / §4.4).
   Loaded only on templates that render a chart (see inc/enqueue.php).
   Geometry lives in dm-chart.js; this file owns presentation only.
   ========================================================================== */

.dm-chart { display: block; margin-inline: auto; }
.dm-chart .dm-structure { stroke: var(--violet-300); stroke-width: 1.5; fill: none; opacity: .6; }
.dm-chart .dm-rim { stroke: var(--line); stroke-width: 1; fill: none; }
.dm-chart .dm-axis--sky { stroke: var(--sky-400); stroke-width: 2; opacity: .55; }
.dm-chart .dm-axis--earth { stroke: var(--earth-400); stroke-width: 2; opacity: .55; }
.dm-chart .dm-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: opacity var(--dur) var(--ease); }
.dm-chart .dm-line--love { stroke: var(--rose-400); }
.dm-chart .dm-line--money { stroke: var(--teal-400); }
.dm-chart .dm-line.is-emphasis { opacity: 1; }
.dm-chart .dm-line.is-dimmed { opacity: .2; }

.dm-chart .dm-node { cursor: pointer; }
.dm-chart .dm-node__halo { fill: transparent; } /* invisible r=44 hit area (§4.4) */
.dm-chart .dm-node__circle {
  fill: var(--ink-800); stroke-width: 2;
  transition: transform var(--dur) var(--ease), stroke-width var(--dur) var(--ease);
  transform-box: fill-box; transform-origin: center;
}
.dm-chart .dm-node:hover .dm-node__circle,
.dm-chart .dm-node:focus-visible .dm-node__circle { transform: scale(1.08); }
.dm-chart .dm-node.is-selected .dm-node__ring { stroke: var(--gold-400); stroke-width: 2; fill: none; }
.dm-chart .dm-node__num {
  fill: var(--text); font-family: var(--font-ui); font-weight: 700;
  font-variant-numeric: tabular-nums; text-anchor: middle; dominant-baseline: central;
  pointer-events: none;
}
.dm-chart .dm-node--center .dm-node__num { fill: #fff; }
.dm-chart .dm-node__label {
  fill: var(--text-muted); font-family: var(--font-display); font-weight: 500;
  font-size: 15px; pointer-events: none;
}
.dm-chart .dm-node__tag { fill: var(--text-faint); font-family: var(--font-ui); font-size: 11px; pointer-events: none; }
.dm-chart .dm-marker-tail { fill: var(--danger-400); }
.dm-chart .dm-marker-dot--sky { fill: var(--sky-400); }
.dm-chart .dm-marker-dot--earth { fill: var(--earth-400); }

/* Reveal animation (§4.2): lines draw, nodes stagger in. JS adds .is-revealed
   after first frame; reduced motion renders final state instantly. */
.dm-chart .dm-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dm-chart.is-revealed .dm-draw { animation: dm-draw .6s var(--ease) forwards; }
.dm-chart .dm-node { opacity: 0; }
.dm-chart.is-revealed .dm-node { animation: dm-pop .35s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes dm-draw { to { stroke-dashoffset: 0; } }
@keyframes dm-pop { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dm-chart .dm-draw { stroke-dashoffset: 0; animation: none; }
  .dm-chart .dm-node { opacity: 1; animation: none; }
  .dm-chart .dm-line { transition: none; }
}

/* Small containers: long labels off, letters stay (§4.4) */
.dm-chart-wrap--compact .dm-node__label--long { display: none; }

/* Static/example charts are non-interactive */
.dm-chart--static .dm-node { cursor: default; }
.dm-chart--static .dm-node:hover .dm-node__circle { transform: none; }