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

   Все классы с префиксом .acc-. Существующую вёрстку не трогают.
   Работает в обеих темах: все цвета из токенов, ни одного жёсткого.

   Золото здесь только на шевроне ранга и на награде — по правилу ролей.
   Приборные шкалы, баланс, кнопки — cyan.
   ========================================================================== */

/* --- Flight Badge -------------------------------------------------------- */

.acc-badge {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  align-items: center;
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-card);
  background: var(--acc-bg-800);
}

.acc-badge__id {
  display: flex;
  align-items: center;
  gap: var(--acc-sp-4);
  min-width: 0;
}

.acc-badge__avatar img {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--acc-glass-brd);
  object-fit: cover;
}

.acc-badge__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.acc-badge__name {
  font-family: var(--acc-font-display);
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1.1;
  color: var(--acc-text);
}

.acc-badge__sub {
  font-family: var(--acc-font-text);
  font-size: 13.5px;
  color: var(--acc-text-dim);
}

.acc-badge__ident {
  font-family: var(--acc-font-mono);
  letter-spacing: 1px;
  color: var(--acc-cyan);
}

.acc-badge__dot { margin: 0 6px; color: var(--acc-text-mute); }

.acc-badge__state {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 9px;
  border-radius: var(--acc-r-pill);
  font-family: var(--acc-font-mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.acc-badge__state--warn { background: var(--acc-gold-soft); color: var(--acc-gold); }
.acc-badge__state--err  { background: var(--acc-err-soft);  color: var(--acc-err); }

.acc-badge__chevron {
  margin-left: auto;
  line-height: 0;
  flex: 0 0 auto;
}

/* --- Прогресс до следующего ранга ---------------------------------------- */

.acc-badge__rank {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.acc-badge__rank-now {
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--acc-text);
}

.acc-badge__bar {
  height: 8px;
  border-radius: var(--acc-r-pill);
  background: var(--acc-ghost);
  overflow: hidden;
}

.acc-badge__bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--acc-cyan);
  transition: width var(--acc-dur-slow) var(--acc-ease-out);
}

/* Верхняя ступень — единственное место, где полоса золотая: дальше расти
   некуда, это уже достижение, а не путь. */
.acc-badge__bar--full > span { background: var(--acc-gold); }

.acc-badge__rank-next {
  font-family: var(--acc-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: var(--acc-text-dim);
}
.acc-badge__rank-next b { color: var(--acc-text); font-weight: 600; }

/* --- Пять чисел ---------------------------------------------------------- */

.acc-badge__stats {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-glass-brd);
  overflow: hidden;
}

.acc-badge__stats > div {
  padding: 12px 16px;
  background: var(--acc-bg-700);
}

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

.acc-badge__stats dd {
  margin: 2px 0 0;
  font-family: var(--acc-font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--acc-text);
  font-variant-numeric: tabular-nums;
}

.acc-badge__stats dd small {
  font-size: 14px;
  color: var(--acc-text-mute);
  margin-left: 1px;
}

/* Деньги моноширинным: цифры в столбик, глаз сравнивает суммы без усилий. */
.acc-badge__money dd {
  font-family: var(--acc-font-mono);
  font-size: 19px;
  color: var(--acc-cyan);
}

/* --- Приборные шкалы ----------------------------------------------------- */

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

.acc-gauges__head { margin-bottom: var(--acc-sp-4); }

.acc-gauges__title {
  margin: 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20);
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--acc-text);
}

.acc-gauges__lead {
  margin: 2px 0 0;
  font-family: var(--acc-font-mono);
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--acc-text-mute);
}

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

.acc-gauge {
  position: relative;
  margin: 0;
  padding: var(--acc-sp-4) var(--acc-sp-3) var(--acc-sp-3);
  border: 1px solid var(--acc-glass-brd);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-700);
  text-align: center;
}

.acc-gauge__dial {
  display: block;
  width: 100%;
  max-width: 132px;
  margin: 0 auto;
  aspect-ratio: 1;
}

.acc-gauge__track { stroke: var(--acc-ghost); }

/* Сама шкала всегда cyan: приборы должны быть сравнимы между собой,
   а если каждый перекрашивается целиком, сравнивать нечего.
   Состояние показывает только число под ней. */
.acc-gauge__fill {
  stroke: var(--acc-cyan);
  transition: stroke-dasharray var(--acc-dur-slow) var(--acc-ease-out);
}

