/* Шаги заказа рукой оператора (Р352-3, Р357-2; js/orders/steps.js): в низу карточки — главная кнопка следующего шага с
   «ещё» рядом с «Отменить заказ», ниже — другие шаги строкой кнопок, подтверждение со словами Гостю, отказ двери одной
   строкой. «⚠ касса говорит «готовится»» (Р353-2) — под состоянием в шапке карточки; свежесть готового в «Ждут
   курьера» (план статусов §2.4) — справа в строке колонки. Ничего не наезжает при 1024–1920 и 390 (проверка
   прямоугольниками — tests/web_operator/test_nothing_overlaps.py). Размеры — токены, цвета — роли темы. */

/* ── шаг в низу карточки ──────────────────────────────────────────────────────────────────────────────────────── */
.oc-step { display: grid; flex: 1 1 100%; gap: var(--space-2); min-width: 0; }
.oc-step .order-decide { align-items: stretch; }
/* Главная кнопка шага — шире «Отменить заказ»: она и есть следующее дело по заказу. */
.oc-step__split { display: flex; flex: 2 1 0; min-width: 0; }
.order-card__foot .oc-step__split .btn { flex: none; }
.order-card__foot .oc-step__split .oc-step__main { flex: 1 1 auto; min-width: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); }
.order-card__foot .oc-step__split .oc-step__main:only-child { border-radius: var(--radius-md); }
.oc-step__more {
  padding-inline: var(--space-2); border-left-color: color-mix(in srgb, var(--on-accent) 35%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.oc-step__more svg { width: var(--icon-md); height: var(--icon-md); transition: transform var(--motion-fast) var(--ease); }
.oc-step__more[aria-expanded="true"] svg { transform: rotate(180deg); }
.oc-step__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.oc-step__then { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.oc-step__list .btn { max-width: 100%; }
/* Пишут причину отмены — шагов не видно: решение по заказу — одно за раз. */
.order-card__foot:has(.order-reason:not([hidden])) :is(.oc-step__split, .oc-step__list) { display: none; }

/* Подтверждение: вопрос, что увидит Гость, «Поставить» и «Отмена» своей полосой. */
.oc-step__ask {
  display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3); border: 1px solid var(--accent);
  border-radius: var(--radius-md); background: var(--tint);
}
.oc-step__ask p { margin: 0; overflow-wrap: anywhere; }
.oc-step__q { font-size: var(--text-sm); line-height: var(--leading-title); }
.oc-step__guest { color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-text); }
.oc-step__acts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.oc-step__acts .btn { flex: 1 1 0; min-width: calc(var(--space-8) + var(--space-5)); }
.oc-step__acts .btn--secondary { background: var(--panel); }

/* Отказ двери — одной строкой: значок и её слова. */
.oc-step__said { display: flex; align-items: flex-start; gap: var(--space-1); margin: 0; color: var(--err); font-size: var(--text-sm);
  font-weight: var(--weight-semibold); line-height: var(--leading-title); }
.oc-step__said > span:last-child { min-width: 0; padding-top: calc((var(--control-sm) - 1lh) / 2); overflow-wrap: anywhere; }

/* ── «⚠ касса говорит …» и «№ 41 стоит 25 мин — остывает» (Р431, красным) в шапке карточки ─────────────────────── */
.order-card__kassa, .order-card__cool { display: flex; align-items: center; gap: 2px;
  margin: calc(var(--space-1) * -1) 0 0 calc(var(--space-2) * -1);
  color: var(--warn); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.order-card__cool { color: var(--err); }
.order-card__kassa-words, .order-card__cool-words { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1099px) {
  .order-card__head .order-card__kassa, .order-card__head .order-card__cool { grid-column: 1 / -1; }
}

/* ── свежесть готового в «Ждут курьера» ───────────────────────────────────────────────────────────────────────── */
.oc-crew__wait > li:has(> .oc-crew__fresh) { grid-template-columns: auto minmax(0, 1fr) auto; }
.oc-crew__fresh { display: inline-flex; align-items: center; justify-self: end; color: var(--ok); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); white-space: nowrap; }
.oc-crew__fresh.is-long { color: var(--err); }
.oc-crew__fresh .oc-hint__btn { width: var(--space-5); height: var(--space-5); }
.oc-crew__fresh .oc-hint__btn svg { width: var(--icon-sm); height: var(--icon-sm); }
@media (max-width: 767px) { .oc-crew__fresh .oc-hint__btn { width: var(--tap); height: var(--tap); } }
/* «Купон за опоздание» (часть 1з-2, Р435–Р439): в «Когда» — кнопка с пояснением значком или что с купоном стало. */
.order-coupon { display: grid; gap: var(--space-2); margin: 0; }
.order-coupon > p, p.order-coupon { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; color: var(--muted); }
p.order-coupon svg { flex: none; width: var(--icon-md); height: var(--icon-md); color: var(--gold); }
p.order-coupon.warn, p.order-coupon.warn svg { color: var(--warn); }
.order-coupon .btn svg { flex: none; width: var(--icon-sm); height: var(--icon-sm); }