/* ==========================================================================
   AirCrewCentral — биржа контрактов
   Источник правды: C:\xampp\update\project-2026\02-DESIGN-SYSTEM.md

   Все классы с префиксом .acc-. Цвета только из токенов, ни одного
   жёсткого — работает в обеих темах.

   Золото здесь ровно в одном месте: сумма выплаты. Это не награда в
   строгом смысле, но и не навигация — это то, ради чего контракт берут.
   Единственное отступление от роли, и оно осознанное.
   ========================================================================== */

.acc-cb {
  padding: clamp(18px, 2.4vw, 32px);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card);
  background: var(--acc-bg-800);
}

.acc-cb__head {
  display: flex;
  align-items: flex-start;
  gap: var(--acc-sp-6);
  margin-bottom: var(--acc-sp-4);
}

.acc-cb__head > div:first-child { flex: 1 1 auto; min-width: 0; }

.acc-cb__rep {
  flex: 0 0 auto;
  min-width: 190px;
  text-align: right;
  padding: 10px 18px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-700);
}

/* Дробь «62.5/100» — знаменатель мельче: он не меняется и нужен
   только чтобы понять шкалу с первого взгляда. */
.acc-cb__rep-max {
  font-size: 13px;
  font-weight: 400;
  color: var(--acc-text-mute);
  letter-spacing: 0;
}

.acc-cb__rep-num {
  display: block;
  font-family: var(--acc-font-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: var(--acc-cyan);
  font-variant-numeric: tabular-nums;
}

.acc-cb__rep-lab {
  display: block;
  margin-top: 3px;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

/* Полоса до следующего уровня.

   СЧИТАЕТСЯ ВНУТРИ СТУПЕНИ, а не от нуля лестницы — см. levelProgress().
   От нуля полоса на четвёртом уровне почти не двигалась бы, а полоса,
   которая не двигается, хуже отсутствующей: она говорит «стоишь». */
.acc-cb__rep-bar {
  height: 4px;
  margin: 8px 0 5px;
  border-radius: 2px;
  background: var(--acc-bg-900);
  overflow: hidden;
}

.acc-cb__rep-bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--acc-cyan-dim), var(--acc-cyan));
  transition: width .4s ease;
}

.acc-cb__rep-next,
.acc-cb__rep-pay {
  display: block;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: .6px;
  color: var(--acc-text-mute);
}

.acc-cb__rep-pay { color: var(--acc-gold); margin-top: 2px; }

.acc-cb__delta--up   { color: var(--acc-cyan); }
.acc-cb__delta--down { color: var(--acc-err); }

/* ПОЧЕМУ ПРОШЛЫЙ РЕЙС НЕ ЗАСЧИТАЛСЯ.

   Самый заметный блок на странице «мои контракты» намеренно: он
   отвечает на вопрос, который иначе задать некому — «я же слетал,
   почему полоса не сдвинулась». Раньше ответ лежал только в логе. */
.acc-cb__reject {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: var(--acc-sp-3) 0;
  padding: 12px 16px;
  border: 1px solid var(--acc-err);
  border-left-width: 3px;
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-700);
}

.acc-cb__reject-lab {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc-err);
}

.acc-cb__reject-why { color: var(--acc-text); }

/* Что делать дальше — обязательная часть. Отказ без выхода читается
   как приговор, а контракт при этом жив. */
.acc-cb__reject-fix {
  font-size: 13px;
  color: var(--acc-text-dim);
}

.acc-cb__notice {
  margin-bottom: var(--acc-sp-4);
  padding: 12px 16px;
  border: 1px solid var(--acc-gold-dim);
  border-left-width: 3px;
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-gold-soft);
  font-family: var(--acc-font-text);
  font-size: 13.5px;
  color: var(--acc-text);
}

/* --- Фильтры ------------------------------------------------------------- */

.acc-cb__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--acc-sp-3);
  margin-bottom: var(--acc-sp-6);
  padding: var(--acc-sp-4);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-700);
}

.acc-cb__filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.acc-cb__filters label > span {
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-cb__filters select,
.acc-cb__filters input[type="number"] {
  min-width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-800);
  color: var(--acc-text);
  font-family: var(--acc-font-text);
  font-size: 13.5px;
}

