{# Brutalist chart defs: grain filter, area-fade gradient, clip-path.
   Grain filter is substrate-aware:
     - Light scholar substrate: low-frequency fractalNoise (.45) desaturated
       to .1, applied at opacity .15 with mix-blend-mode multiply. Matches
       the v0.3.2 brutalist light scholar prototype's paper-grain filter
       (hw-codex-star-charts-light-scholar.html:45) — produces a subtle
       brown dapple on cream paper rather than the dark-substrate green
       wash, which read as off-palette dapple against any light variant's
       paper canvas.
     - Dark substrate: high-frequency fractalNoise (1.6) tinted constant
       (0.04, 0.16, 0.10) at alpha=0.14. Ported from tier2/genomes/brutalist
       /emerald/brutalist-star-history-v4b.svg; reads as faint phosphor
       speckle on the dark canvas. #}
{% if substrate_kind == 'light' %}
<filter id="{{ uid }}-grain" x="0%" y="0%" width="100%" height="100%">
  <feTurbulence type="fractalNoise" baseFrequency=".45" numOctaves="4" seed="7"/>
  <feColorMatrix type="saturate" values=".1"/>
</filter>
{% else %}
<filter id="{{ uid }}-grain" x="0%" y="0%" width="100%" height="100%">
  <feTurbulence type="fractalNoise" baseFrequency="1.6" numOctaves="2" seed="19" result="noise"/>
  <feColorMatrix in="noise" type="luminanceToAlpha" result="alpha-noise"/>
  <feColorMatrix in="alpha-noise" type="matrix" values="0 0 0 0 0.04
                                                         0 0 0 0 0.16
                                                         0 0 0 0 0.10
                                                         0 0 0 0.14 0"/>
</filter>
{% endif %}
{# Area-fade gradient stops use the SVG-root-scoped --dna-signal instead of the
   chart-scoped --dna-chart-main. The chart-main var is declared on `.uid-chart`
   (a `<g>` element) — but gradient stops live in `<defs>` at SVG root, a
   SIBLING of the chart group, NOT an ancestor, so they can't see chart-scoped
   vars. v0.3.13: BOTH substrates fill the area with the accent
   (--dna-signal) at low opacity — the data-viz role — so the area reads as the
   same colour family as the polyline. The root var keeps per-variant accent
   resolution working across the defs/group boundary. #}
<linearGradient id="{{ uid }}-area-fade" x1="0" y1="0" x2="0" y2="1">
{% if substrate_kind == 'light' %}
  <stop offset="0%" stop-color="var(--dna-signal)" stop-opacity="0.13"/>
  <stop offset="100%" stop-color="var(--dna-signal)" stop-opacity="0.01"/>
{% else %}
  <stop offset="0%" stop-color="var(--dna-signal)" stop-opacity="0.12"/>
  <stop offset="100%" stop-color="var(--dna-signal)" stop-opacity="0.01"/>
{% endif %}
</linearGradient>
<clipPath id="{{ uid }}-clip"><rect width="{{ width }}" height="{{ height }}"/></clipPath>
{# v0.3.2 Phase D: dark header panel gradient for light scholar chart variants.
   Gated on panel_gradient_stops. Light template renders a dark gradient panel
   in the header zone (y=0→42) with a gold seam below it, matching the brutalist
   scholar chart prototype's elevated-header composition. #}
{% if panel_gradient_stops %}
<linearGradient id="{{ uid }}-panel" x1="0" x2="1" y1="0" y2="0">
{% for stop in panel_gradient_stops %}
<stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}"/>
{% endfor %}
</linearGradient>
{% endif %}
{{ chart_defs | default("") | safe }}
<style>
  {{ font_faces | safe }}
  text { font-family: var(--dna-font-mono, var(--dna-font-display, 'JetBrains Mono', monospace)); shape-rendering: geometricPrecision; }
  {# Chart semantic vars cascade to the shared chart components via the
     {{ uid }}-chart wrapper class on the outer <g>. v0.3.13: BOTH substrates
     route the data line to the accent (--dna-signal) — the data-viz role — so
     light + dark charts speak the same visual language and light charts match
     their stats-card sibling (whose activity bars are also --dna-signal).
     --dna-chart-highlight stays the seam tone for the thin bright-core overlay. #}
{% if substrate_kind == 'light' %}
  .{{ uid }}-chart {
    --dna-chart-main: var(--dna-signal);
    --dna-chart-highlight: var(--dna-seam-color);
    --dna-chart-axis-text: var(--dna-signal);
    --dna-chart-glyph: var(--dna-glyph-inner, var(--dna-seam-color));
    {# Title zone bg uses the per-variant chart_title_bg captured from
       the v0.3.2 brutalist light chart prototype. Falls back to
       surface-deep when a variant doesn't declare its own. #}
    {# Milestone marker palette (consumed by chart-milestone-brutalist.svg.j2).
       Light scholar: gold/lime/orange/etc. seam outer, paper canvas mid,
       dark ink inner + label. Matches the v0.3.2 brutalist light scholar
       prototype milestone structure. #}
    --dna-chart-milestone-outer: var(--dna-seam-color);
    --dna-chart-milestone-mid: var(--dna-surface);
    --dna-chart-milestone-inner: var(--dna-ink-primary);
    --dna-chart-milestone-text: var(--dna-ink-primary);
  }
{% else %}
  .{{ uid }}-chart {
    --dna-chart-main: var(--dna-signal);
    --dna-chart-highlight: var(--dna-signal-dim, var(--dna-signal));
    --dna-chart-axis-text: var(--dna-ink-muted);
    --dna-chart-glyph: var(--dna-glyph-inner, var(--dna-signal));
    --dna-chart-title-bg: var(--dna-surface-deep);
    {# Milestone marker palette (consumed by chart-milestone-brutalist.svg.j2).
       Dark mono: variant accent (signal) outer, canvas (surface_0) mid, cream
       ink (ink-primary) inner + label. Matches the v0.3.2 brutalist dark
       prototype milestone structure. The mid value uses --dna-surface
       which post-v0.3.3 carries the canvas/ground tone (not
       the elevated panel that brand_panel_fill carries — see badge field
       hierarchy decoupling in brutalist-dark-content.j2). #}
    --dna-chart-milestone-outer: var(--dna-signal);
    --dna-chart-milestone-mid: var(--dna-surface);
    --dna-chart-milestone-inner: var(--dna-ink-primary);
    --dna-chart-milestone-text: var(--dna-ink-primary);
  }
{% endif %}
  {# Typography ported VERBATIM from prototypes:
       dark (pigment): the v0.3.2 brutalist dark chart prototype lines 427-436
       light (pulse): the v0.3.2 brutalist light chart prototype lines 74-79

     Both use Barlow Condensed 48px 900 for title + hero. Fills differ by
     substrate because polarity inverts (light has paper substrate hosting
     dark text + crimson title; dark has dark substrate hosting bright
     text + bright title). substrate_kind switches the routing.

     Dark mappings:
       title-main / hero-value → var(--dna-brand-text) (--th = bright ink)
       title-sub  / hero-label → var(--dna-signal) (--a = accent) opacity .8
       hdr-user                → var(--dna-brand-text) (--th)
       hdr-meta / foot         → var(--dna-label-text) (--tl)
       foot-brand              → var(--dna-signal) (--a)
       axis-y / axis-x         → var(--dna-ink-muted) (--al = accent-light)

     Light mappings (v0.3.13 — accent carries data-viz + labels-on-cream):
       title-main / title-sub / hero-label → var(--dna-signal) (accent label)
       hero-value              → var(--dna-ink-primary) (dark ink on paper)
       hdr-user                → var(--dna-brand-text) (paper on dark panel)
       hdr-meta / foot         → var(--dna-label-text)
       foot-brand              → var(--dna-seam-color) (gold)
       axis-y / axis-x         → var(--dna-chart-axis-text)=signal opacity .7/.55 #}
{% if substrate_kind == 'light' %}
  {# Fill + opacity values verified against the v0.3.2 brutalist light chart prototype
     pulse panel lines 74-78 (pulse variant). Per-variant resolution flows
     through --dna-bg (panel color) and --dna-seam-color (variant accent gold/lime/
     orange/etc.). Earlier iteration over-tuned opacities (.uid-axis-y at 0.85
     vs prototype 0.65, .uid-foot at 0.75 vs prototype 0.5) and routed
     .uid-foot-brand to panel-color instead of the prototype's gold-at-0.5.
     .uid-hdr-meta uses --dna-brand-text (paper) at 0.5 opacity on the dark
     header gradient — was routed to --dna-label-text which resolved to dark
     ink (invisible on the dark panel). #}
  .{{ uid }}-hdr-user { font-size: 12px; font-weight: 800; letter-spacing: 0.20em; fill: var(--dna-brand-text); }
  .{{ uid }}-hdr-meta { font-size: 9px; font-weight: 500; letter-spacing: 0.10em; fill: var(--dna-brand-text); opacity: 0.5; }
  .{{ uid }}-title-main { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; font-weight: 900; letter-spacing: 0.05em; fill: var(--dna-signal); text-transform: uppercase; }
  .{{ uid }}-title-sub { font-size: 9px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; fill: var(--dna-signal); opacity: 0.6; }
  .{{ uid }}-hero-value { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; font-weight: 900; letter-spacing: -0.02em; fill: var(--dna-ink-primary); }
  .{{ uid }}-hero-label { font-size: 9px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; fill: var(--dna-signal); opacity: 0.55; }
  .{{ uid }}-axis-y { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; fill: var(--dna-chart-axis-text, var(--dna-bg)); opacity: 0.7; }
  .{{ uid }}-axis-x { font-size: 9px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; fill: var(--dna-chart-axis-text, var(--dna-bg)); opacity: 0.55; }
  .{{ uid }}-milestone { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; fill: var(--dna-ink-primary); }
  .{{ uid }}-grid-coord { font-size: 5px; font-weight: 500; fill: var(--dna-ink-primary); opacity: 0.18; }
  {# Footer URL — uses --dna-bg (panel color) at opacity .5 to match
     prototype panel color at opacity .5. The pre-fix
     --dna-ink-muted (=ink_secondary) resolved lighter than the prototype's
     panel-color, making the
     URL fade further than intended against cream paper. #}
  .{{ uid }}-foot { font-size: 8px; font-weight: 500; letter-spacing: 0.12em; fill: var(--dna-bg); opacity: 0.5; }
  .{{ uid }}-foot-brand { font-size: 8px; font-weight: 700; letter-spacing: 0.26em; fill: var(--dna-bg); opacity: 0.35; }
  {# Light scholar gridline override: prototype paints gridlines in
     accent_complement (--dna-bg) at opacity .06–.08, much subtler than the
     global .hw-chart-gridline default (0.18). Scoped to the .uid-chart
     wrapper so chrome/cellular keep their global defaults. #}
  .{{ uid }}-chart .hw-chart-gridline { stroke: var(--dna-signal); opacity: 0.09; }
  {# Bright-core highlight opacity 0.8 matches the prototype's accent
     polyline overlay (line 630 of hw-codex-star-charts-light-scholar.html).
     Without this attenuation the seam-color highlight reads as the
     dominant line color over the main polyline, which inverts the
     prototype's polyline-with-thin-highlight intent. #}
  .{{ uid }}-bright-core .hw-chart-line { opacity: 0.8; }
  {# Polyline width overrides — light scholar prototype lines 626-628 use
     4px ghost / 3px main / 1.5px highlight. The bare .hw-chart-line above
     sets 3.5px (a generic default); scope a brutalist-light pair to match
     prototype exactly. #}
  .{{ uid }}-chart .hw-chart-line { stroke-width: 3; }
  .{{ uid }}-ghost-line .hw-chart-line { stroke-width: 4; }
  {# Crosshair marker stroke — prototype uses the bg/panel color for
     the rect outline + cross lines. The shared
     rect.svg.j2 partial emits stroke=var(--dna-signal-dim) which resolves
     to ink_secondary and reads too pale against the panel-colored polyline.
     Override at the chart
     scope so dark variants keep their existing signal-dim resolution. #}
  .{{ uid }}-chart [data-hw-zone="markers"] rect,
  .{{ uid }}-chart [data-hw-zone="markers"] line { stroke: var(--dna-signal); }
{% else %}
  .{{ uid }}-hdr-user { font-size: 12px; font-weight: 800; letter-spacing: 0.20em; fill: var(--dna-brand-text); }
  .{{ uid }}-hdr-meta { font-size: 9px; font-weight: 500; letter-spacing: 0.10em; fill: var(--dna-label-text); opacity: 0.7; }
  .{{ uid }}-title-main { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; font-weight: 900; letter-spacing: 0.05em; fill: var(--dna-brand-text); text-transform: uppercase; }
  .{{ uid }}-title-sub { font-size: 9px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; fill: var(--dna-signal); opacity: 0.8; }
  .{{ uid }}-hero-value { font-family: 'Barlow Condensed', sans-serif; font-size: 48px; font-weight: 900; letter-spacing: -0.02em; fill: var(--dna-brand-text); }
  .{{ uid }}-hero-label { font-size: 9px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; fill: var(--dna-signal); opacity: 0.8; }
  .{{ uid }}-axis-y { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; fill: var(--dna-ink-muted); opacity: 0.85; }
  .{{ uid }}-axis-x { font-size: 9px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; fill: var(--dna-ink-muted); opacity: 0.65; }
  .{{ uid }}-milestone { font-size: 9px; font-weight: 800; letter-spacing: 0.12em; fill: var(--dna-brand-text); }
  .{{ uid }}-grid-coord { font-size: 5px; font-weight: 500; fill: var(--dna-signal); opacity: 0.22; }
  .{{ uid }}-foot { font-size: 8px; font-weight: 500; letter-spacing: 0.12em; fill: var(--dna-label-text); opacity: 0.75; }
  .{{ uid }}-foot-brand { font-size: 8px; font-weight: 700; letter-spacing: 0.26em; fill: var(--dna-signal); opacity: 0.45; }
{% endif %}
  /* Chart engine fragment classes — brutalist aesthetic (match tier2 target).
     v0.3.2 Phase 3: route through --dna-chart-main / --dna-chart-highlight
     so light substrates use panel color for main data + seam color for
     highlight; dark substrates fall through to the existing --dna-signal
     defaults via the fallback chain. */
  .hw-chart-axis { stroke: var(--dna-border, var(--dna-signal)); stroke-width: 2; fill: none; opacity: 0.5; }
  .hw-chart-gridline { stroke: var(--dna-border, var(--dna-signal)); stroke-width: 0.5; opacity: 0.18; fill: none; shape-rendering: crispEdges; }
  .hw-chart-line { stroke: var(--dna-chart-main, var(--dna-signal)); stroke-width: 3.5; stroke-linejoin: miter; stroke-linecap: square; }
  .{{ uid }}-bright-core .hw-chart-line { stroke: var(--dna-chart-highlight, var(--dna-signal-dim, var(--dna-signal))); stroke-width: 1.5; }
  .hw-chart-area { fill: url(#{{ uid }}-area-fade); fill-opacity: 1; }
  .hw-chart-area-smooth { fill: url(#{{ uid }}-area-fade); fill-opacity: 1; }
  [data-hw-zone="markers"] { shape-rendering: crispEdges; }
  .hw-chart-endpoint { animation: {{ uid }}-pulse 2.618s ease-in-out infinite; will-change: opacity; }
  .hw-chart-milestone-line { stroke: var(--dna-border, var(--dna-signal)); stroke-width: 0.5; opacity: 0.22; stroke-dasharray: 4 8; }
  .hw-chart-milestone-label { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 800; letter-spacing: 0.12em; fill: var(--dna-chart-milestone-text, var(--dna-brand-text, var(--dna-ink-bright))); }
  @keyframes {{ uid }}-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
  .{{ uid }}-beacon { animation: {{ uid }}-pulse 2.618s ease-in-out infinite; will-change: opacity; }
  .{{ uid }}-status-dot { animation: {{ uid }}-pulse 2.618s ease-in-out infinite; will-change: opacity; }
  @media (prefers-reduced-motion: reduce) { .{{ uid }}-beacon, .{{ uid }}-status-dot { animation: none !important; opacity: 0.8; } }
</style>
