/* ============================================================================
   БКУ — общий фундамент оформления. ОДИН И ТОТ ЖЕ ФАЙЛ в обоих приложениях:
   bku_calendar/public/styles/base.css и wip-app/public/styles/base.css.
   Правишь один — копируй во второй, иначе интерфейсы разъедутся.
   Проверка: cmp bku_calendar/public/styles/base.css wip-app/public/styles/base.css

   Здесь живут: шрифт, токены, база документа, кнопки, поля, панели, таблицы,
   метки, плашки, модалка, тосты, иконки. Специфика экранов — в app.css,
   deal.css (календарь) и wip.css (загрузка КИ).

   ОБЛИК (решение 17.08.2026, собран заказчиком в Claude Design, проект
   «Адаптация под Bitrix24»): приложение выглядит частью портала, а не гостем
   в его окне. Отсюда всё остальное — синий #2067b0 как единственный цвет
   действия, светло-серое поле #f2f4f7, белые карточки на мягкой тени вместо
   рамок, скругления 8–14 px, шкала занятости в четыре ступени с собственной
   светлой подложкой у каждой.

   Предыдущий облик (серо-зелёная бумага, петроль, скругления 2–3 px, ни одной
   тени) снят целиком: перебирать его остатки по файлам не нужно — цвета и формы
   заданы токенами ниже, и правка здесь меняет оба приложения сразу.

   Цветовых схем одна — светлая. Тёмную убрали осознанно (решение 14.08.2026):
   два приложения должны выглядеть одинаково, а вторая схема разъезжалась.
   ========================================================================== */

/* ---------- 1. Шрифт ----------
   Гарнитура в системе ОДНА — системный гротеск (см. --font ниже), тот же,
   которым портал набирает свои экраны. Внутри карточки сделки вкладка стоит
   вплотную к родным блокам Битрикс24, и собственная гарнитура выдавала бы
   в ней вставку из другого приложения.

   Файлы Golos Text прежнего облика лежат в public/fonts/ (лицензия SIL OFL
   рядом), но НЕ объявлены и не подключены: объявление неиспользуемой гарнитуры
   — мёртвый код, а витрина и документация начинают расходиться с кодом.
   Понадобится вернуть — объявите @font-face с двумя сабсетами (cyrillic
   и latin, unicode-range) и допишите 'Golos Text' первым в --font, а заодно
   внесите гарнитуру в typography в DESIGN.md. */

