/* Управляющая часть — оформление.

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

   Цвет несёт ровно один смысл — тревогу. Если раскрасить всё,
   не будет видно ничего. */

:root {
  /* 🔴 `color-scheme` обязателен, и это не украшение.

     Без него браузер считает страницу «не знающей про тёмную тему»
     и включает автоматическое затемнение — сам инвертирует наши цвета.
     Владелец 20/09 прислал скриншот боевой именно в таком виде: красные
     строки стали почти чёрными, а тонкие границы пустых ячеек, незаметные
     в светлой, превратились в светлые чёрточки поперёк строки.

     То есть тёмную тему нам не заказывали — её рисовал браузер, и рисовал
     плохо. Объявив поддержку обеих, мы забираем цвета обратно себе. */
  color-scheme: light dark;

  --фон: #f6f7f9;
  --карточка: #ffffff;
  --текст: #17202a;
  --тихий: #6b7785;
  --рамка: #dfe4ea;
  --бирюза: #0f8b8d;
  --тревога: #b3261e;
  --тревога-фон: #fdecea;

  /* Цвета, которые раньше стояли числами по всему файлу. В тёмной теме
     каждый из них меняется, и без имени их пришлось бы искать глазами. */
  --на-бирюзе: #ffffff;         /* текст на бирюзовой шапке и кнопках */
  --на-бирюзе-тихий: #d7f0f0;   /* второстепенное там же */
  --кнопка-фон: rgba(255, 255, 255, .18);
  --подвал-строки: #f0f3f6;     /* итоговая строка таблицы */
  --молчит-фон: #fffaf3;        /* строка молчуна — тёплый, не тревожный */
  --метка-фон: #eef1f4;
  --ждём-фон: #fde7c8;
  --ждём-текст: #7a4b06;
  --карандаш-наведение: #e7f2f2;
  --на-тревоге: #ffffff;        /* текст внутри красной плашки */
}

/* 🔴 ТЁМНАЯ ПАЛИТРА — ЗНАЧЕНИЯ ОДИН РАЗ, ВКЛЮЧЕНИЙ ДВА.

   Смысл цветов тот же, что в светлой: тревожное остаётся тревожным,
   спокойное спокойным, бирюза остаётся бирюзой. Меняется только то,
   на чём они лежат. Краснозаливка как РЕШЕНИЕ не тронута (владелец
   выбрал «как есть») — это её тёмный эквивалент под ту же громкость.

   🔴 Сами цвета перечислены ОДИН раз, ниже дважды лишь переключаются
   ссылки на них. Два полных набора значений рядом — это два источника
   правды об одном факте: следующая правка цвета разъехалась бы по ним
   молча, а мы этот класс ловим третью неделю.

   Первая редакция этого блока была неверной: я написала селектор
   `:root:not([data-theme="light"])` без медиазапроса, и тёмная тема
   включалась ВСЕГДА, кроме явно выбранной светлой. Поймала на себе
   при чтении собственного вывода. */
:root {
  --т-фон: #12161b;
  --т-карточка: #1a2027;
  --т-текст: #e7ecf1;
  --т-тихий: #9aa7b4;
  --т-рамка: #2c343d;
  --т-бирюза: #2fb3b5;
  --т-тревога: #ff6b5e;
  --т-тревога-фон: #3a1c19;
  --т-на-бирюзе: #07222a;
  --т-на-бирюзе-тихий: #0c3b44;
  --т-кнопка-фон: rgba(0, 0, 0, .22);
  --т-подвал-строки: #222932;
  --т-молчит-фон: #2b2418;
  --т-метка-фон: #262d36;
  --т-ждём-фон: #4a3616;
  --т-ждём-текст: #f4c98a;
  --т-карандаш-наведение: #203036;
  /* В тёмной теме плашка светло-красная (тёмно-красная на тёмном
     не читается), и белый текст на ней даёт контраст 2.79 при норме
     4.5 — замерено, не на глаз. Поэтому текст внутри неё тёмный. */
  --т-на-тревоге: #2a0d0a;
}

