/* ============================================================
   Datamart — DS.RecordList styles.
   ONE reusable record-listing pattern for queues, e-mails,
   activities, notifications, search results…
   Flat surfaces · hairline separators · outline-mark avatars ·
   flat icons (no tile, DS §0). Load AFTER colors_and_type.css.
   ============================================================ */
.rl { display: flex; flex-direction: column; min-width: 0; }

.rl-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border); background: transparent; }
.rl-row:last-child { border-bottom: 0; }
.rl-row[role="button"] { cursor: pointer; }
.rl-row[role="button"]:not(.sel):hover { background: var(--hover-surface); }
.rl-row.sel { background: var(--surface-100); box-shadow: inset 3px 0 0 var(--accent); }
.rl-row.rl-done { opacity: 0.5; }
.rl-row.rl-muted { opacity: 0.55; }

/* lead — avatar (outline mark, per Components · Avatars) */
.rl-av { flex: none; display: grid; place-items: center; line-height: 1; letter-spacing: 0.01em;
  font-family: var(--font-display); font-weight: 600; border-radius: 50%;
  color: hsl(var(--av-hue, 265) 52% 42%); background: var(--surface-75); border: 1.5px solid hsl(var(--av-hue, 265) 62% 60%); }
.rl-av.sq { border-radius: var(--radius-sm); }
.rl-av-md { width: 32px; height: 32px; font-size: 13px; }
.rl-av-sm { width: 24px; height: 24px; font-size: 10px; }

/* lead — flat icon (no background tile, DS §0); optional hue tone per type */
.rl-ic { flex: none; width: 28px; display: grid; place-items: center; color: var(--fg-secondary); }
.rl-ic .ti { font-size: 19px; }
.rl-sm .rl-ic { width: 24px; }
.rl-sm .rl-ic .ti { font-size: 17px; }
.rl-ic.ic-tone-blue { color: var(--ic-blue); }
.rl-ic.ic-tone-green { color: var(--ic-green); }
.rl-ic.ic-tone-amber { color: var(--ic-amber); }
.rl-ic.ic-tone-purple { color: var(--ic-purple); }
.rl-ic.ic-tone-rose { color: var(--ic-rose); }
.rl-ic.ic-tone-lime { color: var(--ic-lime); }
.rl-ic.ic-tone-grey { color: var(--ic-grey); }

/* text block */
.rl-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rl-nm { font: 600 13px var(--font-sans); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-sub { font: 400 12px var(--font-sans); color: var(--fg-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* trailing slot + ready-made helpers (tag / time / outcome / unread dot) */
.rl-trail { flex: none; display: inline-flex; align-items: center; gap: var(--sp-2); }
.rl-time { font: 500 11px var(--font-mono); color: var(--fg-muted); white-space: nowrap; }
.rl-tag { font: var(--overline); color: var(--fg-muted); white-space: nowrap; }
.rl-tag.ok { color: var(--positive-ink); }
.rl-tag.warn { color: var(--warning-ink); }
.rl-tag.crit { color: var(--critical-ink); font-weight: 600; }
.rl-out { display: inline-flex; align-items: center; gap: var(--sp-1); font: var(--overline); color: var(--positive-ink); white-space: nowrap; }
.rl-out .ti { font-size: var(--ico-xs); color: var(--positive); }
.rl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }