/* Экран заказа и плашка «Заказ на любой странице» (заказы, шаг 3.19–3.21; И184, И185, Р168) — по макету, утверждённому
   владельцем 06.10 («экран заказа и заказ на любой странице утверждаю»): «герой» со сроком и полосой ожидания, лента
   шагов (текущий светится), кнопки двумя колонками; плашка с кольцом готовности — ПК слева внизу, телефон над плашкой
   корзины; экран поверх страницы — ПК карточкой слева во всю высоту, телефон шторкой. Рисуют js/orders/screen.js
   (экран — и страницы заказа, и поверх страницы) и js/orders/chip.js (плашка). Размеры — только токены, цвета — только
   роли темы: это стерегут tests/design/test_tokens_guard.py и tests/form/test_no_colour_hides_outside_the_theme.py. */

/* Общее правило кнопок прежних экранов (`button` в app.css: золотая заливка во всю строку, поля, тень, блик) кнопкам
   плашки и списка заказов не подходит — они начинают с чистого листа, как детали components.css. */
.order-chip__open, .order-chip__hide, .order-row__open {
  width: auto; min-height: 0; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent;
  background-image: none; font: inherit; letter-spacing: normal; color: inherit;
}
:is(.order-chip__open, .order-chip__hide, .order-row__open):not(:disabled):not(.ghost):not(.opt) { animation: none; }

/* ── Страница заказа: номер и «Самовывоз · сегодня» строкой; ПК — шаги слева, «Самовывоз» и состав справа ── */
.order-page__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); }
.order-page__meta { color: var(--muted); font-size: var(--text-sm); }
.order-page__status { align-content: start; }
.order-page__side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }

/* ── «Герой»: значок шага (кольцо пульсирует, пока заказ открыт), слова, срок, полоса ожидания ───────────────── */
.order-hero {
  display: grid; grid-template-columns: calc(var(--space-7) + var(--space-1)) minmax(0, 1fr); gap: var(--space-3);
  align-items: center; min-width: 0; padding: var(--space-4); border: 1px solid var(--border2); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--shine) 16%, var(--panel)), var(--panel) 60%);
}
.order-hero__icon {
  position: relative; display: grid; place-items: center; width: calc(var(--space-7) + var(--space-1));
  height: calc(var(--space-7) + var(--space-1)); border-radius: var(--radius-pill); background: var(--tint); color: var(--accent);
}
.order-hero__icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.order-hero--open .order-hero__icon::after {
  content: ""; position: absolute; inset: calc(var(--space-1) * -1); border: 2px solid var(--gold2); border-radius: var(--radius-pill);
  opacity: 0; animation: order-pulse calc(var(--motion-decor) * 3) ease-out infinite;
}
@keyframes order-pulse { 0% { transform: scale(0.85); opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } }
.order-hero__words { display: grid; gap: var(--space-1); min-width: 0; }
.order-hero__title {
  margin: 0; font-family: var(--font-title); font-size: var(--title-sm); font-weight: var(--weight-medium);
  line-height: var(--leading-title); color: var(--ink); overflow-wrap: anywhere;
}
.order-hero__sub { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-text); }
.order-hero__sub strong { color: var(--accent); font-weight: var(--weight-semibold); }
.order-hero--done { background: linear-gradient(160deg, color-mix(in srgb, var(--ok) 10%, var(--panel)), var(--panel) 60%); }
.order-hero--done .order-hero__icon { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.order-hero--off { background: linear-gradient(160deg, color-mix(in srgb, var(--err) 8%, var(--panel)), var(--panel) 60%); }
.order-hero--off .order-hero__icon { background: color-mix(in srgb, var(--err) 10%, transparent); color: var(--err); }
.order-hero--off .order-hero__title { color: var(--err); }
/* Полоса ожидания — от оформления до срока (`--progress` ставит и сдвигает раз в 30 секунд js/orders/screen.js). */
.order-eta { grid-column: 1 / -1; display: grid; gap: var(--space-1); min-width: 0; }
.order-eta__bar { height: var(--space-2); overflow: hidden; border-radius: var(--radius-pill); background: var(--cream); }
.order-eta__fill {
  width: calc(var(--progress, 0) * 100%); height: 100%; border-radius: var(--radius-pill);
  background: repeating-linear-gradient(45deg, var(--gold2) 0 var(--space-2), var(--gold) var(--space-2) var(--space-4));
  background-size: calc(var(--space-4) * 1.41421) calc(var(--space-4) * 1.41421);
  animation: order-stripes calc(var(--motion-decor) * 2) linear infinite; transition: width var(--motion-decor) var(--ease);
}
@keyframes order-stripes { to { background-position: calc(var(--space-4) * 1.41421) 0; } }
.order-eta__legend {
  display: flex; justify-content: space-between; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* ── Лента шагов: прошедшие — отметкой и временем, текущий светится, впереди — бледные, отмена — цветом ошибки ── */
.order-steps { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; }
.order-steps__item {
  position: relative; display: grid; grid-template-columns: var(--space-5) minmax(0, 1fr) auto; gap: var(--space-3);
  align-items: start; padding-bottom: var(--space-3);
}
.order-steps__item:last-child { padding-bottom: 0; }
.order-steps__item::before {
  content: ""; position: absolute; top: var(--space-5); bottom: 0; left: calc(var(--space-5) / 2 - 1px); width: 2px; background: var(--border2);
}
.order-steps__item:last-child::before { display: none; }
.order-steps__item.is-done::before { background: var(--gold2); }
.order-steps__dot {
  position: relative; z-index: var(--z-raised); display: grid; place-items: center; width: var(--space-5); height: var(--space-5);
  border: 2px solid var(--border); border-radius: var(--radius-pill); background: var(--panel); color: var(--on-accent);
}
.order-steps__dot svg { width: var(--space-3); height: var(--space-3); }
.order-steps__item.is-done .order-steps__dot { border-color: var(--accent); background: var(--accent); }
.order-steps__item.is-now .order-steps__dot {
  border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--panel)); box-shadow: 0 0 0 var(--space-1) var(--tint);
  animation: order-glow calc(var(--motion-decor) * 3) ease-in-out infinite;
}
.order-steps__item.is-now .order-steps__dot::after {
  content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--accent);
}
@keyframes order-glow { 50% { box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--accent) 8%, transparent); } }
.order-steps__item.is-off .order-steps__dot { border-color: var(--err); background: var(--err); }
.order-steps__words { display: grid; gap: 2px; min-width: 0; padding-top: 2px; line-height: var(--leading-title); overflow-wrap: anywhere; }
.order-steps__words b { color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.order-steps__words span { color: var(--muted); font-size: var(--text-xs); }
.order-steps__item.is-next .order-steps__words b { color: var(--muted); font-weight: var(--weight-medium); }
.order-steps__item.is-off .order-steps__words b, .order-steps__item.is-off .order-steps__words span { color: var(--err); }
.order-steps__time {
  padding-top: 2px; color: var(--muted); font-size: var(--text-xs); line-height: var(--leading-title);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.order-steps__item.is-now .order-steps__time { color: var(--accent); font-weight: var(--weight-semibold); }

/* ── Кнопки — двумя колонками одной сетки; одна кнопка — во всю ширину, из трёх — первая ──────────────────────── */
.order-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); min-width: 0; }
.order-actions > :only-child, .order-actions > :first-child:nth-last-child(3) { grid-column: 1 / -1; }
.order-actions .btn { min-width: 0; padding: var(--space-2) var(--space-3); white-space: normal; text-align: center; }
/* Новая цена (Р103): слова и «Согласен / Отменить заказ» — одной плашкой. */
.order-offer { display: grid; gap: var(--space-3); }
.order-offer p { margin: 0; }
.order-refusal:empty { display: none; }

/* ── «Самовывоз» и «Ваш заказ» поверх страницы — разделами под чертой, без своей карточки ─────────────────────── */
.order-part { display: grid; gap: var(--space-2); min-width: 0; padding-top: var(--space-3); border-top: 1px solid var(--border2); }
.order-part p { margin: 0; }

