/* Стили экранов. Ни одного числа кегля, цвета и радиуса: всё через токены (web/tokeny.css).
   Разметка и правила сняты с эталона interfeys/maket-den.html — долги эталона (14, 13, 5, 3, кегль 12)
   в новые экраны не перенесены: здесь стоят значения шкалы. */

* { box-sizing: border-box; }

/* Спрятанное прячется по-настоящему. Двойной класс — не украшение: у «.stroka { display: grid }» та же
   специфичность, и одиночный класс проиграл бы ему по порядку правил, как проиграл браузерный [hidden]. */
.spryatano.spryatano { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--ves-obychnyy) var(--kegl-15) / 1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Обводка фокуса — своя. Браузерная синяя не из палитры вовсе: в светлой теме она чужого тона,
   в тёмной светится. Цвет — акцент словом: он один сажается по фону в обеих темах. */
:focus-visible {
  outline: var(--koltso) solid var(--accent-slovo);
  outline-offset: var(--o-2);
}

/* ——— Каркас: прибитая шапка, прокручиваемое тело, прибитый низ ——— */
/* Высота — ровно окно, а не «не меньше»: иначе длинный экран раздувает .ekran, прокручивается всё окно,
   и прибитые шапка с низом уезжают вместе с телом. Прокрутка живёт только внутри .telo.
   Ширина — колонка по центру: продукт не растягивается (решение 46). Шторка ложится внутрь колонки,
   поэтому колонка позиционирована. */
.ekran {
  height: 100dvh;
  max-width: var(--kolonka);
  margin: 0 auto;
  position: relative;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Рамка телефона: пока десктопной раскладки нет, широкое окно получает вокруг колонки корпус телефона —
   честный знак «продукт пока телефонный». Кому она положена, решает модель шапки (views/shapka.js),
   когда показывать — web/karkas.js: второй вёрстки и второго кода для витрины здесь нет. */
[data-ramka="da"] body { background: var(--card); }

[data-ramka="da"] .ekran {
  height: calc(100dvh - var(--o-32));
  margin: var(--o-16) auto;
  border: var(--koltso) solid var(--line);
  border-radius: var(--r-telefon);
}

.shapka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zazor-kolonok);
  padding: var(--o-12) var(--o-16) var(--o-8);
  flex: none;
}

.logo {
  font-size: var(--kegl-22);
  font-weight: var(--ves-logo);
  letter-spacing: .5px;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
}

.logo i { color: var(--accent); font-style: normal; }

.kto {
  display: flex;
  align-items: center;
  gap: var(--o-8);
  font-size: var(--kegl-13);
  color: var(--mute);
}

.kruzhok {
  width: var(--h-vlozhennyy);
  height: var(--h-vlozhennyy);
  border-radius: var(--r-kruglyy);
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--kegl-13);
  font-weight: var(--ves-vydelen);
  border: none;
  font-family: inherit;
  flex: none;
}

/* Кольцо вокруг кружка (решения 36 и 59): outline с отступом наружу — не рамка (она съела бы 32 изнутри)
   и не тень (теней в продукте нет). Раскладку не двигает. Состояний три, и цвет каждого уже в палитре:
   не начат и сдан своими руками — по линии, закрылось само — предупреждение, принят — акцент,
   второй день молчания — опасность. Оранжевый значит «что-то пошло не так», и вовремя сданный
   отчёт под это не подходит: у него кольцо нейтральное. */
.kruzhok[data-koltso="net"] { outline: var(--koltso) solid var(--line); outline-offset: var(--o-2); }
/* «Принято» — свой тон (--prinyato), а не бренд: салатовое кольцо путалось с оранжевым.
   Оранжевое и красное берут севшие по светлоте варианты тона — те же, какими пишут слово:
   кольцо тонкое, а верхний оранжевый на белом даёт 2,77 : 1, и кольца просто не видно. */
.kruzhok[data-koltso="prinyat"] { outline: var(--koltso) solid var(--prinyato); outline-offset: var(--o-2); }
.kruzhok[data-koltso="avtosdacha"] { outline: var(--koltso) solid var(--warn-slovo); outline-offset: var(--o-2); }
.kruzhok[data-koltso="molchanie"] { outline: var(--koltso) solid var(--danger); outline-offset: var(--o-2); }

/* Первая строка меню шапки — что значит кольцо сейчас. Это подпись, а не пункт: нажимать её не на
   что, и кнопкой она быть не должна. */
.menyu .chtoZnachit {
  padding: var(--o-8) var(--o-12);
  border-bottom: var(--linia) solid var(--line);
  font-size: var(--kegl-13);
  color: var(--mute);
  line-height: 1.3;
}

/* Строка состава (5.2б): кружка в ней нет — инвертированный кружок остаётся правилом шапки, один
   на экран. Место под него не пустует: строка сдвигается к полоске слева. */
.chelovek.bezKruzhka { grid-template-columns: 1fr auto; }

/* Заголовок группы в составе: название и подпись под ним, а не встык одной строкой. */
.vnutriZagolovok.gruppa { display: flex; flex-direction: column; gap: var(--o-2); }

.vitrina {
  font-size: var(--kegl-13);
  color: var(--warn);
  padding: 0 var(--o-16) var(--o-8);
  flex: none;
}

.telo {
  flex: 1;
  min-height: 0;  /* без этого тело не сжимается ниже своего содержимого, и прокрутка уходит в окно */
  padding: 0 var(--o-16);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.zagolovok {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zazor-kolonok);
  margin: var(--o-6) 0 var(--o-2);
  min-height: var(--h-upravlenie);
}

/* Со стрелкой возврата заголовок идёт слева, сразу за ней: «space-between» уводил его к правому краю,
   и экран читался как будто у него два разных заголовка (эталон, .zagolovok.sNazad). */
.zagolovok:has(.strelka.nazad) { justify-content: flex-start; }

.zagolovok h1 {
  font-size: var(--kegl-22);
  font-weight: var(--ves-vydelen);
  letter-spacing: -.3px;
  line-height: 1.25;
  margin: 0;
  min-width: 0;
}

.strelki { display: flex; gap: var(--o-6); flex: none; }

.strelka {
  width: var(--h-upravlenie);
  height: var(--h-upravlenie);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
}

.strelka[disabled] { color: var(--mute); cursor: default; }
.strelka svg { width: var(--ikonka); height: var(--ikonka); }

.podpis {
  font-size: var(--kegl-13);
  color: var(--mute);
  margin-bottom: var(--o-12);
}

/* Заголовок раздела и счётчик при нём стоят по краям строки: счётчик, прижатый к слову, читается
   как часть слова — «Месяцы3». Одно правило на все списки продукта. */
/* Срочная строка: единственное место, где человеку называют срок. Оранжевая — это предупреждение,
   а не ошибка: ещё успеваешь. Тон сажается по фону, чтобы держать 4,5 : 1 в обеих темах. */
.podpis.srochno { color: var(--warn-slovo); }

.razdel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zazor-kolonok);
  font-size: var(--kegl-19);
  font-weight: var(--ves-vydelen);
  color: var(--ink);
  margin: var(--o-16) 0 var(--o-8);
  line-height: 1.2;
}

.pusto {
  font-size: var(--kegl-15);
  color: var(--mute);
  padding: var(--o-8) 0;
}

/* ——— Дорожка вкладок периода ——— */
.vkladki {
  display: flex;
  gap: var(--o-2);
  background: var(--card);
  border-radius: var(--r-8);
  padding: var(--o-2);
  margin-bottom: var(--o-12);
}

.vkladki button {
  flex: 1;
  height: var(--h-vlozhennyy);
  border: none;
  background: none;
  border-radius: var(--r-6);
  font-family: inherit;
  font-size: var(--kegl-15);
  font-weight: var(--ves-vydelen);
  line-height: 1;
  color: var(--mute);
  cursor: pointer;
  min-width: 0;
}

