/* SmartPropFact chart layer (Arc 1 Task 3) — the ONLY place agent/charts.py takes a color.
   Every value is a token from tokens.css; DESIGN.md §Color: the six semantic colors are
   meaning, never decoration. A shape says what it means through its tone-* class and the
   token paints it, so light / dark re-theme the charts with no change here. */

.spf-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--font-sans);
}
.spf-chart text {
  fill: var(--text-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums lining-nums;
}
.spf-chart .num { font-variant-numeric: tabular-nums lining-nums; }

/* stroke tones — one rule per word of the vocabulary (lines, paths, polylines, arcs) */
.spf-chart .tone-equity { stroke: var(--equity); }
.spf-chart .tone-cash { stroke: var(--cash); }
.spf-chart .tone-cash-deductible { stroke: var(--cash-deductible); }
.spf-chart .tone-taxable { stroke: var(--taxable); }
.spf-chart .tone-drag { stroke: var(--drag); }
.spf-chart .tone-market { stroke: var(--market); }
.spf-chart .tone-hairline { stroke: var(--hairline); }
.spf-chart .tone-text-3 { stroke: var(--text-3); }
/* `muted` is the vocabulary's neutral word: NO semantic meaning, the same ink as text-3.
   A caller reaches for it when a series is deliberately de-emphasised — never to sneak a
   grey past the color law (a grey that means "cash" must say tone-cash). */
.spf-chart .tone-muted { stroke: var(--text-3); }

/* fill tones — bars, dots, the emphasised last point */
.spf-chart .fill-equity { fill: var(--equity); }
.spf-chart .fill-cash { fill: var(--cash); }
.spf-chart .fill-cash-deductible { fill: var(--cash-deductible); }
.spf-chart .fill-taxable { fill: var(--taxable); }
.spf-chart .fill-drag { fill: var(--drag); }
.spf-chart .fill-market { fill: var(--market); }
.spf-chart .fill-hairline { fill: var(--hairline); }
.spf-chart .fill-text-3 { fill: var(--text-3); }
.spf-chart .fill-muted { fill: var(--text-3); }
.spf-chart .fill-equity-soft { fill: var(--equity-fill); }

/* gradient stops: the SVG carries stop-color="currentColor", the token is the color */
.spf-chart .stop-equity { color: var(--equity); }
.spf-chart .stop-market { color: var(--market); }
.spf-chart .stop-taxable { color: var(--taxable); }

/* the area under a line is a fill (gradient), never a stroke; solid shapes drop the stroke
   their tone-* class would otherwise give them (later rule, same specificity → wins) */
.spf-chart .area { stroke: none; }
.spf-chart .no-stroke { stroke: none; }

/* text tones. `.spf-chart text` sets weight 500 for everything, so the terminus's own
   font-weight="700" presentation attribute LOSES to it (a CSS declaration always beats a
   presentation attribute) — text-strong is what actually makes 自走 bold. Keep both: the
   attribute survives an unstyled render, the rule wins where the stylesheet loads. */
.spf-chart text.text-strong { fill: var(--text); font-weight: 700; }
.spf-chart text.text-3 { fill: var(--text-3); }
.spf-chart text.text-drag { fill: var(--drag); }
.spf-chart text.text-equity { fill: var(--equity); }
.spf-chart text.text-taxable { fill: var(--taxable-text); }
.spf-chart-empty text { fill: var(--text-3); }

/* inside the navy hero card the road is drawn on the HERO's own two text tokens
   (mockup 2026-09-06-home: cash line white, axis text white at 72%). The semantic
   exceptions the mockup keeps: 自走 white and bold, いまここ still red — named in the
   :not() so they no longer depend on this block's source order. */
.spf-hero .spf-chart .tone-cash { stroke: var(--hero-text); }
.spf-hero .spf-chart text:not(.text-strong):not(.text-drag) { fill: var(--hero-text-2); }
.spf-hero .spf-chart text.text-strong { fill: var(--hero-text); }
.spf-hero .spf-chart text.text-drag { fill: var(--drag); }
/* the frame is the hero's own ink at the mockup's two opacities: the baseline / zero /
   horizon hairlines at 18%, the milestone ticks and the 自走 guide at 50%. --hairline and
   --text-3 are page-ground inks and would all but vanish on the navy. */
.spf-hero .spf-chart .tone-hairline {
  stroke: color-mix(in srgb, var(--hero-text) 18%, transparent);
}
.spf-hero .spf-chart .tone-text-3 {
  stroke: color-mix(in srgb, var(--hero-text) 50%, transparent);
}