/* Оформление рабочее, не окончательное: вёрстка будет перестраиваться под
   запросы заказчика, и она отделена от сценариев именно ради этого. */
:root {
  --ink: #1a2224; --muted: #5f7175; --line: #dce3e3; --bg: #f4f6f6;
  --ours: #0e6b62; --warn: #8a6410;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.5; }
/* Ширину задаёт раздел, а не оболочка. Список решений - колонка для чтения:
   строка во весь экран заставляет глаз ездить от имени к сроку через пустоту.
   Доска и карточка наоборот: им нужен весь стол, иначе колонки и переписка
   ужимаются в середину, а по краям остаётся поле. */
.shell { max-width: 860px; margin: 0 auto; padding: 16px; }
.shell--wide { max-width: none; }

.card__head h1 { margin: 0 0 4px; font-size: 1.35rem; }
.card__meta { margin: 0 0 12px; color: var(--muted); font-size: .9rem; }
.stage { color: var(--ink); font-weight: 600; }
.stage__manual { background: #fff; border: 1px solid var(--line); border-radius: 3px;
  padding: 0 6px; font-size: .75rem; color: var(--warn); }

.flags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.flag { background: #fff; border: 1px solid var(--line); border-radius: 3px;
  padding: 2px 8px; font-size: .8rem; }
.flag--ours { border-color: var(--ours); color: var(--ours); }
.notice { background: #fff; border-left: 3px solid var(--warn); padding: 8px 12px;
  margin: 0 0 12px; font-size: .9rem; }

.sections { display: flex; gap: 16px; border-bottom: 1px solid var(--line);
  margin-bottom: 12px; font-size: .9rem; }
.sections__item { padding: 6px 0; color: var(--muted); }
.sections__item--active { color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--ours); }

/* Лента как в мессенджере: наше справа, клиентское слева. Менеджер весь день
   читает переписку в телеграме, и вторая раскладка тех же реплик заставляет
   его каждый раз соображать, кто написал. */
/* Лента прокручивается сама, а не вместе со страницей: поле ответа обязано
   оставаться на экране. Иначе прочитать последнюю реплику и ответить на неё -
   это два конца длинной страницы, и менеджер мотает туда-сюда на каждое
   сообщение. */
.feed { display: flex; flex-direction: column; gap: 6px; overflow-y: auto;
  padding: 4px 2px; max-height: 54vh; }
