/* Кабинет ОптМастер — ГЛАВНАЯ: лента маршрута, карточка заказа в списке, колонка денег.

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

   ⚠️ Контраст на тёмном считается ПРОТИВ ТЁМНОГО. Фирменный синий `--brand` на #141d28
   даёт 2.84 и не годится ни тексту (4.5), ни точке шага, которая несёт информацию (3.0).
   Поэтому точки: пройденная белая, текущая оранжевая (5.09), будущая `--on-dark-dim` (3.77).

   ⚠️ И второе, что легко перепутать: `--on-dark-dim` посчитан ПО ПОРОГУ ТОЧКИ (3.0), а не
   текста. Первая редакция красила им подписи и даты шагов — то есть текст 11–12 px с
   контрастом 3.77 при норме 4.5. Подписи здесь набраны `--on-dark-muted` (8.09), а «пусто/
   пройдено» кодируют точка и вес шрифта. Найдено аудитом вёрстки UI-2. */

/* ---------------------------------------------------------------- лента маршрута

   Внутри ширины контента, а не во всю ширину экрана, как в макете концепта: полоса во всю
   ширину обязана выходить за `main.wrap`, то есть ломать каркас страницы ради одного экрана.
   Тёмная карточка среди белых выделяется и так — она единственная. */

.route {
  background: var(--surface-dark);
  color: var(--on-dark);
  border-color: var(--surface-dark);
  margin-bottom: 16px;
}
.route-kicker {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
/* Статус — самое крупное на экране: ради ответа «де посилка» человек сюда и заходит. */
.route-status {
  margin: 8px 0 0;
  font-size: 28px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.route-meta {
  margin: 10px 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  font-size: 14px;
  color: var(--on-dark-muted);
}
.route-num {
  color: var(--on-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--on-dark-dim);
}
.route-eta { color: var(--accent); }
/* «Дату сообщим позже» — не акцент: это отсутствие данных, а не действие клиента. */
.route-eta-none { color: var(--on-dark-muted); }
.route-stop {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--accent);
}
.route-empty .route-status { font-size: 22px; }
.route-empty .row-actions { margin-bottom: 0; }

/* Кольцо фокуса на тёмном — своё, как в шапке (`cabinet.css`): Chromium рисует двухцветное
   и его видно, Firefox и Safari — однотонное, которое на #141d28 сливается с фоном. UI-1
   завёл это правило для шапки и меню; новые тёмные поверхности UI-2 (лента-герой и панель
   «До сплати») его не унаследовали, и фокус пропадал на кнопке «Я оплатив» — единственном
   денежном действии экрана. Найдено аудитом доступности UI-2. */
.route a:focus-visible,
.pay a:focus-visible,
.pay button:focus-visible {
  outline: 2px solid var(--on-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Семь шагов в строку. Линия слева от точки, а не одна общая с процентной заливкой:
   «пройденность» кодируется цветом самого сегмента, и рассинхронизироваться линии
   с точками негде. */
.rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.rail-step {
  position: relative;
  padding-top: 22px;
  text-align: center;
  min-width: 0;
}
/* Отрезок пути ДО этого шага. У первого его нет — маршрут начинается здесь. */
.rail-step + .rail-step::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--on-dark-dim);
}
.rail-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--on-dark-dim);
}
.rail-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--on-dark-muted);
  padding: 0 4px;
}
.rail-when {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--on-dark-muted);
}

.rail-step.is-done .rail-dot,
.rail-step.is-done + .rail-step::before { background: var(--on-dark); }
.rail-step.is-done .rail-label { color: var(--on-dark); }

/* Текущий шаг — оранжевый с гало: единственная точка, которую ищут глазами. */
.rail-step.is-now .rail-dot {
  background: var(--accent);
  width: 18px;
  height: 18px;
  top: -2px;
  box-shadow: 0 0 0 5px rgba(236, 97, 24, .22);
}
.rail-step.is-now + .rail-step::before { background: var(--on-dark-dim); }
.rail-step.is-now .rail-label {
  color: var(--on-dark);
  font-weight: 600;
}
.rail-step.is-now .rail-when { color: var(--accent); }

/* Шаг позади текущего, о котором нет события: менеджер перевёл заказ через голову.
   Пустая точка — «мы не знаем», а не «пройдено». */
.rail-step.is-skip .rail-dot {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--on-dark-dim);
}

/* В режиме принудительных цветов (Windows High Contrast) фоны точек перекрашиваются
   системой, и все семь шагов становятся одинаковыми — положение посылки исчезает.
   Системный цвет выделения возвращает различие. */
@media (forced-colors: active) {
  .rail-step.is-now .rail-dot,
  .rail-step.is-done .rail-dot { background: Highlight; }
  .rail-step.is-todo .rail-dot,
  .rail-step.is-skip .rail-dot { background: ButtonFace; }
}

/* ---------------------------------------------------------------- карточка заказа в списке */

/* Кликабельна целиком: попасть пальцем в шестизначный номер на телефоне — промах через раз.
   Доступное имя задано на самой ссылке («Замовлення OM-00002»), см. `orderRow`. */