/* Включение первое: человек выбрал тёмную сам. */
:root[data-theme="dark"] {
  --фон: var(--т-фон);
  --карточка: var(--т-карточка);
  --текст: var(--т-текст);
  --тихий: var(--т-тихий);
  --рамка: var(--т-рамка);
  --бирюза: var(--т-бирюза);
  --тревога: var(--т-тревога);
  --тревога-фон: var(--т-тревога-фон);
  --на-бирюзе: var(--т-на-бирюзе);
  --на-бирюзе-тихий: var(--т-на-бирюзе-тихий);
  --кнопка-фон: var(--т-кнопка-фон);
  --подвал-строки: var(--т-подвал-строки);
  --молчит-фон: var(--т-молчит-фон);
  --метка-фон: var(--т-метка-фон);
  --ждём-фон: var(--т-ждём-фон);
  --ждём-текст: var(--т-ждём-текст);
  --карандаш-наведение: var(--т-карандаш-наведение);
  --на-тревоге: var(--т-на-тревоге);
}

/* Включение второе: человек ничего не выбирал, а система тёмная.
   `:not([data-theme="light"])` здесь обязателен — иначе выбор «светлая»
   не переживёт системной настройки, и кнопка будет нажиматься впустую. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --фон: var(--т-фон);
    --карточка: var(--т-карточка);
    --текст: var(--т-текст);
    --тихий: var(--т-тихий);
    --рамка: var(--т-рамка);
    --бирюза: var(--т-бирюза);
    --тревога: var(--т-тревога);
    --тревога-фон: var(--т-тревога-фон);
    --на-бирюзе: var(--т-на-бирюзе);
    --на-бирюзе-тихий: var(--т-на-бирюзе-тихий);
    --кнопка-фон: var(--т-кнопка-фон);
    --подвал-строки: var(--т-подвал-строки);
    --молчит-фон: var(--т-молчит-фон);
    --метка-фон: var(--т-метка-фон);
    --ждём-фон: var(--т-ждём-фон);
    --ждём-текст: var(--т-ждём-текст);
    --карандаш-наведение: var(--т-карандаш-наведение);
    --на-тревоге: var(--т-на-тревоге);
  }
}

/* Кнопка темы в шапке. Подписана словом: значок без имени — загадка,
   а тут ещё и три состояния, которые значком не различить. */
.тема {
  background: var(--кнопка-фон);
  color: var(--на-бирюзе);
  border: 0;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--фон);
  color: var(--текст);
  /* 🔴 Подвал прижат к низу окна, когда содержимого мало. Владелец
     20/09 на мониторе 1900×1030 увидел, что страница обрывается на трети
     экрана: таблица кончилась, подвал висит сразу под ней, а ниже
     четверть экрана пустоты — страница выглядит недогруженной.

     Растягивается СЕРЕДИНА, а не добавляется «воздух»: содержимое
     остаётся там же, где было, просто подвал уходит вниз. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
footer { flex: 0 0 auto; }

header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--бирюза);
  color: var(--на-бирюзе);
}

header a {
  color: var(--на-бирюзе);
  text-decoration: none;
  margin-right: 16px;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

header a.тут { border-bottom-color: var(--на-бирюзе); }

header .кто { display: flex; align-items: center; gap: 12px; font-size: 14px; }
/* Звание рядом с именем: на бирюзовом фоне .8 не читалось —
   проверено глазами на живом экране 13/09, не на глаз в редакторе. */
header .звание { color: var(--на-бирюзе-тихий); }

header button {
  background: var(--кнопка-фон);
  color: var(--на-бирюзе);
  border: 0;
  border-radius: 6px;
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
}

main { padding: 20px; max-width: 1100px; margin: 0 auto; }

h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 19px; margin: 28px 0 10px; }

.итоги { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 20px; }

.плитка {
  flex: 1 1 160px;
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: 10px;
  padding: 14px 16px;
}

.плитка b { display: block; font-size: 28px; line-height: 1.1; }
.плитка span { color: var(--тихий); font-size: 14px; }
.плитка.тревога { border-color: var(--тревога); background: var(--тревога-фон); }
.плитка.тревога b { color: var(--тревога); }

/* Панель периодов — первое, что заказчик просил видеть слева вверху.
   Кнопки переносятся на узком экране, а не жмутся в нечитаемую строку. */
