@if (points.length === 0) {
  <div class="empty">No evaluation data yet.</div>
} @else {
  <div class="timeline-wrap" role="img" aria-label="Evaluation timeline">
    <svg
      class="timeline-svg"
      [attr.viewBox]="'0 0 ' + svgWidth + ' ' + svgHeight"
      preserveAspectRatio="none"
    >
      <!-- Midline (balanced) -->
      <line
        x1="0"
        [attr.y1]="svgHeight / 2"
        [attr.x2]="svgWidth"
        [attr.y2]="svgHeight / 2"
        class="midline"
      />

      <!-- White-advantage fill (clip above midline) -->
      <defs>
        <clipPath id="clip-white">
          <rect x="0" y="0" [attr.width]="svgWidth" [attr.height]="svgHeight / 2" />
        </clipPath>
        <clipPath id="clip-black">
          <rect
            x="0"
            [attr.y]="svgHeight / 2"
            [attr.width]="svgWidth"
            [attr.height]="svgHeight / 2"
          />
        </clipPath>
      </defs>

      <polygon [attr.points]="polylineWhite" class="area-white" clip-path="url(#clip-white)" />

      <polygon [attr.points]="polylineBlack" class="area-black" clip-path="url(#clip-black)" />

      <!-- Eval line -->
      <polyline [attr.points]="evalPolyline" class="eval-line" />

      <!-- Active ply marker -->
      @if (activeX() !== null) {
        <line
          [attr.x1]="activeX()"
          y1="0"
          [attr.x2]="activeX()"
          [attr.y2]="svgHeight"
          class="active-marker"
        />
      }
    </svg>
  </div>
}