.ord-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.ord-link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: var(--radius);
}
/* `.ord-head` и `.ord-num` — в `components.css`: ими пользуется и служебный список. */
.ord-what {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--muted);
}
.ord-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  align-items: center;
  margin-top: 12px;
  font-size: 14px;
}
/* Заказ с выставленным счётом обведён акцентом — это единственная карточка списка,
   которая требует действия, а не только сообщает состояние. Тон затемнённый: фирменный
   #ec6118 даёт к фону страницы 2.92 при пороге 3.0 для границы, несущей смысл (WCAG 1.4.11),
   а `--accent-ink` — 4.70. */
.ord-pay { border-color: var(--accent-ink); }

/* Мини-лента: семь сегментов без подписей (озвучены одной строкой — `miniTrail`). */
.mini {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 12px 0 0;
}
.mini i {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--line);
}
.mini i.is-done { background: var(--ok); }
.mini i.is-now { background: var(--accent); }
/* Пропущенный шаг — рамкой, а не заливкой: «не знаем», а не «пройдено». */
.mini i.is-skip { box-shadow: inset 0 0 0 1px var(--muted); }
.mini-stop i.is-done { background: var(--muted); }
/* Выданная посылка: путь пройден целиком, действий от клиента не ждут. */
.mini-done i.is-now { background: var(--ok); }

@media (forced-colors: active) {
  .mini i.is-done,
  .mini i.is-now { background: Highlight; }
  /* Без этих двух «не пройдено» и «пропущено» сливаются с карточкой — у ленты-героя выше
     все четыре состояния замаплены, а у мини-ленты было только два. */
  .mini i.is-todo,
  .mini i.is-skip { background: ButtonFace; }
  .mini i.is-skip { border: 1px solid ButtonText; }
}

/* ---------------------------------------------------------------- раскладка главной */

.dash-grid {
  display: grid;
  /* Раскладка задаётся ОБЛАСТЯМИ, а не порядком следования: в разметке деньги идут первыми
     (так они читаются и обходятся клавиатурой на телефоне, где стоят первым экраном), а на
     широком экране становятся правой колонкой. `order` дал бы тот же вид, но развёл бы
     визуальный порядок с порядком озвучки — WCAG 1.3.2. */
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-template-areas: 'orders money';
  gap: 20px;
  align-items: start;
}
.dash-orders { grid-area: orders; }
.dash-money { grid-area: money; }
.dash-col { min-width: 0; }
.dash-h2 {
  margin: 0 0 12px;
  font-size: 18px;
}
.dash-money > * + * { margin-top: 12px; }

/* ---------------------------------------------------------------- деньги */

.pay {
  background: var(--surface-dark);
  border-color: var(--surface-dark);
  color: var(--on-dark);
}
.pay-kicker {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.pay .pay-kicker { color: var(--on-dark-muted); }
.pay-sum {
  margin: 10px 0 0;
  font-family: var(--font-head);
  /* Начертание явно: Oswald самохостится в 500/600/700, абзац принёс бы сюда 400 —
     браузер подставил бы ближайшее, и сумма набралась бы не тем весом. */
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
}
.pay-note {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--on-dark-muted);
}
/* Кнопка «Я оплатив» — оранжевая с тёмной подписью: белая на этом оранжевом даёт 3.35
   и AA не проходит (та же пара, что у кнопки в шапке). */
.pay-btn {
  display: flex;
  width: 100%;
  margin-top: 14px;
  background: var(--accent);
  color: var(--ink);
}
.pay-claimed {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--on-dark);
}
.pay-open { margin: 12px 0 0; font-size: 14px; }
.pay .pay-open a { color: var(--accent); }
.pay form { margin: 0; }

.pay-empty {
  margin: 8px 0 4px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
}
.pay-none .muted { font-size: 13px; margin: 0; }

.bonus-sum {
  margin: 8px 0 4px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 26px;
  color: var(--ok);
}
.bonus-card .muted { margin: 0; font-size: 13px; }
.bonus-note {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.quick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 15px;
}
/* Тач-зона: голая строка ссылки — 22 px при минимуме 24 (WCAG 2.5.8), а на телефоне этот
   блок ещё и ближе к пальцу, чем на десктопе (колонка денег поднимается наверх). */
.quick a { padding: 6px 0; }

/* ---------------------------------------------------------------- телефон

   720px — та же точка перелома, что у оболочки (`cabinet.css`): ниже неё меню уходит вниз
   экрана, а колонки складываются в одну. */
@media (max-width: 720px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
    /* Одна колонка — области встают в порядке разметки: деньги, потом заказы. Ровно тот
       порядок, который просит концепт A («скільки платити → де посилки»), и ровно тот,
       в котором страницу читает скринридер. */
    grid-template-areas: 'money' 'orders';
    gap: 16px;
  }

  .route-status { font-size: 24px; }
  .route-meta { margin-bottom: 16px; }

  /* Лента остаётся ТА ЖЕ: подписи и даты прячутся визуально, точки и отрезки — нет.
     Семь подписей по 45 px не читаются, а вторая, «мобильная» разметка ленты означала бы
     два места, где заводят шаг маршрута. Скринридер по-прежнему читает все семь. */
  .rail-label,
  .rail-when {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .rail-step { padding-top: 18px; }
}