/* ── Плашка «Заказ на любой странице»: ПК — слева внизу; телефон — во всю ширину плашки корзины, над ней ───────── */
.order-chip {
  position: fixed; left: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom)); z-index: var(--z-cartbar);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  width: min(calc(var(--space-8) * 6), calc(100% - 2 * var(--gutter)));
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); color: var(--ink);
  box-shadow: var(--shadow-2); font-family: var(--font-text); line-height: var(--leading-text);
  transition: transform var(--motion-base) var(--ease), opacity var(--motion-base) var(--ease);
}
.order-chip[hidden] { display: none; }
.order-chip.is-new { animation: order-chip-in var(--motion-slow) var(--ease); }
.order-chip.has-hide { grid-template-columns: minmax(0, 1fr) auto; }
/* Экран заказа раскрыт — плашка уходит вниз (фокус на неё вернётся: она не спрятана, а прозрачна); места внизу она
   тогда не занимает — тост и приглашение над ней не встают (`toast.js`). */
.order-chip[data-away] { opacity: 0; transform: translateY(var(--space-3)); pointer-events: none; }
/* Шаг сменился — вспышка кольцом вокруг плашки. */
.order-chip.is-flash { animation: order-flash calc(var(--motion-decor) * 2) var(--ease); }
@keyframes order-chip-in { from { opacity: 0; transform: translateY(var(--space-3)); } }
@keyframes order-flash {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold2) 70%, transparent), var(--shadow-2); }
  100% { box-shadow: 0 0 0 var(--space-4) color-mix(in srgb, var(--gold2) 0%, transparent), var(--shadow-2); }
}
@media (max-width: 767px) {
  .order-chip {
    left: 0; right: 0; margin-inline: auto; bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
    width: min(var(--cartbar-max), calc(100% - 2 * var(--gutter)));
  }
}
/* Видна плашка корзины (до 1100) — над ней, той же ширины и по тому же краю: ряд под рядом. */
body.has-cartbar .order-chip {
  left: 0; right: 0; margin-inline: auto; width: min(var(--cartbar-max), calc(100% - 2 * var(--gutter)));
  bottom: calc(var(--space-4) + var(--control-lg) + var(--space-2) + var(--space-3) + env(safe-area-inset-bottom));
}
/* Пока плашка видна, подвал длиннее на её высоту: его низ не под плашкой. */
body.has-orderchip .foot { padding-bottom: calc(var(--control-md) + var(--space-3) * 2 + var(--space-7)); }
/* Строка плашки и строка списка заказов — одна сетка: кольцо, слова, стрелка. */
.order-chip__open, .order-row__open {
  display: grid; grid-template-columns: var(--control-md) minmax(0, 1fr) calc(var(--space-6) - var(--space-1));
  gap: var(--space-3); align-items: center; min-width: 0; padding: var(--space-3); border-radius: var(--radius-lg);
  color: var(--ink); text-align: left; cursor: pointer;
}
.order-chip__open:focus-visible, .order-row__open:focus-visible, .order-chip__hide:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.order-row__open:hover { background: var(--tint); }
.order-chip__words { display: grid; gap: 2px; min-width: 0; line-height: var(--leading-title); }
/* Шаг словами — до двух строк («Заказ № 18 · Ресторан не принял» на узком телефоне), срок — строкой с обрезкой. */
.order-chip__words b {
  font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-clamp); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.order-chip__words > span { color: var(--muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-chip__words strong { color: var(--accent); font-weight: var(--weight-semibold); }
.order-chip__up {
  display: grid; place-items: center; width: calc(var(--space-6) - var(--space-1)); height: calc(var(--space-6) - var(--space-1));
  border-radius: var(--radius-pill); background: var(--cream); color: var(--accent);
}
.order-chip__up svg { width: var(--icon-sm); height: var(--icon-sm); }
.order-chip__hide {
  display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-right: var(--space-2);
  border-radius: var(--radius-pill); color: var(--muted); cursor: pointer;
}
.order-chip__hide[hidden] { display: none; }
.order-chip__hide:hover { background: var(--tint); color: var(--ink); }

/* ── Кольцо готовности: заполняется от оформления до срока; получен — цветом «готово», отменён — ошибки ─────── */
.order-ring {
  position: relative; display: grid; place-items: center; width: var(--control-md); height: var(--control-md); color: var(--accent);
}
.order-ring > svg:not(.order-ring__svg) { position: relative; width: var(--icon-md); height: var(--icon-md); }
.order-ring__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.order-ring__svg circle { fill: none; stroke-width: 3.5; }
.order-ring__track { stroke: var(--cream); }
.order-ring__fill {
  stroke: var(--gold2); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--progress, 0) * 100);
  transition: stroke-dashoffset var(--motion-decor) var(--ease);
}
.order-ring--done { color: var(--ok); }
.order-ring--done .order-ring__fill { stroke: var(--ok); }
.order-ring--off { color: var(--err); }
.order-ring--off .order-ring__fill { stroke: var(--err); }
.order-ring__dot {
  position: absolute; top: calc(var(--space-1) * -1); right: calc(var(--space-1) * -1); width: var(--space-3); height: var(--space-3);
  border: 2px solid var(--panel); border-radius: var(--radius-pill); background: var(--gold2);
  animation: order-blink calc(var(--motion-decor) * 3) ease-in-out infinite;
}
@keyframes order-blink { 50% { transform: scale(0.7); opacity: 0.6; } }

