/* Кабинет ОптМастер — ЭКРАНЫ КЛИЕНТА: заказы и лента статусов, счёт, баланс, справка.

   Третий слой каскада (порядок — `lib/layout.mjs::STYLESHEETS`). Всё, что нужно одному-двум
   экранам, а не всему кабинету. Токены и примитивы берутся из `cabinet.css` и
   `components.css`; правило, которое захотелось написать здесь и применить везде, — признак,
   что ему место слоем выше.

   Ни одной таблицы: список заказов, лента статусов и счёт — карточки и списки.
   Ширина колонок нигде не задана в пикселях жёстко, поэтому на 320px ничего не уезжает
   в горизонтальную прокрутку — ровно то, чем неудобен кабинет Meest. */

/* Обёртка экрана без собственной рамки: карточки внутри рисуют её сами. */
.card-plain { margin: 0; }

.list-plain {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
/* Карточки в списке стыковались вплотную: зазора не было ни одного, и на светлом фоне это
   читалось как одна длинная карточка. С радиусом 14 px и тенью стало видно сразу. */
.list-plain > li + li { margin-top: 12px; }

/* Карточка заказа в списке переехала в `route.css` вместе с мини-лентой маршрута (UI-2);
   здесь остался только акцент суммы — он же красит сводку дашборда. */
.ord-due { color: var(--accent-ink); }

.tag-final {
  border-color: var(--muted);
  color: var(--muted);
}

/* Лента статусов: слева подпись, справа дата. Пройденное — обычным цветом,
   текущее — жирным с меткой, будущее — приглушённым. */
.trail-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trail-step {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--line);
  font-size: 15px;
}
.trail-done { border-left-color: var(--ok); }
.trail-now {
  border-left-color: var(--ok);
  font-weight: 700;
}
.trail-todo { color: var(--muted); }
/* Шаг позади текущего, о котором нет события: пройден он или нет — мы не знаем, и рисовать
   его так же, как подтверждённый датой, значит утверждать больше, чем известно. */
.trail-skip {
  border-left-color: var(--line);
  color: var(--muted);
}
.trail-stop {
  border-left-color: var(--danger);
  color: var(--danger);
  font-weight: 700;
}
.trail-when {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}
/* Примечание менеджера к шагу («номер ТТН», «борт затримали») — своей строкой под шагом:
   в пару «подпись | дата» оно не помещается, а рядом с датой читается как её часть. */
