/* Карта пути спринта: ОДНА разметка на три экрана. 2026-09-16,
   docs/DECISIONS.md §169.

   Почему свой файл, а не классы Tailwind. Карта стоит на трёх
   поверхностях — карточка спринта, «Сегодня» и админский экран клиентов
   (/api/v1/admin/rychag/clients), — и третья не наследует ни одного
   шаблона контура: у неё свой <style> и Tailwind она не подключает.
   Прежняя редакция карты была написана утилитарными классами, поэтому
   в админке её не существовало вовсе: экран печатал вместо неё заголовок
   оси времени. Подключить туда Tailwind нельзя без разговора — его
   preflight обнулил бы собственные стили страницы.

   Отсюда правило: разметка карты классов Tailwind не несёт ни одного,
   и всё, что ей нужно, лежит здесь. Подключается двумя <link> —
   rychag_base.html (весь кабинет) и admin/rychag_clients.html.

   РАЗЛИЧАТЬСЯ МОЖЕТ РАЗМЕР, НО НЕ УСТРОЙСТВО (условие владельца).
   Модификатор .spath--row — это меньше кегль и уже отступы, и больше
   ничего: те же шесть подписанных точек, тот же заголовок, тот же
   счётчик, та же подсказка. Свёрнутой формы (шесть безымянных чёрточек)
   больше нет — она не читалась как путь.

   Подсказка — ЧИСТЫЙ CSS: inline-JS в контуре запрещён, а модуль ради
   наведения был бы способом сломать страницу у того, у кого он
   не загрузился. С клавиатуры этап доступен tabindex. */

/* ПОДПИСЬ ОДНОЙ СТРОКОЙ НАД ТОЧКАМИ (2026-09-17, §170). Ярусов было
   четыре — заголовок, счётчик, срок, ряд точек, — и на «Сегодня» строка
   менеджера растягивалась вниз ровно на них. Стало два: строка подписи
   и полоса.

   Сбоку от точек подпись ставить пробовали, и замер это отверг: в узкой
   доле заголовок ложится в три строки, и страница выходит ВЫШЕ исходной
   (`docs/FINDINGS.md` §48). Точкам к тому же нужна вся ширина — иначе
   шесть подписей слипаются.

   Счётчик снят вовсе: «3 из 6 пройдено» и «Этап 4 из 6» — одно число,
   названное дважды. */
.spath {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 10px 16px 12px;
  max-width: 46rem;
}

.spath__head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  line-height: 1.3;
}

.spath__title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.spath__detail {
  font-size: 12px;
  color: #6b7280;
}

.spath__steps {
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
}

.spath__step {
  position: relative;
  flex: 1 1 0;
  text-align: center;
  min-width: 0;
}

/* Ряд с кружком фиксирован по высоте: у текущего этапа точка крупнее,
   и без этого подписи под ней съезжали вниз относительно соседних. */
.spath__dots {
  position: relative;
  display: flex;
  height: 20px;
  align-items: center;
  justify-content: center;
}

.spath__line {
  position: absolute;
  top: 50%;
  width: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #e5e7eb;
}

.spath__line--left { left: 0; }
.spath__line--right { right: 0; }
.spath__line--passed { background: #818cf8; }
/* У крайних этапов своя половина не рисуется: путь начинается
   и кончается на них. */
.spath__line--none { background: transparent; }

.spath__dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #fff;
  box-shadow: 0 0 0 2px #d1d5db;
}

.spath__step.is-done .spath__dot {
  background: #6366f1;
  box-shadow: 0 0 0 2px #6366f1;
}

/* Тон несёт ТОЛЬКО текущий этап: пройденный оценивать нечем, а будущий
   продукт не знает (§133). Пять тонов те же, что красят строку состояния. */
.spath__step.is-now .spath__dot {
  width: 20px;
  height: 20px;
  background: #4f46e5;
  box-shadow: 0 0 0 2px #4f46e5;
}

