<Card title="Focus Mode" subtitle="Your most urgent task">
  <div style="margin-bottom: 16px;">
    <h2 style="margin: 0 0 8px 0; font-size: 1.5rem;">Prepare Q3 board deck</h2>
    <p style="margin: 0; color: var(--muted); font-size: 0.95rem;">
      <span style="display: inline-flex; align-items: center; gap: 6px;">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
        Due: Tomorrow, 5:00 PM
      </span>
    </p>
  </div>

  <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;">
    <Badge tone="warning">In progress</Badge>
    <Progress value="65" max="100" label="65% complete" tone="info" />
  </div>

  <div style="display: flex; gap: 12px; flex-wrap: wrap;">
    <Button variant="primary" icon="check" label="Mark done">Mark done</Button>
    <Button variant="secondary" icon="clock" label="Snooze 1 hour">Snooze 1 hour</Button>
  </div>
</Card>

<Card title="Quick notes" subtitle="Context for this session">
  <TextArea 
    name="focus-notes" 
    placeholder="Add context, blockers, or next steps…" 
    rows="4" 
    hint="These notes stay with this task"
  />
</Card>