.trail-note {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

/* Позиции заказа: ссылка на китайскую площадку длинная, ломаем её принудительно —
   иначе она растягивает карточку и возвращает горизонтальную прокрутку. */
.item + .item {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.item-head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}
.item-link {
  margin: 6px 0 0;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.item-note,
.item-sum {
  margin: 6px 0 0;
  font-size: 14px;
}

/* Счёт: рамка «требует действия», реквизиты моноширинные (их переписывают руками).
   Сама сумма переехала в чек UI-3 (`order.css`, `.rc-total dd`) — правило `.inv-total`
   удалено вместе с разметкой, которая его носила: мёртвый селектор в слое, который никто
   не читает целиком, живёт годами и однажды «объясняет» чужой элемент. */
.inv-due { border-color: var(--accent); }
.inv-status {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}
.inv-req code {
  font-size: 15px;
  overflow-wrap: anywhere;
}
.inv-req-missing { font-size: 15px; }
.inv-claimed {
  margin: 12px 0 0;
  color: var(--ok);
  font-size: 14px;
}
.inv form { margin-top: 12px; }
.inv .btn { width: auto; }

/* Плашка о выставленном счёте: единственный канал, который сегодня доходит до клиента,
   поэтому она заметна, но не красная — это не ошибка, а деньги к оплате. */
.flash-due {
  border-color: var(--accent);
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
}

.dash-sums {
  margin: 0 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  font-size: 15px;
}

/* Адресная книга: список слева, форма добавления справа — та же сетка, что у главной
   (`.dash-grid` в `route.css`), и складывается она в одну колонку в той же точке 720px.
   Форма справа шире 360 px не нужна: в ней пять полей, а `.card-narrow` под списком
   оставляла правую половину экрана пустой и уводила саму форму от центра колонки. */
.rcp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}
.rcp-col { min-width: 0; }
.rcp-add h2 { margin-top: 0; }
@media (max-width: 720px) {
  .rcp-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.rcp-head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.rcp p { margin: 6px 0 0; }
.rcp .row-actions { margin-top: 12px; }
.rcp .row-actions form { margin: 0; }
.rcp .row-actions .btn { width: auto; }
/* ---------------------------------------------------------------- заказ (C-1)

   Заголовки внутри .card — своя иерархия под шапку экрана (h1 уже стилизован выше):
   h2 отделяет крупные блоки экрана (товары / оформлення), h3 — подблоки формы оформления. */
.card h2 { font-size: 18px; margin: 28px 0 12px; }
.card h2:first-of-type { margin-top: 0; }
/* Разрядка .06em — идиома сайта: у его надзаголовков она держится в .04–.08em. */
.card h3 { font-size: 13px; color: var(--muted); margin: 20px 0 8px; text-transform: uppercase; letter-spacing: .06em; }

.order-items { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.order-item-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-size: 14px;
}
.order-item-card form { margin: 0; }
/* Компактная кнопка строки — по `.btn`, а НЕ по имени варианта: правило было завязано на
   `.btn-quiet`, UI-4 переименовал кнопку удаления в `.btn-risk`, и селектор перестал матчить
   что-либо вовсе. Кнопка вернулась к полному размеру и на 320 px съедала половину строки.
   Найдено аудитами вёрстки и доступности UI-4 — в файле этого не видно, правило-то верное. */
.order-item-card .btn { width: auto; padding: 6px 10px; font-size: 13px; }
/* Длинная ссылка на площадку не имеет пробелов и распирает flex-строку: без `min-width: 0`
   у колонки описания карточка вылезает за 320 px в горизонтальную прокрутку — ровно то,
   чего в кабинете нет нигде. */
.order-item-card > div { min-width: 0; }
.order-item-card a { overflow-wrap: anywhere; }

fieldset { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 12px 14px 2px; margin: 0 0 16px; }
fieldset legend { font-size: 13px; color: var(--muted); padding: 0 6px; }

.order-calc {
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  font-size: 14px;
}
.order-calc p { margin: 0 0 8px; }
.order-calc p:last-child { margin-bottom: 0; }

/* — баланс (C-2). Списком, а не таблицей: строка истории на телефоне должна переноситься,
     а не уезжать в горизонтальную прокрутку. */
/* Надзаголовок над суммой — та же идиома, что у денежной карточки главной (`.pay-kicker`):
   «Баланс» в заголовке отвечает, какой это экран, а не что это за число. */
.balance-kicker {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Главное число экрана — Oswald, как ВСЕ деньги кабинета: сумма к оплате на главной
   (`.pay-sum`), бонус там же (`.bonus-sum`), итог чека (`.rc-total dd`). Здесь стояло 32 px
   без гарнитуры, то есть Inter: единственный экран, чья тема — одно число, набирал это
   число не тем шрифтом. В файле этого не видно — правило верное, отсутствует другое. */
.balance-sum {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 34px;
  line-height: 1;
  margin: 8px 0 4px;
}
/* `<b>` внутри — это `font-weight: bolder`, то есть от родительских 600 браузер уходит к 900
   и подставляет ближайший доступный Oswald (700). Сумма на балансе выходила ЖИРНЕЕ, чем
   сумма к оплате на главной, хотя это одна и та же роль. Найдено аудитом вёрстки UI-4. */
.balance-sum b { font-weight: inherit; }
/* Зелёным — только когда деньги ЕСТЬ. Зелёный ноль сообщает «всё хорошо» там, где сказать
   нечего; тот же приём, что в UI-2 с доставленной посылкой, которой оранжевый сегмент
   означал бы «требует вашего действия». */
.balance-has .balance-sum { color: var(--ok); }
.balance-expiry { margin-top: 8px; }
.balance-cta { margin: 16px 0; }
.balance-h2 {
  font-size: 17px;
  margin: 24px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.balance-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.balance-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.balance-row:last-child { border-bottom: 0; }
.balance-row .form { margin-top: 0; }
.balance-row .btn { width: auto; }
.balance-row .muted { font-size: 14px; }
.balance-amount {
  font-weight: 600;
  white-space: nowrap;
  color: var(--ok);
}
.balance-minus { color: var(--muted); }

/* — довідка і калькулятор (C-6). Списками, а не таблицями — той самий принцип, що в балансі:
     рядок повинен переноситись на телефоні, а не втікати в горизонтальну прокрутку. */
.help-steps { padding-left: 20px; margin: 0 0 20px; }
.help-steps li { margin-bottom: 4px; }
.help-list { list-style: none; margin: 0 0 20px; padding: 0; }
.help-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.help-list li:last-child { border-bottom: 0; }
.help-links { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 6px; }