.периоды { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

.периоды a {
  padding: 7px 12px;
  border: 1px solid var(--рамка);
  border-radius: 999px;
  background: var(--карточка);
  color: var(--текст);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .02em;
  white-space: nowrap;
}

.периоды a.тут { background: var(--бирюза); border-color: var(--бирюза); color: var(--на-бирюзе); }

.листалка { display: flex; gap: 18px; margin-bottom: 14px; font-size: 14px; }
.листалка a { color: var(--бирюза); }

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: 10px;
  overflow: hidden;
}

th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--рамка); }
th { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--тихий); }
tbody tr:last-child td { border-bottom: 0; }

td a { color: var(--текст); }

/* ─────────────────────────────────────────────────────────────────────
   🔴 ТАБЛИЦА `.строками` — ДВЕ ПОДАЧИ ОДНИХ И ТЕХ ЖЕ ДАННЫХ.

   На телефоне таблица из шести колонок не работает: замерено 13/09 —
   ширина 978 px при окне 345 px, то есть видно 35 %. При открытии
   читаются только имя и звание, а цифры и надпись «ВНИМАНИЕ АВТООТЧЁТ»
   стоят за правым краем; домотал вправо — за левый край ушли имена.
   Видно, что кто-то автоотчёт, и не видно кто.

   Поэтому по умолчанию (узкий экран) таблица превращается в СТРОКИ —
   ровно в ту форму, которую заказчик нарисовал сам (Т-9.2):

       ДО Косарева ИС 15/10 0сд 4ч

   Его формат не украшение: это единственная форма, которая влезает
   в ширину телефона целиком, без горизонтальной прокрутки вообще.

   Разметка при этом ОДНА. Дублировать блок ради второго вида нельзя:
   тест `test_silent_people_are_counted_not_hidden` считает метки
   «нет отчёта» по всей странице, и второй экземпляр строк дал бы
   двойной счёт — то есть молча сломал бы проверку, которая стережёт
   главную новость экрана.

   С 701 px всё возвращается таблицей — там ширина есть, и колонки
   со сквозным взглядом по столбцу удобнее.
   ───────────────────────────────────────────────────────────────────── */

table.строками,
table.строками tbody,
table.строками tfoot,
table.строками tr,
table.строками td { display: block; }

/* Заголовки колонок в строчной подаче не нужны: звание, цифры и метка
   объясняют себя сами, а шапка съела бы половину экрана. */
table.строками thead { display: none; }

/* 🔴 Строка — гибкая раскладка, а не поток инлайнов.

   Причина одна и она с живого экрана: у должностей без звания
   («Директор по Юридическим вопросам») длинный текст занимал первую
   строку, а цифры уезжали вниз — человек читал это как два разных
   объекта. В гибкой раскладке длинное звание уходит на свою строку
   целиком, а имя и цифры остаются рядом; короткие звания (`ДО`, `Спец`)
   как стояли первыми в его формате, так и стоят. */
table.строками tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 10px 12px;
  border-bottom: 1px solid var(--рамка);
}

table.строками tbody tr:last-child { border-bottom: 0; }

table.строками td {
  display: inline-block;
  vertical-align: baseline;
  padding: 0;
  margin-right: 6px;
  border: 0;
}

/* Наставник в строку заказчика не входит и на телефоне только мешает —
   на широком экране колонка возвращается. */
table.строками td.наставник { display: none; }

/* Имя: на телефоне фамилия с инициалами (`Черемнов Ю.`), на широком —
   полное. Оба варианта лежат в разметке, показывается ровно один. */
.полное { display: none; }
.краткое { display: inline; }

table.строками td.имя { font-weight: 600; }
table.строками td.имя a { text-decoration: none; }

/* Второй ряд карточки — то, что не главное за период: сумма семи позиций
   и сколько дней человек отчитывался. Отдельной строкой и приглушённо,
   иначе две группы цифр подряд сливаются в одну нечитаемую (видно
   глазами на 375 px: `18/12/4/2/1/9/6 41/12 1сд 6ч`). */
table.строками td.дни,
table.строками td.сумма {
  flex: 1 0 100%;          /* со своей строки, под главным */
  margin: 4px 0 0;
  color: var(--тихий);
  font-size: 14px;
}

/* Пустая ячейка в гибкой раскладке всё равно занимает место и разрывает
   строку зазором. Пусть исчезает совсем. */
table.строками td:empty { display: none; }

table.строками tfoot tr { background: var(--подвал-строки); }

