/* Дизайн-система Niti в «Продуктовом контуре».
   Токены — tokens.css (подключается перед этим файлом). Здесь только компоненты,
   и ни одного сырого значения: цвет, отступ, радиус и размер берутся из токенов,
   поэтому тёмная тема работает сама. Описание — docs/дизайн-система.md */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { vertical-align: -.125em; flex-shrink: 0; }
.ic-sm { font-size: var(--ic-sm); }
.ic-md { font-size: var(--ic-md); }
.ic-lg { font-size: var(--ic-lg); }

/* ======================= каркас ======================= */
.shell { display: flex; height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: var(--sp-3);
}
.brand-row {
  display: flex; align-items: center; gap: var(--sp-2);
  /* справа отступа нет: там кнопка «свернуть», и она встаёт вровень
     с шестерёнкой внизу. С отступом «Продуктовый контур» не влезает в строку. */
  padding: var(--sp-2) 0 var(--sp-3) var(--sp-2);
}
.brand-mark {
  width: var(--sp-5); height: var(--sp-5); border-radius: var(--r-xs); flex: none;
  background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.brand-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.brand-sub { font-size: var(--fs-sm); color: var(--muted); }

.nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; }
.nav-label {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: var(--sp-3) var(--sp-3) var(--sp-1);
  font-weight: var(--fw-semibold);
}
.nav a {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px var(--sp-3); border-radius: var(--r-sm);
  color: var(--subtle); font-size: var(--fs-base); transition: background var(--t-fast);
}
.nav a:hover { background: var(--hover); color: var(--text); }
.nav a.active { background: var(--active); color: var(--text); font-weight: var(--fw-semibold); }
.nav-ic { color: var(--muted); font-size: var(--ic-md); display: inline-flex; }
.nav a.active .nav-ic { color: var(--text); }
.nav .count {
  margin-left: auto; background: var(--chip); color: var(--subtle);
  border-radius: var(--r-pill); padding: 1px 9px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.nav .count.crit { background: var(--danger-bg); color: var(--danger); }
.nav .count.accent { background: var(--accent-weak); color: var(--accent); }
.nav a.active .count { background: var(--accent); color: var(--on-accent); }

/* Блок пользователя внизу сайдбара. Селектор со скобкой .sidebar обязателен:
   класс .who есть и в ленте истории цели, и там рамка сверху была бы лишней. */
.sidebar .who { margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid var(--border); }
.sidebar .who .name { font-size: var(--fs-md); font-weight: var(--fw-semibold); padding: var(--sp-2) var(--sp-2) 0; }
.sidebar .who .role { font-size: var(--fs-sm); color: var(--muted); padding: 0 var(--sp-2); }
.sidebar .who button {
  all: unset; cursor: pointer; color: var(--muted); font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-2);
}
.sidebar .who button:hover { color: var(--accent); }

.sidebar .who .кто { display: flex; align-items: center; gap: var(--sp-2); }
.шестерёнка {
  width: 30px; height: 30px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; color: var(--muted); font-size: var(--ic-md);
  transition: background var(--t-fast), color var(--t-fast);
}
.шестерёнка:hover, .шестерёнка.active { background: var(--hover); color: var(--text); }

/* Кнопка «свернуть меню» в шапке сайдбара. Пиктограмма стрелки, а не гамбургер:
   гамбургер означает «открыть меню», здесь же меню никуда не девается. */
.свернуть {
  all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--muted); font-size: var(--ic-md);
  transition: background var(--t-fast), color var(--t-fast);
}
.свернуть:hover { background: var(--hover); color: var(--text); }
.свернуть:active { background: var(--active); }
.свернуть:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.свернуть .развернуть-ик { display: none; }
.sidebar .who button { display: inline-flex; align-items: center; gap: 6px; }
.выйти-ик { display: none; font-size: var(--ic-md); }

/* ---- свёрнутое меню: остаются одни иконки ----
   Класс на <body> ставит сервер по куке `menu`: если бы его вешал скрипт, меню
   при каждом переходе на миг разворачивалось бы. Кука с латинским именем
   намеренно — кириллица в имени куки не по RFC 6265, браузеры вправе её не слать. */
