/* Recurring items and subscriptions. */

.rec-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.rec-row:last-child { border-bottom: 0; }
.rec-row--paused .rec-row__title,
.rec-row--paused .rec-row__amount { color: var(--text-3); }

.rec-row__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rec-row__title {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rec-row__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.rec-row__end {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: none;
}
.rec-row__figures { text-align: right; display: grid; gap: 2px; }
.rec-row__amount { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
.rec-row__equiv { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }
.rec-row__actions { display: inline-flex; gap: 2px; }

.upnext { display: grid; }
.upnext__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
}
.upnext__item:last-child { border-bottom: 0; }
.upnext__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.upnext__title {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upnext__when { font-size: var(--fs-xs); color: var(--text-3); }
.upnext__amount { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; flex: none; }
.upnext__pay { flex: none; }

.rec-total {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-5);
}
.rec-total__value {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums lining-nums;
}
.rec-total__split {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.rec-total__split div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}
.rec-total__split strong { color: var(--text); font-variant-numeric: tabular-nums; }