/* Growth chart. Uses the site tokens from assets/site.css. */
/* Series colours, checked with the dataviz validate_palette.js --pairs all against --paper-raised
   (every pair, since lines cross). IHSG is the de-emphasis gray: below the chroma floor and under
   3:1 by design; it is direct-labelled and in the table.
   Light: CVD 8.2 (IHSG vs S&P), normal 15.7. Contrast WARN IHSG 2.27.
   Dark: fund, S&P, gold pass on their own (CVD 11.6, normal 15.1). With IHSG: CVD 9.9 (pass);
   normal 10.1 for gold vs IHSG (FAIL), same lightness, told apart by hue, labels and table.
   Contrast WARN IHSG 2.62. */
:root {
  --chart-fund: #8A3A1E;
  --chart-spx: #179696;
  --chart-gold: #A47C13;
  --chart-ihsg: #ADA69B;
  --chart-grid: #E9E2D3;
  --chart-wash: #F3EEE3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --chart-fund: #C97A4F;
    --chart-spx: #2A86A8;
    --chart-gold: #856214;
    --chart-ihsg: #605D5A;
    --chart-grid: #2C2620;
    --chart-wash: #2A241D;
  }
}
:root[data-theme="dark"] {
  --chart-fund: #C97A4F;
  --chart-spx: #2A86A8;
  --chart-gold: #856214;
  --chart-ihsg: #605D5A;
  --chart-grid: #2C2620;
  --chart-wash: #2A241D;
}

.chart {
  margin: 0;
  background: var(--paper-raised);
  padding: var(--s-4) var(--s-3) var(--s-3);
  border-radius: 2px;
}
@media (min-width: 40rem) {
  .chart { padding: var(--s-5) var(--s-5) var(--s-4); }
}

.chart-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-4);
}
.chart-title {
  font-family: var(--serif);
  font-size: var(--f1);
  line-height: var(--l1);
  font-weight: 500;
  max-width: none;
  text-wrap: balance;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  font-size: var(--fm2);
  line-height: var(--lm2);
  color: var(--ink-muted);
}
.chart-legend li { display: inline-flex; align-items: center; gap: var(--s-2); }

.chart-key {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 0;
  border-top: 2px solid var(--chart-ihsg);
}
.chart-key--fund { border-top: 3px solid var(--chart-fund); }
.chart-key--spx { border-top-color: var(--chart-spx); }
.chart-key--gold { border-top-color: var(--chart-gold); }
.chart-key--gap { border-top: 2px dotted var(--chart-fund); opacity: 0.8; }

.chart-plot { position: relative; }
.chart-svg { display: block; overflow: visible; touch-action: pan-y; }
.chart-svg:focus { outline: none; }
.chart-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.chart-grid line { stroke: var(--chart-grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart-grid .chart-ref { stroke: var(--rule); }
.chart-grid .chart-base { stroke: var(--rule); }
.chart-x line { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }

.chart-tick {
  fill: var(--ink-muted);
  font-family: var(--sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.chart-note {
  fill: var(--ink-muted);
  font-family: var(--sans);
  font-size: 12px;
}
.chart-fall rect { fill: var(--chart-wash); }
.chart-note--s { font-size: 11px; }
.chart-svg.is-active .chart-ends,
.chart-svg.is-active .chart-note { opacity: 0; }

.chart-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart-line--ihsg { stroke: var(--chart-ihsg); stroke-width: 2; }
.chart-line--spx { stroke: var(--chart-spx); stroke-width: 2; }
.chart-line--gold { stroke: var(--chart-gold); stroke-width: 2; }
.chart-line--fund { stroke: var(--chart-fund); stroke-width: 2.5; }
.chart-line--gap { stroke: var(--chart-fund); stroke-width: 2; stroke-dasharray: 1 5; opacity: 0.8; }

.chart-dot { stroke: var(--paper-raised); stroke-width: 2; }
.chart-dot--fund { fill: var(--chart-fund); }
.chart-dot--ihsg { fill: var(--chart-ihsg); }
.chart-dot--spx { fill: var(--chart-spx); }
.chart-dot--gold { fill: var(--chart-gold); }

.chart-lead { fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-lead--fund { stroke: var(--chart-fund); }
.chart-lead--spx { stroke: var(--chart-spx); }
.chart-lead--gold { stroke: var(--chart-gold); }
.chart-lead--ihsg { stroke: var(--chart-ihsg); }

.chart-end {
  fill: var(--ink-muted);
  font-family: var(--sans);
  font-size: 13px;
  paint-order: stroke;
  stroke: var(--paper-raised);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.chart-end-v { fill: var(--ink); font-weight: 500; }

.chart-cross { stroke: var(--ink-muted); stroke-width: 1; shape-rendering: crispEdges; }
.chart-hit { fill: transparent; cursor: crosshair; }

.chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  min-width: 9rem;
  padding: var(--s-2) var(--s-3);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  font-size: var(--fm2);
  line-height: var(--lm2);
  color: var(--ink);
  white-space: nowrap;
}
.chart-tip[hidden] { display: none; }
.chart-tip p { max-width: none; }
.chart-tip-m { color: var(--ink-muted); margin-bottom: var(--s-1); }
.chart-tip-r { display: flex; align-items: center; gap: var(--s-2); }
.chart-tip-r strong { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 2.25rem; }
.chart-tip-s { color: var(--ink-muted); }
.chart-tip-n { color: var(--ink-muted); }

/* Without JS the figure is one sentence. */
.chart-nojs { font-size: var(--fm1); line-height: var(--lm1); color: var(--ink-muted); }
.chart.is-ready .chart-nojs { display: none; }
.chart:not(.is-ready) .chart-legend { display: none; }

@media (forced-colors: active) {
  .chart-line--ihsg, .chart-line--spx, .chart-line--gold { stroke: CanvasText; }
  /* No colour here, so the benchmarks get dash patterns. The fund stays solid in Highlight. */
  .chart-line--spx { stroke-dasharray: 8 4; }
  .chart-line--gold { stroke-dasharray: 2 4; }
  .chart-key { border-color: CanvasText; }
  .chart-key--spx { border-top-style: dashed; }
  .chart-key--gold { border-top-style: dotted; }
  .chart-lead { stroke: CanvasText; }
  .chart-line--fund, .chart-line--gap { stroke: Highlight; }
  .chart-key--fund, .chart-key--gap { border-color: Highlight; }
}

/* Hero placement: full width, straight under the headline. */
.hero-chart { grid-column: 1 / -1; margin-top: var(--s-6); }
@media (min-width: 40rem) { .hero-chart { margin-top: var(--s-7); } }