/* ============================================================
   charts.css — investor data visualisation
   Every chart draws itself from the film's horizon line, so the
   data appears to grow out of the environment rather than being
   pasted on top of it.
   ============================================================ */

.chart {
  position: relative;
  width: 100%;
  height: 100%;
}
.chart svg { width: 100%; height: 100%; overflow: visible; }

/* Axes and grid stay almost invisible: the data is the subject. */
.ax-line   { stroke: var(--ink-line); stroke-width: 1; }
.ax-base   { stroke: rgba(205, 245, 70, 0.55); stroke-width: 1.25; }
.ax-label  {
  fill: var(--mist-34);
  font-family: var(--font-utility);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.ax-value  {
  fill: var(--mist-52);
  font-family: var(--font-utility);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* --- Columns ------------------------------------------------- */
.bar {
  transform-origin: 50% 100%;
  transform-box: fill-box;
}
.bar-fill-lime { fill: url(#gradLime); }
.bar-fill-gold { fill: url(#gradGold); }
.bar-cap {
  stroke: var(--lime);
  stroke-width: 2;
  stroke-linecap: round;
}
.bar-cap.is-gold { stroke: var(--gold); }

.bar-value {
  fill: var(--white);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

/* --- Line / area --------------------------------------------- */
.line-path {
  fill: none;
  stroke: var(--lime);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(205, 245, 70, 0.5));
}
.line-area { fill: url(#gradArea); }
.line-node {
  fill: var(--ink-deep);
  stroke: var(--lime);
  stroke-width: 2.5;
}

/* --- Donut / revenue mix -------------------------------------- */
.donut-track { fill: none; stroke: var(--ink-line); stroke-width: 22; }
.donut-arc {
  fill: none;
  stroke-width: 22;
  stroke-linecap: butt;
  transform-origin: center;
}

.legend { display: flex; flex-direction: column; gap: 11px; }
.legend-item {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ink-line);
  will-change: opacity, transform;
}
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; }
.legend-name {
  font-size: var(--t-body);
  color: var(--mist-70);
}
.legend-value {
  font-family: var(--font-utility);
  font-size: var(--t-body);
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

/* --- Map ------------------------------------------------------ */
.map-shape {
  fill: rgba(18, 99, 74, 0.22);
  stroke: rgba(205, 245, 70, 0.42);
  stroke-width: 1.25;
  stroke-linejoin: round;
}
.map-shape.is-phase2 { fill: rgba(201, 162, 39, 0.10); stroke: rgba(201,162,39,0.40); }
.map-node {
  fill: var(--lime);
  filter: drop-shadow(0 0 10px rgba(205, 245, 70, 0.9));
}
.map-node.is-gold { fill: var(--gold); filter: drop-shadow(0 0 10px rgba(201,162,39,0.9)); }
.map-pulse {
  fill: none;
  stroke: rgba(205, 245, 70, 0.6);
  stroke-width: 1.25;
}
.map-label {
  fill: var(--mist-70);
  font-family: var(--font-utility);
  font-size: 13px;
  letter-spacing: 0.10em;
}
.map-arc {
  fill: none;
  stroke: rgba(201, 162, 39, 0.55);
  stroke-width: 1.25;
  stroke-dasharray: 4 6;
}

/* --- Ecosystem diagram ---------------------------------------- */
.eco-link {
  fill: none;
  stroke: rgba(205, 245, 70, 0.28);
  stroke-width: 1.25;
}
.eco-pulse {
  fill: var(--lime);
  filter: drop-shadow(0 0 8px rgba(205, 245, 70, 0.9));
}
.eco-node-ring {
  fill: rgba(8, 25, 20, 0.92);
  stroke: rgba(205, 245, 70, 0.42);
  stroke-width: 1.25;
}
.eco-node-core {
  fill: url(#gradCore);
  stroke: rgba(205, 245, 70, 0.7);
  stroke-width: 1.5;
}
.eco-label {
  fill: var(--mist-70);
  font-family: var(--font-utility);
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-anchor: middle;
  text-transform: uppercase;
}
.eco-label.is-core {
  fill: var(--white);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* --- Escrow ladder -------------------------------------------- */
.escrow-step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: var(--s-4);
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink-line);
  will-change: opacity, transform;
}
.escrow-dot {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(205, 245, 70, 0.32);
  background: rgba(205, 245, 70, 0.06);
  font-family: var(--font-utility);
  font-size: var(--t-caption);
  color: var(--lime);
}
.escrow-step b {
  display: block;
  font-size: var(--t-lead);
  font-weight: var(--w-med);
  color: var(--cream);
  letter-spacing: -0.01em;
}
.escrow-step span { font-size: var(--t-body); color: var(--mist-52); }