/* 🔴 На телефоне звание возвращается ПЕРЕД именем — так заказчик пишет
   строку сам (Т-9.2: `ДО Косарева ИС 15/10 0сд 4ч`). В разметке первым
   стоит имя, потому что на широком экране колонка звания съедала
   278 px против 167 px у имени; порядок правит CSS, а не второй блок
   разметки — дублировать её ради второго вида нельзя. */
table.строками.день td.звание { order: -1; }

/* 🔴 Карандаш на телефоне ПРИБИТ к правому краю карточки, а не поставлен
   в конец строки.

   Две попытки до этой были неверны, и обе по-своему:

   · первая — карандаш в разметке первый, и в строчной подаче он встал
     между званием и именем, разорвав строку заказчика
     (`ДО ✎ Черемнов Ю.` вместо `ДО Черемнов Ю.`);
   · вторая — `order: 9` увёл его в конец, формат уцелел, но позиция
     снова поехала за содержимым: у коротких строк карандаш оказывался
     справа на первой строке, у строк с плашкой `ВНИМАНИЕ АВТООТЧЁТ` —
     ниже, а у самых длинных ещё и левее. Семь строк — четыре разных
     места, и глаз ищет действие заново в каждой.

   А вся задача началась ровно с этого: слово владельца 20/09 — «чтобы
   он не был раскидан по всему столбцу». На широком экране это решено
   колонкой; здесь то же решает вынос из потока: правый край, середина
   по высоте, не зависит ни от длины имени, ни от числа строк. */
/* Порядок кусков строки на телефоне задаётся явно, а не тем, как они
   лежат в разметке: на широком экране порядок колонок другой. */
table.строками.день td.имя { order: 0; }
table.строками.день td.цифры { order: 1; }
table.строками.день td.действие { order: 2; }
table.строками.день td.пометка { order: 3; }
table.строками.день td.время { order: 4; }

/* 🔴 Карандаш стоит ПРАВЕЕ ЦИФР и вне потока — «после цифр… но не
   смещая цифры», слово владельца 20/09 21:08.

   Почему вне потока, а не просто следующим элементом: замерено
   на 375 px. Ширина карточки 327, из них звание и имя забирают
   от 130 до 200 (имена разной длины), цифры — 142. Карандаш в потоке
   в первую строку уже не помещается и переносится вниз: у шести строк
   из семи он оказывался слева на второй строке, у седьмой — справа
   на первой. Ровно та болезнь, из-за которой всё и затевалось.

   Вынутый из потока, он не толкает цифры и не зависит ни от длины
   имени, ни от того, перенеслась ли плашка `ВНИМАНИЕ АВТООТЧЁТ`:
   правый край карточки, уровень первой строки — одинаково у всех.

   Проверка линейкой, которую просила штаб: начало цифр у строки
   с карандашом и без него совпадает до пикселя. */
/* Отступ справа ровно под зону карандаша: лишние пиксели здесь
   выталкивают время отчёта на вторую строку, и карточка растёт
   у каждой третьей строки. */
table.строками.день tr { position: relative; padding-right: 46px; }

table.строками.день td.действие {
  position: absolute;
  right: 2px;
  top: 2px;
  margin: 0;
}