@media (min-width: 901px) {
  .sidebar { transition: width var(--t-med); }
  .меню-свёрнуто .sidebar {
    width: var(--sidebar-w-mini); padding-left: var(--sp-2); padding-right: var(--sp-2);
  }
  /* Текст не удаляют из разметки, а уводят с экрана: удалённый перестаёт
     читаться программой экранного доступа, и ссылка становится безымянной. */
  .меню-свёрнуто .brand-текст,
  .меню-свёрнуто .nav-текст,
  .меню-свёрнуто .кто-текст,
  .меню-свёрнуто .выйти-текст {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .меню-свёрнуто .brand-row {
    flex-direction: column; gap: var(--sp-2); padding: var(--sp-2) 0 var(--sp-3);
  }
  .меню-свёрнуто .свернуть { margin-left: 0; }
  .меню-свёрнуто .свернуть .свернуть-ик { display: none; }
  .меню-свёрнуто .свернуть .развернуть-ик { display: inline-flex; }

  .меню-свёрнуто .nav a { justify-content: center; padding: 9px 0; position: relative; }
  .меню-свёрнуто .nav-label {
    height: 0; padding: 0; overflow: hidden;
    border-top: 1px solid var(--border); margin: var(--sp-3) var(--sp-2) var(--sp-2);
  }
  /* Счётчик не прячем: он и есть причина заглянуть в свёрнутое меню. */
  .меню-свёрнуто .nav .count {
    position: absolute; top: 2px; right: 3px; margin-left: 0;
    min-width: 15px; padding: 0 3px; text-align: center;
    font-size: var(--fs-xs); line-height: 15px;
    /* обводка цветом сайдбара: счётчик ложится на иконку и должен читаться
       как наклейка поверх неё, а не как часть рисунка */
    box-shadow: 0 0 0 2px var(--sidebar);
  }

  .меню-свёрнуто .sidebar .who .кто { justify-content: center; }
  .меню-свёрнуто .sidebar .who .кто .spacer { display: none; }
  .меню-свёрнуто .sidebar .who form { display: flex; justify-content: center; }
  .меню-свёрнуто .sidebar .who button { padding: var(--sp-1); }
  .меню-свёрнуто .выйти-ик { display: inline-flex; }
}

/* Список разделов настроек: крупные цели клика, а не строчки меню */
.разделы { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
.раздел {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r); background: var(--card);
  padding: var(--sp-4); transition: background var(--t-fast), box-shadow var(--t-fast);
}
.раздел:hover { background: var(--card-hover); box-shadow: var(--shadow); color: var(--text); }
.раздел-ик {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: var(--accent-weak); color: var(--accent);
  font-size: var(--ic-lg);
}
.раздел-текст { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: var(--head-h); flex-shrink: 0; background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--content-x);
}
.crumbs {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-md); color: var(--muted); min-width: 0;
}
.crumbs b { color: var(--text); font-weight: var(--fw-semibold); }
.crumbs .sep { color: var(--border); }
.spacer { flex: 1; }
/* Стрелки «предыдущая / следующая цель» — перебор без возврата в список */
.соседи { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; }
.соседи .btn { min-width: 28px; padding: 5px var(--sp-2); font-size: var(--fs-base); line-height: 1; }
.соседи [aria-disabled="true"] { opacity: .3; pointer-events: none; }
.соседи .num { min-width: 60px; text-align: center; }

/* Выбор периода в шапке: цели ставятся на срок, и срок виден всегда, а не в фильтрах */
.период-выбор { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
.период-выбор .nav-ic { color: var(--muted); font-size: var(--ic-sm); }
.период-выбор select {
  width: auto; min-width: 150px; padding: 6px var(--sp-3);
  border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-md);
}
.content { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--content-x) var(--sp-7); }

