/* Notifications: one row each, the edge in the colour of its kind, an unread one tinted with a dot in front. */
.nt-list { --rl-cols: minmax(0, 1fr) 170px 150px; --rl-cols-md: minmax(0, 1fr) 150px; }
.nt-row { align-items: start; }
.nt-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tone); }
.nt-row.unread { background: color-mix(in srgb, var(--brand-text) 6%, var(--panel)); }
.nt-row.unread:hover { background: color-mix(in srgb, var(--brand-text) 10%, var(--panel)); }
.nt-row .rl-type { align-items: flex-start; }
.nt-row .nico { margin-top: 1px; }
.nt-row .rl-name b { white-space: normal; }
.nt-row.unread .rl-name b::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  background: var(--brand-text); vertical-align: 2px;
}
.nt-body { font-size: var(--fs-s); line-height: 1.5; color: var(--ink-3); white-space: pre-line; }
.nt-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-top: 2px; font-size: var(--fs-2xs); color: var(--ink-4); white-space: nowrap; font-variant-numeric: tabular-nums; }
.nt-row .rl-do { padding-top: 2px; }

/* The kind of a notification as a chip in its colour, here and in the bell menu. */
.ncat {
  display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 12%, var(--tone-base, transparent)); color: var(--tone);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, var(--tone-base, transparent));
  font-size: var(--fs-2xs); font-weight: 600;
}
.ncat svg { width: 12px; height: 12px; }