/* Рамка поля ввода обязана быть заметнее декоративной: по ней человек
   понимает, куда кликать. В протоколе это отмечено как известная
   недоработка карточек — здесь исправлено. */
.acc-cb__filters select:focus,
.acc-cb__filters input:focus {
  outline: none;
  border-color: var(--acc-cyan);
  box-shadow: 0 0 0 3px var(--acc-cyan-soft);
}

.acc-cb__check {
  flex-direction: row !important;
  align-items: center;
  gap: 7px !important;
  padding-bottom: 9px;
}

.acc-cb__check span {
  font-family: var(--acc-font-text) !important;
  font-size: 13px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--acc-text) !important;
}

.acc-cb__actions {
  display: flex;
  gap: var(--acc-sp-2);
  margin-left: auto;
}

.acc-cb__count,
.acc-cb__none {
  margin: 0 0 var(--acc-sp-4);
  font-family: var(--acc-font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-cb__none {
  font-family: var(--acc-font-text);
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
}

/* --- Карточка ------------------------------------------------------------ */

.acc-cb__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: var(--acc-sp-4);
}

.acc-cb__card {
  display: flex;
  flex-direction: column;
  gap: var(--acc-sp-3);
  padding: var(--acc-sp-4);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-700);
  transition: border-color var(--acc-dur-base) var(--acc-ease);
}

.acc-cb__card:hover { border-color: var(--acc-cyan-dim); }

/* Недоступный контракт приглушаем, но не прячем: видеть, к чему растёшь,
   полезно. Прятать — значит скрывать смысл репутации. */
.acc-cb__card--locked { opacity: 0.62; }
.acc-cb__card--locked:hover { border-color: var(--acc-glass-brd); }

.acc-cb__card-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--acc-sp-2);
}

.acc-cb__type {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--acc-text);
}

.acc-cb__cat {
  padding: 2px 9px;
  border: 1px solid var(--acc-cyan-dim);
  border-radius: var(--acc-r-pill);
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--acc-cyan);
}

.acc-cb__ref {
  margin-left: auto;
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.5px;
  color: var(--acc-text-mute);
}

/* --- Цифры --------------------------------------------------------------- */

.acc-cb__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--acc-sp-3);
  margin: 0;
  padding-top: var(--acc-sp-3);
  border-top: 1px solid var(--acc-glass-brd);
}

.acc-cb__facts dt {
  font-family: var(--acc-font-mono);
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
  font-weight: 400;
}

.acc-cb__facts dd {
  margin: 2px 0 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 600;
  color: var(--acc-text);
  font-variant-numeric: tabular-nums;
}

/* ЦВЕТА ЧИСЕЛ В СПИСКЕ ФАКТОВ.

   Селектор обязан быть ВЛОЖЕННЫМ, а не одним классом. `.acc-cb__facts dd`
   выше по весу (класс + тег), чем `.acc-cb__pay` (один класс), и просто
   класс молча проигрывает — цвет не применяется, ошибки при этом нет
   нигде.

   Раньше это лечилось !important у суммы. Так и жило до 15.08, когда
   выяснилось, что добавленные позже `.acc-cb__rep-gain` и
   `.acc-cb__too-heavy` в ту же ловушку и попали — а заметить это можно
   было только глядя на карточку и зная, какого цвета ждёшь.

   !important убран: он лечит симптом и передаёт ловушку следующему,
   кто добавит сюда цвет. */
.acc-cb__facts dd.acc-cb__pay { color: var(--acc-gold); }

/* Прибавка репутации — золотом, но мельче: вторая награда, не главная. */
.acc-cb__facts dd.acc-cb__rep-gain { color: var(--acc-gold); }

/* Тоннаж, который флоту не по силам. */
.acc-cb__facts dd.acc-cb__too-heavy { color: var(--acc-err); }

/* Стоимость груза — приглушённо и мельче денег пилота.

   До 15.08 это число стояло на месте «Payout» и читалось как заработок.
   Прятать его совсем было бы удобнее для ощущений, но нечестно: пилот
   всё равно узнает настоящую сумму и решит, что его обманули. Пусть
   стоит рядом, но видно, что оно про груз, а не про него. */
