/* ============================================================
   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;
}

/* a11y (app-only): clickable rows are real <button>s; strip native chrome, keep the hairline. */
button.rl-row {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}