.vkladki button[aria-selected="true"] { background: var(--bg); color: var(--ink); }

/* ——— Неделя: строка дня ——— */
.dni-nedeli { display: flex; flex-direction: column; }

.den {
  display: grid;
  grid-template-columns: var(--h-stroka) 1fr auto;
  gap: var(--zazor-kolonok);
  align-items: center;
  min-height: var(--h-upravlenie);
  padding: var(--o-4) 0 var(--o-4) var(--o-8);
  border: none;
  border-bottom: var(--linia) solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--kegl-15);
  text-align: left;
  cursor: pointer;
  position: relative;
}

.den::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--o-8);
  bottom: var(--o-8);
  width: var(--poloska);
  border-radius: var(--r-2);
  background: transparent;
}

.den[data-segodnya]::before { background: var(--accent); }
.den[data-segodnya] .chislo { font-weight: var(--ves-zhirnyy); }

.chislo {
  font-size: var(--kegl-17);
  font-weight: var(--ves-vydelen);
  white-space: nowrap;
}

.chislo em {
  font-style: normal;
  font-size: var(--kegl-13);
  font-weight: var(--ves-obychnyy);
  color: var(--mute);
  margin-left: var(--o-4);
}

.schetchiki { display: flex; gap: var(--o-4); min-width: 0; flex-wrap: wrap; }

.sch {
  min-width: var(--h-schetchik);
  height: var(--h-schetchik);
  border-radius: var(--r-6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--kegl-13);
  font-weight: var(--ves-vydelen);
  padding: 0 var(--o-6);
  background: var(--card);
  color: var(--mute);
}

.sch[data-ishod="sostoyalos"] { background: var(--accent); color: var(--onAccent); }
.sch[data-ishod="pereneseno"] { background: var(--warn); color: var(--onAccent); }
.sch[data-ishod="otmeneno"] { background: var(--danger-zalivka); color: var(--onAccent); }
.sch[data-ishod="bez-otmetki"] { background: var(--unknown); color: var(--onAccent); }

.vsego { font-size: var(--kegl-13); color: var(--mute); white-space: nowrap; }

/* ——— Месяц: календарная сетка ——— */
.mesyac { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--o-2); }

.shapkaDney {
  font-size: var(--kegl-11);
  color: var(--mute);
  text-align: center;
  padding-bottom: var(--o-4);
  text-transform: uppercase;
}

.yacheyka {
  aspect-ratio: 1 / 1;
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  padding: var(--o-4) 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--o-4);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  min-width: 0;
}

.yacheyka.pusto { border-color: transparent; }
.yacheyka .n { font-size: var(--kegl-15); }
.yacheyka[data-rabochiy="false"] .n { color: var(--mute); }
.yacheyka[data-segodnya] { border-color: var(--accent); border-width: var(--koltso); }
.yacheyka[data-segodnya] .n { font-weight: var(--ves-zhirnyy); }

.tochki { display: flex; gap: var(--o-2); flex-wrap: wrap; justify-content: center; padding: 0 var(--o-2); }

.tochki i {
  width: var(--tochka);
  height: var(--tochka);
  border-radius: var(--r-kruglyy);
  display: block;
  background: var(--idle);
}

.tochki i[data-ishod="sostoyalos"] { background: var(--exact); }
.tochki i[data-ishod="pereneseno"] { background: var(--warn); }
.tochki i[data-ishod="otmeneno"] { background: var(--danger); }
.tochki i[data-ishod="bez-otmetki"] { background: var(--unknown); }

/* ——— Строка дела ——— */
.stroka {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--zazor-kolonok);
  align-items: center;
  min-height: var(--h-stroka);
  padding: var(--o-6) 0 var(--o-6) var(--pole-stroki);
  border-bottom: var(--linia) solid var(--line);
  position: relative;
}

.stroka::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--o-6);
  bottom: var(--o-6);
  width: var(--poloska);
  border-radius: var(--r-2);
  background: var(--idle);
}

.stroka[data-ishod="sostoyalos"]::before { background: var(--exact); }
.stroka[data-ishod="pereneseno"]::before { background: var(--warn); }
.stroka[data-ishod="otmeneno"]::before { background: var(--danger); }
.stroka[data-ishod="bez-otmetki"]::before { background: var(--unknown); }

.stroka > div { min-width: 0; }

.ishod {
  font-size: var(--kegl-13);
  color: var(--mute);
  white-space: nowrap;
}

.ishod::first-letter { text-transform: uppercase; }

.stroka[data-ishod="sostoyalos"] .ishod { color: var(--exact-slovo); }
.stroka[data-ishod="pereneseno"] .ishod { color: var(--warn-slovo); }
.stroka[data-ishod="otmeneno"] .ishod { color: var(--danger-slovo); }
.stroka[data-ishod="bez-otmetki"] .ishod { color: var(--unknown-slovo); }

.vremya {
  font-weight: var(--ves-vydelen);
  margin-right: var(--o-8);
}

.nazvanie {
  font-size: var(--kegl-17);
  font-weight: var(--ves-vydelen);
  line-height: 1.25;
}

.gde {
  font-size: var(--kegl-13);
  color: var(--mute);
  line-height: 1.25;
}

.otmetit {
  height: var(--h-upravlenie);
  padding: 0 var(--o-12);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--kegl-15);
  font-weight: var(--ves-vydelen);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.otmetit[disabled] { color: var(--mute); cursor: default; }

/* ——— Норма чипами: ряд auto-fit, зазор 8 ——— */
.normy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--o-8);
}

/* Чип нормы — плашка с числом, а не кнопка: нажимать его нигде не нужно, и пальца он не просит. */
.chip {
  min-height: var(--h-upravlenie);
  border-radius: var(--r-8);
  background: var(--card);
  color: var(--ink);
  font-size: var(--kegl-15);
  font-weight: var(--ves-obychnyy);
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--o-4);
  padding: 0 var(--o-8);
  min-width: 0;
}

.chip .pn { display: inline-flex; align-items: baseline; }
.chip b { font-weight: var(--ves-vydelen); }
.chip s { text-decoration: none; color: var(--mute); }
.chip[data-signal="vyshe"] b { color: var(--above-slovo); }
.chip[data-signal="nizhe"] b { color: var(--warn-slovo); }

/* ——— Низ: главная кнопка и навигация ——— */
.niz {
  padding: var(--o-12) var(--o-16) var(--o-16);
  border-top: var(--linia) solid var(--line);
  flex: none;
}

.glavnaya {
  width: 100%;
  height: var(--h-glavnaya);
  border: none;
  border-radius: var(--r-8);
  background: var(--accent);
  color: var(--onAccent);
  font-family: inherit;
  font-size: var(--kegl-17);
  font-weight: var(--ves-vydelen);
  line-height: 1;
  cursor: pointer;
}

.glavnaya[disabled] { background: var(--card); color: var(--mute); cursor: default; }

/* Отзыв нормы внутри шторки: действие того же экрана, но не главное — поэтому не акцентом. */
.otzyv {
  width: 100%;
  min-height: var(--h-glavnaya);
  margin-top: var(--o-8);
  padding: var(--o-8) var(--o-12);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  background: var(--card);
  color: var(--text);
  font-family: inherit;
  font-size: var(--kegl-15);
  line-height: 1.3;
  cursor: pointer;
}

