<Card title="Focus Task" subtitle="Your most urgent priority">
  <div style="margin-bottom: 16px;">
    <h2 style="margin: 0 0 8px 0; font-size: 1.5rem;">Finalize Q4 Budget Proposal</h2>
    <p style="margin: 0; color: var(--color-text-muted); font-size: 0.9rem;">
      <strong>Deadline:</strong> Friday, March 15, 2025 · 5:00 PM
    </p>
  </div>

  <div style="margin-bottom: 16px; padding: 12px; background: var(--color-bg-subtle); border-radius: 8px;">
    <div style="display: flex; align-items: center; gap: 12px;">
      <Badge tone="warning">In Progress</Badge>
      <span style="color: var(--color-text-muted); font-size: 0.85rem;">Started 2 days ago · 3 hours logged</span>
    </div>
  </div>

  <div style="display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--color-border);">
    <div>
      <label style="font-weight: 500; font-size: 0.9rem;">Mark as complete</label>
      <p style="margin: 4px 0 0; color: var(--color-text-muted); font-size: 0.8rem;">Tap when finished</p>
    </div>
    <Switch name="task-complete" label="" value="false" />
  </div>
</Card>

<Callout tone="info" title="Focus mode active">
  Notifications are silenced. Only this task shows until marked done.
</Callout>