/* settings-stepper -compact numeric −/+ stepper for quantities,
 * percentages, and counts. Three-cell grid (28px button · 1fr input ·
 * 28px button) collapsed into a single 130×32 px chip. The `.wide`
 * modifier bumps to 170 px for larger values.
 *
 * Name kept as ``.settings-stepper`` (not just ``.stepper``) to avoid
 * a prod-template sweep · the class predates this promotion and ships
 * on every settings sub-page, the recipe configurator, the recipe
 * create form, the cost-defaults form, threshold rows, etc.
 *
 * Not to be confused with components/17-steps.css -that's the wizard
 * step indicator (Step 1 of 4 breadcrumb), a different concept.
 *
 * Usage:
 *
 *   <div class="settings-stepper">
 *     <button type="button" class="settings-stepper-btn">−</button>
 *     <input class="settings-stepper-input" type="text" value="12"
 *            inputmode="numeric">
 *     <button type="button" class="settings-stepper-btn">+</button>
 *   </div>
 *
 * Composes inside .form-group (label above) or .settings-card-row
 * (right-aligned next to a row label). The .settings-stepper-row
 * helper wraps a stepper + a suffix label for "12 portions" style
 * inline displays.
 */

.settings-stepper {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
  width: 130px;
}

.settings-stepper.wide {
  width: 170px;
}

.settings-stepper-btn {
  width: 28px;
  height: 32px;
  background: var(--surface-soft);
  color: var(--text);
  border: 0;
  font-size: var(--font-size-prominent-lg);
  font-weight: 800;
  display: grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.settings-stepper-btn:hover {
  background: var(--surface-strong, var(--surface-soft));
}

.settings-stepper-input {
  width: 100%;
  height: 32px;
  border: 0;
  border-left: 1px solid var(--divider);
  border-right: 1px solid var(--divider);
  background: var(--surface);
  font-size: var(--font-size-body);
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}

.settings-stepper-input::-webkit-inner-spin-button,
.settings-stepper-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.settings-stepper-input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

.settings-stepper-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.settings-stepper-suffix {
  font-size: var(--font-size-micro);
  color: var(--muted);
  font-weight: 700;
}