/* Две кнопки низа: вторичная и главная в ряд, главная шире — она главная. */
.knopki { display: grid; grid-template-columns: auto 1fr; gap: var(--o-8); }
.knopki .vtorichnaya { height: var(--h-glavnaya); }
/* Отсутствие агента в карточке (решение 88): строка словами и две кнопки под ней — своим классом. */
.blok.otsutstvie { display: flex; flex-direction: column; gap: var(--o-8); margin-top: var(--o-8); }
.blok.otsutstvie .trevoga { margin-bottom: 0; }
/* «Поставить задачу» и «Отсутствует» — одним рядом, по своей ширине (решение 88). */
.ryadKnopok { display: flex; flex-wrap: wrap; gap: var(--o-8); }

/* Итог отчёта и сданный отчёт: пары «название — число». */
.svodka { display: flex; flex-direction: column; }

.para {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zazor-kolonok);
  min-height: var(--h-upravlenie);
  border-bottom: var(--linia) solid var(--line);
  font-size: var(--kegl-15);
}

.para b { font-weight: var(--ves-vydelen); font-size: var(--kegl-17); }

/* Два числа строки типа — столбцами под подписями «факт · план» (решение 78), той же сеткой, что
   три числа ступени «Воронки»: колонка одной ширины во всех строках, цифры одной ширины.
   Класс свой: `.para b` с простым текстом живёт на других экранах — сумма в карточке просьбы,
   уточнение в снимке периода, личная норма в «Отделе изнутри», — и сетка ломала их на строки
   (возврат 6.19). Столбцы ставит тот, кому они нужны. */
.stolbcy { display: grid; grid-auto-flow: column; grid-auto-columns: calc(var(--kegl-17) * 2.6); gap: var(--o-8); text-align: right; font-variant-numeric: tabular-nums; }
.stolbcy .fakt { font-weight: var(--ves-vydelen); }
.stolbcy span:not(.fakt) { color: var(--mute); font-weight: var(--ves-obychnyy); }
.para.shapkaChisel { min-height: 0; border-bottom: none; }
.para.shapkaChisel .stolbcy { font-size: var(--kegl-11); color: var(--mute); font-weight: var(--ves-obychnyy); }

/* Строка типа, под которым есть дела: та же строка, но нажимается — и стрелка говорит, раскрыт ли он. */
.para.svorachivaemaya {
  width: 100%;
  background: none;
  border: none;
  border-bottom: var(--linia) solid var(--line);
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Таблица отдела в «Отчётах» (решение 80): «Заявки → типы → Деньги», одна сетка на всю таблицу.
   Колонки общие: название тянется, два числовых столбца стоят по самому широкому числу — поэтому
   «125 000» и «0» стоят на одной вертикали, а от строки к строке ничего не прыгает. У каждой
   строки своя сетка этого не давала: ширина считалась внутри строки. */
.tablicaOtdela {
  display: grid;
  /* Ширина числовых столбцов постоянная — одна на все таблицы «Отчётов» (возврат 6.10+6.21).
     `auto` считал её по самому длинному числу таблицы, и столбцы стояли в разных местах на
     «Вчера» и «Месяце», у отделов с разными деньгами и в план-факте. Запас — под «00 000 000»:
     десять знаков в `ch` при табличных цифрах. */
  grid-template-columns: 1fr var(--stolbec-fakt) var(--stolbec-plan);
  align-items: center;
  /* Просвет между столбцами — 8, а не 12: на 320 эти четыре пикселя и есть разница между целым
     словом «Задатки» в названии строки и разрывом его по буквам (задача 6.23). Числа не слипаются:
     каждое прижато к правому краю своего столбца, а запас столбца считается по «00 000 000». */
  column-gap: var(--o-8);
  font-size: var(--kegl-15);
}

.tablicaOtdela > * { padding: var(--o-8) 0; border-bottom: var(--linia) solid var(--line); }
/* Числа и подписи над ними прижаты к правому краю своего столбца — иначе подпись стоит над левым
   краем числа, а не над самим числом. */
/* Кегль столбца плана назван здесь явно: глобальный `.chislo` ставит 17 и перебивает кегль самой
   таблицы, поэтому план всё это время стоял кеглем факта, а ширину ему считали по кеглю 15 —
   и «12 780 000» в него не влезало (задача 6.23). Число, стоящее в столбце, и запас этого столбца
   считаются от одного кегля, иначе они расходятся молча. */
.tablicaOtdela .chislo {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--mute);
  font-size: var(--kegl-15);
  font-weight: var(--ves-obychnyy);
}
.tablicaOtdela .chislo.fakt { color: inherit; font-weight: var(--ves-vydelen); font-size: var(--kegl-chisla); }
.tablicaOtdela .podpisStolbca { padding-bottom: var(--o-2); border-bottom: none; font-size: var(--kegl-11); color: var(--mute); }
.tablicaOtdela .podpisStolbca.chislo { font-weight: var(--ves-obychnyy); font-size: var(--kegl-11); text-align: right; }
/* Деньги — та же строка таблицы, но итоговая: её читают первой снизу. */
.tablicaOtdela [data-vid="dengi"] { border-bottom: none; }
/* Деньги стоят в кегле остальных чисел столбца, а не крупнее: столбец рассчитан на «00 000 000»
   в кегле строки, и число в кегле 19 в него уже не влезало — «4 935 000» вылезало на пиксель, а
   сумма от десяти миллионов налезла бы на план (задача 6.22). Итог выделен насыщенностью, а не
   размером: так он остаётся итогом и не ломает сетку. */
.tablicaOtdela [data-vid="dengi"].chislo.fakt { font-size: var(--kegl-chisla); }
/* Второе число заявок — под названием, приглушённым: это не столбец, а уточнение. */
.podStrokoy { display: block; font-size: var(--kegl-11); color: var(--mute); }
/* Дела раскрытого типа: во всю ширину таблицы, под своей строкой. */
.delaTipa { grid-column: 1 / -1; padding: 0; border-bottom: none; }

/* Название строки таблицы: слева место под стрелку, дальше слово. Строка-кнопка выглядит строкой. */
/* Название сжимается первым: числовые столбцы постоянной ширины, а имя строки на узком экране
   уступает место им. Без min-width: 0 колонка 1fr не сжималась ниже своего содержимого, и на 320
   таблица вылезала за край (возврат 6.10+6.21). */
.tablicaOtdela .nazvanieStroki { display: flex; align-items: center; gap: var(--o-6); min-width: 0; text-align: left; }
/* На узком экране название переносится по словам, а не вылезает: столбцы чисел остаются на своих
   местах. Рвать слово по буквам нельзя — «За / яв / ки» не читается вовсе (задача 6.23); место для
   целого слова даёт разделённая ширина столбцов, а не разрыв. */
.tablicaOtdela .slovoTipa { min-width: 0; overflow-wrap: normal; word-break: normal; }
.tablicaOtdela button.nazvanieStroki {
  background: none;
  border: none;
  border-bottom: var(--linia) solid var(--line);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Левая часть строки план-факта: место под стрелку и название. Устройство одно у всех строк —
   у типов с делами, у пустых и у заявок, — иначе текст названия сдвигается от строки к строке
   (задача 6.20). Зазор задан здесь, а не только у строки-кнопки. */
.nazvanieTipa { display: inline-flex; align-items: center; gap: var(--o-6); }
/* Место под стрелку одинаково у всех строк типа — и там, где стрелки нет. */
.shevronTipa { display: inline-flex; width: var(--ikonka); color: var(--mute); }
.shevronTipa svg { width: var(--ikonka); height: var(--ikonka); }

/* Название отдела в заголовке блока «Отчётов»: заголовок и есть переход внутрь отдела. */
.nazvanieOtdela {
  display: inline-flex;
  align-items: center;
  gap: var(--o-6);
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.nazvanieOtdela .shevron { color: var(--mute); }

/* Таблица отчёта отдела (решение 101): сводка руководителя и отчёт отдела за «Вчера» у собственника —
   одна вёрстка (web/ekrany/svodka.js). Одна сетка на всю таблицу: колонки общие у всех строк.

   Пять колонок: название, «вчера · факт», «/», «вчера · план», «сегодня · план». Ширину колонок
   «вчера» задают числа, а не заголовок: они постоянной и одинаковой ширины (--stolbec-svodki, под
   четыре табличные цифры), поэтому однозначное, трёхзначное число и «—» стоят на одной правой линии, а
   «/» — на одной вертикали во всех строках (задача 6.41).

   Заголовок — в два яруса (решение 103): сверху «вчера» над фактом и планом и «сегодня», снизу «факт»,
   «план», «план» над своими числами. Короткие слова в одну строку влезают в колонку числа на любой
   ширине — ничего не переносится.

   Просветов между колонками нет (column-gap: 0): линия под строкой — это нижние границы ячеек, и
   просвет рвал её между столбцами. Воздух между числами дают отступы ячеек и колонка «/». */
.chisla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stolbec-svodki) var(--stolbec-delitelya) var(--stolbec-svodki) var(--stolbec-segodnya);
  /* Ячейки тянутся на всю высоту строки: у «Заявок» под названием подпись, и без этого линии под
     числами стояли выше линии под названием. Содержимое по центру — внутри ячейки. */
  align-items: stretch;
  column-gap: 0;
  font-size: var(--kegl-15);
}