.acc-cb__facts dd.acc-cb__freight {
  font-size: var(--acc-fs-14);
  font-weight: 400;
  color: var(--acc-text-mute);
}

/* Замков может быть два сразу — репутация и флот. Разрешаем перенос,
   чтобы второй не выдавливал карточку. */
.acc-cb__card-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--acc-sp-2) var(--acc-sp-3);
  margin-top: auto;
  padding-top: var(--acc-sp-2);
}

.acc-cb__locked,
.acc-cb__soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--acc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--acc-text-mute);
}

/* --- Цепочка плеч -------------------------------------------------------- */

.acc-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: var(--acc-sp-3) 0;
  list-style: none;
}

.acc-chain__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-800);
  min-width: 62px;
}

.acc-chain__icao {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--acc-text);
}

.acc-chain__tag {
  font-family: var(--acc-font-mono);
  font-size: 8px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
  white-space: nowrap;
}

/* Перелёт между точками. Линия со стрелкой сделана рамками и
   псевдоэлементом — SVG здесь не нужен, а текст остаётся текстом. */
.acc-chain__hop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 84px;
  padding: 0 var(--acc-sp-2) 4px;
}

.acc-chain__hop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 10px;
  top: 50%;
  height: 1px;
  background: var(--acc-glass-brd);
}

.acc-chain__hop::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid var(--acc-glass-brd);
  border-right: 1px solid var(--acc-glass-brd);
  transform: translateY(-50%) rotate(45deg);
}

.acc-chain__nm,
.acc-chain__load {
  position: relative;
  padding: 0 4px;
  background: var(--acc-bg-700);
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--acc-text-dim);
  white-space: nowrap;
}

.acc-chain__load { color: var(--acc-text-mute); }
.acc-chain__load--empty { font-style: italic; }

/* Состояния: пройдено, ждёт, провалено. По одному взгляду видно,
   где пилот сейчас. */
.acc-chain__node--done { border-color: var(--acc-cyan-dim); }
.acc-chain__node--done .acc-chain__icao { color: var(--acc-cyan); }
.acc-chain__hop--done::before,
.acc-chain__hop--done::after { border-color: var(--acc-cyan); background: var(--acc-cyan); }
.acc-chain__hop--done::after { background: none; }

.acc-chain__node--fail { border-color: var(--acc-err); }
.acc-chain__node--fail .acc-chain__icao { color: var(--acc-err); }

/* --- Узкие экраны -------------------------------------------------------- */

@media (max-width: 767.98px) {
  .acc-cb__grid { grid-template-columns: 1fr; }
  .acc-cb__facts { grid-template-columns: repeat(2, 1fr); }
  .acc-cb__head { flex-direction: column; }
  .acc-cb__rep { align-self: stretch; text-align: left; }
  .acc-cb__filters label { flex: 1 1 140px; }
  .acc-cb__actions { margin-left: 0; width: 100%; }
  /* Цепочка на телефоне складывается в столбик — ради этого она и
     сделана обычной вёрсткой, а не картинкой.

     ВО ВСЮ ШИРИНУ, а не узкой лентой слева. Первая версия складывалась
     в столбик шириной с код аэропорта, и правая половина карточки
     оставалась пустой: у цепочки из шести плеч это полэкрана впустую,
     а сама цепочка выходила за экран по высоте.

     Дальность и тоннаж разводим по краям строки: так их читают парой,
     не перескакивая взглядом. */
  .acc-chain { flex-direction: column; align-items: stretch; }

  /* flex-direction ОБЯЗАТЕЛЬНО ПЕРЕОПРЕДЕЛИТЬ. В основном правиле у
     точки и перелёта column, и без этого justify-content работает по
     вертикали, а margin-left:auto толкает вбок по поперечной оси.
     Внешне похоже на нужное, но разъезжается по высоте — что и было
     видно на первом снимке. */
  .acc-chain__node {
    align-self: stretch;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  .acc-chain__node .acc-chain__tag { margin-left: auto; }

  .acc-chain__hop {
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--acc-sp-3);
    padding: 6px 10px 6px 22px;
  }
  .acc-chain__hop::before { left: 12px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  .acc-chain__hop::after { display: none; }
}

/* --- Мои контракты ------------------------------------------------------- */

.acc-cb__mine { flex: 0 0 auto; align-self: center; }

.acc-cb__notice--ok {
  border-color: var(--acc-ok-brd);
  background: var(--acc-ok-soft);
}

.acc-cb__card--active { border-color: var(--acc-cyan-dim); }

.acc-cb__progress {
  display: flex;
  align-items: center;
  gap: var(--acc-sp-3);
}

.acc-cb__progress .acc-badge__bar { flex: 1 1 auto; }

.acc-cb__progress-lab {
  flex: 0 0 auto;
  font-family: var(--acc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  color: var(--acc-text-dim);
}

.acc-cb__next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--acc-sp-3);
  padding: 10px 14px;
  border: 1px solid var(--acc-cyan-dim);
  border-left-width: 3px;
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-cyan-soft);
}

