Manager SLA strip

<main class="stack" data-gap="lg">
  <div class="cluster" data-justify="between">
    <div>
      <div class="card-label">Manager</div>
      <h1 style="margin:0.25rem 0 0;letter-spacing:-0.02em">Team ops</h1>
    </div>
    <span class="badge" data-tone="success"><span class="badge-icon"><svg class="icon" aria-hidden="true"><use href="#i-circle-check"/></svg></span>Within SLA band</span>
  </div>
  <div class="metrics-grid" data-tile-count="4">
    <div class="metric-tile" data-metric-key="open">
      <div class="metric-label">Open</div>
      <div class="metric-value">24</div>
    </div>
    <div class="metric-tile" data-metric-key="wip" data-tone="accent">
      <div class="metric-label">In progress</div>
      <div class="metric-value">11</div>
    </div>
    <div class="metric-tile" data-metric-key="critical" data-tone="destructive">
      <div class="metric-label">Critical</div>
      <div class="metric-value">2</div>
    </div>
    <div class="metric-tile" data-metric-key="resolved" data-tone="positive">
      <div class="metric-label">Resolved</div>
      <div class="metric-value">9</div>
    </div>
  </div>
  <div class="stack" data-gap="sm">
    <h2 style="margin:0;font-size:var(--text-base)">SLA readiness</h2>
    <ul class="status-list">
      <li class="status-list-entry" data-status-entry data-state="accent">
        <span class="status-list-icon" aria-hidden="true"><svg class="icon" aria-hidden="true"><use href="#i-clock"/></svg></span>
        <div class="status-list-text">
          <div class="status-list-title">Ticket response SLA</div>
          <div class="status-list-caption">Warning 2h · breach 4h · critical 8h (business hours)</div>
        </div>
        <span class="status-list-pill">accent</span>
      </li>
      <li class="status-list-entry" data-status-entry data-state="warning">
        <span class="status-list-icon" aria-hidden="true"><svg class="icon" aria-hidden="true"><use href="#i-triangle-alert"/></svg></span>
        <div class="status-list-text">
          <div class="status-list-title">Critical open</div>
          <div class="status-list-caption">Priority critical tickets must stay assigned</div>
        </div>
        <span class="status-list-pill">warning</span>
      </li>
      <li class="status-list-entry" data-status-entry data-state="warning">
        <span class="status-list-icon" aria-hidden="true"><svg class="icon" aria-hidden="true"><use href="#i-user"/></svg></span>
        <div class="status-list-text">
          <div class="status-list-title">Unassigned open</div>
          <div class="status-list-caption">Open tickets with no assignee block first response</div>
        </div>
        <span class="status-list-pill">warning</span>
      </li>
      <li class="status-list-entry" data-status-entry data-state="positive">
        <span class="status-list-icon" aria-hidden="true"><svg class="icon" aria-hidden="true"><use href="#i-circle-check"/></svg></span>
        <div class="status-list-text">
          <div class="status-list-title">Resolved pending close</div>
          <div class="status-list-caption">Awaiting customer confirmation or agent close</div>
        </div>
        <span class="status-list-pill">positive</span>
      </li>
    </ul>
  </div>
  <div class="stack" data-gap="sm">
    <h2 style="margin:0;font-size:var(--text-base)">Critical queue</h2>
    <div class="queue-row attn-both attn-tone-critical" data-queue-row data-attn="critical">
      <div class="queue-row-main">
        <div class="queue-row-headline"><span class="queue-row-title">Production outage — North region</span></div>
        <p class="queue-row-attn">Unassigned · breach in 40m</p>
      </div>
      <button type="button" class="button" data-variant="primary" data-size="sm">Reassign</button>
    </div>
    <div class="queue-row " data-queue-row>
      <div class="queue-row-main">
        <div class="queue-row-headline"><span class="queue-row-title">Payment webhook storm</span></div>
        <span class="queue-row-date">assigned · Ada</span>
      </div>
      <button type="button" class="button" data-variant="outline" data-size="sm">Escalate</button>
    </div>
  </div>
</main>