/* 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;
}

/* Compact: a table row's field (17 Oct 2026, the polish round). The box alone at the artboards'
   30 px, its label the column's head and its accessible name, so a row of boxes and selects is one
   height. */
.text-input-compact {
  gap: var(--space-1);
}

.text-input-compact .text-input-control {
  height: var(--control-height-compact);
  font-size: var(--text-label);
  padding: 0 var(--space-2);
}

/* **Inline**: a value read in place, its box drawn only under the pointer or the focus (the quote's
   proposed counts and prices), as the inline select draws a roster's cells. */
.text-input-inline .text-input-control {
  border-color: transparent;
  background: transparent;
}

.text-input-inline .text-input-control:hover:not([disabled]) {
  border-color: var(--color-field-line);
}

.text-input-inline .text-input-control:focus {
  border-color: var(--color-ink);
  background: var(--color-surface);
}

/* On a phone a box under 16 px is zoomed into when it takes the focus; the compact box keeps its
   height and takes the field's size there. */
@media (max-width: 40rem) {
  .text-input-compact .text-input-control {
    font-size: var(--text-md);
  }
}