.acc-cb__next-lab {
  font-family: var(--acc-font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-cb__next-route {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--acc-text);
}

.acc-cb__next-meta,
.acc-cb__next-flight {
  font-family: var(--acc-font-mono);
  font-size: 11px;
  color: var(--acc-text-dim);
}

.acc-cb__next-flight { margin-left: auto; color: var(--acc-cyan); }

/* Рейс пропал из расписания после принятия. Молчать нельзя: пилот будет
   искать бронь и не найдёт. */
.acc-cb__next-flight--gone { color: var(--acc-err); }

.acc-cb__subhead {
  margin: var(--acc-sp-8) 0 var(--acc-sp-3);
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--acc-text);
}

.acc-cb__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--acc-font-text);
  font-size: 13px;
}

.acc-cb__table th,
.acc-cb__table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--acc-glass-brd);
  text-align: left;
}

.acc-cb__table th {
  font-family: var(--acc-font-mono);
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
  font-weight: 400;
}

.acc-cb__num { text-align: right; font-family: var(--acc-font-mono); font-variant-numeric: tabular-nums; }

.acc-cb__status {
  padding: 2px 9px;
  border-radius: var(--acc-r-pill);
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.acc-cb__status--completed { background: var(--acc-ok-soft); color: var(--acc-ok); }
.acc-cb__status--failed    { background: var(--acc-err-soft); color: var(--acc-err); }

/* --- Разбивка выплаты ---------------------------------------------------- */

.acc-cb__breakdown {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--acc-sp-2);
  padding: 10px 14px;
  border: 1px solid var(--acc-gold-dim);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-gold-soft);
  font-family: var(--acc-font-mono);
  font-size: 12px;
  color: var(--acc-text-dim);
}

.acc-cb__breakdown b {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-16);
  color: var(--acc-text);
}

.acc-cb__plus,
.acc-cb__eq { color: var(--acc-text-mute); }

.acc-cb__breakdown-total {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20);
  font-weight: 600;
  color: var(--acc-gold);
}

.acc-cb__breakdown-note {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--acc-text-mute);
}

/* ======================================================================
   АКТИВНЫЙ КОНТРАКТ НА ДАШБОРДЕ

   Одна полоса, а не карточка: дашборд и так плотный, а этот блок должен
   читаться на ходу — куда лететь, сколько осталось, сколько пройдено.
   ====================================================================== */

.acc-cnow {
  padding: var(--acc-sp-4);
  border: 1px solid var(--acc-cyan-dim);
  border-left-width: 3px;
  border-radius: var(--acc-r-card);
  background: var(--acc-bg-800);
}

.acc-cnow__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--acc-sp-3);
  margin-bottom: var(--acc-sp-3);
}

.acc-cnow__lab {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--acc-cyan);
}

.acc-cnow__ref {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  color: var(--acc-text-mute);
}

.acc-cnow__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--acc-sp-4);
  flex-wrap: wrap;
}

.acc-cnow__leg { min-width: 0; }

.acc-cnow__route {
  display: block;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-26);
  font-weight: 600;
  line-height: 1.1;
  color: var(--acc-text);
}

.acc-cnow__arrow { color: var(--acc-cyan); margin: 0 4px; }

