Stock Widget

<section
  class="ws-stock-widget max-w-sm rounded-2xl border p-6"
  style="
    --ws-stock-widget-bg: oklch(0.98 0.005 75);
    --ws-stock-widget-text: oklch(0.25 0.02 75);
    --ws-stock-widget-text-soft: oklch(0.45 0.015 75);
    --ws-stock-widget-text-muted: oklch(0.6 0.01 75);
    --ws-stock-widget-border: oklch(0.9 0.01 75);
    --ws-stock-widget-positive: oklch(0.55 0.15 155);
    --ws-stock-widget-negative: oklch(0.55 0.15 25);
    background: var(--ws-stock-widget-bg);
    color: var(--ws-stock-widget-text);
    border-color: var(--ws-stock-widget-border);
  "
>
  <!-- Header: Company + Symbol -->
  <div class="flex items-start justify-between">
    <div>
      <h3 class="text-lg font-semibold" style="color: var(--ws-stock-widget-text)">Apple Inc.</h3>
      <p class="text-sm font-medium" style="color: var(--ws-stock-widget-text-muted)">AAPL · NASDAQ</p>
    </div>
    <span
      class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold text-white"
      style="background: var(--ws-stock-widget-positive)"
    >Open</span>
  </div>

  <!-- Price -->
  <div class="mt-4">
    <span class="text-4xl font-light tracking-tight" style="color: var(--ws-stock-widget-text)">$178.72</span>
    <div class="mt-1 flex items-center gap-2">
      <span class="text-sm font-semibold" style="color: var(--ws-stock-widget-positive)">+2.34</span>
      <span
        class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-semibold"
        style="background: oklch(0.92 0.05 155); color: var(--ws-stock-widget-positive)"
      >+1.33%</span>
    </div>
  </div>

  <!-- Mini Sparkline (CSS-only) -->
  <div class="mt-5 flex items-end gap-1" style="height: 48px" role="img" aria-label="Price trend over recent sessions">
    <div class="flex-1 rounded-sm" style="height: 55%; background: var(--ws-stock-widget-positive); opacity: 0.5"></div>
    <div class="flex-1 rounded-sm" style="height: 40%; background: var(--ws-stock-widget-positive); opacity: 0.5"></div>
    <div class="flex-1 rounded-sm" style="height: 60%; background: var(--ws-stock-widget-positive); opacity: 0.5"></div>
    <div class="flex-1 rounded-sm" style="height: 35%; background: var(--ws-stock-widget-negative); opacity: 0.5"></div>
    <div class="flex-1 rounded-sm" style="height: 50%; background: var(--ws-stock-widget-positive); opacity: 0.5"></div>
    <div class="flex-1 rounded-sm" style="height: 45%; background: var(--ws-stock-widget-negative); opacity: 0.5"></div>
    <div class="flex-1 rounded-sm" style="height: 70%; background: var(--ws-stock-widget-positive); opacity: 0.6"></div>
    <div class="flex-1 rounded-sm" style="height: 65%; background: var(--ws-stock-widget-positive); opacity: 0.6"></div>
    <div class="flex-1 rounded-sm" style="height: 50%; background: var(--ws-stock-widget-negative); opacity: 0.5"></div>
    <div class="flex-1 rounded-sm" style="height: 75%; background: var(--ws-stock-widget-positive); opacity: 0.6"></div>
    <div class="flex-1 rounded-sm" style="height: 60%; background: var(--ws-stock-widget-positive); opacity: 0.5"></div>
    <div class="flex-1 rounded-sm" style="height: 80%; background: var(--ws-stock-widget-positive); opacity: 0.7"></div>
    <div class="flex-1 rounded-sm" style="height: 72%; background: var(--ws-stock-widget-positive); opacity: 0.6"></div>
    <div class="flex-1 rounded-sm" style="height: 85%; background: var(--ws-stock-widget-positive); opacity: 0.8"></div>
    <div class="flex-1 rounded-sm" style="height: 90%; background: var(--ws-stock-widget-positive); opacity: 0.9"></div>
    <div class="flex-1 rounded-sm" style="height: 100%; background: var(--ws-stock-widget-positive)"></div>
  </div>

  <!-- Stats -->
  <div
    class="mt-5 grid grid-cols-2 gap-4 border-t pt-4"
    style="border-color: var(--ws-stock-widget-border)"
  >
    <div>
      <p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-stock-widget-text-muted)">Market Cap</p>
      <p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$2.78T</p>
    </div>
    <div>
      <p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-stock-widget-text-muted)">Volume</p>
      <p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-stock-widget-text)">54.2M</p>
    </div>
    <div>
      <p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-stock-widget-text-muted)">P/E Ratio</p>
      <p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-stock-widget-text)">29.4</p>
    </div>
    <div>
      <p class="text-xs font-medium uppercase tracking-wide" style="color: var(--ws-stock-widget-text-muted)">52W Range</p>
      <p class="mt-0.5 text-sm font-semibold" style="color: var(--ws-stock-widget-text)">$124 – $182</p>
    </div>
  </div>
</section>