/* ======================= типографика ======================= */
h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-1); letter-spacing: -.01em; }
h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: var(--sp-5) 0 var(--sp-2); }
h3 { font-size: var(--fs-base); font-weight: var(--fw-semibold); margin: 0; }
.lede { color: var(--muted); font-size: var(--fs-md); margin: 0 0 var(--sp-4); max-width: 92ch; }
.sec-label {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--muted);
  margin: 0 0 var(--sp-1);
}
.mono { font-family: var(--font-mono); font-size: var(--fs-sm); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

/* ======================= кнопки ======================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1);
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  border-radius: var(--r-pill); padding: var(--sp-2) 14px;
  font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:hover { background: var(--hover); color: var(--text); }
.btn:active { background: var(--active); transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); box-shadow: var(--shadow); }
.btn.primary:active { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); box-shadow: none; transform: translateY(1px); }
.btn.secondary { background: var(--card); }
.btn.tertiary { background: var(--chip); border-color: transparent; }
.btn.tertiary:hover { background: var(--hover); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--subtle); }
.btn.ghost:hover { background: var(--hover); color: var(--text); }
.btn.danger { color: var(--danger); border-color: transparent; background: transparent; }
.btn.danger:hover, .btn.danger:active { background: var(--danger-bg); }
.btn.success { color: var(--success); border-color: transparent; background: transparent; }
.btn.success:hover, .btn.success:active { background: var(--success-bg); }
.btn.sm { padding: 5px var(--sp-3); font-size: var(--fs-sm); }
.btn.lg { padding: var(--sp-3) var(--sp-5); font-size: var(--fs-base); }
.btn:disabled, .btn[disabled] { opacity: .55; pointer-events: none; }
.btnrow { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-3); }

/* ======================= метки и плашки ======================= */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  background: var(--chip); color: var(--subtle); border-radius: var(--r-pill);
  padding: 2px 10px; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
}
.badge.accent { background: var(--accent-weak); color: var(--accent); }
.badge.ok { background: var(--success-bg); color: var(--success); }
.badge.warn { background: var(--warning-bg); color: var(--warning); }
.badge.crit { background: var(--danger-bg); color: var(--danger); }
.badge.sm { padding: 1px 7px; font-size: var(--fs-xs); }
/* Уровень приоритета: три состояния читаются цветом, не только словом */
.badge.уровень-personal { background: var(--orange-bg); color: var(--orange); }
.badge.уровень-control { background: var(--warning-bg); color: var(--warning); }
.badge.уровень-unclear { background: var(--chip); color: var(--muted); }
.badge .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: currentColor; flex: none; }

.avatar {
  width: 22px; height: 22px; border-radius: var(--r-pill); flex: none;
  background: var(--accent-weak); color: var(--accent);
  display: inline-grid; place-items: center;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.person { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--subtle); }

/* ======================= готовность ======================= */
.meter {
  height: 6px; border-radius: var(--r-pill); background: var(--chip);
  overflow: hidden; min-width: 56px; flex: 1;
}
.meter i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.meter i.ok { background: var(--success); }
.meter i.warn { background: var(--warning); }
.meter i.crit { background: var(--danger); }
.progress { display: flex; align-items: center; gap: var(--sp-2); min-width: 108px; }
.progress .v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm); color: var(--subtle); width: 34px; text-align: right;
}

/* ======================= карточки ======================= */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
.card + .card, .card + h2, .stack > * + * { margin-top: var(--sp-3); }
.card-head {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-2); min-height: 46px;
}
.card-body { padding: var(--sp-4); }
.tablewrap { overflow-x: auto; }
/* зеркало Jira: видимая граница между нашим и чужим */
.card.mirror { border-left: 3px solid var(--border); background: var(--sidebar); }
.card.mirror .card-head h3 { color: var(--muted); }
.card.опасное { border-color: var(--danger-bg); }
.card.опасное .card-head { background: var(--danger-bg); }
.card.опасное .card-head h3 { color: var(--danger); }

/* ======================= таблицы ======================= */
table { border-collapse: collapse; width: 100%; font-size: var(--fs-md); }
th {
  text-align: left; background: var(--sidebar); color: var(--subtle);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border); white-space: nowrap;
}
td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:hover td { background: var(--card-hover); }
tr:last-child td { border-bottom: 0; }
td.r, th.r { text-align: right; }
td.c, th.c { text-align: center; }

/* ======================= строки списка ======================= */
.row {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 48px;
  padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--card-hover); }
.row.mine { box-shadow: inset 3px 0 0 var(--accent); }
.row .title { flex: 1; min-width: 260px; font-size: var(--fs-md); }
.row .title .sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.row .tags { display: flex; gap: var(--sp-1); flex-wrap: wrap; flex: none; justify-content: flex-end; }
.row .acts { display: flex; gap: var(--sp-1); opacity: 0; transition: opacity var(--t-fast); }
.row .acts.always { opacity: 1; }   /* главное действие не прячем за наведением */
.row:hover .acts, .row:focus-within .acts { opacity: 1; }