/* ---------- 2. Токены ---------- */
:root {
  /* Поверхности. Ряд отсчитан от рабочего фона портала: страница — светло-серое
     поле, содержимое — белые карточки на нём. Цвет здесь несут только действие
     и шкала занятости, нейтрали остаются нейтральными. */
  --c-bg:            #f2f4f7;
  --c-surface:       #ffffff;
  --c-surface-alt:   #f7f9fa;   /* подшапка группы, зебра, подвал модалки */
  --c-surface-mute:  #f1f4f7;   /* чипы, аватары, дорожка переключателя */
  --c-surface-sunk:  #f4f6f8;   /* счётчик в шапке, круглая кнопка закрытия */

  /* Линии. Разделитель внутри карточки почти неразличим — карточку держит
     не он, а сама белая плоскость на сером поле. Плотная линия осталась
     только у контролов: у них рамка — часть формы. */
  --c-line:          #eef1f4;   /* разделитель блока внутри карточки */
  --c-line-soft:     #f2f4f7;   /* разделитель строк списка и таблицы */
  --c-line-head:     #e7ebef;   /* под шапкой таблицы */
  --c-border:        #dbe1e7;   /* рамка контрола */
  --c-border-cell:   #eaeef2;   /* рамка ячейки календаря */

  --c-text:          #28313a;
  --c-text-strong:   #111820;
  --c-muted:         #5a6570;   /* 4.5:1 и на карточке, и на фоне страницы */
  --c-muted-soft:    #8892a0;   /* ТОЛЬКО значки и графика: текстом не набирать */
  --c-faint:         #c2c8d0;   /* только неактивная графика: делéния шкалы */

  /* Действие — единственный цвет, по которому можно нажать. Тот же синий,
     которым портал красит свои ссылки и главные кнопки. */
  --c-action:        #2067b0;
  --c-action-dark:   #18578f;
  --c-action-soft:   #e8f1fa;
  --c-action-soft-hover: #dceafa;  /* наведение на светло-синюю заливку */
  --c-action-line:   #b9d4ec;      /* кольцо на светло-синей заливке */
  --c-focus-ring:    rgba(32, 103, 176, .22);

  /* Тепловая шкала занятости: свежо → тепло → горячо. Три слоя у каждой ступени:
     fill — заливка площадей, ink — тот же смысл текстом (4.5:1 на своей
     подложке), soft — сама подложка. Плашка часов больше не считает
     полупрозрачность на ходу: у ступени есть готовый светлый тон. */
  --c-load-1:        #3fa96b;
  --c-load-1-ink:    #2b7c4d;
  --c-load-1-soft:   #eaf5ee;
  --c-load-2:        #d5a520;
  --c-load-2-ink:    #8a6a05;
  --c-load-2-soft:   #fbf4e0;
  --c-load-3:        #e0801f;
  --c-load-3-ink:    #9a5312;
  --c-load-3-soft:   #fdf0e3;
  --c-load-4:        #d94a3d;
  --c-load-4-ink:    #a32a1f;
  --c-load-4-soft:   #fdeceb;

  /* Сигналы. У каждого ОДИН цвет — тот, которым можно и набрать текст, и
     нарисовать знак: держит 4.5:1 на своей подложке. Более светлые варианты
     из макета (#c07b00, #d8342b, #1a9b4b) в системе не заведены намеренно —
     текстом они не проходят норму, а знаком неотличимы от этих. */
  --c-warn:          #9a6300;
  --c-warn-soft:     #fdf3e0;
  --c-warn-line:     #f0dcb4;
  --c-alert:         #b02a20;
  --c-alert-soft:    #fdecea;
  --c-alert-soft-hover: #fbdcd8;   /* наведение на светлую заливку тревоги */
  --c-alert-line:    #f3ccc7;
  --c-ok:            #157a3c;
  --c-ok-soft:       #e7f6ec;
  --c-ok-line:       #c2e6cd;

  /* Форма. Скругления крупные и ступенчатые: чем больше плоскость, тем мягче
     её угол — знак 9, контрол 8, карточка 12, панель экрана 14, модалка 16. */
  --r-xs:   6px;   /* плашка внутри контрола, деление шкалы */
  --r-sm:   7px;   /* метка, чип, мелкая кнопка */
  --r:      8px;   /* кнопка, поле, ссылка-кнопка */
  --r-md:  10px;   /* ячейка дня, строка ленты, дорожка переключателя */
  --r-lg:  12px;   /* карточка, плашка */
  --r-xl:  14px;   /* панель экрана */
  --r-modal: 16px;
  --r-pill: 99px;

  /* Подъём. Тень — единственное, чем карточка отделена от поля, поэтому ступеней
     четыре: линия под шапкой, лежащая карточка, панель экрана, всплывающее. */
  --shadow-line:  0 1px 0 rgba(17, 24, 32, .07);
  --shadow-card:  0 1px 2px rgba(17, 24, 32, .05);
  --shadow-panel: 0 1px 2px rgba(17, 24, 32, .05), 0 6px 18px -12px rgba(17, 24, 32, .22);
  --shadow-pop:   0 10px 30px -12px rgba(17, 24, 32, .35), 0 1px 2px rgba(17, 24, 32, .08);
  --shadow-modal: 0 24px 64px -16px rgba(17, 24, 32, .45);

  /* Кегли. Разрыв между рабочим текстом и величиной сделан заметным:
     число — главный носитель смысла в обоих приложениях. */
  --fs-num:  20px;
  --fs-h:    16px;
  --fs-lg:   15px;
  --fs:      13px;
  --fs-sm:   12px;
  --fs-xs:   11px;

  /* Высоты контролов. Заданы жёстко, а не набраны отступами: поле, селект и
     кнопка в одной строке обязаны быть одной высоты, а посчитанная браузером
     высота у них расходится на 2–4 px. */
  --h-sm:   28px;
  --h:      32px;
  --h-lg:   34px;

  /* Трекинг прописной микроподписи (--fs-xs + uppercase + --c-muted, вес 600).
     В системе он ОДИН: заголовок колонки, подпись поля, шапка сайдбара и дни
     недели — один и тот же идиом, и разные разрядки читались бы как разные
     сущности. Промежуточных .02–.05em и разрядок в px здесь нет.
     Отрицательные трекинги заголовков (-0.01em) и величины (-0.02em) — другая
     история и этим токеном не описываются. */
  --tracking-label: .06em;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Ритм отступов. Промежуточных значений не вводить. */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 12px;
  --sp-5: 16px;
  --sp-6: 20px;
}