.acc-gauge__cap {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-58%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.acc-gauge__val {
  font-family: var(--acc-font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--acc-text);
  font-variant-numeric: tabular-nums;
}

.acc-gauge__val small {
  font-family: var(--acc-font-mono);
  font-size: 11px;
  margin-left: 2px;
  color: var(--acc-text-mute);
}

.acc-gauge--ok   .acc-gauge__val { color: var(--acc-ok); }
.acc-gauge--warn .acc-gauge__val { color: var(--acc-warn); }
.acc-gauge--err  .acc-gauge__val { color: var(--acc-err); }
.acc-gauge--na   .acc-gauge__val { color: var(--acc-text-mute); }

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

.acc-gauge__note {
  display: block;
  margin-top: -14px;
  font-family: var(--acc-font-text);
  font-size: 11px;
  color: var(--acc-text-mute);
}

/* --- METAR ---------------------------------------------------------------

   Цвета категорий — международный стандарт, а не наша палитра. Пилот
   узнаёт их не читая подписи, поэтому здесь мы сознательно отступаем от
   фирменных цветов. Единственное такое место на сайте. */

.acc-metar {
  --acc-cat: var(--acc-text-mute);
  padding: var(--acc-sp-4);
  border: 1px solid var(--acc-glass-brd);
  border-left: 3px solid var(--acc-cat);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-bg-700);
}

.acc-metar--vfr  { --acc-cat: #17a34a; }
.acc-metar--mvfr { --acc-cat: #2563eb; }
.acc-metar--ifr  { --acc-cat: #dc2626; }
.acc-metar--lifr { --acc-cat: #c026d3; }

.acc-metar__head {
  display: flex;
  align-items: baseline;
  gap: var(--acc-sp-2);
  margin-bottom: var(--acc-sp-3);
}

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

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

.acc-metar__cat {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: var(--acc-r-pill);
  background: var(--acc-cat);
  color: #fff;
  font-family: var(--acc-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
}

.acc-metar__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--acc-sp-3);
  margin: 0;
}

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

.acc-metar__rows dd {
  margin: 2px 0 0;
  font-family: var(--acc-font-text);
  font-size: 14px;
  color: var(--acc-text);
}

.acc-metar__wx {
  margin: var(--acc-sp-3) 0 0;
  font-family: var(--acc-font-text);
  font-size: 13.5px;
  color: var(--acc-cat);
}

.acc-metar__raw {
  margin: var(--acc-sp-3) 0 0;
  padding-top: var(--acc-sp-2);
  border-top: 1px solid var(--acc-glass-brd);
  font-family: var(--acc-font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  word-break: break-word;
  color: var(--acc-text-mute);
}

.acc-metar__age,
.acc-metar__none {
  margin: 6px 0 0;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--acc-text-mute);
}

.acc-metar__none { margin: 0; font-size: 13px; font-family: var(--acc-font-text); }

/* --- Следующий шаг в академии -------------------------------------------- */

.acc-next {
  display: flex;
  align-items: center;
  gap: var(--acc-sp-4);
  padding: var(--acc-sp-4) clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--acc-glass-brd);
  border-left: 3px solid var(--acc-cyan);
  border-radius: var(--acc-r-card);
  background: var(--acc-bg-800);
}

/* Просроченная или проваленная переподготовка — это долг, а не
   предложение. Меняем только полосу слева и слово состояния: перекрашивать
   блок целиком незачем, он и так один на странице. */
.acc-next--due { border-left-color: var(--acc-warn); }

.acc-next__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--acc-cyan-dim);
  border-radius: var(--acc-r-ctrl);
  background: var(--acc-cyan-soft);
  color: var(--acc-cyan);
}

.acc-next--due .acc-next__icon {
  border-color: var(--acc-gold-dim);
  background: var(--acc-gold-soft);
  color: var(--acc-gold);
}

.acc-next__body { min-width: 0; flex: 1 1 auto; }

.acc-next__kicker {
  display: block;
  font-family: var(--acc-font-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--acc-text-mute);
}

.acc-next__title {
  margin: 3px 0 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-fs-20);
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--acc-text);
}

.acc-next__sub {
  margin: 3px 0 0;
  font-family: var(--acc-font-text);
  font-size: 13px;
  line-height: 1.5;
  color: var(--acc-text-dim);
}

.acc-next__state {
  display: inline-block;
  margin-top: 7px;
  padding: 2px 9px;
  border-radius: var(--acc-r-pill);
  background: var(--acc-cyan-soft);
  color: var(--acc-cyan);
  font-family: var(--acc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.8px;
}

.acc-next--due .acc-next__state {
  background: var(--acc-gold-soft);
  color: var(--acc-gold);
}

.acc-next__cta { flex: 0 0 auto; }

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

@media (max-width: 767.98px) {
  .acc-next { flex-wrap: wrap; }
  .acc-next__cta { width: 100%; justify-content: center; }
  .acc-badge { grid-template-columns: 1fr; }
  .acc-badge__avatar img { width: 56px; height: 56px; }
  .acc-badge__chevron { display: none; }
  .acc-badge__stats { grid-template-columns: repeat(2, 1fr); }
  .acc-gauges__grid { grid-template-columns: repeat(2, 1fr); }
}