.chisla > * { min-height: var(--h-upravlenie); display: flex; align-items: center; }
/* Название типа в сводке — ячейка таблицы, а не имя со входа: у `.imya` рамка, радиус и высота
   главной кнопки, и ячейки выглядели кнопками (найдено владельцем на боевом). Стиль входа — входу. */
.chisla .nazvanieStroki { justify-content: flex-start; gap: var(--o-6); min-width: 0; text-align: left; padding-right: var(--o-6); }
.chisla .slovoTipa { min-width: 0; overflow-wrap: normal; word-break: normal; }
.chisla button.nazvanieStroki {
  background: none;
  border: none;
  border-bottom: var(--linia) solid var(--line);
  color: inherit;
  font: inherit;
  padding: 0 var(--o-6) 0 0;
  cursor: pointer;
}
/* Числа — цифрами одной ширины и вправо: так «1» и «12» стоят правым краем на одной линии. Факт —
   жирный основным цветом, планы — серые (решение 103): так было у собственника до 6.41, и так читается,
   где сделанное, а где обещанное. */
.chisla .chislo {
  justify-content: flex-end;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: var(--ves-obychnyy);
  font-size: var(--kegl-chisla);
  color: var(--mute);
}
.chisla .chislo.fakt { font-weight: var(--ves-vydelen); color: var(--ink); }
.chisla .delitel { justify-content: center; color: var(--mute); }

/* Линия — под всеми ячейками строки, а не под обёрткой: обёртки у строки нет. */
.chisla > *:not(.podpisStolbca):not(.delaTipa) { border-bottom: var(--linia) solid var(--line); }

/* Заголовки колонок: подпись, а не число. Класс не `shapka`: так зовётся шапка экрана, и её поля
   по 16 сдвигали подпись влево от её чисел (задача 6.41, так же было в 6.10 у собственника). */
.chisla .podpisStolbca {
  min-width: 0;
  font-size: var(--kegl-13);
  font-weight: var(--ves-obychnyy);
  color: var(--mute);
  min-height: 0;
  align-items: flex-end;
  white-space: nowrap;
}
/* Верхний ярус — «вчера» над фактом и планом, «сегодня» над своим столбцом, правым краем по числам. */
/* «Вчера» — по центру над фактом, «/» и планом: прижатое вправо, оно читалось как подпись одного плана. */
.chisla .nadVchera { grid-column: span 3; justify-content: center; text-align: center; padding-top: var(--o-8); }
.chisla .nadSegodnya, .chisla .nazvanieStroki.verh { padding-top: var(--o-8); }
/* Третий столбец таблицы недели и месяца — норма (решение 104): серая, как план, — это обещанное, а не
   сделанное. Над ней — «норма» нижним ярусом. */
.chisla .podNormy { justify-content: flex-end; }
.chisla .nadSegodnya { justify-content: flex-end; }
/* Нижний ярус — над своим числом, с воздухом до первой строки. */
.chisla .podFakt, .chisla .podPlan, .chisla .podSegodnya, .chisla .podNormy, .chisla .podpisStolbca.nazvanieStroki:not(.verh), .chisla .podpisStolbca.delitel { padding-bottom: var(--o-4); }
/* Без верхнего яруса (неделя, месяц) нижний ярус сам отходит от того, что над таблицей. */
.chisla[data-tretiy="norma"] > .podpisStolbca { padding-top: var(--o-8); }

/* Деньги у собственника — итоговая строка: суммы шире колонок счёта, и «получено / прогноз» стоят
   одной ячейкой на все числовые колонки, правым краем по таблице. */
.chisla .dengiSvodki { grid-column: 2 / -1; justify-content: flex-end; gap: var(--o-4); }
.chisla .dengiSvodki .chislo { font-size: var(--kegl-15); }
.chisla .dengiSvodki .chislo.fakt { font-size: var(--kegl-chisla); }
.chisla .dengiSvodki .delitel { color: var(--mute); }
/* Дела раскрытого типа — во всю ширину таблицы, под своей строкой. */
.chisla .delaTipa { grid-column: 1 / -1; display: block; min-height: 0; }

/* Итог исполнения под строкой дела — серым, как подпись. */
.kom { font-size: var(--kegl-13); color: var(--mute); line-height: 1.25; }

.den[data-postavleno="false"] .vsego { color: var(--ink); }
/* Название типа по числу в строке дня отчёта (решение 105): «Заявки», «Договоры» — в средней колонке. */
.den .nazvanieChisla { color: var(--mute); min-width: 0; }

.navigaciya { display: flex; margin-top: var(--o-8); }

.navigaciya button {
  flex: 1;
  border: none;
  background: none;
  padding: var(--o-8) 0 var(--o-2);
  font-family: inherit;
  font-size: var(--kegl-13);
  font-weight: var(--ves-obychnyy);
  line-height: 1.2;
  color: var(--mute);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--o-6);
  min-width: 0;
}

.navigaciya button[aria-current="page"] { color: var(--ink); font-weight: var(--ves-vydelen); }

.navigaciya .metka {
  width: var(--metka-shirina);
  height: var(--poloska);
  border-radius: var(--r-2);
  background: transparent;
}

.navigaciya button[aria-current="page"] .metka { background: var(--accent); }

/* Строка правимого дела нажимается: пока дело черновик, его правят там же, где видят (решение 73).
   Обещание нажатия — только у того, что нажимается: правило права приходит моделью. */
.stroka[data-pravitsya="da"] { cursor: pointer; }
/* Дело «без отметки» открывает шторку просьбы (решение 87); поданная просьба — бледной пометкой. */
.stroka[data-pozdno="da"] { cursor: pointer; }
.naRassmotrenii { display: block; font-size: var(--kegl-13); color: var(--mute); }

/* Комментарий руководителя к приёмке (решение 87): не сигнал, а слово человека — карточкой, а не
   тревогой. Отправленный комментарий у руководителя стоит обычной подписью. */
.kommentariyRukovoditelya {
  margin: var(--o-8) 0;
  padding: var(--o-8) var(--o-12);
  border-radius: var(--r-8);
  background: var(--card);
  color: var(--ink);
  font-size: var(--kegl-15);
  line-height: 1.35;
}

/* ——— Вход: список имён и пароль; на боевом — телефон и пароль (решение 72) ——— */
.vhod { display: flex; flex-direction: column; gap: var(--o-8); }

/* Метка держится своего поля: на экране их два, и подпись не должна висеть между ними. */
.pole-vhoda { display: block; }

