.control-group {
  margin-bottom: var(--space-5);
}

.control-group label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-supporting);
  font-weight: 500;
  line-height: var(--line-height-supporting);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* A help tip sits immediately after the label text it explains, never at the
   row's far edge; a slider value in the same label stays on the right. */
.control-group label:has(> .help-tip) {
  justify-content: flex-start;
}
.control-group label:has(> .help-tip) > .type-metric {
  margin-left: auto;
}

.control-hint {
  color: var(--grey);
  margin-top: var(--space-2);
}

/* Validation that belongs to one editable control stays attached to that
   control. A page-level status surface is too easy to miss and does not say
   which field needs attention. */
.control-error {
  color: var(--color-danger);
  font-weight: 600;
  margin: var(--space-1) 0 0;
}

/* Disabled because the plan says the income has not begun yet. */
.control-group.is-blocked label {
  color: var(--color-text-muted);
}

.control-group.is-blocked input:disabled,
.control-group.is-blocked input:read-only {
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Common responsive panel grid used by every plan form and Monthly Actuals. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-4);
}

/* Native checkboxes take the action colour everywhere; a switch
   (`role="switch"`) is drawn by the modal's `.app-switch`. A page may size a
   checkbox, or give a completion checkbox the positive colour. */
input[type="checkbox"] {
  accent-color: var(--color-action);
}

input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-action);
  border: 2px solid var(--accent);
  cursor: pointer;
  transition: transform var(--transition-fast);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.number-input-wrap {
  position: relative;
}
/* The £ only belongs to a currency field. The 24px left padding that makes
   room for it is set on `input[type="number"]` alone, so wrapping anything
   else — a month picker, a select — drew the £ straight on top of the text
   ("August" rendered as "A£ugust"). Guarding by what the wrapper contains
   makes that mistake impossible rather than merely fixed once. */
.number-input-wrap:has(> input[type="number"])::before {
  content: '£';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-action);
  pointer-events: none;
}

/* One visual owner for editable field chrome. Individual controls retain only
   the sizing or inset that belongs to their input type. */
:where(.text-input, input[type="number"], select, input[type="month"], input[type="date"]) {
  border: var(--border-control);
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-action);
  background: var(--color-action-subtle);
  outline: none;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
:where(.text-input, input[type="number"], select, input[type="month"], input[type="date"]):focus {
  border-color: var(--color-focus);
  background: var(--color-surface);
}

:where(.text-input, input[type="number"], select, input[type="month"], input[type="date"])[aria-invalid="true"] {
  border-color: var(--color-danger);
  background: var(--color-danger-surface);
}

.text-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 0.86rem;
}

input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  -moz-appearance: textfield;
}
/* Only a currency field draws the £ (see `.number-input-wrap` above), so only
   it reserves room for one. A percentage or an age starts at the normal inset. */
.number-input-wrap > input[type="number"] {
  padding-left: 24px;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/* Same control treatment as a number input, minus the currency inset. */
select,
input[type="month"],
input[type="date"] {
  /* Sized to content, capped at the container. A date or a month name is
     short, and stretching the control to full width made it read as a text
     field rather than a picker. */
  width: auto;
  max-width: 100%;
  padding: 8px 10px;
}

/* Optional annotation below a range control. It is shared by the Spending
   PLSA benchmark and the Assumptions CPI marker. */
.rls-marker-row {
  position: relative;
  height: 24px;
  margin: 2px 0 var(--space-1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

.rls-marker-row.visible {
  opacity: 1;
  visibility: visible;
}

.rls-pip {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.rls-pip-tick {
  display: block;
  width: 2px;
  height: 6px;
  border-radius: 1px;
  background: var(--accent);
}

.rls-pip-label {
  margin-top: 1px;
  color: var(--color-text-accent);
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

/* Touch-sized controls apply to phones and portrait tablets. */
@media (max-width: 1024px) {
  :where(.text-input, input[type="number"], select, input[type="month"], input[type="date"]) {
    min-height: 44px;
  }

  .text-input {
    padding: 11px 12px;
    font-size: 0.95rem;
  }

  input[type="number"] {
    padding: 11px 12px;
    font-size: 0.95rem;
  }

  .number-input-wrap > input[type="number"] {
    padding-left: 26px;
  }

  select,
  input[type="month"],
  input[type="date"] {
    padding: 11px 12px;
  }

  input[type="range"] {
    height: 5px;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
  }
  .control-group {
    margin-bottom: var(--space-4);
  }
  .control-group label {
    margin-bottom: var(--space-2);
  }
}

/* Only compact content stacks. A portrait tablet has enough page width for
   the shared two-column settings grid once the desktop rail is absent. */
@media (max-width: 767px) {
  .settings-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}