/* TextInput: label, control, hint, error, stacked in one column. Select wears the same chrome;
   its rules are in select.css, because a component's styles live with the component.

   As the snapshot draws a field: a small muted label, a white box on a hairline at the control's
   height, the text at 16 px so a phone does not zoom into it. Focus turns the hairline to ink. */
/* `align-content: start`: in a box taller than it needs, the label and the control stay together at
   the top and the room is left below, so two fields side by side line their controls up whatever
   hangs under either (the correction pass, 9 Oct 2026). */
.text-input {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.text-input-label {
  color: var(--color-muted);
  font-size: var(--text-label);
}

/* Required is said by the marker and by the control's own attribute. Muted, like the label it
   belongs to: a red star is a warning, and nothing is wrong yet. */
.text-input-required {
  color: var(--color-muted);
  margin-left: var(--space-1);
}

.text-input-control {
  box-sizing: border-box;
  width: 100%;
  height: var(--control-height);
  font: inherit;
  font-size: var(--text-md);
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--hairline) solid var(--color-field-line);
  border-radius: var(--radius);
  padding: 0 var(--space-3);
}

.text-input-control::placeholder {
  color: var(--color-muted);
}

.text-input-control:focus {
  border-color: var(--color-ink);
  outline: var(--hairline) solid var(--color-ink);
  outline-offset: 0;
}

.text-input-control[disabled] {
  color: var(--color-muted);
  background: transparent;
  cursor: default;
}

.text-input-invalid .text-input-control {
  border-color: var(--color-danger);
}

.text-input-invalid .text-input-control:focus {
  outline-color: var(--color-danger);
}

.text-input-hint {
  color: var(--color-muted);
  font-size: var(--text-label);
  margin: 0;
}

.text-input-error {
  color: var(--color-danger);
  font-size: var(--text-label);
  margin: 0;
}