.imya {
  display: flex;
  align-items: center;
  gap: var(--o-12);
  width: 100%;
  min-height: var(--h-glavnaya);
  padding: var(--o-8) var(--o-12);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--kegl-17);
  font-weight: var(--ves-vydelen);
  text-align: left;
  cursor: pointer;
}

.imya .kruzhok { font-size: var(--kegl-13); }
.imya .sostoyanie { margin-left: auto; font-size: var(--kegl-13); font-weight: var(--ves-obychnyy); color: var(--mute); }

.pole {
  width: 100%;
  height: var(--h-glavnaya);
  padding: 0 var(--o-12);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--kegl-17);
}

.metka-polya {
  display: block;
  font-size: var(--kegl-13);
  color: var(--mute);
  margin-bottom: var(--o-4);
}

.otkaz {
  font-size: var(--kegl-15);
  color: var(--danger);
  min-height: var(--h-schetchik);
  /* В теле шторки (колонка с прокруткой) отказ в две строки не сжимается до одной (задача 6.47). */
  flex-shrink: 0;
}

.vtorichnaya {
  height: var(--h-upravlenie);
  padding: 0 var(--o-12);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--kegl-15);
  font-weight: var(--ves-vydelen);
  cursor: pointer;
}

/* ——— Шторка: одна на все шторки (свод правил, раздел «Шторка») ——— */
.sloy { position: fixed; inset: 0; }

/* Выданный пароль показывается один раз (решение 49) и поверх всего: его читают и записывают,
   а шторка, из которой человека завели, в этот миг ещё открыта. Нажатие закрывает плашку. */
/* «Пароль сменён» и прочие однострочные сообщения о сделанном: плашка внизу, гаснет по нажатию
   и сама через несколько секунд. Слово приходит моделью (задача 6.11). */
.skazano {
  position: fixed;
  left: 50%;
  bottom: var(--o-24);
  transform: translateX(-50%);
  z-index: 60;
  max-width: calc(100% - var(--o-32));
  padding: var(--o-12) var(--o-16);
  border-radius: var(--r-8);
  background: var(--ink);
  color: var(--bg);
  font-size: var(--kegl-15);
  cursor: pointer;
}

.plashka-parolya {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--o-8);
  align-items: center;
  justify-content: center;
  padding: var(--o-16);
  background: var(--zatemnenie-plotnoe);
  text-align: center;
}

.plashka-parolya .podpis { color: var(--naZatemnenii); }

/* Выданный доступ — три готовые строки (решение 72): переносов в них столько, сколько прислал сервер. */
/* Итоговая строка мостика: сумма строк над ней. Черта сверху — это «равно», а не украшение. */
.mstroka[data-vid="itog"] {
  border-top: var(--linia) solid var(--line);
  padding-top: var(--o-6);
  font-weight: var(--ves-vydelen);
}

/* Пометка приёмки: не сигнал строки, а предупреждение о деле, которого не было (решение 74). */
.pometka {
  display: flex;
  justify-content: space-between;
  gap: var(--o-8);
  padding: var(--o-8) var(--o-12);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  color: var(--warn-slovo);
  font-size: var(--kegl-15);
}

/* Счётчик правок стоит приглушённо: это не сигнал, а счёт, который смотрят глазами (решение 74). */
.gde.pravki { color: var(--mute); }

/* Нет телефона — человек не войдёт: это предупреждение, а не обычная подпись (решение 72). */
.netTelefona { color: var(--warn-slovo); }
.maksNePrivyazan { color: var(--warn-slovo); }
.vremyaRukovoditelya { display: flex; align-items: baseline; gap: var(--o-8); }
.nePrivyazany { margin: 0 0 8px; }

.plashka-parolya .dostup {
  margin: 0;
  padding: var(--o-16);
  border-radius: var(--r-8);
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--kegl-15);
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Кнопки плашки — «Скопировать» и «Готово»: обе стоят на затемнении и красятся его цветом текста. */
.plashka-parolya .skopirovat,
.plashka-parolya .gotovo {
  height: var(--h-upravlenie);
  padding: 0 var(--o-16);
  border: var(--linia) solid var(--naZatemnenii);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--naZatemnenii);
  font-family: inherit;
  font-size: var(--kegl-15);
  cursor: pointer;
}

.plashka-parolya .parol {
  font-size: var(--kegl-22);
  font-weight: var(--ves-vydelen);
  letter-spacing: 0.08em;
  padding: var(--o-16);
  border-radius: var(--r-8);
  background: var(--bg);
  color: var(--ink);
}

.zatemnenie { position: absolute; inset: 0; background: var(--zatemnenie); }

/* Шторка начинается там, где кончается каркас экрана: под дорожкой вкладок, отступ 8, и идёт до низа. */
.shtorka {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--verh-shtorki);
  /* Шторка шириной с колонку и по её центру: кабинет на широком экране стоит колонкой, и шторка
     обязана стоять так же. Без этого на 2000 точек «Новое дело» разъезжалось во всё окно, а плашки
     типов вставали в шесть штук в ряд (найдено владельцем на боевом). */
  max-width: var(--kolonka);
  margin: 0 auto;
  background: var(--bg);
  border-radius: var(--r-8) var(--r-8) 0 0;
  padding: var(--o-16) var(--o-16) 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shtorkaTelo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* Пустое место внутри шторки отдаётся полю, ради которого её открыли. Поля живут в своём блоке —
   он переживает перерисовку вместе с ними, поэтому высоту раздаёт он. */
/* Поля растут в пустое место, но не сжимаются ниже своего содержимого (задача 6.47): с min-height 0 длинная
   форма задатка сжималась, и строка отказа под ней ложилась поверх полей. Длинное прокручивает тело шторки. */
.polya { display: flex; flex-direction: column; flex: 1 0 auto; }
.gruppa.rastet { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Под полями что-то лежит (подсказка «Отсутствует», задача 6.30) — поля не растягиваются, и подсказка
   стоит сразу под ними. У шторок без такого узла высоту по-прежнему берут поля. */
.shtorkaTelo:has(> .posle:not(:empty)) > .polya { flex: none; }
.posle:not(:empty) { margin-top: var(--o-8); }
.gruppa.rastet .pole.tekst { flex: 1; }

.shtorkaShapka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--o-12);
  min-height: var(--h-upravlenie);
  margin-bottom: var(--o-16);
}

.shtorkaShapka h2 {
  font-size: var(--kegl-22);
  font-weight: var(--ves-vydelen);
  letter-spacing: -.3px;
  line-height: 1.25;
  margin: 0;
}

.shtorkaShapka .pod { font-size: var(--kegl-13); color: var(--mute); line-height: 1.25; margin-top: var(--o-2); }
.shtorkaShapka .levo { min-width: 0; }

.krestik {
  width: var(--h-upravlenie);
  height: var(--h-upravlenie);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}

.krestik svg { width: var(--ikonka); height: var(--ikonka); }

.gruppa { margin-bottom: var(--o-16); }

/* Блок в теле шторки: поле со своей кнопкой, плашки со своей, вопрос со своей. Внутри блока 8,
   между блоками 16 (свод, §3). Своих отступов у тела не было вовсе, и кнопки карточки слипались
   вплотную друг к другу (найдено владельцем замером на 390 и 1440, задача 6.15). */
.svoe > .blok { display: flex; flex-direction: column; gap: var(--o-8); }
.svoe > .blok + .blok { margin-top: var(--o-16); }
/* Внутри блока отступ раздаёт он сам: собственный отступ поля дал бы 16 там, где положено 8. */
.svoe > .blok .gruppa { margin-bottom: 0; }
/* Та же причина у подписей, стоящих в блоке сами по себе, — «Сейчас: отдел» и «Перевести в отдел:»
   (задача 6.23): их собственный нижний отступ складывался с зазором блока и давал 20 вместо 8. */
