/* Кабинет ОптМастер — КАРТОЧКА ЗАКАЗА: блок «Зараз» и чек по строкам (UI-3).

   Пятый слой каскада (порядок — `lib/layout.mjs::STYLESHEETS`), между главной и островами
   админки. Своим файлом, а не строками в `route.css`, по арифметике: `route.css` — 374
   строки при жёстком пороге 500, и карточка заказа с чеком туда не помещается. Граница
   проведена по экрану: `route.css` рисует ПУТЬ посылки и главную вокруг него, здесь —
   один экран заказа. Общая для обоих лента статусов остаётся в `screens.css` (`.trail-*`):
   её показывает и карточка менеджера, а `admin.css` идёт последним и её не трогает.

   ⚠️ Пары контраста этого файла (все — на белой карточке #fff, фон страницы #edf0f4):
     `--muted`      #4a5765 → 7.42  подписи строк, кикер, «после взвешивания»;
     `--accent-ink` #b34a1b → 5.37  дата прибытия и итог к оплате (4.70 — это против ФОНА
       СТРАНИЦЫ, а обе строки лежат внутри белой карточки; поймано аудитом доступности UI-3);
     `--ok`         #0f7b4f → 5.29  строка бонуса (она уменьшает сумму — это не тревога);
     `--ink` на `--accent` #ec6118 → 5.15 кнопка «Я оплатив», как в шапке и на главной:
       белая подпись на этом оранжевом даёт 3.35 и AA не проходит. */

/* ---------------------------------------------------------------- шапка карточки */

/* Номер заказа — заголовок страницы, но НЕ главное на ней: концепт A ставит крупнее статус
   («де посилка» — то, ради чего карточку открывают). Живой проход UI-3 показал обратное:
   браузерный `h1` в 2em оказался крупнее статуса, и экран читался как «номер, а под ним
   мелко — где посылка». */
.ord-h1 { font-size: 26px; }

/* Номер, дата и состав одной строкой: три коротких факта, которые на телефоне переносятся
   по одному, а не рвут слова внутри факта. Разделитель рисует CSS, а не текст разметки —
   иначе скринридер читает «средняя точка» между каждой парой. */
.ord-sub {
  margin: 4px 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 14px;
  color: var(--muted);
}
.ord-sub > span + span::before {
  content: '·';
  margin-right: 10px;
  color: var(--line);
}

/* ---------------------------------------------------------------- «Зараз» */

.now { margin-bottom: 16px; }
.now-kicker {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Статус — самое крупное на экране, как лента-герой на главной: ради ответа «де посилка»
   человек сюда и заходит. Крупнее номера заказа над ним — иначе экран отвечает сначала на
   «яке замовлення», хотя открывают его не за этим.

   ⚠️ Селектор ДВУСОСТАВНЫЙ (`.now .now-status`) не для красоты: рядом в `screens.css` живёт
   `.card h2 { font-size: 18px }` со специфичностью (0,1,1), и одиночный `.now-status`
   (0,1,0) ему проигрывает — порядок файлов в каскаде тут не помогает, специфичность
   сравнивается раньше источника. Первая редакция UI-3 объявила 30px и получила на экране
   18px: статус оказался МЕЛЬЧЕ номера заказа, то есть ровно тем дефектом, который правка
   и закрывала. Поймано аудитом вёрстки UI-3 (P0). */
.now .now-status {
  margin: 6px 0 0;
  font-size: 30px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.now-meta {
  margin: 8px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  font-size: 14px;
  color: var(--muted);
}
.now-step { font-weight: 600; color: var(--ink); }
/* Разделитель между фактами — тот же приём, что у строки под номером заказа. Без него три
   факта («крок», «далі», «орієнтовно») держатся друг от друга только пробелом, и при
   переносе на узком экране или при 200% масштабе строка читается как один текст. */
.now-meta > * + *::before {
  content: '·';
  margin-right: 14px;
  color: var(--line);
}
/* Следующий шаг — обычным тоном строки: он подсказка, а не факт о состоянии. Правило
   объявлено явно, хотя совпадает с наследуемым: в этом ряду у каждого факта своё, и
   единственный «просто наследующий» участник читается как забытая строка. */
.now-next { color: var(--muted); }
/* Дата прибытия — единственная цифра, ради которой открывают карточку в дороге. */
.now-eta { color: var(--accent-ink); }
/* «Дату сообщим позже» — не акцент: это отсутствие данных, а не действие клиента. */
.now-eta-none,
.now-stop { color: var(--muted); }

/* ---------------------------------------------------------------- чек

   Геометрия строк (`.rc`, `.rc-line`, `.rc-total`) переехала в `components.css`: с UI-4 её
   рисует и калькулятор — тот же перечень «товар / комісія / доставка / разом», только без
   счёта. Здесь остались модификаторы, которые имеют смысл ТОЛЬКО у чека. Разрез сделан
   ровно по той границе, по которой UI-2 вернул `.ord-head` в общий слой: правило, которым
   пользуется второй экран, не может жить в файле одного экрана — первый же спринт, сузивший
   селекторы под `.inv`, снял бы вёрстку соседу молча. */

/* Бонус уменьшает сумму — зелёным, тем же, что «оплачено» и приход в балансе. */
.rc-bonus dd { color: var(--ok); }
/* Сумма к оплате — акцентная: это единственное число экрана, которое требует действия.
   Итог невыставленного счёта («Разом за замовленням») остаётся обычным — платить по нему
   ещё нечего, и красить его как долг значило бы требовать денег раньше времени. */
.inv-due .rc-total dd { color: var(--accent-ink); }
.rc-note { margin: 12px 0 0; }

/* Подсказка «вкажіть саме номер замовлення» — своей строкой под реквизитом. В строку с
   моноширинным номером она слипается в одно предложение, а на телефоне ещё и переносится
   по слову вдоль колонки значения (найдено живым проходом UI-3, съёмка на 390 px). */
.inv-req .fld-hint { display: block; margin-top: 4px; }

/* Подпись под кнопкой оплаты — своей строкой. `.fld-hint` из `components.css` — строчный
   `span`, и на 320–500 px он слипается с кнопкой в одно предложение: «Я оплатив Це». Ту же
   правку `.inv-req` получил выше; здесь она нужна по той же причине и в том же файле, но
   селектор другой — форма, а не список реквизитов. Найдено аудитом вёрстки UI-3. */
.inv form .fld-hint {
  display: block;
  margin-top: 8px;
}

/* Кнопка «Я оплатив» — оранжевая с тёмной подписью, как на главной: это то же действие,
   и выглядеть на двух экранах по-разному оно не должно. */
.inv-pay {
  background: var(--accent);
  color: var(--ink);
}
/* Своё кольцо фокуса — как у денежной кнопки на главной (`route.css`). Там оно понадобилось
   на тёмной поверхности, здесь причина другая: на оранжевой заливке браузерное кольцо по
   умолчанию тоже тёплое и различается плохо. Единственное денежное действие экрана обязано
   быть видно с клавиатуры. */
.inv-pay:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .ord-h1 { font-size: 22px; }
  .now .now-status { font-size: 26px; }
  /* Реквизиты — в одну колонку: на 390 px пара «подпись | значение» оставляет значению
     около половины ширины, и IBAN рвётся на три строки посреди цифр. Его переписывают
     руками в банковское приложение — рваный он читается хуже всего на этом экране.
     Только для реквизитов чека, а не для `.facts` вообще: тот же примитив стоит на
     профиле и получателе, где значения короткие и пара в строку удобнее. */
  .inv-req {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .inv-req dd + dt { margin-top: 10px; }
}