@media (min-width: 701px) {
  table.строками { display: table; }
  table.строками thead { display: table-header-group; }
  table.строками tbody { display: table-row-group; }
  table.строками tfoot { display: table-footer-group; }
  table.строками tr { display: table-row; padding: 0; border-bottom: 0; }
  table.строками td:empty { display: table-cell; }
  table.строками td {
    display: table-cell;
    margin: 0;
    padding: 9px 12px;
    border-bottom: 1px solid var(--рамка);
  }
  table.строками td.наставник { display: table-cell; }
  table.строками td.дни,
  table.строками td.сумма {
    display: table-cell;
    flex: none;
    margin: 0;
    font-size: inherit;
    color: inherit;
  }
  table.строками td.имя { font-weight: 600; }
  table.строками tbody tr:last-child td { border-bottom: 0; }
  .полное { display: inline; }
  .краткое { display: none; }

  /* 🔴 Провал в середине строки: колонки растягивались по всей ширине,
     и между цифрами отчёта и временем зияло полэкрана — глаз терял
     строку по дороге (замечание владельца 20/09). Ширины заданы там,
     где величина короткая и известна; остаток забирает колонка пометок,
     потому что в ней живут метки и кнопка правки. */
  /* 🔴 «Когда» прижато к меткам, а не отброшено вправо: между кнопкой
     и временем зияла треть ширины, и у восьми строк из тринадцати,
     где времени нет вовсе, глаз проезжал пустоту и утыкался
     в наставника. Колонка узкая и стоит сразу за пометками. */
  table.строками.день td.время,
  table.строками.день th.время {
    width: 60px;
    white-space: nowrap;
    text-align: right;
    padding-right: 4px;
  }
  /* 🔴 Имени места больше, чем званию, — и это задаётся явно, а не
     «остатком»: при 18 % на звание оно снова оказалось шире имени
     (191 px против 171), потому что остаток делили между собой
     колонки пометок и наставника.

     Ширина звания подобрана под САМУЮ ДЛИННУЮ должность — «Директор
     по Юридическим вопросам». Сокращать её нельзя (решено 13/09:
     `Юр` вместо должности читал бы про себя он сам), но и рвать
     на три строки незачем: строка таблицы вырастает втрое, и на снимке
     она была самой высокой из тринадцати. В две строки помещается. */
  table.строками.день td.имя,
  table.строками.день th.имя { width: 21%; }
  table.строками.день td.звание,
  table.строками.день th.звание { width: 19%; }
  table.строками.день td.наставник,
  table.строками.день th.наставник { width: 13%; }
  table.строками.день td.цифры,
  table.строками.день th.позиции { width: 18%; white-space: nowrap; }

  /* 🔴 Колонке пометок нужна ширина под «ВНИМАНИЕ АВТООТЧЁТ» И кнопку
     рядом. На 1280 они умещались в строку, а на его мониторе 1900
     расходились на две — и каждая такая строка вырастала вдвое.
     Видно только на снимке в его размере: на моём экране всё было
     хорошо. */
  table.строками.день td.пометка,
  table.строками.день th.пометка { width: 24%; }

  /* Колонка действия — ПОСТОЯННОЙ ширины, не `auto`: иначе она поедет
     от содержимого и карандаши снова встанут неровно. */
  table.строками.день td.действие,
  table.строками.день th.действие { width: 52px; padding-left: 8px; padding-right: 0; }

  /* 🔴 И ОБЯЗАТЕЛЬНО возвращаем ячейку в поток. Вынос из потока сделан
     для телефона, где строка — карточка; на широком экране строка это
     `table-row`, и абсолютная ячейка улетала ЗА правый край таблицы:
     замер показал left 1108 при ширине строки 1059. Наружу торчала её
     нижняя граница — тонкая чёрточка справа у строк без карандаша.

     В светлой теме её почти не видно (светло-серое на светлом), поэтому
     она прожила незамеченной и уехала на боевую. Владелец увидел её
     первым — в тёмной теме, где та же граница стала светлой на тёмном.

     🔴 Диагноз я сначала поставила неверно: решила, что чёрточку рисует
     автозатемнение браузера. Нет — её рисовали мы, тёмная тема только
     проявила. Правило внутри медиазапроса отменяет правило снаружи;
     без этой отмены мобильная раскладка протекает на десктоп. */
  table.строками.день tr { position: static; padding-right: 0; }
  table.строками.день td.действие {
    position: static;
    right: auto;
    top: auto;
    transform: none;
  }
  table.строками.день td.действие .карандаш { margin: -10px 0; }
  table.строками.день td.пометка { white-space: nowrap; }

  /* Звание и наставник — справочные колонки: нужны, но не для них
     человек открыл экран. Приглушены, чтобы не спорить с именем. */
  table.строками.день td.звание,
  table.строками.день td.наставник {
    color: var(--тихий);
    font-size: 13px;
  }
}

/* Шапка конторы — первая строка макета заказчика (Т-9.2). */
.контора {
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-left: 4px solid var(--бирюза);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 14px 0;
}

.контора b { display: block; font-size: 20px; }
.контора span { color: var(--тихий); font-size: 13px; }

/* Пустое состояние — §5.2а: пустой экран без объяснения читается
   как поломка. */
.пусто {
  background: var(--карточка);
  border: 1px dashed var(--рамка);
  border-radius: 10px;
  padding: 18px 16px;
  color: var(--тихий);
  margin: 14px 0;
}

