/* Витрина СПРУТа — экран, который показывают человеку со стороны.
   Дизайн-система: design/design-system.md (закон). Цифры — шрифтом заголовков,
   моноширинного в цифрах нет нигде (§7, правка 2026-08-25). */

/* --- Режим показа: плашка, которую нельзя не заметить ------------------- */
.show-banner {
  display: flex; align-items: center; gap: var(--space-3);
  background: rgba(47, 111, 237, .12);
  border: var(--border-width) solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--card-gutter);
  color: var(--color-accent);
  font-size: var(--text-sm); line-height: var(--leading-sm);
}
.show-banner svg { flex: 0 0 auto; }

.show-toggle {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-muted);
  cursor: pointer; user-select: none;
}
.show-toggle input { accent-color: var(--color-accent); width: 15px; height: 15px; cursor: pointer; }

/* --- Пульс: четыре цифры сверху ---------------------------------------- */
.pulse-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--card-gutter); margin-bottom: var(--card-gutter);
}
.pulse-tile { display: flex; flex-direction: column; gap: var(--space-2); }
.pulse-tile-label {
  font-size: var(--text-xs); line-height: var(--leading-xs);
  color: var(--color-muted); letter-spacing: .01em;
}
.pulse-tile-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-2xl); line-height: var(--leading-2xl);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.pulse-tile-num.is-ok { color: var(--color-success); }
.pulse-tile-num.is-warn { color: var(--color-danger); }
.pulse-tile-num small {
  font-size: var(--text-md); font-weight: 500; color: var(--color-muted); margin-left: 2px;
}
.pulse-tile-note { font-size: var(--text-xs); line-height: 16px; color: var(--color-muted); }

/* Полоса «сколько из целого» — форма вместо ещё одной строки текста (§7). */
.pulse-bar { height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.pulse-bar-fill { height: 100%; border-radius: 3px; background: var(--color-accent); transition: width var(--transition-fast); }
.pulse-bar-fill.is-ok { background: var(--color-success); }
.pulse-bar-fill.is-warn { background: var(--color-danger); }

/* --- Состав системы ----------------------------------------------------- */
.parts { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.part-item { display: flex; flex-direction: column; gap: 2px; }
.part-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-xl); line-height: var(--leading-xl);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.part-label { font-size: var(--text-xs); color: var(--color-muted); }

/* --- Воронка ------------------------------------------------------------ */
.funnel-channel + .funnel-channel { margin-top: var(--space-8); padding-top: var(--space-6); border-top: var(--border-width) solid var(--color-border); }
.funnel-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.funnel-title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-md); color: var(--color-text); }
.funnel-period { font-size: var(--text-xs); color: var(--color-muted); }
.funnel-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); }
.funnel-step { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.funnel-step-label { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: 4px; }
.funnel-step-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-lg); line-height: var(--leading-lg);
  color: var(--color-text); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.funnel-step-unit { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.funnel-delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600;
  padding: 1px 5px; border-radius: var(--radius-sm);
}
.funnel-delta.is-up { color: var(--color-success); background: rgba(26, 157, 108, .12); }
.funnel-delta.is-down { color: var(--color-danger); background: rgba(208, 65, 58, .12); }
.funnel-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-muted); }

/* --- Команда ------------------------------------------------------------
   Карточка должности — ячейка одной ровной сетки: один размер у всех, блок
   различается цветом заливки (см. .team-grid ниже). Цвет приходит переменной
   --tint, её ставит класс .team-card--tN; сама карточка ни одного цвета не
   называет.

   Густота: 16 % у обычного блока, 21 % у главного, 10 % у подчинённого —
   её выбор 28.08.2026 («сделай прозрачность 16, ты вроде в начале делал
   полегче маленько, и подчинённые на 10 %»). До этого в тот же вечер
   пробовали 9 % (читалось как серый) и 32 % (слишком плотно).
   Важно, что «всё в одном цвете» в первый раз выглядело не из-за густоты:
   цвет блока приходит из данных, а сервер за страницей стоял старый и отдавал
   блоки пустыми (см. запасной путь в renderTeam).

   Потолок задаёт не глаз, а контраст мелкого текста (порог WCAG AA 4,5:1).
   Приглушённый #656D7B на 16 % сиреневого даёт 4,00:1 — ниже порога,
   поэтому на цветной карточке он заменён смесью с основным текстом
   (--tint-muted ниже, #565E6A): с ней 16 % дают 4,7…5,5:1, а 21 %
   зелёного — 5,3:1.

   Строка `background: var(--color-bg)` стоит первой намеренно: браузер без
   color-mix берёт её и получает прежний вид, а не прозрачную дыру. */