.svoe > .blok > .podpisPolya,
.svoe > .blok > .podpis { margin-bottom: 0; }
.podpisPolya { font-size: var(--kegl-13); color: var(--mute); margin-bottom: var(--o-4); }
/* Выбор плашками над полями формы («Новый человек», задача 6.26): последний блок выбора отделён от
   полей теми же 16, что блоки между собой. Свой класс, а не общий .blok: у карточки после блоков
   полей нет, и лишний отступ ей не нужен (находка 243). */
.svoe > .blok.vybor:last-child { margin-bottom: var(--o-16); }

.plashki { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--o-8); }
.plashki .plashka { min-width: 0; }
.plashki.dva { grid-template-columns: repeat(2, 1fr); }
.plashki.dni { grid-template-columns: repeat(6, 1fr); gap: var(--o-6); }

.plashka {
  min-height: var(--h-glavnaya);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: var(--kegl-17);
  font-weight: var(--ves-vydelen);
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Слова исходов приходят строчными (словарь исходов): заглавная буква — вид, а не другое слово. */
.plashka::first-letter { text-transform: uppercase; }

.plashka[aria-pressed="true"] { background: var(--accent); color: var(--onAccent); border-color: var(--accent); }

.plashki.dni em {
  font-style: normal;
  font-size: var(--kegl-11);
  font-weight: var(--ves-obychnyy);
  color: var(--mute);
  line-height: 1.1;
}

.plashki.dni .plashka[aria-pressed="true"] em { color: var(--onAccent); }

/* Выходной приглушён — так же, как в календаре месяца: рабочий день виден с первого взгляда. */
.plashki.dni .plashka[data-rabochiy="false"] b { color: var(--mute); }

.shtorka .pole {
  height: var(--h-glavnaya);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  background: transparent;
  padding: 0 var(--o-12);
  font-size: var(--kegl-17);
  font-family: inherit;
  color: var(--ink);
  width: 100%;
}

.shtorka .pole.tekst {
  height: auto;
  min-height: 96px;
  padding: var(--o-12);
  line-height: 1.35;
  resize: none;
}

.nizShtorki { margin-top: auto; padding: var(--o-12) 0 var(--o-16); }
.glavnaya.vykl { background: var(--card); color: var(--mute); cursor: default; }

/* ——— Меню шапки ——— */
.menyu {
  position: absolute;
  right: var(--o-16);
  top: var(--h-glavnaya);
  background: var(--bg);
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  padding: var(--o-4);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 1;
}

/* Инструкция (решение 89) — ссылка, но выглядит пунктом меню, как кнопки рядом. */
.menyu .instrukciya {
  display: flex;
  align-items: center;
  min-height: var(--h-upravlenie);
  padding: 0 var(--o-8);
  border-radius: var(--r-6);
  font-size: var(--kegl-15);
  font-weight: var(--ves-vydelen);
  color: var(--ink);
  text-decoration: none;
}

/* Последняя строка меню — версия (решение 86): подпись, а не пункт, как строка о кольце сверху. */
.menyu .versiya {
  padding: var(--o-8) var(--o-12) var(--o-4);
  border-top: var(--linia) solid var(--line);
  font-size: var(--kegl-13);
  color: var(--mute);
  line-height: 1.3;
}

/* ——— Главная до входа (решение 86) ——— */
/* Картинка во всю колонку, без рамки и скругления: её края — тот же фон, что у экрана, и сливаются
   с ним. Под ней знак, две строки о продукте; «Войти» — главная кнопка низа, версия — под ней. */
.titul .kartinka { display: block; margin: 0 calc(-1 * var(--o-16)); }
.titul .kartinka img { display: block; width: 100%; height: auto; }
.titul .nazvanie { margin-top: var(--o-8); }
.titul .opisanie { margin-top: var(--o-12); display: flex; flex-direction: column; gap: var(--o-8); }
.titul .opisanie p { margin: 0; font-size: var(--kegl-15); line-height: 1.4; color: var(--ink); }
.titul .opisanie p + p { color: var(--mute); }
.titul .niz { border-top: none; }
.titul .versiya { margin-top: var(--o-12); text-align: center; font-size: var(--kegl-13); color: var(--mute); }

/* «Назад» под формой входа — во всю ширину, как поле над ним. */
.vhod .nazad-na-glavnuyu { width: 100%; }

.menyu button {
  min-height: var(--h-upravlenie);
  border: none;
  background: none;
  border-radius: var(--r-6);
  font-family: inherit;
  font-size: var(--kegl-15);
  font-weight: var(--ves-vydelen);
  color: var(--ink);
  text-align: left;
  padding: 0 var(--o-8);
  cursor: pointer;
}

/* ——— Прогноз: перевёрнутая карточка, полоса и мостик ——— */
.kartochka {
  border-radius: var(--r-8);
  padding: var(--o-12);
  margin-bottom: var(--o-16);
}

.paraSverhu, .paraChisel {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zazor-kolonok);
}

.paraSverhu { font-size: var(--kegl-13); color: var(--mute); }
.paraChisel { margin-bottom: var(--o-8); }
.paraChisel b { font-size: var(--kegl-28); font-weight: var(--ves-vydelen); }
.paraChisel .poluch { color: var(--accent-slovo); }

/* Полоса собирается из самих дел: сегмент на дело, зазор 2, высота 10, радиус 2 (свод правил, 10). */
.polosa { display: flex; gap: var(--o-2); height: var(--polosa-vysota); margin-bottom: var(--o-12); overflow: hidden; }
/* Густая полоса (сотни дел за месяц): вплотную и без минимальной ширины — иначе полоса шире экрана. */
.polosa[data-gustaya="da"] { gap: 0; }
.polosa[data-gustaya="da"] i { min-width: 0; }

.polosa i { border-radius: var(--r-2); display: block; background: var(--idle); min-width: var(--o-2); }
.polosa i[data-chast="polucheno"] { background: var(--accent); }
.polosa i[data-chast="otmeneno"] { background: var(--danger); }
.polosa i[data-chast="pereneseno"] { background: var(--warn); }
.polosa i[data-chast="neizvestno"] { background: var(--unknown); }

.vnutriZagolovok {
  font-size: var(--kegl-13);
  color: var(--mute);
  margin-bottom: var(--o-8);
}

/* Знак у числа стоит своей колонкой 12 слева и красится тем же цветом, что число (свод правил, 11). */
.mostik { display: flex; flex-direction: column; }

.mstroka {
  display: grid;
  grid-template-columns: var(--o-12) 1fr auto;
  gap: var(--o-8);
  align-items: baseline;
  min-height: var(--h-schetchik);
  font-size: var(--kegl-15);
}

.mstroka i { font-style: normal; text-align: center; }
.mstroka b { font-weight: var(--ves-vydelen); font-size: var(--kegl-17); }
.mstroka[data-vid="novoe"] i, .mstroka[data-vid="novoe"] b { color: var(--accent); }
.mstroka[data-vid="otmeneno"] i, .mstroka[data-vid="otmeneno"] b { color: var(--danger-slovo); }
.mstroka[data-vid="pereneseno"] i, .mstroka[data-vid="pereneseno"] b { color: var(--warn-slovo); }
.mstroka[data-vid="neizvestno"] i, .mstroka[data-vid="neizvestno"] b { color: var(--unknown-slovo); }

