/* Прогрессивная скидка вида карты: тот же контейнер и та же шапка,
   что у cashbox (cashback-box.css) — значок, заголовок, карандаш
   правки справа. Своё здесь — список шагов (просмотр) и запись
   в редактировании собирает уже готовые классы строк заказа
   (item/item__pair/item__field, items.css). */

.stepbox {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.stepbox__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.stepbox__title-line {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 0;
}

.stepbox__mark { display: grid; place-items: center; color: var(--accent-text); }
.stepbox__mark .icon { width: var(--fs-md); height: var(--fs-md); }

.stepbox__title { font-size: var(--fs-sm); font-weight: 650; }

.stepbox__hint { font-size: var(--fs-xs); color: var(--text-faint); }

.stepbox__edit {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}

.stepbox__edit .icon { width: var(--fs-sm); height: var(--fs-sm); }
.stepbox__edit:active { background: var(--surface); }

@media (hover: hover) {
  .stepbox__edit:hover { color: var(--text); }
}

/* Список шагов — читают лестницей сверху вниз, порог растёт; строки
   разделены линией, тем же приёмом, что и cashhistory (cashback-
   client.css), без рамки на каждую. */
.stepbox__list {
  display: flex;
  flex-direction: column;
}

.stepbox__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
}

.stepbox__row + .stepbox__row { border-top: 1px solid var(--line-soft); }

.stepbox__from { font-size: var(--fs-sm); color: var(--text-dim); }

.stepbox__rate {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

/* «Добавить шаг» переиспользует пунктирную кнопку строк заказа
   (items.css: .btn--dashed), но там она вровень с высокими коробками
   позиций и всей формой заказа; здесь, в компактном блоке, та же
   высота (--control) выглядит непропорционально — своя ниже,
   как у «Отмена»/«Сохранить» рядом с ней. */
.stepbox .btn--dashed { min-height: var(--control-sm); }

.stepbox__note { font-size: var(--fs-xs); color: var(--text-faint); }

.stepbox__acts { display: flex; gap: var(--sp-3); }
.stepbox__acts .btn { flex: 1; margin-top: 0; }