.team-card {
  --tint: var(--chart-1);
  /* Приглушённый текст, затемнённый ровно настолько, чтобы пройти порог на
     самой густой заливке. Новый цвет не выдуман: это смесь двух токенов. */
  --tint-muted: color-mix(in srgb, var(--color-muted) 70%, var(--color-text));
  background: var(--color-bg);
  background: color-mix(in srgb, var(--tint) 16%, var(--color-surface));
  border: var(--border-width) solid var(--color-border);
  border-color: color-mix(in srgb, var(--tint) 40%, var(--color-border));
  border-radius: var(--radius-md);
  padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2);
}
.team-card .team-zone,
.team-card .team-meta,
.team-card .team-order,
.team-card .team-boss,
.team-card .team-plan-none { color: var(--tint-muted); }

/* Главное выделяется густотой, а не размером: её правка 28.08.2026 —
   «главное как-то должно выделяться, второстепенное должно быть другим
   цветом». Блок с деньгами залит гуще прочих и обведён заметнее; таким в
   конфиге может быть только один блок, иначе выделять становится нечего. */
.team-block--main .team-card {
  background: color-mix(in srgb, var(--tint) 21%, var(--color-surface));
  border-color: color-mix(in srgb, var(--tint) 55%, var(--color-border));
}
.team-block--main .team-block-title { color: var(--color-text); }

/* Подчинённый — тот же цвет блока, но слабее: видно, что он «внутри» шефа. */
.team-card--sub { background: color-mix(in srgb, var(--tint) 10%, var(--color-surface)); }

/* Плашка статуса на цветной карточке садится на белое: полупрозрачная
   заливка §1 считалась от белого фона и на зелёной карточке зелёная плашка
   «в такте» просто исчезала. Заливка осталась не сплошной — белая подложка
   плюс тонкая обводка своим цветом, текст того же цвета. */
.team-card .vit-badge {
  background: var(--color-surface);
  border: var(--border-width) solid color-mix(in srgb, currentColor 35%, transparent);
}

/* Оттенки отделов. Ни одного нового цвета: восемь тонов палитры рядов
   (--chart-1…8) плюс акцент — у них та же работа, что и на графике,
   различать источники, а не показывать «сюда нажми» (§6 design-system.md:
   запрет на второй акцент — про кнопки и ссылки, а не про категориальную
   палитру, которая заведена 27.08.2026 ровно для различения). */
.team-card--t1 { --tint: var(--chart-1); }
.team-card--t2 { --tint: var(--chart-2); }
.team-card--t3 { --tint: var(--chart-3); }
.team-card--t4 { --tint: var(--chart-4); }
.team-card--t5 { --tint: var(--chart-5); }
.team-card--t6 { --tint: var(--chart-6); }
.team-card--t7 { --tint: var(--chart-7); }
.team-card--t8 { --tint: var(--chart-8); }
.team-card--t9 { --tint: var(--color-accent); }

/* Кому отчитывается / кто отчитывается ему — одна строка вместо вложенной
   рамки: подчинение теперь несут оттенок и соседство, а не геометрия. */
.team-boss {
  font-size: var(--text-xs); line-height: 16px; color: var(--color-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.team-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
/* Левая колонка шапки обязана уметь сжиматься: без min-width: 0 она держит
   ширину самого длинного слова, и бейдж «в такте» уезжает за край карточки
   (поймано на «Управляющий каналом Авито» 28.08.2026). */
.team-card-head > div:first-child { min-width: 0; }
.team-name { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); color: var(--color-text); }
.team-zone { font-size: var(--text-xs); line-height: 16px; color: var(--color-muted); }
.team-plan {
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-md); color: var(--color-text); font-variant-numeric: tabular-nums;
}
.team-plan-none { font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-body); font-weight: 400; }
.team-meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-muted); }
.team-order { font-size: var(--text-xs); line-height: 16px; color: var(--color-muted); }

/* --- Честный список того, чего не хватило ------------------------------- */
.unknown-list { margin: 0; padding-left: 18px; font-size: var(--text-sm); line-height: 20px; color: var(--color-muted); }

@media (max-width: 720px) {
  .funnel-steps { grid-template-columns: repeat(2, 1fr); }
}

