/* ===================================
   NUMBER FIELD MOLECULE
   ===================================

   Label + NumberInput stepper + help, all on one line. The stepper packs next to
   the label; the input is sized to the digit count it accepts (not the atom's
   wide default), and the help sits inline after it, muted.

   SPACING CONTRACT:
   - Internal: row gap only.
   - External margins: NONE - parent controls spacing via gap.
*/

.number-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.number-field .label {
  margin: 0;
}

.number-field .label-text {
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
}

/* The stepper keeps its intrinsic size; the input is sized to the digits it holds
   (the atom defaults to flex:1 + a 60px floor, which is far too wide for 2-3 digit
   config values). ch units keep it proportional to the font. */
.number-field .number-input-wrapper {
  flex: 0 0 auto;
}

.number-field .number-input {
  flex: 0 0 auto;
  min-width: 0;
  width: 4ch;
}

.number-field--w2 .number-input { width: 3ch; }
.number-field--w3 .number-input { width: 4ch; }
.number-field--w4 .number-input { width: 5ch; }
.number-field--w5 .number-input { width: 6ch; }

/* Help sits inline after the stepper, taking the remaining width; muted caption. */
.number-field__help {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--line-height-normal);
}

.number-field-disabled {
  opacity: 0.6;
  pointer-events: none;
}