.acc-cnow__meta {
  display: block;
  margin-top: 3px;
  font-family: var(--acc-font-mono);
  font-size: 11px;
  color: var(--acc-text-dim);
}

/* Часы крупно: это единственное здесь, что уходит само, пока пилот
   не смотрит. */
.acc-cnow__time { text-align: right; flex: 0 0 auto; }

.acc-cnow__hours {
  display: block;
  font-family: var(--acc-font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--acc-cyan);
  font-variant-numeric: tabular-nums;
}

.acc-cnow__time--late .acc-cnow__hours { color: var(--acc-err); }

.acc-cnow__hlab {
  display: block;
  margin-top: 2px;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-cnow__why {
  margin: var(--acc-sp-3) 0 0;
  padding: 8px 12px;
  border-left: 2px solid var(--acc-err);
  border-radius: 0 var(--acc-r-ctrl) var(--acc-r-ctrl) 0;
  background: var(--acc-bg-900);
  font-size: 13px;
  color: var(--acc-text-dim);
}

.acc-cnow__foot {
  display: flex;
  align-items: center;
  gap: var(--acc-sp-3);
  margin-top: var(--acc-sp-3);
}

.acc-cnow__bar { flex: 1 1 auto; }

.acc-cnow__prog {
  flex: 0 0 auto;
  font-family: var(--acc-font-mono);
  font-size: 11px;
  color: var(--acc-text-mute);
}

.acc-cnow__btn { flex: 0 0 auto; padding: 6px 16px; font-size: 12px; }

@media (max-width: 575.98px) {
  /* На телефоне маршрут и часы в столбик: рядом они сжимают код
     аэропорта до неузнаваемости. */
  .acc-cnow__body { flex-direction: column; align-items: flex-start; gap: var(--acc-sp-2); }
  .acc-cnow__time { text-align: left; }
  .acc-cnow__hours { font-size: 28px; }
}

/* --- Подсказка борта ------------------------------------------------------

   Полоса между фактами и подвалом карточки: «на чём везти». Появилась
   22.08, до неё карточка отвечала на «сколько дадут» и молчала о выборе
   борта — а это первый вопрос перед кнопкой Accept.

   ЦВЕТ CYAN, А НЕ GOLD. Золото на карточке уже занято деньгами пилота
   и прибавкой репутации — это его награда. Совет наградой не является,
   он инструкция; смешивать их значило бы сбить сложившееся чтение
   карточки, где золотое читается как «моё».

   ПОЛОСА, А НЕ ЯЧЕЙКА В .acc-cb__facts. Совет — это фраза, а сетка
   фактов рассчитана на короткое число под подписью; название борта
   со ставкой и часами в неё не встают и ломают колонки на узком экране. */
.acc-cb__pick {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--acc-sp-2);
  margin-top: var(--acc-sp-3);
  padding: var(--acc-sp-2) var(--acc-sp-3);
  border: 1px solid rgba(0, 229, 255, 0.22);
  border-left: 2px solid var(--acc-cyan);
  border-radius: 4px;
  background: var(--acc-cyan-soft);
}

.acc-cb__pick-lab {
  font-family: var(--acc-font-mono);
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--acc-cyan-dim);
}

.acc-cb__pick-name {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-14);
  font-weight: 600;
  color: var(--acc-cyan);
}

.acc-cb__pick-rate {
  font-family: var(--acc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--acc-text-mute);
  font-variant-numeric: tabular-nums;
}

/* Цена ошибки уходит на свою строку: это довод, а не часть подписи,
   и на узкой карточке он иначе разрывает ставку пополам. */
.acc-cb__pick-alt {
  flex-basis: 100%;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--acc-text-mute);
}

/* У закрытой карточки совет приглушается вместе со всем остальным,
   но не исчезает: пилоту полезно видеть, к чему он идёт. */
.acc-cb__card--locked .acc-cb__pick {
  border-color: var(--acc-glass-brd);
  border-left-color: var(--acc-text-mute);
  background: transparent;
}

.acc-cb__card--locked .acc-cb__pick-name,
.acc-cb__card--locked .acc-cb__pick-lab {
  color: var(--acc-text-mute);
}