/* ======================= матрица приоритетов ======================= */
.mx {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; margin-bottom: var(--sp-3);
}
.mx-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); min-height: 52px; cursor: pointer; list-style: none;
  background: var(--sidebar); border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.mx-head::-webkit-details-marker { display: none; }
.mx-head:hover { background: var(--hover); }
/* Наведение на кнопку внутри шапки не должно читаться как наведение на всю шапку:
   иначе кнопка и фон меняются вместе и кнопка «пропадает». */
.mx-head:has(.btn:hover) { background: var(--sidebar); }
.mx-head .btn { flex: none; }
.mx:not([open]) .mx-head { border-bottom: 0; }
.caret {
  width: var(--sp-4); flex: none; color: var(--muted); font-size: var(--fs-xs);
  display: inline-grid; place-items: center; transition: transform var(--t-fast);
}
details[open] > summary .caret { transform: rotate(90deg); }

.mx-table { font-size: var(--fs-md); }
.mx-table th { white-space: normal; }
.mx-table .c-dir { width: 130px; color: var(--subtle); }
.mx-table .c-crit { min-width: 280px; }
.mx-table .c-crit a { font-weight: var(--fw-medium); }
.mx-table .c-crit a:hover { color: var(--accent); }
/* Ответственный и участники подписаны именем и фамилией, а не инициалами:
   колонкам нужно вдвое больше места, чем под «И. П.». */
/* min-width, а не только width: таблица шире экрана и делит колонки на глазок,
   отчего длинная фамилия обрезалась на середине. */
.mx-table .c-acc { width: 178px; min-width: 178px; }
.mx-table .c-part { width: 132px; min-width: 132px; }
.mx-table .c-res { width: 150px; color: var(--subtle); }
.mx-table .c-res .nodod { color: var(--danger); font-size: var(--fs-sm); }
.mx-table .c-ctl { width: 156px; }
.mx-table .c-status { width: 132px; }
.mx-table .c-prog { width: 110px; }
.mx-table .c-upd { width: 92px; line-height: var(--lh-tight); }
.mx-table .c-act { width: 96px; text-align: right; }
.mx-table tbody tr:not(:hover) .c-act .btn { opacity: 0; }
.mx-table tr.mine td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.mx-table tr.группа td {
  background: var(--sidebar); color: var(--muted);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .05em;
  padding: var(--sp-2) var(--sp-4);
}
.mx-table tbody tr.группа:hover td { background: var(--sidebar); }
.mx-table .marks { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-top: var(--sp-1); }
.mx-table .parent { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }

/* ======================= формы ======================= */
label.field { display: block; margin-bottom: var(--sp-3); }
label.field > span {
  display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium);
  color: var(--muted); margin-bottom: 5px;
}
input[type=text], input[type=number], input[type=password], input[type=date],
input[type=search], input[type=file], textarea, select {
  width: 100%; font-family: inherit; font-size: var(--fs-base); color: var(--text);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 9px var(--sp-3);
}
select { padding: 9px var(--sp-2); }
textarea { min-height: 76px; resize: vertical; line-height: var(--lh-normal); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
input[type=checkbox] { width: auto; accent-color: var(--accent); }
.hint { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-1); }
.req { color: var(--danger); }
.inline-form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.inline-form input[type=text] { flex: 1; min-width: 200px; }
.inline-form input[type=date], .inline-form select { width: auto; min-width: 130px; }
.filters { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.filters .field.inline { margin: 0; }
.filters .field.inline span { margin-bottom: 3px; }

/* ======================= сообщения и находки ======================= */
.notice {
  border-radius: var(--r-sm); padding: var(--sp-3) 14px; font-size: var(--fs-md);
  font-weight: var(--fw-medium); margin-bottom: var(--sp-3);
  background: var(--accent-weak); color: var(--accent);
}
.notice.info { background: var(--accent-weak); color: var(--accent); }
.notice.ok, .notice.success { background: var(--success-bg); color: var(--success); }
.notice.warn, .notice.warning { background: var(--warning-bg); color: var(--warning); }
.notice.crit, .notice.error { background: var(--danger-bg); color: var(--danger); }

.finding { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.finding:last-child { border-bottom: 0; }
.finding:hover { background: var(--card-hover); }
.finding .bar { width: 3px; border-radius: var(--r-pill); flex: none; background: var(--border); }
.finding.crit .bar { background: var(--danger); }
.finding.warn .bar { background: var(--warning); }
.finding.info .bar { background: var(--accent); }
.finding .t { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.finding .d { font-size: var(--fs-sm); color: var(--subtle); margin-top: 2px; }

.empty { padding: var(--sp-7) var(--sp-4); text-align: center; color: var(--muted); font-size: var(--fs-md); }

/* ======================= лента истории ======================= */
.feed { display: flex; flex-direction: column; }
.feed .item { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.feed .item:last-child { border-bottom: 0; }
.feed .bar { width: 3px; border-radius: var(--r-pill); flex: none; background: var(--border); }
.feed .item.submit .bar { background: var(--accent); }
.feed .item.approved .bar { background: var(--success); }
.feed .item.rejected .bar { background: var(--danger); }
.feed .when { width: 84px; flex: none; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--muted); }
.feed .what { flex: 1; min-width: 0; font-size: var(--fs-sm); }
.feed .what .h { font-size: var(--fs-md); font-weight: var(--fw-medium); }
.feed .who { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }

/* ======================= боковая панель карточки цели =======================
   Карточка цели поверх списка. Без скрипта слой не появляется, и ссылки
   открывают карточку страницей. */
.drawer-layer { position: fixed; inset: 0; z-index: var(--z-drawer); display: none; }
.drawer-layer.открыт { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: var(--backdrop); }
.drawer {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(var(--drawer-w), 100vw); background: var(--bg);
  border-left: 1px solid var(--border); box-shadow: var(--shadow-pop);
  transform: translateX(100%); transition: transform .18s ease-out;
}
.drawer-layer.открыт .drawer { transform: none; }
/* Список под панелью не должен прокручиваться: у нас скроллится .content, а не body */
body:has(.drawer-layer.открыт) .content { overflow: hidden; }
.drawer-panel { display: flex; flex-direction: column; height: 100%; }
.drawer-head {
  flex: none; height: var(--head-h); display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3) 0 var(--sp-5); border-bottom: 1px solid var(--border);
}
.drawer-body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-5) var(--sp-7); }
.drawer-body h1 { margin-bottom: var(--sp-1); }

/* ======================= карточка цели ======================= */
/* Полоса этапов: пять сегментов жизненного цикла работы в одной строке таблицы */
tr.разрез td {
  background: var(--chip); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--subtle);
}
/* ---- правка прямо в таблице матрицы ---- */
.mx-table .ячейка { margin: 0; }
.mx-table .ячейка select {
  /* min-width, а не width: раскладка таблицы автоматическая, и без нижней
     границы колонку с «Приоритетом контроля» ужимает до «При…». */
  width: 100%; min-width: 132px; max-width: 100%; font-size: var(--fs-sm);
  text-overflow: ellipsis;
  padding: 3px 6px; border-radius: var(--r-xs);
  border: 1px solid transparent; background: transparent; color: var(--text);
}
.mx-table .ячейка select:hover { border-color: var(--border); background: var(--card); }
.mx-table .ячейка select:focus { border-color: var(--accent); background: var(--card); outline: none; }
.mx-table .ячейка select.уровень-personal { color: var(--orange); font-weight: var(--fw-semibold); }
.mx-table .ячейка select.уровень-control { color: var(--warning); font-weight: var(--fw-semibold); }
.mx-table .ячейка select.уровень-unclear { color: var(--muted); }
.mx-table .ячейка select.статус-at_risk { color: var(--danger); font-weight: var(--fw-semibold); }
.mx-table .ячейка select.статус-in_progress { color: var(--warning); font-weight: var(--fw-semibold); }

/* Карандаш рядом со ссылкой: сама ссылка ведёт в карточку, карандаш — сразу
   в правку. Появляется на наведении, чтобы не рябить в плотной таблице. */