/* Статус должности — бейдж по конвенции §1: полупрозрачная заливка и текст
   того же цвета, не сплошная. Имена вариантов те же, что на экране гипотез. */
.vit-badge {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 3px 8px; border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600;
}
.vit-badge--ok { background: rgba(26, 157, 108, .12); color: var(--color-success); }
.vit-badge--warn { background: rgba(208, 65, 58, .12); color: var(--color-danger); }
.vit-badge--mute { background: rgba(107, 115, 130, .12); color: var(--color-muted); }

/* Зона должности — одна строка: полный текст живёт в подсказке. Тринадцать
   карточек по пять строк описания превращают экран в простыню (§7, 27.08.2026). */
.team-zone--clip {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Кто ставит планы ---------------------------------------------------- */
.gov { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: var(--space-8); }
.gov-label { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-2); }
.gov-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-3xl); line-height: var(--leading-3xl);
  color: var(--color-text); font-variant-numeric: tabular-nums; margin-bottom: var(--space-3);
}
.gov-num-plan { font-size: var(--text-md); font-weight: 500; color: var(--color-muted); }
.gov-num-none { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-3); }
.gov-verdict { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-muted); }

/* Счётчики стоят ровной сеткой, а не «как лягут»: при flex-wrap четыре
   счётчика ломались 3 + 1 и подписи разной длины давали рваный низ. */
.gov-counts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-4); margin-top: var(--space-6);
}
.gov-count-num {
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--text-lg); color: var(--color-text); font-variant-numeric: tabular-nums;
}
.gov-count-label { font-size: var(--text-xs); color: var(--color-muted); line-height: 16px; }

/* Цепочка «собственник → гендиректор → должности»: вертикаль со стрелками —
   форма, а не строка текста (§7 от 27.08.2026). */
.gov-chain { display: flex; flex-direction: column; gap: var(--space-1); }
.gov-chain-item { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.gov-chain-item--ceo { border-left: 3px solid var(--color-accent); }
.gov-chain-role { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); color: var(--color-text); }
.gov-chain-note { font-size: var(--text-xs); line-height: 16px; color: var(--color-muted); margin-top: 2px; }
.gov-chain-arrow { color: var(--color-muted); font-size: var(--text-sm); padding-left: var(--space-4); }

/* --- Сетка команды -------------------------------------------------------
   Правка 28.08.2026, её слова: «какие-то квадратные, какие-то длинные
   карточки — это херня полная; сделай их все одного размера, но немножко
   подсвеченные, у них разные оттенки, прозрачные, в стиле нашего сайта».

   Что было: подчинение рисовалось геометрией — должность с подчинёнными
   выходила из сетки и становилась рамкой во всю ширину (.team-unit), а
   одиночные должности оставались ячейками (.team-row). Отсюда и брались две
   породы карточек на одном экране, квадратные и длинные.

   Что стало: одна сетка, все тринадцать карточек одного размера
   (grid-auto-rows: 1fr равняет ряды по самому высокому), а подчинение несёт
   оттенок — начальник и его люди одного тона, у людей заливка слабее, и
   стоят они сразу за начальником. Форма больше не спорит с формой. */
.team-blocks { display: flex; flex-direction: column; gap: var(--space-6); }
/* Заголовок блока — то, за что цепляется глаз: без него четыре тона читаются
   как раскраска, с ним — как четыре направления работы (её правка 28.08.2026:
   «не надо вразнобой по цветам… чтобы в глазах всё не прыгало»). */
.team-block-title {
  font-size: var(--text-xs); line-height: var(--leading-xs);
  color: var(--color-muted); letter-spacing: .01em;
  margin-bottom: var(--space-3);
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}
/* Одна высота у всех карточек ЭКРАНА, а не только внутри блока: grid-auto-rows
   равняет ряды своей сетки, а сеток теперь четыре. Число не пишется руками —
   его после отрисовки замеряет renderTeam по самой высокой карточке и кладёт
   сюда переменной. Зашитый px пришлось бы править при каждой новой строке в
   карточке, а замер держится сам. */
.team-card { min-height: var(--team-card-h, 0); }
.team-grid > .team-card { height: 100%; }
/* Нижняя строка карточки прижата к низу: рваный низ и есть та самая «косина». */
.team-meta { margin-top: auto; }
/* Распоряжение — две строки, дальше подсказка: иначе одно длинное
   распоряжение растягивает по высоте все карточки сетки разом. */
.team-order {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 900px) {
  .gov { grid-template-columns: 1fr; }
}