/* Блок дел одного состояния: заголовок с числом и суммой, под ним строки. */
.gruppa-del .razdel { display: flex; align-items: baseline; justify-content: space-between; gap: var(--zazor-kolonok); }
/* Любая строка, по которой проваливаются, — кнопка. У кнопки браузер даёт и свою рамку, и свой фон,
   и свой цвет текста: в тёмной теме это серый фон с тёмными чернилами. Снимаем всё три разом, одним
   правилом на все строки продукта — дела, периода, отдела, человека, агента в отделе.
   Правило одно, и новая строка-кнопка добавляется в его список, а не рядом своим сбросом:
   в четвёртый раз эта беда заводиться не должна (её заводили в 6.7 и снова в 6.16). */
button.stroka,
button.chelovek,
button.chelStroka {
  width: 100%;
  border: none;
  border-bottom: var(--linia) solid var(--line);
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* ——— Кабинет руководителя: очередь, просьбы, тревога ——— */
.chelovek {
  display: grid;
  grid-template-columns: var(--h-vlozhennyy) 1fr auto;
  gap: var(--o-12);
  align-items: center;
  min-height: var(--h-stroka);
  padding: var(--o-6) 0 var(--o-6) var(--pole-stroki);
  cursor: pointer;
  position: relative;
}

.chelovek::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--o-6);
  bottom: var(--o-6);
  width: var(--poloska);
  border-radius: var(--r-2);
  background: transparent;
}

/* Тон строки — код первого отклонения, который посчитал домен (решение 26). */
.chelovek[data-ton="net-otcheta"]::before,
.chelovek[data-ton="molchit"]::before { background: var(--unknown); }
.chelovek[data-ton="tonkiy-plan"]::before,
.chelovek[data-ton="net-fakta"]::before { background: var(--warn); }
.chelovek[data-ton="poteri"]::before { background: var(--danger); }
.chelovek[data-sostoyanie="prinyat"],
.chelovek[data-sostoyanie="prinyat-s-zadachami"] { color: var(--mute); }
.chelovek > div { min-width: 0; }

/* Карточка просьбы: кто и о чём, причина и две кнопки. */
.prosba {
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  padding: var(--o-12);
  margin-bottom: var(--o-8);
  display: flex;
  flex-direction: column;
  gap: var(--o-4);
}

.prosba .knopki { margin-top: var(--o-8); }

/* Тревога в карточке агента: сигнал домена словом. */
.trevoga {
  border-radius: var(--r-8);
  background: var(--card);
  padding: var(--o-12);
  margin-bottom: var(--o-12);
}

.trevoga[data-kod="est"] { background: var(--warn); color: var(--onAccent); }
.trevoga[data-kod="est"] .gde { color: var(--onAccent); }

/* ——— Итоги отдела: строка периода и раскрывашка ——— */
/* Полоска слева — сторона роста, её посчитал домен (domain/itogi.js): выше, ниже, ровно.
   У идущего периода она своя: он ещё не закрыт, и итог у него не окончательный. */
.stroka.itog[data-storona="vyshe"]::before { background: var(--exact); }
.stroka.itog[data-storona="nizhe"]::before { background: var(--danger); }
.stroka.itog[data-storona="rovno"]::before { background: var(--idle); }
.stroka.itog[data-idet="da"]::before { background: var(--unknown); }

.stroka.itog[data-storona="vyshe"] .ishod { color: var(--exact-slovo); }
.stroka.itog[data-storona="nizhe"] .ishod { color: var(--danger-slovo); }
.stroka.itog .ishod { font-size: var(--kegl-17); font-weight: var(--ves-vydelen); }
.stroka.itog .sprava { text-align: right; }

/* Раскрывашка списка — приглушённая строка, а не кнопка: она служебная, и весить должна меньше строк,
   которые открывает. Нажимается по-прежнему, поэтому это button — но без рамки, фона и кегля кнопки. */
.eshche {
  width: 100%;
  margin-top: var(--o-8);
  padding: var(--o-8) 0 0;
  border: none;
  background: transparent;
  color: var(--mute);
  font-family: inherit;
  font-size: var(--kegl-13);
  font-weight: var(--ves-obychnyy);
  text-align: left;
  cursor: pointer;
}

/* ——— Воронка: ступени «факт против нормы» и переходы ——— */
/* Шкала ступени: заливка — факт, вся длина — норма, чёрточка — план периода. Доли посчитала модель,
   ширина и сдвиг приходят готовыми процентами: на странице ни одного деления. */
.stupen { padding: var(--o-8) 0; border-bottom: var(--linia) solid var(--line); }

.stupenVerh {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--zazor-kolonok);
  margin-bottom: var(--o-6);
}

/* Три числа ступени — столбцами под подписями «факт · план · норма» (решение 78). Ширина колонки
   одна на все строки, цифры одной ширины: иначе столбцы разъезжаются от длины числа. */
.stupen .chislo {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(var(--kegl-17) * 2.6);
  gap: var(--o-8);
  font-size: var(--kegl-17);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.stupen .chislo .plan,
.stupen .chislo .norma { color: var(--mute); }
.stupen .fakt { font-weight: var(--ves-vydelen); }
.stupen[data-signal="vyshe"] .fakt { color: var(--above-slovo); }
.stupen[data-signal="nizhe"] .fakt { color: var(--warn-slovo); }

/* Строка подписей над ступенями: те же колонки, что у чисел, кегль подписи. */
.shapkaChisel { padding-bottom: var(--o-2); border-bottom: none; }
.shapkaChisel .stupenVerh { margin-bottom: 0; }
.shapkaChisel .chislo { font-size: var(--kegl-11); color: var(--mute); }

.shkala {
  position: relative;
  height: var(--poloska);
  border-radius: var(--r-2);
  background: var(--idle);
}

.shkala i { display: block; height: 100%; border-radius: var(--r-2); background: var(--mute); }
/* Заливка — того же тона, что число факта над ней (решение 78). Своего цвета у денежной ступени
   больше нет: салатовая полоса под оранжевым числом говорила противоположное тому, что показывает
   число, — «задатки подсвечиваются зелёненьким, а циферка красненьким». */
.stupen[data-signal="vyshe"] .shkala i { background: var(--above-slovo); }
.stupen[data-signal="nizhe"] .shkala i { background: var(--warn-slovo); }

.zasechka {
  position: absolute;
  top: calc(-1 * var(--o-2));
  bottom: calc(-1 * var(--o-2));
  width: var(--linia);
  background: var(--ink);
}

/* Переходы: три плитки в ряд, под ними узкое место словом. */
.konversii {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--o-8);
  margin-top: var(--o-8);
}

.konv {
  background: var(--card);
  border-radius: var(--r-8);
  padding: var(--o-12) var(--o-8);
  text-align: center;
}

.konv b { display: block; font-size: var(--kegl-19); font-weight: var(--ves-vydelen); }
/* «Данных мало» — слово вместо числа, и кегль у него свой: это не число, и притворяться им не должно. */
.konv .malo { font-size: var(--kegl-13); color: var(--mute); line-height: 1.2; padding: var(--o-2) 0; }
.konv span { display: block; font-size: var(--kegl-11); color: var(--mute); margin-top: var(--o-4); }

.uzkoe { font-size: var(--kegl-15); line-height: 1.3; margin-top: var(--o-8); }
.snoska { font-size: var(--kegl-13); color: var(--mute); margin: var(--o-12) 0 0; }

/* ——— Итоги компании: вчерашний день и текущий месяц ——— */
/* Служебная подпись — единственное место капса (свод правил, 13): это ярлык числа, а не слово текста. */
.sluzhebno {
  font-size: var(--kegl-11);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.2;
}

.vchera {
  border: var(--linia) solid var(--line);
  border-radius: var(--r-8);
  padding: var(--o-12);
  margin-top: var(--o-8);
}

.vchera b, .tekushchiy b {
  display: block;
  font-size: var(--kegl-28);
  font-weight: var(--ves-vydelen);
  line-height: 1.15;
  margin-top: var(--o-2);
}