.строка-цели { display: flex; align-items: flex-start; gap: 6px; }
.строка-цели > a:first-child { flex: 1 1 auto; }
.карандаш {
  flex: none; color: var(--muted); font-size: var(--ic-sm); line-height: 1;
  padding: 2px; border-radius: var(--r-xs); opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
tr:hover .карандаш, .карандаш:focus-visible { opacity: 1; }
.карандаш:hover { background: var(--hover); color: var(--accent); }
.достигнуто {
  font-size: var(--fs-sm); color: var(--muted); margin-top: 3px;
  border-left: 2px solid var(--success); padding-left: 6px;
}

/* Выпадающий список с поиском */
.комбо { position: relative; }
.комбо-поле {
  width: 100%; font-size: var(--fs-sm); padding: 3px 6px; border-radius: var(--r-xs);
  min-width: 120px;
  border: 1px solid transparent; background: transparent; color: var(--text);
}
.комбо-поле:hover { border-color: var(--border); background: var(--card); }
.комбо-поле:focus { border-color: var(--accent); background: var(--card); outline: none; }
.комбо-список {
  position: absolute; z-index: var(--z-menu); top: 100%; left: 0; min-width: 240px;
  max-height: 260px; overflow-y: auto; margin: 3px 0 0; padding: 4px; list-style: none;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-pop);
}
.комбо-список li {
  padding: 5px 8px; border-radius: var(--r-xs); cursor: pointer;
  font-size: var(--fs-sm); white-space: nowrap;
}
.комбо-список li:hover { background: var(--hover); }
.комбо.пусто .комбо-список::after { content: "ничего не нашлось"; display: block; padding: 5px 8px; color: var(--muted); font-size: var(--fs-sm); }

/* Поля цели на карточке в режиме чтения */
.пары { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }

/* ---- картинка состояния бэклога над таблицами ----
   Переключатель на радиокнопках, без скрипта: вкладка — это выбор, а не
   действие, и переживать перезагрузку ему не нужно. */
.сводка .виды > input { position: absolute; opacity: 0; pointer-events: none; }
.виды-табы {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding: 0 var(--sp-4) var(--sp-3);
}
.виды-табы label {
  /* Заливка, а не одна обводка: в тёмной теме `--border` почти не виден,
     и невыбранные вкладки читались бы как обычный текст. */
  cursor: pointer; background: var(--chip); border-radius: var(--r-pill);
  padding: 5px var(--sp-3); font-size: var(--fs-sm); color: var(--subtle);
  transition: background var(--t-fast), color var(--t-fast);
}
.виды-табы label:hover { background: var(--hover); color: var(--text); }
.сводка .виды > input:focus-visible ~ .виды-табы { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
.вид { display: none; padding: 0 var(--sp-4) var(--sp-4); }
#вид-воронка:checked ~ .виды-табы label[for="вид-воронка"],
#вид-столбик:checked ~ .виды-табы label[for="вид-столбик"],
#вид-карта:checked ~ .виды-табы label[for="вид-карта"],
#вид-задачи:checked ~ .виды-табы label[for="вид-задачи"] {
  background: var(--accent); color: var(--on-accent); font-weight: var(--fw-semibold);
}
#вид-воронка:checked ~ .вид-воронка,
#вид-столбик:checked ~ .вид-столбик,
#вид-карта:checked ~ .вид-карта,
#вид-задачи:checked ~ .вид-задачи { display: block; }

.полосы { display: flex; flex-direction: column; gap: var(--sp-2); }
.полоса-строка { display: grid; grid-template-columns: 170px 1fr 110px; align-items: center; gap: var(--sp-3); }
.полоса-имя { font-size: var(--fs-md); color: var(--subtle); }
.полоса {
  display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--chip);
}
.полоса.крупная { height: 26px; }
.полоса i { display: block; height: 100%; }
.полоса i:last-child { flex: 1 1 auto; }     /* округление до целых процентов не оставляет щели */
.полоса i.готово { background: var(--success); }
.полоса i.в-работе { background: var(--warning); }
.полоса i.нет { background: var(--border); }
.полоса i.этап { background: var(--accent); }
.полоса-цифры {
  font-size: var(--fs-sm); color: var(--muted); text-align: right;
  font-variant-numeric: tabular-nums;
}
.полоса-цифры b { color: var(--success); }

.легенда { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); }
.лег { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--subtle); }
.лег i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.лег i.готово { background: var(--success); }
.лег i.нет { background: var(--border); }
.лег i.этап { background: var(--accent); }