.feed__more, .feed__empty { color: var(--muted); font-size: .85rem; text-align: center; margin: 0; }
.msg { display: flex; }
.msg--out { justify-content: flex-end; }
.msg__bubble { max-width: 78%; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; padding: 7px 11px 4px; font-size: .92rem; }
.msg--out .msg__bubble { background: #e7f3ef; border-color: #cfe5de; }
.msg--specialist .msg__bubble { background: #f2f6e8; border-color: #dde6c8; }
.msg--unknown .msg__bubble { border-style: dashed; }
.msg__who { display: block; font-size: .76rem; color: var(--muted); margin-bottom: 2px; }
.msg__text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__media { margin: 4px 0 0; font-size: .85rem; color: var(--muted); }
/* Наши заготовки длинные: письмо про пакет документов занимает экран целиком,
   и переписка из-за него не читается. Свёрнутый вид - это вид ленты, а не
   потеря текста. */
.msg__long summary { cursor: pointer; list-style: none; }
.msg__long summary::-webkit-details-marker { display: none; }
.msg__long[open] summary { display: none; }
.msg__more { color: var(--ours); font-size: .82rem; }
.msg__ts { display: block; text-align: right; font-size: .72rem; color: var(--muted);
  font-variant-numeric: tabular-nums; }

@media (max-width: 600px) { .shell { padding: 12px 10px; } .card__head h1 { font-size: 1.15rem; } }

/* --- Доска --------------------------------------------------------------- */
.crumbs { margin: 0 0 10px; font-size: .85rem; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ours); }

.board__head h1 { margin: 0 0 2px; font-size: 1.35rem; }
.board__summary { margin: 0 0 16px; color: var(--muted); font-size: .9rem; }
.board__attention { color: var(--warn); font-weight: 600; }
.board__empty { background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 16px; color: var(--muted); }

/* Колонки прокручиваются вбок: этапов шесть, и на телефоне они всё равно не
   поместятся рядом. Вертикальный список вместо этого превратил бы доску в
   длинную ленту, где не видно распределения. */
.board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.column { flex: 0 0 260px; display: flex; flex-direction: column; gap: 8px; }
.column__head { display: flex; justify-content: space-between; align-items: baseline;
  margin: 0; font-size: .85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.column__count { background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 7px; font-size: .8rem; }
.column__cards { display: flex; flex-direction: column; gap: 8px; }
.column__empty { color: var(--faint, #93a3a5); font-size: .8rem; margin: 0; padding: 4px 2px; }

.card { position: relative; display: flex; flex-direction: column; gap: 3px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 10px 12px; text-decoration: none; color: inherit; }
.card:hover { border-color: var(--ours); }
.card--attention { border-left: 3px solid var(--warn); }
.card__name { font-weight: 600; font-size: .95rem; }
.card__handle { color: var(--muted); font-size: .8rem; }
.card__flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.card__flags .flag { font-size: .72rem; font-weight: 500; padding: 1px 6px; }
.card__label { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px;
  border-radius: 50%; }
.card__label--red { background: #c0392b; }
.card__label--green { background: #2d7a2d; }
.card__label--blue { background: #1b41ca; }
.card__label--purple { background: #7c3aed; }

/* --- Ответ из карточки --------------------------------------------------- */
.reply { display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; }
.reply textarea { width: 100%; border: 1px solid var(--line); border-radius: 4px;
  padding: 8px; font: inherit; resize: vertical; }
.reply textarea:focus { outline: 2px solid var(--ours); outline-offset: -1px; }
.reply__row { display: flex; align-items: center; gap: 12px; }
.reply button { background: var(--ours); color: #fff; border: 0; border-radius: 4px;
  /* Палец, а не курсор: менеджеры работают с телефона весь день. */
  padding: 10px 18px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.reply button:disabled { opacity: .5; cursor: default; }
.reply__status { font-size: .85rem; color: var(--muted); }
.reply__status--warn { color: var(--warn); }
.reply__status--error { color: #c0392b; }

/* --- Вход ---------------------------------------------------------------- */
.login { max-width: 320px; margin: 12vh auto 0; display: flex; flex-direction: column;
  gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.login h1 { margin: 0; font-size: 1.2rem; }
.login label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem;
  color: var(--muted); }
.login input { border: 1px solid var(--line); border-radius: 4px; padding: 10px;
  font: inherit; min-height: 44px; }
.login button { background: var(--ours); color: #fff; border: 0; border-radius: 4px;
  padding: 12px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.login__error { margin: 0; color: #c0392b; font-size: .88rem; }

@media (max-width: 600px) {
  .column { flex-basis: 78vw; }
  .reply button { width: 100%; }
  .reply__row { flex-direction: column; align-items: stretch; }
}

/* Дата заведения на карточке: справа снизу, тише имени - она нужна для оценки
   «сколько дело уже висит», а не для чтения в первую очередь. */
.card__date { position: absolute; right: 10px; bottom: 8px; font-size: .72rem;
  color: var(--muted); font-variant-numeric: tabular-nums; }
.card { padding-bottom: 24px; }
.card--attention .card__date { color: var(--warn); }

.sections__item { background: none; border: 0; font: inherit; cursor: pointer; }
.sections__count { color: var(--muted); font-weight: 400; }

.docs { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }
.docs__item { display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; }
.docs__name { font-weight: 600; }
.docs__meta { color: var(--muted); font-size: .85rem; }

.events { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 6px; font-size: .9rem; }
.events__item { display: flex; gap: 10px; align-items: baseline; }
.events__at { color: var(--muted); font-variant-numeric: tabular-nums; }
.events__kind { font-weight: 600; }
.events__actor { color: var(--muted); margin-left: auto; }

/* --- Сегодня: вкладки со счётчиками ------------------------------------ */
/* Вкладки переносятся, а не прокручиваются вбок. Прокрутка уводит активную
   вкладку за край: открыт один раздел, а на экране счётчики двух других -
   и главное требование, «видеть все числа сразу», перестаёт выполняться. */
.today__head h1 { margin: 0 0 4px; }
.today__summary { margin: 0 0 14px; color: #555; }
.tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.tab {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 9px 12px; border: 1px solid #d5d5d5; border-radius: 6px;
  text-decoration: none; color: #222; background: #fff; font-size: 0.92rem;
}
.tab--ours { border-color: #c9a227; }
.tab--active { background: #222; color: #fff; border-color: #222; }
.tab--empty { opacity: 0.5; }
.tab__count {
  min-width: 20px; text-align: center; border-radius: 10px;
  background: rgba(0,0,0,0.08); padding: 1px 6px; font-size: 0.82rem;
}
.tab--active .tab__count { background: rgba(255,255,255,0.22); }

/* Записи - отдельные карточки, а не строки подряд. Полоска срочности слева у
   соседних строк сливается в одну длинную линию, и по ней уже не понять, где
   кончается одно обращение и начинается следующее: разделителем должен быть
   промежуток, а не ещё одна линия. */
.rows { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }
.row { background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.row__link { display: block; padding: 11px 13px; text-decoration: none; color: inherit;
  border-left: 3px solid transparent; border-radius: 6px; }
.row:hover { border-color: var(--ours); }
.row--overdue .row__link { border-left-color: #c9a227; }
/* Красным - то, что перезрело. Внутри вкладки «документы не едут» просрочено
   всё по определению, и одинаковая отметка на каждой строке ничего не
   сообщает: глаз должен цепляться за худшее. */
.row--hopeless .row__link { border-left-color: #a33; }
.row__who { display: block; font-weight: 600; color: #111; }
.row__meta { display: block; color: #666; font-size: 0.88rem; margin-top: 2px; }
.row__wait { color: var(--ink); font-weight: 600; }
.row--hopeless .row__wait { color: #a33; }
.row__hopeless { color: #a33; }
.row__last {
  display: block; margin: 6px 0 0; color: #444; font-size: 0.9rem;
  overflow: hidden; text-overflow: ellipsis;
}
.rows__empty { color: #666; }

/* Палец, а не курсор: с телефона это основной экран менеджера. */
@media (max-width: 600px) {
  /* Вкладки занимают строку поровну: шесть штук укладываются в три ряда, и
     все шесть счётчиков видны до того, как менеджер тронет экран. */
  .tab { flex: 1 1 46%; justify-content: space-between; padding: 11px 12px; }
  /* Строка - две строки текста, не больше. Иначе на экран помещается три
     записи, и «сколько там работы» приходится узнавать прокруткой.
     Управления в строке нет намеренно: ряд кнопок у каждой записи съел бы
     экран целиком, а решения принимаются в карточке, куда ведёт вся строка. */
  .row__link { padding: 10px 11px; }
  .row__who { font-size: 1rem; }
  .row__meta { font-size: 0.82rem; }
  .row__last {
    margin-top: 3px; font-size: 0.86rem;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --- Разбор потоком: очередь, заготовки, решения ------------------------ */
/* Полоса очереди липнет к верху: на телефоне карточка длинная, и «следующий»
   должен быть под пальцем всегда, а не после пролистывания переписки. */
.queue {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; padding: 8px 0; margin-bottom: 8px;
  background: #fff; border-bottom: 1px solid #eee;
}
.queue__back { text-decoration: none; color: #666; font-size: 1.1rem; padding: 4px 8px; }
.queue__where { color: #555; font-size: 0.9rem; }
.queue__nav { display: flex; gap: 6px; }
.queue__step {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; border: 1px solid #d5d5d5; border-radius: 6px;
  text-decoration: none; color: #222; font-size: 1.2rem; background: #fff;
}
.queue__step--off { opacity: 0.35; }

/* Заготовка - не действие, а вставка текста в поле. Выглядеть как «Отправить»
   она не должна: иначе рука жмёт её вместо отправки. Правило перекрывает
   общее оформление кнопок формы ответа. */
.reply .chip, .decide .chip {
  background: #fff; color: #222; border: 1px solid #d5d5d5;
  border-radius: 14px; padding: 7px 11px; font-size: 0.86rem; width: auto;
}
/* Скрытие обязано побеждать раскладку. У ленты задан display: flex, и он
   перебивает атрибут hidden - панель остаётся на экране, хотя переключатель
   уверен, что убрал её. Ошибка тихая: видно только глазами и только на той
   панели, у которой display задан явно. */
[hidden] { display: none !important; }

.chip {
  display: inline-block; padding: 7px 11px; border: 1px solid #d5d5d5;
  border-radius: 14px; background: #fff; color: #222; font: inherit;
  font-size: 0.86rem; cursor: pointer; margin: 0 6px 6px 0;
}
.chip--close { border-color: #d8b4b4; }
.reply__templates { margin-bottom: 6px; }

.decide { margin-top: 10px; }
.decide__group { display: inline-block; margin-right: 8px; }
.decide__group summary { list-style: none; }
.decide__group summary::-webkit-details-marker { display: none; }
/* Решения раскрываются по требованию: ряд из десяти причин закрытия, всегда
   развёрнутый, на телефоне занимает экран целиком. */
.decide__row { padding: 8px 0 0; }
.decide__status { display: block; margin-top: 6px; color: #555; font-size: 0.88rem; }

@media (max-width: 600px) {
  .queue__where { font-size: 0.84rem; }
  .chip { padding: 9px 13px; font-size: 0.9rem; }
}

/* --- Шапка: один интерфейс, разделы переключаются -------------------------- */
/* Ссылки прокручиваются вбок, а не переносятся: разделов будет больше, чем
   помещается в строку телефона, а перенос отдаёт под меню треть экрана на
   КАЖДОЙ странице. У вкладок «Сегодня» решение обратное - там числа обязаны
   быть видны все сразу, здесь видеть все разделы сразу не нужно. */
.nav {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid #e6e6e6; margin-bottom: 16px;
}
.nav__brand { font-weight: 700; font-size: 0.9rem; white-space: nowrap; padding: 12px 0; }
.nav__links { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav__links::-webkit-scrollbar { display: none; }
.nav__link {
  display: block; padding: 12px 12px; text-decoration: none; color: #222;
  font-size: 0.92rem; white-space: nowrap; border-bottom: 2px solid transparent;
  flex-shrink: 0;
}
.nav__link--active { color: var(--ours); border-bottom-color: var(--ours); font-weight: 600; }
.nav__out { margin: 0; }
.nav__out button {
  background: none; border: 0; color: #777; font: inherit; font-size: 0.88rem;
  cursor: pointer; padding: 12px 0; white-space: nowrap;
}
.nav__out button:hover { color: #222; }

@media (max-width: 600px) {
  .nav { gap: 8px; }
  .nav__brand { font-size: 0.84rem; }
  .nav__link { padding: 12px 10px; font-size: 0.88rem; }
}


/* --- Карточка обращения: факты слева, работа справа ---------------------- */
/* Две колонки, как в любой CRM: слева то, что о деле известно, справа разговор
   с человеком. В одну колонку подряд переписка уезжает под факты, и до неё
   каждый раз надо доскроллить - а открывают карточку как раз ради неё. */
.case { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px;
  align-items: start; }
.case__facts { display: flex; flex-direction: column; gap: 12px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.case__work { display: flex; flex-direction: column; min-width: 0; }

.facts__who { display: flex; flex-direction: column; gap: 2px; }
.facts__name { font-size: 1.1rem; }
.facts__handle, .facts__id { color: var(--muted); font-size: .85rem; }
.facts__phone { color: var(--ours); font-size: .9rem; text-decoration: none; }
.facts__block { display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--line); padding-top: 10px; }
.facts__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); }
.facts__value { font-size: .92rem; }
.facts__value--empty { color: var(--muted); }
.facts__bad { color: #a33; font-weight: 600; font-size: .82rem; }
.facts__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.facts__select, .facts__input { border: 1px solid var(--line); border-radius: 4px;
  padding: 8px; font: inherit; font-size: .92rem; min-height: 40px; background: #fff; }
.facts__select { flex: 1; min-width: 0; }
.facts__hint { font-size: .82rem; color: var(--muted); }
.facts__money { gap: 4px; }
.facts__foot { margin: 0; color: var(--muted); font-size: .78rem; }

.facts__colors { display: flex; gap: 8px; }
.dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line);
  cursor: pointer; padding: 0; }
.dot--on { box-shadow: 0 0 0 2px #fff inset, 0 0 0 2px var(--ink); }
.dot--none { position: relative; }
.dot--none::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px;
  height: 1px; background: var(--line); transform: rotate(45deg); }

.reply__keys { font-size: .78rem; color: var(--muted); }
.panel { min-width: 0; }

/* --- Доска: фильтры и окно карточки -------------------------------------- */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.topbar__search { border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px;
  font: inherit; font-size: .92rem; min-height: 40px; min-width: 200px; }
.topbar__check { font-size: .88rem; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.topbar__total { margin-left: auto; color: var(--muted); font-size: .9rem; }
.drop { position: relative; }
.drop__body { position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px;
  min-width: 220px; box-shadow: 0 6px 20px rgba(0,0,0,.1); }
.drop__row { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: .9rem; }
.drop__quick { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.drop__range { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.drop__range input { border: 1px solid var(--line); border-radius: 4px; padding: 6px;
  font: inherit; font-size: .85rem; }
.drop__actions { display: flex; gap: 12px; border-top: 1px solid var(--line);
  margin-top: 6px; padding-top: 6px; }
.link { background: none; border: 0; color: var(--ours); font: inherit; font-size: .85rem;
  cursor: pointer; padding: 0; text-decoration: underline; }
.chip--on { background: var(--ink); color: #fff; border-color: var(--ink); }

.modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: center; padding: 20px; }
.modal__sheet { position: relative; background: var(--bg); border-radius: 8px;
  width: 100%; max-width: 1040px; max-height: calc(100vh - 40px); overflow-y: auto;
  padding: 18px; }
.modal__close { position: absolute; top: 8px; right: 12px; background: none; border: 0;
  font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer; }
.modal__wait { color: var(--muted); }

/* Переход к следующей карточке объявляется вслух. Молчаливая подмена страницы
   читается как сбой: человек дописал сообщение внизу длинной карточки, экран
   сменился сам, и он не понял, отправилось ли оно и куда делся клиент. */
.advance { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff; border-radius: 22px; padding: 10px 16px;
  font-size: .9rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.advance__cancel { background: none; border: 1px solid rgba(255,255,255,.5); color: #fff;
  border-radius: 14px; padding: 5px 12px; font: inherit; font-size: .85rem; cursor: pointer; }

@media (max-width: 900px) {
  /* На узком экране разговор идёт ПЕРВЫМ, а факты под ним. Карточку открывают,
     чтобы прочитать последнюю реплику и ответить; колонка фактов сверху
     занимает весь экран телефона, и до переписки приходится доскроллить -
     каждый раз, на каждой карточке очереди. */
  .case { grid-template-columns: 1fr; }
  .case__work { order: -1; }
  .feed { max-height: 46vh; }
  .topbar__total { margin-left: 0; }
}

/* --- Отчёты ------------------------------------------------------------- */

.periods { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: .85rem; }
.periods__label { color: var(--muted); }
.period { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 3px 10px; color: var(--ink); text-decoration: none; }
.period--active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Пояснение к отчёту читается ДО графика и не спорит с ним за внимание:
   поэтому мелко, серым и без рамки-плашки. */
.about { margin: 0 0 14px; color: var(--muted); font-size: .86rem; max-width: 74ch; }
.about__line { margin: 0 0 3px; }
.about__line b { color: var(--ink); }

.totals { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0 0 10px;
  padding: 0; }
.totals--page { margin-bottom: 14px; }
.metric { background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 12px; min-width: 132px; }
.metric__value { display: block; font-size: 1.28rem; font-weight: 600; line-height: 1.2; }
.metric__label { display: block; font-size: .8rem; color: var(--muted); }
.metric__note { display: block; font-size: .74rem; color: var(--muted); opacity: .85; }

.chart { background: #fff; border: 1px solid var(--line); border-radius: 8px;
  margin: 0 0 16px; padding: 12px 14px; }
.chart__head { margin-bottom: 8px; }
/* Вывод словами. Три состояния и полоска слева вместо значка: значок надо
   узнавать, а цвет и первое слово читаются сразу. */
.verdict { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 10px;
  padding: 8px 11px; border-radius: 6px; font-size: .88rem; background: #f3f6f6;
  border-left: 3px solid var(--muted); }
.verdict__mark { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  margin-top: 5px; background: var(--muted); }
.verdict__advice { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; }
.verdict--good { background: #eef6f2; border-left-color: var(--ours); }
.verdict--good .verdict__mark { background: var(--ours); }
.verdict--watch { background: #fdf6e7; border-left-color: var(--warn); }
.verdict--watch .verdict__mark { background: var(--warn); }
.verdict--bad { background: #fbeeec; border-left-color: #a5331f; }
.verdict--bad .verdict__mark { background: #a5331f; }
.chart__title { margin: 0; font-size: 1.02rem; }
.chart__hint { margin: 2px 0 0; color: var(--muted); font-size: .82rem; max-width: 84ch; }
.chart__canvas { position: relative; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; padding-left: 14px; }
.chart__empty { color: var(--muted); font-size: .88rem; margin: 6px 0 0; }

.chart__grid { stroke: #eef1f1; stroke-width: 1; }
.chart__axis { stroke: var(--line); stroke-width: 1; }
.chart__tick { stroke: var(--line); stroke-width: 1; }
.chart__tick--major { stroke: #b9c4c4; }
.chart__label { font-size: 9px; fill: var(--muted); }
.chart__axis-name { font-size: 9px; fill: var(--muted); font-style: italic; }
.chart__label--marker { font-size: 9px; fill: var(--warn); }
.chart__marker { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 3; }
.chart__cursor { stroke: #b9c4c4; stroke-width: 1; stroke-dasharray: 3 3; }
.chart__line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.chart__dot { opacity: .85; }
.chart__hover rect { cursor: crosshair; }
/* Выключенная в легенде линия исчезает вместе со своими точками, но остаётся
   в подсказке: сравнивают две линии из пяти, а не забывают про остальные.
   Классом, а не атрибутом hidden: у элементов SVG свойства hidden нет. */
.chart__series--off { display: none; }

/* Подсказка появляется у курсора и не перехватывает мышь: иначе она сама
   попадает под курсор, график считает это уходом, и подсказка мигает. */
.chart__tip { position: absolute; z-index: 5; pointer-events: none;
  background: var(--ink); color: #fff; border-radius: 6px; padding: 7px 9px;
  font-size: .78rem; line-height: 1.45; box-shadow: 0 4px 14px rgba(0,0,0,.22);
  max-width: 280px; }
.chart__tip b { display: block; margin-bottom: 3px; font-weight: 600; }
.chart__tip span { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 5px; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none;
  margin: 8px 0 0; padding: 0; }
.legend__button { display: inline-flex; align-items: center; gap: 6px; background: none;
  border: 0; padding: 2px 0; font: inherit; font-size: .82rem; color: var(--ink);
  cursor: pointer; }
.legend__button[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.legend__button[aria-pressed="false"] .legend__dot { opacity: .3; }
.legend__dot { width: 10px; height: 10px; border-radius: 50%; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 8px;
  margin: 0 0 16px; padding: 12px 14px; }
.panel__title { margin: 0 0 2px; font-size: 1.02rem; }
.panel__subtitle { margin: 12px 0 4px; font-size: .92rem; }
.panel__hint { margin: 0 0 10px; color: var(--muted); font-size: .82rem; max-width: 84ch; }

.funnel { list-style: none; margin: 0; padding: 0; }
.funnel__step { display: grid; grid-template-columns: 180px 1fr 48px 210px; gap: 10px;
  align-items: center; padding: 3px 0; font-size: .86rem; }
.funnel__bar { background: #eef1f1; border-radius: 3px; height: 14px; overflow: hidden; }
.funnel__fill { display: block; height: 100%; background: var(--ours); }
.funnel__value { font-weight: 600; text-align: right; }
.funnel__share { color: var(--muted); font-size: .8rem; }
.reasons { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0;
  padding: 0; font-size: .85rem; }

/* Широкая таблица не ломает страницу, а прокручивается сама: на телефоне
   когорт всё равно не разглядеть целиком, но и верстку они рвать не должны. */
.table-scroll { overflow-x: auto; }
.cohorts { border-collapse: collapse; width: 100%; font-size: .82rem; }
.cohorts th, .cohorts td { border-bottom: 1px solid var(--line); padding: 5px 8px;
  text-align: left; white-space: nowrap; }
.cohorts thead th { color: var(--muted); font-weight: 600; font-size: .78rem; }
.cohorts__size { font-weight: 600; }
.cohorts__share { display: block; }
.cohorts__days { display: block; color: var(--muted); font-size: .74rem; }

@media (max-width: 720px) {
  /* График ужимается втрое, а вместе с ним и подписи: девять пикселей внутри
     системы координат превращаются в четыре на экране. Поэтому на телефоне
     шрифт крупнее, а подписей вдвое меньше - лучше шесть читаемых делений,
     чем двенадцать нечитаемых. */
  .chart__label { font-size: 17px; }
  .chart__xlabels text:nth-child(even) { display: none; }
  .funnel__step { grid-template-columns: 1fr 44px; grid-template-areas:
    "label value" "bar bar" "share share"; }
  .funnel__label { grid-area: label; }
  .funnel__bar { grid-area: bar; }
  .funnel__value { grid-area: value; }
  .funnel__share { grid-area: share; }
}