Drawer Slide Over Detail

<!-- Static preview — shows detail slide-over panel inline -->
<div class="ws-drawer mx-auto max-w-md">
  <div class="flex flex-col overflow-hidden rounded-xl border border-[var(--ws-color-border)] bg-[var(--ws-color-surface)] shadow-xl">
    <!-- Header -->
    <div class="border-b border-[var(--ws-color-border)] px-6 py-5">
      <div class="flex items-start justify-between gap-4">
        <div>
          <p class="text-sm font-medium text-[var(--ws-color-text-soft)]">Customer detail</p>
          <h2 class="mt-1 text-xl font-semibold text-[var(--ws-color-text)]">Northstar Labs</h2>
        </div>
        <button type="button" class="rounded-lg p-1 text-[var(--ws-color-text-muted)] transition hover:bg-[var(--ws-color-surface-alt)]" aria-label="Close detail">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
        </button>
      </div>
    </div>
    <!-- Content -->
    <div class="space-y-6 px-6 py-6">
      <div class="rounded-2xl border border-[var(--ws-color-border)] p-4">
        <p class="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ws-color-text-muted)]">Account owner</p>
        <p class="mt-2 text-sm font-medium text-[var(--ws-color-text)]">Maya Chen</p>
        <p class="mt-1 text-sm text-[var(--ws-color-text-soft)]">maya@northstar.io</p>
      </div>
      <dl class="grid gap-4 sm:grid-cols-2">
        <div class="rounded-2xl bg-[var(--ws-color-surface-alt)] p-4">
          <dt class="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ws-color-text-muted)]">Plan</dt>
          <dd class="mt-2 text-sm font-medium text-[var(--ws-color-text)]">Enterprise</dd>
        </div>
        <div class="rounded-2xl bg-[var(--ws-color-surface-alt)] p-4">
          <dt class="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ws-color-text-muted)]">Renewal</dt>
          <dd class="mt-2 text-sm font-medium text-[var(--ws-color-text)]">April 21</dd>
        </div>
        <div class="rounded-2xl bg-[var(--ws-color-surface-alt)] p-4">
          <dt class="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ws-color-text-muted)]">Open issues</dt>
          <dd class="mt-2 text-sm font-medium text-[var(--ws-color-text)]">3 active</dd>
        </div>
        <div class="rounded-2xl bg-[var(--ws-color-surface-alt)] p-4">
          <dt class="text-xs font-semibold uppercase tracking-[0.16em] text-[var(--ws-color-text-muted)]">MRR</dt>
          <dd class="mt-2 text-sm font-medium text-[var(--ws-color-text)]">$4,200</dd>
        </div>
      </dl>
      <div>
        <p class="text-sm font-semibold text-[var(--ws-color-text)]">Recent notes</p>
        <ul class="mt-3 space-y-3 text-sm text-[var(--ws-color-text-soft)]">
          <li class="rounded-xl border border-[var(--ws-color-border)] px-4 py-3">Requested custom SSO onboarding documentation.</li>
          <li class="rounded-xl border border-[var(--ws-color-border)] px-4 py-3">Finance asked for annual billing split by department.</li>
        </ul>
      </div>
    </div>
    <!-- Footer -->
    <div class="flex justify-end gap-3 border-t border-[var(--ws-color-border)] px-6 py-4">
      <button type="button" class="rounded-lg border border-[var(--ws-color-border)] px-4 py-2 text-sm font-medium text-[var(--ws-color-text-soft)] transition hover:bg-[var(--ws-color-surface-alt)]">View account</button>
      <button type="button" class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-indigo-700">Contact owner</button>
    </div>
  </div>
</div>