/* Заказы — список и страница одного заказа.

   Отдельный файл: base.css про заказы больше не знает, как не знает про
   переписку и процентку.

   Экран устроен так: заголовок «Заказы» — такой же, как «Меню», — потом
   карточки, каждая своя, между ними воздух. Завершённые идут ниже своим
   заголовком; переключателя нет, он прятал половину списка за нажатием.

   Страница заказа занимает место списка, своего экрана у неё нет: «назад»
   возвращает список. Так же устроен замер в процентке.
*/

/* ============================================================================
   СПИСОК
   ============================================================================ */

/* Заголовок раздела. Тот же, что у меню, до последней цифры: два раздела в
   одном приложении не могут представляться по-разному. */

/* Заголовок «Завершённые» и заголовки разделов на странице заказа. */
.orders-group {
  margin: 20px 0 2px;
  font-size: 16px;
}

/* Строка заказа. Во всю ширину, как наличие и проценка: скруглённая карточка с
   заливкой осталась от прежнего вида и спорила с прямыми списками (почерк
   19.08.2026).

   Что именно заказано, в строке не пишется: у владельца в заказе доходит до
   ста позиций, и одного имени для них нет. */
.order-card {
  position: relative;
  display: block;
  width: calc(100% + 36px);
  margin: 0 -18px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--hair);
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.order-card__main {
  min-width: 0;
}

/* Номер — тег strong, и без своего веса браузер рисует его жирным. Вес задаём
   прямо: в приложении жирного нет нигде (docs/POCHERK.md). Размер на ступень
   выше строки — им и выделяется. */
