/* marketplace-pulse — один экран, тёмный графит, технический моношрифт.
   Мобильный телефон в вертикальном положении — основной и единственный
   приоритет вёрстки; на широком экране всё то же самое остаётся узкой
   центральной колонкой. */

/* ── шрифт ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ── палитра ───────────────────────────────────────────────────────── */
:root {
  --bg:        #0d0e13;
  --bg-soft:   #12141b;
  --card:      #15171f;
  --card-top:  #191c25;
  --line:      rgba(255, 255, 255, .07);
  --line-soft: rgba(255, 255, 255, .045);

  --text:  #f0f1f6;
  /* Мелкие подписи не должны сливаться с фоном: контраст обоих серых
     проверен на карточке и на основном фоне */
  --muted: #949bb0;
  --dim:   #737a8e;

  /* Фирменные цвета площадок, поднятые по светлоте под тёмный фон */
  --wb:        #a93bf5;
  --wb-from:   #7c2ae8;
  --wb-to:     #cb3fd8;
  --ozon:      #2b7fff;
  --ozon-from: #005bff;
  --ozon-to:   #4f9dff;

  --warn: #f0a93b;
  --bad:  #f0553b;

  /* Единая кривая для всех переходов: быстрый старт, мягкая остановка */
  --ease: cubic-bezier(.22, 1, .36, 1);

  --radius: 18px;
  --pad: 20px;
}

/* ── база ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100svh;
  background: var(--bg);
  /* Едва заметное свечение сверху: даёт глубину, но не читается как градиент */
  background-image:
    radial-gradient(130% 65% at 18% -12%, rgba(169, 59, 245, .10), transparent 62%),
    radial-gradient(120% 60% at 92% -6%, rgba(43, 127, 255, .09), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
  /* tnum обязателен: без него ширина цифр гуляет и число дёргается при
     каждом пересчёте. Ноль остаётся штатным для JetBrains Mono —
     с точкой внутри: это и есть тот самый терминальный характер. */
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Тап по цифрам не должен подсвечиваться синим на мобильных */
  -webkit-tap-highlight-color: transparent;
}

/* Ширина цифр не должна прыгать при пересчёте — иначе layout дрожит */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Содержимое между шапкой и подвалом центрируется по вертикали: на
   высоком экране блок не должен прижиматься к верху, оставляя пустоту */
.stack {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Верх прибит к месту, а не центрирован. У прошедших дней блок очереди
     заменяется одной строкой, и при центрировании главное число прыгало
     бы вверх-вниз на сотню пикселей при каждом свайпе. */
  justify-content: flex-start;
  padding-top: clamp(18px, 12vh, 104px);
  gap: clamp(20px, 5vw, 30px);
  /* Смена дня — сдвиг и растворение, без каруселей и точек-индикаторов.
     Вертикальную прокрутку не блокируем: жест ловится только когда он
     заведомо горизонтальный. */
  touch-action: pan-y;
}

/* Палец ведёт содержимое за собой — во время жеста переходы выключены,
   иначе картинка отстаёт от пальца */
.stack.is-dragging { transition: none; }
.stack.is-animating { transition: transform .2s var(--ease), opacity .2s var(--ease); }
/* Уход в сторону, куда «улетает» текущий день */
.stack.is-out-left  { transform: translateX(-22px); opacity: 0; }
.stack.is-out-right { transform: translateX(22px);  opacity: 0; }

.screen {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 4.5vw, 26px);
  padding:
    calc(env(safe-area-inset-top) + clamp(26px, 7vw, 40px))
    calc(env(safe-area-inset-right) + var(--pad))
    calc(env(safe-area-inset-bottom) + 16px)
    calc(env(safe-area-inset-left) + var(--pad));
}

/* Пока не пришёл первый ответ — содержимое приглушено, но layout уже
   на месте: появление данных не двигает ни один блок */
.screen[aria-busy='true'] .total,
.screen[aria-busy='true'] .split,
.screen[aria-busy='true'] .cards { opacity: .35; }
.total, .split, .cards { transition: opacity .5s var(--ease); }

/* ── шапка с выбором дня ───────────────────────────────────────────── */
.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.head__title {
  display: flex;
  align-items: baseline;
  gap: .5em;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  /* Ширина подписи меняется от «Сегодня» к «9 авг», но стрелки по краям
     стоять не должны — центр держит сама раскладка flex */
  text-align: center;
}
.head__word { color: var(--text); }
.head__dot { color: var(--dim); }
.head__date { color: var(--muted); }
/* У прошедших дней слово-подпись исчезает, остаётся только дата */
.head__word[hidden] + .head__dot { display: none; }

.nav {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              opacity .25s var(--ease), transform .12s var(--ease);
}
.nav:hover:not(:disabled) { color: var(--text); border-color: var(--line); }
.nav:active:not(:disabled) { transform: scale(.92); }
/* Будущего дня нет: кнопка не исчезает, чтобы шапка не прыгала */
.nav:disabled { opacity: .22; cursor: default; }

/* ── главное число ─────────────────────────────────────────────────── */
.total { text-align: center; padding: clamp(2px, 2vw, 10px) 0 0; }

.total__value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .16em;
}

