Triage with drawer

<div class="sidebar-layout" style="--sidebar-width: 22rem">
  <div class="stack" data-gap="sm" aria-label="Triage queue">
    <div class="cluster" data-justify="between">
      <h1 style="margin:0;font-size:var(--text-lg)">Triage</h1>
      <span class="badge" data-tone="accent">12 open</span>
    </div>
    <div class="queue-row " data-queue-row>
      <div class="queue-row-main">
        <div class="queue-row-headline"><span class="queue-row-title">INV-441 · Acme overdue</span></div>
        <span class="queue-row-date">due today</span>
      </div>
      <button type="button" class="button" data-variant="outline" data-size="sm" data-dialog-open="triage-drawer">Open</button>
    </div>
    <div class="queue-row attn-both attn-tone-warning" data-queue-row data-attn="warning">
      <div class="queue-row-main">
        <div class="queue-row-headline"><span class="queue-row-title">INV-390 · Globex dispute</span></div>
        <p class="queue-row-attn">Customer waiting 3 days.</p>
      </div>
      <button type="button" class="button" data-variant="outline" data-size="sm" data-dialog-open="triage-drawer">Open</button>
    </div>
    <div class="queue-row " data-queue-row>
      <div class="queue-row-main">
        <div class="queue-row-headline"><span class="queue-row-title">INV-512 · Initech credit</span></div>
        <span class="queue-row-date">due Fri</span>
      </div>
      <button type="button" class="button" data-variant="outline" data-size="sm" data-dialog-open="triage-drawer">Open</button>
    </div>
  </div>
  <main class="stack" data-gap="md">
    <h2 style="margin:0">Reading pane</h2>
    <p class="hm-demo-muted" style="margin:0">On wide screens the queue docks; on a phone it stacks. The drawer is the hypermedia peek — same fragment contract as the record page, different chrome.</p>
    <div class="card card-body">
      <div class="card-label">Hint</div>
      <div>Open a row to load the triage drawer. Prefer peek for decide-now; navigate to the full record for history and edit.</div>
    </div>
  </main>
</div>
<dialog class="dialog" id="triage-drawer" aria-labelledby="triage-drawer-title" closedby="any">
  <form method="dialog">
    <div class="dialog__header">
      <h2 class="dialog__title" id="triage-drawer-title">INV-441 · Acme</h2>
      <button type="submit" class="dialog__close" aria-label="Close dialog"><svg class="icon" aria-hidden="true"><use href="#i-x"/></svg></button>
    </div>
    <div class="dialog__body">
      <div class="stack" data-gap="md">
        <div class="cluster" data-gap="sm"><span class="badge" data-tone="warning">overdue</span><span class="badge" data-tone="neutral">Net 30</span></div>
        <p>£1,250.00 · last contact 2 days ago. Approve write-off or send reminder without losing the queue context.</p>
        <div class="alert" data-tone="accent" role="status">
          <span class="alert__icon"><svg class="icon" aria-hidden="true"><use href="#i-info"/></svg></span>
          <div class="alert__body">
            <div class="alert__title">Peek, not full page</div>
            <div class="alert__description">Esc / backdrop close; full record is a real link below.</div>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog__footer"><a class="button" data-variant="outline" href="../blueprints/record-page">Open full page</a><button type="submit" class="button" data-variant="primary" value="remind">Send reminder</button></div>
  </form>
</dialog>