.card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: var(--s1);
  min-height: 76px;
  padding: 14px var(--s4);
  border-radius: var(--radius-account-card);
  background: var(--card);
  box-shadow: var(--elevation-card);
  color: var(--on-surface);
  text-decoration: none;
}
.card:hover {
  background: color-mix(in srgb, var(--card) 94%, var(--on-surface));
}
.archived {
  opacity: 0.92;
}
.middle {
  flex: 1 1 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.nameLine {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}
.name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--type-title-medium);
  letter-spacing: var(--tracking-title-medium);
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 1px var(--s2);
  border-radius: var(--radius-full);
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  font: var(--type-label-small);
}
.count {
  font: var(--type-body-small);
  letter-spacing: var(--tracking-body-small);
  color: var(--on-surface-variant);
}
/* The balance column wraps under the name when it does not fit (long names, 7-digit amounts, large text). */
.end {
  flex: 0 1 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
}
.wording {
  font: var(--type-label-medium);
}
.owed {
  color: var(--owed);
}
.owing {
  color: var(--owing);
}
.settled {
  flex-direction: row;
  align-items: center;
  gap: var(--s1);
  font: var(--type-title-medium);
  color: var(--settled);
}