{# Chrome chart defs: envelope + well + text gradients + rim + filters + CSS.
   Ported from tier2/genomes/chrome/horizon/github-star-history-card-v6.svg,
   then refactored (v0.2.6 Bug D' fix) so every color comes from the genome
   via the shared _profile_visual_context. chrome's 11-stop envelope
   is preserved as the fallback when a genome doesn't declare envelope_stops
   — so the specimen still renders identically. #}

{# Envelope — genome-declared (required for chrome paradigm). #}
<linearGradient id="{{ uid }}-env" x1="0" x2="0" y1="{{ gradient_y_neg_010 }}" y2="{{ gradient_y_090 }}">
{% for stop in envelope_stops %}
  <stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}"/>
{% endfor %}
  <animateTransform attributeName="gradientTransform" type="translate"
    values="0 -0.2; 0 0.2; 0 -0.2" dur="{{ chrome_rhythm | default('6s') }}"
    repeatCount="indefinite" calcMode="spline"
    keySplines="0.4 0 0.2 1;0.4 0 0.2 1"/>
</linearGradient>

{# Well — genome-declared. #}
<linearGradient id="{{ uid }}-well" x1="0" x2="0" y1="0" y2="1">
  <stop offset="0%"   stop-color="{{ well_top }}"/>
  <stop offset="100%" stop-color="{{ well_bottom }}"/>
</linearGradient>

{# Title gradient — genome chrome_text_gradient (required for chrome). #}
<linearGradient id="{{ uid }}-ct-title" x1="0" y1="0" x2="1" y2="0">
{% for stop in chrome_text_gradient %}
  <stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}"/>
{% endfor %}
</linearGradient>

{# Hero value gradient — genome hero_text_gradient (required), with
   optional cascade to chrome_text_gradient for genomes that reuse
   the title gradient at the hero zone. #}
<linearGradient id="{{ uid }}-ct-hero" x1="0" y1="0" x2="1" y2="0">
{% for stop in (hero_text_gradient if hero_text_gradient else chrome_text_gradient) %}
  <stop offset="{{ stop.offset }}" stop-color="{{ stop.color }}"/>
{% endfor %}
</linearGradient>

{# Separator — genome highlight_color drives the center stop. #}
<linearGradient id="{{ uid }}-sep" x1="0" y1="0" x2="1" y2="0">
  <stop offset="0%"   stop-color="var(--dna-signal)" stop-opacity="0"/>
  <stop offset="30%"  stop-color="var(--dna-signal)" stop-opacity="0.35"/>
  <stop offset="50%"  stop-color="{{ specular_light }}" stop-opacity="0.5"/>
  <stop offset="70%"  stop-color="var(--dna-signal)" stop-opacity="0.35"/>
  <stop offset="100%" stop-color="var(--dna-signal)" stop-opacity="0"/>
</linearGradient>

{# Rim sweep — genome highlight_color drives the shimmer band. #}
<linearGradient id="{{ uid }}-rim" x1="0" y1="0" x2="1" y2="0">
  <stop offset="0%"   stop-color="{{ specular_light }}" stop-opacity="0"/>
  <stop offset="35%"  stop-color="{{ specular_light }}" stop-opacity="0"/>
  <stop offset="46%"  stop-color="{{ specular_light }}" stop-opacity="0.3"/>
  <stop offset="50%"  stop-color="var(--dna-specular-core, var(--dna-ink-primary))" stop-opacity="0.6"/>
  <stop offset="54%"  stop-color="{{ specular_light }}" stop-opacity="0.3"/>
  <stop offset="65%"  stop-color="{{ specular_light }}" stop-opacity="0"/>
  <stop offset="100%" stop-color="{{ specular_light }}" stop-opacity="0"/>
  <animate attributeName="x1" values="-0.4;1.0;-0.4" dur="18s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
  <animate attributeName="x2" values="0.4;1.8;0.4"  dur="18s" repeatCount="indefinite" calcMode="spline" keySplines="0.4 0 0.6 1;0.4 0 0.6 1"/>
</linearGradient>

{# v0.3.9 Bug H: bevel filter restores the specular-lighting composite when
   the genome declares ``material.filter_chain: "specular-bevel"`` (chrome).
   Reference implementation: templates/frames/icon/chrome-defs.j2 — same
   chain (feDropShadow + feSpecularLighting + feComposite arithmetic) so
   chart bevels match the icon's material discipline. Genomes that
   declare "none" (brutalist, automata) get the plain drop-shadow path. #}
<filter id="{{ uid }}-bevel" x="-2%" y="-3%" width="104%" height="108%">
  <feDropShadow dx="0" dy="3" stdDeviation="5" flood-color="var(--dna-shadow-color, black)" flood-opacity="{{ bevel_shadow_opacity | default('0.5') }}"/>
  {% if material_filter_chain == "specular-bevel" %}
  <feSpecularLighting in="SourceAlpha" surfaceScale="1.6" specularConstant="0.55"
    specularExponent="16" lighting-color="{{ specular_light }}" result="spec">
    <feDistantLight azimuth="225" elevation="45"/>
  </feSpecularLighting>
  <feComposite in="spec" in2="SourceAlpha" operator="in" result="specIn"/>
  <feComposite in="SourceGraphic" in2="specIn" operator="arithmetic"
    k1="0" k2="1" k3="0.2" k4="0"/>
  {% endif %}
</filter>

{# v0.3.9 Bug H: lineglow opacity hierarchy inverted so the line stroke
   reads as the BRIGHTEST element (was: specular halo at 0.95 outshone the
   line at full-opacity; user reported "line should be brighter than the
   glow bloom around it"). Outer white at 0.35, inner specular at 0.55 —
   line renders on top via SourceGraphic merge and dominates visually.
   feFlood flood-color accepts hex only (not var()), so we substitute the
   genome's specular_light if provided and fall back to chrome cyan. #}
<filter id="{{ uid }}-lineglow" x="-15%" y="-50%" width="130%" height="200%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="9" result="blur1"/>
  <feFlood flood-color="var(--dna-specular-core, {{ specular_light }})" flood-opacity="0.35"/>
  <feComposite in2="blur1" operator="in" result="glow1"/>
  <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur2"/>
  <feFlood flood-color="{{ specular_light }}" flood-opacity="0.55"/>
  <feComposite in2="blur2" operator="in" result="glow2"/>
  <feMerge>
    <feMergeNode in="glow1"/>
    <feMergeNode in="glow2"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

<filter id="{{ uid }}-horizon-glow" x="-5%" y="-400%" width="110%" height="900%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="3.5" result="blur"/>
  <feMerge>
    <feMergeNode in="blur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

<filter id="{{ uid }}-endglow" x="-80%" y="-80%" width="260%" height="260%">
  <feGaussianBlur stdDeviation="5" result="b"/>
  <feFlood flood-color="var(--dna-specular-core, {{ specular_light }})" flood-opacity="0.75"/>
  <feComposite in2="b" operator="in" result="g"/>
  <feMerge>
    <feMergeNode in="g"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>

<clipPath id="{{ uid }}-clip">
  <rect width="{{ chart_layout.rects.chrome_clip.w }}" height="{{ chart_layout.rects.chrome_clip.h }}"
        rx="{{ chart_layout.rects.chrome_clip.rx }}"/>
</clipPath>
{{ chart_defs | default("") | safe }}

<style>
  {{ font_faces | safe }}
  text { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); shape-rendering: geometricPrecision; }
  .{{ uid }}-label       { font-family: var(--dna-font-display, 'Orbitron', sans-serif); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--dna-signal); }
  .{{ uid }}-identity    { font-family: '{{ identity_font_family | default("Orbitron") }}', sans-serif; font-size: {{ identity_font_size | default(11) }}px; font-weight: {{ identity_font_weight | default(700) }}; letter-spacing: {{ identity_letter_spacing_em | default(0.1) }}em; fill: var(--dna-signal); }
  .{{ uid }}-title       { font-family: var(--dna-font-display, 'Orbitron', sans-serif); font-size: 44px; font-weight: 900; letter-spacing: 0.04em; fill: url(#{{ uid }}-ct-title); }
  .{{ uid }}-hero        { font-family: var(--dna-font-display, 'Orbitron', sans-serif); font-size: 48px; font-weight: 900; letter-spacing: -0.01em; fill: url(#{{ uid }}-ct-hero); }
  .{{ uid }}-subtitle    { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; fill: var(--dna-ink-muted); opacity: 0.9; }
  .{{ uid }}-hero-label  { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.20em; text-transform: uppercase; fill: var(--dna-signal); }
  .{{ uid }}-axis-y      { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.08em; fill: var(--dna-ink-muted); opacity: 0.95; }
  .{{ uid }}-axis-x      { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--dna-ink-muted); opacity: 0.9; }
  .{{ uid }}-milestone   { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; fill: var(--dna-ink-primary); }
  .{{ uid }}-foot        { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); font-size: 7.5px; font-weight: 600; letter-spacing: 0.14em; fill: var(--dna-ink-muted); opacity: 0.8; }
  .{{ uid }}-brand       { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); font-size: 7.5px; font-weight: 700; letter-spacing: 0.28em; fill: var(--dna-ink-muted); opacity: 0.65; }
  /* Chart engine fragment classes — now genome-driven so custom chrome genomes
     (liquid-mercury, rose-titanium, obsidian-prism) actually skin through. */
  .hw-chart-axis         { stroke: var(--dna-signal); stroke-width: 0.8; fill: none; opacity: 0.55; }
  .hw-chart-gridline     { stroke: var(--dna-ink-muted); stroke-width: 0.4; opacity: 0.22; fill: none; }
  .hw-chart-line         { stroke: var(--dna-signal); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: url(#{{ uid }}-lineglow); }
  .hw-chart-area         { fill: none; }
  .hw-chart-area-smooth  { fill: none; }
  [data-hw-zone="markers"] > rect { fill: var(--hw-core, var(--dna-signal)); stroke: var(--dna-surface-deep); stroke-width: 0.7; }
  .hw-chart-endpoint     { animation: {{ uid }}-breathe 2.618s ease-in-out infinite; will-change: opacity; }
  .hw-chart-milestone-line  { stroke: var(--dna-signal); stroke-width: 0.5; opacity: 0.35; }
  .hw-chart-milestone-label { font-family: var(--dna-font-mono, 'JetBrains Mono', monospace); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; fill: var(--dna-ink-primary); }
  [data-hw-status="active"], [data-hw-status="passing"] { --hw-core: var(--dna-signal); }
  [data-hw-status="warning"] { --hw-core: var(--dna-status-warning-core, var(--dna-signal)); }
  [data-hw-status="critical"], [data-hw-status="failing"] { --hw-core: var(--dna-status-failing-core, var(--dna-signal)); }
  @keyframes {{ uid }}-breathe       { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
  @keyframes {{ uid }}-horizon-pulse { 0%,100% { opacity: 0.8;  } 50% { opacity: 1; } }
  .{{ uid }}-dia, .{{ uid }}-end, .{{ uid }}-mile { animation: {{ uid }}-breathe 2.618s ease-in-out infinite; will-change: opacity; }
  .{{ uid }}-horizon     { animation: {{ uid }}-horizon-pulse 4.236s ease-in-out infinite; will-change: opacity; }
  @media (prefers-reduced-motion: reduce) {
    .{{ uid }}-dia, .{{ uid }}-end, .{{ uid }}-mile, .{{ uid }}-horizon { animation: none !important; opacity: 0.9; }
    animate, animateTransform { display: none !important; }
  }
</style>