.vchera .discip { font-size: var(--kegl-13); color: var(--mute); line-height: 1.3; margin-top: var(--o-4); }
/* Тревога словом: без реакции столько-то агентов. Цвет предупреждения — не ошибки: это ещё поправимо. */
.trevoga-stroka { font-size: var(--kegl-13); color: var(--warn-slovo); line-height: 1.3; margin-top: var(--o-2); }

.tekushchiy {
  background: var(--card);
  border-radius: var(--r-8);
  padding: var(--o-12);
  margin: var(--o-8) 0 var(--o-8);
}

.tekushchiy span { display: block; font-size: var(--kegl-13); color: var(--mute); line-height: 1.2; margin-top: var(--o-2); }

/* Шеврон в строке, которая ведёт дальше: одна из трёх иконок продукта (свод правил, 13). */
.shevron { display: flex; align-items: center; color: var(--mute); }
.shevron svg { width: var(--ikonka); height: var(--ikonka); }

/* ——— Отдел изнутри ——— */
/* Руководитель отдельным блоком: полоска слева — тем же тоном, что «исполнено», он разбирает отчёты. */
.rukovoditel {
  padding: var(--o-6) 0 var(--o-8) var(--pole-stroki);
  border-left: var(--poloska) solid var(--exact);
  margin-top: var(--o-8);
}

/* Строка агента в отделе: слева всё про него, справа — шеврон по центру строки, как у строки отдела
   в «Отделах». Сетка, а не поток: иначе шеврон уезжает под текст (задача 6.16). */
.chelStroka {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--zazor-kolonok);
  align-items: center;
  padding: var(--o-6) 0 var(--o-8) var(--pole-stroki);
  border-bottom: var(--linia) solid var(--line);
  position: relative;
}

.chelStroka > div { min-width: 0; }

.chelStroka::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--o-6);
  bottom: var(--o-8);
  width: var(--poloska);
  border-radius: var(--r-2);
  background: var(--idle);
}

.chelStroka[data-signal="vyshe"]::before { background: var(--exact); }
.chelStroka[data-signal="nizhe"]::before { background: var(--warn); }
.chelStroka .verh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--zazor-kolonok); }
.chelStroka[data-signal="vyshe"] .ishod { color: var(--above-slovo); }
.chelStroka[data-signal="nizhe"] .ishod { color: var(--warn-slovo); }
.chelStroka .ishod { font-size: var(--kegl-17); }
.dengi-stroka { font-size: var(--kegl-19); font-weight: var(--ves-vydelen); line-height: 1.2; }

/* Под полосой прогноза — сколько из него уже получено (решение 45). */
.podPolosoy { font-size: var(--kegl-13); color: var(--mute); margin-top: var(--o-8); }

/* ——— Карточка дела (решение 103) ——— */
/* Поля дела парами: подпись слева, значение справа, линия под парой — как строки остальных списков. */
.polyaDela { display: flex; flex-direction: column; margin-top: var(--o-8); }
.poleDela {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--o-12);
  padding: var(--o-8) 0;
  border-bottom: var(--linia) solid var(--line);
}
.poleDela .podpisPolya { color: var(--mute); flex: none; }
.poleDela .znachenie { text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
/* Просьба изменить комиссию под полями карточки агента (решение 120): строка просьбы и кнопка — с отступом от линии. */
.podpis.prosbaSummy, button.prosbaSummy { margin-top: var(--o-12); align-self: flex-start; }

/* ——— Раскрытия и переключатели (решение 106) ——— */
/* Строка агента в «Прогнозе» раскрывается его делами: четвёртый столбец — место под стрелку,
   у каждой строки, чтобы числа стояли на одной вертикали и у тех, кому раскрывать нечего. */
.chelovek[data-raskryto] { grid-template-columns: var(--h-vlozhennyy) 1fr auto var(--ikonka); }
div.chelovek:not([data-raskryto]) { cursor: default; }
/* Дела под раскрытой строкой — с отступом слева: видно, чьи они, и где кончается раскрытие. */
.raskrytyeDela { padding-left: var(--o-16); border-left: var(--linia) solid var(--line); margin-left: var(--o-8); }
.segodnyaVPlane { padding: var(--o-8) 0 var(--o-4) var(--pole-stroki); }

/* Чёрная плашка «Итогов»: все типы нормы сеткой в два столбца — пара «название число» не рвётся на 320. */
.tipyPlashki {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--o-16);
  row-gap: var(--o-4);
  margin-top: var(--o-8);
  font-size: var(--kegl-13);
  color: var(--mute);
}
.tipPlashki { display: flex; justify-content: space-between; gap: var(--o-8); min-width: 0; }
.tekushchiy .tipyPlashki span { display: inline; margin-top: 0; }
.tipPlashki .chisloTipa { font-variant-numeric: tabular-nums; }

/* «Агенты»: итог отдела за период — название слева, число и норма справа. */
.itogAgentov {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-bottom: var(--o-16);
}
.itogAgentov > * {
  min-height: var(--h-schetchik);
  display: flex;
  align-items: center;
  border-bottom: var(--linia) solid var(--line);
  font-size: var(--kegl-15);
}
.itogAgentov .chisloItoga { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.itogAgentov .chisloItoga[data-signal="nizhe"] { color: var(--danger-slovo); }
.itogAgentov .chisloItoga[data-signal="vyshe"], .itogAgentov .chisloItoga[data-signal="tochno"] { color: var(--exact-slovo); }
/* Строка со стрелкой справа (отдел в «Деньгах» и «Отделах») — третий столбец под стрелку: без него
   стрелка уходила на вторую строку под название. */
.stroka:has(> .shevron) { grid-template-columns: 1fr auto var(--ikonka); }

/* «Настройки»: чат РОПов в МАКС (решение 107) — подпись и две кнопки столбиком. */
.blokChata { display: flex; flex-direction: column; gap: var(--o-8); margin-bottom: var(--o-16); }

/* «Настройки» → нормы (решение 109): число и «С …» — на одной правой линии во всех строках, цифры одной
   ширины. Только этот экран: .sprava у строк других списков выровнена своими правилами. */
.normaSprava { text-align: right; font-variant-numeric: tabular-nums; }

/* День дела кнопками (решение 110): сетка 3×2, день крупно, число под ним; выбранная — акцентом.
   Строка-итог под кнопками всегда видна: куда встанет дело. */
.denDela { display: flex; flex-direction: column; gap: var(--o-8); margin: var(--o-12) 0; }
.plashki.denDela { grid-template-columns: repeat(3, 1fr); gap: var(--o-8); margin-top: 0; display: grid; }
.plashki.denDela .plashka { min-height: var(--h-glavnaya); padding: var(--o-6) var(--o-4); }
.plashki.denDela b { font-size: var(--kegl-15); font-weight: var(--ves-vydelen); }
.plashki.denDela em { font-style: normal; font-size: var(--kegl-13); font-weight: var(--ves-obychnyy); color: var(--mute); line-height: 1.2; }
.plashki.denDela .plashka[aria-pressed="true"] em { color: var(--onAccent); }
.denDela .itogDnya { font-size: var(--kegl-13); color: var(--mute); }

/* «Деньги» → «По отделам» (решение 112): «ждём N · сумма» под сравнением — цифры одной ширины, правым краем. */
.stroka.itog .sprava .zhdem { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* «Подтвердить за агента» (решение 113) — в раскрытии строки агента, на линии его дел. */
.zaAgenta { display: flex; flex-direction: column; gap: var(--o-4); margin: var(--o-8) 0 var(--o-8) var(--o-24); }

/* Отдел в разрезе «По отделам» «Воронки» собственника (решение 119): заголовок отдела — кнопка, она
   открывает воронку отдела. Вид — заголовок раздела со стрелкой справа, как строка, которая ведёт дальше. */
.otdelVoronki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}