/* ---------- 3. База ---------- */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--fs);
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  /* Страница не ездит вбок: широкое прокручивается внутри своей обёртки. */
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--c-text-strong);
}

a { color: var(--c-action); text-decoration: none; }
a:hover { color: var(--c-action-dark); text-decoration: underline; }

.hidden { display: none !important; }
.muted { color: var(--c-muted); }
.nowrap { white-space: nowrap; }
.strong { font-weight: 600; }
.mono { font-variant-numeric: tabular-nums; }

/* Фокус виден всегда и всюду одинаково: контур цветом действия с зазором. */
:focus-visible {
  outline: 2px solid var(--c-action);
  outline-offset: 2px;
}

/* ---------- 4. Иконки ----------
   Рисованный набор в одном штрихе 1.5px на боксе 16px (public/js/icons.js).
   Эмодзи и типографские значки вместо иконок в системе запрещены: они
   разъезжаются по платформам и выдают сборку «на скорую руку». */
.icon {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 13px; height: 13px; vertical-align: -2px; }
.icon--lg { width: 18px; height: 18px; vertical-align: -4px; }

/* ---------- 5. Служебные состояния ---------- */
.loading,
.empty {
  padding: var(--sp-6) var(--sp-4);
  color: var(--c-muted);
  text-align: center;
}
.loading::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: var(--sp-3);
  vertical-align: -2px;
  border: 2px solid var(--c-line-head);
  border-top-color: var(--c-action);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .loading::before { animation-duration: 2.4s; }
}

/* ---------- 6. Аватар ----------
   Круг с инициалами. Кружок на месте человека — родной знак портала: в списке
   сотрудников и в таблице загрузки строку находят по нему, а не по чтению ФИО
   слева направо. Инициалы считает скрипт (initials в calendar.js / wip-tab.js). */
.ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-surface-mute);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.ava--sm { width: 28px; height: 28px; }
.ava--action { background: var(--c-action-soft); color: var(--c-action); }
/* На залитой цветом действия строке: подложка — просвет самой заливки. */
.ava--on-action { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- 7. Кнопки ----------
   Заливку получает только то действие, которое на экране главное. Рабочая
   кнопка — белая на рамке, вспомогательная — светлая заливка цветом действия
   без рамки, разрушающая — светлая заливка тревоги. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--h);
  padding: 0 var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
  color: var(--c-text);
  font: inherit;
  font-size: var(--fs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s linear, border-color .12s linear, color .12s linear;
}
.btn:hover:not(:disabled) { background: var(--c-surface-alt); border-color: var(--c-muted-soft); }
.btn:active:not(:disabled) { background: var(--c-surface-mute); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn--primary {
  border-color: transparent;
  background: var(--c-action);
  color: #fff;
}
.btn--primary:hover:not(:disabled) { background: var(--c-action-dark); border-color: transparent; }
.btn--primary:active:not(:disabled) { background: var(--c-action-dark); }

/* Подтверждающее действие — та же основная кнопка. Зелёная заливка с белым
   текстом (макет предлагал #1a9b4b) даёт 3,6:1, ниже нормы; к тому же на экране
   одно главное действие, и красить его в отдельный цвет не за чем. */
.btn--success { border-color: transparent; background: var(--c-action); color: #fff; }
.btn--success:hover:not(:disabled) { background: var(--c-action-dark); border-color: transparent; }

/* Вспомогательное действие: заметное, но не главное. */
.btn--tinted { border-color: transparent; background: var(--c-action-soft); color: var(--c-action); }
.btn--tinted:hover:not(:disabled) { background: var(--c-action-soft-hover); border-color: transparent; color: var(--c-action-dark); }

.btn--danger { border-color: transparent; background: var(--c-alert-soft); color: var(--c-alert); }
.btn--danger:hover:not(:disabled) { background: var(--c-alert-soft-hover); border-color: transparent; }

.btn--ghost { border-color: transparent; background: transparent; color: var(--c-action); }
.btn--ghost:hover:not(:disabled) { background: var(--c-action-soft); border-color: transparent; }

.btn--sm { height: var(--h-sm); padding: 0 var(--sp-4); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--lg { height: var(--h-lg); padding: 0 var(--sp-6); }
/* Кнопка с одним значком внутри — квадрат по высоте своего размера. */
.btn--icon { width: var(--h); padding: 0; }
.btn--sm.btn--icon { width: var(--h-sm); }
.btn--block { width: 100%; }

/* Кнопка-ссылка: выглядит текстом, ведёт себя кнопкой. */
.link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-action);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.link:hover { color: var(--c-action-dark); text-decoration: underline; }
a.link { text-decoration: none; }

/* ---------- 8. Поля ввода ---------- */
.input,
.select,
.textarea {
  width: 100%;
  height: var(--h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
  color: var(--c-text-strong);
  font: inherit;
  font-size: var(--fs);
  line-height: 1.3;
}
/* Фокус: рамка цветом действия плюс мягкое кольцо снаружи. Носитель фокуса —
   рамка (5,8:1 к белому полю), кольцо только усиливает её. */
.input:focus,
.select:focus,
.textarea:focus {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 0;
  border-color: var(--c-action);
}
.textarea { height: auto; min-height: 56px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: 1.45; }
.input--sm, .select--sm { height: var(--h-sm); padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.input--auto { width: auto; }

/* Селект рисует себя сам, а не средствами ОС. Родной контрол был единственным
   местом, где интерфейс отрисовывала система: чужой шеврон в чужом штрихе стоял
   вплотную к нашим иконкам, а собственная высота контрола не совпадала с высотой
   соседних кнопок. Поэтому appearance: none, свой шеврон и своя геометрия.
   Стрелка — тот же путь, что chevronDown в js/icons.js, в том же штрихе 1.6.
   ЕДИНСТВЕННОЕ место в системе с литеральным цветом: в data-URI переменную CSS
   подставить нельзя, поэтому --c-muted-soft записан как %238892a0. Меняете
   --c-muted-soft — поменяйте и здесь.
   Правило стоит ПОСЛЕ .select--sm намеренно: padding-right под стрелку нужен
   обоим размерам, а сокращённая запись padding в --sm иначе бы его затёрла. */
.select {
  appearance: none;
  -webkit-appearance: none;
  /* 16px — бокс иконки (см. .icon), по var(--sp-3) на зазор с краем и с текстом */
  padding-right: calc(16px + var(--sp-3) * 2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238892a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 6.2L8 10.8l4.6-4.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
}
.select:disabled { opacity: .55; }

/* ---------- 8a. Множественный выпадающий список ----------
   Кнопка выглядит ровно как .select (та же высота, рамка, скругление и шеврон),
   а значения выбирают галочками во всплывающем списке. Родной <select multiple>
   для этого не годится: он рисуется прокручиваемым ящиком с выбором по Ctrl,
   ни на выпадающий список, ни на что-либо в портале не похож.
   Поведение — js/mselect.js. */
.mselect { position: relative; }
.mselect__btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  height: var(--h);
  padding: 0 var(--sp-3) 0 var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r);
  background: var(--c-surface);
  color: var(--c-text-strong);
  font: inherit;
  font-size: var(--fs);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.mselect__btn:hover { border-color: var(--c-muted-soft); }
/* Раскрытый список — то же состояние, что фокус у поля: рамка цветом действия
   и мягкое кольцо. Иначе кнопка не показывает, что список открыт именно из неё. */
.mselect__btn[aria-expanded="true"] {
  border-color: var(--c-action);
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 0;
}
.mselect__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mselect__value--empty { color: var(--c-muted); }
.mselect__chev { flex: none; color: var(--c-muted-soft); transition: transform .12s linear; }
.mselect__btn[aria-expanded="true"] .mselect__chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .mselect__chev { transition: none; }
}

/* Список — всплывающее поверх содержимого, поэтому подъём у него полный.
   position: fixed, а координаты ставит скрипт: контрол стоит внутри
   прокручиваемой колонки вкладки и внутри тела модалки, и absolute там
   обрезался бы ближайшим overflow. z-index выше модалки (900): список
   открывают и из неё. */
.mselect__pop {
  position: fixed;
  z-index: 950;
  max-width: min(340px, calc(100vw - var(--sp-5) * 2));
  padding: var(--sp-2);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
}
.mselect__pop[hidden] { display: none; }
.mselect__opt {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r);
  font-size: var(--fs);
  line-height: 1.35;
  cursor: pointer;
}
.mselect__opt:hover { background: var(--c-surface-mute); }
/* Бокс галочки — те же 16 px, что у нарисованного знака (.icon): в строке
   списка они стоят на одной сетке с иконками остального интерфейса. */
.mselect__opt input { flex: none; width: 16px; height: 16px; margin: 0; }
.mselect__note {
  margin-top: var(--sp-1);
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.field { display: block; margin-bottom: var(--sp-4); }
.field--narrow { max-width: 220px; }
.field__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-muted);
}
.field__hint { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-muted); }
.field-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.field-row > .field { flex: 1 1 140px; margin-bottom: var(--sp-4); }

