/* Notification rows in the end panel. */
@layer components {
  /* ——— Notifications ———
     Rows in the end panel, separated by hairlines and nothing else. */
  .notification {
    display: flex;
    align-items: start;
    gap: var(--inline-space);
    padding-block: var(--block-space-half);

    & + .notification {
      border-block-start: var(--border);
    }
  }

  .notification-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    color: var(--color-ink);
    text-decoration: none;
  }

  /* The caught-up note shows only while nothing is unread — the read list below
     is history and does not count as something waiting for you.
     :has(), not :empty — Turbo removals leave whitespace text nodes behind.
     .empty-note is this hook and nothing else; its voice is the view's
     utilities, so no stylesheet owns a rule for it. */
  #notifications_unread:has(.notification) + .empty-note {
    display: none;
  }

  /* And history stays out of the way until there is some. */
  #notifications_seen:not(:has(.notification)) {
    display: none;
  }
}