/*
 * Значения для трёх приложений кейса: телефон исполнителя, реестр заказчика,
 * часы. Один файл на всё, потому что это один продукт на трёх экранах, и
 * расхождение в цвете статуса между реестром и часами читалось бы как
 * разные статусы.
 *
 * Тема светлая всегда, как у остальных приложений в корпусах на сайте.
 *
 * Шкала шагов кратна четырём: интерфейс плотный, а на реестре в двести строк
 * шаг в шесть точек даёт разницу в высоте экрана.
 */
:root {
  /* Бумага и чернила */
  --bg: #fff;
  --bg-2: #f6f7f9;
  --ink: #14161a;
  --ink-2: rgb(20 22 26 / 0.58);
  --ink-3: rgb(20 22 26 / 0.38);
  --line: rgb(20 22 26 / 0.1);
  --line-2: rgb(20 22 26 / 0.06);
  --fill: rgb(20 22 26 / 0.05);

  /*
   * Цвет несёт смысл и только его. Зелёный, это действие и ответ на твоё
   * нажатие; жёлтый, срок ещё не вышел; красный, срок вышел или статус
   * потерян. Четвёртого цвета нет: в реестре на двести строк каждый новый
   * оттенок, это ещё одно правило, которое надо помнить глазами.
   *
   * Зелёного две ступени, и разделены они по работе, а не по яркости.
   * --act, это поверхности под белым текстом: кнопка, грань выделения.
   * --act-deep, это чернила: зелёный текст, значок, нажатое состояние. Одним
   * значением не обойтись: чернила цвета кнопки на своей же светлой подложке
   * давали 4.17, то есть провал по AA, а подложку под кнопку не подставить.
   *
   * «В порядке» цвета не имеет вовсе, и токена --ok больше нет. В реестре
   * действует правило «в порядке, это тишина»: обычное состояние помечено
   * серой галочкой. Полоса количества тоже серая, цветной она становится
   * только когда срок или лимит требуют действия. Два зелёных в одной строке,
   * действие и статус, различать было нечем, а серое от жёлтого и красного
   * при дейтеранопии отстоит вдвое дальше, чем любая зелёная ступень.
   */
  --act: #0d6849;
  --act-soft: rgb(13 104 73 / 0.1);
  --act-deep: #0a4a33;
  --warn: #b26a00;
  --warn-soft: rgb(178 106 0 / 0.12);
  --bad: #c72b20;
  --bad-soft: rgb(199 43 32 / 0.1);

  /* Шаги */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;

  /* Скругления */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-pill: 999px;

  /* Кегли */
  --t-cap: 12px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-lg: 17px;
  --t-h: 22px;
  --t-num: 34px;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, 'SF Pro Text', system-ui, 'Segoe UI', sans-serif;
  font-size: var(--t-base);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* ── Общее для всех трёх экранов ── */

/* Числа в таблицах и суммах выравниваются по разряду: иначе столбец сумм
   читается как рваный край. */
.num {
  font-variant-numeric: tabular-nums;
}

.muted {
  color: var(--ink-2);
}
.cap {
  font-size: var(--t-cap);
  color: var(--ink-2);
}

/* Метка состояния. Текст обязателен: цвет без слова не работает у тех, кто
   различает не все оттенки, а в реестре состояние, это основание для
   действия, а не украшение строки. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--fill);
  font-size: var(--t-cap);
  font-weight: 600;
  white-space: nowrap;
}
/* Единственное зелёное в наборе состояний, и это не статус, а ответ на
   собственное нажатие: «Чек отправлен». Чернила плотной ступени на светлой
   подложке дают 8.86 против 3.86 у прежней пары. */
.tag--ok {
  background: var(--act-soft);
  color: var(--act-deep);
}
.tag--warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.tag--bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-m);
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.btn:active {
  transform: scale(0.98);
}
.btn--act {
  background: var(--act);
  color: #fff;
}
.btn--wide {
  width: 100%;
}
.btn--sm {
  min-height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-s);
  font-size: var(--t-sm);
}
.btn[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* ── Значки ──
   Сетка 24, контур толщиной 1.6, см. icons.js. Размер по месту: в строке
   списка 20, в кружке действия 22, в подсказке 16. Больше трёх размеров не
   нужно: в разборе тридцати экранов их тоже три. */
.i {
  flex: none;
  width: 20px;
  height: 20px;
  color: currentColor;
}
.i--s {
  width: 16px;
  height: 16px;
}
.i--l {
  width: 22px;
  height: 22px;
}

/*
 * Кружок со значком в начале строки списка. Так устроена строка в истории
 * операций Альфы, в списке активов, у БЦК и Билайна: круг 40, контурный
 * значок, дальше два текста, справа число. Тон круга кодирует вид записи, а
 * не важность: важность несёт текст.
 */
.ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--ink-2);
}
.ic--warn {
  background: var(--warn-soft);
  color: var(--warn);
}
.ic--bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.ic--act {
  background: var(--act-soft);
  color: var(--act);
}

/*
 * Подзаголовок группы: капсом, мелким, серым. Так отделены «СЕГОДНЯ, 6
 * АПРЕЛЯ» в истории Альфы, «СЧЕТА» и «КАРТЫ» в её фильтрах, «ПЕРЕЙТИ В
 * РАЗДЕЛ» у Ozon. Разделительных линий при этом не нужно: группу держит
 * подзаголовок и воздух.
 */
.gh {
  margin: var(--s-5) 0 var(--s-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/*
 * Кнопка-подсказка. Объяснение срока или правила живёт здесь, а не абзацем
 * под числом: у Альфы и Тинькофф рядом с суммой стоит «i» или «?» в круге.
 */
.hint {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink-2);
  cursor: help;
}

/* Сноска под блоком: откуда данные, что обещано, чем ограничено. Серым,
   мелким, без подложки и без значка. */
.foot {
  margin-top: var(--s-3);
  font-size: var(--t-cap);
  line-height: 1.4;
  color: var(--ink-3);
}

/* Пустое состояние: значок в серой плитке, заголовок, причина. Без кнопки и
   без иллюстрации, как у Альфы, Balance Pay и Авито. */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-5);
  text-align: center;
}
.empty-ic {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-1);
  border-radius: var(--r-l);
  background: var(--fill);
  color: var(--ink-3);
}
.empty b {
  font-size: var(--t-lg);
}
.empty span {
  max-width: 34ch;
  font-size: var(--t-sm);
  color: var(--ink-2);
}