Mixed Bar + Line Chart

<section class="ws-chart bg-[var(--ws-chart-card-bg)] py-10">
  <div class="mx-auto max-w-2xl px-6">
    <div class="overflow-hidden rounded-2xl border border-[var(--ws-chart-card-border)] bg-[var(--ws-chart-card-bg)] p-6 shadow-sm">
      <div class="mb-5 flex items-start justify-between">
        <div>
          <p class="text-xs font-semibold uppercase tracking-widest text-[var(--ws-chart-card-text-soft)]">Weekly Overview</p>
          <h2 class="text-lg font-bold text-[var(--ws-chart-card-text)]">Impressions & Top Rate</h2>
        </div>
        <div class="flex items-center gap-4 text-xs text-[var(--ws-chart-card-text-soft)]">
          <span class="flex items-center gap-1.5"><span class="inline-block h-2.5 w-2.5 rounded-sm bg-indigo-300"></span>Impressions</span>
          <span class="flex items-center gap-1.5"><span class="inline-block h-0.5 w-4 bg-teal-400"></span>Top %</span>
        </div>
      </div>
      <!-- Chart area: bars + SVG line overlay -->
      <div class="relative" role="img" aria-label="Mixed bar and line chart for impressions and top rate Mon–Sun">
        <div class="flex h-44 items-end gap-2">
          <div class="flex flex-1 flex-col items-center gap-1.5">
            <div class="w-full rounded-t-md bg-indigo-200" style="height:62%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Mon</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1.5">
            <div class="w-full rounded-t-md bg-indigo-200" style="height:68%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Tue</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1.5">
            <div class="w-full rounded-t-md bg-indigo-200" style="height:74%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Wed</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1.5">
            <div class="w-full rounded-t-md bg-indigo-200" style="height:100%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Thu</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1.5">
            <div class="w-full rounded-t-md bg-indigo-200" style="height:69%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Fri</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1.5">
            <div class="w-full rounded-t-md bg-indigo-200" style="height:58%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Sat</span>
          </div>
          <div class="flex flex-1 flex-col items-center gap-1.5">
            <div class="w-full rounded-t-md bg-indigo-200" style="height:29%"></div>
            <span class="text-xs text-[var(--ws-chart-card-text-soft)]">Sun</span>
          </div>
        </div>
        <!-- SVG line overlay (teal line = "absolute top" data, same scale) -->
        <!-- line data normalised to max 3423: 211→6%, 2543→74%, 2745→80%, 3123→91%, 2765→81%, 1485→43%, 587→17% -->
        <svg class="pointer-events-none absolute inset-x-0 top-0" style="height:calc(100% - 1.375rem)" viewBox="0 0 700 176" preserveAspectRatio="none" aria-hidden="true">
          <polyline
            points="50,165 150,46 250,35 350,16 450,33 550,100 650,146"
            fill="none"
            stroke="#14b8a6"
            stroke-width="2.5"
            stroke-linecap="round"
            stroke-linejoin="round"
            vector-effect="non-scaling-stroke"
          />
          <circle cx="50"  cy="165" r="3.5" fill="#14b8a6" vector-effect="non-scaling-stroke"/>
          <circle cx="150" cy="46"  r="3.5" fill="#14b8a6" vector-effect="non-scaling-stroke"/>
          <circle cx="250" cy="35"  r="3.5" fill="#14b8a6" vector-effect="non-scaling-stroke"/>
          <circle cx="350" cy="16"  r="3.5" fill="#14b8a6" vector-effect="non-scaling-stroke"/>
          <circle cx="450" cy="33"  r="3.5" fill="#14b8a6" vector-effect="non-scaling-stroke"/>
          <circle cx="550" cy="100" r="3.5" fill="#14b8a6" vector-effect="non-scaling-stroke"/>
          <circle cx="650" cy="146" r="3.5" fill="#14b8a6" vector-effect="non-scaling-stroke"/>
        </svg>
      </div>
    </div>
  </div>
</section>