/* Пульт аналитики — стили админки (runbook §7).
   Токены перенесены из дизайн-системы опросника (сервер 72,
   /var/www/m108-os-oprisnik/new_design/redesign/tokens.css, блок .dark).
   Тема одна — тёмная (решение владельца 2026-08-14), все цвета заданы явно.
   Шрифты вендорены в static/fonts: CSP запрещает и CDN, и data:-шрифты.
   ⚠ Замена шрифта — только вместе с новым ИМЕНЕМ файла: nginx отдаёт
   /static/ с Cache-Control: immutable на год (runbook §7).
   Правка этого файла долетает без рестарта: ?v=<mtime> в base.html. */

/* ── 1. Шрифты ─────────────────────────────────────────────────────── */
/* Golos Text вариативный: 400 и 600 берут ОДИН файл — второй загрузки нет */
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/golos-text-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/golos-text-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/golos-text-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/golos-text-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/geologica-600-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/geologica-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── 2. Токены ─────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;          /* нативные select, скроллбары, автозаполнение */

  --bg: hsl(240 12% 6%);
  --surface: hsl(240 10% 11%);
  --surface-glass: hsl(240 11% 11% / 0.66);
  --surface-border: hsl(0 0% 100% / 0.08);
  --fg: hsl(28 24% 95%);
  --muted: hsl(240 6% 64%);
  --border: hsl(240 6% 19%);
  --field: hsl(240 8% 13%);

  --brand: hsl(14 96% 67%);
  --brand-ink: hsl(240 12% 8%);
  --brand-soft: hsl(14 40% 24%);

  --success: hsl(152 52% 48%);
  --warning: hsl(36 90% 58%);
  --danger: hsl(0 70% 52%);

  --cat-blue: hsl(217 84% 62%);
  --cat-green: hsl(150 56% 50%);
  --cat-purple: hsl(268 66% 66%);
  --cat-orange: hsl(26 92% 60%);
  --cat-cyan: hsl(190 76% 54%);
  --cat-pink: hsl(330 74% 66%);

  --radius: 0.875rem;
  --gap: 20px;
}

/* ── 3. База и дымка ───────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 400 14px/1.5 "Golos Text", system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}

/* три радиальных пятна поверх графита — «дым» без шейдера */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(58% 44% at 12% 0%, hsl(14 92% 60% / 0.16), transparent 70%),
    radial-gradient(50% 40% at 88% 4%, hsl(266 64% 56% / 0.13), transparent 72%),
    radial-gradient(70% 50% at 50% 100%, hsl(6 70% 48% / 0.07), transparent 75%);
}

.wrap { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 0 24px 72px; }

.font-display { font-family: "Geologica", "Golos Text", system-ui, sans-serif;
                font-weight: 600; letter-spacing: -0.02em; }

a { color: var(--brand); }
::selection { background: var(--brand); color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── 4. Шапка ──────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; margin-bottom: 10px;
  background: hsl(240 12% 6% / 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--surface-border);
}
.brandmark { display: flex; align-items: center; gap: 12px; margin-right: auto;
             text-decoration: none; color: var(--fg); }
.logo {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), hsl(6 70% 52%));
  color: var(--brand-ink); font-size: 20px;
  box-shadow: 0 6px 20px -6px hsl(14 92% 60% / 0.55);
}
.brandmark b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.brandmark span { display: block; font-size: 12px; color: var(--muted); }

.top nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; }
.top nav a {
  font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--field); color: var(--muted);
  transition: color .15s, border-color .15s;
}
.top nav a:hover { color: var(--fg); border-color: hsl(240 6% 30%); }
.top nav a.active {
  color: var(--brand-ink); background: var(--brand); border-color: var(--brand);
  font-weight: 600;
}
.who { display: flex; align-items: center; gap: 8px; }
.logo svg { display: block; }
.ava {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand), hsl(26 92% 60%));
  color: var(--brand-ink); font-weight: 600; font-size: 13px;
}
.top form.inline button {
  background: var(--field); border: 1px solid var(--border); color: var(--muted);
  border-radius: 999px; padding: 7px 13px; font-size: 13px; white-space: nowrap;
}
.top form.inline button:hover { color: var(--fg); border-color: hsl(240 6% 30%); }

/* центрированный логотип для страницы входа (шапки там нет) */
.brandmark.solo { justify-content: center; margin: 48px auto 22px; }

/* ── 5. Типографика и карточки ─────────────────────────────────────── */
h1 { font-family: "Geologica", sans-serif; font-weight: 600; letter-spacing: -0.02em;
     font-size: clamp(26px, 5vw, 42px); line-height: 1.1; margin: 22px 0 8px;
     text-wrap: balance; hyphens: auto; }
h1 em { font-style: normal; color: var(--brand); }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted);
     font-weight: 600; margin: 32px 0 14px; display: flex; align-items: center; gap: 10px; }
h2::after { content: ""; flex: 1; height: 1px; background: var(--border); }
h3 { font-family: "Geologica", sans-serif; font-weight: 600; font-size: 16px;
     letter-spacing: -0.01em; margin: 26px 0 10px; }
.card h3 { margin: 0 0 2px; font-size: 15px; }
.lede { color: var(--muted); margin: 0 0 24px; max-width: 66ch; }
.sub { font-size: 12.5px; color: var(--muted); margin: 0 0 16px; }

.card {
  background: var(--surface-glass);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  padding: 20px 22px;
}
.grid { display: grid; gap: var(--gap); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

.kpi .label { font-size: 12.5px; color: var(--muted); }
.kpi .val { font-family: "Geologica", sans-serif; font-weight: 600; font-size: 36px;
            line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
            margin: 6px 0 6px; }
.kpi .val small { font-size: 16px; color: var(--muted); font-weight: 400; margin-left: 5px;
                  font-family: "Golos Text", sans-serif; letter-spacing: 0; }
.delta { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
         font-weight: 600; padding: 3px 9px; border-radius: 999px;
         font-variant-numeric: tabular-nums; }
.delta.up { color: var(--success); background: hsl(152 52% 48% / 0.13); }
.delta.down { color: var(--danger); background: hsl(0 70% 52% / 0.14); }
.delta.flat { color: var(--muted); background: hsl(240 6% 40% / 0.16); }
.note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.hint { border-left: 2px solid var(--brand); padding: 8px 0 8px 14px; color: var(--muted);
        font-size: 12.5px; margin-top: 20px; }
.hint b { color: var(--fg); font-weight: 600; }

/* Списки выпуска отчёта (/report): «Сделано и планы» */
ul.plain { margin: 0; padding-left: 20px; display: grid; gap: 8px;
           font-size: 13.5px; line-height: 1.5; color: var(--muted); }
ul.plain li::marker { color: var(--brand); }

/* Выводы месяца: точка-уровень + текст (levels из metrics_calc.month_conclusions) */
.findings { display: grid; gap: 7px; font-size: 13px; line-height: 1.45; }
.findings > div { display: flex; gap: 9px; align-items: baseline; }
.findings i { flex: none; width: 8px; height: 8px; border-radius: 50%;
              transform: translateY(-1px); }
.findings i.good { background: var(--success); }
.findings i.warn { background: var(--warning); }
.findings i.bad { background: var(--danger); }
.findings i.info { background: var(--muted); }

/* Вердикт раздела выпуска (/report): трактовка стоит под цифрами, которые
   объясняет. Полоса — приём .hint: отличима от карточек с данными, нового
   языка оформления не заводит. h3 перебивает .card h3 порядком в файле. */
.verdict { border-left: 2px solid var(--brand); }
.verdict h3 { margin: 14px 0 4px; }
/* граница между порогами и текстом модели внутри одной карточки: решение
   владельца 2026-08-14 требует, чтобы детерминированное и машинное различались */
.verdict .vsrc { margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--border);
                 font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
                 color: var(--muted); }
.verdict .vsrc + h3 { margin-top: 8px; }

/* ── 6. Формы и таблицы ────────────────────────────────────────────── */
input, select, button, textarea {
  font: inherit; color: var(--fg); background: var(--field);
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px;
}
input[type=number] { width: 76px; font-variant-numeric: tabular-nums; }
input[type=checkbox] { width: auto; accent-color: var(--brand); }
button { cursor: pointer; }
/* Ссылка в виде кнопки. Нужна там, где переход обязан быть НАВИГАЦИЕЙ, а не
   отправкой формы: CSP `form-action 'self'` распространяется и на редиректы,
   которым следует отправка формы, поэтому GET-форма на внешний провайдер
   (Keycloak) блокируется браузером (проверено 2026-09-07). */
a.btnlike {
  font: inherit; color: var(--fg); background: var(--field);
  border: 1px solid var(--border); border-radius: 9px; padding: 6px 10px;
  display: block; text-align: center; text-decoration: none; cursor: pointer;
}
a.btnlike:hover { border-color: hsl(240 6% 32%); }
button:hover { border-color: hsl(240 6% 32%); }
select { padding-right: 6px; }

