/* The compact call card (it-180) — templates/calls/_call_line.html: one call in two short lines (direction · when, then
   outcome · who · duration · play). The full card is the contact Calls tab's (call-log.css). */

.call-lines { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); }

/* Columns: direction · what · duration · play — the play column is kept when a call has no recording, so the
   durations line up down a list. */
.call-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 32px;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  min-height: 32px;
  font-size: 0.86rem;
  color: var(--md-sys-color-on-surface);
}
.call-line__dir { font-size: 18px; color: var(--md-sys-color-primary); }
.call-line--missed .call-line__dir { color: var(--md-sys-color-error); }
.call-line__what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.call-line__when { font-weight: 600; }
.call-line__sub {
  color: var(--md-sys-color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-line__dur {
  grid-column: 3;
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface-variant);
}
.call-line__rec { grid-column: 4; display: inline-flex; justify-content: center; }
.call-line__rec .icon-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--r-full);
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
.call-line__rec .material-symbols-rounded { font-size: 20px; }