.row-list {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: var(--tap-dense);
  padding: var(--space-1) 0;
  border-bottom: var(--line-width) solid var(--line);
  font-size: var(--text-md);
}

.row:last-child {
  border-bottom: 0;
}

/* The step under way (the coach page's class clock): a tint and a ring
   all round, the tint spread past the row's edge so its text keeps room. */
.row[aria-current="step"] {
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  box-shadow: 0 0 0 var(--space-1) var(--accent-soft), 0 0 0 calc(var(--space-1) + 2px) var(--accent);
}

.row-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2) 0;
}

.row-meta {
  flex: 0 0 auto;
  min-width: 3rem;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* A zero basis, so a long title wraps within its line rather than pushing
   the row's end value down onto a line of its own. */
.row-title {
  flex: 1 1 0;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.row-title:hover {
  text-decoration: underline;
}

.row-end {
  flex: 0 0 auto;
  font-size: var(--text-sm);
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.row-title-quiet {
  color: var(--ink-muted);
}

.row-detail {
  flex-basis: 100%;
  min-width: 0;
  padding-left: calc(3rem + var(--space-2));
}

.row-detail-flush {
  padding-left: 0;
}

.row-detail-quiet {
  color: var(--ink-muted);
}

/* A group heading between runs of rows (Components::Table group_by:): the
   wide table's heading on the phone list, at the dense tap height. Its
   title, note and end take their type from the data-group-* rules. */
.row-group {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: var(--tap-dense);
  padding: var(--space-1) var(--space-2);
  border-top: var(--line-width) solid var(--line);
  border-bottom: var(--line-width) solid var(--line);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  font-weight: 600;
}