table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
     color: var(--muted); font-weight: 600; padding: 11px 13px;
     background: hsl(240 10% 13%); border-bottom: 1px solid var(--border);
     position: sticky; top: 68px; }
/* внутри overflow-контейнера sticky отсчитывается от НЕГО, а не от окна:
   с top:68px шапка уезжала вниз и наезжала на первую строку */
.tablewrap th { top: 0; }
td { padding: 11px 13px; border-bottom: 1px solid hsl(240 6% 15%); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td, table tr:hover td { background: hsl(240 8% 13% / 0.5); }
.num, td.num { font-variant-numeric: tabular-nums; }

/* широкие таблицы (7 колонок «Задач») скроллятся внутри себя, а не распирают страницу */
.tablewrap { overflow-x: auto; border: 1px solid var(--surface-border);
             border-radius: var(--radius); background: hsl(240 10% 10% / 0.6); }
.tablewrap > table { min-width: 900px; }

.chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 3px 9px;
        border-radius: 999px; white-space: nowrap; }
.chip.c1 { color: var(--cat-blue);   background: hsl(217 84% 62% / .14); }
.chip.c2 { color: var(--cat-green);  background: hsl(150 56% 50% / .14); }
.chip.c3 { color: var(--cat-purple); background: hsl(268 66% 66% / .15); }
.chip.c4 { color: var(--cat-orange); background: hsl(26 92% 60% / .14); }
.chip.c5 { color: var(--cat-cyan);   background: hsl(190 76% 54% / .14); }
.chip.c6 { color: var(--cat-pink);   background: hsl(330 74% 66% / .14); }

/* ── 7. Графики ────────────────────────────────────────────────────── */
.chartwrap { overflow-x: auto; }
.chart { display: block; max-width: 100%; height: auto; }
.chart text { font-family: "Golos Text", sans-serif; font-variant-numeric: tabular-nums; }
.ax { font-size: 11px; fill: var(--muted); }
.vlabel { font-size: 11px; font-weight: 600; fill: var(--fg); }
.vlabel.cur { fill: var(--brand); }
.grid-line { stroke: var(--border); stroke-width: 1; }
.bar-prev { fill: hsl(240 6% 34%); }
.bar-cur { fill: var(--brand); }
.line-cur { stroke: var(--brand); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.line-prev { stroke: hsl(240 6% 34%); stroke-width: 2; fill: none; stroke-linecap: round; }
.area-cur { fill: hsl(14 96% 67% / 0.14); }
.dot-prev { fill: var(--bg); stroke: var(--brand); stroke-width: 2.5; }
.dot-cur { fill: var(--brand); }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted);
          margin-bottom: 12px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block;
            margin-right: 6px; }
.legend i.prev { background: hsl(240 6% 34%); }
.legend i.cur { background: var(--brand); }
.legend i.ok { background: var(--success); }
.legend i.warn { background: var(--warning); }
.legend i.bad { background: var(--danger); }

.stack { display: flex; height: 32px; border-radius: 9px; overflow: hidden; margin: 4px 0 12px; }
.stack div { display: grid; place-items: center; font-size: 12px; font-weight: 600;
             color: var(--brand-ink); }
.stack .clean { background: var(--success); }
.stack .fixes { background: var(--warning); }
.stack .conflict { background: var(--danger); color: #fff; }

/* горизонтальные полосы (минуты по спецам, 360°) — НЕ .sumtable: тот занят
   сводкой «спец × категория» на «Задачах» */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 190px 1fr 78px; gap: 14px;
           align-items: center; font-size: 13.5px; }
.bar-track { height: 9px; border-radius: 99px; background: hsl(240 6% 18%); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 99px;
               background: linear-gradient(90deg, var(--brand), hsl(26 92% 60%)); }
.bar-row b { text-align: right; font-variant-numeric: tabular-nums;
             font-family: "Geologica", sans-serif; }

/* ── 8. Совместимость: классы существующих страниц ─────────────────── */
/* Используются в шести шаблонах — имена менять только вместе с шаблонами. */
.banner { background: hsl(36 90% 58% / .12); border: 1px solid hsl(36 90% 58% / .35);
          color: var(--fg); padding: 9px 13px; border-radius: 10px; margin-bottom: 14px; }