/* Галочка красится цветом действия — родной синий браузера в палитру не попадает. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--c-action); cursor: pointer; }

/* ---------- 9. Панели ----------
   Панель — белая плоскость на сером поле. Её границу рисует не рамка, а тень:
   рамка в один пиксель на светло-сером фоне читалась как обрезанный край. */
.panel {
  margin-bottom: var(--sp-6);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.panel__title { font-size: var(--fs-lg); }
.panel__spacer { flex: 1 1 auto; }
.panel__body { padding: var(--sp-5); }
.panel__body--flush { padding: 0; }

/* ---------- 10. Метки и знаки ----------
   Метка — светлая заливка со скруглением и без рамки: цвет несёт подложка,
   смысл — слово внутри. Одно и то же семейство на все состояния. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--c-surface-mute);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badge--muted { background: var(--c-surface-mute); color: var(--c-muted); }
.badge--action { background: var(--c-action-soft); color: var(--c-action); }
.badge--warn  { background: var(--c-warn-soft);  color: var(--c-warn); }
.badge--alert { background: var(--c-alert-soft); color: var(--c-alert); }
.badge--ok    { background: var(--c-ok-soft);    color: var(--c-ok); }

/* Ступени занятости словами и цветом одновременно. */
.badge.is-free { background: var(--c-load-1-soft); color: var(--c-load-1-ink); }
.badge.is-ok   { background: var(--c-ok-soft);     color: var(--c-ok); }
.badge.is-edge { background: var(--c-load-3-soft); color: var(--c-load-3-ink); }
.badge.is-over { background: var(--c-load-4-soft); color: var(--c-load-4-ink); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-surface-mute);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: nowrap;
  cursor: default;
}
.chip--deal {
  background: var(--c-action-soft);
  color: var(--c-action);
  font-weight: 600;
  cursor: pointer;
}
.chip--deal:hover { background: var(--c-action-soft-hover); }
a.chip { text-decoration: none; }
a.chip--deal:hover { text-decoration: none; }

