/* Фирменный стиль ВРК.
   Источник: VRK_BRANDBOOK.pdf — цвета (стр. 40), типографика (стр. 41–42),
   стиль вёрстки Bento (стр. 48).
   Правила бренда: дизайн воспринимается как светлый, интерфейсы с
   доминацией белого; оранжевый — акцент, 3–5% объёма; заголовки Unbounded
   только верхним регистром; наборный текст Inter; интерлиньяж 120%. */

@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/Unbounded-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/Unbounded-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/static/fonts/Unbounded-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('/static/fonts/Unbounded-700-latin.woff2') format('woff2'); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/Inter-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/static/fonts/Inter-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/static/fonts/Inter-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/static/fonts/Inter-500-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/static/fonts/Inter-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('/static/fonts/Inter-600-latin.woff2') format('woff2'); }

:root {
  --deep-blue: #090E25;   /* основной */
  --orange: #FF9100;      /* акцентный, 3–5% */
  --blue-700: #242C57;
  --blue-500: #2F386C;
  --blue-300: #4B5486;
  --grey-200: #D3D5DD;
  --grey-100: #F2F3F8;
  --white: #FFFFFF;
  --ink: #333333;         /* наборный текст */
  --radius: 8px;          /* закруглённые углы с небольшим диаметром */
  --head: 'Unbounded', 'Segoe UI', sans-serif;
  --body: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grey-100);
  color: var(--ink);
  font: 400 15px/1.2 var(--body);
  -webkit-font-smoothing: antialiased;
}

/* --- шапка --------------------------------------------------------------- */
/* Шапка в одну строку: переносится не она сама, а только список разделов
   внутри своей колонки — иначе строка «кто вошёл» уезжает под меню. */
.top {
  display: flex; align-items: center; gap: 20px; flex-wrap: nowrap;
  padding: 14px 24px; background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  position: sticky; top: 0; z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  flex: 0 0 auto;
}
.brand svg { width: 28px; height: 28px; display: block; }
.brand-name {
  font: 700 19px/1 var(--head); color: var(--deep-blue);
  text-transform: uppercase; letter-spacing: .01em;
}
.brand-sub {
  font: 400 11px/1.2 var(--head); color: var(--blue-300);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
  padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--grey-200);
}
.top nav.mainnav {
  display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap;
  justify-content: flex-end; min-width: 0;
}
.top nav a {
  font: 400 12px/1 var(--head); text-transform: uppercase; letter-spacing: .02em;
  color: var(--blue-300); text-decoration: none; white-space: nowrap;
  padding: 9px 11px; border-radius: var(--radius);
}
.top nav a:hover { color: var(--deep-blue); background: var(--grey-100); }
.top nav a.on { color: var(--deep-blue); background: var(--grey-100); }

.whoami {
  display: flex; align-items: center; gap: 8px; padding-left: 14px;
  margin-left: 2px; border-left: 1px solid var(--grey-200);
  flex: 0 0 auto; white-space: nowrap;
}
.who { font-size: 13px; font-weight: 500; color: var(--deep-blue); }
.role-tag {
  font: 400 9px/1 var(--head); text-transform: uppercase; letter-spacing: .05em;
  background: var(--orange); color: var(--deep-blue);
  padding: 4px 7px; border-radius: 4px;
}
.exit {
  font: 400 11px/1 var(--head); text-transform: uppercase; letter-spacing: .04em;
  color: var(--blue-300); text-decoration: none;
}
.exit:hover { color: var(--orange); }

main { max-width: 1320px; margin: 0 auto; padding: 28px 32px 64px; }

/* --- вход и первый запуск ------------------------------------------------ */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.auth-box {
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--radius); padding: 30px 32px; width: 100%; max-width: 420px;
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand svg { width: 34px; height: 34px; }
.auth-brand .n { font: 700 22px/1 var(--head); color: var(--deep-blue); }
.auth-brand .s {
  font: 400 10px/1.3 var(--head); color: var(--blue-300);
  text-transform: uppercase; letter-spacing: .05em;
}
.auth-box label { margin-bottom: 14px; }
.auth-box input { width: 100%; }
.auth-box button { width: 100%; margin-top: 6px; }

/* --- типографика --------------------------------------------------------- */
h1 {
  font: 700 26px/1.2 var(--head); color: var(--deep-blue);
  text-transform: uppercase; letter-spacing: 0; margin: 0 0 10px;
}
h2 {
  font: 400 15px/1.2 var(--head); color: var(--deep-blue);
  text-transform: uppercase; letter-spacing: .02em; margin: 0 0 14px;
}
h3 {
  font: 400 12px/1.2 var(--head); color: var(--orange);
  text-transform: uppercase; letter-spacing: .05em; margin: 24px 0 10px;
}
.lead { color: var(--blue-300); max-width: 84ch; margin: 0 0 22px; line-height: 1.45; }
.muted { color: var(--blue-300); }
.small { font-size: 13px; }
.mono { font-variant-numeric: tabular-nums; }
.strong { font-weight: 600; color: var(--deep-blue); }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 4px;
}

/* --- Bento-блоки --------------------------------------------------------- */
.card {
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--radius); padding: 20px 22px; margin: 0 0 18px;
}

.row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.row.wrap { flex-wrap: wrap; align-items: flex-end; }
.row.tight { margin-top: 8px; }
.fname { flex: 1; font-size: 14px; color: var(--deep-blue); font-weight: 500; }

label {
  display: flex; flex-direction: column; gap: 5px;
  font: 400 11px/1.2 var(--head); text-transform: uppercase;
  letter-spacing: .04em; color: var(--blue-300);
}

/* Флажок с подписью. Общий label — колонка: подпись сверху, поле снизу.
   Для чекбокса это неверно, квадратик вставал НАД словами. Возвращаем в
   строку и снимаем капс: рядом с флажком читается обычный текст. */
label.check, .filters label {
  flex-direction: row; align-items: center; gap: 8px;
  text-transform: none; letter-spacing: 0;
  font: 400 13px/1.3 var(--body); color: var(--ink);
}

/* Строка фильтров и коротких форм: поля в ряд, перенос по месту. Класс
   стоял в разметке раздела раскроя с самого начала, а правил под него не
   было — поля выстраивались в столбик даже на широком экране. На телефоне
   столбик и нужен, и он получается сам: там поля занимают всю ширину. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters input[type=text], .filters select { min-width: 0; }

input[type=number], input[type=text], input[type=password],
input[type=date], input[type=file], select {
  padding: 9px 11px; border: 1px solid var(--grey-200); border-radius: var(--radius);
  font: 400 15px/1.2 var(--body); color: var(--ink); background: var(--white);
  min-width: 130px;
}
input:focus, select:focus { outline: 2px solid var(--orange); outline-offset: -1px; }
select { min-width: 340px; }

button, .btn {
  padding: 10px 18px; border-radius: var(--radius); border: 1px solid var(--deep-blue);
  background: var(--deep-blue); color: var(--white); cursor: pointer;
  text-decoration: none; display: inline-block;
  font: 400 12px/1.2 var(--head); text-transform: uppercase; letter-spacing: .04em;
}
button:hover, .btn:hover { background: var(--blue-700); border-color: var(--blue-700); }
.btn-accent { background: var(--orange); border-color: var(--orange); color: var(--deep-blue); }
.btn-accent:hover { background: #E68300; border-color: #E68300; color: var(--deep-blue); }
button.ghost, .btn.ghost {
  background: var(--white); color: var(--deep-blue); border-color: var(--grey-200);
}
button.ghost:hover, .btn.ghost:hover {
  background: var(--grey-100); border-color: var(--blue-300);
}
button.small, .btn.small { padding: 5px 10px; font-size: 10px; }
.acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acts form { margin: 0; }
.acts form.pwd { display: flex; gap: 4px; }
.acts form.pwd input {
  min-width: 0; width: 130px; padding: 4px 7px; font-size: 12px;
}
.grid td form { margin: 0; }

/* --- форма калькулятора --------------------------------------------------- */
/* Раньше поля стояли в гибкую строку и на широком экране разъезжались:
   длинный список моделей растягивался, и «Высота» уходила под «Ширину».
   Сетка держит поля ровными колонками, а список моделей занимает строку. */