.цифры { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Consolas", monospace; white-space: nowrap; }
.время { color: var(--тихий); font-variant-numeric: tabular-nums; }
.звание { color: var(--тихий); font-size: 14px; }

/* 🔴 Подсветка кладётся на СТРОКУ, а не на ячейки. В строчной подаче
   ячейки — inline-блоки, и фон на них давал рваные цветные пятна вместо
   одной выделенной строки (видно глазами на 375 px, 13/09). */
tr.молчит { background: var(--молчит-фон); }
tr.авто { background: var(--тревога-фон); }

.метка {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--метка-фон);
  color: var(--тихий);
  white-space: nowrap;
}

.метка.тревога { background: var(--тревога); color: var(--на-тревоге); letter-spacing: .04em; }
.метка.ждём { background: var(--ждём-фон); color: var(--ждём-текст); }

/* 🔴 «Отчёт не нужен» и «ушёл из команды» — не события, а свойства
   человека: от него отчёта и не ждали. Рядом с ними «нет отчёта» это
   обвинение. Раньше обе группы выглядели одинаково блёкло, и глаз
   не различал «одному не надо» и «другой не сделал» (замечание
   владельца 20/09). Теперь тихие метки тише некуда: без заливки. */
.метка.тихо {
  background: transparent;
  border: 1px solid var(--рамка);
  color: var(--тихий);
}

/* Строка без единой цифры — словами вместо `0/0/0/0/0/0/0`. Подаётся
   тихо: это не результат, это его отсутствие. */
.без-активности {
  color: var(--тихий);
  font-size: 13px;
  font-family: system-ui, sans-serif;
}

/* Короткие подписи позиций в шапке колонки: `встр/пок/дог/зад/сд/…`.
   Легенда стояла под таблицей — чтобы прочесть строку цифр, человек
   листал вниз и возвращался. */
.легенда {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--тихий);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Знаменатель у числа в плитке: «3 из 9». Число без опоры не читается. */
.плитка .из {
  display: block;
  margin-top: -4px;
  font-size: 13px;
  font-style: normal;
  color: var(--тихий);
}

.пояснение { color: var(--тихий); font-size: 14px; margin-top: 14px; }
.ошибка { color: var(--тревога); background: var(--тревога-фон); padding: 10px 12px; border-radius: 8px; }

.вход {
  max-width: 380px;
  margin: 8vh auto;
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: 12px;
  padding: 28px;
}

.вход label { display: block; margin: 14px 0 4px; font-size: 14px; color: var(--тихий); }

.вход input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  font: inherit;
}

.вход button {
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  background: var(--бирюза);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

/* Страница «Доступ» — выдача паролей (заявка заказчика 13/09/2026). */
.карточка-пароль {
  background: var(--карточка);
  border: 1px solid var(--бирюза);
  border-left: 4px solid var(--бирюза);
  border-radius: 10px;
  padding: 16px;
  margin: 14px 0;
}

.пароль-значение {
  display: block;
  width: 100%;
  font: 20px/1.4 ui-monospace, "Consolas", monospace;
  letter-spacing: .03em;
  padding: 10px 12px;
  margin: 4px 0 10px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  background: var(--фон);
  color: var(--текст);
}

.кнопка-мал {
  padding: 6px 12px;
  background: var(--бирюза);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  /* Ссылка-кнопка ведёт себя как кнопка: подтверждение выдачи пароля
     сделано страницей, а не окошком браузера. */
  display: inline-block;
  text-decoration: none;
}

/* 🔴 КАРАНДАШ вместо слова «править» — слово владельца 20/09:
   «мне сам текст не нравится, надо сделать карандашик или подобное…
   чтобы он не был раскидан по всему столбцу, так как у текста перед
   ним разная длина».

   Он прав дважды. Текст спорил с метками за внимание, а главное —
   кнопка гуляла по горизонтали: у одних строк перед ней длинная
   `ВНИМАНИЕ АВТООТЧЁТ`, у других метки нет вовсе. В таблице ровный
   столбец важнее логического порядка внутри одной строки: человек
   смотрит на тринадцать строк сразу.

   Зона нажатия 44×44 — экран открывают с телефона, и значок размером
   с букву пальцем не поймать. Сам знак меньше, зона больше. */
.карандаш {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px 0;          /* зона больше строки, но не растит её */
  color: var(--бирюза);
  border-radius: 8px;
}

.карандаш svg { width: 19px; height: 19px; }
.карандаш:hover { background: var(--карандаш-наведение); }

/* Текст, который видит только экранный диктор: заголовок колонки
   действия. Иконка без имени — загадка для того, кто видит её впервые. */
.скрыто {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Форма правки отчёта. Семь полей столбиком: на телефоне их правят
   с планёрки, стоя, и два поля в ряд промахиваются пальцем. */
/* 🔴 Форма не растягивается на всю ширину монитора: на 1900 подпись
   «встречи» оказывалась в одном конце строки, а поле ввода — в другом,
   и глаз проезжал полметра пустоты между ними. Тот же провал, что был
   в строке таблицы, только внутри формы. */
form.правка { max-width: 560px; }

form.правка label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--рамка);
}

