Weekly Progress Pill Bar Chart Card

<div class="sm:px-8 sm:py-7 flex flex-col bg-[#d6f14a] rounded-3xl pt-6 pr-6 pb-6 pl-6">
  <div class="flex items-center justify-between mb-4">
    <div class="">
      <h2 class="text-xl sm:text-2xl tracking-tight font-semibold text-slate-900">Your progress</h2>
      <p class="text-xs text-slate-700 mt-1">
        See how your focus changes across the week.
      </p>
    </div>
    <div class="inline-flex items-center gap-1.5 bg-slate-900/10 rounded-full p-1">
      <button class="px-3 py-1.5 rounded-full text-[11px] font-medium bg-slate-900 text-[#d6f14a] shadow-sm">
        Week
      </button>
      <button class="px-3 py-1.5 rounded-full text-[11px] font-medium text-slate-800">
        Month
      </button>
    </div>
  </div>

  <div class="flex-1 flex flex-col mt-4 justify-between">
    <div class="flex sm:gap-4 sm:h-44 h-40 gap-x-3 gap-y-3 items-end justify-between">
      <!-- Column Mon -->
      <div class="flex flex-col gap-2 flex-1 gap-x-2 gap-y-2 items-center">
        <div class="relative w-9 sm:w-10 flex-1 flex items-end">
          <div class="flex flex-col overflow-hidden bg-black/30 w-full h-32 border-slate-900/5 border rounded-full justify-end">
            <!-- base -->
            <div class="bg-lime-300/40 w-full" style="height:40%"></div>
            <!-- mid -->
            <div class="w-full bg-lime-300/60" style="height:30%;"></div>
            <!-- top -->
            <div class="w-full bg-lime-300/80" style="height:20%;"></div>
          </div>
          <div class="absolute -top-6 left-1/2 -translate-x-1/2 text-[11px] font-medium text-slate-900">
            56
          </div>
        </div>
        <span class="text-[11px] text-slate-800 font-medium">Mon</span>
      </div>

      <!-- Dotted divider -->
      <div class="h-32 sm:h-36 flex items-stretch">
        <div class="w-px h-full border-l border-dotted border-slate-900/20 opacity-70"></div>
      </div>

      <!-- Column Tue (fixed short pill) -->
      <div class="flex flex-col items-center gap-2 flex-1">
        <div class="relative w-9 sm:w-10 flex items-end justify-center h-24">
          <div class="flex flex-col overflow-hidden bg-black/30 w-full h-24 border-slate-900/5 border rounded-full justify-end">
            <!-- base -->
            <div class="bg-lime-300/40 w-full" style="height:38%"></div>
            <!-- mid -->
            <div class="bg-lime-300/60 w-full" style="height:24%"></div>
          </div>
        </div>
        <span class="text-[11px] text-slate-800 font-medium">Tue</span>
      </div>

      <!-- Dotted divider -->
      <div class="h-32 sm:h-36 flex items-stretch">
        <div class="w-px h-full border-l border-dotted border-slate-900/20 opacity-70"></div>
      </div>

      <!-- Column Wed (highlight, fixed stages) -->
      <div class="flex flex-col items-center gap-2 flex-1">
        <div class="relative w-9 sm:w-10 flex-1 flex items-end">
          <div class="flex flex-col overflow-hidden bg-black/30 w-full h-32 border-slate-900/10 border rounded-full justify-end">
            <!-- base -->
            <div class="w-full bg-lime-300/40" style="height:28%;"></div>
            <!-- mid -->
            <div class="w-full bg-lime-300/60" style="height:26%;"></div>
            <!-- hatch highlight -->
            <div class="bg-lime-300/70 w-full" style="height:24%"></div>
          </div>
          <div class="absolute -top-7 left-1/2 -translate-x-1/2">
            <div class="rounded-full bg-slate-900 text-[11px] font-medium text-[#d6f14a] px-2 py-0.5 flex items-center gap-1">
              <span>68</span>
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="triangle" class="lucide lucide-triangle w-2.5 h-2.5 text-[#d6f14a]"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" class=""></path></svg>
            </div>
          </div>
        </div>
        <span class="text-[11px] text-slate-900 font-semibold">Wed</span>
      </div>

      <!-- Dotted divider -->
      <div class="h-32 sm:h-36 flex items-stretch">
        <div class="w-px h-full border-l border-dotted border-slate-900/20 opacity-70"></div>
      </div>

      <!-- Column Thu -->
      <div class="flex flex-col items-center gap-2 flex-1">
        <div class="relative w-9 sm:w-10 flex-1 flex items-end">
          <div class="flex flex-col overflow-hidden bg-black/30 w-full h-32 border-slate-900/5 border rounded-full justify-end">
            <!-- base -->
            <div class="w-full bg-lime-300/40" style="height:45%;"></div>
            <!-- top -->
            <div class="bg-lime-300/70 w-full" style="height:20%"></div>
          </div>
          <div class="absolute -top-6 left-1/2 -translate-x-1/2 text-[11px] font-medium text-slate-900">
            44
          </div>
        </div>
        <span class="text-[11px] text-slate-800 font-medium">Thu</span>
      </div>

      <!-- Dotted divider -->
      <div class="h-32 sm:h-36 flex items-stretch">
        <div class="w-px h-full border-l border-dotted border-slate-900/20 opacity-70"></div>
      </div>

      <!-- Column Fri -->
      <div class="flex flex-col items-center gap-2 flex-1">
        <div class="relative w-9 sm:w-10 flex-1 flex items-end">
          <div class="flex flex-col overflow-hidden bg-black/30 w-full h-16 border-slate-900/5 border rounded-full justify-end">
            <!-- base -->
            <div class="bg-lime-300/40 w-full" style="height:38%"></div>
            <!-- mid -->
            <div class="bg-lime-300/60 w-full" style="height:24%"></div>
          </div>
          <div class="absolute -top-6 left-1/2 -translate-x-1/2 text-[11px] font-medium text-slate-900">
            52
          </div>
        </div>
        <span class="text-[11px] text-slate-800 font-medium">Fri</span>
      </div>
    </div>

    <div class="mt-5 flex items-center justify-between text-[11px] text-slate-800">
      <div class="flex items-center gap-2">
        <span class="inline-block w-2.5 h-2.5 rounded-full bg-lime-300/80 border border-slate-900/10"></span>
        <span class="">Minutes of focused study</span>
      </div>
      <p class="font-medium">
        Average per day:
        <span class="font-semibold">48 min</span>
      </p>
    </div>
  </div>
</div>