.stepper { height: 32px; display: inline-flex; align-items: center; border-radius: var(--radius-m); border: 1px solid var(--border-strong); }
.stepper__form { display: contents; }
.stepper__button { width: 32px; height: 100%; border: 0; background: transparent; color: var(--text); font: 16px var(--font); cursor: pointer; }
.stepper__button:hover:not(:disabled) { background: var(--surface-2); }
.stepper__button:disabled { color: var(--text-faint); cursor: default; }
.stepper__value { min-width: 28px; text-align: center; font: 600 13px var(--font-mono); }
/* ✕ and ⤒ (clear, fill): narrower and quieter than − and +. Under a card tile on a phone they are hidden (card-tile.css). */
.stepper__button--extra { width: 26px; font-size: 13px; color: var(--text-muted); }