.карта td, .карта th { font-size: var(--fs-sm); }
.карта .ячейка { font-variant-numeric: tabular-nums; color: var(--muted); }
.карта .ячейка.готово { background: var(--success-bg); color: var(--success); font-weight: var(--fw-semibold); }
.карта .ячейка.в-работе { background: var(--warning-bg); color: var(--warning); font-weight: var(--fw-semibold); }

@media (max-width: 900px) {
  .полоса-строка { grid-template-columns: 120px 1fr; }
  .полоса-цифры { grid-column: 2; text-align: left; }
}

.этапы { display: flex; gap: 3px; }
.этапы i {
  display: block; height: 6px; flex: 1; border-radius: var(--r-pill);
  background: var(--chip); border: 1px solid var(--border);
}
.этапы i.готово { background: var(--success); border-color: var(--success); }
.этапы i.в-работе { background: var(--warning); border-color: var(--warning); }

/* Строка справочника этапов: поля в ряд, а не столбиком, как в обычной форме */
.строка-этапа {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-4);
}
.строка-этапа input { width: auto; }
.строка-этапа + .строка-этапа { border-bottom: 1px solid var(--border); }

/* Панель массового действия над списком: отбор галочками и что с ними сделать */
.отбор { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.отбор input[type=text] { width: auto; }
.метки { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.поля-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-3); }
.флажок { display: flex; align-items: center; gap: var(--sp-2); min-height: 38px; }
.ссылка {
  background: none; border: 0; padding: 0 0 0 var(--sp-1); cursor: pointer;
  color: inherit; opacity: .6; font: inherit;
}
.ссылка:hover { opacity: 1; color: var(--danger); }

/* ======================= люди и доступ ======================= */
/* Отбор списка людей: те же четыре среза, что и счётчики в шапке карточки. */
.фильтры { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.фильтр {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 5px var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-sm); color: var(--muted);
}
.фильтр:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.фильтр.выбран { background: var(--chip); color: var(--text); font-weight: var(--fw-medium); }
.фильтр .count {
  font-size: var(--fs-xs); background: var(--card); color: var(--muted);
  border-radius: var(--r-pill); padding: 0 6px;
}
.фильтр.выбран .count { background: var(--accent-weak); color: var(--accent); }

/* Выданный пароль. Показывается один раз, поэтому крупно и отдельным блоком. */
.пароль-выдан {
  display: flex; gap: var(--sp-4); align-items: center; flex-wrap: wrap;
  background: var(--success-bg); border-radius: var(--r); padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.пароль-строка { display: flex; align-items: center; gap: var(--sp-3); margin-top: 4px; }
code.пароль {
  font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: .06em;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 4px var(--sp-3); user-select: all;
}

.люди-таблица tr.отключён td { opacity: .55; }
.люди-таблица .c-act { white-space: nowrap; }
/* Поле логина в ячейке — короткое: рядом с ним должна помещаться кнопка */
.люди-таблица .inline-form { flex-wrap: nowrap; }
.люди-таблица .inline-form input[type=text] { flex: none; min-width: 0; width: 130px; }
.люди-таблица .inline-form .btn { flex: none; white-space: nowrap; }
.логин-строка { display: flex; align-items: center; gap: var(--sp-1); }
.логин-строка .отозвать { display: inline; }
/* Крестик рядом с логином: отзыв доступа — про логин, а не про человека */
.отозвать .btn { padding: 2px; line-height: 0; color: var(--subtle); }
.отозвать .btn:hover { color: var(--danger); background: var(--danger-bg); }
.люди-таблица .c-act form { display: inline; }
.люди-таблица .c-act .btn + form .btn { margin-left: var(--sp-1); }
.люди-таблица td form { margin: 0; }
.поле-текст { margin-bottom: var(--sp-3); }
.hint.crit { color: var(--danger); }

/* ======================= вход ======================= */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: var(--sp-5); }
.login-card { width: 100%; max-width: 360px; }

/* ======================= прочее ======================= */
@media (max-width: 900px) {
  .shell { flex-direction: column; height: auto; }
  .sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
  /* Сворачивать нечего: меню и так лежит поперёк экрана, а не колонкой. */
  .свернуть { display: none; }
  .main { overflow: visible; }
  .поля-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--r-pill); border: 3px solid var(--bg); }