/* Spending-only budget layout; controls, buttons, and type stay shared. */
.spending-settings { grid-template-columns: minmax(0, 1fr); }
.spending-settings .section-block { align-self: start; }
.spending-settings > .section-block:first-child { width: 100%; max-width: 580px; }
.spending-budget-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.spending-budget-heading [data-budget-total] { white-space: nowrap; }
.spending-budget-basis { margin-left: var(--space-2); color: var(--color-text-muted); }
.spending-budget-picker { max-width: 440px; margin-bottom: var(--space-3); }
.spending-budget-picker select { width: 100%; }
.spending-budget-categories { border-top: var(--border-thin); margin-bottom: var(--space-3); }
.spending-budget-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 68px;
  align-items: center;
  column-gap: var(--space-2);
  min-height: 43px;
  padding-block: var(--space-1);
  padding-inline-start: var(--space-2);
  border-bottom: var(--border-thin);
}
.spending-budget-row.is-modified {
  background: var(--color-information-surface);
}
.spending-budget-row.is-modified::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--color-information);
}
.spending-budget-label { min-width: 0; }
.spending-budget-row strong { white-space: nowrap; }
.spending-budget-row-actions { display: flex; justify-content: end; gap: var(--space-1); }
.spending-budget-row input { width: 100px; min-width: 0; }
.spending-budget-row:has([data-budget-input]) { grid-template-columns: minmax(0, 1fr) 100px 32px 32px; }
.spending-budget-error { grid-column: 2 / -1; }
.spending-budget-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.spending-budget-actions [hidden] { display: none; }
@media (min-width: 1025px) {
  .spending-budget-categories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-5);
  }
}
@media (max-width: 767px) {
  .spending-budget-row { column-gap: var(--space-1); }
  .spending-budget-row:has([data-budget-input]) { grid-template-columns: minmax(0, 1fr) 88px 32px 32px; }
  .spending-budget-row input { width: 88px; }
}

/* #22: one-off expenses use the shared list editor; Spending sets only its
   columns and the before-start note's place in the row. */
.spending-one-offs {
  --list-editor-columns: minmax(8rem, 1.4fr) minmax(9rem, 0.9fr) minmax(7rem, 0.8fr) minmax(6rem, 0.7fr) minmax(6rem, 0.6fr) auto;
  --list-editor-compact-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
}
.spending-one-offs .list-editor-header h3 { margin: 0; }
/* One reserved line under each row: an error while a field is invalid,
   otherwise the plan years the entry counts in. An error takes the shared
   `.control-error` treatment; the note is muted. */
.one-off-message {
  grid-column: 1 / -1;
  min-height: calc(var(--font-size-compact) * var(--line-height-compact));
  margin: 0;
}
.one-off-message:not(.control-error) { color: var(--color-text-muted); }
@media (max-width: 1024px) {
  /* Name with remove beside it, then month and amount, then the repeat. */
  .spending-one-offs .list-editor-field-wide { grid-column: 1 / 3; }
  .spending-one-offs .list-editor-remove { grid-column: 3; grid-row: 1; }
  .spending-one-offs .one-off-field-start_month,
  .spending-one-offs .one-off-field-repeat_every_years { grid-column: 1; }
  .spending-one-offs .one-off-field-amount,
  .spending-one-offs .one-off-field-repeat_until_year { grid-column: 2; }
}
@media (max-width: 480px) {
  /* A month input needs the width to show "September 2025". */
  .spending-one-offs .one-off-field-start_month { grid-column: 1 / 3; }
  .spending-one-offs .one-off-field-amount { grid-column: 1; }
}