/* Счётчик в шапке: «12 выездов», «27,50 ч». Число крупнее и плотнее подписи —
   читают именно его, слово рядом только объясняет единицу. */
.stat {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r);
  background: var(--c-surface-sunk);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  white-space: nowrap;
}
.stat__num { font-size: var(--fs); font-weight: 700; color: var(--c-text-strong); font-variant-numeric: tabular-nums; }
.stat--warn { background: var(--c-warn-soft); color: var(--c-warn); }
.stat--warn .stat__num { color: var(--c-warn); }

/* Точка состояния. Цвет никогда не остаётся без слова рядом.
   Волосяная кромка внутрь — не украшение: заливки шкалы (трава, охра, оранжевый)
   дают к белому 2,3–3,0:1, и без кромки край мелкого знака на карточке
   размывается. Кромка задаёт его при любой заливке. */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: var(--sp-1);
  border-radius: var(--r-xs);
  box-shadow: inset 0 0 0 1px rgba(17, 24, 32, .2);
  vertical-align: 0;
}
.dot--progress { background: var(--c-action); }
.dot--pending  { background: var(--c-load-3); }
.dot--waiting  { background: var(--c-muted-soft); }

/* Пары «подпись: значение». */
.kv { margin: 0; font-size: var(--fs); line-height: 1.5; }
.kv__k { font-weight: 600; color: var(--c-text-strong); }
.kv__v { font-weight: 400; color: var(--c-text); }
.kv__row { display: block; }

/* Величина. Главный носитель смысла: крупно, табличными цифрами. */
.num {
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--c-text-strong);
}
/* «Ничего нет» — тише основного, но всё ещё читаемо: значащее число нельзя
   уводить в неразличимый тон, даже когда это ноль. */
.num--muted { color: var(--c-muted); font-weight: 600; }

/* Шкала «сколько из нормы»: полоса и заливка по доле. Долю кладёт скрипт
   в --level, поэтому одна и та же полоса годится и часам дня, и заказам. */
.meter {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--c-line);
  overflow: hidden;
}
/* Доля задаётся шириной, и перехода у неё нет намеренно: полосу рисуют один раз
   при открытии модалки — анимировать нечего, а плавная смена ширины гоняла бы
   раскладку на каждый кадр. Там, где уровень действительно меняется на месте
   («сосуд» дня), едет transform. */
.meter__fill {
  display: block;
  width: var(--level, 0%);
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--c-action);
}
.meter__fill--free  { background: var(--c-load-1); }
.meter__fill--tight { background: var(--c-load-2); }
.meter__fill--near  { background: var(--c-load-3); }
.meter__fill--over  { background: var(--c-load-4); }

/* ---------- 11. Плашки ----------
   Плашка — светлая заливка со знаком: ни рамки, ни толстой цветной кромки
   слева. Цвет несёт подложка, знак — тот же цвет штрихом. */
.note,
.error-box,
.hint {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-surface-alt);
  font-size: var(--fs);
  line-height: 1.55;
  color: var(--c-text);
}
.note__icon,
.error-box__icon {
  flex: none;
  margin-top: 1px;
  color: var(--c-warn);
}
.note__body,
.error-box__body { flex: 1 1 auto; min-width: 0; }

.note { background: var(--c-warn-soft); }
.note--soft { background: var(--c-surface-alt); }
.note--soft .note__icon { color: var(--c-muted); }

.error-box { background: var(--c-alert-soft); color: var(--c-text); }
.error-box__icon { color: var(--c-alert); }
.error-box__actions { margin-top: var(--sp-4); }

