/* Маршрут — оформление. Ориентир: доска, к которой привыкли в Platrum:
   колонки, белые карточки, ничего лишнего.
   Цвета — из брендбука Gem Tech: золото #b79b77 (фон колонок, задаётся
   в этапы.py), графит #3b3b48 (рамки блоков). */

* { box-sizing: border-box; }

/* Шрифт — системный, как был. Узкий гротеск (Roboto Condensed вместо платного
   TT Prosto Sans Condensed) пробовали 10.08.2026 — владельцу не понравился,
   вернули системный. Если когда-нибудь купится лицензия Prosto Sans, шрифт
   подключается тремя блоками @font-face здесь же. */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  color: #3b3b48;           /* GT Graphite — основной текст */
  background: #f4f5f9;
}

a { color: #2f6fd0; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Шапка ------------------------------------------------------------ */

.шапка {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 20px;
  background: #fff;
  border-bottom: 1px solid #e3e5ee;
  position: sticky;
  top: 0;
  z-index: 20;
}

.логотип {
  font-size: 22px;
  font-weight: 700;
  color: #3b3b48;
  letter-spacing: .01em;
  white-space: nowrap;
}
.логотип:hover { text-decoration: none; }

/* Пункты меню — кнопками в фирменных цветах: графитовая рамка, при наведении
   заливка золотом. Синих ссылок в шапке больше нет, к бренду они не шли. */
.меню { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Пустое место шириной в кнопку: отделяет календарь от остальных разделов */
.отступ-меню { display: inline-block; width: 63px; flex: 0 0 auto; }

/* Календарь — зелёный, как таблица в экселе, откуда он и пришёл */
.пункт.значок.календарь svg { stroke: #217346; }
.пункт.значок.календарь:hover svg { stroke: #0f5132; }

/* Пункты меню — только значок, без подписи: название всплывает при наведении.
   Рисунок задаётся маской, а не картинкой: так значок красится в цвет кнопки
   и на золотом фоне становится чёрным, как остальной текст. */
.пункт.значок {
  display: inline-flex;
  align-items: center;      /* рисунок ровно по центру кнопки */
  justify-content: center;
  padding: 6px 10px;
  /* Размер жёсткий и одинаковый у всех: flex иначе растягивает кнопку по
     содержимому, и календарь (у него рисунок не картинкой, а чертежом svg)
     раздувался на всю строку. */
  flex: 0 0 63px;
  width: 63px;
  min-width: 63px;
  max-width: 63px;
  height: 48px;
  box-sizing: border-box;
}
/* Рисунок занимает 80% высоты кнопки и стоит ровно по центру. Ширина у всех
   своя — она зависит от самого рисунка, а равнять надо высоту: тогда значки
   выглядят одинаковыми. Файлы обрезаны по содержимому, без полей, иначе
   «80%» считались бы от пустого квадрата и значки казались разными. */
.пункт.значок .рисунок {
  display: block;
  width: 100%;
  height: 100%;            /* целиком внутри кнопки, по центру */
  background-color: #000;
  -webkit-mask: var(--значок) center / contain no-repeat;
  mask: var(--значок) center / contain no-repeat;
}
.пункт.значок svg {
  width: auto;
  max-width: 100%;         /* не даём чертежу растянуть кнопку */
  height: 100%;            /* значок выхода — того же размера, что остальные */
  fill: none;
  stroke: #000;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Название кнопки всплывает под ней сразу при наведении */
.пункт.значок { position: relative; }
.пункт.значок::after {
  content: attr(data-подпись);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 9px;
  border-radius: 6px;
  background: #3b3b48;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .1s ease;
  z-index: 30;
}
.пункт.значок:hover::after,
.пункт.значок:focus-visible::after { opacity: 1; }

/* Кто в системе: имя с ролью — ссылка на смену своего пароля */
.я-в-системе {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  color: #3b3b48;
  text-decoration: none;
}
.я-в-системе:hover { background: #edece9; text-decoration: none; }

.меню .пункт,
.кто .пункт {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid #cfcdc8;
  border-radius: 8px;
  background: #fff;
  color: #3b3b48;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.меню .пункт:hover,
.кто .пункт:hover {
  background: #b79b77;          /* GT Gold */
  border-color: #3b3b48;
  color: #000;
  text-decoration: none;
}
/* Служебные пункты (пароль, выход) — тише основных */
.кто .пункт.тихий {
  font-weight: 500;
  color: #6c6c75;
  border-color: #e2e0dc;
}

.кто { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.имя { font-weight: 600; white-space: nowrap; }

/* Роль — спокойная плашка графитом: цветные ярлыки в шапке спорили с брендом,
   а ролей стало шесть, и радуга из них выглядела вывеской, а не системой. */
/* Должность — подпись под именем, а не ярлык: рамка и заливка спорили с
   кнопками меню и притягивали взгляд к тому, что и так известно. */
.роль {
  font-size: 12px;
  color: #6c6c75;
  letter-spacing: .02em;
  font-weight: 600;
  white-space: nowrap;
}

/* На узком экране шапка складывается в две строки, а не режет пункты */
@media (max-width: 900px) {
  .шапка { flex-wrap: wrap; gap: 10px 14px; }
  .кто { margin-left: 0; width: 100%; }
}

/* --- Доска ------------------------------------------------------------ */

.доска { padding: 12px 18px 18px; min-height: calc(100vh - 60px); }

/* Сами колонки лежат в обёртке: у неё и прокрутка, и масштаб.
   Высота обёртки равна видимой части окна (её ставит место.js в --высота-доски),
   поэтому горизонтальный бегунок всегда виден внизу экрана: чтобы уехать
   вправо, не нужно сперва листать страницу до конца самой длинной колонки. */
.доска-обёртка {
  display: flex;
  gap: 14px;
  overflow: auto;
  align-items: flex-start;
  max-height: var(--высота-доски, none);
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}

/* Полосы прокрутки держим видимыми: в macOS они прячутся, и на доске
   непонятно, что вправо есть ещё колонки. Цвета — графит из брендбука. */
.доска-обёртка::-webkit-scrollbar { height: 12px; width: 12px; }
.доска-обёртка::-webkit-scrollbar-track {
  background: rgba(59, 59, 72, .12);
  border-radius: 6px;
}
.доска-обёртка::-webkit-scrollbar-thumb {
  background: #3b3b48;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.доска-обёртка::-webkit-scrollbar-thumb:hover { background: #2b2b36; background-clip: padding-box; }
.доска-обёртка::-webkit-scrollbar-corner { background: transparent; }
.доска-обёртка { scrollbar-color: #3b3b48 rgba(59, 59, 72, .12); }

/* Кнопки масштаба над доской */
.масштаб { display: flex; gap: 6px; margin-bottom: 10px; }
.кнопка-масштаба {
  width: 34px;
  height: 30px;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: #3b3b48;
  background: #fff;
  border: 1px solid #d8d3cb;
  border-radius: 6px;
  cursor: pointer;
}
.кнопка-масштаба:hover { background: #ede6dd; border-color: #3b3b48; }
.кнопка-масштаба.выбрана { background: #b79b77; border-color: #3b3b48; color: #000; }

/* Общий вид: все девять колонок сразу, без прокрутки. Обложки остаются —
   по картинке заказ узнают быстрее, чем по названию. */
.доска-обёртка.мелко { gap: 6px; }
.доска-обёртка.мелко .колонка {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px;
  border-radius: 8px;
}
.доска-обёртка.мелко .шапка-колонки { font-size: 11px; padding: 0 2px 6px; }
.доска-обёртка.мелко .карточка { padding: 6px; margin-bottom: 5px; }
.доска-обёртка.мелко .карточка img.превью {
  /* Обложка остаётся, но уменьшается ЦЕЛИКОМ, а не обрезается: на мелком
     масштабе изделие узнают по силуэту, а обрезанный кадр этого лишает. */
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 74px;
  width: 100%;
  object-fit: contain;
  background: #fff;
  margin-bottom: 4px;
  border-radius: 4px;
}
.доска-обёртка.мелко .клиент { font-size: 12px; line-height: 1.2; }
.доска-обёртка.мелко .мелко { font-size: 11px; }
.доска-обёртка.мелко .строка-карточки { margin-top: 2px; }

.колонка {
  flex: 0 0 260px;
  border-radius: 10px;
  padding: 10px;
  min-height: 90px;
}

.колонка.цель { outline: 3px dashed #3b3b48; outline-offset: -6px; }

.шапка-колонки {
  font-weight: 700;
  font-size: 16px;
  color: #000;
  padding: 2px 4px 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.счётчик { opacity: .55; font-weight: 600; }

.карточка {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 9px;
  box-shadow: 0 1px 3px rgba(20,25,50,.16);
  cursor: grab;
  display: block;
  color: #3b3b48;
}
.карточка:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(20,25,50,.24); }
.карточка.тащим { opacity: .45; }

.карточка img.превью {
  width: 100%;
  aspect-ratio: 1 / 1;          /* обложка на доске — квадрат */
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 8px;
  display: block;
}

.клиент { font-weight: 600; margin-bottom: 3px; line-height: 1.3; }
.мелко { font-size: 14px; color: #6c6c75; }
.строка-карточки { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; }

.пусто { color: rgba(0,0,0,.55); font-size: 14px; padding: 6px 4px; }

/* --- Обычные страницы -------------------------------------------------- */

.страница { max-width: 980px; margin: 0 auto; padding: 22px 20px 60px; }
.узкая { max-width: 460px; margin: 60px auto; padding: 0 20px; }

h1 { font-size: 26px; margin: 0 0 4px; }

/* Название карточки: заголовок и карандаш рядом. Поле правки показывается
   только по нажатию карандаша — в остальное время шапка чистая. */
.заголовок-заказа {
  display: flex;
  align-items: center;
  gap: 8px;
}
.карандаш {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 4px 7px;
  color: #6c6c75;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.карандаш:hover { color: #3b3b48; border-color: #d8d3cb; background: #fff; }

.правка-имени { display: none; align-items: center; gap: 8px; }
.правка-имени.видно { display: flex; }
input.имя-клиента {
  font-size: 22px;
  font-weight: 700;
  color: #3b3b48;
  padding: 4px 8px;
  width: auto;
  min-width: 240px;
}
ont-size: 19px; margin: 26px 0 10px; }

.блок {
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.поле { margin-bottom: 12px; }
.поле label { display: block; font-size: 14px; color: #6c6c75; margin-bottom: 4px; }

input[type=text], input[type=password], input[type=number], input[type=date],
select, textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #d3d7e4;
  border-radius: 6px;
  font-size: 17px;
  font-family: inherit;
  /* Введённое значение — чёрным, а не фирменным графитом: требование
     владельца 25.08.2026, чтобы заполненное поле било в глаза рядом с
     пустым. Графит остаётся цветом остального текста системы. */
  color: #000;
  background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #b9cff0; border-color: #7aa7e6; }

/* ── Где заполнено, а где нет ──────────────────────────────────────────
   На длинной форме одинаковым цветом не видно, какое поле человек заполнил,
   а какое пропустил: «— выбрать —» в списке выглядело как выбранное значение.
   Поэтому пустое поле бледное, заполненное — обычным тёмным текстом.
   Класс «не-заполнено» вешает место.js: чистым CSS пустой список и пустую
   дату так не поймать.
   Бледный #757581 даёт 4,5:1 на белом — читается и на мониторе у станка. */
input::placeholder, textarea::placeholder { color: #757581; opacity: 1; }
input.не-заполнено, select.не-заполнено, textarea.не-заполнено { color: #757581; }
/* Сам список раскрывается обычным цветом: бледной остаётся только строка
   «— выбрать —», а не все варианты в нём. */
select.не-заполнено option { color: #000; }
textarea { min-height: 74px; resize: vertical; }

.кнопка {
  display: inline-block;
  padding: 9px 16px;
  background: #2f6fd0;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.кнопка:hover { background: #2861bb; text-decoration: none; }
.кнопка.серая { background: #eceef5; color: #3b3b48; }
.кнопка.мелкая { padding: 5px 11px; font-size: 16px; }

.ошибка {
  background: #fdecec;
  border: 1px solid #f3c2c2;
  color: #a32f2f;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}

.предупреждение {
  background: #fff6e0;
  border: 1px solid #f0d9a0;
  color: #7a5a12;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 14px;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #eceef5; }
th { font-size: 14px; color: #6c6c75; font-weight: 600; }
td.число, th.число { text-align: right; font-variant-numeric: tabular-nums; }

.пара { display: flex; gap: 14px; }
.пара > * { flex: 1; }

.метка-этапа {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

/* --- Карточка-ТЗ: слева поля, справа рендеры и техкарта ----------------- */
/* Повторяет бумажное ТЗ на производство, к которому привыкли в цеху. */

.широкая { max-width: 1240px; }

/* Календарь занимает всю ширину окна: чем больше дней видно сразу, тем он
   полезнее. Поля оставляем небольшие, чтобы сетка не липла к краям. */
.во-всю-ширину { max-width: none; padding: 18px 16px 40px; }

.шапка-заказа {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.тз-макет {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 18px;
}

.тз-поля {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
}

.тз-строка { margin-bottom: 9px; }

/* Серая плашка-заголовок — как в таблице ТЗ */
.тз-подпись {
  background: #a8a9ad;   /* GT Silver */
  color: #3b3b48;
  font-size: 14px;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 3px;
}

/* Все ячейки, куда вписывают данные, одного размера — независимо от того,
   поле это, список, календарь или значение только для чтения. Иначе строки
   в карточке гуляют по высоте: у календаря был свой шрифт, у списка — своя
   высота от браузера, у нередактируемого значения — вообще другая. */
.тз-значение,
input.тз-значение,
select.тз-значение,
div.тз-значение {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  color: #3b3b48;
  background: transparent;
}
/* Календарь и список — тем же размером; стрелку и иконку рисует браузер */
input.тз-значение[type=date] { font: inherit; font-size: 16px; }
select.тз-значение { appearance: auto; }
input.тз-значение[type=date]::-webkit-calendar-picker-indicator { opacity: .45; }
input.тз-значение[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.тз-значение:hover { border-color: #d3d7e4; background: #fbfbfd; }
.тз-значение:focus { border-color: #7aa7e6; background: #fff; outline: 2px solid #b9cff0; }
.тз-значение.только-чтение { color: #3b3b48; }

.тз-картинки { display: flex; flex-direction: column; gap: 18px; }

.картинки-блок {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px;
}
.картинки-блок h3 {
  margin: 0 0 10px;
  font-size: 18px;
  text-align: center;
}

/* Картинки крупные: в цеху смотрят с телефона и с монитора у станка,
   мелкие превью бесполезны. min() нужен, чтобы на узком экране картинка
   не вылезала за край страницы.

   Рендеры — квадратные: изделие круглое или почти круглое, квадрат его
   вмещает без лишних полей. Техкарты — лист А4 лёжа (297×210), это документ,
   и в своих пропорциях он читается, а не плавает в пустом квадрате. */
/* Три квадратные картинки в ряд, дальше — следующий ряд */
.сетка-картинок {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.сетка-техкарт {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
  gap: 12px;
}

.картинка { margin: 0; }
.картинка img {
  width: 100%;
  aspect-ratio: 1 / 1;          /* рендер — квадрат */
  height: auto;
  object-fit: contain;
  background: #f1f2f6;
  border: 1px solid #e3e5ee;
  border-radius: 6px;
  display: block;
}
.сетка-техкарт .картинка img {
  aspect-ratio: 297 / 210;      /* А4 по горизонтали */
}
.картинка.обложка img { border-color: #4e9c66; border-width: 2px; }
.картинка figcaption {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 5px;
  font-size: 14px;
}

.значок-обложки { color: #2e7549; font-weight: 600; }

.ссылка-кнопка {
  background: none;
  border: 0;
  padding: 0;
  color: #2f6fd0;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.ссылка-кнопка:hover { text-decoration: underline; }
.ссылка-кнопка.удалить { color: #a32f2f; }

/* Пустое место под картинку — как перечёркнутый прямоугольник в макете */
.место-под-картинку {
  aspect-ratio: 1 / 1;
  max-height: 380px;
  border: 1px dashed #c8ccda;
  border-radius: 6px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), #dcdfe9 50%, transparent calc(50% + 1px)),
    linear-gradient(to bottom right, transparent calc(50% - 1px), #dcdfe9 50%, transparent calc(50% + 1px)),
    #f1f2f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c6c75;
  font-size: 16px;
}

.загрузка {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.загрузка input[type=file] { flex: 1; min-width: 180px; font-size: 16px; }

.план-этапа {
  background: #f2f8f4;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.план-этапа table { margin: 0; }
.план-этапа td { border-bottom-color: #e0ece4; }

/* --- Карточка «столбцом»: описание → фото → техкарты → смета и факт ----- */
/* Читается как разговор о заказе: что заказали, как выглядит, как делать,
   сколько заложено и сколько вышло. Цвета фирменные: золото и графит. */

/* Панель этапов прилипает под шапкой и едет вместе со страницей: карточка
   длинная, а переводить заказ нужно с любого места. Шапка сидит на z-index 20,
   поэтому панель ниже — 15, чтобы уезжала под неё, а не поверх. */
.панель-этапов {
  position: sticky;
  top: var(--высота-шапки, 52px);   /* высоту шапки замеряет место.js */
  z-index: 15;
  background: #f4f5f9;       /* фон страницы, иначе текст просвечивает под панелью */
  margin: 0 -20px 12px;
  padding: 10px 20px 2px;
  box-shadow: 0 6px 10px -8px rgba(20,25,50,.35);
}
.панель-этапов .пульт-этапа { margin-bottom: 8px; }
.панель-этапов .ответ-перевода { margin-bottom: 8px; }

/* Дорожка этапов — где карточка сейчас и сколько ещё правее */
.дорожка {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  overflow-x: auto;
}
.шаг {
  flex: 1 1 0;
  min-width: 78px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid #d8d3cb;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.25;
  color: #6c6c75;
}
.шаг.пройден { background: #ede6dd; border-color: #c9bda9; color: #3b3b48; }
.шаг.тут {
  background: #b79b77;
  border-color: #3b3b48;
  border-width: 1.5px;
  color: #000;
  font-weight: 600;
}
.номер-шага { display: block; font-weight: 700; font-size: 14px; }

/* Шаг, по которому можно кликнуть, чтобы перевести карточку туда */
.шаг.кликабельный {
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.шаг.кликабельный:hover { border-color: #3b3b48; background: #ede6dd; }

/* Дорожка со стрелками по бокам: шаг назад и шаг вперёд по этапам */
.ряд-этапов {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.ряд-этапов .дорожка { flex: 1 1 auto; margin-bottom: 0; }

.стрелка {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: #3b3b48;
  background: #fff;
  border: 1px solid #d8d3cb;
  border-radius: 6px;
  cursor: pointer;
}
.стрелка:hover { background: #ede6dd; border-color: #3b3b48; }
.стрелка.пустая { visibility: hidden; cursor: default; }

.ответ-перевода {
  padding: 9px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-weight: 600;
}
.ответ-перевода.хороший { background: #eef6f0; border: 1px solid #cfe4d6; color: #2e7549; }
.ответ-перевода.плохой  { background: #fdecec; border: 1px solid #f3c2c2; color: #a32f2f; }

/* Поле, которое только что сохранили — подсветим, чтобы глаз нашёл место */
.только-сохранено {
  background: #eef6f0;
  outline: 2px solid #cfe4d6;
  border-radius: 6px;
}
.имя-шага {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Описание заказа — текстом, как его присылает бот перед сметой.
   Не таблица: у каждого изделия свой набор параметров. */
.описание-заказа {
  padding: 12px 14px;
  background: #f7f5f1;
  border-left: 3px solid #b79b77;   /* GT Gold — «это пришло из бота» */
  border-radius: 4px;
  margin-bottom: 12px;
}
.строка-описания { line-height: 1.5; }
.строка-описания.главная { font-weight: 700; font-size: 19px; margin-bottom: 4px; }

/* Корректировки — жирным под описанием. Описание бота не правится никогда,
   уточнения дописываются сюда: видно, кто и когда что поправил. */
.корректировки {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #b79b77;
}
.подпись-корректировок {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c6c75;
  margin-bottom: 6px;
}
.корректировка {
  font-weight: 700;
  line-height: 1.45;
}
.корректировка + .кто-когда { margin-bottom: 8px; }
.кто-когда { font-size: 14px; color: #6c6c75; }
.правлено { color: #7a5a12; }
.правка-строки { display: inline-block; margin-left: 6px; }
.правка-строки > summary { font-size: 13px; }
.правка-строки textarea { margin-top: 6px; }
.корректировки > *:last-child { margin-bottom: 0; }

/* Фон и обратная сторона — строкой в описании, правится на месте */
.строка-фона {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  position: relative;
}
.подпись-фона { white-space: nowrap; }
.строка-фона input[type=text] { flex: 1 1 auto; width: auto; padding: 4px 8px; }

/* Кем и когда посчитана смета — служебная строка, мельче обычного текста */
.кем-посчитана {
  font-size: 13px;
  color: #6c6c75;
  margin: 8px 0 0;
}

.цены-бота {
  padding: 8px 0;
  border-top: 1px solid #e6e2da;
  line-height: 1.6;
}

/* Итог по заказу: слева план по расчёту бота, справа факт со сравнением */
.итог-заказа {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.сторона-итога { min-width: 0; }
.сторона-итога.факт-сторона {
  padding-left: 18px;
  border-left: 1px solid #e6e2da;
}
.итог-таблица td { padding: 8px 8px; }
.итог-таблица .число { white-space: nowrap; }
col.к-показатель { width: 28%; }
col.к-план       { width: 22%; }
col.к-факт       { width: 22%; }
col.к-разница    { width: 28%; }
/* в этой таблице поля не вводят — подсветку стороны факта убираем */
.итог-таблица td:nth-child(n+3) { background: none; }
.доля {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #ede6dd;
  font-size: 14px;
  font-weight: 600;
}
.сравнение-итога {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
}
.сравнение-итога.хорошо { background: #eef6f0; color: #2e7549; }
.сравнение-итога.плохо  { background: #fdecec; color: #a32f2f; }

/* Цены заказа таблицей: расчёт, фактическая продажа, нестандартная упаковка */
.цены {
  width: 100%;
  margin-top: 12px;
  table-layout: fixed;
}
.цены th {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c6c75;
  border-bottom: 1px solid #e6e2da;
}
.цены td { vertical-align: middle; }
.цены td:first-child { width: 26%; }
.цены td:nth-child(2), .цены td:nth-child(3) { width: 18%; }
.цены .поля-карточки { margin: 0; position: relative; }
.цены input[type=text] { width: 100%; padding: 6px 8px; }
.цены input.в-колонке { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.цены .отметка { position: absolute; right: 4px; top: -14px; }
.есть-js .цены .только-без-js { display: none; }

/* Насколько фактическая продажа ушла от расчёта бота */
.отклонение {
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 16px;
}
.отклонение.хорошо { background: #eef6f0; color: #2e7549; }
.отклонение.плохо  { background: #fdecec; color: #a32f2f; }

.правка { margin-top: 12px; }
.правка > summary {
  cursor: pointer;
  color: #2f6fd0;
  font-size: 16px;
  width: max-content;
}
.правка > summary:hover { text-decoration: underline; }

/* Пустое место под техкарту — в пропорциях листа А4 лёжа */
.место-под-картинку.а4 { aspect-ratio: 297 / 210; }

/* Поля «Договор и сроки» — три колонки, значения правятся на месте */
.сетка-описания {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 14px;
}
.клетка-описания { min-width: 0; }
.широкая-клетка { grid-column: 1 / -1; }

.строка-денег {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e3e5ee;
}

/* Итоги план/факт по всему заказу. Когда до них долистали, они прилипают
   под панелью этапов: цифры «сколько заложено / потрачено / осталось» нужны
   перед глазами, пока заполняешь этапы ниже. Высоты шапки и панели замеряет
   место.js — угадывать числами нельзя, они зависят от шрифта. */
.итоги {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 18px;
  position: sticky;
  top: calc(var(--высота-шапки, 52px) + var(--высота-панели, 90px));
  z-index: 10;
  background: #fff;
  padding: 8px 0;
}
.итог {
  flex: 1 1 180px;
  padding: 10px 14px;
  background: #ede6dd;
  border-radius: 8px;
}
.цифра { font-size: 23px; font-weight: 700; color: #3b3b48; margin-top: 2px; }
.цифра.хорошо { color: #2e7549; }
.цифра.плохо  { color: #a32f2f; }
.мелко.хорошо { color: #2e7549; }
.мелко.плохо  { color: #a32f2f; }

/* Один этап: слева смета, справа факт */
.этап-строка {
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20,25,50,.10);
}
.этап-строка.впереди { opacity: .72; }

.этап-имя {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #f7f5f1;
  border-bottom: 1px solid #e6e2da;
  font-weight: 600;
}
.этап-строка.тут .этап-имя { background: #b79b77; color: #000; }
.этап-строка.пройден .этап-имя { background: #ede6dd; }

.номер-этапа {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #3b3b48;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  flex: none;
}

.бирка {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 10px;
  background: #3b3b48;
  color: #fff;
}
.бирка.тихая { background: none; border: 1px solid #b0aaa0; color: #6c6c75; }
.тихая { color: #6c6c75; }

.план-факт {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.сторона { padding: 10px 12px; min-width: 0; }
.план-сторона { background: #fbfaf8; border-right: 1px solid #e6e2da; }

.подпись-стороны {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c6c75;
  margin-bottom: 6px;
}

.итого-строка td { border-top: 1px solid #d8d3cb; border-bottom: 0; }

.итого-факта {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e6e2da;
}

/* Поле факта: подпись, поле, кнопка-галочка в одну строку */
.поле-этапа { margin-bottom: 8px; }
.поле-этапа label { display: block; font-size: 14px; color: #6c6c75; margin-bottom: 3px; }
.ввод-этапа { display: flex; gap: 6px; align-items: center; }
.ввод-этапа .кнопка { flex: none; padding: 5px 10px; }

/* Поля этапов сохраняются сами. Кнопка «ОК» нужна только если JS не работает:
   скрипт ставит на страницу класс «есть-js» и кнопка уходит. Если запрос не
   прошёл (связь пропала), скрипт вешает форме «без-связи» и кнопка
   возвращается — сохранить руками. */
.есть-js .поле-этапа .только-без-js { display: none; }
.есть-js .поле-этапа.без-связи .только-без-js { display: inline-block; }

.строка-сохранения {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  min-height: 18px;
}
.есть-js .поля-карточки .только-без-js { display: none; }
.есть-js .поля-карточки.без-связи .только-без-js { display: inline-block; }

.отметка {
  flex: none;
  font-size: 14px;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.отметка.видно { opacity: 1; }
.отметка.хорошо { color: #2e7549; }
.отметка.плохо  { color: #a32f2f; opacity: 1; }
.звёздочка { color: #a32f2f; }

.что-спросят { margin: 0 0 6px; padding-left: 18px; }
.что-спросят li { margin-bottom: 2px; }

/* --- Операции этапа: кол-во × тариф = сумма ---------------------------- */
/* Ширины колонок жёсткие: без этого одна широкая ячейка растягивает колонку,
   и поля в соседних строках разъезжаются. */

.операции { padding: 14px 16px 6px; }

.таблица-операций {
  width: 100%;
  table-layout: fixed;
}
col.к-операция { width: 38%; }
col.к-смета    { width: 14%; }
col.к-кол      { width: 16%; }
col.к-тариф    { width: 16%; }
col.к-сумма    { width: 16%; }
col.к-где      { width: 32%; }   /* «где делали» — на этапе матрицы */
.таблица-операций select {
  width: 100%;
  padding: 6px 8px;
}

/* Шапка в два уровня: слева план из сметы, справа факт */
.шапка-групп td {
  border-bottom: 0;
  padding-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c6c75;
}
.группа-план { text-align: right; }
.группа-факт {
  /* «Факт» стоит над колонкой сумм — там, где итог этой части */
  text-align: right;
  background: #f7f5f1;
  border-radius: 6px 6px 0 0;
}

.таблица-операций th {
  font-size: 13px;
  font-weight: 700;
  color: #6c6c75;
  border-bottom: 1px solid #d8d3cb;
  white-space: nowrap;
}
.таблица-операций td { vertical-align: middle; }
.таблица-операций td:nth-child(n+3) { background: #fbfaf8; }   /* сторона факта */

/* Поля внутри таблицы: одинаковые по всей колонке, цифры справа */
.таблица-операций .поле-этапа { margin: 0; position: relative; }
.таблица-операций .поле-этапа input[type=text] {
  width: 100%;
  padding: 6px 8px;
  text-align: right;
}
.строка-расходов input[type=text]:not(.сумма-расхода) { text-align: left; }
.таблица-операций .отметка { position: absolute; right: 4px; top: -14px; }
.есть-js .таблица-операций .только-без-js { display: none; }

.сумма-операции { font-weight: 600; white-space: nowrap; }
.строка-расходов td { border-top: 1px solid #e6e2da; }
.строка-расходов .ссылка-кнопка { display: block; font-size: 12px; }

/* Добавление расхода — строкой в стиле таблицы: «плюс», описание, сумма
   справа под колонкой сумм. Ширины подогнаны под колонки таблицы. */
.добавить-расход {
  display: flex;
  gap: 8px;
  align-items: center;
}
.плюс {
  flex: 0 0 32px;
  height: 32px;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  color: #3b3b48;
  background: #fff;
  border: 1px solid #d8d3cb;
  border-radius: 6px;
  cursor: pointer;
}
.плюс:hover { background: #ede6dd; border-color: #3b3b48; }

.добавить-расход .за-что {
  flex: 1 1 auto;
  width: auto;
  text-align: left;
}
/* Сумма расхода лежит в колонке сумм и ведёт себя как поля операций:
   во всю ячейку, цифры по правому краю. */
.таблица-операций .сумма-расхода {
  width: 100%;
  padding: 6px 8px;
  text-align: right;
  /* как цифры в этом столбце выше */
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Страница выбора шрифта -------------------------------------------- */

.образец { padding: 18px 20px; }
.образец.выбранный { box-shadow: 0 0 0 2px #b79b77; }

.шапка-образца {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.выбор-образца { flex: none; }

/* --- Форма ручного заказа: параметры как в боте --------------------------- */

.сетка-параметров {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 16px;
}
.сетка-параметров .поле { margin-bottom: 8px; }

@media (max-width: 900px) {
  .сетка-параметров { grid-template-columns: 1fr; }
}

/* --- Список смет ------------------------------------------------------- */

tr.смета:hover { background: #f6f8fd; }
.поиск { display: flex; gap: 10px; margin-bottom: 16px; }
.поиск input { flex: 1; }

@media (max-width: 900px) {
  .тз-макет { grid-template-columns: 1fr; }
  .сетка-картинок { grid-template-columns: 1fr; }
  /* Смета и факт друг под другом, описание в одну колонку */
  .план-факт { grid-template-columns: 1fr; }
  .план-сторона { border-right: 0; border-bottom: 1px solid #e6e2da; }
  .сетка-описания { grid-template-columns: 1fr; }
}

/* Кнопка «Печать СЛП» в шапке карточки: бумага в цех, не действие над заказом,
   поэтому спокойная — рамка графитом, без золотой заливки. */
.шапка-заказа { align-items: flex-start; }
.печать-слп {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #3b3b48;
  color: #3b3b48;
  text-decoration: none;
}
.печать-слп:hover { background: #b79b77; color: #000; }

/* ─── Архив закрытых заказов ─────────────────────────────────────────── */
.отбор-архива {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.отбор-архива select,
.отбор-архива input[type="search"] {
  font: inherit;
  padding: 5px 8px;
  border: 1px solid #b7b5b0;
  border-radius: 6px;
  background: #fff;
}
.таблица-архива { width: 100%; border-collapse: collapse; }
.таблица-архива th,
.таблица-архива td {
  padding: 6px 8px;
  border-bottom: 1px solid #e2e0dc;
  text-align: left;
  vertical-align: top;
}
.таблица-архива th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #6c6c75;
  border-bottom: 2px solid #3b3b48;
}
.таблица-архива .число { text-align: right; }
.таблица-архива .итого-строка td { border-top: 2px solid #3b3b48; border-bottom: none; }
.а-номер { width: 44px; }
.а-тираж { width: 72px; }
.а-отгрузка { width: 110px; }
.а-продажа, .а-себест, .а-выручка { width: 120px; }
.а-менеджер { width: 130px; }

/* Пометка на карточке доски: производство своё сделало, ждём деньги */
.карточка .ждём-деньги {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 4px;
  background: #3b3b48;
  color: #fff;
  font-size: 11px;
}

/* ─── Оплата и отгрузка в карточке ───────────────────────────────────── */
.ряд-оплаты {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 14px;               /* как в сетке описания — строки в один ряд */
}
.клетка-денег { min-width: 0; }
.ряд-отметок {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e0dc;
}
.встроенная { display: inline; margin: 0; }
.отметка-события { font-size: 13px; }
.отметка-события.пусто { color: #6c6c75; }
.кнопка.тихая {
  background: #fff;
  border: 1px solid #b7b5b0;
  color: #6c6c75;
}
.кнопка.главная { background: #b79b77; color: #000; border: 1px solid #3b3b48; }

/* Пометка вида картинки в карточке: техкарта на печати идёт во всю ширину */
.значок-вида {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #3b3b48;
  border-radius: 4px;
  font-size: 11px;
}

/* ─── Сотрудники и права ─────────────────────────────────────────────── */
.плашка-сообщения {
  margin: 12px 0;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #3b3b48;
}
.таблица-людей, .таблица-прав { width: 100%; border-collapse: collapse; }
.таблица-людей th, .таблица-людей td,
.таблица-прав th, .таблица-прав td {
  padding: 6px 8px;
  border-bottom: 1px solid #e2e0dc;
  text-align: left;
  vertical-align: middle;
}
.таблица-людей th, .таблица-прав th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #6c6c75;
  border-bottom: 2px solid #3b3b48;
}
.таблица-людей input[type="text"],
.таблица-людей select {
  font: inherit;
  font-size: 15px;
  padding: 4px 6px;
  width: 100%;
  border: 1px solid #d5d3ce;
  border-radius: 4px;
  background: #fff;
}
.таблица-людей tr.отключён { background: #f3f2f0; color: #6c6c75; }
.строка-действий { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.сброс-пароля summary { cursor: pointer; font-size: 13px; }
.сброс-пароля input[type="text"] { width: 170px; margin: 6px 6px 0 0; }
.л-имя { width: 26%; }
.л-логин { width: 15%; }
.л-роль { width: 18%; }
.л-вход { width: 9%; }
.таблица-прав .число { text-align: center; }

/* ─── База знаний ────────────────────────────────────────────────────── */
.список-статей { margin: 0; padding-left: 22px; }
.список-статей li { margin-bottom: 8px; line-height: 1.4; }
.список-статей li.скрытая { color: #6c6c75; }
.новая-статья { margin-top: 14px; }
.новая-статья summary,
.список-статей + details summary { cursor: pointer; }
.поле.узкое input { max-width: 140px; }

/* Текст учебника: читают у станка, поэтому крупнее и с воздухом */
.текст-статьи { font-size: 17px; line-height: 1.55; max-width: 44em; }
.текст-статьи p { margin: 0 0 14px; }

/* ─── Плитки учебников в базе знаний ─────────────────────────────────── */
.плитки-учебников {
  display: grid;
  /* Ширину плитки держим в узде: у технолога раздел один, и растянутая на всю
     страницу кнопка выглядела нелепо. Теперь она одного размера у всех. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: start;
  gap: 16px;
  margin: 16px 0 8px;
}
.плитка {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(59, 59, 72, .12);
}
.лицо-плитки {
  display: block;
  color: #3b3b48;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.лицо-плитки:hover { text-decoration: none; }
.плитка:not(.готовится):hover {
  box-shadow: 0 4px 14px rgba(59, 59, 72, .2);
  transform: translateY(-2px);
}
/* Кнопка учебника — квадрат. Сама картинка тоже квадратная и уже собрана с
   белыми полями: станок в ней занимает 80% высоты, по центру. Поэтому здесь
   она просто вписывается целиком, без второго уменьшения. */
.картинка-плитки {
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.картинка-плитки img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.рисунок-плитки { display: block; width: 100%; height: 100%; object-fit: cover; }
.подпись-плитки {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid #e2e0dc;
}
.название-плитки { font-size: 18px; font-weight: 700; }

/* Плитка без адреса — приглушена и не ведёт никуда */
.плитка.готовится { opacity: .72; }
.плитка.готовится .лицо-плитки { pointer-events: none; }

.настройка-плитки { padding: 0 14px 12px; }
.настройка-плитки summary { cursor: pointer; font-size: 13px; color: #6c6c75; }
.настройка-плитки form { margin-top: 10px; }

/* ─── Сотрудники карточками ──────────────────────────────────────────── */
.сводка-людей { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 18px; }
.плашка-числа {
  background: #fff;
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 128px;
  box-shadow: 0 1px 3px rgba(59, 59, 72, .1);
}
.плашка-числа.тихая { background: #f3f2f0; }
.число-крупно { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }

.люди-карточками {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.карточка-человека {
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 1px 3px rgba(59, 59, 72, .12);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.карточка-человека.вход-закрыт { background: #f3f2f0; }

.верх-карточки { display: flex; align-items: center; gap: 12px; }
/* Кружок с инициалами: фотографий сотрудников нет и заводить их незачем,
   а человека надо узнавать взглядом, а не читать строку. */
.кружок {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  background: #edece9;
  color: #3b3b48;
}
/* Цвет кружка по роли: производство — золото, руководство — графит */
.роль-владелец .кружок,
.роль-партнёр .кружок { background: #3b3b48; color: #fff; }
.роль-начальник .кружок,
.роль-технолог-штамп .кружок,
.роль-технолог-литьё .кружок { background: #b79b77; color: #000; }
.карточка-человека.вход-закрыт .кружок { background: #d8d6d2; color: #6c6c75; }

.кто-это { min-width: 0; }
.имя-человека { font-size: 17px; font-weight: 700; line-height: 1.2; }
.метка-закрыт {
  margin-left: auto;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c6c75;
}

.строки-человека { display: flex; flex-direction: column; gap: 6px; }
.строка-поля { display: flex; align-items: center; gap: 8px; }
.подпись-поля {
  flex: 0 0 46px;
  font-size: 12px;
  color: #6c6c75;
  text-transform: lowercase;
}
.строка-поля input,
.строка-поля select {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 5px 8px;
  border: 1px solid #d5d3ce;
  border-radius: 6px;
  background: #fff;
}
.строки-человека .кнопка { align-self: flex-start; margin-top: 2px; }

.низ-карточки {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid #eceae6;
}
.низ-карточки .сброс-пароля { margin-left: auto; }

/* ─── Календарь сдач ─────────────────────────────────────────────────── */
.шапка-календаря {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 10px;
}
.ход-календаря { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ход-календаря .разделитель {
  width: 1px;
  height: 20px;
  background: #d5d3ce;
  margin: 0 4px;
}

/* Сетка прокручивается вбок, а левые колонки остаются на месте: иначе на
   длинном отрезке не понять, чья это строка. */
.обёртка-календаря {
  overflow: auto;
  max-height: calc(100vh - 210px);
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(59, 59, 72, .12);
}
.календарь {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  table-layout: fixed;          /* ширины из colgroup, а не «как получится» */
  width: 100%;
  min-width: 900px;             /* на узком экране появится прокрутка вбок */
}
/* Три левые колонки — строго заданной ширины: от этих же чисел считается,
   где им «прилипнуть». Дни ширины НЕ имеют — они делят между собой остаток,
   поэтому календарь занимает всю страницу, а левые колонки не разъезжаются.
   Раньше ширину имели и дни: таблица растягивалась целиком, все колонки
   росли пропорционально, а «прилипшие» оставались на старых местах — и
   наезжали на сетку. */
.календарь col.к-клиент { width: 218px; }
/* Изделие сузили на треть (было 104): длинных названий там не бывает,
   а лишняя ширина отбирала место у дней. */
.календарь col.к-изделие { width: 73px; }
.календарь col.к-тираж { width: 73px; }
.календарь th,
.календарь td {
  border-right: 1px solid #eceae6;
  border-bottom: 1px solid #eceae6;
  padding: 0;
  height: 44px;                 /* две строки записи помещаются целиком */
  text-align: center;
  vertical-align: middle;
  background: #fff;
}
.календарь thead th {
  position: sticky;
  z-index: 3;
  padding: 5px 2px;
  font-weight: 600;
  color: #6c6c75;
}
/* Две строки шапки: месяцы сверху, дни под ними. Каждая липнет на своей высоте,
   чтобы при прокрутке вниз обе оставались видны. */
.календарь thead .строка-месяцев th {
  top: 0;
  height: 24px;
  border-bottom: 1px solid #eceae6;
}
.календарь thead .строка-дней th {
  top: 24px;
  border-bottom: 2px solid #3b3b48;
}
.календарь .месяц-шапка {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  color: #b79b77;
  background: #fdfbf8;
  border-right: 1px solid #e2ddd4;
}
/* Левые колонки БЕЗ прилипания. Прилипание держит их позицию отдельно от
   таблицы: стоит ширинам разойтись — колонки наезжают на сетку дней. Ловили
   это дважды 18.08.2026; проще отказаться, чем чинить по кусочку. */
/* Название заказа — единственное, что стоит слева: его читают, а не
   сравнивают. Всё остальное по центру и по высоте, чтобы строка выглядела
   ровной. */
.календарь .к-клиент {
  text-align: left;
  padding: 7px 10px;
  white-space: nowrap;
  background: #fff;
  vertical-align: middle;
  font-weight: 600;
}
.календарь .к-изделие,
.календарь .к-тираж,
.календарь .к-срок {
  text-align: center;
  vertical-align: middle;
  padding: 7px 4px;        /* одинаковые поля: колонки выглядят парой */
  white-space: nowrap;
  background: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
}
.календарь .к-тираж {
  font-variant-numeric: tabular-nums;
  /* черта отделяет описание заказа от сетки дней */
  border-right: 2px solid #3b3b48;
}
/* Крайний столбец: срок, не попавший в показанный отрезок */
.календарь col.к-срок { width: 104px; }
.календарь .к-срок {
  border-left: 2px solid #3b3b48;
  font-size: 13px;
}
.календарь .к-срок.просрочен-срок { color: #c0392b; font-weight: 600; }
/* Длинное название не ломает сетку, а обрезается многоточием.
   ⚠️ display:block ставим ТОЛЬКО ссылке внутри ячейки. Самой ячейке нельзя:
   от этого она выпадает из таблицы и повисает плавающим блоком поверх сетки —
   наступили 18.08.2026, колонка «изделие» уехала поверх дней. */
.календарь .к-клиент a { display: block; }
.календарь .к-клиент a,
.календарь .к-изделие {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.календарь thead .к-тираж { border-right: 2px solid #3b3b48; }
.календарь thead .к-срок { border-left: 2px solid #3b3b48; }
.этап-строки { display: block; font-weight: 400; }

/* День в шапке: буква недели над числом. Ширину не задаём — дни делят остаток
   страницы между собой. */
.календарь .день { line-height: 1.15; }
.календарь .день .буква { display: block; font-size: 10px; text-transform: uppercase; }
.календарь .день .число { display: block; font-size: 13px; color: #3b3b48; }


/* Выходные — светлее, без цвета: сетка должна оставаться спокойной */
.календарь .выходной { background: #f5f4f2; }
/* Сегодня — единственная вертикаль, которую видно сразу */
.календарь .сегодня {
  background: #fbf6ef;
  box-shadow: inset 1px 0 0 #b79b77, inset -1px 0 0 #b79b77;
}
.календарь thead .сегодня { color: #000; background: #b79b77; }
.календарь thead .сегодня .число { color: #000; font-weight: 700; }

/* Сдача — плашка золотом, просроченная — красным */
/* Сдача помечается флажком: слово «сдача» не влезает в узкую клетку, когда
   показываешь два месяца сразу. Дата остаётся в подсказке при наведении. */
.календарь td.сдача a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: #b79b77;
  color: #000;
  text-decoration: none;
}
.календарь td.сдача svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.календарь td.сдача-просрочена a { background: #c0392b; color: #fff; }

/* Текст только для голосовых программ — на экране его нет */
.только-читалке {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.календарь tr.просрочен .к-клиент a { color: #c0392b; }

.календарь tbody tr:hover td,
.календарь tbody tr:hover th { background: #fbfbfa; }
.календарь tbody tr:hover .сегодня { background: #f7efe3; }

.список-вне { margin: 0; padding-left: 20px; }
.список-вне li { margin-bottom: 6px; }

/* Записи на клетках календаря */
.календарь td.можно-писать { cursor: text; }
.календарь td.можно-писать:hover { background: #fbf7f1; }
.календарь .запись {
  display: block;
  padding: 2px 4px;
  font-size: 11px;
  line-height: 1.2;
  color: #3b3b48;
  text-align: center;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.календарь td.с-записью { background: #fdfbf8; }
/* Поле правки разворачивается шире клетки — иначе в неё ничего не написать */
.календарь .поле-записи {
  position: absolute;
  z-index: 5;
  width: 220px;
  margin-left: -2px;
  font: inherit;
  font-size: 13px;
  padding: 5px 7px;
  border: 1px solid #3b3b48;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(59, 59, 72, .18);
}
.календарь td { position: relative; }

/* Запись прямо в клетке: поле без рамки, чтобы сетка оставалась спокойной.
   Рамка появляется, когда в поле пишут. Сделано формой, а не скриптом —
   работает всегда, даже если javascript не загрузился. */
.запись-в-клетке { margin: 0; height: 100%; }
/* Многострочное поле во всю клетку: длинная пометка переносится внутри, а не
   уезжает за край. Полосы прокрутки не показываем — текст короткий. */
.запись-в-клетке textarea {
  width: 100%;
  height: 100%;
  min-height: 40px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11px;
  line-height: 1.15;
  padding: 2px 3px;
  color: #3b3b48;
  /* Пометка стоит по центру клетки — и по ширине, и по высоте, как всё
     остальное в сетке. Выравнивание по высоте у многострочного поля делается
     не vertical-align, а полями сверху и снизу: они считаются от строки. */
  text-align: center;
  align-content: center;
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
}
/* Запасной путь для браузеров, которые не понимают align-content у поля:
   пустое поле показывает текст по центру за счёт одинаковых полей. */
@supports not (align-content: center) {
  .запись-в-клетке textarea { padding-top: 6px; }
}
.запись-в-клетке textarea:hover { background: #fbf7f1; }
.запись-в-клетке textarea:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 0 0 2px #3b3b48;
  overflow: auto;
  position: relative;
  z-index: 4;
}
/* Клетка с записью — только чуть светлее фоном, без полоски слева:
   полоска резала строку и мешала читать сам текст. */
.календарь td.с-записью { background: #fbfaf8; }
.календарь td.с-записью .запись-в-клетке textarea { background: transparent; }

/* Короткая вспышка после сохранения записи: видно, что не потерялось */
.календарь td.сохранено { box-shadow: inset 0 0 0 2px #b79b77; }

/* Направление сметы в списке: штамп или литьё */
.метка-направления {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #edece9;
  color: #3b3b48;
}
.метка-направления.литьё { background: #3b3b48; color: #fff; }

/* Удаление сделки: тихая кнопка внизу карточки — действие необратимое,
   привлекать к нему внимание не нужно, но и прятать нельзя. */
.блок.опасное { background: transparent; box-shadow: none; padding: 8px 0 0; }
.блок.опасное form { display: flex; align-items: center; gap: 10px; }
.кнопка.опасная {
  background: #fff;
  border: 1px solid #c0392b;
  color: #c0392b;
}
.кнопка.опасная:hover { background: #c0392b; color: #fff; }

/* ── Полоса тестовой копии ─────────────────────────────────────────────
   Показывается только на тестовом контуре (ТЕСТОВЫЙ_КОНТУР=да в .env).
   Нарочно кричащая и не по бренду: полоса-предупреждение, а не украшение —
   боевая и тестовая вкладки должны различаться боковым зрением. */
.тест-полоса {
  background: repeating-linear-gradient(45deg, #f6c744, #f6c744 18px, #3b3b48 18px, #3b3b48 36px);
  color: #fff;
  text-align: center;
  font-weight: 700;
  padding: 8px 12px;
  letter-spacing: .4px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 0 2px rgba(0,0,0,.9);
}