/* An editable list of rows in a panel: a header with a title, optional total
   and Add button, then rows of labelled fields and a remove action. Used by
   Income's DB pensions and Spending's one-off expenses. Field chrome,
   validation, buttons and typography stay with their own components; each
   page sets its row columns through `--list-editor-columns` (wide layouts)
   and `--list-editor-compact-columns` (1024px and below). */
.list-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.list-editor-header h4 { margin: 0; }

.list-editor-total {
  margin-top: 1px;
}

.list-editor-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.list-editor-row {
  display: grid;
  grid-template-columns: var(--list-editor-columns, minmax(0, 1fr) auto);
  align-items: start;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-page);
}

.list-editor-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.list-editor-field label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
}

/* Rows reserve one caption line so correcting a field never shifts the
   controls or the remove action around it. */
.list-editor-field .control-error {
  min-height: calc(var(--font-size-compact) * var(--line-height-compact));
}

.list-editor-field .control-error[hidden] {
  display: block;
  visibility: hidden;
}

.list-editor-remove {
  margin-top: 1.35rem;
}

.list-editor-empty {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .list-editor-row {
    grid-template-columns: var(--list-editor-compact-columns, minmax(0, 1fr) 44px);
  }

  .list-editor-field-wide { grid-column: 1 / -1; }

  .list-editor-remove {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 767px) {
  .list-editor-header {
    align-items: center;
  }
}