.banner.error { background: hsl(0 70% 52% / .13); border-color: hsl(0 70% 52% / .4); }
.muted { color: var(--muted); font-size: 12px; }
.undef { color: var(--danger); font-weight: 600; }
.multi { color: var(--cat-orange); font-size: 11.5px; font-weight: 600; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
/* wrap обязателен: формы с длинными select (ФИО, проекты) иначе распирают документ */
form.inline { display: inline-flex; gap: 6px; margin: 0; align-items: center; flex-wrap: wrap; }
form.inline select { max-width: 100%; }
.projform { flex-wrap: wrap; }
input.override { border-color: var(--warning); background: hsl(36 90% 58% / .1); }
/* сводка «спец × категория» на «Задачах»: строка-итог .grp разворачивает свою
   группу, строки категорий .kid скрыты. Семь колонок на узком экране распирали
   документ (замерено: 643px при 485px вьюпорта), поэтому свой скролл-контейнер —
   но БЕЗ общего min-width:900px, иначе скролл появлялся бы и на широком экране.
   Шапка не липкая: таблица короткая, а sticky всплывал бы над таблицей задач */
.sumwrap { width: fit-content; max-width: 100%; margin-bottom: 14px; }
.sumwrap > table.sumtable { min-width: 0; }
.sumtable { width: auto; }
.sumtable th { position: static; }
.sumtable td, .sumtable th { border-color: var(--border); padding: 8px 13px; }
.sumtable tbody:not(.o) .kid { display: none; }
.sumtable tbody:not(:last-child) > tr:last-child > td { border-bottom: 1px solid var(--border); }
.sumtable .kid td:nth-child(2) { padding-left: 26px; }
/* ghost-кнопка в ячейке: без плашки и сдвига, на наведение отвечает только подпись */
.sumtable .expand { background: none; border: 0; padding: 0; color: var(--fg);
  font: inherit; cursor: pointer; }
.sumtable .expand:hover { color: var(--brand); }
.sumtable .expand::before { content: "▸ "; opacity: .55; }
.sumtable tbody.o .expand::before { content: "▾ "; }

/* мультиселект фильтров «Задач»: чекбоксы в details (без JS) */
details.ms { position: relative; display: inline-block; }
details.ms > summary { list-style: none; cursor: pointer; padding: 7px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--field);
  color: var(--fg); font-size: 13px; user-select: none; white-space: nowrap; }
details.ms > summary::-webkit-details-marker { display: none; }
/* каретка отличает раскрывашку-фильтр от кнопки-действия */
details.ms > summary::after { content: " ▾"; opacity: .55; }
details.ms[open] > summary::after { content: " ▴"; }
details.ms[open] > summary { border-color: hsl(240 6% 30%); }
details.ms .ms-list { position: absolute; z-index: 30; min-width: 240px;
  max-height: 260px; overflow-y: auto; margin-top: 4px; padding: 8px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 8px 24px hsl(240 12% 4% / .5); }
details.ms .ms-list label { display: flex; gap: 7px; align-items: center;
  font-size: 13px; white-space: nowrap; }

/* сверка проектов с консом: мягкий уровень (нет в месяце) / резкий (нет нигде) /
   нейтральный (проект в консе есть, клиент назывался иначе — правки не требует) */
input.cons-other { border-color: var(--warning); background: hsl(36 90% 58% / .10); }
input.cons-never { border-color: var(--danger); background: hsl(0 70% 52% / .12); }
input.cons-renamed { border-style: dashed; }

/* плашка пакетного сохранения: появляется, когда есть несохранённые правки.
   Фиксирована внизу — иначе к кнопке пришлось бы прокручивать страницу, с чего
   задача и началась. z-index выше .ms-list (30); плашка вне таблиц, поэтому со
   sticky-шапкой не спорит. [hidden] нужен явно: display:flex его перебивает */
.savebar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px;
  z-index: 40; display: flex; gap: 12px; align-items: center; padding: 10px 14px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 8px 24px hsl(240 12% 4% / .5); font-size: 13px; }
.savebar[hidden] { display: none; }
/* пока плашка видна, она не должна перекрывать последнюю строку таблицы */
body.has-savebar { padding-bottom: 64px; }
/* поле с несохранённой правкой — тем же приёмом, что input.override */
input.dirty { border-color: var(--brand); background: hsl(14 96% 67% / .10); }

/* режим правки выпуска (/report, static/app.js): host — сам блок data-eb; пунктир —
   можно править, бренд — в фокусе; inline-block у span, чтобы опустошённый блок не
   схлопнулся в ноль; data-edited ставит сервер на блоки с сохранённой правкой */
