Notification List Panel

<!--
  The panel is the notification system's memory: everything the toasts already
  showed and threw away. That difference drives the markup.

  - No live region. Nothing here is breaking news; the user opened this panel
    deliberately. Announcing a list they asked to read would be noise.
  - <ul>, not a stack of divs. Now a screen reader says "list, 3 items" and
    arrow keys work.
  - Unread is marked with a dot AND the word "Unread" in a visually hidden
    span. The dot alone is colour-only signalling.
-->
<section class="panel" aria-labelledby="panel-heading">
  <header class="panel__head">
    <h2 class="panel__title" id="panel-heading">Notifications</h2>
    <button class="panel__mark" type="button">Mark all read</button>
  </header>

  <ul class="panel__list">
    <li class="panel__item panel__item--unread">
      <span class="panel__dot" aria-hidden="true"></span>
      <a class="panel__link" href="/deploys/9f2">
        <span class="panel__sr">Unread. </span>
        <span class="panel__text">Deploy #914 finished in 42s</span>
        <span class="panel__time">2m ago</span>
      </a>
    </li>
    <li class="panel__item">
      <span class="panel__dot" aria-hidden="true"></span>
      <a class="panel__link" href="/invites/7c1">
        <span class="panel__text">Dana accepted your invite</span>
        <span class="panel__time">1h ago</span>
      </a>
    </li>
  </ul>
</section>