/* ── Экран заказа поверх страницы: ПК — карточкой слева во всю высоту (страница видна), телефон — шторкой ─────── */
.overlay--order { place-items: end stretch; padding: 0; }
.order-panel {
  display: flex; flex-direction: column; width: 100%; height: 88vh; height: 88dvh; min-height: 0; overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--panel); color: var(--ink); box-shadow: var(--shadow-3);
  padding-bottom: env(safe-area-inset-bottom); font-family: var(--font-text); font-size: var(--text-md); line-height: var(--leading-text);
  animation: sheet-in var(--motion-slow) var(--ease);
}
.order-panel:focus { outline: none; }
@media (min-width: 768px) {
  .overlay--order { place-items: stretch start; padding: var(--gutter); background: transparent; }
  .order-panel {
    width: min(calc(var(--space-8) * 6), 100%); height: auto; border: 1px solid var(--border2); border-radius: var(--radius-xl);
    transform-origin: bottom left; animation: order-panel-in var(--motion-slow) var(--ease);
  }
}
@keyframes order-panel-in { from { opacity: 0; transform: scale(0.94) translateY(var(--space-4)); } }
.order-panel__grip { flex: none; width: var(--space-7); height: var(--space-1); margin: var(--space-2) auto 0; border-radius: var(--radius-pill); background: var(--border); }
@media (min-width: 768px) { .order-panel__grip { display: none; } }
.order-panel__head { flex: none; display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); }
.order-panel__back { margin-left: calc(var(--space-3) * -1); }
.order-panel__title {
  flex: 1; min-width: 0; margin: 0; font-family: var(--font-title); font-size: var(--title-md); font-weight: var(--weight-medium);
  line-height: var(--leading-title); overflow-wrap: anywhere;
}
.order-panel__collapse { width: var(--tap); height: var(--tap); border-radius: var(--radius-pill); background: var(--cream); color: var(--accent); }
.order-panel__body {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; gap: var(--space-3);
  align-content: start; padding: var(--space-1) var(--space-4) var(--space-5);
}
.order-panel__body p { margin: 0; }
.order-panel__page { justify-self: start; min-height: var(--tap); }
/* Список заказов (два и больше): строки той же сетки, что плашка; закрытый — с «×». */
.order-rows { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.order-row {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; min-width: 0;
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel);
}
.order-row:has(.order-chip__hide) { grid-template-columns: minmax(0, 1fr) auto; }

@media (prefers-reduced-motion: reduce) {
  .order-hero__icon::after, .order-eta__fill, .order-steps__item.is-now .order-steps__dot, .order-ring__dot,
  .order-chip.is-new, .order-chip.is-flash, .order-panel { animation: none; }
  .order-chip, .order-eta__fill, .order-ring__fill { transition: none; }
}