.spath__step.is-now.tone-alarm .spath__dot { background: #ef4444; box-shadow: 0 0 0 2px #ef4444; }
.spath__step.is-now.tone-warn  .spath__dot { background: #f59e0b; box-shadow: 0 0 0 2px #f59e0b; }
.spath__step.is-now.tone-ok    .spath__dot { background: #10b981; box-shadow: 0 0 0 2px #10b981; }
.spath__step.is-now.tone-idle  .spath__dot { background: #9ca3af; box-shadow: 0 0 0 2px #9ca3af; }

/* ПОДПИСЬ НЕ РАЗВОРАЧИВАЕТСЯ В ДВЕ СТРОКИ НИ ПРИ КАКОЙ ШИРИНЕ (условие
   владельца, 2026-09-19, §176). С числом в скобках самая длинная подпись
   выросла на четыре знака («Наблюдение (12)»), и без запрета она ложилась
   бы в два яруса ровно у того этапа, где стоит число, — то есть карта
   на «Сегодня» дышала бы вверх-вниз в зависимости от того, снят ли замер.
   Место под это куплено ступенями кегля ниже, и ступени ЗАМЕРЕНЫ. */
.spath__label {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.2;
  color: #9ca3af;
  white-space: nowrap;
}

/* Три полосы числа записей (§176). Цвета взяты у зон контура
   (`rychag_base.html`, `:root`) переменной с запасным значением: админский
   экран токенов контура не подключает, а число на нём обязано значить
   то же самое. Жёлтый здесь ОХРА — чистый на белом нечитаем, и это
   не наш выбор, а уже принятое решение контура.

   Полужирный, а не крупнее: подпись стоит в строке фиксированной высоты,
   и кегль, выросший у одного этапа, сдвинул бы соседние. */
.spath__count { font-weight: 700; }
.spath__count--short { color: var(--zone-red, #dc2626); }
.spath__count--thin { color: var(--zone-yellow, #b45309); }
.spath__count--enough { color: var(--zone-green, #16a34a); }

.spath__step.is-done .spath__label { color: #6b7280; }

.spath__step.is-now .spath__label {
  color: #111827;
  font-weight: 600;
}

/* Подсказка стоит СНИЗУ: сверху она накрывала заголовок карты и счётчик
   пройденного — то есть прятала ответ на главный вопрос ровно тогда,
   когда человек тянулся за подробностью. Крайние прижаты к своему краю:
   по центру их обрезало рамкой карточки. И то, и другое видно только
   отрисовкой. */
.spath__hint {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: none;
  width: 15rem;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #111827;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .25);
  pointer-events: none;
}

.spath__step--first .spath__hint { left: 0; transform: none; }
.spath__step--last .spath__hint { left: auto; right: 0; transform: none; }

/* В УЗКОЙ КАРТЕ ПОДСКАЗКА ПРИЖИМАЕТСЯ ВПРАВО У КАЖДОГО ЭТАПА
   (2026-09-22, §187), а не только у последнего.

   Замер: на телефоне карта стоит в ячейке таблицы состояний и получает
   132 px ширины (в админском экране клиентов — 82), а подсказка шириной
   13rem = 208 px. Отсчитанная от левого края своего этапа, она уезжала
   за правый край окна на 52-94 px, то есть обрезалась им. Прижатая
   к правому краю этапа — помещается целиком: карта в обоих случаях стоит
   во ВТОРОЙ колонке, за фиксированными 12rem первой, и слева от неё
   не меньше 200 px.

   Порог берётся у КАРТЫ, а не у окна, и это важнее, чем кажется:
   карточка спринта при тех же 390 px даёт карте 358 px, подсказка там
   помещается по-прежнему и трогать её незачем. Ровно тот же довод, что
   у ступеней кегля ниже. */
@container (max-width: 20rem) {
  .spath__hint,
  .spath__step--first .spath__hint {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* Запасная редакция для браузера без контейнерных запросов: порог по окну.
   Хуже точностью — колонка таблицы и окно не одно и то же, — но лучше
   подсказки, наполовину оказавшейся за краем экрана. */
@supports not (container-type: inline-size) {
  @media (max-width: 640px) {
    .spath__hint,
    .spath__step--first .spath__hint {
      left: auto;
      right: 0;
      transform: none;
    }
  }
}

.spath__step:hover .spath__hint,
.spath__step:focus .spath__hint,
.spath__step:focus-within .spath__hint {
  display: block;
}

/* Размер для строки таблицы — «Сегодня» и админский экран клиентов.
   Устройство то же, кегль мельче: в ячейке рядом стоят подпись
   состояния, картина обучения и полоса записей. */
.spath--row {
  gap: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fbfbfd;
  max-width: 100%;
}

.spath--row .spath__title { font-size: 12px; }
.spath--row .spath__detail { font-size: 11px; }
.spath--row .spath__dots { height: 16px; }
.spath--row .spath__dot { width: 12px; height: 12px; }
.spath--row .spath__step.is-now .spath__dot { width: 16px; height: 16px; }
.spath--row .spath__label { font-size: 11px; margin-top: 6px; }
.spath--row .spath__hint { width: 13rem; font-size: 11px; }

/* ЧТО В ЭТИХ ЗАПИСЯХ — БЛОК ПОД КАРТОЙ (2026-09-19, §178).

   Виден без наведения, и это его смысл: подсказка этапа отвечает тому,
   кто навёл мышью, а на телефоне наведения нет вовсе. Несут они одно
   и то же и берутся из одного набора — второй источник научил бы экран
   говорить две вещи об одном окне.

   Отделён от точек линией, а не воздухом: карта читается как одна полоса
   (§170), и строка текста сразу под подписями прилипала бы к ним
   шестым этапом.

   Подпись этапа стоит СЛЕВА колонкой фиксированной ширины — «Записи»
   и «Наблюдение» встают друг под другом, и две разбивки читаются как две
   величины, а не как одна, посчитанная дважды. Колонка узкая (5.5rem —
   ширина «Наблюдения» одиннадцатым кеглем); при нехватке места строка
   переносится целиком, а не рвётся между подписью и текстом. */
.spath-told {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #eef0f4;
  display: grid;
  gap: 4px;
}

.spath-told__row {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #374151;
}

.spath-told__step {
  flex: 0 0 5.5rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 10px;
  line-height: 1.7;
}

.spath-told__text { flex: 1 1 14rem; }

.spath-told__crit { font-weight: 600; color: #111827; }

/* Пустая разбивка тусклее, но НЕ тревожнее: «ситуация не встретилась» —
   свойство окна, а не провал менеджера, и красить её в тон срочности
   значило бы вынести приговор наблюдению, которого не было. */
.spath-told__row--empty { color: #6b7280; }

.spath-told__note {
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #9ca3af;
}

.spath--row .spath-told { margin-top: 8px; }
.spath--row .spath-told__row { font-size: 11px; }
.spath--row .spath-told__note { font-size: 10px; }

/* Узкая карта: подпись слева уезжает НАД точками, а не отнимает у них
   ширину. Ярусов снова становится больше, и это честный размен — иначе
   шесть подписей слипаются в «ОбучениеНаблюдение» (§169, §170).

   Порог берётся по ширине САМОЙ КАРТЫ, а не окна: карта стоит в колонке
   таблицы, и окно про ширину этой колонки не знает ничего. Контейнер —
   обёртка `.spath-box`, и она не украшение: `@container` спрашивает
   размер ПРЕДКА, элемент не может быть контейнером сам себе, и правило
   на самой карте не применялось вовсе. */
.spath-box {
  container-type: inline-size;
}

/* СТУПЕНИ ЗАМЕРЕНЫ, А НЕ ВЫБРАНЫ. Мерилась одна величина — переполняет
   ли самая длинная подпись («Наблюдение», десять букв) свою клетку, —
   и мерилась она живым браузером на шести сочетаниях экрана и ширины
   окна (`docs/FINDINGS.md` §48). Каждая ступень стоит там, где на прошлой
   переполнение появлялось.

   Селекторы повторяют `.spath--row` НЕ для красоты: правило размера уже
   стоит в `.spath--row .spath__label`, и короткий селектор его не
   перебивает — контейнерный запрос специфичности не добавляет. Первая
   редакция §170 писала коротко, кегль не менялся, и поймал это замер,
   а не глаза. */
@container (max-width: 48rem) {
  .spath .spath__label,
  .spath--row .spath__label { font-size: 11px; }
}

@container (max-width: 40rem) {
  .spath .spath__label,
  .spath--row .spath__label { font-size: 10px; letter-spacing: -0.2px; }

  .spath__label { padding: 0; }
  .spath--row { padding-left: 8px; padding-right: 8px; }
}

/* ЧЕТВЁРТАЯ СТУПЕНЬ ЗАВЕДЕНА ЧИСЛОМ В СКОБКАХ (2026-09-19, §176), и она
   ЗАМЕРЕНА, как три прежние. «Наблюдение (0)» на четыре знака длиннее
   «Наблюдения», и промежуток между подписями на «Сегодня» при окне 900 px
   (карта 384 px) съедался ровно этими знаками: 12 px до правки, 0 после.
   На спринте без замера — там, где числа нет, — промежуток не менялся
   вовсе, и это самая точная мерка того, что ступень покупает.

   Порог 30rem, а не 25rem: на 25rem подписи уже сталкивались бы, а карта
   384 px — это 24rem, то есть прежняя последняя ступень наступала бы
   ПОСЛЕ столкновения. */
@container (max-width: 30rem) {
  .spath .spath__label,
  .spath--row .spath__label { font-size: 9px; }
}

/* Последняя ступень: на карте уже 25rem «Наблюдению» не хватает и
   десятого кегля. Ужимается межбуквенный просвет, а не число слов. */
@container (max-width: 25rem) {
  .spath .spath__label,
  .spath--row .spath__label { letter-spacing: -0.4px; }
}

/* ПЯТАЯ ступень, и она НЕ про число: шесть подписей не помещаются в карту
   уже 20rem и без скобок — на «Сегодня» при окне 820 px промежуток между
   ними был 3 px ещё до §176. Ступень заведена затем, чтобы число скобок
   не двинуло эту границу вверх: с ней столкновение начинается на той же
   ширине, что и раньше. Ниже 20rem карта тесна по построению, и лечится
   это не кеглем. */
@container (max-width: 20rem) {
  .spath .spath__label,
  .spath--row .spath__label { font-size: 8px; letter-spacing: -0.5px; }
}

/* Запасная редакция ступеней кегля для браузера без контейнерных
   запросов: там порог берётся по окну. Хуже точностью — колонка таблицы
   и окно не одно и то же, — но лучше слипшихся подписей. */
@supports not (container-type: inline-size) {
  @media (max-width: 1200px) {
    .spath .spath__label,
    .spath--row .spath__label { font-size: 10px; letter-spacing: -0.2px; }
  }
}

@media (max-width: 640px) {
  .spath__label { font-size: 10px; }
  .spath--row .spath__label { font-size: 9px; }
}