form.правка input {
  width: 96px;
  padding: 8px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  font: inherit;
  text-align: right;
}

form.правка input[type="text"] {
  width: 60%;
  text-align: left;
}

.кнопки {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0;
}

.кнопки button {
  padding: 12px 20px;
  background: var(--бирюза);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}

footer {
  padding: 22px 20px 40px;
  color: var(--тихий);
  font-size: 13px;
  text-align: center;
}

/* Телефон. Таблица, не переведённая в строки, прокручивается сама —
   но не ломает страницу вбок.

   🔴 `:not(.строками)` обязательно: без этого `white-space: nowrap`
   и горизонтальная прокрутка накрыли бы и строчную подачу, вернув ровно
   ту беду, ради которой она сделана. */
@media (max-width: 700px) {
  main { padding: 14px; }
  h1 { font-size: 20px; }
  h2 { font-size: 17px; }
  table:not(.строками) { display: block; overflow-x: auto; white-space: nowrap; }

  /* Три числа дня — в один ряд, а не в два: иначе список людей начинается
     ниже середины экрана, и первое, что видит человек, — плитки,
     а не строки.

     🔴 Только `.трое`. На карточке человека плиток четыре, и то же
     правило ставило их в ряд по 85 px — подписи рвались в столбик
     по одному слову (видно глазами на 375 px, 13/09). Там две в ряд. */
  .итоги { gap: 8px; margin: 12px 0 16px; }
  .плитка { padding: 12px; }
  .плитка b { font-size: 22px; overflow-wrap: anywhere; }
  /* Семь чисел через дробь длиннее любой подписи — им отдельный размер,
     иначе последний ноль уезжает на свою строку. */
  .плитка b.цифры { font-size: 17px; }
  .плитка span { font-size: 12px; }
  .итоги.трое .плитка { flex: 1 1 0; min-width: 0; padding: 10px 8px; }

  /* 🔴 На телефоне страница была 1398 px при экране 812 — почти два
     экрана на тринадцать человек, и до последних строк надо листать
     дважды. Больше всего места отнимали шапка-итоги: три цифры
     с подписями в три строки каждая.

     Ужимаются подписи, не числа: число — то, ради чего сюда смотрят. */
  .итоги.трое .плитка b { font-size: 24px; }
  .итоги.трое .плитка span { font-size: 12px; line-height: 1.25; display: block; }
  .итоги.трое .плитка .из { font-size: 11px; margin-top: -2px; }
  .итоги { margin: 12px 0 14px; }

  /* Строки таблицы тоже плотнее: 13 строк по 8 px лишних полей —
     это целый лишний экран прокрутки. */
  table.строками tr { padding: 9px 12px; }
  h1 { font-size: 20px; margin: 10px 0; }
}

/* ── Планы рядом с фактом (наряд Н-1) ─────────────────────────────────
   Только токены сайта. Единственный «эффект» — полоса под «план-факт»,
   и она показатель: длина = факт / план. Плана нет — прочерк. */
