@layer components {
  /* ——— Pings ———
     One row of faces at the top of the slideover. The dashed circle starts a
     new one; the shu dot is the only unread mark there is. It scrolls: the
     pings are unbounded (recency puts the one you want first) and the tail
     is capped at twelve (User::Pingable), so the row is the board's column
     grammar — a flex row with overflow, items declaring a basis.

     `overflow-x: auto` is a correctness fix, not an affordance: #panel is
     `overflow: auto` on both axes, so without it the panel becomes the
     horizontal scroller and the notification rows slide sideways with the
     faces (measured, docs/planning/pings-chat-unread.md). */
  .pings {
    display: flex;
    align-items: flex-start;
    gap: var(--inline-space);
    overflow-x: auto;
  }

  /* A face and a first name under it. The basis is the width, as
     .board__column's is: without it a flex item's automatic minimum is decided
     per name, and from the seventh face on the row goes ragged.

     The focus ring is drawn just inside the face's own box: a scroll
     container leaves no headroom above or before the first face and an
     outline never contributes to overflow, so no padding recovers it — one
     token retune says it.

     The tail's faces are button_to forms beside link faces, so a face wears
     `unbuttoned` (utilities.css). Not `.btn ping`, whose gap would argue
     with this one by source order alone. */
  .ping {
    --avatar-size: 2.5rem;
    --focus-offset: calc(-1 * var(--focus-ring-size));

    display: flex;
    flex: 0 0 2.75rem;
    flex-direction: column;
    align-items: center;
    gap: var(--block-space-half);
    font-size: var(--text-x-small);
    color: var(--color-ink-subtle);
    text-decoration: none;

    .avatar {
      font-size: var(--text-small);
    }

    .name {
      max-inline-size: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Unread is the only thing allowed to darken a name — the dot already
       said it, the weight just finishes the sentence. */
    &:has(.unread-dot) .name {
      font-weight: 600;
      color: var(--color-ink);
    }

    /* A dashed circle wearing a face's shape: starting a ping is the same
       gesture as opening one, through the picker it pops. */
    &.ping--new .avatar {
      color: var(--color-ink-faint);
      background-color: transparent;
      border: 1.5px dashed var(--color-line);
    }
  }
}