#issue.editing [data-eb] { outline: 1px dashed var(--border); outline-offset: 2px;
  border-radius: 4px; cursor: text; min-height: 1em; }
#issue.editing span[data-eb] { display: inline-block; min-width: 1ch; }
#issue.editing [data-eb]:focus { outline: 2px solid var(--brand); }
#issue.editing [data-eb].dirty { background: hsl(14 96% 67% / .10); }
#issue.editing [data-edited] { outline-color: var(--brand-soft); outline-style: dotted; }
/* опустошённый владельцем блок вне режима правки не оставляет маркер списка или
   пустой отступ; в режиме правки он виден и кликабелен */
#issue:not(.editing) [data-eb]:empty { display: none; }

/* Маска сумм ФОТ в выпуске (кнопка «скрыть ФОТ», static/app.js): содержимое узлов
   НЕ меняется — только видимость. Подмена текста уехала бы в ручные правки через
   data-eb (span.delta и <small> внутри .val — редактируемые блоки, report_edit.py:25-26).
   Состояние — класс hide-fot на <html>; fot-ready ставит модуль, разметив карточки. */
html.hide-fot.fot-ready #issue:not(.editing) .fotcard .val {
  visibility: hidden; position: relative; }
html.hide-fot.fot-ready #issue:not(.editing) .fotcard .val::after {
  content: attr(data-mask); visibility: visible; position: absolute; left: 0; top: 0;
  color: var(--muted); }
html.hide-fot.fot-ready #issue:not(.editing) .fotcard .delta { visibility: hidden; }
/* До инициализации модуля неизвестно, какие карточки рублёвые, — гасим числа и
   бейджи всех, иначе суммы успевают мелькнуть при загрузке. Бейдж обязателен:
   в нём стоит «факт выплат N ₽», то есть та же величина. */
html.hide-fot:not(.fot-ready) #issue .card.kpi .val,
html.hide-fot:not(.fot-ready) #issue .card.kpi .delta { visibility: hidden; }

/* продукты × спецы: колонки спецов одной ширины независимо от содержимого;
   имя продукта длиннее колонки обрезается многоточием (полное — в title).
   100px вместо прежних 145: кнопка «ок» ушла из ячейки вместе с точечным
   сохранением, осталось одно поле — 210 + 6×100 = 810 против 1080, и матрица
   перестала скроллиться по горизонтали на широком экране */
table.prodtable { table-layout: fixed; }
.prodtable th:first-child, .prodtable td:first-child { width: 210px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prodtable th:not(:first-child), .prodtable td:not(:first-child) { width: 100px; }
.prodtable input[type="number"] { width: 72px; }

/* ── 9. Адаптив и доступность ──────────────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card { background: var(--surface); }
  .top { background: var(--bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 14px 56px; }
  .top { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .who .name { display: none; }
  .bar-row { grid-template-columns: 132px 1fr 64px; }
  th { position: static; }        /* липкая шапка таблицы под липким хедером мешает */
}

/* Стек занятости спецов: дорожка = 100 % месяца человека (templates/_charts.html).
   Сегменты — flex-элементы, поэтому ширины в % складываются без округлений. */
.bar-track.stack { display: flex; gap: 1px; background: hsl(240 6% 14%); }
.bar-track.stack i { border-radius: 0; background: none; flex: 0 0 auto; }
/* Цвета сегментов перечисляют ОБА контекста — дорожку и легенду: правило вида
   `.bar-track.stack i.seg-*` до квадратиков легенды не достаёт, и легенда
   оказывается бесцветной, то есть перестаёт объяснять полосу. */
.bar-track.stack i.seg-task, .stack-legend i.seg-task {
    background: linear-gradient(90deg, var(--brand), hsl(26 92% 60%)); }
.bar-track.stack i.seg-prod, .stack-legend i.seg-prod { background: hsl(200 55% 46%); }
.bar-track.stack i.seg-vac,  .stack-legend i.seg-vac  { background: hsl(150 30% 38%); }
.bar-track.stack i.seg-free, .stack-legend i.seg-free {
    background: repeating-linear-gradient(45deg,
    hsl(240 6% 26%) 0 3px, hsl(240 6% 20%) 3px 6px); }
.stack-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px;
                font-size: 12px; color: var(--muted); }
.stack-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stack-legend i { width: 12px; height: 9px; border-radius: 3px; display: inline-block; }