.план-блок { margin-bottom: 18px; }
.план-период { background: var(--карточка); border: 1px solid var(--рамка);
               border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.план-период.авто { background: var(--тревога-фон); }
.план-заголовок { display: flex; justify-content: space-between; align-items: baseline;
                  gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.план-заголовок .тихо, .план-человек .тихо, .план-нет .тихо { color: var(--тихий); font-size: 13px; }
.план-нет { font-size: 18px; color: var(--тихий); }
.пф-строка { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.пф { display: inline-flex; flex-direction: column; min-width: 64px; }
.пф-имя { font-size: 12px; color: var(--тихий); }
.пф-полоса { display: block; height: 4px; border-radius: 2px; background: var(--метка-фон);
             margin-top: 3px; overflow: hidden; }
.пф-полоса i { display: block; height: 100%; background: var(--бирюза); }
.план-человек { margin-bottom: 8px; }
.план-человек summary { cursor: pointer; padding: 8px 0; }
/* Переключатель вариантов вида — живёт до выбора владельца и отца. */
.варианты { font-size: 13px; color: var(--тихий); display: flex; gap: 8px; flex-wrap: wrap; }
.варианты a { color: var(--тихий); text-decoration: none; padding: 2px 10px;
              border: 1px solid var(--рамка); border-radius: 99px; }
.варианты a.тут { background: var(--бирюза); color: var(--на-бирюзе); border-color: var(--бирюза); }
/* Вариант Б — таблица в своей прокрутке: на телефоне 8 столбцов не влезут,
   а страница целиком вбок ехать не должна. */
/* Ширина — от экрана, а не от родителя: `main` сам растягивается под
   содержимое, и обёртка со 100 % раздвигала страницу до 672 px на телефоне
   в 390 (поймано снимком, 03/10). */
.таблица-прокрутка { overflow-x: auto; margin-bottom: 10px; max-width: calc(100vw - 32px); }
.план-таблица { border-collapse: collapse; min-width: 560px; width: 100%; background: var(--карточка); }
.план-таблица th, .план-таблица td { padding: 6px 8px; border-bottom: 1px solid var(--рамка);
                                     text-align: left; font-size: 13px; vertical-align: top; }
.план-таблица th { color: var(--тихий); font-weight: 600; }
.план-таблица tr.авто { background: var(--тревога-фон); }
/* На телефоне сайт запрещает перенос внутри таблиц (`white-space: nowrap`
   в медиазапросе) — ячейка периода с метками растягивалась на всю ширину,
   и «плана нет» уезжало за край. Здесь перенос разрешён. */
.план-таблица .план-период-имя { min-width: 120px; max-width: 150px; white-space: normal; }
.план-таблица .метка { display: inline-block; margin-top: 3px; white-space: normal; }
.план-период-имя .тихо, .план-строки .тихо { display: block; color: var(--тихий); font-size: 12px; }
/* Вариант В — строки его формата, без полос. */
.план-строки { list-style: none; padding: 0; margin: 0 0 10px; }
.план-строки li { padding: 8px 0; border-bottom: 1px solid var(--рамка); }
.план-строки li.авто { background: var(--тревога-фон); padding-left: 6px; }
.план-строки .план-вид { display: inline-block; min-width: 92px; }

/* ── Админка «Люди и команды» (наряд Н-4) — только токены сайта ── */
.люди-карта { background: var(--карточка); border: 1px solid var(--рамка); border-radius: 10px;
              padding: 10px 12px; margin-bottom: 8px; }
.люди-карта summary { cursor: pointer; }
.люди-карта .тихо, .люди-таблица .тихо { color: var(--тихий); font-size: 13px; }
.люди-таблица .тихо { display: block; }
.люди-форма { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 8px; }
.люди-форма label { display: flex; flex-direction: column; font-size: 12px; color: var(--тихий); }
.люди-форма select, .люди-форма input { font: inherit; padding: 6px 8px; border-radius: 6px;
                                       border: 1px solid var(--рамка); background: var(--карточка); color: var(--текст); }
.люди-форма button.тихая { background: none; color: var(--тревога); border: 1px solid var(--тревога); }
.люди-нельзя { color: var(--тревога); margin: 6px 0; }
.люди-таблица { border-collapse: collapse; width: 100%; min-width: 640px; background: var(--карточка); }
.люди-таблица th, .люди-таблица td { padding: 8px; border-bottom: 1px solid var(--рамка); text-align: left;
                                     vertical-align: top; white-space: normal; }
.люди-таблица tr.ждёт { background: var(--ждём-фон); }
.люди-команда { margin-bottom: 14px; }
.люди-команда.ждут h2 { color: var(--ждём-текст); }