.num--total {
  /* Размер подобран под худший реальный случай — семизначную сумму
     «1 234 567 ₽»: она обязана поместиться в 360 пикселей ширины без
     переноса и без горизонтальной прокрутки */
  font-size: clamp(40px, 13vw, 62px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.05;
  color: #fff;
  /* Мягкое свечение вместо тени: число выглядит подсвеченным, а не вдавленным */
  text-shadow: 0 0 42px rgba(255, 255, 255, .16);
  transition: font-size .5s var(--ease);
}
/* Миллион и больше — на разряд длиннее, поэтому чуть мельче */
.total.is-long .num--total { font-size: clamp(32px, 10.5vw, 52px); }

.total__cur {
  font-size: clamp(20px, 5.6vw, 28px);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: -.02em;
}

/* ── шкала WB / Ozon ───────────────────────────────────────────────── */
.split { display: flex; flex-direction: column; gap: 16px; }

.split__bar {
  position: relative;
  display: flex;
  height: 15px;
  border-radius: 999px;
  overflow: hidden;
  background: #1b1e27;
  box-shadow:
    inset 0 0 0 1px var(--line-soft),
    0 10px 28px -14px rgba(0, 0, 0, .9);
}

.split__seg {
  height: 100%;
  /* Одна общая шкала: сегменты делят ширину, а не растут независимо */
  transition: width .85s var(--ease);
}
.split__seg--wb {
  background: linear-gradient(100deg, var(--wb-from), var(--wb-to));
  box-shadow: 0 0 22px -4px rgba(169, 59, 245, .55);
}
.split__seg--ozon {
  background: linear-gradient(100deg, var(--ozon-to), var(--ozon-from));
  box-shadow: 0 0 22px -4px rgba(43, 127, 255, .5);
}

/* Разделитель — часть шкалы, а не граница двух полосок */
.split__knife {
  position: absolute;
  top: -1px; bottom: -1px;
  width: 3px;
  margin-left: -1.5px;
  background: var(--bg);
  border-radius: 2px;
  transition: left .85s var(--ease);
}

.split__legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 12px;
}
.side { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.side--ozon { text-align: right; }

.side__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
}
.side--wb   .side__name { color: var(--wb); }
.side--ozon .side__name { color: var(--ozon); }

.side__sum {
  font-size: clamp(17px, 5vw, 21px);
  font-weight: 500;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.side__cur { color: var(--dim); margin-left: .28em; font-size: .78em; }

.side__share {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .02em;
}

/* ── карточки состояний ────────────────────────────────────────────── */
.cards { display: flex; flex-direction: column; gap: 12px; }
.cards[hidden] { display: none; }

/* Замена карточек на прошедших днях. Это не предупреждение и не ошибка —
   просто спокойная сноска о том, чего в этот день показать нельзя:
   состояние очереди существует только «сейчас». */
.cards__note {
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .06em;
  color: var(--dim);
  padding: 22px 12px;
  border: 1px dashed var(--line-soft);
  border-radius: var(--radius);
}
.cards__note[hidden] { display: none; }

.card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--card-top), var(--card));
  padding: 15px 16px 17px;
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, .95);
  overflow: hidden;
}
/* Тонкая цветная нить сверху — принадлежность карточки площадке */
.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  opacity: .8;
}
.card--wb::before   { background: linear-gradient(90deg, transparent, var(--wb), transparent); }
.card--ozon::before { background: linear-gradient(90deg, transparent, var(--ozon), transparent); }

.card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.card__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.card--wb   .card__dot { background: var(--wb);   box-shadow: 0 0 10px 1px rgba(169, 59, 245, .7); }
.card--ozon .card__dot { background: var(--ozon); box-shadow: 0 0 10px 1px rgba(43, 127, 255, .65); }

.card__name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--text);
}
.card__state {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--dim);
  white-space: nowrap;
}
.card.is-stale .card__state { color: var(--warn); }
.card.is-error .card__state { color: var(--bad); }
/* У устаревшей карточки данные приглушены: видно, что число — вчерашней свежести */
.card.is-stale .cell__num,
.card.is-error .cell__num { color: var(--muted); }

.card__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  min-width: 0;
}
/* Разделители-волоски между тремя числами */
.cell + .cell { box-shadow: inset 1px 0 0 var(--line-soft); }

.cell__num {
  font-size: clamp(26px, 8vw, 32px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  transition: color .4s var(--ease);
}
.cell__label {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: center;
  line-height: 1.35;
}
.cell__hint {
  display: block;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── низ экрана ────────────────────────────────────────────────────── */
.foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}
.foot__dots { display: flex; gap: 12px; }

.pill { display: inline-flex; align-items: center; gap: 6px; }
.pill i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dim);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.pill.is-ok    i { background: #35d07f; box-shadow: 0 0 8px 0 rgba(53, 208, 127, .8); }
.pill.is-stale i { background: var(--warn); box-shadow: 0 0 8px 0 rgba(240, 169, 59, .7); }
.pill.is-error i { background: var(--bad);  box-shadow: 0 0 8px 0 rgba(240, 85, 59, .7); }
.pill.is-off   i { background: var(--dim); box-shadow: none; }

/* Мигание только у проблемного состояния и только очень спокойное */
.pill.is-stale i, .pill.is-error i { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── настройки доступности ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}