/* --- Порог репутации под прибавкой ----------------------------------------

   Появилось 22.08. До этого карточка отвечала «сколько дадут» и молчала
   про «а можно ли мне» — порог показывался только у запертых карточек,
   в подвале. Пилот видел шкалу от 0 до 100 и ни одного ориентира на ней.

   ДВА ЧИСЛА РЯДОМ, ВСЕГДА. «Нужно 55» без «у тебя 50» — половина ответа:
   правило видно, а расстояние до него нет. */
.acc-cb__req {
  margin-top: 2px;
  font-family: var(--acc-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums;
}

/* Зелёный и красный, а не приглушённый и яркий: это ответ «да/нет»,
   а не «важно/неважно». Читается боковым зрением при беге по доске. */
.acc-cb__req--ok { color: var(--acc-ok); }
.acc-cb__req--no { color: var(--acc-err); }

/* Вместимость подобранного борта — рядом с названием, а не в общей
   строке со ставкой. Это свойство САМОЛЁТА, как и его имя; ставка
   и часы — свойства рейса. Разнеся их, читаешь строку без запинки:
   «взять вот этот, он на столько-то, обойдётся во столько». */
.acc-cb__pick-cap {
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--acc-cyan-dim);
  font-variant-numeric: tabular-nums;
}

.acc-cb__card--locked .acc-cb__pick-cap { color: var(--acc-text-mute); }

/* ------------------------------------------------------------------
   Load figured for <type> - added 26.08.

   Deliberately quiet: this line is the basis of the arithmetic, not a
   rule to obey. The leg is accepted on capacity, never on the name of
   the type, so a bigger aircraft is always fine. Print it loud and a
   pilot starts hunting for that exact airframe.
   ------------------------------------------------------------------ */
.acc-cb__sized {
  margin: 6px 0 10px;
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-12, 12px);
  color: var(--acc-text-mute);
  letter-spacing: .02em;
}

.acc-cb__sized b {
  color: var(--acc-cyan-dim, var(--acc-cyan));
  font-weight: 600;
}

.acc-cb__card--locked .acc-cb__sized { color: var(--acc-text-mute); }

/* ------------------------------------------------------------------
   Continue-the-contract call to action - added 29.08.

   What was here before: a link reading "Plan flight 8077", carrying
   the class acc-hero__btn with no modifier. On its own that class is
   a transparent shell - no background, no border - so on screen it
   was a line of uppercase text sitting next to "Drop contract", not
   a button. The pilot said so in exactly those words.

   The second half of the problem was the wording. A flight number on
   its own proves nothing: to be sure that 8077 was his return leg and
   not some other flight, he had to leave the page, check the route in
   the schedule, and come back.

   So this block names all three facts at once - which leg of how
   many, which route, which flight - and is built to read as the one
   thing on the card you are meant to press. "Drop contract" stays in
   the footer on its own, where it is an exit rather than a choice
   standing beside the way forward.
   ------------------------------------------------------------------ */
.acc-cb__go {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: var(--acc-sp-3);
  padding: 14px 18px;
  border: 1px solid var(--acc-cyan);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-cyan-soft);
  text-decoration: none;
  transition: transform var(--acc-dur-fast) var(--acc-ease),
              box-shadow var(--acc-dur-fast) var(--acc-ease),
              background var(--acc-dur-fast) var(--acc-ease);
}

a.acc-cb__go:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px var(--acc-cyan-glow);
  text-decoration: none;
}

a.acc-cb__go:active { transform: translateY(0); }

.acc-cb__go-kicker {
  font-family: var(--acc-font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--acc-cyan);
}

.acc-cb__go-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

/* The flight number is the fact the pilot will compare against
   vmsACARS, so it is the loudest thing in the block. */
.acc-cb__go-flt {
  padding: 2px 10px;
  border-radius: var(--acc-r-pill);
  background: var(--acc-cyan);
  color: var(--acc-on-cyan);
  font-family: var(--acc-font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.acc-cb__go-route {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20);
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--acc-text);
}

.acc-cb__go-arrow {
  margin-left: auto;
  font-size: var(--acc-fs-20);
  color: var(--acc-cyan);
}