.form-grid {
  display: grid; gap: 14px 16px; align-items: end;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.form-grid > label.wide { grid-column: 1 / -1; }
.form-grid input, .form-grid select { width: 100%; min-width: 0; }
.form-go { grid-column: 1 / -1; }
.form-go button { min-width: 220px; }
.form-hint { margin: 12px 0 0; }
/* label раскрыт во flex, поэтому обычного hidden ему мало */
.form-grid > label[hidden] { display: none; }

/* Печать техкарт из рекламации: отметки позиций заказа. */
.rec-cards { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--grey-100); }
.rec-cards .page-head { align-items: baseline; }

/* --- выбор модели в калькуляторе ----------------------------------------- */
/* Моделей 541 в 92 разделах. Выпадающим списком в них не ориентировались:
   заказчик не нашёл корзины даже после разбивки по разделам (02.09.2026).
   Поэтому поиск идёт по всему каталогу, категории дают ориентир тем, кто
   не знает, что набрать, а найденное лежит списком на странице. */
.pick-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.pick-head h2 { margin: 0; }
.pick input[type=search] {
  width: 100%; min-width: 0; padding: 11px 13px;
  border: 1px solid var(--grey-200); border-radius: var(--radius);
  font: 400 15px/1.2 var(--body); color: var(--ink); background: var(--white);
}
.pick input[type=search]:focus {
  outline: 2px solid var(--orange); outline-offset: -1px;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.chip {
  padding: 6px 12px; border: 1px solid var(--grey-200);
  border-radius: var(--radius); background: var(--white);
  color: var(--deep-blue); cursor: pointer;
  font: 400 12px/1.2 var(--head); text-transform: uppercase;
  letter-spacing: .04em;
}
.chip:hover { background: var(--grey-100); border-color: var(--blue-300); }
.chip.active {
  background: var(--deep-blue); border-color: var(--deep-blue); color: var(--white);
}
.chip-n { margin-left: 7px; font-size: 11px; color: var(--blue-300); }
.chip.active .chip-n { color: var(--grey-200); }

/* список найденного: своя прокрутка, чтобы форма параметров не уезжала
   за нижний край экрана на каждом поиске */
.pick-list {
  max-height: 360px; overflow-y: auto; margin-top: 14px;
  border-top: 1px solid var(--grey-100); padding-top: 6px;
}
.pick-sec {
  margin: 12px 0 4px; font: 400 11px/1.2 var(--head);
  text-transform: uppercase; letter-spacing: .04em; color: var(--blue-300);
}
.pick-row {
  display: flex; gap: 14px; align-items: baseline; width: 100%;
  text-align: left; padding: 7px 10px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; color: var(--ink);
  font: 400 14px/1.3 var(--body); text-transform: none; letter-spacing: normal;
}
.pick-row:hover { background: var(--grey-100); border-color: var(--grey-200); }
.pick-row.on { background: var(--grey-100); border-color: var(--orange); }
.pick-code { flex: 0 0 150px; font-weight: 500; color: var(--deep-blue); }
.pick-title { flex: 1 1 auto; }

/* выбранная модель — шапка блока параметров */
.chosen {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  margin-bottom: 18px;
}
.chosen-code { font: 700 20px/1.2 var(--head); color: var(--deep-blue); }
.chosen-title { font-size: 15px; }

/* --- таблицы ------------------------------------------------------------- */
.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid.narrow { width: auto; min-width: 440px; }
.grid th, .grid td {
  border: 1px solid var(--grey-200); padding: 8px 11px; text-align: left;
}
/* в высоких строках (длинный состав, комментарий) содержимое соседних
   ячеек держится верха — иначе даты и номера «плавают» по центру
   и таблица выглядит разъехавшейся */
.grid td { vertical-align: top; }
.grid th {
  background: var(--grey-100); color: var(--deep-blue);
  font: 400 11px/1.2 var(--head); text-transform: uppercase;
  letter-spacing: .03em; white-space: nowrap;
}
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid td.strong, .grid .strong { font-weight: 600; color: var(--deep-blue); }
.grid tbody tr:nth-child(even) { background: #FAFBFC; }
.grid tbody tr:hover { background: #FFF6EA; }
.grid tr.sep td { border-top: 2px solid var(--blue-300); }
.grid tr.total td {
  background: var(--deep-blue); color: var(--white);
  font-weight: 600; border-color: var(--deep-blue);
}
.table-wrap { overflow-x: auto; }

/* Модели решёток: у каждой группы своя таблица, и без жёсткой сетки
   колонки в каждой подстраивались под содержимое — от группы к группе
   границы «гуляли». Фиксированная раскладка выравнивает все таблицы
   страницы по одной сетке. */
.models-grid { table-layout: fixed; min-width: 560px; }
.models-grid th:nth-child(1) { width: 170px; }
.models-grid th:nth-child(3) { width: 250px; }

/* --- ровные таблицы ------------------------------------------------------ */
/* Без жёсткой сетки браузер подгоняет колонки под содержимое, и на
   страницах с несколькими таблицами их границы «гуляют». Класс even
   включает фиксированную раскладку; ширины задаются классами на th —
   одинаковые по смыслу колонки одинаковы на всех страницах, а колонка
   без класса (наименование, материал) забирает остаток ширины.
   На узком экране таблица прокручивается вбок внутри .table-wrap. */
.grid.even { table-layout: fixed; min-width: 640px; }
.grid.even.even-lg { min-width: 900px; }
.grid.even.even-xl { min-width: 1100px; }
/* при фиксированных колонках длинному заголовку лучше перенестись
   на вторую строку, чем расползаться на соседнюю колонку */
.grid.even th { white-space: normal; }
.grid th.w-check { width: 34px; }   /* галочка */
.grid th.w-no    { width: 125px; }  /* № заказа */
.grid th.w-date  { width: 112px; }  /* дата, срок */
.grid th.w-when  { width: 150px; }  /* дата со временем */
.grid th.w-type  { width: 100px; }  /* тип, обозначение */
.grid th.w-size  { width: 115px; }  /* размер */
.grid th.w-num   { width: 115px; }  /* числовые: метры, кг */
.grid th.w-min   { width: 86px; }   /* узкие числовые: шт, Ø */
.grid th.w-unit  { width: 70px; }   /* единица измерения */
.grid th.w-tag   { width: 150px; }  /* одна пометка, короткий текст */
.grid th.w-tags  { width: 250px; }  /* несколько пометок */
.grid th.w-note  { width: 220px; }  /* примечание, комментарий */
.grid th.w-btn   { width: 125px; }  /* кнопка или цветная метка */
.grid th.w-who   { width: 200px; }  /* имя или почта пользователя */
.grid th.w-acts  { width: 320px; }  /* несколько кнопок действий */

/* --- вкладки участков ---------------------------------------------------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 16px; }
.tab {
  background: var(--white); color: var(--blue-300); border: 1px solid var(--grey-200);
  padding: 10px 15px; font: 400 11px/1.2 var(--head);
  text-transform: uppercase; letter-spacing: .03em;
}
.tab:hover { background: var(--grey-100); color: var(--deep-blue); }
.tab.active {
  background: var(--deep-blue); color: var(--white); border-color: var(--deep-blue);
}
.badge {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 10px; background: var(--grey-100); color: var(--deep-blue);
  font-size: 11px; font-weight: 600;
}
.tab.active .badge { background: var(--orange); color: var(--deep-blue); }
/* Супермаркет: состояние запаса на полке. Красный виден издалека — это
   позиция, из-за которой участок встанет. */
.badge-nizhe { background: #C24141; color: var(--white); }
.badge-norma { background: #1C6B36; color: var(--white); }
/* Супермаркеты: сводка склада в списке. Строкой, а не плитками — плитки
   на телефоне встают в столбик по одной. */
.sm-svodka { margin: 0; color: var(--blue-300); font-size: 13px; line-height: 1.7; }
.sm-svodka b { color: var(--deep-blue); font-size: 15px; }
.sm-svodka b.nizhe { color: #C24141; }

.panel { display: none; }
.panel.active { display: block; }

/* --- сводка показателей -------------------------------------------------- */
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.stat {
  flex: 1 1 150px; background: var(--grey-100); border-radius: var(--radius);
  padding: 12px 14px;
}
.stat .k {
  font: 400 10px/1.2 var(--head); text-transform: uppercase;
  letter-spacing: .05em; color: var(--blue-300); display: block; margin-bottom: 6px;
}
.stat .v {
  font: 700 20px/1.1 var(--head); color: var(--deep-blue);
  font-variant-numeric: tabular-nums;
}
.stat.accent .v { color: var(--orange); }

/* В разделе раскроя сводка размечена <b> и <span>, а не .v/.k — правил под
   неё не было, и число слипалось с подписью: «249заготовок». Показываем
   ровно так же, как .v и .k, только подпись снизу: в этой разметке она идёт
   после числа. */
.stat b {
  display: block;
  font: 700 20px/1.1 var(--head); color: var(--deep-blue);
  font-variant-numeric: tabular-nums;
}
.stat b + span {
  display: block; margin-top: 6px;
  font: 400 10px/1.2 var(--head); text-transform: uppercase;
  letter-spacing: .05em; color: var(--blue-300);
}

/* --- улучшения: рационализаторские предложения ---------------------------- */
/* Статус читается с одного взгляда: цветом, а не только словом. Оранжевый
   бренда оставлен за тем, что требует внимания — новыми и просроченными. */
.st {
  display: inline-block; padding: 4px 10px; border-radius: 4px;
  font: 400 10px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap;
  border: 1px solid var(--grey-200); background: var(--grey-100);
  color: var(--blue-500);
}
.st-big { font-size: 12px; padding: 7px 14px; }
.st-new { background: #FFF6EA; border-color: #FFD9A6; color: #8A5200; }
.st-accepted { background: var(--grey-100); color: var(--blue-500); }
.st-in_work { background: #EAF1FF; border-color: #B9CCEE; color: #1F3F8A; }
.st-done { background: #EAF7EE; border-color: #B9E0C6; color: #1F6B37; }
.st-declined { background: #F6F6F8; border-color: var(--grey-200); color: #7A7F92; }
.overdue { color: #8A1F1F; font-weight: 600; }

.btn-big { padding: 14px 26px; font-size: 13px; white-space: nowrap; }

/* Кнопка подачи предложения — на каждой странице, в шапке. Оранжевый здесь
   оправдан: это единственный призыв к действию в интерфейсе, остальное —
   рабочие разделы. */
.idea-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
  padding: 9px 14px; border-radius: var(--radius);
  background: var(--orange); border: 1px solid var(--orange);
  color: var(--deep-blue); text-decoration: none; white-space: nowrap;
  font: 400 11px/1 var(--head); text-transform: uppercase; letter-spacing: .04em;
}
.idea-btn:hover { background: #E68300; border-color: #E68300; }
.idea-btn svg { width: 17px; height: 17px; display: block; flex: 0 0 auto; }

/* счётчик своего: назначенные на тебя и (у администратора) нерассмотренные */
.badge-mine { background: var(--orange); color: var(--deep-blue); }

/* колокольчик: без него человек не узнает, что на него назначили работу */
.bell {
  position: relative; display: inline-flex; align-items: center;
  flex: 0 0 auto; padding: 7px; border-radius: var(--radius);
  color: var(--blue-300); text-decoration: none;
}
.bell:hover { background: var(--grey-100); color: var(--deep-blue); }
.bell.has { color: var(--deep-blue); }
.bell svg { width: 20px; height: 20px; display: block; }
.bell-n {
  position: absolute; top: -1px; right: -3px; min-width: 17px;
  padding: 1px 4px; border-radius: 9px; background: var(--orange);
  color: var(--deep-blue); text-align: center;
  font: 700 10px/15px var(--head);
}

.notif { list-style: none; margin: 0; padding: 0; }
.notif li {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--grey-200);
}
.notif li:last-child { border-bottom: none; }
/* непрочитанные помечены полосой, а не цветом текста: список остаётся
   читаемым, когда их много */
.notif li.fresh { border-left: 3px solid var(--orange); padding-left: 12px; }
.notif-at {
  font-variant-numeric: tabular-nums; color: var(--blue-300); font-size: 12px;
  flex: 0 0 auto;
}
.notif-text { flex: 1 1 260px; color: var(--deep-blue); text-decoration: none; }
a.notif-text:hover { color: var(--orange); }

.news-item { padding: 20px 22px; }
.news-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.news-head h2 { margin: 0; }
.news-date {
  font-variant-numeric: tabular-nums; color: var(--blue-300); font-size: 13px;
}
.news-foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--grey-200);
}
.news-del { margin: 0 0 0 auto; }

.imp-head {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--grey-200);
}
.imp-facts { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.imp-facts .k {
  display: block; font: 400 10px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .05em; color: var(--blue-300); margin-bottom: 3px;
}
/* предложения пишут обычным текстом, переносы строк надо сохранить */
.imp-body { white-space: pre-wrap; line-height: 1.5; margin: 0 0 4px; }

/* Лента: реплики людей и служебные отметки вперемешку по времени.
   Реплики выделены, отметки приглушены — чтобы обсуждение читалось,
   а история изменений не мешала. */
.feed { list-style: none; margin: 0 0 18px; padding: 0; }
.feed li {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--grey-200); font-size: 14px;
}
.feed li:last-child { border-bottom: none; }
.feed li.sys { color: var(--blue-300); font-size: 13px; }
.feed li.sys .feed-who { font-weight: 400; color: var(--blue-300); }
.feed li.note { border-left: 3px solid var(--grey-200); padding-left: 12px; }
.feed-at { font-variant-numeric: tabular-nums; color: var(--blue-300); font-size: 12px; }
.feed-who { font-weight: 600; color: var(--deep-blue); }
.feed-text { flex: 1 1 240px; white-space: pre-wrap; }
.feed-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.feed-form label { flex: 1 1 320px; }

/* строка списка: голос слева, суть и пометки справа */
.imp-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; }
.imp-closed { opacity: .72; }
.imp-main { flex: 1 1 auto; min-width: 0; }
.imp-title {
  display: block; font-size: 16px; font-weight: 600; line-height: 1.35;
  color: var(--deep-blue); text-decoration: none;
}
.imp-title:hover { color: var(--orange); }
.imp-benefit {
  margin-top: 4px; font-size: 14px; color: var(--blue-500); line-height: 1.4;
}
.imp-meta {
  margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap;
  align-items: center; font-size: 13px;
}
.imp-area {
  font: 400 10px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .04em; color: var(--blue-300);
  border: 1px solid var(--grey-200); border-radius: 4px; padding: 3px 8px;
}
.benefit-line { margin: 0 0 10px; font-size: 15px; color: var(--deep-blue); }
.benefit-line .k {
  display: block; font: 400 10px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .05em; color: var(--blue-300); margin-bottom: 3px;
}

/* «Поддерживаю» — по голосу от человека, поэтому кнопка-переключатель */
.vote-form { margin: 0; flex: 0 0 auto; }
.vote {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 56px; padding: 8px 10px; cursor: pointer;
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--radius); color: var(--blue-300);
  font: 400 10px/1 var(--head); text-transform: uppercase; letter-spacing: .04em;
}
.vote:hover { border-color: var(--orange); color: var(--deep-blue); background: #FFF6EA; }
.vote.voted {
  background: #FFF1DC; border-color: var(--orange); color: var(--deep-blue);
}
.vote svg { width: 18px; height: 18px; display: block; }
.vote-n { font: 700 17px/1 var(--head); color: var(--deep-blue); }
.vote-big { flex-direction: row; gap: 9px; min-width: 0; padding: 10px 15px; }
.vote-big .vote-n { font-size: 19px; }
.vote-t { font-size: 10px; }

.opt {
  font: 400 9px/1 var(--head); text-transform: uppercase; letter-spacing: .05em;
  color: var(--blue-300); border: 1px solid var(--grey-200);
  border-radius: 4px; padding: 2px 5px; margin-left: 6px;
}

textarea {
  padding: 10px 12px; border: 1px solid var(--grey-200);
  border-radius: var(--radius); font: 400 15px/1.45 var(--body);
  color: var(--ink); background: var(--white); width: 100%; resize: vertical;
}
textarea:focus { outline: 2px solid var(--orange); outline-offset: -1px; }

/* призыв на главной */
.idea {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  border: 1px solid #FFD9A6; background: #FFF6EA;
  border-radius: var(--radius); padding: 18px 22px; margin: 0 0 18px;
}
.idea .t {
  font: 400 13px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .03em; color: var(--deep-blue); margin-bottom: 5px;
}
.idea .d { font-size: 14px; color: var(--blue-500); line-height: 1.45; max-width: 74ch; }

/* --- сообщения ----------------------------------------------------------- */
.alert {
  border-radius: var(--radius); padding: 14px 18px; margin: 0 0 18px;
  border: 1px solid var(--grey-200); background: var(--white);
}
.alert ul { margin: 8px 0 0; padding-left: 20px; line-height: 1.45; }
.alert.warn { background: #FFF6EA; border-color: #FFD9A6; }
.alert.error { background: #FDF0F0; border-color: #F0C4C4; color: #8A1F1F; }
details.alert summary { cursor: pointer; color: var(--deep-blue); }

.tag-ok, .tag-wait {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  font: 400 10px/1.3 var(--head); text-transform: uppercase; letter-spacing: .04em;
}
.tag-ok { background: #EAF7EE; color: #1F6B37; border: 1px solid #B9E0C6; }
.tag-wait { background: #FFF6EA; color: var(--warn); border: 1px solid #FFD9A6; }

.filelink { color: var(--deep-blue); text-decoration: none; font-weight: 500; }
.filelink:hover { color: var(--orange); }

.recent { list-style: none; margin: 0; padding: 0; }
.recent li {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--grey-200);
}
.recent li:last-child { border-bottom: none; }
/* новости на главной: заголовок и первая строка текста в столбик */
.news-short li { align-items: flex-start; }
.news-short .t { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.news-short .t a { flex: 0 0 auto; }
.recent a { color: var(--deep-blue); text-decoration: none; font-weight: 500; flex: 1; }
.recent a:hover { color: var(--orange); }
.kind {
  font: 400 10px/1 var(--head); letter-spacing: .05em;
  border: 1px solid var(--grey-200); border-radius: 4px;
  padding: 4px 7px; color: var(--blue-300);
}

/* --- главная: схема работы ----------------------------------------------- */
.flow { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.flow-step {
  flex: 1 1 190px; min-width: 190px;
  border: 1px solid var(--grey-200); border-radius: var(--radius);
  padding: 16px 18px; background: var(--white);
}
.flow-step .n {
  display: inline-block; width: 22px; height: 22px; margin-bottom: 9px;
  border-radius: 50%; background: var(--deep-blue); color: var(--white);
  font: 400 11px/22px var(--head); text-align: center;
}
.flow-step .t {
  font: 400 12px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .03em; color: var(--deep-blue); margin-bottom: 6px;
}
.flow-step .d { font-size: 13px; color: var(--blue-300); line-height: 1.45; }
.flow-arrow {
  flex: 0 0 34px; display: flex; align-items: center; justify-content: center;
  color: var(--orange);
}
.flow-arrow svg { width: 20px; height: 12px; display: block; }

.flow-down {
  display: flex; justify-content: center; color: var(--orange);
  margin: 4px 0 2px;
}
.flow-down svg { width: 12px; height: 22px; display: block; }

.outs { display: flex; gap: 14px; flex-wrap: wrap; }
.out {
  flex: 1 1 240px; border: 1px solid var(--grey-200);
  border-radius: var(--radius); padding: 15px 17px; background: var(--grey-100);
  text-decoration: none; display: block;
}
.out:hover { border-color: var(--orange); background: var(--white); }
.out .t {
  font: 400 12px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .03em; color: var(--deep-blue); margin-bottom: 6px;
}
.out .d { font-size: 13px; color: var(--blue-300); line-height: 1.45; }

/* --- главная: замечания и вопросы ---------------------------------------- */
/* Пунктов под сотню, поэтому они разложены по разделам и свёрнуты:
   и раздел, и сам пункт — <details>, раскрываются по клику. */
.notes-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.notes-tools input[type=search] {
  flex: 1 1 260px; min-width: 0; padding: 9px 12px; font-size: 14px;
  border: 1px solid var(--grey-200); border-radius: var(--radius);
  background: #fff; color: var(--ink);
}
.notes-tools input[type=search]:focus {
  outline: none; border-color: var(--blue-300);
}
.btn-quiet {
  padding: 8px 13px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--grey-200); border-radius: var(--radius);
  background: #fff; color: var(--deep-blue);
}
.btn-quiet:hover { border-color: var(--blue-300); }

.note-area { margin: 0 0 10px; }
.note-area > summary {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 11px 14px; border-radius: var(--radius);
  background: var(--grey-50, #F5F7FA); list-style: none;
  font-weight: 600; color: var(--deep-blue);
}
.note-area > summary::-webkit-details-marker { display: none; }
.note-area > summary::before {
  content: "▸"; font-size: 12px; color: var(--blue-300);
  transition: transform .12s;
}
.note-area[open] > summary::before { content: "▾"; }
.note-area > summary:hover { background: #EDF1F6; }
.note-area .area-title { flex: 1 1 auto; }
.note-area .area-count {
  font: 500 12px/1 var(--head); color: var(--blue-300);
  border: 1px solid var(--grey-200); border-radius: 20px; padding: 4px 9px;
  background: #fff; min-width: 46px; text-align: center;
}
/* колонка «ждёт ответа» одной ширины во всех строках: счётчики стоят
   друг под другом, даже когда у раздела ждущих вопросов нет */
.note-area .area-wait {
  flex: 0 0 130px; display: flex; justify-content: flex-end;
}
.note-area .area-wait .tag-wait { white-space: nowrap; }
.note-area > .note { margin-left: 14px; }
.note-area > .note:first-of-type { margin-top: 10px; }

/* на телефоне поиск занимает строку целиком, кнопки делят следующую */
@media (max-width: 560px) {
  .pick-row { flex-wrap: wrap; gap: 2px 14px; }
  .pick-code { flex: 0 0 100%; }

  .notes-tools input[type=search] { flex: 1 1 100%; }
  .notes-tools .btn-quiet { flex: 1 1 0; }
  .note-area > .note { margin-left: 0; }
}

.note {
  border: 1px solid var(--grey-200); border-left: 3px solid var(--grey-200);
  border-radius: var(--radius); padding: 15px 18px; margin: 0 0 12px;
}
.note.wait { border-left-color: var(--orange); }
.note.done { border-left-color: #B9E0C6; }
.note > summary {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary .t {
  font-weight: 600; color: var(--deep-blue); font-size: 15px;
  line-height: 1.35; flex: 1 1 auto;
}
.note > summary:hover .t { text-decoration: underline; }
.note .who {
  font: 400 10px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .04em; color: var(--blue-300);
  flex: 1 1 100%;
}
.note dl { margin: 9px 0 0; font-size: 14px; line-height: 1.5; }
.note dt {
  font: 400 10px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .04em; color: var(--blue-300); margin-top: 9px;
}
.note dd { margin: 3px 0 0; color: var(--ink); }
.note dd.hl { color: var(--deep-blue); font-weight: 500; }

/* Ответ пишется тут же, в карточке вопроса: человек прочитал, чего от него
   хотят, и отвечает не сходя с места. Поле отделено чертой, чтобы не
   путалось с текстом самого вопроса. */
.note-answer {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed var(--grey-200);
}
.note-answer label {
  font: 400 10px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .05em; color: var(--blue-300);
}
.note-answer textarea { margin-top: 5px; font-size: 14px; }
.note-answer-go {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 8px;
}

/* --- сроки заказов ------------------------------------------------------- */
/* Срочность читается цветом с одного взгляда: красный — срок прошёл,
   оранжевый — сегодня и ближайшие два дня, остальное спокойное. */
.due-tag {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  font: 400 10px/1.3 var(--head); text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap;
  border: 1px solid var(--grey-200); background: var(--grey-100);
  color: var(--blue-500); font-variant-numeric: tabular-nums;
}
.due-tag.u-late { background: #FDF0F0; border-color: #F0C4C4; color: #8A1F1F; }
.due-tag.u-today { background: var(--orange); border-color: var(--orange); color: var(--deep-blue); }
.due-tag.u-soon { background: #FFF6EA; border-color: #FFD9A6; color: #8A5200; }
.due-tag.u-done { background: #EAF7EE; border-color: #B9E0C6; color: #1F6B37; }
/* счётчик просроченных на вкладке — красный, чтобы бросался в глаза */
.badge-late { background: #C24141; color: var(--white); }
.tab.active .badge-late { background: #C24141; color: var(--white); }
.u-row-late td:first-child { border-left: 3px solid #C24141; }
.u-row-today td:first-child, .u-row-soon td:first-child {
  border-left: 3px solid var(--orange);
}
/* выполненные приглушены: они в архиве, глаз им цепляться не за что */
tr.row-done td { opacity: .62; }
tr.row-done td:first-child { border-left: 3px solid #B9E0C6; }
/* перенос срока: производству важно видеть, что дата уже двигалась */
.due-moved {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 4px; font-size: 11px; font-weight: 400;
  background: #FFF6EA; border: 1px solid #FFD9A6; color: #8A5200;
  white-space: nowrap; cursor: help;
}
details.lines > summary { cursor: pointer; list-style: none; }
details.lines > summary::-webkit-details-marker { display: none; }
details.lines > summary:hover { color: var(--deep-blue); text-decoration: underline; }
.quick-on { background: var(--deep-blue) !important; color: var(--white) !important;
  border-color: var(--deep-blue) !important; }

/* график Ганта: слева номер, справа дорожка с полосой до дня готовности */
.gantt { overflow-x: auto; }
.gantt-head, .gantt-row { display: flex; align-items: stretch; }
.gantt-label {
  flex: 0 0 128px; padding: 4px 10px 4px 0; text-decoration: none;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  border-right: 1px solid var(--grey-200);
}
.gantt-label b {
  font: 600 12px/1.2 var(--body); color: var(--deep-blue);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
a.gantt-label:hover b { color: var(--orange); }
.gantt-scale {
  position: relative; flex: 1; height: 26px; min-width: 480px;
}
.gantt-tick {
  position: absolute; top: 4px; transform: translateX(-50%);
  font: 400 10px/1 var(--head); color: var(--blue-300);
  font-variant-numeric: tabular-nums;
}
.gantt-today-label {
  position: absolute; bottom: 0; transform: translateX(-50%);
  font: 400 9px/1 var(--head); text-transform: uppercase;
  letter-spacing: .04em; color: var(--orange);
}
.gantt-track {
  position: relative; flex: 1; min-width: 480px; height: 30px;
  border-bottom: 1px solid var(--grey-100);
}
.gantt-grid {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--grey-100);
}
.gantt-now {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--orange); z-index: 2;
}
.gantt-bar {
  position: absolute; top: 6px; height: 18px; border-radius: 4px;
  background: var(--blue-300); display: block; z-index: 1; min-width: 6px;
}
.gantt-bar:hover { outline: 2px solid var(--deep-blue); }
.gantt-bar.u-late { background: #C24141; }
.gantt-bar.u-today, .gantt-bar.u-soon { background: var(--orange); }
.gantt-bar.u-ok { background: var(--blue-500); }
.gantt-bar.u-done { background: #7BBF93; }

@media (max-width: 820px) {
  .gantt-label { flex-basis: 92px; }
  .gantt-label .muted { display: none; }
}

.foot {
  max-width: 1320px; margin: 0 auto; padding: 0 32px 40px;
  color: var(--blue-300); font-size: 12px; line-height: 1.5;
}

/* --- цеха и участки ------------------------------------------------------ */
.tsekh-cards {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-bottom: 18px;
}
.tsekh-card { margin: 0; }
.uch-list { list-style: none; margin: 0; padding: 0; }
.uch-list li {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 0; border-bottom: 1px solid var(--grey-100);
}
.uch-list li:last-child { border-bottom: none; }
.uch-row { display: flex; gap: 6px; align-items: center; flex: 1; margin: 0; }
.uch-row input[type=text], .uch-row select {
  flex: 1; min-width: 0; padding: 6px 9px; font-size: 13px;
}
/* нестандартная спичка: её нужно рубить, стандартная есть в супермаркете */
tr.cut-row td { background: #EAF7EE !important; }
.cut-mark {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  background: #EAF7EE; border: 1px solid #B9E0C6; vertical-align: -2px;
}

/* памятка менеджерам: свёрнута, чтобы не мешать работе, но всегда рядом */
/* Привязка продукции к цехам: галочка — цех делает это изделие,
   кружок рядом — выпускающий, тот, кто отвечает за срок. */
.tsekh-bind { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; }
.tsekh-box {
  /* общий стиль label ставит колонку — здесь нужна строка */
  display: flex; flex-direction: row; align-items: center; gap: 6px;
  white-space: nowrap;
  padding: 4px 9px; border: 1px solid var(--grey-200); border-radius: var(--radius);
  font: 400 12px/1.2 var(--body); text-transform: none; letter-spacing: normal;
  color: var(--ink); background: var(--white);
}
.tsekh-box input { margin: 0; }
.tsekh-box input[type=radio] { accent-color: var(--orange); }
.tsekh-box:hover { border-color: var(--blue-300); }
.tsekh-sec {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
  margin-top: 10px; padding: 10px 12px;
  background: var(--grey-100); border-radius: var(--radius);
}

.pamyatka summary { cursor: pointer; color: var(--deep-blue); }
.pamyatka-body { margin-top: 6px; }
.pamyatka-body h3 { margin: 16px 0 6px; }
.pamyatka-body p {
  margin: 0; max-width: 88ch; line-height: 1.5; font-size: 14px;
  color: var(--ink);
}

/* метка цеха в ряду вкладок задания */
.tsekh-label {
  flex: 0 0 100%; margin: 8px 0 0;
  font: 400 10px/1.2 var(--head); text-transform: uppercase;
  letter-spacing: .06em; color: var(--orange);
}
.tabs .tsekh-label:first-child { margin-top: 0; }
.tsekh-print {
  margin-left: 10px; color: var(--blue-300); text-decoration: none;
  text-transform: none; letter-spacing: 0; font-size: 11px;
  border-bottom: 1px dotted var(--grey-200);
}
.tsekh-print:hover { color: var(--orange); }

/* --- листалка длинных таблиц --------------------------------------------- */
/* Журнал учтённых заказ-нарядов растёт с каждой выгрузкой, поэтому выводится
   страницами: номера страниц, а по краям «Назад» и «Вперёд». */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px;
}
.pager .cur {
  background: var(--deep-blue); color: var(--white); border-color: var(--deep-blue);
  cursor: default;
}
.pager .gap { color: var(--blue-300); padding: 0 2px; }
.pager .count { margin-left: auto; color: var(--blue-300); font-size: 13px; }

/* --- рекламации и брак ---------------------------------------------------- */
/* Недостающие статусы к общему набору .st: разбор — нейтральный,
   закрытая — зелёная, как «внедрено» у предложений. */
.st-review { background: var(--grey-100); color: var(--blue-500); }
.st-closed { background: #EAF7EE; border-color: #B9E0C6; color: #1F6B37; }

.rec-no {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 5px;
  align-items: flex-start; min-width: 92px;
}

/* Выбор кодов: группы свёрнуты, иначе на экране 31 строка сразу. */
.pick { display: flex; flex-direction: column; gap: 8px; }
.pick-group { border: 1px solid var(--grey-200); border-radius: var(--radius); }
.pick-group > summary {
  cursor: pointer; padding: 10px 14px; font-size: 14px; color: var(--blue-500);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.pick-group > summary::-webkit-details-marker { display: none; }
.pick-group > summary::before { content: '+'; color: var(--blue-300); }
.pick-group[open] > summary::before { content: '−'; }
.pick-group > summary:hover { background: var(--grey-100); }
.pick-rows { padding: 4px 14px 12px; }
.pick-row {
  display: flex; gap: 9px; align-items: baseline; padding: 6px 0;
  font-size: 14px; cursor: pointer; margin: 0;
}
.pick-row:hover .pick-title { color: var(--deep-blue); }
.pick-row input { margin: 0; flex: 0 0 auto; }
.pick-code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12px; font-weight: 600; color: var(--blue-700);
  background: var(--grey-100); border-radius: 4px; padding: 2px 6px;
  white-space: nowrap;
}
.pick-title { flex: 1 1 auto; color: var(--blue-500); line-height: 1.4; }
.pick-place {
  display: flex; gap: 8px; align-items: center; margin: 0;
  border: 1px solid var(--grey-200); border-radius: var(--radius);
  padding: 9px 12px; font-size: 14px; cursor: pointer;
}
.pick-place:hover { border-color: var(--blue-300); }
.pick-place input { margin: 0; }

.rec-codes { list-style: none; margin: 0 0 12px; padding: 0; }
.rec-codes li {
  display: flex; gap: 9px; align-items: baseline; padding: 5px 0;
  font-size: 15px; color: var(--blue-500);
}

.rec-files { display: flex; flex-wrap: wrap; gap: 12px; }
/* карточка файла с кнопкой «Удалить» под ней (просьба №33) */
.rec-file-box { display: flex; flex-direction: column; gap: 6px;
                width: 150px; align-items: flex-start; }
.rec-file-box button.small { font-size: 12px; padding: 3px 10px; }
.rec-file {
  display: flex; flex-direction: column; gap: 6px; width: 150px;
  text-decoration: none; color: var(--blue-500); font-size: 12px;
}
.rec-file img {
  width: 150px; height: 112px; object-fit: cover;
  border: 1px solid var(--grey-200); border-radius: var(--radius);
}
.rec-file-pdf {
  width: 150px; height: 112px; display: flex; align-items: center;
  justify-content: center; background: var(--grey-100);
  border: 1px solid var(--grey-200); border-radius: var(--radius);
  font: 700 16px/1 var(--head); color: var(--blue-300);
}
.rec-file-name { overflow-wrap: anywhere; }
.rec-file:hover .rec-file-name { color: var(--orange); }

/* Парето по кодам: длина полоски относительно самого частого дефекта. */
.pareto { list-style: none; margin: 0; padding: 0; }
.pareto li {
  display: flex; gap: 10px; align-items: center; padding: 7px 0;
  border-bottom: 1px solid var(--grey-200); font-size: 14px;
}
.pareto li:last-child { border-bottom: none; }
.pareto-title { flex: 0 1 240px; color: var(--blue-500); }
.pareto-bar { flex: 1 1 90px; height: 8px; background: var(--grey-100);
  border-radius: 4px; overflow: hidden; }
.pareto-bar i { display: block; height: 100%; background: var(--orange); }
.pareto-n {
  flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--blue-300);
  font-size: 13px; min-width: 62px; text-align: right;
}

/* --- производственные показатели ------------------------------------------ */
/* Цвета строк взяты из книги, которую заказчик вёл руками: человек,
   заполнявший её полгода, должен узнать свой отчёт с первого взгляда.
   Здесь это единственное место, где цвет несёт смысл сам по себе. */
/* Колонок здесь два десятка и больше, поэтому жёсткая раскладка .grid.even
   не подходит: она делит 640 px поровну, и подпись показателя выезжает
   на соседние ячейки. Ширину задаёт содержимое, а таблица прокручивается
   вбок внутри .table-wrap. */
.pk-table { table-layout: auto; width: auto; min-width: 100%; }
.pk-table th, .pk-table td { padding: 7px 9px; }
.pk-table th.num, .pk-table td.num { white-space: nowrap; }
/* Подпись строки держится на месте при прокрутке вбок — иначе, доехав
   до 20-го числа, уже не понять, какой это показатель. */
.pk-table th:first-child, .pk-table td:first-child {
  position: sticky; left: 0; z-index: 2; white-space: normal;
  min-width: 232px; background: var(--white);
  box-shadow: 1px 0 0 var(--grey-200);
}
.pk-table thead th:first-child { z-index: 3; background: var(--grey-100); }
tr.pk-bad  td:first-child { background: #FF6B6B; color: #fff; font-weight: 600; }
tr.pk-warn td:first-child { background: #FFC000; font-weight: 600; }
tr.pk-good td:first-child { background: #A9D08E; font-weight: 600; }
tr.pk-info td:first-child { background: #9BC2E6; font-weight: 600; }
tr.pk-note td:first-child { background: #B4A7D6; font-weight: 600; }
tr.pk-pct  td:first-child { color: #B00000; font-weight: 600; }
tr.pk-bad td, tr.pk-pct td { color: #B00000; }
tr.pk-pct td:first-child { background: var(--white); }
th.pk-future { color: var(--grey-200); }

.pk-charts { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.pk-charts > .card { flex: 1 1 320px; min-width: 0; }
.pk-chart { width: 100%; height: auto; overflow: visible; display: block; }
/* Широкий график на телефоне сжался бы втрое, и подписи стали бы
   нечитаемыми. Поэтому ниже определённой ширины он не ужимается,
   а прокручивается вбок — так же, как таблица над ним. */
.pk-scroll { overflow-x: auto; }
.pk-scroll .pk-chart { min-width: 820px; }
.pk-chart .pk-base { stroke: var(--grey-200); stroke-width: 1; }
.pk-chart .pk-grid { stroke: var(--grey-100); stroke-width: 1; }
.pk-chart .pk-ax {
  font: 400 9px var(--body); fill: var(--blue-300); text-anchor: end;
}
/* даты идут под своей точкой, поэтому выравниваются по центру */
.pk-chart .pk-ax-x { text-anchor: middle; }
.pk-chart .pk-val {
  font: 600 9px var(--body); fill: #C00000; text-anchor: middle;
}
.pk-dot { stroke: none; }
.pk-dot.pk-bad  { fill: #E03131; }
.pk-dot.pk-warn { fill: #FFA000; }
.pk-dot.pk-good { fill: #4C9A2A; }
.pk-dot.pk-info { fill: #2F86D6; }
.pk-dot.pk-note { fill: #7E57C2; }
.pk-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.pk-line.pk-bad  { stroke: #E03131; }
.pk-line.pk-warn { stroke: #FFA000; }
.pk-line.pk-good { stroke: #4C9A2A; }
.pk-line.pk-info { stroke: #2F86D6; }
.pk-line.pk-note { stroke: #7E57C2; }
.pk-bar { fill: #C00000; }

.pk-legend {
  list-style: none; margin: 10px 0 0; padding: 0; display: flex;
  gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--blue-500);
}
.pk-legend li { display: flex; align-items: center; gap: 5px; }
.pk-legend i { width: 14px; height: 3px; border-radius: 2px; }
.pk-legend i.pk-bad  { background: #E03131; }
.pk-legend i.pk-warn { background: #FFA000; }
.pk-legend i.pk-good { background: #4C9A2A; }
.pk-legend i.pk-info { background: #2F86D6; }
.pk-legend i.pk-note { background: #7E57C2; }

/* --- адаптив ------------------------------------------------------------- */
/* Вёрстка рассчитана на широкий экран: шапка в одну строку, поля рядами,
   широкие таблицы. На планшете и телефоне те же блоки перестраиваются
   в столбец. Порядок правил — от широкого экрана к узкому. */

@media (max-width: 1100px) {
  main { padding: 24px 20px 48px; }
  .foot { padding: 0 20px 32px; }
  .top { padding: 12px 20px; }
  /* список моделей длинный, но 340 мм на узком экране уже не помещаются */
  select { min-width: 0; }
}

@media (max-width: 820px) {
  /* Шапка в две строки: сверху знак и «кто вошёл», снизу разделы.
     Меню не переносится, а прокручивается вбок — иначе семь пунктов
     занимают пол-экрана. */
  .top { flex-wrap: wrap; gap: 10px 14px; padding: 10px 14px; }
  .brand { flex: 0 1 auto; }
  .whoami { margin-left: auto; padding-left: 12px; }
  .top nav.mainnav {
    order: 3; flex: 1 0 100%; margin-left: 0;
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .top nav.mainnav::-webkit-scrollbar { display: none; }

  main { padding: 18px 14px 40px; }
  .foot { padding: 0 14px 28px; }
  .card { padding: 16px 15px; margin-bottom: 14px; }
  h1 { font-size: 21px; }
  .page-head { flex-direction: column; gap: 10px; }
  .lead { margin-bottom: 16px; }

  /* Поля формы занимают строку целиком: в ряд они помещались только
     на широком экране, а на телефоне налезали друг на друга. */
  .row { flex-wrap: wrap; align-items: stretch; }
  .row > label, .row > button, .row > .btn { flex: 1 1 100%; }
  label { font-size: 10px; }
  input[type=number], input[type=text], input[type=password],
input[type=date], input[type=file], select {
    width: 100%; min-width: 0;
    /* меньше 16px Safari на iPhone встречает зумом всей страницы */
    font-size: 16px;
  }
  button, .btn { padding: 12px 18px; }
  .acts form.pwd input { width: auto; flex: 1 1 120px; font-size: 16px; }

  /* Таблицы не ужимаем — они всё равно не читаются в узкой колонке;
     вместо этого прокручиваем вбок внутри своего блока. */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .grid { font-size: 13px; }
  .grid th, .grid td { padding: 7px 9px; }

  .stat { flex: 1 1 140px; }
  .flow-step { flex: 1 1 100%; min-width: 0; }
  /* стрелки между шагами имеют смысл только когда шаги стоят в ряд */
  .flow-arrow { display: none; }
  .out { flex: 1 1 100%; }
  .auth-page { padding: 16px; }
  .auth-box { padding: 24px 20px; }
}

@media (max-width: 820px) {
  /* на узком экране кнопка сжимается до значка — место нужно имени и выходу */
  .idea-btn { padding: 9px 10px; gap: 0; }
  .idea-btn-text { display: none; }
}

@media (max-width: 480px) {
  /* «Раскрой» рядом со знаком — приятная деталь, но на узком экране
     она отнимает место у имени пользователя и кнопки выхода */
  .brand-sub { display: none; }
  .top { padding: 9px 12px; }
  main { padding: 14px 11px 32px; }
  .foot { padding: 0 11px 24px; }
  .card { padding: 14px 12px; }
  h1 { font-size: 19px; }
  h2 { font-size: 14px; }
  /* Длинное ФИО не давало шапке ужаться: блок «кто вошёл» стоял
     неразрывным и на узком экране торчал за край — вся страница ехала
     вбок на несколько пикселей, на всех разделах сразу. Теперь имя
     обрезается многоточием: это подпись, а не заголовок, а метка роли
     и «Выйти» остаются целиком — без них человек не поймёт, кем вошёл
     и как выйти. */
  .whoami { flex: 0 1 auto; min-width: 0; }
  .who { font-size: 12px; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  .stat { flex: 1 1 100%; }
  .note { padding: 13px 14px; }
  .tabs { gap: 6px; margin: 16px 0 12px; }
  .tab { padding: 9px 12px; }

  /* Показатели на телефоне: закреплённая подпись съедает почти весь
     экран, поэтому она уже и в две строки, а цифры плотнее — иначе
     в видимую часть не попадает ни одного дня. */
  .pk-table th:first-child, .pk-table td:first-child { min-width: 148px; }
  .pk-table th, .pk-table td { padding: 6px 7px; font-size: 13px; }
  .pk-table th:first-child, .pk-table td:first-child { font-size: 12px; }
  .pk-legend { font-size: 11px; gap: 8px; }
}

@media print {
  .top, .tabs, .foot, form, .btn, .stats { display: none !important; }
  .panel { display: block !important; page-break-after: always; }
  .card { border: none; padding: 0; margin-bottom: 12px; }
  body { background: #fff; }
  .grid tr.total td { background: #fff; color: #000; }
}

/* --- разбор по 8D: семь шагов бланка (предложение №35) ------------------- */
.d8-wrap { margin-top: 26px; border-top: 1px solid var(--grey-200);
           padding-top: 18px; }
.d8-step { display: flex; gap: 14px; align-items: flex-start;
           padding: 14px 0; border-bottom: 1px dashed var(--grey-200); }
.d8-step:last-of-type { border-bottom: none; }
.d8-num { flex: 0 0 62px; font: 700 12px/1.2 var(--head);
          text-transform: uppercase; letter-spacing: .04em;
          color: var(--blue-300); padding-top: 8px; }
.d8-body { flex: 1 1 auto; min-width: 0; }
.d8-body h3 { margin: 0 0 8px; font: 700 15px/1.2 var(--head);
              color: var(--deep-blue); }
.d8-body label { display: block; margin-bottom: 10px; }
.d8-body label .hint { display: block; font-size: 12px;
                       color: var(--blue-300); font-weight: 400; }
/* Колонки в .grid.even фиксированной ширины, поэтому поле обязано
   сжиматься вместе с колонкой. Раньше правило не покрывало календарь
   (input[type=date]), а min-width держал строку шире колонки — поля
   вылезали на соседние (замечание №39 от 31.08.2026). */
.d8-body input, .d8-body textarea, .d8-body select { width: 100%; min-width: 0; }
.d8-ish td { vertical-align: top; }
.d8-act th.w-date { width: 132px; }    /* дате нужен ещё значок календаря */
.d8-act th:last-child { width: 56px; } /* колонка с крестиком */

/* карточка-призыв: заголовок с пояснением слева, кнопка справа.
   Ссылка «Правила размеров КСД» терялась в тексте (просьба 31.08.2026) */
.call-card { display: flex; gap: 16px; align-items: center;
             justify-content: space-between; flex-wrap: wrap;
             border-left: 4px solid var(--orange); }
.call-card .call-body { flex: 1 1 320px; min-width: 0; }
.call-card .btn-accent { flex: 0 0 auto; white-space: nowrap; }

/* --- схема размеров КСД (просьба 31.08.2026: показать, что есть что) ----- */
.ksd-draw-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 4px; }
.ksd-fig { flex: 1 1 340px; margin: 0; min-width: 0; }
.ksd-fig svg { width: 100%; height: auto; display: block;
               background: var(--white); border: 1px solid var(--grey-200);
               border-radius: var(--radius); }
.ksd-fig figcaption { font-size: 12px; color: var(--blue-300);
                      margin-top: 6px; text-align: center; }
.ksd-draw .d-body { fill: #fff; stroke: var(--deep-blue); stroke-width: 1.6; }
.ksd-draw .d-part { fill: var(--grey-100); stroke: var(--deep-blue);
                    stroke-width: 1.4; }
.ksd-draw .d-grille { fill: var(--orange); stroke: var(--deep-blue);
                      stroke-width: 1.2; }
.ksd-draw .d-hole { fill: var(--grey-100); stroke: var(--deep-blue);
                    stroke-width: 1.2; stroke-dasharray: 4 3; }
.ksd-draw .d-edge { stroke: var(--deep-blue); stroke-width: 1.4; fill: none; }
.ksd-draw .d-fold { stroke: var(--blue-300); stroke-width: 1;
                    stroke-dasharray: 6 4; fill: none; }
.ksd-draw .d-dim { stroke: var(--blue-300); stroke-width: 1; fill: none; }
.ksd-draw .d-lab { font: 600 11px var(--head); fill: var(--deep-blue); }
.ksd-draw .d-dim-lab { font: 400 10px var(--head); fill: var(--blue-300); }
.ksd-legend { margin: 10px 0 0; padding-left: 18px; font-size: 14px;
              color: var(--blue-500); }
.ksd-legend li { margin-bottom: 4px; }

.ksd-sub { margin: 18px 0 8px; font: 700 15px/1.2 var(--head);
           color: var(--deep-blue); }
/* три схемы врезки: одинаковой ширины в любой раскладке — при переносе
   последняя растягивалась на всю строку и выглядела втрое крупнее */
.ksd-places { display: grid; gap: 14px;
              grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ksd-place { margin: 0; min-width: 0; max-width: 260px; }
.ksd-place svg { width: 100%; height: auto; background: var(--white);
                 border: 1px solid var(--grey-200);
                 border-radius: var(--radius); }
.ksd-place figcaption { font-size: 12px; color: var(--blue-500);
                        margin-top: 6px; text-align: center; }
.ksd-draw .d-axis { stroke: var(--blue-300); stroke-width: .8; fill: none;
  stroke-dasharray: 9 3 2 3; }

/* План разработок: доска по стадиям и цвет приоритета */
.dev-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.dev-col { flex: 0 0 220px; background: var(--grey-100); border-radius: 12px;
  padding: 10px 10px 12px; }
.dev-col h3 { font-size: 13px; margin: 0 0 8px; }
.dev-chip { display: block; background: var(--white); border-radius: 10px;
  padding: 8px 10px; margin-bottom: 8px; text-decoration: none;
  color: inherit; border-left: 3px solid var(--blue-300); }
.dev-chip b { display: block; font-size: 13px; }
.dev-chip:hover { box-shadow: 0 2px 10px rgba(9, 14, 37, .12); }
.dev-chip.pr-A { border-left-color: var(--orange); }
.dev-chip.pr-B { border-left-color: #f0b429; }
.pr-A { font-weight: 600; }
/* Разделы человека: колонки подстраиваются под ширину экрана, названия
   не режутся — на телефоне список становится в одну колонку. */
/* «Новое» на пункте меню: пришло уведомление именно по этому разделу
   (№44). Отличается от «моего» счётчика цветом — он про нагрузку. */
.badge-new { background: var(--orange); color: #fff; }
/* Новое поручение в плане мероприятий (№49). Уведомление гаснет, как
   только человек зашёл в раздел, и своя новая строка терялась среди
   чужих — особенно у администратора, который видит весь план. Полоса
   слева и подложка держатся до следующего захода. */
tr.novoe td { background: #FFF6EA !important; }
tr.novoe td:first-child { border-left: 3px solid var(--orange); }
tr.novoe .badge-new { margin-left: 0; margin-right: 6px;
  text-transform: uppercase; letter-spacing: .03em; }
/* Уведомление ведёт на свою строку якорем. Шапка липкая и на телефоне
   занимает 124 px — без отступа браузер ставил строку под неё, и человек
   приходил по ссылке в пустоту. Отступ с запасом: уехать чуть ниже
   не мешает, уехать под шапку — мешает. */
tr[id^="zadacha-"] { scroll-margin-top: 140px; }
.prava-list { display: grid; gap: 10px 22px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.prava-list .check { align-items: center; }
.ksd-fig svg { cursor: zoom-in; }
.zoom-overlay { position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(9, 14, 37, .74); cursor: zoom-out; }
.zoom-overlay svg { width: 100%; max-width: 1400px; height: auto;
  max-height: 92vh; background: #fff; border-radius: 14px; padding: 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.ksd-places { display: flex; gap: 16px; flex-wrap: wrap; margin: 6px 0 10px; }
.ksd-places .ksd-fig { flex: 1 1 300px; }
.ksd-draw .d-throat { stroke: var(--orange); stroke-width: 3; fill: none; }
.ksd-draw .d-lead { stroke: var(--blue-300); stroke-width: 1;
                    stroke-dasharray: 3 3; fill: none; }
.ksd-draw .d-slot path { stroke: var(--blue-300); stroke-width: 2; fill: none; }
.ksd-draw .d-open { stroke: var(--orange); stroke-width: 3; fill: none; }