.order-card__number {
  display: block;
  color: var(--accent);
  font-size: 20px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Сумма — главное число строки, и держит его размер, а не вес. */
.order-card__money {
  display: block;
  margin-top: 5px;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.order-card__when {
  display: block;
  margin-top: 5px;
  color: rgba(var(--ink), 0.4);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Статус — плашкой у правого края, вровень с номером. Это единственное цветное
   пятно на экране, и оно читается с одного взгляда (выбор владельца
   17.08.2026, подтверждён 19.08.2026). */
.order-card__state {
  position: absolute;
  top: 12px;
  right: 18px;
}

.order-card__state strong {
  display: block;
  padding: 4px 9px;
  border-radius: var(--radius);
  /* Синий один на всё приложение — берётся из палитры, своего числа здесь
     нет. Раньше стоял #1a56a8: прежний акцент, забытый при смене палитры,
     и в заказах горел синий, которого больше нигде не было (замечание
     владельца 26.08.2026). Первая строка — для старых браузеров. */
  background: #e8f1fa;
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  color: var(--accent-deep);
  font-size: 13px;
  font-weight: 400;
}


/* ============================================================================
   СТРАНИЦА ЗАКАЗА
   ============================================================================ */

/* ОТСТУПЫ НА СТРАНИЦЕ ЗАКАЗА ЗАДАЮТСЯ ЗДЕСЬ И БОЛЬШЕ НИГДЕ.
   ----------------------------------------------------------------------
   Правил ровно три, и других быть не должно:

     1. между любыми двумя блоками — 8;
     2. под заголовком страницы — 8 общих плюс 12 своих;
     3. над заголовком раздела — 8 общих плюс 8 своих.

   Раньше поля стояли у каждого блока порознь, и при добавлении нового я
   дважды забывал их выставить: сначала слиплись лента с суммами, потом суммы
   с вложениями. Владелец справедливо спросил, не посыплется ли дальше.
   Посыпаться нечему: место одно.

   Запас снизу — под панель вкладок, иначе последняя кнопка уходит под неё. */
.order-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 96px);
}

/* Отступ у заголовка общий, здесь его не переопределяем — из-за этого номер
   заказа стоял выше «Заказов» и «Меню». */

/* Раздел на странице заказа отделяет полоса подложки во всю ширину — та же,
   что в меню между группами (выбор владельца 19.08.2026). До неё «Вложения»
   стояли в тех же отступах, что строка файла, и раздел не читался разделом.

   Полоса рисуется самим заголовком: отдельного пустого блока в разметке для
   этого заводить незачем. */
.order-page .orders-group {
  margin: 0 0 6px;
  padding-top: 14px;
}

.order-page .orders-group::before {
  content: "";
  display: block;
  width: calc(100% + 36px);
  height: 10px;
  margin: 0 -18px 14px;
  background: var(--fill);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

/* Путь без панели: заливка делала из него виджет посреди списка (почерк
   19.08.2026). Держат его точки и линия между ними. */
.order-steps {
  padding: 6px 0 14px;
}

/* Шаг и его дата — по краям строки, как в службах доставки: слева читают, что
   произошло, справа — когда. Столбиком дата липла к названию и разбивала
   ленту на кашу из двух шрифтов. */
.order-step {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  /* Шаг занимает одну строку, и без запаса лента сжимается в частокол.
     Двадцать шесть слева — под кружок, двадцать два снизу — между шагами. */
  padding: 0 0 22px 26px;
}

.order-step:last-child {
  padding-bottom: 0;
}

/* Точка стоит по середине полосы букв, а не по коробке строки. Замер при
   16px: коробка 19, верх прописной 4,2, база 15,8 — центр полосы 10. Точка
   диаметром 10 садится серединой на середину полосы, отсюда 5 (замечание
   владельца 19.08.2026: подписи съехали ниже точек). */
.order-step::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(var(--ink), 0.16);
}

/* Пройденный шаг — тем же синим, что и всё остальное. Зелёным он был с
   17.08.2026 и оставался единственным зелёным пятном в приложении. */
.order-step.is-done::before {
  background: var(--accent);
}

.order-step:not(:last-child)::after {
  content: "";
  position: absolute;
  /* Линия начинается сразу под точкой: 5 сверху плюс её диаметр 10. */
  top: 16px;
  bottom: 2px;
  left: 8.5px;
  width: 1.5px;
  background: rgba(var(--ink), 0.12);
}

.order-step.is-done:not(:last-child)::after {
  background: #b3d8ff;
  background: color-mix(in srgb, var(--accent) 30%, #ffffff);
}

.order-step strong {
  font-size: 16px;
  font-weight: 400;
}

.order-step:not(.is-done) strong {
  color: rgba(var(--ink), 0.36);
  font-weight: 400;
}

.order-step span {
  flex: 0 0 auto;
  color: rgba(var(--ink), 0.4);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* Числа и вложения — просто строки, без панели вокруг. */
.order-panel {
  padding: 0;
}

/* Подпись слева, значение своей колонкой — та же строка, что на странице
   позиции (docs/POCHERK.md). */
.order-fact {
  display: grid;
  grid-template-columns: 42% 1fr;
  align-items: baseline;
  gap: 16px;
  padding: 12px 0;
  font-size: 16px;
}

.order-fact span {
  color: rgba(var(--ink), 0.5);
  color: rgba(var(--ink), 0.62);
}

.order-fact strong {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Карта — одной широкой кнопкой: это единственное действие на странице, и
   строкой в списке оно бы потерялось. */
/* «Показать на карте» — кнопка того же роста и угла, что везде. */
.order-wide {
  display: block;
  width: 100%;
  height: 44px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--accent);
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================================
   ПУСТОЙ ЭКРАН И ДОКУМЕНТЫ
   ============================================================================ */

/* Пустой экран заказов объясняет, а не сообщает «Пусто». Прежний серый квадрат
   ничего не давал человеку, у которого заказов ещё не было. Место для такого
   объяснения именно здесь: блок исчезает сам, как только появится первый заказ,
   и списку не мешает. Постоянная шапка с крупной иконкой наверху экрана
   обсуждалась и отвергнута — она отодвигала бы список при каждом заходе, а
   слово «Заказы» на этом экране и так сказано трижды. */
.orders-blank {
  padding: 40px 12px;
  color: rgba(var(--ink), 0.45);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}


.orders-list {
  display: grid;
  gap: 16px;
}

/* Строка вложения. Слева имя, справа размер — а на время отправки там же
   стоит ответ: «Отправляем…», потом «Отправлено в Telegram». */
.order-file {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.order-file + .order-file {
  border-top: 1px solid var(--hair);
}

.order-file__name {
  color: var(--accent);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-file__note {
  flex: 0 0 auto;
  color: rgba(var(--ink), 0.38);
  font-size: 13px;
}