.acc-cb__go-sub {
  font-family: var(--acc-font-text);
  font-size: 12px;
  line-height: 1.45;
  color: var(--acc-text-dim);
}

/* The booked flight left the schedule after the contract was taken.
   Same block, same place on the card - but it is not a way forward
   any more, so it must not look like one. */
.acc-cb__go--gone {
  border-color: var(--acc-err-brd);
  background: var(--acc-err-soft);
}

.acc-cb__go--gone .acc-cb__go-kicker { color: var(--acc-err); }

@media (max-width: 560px) {
  .acc-cb__go-arrow { margin-left: 0; }
}

/* ------------------------------------------------------------------
   Rare destination - added 30.08.

   Sits right under "Load figured for" and carries the opposite kind of
   news: that line is a constraint, this one is a reward. So it gets the
   warm accent, not the muted grey, and it stays a single quiet line -
   a badge would shout louder than the pay figure below it.

   The wording is "rare", never "difficult". Palma and Rhodes are large,
   easy airports; they are quiet only in THIS network. Calling them
   difficult would be a lie about the airport itself.
   ------------------------------------------------------------------ */
.acc-cb__rare {
  margin: -4px 0 10px;
  font-family: var(--acc-font-mono, monospace);
  font-size: var(--acc-fs-12, 12px);
  letter-spacing: .02em;
  color: var(--acc-gold-dim);
}

.acc-cb__rare b {
  color: var(--acc-gold);
  font-weight: 700;
}

/* A locked card must not advertise. The pilot cannot take this contract
   yet, and a bright bonus line on it reads as a taunt. */
.acc-cb__card--locked .acc-cb__rare,
.acc-cb__card--locked .acc-cb__rare b { color: var(--acc-text-mute); }

/* ==========================================================================
   SHOP EXTENSIONS
   ========================================================================== */

/* Pay per hour is cyan, not gold.

   Gold on a card means "your money", and it has to stay with one line.
   A second gold figure beside the first competes for the eye and both
   stop reading. This is a different quantity — a rate, not a sum — so
   it gets a different colour.

   The selector is NESTED (class + tag) for the same reason as its
   neighbours above: `.acc-cb__facts dd` outweighs a single class, and a
   lone class loses silently without reporting it anywhere. */
.acc-cb__facts dd.acc-cb__payh {
  font-size: var(--acc-fs-14);
  color: var(--acc-cyan);
}

/* The hint about a locked extension.

   Deliberately NOT shaped like a warning: this is neither a fault nor a
   refusal, it is an offer. So no gold notice border and no red — a quiet
   strip in the same glass as the rest.

   It does not try to persuade. The line answers "what is this and what
   does it cost" and then stops. An advert on a page someone opened to
   work irritates faster than it convinces. */
.acc-cb__perk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -6px 0 var(--acc-sp-4);
  padding: 10px 14px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-glass);
  font-family: var(--acc-font-text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--acc-text-mute);
}

.acc-cb__perk b {
  color: var(--acc-text);
  font-weight: 600;
}

.acc-cb__perk a {
  color: var(--acc-cyan);
  text-decoration: none;
  border-bottom: 1px solid var(--acc-cyan-dim);
}

.acc-cb__perk a:hover { color: var(--acc-cyan); border-bottom-color: var(--acc-cyan); }

/* A word instead of an icon. The set may have no name "lock", and an
   icon included on a guess draws nothing at all — which is exactly how
   the broken awards looked on 30.08: an empty src makes the browser
   paint its broken-image glyph, indistinguishable from a corrupt file. */
.acc-cb__perk-lock {
  flex: 0 0 auto;
  margin-top: 1px;
  padding: 2px 7px;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-pill);
  background: var(--acc-bg-800);
  font-family: var(--acc-font-mono);
  font-size: 9px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

/* The locked entry in the sort list. Browsers paint disabled options
   very differently — from barely distinguishable to invisible — so set
   it here, and keep it readable while plainly inactive. */
.acc-cb__filters select option:disabled {
  color: var(--acc-text-mute);
}

@media (max-width: 640px) {
  .acc-cb__perk {
    flex-direction: column;
    gap: 6px;
  }
}