/* Пояснение «как это устроено»: та же плашка, но пунктирная рамка отделяет
   справку от сообщений о состоянии. */
.hint { border: 1px dashed var(--c-border); background: var(--c-surface-alt); color: var(--c-muted); }

/* Запрет — единственная плашка, которую нельзя пропустить: заливка тревоги
   и заголовок в полный кегль цветом тревоги. */
.note--stop { background: var(--c-alert-soft); }
.note--stop .note__icon { color: var(--c-alert); }
.note--stop .note__title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
  font-weight: 600;
  color: var(--c-alert);
}
.note--stop .note__stage { font-weight: 600; color: var(--c-text-strong); }

.note__title { margin-bottom: var(--sp-1); font-weight: 600; color: var(--c-text-strong); }
.note__text { font-size: var(--fs); color: var(--c-muted); }
.note__text + .note__text { margin-top: var(--sp-2); }
.note__text--muted { color: var(--c-muted); }

/* ---------- 12. Таблицы ----------
   Заголовок колонки — обычным регистром: в таблице загрузки это не служебный
   ярлык, а объяснение смысла цифр («Распределено», «Взято в работу»), и
   капслоком оно читается хуже и шире. Прописная микроподпись осталась у полей
   формы и у дней недели — там она метка, а не фраза. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs);
}
.table th {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line-head);
  color: var(--c-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
}
.table td {
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line-soft);
  vertical-align: top;
}
.table--stripe tbody tr:nth-child(even) { background: var(--c-surface-alt); }
.table-wrap { width: 100%; overflow-x: auto; }

/* ---------- 13. Модалка ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Поле вокруг модалки — две ступени ритма подряд (16 + 8): столько же
     вычитается из её предельной высоты ниже, поэтому оба места считают
     от одних и тех же токенов, а не от литерала. */
  padding: calc(var(--sp-5) + var(--sp-3)) var(--sp-5);
  background: rgba(17, 24, 32, .42);
  overflow-y: auto;
}
.modal {
  display: flex;
  flex-direction: column;
  width: min(720px, 100%);
  max-height: calc(100vh - (var(--sp-5) + var(--sp-3)) * 2);
  border-radius: var(--r-modal);
  background: var(--c-surface);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: modal-in .14s ease-out;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.modal--wide  { width: min(1180px, 100%); }
.modal--small { width: min(520px, 100%); }

.modal__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-line);
}
.modal__title { flex: 1 1 auto; font-size: var(--fs-h); }
/* Крестик — круглая кнопка на утопленной подложке: в шапке модалки он стоит
   один и должен читаться как элемент управления, а не как значок в тексте. */
.modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: var(--c-surface-sunk);
  color: var(--c-muted);
  cursor: pointer;
}
.modal__close:hover { background: var(--c-surface-mute); color: var(--c-text-strong); }
.modal__body { flex: 1 1 auto; padding: var(--sp-5) var(--sp-6); overflow-y: auto; }
.modal__body--flush { padding: 0; }
.modal__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--c-surface-alt);
}
.modal__foot .btn { height: var(--h-lg); }
.modal__foot .modal__spacer { flex: 1 1 auto; }

/* ---------- 14. Тосты ----------
   Всплывающее сообщение — белая карточка на тени, цвет несёт только знак:
   тост появляется поверх содержимого, и цветная плоскость там перекрикивала бы
   собственный экран. */
.toast-root {
  position: fixed;
  right: var(--sp-6);
  bottom: var(--sp-6);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 380px;
}
.toast {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 0;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs);
  line-height: 1.55;
  animation: toast-in .14s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.toast__icon { flex: none; margin-top: 1px; }
.toast--ok .toast__icon { color: var(--c-ok); }
.toast--warn .toast__icon { color: var(--c-warn); }
.toast--error .toast__icon { color: var(--c-alert); }
.toast__text { flex: 1 1 auto; min-width: 0; }
.toast__close {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
}
.toast__close:hover { color: var(--c-text-strong); }